개요
- 바코드 인식과 ISBN 검색을 통한 서지 정보 저장 웹 책장 서비스
배포
역할
- 프론트엔드 80%, 백엔드 20%
- 약 2달 간 기획 및 개발
CloudType배포
사용 스택
- 프론트엔드 : TypeScript, React, styled-components, React Router, Zxing-js, Vite
- 백엔드 : Express, Passport, MongoDB, Mongoose
목차
도서의 바코드 인식이나 ISBN 직접 입력으로 서지 정보 검색
Zxing-js를 이용하여 도서의 바코드를 인식해 ISBN을 읽습니다.- 서지 정보는 국립중앙도서관의 오픈 API를 이용했습니다.
바코드 검색
ISBN 검색
후면 고화질 카메라 고정
- 모바일에서 여러 개의 후면 카메라 중 저화질의 카메라가 먼저 선택되어 편의성 부족했습니다.
- 고화질 카메라를 고정하여 검색 단계까지 클릭 횟수를 50% 감소했습니다. (4번 → 2번)
미디어 스트림 클린업
- 카메라 검색 후 미디어 스트림이 확실하게 종료되지 않아 카메라 실행 표시가 지속해서 활성화되었습니다.
react-webcam패키지의 코드를 참고하여 미디어 스트림 종료 로직을 수정했습니다.- [React] Media Stream Cleanup 하기(feat. react-webcam)
세션 방식 제거
- 초기에 세션 방식으로 클라이언트를 식별했지만, 세션이 살아있는 동안 서버가 클라이언트의 상태를 가지고 있다고 판단했습니다.
REST원칙 중 **무상태성(stateless)**에 위배된다고 판단해 세션 방식을 제거했습니다.
토큰 방식으로 변경
- 비암호화된 유저 정보 일부를 쿼리 파라미터로 보내 식별했습니다.
- 세션 제거와 보안 이슈 해결을 위해
JWT를 이용하여 로그인 로직을 수정했습니다. - [BiP] 로그인 로직 변경 기록
기존 상태 관리 방식 문제 개선
- 기존 방식(Context API와
**useReducer**)에서 문제를 발견했습니다.- 상태 추적의 어려움
- Context의 필요처마다
Provider로 감싸는 불편함
- 이를 개선하고자
Zustand라이브러리로 대체했습니다. Zustand가 제공하는devtools미들웨어를 적용하여 상태 변경을 추적했습니다.- Context와
Provider를 제거하여 전역 상태 관리 코드를 약 40% 줄였습니다. (285줄 → 176줄) - [Zustand] 공식 문서만 보고 Zustand 적용해 보기
빌드 후 index.js 용량 약 95% 감소
- 빌드 후 모든 라이브러리가
index.js에 모이는 이슈가 발생했습니다. vite의 빌드 옵션 중rollupOptions.output에manualChunks를 추가하여 사용한 라이브러리를vendor로 분리하였습니다.- 600KB 이상의
index.js용량을 약 30KB로 줄였습니다.
모바일 웹을 대상으로 구현했지만, 매번 웹 브라우저를 켜야 하므로 접근성이 좋지 않았습니다. 이를 해결하고자 네이티브와 PWA 사이에서 고민했습니다. 네이티브의 경우 러닝 커브가 높아 대안으로 PWA를 선택했습니다. PWABuilder을 이용하여 manifest를 만들어 적용했습니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent