[3단계 - 행운의 로또 미션] 지그(송지은) 미션 제출합니다. #64

zigsong · 2021-03-01T02:11:12Z

안녕하세요! 마지막 로또 3단계 미션 제출합니다 😆

2단계가 머지되기 전에 3단계를 이미 진행하고 있어서, 2단계 머지 후 새로운 브랜치에서 기존 3단계 작업 내용들을 cherry-pick하여 가져왔는데
중간에 커밋이 올바르게 딸려오지 않은 부분들이 있을 수 있습니다. (전체 코드 상에서는 문제가 없지만, 각 커밋에 들어간 코드가 100% 내용을 반영하지 않는 부분도 있습니다.) 코드 상세 내용들 코멘트로 달아놓도록 하겠습니다!

✅ 3단계 TODO

기능

테스트

수동 구매, 자동 구매 선택지를 보여준다.
수동 구매, 자동 구매 선택지 중 현재 선택 옵션을 표시한다.
수동 구매를 선택하고 금액을 입력하면, 금액만큼의 번호 입력 폼을 보여준다.
- ~~[ ] 검증: 1~45 사이의 숫자 입력 시 알럿이 뜬다.~~
- 검증: 로또 한 장에 중복된 번호 입력 시 알럿이 뜬다.
- 수동 구매 번호를 모두 올바르게 입력하면, 확정된 로또 티켓을 보여준다.
수동 구매 후 남는 금액 발생 시 자동 구매 진행 확인창이 뜬다.
~~[ ] 자동 구매 취소 시 계속해서 수동 구매 번호 입력 폼을 채울 수 있다.~~
자동 구매 동의 시 자동구매를 진행한다.
소비자가 구매한 로또의 당첨 결과가 모달에 올바르게 표시된다.

🛠 컴포넌트 및 구조도

🗂 디렉토리 구조

🤔 고민한 점

아무래도 UI를 혼자 제작하다보니, 사용성을 해치지 않으면서도 기존의 UI에서 크게 벗어나지 않는 선에서 제작하는 것을 많이 고민했습니다. 그런데 아직 플레이어가 저밖에 없다보니, 괜찮게 만든 것인지 확실한 판단이 서지는 않습니다. 😅
select type을 번갈아가며 클릭했을 때 (자동구매를 선택해놓고 갑자기 수동구매를 하고싶어질 수도 있으므로) 화면을 거의 새로고침해야 하지만 reload는 사용하지 않는 것이 좋겠다고 판단하여 기존에 담겨 있던 값들과 화면들을 적절히 비우는 데 은근히 애를 썼던 것 같습니다.

🙄 궁금한 점

2단계에서 Lotto 모델이 너무 많은 일을 한다는 피드백을 바탕으로 LottoProcessor 클래스를 만들어서 당첨 결과를 계산하게끔 했는데, 해당 계산 담당 로직들을 class로 만들어 내부 메소드들로 구현한 것이 괜찮은 방식인지 궁금합니다! 각 게임마다 new 연산자로 각 view를 새로 만들어내는 것처럼, 계산하는 로직도 현재 로또 배열과 당첨 번호를 담고 있는 유일한 인스턴스라고 생각해서 그렇게 작성했는데, 어떻게 생각하시는지 피드백 받고 싶습니다.
ManualInputView가 처음 생각보다 조금 길어진 것 같습니다. html 템플릿이 많아서 그런 것 같기도 한데, 자동 구매 시에는 해당 view가 필요하지 않기 때문에 index.html 파일에 미리 넣어 놓고 show, hide하기보다는 수동 구매 선택 시에만 ManualInputView를 append하는 방식으로 사용하고 있습니다. 이에 대한 리뷰 부탁드리고 싶습니다!

그 밖의 내용들은 코멘트로 달았습니다 🤓

…otto into main

…rectly

- refactor spacings - rename selector to dom - remove unnecessary variable

zigsong

기존의 틀을 해치지 않는 선에서 나름대로 UI를 만들어서 제작해보았습니다.
피드백 기다리겠습니다! 감사합니다 ☺️

zigsong · 2021-03-01T02:12:38Z

src/js/LottoController.js

