개요
기존 Ruby 기반의 정적 사이트 생성기 Jekyll을 통해 블로그를 관리하고 있었다.
먼저 장점은 기존 Template 을 통해서 디자인에 큰 부담없이 오로지 포스팅만을 위한 사이트로 사용하기 적합했기 때문이다.
하지만, 기존에 짜여진 CSS 를 수정하면서 하는게 마냥 쉽지는 않았고, 마침 React 나 Styled Component 에 대한 관심이 생기게 되었다.
그래서 내린 결론 아래와 같았다.
내가 관심있는 기술셋을 활용하여 블로그를 만들어보자.그래서 시작하게 된게 본 프로젝트이다.
Skill Set
이번 프로젝트를 진행하면서 사용한 기술에 대한 간단한 개념과 정의를 진행한다.
Gatsby, GraphQL
먼저 고민된건 실제 렌더링 프레임워크를 무엇을 쓸까를 고민했다.
이번엔 CSR이 아닌 SSR 혹은 정적사이트 생성(SSG) 방식으로 단순 포스팅하는 블로그 사이트를 만들고자 하였다.
이어서 Next.js 를 사용할지, 아니면 정적 사이트 생성기 즉, Gatsby를 활용한 SSG(Static Site Generate) 방식을 사용할지에 여러 각각의 장점에 대한 고민 끝에 Gatsby 를 선택하게 되었다.
Gatsby는 기본적으로 GraphQL 을 사용해서 데이터 소스를 가져온다.
물론 Restful API 로 가져올 수 있지만, 블로그라는 사이트 자체가 사실 내가 올리는 md 파일을 보여주는 기능이 대부분이기 때문에 GraphQL이 더 맞는 개념이라 생각했다.
더군다나, Gatsby 에서 graphQL 기능을 내장하고 있어서 쉽게 사용할 수 있었다.
SPA 에서는 소스안에서 API 호출을 통해서 데이터를 가져오지만, Gatsby 에서는 Build 시 배포되는 파일에 포함시키는 방식이라는 부분이 가장 두드러지는 특징이라고 생각한다.
따라서, 생각보다 복잡한 기능들을 생각보다 깔끔하게 만들 수 있었고, 무엇보다 많은 플러그인을 통해서 다양한 기능을 활용할 수 있는 점도 생각보다 괜찮은 부분이었다.
따라서, 렌더링 프레임워크는 Gatsby 로 선택하였고, 정적 데이터를 가져오기 위해 GraphQL 을 활용하여 페이지를 만들게 되었다.
React
Gatsby 자체도 위 사진에서 알 수 있듯이 React 를 기반으로 활용된다.
따라서, React Library 를 활용하여 프론트엔드 컴포넌트를 개발하게 되었다.
기존 실무에서는 Vue2 의 Optional API 를 활용하여 페이지를 개발하였는데, react 를 해보니 왜 vue는 프레임워크라 부르고 react 는 라이브러리라고 설명하고 있는지 확실히 알 수 있었다.
Vue 또한 3버전이 기본버전으로 올라오면서 가상돔 렌더링 최적화, Typescript 지원, 반응형 개념 등장과 같이 여러가지 큰 변화들이 발생하였다.
Optional api가 아닌 Composition API로 변화되면서 기존 2 버전에서 불만이었던, 복잡성을 줄였고 Mixin 대체로 Composable 이란 React 의 Hook 의 개념또한 공식 탑재 되었다.
계속해서 바뀌어가는 기술셋을 감당하기는 힘들지만, 아직까지 여유가 있을때는 뒤쳐지지 않으려고 노력하고 있다.
추후 Vue3 버전에 대해서도 추가로 포스팅할 예정이다.
Emotion
Styled Component 프레임워크로는 Emotion 를 선택하였다.
가장 재밌었던 부분은 스타일링을 기존처럼 전역으로 스타일 시트를 관리하지 않고, component 레벨로 추상화하여 모듈화 한 부분이 생각보다 편하고 재밌었던것 같다.
각각의 상황에 따라 Props를 통해서 조건부 스타일링을 관리할 수 있었던 점이 편했고, 나름 공식문서도 잘되어 있어서 재밌게 사용해볼 수 있었다.
Typescript
현재 실무에서 하고 있는 차세대 프로젝트는 Vue3, Typescript 를 적용하였다.
공통팀 업무를 맡으면서 기술셋 정의까지 같이 진행했었는데 본 프로젝트를 하면서 Typescript 의 경험이 무엇보다 좋았기 때문에 선택하게 되었다.
Typescript는 협업에 있어서도 물론이고 개발 운영 관점에서또한, PreCompile 이 지원되는 정적 타입의 언어 이기 때문에 훨씬 유용했다.
타입스크립트의 장점에 대해서도 추가적으로 포스팅 할 예정이다.
PNPM
마지막으로 Package Manager는 PNPM 을 선택하였다.
추가적으로 설명하는 포스팅을 추가로 진행하겠지만, 속도와 번들링 사이즈 측면에서도 기존 NPM 혹은 Yarn 보다 개인적으로 좋은 성능을 낸것 같다고 생각한다.
정리
어쨋든 완벽하지는 않지만, 1차적으로 동작을 하며 이것저것 내가 원하는 디자인을 기획을 구현하여 정상동작하는 블로그 사이트가 완성되었다.
실무를 하면서 짬을내서 조금씩 해본 프로젝트이다보니 다소, 시간이 많이 걸리긴 하였으나 앞으로 이 프로젝트는 내가 원하는 것을 적용해보는 하나의 실험 프로젝트의 베이스가 될 수 있을 것 같다.