Vue Academy · 강의

복수형 처리와 연결된 메시지

복수형 규칙의 @:key|@:key 구문, 수량에 따른 복수형과 @:path를 사용한 연결된 메시지를 익힙니다.

복수형 처리와 연결된 메시지은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

수 세기는 언어마다 다릅니다

“1 item”이지만 “5 items”인 것처럼 언어마다 형태가 다릅니다. 복수형을 코드에 직접 작성하면 “5 item(s)”처럼 어색한 문자열이 됩니다. Vue I18n에는 개수에 맞는 형태를 선택하는 복수형 처리 기능이 내장되어 있습니다.

파이프로 구분하는 복수형

하나의 메시지 문자열에 형태를 작성하고 파이프 문자(|)로 구분합니다. 영어에서는 일반적으로 두세 가지 형태를 사용합니다.

const en = {
  items: "no items | one item | {count} items",
}

개수로 복수형 선택하기

t의 두 번째 인수로 숫자를 전달합니다. Vue I18n은 개수에 따라 일치하는 형태를 선택합니다.

const { t } = useI18n()

t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"

기본 복수형 규칙

세 가지 형태가 있을 때 규칙은 다음과 같습니다. 0은 첫 번째, 1은 두 번째, 그 밖의 값은 세 번째 형태를 사용합니다. 두 가지 형태에서는 0과 여러 개가 하나로 합쳐집니다.

const en = {
  // two-form version: 0 and N share the plural
  files: "no file | one file | {count} files",
}

{count} 자리 표시자

복수형 메시지 안의 특수한 {count}(또는 {n}) 자리 표시자는 전달한 숫자로 채워지므로 수치를 표시할 수 있습니다.

const en = { photos: "no photos | {count} photo | {count} photos" }

t("photos", 3) // "3 photos"

템플릿에서 복수형 사용하기

템플릿에서는 스크립트에서와 마찬가지로 개수를 두 번째 인수로 전달하여 $t를 사용합니다.

<template>
  <p>{{ $t("items", cartCount) }}</p>
</template>

개수와 이름 있는 값 결합하기

개수와 값 객체를 함께 전달하면 개수와 이름 있는 자리 표시자를 모두 사용할 수 있습니다.

const en = { greeting: "Hi {name}, no messages | Hi {name}, {count} messages" }

t("greeting", 2, { named: { name: "Ada" } })
// or per API: t("greeting", { name: "Ada" }, 2)

연결된 메시지란 무엇인가요?

중복을 피하기 위해 한 번역 안에 다른 번역을 삽입해야 할 때가 있습니다. 연결된 메시지는 @: 구문으로 다른 키를 참조합니다.

const en = {
  brand: "Acme",
  welcome: "Welcome to @:brand",
}

연결 해석하기

welcome을 번역할 때 @:brand 토큰은 brand의 번역된 값으로 대체됩니다. brand를 한 번만 변경하면 연결된 모든 메시지가 업데이트됩니다.

t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect it

중첩 키 연결하기

연결은 점으로 구분된 중첩 키에서도 작동합니다. 여러 단어로 된 참조가 필요할 때는 괄호로 감쌉니다.

const en = {
  app: { name: "MyApp" },
  footer: "Thanks for using @:(app.name)",
}

연결에 수식자 사용하기

연결된 메시지는 @.upper와 같은 수식자를 지원하여 연결된 값을 변환합니다(대문자, 소문자, 첫 글자 대문자).

const en = {
  brand: "acme",
  banner: "@.upper:brand sale!", // "ACME sale!"
}

빠른 확인

복수형과 연결에 대한 이해도를 확인하십시오.

복습

복수형과 메시지 재사용 방법을 배웠습니다.

|로 복수형을 구분합니다. "no items | one item | {count} items"와 같이 작성합니다.
t(key, count)에 개수를 전달하여 알맞은 형태를 선택합니다.
{count} 자리 표시자는 숫자를 표시합니다.
@:otherKey로 다른 키를 연결된 메시지에서 재사용하고, 중첩 키에는 @:(nested.key)를 사용합니다.
@.upper와 같은 수식자는 연결된 값을 변환합니다.

자주 묻는 질문

“복수형 처리와 연결된 메시지” 강의는 무료인가요?

네 — “복수형 처리와 연결된 메시지” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“복수형 처리와 연결된 메시지”에서 뭘 배우나요?

복수형 규칙의 @:key|@:key 구문, 수량에 따른 복수형과 @:path를 사용한 연결된 메시지를 익힙니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“복수형 처리와 연결된 메시지” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기