본문 바로가기

코딩 정보56

[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.
백엔드와 함께 프론트 개발 시 유용한 패키지들 목차 Concurrently 라이브러리서버와 클라이언트를 따로 npm start 를 해주면 번거로운데 이것을 한번에 실행할 수 있게하는 패키지이다. 다음 코드를 통해 패키지를 받아주자$ npm install concurrently --save package.json에서 아래와 같이 내가 원하는 명령어와 함께 같이 실행해 주고 싶은 것들을 넣어주면 된다. Nodemon 라이브러리nodejs 진행하면 소스 수정 시 서버 재시작을 해야한다.개발 진행 시 수정할 때 마다 재시작을 하면 여간 불편한게 아니다.그 대안으로 nodemon(소스 수정 시 재시작 없이 반영) 모듈이 있다.  다음 코드를 통해 패키지를 받아주자$ npm install nodemon --save-dev  package.json에서 아래와 같.. 2024. 8. 22.
728x90

티스토리툴바