드디어 끝났다.
처음 경험한 개발자 프로젝트가 끝났다.
토이 프로젝트이긴 하지만, 생각보다 할 것이 많았고 3주동안 거의 코딩 + 잠자기 생활을 했다. 아침 6시 ~ 10시생활 + 집에 도착해서도 카테고리를 어떻게 출력을 할지, 상품관련 정보를 DB에서 어떻게 가져올지 생각을 하다가 책상에서 잠들기도 했다. 정신없이 공부했던 대학생 때로 돌아간 것 같았다.
토이프로젝트 중 강사님께서 상품관련 ERD에 대해 피드백 해주시고 토이프로젝트 과정 중 겪은 것들을 통해 나의 장점과 단점을 파악할 수 있었다. 데이터모델링 수업을 듣고 어떻게 개념을 적용할지 몰랐었는데, 토이프로젝트를 경험한 지금은 관계수(Cardinality),선택성(Optionality), 식별/비식별 관계에 대해서 머릿속에서 정리되었다.
상품 관련 테이블에 대해서 처음에는 상품, 상품상세, 상품 재고 테이블, 카테고리 4개의 테이블이었지만, 강사님 피드백을 듣고 난 후 테이블 수는 16개로 증가하였고, 테이블당 컬럼수는 기본 10~20개정도로 늘었다. 실제 쇼핑몰을 들어가서 느낀 점은 눈에 보이는 것보다 더 많은 컬럼들이 존재하는 구나라는 것을 느꼈다. 상품 상세페이지에 출력되는 상품 썸네일, 상품 가격, 상품 할인률, 상품 할인가, 상품 추천 상태, 상품 색상, 상품 사이즈, 상품 페이지 등록일, 상품 페이지 삭제일, 상품 페이지 수정일, 예약 상품의 경우 상품 페이지 등록일과 상품 개시일자가 다른 것도 생각을 해야하는 것처럼 더 많은 것들을 DB에서 관리 가능했다.
코드 짜는 것도 힘들었지만, 머릿속이 정리가 되니 조금씩 실마리가 풀리면서 코드를 짤 수 있었다. Spring 레거시 + MyBatis를 바탕으로 웹페이지 구현하느라 힘들긴 했지만, 강사님께서 말씀하신 내용이 조금씩 이해가 되기 시작했다. 실습이 중요하다는 강사님 말씀이 맞았다. 이제 개인프로젝트를 하면서 토이프로젝트 때 느꼈던 내 단점들을 고쳐봐야겠다. 우리 팀원들 진짜 고생 많았다. 한 사람만 빼고!!
내가 토이프로젝트 때 짰던 코드중 주요 포인트들을 설명해 보려고 합니다.
1. ItemController
상품 목록 페이지를 담당하는 컨트롤러 메서드입니다. 필터링, 정렬, 페이징 기능을 포함하고 있으며, 사용자 요청에 따라 상품 목록을 조회하고, JSP에 전달할 데이터를 준비합니다.
1.1 @RequestParam(...)
요청 쿼리 파라미터를 받아옵니다.
예를 들어 /Items?category=man이면 category에 "man"이 들어옵니다.
| 파라미터 이름 | 설명 |
|---|---|
| category | 선택된 카테고리 (예 : "WOMAN", "MAN") |
| keyword | 상품명 검색어 (예: “셔츠”) |
| minPrice | 최소 가격 필터링 |
| maxPrice | 최대 가격 필터링 |
| sort | 정렬 기준 (price_asc, price_desc 등), 기본값 "price_asc" |
| page | 현재 페이지 번호, 기본값 1 |
| limit | 페이지당 상품 수, 기본값 12 |
| Model | 뷰(JSP)로 전달할 데이터를 담는 객체 |
1.2 카테고리 목록 조회
List<CategoryDTO> categories = categoryDao.selectAllCategories();
model.addAttribute("categories", categories);- 역할: 카테고리 목록을 DAO를 통해 DB에서 불러옵니다.
- 뷰(View)로 전달: categories 이름으로 JSP에 넘겨서, 사용자에게 필터 UI에서 선택할 수 있게 보여줍니다.
1.3 검색 & 페이징 파라미터 조립
Map<String, Object> params = new HashMap<>();- DAO로 넘길 파라미터들을 담을 맵입니다.
- 이 맵은 MyBatis 쿼리에서 조건 바인딩에 사용됩니다.
if (category != null && !category.isEmpty()) {
String upperCategory = category.toUpperCase();
params.put("category", upperCategory);
System.out.println("Category filter: " + upperCategory);사용자가 넘긴 category 파라미터가 존재하면
- 대문자로 변환(toUpperCase()): DB값 또는 조건 비교의 일관성을 위해서 사용
- params에 category값을 추가 (예: "MEN" 또는 "WOMEN")
if ("MEN".equals(upperCategory)) {
List<Long> menCategoryIds = Arrays.asList(2L, 4L, 6L, 8L, 10L, 12L, 14L, 16L, 19L, 21L, 23L);
params.put("categoryIds", menCategoryIds);
System.out.println("MEN category IDs: " + menCategoryIds);
}대분류가 "MEN"일 경우
- 해당하는 하위 중/소 분류의 카테고리 ID 리스트를 수동으로 지정하였습니다.
(Closure 테이블을 이용하려고 하였으나 시간이 부족한 결과 구현하지 못했습니다.)
2. 상품목록 페이지네이션
이 메서드는 상품 목록 페이지에서 페이징 네비게이션을 생성하기 위한 정보를 계산하고, JSP로 전달하는 역할을 하는 핵심 로직입니다.
2.1 startPage와 endPage
int startPage = Math.max(1, currentPage - 2);
int endPage = Math.min(totalPages, currentPage + 2);- 현재 패이지를 기준으로 좌우로 2칸씩 이동해서 최대 5개의 페이지 버튼을 보여주도록 설정하였습니다.
예를 들면 currentPage=4 일때, startPage=2, endPage=6의 결과가 나옵니다. - startPage는 1보다 작을 수 없기 때문에 Math.max(1, ...)를 사용하였고
- endPage는 총 페이지 수보다 클 수 없기 때문에 Math.min(...)를 사용하였습니다.
2.2 hasPrevious와 hasNext
model.addAttribute("hasPrevious", currentPage > 1);
model.addAttribute("hasNext", currentPage < totalPages);- 이전 페이지 버튼(<) 활성화 여부 : 현재 페이지가 1보다 큰 경우
- 다음 페이지 버튼(>) 활성화 여부 : 현제 페이지가 전체 페이지 수보다 작은 경우
2.3 previousPage와 nextPage
model.addAttribute("previousPage", Math.max(1, currentPage - 1));
model.addAttribute("nextPage", Math.min(totalPages, currentPage + 1));- 이전 페이지 번호 : 현재 페이지 -1 (단, 최소 1이상)
- 다음 페이지 번호 : 현재 페이지 +1 (단, 최대 총 페이지 수 이하!)
2.4 정리
- 목적 : JSP에서 페이지 버튼을 유연하게 렌더링할 수 있도록 페이징 정보 제공
- 방식 : 현재 페이지 기준으로 앞뒤 2칸씩 계산, 전체 페이지 수를 넘지 않도록 제어
- 장점 : 간단하면서도 UX 좋은 페이지 네비게이션 구현 가능
3. 내가 만든 파트 간단 소개
3.1 Main 화면
햄버거 버튼(전체), MEN, WOMEN 클릭시 해당 카테고리와 관련된 상품들이 출력됨.
슬라이드에 있는 상품 이미지 클릭시 해당 상품으로 다이렉트 이동!
3.2 상품 목록 화면
최소, 최대 가격 적고, 낮은 가격 순, 상품명 (예를 들면 반팔)을 적으면
2만원 ~ 3만원 + 상품명 : 반팔 낮은 가격 순 정렬이 가능!
3.3 페이지네이션
1 페이지에서는 처음, 이전 버튼이 출력되지 않음!
3 페이지에서는 처음, 이전 버튼이 출력되고 1,2,3,4 페이지 버튼이 출력되는 것을 볼 수 있음!
