생활코딩 React 강의 (2) - 개발환경

React 공식 홈페이지

https://reactjs.org/

React – A JavaScript library for building user interfaces

 

Toolchain

개발환경을 위한 것들을 모아 환경을 구성해주는 도구

 

 

create-react-app 다운로드

react 개발 환경을 위해 create-react-app이라는 앱을 다운받아 사용한다.

https://github.com/facebook/create-react-app

GitHub - facebook/create-react-app: Set up a modern web app by running one command.

 

(22.03 정보)

npm install 을 하지 않고 바로 아래 명령어를 실행하면 된다.

npx create-react-app my-app

my-app 대신 내가 원하는 앱의 이름을 지정할 수 있다.

cd my-app

my-app으로 이동한다.

 

https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app

새로운 React 앱 만들기 – React

---

(21.08 정보)

npm을 사용해 다운받을 수 있다.

* npm : node.js를 이용해 만든 앱(모듈)을 쉽게 다운받을 수 있는 저장소.

* node.js를 설치하면 자연스럽게 npm을 이용해 앱을 다운받을 수 있다.(https://nodejs.org/ko/, LTS버전 다운)

 

node.js를 설치 후 윈도우에서는 실행-cmd 로 접속한 command창에서 명령어를 통해 create-react-app을 다운받는다.

 

npm -v                                   // npm 버전 확인
npm install -g create-react-app   // create-react-app 전역설치(-g)

 

* npx create-react-app 

  으로 명령할 경우, 임시로 앱을 설치해 한 번만 실행한 후 삭제된다. 항상 최신 버전을 사용하고, 저장공간을 낭비하지 않는다는 장점이 있지만 자주 사용해야 하는 경우 npm으로 다운받아두는 것이 편하다.

 

* -g를 하지 않고 create-react-app을 다운받을 경우, 나중에 작업할 폴더에서 react 개발 환경을 구축할 수 없다는 오류가 뜰 수 있다. 그런 경우엔 -g를 붙여서 다시 다운받으면 오류가 사라진다.

 

개발환경을 세팅할 디렉토리로 이동해서 create-react-app 을 통해 개발환경을 만들어준다.

cd C:\Users\Desktop\Coding     // 디렉토리 이동
create-react-app .                     // 현재 디렉토리(.)에 create-react-app 다운

---

 

잘 설치됐다면 폴더에 다음과 같은 파일들이 생성되어 있는 것을 확인할 수 있다.

 

샘플 웹앱 실행

다음 명령어를 통해 웹앱을 실행시킬 수 있다.

npm run start

VS Code의 콘솔창에서 실행했다면 자동으로 인터넷 페이지가 열리고, 커맨드 창에서 실행했다면 

 

Would you like to run the app on another port instead? (Y/n)

이라는 질문에 Y로 대답하면 인터넷 페이지가 열린다.

 

Ctrl + C 를 입력하면 종료할 수 있다.

 

 

JS 코딩하는 법

실행된 웹앱의 메인페이지는 public 폴더에 index.html 페이지다.

이 페이지는 <div id="root"></div>가 있는데 코드상에서는 빈 div로 보이지만, 실제 페이지에서는 안에 내용이 들어가있다.

이 코드는 아래의 src 폴더의 index.js를 통해 구현된 Component이다.

import App from './App';

ReactDOM.render( <App />, document.getElementById('root') );

라는 코드를 통해 id가 'root'인 element에 <App> Component를 render 했다.

이 App은 ./App(.js생략됨)에서 import된 것으로 App.js에서 내용을 확인할 수 있다.

 

주황색으로 표시한 부분의 이름이 같아야 App.js에서 만든 Component를 사용할 수 있고,

파란색으로 표시한 element의 id와 index.html에서 사용하는 id가 같아야 render할 수 있다.

그러므로 우리가 App.js의 내용을 바꾸면 App을 사용하는 index.html의 <div class="root"></div>속의 내용도 바뀌게 되는 것이다.

 

CSS 코딩하는 법

index.js파일에 보면 아래와 같이 css파일을 import하는 명령어를 볼 수 있다.

import './index.css';

index.js가 로드될 때 index.css파일도 함께 로드되며 index 페이지의 CSS도 변경된다.

이와 비슷하게 App.js에도 'import './app.css';'가 있는데 App이라고 하는 Component의 디자인을 app.css에서 담당하게 된다.

 

배포하는 법

개발시에 사용하는 npm run start 대신 배포용 명령어를 사용한다.

npm run build

build라는 페이지가 만들어지며 build용 웹앱이 실행된다.

 

start로 실행한 경우에는 페이지가 타이틀만 있는 흰 페이지여도 1.7mb나 되는 용량을 가지는데,

build로 실행한 경우에는 125kb로 줄일 수 있다.

개발에만 필요한 것들이나 배포에 불필요한 요소들을 제거한 후 배포되기 때문에 용량이 많이 줄어든다.

 

실제로 서비스할 때는 build안에 있는 파일들을 사용하면 된다.

 

배포용 사이트 생성

npm install -g serve   // 웹 서버 설치
npx serve -s build     // build라는 폴더를 다큐먼트 루트로 하는 서버 실행

 

 

참고한 페이지

생활코딩 react 강의

3. 개발환경의 종류

4. npm을 이용해서 create react app 설치

5. create react app을 이용해서 개발환경구축

6. 샘플 웹앱 실행

7. JS 코딩하는 법

8. CSS 코딩하는 법

9. 배포하는 법

https://www.youtube.com/watch?v=Vjbpzvt4l1k&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=3