Nuxt.js로 블로그 만들기

오늘날 블로그는 단순한 기록의 공간을 넘어, 자신만의 생각과 지식을 공유하고 전문성을 알릴 수 있는 중요한 플랫폼으로 자리 잡았습니다. 특히 개발자에게 블로그는 개인 브랜딩의 필수 요소로, 코드 스니펫부터 프로젝트 아카이브, 기술적 노하우를 공유하는 공간으로 활용됩니다.

이번 글에서는 본격적으로 개발에 들어가기 전에 코드 품질 도구 설정, 스타일링 인프라 구축, 다국어 환경 구성 등 개발 환경을 준비하는 과정을 다뤄보겠습니다.

이번 시간에는 Header, Footer, Page와 같은 레이아웃 관련 공통 컴포넌트를 개발합니다. 이와 함께 언어 전환(Language Switcher), 테마 전환(Theme Switcher), 그리고 공통적으로 사용될 Button과 Link 컴포넌트를 만들어 레이아웃에 통합해 보겠습니다.

인덱스 페이지 설계부터 Hero와 Snaps 컴포넌트 구성, Nuxt SEO 모듈을 활용한 SEO 최적화까지, 블로그 작성자 소개와 검색 엔진 친화적인 설정을 통해 완성도 높은 인덱스 페이지를 만드는 방법을 알아봅니다.

블로그 게시글 목록 페이지를 만드는 방법을 소개합니다. Nuxt 3의 기능을 활용하여 blog.vue 페이지 컴포넌트와 PostList, PostCard 컴포넌트를 구현하고, i18n 설정 및 데이터를 비동기로 가져오는 퍼사드 패턴까지 다뤄보겠습니다.

포스트 페이지는 블로그 콘텐츠를 개별적으로 표시하는 화면으로, 제목, 작성자, 본문, 이미지, 댓글 등을 포함해 사용자와 소통하는 핵심 공간입니다. 이번에는 포스트 페이지를 제작하고, 이미지 컴포넌트를 커스터마이징하며, 갤러리 컴포넌트까지 생성해 보겠습니다.

이번 글에서는 갤러리 형식으로 포트폴리오를 보여주고, 클릭시에는 간단한 설명을 모달창으로 보여주는 페이지를 만들어보겠습니다.