@@ -25,29 +32,32 @@ export default class LottoController {
  }

  reset() {
+    this.isAutoPurchase = true;


페이지 로드 시 처음 purchase type은 default로 auto가 되도록 설정했습니다.

zigsong · 2021-03-01T02:18:10Z

src/js/LottoController.js

+  purchaseManually() {
+    this.manualInputView
+      .show()
+      .init(this.purchasedPrice / LOTTO_NUMBERS.LOTTO_UNIT);
+    this.manualInputView.on('submitNumbers', e =>
+      this.inputManualNumbersHandler(e.detail)
+    );
+    this.manualInputView.on('confirmAll', e =>
+      this.confirmManualPurchaseHandler(e.detail)
+    );
+  }


수동구매 선택 시 실행됩니다.

zigsong · 2021-03-01T02:19:34Z

src/js/LottoController.js

+  inputManualNumbersHandler(eventDetail) {
+    const ticketNumbers = eventDetail.numbers.map(manualNumber =>
+      Number(manualNumber.value)
+    );
+    if (!isUniqueManualNumber(ticketNumbers)) {
+      alert(ALERT_MESSAGES.DUPLICATE_NUMS);
+      return;
+    }
+    this.createManualLottos(ticketNumbers, eventDetail.ticketNumber);
+  }


수동 구매 선택 후 각 티켓에 6개의 숫자를 입력 시 한 장씩 생성됩니다.

zigsong · 2021-03-01T02:20:49Z

src/js/LottoController.js

+  confirmManualPurchaseHandler(manualCount) {
+    if (manualCount < this.purchasedPrice / LOTTO_NUMBERS.LOTTO_UNIT) {
+      const agreeAutoPurchase = confirm(ALERT_MESSAGES.CONVERT_TO_AUTO_ALERT);
+      if (agreeAutoPurchase) {
+        this.manualInputView.hide();
+        this.purchaseAutomatically(
+          this.purchasedPrice / LOTTO_NUMBERS.LOTTO_UNIT - manualCount
+        );
+      }
+    } else {
+      this.manualInputView.hide();
+      this.purchasedLottosView.show();
+      this.purchasedLottosView.renderLottos(this.lottos);
+      this.winningResultView.show();
+    }
+  }


수동 구매를 선택하였으나 숫자를 (구입 티켓의 수만큼) 모두 입력하지 않은 경우, confirm 창으로 자동구매 전환을 안내합니다.
동의 시 자동 구매로 전환되고 남은 티켓의 개수만큼 로또를 자동으로 구매합니다.

zigsong · 2021-03-01T02:21:26Z

src/js/LottoController.js

+    const newLottos = Array.from({ length: lottoCount }, () => {
+      return new Lotto();
+    });
+    this.lottos = [...this.lottos, ...newLottos];


수동 구매 후 남는 금액으로 자동 구매를 하는 경우도 있기 때문에 스프레드 연산자를 사용하여 this.lottos에 새로운 lotto들을 추가하는 방식으로 바꾸었습니다.

zigsong · 2021-03-01T02:25:07Z

src/js/views/ManualInputView.js

+  }
+
+  createManualLottos() {
+    const lottoTicekts = [...Array(this.count)]


의미 없는 index for문을 사용하는 것보다 이렇게 스프레드 연산자를 활용하여 map이나 forEach를 돌리는 것이 낫다고 배웠는데,
정확하게 이 문법으로 작성하는 것인지를 까먹었습니다 😭 마땅한 키워드가 떠오르지 않아 검색하기가 어려워서 일단 작성해보았습니다.
지적 부탁드립니다!

for 문 보다 Array 의 메서드를 사용하는게 대부분의 경우에 더 낫습니다.
이 경우는
const lottoTickets = Array.from({length: this.count}, (_, idx) => `<li>....</li>`).join('')
이렇게 하시면 될 것 같네요 :)

zigsong · 2021-03-01T02:25:48Z

src/js/views/ManualInputView.js

