[우테코] Lv. 1 런치 구현 - 1단계(2차)

배경지식!

01. 여기서부턴 나혼자 리팩토링!

02. 악 테스트 어려워

 

---

1. PR 메세지 

1. 구상

* 템플릿 분리: 일단 동적 컴포넌트로 따로 변경되지 않을 컴포넌트는 템플릿 파일에 따로 저장하였습니다. 파일로 분리해 놓는 것이 좋을 수 있지만, 적어도 지금은 분리되어있으면 가독성만 해친다고 생각하였습니다. 다만, 모달창을 하나의 폼으로 다시 정의한 과정에서 템플릿이 너무 길어졌다는 문제가 있습니다. 거슬리기는 하지만 따로 빼는 것은 다른 컴포넌트와의 통일성을 해친다고 생각해 동일하게 넣었습니다.

* 컴포넌트: 일전에 했던 것처럼 컴포넌트 안에 이벤트리스너를 추가하는 함수를 구현했으나 로직들을 다른 파일에 만들어 불러오는 식으로 만들었습니다. 다만 이런 경우에 다른 파일에 종속된다고도 생각이 들었습니다. 이 부분은 아래에서 다시 생각을 정리하며 여쭤보겠습니다.

* 테스트: 습관이 기능을 모두 구현하고 테스트를 만드는 것인가봅니다... 이번에 리팩토링을 했으나 여전히 테스트를 만들기는 어려웠습니다. 특히 html 태그를 함수안에서 불러와 직접 넣는 등의 행위를 하다보니 테스트가 굉장히 어려워 일단 코드를 먼저 PR했습니다. 지금 붙잡고 있는 것보다는 필요성에 대해 인지하고 다음번에 처음부터 이를 고려하여 짜는 것이 좋을 것 같다는 생각을 했기 때문입니다. 리턴보다 this를 많이 쓰는데, 이 역시 굉장히 테스트하기 어렵다는 것을 다시금 느꼈습니다. 다른 코드에 종속되지 않도록, 독립적일 수 있도록 만드는 것이 아직은 미숙합니다.

* 파일 구조: 제딴에 기능별로 구분지었습니다. index, app, template는 주요 파일이라 따로 파일에 넣지 않았습니다. 도메인으로 레스토랑 목록 데이터를 가지고 움직이는 restaurantService와 목록을 조종하는 makeNewList를 넣었습니다. 컴포넌트로 이벤트 리스너가 붙는 단위로 파일을 생성했고, 로컬과 돔을 다루는 파일은 유틸에 넣었습니다. 다만, 여기서 돔을 다루는 파일이 컴포넌트의 기능을 가지고 있는데, 이걸 따로 빼는 것이 맞는지 아니면 컴포넌트에 넣는것이 좋은지 모르겠습니다..

 

2. 고민

* 앞서 말씀 드린 것처럼 컴포넌트에 대해 고민이 많습니다. 만약 a컴포넌트와 b컴포넌트가 있습니다. a와 b는 동일하게 c기능이 필요합니다. c를 밖에서 유틸로 만들고 이걸 a와 b에서 각각 불러와 실행을 합니다. 이런 경우 a와 b는 c에 의존하게 된다고 생각합니다. 그렇다고 a와 b에 각각 c를 직접 적어 만든다면 그만큼 읽어야 할 시간도, 메모리도 많이 차지하겠지요. 어느것이 중도인지 잘 모르겠습니다. 이런 경우 콜백으로 함수를 만들어 a안 이벤트리스너에 인수로 넣어줄 수도 있겠죠. 근데 이럼 컴포넌트는 껍데기로, 클릭을 하면 이벤트를 실행할 뿐 함수가 바뀌면 그 기능이 사라집니다. 이제 독립적이라고 할 수 있을까요? 그 컴포넌트가 그 기능을 가졌다고 할 수 있을까요? 만약 함수를 콜백으로 넣지 않는다는 전제 하에 버튼 컴포넌트다 한다면, 클릭하면 이벤트가 만들어집니다, 까지가 컴포넌트가 가지는 적정의 이벤트인지, 아님 그 이상으로 도달이 켜지고 꺼집니다!까지가 적정의 이벤트인지 모르겠습니다.

 

2. 리뷰

  피드백 구조 의미 있는 고민보다는 실행이라 생각하는데 그래도 이런 저런 분리해보면서 어떤 생각을 가졌고 어떻게 수정했는지 확실히 코드만봐도 그 의도를 알 수 있었어요. 물론 여전히 아쉽고 애매한 부분들이 간간히 존재하기때문에 그 부분은 코멘트 리뷰 확인해주세요!

 고민점 컴포넌트 A,B 그리고 C 기능에 대한 이야기는 잘봤지만 아직.. @chsua 의 생각도 어지러운건지 질문을 잘 이해하지 못했어요 😢 다만 지금 고민에 대한 해결 방법을 찾기보다는 더 많은 시도를 해보셨으면 좋겠어요 충분히 잘 하고 계시기때문에 금방 더 성장하실 수 있을 것 같고요. 다시 한번 생각해보실 부분은..! 어떻게 해결하면 좋을까에서 잠깐 벗어나셔서 내가 지금 이걸 왜 고민하고 있지? 내가 이걸 왜 해결해야하지? 이 포인트도 한번 추천드려봅니다 :)

 

---

 

사실 여기에서는 크게 영향을 받은 리뷰는 없었다. 

다만 스스로 배운 것이 있었는데, 바로 테스트였다.

 

이번 테스트는 렌더링 테스트와 도메인 테스트인데 

렌더링 테스트에서는 화면에 그려지는 것을 테스트 해야 했다.

근데 이걸 함수 안에서 어디서 그릴지 지정해버리면 테스트하기가 어려워진다.

 

근데 나는 이걸 다 그렇게 짜버렸다. 

결국 모든 함수, 렌더링이 테스트하기 어려워진 것이다...

 

더불어서 시간이 없다는 이유로 기능구현 먼저 하자! 했고

그 결과 도메인도 테스트하기 어렵게 서로가 서로를 불러오고 return은 되지 않는다.

 

여기서 배운점.

함수는 하나의 역할만 하자!

그리고 

인수로 받고 리턴을 하며 심플하게 진행하자!