React.js는 현재 많은 웹 개발자들이 사용하는 인기있는 자바스크립트 라이브러리입니다. React.js를 사용하여 프론트엔드를 개발하는 것은 많은 사람들에게 친숙한 일이 되었습니다. 그러나 백엔드 서버를 구축하는 것은 조금 더 복잡한 과정일 수 있습니다. 이 블로그 포스트에서는 React.js를 사용하여 백엔드 서버를 구축하는 방법에 대해 알아보겠습니다.

서버 환경 설정

React.js로 구축한 웹 사이트의 백엔드 서버를 만들기 위해서는 Node.js와 Express.js를 사용할 것입니다. Node.js를 설치하고 새로운 프로젝트 디렉토리를 만듭니다. 그런 다음, 명령 프롬프트 또는 터미널에서 해당 디렉토리로 이동하여 다음 명령어를 실행합니다.

$ npm init

이 명령어는 새로운 npm 프로젝트를 초기화합니다. 초기화 과정에서 프로젝트에 대한 몇 가지 정보를 입력해야 합니다. 모든 정보를 입력하고 나면 package.json 파일이 생성됩니다. 이 파일은 프로젝트의 의존성 관리와 실행 스크립트를 설정하는 데 사용됩니다.

다음으로 Express.js를 설치해야 합니다. 다음 명령어를 실행하여 Express.js를 설치합니다.

$ npm install express

Express.js는 Node.js의 웹 프레임워크로, 웹 서버를 쉽게 생성하고 관리할 수 있도록 도와줍니다.

백엔드 서버 코드 작성

이제 서버 코드를 작성할 차례입니다. 프로젝트 디렉토리에 server.js라는 파일을 생성하고 다음 코드를 작성합니다.

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

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

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

위 코드에서는 Express.js를 사용하여 간단한 웹 서버를 생성합니다. 루트 경로(“/”)로 들어오는 모든 요청에 대해 “Hello, World!”라는 응답을 반환합니다. app.listen 함수를 사용하여 서버를 지정된 포트(예: 3000)에서 실행합니다.

서버 실행

서버 코드를 작성한 후에는 서버를 실행해야 합니다. 명령 프롬프트 또는 터미널에서 다음 명령어를 실행하여 서버를 실행합니다.

$ node server.js

서버가 성공적으로 실행되면 “Server running at http://localhost:3000”라는 메시지가 터미널에 표시됩니다. 이제 웹 브라우저에서 http://localhost:3000에 접속하여 “Hello, World!” 메시지를 확인할 수 있습니다.

추가 기능 구현

이제 간단한 서버를 구축했으므로 추가 기능을 구현할 수 있습니다. 예를 들어, /api 경로로 들어오는 요청에 대해 JSON 데이터를 반환하도록 수정해 보겠습니다.

app.get('/api', (req, res) => {
  const data = {
    message: 'This is an API endpoint',
    timestamp: new Date().getTime()
  };

  res.json(data);
});

이제 http://localhost:3000/api에 접속하면 다음과 같은 JSON 데이터를 반환하는 것을 확인할 수 있습니다.

{
  "message": "This is an API endpoint",
  "timestamp": 1622367599796
}

마무리

이제 React.js로 구축한 웹 사이트의 백엔드 서버를 제작하는 방법에 대해 간단히 알아보았습니다. Node.js와 Express.js를 사용하여 간단한 서버를 구축하고 추가 기능을 구현하는 방법을 배웠습니다. 이를 토대로 더 복잡한 웹 애플리케이션을 개발할 수 있습니다.

저희는 더 많은 기술 블로그 포스트를 작성하고 있습니다. 관심있으시면 우리 블로그를 방문해 보세요.

#React #백엔드 ```