+        Number($element.dataset.manualIndex) ===
+        LOTTO_NUMBERS.LOTTO_MANUAL_COUNT - 1
+      ) {


수동 구매 각 티켓의 마지막 숫자에서는 moveFocus 이벤트가 발생하지 않습니다.

의도가 잘 드러나는 코드가 좋은 코드입니다.
이 댓글을 달아주신 이유가 만약 제가(혹은 이 코드를 보는 다른 누군가가) 이 코드를 더 잘 이해하도록(혹은 정확히 이해하지 못할까봐) 설명(마치 주석처럼)을 해주신것이라면, 코드 자체에서 그 설명이 표현되는게 좋습니다.

수동 구매에서는 포커스가 다음으로 이동된다.
마지막은 제외한다

라는 의도를, 코드를 읽는 사람이 별도 설명 없이 코드만 보고 알아차릴 수 있다면 완벽한 코드입니다.

사용성을 위해 포커스를 다음으로 옮기시는것은 굉장히 좋습니다.
실무에서도 디자이너나 기획자가 따로 언급하지 않는 경우도 많은데 개발자가 사용성을 생각해서 고민하고 추가로 구현하는것은 굉장히 좋은 태도라고 생각합니다 :)

간단하게 메서드를 따로 분리하여 네이밍해보겠습니다!

zigsong · 2021-03-01T02:27:15Z

src/js/views/ManualInputView.js

+    const allConfirmBtn = document.createElement('template');
+    const convertToAutoCaption = document.createElement('template');


createElement('template')을 사용하여 아래에서처럼
this.$element.append(convertToAutoCaption.content, allConfirmBtn.content);으로 작성하면 html을 붙일 수 있다는 것을 알게 되었는데, 처음 접한 방식이라 괜찮은 방식인지 궁금합니다! 🙄

createElement() 하면 DOM 엘리먼트를 만들어 낼 수 있으므로 해당 엘리먼트를 통해 DOM API를 이용할 수 있는 이점이 있습니다.
안타깝게도 template 엘리먼트가 IE 에서 지원되지 않으니 이점 추가로 알아두시면 좋을 것 같습니다.

IE 대응은 어렵군요... 😭 다른 방식으로 수정해보도록 하겠습니다!

zigsong · 2021-03-01T02:29:08Z

src/js/views/ManualInputView.js

+  bindConfirmEvent() {
+    $('#manual-confirm-btn').addEventListener('click', () => {
+      this.emit(
+        'confirmAll',
+        [...$$('.manual-wrapper > .lotto-detail')].length
+      );
+    });
+  }


수동 구매 시 전체 확정 버튼을 누르면, 현재 확정된 로또(확정된 로또는 class명으로 lotto-detail을 가집니다.)의 개수(아래 사진에서는 1개)를 controller에 보내줍니다. 3000원을 입력했으나 수동 구매로 1개만 입력한 경우, 나머지는 자동 구매로 전환하기 위해 현재 확정된 수동 티켓의 개수를 보내주고 있습니다.

zigsong · 2021-03-01T02:30:05Z

src/js/views/PurchaseTypeSelectView.js

+import View from './View.js';
+import { $ } from '../utils/dom.js';
+
+export default class PurchaseTypeSelectView extends View {


처음 앱 접속 시 보여지는 자동/수동 구매 선택지입니다.

- remove yarn conflicts - update validation constant - resolve eol errors in css files

wow9144

사용성을 올리기 위해 고민하신 흔적이 보여서 좋았습니다. 👍
다만 전체 프로세스가 진행되는 과정중에서 약간의 논리 오류가 발견 되었으니 코멘트 확인하시어 이 부분을 중점적으로 수정 하시면 될 것 같습니다.
프로세스의 각 단계를 나눠서 생각해보시면 수정 하시는데 도움이 될 것 같습니다.
용지에 번호를 적는 단계, 로또가 발행되는 단계, 발행된걸 확인하는 단계 등등..

화이팅!

wow9144 · 2021-03-01T05:44:52Z

src/js/views/ManualInputView.js

+    const allConfirmBtn = document.createElement('template');
+    const convertToAutoCaption = document.createElement('template');


createElement() 하면 DOM 엘리먼트를 만들어 낼 수 있으므로 해당 엘리먼트를 통해 DOM API를 이용할 수 있는 이점이 있습니다.
안타깝게도 template 엘리먼트가 IE 에서 지원되지 않으니 이점 추가로 알아두시면 좋을 것 같습니다.

wow9144 · 2021-03-01T05:56:57Z

src/js/views/ManualInputView.js

+  }
+
+  createManualLottos() {
+    const lottoTicekts = [...Array(this.count)]


for 문 보다 Array 의 메서드를 사용하는게 대부분의 경우에 더 낫습니다.
이 경우는
const lottoTickets = Array.from({length: this.count}, (_, idx) => `<li>....</li>`).join('')
이렇게 하시면 될 것 같네요 :)

