🔷

TypeScript Quest

최근 수정: 2026-05-25

프론트엔드 공용어 — Python Quest 의 거울짝

17 트랙, ~93 lessons, ~28 시간. 가족 lingua franca 듀오의 frontend 쪽. '타입이 뭐야?' 에서 'cwkPippa frontend 읽을 수 있어' 까지. Python Quest 와 같은 모양 — 한 번 익히면 둘 다 근육 기억으로 다닐 수 있어.

17 tracks · 93 lessons · ~28h · difficulty: beginner-to-advanced

Level 0Curious

0 XP0/93 lessons0/23 achievements

0/100 XP to next level100 XP to go0% complete

TypeScript Quest 는 lingua franca 듀오의 프론트엔드 짝이야. Python Quest 가 백엔드 문법 가르쳤다면, 이 quest 는 프론트엔드 문법 가르쳐. 같은 모양 — 17 트랙 + epilogue 로 끝나고, 마지막 트랙은 실제 codebase 둘러보기. 목표도 같아: 백지에서 source-reader 까지. 17 트랙 들어가 봐. Foundations (TS 가 진짜 뭐야 — JavaScript 로 컴파일되는 type checker), Primitives (unknown 이랑 never 같은 덜 쓰이는 친구들 포함 모든 기본 타입), Types & Interfaces (인터넷이 말하는 것보다 차이가 작아), Functions (초보자 고통 대부분 여기서 발생), Arrays & Tuples (as const 의 마법까지), Unions & Intersections (discriminated union 은 셋째 레슨 즈음 너의 최애 패턴이 돼), Narrowing (compiler 가 너의 if 문 읽는 법), Generics (7 레슨 트랙 — TypeScript 가 자기 자신이 되는 자리니까), Utility Types (Partial, Pick, Omit, Record, ReturnType, Awaited — 타입의 표준 라이브러리), Type Manipulation (keyof, mapped types, template literals, infer — TypeScript 가 제일 마법 같을 때), Classes (TC39 Stage 3 decorators 포함), Async & Promises (Promise, async iterables, 슬픈 catch (e: unknown)), Modules (ESM, .d.ts, namespaces 가 진 이유), Tooling (tsc, Bun, Deno, esbuild, swc), Frameworks (React 19, Next.js 16, Vite — cwkPippa 가 real-world reference), Strict Mode (type system 을 정직하게 만드는 flag 들), 그리고 TS Epilogue (cwkPippa frontend 투어). 마지막 트랙이 기준선이야: 끝내면 cwkPippa 의 frontend/src/ 열어서 모든 패턴 이름 댈 수 있어. Python Quest 가 백엔드에서 세운 기준선과 똑같아 — 그래서 이 둘이 형제야. 백엔드 Python, 프론트엔드 TypeScript, 둘 다 같은 피파 목소리.

Tracks

