Im Bay

예전엔 프론트 두려워하고 자신도 없었는데요,, 그래도 풀스택 교육 들으면서 React-TypeScript 조합으로 프론트 개발도 해보고, API 연동도 해보니 이제 어느정도는 할 수 있게 되었답니다.물론 디자인까진 많이 신경을 못쓰지만요.. 원할한 프론트엔드와의 협업과 백엔드를 맡아도 간단한 프론트 개발할 일이 분명히 있을 것 같아서 까먹지 않도록 API 연동 순서를 정리해봅니다.React-TypeScript 환경에서 Spring Boot로 개발했던 REST API 연동입니다.  1. 엔티티별 DTO 타입 정의 1-1. 백엔드 API 만들 때 dto 클래스 작성했던 것을 모두 타입 정의를 해줘야 한다.엔티티클래스명+Request/ReponseDto.d.ts 파일 생성  1-2. 각 엔티티별로 만들어둔 R..

TypeScript - 선언 파일과 구성 및 옵션 global 전역 변수 import, export가 없거나 declare global이면 전역 전역 어디서나 import 없이 사용 가능 window 등 전역 객체에 타입 정의 가능 declare 오직 선언만 한다. 값(초기값)은 허용되지 않는다. (literal type은 가능) 타입 검사(Type Checker) lib 브라우저에서 실행되지 않는 경우 DOM, condole 등을 제거 skipLibCheck 사용되지 않은 소스에서의 선언은 선언 파일 타입 체크도 생략 strict noImplicitAny, strictNullChecks, strictFunctionTypes 모두 활성화 기타 checkJs with alloHs “extends”: “....

TypeScript - 유틸리티 타입 Utility Types 타입 변환을 쉽게 하기 위하여 유틸리티 타입 제공 (전역 사용) Utility Types 종류 Awaited Promise 형태의 타입을 전달 받아서 해당 Promise가 반환하는 리턴값의 타입을 반환 Omit T 타입에서 2번째 인자로 전달한 U 유니온에 지정된 키만 프로퍼티로 갖지 않는 새로운 타입 반환 Pick T 타입에서 2번째 인자로 전달한 타입에 지정된 키만 프로퍼트로 갖는 새로운 타입을 반환 Partial T 타입의 일부 프로퍼티만 가질 수 있는 타입을 반환 Required T 타입의 모든 프로퍼티를 필수로 갖는 타입을 반환 Record K 키로, T 타입으로 하는 새로운 타입 반환 Parameters 함수 타입 T의 매개변수 타..

TypeScript - 선언 파일과 구성 및 옵션 global 전역 변수 import, export가 없거나 declare global이면 전역 전역 어디서나 import 없이 사용 가능 window 등 전역 객체에 타입 정의 가능 declare 오직 선언만 한다. 값(초기값)은 허용되지 않는다. (literal type은 가능) 타입 검사(Type Checker) lib 브라우저에서 실행되지 않는 경우 DOM, condole 등을 제거 skipLibCheck 사용되지 않은 소스에서의 선언은 선언 파일 타입 체크도 생략 strict noImplicitAny, strictNullChecks, strictFunctionTypes 모두 활성화 기타 checkJs with alloHs “extends”: “....

