회원 가입과 로그인 폼에서 공통으로 사용하고 있는 Input 컴포넌트의 props 타입을 지정하는 과정에서 제네릭을 활용하는 방법을 공유하고자 합니다. React-hook-form을 사용하면서 저처럼 타입 지정에 어려움을 겪으신 분들에게 도움이 되면 좋겠습니다. 우선, 제네릭에 대해 간단하게 알아보고, 코드를 보면서 작성해 나가겠습니다. 제네릭 타입개념제네릭은 말 그대로 일반화된 데이터 타입으로, 함수, 타입, 클래스 등에서 사용할 타입을 미리 정해두지 않고, 타입 변수를 사용해 해당 위치를 비워둔 다음, 실제로 그 값을 사용할 때 외부에서 타입 변수 자리에 타입을 지정하여 사용하는 방식입니다. 들어올 수 있는 여러 타입을 일일이 지정해주지 않아도 되기 때문에 재사용성이 크게 향상된다는 장점이 있습니다...
면접에서 과제에 대해 위와 같은 질문을 받았는데, TypeScript에서는 enum 사용을 자제해야한다는 것만 어렴풋이 알고 있어서 정확히 대답하지 못했다. 이에 대해 공부하고 코드에 적용해보는 시간을 가졌다. TypeScript에서 상수를 선언하는 방법에는 1. enum 2. const enum 3. as const가 있다. 세 가지 모두 값에 의미 있는 이름을 부여할 수 있다는 장점이 있다. 즉, 상수를 구체적으로 설명할 수 있는 값을 부여할 수 있다. enum 장점 [숫자형 enum] key-value 양방향 mapping이 가능하다. 연관된 값들의 집합을 하나로 묶어 접근 가능하다. [숫자형 enum이 아닌 경우] 값과 타입 모두 사용 가능해 Object.keys, Object.values를 사용..
지금까지는 어떤 입력을 받아 이를 처리하고 완료하는 단계를 순서대로 수행하는 동기 프로그래밍을 다뤘다. 하지만 실제로는 네트워크 요청을 보내고, 데이터 베이스 및 파일 시스템과 상호작용하는 동작을 수행해야 하므로 비동기 API(콜백, 프로미스, 스트림)를 사용하게 된다. 자바스크립트는 이러한 비동기 작업을 처리할 때 멀티 스레드를 지원하는 자바나 C++와 다르게 스레드 하나로 비동기 작업을 처리한다. 자바스크립트는 이벤트 루프 기반의 동시성 모델을 이용해 멀티스레드 기반 프로그래밍에서 공통적으로 나타나는 문제점을 해결한다. (동기화된 데이터 타입의 오버헤드 등) 타입스크립트와 비동기 프로그래밍 비동기 프로그래밍은 코드를 한 줄 씩 따라가며 이해할 수 있는 구조가 아니기 때문에 이해가 어렵다. 타입스크립트..
타입스크립트는 런타임에 발생할 수 있는 예외를 컴파일 타임에 잡기 위해 최선을 다한다. 그럼에도 런타임에 발생하는 네트워크 장애, 사용자 입력 파싱 에러, 스택 오버플로, 메모리 부족 에러와 같은 에러를 모두 막을 수는 없다. 타입스크립트는 타입 시스템을 이용해 이러한 런타임 에러를 표현하고 처리하는 패턴을 제공한다. null 반환 예외 던지기 예외 반환 Option 타입 이 중 어떤 에러 처리 기법을 사용할지는 프로그래머의 이도와 응용 프로그램의 종류에 따라 달라진다. 따라서 각각의 장단점을 잘 비교해 선택해야 한다. 1. null 반환 (장점) 에러를 처리하는 가장 간단한 방법이다. 예를 들어, 사용자가 생일을 입력하는 프로그램이 있을 때 유효한 내용을 입력하면 Date가 반환되고, 아니면 null이..
1. 타입 간의 관계 1. 1 서브 타입과 슈퍼 타입 A가 필요한 곳에 B를 사용할 수 있다면 A는 슈퍼 타입, B는 서브 타입이다. 예를 들어, 객체를 사용해야 하는 곳에 배열도 사용할 수 있다. 따라서 이 경우 객체는 슈퍼 타입, 배열은 서브 타입이다. 모든 것은 any의 서브타입이고, never는 모든 것의 서브타입이다. 즉, 모든 타입을 any에 할당할 수 있고, never는 모든 타입에 할당할 수 있다. 1.2 가변성 단순 타입은 이 관계를 파악하기 쉽다. 예) number 는 number | string 유니온의 서브 타입이다. 하지만 객체나 함수와 같은 복합 타입의 경우 이 관계를 파악하기가 복잡할 수 있다. 복합 타입의 서브타입 규칙은 언어마다 다르다. type ExistingUsesr =..
TL;DR 타입스크립트에서 함수를 선언하고 실행하는 방법 함수 선언 시에 보통 매개변수의 타입은 명시적으로 정의하고, 반환 타입은 자동으로 추론하게 한다. 타입스크립트는 함수 생성자(Function)를 제외한 함수 선언문, 함수 표현식, 화살표 함수 문법을 안전하게 지원한다. this, 제네레이터, 이터레이터 타입을 지정할 수 있다. 시그니처 오버로딩 : 호출 시그니처가 여러 개인 경우 함수 선언과 호출 함수 선언 시에 보통 매개변수의 타입은 명시적으로 정의하고, 반환 타입은 자동으로 추론하게 한다. function add(a: number, b: number) { return a + b } 매개변수 타입을 추론하는 경우는 문맥적 타입화를 할 때이다. 여기에서 문맥적 타입화는 함수 타입을 별개로 선언해 ..
1. 클래스와 상속 class 키워드로 클래스를 선언하고 extends 키워드로 다른 클래스를 상속받을 수 있다. 클래스 종류 : 구체 클래스, 추상 클래스 추상 클래스: abstract로 선언하며, 추상 메서드와 추상 프로퍼티를 가질 수 있다. 추상 클래스는 바로 인스턴스화 할 수 없다. 다른 클래스처럼 필요한 메서드는 자유롭게 추가해 사용할 수 있다. 메서드는 private, protected, public 중 하나의 한정자를 가질 수 있고, 기본값은 public이다. 접근 한정자를 통해 내부 구현 정보를 너무 많이 공개하지 않고 특정 API만 노출하도록 클래스를 설계할 수 있다. 메서드는 인스턴스 메서드와 정적 메서드로 구분할 수 있다. private: 해당 클래스의 인스턴스에서만 접근 가능하다. ..
타입(type)이란 어떤 값과 이 값으로 할 수 있는 일의 집합 예를 들어, number 타입은 모든 숫자(값)와 숫자에 적용 가능한 모든 연산(+, -, *, /, %)과 숫자에 호출할 수 있는 모든 메서드(toFixed, toString 등)의 집합이다. 중요한 것은 타입스크립트가 타입 검사기를 이용해 유효하지 않은 동작이 실행되는 일을 예방한다는 것이다. // 매개변수에 타입 지정하기 function sqaureOf(n: number) { return n * n; } sqaureOf(2); // 4 sqaureOf("2"); // Argument of type 'string' is not assignable to parameter of type 'number' 위와 같이 타입을 제한하면 타입스크립트..
