[mozip] Spring, mybatis를 활용한 프로젝트 검색하기

 기능 목표

 

생성된 프로젝트를 프로젝트 이름, 내용에 포함된 키워드로 검색한다.

---

기능 구현 과정

 

<RecruitListDto>

 

프로젝트 모집 관련 데이터를 담기 위해 정의된 DTO를 작성한다.

 

 

<ProjectMapper>

 

resultMap은 SQL 쿼리 결과를 RecruitListDto 객체의 필드에 적절히 매핑한 뒤 프로젝트 검색에 필요한 쿼리를 작성해준다.

검색은 프로젝트 제목 또는 내용에 포함된 내용들을 결과값으로 나타낸다.

무한스크롤 구현을 위해 초기 렌더링 시에 생성일 기준으로 10개만 가져오도록 제한한다. (ORDER BY ~)

page 변수에 담아서 가져올 데이터의 초기 위치값을 지정해준다. (OFFSET ~)

쿼리의 결과값을 RecruitListDto 객체의 필드에 매핑한다.

 

 

<ProjectRepository>

 

searchProject 메서드는 검색어와 페이지 번호를 매개변수로 받아서 쿼리 결과를 RecruitListDto 객체의 리스트로 반환한다.

 

 

<ProjectService>

 

service 역시 키워드와 페이지번호를 매개변수로 받는 searchProject 메서드를 작성한다. 이 메서드는 객체의 리스트를 반환한다.

 

projectRepository의 searchProject 메서드를 호출하여 검색된 프로젝트 목록을 가져온다.

검색된 프로젝트 목록에서 반복문을 돌며 추가 작업을 시행한다.

findRecruitRoles : 메서드를 호출하여 현재 프로젝트의 모집 역할 리스트를 가져와 roleNames 필드에 설정한다.

findSubscribeCount : 메서드를 호출하여 현재 프로젝트의 신청자 수를 가져와 subscribe 필드에 설정한다.

createTime : 프로젝트 생성 시간을 포맷팅하고 createTime 필드에 설정한다.

완성된 RecruitListDto를 반환한다.

 

 

<ProjectController>

 

컨트롤러에서는 클라이언트의 GET 요청을 받아, 서비스 계층의 searchProject 메서드를 호출하여 검색 결과를 반환한다.

@GetMapping으로 HTTP GET 요청을 처리하며, /project/search 경로로 들어오는 요청을 이 메서드가 처리함을 지정한다.

HTTP 상태 코드 200(ok)를 나타내고 projectService의 searchProject 메서드를 호출하게 된다. 

 

 

<RecruitList> (프론트)

 

백엔드 코드의 처리가 끝나면 프론트엔드 단에서 ajax를 통해 서버의 요청을 처리한다.

url : '/api/project/search'는 서버의 엔드포인트를 나타내고 HTTP 메서드 유형으로, GET 요청을 사용한다.

서버 응답이 정상적으로 처리 되었을 때 .lists의 하위 요소로 새로운 HTML을 추가한다.

 

---

 

 

어려웠던 점 및 느낀 점

백단에서는 기존 데이터를 GET으로 가져오는 방식과 비슷해서 service와 controller 코드의 처리는 어렵지 않았다.

하지만 쿼리 작성 부분에서 검색어 처리 조건(WHERE절)이나 무한스크롤 구현을 위해 추가했던 LIMIT와 OFFSET 개념을 새로 사용해 볼 수 있었다. 

또한 기존에 프론트 단에서 검색어를 입력하면 실시간으로 검색결과 나타내는 것을 하고 싶었는데 실시간 검색결과 + 무한 스크롤 + 필터 이 세가지가 동시에 이루어져야 하는 부분에서 어려움을 겪어서 기획을 변경하게 되었다. 이 점이 아쉬워서 다음에 검색 기능을 다시 개발하게 된다면 실시간 검색도 구현해보고 싶다.