잘 알려져있는 캐러셀 라이브러리들을 통해서 여러 방법으로 캐러셀을 구현해보고, 라이브러리 없이 직접 캐러셀을 제작한다.

기능

• App컴포넌트의 props 중에서 direction의 값에 따라 이동 방향과 버튼의 위치가 변경된다.
• 상/하 , 좌/우 의 버튼을 클릭하면 다음 항목이 슬라이드된다.

사용 기술

• react
• react-dom
• typescript
• react-responsive-carousel
• react-slick , @types/react-slick, slick-carousel, @types/slick-carousel
• antd

참고/검색 자료

14 Top React Carousel Components [2022]
https://alvarotrigo.com/blog/react-carousels/

react-slick
https://github.com/akiran/react-slick

react-responsive-carousel
https://www.npmjs.com/package/react-responsive-carousel

antd
https://ant.design/

tsconfig.json 생성하기위해 tsc --init를 입력해도 오류가 나타난다면
https://codeutility.org/typescript-the-term-tsc-is-not-recognized-as-the-name-of-a-cmdlet-function-script-file-or-operable-program-can-anyone-tell-me-whats-the-problem-stack-overflow/

tsconfig.json 기본 설정 내용

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", "src/components/.tsx"]
}

구현 이미지