프론트엔드/react.js

[React.js] 리액트 프로젝트 생성

개발자딥게 2022. 11. 14. 12:56
반응형

 


Create React App

 

Create React App

리액트 프로젝트를 손쉽게 생성할 수 있게 도와주는 보일러플레이트

다양한 커맨드 제공하고 있음

 

CRA 장점

1. 개발에만 집중할 수 있게 함.

- 불필요한 코드 비공개

- 강력한 커맨드 제공

2. 모든 브라우저에서 해석되도록 transcompile 지원

- transcompile 라이브러리인 바벨 Babel 내장

- 배포시 코드 번들링(압축)인 웹팩 Webpack 제공

 

CRA 단점

Create React App은 기본적으로 Client-side Rendering만 지원

 

 

 


Node.js / NPM

Node.js

nodejs.org 사이트 접속 후, node lts 최신버전 다운로드

exe파일로 설치 후, cmd 창에서 "node -v" 입력하면 버전정보 확인 가능. -> 설치 잘 됐다는 확인용

 

NPM

node package manager 

node.js 기반의 모듈을 모아놓은 저장소

설치는 node.js 설치할 때 자동으로 설치된다.

 

많이 사용하는 명령어

npm install			// package.json에 정의된 의존성패키지들을 설치
npm install packageName 	// 특정 패키지를 설치
npm start			// node.js 이용한 프로젝트 실행
npm build			// 프로젝트 빌드

ctrl+c				// npm start 한 다음 종료하기

 


리액트 프로젝트 생성

 

 

npx

npm 패키지를 1회성으로 내려받아 사용하고자 할때 쓰는 명령어

npx create-react-app myProject	// 패키지 내려받기
cd myProject			// 디렉토리 이동 
npm start			// 현재 디렉토리의 프로젝트를 실행

 

 

 

반응형