이때 당시에는 정신없이 시간이 지나간 것 같다. 제대로 무엇인가를 이룬 것 같지 않았는데 레벨 2의 절반이 지나갔다는 것이 아쉽게 느껴졌었다. 그래도 할 수 있는 것에는 최선을 다하자라고 생각했다.
장바구니 1단계
미션 1을 구현하면서 상태관리의 어려움을 느낄 수 있었다. 상태를 변경하기 위해 setter함수를 props로 넘겨주어야 했다. 이때 깊이가 깊어질수록 상태의 추척이 쉽지 않았고, 다양한 상태를 props로 넘겨주다 보니 가독성 측면에도 좋지 않았다.
그래서 이번 상태관리 라이브러리를 이용한 미션이 기대가 되었다.
과연 어떤 상태관리 라이브러리를 사용할지, 어떤 효과를 얻을 수 있을지 궁금했던 차, 이번 미션에서는 Recoil이라는 상태관리 라이브러리를 이용하라는 요구사항이 있었다. 왜 여러 상태 관리 라이브러리 중 Recoil인지 물어보았다.
코치분께서는 Recoil은 리액트를 만든 페이스 북에서 제작한 라이브러리로 상태관리를 리액트 훅과 같이 사용할 수 있어서
친숙하게 적응할 수 있을거라는 말씀을 해주셨다. 수업을 들으며 recoil의 예시를 직접 코드로 작성해보며 상태를 훨씬 간편하게 관리할 수 있었다.
미션 시작하기 전, 우테코에서 유연성 강화를 위해 스터디가 마련되어 있다. 이 유연성 강화 스터디에서 크루원 한분이 미션을 더욱 의미있게 진행하기 위해 미션 시작, 전, 후에 몇가지 설문을 만들어 점검할 수 있는 표를 만들었다.
표를 통해 본격적으로 미션 시작 전에 미션에서 무엇을 얻어갈지, 이루고 싶은게 무엇인지, 코치들이 미션을 설계한 의도가 무엇인지 생각해보게 되었다.
나는 이번 미션을 통해 상태관리 라이브러리를 왜 쓰는 것인지 느껴보고 싶었다. 또한 데이터 중복없이 상태관리를 하고 싶었다.
그리고 새로운 기술을 빠르게 습득하고 이를 적용해보는 사이클을 효율적으로 체화하고 싶었다.
미션을 시작했다. 기능 명세서를 작성하고 어떤 방식으로 구현을 시작해야할지 페어와 의논했다. 수업에서 코치분이 큰 문제를 작은 단위로 쪼개어 생각하기, 가장 작은 0.01ver부터 구현하는 방식을 설명했다. 이것을 반영하여 가장 작은 단위부터 만들고자 했다. 처음에는 API통신을 통해 장바구니 목록을 가져오는 것을 시작으로 이를 Recoil을 통해 상태 관리 각각의 상품 수량을 관리하는 상태를 만드는 순서로 진행하였다.
코치에 말대로 작은 버전부터 구현하니 어렵지 않고 빠르게 기능을 구현할 수 있었다. 하지만 테스트 작성에 어랴움이 있었다.
실제 API 통신을 어떻게 테스트해야할지 고민을 했지만 결국 해결하지 못했다. 다만 이 부분은 다음 미션에서 해결할 수 있었다.
이번 미션은 만족하면서 미션을 진행했다. 소가의 목표였던 적절한 상태 관리를 Recoil을 통해 한발짝 다가갈 수 있었다.
실제 사용자에 의해 변화할 수 있는 상태가 무엇인지를 고민 했고 최소한의 데이터를 관리하는 것이 중요하다고 생각했다.
https://github.com/woowacourse/react-shopping-cart/pull/266
장바구니 2단계
이번에도 시작전에 표를 보고 질문에 대한 답을 작성했다.
이번 미션은 Recoil를 이용해 복잡한 파생상태를 관리하고 부족했던 RTL을 추가하는 것이 목표로 세웠다.
이번 미션 요구사항을 처음 보았을 때는 다양한 쿠폰 종류와 할인의 유형 그리고 적용 조건 때문에 이것을 어떻게 구현해야할지 고민이 되었다.
다행히 수업을 통해 어떤 방식으로 진행하면 될지 인사이트를 얻을 수 있어서 쿠폰 적용 조건의 구현에 대해 생각할 수 있었다.
최대한 작은 단위부터 시작하고자 했다. 이를 위해 TDD적 사고방식을 계속 가질려고 되뇌었다. 일단 API통신을 통해 쿠폰을 목록을 가져오는 것부터 구현했다. 그 다음으로 각 쿠폰이 적용가능한지 validate를 구현해 커스텀 훅으로 만들었다.
이런 방식으로 순차적으로 구현의 크기를 키워나갔다.
그리고 모달이 필요로하는 경우가 있었다. 이는 이전에 미션2에서 배포했던 커스텀 모달을 사용하여 손 쉽게 구현할 수 있었다.
또한 상태관리를 하면서 컴포넌트의 재사용에 대해 고민했다.
전역적으로 상태를 관리하면서 어디서든지 상태를 변경, 사용할 수 있어서 편리했다.하지만 사용할 수록 컴포넌트가 상태에 의존적으로 변경되는 문제를 겪었습니다. 이것을 해결하기 위해 추상화에 집착하지 않고 컴포넌트를 분리해서 구현하는 것이 재렌더링에 이점이 있었기 때문에 이와같이 구현했다.
내가 직접 구현하고 배포한 라이브러리를 사용하여 간편하게 구현할 수 있는 점이 도움이 되었다. 단순히 불특정 다수를 위한 것이 아니라 팀에서 일정한 포맷을 갖추어 개발하고자 할 때 유용하게 사용할 수 있음을 느꼈다.
또한 Recoil을 이용해 구현하면서 라이브러리의 선택도 중요하다고 생각이 들었다. Recoil은 아직 ver1도 나오지 못한 라이브러리이다. 페이스 북에서 담당하여 버전이 올라가고 있지만 매우 느리게 버전 업데이트가 되고 있다. 이 때문에 Recoil의 특정 기능을 사용하려고 해도 위험성을 내포하고 있다는 경고가 있는 경우가 있었다. 이 경험을 통해 레벨 3에서 라이브러리를 선택할 때 안정성 또한 중요한 요건이 될 수 있다는 생각이 들었다.
다만 아직까지 RTL을 이용했지만 무엇인가 부족한 느낌을 받았다. 여러 상태를 테스트했지만 다양한 상태를 관리에 대한 테스트를 진행해야했기 때문에 테스트 코드 자체가 지저분하다는 느낌을 받았다. 또한 API통신에 대한 테스트는 진행하지 못했다.
이부분은 다음 미션에서 요구사항에 있고, 내용을 제공할 것이기 때문에 해결할 수 있을 것이라고 해서 그나마 안심이였다.
https://github.com/woowacourse/react-shopping-cart/pull/302
그외 있었던 일
여전히 합주 활동을 진행하고 있다. 한달에 한번정도 진행한다. 이번에는 유다빈 밴드 - LETTER와 YB - 흰수염 고래로 정해졌다. 합주는 여전히 어렵다고 느껴졌다. 연습을 했지만 아직까지 솔로를 합주에서 깔끔하게 진행하는 것은 살짝 힘들었다.😓
그래도 여렵기 때문에 더 몰입하면서 참여할 수 있었고 합주의 매력을 다시 한번 느낀 것 같다.
