React(1) - 설치

React App setup

리액트 프로젝트를 설치하는 것을 실습하였습니다.

설치 ~ 실행:

  1. VScode
  2. Node.js
  3. create-react-app
  4. npm start

Node.js는 브라우저 밖에서 JS를 실행할 수 있게 해주는 JS 구동 환경 입니다. npm을 이용해 설치하거나 Node.js org에서 설치 가능합니다.

node -v

설치된 node.js의 버전을 확인합니다.


create react app

React기반의 SPA를 만들 때 필요한 파일을 설치하는 명령

*SPA: 단일 페이지 애플리케이션

CRA를 설치하면 React코드의 수정과 동시에 웹 페이지의 모습이 바뀌어 개발하는 과정에서의 시간이 효율적으로 절약됩니다.

설치하고자 하는 폴더를 vscode에서 열고, terminal에서 입력

npx create-react-app .

이는 현재 폴더에 개발환경을 세팅하겠다는 뜻입니다.


run app

npm start

설치 완료 후 Terminal에서 입력하면 알아서 브라우저가 실행되며 코드와 연결된 웹 페이지가 열립니다.