본문 바로가기

FrontEnd96

revalidatePath로 캐시 무효화 시 마주칠 수 있는 상황 내 상황을 클로드가 정리해줌# Next.js revalidatePath: 'page' vs 'layout' 타입의 차이와 함정## 상황블로그에 새 포스트를 작성한 후 `revalidatePath`로 캐시를 무효화했지만, 포스트 목록에 새 글이 나타나지 않는 문제가 발생했습니다.**환경:**- Next.js 15 (App Router)- `generateStaticParams`를 사용한 정적 페이지 생성- ISR(Incremental Static Regeneration) 환경**코드 구조:**```typescript// app/[page]/page.tsxexport const generateStaticParams = async () => { const totalCount = await getTotal.. 2025. 10. 2.
Next.js 로 블로그 개발하면서 겪었던 트러블 슈팅 모음 더보기[Number] 이슈 컨텐츠 상황내가 처음 생각했던 방식 (잘못된 이해)실제 동작결론1. generateStaticParams ,revalidatePath, dynamicParams 의 동작상황블로그 상세 페이지 경로: /post/[postId]generateStaticParams를 선언하여 빌드 시점에 정적 경로를 생성dynamicParams = false로 설정하여 빌드 시점에 존재하지 않는 경로는 접근 시 404가 뜨도록 제한새로운 포스트가 추가되면 revalidatePath를 통해 최신 상태가 반영되길 기대.내가 처음 생각했던 방식 (잘못된 이해)revalidatePath를 호출하면 해당 경로의 캐시가 무효화된다.캐시 무효화 시 generateStaticParams가 다시 실행되어 새로운.. 2025. 10. 1.
아이템 리스트 페이지의 서버 컴포넌트를 최적화 시켜보기(fetch 캐싱 옵션) 사전 지식next app router의 서버 컴포넌트에서 다이나믹한 요소 cookies, params, searchParams 등등을 사용하는 동작이 없다면 SSG로 동작하여 캐싱이 강제화 된다 -> fetch option [ force cache ] . 이때 next: revalidate 와 같은 주기를 등록한다면 이는 ISR로 동작하여 주기마다 캐시에 담긴 데이터를 최신화 시켜준다. fetch에 no-store 옵션을 명시한다면 이는 SSR 동작이 되어 요청 시점마다 서버에서 HTML을 생성해서 보내므로 SSG/ISR 보다 성능상 좋지 않다. 그래서 개인적으로 Next의 최적화를 생각하여 서버 컴포넌트는 될 수 있는 한 SSG/ISR로 할려고 노력하는 편이다. 문제 상황제목과 같이 아이템 리스트를 보.. 2025. 9. 19.
서버 컴포넌트에서 fetch와 캐싱 동작: SSR, SSG, ISR 관점에서 정리 Next.js(App Router)를 활용하여 프로젝트를 진행하다 보면, 서버 컴포넌트(Server Component)에서 데이터를 가져올 때 어떤 방식으로 캐싱이 이루어지는지 혼란스러울 수 있다. 특히 fetch 옵션(force-cache, no-store, revalidate)에 따라 SSR, SSG, ISR이 어떻게 구현되는지, 그리고 데이터베이스를 직접 호출할 경우에는 어떤 차이가 있는지가 중요한 쟁점이 된다.이 글은 이러한 질문에서 출발하여, Next.js 서버 컴포넌트에서의 데이터 패칭과 캐싱 동작을 SSR·SSG·ISR 관점에서 정리한 것이다.질문 1.서버 컴포넌트에서 fetch 함수에 force-cache 옵션을 부여하고 빌드를 수행하면, 빌드 시점에 해당 경로로부터 데이터를 가져와 결과물.. 2025. 9. 13.
Resend로 발송 시 개발 모드에서 이메일이 오지 않는 경우 const res = await resend.emails.send({ from: 'onboarding@resend.dev', to: process.env.NODE_ENV === 'development' ? 'id@naver.com' : email, subject: ' 🚀', react: DailyBriefingEmail({ repositories: datas, }) as React.ReactNode,});위와 같이 개발 모드라면 특정 이메일을 설정한 뒤 제대로 오는 지 확인 할 때 데이터 처리는 성공이라고 떴지만 실제로 이메일이 도착하지 않았다. 이슈를 뒤져보니 naver가 @resend.dev 발신자 메일을 차.. 2025. 8. 19.
[issue] shadcn/ui 라이브러리 사용 시 body 주의할 점 웹 프로젝트지만 모바일 환경 친환적이게 꾸리고 싶어서 body에 max-width를 420px min-width 360을 줬었다.그 뒤 margin x 를 auto를 줘서 뷰포트 기준 가운데에 위치시켰다. 그렇게 스타일링을 하면서 shadcn/ui의 컴포넌트들을 사용했는데 Select와 Dropdown을 사용하면서 각 컴포넌트의 Content가 예상치 못한 곳에서 렌더링 되었다. Content는 Trigger를 기준으로 포지셔닝 되는 것으로 확인했는데 렌더링 되는 위치는 body에 margin x 에 auto를 주지 않는 곳에 위치해있었다. 이같은 점이 되는 이유가 trigger를 기준으로 포지셔닝 되지만 이것은 뷰포트를 덮는 Portal가 베이스가 되기에 그런 것 같았다. 그렇다고 Portal에 스타일.. 2025. 7. 27.
[next.js] next/headers cookies로 set을 했지만 이후 undefined가 뜨는 이유 oauth를 구현하기 위해 인가 서버로부터 받아온 인가 코드를 통해 액세스 토큰을 받아오고 그것으로 유저 정보를 받아왔다.유저 정보의 이메일 값(유니크)이 디비에 저장되어 있지 않았다면 새로운 유저 테이블을 생성해줬다.로그인 유지를 세션 방식으로 하기 위해 유저와 연결 된 세션을 새로 생성해줬고 생성된 세션의 id를 쿠키에 저장하기 위해 next/headers의 cookies를 가져왔다. import {cookies} from "next/headers"const ServerComponent= async()=>{ const cookieStore = await cookies() cookieStore.set("key","value",options)}위와 같이 서버 액션으로 set을 하면 에러가 발생한다... 2025. 7. 24.
JWT 관련 면접 질문 모음 1. Explain the difference between request and response interceptors in Axios.Request interceptor: 요청 보내기 전 가로채서 수정.Response interceptor: 응답 받은 후 가로채서 처리.2. How would you add a custom header to all Axios requests using interceptors?axios.interceptors.request.use(config => { config.headers['Custom-Header'] = 'value'; return config; });3. What is a JWT, and what are its three components?J.. 2025. 4. 26.
토스의 "자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기"를 구현해보기 (3) https://toss.tech/article/frontend-tree-structure 자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기왜 토스증권 PC의 그리드 레이아웃을 왜 직접 구현하게 되었는지, 그리고 어떻게 만들어져 있는지를 이제부터 소개해 드릴게요.toss.tech1. 드래그 앤 드랍시 트리 구조가 변하게 되므로 이를 위한 메서드를 추가해준다.2. 각 컴포넌트에 draggable을 추가해준 뒤 (1)번 포스팅에서 구해놨던 드랍 시 어떤 사분면일지 결정 할 함수를 생성해준다. 3. DnD시 메서드에 따른 DnD 동작이 잘 되는지 확인해준다. (이 떄 DnD와 연관 없는 컴포넌트가 리렌더링 되지는 않는지 확인도 필요) 1. 드래그 앤 드랍시 트리 구조가 변하게 되므로 이를 위한 메서드를 추가.. 2025. 4. 14.

티스토리툴바