leesche blog

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

오늘의 쬐그마한 배움이었다. this.#squares = [null, null, null, null, null, null, null, null, null] 어떤 배열을 하나의 값으로 초기화해야 한다면, 위와 같이 일일이 하드코딩하여 써주는 것 보다, 아래와 같이 `Array(number).fill(something)`를 상수(constant)와 함께 사용하는 것이 더 가독성과 이후 변경, 확장, 유지, 보수에 용이하다. const SQUARE_LENGTH = 9; const DEFAULT_SQUARE_CONTENT = null; this.#squares = Array(SQUARE_LENGTH).fill(DEFAULT_SQUARE_CONTENT); 참고 developer.mozilla.org/ko/docs..

오늘은 이런 일이 있었다. 결론부터 말하자면, Array.filter 메소드의 반환 값이 배열이란 것을 몰라서 일어난 경험이다. 상황은 다음과 같은 함수에서 일어났다. export default class ScoreManager { /* ... */ score(player) { console.log(player) this.#playerScore[player.getType()] += 1; const $score = Array.from(this.$scores).find(($score) => $score.id === player.getType()); $score.textContent = this.getScore(player); } /* ... */ } 어떤 문제인지, 아래 score(player) 메소드에서 ..

자바스크립트 클래스 안에서 이벤트리스너를 등록하고, 그 콜백 함수 안에서 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..

아래 코드는 캘린더의 날짜를 출력함과 동시에 이벤트리스너를 붙이고 (다음 달로 넘어갈 때, 다시 이벤트리스너를) 제거하고, 새로운 날짜에 대한 이벤트리스너를 붙이는 기능을 구현한 것의 일부이다. export default class CalendarController { /* ... */ #dateOfCalendarClickEventListenerRepository = {}; /* ... 다른 메서드들 ... */ #printDates() { for (/* 캘린더 날짜 하나씩 순회하는 조건 */) { /* 캘린더 날짜 하나씩 텍스트를 채워넣는 반복문 */ const handleClickDateOfCalendar = createHandleClickDateOfCalendar( dateOfCalendar, $d..

프로그래머스 | level 1 | Python | 신규 아이디 추천 문제 링크 def solution(new_id): new_id = new_id.lower() new_id = validateAllLetters(new_id) new_id = removeDubleDot(new_id) new_id = removeDotOfFrontAndRear(new_id) new_id = handleEmptyId(new_id) new_id = handleLongId(new_id) new_id = handleShortId(new_id) return new_id def validateAllLetters(id): new_id = "" for letter in id: if letter.isalpha() or letter.isdig..

프로그래머스 | level 1 | Python | 내적 나의 풀이 def solution(a, b): answer = 0 while a and b: answer += a.pop() * b.pop() return answer 처음 문제를 읽다가 내적에 링크가 걸려 있길래 들어갔더니 영어 위키 문서였다. 그래서 찬찬히 읽으려다가 수학 용어가 나오길래 바~로 한국어 문서를 찾았다.그랬더니 더욱 깊숙한 지식의 늪에 빠졌고 내 속에선 프로그래머스에 대한 배신감과 level 1 문제에서 조차 이렇게 고전하는 자신의 무력감 또한 느껴졌다. 하지만 알고보니 무척 쉬웠던 문제. 그냥 길이(심지어 길이가 같다고!)가 같은 리스트의 요소를 순서대로(심지어 순서대로!) 곱해서 합하면 끝이다. 허무하게 (몸 곳곳에 내적 개념이..

프로그래머스 | level 1 | python | 3진법 뒤집기 나의 풀이 def solution(n): answer = [] while n != 0: # 3진법 적용하여 거꾸로 표현 remainder = n % 3 # 나머지 if remainder == 0: answer.append(0) else: answer.append(remainder) n = n // 3 base = 1 # 밑 sum = 0 while answer: sum += answer.pop() * base base *= 3 return sum 3진법을 다루는 간단한 문제이다. 다시 알고리즘 문제를 풀며 실력을 끌어올리리라, 다짐하며 시작했다. 안 풀어 봤던 level 1 문제를 발견해 풀었다. 편리한 언어의 대명사 파이썬이라 3진법 만드..

자바스크립트에서 '없음'을 나타내는 두 가지 방법, undefined와 null undefined를 반환하는 상황 3가지 자바스크립트 엔진은 사용자가 응당 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로는 그렇게 하지 않았을 때 undefined를 반환합니다. 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때 var a; console.log(a); // undefiend. 값을 대입하지 않는 변수에 접근 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때 var obj = { a: 1}; console.log(obj.b); // ReferenceError: b is not defined 존재하지 않는 프로퍼티에 접근 return 문이 없..