[Exprss.js] 서버에서 시간 정보 받아오기

이 프로젝트는 클라이언트가 서버에 현재 시간을 요청하고 서버는 그 요청에 응답하여 현재 시간을 클라이언트에 전달하는 간단한 프로젝트입니다. GET 요청과 대한 이해하는데 초첨을 둡니다.

1. 프로젝트 개요

목표: 클라이언트가 버튼을 클릭하면 서버에 현재 시간을 요청합니다.
서버는 현재 시간을 응답으로 보내주고, 클라이언트는 그 시간을 화면에 표시합니다.

2. 폴더 구조

/time-app
  /public
    index.html
  server.js
  package.json

3. 프로젝트 구현

프로젝트 폴더 생성

mkdir time-app
cd time-app

node초기화 express 설치

npm init -y  # package.json 생성
npm install express  # Express 설치

클라이언트 코드 작성

pulic 폴더 안에 HTML 파일을 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Get Current Time</title>
</head>
<body>
  <h1>서버에서 현재 시간 받아오기</h1>
  <button id="getTimeButton">현재 시간 요청하기</button>
  <p id="currentTime">여기에 서버 응답이 표시됩니다.</p>

  <script>
    // 버튼 클릭 시 서버에 GET 요청을 보내는 함수
    document.getElementById('getTimeButton').addEventListener('click', () => {
      fetch('/time')  // 서버의 /time 경로에 GET 요청을 보냄
        .then(response => response.json())  // 서버로부터 받은 응답을 JSON으로 변환
        .then(data => {
          // 서버에서 받은 시간을 화면에 표시
          document.getElementById('currentTime').innerText = `서버 시간: ${data.time}`;
        })
        .catch(error => {
          console.error('Error:', error);
        });
    });
  </script>
</body>
</html>

클라이언트가 버튼을 클릭하면 서버에 GET 요청을 보냅니다.
서버가 응답한 시간을 화면에 표시합니다.

서버 코드 작성

server.js 파일을 만들어 클라이언트 요청을 처리하는 서버를 만듭니다.

// server.js
const express = require('express');
const app = express();
const port = 3000;

// 정적 파일 제공 (HTML 파일 등)
app.use(express.static('public'));

// 클라이언트가 /time 경로에 GET 요청을 보냈을 때 현재 시간을 응답
app.get('/time', (req, res) => {
  const currentTime = new Date().toLocaleTimeString();  // 현재 시간을 가져옴
  res.json({ time: currentTime });  // JSON 형식으로 응답
});

// 서버 시작
app.listen(port, () => {
  console.log(`서버가 http://localhost:${port}에서 실행 중입니다.`);
});

클라이언트가 /time 경로로 GET 요청을 보내면 서버는 현재 시간을 JSON 형식으로 응답합니다.
new Data().toLocalTimeString()은 서버의 현재 시간을 가져옵니다.

서버 실행 및 확인

node server.js

브라우저에 http://localhost:3000 접속하여 버튼을 누르면 현재 서버 시간을 받아와 화면에 표시합니다.

'Tutorials > Node' 카테고리의 다른 글

[Express.js] Project Setting (1)	2024.10.13
[Node.js] 간단한 입출력 콘솔 프로그램 (0)	2024.10.12
[Node.js] CommonJS (1)	2024.10.06
[Node.js] ESM (1)	2024.10.06
[Node.js] Node.js 실행 (0)	2024.10.06