[우아한테크코스 FE 5기]레벨2 두번째 미션 페이먼츠(2-4주차) 회고

레벨2 두번째 미션 페이먼츠(2-4주차)

늦은 감이 있지만 두 번째 미션에 대한 회고글을 작성해 볼까 합니다.

 

두 번째 미션을 진행하며 발표 준비 및 발표를 병행해야 했습니다. 싱글스레드인 뇌를 가진 제게는 너무나 벅찬 일이었습니다😇 발표는 준비한 대로 진행하지 못해 아쉬웠고, 발표가 끝나고 나서야 미션을 진행할 수 있었습니다. 시간에 쫓겨 진행한 결과는 아주 참담..

 

발표를 마치고 잔뜩 느슨해져 있던 저는 리뷰로 호되게 혼이 났습니다.😭 정신이 차리고 이후 미션에 최선을 다해 임했습니다.. 결국 소홀했던 부분을 다 메울 순 없었지만요🥲

 

페이먼츠

---

CDD(Component-Driven Development)

기존에 습관이 되어있던 탑다운 개발 방식을 버리고, 바텀-업 방식인 컴포넌트 주도 개발 방식으로 미션을 진행하기 위해 노력했습니다. 많은 것들이 제게 처음이지만 CDD도 그중 하나였기 때문에 평소 개발하는 속도보다 현저히 느려져서 step1 미션 제출 당시 마감을 지키지 못할까봐 진땀을 뺐습니다.🥲

 

CDD를 위해 사용한 툴은 스토리북이었습니다!

 

@storybook/cli - Storybook

 

부족하지만 스토리북을 배포해보았습니다.😄 미션을 진행하며 스토리북을 처음 사용해 보았는데요. 스토리북을 사용하며 이 툴은 더 잘 써보고 싶다는 생각을 하게 됐습니다.

 

CDD로 개발을 할 때 도움이 되는 것은 물론이고, 컴포넌트의 문서화에 효과적임을 경험했기 때문입니다. 아직 스토리북을 잘 사용하는 것에 미숙하지만, 앞으로도 storybook 사용을 통해 문서화를 해나가야겠습니다.

커스텀 훅

기본 제공 훅을 사용하는 것도 익숙지 않은데, 커스텀 훅까지 분리해 내려니 아주 힘들었습니다. 아직 ‘이 부분은 커스텀 훅으로 빼야겠다’하는 느낌은 바로바로 들지는 않지만, 그래도 여태까지 해왔던 것처럼 함수를 분리하듯 분리해 내는 느낌으로 어찌어찌해나가고는 있는 것 같습니다. 조금 더 경험이 쌓이다 보면 자연스럽게 해낼 수 있지 않을까요..?

context API

카드를 등록하는 애플리케이션을 구현하는 이번 미션에서는 카드 등록 페이지 - 카드 별명 등록 페이지, 총 두 페이지에 걸쳐 카드를 등록하게 되었었는데요. 이때, props로 카드의 정보를 넘겨주지 않고 context API를 사용하여 손쉽게 카드에 대한 정보를 전역적으로 관리하게 되어 카드 별명 등록 페이지에서 카드의 정보에 접근할 수 있었습니다.

또한 모달을 여닫는 기능도 props drilling이 일어나게 되어 마찬가지로 context API를 사용했었는데요. 모달 라이브러리의 배포를 하게 되면서, 모달의 재사용성을 생각해 봤을 때 context API를 사용하는 것이 썩 좋지는 않은 방법이라 생각했습니다. 때문에 현재 모달은 props를 이용하여 여닫는 형태로 원상 복구한 상태입니다.

모달 라이브러리 배포

재사용 가능한 모달을 생성하여 라이브러리로 배포하는 절차를 진행해 봤습니다.

 

 

GitHub - regularPark/sample-modal-rego: 우아한테크코스 npm publish 연습용 리액트 모달 컴포넌트입니다.

 

woowacourse-rego-modal

처음 해 본 것들 중 하나로 라이브러리 배포를 꼽을 수 있겠는데요. 배포 자체는 크게 어렵지는 않았습니다. 해당 부분에 대해서 신경을 깊이 쓰지는 못해서 라이브러리 제작 및 배포 경험을 얻은 정도로 볼 수 있을 것 같아요. 라이브러리 배포에는 관심이 크게 없었던 부분이기도 했어서, ‘아 이런 식으로 배포를 하는구나..’ 정도를 알아가는 시간이었던 것 같습니다.

 

마치며

매주 포스팅을 하는 것은 힘들지만 그래도 미션이 끝날때마다 회고글을 포스팅하도록 해야겠습니다. 매일 회고하는 습관을 가진다면 더 회고글을 매끄럽게 쓸 수 있지 않았을까하는 생각이 드네요.🤔 게을렀던 저를 반성하며 이만 글 줄입니다.