🧙‍♂️ 05. 고급 타입 조작: 영수네 커뮤니티 권한 맵핑 흑마법

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 15분(전체) / 핵심 파트만: 8분

🗺️ 이 문서의 흐름
[typeof와 keyof의 진짜 의미] → [맵드 타입(Mapped Types)으로 노가다 탈출하기] → [조건부 타입(Conditional Types) 맛보기]

🎯 이 문서를 다 읽으면 할 수 있는 것

• 자바스크립트의 값(Value) 공간에서 활동하는 변수를 타입(Type) 공간으로 깔끔하게 끌어올릴 수 있다.
• 수십 개의 프로퍼티를 가진 객체 타입을 단 3줄의 코드로 일괄 변환(Mapped Type)할 수 있다.
• 5년 차 수준의 오픈소스 라이브러리 타입(Partial, Pick, Omit의 내부 원리)을 이해하고 직접 구현할 수 있다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 🐣 영철 ( 신입 ): "리드 님! 백엔드에서 사용자 프로필 정보(UserProfile)를 가져오는데, 가입할 때 쓰는 '수정 가능한 폼 데이터' 타입을 새로 만들어야 해요. 기존 UserProfile 복사해서 id 빼고 전부 boolean이나 optional로 하나하나 바꾸고 있는데 눈 빠지겠습니다."
• 🦁 영호 ( 리드 ): "영철 님, 개발자의 미덕은 넷플릭스를 볼 시간을 벌기 위해 중복 타이핑을 극도로 혐오하는 겁니다. 타입스크립트는 기존에 있는 타입을 이리저리 지지고 볶아서(Manipulation) 새로운 타입을 뚝딱 만들어내는 '흑마법'을 지원합니다. 오늘 그 마도서를 펼쳐보죠."

🤔 왜 알아야 하는가: '복사 붙여넣기'의 끝없는 늪

초보 시절의 타입스크립트는 "내가 만든 변수에 인터페이스 하나 달아주기" 정도면 충분합니다. 하지만 프로젝트가 커지면 "기존에 있는 A 타입을 아주 살짝만 바꿔서 B 타입을 만들고 싶다" 는 욕망이 끓어오릅니다.

영수네 커뮤니티의 권한 객체가 있다고 칩시다.

// 🐣 영철이의 복붙 노가다
interface UserProfile {
  id: number;
  name: string;
  email: string;
  age: number;
}
 
// 회원 정보 수정 폼을 위해 모든 필드를 선택적(Optional)으로 만들고 싶음
interface UserProfileUpdateForm {
  id?: number;
  name?: string;
  email?: string;
  age?: number;
}

나중에 영수(백엔드)가 UserProfile에 phoneNumber: string을 추가하면 어떻게 될까요?
네, 영철이는 또 야근하며 UserProfileUpdateForm을 찾아 phoneNumber?: string을 손수 적어 넣어야 합니다. 이런 짓을 막기 위해 5년 차 개발자들은 타입 조작(Type Manipulation) 을 무기로 삼습니다.

🪞 1. 값(Value)과 타입(Type)의 세계를 가로지르기: typeof & keyof

이 흑마법의 첫 단추는 JS 세상의 런타임 데이터와 TS 세상의 컴파일 타입을 자유자재로 넘나드는 연산자들입니다.

typeof: JS 변수에서 타입 뽑아오기

// JS의 값(Value) 세상
const ROLE_NAMES = {
  ADMIN: "최고 관리자",
  MANAGER: "게시판 관리자",
  USER: "일반 사용자"
};
 
// 🦁 영호: "저 객체의 모양표를 그대로 타입 세상으로 납치해 봅시다!"
type RoleMap = typeof ROLE_NAMES;
/*
결과:
type RoleMap = {
  ADMIN: string;
  MANAGER: string;
  USER: string;
}
*/

