choi95의 TIL📝

다음과 같이 생성자 함수 내에서 이벤트 리스너를 등록해주고 콜백 함수로 클래스 내의 메소드를 인자로 넘겨주었다. 하지만 OnClick 메소드 내에서의 this는 Field 클래스의 인스턴스를 참조하지 못하고 undefined를 바인딩되는 문제가 발생하였다. (2021.3.17) onClick은 콜백함수이기 때문에 고차 함수 내에서 일반 함수로 호출이 된다. 일반 함수의 this는 전역 객체가 바인딩되지만 class 내의 모든 소스 코드에선 기본적으로 'strict mode'가 적용되기 때문에 undefined 가 바인딩되는 문제가 생기는 것이다. (2021.7.25)이벤트 핸들러를 통해 호출되는 콜백 함수의 this는 currentTarget, 즉 이벤트를 바인딩한 DOM 요소를 가리킨다. 이를 해결하기..

모듈화를 위해 다음과 같이 button 태그의 클래스 어트리뷰트인 btn의 노드 생성과 이벤트 리스너 등록을 Button 클래스 내의 생성자에 선언하여 주었다. btn 요소에 직접적으로 addEventListener을 등록하지 않았음에도 콘솔엔 Hello가 출력된다. 위의 동작 방식을 이해하기 위해서는 크게 가지가 필요하다. 1. this 바인딩 this는 자기 참조 변수로서, 자신이 속한 객체 또는 생성할 인스턴스를 가리킨다. 여기서 생성할 인스턴스는 btn을 가리키며 함수 평가 과정이 끝나고 실제 코드가 실행될 때 바인딩된다. 2. constructor 생성자 함수 constructor 생성자 함수는 함수 내의 코드식들을 초기화 해주고 암묵적으로 this, 즉 인스턴스를 반환한다. 3. 가비지 컬렉션..

moudle.exports === exports === {객체} moudle.exports에는 어떤 값이든 대입해도 되지만, exports와 같은 경우에는 객체를 직접 참조하기 때문에 반드시 객체처럼 속성명과 속성값을 대입해야 한다. 따라서 위와 같이 함수를 대입하는 경우에는 module.exports를 사용해야 한다. 또한 exports와 module.exports에는 참조 관계가 있으므로 한 모듈에 동시에 사용하지 않는 것이 좋다.

Window load 크게 네 가지의 API가 있다. 1. DOMContentLoaded: HTML 파싱만 완료되면 콜백 함수를 호출 및 실행 가능하다. 2. load: css 및 image 등과 같은 리소스 파일들이 모두 완료된 뒤에 호출 및 실행 가능하다. 3. beforeunload: 파싱이 모두 완료되기 전에 예기치 못한 변수(웹페이지의 초기화 등)가 생길 때 호출 및 실행 가능하다. 4. unload: css 및 image 등과 리소스 파일들을 불러오는데에 실패하였을때 호출 및 실행 가능하다. 렌더링엔진과 자바스크립트 엔진은 병렬적으로 파싱을 실행하지 않고 직렬적으로 수행하는 동기적인(synchronous) 성향을 지닌다. 즉, script 태그 위치에 의해 블로킹이 발생할 수 있다(종속적이다)..

다음과 같은 함수 코드가 어떤 순서대로 출렸되는지 콜 스택, 백그라운드, 데스크 큐, 이벤트 루프를 통해 살펴보고자 한다. 1. 처음 콜 스택(실행컨텍스트)에는 크롬의 전역 컨텍스트인 anoymous 함수가 나온다. 2. setTimeout 함수는 비동기로 동작하기 때문에 실행컨텍스트에 올라간 뒤, 백그라운드로 넘어간다. (이때 백그라운드에서는 전달 된 카운트 수가 멈추지 않고 동시 실행이 된다. 자바스크립트 자체는 싱글 스레드 형식으로 동작하지만 백그라운드와 같은 경우는 운영체제 및 C++에 의해 관리가 되므로 멀티 스레드가 가능하다.) 3. 콜 스택에 마지막으로 남은 anoymous가 pop되어 종료가 되면, 백그라운드에서 대기 중이던 setTimeout 함수가 데스크 큐로 넘어가게 되며 이벤트 루프..