JavaScript 코딩 실습 랩

TypeScript 기초 학습 – 배우고 바로 푸는 8단계 루틴

Coding Learning Lab기초 학습부터 실습 채점까지

TypeScript 기초 학습

타입을 배우고 바로 실무형 문제로 확인하는 8단계 루틴

TypeScript는 문법 암기가 아니라 데이터와 함수의 약속을 코드에 고정하는 도구입니다. 함수 타입, 객체 타입, 유니온, 제네릭, 유틸리티 타입을 짧게 확인하고 바로 문제로 연결합니다.

학습 시작 첫 문제 풀기
8기초 모듈
30연결된 TypeScript 문제
30분첫 회독 목표
01함수 파라미터 타입 지정

TypeScript가 막아주는 실수

TypeScript는 실행 전에 값의 모양과 사용 방식을 검사해 자주 나는 실수를 줄입니다.

핵심타입은 코드에 붙이는 설명이 아니라, 함수와 데이터가 지켜야 할 계약입니다.
실무 예API 응답 타입, 폼 데이터 타입, 상태값 타입처럼 화면과 서버 사이의 약속을 고정할 때 사용합니다.
주의타입은 런타임 검증을 대신하지 않습니다. 외부 입력은 서버와 실행 코드에서도 검증해야 합니다.
function add(a: number, b: number): number {
  return a + b;
}
바로 확인 문제
함수 파라미터 타입 지정 문제를 풀면서 타입이 어떤 실수를 줄이는지 확인하세요.
추천 문제: 함수 파라미터 타입 지정바로 문제 풀기
02사용자 객체 타입 만들기

객체 타입과 interface

API 응답, 사용자 정보, 상품 정보처럼 반복해서 쓰는 객체 구조를 타입으로 고정합니다.

핵심객체 타입은 화면 코드가 기대하는 필드를 명확하게 만들고 오타를 줄입니다.
실무 예API 응답 타입, 폼 데이터 타입, 상태값 타입처럼 화면과 서버 사이의 약속을 고정할 때 사용합니다.
주의타입은 런타임 검증을 대신하지 않습니다. 외부 입력은 서버와 실행 코드에서도 검증해야 합니다.
type User = {
  id: number;
  name: string;
  isActive: boolean;
};
바로 확인 문제
사용자 객체 타입 만들기 문제를 풀면서 타입이 어떤 실수를 줄이는지 확인하세요.
추천 문제: 사용자 객체 타입 만들기바로 문제 풀기
03선택 속성 처리

선택 속성과 없을 수 있는 값

실무 데이터에는 비어 있는 값이 많습니다. 선택 속성은 그 가능성을 코드에 드러냅니다.

핵심값이 없을 수 있다면 타입에서 먼저 표현하고, 화면에서는 기본값이나 분기 처리를 준비합니다.
실무 예API 응답 타입, 폼 데이터 타입, 상태값 타입처럼 화면과 서버 사이의 약속을 고정할 때 사용합니다.
주의타입은 런타임 검증을 대신하지 않습니다. 외부 입력은 서버와 실행 코드에서도 검증해야 합니다.
type Profile = {
  id: number;
  nickname?: string;
};
바로 확인 문제
선택 속성 처리 문제를 풀면서 타입이 어떤 실수를 줄이는지 확인하세요.
추천 문제: 선택 속성 처리바로 문제 풀기
04Union 타입으로 상태 제한

Union 타입으로 상태 제한

문자열 상태값을 아무 값이나 쓰게 두면 오타가 버그가 됩니다.

핵심유니온 타입은 가능한 값을 좁혀서 로딩, 성공, 에러 같은 상태를 안전하게 관리합니다.
실무 예API 응답 타입, 폼 데이터 타입, 상태값 타입처럼 화면과 서버 사이의 약속을 고정할 때 사용합니다.
주의타입은 런타임 검증을 대신하지 않습니다. 외부 입력은 서버와 실행 코드에서도 검증해야 합니다.
type RequestStatus = "idle" | "loading" | "success" | "error";
바로 확인 문제
Union 타입으로 상태 제한 문제를 풀면서 타입이 어떤 실수를 줄이는지 확인하세요.
추천 문제: Union 타입으로 상태 제한바로 문제 풀기
05타입 좁히기

