리액트 강좌: 비주얼 스튜디오 코드 활용하기

리액트는 현대 웹 개발에서 가장 인기 있는 라이브러리 중 하나로, 사용자 인터페이스(UI)를 효율적으로 구축할 수 있도록 돕습니다. 본 강좌에서는 비주얼 스튜디오 코드(Visual Studio Code, 이하 VS Code)를 사용하여 리액트 프로젝트를 설정하고 개발하는 방법에 대해 알아보겠습니다.

1. 비주얼 스튜디오 코드 소개

VS Code는 마이크로소프트가 개발한 소스 코드 편집기로 다양한 프로그래밍 언어를 지원합니다. 가벼우면서도 강력한 기능을 제공하기 때문에 많은 개발자들에게 사랑받고 있습니다. VS Code의 주요 기능으로는 다음과 같습니다:

  • 확장성과 커스터마이징
  • 내장형 터미널
  • 버전 관리(Git) 통합
  • 디버깅 지원
  • 다양한 테마와 아이콘 패키지

2. 환경 구축

2.1 VS Code 설치하기

먼저, VS Code를 설치해야 합니다. 여기를 방문해 운영 체제에 맞는 버전을 다운로드하고 설치합니다. 설치 과정은 간단한 클릭 과정으로 이루어져 있습니다.

2.2 Node.js와 npm 설치하기

리액트를 사용하기 위해서는 Node.js와 npm(Node Package Manager)이 필요합니다. Node.js는 자바스크립트 런타임 환경이며, npm은 자바스크립트 패키지를 관리하는 도구입니다. 아래 링크에서 설치 프로그램을 다운로드하고 설치합니다:

설치가 완료되면, 터미널에서 다음 명령어를 입력하여 설치가 정상적으로 이루어졌는지 확인할 수 있습니다:

node -v
npm -v

2.3 Create React App으로 리액트 프로젝트 만들기

VS Code와 Node.js, npm을 설치한 후, 새로운 리액트 애플리케이션을 생성할 수 있습니다. Create React App을 사용하면 모든 설정이 자동으로 구성된 기본 리액트 프로젝트를 생성할 수 있습니다. 다음 명령어를 실행하여 프로젝트를 생성합니다:

npx create-react-app my-app

위에서 my-app는 생성할 프로젝트의 이름입니다. 원하는 이름으로 변경할 수 있습니다. 명령어가 완료되면, 해당 디렉토리로 이동합니다:

cd my-app

3. VS Code에서 프로젝트 열기

VS Code를 실행한 후, 상단 메뉴에서 파일 > 폴더 열기를 선택하고, 생성한 my-app 폴더를 선택합니다. 이제 프로젝트 구조를 확인할 수 있습니다.

4. 프로젝트 구조 이해하기

Create React App을 사용하여 생성된 기본 프로젝트 구조는 다음과 같습니다:

  • node_modules/: 프로젝트에서 사용하는 모든 패키지가 저장됩니다.
  • public/: 정적 파일이 포함되어 있으며, HTML 템플릿이 위치합니다.
  • src/: 애플리케이션의 코드가 위치하며, 주로 자바스크립트 및 CSS 파일이 들어 있습니다.
  • package.json: 프로젝트에 대한 정보를 포함하고, 의존성 및 스크립트를 관리합니다.
  • README.md: 프로젝트에 대한 설명서 파일입니다.

5. 개발 환경 설정

5.1 Code Formatting과 Linting

코드 스타일을 일관되게 유지하고, 코드의 품질을 향상시키기 위해 ESLint와 Prettier를 설정합니다. 터미널에서 다음 명령어로 두 패키지를 설치합니다:

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

이후, 프로젝트의 루트 디렉토리에 .eslintrc.js와 .prettierrc 파일을 생성하여 설정을 추가합니다. .eslintrc.js 파일의 내용은 다음과 같습니다:

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

그리고 .prettierrc 파일에는 다음과 같은 설정을 추가할 수 있습니다:

{
    "semi": true,
    "singleQuote": true
}

5.2 VS Code 확장 프로그램 설치

