Ben의 기술 블로그

깃허브 블로그 만든 후기

  • #blog

이번 프로젝트의 중점 사항은 프레임워크 없이 개발하기 였습니다. 즉 모던 번들러와 프레임워크의 사용을 최소화하고 직접 기능을 구현하면서 번들러의 역할에 대한 이해를 높이고 싶었습니다.

"간단한 Server Side Rendering을 구현해보자"는 것이 프로젝트의 목표였습니다.

블로그 구축 과정에서 겪은 문제점들과 배운 점들을 공유해보려고 한다.

블로그 프로젝트 소스코드는 제 깃허브에서 확인할 수 있습니다.

MVP 구현 달성도

빠르게 MVP를 만드는 것이 목표 중 하나였습니다. 오늘(2024년 1월 5일 금요일)을 데드라인으로 설정하고 9일 동안 작업해서 완료했네요.

MVP : 블로그는 다음 기능을 수행할 수 있어야 한다.

  • [x] about 페이지에서 간단한 자기소개와 SNS 링크가 존재한다.
  • [x] posts 페이지에서 지금까지 작성한 포스트 목록을 확인한 수 있다.
  • [x] 각 포스트 페이지에서 포스트 내용을 확인할 수 있다.
  • [x] md 파일에서 정적 html 파일을 생성한다.
  • [x] Deploy 완료
  • [ ] 검색 결과에 노출되어야 한다.

마지막 단계를 제외한 기능은 모두 구현하였습니다. 앞으로 포스트를 열심히 작성하고 SEO를 향상시켜야 할 것 같네요.

잘못된 방향 : SSR을 구현하려고 했지만…

최초 구현 방식

처음에는 SSR로 구현된 블로그를 목표로 프로젝트를 시작했고, Express를 이용해서 서버를 구현했었습니다. 이 서버는 페이지의 html 파일을 리턴하는 웹서버입니다.

서버는 다음 순서대로 동작합니다.

  1. 클라이언트로부터 요청을 받습니다.
  2. 요청받은 Path을 이용해서 템플릿 엔진이 HTML을 생성합니다.
  3. .html 파일을 담아 응답합니다.

문제 인식

하지만 SSR을 구현하는 데에 여러 문제들이 있었습니다.

  • 블로그에 SSR이 적합한 기술인가?
  • 도메인 / 호스팅 비용
  • 서버 배포 / DB 관련 러닝 커브

이런 이유 때문에 SSR 보다 Static Site Generate 방식이 더 적합하다고 느껴졌습니다. Github Pages는 github.io 도메인을 제공할 뿐만 아니라 정적 파일을 호스팅해줍니다. 이제 방향을 전환하지 않을 이유는 없겠죠.

SSG로 방식으로 전환

Github Pages는 제가 생성한 정적 파일을 Serving 합니다.

이제 제가 구현해야 할 것은 런타임에서 html 파일을 생성하는 것이 아니고, 빌드 타임에서 html 파일을 생성하는 것으로 변경되었습니다. 그리고 html 파일을 Pages가 사용할 수 있도록 전달하면 됩니다.

기존 코드도 내부적으로는 비슷한 로직을 가지고 있었기 때문에 빠르게 구현을 이어나갈 수 있었습니다.

dev 서버의 부재

하지만 SSR을 포기하자 개발자 경험이 많이 저하되는 문제도 있었습니다. 기존에는 Express와 Nodemon을 이용한 일종의 dev 서버로 개발했었습니다. 작업한 내용이 새로고침하면 바로 적용되어서 편한 부분이 있었습니다. (모던 번들러는 HMR을 지원하기에 더욱 편리하지만)

SSG는 빌드 타임에 생성되는 방식이기 때문에, 매번 빌드 스크립트를 돌리고 static server를 돌려서 확인해야하는 불편함이 있었습니다. 번들러가 제공해주는 dev 서버가 많이 그리웠네요. Vite가 제공하는 Hot Module Replacement 기능에 대해 궁금해져 공식 문서를 찾아보기도 했었습니다. 다음 목표는 이런 개발 환경을 구축하는 것이 될 수 있겠네요.

개선 사항

블로그의 기능 측면

(우선순위: *)

  • 사진 삽입 *
  • 마크다운 목차 자동 생성 *
  • 웹사이트 노출도 증가시키기 *
  • 노출 횟수 카운팅 (총 방문자, 게시글 조회)
  • 태그별 포스트 보기

DX의 측면

  • 개발 환경 구축
    • 매번 build하는 것이 매우 귀찮았습니다. HMR을 지원하는 dev server를 구현할 수 있다면 정말 편해질 것 같다는 생각을 많이 했네요.
    • "하나의 로직에 대해 runtime / build 타임에 각각 정적 파일을 빌드할 수 있는 pipe를 어떻게 구현할 수 있을까?" 분명 가능할거라 생각하지만 쉽지 않겠네요.

무엇을 배웠나?

아래와 같은 것들을 배웠습니다. 각 항목들은 추후에 포스팅합니다.

  • AJAX 이전 웹개발 방식을 이해할 수 있었습니다.
    • 프론트엔드가 없던 시절, 서버에서 대부분의 역할을 담당해왔음.
  • "많은 개발 도구들의 도움 덕분에 쉽게 개발해왔구나" 몸소 경험할 수 있었다.
  • 공식 문서 활용 능력
    • (Express, Pug) 핵심만 콕콕 잘도 넣어놨네. 공식 문서만 봐도 MVP 정도는 충분히 개발 가능하구나
    • TailwindCSS의 JIT 전략과 Tailwind Installation Guide를 통해 output.css 파일 빌드 프로세스를 대략적으로 알게됨
    • Why Vite만 읽어도 Vite가 얼마나 대단한지 알 수 있다.
  • Promise에 대한 이해 - "한 번 프로미스는 영원히 프로미스"
  • 번들러와 프레임워크가 주는 편의성을 느낌
    • Vite의 Component HMR
    • Next.js의 Component 단위 SSR
  • Github 활용
    • 비록 혼자 사용했지만 issue, PR을 관리함
    • Issue를 이용해서 문서, 트러블슈팅, 추후 개발 사항 등을 정리
  • Node Version Manager 변경
    • nvm에서 asdf으로 전환
    • asdf에서 yarn berry 사용하기