Paul Shop(웹 디자인)

한바울·2022년 12월 5일
0

프로젝트

목록 보기
3/5
post-thumbnail

부트스트랩 템플릿 주소
https://themewagon.com/themes/free-bootstrap-5-html-5-ecommerce-website-template-zay-shop/

깃허브 주소
https://github.com/openkufo/toyproject-frontend-paulshop.git

➕ 기능

  • Zay Shop 부트스트랩 템플릿을 수정하여 작업하였다.
  • 텍스트와 이미지만 교체하는게 아닌 2가지 기능을 JS를 통해 추가하였다.

💡 상품 리스트 추가

  • 페이지 스크롤 이벤트를 이용하여 최하단으로 스크롤시 상품이 추가 되는 기능.

💡 Ace Code Editor(ACE) 추가

  • 코드에디터를 웹페이지에 추가하여 각각의 언어로 마크업된 문장을 볼 수 있다.
    코드에디터에 쓰여있는 코드로 스크립트가 실행되게끔 구성했다.
    [gif 추가예정]

📝 웹 디자인 맛보기

이미 만들어진 템플릿을 수정하는데에도 많은 시간이 들었다. 과제를 진행하면서 웹 퍼블리셔와 프론트엔드 개발자들의 고충을 희미하게나마 느낄 수 있었다.

javascript와 jquery를 처음 접할 때라 그런지 어디에 어떤 기능을 넣을까 하는 아이디어가 떠오르지 않았다. 급하게 쥐어짠 느낌으로 product append, ACE Editor 기능 2가지를 집어넣었다. 아이디어는 아무래도 공부량과 비례하는게 맞는것 같다.

jquery를 배우고 느낀점이 js라이브러리를 배워도 빠르게 변해가는 프론트엔드에서 vanilla javascript가 더욱 중요하고, 부족 한 것 같아서 nodejs와 함께 socket을 이용한 채팅프로그램으로 다시 공부하고 있다.

각종 챌린지를 도전해 볼 수 있는
유튜버 "노마드 코더 Nomad Coders"의 운영사이트
https://nomadcoders.co/

profile
몰두하는 사람

0개의 댓글