이전에 진행했던 프로젝트를 다시 실행해봤는데 화면이 나타날 때까지의 시간이 오래 걸리는 것을 보고 성능 개선을 해봐야겠다는 생각이 들었다. 제일 먼저 간단하게 Lighthouse를 사용하여 화면의 성능을 측정해 보았다. Lighthouse란? Lighthouse는 구글에서 만들 틀로, 웹사이트의 성능을 측정하고 개선 방향을 제시해 주는 자동화 틀이다. Lighthouse를 이용하면 웹사이트의 성능 점수를 측정하고 개선 가이드를 확인함으로써 어떤 부분을 중점적으로 최적화해야 하는지에 대해 알 수 있다. Performance 점수가 36점… 왜 이렇게 낮을까? 개선해야 할 점을 보면 사용하지 않은 자바스크립트의 파일을 줄이라고 나와있다. 그리고 가장 위의 용량이 큰 파일을 보면 bundle.js라고 되어 있..
타입 별칭과 인터페이스 아래 코드는 name: string과 age: number를 가진 객체를 타입 별칭과 인터페이스로 구현한 구문입니다. type Person = { name: string; age: number; } interface Person{ name: string; age: number; } 두 구문에 대한 타입스크립트의 할당 가능성 검사와 오류 메시지는 거의 동일합니다. 하지만 완전하게 동일하지 않고 몇 가지 차이점을 가지고 있습니다. 인터페이스는 속성 증가를 위해 병합 할 수 있습니다. 인터페이스는 클래스가 선언된 구조의 타입을 확인하는데 사용할 수 있지만, 타입 별칭은 사용할 수 없습니다. 일반적으로 인터페이스의 타입 검사가 더 빠릅니다. 인터페이스는 이름 없는 객체 리터럴의 별칭이 아..
자바스크립트의 배열은 매우 유연하고 내부에 모든 타입의 값을 혼합해서 저장할 수 있습니다. 그러나 배열 안에 다른 타입의 값을 혼합해서 사용하거나, 다른 타입의 값을 추가하게 되면 배열을 읽을 때 혼란을 줄 수 있으며, 오류가 발생할 수도 있습니다. 그렇기 때문에 대부분의 배열은 하나의 특정 타입의 값만 가지고 있는 것을 볼 수 있습니다. 타입스크립트는 초기 배열 내부의 값에 대한 타입을 기억하고, 배열이 해당 데이터 타입에서만 작동하도록 제한하여 배열의 데이터 타입을 하나로 유지시킵니다. 위 코드를 보면 타입스크립트가 초기 배열 names에 담긴 요소를 통해서 배열의 타입을 유추하는 것을 볼 수 있습니다. 배열 타입 배열의 요소 타입 다음에 [ ]을 배치 : let names: string[]; Arr..
한쪽 끝에는 함수 인수가 있고, 다른 쪽 끝에는 반환 타입이 있다. 함수의 매개변수 const eating = (food) => { console.log(`Give me the ${food}!`) } eating 함수를 작성한 개발자가 매개변수 food를 제공하기 위해 의도한 값의 타입은 무엇일까요? string일까요? 아니면 재정의된 toString() 메서드가 있는 객체일까요? 매개변수의 타입에 대해 과연 누가 알 수 있을까요? 명시적으로 타입 정보가 선언되지 않고는 매개변수의 타입에 대해 알 수 없습니다. 타입스크립트는 이와 같은 매개변수를 보면 any타입으로 간주하여 매개변수의 타입은 무엇이든 될 수 있습니다. 변수와 마찬가지로 타입스크립트를 사용하면 타입 에노테이션으로 함수 매개변수의 타입을 선..
객체 타입 객체 리터럴은 중괄호({…}) 사용하여 생성할 수 있는데, 타입스크립트는 객체의 각각의 키에 대한 값에 따라 타입을 결정하게 됩니다. 객체 타입 선언 객체 타입은 객체 리터럴과 유사하게 보이지만 값 대신 타입을 사용하여 설명합니다. 별칭 객체 타입 {name: string, age: number} 와 같은 객체 타입을 계속 작성하는 것은 효율적이지 못하고 귀찮습니다. 일반적으로는 각 객체 타입에 타입 별칭을 할당하여 사용합니다. (대부분의 타입스크립트 프로젝트에서는 객체 타입을 설명할 때 인터페이스(interface) 키워드를 사용하는 것을 선호) 구조적 타이핑 타입스크립트의 타입 시스템은 구조적으로 타입화(structurally typed)되어 있습니다. 즉, 타입을 충족하는 모든 값을 해당..
유니언과 내로잉은 타입스크립트가 해당 값을 바탕으로 타입 추론을 수행하는 핵심 개념입니다.(코드 정보에 입각한 추론) 유니언과 리터럴 - 유니언(union) : 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것 - 내로잉(narrowing) : 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는 것 1️⃣ 유니언 타입 유니언 타입은 (값이 정확히 어떤 타입인지 모르지만) 두 개 이상의 타입을 지정하는 것을 말합니다. 유니언 타입은 가능한 값 또는 구성 요소 사이에 수직선(|) 연산자를 사용하여 지정합니다. 유니언 속성 값이 유니언 타입인 경우, 타입스크립트는 유니언으로 선언한 모든 타입에 존재하는 멤버 속성만 접근 할 수 있습니다. 유니언 타입의 경우 타입이 두 개 이상이기 때..
타입스크립트는 자바스크립트 코드를 구조화하고, 타입 안정성을 강화하기 위해서 사용됩니다. 타입의 종류 타입스트립트의 기본 타입은 자바스크립트의 기본 윈시 타입(primitive type)과 같습니다. 윈시 타입(primitive type) - null - undefined - boolean - string - number - bigint - symbol 타입스크립트는 변수의 타입을 유추할 수 있어, 변수에 마우스를 올리면 해당 변수가 어떤 타입을 인지 유추한 정보를 메시지로 표시 됩니다. 변수에 초기값이 없는 경우에는 어떻게 될까? 변수에 초기값이 없는 경우, 타입스크립트는 기본적으로 변수를 암묵적인 any 타입으로 간주합니다. any 타입은 특정 타입을 강제하는 대신 새로운 값이 할당될 때마다 변수 타..
문제 T에서 U에 할당할 수 있는 타입을 제외하는 내장 제네릭 Exclude를 이를 사용하지 않고 구현하세요. 예시 type Result = MyExclude // 'b' | 'c' 🔥 도전하기 TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org 풀이 해당 문제를 풀기 위해서는 분산 조건부 타입에 대해서 알아야 한다. T 가 유니온일 때 T extends U 와 같은 구조를 사용하면, TypeScript는 유니온 T 를 순회하면..
소프트웨어에서 이름은 어디에서나 사용된다. 변수에도 이름을 붙이고, 함수에도 이름을 붙이고, 인수와 클래스, 패키지에도 이름을 붙인다. 소스 파일에도 이름을 붙이고, 소스 파일이 담긴 디렉터리에도 이름을 붙인다. 이처럼 많은 부분에서 이름을 사용하는데, 이때 이름을 잘 지으면 여러모로 편하다. 이번 장에서는 이름을 잘 지을 수 있는 간단한 규칙 몇 가지를 소개한다. 의도를 분명히 밝혀라 코드를 단순하게 작성한다고 좋은 코드라고 말할 수 없다. 단순하게 작성했더라도 코드 맥락이 코드 자체에 명시적으로 드러나지 않는다면, 해당 코드를 어떤 의도로 작성했는지 또는 하는 일이 무엇인지 이해하기란 쉽지 않을 것이다. 이때 코드의 의미를 부여할 수 있는 것이 바로 이름이다. 의도가 분명하게 드러나는 이름을 사용한 ..
문제 배열(튜플)을 받아 길이를 반환하는 제네릭 Length를 구현하세요. 예시 type tesla = ['tesla', 'model 3', 'model X', 'model Y'] type spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT'] type teslaLength = Length // expected 4 type spaceXLength = Length // expected 5 🔥 도전하기 TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaSc..
