[우테코 스터디] 로또 다시 구현하기 by boramson · Pull Request #1 · boramson/javascript-lotto-7

boramson · 2024-11-26T15:47:09Z

신경썼던 부분

validation을 class로 만들로 하나의 파일에 만들었습니다.
구현할 기능 목록대로 module 분리를 하려고 하였습니다.
module별 분리 후 해당 파일마다 .test.js 파일을 만들어서 해당 기능에 대한 test를 진행하려고 했습니다. (test구현X)

어려웠던 부분

아직도 validation에서 시간을 많이 잡아먹고 있습니다.
Lotto.js 파일을 반드시 사용해야한다는데... 도저히 어떻게 사용해야할지 몰라서 2번 시도를 하다가 시간을 많이 잡아먹었습니다.
당첨내역 출력 및 수익률 출력 부분을 쉽게 생각했는데... 생각보다 많이 어려웠습니다. 어떤 방법이 더 쉽고 간단한지 더 배워보고 싶습니다.

개인적인 회고

기본적인 폴더 생성, 파일 생성, 템플릿 코딩에서 시간을 소비해서는 절대 안될 것 같습니다.
개인적으로 test 코드를 빠르게 직접 잘 작성하는 방법을 열심히 배우면서 구상중인데 매우 어려운 것 같습니다. 여기에서 시간을 단축 시키는 것이 가장 큰 문제인 것 같습니다.
완벽하지 않은 부분에 대해서 다른 브랜치에서 지속적으로 구현볼 것입니다.

- 수정 : printPurchaseNumber(purchasQuantity) 수량을 매개변수로 받아서 출력되도록 만듬. - 추가 : printLottoNumber(value) 로또번호를 그대로 받아 바로 출력해주도록 만듬.

…경, Import를 위한 export문이 {}형태로 여러가지를 export 하는 것이로 변경.

…gNumber를 받을 수 있도록 만들고, validation에서 사용됨

… 일치 메세지 추가

rosielsh

2주차도 수고 많으셨습니다!
코드 리뷰에서 언급한 부분을 검토해보시고, 개선할 수 있는 부분이 있다면 반영해보시면 좋을 것 같아요.

다음 주차도 화이팅입니다 🚀

rosielsh · 2024-12-02T00:14:22Z

  #validate(numbers) {
    if (numbers.length !== 6) {
-      throw new Error("[ERROR] 로또 번호는 6개여야 합니다.");
+      throw new Error('[ERROR] 로또 번호는 6개여야 합니다.');


아래 createMsg 메서드를 재사용하는 것이 좋아보입니다!

rosielsh · 2024-12-02T00:15:34Z

+  isDuplicatedInWinningNumber: createMsg('당첨번호와 중복되는 번호를 입력하셨습니다.'),
+};
+
+export { ERROR_PREFIX, ERROR_MESSAGES };


ERROR_PREFIX는 외부에서 사용하지 않는다면 굳이 export할 필요가 없을 것 같아요 !

rosielsh · 2024-12-02T00:16:56Z

+const INPUT_MESSAGES = {
+  whatPurchaseAmount: '구매금액을 입력해주세요. \n => ',
+  winningNumber: '당첨번호를 입력해주세요. \n => ',
+  bonusNumber: '보너스번호를 입력해주세요. \n => ',


=> 는 미션의 출력 형식에는 포함되어있지 않아서, 미션의 요구사항에 맞추려면 출력값을 동일하게 설정하는 것이 어떨까 생각합니다 :)

rosielsh · 2024-12-02T00:29:53Z

+import { MissionUtils } from '@woowacourse/mission-utils';
+import OutputView from '../view/OutputView.js';
+
+class PrintRandomNumber {
+  printRandomNumber(purchasQuantity) {
+    OutputView.printPurchaseNumber(purchasQuantity);
+    let lottoNumberArrayss = [];
+    for (let i = 0; i < purchasQuantity; i++) {
+      const lottoNumber = MissionUtils.Random.pickUniqueNumbersInRange(1, 45, 6);
+      const ascendingOrder = lottoNumber.sort((a, b) => a - b);
+      OutputView.printLottoNumber(ascendingOrder);
+      lottoNumberArrayss = [...lottoNumberArrayss, ascendingOrder];
+    }
+    OutputView.printSpace();
+    return lottoNumberArrayss;
+  }
+}
+
+export default PrintRandomNumber;


해당 파일과 OutputView에서 모두 Console 라이브러리를 import해서 출력하는 동일한 역할을 한다고 생각되는데요 ! 특별히 이 함수만 모듈로 분리한 이유가 있으신지 궁금합니다 :)

저도 같은 이유로 궁금합니다! 🤔

rosielsh · 2024-12-02T00:34:22Z

+      const vlaidatedInput = await this.errorCatch();
+      if (vlaidatedInput) return vlaidatedInput;
+      if (i === 5) throw new Error(ERROR_MESSAGES.enteredMoreFiveTimes);
+    }


시도 횟수 제한을 걸 생각은 못했는데, 좋은 방식인 듯 합니다 !!

rosielsh · 2024-12-02T00:36:46Z

+      const commonResult = { matchNum: matchedNumbers, matchBonus: matchedBonus };
+      return (commonNumbers = [...commonNumbers, commonResult]);
+    });
+    return commonNumbers;


map은 새로운 배열을 반환하도록 설계되었는데, 여기서는 그 반환값을 사용하지 않고 있어서 forEach를 사용하는 것이 더 적절해 보입니다!

dlsxjzld

고생 많으셨습니다!!
개인적인 회고와 어려웠던 부분에서 공감가는 부분이 많네요!!
다음 주도 화이팅입니다! 👍

dlsxjzld · 2024-12-02T11:39:53Z

@@ -0,0 +1,20 @@
+const ERROR_PREFIX = '[ERROR]';
+
+const createMsg = (msg) => `${ERROR_PREFIX} ${msg} ${'다시 입력해주세요.'}\n`;


다시 입력해주세요. 부분은 일반 문자열이라 ${}밖에 있어도 괜찮을 것 같아요! 🤔

dlsxjzld · 2024-12-02T11:40:18Z

+
+const createMsg = (msg) => `${ERROR_PREFIX} ${msg} ${'다시 입력해주세요.'}\n`;
+
+const ERROR_MESSAGES = {


상수화를 엄청 꼼꼼하게 하셨네요! 👍

dlsxjzld · 2024-12-02T11:44:02Z

+  async repeatInput() {
+    for (let i = 0; i < 10; i++) {
+      const vlaidatedInput = await this.errorCatch();
+      if (vlaidatedInput) return vlaidatedInput;
+      if (i === 5) throw new Error(ERROR_MESSAGES.enteredMoreFiveTimes);
+    }
+  }


repeatInput()이 반복되는 것 같은데 클래스의 상속이나 함수 등으로 모듈화 시켜도 좋을 것 같아요! 👍

dlsxjzld · 2024-12-02T11:44:56Z

+import { MissionUtils } from '@woowacourse/mission-utils';
+import OutputView from '../view/OutputView.js';
+
+class PrintRandomNumber {
+  printRandomNumber(purchasQuantity) {
+    OutputView.printPurchaseNumber(purchasQuantity);
+    let lottoNumberArrayss = [];
+    for (let i = 0; i < purchasQuantity; i++) {
+      const lottoNumber = MissionUtils.Random.pickUniqueNumbersInRange(1, 45, 6);
+      const ascendingOrder = lottoNumber.sort((a, b) => a - b);
+      OutputView.printLottoNumber(ascendingOrder);
+      lottoNumberArrayss = [...lottoNumberArrayss, ascendingOrder];
+    }
+    OutputView.printSpace();
+    return lottoNumberArrayss;
+  }
+}
+
+export default PrintRandomNumber;


저도 같은 이유로 궁금합니다! 🤔

dlsxjzld · 2024-12-02T11:46:48Z

+    const calculThree = winningStatistics[0].matchThree * 5000;
+    const calculFour = winningStatistics[1].matchFour * 50000;
+    const calculFive = winningStatistics[2].matchFive * 1500000;
+    const calculFiveAndBonus = winningStatistics[3].matchFiveAndBonus * 30000000;


30000000 대신 30_000_000 이렇게 입력하면 더 가독성 있을 것 같아요 👍

언더스코어로 표현해도 숫자로 인지가 되나 보네요 :) 저도 배우고 갑니다.

저도 이 사실을 이번에 처음 알게 되었습니다. 알려주셔서 감사합니다. ㅎㅎ

dlsxjzld · 2024-12-02T11:48:30Z

+  async printPurchaseNumber(purchasQuantity) {
+    MissionUtils.Console.print(`${purchasQuantity}${OUTPUT_MESSAGES.purchaseNumber}`);
+  },


비동기 로직이 없기 때문에 async가 안붙어도 될 것 같아요! 👍

dlsxjzld · 2024-12-02T11:51:37Z

웹 프론트엔드 3주차 공통 피드백의 객체는 객체답게 사용한다에 로또 파일을 사용하는 방법이 좀 나와있는 것 같아요!! 도움이 되면 좋겠네요 😊

