드리프트의 코-자-경(코딩, 자동차, 경제)

안녕하세요? 최근 들어 저의 최애 툴인 NextJS와 TailwindCSS에 요즘 공부 중인 Typescript을 추가로 설치하는 방법에 대해 알아볼까 합니다. NextJS 공식 홈페이지에서는 다음과 같은 옵션으로 NextJS와 Typescript을 설치할 수 있는데요. npx create-next-app@latest --ts # or yarn create next-app --typescript 이렇게 NextJS와 Typescript을 설치한 후 TailwindCSS를 수동으로 설치할 수 있는데요. 이것보다는 NextJS + TailwindCSS를 먼저 설치한 후 Typescript을 추가하는 것이 좀 더 편하기 때문에 이 방법을 알아보겠습니다. 먼저, 다음과 같이 NextJS + TailwindCSS..

안녕하세요? 오늘은 타입스크립트의 class에 대해 알아 보겠습니다. class는 다른 언어에서도 제공하고 있고 예전에는 객체지향 프로그래밍이 아주 유행했었는데요. C++ 의 Qt 나 윈도우즈의 MFC 라이브러리 모두 class를 이용한 결과입니다. class는 사용하면 아주 강력한 기능이 될 수 도 있는데요. 유지 보수가 어려워 그냥 함수형 프로그래밍 같이 직관적인 프로그래밍이 요즘 대세가 되었습니다. 본인도 class는 React 프로그래밍에서는 잘 안 쓰는데요. 그래도 타입스크립트에서 제공하는 class 기능을 잠깐 맛보기로 알아 보도록 하겠습니다. 예제를 들어 설명할까 하는데요. 간단한 데이터베이스 DB를 class로 만들어 볼까요? interface Database { get(id: string..

안녕하세요? 오늘은 타입스크립트의 enum과 literal 에 대해 알아 보겠습니다. enum은 다른 언어에서도 자주 나오는 타입인데요. 특히, C 언어에서 자주 쓰입니다. 특정 상태를 나타낼 때 아주 유용하거든요. const beforeLoad = "beforeload"; const loading = "loading"; const loaded = "loaded"; const isLoading = (state: string) => state === loading; console.log(isLoading("dog")); 위 코드를 보시면 우리가 React에서 많이 쓰이는 isLoading 함수가 있는데요. 뭔가가 좀 엉성합니다. 이제 이 코드를 enum으로 다시 바꿔 볼까요? // const beforeL..

안녕하세요? 이번 시간에는 타입스크립트의 Immutability에 대해 알아 보겠습니다. 간혹가다가 코드를 짤 때 변경되지 않았으면 하는 데이터 타입이 있습니다. 이럴 때는 어떻게 해야 할까요? const로 변수를 지정하면 변수값은 변경되지 않는데요. 객체의 경우에는 const 로 선언해도 객체의 내용이 변경될 수 있습니다. 다음 예를 들어 설명해 볼까요? interface Cat { name: string; breed: string; } function makeCat(name: string, breed: string): Cat { return { name, breed } } const kihun = makeCat("squid cat", "squidGame") kihun.name = "kihun" Cat..

안녕하세요? 이번 시간에는 타입스크립트에서 자체적으로 제공하는 Utility Types에 대해 알아 보겠습니다. https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 공식 홈페이지를 보면 Utility Types으로 제공하는게 아주 많은 데요. 우리는 가장 많이 쓰이는 몇가지에 대해 예를 들어 알아 보겠습니다. 1. Partial 먼저 Partial에 대해 알아 보겠습니다. Partial을 언제 쓰이는지는 예를 들어 보면 쉽게 이해 할 수 있습니다. 다음과 같이 My..

안녕하세요? 지난 시간에 이어 타입스크립트 제네릭에 있어 keyof 연산자를 사용하는 방법에 대해 알아보겠습니다. 우리가 객체에서 특정 항목을 기준으로 객체의 값을 뽑아주는 함수를 만들려고 한다고 가정해 봅시다. const squid = [ { name: "Ki-Hoon", id: 456, }, { name: "Sae-Byuk", id: 67 } ] 자, 위와 같은 객체의 배열이 있다고 합시다. 여기서 객체의 항목 중에 name과 id가 있는데, 이 항목 중에 한 개만 골라서 출력하는 함수를 만들어 보겠습니다. function extract(items: unknown[], key: string) : unknown[] { } 함수의 형태를 unknown 타입으로 만들어 보았는데요. items라는 배열과 k..

안녕하세요? 오늘은 타입스크립트에 제공하는 제네릭(Generics)에 대해 알아보겠습니다. C++, Java 같은 고급 언어에서는 제네릭을 기본 제공하고 있는데요. 타입스크립트에서도 제네릭을 쓸 수 있습니다. 어떻게 하는지 함께 알아보겠습니다. 일단 지난 시간에 만들었던 코드를 볼까요? function simpleState(initial: string): [() => string, (v: string) => void] { let str: string = initial; return [ () => str, (v: string) => { str = v; } ] } simpleState라는 클로저를 이용한 함수입니다. 그런데 잘 보시면 string 이란 타입이 여러 군데 보이는데요. 제네릭은 특정 타입을 이용..

안녕하세요? 오늘은 타입스크립트 타입 중에 튜플에 대해 알아보겠습니다. 자바스크립트에서 배열은 다른 언어와는 다르게 다른 타입의 항목이 무작위로 들어가도 되는 특이한 타입입니다. 예를 들어 볼까요? let arr = ["hello", 20, true]; 위와 같이 자바스크립트 배열은 그 항목이 뒤죽박죽 될 가능성이 상당히 높습니다. 그래서 자바스크립트에서는 배열에 무엇이 있는지 정확히 알고 코드를 짜야하기 때문에 여간 불편한 게 아닙니다. 그럼 타입스크립트에서는 어떻게 할까요? let role: string[] = ["admin", "manager", "user"]; 위 코드는 그냥 string으로 된 배열인데요. 만약 여기에 숫자를 넣는다면 어떻게 될까요? let role = ["admin", "man..

안녕하세요? 오늘은 지난 시간에 잠깐 알아 보았던 타입스크립트의 옵셔널 체이닝(Optional Chaining)에 대해 알아 보겠습니다. 예제를 작성해 가면서 알아볼겠습니다. 1. 옵셔널 파라미터(Optional Parameters) function printIngredient(quantity: string, ingredient: string) { console.log(`${quantity} ${ingredient}`); } printIngredient("1C", "Flour"); 먼저, 레시피를 출력하는 함수를 만들었는데요. 레시피에 들어갈 재료의 양(quantity)과 재료이름(ingredient)을 출력하는 함수입니다. 출력 결과도 정상적으로 작동하게 되죠. 그런데 만약에 다음과 같이 재료 이름이 ..

안녕하세요? 오늘은 함수 오버로딩에 대해 알아보겠습니다. C++이나, Java 같은 고급 언어에서는 함수 오버로딩을 지원하는데요. 함수 오버로딩이란 함수 이름은 같지만 함수의 인자가 다를 경우를 지원해주는 방식입니다. 그럼, 타입스크립트에서 함수 오버로딩하는 방법에 대해 알아보겠습니다. 예제 파일을 만들어 볼까요? // parseCoordinate.ts interface Coordinate { x: number; y: number; } function parseCoordinateFromObject(obj: Coordinate): Coordinate { return { ...obj, } } function parseCoordinateFromNumbers(x: number, y: number): Coordi..