안녕하세요! 올해로 3년차인 웹 프론트엔드 팀에서 근무하는 중인 개발자입니다. 기술 블로그를 만들어가는 과정을 공유하고자 이 포스트를 작성했습니다.
어떤 서비스를 이용해서 블로그를 만들까 하다가 이왕이면 개발자인데 블로그도 직접 만들어야지! 하는 생각으로 직접 개발을 해보기로 했습니다. 이 포스트도 블로그를 만들면서 디자인을 꾸미고 나면 옮길 거구요. 왜 직접 만들기로 했는지도 글을 다듬은 후에 공유하겠습니다.
처음 작성하는 포스트이다보니 적극적인 피드백을 주시면 감사하겠습니다! 긍정적이든 부정적이든 많은 반응들이 있으면 저도 부지런하게 글을 쓸 수 있을테니까요. 😁
블로그 개발에 앞서 React를 사용한 Framework인 Gatsby.js와 Next.js를 몇 번 사용해 보았던 경험이 있지만 이 글을 쓰고 있는 2020년에는 어떤 Framework가 더 좋을까?하는 생각에 공식 홈페이지를 참고해서 정리해보았습니다.
Gatsby.js
Gatsby.js는 자신의 장점을 아래와 같이 홍보하고 있습니다.
- React, Webpack, modern JavaScript와 같은 최신 웹 기술들을 쉽게 사용할 수 있습니다.
- API, CMS, file system등 다양한 출처로부터 받은 데이터를 GraphQL을 통해 제공합니다.
- 데이터베이스, 서버를 같이 배포하여 생기는 고비용, 저효율 문제를 겪지 않으면서 수십개의 서비스들을 “정적” 파일로 배포합니다.
- 오래된 기술을 사용하지 않고 Mobile, JavaScript, APIs에서 사용할 수 있는 모던 웹 기술을 제공합니다.
- 표준을 준수하는 브라우저를 지원하는 모든 플랫폼에서 사용하기 위한 PWA를 제공합니다.
- 요청할 때 생성되는 페이지를 기다릴 필요 없이 미리 빌드된 파일을 제공합니다.
Gatsby.js는 웹 사이트나 앱을 만들기 위한 React 기반의 무료이며 오픈 소스인 Framework입니다. Gatsby.js의 작동 방식은 다음과 같습니다.
- Gatsby.js는 CMSs, Markdown, APIs, Databases 등 다양한 Source로부터 Data를 받아옵니다.
- 제공받은 Data들을 React, HTML, CSS를 통하여 정적 페이지로 빌드합니다.
- 만들어진 정적 페이지에 대해 Netlify, AWS Amplify, GitHub Pages, Surge.sh, Aerobatic, Vercel 등등 웹 호스팅 서비스를 통해 쉽게 배포 가능합니다.
또한 Gatsby.js는 광범위한 Ecosystem을 가지고 있다고 설명합니다.
- Plugins — 컨텐츠를 제공하거나, 데이터를 변환하는 플러그인 등 Gatsby 앱을 확장하기 위한 플러그인들이 존재
- Starters — 미리 만들어진 Gatsby 앱들을 사용하면서 복잡하게 설정을 구성하는 과정 없이 자신만의 프로젝트를 시작 가능
- External Resources — Gatsby.js를 학습하기 위해서 공식 튜토리얼이나 문서뿐만 아니라 팟캐스트, 유튜브와 같이 Gatsby.js 사용자를 위한 커뮤니티 활성화
Gatsby.js는 Framework의 장점을 어필하기 위해 공식 홈페이지에서 다른 JAMStack Frameworks(Next.js, Jekyll, Hugo, Nuxt)와 비교한 문서가 있습니다.
그 중에서 대표적으로 비교되는 Next.js와 비교한 표를 보게 되었습니다. 비교 결과 대부분 함께 제공하고 있었지만 Gatsby.js가 우세하다고 주장한 부분은 다음과 같았습니다.
- Progressive, Responsive Image Loading: 이미지를 점진적으로 로드하거나 viewport에 맞게 로딩하는 Payload 최적화
- Document: 개발 가이드 문서(Testing, Debugging, Performance)와 추가 기능( SEO, Analytics)에 대한 가이드 문서
- 전반적인 Ecosystem(Community, Integrations)
이렇게 Gatsby.js는 Framework를 어필하기 위해서 다른 Library, Framework와 비교한 문서를 제공하고 있어 장점을 보기가 쉬웠습니다. 문서를 보다가 한편으로는 다른 Framework는 어떨까 싶어서 Next.js의 공식 홈페이지를 찾아보았지만 비교한 문서를 찾아볼 수 없었습니다.
다른 사용자들의 비교한 글을 찾아보다가 발견했던 포스트에서는 Next.js와 Gatsby.js에 대해 두 기술의 사용 용도를 비교하였습니다. 먼저 Next.js는 페이지 수가 늘어나 사이트의 규모가 커진다고 확신하는 경우에 대해 사용을 권장합니다. 또한 Gatsby.js에 대해서는 개인 블로그처럼 CMS가 필요하면서 규모가 크지 않은 사이트들에서 사용을 권장하고 있었습니다.
그러나 최근(2020년)에 Next.js가 업데이트를 거듭하면서 next-generation static site rendering을 지원하기 시작하였습니다. 그 결과 Image에 대한 강력한 기능을 제외하면 Gatsby.js의 기능들을 Next.js가 대체할 수 있을거라고 이야기합니다. 원본글
Next.js
Next.js를 정리한 내용을 소개드리기에 앞서 앞에서 나왔던 next-generation static site rendering에 대해 짧게 설명드리고 넘어가려 합니다.
먼저 Next.js에서는 이 기능을 Static Generation(SSG)이라 부르고 있습니다. Gatsby.js는 이미 강점으로 제공하고 있었던 기능이었으며, Next.js에서는 9.3 버전부터 지원을 시작하였습니다.
SSG는 빌드할 때 모든 페이지들을 html로 만들어 놓습니다. 이렇게 만들어 놓은 html은 Routing을 서버에서 제공하기 때문에 CSR에서 발생하는 초기 로딩 타임을 줄여줍니다. 그 후에 페이지에 대한 로딩이 끝나면 클라이언트로 나머지 Routing에 대한 정보를 불러옵니다. 그 후에는 가져온 정보를 통해 페이지를 새로고침하지 않아도 이동이 가능해집니다. 이렇게 CSR과 SSR이 서로 가지고 있던 단점을 상쇄할 수 있게 됩니다.
SSG가 SSR에 비해 성능면에서 더 좋지만, 사전 렌더링이 발생하기 때문에 요청 시, 받은 데이터가 최신이 아닐 수도 있다고 경고합니다. 이런 문제로 인해 발생할 개발 단계에서의 불편함을 줄이기 위해서, Next.js와 Gatsby.js 모두 개발 단계에서는 SSR을 사용하여 데이터가 바뀔때마다 발생할 앱을 리빌드하는 문제를 해결하였습니다.
Next.js에 대해서 대부분은 Gatsby.js가 소개하는 내용과 비슷하기 때문에 길게 설명드리진 않고 Next.js가 이 Framework를 사용해야하는 이유 6가지를 메인에 적어놓았습니다.
- 정적으로 만들어진 React Application을 가장 쉽게 제공합니다.
- 새로운 Framework를 배울 필요 없이 Next.js에서 단 한 줄로 정적 페이지를 배포할 수 있습니다.
- ‘styled-jsx’ 라이브러리를 제공할 뿐만 아니라 사용자들이 즐겨 사용하는 CSS-in-js Solution(styled-components, emotion 등)을 같이 사용할 수도 있습니다.
- 자동 코드 분할, 파일에 기반한 Routing, Hot Reloading, SSG로 불리는 Universal Rendering을 사용자가 따로 설정할 필요 없이 사용 가능합니다.
- Babel과 Webpack을 컨트롤할 수 있으며, 맞춤형 서버와 Routing, next-plugin을 사용해서 완벽하게 확장할 수 있습니다.
- 더 작은 빌드 용량을 위한 최적화를 제공하고 있으며, 향상을 위한 수십가지의 편의 기능을 제공하기 때문에 상용 친화적으로 개발이 가능합니다.
Next.js를 알아보기 위해 공식 홈페이지를 돌아다니다 보니, Next.js는 다른 Framework와 비교하는 문서는 따로 없었고, 대신 어떤 사이트들이 Next.js를 사용해서 만들었는지 Showcase 페이지를 제공하고 있었습니다.
페이지에는 대표적으로 우리가 잘 알고 있는 사이트들인 Twitch, Nike, Docker, Marvel을 비롯하여 많은 사이트들이 Next.js를 사용하여 정적 페이지를 제공하고 있다는 사실을 알게 되었습니다.
그래서 뭘 사용할까?
원래 이 글을 쓰기 전까지는 Gatsby.js를 사용하려고 머리 속에서 확정을 지어놓은 상태였고, staticgen이라는 JAMStack 사이트 생성기에서 Github Repo를 연동해서 생성한 이후에 글을 작성하기 시작했습니다.
그러다가 글을 쓰면서 다른 사람들의 포스트도 보고, 비교한 결과를 정리하다 보니 Next.js로 개발하는 것도 나쁘지 않겠다는 생각이 들었습니다.
Next.js에서도 npx create-next-app을 사용하면 Gatsby.js처럼 이미 만들어진 템플릿을 사용할 수도 있었구요. 심지어 종류도 240여가지나 됩니다!
이렇게 조사한들 결국 만들지 않으면 조사한 내용들이 아무 쓸모도 없어질 겁니다. 부지런히 활동을 하려면 일단 시작하는게 중요하겠죠. 그래서 다음 포스트에서는 개발 환경을 어떻게 만들었는지 설정하는 과정을 코드, 커맨드와 함께 올릴 예정입니다! 이번 글을 작성하면서 코드가 하나도 없으니 개발 블로그에 올라가는 글이 맞나? 싶은 생각도 한편으로 들었거든요.
