이번 주는 현재 진행중인 프로젝트의 MVP 기능들을 본격적으로 완성해나가는 시간이었다. 막상 해보니 예상보다 오래 걸리는 기능도, 오히려 예상보다 짧게 걸리는 기능도 존재했다.

끝도 없이 가는 요청

리액트 JS로 개발 하고있지만 앱 환경을 고려해서 진행 중인 프로젝트이기에 편의성을 위해서 사용자와의 상호작용을 고려해서 제작하고 있다. 예를 들자면 회원가입 페이지에서 굳이 사용자가 중복확인 버튼을 누를 필요없이 사용자가 입력하는 값으로 자동적으로 중복확인 요청을 하는 기능이 있다. 하지만 해당 기능에서 조금이라도 값이 변하는 순간 서버에 중복확인 요청이 가게 됐고, 극단적인 상황을 가정하면 키보드를 꾹 누르고 있을 때에는 쉴틈없이 서버에 요청이 들어갈 수 있다고 판단되었다. 이 문제를 어떻게 해결해야할지 고민하다가 디바운스라는 용어를 접하게 되었고, 리액트에서 제공하는 이펙트 훅인 useEffect의 return문을 통해 디스마운트 시 실행했던 timer 함수를 취소해주는 과정을 통해 사용자가 인풋값 입력 완료 후 0.5초 후에 요청이 가도록 설계하였다.

SVG 코드가 쌓인다..!

이번 프로젝트에서 처음으로 svg를 사용해봤는데 아무 생각 없이 사용하다보니 코드길이가 감당안될정도로 늘어나는것을 느꼈다. 결국 프로젝트 중반에 와서야 넘겨준 props 값을 기준으로 원하는 svg를 return해주는 컴포넌트를 만들었고 팀원들과 공유했다... 프로젝트 종료 전까지 대부분의 svg를 해당 컴포넌트로 대체할 예정이다.