jinnyjiinlee

보람님, 이번 주도 정말 고생 많으셨어요!
보람님께서 남겨주신 고민에 대해 저의 생각을 정리해 보았습니다. 😊

유효성 검사에 시간을 많이 소비하고 계신 점

저도 비슷한 경험이 있었어요. 프로젝트마다 유효성 검사가 반복적으로 등장하다 보니, 이전에 작성했던 코드를 복사해서 사용하는 방식을 선택하게 되었어요.

예를 들어, 로또 프로젝트를 할 때 이전에 진행했던 자동차 경주 게임에서 사용했던 유효성 검사 코드 중 중복되는 부분을 그대로 가져오고, 변수명과 몇 가지 필요한 부분만 수정했어요.

이 방법을 사용하니 시간이 상당히 단축되었습니다.

Lotto.js 파일 사용에 어려움을 겪고 계신 점

Lotto.js 파일을 반드시 사용해야 한다는 조건 때문에 어려움을 겪고 계신다고 하셨는데, 이 부분은 더 구체적으로 말씀해 주시면 좋을 것 같아요.

혹시 유효성 검사 관련 부분이라면, 제가 사용했던 방식이나 아는 부분을 공유드릴게요.
같이 고민하면 해결 방법을 더 쉽게 찾을 수 있을 것 같아요. 😄

당첨 내역 및 수익률 출력에서 어려움을 겪고 계신 점

이 부분은 어떤 점에서 어려움을 느끼셨는지 조금 더 구체적으로 알려주시면 좋을 것 같습니다.

예를 들어:

수익률 계산(= 당첨 금액 / 총 구매 금액) 자체가 어려운 것인지,
변수를 관리하기 위해 모듈화를 하고 import하는 과정이 어려운 것인지,
아니면 당첨 내역을 매칭시키는 로직을 구현하는 게 복잡하게 느껴지신 것일까요?

구체적으로 말씀해 주시면 제가 사용하는 방법이나 팁을 공유드릴게요! 도움이 되었으면 좋겠습니다. 🙌

너무 수고 많으셨습니다! 😊

jinnyjiinlee · 2024-12-02T13:21:34Z

+  emptyValue: createMsg('값이 존재하지 않습니다.'),
+  regexpTest: createMsg('형식이 잘 못되었습니다.'),
+  startComma: createMsg('입력이 콤마(,)부터 시작할 수 없습니다.'),
+  endComma: createMsg('입력 끝에 콤마(,)로 끝날 수 없습니다.'),
+  enteredMoreFiveTimes: '5회 이상 잘못 입력하여 종료되없습니다. 다시 실행해주세요.',
+  limitDigits: createMsg('최소 4자리 숫자부터 6자리 숫자까지 입력 가능합니다.'),
+  negativeNumber: createMsg('음수가 입력될 수 없습니다.'),
+  thousandUnit: createMsg(
+    '로또 금액인 1000원 단위로만 입력 가능하며, 최대 10만원까지 입력 가능합니다.'
+  ),
+  winningNumberSixDigit: createMsg('당첨번호는 6자리를 입력해야합니다.'),
+  isDuplicatedInWinningNumber: createMsg('당첨번호와 중복되는 번호를 입력하셨습니다.'),
+};
+


우와! 예외 처리 진짜 상세하게 하셨네요!

jinnyjiinlee · 2024-12-02T13:24:51Z

@@ -0,0 +1,5 @@
+const createThrowError = (message) => {
+  throw new Error(`${message}`);


${message}가 아니라 message만 바로 써도 되는데, 혹시 다른 이유가 있어서 사용하신지 궁금합니다!

이유는 없었습니다. 복사해오면서 혹시나 다른 것으로 사용할까 해서 수정을 안했던 것이였습니다~

@boramson 아하! 네~ 그럼 리펙토링 할 때 변수명만 나오게 수정하면 좋을 것 같습니다 :)

jinnyjiinlee · 2024-12-02T13:28:50Z

+      lottoNumberArrayss = [...lottoNumberArrayss, ascendingOrder];
+    }


lottoNumberArrayss 마지막 s를 한번 더 적으셔서 오타가 있는 것 같습니다!

네 오타가 있네요 ㅜㅜ

jinnyjiinlee · 2024-12-02T13:30:41Z

+    const calculThree = winningStatistics[0].matchThree * 5000;
+    const calculFour = winningStatistics[1].matchFour * 50000;
+    const calculFive = winningStatistics[2].matchFive * 1500000;
+    const calculFiveAndBonus = winningStatistics[3].matchFiveAndBonus * 30000000;


