react 개발 환경 셋팅 (1)

설치 부분

 

1. node.js 공식 사이트에서 다운로드

 npm이 자동으로 설치된다.

 

2. cmd 에서  npm install -g create-react-app 명령어 입력

 

3. react 개발 앱폴더를 생성 후, cmd에서 해당 폴더로 이동 한 후에, create-react-app . 명령어 입력 (폴더명은 react라고 하면 안됨)

 

4. VSC에서 npm run start 명령어 입력해보면 test 사이트가 하나 뜬다.

 

 

구성 및 배포 부분

 

1. src/index.js 파일을 보면 아래와 같이 구성 되어 있다.

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

 

2. id = root는 public/index.html에 있는 id 이다. 해당 html문서의 소스내용들이 src 폴더에서 구성을 해주어야 한다.

js 부분과 css부분을 src폴더 내에서 관리하여 최종적으로 html문서에 전달해주는 식이다.

 

3. js 부분을 변경해주려면, App.js에서 내용을 변경해주면 된다.

해당 내용이 바로 위, index.js로 넘어가고, index.js 내용이 html문서로 넘어가는 식이다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello, React!! test
      </div>
    );
  }
}

export default App;

 

4. css 부분을 변경해주려면, App.css와 index.css를 변경해주면 된다. App.css는 App.js에 연동이 되기 때문에 App.js에만 영향을 주고, index.css는 index.js에 영향을 주기 때문에 index.js에 들어가있는 모든 내용에 영향을 준다.

 

상위 개념 정리

 

1. public/index.html (2번 가지고옴)

2. src/index.js (3번 가지고옴)

3-1. index.css

3-2. App.js (4번 가지고옴)

4. App.css

 

 

5. 배포 부분

npm run start는 개발용 배포이고 실제 배포는 npm run bulid를 한다. 이 명령어를 실행하면 build 폴더가 생성되고 관련 data들이 생성된다. 이때 build폴더가 배포용의 root 자료가 된다.

 

추가로, npm install -g serve를 설치(웹서버 설치) 한 후, npx serve -s build 혹은 npm serve -s build를 통해 진행하면 된다.

 

배포용으로 따로 만드는 이유는, 개발용 파일에는 배포 시 불필요한 자료들이 많이 들어가 있다. (예 : 개발자용 에러메시지) 따라서, 실 서비스에 불필요한 data는 배포되지 않도록 (용량도 줄어듬) 하는 것이다.