[TypeScript] 개념노트 시리즈 시작

[TypeScript] 개념노트 시리즈 시작

JavaScript로 프로젝트를 만들다 보면 처음에는 빠르게 화면을 만들 수 있지만, 프로젝트 규모가 커질수록 한 가지 문제가 자주 생깁니다.

바로 데이터의 형태를 코드만 보고 바로 파악하기 어렵다는 점입니다. 변수에 어떤 값이 들어오는지, 함수가 어떤 값을 반환하는지, API 응답 구조가 어떻게 생겼는지 명확하지 않으면 작은 수정 하나에도 오류가 발생할 수 있습니다.

이런 문제를 줄이기 위해 사용하는 것이 바로 TypeScript입니다. TypeScript는 JavaScript에 타입을 더해, 코드를 작성하는 단계에서 실수를 미리 발견할 수 있도록 도와주는 언어입니다.

---

1. TypeScript를 공부하는 이유

TypeScript는 단순히 문법을 하나 더 배우는 개념이 아닙니다. 실제 프로젝트에서 데이터 구조를 더 안전하게 관리하고, 협업이나 유지보수 과정에서 실수를 줄이기 위한 도구에 가깝습니다.

TypeScript를 쓰는 이유
- 변수와 함수의 데이터 형태를 명확하게 관리할 수 있다.
- 실행 전에 타입 오류를 미리 확인할 수 있다.
- API 응답값, 컴포넌트 Props, 상태값을 안전하게 다룰 수 있다.
- 프로젝트 규모가 커질수록 유지보수에 유리하다.

특히 React 프로젝트를 만들거나, 백엔드 API와 데이터를 주고받는 화면을 만들 때 TypeScript의 장점이 더 분명하게 드러납니다.

---

2. 이 시리즈의 목표

이번 TypeScript 개념노트 시리즈는 문법을 단순히 나열하는 방식으로 정리하지 않으려고 합니다. 각 개념이 왜 필요한지, JavaScript에서 어떤 문제가 있었고 TypeScript가 그것을 어떻게 보완하는지 중심으로 정리할 예정입니다.

또한 마지막에는 React, API 응답 타입, 미니 프로젝트 구조까지 연결해서 실제 프로젝트에 적용할 수 있는 방향으로 정리하려고 합니다.

정리 방향
- 처음 배우는 사람도 이해할 수 있도록 기본 개념부터 정리
- JavaScript와 비교하면서 TypeScript의 필요성 설명
- React 프로젝트에서 자주 쓰는 타입까지 연결
- API 응답 타입, 채팅 메시지 타입 같은 실전 구조까지 확장

---

3. TypeScript 개념노트 시리즈 구성

전체 시리즈는 기본 개념 12편과 실전 확장 3편으로 구성할 예정입니다. 기본 문법만 훑고 끝나는 것이 아니라, 실제 프로젝트에서 타입을 어떻게 설계하는지까지 이어가는 흐름입니다.

편	주제	핵심 내용
1편	TypeScript란?	JavaScript와 TypeScript의 차이
2편	기본 타입	string, number, boolean, any, unknown
3편	배열, 객체, 튜플	데이터 묶음을 타입으로 표현하는 방법
4편	함수 타입	매개변수 타입, 반환 타입, 선택적 매개변수
5편	Union Type과 Literal Type	여러 타입 허용과 제한된 값 설계
6편	type과 interface	타입 별칭과 인터페이스 비교
7편	타입 좁히기	typeof, in, instanceof 활용
8편	제네릭	재사용 가능한 타입 설계
9편	Utility Types	Partial, Pick, Omit, Record 정리
10편	클래스와 접근 제어자	class, public, private, protected
11편	tsconfig.json	TypeScript 프로젝트 설정 이해
12편	React와 TypeScript	Props, State, Event 타입 정리
13편	API 응답 타입 설계	백엔드 응답값을 안전하게 다루는 방법
14편	비동기 데이터 타입 처리	fetch, Supabase, nullable 값 처리
15편	Mini Bot 프로젝트 적용	채팅 메시지, 봇 응답, 상태 타입 설계

---

4. JavaScript만 사용할 때 생길 수 있는 문제

JavaScript는 유연한 언어입니다. 하지만 이 유연함은 프로젝트가 커질수록 실수로 이어질 수 있습니다.

function printUserName(user) {
  console.log(user.name.toUpperCase());
}

printUserName(null);

위 코드는 작성할 때는 문제가 없어 보일 수 있습니다. 하지만 실제 실행 시점에 null 값이 들어오면 오류가 발생합니다.

TypeScript를 사용하면 이런 문제를 코드 작성 단계에서 미리 확인할 수 있습니다.

type User = {
  name: string;
};

function printUserName(user: User) {
  console.log(user.name.toUpperCase());
}

이처럼 TypeScript는 값의 형태를 미리 정해두고, 그 규칙에 맞지 않는 코드를 작성했을 때 바로 확인할 수 있게 해줍니다.

---

5. 앞으로의 학습 방향

TypeScript를 처음 공부할 때는 모든 문법을 한 번에 외우려고 하면 어렵게 느껴질 수 있습니다. 처음에는 기본 타입, 함수 타입, 객체 타입처럼 자주 사용하는 개념부터 익히는 것이 좋습니다.

그다음 Union Type, type, interface, 제네릭으로 넘어가면 실제 프로젝트에서 타입을 설계하는 감각을 조금씩 잡을 수 있습니다.

TypeScript는 문법 자체보다 데이터의 흐름을 명확하게 표현하는 습관이 중요합니다. 이 시리즈에서는 문법을 외우는 것보다 실제 코드에서 왜 필요한지 이해하는 방향으로 정리하겠습니다.

---

6. 마무리

이번 글에서는 TypeScript 개념노트 시리즈를 시작하기 전에, TypeScript를 왜 공부해야 하는지와 앞으로 어떤 순서로 정리할지 살펴보았습니다.

다음 글에서는 가장 기본이 되는 TypeScript의 기본 타입을 정리해보겠습니다. string, number, boolean 같은 기본 타입부터 any와 unknown의 차이까지 차근차근 살펴볼 예정입니다.

GWDEVELBlog
TypeScript 개념노트 시리즈