wow9144 · 2021-03-01T06:11:13Z

src/js/views/ManualInputView.js

+        Number($element.dataset.manualIndex) ===
+        LOTTO_NUMBERS.LOTTO_MANUAL_COUNT - 1
+      ) {


의도가 잘 드러나는 코드가 좋은 코드입니다.
이 댓글을 달아주신 이유가 만약 제가(혹은 이 코드를 보는 다른 누군가가) 이 코드를 더 잘 이해하도록(혹은 정확히 이해하지 못할까봐) 설명(마치 주석처럼)을 해주신것이라면, 코드 자체에서 그 설명이 표현되는게 좋습니다.

수동 구매에서는 포커스가 다음으로 이동된다.
마지막은 제외한다

라는 의도를, 코드를 읽는 사람이 별도 설명 없이 코드만 보고 알아차릴 수 있다면 완벽한 코드입니다.

사용성을 위해 포커스를 다음으로 옮기시는것은 굉장히 좋습니다.
실무에서도 디자이너나 기획자가 따로 언급하지 않는 경우도 많은데 개발자가 사용성을 생각해서 고민하고 추가로 구현하는것은 굉장히 좋은 태도라고 생각합니다 :)

wow9144 · 2021-03-01T06:27:00Z

src/js/LottoController.js

+
+  createManualLottos(manualNumbers, ticketNumber) {
+    const lotto = new Lotto();
+    lotto.inputManualNumbers(manualNumbers);


inputManualNumbers 라는 메서드를 별도로 두기보다는 Lotto를 생성 할 때 numbers를 넘기는게 의미상으로도 더 좋을 것 같습니다.
넘기면 그 숫자로 로또를 생성하고(수동) 안넘기면 랜덤한 숫자로 생성하고(자동) ...
현재 구조라면 랜덤 숫자로 이미 생성된 로또에 뒤늦게 숫자를 덮어 씌우는듯 하네요 :)

덮어 씌우는 것이 맞긴 합니다 😅 그냥 넘어갔는데 짚어 주셔서 감사합니다!
다른 로직으로 수정해보도록 하겠습니다.

그렇게 하면 Lotto의 constructor에 분기를 나눠줘야 할 것 같아서 inputManualNumbers를 넣은 것인데,
좀 더 고민 후 반영해보겠습니답

wow9144 · 2021-03-01T06:31:04Z

src/js/LottoController.js

+  }
+
+  confirmManualPurchaseHandler(manualCount) {
+    if (manualCount < this.purchasedPrice / LOTTO_NUMBERS.LOTTO_UNIT) {


if 의 조건에 다양한(다른) 연산이 섞여 있으면 가능하면 분리해주는게 좋습니다.
< 비교 연산과
/ 산술 연산이 같이 존재하므로
산술 연산을 하여 하나의 값으로 귀결 시켜 변수에 할당(변수의 이름을 통해 의미 부여)하고 manualCount 와 이 변수와 비교 연산을 하는식으로 2개의 다른 연산을 나누면 코드의 가독성이 올라갑니다.

wow9144 · 2021-03-01T06:39:57Z

src/js/LottoController.js

+      alert(ALERT_MESSAGES.DUPLICATE_NUMS);
+      return;
+    }
+    this.createManualLottos(ticketNumbers, eventDetail.ticketNumber);


이 시점에 createManualLottos 를 하는게 맞는지 한 번 고민해보실 필요가 있을 것 같습니다.
숫자를 쓰고 확정을 누른 시점은 로또 용지에 번호를 다 적은 상태일뿐 로또가 발행되는것은 '구매 확정하기'를 누른 뒤어야 하지 않을까 싶습니다.

실무에서 이것과 비슷한 예를 찾는다면 회원가입을 하기 위해 아이디를 입력하고 아이디 중복 검사를 눌렀는데 아이디로 회원가입이 되어버린것과 같은 상황이라고 볼 수 있습니다.
아직 비밀번호도 주소도 기타 다른 필드들이 입력되지 않았고 가입하기 버튼을 누르지도 않았는데 말이죠 :)

각각의 수동 로또 티켓에 확정을 누르면 Lotto 객체를 생성하여 번호들을 보여주는 로직을 간단하게 하려고 했던 건데,
말씀 주신 부분이 일리가 있는 것 같습니다. 좀 더 자연스러운 실행 흐름으로 바꿔보겠습니다!