이 기법은 Redux의 초기 상태(initialState)나 공통 상수 객체에서부터 타이핑을 시작할 때 굉장히 유용합니다. JS 코드를 먼저 짜고, 그 위에 TS를 부드럽게 얹는 방식이죠.

keyof: 객체의 '키'들만 뽑아서 유니언으로 만들기

객체의 타입을 통째로 뽑는 게 typeof라면, 그 객체의 키(Key)값들만 빼곡히 뽑아내고 싶을 때는 keyof를 씁니다.

type UserKeys = keyof UserProfile;
// 결과: "id" | "name" | "email" | "age"
 
// 활용: 파라미터로 무조건 UserProfile의 키값 중 하나만 들어오도록 강제!
function getProperty(user: UserProfile, key: keyof UserProfile) {
  return user[key]; 
}
 
getProperty(myUser, "name"); // ✅ 통과
// getProperty(myUser, "password"); // ❌ 에러: password는 UserProfile의 키가 아닙니다!

🎨 2. 맵드 타입 (Mapped Types): 타입들의 대량 생산 공장

자, 이제 영철이의 야근 원흉이었던 복붙 문제를 해결해 봅시다.
배열을 돌 때 .map()을 쓰듯, 객체의 모든 키를 순회하며 속성을 일괄 변경하는 마법이 바로 맵드 타입입니다.

// 🦁 영호: "T라는 객체가 들어오면, 그 객체의 모든 키(K)를 순회하면서 옵셔널(?)을 붙여버려!"
 
type MakeOptional<T> = {
  [K in keyof T]?: T[K]; // 마법의 공식!
};
 
// 영철이의 구세주
type UserProfileUpdateForm = MakeOptional<UserProfile>;
/* 
결과:
type UserProfileUpdateForm = {
    id?: number | undefined;
    name?: string | undefined;
    email?: string | undefined;
    age?: number | undefined;
}
*/

이 패턴은 너무나도 많이 쓰여서, 타입스크립트가 아예 Partial<T> 라는 이름으로 내장 유틸리티 타입을 만들어 두었습니다. Readonly<T>, Pick<T, K>, Omit<T, K> 등 여러분이 쓰는 유용한 문법들이 전부 이 맵드 타입과 keyof로 만들어져 있습니다.

⚖️ 3. 조건부 타입 (Conditional Types): 타입에도 If문이 있다

때로는 삼항 연산자(A ? B : C)처럼 "이 타입이 저기를 만족하면 A를 반환하고, 아니면 B를 반환해!" 라는 로직이 필요할 때가 있습니다. (주로 라이브러리 제작자들이 많이 씁니다.)

// T가 문자열이면 숫자 타입을 반환하고, 아니면 그냥 문자열을 반환하라!
type NumberIfString<T> = T extends string ? number : string;
 
type Test1 = NumberIfString<"안녕">; // Test1은 number 타입이 됨
type Test2 = NumberIfString<boolean>; // Test2는 string 타입이 됨

실무에서는 이를 활용해 특정 타입만 필터링하거나 추출하는 데 씁니다. 예를 들어 위에서 만든 UserProfile에서 값이 string인 프로퍼티 키값만 뽑아내고 싶을 때 이런 조건부 흑마법을 조합할 수 있습니다. (초보자는 당장 몰라도 됩니다, 이것이 5년 차의 맛보기입니다!)

📝 마무리 퀴즈

Q1. 자바스크립트의 상수 파일(const COLORS = { RED: '#f00', BLUE: '#00f' })이 있을 때, 이 객체의 형태를 바탕으로 type ColorsType을 자동으로 만들어내고 싶습니다. 어떤 연산자를 사용해야 하나요?

✅ 정답: typeof 연산자를 사용합니다. (예: type ColorsType = typeof COLORS;)

💡 상세 해설:

