개발 블로그를 만들게 된 이유

프론트엔드를 공부하면서 자연스럽게 “개인 사이트 하나쯤은 있어야 하지 않을까?”라는 생각이 들었습니다.
그 생각을 계기로 개발 블로그를 직접 만들어보기로 했습니다. 단순히 블로그를 만드는 데 그치지 않고, 백엔드까지 공부해보고 싶어서 전체적인 구조도 직접 설계하고 구현했습니다.

이번 프로젝트에서는 Next.js를 기반으로 프론트엔드를 구성하고, Prisma를 활용해 백엔드와 데이터베이스를 연결했습니다. 백엔드는 Express.js와 PostgreSQL을 사용해 간단하게 구축했습니다.

블로그 + 포트폴리오

처음부터 이 사이트는 단순한 블로그가 아니라 블로그와 포트폴리오를 함께 볼 수 있는 사이트로 기획했습니다.

• 블로그는 주로 제가 공부한 내용이나 작업한 내용을 일지 형식으로 기록하는 공간입니다.
• 포트폴리오는 지금까지 진행한 프로젝트들을 문서처럼 정리해둘 수 있는 공간으로 구성했습니다.

기술적 구성

블로그는 Next.js의 App Router를 사용해서 만들었습니다.
서버 컴포넌트와 클라이언트 컴포넌트를 분리해서 구조화했고, 초기 데이터는 서버 사이드에서 받아와서 보여주는 방식으로 구성했습니다.
서버 캐싱을 적극적으로 활용했고, 클라이언트의 동적인 데이터 처리에는 TanStack Query를 도입했습니다.

이처럼 서버 캐싱과 클라이언트 캐싱을 적절히 섞어서 사용함으로써, 각 방식의 장점을 챙기고자 했습니다.

개발 중 재밌었던 점

글을 작성할 때 마크다운을 사용하고 싶어서,
많이 사용하는 라이브러리인 react-markdown, remark-gfm, react-syntax-highlighter를 활용해 마크다운 렌더링 기능을 직접 구현했습니다.
생각보다 쉽게 적용되었고, 실제 글이 마크다운으로 잘 표현되는 걸 보는 게 꽤 재밌었습니다.

초기 디자인 방향

디자인은 대부분 velog를 참고했습니다. 실제로 UI 구조나 느낌이 많이 닮아 있습니다.
개인적으로 다크모드를 선호해서 다크모드만 지원하고, 포인트 색상으로는 보라색(#656079)을 사용했습니다.

앞으로의 계획

이 블로그에 앞으로도 꾸준히 공부한 내용을 정리하고, 진행한 프로젝트도 차근차근 포트폴리오로 정리해나갈 계획입니다.
꾸준히 기록하는 습관을 들이는 것이 첫 번째 목표입니다.

사용한 기술 스택

• Frontend: Next.js, React, TypeScript, Tailwind CSS, TanStack Query
• Backend: Express.js, Prisma, PostgreSQL, Supabase