React : React Query + Axios ( 데이터 조회 + 추가 )

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시의 데이터를 ..

• format_list_bulleted React
• · 2023. 12. 17.
• textsms

React[리액트 심화] 비동기통신 미들웨어 thunk (경유지 역할)

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

• format_list_bulleted React
• · 2023. 12. 4.
• textsms

리액트 : 로그인 + accessToken이 유효할 경우에만 글 작성 /수정 가능

[ 핵심 : 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..

• format_list_bulleted React
• · 2023. 12. 2.
• textsms

리액트 : 새로고침 시 로그인 유지

1. App.jsx import { useEffect } from 'react'; import { useDispatch } from 'react-redux'; import { login } from 'redux/modules/authSlice'; import { __getLetters } from 'redux/modules/letters'; const { default: Router } = require('shared/Router'); function App() { const dispatch = useDispatch(); const HasAccessToken = localStorage.getItem('accessToken'); useEffect(() => { if (HasAccessToken) { con..

• format_list_bulleted React
• · 2023. 12. 2.
• textsms

리액트 : 로그인 & 회원가입 구현 (axios api 사용)

1.로그인 (axios api : post) const onLoginHandler = async () => { try { const response = await axios.post( `${process.env.REACT_APP_AUTH_SERVER_URL}/login`, { id: userid, password, }, { headers: { 'Content-Type': 'application/json', Authorization: `Bearer `, }, } ); //로그인 성공시, accessToken을 localStorage에 저장 const { accessToken, userId, avatar, nickname } = response.data; setUserid(''); setPassword(''..

• format_list_bulleted React
• · 2023. 12. 1.
• textsms

리액트 : 인증/인가(쿠키, 세션, 토큰, JWT)

1.인증/인가 (1) 인증 : Authentication ▶ 해당 유저가 등록된 회원 확인 ( 로그인 ) (2) 인가 : Authorization (권한) ▶ 특정 리소스에 접근할 수 있는 권한 ( 마이페이지 권한 ) ▶유저가 마이페이지에서 서버에 API 요청으로 개인정보를 받아오는 요청할때, 서버는 클라이언트에게 [인가]해줌! (3) http 프로토콜 통신의 특징 2가지 ▶ 무상태(stateless) : 서버는 클라이언트의 상태를 기억하지 못함. (client : 나 기억나? / server : 아니!) ▶ 비연결성(Connectionless) : 서버와 클라이언트는 연결 x (server : 매번 새로운 요청이 들어옴) 2. 쿠키 : 브라우저가 주머니에 갖고 있는 과자! ▶ http 프로토콜 통신 2..

• format_list_bulleted React
• · 2023. 11. 30.
• textsms