Cmarket 리팩토링

저번시간에 진행했던 Cmarket Redux 과제를 시맨틱 태그(Semantic Tag)를 사용하여 리팩토링 해보면서 추가로 사이트를 이용하면서 불편한 점을 생각해보며 필요한 기능들을 구현해봤다.

시작하기 전에, 시맨틱 태그를 사용하면 좋은 점을 살펴보고 가자.

시맨틱 태그를 사용하면 좋은 점

1. 검색엔진 최적화(SEO)
어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시하게 된다.

2. 웹 접근성
HTML이 시맨틱 요소로 구성되어 있다면 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 좀 더 정확하게 전달할 수 있다.

3. 코드 가독성 향상
div, span과는 다르게 클래스를 지정하지 않아도 어떤 역할을 하는지 알 수 있으며, 유지보수가 용이해진다.

Elements

아이템들을 나열해놓은 메인페이지인 ItemListContainer , 장바구니 페이지인 ShoppingCart 이렇게 두 개의 페이지가 존재한다.

두 페이지에 사용된 semantic tag가 비슷하므로 하나의 페이지만 다루겠다.

이전에는 div와 span으로만 HTML을 작성하였다.

ItemListContainer

header
사이트의 제목, 상단바, 검색창을 나타내는 역할을 하여 header를 사용해줬으며, 자식요소로는 링크들을 nav로 묶어주었다.

img요소에는 alt속성으로 대체텍스트를 제공하여 스크린리더를 통해 정보를 인식하게 하였다.

main
주요콘텐츠를 정의한다. 자식으로는 section이 있으며, 제목 요소(h3), 여러 내용(article)을 가지고있다.

++ 수정
stackoverflow의 Should I use 'li' or 'article' for products listing? 에 관한 게시글 을 보았는데, 위에서 article로 작성한 요소들은 ul로 감싼 li를 사용하는 것이 더욱 적합하다고 생각한다.

footer
화면에서 최하단에 위치하는 요소로 회사소개, 약관, 저작권 등..을 표시한다.

추가한 기능

• 장바구니 리스트가 비어있을 때, 쇼핑페이지로 가는 버튼 추가
  
  
  
• 금액 표시할 때, 소수점 3자리마다 "," 표시하기

 const convertPrice = (price) => {
    // 소수점 3자리마다 ,를 찍어주는 정규표현식 -> 가격을 받아 문자열로 변환 후, 컴마를 추가 후 반환(string 타입)
    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

UX를 생각하며 기능을 살짝 추가해줬다.