✅구현 (1) 리덕스 툴킷 상태관리 (2) 다크모드 구현시, HTML최상위 요소에 'dark'클래스 추가 (요소에 추가) document.documentElement.classList.add('dark'); (3) Tailwindcss로 다크모드 적용 (1) 리덕스 툴킷 //redux > module > darkModeSlice.tsx import { createSlice } from '@reduxjs/toolkit'; const darkModeSlice = createSlice({ name: 'darkMode', initialState: false, reducers: { toggleDarkMode(state) { return (state = !state); }, }, }); export const { ..

[핵심] (1) input 태그의 checkbox 타입 사용 + label 태그의 htmlfor = 'input태그의 id' (2) 🍔 햄버거 모양 : span으로 만들기 * 3개 (3) 토글되면 햄버거 => x 모양으로 변경되며 사이드바 사용 (1) 🍔 햄버거 모양 구현 : input 태그 + label 태그 [NavBar.jsx] : return 문 안의 ui구현 { navigate('/top'); }} > TOP { navigate('/bottom'); }} > Bottom { navigate('/acc'); }} > Accessories { navigate('/hit'); }} > HIT ▶ input 태그의 checkbox 타입 사용 + label 태그의 htmlfor = 'input태그의 id..

★ 제천 튜터님: 리액트쿼리의 찐 동작원리 ★ 1. 리액트 쿼리 리액트 쿼리 : 서버 상태관리를 쉽게 도와주는 라이브러리 ▼ ▼ 서버상태 : 서버에 요청하고 응답받는 모든 과정과 연관된 데이터들 (1) fetching : 서버에서 데이터 받아오기 (2) caching : 서버에서 받아온 데이터를 따로 보관 => 동일한 데이터가 단 시간 내에 다시 필요하면 서버 요청 없이 보관된 데이터 꺼내서 사용 (3) synchronizing : 서버상 데이터와 보관 중인 캐시 데이터를 동일하게 만들기 (동기화) (4) updating : 서버 데이터 변경 용이 => mutation & invalidateQueries 리액트 쿼리 미사용 : useState + useEffect 사용 const [todos, setTo..

React Query 1. 기존 미들웨어의 한계 (Redux-Thunk) 보완 : 보일러 플레이트 => 코드량이 너무 많음 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아님 2. 강점 : 사용 방법이 쉽고 직관적임 : 보일러 플레이트 만들다가 오류 날 일이 없음 3. 주요 키워드 3가지 (1) Query : 데이터 물어보기 : axios의 get요청과 유사 (2) Mutation : 어떤 데이터 변경 : CRUD 중 CUD에 해당 : axios의 post,patch,delete와 유사 (3) Query Invalidation (★) : 위에서 본 쿼리를 인벨리데이션한다 = 무효화 시킨다. : 저녁 8시의 데이터와 저녁 9시의 데이터는 일치하지 않음 => 무효화시키고 => 9시의 데이터를 ..

Thunk - 리덕스 환경에서 비동기통신에서 사용되는 미들웨어 - 데이터베이스에서 데이터를 받아와서 상태까지 변경할 수 있는 것 1. 리덕스 미들웨어 - 액션 > 미들웨어 > 리듀서 > 스토어 - 리덕스 : dispatch를 하면 action이 리듀서로 전달 & 리듀서는 새로운 state 반환 - 미들웨어 : 위의 과정 사이에 (middle) 하고싶은 작업 가능 - 카운터 프로그램 : (+1 실행) ---[ 3초 기다리기 = 미들웨어] --- (+1 구현) - 사용 이유: 서버와의 통신(get,post)을 위해서 사용이 대부 2. 리덕스 thunk - thunk 사용 : 우리가 dispatch할때 객체가 아닌 함수를 dispatch가능 1) thunk 함수 구현 : createAsyncThunk (red..

[ 핵심 : axios instance사용 ] 1) 인증서버와 데이터 서버를 구분해서 호출하기 위함 2) 데이터서버에 interceptor를 하기 위해서 --> 서버가 클라이언트에게 보내기전에 interceptor 작업을 함 => '데이터서버' 요청 보내기 전에 '인증서버'를 interceptor로 작업함 (유효한 토큰을 갖고있느지에 대한 확인 작업) * 클래스 : 학생 (포괄적 개념) * 인스턴스 : 학생 1, 학생 2... 학생 999 (적용받는 구체적인 하나하나들) 1. 인증서버 : auth.api.js import axios from 'axios'; const authAPI = axios.create({ baseURL: process.env.REACT_APP_AUTH_SERVER_URL }); e..