router4 [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. [React][Router] 라우터 활용을 통한 비동기 통신 (상) 목차 lodaer활용하기우리는 페이지를 불러오기 전에 데이터를 먼저 불러오고 그 데이터를 기반으로 페이지를 불러오고 싶은 경우가 있다.그럴떄 loader를 이용하면 된다. import { createBrowserRouter, RouterProvider } from "react-router-dom";import HomePage from "../pages/HomePage";import Layout from "./components/Layout";import EventsPages from "../pages/EventsPage";import EventDetailPage from "../pages/EventDetailPage";import EventLayout from "../pages/EventLayout";i.. 2024. 8. 22. [React] 라우터의 개념과 활용 방법에 대해 알아보자 목차 라우팅이란?라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다.간단하게 요약하면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다. 리액트 라우터의 사용 이유SPA 사용자 경험 향상의 목적으로 페이지 전체를 로딩하는 대신 라우팅을 통해 부드러운 화면전환을 목적으로 사용한다. 간단한 사용 방법import { createBrowserRouter, RouterProvider } from "react-router-dom";import HomePage from "./pages/HomePage";const router = createBrowserRouter([ //경로 { path: "/", element: }, {},]);function Router() { .. 2024. 8. 16. 이전 1 다음 728x90
