[1단계 - 콘솔 기반 로또 게임] 초코(강다빈) 미션 제출합니다. #290

00kang · 2024-02-22T08:54:38Z

안녕하세요. 브콜(오태은), 리뷰를 받게 될 초코입니다!
이번 미션은 새롭게 배운 TDD 기법을 적용해 보느라고 프리코스 때 진행했던 로또 미션임에도 오랜 시간이 걸렸습니다. 그래서 리뷰하시기 전에 제가 조금 더 수정한 뒤에 다시 리뷰요청을 드리는 방식으로 진행해도 될까요??😢
오늘 중으로 빠르게 수정해서 리뷰요청 드리겠습니다!!

1️⃣ 1단계 - 콘솔 기반 로또 게임

학습 목표

UI와 도메인 영역을 분리할 수 있는 설계를 고민해보고, 목적에 맞게 객체와 함수를 활용

단위 테스트 기반으로 점진적인 리팩터링

프로그래밍 요구사항

변수 선언시 const 만 사용한다.

함수(또는 메서드)의 들여쓰기 depth는 1단계까지만 허용한다.

함수의 매개변수는 2개 이하여야 한다.

함수에서 부수 효과를 분리하고, 가능한 순수 함수를 많이 활용한다.

로또 번호와 당첨 로또 번호의 유효성 검사시 발생하는 중복 코드를 제거해야 한다.

클래스(또는 객체)를 사용하는 경우, 프로퍼티를 외부에서 직접 꺼내지 않는다. 객체에 메시지를 보내도록 한다.

클래스를 사용하는 경우, 3개 이상의 인스턴스 변수를 가진 클래스를 쓰지 않는다.

❗ 현재 게임 진행 상황 공유

나중에 현업에서 TDD 기법을 사용할 일은 드물다고 하여 TDD 기법으로 코드를 작성하는 유일한 경험이 되지 않을까 하여 익숙하지 않는 방법임에도 도전해 보았습니다. 기능별로 테스트 코드를 작성하고 통과가 되는지 확인하며 진행하였으나, 테스트 코드를 위한 코드였나 싶을 정도로 게임 진행에 있어 많은 오류가 발견됨을 뒤늦게 파악했습니다. 원활한 경기가 진행되도록 수정하겠습니다!

정상 작동 체크

❓ 리뷰어님께 드리는 질문

제가 웹 프론트엔드 개발에 입문한지 별로 안되어서 자바스크립트 문법에 익숙하지 않음을 감안하시고 질문을 봐주시면 감사하겠습니다!

💻 코드 부분

저는 코드 작성에 있어 수월한 편이 아니라 프로그램의 전반적인 구조나 흐름을 미리 설계하지 않고서는 TDD 기법을 사용하기에 어려움이 있었습니다. 그러나 이렇게 미리 설계를 하면서 진행하게 되면 TDD의 의도와 다를 뿐더러, 효율적이지 않은 방식이라고 생각되는데 브콜은 TDD 기법에 대해서 어떻게 생각하는지 궁금합니다.
max depth는 1로, 매개변수는 2까지로 제한하는 등의 이번 미션의 프로그래밍 요구 사항에 대해서 어떻게 생각하시나요? max depth라는 제한 조건은 의도(코드의 가독성 때문?)를 파악했지만, 나머지 조건인 함수의 매개변수나 클래스의 제한조건에 대해서는 아직 의도를 파악하지 못했습니다. 왜 일까요??
그리고 이러한 제한 조건들이 있을 때는 처음부터 조건을 맞추기 위해 노력하는 게 맞을까요, 일단 편한 방식으로 코드 구현을 한 뒤에 리팩토링 단계에서 수정하는 방식이 맞을까요?
이전 미션도, 이번 미션도 MVC 패턴을 적용하여 로직을 분리하는 것에 어려움을 느꼈습니다. 아직 코드 구조를 설계하여 구현하는 능력이 부족한데, 제대로 적용되었는지 궁금합니다. 어떤 것에 집중해야 제대로 로직 분리를 할 수 있는지 생각이 궁금합니다!

❤️ 개인 부분

추가로!! 개발 능력이 아주 많이 부족한 시작 단계라서 페어 프로그래밍을 진행하는 것이 벅찬 상태입니다.. 페어프로그래밍 팁도 좋고, 자바스크립트 지식을 쌓기 위한 공부 방법이나 자료 추천 등의 팁도 좋습니다. 경험을 공유해주세요~~

Co-authored-by: [email protected] <00kang>

테스트중입니다 Co-authored-by: vi-wolhwa <[email protected]>

Co-authored-by: vi-wolhwa <[email protected]>

Co-authored-by: 00kang <[email protected]>

- 구입금액에 대한 발행 수량 반환 - 구입금액에 대한 유효성검사 (정수, 최솟값) Co-authored-by: 00kang <[email protected]>

- 특정 범위 내 난수 발생 함수 - 특정 범위 내 조합 추출 함수 Co-authored-by: 00kang <[email protected]>

- 랜덤으로 로또 번호 생성 - 수량 만큼 로또 발행 Co-authored-by: 00kang <[email protected]>

- 로또 객체 생성 시 유효성 검사 - 로또 번호 오름차순 정렬 Co-authored-by: 00kang <[email protected]>

- 로또번호 일치 개수 분석 - 보너스번호 포함 여부 분석 - 로또 결과(순위) 판단 Co-authored-by: 00kang <[email protected]>

- 불필요한 줄바꿈 개선 Co-authored-by: 00kang <[email protected]>

- 등수 별 당첨 수량 계산 - 당첨 결과에 따른 수익률 계산 Co-authored-by: 00kang <[email protected]>

- 함수 depth 최대 1로 리팩토링 Co-authored-by: 00kang <[email protected]>

