React 애플리케이션을 위한 Node.js 백엔드 설정

React 프런트엔드와 Node.js 백엔드를 결합하는 것은 풀 스택 웹 애플리케이션을 구축하기 위한 일반적이고 강력한 설정입니다. Node.js는 서버 측 개발을 위한 강력한 환경을 제공하므로 API, 인증 및 데이터베이스 작업을 효과적으로 처리할 수 있습니다. 이 가이드에서는 React 애플리케이션을 위한 Node.js 백엔드를 설정하는 과정을 안내합니다.

전제조건
시작하기 전에 다음이 설치되어 있는지 확인하세요.

• Node.js: nodejs.org에서 다운로드하세요.
• npm 또는 Yarn: Node.js와 함께 번들로 제공됩니다.
• JavaScript, React, Node.js에 대한 기본 이해

1단계: Node.js 백엔드 초기화

1. 새 디렉토리 생성:

mkdir react-node-app
cd react-node-app

2. Node.js 프로젝트 초기화:

npm init -y 

기본 설정으로 package.json 파일이 생성됩니다.

3. Express.js 설치:
Express는 Node.js 애플리케이션 구축을 위한 경량 프레임워크입니다.

npm install express

2단계: Express Server 설정

1. index.js 파일 만들기:
프로젝트 디렉토리에 index.js라는 파일을 생성하세요.

2. 기본 서버 코드 작성:

const express = require('express');  
const app = express();  
const PORT = 5000;  

app.get('/', (req, res) => {  
    res.send('Backend is running!');  
});  

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

3. 서버 실행:
다음을 사용하여 서버를 시작하세요.

node index.js  

응답을 보려면 브라우저에서 http://localhost:5000을 방문하세요.

3단계: React 프론트엔드 연결

1. React 앱 만들기:
동일한 디렉토리에서 create-react-app 또는 Vite를 사용하여 프런트엔드를 설정하세요.

npx create-react-app client  
cd client  

2. React 앱 실행:
React 개발 서버를 시작하세요:

npm start

React 앱은 http://localhost:3000에서 실행됩니다.

4단계: API 호출용 프록시 구성

React에서 Node.js 백엔드로 API 요청을 하려면 React 앱에서 프록시를 구성하세요.

1. package.json에 프록시 추가:
React 앱의 package.json에 다음을 추가하세요.

"proxy": "http://localhost:5000"

2. React에서 API 호출하기:
예: Node.js 서버에서 데이터를 가져옵니다.

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

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

    useEffect(() => {  
        fetch('/')  
            .then((res) => res.text())  
            .then((data) => setMessage(data));  
    }, []);  

    return <div>{message}</div>;  
}  

export default App; 

5단계: API 엔드포인트 추가

맞춤형 API 엔드포인트로 백엔드를 강화하세요.

1. index.js 업데이트:

app.get('/api/data', (req, res) => {  
    res.json({ message: 'Hello from the backend!' });  
}); 

2. 데이터 가져오기를 위한 React 업데이트:

useEffect(() => {  
    fetch('/api/data')  
        .then((res) => res.json())  
        .then((data) => setMessage(data.message));  
}, []);

6단계: 데이터베이스에 연결(선택 사항)

백엔드를 더욱 동적으로 만들려면 MongoDB와 같은 데이터베이스에 연결하세요.

1. MongoDB 드라이버 또는 Mongoose 설치:

mkdir react-node-app
cd react-node-app

2. 데이터베이스 연결 설정:
index.js 파일을 업데이트하세요.

npm init -y 

7단계: 애플리케이션 배포

1. Heroku 또는 Render에 백엔드 배포:

• Node.js 백엔드를 호스팅하려면 Heroku 또는 Render와 같은 플랫폼을 사용하세요.

2. Vercel 또는 Netlify에 React 배포:

• Vercel 또는 Netlify와 같은 플랫폼은 React 앱 배포에 탁월합니다.

결론
React 애플리케이션을 위한 Node.js 백엔드를 설정하면 강력한 전체 스택 개발 환경이 제공됩니다. 이 가이드를 따르면 확장 가능하고 성능이 뛰어난 웹 애플리케이션을 구축하기 위한 견고한 기반을 갖게 됩니다. 백엔드가 준비되면 인증, 실시간 업데이트, 데이터베이스 통합과 같은 기능을 포함하도록 애플리케이션을 확장할 수 있습니다.

코딩을 시작하고 풀 스택 프로젝트에 생기를 불어넣으세요! ?

위 내용은 React 애플리케이션을 위한 Node.js 백엔드 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!