wow9144 · 2021-03-01T06:56:22Z

궁금한점 답변

2단계에서 Lotto 모델이 너무 많은 일을 한다는 피드백을 바탕으로 LottoProcessor 클래스를 만들어서 당첨 결과를 계산하게끔 했는데, 해당 계산 담당 로직들을 class로 만들어 내부 메소드들로 구현한 것이 괜찮은 방식인지 궁금합니다! 각 게임마다 new 연산자로 각 view를 새로 만들어내는 것처럼, 계산하는 로직도 현재 로또 배열과 당첨 번호를 담고 있는 유일한 인스턴스라고 생각해서 그렇게 작성했는데, 어떻게 생각하시는지 피드백 받고 싶습니다.
-> 잘하셨습니다.(Processor 라는 이름은 전체 발행 과정을 관장하는 것 같아서 조금 수정이 되면 더 좋을 것 같긴 합니다. 로또 발행이 끝나고 결과를 확인할 때 필요한 애니까요) 이렇게 역할(로또 분석)을 나누고 그 녀석(객체)에게 내가 가진게 이건데 이걸로(인자) 처리(메서드 이름에 해당 일)좀 해줄래? 라고 하는 것이 객체 지향 프로그래밍의 기본입니다.

ManualInputView가 처음 생각보다 조금 길어진 것 같습니다. html 템플릿이 많아서 그런 것 같기도 한데, 자동 구매 시에는 해당 view가 필요하지 않기 때문에 index.html 파일에 미리 넣어 놓고 show, hide하기보다는 수동 구매 선택 시에만 ManualInputView를 append하는 방식으로 사용하고 있습니다. 이에 대한 리뷰 부탁드리고 싶습니다!
-> 사용성을 올리기 위한 고민이 고스란히 묻어나는게 ManualInputView 가 아닌가 싶습니다. 미리 넣어놓고 show, hide를 하는 경우가 append 하는 경우보다 빠릅니다. show, hide 는 이미 만들어진 돔트리에 조작만 해서 렌더트리만 변경이 일어나고 append 는 돔트리와 렌더트리가 전부 변경이 되니까요.
그래서 미리 보여져도 별 문제가 없다면(단순히 유저의 편의를 위한 인터페이스 같은것) show, hide 만 하는 편이고 서버를 통해 어떤 정보가 있어야 해서 미리 보여주면 안된다든지(개발자도구로 숨겨져있는걸 조작해서 미리 보면 문제가 생긴다든지) 하는것은 show, hide로만 조작하면 안되기도 합니다.
결론적으로 지금과 같은 경우는 show, hide 를 하든지 append 를 하든지 크게 차이는 없으니 편한대로 하셔도 됩니다.

…ng focus)

- update manual lotto creation logic - create manual lottos when click allConfirmButton

zigsong

리뷰 주신 부분들 반영하여 수정해보았습니다.
좋은 피드백 감사드립니다 😆

zigsong · 2021-03-01T08:47:34Z

src/js/views/ManualInputView.js

