React를 Visual Studio Code에서 실행해보자!

부산소프트웨어마이스터고에 재학 중인 저는 2025년인 현재, 3학년으로 재학 중에 있습니다.

학교에서 제공하는 선택 과목인 프론트엔드(React), 백엔드(Java) 중 저는 프론트엔드를 선택하여 수강 중에 있습니다.

임베디드소프트웨어과에 재학하며 React를 다룰 경험이 부족했던터라 수업 중에 계속 헷갈리는 요소들을 하나씩 정리하며 복습해보고자 글을 적게 되었습니다!

 

React는 저희 학교 내에서도 프론트엔드 개발에서 매우 인기 있는 JavaScript 기반 라이브러리이기때문에, 꼭 한 번쯤은 익혀두는 걸 추천드립니다.

그럼 오늘은 가장 기초인 Windows 환경에 React를 설치하고,

Visual Studio Code에서 실행하는 방법까지 정리해보도록 하겠습니다 ㅎㅎ

---

 

Windows 환경에 React 설치하기

1. Windows Powershell에 node.js 홈페이지 실행

start https://nodejs.org

 

2. node.js 사이트에서 LTS 버전 다운로드

 

설치를 진행하면서 실행되는 모든 창의 기본 설정을 그대로 따라주시면 됩니다!

4. 설치 후, Windows Powershell 또는 cmd를 열고 아래 명령어로 설치 완료 확인

node -v

npm -v

 

정상적으로 설치 되었다면 위와 같은 사진처럼 버전이 출력되어야 합니다!

 

 

Visual Studio Code에서 React 파일 실행하기

1. Open Folder

• Open Folder를 통해 원하는 위치의 폴더를 열어줍니다.

2. Ctrl + ` (Terminal) 에 명령어 작성

npm create vite@latest 프로젝트명

• 위 명령어를 실행하면 위와 같은 내용이 출력됩니다.
• 리스트의 framework 중 저희는 React를 사용할 것이기때문에 키보드 방향키를 통해 선택을 한 후 확인합니다.

• 이 후, 마찬가지로 방향키를 통해 variant를 JavaScript를 선택해주면 됩니다.

• 위와 같은 명령어가 출력되었다면 위 명령어에서 만든 프로젝트에 리액트 프레임이 정상적으로 불러와진 것입니다!

 

3. 생성한 리액트 프로젝트 열기

cd 프로젝트명

• 위 명령어에서 생성한 프로젝트를 cd 명령어를 통해 들어갑니다.

• 이 후, 파일 목록을 확인하면 React 프레임 워크가 정상적으로 오픈된 것을 확인할 수 있습니다.

 

4.  리액트 프로젝트 실행하기

npm install

• "npm install" 은 Node.js 프로젝트에서 필요한 패키지 모듈을 설치할 때 사용하는 명령어입니다.
• 사진과 같은 명령어가 출력되었다면 생성한 프로젝트에 패키지 모듈이 정상적으로 로드된 것입니다!

npm run dev

• "npm run dev" 는 Vite, Next.js, Nuxt 등에서 개발 서버를 실행하는 명령어입니다.
• 사진에서 나타나는 Local 주소를 Ctrl를 누른 상태로 클릭하면 React 기본 서버가 실행됩니다.

 

5. React 서버 실행 확인

• 아무것도 수정하지 않고 서버를 수정하면 이러한 페이지가 나타납니다!

---

 

오늘 알아볼 내용은 여기까지입니다!

수업 시간에 계속해서 프로젝트를 만들며 React 파일을 생성하는 게 익숙지 않아 헷갈리길래 정리해보았습니다.

 

그럼 오늘도 읽어주셔서 감사합니다 ㅎㅎ