IT 관련/기타

세계시간 코드 설명

islet2 2025. 3. 14. 09:43
  1. 썸머타임(일광절약시간제) 적용 여부:
    현재 구현된 코드는 각 나라의 썸머타임을 자동으로 반영합니다. JavaScript의 Date 객체와 toLocaleTimeString(), toLocaleDateString() 함수를 timezone 파라미터와 함께 사용하고 있어서, 해당 지역의 썸머타임 규칙을 자동으로 적용합니다. 예를 들어 미국이나 유럽의 도시를 선택하면 해당 국가의 썸머타임 적용 기간 동안 자동으로 조정된 시간이 표시됩니다.

  2. 각 나라의 시간 구현 방식:
    각 도시의 시간은 IANA 시간대 데이터베이스의 지역 ID를 사용하여 구현되어 있습니다. 코드에서 "America/New_York", "Europe/London"과 같은 형식으로 시간대를 지정하고, 이를 toLocaleTimeString()toLocaleDateString() 함수의 timeZone 옵션으로 전달하여 해당 시간대의 현재 시간을 계산합니다. 브라우저의 내장 시간대 데이터베이스를 사용하므로 별도의 서버 통신 없이도 정확한 시간을 표시할 수 있습니다.

    time.html
    13.3 kB

    const options = {
        timeZone: timezone,  // 여기에 "Asia/Seoul"과 같은 시간대 ID를 전달
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    };
    
    const timeString = new Date().toLocaleTimeString('ko-KR', options);
  3. 새로운 도시 추가 방법:
    새로운 도시를 추가하려면 코드 내의 cities 배열에 새 도시를 추가하면 됩니다. 스크립트 부분의 맨 앞에 있는 cities 배열을 찾아 아래와 같은 형식으로 새 항목을 추가하면 됩니다:

    // 새 도시 추가 예시
    { value: "Asia/Vladivostok", label: "블라디보스토크" },

    여기서 value는 IANA 시간대 ID이고, label은 사용자에게 표시될 도시 이름입니다. 전체 IANA 시간대 목록은 여기에서 확인할 수 있습니다.

    또한, 초기 기본 도시를 변경하려면 defaultCities 배열을 수정하면 됩니다:

    // 기본 도시 수정 예시
    const defaultCities = [
        "Asia/Seoul",
        "America/New_York",
        // ... 다른 도시들
    ];

이 웹페이지는 브라우저의 내장 기능을 사용하여 시간대를 처리하므로, 별도의 서버 없이도 각 도시의 정확한 현재 시간(썸머타임 포함)을 확인할 수 있습니다.