현것 | 개발로그

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 이..