[HTML + CSS + JS] 미니 쇼핑몰 제작

JS도 빨리 적용시켜보고 싶어서 이번에는 js를 이용해서 동적으로 값을 받아와 화면에 표시하는 간단한 웹을 만들었다. 저작권 없는 아이콘에 색까지 내 마음대로 지정할 수 있는 곳을 마땅히 찾지 못해서 이미지는 ppt에서 제공하는 아이콘으로 만들었다.

 

먼저 정적 웹 페이지를 만든 후 동적으로 만들었다. 

 

저번까지는 다 만들었을 때 github에 올리는 식으로 했는데 기능 단위로 구현할 때마다 commit하는 게 좋다고 해서 이번에는 그렇게 해보았다. 

 

처음에는 기능을 구현하기 위한 소스를 참고하기 위해 구글링을 하려는데 뭐라고 검색을 해야 될지도 몰랐다. 그래서 일단 이것저것 js이벤트 관련된 문서를 읽다가 DOM에 대한 이해가 먼저라고 판단해서 DOM에 대한 이해부터 다시 했다.

 

이후 데이터를 받아와 화면에 출력해줘야 하기 때문에 fecth() API와 promise같은 개념들도 공부해서 이 mini shopping mall을 제작했다.

---

0. 결과물 및 소스

 

• 정적 웹페이지 
  동적으로 만들기 전에 먼저 정적으로 만들어봤다.

index.html

 

style.css

 

 

 

 

 

 

 

 

 

• 동적 웹페이지
  • fecth() API를 이용해서 동적으로 데이터를 불러와 화면에 표시했다.
    

    

  • 필터 적용

items.json

main.js

 

---

1. 구현해야 되는 기능

1. 영역 내에서만 스크롤 가능하게 하기
   
2. 버튼 hover시 애니메이션 주기
3. 동적으로 데이터 받아와 화면에 표시하기

---

2. 기능 구현

정적 웹페이지를 만드는 과정에서는 큰 어려움은 없었다. 다만 commit을 잘 해야 돼서 신경써야 되는 부분이 많았다.

 

1. 영역 내에서 스크롤 되게 하기

overflow가 y축으로 발생했을 때 적용할 수 있는 다양한 값이 있다. 대표적으로 hidden, scroll, auto가 있는데 여기서는 overflow시 스크롤이 표시되게 하고 싶으므로 scroll속성을 적용시켜주었다.

overflow-y: scroll;

 

2. 애니메이션 주기

옷, 색상 버튼에 마우스를 올렸을 때 즉 hover됐을 때 버튼의 크기가 커지도록 애니메이션을 주었다.

• transition, transform
  • transition은 애니메이션을 적용할 수 있는 attribute이다. transition에는 적용할 수 있는 값들이 많은데 대표적으로 애니메이션이 적용될 속성, 애니메이션이 보여지는 시간, 어떻게 보여질지를 설정해줄 수 있다. 여기서는 버튼 호버시 버튼의 크기를 키워야 하므로 애니메이션이 적용될 속성은  transform, 시간은 0.5s동안, ease타입으로 애니메이션이 발생하도록 설정해주었다. transform에서는 scale함수를 이용해서 크기를 x,y축으로 1.1배씩 증가시켰다. 따라서 1.1배씩 증가하는 애니메이션이 0.5초에 걸쳐 발생하게 되며 ease형태로 보여지게 되는 것이다.

  • button{
    	transition: transfrom 0.5s ease;
    }
    
    button:hover{
        transform: scale(1.1, 1.1);
    }

 

3. 동적으로 데이터 받아와 원하는 아이템만 화면에 표시하기

• json
  • 동적으로 데이터를 받아오기 위해서는 데이터가 필요하다. 데이터는 json파일로 만들어주었다. 아래 사진을 보면 아이템에 대한 정보들이 객체로 적혀있고 아이템 수만큼 배열안에 저장되어 있는 형태이다.
    

    

• fecth()
  
  • fecth() API를 이용하면 json파일안의 데이터를 스트링으로 받아올 수 있다. (이 방법은 나중에 따로 포스팅해야겠다.)
• innerHTML
  • html에서 요소를 생성하지 않고 js로 내가 필요할 때 요소를 생성하고 싶을 때 사용할 수 있는 Element property이다.  Element.innerHTML = `<tag>...<tag>`; 와 같이 입력하여 element안에 자식요소로서 새롭게 요소를 만들 수도 있다. innerHTML말고도 아예 요소를 생성해서 부모의 자식으로 append해주는 방식도 있다.
• filter
  • filter메소드를 이용하면 배열안을 하나씩 탐색하여 내가 원하는 조건에 맞는 객체들만 return하여 새로운 배열안에 추가할 수 있다. filtering조건에 따라 이에 해당하는 배열만 return할 수 있는데 예를 들어 조건이 item.color === 'red'라면 filter함수에 전달된 배열안 객체들을 하나하나 확인하면서 전달받은 객체 중 color값이 red인 객체만 return하여 객체 배열을 만든다. 
• map, join
  • map을 이용하면 위에서 필터링된 객체들만 가지고 추가 작업을 할 수있다. 여기에선 배열안에 전달된 객체들은 element들이고 이를 하나로 모아 부모의 innerHTML로 설정해주면 그 객체들만 화면에 표시할 수 있다. 여기서 배열안 값을 하나로 합치는 건 join메소드를 이용했다.

---

3. 느낀 점

• 먼저 내가 스스로 구현할 때는 header, section등 하나의 영역을 작성할 때마다 commit 메시지를 남겨놓았다. 이렇게 만들 때마다 업데이트를 해본 적이 처음이라 정적 웹페이지를 만드는 것만 해도 정말 오래 걸렸다. 중간에 수정하고 싶은 게 있어서 그것도 같이 수정하거나 하면 git reset으로 다시 작업했다. 그리고 웹 페이지 구조 분석을 제대로 하지 않고 html을 작성했더니 css 스타일링할 때 다시 html을 수정하는 문제도 있었다. commit 메시지를 남기지 않았을 때는 그냥 수정하면 되니까 별로 신경쓰지 않았던 부분이었는데 앞으론 확실히 구조 파악을 하고 작성을 해야겠다.
• 동적으로 데이터를 받아오려면 fecth API를 사용해야 한다는 것만 알고 구글링으로 해결을 하려고 했는데 fetch가 어떻게 동작하는지를 모르니까 소스를 봐도 이해가 안갔다. 그래서 공부를 하고 소스를 다시 봤는데 이해가 잘 돼서 앞으로는 바로 작성하려고 하지말고 개념 공부를 어느 정도 한 후에 구현을 하려고 한다.