더 모아(The More) 미니 프로젝트 회고록

1. 프로젝트 소개

 

📆 진행기간

 

2024. 03. 15. 금 ~ 2024. 03. 25. 월

 

---

 

🤝팀 소개

- 팀명

I들 (or i들 or 아이들 or iiiiii들)

- 팀 소개

MBTI가 전부 I로 시작하는 여섯 명으로 구성된 팀

- 팀 구성

팀 구성원들의 역할과 책임, 팀원들의 개인적인 강점

 

---

 

🗣️프로젝트 소개

- 프로젝트명

TheMore (더 모아)

- 프로젝트 설명

저희가 진행한 프로젝트는 예산 및 수입/지출 내역을 작성하고,

지출 내역을 사람들끼리 채팅으로 공유할 수 있는 풀 스택 프로젝트입니다.

고금리, 고물가 시대에 '무지출 챌린지'를 하는 사람들이 등장할 정도로

지출을 줄이고 저축하고자 하는 사람들이 많아졌습니다.

또한 여러 사람들이 모여 지출 줄이기를 독려하거나 절약 습관 등을 공유하는 

카카오톡 오픈채팅방 '거지방'이 생겨나기도 했습니다.

따라서 저희는 사람들과의 소통을 통해 절약 습관에 대한 피드백을 주고 받고, 

통계로 수입/지출 내역을 가시화하여 현명한 소비 습관을 기를 수 있는 가계부 웹 사이트를 만들고자 하였습니다.

- 내 역할

• FE, BE - [ 가계부 ] 수입 및 지출 작성
• FE, BE -  [ 가계부 ] 수입 및 지출  삭제
• FE, BE -  [ 가계부 ] 수입 및 지출  조회
• FE -  [ 가계부 ] 절약 명언API
• FE - 페이지 디자인
• BE -  [ DB ] ERD 작성
• BE -   [ DB ] DB 생성
• BE -   [ Server ] 패키지 구조화

이외에도 팀장을 처음하시는 팀장님을 보조하여 프로젝트 설계를 하였고, 서기 역할을 하였습니다.

 

---

 

🌟사용 스택

- Frontend

- Backend

- 협업툴

↓클릭 시 이동↓

 

---

 

🔨사용 툴

 

---

 

🎨와이어프레임

↓클릭 시 이동↓

 

---

 

🌟라이브러리

 

이 외에도 Swal2(Sweet Alert2)를 사용하여 alert창을 꾸몄습니다.

 

---

 

✍️사용자 요구사항 명세서

노션을 통해서 기능/부기능으로 나누고 기능명과 상세 설명을 적었으며, 우측에는 담당자를 작성하였습니다.

 

---

 

2. 프로젝트 진행 과정

 

노션	슬랙
프로젝트 며칠 전부터 주제를 논의하고 회의록 작성	화면 공유를 통해 자신의 의견 공유 및 설명, 필요한 파일 공유
깃	ERD
main branch에서 dev_front, dev_back으로 분기하여 프로젝트를 관리하였습니다. dev 브랜치에서 기능 구현 시에는 feat, 수정 시에는 fix, 삭제 시에는 del 브랜치로 분기하여 관리하였습니다.	회원 정보를 담은 Users, 예산 정보를 담은 Budget, 수입 지출 정보를 담은 Expenses, 카테고리 정보를 담은 Category 테이블로 설계하였습니다.

 

---

 

3. 프로젝트를 통해 배운점

 

새로운 기술 습득

프로젝트를 진행하면서 소켓과 자바스크립트에 대한 스스로의 이해도를 점검할 수 있었습니다.

웹 소켓을 이용하여 데이터를 주고 받는 과정에 대해서 더 자세하게 이해할 수 있었고,

자바스크립트로 클래스를 만들어 활용하는 방법에 대해서도 배울 수 있었습니다.

 

효율적인 코드

과거에 프로젝트를 진행할 때에는 구현에만 급급했다면,

이번 프로젝트를 통해서는 코드 작성을 잘하시는 팀원 분의 이야기를 들으며

더 효율적이고 메모리를 적게 차지하는 코드에 대해서 고민해볼 수 있었습니다.

 

협업 태도

자바스크립트 숙지의 미숙으로 코드 작성시 문제점이 발생할 때가 많았습니다.

문제가 발생하면 우선 스스로 해결해보려고 노력하였고,

그런데도 해결이 어려우면 팀원들과 공유하고 해결해나갔습니다.

자신이 담당한 기능이 아닌데도 적극적으로 도와주는 팀원 덕분에

마지막까지 힘을 내서 작업을 할 수 있었습니다.

저 또한 어려움을 겪는 팀원이 있을 때 함께 해결하려고 노력하였습니다.

기능 구현에 어려움을 겪어 기능을 다 완수하지 못하고 기능을 넘기는 팀원이 생겼을 때,

내가 더 성장할 수 있는 기회를 얻었다는 긍정적인 태도 역시 기를 수 있게 되었습니다.

 

---

 

4. 아쉬운 점

 

화면 설계

화면 설계를 조금 더 구체적으로 했더라면 프론트 쪽 작업을 할 때 조금 더 수월했을 것 같습니다.

모호하게 설계했던 부분 때문에 실제 설계 시 어려움을 겪었습니다.

 

