PART 08. 미니 프로젝트 — 퀴즈 앱 만들기

지금까지 배운 내용을 하나의 프로젝트에 종합합니다. 순수 TypeScript와 DOM으로 퀴즈 앱을 만들어봅니다.

PART 07까지 오면서 TypeScript의 핵심을 대부분 배웠습니다. 기본 타입, 인터페이스, 함수 타이핑, 타입 좁히기, 제네릭, 그리고 모듈과 프로젝트 구조까지. 하지만 각각의 개념을 개별 예제로 익히는 것과, 실제 프로젝트에서 조합해서 쓰는 것은 다릅니다.

이 파트에서는 그 조합을 직접 해봅니다.

만들 것은 퀴즈 앱입니다. 5개의 질문을 화면에 순서대로 보여주고, 사용자가 선택지를 클릭하면 정답 여부를 확인하고, 마지막에 최종 점수를 보여줍니다. React나 Vue 같은 프레임워크 없이 순수 TypeScript와 브라우저 DOM API만 씁니다.

"왜 프레임워크를 안 쓰나요?"라고 물을 수 있습니다. 프레임워크는 많은 것을 추상화합니다. 이 파트에서는 TypeScript가 실제로 어떻게 DOM과 상호작용하는지, 타입 시스템이 어디서 도움을 주는지 직접 눈으로 보는 것이 목적입니다. 프레임워크가 없으면 TypeScript의 역할이 더 선명하게 드러납니다.

이 파트의 구성은 다음과 같습니다.

• Ch 01. 프로젝트 설계와 타입 정의: 코드를 한 줄도 쓰기 전에 타입부터 설계합니다. TypeScript적 사고방식을 실전에 적용합니다.
• Ch 02. 퀴즈 데이터 모델링: Question, QuizState 같은 타입을 구체화하고 샘플 데이터를 채웁니다.
• Ch 03. 게임 로직 구현: QuizEngine 클래스를 만들어 퀴즈 진행 로직을 캡슐화합니다.
• Ch 04. HTML과 연결하기: DOM API를 타입 안전하게 다루는 방법을 배웁니다.
• Ch 05. 완성과 리팩터링: 코드를 정리하고, 이 프로젝트에서 쓴 TypeScript 패턴을 되돌아봅니다.

프로젝트를 완성하고 나면 하나의 감각이 생깁니다. "TypeScript로 설계한다는 게 무엇인지"를 몸으로 이해하게 됩니다.