요즘 스벨트 프레임워크에 푹 빠졌습니다.
프론트엔드3 대장이라고 불리는 앵귤라, 리액트, 뷰js를 경험해 보지 못했고 자바스크립트의 "J"자 정도 아는 상태에서 스벨트로 이미지 슬라이더를 만들어 보았습니다.
아직 스벨트를 깊이 있게 공부한 것이 아니라 스벨트를 완전히 이해하고 활용하지는 못했습니다.
스벨트 공부 시작하면서 첫 번째 프로젝트로 TODO APP을 만들고 두 번째로 이미지 슬라이더를 만들어 보면서 느끼는 점은 이런 비유가 맞을지 모르겠지만 프론트엔드 개발이 마치 DB가 없는 백엔드 개발 같다는 생각이 듭니다.
스벨트 이미지 슬라이더
이미지 슬라이더는 많이 사용되는 일반적인 형태로 구성되어 있으며 단순 공부용입니다.
이미지가 자동으로 슬라이드 되면서 다음 버튼과 이전 버튼을 추가해 수동으로 이미지를 넘길 수 있도록 했고 하단에 이미지 넘김과 함께 이동되는 버튼을 추가했습니다.
- 자동 슬라이딩(Auto Play)
- 마우스 온,오프시 stop, play
- 다음, 이전 버튼
- 페이지네이션 버튼
완성된 이미지 슬라이더는 Preview를 통해 보실 수 있습니다.
전체 코드는 Github Repository에 올려 두었습니다.
어제 깃허브에 올려 두었는데 지금 확인하니 외국분이 스타를 눌러주셨네요~ 처음 받아본 스타라 기분이 좋네요.
let currId = 0;
const images = [
'/images/1.jpg',
'/images/2.jpg',
'/images/3.jpg',
'/images/4.jpg',
'/images/5.jpg',
];
const imgLen = images.length;
let positionLeft = 0;
const moveSlider = () => {
positionLeft = currId * 100;
};
const next = () => {
currId = currId === imgLen - 1 ? 0 : currId + 1;
moveSlider();
};
const prev = () => {
currId = currId === 0 ? imgLen - 1 : currId - 1;
moveSlider();
};
const getIndex = (index) => {
currId = index;
moveSlider();
};
let interval = setInterval(next, 2000);
const autoPlay = () => {
interval = setInterval(next, 2000)
}
const stopPlay = () => {
clearInterval(interval)
};바닐라 자바스크립트로 만드는 것에 비하면 스벨트는 상당히 짧은 코드로 완성이 됩니다. 제이쿼리를 사용하는 것보다 더 편한 것 같습니다.
사실 비교는 리액트나 뷰.js와 해야 하는 것이 맞지만 사용경험이 없어 비교를 할 수가 없네요.
현업에서 일하시는 개발자분들 말씀으로는 아직 스벨트는 커뮤니티가 작아서 상용에서는 사용하지 않는 것이 좋다라고들 합니다.
