🎠 Preview
🌱 이전 프로젝트 소개
- Carousel
- 클릭시 슬라이드가 변경되는 슬라이드 이동 버튼 구현
- 일정 시간 마다 다음 슬라이드로 자동 이동되는 기능 구현
- 이미지 영역 마우스 진입시 자동 슬라이드 멈춤
- 반응형 CSS
- 테블릿 사이즈와 데스크탑 사이즈에 반응하는 GNB와 Carousel 구현
🚀 새롭게 적용하는 기술
- TypeScript
- 지속적 유지보수가 가능한 프로젝트를 위해 도입
- 런타임 이전에 오류를 발견할 수 있음
- 객체 자동완성 기능으로 더 직관적인 관리가 가능함
- styled-components
- 소형 프로젝트 최적화
- 동적 props 전달 용이
- 재사용 가능 layout components 간소화
✨ 업그레이드 사항
CSS 간소화
styled-components 적용 및 불필요한 css 정리
- 스타일 구분 관리
- style 관련 코드를 한 파일에서 통합해서 관리하면 코드 길이가 길어지고, JS와 CSS를 통합하여 관리하기 어려울 수 있음
→ 스타일 관련 코드는 폴더 및 파일로 구분지어 따로 관리
- 스타일 설정을 위한 컴포넌트 생성 최소화
- 불필요한 styled-components 생성을 최소화하여 유지보수성 향상
마우스 hover시 적용되는 조건부 style 구현
반응형 CSS 적용(테블릿, 모바일)
모바일(~768px), 테블릿(768~991px), 데스크탑(992~1100px)
3구분 반응형 CSS 구현
무한 Carousel 구현
무한으로 순환하는 Carousel slide 구현
이전 프로젝트
🧐 참고자료
YouTube
Build a React Image Slider Carousel from Scratch Tutorial
React Carousel with Modern CSS (Mobile Responsive)
Build a Slider with React.js
Infinite Carousel slider (circular)