지오코더

kakao-geocoder.util.ts

카카오 지오코딩을 활용하여 특정 주소의 좌표값을 구하는 함수를 만들었음.

카카오 로컬 API 공식 문서

import { Injectable, NotFoundException, InternalServerErrorException } from '@nestjs/common';
import axios from 'axios';

@Injectable()
export class KakaoGeocoder {
    // 카카오 API 키
    private readonly KAKAO_API_KEY = process.env.KAKAO_REST_API_KEY;
    // 카카오 지오코딩 API URL
    private readonly baseUrl = `https://dapi.kakao.com/v2/local/search/address`;

    // 주소를 입력받아 위도와 경도를 반환하는 함수
    async getCoordinates(address: string): Promise<{ lat: number, lng: number }> {
        try {
            // axios를 사용하여 카카오 API를 호출한당
            const response = await axios.get(this.baseUrl, {
                headers: {
                    'Authorization': `KakaoAK ${this.KAKAO_API_KEY}` // API 키를 헤더에 포함시키기
                },
                params: {
                    query: address // 조회할 주소를 쿼리 파라미터로 전달
                }
            });

            // 응답에서 좌표 데이터를 추출하여 반환
            if (response.data.documents && response.data.documents.length > 0) {
                const { x: lng, y: lat } = response.data.documents[0];
                return { lat: parseFloat(lat), lng: parseFloat(lng) }; // 문자열로 반환된 좌표를 숫자로 변환
            } else {
                // 좌표를 찾을 수 없는 경우 NotFoundException을 발생시킴
                throw new NotFoundException('결과가 없습니다.');
            }
        } catch (error) {
            console.error('좌표값 찾기 실패:', error);
            // API 호출 중 오류가 발생한 경우 InternalServerErrorException을 발생
            throw new InternalServerErrorException('Kakao API 호출 중 문제가 발생했습니다.');
        }
    }
}

하다보니 왜 많은 서비스에서 주소를 통으로 받지 않고 끊어 받는지 알겠음...ㅋㅋㅋㅋㅋㅋㅋㅋ 여기에다 상세주소까지 통으로 넣으면 좌표값을 받지 못한다. 무조건 상세주소 떼고 호출하도록 해야 해서 데이터 구조를 약간 변경하였음
(기존 : address -> 변경 후 : address, detail_address)

이벤트 드리븐 아키텍처

예시 구현

창고 주소 정보가 변경되는 시점에서 발생하는 이벤트를 처리함
창고의 주소 변경 이벤트가 발생하면 다음과 같은 프로세스가 진행된다.

1. 주소 변경 이벤트 발생
2. 주소 정보를 포함한 이벤트가 메시지 큐나 이벤트 버스에 전송
3. 지오코딩 서비스가 이벤트를 수신하고 주소에 대한 좌표를 계산
4. 계산된 좌표를 데이터베이스에 저장하는 서비스가 좌표 업데이트 이벤트를 처리

프론트 세팅

Vue.js

플러그인도 풍부하고, 상대적으로 학습하기 쉬워서 개발 시간이 오래 걸릴 것 같지 않았다. 사용하기 편한데 리액트처럼 선언적 렌더링(데이터와 DOM 연결)을 제공한다고 하여 재고 정보를 실시간으로 파악해야 하는 쇼핑몰 솔루션에 적합할 것 같았음.성능 최적화도 잘 되어있다고 함.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer : {
    proxy : {
      '/api' :{
        target : 'http://localhost:3000',
        changeOrigin : true
      }
    }
  }
})

• transpileDependencies: true : node_modules 폴더 내의 의존성을 트랜스파일하는 옵션.
• devServer : 개발 서버에 대한 설정. 개발 중에 사용되는 웹팩 개발 서버의 옵션을 정의할 수 있음
  • proxy : 개발 서버에서 특정 API 요청을 다른 도메인으로 리디렉션할 수 있도록 설정하는 옵션. 네트워크 요청을 중간에서 잡아 다른 서버로 전달(프록시)함.
  • '/api' : /api로 시작하는 모든 요청을 프록시 설정에 따라 처리
  • target : 'http://localhost:3000': 프록시할 대상 서버의 주소. 로컬 개발 환경에서는 localhost:3000을 타겟으로 함
  • changeOrigin: true : 프록시 요청을 보낼 때 origin 헤더를 target으로 설정된 주소로 변경한다. CORS 관련 이슈를 해결하는 데 도움이 됨