• JS의 런타임 값으로부터 TS의 타입 구조를 추출(추론)할 때 첫 번째 관문이 바로 typeof 키워드입니다. 이렇게 하면 나중에 상수 객체에 GREEN: '#0f0'이 추가되더라도 ColorsType에 자동으로 GREEN이 포함되므로 유지보수가 극도로 편해집니다.

Q2. keyof 연산자를 배열(Array) 타입에 적용하면 어떤 결과가 반환될까요? (예: type ArrayKeys = keyof string[];)

✅ 정답: 배열의 인덱스인 number 형태와 배열 프로토타입에 있는 메서드 이름들("length" | "push" | "pop" | "map" 등...)이 통째로 유니언으로 반환됩니다.

💡 상세 해설:

• keyof는 객체의 "키"를 추출합니다. 배열 역시 자바스크립트에서는 인덱스(0, 1, 2...)를 키로 가지고 리스트 관련 메서드를 속성으로 갖는 거대한 객체입니다.
• 그래서 배열에 대고 keyof를 쓰면 사실상 우리가 원하는 깔끔한 데이터보다 내장 함수 이름이 쏟아져 나오게 되므로, 배열 내부 요소를 다룰 때는 T[number] 형태의 인덱스드 액세스(Indexed Access)를 더 자주 사용합니다.

Q3. [영철이의 테스트 타임: 라이브러리 트레이드오프] 영수네 커뮤니티의 API 공통 유틸 폴더를 보던 영철이가 깜짝 놀랍니다. "리드 님! TS 내장 유틸리티인 Partial<T>, Required<T>, Readonly<T> 같은 게 전부 내부 코드를 까보니 [P in keyof T] 라는 똑같은 문법으로 시작하네요? 이건 뭔가요?" 라고 묻는 영철에게 영호는 어떤 개념을 설명해 줄까요?

✅ 정답: "영철 님, 그게 바로 맵드 타입(Mapped Type)의 핵심 골격입니다. 객체의 키를 순회하며 속성을 일괄 조작하는 마법이죠."

💡 상세 해설:

• 원리 설명: [P in keyof T]는 마치 JS의 for...in 반복문처럼 작동합니다. T라는 객체의 모든 키(keyof T)를 하나씩 P라는 변수에 담아가면서, 그 결과물 타입을 옵셔널(?:), 읽기 전용(readonly), 또는 원래 타입(T[P]) 등으로 통째로 맵핑(Mapping)하는 게 바로 저 유우명한 유틸리티들의 민낯입니다.
• 오답 피드백: "이걸 모르면 평생 TS 개발자들이 만들어 준 유틸리티만 갖다 써야 합니다. 우리만의 비즈니스 로직(예: 모든 API 응답을 Nullable하게 만들기)이 필요할 때 직접 맵드 타입을 짤 줄 알아야 진정한 시니어가 되는 겁니다."
• 📌 핵심 기억법: 객체 타입의 일괄 노가다가 필요하다면? in keyof 맵드 타입 빙빙 돌리기!

🐣 영철이의 퇴근 일기

💡 "내 코드가 무식해 보일 때마다 기억하자. 타입스크립트에는 내가 하려는 노가다를 우아하게 한 큐에 끝내주는 흑마법이 존재한다."

와, typeof랑 keyof는 그냥 타입 구별하는 건 줄만 알았지 저렇게 기존 JS 데이터를 뜯어서 새로운 타입을 연성해 내는 연금술인 줄은 몰랐다.
오늘 Partial 내부 코드를 두 눈으로 확인하고 나니, 뭔가 보이지 않던 세상이 열린 기분이다. 내가 여태껏 복사 붙여넣기로 만들었던 그 수많은 폼 입력(Input) 포맷 인터페이스들이 주마등처럼 스쳐 지나간다...
내일은 출근하자마자 typeof로 상수 객체들 싹 다 타입으로 자동화시켜 놓고, Pick이랑 Omit 써서 쓸데없는 인터페이스들 날려버려야겠다. 아싸 야근 안 해도 된다! 치킨 시켜 먹어야지!!