VS Code의 확장 프로그램은 편리한 개발 도구로, 리액트 개발에 유용한 몇 가지 확장을 설치합니다. 추천하는 확장 프로그램은 다음과 같습니다:

  • ESLint
  • Prettier – Code formatter
  • Simple React Snippet
  • Reactjs code snippets

확장 기능은 좌측 사이드바의 Extensions 아이콘을 클릭한 후, 검색창에 각각의 이름을 입력하여 설치할 수 있습니다.

6. 리액트 기본 개념

리액트를 이해하기 위해서는 몇 가지 기본 개념을 알아야 합니다:

  • 컴포넌트(Component): 리액트 애플리케이션의 기본 구성 요소입니다. 컴포넌트는 JavaScript 함수로 정의되며, 코드 재사용을 돕습니다.
  • JSX: JavaScript XML의 약자로, HTML과 유사한 문법을 사용해 UI를 표현합니다.
  • 상태(State): 컴포넌트의 데이터 상태를 나타내며, 데이터가 변경될 때 리렌더링이 발생합니다.
  • 속성(Props): 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다.

7. 리액트 컴포넌트 만들기

이제 리액트 컴포넌트를 생성해보겠습니다. src/ 폴더에 MyComponent.js라는 파일을 생성하고, 다음 코드를 입력합니다:

import React from 'react';

const MyComponent = () => {
    return (
        

            
안녕하세요, 리액트!

            
이것은 나의 첫 번째 리액트 컴포넌트입니다.

        

    );
};

export default MyComponent;

이제 src/App.js 파일에서 이 컴포넌트를 사용해보겠습니다. 코드를 다음과 같이 업데이트합니다:

import React from 'react';
import MyComponent from './MyComponent';

function App() {
    return (
        

            
        

    );
}

export default App;

8. 리액트 라우팅 설정하기

리액트 애플리케이션에서 페이지 간 이동을 구현하기 위해 react-router-dom 라이브러리를 사용합니다. 다음 명령어로 이 패키지를 설치합니다:

npm install react-router-dom

이제, 라우팅을 설정할 수 있습니다. src/App.js 파일을 다음과 같이 수정합니다:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import MyComponent from './MyComponent';

function App() {
    return (
        
            
                
                
            
        
    );
}

export default App;

위 코드에서 AboutComponent는 새롭게 추가할 컴포넌트입니다. 같은 방식으로 새로운 컴포넌트를 생성하여 라우팅할 수 있습니다.

9. API와의 통신

리액트 애플리케이션에서 외부 API와 통신하기 위해 axios와 같은 라이브러리를 사용할 수 있습니다. 다음 명령어로 axios를 설치합니다:

npm install axios

axios를 사용하여 데이터를 가져오는 간단한 예제를 소개하겠습니다. 아래와 같이 src/MyComponent.js를 수정합니다:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios('https://api.example.com/data');
            setData(result.data);
        };

        fetchData();
    }, []);

    return (
        

            
데이터 가져오기 예제

            
    
                {data.map(item => (
                    
  • {item.title}
    • 
                ))}
            

        

    );
};

export default MyComponent;

10. 애플리케이션 빌드 및 배포

개발이 완료되면 애플리케이션을 빌드하여 배포할 준비를 해야 합니다. 빌드는 다음 명령어로 수행할 수 있습니다:

npm run build

위 명령어를 실행하면 build/ 폴더가 생성되고, 최적화된 정적 파일이 해당 폴더에 생성됩니다. 이 파일들을 선택한 호스팅 서비스에 업로드하여 배포할 수 있습니다.

11. 결론

이 강좌에서는 비주얼 스튜디오 코드와 리액트를 사용하여 웹 애플리케이션을 개발하는 방법에 대해 알아보았습니다. 리액트를 활용하여 동적인 사용자 인터페이스를 구축할 수 있으며, VS Code의 다양한 기능을 통해 효율적인 개발 환경을 구축할 수 있습니다. 앞으로 더 깊이 있는 리액트와 프론트엔드 개발 기술을 학습하시길 바랍니다!