2021.04.29 데일리 회고

천영석·2021년 4월 29일

Facts

피드백을 모두 반영했다.(2시간)
가상 키보드 기능을 구현했다.(4시간)
커스텀 훅(useModal)을 구현했다.(3시간)

Feelings & Findings

피드백을 모두 반영했다.

리액트로 만들어 본 프로젝트 중에 가장 큰 프로젝트여서 코드 리뷰가 많이 걱정됐었다. 우리는 잘 만들었다고 생각하지만 리뷰어님이 봤을 땐 이상할 것이라고 생각해서이다. 하지만 걱정과 달리 정말 좋은 피드백을 받았다. 바닐라 자바스크립트로 구현을 할 땐 한 번도 받아보지 못한 피드백이다. 2단계를 어떻게 작성하실지 궁금하게 만드는 잘 짜여진 코드였습니다! 코드를 깔끔하고 PropTypes 및 default Props로 안정성도 확보해주셔서 좋았습니다! 이 말에 지금까지 힘들었던 것이 모두 사라졌다. 그리고 꼼꼼하게 PropTypes와 default Props를 모두 체크한 것에 대한 보람이 있었다. 게다가... 코드 자체에는 문제가 없어서 피드백은 온통 color 상수화와 css 쪽이었다. (완.벽!!)

질문했던 재사용성, 상태의 흐름은 지금 프로젝트에 충분히 잘 반영되어 있다는 답변을 받았고, 커스텀 훅도 아직은 필요하지 않다고 하셨다.(이후에 가상 키보드를 도입하면서 useModal 커스텀 훅이 필요하다는 답변을 받았다.)

그래서 color들을 모두 상수화하고, RED_100, RED_300와 같이 tailwindcss방식을 사용해서 컬러의 스펙트럼을 넓혔다. 상수화가 너무 안되어 있어서 시간이 꽤 걸렸다.

css쪽에서는 padding: 0px; 이렇게 0px을 명시한 부분이 있는데, 0px이 아닌 0으로 사용하는 것이 좋다는 피드백을 받았다. 구글링을 해봐도 이유를 잘 알지 못하겠어서 질문을 했고, px가 붙는 건 큰 문제가 아니지만 px가 계속 쌓이게 되면 용량이 늘어나서 0에는 px를 붙이지 않는다는 암묵적인 룰이 있다는 답변을 받았다. 명쾌한 답변을 받아서 너무 기분이 좋았다. 새로운 것을 배웠다.

피드백을 모두 반영하고 머지가 되었고, 머지를 해주시기 전까지 시간이 남아서 가상 키보드를 구현했다.

가상 키보드 기능을 구현했다.

스탭 2를 할 수도 있었지만, context API에 대해 잘 알지 못하기도 하고, 어떤 상황에서 사용해야 하는지 공부를 해야 할 것 같아서 내일 하기로 마음먹었다. 그래서 남은 시간 동안 가상 키보드를 구현했다.

쉬울 것이라고 생각했지만 생각보다 고려해야 할 사항이 많았다.

버튼을 누르면 input에 value를 업데이트
input을 선택하면 실제 키보드가 나오는 것이 아닌 가상 키보드가 나오도록 input 비활성화
가상 키보드가 나오는 곳까지 자동 스크롤
input 입력 완료 시 다음 input으로 자동 focus
input을 모두 입력했을 경우 가상 키보드 종료
input을 다시 클릭하는 경우 입력된 value 모두 삭제

지금 생각나는 건 이정도이다. 하나가 되면 하나가 고장나고... 계속 그래서 시간이 오래걸렸다.

input을 선택하면 실제 키보드가 나오는 것이 아닌 가상 키보드가 나오도록 input 비활성화 이 부분에서 새로운 것을 알았다. attribute 중 disabled를 사용했더니 focus가 무슨 짓을 써도 안돼서 알아보니 readOnly라는 속성이 있었다. readOnly는 disabled와 같지만 focus는 가능하다. 그래서 인풋 커서는 안나타나지만 focus가 되기 때문에 가상 키보드로 value를 추가해줄 수 있다. 가상 키보드에 사용되는 것 같다.

