업무 도중 리다이렉트의 status code와 캐싱이 연관된 문제가 발생하였고,그에 대해 내용을 정리해야겠다는 생각이 들었습니다. 1) 서비스에서 url을 en에서 ko로 변경해도 en으로 고정이 된다?서비스에서는 언어 속성인 locale을 url 파라미터를 통해 보여줬으며, 만약 url 파라미터에 값이 없다면기본 값으로 ‘en’이 할당되어지고 쿠키를 통해 사용자 언어 속성을 저장하는 로직이 middleware에 설정되어 있었습니다. 그런데 이해가 안되는 부분이 있었는데요.서비스에 진입 후, en으로 설정되어있는 url을 ko로 바꿔도 콘텐츠는 영문으로 보여지는 문제가 발생하곤 했습니다.???왜?? url과 쿠키도 ko인데 어째서 영문(en) 콘텐츠가 나타날까요.. 2) 리다이렉트 status code가..

당시의 문제(@tanstack/react-table, @tanstack/react-query, next.js 14v 기반의 프로젝트에서 발생한 문제입니다.) 유저의 서비스 내 결제 내역을 보여주는 "크레딧"이라는 페이지에서동료가 작성한 테이블 관련 로직을 점검해보던 도중, 예상치 못한 성능 문제를 발견했는데요. table과 연관이 있는 비즈니스 로직에서 테이블 데이터를 콘솔로 확인해 보니로그가 끊임없이 발생하고 있었습니다. 무한 렌더링이 발생하면서 브라우저는 동작하지 않았어요. // 문제 발생 코드const useCreditTable = (columns: ColumnDef[]) => { const { offset } = useCreditPagination(); const { data: creditH..

1️⃣ 문제 발생RSC인 컴포넌트에서 next/headers의 cookies를 import 하여 사용했더니 에러가 발생했습니다.Error: × You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component. │ Learn more: https://nextjs.org/docs/getting-started/react-essentials │ │ ╭─[/Users/jiwooning/Desktop/.../src/app/.../components/list-ba..

이슈 발생경로와 원인사내에서 새로운 서비스를 개발하던 도중, 파스칼 케이스로 생성한 폴더명을스네이크 케이스로 변경하자는 동료분 의견이 있어 스네이크 케이스로 폴더명을 변경 후깃허브에 push 했지만 여전히 파스칼 케이스가 적용되어 있었는데요. 알고보니 git은 파일명 또는 폴더명의 대소문자를 구분하지 못하는 문제가 있었습니다.해결 방안git config core.ignorecase falsegit rm -r --cached .git add . git config core.ignorecase false을 터미널에 입력해주면 이후엔  대소문자를 인식하게 됩니다. 추가로 git 저장소에 캐싱된파일이 남아 있다면 터미널에 캐싱 관련 메시지가 보여지게 되는데캐시 관련 명령어로 캐시를 삭제해주면 해결됩니다.

vercel에서 가장 최근 내역인 사파리 브라우저 오류 관련 커밋을redeploy했고, 에러로 처리된 배포 결과를 받았는데요. 해당 기록은 Delete 했고, 일단 main에 머지를 한다면어떻게 보여질까 궁금해 깃허브의 PR을 통해 결과를 확인하니PR에서 체크가 완전히 이뤄지지 않아 문제가 되고 있었어요. conflict는 없었지만 이대로 합쳤을 때 100%어떤 문제가 발생할 것이라는 것은 확신했습니다.어떤 부분을 놓치고 있었을까redeploy할 때, 이전 cache를 유지하는 것에 체크를 안한 것이 문제였습니다.이전에 캐싱된 데이터와 redeploy 시도를 할 때 캐싱하는 데이터의 차이가 발생해문제가 일어난다고 예상했는데요.이유를 명확히 파악하지 못했지만 이유 파악 후, 나중에 업데이트를 하겠습니다.해..

문제 발생사내 프로젝트 진행 중, react-hook-form의watch로 email 값을 감지하는 부분에서 문제가 발생했습니다. 이메일로 전달받은 인증코드와 이메일 주소를 API를 통해 전달 후다음 화면으로 넘어가려던 타이밍이었는데요. 'Enter'키로 통신 함수를 호출하면통신을 마친 뒤 Chrome에서는 watch로 감지하던 email 값이 유지되는 반면,Safari에서는 값이 유지되지 않고 undefined로 초기화가 이뤄지는 오류가 발생했습니다. 드디어 크로스 브라우징 이슈를 경험하게 되었네요ㅎㅎㅎ원인 파악여기저기 console로 확인하며 체크해본 결과,특정 useEffect가 동작 후 email 값도 초기화가 이뤄지는 것을 확인했는데요.문제가 발생하는 곳으로 추정되는 useEffect 부분에 집..

1. 문제 발생development 환경에서 작업을 완료 후 vercel을 활용해 production 환경으로 배포 후API 통신 동작을 체크했을 때, https통신이 중간에서 http로 변경되어져요청이 들어가는 문제를 경험했습니다.2. 해결하기 위한  시도Api 엔드 포인트를 변경하거나, 백엔드에 변경 사항이 있는지 질문도 해보고vercel 환경 변수도 재설정해줬지만 계속 http로 요청이 이뤄졌는데요.3. 해결 방법next.js의 src > app > layout.tsx에 meta tag를 설정해주는 것으로 해결할 수 있었습니다. 위의 meta tag를 적용하면 http 콘텐츠를 자동으로 https로 변환이 이뤄집니다.

Refresh 동작과 token을 cookie로 관리해주는 것으로 로그인-로그아웃-리프레시의 여정이 종료된 줄 알았다.이것은 나의 착각이었다.쿠키로 token 문제를 처리한 바로 다음 날, 백엔드 동료분께서 또 하나의 문제를 제기해주셨다.2개의 서비스 사이트에서 동일한 계정으로 로그인 후, 하나의 탭에서 로그아웃을 해도다른 탭에서 로그아웃 처리가 이뤄져야 하는데 특정 페이지에서는로그인이 된 채로 기능들이 동작한다는 것이었다. 문제 접근 방법 01localStorage는 오리진이 같은 경우 모든 탭과 창에서 데이터를 공유한다는 점을 떠올려  1) 로그아웃 시 localStorage에 로그아웃을 증명하는 데이터를 저장2) _app.tsx에서 useEffect를 사용해 로그아웃 함수를 호출하며만약 localS..