타입 좁히기

여러 타입이 들어올 수 있는 값은 사용하기 전에 typeof 같은 검사로 좁혀야 합니다.

핵심타입을 좁히면 TypeScript가 해당 분기 안에서 사용할 수 있는 메서드를 정확히 알려줍니다.
실무 예API 응답 타입, 폼 데이터 타입, 상태값 타입처럼 화면과 서버 사이의 약속을 고정할 때 사용합니다.
주의타입은 런타임 검증을 대신하지 않습니다. 외부 입력은 서버와 실행 코드에서도 검증해야 합니다.
function getSize(value: string | number): number {
  if (typeof value === "string") return value.length;
  return value;
}
바로 확인 문제
타입 좁히기 문제를 풀면서 타입이 어떤 실수를 줄이는지 확인하세요.
추천 문제: 타입 좁히기바로 문제 풀기
06배열 타입 지정

배열과 객체 목록 타입

목록 화면은 대부분 객체 배열을 map, filter로 가공합니다. 배열 안의 타입이 중요합니다.

핵심Product[]처럼 배열 요소의 모양을 정하면 map 내부에서 자동완성과 오류 검사가 안정됩니다.
실무 예API 응답 타입, 폼 데이터 타입, 상태값 타입처럼 화면과 서버 사이의 약속을 고정할 때 사용합니다.
주의타입은 런타임 검증을 대신하지 않습니다. 외부 입력은 서버와 실행 코드에서도 검증해야 합니다.
type Product = { id: number; name: string };
function getProductNames(products: Product[]): string[] {
  return products.map(product => product.name);
}
바로 확인 문제
배열 타입 지정 문제를 풀면서 타입이 어떤 실수를 줄이는지 확인하세요.
추천 문제: 배열 타입 지정바로 문제 풀기
07API 응답 제네릭 만들기

제네릭으로 API 응답 재사용

목록, 상세, 검색 응답은 구조는 같고 data 타입만 다른 경우가 많습니다.

핵심제네릭은 같은 구조를 유지하면서 데이터 타입만 바꿔 쓰게 해주는 도구입니다.
실무 예API 응답 타입, 폼 데이터 타입, 상태값 타입처럼 화면과 서버 사이의 약속을 고정할 때 사용합니다.
주의타입은 런타임 검증을 대신하지 않습니다. 외부 입력은 서버와 실행 코드에서도 검증해야 합니다.
type ApiResponse = {
  data: T | null;
  error: string | null;
};
바로 확인 문제
API 응답 제네릭 만들기 문제를 풀면서 타입이 어떤 실수를 줄이는지 확인하세요.
추천 문제: API 응답 제네릭 만들기바로 문제 풀기
08Pick으로 필요한 필드만 사용

유틸리티 타입으로 실무 타입 다듬기

Pick, Record, Readonly 같은 유틸리티 타입은 기존 타입을 복사하지 않고 목적에 맞게 바꿉니다.

핵심타입을 중복 작성하지 않으면 API 변경이나 필드 변경에 강한 코드가 됩니다.
실무 예API 응답 타입, 폼 데이터 타입, 상태값 타입처럼 화면과 서버 사이의 약속을 고정할 때 사용합니다.
주의타입은 런타임 검증을 대신하지 않습니다. 외부 입력은 서버와 실행 코드에서도 검증해야 합니다.
type User = { id: number; name: string; email: string; role: string };
type UserSummary = Pick;
바로 확인 문제
Pick으로 필요한 필드만 사용 문제를 풀면서 타입이 어떤 실수를 줄이는지 확인하세요.
추천 문제: Pick으로 필요한 필드만 사용바로 문제 풀기

다음 단계

이 페이지를 한 번 훑은 뒤 TypeScript 30문제를 순서대로 풀어보세요. 기본 타입부터 제네릭, 유틸리티 타입, 폼/이벤트 타입까지 실무에서 자주 만나는 패턴을 이어서 연습할 수 있습니다.

TypeScript 문제 시작 JavaScript 기초 복습