072DATA

tanStack Query? => 강력한 비동기나 서버 상태를 관리하게 해주는 도구 서버상태 -> 직접 서버에 저장되고 관리되는 데이터 서버 상태의 특징 데이터를 fetching하거나 update할 때 비동기 api 요청이 필요나 혼자만 사용하는게 아니기 때문에 다른 사람이 변경이 가능가져온 데이터가 최신 상태로 유지하기 어려울 수 있음 서버 상태를 관리하는데 어려움을 느끼는 점에서 캐싱, 데이터에 대한 중복 요청 해결, 오래된 데이터 업뎃,데이터 지연 로드 성능 최적화 등등등 이러한 과정을 tanStack Query로 관리가 가능!!!!!   TanStack Query 설치 명령어npm install @tanstack/react-queryyarn add @tanstack/react-query    기본..

오류 파티가 열렸다...  useContext에서 zustand로 리팩토링 하는 과정에서 나타난 오류인데로그인 하는 과정에서 분명 token을 set해주었는데도 찾을 수 없다는 오류가 나온다..const useAuthStore = create((set) => ({ user: JSON.parse(localStorage.getItem("user")), isAuthenticated: !!localStorage.getItem("token"), token: null, profile: null, newNickname: "", fetchProfile: async () => { try { if (token && isAuthenticated) { const userData = awa..

useContext를 사용하여 isAuthenticated를 가져오니까 값이 undifined가 나오면서 오류가 나타남 원일을 추측해보면 Context에서 isAuthenticated가 존재하지 않음 = 오타?,value로 내보내지 않음, Provider로 감싸지 않음,  Context를 import하지 않음과 같은 이유들 때문이라고 생각이 든다.   1. Context에서 isAuthenticated 오타 혹은 잘 존재하는지 확인import React, { createContext, useState, useEffect } from "react";import { getUserProfile } from "../api/auth";export const AuthContext = createContext();e..

json-server란?json-server는 간단한 API 서버를 빠르게 만들 수 있는 도구이며 JSON 파일을 RESTful API로 변환해줌프론트엔드 개발 시 데이터를 처리하거나 간단한 백엔드 기능을 구현할 때 유용함   설치 및 설정 프로젝트에 json-server 설치npm install json-server yarn add json-server  프로젝트 루트에 db.json 파일을 생성하고, 해당 파일에 초기 데이터를 작성 { "users": [ { "id": 1, "name": "Alice" }, { "id": 2, "name": "Bob" } ]}  서버 실행하기npx json-server db.json --port 3000yarn json-server db.json --p..

인증 (Authentication) 인증은 사용자가 시스템에 접근할 수 있는 권한이 있는 사용자인지 확인하는 과정시스템이 사용자가 누구인지 확인하는 것이 핵심임  ex) 사용자가 ID와 비밀번호를 입력하여 로그인  인가 (Authorization)인가는 인증된 사용자가 특정 리소스에 접근할 권한이 있는지를 확인하는 과정 ex) 사용자가 로그인한 후 마이페이지에 접근할 때, 해당 페이지에 접근할 권한이 있는지 확인    인증과 인가는 서로 밀접하게 연관되어 있고함께 작동하여 시스템의 보안성을 높임  인증 = 사용자 식별 인가 = 권한 확인   쿠키 (Cookie) 쿠키는 사용자의 브라우저에 저장되는 데이터 조각이고  주로 서버가 인증 정보를 기억하기 위해 사용됨 HTTP는 무상태(stateless) 이기 ..