집 >웹 프론트엔드 >JS 튜토리얼 >React와 Node.js를 사용하여 고성능 풀스택 애플리케이션을 구축하는 방법

React와 Node.js를 사용하여 고성능 풀스택 애플리케이션을 구축하는 방법

WBOY원래의: 2023-09-26 17:40:52794검색

소개:
웹 애플리케이션이 발전하면서 고성능 풀스택 애플리케이션 구축이 점점 더 중요해지고 있습니다. 널리 사용되는 프런트엔드 및 백엔드 기술인 React와 Node.js는 풀 스택 개발에 널리 사용됩니다. 이 기사에서는 React와 Node.js를 사용하여 고성능 풀 스택 애플리케이션을 구축하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 기본 프로젝트 프레임워크 구축

프로젝트 디렉터리 만들기: 먼저 프로젝트 디렉터리를 만들고 새 Node.js 프로젝트를 초기화해야 합니다. 다음 명령을 사용하여 이 작업을 수행할 수 있습니다.
```
mkdir my-app
cd my-app
npm init -y
```
React 및 관련 종속성 설치: 프로젝트 디렉터리에서 다음 명령을 실행하여 React 및 관련 종속성을 설치합니다.
```
npm install react react-dom react-scripts
```
React 구성 요소 생성: 다음과 같은 React 구성 요소를 생성합니다. App.js 파일을 생성하고 다음 코드를 추가합니다.
```
import React from 'react';

function App() {
  return (
 <div>
   <h1>Hello, World!</h1>
 </div>
  );
}

export default App;
```

항목 파일 생성: index.js라는 파일을 생성하고 다음 코드를 추가합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
 <App />
  </React.StrictMode>,
  document.getElementById('root')
);

HTML 템플릿 생성: index라는 파일을 생성합니다. html 파일을 만들고 다음 코드를 추가하세요:

<!DOCTYPE html>
<html>
  <head>
 <title>React App</title>
  </head>
  <body>
 <div id="root"></div>
 <script src="./index.js"></script>
  </body>
</html>

React 애플리케이션 실행: 프로젝트 디렉터리에서 다음 명령을 실행하여 React 애플리케이션을 시작하세요.
```
npm start
```
이제 "Hello, World"가 표시될 것입니다. !" 브라우저 출력에 표시됩니다.

2. Node.js 백엔드 생성

서버 파일 생성: 프로젝트 디렉터리에 server.js라는 파일을 생성하고 다음 코드를 추가합니다.

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

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

const port = 5000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Express 및 관련 종속성 설치: 다음을 실행합니다. Express 및 관련 종속 항목을 설치하려면 프로젝트 디렉터리에 명령을 입력하세요.
```
npm install express
```
Node.js 서버 실행: 프로젝트 디렉터리에서 다음 명령을 실행하여 Node.js 서버를 시작하세요.
```
node server.js
```
이제 다음 작업을 수행할 수 있습니다. http://localhost:5000에 접속하면 브라우저에 "Hello, World!"라는 출력이 표시됩니다.

3. 프런트엔드와 백엔드 연결

React 구성 요소 수정: App.js의 코드를 다음과 같이 수정합니다.

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

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

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

  return (
 <div>
   <h1>{message}</h1>
 </div>
  );
}

export default App;

Node.js 서버 수정: server.js의 코드를 다음과 같이 수정합니다.

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

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

const port = 5000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

애플리케이션 다시 시작: React 애플리케이션과 Node.js 서버를 다시 시작하고 http://localhost:3000을 방문하면 페이지에 "Hello, World from API!"가 표시됩니다.

결론:
위 단계를 통해 우리는 React와 Node.js 기반의 풀스택 애플리케이션을 성공적으로 구축하고 프론트엔드와 백엔드 간의 연결을 구현했습니다. React와 Node.js를 사용하여 고성능 풀스택 애플리케이션을 구축하면 개발 효율성과 사용자 경험을 크게 향상시킬 수 있습니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 React와 Node.js를 사용하여 고성능 풀스택 애플리케이션을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html express 栈 JS http

성명：

이전 기사：React Query 데이터베이스 플러그인: 데이터를 가져오고 내보내는 방법다음 기사：React Query 데이터베이스 플러그인: 데이터를 가져오고 내보내는 방법