github 레포
https://github.com/blacktoast/javascript-lotto
우테코 프론트엔드 코스 클론코딩
Lotto 과제 회고
기간 21.11.15~11.24
서론
취준생이지만 우테코는 가지 못했다.
하지만 실력은 쌓고싶었고, 찾던 와중 우테코 과제 레포를 찾게 된다.
비록 나에게는 코드리뷰도 피드백도 없지만 일단 따라하면 뭐라도 될까 싶어서 해보는 중이다.
클론을 하면서
일단 설계를 제대로 못한듯 하다.
설계를 한다고는 했지만 draw 사이트를 잘 사용를 하지도 못해서
그냥 글로 어느정도 가닥을 잡고 들어갔다.
mvc패턴을 바닐라js로 구성을 해보자는 생각을 가지고 시작했다.
소스 폴더 구조
src
- handler
- view
- model
- uitls
위와 같은 구조를 잡고 들어갔다
html template 생성이나 화면 부를 담당하는것은 view 폴더 넣고 렌더 함수들을 넣었고
utils에는 랜덤으로 로또 번호를 생성 한다던지, dom에서 input값들을 받아오는등 공통 함수들을 넣었다.
그리고 handler 폴더는 mvc 패턴중 c에 해당하는 컨트롤러로 썻다
이벤트리스너를 붙이는 함수들과 각종 계산을 하는 함수를 넣었고
종료후 view의 렌더 함수를 실행 시켰다.
model쪽에서는 lotto 클래스를 만들어서
컨트롤러에서 해당 클래스 인스턴스를 만드는식으로 만들었지만
그 상태 데이터를 컨트롤러에서 가지는게 맞나? 라는 생각이 들었다.
해서 model에 state라는 전역 객체를 만들어서 해당 객체에 저장하는식으로 구상했다.
부족했던점
코드를 작성하면서 점점 느꼈지만
handler 즉 컨트롤러 부분에서 계속해서 렌더 함수를 호출하니
이건 의존성이 너무 큰거 아닐까 하는 생각이 들었다.
*해결방안이 뭘까? mvvm 패턴을 이용한 라이브러리를 제작해야하는걸까...
게다가 컨트롤러 쪽에서 값을 넘긴게 아니라
렌더링 할때에도 렌더 함수쪽에서 원하는 데이터값을 알아서 찾아와서
렌더링을 하다 보니 이게 역활분리가 제대로 된것인지 헷갈리기 시작했다.
*뭐가 맞는걸까? 피드백이 없다 보니 어려운 부분이다
state 전역 객체를 만들어서 lotto상태를 관리 했는데, 이게 맞나?
저장하는 api가 없다보니 데이터 베이스 식으로 사용했는데.
그렇게 하니 뷰나 컨트롤러 가릴것없이 해당 객체에 접근 해서 값을 가져오게 되었다..
다음과제에선 어떻게 고칠까?
view 부분에서 외부 상태나 데이터값을 가져오거나 연산 하지말고
오직 입력된 상태로만 렌더링을 하게 하자
model은 아직 뚜렸한 방안이 떠오르지않는다.. 계속 state 전역객체를 사용해야할까 흠
controller 이부분도 사실 잘 모르겠다 .. mvvm 패턴을 써야하나..
..다음과제는 유튜브다 https://github.com/woowacourse/javascript-youtube-classroom
