DEVOCEAN

데보션의 지원을 받은 도서 <이펙티브 타입스크립트>로 스터디를 진행한 데보션영 3기 스터디를 소개합니다

🪶 도서 소개

• 제목 : 이펙티브 타입스크립트

• 부제목 : 동작 원리의 이해와 구체적인 조언 62가지

• 저자 : 댄 밴더캄

• 옮긴이 : 장원호, 출판사 : 프로그래밍 인사이트

• 발행일 : 2021년 06월 22일, 쪽수 : 344쪽

🪶 스터디 진행 방식

저희는 6월 23일 부터 격주 일요일마다 오전 11시에 모여서 스터디를 진행했습니다!

첫 만남 때 2주마다 목차부분에 있는 아이템을 15개씩 다루기로 스터디 계획을 세웠고,

총 8장 62개의 아이템이라 약 4번 정도의 만남으로 책을 완독하는 것을 목표로 했습니다

각자 공부한 내용을 노션에 정리하고 중요하다고 생각하는 부분과 어려웠던 부분을 만남에서 공유하는 방식으로 스터디를 진행했습니다.

🪶 스터디 엿보기

스터디원들이 각자 공부한 내용을 노션에 정리한 내용을 살짝 가져와봤습니다 ㅎㅎ

깔끔하고 예쁘게 잘 정리되어있죠 ?

🪶 스터디 내용 및 후기 정리

방대한 내용을 다루는 만큼 책의 내용을 줄글로 단순히 필기하는것 보다는 챕터별로 어떤 내용을 다루는지 간단한 요약과 해당 챕터를 읽으며 들었던 개인적인 후기와 생각들 위주로 작성해보겠습니다!

1장. 타입스크립트 알아보기

타입스크립트의 기본 개념과 설정을 이해하기 위한 개요에 해당되는 내용이였습니다!

자바스크립트와 타입스크립트의 관계와 타입스크립트의 설정 방법, 타입과 코드 생성 간의 관계를 일방적으로 알려주는 내용이였습니다.

타입스크립트에서 any 타입을 지양하자는 이야기도 다뤘어요

2장 타입스크립트의 타입 시스템

2장에서는 본격적으로 타입스크립트의 타입을 공부했습니다.

편집기를 활용해 타입을 탐색하는 법부터, 타입을 값들의 집합처럼 이해하는 접근방식, 타입과 값의 공간을 구분하는 방법, 안전한 코딩을 위한 타입 선언 사용 팁을 공부했고,

객체 래퍼 타입을 피해야 하는 이유와 잉여 속성 체크의 한계도 다뤘습니다.

후반부에서는 함수와 타입을 다룰 때의 기법들도 소개되는데요,

타입과 인터페이스의 차이, 반복을 줄이기 위한 타입 연산과 제너릭 활용, 동적 데이터 처리 방법, readonly로 데이터를 보호하거나 매핑된 타입으로 값을 동기화하는 방법까지 알차게 배울 수 있었습니다.

3장 타입 추론

3장에서는 타입스크립트의 타입 추론을 활용해 간결하고 일관된 코드를 작성하는 방법을 배웠습니다.

타입 넓히기와 좁히기, 객체 생성과 별칭 사용을 통해 코드를 명확하게 만들고, 비동기 처리에서의 async/await도 공부했습니다.

또한, 문맥 기반 타입 추론과 함수형 기법으로 타입 흐름을 유지하는 방법도 다뤘습니다!

4장 타입 설계

4장은 타입 설계를 더 효과적으로 하는 방법에 대해 다뤘습니다.

유효한 상태만을 표현하는 타입을 만들고, 생성 할때는 엄격하지만 사용할 때는 유연하게 접근할 수 있다는 점이 타입스크립트의 큰 장점 중 하나였습니다.

개발자가 구체적인 타입을 사용해 명확성을 높이고, API와 명세를 기준으로 타입을 설계해야하는 이유도 언급했고, 저희가 타입 이름을 지을 때 전문 용어를 활용하거나 상표를 붙이는 방법도 제시했습니다.

5장 any 다루기

5장은 1장에서 잠깐 언급하고 지나간 지양해야하는 타입, any를 다루는 방법에 대해 소개했습니다.