-        `
-      )
-      .join('');
+    // const lottoTickets = Array.from({length: this.count}, (_, idx) => `<li>....</li>`).join('')


실수로 올라갔네요 😂 다음 커밋에서 지웠습니다!

zigsong · 2021-03-01T08:48:51Z

src/js/views/ManualInputView.js

+    const manualForms = Array.from(
+      { length: this.count },
+      (_, idx) =>


array로 loop을 도는 로직을 말씀주신 대로 바꾸었습니다.

zigsong · 2021-03-01T08:49:45Z

src/js/views/ManualInputView.js

+  isLastManualNumber(manualIndex) {
+    return Number(manualIndex) === LOTTO_NUMBERS.LOTTO_MANUAL_COUNT - 1;
+  }


마지막 input에서는 moveFocus가 되지 않는 코드를, 명시적으로 설명하기 위해 함수로 한번 분리하였는데
말씀주신 의도대로 잘 이해한 것이 맞을까요? 😅

네 이정도만 되어도 가독성이 훨씬 나아진것 같습니다 👍

zigsong · 2021-03-01T08:50:32Z

src/js/views/ManualInputView.js

+  }
+
+  showAllConfirmButton() {
+    const allConfirmBtn = document.createElement('div');


IE 대응을 위해 createElement('template') 대신 createElement('div')를 사용했습니다.

zigsong · 2021-03-01T08:51:43Z

src/js/LottoController.js

+  inputManualTicketHandler(eventDetail) {
+    const ticketNumbers = eventDetail.numberInputs.map(input =>
+      Number(input.value)
+    );
+    if (!isUniqueManualNumber(ticketNumbers)) {
+      alert(ALERT_MESSAGES.DUPLICATE_NUMS);
+      return;
+    }
+    this.manualInputView.saveTemporaryTicket(
+      ticketNumbers,
+      eventDetail.ticketIdx
+    );
+  }


수동 로또 1장 확정 시 로또를 바로 생성하지 않고, 확정된 숫자들의 목록으로만 보여지게끔( this.manualInputView.saveTemporaryTicket) 로직을 수정했습니다.

zigsong · 2021-03-01T08:53:17Z

src/js/LottoController.js

+        this.purchaseAutomatically(lottoTotalCount - manualCount);
+      }
+    } else {
+      this.createManualLottos(manualTickets);


수동 구매 시 전체 구매 확정을 눌렀을 때 createManualTickets를 실행하도록 바꿨습니다.

zigsong · 2021-03-01T08:54:03Z

src/js/Lotto.js

-    this.initNumbers();
+  constructor(numbers) {
+    this._numbers = new Set(numbers) || new Set();
  }


자동일 때는 빈 Set이 만들어지고 아래의 initRandomNumbers를 실행하며,
수동일 때는 인자로 받은 숫자들로 로또를 생성합니다.

wow9144

3단계까지 완료 하시느라 수고 많으셨습니다.
앞으로 진행 될 다음 미션들도 계속 기대 할게요 화이팅! :)

wow9144 · 2021-03-02T10:12:17Z

src/js/views/ManualInputView.js

+  isLastManualNumber(manualIndex) {
+    return Number(manualIndex) === LOTTO_NUMBERS.LOTTO_MANUAL_COUNT - 1;
+  }


네 이정도만 되어도 가독성이 훨씬 나아진것 같습니다 👍

zigsong

[3/23 셀프 리뷰]

zigsong · 2021-03-23T02:02:14Z

src/js/Lotto.js

    while (this._numbers.size < Lotto.LOTT0_LENGTH) {
-      this._numbers.add(getRandomNumber());
+      this._numbers.add(getRandomNumber(1, LOTTO_NUMBERS.LOTTO_MAX_NUM));


getRandomNumber와 같은 유틸성 함수는 최대/최소값 인자를 받아서 여러 곳에서 사용할 수 있도록 작성하는 게 좋은 것 같다.

zigsong · 2021-03-23T02:04:09Z

src/js/LottoController.js

+      lotto.initRandomNumbers();
+      return lotto;


return 문 위는 한 줄 띄는 게 가독성이 좋다.

zigsong · 2021-03-23T02:05:01Z

src/js/LottoController.js

+  }
+
+  createAutoLottos(lottoCount) {
+    const newLottos = Array.from({ length: lottoCount }, () => {


length만 알고 있는 Array를 채우는 방식을 몇 번 더 연습해서 적재적소에 적용해봐야겠다.

zigsong · 2021-03-23T02:06:43Z

src/js/utils/lottoProcessor.js

+      LOTTO_NUMBERS.LOTTO_MANUAL_COUNT
    );
-    this.bonusNumber = winningNumbers[LOTTO_NUMBERS.WINNING_NUMBER_COUNT - 1];
+    this.bonusNumber = winningNumbers[LOTTO_NUMBERS.LOTTO_MANUAL_COUNT];
    this.rankCounts = Array(5).fill(0);
    this.earningRate = 0;
  }


이 파일의 이름은 LottoManager 등으로 했어도 좋을 것 같다.
그때도 리뷰어님께서 말씀 주셨는데, 까먹고 바꾸지 않았다 😅

zigsong · 2021-03-23T02:07:04Z

src/js/utils/utils.js

+export function getRandomNumber(min, max) {
+  return Math.floor(Math.random() * max) + min;


zigsong · 2021-03-23T02:14:39Z

src/js/views/ManualInputView.js

+  moveFocus($element) {
+    if ($element.value.length === 2) {
+      if (this.isLastManualNumber($element.dataset.manualIndex)) return;
+      $element.nextElementSibling.focus();


nextElementSibling는 써놓고 또 잊고 있었음! 유용한 DOM selector 기억기억

zigsong · 2021-03-23T02:18:12Z

src/js/views/PurchaseTypeSelectView.js

+    $('#auto-btn').classList.toggle('btn-default');
+    $('#auto-btn').classList.toggle('btn-cyan');
+    $('#manual-btn').classList.toggle('btn-default');
+    $('#manual-btn').classList.toggle('btn-cyan');


단순히 toggle만 하다보면 리로딩이나 악의적인 css 변경 등 외부 변화에 취약하여 앱의 상태와 실제 UI가 맞지 않을 수 있기 때문에,
isAutoPurchase bool 값에 따라 조건문 분기로 class의 추가/삭제를 해주는 것이 좋아 보인다.

zigsong · 2021-03-23T02:20:41Z

src/js/views/View.js

@@ -5,11 +5,13 @@ export default class View {
  }

  show() {
+    if (!this.$element) return;


(이전 변경 내역이라 아래에 코멘트가 안 달린다.)

CustomEvent를 여기서 선언해 놓고 class 자체를 상속 받아 사용했기 때문에
실제로 dispatchEvent가 어디에 붙어 사용되는지, 왜 이곳에 붙여주는지 생각지 않고 사용했던 것 같다.

이번 지하철 노선도 미션에서 window.dispatchEvent와 window.addEventListener를 사용하며 조금 더 CustomEvent의 작동 방식과 친해진 것 같다.

zigsong · 2021-03-23T02:23:23Z

src/js/views/WinningResultView.js

  moveFocus($element, idx) {
    if ($element.value.length === 2) {
-      if (idx === LOTTO_NUMBERS.WINNING_NUMBER_COUNT - 1) return;
+      if (this.isLastWinningNumber(idx)) return;
      $$('.winning-number')[idx + 1].focus();
    }
  }


(이전 변경 내역이라 위에 코멘트가 안 달린다.)

bindNumberInputEvent 메소드에서

this.winningNumbers = [ ...$('#winning-numbers-form').getElementsByTagName('input'), ].map(input => Number(input.value));

대신

this.winningNumbers = [ ...$('#winning-numbers-form').elements ].map(input => Number(input.value));

이런 식으로 돌았어도 될 것 같다. form 요소 내부의 form 컨트롤이 되는 대상들을 모아보기!

zigsong · 2021-03-23T02:24:52Z

yarn.lock

-<<<<<<< HEAD
-debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
-=======
+


merge conflict 시 yarn.lock 파일도 잘 보자 🤦‍♀️

zigsong · 2021-04-24T09:08:24Z

학습로그

객체 프로그래밍의 기본 (ref)

역할을 나누고 객체에게 인자 처리를 요청하는 것
필요한 데이터를 추상화시켜 상태와 행위르 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 것
링크
- https://jeong-pro.tistory.com/95](https://jeong-pro.tistory.com/95

show/hide와 append (ref)

웹페이지 렌더 과정

DOM, CSSOM 생성
render tree 생성
layout (reflow) - 브라우저 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산
(re)paint

페이지 초기 로딩 시 보이지 않아야 할 요소를 미리 DOM에 넣어 놓고 show/hide를 하는 경우가 필요한 상황에서 해당 요소를 append하는 것보다 빠르다.
show/hide는 이미 만들어진 DOM tree에 조작만 해서 render tree에만 변경이 일어나고, append는 DOM tree와 render tree 모두 변경되기 때문이다
- DOM tree - 실제 모든 html 요소들을 포함하는 트리
- render tree - DOM과 CSSOM 트리가 결합된, 실제 화면에 표현되는 요소들의 트리
미리 보여져도 상관없는 요소라면 show/hide를 선택
링크

기타

Array 내장 메서드 사용하기 (ref)

const lottoTickets = Array.from({ length: this.count }, (_, idx) => `<li>....</li>`).join('')

Array.from() 메서드는 유사 배열 객체(array-like object)나반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만든다.
링크
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

`nextElementSibling` (ref)

선택한 요소의 바로 다음 요소를 리턴한다
링크
- https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling

form.elements (ref)

const inputs = document.getElementById("my-form").elements;
const inputByIndex = inputs[0];
const inputByName = inputs["username"];

링크
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements

devhyun637 and others added 29 commits February 21, 2021 00:03

[1단계 - 행운의 로또 미션] 티케(조은현) 미션 제출합니다 (woowacourse#26)

6385769

Merge branch 'zigsong' of https://github.com/woowacourse/javascript-l…

1be66e6

…otto into main

docs: make step3 todos

71cb30a

test: show purchase-type select butons

f731765

feat: show purchase-type select butons

398fb2d

refactor: rename lotto-input-nums to lotto-winning-nums

cdca062

test: switch purchase-type button color

8daa689

feat: switch purchase-type button

45e24fe

test: show manual input form when choose manual purchase

472a630

refactor: rename dom to selector

e3920bd

feat: show manual input form when choose manual purchase

08ca044

test: alert when type duplicate numbers in manual input

e1fef16

feat: alert when type duplicate numbers in manual input

7823ca7

test: show confirmed lotto ticket if typed manul numbers correctly

9607d94

feat: create & show confirmed lotto ticket if typed manul numbers cor…

da9f3d5

…rectly

test: show confirm alert when manual input count is lesser than price

f311083

feat: show confirm alert when manual input count is lesser than price

b928fd3

test: process auto purchase when agree to auto purchase confirm

9b04090

feat: process auto purchase when agree to auto purchase confirm

b1238d5

fix: remove wrong classname and unnecessary index

64aa134

feat: process manual purchase when typed all manual inputs

8728c0f

fix: fix bugs when switching between auto/manual purchase

dd3f2ab

fix: resolve conflicts with step2 merge commit

6329e9d

refactor: update getRandomNumber logic

cecda97

refactor: remove unnecessary classnames & add lotto number constant

d6a3dc2

refactor: typos in cypress

910947d

feat: add auto-convert caption in manual input view

60f0ba5

feat: move focus to next input in manual input view

62aaf02

refactor:

3682f7e

- refactor spacings - rename selector to dom - remove unnecessary variable

zigsong commented Mar 1, 2021

View reviewed changes

refactor:

f7858e1

- remove yarn conflicts - update validation constant - resolve eol errors in css files

pocojang requested a review from wow9144 March 1, 2021 02:48

pocojang assigned wow9144 Mar 1, 2021

fix: fix binding events bug on manualInputView

964f5e6

wow9144 suggested changes Mar 1, 2021

View reviewed changes

zigsong added 4 commits March 1, 2021 15:59

refactor: update array loop logic in manualInputView

18d57c1

refactor: separate method checking if last number input (prevent movi…

b6db430

…ng focus)

refactor: update showAllConfirmButton logic

8afe5e5

refactor:

f98aa76

- update manual lotto creation logic - create manual lottos when click allConfirmButton

zigsong commented Mar 1, 2021

View reviewed changes

fix: reset to autoPurchase when click restart in manual purchase step

043299b

wow9144 approved these changes Mar 2, 2021

View reviewed changes

wow9144 merged commit 5b30f1f into woowacourse:zigsong Mar 2, 2021

zigsong commented Mar 23, 2021

View reviewed changes

		const allConfirmBtn = document.createElement('template');
		const convertToAutoCaption = document.createElement('template');

		export function getRandomNumber(min, max) {
		return Math.floor(Math.random() * max) + min;

[3단계 - 행운의 로또 미션] 지그(송지은) 미션 제출합니다. #64

[3단계 - 행운의 로또 미션] 지그(송지은) 미션 제출합니다. #64

Conversation

zigsong commented Mar 1, 2021 • edited Loading

✅ 3단계 TODO

🛠 컴포넌트 및 구조도

🗂 디렉토리 구조

🤔 고민한 점

🙄 궁금한 점

zigsong left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zigsong Mar 1, 2021 • edited Loading

Choose a reason for hiding this comment

zigsong Mar 1, 2021 • edited Loading

Choose a reason for hiding this comment

wow9144 left a 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

wow9144 commented Mar 1, 2021

zigsong left a 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

wow9144 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zigsong left a 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

zigsong commented Apr 24, 2021

학습로그

객체 프로그래밍의 기본 (ref)

show/hide와 append (ref)

웹페이지 렌더 과정

기타

Array 내장 메서드 사용하기 (ref)

nextElementSibling (ref)

form.elements (ref)

zigsong commented Mar 1, 2021 •

edited

Loading

zigsong Mar 1, 2021 •

edited

Loading

zigsong Mar 1, 2021 •

edited

Loading

`nextElementSibling` (ref)