📝 오늘 한 것

1. 미니 게임 리팩토링

📚 배운 것

리팩토링

---

1. result 클래스 만들기

1) result.js 작성

• result.js라는 파일을 따로 만들어서 result와 관련된 코드를 이곳에 적어준다. src라는 폴더에 result.js와 main.js를 함께 넣어 관리한다. HTML 파일의 script 코드 부분에 type="module"을 적는다.

• result.js에서 Result 라는 class를 선언한다.

• constructor 함수를 통해 result 클래스의 멤버 변수를 만들어준다. 필요한 DOM 요소를 가지고 와서 그 앞에 this를 적어준다. 여기서 this는 Result 클래스 객체를 의미한다.

• 📌 setClickListener 메서드를 등록해준다. onClick이라는 콜백 함수를 Result 클래스의 onClick이라는 멤버 변수에 할당한다.

• 📌 onClick 멤버 변수가 true라면(등록된 콜백 함수가 있으면) 그것을 실행한다.

• Result 클래스 앞에 export default 를 적어서 다른 파일에서도 Result 클래스를 읽을 수 있도록 해준다.

'use strict';

export default class Result {
  constructor () {
    this.gameResult = document.querySelector('.result');
    this.replayBtn = document.querySelector('.replayBtn');
    this.notice = document.querySelector('.notice');
    this.replayBtn.addEventListener('click', () => {
      this.onClick && this.onClick(); // 📌 
      this.hide();
    });
  }

  setClickListener (onClick) { // 📌
    this.onClick = onClick;
  }

  show (text) {
    this.gameResult.style.display = 'block';
    this.notice.innerHTML = text;
  }

  hide () {
    this.gameResult.style.display = 'none';
  }
}

2) main.js 수정

• 파일 위에 import Result from './result.js'; 라고 적어준다.

• Result 클래스를 이용해 gameFinishBanner라는 객체를 생성해준다. 그냥 result라고 쓰지 말고, 정확히 이게 어떤 건지 설명해주는 이름을 쓰도록 한다.

• gameFinishBanner에 setClickListener 메서드를 등록해준다. 이로 인해 클릭이 되면 startGame 함수가 호출된다.

const gameFinishBanner = new Result();

gameFinishBanner.setClickListener(() => {
  startGame();
});
/*
gameFinishBanner.setClickListener(() => startGame());
gameFinishBanner.setClickListener(startGame);

모두 같은 뜻이다.
*/

• 그 외에도 main.js에서 result와 관련된 부분을 삭제하거나 수정한다. hideGameResult 함수와 showGameResult 함수는 삭제한다. 이 함수가 호출된 부분들은 gameFinishBanner.show 혹은 gameFinishBanner.hide로 수정한다.

2. Field 클래스 만들기

1) field.js 작성

• field.js에서 Field 라는 class를 선언한다.

• constructor 함수를 통해 field 클래스의 멤버 변수를 만들어준다. field에 클릭 이벤트를 등록하여 field 클릭 시 field 클래스의 멤버 메서드인 onClick 함수가 호출되도록 적어준다.

💡 this에 바인딩 하는 방법

• class 멤버 함수가 다른 함수 인자로 전달될 때는, this에 그 class의 정보가 유지되지 않는다. 따라서 아래와 같이 작성하면, onClick 함수 본문(아래 field.js 전체 코드 참고)에서 this.onItemClick 값이 항상 undefined가 되어 코드가 의도한 대로 실행되지 않는다.

this.field.addEventListener('click', this.onClick); // (x)

• 이를 해결하기 위해 아래 3가지 방법을 사용할 수 있다. 화살표 함수에서 this는 언제나 화살표 함수 상위 스코프의 this를 가리키는 점을 이용해 작성해라.

✔ 화살표 함수 이용 ①

this.field.addEventListener('click', (event) => this.onClick(event));

✔ 화살표 함수 이용 ②

