django프로젝트 검색,지도,css작업

django 프로젝트가 본격적으로 시작하였다.
시작한지 하루가 지나고 바로 주말이라 3일정도 텀이 있엇지만, 중간중간 계속해서 작업을 이어 나갔다.

이번 프로젝트에서 또다시 css 가 어려웠다.
그래도 팀원분들의 도움으로 감을 많이 잡은거 같다.
처음에는 되게 어려운데 많이 하면 할수록 역시 감이 잡히는 것 같다.

이번에는 반응형까지 구현을 성공하였다.

일반적인 css는

부모 컨테이너 로 정렬 -> 그안에 컨테이너 배치 해서 정렬 -> 그안에 item 을 배치 하는게
기본적인 순서이다.

처음 코딩을 시작할때는 position:absolute; 로 다 때려박았는데 이제는 레이아웃 디자인을 크게 보면서
어느정도 배치가 되는 것 같다.

2틀정도는 계속해서 프론트 작업을 한 것 같다.

그렇게 많지 않은 양이지만은 시간이 꽤 오래 걸린 것 같다.

카카오맵 API 연동

var mapContainer = document.getElementById('map')// 지도를 표시할 div 
    mapOption = {
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

    // 지도를 생성합니다    
    var map = new kakao.maps.Map(mapContainer, mapOption);

    // 주소-좌표 변환 객체를 생성합니다
    var geocoder = new kakao.maps.services.Geocoder();
    // 주소로 좌표를 검색합니다
    geocoder.addressSearch('{{ address }}', function (result, status) {

        // 정상적으로 검색이 완료됐으면 
        if (status === kakao.maps.services.Status.OK) {

            var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

            var imageSrc = '/static/img/marker.png', // 마커이미지의 주소입니다    
                imageSize = new kakao.maps.Size(64, 69), // 마커이미지의 크기입니다
                imageOption = { offset: new kakao.maps.Point(27, 69) }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다
            
            var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
                markerPosition = new kakao.maps.LatLng(37.54699, 127.09598); // 마커가 표시될 위치입니다
            // 결과값으로 받은 위치를 마커로 표시합니다
        
            var marker = new kakao.maps.Marker({
                image: markerImage,
                map: map, 
                position: coords
            });

            map.setCenter(coords);

        }
    }); 

카카오 API 에서 지도를 받아와서 마커를 찍는 작업을 했다.

카카오 API에서 너무 쉽고간결하게 코드가 구현되어 있어 그대로 갖고와서 사용했다.

DB에서 주소를 가지고와 넣어주면 자동으로 좌표가 찍힌다. 생각보다 어렵지 않았다.

또한 css가 충돌나면 마커가 이상한데 가있거나 여러 오류가 일어나니 확인을 잘 해야 한다.

검색기능

def search(request):
    if request.method =='POST':
        post = request.POST.get('search','')
        all = Food.objects.all()
        fk_all = Category.objects.all()
        search_list = all.filter(
            Q(store__icontains = post) |
            # Q(category__icontains  = post) |
            # 외부키로 받아오기 
            Q(address__icontains = post),
        )
        return render(request,'search.html',{'post':post,'search':search_list})

오늘저녁에는 검색기능을 구현하였다. djnago 에서 Q라는 모듈을 제공해 쿼리셋을 쉽게 가져올 수 있다.
하나 문제인건 카테고리별로도 검색을 하고 싶은데 외부키로 가져오는게 안된다. 외부키로 쿼리셋을 받아오려면
정방향이 아닌 역방향으로 받아와야 된다고 한다. 내일 역방향으로 받아오는 법에 대해서 공부를 좀 해보려고 한다.

전체적으로 이번프로젝트는 속도도 좀 나는것 같고 현재 80%정도는 완성을 한 것 같다. 이제는 계속해서 디테일 과의 싸움같다.
프로젝트 기간이 널널해서 그런가 생각보다 여유롭다. 하지만 아직 데이터파싱해서 모델 적용하는 것이 남아있긴 한데, 다같이 하면
그렇게 오래 걸리지 않을 것 같다.