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