리팩토링 : 당근잡기 게임3

지원·2022년 6월 8일
0
post-thumbnail

🕘 일정

  1. 게임 클래스 만들기
  2. 빌더 패턴 학습 (디자인패턴)
  3. 자바스크립트 타입 보장하는 법 + 마무리
  4. 회고

1. 게임 클래스 (리팩토링)

게임이 시작되고 게임 시간을 얼마만큼 지속할 것인지,

당근의 갯수와 벌레의 갯수는 몇개인지 알 수 있는 데이터들을 생성자의 매개변수로 받아온다.

게임 실행에 필요한 DOM 요소들을 멤버변수로 지정해주고

이전에 작성했던 Field 클래스 또한 멤버변수로 가져온다.

(game을 실행하는 바탕이 Field이기 때문에)

각각의 기능들을 클래스로 분류하여 모듈화하니 main.js 코드가 훨씬 간결하고 깔끔해졌다.

2. 빌더 패턴

1-1. 빌더 패턴 정의

1. 복잡한 객체의 생성 과정과 표현 방법을 분리하여 동일한 생성 절차에서
서로 다른 표현 결과를 만들 수 있게 하는 패턴

2. 생성자에 들어갈 모든 매개 변수를 받은 뒤에 이 변수들을 통합해서 한번에 객체를 생성하는 패턴 ㅡ 위키백과

빌더 패턴은 생성자에 들어갈 매개 변수가 많든 적든 차례차례 매개 변수를 받아들이고

모든 매개 변수를 받은 뒤에 이 변수들을 통합해서 한번에 사용한다.

1-2. 빌더 패턴 장점

많은 생성자 파라미터를 입력해야 하는 인스턴스 객체를 생성할 때

인자의 값을 하나라도 잘못 주게 되면 잘못된 정보가 저장될 수 있고

다뤄야 할 매개변수가 많을 경우 가독성 또한 좋지 않다.

빌더패턴은 이런 단점을 보완하여 명시적이고 직관적으로 객체를 생성하고 반환할 수 있게 한다.

1-3. 빌더 패턴 사용하기

네이밍은 빌더로 만들 original 클래스의 이름에 +'Builder'를 붙이는 것이 좋다.

original 클래스 생성자의 파라미터들은 빌더 클래스에서는 멤버 함수로 작성한다.

각각의 멤버함수가 return 하는 것은 'this' 바로 자기 자신이다.

멤버함수를 다 작성했으면 마지막으로 'build' 멤버함수를 작성한다.

여기서 중요한 것이, return 값으로 original 객체를 반환하는데,

이 original 객체의 생성자 파라미터 자리에 멤버함수인 'this.XXX' 를 입력한다.

이렇게 하면 original 클래스의 인스턴스 객체를 생성할 때
보다 직관적인 생성자 파라미터의 입력과 가독성이 높은 코드 작성을 할 수 있다.


3. 자바스크립트로 타입 보장하기

자바스크립트에서 타입을 보장하고 싶다면 Object의 freeze 메서드를 사용한다.
오타의 위험이 있는 문자열 타입 같은 경우 Object로 관리해주면 좋다.
상수 타입에 freeze 된 Object 객체를 할당하하는 형태로 작성한다.

사용할 때엔 객체에 접근하여 사용하면 된다.
이렇게 오브젝트를 얼리면 (freeze) 객체의 속성을 지우거나 바꿀 수 없고
밀봉과 속성 값 변경 또한 차단되기 때문에 데이터 보관이 용이하고 타입오류로 인한 실수를 줄일 수 있다.


4. 회고 - 리팩토링을 하면서

당근잡기 게임은 이번이 두번째 이다.

처음 이 토이프로젝트를 할 때엔 함수를 어떻게 작성하는지에 대해 집중했다면

두번째는 확실히 첫번째 때는 잘 와닿지 않았던 디자인 패턴이나

데이터 타입을 보장하는 방법 등 좀 더 기술적인 부분을 살펴볼 관점이 생겼달까?

그래도 첫번째나 두번째 모두 막히는 부분은 이벤트 리스너와 콜백 부분이다.

이번 프로젝트에서도 이벤트 리스너가 어떻게 onClick 을 감지하고

콜백 함수를 호출하는지에 대한 흐름이 매끄럽게 이해되지 않았다.

더불어 함수나 생성자에 매개변수로 데이터를 넘기고 받아오는 구조가

아직 머리에 딱딱 그려지지 않는다.

아마 코드를 많이 작성하고 계속 만들어보면 확실하게 내것으로 흡수되겠지?


두번째였는데도 결코 쉽지 않았던 토이프로젝트였다.

그래도 첫번째때 보다 머리속에 윤곽이 좀 잡혔으니

이제 배운 것을 써먹을 수 있게 새로운 미니프로젝트를 시작해야겠다!

profile
하루씩 내 자신 넘기⛰️

0개의 댓글