영원히 흘러가는 강

사이드 프로젝트에서 로그인 처리를 jwt를 활용하여 진행하였다. Next.js에서 middleware를 제공하고있기에 매 fetch 마다 검증하고 갱신하는게 아닌middleware matcher에 해당되는 부분에만 jwt를 걸기로 했다.   내가 작성한 jwt의 플로우는 아래와 같다. 1. 로그인 요청시 access,refresh 토큰을 저장한다. (당연히 refresh는 httponly) 2. middleware에서 matcher에 해당되는 페이지가 있다면 refresh 토큰이 있는지 확인  3. refresh가 없다면 로그인 페이지 / 있다면 refresh 토큰 검증 로직 진행 4. 검증 결과가 200이라면 아래의 5번 로직을 따름 / 아닐 경우는 만료이거나 잘못되었을 경우이기에 login 페이지로 ..

현재 사이드 프로젝트 진행 중에 이런 방법도 있구나 하면서 올리는 글!사이드 프로젝트에서 현재 zustand를 사용중에 있고 내가 맞딱드린 문제는 아래와 같다 커머스 관점으로 분석 및 개선 가능하게 장바구니를 서버에서 저장하기로 했다.!근데 장바구니 갯수를 불러와 layout등에서 전역적으로 사용해야하는데 어떻게 하지? 상품 페이지에서 장바구니에 담을때 , 장바구니에서 삭제할때 , 장바구니에서 옵션 변경하여 상품이 삭제될때위의 3가지의 변경점이 생길텐데 각각 어떻게 핸들링 해야할지 고민하다 zustand 공식 페이지에서 store 내부에서 fetch가 가능한 모습을 보고 작성하게 되었다. zustand에서는 비동기 액션이라고 정의해두었다. 공식문서에 나와있는 async actionconst useFish..

프론트엔드 개발자라면 코어 웹 바이탈 개선(CWV) 은 당연히 들어봤을것이고 적용도 해보았을거라고 생각한다.나도 단순 구현만 생각하던 시기에서 크게는 유저의 경험과 SEO를 생각하기 시작했고직접 내 프로젝트에 적용해가며 배워보려한다.!(이 글에서 코어 웹 바이탈 개선(CWV) 에 대한 효과나 장점 ,설명 등은 다루지 않으려 한다. 추후에 따로!)  LCP (Largest Contentful Paint)LCP : 세가지 코어 웹 바이탈 중 하나이며 한글로 설명해보자면 페이지 내 가장 큰 렌더링 요소의 렌더링 시간이다. 측정은 페이지 처음 로드 시작점부터이며 좋은 점수로는 2.5초 (2500ms) 내에 유저에게 전달되면 좋은 LCP이다. (여담으로 같은 페이지여도 큰 덩어리가 먼저 보이면 사용자 경험이 올라..

바쁘신분들을 위한 요약.!strict mode로 인한 두번의 호출 발생next.config.js에 아래의 코드 추가reactStrictMode: false,   useEffect !리액트 개발자라면 무조건 사용하게 될 요녀석 Next.js에서 사용하게 되면 렌더가 두 번 일어나게 되는데 내가 코드를 잘못작성했는지 한참 찾아봤었다  나의 경우에는 ,아이디를 가져와서 없다면 바로 로그인페이지로 보내버리고 콜백도 필요 없는 간단 페이지였다. useEffect(() => { const userId = JSON.parse(localStorage?.getItem("userId") || "{}"); if (userId?.state?.userId === 0) { alert("상품이 없습니다.");..