개요
개발 공부를 시작하며, 항상 개인 블로그를 만들고 싶다는 생각을 했습니다. 막연히 만들어야지 만들어야지 하다 보니 늘 만들다 말고 흐지부지되기 일쑤였습니다. 이번 기회에 끝맺음을 맺지 못하는 습관을 버리는 것과 오래된 염원이었던 블로그를 만드는 것 두 가지를 이루어 보려고 합니다.
블로그를 만들게된 계기
저는 생각을 손으로 끄적이는 것을 좋아했습니다. 생각이 나는 대로 무언가를 보이는 곳에 메모하다 보니 나중에 보려 해도 도통 찾을 수 없거나 어디론가 사라져버렸습니다. 그러다 보니 정말 중요한 생각이나 그 순간의 내 느낌을 더 이상 알 수 없게 되어 무언가 빈 느낌을 많이 받았습니다. 이런 아쉬운 순간들을 없애기 위해서라도 제 생각을 기록해 남겨놓을 공간이 필요했습니다.
배운 것을 정리하는 것도 마찬가지였습니다. 개발 공부를 시작하고 너무나 많은 것을 공부해야 하고, 무엇을 어디서부터 시작해야 할지 모르겠는 무력감에 빠진 적이 꽤나 많았습니다. 그럴 때마다, 이런 고민할 시간이 어딨어? 일단 공부하자라는 마음으로 무작정 담기에 바빴던 것 같습니다. 담기만 하는 것은 사실상 밑 빠진 독에 물을 붓는 것이었습니다. 제대로 정리를 하지 않으니 배움을 통해 얻은 지식을 내재화하지 못했습니다. 그 결과 앞으로 나아가는 느낌보단 제자리에서 맴돌고 발전하지 못하고 있다는 생각이 들었습니다.
물론 정말 좋은 블로그 서비스들이 많지만, 내가 필요로 하는 공간을 내 손으로 직접 만든다면 나 스스로에게 더 큰 의미가 있을 것 같았습니다.
사실상 블로그는 유지석이라는 제 이름을 걸고 세상에 처음 나오는 프로덕트입니다. 내 이름을 가진 프로덕트를 세상에 선보인다는 것이 얼마나 낭만적이고 설레는 일인지!
내가 직접 만든 공간에서 내가 알게 된 것과 내가 느낀 것을 기록하며, 제가 아닌 다른 사람들에게도 제 생각들을 공유하고 싶습니다.
그리고 배우고 싶고 적용하고 싶었던 기술들을 직접 사용하며, 더 성장하고 싶은 마음에 블로그를 만듭니다.
기술 스택
Next 13
블로그를 만들기로 결심을 하고 Gatsby와 Next 중 어떤 프레임워크를 사용해서 블로그를 만들까 고민을 하였습니다.
결국 Next를 사용해 개발하기로 결정했는데, 그 이유는 다음과 같습니다.
1. Server Side Rendering(SSR) & Static Rendering
SSR을 이용하면 서버에서 이미 만들어진 HTML 페이지를 보내주기 때문에, 렌더링 속도가 빠릅니다.
서버에서 이미 HTML을 구성하였기에 뛰어난 SEO를 제공합니다.
또한 Static Rendering을 사용해 빌드 시 각 페이지를 사전에 렌더링을 해놓고, 요청이 올 경우 페이지를 보내줍니다.
2. 뛰어난 SEO
1번의 연장선으로, 서버에서 이미 HTML을 구성이 된 상태여서 리액트의 CSR보다 더 훨씬 높은 SEO를 제공합니다.
또한 next@canary 버전을 사용하면, metadata를 통해 여러 메타데이터를 손쉽게 설정 할 수 있습니다.
3. 라우팅
react-router-dom과 같은 라이브러리의 도움 없이 Next는 Next 자체적으로 파일 시스템 기반의 라우팅을 제공해 줍니다.
✨ Next13은 또한 로딩, 에러, 404 페이지 등의 UI를 담당하는 파일을 제공합니다.
Next는 이외에도 Image태그를 이용한 이미지 최적화, Link태그를 이용한 prefetching 등 다양한 기능을 제공합니다.
블로그를 만드는 것이기에 무엇보다 SEO가 중요했고, Next와 더 친해지고 싶기에 선택했습니다.
현재 너무나 만족스러운 개발 경험을 느끼고 있습니다. 😆
TypeScript
제가 생각하기에 TypeScript 사용을 통해 얻을 수 있는 최고의 장점은 인텔리센스라고 생각합니다. 타입을 지정함으로써 우리는 vscode와 같은 IDE로부터 각종 도움을 받을 수 있습니다.
그리고 제가 실수하는 부분들을 TypeScript가 대신 잡아주기에 더 나은 개발 경험을 만들 수 있습니다.
TailwindCSS
TailwindCSS는 유틸리티 클래스 기반의 CSS 프레임워크입니다다. TailwindCSS를 처음 접한 시기에 너무 많은 유틸리티 클래스에 절망감에 잠시 빠져있었습니다. 하지만 사용하다 보니 생각보다 금방 손에 익고 적응하게 되었습니다. 그 후로는 정말 쉽고 즐겁게 스타일링을 했던 경험들이 있습니다. TailwindCSS의 디자인 시스템도 저의 취향이라 선택했습니다.
Contentlayer
Contentlayer는 Vercel의 VP인 Lee Robinson이 개인 블로그의 코드를 설명 해주는 영상을 통해 알게 되었습니다. 기존에는 strapi나 sanity와 같은 CMS를 사용할까 고민을 하였습니다. 하지만 생각보다 많은 공부량이 필요했고 배포된 서버를 꾸준히 관리할 자신이 없었습니다.
하지만 Contentlayer을 사용하면 마크다운 혹은 mdx 파일을 정말 쉽게 데이터로 만들어 줍니다. 심지어 타입세이프한 데이터입니다! 😉
pnpm
기존의 프로젝트는 npm과 yarn을 주로 사용해 패키지 매니징을 진행했습니다.
이번 블로그 프로젝트는 개인 프로젝트인 만큼 새로운 기술과 제가 써보고 싶은 기술을 사용하고 싶었습니다.
그리하여 pnpm을 선택하였습니다. pnpm은 2017년에 만들어진 빠르고 효율성을 중시하는 패키지 매니저입니다.
npm을 사용해 의존성을 사용하는 프로젝트가 100개 있을 경우 해당 의존성의 복사본이 디스크에 100개 저장될 것입니다. 하지만 pnpm은 content-addressable 저장소를 사용하기 때문에 단 1개의 의존성을 갖게 됩니다.
각 의존성들이 hard-linked 되어 있어 추가적인 디스크 공간이 필요 없습니다. 그 결과 디스크 공간을 절약할 수 있으며 빠른 설치 시간을 보장합니다.
실제로 사용해 보니 정말 빠르다는 것을 체감하고 있습니다. ⚡
앞으로
더 블로그다운 모습을 갖춘 후, 블로그를 어떻게 만들었는지에 대해 자세히 작성하여 블로그를 만들며 제가 경험한 것들을 나누고 싶습니다. 또 제가 배운 것과 저의 생각을 공유하며 생기 있는 블로그를 만들고 싶습니다.
앞으로 잘 부탁드립니다.
출처
- https://beta.nextjs.org/docs
- https://www.contentlayer.dev
- https://pnpm.io/motivation