JSTS 20

[JS] 이벤트 위임 적용해보기 event delegation

이벤트 위임 function clickHandler(e) { this.parentNode.removeChild(this); } for (let i = 0; i < ilbuniGroup.length; i++) { ilbuniGroup[i].addEventListener("click", clickHandler); } 이벤트를 각각 등록해주는 것은 객체 길이가 많아질 경우 비효율적이다. 부모 컴포넌트에 이벤트를 위임한다. const stage = document.querySelector(".stage"); function clickHandler(e) { if (e.target.classList.contains("ilbuni")) { stage.removeChild(e.target); } } stage.addE..

JSTS 2022.08.20

[TS] 실습 4. 엄격한 타입 적용

strict 옵션 tsconfig.json compileOptions에 "strict": true 추가 TSConfig Reference - Docs on every TSConfig option { "strictNullChecks": true, "strictFunctionTypes": true, "strictBindCallApply": true, "strictPropertyInitialization": true, "noImplicitThis": true, "alwaysStrict": true, } 즉 strict를 설정하면 위와 같은 설정들이 true로 설정된다. null 타입 오류 및 함수 타입 오류 해결 1. 'Event' 형식에 'MouseEvent' 형식의 altKey, button, button..

JSTS 2022.07.28

[TS] 실습 3. 외부 라이브러리 모듈화

Definitely typed 타입 definition 라이브러리와 패키지 타입 검색기 https://github.com/DefinitelyTyped/DefinitelyTyped Search for typed packages 타입 선언 라이브러리가 제공되지 않는 외부 라이브러리 대처 방법 tsconfig.json에 typeRoots 추가 따로 지정해주지 않은 때는 typeRoots가 기본적으로 node_modules/@types 를 가르킴 { "compilerOptions": { "allowJs": true, "target": "ES5", "outDir": "./built", "moduleResolution": "Node", "lib": ["ES2015", "DOM", "DOM.Iterable"], "n..

JSTS 2022.07.26

[TS] 실습 2. 점진적인 타입 적용 절차 및 설정

자바스크립트 프로젝트에 타입스크립트 적용하는 절차 1. 타입스크립트 프로젝트 환경 구성 프로젝트 생성 후 NPM 초기화 명령어로 package.json 파일을 생성 프로젝트 폴더에서 npm i typescript -D 로 타입스크립트 라이브러리를 설치한다. 타입스크립트 설정 파일 tsconfig.json 을 생성하고 기본 값을 추가한다. 서비스 코드가 포함된 JS 파일을 TS 파일로 변환한다. tsc 로 TS 파일을 JS 파일로 변환한다. 2. 엄격하지 않은 타입 환경(loose type)에서 프로젝트 돌려보기 프로젝트에 테스트 코드가 있다면 테스트 코드가 통과하는지 먼저 확인 js 파일을 모두 ts 파일로 변경 타입스크립트 컴파일 에러가 나는 것 위주로 에러가 나지 않게 수정 기능 사소하게라도 변경 x..

JSTS 2022.07.19

[TS] 실습 1. 프로젝트 구성 및 타입 시스템 적용

자바스크립트 코드에 타입스크립트를 적용할 때 주의해야 할 점 기능적인 변경 x 테스트 커버리지가 낮을 때는 함부로 타입스크립트 적용 x 처음부터 타입을 엄격하게 적용하지 x → 점진적으로 strict 레벨을 증가 JSDoc으로 점진적 타입 시스템 적용해보기 자바스크립트를 타입스크립트로 변환함에 있어서 코드량이 방대하여 많은 비용 소모가 예상될 때는 JSDoc을 이용한 점진적 타입 시스템 적용이 가능하다. // @ts-check 를 파일 맨 위에 추가하면 타입스크립트 런타임이 작동됨. 단축키: /** 하고 탭 또는 엔터 메서드 리턴 정보를 알기 위한 방법 중 하나로, 웹사이트에서 네트워크 - XHR 체크 - 새로고침 - 원하는 메서드 미리보기 확인 을 통해 파악할 수 있다. 이를 통해 간단히 타입을 JSD..

JSTS 2022.07.16

[TS] 7. 유틸리티 타입, 맵드 타입

유틸리티 타입 유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다. Pick 픽(Pick) 타입은 특정 타입에서 몇 개의 속성을 선택(pick)하여 타입을 정의할 수 있다. interface Product { id: number; name: string; price: number; brand: string; stock: number; // something: string; } // 상품 목록을 받아오기 위한 API 함수 function fetchProduct(): Promise { // .. } interface ProductDetail { id: number; name: string; price: number; } // 1. Product를 그대로 재활용할 수 없는 상태가 ..

JSTS 2022.07.16

[TS] 6. 타입추론, 타입단언, 타입가드, 타입호환, 타입모듈화

타입 추론(Type Inference) 변수를 선언하거나 초기화할 때 타입이 추론된다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어난다. // 타입 추론 기본 1 var a = 'abc'; function getB(b = 10){ var c = 'hi'; return b + c; } 10 + '10' // 1010 // 타입 추론 기본 2 interface Dropdown { value: T; title: string; } var shoppingItem: Dropdown = { value: 'abc', title: 'hello' } // 타입 추론 기본 3 interface Dropdown { value: T; title: string; } interface..

JSTS 2022.07.14

[TS] 전화번호부 조회 실습

interface PhoneNumberDictionary { [phone: string]: { num: number; }; } interface Contact { name: string; address: string; phones: PhoneNumberDictionary; } enum PhoneType { Home = 'home', Office = 'office', Studio = 'studio' } // api // TODO: 아래 함수의 반환 타입을 지정해보세요. function fetchContacts(): Promise { // TODO: 아래 변수의 타입을 지정해보세요. const contacts: Contact[] = [ { name: "Tony", address: "Malibu", phone..

JSTS 2022.07.11

[TS] 5. 제네릭

제네릭(Generics) 제네릭은 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이다. 특히 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다. 제네릭은 타입을 마치 함수의 파라미터의 개념으로 사용한다. 제네릭의 기본 문법 function logText(text: T):T{ console.log(text); return text; } logText('하이'); 기존 타입 정의 방식과 제네릭의 차이점 함수 중복 선언의 단점 function logText(text: string) { console.log(text); return text; } function logNumber(num: number) { console.log(num); return num; } logText('..

JSTS 2022.07.07

[TS] 4. 이넘, 클래스

이넘 이넘(Enums)은 특정 값들의 집합을 의미하는 자료형이다. 숫자형 이넘 별도의 이넘 형식을 지정해주지 않으면 숫자형 이넘으로 설정된다. 처음 값을 0 기준 1씩 증가하는 값으로 초기화돼 있다. enum Shoes { Nike, Adidas } var myShoes = Shoes.Nike console.log(myShoes); // 0 문자형 이넘 enum Shoes { Nike = '나이키', Adidas = '아디다스' } var myShoes = Shoes.Nike console.log(myShoes); // '나이키' 이넘 활용 사례 // 예제 enum Answer { Yes = 'Y', No = 'N' } function askQuestion(answer: Answer) { if(answe..

JSTS 2022.07.07