FE5 [React, SpringBoot] React에서 api 요청 시 HttpSession 유지 안되는 문제 문제 발생 기능 - 사용자가 본인인증을 할때 인증 코드 메일 발송을 한다. - 메일을 보내기 전에 인증 코드를 랜덤으로 생성하고 생성된 인증 코드를 HttpSession에 저장한다. - 사용자는 메일에 적혀진 인증코드를 작성하고 인증하기 버튼을 클릭한다. - 사용자가 입력한 인증 코드와 session에 저장된 인증코드가 같은지 확인한다. 문제 - 코드를 저장한 session과 사용자가 인증코드를 확인받는 로직에서 session에서 인증코드를 꺼내는데, 이 두개의 session이 불일치한다. String storedCode = session.getAttribute("code").toString(); --> 여기서 session에 code 가 없다고 NullPointerException 이 발생한다. 문제 .. 2023. 9. 8. [React] Email js 사용하여 사용자에게 이메일 보내기(form 제출X) 목표 form 제출이 아닌, 사용자가 이메일 인증 버튼을 단순히 클릭했을 때 메일을 보낸다. 회원가입 진행 email js 홈페이지 : https://www.emailjs.com/ 서비스 생성하기 해당 예제는 gmail을 사용했습니다. 1. 왼쪽 Email Services 클릭 -> Add New Service 클릭 2. 이용할 이메일 서비스 선택 ( 해당 예제에서는 gmail 사용) 3. Service Name과 Service ID를 작성한다. -> ServiceName, ID는 추후 코드에서 사용 4.Connect Account 연결 후 서비스 생성 템플릿 생성하기 1. 왼쪽 Email Templates 클릭 -> Add New Template 클릭 2. 템플릿 작성 3. settings에 들어가서 .. 2023. 7. 25. [React] axios API 통신시 header에 JWT token 보내기 로그인 기능을 구현할 때 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.. 2023. 7. 8. [React] craco 절대경로 설정 방법(TypeScript) 매번 경로 계산하기 귀찮고 헷갈리기 때문에 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/*.. 2023. 1. 8. 이전 1 2 다음
