mystery

Call Signatures란? 함수 매개변수와 return값의 Type을 미리 정하는 문법입니다. 함수선언 안에서 타입을 명시한 코드 function hello(name: string): void { console.log(`hello ${name}`); } Call Signatures를 사용한 코드 type Hello = (name: string) => void; const hello: Hello = (name) => { console.log(`hello ${name}`) } hello('bob') //"hello bob" Call Signatures를 사용하면 함수의 구현과 타입선언을 분리하여 구현할 수 있습니다. 타입 체커는 hello 함수의 타입을 이미 알기 때문에 에러없이 실행됩니다.

1. 타입 추론과 타입 표기 1-1. 타입 추론 타입스크립트의 타입 체커는 추론을 통해 타입을 정한다. let a = 'hello' let b = false let c = 1 let d = [1,2,3] 위 코드에서 각 변수의 타입은 타입 체커에 의해 추론되어 정해진다. a - string b - boolean c - number d - number[ ] 1-2. 타입 표기(Type Annotation) 개발자가 직접 타입을 명시할 수 있다. : type 을 사용한다. let a : string = 'hello' let b : boolean = false let c : number = 1 let d : number[] = [1,2,3] 가능하다면 타입 체커가 추론을 통해 타입을 지정하도록 하는게 좋다. ..

1. TypeScript란? 동적 타입 언어인 JavaScript의 단점을 보완하기 위해 JavaScript 기반으로 만들어진 정적 타입 언어이다! (자바스크립트의 슈퍼셋) 1-1. JavaScript의 단점 자바스크립트는 런타임에서 타입이 결정되는 동적 타입 언어이다. 개발자는 값의 종류, 즉 타입을 선언하지 않아도 되고 컴파일 과정이 없기 때문에 이런 부분이 장점이 되기도 한다. 하지만 이런 특징 때문에 개발자가 예상치 못한 에러가 발생하면 런타임에서야 오류를 발견할 수 있기 때문에 최악의 경우, 이미 프로그램이 멈춘 뒤일 것이다. 프로그램 사용자는 에러를 마주치고 이미 떠났다. 타입 안정성이 보장되지 않기 때문에 (프로그램에서 타입이 잘못 전달되어 발생되는 에러를 잡기 어려움) 프로젝트가 커질수록 ..

제목 그대로 무려 1명의 유저가 사용하는 서비스 개발을 마쳤다😐 성공했지만 실패했다. 작은 것을 만들고 큰 것을 얻었다. LOL은 인생이다. 무슨 미친 소리인가 생각했다면? 정상이다. 하지만 읽고 나면 이해가 될 것이다! 꼭 전부 읽어주면 좋겠다. 1. LOL 밴픽 시뮬레이터 프로젝트의 시작💪 평화로운 오후. LOL 프로팀 코치를 하고 있는 친구와의 대화 내용이다. - 나 : 요즘엔 일하는 거 어떻냐? - 친구 : "아 맞다 너 뭐 좀 만들 수 있냐? 일하는데 개 답답함🤦‍♂️🤦‍♂️🤦‍♂️" - 나 : "으음..? ㅇ..예에?? 뭘요? 😲" 이어서 심도 있는 대화가 오고 갔고, 친구는 곧바로 업무지시를 하기 시작했다. 이렇게 정말 갑자기, 상당히 즉흥적으로 친구의 업무 환경 개선을 위한 프로젝트가 시작..

1. mixin 자바스크립트는 단일상속만을 허용합니다. 객체에는 단 하나의 [[ Prototype ]] 만 존재할 수 있고, 클래스는 단 하나의 클래스만 상속 받을 수 있습니다. 이런 제약에서 벗어나기 위해 mixin 을 사용할 수 있습니다. mixin이란 특정 행동을 실행해주는 메서드를 제공하는 객체입니다. 이 객체를 다른 클래스에 병합해 사용합니다. let helloMixin = { sayHello(){ console.log(`Hello ${this.name}`) } } class User { constructor(name){ this.name = name; } } Object.assign(User.prototype, helloMixin); new User('Bob').sayHello(); // 'H..

1. 내장 클래스 확장하기 class PowerArray extends Array { isEmpty() { return this.length === 0; } } let arr = new PowerArray(1, 2, 5, 10, 50); console.log(arr.isEmpty()); // false let filteredArr = arr.filter(item => item >= 10) //filter 내장 메소드로 새로운 배열 리턴 console.log(filteredArr); // [10, 50] 새로운 배열의 값 console.log(filteredArr.isEmpty()); // false // 새롭게 리턴된 배열에서도 PowerArray의 메소드를 사용할 수 있다. PowerArray 클래스로..

1. 객체 지향의 캡슐화 객체 지향 프로그래밍의 중요한 원리 중 하나는 내부 인터페이스와 외부 인터페이스를 구분 짓는 것, 즉 캡슐화 입니다. 객체 지향 프로그래밍에서 프로퍼티와 메서드는 2개의 그룹으로 분류됩니다. 내부 인터페이스 - 동일한 클래스 내의 다른 메서드에서는 접근할 수 있지만, 클래스 밖에서는 접근 할 수 없는 프로퍼티와 메서드 외부 인터페이스 - 클래스 밖에서도 접근 가능한 프로퍼티와 메서드 커피 머신으로 예를 들자면 외형에는 커피를 뽑는 버튼 몇 개, 구멍 몇 개, 화면 하나 정도가 있습니다. 내부에는 디테일한 장치들과 부품들이 전부 들어있습니다. 하지만 내부의 것을 알지 못해도 사용자는 간단한 조작으로 커피 머신을 사용할 수 있습니다. 커피 머신의 내부를 가려주는 보호 커버를 제거하면..

1. static method prototype 프로퍼티가 아닌 클래스 함수 자체에 메서드를 설정할 수 있습니다. 이런 메서드를 static method ( 정적 메서드 ) 라고 부릅니다. class Animal { static staticMethod(){ console.log(this === Animal) } } class Animal {} Animal.staticMethod = function(){ console.log(this === Animal) } Animal.staticMethod() // true class 내에서 static 메소드를 선언 하는 것은 메서드를 프로퍼티 형태로 직접 할당하는 것과 같습니다. static 메소드는 호출시 class명.method( ) 의 형태로 사용하게 되며, ..

1. 클래스 상속 ( extends ) 클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있습니다. extends 키워드로 상속을 구현할 수 있습니다. class Animal { constructor(name){ this.name = name; this.speed = 0; } run(speed){ this.speed = speed; console.log(`${this.name} 달리는 중 속도 : ${this.speed}`) } } class Human extends Animal { think(){ console.log(`${this.name} 생각하는 중`) } } let human = new Human('Bob') human.run(100) // Bob 달리는 중 속도 : 100 human.t..

1. class Class를 사용하면 객체 지향 프로그래밍에서 사용되는 다양한 기능을 자바스크립트에서도 사용 할 수 있습니다. class User { constructor({name}){ this.name = name; } welcome(){ console.log(`Welcome ${this.name}`) } } let user1 = new User({name : 'Bob'}); user1.welcome(); // 'Welcome Bob' 클래스를 new 와 함께 호출하면 다음과 같은 일이 일어납니다. 1. 새로운 객체가 생성됩니다. 2. 넘겨받은 인수와 함께 constructor가 자동 실행됩니다. constructor() 는 new에 의해 자동 호출되므로, 별다른 동작없이 객체를 초기화 할 수 있습니..