React 인텔리제이에서 설치하기

 

 

 

node.js 란?

 

JS 자체 컴파일 기능 가진 플랫폼이다.

React는 node.js 기반으로 하기때문에 node.js를 먼저 설치해줘야한다

 

 

---

1. https://nodejs.org/ko/download

다운로드 | Node.js

 

18.18.2 버전 확인후 64bit 설치한다. 

 

+ 그냥 최신버전으로 설치한다

 

 

2. node.js 설치 됐는지 CMD가서 확인해야한다

 

 

node -v

명령어 입력하고 버전 확인한다.

---

리액트 설치할때 npm/npx 이 필요하다.

npm이 node.js에 호환된 관리자 패키지이다.

(EX 자바에서 gradle(그레이들)과 비슷...)

JS 패키지 관리자/매니저이다.

외부라이브러리 설치할때 사용되는 환경

 

 

3. CMD에 npm도 설치가 잘 됐는지 확인한다

 

npm -v

 

---

4. React 설치한다

 

리액트 설치하는 2가지 방법이 있다

 

1. CDN 방식
2. NPM 방식

수업중에는 npm으로 설치한다

 

https://ko.legacy.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

 

 

 

 

 

---

 

5. 현재 프로젝트내 리액트를 설치할 폴더 생성한다.

 

실무에서 프로젝트는 리액트 프로젝트 1개 , 스프링 프로젝트 1개 총 2개이다.

(수업내에서는 gradle 프로젝트 안에 spring설치 , react 설치 같이하여 1개로 통합할 예정이다.)

 

main에서 경로로 frontend 만든다

리액트 프로젝트명으로 쓸 예정이다.

실제 배포할대는 이런 방법을 쓰지 않으니 주의!!!!!

인텔리제이 내 폴더 우클릭하여 터미널을 켜준다.

 

---

리눅스(운영체제)/터미널 명령어 정리

리눅스 쓰는 이유 : 배포할때 리눅스로 한다.

왜? 윈도우는 불필요한 인터페이스가 많다.

 

 

ls	현재 파일이나 폴더명 확인
cd	폴더/디렉토리 이동
cd 이동할폴더명	폴더명으로 이동하기
cd ..	뒤로가기 / 전 경로로 이동
mkdir 만들폴더명	폴더 만들기
rmdir 삭제할폴더명	폴더 삭제하기

---

npm으로 리액트 설치한다.

npm i create-react-app reactapp
npm i create-react-app 프로젝트명/아무거나

 

 

만약 npm으로 설치가 안되면 인텔리제이를 껐다가 다시 켜서 설치한다.