[팀플 - Travel Jeju] 11th course - Travel Course VIII

[ 오늘 할 일 ]

• 여행경로 저장 클릭 시 추가했던 카드들을 모달에 순서대로 띄워주기 
• 모달 UI 재구성 
• 지도 마커 이미지 변경 

 

[ 전체적인 흐름 ]

• 모달에 들어갈 카드 UI 만들어 놓기 
• 여행경로 저장 버튼 클릭 시 순서대로 이름값 가져오기 
• 지도 마커 이미지 변경
• ajax를 통해 원하는 데이터만 가져와서 카드 형식으로 모달에 추가 
• 카드 사이사이에 화살표 이미지 넣기 

---

모달에 들어갈 카드 UI는 부트스트랩에서 제공하는 디자인 카드를 가져왔다 

각 클래스에 css를 가져와서 아래 이미지처럼 모달에 띄울 카드 UI를 구성했다 

부트스트랩 디자인 카드 

 

그다음으로는 기존 카드 UI를 이용하여 순서대로 카드들을 배치해주는지 테스트를 해봤다 

하지만 선택한 순서대로 카드들을 가져오지 않았고

여행경로 저장을 누를 때마다 중복해서 들어가는 문제가 발생하였다 

위 2가지 오류를 해결하기 전에 맵에 마커로 찍히는 돌하르방의 이미지가 흐리게 보이는 게 눈에 많이 거슬렸다..

그래서 팀원중에 디자인하시던 분이 계셔서 

좀 더 뚜렷하고 귀여운? 돌하르방 이미지의 누끼를 부탁하였다 

정말 2분도 안되서 누끼를 따주셨다... 리스펙 

돌하르방 이미지를 바꾸고 카드 UI도 상단에 만들어뒀던 카드로 교체하였다 

 

백엔드단에서 돌아가는 구성은 

오른쪽 리스트에서 원하는 맛집&관광지 카드를 선택하였을 때

백엔드에서는 names 라는 배열에 각 카드들의 제목을 추가한다 (몰론 삭제 시 배열에서도 삭제된다)

 

처음에는 제목과 이미지를 각각의 배열에 넣어놓고 

모달에 띄우려했지만 모달 안에 들어갈 값들은 ajax로만 가능하기 때문에 

결국엔 names안에 있는 제목들을 RestController로 보내서 다시 한번 DB를 가서 데이터들을 가져와야만 했다 

 

하지만 아직도 선택한 순서대로 카드가 안 들어가고 여행경로 저장 버튼을 누를 때마다 중복적으로 카드를 추가하는 문제는 남아있었다 

jsp에서 보낸 순서와 다르게 DB에서 순서가 바뀌면서 검색되어 가져오는 문제

자바스크립트 단에서 최대한 범용적으로 함수들을 쓰기 위해서

각 함수들이 대부분 매개변수로 값을 받아서 그 함수를 실행시키는 것으로 구성하였는데 

이때 어느 한 곳에서 오류가 발생하면 각 함수마다 로그나 console로 하나하나 다 찍어봐야 했다 

 

RestController

ibatis sql

jsp

그렇게 진행한 결과 위 방법대로 하면 컨트롤러에서 names배열을 순차적으로 받지않는 문제를 발견하였다 

다음 포스팅에서 자세히 설명하겠지만 

반복문과 ajax의 처리속도가 달라서 반복문으로 names 배열 안에 있는 제목들을 보내도

컨트롤러에서는 랜덤으로 값을 받아들이는 것이였다

지금 생각하면 좋은 방법은 아니지만

오류를 해결했을 당시에는, '그럼 이름을 다 합치고 한 번에 보내서 컨트롤러에서 스플릿 해서 하면 되지 않을까?'라는 생각으로

jsp에서 반복문을 돌면서 이름을 다 합치고 컨트롤러에서 끊어서 DB를 가져오는 방식으로 진행했었다 

 

하지만 위 코드의 안좋은 점이 2가지가 있었는데

1. ',' 로 더하지 않고 보내도 스프링에서 알아서 콤마를 더해준 상태로 컨트롤러로 보내준다 

2. 비동기 처리 방식을 이용하는 것이 좋다 (반복문 사용 x)

 

이 부분은 다음 포스팅에서 자세히 다뤄보려고 한다  

 

그리고 버튼을 누를때마다 반복적으로 모달에 카드들을 넣는 부분은 

jQuery를 이용하여 쉽게 구현하였다 

버튼을 누를때마다 모달 안에 있는 값들을 비워주는 형식으로 진행하였다 

 

그리고 카드들 사이사이에 addArrow 함수를 호출하여 화살표 이미지를 첨부하였다 

오늘의 결과