프론트엔드 첫걸음

사용자 정의 타입 가드와 is 키워드타입스크립트에서는 기본적으로 typeof, instanceof, 'key' in obj 같은 방식으로 타입을 좁힐 수 있다.하지만 보다 복잡한 상황에서는 **사용자 정의 타입 가드(User-defined type guard)**를 직접 작성해야 할 수 있다. 1. 타입 가드 복습function print(value: string | number) { if (typeof value === "string") { console.log(value.toUpperCase()); // value는 string으로 좁혀짐 }}typeof 같은 연산자를 사용하면 타입스크립트는 조건문 안에서 value의 타입을 자동으로 좁혀준다. 2. 사용자 정의 타입 가드란?어떤 값이 특정 ..

값에 따라 타입을 좁힌다 (타입 가드)타입스크립트는 조건문을 통해 변수의 타입을 좁혀(narrow) 줄 수 있다. 이를 **타입 가드(type guard)**라고 부르며, 코드의 안정성과 정확성을 높이는 핵심 개념이다.1. 타입 좁히기란?유니언 타입(string | number) 같은 넓은 타입을 조건문 등을 통해 보다 구체적인 타입으로 좁히는 것을 말한다.function print(value: string | number) { if (typeof value === "string") { console.log(value.toUpperCase()); // value: string } else { console.log(value.toFixed(2)); // value: number }}t..

1. any의 의미와 문제점any는 타입스크립트의 타입 검사 체계를 완전히 우회한다.한 번 any가 들어오면, 이후 코드에서 타입스크립트는 더 이상 타입 추론이나 검사를 하지 않는다.즉, 타입 시스템에 **“포기 선언”**을 하는 것이다.예를 들어 any로 선언된 변수에 존재하지 않는 프로퍼티를 접근해도 에러가 발생하지 않는다.let value: any = "hello";value.toUpperCase(); // OKvalue.asdfasdf(); // OK → 존재하지 않는 함수여도 통과됨→ 타입스크립트를 쓰는 의미가 사라짐. 2. unknown의 의미unknown은 정확한 타입을 아직 모를 때 사용하는 타입이다.any처럼 모든 타입을 할당할 수 있지만, 이후 사용할 때는 타입 검사를 강제한다.즉..

1. 함수 반환 타입으로서의 voidfunction sayHello(): void { console.log("Hello");}의미: 이 함수는 아무것도 반환하지 않는다.실제로는 return문 없이 종료되거나 return;만 있을 수 있다.만약 return 123;처럼 값을 반환하면 컴파일 에러가 난다. 2. 콜백 함수에서 void 반환 타입으로 제한할 때type VoidFunction = () => void;const fn: VoidFunction = () => { return 42; // 에러 ❌ 아님! → 이건 허용됨};하지만 이 반환값은 무시된다.void는 **“값을 무시해도 된다”**는 의도일 뿐, 실제로는 값을 반환해도 에러는 아니다.대표적 사용 예: Array.forEach((item) =..

TypeScript의 타입 시스템은 단순히 변수에 레이블을 붙이는 기능을 넘어, 값의 집합으로 이해하면 더 명확해진다. 특히 "좁은 타입"과 "넓은 타입"의 관계를 집합처럼 상하관계로 파악하면, 대입 가능성이나 타입 오류의 원인을 직관적으로 이해할 수 있다. 1. 타입은 값의 집합이다type Animal = "cat" | "dog" | "rabbit"type Cat = "cat"Cat 타입은 오직 "cat"만 포함하는 값의 집합.Animal은 "cat", "dog", "rabbit" 세 가지 값을 포함하는 더 큰 집합.→ 따라서 Cat은 Animal의 부분집합이며, 우리는 이것을 좁은 타입(subtype) 이라고 부른다. 2. 타입 간 대입 가능성은 집합 포함 관계로 결정된다let a: Animallet..

프로젝트 코드에서 아래와 같은 걸 봤다. const flag: any[] = [ (content_type & 1) > 0, (content_type & 2) > 0, (content_type & 4) > 0, (content_type & 8) > 0, (ontent_type & 128) > 0, content_type ? content_type === 0 : true, ]; 해당 프로젝트는 어떤 api의 응답에 비트연산자를 활용하고 있었다.비트연산자를 알아보자 &와 &&는 다르다처음엔 &&인줄 알았다. &&은 &과 다르다.기호이름역할예시&&논리 ANDtrue/false 비교true && false → false&비트 AND숫자의 비트 비교5 & 4 → 4즉, &는 불..

1. type alias와 interface의 공통점둘 다 객체의 구조를 정의할 수 있다.둘 다 객체의 shape(모양) 을 지정할 수 있기 때문에, 초보자일 때는 크게 차이를 못 느낄 수 있다.// type 사용type User = { name: string; age: number;};// interface 사용interface User { name: string; age: number;}이 두 가지는 코드상 동일하게 동작한다. 단순히 객체 구조를 정의하는 용도로는 아무거나 써도 된다. 2. type alias의 특징간단한 타입 정의에 유리type은 객체뿐 아니라 유니언 타입, 튜플, 기타 복잡한 타입 조합도 표현할 수 있다.type Status = "pending" | "success" | "..

union(|)과 intersection(&)의 차이TypeScript의 유니언 타입(|)과 인터섹션 타입(&)은 타입을 조합하는 두 가지 방식이다. 하지만 이 둘은 의미와 동작 방식에서 180도 다른 결과를 낸다. 1. | (유니언 타입, 또는)유니언 타입은 여러 타입 중 하나만 만족하면 된다.쉽게 말해 **“A 또는 B”**의 개념이다. 값이 A 타입이든 B 타입이든 둘 중 하나만 해당되면 타입 검사를 통과한다.예시:type A = { name: string };type B = { age: number };let value: A | B;value = { name: "Alice" }; // OKvalue = { age: 30 }; // OKvalue = { name: "Alice", age:..

Tree-shaking 친화적이라는 말의 의미강의자가 말한 Tree-shaking 친화적이란 as const 패턴은 타입스크립트의 타입 계산에만 쓰이고, 실제 자바스크립트 코드로 변환될 때는 필요 없는 부분이 번들에 포함되지 않는다는 의미다. 반대로 TypeScript의 enum은 컴파일 시 자바스크립트 코드로 변환되기 때문에 사용하지 않더라도 번들에 포함된다.예를 들어 as const 패턴은 아래처럼 작성한다.const Direction = { Up: "UP", Down: "DOWN",} as const;type DirectionType = typeof Direction[keyof typeof Direction];이 경우 DirectionType은 타입 검사에만 사용되며, 런타임에서 Directio..

1. enum 기본 사용법enum은 기본적으로 위에서부터 순차적으로 숫자를 자동 할당한다.enum Direction { Up, Down, Left, Right,}console.log(Direction.Up); // 0console.log(Direction.Down); // 1값을 지정하면 지정한 값부터 순차 증가한다.enum Direction { Up = 3, Down, // 4 Left, // 5 Right, // 6}console.log(Direction.Left); // 5문자열도 가능하지만, 문자열형 enum은 각 값 모두 명시해야 한다.enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT"..