블로그 생성

2021.04.21
2 minutes read
1882 views
thumbnail

이 글은 재 작성된 글입니다.

- 2021. 07.16

많은 곳에 좋은 개발 블로그 사이트가 많습니다.
(medium, tistory, wordpress, velog, devto 등등)

Notion처럼 좋은 도구들도 많습니다.
(현재도 사이드 프로젝트 관리라던지, 일정 관리가 필요할 경우 유용하게 사용하고 있습니다.)

그럼에도 이렇게 개인 사이트를 개발 했던 이유가 있습니다.

개인적으로 개발 블로그를 만들어서 사용하고 싶은 욕구와 더불어서
기술 습득과 실제로 구현 시에 어떤 부분에서

  • 문제가 많이 발생하는지
  • 고민을 많이 하는지
  • 고려해야될 것들은 어떤게 있는지
  • 등등

을 느껴보고 싶어서 시작한 이유가 있습니다.

또한 구현 시에 나의 부족한 점을 파악할 수 있고, 이해도를 높일 수 있겠다는 생각도 했었습니다.

그래서 시작했습니다.

Stack 선택 기준

  • 많이 익숙한 것
  • 그렇지만 더 이해할 필요가 있는 것 또는 이해하고 싶은 것
  • 사용해보고 싶었던 것

위 조건 범주에서선택해서 개발 했습니다.

Front-end

  • typescript: 이젠 타입스크립트 없이 개발을 못한다고 할까나...
  • react: 프런트엔드 3대장 중 가장 좋아합니다.
  • next.js: React SSR을 위해 선택했고 Vercel과 잘 맞아서 선택했습니다.
  • recoil.js: 정식 릴리즈는 되지 않았지만 보일러 플레이트가 없다 싶이 하고 진입장벽이 낮아 썼는데 상당히 만족스럽습니다.(페이스북에서 만들었기 때문에 React와 잘 맞을 것 같다는 생각도 했습니다)
  • react-query: API 관련 상태를 별도 상태 관리 툴 없이 간편하게 쓸 수 있는 장점이 있습니다. 타입스크립트 지원도 매우 잘 되어 있습니다.
  • axios: api 호출을 위해 사용했습니다.
    - emotion: CSS-in-JS tool 중 간편하게 쓸 수 있어서 사용했습니다.(성능 또한 좋습니다.)
  • stitches.js: 가볍고, design token을 적절히 강제하여 복잡도를 낮추는 theme 적용방법이 좋았고, 타입스크립트 지원도 잘 됩니다. ssr 지원도 간편하게 적용가능하고, dark mode 적용 시 theme을 통해 간편하게 적용할 수 있어서 사용하였습니다.
  • toast-ui/editor: v2.0 부터 사용했지만 최근 v3.0 배포가 되어 더 좋아졌기도 하고, 프리뷰 자동 스크롤링이 굉장히 잘 되어있습니다. 큰 단점은 없어보여 사용했고, 문서도 잘 되어 있습니다.
    - markdown-it: post viewer에 좀 더 나은 markdown view를 위해서 사용했고, 여러 plugin이 잘 제공되어 있어서 사용했습니다.
  • react-markdown: react component 형태로 사용할 수 있어서 좋았고, 타입스크립트 지원도 잘 되어있습니다. rehype, remark 플러그인도 무리없이 적용할 수 있어서 사용하였습니다.
  • vercel: 프런트엔드 배포를 위해 별도 build 없이 github에 push 하면 자동 빌드, 배포 되어 매우 편해서 사용했습니다.

Back-end

풀 스택으로 개발을 해보고 싶었고 그래서 cms를 구현하기 위해 back-end를 개발했습니다.

  • typescript
  • node.js: java spring boot를 다루긴 힘들기도 했고, 자바스크립트로 웹 서버를 간단하게 구현할 수 있어서 선택했습니다. 무엇보다 친숙한 언어로 가능하기 때문에 큰 고민없이 선택했습니다.
  • koa.js: express.js, koa.js, fastify를 사용해보았었고 그 중 익숙하여 빠르게 적용가능한 koa.js를 선택해서 구축했습니다. (나중에 바꿀 생각도 있습니다.)
  • mariadb: 몇 번 써보기도 해봤고, 레퍼런스도 많고 오픈소스이고 등등 많은 이점이 있는 RDB라서 사용했습니다.
  • typeorm: 몇 번 사용해보았고, 타입스크립트도 잘 지원되서 사용했습니다. 다만 document가 보기 편하진 않아 아쉬웠습니다.
  • aws: s3(이미지, 파일 등 저장용도를 위해), ec2(db서버, 웹서버를 위해), route53(도메인 구매를 위해) 를 사용했습니다.
  • pm2: nodejs 프로세스 매니저로 안정적이며 다양한 편의기능이 있어서 사용하기 좋았습니다.
  • nginx: 웹 서버 구동을 위해 사용했고, 간단하게 설정할 수 있어서 좋았습니다.
  • cloudflare: front-end 정적파일, api 등 cdn, proxy설정을 위해 사용했습니다. ssl 적용도 쉽게 가능하고 여러 편의기능들이 있어 좋았습니다.

개발 진행

notion-ss.png

초기 배포를 위해 2주 정도 기간을 잡고 진행했었습니다.
최소한의 기능만 담고 반영된 모습이 생각한 모습과 비슷한지 확인을 위해 최대한 빠르게 배포를 진행했었습니다.

그 뒤 필요한 기능, minor 오류, 추가하고 싶은 기능 등을 하나하나 추가 했습니다.(nextjs, 임시저장 기능, 오류 등)

글 작성

제가 부족하거나 이해하고 싶은 글 위주로 작성했었습니다.
최대한 정확한 정보를 작성하기 위해서 글 속도는 많이 빠르진 않지만 꾸준히 해보려고 하고 있습니다.

작년 3,4월 부터 프런트엔드 공부를 시작했습니다.

자바스크립트, react를 보았을 때 신선한 충격과 알 수 없는 불안감 등이 혼합된 상태로 시작했습니다.
불안감이 올 때마다 공부노트 쓰는 것 처럼 글을 작성했고
작성할 때마다 그 불안감이 조금은 줄어들어 계속해서 느리지만 꾸준하게 작성하게 되는 것 같습니다.

마무리

결로은... 여전히 즐겁고 불안하지만... 즐겁게 개발하는 날이 많아졌으면 좋겠습니다.