hoonie-blog v1.2.0 패치노트
2025년 5월 10일
목차
들어가면서
안녕하세요, 블로그 방문자 여러분!
hoonie-blog v1.2.0 업데이트를 통해 여러분의 블로그 탐색 경험을 한층 업그레이드할 새로운 기능을 선보입니다. 이번 업데이트의 핵심은 페이지네이션 기능 도입으로, 더 많은 게시글을 편리하게 찾아볼 수 있도록 개선했습니다. 또한, 이와 관련된 URL 구조 변경 등 사용성 개선 작업도 함께 진행되었습니다. 자세한 내용을 살펴보시죠!
블로그 페이지네이션 기능 추가
"이제 원하는 게시글을 더 쉽게, 더 빠르게 찾아보세요!"
변경 내용
블로그 게시글 목록(src/app/blog/page.tsx)에 페이지네이션 기능을 도입하여 게시글 탐색의 편의성을 대폭 향상시켰습니다.
주요 개선사항
- 📚 효율적인 게시글 탐색: 페이지당 5개의 게시글을 표시하여 원하는 정보를 더욱 쉽게 찾을 수 있습니다. (
POSTS_PER_PAGE = 5) - 🔢 직관적인 페이지 이동: 현재 페이지를 중심으로 최대 5개의 페이지 번호를 표시하여 (
MAX_VISIBLE_PAGES = 5) 원하는 페이지로 바로 이동할 수 있습니다. - ◀️▶️ 편리한 이전/다음 탐색: '이전', '다음' 버튼을 통해 페이지를 순차적으로 탐색할 수 있으며, 첫 페이지나 마지막 페이지에서는 해당 버튼이 비활성화됩니다.
- 🎯 현재 위치 명확화: 현재 보고 있는 페이지 번호가 시각적으로 강조되어 탐색 중 혼란을 방지합니다.
- 🚫 게시글 없는 경우: 표시할 게시글이 없을 경우, 페이지네이션 UI 대신 안내 메시지가 표시됩니다.
- ⚙️ 유연한 URL 관리: URL 쿼리스트링 (
?page=) 대신 경로 기반 (/blog/[page])으로 페이지 상태를 관리하여 더욱 명확하고 SEO 친화적인 URL을 제공합니다. (자세한 내용은 아래 URL 구조 변경 섹션 참고) - 🧩 컴포넌트 기반 설계: 재사용 가능한
Pagination.tsx컴포넌트와Icons.tsx(화살표 아이콘)를 활용하여 구현되었습니다. 페이지네이션 로직은paginationUtils.ts에서 관리합니다.
관련 작업
페이지네이션을 위한 URL 구조 변경
"더 깔끔하고 의미 있는 주소로 만나요!"
변경 내용
새로운 페이지네이션 기능 도입과 함께 블로그 게시글 목록의 URL 구조를 다음과 같이 변경했습니다.
- 첫 페이지:
/blog(기존src/app/blog/page.tsx가 담당) - 2페이지 이상:
/blog/[page](예:/blog/2,src/app/blog/[page]/page.tsx신설) - 기존 경로 삭제:
/blog/pages/[page]경로는 새로운 구조로 통합되면서 삭제되었습니다. - (참고) 개별 게시글 URL(
/blog/post/[slug])은 변경되지 않았습니다.
주요 개선사항
- 🔗 직관적인 URL: 페이지 번호가 경로에 직접 포함되어 사용자와 검색 엔진 모두에게 더욱 명확한 구조를 제공합니다.
- ✨ 일관성 향상: 블로그 관련 URL 구조가 일관성 있게 정리되었습니다.
- 🛠️ 컴포넌트 재활용:
Pagination.tsx컴포넌트는 새로운 URL 구조에 맞춰 1페이지는/blog로, 그 외 페이지는/blog/[페이지번호]로 올바른 링크를 생성하도록 수정되었습니다.
관련 작업
나오면서
hoonie-blog v1.2.0 업데이트는 페이지네이션 기능 도입을 통해 블로그 콘텐츠 접근성을 크게 향상시키는 데 중점을 두었습니다. 이제 수많은 게시글 속에서도 원하는 정보를 더욱 쉽고 빠르게 찾아보실 수 있을 것입니다.
여러분의 꾸준한 관심과 피드백은 hoonie-blog를 발전시키는 가장 큰 원동력입니다. 앞으로도 더 나은 블로그 경험을 제공하기 위해 노력하겠습니다.
새로운 페이지네이션 기능을 지금 바로 경험해보세요!
감사합니다, 블로그 방문자 여러분!