계란 블로그

얼마 전부터 회사에서 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 # 배포할 경우, 설정 정보 다..

에러 해결 axios 요청 응답이 null인 경우 오류 get 요청을 보낸 응답에서 데이터가 없는 경우, 오류가 발생했다. if 문을 만족하지 않으니까 태그 안 코드가 실행되지 않는 게 정상인데 계속해서 들어갔다. 원인 get 요청을 보낸 응답 데이터에 리스트가 비어 있는 경우, res.data 는 null 이 아니고 res.data.data가 null이다. 보통 axios로 요청을 보내면 응답 객체는 data, status, statusText, headers, ...와 같은 구조가 있다. 따라서, 뒤에 ".data"를 붙여야 실제로 필요한 데이터에 접근할 수 있다. 해결 다음과 같이 수정한다. ========== script ========== $axios .get( util.format($apiUr..