영원히 흘러가는 강

사이드 프로젝트에서 로그인 처리를 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("상품이 없습니다.");..

정상적으로 작동하던 admin이 갑자기 로그인이 안되어서 애좀 먹었다.... 최근 명령어 history 다 찾아보고... 내가 뭐를 잘못했지 생각하다가 우연히 보게된 유튭 매우매우 간단하게 setting.py에 있는 세션 관련 코드를 다 주석시켜보라네? 성공...ㅎ 😅🔨

HTTP 요청과 응답은 비상태성과 비연결성의 특징을 가지고 있다 그리하여 우리는 데이터를 주고받으며 기록하고 싶은 사항이 있다면 쿠키 , 세션 , 웹스토리지 등에 저장하여 사용한다. 아래는 JWT에 대해 알아보기에 앞서 쿠키 , 세션 , 웹 스토리지에 대해 알아보고 싶다면 확인해보자 https://ryugaram.tistory.com/159 쿠키 (Cookie) , 세션 (Session) , 웹 스토리지(Local storage,Session storage) 차이 우선 각각의 차이와 장단점을 알아보기전에 우리는 왜 이걸 사용해야하는걸까? HTTP 요청과 응답은 흔히들 비연결성과 비상태성을 가졌다고한다. - 응답을 주고받으면 바로 연결을 끊고 , 새로운 ryugaram.tistory.com JWT ? JW..

우선 각각의 차이와 장단점을 알아보기전에 우리는 왜 이걸 사용해야하는걸까? HTTP 요청과 응답은 흔히들 비연결성과 비상태성을 가졌다고한다. - 응답을 주고받으면 바로 연결을 끊고 , 새로운 요청시에 재연결을 한다해서 비연결성 - 요청과 응답의 상태를 저장하지 않거니와 이전 기록을 기억하지 못한다해서 비상태성 하지만 우리는 상태를 유지하고싶은 상황이 있다 이런 비연결성과 비상태성을 보완하기 위해 우리는 쿠키 , 세션 , 웹 스토리지라는 애들을 사용한다. 순차적으로 각각의 장점과 단점만 간략하게 작성해보려 한다. (set , get , remove는 담지 않으려한다.) 쿠키 (Cookie) 브라우저(클라이언트)에 key-value 형태로 저장하는 데이터 파일 유효기간을 명시할 수 있으며 유효기간이 지나지 ..

삽질 엄청 많이 했다 ^^ 사실 규격에 딱딱 맞춰서 하게 된다면 문제가 없지만,,,, 개인프로젝트로 피그마도 구현하면서 작성하려니,, 하하.. 각설하고 본론으로 돌아가자면 이 방법을 썼다 ... {children} .. 헤더와 푸터를 둘다 이용하여 나는 children에 헤더 푸터의 높이를 뺀값을 전달해주고 싶었다 나도 계속 삽질을 했고....ㅎ 당연하게도 계속 calc() 함수 적용이 왜 안되는지 검색만 했었다 공식 문서로도 확인했지만 여러 블로그 등을 전전했고 결국 확인해본 결과 공식문서가 참으로도 이해가 어려웠지만 finally!!!!!! 추가로 global.css에다가 아래의 코드도 추가하였다 @tailwind base; @tailwind components; @tailwind utilities;..

안녕하세요. 이전 회사에서는 직접 id/pw를 입력받아 사용했었지만 소셜 로그인의 필요성이 대두됨에 따라 공부해보자 글을 작성해본다 구현목표! nextjs14 와 nextAuth 를 활용하여 소셜 로그인 구현 프로젝트 설정 next 설치 npx create-next-app@latest nextAuth 설치 npm install next-auth 파일 구조 파일구조때문에 살짝 애먹긴 했다... next13 부터 app 구조로 변경되어 API 활용하려면 route.ts와 같이 사용 app / api / auth / [...nextauth] / route.ts import NextAuth from "next-auth"; const handler = NextAuth({ ... }); export { handle..

next 14에서 발표한 next learn 확인 중 using the clsx library to toggle class names 이와 같은 글을 확인하였고, clsx가 무엇인지 찾아보게 되었다 위에서 소개한 예시는 아래와 같다 import clsx from 'clsx'; export default function InvoiceStatus({ status }: { status: string }) { return ( // ... )} status 조건에 따른 변경이 가능하다는점이다. 추가로 깃헙 페이지 확인시 아래와 같은 문자 합치기도 가능하다 // Strings (variadic) clsx('foo', true && 'bar', 'baz'); //=> 'foo bar baz' // Objects cl..