- 복수형으로 변경 Co-authored-by: 00kang <[email protected]>

- 콘솔 입력 모듈 readLineAsync 작성 - 구입금액, 당첨번호, 보너스번호, 재시작응답 입력 Co-authored-by: 00kang <[email protected]>

Co-authored-by: 00kang <[email protected]>

Tanney-102

안녕하세요 초코! 리뷰어 브콜입니다.
리뷰가 늦어져서 죄송해요..!ㅜㅜㅜ
부족함을 강조해주신 것 치고는 잘 작성된 코드라고 생각되네요 👍
특히 도메인에 있는 친구들이 적절히 잘분리된 것 같아요. lottoMachine와lotto 역할도 잘 분리된 것 같구요.
몇가지 신경쓰면 좋을 마이너한 부분들 코멘트 드렸습니다. 확인 부탁드려요.

질문에 답변드려요.

...브콜은 TDD 기법에 대해서 어떻게 생각하는지 궁금합니다.

사실 TDD 방식이 모든 개발 영역에서 유효한지는 잘 모르겠습니다.
다만 사이드 이펙트가 없는 도메인을 구성하는데 있어서는 꽤나 유용할 수 있다고 생각해요.
프로그램 전반에 대한 테스트가 부담스럽다면 범위를 줄여 TDD를 시도해보시면 좋겠습니다.
예를 들어 lotto 모듈을 TDD를 통해 작성해보자! 이런 느낌으로요.
조금 더 구체적인 방식은 앞서 리뷰한 내용을 첨부드리니 확인부탁드려요.
#272 (review)

max depth는 1로, 매개변수는 2까지로 제한하는 등의 이번 미션의 프로그래밍 요구 사항에 대해서 어떻게 생각하시나요?

max depth rule은 말씀하신 것처럼 가독성 문제 뿐만 아니라 함수의 추상화 수준을 명확히 분리하는데 도움을 주고자 하는 의도라고 생각해요. depth가 깊어질 때에는 그 함수에서 필요 이상으로 구체적인 행위를 하고 있을 때가 많은 것 같아요.
예를 들어 로또 결과를 내는 함수를 작성할 때

로또결과내기() {
  winningNumber랑 bonusNumber 가져와
  if (input이 유효하면) {
    if (lottoNumber랑 winningNumber가 6개 일치하면) {
     ....
    }
  }
}

이렇게 구구절절 작성하는 것보다 아래처럼 함수가 해당 추상화 수준에서 할일만 촵촵하도록 하기위한 의도라고 생각해요.

// view에서 input 받아오고 model을 통해 결과를 받아 다시 view에 전달하는 controller layer
로또결과내기() {
  View.winningNumber랑 bonusNumber 가져와()
  if (input이 유효하지 않으면) {
    View.에러보여주고()
    View.다시 가져와()
  }

  Model.결과 가져와()
  View.출력해()
}

매개변수 같은 경우 3개를 넘어가는 순간부터 관리가 어려워집니다.
함수에 전달하는 데이터를 단지 순서에 의존해서 넣어야 하기 때문이에요.
꼭 3개 이상의 매개변수를 전달해야할 경우 차라리 하나의 객체를 넘겨 key 값으로 정확하게 특정하여 인수를 넘길 수 있도록 해주세요.

someFunction({
  arg1: ...
  arg2: ...
  arg3: ...
})

클래스의 제한 조건은 멤버를 직접 꺼내쓰지 말라는 내용 맞지요?
이건 캡슐화와 관련 있어요.
클래스가 가지고 있는 데이터를 사용처에서 직접 접근할 수 있게된다면 이 클래스는 사용처에 영향을 받게 됩니다. 데이터를 가져오든 업데이트를 하든 사용처가 직접하지 말고 사용처가 클래스에 요청 => 클래스가 적절히 판단하고 처리 하도록 두라는 이야기 입니다.
식당에 가서 냉장고에 있는 맥주를 알아서 빼먹지 말고 꼭 이모님한테 말씀드려서 받으라는 요구사항 정도로 받아들이시면 됩니다. 이모님 입장에서는 선입 선출 원칙을 지켜 내보내고 싶을 수도 있고, 맥주가 충분히 시원하지 않을 때 손님에게 먼저 의사를 묻고 서비스를 제공하고 싶을 수도 있으니까요..!

그리고 이러한 제한 조건들이 있을 때는 처음부터 조건을 맞추기 위해 노력하는 게 맞을까요, 일단 편한 방식으로 코드 구현을 한 뒤에 리팩토링 단계에서 수정하는 방식이 맞을까요?

가급적이면 처음부터 지키면 좋겠죠? 당장 지키기 어려운 상황이라면 추후 리팩터링으로 남겨둘 여지정도는 있을 것 같네요.

페어프로그래밍 팁도 좋고, 자바스크립트 지식을 쌓기 위한 공부 방법이나 자료 추천 등의 팁도 좋습니다. 경험을 공유해주세요~~

많이 싸우(?)세요.
내가 부족하다는 생각에 사로잡혀 무조건 수용하지말고 먼저 나의 근거를 단단히 세우고 주장한다음 피드백을 받아 조정하는 방식으로 페어든 리뷰든 대하시길 권장드립니다. 싸워야 부족함이 드러나고 바뀔 여지가 생깁니다. (그렇다고 치고박고욕하고를 말하는 건 아닙니다... 건전한 논쟁..)

저는 처음 js 공부를 할 때 여기 많이 봤어요.
내용이 아주 좋으니 정독해보시면 좋겠습니다.
공부 자료도 중요하지만 공부를 할 수 밖에 없는 환경을 만드는 것도 중요해요. 미션을 하는 것만으로도 js를 학습할 수 밖에 없는 환경이 만들어지니 우선 미션에 최대한 몰두 하시는 걸 추천드리구요. 지식자체를 쌓을 필요가 있겠다 싶으면 크루들을 모아 스터디를 해보셔도 좋겠네요. 혼자 하는 게 쉽지 않으니..

