[우테코 5기 프론트엔드] 프리코스 4주차 1일차

4주차 미션이 종료되고 시간이 많이 흐르고 회고록을 뒤늦게나마 작성합니다. 학교에서 진행하는 프로젝트 제출 기간과 우테코를 준비하는 시간이 많이 겹쳐 우아한테크코스 일정이 끝난 뒤 작성된 회고록입니다.

🥳 프리코스 4주차 1일차

---

마지막주 4주차 문제는 다들 [자동차경주]로 나올 것으로 예상 했었지만, 기존에 출시된 적이 없었던 새로운 주제로 출시되었습니다.

4주차 주제는 [다리 건너기 게임]입니다.

영화 오징어 게임에서 나왔었던 게임과 유사한 룰의 게임이라, 문제 자체는 쉽게 이해할 수 있었습니다.

---

[4주차 프리코스] 다리 건너기 게임🌉

🚀 기능 요구 사항

위아래 둘 중 하나의 칸만 건널 수 있는 다리를 끝까지 건너가는 게임이다.

• 위아래 두 칸으로 이루어진 다리를 건너야 한다.
  • 다리는 왼쪽에서 오른쪽으로 건너야 한다.
  • 위아래 둘 중 하나의 칸만 건널 수 있다.
• 다리의 길이를 숫자로 입력받고 생성한다.
  • 다리를 생성할 때 위 칸과 아래 칸 중 건널 수 있는 칸은 0과 1 중 무작위 값을 이용해서 정한다.
  • 위 칸을 건널 수 있는 경우 U, 아래 칸을 건널 수 있는 경우 D값으로 나타낸다.
  • 무작위 값이 0인 경우 아래 칸, 1인 경우 위 칸이 건널 수 있는 칸이 된다.
• 다리가 생성되면 플레이어가 이동할 칸을 선택한다.
  • 이동할 때 위 칸은 대문자 U, 아래 칸은 대문자 D를 입력한다.
  • 이동한 칸을 건널 수 있다면 O로 표시한다. 건널 수 없다면 X로 표시한다.
• 다리를 끝까지 건너면 게임이 종료된다.
• 다리를 건너다 실패하면 게임을 재시작하거나 종료할 수 있다.
  • 재시작해도 처음에 만든 다리로 재사용한다.
  • 게임 결과의 총 시도한 횟수는 첫 시도를 포함해 게임을 종료할 때까지 시도한 횟수를 나타낸다.
• 사용자가 잘못된 값을 입력한 경우 throw문을 사용해 예외를 발생시키고, "[ERROR]"로 시작하는 에러 메시지를 출력 후 그 부분부터 입력을 다시 받는다.

---

1. 🎨 MVC 패턴으로 코드 설계하기

우선 문제에서 주어진 클래스와 제한 사항을 보면 MVC 모델링을 유도한 문제인 것 같았습니다. 그래서 MVC 모델링에 대해서 공부하고 클래스의 각 역할을 나눠보는 연습이 필요할 것 같았습니다.

MVC에 대한 내용은 아래 블로그를 기록하며 공부했습니다.
MVC 패턴 공부하기

각 클래스 역할을 우선 나눠보았습니다.

• App.js : BridgeGame 객체를 생성 후 실행 시켜주는 역할.

Controller

• BridgeGame.js: 다리 건너기 게임을 관리하는 역할.
  • (+) "BridgeGame 클래스에서 InputView, OutputView 를 사용하지 않는다." 조건이 으로 다른 주제의 컨트롤러 객체 필요함.

View

• InputView.js : 입력값을 받는 역할.
• OutputView.js : 출력값을 보여주는 역할.

Model

• BridgeMaker.js : 다리의 길이를 입력 받아서 다리를 생성해주는 역할.
• BridgeRandomNumberGenerator.js : 0 또는 1의 난수를 발생시키는 역할.

2. 📝 단위별 기능 목록 작성하기

다음으로는 기능 목록을 작은 단위로 나눠 구성해야할 것들을 간단하게 목록을 만들어 작성하고, 테스트를 만들어 보는 것을 목표로 했습니다.

✅ 다리 생성 👷‍♂️

1. 다리 길이 입력 메세지를 출력합니다.
2. 다리 길이를 입력 받습니다.
   • 다리 길이는 3부터 20 사이의 숫자여야 합니다.
