2) React 설치 및 설치에 필요한 것들에 대해 알아보자.

개발을 하면서 항상 느끼는것이지만 개발 환경 세팅이 전체 개발에 최소 30% 는 차지 한다고 생각이 든다. 

그만큼 환경세팅에 필요한 것들이 많고 알아야 할 것들이 많다는 말이 된다.

 

먼지 React를 설치하기 위해서는 아래와 같이 npm 이라는것을 이용해서 설치를 해야 한다.

npm install -g create-react-app 

1) npm은 뭘까? node package manager 의 약자로 간단히 이해를 하자면 java maven repository 같은 lib 저장소 같은 

    것으로 이해하면 된다.

 

2) cmd 창에서 위 커맨드를 실행시키면 

'npm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

 

라는 메세지가 뜨면서 실행이 안될것이다.

이유는 바로 npm을 설치를 안했기 때문이다. npm 설치는 어떻게 해야 할까? 

 

3) node.js 를 설치 하자. node.js를 설치하면 npm이 기본 포함 되어 있다.

http://www.nodejs.org 사이트에 접속해서 node.js를 설치하자.

설치가 완료되고 cmd 창에 node 와 npm 커맨드를 날려서 정상 설치를 확인해 보자

 

 

 

4) 일단 node js는 정상 설치 되었고 npm 커맨드도 정상 실행이 되는것 같은데 그럼 궁금한게 생겼다.

   node.js는 뭐야?   js 라고 하면 javascript인데  이름은 꼭 javascript같은데 설치를 한다. ??? 

   

   node.js에 대해 간단하게 아주 간단하게 뭔지만 알고 가도록하자. 

   정말 아주 간단히 애기하면 node.js는 javascript를 웹브라우저가 아닌 환경에서 실행되도록 하는 

   javascript 엔진이라고 설명된다.  예를 들면 java의 jdk 와 같은 것이다. 

 

   이렇게 node.js 가 설치된 환경에서는 javascript로 간단한 rest api server를 만들수도 있고 

   마치 java  application 처럼 서버사이드 application을 만들수 있게 되는것으로 이해 하자.

   

   차후 시간이 된다면 Node.js 에 대한 공부를 해보고 글을 써보고 싶다.

 

5) 여기까지 됐으면 이제 create-react-app  줄여서 cra 라고 한다. 

   cra 는 react를 개발하기 위해 필요한 기본적인 package들의 묶음이라고 생각하면 된다.

   cra를 하지않고 react를 개발 환경을 만들어도 된다. 

   그러나 그러면 webpack , babel , lint 등에 package를 따로 설치 해야 한다.

 

   설치하나 하는데 사실 굉장히 많은 것들에 대한 기본적인 내용을 이해하고 넘어가야 한다. 

   

 

이제 원하는 폴더로 이동해서 cra를 실행해서 프로젝트를 만들수 있다.

npx create-react-app [프로젝트이름]

하지만 여기서는 Visual Studio Code를 설치해서 VSCode Tool 내에서 프로젝트를 만드는것을 쓰도록 한다.

 

1) https://code.visualstudio.com/ 사이트 접속해서 다운로드한다.

2) VS Code가 설치가 완료 되면 VS Code Console 화면에서 cra를 실행해서 React 프로젝트를 생성한다.

npx create-react-app my-react-app

왼쪽 트리처럼 my-react-app 프로젝트가 생성된것을 볼수 있다.

 

 

CRA를 이용해서 설치를 하게 되면 기본적으로 webpack 과 webpack dev server가 설치 되어 있기 때문에 terminal 창에서 실행

cd my-react-app
npm run start

브라우저창에 http://localhost:3000 을 입력하면 위와 같은 화면이 보여진다.

그럼 여기서 webpack은 뭘까? 무슨 packiging을 하는것인가? 

 

간단히 webpack은 간단히 설명을 하면 여러개의 js 파일들을 하나의 bundle 파일로 묶어서  브라우저에서 로딩 속도 문제 뿐 아니라 각 파일들간의 변수 충돌 문제나 의존성 문제등을 해결하기 위해 사용한다.

 

webpack dev server는 간단히 실시간 리로드 기능을 갖춘 개발용 Web 서버이다.

webpack dev server가 없다면 webpack을 이용해서 개발한 react 프로젝트를 build를 해서 bundle.js 와 index.html 을 

로컬용 개발 web 서버의 content base 폴더에 올려놓는 작업을 기능 하나 추가 수정 할떄 마다 해야 하기 떄문이다.

 

web dev server가 있으면 이와 같은 불편함이 해결된다. 

 

여기까지 react를 개발하기 위한 가장 기본적인 개발환경 구성이였다.