메모 서비스에 검색 기능 추가하기

기존 메모서비스에는 생성, 삭제, 수정. 조회 만을 제공했는데 편의성 제공을 위해 검색기능을 구현해보게 되었다. 이 기능은 특정 검색어 입력 시 해당 검색어를 포함하는 메모를 불러온다.

Query String을 활용한 검색 API와 프론트엔드 연동을 통해 키워드 기반 메모 조회기능을 추가했습니다.

구현완료 스크린

구현내용

백엔드

- api 엔드포인트 : 메모 내용에 키워드가 포함된 데이터를 수정 시간 내림차순으로 반환.

- Repository : JPA Query Methods 활용 -> 대소문자 구분 없이 검색하기위해 IgnoringCase 추가 필요성을 느꼈음.

프론트엔드 

- 검색 ui 추가 

- Ajax 요청 처리 : onclick 이벤트

 

 

문제점 및 해결과정

OrderByModifiedAtDesc를 빼먹어 최신순이 아닌 결과를 반환 하였다. -> 코드 추가 후 해결

자꾸 index 실행시 css와 js 가 적용되지 않는 문제가 있었다. ->application properties에 port 8080으로 고정시키고 index에 파일경로들을 하나하나 다시 설정해주고 해결하였다. 

 

개선방향

- LocalStorage에 최근 검색어를 저장하는 기능을 추가 구현해보고 싶다. 

 

 

 

검색기능을 구현하면서 데이터베이스와 프론트엔드 , 백엔드가 전부 제 기능을 하여야 이런 간단해보이는 기능도 구현이 된다는 사실을 알게 되었다. 앞으로 배울 것이 너무 많다는 것을 깨달았고 열심히 공부하여 다른 기능들도 구현해보고 싶다.