[DevCourse] 생성형 AI 활용 백엔드 데브코스 15일차

오늘은 처음으로 TypeScript(타입스크립트)를 접했다.

그동안 자바스크립트로만 작업하면서 “타입이 없어서 편하다”는 생각도 있었지만,

실제로 프로젝트 규모가 커질수록 코드의 구조를 명확히 표현할 수 있는 도구가 필요하다는 걸 오늘 실습을 통해 제대로 느꼈다.

---

📌 오늘 배운 내용 요약

1. TypeScript 개요와 기본 문법

• TypeScript는 JavaScript의 상위 집합(Superset)으로, 정적 타입을 추가해 코드의 안정성과 유지보수성을 높여준다.
• string, number, boolean 같은 기본 타입 선언 방식부터, "north" | "south"처럼 리터럴 타입, interface를 통한 객체 구조 정의, 함수 매개변수 및 반환값에 명확하게 타입을 지정하는 방식까지 실습했다.

2. React에서 TypeScript 사용하기

• --template typescript 옵션으로 React 프로젝트를 생성하고, 컴포넌트의 props에 타입을 지정해 타입 안정성을 확보하는 방법을 익혔다.

interface Props {
  name: string;
  age: number;
}

• React.FC<Props>와 구조 분해 할당을 함께 사용하면서 가독성과 안전성 모두를 챙길 수 있는 코드 구조를 실습해 봤다.

3. 기존 뉴스 뷰어 프로젝트를 TypeScript로 변환

• 어제 만든 뉴스 뷰어 앱의 컴포넌트에 타입을 적용하면서, props, API 응답 데이터, useState 등의 타입 선언을 직접 작성해 봤다.
• 처음엔 조금 복잡하고 장황해 보였지만, 타입이 들어간 덕분에 IDE에서의 자동완성과 경고 메시지들이 확실히 더 똑똑해진 느낌이었다.

---

 

🧡 느낀 점

오늘은 코드가 갑자기 엄격해진 느낌이라 초반엔 조금 어색했다.

하지만 시간이 지나면서 왜 타입이 중요한지, 그리고 React와 함께 사용할 때 어떤 시너지를 줄 수 있는지를 조금씩 체감하게 됐다.

 

특히 이전에 만든 뉴스 뷰어를 TypeScript로 바꾸면서, 내가 만든 코드에 직접 타입을 붙여보고, 그에 따라 오류가 사전에 잡히는 경험을 해보니 귀찮지만 정말 유용하겠구나라고 생각이 들었다.

 

React에서 상태 관리, API 연동, 컴포넌트 설계가 복잡해질수록 TypeScript가 빛을 발하게 될 거라는 생각이 든다.