[2단계 - 행운의 로또 미션] 파노(전환오) 미션 제출합니다 #27

jho2301 · 2021-02-21T09:42:17Z

안녕하세요 @HyeonaKwon 님
2단계 PR 드립니다. 잘 부탁드립니다.

주안점

컴포넌트에서 반복적으로 사용되는 코드패턴을 발견하면 부모추상클래스의 메서드로 선언하고 있습니다. 자식클래스가 오버라이드를 해주면 메서드가 부모클래스에서 호출되도록 하고 있습니다.
UX를 고려해서 기능을 추가 해봤습니다.
1. 모달창의 외부영역을 클릭하면 모달 닫힘
2. 초기화면, 구매입력창에 autofocus
3. 로또 구매 시, 당첨번호 입력창으로 focus
4. 당첨번호 두 자리를 입력하면 다음 당첨번호 입력창으로 focus
5. 허용범위를 벗어나는 당첨번호는 입력 시점에서 alert 및 입력창 clear
6. user-select none 처리
7. form 입력창 required 처리
컴포넌트를 잘 나눴는지 의문입니다. 당첨번호 폼 컴포넌트가 하는 일이 많다고 생각을 하게됐는데 App컴포넌트에서 결과출력 버튼을 갖는게 나았을지 고민이었습니다.

단계

1단계 - 금액을 입력해 1000원 단위로 자동 로또를 구매합니다.
2단계 - 당첨 결과 확인 및 다시 시작 기능
3단계 - 수동 구매 + 잔액은 자동구매하기

기능 구현 목록

결과 확인 버튼을 누르면 당첨 통계, 수익률을 모달로 확인한다.
- 당첨번호는 1~45 사이의 숫자여야한다.
- 당첨번호는 중복될 수 없다.
- 결과확인 전에 구입 금액과 당첨번호를 모두 입력해야 한다.
다시 시작하기 버튼을 누르면 초기화되어서 다시 구매를 시작할 수 있다.
한 번 로또를 구입하면 다시 구매할 수 없다.

데모

https://jho2301.github.io/javascript-lotto/

Web VSCode 환경

https://github.surf/jho2301/javascript-lotto/tree/step2

클래스 구조도

컴포넌트 구조

디렉토리 구조

* chore: cypress 세팅 * chore: prettier 세팅 * chore: eslint 세팅 * docs: 기능 구현목록 작성 * chore: eslint rule 수정 * feat: querySelector shortcut 함수 구현 * feat: Component 부모 Class 구현 * feat: 초기 화면 구성 * chore: eslintrc lines-between-class-members: off * chore: gitignore 업데이트 * refactor: TicketView 네이밍 변경 * feat: State 단일상태관리 클래스 구현 * refactor: Component class에 default parameter 적용 * docs: 기능 구현 목록 수정 * chore: babel-eslint 설치 * test: 구입 금액을 입력받아 티켓을 생성한다. * feat: State 클래스, 반응성 구현 * feat: 구입 금액을 입력받아 티켓을 생성한다 - random.js 랜덤 숫자 생성하는 함수 생성 - lotto.js 티켓을 생성하는 함수 생성 * test: 토글 버튼을 누르면 티켓의 번호를 보여준다. * refactor: 함수 명 변경 - createTicketNumbers -> createTicket * feat: querySelectorAll 메서드 shortcut함수 구현 * test(refactor): 토글 버튼을 누르면 티켓의 번호를 보여준다 - class명 변경 * feat: 토글 버튼을 누르면 티켓의 번호를 보여준다. * test: 각 티켓은 1-45 사이의 6개 랜덤 숫자를 가진다. * refactor: Template indent 정렬 * docs: 기능 구현 목록 추가 - 공백은 입력할 수 없다. - 음수와 0은 입력할 수 없다. * test: 공백은 입력할 수 없다. * feat: 공백은 입력할 수 없다. * test: 0과 음수는 입력할 수 없다. * feat: 0과 음수는 입력할 수 없다. * style: 라인 추가 * refactor: toggle의 checked 값에 따라 css 변경 * refactor: 상수화 * feat: 초기 화면에서 toggle 버튼 제거 Co-authored-by: ddongule <mnk918p@gmail.com>

