React.js - 리액트 개발 환경 구축하기

 

 

리액트 개발 환경 구축하기

 

 

 

 

1. node.js에 들어가 node.js 프로그램을 다운로드한다.

 

 

 

 

최신 버전보다는 안정화 버전을 다운받는 것이 좋다.

 

nodejs.org/ko/

Node.js

 

 

 

 

 

 

 

2. 명령 프롬프트를 실행하여 npm과 react.js을 구축한다.

 

 

 

 

npm -v을 입력하고 엔터를 친다.

 

 

 

 

 

 

 

 

npm install -g create-react-app@2.1.8을 입력하고 다시 엔터를 치면 npm이 다운로드되어 깔린다.

 

 

 

 

 

 

이제 react을 설치할 준비가 되었으므로 create-react-app을 써주어 언터를 누르면 구축 준비가 된다.

 

 

 

 

 

 

 

이제 바탕화면에 react-app 폴더를 만들고 cd (파일 경로)을 적어주어 언터를 친다.

 

 

 

 

 

 

 

그리고 create-react-app .을 적어주어 다시 언터를 치면 본격적으로 리액트를 위한 구축 파일이 정한 파일 경로로 다운로드가 시작된다.

 

 

 

 

 

다운로드가 완료되면 이렇게 명령 프로프트의 상태가 된다. 폴더에도 리액트 패키지들이 깔려있다.

 

 

 

 

 

 

 

3. 리액트 샘플 웹앱 실행하기

 

 

 

 

 

이제 npm run start을 실행하면 react의 샘플 웹앱이 실행된다.

 

 

 

 

 

 

리액트의 샘플 웹 페이지가 열리면서 작업을 할 주소(Local: 아니면 On Your Network 둘다 가능) 또한 명령 프로프트에서 확인 할수 있다. 

 

 

 

 

 

4. js 코딩하는 법

 

 

 

이렇게 리액트 파일 폴더에는 에디터로 확인 하면 위와 같이 나타난다.

 

 

 

 

 

파일 폴더 중 pubilc의 index.html에 id 값이 root인 태그가 있는데 이 태그 안의 값들이 핵심이다. 이 태그 값들이 react의 샘플 웹 페이지의 모습을 재현해 주고 있는 것이다.

 

 

 

 

 

 

src 파일폴더 안에 있는 index.js 스크립트 파일에 들어가보면 root가 스크립틍에 연동되어 있다는 것을 확인 할 수 있다.

또 import App form './App'; 이라는 것을 통해 App.js와 연동되어 있다.

 

 

 

 

 

 

 

연동된 App.js에 들어가 보면 App 함수 안에 있는 값들이 바로 우리가 자바스크립트를 수정하는 부분이다.

 

 

 

 

 

 

App.js 안에서 App 함수 안의 자바스크립트 값들을 변동시키니 리액트 샘플 웹에서도 곧바로 반응을 확인할 수 있었다.

 

 

 

 

 

 

 

 

 

5. CSS 코딩하는 법

 

 

 

 

 

src 파일의 index.css라는 파일을 보면 위의 모습처럼 CSS을 적용한 코드들이 보인다.

App.css도 마찬가지이다.

 

 

 

 

 

index.js로 돌아가 보면 이렇게 index.css가 연동되어 있다는 것을 확인 할 수 있다.

 

 

 

 

 

또한 App.js에 가보면 App.css가 연동 되어 있다는 것을 확인 할 수 있다.

 

 

 

 

 

.css 파일을 수정해보았다.

 

 

 

확실하게 효과가 적용되었다.

 

 

 

 

 

 

6. 배포하기

 

 

 

 

실제 웹을 배포하기 위해서는 성능과 보안을 위하여 최대한 쓸데없는 용량을 줄여야한다. 이때 npm run build 하면 따로 build 파일이 생성된다.

 

 

 

더 경량화 된 코드가 build 폴더 안에 따로 파일이 생성된 것을 확인 할 수 있다.

이 파일들을 개발하며 만든 코드를 대신하여 배포하는 것이다.

 

 

 

 

 

이제 npx serve -s build을 명령하면 주소를 알여주는데 이 주소를 통해 본인 컴퓨터 어디에서나 구축한 서버를 불러올 수 있게 된다. (npm대신 쓴 npx는 한 번만 실행하고 삭제되는 명령어이다.)