이전 프로젝트를 업그레이드 해보자!! (wanted_clone)

🎠 Preview

---

🌱 이전 프로젝트 소개

• Carousel
  • 클릭시 슬라이드가 변경되는 슬라이드 이동 버튼 구현
  • 일정 시간 마다 다음 슬라이드로 자동 이동되는 기능 구현
  • 이미지 영역 마우스 진입시 자동 슬라이드 멈춤

• 반응형 CSS
  • 테블릿 사이즈와 데스크탑 사이즈에 반응하는 GNB와 Carousel 구현

• 구현 세부 사항
  깃허브(이전 프로젝트 )
  배포링크(이전 프로젝트 )

---

🚀 새롭게 적용하는 기술

• TypeScript
  • 지속적 유지보수가 가능한 프로젝트를 위해 도입
    • 런타임 이전에 오류를 발견할 수 있음
    • 객체 자동완성 기능으로 더 직관적인 관리가 가능함

• styled-components
  • 소형 프로젝트 최적화
  • 동적 props 전달 용이
  • 재사용 가능 layout components 간소화

---

✨ 업그레이드 사항

CSS 간소화

styled-components 적용 및 불필요한 css 정리

• 스타일 구분 관리
  • style 관련 코드를 한 파일에서 통합해서 관리하면 코드 길이가 길어지고, JS와 CSS를 통합하여 관리하기 어려울 수 있음
    → 스타일 관련 코드는 폴더 및 파일로 구분지어 따로 관리
    
• 스타일 설정을 위한 컴포넌트 생성 최소화
  • 불필요한 styled-components 생성을 최소화하여 유지보수성 향상
  

GNB_menu hover 이벤트

마우스 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)