[JSP][MVC][Session] 세션 및 로그인 도서 장바구니 구현하기 #1. 구현 방향 설정

지난 포스팅에서 세션을 이용해 도서 장바구니를 구현해 보았다.

때문에 세션이 살아있는 한 session 기본 객체를 통해 화면에 데이터를 저장하고 가져올 수 있었다.

 

이제 이번 포스팅부터는 MVC패턴을 지키면서 장바구니 세션과 로그인 세션을 활용하여 장바구니를 구현하는 로직을 기록해 보고자 한다.

참고 모델인 교보문고 페이지를 살펴보면서 나름대로 따라 해보고자 했다. 

따라서 이번 포스팅에서는 교보문고 페이지 흐름을 정리해보면서 구현 흐름 및 계획을 정리해 보도록 하겠다. 

 

---

♠ 세션을 이용한 도서 장바구니 구현이 궁금하면 아래를 참고하세요 ♠

 

2023.05.15 - [JSP/MVC] - [JSP][MVC][Session] 세션을 이용한 도서 장바구니 구현하기 #1. 구현 흐름 정리하기

[JSP][MVC][Session] 세션을 이용한 도서 장바구니 구현하기 #1. 구현 흐름 정리하기

---

 

목표

♠ 특정 페이지 구현 방향을 계획할 수 있다. 

♠ JSP에서 MVC 패턴을 지키면서 세션을 사용할 수 있다.

 

 

참고 모델(교보문고)로 흐름 이해하기

1. 처음 요청한 교보문고 URL(비로그인 상태)

아래 이미지는 내가 크롬 브라우저에서 처음 요청한 교보문고 사이트의 메인 페이지이다.

들어와 보니 내 장바구니엔 아무런 도서가 저장되어 있지 않음을 확인할 수 있다(오른쪽 장바구니 아이콘).

로그인도 되어 있지 않은 상태이다.

교보문고 메인 페이지

 

2. 장바구니 추가(비로그인 상태)

이제 장바구니를 추가해 보자.

아래 이미지는 비로그인 상태에서 장바구니에 도서를 추가한 후, 장바구니 아이콘을 클릭하면 요청되는 장바구니 목록 페이지이다. 

도서 정보가 정상적으로 출력되고 있는 것을 확인할 수 있다.

 

여기서 로그인을 하면 장바구니는 어떻게 될까?

장바구니 목록 페이지

 

3. 로그인 후

아래 이미지는 로그인을 한 이후의 메인 페이지이다.

요청한 URL은 https://my.kyobobook.co.kr/main 이며 로그인 유저의 기본 정보가 빨간 박스에 표시되고 있다.

오른쪽 상단 장바구니 아이콘을 보면 사용자 장바구니에 4개의 도서가 저장되어 있음이 확인된다.

 

장바구니 목록 페이지를 살펴보자.

로그인 후 메인 페이지

 

4. 장바구니 페이지(로그인 후)

장바구니를 살펴보면 비로그인일 때 담았던 '우정 도둑' 도서 외에 3개의 도서가 더 출력되었음을 확인할 수 있다.

 

이 상태에서 로그아웃을 하게 되면 장바구니는 어떻게 될까?

로그인 이후의 장바구니 페이지

 

5. 장바구니 페이지(로그아웃 후)

로그아웃을 한 후 다시 장바구니 페이지에 들어가 보면 장바구니가 비어있음을 확인할 수 있다.

로그아웃 후 메인 페이지

로그아웃 후 장바구니 페이지

 

정리

위에서 살펴본 교보문고 페이지 및 데이터 변화를 세션과 연결 지어 정리하면 다음과 같다.

 

1. 새 브라우저를 열고 교보문고 페이지를 요청한다.

• 세션은 브라우저 당 하나씩 생성된다.

2. 비로그인 상태에서 장바구니에 도서를 추가한 후 장바구니를 확인한다.

• 장바구니 세션에 도서를 저장한다.
• 서버는 세션에 저장된 도서를 가져온다.

3. 로그인을 한다.

• 로그인 세션 속성을 생성한다. 

4. 장바구니를 확인한다.

5. 로그아웃을 한 후 장바구니를 확인한다.

• 로그아웃 시 세션이 삭제되어 장바구니 속성이 존재하지 않는다.

 

위처럼 세션만 가지고 정리해 보았을 때 문제가 생긴다.

바로 4번에서의 문제, 로그인을 한 후 장바구니를 확인했을 때, 이전에 사용자가 저장한 장바구니를 가져올 수 없다는 점이다.

 

이는 세션의 특징과 관련있다.

서버 측에서 클라이언트(브라우저)를 식별할 때 사용되는 Session ID(세션 쿠키)는 브라우저 단위로 생성 및 저장되고,

클라이언트가 종료될 때, 즉 브라우저가 종료될 때 제거되어 서버에서 또한 Session ID에 해당하는 세션을 제거한다.

때문에 한번 브라우저를 끄면 브라우저의 Session ID가 삭제되어 이전 요청과 새로운 요청을 연결 지을 방법이 없게 되는 것이다.

    

위의 교보문고 페이지에서 내가 도서 1권을 장바구니에 넣고 로그인을 한 후 다시 장바구니를 확인했을 때,

총 4권의 도서가 출력되었다고 말했다. 1권을 제외한 나머지 3권은 현재 브라우저에서가 아닌, 이전에 사용자가 추가한

도서들이다. 

세션을 보완하면서 이전에 사용자가 추가한 장바구니 목록을 가져오기 위해 DB를 사용할 것이다.

 

 

세션 속성 계획하기

위의 정리를 바탕으로 사용자의 액션을 고려하여 세션 속성을 정리하면 다음과 같다.

 

1. 로직 흐름은 로그인 유무에 따라 달라진다.

• 비로그인자의 장바구니 출처는 세션이다.
• 로그인자의 장바구니 출처는 DB이다.

 

2. 비로그인 상태에서 장바구니를 추가한 후 로그인 한 경우의 장바구니 처리

1. 세션에 저장된 장바구니와 DB에 저장된 장바구니를 비교한다.
2. DB에 저장되지 않은 새로운 도서인 경우 DB 장바구니 테이블에 도서를 추가한다.
3. DB에 저장되어 있는 도서인 경우 DB 장바구니 테이블에서 해당 도서의 수량만 1 증가시킨다.

 

3. 로그아웃을 하면 세션을 삭제한다.

 

 

---

 

이렇게 전체적인 구현 흐름이 잡혔다.

다음 포스팅에서는 DB 테이블 생성과 공통으로 사용될 클래스를 정리해 보도록 하겠다.

 

 

끝.