거니의 velog

* 이번에는 이전에 구성했던 API 서버에 장바구니 관련 기능을 리액트를 이용해서 실제 화면을 구성해 본다. 리덕스 툴킷을 이용해서 로그인 상황에 따라 장바구니에 상품을 추가하고 변경하는 작업을 처리해 본다. * 이번 장의 학습 목표는 다음과 같다. 1. 리덕스 툴킷을 이용한 장바구니 상태 관리 2. API 서버와 장바구니 상태 동기화 처리 1. API 서버와 통신 * 가장 먼저 할 일은 프로젝트 내 api 폴더에 cartApi.js를 추가하고 장바구니 관련 기능을 정리해 두는 것이다. import jwtAxios from "../util/jwtUtil"; import { API_SERVER_HOST } from "./todoApi"; const host = `${API_SERVER_HOST}/api/c..

4. 장바구니 서비스 계층의 설계/구현* 장바구니 서비스는 service 패키지 내에 CartService와 CartServiceImpl로 구현한다.* CartService에는 장바구니 아이템을 추가하거나 수정하는 기능이 CartItemDTO를 이용하므로 하나의 메서드로 설계하고 사용자의 장바구니 아이템들의 조회와 장바구니 아이템의 삭제 기능을 선언한다.package com.unlimited.mallapi.service;import java.util.List;import org.springframework.transaction.annotation.Transactional;import com.unlimited.mallapi.dto.CartItemDTO;import com.unlimited.mallapi.d..

3. Repository의 설정 * Cart와 CartItem 엔티티 객체를 처리할 Repository를 생성한다. repository 패키지에 Cart를 처리하는 CartRepository, CartItemRepository 인터페이스를 생성한다. (1) CartRepository * CartRepository는 기본적으로 JpaRepository가 제공하는 기능들을 사용자의 이메일을 통해서 Cart를 알아내는 기능을 추가해 준다. package com.unlimited.mallapi.repository; import java.util.Optional; import org.springframework.data.jpa.repository.JpaRepository; import org.springframe..

* 사용자의 인증에 대한 처리가 완료되었다면 로그인한 사용자들이 사용할 수 있는 장바구니 기능을 구현해 보도록 하자. 장바구니는 JPA의 연관관계를 이용해서 구성하고 @Query를 이용해서 현재 사용자의 장바구니가 가진 상품목록과 수량(장바구니 아이템)들을 반환하는 기능을 구현한다. * 이번 장의 학습 목표는 다음과 같다. 1. JPA의 연관관계를 이용한 장바구니 설계 2. JPQL을 이용한 조인 처리와 Projections를 이용한 DTO 처리 3. 스프링 시큐리티와 로그인 정보를 활용한 사용자 인증 처리 1. 장바구니 엔티티의 설계 * 장바구니는 사용자 한 명당 하나의 장바구니를 가지도록 구성되고 하나의 장바구니에는 여러 개의 상품과 해당 상품(장바구니 아이템)의 수량을 넣을 수 있도록 구성된다. 이..

6. 회원정보 수정 * 회원정보 수정은 현재 애플리케이션의 상태로 유지되고 있는 사용자 정보로 화면에 출력하고 수정하게 된다. 이를 위해서 먼저, 화면에서 회원정보를 수정할 수 있도록 처리하는 작업과, API 서버의 작업, API 서버 연동 순으로 처리한다. (1) 회원정보 수정 화면 처리 * 프로젝트의 components/member 폴더에는 ModifyComponent.js를 추가한다. import React, { useEffect, useState } from "react"; import { useSelector } from "react-redux"; const initState = { email: "", pw: "", nickname: "", }; const ModifyComponent = () ..

5. 자동 회원 추가 및 회원정보의 반환 * API 서버가 Access Token을 처리해서 사용자의 이메일 정보를 추출하는 것을 확인했다면 이를 이용해서 데이터베이스에 존재하는 회원인지 처음으로 접근한 회원인지에 따라서 데이터베이스에서 조회 혹은 추가(회원가입)를 해 주어야 한다. (1) MemberService 회원 처리 * 회원정보는 MemberDTO 타입을 통해서 처리되어야 하므로 Member 엔티티 객체를 MemberDTO 객체로 변환하는 entityToDTO() 를 추가한다. package com.unlimited.mallapi.service; import java.util.stream.Collectors; import org.springframework.transaction.annotatio..

4. API 서버에서 Access Token 처리 * 예제에서는 프론트 환경에서 Access Token까지 처리하고 API 서버에 이를 전달해서 API 서버 내에서 사용자와 관련된 처리를 하는 방식으로 구성할 것이다. 따라서, API 서버에 추가적인 기능을 개발해야 한다. * 카카오 서비스에서 사용자 정보를 가져오기 위해서는 https://kapi.kakao.com/v2/user/me 를 Access Token을 이용해서 호출해야 한다. https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#req-user-info Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 A..

3. 리액트에서 카카오 로그인* API 서버는 하나의 서버로 여러 종류의 서비스나 앱에서 호출이 가능하기 때문에 소셜 로그인에 대한 실행은 반드시 프론트 애플리케이션에서 시작되어야 한다. 리액트에서는 여러 종류의 소셜 로그인 관련 라이브러리들이 존재하긴 하지만, 예제에서는 직접 구현을 해서 모든 과정을 이해해 본다(카카오 로그인에 관한 설명은 아래 문서를 참고). https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com(1) 인가 코드의 처리* ..

* 최근의 앱과 웹에서는 전통적인 회원가입 방식을 대신해서 흔히 소셜 로그인이라고 부르는 제3자 인증 방식으로 하는 경우가 많다. 예를 들어 구글이나 네이버, 애플, 페이스북 등의 서비스를 이용해서 별도의 회원가입 없이 로그인을 처리하는 방식이다. * 이번 장에서는 리액트와 API 서버를 연계해서 리액트에서 카카오 서비스의 로그인을 호출하고, API 서버에서는 사용자의 인증 정보를 이용해서 기존 회원 데이터와 연동하도록 구성해 본다. * 이번 장의 개발 목표는 다음과 같다.1. 소셜 로그인 방식의 이해 2. 카카오 로그인을 위한 설정 3. 리액트에서 사용자 인증 4. API 서버의 사용자 처리1. 소셜 로그인과 OAuth2.0* 소셜 로그인은 기존의 서비스와 달리 제3의 사용자 인증 서비스를 이용해서 현..

5. Axios 인터셉터와 Refresh Token * 로그인에 대한 저장과 애플리케이션 내의 상태 유지가 완료되었지만, API 서버의 호출에는 JWT 방식으로 Access Token 때문에 정상적으로 실행되지 못한다. API 서버의 /api/todo/ 혹은 /api/products/ 로 시작하는 경로를 호출했을 때는 에러가 발생하는 것을 볼 수 있다. * API 서버는 Access Token을 체크하기 때문에 Axios의 호출 시에 Access Token을 전달해야만 한다. 또한, Access Token이 만료되었을 때는 Refresh Token으로 Access Token을 갱신하는 처리가 필요하다. * Axios의 경우에는 인터셉터(interceptor) 기능을 제공해서 Axios의 요청이나 응답 시..