JavaScript/TypeScript14 제네릭(Generic) 연습하기: https://typescript-exercises.github.io/ TypeScript ExercisesA set of interactive TypeScript exercisestypescript-exercises.github.ioTypeScript의 제네릭(Generic) 타입1. 제네릭이란?"제네릭(Generic)"은 타입을 함수나 클래스, 인터페이스가 사용할 때, 외부에서 타입을 주입받도록 하는 기능입니다.Java의 제네릭, C++의 템플릿 기능과 유사코드 재사용성과 타입 안정성을 동시에 확보 가능함수/클래스를 작성할 때 구체적인 타입을 지정하지 않고, 나중에 사용할 때 지정할 수 있음2. 기본 문법function identity(value: T): T { return value;}.. 2025. 6. 21. Jsdoc, ts, Typedoc 1단계: JSDoc 기본 이해1. JSDoc이란 무엇인가?정의:JSDoc은 JavaScript/TypeScript 코드에 주석 형태로 문서를 작성할 수 있게 해주는 표준 주석 문법입니다.주요 목적:코드 설명 추가 (함수/변수/클래스/모듈 등)IDE 자동 완성 및 타입 힌트 제공문서 생성 도구 (ex. TypeDoc, JSDoc)에서 HTML API 문서 생성유지보수와 협업에서 커뮤니케이션 비용 절감2. JSDoc 블록 주석 구조형식:주석은 항상 /** */로 감싸며, 각 줄 앞에 *를 붙입니다./** * 사용자 정보를 가져옵니다. * @param userId - 사용자 ID * @returns 사용자 이름 */function getUserName(userId: string): string { retur.. 2025. 6. 21. Zod + zodResolver + React Hook Form Zod 기본 개념 (TypeScript에서 스키마 기반 데이터 검증)https://zod.dev/ Intro | Zod zod.devZod란?Zod는 TypeScript에서 스키마 기반 데이터 검증을 수행하는 라이브러리이다.TypeScript의 타입 시스템은 컴파일 단계에서만 타입을 체크하지만, Zod는 런타임에서도 데이터를 안전하게 검증할 수 있도록 도와준다.TypeScript 타입만 사용한 경우 (런타임에서 오류 검출 불가)type User = { name: string; age: number;};const data = JSON.parse('{"name": "Alice"}'); // `age` 없음const user: User = data; // ❌ 컴파일 시 문제 없음 (하지만 실행 시 오류 가.. 2025. 5. 15. TypeScript에서 타입을 정의하는 주요 방식 1. enum (TypeScript 전용 문법)정해진 상수 집합을 정의할 때 사용.// 문자열 enumexport enum Category { WORD = 'WORD', NOTE = 'NOTE', TODO = 'TODO',}// 사용const value: Category = Category.NOTE;타입: Category값: Category.NOTE 같은 형태장점: 자바스러운 문법, key → value가 있음단점: 유연성 떨어짐, JS에서 직접 쓰기엔 불편함2. 유니언 타입 ('A' | 'B' | 'C')가장 유연하고, 문자열 리터럴 제한에 적합export type Category = 'WORD' | 'NOTE' | 'TODO';const cat: Category = 'NOTE'; // ✅프론트에.. 2025. 5. 2. Zod vs zod-validator Zod vs zod-validatorZod와 zod-validator는 모두 TypeScript에서 데이터 검증을 수행하는 라이브러리이다.주요 차이점:Zod → 런타임 데이터 검증 및 TypeScript 타입 안전성 보장zod-validator → Zod 기반의 추가적인 확장 기능 제공 (Express 미들웨어 지원 등)1️⃣ Zod란?Zod는 TypeScript에서 데이터 검증을 위한 가장 널리 사용되는 라이브러리 중 하나런타임에서 JSON, API 응답, Form 데이터 등을 검증TypeScript의 타입 시스템과 잘 통합되어 정적 + 동적 타입 안전성을 제공기본 사용법import { z } from "zod";const UserSchema = z.object({ name: z.string().mi.. 2025. 3. 19. Zod Zod 기본 개념 (TypeScript에서 스키마 기반 데이터 검증)Zod란?Zod는 TypeScript에서 스키마 기반 데이터 검증을 수행하는 라이브러리이다.TypeScript의 타입 시스템은 컴파일 단계에서만 타입을 체크하지만, Zod는 런타임에서도 데이터를 안전하게 검증할 수 있도록 도와준다.TypeScript 타입만 사용한 경우 (런타임에서 오류 검출 불가)type User = { name: string; age: number;};const data = JSON.parse('{"name": "Alice"}'); // `age` 없음const user: User = data; // ❌ 컴파일 시 문제 없음 (하지만 실행 시 오류 가능)console.log(user.age.toFixed(2)); .. 2025. 3. 19. 모듈과 네임스페이스, 프로젝트 설정 및 최적화 모듈과 네임스페이스 (Modules & Namespaces)TypeScript에서 **모듈(Modules)**과 **네임스페이스(Namespaces)**는 코드를 모듈화하고 관리하는 방법이다.모듈은 ES6 표준을 따르며, 네임스페이스는 내부적인 코드 조직화를 위한 기능으로 사용된다.1️⃣ import와 export 사용법TypeScript에서 모듈을 사용하면 코드를 여러 파일로 나누어 관리할 수 있으며,import와 export 키워드를 사용하여 모듈 간의 의존성을 연결할 수 있다.기본적인 export와 importmath.ts (모듈 파일)export function add(x: number, y: number): number { return x + y;}export function subtract(.. 2025. 3. 19. 객체 지향 프로그래밍 (OOP) in TypeScript 객체 지향 프로그래밍 (OOP) in TypeScriptTypeScript는 **객체 지향 프로그래밍(Object-Oriented Programming, OOP)**을 지원하며,클래스(Class), 상속(Inheritance), 접근 제한자(Access Modifiers), 정적(static) 속성 및 메서드 등의 기능을 제공한다.1️⃣ 클래스 (Class)TypeScript에서 클래스는 객체를 생성하는 청사진 역할을 한다.ES6의 클래스 문법을 기반으로 하며, 추가적인 타입 안정성을 제공한다.class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age .. 2025. 3. 19. 함수와 고급 타입 시스템 함수와 고급 타입 시스템 (Functions & Advanced Type System)TypeScript에서 **함수(Functions)**는 매개변수와 반환 타입을 명확하게 정의하여 코드의 안정성과 가독성을 높일 수 있다.1️⃣ 함수 타입 정의 (Function Types)함수의 매개변수와 반환값의 타입을 명시할 수 있다.TypeScript는 반환 타입을 추론할 수 있지만, 명시적으로 지정하는 것이 권장된다.기본적인 함수 타입 정의function add(x: number, y: number): number { return x + y;}console.log(add(5, 3)); // 8x와 y는 number 타입을 받으며, 반환 값도 number로 지정되었다.화살표 함수 타입 정의 ((x: number.. 2025. 3. 19. 이전 1 2 다음
