본문 바로가기

Language

 (101)
<TS> 태그드 유니온 패턴 1. 소개 이펙티브 타입스크립트에서 다음과 같이 Tagged Union Pattern을 시작하고 있다. 효과적으로 타입을 설계하려면, 유효한 상태만 표현할 수 있는 타입을 만들어 내는 것이 가장 중요합니다. - 아이템28, p156 - 태그드 유니온 패턴은 타입에 태그를 추가하여 효율적으로 타입을 설계할 수 있는 방식이다. 이를 어디서 활용하면 좋을지 크게 두 가지로 나누어 정리해 보았다. 2. 사용 * 각 필드가 연관되어 특정될 경우 - 특정 페이지의 상태를 설계한다고 생각해보자. 아마 다음과 같은 타입의 상태를 정의할 수 있을 것이다 interface State { pageText: string; isLoading: boolean; error?: string; } - 단순히 봤을 때는 문제가 없어 보..
<TS> 타입가드 * 소개 - 타입가드는 타입스크립트 컴파일러가 더 명확하게 타입을 예측할 수 있도록 코드를 작성하는 방법 중 하나이다. 공식문서를 찾아보니 Narrowing(좁히기)와 동의어로 쓰이는 것 같아서 정리해보려한다. - 이번 포스팅에서 다루는 타입가드의 종류는 7가지 이다. * typeof Type Guards * Truthiness Narrowing * Equality Narrowing * The in operator Narrowing * instanceof Narrowing * Using type predicates * Discriminated Unions * typeof Type Guards - 가장 기본적으로 알고 있는 타입가드방식이다. data는 number 또는 string을 받을 수 있으나 typ..
<TS> 효과적으로 타입 명시하기 1. 소개 필자가 타입스크립트를 사용하던 초반엔 선언하는 모든 곳에 당연히 타입을 명시해야 한다고 생각했다. 하지만 타입스크립트를 계속 쓰다보니 자연스럽게 타입추론이 생각보다 잘 일어난다는 것을 깨달았고, 단순한 선언 구문에서는 사용하지 않았다. 타입 스크립트의 많은 타입 구문은 사실 불필요합니다. 이펙티브 타입스크립트 p.108 그럼에도 불구하고 타입을 언제 명시하는 것이 좋을지에 대해서는 크게 생각해본 적이 없었다. 그러나 최근 이펙티브 타입스크립트를 읽으며 타입추론에 대해 좀 더 자세하게 접하게 되었고, 그 중 어떤 상황에서 타입명시를 쓰면 좋을지에 대해 읽고 정리해보았다. 타입이 추론될 수 있음에도 여전히 타입을 명시하고 싶은 몇 가지 상황이 있습니다. 이펙티브 타입스크립트 p.112 2. 사용 ..
<TS> 유틸리티 타입으로 반복 줄이기 1. 반복 줄이기 - 타입스크립트를 사용하다보면 실제 런타임에 동작하지 않는 코드(타입 관련 코드)임에도 반복되는 작업들을 하는 경우가 생긴다. - 실제 런타임에 동작하는 코드에서는 다양한 방식으로 반복을 줄이기 위해 노력한다. 하지만 우리는 타입스크립트의 타입과 관련된 부분에서는 크게 신경쓰지 않거나 어떻게하면 좋을지 모르곤 한다. 이를 해결하기 위해 타입스크립트에서 어떻게 이러한 부분을 해결할 수 있을지 알아보자. * 확장 - 인터페이스의 확장은 반복을 제거하는 방법 중 하나이다. interface Person { firstName: string; lastName: string; } interface PersonWithBirthDate extends Person { birth: Date; } - 타입..
<ES2022> ES2022 Features 1. 소개 - 올해는 작년보다 많은 기능이 추가되었다. 특히 객체지향을 위한 클래스의 기능들이 눈에 띈다. TS나 바벨을 기존에 사용했던 개발자들이라면 이미 쓰고 있었던 기능이라 새삼스러울 수도 있지만 정식 스펙으로 채택된 건 ES2022이다. - ES2022외의 다른 버전의 스펙이 궁금하다면 필자의 다른 글도 참고해보길 바라며, ES2022의 기능들에 대해 알아보자. 2. 기능 * Class Fields - 클래스 필드에 많은 기능이 추가 되었다. tc39에 표기되어있는 바로는 Private instance methods and accessors, Class Public Instance Fields & Private Instance Fields, Static class fields & Private S..
<JS> 스코프란 1. 컴파일러 이론 * 스코프 소개 - 프로그래밍 언어라면 변수에 값을 저장하고 그 값을 가져다 쓰고 수정할 수 있다. 하지만 여기서 의문이 드는 점이 있다. 변수는 어디에 있는가? 변수가 필요할 때 프로그램은 그것을 어떻게 찾는가? - 위 질문에서 알 수 있듯 변수는 어디에 저장되는지, 어떻게 찾을지를 정의한 규칙이 필요하다. 이것이 바로 스코프이다. * 컴파일러 이론 - 자바스크립트는 일반적으로 인터프리터 언어로 분류한다. 하지만 실제로는 컴파일러 언어이다. 다른 컴파일러 언어처럼 코드를 미리 컴파일하거나 컴파일한 결과를 분산시스템에서 이용할 수 있는 것은 아니다. 그럼에도 불구하고 자바스크립트 엔진은 컴파일러가 하는 일들을 우아하게 처리하고 있다. - 컴파일러 언어의 처리 과정을 살펴보자. 소스 코..
<JS> 암시적 변환 1. 암시적변환 - 암시적 강제변환(이하 암시적 변환)은 부수 효과가 명확하지 않게 숨겨진 형태로 일어나는 타입변환이다. 대부분 암시적 변환은 위험하고 나쁜 코드라고 생각하기 쉽다. 필자 또한 그랬고 수많은 개발자들도 그렇게 생각하고 있다. 하지만 암시적 변환의 목적은 불필요한 상세 구현을 줄이는 것이다. 이미 나도 모르는 사이에 읽기 좋은 코드를 위해 쓰고 있었을 수도 있다. - 먼저 JS코드를 보기 전에 엄격한 타입 언어에서 말하는 이론적인 의사코드를 보자. SomeType x = SomeType(AnotherType(y)) - 어떤 y 값을 SomeType인 x에 할당하였다. 이 언어에서는 바로 SomeType으로 변환할 수 없어서 중간단계를 거쳤다고 가정하였다. 이를 만약 다음과 같이 작성할 수 ..
<JS> 특수 값과 레퍼런스 1. 값 아닌 값 * undefined와 null - 자바스크립트에서는 undefined 타입과 null 타입이 존재한다. 이들은 각각 undefined와 null 값만을 갖는 타입이다. 즉 둘은 타입과 값이 같다. 둘 다 '빈 값' 또는 값이 아님을 의미한다. 하지만 둘은 엄연히 차이가 있다. - null은 식별자가 아닌 특별한 키워드이므로 변수를 할당할 수 없다. 그러나 undefined는 식별자로 쓸 수 있어서 변수를 할당할 수 있다. - 느슨한 모드에서는 전역 스코프에서도 undefined라는 식별자에 값을 할당할 수 있고, 심지어 모드에 상관없이 지역 변수를 생성할 수 있다. function foo() { "use strict" var undefined = 2; console.log(undefi..
<ES2021> ES2021 Features 1. 소개 - ES2021 에는 다음과 같은 기능들이 추가되었다. 2. 기능 * Replace All - es2021에서 드디어 자바스크립트에도 replaceAll 이 생겼다. 자바스크립트의 replace는 가장 처음에 등장하는 문자열을 변경하는 메서드이다. 따라서 해당하는 문자열을 모두 바꾸려면 반복문을 돌리든지 정규표현식의 g 옵션을 사용했어야 했다. const str = 'harry is a developer. harry is smart.'; const test1 = str.replace('harry', 'IU'); console.log(test1); // IU is a developer. harry is smart. - 위의 코드를 보면 'harry' 라는 문자열은 2개 이지만 먼저 나온 문자열만..
<ES2020> ES2020 Features 1. 소개 - ES2020 에서는 드디어 BigInt와 matchAll이 추가되었다. 그 외에도 globalThis와 옵셔널체이닝, 널병합연산자 등 편의를 위해 자주 쓰이는 기능들이 추가되었다. 2. 기능 * BigInt - 자바스크립트의 숫자 최댓값은 2^53 - 1로 제한되어있다. 더 큰 정수를 저장할 수 없는 것은 아니지만 처리할때 문제가 발생하곤 한다. let limit = Number.MAX_SAFE_INTEGER; console.log(limit); // 9007199254740991 limit++; console.log(limit); // 9007199254740992 limit++; console.log(limit); // 9007199254740992 limit++; console.log..

티스토리툴바