Visual Studio Code(VSCode) 설치 및 GitHub Copilot, React 개발 환경 설정하기

Visual Studio Code(VSCode) 설치 및 GitHub Copilot, React 개발 환경 설정하기

Visual Studio Code(VSCode)는 많은 개발자들이 선호하는 코드 에디터입니다. 이 글에서는 VSCode를 설치하고, React 개발 환경을 설정하는 방법을 알아보겠습니다.

1. VSCode 설치하기

먼저, Visual Studio Code 공식 홈페이지에서 에디터를 다운로드하고 설치하세요.

• Windows 사용자: 'Download for Windows' 버튼을 클릭해 설치 파일을 받으시고, 실행하여 설치하세요.
• macOS 사용자: 'Download for Mac' 버튼을 클릭해 설치 파일을 받으시고, 설치하세요.
• Linux 사용자: 'Download for Linux' 버튼을 클릭해 설치 파일을 받으시고, 해당 패키지를 설치하세요.

2. 플러그인 설치하기

VSCode에서는 플러그인을 이용해 개발 환경을 확장할 수 있습니다. 다음 플러그인들을 설치해 보세요.

• Live Server: 웹 페이지를 자동으로 새로 고침하여 미리 볼 수 있는 플러그인입니다.
• Prettier: 코드를 자동으로 정리해주는 플러그인입니다.
• ESLint: 자바스크립트 코드 문제를 자동으로 찾아주는 플러그인입니다.
• Bracket Pair Colorizer: 괄호 색상을 다르게 표시해 가독성을 높여주는 플러그인입니다.

​
플러그인을 설치하려면, VSCode의 좌측 메뉴에서 네모 모양의 'Extensions' 아이콘을 클릭한 후, 검색 창에 원하는 플러그인 이름을 입력하고, 나열된 플러그인 중에서 원하는 플러그인을 찾아 'Install' 버튼을 클릭합니다.

3. Node.js와 npm 설치하기

React 개발을 위해 Node.js와 npm(Node Package Manager)를 설치해야 합니다. 설치 후, 터미널에서 node -v와 npm -v 명령어를 실행해 정상적으로 설치되었는지 확인하세요.
​
Node.js를 설치하려면 다음 단계를 따라주세요:
​

1. Node.js 공식 웹사이트의 다운로드 페이지로 이동합니다: https://nodejs.org/en/download/
2. 화면에 나타나는 Node.js의 최신 LTS 버전을 선택하고, 운영 체제에 맞는 설치 파일을 다운로드합니다.
3. 다운로드한 설치 파일을 실행하고, 지시사항에 따라 설치 과정을 완료합니다.

​
설치가 완료되면, 터미널 또는 명령 프롬프트를 열고 다음 명령어를 입력하여 Node.js와 npm이 올바르게 설치되었는지 확인합니다:

node -v
npm -v

4. Create React App 설치 및 프로젝트 생성

터미널에서 다음 명령어를 실행해 Create React App을 설치하세요.

npm install -g create-react-app

이제 React 프로젝트를 생성하려면, 원하는 디렉토리로 이동한 후 다음 명령어를 실행하세요.

create-react-app my-app

5. GitHub Copilot 또는 GitHub CopilotX 설치하기

GitHub Copilot 또는 CopilotX 플러그인을 설치하려면, VSCode의 'Extensions' 메뉴에서 'GitHub Copilot' 또는 'GitHub CopilotX'를 검색하고, 나열된 플러그인 중에서 원하는 플러그인을 찾아 'Install' 버튼을 클릭합니다.

6. 프로젝트 열기

이제 VSCode에서 생성한 React 프로젝트를 열어봅시다. VSCode 상단 메뉴에서 'File' > 'Open Folder'를 선택하고, 앞서 생성한 'my-app' 폴더를 선택하세요.

7. 프로젝트 실행하기

프로젝트를 실행하려면, VSCode 내장 터미널을 사용할 수 있습니다. 상단 메뉴에서 'Terminal' > 'New Terminal'을 선택하면 터미널 창이 열립니다. 터미널에서 다음 명령어를 입력하세요.

npm start

명령어를 실행하면, 웹 브라우저에서 자동으로 앱이 열립니다. 이제 React 앱 개발을 시작할 준비가 되었습니다!

8. 코드 수정하기

'App.js' 파일을 열어 기본 코드를 확인하고 수정해보세요. 코드를 수정한 후 저장하면, 웹 브라우저에서 변경 사항이 자동으로 반영됩니다.

9. GitHub Copilot 또는 GitHub CopilotX 사용하기

GitHub Copilot 또는 CopilotX를 사용하려면, 코드를 작성하다가 자동 완성을 원하는 부분에서 'Ctrl+Space'를 누르세요. 그러면 관련된 코드 조각이 나타나고, 원하는 코드 조각을 선택할 수 있습니다.
​
이제 Visual Studio Code를 설치하고, 필요한 플러그인과 환경을 설정한 후, React 프로젝트를 생성하고 실행하는 방법을 알게 되셨습니다. 기본적인 사용법을 익히고 나면, 이 외에도 많은 기능들을 탐색하며 효율적으로 개발할 수 있습니다. 좋은 개발 경험 되시길 바랍니다!

---

태그: #VisualStudioCode #VSCode #React #프론트엔드 #GitHubCopilot #GitHubCopilotX #NodeJS #npm #CreateReactApp