2주에 걸쳐 자바스크립트 토이 프로젝트를 진행했다.
처음으로 figma 디자인 시안을 받아서 작업해보면서 현업에서는 어떤식으로 프로젝트가 진행되는지 미약하게나마 감을 잡을 수 있었다.
프로젝트 진행 중 가장 오랜시간이 걸렸던 작업은 JSON 데이터를 받아와서 바인딩 하는 작업이었는데 , 내가 원하는 데로 데이터를 가공하는 과정에서 많은 고민과 시행착오를 겪었다.
{
"bankList": [{
"date": "2021-09-01",
"income": "in",
"classify": "",
"history": "용돈",
"price": 20000
},
{
"date": "2021-09-01",
"income": "out",
"classify": "health",
"history": "샐러드",
"price": 10000
}, ...
//날짜 데이터만 중복 없이 추출
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)];
}
// 날짜별 데이터 배열 만들기
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]],
[]
);
// 날짜별 사용금액 합산한 배열 만들기
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;
}
}
}
// 날짜별로 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);
}
}
// 사용내역별 지출액만 뽑아서 배열로
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(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]}`;
}
}
}