본문 바로가기

Library&Framework32

[React Client, Spring Boot Server] Spring Security와 OAuth2 Client를 활용한 SPA 웹 애플리케이션 로그인 시스템 구축: 일반 회원 및 소셜 로그인(Naver, Google, Kakao)과 JJWT 활용 (1) 구현 절차와 인증 방식에 대한 설명 쇼핑몰을 만드는 팀 프로젝트를 진행하면서, 일반 회원 및 소셜로그인 을 구현 했으며JWT 토큰을 활용한 로그인에 대해 포스팅 하려고 합니다.특히나 보안을 신경 쓰기 위해서, 소셜로그인과 같은 경우 Rest API 방식을 사용하지 않고클라이언트에서 redirect uri 를 요청하는 방식이 아닌서버에서 직접 redirect uri 를 요청하고 그에 대한 응답을 클라이언트에게 반환 하는 OAuth2 Client 의 커스텀 소셜 로그인을 진행했습니다.방식 : JWT 를 활용한 로그인에는 여러가지 방식이 존재 하지만, Authorization Header 방식과 HttpOnly Cookie 방식을 사용한 "혼합 방식"을 채택했습니다.  ■ 프론트엔드 기술Vite 와 같은 프론트엔드 빌드 도구를 사용하지 않았고,.. 2024. 6. 21.
[문제해결]이미지를 등록하고나서 , 이미지가 바로 나오지 않는 이유 프로필 이미지를 등록하는 시나리오 및 과정 현재 진행중인 프로젝트에서 , 프로필 페이지에서회원 정보 수정 페이지로 들어갔을 때 , 프로필 이미지를 POST(업데이트) 하는  연필모양의 버튼을 누르게 되면, 프로필 이미지를 등록하는 모달창이 나오게 됩니다.이 모달창에서는, 1. 이미지 파일을 선택하고2. 이미지 파일 미리보기에서 이미지를 크롭하고3. 프로필 이미지를 등록하는 순서로 프로세스가 진행됩니다.Crop Image 를 누르면, 무조건 Apply Profile Image 버튼이 활성화 되는 것은 아닙니다.const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB// 프로필 이미지 크롭 헨들러const handleCropImage = async () => {setCanvasPre.. 2024. 6. 4.
[Backend] 데이터베이스 트랜잭션(Transaction)이란? (1) 트랜잭션은 개발자라고 하면 제대로 알고 있어야 하는 개념이다. 하지만 트랜잭션은, 다양한 영역에서 흔히 사용되는 개념이다. HTTP (request와 response로 이루어진 단위) 단위에서의 트랜잭션도 존재하며, DB의 상태를 기준으로하는 트랜잭션도 존재한다. 이 트랜잭션이라는 것은, 어떤 특정한 기준에서의 작업의 단위를 말한다. 이 글에서는 데이터베이스 트랜잭션은 무엇이고 어떤 특징을 가지고 있으며, 트랜잭션의 상태와 연산에 대해 다룰 것이다.트랜 잭션에 대해서, 기본과 원리를 이해하고 추후 서비스 영역에서 트랜잭션 처리를 어떻게 해야할지 고민하게 될때올바른 이해와 정확성을 위해 트랜잭션에 대한 시리즈를 포스팅할 계획이다.이번 포스팅에서는, 흔히 말하는 Database 에서 Transaction .. 2024. 5. 13.
Spring Boot 3.2.3에서 의존성 호환성 설정[JPA, Redis, Java Mail Sender, Thymeleaf, Validation, Web, Datatype-hibernate6, Hibernate Core] Hibernate5 -> Hibernate6변경 인프런 김영한님의 실전! 스프링 부트와 JPA 활용2 강의를 듣고 Project Undemand 프로젝트 dependencies를 설정하는 과정에서 java.lang.ClassNotFoundException:javax.persistence.Transient 다음과 같은 에러가 발생하여, 이를 해결하는 과정을 담고자 포스팅을 합니다. 먼저 프로젝트 initializers 를 다음과 같이 셋팅하고 시작했다는 점을 말씀드립니다. 여기서 각 Dependencies 가 어떤 기능을 하는지는 , 다루지 않겠습니다 ! 스프링부트 3.2 릴리즈노트를 보시면, 최소 지원버전 및 중요한 정보들을 확인하실 수 있습니다. 강의에서 Hibernate5JakartaModule 설정 저는 강의에서 스프링 부트 3.0 이하에서의 H.. 2024. 3. 6.
[Django + React Pagination] ModelViewSet을 이용한 페이지네이션 기능 더보기 목차 1. 백엔드에서 페이지네이션 기능을 구현하는 이유는 무엇인가? 2. Django 에서 페이지네이션 종류는 몇가지 인가 ? 3. ModelViewSet React 상품 전체 리스트 들고오기 4. 백엔드에서 페이지 네이션 Link를 들고와서 그걸 프론트에서 보여주는 것과 백엔드에서 상품 전체 리스트를 들고와서, 그걸 프론트에서 페이징 해주는 것의 차이는 무엇인가? 1. 백엔드에서 페이지네이션 기능을 구현하는 이유는 무엇인가? 데이터베이스 스키마 구조가 간단?하다면 상품과 같이, 많은 양의 데이터를 가지고 있는 경우에 서버에 부하를 줄 수 있기 때문입니다. 페이지 네이션을 통해서, 한 페이지에 볼 수 있는 상품의 갯수를 정하고 filtering 을 통해, 사용자가 원하는 데이터를 보내준다면 UI/.. 2024. 1. 8.
[리액트 강의 복습 03] 리액트에서 map 을 이용한 게시글 리스트 보기 , 게시글 작성하기 게시글 전체 const [posts, setPosts] = useState([ { id: 1, title: "남자 코트 추천 해드립니다!", content: "이 코트는 모의 회사에서 개발한 코트입니다.", publishDate: "2023-01-01", likes: 0, }, { id: 2, title: "강남 우동 맛집 소개!", content: "이 우동집은 모의 회사에서 개발한 우동집입니다.", publishDate: "2023-01-02", likes: 0, }, { id: 3, title: "파이썬 독학하는 방법좀 알려주세요", content: "파이썬을 독학하려면 어떻게 해야할까요? ", publishDate: "2023-01-03", likes: 0, }, ]); App 함수의 return.. 2024. 1. 4.

티스토리툴바