React.js 환경 구축

요즘 페이스북에서 만든 React란 Front-End library가 핫하다고 한다.

React를 사용하여 웹 서버를 구축하기 위해선 react를 쓸 수 있는 환경을 만들어 주어야 한다.

환경을 만들어 보자!

 

react는 Node.js와의 조합이 좋다고 하여 나는 Node.js를 설치했다.

사실 나는 왕초보 프로그래머(프로그래머라고 하기도 뭐하다)이다.  그리고 웹 프로그래밍에 대한 지

식도 없고 웹 서버 구축을 처음 해본다. 그런 내가 react를 쓴다니 거의 맨 땅에 헤딩 수준이다.

근데 그렇게 좋다고하는데 너무 써보고 싶다!

Web programming 카테고리에  맨땅에 헤딩하는 흔적들이 있으니 참고하길 바란다.

 

먼저 나는 어떻게 react.js의 환경을 구축했냐 하면,

 

①     Node.js 설치

- 자바스크립트 런타임, node.js 이전의 자바스크립트는 프론트엔트 스크립트 언어였는데 node.js가 등장

함에 따라 자바스크립트로 백엔드까지 다룰 수 있게 되었다. Webpack이 node.js 기반으로 만들어졌다.

우리는 webpack을 사용할 것이다.

 

②     Atom 설치

- 코드에디터이다. 뭘 해도 상관없는데 vs Code도 많이 쓴다고 한다.

 

③     Yarn 설치

- npm을 써도 되지만 npm 보다 yarn을 사용할 시 더 간단하게 리액트 앱을 설치할 수 있다. npm으로 

화난마음을 yarn이 달래주었다.

npm이 뭐고 왜 쓰나? npm은 일단 node.js package manager 이다. 따로 설치해줘야하는게 아니라

node.js를 설치하면 자동으로 설치가 된다.

하지만 yarn은  Yarn Installation에서 깔아야 한다.

           yarn은 nmp의 단점을 보완해서 나온 패키지로 npm과 같이 프로젝트에서 사용되는 라이브러리를 설치

및 관리를 하게 해준다.

 

+   Github와 Atom 연동 (필수 아님 .그냥 atom이 github에서 만든 툴이라서 편하게 연동이 가능하다)

 

마지막으로!  cmd 창에서

 

yarn global add create-react-app

 

을 입력한다. 리액트 앱을 만들어 주는 도구를 add라는 명령어를 통해 추가해 준다.

그리고 프로젝트를 생성하고 싶은 경로에 들어가 (cd 명령어를 통해)

 

create-react-app 프로젝트명

 

을 입력한다.

 

방금 react 앱 프로젝트를 생성했다. 이제 다시 cmd창에서 프로젝트를 생성한 경로를 입력한 다음 

yarn start를 하면 localhost:3000에 리액트 로고가 돌아가며 간지나는 서버창이 뜬다ㅋㅋㅋ

 

하지만 좋아할 수가 없다. 어짜피 저거 싹 다 날리고 내가 만들어야하기 때문이다.