현것 | 개발로그

2장 타입스크립트의 타입 시스템 아이템 11 | 잉여 속성 체크의 한계 인지하기 3줄 요약 1. 잉여 속성 체크는 타입에 선언된 속성 외에 속성이 있는지 체크한다. 2. 객체 리터럴에서만 잉여 속성 체크가 동작한다. 그래서 엄격한 객체 리터럴 체크라고도 불린다. 3. 일반적인 구조적 할당 가능성 체크와는 역할이 다르다. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 잉여 속성 체크는 아래와 같습니다. 변수에 타입을 선언함과 동시에 오브젝트 리터럴로 만들게 되면 잉여 속성이 체크됩니다. 반면 아래와 같은 경우에는 잉여 속성이 체크되지 않습니다. 정상적으로 hoon 변수에 hyun 변수가 할당되었고, 이 과정에서 잉여 속성 체크는 진행되지 않았습니다. 구조적 타이핑이라는 관점에서 봤..

2장 타입스크립트의 타입 시스템 아이템 10 | 객체 래퍼 타입 피하기 3줄 요약 1. 타입스크립트에서는 변수를 선언할 때, 객체 래퍼 타입으로 선언하지 마라. 2. 타입스크립트에서는 자바스크립트의 동작을 모델링한다. 3. 객체 래퍼 타입으로 선언하면 자바스크립트의 변수와 동작이 맞지 않을 수 있다. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 객체 래퍼 타입이란 Number, String, Boolean 등과 같은 타입입니다. 대문자로 시작합니다. 반면에, 원시 타입이란 number, string, boolean 등과 같은 타입입니다. 대문자로 시작하지 않고 소문자로 시작합니다. 자바스크립트에는 6가지 원시 데이터 타입이 있습니다. undefined, null, number,..

2장 타입스크립트의 타입 시스템 아이템 9 | 타입 단언보다는 타입 선언을 사용하기 3줄 요약 1. 타입 단언보다는 타입 선언을 사용하자. 2. 컴파일러보다 더 타입을 확신할 수 있을 때는 타입 단언을 사용해도 된다. 3. 함수 시그니처를 잘 살펴보고 제너릭을 통해 리턴 타입을 정할 수 있다면 타입 단언보다 해당 방법을 더 우선으로 고려하자. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 타입 선언과 타입 단언의 차이는 아래와 같습니다. 변수 kim과 변수 lee는 모두 Person 타입입니다. 그러나 타입을 부여하는 방식이 서로 다릅니다. 변수 kim에서는 타입 선언 방식이 사용되었고, 변수 lee에서는 타입 단언이 사용되었습니다. 이번 아이템에서 이야기하는 것은 타입 단언 방..

