[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프(프론트엔드) 7회차

📝 수업 내용

GitHub - udemy-team18/practice: 유데미 x 스나이퍼 팩토리 10주 완성 프로젝트 부트캠프 18팀 실습 저장소

유데미 x 스나이퍼 팩토리 10주 완성 프로젝트 부트캠프 18팀 실습 저장소. Contribute to udemy-team18/practice development by creating an account on GitHub.

github.com

오랜만에 바닐라js를 하면서 document.getElementBtId 등 DOM을 다뤘다.

createElement, appendChild, addEventListener등 오랜만에 사용해보는 기능들이 있었다.

장바구니, 채팅, Todo List 등 간단한 동작들을 구현하면서 다시 한번 js를 공부하는 계기가 되었다.

1. previousElementSibling

장바구니를 만들 때 사과, 바나나 버튼을 각각 클릭하면 장바구니란에 추가되도록 해야했는데

나는 처음에 다음과 같이 각 버튼을 클릭하면 addItem 함수를 실행하여 장바구니에 추가되는 코드를 짰다.

apple.addEventListener("click", () => {

addItem("사과", "1000원");

});

banana.addEventListener("click", () => {

addItem("바나나", "1500원");

});

하지만 중복이 있으니 그다지 좋은 코드는 아니라고 생각하던 중에 강사님께서 과일의 갯수, 즉 버튼의 갯수가 늘어날 경우를 위한 코드로 다음과 같이 업그레이드 시켜주셨다.

//버튼 갯수가 더 늘어나는 경우

buttons.forEach((button) => {

button.addEventListener("click", () => {

const productName =

button.previousElementSibling.previousElementSibling.textContent;

const productPrice = button.previousElementSibling.textContent;

addItem(productName, productPrice);

});

여기서 previousElementSibling를 처음 접했다.

이전 형제 엘리먼트에 접근하는 방법으로 나처럼 각 과일의 이름과 금액을 직접 넣어주지 않아도 html에서 알아서 찾게끔 한 코드인 것이다.

내가 했던 코드는 직관적이지만 과일의 갯수가 늘어날수록 반복된 코드도 많아진다는 단점이 있었는데

강사님의 코드는 다소 덜 직관적이지만 과일의 갯수가 늘어나도 코드의 길이가 더 길어지지 않아 효율적이라는 장점이 있는 것 같다.

항상 강사님처럼 효율적인 코드를 짜도록 노력하는 것이 필요하겠다.

수업 내용 이미지 출처 : [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 정동훈 강사님 강의 자료

—————————————————————————————————————————
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
—————————————————————————————————————————