[11주차 WIL] 머신러닝 프로젝트 완성후기

또 다시 프로젝트가 하나 끝났습니다..!! 우왕~~~
열정 가득했던 머신러닝 프로젝트 후기 시작합니다..!!!
 
 

💰리.치.메.이.커.💰

우리 프로젝트의 사랑스러운 로고~

 

1. 프로젝트 개요

A community site that manage consumption habits, participate in challenges, collect assets, and communicate with each other

수입, 저축, 지출을 기록할 수 있고, 자신의 소비패턴을 파악할 수 있습니다. 챌린지 참여를 통해 목표를 이룰 수 있습니다...! 영수증 인식 기능을 통해 직접 기록하지 않아도 소비를 기록할 수 있습니다. 수입, 저축, 지출 내역을 한 눈에 알아볼 수 있고, 적정 소비 금액과 소비 가능 금액을 분석해드립니다. 체계적인 분석과 확실한 목표의식으로 돈 모으는 습관을 만들 수 있습니다.

 
 
2. 프로젝트 목표

• Signup, Signin, Email Authentication
• Create challenges, modify and delete them
• Record your consumptions, incomes, and savings
• Modify and delete your consumptions, incomes, and savings
• Analyze your consumptions
• Profile, find your password
• Write or modify or delete comments so you can communicate each other!!

 
 
3. 프로젝트에서 마음에 드는 코드
달력의 날짜를 입력하면 그 날짜에 해당하는 수입, 지출, 저축 정보가 나오게 하는 코드가 가장 마음에 듭니다.

// 날짜 선택
function choiceDate(nowColumn) {
  if (document.getElementsByClassName("choiceDay")[0]) {                              // 기존에 선택한 날짜가 있으면
    document.getElementsByClassName("choiceDay")[0].classList.remove("choiceDay");  // 해당 날짜의 "choiceDay" class 제거
  }
  nowColumn.classList.add("choiceDay"); // 선택된 날짜에 "choiceDay" class 추가
  Choicelist();
}

// 선택한 날짜에 대한 정보 불러오기
async function Choicelist() {
  const year = document.getElementById("calYear").innerText
  const month = document.getElementById("calMonth").innerText
  const date = document.getElementsByClassName("choiceDay")[0].innerText
  const day = year + '-' + month + '-' + date

  const response_minus = await getMinus(day)
  //console.log(response_minus)

  const response_minus_json = await response_minus.json()
  //console.log(response_minus_json)

  const newbox = document.getElementById('minus-box-choice')
  newbox.setAttribute("style", "margin-top:10px;")

  if (response_minus_json != "") {
    newbox.innerText = "당신의 소비는?"
    response_minus_json.forEach(e => {
      const newdiv = document.createElement("div")
      newdiv.setAttribute("class", "minusinfo")
      const newP1 = document.createElement("span")
      newP1.setAttribute("style", "margin-right:20px;")
      newP1.innerText = "지출내역:  " + e["placename"]
      const newP2 = document.createElement("span")
      newP2.innerText = "지출금액:  " + e["totalminus"] + "원"
      newdiv.appendChild(newP1)
      newdiv.appendChild(newP2)
      newbox.appendChild(newdiv)
    })
  } else {
    newbox.innerText = "당신은 절약의 왕~!! 지출이 없습니다."
  }
  // 총 지출 금액
  let all_minus = 0
  response_minus_json.forEach(e => {
    all_minus = all_minus + e["totalminus"]
  })
  const totalminussum = document.getElementById('total-minus-choice')
  totalminussum.innerText = "총 지출 금액:  " + all_minus + "원"

  const response_plus = await getPlus(day)
  const response_plus_json = await response_plus.json()
  //console.log(response_plus_json)

  const newbox2 = document.getElementById('plus-box-choice')
  newbox2.setAttribute("style", "margin-top:10px;")

  if (response_plus_json != "") {
    newbox2.innerText = "당신의 저축은?"
    response_plus_json.forEach(e => {
      const newdiv = document.createElement("div")
      newdiv.setAttribute("class", "plusinfo")
      const newP1 = document.createElement("span")
      newP1.setAttribute("style", "margin-right:20px;")
      newP1.innerText = "챌린지명:  " + e["challenge_title"]
      const newP2 = document.createElement("span")
      newP2.setAttribute("style", "margin-right:20px;")
      newP2.innerText = "저축액:  " + e["plus_money"] + "원"
      newdiv.appendChild(newP1)
      newdiv.appendChild(newP2)
      newbox2.appendChild(newdiv)
    })
  } else {
    newbox2.innerText = "저축 좀 하고 삽시다!!!"
  }

  // 총 저축 금액
  let all_plus = 0
  response_plus_json.forEach(e => {
    all_plus = all_plus + e["plus_money"]
  })
  const totalplussum = document.getElementById('total-plus-choice')
  totalplussum.innerText = "총 저축액:  " + all_plus + "원"

  const response_income = await getIncome(day)
  const response_income_json = await response_income.json()
  //console.log(response_income_json)

  const newbox3 = document.getElementById('income-box-choice')
  newbox3.setAttribute("style", "margin-top:10px;")

  if (response_income_json != "") {
    newbox3.innerText = "당신의 수입은?"
    response_income_json.forEach(e => {
      const newdiv = document.createElement("div")
      newdiv.setAttribute("class", "incomeinfo")
      const newP1 = document.createElement("span")
      newP1.setAttribute("style", "margin-right:20px;")
      newP1.innerText = "수입:  " + e["income_money"] + "원"
      newdiv.appendChild(newP1)
      newbox3.appendChild(newdiv)
    })
  } else {
    newbox3.innerText = "마음이 아프니 아무 말도 하지 않겠어요..."
  }

  // 총 수입 금액
  let all_income = 0
  response_income_json.forEach(e => {
    all_income = all_income + e["income_money"]
  })
  const totalincomesum = document.getElementById('total-income-choice')
  totalincomesum.innerText = "총 수입:  " + all_income + "원"

}

