[TIL] 01.21 배너 작업, 실시간 시계

2021. 1. 23. 00:09TIL

react-slick 을 사용하여 배너컴포넌트를 만드는 작업을 진행 하였다. react-slick을 사용할 때 공식문서를 보면 css를 import 해서 사용하는데 지금 우리 프로젝트에서는 css 파일을 만들어서 react-click의 className 값을 지정해주어서 필요한 부분은 커스텀하여 사용하고 있다. 

위와 같이 dot 이 있고 이미지 크기가 고정이 되는 슬라이드를 만들어야 했다. 

dot을 생성하려면 setting 값에 dots: true 를 넘겨주면 되는데 이렇게만 넘겨주면 크기와 색상이 기본 값으로 넘어가서 내가 원하는 dot을 만들 수 가 없었다. 그래서 css 파일에서 dot 의 css 속성을 직접 수정을 하여 구현을 하였다. 

구현을 하고 나서 보니 appendDots과 dotsClass 라는 속성을 지원해주고 있었는데 이 방법을 사용하는 것도 좋을것 같았다. 

 

실시간으로 흐르는 시계를 구현하는 작업을 진행을 하였다. 

어렵지 않을까라고 생각을 했는데 간단하게 구현하는 방법이 있었다. 

 

1. new Date를 이용해 현재 date를 생성하고 시간만 가져오는 함수를 만든다. 

2. 이 함수는 useffect 에 넣고 setInterval 로 1초마다 실행 시킨다. 

3. 함수가 실행이 되었을 때 반복되지 않도록 unMount 시켜준다. 

const Clock = () => {
  const [time, setTime] = useState();
  
  const getTime = () => {
    const date = new Date();
    const filterTime = date.toLocaleTimeString().split(" ")[1];
    setTIme(filterTime)
  }
  
  useEffect(() => {
    setInterval(getTime, 1000)
    return () => {
        setInterval(getTime, 1000)
    }
  },[])

  return (
    <p> {time} <p/>
  )

}

'TIL' 카테고리의 다른 글

[TIL] 03.02 iamport를 통한 naverpay 연동 및 axios interceptors  (2) 2021.03.02
[TIL] 01.20  (0) 2021.01.20
[TIL] 01.19  (0) 2021.01.19
[TIL] 01.18 페이스북 로그인 문제  (2) 2021.01.18
[TIL] 01.14 결제 폼 디자인 수정 작업  (0) 2021.01.14