[벨로퍼트] 리액트 프로젝트 시작하기

Webpack, Bable은 무슨 용도인가요?

리액트 프로젝트를 만들게 되면서, 컴포넌트를 여러가지 파일로 분리해서 저장할 것이고, 또 이 컴포넌트는 일반 자바스크립트가 아닌 JSX라는 문법으로 작성하게 된다. 여러가지 파일을 한 개로 결합하기 위해서 "Webpack" 이라는 도구를 사용하고, JSX를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해 Babel이라는 도구를 사용하게 된다.

 

준비사항

1. Node.js 설치 : Webpack과 Babel같은 도구들은 자바스크립트 런타임인 Node.js를 기반으로 만들어졌다. 그렇기에 해당 도구들을 사용하기 위해 Node.js를 설치한다.

2. Yarn 설치 : 개선된 버전의 npm이라고 생각하면 된다. npm은 Node.js를 설치하게 될 때 같이 딸려오는 패키지 매니저 도구이다. 프로젝트에서 사용되는 라이브러리를 설치하고, 해당 라이브러리들의 버전 관리를 하게 될 때 사용한다. Yarn을 사용하는 이유는 더 나은 속도와 더 나은 캐싱 시스템을 사용하기 위함이다.

3. create-react-app 설치 : 리액트 앱을 만들어주는 도구이다. yarn을 통해 create-react-app을 설치하고 싶다면 터미널창에

yarn global add create-react-app

입력한 후, 설치가 완료되면 react app을 설치하고 싶은 디렉토리에 

create-react-app 프로젝트이름

으로 생성하면 된다.

 

---

누구든지 하는 리액트 2편: 리액트 프로젝트 시작하기 | VELOPERT.LOG