리액트 강좌: Node.js 환경 설정하기

웹 개발은 현대의 다양한 애플리케이션을 구축하는 데 필수적인 기술입니다. 그 중에서도 리액트와 Node.js는 인기 있는 프레임워크와 런타임으로, 프론트엔드와 백엔드 개발에 널리 사용되고 있습니다. 이번 강좌에서는 리액트를 사용하기 위한 Node.js 환경 설정에 대해 자세히 알아보겠습니다.

1. Node.js란?

Node.js는 서버 사이드 애플리케이션을 구축하기 위한 오픈 소스 자바스크립트 런타임입니다. 기본적으로 크롬의 V8 자바스크립트 엔진 위에서 실행되며, 비동기 이벤트 기반 프로그래밍 모델을 제공합니다. 이러한 특성 덕분에 Node.js는 웹 서버와 다양한 네트워크 애플리케이션을 구축하는 데 매우 효율적입니다.

2. Node.js 설치하기

리액트를 사용하기 위해서는 먼저 Node.js를 설치해야 합니다. Node.js는 다양한 운영 체제에서 지원되므로, 자신이 사용하는 환경에 적합한 방법으로 설치할 수 있습니다.

2.1. Windows에서 Node.js 설치하기

Node.js 공식 웹사이트(https://nodejs.org/)로 이동합니다.
버전 선택: LTS(Long Term Support) 버전을 다운로드하여 설치합니다.
다운로드가 완료되면 설치 파일을 실행하고, 설치 과정을 진행합니다.
설치가 완료되면 명령 프롬프트를 열고 node -v 명령어로 설치가 완료되었는지 확인합니다.

2.2. macOS에서 Node.js 설치하기

Homebrew를 사용하여 Node.js를 설치할 수 있습니다. 터미널을 열고 다음 명령어를 입력합니다:
brew install node
설치 후 node -v 명령어로 버전을 확인합니다.

2.3. Linux에서 Node.js 설치하기

NodeSource 저장소를 추가하고 설치할 수 있습니다. 터미널에서 다음 명령어를 실행합니다:
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
설치 후 node -v 명령어로 버전을 확인합니다.

3. npm과 패키지 관리자

Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됩니다. npm은 자바스크립트 라이브러리 및 패키지를 관리하는 도구로, 리액트 프로젝트에 필요한 패키지를 설치하는 데 사용됩니다.

3.1. npm 버전 확인하기

명령 프롬프트나 터미널에서 다음 명령어를 실행하여 npm 버전을 확인합니다:

npm -v

4. 리액트 프로젝트 생성하기

Node.js와 npm이 설치되었다면 이제 리액트 프로젝트를 생성할 차례입니다. 리액트 프로젝트를 생성하는 가장 쉽게 접근할 수 있는 방법은 Create React App을 사용하는 것입니다.

4.1. Create React App 설치하기

Create React App은 리액트 애플리케이션을 빠르게 구축할 수 있도록 도와주는 공식 도구입니다. 다음 명령어로 Create React App을 전역으로 설치합니다:

npm install -g create-react-app

4.2. 리액트 프로젝트 생성하기

Create React App을 설치한 후, 다음 명령어를 사용하여 새로운 리액트 애플리케이션을 생성합니다. my-app은 프로젝트 이름이며, 원하는 이름으로 변경할 수 있습니다.

npx create-react-app my-app

4.3. 리액트 프로젝트 실행하기

프로젝트가 생성되면 아래 명령어로 해당 폴더로 이동하고, 애플리케이션을 실행할 수 있습니다:

cd my-app
npm start

이제 웹 브라우저를 열고 http://localhost:3000에 접속하면 기본 리액트 애플리케이션을 확인할 수 있습니다.

5. Node.js 서버 설정하기

리액트 애플리케이션을 완성하기 위해서는 Node.js 서버를 설정해야 합니다. 이를 통해 REST API를 제공하고, 리액트 애플리케이션과 인터랙션할 수 있습니다.

5.1. 새로운 Node.js 프로젝트 생성하기

리액트 프로젝트와 별도로 Node.js 백엔드 서버를 생성합니다. 새로운 폴더를 만들고 해당 폴더로 이동한 다음, 다음 명령어를 실행하여 새로운 npm 프로젝트를 시작합니다:

mkdir my-node-server
cd my-node-server
npm init -y

5.2. Express 설치하기

Express는 Node.js 용 웹 애플리케이션 프레임워크로, RESTful API를 쉽게 구축할 수 있도록 도와줍니다. 다음 명령어로 Express를 설치합니다:

npm install express

5.3. 기본 서버 코드 작성하기

새로운 파일을 생성하고 서버 코드를 작성합니다. server.js라는 이름의 파일을 생성하고 아래의 기본 코드를 추가합니다:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;

app.get('/', (req, res) => {
    res.send('Hello World from Node.js server!');
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

6. Node.js 서버 실행하기

서버 코드를 작성한 후, 아래 명령어로 Node.js 서버를 실행합니다:

node server.js

웹 브라우저를 열고 http://localhost:5000에 접속하여 “Hello World from Node.js server!”라는 메시지를 확인합니다.

7. 리액트와 Node.js 연결하기

리액트 애플리케이션과 Node.js 서버가 모두 준비가 되었으면, 두 애플리케이션 간의 연결을 설정합니다. 이 과정에서는 리액트 애플리케이션에서 Node.js 서버로 API 요청을 보내고 응답을 받아오는 방법을 설명합니다.

7.1. Axios 설치하기

API 요청을 보내기 위한 라이브러리인 Axios를 리액트 프로젝트에 설치합니다. 아래 명령어를 실행하여 Axios를 설치합니다:

npm install axios

7.2. API 요청 코드 작성하기

리액트 애플리케이션의 컴포넌트 내부에서 Node.js 서버로 요청을 보내는 코드를 작성합니다. src/App.js 파일을 열고 아래 코드를 추가합니다:

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

function App() {
    const [message, setMessage] = useState('');

    useEffect(() => {
        axios.get('http://localhost:5000')
            .then(response => {
                setMessage(response.data);
            })
            .catch(error => {
                console.error('There was an error!', error);
            });
    }, []);

    return (
        
            {message}
        
    );
}

export default App;

8. 최종 결과 확인하기

모든 설정이 완료되었다면, 리액트 애플리케이션을 다시 시작합니다. 브라우저를 새로고침하여 Node.js 서버에서 가져온 메시지를 확인할 수 있습니다.

9. 결론

이번 강좌에서는 리액트 애플리케이션을 개발하기 위한 Node.js 환경을 설정하는 방법에 대해 알아보았습니다. Node.js와 Express를 사용하여 간단한 백엔드 서버를 구축하고, Axios를 사용하여 리액트와 연결하는 과정을 살펴보았습니다. 앞으로 더 복잡한 애플리케이션을 개발할 때 이 기본 지식을 토대로 확장해 나가길 바랍니다.