[JavaScript][React] CRA (Create-React-App)을 통해 쉽게 React 개발 환경을 구성하자

1. 왜 CRA를 사용하는가 ? 

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

따라서 정식으로는 웹팩이라는 녀석을 설치하고 설정을 따로 해줘야 합니다. 하지만 고맙게도(?) 페이스북에서 초보자를 위해 웹팩을 따로 설치하지 않고도 사용 할 수 있도록 CRA라는 툴을 제공하고 있습니다.

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

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

_TestFunction = function() { console.log("Test Code") }     //ES5

위 코드는 기존의 ES5 기반으로 작성된 Code 입니다. 단순히 consoleLog 해주는 함수 객체를 생성해주는 코드입니다. ES6 Style로 동일한 코드를 작성하면 아래와 같습니다. 

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

즉 웹팩이란 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

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

2. create-react-app myapp

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

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

3. npm start

이제 정상적으로 서버가 구동되는지 확인 해봅시다. 명령어로 'npm start'를 실행해줍니다. 

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

계속해서 React 관련 포스팅을 업데이트 하겠습니다. 감사합니다 ^^

2019/03/14 - [Programming/JavaScript] - [JavaScript] Visual Studio Code 설치 및 시작