전체 글 (204) 썸네일형 리스트형 Fetch try-catch : 400 은 response, 401은 catch error 로 빠진다면? [현상황]jwt accessToken / refreshToken 을 사용하여 로그인 검증을 진행하고 있음API 요청시 400 Bad Request 와 같은 응답은 response 로 잘 받아지고 있으나, accessToken 이 만료된 후, API 요청을 했을 때 401 Unauthorized 응답, 근데 response 에 접근하지 못하고 try-catch 에서 catch 에러로 빠지며, 스크립트로, status code, error message 에 접근하지 못함.그냥 "failed to Fetch" 메시지로 찍힘 [기대상황]API 요청시 400 / 401 모두 백엔드 서버에서 응답하는 response 객체로, HTTP status code 와 에러메시지로 접근하여 에러를 핸들링하고,네트워크 레벨 .. Next.js 에서 Client Side Fetch 를 React-Query + 기본 Fetch 조합으로 사용하기 구현 조건1. axios 대신 기본 fetch 를 사용2. Authorization 에 accessToken 을 담아서 보내는 AuthFetch, 그냥 기본 fetch 인스턴스가 필요함3. 로그인 후 받은 accessToken은 cookie 에 httpOnly 쿠키로 저장 -> js 단에서 가져다 쓸 수 없음 - httpOnly 쿠키로 저장하지 않으면, next-cookie 의 getCookie() 등으로 자유롭게 가져다 쓸 수 있다.4. next-auth의 useSession 을 통해서 accessToken 에 접근 가능 - next-auth 의 useSession 을 통해서 접근할 수 있기 때문에 use** 형태의 훅 내부에 메서드를 사용하는 패턴으로 구현 단계별 구현 1. 기본 fet.. Next.js 의 Fast Refresh 는 하나의 브라우저 세션과만 동작한다 Next.js 프로젝트에서 http서버와 https 서버를 둘다 띄워서 사용하고 있는 상황 세팅 참고 : [Next.js] 로컬(localhost)에 https 적용하기 [Next.js] 로컬(localhost)에 https 적용하기mkcert라는 프로그램을 이용해서 로컬 환경(내 컴퓨터)에서 신뢰할 수 있는 인증서 만들 수 있다.로컬(내 컴퓨터)을 인증된 발급 기관으로 추가(localhost로 대표되는) 로컬 환경에 대한 인증서를 만velog.io 크롬에서 브라우저에서 2개의 탭을 열었음 http://localhost:3000 https://localhost:3001 처음에는 https 만 코드 fast refresh 가 적용이 되지 않는 줄 알았다근데, 코드상에 차이점이 없어서 뭐지 삽질하면서 서.. 이전 1 2 3 4 5 6 7 ··· 68 다음
