Ajax 적용 ?
기존의 백엔드 단의 컨트롤러에서 @RestController 라는 어노테이션을 사용해 Json 형식의 데이터로 조회 하였지만,
프론트엔드 단을 처리하기위해 팀원과 회의를 하며 여러가지 기술 스택에 대해 이야기 하면서 Ajax 라는 기술이 나오게 되었습니다.
(벡엔드 스쿨인데 프론트엔드까지 해야되서 조금은 놀랬다.)
(결론으로는 thymeleaf 를 사용하여 view 처리를 할것 같습니다.)
Ajax 란 ?
Asynchronous JavaScript and XML의 약자이며 웹 페이지에서 서버와 비동기적으로 데이터를 교환하고 업데이트하는 데 사용되는 방법으로 데이터 교환으로느
Json또는Xml형식의 데이터를 사용합니다.
👀 비동기란 ? : 한개의 요청에대한 응답을 기다리지않고 다른 요청을 동시에 수행 할수 있는 개념입니다.
Ajax형식
$.ajax({
url: "/data", // 사용할 서버의 데이터를 처리하는 엔드포인트로 수정해야 함
method: "GET",
dataType : "json" // 서버에서 보내줄 데이터 타입
success: function(data) {
$("#dataContainer").html(data); // 전송에 성공하면 실행할 코드
},
error: function() {
alert("데이터 불러오기 실패"); // 전송에 실패하면 실행할 코드
}
});느낀점 : Ajax 라는 기술에대해 처음 들어보면서, 개념에 대해 공부할수 있는 계기가 되었다.
(사실 프론트 엔드 단은 너무 어려운것 같다....)
버튼을 통한 지역 필터 html
예상 시나리오로는 서울특별시 / 경기도의 버튼을 클릭하게되면, 해당 도시에 맞춰 구 군의 버튼이 등장하게 되며,
사용자가 구 군 버튼을 누르게 되면 버튼을 눌러서 왔던 지역에 맞춰 병원 정보가 출력되게 됩니다.
- 지역 필터 페이지
- 서울특별시를 누를경우
- 동대문구를 누를 경우
(도로명 주소까지view에 뿌려지므로 도로명 주소에 맞춰 주소 검색을 하게되면, 지도에 마커가 찍힙니다.)
- Spring의
thymeleaf의존성을 사용하여view를 만들었습니다.
서울특별시의 XX구에 해당하는 동물병원 정보를 view 에 출력해주는 html 코드 입니다.
thymeleaf의th:each반복문을 통해 객체에 저장된 데이터를 반환하였습니다.
<div th:each="city : ${selectCity}">
<ul>
<li th:each="countryList : ${countryList}">
<p><span th:text="${countryList.city}"></span></p>
<p><strong> 구 :</strong> <span th:text="${countryList.district}"></span></p>
<p><strong>도로명 주소 :</strong> <span th:text="${countryList.street}"></span></p>
<p><strong>상세 주소 :</strong> <span th:text="${countryList.hospitalStreetNumber}"></span></p>
<p><strong>동물병원 이름 :</strong> <span th:text="${countryList.hospitalName}"></span></p>
<p><strong>동물병원 전화번호:</strong> <span th:text="${countryList.hospitalTel}"></span></p>
<p><strong>리뷰 갯수:</strong> <span th:text="${countryList.reviewCount}"></span></p>
</li>
</ul>
</div>