leesche blog

이 글은 이 링크의 글을 기반으로, 저에게 필요한 내용을 군데군데 보충하여 작성되었습니다. ECMAScript는 Javascript랑 무슨 관계예요? ECMA International에 의해 제정된 표준들 중 하나인, ECMA-262가 ECMAScript를 정의합니다. ECMA International은 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구입니다. ECMA-262는 ECMA International이 제정한 수많은 표준들 중 하나입니다. 따라서, ECMAScript는 ECMA International에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어의 사양(specification)를 뜻합니다. 스크립트 언어는 무엇인가요? 존재하는 시스템 또는 실체(entity)..

오늘은 이런 트러블슈팅을 했다. 퀴즈 프로그램을 만드는 중, 기존에 만들어둔 버튼을 재활용하기 위해 버튼에 부착된 이벤트리스너를 제거해야 했다(이벤트 위임을 하면 아예 발생하지 않았을 문제 같기도 하다). 따라서 문제의 정답과 보기가 이미 존재할 때, 그 문제의 보기(선택지)를 초기화해주는 작업을 위한 코드, 즉 조건문을 작성했다. if (this.$validChoices && this.$correctAnswer) { this.#detachEventListenerFromChoices(); } 그런데 코드를 테스트 하는 도중, 정답을 클릭하지 않았는데 다음 문제로 넘어가거나, 정답을 눌렀을 때, 오답 표시도 함께 생기는 버그가 생겼다. 원인을 찾다가 이윽고 문제를 발견했다. $correctAnswer는 0..

자바스크립트 클래스 안에서 이벤트리스너를 등록하고, 그 콜백 함수 안에서 this를 사용하려면 주의해야 한다. 아래는 board 엘리먼트의 자식 엘리먼트를 모두 선택해 각각에 이벤트리스너를 등록하는 메서드를 구현한 것이다. export default class BoardHandler{ #gameManager; /* ... */ #CLASS_NAME_BOARD_CHILD= ".board__child"; $allChildren = document.querySelectorAll(this.#CLASS_NAME_BOARD_CHILD); #initializeBoardElement() { this.$allChildren.forEach(($child) => ($child.textContent = "")); this.$..

Parcel을 사용하게 되었는데 (지금까지 경험한 바로) 엄청 간단하고 편하다. 그저 parcel index.html이라는 간단한 명령어로, HTML, CSS, 거기에 링크된 자바스크립트 파일들 빠른 속도로 빌드하고 내장 개발용 서버까지 제공해준다. Parcel은 CommonJS와 ES6 파일 임포트를 모두 지원한다고 한다. 하지만 이 상태로는 현재 실험적 기능(experimental feature)인 Class fields는 자동으로 빌드되지 못한다. 따라서 에러가 발생한다. Javascript Class fields를 parcel을 통해 사용하고 싶다면, 역시 중간에 어떤 조치를 취해야 하는데 그것이 그 유명한 babel이다. 하지만 매우 간단하다. @babel/plugin-proposal-class..

자바스크립트 논리연산자를 공부하다가 논리연산자 우선순위와 단락 평가를 알게 됐다. 배우면서 알게된 것을 기록해두려고 한다. 자바스크립트에서 논리연산자는 표현식을 반환한다. 자바스크립트에서 논리연산자 AND와 OR는 참과 거짓만 반환하는 게 아니라, 표현식 자체를 반환한다. 규칙은 다음과 같다. AND의 경우 왼쪽이 참 같은 값(Truthy)이면 오른쪽을 반환하고, 참 같은 값이 아니면 왼쪽을 반환한다. OR의 경우 왼쪽이 참 같은 값이면 왼쪽을 반환하고, 참 같은 값이 아니면 오른쪽을 반환한다. 논리 연산자 우선순위는 표에 의하면 AND는 6, OR는 5로 AND가 OR 보다 우선순위가 더 높다. 다음은 MDN 웹 문서에 나와 있는 예제다. true || false && false // returns t..