우테코 생활기 - level 2 - 미션1

방학이 끝난지 얼마지나지 않은 것 같은데 벌써 우테코 레벨2의 미션1이 끝났다.
사실 이번 미션부터 리액트를 배우며 이를 활용하여 어플리케이션을 구현한다.

리액트 경험은 학교 수업에서 배운게 전부여서, ''미션을 제대로 진행할 수 있을까?'라는 걱정이 들었다.

방학중에 리액트 공식문서를 읽어보며 레벨2의 대비를 했다.

하지만 첫 미션부터 쉽지 않았다...

페이먼츠 1단계

역시 레벨2 첫 날부터 바로 미션이 시작되었다. 이번 미션의 페어는 '헤일리'로 실제 대화를 많이 해본 적은 없었지만 레벨1부터 빠르게 미션을 구현해 PR을 보내는 것을 알고 있었다. 그나마 헤일리는 리액트를 어느정도 알고 있었기 때문에 그나마 안심을 할 수 있었다.

나도 못하는데 같은 페어도 리액트 경험이 없었다면 미션 진행이 쉽지 않았을 거라 생각한다.

이번 미션은 리액트 컴포넌트를 학습하고, StroyBook을 활용하여 컴포넌트를 테스트 하는 것이 이번 미션 1단계의 주요 학습 목표였다.

피그마를 통해 UI를 살펴보니 것 보기에는 생각보다 구현해야 할 기능이 많지는 않아 보였다. 하지만 이건 어디까지나 리액트 경험이 적은 나의 견해였다.

미션을 받고 어떻게 컴포넌트를 분리해야 할지 고민했다. 컴포넌트의 분리는 레벨1에서 어느정도 감을 잡았다고 생각해었다. 실제로도 컴포넌트를 어떻게 분리해야 할지 보였다.

그래서 다음과 같은 방식으로 컴포넌트를 분리하자고 헤일리에게 제안했다. 처음에는 의견이 갈렸다.

카드 번호, 카드 유효기간, 소유자 이름을 입력하는 각각의 inputField가 있었다. 이 각각의 intField에는 입력해야하는 정보마다 input컴포넌트의 개수가 달랐다. 나는 이 문제를 하나의 공통된 inputField 컴포넌트에 상수로 선언된 inputField을 만들기 위한 정보를 넘겨주어 각각의 inputFiled를 만들었다. 그리고 페어인 '헤일리'는 각각의 inputField를 만들자는 의견을 내주었다. 결국 나의 설득으로 하나의 inputField를 만드는 방식으로 진행하였다.

그리고 나는 step1 수정에서 헤일리의 방식으로 바꾸게 된다.....

그리고 UI를 구현하기 위해 CSS를 어떻게 적용해야 할지 의견을 나누었다. 난 CSS와 부트스트랩만 사용해본 경험이 있어 이 부분은 전적으로 헤일리의 의견을 따랐다.

이번 미션에서는 styled-components를 사용했다.

styled-components는 CSS-inJS 라이브러리 중 하나로, 자바스크립트 파일 내부에 스타일을 작성한다.

또한 큰 특징으로 props를 기반으로 하는 동적스타일을 지원한다는 것이다.

또한 StoryBook을 이용한 테스트 방법도 알게 되었다. 지금까지는 사전에 기능이 정상 작동하는지 전체적인 테스트를 '기능' 중심으로 작성하는 것이였다면 StoryBook은 '디자인' 중점으로 테스트 하는 것이였다. 물론 jest와 결합하여 테스트도 가능했다.

마지막으로 상태관리는 카드 번호, 카드 유효기간, 소유자 이름을 하나의 객체로 useState를 통해 관리하는 방식으로 진행했다.

step1피드백 수정

https://github.com/woowacourse/react-payments/pull/336

이번 step1 피드백에서 주요하게 집중했던 수정 사항은 컴포넌트의 분리였다. 이전에는 '재사용 가능한 input컴포넌트'라는 것에만 초첨을 맞춘 나머지, 카드 번호, 카드 유효기간, 소유자 이름이 모두 같은 input을 사용하고 있었다. 이에 대한 피드백으로 inputField가 막힌 느낌이 든다고 했다.

