PracticeEveryday

의존성 - 의존성은 구성 요소들이 서로 의존하는 성질입니다. // 의존성은 구성 요소들이 서로 의존하는 성질입니다. // Programmer 클래스는 Laptop 클래스에 의존성을 띕니다. class Laptop { public turnOn() {} } class Macbook extends Laptop {} class Programmer { private laptop: Laptop; constructor() { this.laptop = new Laptop(); } public programming() { this.laptop.turnOn(); } } // programmer가 Mabook을 사용한다면 생성자 함수에 Macbook으로 변경해야 하는 이슈가 발생한다. class Programmer2 { p..

1. 클래스 정의 - ES6 클래스는 몸체에 메소드만을 포함할 수 있다. 클래스 몸체에 클래스 프로퍼티를 선언할 수 없고 반드시 생성자 내부에서 클래스 프로퍼티를 선언하고 초기화한다. // person.js class Person { constructor(name) { // 클래스 프로퍼티의 선언과 초기화 this.name = name; } walk() { console.log(`${this.name} is walking.`); } } 이 코드의 확장자를 .ts로 바꾸어 컴파일하면 에러가 난다. person.ts(4,10): error TS2339: Property 'name' does not exist on type 'Person'. person.ts(8,25): error TS2339: Propert..

Duck Typing interface People { talk(): void; whoAmI: string; } class Human implements People { whoAmI = "human"; talk = () => { console.log(`say ${this.whoAmI} : 말할 수 있어요`); }; } class Robot { whoAmI = "robot"; talk = () => { console.log(`say ${this.whoAmI}: 말할 수 있어요`); }; } const humanInstance = new Human(); const robotInstance = new Robot(); const startTalk = (people: People): void => { people..

TypeScript Jest로 test 할 때 import 사용 하는 방법 1. jest 를 TypeScript 에서 사용하기 위해 필요 한 패케지들과 바벨 플러그인 설치 yarn add -D jest ts-jest @types/jest yarn add -D @babel/preset-typescript @babel/preset-env 2. 바벨 설정 // .babelrc { "presets": ["@babel/preset-typescript", "@babel/preset-env"], } 안 된 이유 - 테스트 코드는 Jest 모듈이 실행시키는 데 이 Jest 모듈은 별다른 설정을 해주지 않으면 테스트 대상 코드가 JavaScript 일 것이라고 생각 해 에러가 발생했던 것이다!! 해결 방법 - Jest는..

tsc-watch 사용이유 - ts 코드가 바뀔 때마다 js로 컴파일 한 뒤 node를 실행하는 과정을 반복했지만 ts-watch를 사용하면 그러지 않아도 된다. => TypeScript 버전 nodemon인 셈! 1. tsc-watch 설치 yarn add tsc-watch 2. root 폴터와 dist 폴더 생성 - dist 폴더는 컴파일 된 JavaScript 파일들이 모인다. - root 폴더는 컴파일 될 TypeScript가 모여있는 곳이다. 3. tsconfig.json 파일 수정! outDir : "dist" - 컴파일 된 JavaScript 파일이 모일 경로 include : ["root"/**/*"] - TypeScript 파일들이 모여있는 경로 4. pacage.json 파일 수정 "s..

import User from "./user.js"; console.log(new User("kim")); // User { name: 'kim' }​ 모듈 ( Module 모듈, 교과목 단위 ) - 개발하는 어플리케이션의 크기가 커지면 언젠가 파일을 여러 개로 분리해야 하는 시점이 오게 됩니다 이 때 분리된 각각의 파일을 ' 모듈 ( Module ) ' 이라고 부르는 데 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. - 자바스크립트가 만들어 진지 얼마 안 되었을 때는 표준 문법이 필요하지 않았지만 규모와 기능이 점점 커지고 복잡해짐에 따라 자바스크립트 커뮤니티는 특별한 라이브러리를 만들어 필요한 모듀을 언제든지 불러올 수 있게 해준다거나 코드를 모..

tsconfig.json - 매번 컴파일을 입력할 때마다 옵션을 추가하거나 제거하는 것은 매우 귀찮고 불편합니다. 명령어를 매번 입력하지 않고 보다 쉽게 사용하기 위해서 tsconfig.json을 만들어 사용합니다. tsc 옵션 더보기 Documentation - tsc CLI Options A very high-level overview of the CLI compiler options for tsc www.typescriptlang.org - tsconfig.json 파일이 있는 위치가 TypeScript의 루트 디렉토리로 결정됩니다. 이 파일에는 프로젝트를 컴파일 하는 데 필요한 루트 파일, 컴파일러 옵션들을 설정할 수 있습니다. TypeScript 프로젝트는 다음 방법 중 하나로 컴파일 됩니다. ..

맵 - 객체 : 키가 있는 컬렉션을 저장함. - 배열 : 순서가 있는 컬렉션을 저장함. ※ 그러나 현실 세계를 반영하기에 위 두 자료구조만으론 부족하여 맵과 셋이 등장하게 되었씁니다. 맵 ( Map ) - 맵은 키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다. 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있습니다. new Map() - 맵을 만듭니다. map.set( key, value ) - key를 이용해 value를 저장합니다. map.get( key ) - key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다. map.has( key ) - key가 존재한다면 true, 존재하지 않으면 false를 반환합니다. map.delete( key ) -..

Iterable 객체 Iterable : 반복 가능한 - 반복가능한 객체는 배열을 일반화한 객체입니다. 이터러블이라는 개념을 사용하면 어떤 객체든 for ... of 반복문을 사용할 수 있습니다. 배열은 대표적인 이터러블입니다. 배열 외에도 다수의 내장 객체가 반복이 가능하며 문자열 역시 이터러블의 예입니다. - 배열이 아닌 객체가 있는데 이 객체가 어떤 것들의 컬렉션 ( 목록, 집합 등 )을 나타내고 있는 경우 for... of 문법을 적용한 다면 컬렉션을 순회하는 데 유용할 것입니다. Symbol.iterator - for ... of 를 적용하기에 적합해 보이는 배열이 아닌 객체를 만들어보자 let range = { from: 1, to: 5, }; 목표 for ( let num of range )..

var 키워드 - var 키워드는 JavaScript ES5까지 변수를 선언할 수 있는 키워드로 사용되었다. var 키워드의 특징 1. 변수의 중복 선언이 가능하다. var name = 'kem'; var name = 'lee'; console.log(name) // lee - 이러한 코드는 변수 선언부 2줄이 가까이 붙어있으니 name이 두번 선언 되어있구나를 알 수 있지만 첫 번째 name 선언과 두 번째 name 선언 사이에 500줄의 코드가 있다면 문제가 심각해 질 수 있다. 이런 변수의 중복 선언 허용은 의도하지 않은 변수의 변경이 일어날 가능성이 충분하기 때문이다. 2. 호이스팅 대상이다. - 호이스팅은 쉽게 이야기해서 스코프 안에 있는 선언들을 모두 스코프의 최상단으로 끌어 올리는 것을 의미..