상세 컨텐츠

본문 제목

[정산타임] 왜, 무엇을, 어떻게 만들었는가? | 사이드프로젝트, vue.js

Project/정산타임

by yooputer 2025. 3. 7. 13:31

본문

https://yooputer.github.io/

 

jungsantime-front

 

yooputer.github.io


WHY

이 프로젝트는 나의 아주 사소한 불편에서 시작되었다. 

아래와 같은 상황을 좀 편하게 해결하고자 이 프로젝트를 기획하게 되었다.

 

A, B, C, D, E라는 인물을 통해 상황을 설명해보겠다. 

A의 생일날 B의 집에 모여 함께 놀기로 했다. 

모두 B의 집에는 처음 가는거라 집들이 선물을 사가기로 했다. 

C가 A의 케이크를 사고, D가 B의 집들이 선물을 사고 B는 다함께 먹을 음식을 샀다. 

 

그럼 A의 케이크값을 B, C, D, E가 C에게 송금하여야 하고

B의 집들이선물값을 A, C, E가 D에게 송금하여야 하고

음식값을 A, C, D, E가 B에게 음식값을 송금해야 한다. 

 

여러 사람이 결제를 하고, n빵하는 대상이 달라지는 경우 

정산하기 매우 빡세다...! 

 

그래서 위와같은 상황에서 쉽게 정산할 수 있도록 도와주는 계산기를 만들어야겠다고 생각했다.


WHAT

정산타임이 제공하는 기능은 다음과 같다

  1. 사용자 및 결제내역을 입력한다.
  2. 송금해야하는 금액을 계산한다. 
  3. 입력한 내용이 브라우저에 저장된다(새로고침해도 입력값이 초기화되지 않는다)


HOW

딱 보면 알겠지만 페이지가 딱 하나고, 기능도 딱히 없다. 

계산기라는게 그런거니까...? 

그래서 별도의 백엔드 서버 없이 프론트엔드만 구현하기로 했다. 

 

프론트엔드 프레임워크는 내가 좋아하는 vue.js로 선택했다. 

빠르게 구현하고 싶었고 실무에서 vue.js 쓸일이 없어져서 연습도 좀 하고싶었다. 

vue.js 버전은 3이고, Optons API를 사용했다. 

 

배포를 위해 굳이 별도의 서버를 파고싶지 않아서

GitHub Page을 이용하여 배포했다. ㅎㅎ