우리가 리액트로 새로운 프로젝트를 시작하려면 여러가지 방법을 이용할 수 있다.
대표적으로 3가지가 있다.
- Create-React-App
- Next.js
- Gatsby.js
각각에 대해서 간단하게 알아보자.
Create-React-App
Create-React-App(CRA)는 가장 쉽고 빠르게 리액트 프로젝트를 시작할 수 있는 방법이다. 설치만 하면 자동으로 개발환경을 구성해준다. 리액트 공식 문서에서도 리액트를 배우는 단계이거나, 빠르게 리액트 앱을 만들고 싶을 경우 CRA를 통하여 시작하라고 권고하고 있다.
하지만 CRA에도 단점이 있는데 백엔드 로직이나 데이터베이스를 제어할 수 없다. CRA는 프론트엔드 파이프라인만 생성하기 때문에 백엔드를 원하는대로 사용할 수 있다.
Babel이나 webpack같은 빌드 도구를 이용하여 JSX 문법으로 쓰여진 파일들을 컴파일 하거나, 설정 없이도 동작한다. 그리고 npm run build를 입력하면 빌드까지 자동으로 해준다. 나 같이 리액트를 배우는 입장에서는 CRA가 아주 고마운 존재이다.
Next.js
Next.js는 사실 이름만 들어봤지 어떤 기능이 있는지는 아예 모르겠다.
서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js를 사용하라고 한다.
리액트 공식 문서에 따르면
Next.js는 인기 있는 경량의 프레임워크로 React로 만들어진 스태틱 서버 렌더링 애플리케이션입니다. 기본적으로 스타일링과 라우팅 해결책을 가지고 있으며, 사용자가 Node.js를 서버 환경으로 사용하고 있다고 생각합니다.
라고 한다.
Next.js의 장점이자 특징으로는
- 기본적으로 서버사이드 렌더링을 제공함
- 서버사이드 렌더링의 장점
- 검색엔진 최적화
- 초기 로딩 성능 개선
- 그냥 검색엔진 최적화
- SEO (Search Engine Optimization)
- 더욱 빠른 페이지 로드를 위한 코드 스플리팅 자동화
- HMR을 지원하는 웹팩 기반 환경
- Express나 Node.js와 같은 http 서버와 함께 구현 가능
- Babel, Webpack 설정 커스터마이징 가능
이중에서 눈에 띄는것은 SEO이다. 나중에 취직해서 웹페이지를 구성하게 된다면 Next.js로 꼭 해야할 것 같은 느낌이 든다.
Gatsby.js
Gatsby.js는 리액트 기반의 정적 페이지 생성 프레임워크라고 한다. 흔히 github 블로그를 만드는데 많이 쓰는것으로 알고 있다. 여러 가지 데이터들을 GraphQL을 이용하여 관리하도록 가져온다고 한다. 그리고 그 데이터들을 HTML, CSS, JS, React로 만들어진 컴포넌트에 뿌려준다고 한다. 리액트 공부도 벅찬데 GraphQL까지 공부해야 한다니... 지금 당장은 아니더라도 나중에 블로그를 벨로그에서 github 블로그로 갈아타서 포트폴리오 겸 블로그로 활용할 생각이다.