- WinningNumberInput - ResultModal

- PaymentInput -> PaymentForm - WinningNumberInput -> WinningNumberForm

- subscribeStates: 상태를 구독하는 로직이 담김

- 당첨번호 입력 시 1~45 사이의 숫자여야한다. - 당첨번호를 모두 입력해야 한다.

- 당첨번호는 중복될 수 없다. - 결과확인 전에 로또를 구매해야 한다. - 한 번 로또를 구입하면 다시 구매할 수 없다.

- 첫 화면 구입 금액 autofocus - 구입금액 입력 시 당첨번호 autofocus

> 결과확인 전에 당첨번호를 모두 입력해야 한다. > 결과확인 전에 로또를 구매해야 한다. < 결과확인 전에 구입 금액과 당첨번호를 모두 입력해야 한다.

createInput => createInputTemplate focus => focusNextInput

HyeonaKwon

2단계도 고생하셨어요! UX 까지 고민해주신게 보이네요. 편하게 로또 테스트를 해볼 수 있었습니다! 코멘트 확인 부탁드립니다~

HyeonaKwon · 2021-02-22T15:17:37Z

src/js/components/PaymentForm.js

+
+    this.setTickets($moneyAmountInput.value);
+
+    $('.winning-number[name=first]').focus();


UX 좋네요! 👍

HyeonaKwon · 2021-02-22T15:29:02Z

src/js/components/WinningNumberForm.js

