이번주 공부 기간에 위의 3가지 기능 중 2가지를 구현하였다.
구현한 기능
구현하지 못한 기능
Carousel(캐러셀)이란?
캐러셀은 메인 페이지에서 마케팅 정보를 보여주는 한 가지 방법이다.
한 공간에 한가지 이상의 콘텐츠를 닮고 있는 것이 특징이다.
캐러셀의 장점
메인 페이지에서 가장 중요한 영역에 하나 이상의 콘텐츠를 보여줄 수 있게 해줌으로써 공간을 활용할 수 있다.
보통 캐러셀은 브라우저의 상단에 위치하기 때문에 사람들이 볼 확률이 더 높아질 수 있다.
캐러셀의 단점
캐러셀이 자동으로 넘어갈 경우 사람들이 그 콘텐츠를 보지못하고 넘어가는 경우가 있다.
좋은 캐러셀 디자인을 위한 가이드
이렇게 간단하게 carousel에 대해서 알아보았다.
이제 어떻게 구현을 했는지 살펴보자.
원래 transition을 다룰 줄 알았지만 첫번째 배열을 다시 끝으로 마지막 배열을 다시 처음으로 보내줘야 하는 작업이 어색했다.
하지만 의외로 이러한 작업이 많이 이루어지는지 딱 맞는 WebAPI
를 발견하였다.
그것은 바로 insertBefore
이다.
MDN에선 이렇게 설명되어 있다.
Node.insertBefore()
메소드는 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입합니다. 만약 주어진 자식 노드가 document에 존재하는 노드를 참조한다면, insertBefore()
가 자식 노드를 현재 위치에서 새로운 위치로 옮깁니다. (노드를 다른 노드에 추가하기 전에 상위 노드에서 제거할 필요가 없습니다.)
바로 코드로 알아보자.
우측 RIGHT
버튼을 누르게 되면 첫번째 firstElementChild
요소가 배열의 맨 뒤로 이동하게 된다. 이때 맨 마지막에 삽입하기 위해 null
값을 주어야 한다.
좌측 LEFT
버튼 클릭시 배열의 마지막 인자를 첫번째 인자로 가지고 오는 것이다.
이렇게 계속해서 재배치 해줌으로써 연속적으로 3개의 사진을 슬라이드해줄 수 있게된다.
이 부분이 이번 공부의 과제중 핵심? 이라고 생각되는 부분이다.
내가 더보기 라는 버튼을 클릭할때마다 express server
에 fetch API
로 5개의 사진 url을 요청하게 된다.
그렇게 되면 json파일에 만들어져있는 url들이 express server
의 요청에 의해 response
를 보내게 된다.
확실하게 이해가 안된다면 바로 코드로 살펴보자.
사진에서 나타낸것처럼 fetch API
요청하면 json data
를 response
응답으로 받게된다.
그 다음 각 함수의 값으로 인자를 전달하게 된다.
pluse_img.addEventListener
를 등록하여 클릭시 사진이 5장씩 추가되게 만들었다.
코드는 사진을 참고하면 된다.