# 발표 대본

NDD를 적용한 소셜 가계부 개발기 N석봉의 발표를 시작하겠습니다.

저는 발표를 맡은 박승환입니다.

발표는 다음과 같은 순서로 진행이 될 예정입니다.

먼저, 저희 팀은 윤석주, 양예진, 박상신 그리고 저 웹 풀스택 4명으로 이뤄진 팀입니다.

그래서 저희가 만든 N석봉이 뭐냐 ?
과거 한석봉의 어머님께서 '나는 떡을 썰테니, 너는 글을 쓰거라' 라는 말씀을 모티브로하여
너는 돈을 써라, 우리는 관리를 해줄께!라는 마음의 가계부 서비스 입니다.
N석봉 가계부는 개인 또는 여러 사용자가 함께 관리할 수 있으며, 입력한 데이터를 시각화 해서 보여주는 기능을 제공합니다.

### 기술소개
서비스 개발에는 다음과 같은 기술을 사용하였는데, 팀원 대부분이 처음 접하는 기술이였습니다.

## NDD
그렇기 때문에, 개발 전 생긴 이슈들에 대해 팀원들과 열띈 논의를 하게 되었습니다.
저희가 했던 논의들 중 핵심적인 내용들을 소개해드리도록 하겠습니다.

## MobX
상태관리 라이브러리 Mobx를 사용하기로 결정한 후, 어떤 상태를 Mobx를 적용하지 논의하였습니다.
상태에 관련된 모든 로직을 Mobx에서 관리하도록 할 것이냐, 여러 컴포넌트의 교류가 있는 특정 상태들만 관리할 것이냐는 의견이 있었습니다.
두 의견에 대한 장점과 단점을 비교하였고, 상태관리 상황에 비추어 고려해보았습니다.
저희는 Hooks과 MobX 둘 다 사용하여, 서로의 장단점을 보완할 수 있도록 하였습니다.
먼저 React에서의 상태관리 라이브러리 Mobx입니다.
저희는 메인페이지, 통계페이지, 달력페이지에서는 같은 거래내역 리스트를 사용하기 때문에 이 데이터 어떻게 하면 효율적으로 같이 관리할 수 있을까? 에 대해서 고민하였습니다.

이때 상태관리 라이브러리 Mobx를 사용하여 여러페이지에서 사용되는 상태를 하나의 스토어를 생성하여 관리하기로 하였습니다. 이렇게 하여 여러 페이지에서 데이터를 가져오는 로직이 단순화되었고 합계와 같은 값은 Mobx의 computed를 사용하여 미리 캐싱하여 사용하였습니다. 현재 화면과 같이 거래내역 스토어 하나로 파생된 페이지들 만들어졌습니다.

## MMS
다음으로는 MMS 파싱하여 거래내역을 추가하는 기능입니다.
처음에는 문자열에 경우의 수가 많아서 막막하였습니다. 그래서 여러 팀원과 논의를 하고 주변 서비스를 찾아본 결과, 받을 수 있는 문자열을 제한하는 것이였습니다. 저희는 휴대전화 카드 사용내역mms만 처리하기로 결정 하였습니다. 그런데, 카드사 마다 또 보내는 형태가 많아서 일부 대표 카드사만 정하여 mms 파싱하기로 하였습니다.
그리고 사용내역이 다양하기 때문에 이는 저희 채팅을 활용하여 추가 입력을 받을 수 있도록 구현하였습니다.

다음은 공용가계부 관련 기능들입니다.
공용으로 사용하기 전에 다른 사용자들을 초대하는 기능을 구현하려했습니다. 그 초대된 데이터를 새로 컬렉션을 만들어서 저장을 해야할 까, 아니면 사용자의 컬렉션에 추가를 할까 고민을 하였습니다. 그 결과, 새로 컬렉션을 만들면 참조에 참조로 인하여 실행속도에 대한 우려가 있어서 사용자 컬렉션에 넣는 방향으로 개발하게 되었습니다.
그리고 알림 기능에서도 논의가 있었습니다. 다른 서비스를 보면 알림이 실시간으로 보여지는 것을 많이 보았을 것 입니다. 그래서 저희도 소켓을 사용하여 실시간으로 반영되게 해야하나 라는 고민을 하였으나 저희 서비스에서 알림이라는 것이 실시간으로 보여 줄 정도로 중요한게 아니라고 판단하여 모달이 렌더링 될 때마다 업데이트 되어지는 방향으로 개발하였고

다음 화면에 그 결과로 만들어진 페이지들 입니다.

저희 발표는 여기까지이고 발표나 프로젝트 관련 질문 있으시면 받도록 하겠습니다.