Sqsung DevLog

1. 제네릭을 사용하는 이유 자바스크립트만 사용해보던 개발자라면 익숙하지 않겠지만, 제네릭은 원래 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용된다. 제네릭은 함수나 클래스에서 사용될 타입을 외부에서 유동적으로 지정해주는 것을 말한다 (함수의 인수처럼 사용될 타입을 전달 받는다고 생각하면 된다) 덕분에 여러 가지 타입에서 동작하는 컴포넌트/함수를 생성하는 데 사용되며, 보다 재사용성 높은 함수/클래스 등을 생성할 수 있다. 재사용성 높은 코드를 추구하는 개발자라면, 타입스크립트에서 제네릭을 사용하지 않을 수 없다. 2. 함수에서 제네릭 사용하기 배열을 인수로 받아 배열 길이를 반환하는 getSize 함수가 존재한다. 아래 예제에서는 숫자 값으로만 이루어진 arr1, 문자열로..

11장: 자바스크립트와 상호 동작 11장의 다루는 주요 내용은 타입 선언 사용하기, 자바스크립트에서 타입스크립트로 점진적 마이그레이션하기, 서드 파티 자바스크립트와 타입스크립트 사용하기다 11-1. 타입 선언 타입 선언은 .d.ts 확장자를 가진 파일이며, 타입이 없는 자바스크립트 코드에 타입스크립트 타입을 부여할 수 있는 수단이다 즉 타입 선언은 TS에게 "자바스크립트에는 이런저런 정보가 정의되어 있어!"라고 알려주는 수단이다 💡 타입 선언 특징 1. 타입만 포함할 수 있음. 값은 안됨. - 즉, 함수, 클래스, 객체, 가변 구현, 매개변수, 기본값 등을 사용할 수 없음 2. 값을 정의할 수 없지만 declare 라는 키워드를 사용해 JS의 다른 어딘가에 값이 있다는 사실을 선언할 수 있음 3. 소바자..

10장: Namespaces.Modules 10-1. 가볍게 살펴보는 자바스크립트 모듈의 역사 초반 JS는 모듈 시스템을 전혀 지원하지 않았다 즉, 모든 것을 전역 네임스페이스에 정의했고, 이 때문에 프로그램을 만들고 확장하기 어려웠다 그래서 개발자들은 즉시 실행 함수나 객체를 이용하여 모듈을 흉내냈다 JS를 로딩하고 실행되는 동안 브라우저의 UI는 블록되기 때문에 프로그램이 커지고 코드가 늘어날 수록 브라우저는 점점 느려졌다 JS 출시 10년 뒤부터서야 첫 페이지가 로딩된 다음 JS를 게으르게, 그리고 비동기적으로 로딩하는 모듈 로더를 제공했다 비슷한 시기에 출시된 Node.js에서는 JS의 확장성 문제 및 기타 교훈을 통해 모듈 시스템을 플랫폼 자체에 추가하기로 결정되었고, CommonJS 모듈 표준..

9장: 프론트엔드 프레임워크와 백엔드 프레임워크 9-1. 프론트엔드 프레임워크 9-1-1. React 자바스크립트로 리액트를 사용하는 것보다 타입스크립트로 리액트를 사용하면 프론트엔드 개발팀의 생산성은 향상될 수 있다 tsconfig.json에 아래 내용을 추가하면 리액트 프로젝트에서 TSX를 지원하게 된다 { "compilerOptions": { "jsx": "react" } } 내부적으로 타입스크립트는 TSX 타입을 넣고 뺄 수 있는 몇 가지 후크(hook)를 제공한다 TSX 타입들은 global.JSX 네임스페이스에 존재하는 특별한 타입으로, 이 네임스페이스를 참고하여 프로그램에 쓰인 TSX 타입 들이 올바른지 판단한다 리액트에서 컴포넌트(함수/클래스)는 프로퍼티 몇 개를 입력받아 TSX를 렌더링한..

8장: 비동기 프로그래밍, 동시성과 병렬성 유명한 자바스크립트 엔진(V8, SpinderMonkey)들은 태스크 멀티플렉싱 기법을 영리하게 이용하여, 스레드 하나로 비동기 작업을 처리하며, 이렇게 하나의 스레드로 비동기 작업을 처리하는 이벤트 루프가 바로 자바스크립트 엔진의 표준 모델이다 자바스크립트는 이벤트 루프 기반의 동시성 모델을 이용해 멀티스레드 기반 프로그래밍에서 공통적으로 나타나는 문제점을 해결한다 (동기화된 데이터 타입의 오버헤드, 뮤텍스, 세마포어 등) 타입스크립트를 이용하면 비동기 작업을 추적할 수 있으며, async/await 내장 기능을 이용해 비동기 프로그래밍을 동기 프로그래밍과 비슷한 관점에서 접근할 수 있다 또한, 멀티스레드 프로그램에서 엄격한 메시지 전달 프로토콜을 지정하도록 ..

