01 / 14
SESSION 21 · Part 5 웹 개발
TypeScript
입문
JavaScript에 안전벨트 — 코드 작성 시점에 오류를 잡아주는 언어
02 / 14
💭
왜 TypeScript가
표준이 되었나?
2024년 기준, 새로 시작하는 웹 프로젝트의 90% 이상이 TypeScript를 채택한다.
React·Vue·Next.js 같은 주요 도구들도 TypeScript 우선으로 진화했다.
이유는 단순하다 — "실수를 미리 잡아준다". 그리고 AI가 더 정확한 코드를 만들 수 있게 돕는다.
03 / 14
🎯
이 세션에서
배우는 것
⚖️
TS vs JS
두 언어의 결정적 차이와 TypeScript가 가져다주는 안전성
🏷️
기본 타입 사용
string, number, boolean부터 배열·객체 타입까지
🧩
interface와 props
React 컴포넌트의 props에 타입을 지정하는 방법
04 / 14
JavaScript vs TypeScript
같은 코드를 두 언어로 비교 — 차이는 오류 잡는 시점이다.
JavaScript
- 변수에 어떤 값이든 자유롭게 할당
- 오류는 실행했을 때 비로소 드러남
- 운영 환경에서 버그 발견 가능성
- 대규모 협업 시 약속이 깨지기 쉬움
TypeScript
- 변수에 타입 지정 — 다른 타입 차단
- 오류는 코드 작성 즉시 표시됨
- 실행 전 컴파일 단계에서 잡힘
- 팀·AI 모두 타입을 보고 협업 가능
💡 TS는 결국 JS + 타입 시스템 — 실행 시 타입은 사라지고 순수 JS로 변환된다.
05 / 14
코드로 보는 차이
같은 함수 — 한쪽은 실행 후에야 오류를, 다른 쪽은 작성 즉시 오류를 알려준다.
// JavaScript - 오류가 런타임까지 숨겨짐
function add(a, b) {
return a + b;
}
add(5, "10"); // 결과: "510" 😱 (문자 연결됨)
// TypeScript - 작성 즉시 빨간 줄
function add(a: number, b: number): number {
return a + b;
}
add(5, "10"); // ❌ Argument of type 'string' is not assignable to 'number'
06 / 14
🏷️
TypeScript 기본 타입
이 6가지만 익히면 일상 코드의 80%가 처리된다.
// 원시 타입
const name: string = "홍길동";
const age: number = 25;
const isActive: boolean = true;
// 배열
const tags: string[] = ["web", "react", "ts"];
const scores: number[] = [90, 85, 100];
// 객체
const user: { name: string; age: number } = {
name: "김철수",
age: 30,
};
07 / 14
interface vs type
둘 다 객체의 모양을 정의한다. 거의 같지만 미묘한 차이가 있다.
// interface — 확장에 강함
interface User {
name: string;
age: number;
}
interface Admin extends User {
role: string;
}
// type — 유니온/별칭에 유연
type Status = "active" | "inactive" | "pending";
type ID = string | number;
💡 헷갈리면 — 객체는 interface, 그 외엔 type으로 시작하면 무난하다.
08 / 14
🔮
타입 추론 —
알아서 잡아주는 똑똑함
모든 변수에 타입을 직접 쓸 필요 없다. TS가 자동으로 추론한다.
// 타입을 안 써도 TS가 알아서 추론
const count = 10; // 추론: number
const message = "안녕"; // 추론: string
const isReady = true; // 추론: boolean
const nums = [1, 2, 3]; // 추론: number[]
// 추론으로 충분 — 굳이 안 써도 됨
count = "hello"; // ❌ 여전히 오류로 잡힘
💡 함수의 매개변수와 반환 타입은 명시하고, 내부 변수는 추론에 맡기는 것이 일반적인 스타일.
09 / 14
⚠️
any는 왜
지양해야 할까?
any는 "어떤 타입이든 OK"라는 뜻 — 사실상 타입 검사를 끄는 것과 같다.
// ❌ any를 쓰면 TS의 모든 보호가 사라짐
function handle(data: any) {
data.name.toUpperCase(); // 오류 안 잡힘 — 실행 시 폭발
}
// ✅ 정확한 타입을 명시
interface Data { name: string; }
function handle(data: Data) {
data.name.toUpperCase(); // 안전
}
💡 AI에게 코드 요청 시 — "any 쓰지 말고 정확한 타입으로 작성해줘" 한 줄을 꼭 추가하자.
10 / 14
⚛️
React 컴포넌트의 props 타입
가장 자주 쓰는 패턴 — 부모가 자식에게 넘기는 props의 모양을 interface로 정의한다.
// Button 컴포넌트의 props 타입 선언
interface ButtonProps {
text: string;
variant: "primary" | "secondary";
onClick: () => void;
disabled?: boolean; // ?는 선택적 prop
}
function Button({ text, variant, onClick, disabled }: ButtonProps) {
return (
<button onClick={onClick} disabled={disabled}>
{text}
</button>
);
}
11 / 14
📜
TypeScript는 계약서다
JS는 구두 약속, TS는 서면 계약 — 협업할수록 차이가 커진다.
📜 계약서 비유
JavaScript
=
구두 약속 — 빠르게 시작 가능, 나중에 깨지기 쉬움
TypeScript
=
서면 계약 — 처음에 번거롭지만 검증과 책임이 명확
interface
=
계약 항목 목록 — 어떤 데이터가 와야 하는지 명세
컴파일 오류
=
계약 위반 알림 — 사인하기 전에 미리 알려줌
12 / 14
🤖
AI 코드와 TypeScript
TypeScript는 AI가 만든 코드를 검증하는 가장 강력한 도구다.
👤
사용자 정보를 받아 인사 메시지를 만드는 함수 작성해줘.
🤖
interface User로 타입을 정의하고, greet(user: User): string 함수를 만들었습니다. any를 쓰지 않고 정확한 타입을 적용했어요.
👤
생일 정보도 추가하고 싶은데, 옵션이면 좋겠어.
🤖
birthday?: Date 형태로 추가했습니다. 물음표가 있어 옵션이고, 있으면 메시지에 자동 포함됩니다. 타입 검사기가 모든 사용처에서 안전성을 확인했어요.
13 / 14
📌
핵심 정리
⚖️
TS = JS + 타입
실행 시 타입은 사라짐
순수 JS로 컴파일됨
🏷️
기본 타입
string, number, boolean
배열, 객체
🧩
interface vs type
객체는 interface,
유니온은 type
🔮
타입 추론
변수는 자동 추론
함수 시그니처는 명시
⚠️
any 지양
타입 검사 무력화
AI에게도 금지 요청
⚛️
React props
interface로
props 타입 정의
14 / 14
🚀
다음 세션
Session 22 · DOM과 이벤트
TypeScript로 안전한 코드를 쓸 수 있게 되었다.
이제는 그 코드로 브라우저 화면을 직접 조작하는 다리 — DOM과 이벤트를 다룬다.
💡 기억할 것: TypeScript는 계약서다. 처음의 번거로움이 나중의 큰 이득이 된다.