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) 이기 ..

안녕  강의를 듣다가 정리하면서 학습하면 좋을 것 같아서HTTP 상태코드 및 HTTP 메서드에 대해서 간략하게 적어보았다. HTTP 상태코드 서버가 클라이언트의 요청을 처리한 결과이고세자리 숫자로 구성되어 첫 번째 자리에 따라 의미가 다르다 1xx :  정보100 (Continue) :요청의 일부를 서버가 받았으며, 나머지를 계속 보내달라는 의미 2xx : 성공200 (OK) : 요청이 성공적으로 처리되었음을 나타냄201 (Created) : 요청이 성공적으로 처리되었고 새로운 자원이 생성되었음을 나타냄 3xx: 리다이렉션301 (Moved Permanently) : 요청한 리소스가 영구적으로 새로운 URL로 이동302 (Found) : 오청한 리소스가 임시로 다른 URL로 이동 4xx: 클라이언트 오류..

오류 내용 로그인된 상태에서 새로고침하면 클라이언트가비로그인 상태로 인식하여 로그인 페이지로 보내는 오류가 발생했음 useEffect도 사용해보고 로직도 새로 다시 짜보고 useState로 loading을 만들어서 user 데이터 값이 들어올 때까지 기다려보아도 해결할 수 없었는데 context 파일을 살펴보니 user의 초기 값이 null 인 것이었다그러하여 3가지 상태를 정의하여 오류를 해결하기로 했다 해결 방법1. 초기값이 존재하면 로딩중인 상태2. null이면 비로그인 상태3. 데이터 값이 존재하면 로그인 상태 2, 3번은 데이터베이스에서 전달된 값에 따라 상태가 null 혹은 데이터가 전달되지만초기 값은 직접 커스텀 해줘야 한다 만약 컴포넌트 어딘가에서 user에 대한 데이터 값에접근한다면 해당..

오류 내용 supabase에서 user 데이터를 가져왔는데전체 데이터는 출력되지만 속성을 불러오면 속성 값이 없다는 오류가 나온다..Header.jsx:11 Uncaught TypeError: Cannot read properties of null (reading 'aud') at Header (Header.jsx:11:20) at renderWithHooks (chunk-6VWAHX6D.js?v=e96a4e37:11548:26) at mountIndeterminateComponent (chunk-6VWAHX6D.js?v=e96a4e37:14926:21) at beginWork (chunk-6VWAHX6D.js?v=e96a4e37:15914:22) at HTMLUnknownEl..

안녕 안녕하세욥 오늘은 중요한 Key와 같은 값을 .env 파일 안에서 관리하는 방법을 정리하겠습니다.  .env 생성 및 사용법 1. 먼저 생성하는 방법은 프로젝트의 루트 디렉토리에 .env 를 생성합니다 2.해당 파일안에 key = value 형식으로 환경 변수를 작성합니다VITE_API_KEY=your_api_key_here 참고로 Vite에서 접근 가능한 환경 변수는 일반 환경 변수와 구분을 위해 VITE_ 라는 접두사를 붙여야 합니다 - 공식 문서 참고https://ko.vitejs.dev/guide/env-and-mode ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev  3. 환경 변수 사용const SUPABASE_KEY = import.meta.env.VITE_API_K..

오류 내용부모 div의 onClick 이벤트에 상세페이지로 이동할 수 있도록 기능을 부여헀는데해당 div안에 다른 기능을 하고 있는 버튼을 눌렀을 때도 상세페이지로 이동하는 버그가 생겨버렸다 아무래도 부모 요소의 onClick이 자식 요소에게 까지 전파가 되어 버려서일어난 버그인 것으로 유추가 되지만 좀 더 자세히 알아볼 수 있도록 정보를 캐왔다 오류 원인HTML 문서에서 요소들은 "중첩 관계"라는 것을 가질 수 있다고 하는데 어떠한 요소가 또 다른 요소안에  존재할 수 있고 해당 요소의 클릭 이벤트는부모-> 자식 혹은 자식-> 부모로 계속 전파된다고 함 이를 "이벤트 버블링"이라 함 해결 방법그리하여 stopPropagation이라는 메소드를 사용해서현재 요소에 등록된 이벤트 리스너만 실행되고 상위 요..