1. 서론 타입스크립트의 interface와 type은 마치 자바스크립트에서 함수 선언식과 화살표 함수처럼 느껴진다. 얕게 보면 분명 같은 목적을 가졌으므로 서로 문법만 다르다고 오해하기 쉽지만, 내부적으로는 차이점이 존재한다. interface와 type의 차이를 정리하면서 더 깊게 이해하고 넘어가면 앞으로 더 좋은 코드를 작성하는 데 도움이 될 것이라고 생각되어 이 글을 작성한다. 2. 차이점 2-1. 범용성 interface와 type의 가장 대표적인 차이는 범용성이다. type은 아무 타입과도 사용될 수 있으나, interface는 객체 타입을 정의할 때만 사용된다. /** * @type -> * string, number, 리터럴, 객체에 모두 사용할 수 있음 */ type Name = stri..

7장: 에러 처리 "이번 장에서는 타입스크립트에서 에러를 표현하고 처리하는 가장 일반적인 패턴 네 가지를 소개한다" 7-1. null 반환 타입 안전성을 유지하면서 에러를 처리하는 가장 간단한 방법은 null을 반환하는 것이다 하지만 이런 경우 문제의 원인을 파악하고 어렵고, 조합이 어려워진다. 모든 연산에서 null을 학인해야 하므로 연산을 중첩하거나 연결할 때 코드가 지저분해진다 7-2. 예외 던지기 null을 반환하는 것보다 예외를 던지는 게 더 좋다 어떤 문제인지에 따라 대처가 가능할 수 있고, 디버깅에 도움되는 메타데이터를 얻을 수 있다 function parse(birthday: string): Date { let date = new Date(birthday); if (!isValid(date..

6장: 고급 타입 6-1. 타입 간의 관계 6-1-1. 서브타입과 슈퍼타입 서브타입은 슈퍼타입을 상속받는 타입이다 B가 A의 서브타입이면 A가 필요한 곳에는 어디든 B를 안전하게 사용할 수 있다 💡 슈퍼타입과 서브타입 예시 1. 배열은 객체의 서브타입이다 2. 튜플은 배열의 서브타입이다 3. 모든 것은 any의 서브터입이다 4. never는 모든 것의 서브타입이다 5. Animal을 상속받는 Bird 클래스가 있다면 Bird는 Animal의 서브타입이다 6-1-2. 가변성 보통 A가 B의 서브타입인지 아닌지 쉽게 판단할 수 있다. 특히 number, string 처럼 단순 타입은 쉽게 추론 가능하다. (예: number는 number | string 유니온에 포함되므로 number | string의 서브..

5장: 클래스와 인터페이스 5-1. 클래스와 상속 타입스크립트는 클래스의 프로퍼티와 메서드에 3 가지 접근 한정자를 제공한다 public: 어디에서나 접근할 수 있음 (default) protected: 이 클래스와 서브클래스의 인스턴스에서만 접근 가능함 private: 이 클래스의 인스턴스에서만 접근할 수 있음 type Color = 'Black' | 'White'; type File = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H'; type Rank = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8; /** * @p..

4장: 함수 "타입 주도 개발이란 타입 시그니처를 먼저 정하고 값을 나중에 채우는 프로그램 방식이다" 4-1. 함수 선언과 호출 타입스크립트는 특별 상황을 제외하면 매개변수 타입은 추론하지 않는다 반환 타입은 자동으로 추론하지만, 원하면 명시할 수 있다 함수를 호출할 때 타입 정보는 따로 제공할 필요 없다. 바로 인수를 전달하면 타입스크립트가 알아서 함수의 매개변수와 인수의 타입이 호환되는지 확인한다 잘못된 타입의 인수를 전달하거나 인수를 전달하지 않으면 타입스크립트가 즉시 에러 발생시킨다 4-1-1. 선택적 매개변수와 기본 매개변수 자바스크립트처럼 타입스크립트도 선택적 매개변수를 지원한다 (위 예제의 경우 userId)function log(message: string, userId?: string) ..