팀원들과 함께 MVP 완성을 목표로 3주 동안 힘차게 달려왔다!
오늘은 이 여정의 중간 회고를 해보려한다.

나는 어떤 기술들을 다뤘었나?

React와 Redux Toolkit

프로젝트는 React로 구현했고 Redux Toolkit을 활용해 상태를 전역 관리 해주고있다. 가장 리액트처럼 작동한다는 Recoil도 고려해봤지만, 현재 목표로하는 프로젝트의 완성 규모가 크지 않고 가장 많이 쓰이는 전역관리 툴이 Redux이기에 오류 관련 레퍼런스를 쉽게 구할 수 있어 좀 더 기능 구현에 집중 할 수 있을거라 판단해 Redux를 선택했다. 또한 기존 Redux의 액션타입, 액션 생성 함수, 리듀서 등... 엄청나게 많은 보일러 플레이트 코드를 줄이기 위해 Redux Toolkit을 사용했다. Slice 함수 하나로 모든게 가능하다!! 심지어 immer도 내장되어있어 불변성을 지켜준다.

SockJS와 Stomp

공구 서비스 특성상 유저간의 실시간 채팅 기능을 제공 할 필요가 있었다. 소켓 방식으로 구현하기로 했고 websocket과 비슷한 기능을 제공하는 브라우저 JS 라이브러리인 SockJS를 채택했다. SockJS는 구글 크롬, 사파리, 파이어폭스 뿐 아니라 websocket 프로토콜을 지원하지 않는 최신 브라우저에서도 잘 작동한다. 또한 stomp 서브 프로토콜 환경에서 stompJS에서 connect, pub, sub등 여러 편리한 기능을 이용했다. 현재 로그인/로그아웃, 토큰 체킹 이후 인증 박탈 과정에서 채팅방 pub/sub 기반으로 구현했다.

Styled Component!

create react app 했을 때에 포함되는 Post CSS나 SASS tailwind등 여러가지를 고려해봤는데, 사실 짧은 시간 내에 tailwind를 배워서 사용하면 실전 프로젝트 정도의 규모에서 깔끔하고 가독성 좋게 정리하기 힘들 것 같았고, 결국 CSS 중복 적용을 방지해주고 JS 환경을 최대한 활용 할 수 있는 CSS-in-JS인 Styled Component를 스타일 도구로 채택했다. 특히 React 환경에서는 props를 활용한 조건부 스타일링이 굉장히 용이했다. Styled Component의 단점을 보완하기 위해 스타일 파일 위치와 네이밍 컨벤션을 정하기도했다. 느린 속도로 인해 원형이 너무 오래 노출되지 않을까 걱정했지만 프로젝트 규모가 작아서 그런지 괜찮았다.

Axios

서비스 서버로 HTTP Request를 보낼 때에 Axios를 사용했다. Axios는 크로스 브라우징 최적화로 브라우저 호환성이 뛰어나고 Promise 기반이어서 내가 받는 Response를 조작해주기 편했다. 실제로 로그인과 같은 계정 관련 기능에서 TIME OUT을 정해두고 Promise Race를 시켜 연결이 원할하지 않다는 Response를 받게 하였다.

AWS Amplify

배포 과정에서 SSL인증서 발급과 커스텀 도메인 설정이 굉장히 간편했다..! 특히 작업별 배포환경 분리하기도 굉장히 쉽다는 강점이 인상적이었다. 최근에 사용되기 시작한 기술이다보니 다들 많이 쓰지는 않는 것 같았다.

PWA

현재는 배포된 서비스를 설치가능한 PWA로 만들어 사용자에게 제공하고 있을 뿐이다.

다음 주 부턴 이런걸 해보고싶다!

다른 기술들을 추가로 사용해보기 보다는 현재 작성된 코드들의 성능을 개선시켜보고싶다. 지금까지 사용을 보류해뒀던 useMemo나 useCallback등의 훅들을 효율적으로 위치시켜보려한다. 또한 sentry를 활용해 에러 모니터링을 해보면 어떨까 이런 생각도 들고... 이왕 PWA를 도입했으니 앱 푸시알림이나 커스텀 설치 화면도 구현해보고 싶다. 우리 서비스는 사용자가 원하는 공구를 찾는 것에서부터 시작되니 검색 기능을 최적화 해보는 것도 좋겠다.