728x90

프로젝트 Github : https://github.com/sjinjin7/Blog_Project

프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

카테고리 태그 동적 추가

저번 포스팅에서 상품 네비에서 화면 이동 태그가 담길 틀을 완성했습니다. 이번 포스팅에선 태그가 동적으로 추가되도록 하는 것이 목표입니다.

순서

1. 구현 방향

2. BookMapper

3. BookService

1. 구현 방향

아래의 태그 코드는 저번 포스팅에서 작성한 태그는 입니다.

교양

이러한 태그를 카테고리 개수만큼 추가해주어야 하는데, 각 태그에서 달라져야 할부분은 '/search' url로 넘겨질 'cateCode'데이터와 사용자에게 보여줄 '카테고리 이름(cateName)' 두 가지입니다.

그림 1-1

위의 두 가지 정보를 서버에서 요청하고 반환 받아서 뷰에 출력되도록 만들 것입니다.

전체 적인 방향을 대략적으로 설명을 하면 BookController.java 객체에서 Service로, Service에서 Mapper로 DB에 각 카테고리의 'cateCode'와 'cateName'에 대한 데이터를 요청을 하고, 카테고리 데이터가 담긴 List 객체로 반환받도록 할 것입니다. (요청한 데이터는 하나의 카테고리가 아니라 여러 개의 카테고리 데이터입니다. 따라서 각각의 카테고리 데이터 'cateCode'와 'cateName'을 이전에 작성해둔 CateVO객체에 담고 그렇게 담긴 CateVO들을 List 자료구조에 담아서 반환되도록 작성을 할 것입니다. )

이렇게 전달받은 List 자료구조에 담긴 카테고리 데이터들을 뷰로 전달하여 JSTL의 태그를 사용하여 태그들이 출력이 되도록 만들 것입니다. (목록 페이지에 상품 리스트 출력과 동일합니다.)

작업 순서는 Mapper -> Service -> Controller -> View 순으로 진행하겠습니다.

2. BookMapper

하나의 메서드를 작성하여 모든 카테고리를 요청해도 됩니다. 하지만 그렇게 되면 View 혹은 Controller에서 처리해 주어야 할 것들이 많아집니다. 포스팅하는 것들은 성능 이런 걸 떠나서 비슷 한 기능을 구현하는 것이 목표이기 때문에 좀 더 간단하게 처리하기 위해서 '국내', '국외' 카테고리 별로 데이터를 요청하고 반환하도록 두 개의 메서드를 작성하겠습니다.

"BookMapper.java" 인터페이스에 '국내', '국외' 범주의 카테고리 리스트를 반환해주는 두 개의 메서드 선언부를 추가해줍니다.

/* 국내 카테고리 리스트 */ public List getCateCode1(); /* 외국 카테고리 리스트 */ public List getCateCode2();

그림 2-1

"BookMapper.xml"에서 앞서 선언한 두 개의 메서드가 실행할 쿼리문을 추가해줍니다.

select * from vam_bcate where cateCode > 100000 and cateCode < 200000 select * from vam_bcate where cateCode > 200000 and cateCode < 300000

그림 2-2

너무 단순한 쿼리문이어서 이번엔 Junit 테스트를 생략하였습니다.

3. BookService

BookMapper에서 작성한 메서드를 호출하는 Service 메서드를 추가해주겠습니다. BookService.java 인터페이스에 아래의 두 개의 메서드 선언문을 추가해줍니다.

/* 국내 카테고리 리스트 */ public List getCateCode1(); /* 외국 카테고리 리스트 */ public List getCateCode2();

그림 3-1

BookServiceImpl.java 클래스에 앞서 선언한 메서드를 오버라이딩 하여 구현부를 작성해줍니다.

/* 국내 카테고리 리스트 */ @Override public List getCateCode1() { log.info("getCateCode1()........."); return bookMapper.getCateCode1(); } /* 외국 카테고리 리스트 */ @Override public List getCateCode2() { log.info("getCateCode2()........."); return bookMapper.getCateCode2(); }

그림 3-2

4. BookController

Controller에선 앞서 작성한 메서드를 요청하고, 반환받은 결과를 Model 객체를 활용하여 main.jsp 에 전달하는 작업을 해 줄 것입니다.

"/main" url 매핑 메서드에 파라미터 Model을 추가해줍니다.

카테고리 리스트를 요청하는 Service 메서드를 요청하고 반환받은 값을 model 객체를 통해 뷰(view)로 전달하도록 코드를 코드를 추가해줍니다.

model.addAttribute("cate1", bookService.getCateCode1()); model.addAttribute("cate2", bookService.getCateCode2());

그림 4-2

5. main.jsp

태그를 활용해서 태그가 동적으로 추가될 수 있도록 '.dropdown-content' 태그 내부에 추가해줍니다.

${cate.cateName} ${cate.cateName}

서버를 실행시켜서 정상적으로 출력이 되는지 확인합니다.

그림 5-2

그림 5-3

태그들을 클릭하여 '상품 목록' 페이지로 이동이 되는지 확인합니다.

그림 5-4

그림 5-5

REFERENCE

코드로배우는 스프링 웹 프로젝트(남가람북스)

DATE

2020.09.28

728x90