전체 글

우선 , Next.js는 기본적으로 모든 페이지를 pre-rendering한다. 즉, 모든 페이지의 HTML를 미리 생성하고, 생성된 HTML은 자바스크립트 코드와 연결되어 유저와 페이지가 상호작용 할 수 있는 interactive한 페이지를 만들어낸다. 이것이 hydration이다. 🔥 문제상황 중고나라 웹사이트를 개발하며 처음으로 sentry를 들여다보며 자주 발생하는 error를 확인했다. Hydration failed because the initial UI does not match what was rendered on the server. 오류 문구 그대로 서버에서 그려지는 HTML 페이지와 클라이언트에서 그려지는 HTML 페이지가 다르기 때문에 문제가 발생하는 것이다. 즉, Pre-Rende..

✨ 들어가기 우선, 뒤죽박죽 섞여있는 회사 코드 안에서 비즈니스 로직을 분리하기 전에 프론트엔드 개발자로써 view와 business logic이 어떻게 다른지 명확하게 알고 있어야 한다. 📍 View 우선, view는 기본적으로 HTML을 보여주는 UI이며 사용자 이벤트를 통해 HTML을 업데이트 하는 것이다. 즉, view는 단순히 주입받은 정보를 보여줄 뿐이다. 여기서 주의할 점은 해당 과정안에 business logic과 관련된 부분이 있다면 view가 아닌 비즈니스 로직으로 작동하게 된다는 것이다. 다른 말로 비즈니스 로직이 개입되지 않아야 컴포넌트를 재사용할 수 있다는 것이다. 📍 View Logic isValid, errorText와 같은 UI/UX를 개선하는 코드 예를 들면, 비밀번호를 6..

💡 들어가기 현재 개발 중인 중고나라 기능에서 useMutaion을 내부에서 호출하는 커스텀 훅을 만들게 되면서 중첩 구조가 발생하는 문제가 발생했다. 그래서 지난 화요일에 수강하였던, [원티드] 프리온보딩 챌린지 12월 에서 알게 되었던, Function의 액션/계산/데이터로 리팩토링하기를 적용하고자 해당 기능개선 작업을 진행했다. 📍 문제상황 거래 하기 전, 상품 상세에서 채팅하기 or 안전거래 버튼을 눌렀을때, 일일 채팅방 생성 횟수 제한에 걸리게 되면 안내 모달을 띄워야 했다. 그러나, 두 버튼의 비즈니스 로직이 달랐다. 커스텀 훅으로 api 결과값을 확인했던 로직에서 클로저 문제가 발생해 중첩 모달을 제어하지 못하는 문제가 발생되었다. 버튼 작동 방식은 아래와 같았다. 채팅하기 채팅방 생성 ap..