왕가's history

Mutate mutate는 원격 데이터 및 캐싱된 값을 변경, 갱신하기 위해 사용됩니다. 다른 곳에서 해당하는 키값에 데이터를 post나 delete, patch 등 작업이 일어났을 경우, 캐싱된 데이터를 갱신해야 될 때 사용된다고 보면 됩니다. (revalidation) Global과 Bound 두 가지로 나눠져 있습니다. Global Mutate useSWRConfig 또는 swr을 import 해서 사용하게 됩니다. import { useSWRConfig } from "swr" function App() { const { mutate } = useSWRConfig() mutate(key, data, options) } /////////////////////////////////////// impor..

2023.07.03 - [Front-End/Library] - Library] SWR 저번 게시글에 이어서 SWR 여러 개념? 기능? 들을 설명하려고 합니다. 전역설정 만약 SWR을 사용하는데 fetcher가 중복된다면 고려해서 사용하면 좋을 듯한 기능입니다. import useSWR, { SWRConfig } from 'swr' function Dashboard () { const { data: events } = useSWR('/api/events') const { data: projects } = useSWR('/api/projects') const { data: user } = useSWR('/api/user', { refreshInterval: 0 }) // 오버라이드 // ... } funct..

SWR(Stale-While-Revalidate) swr은 데이터를 가져오기 위한 React hook 라이브러리로 보시면 됩니다. 서버에 GET요청을 하고, 결과를 받아와 간편하게 사용할 수 있습니다. 단순히 axios만 사용하는 것보다 효율이 좋다고 보시면 됩니다. 대표적인 특징으로 빠르고, 가볍고, 재사용이 가능한 데이터를 가져온다. 내장된 캐시 및 요청 중복을 제거 실시간으로 동작 3가지를 볼 수 있을 듯합니다. (저는 캐시 데이터를 사용하고, 중복으로 요청을 안 한다는 게 큰 장점으로 생각합니다.) 공식 홈페이지는 아래와 같습니다. https://swr.vercel.app/ko 설치 npm i swr yarn add swr 기본 구성 const { data, error, isLoading, isV..

Swiper 이번에 프로젝트 진행하면서 사용한 Swiper 라이브러리에 대해 적어보려고 합니다. 공식 홈페이지는 아래와 같습니다. https://swiperjs.com/react 제가 요즘은 React만 사용하고 있기 때문에 React방식으로 작성하였습니다. 설치 npm i swiper 기본 구성 HTML 삽입 미리보기할 수 없는 소스 공식 홈페이지에 나와있는 소스에서 이것저것 수정해 봤습니다. 간단히 설명하고, 제가 사용했던 방법 설명하려고 합니다. modules : 기본 Swiper 외에 모듈을 추가하여 디자인을 수정할 수 있습니다. Navigation, Pagination, Scrollbar 총 3가지 모듈을 추가한 상태입니다. 사용된 모듈들은 추가로 옵션을 설정할 수 있습니다. 위 예시로는 pag..

useCallback & useMemo 언제 사용해야 될까? 두 개의 hook에 대해서 다시 한번 다뤄보려고 합니다. 두 hook은 메모이제이션 되니깐 함수나 결과값이 있는 거에 전부 사용하면 좋지 않을까??라는 생각을 할 수 있을 것입니다. 그런 생각에 성능 좋아지겠지 하고 사용하다 보면 되려 성능저하가 될 수 있습니다. 왜냐면 결국 메모이제이션하는데에도 그만한 비용이 들기 때문입니다. 그렇기에 언제 쓰고, 언제 쓰면안좋은지에 대해 작성하려고 합니다. ❌사용하지 말아야 하는 경우 복잡하지 않은 연산에 사용하는것은 오히려 메모리 낭비입니다. onClick이벤트로 setState해주는 경우 같이 단순한 상황이라면, 리렌더링 된다고 하더라고 다시 그려주는 편히 훨씬 낫다고 볼 수 있습니다. React에서도 ..

2023.06.27 - [Front-End/Library] - Library] Axios 이전 Axios글을 기반으로 마지막 코멘트에 달았던 내용들을 다뤄보려고 합니다. 동시요청 axios .all([axios.get(), axios.get(), req3...]) .then(axios.spread((res1, res2, res3, res4) => { // 요청 성공했을 때 }) ) 한 번에 여러 개의 데이터를 갖고 오고 싶을 때 사용하면 될 듯합니다. Instance const axiosInstance = () => { const instance = axios.create({ baseURL: 'http://localhost:3000/account', withCredentials: true, xsrfCoo..

Axios Node.js와 브라우저를 위한 HTTP 비동기 통신 라이브러리로서, Promise 타입입니다. BackEnd ↔ FrontEnd 사이의 통신하는 수단으로, JS에서 주로 사용되는 ajax나 fetch와 같다고 보면 됩니다. Promise기반이라 데이터를 다루는데 편리함 Response가 자동으로 JSON형태로 변경 CSRF보호 기능이 내장 기본적으로 내장된 것이 아니기 때문에 따로 설치가 필요 등으로 볼 수 있을 것이다. fetch와 ajax를 보완한 라이브러리로 볼 수 있습니다. CSRF(XSRF) : 웹사이트 취약점 공격의 하나로, 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(CRUD 등)를 특정 웹사이트에 요청하게 하는 공격 설치 npm install axios yarn ad..

CustomHook 개발하다 보면 같은 로직을 작성하는 경우가 많이 생기게 됩니다. 이럴 때 반복되는 코드를 없애기 위해 직접 hook을 만들어 사용하면 도움이 될 것입니다. 뿐만 아니라, 로직이 너무 길거나 가독성이 떨어질 경우도 있고, 로직과 태그들 사이에 구분이 짓고 싶을 때 사용해도 아주 유용합니다. (함수를 쪼개서 만든다고 생각하면 될 것입니다. 우리는 hook을 사용할 뿐...) 예 HTML 삽입 미리보기할 수 없는 소스 name이랑 email 두 개의 state를 만들었습니다. name은 직접 만든 useInput이라는 커스텀훅을 사용하였고, email은 컴포넌트에서 작성하였습니다. 로직상 두 개의 차이점이 없는 상황입니다. 만약 useInput이라는 커스텀 훅을 만들지 않았다면, email..

Fragment 태그 처음에 컴포넌트관련해서 짧게 설명했던 컴포넌트입니다. React에서 제공해 주는 기본 컴포넌트이며, 동일한 레벨의 태그를 반환해 줘야 될 때, 그 상위로 달아주는 용도로 사용하게 됩니다. 그렇게 되면 하나의 태그가 반환되기 때문입니다. 예 HTML 삽입 미리보기할 수 없는 소스 (생긴게 이상하긴 하지만...) 전체를 태그로 감싸줘서 h1, h2, span 2개가 동일 선상의 레벨로 그려지게 됩니다. 의미 없는 div나 span 등 태그를 사용하기보다는 Fragment태그를 활용하면 실제 HTML 그려질 때 좀 더 효율적으로 그릴 수 있습니다. 뿐만 아니라 map 돌릴 때 보면, key값을 입력해야 되는데 를 활용할 수 있습니다. 생각보다 자주 사용하게 되는 유용한 태그...

useContext 2023.06.23 - [Front-End/React] - React] Hook : useContext 앞 게시글에서 얘기했던 useContext의 단점은 리렌더링이 자주 발생하게 된다는 것입니다. 이를 개선하고자 합니다. 예 HTML 삽입 미리보기할 수 없는 소스 앞에 예를 들었던 마트 코드에서는 2층 과일, 3층 음료수로 변경하였습니다/ 만약 addDrink뿐만 아니라 addFruit를 context추가하여 사용하고, 이를 Emart2F라는 컴포넌트를 새로 만들어서 사용한다고 생각하면, addFruit 하게 될 때 Emart3F도 리렌더링 되는 현상을 볼 수 있을 것입니다. 이를 해결하려고 몇 가지 수정했습니다. Emart.js import React, { useState, use..