🕘 일정
- 필드 클래스, 게임 클래스 만들기
- this 바인딩 복습
- private 변수 학습
1. Field 클래스 (리팩토링)
게임 시작 버튼을 클릭했을 때 게임에 필요한 요소들을 생성하고 (icons)
아이템들을 적절한 위치에 배치하고 클릭 이벤트를 핸들링하는 함수들을 이 클래스 내에 작성한다.
💡 자바스크립트에서 private 멤버변수 설정하기
타입스크립트 같은 경우에는 private 멤버변수를 생성할 할 수 있는데
자바스크립트의 경우 아직 통용적으로 쓰여지고 있지 않기 때문에
'_' under score 로 외부에서 사용하면 안 되는 멤버변수를 표시한다.
이 방법은 고전적인 방법이라 추천하지는 않지만 이번 리팩토링에서는
다른 방법이 없으니 우선 사용하도록 한다.
필드 클래스는 Field에서 진행되는 게임과 관련된 메서드들만을 가지고 있는 오브젝트 이다.
당근과 벌레 아이템의 갯수를 담고있는 변수는 init의 성격을 띄므로 main.js에 남겨두고
field 클래스 생성 시 매개변수로 carrot, bug 데이터값을 전달하도록 한다.
2. this 바인딩
자바스크립트에서 click 이벤트의 콜백함수로 클래스의 멤버함수인 'this.함수' 를 전달할 경우,
해당 멤버함수를 가지고 있는 클래스의 정보는 전달되지 않는다.
클래스의 정보가 전달되지 않으니 onClick 멤버함수에 작성되어 있는 'this' 가 누구인지 알지 못하므로
멤버함수에 작성되어있는 대로 코드를 실행시키지 못하는 경우가 발생한다.
위의 멤버함수에서 item.click 이벤트의 주체는 계속 'undefined' 상태인 것이다.
이렇게 클래스의 멤버함수를 다른 곳에 전달할 때에는 클래스의 정보가 무시되기 때문에
클래스 정보를 유지하고 싶다면, 해당 클래스와 멤버함수를 바인딩 해주어야 한다.
이를 this 바인딩 이라 한다.
[ this 바인딩 방법 3가지 ]
1) 직접 onClick 에 바인딩하기
this.onClick = this.onClick.bind(this);💡 바인딩을 했는데도 클래스를 인식하지 못했다?
onClick 이벤트에 콜백함수를 지정하기 전에 먼저 바인딩을 해야 클래스를 인식할 수 있다.
콜백함수 이후에 바인딩 하지는 않았는지 확인하기
2) arrow function 으로 콜백 함수 한번 더 감싸기
arrow function 은 this를 유지시켜 주기 때문에
1번 방법으로 일일이 바인딩하기 보다는 콜백을 한번 더 감싸서 사용하는 방법을 선호한다.
3) 멤버함수를 변수로 처리하기
콜백을 한번 더 감싸는 것도 일일이 작업하는 것이 번거롭다면
멤버함수를 변수로 처리하고, 이 변수가 arrow function 을 가리키도록 하면 자동으로 바인딩이 된다.
3. private 변수
객체 지향 프로그래밍에서 가장 중요한 원리 중 하나는
'내부 인터페이스와 외부 인터페이스를 구분 짓는 것’ 이다.
내부 인터페이스(internal interface)
동일한 클래스 내의 다른 메서드에선 접근할 수 있지만, 클래스 밖에선 접근할 수 없는 프로퍼티와 메서드
외부 인터페이스(external interface)
클래스 밖에서도 접근 가능한 프로퍼티와 메서드
자바스크립트에서는 두 가지 타입의 객체 필드(프로퍼티와 메서드)가 있다.
public: 어디서든지 접근할 수 있으며 외부 인터페이스를 구성한다.
지금까지 다룬 거의 모든 프로퍼티와 메서드는 public이다.
private: 클래스 내부에서만 접근할 수 있으며 내부 인터페이스를 구성할 때 쓰인다.
ㅡ 모던 자바스크립트 튜토리얼
https://ko.javascript.info/private-protected-properties-methods
