캠프 13주4일차 TIL : api db연결?

오늘 작업한 부분을 기록하기 위한 til이다.

프론트로 외부? api에서 데이터를 받아 -> 백엔드 api에서 해당 데이터를 검색하고 해당데이터에서 필요한 도로명 주소와 지번주소를 x좌표 위도와 y좌표 경도를 db에 저장하는 과정을 진행했다.

window.onload = function () {
    document.getElementById("address_kakao").addEventListener("click", function () { //주소입력칸을 클릭하면
        //카카오 지도 발생
        new daum.Postcode({
            oncomplete: function (data) { //선택시 입력값 세팅
                // 데이터 전송을 위한 변수 선언
                const postData = {
                    address_kakao: data.address,
                    jibunAddress: data.jibunAddress,
                    roadAddress: data.roadAddress,
                }
                fetch('http://127.0.0.1:8000/articles/search', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        "query": data.jibunAddress,
                    })
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('저장실패');
                        }
                        return postData;
                    })
                    .then(data => {
                        console.log('data', data);
                        console.log('저장완료', data);
                    })
                    .catch(error => {
                        console.error(error);
                    });
            }
        }).open()
    })

}

너무 복붙이지만 이건 기록일 뿐이다.

<button type="text" id="address_kakao" name="address">주소검색</button>

여기까지가 프론트 부분이다.

class KakaoMapSearchView(APIView):
    """
    지역명 검색용 뷰입니다.
    추가로 db저장 부분 작성 했습니다.
    """
    def post(self, request):
        headers = {
            'Authorization': f'KakaoAK {REST_API_KEY}',
        }
        query = request.data.get('query', None)
        data = {
            'query': query
        }
        url = f'https://dapi.kakao.com/v2/local/search/keyword.json?query={query}'
        response = requests.post(url, headers=headers)
        data = response.json()
        documents = data.get('documents')
        if documents:
            serializer = MapSearchSerializer(data={
                'jibun_address': documents[0].get('address_name'),
                'road_address': documents[0].get('road_address_name'),
                'coordinate_x': documents[0].get('x'),
                'coordinate_y': documents[0].get('y'),
            })

            if serializer.is_valid():
                serializer.save()
                return Response(serializer.data, status=status.HTTP_200_OK)
            else:
                return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
        else:
            return Response({'error': '결과가 없습니다.'},status=status.HTTP_204_NO_CONTENT)

class KakaoMapDataBase(CommonModel):
    """
    db저장용 모델입니다.
    """
    jibun_address = models.CharField(max_length=255)
    road_address = models.CharField(max_length=255)
    coordinate_x = models.FloatField()
    coordinate_y = models.FloatField()

    def __str__(self):
        return self.jibun_address

class MapSearchSerializer(serializers.ModelSerializer):
    """지도정보 db저장"""

    class Meta:
        model = KakaoMapDataBase
        fields = ('jibun_address', 'road_address', 'coordinate_x', 'coordinate_y')

    def create(self, validated_data):
        return KakaoMapDataBase.objects.create(**validated_data)

다시 설명하면 db모델을 새로만들어서 db에 사용할 필드를 만들어줬다. 각각의 필드에 

오늘의 규파팡이 느낀 점!

api는 굉장히 편리하다. 다양한 데이터를 쉽게 사용하고 접근할 수 있다.

쓸수록 적응했는데 다만..... 포스트맨 쓰던 때랑 프론트를 같이하니깐... 너무 헷갈린다 ㅠㅠㅠ

TIL 대표이미지