TypeScriptStudy

... 1995년 넷스케이프의 브랜든 아이크는 웹의 다양한 콘텐츠를 표현하기 위해 이미지, 플러그인 요소를 쉽게 조합할 수 있는 새로운 언의 필요성을 느끼고 개발. 크로스 브라우징 이슈 발생 -> 브라우저가 자바스크립트의 변화를 따라가지 못함.새로운 버전 브라우저 -

2.1 타입이란 . . . 1. 자료형으로서의 타입 변수 : 값을 저장할 수 있는 공간 = 값을 가리키는 상징적인 이름 개발자 : 변수 선언 -> 그 변수에 특정한 값인 데이터를 할당 특정 메모리에 값을 효율적으로 저장하려면 해당 메모리 공간을 차지할 값의 크기

2.2 타입스크립트의 타입 시스템 . . . 1. 타입 애너테이션 방식 > 타입 애너테이션 type annotation : 변수나 상수 혹은 함수의 인자와 반환 값에 타입을 명시적으로 선언 -> 어떤 타입 값이 저장될 것인지를 컴파일러에직접 알려주는 문법 ( 언어마

2.3 원시 타입 : 값은 타입을 가지지만 변수는 별도의 타입을 가지지 않음 so... 자바스크립트의 변수에는 어떤 타입의 값이라도 자유롭게 할당할 수 있음. 타입스크립트는 이 변수에 타입을 지정할 수 있는 타입 시스템 체계를 구축. > 자바스크립트 : 내장 타입을

...

1. any 타입 2. unknown 타입 3. void 타입 4. never 타입 5. Array 타입 6. enum 타입

1. 교차 타입 intersection : 여러가지 타입을 결합하여 하나의 단일 타입으로 생성 ( 생성한 단일 타입에 별칭 붙이기 가능 ) 표기 : 어쩌구 & 저쩌구 2. 유니온 타입 union : 타입 A 또는 타입 B 중 하나가 될 수 있는 타입 표기 :

1. 함수의 제네릭 2. 호출 시그니처의 제네릭 3. 제네릭 클래스 4. 제한된 제네릭 5. 확장된 제네릭 6. 제네릭 예시

인덱스드 엑세스 타입 indexed accsee types : 다른 타입의 특정 속성이 가지는 타입을 조회하기 위해 사용. ( 배열의 요소 타입을 조회 ) 의도 : PromotionList 배열을 정의하고, Elementof 타입을 사용하여 배열의 항목 타입을 추출

4.1 타입 확장하기 > 타입확장 : 기존타입을 사용 -> 새로운 타입을 정의하는 것 타입정의( type, interface ) -> 타입확장( extends, 교차 타입, 유니온 타입) . . . 1. 타입 확장의 장점 1) 코드 중복을 줄일 수 있다. (필

4.2 타입 좁히기 - 타입 가드 > 타입좁히기 : 변수 또는 표현식의 타입 범위를 더 작은 범위로 좁혀나가는 과정 더 정확하고 명시적인 타입 추론 가능 복잡한 타입 -> 작은 범위로 축소 : 타입 안정성 높아짐 . . . 1. 타입 가드에 따라 분기 처리하기

4.3 타입 좁히기 - 식별할 수 있는 유니온 Discriminated Unions > = 태그된 유니온 Tagged Union : 타입 좁히기에 널리 사용되는 방식 . . . 1. 에러 정의하기 : 유효성 검사 유효성 에러 발생 -> 에러코드 & 에러메시지 이

4.4 Exhaustiveness Checking으로 정확한 타입 분기 유지하기 Exhaustiveness = 침착함, 완전함. > Exhaustiveness Checking : 모든 케이스에 대해 철저하게 타입을 검사하는 것. ( 타입 좁히기에 사용되는 패러다임

5.1 조건부 타입 . . . 1. extends와 제네릭을 활용한 조건부 타입 2. 조건부 타입을 사용하지 않았을 때의 문제점 3. extends 조건부 타입을 활용하여 개선하기 4. infer를 활용해서 타입 추론하기 5.2 탬플릿 리터럴 타입 활용하기 .

5.3 커스텀 유틸리티 타입 활용하기 타입스크립트 : 프로젝트를 진행하다 보면 표현하기 힘든 타입을 마주할 때가 있음. -> 원하는 타입을 정확하게 설정해야 해당 컴포넌ㅌ, 함수의 안정성과 사용성을 높일 수 있음.. but 타입스크립트에서 제공하는 유틸리티 타입만

5.4 불변 객체 타입으로 활용하기 프로젝트 진행하면 상숫값 관리할 때 객체를 사용 컴포넌트나 함수에서 이런 객체를 사용할 때 열린 타입으로 설정 가능 > 열린 타입 : 추가적인 속성이나 값이 포함될 수 있는 타입을 의미해. 즉, 정의된 속성 외에 다른 속성도 허

6.1 자바스크립트의 런타입과 타입스크립트의 컴파일 . . . 1. 런타입과 컴파일타임 프로그래밍 언어 고수준 언어 : 사람이 이해하기 쉬운 형식으로 작성 저수준 언어 : 컴퓨터가 이해하기 쉬운 형식 컴파일 타임 : 소스코드가 컴파일 과정을 거쳐 컴퓨터가

6.2 타입스크립트 컴파일러의 동작 . . . 1. 코드 검사기로서의 타입스크립트 컴파일러 2. 코드 변환기로서의 타입스크립트 컴파일러 도서참조 : 우아한 타입스크립트 with 리액트

6.3 타입스크립트 컴파일러의 구조 . . . 1. 프로그램 Program 2. 스캐너 Scanner 3. 파서 Parser 4. 바인더 Binder 5. 체커Checker와 이미터Emitter 도서참조 : 우아한 타입스크립트 with 리액트

7.1 API 요청 . . . 1. fetch로 API 요청하기 외부 데이터베이스에 접근하여 사용자가 장바구니에 추가한 정보를 호출하는 코드 작성 -> 직접 fetch 함수 사용, 사용자가 담은 장바구니 물품 개수를 배지로 보이게... > 배지 badge : 일

7.2 API 상태 관리하기 . . . 1. 상태 관리 라이브러리에서 호출하기 2. 훅으로 호출하기 도서참조 : 우아한 타입스크립트 with 리액트

. . . 1. 타입 가드 활용하기 2. 에러 서브클래싱하기 3. 인터셉터를 활용한 에러 처리 4. 에러 바운더리를 활용한 에러 처리 5. 상태 관리 라이브러리에서의 에러 처리 6. react-query를 홀용한 에러 처리 7. 그 밖의 에러 처리 도서참

7.4 API 모킹 . . . 1. JSON 파일 불러오기 2. NextApiHandler 활용하기 3. API 핸들러에 분기 추가하기 4. axios-mock-adapter로 모킹하기 5. 목업 사용 여부 제어하기 도서참조 : 우아한 타입스크립트 with

8.1 리액트 컴포넌트의 타입 . . . 1. 클래스 컴포넌트의 타입 클래스 컴포넌트가 상속받는 React.Component와 React.PureComponent의 타입 정의 P : props S : state ( 상태 ) -> Props와 state 타입을 제네

8.2 타입스크립트로 리액트 컴포넌트 만들기 타입스크립트는 리액트 프로젝트에서 공통 컴포넌트에 어떤 타입의 속성이 제공되어야 할까 . . . 1. JSX로 구현된 Select 컴포넌트 각 option의 key-value 쌍을 객체로 받고 있으며, 선택된 값이 변

9.1 리액트 훅 리액트에 훅이 추가( 리액트 16.8버전 )되기 전에는 클래스 컴포넌트에서만 상태를 가질 수 있었음. 프로젝트가 커져가면서 상태를 스토어에 연결하거나 비슷한 로직을 가진 상태 업데이트 및 사이드 이펙트 처리가 불편해짐. 또한 모든 상태를 하나의 함

10.1 상태 관리 . . . 1. 상태 State - 상태란 ? : 리액트 애플리케이션에서의 상태는 렌더링에 영향을 줄 수 있는 동적인 데이터 값. (리액트 공식 문서 : 렌더링 결과에 영향을 주는 정보를 담은 순수 자바스크립트 객체) - 지역 상태 Local

DOM (Document Object Model) 정의 DOM은 HTML이나 XML 문서의 구조를 표현한 프로그래밍 인터페이스. 브라우저는 HTML을 파싱하여 트리 구조의 DOM을 생성하며, 이를 통해 개발자는 문서 구조, 스타일, 콘텐츠를 프로그래밍적으로 조작할 수

11.1 CSS-in-JS란 . . . 1. CSS-in-JS와 인라인 스타일의 차이 2. CSS-in-JS 등장 배경 3. CSS-in-JS 사용하기 11.2 유틸리티 함수를 활용하여 styled-components의 중복 타입 선언 피하기 . . . 1)

12.1 엠비언트 타입 활용하기 . . . 1. 앰비언트 타입 선언 [ 타입스크립트의 타입 선언 ] .ts 또는 .tsx 확장자를 가진 파일에서도 가능 .d.ts 확장자를 가진 파일에서도 선언 가능 - 앰비언트 타입 선언 : 타입 선언만 할 수 있으며 값을 표현할

12.3 타입스크립트 마이그레이션 1. 2. 3. 12.4 모노레포 1. 2. 3. 4. 도서참조 : 우아한 타입스크립트 with 리액트

13.1 타입스크립트와 객체지향 . . . 13.2 우아한형제들의 활용 방식 . . . 1. 컴포넌트 영역 2. 커스텀 훅 영역 3. 모델 영역 4. API 레이어 영역 13.3 캡슐화와 추상화 . . . 13.4 정리 . . . 도서참조 : 우아한 타입