내마음대로만들어보자/React 프로젝트 만들기 이해20 [React] 리덕스 유저모듈만들기 1. 리덕스 설치 리덕스와 리덕스 모듈 내에서 경로 이동까지 하게 해줄 히스토리, 라우터와 히스토리를 엮어줄 모듈까지 한번에 설치 yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 리듀서에서 뭔가를 바꿀 때 불변성 관리 위해 이번엔 임머라는 패키지 사용한다. 그리고 액션도 매번 맨 위에서 user/CREATE처럼 리듀서 모듈 명에 어떤 타입 넣어서 만들고, 그 아래에는 액션 생성 함수 만들어서 export 다 해주고 좀 귀찮았는데 이걸 redux-actions라는 패키지로 좀 더 편하게 사용할 수 있다. yarn add immer redux-actions 2. user.js 유저모듈 .. 2021. 11. 28. [React]로그인 상태에 따른 분기 하기 1. 로그인한 상태일때 헤더 만들기 import React from "react"; import {Grid, Text, Button} from "../elements"; const Header = (props) => { const [is_login, setIsLogin] = React.useState(false); if(is_login){ return ( 헬로 ); } return ( 헬로 ) } Header.defaultProps = {} export default Header; 2. 쿠키가 있으면 로그인한 헤더 보여주기 import React from "react"; import {Grid, Text, Button} from "../elements"; import {getCookie, deleteCo.. 2021. 11. 28. [React] 로그인할떄 쿠키 저장하기 * 동작원리 - 로그인 페이지에서 id,pw 입력 - 로그인 버튼 - 로그인 성공 시 user_id , user_pw 로 쿠키 저장하기 // 키값 기준으로 쿠키에 저장된 값을 가져오는 함수 const getCookie = (name) => { // 쿠키 값을 가져옵니다.(name) let value = "; " + document.cookie; // 키 값을 기준으로 파싱합니다.(";"기준으로) let parts = value.split("; " + name + "="); // value를 return! if (parts.length === 2) { return parts.pop().split(";").shift(); } }; // 쿠키에 저장하는 함수 const setCookie = (name, val.. 2021. 11. 28. [React] 웹 저장소 (토큰) 1. 웹 저장소 http는 1번 요청 을 하고 응답을 받으면 연결이 해제된다. 그러므로 우리가 access_token을 클라이언트 어딘가에 저장을 해야한다. - 클라이언트 저장소 확인하기 ( 개발자 도구 → Application 탭 → 좌측 Storage 확인) 2. 쿠키 클라이언트 로컬에 저장되는 key:value 형태의 저장소 ( 약 4KB 정도 저장 할 수 있다.) - 쿠키만들기 document.cookie = "MY_COOKIE=here;"; //key는 MY_COOKIE , value는 here - 쿠키 가져오기 console.log(document.cookie); - 쿠키 삭제 쿠키를 삭제할 때는 만료일을 이전으로 돌려서 지우는 방법을 많이 쓴다. document.cookie = "MY_COO.. 2021. 11. 22. 이전 1 2 3 4 5 다음