// 이렇게 정의된 onClick 함수를
onClick (event) {

}

// 이렇게 바꾼다
onClick = (event) => {

}

✔ bind 메서드 이용

this.onClick = this.onClick.bind(this);
this.field.addEventListener('click', this.onClick);

• Field 클래스는 started, timer, limit 등 게임 진행 상태에 관한 정보는 처리할 수 없다. 원래 field에서 일어났던 이미지 랜덤 배치 & 클릭 이벤트와 관련된 부분만 main.js 코드에서 가져온다. class의 멤버 변수나 멤버 메서드로 정의된 것들이라면, 앞에 this를 붙인다.

• class 내용과 상관없는 배경 음악 재생 함수 등은 메모리 낭비를 막기 위해 class 밖으로 빼서 써준다. (추후 수정할 부분)

• onClick 함수의 if else if 구문에서 this.onItemClick 함수가 실행될 때 각각 carrot과 bug를 인자로 주어 구분되도록 했다.

'use strict';

// 전역 변수들
const CARROT_SIZE = 120;
const BUG_SIZE = 80;

const carrotSound = new Audio('sound/carrot_pull.mp3');

// field 클래스
export default class Field {
  constructor (carrotCount, bugCount) {
    this.carrotCount = carrotCount;
    this.bugCount = bugCount;
    this.field = document.querySelector('.field');
    this.fieldRect = this.field.getBoundingClientRect();
    this.field.addEventListener('click', (event) => this.onClick(event));
  }

  // 이미지 랜덤 배치
  init () {
    this.field.innerHTML = '';
    this._makeImg('carrot', this.carrotCount, 'img/carrot.png', CARROT_SIZE);
    this._makeImg('bug', this.bugCount, 'img/bug.png', BUG_SIZE);
  }

  // 이미지 생성
  _makeImg (name, count, src, size) { // 이 파일에서만 불릴 함수 앞에 _ 표시를 붙인다
    for (let i = 0; i < count; i++) {
      const item = document.createElement('img');
      item.setAttribute('class', `${name}`);
      item.setAttribute('src', `${src}`);

      const coord = this._randomCoord(size);
      item.style.left = coord[0] + 'px';
      item.style.top = coord[1] + 'px';
      item.style.width = size + 'px';

      this.field.appendChild(item);
    }
  }

  // 랜덤 좌표 생성
  _randomCoord (size) {
    return [ ( this.fieldRect.width - size ) * Math.random(),
             ( this.fieldRect.height - size ) * Math.random() ];
  }

  // 콜백 함수를 class 객체의 변수에 할당
  setClickListener (onItemClick) {
    this.onItemClick = onItemClick;
  }

  // field의 클릭 이벤트 리스너
  onClick (event) {
    const target = event.target;

    if (target.matches('.carrot')) {
      target.remove();
      playSound(carrotSound);
      this.onItemClick && this.onItemClick('carrot');
    } else if (target.matches('.bug')) {
      this.onItemClick && this.onItemClick('bug');
    }
  }
}

// 배경 음악 재생 함수
function playSound (sound) {
  sound.currentTime = 0;
  sound.play();
}

2) main.js 수정

• field.js의 onClick 함수에 있는 이미지 삭제나 음악 재생은 main.js의 onFieldItemClick 함수에 적지 않았다.

• initGame 함수에 기존의 init() 대신 gameField.init()을 적어주었다.

const gameField = new Field(CARROT_COUNT, BUG_COUNT);

gameField.setClickListener(onFieldItemClick);

function onFieldItemClick (item) {
  if (!started) {
    return;
  }

  if (item === 'carrot') {
    showGameLimit(--limit);

    if (limit === 0) {
      finishGame(true);
    }
  } else if (item === 'bug') {
    finishGame(false);
  }
}

✨ 내일 할 것

1. 객체 지향 프로그래밍, class, 모듈화 등 학습