열거형
코드의 명확성을 높이는 열거형 사용법을 배워 보세요
열거형은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
열거형
열거형
다음 수업에 오신 것을 환영합니다! 이번 수업에서는 TypeScript의 열거형에 대해 배우겠습니다. 열거형을 사용하면 이름이 지정된 상수 집합을 정의할 수 있어 코드의 가독성이 높아지고 관리하기 쉬워집니다. 자세히 알아봅시다!
열거형이란?
열거형이란?
열거형(enumeration을 줄여서 부르는 말)은 이름이 지정된 상수 집합을 정의할 수 있는 데이터 타입입니다. 열거형은 관련된 값들을 하나로 묶어 코드를 더 체계적으로 만들고 오류가 발생할 가능성을 줄이는 데 사용됩니다.
예시: 요일은 Days 열거형을 사용해 나타낼 수 있습니다.
과제: 연중 월을 나타내는 열거형을 만들고 몇 가지 값을 로그로 기록해 보세요.
enum Days {
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday,
Sunday,
}
console.log(Days.Monday); // Output: 0
console.log(Days.Friday); // Output: 4
숫자형 열거형
숫자형 열거형
TypeScript의 열거형은 기본적으로 숫자형이며 0부터 시작합니다. 필요한 경우 열거형 멤버에 사용자 지정 값을 할당할 수 있습니다.
과제: 사용자 역할(예: 관리자, 편집자, 뷰어)을 나타내는 열거형을 정의하고 사용자 지정 숫자값을 지정해 보세요.
enum Status {
Active = 1,
Inactive = 2,
Pending = 3,
}
console.log(Status.Active); // Output: 1
console.log(Status.Pending); // Output: 3
역방향 매핑
역방향 매핑
TypeScript 열거형은 역방향 매핑을 지원하므로 값으로부터 열거형 멤버의 이름을 가져올 수 있습니다.
과제: 직접 만든 열거형을 사용해 역방향 매핑을 실험해 보세요.
enum Colors {
Red = 1,
Green,
Blue,
}
console.log(Colors[1]); // Output: "Red"
console.log(Colors[2]); // Output: "Green"
문자열 열거형
문자열 열거형
TypeScript는 각 열거형 멤버에 문자열 값을 할당하는 문자열 열거형도 지원합니다.
과제: 기본 색상(예: 빨간색, 초록색, 파란색)을 나타내는 문자열 열거형을 만들어 보세요.
enum Directions {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
console.log(Directions.Up); // Output: "UP"
console.log(Directions.Left); // Output: "LEFT"
혼합형 열거형
혼합형 열거형
열거형에는 숫자값과 문자열 값을 모두 포함할 수 있지만, 일관성을 위해 일반적으로 권장되지 않습니다.
과제: 혼합형 열거형을 정의하고 편집기에서 그 동작을 관찰해 보세요.
enum Mixed {
Yes = 1,
No = "NO",
}
console.log(Mixed.Yes); // Output: 1
console.log(Mixed.No); // Output: "NO"
함수에서 열거형 사용하기
함수에서 열거형 사용하기
열거형은 코드의 흐름을 제어하는 데 유용합니다. 예시는 다음과 같습니다.
과제: 열거형을 매개변수로 받아 메시지를 반환하는 함수를 작성해 보세요.
enum Status {
Active,
Inactive,
Pending,
}
function checkStatus(status: Status): string {
switch (status) {
case Status.Active:
return "The status is active.";
case Status.Inactive:
return "The status is inactive.";
case Status.Pending:
return "The status is pending.";
default:
return "Unknown status.";
}
}
console.log(checkStatus(Status.Active)); // Output: "The status is active."
흔히 하는 실수
흔히 하는 실수
열거형을 사용할 때 흔히 하는 실수는 다음과 같습니다.
- 문자열 열거형을 사용하면 코드가 더 명확해지는 상황에서 숫자형 열거형을 사용하는 것
- 하나의 열거형에서 숫자값과 문자열 값을 섞어 사용하는 것
- 이름이 지정된 상수를 사용하면 좋은 값에 열거형을 사용하지 않는 것
팁: 사용 사례에 따라 적절한 열거형 타입(숫자형 또는 문자열)을 선택하세요.
enum Fruits {
Apple = 1,
Banana,
Cherry,
}
console.log(Fruits.Banana);
잘하셨습니다!
잘하셨습니다!
축하합니다! TypeScript에서 열거형을 사용해 이름이 지정된 상수를 정의하는 방법을 배우셨습니다. 열거형은 코드를 더 읽기 쉽고 오류가 발생할 가능성이 낮게 만드는 강력한 방법입니다. 다음 수업에서는 TypeScript의 또 다른 고급 기능인 리터럴 타입을 살펴보겠습니다. 계속 코딩해 봅시다!
자주 묻는 질문
“열거형” 강의는 무료인가요?
네 — “열거형” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“열거형”에서 뭘 배우나요?
코드의 명확성을 높이는 열거형 사용법을 배워 보세요 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“열거형” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.