[React] 리액트 앱을 개발/실행하기 위한 기본환경

* Create React App

리액트 앱을 개발하기 위한 명령줄 도구

앱의 뼈대생성 및 생성한 앱을 실행하기 위한 트랜스파일러, 번들러, 개발 서버 등의 기능을 갖춤

 

트랜스파일

프론트엔드 개발이 복잡해지면서 순수 자바스크립트만으로는 부족할할때가 많아졌다.

리액트에선 JSX (JavaScript Xml)라는 확장구문을 이용해 컴포넌트를 개발하는것이 일반적

브라우저는 확장구문을 그대로 실행할 수없어서 순수 자바스크립트로 미리 변환해놔야하는데 이런 작업을 담당하는 것이 트랜스파일.

대표적인 것이 Babel

 

번들러

자바스크립트에서도 앱이 비대해지면서 코드를 모듈 단위로 관리하는 것이 일반적.

대량의 모듈로 구성된 것을 개별적으로 가져오는 건 비효율적이기에 미리 모듈을 하나로 묶어 전송 효율을 높이는 목적.

이런 처리를 bundle이라 하며 bundler가 이걸 담당.

Create React App에선 웹팩 (webpack)을 사용

1. 미니피케이션 : 주석, 공백을 제거하거나 로컬 변수 이름을 짧게하는 등 코드 자체 크기를 최소하는 것을 의미. 통신량 절약
2. 다잊제스트 (digest) 부여 : 최종 생성되는 파일명 끝에 해시값 (다이제스트)를 부여. 해시값에 따라 코드가 변경되면 파일이름도 변경되기에 브라우저의 의도하지 않은 캐싱을 방지할 수있다.

 

개발서버

리액트를 비솟한 일반적인 웹 앱은 일반적으로 서버에 올려놓고 클라이언트 (브라우저) 요청에 따라 전달.

서버는 네트워크상에 상시 대기하며 콘텐츠/서비스를 제공하기 위한 컴퓨터를 의미.

기중에서도 http를 통해 콘텐츠를 제공하는 서버를 HTTP 서버라고 한다.

Create React App에서도 webpack-dev-server라는 간이 서버 제공

Node.js

Create React App은 그 자체가 자바스크립트로 작성된 도구이며 실행을 위해서 Node.js를 설치해야 한다.