2장 타입스크립트의 타입 시스템 아이템 8 | 타입 공간과 값 공간의 심벌 구분하기 3줄 요약 1. 타입스크립트에서는 타입의 공간과 값의 공간이 분리되어있다. 2. 타입스크립트 코드를 읽을 때 타입인지 값인지 구분하는 방법을 터득해야 한다. 3. 클래스(생성자 함수)의 타입은 typeof 클래스이고, 인스턴스의 타입은 클래스이다. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 타입스크립트에서는 값의 공간(context)와 타입의 공간(context)가 다릅니다. 따라서, 똑같은 이름의 식별자(책에서는 심볼)가 각각의 공간에서 각자 존재할 수 있습니다. (그렇다고 해서 이렇게 똑같은 이름으로 쓰는 것은 권장하지 않습니다. 본인뿐만 아니라 같이 개발하는 동료까지 헷갈리게 할 수 있습..

2장 타입스크립트의 타입 시스템 아이템 7 | 타입이 값들의 집합이라고 생각하기 3줄 요약 1. 값들의 집합을 타입이라고 한다. 2. unknown과 any는 본질적으로 다른 타입이다. 3. 부분 집합이다 / 할당 가능하다 / 상속받았다는 동일한 의미를 가지고 있다. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 자바스크립트(ES6)에서 타입이란 데이터 타입을 이야기하며 총 7개입니다. 원시 타입인 number, string, boolean, undefiend, null, symbol와 객체 타입으로 구성되어 있습니다. 타입스크립트에서는 타입을 값들의 집합이라고 생각해야 합니다. 그리고 그 타입은 프로그래머가 정의할 수 있으며 그 수는 무한히 많습니다. 그리고 이 타입은 타입 공..

2장 타입스크립트의 타입 시스템 아이템 6 | 편집기를 사용하여 타입 시스템 탐색하기 3줄 요약 1. 타입스크립트 서버를 통해서 타입스크립트의 언어 서비스를 제공받을 수 있다. 2. 언어 서비스를 에디터로부터 확인할 수 있다. 3. 타입스크립트와 비주얼 코드는 마이크로소프트 사의 제품이다. 궁합이 좋다. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 타입스크립트를 설치하면 두 가지를 실행할 수 있습니다. 1. 타입스크립트 컴파일러(tsc) 2. 타입스크립트 서버(tsserver) 이 중 타입스크립트 컴파일러는 한 번쯤은 사용해보셨을 겁니다. 타입스크립트 파일을 자바스크립트 파일로 트랜스파일할 때 쓰는 명령어이니깐요. 타입스크립트 서버는 조금 생소하게 느껴지실 수도 있습니다. 그러..

1장 타입스크립트 알아보기 아이템 5 | any 타입 지양하기 3줄 요약 1. any 타입 지양하기 2. any 타입 지양하기 3. any 타입 지양하기 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 타입스크립트를 사용하면서 any 타입을 사용하지 말라는 말을 여럿 듣습니다. 이제는 상식이 되어버린 any 타입 지양하기입니다. 그러면 any 타입이 어떤 문제가 있기 때문에 사용을 지양해야 할까요? 먼저 그전에 언제 any를 사용해야 할까요? 바로 자바스크립트 프로젝트에서 타입스크립트로 마이그레이션할 때 사용하면 됩니다. 타입스크립트 타입 시스템은 점진적이고 선택적이라고 합니다. 따라서, 조금씩 자바스크립트 프로젝트에서 타입을 점진적으로 추가할 때 이 any 타입이 큰 도움이 될 ..

1장 타입스크립트 알아보기 아이템 4 | 구조적 타이핑에 익숙해지기 3줄 요약 1. 자바스크립트는 본질적으로 덕 타이핑 기반이다. 2. 자바스크립트의 런타임 동작 모델링한 타입스크립트 또한 덕 타이핑을 기반으로 한다. 3. 덕 타이핑에 제대로 이해해서 활용하자. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 덕 타이핑은 아래와 같은 문구로 유명합니다. 만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다. - 위키피디아 검색 어떤 새가 본래 오리로 태어났는가는 중요하지 않습니다. 오리처럼 행동하면 그것은 오리라고 말할 수 있습니다. 이것이 우리가 익히 알고있는 덕 타이핑을 나타내는 표현입니다. 타입스크립트에서 타입을 체크하는 방식..

1장 타입스크립트 알아보기 아이템 3 | 코드 생성과 타입이 관계없음을 이해하기 3줄 요약 1. 타입스크립트 컴파일러는 타입스크립트 혹은 자바스크립트 파일을 구버전 자바스크립트 파일로 트랜스파일한다. 2. 타입스크립트 컴파일러는 코드의 타입 오류를 체크한다. 3. 이 둘은 독립적이다. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 타입스크립트 컴파일러는 (1)트랜스파일을 하고 (2)타입 체크를 합니다. 그리고 (1)과 (2)는 완전히 독립적입니다. 따라서, 타입 오류가 있는 코드 또한 트랜스파일이 가능합니다. test.ts 파일에서 x 변수의 타입은 string입니다. 그러나 number 리터럴 값을 할당함으로써 타입 체크에서 에러가 발생합니다. 중요한 점은 그럼에도 불구하고 정..

1장 타입스크립트 알아보기 아이템 2 | 타입스크립트 설정 이해하기 3줄 요약 1. 타입스크립트 컴파일러는 매우 많은 설정을 가지고 있다. 2. 암시적 any 타입을 피하기 위해 noImplicitAny 설정을 고려하자. 사실상 필수다. 3. 엄격한 타입 체크를 원한다면 strict 설정을 고려하자. 사실상 필수다. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 아시다시피 타입스크립트에서는 수많은 설정이 있습니다. 그리고 보통 tsconfig.json 파일을 만들어 타입스크립트 컴파일러 옵션을 설정합니다. 타입스크립트 설정을 어떻게 하느냐에 따라 완전히 다른 언어가 될 수 있습니다. 따라서, 타입스크립트 컴파일러 설정을 어떻게 하는지 이해하는 것이 중요합니다. 그중 noImpli..

1장 타입스크립트 알아보기 아이템 1 | 타입스크립트와 자바스크립트의 관계 이해하기 3줄 요약 1. 자바스크립트는 타입스크립트의 부분집합이다. 2. 다시 말해, 타입스크립트는 자바스크립트를 바탕으로 기능이 추가되었다. 3. 추가된 기능을 공부해서 잘 활용하자. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 타입스크립트를 공부할 때, 가장 먼저 만나는 내용은 아래 문구와 같을 것입니다. Typescript is a superset of Javscript. 타입스크립트는 자바스크립트의 상위 집합이다. 그런데 사실 상위 집합이라는 단어를 듣고 바로 이해가 되지 않습니다.. (아마 저만 그럴 수도 있습니다... ㅜㅜ) 대신 상위 집합이라는 용어 대신에 부분집합이라는 용어를 사용하면 조금..

리액트를 공부하기 시작하면서 흔히 CRA을 이용해서 리액트 프로젝트를 만들기 시작한다. 만일 CRA를 이용하지 않으면 어떻게 리액트 프로젝트를 구성할지 막막한 사람들에게 공유하고자 이번 글을 번역했다. 물론 나에게도... 원본 https://dev.to/underscorecode/creating-your-react-project-from-scratch-without-create-react-app-the-complete-guide-4kbc Creating your React project from scratch without create-react-app: The Complete Guide. Creating and setting up your own React project from scratch can ..

Virtual DOM 에 대해서 잘 정리되어 있는 글을 발견하여 공유하고자 번역을 하였습니다. 원본은 시리즈가 2편으로 되어있으나, 번역본에서는 한 게시글에 모두 담았습니다. 번역을 하면서 글을 자연스럽게 만들기 위해 의역을 많이 첨가하였습니다. (따라서, 오역이 많을 수 있습니다... 댓글로 알려주시면 수정하겠습니다. 훈수 좋아합니다...) 원본(시리즈 1) What is the Virtual DOM? (Let's build it!) 원본(시리즈2) Let's build a VDOM 프론트엔드를 개발하다 보면 아마 가상 돔 혹은 쉐도우 돔에 대해서 들어보고 사용해보셨을 겁니다. 아마 여러분들이 많이 사용하시는 JSX 또한 사실은 가상 돔의 문법적 설탕입니다. 이번 튜토리얼에서는 Virtual DOM 이..