20231206 TIL

목표

• 상세페이지 구현하기

새로 알게 된것/  캐러셀

사진 작가의 상세페이지에 들어가면 보일 작가의 작업물 부분을 작업했다. 

와이어 프레임에서 작업물은 캐러셀 방식으로 계획을 했기에 처음으로 캐러셀을 만들어 봤다. 

캐러셀은 만드는 방법은 다양했지만  reack slick 라이브러리를 이용해서 구현해보았다.

 

https://kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

 기본적인 것은 위 페이지를 참고했다. 

 

내가 구현하려는 캐러셀의 형태는 

1. 자동으로 넘어갈 것

2. 사진이 잘리는 부분없이 프레임이 바뀌기

이 두가지 였다. 

 

slick  사용법은 간단했다.

우선 라이브러리를 설치해야한다.

yarn add react-slick
yarn add -D slick-carousel

 

그리고 사용할 파일에 import를 해온다.

import Slider from 'react-slick';

// 스타일 수정이 필요할 시 import
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

아래의 css import는 수정하지 않으면 필욘 없지만 아마도 높은 확률로 수정을 하게 될 것이다. 

그리고 본격적으로 세팅을 해야하는데  js부분에서 해주면 된다. 

  const settings = {
    설정한 setting 을 넣기
  };

jsx부분은 

<Slider  {...settings}>
 	슬라이더에 넣을 것
</Slider>

이렇게 세팅을 해주면 된다. 

setting에 들어가는 것은 많은데 그중에 필요한 것만 설정하면 된다.

 

내가 필요했던 setting을 위주로 해보도록 하겠다.

• adaptiveHeight (default : false)
  height를 사진에 맞춤
  
  
• autoplay(default : false)
  자동 넘기기
  
  
• autoplaySpeed(default : 3000ms)
  자동으로 넘겨지는 속도
  
  
• arrows (default : true)
  이전, 다음으로 넘기는 화살표
  
  
• centerMode (default : false)
  이전사진과 다음사진이 옆에 같이 보이는 형태
  
  
• dots (default : false)
  캐러셀 아래 단추버튼
  
  
• fade(default : false)
  넘어갈 때 투명해짐
  
  
• infinite (default : true)
  반복됨
  
  
• pauseOnHover (default : true)
  마우스가 호버되면 안 넘어감

등이 있다 정말 많아서 페이지를 참고하길 바란다.

당연하게도 default값으로 사용해야하는 것들은 굳이 settings에 적지 않아도 된다. 

 

내가 사용한 방법은  버튼이나 도트 없이 그냥 자동으로 넘기는 것만 구현을 했다. 

내 세팅은 이렇게 된다.

  const settings = {
    // dots: true, 필요없어서
    fade: true,
    // infinite: true, // default값
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrow: false,
    adaptiveHeight: true,
    autoplay: true,
    centerPadding: '0px'
  };

 

작업하다가 버튼이나 단추버튼가 필요해지면 추가할 예정이다. 

 

기능 구현은 다 했지만 데이터 관리면에서 리팩토링을 해야한다. 이미지파일이 너무 많아져서 파일이 너무 무거워지는 것 같아서 사진들을 storage에 담아서 관리를 해야할 것 같다. 

 

우선 기능을 먼저 구현해보려고 노가다한 흔적을 남겨놓겠다.. 다신 이러지 않을 것을 머리에 새겼다.

import 차은우 from '../assets/profileImg/차은우.JPG';
import 츄 from '../assets/profileImg/츄.JPG';
import 장도연 from '../assets/profileImg/장도연.JPG';
import 키 from '../assets/profileImg/키.JPG';
import 고민시 from '../assets/profileImg/고민시.JPG';
import 서지수 from '../assets/profileImg/서지수.JPG';
import 주우재 from '../assets/profileImg/주우재.JPG';
import 이영지 from '../assets/profileImg/이영지.JPG';
import 차은우1 from '../assets/cha/단체사진(차은우).JPG';
import 차은우2 from '../assets/cha/단체사진2(차은우).JPG';
import 차은우3 from '../assets/cha/커플사진(차은우).JPG';
import 차은우4 from '../assets/cha/커플사진2(차은우).JPG';
import 차은우5 from '../assets/cha/행사사진(차은우).JPG';
import 차은우6 from '../assets/cha/행사사진2(차은우).JPG';
import 츄1 from '../assets/chu/우정사진(츄).JPG';
import 츄2 from '../assets/chu/우정사진2(츄).JPG';
import 츄3 from '../assets/chu/우정사진3(츄).JPG';
import 츄4 from '../assets/chu/행사사진(츄).JPG';
import 고민시1 from '../assets/go/개인사진(고민시).JPG';
import 고민시2 from '../assets/go/개인사진2(고민시).JPG';
import 고민시5 from '../assets/go/반려동물3(고민시).jpg';
import 고민시6 from '../assets/go/반려동물4(고민시).jpg';
import 고민시7 from '../assets/go/반려동물5(고민시).jpg';
import 고민시8 from '../assets/go/우정사진(고민시).JPG';
import 장도연1 from '../assets/jang/단체사진(장동녀).JPG';
import 장도연2 from '../assets/jang/단체사진2(장도연).JPG';
import 장도연4 from '../assets/jang/행사사진(장도연).JPG';
import 장도연5 from '../assets/jang/행사사진2(장도연).JPG';
import 이영지1 from '../assets/lee/반려동물(이영지).jpg';
import 이영지2 from '../assets/lee/반려동물2(이영지).jpg';
import 이영지3 from '../assets/lee/반려동물3(이영지).jpg';
import 이영지4 from '../assets/lee/반려동물4(이영지).jpg';
import 이영지6 from '../assets/lee/아이사진2(이영지).JPG';
import 이영지7 from '../assets/lee/아이사진3(이영지).JPG';
import 키1 from '../assets/key/가족사진(키).JPG';
import 키2 from '../assets/key/가족사진1(키).JPG';
import 키3 from '../assets/key/개인사진(키).JPG';
import 키4 from '../assets/key/우정사진(키).JPG';
import 주우재1 from '../assets/joo/반려동물(주우재).jpg';
import 주우재2 from '../assets/joo/반려동물2(주우재).jpg';
import 주우재3 from '../assets/joo/반려동물3(주우재).jpg';
import 주우재4 from '../assets/joo/반려동물4(주우재).jpg';
import 주우재5 from '../assets/joo/반려동물5(주우재).jpg';
import 주우재6 from '../assets/joo/반려동물6(주우재).jpg';
import 서지수1 from '../assets/seo/개인사진(서지수).JPG';
import 서지수3 from '../assets/seo/우정사진(서지수).JPG';
import 서지수4 from '../assets/seo/우정사진2(서지수).JPG';
import 서지수5 from '../assets/seo/우정사진3(서지수).JPG';

개념정리

react slick 라이브러리를 이용하면 이미지 캐러셀, 슬라이드를 순식간에 만들 수 있다.

 

내일 목표

• storage 에 이미지 관리 / 3시전에 끝내기
• 개인과제 리팩토링/ 클론한 것 말고 본래의 내것