Visual Studio Code에서 React 사용하기

React는 Facebook에서 개발한 인기 있는 JavaScript 라이브러리로 사용자 인터페이스를 구축하는 데 사용됩니다. Visual Studio Code 편집기는 기본적으로 React.js IntelliSense 및 코드 탐색을 지원합니다.

React 소개

이 튜토리얼에서는 create-react-app 생성기를 사용합니다. 생성기를 사용하고 React 애플리케이션 서버를 실행하려면 Node.js JavaScript 런타임과 npm(Node.js 패키지 관리자)이 설치되어 있어야 합니다. npm은 Node.js에 포함되어 있으며, Node.js 다운로드에서 다운로드 및 설치할 수 있습니다.

팁: 컴퓨터에 Node.js와 npm이 올바르게 설치되었는지 확인하려면 터미널 또는 명령 프롬프트에서 node --version 및 npm --version을 입력하면 됩니다.

이제 다음을 입력하여 새 React 애플리케이션을 만들 수 있습니다.

npx create-react-app my-app

여기서 my-app은 애플리케이션 폴더의 이름입니다. React 애플리케이션을 생성하고 종속성을 설치하는 데 몇 분이 걸릴 수 있습니다.

참고: 이전에 npm install -g create-react-app을 통해 create-react-app을 전역으로 설치한 경우, npx가 항상 최신 버전을 사용하도록 npm uninstall -g create-react-app을 사용하여 해당 패키지를 제거하는 것이 좋습니다.

새 폴더로 이동하여 npm start를 입력하여 웹 서버를 시작하고 브라우저에서 애플리케이션을 열어 React 애플리케이션을 빠르게 실행해 봅시다.

cd my-app
npm start

브라우저에서 https://:3000에서 React 로고와 "Learn React" 링크를 볼 수 있습니다. VS Code에서 애플리케이션을 살펴보는 동안 웹 서버를 실행 상태로 유지하겠습니다.

VS Code에서 React 애플리케이션을 열려면 다른 터미널 또는 명령 프롬프트 창을 열고 my-app 폴더로 이동한 다음 code .를 입력합니다.

cd my-app
code .

Markdown 미리 보기

파일 탐색기에서 볼 수 있는 파일 중 하나는 애플리케이션 README.md Markdown 파일입니다. 이 파일에는 애플리케이션 및 React 전반에 대한 많은 유용한 정보가 있습니다. README를 검토하는 좋은 방법은 VS Code Markdown 미리 보기를 사용하는 것입니다. 현재 편집기 그룹에서 미리 보기(Markdown: Open Preview ⇧⌘V (Windows, Linux Ctrl+Shift+V))를 열거나 옆의 새 편집기 그룹에서 열 수 있습니다(Markdown: Open Preview to the Side ⌘K V (Windows, Linux Ctrl+K V)). 좋은 서식, 헤더로의 하이퍼링크 탐색 및 코드 블록의 구문 강조 표시가 제공됩니다.

구문 강조 및 괄호 일치

이제 src 폴더를 확장하고 index.js 파일을 선택합니다. VS Code는 다양한 소스 코드 요소에 대한 구문 강조 표시를 제공하며, 괄호 위에 커서를 놓으면 해당 짝 괄호도 선택되는 것을 알 수 있습니다.

IntelliSense

index.js에서 입력을 시작하면 스마트 제안 또는 자동 완성이 표시됩니다.

제안을 선택하고 .을 입력하면 IntelliSense를 통해 개체의 형식과 메서드를 볼 수 있습니다.

VS Code는 JavaScript 코드 지능을 위해 TypeScript 언어 서비스를 사용하며 자동 형식 가져오기(ATA)라는 기능을 제공합니다. ATA는 package.json에 참조된 npm 모드에 대한 npm 형식 선언 파일(*.d.ts)을 다운로드합니다.

메서드를 선택하면 매개변수 도움말도 받을 수 있습니다.

정의로 이동, 정의 미리보기

TypeScript 언어 서비스를 통해 VS Code는 편집기에서 정의로 이동(F12) 또는 정의 미리 보기(⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10))를 통해 형식 정의 정보를 제공할 수 있습니다. App 위에 커서를 놓고 마우스 오른쪽 버튼을 클릭한 다음 정의 미리 보기를 선택합니다. 미리 보기 창이 열리고 App.js의 App 정의가 표시됩니다.

미리보기 창을 닫으려면 Escape 키를 누릅니다.

Hello World

샘플 애플리케이션을 "Hello World!"로 업데이트해 보겠습니다. index.js 내에 "Hello, world!"라는 H1 헤더를 포함하는 HelloWorld라는 구성 요소를 만들고 root.render의 <App /> 태그를 <HelloWorld />로 바꿉니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

function HelloWorld() {
  return <h1 className="greeting">Hello, world!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <HelloWorld />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

index.js 파일을 저장하면 실행 중인 서버 인스턴스가 웹 페이지를 업데이트하고 브라우저를 새로 고치면 "Hello World!"가 표시됩니다.

팁: VS Code는 기본적으로 일정 시간 후에 파일을 저장하는 자동 저장 기능을 지원합니다. 파일 메뉴에서 **자동 저장** 옵션을 확인하여 자동 저장을 켜거나 files.autoSave 사용자 설정을 직접 구성하십시오.

React 디버깅

클라이언트 측 React 코드를 디버그하기 위해 내장 JavaScript 디버거를 사용합니다.

참고: 이 튜토리얼은 Edge 브라우저가 설치되어 있다고 가정합니다. Chrome을 사용하여 디버그하려면 시작 type을 chrome으로 바꾸십시오. Firefox 브라우저용 디버거도 있습니다.

중단점 설정

index.js에 중단점을 설정하려면 줄 번호 왼쪽의 여백을 클릭합니다. 그러면 빨간색 원으로 표시되는 중단점이 설정됩니다.

디버거 구성

먼저 디버거를 구성해야 합니다. 이렇게 하려면 실행 및 디버그 보기(⇧⌘D (Windows, Linux Ctrl+Shift+D))로 이동하여 launch.json 파일 만들기 링크를 선택하여 launch.json 디버거 구성 파일을 만듭니다. 디버거 선택 드롭다운 목록에서 웹 앱(Edge)을 선택합니다. 이렇게 하면 프로젝트에 새 .vscode 폴더에 launch.json 파일이 생성되며, 여기에는 웹 사이트를 시작하는 구성이 포함됩니다.

예제에 대해 한 가지 변경을 해야 합니다. url의 포트를 8080에서 3000으로 변경합니다. launch.json은 다음과 같아야 합니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "https://:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

개발 서버가 실행 중인지 확인합니다(npm start). 그런 다음 F5 또는 녹색 화살표를 눌러 디버거를 시작하고 새 브라우저 인스턴스를 엽니다. 중단점이 설정된 소스 코드는 디버거가 연결되기 전에 시작 시 실행되므로 페이지를 새로 고쳐야 중단점에 도달합니다. 페이지를 새로 고치면 중단점에 도달해야 합니다.

소스 코드를 단계별로 실행(F10)하고, HelloWorld와 같은 변수를 검사하고, 클라이언트 측 React 애플리케이션의 호출 스택을 볼 수 있습니다.

디버거 및 사용 가능한 옵션에 대한 자세한 내용은 브라우저 디버깅에 대한 설명서를 참조하십시오.

라이브 편집 및 디버깅

React 앱과 함께 webpack을 사용하는 경우 webpack의 HMR 메커니즘을 활용하여 VS Code에서 직접 실시간 편집 및 디버깅을 할 수 있으므로 더 효율적인 워크플로우를 가질 수 있습니다. 이 VS Code에서 React 앱을 직접 실시간 편집 및 디버그 블로그 게시물과 webpack Hot Module Replacement 설명서에서 자세히 알아볼 수 있습니다.

린팅

린터는 소스 코드를 분석하여 애플리케이션을 실행하기 전에 잠재적인 문제를 경고할 수 있습니다. VS Code에 포함된 JavaScript 언어 서비스는 기본적으로 구문 오류 검사를 지원하며, 이는 문제 패널(보기 > 문제 ⇧⌘M (Windows, Linux Ctrl+Shift+M))에서 작동하는 것을 볼 수 있습니다.

React 소스 코드에 작은 오류를 만들어 보면 빨간색 물결선과 문제 패널에 오류가 표시되는 것을 볼 수 있습니다.

린터는 더 정교한 분석을 제공하여 코딩 규칙을 강제하고 안티 패턴을 감지할 수 있습니다. 인기 있는 JavaScript 린터는 ESLint입니다. ESLint는 ESLint VS Code 확장 프로그램과 결합하면 훌륭한 제품 내 린팅 경험을 제공합니다.

먼저 ESLint 명령줄 도구를 설치합니다.

npm install -g eslint

그런 다음 확장 프로그램 보기로 이동하여 'eslint'를 입력하여 ESLint 확장을 설치합니다.

ESLint 확장이 설치되고 VS Code가 다시 시작되면 ESLint 구성 파일인 .eslintrc.js를 만들어야 합니다. 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 확장 프로그램의 ESLint: Create ESLint configuration 명령을 사용하여 만들 수 있습니다.

명령이 터미널 패널에서 일련의 질문에 답하라는 메시지를 표시합니다. 기본값을 사용하면 프로젝트 루트에 다음과 유사한 .eslintrc.js 파일이 생성됩니다.

module.exports = {
  env: {
    browser: true,
    es2020: true
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 11,
    sourceType: 'module'
  },
  plugins: ['react'],
  rules: {}
};

ESLint는 이제 열린 파일을 분석하고 index.js에서 'App'이 정의되었지만 사용되지 않았다는 경고를 표시합니다.

.eslintrc.js 파일에서 ESLint 규칙을 수정할 수 있습니다.

추가 세미콜론에 대한 오류 규칙을 추가해 보겠습니다.

 "rules": {
        "no-extra-semi":"error"
    }

이제 한 줄에 여러 세미콜론이 실수로 있는 경우 편집기에서 오류(빨간색 물결선)와 문제 패널의 오류 항목이 표시됩니다.

인기 있는 시작 키트

이 튜토리얼에서는 create-react-app 생성기를 사용하여 간단한 React 애플리케이션을 만들었습니다. 첫 React 애플리케이션을 구축하는 데 도움이 되는 훌륭한 샘플과 시작 키트가 많이 있습니다.

VS Code React 샘플

이것은 샘플 React 애플리케이션으로, 간단한 TODO 애플리케이션을 생성하고 Node.js Express 서버의 소스 코드를 포함합니다. 또한 Babel ES6 트랜스파일러를 사용하는 방법과 webpack을 사용하여 사이트 자산을 번들링하는 방법을 보여줍니다.

TypeScript React

TypeScript와 React에 대해 궁금하다면 TypeScript 템플릿을 사용하겠다고 지정하여 create-react-app 애플리케이션의 TypeScript 버전도 만들 수 있습니다.

npx create-react-app my-app --template typescript

자세한 내용은 TypeScript 추가, Create React App 사이트를 참조하십시오.

Angular

Angular는 또 다른 인기 있는 웹 프레임워크입니다. VS Code에서 Angular가 작동하는 예를 보려면 Angular CLI로 디버깅 레시피를 확인하십시오. Angular 애플리케이션을 만들고 JavaScript 디버거에 대한 launch.json 파일을 구성하는 과정을 안내합니다.

자주 묻는 질문

선언적 JSX 내에서 IntelliSense를 사용할 수 있나요?

예. 예를 들어 create-react-app 프로젝트의 App.js 파일을 열면 render() 메서드 내에서 React JSX 내의 IntelliSense를 볼 수 있습니다.