코드가 많이 길죠..?ㅎㅎㅎ 그만큼 손을 많이 썼던 코드입니다~
 
핵심 개념은, 날짜를 누르면, id 명을 바꿔줌으로써 해당 날짜에 대한 정보를 불러오는 것입니다.
 
 
 
4. TroubleShooting

• 깃허브 이슈.. 머지를 했더니 모든 코드가 뒤죽박죽 섞여버렸다..ㅎㅎ
• 원인으로 예상되는 것은 같은 파일에서 여러 명의 사람이 각자 코드를 생성해서인 것 같습니다.
• 이런 경우, 어떻게 깃허브를 관리해야 코드가 섞이지 않을지 여전히 고민이 됩니다..
• 머지할 때마다 충돌이나 코드가 사라지는 이슈가 있었어서 이번 프로젝트를 하면서 복구하고 머지하고를 반복했었습니다.

 
 
5. 느낀 점

• 이번주 내내 새벽코딩을 하면서 프로젝트에 열정적으로 임했습니다. 이렇게 열정적으로 참여하는 경험을 할 수 있어서 좋았습니다 ㅎㅎ
• 배운 점으로는, poetry로 개발환경 구축하고 관리하는 법, mySQL 외부 db를 사용한 경험, 깃이모지를 활용한 코드컨벤션, api.js로 fetch함수들을 분리하여 관리하고 import하여 쓰는 법 등등 많은 것들을 배웠습니다.
• 그 중에서 fetch함수들을 분리하여 관리하고 import하여 쓰면서 자바스크립트의 동작순서나 흐름에 대해 조금은 익숙해질 수 있었습니다.
• 자바스크립트의 비동기, 동기 개념에 대해서 좀 더 공부를 해봐야겠다는 생각을 하게 되었습니다.
• 배포랑 소셜로그인, 테스트코드 작성을 마무리하지 못했는데, 이 부분도 다음주 내로 (최종 프로젝트 전에..!) 끝낼 예정입니당~~ 포기하지 않겠어요!!
• 한 주동안 함께 달렸던 우리 팀원분들 너무 감사하고 사랑한다는 말을 하고 싶습니다~~

 
 
6. 다음 주 예고

1. 도커 강의 밀리지 않고 다 듣기
2. 배포하기
3. 소셜로그인 하기
4. 테스트코드 작성하기
5. 프로젝트 보완하기!!
6. 최종 전까지 개념 정리하고 복습하기

 

 

관련게시글

---

2023.05.26 - [Project Portfolio] - [JS] 달력 만들기

[JS] 달력 만들기

2023.05.29 - [Project Portfolio] - [JS] 달력 날짜 누르면 날짜에 해당하는 저축, 소비, 지출 불러오기

[JS] 달력 날짜 누르면 날짜에 해당하는 저축, 소비, 지출 불러오기