트랙
/
Elm
Elm
/
연습 문제
/
Kuroko의 시계
Kuroko의 시계

Kuroko의 시계

학습 연습 문제

소개

시간

Time 모듈은 사람이 읽을 수 있는 날짜와 시간을 표시할 때 사용해요. Time으로도 시간을 다룰 수는 있지만, 그 작업에는 훨씬 더 잘 맞는 Elm 커뮤니티 패키지들이 있어요. justinmimbs/date나 CoderDennis/elm-time-format 같은 패키지들이에요.

Posix

시간은 불투명 타입인 Posix로 표현해요. Posix는 유닉스 에포크 시간, 즉 1970년 1월 1일 UTC 자정 이후 지난 밀리초 수를 감싸고 있어요. Posix는 시간대에 따라 달라지지 않는 모호하지 않은 값이라서, 시간을 기록하기에 좋은 선택이에요. Elm 애플리케이션에서 Posix 시간은 보통 브라우저 같은 외부 소스에서 제공돼요.

다음 함수를 사용하면 Posix를 밀리초 숫자로, 또는 그 반대로 변환할 수 있어요:

posixToMillis : Posix -> Int
millisToPosix : Int -> Posix

시간대

일상에서 우리는 보통 Posix를 그대로 읽기보다는 지역 시간을 더 선호해요. 지역 시간은 지구상에서 우리가 있는 위치와 그 지역의 일광 절약 시간 규칙에 따라 달라져요. Elm에서는 이 정보가 불투명 타입인 Zone에 담겨 있고, 보통 브라우저가 제공해요.

항상 사용할 수 있는 특별한 Zone도 있어요:

utc : Zone

사람이 읽는 시간

Posix와 Zone만 있으면 어떤 수준의 세부 정보로든 지역 시간을 표시할 수 있어요. 이때 사용할 수 있는 함수는 다음과 같아요:

toYear : Zone -> Posix -> Int
toMonth : Zone -> Posix -> Month
toDay : Zone -> Posix -> Int
toWeekday : Zone -> Posix -> Weekday
toHour : Zone -> Posix -> Int
toMinute : Zone -> Posix -> Int
toSecond : Zone -> Posix -> Int
toMillis : Zone -> Posix -> Int

Time의 사용자 정의 타입 두 개를 더 눈치챘을 거예요:

type Month = Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec
type Weekday = Mon | Tue | Wed | Thu | Fri | Sat | Sun

이 사용자 정의 타입을 사람이 읽을 수 있는 값으로 변환하는 일은 사용자에게 맡겨져 있어요.

지침

일본인 친구 쿠로코는 전 세계적으로 인기 있는 스트리머예요. 쿠로코의 방송 일정은 꽤 복잡한데, 방송마다 시작 시간이 매일 다른 것처럼 보여요.

쿠로코는 시청자의 현지 시간대에 맞춰 자신의 일정을 보여 줄 작은 앱, 쿠로코의 시계를 만드는 일을 도와달라고 해요. 추가로 원하는 조건이 하나 더 있어요. 바로 일본어와 미국식 영어, 두 가지 언어로 시간을 표시할 수 있어야 한다는 거예요.

1. 날짜예요

showLocalDate : Locale -> Int -> Month -> Int -> String 함수를 정의해요. 이 함수는 (유효한) 현지 날짜를 표시해요.

US 로케일에서는 형식이 Month/Day/Year이고, 앞에 0을 붙이지 않아요.

JP 로케일에서는 형식이 Year年Month月Day日이고, 이때도 앞에 0을 붙이지 않아요.

showLocalDate US 2025 May 1
    -- "5/1/2025"
showLocalDate JP 2025 May 1
    -- "2025年5月1日"

2. 시간을 보여줄 차례예요

showLocalTime : Locale -> Int -> Int -> String 함수를 정의해요. 이 함수는 (유효한) 현지 시간을 표시해요.

US 로케일에서는 시를 12시간 표기로 "PM" 또는 "AM"과 함께 보여 주고, 분은 앞에 0을 붙여서 보여 줘요.

JP 로케일에서는 시를 24시간 표기로 "時" 앞에 보여 주고, 분은 앞에 0을 붙이지 않고 "分" 앞에 보여 줘요.

showLocalTime US 13 8
    -- "1:08 PM"
showLocalTime JP 13 8
    -- "13時8分"

3. 시간대에 들어가 봐요

showDateTime : Locale -> Zone -> Posix -> String 함수를 정의해요. 이 함수는 특정 로케일에서 시간대를 기준으로 날짜와 시간을 표시해요.

showLocalDate와 showLocalTime을 사용해서 최종 결과를 표시해요.

showDateTime US Time.utc (Time.millisToPosix 0)
    -- "1/1/1970 12:00 AM"
showDateTime JP Time.utc (Time.millisToPosix 0)
    -- "1970年1月1日0時0分"
GitHub에서 편집 링크가 새 창이나 탭에서 열려요
Elm Exercism

Kuroko의 시계 문제를 시작해 볼 준비가 됐나요?

Exercism에 가입하고 Elm 트랙을 개념 28개연습 문제 110개, 그리고 실제 사람의 멘토링과 함께 배우고 익혀 보세요. 모두 무료예요.