[Spring boot 프로젝트 정리 2] 관리자페이지 도서 카테고리 관리

정리 1 : 자기 참조 - 도서 카테고리 구현 

[Spring boot 프로젝트 정리 1] 자기참조 - 도서 카테고리 구현

 

위의 링크의 후속으로 도서 카테고리를 관리하는 페이지를 구현한 내용을 정리해보고자 합니다. 

 

해당 UI는 프로젝트 구현의 시간이 촉박하여 유행하고 있는 vue.js 나 리액트를 쓰지 못했고 커리큘럼상 가장 많이 썼던 Thymeleaf를 의존성을 추가하여 사용하였습니다. (그러므로 Spring boot 기반의 Front Server에서 UI 및 백엔드 서버와의 통신을 담당하였습니다)

또한 Tabler 라고하는 템플릿을 참고할 수 있는 페이지를 찾아 팀 간에 공유 및 활용을 하였습니다

 

---

카테고리 등록/수정/삭제

관리자페이지 - 카테고리 등록/수정/삭제

해당 관련한 백엔드 코드는 이 글의 제일 위의 "정리 1" 링크에서 확인 할 수 있습니다.

 

카테고리 조회 - 콤보 박스 선택에 맞춰 GET http 통신 발생

카테고리 등록(생성) 모달창

카테고리 수정 모달창

카테고리의 수정 중에는 이름 변경, (메인 화면에서의) 노출 여부, 1차 카테고리 변경의 기능이 있습니다.

 

---

등록 & 수정 & 삭제 창을 클릭하면 

• javascript의 fetch 함수를 통해 Back Server의 Rest Api 맞춰 컨트롤러 동작  
• 서비스 동작하여 응답 
• CORS 이슈는 Gateway에서 CORS 관련하여 모두 open 해놓았고 Back Server 에서는 아래 어노테이션을 사용 

@CrossOrigin(origins = {"http://localhost:8080", "http://localhost:9090","https://www.yesaladin.shop"})

---

카테고리 순서 변경 

요구사항 중 메인화면에서 보이는 카테고리의 순서를 변경하는 기능이 존재했는데, 생각보다 구현 난이도가 있었습니다. 

• 임시적으로 순서 변경을 한 후, 저장 버튼을 눌러야 실제로 순서가 변경이 되도록 한다 
• 중간에 있던 항목을 처음이나 끝 순서로 밀었을때, 인덱스 값이 out 되지 않도록 한다 
• 1차 카테고리, 2차 카테고리 모두 순서 변경이 가능하도록 한다.  

 

위의 구현 지점을 해결하기 위한 아이디어 및 고민거리는 아래와 같습니다. 

• 임시적으로 순서 변경을 한 후, 저장 버튼을 눌러야 실제로 순서가 변경이 되도록 한다 
  1. 자바스크립트에서 해당 페이지에 왔을때, 처음 조회한 카테고리 정보를 담고 있는 dictionary를 사용하여 [순서 값 : 카테고리 객체] 를 키와 값으로 임시로 다른 dictionary에 저장한다.
  2. 순서를 바꾸는대로 key의 정수 값을 바꾸고 그에 맞게 카테고리 객체의 위치도 변경한다. 
  3. 저장 버튼을 누르면 임시 dictionary를 토대로 fetch통신으로 Back Server에 Body에 해당 차수의 카테고리를 모두 싣는다.
     1. Back Server는 JPA의 기능중 하나인 dirty check를 통해서 따로 save 하지않아도 변경이 되도록 한다. 
  4. 200응답을 받는다. 
• 중간에 있던 항목을 처음이나 끝 순서로 밀었을때, 인덱스 값이 out 되지 않도록 한다 
  • 클릭을 통해 어떤 카테고리를 선택했는지 알 수 있기 때문에 fetch 통신을 통해 제때제때 GET 하도록 하였고, 그 후 해당 카테고리의 개수를 통하여 index 값을 벗어나지 않도록 하였다. 
• 1차 카테고리, 2차 카테고리 모두 순서 변경이 가능하도록 한다.
  • 2차 카테고리만 수정 되도록 하였지만 1차 카테고리의 순서도 변경할 수 있다고 생각이 들어 변경하였다. 
  • 임시 dictionary가 1차, 2차 것으로 2개를 사용한다. 

YesAladin - Front Server 깃허브 중 해당 코드 주소

GitHub - NHN-YesAladin/yesaladin_front: YesAladin Front 서버입니다.

 

---

인터넷 서점에서 사용하는 도서 카테고리를 자기 참고를 이용하여 구현하면서 자기 참조에 대한 막연한 두려움이 사라졌었습니다. 

또한 UI를 직접 구현하면서 약간의 욕심이 나는 상황들이 있었는데 프로젝트가 끝난 지금 상황에서는 차라리 back 서버에서 시간을 좀 더 쏟았으면 더 좋지 않았을까라는 약간의 후회가 들기도 합니다. 

그러나 자바스크립트를 써보면 CORS 와 같은 문제도 만나보고 화면구현이 얼마나 공을 많이 들여야하는 작업인지를 알게 되었으므로 좋은 경험을 했습니다.

 

카테고리 이야기 끝~ 

다음 이야기는 주문 조회 이야기로 찾아뵙겠습니다!