[1단계 - 행운의 로또 미션] 록바(김상록) 미션 제출합니다

[lokba]

안녕하세요. 로이~
저는 록바입니다. 😄

우선, 로이에게 리뷰를 받게 되어 정말 영광입니다.
저는 코어 자바스크립트를 읽고, 자바스크립트의 세계에 눈을 떴습니다.
다른 책들에 비해, 짧은 분량임에도 많은 정보를 습득하고 성장할 수 있었습니다ㅎㅎ

---

로또 미션 데모 페이지 입니다.

클래스 다이어그램(수정본)

파일 구조도(수정본)

질문사항 🎯

---

1. 자동차 경주게임 미션과 동일하게, 이번 미션 또한 MVC 패턴을 적용하였습니다. 두가지 미션의 다른 점은, 로또 미션은 view를 좀 더 세분화시켰다는 점입니다. 해당 view가 적절하게 나눠졌는지 궁금합니다.

---

2. 이전에 E2E 테스트를 진행하다가, 처음으로 유닛 테스트를 경험하였습니다. 현재 작성된 테스트 코드가 적절하게 작성되었는지 궁금하고, 또한 추가적으로 작성될 필요가 있는 테스트 코드가 궁금합니다.

---

3. 은닉화 관련 질문입니다. #을 이용해서 private field를 만들 수 있다고 알고 있습니다. 저는 은닉화의 대상이 민감한 데이터라고 생각합니다. 그리하여, 데이터를 가지고 있는 Model 폴더에서만 은닉화를 진행하였는데 이것이 올바른 방법인지 궁금합니다. 그 이유는 다른 크루분들 중 일부는 model, view를 대상으로 은닉화를 진행하는 것을 보았기 때문입니다.

---

요번 미션의 가장 포인트는 토글에 따른 UI가 변하는 것입니다.

토글이 off인 경우, 로또 이미지만을 렌더링합니다.
토글이 on인 경우, 로또 이미지와 해당 로또 번호를 렌더링합니다.

제가 생각하기에, 위 방식을 구현하는데 2가지 방식이 있다고 생각합니다.

첫번째,

1. 구매한 로또의 수만큼, 로또 이미지와 로또 번호를 생성한 후 특정 dom에 삽입한다.
2. 토글의 변화에 따라서, 로또 번호를 보여주는 element에만 className를 추가or삭제하여 스타일을 변경한다.

두번째,

1. 구매한 로또의 수만큼, 로또 이미지만을 포함하고 있는 dom(off 상태), 로또 이미지와 로또번호 두가지를 모두 포함하고 있는 dom(on 상태)에 삽입한다.
2. 토글의 변화에 따라서, off 상태인 element와 on 상태인 element를 번갈아 보여준다.

첫번째 방식의 장점은, on과 off를 분리하지 않았기 때문에 효율적이라 생각합니다.
그에 반해, 단점은 토글의 상태에 따라 로또 번호를 포함하고 있는 element를 모두 접근하여 class명을 바꿔주어야 합니다.

예를 들어, 사용자가 티켓 100개를 구매하고, 토글을 누르면?
100개의 로또 번호를 포함하는 element에 접근하여 className을 추가or 삭제 해야합니다.

두번째 방식의 단점은, on과 off를 분리하지 않았기 때문에 비효율적이라고 생각합니다.
그에 반해 장점은, 토글의 상태에 따라 로또 번호에 접근할 필요없이 on과 off를 감싸고 있는 최상위 element에만 className를 이용하여 스타일을 제어하면 됩니다.

예를 들어, 사용자가 티켓을 100개 구입하고, 사용자가 토글을 누르면?
최상위 element에만 접근하면 되기 때문에 스타일을 제어하기 편합니다. 다만, on과 off에 각각 티켓에 대한 정보를 담아야합니다.

저희는 두번째 방식을 사용하였는데요.
제가 아직 브라우저 렌더링 과정을 잘 모르지만, 로이가 생각하기에 어떤 방식이 더 현명한 방식인지 궁금합니다.

---

5. 최근에 제가 MVC 패턴 방식에 너무 매몰되어 있다는 생각이 듭니다. 이전에 로이가 쓴 글중에서, 리뷰어를 진행하면서 많은 디자인 패턴 및 테크닉을 경험할 수 있어서 좋았다라는 글을 본 적이 있는데, 경험해보면 좋을 법한 디자인 패턴을 추천받고 싶습니다.

---

이상입니다.

사소한 지적, 많은 지적 다 환영합니다. 감사합니다. 로이 😄

[roy-jung]

고생하셨습니다. step-2에서 다시 뵙겠습니다 :)