Frontend/TypeScript 6

Synchronous & Asynchronous & async / await

안녕하세요. 저번 포스팅 때 자바스크립트에서 비동기에 대해 알아본 내용을 알아봤었는데요. 오늘은 비동기를 다시 한번 알아보고 동기, async와 await에 대한 특징, 장*단점에 대해 알아볼게요. 1. 동기(Synchronous) 프로그래밍 동기 프로그래밍은 코드가 작성된 수서대로 실행되는 방식을 의미해요. 이 말은 하나의 작업이 완료되어야만 다음 코드가 실행된다는 뜻이에요. 이 방식의 장점은 단순하고 직관적인 것이에요. 코드의 실행 순서를 예측하고 쉽고, 디버깅도 간단해요. 그러나 단점은 시간이 오래 걸리는 작업이 있으면 프로그램 전체가 멈춘 것처럼 보여요. 이 때문에 응답성이 떨어지고, 사용자 경험(UX)이 나빠질 수 있어요.// syncExample.tsfunction syncTask1() ..

Frontend/TypeScript 2025.11.25

TypeScript Generic(Advanced)

안녕하세요. 오늘은 타입스크립트 제네릭의 응용편(실무 활용 중심)에 알아볼게요. 제네릭 응용편 이번 포스팅은 제네릭의 단순 를 쓰는 수준을 넘어서 "제네릭을 이용해 유연하면서도 안전한 타입 구조를 만드는 법"을 알아볼게요. 1. 유니온 타입(Union Type) + 제네릭 확장type StringOrNumber = string | number;function unionGeneric(value: T) { if (typeof value === 'string') { return value.toLowerCase(); } return value; // 숫자는 그대로 반환}const result1 = unionGeneric('sTrInG'); // 'string'const result2 = uni..

Frontend/TypeScript 2025.11.23

TypeScript Generic

안녕하세요. 오늘은 타입스크립트 제네릭(Generic)에 대해 알아볼게요. 제네릭(Generic) 제네릭은 "한 번 만든 코드로 여러 타입을 다루는 기술"이에요. 즉, 코드를 재사용하면서도 타입 안정성을 유지할 수 있게 해 줘요.function generic(arg: T): T { return arg;}generic("안녕");generic(123);는 “타입 변수(type variable)”로, 함수를 호출할 때 타입을 정할 수 있어요. 제네릭은 여러 타입 변수를 사용할 수 있는데요.function pair(first: T, second: U): [T, U] { return [first, second];}let pair1 = pair("안녕", 123);console.log(pair1); // ..

Frontend/TypeScript 2025.11.21

TypeScript Interface

안녕하세요. 오늘은 타입스크립트 인터페이스에 대해 알아볼게요. 인터페이스(Interface) 인터페이스는 객체의 구조(형태)를 정의하는 타입으로 객체가 어떤 속성과 메서드를 가져야 하는지 미리 약속하는 설계도 같은 역할을 해요.interface IUser { name?: string; // 선택적 속성 (있어도 되고 없어도 됨) readonly age: number; // 읽기 전용 greet(name: string): void; // 메서드(함수) 형태 정의}let userA: IUser = { age: 50, greet: (name) => console.log(`${name} hello ~`),};userA.greet("홍길동"); // 출력: 홍길동 hello ~? → 옵션 ..

Frontend/TypeScript 2025.11.21

TypeScript Type

안녕하세요. 오늘은 타입스크립트의 타입에 대해 알아볼게요. 타입스크립트의 타입(Type) 타입은 "변수에 담을 수 있는 데이터의 종류"를 의미해요. 쉽게 설명하면, "이 변수에는 어떤 종류의 값이 들어올 수 있는가?"를 미리 정해두는 규칙이에요. 하나의 예제를 본다면let name: string = "Tom"; // 문자열만 가능let age: number = 25; // 숫자만 가능let isLogin: boolean = true; // true / false만 가능여기에 만약 잘못된 타입의 값을 넣으면?age = "스물다섯"; // ❌ 오류 발생!이렇게 TS가 미리 잡아줘서 실행 전에 오류를 예방할 수 있어요. 기본(Promitive) 타입 타입스크립트의 기본타입의 정리표예요.타입설명예..

Frontend/TypeScript 2025.11.20

TypeScript(TS)

안녕하세요. 오늘은 JavaScript를 기반으로 만든 언어, 타입스크립트(TypeScript)에 대해 알아볼게요. 타입 스크립트(TypeScript) 타입스크립트는 자바스크립트를 기반으로 만든 언어로, Microsoft에서 개발한 오픈소스 언어예요. JS의 모든 기능을 포함하면서도 타입 검사(정적 타입) 기능을 제공하고, 개발 중 발생할 수 있는 오류를 미리 잡을 수 있어요. 한마디로, "JavaScript에 타입(type) 기능을 추가한 언어"라고 보시면 돼요. 타입스크립트 사용목적 1. 에러 사전 방지 JS는 동적 타입 언어라 변수의 타입이 코드가 실행될 때 결정해요.// JavaScript 예시let name = "Tom";name = 123; // ❌ 실행은 되지만, 의도치 않은 에러 발생 ..

Frontend/TypeScript 2025.11.19