그래서 리뷰어의 도움과 헤일리가 말해주었던 의견을 떠올리며 각각에 대응하는 컴포넌트를 작성하고 inputField를 추상화하여 사용하였다.

페이먼츠 2단계

step1이 마무리 되었고 이제 step2가 시작되었다. 이제 나 혼자서 미션을 수행해야 한다. step2의 학습 목표는 다양한 Form 구성 요소들은 어떻게 관리해야 하는지 hooks API를 이용해서 상태관리 로직을 구현하고 커스텀 훅을 생성하여 form관리 로직을 컴포넌트에서 분리하고 재사용하는 것이다.

당연 걱정이 많았다. 제대로 사용하는 것은 useState가 고작이였고, 이미 step1부터 커스텀 훅을 적용하는 크루들도 있으니 나도 모르게 조급함도 느껴졌다.

근데 못하는 것을 어쪄나?

걍 할거 해야지

그리고 우테코에서 가장 지친 한 주가 되었다.

Step2 기능 자체를 구현하는 것은 시간이 걸리긴 했지만 큰 문제가 생기지는 않았다. 문제는 역시 커스텀 훅 부분이였다. 다만 step2 기능 구현을 진행하면서 적용하기가 쉽지 않았다. 그래서 일단 기능 요구사항을 빠르게 완성하고 리뷰 요청을 보냈다.

그러는 사이에 나는 다른 크루들의 코드를 살펴보았다. 다른 크루들의 구현 방식을 보니 이제야 커스텀 훅을 어떤 방식으로 구현해야 할지 감을 잡을 수 있었다.

step2 피드백 수정

https://github.com/woowacourse/react-payments/pull/381

실제 피드백을 받았을 때는

'내가 생각해도 너무한데?' 싶었다

리뷰어가 아니라 자신에 대한 문제였다.

단순히 기능 구현에 신경쓴 나머지 여러 리펙토링 부분에서 신경쓰지 못하고 그대로 제출한 것이 아쉬웠다.

어쨋든 useRef를 이용한 오토 포커스를 구현하는 방식부터 타입 선언 방식까지 리뷰어에게 다양한 피드백을 받았다.
리뷰어 '지그' 덕분에 스스로도 놓친 부분을 확인할 수 있었다.

처음부터 많은 양의 피드백을 받았고, 그에 대한 학습도 했어야 해서 주말동안은 어떻게 커스텀 훅 구조를 작성해야할지 고민했다.

상태를 변경하는 로직을 커스텀 훅으로 분리하여 상태값, 에러메세지 변경, 상태값 변경등을 반환하게 만들었다. 이렇게 분리하니 UI와 상태를 변경하는 로직이 분리되어 가독성이 좋아지고 프로그램 요구사항도 충족할 수 있었다.

미션 1을 마무리하며

이번 미션은 거의 최초로 미션 2 step1을 제출했음에도 미션2 step2가 머지되지 않은 미션이 었다. 그만큼 코드 전체적인 수정이 이루어졌고 미션을 동시에 진행하면서 수면을 시간을 줄여가며 진행해 체력적으로 힘들었었다.

하지만 이런 경험을 미션1에서 할 수 있어서 다행이였다. 그 덕분에 리액트 기본에 대해 확실히 생각해보고 다음 미션으로 넘어갈 수 있었다.

물론 머지가 되었지만 아직 수정해야 할 부분이 많다고 생각한다. 그럼에도 처음부터 강하게 미션을 진행하니 오히려 이번 레벨2 동안 힘내서 공부할 원동력을 얻은 것 같다.

이번 미션은 전적으로 리뷰어인 '지그'의 꼼꼼함 덕분에 더 발전할 수 있었다.

그리고 마지막으로 '지그'의 응원도 정말 감사했다.

앞으로도 지금까지와 같이 열심히 발전해서 좋은 모습으로 있어야 겠다.