github 링크
: https://github.com/yujinjo1/Woori-card-ranking

기획

카드 사용량 비교 사이트 '카드 고릴라'의 우리카드 순위 페이지를,Next.js를 활용해 클론 코딩한 프로젝트이다.

차별점

카드 고릴라 사이트는 마지막 업데이트가 2025년 12월 22일인 것으로 보인다. 또한, 사용자는 2025년 12월이 최신 업데이트 일자라고 생각하기 쉬우며, 이를 예전 정보라고 생각하여 사이트를 신뢰하지 못할 수 있다.

이를 개선하기 위해 일정 주기가 지난 후 유저가 새로고침을 하면 정보가 갱신되도록 했으며, 갱신된 시점이 나오게 하는 기능을 추가했다.

Demo

우리가 구현한 페이지는 다음과 같다.

서버에서 더미 데이터를 보내주면, 클라이언트 측에서 데이터를 받아 렌더링한다. 이때, 서버에서 카드 데이터 뿐 아니라 시간 데이터도 함께 보내주어, 데이터의 업데이트 시점이 언제인지 좀 더 정확히 알 수 있다.

사용 로직

const res = await fetch('http://localhost:4000/api/data', {
  cache: 'force-cache',
  next: { revalidate: 30 } // 30초 주기로 캐시 갱신
});

30초 주기로 캐시를 갱신한다. 테스트용이므로 30초로 설정해두었다.

실제 카드 랭킹은 실시간으로 급격히 변하지 않으므로, 운영 환경에서는 주기를 1시간 정도로 조정하면 서버 부하를 줄이고 효율적인 캐싱을 수행할 것이다.

어려움

layout.tsx

코드를 합칠 때, 바디 안의 바디가 형성되는 문제, 즉 레이아웃이 중복되어 보이는 문제가 있었다. 원인은 layout.tsx였다.

전체 레이아웃을 layout.tsx 코드에 작성했고, 이를 RootLayout() 함수로 정의했다.

메인 page.tsx에 레이아웃을 받아온다고 생각하고, RootLayout을 불러온 후 다른 컴포넌트를 자식 요소로 내보낸 것이다.

그러나, layout.tsx는 page.tsx처럼 next.js의 프레임워크에 해당하는 것이라, 굳이 불러오지 않아도 전체 페이지에 적용되어있는, 말 그대로 '레이아웃'인 것이다.

따라서 우리가 page.tsx에서 RootLayout()을 한 번 더 불러왔으므로 레이아웃이 중복적용이 된 것이다. 해당 컴포넌트를 불러오는 코드를 삭제하니 문제는 해결되었다.