프로젝트 설명
HIT은 원하는 기기의 리뷰를 확인하고, 본인 전자기기의 사용후기를 작성할 수 있는 서비스입니다.
협업
- FE 5명 | 기여도: 25%
- 사용기술 : Typescript, React, Recoil, React Hook Form, Taliwind CSS
- git 협업방식
- 오늘 작업할 일을 이슈 템플림에 맞춰 적고, 프로젝트를 연결함
- 작업한 pr을 pr템플릿에 맞춰 작성
- 코드리뷰 진행 (코드컨벤션 체크, 궁금한 점, 변수명 제안 등)
- 최소 2명의 approve후에 merge 진행
프로젝트 결과물
- github :
담당한 작업
- 알림 페이지
- 리뷰 작성 페이지
- React Hook Form 적용한 공통 Input 컴포넌트
- 전자기기 카테고리 컴포넌트
postman 팀 워크스페이스 제안 & 세팅
api 테스트를 위해 postman을 사용 중, 더미데이터를 넣는 작업으로 인해 다른 팀원이 작업 중인 api를 써야하는 경우가 생겼습니다. 로컬 코드로 api 호출하기보다 api 테스트를 한 곳에 모아 관리하는 게 효율적일 거 같아 postman 팀 워크스페이스를 제안했습니다. 이후, 팀원들의 동의를 받고, 세팅한 후 postman 사용법을 공유했습니다.
구현 중 겪었던 문제
유효성 검증 로직이 포함된 input 컴포넌트 구현 중, 추상화에 대한 고민
고민
- React Hook Form으로 form, input value 검증을 관리함. (특정 form에 input 관련 정보(key, 유효성 검증로직 등)를 등록해서 관리함)
- 유효성 결과가 false일 경우 보여줄 에러메시지를 input 개수만큼 작성해야하는 문제가 있었고, input, 에러메시지를 하나의 컴포넌트로 만들어 재사용하고자 판단.
- form과 input을 분리하면서, form에서 관리할 input 등록을 위해 register을 props로 넘겨야함. (특정 form을 만들 때 form에서 관리할 input type이 필요하고, form에 등록할 수 있는 register 반환함)
- register에 등록할 수 있는 input 타입을 정의해야함
문제 1. form마다 다른 input 타입을 props로 받아야 했음
해결방법 form에서 각각의 input을 관리하기에, 제네릭을 활용해 하위 props 타입을 지정해서 해결
문제 2. 제네릭으로 타입 지정했지만, 특정 타입이 제대로 추론되지 않음
해결방법
- 선언한 타입과 추론된 타입이 달랐고, 선언한 타입의 내부 문서를 보려했는데 참조가 안됐음.
- node_modules의 React Hook Form 코드를 읽으면서 원하는 타입을 찾았고, 수동 import로 불러와서 해결.
배운 점
특정 타입과 컴포넌트의 의존도를 낮추기 위해 제네릭을 사용한다는 걸 깨달았습니다.
추상화한 코드
회고
회고의 중요성
프로젝트 기간 동안, 2번의 팀 회고를 진행했습니다. 그 기간동안 어떤 생각을 했는지 생각해보는 시간을 가져서 좋았고, 팀원들과 공유하면서 이후 기간에 적용해볼 것을 정해서 반영했습니다. 회고를 통해서 서로의 합을 맞춰가면서, 회고의 중요성을 느꼈습니다.
git, github를 활용한 협업
github Issue, label, project를 적극적으로 활용했고, github project 칸반보드로 서로 어떤 작업을 하고있는지 한 눈에 확인할 수 있었습니다. 작업 후 pr은 2명의 approve가 있어야만 merge 되도록 설정해서, 코드리뷰를 거치도록 했습니다. 처음에는 이슈 작성, 코드리뷰하는 게 어색했지만, 팀원의 코드를 이해하는 데 도움이 됐고, 기록의 중요성을 배울 수 있었습니다.