📖우테코 5기 프리코스 4주차 회고

🎯 주제

이번주 주제는 다리 건너기 게임이었다. 다리 길이를 입력받아 다리를 생성하고, 위 아래 중 하나를 선택하여 다리 끝까지 도달하면 종료되는 게임이었다. 작년에 보았던 오징어 게임에 나온 다리 건너기와 유사한 게임이라 만들면서도 정말 재밌었던 주제였다.

💪 노력한 부분

❗추가적인 학습

이번주에는 많은 제약 사항들이 걸려있는 상태로 미션을 수행했다.

4주차 미션 공지 메일 중 일부이다. 메일을 읽으며 이번엔 진짜 정형화된 틀 안에서 코드를 작성해보자 다짐했다. 타 참가자분들의 3주차 코드를 읽어보며 MVC 패턴을 공부하고자 했고, js의 class에 대한 깊이있는 공부도 진행해보고자 했다. 다음은 학습 내용을 담은 링크이다.

• MVC 패턴이란?!
• JS class 공부 일지 - 생성자 함수와 class의 차이
• JS class 공부 일지 - class의 구성
• 우테코 5기 프리코스 4주차 미션 MVC 적용기

❗객체를 객체스럽게 사용하기

3주차 피드백 사항에 포함된 내용이다. 내가 생각했을 때 4주차를 시작할 때의 내게 가장 부족했던 부분이 아닐까 싶다. 참고용으로 남겨준 링크를 보며 정말 많이 고민했던 것 같다.

객체는 캡슐화된 상태와 외부에 노출되어 있는 행동을 갖고 있으며, 다른 객체와 메시지를 주고 받으면서 협력한다. 객체는 메시지를 받으면 객체 그에 따른 로직(행동)을 수행하게 되고, 필요하다면 객체 스스로 내부의 상태값도 변경한다. 간단히 말해서 객체지향 프로그래밍은 객체가 스스로 일을 하도록 하는 프로그래밍이다.

getter를 사용하는 대신 객체에 메시지를 보내자의 일부이다. 나는 이번 미션을 수행하며 위 문구를 계속 생각하며 코드를 작성했다. 이전과 어떻게 달라졌는지 실제 작성했던 코드를 보며 알아보자.

class Lotto {
  #numbers;

  constructor(numbers) {
    this.validate(numbers);
    this.#numbers = numbers;
  }

  validate(numbers) {
    if (numbers.length !== 6) throw new Error(ErrorMsg.INVALID_LOTTO_COUNT);

    if (new Set(numbers).size !== numbers.length)
      throw new Error(ErrorMsg.INVALID_LOTTO_DUPLICATE);

    if (numbers.join("").replace(/[0-9]/g, "").length > 0)
      throw new Error(ErrorMsg.INVALID_LOTTO_NOT_NUM);
  }

  printNumbers() {
    Console.print(`[${this.#numbers.join(", ")}]`);
  }

  getNumbers() {
    return this.#numbers.map((number) => String(number));
  }
}

3주차에 작성했던 로또 객체이다. 객체를 객체스럽게 쓰지 못하고 있었다. 로또 객체는 그저 로또 번호를 저장하고 있다가 번호를 출력해주거나 저장한 번호를 반환하는 일 만을 수행한다.

class BridgeGame {
  #answer;
  #currentPosition;
  #totalTrial;

  constructor(bridge) {
    this.#answer = bridge;
    this.#currentPosition = 0;
    this.#totalTrial = 1;
  }

