taystory

와 useNavigate()는 둘 다 React Router에서 페이지를 리디렉션하거나 이동할 때 사용하는 방법이지만, 사용 시점과 목적에 따라 적합한 경우가 다릅니다.  1. 컴포넌트 형태로 사용되며 JSX 안에서 특정 조건에 따라 리디렉션할 때 적합합니다.장점: JSX 구조에 자연스럽게 녹아들어 조건부 렌더링과 함께 사용할 수 있습니다.사용 예:if (!user) { return ;} 이유:ProtectedRoute처럼 렌더링 과정에서 인증 여부를 확인하고, 조건에 따라 리디렉션이 필요한 경우 return문에서 바로 사용하기 편리합니다.컴포넌트 내에서 리턴하는 방식이기 때문에 코드가 간결합니다.2. useNavigate()훅 형태로, 함수 내부에서 프로그래밍적으로 페이지 이동을 수행할 때 사용합니다..

🟠 원래 생각했던 방식:새로고침이나 페이지 이동 시 zustand 상태 초기화 -> useEffect()로 수동 복원작동 방식:상태가 브라우저 스토리지(localStorage/sessionStorage)에 저장됨.페이지 새로고침이나 이동 시 zustand 상태가 초기화됨.useEffect()를 사용해 브라우저 스토리지에서 상태를 가져와 zustand 상태를 수동으로 복원.장점:상태 복원의 흐름을 직접 제어할 수 있어 디버깅이 직관적.특정 조건에 따라 복원 로직을 유연하게 커스터마이징 가능.단점:불필요한 보일러플레이트 코드 증가매번 useEffect()로 상태를 복원해야 하므로, 코드가 장황해지고 중복 발생 가능.유지보수 어려움상태 복원 로직이 여러 컴포넌트에 분산되면, 수정 시 모든 관련 코드를 검토해..

1. 액세스 토큰 (Access Token)주로 짧은 수명을 가집니다.보통 15분 ~ 1시간 정도의 만료 시간으로 설정됩니다.짧은 이유: 액세스토큰은 민감한 데이터 접근 권한을 부여하기 때문에, 보안 강화를 위해 만료 시간이 짧게 설정됩니다.클라이언트가 서버에 요청을 보낼 때, 이 토큰을 첨부하여 인증 및 권한 확인을 받습니다.2. 리프레시 토큰 (Refresh Token)긴 수명을 가집니다.보통 7일 ~ 30일 정도로 설정되며, 일부 시스템에서는 60일 이상도 가능합니다.클라이언트가 액세스토큰이 만료되었을 때, 리프레시 토큰을 사용하여 새로운 액세스토큰을 발급받습니다.리프레시 토큰은 액세스토큰보다 덜 민감하다고 간주되지만, 여전히 보안적으로 중요한 자격 증명입니다.3. 자동 로그인 흐름액세스토큰 유효할..

주어진 API 응답에서 item 배열의 첫 번째 요소에 포함된 세 가지 값(originalname, name, path)은 파일 업로드와 관련된 정보를 제공하며, 각각 특정 목적을 가지고 사용됩니다.1. originalname설명: 사용자가 업로드한 파일의 원래 이름입니다.용도:파일 업로드 시, 사용자가 올린 파일의 이름을 백엔드에서 기록하거나 로깅할 때 사용됩니다.사용자가 파일을 다운로드하거나 파일 정보를 확인할 때, 원래 이름을 표시하기 위해 사용됩니다.예를 들어, sample-dog.jpg라는 이름은 사용자가 업로드한 파일의 원래 파일명입니다.사용 예시:"업로드된 파일: sample-dog.jpg"와 같은 메시지에 표시.파일 업로드 히스토리를 보여줄 때.2. name설명: 백엔드에서 저장된 파일의 ..

useNavigate()를 이용해 페이지를 이동할 때, 이동 후 스크롤 위치가 이전 페이지 상태를 유지하거나 내려간 상태로 이동하는 문제는 React Router의 기본 동작 때문일 수 있습니다. 이를 해결하려면, 페이지 이동 후 스크롤을 수동으로 제어하면 됩니다.해결 방법React에서 페이지 이동 후 항상 스크롤을 맨 위로 이동하도록 하려면 두 가지 주요 접근법이 있습니다:  1. ScrollToTop 컴포넌트 사용React Router의 useLocation을 사용해 라우트가 변경될 때마다 스크롤을 제어하는 컴포넌트를 작성합니다.import { useEffect } from "react";import { useLocation } from "react-router-dom";function ScrollT..

1. Query Parameters (?key=value)특징:형식: URL의 ? 뒤에 key=value 형식으로 추가.목적: 데이터를 필터링하거나 정렬, 검색 조건을 전달할 때 사용.다중 값: 여러 매개변수를 &로 연결.순서: 순서는 중요하지 않음.서버에서 값을 사용하지 않으면 무시됨.GET /products?category=electronics&sort=price&limit=10 category: 전자기기만 필터링.sort: 가격 기준으로 정렬.limit: 최대 10개의 결과만 반환. 보완 내용:복잡한 조건 조합:쿼리 파라미터는 필터링 조건이 많아질수록 복잡해질 수 있음.예를 들어, 날짜 범위 필터는 다음과 같이 작성할 수 있음:GET /events?startDate=2023-01-01&endDate..