[React] 리액트 툴체인( Create React App(CRA) , Gatsby )

툴체인이란?

💡 툴체인(toolchain)은 주로 다른 컴퓨터 또는 시스템의 소프트웨어 제품을 만드는 데 사용되는 컴퓨터 프로그램 개발 도구들의 집합이다. 일반적으로 여기에 포함된 개발 도구들은 연쇄적으로 사용된다. 즉 어느 한 개발 도구의 출력은 다른 개발 도구의 입력이 된다.

 

React 팀의 추천 방법

• React를 배우고 있거나 아니면 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App.
• 서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js을 시도해보세요..
• 고정적인 콘텐츠 지향적 웹사이트를 만들고 있다면 Gatsby를 시도해보세요..
• 컴포넌트 라이브러리 혹은 이미 있는 코드 베이스에 통합을 한다면 더 유연한 툴체인. (숙련자에게 추천)

 

CRA는  webpack, babel 등 React에서 주로 많이 사용하는 도구 및 설정을 포함하고 있다.

 

따라서, Create React App을 사용하면복잡할 설정없이 한번에 React 개발 환경을 구성하고 이용할 수 있다.

 

특정 환경의 개발을 바로 진행할 수 있도록 만든 기초 환경을 통틀어 보일러 플레이트(boiler plate)라고 부르기도 하는데, CRA는 그러한 보일러 플레이트의 일종이다

 

다음은 yarn과 npm을 활용한 CRA의 예시다.

예시에서의 ‘npx’은 npm 5.2+ 버전의 패키지 실행 도구이다.

 

yarn create react-app my-pjt

npx create-react-app my-pjt

 

Gatsby

쉽게 SEO와 성능, 두 마리 토끼를 모두 잡을 수 있습니다.

GatsbyJS는 기존에 블로그 제작에 많이 사용되었던 Jekyll과 같은 정적사이트 생성기입니다. JavaScript가 실행되면 빈 HTML 페이지 안에 마크업을 추가해주는 SPA(Single Page Application)와 다르게, 개발 후 Build 과정에서 마크업이 생성됩니다.

 

리액트로 만든 SPA 페이지(좌) / GatsbyJS로 만든 static 페이지(우)

 

 

참고

 

https://ko.reactjs.org/docs/create-a-new-react-app.html

https://blog.banksalad.com/tech/build-a-website-with-gatsby/