0. 시작하기 전에

기존에 Junhobaik님의 블로그 테마를 사용하며 블로그를 운영하고 있었는데 기능이나 UI를 변경하고 싶은 부분이 있었다.

시간이 없기도 했고 (다들 이렇게 변명 하잖아요..? 하핳) 슬쩍 보기에 작업하는데 생각보다 어려움이 많아 미루고 있었다.

블로그에 너무 쓰다만 글이 많아서 정리하며, 정리하는 김에 작업요소를 확인해보았다.

1. Node, Gatsby Version update
2. 그에 따른 GraphQL문 변경
3. 전체적인 Layout변경
4. css 작업…
5. 3, 4번 작업에 따른 UI부분 Typescript 동작 수정

코드는 정말 깔끔하게 짜있어서 코드를 이해하거나 UI 동작하는 부분 수정하는 것은 힘들어 보이지 않았지만

Layout 전체를 변경하고 싶어서 새로 만드는게 나을 것 같은 생각이… 😅

사이드 프로젝트를 하나 기획 중인데 리액트 사용할거라 (FrameWork는 다르지만) 리마인드 겸 미루고 미루던 블로그 제작을 시작한다ㅋ

작업 과정을 3개의 글로 정리할 예정이다.

1. Gatsby 프레임워크

2. 프로젝트 구성과 페이지 작업 필수 Plugin 추가

3. 추가 기능 구현

CSS 작업 할 생각에 짜증도 나고, 조금 무섭지만 (잘 몰라요…ㅜㅜㅜㅜ)

마음 먹었으니 빠르게 달려보자 🏃🏻

1. Gatsby

그럼 이제 Gatsby프레임 워크에 대해 알아보자

Gatsby는 React를 사용하는 JAM Stack 기반 프레임 워크다.

1.1 So What is JAM Stack

JAM Stack의 공식 문서에 나온 정의는 다음과 같다.

Jamstack은 데이터 및 비즈니스 로직에서 웹 경험 계층을 분리하여 유연성, 확장성, 성능 및 유지관리성을 향상시키는 아키텍처 접근 방식

JAM Stack은 Javascript, API, MarkUp Stack의 약자로, Javascript와 API Html이나 css등을 칭하는 MarkUp으로 이루어진 웹 구성 방법이다.

위 그림에서 보듯이 웹 사이트는 대부분 서버의 데이터를 통해서 웹페이지를 사용자에게 노출한다.

그렇기 때문에 화면 렌더링 + API통신단계를 가지게 되고, 페이지 로딩에 시간이 걸리게 된다.

이 과정을 조금 자세히 이해하기 위해선 SSR, CSR, SPA란 단어가 등장하는데 간략히 한줄 요약 해보면

반면에 JAMStack은 디커플링 및 사전 렌더링 원칙을 기반으로 아키텍처가 구성이 되어 있는데

SSG(Static Site Generator)나 Template Engine(Webpack 등)을 이용해 각종 마크업 요소, API를 통해 생성된 정적 웹 사이트를 생성(build)하고, 서버는 정적인 페이지만을 제공
-> 클라이언트 별 동적 기능은 설정된 마이크로서비스(API)를 통해 처리

즉, 사용자에게 화면을 보여주기 위한 시간이 단축된다.

좀 더 구체적으로 JamStack의 장점을 정리하면

1. 높은 성능

   • 페이지의 빌드시간 최소화
   • 브라우저에서 첫 응답을 받기까지 걸리는 TTFB(Time to First Byte)를 최소화하는데 미리 빌드된 파일을 CDN을 통해 제공하는 방법이 Best

2. 높은 보안성

   • 서버 측 프로세스가 Microservice API로 추상화 되며 공격 영역이 줄어듬

3. 적은 비용의 확장성

   • CDN을 통해 쉽게 확장 가능

Gatsby의 장점을 3가지로 요약하면 다음과 같다.

1. React기반 SSG (Static Site Generator)

2. 다양한 Plugin System

3. Graphql 사용해 간편한 Data 관리

다음편에선 Gatsby의 폴더 구조를 설계하고 페이지 작업을 해보자 💪🏻

Reference

Jamstack Document Jamstack vs Conventional Web Architecture - Which One is Right for you? - dev.to