[Blog] Jekyll to Gatsby 마이그레이션 여정 ✈️

Jungwoo LEE·2023년 3월 25일
0
post-thumbnail

• Bye, Jekyll ✋🏻

기존에 Jekyll로 개발 블로그를 구축하던 중 불편한 점을 많이 느껴서 Gatsby로 마이그레이션을 진행 중에 있다. 불편함을 느꼈던 점들은 다음과 같다.

  1. 생소한 Ruby 기반의 프레임워크
    Jekyll은 Ruby 기반으로 작성되었는데, 나는 Ruby에 대해 전혀 몰랐다. 초기 세팅부터 bundler가 무엇인지, gemfile이 무엇인지 하나하나 찾아보며 하느라 어려움을 겪었었다.

  2. 너무 오래 걸리는 빌드 시간
    페이지 소스코드를 수정하고 다시 push를 해도 변경사항이 화면에 반영되는 데 시간이 너무 오래 걸렸다. 처음에 이런 내용을 몰랐을 때는 분명 맞게 수정했는데 왜 안 바뀌지..? 하고 당황했던 기억이 난다.

  3. 복잡한 기능 구현이 어려움
    Jekyll은 Shopify에서 개발한 Liquid라는 템플릿 문법을 사용한다. Liquid에서 제공하는 filter라는 기능들이 다양하지 못해서 블로그에 여러 다양한 기능을 구현하고 확장하는 데 용이하지 못하다.

이런 불편함 때문에 마이그레이션을 결심하였고, 여러 프레임워크들 중 Gatsby 프레임워크를 사용하기로 결심했다.

• Why Gatsby?

프레임워크들 중 Gatsby와 Hugo 중 고민했다. Hugo의 가장 큰 장점은 Jekyll 사이트 그대로 import할 수 있다는 점이다.

$ hugo import jekyll

위 커맨드를 이용하면 기존에 Jekyll로 만들어진 사이트를 그대로 import 해올 수 있다. 하지만 나는 Jekyll을 사용할 때 많은 것을 구현해두지도 않았고, UI를 전체적으로 수정하고 싶었기 때문에 크게 와닿는 장점은 아니었다.

그래서 차라리 Gatsby로 처음부터 새롭게 시작해보기로 했다. Gatsby에 큰 매력을 느꼈기 때문이다.

가장 매력을 느꼈던 부분은 바로 Gatsby가 React 기반의 프레임워크라는 점이다. 현재 React를 주 스택으로 사용하고 있기 때문에 Gatsby를 사용하면 내가 원하는 대로 쉽게 수정 및 구현이 가능할 뿐더러, 사용하면서 React와 더욱 친숙해질 수 있을 것 같다고 생각했다. 또 기존에 다뤄본 적 없던 GraphQL도 다뤄볼 수 있는 좋은 기회라고 생각이 들어서 Gatsby를 선택했다.

Gatsby는 JamStack을 활용한 정적 사이트 생성기인데, 이로 인해 얻는 장점이 꽤나 많다.

• JamStack

JamStack은 Javascript, Api, Markup Stack의 약자로, Client-side JavaScript, reusable API, prebuilt Markup(HTML)로 구성된 최신의 웹 개발 아키텍처이다.

기존 웹사이트는 사용자로부터 request를 수신할 때마다 서버에 대한 HTML 요청을 작성한다. 서버는 요청에 해당하는 HTML을 돌려주고, 브라우저에 표시하게 된다. 이 프로세스는 사용자가 URL request를 보낼 때마다 반복되게 되고, 서버는 수많은 요청을 처리해야 하기 때문에 성능 상의 문제가 있다.
이에 반해 JamStack 사이트에서는 데이터가 최초 요청 때 서버로부터 한 번만 풀링되고, 이 데이터를 CDN 캐싱장비에 저장해둔다. 이후 요청부터는 CDN에서 지정하는 캐싱 컨텐츠 만료 시점까지 캐싱된 컨텐츠를 전송하여 서버에 대한 요청 수를 크게 줄일 수 있어 서버의 부하를 줄일 수 있다.

