ganeodolu commented 4 years ago

미션3

8

요구사항

[x] 이름, 전화번호, 이메일, 비밀번호, 자기소개를 입력 받을 수 있는 폼을 modal ui로 만든다.
[x] 전화번호 혹은 이메일이 입력되면, 체크박스로 개인정보보호방침에 동의합니다 라는 항목이 나타나게 한다.
[x] 항목이 모두 입력되면 다음 버튼이 나타나고 이를 클릭하면 가족 구성원을 입력할 수 있도록 한다.
[x] 추가를 누르면 이름과 관계를 입력할 수 있는 입력 폼을 만들고, 입력을 받도록 한다.
- [x] 단, 1. 항목에 저장된 내용은 메모리 혹은 어떤 방식으로든 써먹을 수 있게 한다.
- [x] 또한 1. 항목에 표시되는 input 혹은 기타 html 태그들은 화면에 보여서는 안된다.
- [x] 즉 모든 항목을 즉시에 입력하는 방식이 아닌 단계별로 입력하는 일종의 Wizard 형태를 개발하는 것
[x] 가족 구성원을 입력하고 (0명이어도 무방), 회원가입 을 누르면 폼에 입력된 내용들을 확인하고 가입 완료 표시를 보여준다.
[x] 폼을 닫고 회원가입이 완료되었음을 알리는 모달 창을 만든다.
[x] 수정하고 싶은 내용이 있을 경우 수정할 수 있도록 한다.

Modal UI

동준님 코드(index.html, style.css 등)를 기반으로 만들었습니다. Modal UI 구현을 위해 사용한 Material Design Dialog를 사용하기 위해서는 dialog인스턴스 생성 후 open()과 autoInit() 메소드가 필요하였습니다.

this.dialog = new mdc.dialog.MDCDialog(document.querySelector('.mdc-dialog')) // dialog 인스턴스생성
this.dialog.open()  // dialog 시작
mdc.autoInit()  // 태그 안에 data-mdc-auto-init="MDCTextField"가 있는 부분의 Material Design 효과사용

미션후기

인적사항을 입력하는 부분에 change이벤트를 사용하여 value가 변경되면 다음버튼이 나오도록 하였습니다.
가족구성원 입력 후 +버튼을 눌러야 가족구성원이 추가되는 방식으로 구현하였습니다.
미션하기 완료 전 작성하였던 코드리뷰에서 불필요해보이는 부분은 삭제하였습니다.

이번 미션을 통하여 다양한 form을 사용해보고, Modal UI를 접할 수 있어서 좋았습니다.

ganeodolu commented 4 years ago

호준님의 코드가 발전되가는게 점점 눈에 더 잘 보이는 것 같아요!!!! 👏 이번 코드에서는 우선적으로 2가지만 더 신경써주시면 좋을 것 같아요!

컨벤션 컨벤션이 안지켜지거나, 일관되지 않는 부분들이 있는 것 같아요. eslint를 활용해주시면 좋을 것 같습니다.

이벤트 리스너에 할당하는 콜백 함수를 분리해주시면 좋을 것 같아요 콜백부분에 익명함수로 넣다보니 해당 부분이 어떤 기능을 하는지 모든 코드를 봐야 알 수 있다는게 좀 아쉬운 것 같습니다. 그리고 한 함수가 15줄 넘어가면서 길어진다면 함수를 분리하는 것도 좋을 것 같아요! 함수가 길어지면 유지보수가 점점 어려워지니깐요 :)

항상 독려해주셔서 감사합니다. :raised_hands: 그동안 eslint 설치만 해놓고 사용하는 줄 알았는데 설정도 필요했었군요. 코드를 분리하여 잘 이해가 되도록 신경쓰도록 하겠습니다.

ganeodolu commented 4 years ago

원래 미션 수행하고 참고해보려고 했는데 아직 수행을 못해서 먼저 코드 확인 후 리뷰어는 아니지만 겸사겸사 리뷰까지 남겨봅니다. 저도 얼른 진행해야 되는데 세션전까지 완료를 목표로 해봐야겠네요. 주로 변수명과 상수에 대해 리뷰를 남겼습니다. 개인적인 의견이니 참고하시길 바랍니다.

EOL, 축약형, 상수표현 등 모르고 지나친 것들을 알려주셔서 많은 도움이 되었습니다. 저도 매의 눈으로 잘 살펴서 개선점을 찾도록 하겠습니다. :grin:

eastjun-dev / frontend

[Mission003] 자바스크립트로 Form 과 Modal 에 대한 UI 만들기 #35

미션3

8

요구사항

Modal UI

미션후기