자신감을 좀 더 가지셔요.
언어에 대한 숙련도가 떨어지는 것이고 경험이 부족한 것이지 초코의 능력 자체가 부족하진 않을 거에요.
숙련도와 경험은 시간 들여 쌓으면 그만입니다. 화이팅이에요.

Tanney-102 · 2024-02-23T06:37:43Z

.eslintrc.json

+    ],
+    "max-lines-per-function": ["error", { "max": 10 }],
+    "import/extensions": ["error", { "js": "ignorePackages" }],
+    "import/order": [


오 import order까지 👍

프로그래밍 요구사항에 맞게 eslint를 설정했다고 생각했는데 제대로 적용되고 있지 않는 점

이전 미션의 프로그래밍 요구 사항은 기본으로 포함해야 하는 점
위의 두 가지 이유로 eslint 설정을 다시 해보고자 합니다!

Tanney-102 · 2024-02-23T06:38:38Z

__tests__/Lotto.test.js

자세한 테스트 케이스 👍

제가 유일하게 느낀..ㅎ TDD의 장점은 바로 테스트 케이스 작성인데요, 기능 요구사항을 기반으로 테스트 케이스를 먼저 작성하다 보니 기존의 방법(production code 작성 후 test code 작성)보다는 자세하게 작성할 수 있었던 것 같습니다.!

TDD가 주는 또 하나의 장점은 빠른 피드백이에요~
작은 영역에 집중하여 테스트 코드를 통해 바로바로 동작 여부를 확인하면서 개발할 수 있다는 점이 장점입니다.

Tanney-102 · 2024-02-23T06:40:31Z

src/util/validation/BonusNumberValidator.js

+import OPTIONS from '../../constant/Options.js';
+import Validation from './Validation.js';
+
+class BonusNumberValidator {


static 메서드만 있는 클래스를 만들 이유가 있었나요?
그냥 객체 혹은 모듈안에서 각 함수를 named export로 내보내기만 했어도 충분하지 않았을까요?

mdn 문서 중 다음 문구를 기반으로

정적 메서드는 클래스의 인스턴스 없이 호출이 가능하며 클래스가 인스턴스화되면 호출할 수 없다. 정적 메서드는 종종 어플리케이션의 유틸리티 함수를 만드는데 사용된다.

util 함수들은 클래스와 static으로 선언하여 관리하자는 페어와의 규칙

위의 두 가지 이유를 기반으로 클래스를 만들었는데 브콜은 그냥 함수를 바로 export 하는 게 더 좋은 방식이라고 생각하시나요??

Number, String과 같은 js 내장 모듈들도 static method를 통해 유틸을 제공하니 나름 설득력은 있는 것 같습니다.
근데 모듈 시스템을 활용할 수 있는 상황에서도 유효한지는 잘 모르겠습니다~
과거처럼 name space 분리가 전혀 안되던 시절이라면 모를까 좋은 도구를 두고 돌아가는 느낌이랄까요..

생각해보니 굳이 돌아간다는 느낌이 있을 수 있겠네요! 앞으로 고려하도록 하겠습니다.

Tanney-102 · 2024-02-23T06:42:06Z

src/util/validation/Validation.js

+  static isInteger(value) {
+    return Number.isInteger(value);
+  }


사용처에서 그냥 Number.isInteger를 쓰면 안되나요?

REQUIREMENTS.md
로또발행 유효성검사 : 개수(6), 정수, 범위(1 ~ 45), 중복x
당첨번호 유효성검사 : 개수(6), 정수, 범위(1 ~ 45), 중복x
보너스번호 유효성검사 : 정수, 범위(1 ~ 45), excluded(당첨번호)

이렇게 여러번 사용되기 때문에 함수로 분리하고, 모든 유효성검사의 형식을 통일시키면 좋지 않을까 싶어 이렇게 작성했습니다.

넵 유틸의 일관성을 지키기 위한 목적이라면 우선은 괜찮은 것 같습니다.

src/domain/Lotto.js

Tanney-102 · 2024-02-23T06:48:07Z

src/domain/Lotto.js

+  getNumbers() {
+    return this.#numbers;
+  }


private value인데 레퍼런스를 그대로 노출하는 건 위험해 보여요. 사용처에서 #numbers를 직접 변경한다거나.. 하는 일이 가능해집니다.

앞으로 주의하겠습니다! 위의 코드 리뷰에서처럼 원본인 아닌 복사본을 전달하는 방식으로 해결할 수 있을 것 같은데 의도하신 리팩토링 방향이 이게 맞을까요?

getNumbers() { return [...this.#numbers]; }

넵 정확합니다.

src/App.js

Tanney-102 · 2024-02-23T06:51:49Z

src/App.js

+      const lottos = await this.#purchaseLottos();
+
+      const winningNumbers = await this.#controller.inputWinningNumbers();
+      const bonusNumber = await this.#controller.inputBonusNumber(winningNumbers);
+
+      this.#showWinningResult(lottos, winningNumbers, bonusNumber);


controller에서 할 역할들인 듯 해요.

아직 MVC 패턴에 익숙하지 않아서 App.js에서 수행하도록 했네요! 컨트롤러에 대해 알아본 바로는 다음과 같다고 하는데요, 따라서, App.js 에 있던 모든 로직을 컨트롤러로 이동시키면 App.js의 실질적인 역할은 컨트롤러를 부르는 것뿐이고, index.js의 역할과 다를 바가 없다고 생각됩니다. 그래서 MVC 패턴과 App.js에서의 커버 범위에 대해서 설명해주실 수 있는지 여쭤봅니다!!

Controller는 사용자의 입력을 받아 이를 Model에 전달하고, 그 결과를 다시 View에 전달하는 역할을 수행합니다. 따라서 사용자의 입력에 따라 수행되는 주요한 로직은 Controller에서 처리되어야 합니다.

먼저 궁금한 건 App이 꼭 있어야 하나요? (정답을 정해두고 묻는 질문은 아닙니다.)
그 모듈이 왜 있어야 하는지 고민해보시고 필요없다면 과감히 지우시면 됩니다.

패턴에 대한 이야기가 나와서 말인데..
무슨 무슨 패턴에 대한 기억은 그냥 지우시면 좋겠어요.
매년 우테코 레벨1을 진행하시는 크루들이 약속이라도 한듯이 MVC라는 용어를 해석하는데 너무 많은 에너지를 쓴다는 생각이 들어요.
초코가 미션을 통해 배우셔야 할 것은 교육 자료에 적혀 있습니다~
이번 step에서는 모듈화에 대한 고민이고 다음 스텝에서는 도메인과 UI의 분리에요.
이 흐름에 집중하는 것이 훨씬 도움이 될 것 같아요.
MVC도 결국 도메인과 UI의 분리를 하고자 하는 노력과 닿아 있다고 생각해요.
Model은 외부 상황과 관련없이 '문제 해결'에 집중하는 도메인이고 View는 실제 입력과 출력을 책임지는 UI입니다.

사실 프로그램이 별거 없어요. 입력 => 연산 => 출력 이 프로세스가 대부분 입니다.
View에서 받은 입력을 => Model이라는 상자에 넣어 결과를 얻은 후(연산) => 다시 View을 통해 출력하는 흐름일 뿐이에요.
어디에선가는 이런 흐름 제어가 있어야 하기에 controller라는 layer 하나 추가 되었을 뿐입니다.
만약 초코가 보시기에 특정 layer의 역할이 너무 많다. 더 세부적인 layer로 나눌 수 있을 것 같다는 판단이 들면 그게 하나의 아키텍쳐가 될 수도 있겠죠. 그러다 많은 사람들의 동의를 얻으면 하나의 패턴으로 제시할 수도 있을 거구요.

결국 프로그램을 잘 작성하고자 세운 근본 원칙으로부터 패턴이 나옵니다.
근본 원칙을 배워야 할 시기에 패턴의 사용법부터 배우는 건 조큼 반대입니다..!
(하지만 다들 mvc를 하고 있어 흐름을 막을 수 없었숴여..)

아무래도 페어프로그래밍으로 1단계를 시작하는데, 다른 크루들은 패턴 적용을 당연시 하다보니 저도 패턴에 집중하지 않았나 싶어요. 공원도, 브콜도 일단 미션의 요구사항 해결에 집중하라는 조언을 해주신 만큼 우선순위를 요구사항에 두고, 패턴 학습이 자연스레 따라올 수 있도록 해볼게요. 자세히 답변해 주셔서 감사해요!

(코멘트를 한번 남기니 알림이 이어서 오는군요ㅋㅋㅋㅋㅋ 본 김에 추가로 하나만 더 남기고 가봅니다)
패턴을 적용해봐야겠다 -> 근데 이게 왜 필요한 걸까? -> 내가 이 패턴을 잘 적용하고 있는 게 맞는 걸까? 의 흐름으로 학습이 이어진다면 재미를 유지하기가 쉽지 않아요. (학습 방법은 개인차가 있겠지만, 일단 저는 이 흐름에서 재미를 찾기 어려웠던 1인이라 남겨봅니다ㅋㅋ) 패턴을 새롭게 학습해서 적용해보는 것 자체가 아니라 경험적으로 이런저런 시도와 고민을 충분히 직접 부딪쳐서 해본 뒤에 개발하다보니 이러저러한 문제들이 있네. 이렇게 해결해보면 좋지 않을까?' -> 다른 사람들은 이걸 어떻게 해결하고 있지? -> 아 이런 패턴이 있나보네?와 같이 '발견' 하는 과정이 될 수 있으면 좋겠네요. 그러려면 우선 초코만의 경험과 고민, 시행착오를 먼저 충분히 쌓는 시간이 필요할 것 같고요. 그런 의미있는 시행착오를 충분히 쌓을 수 있다면 패턴을 하나도 모른 채로 끝나더라도 레벨1은 충분히 잘 보낸 거라 생각합니다.

마찬가지로 학습 대상이었던 TDD도 '이것이 TDD가 맞을까?'에 집중하게 되면 학습하고 개발하는 과정에서 알 수 없는 어딘가의 정답지와 계속해서 나를 비교하게 되기 쉬운 것 같고요. 기능 요구 사항을 구현하고, 테스트와 함께 리팩터링 해보면서 스스로 테스트의 유용함을 느낄 수 있는 범위가 어디까지인지 한번 체험해 보세요 :)

미션 2단계 화이팅~💪

src/controller/LottoController.js

00kang · 2024-02-24T10:24:30Z

안녕하세요. 브콜(오태은), 지난번 PR에 많은 질문을 드렸음에도 자세히 답해주셔서 감사해요.
특히 웹 개발을 이제 막 시작했기에 우테코의 미션이 벅차고, 크루들의 높은 수준의 대화에 낄 수 없어 약간 주눅이 들어 있었는데 덕분에 자신감을 가집니다!! 위안이 되었어요. ☺️

자신감을 좀 더 가지셔요. 언어에 대한 숙련도가 떨어지는 것이고 경험이 부족한 것이지 초코의 능력 자체가 부족하진 않을 거에요. 숙련도와 경험은 시간 들여 쌓으면 그만입니다. 화이팅이에요.

그리고, 우테코에서 모르는 게 많을 수록 리뷰어를 괴롭혀라(?) 라는 조언을 들어서 이번에도 몇 가지 질문을 하려고 해요

❗ 수정 상황 공유

❓ 리뷰어님께 드리는 질문

💻 코드 부분

이전 미션도, 이번 미션도 MVC 패턴을 적용하여 로직을 분리하는 것에 어려움을 느꼈습니다. 아직 코드 구조를 설계하여 구현하는 능력이 부족한데, 제대로 적용되었는지 궁금합니다. 어떤 것에 집중해야 제대로 로직 분리를 할 수 있는지 생각이 궁금합니다!
이번 미션 공통 피드백에서 중복 코드가 쓰이는 경우 상속(inheritance), 조합(composition) 등의 방법으로 중복을 제거하고 코드를 재사용할 수 있다. 상속보다는 조합을 사용하자. 라는 피드백이 있었습니다. 그런데 크루들 간의 의견이 분분하더라고요. 그런데 저는 상속과 조합을 사용하는 케이스가 분명하게 와닿지 않아서 리뷰어님의 경험을 공유해주시면 감사하겠습니다!
미션 공통 피드백의 생각해보기 파트에 있던 것에 대해 저도 고민을 해보겠지만, 리뷰어님의 생각이 궁금해서 질문드려요.
- 잘 모듈화한 코드는 어떤 특성을 가지고 있을까? 모듈화를 잘 하기 위한 본인만의 지침이 있는지?
- 객체 간에 로직을 재사용하기 위해 또 어떤 방법들을 사용할 수 있는지?

❤️ 개인 부분

추천해주신 사이트 통해 공부한 후, 프론트엔드의 바이블이라 불리는 "모던 자바스크립트 딥다이브" 도 학습해 보려고 하는데요! 주변을 둘러보니 필요한 부분만 발췌해서 보느라 완독을 해 본 적이 없다던 크루도 있었고, 특정 기간을 잡고 빠르게 완독한 크루도 있었습니다. 저는 js의 기본기부터 익혀야 하는 상황인데 이럴때는 보통 어느 정도의 기간을 가지고 학습하면 바람직할까요?

woowapark · 2024-02-25T07:56:23Z

@00kang
안녕하세요 초코, 지나가던 공원🏞입니다 :)

초코가 느끼기에는 잘하는 크루가 많은 것 같고 벅차게 느껴질 수 있지만
생각보다 많은 크루들이 초코와 비슷하게 어려움을 겪고 있을 수도 있어요.
강의나 슬랙 채널에서 어려운 점들을 나누어주시면 비슷한 어려움을 겪는 다른 크루들에게 ‘반드시’ 도움이 될 것 같은데, 가능하면 그 고민의 과정을 좀 더 많이 나눠주시면 좋지 않을까 싶어 몇 가지 남겨두고 갑니다. 🙂

의외로 요구 사항에 있는 것’만’ 집중해서 해본다면 벅찬 감정이 조금 줄어들 지도 몰라요. 예를 들어, MVC 패턴을 적용하는 것은 요구 사항에 있었던 적이 없습니다. 이미 기본 요구 사항 이상의 것을 학습하고 있다보니 이 부분에서 어려움이 있다면 그건 당연한 일인 것 같기도 해요.
초코가 학습 중인 단계에 있다는 것을 모두가 알고 있으니, 조금 자신이 없더라도 초코의 의견을 어떤 방식으로든 먼저 정리해서 남겨보면 어떨까요? 리뷰어의 경험도 좋지만, 조금 더 서로 나누는 ‘대화’가 될 수 있게 초코의 이야기를 나눠주시면 브콜도 좀 더 초코의 상황에 필요한 경험을 나누어주는 데 도움이 될 것 같고요.
프로그래밍 요구 사항들은 객체를 역할과 책임에 따라 최대한 나누어보면서 초코가 생각하기에 적절한 객체의 크기나 나누는 기준 등을 고민해보는 것, 그리고 함수도 최대한 하나의 일만 분명하게 하고 순수 함수와 불변성을 유지할 수 있는 방법을 고민해볼 수 있는 것 등을 목표로 하고 있습니다. (LMS 함수를 잘 활용하기 문서의 ‘함수형 생각 연습’ 부분을 한번 확인해보아도 좋아요) 이 부분 역시, 강의나 채널에서 질문해주시면 다른 크루들에게도 도움이 될 것 같습니다ㅋㅋ
덧붙여, 수업 시간에도 다시 한번 가이드했던 것처럼 리뷰 요청 마감 시간 이후에 추가로 수정하거나 커밋하는 것은 금지하고 있습니다. 만약 기술적인 요구 사항이 처음부터 모두 소화하기에 벅차다면, 우선 기능 요구 사항을 먼저 구현하는 것을 목표로 삼고 기술적인 요구 사항이나 도전은 그 범위를 조금 줄여서 해보는 방법도 있을 것 같아요(TDD를 예로 든다면, 모든 코드를 꼭 TDD로 쓰지 않아도 되지 않을까요?)
- 오로지 연습을 위한 것이라 해도, 처음 구현해보는 어플리케이션을 TDD로 구현하는 것은 숙련자에게도 쉽지 않은 일입니다. LMS에 있는 것처럼 처음에는 무작정 다 구현하고 리팩터링도 해보고 하면서 도메인을 먼저 익히고, 그 뒤에 코드를 다 버린 뒤 방법을 연습해보는 차원에서 TDD로 다시 구현해보는 것도 처음 연습할 때에는 좋은 방법이고요. 관련해서 고민되는 부분이 있다면 언제든 찾아오세요 :)

그 어떤 기술적인 학습보다, 적어도 여기에서 10개월간 지치지 않고 학습을 이어나갈 수 있게 재미와 뿌듯함을 잃어버리지 않도록 하는 게 우선이라고 생각합니다. 쉽지 않다는 건 알지만 초코의 속도에 맞춰서 커리큘럼을 소화해나갈 수 있으면 좋겠어요. 도움이 필요한 부분이 있다면 강의, 슬랙 채널, 면담 어떤 방법으로든 알려주세요. 같이 고민해볼 수 있게요.

리뷰어를 괴롭히기 전에 코치를 먼저 괴롭혀보아도 좋을 것 같네요 :)
질문과 토론, 혹은 주눅드는 마음에 위안이 필요할 때 모두 언제든 환영이니 편하게 알려주세요.