제네릭 함수 호출하는 방식에 따라 다양한 타입으로 작동하도록 의도한다. 함수의 기능이 똑같은데 매개변수의 타입과 반환하는 타입이 다를 때 제네릭 기법을 사용하여 한 개의 함수로 구현 가능 제네릭 함수 구현 function 제네릭함수(arg: T): T { return arg; } 함수명 뒤에 를 추가하고, T를 매개변수의 타입 또는 반환 타입으로 설정 가능 꼭 로 작성할 필요는 없고 다른 문자열도 사용 가능 (대부분 Type의 T로 작성) 제네릭 함수 호출 안에 인수의 타입을 작성한다. ex) let 변수1 = 제네릭함수(123); ex) let 변수2 = 제네릭함수(’ABC’); 다중 함수 타입 매개변수 구현 function 다중제네릭함수 (first: First, second: Second_ { re..

top 타입 (any, unknown) top 타입은 모든 타입이 할당 가능한 타입 any TS가 해당 값에 할당 가능성 또는 멤버에 대해 타입 검사를 수행하지 않도록 명시적으로 지시 (타입 아직 미정의) const anyParam = (value: any) ⇒ { … } 위 함수는 오류는 발생하지 않지만 런타임 에러 발생 unknown unknown 타입 값의 속성에 직접 접근할 수 없고 top 타입이 아닌 타입에는 할당할 수 없다. const anyParam = (value: unknown) ⇒ { … } instanceof나 typeof를 사용하여 타입을 narrowing 하거나 타입 어서션을 통해 값의 타입이 제한된 경우에 해당 타입이 갖는 속성에 접근할 수 있다. const anyParam = ..

TypeScript - 클래스 클래스 메서드 독립 함수와 동일한 방식의 메서드 매개변수 타입이나 기본 값을 지정하지 않으면 any 타입을 기본 값으로 가진다. 메서드를 호출하려면 허용 가능한 수의 인수가 필요하다. 재귀 함수가 아니라면 대부분 반환 타입 유추 가능 메서드 호출 시 올바른 타입의 인수가 올바른 수로 제공되는지 확인하기 위해 타입 검사 실시 클래스 속성(attribute) 클래스의 속성을 읽거나 쓰려면 명시적으로 선언해야 한다. 클래스 속성 - method 모든 prop은 초기화 또는 정의해야 한다. (! 또는 ?는 제외) 클래스 속성 - 초기화 검사 StrictNullCheck On에서 TS는 undefined 타입으로 선언된 각 속성이 생성자에서 할당되었는지 확인 초기화하지 않았다는 것은..

클래스 메서드 독립 함수와 동일한 방식의 메서드 매개변수 타입이나 기본 값을 지정하지 않으면 any 타입을 기본 값으로 가진다. 메서드를 호출하려면 허용 가능한 수의 인수가 필요하다. 재귀 함수가 아니라면 대부분 반환 타입 유추 가능 메서드 호출 시 올바른 타입의 인수가 올바른 수로 제공되는지 확인하기 위해 타입 검사 실시 클래스 속성(attribute) 클래스의 속성을 읽거나 쓰려면 명시적으로 선언해야 한다. 클래스 속성 - method 모든 prop은 초기화 또는 정의해야 한다. (! 또는 ?는 제외) 클래스 속성 - 초기화 검사 StrictNullCheck On에서 TS는 undefined 타입으로 선언된 각 속성이 생성자에서 할당되었는지 확인 초기화하지 않았다는 것은 undefined이므로 생성자..

속성 타입 선택적 속성 ? 물음표 interface Book { author**?**: string; pages: number; } 읽기 전용 속성 readonly interface Page { **readonly** text: string; } 호출 시그니처 (call signature) 함수를 호출하는 방법에 대한 타입 시스템 설명 매개변수의 목록과 반환 타입을 포함한다. 인덱스 시그니처 (index signature) 임의의 key를 받고 해당 key에 대한 value의 타입 지정 인덱스 시그니처를 사용하여 프로퍼티의 존재 유무를 알 수 없다. 중첩 인터페이스 (Nested Interface) 속성의 타입이 다른 인터페이스나 객체 타입을 가질 수 있다. interface 확장(extends) int..

배열(Array) let 배열이름: 데이터타입[]; 의 형태 배열과 함수 타입 string 배열을 반환하는 함수 let getNames: () => string[]; string을 반환하는 함수 배열 let nameGetters: (() => string)[]; 유니언 타입 배열 string 또는 number 배열 let stringOrArrayOfNumber: string | number[]; string 또는 number를 요소로 갖는 배열 let ArrayOfStringOrNumber: (string | number)[]; noUncheckedIndexedAccess 이 옵션을 true로 설정하면 인덱스 시그니처에 undefined를 포함시킨다. 인덱스 시그니처는 인터페이스 객체가 임의의 키를 받고..