SSAFY에서 좋은 기회로 기업 SEMES와의 연계프로젝트를 진행했었다.당시 전달받은 주제는 이었다. 간단하게 설명하자면, OHT라는 반도체 운송장비가 일을 하며 만드는 대용량 로그를 직접 학습시킨 AI를 통해 분석한다. 이를통해 단순 운송 로그만으로도 몇시에 정체가 일어났는지, 그리고 그 원인은 무엇인지 쉽게 알 수 있게 해주는 프로젝트다. 나는 이 프로젝트에서 AI를 제외한 모든 역할, 즉 백엔드/프론트엔드/인프라/디자인을 담당했고, 이과정에서 가장 신경썼던 부분중 하나가 바로 오늘의 주제, "아키텍처 설계" 이다. 최종적인 아키텍처 설계도는 몇가지 문제상황을 마주치면서 크게 수정되었다, 자세한 내용은 다음과 같다.  1. AnyLogic 시뮬레이터로 발생하는 실시간 데이터 보안상 문제로 직접 공장 ..

는 AI를 활용한 조제약 분석 웹으로, Vue.js를 통해 개발했었다. 당시 백엔드, 프론트엔드, 디자인을 모두 맡고, 기술리더 역할까지 일임했었는데, 프론트엔드가 가장 힘들었다ㅎㅎ... 아무래도 백엔드에 비해서는 경험이 부족한데다가, 이전 프로젝트에 비해 화면도 굉장히 많았다. 하지만 팀원들을 도우면서 가장 많이 성장하기도 했다.  당시 내가 단독으로 디자인한 UI이다. 60개에 달하는 화면....디자인도 힘들었지만, 진짜 문제는 개발이었다. 어떻게해야 짧은 시간안에 이 모든 화면을 구현할 수 있을까?그때 생각한게 바로 컴포넌트 주도 개발(CDD)였다. 컴포넌트 주도 개발은 앱의 UI를 재사용 가능한 컴포넌트로 쪼개어 개발하는 방식이다. 이를 통해 UI를 더 효율적으로 관리하고, 재사용성과 유지보수성을..

오늘은 chart.js를 활용해서 위와같은 디자인의 라인차트를 커스텀 하는 방법을 포스팅 하려고 한다. chart.js는 대표적인 차트용 라이브러리로, 굉장히 다양한 커스텀 방식을 지원한다.Line Chart의 공식문서에 의하면, 초기 셋팅은 다음과 같다.   나는 위 셋팅에서 꺾임은 좀 더 부드럽게, 가로선을 없애며, 각 데이터별 point부분도 생략할것이다.뿐만아니라 그래프 아래에 그라데이션을 만들고, 맨 위에 데이터명에 해당하는 범례는 다른디자인을 쓰기 위해 생략할것이다. 구현 당시 특히 그라데이션 부분을 어떻게 해야할지 고민이 많았다. 자료가 없었기 때문에 ㅜ_^ 같은 상황을 겪는 분들에게 팁을 주자면, 구글에 영어로 chart.js line chart 등의 키워드로 검색한 뒤, 이미지탭에서 내가..

이분탐색 문제를 풀다보면, 만족하는 특정 값만 있는 문제 뿐만아니라 만족하는 값중 가장 작은것, 또는 만족하는 값의 다음 수를 찾는 문제들이 나온다.이때 사용하는것이 바로 경계값찾기 - Upper Bound와 Lower Bound!! Lower Bound?Lower Bound는 하한값을 나타냄.즉, 찾으려는 값 이상의 값이 처음으로 나타내는 위치2를 찾는중이면, 111222333 이부분! Upper Bound?Upper Bound는 상한값을 나타냄즉 찾으려는 값을 초과한 값이 처음으로 나타나는 위치2를 찾는중이면, 111222333 이부분! 그렇다면 찾으려는 값이 없을때의 결과는?5를 찾을때 1224446779가 주어진다면Lower Bound = 1224446779 ⇒ index=6Upper Bound ..

냅색배낭에 넣을 최댓값이 정해지고 해당 한도 내에서 물건을 넣어 가치의 합이 최대가 되도록 고르는 조합 최적화 문제.두가지로 분류될 수 있다.짐을 쪼갤 수 있는 경우(Fraction Knapsack Problem) ⇒ 그리디를 통해 풀이함짐을 쪼갤 수 없는 경우(0/1 Knapsack Problem) ⇒ DP를 통해 풀이함평범한 배낭백준 12865번 문제 무게W와 가치V 배열이 있을때, 각 W[i]무게를 가진 물건의 가치는 V[i]이다. 예제에 의하면 (Wi, Vi) = (6,13), (4,8), (3,6), (5,12)이다. 최대 수용 무게는 K=7이다.DP[i] = i무게일때 최대 수용 가능한 물품의 가치인것으로 설정하고 규칙을 찾아보자.(6,13), (4,8), (3,6), (5,12)을 각각 A,..

은 주차장 입장시 최적의 자리를 배정해줌으로써 주차 스트레스를 줄여주는 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일간 여행하는 계획이 검색되는것! 그래서 단순 ..