BID PANDA 프로젝트 회고

• 기술적 선택

1. Vite →
   webpack 기반의 프로젝트로 개발하는 게 너무 느리고 답답해, 방법을 찾아보고 이번 프로젝트에 시도해 보았다. Vite는 수정된 부분만 핀포인트로 변경하고 번들링 해주는 ES Module 기반의 라이브러리다. 실제로 사용 해 봤을 때 그 성능이 만족스러웠다.

2. Recoil →
   전역으로 관리할 State가 그렇게 크지 않다고 판단해, 필요한 곳에서 가볍게 사용할 수 있는 Recoil을 선택했다. 실제로 이번 프로젝트에서 전역으로 관리한 State는 2개 뿐이다.

3. React Query →
   사실 이번 프로젝트에서 데이터를 전역적으로 관리해야 할 필요는 그다지 없었다. 하지만 동료도, 나도 학습하고 싶은 마음이 있었기 떄문에 도입해 보았다. 프론트엔드에서 데이터를 다루는 작업을 Query key 단 하나 만으로 계속 응용할 수 있다는 점과, cache 처리 할 수 있는 부분에 대해 좀 더 공부해 보고 싶다.

• 미션

1. 유저와의 인터렉션을 통해 구현되는 UI에 착오가 없도록 개발하는 로직을 구현하는 게 생각보다 쉽지 않았다. 
   2수, 3수 앞을 내다보며 가정하고 로직을 만들어야 하는 게 어렵기도 했지만 재미를 느꼈다. 
2. 실시간 알림 기능, 소셜 로그인 기능 등, 새로 학습해야 하고 로직을 파악해야 하는 개발을 하는 일에 
   대해서 일정을 산출하고, 이게 내 실력으로 가능한 일인 지 정확하게 예상하는 일이 쉽지 않았다.
   하지만, 지난 학습 경험을 반추해 보았을 때, 불가능한 건 딱히 없고 단지 시간이 걸릴 뿐이라는 걸 알고 있었기에
   두려운 건 하나도 없었다. 단지 얼마나 걸릴 지를 정확히 예측하는 실력을 기르고 싶다고 생각했다.
3. 보편적이고 가독성이 좋은 코드를 작성하는 일을 우선으로 작업했고, 그 다음은 성능을 개선할 수 있는 방법을 모색했다.
4. 평소 성능 최적화에 대한 관심이 있었다. 
   최소 구현기능이 완성 된 후 Router에서 페이지 컴포넌트에 React lazy를 걸어 첫 페이지의 로딩 성능을 개선했다.
   (35.7%)

• 트러블 슈팅

- 어떤 분야에서 일 하더라도 한국 소비자들은 주의력이 없고, 산만하고 섬세하지 못 하다는 사실을 
  다시 한 번 통감하고 있다. 하지만 이런 유저와 직결되는 건 프론트엔드의 개발 분야이기 때문에 
  이 사람들을 위한 대책이 필요하다는 사실을 깊히 이해했다.

버튼을 연속 클릭하여 버그를 일으키는 유저 →
프론트엔드 개발자 입장에서, 클릭 이벤트의 정상적인 작동은 민감한 문제다. 회원가입 페이지에서 이메일 인증코드를 발송하는 버튼을 따다닥 연속 클릭하는 유저들이 있었고, 그 클릭 이벤트는 데이터 요청을 4번이나 보내고 있었다. 이메일이 여러개 왔는데, 그 중에 어떤게 유효한 인증 번호인지 알 수 없었다는 피드백을 받았고, 이런 산만한 유저들을 위해 Lodash throttling을 선물했다.

회원가입 formData 이슈 →
이번에 새로 도입한 React hook form 라이브러리는 코드양을 줄이고, 좀 더 염격하고 간편한 formData 전송을 책임 져, 회원가입 기능의 코드를 간경하게 만들었다. 하지만 중복 체크를 하는 요소가 3개나 있었는데, 이걸 State로 관리하고 있지 않다보니 체크 핸들러에서 그 value를 사용할 수 없어 답답한 상황이 생겼다. 라이브러리가 제공하는 getValue 메소드를 통해 그 값을 추출하게 되면서 문제를 해결할 수 있었고, 공식 문서를 바로바로 찾아봐야 겠다는 경험치를 얻었다.

성능 문제 해결 →
- MVP 구현 이후 첫 페이지 로딩 시간이 평균 3600ms로 너무 느렸고, 정상적이지 않다고 판단. React lazy와 Suspense를 통해, 번들의 JS 용량을 35.7%, 로딩 속도를 평균
1200ms로 개선.
- 다수의 페이지 컴포넌트와 이미지가 로딩되고 있었기 때문에, React lazy로 코드 스플리팅을 하고, 이미지 최적화 라이브러리를 사용하여 사용자가 등록하는 이미지를 압축 하여 대응.
- 페이지 이동 성능 개선에 도움이 되는 솔루션은 없는 지 고민하며, Wouter, NextJS의 useRouter 등을 알게 됨. 추후 학습 예정.

SSE 실시간 알림 기능 →
- 1) 알림 리스트를 확인 시 2) 개별 알림을 확인 시. 상단 Nav에 있는 알림 아이콘의 Red dot이 점멸하는 로직을 구현해야 했음.
- isRead라는 Recoil State를 작성. Notification 컴포넌트에서 setState로 true value를 줄 조건을 정리하여 로직을 작성.
- Nav 컴포넌트에서 해당 Recoil State를 이용해 Jsx 코드에서 isRead && 로 UI 구현을 분기하고, 또 다른 버그가 생겼을 때에는 Notification 컴포넌트에서 로직을 보수하여 대응.

클릭 이벤트 장애 대응 →
- 연속 마우스 클릭 습관때문에 기능 오작동, 불필요한 서버 요청을 일으키는 사용자를 만나게 되었음.
- 이메일 인증 코드를 전송하는 api의 성능이 좋지 않아, 3000ms의 딜레이가 발생하고 있었음. 버튼 클릭 즉시 요청이 전송 되었다는 Toastify 알림을 전송하도록 로직을 수정하고, 해.
당 버튼에 3500ms의 Throttling을 적용하여, 앞으로 생길 이슈를 차단.

카테고리 별, 다른 api를 요청하고 리스트를 보여줘야 할 때 →
❋ solution