[FE]메인 화면 구현

react-slick slider

: React 애플리케이션에서 캐러셀(슬라이더) 컴포넌트를 쉽게 구현할 수 있게 해주는 라이브러리

 

🔨 설치

npm install react-slick slick-carousel --save

 

✏️ 사용법

 

1️⃣ 기본 사용법

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

function SimpleSlider() {
  const settings = {
    dots: true,           // 하단 점 네비게이션
    infinite: true,       // 무한 루프
    speed: 500,          // 전환 속도
    slidesToShow: 1,     // 한 번에 보여줄 슬라이드 수
    slidesToScroll: 1    // 한 번에 스크롤할 슬라이드 수
  };

  return (
    <Slider {...settings}>
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
    </Slider>
  );
}

 

2️⃣Styled-components 와 함께 사용

import styled from 'styled-components';
import Slider from "react-slick";

const StyledSlider = styled(Slider)`
  .slick-slide div {
    outline: none;
  }
  
  .slick-prev {
    // 이전 버튼 스타일링
  }
  
  .slick-dots {
    // 하단 점 네비게이션 스타일링
  }
`;

react-slick slider 사용 화면

 

모바일 대응

: inputMode 란? 

 

➡️ 모바일 기기에서 가상 키보드 종류를 지정하는 HTML 속성, 주로 input 요소에서 사용된다. 

➡️ 주요 값: none, text, numeric, decimal, tel, email, url, search 

 

✏️ 사용 예시

// 숫자 입력
<input type="text" inputMode="numeric" />

// 이메일 입력
<input type="text" inputMode="email" />

// 전화번호 입력
<input type="text" inputMode="tel" />

 

⚠️ 주의사항

• inputMode는 단순히 키보드 타입만 변경하며 유효성 검사는 하지 않음
• 실제 데이터 유효성 검사는 type 속성이나 pattern 속성을 사용해야 함
• 모든 브라우저에서 지원되지 않을 수 있으므로 브라우저 호환성 확인 필요

---

🌟 배운 점

오늘은 드디어 프론트엔드 파트가 끝이 났다. 리뷰, 신간, 베스트, 배너 섹션을 구현하고 마지막으로 모바일 환경에서의 css 도 조정을 했다. 오늘 배운 것들은 기억해두면 웹 개발 하는 데 많이 도움이 될 것 같아서 여러 번 필요할 때마다 반복해서 들어야겠다. 아직 리액트의 상태 관리에 있어서 이해가 안 가는 부분들이 많은 것 같다. 인강에서 끝나지 않고 혼자 이해해보고 실습해보는 시간을 가져야겠다.