![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/qu0YU/btrRa1HnkTy/4ncIkzf7Yh40lTYVB2JyEk/img.png)
✏️ React Query의 Mutation, Infinite Query 지난 포스팅에서는 React Query의 Stale과 Cache에 대해서 알아보았다. 이번 포스팅에서는 Mutation, Infinite Query에 대해서 알아보려고 한다. Mutation useQuery는 데이터를 조회하는 용도로 사용한다. 그러면 Post, Delete, Put 등의 HTTP Method를 사용하기 위해서는 어떻게 할까. useMutation을 사용할 수 있다. useMutation와 useQuery는 비슷하지만 조금 다르다. useMutation은 mutate 함수를 반환한다. useQuery와 달리 Query Key 값이 필요하지 않다. 캐시된 데이터가 없기 때문에 isLoading을 지원하지 않는다. 기본..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/lAuxN/btrQpaFCwaA/0yy3X3UnIoONYZvKXpYvSK/img.png)
✏️ React Query의 Stale 저번 포스팅에서는 React Query의 기초적인 부분에 대해서 알아보았다. 이번 포스팅에서는React Query의 Stale과 Cache에 대해서 적어보려고 한다. Stale React Query에서 Stale은 만료되었다는 뜻을 가지고 있다. React Query Devtools를 보면 Stale, Fetching, Fresh, Inactive 등의 상태를 확인할 수 있다.여기서 Stale에 표시되는 Query는 만료된 데이터를 뜻한다. 만료된 데이터라는 것을 무엇일까? Stale이란 신선하지 않은.. 이라는 뜻을 가지고 있다. 데이터가 신선하지 않고, 서버에서 다시 새로운 데이터를 받아야 하는 뜻으로 볼 수 있을 것 같다. React Query에서는 Stale..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/7XN9V/btrQaLlEJ3d/rlgnSWPcOrpMNiqlhmVpA1/img.png)
✏️ React Query는 무엇일까 요즘 React 기반의 프로젝트를 보면 비동기 통신에 React Query를 많이 사용하고 있는 걸 볼 수 있다. 필자는 최근에서야 실무에서 React를 주로 사용하게 되었고, 이전에는 Vue를 주로 사용하다 보니 비동기 통신은 Axios만 사용했었고, Axios로 데이터를 가져오면 Vuex로 관리하게 되었는데 요즘은 React Query + Recoil 조합을 꽤 많이 사용하는 것 같다. 우선, React Query는 자신을 비동기 상태 관리라고 설명한다. 서버에 있는 데이터를 가져오고, 캐싱하고, 비동기 통신에서 발생하는 Error 혹은 Loading 단계를 쉽게 처리할 수 있도록 도와준다. 처음 React Query를 다룰 때 캐싱한다는 게 조금 생소했다. 그러..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/UWJXU/btqMDy4DP9S/LxSSwwcSKmR4vRDKIYQVs0/img.png)
✏️React를 경험해보자 6탄 Redux의 흐름부터 파악을 해야 할 것 같다. 저번에 createStoreWithMiddleware 함수를 통해 store를 생성했고, reducer라는 인자를 넘겨주었다. // user_reducer.js import { LOGIN_USER } from "../_actions/types"; export default function (state = {}, action) { switch (action.type) { case LOGIN_USER: return { ...state, loginSuccess: action.payload }; default: return state; } } // reducers/index.js import { combineReducers } fr..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/9IKYx/btqMxpelnw7/F0y0R7iKjy2nx2A7Csjc2K/img.png)
✏️React를 경험해보자 5탄 4탄에서 Provider를 통해 App에서 Store 접근을 할 수 있게 만들었다. 5탄에서는 리덕스를 이용해서 로그인 기능을 만들어보려고 한다. import React, { useState } from "react"; import { useDispatch } from "react-redux"; import { loginUser } from "../_actions/user_action"; function LoginPage(props) { const dispatch = useDispatch(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const onEmailHa..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/b6hu8t/btqMkoaABnL/f6H6v5rdz1v1zsZZfCagO0/img.png)
✏️React를 경험해보자 4탄 3편에서는 Proxy 설정을 통해 Cors 문제를 해결했다. 4편에서는 node.js (server)와 react (client) 서버를 동시에 실행할 수 있는 Concurrently, 상태관리 라이브러리인 Redux를 적용해볼까 한다. - 서버와 클라이언트를 동시에 실행할 수 있는 Concurrently Backend + Frontend를 같이 사용하는 프로젝트를 하다보면, 둘 다 서버를 켜줘야 한다. 매번 귀찮게 두번 명령어를 입력할 필요 없이, 한번의 명령어로 두개의 서버를 켜주는 착한 라이브러리이다. www.npmjs.com/package/concurrently concurrently Run commands concurrently www.npmjs.com npm i..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/KmIa2/btqMkomzV7C/zyyLSCLlrS8mx3SnuRNUSk/img.png)
✏️React를 경험해보자 3탄 2편에서 Axios를 통해 get을 호출했는데 Cors에러가 발생해서 API호출에 성공하지 못했다. 3편에서는 이처럼 Cors 에러를 해결할 수 있는 Proxy 설정을 하려고 한다. - Cors?? 우선 Cors에러가 발생하는 이유는, 다음과 같다. Front서버는 localhost:3000 포트를 사용 중이고, Backend는 localhost:5000 포트를 사용중이다. 이처럼 다른 포트를 사용중일 때, 보안 상의 이유로 Cross Origin Resource Sharing 에러가 발생한다. 이 문제를 해결할 수 있는 방법은 여러가지가 있지만, 나는 Proxy를 통해 해결하려고 한다. - Proxy ?? 네이버에 Proxy 단어를 검색했을 때 나오는 뜻은 "대리, 대리..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/CCVmG/btqMegI4YBf/NwJaJKjk9ZARTyUGRm1pok/img.png)
✏️React를 경험해보자 2탄 1편에서는 간단하게 React 설치에 대해 작성을 해봤다. 이번 편에서는 라우트와, Axios를 경험(사용)해보려고 한다. - 라우트 사용을 위해 react-router-dom 을 설치해보자 npm install react-router-dom --save 설치가 완료되었다면, App.js에 react-router-dom을 import하고, 라우팅할 컴포넌트도 같이 import 해준다. import React from "react"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import LandingPage from "./components/views/LandingPage/Landi..
- Total
- Today
- Yesterday
- react query
- composition
- three.js
- Store
- pagination
- 포트폴리오
- NUXT
- Front
- 자바스크립트
- vuetify
- vuex
- vue3
- Closure
- frontend
- react
- 타입스크립트
- react-query
- Cypress
- Redux
- backend
- 호이스팅
- 퍼블리셔
- vue
- pinia
- JS
- CORS
- e2e
- Core Components
- vue.js
- react native
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |