728x90 반응형 전체 글86 [React] date-fns와 Style-Components로 커스텀하기 쉬운 달력 만들기 (3편 - 오늘 표시하기 + Event 날짜 표시) 이번 편에서는 특정 날짜를 클릭하면 해당 날짜에 있는 event가 뜨고, event가 있는 날짜들에 대해 하이라이트 표시를 확인할 수 있도록 설정하는 방법을 말씀해드리겠습니다.. 저는 Props와 hook(UseState)를 많이 사용하여 CSS에 전달하고 보여주는 편인데요. 아래 코드들과 설명들로 보여드릴게요 ㅎㅎ 1. Props 값으로 오늘 날짜와 현재 달, 이전 달, 다음 달 표시 하기 date-fns라이브러리에서 isSameMonth(), isSameDay()을 활용하여 Day 컴포넌트에서 day에 대해 map()으로 출력할 때 bool 값을 props로 전달하도록 하여 아래 코드처럼 is어쩌고 값을 전달한 후 bool 값에 따라 color와 BackGroundColor를 설정하였다. 에를 들어 .. 2023. 7. 8. [React] 이미지 자동 슬라이더 carousel 기능 구현하기 첫 화면에 배너 이미지가 자동으로 슬라이드 되고, 버튼 클릭으로도 사진 전환이 가능한 컴포넌트를 만들어야하는 과제가 주어졌다. 다양한 라이브러리가 있지만 나는 최대한 JS 코드만을 이용해서 만들어보았다! 1. 현재 보여지는 사진과 순서에 대한 Value 값 지정하기 UseState를 활용해서 사진 순서에 따라 값이 바뀌게 하였다. const [currentImageIndex, setCurrentImageIndex] = useState(0); const images = [HeroBanner1, HeroBanner2, HeroBanner3, HeroBanner2]; 2. useEffect와 setInterval() 함수를 통해 자동 전환 구현하기 setInterval()함수를 통해 currentImageIn.. 2023. 7. 7. [React] 스크롤하면 나타나는 위로가기 버튼 만들기(Floating Action Button & Style-Components) 프로젝트를 하며 디자이너가 스크롤 컨트롤이 일정 이상 생기면 나타나는 위로가기 버튼을 만들어달라고 했다..ㅎ 어떻게 개발할지 고민도 안하고 바로 만들었다 ㅋㅋ 1. window.pageYOffset를 통해 Scroll 높이 읽어오기 Scroll의 값을 읽어온 후 UseState를 통해 isVisible의 Bool 값을 지정했다. * window.pageYOffset 현재 문서의 수직 방향으로 스크롤된 픽셀의 양을 나타내는 속성 const [isVisible, setIsVisible] = useState(false); const handleScroll = () => { const scrollTop = window.pageYOffset; if (scrollTop >= 400) { setIsVisible(tr.. 2023. 7. 7. [React] 배경화면 동영상/사진 - Safari 자동재생 안됨, Chrome 구분하여 자동재생 작동하기 구현 동아리 웹사이트를 만들면서 Home 화면 배경화면 동영상이 Safari에서는 자동 재생이 안된다는 사실을 알게 되었다.. 알고 보니 사파리는 사용자 경험을 향상시키기 위해 자동 재생 정책을 가지고 있는데, 광과민성 발작을 일으킬 수 있는 영상, 음란물, 폭력, 혐오, 공포가 포함된 영상 등이 자동 재생되어 원치 않게 보게되는 문제를 방지하기 위해 화면이 딱 켜졌을 때에 대한 자동 재생을 막아두었다. 그래서 사용자의 스크롤 컨트롤이 생기면 자동 재생이 되는 기능을 넣자고 하기도 했지만..ㅎㅎ 그래서 우리는 Safari일 때와 Chorme일때의 환경을 JS로 읽어와 서로 다른 인터렉션을 보여주기로 결정하였다. 사용자 에이전트(userAgent) 문자열 읽어오기 -> 사용자 에이전트 문자열을 읽어오기 위해 U.. 2023. 7. 7. [React] date-fns와 Style-Components로 커스텀하기 쉬운 달력 만들기(2편) 저번 1편에 이어서 2편으로 date-fns와 Style-Components로 커스텀 달력 편을 마무리 하고자 합니다! 2023.07.06 - [코딩/Javascript] - [React] date-fns와 style-components로 커스텀 달력 만들기(1편) [React] date-fns와 style-components로 커스텀 달력 만들기(1편) 올해 새로운 프로젝트를 맡게 되면서 달력에 서버에 있는 데이터를 보여줘야하는 기능을 구현하게 되었다. 다양한 라이브러리가 있었지만 디자이너의 요구에 맞는 달력을 제작하기가 어려워 da quddkflty.tistory.com 커스텀 달력 만들기 이제 date-fns에 대한 이해도가 어느 정도 생겼다는 가정하에 글을 쓰도록 하겠다. 1. Date-fns 라.. 2023. 7. 6. 이전 1 ··· 12 13 14 15 16 17 18 다음 반응형
