Grocery Bud 만들기

hyocho·2022년 11월 28일

토이프로젝트

목록 보기

7/7

지난 미니 프로젝트에 비해 갑자기 훅 어려워진 느낌이지만, 3차 과제인 'to do list' 를 수행하기 전에 하면 좋을 것 같아 진행하게 된 grocery bud 만들기. 인풋 창에 아이템을 입력하면 화면에 리스트가 만들어지고 수정/삭제가 가능하며 로컬 스토리지에 저장되어 새로고침을 하더라도 정보가 그대로 저장된다. color flipper 때와는 다르게 엄청난 오류를 만났고 하다가 꼬이고 꼬여서 포기가 빠를까? 싶었던 때도 있었지만 많은 도움을 받아 ~~무사히~~ 끝내게 된.. 나의 소듕한 grocery bud...

🥑데모는 여기서 보실 수 있습니다.

나날이 공감이 되는 짤

버튼에 타입을 쓰는 이유 ?

인풋 창에 아이템을 입력하고 submit 버튼을 누르면 아이템이 추가되어야 한다.
이전 과제 수행 시에도 버튼 누를 때의 클릭 이벤트와 함께 엔터로도 작동되도록 따로 함수를 만들어주었었는데, 그냥 클릭 이벤트 하나 만드는 것만으로도 엔터를 쳤을 때 작동되도록 할 수 있었다!

버튼 태그를 쓸 때 자주 마주쳤던 <button type="button">. 버튼은 당연히 버튼인데 타입을 버튼이라고 왜 명시해 주는 것인지 궁금했다. 버튼 타입으로는 button, submit, reset을 지정할 수 있는데, 명시적으로 지정해 주지 않으면 기본값은 submit이다. form 태그 내에서 사용할 때 따로 key.code===13(enter) 일 때 이벤트를 추가해서 처리해 주지 않더라도, 엔터를 치면 바로 submit 이 가능하다. 페이지가 새로고침 되는 것을 막기 위해서 preventDefault() 도 써주면 제어가 가능하다.

3뎁스까지만 가기로 해

scss를 쓰는 이유는 기존 CSS를 더 편하게 쓰기 위함이다.
그런데 나는 깊게 깊게 중첩을 만들면서 나조차도 알아보기 힘들게 작성하고 있었다.

엉망진창 scss...

위는 처음에 내가 썼던 scss 의 일부분인데, 5뎁스까지 되어있는 것도 있고 또 거기에 & 나 : 를 사용하면서 정말 알아보기 힘들게 되었다. 이렇게 되면 나중에 알아보기도 힘들고 어디서 오류를 찾는지도 힘들다고 했다. 따라서 상위 클래스 몇 개는 분리하여 따로 적어주어 최대 3뎁스를 넘어가지 않도록 했다.

왜요? 제가 flexbox도 못 다루는 사람처럼 보이시나요?

빨리 만들어야 하는 미니 프로젝트라 사실 디자인적인 요소는 하나도 없고 최소한의 것들로만 구성되어 있는데 그것조차 삐걱삐걱 대는 것 같아 만들면서 css도 더 열심히 해야겠단 생각이 들었다.

justify-content : space-between 이 안된다 ..

아이템을 추가하고 리스트에 나타났을 때, 수정/삭제 하는 아이콘이 오른쪽 끝으로 가야하는데 영 움직이질 못했다...🙄
결론적으로는 flexbox 외부 컨테이너에 크기를 주고 flexbox는 width = auto 로 설정하고 나니 잘 움직였다.

드래그 앤 드랍 5분만에 끝내기

목록 순서를 바꿀 수 있는 드래그 앤 드랍을 구현해야 했는데, sortable JS 로 쉽게 구현할 수 있었다. ~~샤라웃 투 박영웅 강사님~~
하지만 새로고침 시에는 다시 원상복귀되기 때문에 따로 코드를 추가해주어야 한다.

렌더링을 해 주셔야죠?

렌더링 해주는 함수가 없어서 새로고침 시에 정보가 나타나지 않았다.ㅎㅎ
render 함수를 만들어 화면에 잘 나타나게 했지만 올바른 하위요소로 들어가지 않는다거나해서 수정/삭제가 올바르게 안된다거나 하는 문제가 있었다.

querySelectorAll

아이템을 수정/삭제하려니 가장 처음 아이템만 선택되어 실행되는 문제가 발생했다.
아래 코드를 보면 나는 계속 버튼 하나만을 찾고 있었던 것.. querySelectorAll 로 모든 버튼을 찾고 forEach로 그에 따라 실행될 수 있도록 만들어주니 잘 작동되었다.

//처음 코드
const editBtnEl = document.querySelector(".edit_btn");
const deleteBtnEl = document.querySelector(".delete_btn");
editBtnEl.addEventListener("click", editItem));
deleteBtnEl.addEventListener("click", deleteItem));

//수정된 코드
const editBtnEls = document.querySelectorAll(".edit_btn");
const deleteBtnEls = document.querySelectorAll(".delete_btn");
editBtnEls.forEach((editBtnEl) =>
                   editBtnEl.addEventListener("click", editItem));
deleteBtnEls.forEach((deleteBtnEl) => 
                   deleteBtnEl.addEventListener("click", deleteItem));

배포

여차저차 힘들게 만들어놨더니.. 저번에 netlify 배포시에도 문제가 있어서 이번엔 잘 되겠지 했는데 웬 걸?

배포를 하니 이렇게 아무것도 적용이 안되었다.

몇 번이고 했는데도 위와 같이 오류가 떴다. 구글링 해보니 경로 설정이 잘못되었다는 글만 있어서 상대경로를 잘 못 지정해주었나 거의 두 시간쯤 이래저래 뒤적거리고 수정하고 해봤는데