(React)리액트 설치 및 실행법 상세하게(window & Mac)

---

리액트 설치 및 실행법

---

* 리액트 실행하는 방법이 변경되었습니다.

* 현재 포스팅 보다는 업데이트 된 아래 포스팅 참고바랍니다. (링크 걸어놓았습니다 :))

2022.05.05 - [웹/(React)리액트] - (React) 리액트 설치 및 실행법 상세하게 이미지로 설명 [2022.05.05 기준]

(React) 리액트 설치 및 실행법 상세하게 이미지로 설명 [2022.05.05 기준]

 

---

포스팅 요약

1. 리액트 설치 방법

2. 리액트 실행 방법

---

리액트 설치 방법

1. node.js다운

---

아래 링크에서 node.js를 다운 받는다

https://nodejs.org/en/

Node.js

(LTS or Current 둘다 상관 없음)

 

2. 명령창 or 터미널 열은후 npm이 다운됐는지 확인

---

window라면 단축키: "window키+R" 을 누른 후, 나온 실행창에 cmd입력.

mac이라면 단축키: "cmd+spaceBar"을 누른 후 나온 검색창에 터미널 입력.

 

열린 명령창 혹은 터미널에 "npm -v"입력하여 잘 설치되었는지 확인.

npm -v

 

(v는 소문자 입니다.)

이렇게 버전 정보가 나오면 잘 설치된겁니다.

 

3. create-react-app 설치

---

열린 명령창에 아래 명령어를 입력한다.

npm install -g create-react-app

 

만약 위 명령어를 입력하고 에러가 뜬다면 아래 명령어를 입력한다.

sudo npm install create-react-app

비밀번호가 뜨면 비밀번호를 입력해준다.

 

4. create-react-app 설치 확인

---

아래 명령어를 입력하여 앱이 잘 설치되었는지 확인한다.

create-react-app -V

 

(v는 대문자입니다.)

위 사진처럼 버전 정보가 나오면 설치가 잘 된겁니다.

 

5. 폴더에 개발환경 만들기

---

개발환경으로 만들고 싶은 폴더에 들어갑니다.

명령창 or 터미널에 "cd 파일경로"를 입력합니다.

cd 파일경로

 

(파일 경로를 모르겠다면, 위 사진과 같이 cd를 입력후 한칸 띄고

원하는 파일을 명령창 혹은 터미널에 끌어넣으면 자동으로 파일 경로가 입력됩니다.)

 

여기에 "create-react-app ."을 입력합니다 (뒤에 점이 붙음)

create-react-app .

 

설치 완료 후, 폴더 안에 아래 파일들이 생긴다.

 

---

리액트 실행 방법

1. 개발환경이 구축된 파일을 VScode에서 열기

---

 

위에서 create-react-app을 한 파일을 코드편집기로 열은다.

 

2. vscode터미널 창 열은 후 실행

---

위 사진에서 빨간 네모 박스 안의 새 터미널창 열기를 클릭하여

vscode내에서 터미널을 엽니다.

 

터미널에서 "npm run start"입력

 

3. 완료

---

이런 페이지가 나오면 성공적으로 개발환경이 세팅 된겁니다!!!