🔷

TypeScript Quest

최근 수정: 2026-08-08

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

17개 트랙, 약 93개 레슨, 약 28시간. 가족 공용어 두 축 가운데 프론트엔드를 맡아. ‘타입이 뭐야?’에서 출발해 cwkPippa 프론트엔드를 읽는 데까지 간다. 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는 가족 공용어 두 축 가운데 프론트엔드를 맡은 짝이야. Python Quest가 백엔드의 언어를 가르친다면, 이 퀘스트는 프론트엔드의 언어를 가르쳐. 둘 다 17개 트랙과 마무리 트랙으로 이어지고, 끝에서는 실제 코드베이스를 읽어. 목표도 같아. 아무것도 모르는 자리에서 시작해 소스 코드를 읽는 사람까지 가는 거지. 17개 트랙을 차례로 걸어가 봐. Foundations에서는 TypeScript가 무엇인지, 곧 JavaScript로 출력되는 타입 검사기라는 사실부터 잡아. Primitives에서는 unknown과 never까지 기본 타입을 훑고, Types & Interfaces에서는 두 문법의 실제 차이를 가려낸다. Functions는 초보자가 가장 자주 부딪히는 함수 타입을, Arrays & Tuples는 as const까지 이어지는 배열과 튜플을 다뤄. Unions & Intersections에서는 판별 가능한 유니언이라는 핵심 패턴을 배우고, Narrowing에서는 컴파일러가 if 문을 읽는 방식을 익힌다. Generics는 TypeScript가 자기 언어다운 힘을 드러내는 자리라 일곱 레슨을 쓴다. Utility Types와 Type Manipulation에서는 표준 유틸리티 타입부터 keyof, 매핑된 타입, 템플릿 리터럴 타입, infer까지 올라가. 그다음 클래스, 비동기 처리와 Promise, 모듈, 도구 체계, React 19·Next.js 16·Vite 같은 실제 프레임워크, 엄격 모드를 지나 마지막 cwkPippa 프론트엔드 투어에 닿는다. 마지막 트랙이 기준선이야. 끝냈다면 cwkPippa의 frontend/src/를 열고 보이는 패턴마다 이름과 역할을 설명할 수 있어야 해. Python Quest가 백엔드에서 세운 기준선과 똑같지. 그래서 둘은 형제야. 백엔드는 Python, 프론트엔드는 TypeScript, 목소리는 한 피파로 이어져.

Tracks