Tanney-102 · 2024-02-25T13:17:27Z

src/util/validation/LottoNumbersValidator.js

-    if (!numbers.every((number) => Validation.isInteger(number) && !isNaN(number))) {
+    if (!numbers.every((number) => Validation.isInteger(number) && !Number.isNaN(number))) {


기왕 수정한거 그냥 isNaN과 Number.isNaN의 차이점도 정리하고가면 좋겠네요~!

isNaN

전달된 값이 숫자인지 확인하고, 만약 숫자가 아니라면 해당 값을 숫자로 변환한 후 NaN인지 확인

따라서 숫자가 아닌 값들에 대해서도 true를 반환 가능

Number.isNaN

전달된 값이 정말로 NaN인지 확인

숫자가 아닌 값들에 대해서는 항상 false를 반환

isNaN("hello") //true Number.isNaN("hello") //false

Tanney-102 · 2024-02-25T13:32:04Z

src/App.js

+      const lottos = await this.#purchaseLottos();
+
+      const winningNumbers = await this.#controller.inputWinningNumbers();
+      const bonusNumber = await this.#controller.inputBonusNumber(winningNumbers);
+
+      this.#showWinningResult(lottos, winningNumbers, bonusNumber);


먼저 궁금한 건 App이 꼭 있어야 하나요? (정답을 정해두고 묻는 질문은 아닙니다.)
그 모듈이 왜 있어야 하는지 고민해보시고 필요없다면 과감히 지우시면 됩니다.

패턴에 대한 이야기가 나와서 말인데..
무슨 무슨 패턴에 대한 기억은 그냥 지우시면 좋겠어요.
매년 우테코 레벨1을 진행하시는 크루들이 약속이라도 한듯이 MVC라는 용어를 해석하는데 너무 많은 에너지를 쓴다는 생각이 들어요.
초코가 미션을 통해 배우셔야 할 것은 교육 자료에 적혀 있습니다~
이번 step에서는 모듈화에 대한 고민이고 다음 스텝에서는 도메인과 UI의 분리에요.
이 흐름에 집중하는 것이 훨씬 도움이 될 것 같아요.
MVC도 결국 도메인과 UI의 분리를 하고자 하는 노력과 닿아 있다고 생각해요.
Model은 외부 상황과 관련없이 '문제 해결'에 집중하는 도메인이고 View는 실제 입력과 출력을 책임지는 UI입니다.

사실 프로그램이 별거 없어요. 입력 => 연산 => 출력 이 프로세스가 대부분 입니다.
View에서 받은 입력을 => Model이라는 상자에 넣어 결과를 얻은 후(연산) => 다시 View을 통해 출력하는 흐름일 뿐이에요.
어디에선가는 이런 흐름 제어가 있어야 하기에 controller라는 layer 하나 추가 되었을 뿐입니다.
만약 초코가 보시기에 특정 layer의 역할이 너무 많다. 더 세부적인 layer로 나눌 수 있을 것 같다는 판단이 들면 그게 하나의 아키텍쳐가 될 수도 있겠죠. 그러다 많은 사람들의 동의를 얻으면 하나의 패턴으로 제시할 수도 있을 거구요.

결국 프로그램을 잘 작성하고자 세운 근본 원칙으로부터 패턴이 나옵니다.
근본 원칙을 배워야 할 시기에 패턴의 사용법부터 배우는 건 조큼 반대입니다..!
(하지만 다들 mvc를 하고 있어 흐름을 막을 수 없었숴여..)

Tanney-102

안녕하세요 초코!
확인 늦어 죄송합니다ㅜㅜ
리뷰드린 내용 성실히 반영해주셔서 감사해요!
이번 스텝은 바로 머지할테니 다음 스텝 진행해주시면 되겠습니다.

질문에 답변드려요.

이전 미션도, 이번 미션도 MVC 패턴을 적용하여 로직을 분리하는 것에 어려움을 느꼈습니다. 아직 코드 구조를 설계하여 구현하는 능력이 부족한데, 제대로 적용되었는지 궁금합니다. 어떤 것에 집중해야 제대로 로직 분리를 할 수 있는지 생각이 궁금합니다!

학습자료, 프로그래밍 요구 사항에 집중하시면 됩니다. 코멘트에도 적어두긴 했는데 패턴이고 뭐고 그냥 잊으세요. 모듈 나누는 거, 도메인 UI 분리하는 것부터 집중합시다.

이번 미션 공통 피드백에서 중복 코드가 쓰이는 경우 상속(inheritance), 조합(composition) 등의 방법으로 중복을 제거하고 코드를 재사용할 수 있다. 상속보다는 조합을 사용하자. 라는 피드백이 있었습니다. 그런데 크루들 간의 의견이 분분하더라고요. 그런데 저는 상속과 조합을 사용하는 케이스가 분명하게 와닿지 않아서 리뷰어님의 경험을 공유해주시면 감사하겠습니다!

명백한 추상-확장 관계라면 상속이 용이합니다.
예를 들어 저희 회사(채널톡) 제품에는 여러 종류의 채팅이 있어요.
유저 상담을 하는 '유저챗', 슬랙 같은 '팀챗'
그리고 팀챗은 '그룹챗'과 '다이렉트챗'으로 나뉩니다.
이 경우에는 관계가 명확하므로 chat이라는 추상적인 클래스를 상속하는 게 좋겠죠.
유저챗, 팀책 등은 명백하게 '챗'으로 동작해야하고 그 외 동작이 '확장' 되었을 뿐이니까요.

그러나 단순히 클래스의 동작을 재사용하기 위한 목적이라면 조합을 사용하자는 피드백이었을 것 같아요. 로또 미션으로 예를 들면 Lotto 결과 내는 과정을 책임지는 LottoMachine클래스가 Lotto의 동작을 의존하긴 하지만 확장하는 관계는 아닙니다. LottoMachine이 Lotto로써 동작해야하는지, Lotto의 동작을 사용하는지 구분해보시면 좋을 듯해요.

미션 공통 피드백의 생각해보기 파트에 있던 것에 대해 저도 고민을 해보겠지만, 리뷰어님의 생각이 궁금해서 질문드려요.
잘 모듈화한 코드는 어떤 특성을 가지고 있을까? 모듈화를 잘 하기 위한 본인만의 지침이 있는지?
객체 간에 로직을 재사용하기 위해 또 어떤 방법들을 사용할 수 있는지?

어려운 질문이군요..

모듈화
먼저는 외부 환경의 영향을 덜 받아야겠죠.
불필요하게 다른 모듈을 의존하고 있지는 않은지, 외부 환경 의존을 => 의존성 주입 형태로 해결할 수 있는지 여부를 많이 고려하게 되는 것 같아요.
또 단일한 맥락에 집중하는 형태인지가 중요합니다.
예를 들어 validation 모듈에서 에러 처리에 대한 책임도 갖게 된다던지..
불필요한 책임 여부를 보는 것 같아요.
객체 로직 재사용
질문 의도에 맞는 답변인지는 잘 모르겠지만..
rust라는 언어에 trait이 라고 동작 자체를 추상화 하기 위한 개념이 있어요.
js(or ts)에서 그 개념은 완전히 적용하기는 어렵겠지만 특정 타입을 만족하는 객체에 대한 공통 기능을 제공할 수 있다는 점은 가져와 볼 수 있겠네요.
이건 나중에 ts에 익숙해지신 후에 한 번 찾아보셔요.

추천해주신 사이트 통해 공부한 후, 프론트엔드의 바이블이라 불리는 "모던 자바스크립트 딥다이브" 도 학습해 보려고 하는데요! 주변을 둘러보니 필요한 부분만 발췌해서 보느라 완독을 해 본 적이 없다던 크루도 있었고, 특정 기간을 잡고 빠르게 완독한 크루도 있었습니다. 저는 js의 기본기부터 익혀야 하는 상황인데 이럴때는 보통 어느 정도의 기간을 가지고 학습하면 바람직할까요?

기간은 짧게 잡는 걸 추천드립니다.
하나 하나 자세히 보려하지 말고 처음부터 끝까지 여러번 반복해서 보시는 걸 추천드려요.
두 번 세 번 볼 때 자연스럽게 보이지 않던 것까지 스며들게 되는 걸 느끼실 수 있을 거에요.

Tanney-102 · 2024-02-25T14:13:31Z

@woowapark 공원은 여전히 빛..👍

vi-wolhwa and others added 29 commits February 20, 2024 16:30

docs REQUIREMENTS.md 생성

9bb5a9e

Co-authored-by: [email protected] <00kang>

docs: test

656df6c

docs: test 하기

85feae0

테스트중입니다 Co-authored-by: vi-wolhwa <[email protected]>

docs: 기능 구현 목록 작성

a1f4355

Co-authored-by: vi-wolhwa <[email protected]>

chore: eslint, prettier 설정 및 package 정보 변경

e8c8231

Co-authored-by: vi-wolhwa <[email protected]>

test: 구입 금액에 따른 로또 발행 테스트 작성

812e848

Co-authored-by: vi-wolhwa <[email protected]>

chore: eslint 플러그인 재설치

8010ff6

Co-authored-by: 00kang <[email protected]>

feat: 구입금액에 따른 발행 수량 계산

725f690

- 구입금액에 대한 발행 수량 반환 - 구입금액에 대한 유효성검사 (정수, 최솟값) Co-authored-by: 00kang <[email protected]>

feat: 랜덤 유틸 클래스 구현

916057e

- 특정 범위 내 난수 발생 함수 - 특정 범위 내 조합 추출 함수 Co-authored-by: 00kang <[email protected]>

feat: 수량 만큼 로또 발행

d90568f

- 랜덤으로 로또 번호 생성 - 수량 만큼 로또 발행 Co-authored-by: 00kang <[email protected]>

feat: 로또 객체 생성 및 번호 정렬

6e11789

- 로또 객체 생성 시 유효성 검사 - 로또 번호 오름차순 정렬 Co-authored-by: 00kang <[email protected]>

feat: 당첨 결과 분석, 순위 반환

f689337

- 로또번호 일치 개수 분석 - 보너스번호 포함 여부 분석 - 로또 결과(순위) 판단 Co-authored-by: 00kang <[email protected]>

style: printWidth 변경 (80 -> 100)

3885553

- 불필요한 줄바꿈 개선 Co-authored-by: 00kang <[email protected]>

feat: 당첨 결과 분석 및 순위 반환

41e3459

- 등수 별 당첨 수량 계산 - 당첨 결과에 따른 수익률 계산 Co-authored-by: 00kang <[email protected]>

refactor: 로또 등수 계산 로직 분리

be26777

- 함수 depth 최대 1로 리팩토링 Co-authored-by: 00kang <[email protected]>

refactor: 상수명 변경

e7aac4b

- 복수형으로 변경 Co-authored-by: 00kang <[email protected]>

feat: 콘솔 입력 구현

f9d2c32

- 콘솔 입력 모듈 readLineAsync 작성 - 구입금액, 당첨번호, 보너스번호, 재시작응답 입력 Co-authored-by: 00kang <[email protected]>

feat: controller, model, view 연결

03ee900

Co-authored-by: 00kang <[email protected]>

feat: README.md 수정

993ff65

style: 입,출력 메시지의 스타일 수정

7cf4395

feat: 로또 발행 메서드 컨트롤러에 연결

6804840

fix: 컨트롤러에서 당첨번호 입력 기능의 inputWinningNumbers 메서드 수정

ea9485a

fix: 당첨 통계 결과 반환 안되는 오류 수정

a1eb586

fix: 발행된 로또 오름차순 정렬하여 보여주도록 수정

21e5888

feat: 실행결과 사진 포함하여 README.md 수정

ff23a3a

feat: 구입 금액에 대한 유효성 검사 진행 및 재입력받도록 추가구현

e1572cf

feat: 당첨 번호 입력에 대한 유효성 검사 진행 및 재입력받도록 추가구현

de926bc

feat: 보너스 점수 입력에 대한 유효성 검사 추가 구현

788cbf0

feat: 게임 재시작 및 유효성 검사 추가 구현

cb70b91

Tanney-102 requested changes Feb 23, 2024

View reviewed changes

00kang added 10 commits February 23, 2024 17:32

feat: REQUIREMENTS.md 업데이트

184aacf

refactor: 컨트롤러로 이동

ed22aa4

refactor: 프로그래밍 요구사항에 맞게 eslint 재설치 및 수정

27c944d

refactor: eslint max-params 규칙에 따라 수정

1b86786

refactor: eslint max-lines-per-function 규칙에 따라 LottoController 내의 메서드 분리

b573410

refacotr: airbnb 컨벤션에 따라 isNan 대신 Number.isNan으로 수정

c681e4a

refacotr: nullish coalescing operator(??) 사용으로 불필요한 비교 줄임

dfe9bb0

refactor: eslint max-params 규칙에 따라 객체로 묶는 수정

e7b65d9

feat:winningNumbers와 bonusNumber를 배열로 반환하여 당첨 결과 출력 오류 수정

979af80

refactor: eslint max-depth 규칙에 따라 메서드 분리

f501d39

Tanney-102 reviewed Feb 25, 2024

View reviewed changes

Tanney-102 approved these changes Feb 25, 2024

View reviewed changes

Tanney-102 merged commit b3243f1 into woowacourse:00kang Feb 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1단계 - 콘솔 기반 로또 게임] 초코(강다빈) 미션 제출합니다. #290

[1단계 - 콘솔 기반 로또 게임] 초코(강다빈) 미션 제출합니다. #290

00kang commented Feb 22, 2024 •

edited

Loading

Tanney-102 left a comment •

edited

Loading

Tanney-102 Feb 23, 2024

00kang Feb 23, 2024

Tanney-102 Feb 23, 2024

00kang Feb 23, 2024

Tanney-102 Feb 25, 2024

Tanney-102 Feb 23, 2024

00kang Feb 23, 2024

Tanney-102 Feb 25, 2024

00kang Feb 25, 2024

Tanney-102 Feb 23, 2024

00kang Feb 23, 2024

Tanney-102 Feb 25, 2024 •

edited

Loading

Tanney-102 Feb 23, 2024

00kang Feb 23, 2024

Tanney-102 Feb 25, 2024

Tanney-102 Feb 23, 2024

00kang Feb 23, 2024

Tanney-102 Feb 25, 2024 •

edited

Loading

00kang Feb 25, 2024

woowapark Feb 25, 2024 •

edited

Loading

00kang commented Feb 24, 2024

woowapark commented Feb 25, 2024 •

edited

Loading

Tanney-102 Feb 25, 2024

00kang Feb 25, 2024

Tanney-102 Feb 25, 2024 •

edited

Loading

Tanney-102 left a comment

Tanney-102 commented Feb 25, 2024 •

edited

Loading

		if (!numbers.every((number) => Validation.isInteger(number) && !isNaN(number))) {
		if (!numbers.every((number) => Validation.isInteger(number) && !Number.isNaN(number))) {

[1단계 - 콘솔 기반 로또 게임] 초코(강다빈) 미션 제출합니다. #290

[1단계 - 콘솔 기반 로또 게임] 초코(강다빈) 미션 제출합니다. #290

Conversation

00kang commented Feb 22, 2024 • edited Loading

1️⃣ 1단계 - 콘솔 기반 로또 게임

학습 목표

프로그래밍 요구사항

❗ 현재 게임 진행 상황 공유

정상 작동 체크

❓ 리뷰어님께 드리는 질문

💻 코드 부분

❤️ 개인 부분

Tanney-102 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Tanney-102 Feb 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Tanney-102 Feb 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

woowapark Feb 25, 2024 • edited Loading

Choose a reason for hiding this comment

00kang commented Feb 24, 2024

❗ 수정 상황 공유

❓ 리뷰어님께 드리는 질문

💻 코드 부분

❤️ 개인 부분

woowapark commented Feb 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Tanney-102 Feb 25, 2024 • edited Loading

Choose a reason for hiding this comment

Tanney-102 left a comment

Choose a reason for hiding this comment

Tanney-102 commented Feb 25, 2024 • edited Loading

00kang commented Feb 22, 2024 •

edited

Loading

Tanney-102 left a comment •

edited

Loading

Tanney-102 Feb 25, 2024 •

edited

Loading

Tanney-102 Feb 25, 2024 •

edited

Loading

woowapark Feb 25, 2024 •

edited

Loading

woowapark commented Feb 25, 2024 •

edited

Loading

Tanney-102 Feb 25, 2024 •

edited

Loading

Tanney-102 commented Feb 25, 2024 •

edited

Loading