[React 개발환경2]VSCode for React!

VS Code를 이용한 React 개발환경 및 프로젝트 생성

React는 현대적인 웹 애플리케이션을 개발하는 데 널리 사용되는 라이브러리입니다. 이번 글에서는 VS Code를 이용하여 React 개발 환경을 설정하는 과정을 정리하겠습니다. React의 세부적인 내용은 다른 글을 통해 제공할 것이며 본격적인 React를 이용한 개발 방법을 언급하기 이전에 본 글에서는 VS Code를 기반으로 React를 개발하는 환경 세팅합니다.

---

1. VS Code 설치 및 기본 설정

VS Code 다운로드 및 설치는 "Windows에 VS Code를 번저 설해볼까!" 글을 통해서 확인하세요. 다음 링크를 클릭해 보세요.

 

[VSCode]Windows에 VS Code를 먼저 설치해볼까!

---

2. Node.js 및 npm 설치

React 프로젝트를 생성하기 위해 Node.js와 npm(Node Package Manager)이 필요합니다. 설치가 되어 있지 않다면 먼저 설치 한 후 다음 절차를 진행하세요.  Node.js 설치

[Node.js설치]React 환경설정1, 먼저 Node.js를 설치해볼까!

---

3. VS Code에 필수 확장 프로그램 설치

 

VS Code를 React 개발에 최적화하기 위해 다음 확장 프로그램을 설치하겠습니다. 

• ES7+ React/Redux/React-Native snippets: React 개발을 쉽게 할 수 있도록 자주 사용하는 코드 조각(Snippet)을 제공합니다. 예를 들어, rfce를 입력한 후 Tab 키를 누르면 기본 함수형 컴포넌트 코드가 자동으로 생성됩니다.

 

 

• Prettier - Code formatter: 코드 스타일을 일관되게 유지해 주는 코드 포맷터입니다. 설정에서 Format On Save 옵션을 활성화하면 파일 저장 시 자동으로 코드가 정리됩니다.

• ESLint: 코드의 문법 오류를 검출하고 베스트 프랙티스를 적용할 수 있도록 도와주는 코드 린팅 도구입니다. React 프로젝트에서는 eslint-config-react-app을 기본으로 사용하여 코드 품질을 유지할 수 있습니다. 

 

 확장 패키지는 개인의 필요에 따라서 설치할 수 있으며 설치 된 것은 언제든지 삭제할 수 있습니다. 기본 설정에 필요한 사항을 다음과 같이 3가지를 설치해 보았습니다. 

4. React 프로젝트 생성

이제 환경 준비가 되었으니 간단하게 React 프로젝트를 생성하겠습니다. React의 세부 사항에 대한 설명은 포함되지 않으므로 환경 테스트 정도로 이해하고 그대로 따라 진행 해 보시길 바랍니다. 

Create React App을 이용한 프로젝트 생성

• 터미널(명령 프롬프트, PowerShell)을 열고 원하는 폴더에서 다음 명령어를 실행합니다.  테스트 용이므로 임의의 프로젝트 명으로 "my-app" 을 사용하겠지만 원하는 프로젝트 이름으로 변경 가능합니다. 

npx create-react-app my-app

 

 프로젝트가 생성되면 build하거나 start 하는 방법을 소개하는 부분을 볼 수 있습니다. 

 

• 프로젝트 폴더로 이동하고 터미널에서 명령어로 확인하거나 윈도우 탐색기에서 확인하면 생성된 프로젝트 내용을 확인 할 수 있습니다. 

cd my-app

 

또는

 

• VS Code에서 해당 폴더를 엽니다. 터미널에서 프로젝트 폴더로 옮긴 상태라면 다음과 같이 code 명령어로 열 수 있습니다. 

C:\저장경로\my-app> code .

 

폴더가 열리면 신뢰성 확인 창이 열리며 "예 작성자를 신뢰합니다"를 선택하면 React 기본 프로젝트가 생성되어 있는 것을 확인할 수 있습니다. 디폴트로 작성된 내용으로 React 웹 페이지를 확인할 수 있으니 편집은 진행하지 않고 다음 절차를 바로 실행 하겠습니다. 

 

5. React 개발 서버 실행

프로젝트를 정상적으로 생성했으면 개발 서버를 실행하여 React 앱을 확인할 수 있습니다. 프로젝트 생성할 때 확인했던 실행 방법을 통해 프로젝트를 실행합니다. 

npm start

위 명령어를 실행하면 자동으로 웹 브라우저가 열리며 http://localhost:3000/에서 React 애플리케이션을 확인할 수 있습니다.

 

• 기본 페이지가 잘 작동하는 것을 확인했다면 VS Code를 이용하여 React를 개발할 환경 준비가 되었습니다. 

6. 마무리

이제 VS Code를 이용한 React 개발 환경 설정 과정을 정리하였으므로 앞으로 이 환경을 활용하여 다양한 React 애플리케이션을 개발할 수 있습니다. React 개발 내용에 따라 필요한 설정은 더 존재할 수 있습니다. 

 

React 프로그래밍 편에서 React에 대한 상세한 설명을 작성해 보겠습니다. 기대해 주세요.