개인 블로그를 만들자

..라는 생각을 가진지는 수년이 지났다.
자고로(?) 프론트 개발자라면 개인 블로그 하나쯤은 있어야지 라는 생각에서 시작되었다.

잊혀질 때쯤 멋진 interaction으로 무장한 홈페이지들을 마주칠 때마다 생각하곤 했다.

하지만 현실은.. 귀찮았다

귀찮음의 벽

은 AI의 시대가 오면서 해소됐다. 가장 큰 도움을 받은 것은 claude code. 이전에도 사이드 프로젝트를 하며 그냥 claude를 썼었지만, 은근함 귀찮음이 여전히 있었다.

• 프로젝트와 다른 스타일 framework를 사용하거나
• 복사 붙여넣기를 왔다갔다 한다던가

반면에 브라우저가 아닌 vscode 내에서 내 코드를 직접 수정하는 경험은 꽤나 편리했다.

결국 반년만에 다시 결제하여 claude 구독을 시작했다.

SSR vs SSG

블로그이기 때문에 SEO를 신경써야 한다. 때문에 SPA방식은 사용할 수 없었고, SSR과 SSG 방식 중에 골라야 했다.

• SSG: SERVER SIDE RENDERING
• SSG: STATIC SITE GENERATION

결론적으로는 SSG를 골랐는데, 이는 서버와 DB 없이 가고자 한 의도가 가장 컸다. 다 할수는 있겠지만, 스케일이 커지면 하다가 접게된다. 최소한으로 가고자 했다.

그럼 DB와 서버가 없냐! 하면 약간 애매하다.
api가 필요한 기능(post CRUD)을 next js의 api 라우트를 사용해서 서버리스 형태로 구현했으며
조회수 기능을 위해 firestore 를 사용했다.

그럼 포스트는?

git 저장소에다가 md 형식으로 저장한다.
사실상 commit = 포스트 작성이 되는 셈이다. 커밋 후 push가 되면 aws amplify에서 자동으로 빌드 + 배포가 이뤄진다.

물론 이러면 저장 후 딜레이가 3분가량 있다.

git 커밋이 귀찮소

그렇다. 이 구조로는 포스트를 작성하려면 git이 연결되어있어야 한다.

• 내 컴퓨터로 vscode 켜서 커밋으로 포스트 작성하기
• github 사이트 로그인해서 md파일 수정하기

이것만 해도 꽤 귀찮다. 게다가 모바일로는? 더 힘들다.
아무래도 웹에서도 작성이 가능해야겠다.

그래서

• git api + 인증 토큰으로 웹에서 커밋
• 인증 정보 보호를 위해 로그인 붙이기

를 진행했다.
사실 단순한 PW 입력 방식으로 로그인을 구현했었으나, 자체 인증을 안전하게 구현하는 것이 생각보다 귀찮 신경쓸 것이 많았다.
비밀번호를 암호화하고 패스키를 환경변수로 사용하려 했으나 결론적으로는 서버 없이 구현하기에는 무리인가 싶어 결국 구글 로그인으로 돌렸다.

완료

그렇게 깃 저장소를 db처럼 사용하고, 서버가 없는 개인 블로그 시스템을 완성했다.
다음 기능은 뭘 할까