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

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

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

1. 프로젝트 디렉터리 만들기: 먼저 프로젝트 디렉터리를 만들고 새 Node.js 프로젝트를 초기화해야 합니다. 다음 명령을 사용하여 이 작업을 수행할 수 있습니다.

   mkdir my-app cd my-app npm init -y

   로그인 후 복사

2. React 및 관련 종속성 설치: 프로젝트 디렉터리에서 다음 명령을 실행하여 React 및 관련 종속성을 설치합니다.

   npm install react react-dom react-scripts

   로그인 후 복사

3. React 구성 요소 생성: 다음과 같은 React 구성 요소를 생성합니다. App.js 파일을 생성하고 다음 코드를 추가합니다.

   import React from 'react'; function App() { return ( 
    
   Hello, World!
    
    ); } export default App;

   로그인 후 복사

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

   import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(   , document.getElementById('root') );

   로그인 후 복사

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

   로그인 후 복사

6. React 애플리케이션 실행: 프로젝트 디렉터리에서 다음 명령을 실행하여 React 애플리케이션을 시작하세요.

   npm start

   로그인 후 복사

   이제 "Hello, World"가 표시될 것입니다. !" 브라우저 출력에 표시됩니다.

2. Node.js 백엔드 생성

1. 서버 파일 생성: 프로젝트 디렉터리에 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}`); });

   로그인 후 복사

2. Express 및 관련 종속성 설치: 다음을 실행합니다. Express 및 관련 종속 항목을 설치하려면 프로젝트 디렉터리에 명령을 입력하세요.

   npm install express

   로그인 후 복사

3. Node.js 서버 실행: 프로젝트 디렉터리에서 다음 명령을 실행하여 Node.js 서버를 시작하세요.

   node server.js

   로그인 후 복사

   이제 다음 작업을 수행할 수 있습니다. http://localhost:5000에 접속하면 브라우저에 "Hello, World!"라는 출력이 표시됩니다.

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

1. 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 ( 
    
   {message}
    
    ); } export default App;

   로그인 후 복사

2. 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}`); });

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

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

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