3. 다리는 U(위 칸) / D(아래 칸) 로 생성되며, 하나만 건널 수 있는 칸이다.
4. 무작위 값이 0인 경우 D(아래 칸), 1인 경우 U(위 칸)이 건널 수 있는 칸이된다.
5. 다리 칸을 생성하기 위한 Random 값은 아래와 같이 추출한다.

     const number = generateRandomNumber();

⛔ [Error] 다리 생성 예외처리

1. 다리 길이는 3부터 20 사이의 숫자여야 한다.
2. 잘못된 값을 입력한 경우, throw로 [ERROR]"로 시작하는 에러 메시지를 발생시킨 후 다시 입력을 받는다.

✅ 다리 모델링 🌉

1. 다리는 왼쪽에서 오른쪽으로 건넌다.
2. 이동할 수 있는 칸을 선택한 경우 O 표시
3. 이동할 수 없는 칸을 선택한 경우 X 표시
4. 선택하지 않은 칸은 공백 한 칸으로 표시
5. 다리의 시작은 [, 다리의 끝은 ]으로 표시
6. 다리 칸의 구분은 |(앞뒤 공백 포함) 문자열로 구분
7. 현재까지 건넌 다리를 모두 출력

✅ 다리 건너기 게임 시작 🦑

1. 위(U) / 아래(D) 중 하나를 입력받는다. (위: U, 아래: D)
   • U(위 칸)와 D(아래 칸) 중 하나의 문자를 입력할 수 있다.
2. 선택된 칸이 이동 가능한 칸인지 확인한다.
3. 현재 다리 상태를 출력한다.
4. 실패할 경우, 실패한 결과로 넘어간다.
5. 성공할 경우, 남은 다리가 있으면 1번으로 남은 다리가 없으면 성공한 결과로 넘어간다.

⛔ [Error] 다리 건너기 예외처리

1. 위 칸: U / 아래 칸: D 중 하나의 문자만 입력할 수 있다.
2. 잘못된 값을 입력한 경우, throw로 [ERROR]"로 시작하는 에러 메시지를 발생시킨 후 다시 입력을 받는다.

🥳 성공한 결과

1. 🚪종료하기로 넘어간다.

😵 실패한 결과

1. 게임을 다시 시도할지 여부를 입력. (재시도: R, 종료: Q)
   • 재시도: R / 종료: Q 중 하나의 문자를 입력할 수 있다.
2. R (재시도) 일 경우, 다시 첫칸부터 🌉다리 건너기를 시작한다.
   • 다리는 재생성 하지 않고 그대로 쓴다.
   • 시도한 횟수 카운트를 1증가 시킨다.
3. Q (종료) 일 경우, 🚪종료하기로 넘어간다.

⛔ [Error] 결과

1. 재시도: R / 종료: Q 중 하나의 문자만 입력할 수 있다.
2. 잘못된 값을 입력한 경우 throw로 [ERROR]"로 시작하는 에러 메시지를 발생시킨 후 입력을 다시 받는다.

✅ 게임 종료하기 🚪

1. 최종 게임 결과 문구 출력
2. 현재 다리 출력
3. 게임 성공 여부 문구 출력 (성공/실패)
4. 총 시도한 횟수 출력
5. 어플리케이션 종료

✅ 기타 체크사항 🎸

1. InputView 에서만 MissionUtils의 Console.readLine() 을 이용해 사용자의 입력
2. BridgeGame 클래스에서 InputView, OutputView 를 사용하지 않는다.
3. 함수(또는 메서드)의 길이가 10라인을 넘어가지 않도록 구현한다
4. 메서드의 파라미터 개수는 최대 3개까지만 허용한다.
5. BridgeRandomNumberGenerator 코드는 변경할 수 없다.
6. BridgeMaker 프로퍼티를 추가할 수 없다.
7. BridgeMaker 파일 경로는 변경할 수 없다.
8. BridgeMaker 메서드의 시그니처(인자, 이름)와 반환 타입은 변경할 수 없다.

단위 목록으로 작게 쪼개어 작성하니 문제에서 주어진 조건들을 놓치지 않고 구성 할 수 있게 되어 좋았습니다. 내일은 MVC를 좀 더 깊게 공부해서 클래스별로 파일 생성을 하는 것으로 해봐야 할 것 같습니다.