타입스크립트

나는 평소에 개발 관련 서적을 많이 읽는 편이다. 서점에 가서 보기도 하고 지인들에게 추천을 받아 읽기도 한다. 그러던 중 최근에 눈길을 끄는 제목의 프론트엔드 개발 서적 한 권을 우연히 만나게 되었다. 바로 이 책이다. 나는 현재 회사에서 타입스크립트와 리액트로 웹 프론트엔드 개발을 하고 있다. 사실 이 스택은 나 뿐만 아니라, 굉장히 많은 회사에서 이미 표준으로 자리잡고 있는 스택이라 웹 프론트엔드 개발자로 취업을 하길 희망하는 취준생에게는 필수적이라고 보아도 과언이 아닐 것이다. 하지만 시중에 많은 리액트, 타입스크립트 책을 봐온 나로서는 아쉬운 점이 있었다. 크게 두 가지인데 첫 번째는 책이 너무 두꺼웠고, 두 번째는 책이 너무 어려웠다. 대부분 아쉬운 점은 1번 아니면 2번, 아니면 둘 다였다...

이 글의 목적 여러 뎁스로 중첩된 오브젝트 형태로 구성된 상태를 불변하게 유지하는 방법에 대해 고민이 있는 웹 프론트엔드 개발자가 참고할 수 있는 사례를 공유하기 위함 로직이 복잡하고 사이드 이펙트가 많이 발생할 수 있는 코드를 적절한 도구로 간결하고 명확하게 작성하는 방법에 고민이 많은 웹 프론트엔드 개발자에게 인사이트를 주기 위함 이 글의 예상 독자 react와 typescript로 웹 프론트엔드 개발을 하는 엔지니어 기본적인 react, typescript에 대한 선수 지식이 있다고 가정하고 설명 인트로 내가 속한 팀에서 담당하고 있는 웹 프로덕트는 현재 context로 상태를 관리하고 있으며, form 형태의 페이지는 react-hook-form 이라는 라이브러리를 사용하고 있다. 그리고 유효성 ..

타입스크립트는 타입 추론을 적극적으로 수행한다. 타입 추론은 수동으로 명시해야 하는 타입 구문의 수를 엄청나게 줄여 주기 때문에, 코드의 전체적인 안정성이 향상된다. 숙련된 타입스크립트 개발자는 비교적 적은 수의 구문을 사용한다. 반면, 초보자의 코드는 불필요한 타입 구문으로 도배되어 있다. 이번 장을 읽고 나면 타입스크립트가 어떻게 타입을 추론하는지, 언제 타입 선언을 해야 하는지, 타입 추론이 가능하더라도 명시적으로 타입 선언을 작성하는 것이 필요한 상황은 언제인지 잘 이해할 수 있다. 아이템 19. 추론 가능한 타입을 사용해 장황한 코드 방지하기 타입 추론이 된다면 명시적 타입 구문은 필요하지 않다. 오히려 방해가 될 뿐이다. let x: number = 12; // 굳이? let x = 12; /..

아이템 6. 편집기를 사용하여 타입 시스템 탐색하기 편집기를 사용하면 어떻게 타입 시스템이 동작하는지, 그리고 타입스크립트가 어떻게 타입을 추론하는지 개념을 잡을 수 있다. 아이템 7. 타입의 값들이 집합이라고 생각하기 런타입에 모든 변수는 자바스크립트 세상의 값으로부터 정해지는 각자의 고유의 값을 가진다. 코드가 실행되기 전, 타입스크립트가 오류를 체크하는 순간에는 타입을 가지고 있다. 가장 작은 집합은 아무 값도 포함하지 않는 공집합이며, 타입스크립트에서는 never 타입이다. never 타입으로 선언된 변수의 범위는 공집합이기 때문에 아무런 값도 할당할 수 없다. 그 다음으로 작은 집합은 한 가지 값만 포함하는 타입이다. 이들은 타입 스크립트에서 유닛(unit) 타입이라고도 불리는 리터럴(liter..

아이템 1. 타입스크립트와 자바스크립트 관계 이해하기 타입스크립트는 문법적으로 자바스크립트의 상위집합. → 자바스크립트 프로그램에 문법 오류가 없다면, 유효한 타입스크립트 프로그램이라고 할 수 있다. → 자바스크립트 프로그램에 어떤 이슈가 존재한다면 문법 오류가 아니라도 타입 체커에게 지적당할 가능성이 높다. → 문법의 유효성과 동작의 이슈는 독립적인 문제 타입 시스템의 목표 중 하나는 런타임에 오류를 발생시킬 코드를 미리 찾아내는 것이다. → 그러나 타입 체커가 모든 오류를 찾아내지는 않음 → 타입 체커를 통과하면서 런타임 오류를 발생시키는 코드는 충분히 존재. 타입스크립트 타입 시스템은 자바스크립트의 런타임 동작을 '모델링' 한다. const x = 2 + '3'; // 정상, string const..

지난 포스팅에 이어서 이웅재님의 우아한 타입스크립트 세미나 2편을 정리해 보려고 한다. 이번 포스팅에서는 실전 타입스크립트 코드를 작성하는 측면에서 적용해볼 수 있는 부분들에 대해 알아본다. 1. Conditional Type 활용하기 Conditional Type이란 타입이 조건부로 적용되는 것을 의미한다. 타입 T를 제네릭 형태로 받는다. 예를 들면 아래의 예제 코드처럼 T가 string인 경우는 StringContainer로, T가 number이면 NumberContainer로 받을 수 있다. 이번에는 infer라는 키워드를 살펴보도록 하자. 조건부 타입에서 infer는 타입변수를 참조하기 위해서 사용이 된다. 프로미스의 제네릭은 보통 리턴타입을 의미한다. 아래의 예제는 Promise의 배열인 경우..

지난 8월 들었었던 이웅재님의 우아한 타입스크립트 내용을 정리해서 블로그 포스팅 해 보려고 한다. 1/2부로 나누어서 세미나를 진행하였고, 포스팅도 2번에 나누어서 할 생각이다. 많은 사람들이 타입스크립트를 쓰면 버그도 사라지고, 테스트 코드를 작성하지 않아도 된다고 착각하는 경우가 있다. 이는 분명히 잘못된 생각이며, 타입스크립트를 가지고 타이핑을 잘 하면 우리가 가질 수 있는 이점은 런타임 전에 오류를 미리 파악할 수 있다는 점이다. 작성자와 사용자 타입스크립트의 타입 시스템은 다음과 같은 특징을 가지고 있다. 타입을 명시적으로 지정할 수 있음 타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론 우리는 함수를 가운데에 매개로 해서 구현자와 사용자를 연결한다. 때로은 이 둘..

오늘은 우아한 테크러닝 3주차(5회차, 6회차)에서 공부했던 내용들에 대해서 정리해 보려고 한다. 다섯 번째 세션 9월 15일 화요일 5번째 수업에서는 다음과 같은 내용을 다루었다. 리덕스 (Redux) 커링 (Currying) 몽키패치 (Monkey Patch) 미들웨어 (Middleware) 다음과 같이 리듀서와 스토어를 생성한 후, 스토어의 변경이 일어날 때마다 확인할 수 있는 subscribe 메서드를 사용한다. 그리고 store의 dispatch 메서드를 이용하여 action을 실행할 수 있다. import { createStore } from "./redux"; function reducer(state = { counter: 0 }, action) { switch (action.type) { ..