저번에 완성했던 shopping list를 내가 직접 구현했던 코드와
강의에서 솔루션으로 제공 한 코드의 차이점을 비교해보면서 이렇게 했으면 더 좋았을 것-이라고
생각했던 부분들을 정리해봤다
1. js에서 불필요한 변수 선언을 줄일 수 있었다 (최소한으로 하기)
2.
const i = document.createElement('i');
i.setAttribute('class', 'fas fa-check');
대신 deleteBtn에 deleteBtn.innerHTML = '<i class="fas fa-check"></i>'; 로
innerHTML만을 이용해서 아이콘 추가를 하는 것이 더 나을 것 같다
3. 여러 기능을 하나의 function에 묶어놓지 말고
새로운 아이템 list를 생성하는 코드 블록은 따로 새로운 함수를 만들어서
넣었으면 더 깔끔했을 것이다
4. 이미 li, i 요소가 ul에 포함되어 있는데,
하나의 목록을 삭제할 때 li, i, ul 각각 remove 할 필요 없이
ul만 remove해도 똑같은 결과가 나옴
5. if로 조건문 작성하고 뒤에 꼭 else 붙이지 않아도 작동한다
6. 새로 추가된 아이템에 초점을 맞춰서 자동 스크롤링이 되게 하려면
scrollintoview 속성을 사용하면 된다
수직은 block, 수평은 inline으로 설정이 가능하며 (기본값은 nearest로 설정되어있다)
스크롤링 시 조금 더 부드러운 느낌을 주려면 behavior: "smooth" 효과를 주면 된다.
7. 코드에서 주석을 달 경우, 코드 자체를 그대로 설명하는 주석은 필요치 않다.
이는 오히려 가독성을 떨어트리기 때문에 가능하면 '왜'라는 의도를 설명해야 한다.