jh.nrtv

서비스를 개선하는 작업에서 '관세/ 소비세'를 도입하는 작업을 진행했다. 결제에 전에 없던 요소가 생긴 것이기 때문에 서비스 내 판매가 일어난 데이터를 보여주는 결제 상세 화면이 수정이 필요했다. 당연히 가격을 다루는 여러 데이터를 계산해서 보여주는 로직도 함께 변경됐다.  프론트 어드민에서는 코드 특성 상 데이터를 가공해서 화면에 표시하는 경우가 많다.이번에도 당연히 그런 줄 알고 데이터를 임의로 계산 및 가공해서 화면에 표시했다.  그런데 그 결과로 계산이 잘못되어 이상한 결제가격이 화면에 보이는 오류가 확인됐다. ㅠㅠ  이에 오류에 대해서 회의 중에 잠깐 논하는 과정이 있었는데  시니어 개발자분께 '데이터를 임의 로 조작하는 것을 조심하라'는 피드백을 받았다.  서버에서 보내준 값은 정확했으나 프론..

개요현재 회사에서 만들고 있는 서비스는 4가지 마켓을 대응해야 한다. 기존 우리 서비스는 일본, 한국 등의 정수 가격만을 핸들링 하면 됐으나 해당 서비스를 개선 및 확장하는 과정에서 중국의 위안, 미국의 달러 소수점 가격이 보편적인 화폐를 대응하기 위해서 기능 개발을 진행했다. 크게 개발한 것은 두 가지이다. 1. 원하는 자릿수 제한된 소수 input 대응2. 수학 산식을 통해 나온 무한소수 원하는 자릿수 미만 처리  2번 개발의 경우 우리는 특정 계산(예를 들어 할인율 등)으로 인해서 소수점이 길어질 경우 (1.599999...) 플랫폼 공통 정책으로 반올림, 내림 등을 강제하지 않는다.소수점 몇 번째 자리까지 남길 것인지(ex.1, 0.1, 0.01... ), 해당 소수점 이하는 반올림, 올림, 내림..

Next.js로 진행하는 프로젝트에서 아래의 에러를 만났다.   이 에러에 대해서 공부하면서 다시 공부하게 된 것이 두 가지 있다.    1. Hydration 이슈 먼저 에러 문구에 적힌 Hydration이란 무엇일까? Hydration은 이미 서버에서 랜더링된 html을 client단에서 자바스크립트를 통해서 이벤트 처리, 상태관리 등이 가능한 fully interactive application 으로 바꾸는 과정을 뜻한다. 즉 서버에서 정적인 html을 받아들이고 파싱해서 초기 렌더링을 수행하고 JS코드로 해당 html을 (리액트 트리에 맞게)동적인 페이지로 전환하는 것을 말한다. 이를 통해서 앱의 초기 로딩 속도를 개선하고  SEO를 향상시킬 수 있다.  더보기SPA vs fully interac..

Next.js로 개발중인 개인 프로젝트에서 아이콘의 크기를 화면의 너비에 따라서 달라지게 하는 반응형을 적용하고자 미디어 쿼리를 사용해서 css의 적용을 다르게 보이게 했다. //header.jsx ... ... /* global.css */ .web_logoimg { @media screen and (max-width: 768px) { display: none; } } .mobile_logoimg { @media screen and (min-width: 768px) { display: none; } 해당 미디어쿼리가 로컬 테스트 환경에서는 정상적으로 작동했으나 Vercel 배포 이후에는 미디어 쿼리가 적용되지 않는 오류를 확인할 수 있었다. 위와같이 웹 화면에서 모바일 로고도 함께 보이고, 모바일 화면..