전체 글67 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. [React] 리액트에서 Input이 여러 개일 때 효율적으로 State 관리하기 아래는 input으로 제목과 내용을 입력받아 Todolist에 저장하는 코드이다. Input.js import React from "react"; const Input = () =>{ return ( 제목 내용 추가하기 ); }; export default Input; Input 2개와 버튼 1개가 있을 때, 각 Input마다 state를 생성하고 각 state를 업데이트를 작성하였다. function Input({ setTodos, todos }) { //input state const [title, setTitle] = useState(""); const [contents, setContents] = useState(""); //각 state 업데이트할 함수 const titleChange = (ev.. 2023. 4. 21. 이전 1 ··· 5 6 7 8 9 10 11 ··· 17 다음
