우아한테크코스 점심 뭐 먹지 step2 회고

오랜만에 쓰는 회고인데 그 때의 기억을 살려서 최대한 작성해보겠습니다.

 

점심 뭐 먹지 2단계 미션.. 쉽지 않았다.

왜냐하면 이 주 화수목을 예비군 훈련을 다녀오느라 구현할 시간이 이틀 정도였기 때문

 

그래서 이번 미션에서의 목표를 기능 구현으로만 잡았다. 테스트까지 작성하는 것은 과감하게 포기했다.

이번 step2의 미션은 자주 가는 음식점으로, step1에서 추가된 기능으로는

• 음식점 상세 정보를 확인할 수 있다.
  • 카테고리, 이름, 거리, 설명, 참고 링크를 확인할 수 있다.
  • 음식점을 삭제할 수 있다.
• 자주 가는 음식점을 추가하고 목록으로 확인할 수 있다.
  • 음식점 목록에서 자주 가는 음식점을 추가할 수 있다.
  • 음식점 상세 정보에서 자주 가는 음식점으로 추가할 수 있다.
  • 자주 가는 음식점 탭에서 추가한 음식점 목록을 확인할 수 있다.
• 새로고침해도 추가한 정보들이 유지되어야 한다.

등록한 음식점에 대한 상세 모달을 띄워야하고, 자주 가는 음식점 기능과 리스트로 보여주는 기능이다.

 

step2에서 고민한 내용

별 이미지 동기화 문제

 

모달 내에서 별 버튼을 눌렀을 때, 모달 내의 상태도 변해야하지만, 모달 외부의 리스트에도 별 상태가 변해야하고, 자주 가는 리스트에도 상태가 변해야한다.

 

이게 생각보다 쉽지 않았다. 컴포넌트 인스턴스 내에서 상태를 변화시키는 것은 간단하지만, 다른 인스턴스로 상태를 전달해주는 방법이 어려웠다. 결국은 또 커스텀 이벤트를 생성해서, 상태가 변했을 때 다른 별의 상태도 변화시키는 방식으로 구현했지만, 뭔가 다른 방법이 있었을까..? step2를 마무리하면서도 이 문제는 해결하지 못했다.

 

컴포넌트의 관심사 분리

 

구현에만 초점을 맞추다보니 앱 컴포넌트가 너무 많은 일을 담당하고 있었다.

앱에서 맛집 등록, 필터링, 맛집 삭제, 탭 이벤트 여러 일을 담당하다보니 app.ts가 맡는 일을 줄였으면 한다는 피드백을 받았고, 각 컴포넌트로 책임을 옮기게 되었다.

리스트 컴포넌트에서 맛집 추가, 삭제, 필터링 컴포넌트에서 필터링, 탭에서 탭 전환 이벤트들을 넣으니, 확실히 app 컴포넌트가 깔끔해진 모습이다. 기존에는 커스텀 이벤트를 발생시켜서 앱에서 받아서 처리했다면, 각 컴포넌트 내로 기능을 이동시키니 커스텀 이벤트를 발생시킬 필요도 없었다.

컴포넌트의 관심사 분리,, 개발하면서 꼭 신경써야 할 내용인 것 같다.

 

 

Level1이 종료된 지금 드는 생각은 이번 점뭐먹이 제일 어려웠던 미션인 것 같았다.

step1 때도 처음 컴포넌트로 분리하다보니 오는 시행착오가 많았고.. step2 에서는 동기화 문제 이것이 정말 괴롭혔고, 컴포넌트의 책임에 대해서 고민하고 리팩토링하느라 정말 애를 많이 먹었던 것 같다.

하지만 어려울수록 나에게 더 다가오는 법!

 

[2단계 - 자주 가는 음식점] 쿠키(김진호) 미션 제출합니다. by jinhokim98 · Pull Request #162 · woowacourse/javascript-lunch (github.com)

[2단계 - 자주 가는 음식점] 쿠키(김진호) 미션 제출합니다. by jinhokim98 · Pull Request #162 · woowacourse/