반응형 백엔드/타입스크립트8 [TypeScript] 8장: 실전 프로젝트 - 클래스 기반 Todo 리스트 만들기 8장: 실전 프로젝트 - 클래스 기반 Todo 리스트 만들기지금까지 배운 TypeScript의 모든 개념(타입, 인터페이스, 제네릭, 클래스 등)을 종합하여, 프레임워크 없이 순수 TypeScript만으로 동작하는 간단한 Todo 리스트 애플리케이션의 핵심 로직을 만들어봅니다.1. 프로젝트 목표 및 설계기능 요구사항:Todo 항목을 추가할 수 있다.특정 ID의 Todo 항목을 찾을 수 있다.특정 Todo 항목의 완료 상태를 토글(toggle)할 수 있다.모든 Todo 목록 또는 특정 상태(완료/미완료)의 목록을 가져올 수 있다.핵심 타입 및 클래스 설계:Todo 인터페이스: 개별 Todo 항목의 데이터 구조를 정의합니다.id: number (고유 식별자)task: string (할 일 내용)isDone:.. 2025. 9. 18. [TypeScript] 7장: 고급 타입 - 타입스크립트의 힘 제대로 활용하기 7장: 고급 타입 - 타입스크립트의 힘 제대로 활용하기TypeScript는 기본 타입을 넘어, 기존 타입을 변환하거나 조합하여 더 정교하고 유연한 타입을 만들 수 있는 다양한 고급 타입 기능들을 제공합니다. 이를 통해 반복적인 타입 정의를 줄이고, 코드의 표현력을 극대화할 수 있습니다.1. 유틸리티 타입 (Utility Types)유틸리티 타입은 기존 타입을 바탕으로 새로운 타입을 만들어내는, TypeScript에 내장된 특별한 제네릭 타입입니다. 매우 유용하고 자주 사용됩니다.Partial: 타입 T의 모든 속성을 선택적(optional, ?)으로 만듭니다. 객체의 일부만 업데이트할 때 유용합니다.interface User { id: number; name: string; email: string; }.. 2025. 9. 17. [TypeScript] 6장: 제네릭 - 재사용 가능한 타입 만들기 6장: 제네릭 - 재사용 가능한 타입 만들기제네릭(Generics)은 다양한 타입에서 동작하면서도 타입 안정성을 잃지 않는, 재사용 가능한 컴포넌트(함수, 클래스, 인터페이스)를 만드는 데 사용되는 강력한 도구입니다. Java나 C#의 제네릭과 매우 유사한 개념으로, 타입을 마치 함수의 파라미터처럼 사용하는 것입니다.1. 제네릭이 왜 필요한가?제네릭이 없는 상황을 생각해봅시다. 숫자나 문자열을 받아 그대로 반환하는 identity 함수를 만들고 싶습니다.any 사용의 문제점:function identity(arg: any): any { return arg;}let output = identity('myString'); // output의 타입은? any가 됨// output이 string이라는 정보를 .. 2025. 9. 17. [TypeScript] 5장: 열거형과 리터럴 타입 - 정해진 값만 허용하기 5장: 열거형과 리터럴 타입 - 정해진 값만 허용하기변수가 특정 값들의 집합 중 하나만 갖도록 강제하여 코드의 의도를 명확히 하고 실수를 줄이는 방법을 배웁니다. Java 개발자에게 익숙한 열거형(Enum)과, TypeScript의 강력한 기능인 리터럴 타입(Literal Types)을 알아봅니다.1. 열거형 (Enum)개념: 이름이 있는 상수들의 집합을 정의하는 방법입니다. 특정 상태나 옵션을 나타낼 때, 숫자나 문자열을 직접 사용하는 것보다 코드의 가독성과 유지보수성을 높여줍니다. Java의 enum과 매우 유사합니다.숫자 열거형 (Numeric Enums): 기본적으로 0부터 시작하여 1씩 증가하는 숫자 값을 가집니다. 시작 값을 직접 지정할 수도 있습니다.문자열 열거형 (String Enums):.. 2025. 9. 17. [TypeScript] 4장: 인터페이스와 타입 별칭 - 타입에 이름 붙이기 4장: 인터페이스와 타입 별칭 - 타입에 이름 붙이기복잡한 객체 타입을 여러 곳에서 재사용하기 위해 타입에 이름을 붙이는 방법을 배웁니다. TypeScript에서는 인터페이스(Interface)와 타입 별칭(Type Alias) 두 가지 주요 방법을 제공합니다. 이 둘의 차이점과 각각의 사용 사례를 이해하는 것이 중요합니다.1. 인터페이스 (Interface)개념: 객체의 "모양" 또는 "설계도"를 정의하는 데 사용됩니다. 객체가 어떤 속성(property)과 메소드(method)를 가져야 하는지 규정합니다. Java의 interface와 매우 유사한 역할을 합니다.주요 특징:interface 키워드로 선언합니다.선택적 속성(Optional Properties): 속성 이름 뒤에 ?를 붙여 선택적으로 만.. 2025. 9. 17. [TypeScript] 3장: 함수와 객체 - 코드의 기본 단위 타입 정의하기 3장: 함수와 객체 - 코드의 기본 단위 타입 정의하기대부분의 애플리케이션 로직은 함수와 객체로 구성됩니다. TypeScript에서 함수의 매개변수와 반환 값, 그리고 객체의 구조에 타입을 지정하여 코드의 예측 가능성과 안정성을 높이는 방법을 배웁니다.1. 함수 타입 정의 (Function Types)매개변수(Parameter) 타입: 함수의 각 매개변수 뒤에 콜론(:)을 붙여 타입을 지정합니다.반환(Return) 타입: 함수 선언부의 괄호(()) 뒤에 콜론(:)을 붙여 함수가 반환할 값의 타입을 지정합니다. 반환 값이 없는 함수는 void 타입을 사용합니다.// 매개변수는 number, 반환값도 number임을 명시function multiply(a: number, b: number): number {.. 2025. 9. 17. 이전 1 2 다음 반응형