[React] 리액트 개발환경 세팅

📝 공식문서에 나온 Create React App 을 사용하여 세팅합니다. ( 리액트 공식문서 링크 )

 

1️⃣ node.js 설치

Current(최신버전)으로 설치

* npm 사용시 LTS(안정버전) 사용해도 상관없음

 

2️⃣ Create React App 설치

Create React App 링크

🔨 툴체인 (Tool Chain) 이란?
리액트로 앱을 개발할 때 필요한 여러 개발 환경을 모아서 한번에 제공해주는 편리한 도구.
툴체인의 종류 중 하나인 Create React App을 사용하여 개발을 진행할 예정.

Github 공식문서 링크

🔨 npm과 npx의 차이점

npm
- node.js 로 만들어진 응용 프로그램을 쉽게 설치하는 명령어
- 프로그램을 컴퓨터에 설치한다.
- npm i -g create-react-app 을 사용하여 설치시 특정 폴더에 react 모듈이 저장되어 사용되기 때문에 최신버전을 사용하기 위해선 update 를 해줘야하는 번거로움이 있음. 이를 해결하기위해 npx를 사용한다.

npx
- 프로그램을 임시로 설치하여 한 번만 실행 후 삭제 -> 컴퓨터의 공간을 낭비하지 않음
- 실행할 때마다 다운로드 하기 때문에 항상 최신상태를 유지한다.

 

3️⃣ 프로젝트 생성

작업폴더에서 npx create-react-app 으로 리액트 프로젝트 생성하기

npx create-react-app my-app

 

4️⃣ 프로젝트 브라우저 화면에서 보기

생성한 프로젝트 폴더로 이동해서 터미널 창에 명령어 입력

⚡ 패키지 잠금파일 (package-lock.json, yarn.lock)에 관한 블로그글  링크

cd my-app
npm start

 

 

---

🔍 생성된 파일 설명

App.js : 메인페이지에 들어갈 HTML 짜는 곳

📁 public : static 파일 보관함

📁 src : 소스코드 보관함

index.html : 실질 메인페이지

index.js : App.js 를 index.html에 넣는 역할