728x90 반응형 source-code/Next JS8 server action으로 cookie 설정 시, server component reload 버그 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 (...)} 위 코드에서처럼.. 2024. 11. 15. [next js] app directory에서 token 저장하기 - (2) 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을 통.. 2024. 8. 5. [next js] server component 페이지 route 속도 개선하기 (with streaming) 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.. 2024. 7. 23. [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.jsLearn 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. 이전 1 다음 728x90 반응형
