이론만 공부했던 배열의 다양한 메소드를 사용해 보는 연습을 하기 위한 미니 프로젝트를 진행했다. 배열 메소드를 사용하는 것보다는 배열의 데이터를 프론트에 표시하는 방법에 대해서 더 고민을 많이했고 결국엔 내가 할 수 있는 방법으로 완성할 수 밖에 없었던 것이 아쉬웠다.
미니 프로젝트 게이트 페이지 바로가기>

최종 결과물

• 'Add User' : 더미 데이터에서 사용자 데이터를 가져와 추가한다.
• 'Remove User' : 표시된 사용자 중 가장 아래 사용자를 제거한다.
• 'Add Money' : 사용자 금액에 100, 1000, 10000달러를 일괄 추가한다.
• 'Sort User By Money' : 사용자 금액을 기준으로 오름차순 정리한다.
• 'Sum money' : 합계 금액을 노출한다.

Java Script

function showUser() {  // 사용자 리스트 배열의 데이터를 표시해 주는 함수
  while (userContainer.hasChildNodes()) {
    userContainer.removeChild(userContainer.lastChild);
  }  // 표시 내용 초기화
  for(let user of users) {
    const newDiv = document.createElement('div')
    userContainer.appendChild(newDiv);
    newDiv.innerHTML = `${user.name} $ ${user.money}`;
  }  // 사용자 리스트 배열을 <div> 요소 노드로 추가하여 표시 
}

showUser();  
// 최초로 페이지 로드 시 기본 사용자 리스트 표시 함수 실행
// 최초 사용자 리스트에는 Jason, Olson, Jake, Kasey가 들어있다.

// 1. Add User
addUserBtn.onclick = function() {  // 버튼 클릭 시 실행
  if(dummyData.length > 0) {
    users.push(dummyData.shift());  
    // 더미 배열의 1번째 사용자를 추출하고 사용자리스트 배열의 가장 뒤에 추가
    showUser();  // 변경된 사용자 리스트 표시
  } else {
    alert("User doesn't exist.")  // 더미 배열에서 모든 데이터를 가져왔다면 얼럿 표시
  }
}

// 2. Remove User
removeUserBtn.onclick = function() {  // 버튼 클릭 시 실행
  if(users.length > 0) {
    dummyData.unshift(users.pop()); 
    // 사용자리스트 배열 가장 뒤에서 사용자를 추출하고 더미배열 가장 앞에 추가. 
    // 그래야 다시 추가 버튼을 클릭하면 제거했던 데이터가 나타남
    showUser();   // 변경된 사용자 리스트 표시
  } else {
    alert("User doesn't exist.")  // 사용자 리스트에 데이터가 없을 경우 얼럿 표시
    location.reload();  // 페이지 리로드 해 showUser()함수 다시 실행
  }
}

// 3. Add Money 
// 추가되는 금액만 다르고 로직은 같기 때문에 'addMoney()'함수를 선언하고 파라미터를 활용하여 함수 실행
function addMoney(value) {
  for(const user of users) {
    user.money += value;  // 사용자 리스트의 money값에 매개변수(금액)을 더함
  }
  showUser();  // 변경된 금액을 반영하기 위해 리스트 표시 함수 실행 
}

addHundredBtn.onclick = () => addMoney(100); 
// Add Money($100) 버튼 클릭 시 100을 매개변수로 addMoney() 함수 실행
addThousandsBtn.onclick = () => addMoney(1000);
// Add Money($1000) 버튼 클릭 시 1000을 매개변수로 addMoney() 함수 실행
addTenThousandsBtn.onclick = () => addMoney(10000);
// Add Money($10000) 버튼 클릭 시 10000을 매개변수로 addMoney() 함수 실행

// 4. Sort User By Money
sortUserBtn.onclick = function() {  // 버튼 클릭 시 실행
  users.sort((a, b) => a.money - b.money);  // 사용자 금액끼리 비교해 오름차순 정리
  showUser();  // 변경된 금액을 반영하기 위해 리스트 표시 함수 실행 
}

// 5. Sum Money
sumMoneyBtn.onclick = function() {  // 버튼 클릭 시 실행
  sumResult.innerHTML =
  users.reduce((pre,curr) => pre + curr.money,0);  // 사용자 금액을 누적 합산하여 표시
}

이번 프로젝트로 push, pop, shift, unshift, sort, reduce까지 다양한 배열 메소드를 사용해 볼 수 있었다. 이론적으로 보고 넘기는 것보다 실제로 사용하는 것이 확실히 메소드를 익히는데에 좋은 것 같다.

위의 코드의 경우 사용자와 금액에 변화가 있을 경우 변화를 먼저 배열에 저장하고 배열을 처음부터 다시 노드로 추가하여 표시하는 방법을 사용하고 있는데 변화된 내용만 반영하여 수정하는 방법을 공부해서 코드를 수정해 봐야겠다.

TIL - 매개변수를 가진 함수 이벤트 실행

function addMoney(value) {
  for(const user of users) {
    user.money += value;  
  }
  showUser();  
}

addHundredBtn.onclick = () => addMoney(100); 
addThousandsBtn.onclick = () => addMoney(1000);
addTenThousandsBtn.onclick = () => addMoney(10000);

위와 같이 기존 금액에 일정 금액을 더하는 addMoney() 함수를 선언하고 버튼에 따라 변할 금액을 value라는 매개변수로 두었다. 그리고 각 버튼에 클릭 이벤트가 있을 때 마다 함수가 실행되도록 addHundredBtn.onclick = addMoney(100);로 코드를 작성 했는데 계속 오류가 발생했다.
페이지 로드 시 100, 1000, 10000을 더하는 함수가 자동 실행되고 버튼 클릭 시에는 함수가 실행되지 않았다. 어느 부분에서 문제가 발생한지 찾아본 결과 매개변수를 가진 함수는 이벤트 실행 시 익명함수로 호출해야 한다는 것을 알게 되었다.

즉, 아래와 같이 작성해야 한다.

const obj = document.querySelector('#text');
function example1(parm) { console.log(parm)};  // 매개변수가 있는 경우
obj.onclick = function(){example1(parm1)}; 
obj.onclick = () => example1(parm1);
obj.addEventListener('click', function() {example1(parm1)});