상대 시간과 복수형
RelativeTimeFormat과 PluralRules를 사용합니다.
상대 시간과 복수형은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
Intl.RelativeTimeFormat
Intl.RelativeTimeFormat은 사용자의 언어로 「3일 전」이나 「2시간 후」 같은 문구를 만듭니다.
const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-1, "day")); // "1 day ago"
console.log(rtf.format(2, "hour")); // "in 2 hours"과거는 음수, 미래는 양수
숫자의 부호가 방향을 정합니다. 음수는 과거를, 양수는 미래를 나타냅니다.
const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-3, "week")); // "3 weeks ago"
console.log(rtf.format(5, "minute")); // "in 5 minutes"numeric 옵션
numeric: "auto"는 「1일 전」 대신 「어제」나 「내일」 같은 자연스러운 표현을 사용합니다.
const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
console.log(rtf.format(-1, "day")); // "yesterday"
console.log(rtf.format(0, "day")); // "today"현지화된 상대 시간
로캘을 바꾸면 문구 전체가 자동으로 번역됩니다.
console.log(new Intl.RelativeTimeFormat("es").format(-2, "day")); // "hace 2 dias"
console.log(new Intl.RelativeTimeFormat("fr").format(3, "hour")); // "dans 3 heures"알맞은 단위 선택
실제 앱에서는 가장 적절한 큰 단위를 선택합니다. 차이를 초 단위로 계산한 다음 단위를 하나씩 낮춰 가세요.
function ago(date) {
const diff = (date - Date.now()) / 1000;
const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
if (Math.abs(diff) < 60) return rtf.format(Math.round(diff), "second");
if (Math.abs(diff) < 3600) return rtf.format(Math.round(diff / 60), "minute");
return rtf.format(Math.round(diff / 3600), "hour");
}
console.log(ago(new Date(Date.now() - 90000)));Intl.PluralRules
복수형 처리는 단순히 「s」를 붙이는 것 이상입니다. Intl.PluralRules는 언어별로 숫자를 "one"이나 "other" 같은 범주에 매핑합니다.
const pr = new Intl.PluralRules("en-US");
console.log(pr.select(1)); // "one"
console.log(pr.select(2)); // "other"
console.log(pr.select(0)); // "other"복수형 메시지 만들기
범주를 사용해 올바른 단어를 선택하세요.
const pr = new Intl.PluralRules("en-US");
const forms = { one: "item", other: "items" };
function label(n) { return n + " " + forms[pr.select(n)]; }
console.log(label(1)); // "1 item"
console.log(label(5)); // "5 items"형태가 더 많은 언어
많은 언어에는 여러 복수형 범주가 있습니다. 예를 들어 폴란드어는 "few"와 "many"를 구분하므로, 영어 방식으로 하드코딩한 로직은 올바르게 작동하지 않습니다.
const pr = new Intl.PluralRules("pl");
console.log(pr.select(1)); // "one"
console.log(pr.select(3)); // "few"
console.log(pr.select(5)); // "many"서수 복수형
type: "ordinal"을 전달하면 1번째, 2번째, 3번째 같은 서수에 사용할 범주를 얻을 수 있습니다.
const pr = new Intl.PluralRules("en-US", { type: "ordinal" });
const suffix = { one: "st", two: "nd", few: "rd", other: "th" };
function ordinal(n) { return n + suffix[pr.select(n)]; }
console.log(ordinal(1), ordinal(2), ordinal(3), ordinal(11)); // 1st 2nd 3rd 11th숫자와 결합하기
PluralRules를 NumberFormat과 함께 사용하면 완전히 현지화된 개수 메시지를 만들 수 있습니다.
const nf = new Intl.NumberFormat("en-US");
const pr = new Intl.PluralRules("en-US");
const forms = { one: "file", other: "files" };
function msg(n) { return nf.format(n) + " " + forms[pr.select(n)]; }
console.log(msg(1000)); // "1,000 files"Intl.ListFormat
참고로 Intl.ListFormat은 로캘에 맞는 접속사로 항목을 연결합니다.
const lf = new Intl.ListFormat("en-US", { type: "conjunction" });
console.log(lf.format(["red", "green", "blue"])); // "red, green, and blue"빠른 확인
상대 시간과 복수형을 테스트해 봅니다.
복습: 상대 시간과 복수형
RelativeTimeFormat으로 상대 시간을 형식화하고(numeric: "auto" 포함), 단위 기준을 선택하고, 여러 언어와 서수에서 PluralRules로 올바르게 복수형을 처리하고, ListFormat으로 목록을 연결했습니다. 다음 주제는 로캘을 고려한 정렬입니다.
자주 묻는 질문
“상대 시간과 복수형” 강의는 무료인가요?
네 — “상대 시간과 복수형” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“상대 시간과 복수형”에서 뭘 배우나요?
RelativeTimeFormat과 PluralRules를 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“상대 시간과 복수형” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.