📘 RabbitMQ Dead Letter Exchange & TTL 설정 RabbitMQ는 기본적으로 메시지가 예상치 못하게 처리될 수 없을 경우 다시 Queue로 보내는 Re-Queuing을 수행합니다. 하지만 계속 동일한 에러로 메세지를 처리할 수 없을 경우, 이 메세지는 계속 Queue에 담기고 에러도 계속 생기는 루프가 될 것입니다. RabbitMQ는 기본적으로 Delayed Message 기능을 지원하지 않으므로 플러그인을 설치하고 RabbitMQ를 재시작 해줍니다. 플러그인 설치, 서비스 재시작은 관리자 권한 CMD를 열어서 RabbitMQ가 설치된 디렉토리의 sbin 폴더 내부에서 진행해야 합니다. # RabbitMQ Delayed Message Exchange 플러그인 설치 rabbitmq..

📘 RabbitMQ - Publish & Subscribe MQTT Data MQTT Producer : 특정 소프트웨어에서 딥러닝 엔진을 거쳐 MQTT로 데이터가 계속 나옴 MQTT Broker(RabbitMQ) : Message Broker인 RabbitMQ를 이용해 MQTT 데이터를 Rabbit MQ의 Exchange를 거쳐 Routing Key에 맞는Queue에 쌓는다. MQTT Client(FrontEnd Server) : Queue에 쌓인 데이터를 Pub/Sub 구조로 프론트엔드(MQTT Client)와 실시간 통신을 하고싶음(Web Socket) 환경 요구 사항 도커 컨테이너 사용 중지지, 로컬(Windows)에 RabbitMQ 등 설치 RabbitMQ GUI Management Consol..

React with TypeScript React 핵심만 정리합니다. (TypeScript 기반) My Github Repository Project 생성 & 세팅 Browser-Based Setup(CodeSandbox&Similar) 방식은 제외하고 Local Setup 방식으로 프로젝트를 만들어 보겠습니다. NodeJS를 설치하고 아래 두 방식 중 하나를 선택해 React App을 만듭니다. Create-React-App 방식 # 프로젝트 생성 npm i -g typescript npx create-react-app [프로젝트 이름] # 프로젝트 실행 npm start Vite 방식 # 프로젝트 생성 npm i -g vite typescript npm create vite@latest # 프로젝트 ..

Vue - Chart.js를 이용한 반응형 데이터 시각화 내 Github 저장소 링크 프론트엔드 연습용으로 간단하게 더미 데이터를 만들어 테스트 해보려고 만든 저장소입니다. 프론트엔드를 다루는게 처음이라 혹시 틀린점이나 프론트엔드 고수형님 계시면 피드백 부탁드립니다..😭 사용 기술 스택 Backend Spring Batch (아직 사용 안함) Spring Data JPA Maria DB QueryDSL (아직 사용 안함) MQTT, RTSP, HLS, FFmpeg (아직 사용 안함) Akka Actor (Scala) Kakao Map API (아직 사용 안함) Frontend Vue 3 Composition API, BootStrap, Vite Axios, Chart.js, Vue-Chart-3, ESL..

불린: Boolean 단순한 참(true)/거짓(false) 값을 나타냅니다. let isBoolean: boolean; let isDone: boolean = false; 숫자: Number 모든 부동 소수점 값을 사용할 수 있습니다. ES6에 도입된 2진수 및 8진수 리터럴도 지원합니다. let num: number; let integer: number = 6; let float: number = 3.14; let hex: number = 0xf00d; // 61453 let binary: number = 0b1010; // 10 let octal: number = 0o744; // 484 let infinity: number = Infinity; let nan: number = NaN; 문자열: S..

Vue 로컬 테스트 시 Cors Proxy 우회 Vue를 사용한 프론트엔드 서버에서 백엔드 서버의 Parsing된 Json 데이터를 받아오는 연습을 하던 도중 CORS 에러를 만났습니다. 코드는 이렇게 작성했습니다. 복잡하게 테스트할 필요 없이 단순히 v-for를 이용해 들어오는 데이터를 Reactive 변수에 넣어 Loop를 돌리고, 컴포넌트가 마운트 될 때 데이터를 출력하게만 해두었습니다. 데이터 가져오기 연습 Event ID: {{ item.id }} Frame ID: {{ item.frameId }} Extra Information Bbox Height : {{ item.extra.bbox.height }} Bbox Width : {{ item.extra.bbox.width }} Vertices ..

Actions을 이용한 비동기 코드 실행 Vuex에서 제공하는 핵심 기능중 하나가 코드의 비동기 실행 기능입니다. 이때, Mutation의 문제는 항상 동기 방식이며, 비동기 방식은 허용되지 않습니다. 따라서 Mutation이 실행 되면, 중단없이 단계별로 실행되면서 상태는 즉시 바뀌어야 합니다. 이유는 모든 Mutation이 최신 State를 받아야만 하기 때문에 이러한 방식이 강제됩니다. 이럴떄 Actions을 사용합니다. 동작 방식은 컴포넌트에서 Actions를 트리거하고 이 트리거된 Actions는 Mutation을 Commit 합니다. Actions는 비동기 방식을 지원하기 때문에 컴포넌트와 Mutation 사이에 넣는 것은 일반적으로 좋은 사용 방식입니다. 컴포넌트에서 직접 Mutation을 ..