개발 일지/주간 개발 일지 18

[09월 1주차] 캐시와 스프링 AOP, @Cacheable

캐시(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..

[08월 4주] MyBatis(string_agg, unnest), element plus를 이용한 스위치 버튼 만들기

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

[08월 1주차] MyBatis bacth 처리 방법(INSERT, DELETE), Vue.js 3 폼 유효성 검증

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

[07월 3주차] axios 요청으로 컬렉션 데이터 전달하기, PostgreSQL 배열(_VARCHAR) 필드 관리 방법

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 을 통해 검색하기 위해 자주..

[07월 1주차] Mybatis 바인딩 에러 해결 및 PostgreSQL 배열 관련 메서드

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..

[06월 5주차] 반응형 객체 만드는 방법(ref, reactive), Postman 에서 만든 API 공유하는 방법(export)

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

[06월 4주차] 프론트엔드 element plus 사용 방법

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..

[06월 1주차] Spring VM 옵션 설정 방법, JVM 구조

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 # 배포할 경우, 설정 정보 다..

[05월 3주차] querydsl JOIN 방법

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

[05월 2주차] Vue.js 3 modal(모달, 팝업) 창 띄우기

Note 선택 불가능한 콤보 박스 만들기 - disabled Detail - 부모 "Detail"은 자식 컴포넌트를 의미한다. 자식 컴포넌트 Detail 에게 statusCdList2라는 데이터를 보내서 자식 컴포넌트의 변수 statusCdList1에 값을 전달한다. 코드 리스트는 statusCdList변수를 선언과 동시에 store에서 데이터를 가져와서 statusCdList에 저장한다. view 라는 컴포넌트가 DOM에 렌더링되자마자 실행되도록 onMounted() 메서드 안에 코드 리스트 가져오는 getCodeList()를 넣어줘야한다. // script onMounted(() => { getCodeList(); }); const getCodeList = () => store.dispatch("St..