Create React App을 이용해서 리액트 설치하기

1. Webpack(웹팩)이란 무엇인가?

- 오픈 소스 자바스크립트 모듈 번들러로써 여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리

1-1) Webpack의 장점?

- 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다.

- 모듈 단위로 개발이 가능하며, 가독성과 유지보수가 쉽다.

 

2. Babel(바벨)이란 무엇인가?

- 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환 시켜주는 라이브러리

Babel input: ES6(ES2015) arrow function
[1,2,3].map((n) => n + 1);


Babel Output: ES5 equivalent
[1,2,3].map(function(n) {
return n + 1;
});

-> ES6의 화살표 함수를 원래의 함수 문법으로 변환

 

3. npx?

- 노드 패키지 실행을 도와주는 도구

 

3-1. create-react-app?

- npx create-react-app <폴더 이름>이라는 명령어로 간단하게 설치 가능

ex) npx create-react-app tictactoe

-> 웹팩과 바벨을 따로 설치 및 설정하지 않아도 내부적으로 자동으로 해준다.

-> npm 레지스트리에 있는 패키지를 react-tictactoe-app 폴더에서 실행해서 리액트를 설치

 

3-2. Create React App 폴더와 파일 기본 구조

• npx create-react-app으로 설치 시 아래 그림과 같은 폴더와 파일이 생성

3-2.1) 위 파일들 중 이름이 수정되면 안되는 파일들

• index.html -> 페이지 템플릿
• src/index.js -> 자바스크립트 시작점