# 발표대본_찐 NDD를 적용한 소셜 가계부 개발기 N석봉의 발표를 시작하겠습니다. 저는 발표를 맡은 박승환입니다. 발표는 다음과 같은 순서로 진행 될 예정입니다. 먼저 저희팀은 윤석주, 양예진, 박상신 그리고 저로 웹 풀스택 4명으로 이뤄진 팀입니다. 그래서 저희가 만든 N석봉이 뭐냐? 과거 한석봉의 어머님께서 '나는 떡을 썰테니, 너는 글을 쓰거라' 라는 말씀을 모티브로하여 너는 돈을 써라, 우리는 관리를 해줄께!라는 마음의 가계부 서비스 입니다. N석봉 가계부는 개인 또는 여러 사용자가 함께 관리할 수 있으며, 입력한 데이터를 시각화 해서 보여주는 기능을 제공합니다. ## 기술소개 프로젝트 개발에는 다음과 같은 기술을 사용하였습니다. ## NDD 저희는 NDD 개발 방법론이라는 저희만의 개발 방법론을 만들어 적용하였습니다. NDD란 어떤 식으로 개발할지, 혹은 기술을 어떻게 적용할지에 대해 먼저 논의를 하는 방법론입니다. 저희 팀원 대부분은 저희가 선택한 기술을 처음 접하였습니다. 그래서 팀원들끼리의 알맞은 방법, 더 나은 개발을 하기 위해 많은 논의를 하였습니다. 이 다음부터 저희가 했던 논의들을 설명해드리고, 그 결과로 만들어진 작업물들을 보여드리겠습니다. ## 논의 ### 상태관리 - 10page 먼저 상태관리에 대한 논의입니다. 저희는 상태관리 라이브러리 MobX를 사용하기로 하였습니다. 프로젝트에 사용되는 대부분의 상태를 MobX를 사용해서 관리를 할지, 컴포넌트간 교류가 필요한 상태에만 MobX를 사용할지에 대해 논의하였습니다. 저희는 각 상황에 장점과 단점을 다음과 같이 분석하였습니다. 분석한 결과, 전자의 단점보다는 후자의 단점을 보완하기 쉬울 것으로 판단하여 후자의 방법을 사용하기로 하였습니다. - 11page 저희는 아토믹 디자인을 활용한 bottom up 방식의 개발을 하였기 때문에 깊은 레벨의 Props의 전달을 염두 --- 중복되는 상태와 컴포넌트와 로직의 분리가 안된다는 단점은 커스텀 훅을 정의하여 보완하였습니다. - 12page 그래서 메인페이지, 통계 페이지 그리고 달력 페이지 같은 경우 같은 거래내역이라는 상태를 공유하고, 여러 페이지에 걸쳐 사용되므로 MobX를 통한 상태관리를 채택하였습니다. - 13page 거래내역 생성 페이지와 수정 페이지는 같은 상태와 로직을 사용을 하지만 여러 페이지에서 필요로 하지않는 상태이므로 커스텀 훅으로 개발하였습니다. ### MMS 다음으로는 MMS 파싱하여 거래내역을 추가하는 기능입니다. 처음에는 문자열에 경우의 수가 많아서 막막하였습니다. 그래서 여러 팀원과 논의를 하고 주변 서비스를 찾아본 결과, 받을 수 있는 문자열을 제한하는 것이였습니다. 저희는 휴대전화 카드 사용내역mms만 처리하기로 결정 하였습니다. 그런데, 카드사 마다 또 보내는 형태가 많아서 일부 대표 카드사만 정하여 mms 파싱하기로 하였습니다. 그리고 사용내역이 다양하기 때문에 이는 저희 채팅을 활용하여 추가 입력을 받을 수 있도록 구현하였습니다. ### 공유 가계부 & 알림 다음은 공용가계부 관련 기능들입니다. 공용으로 사용하기 전에 다른 사용자들을 초대하는 기능을 구현하려했습니다. 그 초대된 데이터를 새로 컬렉션을 만들어서 저장을 해야할 까, 아니면 사용자의 컬렉션에 추가를 할까 고민을 하였습니다. 그 결과, 새로 컬렉션을 만들면 참조에 참조로 인하여 실행속도에 대한 우려가 있어서 사용자 컬렉션에 넣는 방향으로 개발하게 되었습니다. 그리고 알림 기능에서도 논의가 있었습니다. 다른 서비스를 보면 알림이 실시간으로 보여지는 것을 많이 보았을 것 입니다. 그래서 저희도 소켓을 사용하여 실시간으로 반영되게 해야하나 라는 고민을 하였으나 저희 서비스에서 알림이라는 것이 실시간으로 보여 줄 정도로 중요한게 아니라고 판단하여 모달이 렌더링 될 때마다 업데이트 되어지는 방향으로 개발하였고 다음 화면에 그 결과로 만들어진 페이지들 입니다. ## 애자일 개발 1. 계획과 점검 (18번 슬라이드) 저희는 매주 월요일 마다 그 주에 무엇을 해야 정하고, 그 일들의 우선순위를 정하였습니다. 그리고 매 주 금요일은 그 계획이 얼마나 진행되었는지, 어떠한 점이 부족한지를 확인하여 프로젝트의 진행사항을 파악하였습니다. 2. 회고 (19번 슬라이드) 저희는 매일 다음과 같이 개인 회고를 통해 자신을 점검하고 팀원에게 피드백을 주면서 하루를 되돌아보는 시간을 가졌습니다. 또한, 매 주 금요일은 팀 회고를 통해 팀으로서 한 주의 협업이 잘 이루어졌는지, 개선할 점은 무엇인지를 찾아 성장하고자 하였습니다. 3. PR, 코드리뷰 (20번 슬라이드) PR을 올릴 때는 되도록 꼼꼼하게 내용을 작성하여 각자 작업한 내용을 팀원들이 잘 이해할 수 있도록 하였습니다. 또한, 논의가 필요하다고 생각한 부분을 남겨서 같이 논의 할 수 있도록 하였습니다. 마지막으로 코드리뷰를 통하여, 서로의 코드를 보며 배울 수 있었고, 부족한 부분은 채워줄 수 있었습니다.