et cetera
-
객체지향 프로그래밍 입문 강의 (1) - 캡슐화et cetera/TIL 2021. 12. 27. 23:51
■ 캡슐화(Encapsulation) - 데이터 + 데이터 관련 기능을 묶는 것. - 객체의 기능 구현을 외부에 감추는 것 - 정보 은닉(Information Hiding)의 의미도 포함 - 외부에 영향을 끼치지 않고 객체 내부 구현을 변경 가능 ▶ 캡슐화를 하지 않으면.. if (acc.getMembership() == REGULAR && acc.getExpDate().isAfter(now()) { // 정회원 기능 } 여기서 5년 이상 사용자에게 일부 기능의 정회원 혜택을 1개월 무상 제공하는 이벤트를 열었다고 가정해보자. 그리하려 코드를 다음과 같이 수정했다. if (acc.getMembership() == REGULAR && ( (acc.getServiceDate().isAfter(fiveYear..
-
클린코드 자바스크립트 강의 (1)et cetera/TIL 2021. 12. 27. 15:37
■ 임시변수 줄이기 function getDateTime(targetDate) { let month = targetDate.getMonth(); let day = targetDate.getDay(); let hour = targetDate.getHour(); month = month >= 10 ? month : '0' + month; day = day >= 10 ? day : '0' + day; hour = hour >= 10 ? hour : '0' + hour; return { month, day, hour }; } - 위 함수가 할 수 없는 추가적인 스펙을 구현해야하는 상황이 오면 우리는 두 가지 선택을 할 수 있다. 새로 함수를 만들어서 사용하느냐, 아니면 위의 함수를 유지보수/수정하느냐의 두 가지..
-
click 이벤트보다 blur 이벤트가 먼저 발생하는 문제et cetera/Trouble Shooting 2021. 12. 24. 04:01
■ 상황 드롭다운 input 컴포넌트를 직접 구현하는 상황이었다. input 하단의 드롭다운 메뉴에 있는 item들에게 click 이벤트를 걸어놨고, input에서 focus가 다른 쪽으로 옮겨가면, 즉 blur가 되는 순간 드롭다운 메뉴가 사라지게끔 구현을 해놓은 상황. 드롭다운 메뉴를 펼쳐서 item을 클릭하려고 했는데, 갑자기 드롭다운 메뉴가 사라져버렸다. ■ 상세 드롭다운 메뉴의 item에 걸린 click 이벤트가 발생하기 전에 input의 blur 이벤트가 먼저 발생했기 때문. mouse를 누르고나서, 눌렀던 손가락을 떼는 순간 mouseup이 발생하면서 동시에 click 이벤트가 발생한다. 그 예로, 버튼에 onclick 이벤트를 달고 버튼을 꾹 누른 채 마우스를 떼지 않으면 click 이벤트..
-
타입스크립트 강의 내용 정리 (2)et cetera/TIL 2021. 12. 23. 19:48
■ 제네릭(Generic) function logText(text: string): string { console.log(text); return text; } function logNumber(num: number): number { console.log(num); return num; } logText('a'); logNumber(10); 유사한 함수를 두 개 선언하고 있다. 이 경우, 코드를 줄일 수 있는 방법은 크게 union 타입을 활용하는 방법과 Generic을 사용하는 방법이 있다. // union type을 통한 해결 function logText(text: string | number) { console.log(text); return text; } 이 방법을 사용하면 함수 내부에서는 s..
-
타입스크립트 강의 내용 정리 (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라는 객체의 인스턴스인..