2024.03.06(수)

🏠메인화면

관련 PR 바로가기

⭐리뷰 섹션

관련 커밋 바로가기

🎠React Slick

carousel(element들을 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트) component

• 설치

  npm install react-slick --save
  npm install slick-carousel --save
  npm install @types/react-slick --save-dev

• 사용법
  • slick css와 Slider component import

    import "slick-carousel/slick/slick.css";
    import "slick-carousel/slick/slick-theme.css";
    
    import React from "react";
    import Slider from "react-slick";

  • Custom component 내에서 setting 객체를 만들고 Slider component에 배열 구조 분해를 통해 props로 전달 & children으로 slide 요소 전달

    const settings = {
    	dots: true,
    	infinite: true,
    	speed: 500,
    	slidesToShow: 1,
    	slidesToScroll: 1,
    };
    
    return (
    	<Slider {...settings}>
    		<div>1</div>
    		<div>2</div>
    		<div>3</div>
    	</Slider>
    );

🆕신간 섹션

관련 커밋 바로가기

🏅베스트셀러 섹션

관련 커밋 바로가기

• 기존 BookItem component의 style을 override해서 재사용

🚩배너 섹션

관련 커밋 바로가기

• Slick을 사용하지 않고 Carousel 직접 구현
  • 보여줄 슬라이드(배너)들을 가로로 배치
  • 현재 슬라이드만 보이도록 (currIndex * (-100))%만큼 translateX()
• 😎Infinite Carousel 추가 구현
  1. 기존 슬라이드 배열의 앞뒤에 마지막 슬라이드와 첫번째 슬라이드를 추가
  2. 마지막 슬라이드에서 다음 슬라이드로 넘어가거나, 처음 슬라이드에서 이전 슬라이드로 넘어갈 때 복제한 슬라이드로 이동
  3. 복제한 banner로 이동한 후 transform 효과 없이 실제로 이동해야 하는 banner로 이동

📱모바일 대응

관련 PR 바로가기

• viewport

  • 일반적인 모바일 최적화 사이트에는 다음과 같은 태그 사용 (public/index.html에서 사용 중)

    <meta name="viewport" content="width=device-width, initial-scale=1" />

  • content에 다양한 속성 설정 가능

    • width(height) = device-width(height): viewport의 크기를 기기의 화면 width(height) 크기로 설정
    • initial-scale: 페이지가 처음 나타날 때 초기 zoom level 값 (default 1, 최소 0.1, 최대 10)
    • user-scalable: 사용자가 확대/축소 기능을 사용 가능한지 여부 (default 1, 사용 가능한 값: 0, 1, no, yes)
• 상대값을 가진 레이아웃: 보통 % 단위 & max-width 속성 사용
• 화면 너비 감지(media query): @media
• window.matchMedia(mediaQueryString).matches→ boolean 반환

  if (window.matchMedia("(min-width: 400px)").matches) {
    /* 뷰포트 너비가 400 픽셀 이상 */
  } else {
    /* 뷰포트 너비가 400 픽셀 미만 */
  }

• input 태그에 inputMode 속성 넣기!