Next.js 블로그 최신글 자동 정렬 — 코드 한 줄로 해결했습니다

들어가며

블로그에 글이 쌓이다 보니 한 가지 문제가 생겼습니다. 홈 화면의 최근 글 목록이 날짜순이 아니라 `posts.ts` 배열 순서대로 표시되는 거예요. 새 글을 추가할 때마다 배열 맨 앞에 넣어야 했고, 날짜를 분산시켜 놓으면 순서가 뒤죽박죽이 될 수 있었습니다.

코드를 완벽히 이해하지 못해도 괜찮다는 걸 이번에 다시 한번 느꼈어요. 찾아보니 딱 한 줄만 바꾸면 된다고 하더군요.

문제 파악 — 어떤 파일을 수정해야 할까?

처음엔 어느 파일을 열어야 할지 몰라서 좀 헷갈렸습니다. Next.js 프로젝트 구조를 보면 `page.tsx`라는 이름의 파일이 여러 경로에 존재하거든요.

src/
  app/
    page.tsx          ← 홈 화면 (이 파일!)
    about/
      page.tsx        ← 소개 페이지
    posts/[slug]/
      page.tsx        ← 개별 글 페이지
    categories/[category]/
      page.tsx        ← 카테고리 페이지

같은 파일 이름이 여러 폴더에 있으니 처음엔 어떤 걸 열어야 할지 혼란스러웠어요. 답은 간단했습니다. 홈 화면을 바꾸고 싶으면 `src/app/page.tsx`, 즉 가장 상위 경로의 파일을 열면 됩니다.

기존 코드 — 배열 순서대로 표시

`src/app/page.tsx`를 열면 홈 화면에 최근 글 4개를 가져오는 코드가 있습니다.

const latestPosts = posts.slice(0, 4);

이 코드는 `posts` 배열에서 앞에서부터 4개를 그냥 잘라오는 방식이에요. 날짜와 전혀 상관없이 배열 순서대로 표시되는 거죠.

수정 코드 — 날짜순 자동 정렬

아래 코드로 교체하면 됩니다.

const latestPosts = [...posts]
  .sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime())
  .slice(0, 4);

코드가 어떻게 동작하는지 완전히 이해하지 못해도 괜찮아요. 간단히 설명하면 이렇습니다.

• `[...posts]` — 원본 배열을 건드리지 않고 복사본을 만듭니다
• `.sort(...)` — `publishedAt` 날짜를 기준으로 최신순 정렬합니다
• `.slice(0, 4)` — 정렬된 결과에서 4개만 가져옵니다

저장하고 바로 확인

파일을 저장(`Cmd + S`)하고 브라우저에서 `http://localhost:3000`을 새로고침하면 홈 화면의 글 순서가 바뀐 걸 바로 확인할 수 있습니다.

한 줄짜리 코드를 두 줄로 바꿨을 뿐인데 결과가 즉시 반영되는 걸 보고 솔직히 너무 좋았어요. 코드를 100% 이해하지 못해도, 어디를 어떻게 바꾸면 되는지만 알면 충분하다는 걸 이번에 느꼈습니다.

앞으로 글을 추가할 때

이제 `posts.ts` 배열에 글을 추가할 때 순서를 신경 쓸 필요가 없어요. `publishedAt` 날짜만 정확하게 입력하면 홈 화면에서 자동으로 최신순으로 정렬됩니다.

글을 미리 작성해두고 날짜만 나중으로 설정해두면 예약 발행처럼 활용할 수도 있어요.

마치며

개발을 잘 몰라도 블로그를 운영하는 데 큰 문제가 없다는 걸 계속 느끼고 있습니다. 모르는 건 물어보고, 코드 한 줄씩 바꿔가다 보면 어느새 내 블로그가 조금씩 더 나아지고 있거든요.

오늘 수정한 것처럼 작은 개선들이 쌓여서 결국 완성도 높은 블로그가 되리라 믿습니다.