프로젝트 Cate-In ☕️

카페인은 키오스크 서비스에 원격 대기 서비스가 합쳐진 카페 업종을 위한 프로젝트로 관리자 모드와 사용자 모드를 나눴고

내가 맡은 기능은 사용자 모드의 메뉴주문, 포인트 적립과 사용, 관리자 모드의 포인트 조회 였다.

상태관리는 리코일을 사용했고,
리액트+TS의 조합으로 프로젝트를 진행했다.

여기서 큰 문제는 내가 TS에 익숙치 않았고, 리코일에 관련해서도 어떻게 써야 더 좋은 건지도 잘 몰랐다. 처음부터 리코일로 상태관리를 할려니 굳이 안해도 되는걸 요기조기에 써보기도 해서 다시 다 갈아엎기도 했다.

🌱 프로젝트를 통해 배운 것들

• atom 과 selector을 사용해서 전역으로 관리하고,selector'상태 파생'이라는것도 알게 되었다. 그리고 비동기적으로 관리할때 상태로 관리할수있는것도 알게되었다.

• 확실히 TS로 하니까 데이터를 전달할때 미리 알려줘서 편리했고, 수많은 컴포넌트들을 만들었는데 그 컴포넌트와 함수들이 어떤 데이터를 넘겨줘야하는지 어떤걸 받는지 알수있어서 편리했다.

• 파이어베이스를 사용하면서 비동기 데이터 CRUD 작업에 대해 더 이해를 하게 되었다.

• 어떤방식이 사용자에게 더 편할까? 어떤 흐름으로 가야 이탈하지 않고 사용자가 우리 서비스를 이용할수있을까? 같은 질문들로 서비스의 UX를 깊게 고민하며 개선해 나갔다.

• 기존의 코드에서는 데이터 통신이 이루어지는 부분이 많았다. 선택된 아이템을 데이터 베이스에 보냈거나 굳이 통신을 안해도 될 부분을 제거하여 최초의 렌더링의 시간을 줄였다.

• 라이트하우스를 통해 웹사이트의 성능과 접근성을 진단했고, 목표로 한 100점의 점수를 향해 여러 최적화 작업을 진행했다. 나의 경우엔사용자의 가독성을 향상시키기 위해 색상의 대비를 조절했고, 웹 접근성 향상을 위해 메뉴 아이템 렌더링시 시멘틱 태그를 활용했다.

• 메뉴 아이템을 클릭할때 옵션 모달에 순서가 바뀌든 아니든 같은 것을 클릭하면 같은 것으로 취급하여 수량 증가가 되고, 다른 옵션을 클릭하면 새로운 것으로 추가가 되어야한다. 이 경우에는 옵션 이나 메뉴아이템 컴포넌트에서 따로 중복검사를 해주었는데 커스텀 훅으로 빼서 재사용성이 좋게 만드는것이 좋았다고 생각한다.

파이어 베이스의 데이터 모델링을 몇번이나 갈아 엎었는지 모른다.. 어떻게 해야 주문 내역 데이터에 잘 들어갈지, 메뉴아이템을 클릭했을때 선택한 값들도 데이터에 저장시켜서 그대로 주문내역에 보내야하는지 고민을 했고 팀원과의 회의를 통해 최대한 연결을 최소로 줄이는 방법으로 해서 최초의 렌더링때 최대한 느리지 않게 구현했다.