팀 프로젝트 3주차 회고 — 활동기록 도메인 전담 개발기
2026.03.16 ~ 03.23 | Vue 3 + JSON Server 기반 영업 지원 SaaS 팀 프로젝트
드디어 기획이 끝나고 프론트 개발부터 시작했다. 우리 팀은 SalesBoost를 Vue 3로 개발하고 있고, 나는 활동기록 도메인을 전담했다. 담당 범위는 기록 관리, 컨택 리스트, 메일 이력, 활동기록 패키지 총 4개 화면이다.
3/17 ~ 3/18 — 바닥부터 쌓기
프로젝트 첫날은 공통 컴포넌트 세팅에 집중했다. 팀 전체가 쓸 BasePagination, TableActions, SearchableCombobox 등을 구현하면서 팀 컨벤션의 틀을 잡았다.
공통 컴포넌트를 먼저 만들고 나니 도메인 화면 개발 속도가 확실히 빨랐다. 기록관리 페이지(CRUD), 컨택 리스트, 메일 이력 페이지, 활동기록 패키지 화면을 이틀 안에 다 올릴 수 있었던 것도 그 덕분이다.
한 가지 배운 것: SearchableCombobox에서 한국어 IME(한글 조합 중) 입력이 두 번 들어가는 문제가 있었다. compositionstart / compositionend 이벤트로 처리했는데, 브라우저 입력 이벤트를 직접 다뤄본 게 처음이라 꽤 시간을 썼다.
3/19 — API 연동
UI가 완성되고 API 연동에 들어갔다. JSON Server를 mock으로 쓰는 구조였는데, 막상 연동하다 보니 데이터 형식이 맞지 않는 문제가 곳곳에서 터졌다.
가장 당황했던 건 PO ID 형식 문제였다. 초기에 PO-2025-001 형태로 설계했는데, 첨부파일 열기 로직에서 정규식으로 prefix를 파싱하다 보니 하이픈이 방해가 됐다. 결국 PO2025001 형태로 전체 통일하는 커밋을 따로 냈다. 처음부터 ID 형식 컨벤션을 팀과 맞춰뒀어야 했다는 아쉬움이 남는다.
그 외에도 컨택 리스트에서 거래처별 담당자가 안 보이는 버그가 있었는데, 원인은 clientId를 숫자로 저장했는데 필터 비교를 문자열로 해서 생긴 타입 불일치였다. 타입 하나가 이렇게 조용히 버그를 만들어내는 걸 몸으로 배웠다.
3/20 — 충돌 무한반복...
팀원들이 동시에 작업하다 보니 db.json 충돌이 하루에도 몇 번씩 났다. JSON은 자동 머지가 안 되니까 매번 손으로 해결해야 했다. 팀원의 데이터를 실수로 날릴 뻔한 적도 있어서 꽤 긴장했다.
DocumentPageHeader 컴포넌트를 슬롯으로 감싸서 재사용하려다 렌더링이 안 되는 문제도 있었다. 이것저것 시도하다가 결국 직접 import하는 방식으로 돌아갔다. 추상화가 항상 좋은 건 아니라는 걸 느꼈다.
3/21 ~ 3/22 — 메일 발송 규칙, 설계가 반이다
메일 이력의 핵심 기능인 발송 규칙 정립과 첨부파일 연동을 구현했다.
첨부파일 클릭 → PDF 미리보기 흐름을 만드는 게 생각보다 복잡했다. 파일명에서 prefix(PI, CI, SO 등)를 파싱해서 JSON Server의 해당 엔드포인트에서 데이터를 가져와 HTML로 렌더링하는 방식이었는데, prefix 추출 로직이 파일명 형식에 강하게 결합돼 있어서 형식이 조금만 달라도 바로 undefined가 났다.
이 과정에서 코드와 데이터의 계약(형식 약속)이 얼마나 중요한지 실감했다. SO2026001.pdf라는 파일명 형식이 /^[A-Z]+/ 정규식, JSON Server 엔드포인트 매핑, HTML builder 함수까지 전부 연결되어 있었다.
3/22에는 재전송 기능도 붙였다. 기존 실패 레코드를 삭제하고 새 레코드를 POST하는 방식으로 구현했는데, 이후 정렬 로직과 맞물려 재전송 메일이 목록 최상단에 오지 않는 문제가 생겼다. 이건 3/23에 해결했다.
3/23 — 마무리와 피드백 반영
팀 코드 리뷰에서 두 가지 피드백을 받았다.
메일 이력에 페이지네이션이 없다
목록이 오래된 순이라 최신 메일이 아래에 있다
둘 다 처음 개발할 때 미처 챙기지 못한 부분이었다. BasePagination을 내가 직접 만들어놨으면서 정작 내 화면에 적용을 안 한 게 부끄러웠다.
수정하면서 재미있는 부분이 있었다. 역순 정렬을 sentAt 날짜 기준으로만 하면 같은 날짜 내 재전송 메일이 최상단에 오지 않는 문제가 있었다. JS의 Array.sort()는 stable sort라 동일 키의 원소는 원래 순서를 유지하는데, JSON Server는 삽입 순으로 반환하기 때문에 재전송된 새 레코드가 같은 날짜 그룹의 맨 마지막에 자리 잡는 것이었다.
.reverse() 후 .sort()를 하면 삽입 역순이 stable sort의 tiebreaker로 작동해서 해결된다는 걸 알게 됐다. 작은 한 줄이지만 배운 게 많았다.
한 주를 돌아보며
구분내용구현 완료 화면기록관리, 컨택 리스트, 메일 이력, 활동기록 패키지기여 공통 컴포넌트BasePagination, TableActions, SearchableCombobox 개선주요 버그 해결clientId 타입 불일치, PO ID 형식 통일, IME 이중 입력, 재전송 정렬
잘한 점이라면, 화면(UI) 먼저 완성한 뒤 기능(API 연동)을 붙이는 팀 컨벤션을 지킨 것이다. 덕분에 팀원들과 병렬로 작업하면서도 충돌을 최소화할 수 있었다.
아쉬운 점은 ID 형식 같은 데이터 계약을 처음부터 팀과 명확히 정하지 않은 것이다. 중간에 형식을 바꾸느라 여러 파일을 동시에 수정하게 됐고, 그게 충돌의 원인이 되기도 했다.
내일부터는 백엔드 연동을 준비해야 한다. JSON Server 기반으로 짠 코드가 실제 API와 얼마나 잘 맞을지가 관건이다. Axios 인스턴스를 공통으로 쓰도록 설계해둔 게 이때 빛을 발하길 바란다.
중간 발표 후기
일요일에 팀원 한명과 같이 발표자료와 대본 그리고 리허설까지 계속 봐주면서 팀원과 발표를 준비했었다. 발표준비도 제대로 된 발표도 처음해보는거라 전날부터 너무 긴장됐다...
기획부터 프론트 구현까지 우리팀원들이 너무 고생한걸 알아서 내가 발표를 못해서 우리가 열심히 한 내용을 남들이 다 몰라줄까봐 열심히 준비했고, 아침부터 최대한 대본도 외우고 예상질문도 몇개 준비해서 멋있게 대답하고 싶었다...
근데.. 막상 발표 시작하니까 진짜 너무 긴장돼서 여유도 없었고 결국 대본만 보고 읽었던 것 같다... 발표가 끝나고 팀원들한테 미안한 마음이였는데 고생했다고 잘했다고 해줘서 더 미안했던 것 같다.
앞으로 살아가면서 발표를 더 중요한 상황에서 하게될텐데 발표할 기회를 준 팀원한테 너무 고맙다.
매니저님과 강사님께서 ppt에 글이 너무 많다, 목소리에 높낮이가 없어서 좀 지루했다는 피드백을 받았는데 앞으로 점점 고쳐나가야겠다!
아직은 발표가 너무 무섭긴한데 다음 발표때는 더 많이 준비해서 더 좋은 모습 보여주고싶다..!
