React 환경 설정 및 프로젝트 시작하기, 개발 서버 실행과 기본 빌드

React는 현대 웹 애플리케이션 개발에 있어 가장 인기 있는 라이브러리 중 하나입니다. 이 강좌에서는 React 개발 환경을 설정하고, 프로젝트를 시작하는 방법, 개발 서버를 실행하는 방법, 기본 빌드 과정에 대해 자세히 설명합니다.

1. React란?

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, Facebook에 의해 개발되었습니다. 컴포넌트를 기반으로 하며, 상태 관리와 생명주기 관리가 용이하여 대규모 애플리케이션에서도 효율적으로 사용할 수 있습니다. React는 Virtual DOM을 사용하여 UI의 변화를 빠르고 효율적으로 처리합니다.

2. React 개발 환경 설정하기

React 애플리케이션을 개발하기 위해서는 Node.js와 npm(Node Package Manager)이 필요합니다. 이 도구들은 JavaScript 패키지를 관리하고, React 프로젝트를 설정하는 데 필수적입니다.

2.1 Node.js와 npm 설치

Node.js는 서버 사이드 JavaScript 환경으로, React 개발을 위한 기본 요구사항입니다. npm은 Node.js와 함께 설치되며, JavaScript 패키지를 관리하는 도구입니다. Node.js 공식 웹사이트(https://nodejs.org/)에서 설치 파일을 다운로드하고 설치할 수 있습니다.

설치 후, 아래의 명령어로 설치를 확인할 수 있습니다:

node -v
npm -v

2.2 Create React App으로 프로젝트 생성

Create React App은 React 애플리케이션을 시작하기 위한 공식 CLI 도구입니다. 이 도구를 사용하면 복잡한 설정 없이 빠르게 개발 환경을 구축할 수 있습니다.

아래의 명령어를 사용하여 Create React App을 설치하고 새로운 프로젝트를 생성합니다:

npx create-react-app my-app

위 명령어에서 my-app은 프로젝트 이름으로, 원하는 이름으로 변경할 수 있습니다.

2.3 프로젝트 디렉토리로 이동

프로젝트가 생성되면, 해당 디렉토리로 이동합니다:

cd my-app

3. 개발 서버 실행하기

Create React App으로 생성한 프로젝트는 기본적으로 개발 서버가 설정되어 있습니다. 개발 서버를 실행하면, 코드 변경 사항이 실시간으로 브라우저에 반영됩니다.

3.1 개발 서버 시작

아래 명령어를 입력하여 개발 서버를 시작할 수 있습니다:

npm start

브라우저에서 http://localhost:3000를 열면 기본 React 애플리케이션 화면을 확인할 수 있습니다. 이 화면은 src/App.js 파일에서 정의된 내용을 바탕으로 렌더링됩니다.

4. 기본 빌드 과정

개발이 완료되면 애플리케이션을 배포하기 위해 빌드해야 합니다. 빌드 과정은 최적화된 production용 파일들을 생성합니다. React에서는 기본적으로 npm run build 명령어를 통해 빌드를 수행합니다.

4.1 빌드 실행하기

아래 명령어로 빌드를 실행합니다:

npm run build

이 명령어를 실행하면 build 디렉토리가 생성되며, 이 폴더 안에는 최적화된 HTML, CSS, JavaScript 파일이 포함됩니다. 이 파일들은 정적 파일로, 실제 서버에 업로드하여 애플리케이션을 배포할 수 있습니다.

4.2 Output 설명

build 디렉토리에는 다음과 같은 파일들이 포함됩니다:

index.html: 최상위 HTML 파일로, React 애플리케이션이 이 파일을 통해 로드됩니다.
static/js: 최적화된 JavaScript 번들 파일들이 포함됩니다.
static/css: 최적화된 CSS 파일들이 포함됩니다.

이 파일들을 웹 서버에 업로드하면, 사용자들이 React 애플리케이션에 접근할 수 있게 됩니다.

5. 프로젝트 구조 및 파일 설명

Create React App으로 생성된 프로젝트는 기본적인 디렉토리 구조를 가지고 있습니다. 각 디렉토리와 파일의 역할을 살펴보겠습니다.

node_modules: 프로젝트에서 사용하는 모든 패키지가 저장됩니다.
public: 정적 파일들이 포함됩니다. 주로 index.html 파일이 위치하며, favicon과 같은 다른 리소스도 포함됩니다.
src: React 컴포넌트와 애플리케이션의 핵심 로직이 위치하는 디렉토리입니다. 여기에서 대부분의 코드를 작성합니다.
package.json: 프로젝트의 패키지 의존성과 스크립트, 메타데이터를 정의하는 파일입니다.
README.md: 프로젝트에 대한 설명서입니다.

6. 간단한 컴포넌트 만들기

React의 핵심은 컴포넌트입니다. 기본적인 컴포넌트를 만들어보겠습니다. 먼저 src 디렉토리 안에 MyComponent.js 파일을 생성합니다:

import React from 'react';

const MyComponent = () => {
    return ( 
        <div>
            <h1>안녕하세요, React!</h1>
        </div>
    );
};

export default MyComponent;

이제 이 컴포넌트를 App.js에서 불러와 사용할 수 있습니다:

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

function App() {
    return ( 
        <div>
            <MyComponent />
        </div>
    );
}

export default App;

이렇게 하면, 브라우저에서 “안녕하세요, React!”라는 메시지를 볼 수 있습니다.