React 프론트엔드와 백엔드 분리 가이드: 프론트엔드와 백엔드의 분리 및 독립적 배포를 달성하는 방법

React 프론트엔드와 백엔드 분리 가이드: 프론트엔드와 백엔드의 분리 및 독립적 배포를 달성하는 방법, 구체적인 코드 예제가 필요함

오늘날의 웹 개발 환경에서는 프론트엔드와 백엔드 - 분리가 추세가 되었습니다. 프런트엔드 코드와 백엔드 코드를 분리함으로써 개발 작업을 보다 유연하고 효율적으로 수행하고 팀 협업을 촉진할 수 있습니다. 이 기사에서는 React를 사용하여 프런트엔드와 백엔드 분리를 달성하고 이를 통해 디커플링 및 독립적 배포 목표를 달성하는 방법을 소개합니다.

먼저 프론트엔드와 백엔드 분리가 무엇인지 이해해야 합니다. 전통적인 웹 개발 모델에서는 프런트엔드와 백엔드가 함께 결합됩니다. 모든 HTML, CSS 및 JavaScript 코드는 백엔드에서 생성되고 프런트엔드와 백엔드 코드는 함께 혼합됩니다. 프런트엔드와 백엔드 분리는 프런트엔드와 백엔드 코드를 분리하여 프런트엔드와 백엔드를 독립적으로 개발하고 배포할 수 있도록 하는 것입니다.

React는 매우 인기 있는 프런트 엔드 프레임워크로, 컴포넌트 기반 개발 모델을 제공하여 프런트 엔드 개발을 더욱 모듈화하고 유지 관리하기 쉽게 만듭니다. 우리는 프론트엔드와 백엔드 분리를 달성하기 위해 프론트엔드 프레임워크로 React를 사용할 것입니다.

다음은 React+Node.js를 사용하여 프런트엔드와 백엔드 분리를 달성하는 방법을 보여주는 구체적인 코드 예제입니다.

먼저 React 프로젝트를 생성해야 합니다. create-react-app 도구를 사용하여 새 React 프로젝트를 만들 수 있습니다.

npx create-react-app frontend

다음으로 백엔드에서 반환된 데이터를 표시하는 간단한 React 구성 요소를 만듭니다. src 폴더에 새 파일 HelloWorld.js를 만들고 다음 코드를 추가합니다.

import React from 'react';

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: '',
    };
  }

  componentDidMount() {
    fetch('/api/helloworld')
      .then(response => response.json())
      .then(data => this.setState({ message: data.message }));
  }

  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        <p>{this.state.message}</p>
      </div>
    );
  }
}

export default HelloWorld;

이 구성 요소는 fetch API를 사용하여 백엔드에서 데이터를 가져와 페이지에 표시합니다.

다음으로 백엔드 서버를 만들어야 합니다. Node.js와 Express 프레임워크를 사용하여 간단한 백엔드 서버를 만들 수 있습니다. 프로젝트 루트 디렉터리에 새 파일 server.js를 만들고 다음 코드를 추가합니다.

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

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

const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

이 서버는 포트 5000을 수신하고 /api/helloworld의 API 인터페이스를 제공하여 백엔드에서 "Hello World! " "JSON 개체입니다.

마지막으로 프론트엔드와 백엔드 프로젝트를 연결해야 합니다. React 프로젝트의 루트 디렉터리에 setupProxy.js라는 새 파일을 만들고 다음 코드를 추가합니다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

이 파일은 프런트 엔드에서 백엔드 주소로 API 요청을 전달하는 데 사용됩니다.

이제 프론트엔드와 백엔드 프로젝트를 실행할 수 있습니다. 터미널에 React 프로젝트의 루트 디렉터리와 server.js가 있는 디렉터리를 입력한 뒤, 다음 명령어를 실행합니다.

# React项目
npm start

# 后端服务器
node server.js

http://localhost:3000에 접속하면 "Hello"라는 메시지가 나오는 것을 볼 수 있습니다. 백엔드의 세계!" 페이지.

위의 예시를 통해 React의 프론트엔드와 백엔드 분리에 성공했으며, 프론트엔드와 백엔드를 독립적으로 개발하고 배포할 수 있습니다. 프런트엔드 코드와 백엔드 코드를 분리함으로써 프로젝트 구조를 더 잘 구성하고 개발 효율성을 높일 수 있습니다. 동시에 독립적인 배포를 통해 프로젝트 시작 및 유지 관리에 있어 보다 유연해질 수 있습니다.

실제 개발에서는 프런트엔드와 백엔드 분리를 달성하기 위해 특정 요구 사항과 아키텍처에 따라 적절한 기술 스택과 프레임워크를 선택할 수 있습니다. React는 단지 옵션 중 하나일 뿐입니다. 위의 예시를 통해 여러분은 이미 기본 아이디어와 방법을 익힐 수 있을 것입니다.

요약하자면 React의 프런트엔드와 백엔드를 분리하려면 다음 단계가 필요합니다. React 프로젝트 생성, 프런트엔드 구성 요소 구현, 백엔드 서버 생성, 프런트엔드와 프런트엔드 프로젝트 연결 . 이러한 단계를 통해 프런트엔드와 백엔드의 분리 및 독립적인 배포를 달성할 수 있습니다.

이 글이 여러분에게 도움이 되길 바라며, 프론트엔드와 백엔드 분리 개발에 성공하시길 기원합니다!

위 내용은 React 프론트엔드와 백엔드 분리 가이드: 프론트엔드와 백엔드의 분리 및 독립적 배포를 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!