클래스 4

클래스 리스트 순서에 따른 구현은 위험하다!

HTML 엘리먼트에 접근할 때 클래스 이름으로 접근하고는 한다. 그리고 클래스 이름을 아예 데이터로 저장하기도 했다. 그리고 심지어 나는 클래스 리스트를 복제해 그 리스트의 요소를 pop하며 사용했는데 이는 안 좋은 행동인 것이 확실하다. 결론부터 말하자면, HTML에 작성된 클래스 순서가 영원히 보장되지 않고, 배포 주체에 따라 바뀔 수 있다. 예를 들어 보자. 아래와 같은 옵션이 있다. 옵션은 플레이 옵션(혼자, 대결)과 보드 크기(작은, 큰) 두 종류이며 각 옵션들 중 한 개씩 선택할 수 있다. // index.html 혼자 하기 대결하기 작은 게임 보드 큰 게임 보드 나는 아래와 같이 선택한 옵션 엘리먼트의 클래스 리스트를 받은 다음 pop하여 optionType과 optionName에 할당했다...

자바스크립트 클래스 메소드에서 이벤트리스너 콜백 함수를 작성할 때 주의해야 할 this 바인딩

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

[Javascript] 프로토타입으로 클래스 구현하기

프로토타입으로 클래스 구현하기 자바스크립트에는 '상속' 개념이 존재하지 않습니다. 하지만 클래스 기반의 다른 언어에 익숙한 개발자들의 니즈에 따라 ES6에는 클래스 문법이 추가됐습니다. 하지만 ES6 클래스에서 일정 부분은 프로토타입을 활용하고 있기 때문에, ES5 체제 하에서 클래스를 흉내내기 위한 구현 방식을 학습하는 것은 큰 의미가 있습니다. 클래스와 인스턴스의 개념 이해 상위의 개념과 하위의 개념이 있습니다. 개념을 어떤 '집단'으로 표현하면, 영어로 그것은 클래스라고도 할 수 있습니다. 다시 말해, 상위 클래스와 하위 클래스가 있습니다. 하위 클래스는 상위 클래스를 포함하면서 더 구체적인 내용(개념)이 추가됩니다. 여기서 클래스의 예는 '음식'이고 그 하위 개념(클래스)는 '과일'이며, 또 그 ..

클래스의 내부와 외부를 구분해야 하는 이유는?!

클래스의 내부와 외부를 구분해야 하는 이유 1. 경계의 명확성이 객체의 자율성을 보장하기 때문이다. 객체가 자율적인 존재로 우뚝 서기 위해서 외부의 간섭을 최소화해야 한다. 일반적으로 객체의 상태는 숨기고 행동만 외부에 공개해야 한다. 외부에서는 객체가 어떤 상태에 놓여 있는지, 어떤 생각을 하고 있는지 알아서는 안 되며, 결정에 직접적으로 개입하려고 해서도 안 된다. 객체에게 원하는 것을 요청하고는 객체가 스스로 최선의 방법을 결정할 수 있을 것이라는 점을 믿고 기다려야 한다. 캡슐화와 접근 제어는 객체를 두 부분으로 나눈다. 하나는 외부에서 접근 가능한 부분으로 이를 퍼블릭 인터페이스라 부른다. 다른 하나는 외부에서 접근 불가능하고 오직 내부에서 접근 가능한 부분으로 이를 구현이라 부른다. 2. 프로..