블랙카드 하나 만드실래요?
이번 미션은 페이먼츠 미션, 카드사, 카드 이름, 번호 등을 입력해 카드를 등록할 수 있는 카드사 등록 화면을 구현해 보는 것이 목표였습니다. 은근 디자인에 시간을 많이 쏟은 미션이에요!
이번 미션에서 배워 본 것들
CSS Module
저는 원래부터 꾸미는 것을 좋아했고, 그에 따라 css도 자연스럽게 좋아했지만, 여러 번 사용해 본 만큼 불편한 점도 많이 느꼈습니다. 그 중에는 역시 css 파일을 여러 개 사용할 경우 속성이 겹칠 수 있는 문제와, css 클래스와 아이디 이름 짓는 것이 굉장히 힘들었다는 점이 있었습니다.
이번 미션에서 페어인 고니가 css module을 추천해 주셔서 사용했는데, 정말 유용했습니다. css module을 사용하면서 아래의 이점을 챙길 수 있었습니다.
- css module을 사용하면 모듈 하나로 사용 범위를 줄일 수 있기에
- 여러 파일에서 사용된 css 속성이 서로 겹쳐서 오작동 할 일이 줄어들고
- 자연스럽게 여러 파일에서 사용되는 클래스가 겹칠 일이 줄어들기에 불필요하게 이름을 길게 지을 필요가 없어집니다
css module은 CRA로 React 프로젝트를 만들었다면, 기본으로 설정되어 있기에 별도의 추가 설정 없이 파일명만 module.css로 끝나게 하도록 작성하면 사용할 수 있습니다. 예를 들면, MyInput.module.css 와 같이요!
레벨 1 때 BEM 방법론을 보면서 엄청나게 어려운 네이밍에 충격을 먹곤 했는데... css module을 사용하면서 네이밍도 간단하게 지을 수 있었고 실수도 줄일 수 있었습니다.
css module 외에 스타일을 동적으로 관리하는 데 특화된 styled-components 도 있다고 들었는데, 이것도 사용해 보고 싶네요!
Context API
Context API는 React에서 데이터를 전역으로 공유하기 위해 사용할 수 있는 React의 기능입니다. 꼭 최상단으로만 공유할 필요는 없고, 용도에 따라 어느 depth에서 데이터를 사용할 것인지를 정할 수 있습니다.
레벨 1 세 번째 미션부터 prop drilling 을 꼭 해결해 보고 싶었습니다. 실제로 그 값을 사용하지도 않을 거면서, 의미없이 인자로 받고 부모에게 넘기는 행동만 반복하거든요. depth가 너무 높아지는 상황에서는 코드의 가독성을 떨어뜨리고 유지보수하기가 힘들어지겠죠.
Context API를 사용하면, 여러 단계 떨어진 자식 컴포넌트에서도 즉시 데이터에 접근할 수 있게 되어 여러 계층에 걸쳐 데이터를 부모로 보내주는 수고를 덜 수 있습니다 (다만 Context API의 존재이유가 무조건 prop drilling을 해결하기 위한 것뿐은 아닙니다!)
미션을 진행하면서 여러 페이지에 걸쳐 데이터를 관리하게 될 등록중인 카드 정보, 그리고 어디서든 모달을 사용할 수 있도록 모달 관련 함수를 Context API에 등록하여 관리했습니다.
Context API를 사용하면서, prop drilling을 많이 줄일 수 있었고, 반복되는 코드들도 많이 줄일 수 있었습니다! 그렇지만 한편으로는 Context API를 사용하기 위한 데이터를 선언하고 Provider를 설정해 주는 것이 어려웠고, 코드도 길었습니다. 또한, Context API를 사용하는 컴포넌트들은 Context API의 값이 업데이트될 경우 모두 리랜더링 되기 때문에, 랜더링 최적화를 관리하는 것이 어려웠습니다. 상황을 고려하여 prop drilling을 그대로 사용할 지, Context API를 사용할 지 신중하게 결정해야 할 것 같습니다. 또한, 관리해야 하는 값들이 너무 한 곳에 몰려 있었는데, 어떻게 하면 나눌 수 있을지도 고려해 보아야 할 것 같습니다!
Storybook
스토리북은 컴포넌트와 UI와 관련된 다기능 라이브러리인데, 제가 알고 있는 기능들은 이렇습니다.
1. 컴포넌트들을 독립적으로 테스트해 볼 수 있습니다.
컴포넌트가 제대로 랜더링되는지, 제대로 작동하는지 확인하기 위해서는 직접 프로젝트 내부의 이미 구현된 컴포넌트에 끼워넣어야 하는데, 이게 은근 불편합니다. 스토리북을 사용하면 컴포넌트를 프로젝트에 넣기에 앞서 그 컴포넌트의 랜더링 결과를 알 수 있고, 파라미터 값들을 자유롭게 조작해 보면서 테스트해 볼 수 있습니다!
TDD와 같이, 자신이 작성한 코드에 대한 빠른 피드백을 얻을 수 있죠. Cypress와 같이 직접 시나리오를 작성해 특정 인풋에 값을 입력해 보거나 버튼을 클릭하는 등 상호작용 테스트도 자동으로 해 볼 수도 있습니다.
2. 컴포넌트에 대한 문서를 손쉽게 작성할 수 있습니다.
제 코드를 읽는 다른 팀원들, 특히 React로 구현된 컴포넌트 코드를 읽을 줄 모르는 디자이너, 백엔드 개발자 등의 다른 직군에 종사하시는 분들에게 이 컴포넌트를 설명해야 할 텐데, 스토리북을 사용하면 큰 노력을 들이지 않고 가능합니다. autodocs만 켜두면, 자동으로 문서가 생성됩니다!
이거 짱 좋은데요...?
스토리북을 사용해 본 소감으로는, 굉장히 유용하고 편리해서 앞으로 미션에서 필수로 사용하라는 제약 조건을 두지 않더라도 사용하고 싶다는 생각이 들었습니다.
Jest, Cypress 역시 유용한 것은 맞지만 효과 대비 노력이 너무 많이 들어가고, 오히려 테스트 코드를 짜면서 테스트 코드가 발목을 잡은 적이 정말 많았는데, Storybook은 코드가 비교적 간단하고 비슷해 한 번만 작성해 주면 비슷한 코드를 복사하는 것을 반복하면서 쉽게 사용할 수 있었는데다 컴포넌트를 직접 프로젝트에 넣지 않고도 독립적으로 테스트해 볼 수 있었던 점이 굉장히 편리했습니다.
페이먼츠 미션을 마치며
시간에 쫓기는 상황 속에서 무엇을 해 보았는지, 무엇을 해 보지 못했는지
이번 미션은 정말 시간에 쫓기듯이 진행했던 것 같습니다. 디자인과 기능에 신경 쓰다 보니 그만큼 피드백에 투자할 수 있는 시간은 적었고, 학습로그 글은 적지도 못 해 벌써 글이 두 개나 밀려버린 상태입니다.
정말 꼼꼼하게 피드백해주시는 리뷰어인 포코였기에, 더더욱 열심히 해 보고 싶었지만... 미션은 갈 수록 밀렸습니다.
- 가면 갈수록 공식문서를 제대로 읽지 않았고
- 리뷰어가 달아주신 코멘트들에 대해 지금까지의 답변 속에서 답을 찾아볼 수도 있었음에도 섣불리 찾지 않고 질문만 했고
- 상당수의 코멘트에 대해 답변을 하지 못했습니다.
물론 이 상황 속에서도 리뷰어와 최대한 상호작용을 하기 위해, 최대한 저의 생각을 솔직하게 적어보는 시도를 했고, 리뷰어가 추천해 준 방법들을 채택하지 않았을 때에도 그냥 사용하지 않은 것이 아닌
- 왜 내가 이 방법들을 사용하지 않았는지
- 사용하지 않았지만 시도해 본 코드들은 어떻게 구현되었는지
를 리뷰어에게 알려주면서 최대한 리뷰어의 생각과 토론을 이끌어내고자 해 보았습니다.
그래도 정말 재미있었습니다
항상 적는 말이긴 하지만... React가 무서워서 제대로 입문도 못 했는데, 3주에 걸쳐서 이런 카드 등록 웹앱을 결국 만들어낼 수 있어서 정말 뿌듯했습니다.
때로는 디자인에 신경쓰다 보니 시간이 많이 지체되곤 했는데, 이것도 제가 제 결과물에 애정을 느끼다 보니 그렇게 된 게 아닌가 싶어요!
이 글을 쓰는 시점, 레벨 1 때의 페어 프로그래밍에서 페어가 남겨준 피드백, 그리고 리뷰어가 남겨주신 피드백을 익명으로 전달받았습니다. 잘했던 점, 개선이 필요한 점들을 읽으니까 속이 후련하더군요.
이제 페어 프로그래밍도 두 번밖에 안 남았습니다. 피드백을 바탕으로 남은 두 번을 어떻게 개선해 볼 수 있을 지 생각해 보아야 겠습니다. 그리고 특히 리뷰어와 서로 코멘트를 주고 받을 때는 꼭 할 수 있는만큼 적극적으로 임해보고자 합니다.
남은 미션도 순조롭게 끝내고, 재밌는 많은 기술들을 얻어갈 수 있었으면 좋겠습니다.
'우아한테크코스' 카테고리의 다른 글
| 우아한테크코스 5기 - Lv. 2 "다시, 점심 뭐먹지" 미션 (3) | 2023.04.24 |
|---|---|
| 우아한테크코스 5기 - Lv. 1 자동차 경주 미션 (0) | 2023.03.24 |
| 온보딩 미션 - 연극 후기 (6) | 2023.02.27 |
| 우아한테크코스 5기 지원 후기 (2) | 2023.01.12 |
| 우아한테크코스 5기 - 최종 코딩테스트, 그리고 결과 (0) | 2023.01.12 |