본문 바로가기

분류 전체보기302

알고리즘 풀 때 중력 적용 시키기 알고리즘 풀다보면 종종 그래프에서 각 열마다 중력이 작용하여 아래로 떨어지는게 있는데 이때마다 재귀로 풀었음이대신 아래 코드처럼 중력이 작용될 것들을 col에 넣고 앞에 빈 곳에는 * 을 넣으면 됨// 5. 중력 적용: 블록을 아래로 내립니다.for (let j = 0; j 2025. 10. 7.
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.
PostgreSQL 설치 및 접속 (Mac) PostgreSQL을 전역으로 설치해준다.brew services start postgresqlDB에 접근할 수 있게 외부 IP 하용/var에 들어가보면 14와 15버전이 있음.cd /opt/homebrew/var/{postgresql버전}ex) cd /opt/homebrew/var/postgresql@14최종 경로에 pg_hba.conf 파일이 있는데 vi를 이용해 수정vi pg_hba.confPv4 local connections의 ADDRESS 부분을 127.0.0.1/32 Allow replication connections from localhost ... 의 ADDRESS 부분을 0.0.0.0/0 으로 변경해줍니다.스크롤 내리면 IPv4 local connections의 ADDRESS가 127.. 2025. 7. 22.

티스토리툴바