은 주차장 입장시 최적의 자리를 배정해줌으로써 주차 스트레스를 줄여주는 AIoT 프로젝트다. 학부생시절 IoT프로젝트를 진행한적은 있지만, 대개 IoT 시스템만 맡거나, 웹만 맡거나 했으므로 전체적인 구조에 대한 고민은 부족했었다. 그렇다보니 특히 이 프로젝트에서 아키텍처 구조상의, 통신문제를 많이 마주쳤던것 같다. 가장 크게 고민했던 문제는 총 두가지였다.1. 키오스크 - 관리자화면 - IoT간의 실시간성을 어떻게 반영할것인가?2. 포트포워딩이 불가능한 시연환경에서, 로컬서버인 IoT서버와 배포서버인 AWS서버가 통신하게 할것인가?  1. 키오스크 - 관리자화면 - IoT간의 실시간성을 어떻게 반영할것인가? 주차장 시스템이다 보니, 관리자페이지 - 키오스크 - IoT시스템간의 실시간성이 매우 중요했다...

트래블 캐리어엔 인스타그램과 유사한 알림 기능이 필요했다. 주제가 이므로, 팔로워 및 게시판 관련 알림들을 구현하고자 했다. 웹사이트의 알림들을 보면, 실시간으로 알림을 만들어주는 사이트도 있고, 일정 시간마다 알림이 업데이트 되는 경우도 있었다. 대부분의 SNS가 전자 형식이었고, Okky라는 개발자 커뮤니티의 경우 후자의 방식을 택하고 있었다. 나는 실시간 알림을 구현하고 싶었고, 이를 위해 총 세가지 방식에 대해 공부하게 되었다. 1. WebSocket2. Polling / Long Polling3. Server-Client-Events(SSE)  WebSocket을 활용한 실시간 알림웹소켓은 대학시절 IoT수업 실습에서 사용해 본 적이 있는 기술이다. 대표적으로 실시간 채팅을 구현할때 많이 사용한..

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일간 여행하는 계획이 검색되는것! 그래서 단순 ..

트래블 캐리어는 여행 사진을 중점으로 하는 기록용 웹서비스로, 사진 저장 로직이 필수적이었다.'여행사진'이라는 특성상 예상되는 리소스 사용량이 상당했기 때문에 서버 용량이 큰 문제로 다가왔다. 그래서 이를 극복하기 위해 구상한 아이디어가 다음과 같았다.(1) 이미지 리사이징 최적화(2) AWS S3 저장을 통한 로컬서버 용량 한계 극복 (이제와 생각해보면 프론트엔드에서 리사이징 하는 방법이 네트워크 오버헤드가 줄어 더 좋은 방법일것 같다. 당시 프론트 프레임워크 없이 Thymleaf를 사용중이어서 데이터를 체계적으로 다루기 힘들었고, 나 또한 백엔드에 더 익숙한 풀스택으로 참여하고 있어서 백엔드에서 처리해보기로 했다.) 결론적으로, 여러개의 이미지를 한번에 전송받은 뒤 각 이미지에 대해 리사이징&S3업로..