  move() {
    if (this.#currentPosition < this.#answer.length) this.#currentPosition += 1;
  }

  retry() {
    this.#totalTrial += 1;
    this.#currentPosition = 0;
  }

  get totalTrial() {
    return this.#totalTrial;
  }

  get currentPosition() {
    return this.#currentPosition;
  }

  getCorrectDirection() {
    return this.#answer[this.#currentPosition];
  }

  getIsLastPosition() {
    return this.#currentPosition === this.#answer.length;
  }

  getCrossState(state) {
    if (state === "failed")
      return [
        ...this.#answer.filter((v, i) => i < this.#currentPosition),
        `X${this.#answer[this.#currentPosition]}`,
      ];

    return this.#answer.filter((v, i) => i < this.#currentPosition);
  }
}

4주차 미션에 작성했던 다리 게임 객체이다. 완벽하진 않지만 객체를 객체스럽게 사용해보려는 노력을 한 것이 보인다. 다리게임 객체는 정답다리, 현재 사용자의 위치, 총 시도 횟수를 필드에 저장한다. move 메서드를 통해 현재 사용자의 위치를 이동시키고, retry 메서드를 통해 게임을 재시작 시킨다. 또 현재까지의 게임 진행상황을 객체 내부의 값을 통해 구하고, getCrossState 메서드를 통해 객체 외부로 그 값을 전달한다.

단순히 값을 저장하고 이를 반환하기만 했던 로또 객체와는 달리 객체 내부의 값을 컨트롤 하는 메서드를 작성하였고, 외부에선 값에 대한 직접적인 접근 없이 해당 메서드를 호출하여 이를 변경할 수 있도록 했다.

❗비즈니스 로직과 UI 로직 분리하기

3주차 피드백 사항에 포함된 내용이다. 비즈니스 로직...? UI 로직...? 살면서 처음 들어본 말이었다. 부끄럽지만 이 요구 조건이 어떤 것을 나타내는지 판단하는데 꽤 오랜 시간이 걸렸다. 내가 해석한 UI 로직과 비즈니스 로직의 구분은 다음과 같았다.

- UI 로직

사용자에게 보여지는 부분, 사용자와 상호작용하는 부분을 담당하는 로직

- 비즈니스 로직

UI 로직 이외의 모든 로직

이번주 미션에는 주어진 객체와 클래스가 정말 많았다. InputView, OutputView, BridgeGame, BridgeMaker, BridgeRandomNumberGenerator 이렇게 5개나 주어졌다. 이중 View가 붙은 두 객체가 UI로직을 담당하는 객체들이었고, 나머지 객체들과 클래스는 비즈니스 로직을 담당했다.

나는 UI로직을 담당하는 객체들을 정말 신중히 사용했다. 비즈니스 로직은 UI를 제외한 모든 로직이라 생각해서 UI 로직만 잘 작성하면 나머진 편하게 작성할 수 있을거라 판단했기 때문이었다.

const InputView = {
  readBridgeSize(callback) {
    this.getUserInput(
      Question.BRIDGE_SIZE,
      callback,
      this.readBridgeSize.bind(this)
    );
  },

  readMoving(callback) {
    this.getUserInput(
      Question.MOVE_DIRECTION,
      callback,
      this.readMoving.bind(this)
    );
  },

  readGameCommand(callback) {
    this.getUserInput(
      Question.RESTART,
      callback,
      this.readGameCommand.bind(this)
    );
  },

  getUserInput(question, callback, redirect) {
    Console.readLine(question, (input) => {
      try {
        callback(input);
      } catch (error) {
        Console.print(error.message);
        redirect(callback);
      }
    });
  },
};

이번주 미션에 실제로 작성했던 InputView 코드이다. 정말 입력값을 다루는 부분만을 작성하고자 노력했고, 필요한 비즈니스 로직은 콜백함수를 이용하는 방식을 사용했다.

❗필드 수 줄이기

이번에도 역시 3주차 피드백에 포함된 내용이다. 이 부분은 이번 미션에서 정말 많이 고민했었고 그 결과 나름 획기적(?)인 아이디어를 낸 부분이었다. 다른 분들의 코드를 읽어보지 못해 내 생각이 얼마나 효과적인지는 비교해보지 못했으나 나름 혼자서는 뿌듯했던 부분이라 공유하고자 한다.

다리 건너기 게임을 시작합니다.

다리의 길이를 입력해주세요.
3

이동할 칸을 선택해주세요. (위: U, 아래: D)
U
[ O ]
[   ]

이동할 칸을 선택해주세요. (위: U, 아래: D)
U
[ O | X ]
[   |   ]

게임을 다시 시도할지 여부를 입력해주세요. (재시도: R, 종료: Q)
Q
최종 게임 결과
[ O | X ]
[   |   ]

게임 성공 여부: 실패
총 시도한 횟수: 1

다리 건너기 게임의 예시이다. 다리 건너기 게임은 사용자가 방향을 선택하면 그에 따른 결과를 보여주게 된다. 이 문자열을 어떻게 만들지 고민했다.

1. 사용자의 입력값을 배열에 저장해 이를 활용하여 문자열을 만들어낸다.
2. 가지고 있는 데이터들을 활용해 문자열을 만들어낸다.

최종적으로 생각해낸 두 가지 방법이었다. 첫 번째 방법은 정답 다리와 저장된 사용자 입력 배열을 비교하여 문자열을 생성하는 방식이다. 이 방식이 가장 먼저 떠올라 이를 적용해보고자 했지만 이미 BridgeGame 클래스에는 세개의 필드가 존재했으므로 필드를 추가하지 않는 방식은 없을까 고민해보았다.

두 번째 방법이 내가 이야기한 나름의 획기적(?)인 방식이다. 내 BridgeGame의 로직을 잠깐 설명하자면 bridge 필드에 정답 다리를 배열의 형태로 저장하고, currentPostion 필드에 사용자의 위치 값을 숫자로 저장하여 이를 인덱스처럼 활용했다. 내가 생각한 문자열의 생성 방식은 다음과 같다.

조건

• 현재 위치까지의 정답 배열만을 고려하여 문자열을 생성한다.
• 사용자가 정답을 맞췄는지, 틀렸는지에 따라 문자열의 형태가 바뀐다.
• 사용되는 문자는 'O', 'X', ' '(공백) 뿐이다.
  
  

방법

1. 정답 배열을 시작부분에서 현재 위치까지로 자른다.

2. 윗 문자열(Up), 아랫 문자열(Down)을 생성할 두 배열을 만든다.

3. 사용자가 정답을 맞췄는지, 틀렸는지 입력받는다.

4. 맞췄다면 잘린 정답 배열을 그대로 반환한다. 틀렸다면 마지막 요소에 X를 추가하여 반환한다.

