엘리 브라우저 강의 중, 쇼핑리스트 만들기를 혼자 먼저 해보았다. 그 후, 엘리가 만든 방식으로 다시 한 번 해보며 배운 점을 기록해본다.
✅ HTML Mark Up
내가 한 방식
위에서부터 아래로 작성해나간다.
요소가 하나인 경우 클래스를 생략했다.
아이템 한 줄 위에 버튼을 다른 레이어로 얹으려고 했다.
엘리님이 한 방식
큰 틀부터 안쪽으로 작성해나간다.
요소가 하나인 경우도 전부 클래스를 작성해준다.
🎨 CSS
알고있는데 활용못한 것 or 새롭게 알게된 것
overflow-y: auto; 리스트가 넘어가면 자동으로 스크롤 생기도록 하는 거는 적용할 생각을 아예 못했다.
border-radius : 0 0 20px 20px; 아래 쪽 코너만 둥그렇게 만들 수 있다. 반대로 하면 위쪽만 영향을 미칠 수 있다.
🔧 JavaScript
내가 한 방식 vs 엘리님이 한 방식
👶 나 : 추가하는 버튼에 달아놓은 함수에서 줄을 만들고 삭제하는 것을 전부 작성했다.
👩💻 선생님 : (기능분할) 추가하는 버튼에 달아놓은 함수에서 줄을 만드는 것은 또다른 함수로 작성하고, 나머지는 인풋 자체에 다시 focus되는 것, 인풋이 비었을 때 함수를 빠져나가는 것 등을 처리하도록 했다.
활용못한 것 & 새롭게 알게된 것
removeChile() ➡️ items.removeChild(itemrow)와 같이 삭제할 부모와 그 자식을 함께 명시해줘야 함.
input.focus() ➡️ 인풋에 포커스 되도록 하는 거
item.scrollIntoView({block:center}) ➡️ 새로 추가되는 줄에 자동으로 스크롤이 움직이도록 만든다.
근데, 아무리 생각해도 createItem 부분의 코드가 너무 길다. 이 부분도 함수로 처리할 수 있는 방법은 없을까?
