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..

useConfirm useConfirm은 사용자가 버튼을 클릭하는 등.. 무언가 작업을 하면 이벤트를 실행하기 전에 메시지를 보여주는 것이다. 예제 코드는 다음과 같다. // App.js const useConfirm = (message = "", onConfirm, onCancel) => { if (!onConfirm && typeof onConfirm !== "function") { return; } if (!onCancel && typeof onCancel !== "function") { return; } const confirmAction = () => { if (window.confirm(message)) { onConfirm(); } else { onCancel(); } }; return co..

useEffect useEffect는 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있게 하는 Hook으로, componentDidMount, componentDidUpdate, componentWillUnmount의 역할을 하게된다. useEffect의 기본 형태는useEffect(, );이다. 다음과 같이 사용하게 되면 컴포넌트가 마운트 된 후, 컴포넌트가 업데이트된 후, 컴포넌트가 언마운트 되기 전 모두 실행된다. // App.js import { useEffect, useState } from "react"; export default function App() { const sayHello = () => console.log("say hello"); const [number,setNumber]..

오늘은 강의를 들으면서 정리하면 좋을 것 같은 문법들을 공부하면서 정리할 예정이다. map함수란? 1. 제곱근 구해보기 var num = [4,9,16,25,36,49,64]; var result = num.map(Math.sqrt); console.log(result); // [2,3,4,5,6,7,8] 2. 기존 배열 x2를 한 배열 구해보기 var num = [1,2,3,4,5,6,7]; var newNum = num.map(number =>number *2); console.log(newNumbers); // [2,4,6,8,10,12,14] 3. 배열 안에 배열이 있는 경우 var num = [[1,2,3],[4,5,6],[7,8,9]]; //array안에 array가 있는 경우 var newN..

useEffect란? 만약 우리가 어떤 api를 불러오는 코드를 작성했을 때, state가 변화하면 api를 또 불러오게 되어 정말 비효율적인 코드가 된다. 이를 해결하기 위해 useEffect를 사용한다. 다음 예제를 활용해 useEffect를 이해할 수 있다. 다음 코드는 input에 무언가 입력할때, counter 버튼을 클릭했을 때에 따라 console.log가 작동하는 코드이다. 우선 기본적으로 useEffect, useState를 import 해준다. import { useState, useEffect } from "react"; 그 후, button과 input에 관련된 state를 각각 만들어주고, 버튼을 클릭했을 때, 그리고 input 값이 변화되었을때 state 값을 변화시켜주는 함수를..