본문 바로가기
728x90
반응형

source-code/Next JS5

[next js] App Router Fetch Cache가 동작하지 않을 때 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.. 2024. 3. 11.
localhost fetch시 ECONNREFUSED 에러 해결하기 문제 상황 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.. 2024. 3. 7.
[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 Rendering: Server Components | Next.js Learn how you can use React Server Components to render parts of your application on the server. nextjs.org 이러한 React Server Component(RSC)는 말 그대로 서버에서 실행되기 때문에 기존의 Client에서 실행되던.. 2024. 2. 13.
[next js] server component로 httpOnly cookie 접근하기 현재 저희 서비스는 1) next 14로 구성한 admin 페이지에서 로그인 2) 로그인을 통해 access token, refresh token 발급 3) extension 내 API 요청 시 발급받은 access token을 함께 전달 위 flow를 통해 사용자를 인증하고, 적절한 권한을 부여하고 있습니다. admin 페이지에서 로그인 성공 시 발급받는 token들은 모두 cookie에 저장되어 있는데, 이 경우 3) extension에서 API 요청 시 token 전달을 구현하기가 불가능하다는 문제가 있었습니다. 그 이유로는 extension을 사용 중인(요청이 보내지는) 페이지 도메인과 cookie를 발급받은 서버 도메인이 다를 수밖에 없기 때문입니다. extension을 켜둔 상태로, 사용자가 .. 2024. 2. 6.
next js 13 변경사항 살펴보기 현 프로젝트에서 next js 13 버전을 사용 중이다. 공식 문서를 보며 이전 버전에서 달라진 점 or 추가된 기능을 알아보자. Project Structure 공식 문서에 명시된 프로젝트 구조. Top-level files Next.js next.config.js Configuration file for Next.js middleware.ts Next.js request middleware .env Environment variables .env.local Local environment variables .env.production Production environment variables .env.development Development environment variables .next-env... 2023. 8. 17.
728x90
반응형