Typescript 완벽 가이드｜기초부터 실전까지 한 번에 정리 - 1강

안녕하세요! 반갑습니다. 여러분의 든든한 타입스크립트 가이드, '타입스크립트 강의 선생님'입니다. 😊

React와 Next.js 실무 프로젝트에 당장 뛰어들어야 해서 마음이 급하시죠? 걱정 마세요. 제가 옆에 딱 붙어서, 비전공자도 단번에 이해할 수 있는 쉬운 비유와 실무 꿀팁으로 '타입스크립트, 별거 아니네!' 라고 느끼게 해드리겠습니다.

우리는 총 20강에 걸쳐 기초부터 실무(Next.js)까지 완주할 겁니다. 먼저 우리가 함께 걸어갈 로드맵(커리큘럼)을 보여드리고, 바로 1강을 힘차게 시작하겠습니다!

---

📅 실무 투입 대비: 타입스크립트 20강 커리큘럼

Part 1. 기초 체력 다지기 (기본 문법)

• 1강: 왜 타입스크립트인가? (JS와 TS의 차이, 환경설정) 👈 오늘의 진도
• 2강: 기본 타입 뽀개기 (Primitive Types, Any, Void)
• 3강: 함수에도 타입을 입혀보자 (Parameter & Return Type)
• 4강: 객체를 정의하는 법 1 - 인터페이스 (Interface)
• 5강: 객체를 정의하는 법 2 - 타입 별칭 (Type Alias) vs 인터페이스

Part 2. 중급 기술 익히기 (유연한 코드 만들기)

• 6강: 유니온 타입과 인터섹션 (또는(|) 그리고(&))
• 7강: 리터럴 타입과 Enum (딱 정해진 값만 받기)
• 8강: 클래스와 접근 제어자 (public, private, protected)
• 9강: 만능 열쇠, 제네릭 (Generics) 기초 - 개념 잡기
• 10강: 제네릭 실전 - 함수와 인터페이스에서의 활용

Part 3. 실무를 위한 고급 스킬 (더 안전하게)

• 11강: 타입 추론과 타입 단언 (Type Assertion) - "내 말을 믿어!"
• 12강: 타입 좁히기 (Type Narrowing) - "이거 혹시 문자열이니?"
• 13강: 유틸리티 타입 1 (Partial, Pick, Omit) - "필요한 것만 골라쓰기"
• 14강: 유틸리티 타입 2 (Record, Readonly)
• 15강: 비동기 처리와 Promise 타입 다루기

Part 4. React & Next.js 실전 적용 (현업 투입)

• 16강: React 컴포넌트에 타입 입히기 (Props, State)
• 17강: 이벤트 핸들러 타입 다루기 (onClick, onChange)
• 18강: Hooks 완벽 가이드 (useState, useEffect, useRef)
• 19강: Next.js 특화 타입 (GetServerSideProps, API Routes)
• 20강: 실무에서 자주 만나는 에러 TOP 5와 해결법

---

🚀 제1강. 왜 타입스크립트인가? (자바스크립트의 '맞춤법 검사기')

자, 첫 번째 시간입니다! 어려운 용어는 다 빼고 핵심만 이야기해 볼게요.

1. 개념 쏙쏙: '무법지대' vs '보안관'

자바스크립트(JS)는 자유로운 영혼입니다. 숫자를 넣어야 할 곳에 문자를 넣어도 "에이, 대충 알아서 처리할게~" 하고 넘어가죠. 편해 보이지만, 이게 나중에 대형 사고(버그) 로 이어집니다.

💡 비유:

• 자바스크립트: 맞춤법 검사 기능이 없는 메모장입니다. 오타가 나도 저장할 때까지 모릅니다. 고객에게 이메일을 보내고 나서야 "아차!" 하죠. (런타임 에러)
• 타입스크립트: 빨간 밑줄을 그어주는 'MS Word 맞춤법 검사기' 입니다. 글을 쓰는 순간(코드를 짜는 순간) "여기 틀렸어!"라고 알려줘서, 보내기 전에 고칠 수 있습니다. (컴파일 에러)

React나 Next.js 프로젝트는 규모가 큽니다. 타입스크립트는 우리가 실수하지 않도록 미리 막아주는 '안전벨트' 역할을 합니다.

2. 코드로 보는 차이 (실무 예시)

두 수를 더하는 아주 간단한 함수를 만들어 볼게요.

☠️ 위험한 자바스크립트 (JS)

JavaScript

 

function add(a, b) {
  return a + b;
}

// 개발자의 실수: 숫자가 아닌 문자를 넣음
console.log(add(1, "2")); 
// 결과: "12" (숫자 3을 원했는데 문자가 되어버림! 에러도 안 남!)

자바스크립트는 아무 말 없이 1과 "2"를 붙여서 "12"를 만듭니다. 이게 통장 잔고 계산이었다면? 큰일 나겠죠?

🛡️ 안전한 타입스크립트 (TS)

TypeScript

 

// a와 b는 무조건 'number(숫자)'여야 한다고 명시!
function add(a: number, b: number) {
  return a + b;
}

// 개발자의 실수 시도
console.log(add(1, "2")); 
// 🚨 에러 발생! (빨간 줄 쫙!)
// 메시지: 'string' 형식의 인수는 'number' 형식의 매개 변수에 할당할 수 없습니다.

타입스크립트는 코드를 실행하기도 전에 "잠깐! 거기 문자열('2') 넣으면 안 돼!" 라고 화를 냅니다. 우리는 이 경고를 보고 "2"를 2로 고치게 되죠. 이것이 타입스크립트를 쓰는 가장 큰 이유입니다.

3. React/Next.js에서는 어떻게 쓰나요?

React에서는 Props라는 데이터를 부모 컴포넌트에서 자식으로 넘겨줍니다. 이때 TS를 쓰면 "이 컴포넌트는 반드시 title(제목)과 count(숫자)를 받아야 해!" 라고 계약서를 쓸 수 있습니다. 만약 하나라도 빼먹으면 실행조차 안 되게 막아주니, 버그가 획기적으로 줄어들겠죠?

---

✍️ 1강 미니 퀴즈 & 실습

방금 배운 내용을 확인해 볼까요? 부담 갖지 마세요!

문제 1. 다음 중 타입스크립트의 역할로 가장 적절한 비유는 무엇일까요?

1. 자유롭게 뛰어노는 놀이터
2. 오타를 미리 잡아주는 맞춤법 검사기
3. 아무 데이터나 다 받아주는 쓰레기통

문제 2. 아래 TS 코드에서 에러가 발생하는 부분은 어디일까요? (눈으로 풀어보세요)

TypeScript

 

function greet(name: string) {
  console.log("Hello, " + name);
}

greet("Cheolsu"); // A
greet(100);       // B

---

✅ 정답 및 해설

• 문제 1 정답: 2번 (미리 에러를 잡아주는 것이 핵심입니다!)
• 문제 2 정답: B
  • 해설: greet 함수는 name이라는 자리에 오직 문자열(string) 만 받겠다고 선언(name: string)했습니다. 그런데 100이라는 숫자(number)를 넣으려고 하니, 타입스크립트가 "타입이 맞지 않아요!"라고 빨간 줄을 긋게 됩니다.

---

1강, 어떠셨나요? 생각보다 어렵지 않죠? "그냥 자바스크립트에 : type 만 붙여주면 되는구나!"라고 생각하셨다면 아주 훌륭한 출발입니다.

이 기초 개념이 잡혀야 React 컴포넌트를 만들 때도 두려움이 없습니다. 이해가 잘 되셨다면, 다음 단계인 '기본 타입'을 배우러 가볼까요?