기초 개발 노트

React 상태 관리 문제 해결 과정

Next.js로 주문 내역 페이지를 만들고 있었다. 왼쪽에 주문 목록을 띄우고, 클릭하면 중간 섹션(Middle Section)에 상세 정보가 나와야 하는 구조였다. 근데 주문을 클릭해도 중간 섹션이 빈 채로 남아 있었다. 콘솔을 열어보니 이런 로그가 찍혀 있었다:page.tsx:189 Selected order in useEffect: undefinedpage.tsx:227 Order not found for selectedOrderId: 164API 호출은 잘 됐는데, 왜 데이터가 안 보이는 걸까? 하루를 이거 풀어보느라 씨름했다. 원인 파악코드를 뜯어보니 문제는 상태 관리에 있었다.상태 두 개로 나뉘어 있었다:sortedGroups: /api/orders/daily에서 받은 주문 데이터를 날짜별로 ..

POS 시스템에서 메뉴 데이터를 효율적으로 다루기 위해 usePosStore.ts라는 파일을 수정했다. 여기서 중요한 작업은 메뉴의 고유 번호(menuId)를 항상 확보하는 것이었다. 서버에서 데이터를 받아올 때 menuId가 빠져 있으면 문제가 생기는데, 이를 해결하기 위해 캐시라는 저장소를 활용했다. 문제: menuId가 빠진 데이터POS 시스템은 주문을 표시할 때 각 메뉴의 고유 번호(menuId)가 필요하다. 예를 들어, "라떼"라는 메뉴를 삭제하려면 그 메뉴의 menuId를 알아야 한다. 근데 서버에서 데이터를 받아올 때 가끔 이런 식으로 menuId 없이 오는 경우가 있었다: { "menuName": "matcha", "totalPrice": 4500, "totalCount": 1} 로그..

useMemo란? useMemo는 React에서 값(또는 연산 결과)을 메모이제이션(memoization)하여 불필요한 계산을 방지하는 Hook. 컴포넌트가 렌더링될 때마다 반복되는 비용이 큰 연산을 피하고, 캐싱된 값을 재사용할 수 있게 해준다. 결제 페이지에서 initialTotal과 changes 계산이 매 렌더링마다 반복되는 문제를 해결하기 위해 React의 useMemo를 활용했다. 이 과정에서 useMemo의 동작 원리와 사용법을 깊이 파악할 수 있었다.문제 상황기존 코드에서는 initialTotal이 매번 새로 계산되었다:const initialTotal = selectedItems.reduce((acc, item) => acc + item.price * item.quantity, 0); c..

최근 Next.js 프로젝트에서 GSAP를 활용해 섹션마다 애니메이션을 적용했는데, 모바일에서 로딩이 너무 느려서 LCP가 30초 이상 찍히기도 하고, Hydration Error까지 발생했다. 다음 버전으로 마이그레이션을 했더니 어느 정도 성능은 좋아졌지만, 여전히 스크롤 트리거가 제대로 동작하지 않거나, 불필요하게 렌더링이 많이 일어나는 문제가 있었다. 특히 섹션별로 GSAP 초기화를 각각 따로 두면서 “use client”를 남발하다 보니 코드가 복잡해지고 성능이 떨어진 느낌이었다. 해결 방안처음에는 애니메이션 초기화만 따로 떼어 놓으면 되지 않을까 하고 단순하게 생각했다. 그런데 막상 적용해보니 각 컴포넌트에서 불필요한 “use client” 선언이 많고, ScrollTrigger를 초기화할 때마..

Next.js 15로 업데이트한 뒤, 예상치 못한 Hydration 오류가 발생했다. typeof window !== 'undefined' 같은 조건문을 사용하는 코드에서 특히 문제가 심했다. SSR과 CSR에서 HTML이 다르게 렌더링되면서 React가 이를 감지하고 경고를 띄웠다. 해결하기 위해 여러 가지 시도를 해봤지만, 결국 Next.js 14와 React 18.2.0으로 다운그레이드하는 것이 가장 안정적인 방법이었다.Hydration 오류의 주요 원인typeof window !== 'undefined'** 사용**: Next.js 15에서는 SSR과 CSR에서 typeof window 조건문이 불일치를 일으킬 가능성이 높아졌다.스타일 동적 변경: GSAP, Swiper 같은 라이브러리들이 CSR..

1. App Router로 변경해야 하는 이유Next.js 14가 나오면서 공식 문서에서도 App Router를 권장했다. 기존 pages/ 폴더 기반의 Pages Router는 점차 유지보수 대상에서 밀려나고 있는 상황이었다.이번 기회에 프로젝트를 App Router로 마이그레이션하면서 변경해야 할 부분을 정리했다.주요 장점은 다음과 같았다.서버 컴포넌트 지원으로 클라이언트에서 불필요한 JS 실행을 줄일 수 있었다.레이아웃을 더 직관적으로 관리할 수 있었다.파일 기반 라우팅이 더욱 강력해졌다.TypeScript 없이도 사용 가능했다.대부분의 자료가 TypeScript 기반이었지만, 자바스크립트만으로도 App Router를 충분히 활용할 수 있었다.이번 마이그레이션 과정도 TS 없이 JavaScript만..

최근 프로젝트에서 Next.js에서 GSAP ScrollTrigger를 사용하려고 했는데, 여러 문제가 발생했다.SSR(서버 사이드 렌더링)과 GSAP가 충돌하면서 예상대로 동작하지 않았다.이 과정에서 발생한 오류들과 해결 방법을 정리해본다.1. ScrollTrigger가 정의되지 않는 오류❌ 문제Next.js에서 ScrollTrigger를 사용하려고 하면 ScrollTrigger is not defined라는 오류가 발생했다.이유를 찾아보니 Next.js는 서버에서 먼저 HTML을 렌더링하는데, GSAP의 ScrollTrigger는 브라우저에서만 실행되기 때문이었다.✅ 해결 방법useEffect 내부에서 import("gsap/ScrollTrigger")를 사용해 ScrollTrigger를 동적으로 로..