인덱스 시그니처가 정의된 타입에서 Omit 유틸리티 타입을 사용하면?
인덱스 시그니처, Exclude, Omit 타입 유틸리티에 대한 이해
다음과 같이 인덱스 시그니처가 정의되어 있는 타입이 있다. TypeWithIndexSignature에서 c라는 속성을 제거하고 싶어 Omit 유틸리티를 사용했을 때 원하는 타입을 얻을 수 있을까? 내가 원하는 타입의 형태는 아래와 같다. 하지만 아래와 같이 엉뚱한 타입을 얻게된다. 왜 그럴까? 이유를 알기 위해서는 Omit 유틸리티에 사용되는 Exclude 유틸리티와, Omit 유틸리티 타입에 대해서 이해해야 한다. Exclude 타입에 대해…
2023-03-15
cdn
cdn의 개념과 원리
cdn이란? cdn이란 content delivery network의 약어로 빠른 콘텐츠 전달을 목적으로 고안되었다. 엔드 유저와 서버 사이의 물리적인 거리를 줄여서 콘텐츠 로딩에 소요되는 시간을 최소화한다. 전세계에 캐시 서버를 분산 배치하여 엔드 유저의 요청에 오리진 서버가 아닌 엔드 유저에 근접한 캐시 서버가 콘텐츠를 전송한다. 거리가 먼 오리진 서버가 아닌, 가까운 캐시 서버에서 콘텐츠를 받아오기 때문에 로딩에 소요되는 시간을 획기적으…
2022-12-16
이펙티브 타입스크립트 6장
타입 선언과 @types
devDependencies에 typescript와 @types 추가하기 devDependencies에는 프로젝트를 개발하고 테스트하는 데 사용되지만, 런타임에는 필요 없는 라이브러리가 포함된다. typescript와 @types는 런타임에서 사용되지 않기 때문에 devDependencies에 설치되어야한다. 타입스크립트 프로젝트 의존성 타입스크립트 자체 의존성 팀원들 모두가 항상 동일한 버전을 설치한다는 보장이 없다. 프로젝트를 셋업할 때 …
2022-12-09
package manager
Yarn Berry는 왜 사용하는걸까?
패키지 매니저 공부 배경 위투디 프로젝트에서 사용했던 기술을 바탕으로 2개의 프로젝트를 진행해보려고 한다. 2개의 프로젝트 모두 웹에서 디자인 할 수 있는 canvas api를 사용하기 때문에 두 프로젝트가 컴포넌트를 공유하여 사용할 수 있도록 제작하려 한다. 물론 버튼이나, 레이아웃 등의 기타 컴포넌트도 공통적으로 관리하여 개발 생산성을 높일 것이다. 이런 공통적인 기능을 어떻게 유지할까 고민해봤다. 패키지로 만들어서 관리하는 방식. 모노레…
2022-12-07
이펙티브 타입스크립트 5장
any 다루기
처음에 타입스크립트를 사용했을 때 잘몰라서 any 키워드를 가끔 사용하곤 했다. any는 타입 시스템을 뭉개버리기 때문에 최소한으로 사용을 해야한다. any 키워드로 정의된 변수는 프로젝트 내에서 전염병처럼 퍼져나갈 수 있다... any를 잘 다루는 방법에 대해서 알아보도록 하자. any 타입은 가능한 좁은 범위에서만 사용하기 any를 사용해서 타입 시스템의 오류를 피하고자 아래와 같은 두가지 방식으로 처리하였다. 어떤 것이 더 좋은 해결책일…
2022-12-02
이펙티브 타입스크립트 4장
타입 설계
유효한 상태만 표현하는 타입을 지향하기 유효한 상태만 표현한다는 것의 의미가 무엇일까. 유효하지 않은 상태가 있음으로써 버그가 생기는 것이라고 할 수 있을 것 같다. 예시를 통해서 이해해보도록 하자. api를 호출하고 비동기적으로 데이터를 받아옴으로써 페이지의 상태를 다음과 같이 표현할 수 있다. 위와 같은 상태 설계는 유효하지 않은 상태가 존재함으로 버그가 생길 수 있다. 유효하지 않은 상태는 isLoading이 true이고, error 값…
2022-12-01
이펙티브 타입스크립트 3장
타입 추론
타입 추론 타입스크립트는 타입 추론을 적극적으로 수행한다. 타입 구문의 수를 엄청나게 줄여주기에 코드의 전체적인 안정성이 향상된다. 숙련된 타입스크립트 개발자는 비교적 적은 수의 구문을 사용한다. 추론 가능한 타입을 사용해 장황한 코드 방지하기 위의 예시에서 a에 굳이 number라는 타입을 명시해줄 필요가 없다. 타입스크립트에서 자동으로 추론해주기 때문이다. 객체의 경우 객체의 경우에도, 타입 추론이 의도한 타입과 동일하다면 굳이 타입을 명…
2022-11-01
Node.js, Express, MongoDB
Node.js, Express, MongoDB란?
Node.js란 Node.js는 Chrome의 V8 엔진으로 빌드된 자바스크립트 런타임이다. 기존에 자바스크립트는 브라우저에서만 구동 가능한 언어였다. 구글이 매우 빠른 자바스크립트 엔진인 V8을 출시하자 이를 바탕으로 브라우저 외 환경에서 자바스크립트 런타임을 구축하기 시작했다. 이벤트 기반 이벤트 기반이란 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식을 의미한다. 예시로 클릭이나 네트워크 요청 등이 있을 수 있다. 논 블로킹 논 …
2022-10-19
이펙티브 타입스크립트 2장
타입스크립트의 타입 시스템
편집기를 사용하여 타입 시스템 탐색하기 많은 개발자들이 vscode를 이용하는데 typescript를 제작한 ms에서 만든 것이다. 따라서 vscode를 사용하면 typescript의 언어 서비스를 잘 활용할 수 있다. 편집기를 통해서 어떻게 타입 시스템이 동작하는지, 타입스크립트가 어떻게 타입을 추론하는지 개념을 잡을 수 있다. Go to Definition 기능을 통해서 타입 선언 파일로 이동할 수 있고, 타입 선언 파일을 보면서 어떻게 …
2022-10-18
React의 전역 상태 관리
전역 상태 관리는 왜 필요하고, 어떤 도구들이 있나
React에서 전역 상태 관리는 왜 필요할까? 리액트는 단방향 데이터 바인딩이라는 특징을 가진다. 단방향 데이터 바인딩 특징은 어플리케이션이 예측 가능하다는 장점이 있지만, 뷰를 업데이트 해주는 부분을 매번 작성해주어야 한다는 단점이 있다. 리액트의 경우 뷰가 state에 따라서 자동으로 갱신되어 뷰를 업데이트 해주는 코드를 작성할 필요는 없지만, 이 state를 어플리케이션 구조에 맞게 잘 전달해주는 과정이 필요하다. 만일 컴포넌트 구조가 …
2022-10-17
이펙티브 타입스크립트 1장
타입스크립트 알아보기
타입스크립트와 자바스크립트의 관계 타입스크립트는 자바스크립트의 상위 집합이다. 즉 모든 자바스크립트 프로그램은 타입스크립트 프로그램이다. 하지만 타입스크립트의 경우 타입 선언 등 별도의 문법을 가지고 있기 때문에 유효한 자바스크립트 프로그램이라고는 할 수 없다. 자바스크립트가 타입스크립트 프로그램이기에 마이그레이션 하는데 큰 이점을 가진다. 타입 시스템 타입스크립트는 자바스크립트에 타입 시스템을 더한 것이다. 타입 시스 템의 목표 중 하나는 런…
2022-10-17