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: 클라이언트 오류..

안녕 오늘은 리덕스를 사용해 React에서 상태 관리를 어떻게 구현하는지 정리했음리덕스는 중앙 집중식 상태 관리를 가능하게 해주고 컴포넌트 간에 상태를 공유할 수 있게 해줌   리덕스 스토어 설정 리덕스로 상태 관리를 하려면 스토어를 먼저 설정함스토어는 애플리케이션의 모든 상태가 저장되는 공간임import { combineReducers, createStore } from "redux";// 1) rootReducer: 여러 리듀서를 합치는 부분 (현재는 빈 객체)const rootReducer = combineReducers({});// 2) store 조합: rootReducer를 기반으로 스토어 생성const store = createStore(rootReducer);// 3) 스토어 exporte..

안녕하세요 오늘은 팀 프로젝트를 진행하면서 구현했던 무한스크롤 방식을 TIL로 작성해보려 합니다무한 스크롤은 꼭 한 번 구현하고 싶었던 기능이었기 때문에 설레는 마음으로 기능을 구현하였습니다.intersectionObserver을 React에서 사용하고 Supabase로 데이터를 받아왔습니다!1. 상태 변수 설정  const [postLoadingMore, setPostLoadingMore] = useState(true); const [displayedPosts, setDisplayedPosts] = useState([]); const [offset, setOffset] = useState(0); const limitLength = 6; postLoadingMore: 추가 데이터가 있는지에 대한 ..

스타일드 컴포넌트는 React에서  CSS-in-JS 스타일링을간편하게 적용할 수 있는 라이브러리인데요 조건부 스타일링을 통해 컴포넌트의 상태나 props에따라 동적으로 스타일을 변경할 수 있슴다  기본적인 조건부 스타일링 예로 들어 버튼의 활성화 상태에 따라 색상을 변경하는 경우 예시 코드와 같이 작성이 가능해요 코드예시import styled from 'styled-components';const Button = styled.button` background: ${props => props.primary ? 'blue' : 'gray'}; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; ..

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