Corona-Board-Gatsby-And-React

리액트

리액트는 UI를 컴포넌트 단위로 개발 할 수 있도록 해주는 자바스크립트 라이브러리입니다.

리액트는 SPA Single Page Application에서 동적으로 변하는 UI를 컴포넌트 단위로 잘게 쪼개 개발할 수 있도록 해줍니다.

그 덕분에 코드 재사용성과 가독성이 높아져서 프로젝트 규모가 커지더라도 개 발 효율을 높게 유지할 수 있게 되었습니다.

리액트로 개발된 웹사이트를 웹브라우저로 방문하면 웹브라우저가 자바스크립트를 실행하여 콘 텐츠를 정상적으로 렌더링해줍니다.

Server Side Rendering SSR : 리액트로 만들어진 코드를 서버에서 미리 실행하여 렌더링이 완료된 결과를 응답

리액트 라이브 러리의 ReactDOMServer.renderToString( ) 메서드를 사용하면 웹브라우저에서 하듯이 서버에서 자바스크립트 코드를 수행하여 HTML로 렌더링된 결과물을 생성할 수 있습니다.

이렇게 만든 HTML을 바로 응답해줄 수 있기 때문에 일반 사용자는 물론 검색 엔진에게도 잘 보이는 웹 사이트를 만들 수 있습니다.

단점

사버에서 페이지를 렌더링한 후 클라이언트에게 응답해야 하기 때문에 서버 측 컴퓨팅 자원을 많이 사용함.

Node.js 기반의 서버를 이용한 런타임에서의 SSR 방식

_config.yml

Gatsby

개츠비Gatsby는 다양한 데이터 소스를 이용하여 정적 웹사이트를 빌드하는 리액 트 기반 오픈 소스 프레임워크입니다. 리액트의 장점을 그대로 가져오면서 정적 웹사이트를 쉽게 만들 수 있어서 인기가 높습니다.

  • 웹사이트를 빌드하는 시점에 사이트를 구성하는 모든 페이지를 미리 렌더링하여 정적 페이지를 생성

  • 최종 HTML을 서버에서 개츠비로 빌드해 만들어내기 때문에 이 또한 일종 의 SSR이라고 할 수 있습니다.단, 사용자 요청을 받은 시점이 아닌 사이트를 빌드하는 시점에 렌더링한다는 점이 다릅니다.

개츠비를 이용한 빌드타임 SSR 방식

_config.yml

이렇게 생성된 정적인 웹페이지를 파일 서버에 업로드해 제공합니다. CDN까지 활용하면 미리 빌드된 HTML 파일이 CDN을 통해 사용자에게 물리적으로 가장 가까운 서버를 통해서 제공되기 때문에 사이트 응답 속도가 매우 빠릅니다.
모든 콘텐츠가 이미 완성된 형태로 존재하기 때문에 애플리케이션 서버도 필요 없습니다.
덕분에 트래픽이 많이 몰려도 안정성 문제가 전혀 없으며, 애플리케이션 서버를 증설할 필요도 없어 서버 유지비를 많이 아낄 수 있습니다.
개츠비를 이용하면 빠른 응답 속도, 안정성, 서버 유지비 절감이라는 정적 웹사이트의 장 점과 컴포넌트 단위의 빠른 UI 개발이라는 리액트 장점을 그대로 살릴 수 있습니다.

장점

  • 정적 웹페이지 방식을 사용하기 때문에 웹사이트 운영 비용이 매우 저렴하고 페이지 로딩 속도가 빠름 (검색 엔진 최적화에 유리함1)

  • 리액트를 이용하여 정적 웹페이지를 개발할 수 있어 개발 생산성이 좋음

  • 플러그인 생태계가 잘 발달되어 있습니다. 그래서 인기 있는 콘텐츠 관리 도구(콘텐트 풀 Contentful, 워드프레스 등)라면 이미 플러그인이 개발되어 있어 곧바로 데이터 소스로 활용할 수 있습니다.

단점

  • 웹페이지의 콘텐츠의 내용이 변경될 때마다 다시 빌드하여 배포해야 하는 번거로움

  • 실시간으로 변경되는 데이터나, 게시판 같이 사용자들이 동적으로 만들어내는 콘텐츠를 보여주는 데 최적화되어 있지는 않음

개츠비는 어떤 사이트에 적합한가?

콘텐츠가 자주 변경되지 않으며 변경 사항을 실시간으로 반영하지 않는 정적 웹사이트 개발에 적합합니다(개츠비라고 해서 항상 정적인 웹페이지만 만들 수 있는 것은 아닙니다. 상황에 따라 정 적 웹페이지와 동적 웹페이지를 섞어서 만들 수도 있습니다).

정적 웹사이트에서는 새로운 콘텐츠 를 추가하거나 기존 콘텐츠를 변경하는 시점에 전체 웹사이트를 다시 빌드해 웹사이트를 최신으로 유지합니다. 블로그, 포트폴리오, 회사 소개 웹사이트 등이 대표적입니다.

Gatsby Data Layer

Data layer : 정적 사이트 생성에 필요한 데이터를 불러오고 조회하는 기능

Data layer에서는 빌드 시점에

  1. markdown 파일, WordPress, Contentful, 일반적인 REST API 등 다양한 데이터 소스로부터 데이터를 불러 와서
  2. 그래프QL ‘노드’ 형태로 만들어줍니다.
  3. 그런 다음 그래프QL 쿼리를 이용해 노드들에서 원하는 필드를 뽑아내어
  4. 최종적으로 리액트 컴포넌트에 주입하여 정적 웹페이지를 만듭니다.

개츠비의 데이터 주입 방식 비교

_config.yml

unstructured data 비구조화된 데이터

개츠비의 Node API를 이용하면 데이터 소스로부터 데이터를 원하는 방식 으로 가져와서 원하는 페이지에 손쉽게 직접 주입할 수 있습니다. 이렇게 데이터 레이어를 사용하지 않는 방식을 비구조화된 데이터unstructured data 방식이라고도 합니

Written on August 3, 2022