vscode로 react 환경 구축 및 프로젝트 시작하기

1. 기본 준비
2. Visual Studio Code 다운로드
3. Visual Studio Code 환경 설정
4. Visual Studio Code 프로젝트 만들기

 

---

 

기본 준비

Visual Studio Code로 React 프로젝트를 시작하기 전에 기본적으로 Node.js가 설치 되어 있어야 합니다. 이전 글에서 Node.js 다운로드 및 설치하는 방법에 대해 이미 작성해 두었기 때문에 해당 글을 참고 하시길 바랍니다.

Node.js 다운로드 및 설치하는 방법

 

---

 

Visual Studio Code 다운로드

Visual Studio Code 설치를 위해 설치 파일을 다운로드 해야 합니다. Visual Studio Code 홈페이지에 접속하여 다운로드를 진행해 주세요.

https://code.visualstudio.com/에 접속합니다.

Visual Studio Code - Code Editing. Redefined

 

vscode 설치 파일 다운로드

 

홈페이지에서 개발 환경에 맞는 설치 파일을 다운로드 하시면 됩니다.

 

vscode 설치 파일

 

다운로드 받은 설치 파일을 실행하시고 설치를 진행하시면 됩니다.

설치하는 방법은 크게 어려운 부분이 없으니 생략하도록 하겠습니다.

특별한 설정 없이 기본값으로 설치하시면 됩니다.

 

---

 

Visual Studio Code 환경 설정

설치된 VS Code를 실행해서 React 개발에 유용한 "React Extension Pack" 확장 프로그램을 설치해야 합니다. 필수는 아니지만 편리한 기능이 많으니 설치하면 좋습니다.

 

💡 React Extension Pack이란?

React 개발에 필요한 필수 확장 프로그램을 한 번에 설치할 수 있습니다. React 개발할 때 코드 자동 완성과 빠른 개발 가능 하도록 도와주고, 코드 스타일 검사 및 오류 수정을 편리하게 하는 기능을 합니다.

 

vscode React Extension Pack 설치

 

VS Code에서 Extensions (Ctrl + Shift + X)를 열어 주세요. 위의 이미지에서 빨간 동그라미 부분을 선택하셔도 됩니다.

"React Extension Pack"을 검색하고, "install" 버튼을 눌러서 설치하면 됩니다.

 

---

 

Visual Studio Code 프로젝트 만들기

vscode 프로젝트 생성하기

 

프로젝트를 만들기 위한 폴더를 만들어야 합니다.

좌측 첫번째 아이콘을 선택해 주세요.

단축키 (Ctrl + Shift + E)

 

vscode 프로젝트 폴더 만들기

 

프로젝트를 저장하고 싶은 폴더를 새로 만들고 해당 폴더를 선택합니다.

 

vscode 터미널 사용하기

 

VS Code 터미널을 열어주세요.

상단 메뉴 [Terminal] - [New Terminal]

단축키 (Ctrl + Shift + `)

 

react 프로젝트 만들기

 

npx create-react-app [프로젝트명]

해당 코드를 입력하면 React 프로젝트를 생성할 수 있습니다.

예시) npx create-react-app test_project

 

react 프로젝트 생성 오류

 

npx : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npx.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.

React 프로젝트 생성 시 위의 에러 메시지가 발생할 수도 있습니다.

React 프로젝트 생성 오류 해결 방법

 

에러가 발생하면 PowerShell 실행 권한 문제로 인해 발생하는 오류이기 때문에 실행 정책을 변경해 주면 됩니다.

아래 코드를 입력해 주세요.

Set-ExecutionPolicy Unrestricted -Scope CurrentUser

 

React 프로젝트 생성하기

 

React 프로젝트를 생성할 수 있도록 다시 프로젝트 생성 코드를 입력해 주세요.

"진행하겠습니까?" 질문이 나오면 "y"를 입력해 주고 [Enter]키를 눌러주세요.

 

리액트 프로젝트 생성 완료

 

프로젝트 생성이 완료될 때까지 충분히 기다려 주세요.

커서가 다시 활성화 될때까지 기다려야 완료된 상태입니다.

 

React 프로젝트 실행하기

 

생성된 리액트 프로젝트 경로로 이동해야 합니다.

그 이후에 "npm start"로 프로젝트를 실행합니다.

 

 

프로젝트가 실행될 수 있도록 충분히 기다려 주세요.

브라우저에 해당 화면이 나타난다면 정상적으로 프로젝트가 생성되었다는 뜻입니다.

기본 URL: http://localhost:3000/

 

---

 

• [JavaScript] 접속한 모바일, PC 브라우저 정보 확인하기
• [JavaScript] 쿠키(COOKIE) 사용법 (저장, 삭제, 가져오기)
• Node.js 설치할 때 NVM, FNM, Docker 설치 방법 정리