참여자
과제 기간
팀 레포 주소
레퍼런스 주소
사용한 기술 스택
구현한 기능
에러 핸들링 문서
개발 참고 문서
어려웠던 점 및 부족한 점
- 아직 DOM 요소로 렌더되기 전이라서 존재하지 않는 div를 쿼리셀렉터로 선택하고 싶을때, 이벤트 위임 외에 어떤 방법이 있는지 궁금합니다. (이벤트 위임으로 처리하니 에러가 많이 발생했음)
- 콘솔창에 에러 자체가 안 뜨게 하는 법이 어려웠다. try catch로 잡고 싶은데 fetch 방식으로 status 상태 코드를 제어하는 것을 잘 몰라서인지 해결하는 게 어려운 것 같다.
- API의 문제인 건지 계좌의 금액이 300만 원 이상(계좌 최초 금액은 300만 원)으로 찍힌 적이 있었습니다.
- 변수에 담으면 지정이 안되는 속성들
- 모듈 상호 참조, 중복코드 없이 toast 기능을 사용할 수 있는 방법
- 현재
- 아이템 삭제버튼 클릭 시에도 toast로 confirm기능을 수행하도록 구현하는 방법 (해결못함)
질문
-
이 부분은 궁금한 점이 생겨 아직 수정하지 않았는데, 리뷰에서 말씀해주신 DOM level 1은 html 파일에 직접 인라인으로
<input type="button" onclick="change()">함수실행코드를 작성하는 방법이 맞을까요? 구글링 해 보니 여러 블로그에서 이런 방식을 추천하지 않는다고 하던데, 리액트 없이 JS만 사용할 때 실무에서도 이런 방식을 많이 활용하는지? js파일에서만 dom을 컨트롤하는 것보다 성능이 떨어지거나 읽기 어려워지진 않는지…
-
아래 이미지처럼 함수 안에 eventListener를 넣는 것도 함수 실행이 종료되면 내부 코드들이 더이상 읽히지 않으니 eventListener로 인한 메모리 누수를 막는 방법이라고 볼 수 있을까요?
-
querySelector 사용을 줄이기 위해 event 객체를 활용하여 코드를 수정 해 보았습니다. closest로 상위요소를 찾아 올라갔다가 다시 childNode, children으로 내려오는 방법을 사용했는데 뭔가 좋은 방법같지는 않아 보입니다… 제품 추가 페이지에 상품태그의 종류가 늘어나게 되면 target의 인덱스도 변경되고 그 때마다 코드를 수정하게 되는데, 그냥 querySelector를 사용하는 게 더 나을지 궁금합니다.
-
반복문에서 직접 DOM속성을 변경하지 않는 코드로 수정해보았습니다. 기존에 제출한 코드에서는 for문 안에 조건문이 있어 해당 조건에 맞을 때만 한번에 변경하도록 했었는데, 수정한 코드와 성능적으로 차이가 있을지 궁금합니다.
// 기존코드 function setChangedData(productId, title, price, description, tags, isSoldOut) { const lists = document.querySelectorAll('tr.product-item') lists.forEach(list => { if (productId === list.dataset.id) { list.querySelector('img').src = document.querySelector('#edit-thumbnail-preview').src list.querySelector('.title').textContent = title; list.querySelector('.price').textContent = price; list.querySelector('.tags').textContent = tags; list.querySelector('.is-sold-out').textContent = isSoldOut? "X" : "O"; list.querySelector('.descript').textContent = description; } }) } // 수정코드 function setChangedData(productId, title, price, description, tags, isSoldOut) { const lists = document.querySelectorAll('tr.product-item') let imgNode = ''; let titleNode = ''; let priceNode = ''; let tagsNode = ''; let soldoutNode = ''; let descriptNode = ''; lists.forEach(list => { if (productId === list.dataset.id) { imgNode = list.querySelector('img') titleNode = list.querySelector('.title') priceNode = list.querySelector('.price') tagsNode = list.querySelector('.tags') soldoutNode = list.querySelector('.is-sold-out') descriptNode = list.querySelector('.descript') } }) imgNode.src = store.selector('#edit-thumbnail-preview').src titleNode.textContent = title; priceNode.textContent = price; tagsNode.textContent = tags; soldoutNode.textContent = isSoldOut ? "X" : "O"; descriptNode.textContent = description; }
.png)
