분류 전체보기

'인증'과 '인가' 인증(Authentication) - 식별 가능한 정보로 서비스에 등록된 유저의 신원을 입증하는 과정 - 사용자가 누구인지 확인하는 절차이며 쉽게 얘기해서 로그인하는 과정 인가(Authorization) - 인증된 사용자에 대하여 자원의 접근권한을 확인하는 것 - 사용자에 대한 권한을 허락 JWT(Json Web Token) JSON 객체를 사용해서 토큰 자체에 정보들을 저장하고 있는 Web Token JWT 토큰을 전달하고 인증 받는 과정 1. 클라이언트가 서버에 로그인 요청을 한다. 2. 서버는 아이디와 비밀번호를 확인해 유효한 사용자인지 검증한다. 3. 유효한 사용자이면 토큰을 생성해서 응답한다. 4. 클라이언트는 서버에서 준 토큰을 저장한다. 5. 이후 인증이 필요한 API를 ..

로그인 기능을 구현할 때 jwt를 많이 사용하실 겁니다. 그러면 react에서는 어떻게 해야할까요? JWT(Json Web Token) 란? Json 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim 기반의 Web Token axios 인스턴스 생성 로그인을 할 때 api에서 넘겨주는 access token을 cookie에 저장하는 로직이 선행되어야 합니다. 로그인 후 cookie에 저장되는 access token을 가져와서 axios 통신시 header에 넣어주는 코드입니다. import Cookies from "js-cookie"; import axios from "axios"; /** * @description Axios 인스턴스를 생성 * 목적 : axios 요청 시 header에 toke..

--- 기존 설정들 } , "proxy": "http://localhost:8080", "devDependencies": { "@types/js-cookie": "^3.0.3", "@types/styled-components": "^5.1.26" } 기존에 spring에서 설정해서 잘 됐던 문제가 spring security를 적용하니 react와 spring간 cors 문제가 발생하여 통신이 안되는 오류가 있었다. 기존 설정 기존 React와 통신하기 위한 설정 코드 @Configuration @RequiredArgsConstructor public class WebMvcConfig implements WebMvcConfigurer { private final long MAX_AGE_SECS = 360..

매번 경로 계산하기 귀찮고 헷갈리기 때문에 craco를 사용하여 절대 경로 사용법에 대해 포스팅 하겠습니다. // npm일 경우 npm i @craco/craco // yarn일 경우 yarn add @craco/craco 1. project Root에서 craco.config.js 파일 생성 const path = require("path"); module.exports = { webpack: { alias: { "@": path.resolve(__dirname, "./src"), }, }, }; 2. tsconfig.json에서 baseUrl 설정 - 기본 Path를 src/* 로 설정 { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*..