[React] node.js 사용하여 리액트 설치 및 프로젝트 환경설정 + SPA 설명

 

- 리액트는 SPA를 구현할 때 사용하는 자바스크립트 라이브러리이다.

* SPA : Single Page Application 의 약자로, 하나의 html 파일에서 모든 컨텐츠를 동적으로 로드하는 애플리케이션

 

JavaScript로도 SPA 구현할 수 있지만 코드가 복잡하고 길어지니까 리액트를 쓰면 좋다.

 

 

SPA에 대한 설명은 아래 게시글 참고

https://dev-traveler.tistory.com/34

SPA란? Single Page Application

 

 

리액트의 장점

1. SPA 구현에 특화되어 있음

2. 코드 재사용 편리 (SPA의 장점 - 컴포넌트 만들어서 가져다 쓰는 방식)

3. 리액트를 알면 리액트와 거의 동일한 문법으로 react native 이용하여 앱개발도 가능함

 

 

 

 

node.js를 이용하여 리액트 설치 및 환경설정 하기

1. node.js 설치 (2025.01.20 기준 v22.13.0 LTS 최신버전 설치)

: 기존에 설치된 버전은 v.13.9.0 이었는데, 지우고 재설치 했다.

cmd 혹은 터미널에 node -v 라고 쳐서 버전 정보 잘 나오는지 확인해보자.

node(스페이스)-v로 써야 한다!  (안되면 환경변수 등록 후 다시 고고)

 

2. Visual Studio Code (vsCode) 설치

 

3. 작업폴더 만들기 

: C 드라이브 밑에 MyDevRepository > ReactStudy 라는 두개의 폴더를 생성했다.

* 폴더명은 영어로 작성한다. 처음에 한글로 작성했더니 npm error code 3221225477 오류 발생해서 영어로 수정함.

 

4. vsCode 열고 상단 [File] > Open Foler > 아까만든 폴더 경로 (ReactStudy) 선택 

: 좌측 explorer에 ReactStudy 폴더가 표출되면 잘 된 것

 

5. vsCode 아래쪽 드래그해서 Terminal 보이게 하기

혹은 [Terminal] > New Terminal 클릭하여 보이게 하기

: 터미널 창에 아까 연 폴더의 경로( C:\MyDevRepository\ReactStudy)가 세팅되어 있다면 잘 된 것

 

6. 

C:\MyDevRepository\ReactStudy 경로 옆에 npm create vite@latest 작성

Ok to proceed? (y) 에 y 작성

Project name 에 blog 작성 (본인 프로젝트 관련한 이름으로 지으면 됩니다.)

Select a framework 에 여러가지가 뜨는데 React 선택

Select a variant 에 JavaScript 선택

 

Done. Now run :
cd blog
npm install
npm run dev

 

라는 문구가 나오면

cd blog 작성 후 엔터

npm install 작성 후 엔터 

하면 설치가 완료되고,

나의 ReactStudy 경로 아래에 blog 폴더가 생성되고, 리액트 파일도 정상적으로 설치된다.

 

위에 서술한 과정은 아래 이미지를 참고한다.

좌측 REACTSTUDY 하위에 blog가 생긴걸 확인할 수 있음

 

 

7.

터미널에서 C:\MyDevRepository\ReactStudy\blog 경로에서

npm run dev 작성 후 엔터 하면

내 로컬에서 해당 프로젝트를 돌려볼 수 있음 (톰캣 서버와 같이)

접속경로는 localhost:5173 

 

* 이때 주의할 점은 경로를 blog 까지 들어와서 npm run dev 해야 한다. 

PS C:\MyDevRepository\ReactStudy> cd blog
PS C:\MyDevRepository\ReactStudy\blog> npm run dev
--> 이런식으로 ReactStudy 폴더까지만 세팅되어 있으면 cd blog 하여 blog까지 와주고, npm run dev 한다.

 

 

 

 

 

* 추가 설명

1. 자바스크립트는 원래 브라우저에서만 실행 가능하다.

node.js는 자바스크립트를 내 컴퓨터 아무데서 실행할 수 있게 도와주는 실행 엔진이다.

node.js.를 설치하면 npm도 함께 설치된다.

npm은 라이브러리의 설치, 삭제를 도와주는 프로그램임

 

 

2. 리액트 프로젝트를 만들 때

npm create vite@lates 를 작성했었다.

vite라는 라이브러리는 리액트, 뷰, 스벨트 등의 프로젝트 생성을 도와줌. 

 

vite 은 빌드/번들링 툴 이라고 불리는 것임
- 소스코드 사이즈 압축 가능
- 리액트나 뷰 문법을 자바스크립트로 컴파일 가능
- 빠른 미리보기 가능한 역할 

 

 

3. 위의 6번 과정에서

npx create-react-app blog 라고 작성하여 프로젝트 생성하려 했으나

npm error code ERESOLVE 오류 발생하면서 실패했다.

리액트가 버전업이 되면서 create-react-app 가 안된다고 하여

npm create vite@latest 로 생성했다.

 

설치과정은 코딩애플님 영상을 참고했다.

https://codingapple.com/unit/react1-install-create-react-app-npx/?id=2305

 

오류 스샷은 아래 참고

 

 

 

4. 프로젝트 생성 과정에서 node.js에 대한 스크립트 권한이 제한되어 있다는 에러문구가 떴다.

해결방법은 아래 링크를 참고했다.

https://hellcoding.tistory.com/entry/VSCode-%EC%98%A4%EB%A5%98-%EC%9D%B4-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%A0-%EC%88%98-%EC%97%86%EC%9C%BC%EB%AF%80%EB%A1%9C

 

 

5. vsCode의 터미널 창에서 6번 과정을 진행했었는데, 

ReactStudy 폴더에서 마우스 우클릭 > powershell 창을 열어서

npm create vite@latest 작성하여 동일하게 진행할 수 있다.

 

 

powerShell 을 이용하여 basicPractice 라는 폴더를 생성해보았다.

vsCode 의 터미널과 다른 부분은 Package name 을 선택하는 부분이 추가되어 있다는 점... 빼곤 다 똑같음