과욕

구현하려던 기능을 시간 내에 구현하지 못한 게 있었습니다.

따라서 길지 않은 기간 동안 팀원들의 역량에 비하여 높은 목표를 잡은 것 같다는 생각이 들었습니다.

 

Main branch 통합 에러

마지막에 dev_front branch와 dev_back branch를 main으로 푸쉬할 때, conflict가 발생했습니다.

dev_front branch와 dev_back branch 간 base가 달라서 발생한 문제로,

vsCode를 활용해 코드를 수정하여 conflict를 해결하였습니다.

하지만 이후 확인해보니 유실된 코드가 존재하였습니다.

👉 브랜치를 모두 비운 후 제대로 작성된 코드를 붙여넣고 통합하여 처리하였습니다.

git 공부를 더 열심히 해야겠다고 생각했습니다.

 

보안

수입/지출 내역 삭제 시 Id 값을 화면에서 보이지 않게 처리를 해놓았으나,

개발자 창에 들어가면 누구나 쉽게 볼 수 있다는 문제점이 있었습니다.

따라서 다음 DB 설계를 할 때는 복합키를 만들어 관리를 해야겠다고 생각했습니다.

 

---

 

5. 기억하고 싶은 것

 

소켓 통신

구조를 노트에 도식화 해보았다..

저희 조는 채팅을 위한 채팅 서버, 그 외 기능을 위한 일반 서버를 개설하였고,

소켓도 채팅을 위한 소켓, 일반 기능을 위한 소켓으로 나눠 코드를 작성하였습니다.

 

소켓 통신과 관련하여
기억하고 싶은 코드

위 코드는 자바 웹 소켓 라이브러리를 이용한 onMessage 메서드입니다.

Sever 쪽에서 cmd를 받아 ServiceImpl의 parse 메서드를 호출하는 코드이고,

아래에 있는 parse 메소드는 Server 클래스에서 클라이언트로부터 받은 cmd에 따라 ServiceImpl 클래스 내에서 다시 명령어(cmd2)를 받아 적절한 메소드가 호출하는 역할을 합니다.

@Override
	public void onMessage(WebSocket conn, String message) {

		JSONObject msg = new JSONObject(message);

		String cmd = msg.getString("cmd");

		System.out.println("메시지 수신: " + message);
		System.out.println(cmd);

		if (cmd.equals("User")) {
			userService.parse(conn, msg, sessionUser);

		} else if (cmd.equals("Expenses")) {
			expensesService.parse(conn, msg);

		} else if (cmd.equals("Budget")) {
			budgetService.parse(conn, msg);
			
		} else if (cmd.equals("grap")) {
			expensesService.parse(conn, msg);
		}
	}

	@Override
	public void parse(WebSocket conn, JSONObject json) {
		String cmd2 = json.getString("cmd2");

		switch (cmd2) {
		case "insertExpenses":
			this.insertExpenses(conn, json);
			break;
			
		case "deleteExpenses":
			this.deleteExpenses(conn, json);
			break;
			
		case "updateExpenses":
			this.updateExpenses(conn, json);
			break;
			
		case "getExpensesList":
			JSONObject expensesList = this.getExpensesList(conn, json);
			conn.send(expensesList.toString());
			break;
        }
	}

 

아래는 자바스크립트로 작성한 messageHandler.js 코드입니다.

서버에서 보낸 cmd 값에 따라 적절한 메소드를 호출하고 있는 코드입니다.

import { Socket } from './socket.js';
import { Chat_log, Message } from '../chat_log.js';
import { ExpenseAdd, ExpensesBox, Calendar } from '../account.js';

function initialize() {
    const host = '192.168.0.73';
    const port1 = 8080;
    const port2 = 9000;

    const mainSocket = new Socket(host, port2, () => {});

    const chat_log = new Chat_log(host, port1);
    const expenseAdd = new ExpenseAdd(mainSocket);
    const expensesBox = new ExpensesBox(mainSocket, expenseAdd);
    const calendar = new Calendar(mainSocket, expensesBox);
    calendar.displayExpenseBox();

    function messageHandler(data) {
        const jsonData = JSON.parse(data);
        const cmd = jsonData['cmd'];

        if (cmd == 'insertExpenses') expenseAdd.insertHandler(jsonData);
        else if (cmd == 'deleteExpenses') expensesBox.deleteHandler(jsonData);
        else if (cmd == 'getExpensesList') expensesBox.listHandler(jsonData);
    }
    mainSocket.setCallback(messageHandler);
}

initialize();

 

---

 

6. 시연 영상

 

회원가입 및 로그인

 

로그인, 채팅, 가계부

 

---

 

7. 마침말

짧은 기간 동안 잘 해내야만 한다는 생각이 들어 압박감을 많이 느꼈었는데

따뜻한 팀원분들 덕분에 팀원들을 조금 더 믿고 의지할 수 있게 되었습니다.

소통이 조금 더 원활했으면 어땠을까, 라는 아쉬움이 남지만 팀원 모두가 최선을 다한 프로젝트였다고 생각합니다.

또한 다음 프로젝트 때는 구현 시 어려움이 줄도록 설계를 더 공고히 해야겠다는 생각이 들었습니다.