배포링크 : Salog
- 텍스트 에디터로 React-Quill 라이브러리를 사용하여 이미지를 업로드할 때 base64로 인코딩되어 파일의 크기가 너무 커지는 현상이 발생했습니다.
- Image Handler 함수를 만들어 이미지를 업로드 할 때 Firebase Storage에 저장 후 URL을 반환하는 방법으로 해결했습니다.
- 해당 기능을 구현하여 이미지 로드 시간을 3배 이상 감소시켜 성능 및 UX 가 향상되었습니다.
- 일기 조회 시 데이터가 많아질수록 API 요청으로 인한 서버 부하 및 초기 로딩 속도가 느려졌습니다.
- 이를 해결하기 위해 무한스크롤을 구현하였으며, IntersectionObserver API를 이용해 커스텀 훅을 만들어 재사용 가능하도록 코드를 작성했습니다.
- 해당 기능을 구현하여 서버 부하 감소와 UX 향상에 도움이 되었습니다.
- accessToken이 만료 될 때마다 로그인을 다시 해야하는 불편함이 생겼습니다.
- Axios Interceptor를 이용하여 응답 에러코드가 401일 때, 아래의 과정을 거쳐 토큰을 재발급 받습니다.
발생한 요청을 보류 (pending) -> 토큰 재발급 함수 실행 -> 재발급이 완료되면 보류된 요청들을 다시 실행
- React.lazy(), Suspense를 이용한 Code Splitting / depcheck를 이용한 사용하지 않는 종속성 제거를 진행했습니다.
- 번들의 크기를 4.69MB -> 1.51MB로 약 68% 감소시켰습니다.
- 해결 과정을 기록한 블로그 게시글
- 웹서비스 접속 초기화면으로 AOS(Animate on scroll)가 적용 되어있습니다.
- 로그인이 되어 있지 않은 경우에만 접근 가능합니다.
| 초기화면 |
|---|
- 이메일 주소와 비밀번호를 입력할 때, 입력창에서 벗어나면 유효성 검사가 진행되고 통과하지 못한 경우 각 경고 문구가 입력창 하단에 표시됩니다.
- 이메일 주소의 형식이 유효하지 않으면 인증 버튼이 활성화되지 않으며, 이미 가입된 이메일일 경우 인증 버튼 클릭 시 입력창 하단에 경구 문구가 나타납니다.
- 작성한 이메일을 통하여 인증번호를 받아 입력하는 검증 과정을 거쳐야합니다.
- 작성이 완료된 후, 유효성 검사가 모두 통과되면 회원가입 버튼이 활성화되며, 버튼을 클릭하면 회원가입이 완료되어 로그인 페이지로 이동됩니다.
| 유효성 검사 | 이메일 인증 |
|---|---|
| 회원가입 |
|---|
- 이메일과 비밀번호를 입력하여 로그인을 진행합니다.
- 로그인 버튼 클릭 시 입력값이 일치하지 않을 경우에는 경구 문구가 나타나며, 로그인에 성공하면 홈 대시보드 화면으로 이동합니다.
- 소셜 로그인(카카오, 구글, 네이버)을 통한 서비스 이용이 가능합니다. (현재는 구글만 가능)
| 일반 로그인 | 소셜 로그인(구글) |
|---|---|
- 비밀번호를 잊어버렸을 때, 로그인 페이지에서 하단에 있는 비밀번호를 찾기를 진행합니다.
- 이메일을 입력하여 인증번호를 받고, 인증이 완료되면 비밀번호를 재설정할 수 있습니다.
| 비밀번호 찾기 |
|---|
- 기존 비밀번호, 새로운 비밀번호를 입력하여 비밀번호를 변경할 수 있습니다.
- 회원 탈퇴를 한 뒤, 해당 계정으로 재가입이 가능합니다.
- 설정 페이지에서 해당 기능들을 사용할 수 있습니다.
| 비밀번호 변경 | 회원 탈퇴 |
|---|---|
- 좌측의 sidebar에 있는 로그아웃을 클릭 후 나타나는 모달창의 확인 버튼을 클릭하면 로그아웃이 됩니다.
- 로그아웃시 로컬 저장소 및 쿠키의 토큰 값을 삭제하고 로그인 화면으로 이동합니다.
| 로그아웃 |
|---|
- 이번 달 지출 · 수입 · 낭비리스트 · 예산을 그래프와 함께 확인할 수 있습니다.
- 하단의 캘린더는 타일마다 해당 일의 지출과 수입의 합계를 보여주며, 타일을 클릭하면 작성 된 가계부를 조회할 수 있습니다.
- 타일에 마우스를 올리면 작성 아이콘이 보여지며, 클릭 시 가계부를 작성할 수 있습니다.
| 대시보드 |
|---|
- 상단의 탭을 통하여 지출과 수입을 따로 볼수 있으며, 낭비리스트를 확인할 수 있습니다.
- 낭비리스트는 지출내역 중 추가할 수 있으며, 항목을 체크하면 나오는 탭에서 낭비리스트 버튼으로 추가 가능합니다.
- 날짜 오름차순 / 내림차순 정렬이 가능하고 카테고리 필터링 및 특정 날짜 필터링 조회 기능이 추가 될 예정입니다.
| 지출 · 수입 조회 |
|---|
- 가계부 작성하기 버튼을 클릭하면 작성 모달이 나옵니다.
- 주어진 항목들을 입력하면 작성 버튼이 활성화되어 가계부 작성이 가능합니다. (항목 중 메모는 작성하지 않아도 됩니다)
- 하단의 행 추가를 눌러 여러 개의 내역을 작성할 수 있습니다.
| 지출 · 수입 작성 |
|---|
- 항목들을 체크하여 나오는 탭에서 수정 또는 삭제를 클릭합니다.
- 수정 및 삭제로 인해 내용이 변경되면 페이지에 바로 반영됩니다.
| 지출 · 수입 수정 & 삭제 |
|---|
- 이번 달 지출을 차트 및 그래프를 통해 분석을 보여주는 페이지입니다.
- 최근 3개월 지출 합계, 주간 별 분석, 분류 별 지출, 예산 소진율, 낭비 리스트를 확인할 수 있습니다.
| 분석 |
|---|
- 이번 달 예산을 설정하고 남은 예산 및 하루 예산을 볼 수 있습니다.
| 예산 |
|---|
- 달마다 고정으로 발생하는 지출 및 수입을 관리하는 페이지입니다.
- 고정 지출은 지출 일을 기준으로 3일 미만 남았다면 빨간색, 일주일 미만이면 노란색, 일주일 이상은 초록색으로 표시됩니다.
| 고정 지출 · 수입 조회 |
|---|
- 항목들을 작성하면 일정 추가하기 버튼이 활성화됩니다.
| 고정 지출 · 수입 작성 |
|---|
- 상단의 탭을 통하여 일정 수정 탭으로 이동하면 수정 및 삭제가 가능합니다.
- 금융 일정 목록에서 수정하고 싶은 항목을 선택하여 내용 수정을 할 수 있습니다.
- 목록 하단의 삭제하기를 클릭하여 내용 삭제를 할 수 있습니다.
| 고정 지출 · 수입 수정 & 삭제 |
|---|
- 영수증의 가계 이름, 지출 일, 총 합계의 항목을 인식하여 가계부를 작성할 수 있습니다.
- 영수증 인식을 통하여 가계부를 작성하면 가계부 조회 시 영수증 사진을 볼 수 있습니다.
- 대시보드 페이지, 지출&수입 페이지에서 가계부를 작성할 때 사용 가능합니다.
- 이미지 업로드 -> 영수증 인식 -> 내용 확인 -> 자동작성의 플로우를 가집니다.
| 영수증 인식(대시보드 페이지) | 영수증 인식(지출&수입 페이지) |
|---|---|
- 웹 알림, 이메일 알림이 있습니다.
- 웹 알림은 헤더의 알림 아이콘을 클릭하여 확인 가능하며, 알람을 확인 후 삭제하면 로컬 저장소에 저장되어 알림이 다시 발송되지 않습니다.
- 고정 지출 및 수입에서 일정이 3일 미만인 항목들만 알림을 발송하며, 일정 당일날에는 해당 목록들을 가계부에 추가하는 것을 묻는 모달을 보여줍니다.
- 알림 설정은 회원 가입 시 가능하며, 헤더의 알림 아이콘을 클릭하면 하단의 스위치를 통하여 on/off 가능합니다.
| 알림 |
|---|
- 작성한 모든 일기를 조회하는 페이지입니다.
- 제목으로 검색, 태그 필더링 및 날짜 필터링 조회가 가능합니다.
| 일기 전체 조회 |
|---|
- 전체 조회 페이지에서 일기를 선택하여 조회합니다.
- 텍스트 에디터로 작성 된 일기가 그대로 보여지며, 우측에는 일기를 작성한 당일의 가계부를 확인할 수 있습니다.
| 일기 상세 조회 |
|---|
- 텍스트 에디터를 통하여 본문에 이미지를 첨부할 수 있습니다.
- 우측에는 작성 당일의 가계부가 표시되어 내역을 볼 수 있습니다.
- 작성 버튼을 누르면 유효성 검사가 진행되고 통과하지 못하면 토스트 창으로 경고 문구가 나타납니다.
- 작성이 완료되면 전체 조회 페이지로 이동합니다. 또한 본문의 이미지를 올렸다면 썸네일로 지정하며, 이미지가 여러개라면 첫 번째를 썸네일로 지정하여 전체 조회에 보여집니다.
| 일기 작성 |
|---|
- 일기 상세 조회시 상단의 수정 및 삭제 버튼을 클릭합니다.
- 수정 또는 삭제가 완료되면 전체 조회 페이지로 이동합니다.
| 일기 수정 & 삭제 |
|---|