목차

🥊 오랜만에 해보는 클론 코딩 챌린지

부트캠프 이전에 JavaScript와 HTML, CSS를 이해하고 싶어서 이용했던 사이트가 있다. 부트캠프가 끝난 이후 할 게 열심히 달려오기는 했지만 내 실력이 과연 어느 정도일까? 라는 의문이 들기 시작하면서 이번에 한 번 그걸 되짚어볼 수 있는 시간이 있으면 좋겠다고 생각했다.

그래서 이전에 했던 그 사이트에서 하나의 클론 코딩 챌린지를 진행했다. 아래의 이미지를 바탕으로 똑같이 구현하면 된다.

위처럼 PC 버전을 만들면 좋기야 하겠지만, 이 난이도는 중급자 난이도였다. PC와 다르게 모바일 환경도 있는데 PC와 다른 요소들이 상당히 있었다.

이 프로젝트를 진행하는데 고려해야할 사항들을 스스로 정리해보니 다음과 같았다.

• 모바일
  • 이미지 영역에 Pre/Next 버튼을 추가해서 이미지를 변경할 수 있어야함.
  • 하단에 Count를 적용할 수 있는 버튼이 존재함.
  • Add to cart를 누르면 우측 상단의 카트 버튼에 아이템이 담김.
  • 상단 헤더 카트 아이콘을 누르면 팝업창이 출력됨
  • 카트 내 아이템 옆 삭제 버튼을 누르면 카트에 내용물이 삭제됨.
  • 상단 헤더 메뉴 버튼을 누르면 메뉴 팝업창이 출력됨
• PC 브라우저
  • 상단 헤더 메뉴 버튼이 삭제되며, 팝업창에 있던 메뉴들이 상단 헤더에 추가됨.
  • 상세 이미지 아래에 이미지를 선택할 수 있는 영역이 추가됨.
  • 상세 이미지를 누르면 확대 페이지가 적용되어 이미지를 좀 더 자세하게 볼 수 있음.
  • 상세 이미지에 붙어있던 버튼이 삭제되고, 해당 버튼이 확대 페이지에서 출력됨.
• 추가로 고려해볼 것

  • 실제 쇼핑몰 홈페이지에서는 카운터 관리나 상품 등록 사항을 어떻게 관리하는지?

    • 클론 코딩 쇼핑몰과 굉장히 흡사한 형태를 가진 사이트는 네이버 쇼핑이었다.

  • 장바구니에 등록됐거나 삭제하는 것에 관한 notify를 주는게 좋을지?

✅ 챌린지한 결과?

까다로운 조건이지만 지금의 내 실력을 체크해보기엔 더할 나위 없이 좋았다. 특히, 화면에 따라 달라지는 영역을 고려하는 건 진짜 눈이 꿈뻑했지만 그래도 이걸 해내냐 마냐는 해봐야 아는 거니까. 그래서 결국 어떻게 됐냐면 프로젝트를 3일 동안 달려서 완성시킬 수 있었다.

• 시연 이미지