분류 전체보기

타입스크립트의 다형성(Polymorphism)

다형성 (Polymorphism) 이란? poly: 여러 개(multiple) 라는 뜻을 가지고 있다. morp-: 구조(structure) 라는 뜻을 가지고 있다. 두개를 합치면 다양한 구조를 가지게 된다는 뜻이다. 다형성 적용 전 interface SuperPrint { (arr: number[]): void; (arr: boolean[]): void; (arr: string[]): void; (arr: number[] | boolean[]): void; } const superPrint: SuperPrint = (arr) => { arr.forEach((elem) => console.log(elem)); }; superPrint([1, 2, 3]); superPrint([true, false, fa..

타입스크립트 함수 호출 시그니처 설정하기

함수의 호출 방식이 하나일 때 함수의 호출 방식이 하나라는 것은 파라미터 타입, 리턴 타입이 1개의 종류로 고정되어 있다는 뜻이다. 함수 정의 시에 한번 입력하기 const add = (a: number, b: number): number => a + b; Type 을 이용해 정의하기 type AddType = (a: number, b: number) => number; const addType: AddType = (a, b) => a + b; Interface 를 이용해 정의하기 interface AddInterface { (a: number, b: number): number; } const addInterface: AddInterface = (a, b) => a + b; 오버로딩: 함수의 호출 방식..

타입스크립트 never 타입이란?

never 타입이란? 함수가 아무것도 리턴하지 않는다는 것을 보장한다. 예제 코드 function fail(msg: string): never { throw new Error(msg); }

타입스크립트 unknown 타입이란?

unknown 타입 any 와 비슷하다. 그러나 unknown 타입은 아직 어떤 타입인지 확정되지 않았기에 이를 이용한 어떠한 행위도 금지되어 있다. 에러 예제 let a: unknown; console.log(a + 100); // error Object is of type 'unknown'. 타입이 무엇인지 알 수 없으므로 아직 더할 수 없다. 에러 해결 let a: unknown; if (typeof a === "number") { console.log(a + 100); } 타입이 number 로 확정된 이후이기 때문에 더할 수 있다.

타입스크립트 튜플(Tuple) 이란?

Tuple 이란? 배열로서 각 인덱스마다 다른 타입의 값을 가지고 있는 배열을 뜻한다. 주로 파이썬과 자바스크립트에서 많이 사용하는 타입이다. 예제 const person: [string, number, boolean] = ["jake", 21, false]; // name, age, isMarried 배열의 길이가 정해져있거나, 배열의 순서가 정해져있을 때 유용하다. 해당하는 인덱스에 다른 타입을 넣으면 당연히 에러가 발생한다. API 의 스펙에서 반환 값이 오브젝트가 아닐 때 유용하다. readonly const person: readonly [string, number, boolean] = ["jake", 21, false]; 읽기 전용으로 만드는 것도 가능하다.

타입스크립트의 읽기 전용 프로퍼티 (readonly) 기능

Readonly 프로퍼티 만들기 interface Person { name: string; readonly birthYear: number; } const person: Person = { name: "Jake", birthYear: 2009, }; birthYear 는 수정될 일이 없는 값이기에 readonly 로 설정한다. readonly 프로퍼티를 수정하면 에러가 날 것이다. 객체나 배열에도 적용이 가능하다. 배열에 적용하면 push() 와 같은 메서드를 실행할 때 에러가 난다. 바닐라 자바스크립트에서는 Object.freeze() 를 이용하자. 제약이 많을수록 버그는 줄어들게 된다는 것을 명심하고 적극 활용하자.

타입스크립트 함수의 반환 타입 설정하기

일반 함수 function foo(): string { return "foo"; } 화살표 함수 const bar = (): string => { return "bar"; };

타입스크립트의 optional property 와 사소한 주의점

Optional Property 타입스크립트로 객체를 정의했을 때, 선택적으로 프로퍼티를 받을 수 있는 기능이다. 적용 전 interface Person { name: string; age: number; } const person: Person = { name: "Jake", }; 위와 같이 interface 를 작성하면, Person 타입에 대해 age 가 필수적으로 입력되어야 한다. 입력하지 않는다면, age 를 입력하지 않았다고 에러가 발생한다. 적용 후 interface Person { name: string; age?: number; // age?: number 로 변경 } const person: Person = { name: "Jake", }; 위와 같이 작성하면, age 는 더이상 필수적..

타입스크립트의 명시적, 묵시적 타입 시스템과 어떤 것을 사용해야 하는가?

기본 동작 원리 타입스크립트는 타입스크립트 코드를 자바스크립트 코드로 만들어 실행시킨다. 브라우저는 타입스크립트를 이해하지 못하기 때문에 자바스크립트로의 번역 과정이 필요하다. Node.js 는 타입스크립트를 이해하고 번역해줄 수 있다. 타입스크립트의 타입 시스템 타입스크립트는 두가지 방식을 사용한다. 명시적 타입 묵시적 타입 (타입 추론) let explicitType: string = "abc"; // 명시적 타입 let implicitType = "abc"; // 묵시적 타입 묵시적 타입의 경우 implicitType 이라는 변수 내부에 당연히 문자열이 들어올 것이라 예측한다. let implicitType = "abc"; // 묵시적 타입 implicitType = 1234; 위 경우, 자바스크립..

우리는 왜 타입스크립트를 사용하는가?

왜 타입스크립트인가? 결정적으로 자바스크립트가 가지고 있지 않은 타입 안정성 을 제공하게 된다. 좋은 개발자 경험 파라미터, 인수 등에 대한 헷갈림을 없애고 많은 부분 intellisense 를 지원할 수 있게 된다. 런타임 에러의 방지 런타임 시 발생하여 프로덕션에 치명적일 수 있는 에러를 코드 작성 타임에 알려준다. 자바스크립트의 문제는 무엇이었는가? 모든 방면에서 개발자를 이해하려 한다. 언어 내부에서 최대한 에러를 보여주지 않으려 노력하고 있다. 개발자의 실수를 제대로 짚어주지 못할 수 있다. 말도 안되는 연산 수행 console.log([1, 2, 3, 4] + false); // it logs '1,2,3,4false' 위 코드의 결과는 '1,2,3,4false' 가 된다. 타입만 놓고 보자면..

7월 3째주 주간 회고

7월 셋째주 회고거리 무엇이 기술블로그를 계속 운영하게 만드는가? 직장 후배에게 들은 질문이다. 이에 대한 내 대답은 동문서답일 수 있지만, 일할 때의 감정이 중요하다는 것이다. 일을 할 때 일로 받는 고통을 줄이는 최고의 방법은 일을 하면서 좋은 감정을 느끼는 것이다. 일례로 매일 정화조에 있는 사람들의 오물을 치우더라도, 다른 사람들이 봐줄 때 대의를 위해 희생하는 멋진 사람정도로 봐주면서 보상도 좋다면, 나는 일을 할 때마다 적어도 뿌듯한 감정을 느낄 수 있고, 그 일을 지속할 수 있다. 그러나 보상도 그저 별볼일 없는 데다가 냄새나는 역겨운 사람정도로 볼 뿐이라면 금방 다른 직업을 알아보게 될 것이다. 좋은 감정에는 여러가지 종류가 있다. 나는 블로그를 하며 성장, 인정, 지적 유희, 성취감 등…..

Next.js API 핸들러 커스텀 미들웨어 구성하기

개요 Next.js 에서는 /pages/api 경로 아래에 완전히 백엔드에서만 동작하는 API 를 구성할 수 있도록 Next.js API Routes 를 제공하지만, 이와 함께 사용하며 HTTP Method 를 필터링해주거나 세션 인증 여부에 따른 페이지 반환 등을 해줄 미들웨어의 지원이 부족하다. (아니면 내가 아직 Node.js 서버 라이브러리에 대해서 무지해서 모르는 것일 수도 있다.) 하지만, 높은 자유도가 있어서 직접 만들면 되는 부분이다. 구성 코드 API 응답 형태 및 HTTP Method enum 정의 export interface ApiResponse { ok: boolean; status: number; message?: string; [key: string]: any; } export..