CRA

React Code의 경우 최신 자바스크립트 코드로 작성하는 것이 일반적이다. (여기서 최신 자바스크립트란 ES6 기반의 코드를 의미하는데 이러한 ES6 기반의 자바 스크립트를 모든 브라우저에서 지원을 해주고 있지 않다.)

따라서 정식으로는 '웹팩'을 설치하고 설정을 따로 해줘야한다. 하지만, 페이스북에서 초보자를 위해 웹팩을 따로 설치하지 않고도 사용 할 수 있도록 CRA라는 툴을 제공하고있다.

CRA는 ES6 자바 스크립트를 브라우저가 이해 할 수 있는 ES5 코드로 변경을 해주는 툴이다.

2. ES6 Style의 자바 스크립트 소스

TestFunction = function() { console.log("Test Code") }     

위 코드는 기존의 ES5 기반으로 작성된 Code이다.

단순히 consoleLog 해주는 함수 객체를 생성해주는 코드이다.

ES6 Style로 동일한 코드를 작성하면 아래와 같다.

_TestFunction = () => { console.log("Test Code") }
cs

즉, 웹팩이란 ES6 기반의 자바 스크립트 코드 ( 두 번째) -> ES5 Code (첫 번째)로 변경을 해주는 역할을 한다.

그리고 CRA는 이러한 웹팩을 따로 설치하고 설정 할 필요없이 간단한 명령어 몇개만으로 이러한 환경을 사용자의 프로젝트에 적용해주는 역할을 한다.

3. 기본적으로 설치되야 하는 것들

▶ NodeJS

▶ NPM

▶ Visual Studio Code (Visual Studio Code 설치하기)

4. CRA 설치하기

Visual Code Studio를 실행하고 Terminal 작업 영역에서 다음 명령어를 입력하기

1. npm -g install create-react-app

(npx 가능)

▶ 그러면 설치가 주르륵 진행 될 것입니다. 설치가 완료되면 create-react-app --version 명령어를 통해 설치가 정상적으로 되었는지 확인해볼겸 버전도 확인 해봅니다.

2. create-react-app myapp

▶ 다음 명령어를 입력하기 전에 프로젝트 폴더를 생성 할 적절한 경로를 이동한 뒤 명령어를 실행해줍니다.

  여기서 myapp은 본인의 Project 이름을 넣는 것이다.
  프로젝트가 생성이 되면 아래와 같은 구조로 생성되는 것을 확인 할 수 있다.

3. npm start

이제 정상적으로 서버가 구동되는지 확인 해보자!
명령어로 'npm start'!

Build 후 브라우저가 실행되고 다음과 같은 화면이 뜬다면 정상적으로 실행이 되는 것이다.