개인적으로 저같은 경우 프론트엔드를 타입스크립트로 개발할 때 이벤트나 돔의 타입을 모를 때 경고문구가 뜨는게 싫어서 대충 any로 퉁치고 넘어간적이 많았는데 보면서 찔리는 부분이 많았던.. 챕터입니다ㅎㅎ

6장 타입 선언과 @types

6장은 타입 선언과 @types 사용의 모범 사례를 소개해주었습니다.

프로젝트에 @types를 추가하고, 타입 선언의 버전 체계를 이해하는 것이 중요하다고 강조해주는 챕터인데요,

공개 API의 모든 타입을 익스포트해야한다는 점, TSDoc으로 주석을 관리할 수 있다는 점, 콜백의 this에 타입을 제공할 수 있다는 점 등

개발에서 단순히 타입 선언용으로 타입스크립트를 사용하던 저에게는 새로운 기능들이 많아서 놀랐던 기억이 있습니다...!

또한, 오버로딩 대신 조건부 타입을 활용하고, 의존성 분리를 위해 미러 타입을 사용하는 방법과 타입 테스팅 시 주의해야 할 점들도 다루는데요,

이쯤부터 본격적으로 어려워졌던 것 같습니다 ㅎㅎ

7장 코드를 작성하고 실행하기

7장은 타입스크립트로 효율적이고 실행 가능한 코드를 작성하는 방법을 다뤘습니다.

ECMAScript 기능을 우선적으로 사용하고, 객체 순회와 DOM 계층 구조, private를 정보 은닉 용도로 사용하면 안된다는 점을 다루는데

이 부분은 타입스크립트에 한정되는 것이 아닌 프론트엔드 개발과 관련한 이론 공부도 되어서 더욱 유익했던 것 같습니다..!

소스맵을 활용해 디버깅하는 법도 한번도 안해본 부분이라 신기했어요

8장 타입스크립트로 마이그레이션하기

8장은 기존 자바스크립트로 작성된 프로젝트를 타입스크립트로 전환하는 방법을 알려주는 챕터였습니다.

@ts-check와 JSDoc로 미리 시험해 보고, allowJs 설정으로 타입스크립트와 자바스크립트를 함께 사용하는 방법, 의존성 관계를 고려해서

단계적으로 전환하는 법, noImplicitAny 설정을 활성화해 마이그레이션을 완성하는 방법을 설명해줬습니다.

개인적으로 큰 프로젝트를 마이그레이션 해본 경험이 없어서 이 부분부터는 실감이 잘 안났는데, 언젠가 저도 실무를 경험하게 되면 본 책을 꺼내서 8장부터 읽게 되지 않을까 싶습니다 ㅎㅎ

🪶 소감

프론트엔드 개발자로서 꼭 공부해야했던 타입스크립트를 전문 도서를 통해 확실히 정리하고 공부할 수 있었던 유익한 스터디였는데요,

다른 팀원분들의 스터디 소감과 함께 <이펙티브 타입스크립트> 스터디 후기를 마치도록 하겠습니다!

• 김다은

  도서 스터디를 진행하며 타입스크립트에 대한 이해를 더 높일 수 있었습니다.

  특히나 다른 분들과 함께 스터디를 진행하다보니 혼자 공부할 때보다 더욱 높은 효율로 스터디를 진행하고 특정 개념을 더욱 깊게 생각해볼 수 있는 시간이 되었습니다!!✨

• 백슬기

  쉽지많은 않은 내용이기도 했고,

  그러므로 도서 스터디에서 얻어가는 것들이 더 값진 시간이라고 생각했습니다!

  서로의 학습 내용을 공유하는 부분에서 내가 놓친 부분도 한번 더 생각해볼 수 있는 시간이 되었고, 좋은 시너지를 낼 수 있는 것이 유익한 시간이었습니다

• 이지현

  도서 스터디를 통해 타입스크립트를 처음 접했기에 어렵기도 했지만, 다른 분들과 함께 스터디를 하면서 더 효율적으로 공부할 수 있었습니다! 🤩

  또한, 스터디를 통해 평소 만나기 힘들었던 다른 조 분들을 만날 수 있어서 더 의미 있는 시간이었습니다 ㅎㅎ