React와 Node.js를 사용하여 효율적인 서버 측 애플리케이션을 구축하는 방법
최근 몇 년 동안 React와 Node.js는 프런트엔드 개발 분야에서 매우 인기 있는 기술이 되었습니다. React는 대화형 사용자 인터페이스를 구축하는 데 도움이 되는 효율적인 프런트 엔드 프레임워크인 반면, Node.js는 효율적인 서버 측 애플리케이션을 쉽게 구축할 수 있는 이벤트 중심 개발 플랫폼입니다. React와 Node.js를 결합하면 보다 효율적이고 강력한 서버 측 애플리케이션을 구축할 수 있습니다.
이 기사에서는 React와 Node.js를 사용하여 효율적인 서버 측 애플리케이션을 구축하는 방법을 살펴보고 몇 가지 구체적인 코드 예제를 제공합니다.
1단계: 프로젝트 구조 만들기
먼저 서버 측 애플리케이션을 구축하기 위한 새 프로젝트를 만들어야 합니다. Create React App 또는 Webpack과 같이 익숙한 프로젝트 구축 도구를 사용할 수 있습니다.
프로젝트의 루트 디렉터리에 새 폴더를 만들고 이름을 server로 지정합니다. 서버 폴더에서 서버 측 코드의 항목 파일로 index.js라는 새 파일을 만듭니다.
2단계: 기본 서버 구축
index.js 파일에서 기본 서버를 구축하는 데 필요한 일부 모듈을 가져와야 합니다. Express.js를 사용하여 간단한 서버를 빠르게 구축할 수 있습니다.
먼저 Express.js를 설치해야 합니다. 터미널에서 서버 폴더로 이동하여 다음 명령을 실행합니다.
npm install express
로그인 후 복사
그런 다음 index.js 파일에서 필요한 모듈을 가져옵니다.
const express = require('express');
// 创建Express实例
const app = express();
// 定义端口号
const port = 3000;
// 定义默认路由
app.get('/', (req, res) => {
res.send('Hello, world!');
});
// 监听端口
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});로그인 후 복사
이 코드는 간단한 Express 서버를 생성하고 루트 경로에 간단한 텍스트를 만듭니다. 응답이 반환되었습니다. 브라우저에서 http://localhost:3000을 방문하면 결과를 볼 수 있습니다.
3단계: React 구성 요소 소개
이제 기본 서버가 있으므로 React 구성 요소를 소개하고 서버에 렌더링하겠습니다.
먼저 React와 ReactDOM을 설치해야 합니다. 터미널에서 프로젝트 루트 디렉터리로 이동하여 다음 명령을 실행합니다.
npm install react react-dom
로그인 후 복사
그런 다음 index.js 파일에서 필요한 모듈을 가져옵니다.
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
// 创建Express实例
const app = express();
// 定义端口号
const port = 3000;
// 引入React组件
const App = require('./src/App');
// 定义默认路由
app.get('/', (req, res) => {
// 将React组件渲染为HTML字符串
const html = ReactDOMServer.renderToString(React.createElement(App));
// 将HTML字符串发送给浏览器
res.send(html);
});
// 监听端口
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});로그인 후 복사
이 코드에서는 App 구성 요소를 소개하고 ReactDOMServer를 사용합니다. renderToString 메서드는 이를 HTML 문자열로 렌더링합니다. 그런 다음 이 HTML 문자열을 브라우저로 보내 서버에서 렌더링할 수 있도록 합니다.
4단계: 서버 측 렌더링 최적화
이전 단계에서는 React 구성 요소를 서버에 성공적으로 렌더링했습니다. 그러나 이러한 서버 측 렌더링은 React의 클라이언트 측 렌더링 기능을 활용하지 않기 때문에 이상적이지 않습니다.
서버 측 렌더링을 최적화하기 위해 React의 수화 방법을 사용할 수 있습니다. 브라우저에서는 ReactDOM.render 메서드를 사용하여 구성 요소를 DOM으로 렌더링하고 프로세스에서 이를 서버 측에서 렌더링된 HTML과 비교합니다.
index.js 파일에서 서버 측 렌더링 코드를 일부 수정해야 합니다.
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const ReactDOM = require('react-dom');
// 创建Express实例
const app = express();
// 定义端口号
const port = 3000;
// 引入React组件
const App = require('./src/App');
// 定义默认路由
app.get('/', (req, res) => {
// 将React组件渲染为HTML字符串
const html = ReactDOMServer.renderToString(React.createElement(App));
// 将HTML字符串发送给浏览器
res.send(`
<html>
<head>
<title>Server-side Rendering</title>
</head>
<body>
<div id="root">${html}</div>
<script src="/bundle.js"></script>
</body>
</html>
`);
});
// 监听端口
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});로그인 후 복사
위 코드에서는 서버 측 생성 HTML에 클라이언트 측 렌더링에 필요한 JavaScript 파일을 추가했습니다. 링크를 코딩합니다. 이런 방식으로 브라우저에서 React는 서버 측에서 렌더링된 HTML 구조와 클라이언트 측에서 렌더링된 JavaScript 코드를 비교하여 업데이트가 필요한 부분만 업데이트함으로써 렌더링 효율성을 향상시킵니다.
5단계: 구축 및 배포
이제 React와 Node.js를 사용하여 효율적인 서버 측 애플리케이션을 구축하기 위한 기본 단계를 완료했습니다. 다음으로 빌드하고 배포해야 합니다.
먼저 React 앱을 구축해야 합니다. 터미널에서 프로젝트 루트 디렉터리로 이동하여 다음 명령을 실행합니다.
그런 다음 서버 코드를 프로덕션 환경에 배포해야 합니다. 클라우드 서버든 로컬 서버든 익숙한 서버에 배포하도록 선택할 수 있습니다.
마지막으로 서버를 시작하고 브라우저에서 서버 URL에 접속하면 서버 측에서 React 애플리케이션의 효율적인 렌더링 효과를 확인할 수 있습니다.
요약
React와 Node.js를 사용하여 효율적인 서버 측 애플리케이션을 구축하면 React의 클라이언트 측 렌더링 기능과 Node.js의 강력한 성능을 결합하여 애플리케이션의 렌더링 효율성과 사용자 경험을 향상시킬 수 있습니다. 이번 글의 소개를 통해 기본적인 서버를 구축하는 방법과 React 컴포넌트를 소개하는 방법, 그리고 hydration 방식을 사용하여 서버사이드 렌더링을 최적화하는 방법을 배웠습니다.
물론 이는 React와 Node.js를 사용하여 효율적인 서버 측 애플리케이션을 구축하기 위한 입문 단계일 뿐입니다. 실제 애플리케이션에서는 라우팅, 데이터베이스 연결, 신원 인증 등과 같은 다른 요소도 고려해야 할 수도 있습니다. 이 기사가 React 및 Node.js를 사용하여 서버 측 애플리케이션 개발을 빠르게 시작하고 애플리케이션에 더 나은 성능과 사용자 경험을 제공하는 데 도움이 되기를 바랍니다.
위 내용은 React와 Node.js를 사용하여 효율적인 서버 측 애플리케이션을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
