벌써 레벨 2가 끝이 났다. 처음에는 매 미션이 끝났을 때마다 회고를 작성할 계획이었으나 연속된 미션이로 인해 계속 미뤄지다 보니 결국 방학때까지 미루어지게 되었다.
더 늦기 전에 각 미션마다 느꼇던 점을 정리하고자 한다.
페이먼츠 1단계
미션요구사항을 읽어 보았을때 당혹스러웠다. 지금까지 필요한 기능이 있을 때 bootstrap등의 라이브러리를 설치하여 구현하는 방식을 사용했었다. 이번 미션은 직접 라이브러리를 만들어 배포하는 경험은 처음이였다.
배포를 어떻게 진행해야하나 고민했다. 다행히 수업을 통해 간단한 라이브러리를 배포해보는 실습을 경험해 보았다. 생각보다 배포하는 방식이 간단해서 누구나 쉽게 자신의 라이브러리를 배포할 수 있다는 생각이 들었다.
미션에서 구현했던 라이브러리의 종류는 총 2가지였다.
모달 컴포넌트와 미션 1에서 구현했던 페이먼츠 커스텀 훅이였다.
모달 컴포넌트는 어렵지 않게 구현할 수 있었다. 이미 이전 미션에서 구현했던 모달을 좀 더 범용성 있게 구현하는 것이 전부이기 때문이다.
step1에서는 Modal 컴포넌트에 컴포넌트 UI를 결정할 수 있는 모든 props를 받는 방식으로 구현했다.
어렵지 않게 페이먼츠 미션을 구현한고 배포할 수 없었다.
문제는 페이먼츠 커스텀 훅의 구현이였다. 이전 페이먼츠 미션에서 유효성 검사 로직을 커스텀 훅으로 분리하여 필요에 따라 조합할 수 있게 하도록 코드를 작성해야 했다. 처음에는 커스텀 훅에 유효성 검사를 하는 로직만 있는 것이 맞는가? 아니면 각각의 유효성 검사를 하는 값의 상태도 관리를 해야하는지 의견이 분분했다. 페어와 상의를 통해 유효성 검사를 하는 로직만을 두었다. 그때 당시에는 미션의 요구사항이 유효성 검사에 대한 커스텀 훅이라고 생각했고, 불필요한 상태를 관리하는 것을 맞지 않다고 생각했기 때문이다. 지금도 그 생각이 변하지 않았다. 하지만 만약 직접 다른 사용자와 다양한 프로젝트에서 범용적으로 사용하기 위해 커스텀 훅을 제작한다면, 유효성 검사의 대상이 되는 상태 또한 같이 관리하는 방식을 이용할 것이다.
결국 이러한 커스텀 훅이 필요한 것은 페이먼츠의 여러 정보들을 편하게 관리하기 위한 것이다. 이때 유효성 검사와 상태를 관리하는 훅을 분리하게 된다면, 구현에 있어 더 복잡할 수 있다는 생각이 들었다.
다만 이번 미션의 목표는 유효성 검사 훅으로 카드 정보에 대한 검사 결과와 에러 정보를 개발자에게 제공하는 것이다.
그래서 나와 페어는 이것에 집중하고자 했다.
https://github.com/woowacourse/react-modules/pull/7
페이먼츠 2단계
step2 미션은 추가로 기능을 구현하는 것 보다는 step1을 refactoring하여 더 발전시키는 것이였다. 모달 컴포넌트는 PC환경에도 대응되게, 다양한 모달의 종류를 구현할 수 있어야했다. step1에서 모달에 대한 여러 UI/UX에 대한 설정을 전부 Modal 컴포넌트의 props로 넘겨주는 방식을 사용했다.
이런 방식을 사용하니 추가적인 요구사항에 대한 반영이 쉽지 않았다. 이유는 하나의 컴포넌트가 너무 많은 일을 담당하고 있어서라는 판단이 되었다. 이것을 어떻게 해결할 수 있을까? 고민하던 차, 다른 크루가 합성 컴포넌트를 사용해보는 것을 제안했다. 합성 컴포넌트를 처음 듣게 되어 몇가지 예시를 찾아보았다.
합성 컴포넌트는 각각의 모달의 요소에 해당하는 컴포넌트를 제공하여 사용자가 직접 조립하여 사용하는 방식이였다. 실제로 이와같은 방식으로 구현하여 배포된 라이브러리도 있었다. 확실히 이를 적용하면 각각의 컴포넌트에 책임이 있어 추가된 요구사항에 유연하게 대처할 수 있었다.
다만 고민이 있었다.
합성 컴포넌트를 사용할 경우, 모달을 이용하기 위해서는 각각의 요소에 해당하는 컴포넌트를 조립하여 사용해야 한다. 이는 사용성이 떨어진다고 생각했다. 이런 고민을 하다, 리뷰어 피드백으로 각각의 컴포넌트를 배포하는 것과 별개로 모달 템플릿을 제공하여 쉽게 사용할 수 도 있는 옵션을 제공하여 이를 해결 할 수 있었다.
페이먼츠 커스텀 훅의 경우, 다양한 카드사를 식별하고 이에 대한 유효성 검사를 하는 기능, 카드 번호 포맷팅 기능이 추가되었다. 커스텀 훅은 기능 구현에 대한 내용만 있어서 어렵지 않게 해결할 수 있었다.
여기서 고민했던 점은 과연 이 커스텀 훅을 미션 1 페이먼츠에 적용할 수 있을지 고민했다. 이를 확인하기 위해 미션1에 새로운 브랜치를 생성하여 배포한 커스텀 훅으로 변경하는 작업을 진행하였다. 이 과정을 거치면서 라이브러리 사용자 입장에서 어떻게 쉽게 적용할 수 있을지, 어떤 점이 사용할 때 문제가 발생할 수 있는지, 고민하고 수정하게 되었다.
또한 RTL을 통해 실제 리액트 훅을 테스트하면서 빠르게 구현한 기능이 정상 작동하는지 확인할 수 있었다.
https://github.com/woowacourse/react-modules/pull/51
전체적인 미션에 대한 감상
모듈 미션은 개인적으로 제대로 즐기지 못했던 것 같다. 지금까지의 미션은 결과물의 예시를 보여주고 이를 구현하는 것인데 모듈 미션 요구사항이 자세하지 않고 구현하는 사람의 자의적으로 해석하여 구현해야하는 점에서 동기부여가 크게 되지 못했었다. 하지만 npm에 라이브러리를 배포해보는 경험을 해보는 것은 색다른 경험이였다. 누군가가 내가 작성한 기능을 이용할 수 있다는 점이 실제 사용자에 입장에서 구현을 고민해 보는 경험을 하였다.
추가적인 있었던 일
지금까지 일렉 기타를 치면서 혼자만 연습해왔는데 안드로이드 크루원들과 합주를 했다. 처음에는 같이 해보자는 권유에 당황스러웠으나, 합주할 수 있는 기회는 흔하지 않기 때문에 바로 참여했다. 보통 기타는 경쟁이 치열한데 하필 기타가 부족했다는 것이 운이 좋았다. 첫 합주에는 하연상의 등대와 너드커넥션의 항성통신을 연주하게 되었다.
지금까지 연습하면서 내 마은대로 속도를 조절하면서, 틀리면 다시 처음부터 연주를 했다. 하지만 합주는 내가 틀리더라도 끝까지 곡을 끝내야하고 다른 인원들과 속도를 맞추어야 하는 것이 정말 어렵다는 것을 느꼈다. 더욱 연습이 필요하다는 것을 느꼈다. 나의 기타 인생에 새로운 자극이 생겨 즐거웠다.
리액트 스터디를 진행하면서 다시 한번 리액트 공식문서를 읽어보게 되었다. 방학 때 읽으면서 놓쳤던 내용이나 잘 이해가 되지 않는 내용을 다시 한번 짚고 넘어갔다.
