우아한 타입스크립트 with 리액트

 

일상이가 추천해준 이 책을 빠르게 빠르게 읽으면서 공부한 짧은 후기를 남겨보려고 한다.

 

일단 책을 집필한 사람들이 우아한형제들의 웹 프론트개발그룹 현직자들이기 때문에

그들이 어떤 코드를 사용하는지 간접적으로 볼 수 있고 (클래스 기반이다 ..!)

중간중간 '우형 이야기' 라는 코너에서는 어떤 개념을 사용하는 데 있어 팀별로 각각 다른 의견도 읽을 수 있다. 흥미롭다.

 

책의 구성도 좋은 것 같다.

 

초반부에 웹, 자바스크립트와 타입스크립트의 탄생 배경 같은 역사가 가볍게, 이해하기 쉽게 서술되어있다.

 

타입 개념으로 들어오면 나 같은 경우에는 타입스크립트를 조금은 사용해 봤기 때문에 익숙한 부분도 있었지만

고급 타입 개념은 쓰는 방법을 잘 몰라서 코드에 적용해본 적이 없었기에 생소한 부분 다시 한 번 정리도 하면서 넘어갔다.

- 인덱스 시그니처, 인덱스드 엑세스 타입

- 타입 확장하기, 좁히기

 

면접 대비용으로 좋을 것 같은 타입스크립트 컴파일 과정 내용이 15페이지 정도 있는데 이것은 달달 외우면 좋을 것 같다.

- 실제로 타입스크립트의 컴파일 과정은 어떻게 동작할까

 

또 타입스크립트의 개념 뿐만이아니라 실제 리액트에서 어떻게 사용되는지

API, 에러 핸들링, 훅, 상태 관리, CSS-in-JS 각각의 카테고리에서 상세하게 설명해주고 있다.

 

API 비동기 호출 관련 설명이 나오기 시작할 때 이제 예시 코드가 본격적으로 길어지기 시작하는데

와 .. 책으로 이 코드들을 보고 있기가 쉽지 않았다. 집중하기 힘들었고 집중력을 유지하기도 힘들어서 겨우 따라가면서 봤다.

어쩔 수 없는 부분이긴 하지만 이는 vscode에 직접 타이핑하면서 따라 해봐도 결과를 알 수 없는 부분이라 죽-나열된 코드만 봤을때 아쉬움도 살짝 있었다.

 

나는 Redux와 MobX 상태 관리 라이브러리를 사용해보지 않았는데 

이 두 가지와 react-query까지 다양한 상태 관리 라이브러리들은 각각 어떻게 상태를 업데이트 하는지, 에러 핸들링은 어떤 식으로 하는지 간단하게 볼 수 있다.

현업에서 중요한 에러 핸들링에 대해서 타입 가드를 어떻게 활용해야 할지, 서브클래싱을 어떻게 하면 좋을지도 잘 설명되어있다.

다양한 상태 관리 라이브러리에 대해서 각 팀에서는 어떻게 생각하고, 어떻게 프로젝트별로 나눠서 사용하고 있는지 등의 이야기도 있었는데, Redux를 걷어내기도 하고 react-query를 많이 사용한다고 해서 정말 요즘 대세이긴 한가보다 라고 새삼 생각했다.

 

useState는 수없이 사용했어도 useReducer는 사용해 본 적이 없다. 솔직히 처음 봤다.

useReducer는 '무엇을 변경할지'와 '어떻게 변경할지'를 분리하여 dispatch를 통해 어떤 작업을 할지 액션으로 넘기고 reducer 함수 내에서 상태를 업데이트 하는 방식을 정의한다. 이로써 복잡한 상태 로직을 숨기고 안정성을 높일 수 있다. (p.314)

코드 예시는 있지만 써보면서 조금 감을 익혀야 할 것 같다.

그리고 신기한 한 줄 짜리 코드가 있었다.

// Before
const [fold, setFold] = useState(true);
const toogleFold = () => setFold((prev) => !prev);

// After
const [fold, toogleFold] = useReducer((v) => !v, true);

 

 

마지막으로 앰비언트 타입(declare), 타입스크립트 프로젝트에서 개발 생산성을 높이는 방법 팁들, 타입스크립트와 객체 지향 패러다임에 대한 내용으로 끝난다.

 

한 번 읽고 끝나는 책이 아니라, 공부하면서나 개발 작업하면서 필요할 때 두고두고 볼 수 있을 것 같다.

웹프론트 2년차 타입스크립트 초보인 나에게는 많은 도움이 되었다.

 

다만 커다란 글씨(타이틀 등)에서 자주 보이는 오타나 .. 코드에 타입 오류 등 잘못된 내용이 있어 조금 당황하긴 했는데

책 한 권 내기가 어디 쉬울까. 내용만 좋으면 됐지.

 

잘 읽었습니다!