[2단계 - 웹 기반 로또 게임] 비비빙 미션 제출합니다.

[binggwa]

학습 목표

이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 합니다.

• UI와 도메인 영역을 분리할 수 있는 설계를 고민해보고, 목적에 맞게 객체와 함수를 활용
• TDD 방식으로 개발하며, 단위 테스트 기반으로 점진적인 리팩터링

제출 전 체크 리스트

• 기능 요구 사항을 모두 구현했고, 정상적으로 동작하는지 확인했나요?
• 기본적인 프로그래밍 요구 사항을 준수하고 있는지 확인했나요?
• 테스트 코드는 모두 정상적으로 실행되나요?
• (해당하는 경우) 배포한 데모 페이지에 정상적으로 접근할 수 있나요?
  • 배포한 링크 기입: https://binggwa.github.io/javascript-lotto

리뷰 요청 & 논의하고 싶은 내용

1) 이번 단계에서 가장 많이 고민했던 문제와 해결 과정에서 배운 점

1단계 미션에서 작성한 Domain 로직을 단 1도 수정하지 않고 진행하는 것이 주 목표였고, 실제로 매직넘버를 조금 분리한 것 외에 핵심적인 도메인 로직은 하나도 변경하지 않고 웹 UI를 만들어서 연결할 수 있었다. 관심사 분리가 잘 되었던 것 같아 다행이었다. 또, Web에서도 MVC 패턴을 어떻게 적용하는 지에 대해 고민했었는데, 처음에는 일단 WebApp 컨트롤러에 모든 로직을 담아 일단 돌아가는 코드를 만들고, 잘 돌아가는 것을 확인한 뒤에 LottoWebView를 따로 만들어 View의 역할을 담당하는 로직을 분리했다. 수업을 통한 이전 기수들의 리뷰를 통해 View가 담당할 규칙에 대해 다음과 같은 사실을 배울 수 있었다.

• Model은 View를 알지 못하므로, DOM 접근 코드가 존재해서는 안된다.
• View는 화면에 보여주는 역할만 수행해야 한다는 관점이었지만, 프론트엔드 환경에서 View의 역할에는 사용자와의 상호작용(이벤트)을 감지하는 것도 포함된다.
• Controller의 DOM 의존도를 제거하기 위해 View 로 eventhandler를 모두 넘긴다.
  해당 리뷰들을 통해서 Web 환경에서의 View 분리에 대해 더 잘 알게 되었다고 생각한다.

2) 이번 리뷰를 통해 논의하고 싶은 부분

이번 단계에서 고민했던 문제는 리팩토링 수준과 figma 시안의 준수정도였습니다.

1. figma에 나와있는 크기를 모두 반영해서 픽셀 단위로 UI를 만들면 수치를 넣을 때는 편할 수 있었지만, 현재 제 모니터에서 보이는 UI가 굉장히 보기 힘든 크기로 배치되기도 했으며, 웹을 제작시 픽셀로 크기를 고정한다면 모바일과 같은 다른 플랫폼에서 보면 혹시 이상하게 표시되지는 않을까..? 하는 고민과 함께 rem을 사용하는 것으로 일부 바꿨으나, css 파일 전체적으로 단위가 통일되지 않는 점과 함께 figma 시안의 수치를 정확하게 지키지 못했던 점이 조금 아쉬웠습니다. 혹시 리뷰어님도 실무를 진행하실 때에 figma 시안을 보고 작성하는 일이 많으실까요? 보신다면 figma 시안의 참고정도는 어떤 정도가 적당한지 궁금합니다. 사용자 편의성에 맞춘다는 생각은 있어도 임의로 정해진 시안을 조금 변경하는 것이 과연 괜찮은 것인지 의문이 들었습니다.
2. 또, JS의 경우 컨트롤러인 WebApp과 View인 LottoWebView의 경우 개인적으로는 잘 나누었다고 생각했는데, 더 잘게 나누는 방법도 좋으려나 싶은 고민과 함께 제가 보지 못한 리팩토링 거리가 더 있는지 여쭙고 싶습니다.
3. html과 css의 경우도 다루는 것이 익숙하지 않다보니 꽤 더럽게 짰다고 생각되어, 리팩토링을 어떤 식으로 하는 게 좋을지 감이 잡히지 않아 리뷰어분이 사용하시는 컨벤션이나 규칙이 따로 있는지 궁금합니다! css를 만들 때, html의 초기 태그에 스타일 클래스는 많이 붙이지 않았었지만, 만들면서 점점 어떤 스타일이 이미 적용되어있는지 헷갈리고 포장되어 있는 박스가 헷갈려 결국 대부분의 태그에 class를 하나하나 이름붙여서 css를 속성별로 나열하는 스타일이 되어버렸습니다.. 이런 방식이 분명 효율적이진 않아보여 어떤 원칙을 세우고 만드는 것이 더 효율이 잘나오는지 궁금합니다!!
4. css의 경우 속성 순서를 준수하라는 요구사항이 있어 1. 레이아웃 관련 2. 박스 모델 3. 시각적 장식(배경/테두리) 4.타이포그래피 의 순서로 나누려고 했는데, 잘 되었는지, 혹시 다른 방법도 있는지 궁금합니다.

1단계에서의 초기 피드백 덕분에 도메인 로직을 수정하지 않고 2단계를 수월하게 진행할 수 있었던 것 같습니다!! 리뷰 항상 감사드리고 2단계도 잘 부탁드립니다! 😊

---

✅ 리뷰어 체크 포인트

1단계

• TDD를 활용해 기능을 구현하는 과정에서 적절한 테스트 우선 접근 방식을 적용했는가? 단위 테스트의 커버리지는 충분한가?
• 도메인과 UI의 관심사를 분리하여 적절한 모듈화가 이루어졌는가? 하나의 객체나 모듈이 너무 많은 책임을 가지고 있지는 않은가?
• 객체의 프로퍼티를 직접 조작하기보다 메시지를 던지고 있는가?
• 불필요한 클래스를 사용하지 않고, 함수를 적극적으로 활용하여 JavaScript다운 방식으로 로직을 구현했는가?

2단계

• 도메인 로직에 불필요한 영향을 주지 않고 UI 변경에 대응했는가?
• DOM 조작과 이벤트 활용을 JavaScript의 개념에 맞게 이해하고 적절하게 적용했는가?
• 웹 표준을 준수하는 마크업을 활용하며, 스타일 작성에 일관성이 있는가?