intro
회상하건데 본격적으로 개발에 흥미를 가진게 2020년 즈음 될 것이다. 석사 졸업을 앞두고 취업에 자신이 없던 나는 도피하듯 개발에 빠져들었고, 그 때 제일 집착했던 것이 블로그 만들기였다. 정갈한 개인 블로그를 꿈꾸며 웹개발에 입문하게 되는데 HTML, CSS, JS를 하나도 공부하지 않고 꾸역꾸역 구글링을 하며 구름 컨테이너에 Hexo로 블로그를 만들어 깃헙 블로그에 배포 했었다. 당연히 스킨은 남들이 만들어놓은 것을 쓰다보니 영 만족스럽지 못해 얼마 안가 접었던 기억이 있다. 당시에도 만들어 놓고 이게 뭔가 싶었고 지금은 어떻게 만들었는지도 기억이 안난다.
그 이후로 지금까지 유목민처럼 옮겨다니며 블로그를 개설해왔다. 처음엔 여기 velog, 이후엔 티스토리, 다시 velog로 돌아다니면서 블로그를 개설했는데, 영 스킨이 맘에 들지 않았다. 정확히 말하면 커스텀이 문제였는데 티스토리는 고유의 문법 같은 것이 있어서 배우는 것이 부담이였고(배우는것 자체는 괜찮은데 사용되는 도메인이 너무 한정적이여서 비효율적이라고 생각했다) velog는 커스텀이 불가능했다. nuxt를 공부하게 되면서 @nuxt/content로 블로그 만들기라는 글을 읽었고 여유가 생기면 이걸 따라해보며 나만의 블로그를 만들어볼 생각이었다. nest를 배우기 전까지는 그랬다.
그런데 여유라는게 잘 오지 않았다. 회사 생활을 하면서 기술부채들이 계속 쌓였고, 그 중 nest가 우선순위가 높았다. nest는 스프링과 비슷한 구조지만 난 스프링은 싫어하고 nest는 좋아한다. 스프링은 예전에 공부해봤는데 뭔가 무겁고 편집기도 맘에 안들어서 중간에 그만 뒀다. nest도 비슷한 개념이긴 했는데 가볍고 이해하기가 훨씬 쉬어서 좋았다.
좀 유치한 말이지만 백문이불여일타라고 써봐야지 훨씬 이해가 가기 때문에 토이 프로젝트를 하기로 했다. 항상 미완으로 남았던 나의 블로그... 이번에는 어쩌면 될지도 라는 생각이 들었고 결국 실행에 옮겼다. static 사이트로 만드는게 훨씬 편하고 간단하지만 nest와 친해지면서 내 목적을 완수하기 위해 결국 nuxt와 nest가 하나의 앱에 들어가는 혼종을 만들기로 결정했다.
start
12월 9일에 nuxt와 nest를 하나의 앱으로 구현했던 선구자의 블로그를 만나 그 과정을 따라하며 기록을 남겼었다. 이 때까지만해도 tdd에 집착하느라 블로그는 생각도 안했는데, RH가 갑자기 진로를 변경하며 프론트엔드에 도전해보기로 하면서 백엔드를 보조해야했다. 제일 처음 하기 쉬운게 블로그인 것 같아 미리 내가 해보고 알려주자는 마음으로 시작했다. 대신, 이왕하는 거 꼭 검색 기능이랑 웹에서 글을 편집할 수 있게 해보고 싶었다. 가능하면 나만의 마크다운 편집기(단축키도 있고 여러모로 편리한!)를 생성해보기로 했다.
building
backend
가장 먼저 진행했던 작업은 nest로, 계정을 만들고 로그인을 할 수 있게 해서 편집 권한을 주는 것이었다. 이 과정에서 JWT에 대해 다시 공부했고 이를 정리하여 글을 쓰고 있다. 조금 흥미가 없어서 길어지고 있긴 한데 어쨌든 이번 달 안에는 적을 것이다. 여튼 JWT와 class-validator, validationPipe, mongodb, mongoose, passport 등을 사용하면서 겨우 로그인, 회원가입 그리고 포스팅과 관련된 CRUD를 만들어 냈다. 이 과정에서 윤상석님의 강의가 무척 도움되었다.
publishing
기초적인 백엔드 API가 개발 된 이후 파블리싱을 하기 위해서 windi css를 선택했다. windi css는 tailwind를 개량한 것인데, 이전에 tailwind 잘못 사용했다가 클래스 로드하는 작업이 너무 느려서 사용을 포기한 경험이 있다. windi css는 조금 더 낫다고는 하는데 tailwind를 모르면 전혀 못 쓰겠어서 tailwind부터 배우기 시작했다. 지금 사용해보니 내가 예전에 잘못 설정했었는지 지금은 속도에 불편함 없이 잘 사용 중이다. 사용법을 익히기 위해 처음에는 공식문서를 하나씩 보고 따라 갔는데, 진짜... 너무 잠 와서 구현하면서 필요한 것들만 찾아보고 있다. 다 읽긴할건데 얼마나 걸릴지는 모르겠다... 다 하면 windi css로 넘어갈 예정이다. 공부를 하면서 왜 tailwind를 쓰는지 정리 할 예정이다. 이미 일부를 쓰긴했다.
front
프론트 개발은 nuxt + typescript로 하기로 했다. 아무래도 nest가 ts인데 nuxt도 ts로 하는게 맞지 않을까 싶었고 아무래도 ts가 편리하니깐 선택했다. ts를 사용하니 편하긴 한데 중간 중간 장애물들이 좀 있었다. vue 파일의 스크립트에 ts를 적용하는 방법이 여러 가지 있는데 vue 인스턴스를 Vue.extend()로 할건지 vue-property-decorator로 할건지 아니면 defineComponent를 사용할건지 결정해야했다. nest 덕분에 클래스 문법에 익숙해져서 vue-propery-decorator를 사용하기로 했는데 경환님께서 감사하게도 조언을 해주셨다. 일단은 vue2를 사용하고 있는 nuxt2버전을 사용 중이라 vue3 또는 nuxt3 프로젝트를 하면 적용해볼 생각이다. nuxt3를 사용해볼 수는 있겠지만, 아직 불안정하고 또 새로 배워야할 것이 늘기 때문에... 지금 상태로는 감당이 되지 않을 것 같아 생각을 접었다. 경환님껜 죄송한 마음이 들었다.
여담인데 경환님 블로그는 nest도 다루고 있다. 덕분에 많은 도움을 받았다. 정말 만능 개발자이시다. 경환님은 오픈소스를 통해 알게된 분인데, 참여할 당시에는 활동에 접점이 없었다가 활동이 끝나고 나서야 블로그를 통해 능력자임을 알게 되었다. 좀 더 일찍 알았다면 좋았을텐데...
다시 돌아가서, ts로 하면서 vuex도 적용해야 했는데 typed vuex를 사용하기로 했다. 원래는 클래스 기반인 vuex-module-decorators 라이브러리를 이용해서 하려고 했는데 nuxt 커뮤니티에서 typed vuex를 공식적으로 추천해서 typed vuex를 썼다. index.d.ts를 등록하는 곳을 못 찾아서 계속 nuxt.config.js만 보고 해결을 못 했었는데, 이제 와서 생각해보니 타입이니깐 tsconfig.json에 넣어주면 되는 것이였다... stackoverflow 질문글을 보고나서야 해결할 수 있었다.
그 외로, typed vuex는 한 가지 문제가 더 있었는데, 크롬 확장 프로그램인 vue devtools가 state 변화를 정상적으로 감지하지 못했다. mutation으로 state 값을 변화 시켰는데도 이러한 사항이 devtools의 state에 반영이 안 되었다. 다행히도 이미 이를 다룬 이슈가 있어서 덕분에 해결했다.
vuex를 통해 궁극적으로 하고 싶었던 것은 디렉토리처럼 포스트들의 트리를 drawer 형태로 그려내는 것이었다. 지금은 거의 다 했고, 이제 토글 버튼이랑 반응형 디자인을 적용하면 된다. 정말 쉽지가 않다.
summary
개발을 배운 시점부터 블로그는 꼭 도전해보고 싶었다. 내가 원하는 편집기가 있는 나만의 블로그는 항상 매력적으로 다가 왔다. 블로그를 만들면서 여러가지를 배우고 계속 시도 중이다. 이제 기획 영역, 디자인 영역이 과제로 남았고 다 하면 배포를 위해서 도커와 aws를 배워야한다... 프론트부터 배포까지 이전에 한번도 해보지 않았던 방식으로 진행하고 있다. 배우기 위해서 하는 거지만 조금 과한가 싶기도 하다. 여튼, 앞으로도 개발 도중에 이렇게 회고를 몇 번 남길 예정이다.