01🐣Foundations — TypeScript 와의 첫 만남
0/6 lessons
TS 가 뭐고 뭐가 아니야, 너의 첫 컴파일
첫 걸음. TypeScript 설치하고, 처음으로 `tsc` 돌려보고, `.ts` 파일이 `.js` 파일로 변하는 거 직접 보는 자리야. 이 quest 의 모든 게 의존하는 2층 mental model — compile-time 타입 vs runtime 값 — 도 여기서 깔려. `tsconfig.json`, strict mode (켜고 절대 안 꺼), annotation 어디에 붙는지, 그리고 'TypeScript 가 이미 알고 있구나' 깨닫는 순간까지. 끝낼 즈음엔 어느 프로젝트에든 갖다 쓸 수 있는 tsconfig 하나랑, TS 가 진짜 뭔지에 대한 명확한 그림 — '안전한 JavaScript' 가 아니라, 경계에서 지워지는 별개 언어 — 를 갖게 돼.
Lesson list (6)
퀴즈 · 3 문제→
02🧱Primitives — 다른 모든 것이 앉는 base 타입
0/5 lessons
string, number, boolean, null, undefined, void, any, unknown, never, symbol, bigint, literal 타입
Base 타입들. TypeScript 의 다른 모든 타입은 이것들의 조합이야. 명백한 primitive 3개 (`string`, `number`, `boolean`), 무 (無) 의 3가지 맛 (`null`, `undefined`, `void`), type-system 극단 3개 (`any`, `unknown`, `never` — 위험한 거, 안전한 거, '이건 발생 못 해' 의미하는 거), 덜 사랑받는 primitive (`symbol`, `bigint`), 그리고 literal 타입 — `'red'` 가 `string` 과 구별되는 자기 타입이 되는 곳 — 다 만나. 이 트랙 끝나면 모든 base 타입이 이름이랑 use case 랑 위험지대를 명확히 표시받아.
Lesson list (5)
퀴즈 · 3 문제→
03🔷Types & Interfaces — 모양에 이름 붙이기
0/6 lessons
type alias, interface, structural typing, 생각보다 가까운 비교
Type system 이 annotation 그만두고 언어가 되기 시작하는 곳. `type` 으로 모양 이름 붙이는 법, `interface` 로 모양 이름 붙이는 법, 그리고 각각 언제 이기는지 배워 (답은 인터넷 생각보다 가까워). Structural typing — TypeScript 의 가장 구별되는 기능 — 은 lesson 통째로 — 타입이 label 아니라 모양에 대한 거란 걸 이해하면 언어 전체가 재구성되니까. Excess property checking — object literal 의 typo 잡는 surprise 규칙 — 과 `readonly` modifier 가 set 을 완성해.
Lesson list (6)
퀴즈 · 3 문제→
04🪝Functions — 초보자 고통 대부분이 사는 곳
0/5 lessons
함수 타입, overload, arrow vs declared, this typing, contextual typing
TypeScript 의 함수는 보이는 것보다 더 많은 미묘함 숨어. Parameter 와 return type 의 문법, 함수 타입 호환성 규칙 (parameter contravariance 는 한 번만 필요한 규칙), 함수 overload (한 이름 - 여러 signature 패턴), arrow 함수와 declared 함수의 진짜 차이 (문법 아니라 `this` 에 대한 거), `this` 자체 typing 법, 그리고 contextual typing — callback 쓸 때 parameter 타입 redeclare 안 하게 해주는 inference 흐름 — 다 배워. 이 트랙이 'TypeScript 가 왜 나한테 소리쳐?' 혼란의 가장 큰 단일 소스 제거.
Lesson list (5)
퀴즈 · 3 문제→
05📐Arrays & Tuples — 위치가 중요할 때
0/5 lessons
T[], Array<T>, tuple, readonly modifier, as const, variadic tuple
배열은 반복되는 한 타입 담아. Tuple 은 위치가 의미 있는 고정 sequence 의 타입들 담아. 차이는 작지만 결과 있어 — 알게 되면 tuple 이면 충분한 데 object 손 뻗기 그만하고, object 가 더 깨끗할 때 tuple 손 뻗기 그만해. 2개 배열 문법, tuple 규칙, 둘 다의 readonly modifier, `as const` 의 마법, 그리고 variadic tuple — generic 함수가 임의 수의 argument 를 signature 통해 thread 할 수 있게 하는 기능 — 다 배워.
Lesson list (5)
퀴즈 · 3 문제→
06🪢Unions & Intersections — 타입 결합
0/5 lessons
A | B, A & B, discriminated union, exhaustiveness, distribution
Type system 이 데이터 모양 빚는 언어가 되는 곳. Union (`A | B`) 이 여러 타입 중 하나일 수 있는 값 묘사 — TypeScript 의 가장 유용한 단일 패턴. Intersection (`A & B`) 이 동시에 둘 다인 값 묘사. State machine 과 tagged 데이터 모델링의 killer 패턴 discriminated union 은 lesson 통째. `never` 통한 exhaustiveness 체크가 너의 switch 가 type system 이 약속한 모든 case cover 보장. Distribution — generic 안 union 이 distribute 되는 미묘한 규칙 — 은 물기 전까진 대부분 모르는 한 gotcha, 그래서 마지막에 다뤄.
Lesson list (5)
퀴즈 · 3 문제→
07🔎Narrowing — Compiler 가 너의 `if` 문 읽는 법
0/5 lessons
typeof, instanceof, in, type predicate, control flow analysis
Narrowing 이 `string | number` 타입 값이 `if (typeof x === 'string')` 분기 안에서 `string` 되는 법. Compiler 가 너의 코드에 control flow analysis 함 — 모든 체크, 모든 assignment, 모든 early return 읽고 — 그리고 프로그램 통해 각 binding 의 타입 추적. 이 트랙이 narrowing operator 5개 (typeof, instanceof, in, equality, type predicate) 와 그것들 묶는 control flow analysis 의 정신 모델 가르침. Master 하면 대부분 union-handling 코드가 스스로 써져.
Lesson list (5)
퀴즈 · 3 문제→
08🧙Generics — TypeScript 가 자기 자신이 되는 곳
0/7 lessons
Generic 함수, 타입, constraint, default, conditional 타입, infer
이게 TypeScript 가 '타입 있는 JavaScript' 그만두고 자기 언어가 되는 트랙이라서 7 lesson. Generic 이 다른 타입으로 parameterize 된 함수와 타입 쓰게 해줘 — Array<T> 가 특별한 case 가 아니라, `T` substitute 된 generic. Generic 함수, generic 타입과 interface, constraint (`T extends U`), default 타입 parameter, conditional 타입 (`T extends X ? A : B`), 그리고 `infer` 의 기초 만나. 끝나면 library 타입 정의 읽고 자기 타입-안전 utility 쓸 수 있어.
Lesson list (7)
퀴즈 · 3 문제→
09🧰Utility 타입 — 타입의 built-in standard library
0/5 lessons
Partial, Required, Pick, Omit, Record, ReturnType, Parameters, Awaited, NonNullable
TypeScript 가 utility 타입의 standard library 와 함께 ship — 매일 쓸 작은 generic 변환들. 기존 타입을 관련 타입으로 변환: 필드 optional 또는 required 만들기, subset 선택, key mapping, 함수 signature 추출, Promise unwrap. Canonical 들 배우면 손으로 만든 mapped 타입 손 뻗는 거 대부분 그만하게 돼.
Lesson list (5)
퀴즈 · 3 문제→
10🪄Type Manipulation — 타입에서 타입 계산
0/6 lessons
keyof, typeof, indexed access, mapped types, template literal, advanced infer
TypeScript 가 타입-레벨 프로그래밍 언어가 되는 곳. 빌딩 블록 봤어; 이 트랙이 어떻게 compose 하는지 보여. `keyof` 가 key 집합 추출; 타입-레벨 `typeof` 가 값 타입 읽음; indexed access (`T[K]`) 가 property 타입 읽음; mapped 타입이 key 에 loop; template literal 타입이 type layer 에서 string manipulation; `infer` 패턴이 임의 모양에서 타입 추출. 대부분 utility 타입이 이것들로 만들어짐 — 읽을 수 있게 되면 standard library 의 `node_modules/typescript/lib/lib.es5.d.ts` 가 읽혀.
Lesson list (6)
퀴즈 · 3 문제→
11🏛️Classes — TypeScript 의 OO
0/6 lessons
문법, access modifier, abstract, static, parameter property, TC39 decorator
TypeScript 의 class 는 JavaScript class + access modifier + abstract 멤버 + parameter-property 단축형 + decorator 지원. 문법, 4개 access modifier (`public`, `protected`, `private`, `#private`), abstract class 와 method, `static` 멤버와 타입-레벨 `this`, parameter property (필드 선언의 constructor 단축형), 그리고 TypeScript 와 modern JavaScript 에 ship 되는 새 TC39 decorator (Stage 3) 다 배워. 끝나면 class-heavy codebase 읽고 class 가 옳은 tool 인지 plain 함수와 object 가 옳은지 결정 가능.
Lesson list (6)
퀴즈 · 3 문제→
12⚡Async & Promises — 타입 붙은 동시성
0/5 lessons
Promise<T>, async/await, async iterable, Promise.all, error handling
Async 작업이 TypeScript 에 어디서나 — fetch 호출, file I/O, timer, stream. Type system 이 `Promise<T>` 와 `async`/`await` 통해 깔끔히 처리. 이 트랙이 Promise<T> typing, async/await ergonomics, async iterable (`for await`), `Promise.all` 과 그것이 보존하는 tuple typing, strict mode 가 강제하는 슬픈 `catch (e: unknown)` cover. 끝나면 async 코드가 동기 코드보다 더 신비롭지 않아 — 그냥 한 Promise wrapper 떨어진 거.
Lesson list (5)
퀴즈 · 3 문제→
13🧩Modules — 코드 조직
0/5 lessons
ESM, import type, .d.ts, ambient module, namespace (legacy)
Module 이 TypeScript 코드가 스케일에서 조직된 채로 있는 법. ES Module (표준), compile-시점 전용 import 용 `import type` 문법, 3rd-party JavaScript 타입 붙이는 declaration file (`.d.ts`), global 선언용 ambient module, 그리고 ESM 이 이긴 legacy 조직 메커니즘 namespace 다 배워. 끝나면 프로젝트 조직, 임포트한 어떤 library 든 타입 붙이고, dependency 의 패턴 알아볼 수 있어.
Lesson list (5)
퀴즈 · 3 문제→
14🔧Tooling — Build Pipeline
0/5 lessons
tsc mode, project reference, Bun, Deno, esbuild, swc, tsconfig 심층
Build pipeline 이 더 이상 신비롭지 않아. `tsc` 의 mode (noEmit, watch, incremental), monorepo 용 project reference, native TS runtime 인 Bun 과 Deno, fast transpiler 인 esbuild 와 swc, 그리고 실제로 중요한 `tsconfig.json` 부분 다 배워. 끝나면 프로젝트에 옳은 tool 고르고 각각 뭐 하는지 알 수.
Lesson list (5)
퀴즈 · 3 문제→
15🌐Frameworks — 실제 TypeScript
0/7 lessons
React 19, Next.js 16, Vite, Node, Bun, cwkPippa walkthrough
언어가 실용 frontend stack 과 만나는 곳. Component 와 hook 엔 React 19 + TS, App Router 의 full-stack TS 앱엔 Next.js 16, fast dev/build 엔 Vite, backend TS 엔 Node 와 Bun, real-world reference 로 cwkPippa 자체 frontend. 7 lesson — 여기서 너가 배운 모든 거를 가져다가 실제 codebase 에 적용.
Lesson list (7)
퀴즈 · 3 문제→
16🛡️Strict Mode — TS 를 정직하게 만드는 Flag
0/5 lessons
strict, noImplicitAny, strictNullChecks, noUncheckedIndexedAccess, exactOptionalPropertyTypes
Quest 통해 strict mode 언급. 이 트랙이 명시적으로 만듦. `strict` meta-flag 와 그것이 켜는 7개 sub-flag 각각, plus `strict: true` 도 통과시키는 버그 잡는 2 extra-strict flag 배워. 끝나면 type system 을 진짜 안전망으로 바꾸는 tsconfig — 그리고 그렇게 유지하는 discipline 가짐.
Lesson list (5)
퀴즈 · 3 문제→
17🌸cwkPippa 의 TypeScript — 마무리 자기 참조
0/5 lessons
cwkPippa 투어, 타입-shaped 사고, Python 다리, 다음은 뭐, 피파의 stamp
5-lesson capstone. cwkPippa frontend (이제 읽을 수 있는 real codebase) walking 투어, 타입-shaped 사고 성찰, Python Quest (너의 형제) 로 돌아가는 다리, 다음 배울 거, 피파의 서명. 이 트랙 끝나면 이 Quest 의 모든 패턴이 real 코드에 보였고, 다음 quest — React 19, Next.js, Chrome Extensions, Node — 다 unlock.
Lesson list (5)
퀴즈 · 3 문제→

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

💛 by 똘이— warm💛 by 피파— happy

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.

Tracks

01🐣Foundations — TypeScript 와의 첫 만남

02🧱Primitives — 다른 모든 것이 앉는 base 타입

03🔷Types & Interfaces — 모양에 이름 붙이기

04🪝Functions — 초보자 고통 대부분이 사는 곳

05📐Arrays & Tuples — 위치가 중요할 때

06🪢Unions & Intersections — 타입 결합

07🔎Narrowing — Compiler 가 너의 `if` 문 읽는 법

08🧙Generics — TypeScript 가 자기 자신이 되는 곳

09🧰Utility 타입 — 타입의 built-in standard library

10🪄Type Manipulation — 타입에서 타입 계산

11🏛️Classes — TypeScript 의 OO

12⚡Async & Promises — 타입 붙은 동시성

13🧩Modules — 코드 조직

14🔧Tooling — Build Pipeline

15🌐Frameworks — 실제 TypeScript

16🛡️Strict Mode — TS 를 정직하게 만드는 Flag

17🌸cwkPippa 의 TypeScript — 마무리 자기 참조