choi95의 TIL📝

캔버스의 사이즈를 현재 보고 있는 창 사이즈에 딱 맞게 조정하였고 조정 된 캔버스 기준으로 스크롤 값이 브라우저 창에 맞닿았을 때 설정해 둔 캔버스 애니메이션이 발생할 수 있도록 브라우저 창과 캔버스 이미지 간의 height 값을 getBoundingClientRect().top을 통해 계산하였다. 관련 영상 하지만 원래 의도했던 바와는 달리 캔버스 애니메이션이 제대로 동작하지 않았다. 이는 getBoundingClientRect().top 값이 일정하게 나오는 것이 아니라 아래 콘솔에 출력해 본 바와 같이 사용자가 스크롤하는 속도에 따라 값이 top의 값이 상시 변화하기 때문이었다. 이를 위해 요소의 offsetTop을 이용하여 브라우저 창과 캔버스 이미지 간의 height 값에 얻고자 했다. offs..

다음과 같이 같은 재귀 호출 기능을 수행하는 두 코드가 있다. 하지만 위 두 코드의 실행 결과는 다르다. setTimeout()으로 재귀 호출한 결과 css에 적용 한 button:hover의 색상값이 마우스 커서를 뗐을 때 잘 해제되는 반면에 Promise then으로 재귀 호출한 결과는 마우스 커서를 뗐음에도 button:hover의 색상 값이 그대로 남아 있는 것을 확인할 수 있다. 이는 두 비동기 함수의 콜백 함수가 각기 다른 큐에 적재되기 때문이다. setTimeout()과 같은 경우는 테스크 큐에 적재되는 반면 Promise then과 같은 경우는 Microtask 큐에 적재된다. 이 둘 모두 콜 스택이 비어있을 때 이벤트 루프에 의해 콜 스택에 적재된다는 점은 똑같으나 다소 차이가 존재한다...

다음과 같이 Game 클래스 인스턴스를 초기화해주기 위해 생성자에 전달 할 인자들을 넣어주었다. 기능 상에는 문제는 없지만 다음과 같이 인스턴스의 초기화가 모두 생성자 내에서 이루어지게 된다면 넘기는 인자의 수가 많으면 복잡해지고 이 인자들이 무엇을 지칭하는지 알 수가 없다. 이로 인해 코드 상 유연하지 못하고 종속적이다. 이를 해결하기 위해 빌더 패턴(Bulider Pattern)을 사용하여 코드를 수정하였다. Game 클래스를 통해 바로 인스턴스를 생성해 주는 것이 아닌 이전에 임의의 GameBuilder 라는 클래스를 만들어 클래스 내의 메소드를 호출하게 되면 초기값을 설정해주고 클래스 자체를 반환해주었고 이후 클래스를 생성함과 동시에 메서드 체이닝을 통해 인스턴스 초기화 및 Game 클래스 인스턴..

다음과 같이 생성자 함수 내에서 이벤트 리스너를 등록해주고 콜백 함수로 클래스 내의 메소드를 인자로 넘겨주었다. 하지만 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. 가비지 컬렉션..

오브젝트를 마우스 커서에 따라 움직이는 스크립트를 다음과 같이 작성하였다. top과 left 속성이 아닌 translate 속성을 이용하여 이를 구현하였는데, 이는 랜더링 성능에서 차이가 있기 때문이다. 랜더링이 진행되는 과정을 크게 분류하자면, Construction( DOM CSSOM RenderTree ) Operation( layout paint composition) 으로 나눌 수 있다. 이때 실제 요소들을 화면에 보이게끔 하는 Operation 과정 중 paint에서는 DOM이나 CSSOM에서 구성 한 내용을 바로 출력하는 것이 아니라 각각의 요소들을 잘게 나눠서 이미지(비트맵 형식)를 layer별로 준비하는 과정을 거친다. 이는 후 수정을 진행할 경우 각 layer가 아닌 전체를 수정해야 하..

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 태그 위치에 의해 블로킹이 발생할 수 있다(종속적이다)..