[패스트캠퍼스 프론트엔드 과정] (4~5주차 - 2022.05.02~13)

Byoungmin Kang·2022년 5월 17일
0

토이프로젝트

2주에 걸쳐 자바스크립트 토이 프로젝트를 진행했다.
처음으로 figma 디자인 시안을 받아서 작업해보면서 현업에서는 어떤식으로 프로젝트가 진행되는지 미약하게나마 감을 잡을 수 있었다.

프로젝트 진행 중 가장 오랜시간이 걸렸던 작업은 JSON 데이터를 받아와서 바인딩 하는 작업이었는데 , 내가 원하는 데로 데이터를 가공하는 과정에서 많은 고민과 시행착오를 겪었다.

JSON 데이터 가공하기

{
	"bankList": [{
		"date": "2021-09-01",
		"income": "in",
		"classify": "",
		"history": "용돈",
		"price": 20000
	},
	{
		"date": "2021-09-01",
		"income": "out",
		"classify": "health",
		"history": "샐러드",
		"price": 10000
	}, ...
  • 이런 형태의 데이터를 날짜별로 나누고 날짜별 price 의 합산액 , history 와 history 별 사용액 을 보여주면 되는데, 이를 위해 먼저 날짜 데이터만 중복없이 추출하여 배열로 만들었다.

날짜별 데이터 배열 만들기

   //날짜 데이터만 중복 없이 추출
   let newDate;
   let sum = 0;
   function drawDate() {
     let temp = [];
     for (let i = 0; i < obj.bankList.length; i++) {
       temp.push(obj.bankList[i].date);
     }
     newDate = [...new Set(temp)];
   }
   
  
  • 날짜만 들어있는 배열이 있으면 날짜별 데이터를 만들기 더 수월할 것이라는 생각으로 만든 배열이다.

날짜별로 구분된 이중배열 만들기

  • 다음으로는 reducer 를 사용해 각 날짜마다의 데이터가 배열로 들어있는 이중배열을 만들어 이 데이터를 가공해서 나머지 바인딩할 데이터를 추출하였다.
  • 날짜마다 배열로 만들어져 있으면 이중 for문을 돌면서 날짜별 금액합 데이터를 추출하기 쉬울 것이라는 생각 이었다.
// 날짜별 데이터 배열 만들기
  const dateMap = obj.bankList.reduce((previousValue, currentValue) => {
    const currDate = currentValue.date;
    previousValue[currDate] = Object.keys(previousValue).includes(currDate)
      ? [...previousValue[currDate], currentValue]
      : [currentValue];
    return previousValue;
  }, {});

  const newArr = Object.keys(dateMap).reduce(
    (previousValue, currentValue) => [...previousValue, dateMap[currentValue]],
    []
  );
 

날짜별 사용금액 합산한 배열 만들기

  • 위에서 가공한 newArr 배열을 활용해 날짜별 사용금액 합산 배열을 만들었다.
  // 날짜별 사용금액 합산한 배열 만들기
  let priceSumArr = [];
  for (let i = 0; i < newDate.length; i++) {
    priceSumArr[i] = 0;
    for (let j = 0; j < newArr[i].length; j++) {
      if (newArr[i][j].income == "out") {
        priceSumArr[i] -= newArr[i][j].price;
      } else {
        priceSumArr[i] += newArr[i][j].price;
      }
    }
  }
  • 이중 for문을 돌면서 배열마다 금액을 더해 새로운 배열에 넣어주었다.
  • 조건문을 사용해 income의 타입에 따라 'in' 일때는 더해주고 , 'out' 일때는 빼주었다.

날짜별 history 배열 만들기

  // 날짜별로 item만 뽑아서 배열로
  let items = []; //30
  for (let i = 0; i < newDate.length; i++) {
    items[i] = [];
    for (let j = 0; j < newArr[i].length; j++) {
      items[i].push(newArr[i][j].history);
    }
  }
  • 마찬가지로 이중 for문을 돌면서 날짜별 사용내역만 뽑아서 새로운 배열을 만들다.

사용 내역별 지출액 배열 만들기

  // 사용내역별 지출액만 뽑아서 배열로
  let priceList = []; //30
  for (let i = 0; i < newDate.length; i++) {
    priceList[i] = [];
    for (let j = 0; j < newArr[i].length; j++) {
      priceList[i].push(newArr[i][j].price);
    }
  }
  • 이 배열 역시 마찬가지로 이중 for문을 돌면서 사용 내역별 지출액만 뽑아서 배열로 만들었다.

데이터 바인딩 하기

  • 데이터를 바인딩할때도 이중 for문을 이용하였다.
  • 해당 날짜와 날짜 별 금액 합 데이터는 첫번째 for문 안에서 반복하고 , 날짜별 사용내역과 사용내역별 금액 데이터는 두번째 for문 안에서 반복해 주었다.
for(let i = 0 ; i < newDate.length ; i++){
  historyTitle.appendChild(date); //날짜
    date.innerHTML = newDate[i];
    historyTitle.appendChild(sumSpending); // 날짜별 사용금액 합
    sumSpending.innerHTML = priceSumArr[i]
for(let j = 0 ; j < newArr[i].length; j++){
  dailyList.appendChild(item); //날짜별 사용내역
      item.innerText = items[i][j];
      dailyList.appendChild(price); // 내역별 사용금액
      if (newArr[i][j].income === "out") {
        price.innerText = `-${priceList[i][j]}`;
      } else if (newArr[i][j].income === "in") {
        price.innerText = `+${priceList[i][j]}`;
      }
	}
}

피드백

날짜만 있는 데이터를 만들 필요가 있었을까?

  • 코드를 짤 당시에는 내가 알아보기 쉽게 데이터를 가공하는 것만 생각하고 있어서 미처 체크하지 못했는데 , 날짜별로 데이터를 모아둔 이중배열 newArr 만 가지고도 날짜 데이터를 바인딩 할수 있었을 것이다.
  • 앞으로는 데이터를 가공할 때 재사용성에 대해 더욱 고려해봐야 겠다.

함수로 작성하는건 어땠을까?

  • 아직 함수 사용이 익숙하지 않은것 같다. 반복문을 계속 사용하다 보니 코드가 정리 되어있지 않고 난잡해 보인다. 앞으로는 반복문 내에서 함수를 호출하는 방식으로 코드를 작성하는 연습을 많이 해야 될것 같다.

0개의 댓글