자바스크립트와 React.js를 활용한 세계 시간 애플리케이션 만들기

09 Nov 2023

reactjs

이번 블로그 포스트에서는 자바스크립트와 React.js를 사용하여 세계 시간 애플리케이션을 만들어보겠습니다. 이 애플리케이션은 사용자의 위치에 따라 실시간으로 세계 여러 도시의 시간을 보여줍니다.

준비물

Node.js 및 npm 설치
React.js 기본 지식
Visual Studio Code 또는 다른 코드 편집기

프로젝트 설정

먼저, 프로젝트를 위한 폴더를 생성하고 해당 폴더에서 터미널을 열어 다음 명령어로 React 앱을 생성합니다.

npx create-react-app world-time-app

앱이 생성되면 다음 명령어를 사용하여 앱 폴더로 이동합니다.

cd world-time-app

필요한 패키지 설치

세계 시간 애플리케이션을 위해 몇 가지 패키지를 설치해야 합니다. 터미널에서 다음 명령어를 실행하여 필요한 패키지들을 설치합니다.

npm install axios moment

axios는 HTTP 요청을 보내기 위해 사용됩니다.
moment는 날짜와 시간을 처리하기 위한 라이브러리입니다.

애플리케이션 개발

src 폴더에서 components 폴더를 생성하고, 그 안에 WorldClock.js 파일을 생성합니다.
WorldClock.js 파일에 다음 코드를 입력합니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import moment from 'moment';

const WorldClock = () => {
  const [worldTime, setWorldTime] = useState([]);

  useEffect(() => {
    const fetchWorldTime = async () => {
      try {
        const response = await axios.get('http://worldtimeapi.org/api/timezone');
        setWorldTime(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchWorldTime();
  }, []);

  return (
    <div>
      <h1>세계 시간</h1>
      {worldTime.map((zone) => (
        <div key={zone}>
          {zone}: {moment().tz(zone).format('YYYY-MM-DD HH:mm:ss')}
        </div>
      ))}
    </div>
  );
};

export default WorldClock;

src 폴더에서 App.js 파일을 열고 다음 코드로 수정합니다.

import React from 'react';
import WorldClock from './components/WorldClock';

const App = () => {
  return (
    <div>
      <WorldClock />
    </div>
  );
};

export default App;

애플리케이션 실행

프로젝트 폴더에서 다음 명령어를 실행하여 애플리케이션을 실행합니다.

npm start

브라우저에서 http://localhost:3000로 이동하면 세계 시간 애플리케이션이 실행됩니다.

결론

이제 자바스크립트와 React.js를 사용하여 세계 시간 애플리케이션을 만들 수 있습니다. 이 애플리케이션은 사용자의 위치에 따라 실시간으로 세계 여러 도시의 시간을 표시하여 세계 시간을 쉽게 확인할 수 있게 해줍니다.

해당 프로젝트의 전체 코드는 GitHub 저장소에서 확인할 수 있습니다. 직접 코드를 작성하고 실험해보며 더 많은 기능을 추가해볼 수도 있습니다. 즐거운 코딩!

#reactjs #javascript