[Wecode] 1차 프로젝트 1주차 회고록 📓

위코드 12기 1차 프로젝트 1주차 기록

-기간: 2020년 09월 14일 (월) - 09월 18일 (금)
-팀명: 드림카카오DreamKakao (프론트엔드 4명, 백엔드 2명)
-사용 계기: 처음 신규페이지(Newitem)에서 이미지 슬라이더를 맡게 되었는데
레이아웃 짜는 것 마저 벅찼던 나는😅(No Answer) 어떻게 만들어야 할지 감이 안잡혔었다.
멘토님들에게 질문해서 Slick이라는 라이브러리를 알게 되었고 이걸 사용해 배너를 만들었다.

📚React Slick Library 사용 후기

✅ slick 사용방법

설치1 (Slick Library 설치)

npm install react-slick --save

설치2 (css import하기)

npm install slick-carousel
// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

✅ 시작해보기

import React, { Component } from "react";
import Slider from "react-slick";

export default class SimpleSlider extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2> Single Item</h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    );
  }
}

멘토님들에게 질문했을때 받은 답변이 document에 잘 나와있으니 그걸 참고해서 일단 슬라이더를 만들어보고 시작하라는 것이였다.
짠! 하고 슬라이더가 만들어진다! 신기하지 않나요?

✅ 수정해보기

짠! 하고 만들어진 슬라이더에서 내가 수정해야했던 부분은
-원본 슬라이더에 맞춰서 settings를 적절하게 수정해주고,
-텍스트 슬라이드 대신 이미지가 들어가야했고
-적절한 위치에 텍스트와 기본 arrow 모양이 아닌 background로 화살표가
들어가야한다는 점이였다.

✅ 참고할만한 사이트

https://www.npmjs.com/package/react-slick-slider
https://react-slick.neostack.com/docs/get-started

✅ 힘들었던 점

실제 이미지 슬라이더를 보면 1페이지부터 10페이지로 차례대로 자동슬라이더가 되었다가 마지막인 10페이지에서는 거꾸로 한번에 10페이지에서 1페이지로 휘리릭하고 넘어가는 기능을 가지고 있다.
그치만 slick에서 이걸 구현할 property가 없는건지 내가 못찾는건지는 모르겠지만🤔 이거 때문에 시간이 많이 소요되었다. js로는 구현이 가능하지만 slick를 이용해 거의 완성해두었던터라 그냥 계속 붙잡아둔 것 같다.
그래서 결국엔 infinite를 true로 두어서 이미지 슬라이더가 계속 반복되는 스타일로 완성하였다.

✅ 결과물

일정시간 자동으로 슬라이더가 넘어가도록 해놓고, 또한 직접 화살표를 눌러 넘어가거나 드래그해서 슬라이더를 넘길 수 있다.

✅ 후기

라이브러리 사용은 처음이였는데 신기하고 간편하면서 어려운 점도 많았던 것 같다.
다음에 Slick을 이용하게 된다면 좀 더 단시간 내에 뚝딱 만들어서 시간을 단축시키고 싶은 마음이다. 왜냐하면 프로젝트 1주차를 지내면서 세부적인 것들 때문에 시간을 너무 허비하는 바람에 다음 스텝으로 넘어가는게 너무 오래걸렸기 때문이다.
2차 프로젝트 넘어가기 전에 복습을 잘해서 다음엔 좀 더 능숙하게 만들수 있도록! 화이팅부리!