   • ex) 반환 배열 예시
     맞췄을 때: ["U", "D", "U"]
     틀렸을 때: ["U", "D", "XU"]

5. 입력 받은 잘린 정답 배열을 이용해 Up, Down을 채운다.

   • ex) 맞췄을 때
     잘린 정답 배열: ["U", "D", "U"]
     Up: [" O ", " ", " O "]
     Down: [" ", " O ", " "]

   -> U면 Up에 " O ", Down에 " "
   -> D면 Up에 " ", Down에 " O "

   • ex) 틀렸을 때
     잘린 정답 배열: ["U", "D", "XU"]
     Up: [" O ", " ", " "]
     Down: [" ", " O ", " X "]

   -> XU면 Up에 " ", Down에 " X "
   -> XD면 Up에 " X ", Down에 " "

6. join 메서드를 이용하여 Up, Down을 문자열로 바꿔 출력한다.

위 과정을 거칠 때 정답 배열을 잘라 반환하는 부분까지를 BridgeGame이, 이후 문자열을 만들어내는 부분을 OutputView가 담당하도록 코드를 작성해 추가적인 필드 없이 문자열을 생성해냈다.

위 내용에 포함되지 않은 추가적인 부분은 우테코 5기 프리코스 4주차 미션 MVC 적용기에 자세히 적어놓았으니 참고하면 좋을 것이다.

전체 코드는 https://github.com/kyw0716/javascript-bridge에서 확인할 수 있다.