Backgrounds회원가입 후, 백엔드에서 반환한 access, refresh 토큰을 cookie에 저장해야 했습니다.// SignUpFormconst SignUpForm = () => { const handleSubmit = async () => { try { // 회원가입 성공 시 AT, RT 반환 const { accessToken, refreshToken } = await signUpApi(form); setAuthCookies(accessToken, refreshToken) router.replace("/") } catch (e) { setErrors(e); } }; return (...)} 위 코드에서처럼..

Backgrounds2024.02.13 - [source-code/Next JS] - [next js] app directory에서 token 저장하기 [next js] app directory에서 token 저장하기next js 13 버전에서 app directory가 등장하면서, app directory내 모든 컴포넌트들은 기본적으로 server component로 동작하게 되었습니다. https://nextjs.org/docs/app/building-your-application/rendering/server-components Renderi23life.tistory.com결론적으로, 아래 방법을 사용해 app directory에서 token을 관리하기로 했습니다.1) server action을 통..

Backgrounds현재 운영 중인 서비스의 관리자 페이지는 Next.js 14 버전으로 구성되어 있습니다. Next.js는 13 버전부터 큰 변화를 겪었는데, 이는 바로 app 디렉터리 내 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작한다는 것입니다. 이를 활용해, 생성된 가이드 데이터의 상세 페이지를 서버 컴포넌트로 구성했습니다. 서버 컴포넌트를 사용하면 서버에서 데이터를 가져와 HTML을 생성하고, 클라이언트에 완성된 HTML을 반환할 수 있으며 이를 통해 초기 로딩 시간을 단축하고, 사용자 경험을 향상하고자 했습니다.// app/[id]/page.tsx import fetchData from '../lib/fetchData'; export default async function Page({ p..

Data Fetching https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating Data Fetching: Fetching, Caching, and Revalidating | Next.js Learn how to fetch, cache, and revalidate data in your Next.js application. nextjs.org Next js App router는 fetch web api를 확장, caching, revalidating 등의 기능을 제공해 각 요청을 자동으로 memoize 할 수 있도록 합니다. async function getData() { con..

문제 상황 Next JS server component에서 로컬 개발 서버(ex localhost:8080)로 fetch를 통해 요청을 보내자 다음과 같은 에러가 발생했습니다. Internal error: TypeError: fetch failed at Object.fetch Cause: Error: connect ECONNREFUSED ::1:3004 개발 환경은 Next JS 14 버전(즉 node 18.17.0 이상). 해결 방안 처음에는 프론트단의 문제(혹은 Next server component의 문제..?)라 생각을 했었는데 fetch API 단에서 에러가 나는 걸 보고, 바로 구글링에 착수. 다음과 같은 이슈를 만날 수 있었습니다. https://github.com/node-fetch/nod..

next js 13 버전에서 app directory가 등장하면서,app directory내 모든 컴포넌트들은 기본적으로 server component로 동작하게 되었습니다.https://nextjs.org/docs/app/building-your-application/rendering/server-components Rendering: Server Components | Next.jsLearn how you can use React Server Components to render parts of your application on the server.nextjs.org이러한 React Server Component(RSC)는 말 그대로 서버에서 실행되기 때문에기존의 Client에서 실행되던 컴포넌트(..