2024년 1월 2주차 회고
JS 3차 과제: 별점 매기기
완성까지 2시간 정도 걸렸다!
1, 2차 과제보다 시간이 오래 걸렸던 이유는 별 요소를 클릭하면 별점이 표시될 수 있도록 부모 요소로 버블링되는 customEvent 구현때문이다.
이벤트를 커스텀할 수 있다는 건 처음 알았는데, 별 요소에 커스템이벤트를 dispath만 해 주면 부모 요소에서 쓸 수 있을 줄 았았다 😂
생각해 보니 커스텀이벤트가 언제 발동해야하는지를 모르는데 부모 요소에서 이벤트를 들을 수 있을리가 없었다. 이벤트가 발생한 다음에 만들어 놓은 커스텀이벤트를 dispath 해 줘야 부모 요소에 이벤트리스너로 등록해 놓은 커스텀이벤트가 발생됐다.
이번 과제에서는 customEvent와 사용 방법을 알아볼 수 있었다!
HTML/CSS 과제 피드백
HTML/CSS 과제에 대한 피드백을 받았다!
피드백 내용을 한 페이지에서 한 눈에 볼 수 있어서 내가 놓친 부분을 파악하기가 쉬웠다.
1번 과제 피드백에서 버튼에 대한 트랜지션이 Tab으로 포커스 될 때 적용이 안 된다고 적혀있었는데, 분명 Tab으로 버튼 찾아가면서 트랜지션이 적용되는지 확인까지하고 낸 걸로 기억하는데 아니었나보다.
h1태그 요소 안에 img 태그를 넣어 로고를 표시했는데 img의 alt 속성값을 정직하게 oooo logo로 작성했었다. 피드백을 보니 이미지가 표시가 안 되는 경우 텍스트로 어떤 게 표시되어야 할지 생각해보라고 하셨다. logo는 빼고 oooo(서비스 이름)만 쓰는 게 적절하다.
피드백을 보고 고칠 수 있는 건 고친 후 과제 피드백과 함께 제공된 1차 과제 영상을 봤다. 영상에서는 제품 이미지 리스트를 나열할 때 ul과 li를 써서 구현했는데, 나는 a태그만으로 구현했다. a태그로 구현한 이유는 Tab으로 접근할 수 있게 하기 위해서였는데, ul과 li 쓴 후 a태그를 그 안에 넣는 식으로 했어도 됐을 거 같다.
근데 피드백 중에서 요소의 depth가 깊어지면 DOM 성능과 유지보수성이 떨어질 수 있다고 했는데, ul과 li를 추가하면 depth가 늘어난다. a태그만 쓰는 대신 ul과 li로 한 번 더 감싸는 이유를 한 번 알아봐야겠다.
강의를 통해 BEM(Blcok, Element, Modifier)방법론에 대해 알게되었는데 Block안의 요소는 Block__Element로 클래스이름을 짓고, Modifier(checked 같이 활성화된 요소) 요소는 Block__Element--Modifier로 클래스이름을 짓는다. 클래스이름 지을 때 사용해 봐야겠다!
마켓서비스 실습
마켓서비스를 강의 안 보면서 만들어봤다!
확실히 바닐라 자바스크립트로는 상태 관리가 힘들다는 것을 깨달았고 이래서 리액트를 쓰는 구나 싶었다..
시간이 오래 걸렸던 부분은 로컬스토리지에 카드에 담은 상품 정보를 저장하는 부분이었다.
로컬스토리지를 사용은 예전에도 해봤지만 key와 value로 구성된 객체를 항상 사용했기 때문에 이번에도 객체를 사용해서 처음에는 구성을 했다. 그런데 도통 key를 어떤 것으로 해야할지 감이 안 잡혔다🥲
상품명을 key로 하기에는 카트에 담겨있는 상품을 key로 찾고 그 key값으로 다시 value를 가져와야하니 한 번이면 될 것을 뭔가 두 번 작업 하는 느낌이 들었다.
그래서 이건 아닌 거 같다.. 하고 그 부분만 강의를 보니 강사님은 리스트를 사용해서 구현을 하셨다.
카드를 상품에 담을 때는 상품 정보를 객체로 만들어 리스트에 넣고, 찾을 때는 includes를 사용하고, 삭제할 때는 filter를 사용해 로컬스토리지의 카트 데이터를 업데이트했다.
다시 생각해보니 객체로도 충분히 구현할 수 있을 것으로 보이지만 내 기준에서는 리스트가 객체보다 유용한 메서드를 많이 제공하니 카트에 담긴 상품 데이터는 객체 리스트로 구현하는 게 맞는 거 같다.
상품 리스트에서 표시되는 이미지가 404 error가 떠서 재차 내 코드를 확인했지만 오류를 찾을 수가 없었다. 구글링도 해 봤지만 도무지 이유를 알 수 없어 부트캠프 질문 채널에 올리려고 코드를 다시 돴다. 
복사 붙여넣기 후 수정하지 않은 부분이 src로 덮어씌워지면서 리소스 위치를 잘못 전달했던 것이다 🥲
다시 한 번 느꼈던 건 구글링으로도 고쳐지지 않는 건 코드에서 실수했을 확률이 높다는 것이다..
