[Main-Project] Day 12(주말) - Kakao map API 통신 호출 구현 및 테스트

📗 Pre-Project, Day 12

• 검색 페이지 - 섹터당 상인 위치 API 통신 테스트 진행
• 지도 섹터당 책의 총 개수, 책 목록 API 호출 구현
• 지도에서 상인 섹터 클릭시 상인 리스트 API 호출 구현

📗 섹터당 상인의 총 개수, 섹터당 상인 목록 API 테스트

import axios, { AxiosResponse } from 'axios';
import { BASE_URL } from '../constants/constants';

const axiosConfig = {
	headers: { 'Content-Type': 'application/json; charset=UTF-8' },
	baseURL: BASE_URL,
};

const instance = axios.create(axiosConfig);
instance.defaults.withCredentials = true; // withCredentials 전역 설정

// 섹터당 상인의 총 갯수
//location 형식
// localhost:8080/member/count?latitude=37.4974939&longitude=127.0270229
export const getTotalMerchant = async (
	latitude: string | number,
	longitude: string | number,
) => {
	try {
		const result = await instance.get(`/member/count`, {
			params: {
				latitude,
				longitude,
			},
		});
		console.log(result);
		return result.data;
	} catch (err) {
		return err;
	}
};

// 섹터당 상인 목록
export const getMerchantList = async (
	latitude: string,
	longitude: string,
	sector: number,
) => {
	try {
		const result = await instance.get(`/member/sector`, {
			params: {
				latitude,
				longitude,
				sector,
			},
		});
		console.log(result.data);
		return result.data;
	} catch (err) {
		return err;
	}
};

// // 섹터당 책의 총 갯수
export const getTotalBook = async (
	bookTitle: string,
	latitude: string | number,
	longitude: string | number,
) => {
	try {
		const result = await instance.get(`/books/count`, {
			params: {
				bookTitle,
				latitude,
				longitude,
			},
		});
		console.log(result);
		return result.data;
	} catch (err) {
		return err;
	}
};

// // 섹터당 책 목록
export const getBookList = async (
	name: string,
	latitude: string,
	longitude: string,
	sector: number,
) => {
	try {
		const result = await instance.get(`/books`, {
			params: {
				bookTitle: name,
				latitude,
				longitude,
				sector,
			},
		});
		console.log(result.data);
		return result.data;
	} catch (err) {
		return err;
	}
};

→ 백엔드 측에서 API 명세서가 어느정도 완성되어 제대로 통신이 되는지 확인해보는 시간을 가졌다. 위와 같이 status 200으로 통신이 된다는 것을 확인했다.

아직 API 요청을 하는 것에 익숙치 않는데, 타입스크립트를 사용하니 type도 별도로 지정해줘야해서 더 헷갈린 것 같다.. 이 부분에 대한 추가 학습을 해야겠다.

• fetch 함수와 활용예제_링크
• Fetch API – JavaScript에서 GET 요청 및 POST 요청을 만드는 방법_링크
• API 호출 로직에 Typescript 입히기_링크