React는 기본적으로 SPA 방식을 따르는데, SPA는 몇가지 단점이 있다.

  1. 느린 초기 구동 속도
    SPA에서는 웹앱에 필요한 모든 정적 리소스들을 처음 한번에 다운로드하기 때문에 초기 구동 속도가 느려서 사용자가 처음으로 나타나는 페이지를 보기까지 시간이 오래 걸린다는 단점이 존재한다.

  2. SEO(Search Engine Optimization)에 취약
    검색엔진의 웹 크롤러들은 JS를 실행시키지 못하고 html에서만 컨텐츠를 수집하기 떄문에 CSR로 실행되는 페이지를 빈 페이지처럼 인식해서 검색엔진최적화에 매우 취약하다.

SPA의 장점을 살리면서 SEO도 챙길 수 있는 방안으로 나타난 것이 NextJS와 JamStack이다.

다음은 JamStack에서 제시하는 최신 웹사이트 구성 방법이다.

JavaScript: Client의 모든 처리는 Javascript가 수행합니다.
API: 모든 기능 및 비지니스 로직은 재사용 가능한 API가 처리합니다.
Markup: SSG(Static Site Generator)나 Template Engine(Webpack 등)을 이용해서 Markup을 미리 생성합니다.

JamStack을 통해 얻을 수 있는 장점들은 다음과 같다.

  1. Better Performance
    처음으로 나타나는 페이지 빌드 시간을 최소화시킬 수 있다.

  2. Higher Security
    서버 사이드 프로세스를 microservice API로 추상화함으로서 공격에 노출되는 영역이 줄어든다.

  3. Cheaper, Easier Scaling
    CDN을 통해 확장성을 높일 수 있다.

  4. Better Developer Experience
    CDN을 통해 별도의 서버 관리가 필요하지 않아 개발자는 개발에 더욱 집중할 수 있다.

• 쉽지 않은 Gatsby 첫 길

처음부터 쉽지 않았다. 마음에 드는 템플릿을 clone하는 과정부터 오류가 계속해서 발생했다. 오류 코드를 보고 구글링을 하며 이것저것 해결해보았다. 어찌저찌 오류를 해결하고 빌드를 했는데 오류가 계속 발생했다. 오류 대부분이 node 버전과 node-sass 버전 호환 문제, gatsby-cli 버전 문제, pyenv 설정 문제였던 것 같다. 처음에는 하나하나 해결해보면서 트러블슈팅 과정을 기록해 볼 생각이었는데 오류가 생각보다 너무 많이 발생했고, 다 기록하기에는 무리가 있다고 판단했다.

오류가 계속해서 반복적으로 발생했는데, 그 이유를 끝내 알게 되었다.
해당 템플릿이 조금 오래되어서, 템플릿에서 사용하는 라이브러리가 node 10버전 이하에서만 호환되는데, 내가 현재 사용하고 있는 node 버전은 18.15.0 버전이었다.
node를 10버전으로 다운그레이드 하는 과정에서 다음과 같은 오류 메시지를 맞닥뜨렸다.

node@10 has been disabled because it is not supported upstream!

node 10버전이 더 이상 지원되지 않는 버전이라는 의미였다. 이렇게 해서 5일간의 삽질이 끝났고, 이 템플릿은 어쩔 수 없이 포기하게 되었다.

삽질을 하면서 그래도 처음 경험해봤던 것들이 많아져서 의미있었던 것 같다. node 및 node-sass 버전변경도 많이 해보았고, pyenv를 사용해서 여러 python 버전들을 설치하고 관리해보기도 하였다.

지금은 현재 버전에서 호환되는 예쁜 템플릿을 지인에게 추천받았고, 정상적으로 로컬서버에서 빌드까지 되는 것을 확인했다!! 블로그는 현재 수정 중에 있고, 어느정도 볼 만 해질 시점에 배포할 예정이다. 블로그 완성하는 그 날까지 화이팅화이팅 🔥👊🏻

profile
Moved to -> https://jungwoo3490.github.io/

0개의 댓글