bravo my life!

개발중에는 이슈가 없었는데,테스트하기 위해 빌드했을 때 빌드 중 오류가 발생했다. 나중에 운영 배포 때 발견하지 않은게 다행이다. 오류의 내용은 다음과 같다.useSearchParams() should be wrapped in a suspense boundary at page "/login".useSearchParams()는 suspense 안에 있어야 하는데,그렇지 않으면 서버에서 실행이 불가능하다고 판단하고 빌드를 중단하게 된다. 우선 나의 코드 구조는 대략 이렇다.// layout.tsxexport default function RootLayout({ children,}: Readonly) { return ( {children} ..

페이지네이션으로 페이지 이동 후,화면의 스크롤읠 최상단으로 이동시키기 위해 아래의 코드를 작성했다. useEffect(() => { window.scrollTo(0, 0); }, [list]);의존성 배열에 list를 넣고 list가 변경되는 경우 스크롤을 최상단으로 이동하는 코드다. 그런데 작동이 되지 않는다.이유는 아주 간단했지만 원인 파악에 꽤 시간을 소비했다.내 경우 body에 over-flow 문제였다.html,body { max-width: 100vw; /* overflow-x: hidden; */ height: 100vh; box-sizing: border-box !important; -webkit-box-sizing: border-box !important; -moz-b..

약 3년만에 서비스 리뉴얼 게획이 잡혔고 개발이 진행됐다. 프로젝트 세팅을 해야 했다.프로젝트 세팅사용할 프레임워크, 라이브러리next.js: 15.1.3tailwindcss: 3.4.1axios: 1.7.9clsx: 2.1.1tailwindcss-preset-px-to-rem: 1.2.1zustand: 5.0.3react-hook-form: 7.54.2yup: 1.61라이브러리의 사용 이유tailwindcss: 기존에는 styled-components를 사용했다. 스타일을 적용하기 위해서는 컴포넌트를 생성해야 하는데 코드량이 많아지는 문제가 있었고, ssr방식과 런타임 방식인 css-in-js가 궁합이 좋지 않았다. 또 컴포넌트의 이름을 고민해야 하는 시간이 아까웠다.clsx: tailwind를 좀 더..