계란 블로그

MQTT(Message Queue Telemetry Transfort)란 publish, subscribe 기반의 메시징 프로토콜이다. TCP/IP 프로토콜 위에서 동작하며 네트워크 대역폭이 제한되는 원격 위치와의 연결을 위해서 설계되었다. 무선 네크워크에 연결된 단순한 기기들간의 간단한 소통을 위해 만들어진 만큼 리소스를 매우 적게 요구하므로 IoT(Internet of Things, 사물인터넷) 에서 가볍에 많이 쓰이는 프로토콜이다. MQTT라는 프로토콜을 구현한 소프트웨어가 바로 메시지 브로커 mosquitto 이다. MQTT 를 깔고 나면 프로그램의 이름이 "mosquitto"인 것을 확인할 수 있다. 회사에 Message Queue 를 이용하는 Listener 서버가 있는데 이와 관련된 부분..

얼마 전부터 회사에서 IoT 관련 웹 페이지를 만들고 있습니다. 그림과 같이 최상위 컴포넌트(Page) 안에 검색 컴포넌트(SearchForm)와 목록 컴포넌트(List)가 있고 그 안에 또 자식 컴포넌트(Modify)가 있는 형태입니다. 검색폼에 조건을 넣어서 조회하던 도중, 디바이스 정보를 등록하거나 수정한 다음, (검색 조건을 그대로 적용한) 새로운 목록이 조회되는 기능을 만들려고합니다. 그러기 위해서는 검색 정보(searchInfo)를 Page로 전달하고 또 다시 하위로 전달하는 구조가 필요합니다. Vue.js 3에서 컴포넌트 간에 데이터를 주고 받는 방법을 정리하며 살펴보겠습니다. 하위 컴포넌트(DeviceSearchForm) → 상위 컴포넌트(Page) 데이터 보내기 DeviceSearchFo..

캐시(cache) 캐시란? 반복적으로 요청되는 데이터를 임시로 메모리 저장했다가 다음 요청이 왔을 때, DB에 접근하지 않고 메모리에서 읽어오는 것을 말한다. 최초 요청 시에만 DB 에 접근하므로 시간적으로 효율적이고 성능도 좋아진다. Spring 캐시 사용 방법 - @CacheEvict, @Cacheable @Cacheable(cacheNames = "model", key = "#modelNm", unless = "#result == null") public ModelVo getModel(String modelNm) { // 모델 조회 return model; } @CacheEvict(cacheNames = "model", key = "#modelNm") public void removeModel(St..

PostgreSQL에서 unnest()를 사용하면 정렬이 되지 않는 이유? postgre에서는 string_agg() 를 이용해서 구분자를 기준으로 어떤 값들을 이어 붙일 수 있다. 또는 반대로 unnest()를 사용해서 구분자로 이어붙여진 값들을 펼칠 수도 있다. 그런데 여기서 unnest() 사용해서 펼친 경우, 해당 데이터들은 정렬이 되지 않는다. 원인: ? 해결 방법: ? MyBatis PostgreSQL의 string_agg()를 이용하면 특정 데이터를 구분자로 구분해서 문자열 형태로 이어붙일 수 있다. ex) ['a', 'p', 'p', 'l', 'e'] => 'apple' 검색 쿼리를 만드는 중이다. 'searchKeyword' 에 대해서 searchKeyword 가 포함된 model_id_..

MyBatis 일괄 INSERT, DELETE 여러 엔티티의 정보를 List 형태로 받아서 일괄적으로 DB에 INSERT 쿼리를 실행하려고한다. 관련된 내용을 정리해보려한다. 프론트 다음과 같이 배열 list에 각 object를 담아서 이 데이터를 POST 요청과 함께 보낸다. 그러면 백엔드에서 @RequestBody List 형태로 데이터를 받을 수 있다. cf) DELETE 요청에는 requestbody 를 보내는게 권장되지 않는다. HTTP 프로토콜의 표준 사양에 따르면 DELETE 요청에 requestbody를 포함하지 않는 게 원칙이다. 보안/캐싱에 관한 문제가 있기 때문이다. 따라서, 선택 삭제 같은 기능을 구현하는 경우, URL에 "id=model3&id=model9" 와 같은 방식으로 이어..

