JS (4) 썸네일형 리스트형 NextAuth Credentials Provider와 Postman 연동하기: 로그인부터 API 요청까지 NextAuth를 사용하는 경우, Postman으로 API를 테스트할 때 accessToken 때문에 불편함을 겪을 수 있습니다. NextAuth는 보안 강화를 위해 accessToken을 HTTPOnly 쿠키에 저장하므로, 일반적인 방식으로는 Postman에서 직접적인 접근이 어렵습니다. 이때 활용할 수 있는 간단한 방법이 있습니다. NextAuth의 Credentials Provider를 사용하여 로그인 후, 세션 엔드포인트에서 accessToken을 추출하여 Postman 환경변수에 저장하고 이를 사용하는 것입니다. 이 방법을 단계별로 설명하여, Postman에서 NextAuth 세션 정보를 보다 효율적으로 활용할 수 있도록 안내해 드리겠습니다.주요 목표이미 구현된 NextAuth 기반의 로그인 시.. Nextjs Server Component에서 redirect를 try, catch문 안에서 사용하기 nextjs로 과제를 진행 중에 만나게 된 상황입니다. 예전 개인 프로젝트에서도 server action으로 nextauth의 로그인 처리 후 리다이렉션이 원하는 데로 되지 않아서 다른 방법을 선택했었는데, 이번 기회에 제대로 분석 후에 문제를 해결했습니다. [현재 상황]데이터를 받아오는 서비스 함수를 axios를 통해서 작성해 둠.해당 서비스 함수는 사용하는 곳에서 직접 try, catch로 에러를 핸들링app routing 폴더의 server component에서 해당 서비스 함수를 통해서 데이터를 들고 옴 (ssr을 위해)200번을 넘어가는 상태코드가 있을 때 에러가 발생 시 서비스 함수에서 전파된 error를 try, catch로 막지 않으면 가장 가까운 에러 바운더리를 찾아서 에러를 표시하게 됨.. ENUM의 컴파일 결과 분석해보기 타입스크립트에서 enum이 타입만을 위한 것이 아니라 값으로 사용할 수 있으며, 실제로 런타임에도 존재하는 값이라고 하여 컴파일된 자바스크립트 코드에서는 어떻게 보일지 궁금하고 또 양방향 맵핑이라는 것을 어떻게 구현했는지도 궁금해서 컴파일된 결과를 한번 들여다보았습니다.enum Direction { Up, Down, Left, Right}"use strict";var Direction;(function (Direction) { Direction[Direction["Up"] = 0] = "Up"; Direction[Direction["Down"] = 1] = "Down"; Direction[Direction["Left"] = 2] = "Left"; Direction[Direct.. React Router의 loader 사용기 리액트 라우터의 loader 함수를 통해서 fetch thenrender와 render as you fetch를 섞어보려고 한 시도에서 겪은 이슈들을 정리해 보았습니다. 데이터 패칭 전략 3가지Fetch-on-render컴포넌트가 마운트 된 후에 데이터 패칭을 시작합니다.가장 일반적인 방식으로 컴포넌트 렌더링후 useEffect등을 사용해 데이터를 가져옵니다.여러 비동기 요청이 순차적으로 실행될 수 있어 '워터폴' 문제 발생 가능성이 있습니다.Fetch-then-render데이터를 먼저 가져온 후 컴포넌트를 렌더링합니다.데이터가 준비된 상태에서 랜더링하므로, 컴포넌트에 별도 로딩과 관련된 부분을 작성하지 않아도 됩니다.하지만 데이터가 로드될때까지 렌더링이 지연될 수 있습니다.Render-as-you-fe.. 이전 1 다음