언더스코어로 표현해도 숫자로 인지가 되나 보네요 :) 저도 배우고 갑니다.

jinnyjiinlee · 2024-12-02T13:37:28Z

+import InputPurchaseModule from '../modules/InputPurchaseModule.js';
+import InputWinningModule from '../modules/InputWinningModule.js';
+import InputBonusModule from '../modules/InputBonusModule.js';
+import PrintWinningDetails from '../modules/printWinningDetails.js';


보람님의 로또 프로젝트를 실행을 해봤는데, 에러가 납니다.

node:internal/modules/esm/resolve:265 throw new ERR_MODULE_NOT_FOUND( ^ Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/workspaces/javascript-lotto-7/src/modules/printWinningDetails.js' imported from /workspaces/javascript-lotto-7/src/controller/LottoController.js

LottoController.js파일 import부분
import PrintWinningDetails from '../modules/printWinningDetails.js';

이 부분에 파일명은 대문자로 시작을 해서 연결이 안되었네요!

vscode환경에서는 대소문자는 허용되는 경우가 있어서, 최종 코테 과제 제출하실 때 꼼꼼히 확인해보시면 좋을 것 같아요~

jinnyjiinlee · 2024-12-02T13:38:05Z

+
+  async runLotto() {
+    const purchasPrice = await this.inputPurchaseModule.inputPurchaseAmount();
+    const purchasQuantity = purchasPrice / 1000;


로또 1장 단위가 1000원이라 이 부분은 상수처리해도 좋겠다는 생각이 듭니다 :)

jinnyjiinlee · 2024-12-02T13:39:05Z

@@ -1 +1,67 @@
 # javascript-lotto-precourse
+
+&nbsp;


줄바꿈인가요? 그냥 띄어쓰기해도 줄바꿈이 되는 경우도 있고 저 같은 경우는 \n으로 사용하는데,
  사용하시는 이유가 궁금합니다!

위 아래 간격을 더 띄어놓고 문서형태로 볼 때 가독성을 더 높이기 위해서 사용했던 HTML 코드입니다.
잘 사용되지 않는 것이며 개인적인 만족감에 사용하였던 것입니다 ㅎㅎ

@boramson 그렇군요 :) 감사합니다!

jinnyjiinlee · 2024-12-02T13:40:36Z

+  purchaseNumber: '개를 구매했습니다.',
+  winningStatistics: '당첨 통계\n--- ',
+  matchedThree: '3개 일치 (5,000원) - ',
+  matchedFour: '4개 일치 (50,000원) - ',
+  matchedFive: '5개 일치 (1,500,000원) - ',
+  matchedFiveBonus: '5개 일치, 보너스 볼 일치 (30,000,000원) - ',
+  matchedSix: '6개 일치 (2,000,000,000원) - ',
+  printQuantity: '개',
+  totalReturn: '총 수익률은 ',
+  totalReturnPercentage: '% 입니다.',
+};


상수처리를 하는 이유가 유지보수와 가독성 때문이라고 알고 있는데,
문장 자체를 상수처리 하면 오히려 가독성이 떨어지지는 않을까? 개인적으로 생각이 듭니다.
차라리 '당첨 통계', '총 수익률'과 같은 단어들을 상수화 하면 어떨지? 생각이 드는데, 여기에 대한 보람님 생각도 궁금합니다!

boramson added 21 commits November 25, 2024 13:35

initial commit

6c7a96d

docs(README): 구현할 기능 목록 작성

30a006a

feat(constants): inputMessages 상수화

e3ec6a2

feat(InputView): 입력받을 값 내용 정의

6464421

feat(controller): [입력] 로또 구입 금액을 입력받는다.

4237548

feat(module) : [입력] 로또 구입 금액을 입력받는다. with validation

b6b7dd5

feat(constants): errorMessages 상수화

b59e2da

feat(validation): 여러가지 상황에서 사용될 validtaion 클래스 생성

6b2b920

feat(constants): outputMessages 상수화

b51406f

feat(OutputView): 출력될 내용 정의

b5e1cff

fix(module): awiat 코드 추가

4a3c8db

fix(module): InputPurchaseModule이 구매수량을 return할 수 있도록 만들었습니다.

328ea43

feat(contorller): [출력] 발행한 로또 수량 및 번호를 출력한다.

c1f4bf8

feat(OutputView): 수정 및 일부 코드 추가

6ae0035

- 수정 : printPurchaseNumber(purchasQuantity) 수량을 매개변수로 받아서 출력되도록 만듬. - 추가 : printLottoNumber(value) 로또번호를 그대로 받아 바로 출력해주도록 만듬.