Note cf) HTTP 요청 관련 Spring의 애너테이션 @RequestBody: Java에 정의한 Object 형태로 데이터를 전달받는 경우, 사용한다. 아래 쿼리 스트링과는 다르게 URL에 데이터가 표시되지 않으며 Json 형태로 request body를 전달할 수 있다. ex) 컨트롤러 메서드 안에 (@RequestBody Model model) 같은 형식으로 파라미터를 받을 수 있다. POST 요청 보낼 때 주로 쓰인다. Java에 Model 이라는 클래스가 꼭 정의되어 있어야한다. @RequestParam: url에 "localhost:8080/model?curPage=3&searchNm=apple" 와 같은 식으로 HTTTP 요청을 보내는 경우에 쓰인다. GET 을 통해 검색하기 위해 자주..

PostgreSQL - 배열, 문자열 관련 메서드 generate_subscripts(배열명, 아래 첨자): 배열의 요소를 서브스크립트 형식으로 변환해서 반환한다. 배열 arr = {a, b, c} .... (1은 아래 첨자) 이라고 하면 배열의 각 요소에 아래 첨자를 붙여서 [a1, b1, c1]를 반환한다. string_agg(필드명, '구분자'): 그룹별로 id로 구분해서 필드 name 값을 모두 콤마로 이어붙일 수 있다. generate_subscripts(array, 1) string_agg(name, ',') 에러 해결 오류: BindingException 원인 : Mapper 인터페이스에 정의한 메서드명과 sql.xml 파일에 정의한 메서드명이 일치해야한다. 해결 org.apache.ibat..

프론트 에러 해결 오류: 배열에 null이 들어왔다. 원인: subtaskList에 대해 잘못된 데이터 타입이 전달되는 경우 바랫ㅇ한다. axios 요청을 보내고 응답을 받아서 list를 조회했는데 데이터가 없는 경우가 문제였다. 이 값이 null 인 경우, subtaskList = null 이 전달되어서 에러가 나는 것이다. 해결 getSubtaskList()메서드 안에서 axios를 통해 목록을 불러왔을 때, 데이터가 없는 경우에 대해 다음과 같이 빈 배열을 넣어준다. .then((res) => { if(res.data.data === null){ state.subtaskList = []; ... } } 렌더링 시점에 ( 안에 정의되지 않은) 변수에 접근하면 발생하는 에러 오류 modalTitle w..

element plus를 이용한 탭 만들기 - Vue.js 여러 가지 탭이 있을 때 하나의 탭을 클릭 시, 그에 대한 내용만 보이도록 구현하려고 한다. 사내에서 element plus라는 디펜던시를 사용하고 있다.( package.json 파일에 있는 dependency 목록에 element plus의 버전을 정의하면 된다. ) => Java에서 build.gradle/ pom.xml 파일에 dependency를 설치하는 것과 같다. 엘리먼트 플러스(element plus): Vue.js 기반의 UI 컴포넌트 라이브러리이다. 사용하기 쉬운 UI 컴포넌트를 제한다. 버튼, 입력 필드, 선택 목록, 테이블, 모달 창 같은 UI요소를 포함하고 있다. main.js 파일에서 element plus 를 impor..

Spring VM 옵션 설정 방법 - IntelliJ, VS code 차이점 사내에서 vs code, eclipse를 쓰는 분들도 있고 IntelliJ 를 쓰기도 한다. vs code 에서는 빌드 관련한 설정을 위해서 .json 형태의 파일을 쓴다. ("-Dkey=value" 와 같은 데이터가 담겨 있다. ) 그런데, 이를 intelliJ에 적용하려면 어떻게 해야할까? 먼저, yml 파일에 개발 버전, 배포 버전에 대한 설정 값을 다르게 설정한다. spring: config: activate: on-profile: - local # 로컬로 실행할 경우, 설정 정보 ex) DataBase 정보 등 spring: config: activate: on-profile: - dev # 배포할 경우, 설정 정보 다..