2024.02.24 TIL - firestore Vite에서 사용하기, swiper로 slider 만들기

firestore Vite에서 사용하기

1. 기존 CRA혹은 yarn으로 만든 리액트 프로젝트에서 firestore를 쓰려면 env파일에서

REACT_APP_APIKEY = 
REACT_APP_AUTHDOMAIN = 
REACT_APP_PROJECTID = 
REACT_APP_STORAGEBUCKET = 
REACT_APP_MESSAGINGSENDERID = 
REACT_APP_APPID = 

이렇게 쓰면 됐는데,
Vite으로 프로젝트를 생성한 경우에는

VITE_API_FIRESTORE_KEY = ""
VITE_APP_FIRESTORE_AUTHDOMAIN = ""
VITE_APP_FIRESTORE_PROJECTID = ""
VITE_APP_FIRESTORE_STORAGEBUCKET = ""
VITE_APP_FIRESTORE_MESSAGINGSENDERID = ""
VITE_APP_FIRESTORE_APPID = ""

이렇게 앞에 VITE_ 이렇게 붙여줘야함

2. config.js에 하던 설정 중 = process.env; 이 부분도 = import.meta.env; 이렇게 써줘야함

영상 id 6개 알려주면 썸네일 받아다준다고?!
-> 받은 이미지링크를 파이어스토어에 넣기?

---

swiper로 header slider 만들기

(참고)
헤더 슬라이더
https://0lrlokr.tistory.com/105
공식문서
https://swiperjs.com/react

---

slick으로 body slider 만들기

(참고)
⭐️swiper로 발전시켜보기 : https://open-code.tech/en/post-2651/

https://velog.io/@kimhr08/React-%EC%97%90%EC%84%9C-slick-%EA%B3%BC-styled-components%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

Infinite Carousel
https://bepyan.github.io/blog/dnd-master/4-drag-carousel#%EC%8B%AC%ED%99%94-%EC%9D%91%EC%9A%A9--infinite-carousel

<Infinite autoplay carousel - 무한 자동 재생 캐러셀>

(html, css로만 작성한 예시)
https://codepen.io/studiojvla/pen/qVbQqW
⭐️ youtube 영상 : https://www.youtube.com/watch?v=3Z780EOzIQs

(참고)
https://velog.io/@hameee/UI-%EB%AC%B4%ED%95%9C-%EC%9E%90%EB%8F%99-%EC%9E%AC%EC%83%9D-%EC%BA%90%EB%9F%AC%EC%85%80-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0#-%EA%B5%AC%ED%98%84-%EB%B0%A9%EB%B2%95

<React Alice Carousel 라이브러리로>
https://morioh.com/a/396088a987f2/a-react-component-for-building-content-galleries-and-carousels

<React Fast Marquee 라이브러리로>
youtube 영상 : https://www.youtube.com/watch?v=eKdkigGYFpE

⭐️ (swiper로 흐르는 슬라이드 - js기준으로 작성된 벨로그)
https://ranidiant.tistory.com/entry/swiper-js-%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%B6%80%EB%93%9C%EB%9F%BD%EA%B2%8C-%ED%9D%90%EB%A5%B4%EB%8A%94-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0

위 내용을 리액트 + styled components 기준으로 변환한 코드

import React from 'react';
import Swiper from 'react-id-swiper';
import styled from 'styled-components';
import 'swiper/css/swiper.css'; // Swiper CSS를 가져옵니다.

// 스와이퍼 스타일
const SwiperWrapper = styled.div`
  .swiper-wrapper {
    transition-timing-function: linear;
  }
`;

// 스와이퍼 슬라이드 스타일
const SwiperSlide = styled.div`
  background-color: #ccc;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const SwiperComponent = () => {
  // 스와이퍼 설정
  const swiperParams = {
    autoplay: {
      delay: 0,
      disableOnInteraction: false,
    },
    speed: 5000,
    loop: true,
    loopAdditionalSlides: 1,
    slidesPerView: 5,
  };

  return (
    <div>
      {/* 첫번째 슬라이드 */}
      <SwiperWrapper dir="ltr">
        <Swiper {...swiperParams}>
          {[...Array(10)].map((_, index) => (
            <SwiperSlide key={`slide1-${index}`}>
              {index + 1}
            </SwiperSlide>
          ))}
        </Swiper>
      </SwiperWrapper>
      {/* 두번째 슬라이드 */}
      <SwiperWrapper dir="rtl">
        <Swiper {...swiperParams}>
          {[...Array(10)].map((_, index) => (
            <SwiperSlide key={`slide2-${index}`}>
              {index + 1}
            </SwiperSlide>
          ))}
        </Swiper>
      </SwiperWrapper>
    </div>
  );
};

export default SwiperComponent;