My Develop Log

Axios Axios란? Axios는 브라우저, Node.js를 위한 promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. useAxios useAxios는 json url prop인 opts와 어떤 형식의 props를 가져올지 설정하는 axiosInstance를 인수로 갖는다. refetch 함수는 한번 가져온 데이터들을 업데이트 시키는데 기존 state에서 loading 부분만 true로 변환시키고, setTrigger을 통해 현재 시각으로 state를 업데이트 후 렌더링한게 된다. 이렇게 되면 trigger의 값이 변동될 때 실행되는 useEffect를 통해 새로운 데이터를 받아오게 된다. 우선, axios를 Add Dependency를 해준 후, useAxios.js라는 파일을 하..

useNotification useNotification은 Notification API를 활용하여 알림이 실행되는 함수이다. "notification"이라는 title과 함께 body 부분에는 "details notification"으로 작성된 알림이 window 알림에 보여지도록 만든다. (단, granted로 알림이 허가되어 있는 경우시) // app.js const useNotification = (title, options) => { if (!("Notification" in window)) { return; } const fireNotif = () => { // default의 경우 모든 알람이 허용되지 x if (Notification.permission !== "granted") { // ..

useScroll useScroll은 사용자가 스크롤 동작을 할 때, 특정 조건에 따라 무엇인가 작동시킬 수 있는 hook이다. 다음 예시에서는 window.scrollY를 활용하여 사용자가 스크롤로 그 값이 특정 구간으로 설정한 100 보다 크게 되면 글자의 색상을 빨강으로 바꾼다. // app.js import { useEffect, useState } from "react"; const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window...

useFadeIn useFadeIn은 서서히 나타나는 애니메이션 효과를 주는 hook이다. 우선, useRef를 사용해 element에 접근하여 transition의 opacity의 지연 시간을 5초로 설정 // app.js import { useEffect, useRef } from "react"; const usefadeIn = () => { // useRef를 사용해 element에 접근 const element = useRef(); useEffect(() => { if (element.current) { const { current } = element; current.style.transition = `opacity 5s`; current.style.opacity = 1; } }, []); re..