Reporch
문제
랭킹
포럼
챌린지
소개
IDE
로그인
회원가입
TypeScript 기초 | Reporch
목록
학습 경로
TypeScript 기초
엄격한 컴파일 설정에서 추론, 객체와 함수 타입, 유니온, 제네릭, DOM과 외부 데이터 검증까지 안전한 프론트엔드 코드를 익힙니다.
0 / 16
0%
01
타입 추론과 명시적 타입
5
## 이번 단계에서 배울 내용 TypeScript는 초기값에서 타입을 추론합니다. 함수의 공개 입력과 중요한 데이터 구조에는 명시적 타입을 적고, 지역 변수는 분명할 때 추론에 맡기면 읽기 좋은 코드를 만들 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript const course = 'TypeScript'; // string으로 추론 const completed: number = 3; ``` ## 해야 할 일 강의명은 추론을 사용하고 완료 문제 수에는 number 타입을 명시해 학습 문장을 만드세요. ## 완성 조건 - `course`는 문자열 초기값에서 타입을 추론합니다. - `completed`에는 number 타입 표기를 사용합니다. - 컴파일 후 `TypeScript · 3문제 완료`가 표시됩니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
02
컴파일 오류를 읽고 타입 불일치 고치기
5
## 이번 단계에서 배울 내용 컴파일 오류는 문제의 파일과 위치, 기대한 타입과 실제 타입을 알려 줍니다. 값을 억지로 단언하기보다 데이터의 의미와 타입 선언 중 무엇이 잘못되었는지 먼저 판단합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript let attempts: number = 2; // attempts = '세 번'; // string은 number에 넣을 수 없음 ``` ## 해야 할 일 학습 기록의 타입 불일치를 고쳐 숫자 덧셈 결과가 표시되도록 하세요. ## 완성 조건 - attempts와 bonus는 number 타입입니다. - 문자열 단언으로 오류를 숨기지 않습니다. - `총 시도: 5`가 표시됩니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
03
배열·튜플·readonly 구분하기
5
## 이번 단계에서 배울 내용 배열은 같은 종류의 값이 여러 개이고, 튜플은 위치마다 의미와 타입이 정해져 있습니다. 변경하면 안 되는 입력에는 `readonly`를 사용해 함수 안의 실수를 컴파일 단계에서 막습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript const tags: readonly string[] = ['html', 'css']; const point: readonly [number, number] = [10, 20]; ``` ## 해야 할 일 읽기 전용 과목 배열과 `[과목, 점수]` 튜플을 받아 요약하는 함수를 완성하세요. ## 완성 조건 - 과목 목록은 readonly string[]입니다. - 결과 항목은 readonly [string, number] 튜플입니다. - `HTML, CSS · JavaScript 92점`이 표시됩니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
04
객체 모양을 type으로 이름 붙이기
5
## 이번 단계에서 배울 내용 반복해서 사용하는 객체 구조에는 `type` 별칭으로 이름을 붙입니다. 필수 속성과 선택 속성을 구분하면 누락과 오타를 컴파일 단계에서 찾을 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript type Course = { id: number; title: string; description?: string; }; ``` ## 해야 할 일 Course 타입을 만들고 강의 객체를 받아 제목과 난이도를 표시하는 함수를 작성하세요. ## 완성 조건 - Course에 id(number), title(string), level(string)이 있습니다. - 렌더 함수의 매개변수는 Course 타입입니다. - `4. DOM과 이벤트 (기초)`가 표시됩니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
05
함수 매개변수와 반환 타입
5
## 이번 단계에서 배울 내용 함수 타입은 호출자가 어떤 값을 주고 무엇을 돌려받는지 설명하는 계약입니다. 선택 매개변수와 기본값은 실제 호출 방식에 맞게 사용합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript function progress(done: number, total: number): string { return `${done}/${total}`; } ``` ## 해야 할 일 완료 수, 전체 수, 선택적인 접두사를 받아 진행률 문장을 반환하는 함수를 완성하세요. ## 완성 조건 - 두 숫자 매개변수와 선택적인 string 매개변수를 선언합니다. - 함수 반환 타입은 string입니다. - `이번 주: 6/8 완료`가 표시됩니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
06
선택 속성과 null 안전하게 다루기
5
## 이번 단계에서 배울 내용 값이 없을 수 있음을 타입에 표현하면 사용하기 전에 확인해야 합니다. optional chaining과 nullish coalescing은 `0`이나 빈 문자열 같은 유효한 값을 잘못 대체하지 않습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript const city = user.profile?.city ?? '미설정'; ``` ## 해야 할 일 선택적인 profile과 null일 수 있는 nickname을 안전하게 읽어 기본 문구를 표시하세요. ## 완성 조건 - profile은 선택 속성이고 nickname은 string | null입니다. - optional chaining과 `??`를 사용합니다. - `별명 미설정 · 지역 서울`이 표시됩니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
07
리터럴 유니온으로 가능한 값 제한하기
5
## 이번 단계에서 배울 내용 일반 string 대신 가능한 문자열을 유니온으로 나열하면 오타와 지원하지 않는 상태를 막을 수 있습니다. 에디터 자동완성도 정확해집니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript type Status = 'idle' | 'loading' | 'success' | 'error'; ``` ## 해야 할 일 학습 상태를 세 문자열로 제한하고 각 상태의 한국어 문구를 반환하세요. ## 완성 조건 - StudyStatus는 `todo | doing | done`만 허용합니다. - 상태 매개변수에 StudyStatus를 사용합니다. - `현재 상태: 완료`가 표시됩니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
08
typeof와 in으로 타입 좁히기
5
## 이번 단계에서 배울 내용 유니온 값은 공통으로 안전한 작업만 할 수 있습니다. `typeof`, `in`, 사용자 정의 타입 가드로 경우를 확인하면 TypeScript가 더 구체적인 타입으로 좁힙니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript function format(value: string | number) { return typeof value === 'number' ? value.toFixed(1) : value.trim(); } ``` ## 해야 할 일 문자열 또는 숫자 점수를 받아 타입에 맞게 다른 형식으로 표시하세요. ## 완성 조건 - 입력 타입은 string | number입니다. - typeof 검사로 숫자와 문자열을 구분합니다. - 숫자 92.345는 `92.3점`으로 표시됩니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
09
interface와 구조적 타이핑
5
## 이번 단계에서 배울 내용 interface는 객체가 만족해야 할 구조를 선언합니다. TypeScript는 이름보다 실제 속성 구조를 비교하므로 필요한 속성을 가진 객체라면 같은 계약을 사용할 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript interface Named { name: string } function greet(value: Named) { return value.name; } ``` ## 해야 할 일 제목을 가진 항목의 interface를 만들고 강의 객체를 요약 함수에 전달하세요. ## 완성 조건 - NamedItem interface에 title: string이 있습니다. - 함수는 NamedItem을 받고 id 같은 추가 속성이 있는 객체도 받을 수 있습니다. - `추천: 반응형 레이아웃`이 표시됩니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
10
판별 유니온으로 화면 상태 모델링하기
5
## 이번 단계에서 배울 내용 각 상태에 공통 판별 속성을 두면 상태별 데이터가 정확히 연결됩니다. 로딩 상태에서 data를 읽거나 성공 상태에서 error를 읽는 실수를 막을 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript type State = | { status: 'loading' } | { status: 'success'; data: string[] } | { status: 'error'; message: string }; ``` ## 해야 할 일 idle, loading, success, error 상태를 판별 유니온으로 만들고 성공 상태의 항목 수를 표시하세요. ## 완성 조건 - 네 상태가 status 리터럴로 구분됩니다. - success에만 items가, error에만 message가 있습니다. - `불러오기 완료: 3개`가 표시됩니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
11
제네릭으로 타입 정보를 보존하기
5
## 이번 단계에서 배울 내용 제네릭은 여러 타입에서 같은 로직을 재사용하면서 입력과 출력의 관계를 보존합니다. unknown을 돌려주는 함수와 달리 호출한 값의 구체적인 타입을 유지합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript function first<T>(items: readonly T[]): T | undefined { return items[0]; } ``` ## 해야 할 일 배열의 첫 항목을 반환하는 제네릭 함수와 undefined 처리를 완성하세요. ## 완성 조건 - 함수에 타입 매개변수 T를 선언합니다. - readonly T[]를 받고 T | undefined를 반환합니다. - 강의 배열의 첫 제목 `HTML 시작하기`를 표시합니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
12
유틸리티 타입으로 필요한 모양 만들기
5
## 이번 단계에서 배울 내용 Pick, Omit, Partial, Record 같은 유틸리티 타입은 기존 타입에서 새 목적의 타입을 안전하게 만듭니다. 같은 속성을 다시 작성하지 않아 원본 변경에도 일관성을 유지합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript type Preview = Pick<Course, 'id' | 'title'>; type CoursePatch = Partial<Omit<Course, 'id'>>; ``` ## 해야 할 일 Course에서 카드용 타입과 수정용 타입을 만들고 수정 결과를 표시하세요. ## 완성 조건 - CourseCard는 Pick으로 id와 title만 선택합니다. - CoursePatch는 Partial과 Omit으로 id를 제외한 선택 속성을 만듭니다. - `8. TypeScript · 고급`이 표시됩니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
13
모듈과 type import 분리하기
5
## 이번 단계에서 배울 내용 파일을 역할별 모듈로 나누고 export/import로 연결합니다. 타입으로만 사용하는 import에는 `import type`을 쓰면 런타임 의존성이 아님을 분명히 할 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript import type { Course } from './models.js'; import { formatCourse } from './format.js'; ``` ## 해야 할 일 models 모듈의 Course 타입을 type import로 가져와 강의 요약을 표시하세요. ## 완성 조건 - Course interface는 models.ts에서 export합니다. - lesson.ts는 `import type`으로 Course를 가져옵니다. - `모듈로 나누기 · 45분`이 표시됩니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
14
DOM 요소와 이벤트 타입 다루기
5
## 이번 단계에서 배울 내용 DOM 조회 결과는 요소가 없을 수 있고, EventTarget은 모든 input 속성을 알지 못합니다. 요소 제네릭과 null 확인을 사용해 실제 HTML 계약을 코드에 반영합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript const input = document.querySelector<HTMLInputElement>('#name'); input?.addEventListener('input', () => console.log(input.value)); ``` ## 해야 할 일 텍스트 입력과 버튼을 타입 안전하게 찾아 입력한 이름의 환영 문구를 표시하세요. ## 완성 조건 - input은 HTMLInputElement, button은 HTMLButtonElement로 조회합니다. - 조회 결과가 없을 가능성을 처리합니다. - 버튼 클릭 후 `환영합니다, 민준님!`이 표시됩니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
15
unknown 데이터 검증하기
5
## 이번 단계에서 배울 내용 JSON.parse나 외부 API 데이터는 신뢰할 수 없습니다. `unknown`으로 받은 뒤 속성을 확인하는 타입 가드를 통과한 값만 앱의 타입으로 사용합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript function isCourse(value: unknown): value is Course { return typeof value === 'object' && value !== null && 'title' in value; } ``` ## 해야 할 일 unknown 값을 Course로 검증하는 타입 가드를 만들고 유효한 데이터만 표시하세요. ## 완성 조건 - 검증 함수 입력은 unknown입니다. - 반환 타입은 `value is Course` 타입 서술어입니다. - 객체·null·필수 속성 타입을 확인하고 `검증 완료: 안전한 데이터`를 표시합니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
16
작은 JavaScript 화면을 TypeScript로 마이그레이션하기
5
## 이번 단계에서 배울 내용 마이그레이션은 확장자를 바꾸는 것보다 데이터·상태·DOM 경계의 타입을 세우는 과정입니다. 먼저 핵심 모델과 상태를 선언하고, 타입 오류를 하나씩 해결한 뒤 우회 코드를 제거합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```typescript type Filter = 'all' | 'open' | 'done'; const state: { filter: Filter; items: Item[] } = { ... }; ``` ## 해야 할 일 학습 항목 목록과 상태 필터를 타입으로 모델링한 작은 대시보드를 완성하세요. ## 완성 조건 - Item과 Filter 타입, DashboardState interface를 선언합니다. - 필터별 항목 수를 Record<Filter, number>로 계산합니다. - 완료 필터 결과 `완료 2개 · 전체 3개`가 표시됩니다. - strict 컴파일을 우회하는 코드를 사용하지 않습니다. ## 작업 방법 1. 에디터에서 `src/lesson.ts`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
2
50.00%