우아한형제들 웹프론트엔드개발그룹, 『우아한 타입스크립트 with 리액트』, 한빛미디어(2023) p.22 ~ 31
책 구매 이유
프로젝트에서 타입 스크립트를 사용하면서 '내가 타입 스크립트를 잘 사용하는게 맞을까?' 의문이 계속 들었다. GPT4도 타입을 잘 짜주지 못하는 부분이 많다. 더 학습할 필요를 계속 느껴 읽어 보고 싶었던 타입스크립트 책을 구매해서 읽기 시작했다. 최근에 나온 책이고 배민에서 나온 책답게 디자인 깔끔하고 컬러가 적절히 들어가 있어서 가독성이 아주 좋다. 책은 항상 다 읽기가 어려우니 블로그에 기록을 남기며 끝까지 읽어보려고 한다! 블로그에 남기는 내용은 부분 부분 정리와 내가 추가하는 내용들이 있으니 전체 내용이 궁금하다면 책을 사서 보자 📖
책 목차
1장 들어가며
2장 타입
3장 고급 타입
4장 타입 확장하기·좁히기
5장 타입 활용하기
6장 타입스크립트 컴파일
7장 비동기 호출
8장 JSX에서 TSX로
9장 훅
10장 상태 관리
11장 CSS-in-JS
12장 타입스크립트 프로젝트 관리
13장 타입스크립트와 객체 지향
웹 개발의 역사, 자바스크립트의 탄생
1995년 넷스케이프의 브랜든 아이크(Brendan Eich)는 웹의 다양한 콘텐츠를 표현하기 위해 이미지, 플러그인 요소를 쉽게 조합할 수 있는 새로운 언어가 필요하다고 생각하고 자바스크립트를 만듬.
자바스크립트: C, Java와 유사한 기본 문법을 가지고 있으며 객체 지향 언어인 Self의 프로토타입 기반 상속 개념과 Lisp 계열 언어 중 하나인 Scheme의 일급 함수 개념을 차용한 경량의 프로그램 언어였음.
폴리필(polifil): 브라우저가 지원하지 않는 코드를 브라우저에서 사용할 수 있도록 변환한 코드 조각이나 플러그인을 말함. (ex_core.js, polifill.io)
트랜스파일(transpile): 최신 버전의 코드를 예전 버전의 코드로 변환하는 과정을 말함. (ex_Bable)
-> 최신 기능을 구버전의 실행 환경에서 동작할 수 있게 바꿔주는 역할.
모든 브라우저에서 동일하게 동작하는 표준화된 자바스크립트의 필요성이 제기 -> 넷스케이프는 컴퓨터 시스템의 표준을 관리하는 Ecma 인터내셔널(국제 표준화 기구)에 자바스크립트의 표준화를 위한 자바스크립트 기술 규격을 제출, Ecma 인터내셔널은 EC-MAScript라는 이름으로 자바스크립트 표준화를 공식화.
웹사이트: 수집된 데이터 및 정보를 특정 페이지에 표시하기 위한 정적인 웹
웹 애플리케이션: 사용자와 상호작용하는 쌍방향 소통의 웹
- ✔️ 개발 생태계의 발전
- 컴포넌트 단위 개발
- Ajax로 페이지 전체를 새로고침하지 않아도 자바스크립트의 비동기 요청을 사용해서 페이지의 일부 데이터를 로드할 수 있게 됨
- 다양한 디바이스 추가로 저마다의 최적화된 UX/UI 기대
CBD(Components Based Development) 컴포넌트 베이스 개발 방법론
서비스에서 다루는 데이터를 구분하고 그에 맞는 UI를 표현할 수 있게 컴포넌트 단위로 개발하는 접근 방식.
재사용할 수 있는 컴포넌트를 개발 또는 조합해서 하나의 애플리케이션을 만드는 개발 방법론.컴포넌트: 모듈과 유사하게 하나의 독립된 기능을 재사용하기 위한 코드 묶음
-> 다른 컴포넌트와의 의존성을 최소화하거나 없애야 한다. 작은 기능을 가진 컴포넌트일수록 다른 컴포넌트에 의존하지 않고 독립적으로 존재할 수 있지만, 조합 과정에서 필연적으로 의존성이 생긴다.
(의존성: 의존하고 있는 대상의 변경에 영향받을 수 있는 가능성)
자바스크립트의 한계
- 동적 타입 언어
동적 타입 언어 = 변수에 타입을 명시적으로 지정하지 않고 코드가 실행되는 런타임에 변숫값을 할당될 떄 해당 값의 타입의 따라 변수 타입이 결정된다는 것을 의미.
- 동적 타이핑 시스템의 한계
다들 아는 자바스크립의 관대함. 숫자에 문자를 넣어도 오류 x
한계 극복을 위한 해결 방안
- JSDoc: 모듈, 네임스페이스, 클래스, 메서드, 매개변수 등에 대한 API 문서 생성 도구. 주석에 @ts-check를 추가하면 타입 및 에러 확인 가능. 강제성 x
- propTypes: 리액트에서 컴포넌트 props의 타입을 검사하기 위해 사용하는 속성. prop에 유효한 값이 전달되었는지 확인할 수 있지만, 전체 애플리케이션 타입 검사를 하는데는 사용 할 수 x
- Dart: 구글이 자바스크립트를 대체하기 위해 제시한 새로운 언어.
3가지 모두 의미 있는 해결 방안이었으나 자바스크립트 스스로가 인터페이스를 기술할 수 있는 언어로 발전해야 한다는 목소리가 커졌음
타입스크립트의 등장
마이크로소프트는 자바스크립트의 슈퍼셋 언어 타입스크립트를 공개.
슈퍼셋(Superset): 기존 언어에 새로운 기능과 문법을 추가해서 보완하거나 향상하는 것을 말한다. 슈퍼셋 언어는 기존 언어와 호환되며 일반적으로 컴파일러 등으로 기존 언어 코드로 변환되어 실행된다.
✏️ 장점
- 안정성 보장: 정적 타이핑 제공 -> 컴파일 단계에서 타입 검사를 해주기 때문에 타입 에러 ⬇️, 런타임 에러 사전 방지 가능
- 개발 생산성 향상: VSCode 등의 IDE에서 타입 자동 완성 기능 제공. 변수와 함수 타입을 추론할 수 있고, 리액트 사용시 매번 어떤 prop을 넘겨야 하는지 매번 확인하지 않아도 사용부에서 바로 볼 수 있기 떄문에 개발 생산성이 크게 향상됨
- 협업에 유리: 인터페이스, 제너릭 등을 지원하는데 인터페이스가 기술되면 코드를 더 쉽게 이해할 수 있게 도와준다.
- 자바스크립트에 점진적으로 적용 가능
인터페이스(Interface)
타입스크립트 인터페이스는 객체 구조를 정의하는 역할을 함. 다시 말해 특정 객체가 가져야 하는 속성과 메세드의 집합을 인터페이스로 정의해서 객체가 그 구조를 따르게 한다.👉 백엔드와 협업시 API 문서로 Swagger를 사용하면 자동으로 타입을 생성할 수도 있다.
읽어주셔서 감사합니다. 잘못된 내용이나 추가로 알면 좋은 내용 있으면 댓글로 남겨주세요 🙂
