
▶타입스크립트의 제네릭(Generics) 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용되는데요. 🔎 제네릭의 정의와 예시 - 타입을 함수의 파라미터처럼 사용하자 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다. 일반적인 자바스크립트의 함수 형태에서 살펴봅시다. function getText(text) { return text; } 위 함수는 text라는 파라미터에 값을 넘겨 받아 text를 반환해 주는 함수입니다. 'hi', 10, true 등 어떤 값이 들어가더라도 그대로 반환합니다. getText('hi'); // 'hi' getText(10);..

▶타입스크립트 클래스(Class) 타입스크립트에서의 클래스를 알아봅시다😀 🔎 클래스? 자바스크립트에서는 ES6에서부터 클래스 문법을 지원하고 있습니다. 클래스를 사용하는 가장 큰 이유는 재사용성 입니다. 객체를 직접 작성하여 정의하고 생성할 수도 있지만, 클래스로 만들어주면 여러 객체를 더 쉽게 만들 수 있습니다. → 클래스는 객체를 생성하기 위한 틀 💡 🔎 ES6 이전에는 객체를 그냥 다 작성해줬을까? ES6 이전 문법에서도 재사용성을 위해 생성자 함수라는 것을 통해 ES6에서의 클래스와 동일한 역할을 수행했는데요. 📄 class.js 코드 // ES6 이전 - 생성자 함수 function Person(name, age) { this.name = name; this.age = age; } var doe..

▶타입스크립트 이넘(Enums) 이넘은 특정 값들의 집합을 의미하는 "자료형"입니다. 🔎 이넘(Enums) ? - 사용될 수 있는 값을 묶어두자! 이넘은 특정한 값들을 집합으로 가지고 있는 자료형입니다. 예를 들면 아래와 같은 목록이 이넘이 될 수 있습니다. enum Shoes { Nike, Adidas, } 🔎 이넘 사용하기 이넘으로 정의하게 되면 딱 그 값들만 사용할 수 있게 되는데요. 위에서 정의한 Shoes라는 이넘을 사용해 봅시다. 🔎 숫자형 이넘 만약에 다음과 같이 작성했다고 해봅시다. var myShose = Shoes.Nike; console.log(myShose); // 0 그러면 내가 Nike에 값을 할당하지도 않았는데 콘솔로 찍어보게 되면 0이 출력되게 됩니다. 초기값을 할당해주지 않..

▶타입스크립트 인터섹션 타입(Intersection Type) 인터섹션 타입은 여러 타입을 모두 만족하는 하나의 타입을 의미합니다. interface Person { name: string; age: number; } interface Developer { name: string; skill: number; } type Dev = Person & Developer; 위 코드는 Person 인터페이스의 타입 정의와 Developer 인터페이스의 타입 정의를 & 연산자를 이용하여 합친 후 Capt 이라는 타입에 할당한 코드입니다. 결과적으로 Dev의 타입은 아래와 같이 정의됩니다. { name: string; age: number; skill: string; } 저번 글에서 유니온 타입을 알아보았을 때 함수..

▶타입스크립트 유니온 타입(Union Type) 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자( || )와 같이 A이거나 B이다 라는 의미의 타입입니다. 🔎 유니온 타입이 없어도 function logMessage(value: any) { console.log(value); } logMessage('hello'); logMessage(100); logMessage라는 함수에 string값도 넣고 싶고 number값도 넣고 싶을 때 value의 타입을 any로 해도 에러가 발생하지는 않습니다. 다만 이렇게 할 경우 타입스크립트의 장점이 사라지게 되는 것과 마찬가지인데요. 이는 유니온 타입의 장점과도 이어지므로 밑에서 설명을 이어서 하겠습니다. 🔎 유니온 타입 사용하기 사용하는 방법은 단순..

▶타입스크립트 타입 추론(Type Inference) 타입 추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미합니다. 🔎 타입 추론의 기본 타입스크립트가 타입 추론을 해나가는 과정은 다음과 같습니다. let x = 3; // 타입 지정X 위와 같이 x에 대한 타입을 따로 지정하지 않더라도 일단 x는 number로 간주됩니다. 이렇게 변수를 선언하거나 초기화 할 때 타입이 추론됩니다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 대 타입 추론이 일어납니다. 🔎 가장 적절한 타입(Best Common Type) 타입은 보통 몇 개의 표현식(코드)을 바탕으로 타입을 추론합니다. 그리고 그 표현식을 이용하여 가장 근접한 타입을 추론하게 되는데 이 가장 근접한 타입을 Best Com..
- Total
- Today
- Yesterday
- jest
- JSP
- Python
- 자바스크립트 기초
- 리액트
- testing
- 리액트 훅
- 자바
- frontend
- TypeScript
- 인프런
- react
- 프론트엔드 공부
- 데이터분석
- 스타일 컴포넌트 styled-components
- HTML
- next.js
- CSS
- 머신러닝
- 자바스크립트
- 디프만
- 프로젝트 회고
- 딥러닝
- 프론트엔드 기초
- 타입스크립트
- styled-components
- 파이썬
- rtl
- 프론트엔드
- react-query
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |