읽게된 계기
감수자의 말을 읽어보면, 이 책에 대한 소개로 "주니어 개발자들에게 제시된 어떻게 성장할 수 있을까?"라는 질문에 대답 중 하나라고 말하고 있습니다.
제가 신입으로 지원하고 싶은 다수의 회사들이 지원 자격에 "타입스크립트에 대한 지식이 있으신 분"을 적어두고 있어요. 그리고 여러 프로젝트들을 진행하면서 타입스크립트를 사용하긴 했지만 스스로 타입 시스템에 대한 깊은 이해는 부족하다 생각하고 있었어요. 이런 상황에서, 프로젝트와 스터디에서 공부한 타입스크립트를 복습하고 실무 관점에서 성장하기 위해 이 책을 읽었습니다.
특히 우아한 형제들에서의 타입스크립트 실무 활용 사례를 살펴보면서 헷갈리는 개념들을 바로잡고 지식을 채워나가길 기대하고 있어요.
책의 구성
이 책의 목차는 다음과 같습니다.
- 1장, 들어가며
- 2장, 타입
- 3장, 고급 타입
- 4장, 타입 확장하기 좁히기
- 5장, 타입 활용하기
- 6장, 타입스크립트 컴파일
- 7장, 비동기 호출
- 8장, JSX에서 TSX로
- 9장, 훅
- 10장, 상태관리
- 11장, CSS-in-JS
- 12장, 타입스크립트 프로젝트 관리
- 13장, 타입스크립트와 객체 지향
저는 하루에 한 챕터씩 읽고 정리하는 계획으로 책을 공부했어요. 이전에 공부했더라도, 정확히 그 개념과 활용을 다시 짚어보자는 목표를 세웠습니다.
그럼, 가볍게 책을 소개하는 포스트니까 읽었던 1장의 내용 요약과 2장 도입부를 소개하며 글을 진행하겠습니다.
1장, 들어가며
1장은 자바스크립트의 역사와 한계를 알아보며 타입스크립트의 등장 배경을 살피는 챕터입니다.
자바스크립트의 특징과 한계를 살피고 자바스크립트와 브라우저에서 발생했던 문제점들을 해결하기 위한 방법들이 무엇이 있었는지 살펴봅니다.
자바스크립트의 등장 배경
1995년, 넷스케이프의 브랜든 아이크(Brenden Eich)가 웹 컨텐츠를 표현하기 위해 이미지, 플러그인 요소등을 쉽게 조합할 수 있는 자바스크립트를 만들었습니다. 이 때, 자바스크립트를 웹 대응 언어로서 완벽한 해결책으로 제시하기 보다 빠르게 시장 반응을 확인할 수 있는 프로토타입 언어로 출시하였다고 해요.
당시 사용자에게 유의미한 편의성을 제공하진 못했지만, 아래와 같은 특징들을 지녔었습니다.
자바스크립트의 확산
초기 자바스크립트는 브라우저 생태계를 고려해 작성한 것이 아니고, 새로운 기능이 추가되는 형태로 발전했다 합니다. 이에 브라우저와 JS 발전 속도가 차이가 벌어지고 폴리필3과 트랜스파일4같은 개념이 등장했습니다.
폴리필(polyfoll): 브라우저가 지원하지 않는 코드를 브라우저가 사용할 수 있도록 변환한 코드 혹은 플러그인트랜스파일(transpile): 최신 버전의 코드를 예전 버전 코드로 변환하는 과정
이렇게 새로운 개념과 라이브러리들이 유행하였지만, 언제 유지보수가 멈출지 모르는 라이브러리에 크로스브라우징 이슈들을 온전히 기대어 해결할 순 없었다고 합니다. 그래서 시간이 지날수록 모든 브라우저에서 동일하게 동작하는 표준화된 자바스크립트의 필요성이 커져 갔습니다.
이에 넷스케이프는 컴퓨터 시스템 표준을 관리하는 'Ecma 인터내셔널 (국제 표준화 기구)'에 자바스크립트 기술 규격을 제출했습니다. 그리고 이는 ECMAScript라는 이름으로 공식 자바스크립트 표준화가 되었어요. 이렇게 JS가 표준화되자, 정적 웹사이트들에서 동적 웹애플리케이션의 전환이 가속화되었습니다.
동적 웹 애플리케이션?
그럼 정적 웹사이트와 동적 웹애플리케이션의 차이는 무엇일까요? 이책에서는 웹의 발전 형태와 각각을 지칭하는 이유를 말합니다.
웹사이트: 단방향으로 정보를 제공. 사용자와 인터랙션 x, 동적인 컨텐츠 업데이트가 없다. HTML 문서에 링크가 연결된 웹페이지 모음웹 애플리케이션: 쌍방향 소통 웹. 사용자와의 인터랙션으로 컨텐츠를 업데이트. 검색, 댓글, 채팅 등 웹 페이지 내부에 다양한 애플리케이션이 존재
기존 HTML 문서 기반 웹사이트가 쌍방향 소통을 시작하고, 서비스의 규모가 커지면서 웹 애플리케이션의 형태로 변화했습니다. 특히, 구글 지도는 이런 웹 애플리케이션의 서막을 연 서비스 중 하나로 평가받고 있습니다. 기존의 지도 서비스가 브라우저에 이미 만들어진 지도를 다운받아 쓰는 형태였다면 구글 지도는 길을 찾기 위해 사용자가 직접 출발지와 목적지를 입력하는 등의 인터랙션과 쌍방향 소통이 가능해졌습니다.
이렇게 대규모 웹 서비스 개발의 필요성이 커지고 사용자가 PC뿐 아닌 태블릿, 모바일 등 다양한 디바이스로 서비스를 경험하게 되면서, 하나의 웹 페이지를 통으로 개발하는 것이 아닌 컴포넌트 기반 개발 방법론(Component Base Development)이 등장했습니다. CBD는 서비스에서 데이터를 구분하고 그에 맞는 UI를 표현할 수 있게 컴포넌트 단위로 개발하는 접근 방식입니다.
컴포넌트 베이스 개발 (Component Based Development, CBD)
: 재사용할 수 있는 컴포넌트를 개발하거나 조합해 하나의 애플리케이션을 만드는 방법론
컴포넌트는 모듈과 유사하게, 독립된 기능을 재사용하기 위한 코드 묶음입니다. 또한 런타임 환경에서 독립적으로 배포, 실행될 수 있는 단위입니다. 이때, 컴포넌트는 다른 컴포넌트와의 의존성을 최소화하는 것이 중요합니다.
자바스크립트의 한계점
- 동적 타입 언어로, 런타임에 타입이 결정되어 개발자의 의도와는 다른 결과를 야기할 수 있다.
- 약타입 언어로, 명시적으로 타입을 변환하지 않았을 때 에러를 일으키는 대신 연산을 진행시켜 예기치 못한 오류가 발생할 수 있다.
위와 같은 한계점들을 극복하기 위한 해결방안으로 JS 개발 생태계에선 자바스크립트 인터페이스의 해결 방안들이 나타났습니다.
바로 JSDoc, propTypes, Dart입니다. 이들은 모두 의미있는 시도였지만 자바스크립트 스스로의 인터페이스가 아닌 문서 생성 도구와 속성, 새로운 언어이기에 근본적인 문제를 해결할 수 없었습니다.
이윽고, 자바스크립트 스스로가 인터페이스를 기술할 수 있는 언어로 거듭나야 한다는 목소리가 커졌습니다.
그렇게, 타입스크립트가 등장했습니다.
타입스크립트란?
마이크로소프트사는 Javascript의 superset 언어인 TypeScript를 공개했습니다. Dart와 다르게 JS 코드를 그대로 사용할 수 있었으며 기존의 많은 단점들을 극복할 수 있었습니다. 타입스크립트로 해결한 단점들은 대표적으로 아래와 같습니다.
- 안정성 보장
- 개발 생산성 향상
- 협업에 유리
- JS에 점진적 적용 가능
따라서 개발자들은 이렇게 속시원히 JS의 문제들을 해결해 준 TS 도입을 환영했다 합니다. 이제 타입스크립트가 어떻게 위의 단점들을 극복해나갔는지는 다음에 이어질 장들을 통해 더 자세히 확인해봅시다.
2장, 타입
2장은 정적 타이핑을 위해 타입이 무엇인지, 다른 언어에서 타입은 어떻게 동작하는지 살펴보고 타입스크립트에서 활용하는 방법을 다룹니다.
자바스크립트에서 다루는 타입과 타입스크립트가 다루는 타입은 어떻게 다를까요? 이를 구분하기 위해 먼저, 프로그래밍언어에서 변수를 선언하는 것부터 살펴봅니다. 변수란, 값을 저장할 수 있는 공간이자 값을 가리키는 상징적 이름입니다.
컴퓨터 메모리의 공간은 한정적이기 때문에, 효율적으로 공간을 활용하려면 해당 변수가 메모리 공간에서 차지할 값 크기를 알아야 합니다. 따라서 값의 크기를 명시해두면, 컴퓨터가 값을 참조할 때 한 번에 메모리 크기를 알 수 있어 훼손없이 가져오게 됩니다. 예를 들어, 메모리에 '숫자 타입' 값이 할당 되어 있으면 JS 엔진은 이를 숫자로 인식해 8byte 단위로 값을 읽어올 것입니다.
하지만 변수에 저장할 수 있는 값의 종류는 프로그래밍 언어마다 다른데요, 최신 ECMAScript 표준을 따르는 JS라면 아래와 같은 7가지 데이터 타입을 정의한다 합니다.
- undefined
- null
- Boolean
- String
- Symbol
- Numeric (Number와 BigInt)
- Object
이를 자료형으로서의 타입이라고 부릅니다. js 애플리케이션에서 메모리를 효율적으로 관리하고 싶다면 이러한 타입을 통해 값을 명시하는 과정이 필요합니다. 이후 2장의 뒷 내용과 다른 챕터들은 이런 타입을 이해해 효율적이고 안정적인 타입스크립트를 사용하도록 예제와 함께 개념을 설명하고 있어요.
읽고난 감상!
우리는 어떤 민족입니까? 배달의 민족
이 책을 읽으면서, 각 파트의 개념을 익히고 예시가 필요할 때마다 친숙한 서비스와 그 서비스 속 UI 컴포넌트에 적용된 TS코드 예시를 살펴볼 수 있었습니다. 이전까지 공부 방법이 공식 문서로 Playground 따라가기, Typechallenge 도전하기 등이었는데 공식 문서는 번역하여 이해하다 보니 어색하게 받아들이게 된 개념들이 있었어요.
그런데 이 책은 배민을 예제로 하기 때문에 한국화된 코드들로 아주 이해하기 쉬웠습니다. 특히, 열거형 타입의 예시를 들 때 '배송 현황' 컴포넌트의 코드를 볼 수 있는데, 다른 언어들과 유사하면서도 TypeScript만이 가지는 멤버값의 특성을 이해하기 쉬웠어요.
만약 주니어 혹은 신입 프론트엔드 개발자가 타입스크립트를 공부해야 할때, 개념이 헷갈린다면 한 번 쯤은 읽어보길 추천하는 책입니다.
용어 참고
