React와 Node.js를 사용하여 간단한 풀스택 애플리케이션 만들기

이전 블로그에서는 React와 Node.js를 소개했습니다. 이제 이들을 하나로 모아 훨씬 더 흥미로운 것을 구축해 보겠습니다. 바로 간단한 풀 스택 애플리케이션입니다! 풀 스택 앱은 여러 데이터베이스와 복잡한 구조를 가진 대규모 프로젝트에만 사용된다고 생각할 수도 있습니다. 개념적으로는 사실이지만, 실제로 풀스택 애플리케이션은 기본 백엔드를 갖춘 작은 프런트엔드만큼 간단할 수 있습니다. 이제 이를 분석하여 React와 Node.js를 사용하여 풀스택 앱을 만드는 것이 얼마나 쉬운지 살펴보겠습니다.

1단계: Node.js 및 Express를 사용한 백엔드

백엔드 생성부터 시작해 보겠습니다. Express를 서버로 사용하여 간단한 JSON 메시지 응답을 프런트엔드에 보냅니다.

1. Express 설치: 시작하려면 먼저 터미널에서 다음 명령을 실행하여 Express를 설치하세요.

   npm install express

1. 서버 생성: 이제 인사말 메시지를 반환하는 간단한 경로를 사용하여 서버를 만들어 보겠습니다.

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

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

설명:

• express 모듈을 가져오고 express()를 사용하여 해당 인스턴스를 생성합니다.
• 인사말 메시지가 포함된 JSON 개체로 응답하는 간단한 GET 경로를 /greet에 설정했습니다.
• 포트 3000에서 서버를 시작하면 콘솔에 서버가 실행 중임을 기록합니다.

---

2단계: React를 사용한 프런트엔드

이제 React를 사용하여 프런트엔드를 만들어 보겠습니다. useState와 useEffect라는 두 가지 후크를 사용하여 백엔드에서 데이터를 가져옵니다.

1. React 앱 만들기: React 앱을 아직 설정하지 않은 경우 다음을 실행하여 create-react-app을 사용하여 앱을 만들 수 있습니다.

   npx create-react-app my-fullstack-app
   cd my-fullstack-app

1. 프런트엔드 코드 작성: 이제 백엔드에서 데이터를 가져와 표시하도록 App.js 파일을 수정해 보겠습니다.

   import { useState, useEffect } from 'react';

   export function App() {
     const [response, setResponse] = useState(null);

     useEffect(() => {
       const controller = new AbortController();
       // This is used to abort the fetch request if the component is unmounted
       const fetchData = async () => {
         try {
           const response = await fetch('http://localhost:3000/greet', {
             signal: controller.signal,
           });

           if (!response.ok) throw new Error("Couldn't fetch data");

           const data = await response.json();
           setResponse(data.message); // Corrected the response property here
         } catch (error) {
           console.error(error);
         }
       };

       fetchData();

       // Clean up function to abort the fetch request if needed
       return () => controller.abort();
     }, []); 

     return (
       <div>
         {response ? <p>{response}</p> : <p>Loading...</p>}
       </div>
     );
   }

설명:

• useState는 백엔드의 응답 데이터를 보관하는 데 사용됩니다.
• useEffect는 구성요소가 마운트될 때 가져오기 요청을 트리거하는 데 사용됩니다.
• 우리는 fetch() API를 사용하여 http://localhost:3000/greet에 요청을 보내고 응답을 처리합니다. 가져오기가 성공하면 백엔드의 메시지로 응답 상태를 업데이트합니다.
• 요청이 진행되는 동안 구성요소에 "로드 중..."이라는 응답이 표시됩니다.

---

3단계: 앱 실행

1. 백엔드 시작: 백엔드 폴더(server.js 파일이 있는 위치)에서 다음을 실행합니다.

   npm install express

1. 프런트엔드 시작: 프론트엔드 폴더(React 앱이 있는 위치)에서 다음을 실행합니다.

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

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

이제 브라우저를 열고 http://localhost:3000으로 이동하세요. 백엔드에서 가져온 간단한 메시지가 표시되며 "Zee here..."가 표시됩니다.

---

결론

그리고 그게 다입니다! React와 Express를 사용하여 간단한 전체 스택 애플리케이션을 만들었습니다. 이는 훌륭한 시작이며, 이 기반을 통해 더 복잡한 애플리케이션을 확장하고 구축할 수 있습니다. 즐거운 코딩하세요!

---

주요 시사점:

• 풀 스택 애플리케이션은 복잡할 필요가 없습니다. 간단한 프론트엔드와 백엔드는 풀스택으로 간주될 수 있습니다.
• React의 useState 및 useEffect 후크는 백엔드 API에서 데이터를 가져오는 데 적합합니다.
• Express는 백엔드 API 구축을 위한 간단하고 강력한 프레임워크입니다.

위 내용은 React와 Node.js를 사용하여 간단한 풀스택 애플리케이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!