가상 키보드가 나오는 곳까지 자동 스크롤 이 부분은 translateY로 가상 키보드 높이 만큼 내려주었다. 그렇게 하면 화면을 넘어갈 때 스크로링 생기고, element.scrollIntoView를 사용해서 해당 위치까지 내려가게 했다. 한 가지 아쉬운 점은 behavior: 'smooth'를 사용해서 부드럽게 내려갔다가, 부드럽게 사라지게 하고 싶은데 내려가는 건 되지만 부드럽게 사라지는 방법을 찾지 못했다. 모달을 닫을 때, 모달 자체를 없애버리는 것이라서 불가능한 것 같기도 하고... 그래도 분명 방법이 있을텐데 아직 모르겠다.

나머지는 그렇게 어렵지는 않았다. 조금 신기한 것은 가상 키보드를 사용하니까 input에 onChange이벤트가 아닌 onFocus 이벤트를 사용했다. input임에도 불구하고 onChange가 사용될 일이 없어서 이래도 되나? 싶었지만 익숙하지 않을 뿐, 괜찮은 것 같다.

생각해보니 추상화가 조금 어려웠다. 현재 나의 앱에서는 input이 한 개일 땐 type이 string이고, 두 개 이상일 땐 type이 object였다. 그래서 setValue를 하는 부분의 코드가 너무 지저분했고, 어떻게 할 수 없을까? 하다가 string과 object를 아예 나눠서 함수를 만들기로 했다.

추상화라고 할 수 있을지 모르겠지만 만족한다. 코드를 보면 그렇게 길지도 않고, 가독성도 좋다고 생각하기 때문이다. 이럴 때 보면 정말 실력이 많이 향상된 것 같고, 뭐든 할 수 있을 것 같다. 자신감이 생긴다.

커스텀 훅(useModal)을 구현했다.

가상 키보드를 구현했더니 가상 키보드도 모달이고, 카드 선택도 모달이라서 커스텀 훅을 만들어보는 것이 좋을 것 같다는 피드백을 받아서 커스텀 훅 만들기에 돌입했다.

커스텀 훅은 왜 사용해야 하는지 아직 이유를 잘 모르겠어서 정말 어려웠다. 1시간 정도 혼자 고민하다가 도저히 모르겠어서 한 크루의 커스텀 훅을 보면서 생각했다. 결국 만들기는 했지만 이렇게 만드는 것이 맞는지도 모르겠고, 리뷰어님께서 의도한 것이 맞는지도 모르겠다. 코드의 양이 줄어들 것이라는 기대를 했는데 오히려 더 늘어났고, 신경써야 하는 부분이 많아졌다.

하지만 이 부분은 현재 context API를 사용하지 않아서 그런 것 같다. 한 가지 코드를 살펴보면, 카드 번호를 입력 받는 input 컴포넌트에서 이 useModal을 가지고 있고, useModal의 Modal 컴포넌트를 가상 키보드 컴포넌트에게 props로 넘겨준다.

사실 카드 번호 input 컴포넌트에서는 Modal 컴포넌트를 알 필요가 없다. 하지만 가상 키보드 컴포넌트에서 또 useModal을 호출해서 사용하면, 서로가 공유하는 컴포넌트가 다르기 때문에 에러가 발생한다.

이런 경우에 context API를 사용하는 것 같다는 생각이 들었다. useModal 자체를 App에서 공유하고, 필요한 곳에서 필요한 것만 빼서 사용하는 것이다. 내 생각이 맞았으면 좋겠다. 내일 지하철을 타고 가면서 공부를 조금 더 해봐야겠다.

커스텀 훅 만들기는 정말 재미있는 시간이었다.