[React] 설치와 개발환경 셋팅

1. 개발환경 셋팅

1-1. node JS 다운로드 및 설치

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

1-2. VS Code 다운로드 및 설치

VS Code Editor를 다운받아 설치한다. VS Code

2. React 프로젝트 생성

2-1. 작업용 폴더 생성

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

2-2. 리액트 프로젝트 생성

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

npx create-react-app blog

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

2-3. 에러발생 시

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

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

2-4. 리액트 프로젝트 확인

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

2-5. 프로젝트 오픈

프로젝트 폴더를 VS Code 에디터에서 오픈한다.

3. 프로젝트 미리보기

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

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

PS C:/만든폴더 경로/프로젝트경로 > 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 이라는 라이브러리의 도움을 받아 프로젝트를 생성하는것이 일반적이다.

create-react-app

이 라이브러리를 사용하기 위해서는 npm(라이브러리를 다 모아놓은 플랫폼)이라는 것이 필요하다.
npm은 nodeJS를 설치하면 자동으로 딸려 오기 때문에 node JS를 설치한 것.

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