개발한 기능 메인 배너 슬라이드 기능을 구현하였습니다. 직접 구현해보려 했지만, 시간상 여유롭지 못했기에 swiper라는 라이브러리를 찾아서 사용하게 되었습니다. CDN으로 swiper 라이브러리를 link=css와 script를 가져와서 사용하였습니다. 아래는 swiper를 설정하게 해주는 생성자로 안에 변수의 값을 바꿔주면 제가 원하는 방식으로 슬라이드 효과를 보여줄 수 있습니다. 이 외에 리뷰 슬라이드는 직접 JavaScript를 이용하여 구현하였습니다.
// 리뷰 슬라이드 바 이벤트
const slideList = document.querySelector(".reviews-list");
const slides = document.querySelectorAll(".reviews-list li");
function reviewSlideEvent() {
let currentIdx = 0; //현재 인덱스
let slideCount = slides.length; //슬라이드 개수
let slideWidth = 250;
let slideMargin = 20;
makeClone(); //초기 클론 생성
function makeClone() {
for (var i = 0; i < slideCount; i++) {
var clonSlide = slides[i].cloneNode(true); // 원본 list 복제하기
clonSlide.classList.add("clone");
slideList.appendChild(clonSlide);
}
for (var i = slideCount - 1; i >= 0; i--) {
var clonSlide = slides[i].cloneNode(true); // 원본 list 복제하기
clonSlide.classList.add("clone");
slideList.prepend(clonSlide);
}
updateWidth(); //너비 설정
setInitialPos(); //위치 설정
setTimeout(() => {
// 새로고침 시 애니메이션 보이지 않게 하기위해 비동기처리
slideList.classList.add("animated");
}, 100);
}
function updateWidth() {
const currentSlides = document.querySelectorAll(".reviews-list li"); //복제된 list 가져오기
const newSlideCount = currentSlides.length; // 복제된 리스트 길이
const newWidth = (slideWidth + slideMargin) * newSlideCount - slideMargin + "px"; // 복제된 list 길이 구하기
slideList.style.width = newWidth; // 총 width값 전달
}
function setInitialPos() {
// 처음 위치 설정
const initialTranslateValue = -(slideWidth + slideMargin) * slideCount;
slideList.style.transform = `translateX(${initialTranslateValue}px)`;
}
function moveSlide(num) {
slideList.style.left = -num * (slideWidth + slideMargin) + "px"; //이동거리
currentIdx = num;
if (currentIdx === slideCount || currentIdx === -slideCount) {
setTimeout(() => {
slideList.classList.remove("animated");
slideList.style.left = "0px";
currentIdx = 0;
}, 1000);
setTimeout(() => {
slideList.classList.add("animated");
}, 1100);
}
}
setInterval(() => {
moveSlide(currentIdx + 1);
}, 3000);
}
reviewSlideEvent();
또 api요청을 하여 db에 있는 모든 상품 데이터를 받아와 베스트 상품에 적용 시켰습니다. 상품의 이름, 가격, 리뷰, 이미지를 가져와서 보여주도록 설정하였습니다. 임시 데이터이기 때문에 이미지는 모두 같은 것으로 표기가 되고 있습니다.
fetch함수를 이용하여 api명세서에 따라 주소를 적어 간편하게 모든 데이터 상품을 가져왔습니다.
진행 중 겪었던 이슈 서버 데이터를 가져오는 부분에서 많은 시행착오가 있었습니다. 그런데 생각보다 매우 간단해서 시간을 많이 허비했던 것 같습니다. 슬라이드 효과를 자바스크립트로만 구현했을 때 제대로 작동하지 못하는 부분이 많아서 해결하는데 많은 노력을 했습니다.. 그래서 결국 클론 코딩 느낌으로 영상을 보며 따라해서 구현했던 것 같습니다.
진행할 사항 메인 페이지 부분에서는 구현할 수 있는 기능들을 거의 구현하였고, api요청을 통해 가져올 수 있는 데이터들도 모두 가져온 상태이기 때문에 오피스 아워를 통해 코치님께서 회원가입과 로그인페이지, 관리자 페이지를 한 번 해보라는 요청을 받아 먼저 로그인페이지를 진행하게 될 것 같습니다.
느낀점 백엔드 쪽에서 작성해주신 라우터들을 사용하는 방법을 깨우치게 되면서 api를 통해 서버에서 데이터를 가져오는 문제가 완전히 해결되었습니다. 역시 다른 분들이 한 코드를 살펴봤던 것이 매우 큰 도움이 되었던 것 같습니다. 개발에만 집중하다보니 협업도구에 이슈와 커밋을 자주 하지 못했던 부분이 있었습니다. 좀 더 활발한 이슈와 커밋을 작성이 필요하다는 것을 느꼈습니다.
