이번주 공부 기간에 위의 3가지 기능 중 2가지를 구현하였다.
구현한 기능
- carousel_slide
- 더보기 button
구현하지 못한 기능
- 마우스 드래그시 이미지 5개씩 슬라이드
carousel_slide
Carousel(캐러셀)이란?
캐러셀은 메인 페이지에서 마케팅 정보를 보여주는 한 가지 방법이다.
한 공간에 한가지 이상의 콘텐츠를 닮고 있는 것이 특징이다.
캐러셀의 장점
메인 페이지에서 가장 중요한 영역에 하나 이상의 콘텐츠를 보여줄 수 있게 해줌으로써 공간을 활용할 수 있다.
보통 캐러셀은 브라우저의 상단에 위치하기 때문에 사람들이 볼 확률이 더 높아질 수 있다.
캐러셀의 단점
캐러셀이 자동으로 넘어갈 경우 사람들이 그 콘텐츠를 보지못하고 넘어가는 경우가 있다.
좋은 캐러셀 디자인을 위한 가이드
- 콘텐츠가 최 우선이다.
- 브라우저에 접속하였을때 유용하지 않거나 흥미로운 부분이 없다면 캐러셀을 사용할 의미가 없다.
- 광고가 아닌 사이트의 일부로 보여야 한다.
- 각각이 독립적이어야 한다. 콘텐츠의 내용이 이어져서 모든 콘텐츠를 보게된다면 캐러셀을 이용해서는 안된다.
- 절대 자동 로테이션으로 만들지 말것.
- 자동으로 로테이션 될 경우 유저가 원하지 않는 슬라이드를 탭하는 경우가 발생할 수 있다.
- 만약 자동으로 로테이션 시켜줄 경우 유저가 충분히 볼 수 있게 시간을 설정해 주어야 한다.
이렇게 간단하게 carousel에 대해서 알아보았다.
이제 어떻게 구현을 했는지 살펴보자.
carousel_slide
원래 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장씩 추가되게 만들었다.
코드는 사진을 참고하면 된다.