feat(controller): [출력] 발행한 로또 수량 및 번호를 출력한다. 로또 번호는 오름차순으로 정렬하여 보여준다.

d9cd286

feat(module): 검증된 Lotto번호 최종 return 할 수 있도록 만듬

03cb4f5

feat(module): 보너스넘버를 입력받고 validation 하는 클래스

25899e5

feat(controller): [입력] 보너스 번호를 입력 받는다.

1bb4cd7

feat(constants): outputMessages 상수 추가

f4943c4

feat(OutputView): 출력에 필요한 내용 추가

a286cfc

============ 5시간 내 구현을 하지 못함 ================

bd8d4b9

boramson changed the title ~~Wooteco study~~ [우테코 스터디] 로또 다시 구현하기 Nov 26, 2024

boramson added 8 commits November 29, 2024 22:23

chroe: LottoController 한줄로 만들었습니다.

27a258f

feat(constants): errorMessage 중복제거, ERROR_MESSAGES 키값 상수명칭에서 카멜케이스로 변…

b771a16

…경, Import를 위한 export문이 {}형태로 여러가지를 export 하는 것이로 변경.

chore: errorMessages.js export 변경으로 인하여 import {} 추가

26ef7b2

chore(constants): outputMessages 키명칭 카멜케이스로 변경

6b3b3f9

chore(constants): outputMessages 키명칭 카멜케이스로 변경에 따른 print 명칭 변경

2e0ea5c

chore(constants): inputMessages 키명칭 카멜케이스로 변경

ad80c86

chore(OInputView): inputMessages 키명칭 카멜케이스로 변경에 따른 print 명칭 변경

14650ef

chore(constants): errorMessages 키명칭 카멜케이스로 변경

732e159

boramson added 20 commits November 30, 2024 17:20

feat(util): throw Error 중복 제거를 위한 util 함수 생성

0f79b81

feat(validation) : throw new Error를 createThrowError() 함수로 변경

e247daa

chore: 알파벳 오타 수정

07b2974

feat(validation): add method winningNumberSixDigit

9b66531

feat(module): add validation winningNumberSixDigit

cd1d4ca

feat(validation): add Mesaage winningNumberSixDigit

3d59a8c

chore: ERROR_MESSAGE import 변경 및 키명칭 변경

bc20677

feat(module): ERROR_MESSAGE import 변경 및 키명칭 변경 / construct를 통해 winnin…

90c1edf

…gNumber를 받을 수 있도록 만들고, validation에서 사용됨

feat(validation): add new method 'isDuplicatedInWinningNumber'

db0d3bb

feat(constants): add ERROR_MESSAGES 'isDuplicatedInWinningNumber'

a61eb34

chore(module): console.log 제거

6c30c61

chore: return 제거

c42cb60

feat(module): 구매수량을 리턴하는 클래스에서 구매금액을 리턴하는 클래스로 변경

b0e07b8

chore: 단순 띄어쓰기 수정

1ddce8f

chore: 단순 outputMessage 키값 수정

f05b992

chore: matchedFiveBonus: '5개 일치, 보너스 볼 일치 (30,000,000원) - ', 에서 보너스 볼…

2303ec1

… 일치 메세지 추가

feat(module): 당첨내역과 총 수익률을 출력하는 기능목록 구현

cae0e80

feat(controller): [출력] 당첨 내역을 출력한다. / [출력] 총 수익률을 출력한다.

6642614

feat(module): printRandomNumber Module로 만들고, import로 가져와서 사용하기

8276e3c

chore: 주석 제거

8950e6d

rosielsh reviewed Dec 2, 2024

View reviewed changes

dlsxjzld reviewed Dec 2, 2024

View reviewed changes

jinnyjiinlee reviewed Dec 2, 2024

View reviewed changes

		@@ -0,0 +1,20 @@
		const ERROR_PREFIX = '[ERROR]';

		const createMsg = (msg) => `${ERROR_PREFIX} ${msg} ${'다시 입력해주세요.'}\n`;


		const createMsg = (msg) => `${ERROR_PREFIX} ${msg} ${'다시 입력해주세요.'}\n`;

		const ERROR_MESSAGES = {

		@@ -0,0 +1,5 @@
		const createThrowError = (message) => {
		throw new Error(`${message}`);

		lottoNumberArrayss = [...lottoNumberArrayss, ascendingOrder];
		}

Conversation

boramson commented Nov 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

신경썼던 부분

어려웠던 부분

개인적인 회고

Uh oh!

rosielsh left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dlsxjzld left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jinnyjiinlee left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

boramson commented Nov 26, 2024 •

edited

Loading