+
+    if (target.value && !this.isValidRange(Number(target.value))) {
+      alert(EXCEED_RANGE_NUMBER);
+      target.value = '';


return 되면 좋을 것 같아요!

HyeonaKwon · 2021-02-22T15:35:04Z

src/js/components/App.js

+    this.open = new State(false);
+    this.winningNumber = new State({ main: [], bonus: 0 });
+    this.result = new State({
+      winners: { first: 0, second: 0, third: 0, fourth: 0, fifth: 0 },


요거는 배열을 썼어도 됐을 것 같은데 배열의 인덱스로 key-value 를 만든 이유가 있을까요??

저는 두 가지 이점이 있다고 생각했습니다

결과 모달창에서 프로퍼티명을 통해서 명시적으로 템플릿을 만들 수 있습니다

getRank라는 함수가 리턴하는 값을 직관적으로 알 수 있게됩니다.

이 정도로 생각을 했습니다.
이 경우에 배열을 사용하면 더 좋을까요?

생각을 해봤는데 이유가 설득력이 떨어지는 것같고 배열로도 충분히 직관적인 표현을 할 수 있을 것 같다는 생각이 들었습니다.
한 번 고쳐보겠습니다!

jho2301 · 2021-02-26T08:50:16Z

피드백 주신 것 수정 진행해보았습니다. 확인 부탁드립니다. 감사합니다.
1. [2단계 - 행운의 로또 미션] 파노(전환오) 미션 제출합니다 #27 (comment) 에러 발생 시 리턴처리하는 부분 4ed826a
2. [2단계 - 행운의 로또 미션] 파노(전환오) 미션 제출합니다 #27 (comment) 객체에서 배열로 자료형 바꾸기 50d9f30
분기를 나눌때 객체의 key로 숫자를 넣어주었는데 안좋은 점이 있을까요?

접근 시에 제한이 있다는것을 발견해서 관련해서 문제가 있을지 질문드려요
Component 추상클래스를 상속하는 자식클래스에서 모든 메서드 구현하지 않으면 에러나도록 처리했습니다

HyeonaKwon · 2021-02-27T16:07:28Z

#27 (comment)
객체의 키를 숫자로 넣어줘도 생성된 객체의 키는 string 으로 변환됩니당 그래서 에러가 발생하는걸거에요!
you don`t know js 시리즈 읽어보시면 좋을거에요! ㅎㅎ

HyeonaKwon

수정해주신 내용 확인했습니다! 👍 이대로 하시면 3단계도 문제 없을 것 같아요! ㅎㅎ 고생하셨어요!

HyeonaKwon · 2021-05-02T14:37:43Z

#27 (comment)
엇 리뷰 남기다가 질문을 지금 봤네요ㅠ
객체는 key 를 숫자로 해도 string 으로 바꿔서 숫자로 key 하는것은 피하셔야합니당

어머 제가 답변했었네요 죄송합니다ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

jho2301 and others added 30 commits February 21, 2021 11:54

refactor: PaymentInput initEvent early return 적용

6def185

refactor: TicketList, DetailMode toggle버튼 이벤트핸들링로직 추상화

ae1c019

refactor: utils/ticket.js 상수 파일 분리

d803251

refactor: PaymentInput, 최소 입력 금액 상향 (1000원)

9dca1fc

fix: 중복된 숫자가 티켓에 나오는 현상

13fb342

refactor: 구입 금액을 event.target으로 받아옴

b6d63fa

fix: 중복된 숫자가 티켓에 나오는 현상

b707343

refactor: PaymentInput initEvent early return 적용

ab10200

refactor: 구입 금액을 event.target으로 받아옴

56dd338

docs: Step2 기능 구현 목록 추가

5c8a738

feat: 컴포넌트 추가

80a6241

- WinningNumberInput - ResultModal

refactor: 컴포넌트 이름 변경

09e8231

- PaymentInput -> PaymentForm - WinningNumberInput -> WinningNumberForm

test: 결과 확인 버튼을 누르면 당첨 통계, 수익률을 모달로 확인한다.

b2d50c7

feat: Component 추상클래스 메서드 추가

deeb7a0

- subscribeStates: 상태를 구독하는 로직이 담김

feat: 결과 확인 버튼을 누르면 당첨 통계, 수익률을 모달로 확인한다

51f80aa

test: 다시 시작하기 버튼을 누르면 초기화되어서 다시 구매를 시작할 수 있다.

a5e8e4b

test: 다시 시작하기 버튼을 누르면 초기화되어서 다시 구매를 시작할 수 있다.

36ec1b6

docs: step2 기능구현목록 추가

67426a8

- 당첨번호 입력 시 1~45 사이의 숫자여야한다. - 당첨번호를 모두 입력해야 한다.

test: 당첨번호는 1~45 사이의 숫자여야한다.

e59fac6

feat: 당첨번호는 1~45 사이의 숫자여야한다.

3effde3

docs: step2 기능구현목록 추가

9ac365a

- 당첨번호는 중복될 수 없다. - 결과확인 전에 로또를 구매해야 한다. - 한 번 로또를 구입하면 다시 구매할 수 없다.

feat: 당첨번호 입력 시, 다음 당첨번호 입력창으로 focus

ce1730c

feat: autofocus

13f5e1f

- 첫 화면 구입 금액 autofocus - 구입금액 입력 시 당첨번호 autofocus

test: 당첨번호는 중복될 수 없다.

6a7ef95

feat: 당첨번호는 중복될 수 없다.

84dd30c

docs: step2 기능구현목록 수정

a0569ad

> 결과확인 전에 당첨번호를 모두 입력해야 한다. > 결과확인 전에 로또를 구매해야 한다. < 결과확인 전에 구입 금액과 당첨번호를 모두 입력해야 한다.

docs: 결과확인 전에 구입 금액과 당첨번호를 모두 입력해야 한다.

e2da68e

feat: 결과확인 전에 구입 금액과 당첨번호를 모두 입력해야 한다

1874393

test: 한 번 로또를 구입하면 다시 구매할 수 없다.

859d0c8

ddongule and others added 7 commits February 21, 2021 17:56

refactor: 상수화

f5199d0

refactor: 추상화

bcbb405

refactor: 서비스 로직 추상화

287ffff

fix: resolve conflict

31fd3e2

fix: 다시 시작 되지 않는 현상

39e318e

refactor: Component 추상클래스 render 메서드 제거

5d3f478

refactor: 메서드 네이밍 변경

8e1386e

createInput => createInputTemplate focus => focusNextInput

jho2301 requested a review from HyeonaKwon February 21, 2021 10:15

jho2301 assigned HyeonaKwon Feb 21, 2021

jho2301 added 2 commits February 21, 2021 20:28

refactor: ResultModal Template 상태값 사용 코드 변경

8dd982d

refactor: 로또 숫자를 보여주는 toggle에서 상위 div를 이용해 toggle

5ecb916

jho2301 force-pushed the step2 branch from 1c5b72b to 5ecb916 Compare February 21, 2021 11:33

jho2301 added 4 commits February 21, 2021 20:51

refactor: 사용하지 않는 유틸함수 제거

5cbb2ea

fix: 당첨 번호 중 2개 숫자가 중복일 때 alert 발생하지 않는 현상

b84479e

feat: form input, required 속성 추가

15ef4bf

feat: user-select none 처리

946638d

HyeonaKwon approved these changes Feb 22, 2021

View reviewed changes

This was referenced Feb 23, 2021

[2단계 - 행운의 로또 미션] 그루밍(강민경) 미션 제출합니다. #37

Closed

[2단계 - 행운의 로또 미션] 그루밍(강민경) 미션 제출합니다. #39

Merged

jho2301 added 3 commits February 26, 2021 16:58

fix: 당첨번호 입력 시, 조건에 맞지 않아도 다음 당첨번호 입력창으로 focus되는 현상

4ed826a

refactor: getRank함수 score구하는 로직 간결하게 바꿈

48b21ea

refactor: result.winners object에서 Array로 변경

50d9f30

jho2301 requested a review from HyeonaKwon February 26, 2021 08:47

refactor: input태그 required속성 추가로 인한 빈 입력 검증로직 제거

52da95a

jho2301 force-pushed the step2 branch from 9a67555 to 52da95a Compare February 26, 2021 15:00

HyeonaKwon approved these changes Feb 27, 2021

View reviewed changes

HyeonaKwon merged commit e7f4752 into woowacourse:jho2301 Feb 27, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2단계 - 행운의 로또 미션] 파노(전환오) 미션 제출합니다 #27

[2단계 - 행운의 로또 미션] 파노(전환오) 미션 제출합니다 #27

jho2301 commented Feb 21, 2021 •

edited

HyeonaKwon left a comment

HyeonaKwon Feb 22, 2021

HyeonaKwon Feb 22, 2021

HyeonaKwon Feb 22, 2021

jho2301 Feb 23, 2021 •

edited

jho2301 Feb 23, 2021 •

edited

jho2301 commented Feb 26, 2021 •

edited

HyeonaKwon commented Feb 27, 2021

HyeonaKwon left a comment

HyeonaKwon commented May 2, 2021 •

edited


		this.setTickets($moneyAmountInput.value);

		$('.winning-number[name=first]').focus();

[2단계 - 행운의 로또 미션] 파노(전환오) 미션 제출합니다 #27

[2단계 - 행운의 로또 미션] 파노(전환오) 미션 제출합니다 #27

Conversation

jho2301 commented Feb 21, 2021 • edited

주안점

단계

기능 구현 목록

데모

Web VSCode 환경

클래스 구조도

컴포넌트 구조

디렉토리 구조

HyeonaKwon left a comment

Choose a reason for hiding this comment

HyeonaKwon Feb 22, 2021

Choose a reason for hiding this comment

HyeonaKwon Feb 22, 2021

Choose a reason for hiding this comment

HyeonaKwon Feb 22, 2021

Choose a reason for hiding this comment

jho2301 Feb 23, 2021 • edited

Choose a reason for hiding this comment

jho2301 Feb 23, 2021 • edited

Choose a reason for hiding this comment

jho2301 commented Feb 26, 2021 • edited

HyeonaKwon commented Feb 27, 2021

HyeonaKwon left a comment

Choose a reason for hiding this comment

HyeonaKwon commented May 2, 2021 • edited

jho2301 commented Feb 21, 2021 •

edited

jho2301 Feb 23, 2021 •

edited

jho2301 Feb 23, 2021 •

edited

jho2301 commented Feb 26, 2021 •

edited

HyeonaKwon commented May 2, 2021 •

edited