D-17 (마감기한 변경)

오늘 할 일: 필터 css 마무리, 리스트 재로딩 연결, 인서트 파일 정리(기초데이터용), 지도 확대/축소 이벤트 먹이기

오늘 한일 : 필터 css 마무리, 리스트 재로딩 연결, 인서트 파일 정리(기초데이터용)

남은 업무 : 필터 구현하기, 디테일 연결하기, js 파일 빼기, 클러스터랑 리스트 연결하기, 클러스터 삭제하기

느낀점: 진짜 금방 끝날 줄 알았는데 생각보다 할 일이 많고 시간도 오래 걸린다.. 정말 할 일이 많은 것 같다. 타임리프와 자바스크립트의 관계에 대해서 (사실은 관계가 없다는 것이 관계) 정확하게 알게 됐다. 동적으로 리스트를 만드는 방법은 2개정도 생각했는데 (1. String으로 html 요소 만들어서 넣기 / 2. 다른 페이지 넣기) 결국에 다른 페이지를 넣었다. 실은 1번으로 하다가 무슨 오류가 안잡혀서... 힘냅시다

어제는 하루종일 필터 css 작업했다. 아무튼 css가 제일 오래 걸림.. 

단위는 임시 설정

더불어 ajax 사용해서 리스트 다시 뽑아오는건 지도 범위 바뀌었을때만 적용하기로 하고, 나머지 필터는 그렇게 뽑아 온 상황에서 자바 스크립트를 이용해서 화면 단에서 컨트롤하기로 했다. 

직방이나 다방 참고해 보았을때 아무리 생각해도 서버까지 다녀오는 속도가 아님. 

그럼 이제 리스트 뽑아오는건 다 했고. 

브라우저 단에서 자바 스크립트만 컨트롤하면 되겠다. 

https://codingbroker.tistory.com/46

[JAVASCRIPT] 배열 필터링하는 방법(걸러내기) - filter

이 필터.. 라는 걸 써보려고 함..

https://afterlosscow.tistory.com/104

[자바스크립트] script 혹은 function 을 인식하지 못하는 문제

다시 좌표를 찍는 것 까진 됐는데 매물번호랑 매칭이 안된다. 

https://chaelin1211.github.io/study/2021/04/14/thymeleaf-ajax.html

 

해결책: ajax를 두 번 연달아서 돌린 뒤에 replace with를 씀.. 

쉬워보이는것도,,잘생각하면 어렵군아,,

 

 $.ajax({
    url: '/cluster',
    type: 'POST',
    data:{
        info: guName
    },
    datatype : 'text',
    success: function(data) {
        if (data) {
            console.log('검색완료');

        } else {
            alert("전송된 값 없음");
        }
    },
    error: function() {
        alert("에러 발생");
    }
}).done(function (data){
    //console.log(data);
    var json = JSON.parse(data);

    //console.log(json);
    for (var i = 0; i < json.length; i++) {
        var position = {
            title: json[i].addressName,
            lat: json[i].lat,
            lng: json[i].lng
        };
        positions.push(position);
    } //for
    //console.log(positions);
    makeMarkers();
    status = true;
    //리스트 ajax
    $.ajax({
        url: '/reList',
        type: 'POST',
        data:{
            info: guName
        },
        datatype : 'text',
        success: function(data) {
            if (data) {
                console.log('검색완료');
            } else {
                alert("전송된 값 없음");
            }
        },
        error: function() {
            alert("에러 발생");
        }
    }).done(function (data){
        $("#changable").replaceWith(data);
        listReload(data);
    });//ajax 2 done
});//ajax 1 done

 

테스트까지 완료.