React.js 환경 구축

목차

0.  Environment

1. Installation

2. Start a react project

3. References

 

 

0. Environment

- OS: Windows

- 그 외 특이사항 없음

 

1. Installation

(1) Nodejs 설치: v20.15.0 (LTS, 2024.06.24 기준)

아래 링크로 접속하여 LTS 버전의 Node.js를 설치한다. 별도로 클릭할 것 없이 동의하고 모두 Next 버튼을 눌러준다.

Installation 버튼까지 눌렀다면 설치가 진행되고 있는 상황이 Status bar로 나타날 것이다.

모두 설치가 끝난 후 Finish 버튼을 눌려주면 Node.js 설치는 완료되었다.

https://nodejs.org/en/

Node.js — Run JavaScript Everywhere

 

만약 설치가 잘 되었는지 확인하고 싶다면 파워쉘에서 'node -v'와 'npm -v'를 실행해보자.

버전 정보가 나온다면 잘 설치가 되었다고 할 수 있다.

$ node -v
$ npm -v

 

 

(2) Visual Studio Code 설치

나는 Visual studio code를 이미 설치해서 별도 설치 방법은 작성하지 않았다.

설치하지 않았다면 아래 링크로 들어가서 설치한다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

 

 

2. Start a react project

(1) 프로젝트 폴더 생성 및 Visual Code에서 열기

1단계에서 설치를 잘 완료하였다면 내가 프로젝트를 진행할 폴더를 만든 후, 해당 폴더로 진입한다.

그리고 아래 코드를 입력하여 리액트 프로젝트를 시작한다.

npx create-react-app (프로젝트 이름)

 

만약 실행되지 않고 에러가 발생한다면 create-react-app을 지웠다가 설치해보도록 하자.

제거 및 재설치 코드는 아래와 같다.

npm uninstall -g create-react-app
npm install -g create-react-app

 

프로젝트를 시작하면 내가 지정한 프로젝트 이름으로 폴더가 하나 생겼을 것이다.

생성된 react app

 

해당 폴더를 앞서 설치한 visual code로 열어준다.

 

 

(2) 로컬 서버 생성하기

create-react-app 명령어를 실행해주었던 윈도우 파워쉘에서 생성한 프로젝트 폴더 안으로 진입한 후, npm start를 눌러준다. 그러면 폴더 내 package.json이 작동하여 방금 생성한 리액트 프로젝트가 열리며, 이를 통해 웹 사이트 형태로 확인할 수 있다.

 

 

 

여기까지 환경 구축에 대한 내용이었다. 참고한 사이트는 아래 References에 첨부해 두었다.

React 웹 개발과 관련해서는 다음 포스팅에서 게시하도록 하겠다.

 

그럼 끝!

 

 

 

3. Reference

- 필요한 프로그램 설치 및 진행: https://codingapple.com/unit/react1-install-create-react-app-npx/

- 생성한 React app 로컬 서버 실행: https://create-react-app.dev/docs/getting-started/