---
# System prepended metadata

title: 'React로 시작하는 프론트 개발 2(환경 구축 1, 툴체인)'
tags: [subject]

---

---
tags: subject
---

# React로 시작하는 프론트 개발 2(환경 구축 1, 툴체인)

React로 시작하는 프론트 개발은 필자(seolim)의 경험을 기반으로 작성되며 절대 정답이 아닙니다! 이점을 유념하며 읽기 바랍니다.

### React 환경 빌드 툴

React를 처음 접할 때 사용될 수 있는 환경 셋팅 툴체인은 크게 3가지로 나뉜다.

- Create React App(이하 CRA)
- Gatsby
- Next.js

그 외에도 Nx나 Razzle등의 툴체인들이 있지만 자주 활용되지도 않고 위의 툴체인과 기능적으로는 유사하다. 간단하게 3개의 툴체인을 살펴보자.

#### CRA

처음 React를 시작하는 사람들은 CRA를 통해 React app을 최초 구성한다. CRA는 frontend 빌드 구조만 webpack과 babel을 통해 생성하기 때문에 나머지 작업(서버 연결 등)은 자유롭게 할 수 있다.

자세한 내용은 [cra github](https://github.com/facebook/create-react-app)를 참고하자.

#### Gatsby

Gatsby는 정적 사이트를 빠르게 만들기 위한 툴체인이다. gatsby에서 기본적인 routing 시스템과 정적 파일 빌드를 포함하고 있으며, 통신에 GQL을 활용하여 최신 트렌드에 맞는 개발을 하기 용이하다.

자세한 내용은 [Gatsby 정식 가이드](https://www.gatsbyjs.com/docs/)를 참고하자.

#### Next.js

Next는 React로 SSR환경을 자동 구축해주는 툴체인이다. Node서버를 기반으로 동작하는 Next 서버 위에서 HTML랜더링을 React로 가능하게 구성되어 있다. 이외에 서버를 자율적으로 설정할 수 있는 등 customize도 자유로운 편이다.

자세한 내용은 [Next 정식 가이드](https://nextjs.org/learn/basics/create-nextjs-app)를 참고하자.

#### 그래서 뭘 쓸거냐?

우리는 전부 안쓴다. CRA를 통한 어플리케이션 구축은 명백한 단점을 가지는데, customize가 쉽지 않다는 점이다. CRA로 구축한 환경에서 webpack은 기본 환경을 위해 다양한 loader와 plugin을 탑재한 채로 구성이 되어있고 하나를 수정하려면 연관된 다양한 plugin을 손봐야 하는 상황이 자주 발생한다.(물론 완벽한 설정하에 이런 문제는 쉽게 발생하지 않지만, 의외로 CRA의 webpack 설정은 명확하지 못하다는게 필자의 의견이다)

필자의 경험으로는 CRA로 만든 프로젝트에 markdowon파일을 html로 load한 후 highlight.js를 적용해야하는 상황이 생긴적이 있는데, 기존의 file-loader들과의 충돌때문에 몇시간을 씨름한 적도 있다.

그리고 기본적으로 React 라는 프레임워크를 다루려면 webpack등의 빌드 번들러를 다루는 법 정도는 익혀야 한다고 생각한다. 먼저 알아볼것은 아래와 같다.

1. babel
2. webpack

(다음 글에 계속)

