et cetera/TIL
-
타입스크립트 강의 내용 정리 (1)et cetera/TIL 2021. 12. 22. 03:35
■ 옵셔널 파라미터 해당 파라미터는 포함해도되고 포함하지 않아도 된다. function log(a: string, b?: string) {} ■ Type Aliases vs. Interface 1. 타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 이미 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같다. 2. 가장 큰 차이점은 확장 가능 여부. 타입은 확장이 불가능하다. 따라서 가능한 한 type보다는 interface로 선언해서 사용하는 것을 추천. ■ 타입 가드 특정 타입으로 타입의 범위를 좁혀나가는(필터링하는) 과정 function logMessage(value: string | number) { if (typeof value === 'number') { // 이 i..
-
Javascript Visualized: Promises & async/awaitet cetera/TIL 2021. 12. 4. 01:26
■ Promises & async/await async function은 무조건 Promise를 return한다. await 키워드는 async 함수 내부에서만 사용 가능. 엔진이 await 키워드를 만나면 async 함수는 중단된다. 해당 await 키워드 이후의 async 함수(나머지 부분)는 microtask queue로 들어간다. 그리고 async 함수를 벗어나, 해당 async 함수가 호출된 실행 컨텍스트의 나머지 코드들을 마저 실행한다. 콜스택이 완전히 비게 되면, 이벤트루프가 대기 중인 task가 있는지를 찾아 microtask queue와 macrotask queue를 살펴본다. microtask queue에는 아까 들어왔던 'await 키워드 이후의 async 함수 부분'이 대기중이므로 ..
-
JavaScript Visualized: Generators and Iteratorset cetera/TIL 2021. 11. 27. 18:37
■ Generators and Iterators 일반 함수는 호출하면 바로 완료까지 실행되는 'run-to-completion' 모델. 제너레이터 함수(function*)는 함수 실행 중간중간에 yield 키워드로 pause가 가능. 제너레이터 함수는 iterator인 제너레이터 객체를 반환. (사실 iterator이면서 iterable이다.) iterator이므로 next 메서드를 가진다. next 메서드를 호출하여 값을 직접 출력해보면 value와 done 프로퍼티를 가진 객체(iterator result)가 반환된다. value는 yield(혹은 return) 해주는 값들과 동일하고, done은 yield가 아닌 return일 때만 true를 가지는 boolean 값. yield 키워드가 나오면 제..
-
Javascript Visualized: Prototypal Inheritanceet cetera/TIL 2021. 11. 27. 18:34
■ Prototypal Inheritance 우리가 생성자 함수를 만들면 생성자 함수 뿐만 아니라, prototype이라는 별도의 객체가 하나 더 생성된다. 이 prototype이라는 객체는 기본적으로 원본 생성자 함수를 참조하는 'constructor' 프로퍼티를 가지고 있다. constructor 프로퍼티는 기본적으로 non-enumerable, 즉 객체 프로퍼티에 접근하려할 때 표시되지 않는다. Object.keys에도 non-enumerable 프로퍼티는 반환되지 않음. __proto__는 prototype 객체를 참조한다. 생성자의 각 인스턴스들은 생성자의 prototype에 접근할 수 있고, 그것이 prototypal inheritance이다. 간단한 예를 들자면, Dog라는 객체의 인스턴스인..
-
Javascript Visualized: Javascript Engineet cetera/TIL 2021. 11. 27. 18:29
■ Javascript Engine HTML 파서는 source(src)가 있는 script 태그를 만나게 된다. 이 때, source의 코드는 네트워크, 캐시, 서비스 워커 등을 통해 로드된다. 날아오는 응답은 요청된 script가 바이트 스트림으로 변환된 형태. 바이트 스트림이 다운되면서, 바이트 스트림 디코더가 이를 디코딩(해석)한다. 바이트 스트림 디코더는 해석된 바이트 스트림으로부터 토큰을 생성한다. 자바스크립트 엔진은 두 개의 파서를 사용한다. parser와 pre-parser. parser는 지금 바로 사용되는 코드를, pre-parser는 나중에 필요한 코드를 각각 다룸으로써 지금 당장 사용되지 않는 코드를 파싱하는 것을 최대한 피하기 위함. (버튼을 클릭했을 때 동작하는 함수같은 것들은,..
-
Javascript Visualized: Event Loop, Hoisting, Scope Chainet cetera/TIL 2021. 11. 27. 18:26
■ Event Loop setTimeout(() => { ... }, 1000)은 Web API 쓰레드에서 1000ms 타이머 실행이 끝난 후에 바로 실행되는 게 아니다. 1000ms 후에 단순히 setTimeout의 콜백 함수가 task queue에 추가되는 것 뿐이다. task queue는 대기열이므로 해당 콜백 함수는 대기열이 끝나고 자신의 차례가 될 때까지 기다려야한다. call stack이 비어있으면 task queue에 있던 콜백 함수들이 하나씩 event loop에 의해 call stack으로 이동한다. ✨♻️ JavaScript Visualized: Event Loop Oh boi the event loop. It’s one of those things that every JavaScrip..
-
자동차 경주 게임 미션 공통 피드백(2)et cetera/TIL 2021. 4. 16. 02:19
■ 도메인 로직에 포함할 것과 포함하지 않을 것 export class Car { constructor(name) { this.name = name; this.forwardCount = 0; } ... getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } } 해당 도메인과 직접적인 관련이 있는 로직이 아니라면 꼭 그 도메인의 메서드로 넣을 필요가 없다. 위 예시의 경우, 랜덤 숫자를 산출하는 메서드가 자동차 클래스 내에서 사용될 순 있겠지만 직접적인 관련이 있다고 보기에는 어렵기 때문에, 굳이 자동차 클래스 내부에 위치해 있을 필요는 없음. 추가로, 메서드에 꼭 this가 사용되어야 하는 건 아니지만 ..
-
자동차 경주 게임 미션 공통 피드백(1)et cetera/TIL 2021. 4. 12. 01:59
■ 인덱스를 통해 찾는 방법 지양하기 const targetButton = document.getElementByTagName("button")[0]; 위 코드의 경우, 첫 번째 button 태그를 선택하도록 구현이 되어있는데, '첫 번째'라는 조건에 종속되어있다는 게 문제. document에는 언제, 어디에서든지 button element가 추가될 수 있는데, 이 targetButton이라는 건 전체 문서에서 꼭 첫 번째에 존재해야하기 때문에 버그가 발생할 가능성이 높아진다. 즉, 이 버튼만의 고유한 값으로 접근을 하는 것이 좋다는 뜻. ■ 빠른 실패 // not recommended if (value >= 4) { this.#position++; } // recommended if (value < 4..