React 설치와 개발환경 셋팅

1. 개발환경 셋팅

1-1. node JS (LTS 버전)을 다운받아 설치한다.

https://nodejs.org/ko/

 

1-2. VS code Editor를 다운받아 설치한다.

https://code.visualstudio.com/

 

---

2. React 프로젝트 생성

2-1. 작업용 폴더 생성 후 우클릭 하여 PowerShell창 열기 (해당 경로가 설정 된 터미널이 뜹니다.)

2-2. 작업용 폴더가 경로로 설정 된 터미널에서 리액트 프로젝트를 생성한다. (엔터)

 

PS C:/만든폴더 경로/ npx create-react-app 프로젝트명

npx create-react-app blog

 

2-2. 에러가 뜰 경우 PowerShell을 관리자 권한으로 실행 해 시도해본다.

PS C:\\WIndows\\system32 > Set-ExecutionPolicy Unrestricted
선택 -> Y

 

2-3. 설치 성공 후 작업용 폴더에 들어가면 프로젝트명으로 생성된 폴더가 존재한다.

2-4. 프로젝트 폴더를 에디터에서 오픈한다.

 

---

3. 프로젝트 미리보기

해당 프로젝트 폴더 경로로 터미널을 연다.

 

PS C:/만든폴더 경로/프로젝트경로 > npm start

C:\해당폴더경로\blog > npm start

 

 

---

4. 프로젝트 폴더 살펴보기

• node_modules : 프로젝트 구동에 필요한 모든 라이브러리 소스 코드를 다 모아놓은 폴더.
• public : static 파일 모아놓는곳 (html, img 등)
• src : 코드 짜는 곳 (대표적으로 App.js)
• package.json : 프로젝트 정보(자동생성 됨) / 프로젝트명, 버전, 프로젝트 구동에 필요한 라이브러리 명

src 폴더 안 App.js 파일에 코드를 작성한다. (메인페이지)

App.js 에서 작성한 코드는 index.js를 통해 index.html 넣어준다.

 

---

5. 추가설명, 왜 이렇게 설치하나요?

리액트를 설치하기 위해서는

html파일에 수동으로 리액트 라이브러리를 설치해도 되지만 이렇게 하면 시간이 오래걸리기 때문에

Create React App 이라는 라이브러리의 도움을 받아 프로젝트를 생성하는것이 일반적이다.

https://create-react-app.dev/

 

이 라이브러리를 사용하기 위해서는 npm(라이브러리를 다 모아놓은 플랫폼)이라는 것이 필요하다.

npm은 nodeJS를 설치하면 자동으로 딸려 오기 때문에 node JS를 설치한 것.

 

npm이 제대로 설치되었으면 npx create-react-app 같은 명령어를 실행할 수 있다. (프로젝트 생성을 한번에 처리해 줌)