본문 바로가기

코딩 정보54

[React][Tanstack Query] 개념과 활용 방법에 대해 알아보자 목차 간단한 설명은 아래 페이지에 있다.참고https://be-senior-developer.tistory.com/94 [React] React-Query 라이브러리가 무엇인지 알아보자목차 오늘은 프로젝트를 하면서 리액트 쿼리에 대해 접하게 되었다. 말하는 감자인 나는 당연히 모르기 때문에 이번 기회에정리해보고자 한다.. 리액트 쿼리의 필요성 캐시동일한 데이터에be-senior-developer.tistory.com 다음과 같이 QueryClientProvider를 사용해 주자useQuery로 데이터 불러오기 main.jsximport { Navigate, RouterProvider, createBrowserRouter,} from "react-router-dom";...import { QueryC.. 2024. 8. 26.
[React] 배포 과정에 대해서 알아보자 목차 배포 과정배포 과정은 크게 다음과 같다. 1. 테스트 코딩하기 2. 코드 최적화하기 3. 서버에 업로드할 파일 생성하기 4. 서버에 파일 업로드하기  지연 로딩배포하기 전 최적화 방법 중 하나인 지연 로딩에 대해 알아보자 초기에 모든 페이지의 코드를 로딩하면 첫 페이지의 로딩이 느려진다.따라서 이를 위해서 페이지에 접근했을 때 동적으로 컴포넌트를 로딩하는 것이다.import { createBrowserRouter, RouterProvider } from "react-router-dom";//import BlogPage, { loader as postsLoader } from "./pages/Blog";import HomePage from "./pages/Home";// import PostPage,.. 2024. 8. 24.
[React] 로그인 시 토큰 기반 인증 만들어보기 목차 토큰 기반 방식의 로그인 장점서버가 아닌 클라이언트에서 유저의 인증정보를 관리한다는 점이다.서버에서 유저의 상태를 가지고 있지 않아 서버는 무상태적인 아키텍쳐를 구축할 수 있다.하나의 토큰으로 다수의 서버에 인증가능하다는 점에서 확장성을 갖는다.토큰 생성만을 담당하는 인증용 서버를 만들 수 있는 등 어디서나 토큰의 생성이 가능하다. 토큰 기반 인증 방식유저가 인증정보를 담아 서버에 로그인 요청을 보낸다.서버는 데이터베이스에 저장된 유저의 인증정보를 확인한다.인증에 성공했다면 서버는 유저에 대한 권한정보를 서버의 비밀키와 함께 토큰을 생성한다.서버는 Authorization 헤더에 토큰을 담아 클라이언트에 전달한다.클라이언트는 전달받은 토큰을 브라우저의 세션 스토리지 또는 로컬스토리지에 저장한다.클라.. 2024. 8. 24.
[React][Router] 라우터 활용을 통한 비동기 통신 (하) 목차 참고전편을 보고 보면 이해에 도움이 됩니다.https://be-senior-developer.tistory.com/175 [React][Router] 라우터 활용을 통한 비동기 통신 (상)목차 lodaer활용하기우리는 페이지를 불러오기 전에 데이터를 먼저 불러오고 그 데이터를 기반으로 페이지를 불러오고 싶은 경우가 있다.그럴떄 loader를 이용하면 된다. import { createBrowserRouter, Robe-senior-developer.tistory.com defer과 Await, Suspense를 이용한 로딩화면 개선아래와 같이 데이터가 불러오기전에 네비게이션을 보여주여 사용자의 경험 향상을 시키고 싶을 때가 있다. import EventsList from "../src/compone.. 2024. 8. 22.
728x90

티스토리툴바