20220519 TIL #Thymeleaf #dataList #Vue

검색 조건에 국적를 추가하기 위해,

1) DB에 저장된 Country 테이블을 조회해서 dataList로 선택할 수 있게 보여주기

2) 해당 국적으로 검색 시 해당되는 데이터 조회하도록 수정하기

를 해야했다.

 

처음에는 DB에 있는 country를 조회하는 api를 RestApi로 만들고, 뷰에서 axios로 데이터를 가져와서 보여주려고 했는데,

어차피 정적인 데이터이므로 아에 model attribute + thymeleaf로 뿌려도 될 것 같다는 얘기를 들었다.

 

해당 페이지를 랜더링할 때 같이 데이터가 나가도록 해당 컨트롤러에 만들어 놓은 서비스를 주입해서 data를 view와 함께 같이 내려주었다.

 

그리고 view에서 input이 아니라 dataList를 사용하여 자동완성되도록 하기로 했다.

다행히 구글링 덕분에 금방 할 수 있었다.(axios로 시도할 때 더 해맸다...)

그리고 국가코드와 국가명을 같이 List로 내렸는데, 검색 시에는 코드로 검색되도록 코드를 value로, 국가명을 label로 하였다.

이렇게 해놓으니 코드, 국가명 둘다 보이고 자동완성도 둘 다 잘 되는걸 확인했다(신기했다!)

 

그리고 간단하지만 DB에 있는 country를 조회하는 서비스의 단위테스트도 만들었다.

해당 서비스에 필요한 repository는 repository 안에 Fake를 만들어서 리턴되게 하였다.

그런데 Fake에서 해당 메서드의 리턴 값을 null로 지정해서, 테스트 시 nullpointerException이 뜨는 것을 확인했다.

List<Country>를 Country.builder().build()로 만들어서 테스트가 에러 없이 수행되도록 수정해주고,

서비스에서도 DB에 데이터가 없더라도 에러로 해당 페이지가 랜더링되지 않는 것을 막기 위해(뷰를 내릴 때 model로 데이터를 같이 내려서 에러가 뜨면 해당 페이지가 아에 랜더링되지 않았다) 같은 방법으로 처리해주었다.

 

그리고 프론트 단을 보다가 검색조건 clear하는 부분이 수정이 필요해보여서, 막간을 이용해 수정을 시도했는데 잘 되지 않았다.

뷰를 사용하고 있어서 일단 코드 자체가 이해되지 않았다.

나름 구글링 해서 여러 가지를 시도해봤는데 검색 조건이 초기화 된것 같다가도 다시 입력하려고 보면 이전에 입력한 데이터가 그대로 남아있었다.

뷰의 데이터바인딩 때문일거라는 말을 들었다..! 

지금 프론트는 프로젝트 우선순위에서 밀려있지만, 테스트하면서 수정하고 싶은 부분이 꽤 있어서 시간날때마다 조금씩 수정하고 싶다.

 

그래서 퇴근 후 미루고 있던 Vue 공부를 시작하였다ㅋㅋㅋ

재밌긴 한데 프론트 개념들에 아직 익숙하지 않아서 햇갈리는게 많다.

그래도 props, component처럼 플젝하면서 프론트 분들 대화하는거 들을 때마다 도대체 저건 무슨 개념이지, 했던 것들이 하나씩 나와서 신기하다.

 

그리고 컴포넌트 사이에서 데이터를 주고 받는게 너무 신기하다!

특히 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달할 때 이벤트를 발생시키는게, socket.io 생각도 나면서 재밌었는데

이벤트를 받는 상위 컴포넌트가 아니라 이벤트를 발생시키는 하위 컴포넌트에서 v-on을 하는게 햇갈린다.

socket.io 쓸때는 이벤트를 에밋하면 그 이벤트를 받는 쪽에서 이벤트를 받으면 어떤 작업을 할 거라고 내용을 정의하였는데

v-on은 약간 중간 연결고리처럼 "하위 컴포넌트에서 어떤 이벤트가 발생하면 상위 컴포넌트에서 어떤 메서드를 해!"라고 알려주는 느낌이랄까.

근데 이게 왜 하위 컴포넌트에서 하지, 싶다가도 생각해보면 상위 컴포넌트해도 비슷한 의문을 가질 수 있을 것 같다.

그리고 socket.io에서는 클라이언트와 서버가 동일한 이벤트 명을 사용하기 때문에 굳이 매칭시켜줄 필요가 없지만

컴포넌트 사이에서는 한쪽은 이벤트, 한쪽은 메서드라서 매칭이 필요한 것 같다.

그리고 메서드이기 때문에 (아마도) 재사용이 가능하다는 점도 영향이 있지 않을까(이건 정말 추측)

 

아무튼, 사이드 프로젝트 아이디어도 생겼고 강의를 좀 더 들으면 간단한 웹페이지는 양쪽 다 만들어 볼 수 있지 않을까..?

서버 쪽도 공부할 게 산더미라 프론트는 욕심인가 싶다가도 그래도 클라이언트에서 서버까지 한 사이클을 다 구현해 보고 싶기도 하고,

사이드 프로젝트는 좀 재밌게 해보고 싶어서 이것저것 시도해볼 것 같다.