[React] 리액트 설치 및 기본 세팅하기!

💡 목표

리액트 설치 및 기본적인 세팅 방법을 학습한다.

1. nodejs 설치

node.js 설치 링크입니다.

https://heytech.tistory.com/199?category=521346 

Node.js 설치 방법 공유!(+설치 에러 해결 방법)

2. IDE 설치(VS Code)

VS Code 설치 링크입니다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

3. React CLI 설치

npm install -g create-react-app

 

터미널(cmd)에서 React CLI를 설치합니다.

(Optional) 에러 발생 시

C:\Users\OWNER>npm install -g create-react-app

[..................] / idealTree:npm: sill idealTree buildDeps

 

터미널에서 아래와 같은 에러를 마주한다면 해결책이 있습니다.

(Optional) 해결 방법

npm config set strict-ssl false

 

터미널에 위 명령어를 입력하여 인증서 검사 절차를 생략해 줍시다.

(Optional) 해결 결과

이제 설치가 잘 되는 것을 확인하실 수 있습니다.

정상적인 설치 모습

4.  설치 확인

create-react-app --version

 

터미널을 통해 설치가 정상적으로 진행되었는지 확인해 봅니다.

버전 정보가 나오면 정상 설치된 것입니다.

5.  보안정책 세팅

보안정책 세팅을 위해 powershell을 관리자로 실행합니다.

powershell은 윈도우 키를 누르시고 powershell을 검색하면 찾을 수 있어요.

보안정책 확인

Get-ExecutionPolicy

 

powershell에 위 명령어를 입력하여 보안정책을 확인합니다.

아래와 같이 Resticted가 출력되신 분은 이걸 해지해야 합니다.

현재 보안정책

보안정책 변경

Set-ExecutionPolicy RemoteSigned

 

보안정책을 RemoteSigned로 변경합니다. 명령어 입력 후 나오는 메시지에는 y로 답합니다.

 

보안정책 재확인

Get-ExecutionPolicy

 

보안정책을 재확인합니다.

RemoteSigned가 출력되었다면 보안정책 세팅이 완료된 것입니다.

보안정책 재확인: RemoteSigned

6.  리액트 프로젝트 생성

6.1.  VS Code 실행

이제 VS Code를 켜주시고 VS Code 내 터미널 창을 열어줍니다.

VS Code 내 터미널 창

6.2.  프로젝트 생성

VS Code 터미널 창에 아래 명령어를 입력합니다.

create-react-app 프로젝트명

아래와 같이 프로젝트 생성이 시작됩니다.

리액트 프로젝트 생성 중인 모습

6.2.  프로젝트 접근

프로젝트 폴더를 열어줍니다.

상단 메뉴바에서 File - Open Folder를 눌러 생성한 리액트 프로젝트 폴더를 오픈합니다.

프로젝트 열기

6.3.  프로젝트 컴파일

다시 VS Code 터미널에서 생성한 리액트 프로젝트 폴더에 접근하고 프로젝트를 컴파일합니다.

cd 프로젝트명
npm start

프로젝트 실행

6.4.  프로젝트 실행 확인

프로젝트가 컴파일되기 시작하면 터미널에 아래와 같은 문장이 출력됩니다.

프로젝트 정상 컴파일

컴파일이 완료되면 웹 브라우저에 아래와 같은 그림이 출력될 것입니다.

여기까지 수행하셨다면 리액트 설치와 가장 기본적인 세팅은 완료한 셈입니다.

---

프로젝트 내용에 오류가 있다면 아래에 댓글 남겨주시면 감사드리겠습니다.

그럼 오늘도 즐겁고 건강한 하루 보내시길 바랍니다 :)

고맙습니다.