블로그 구축기

블로그를 만들게 된 계기

프론트엔드 개발자로서 내가 운영하는 웹사이트 하나 정도는 있어야겠다는 생각이 들었다.

사실 이전 직장에서는 개발자가 나 혼자라서 개발 관련된 일을 다 했다. 물론 나중에는 백엔드 개발자, 프론트엔드 개발자 한 명씩 충원돼서 역할을 분담하고 협업을 했다. 내 포지션은 필요에 따라 백엔드, 프론트엔드 다 했지만 하다보니 프론트엔드에 점점 흥미가 생겼다. 왜 재밌었는지 돌이켜보면 데이터를 필요에 따라 원하는 형태로 시각화하는, 눈으로 볼 수 있게 만드는 작업 자체가 재밌었던 것 같다.

퇴사 한 후에 전문성을 프론트엔드로 키우고 싶은 마음이 컸다. 그래서 프론트엔드 개발자로서 필요한 역량이나 전문 지식이 무엇인지 생각해보고 공부를 어떻게 하면 좋을지 고려해봤을 때 직접 웹사이트 하나 구현해보는게 좋을 것 같다고 생각이 들었다.

그 중 블로그인 이유는 개인적으로 일상에서 느낀 점들이나 개발 공부자료 등 내가 경험한 것들을 공유하는 걸 좋아한다. 그래서 우선 글로 쓰는 블로그를 시작으로 하지만 추후에 운동 내용이나 요리 등 다양한 자료 및 데이터들을 구현할 예정이다.

기간

8월 즈음부터 "블로그를 만들자!"하고 마음먹었다. 하지만 기획, 디자인과 같은 개발 외적으로 난관이 많았다. 그러다보니 초기에 진행속도가 많이 더뎠다. 시간이 훌쩍 지나 10월이 되었을 때 진짜 필요한 기능부터 만들고 배포하고 차근차근 업데이트를 진행하자고 마음 먹고 이제야 배포하게 됐다. 실제로 기능 구현만 생각했을 때는 일주일도 안 걸린 것 같다.

기술 스택

기술 스택은 대표적으로 Next.js, Typescript, unified(remark, rehype)을 사용했다.

Next.js를 선택한 이유는 개인적인 공부와 SEO, SSR 때문이었다. 나의 공유하고 하고자하는 마음을 충족시키기 위해서 SEO는 반드시 필요했고, SSR은 2020년대에 로딩이 체감되면 굉장히 불편함을 느끼기 때문이다.

unified는 md파일을 html로 변환시켜주기 위해 사용했다. 여기서 code block을 예쁘게 보여주기 위해 rehype-pretty-code를 사용했는데 react-syntax-highlight랑 비교를 했었다. 근데 react-syntax-highlight는 hooks가 자체적으로 들어간 컴포넌트를 사용해서 CSR로 지원하기 때문에 SSG 렌더링 방식을 사용할 수 없었다.

어려웠던 점

디자인

뭔가 다르게 하고싶은 마음은 되게 컸다. 그러다보니 제일 어려웠다... 결국 템플릿을 여러 개 찾아보고 다른 사람들이 직접 구현한 블로그도 보고 해서 깔끔하고 원하는 분위기를 만들어내서 다행이라고 생각한다.

스타일링

styled-components를 쓸까 css module을 쓸까 고민하다가 css module을 쓰게 되었다. styled-components의 장점은 컴포넌트 재사용성, js파일 안에 css를 바로 작성하는 것이라고 생각한다. 근데 현재 내 블로그에는 페이지 단위로만 style을 정의해도 많지 않을 것 같고 폴더 구조도 단순할 것 같았다. 성능 측면에서도 javscript to css parsing 과정을 안 거쳐도 돼서 좋다고 생각했다.

다크모드

버튼을 통해서 다크모드를 구현할까 했다. 처음에 버튼을 넣어서 하려 했지만 CSR로 작동해서 default 테마가 먼저 보이고 세팅된 테마가 적용돼서 개인적으로 완성도가 떨어지는 느낌을 받았다. 그래서 우선 OS system theme에 따라 다크모드가 적용되게 만들었다.

추후 개발할 내용

추후에는 SEO, 블로그 검색 기능을 생각하고 있다.