리액트19 리덕스툴킷(redux-toolkit)으로 리액트 로그인 프로젝트를 진행하면서 전역변수로 저장할 만한 것이 생겼다. 우리는 로그인 여부에 따라 보이는 헤더가 달라보이게끔 로그인 전에는 로그인, 회원가입메뉴가 헤더에 존재하고, 로그인 후에는 이 둘이 사라지고 마이페이지와, 로그아웃메뉴가 헤더에 존재하도록 구현하려고했다. 처음에는 굳이 리덕스를 사용하지않고 세션스토리지에 저장해놓은 토큰의 존재유무에 따라 로그인 여부를 결정하려고했다. const [isLogin, setIsLogin] = useState(false); useEffect(() => { const accessKey = localStorage.getItem("Access_key"); if (accessKey) { setIsLogin(true); } else { setIsLogin(false); } }, .. 2023. 5. 30. useCallback과 React.Memo을 통한 불필요한 리렌디링 막기 회원가입페이지를 구현하다가 직업과 성별 버튼을 클릭시에 전체 페이지가 리렌더링되는 예상치못한 오류가 발생하였다. // 직업 버튼 클릭 핸들러 const roleButtonClickHandler = (selectedRole) => { setRole(selectedRole); }; 직업 setRole("model")} style={{ backgroundColor: role === "model" ? "#000000" : "#ffffff", color: role === "model" ? "#ffffff" : "#000000", }} > 모델 setRole("photographer")} style={{ backgroundColor: role === "photographer" ? "#000000" : "#fffff.. 2023. 5. 24. CryptoJS를 활용한 RefreshToken 암호화 및 복호화 - 안전한 로그인 토큰 관리 방법 로그인시 서버에서 주는 AccessToken과 RefreshToken을 세션스토리지에 저장하여 관리하였다. 하지만, 이는 토큰을 그대로 저장하는 것은 보안적으로 취약할 수 있다는 문제점을 가지고 있어 이를 해결하기위해 CryptoJS를 사용하기로 결정했다. 🎀 CryptoJS란? JavaScript에서 암호화와 해시 기능을 제공하는 라이브러리로, JavaScript에서 암호화 및 해시 기능을 수행하기 위해 사용됨. 🎀 crypto-js 설치 yarn add crypto-js 🎀 crypto-js 암호화 방식 1. 대칭키 (Symmetric Encryption) : 암호화 - 복호화 할 때 같은 키값을 이용 2. 비대칭키 (Asymmetric Encryption) : 암호화 - 복호화 할 때 다른 키값을 .. 2023. 5. 24. [React] 옵셔널 체이닝(Optional Chaining) json-server를 활용한 실습을 진행하던 중에 오류가 발생하였다. import { useEffect, useState } from "react"; import "./App.css"; import axios from "axios"; function App() { const [todos, setTodos] = useState(null); const fetchTodos = async () => { const { data } = await axios.get("http://localhost:3000/todos"); console.log("data", data); setTodos(data); }; useEffect(() => { //db로부터 값을 가져오기 fetchTodos(); }, []); return .. 2023. 4. 28. 이전 1 2 3 4 5 다음
