ChatGPT API의 응답을 데이터화 한 뒤, TMap API의 파라미터로 사용함으로써 아래와 같이 대화만으로도 핀이 자동 생성되는 기능을 만들었다.생성형 AI가 추천해준 여행지의 위치를 확인하고, 추가버튼을 클릭함으로써 내 여행계획에 추가할 수 있는 기능인것이다. 이를 위해 이전 게시물에서 응답 데이터화를 마쳤고, 이번 포스팅에선 Tmap API를 사용하는 방법 및 위 기능을 구현하는 방법을 다루고자 한다. 카카오맵과 다르게 TMap은 프레임워크별로 코드를 제공하지 않는다. 바닐라JS 코드만 제공하기 때문에, Vue.js에서 활용하기 위해선 직접 커스텀 하는 작업이 필수적이었다.   Vue3.js에서 TMap을 사용하는 방법우선 공식 문서는 다음에서 볼 수 있다. 공식문서에선 초기에 맵을 불러오는 코..

만의 특별한 기능은 "생성형 AI와 대화하며 자동으로 여행 계획 짜기"이다.이를 위해서 ChatGPT, 그리고 Tmap API를 활용해 간단한 채팅만으로도 계획이 자동으로 셋팅되도록 구현했다. Tmap에 자동 셋팅되는 부분은 다음 포스팅에서 다루도록 하고, 이번 포스팅에선 ChatGPT의 응답을 활용해 응답 문자열을 객체 데이터화 하는 방법을 다룰것이다.위와같이 대전의 여행지를 GPT에게 추천받으면, 서론과 함께 여행지와 여행지 정보를 응답받게 된다.위 문자열에서 여행지 제목만을 추출해서 Tmap에 전달해야 하는데, 어떻게 해야할까?나는 두가지를 활용했다. (1)프롬프트 엔지니어링, (2)정규표현식이다.    프롬프트 엔지니어링으로 응답형식 지정하기프롬프트 엔지니어링은 생성형AI가 고품질의 아웃풋을 생성..

여행계획 사이트인 를 개발하며 작성했던 동적 쿼리에 대해 포스팅해보려고 한다. 원더웨이의 핵심기능중 하나는 다른 사용자들의 계획을 참고할 수 있는 기능인데, 검색창의 편의성이 굉장히 중요했다.그래서 도입했던 방식이, input-box 오른쪽에 카테고리를 선택하는 select-box를 두고, 각 카테고리와 검색어를 매칭해 저장한 뒤, 한번에 검색하는 방식이다.  즉, 위와같이 select-box에서 Location을 선택한 뒤, "제주도"를 입력해 엔터를 누르면 검색 기준이 하나 생긴다.또한 select-box에서 Period를 선택한 뒤, "3"을 입력하고 엔터를 누르면 또다른 검색기준이 생긴다.그리고 이때 Search버튼으로 검색을 요청하면, 제주도에서 3일간 여행하는 계획이 검색되는것! 그래서 단순 ..