[Review] 한입 Typescript 강의 후기

01강의소개이 강의는 타입스크립트를 처음 배우거나, 기존에 배웠지만 제대로 이해하지 못한 분들을 위한 강의입니다! 타입스크립트는 이제 선택이 아닌 필수로 자리 잡았지만, 문법만 어설프게 익히고 넘어가면 그 강력한 기능들을 제대로 활용하기 어렵죠. 이 강의에서는 단순한 문법 암기가 아니라, 타입스크립트가 어떻게 동작하는지, 왜 그렇게 설계되었는지까지 쉽게 배울 수 있어요. 특히, 강사님이 개념을 쉽고 재미있게 설명해 주시고, 다양한 시각 자료와 예제를 활용해서 어려운 내용도 부담 없이 따라갈 수 있어요. 그리고 강의와 함께 제공되는 핸드북을 통해 복습도 편하게 할 수 있죠!이 강의가 끝나면, 이제 여러분도 타입스크립트 마법사가 되어 있을 거예요! 🧙‍♂️✨  👉인프런 강의 바로가기 한 입 크기로 잘라먹..

• format_list_bulleted ...기타/REVIEW
• · 2025. 3. 7.
• textsms

[TS] 유틸리티 타입 (Utility Types)

01유틸리티 타입 이란?타입스크립트에는 반복적으로 사용되는 패턴을 쉽게 적용할 수 있는 유틸리티 타입(Utility Types) 이 제공됩니다. 이 유틸리티 타입을 활용하면 코드를 더 간결하고 안전하게 작성할 수 있어요!  유틸리티 타입은 맵드 타입(Mapped Types) 기반과 조건부 타입(Conditional Types) 기반으로 나눌 수 있습니다.📌 맵드 타입 기반 → 객체의 속성을 변형하는 유틸리티 입 예: Partial, Required, Readonly, Pick, Omit 등객체의 특정 속성을 선택적으로 만들거나(Readonly, Partial), 필수로 변경(Required) 하는 등의 변형을 쉽게 수행할 수 있습니다.📌 조건부 타입 기반 → 특정 타입을 제거하거나 추출하는 유틸리티 ..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 6.
• textsms

[TS] 조건부 타입 (Conditional Types)

01조건부 타입 이란?조건부 타입은 어떤 조건이 참인지 거짓인지에 따라 다른 타입을 반환하는 기능입니다.type A = number extends string ? number : string; 여기서 number extends string은 거짓이니까, A의 타입은 string이 됩니다 💡 예제: 객체 타입 비교객체 타입에서도 동일한 원리가 적용됩니다.type ObjA = { a: number };type ObjB = { a: number; b: number };type B = ObjB extends ObjA ? number : string;ObjB는 ObjA를 포함하는 상위 타입이므로, B의 타입은 number가 됩니다.02제네릭 조건부 타입제네릭을 활용하면 타입을 유동적으로 설정할 수 있습니다!ty..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 5.
• textsms

[TS] 제네릭 (Generics)

01제네릭이란?제네릭은 간단하게 "함수나 클래스, 객체 등이 다양한 타입을 처리할 수 있도록 도와주는 도구"라고 할 수 있습니다. 예를 들어, 우리가 숫자나 문자를 다루는 함수가 필요할 때, 각기 다른 타입을 처리하려면, 그때마다 함수를 따로 만들어야 할 수도 있죠. 그런데 제네릭을 사용하면, 한 번만 작성한 함수로 다양한 타입을 처리할 수 있게 됩니다. 1. 제네릭이 필요한 이유예를 들어, 우리가 받은 값에 대해 그 값을 그대로 반환하는 함수가 있다고 생각해 볼게요.처음에는 이런 방식으로 작성할 수 있죠:function func(value) { return value;}이 함수는 어떤 타입이든 받을 수 있지만, 타입스크립트에서 any나 unknown을 사용하게 되면 그 타입이 추론되지 않아서 문제가 ..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 3.
• textsms

[TS] 클래스 (class)

01자바스크립트의 클래스자바스크립트에서 클래스는 객체를 쉽게 만들 수 있도록 도와주는 템플릿 같은 것이죠. 예를 들어, 여러 명의 학생을 관리한다고 할 때, 학생들의 이름, 나이, 성적 등을 매번 하나씩 쓰는 대신에 클래스를 사용하면 학생을 만드는 틀(템플릿)을 만들고, 그 틀을 바탕으로 여러 명의 학생 객체를 만들 수 있어요.1. 클래스 선언클래스는 객체의 틀을 정의하는 것입니다. 클래스 선언은 class 키워드로 시작합니다.class Student { // 클래스의 내용} 2. 필드 (프로퍼티) 선언클래스 안에서 객체가 가질 속성들을 정의할 수 있습니다.class Student { name; age; grade;} 3. 생성자생성자는 객체를 만들 때 사용되는 특수한 메서드입니다. 객체의 프로퍼..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 1.
• textsms

[TS] 인터페이스 (Interface)

01인터페이스 (Interface)인터페이스는 타입을 정의할 때 사용하는 문법 중 하나이며, 타입 별칭과 비슷한 기능을 합니다.하지만 인터페이스는 상속이나 합침 같은 특수한 기능을 제공합니다.1. 선택적 프로퍼티인터페이스에서는 ?를 사용하여 선택적 프로퍼티,즉 해당 프로퍼티가 있어도 되고, 없어도 되는 경우를 정의할 수 있습니다.interface Person { name: string; age?: number; // age는 선택적 프로퍼티}const person1: Person = { name: "John" }; // age가 없어도 됨const person2: Person = { name: "Jane", age: 25 }; // age가 있어도 됨 2. 읽기 전용 프로퍼티readonly 키워드를..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 2. 28.
• textsms

[TS] 함수와 타입

01함수 타입 정의타입스크립트에서 함수 타입을 정의하려면 함수가 받는 매개변수의 타입과 반환값의 타입을 정의해 주면 돼요. 예를 들어, 두 개의 숫자를 더하는 함수는 다음처럼 정의할 수 있어요.여기서 반환값의 타입은 명시적으로 직접 지정해주거나 타입스크립트가 자동으로 추론해서 number로 지정해 줍니다.function add(a: number, b: number) { return a + b;}const add = (a: number, b: number): number => a + b;   ✅ 기본값함수의 매개변수에 기본값을 설정할 수 있어요. 기본값을 설정하면, 인자가 주어지지 않았을 때 기본값이 사용돼요.function greet(name: string = "Guest") { console.log..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 2. 27.
• textsms

[TS] 타입 시스템

01객체 타입 호환성 (Object Type Compatibility)객체 타입 호환성은 간단히 말해서, 두 객체가 비슷한 구조일 때 서로 바꿔 사용할 수 있다는 개념입니다.객체의 속성 이름과 타입이 같으면, 두 객체를 서로 호환된다고 보는 거죠. 예를 들어, name과 price 속성이 있는 객체가 있다면, 이 두 객체는 서로 호환된다고 판단합니다.객체의 구조가 맞다면 타입이 맞다고 간주되기 때문에, 쉽게 값을 교환할 수 있게 되죠.type Book { name: string; price: number;}let myBook: Book = { name: "Learning TypeScript", price: 30000, author: "John Doe" // Error: 타입에 정의되지 않은 속..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 2. 26.
• textsms