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

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 사용)

리액트 : 로그인 & 회원가입 구현 (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)

리액트 : 인증/인가(쿠키, 세션, 토큰, 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
[리액트 심화] 비동기통신 Axios 사용방법 (GET, POST, DELETE, FETCH)

[리액트 심화] 비동기통신 Axios 사용방법 (GET, POST, DELETE, FETCH)

1. GET: 데이터 조회 import { useEffect, useState } from 'react'; import './App.css'; import axios from 'axios'; function App() { const [todos, setTodos] = useState(null); const [inputValue, setInpuValue] = useState({ //id : json의 방식의 데이터는 자동으로 입력됨 title: '', }); //[조회] const fetchTodos = async () => { const { data } = await axios.get('http://localhost:4002/todos'); console.log('data', data); setTodos..

  • format_list_bulleted React
  • · 2023. 11. 29.
  • textsms
리액트 오류 : Too many re-renders. React limits the number of renders to prevent an infinite loop.

리액트 오류 : Too many re-renders. React limits the number of renders to prevent an infinite loop.

[원인] 로그인 에 onClick이벤트에서 리랜더링이 무한으로 돌아서 오류 발생 [해결] { setIsMember(false); }} > 로그인 화살표 함수 제대로 활용하기 onChange = {(event)=>{ } } 끝.

  • format_list_bulleted React
  • · 2023. 11. 29.
  • textsms
[리액트 심화] 비동기통신 Axios interceptor

[리액트 심화] 비동기통신 Axios interceptor

1. Axios interceptor 개념과 필요성 (1) 개념 - 반복적으로 발생하는 일을 일괄적으로 처리 가능한 작업 - [요청] --- [interceptor] --- [응답] (2) 필요성 - get,post,delete에 포트번호가 변경되면 모두 찾아서 변경해줘야함 - 요청 헤더 추가 / 인증 관리 / 로그 관련 로직 삽입 / 에러 핸들링 에서 좋음 2. vs code : Axios interceptor 적용 src > [.env] REACT_APP_SERVER_URL = http://localhost:4002 ▶여기다 적어놓고 App.js에서 사용할 예정 src > [App.js] //[조회] const fetchTodos = async () => { //const { data } = awai..

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