Front-end/React.js

1. 개발환경 - React 기초 | 생활코딩

AGAL 2020. 2. 13. 00:08
반응형

[출처 : https://opentutorials.org]

3. 개발환경의 종류

NPM

node.js를 이용해 만들어진 여러 앱을 명령어 환경에서 손쉽게 설치할 수 있도록 도와주는 도구 (node.js의 앱스토어)

 

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

> npm install -g create-react-app    * -g : 전역(global) 위치에 설치

 

※ 권한이 없을 경우 (npm ERR! code EACCES)

> sudo npm uninstall -g create-react-app

> sudo npm install -g create-react-app

 

> create-react-app -V    * 버전 확인

 

npm 과 npx의 차이

# npm : 프로그램을 설치

# npx : 프로그램을 임시로 설치    * 한번만 실행시키고 지움

 - 컴퓨터의 공간을 차지하지 않는다.

 - 다운 받을 때 마다 최신 버전을 받는다

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

> cd 설치하려는 디렉토리 경로    * 폴더명은 대문자로 시작하면 안된다.

> create-react-app .

6. 샘플 웹앱 실행

> npm run start    * 실행

> (ctrl + c) 입력    * 종료

7. JS 코딩하는 법

디렉토리 구조

/public 

 - index.html 파일이 있는 곳

/src

 - 개발 작업하는 대부분의 파일이 있는 곳

 - index.js : 진입 파일 

 - App : 리액트를 통해 만든 사용자 정의 태그 (컴포넌트)    * 실제 구현은 App.js 파일에서

 

 

# function type

function App() {
  return (
    // 실제 태그 내용
    <div className="App">
    </div>
  )
}

# class type

class App extends Component {
  render() {
    return (
      <div className="App">
      </div>
    );    
  }
}

8. CSS 코딩하는 법

/* 
 import 컴포넌트이름 from './컴포넌트파일명';   
  - 컴포넌트이름은 대문자로 시작
  - 컴포넌트파일명은 .js 생략 가능 
*/
import Agal form './Agal';

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

9. 배포하는 법

> npm run build    * /build 디렉토리 생성

 

- 실제로 서비스할 때는 /build 디렉토리 안에 있는 파일은 사용한다.

- 웹서버의 document root(최상위 디렉토리)에 /build 디렉토리 안에 있는 파일을 위치시킨다.

 

> npm install -g serve   * serve : npm을 통해 설치할 수 있는 웹 서버

> serve -s build    * serve라는 웹서버를 다운 받아서 실행시킬 때 /build를 document root로 한다.

> npx serve -s build    * server를 한번만 실행   

 

 

반응형