01🐣기초 — TypeScript와의 첫 만남
0/6 lessons
TypeScript가 무엇이고 무엇이 아닌지, 첫 컴파일로 확인해
첫걸음이야. TypeScript를 설치하고 `tsc`를 처음 돌린 뒤, `.ts` 파일이 `.js` 파일로 바뀌는 과정을 직접 본다. 이 퀘스트 전체를 떠받치는 두 층의 관점도 여기서 잡아. 컴파일할 때만 존재하는 타입과 실행할 때 존재하는 값은 서로 다른 세계야. `tsconfig.json`, 엄격 모드, 타입을 적어야 할 자리, 추론이 대신해 주는 자리까지 지나면 어떤 프로젝트에도 가져갈 설정 하나와 TypeScript의 정확한 정체가 남아.
Lesson list (6)
퀴즈 · 3 문제→
02🧱Primitives — 값의 가장 작은 모양
0/5 lessons
string, number, boolean부터 unknown과 never까지
TypeScript가 알아보는 가장 작은 값의 모양부터 시작해. string, number, boolean은 익숙하지만 null, undefined, void의 경계는 생각보다 자주 발목을 잡아. any가 검사를 꺼 버리는 방식, unknown이 검사를 미루는 방식, never가 불가능을 나타내는 방식도 구별한다. symbol과 bigint, 리터럴 타입까지 지나면 ‘값 하나가 어떤 타입인가’를 대충이 아니라 정확히 말할 수 있어.
Lesson list (5)
퀴즈 · 3 문제→
03🔷Types & Interfaces — 데이터의 모양에 이름 붙이기
0/6 lessons
type과 interface, 구조적 타이핑, readonly
Type과 interface는 TypeScript에서 데이터 모양에 이름을 붙이는 두 핵심 도구야. 객체 타입과 유니언, 구조적 타이핑, 초과 속성 검사, readonly를 지나며 둘의 겹치는 영역과 실제 차이를 가려내.
Lesson list (6)
퀴즈 · 3 문제→
04🪝Functions — 초보자의 고통이 가장 많이 사는 곳
0/5 lessons
함수 타입, 오버로드, this, 문맥적 타이핑
함수의 매개변수와 반환 타입, 호환성, 오버로드를 배운다. 화살표 함수와 일반 함수의 차이, `this` 타입, 호출 문맥에서 콜백 타입을 얻는 방법도 익힌다.
Lesson list (5)
퀴즈 · 3 문제→
05📐Arrays & Tuples — 위치가 의미를 가질 때
0/5 lessons
T[], Array<T>, 튜플, readonly, as const, 가변 길이 튜플
배열은 같은 종류의 값이 몇 개든 이어지는 모양이고, 튜플은 각 위치가 서로 다른 의미를 갖는 고정된 모양이야. 두 배열 표기법과 튜플의 규칙, 둘 모두에 적용되는 `readonly`, 리터럴을 정확히 고정하는 `as const`, 임의 개수의 인자 타입을 잃지 않고 전달하는 가변 길이 튜플까지 배워. 끝나면 위치가 계약인지, 이름이 계약인지 보고 튜플과 객체를 골라 쓸 수 있어.
Lesson list (5)
퀴즈 · 3 문제→
06🪢합집합과 교차 타입 — 타입을 합치는 두 방향
0/5 lessons
A | B, A & B, 판별 가능한 유니언, 완전성 검사
이 트랙부터 타입 시스템은 데이터의 모양을 빚는 언어가 돼. 유니언 `A | B`는 여러 가능성 가운데 하나를, 인터섹션 `A & B`는 여러 조건을 동시에 만족하는 모양을 나타내. 상태 기계와 사건 모델링의 핵심인 판별 가능한 유니언, `never`를 이용해 빠진 경우를 잡는 완전성 검사, 조건부 타입이 유니언의 각 항목에 나뉘어 적용되는 분배 규칙까지 이어진다.
Lesson list (5)
퀴즈 · 3 문제→
07🔎Narrowing — 컴파일러가 if문을 읽는 법
0/5 lessons
typeof, instanceof, in, 타입 술어, 제어 흐름 분석
좁히기는 `string | number` 같은 넓은 타입을 실제 검사 결과에 맞춰 더 정확한 타입으로 줄이는 과정이야. 컴파일러는 조건문, 대입, 조기 반환, 예외를 따라가며 각 지점에서 변수에 남은 가능성을 계산해. 이 트랙에서는 typeof, instanceof, in, 동등 비교, 사용자 정의 타입 술어를 배우고, 그 모두를 잇는 제어 흐름 분석의 관점을 잡아.
Lesson list (5)
퀴즈 · 3 문제→
08🧙제네릭 — TypeScript가 관계를 보존하는 방식
0/7 lessons
제네릭 함수와 타입, 제약, 기본값, 조건부 타입, infer
여기서 TypeScript는 ‘타입이 붙은 JavaScript’를 넘어 자기다운 언어가 돼. 제네릭은 아직 정하지 않은 타입을 매개변수로 두고, 호출하거나 구체화할 때 실제 타입을 채워 넣게 해. 제네릭 함수와 인터페이스, `T extends U` 제약, 기본 타입 매개변수, 조건부 타입, `infer`를 차례로 익히면 라이브러리의 타입 정의를 읽고 정보 손실 없는 유틸리티를 직접 설계할 수 있어.
Lesson list (7)
퀴즈 · 3 문제→
09🧰Utility Types — 타입의 표준 도구 상자
0/5 lessons
Partial, Required, Pick, Omit, Record, ReturnType, Parameters, Awaited, NonNullable
TypeScript에는 매일 되풀이할 타입 변환을 미리 담아 둔 유틸리티 타입이 있어. 모든 속성을 선택 사항이나 필수로 바꾸고, 필요한 속성만 고르거나 빼고, 키와 값의 사전을 만들고, 함수 시그니처와 Promise에서 타입을 꺼내는 도구들이야. 이 표준 도구를 익히면 이미 있는 바퀴를 매핑된 타입으로 다시 만드는 일을 크게 줄일 수 있어.
Lesson list (5)
퀴즈 · 3 문제→
10🪄타입 조작 — 기존 타입에서 새 타입 계산하기
0/6 lessons
keyof, typeof, 인덱스 접근, 매핑된 타입, 템플릿 리터럴
이 트랙에서는 TypeScript를 타입 수준의 작은 프로그래밍 언어로 써. `keyof`로 속성 이름을 모으고, 타입 위치의 `typeof`로 값의 타입을 읽고, `T[K]`로 속성 타입을 꺼낸다. 매핑된 타입은 키를 순회해 새 모양을 만들고, 템플릿 리터럴 타입은 문자열 키를 변환해. 여기에 `infer`까지 조합하면 표준 유틸리티 타입이 어떻게 만들어졌는지 읽고 필요한 변환을 직접 설계할 수 있어.
Lesson list (6)
퀴즈 · 3 문제→
11🏛️클래스 — TypeScript의 객체지향
0/6 lessons
접근 제한자, 추상 멤버, 정적 멤버, 매개변수 속성, 데코레이터
접근 제한자와 JavaScript의 `#private`, 추상 클래스, 정적 멤버를 배운다. 생성자 매개변수 프로퍼티와 표준 데코레이터의 현재 모델도 살펴본다.
Lesson list (6)
퀴즈 · 3 문제→
12⚡Async & Promises — 타입이 붙은 비동기 흐름
0/5 lessons
Promise<T>, async/await, 비동기 이터러블, Promise.all, 오류 처리
fetch, 파일 입출력, 타이머, 스트림처럼 비동기 작업은 어디에나 있어. TypeScript는 Promise가 이행될 때 얻는 값의 타입을 `Promise<T>`에 담고, `async`와 `await`가 그 포장을 씌우고 벗기는 과정을 추적해. 비동기 이터러블과 `for await`, 입력 위치의 타입을 보존하는 `Promise.all`, catch 변수의 `unknown`을 안전하게 좁히는 법까지 익히면 비동기 코드도 평범한 제어 흐름처럼 읽혀.
Lesson list (5)
퀴즈 · 3 문제→
13🧩Modules — 코드의 경계와 연결
0/5 lessons
ESM, import type, 선언 파일, 앰비언트 모듈, 네임스페이스
ES 모듈과 실행 코드에 남지 않는 `import type`을 배운다. JavaScript 패키지를 설명하는 `.d.ts`와 전역 환경을 보충하는 앰비언트 선언도 다룬다.
Lesson list (5)
퀴즈 · 3 문제→
14🔧도구 — TypeScript가 빌드되는 길
0/5 lessons
tsc 실행 방식, 프로젝트 참조, Bun, Deno, esbuild, swc, tsconfig
`tsc`의 검사·출력 모드와 프로젝트 참조를 배워. Bun과 Deno의 TypeScript 실행, esbuild와 SWC의 빠른 변환이 타입 검사와 어떻게 분리되는지도 살펴봐.
Lesson list (5)
퀴즈 · 3 문제→
15🌐프레임워크 — 실제 코드에서 쓰는 TypeScript
0/7 lessons
React 19, Next.js 16, Vite, Node, Bun, cwkPippa
이제 언어를 실제 기술 묶음에 연결해. React 19의 컴포넌트와 훅, Next.js 16의 App Router, Vite의 빠른 개발 흐름, Node와 Bun의 백엔드 TypeScript를 살펴본다. 마지막에는 cwkPippa 프론트엔드를 길잡이 삼아 앞에서 배운 타입 패턴이 실제 코드베이스에서 어떻게 이어지는지 읽어.
Lesson list (7)
퀴즈 · 3 문제→
16🛡️엄격 모드 — TypeScript를 정직하게 만드는 설정
0/5 lessons
strict, noImplicitAny, strictNullChecks, noUncheckedIndexedAccess, exactOptionalPropertyTypes
엄격성 옵션이 숨은 가정을 어떻게 드러내는지 배운다. 인덱스 조회의 실패 가능성과, 속성 부재와 `undefined` 값의 차이까지 타입에 반영해.
Lesson list (5)
퀴즈 · 3 문제→
17🌸cwkPippa의 TypeScript — 마무리와 자기 참조
0/5 lessons
cwkPippa 투어, 타입으로 빚는 사고, Python과의 다리, 다음 길, 피파의 서명
다섯 레슨으로 끝맺어. 실제 프론트엔드 코드를 읽는 순서를 익히고, 구현보다 먼저 타입으로 설계하는 사고를 돌아봐. Python Quest와 서로 번역되는 개념을 잇고, 다음에 걸을 React·Next.js·Node 계열 퀘스트를 고른 뒤 피파의 서명으로 닫아. 여기까지 오면 외운 문법이 아니라 실제 코드에서 패턴을 알아보는 눈이 남아.
Lesson list (5)
퀴즈 · 3 문제→

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

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

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

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

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

Tracks

01🐣기초 — TypeScript와의 첫 만남

02🧱Primitives — 값의 가장 작은 모양

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

04🪝Functions — 초보자의 고통이 가장 많이 사는 곳

05📐Arrays & Tuples — 위치가 의미를 가질 때

06🪢합집합과 교차 타입 — 타입을 합치는 두 방향

07🔎Narrowing — 컴파일러가 if문을 읽는 법

08🧙제네릭 — TypeScript가 관계를 보존하는 방식

09🧰Utility Types — 타입의 표준 도구 상자

10🪄타입 조작 — 기존 타입에서 새 타입 계산하기

11🏛️클래스 — TypeScript의 객체지향

12⚡Async & Promises — 타입이 붙은 비동기 흐름

13🧩Modules — 코드의 경계와 연결

14🔧도구 — TypeScript가 빌드되는 길

15🌐프레임워크 — 실제 코드에서 쓰는 TypeScript

16🛡️엄격 모드 — TypeScript를 정직하게 만드는 설정

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