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

---

MyBatis 일괄 INSERT, DELETE  

• 여러 엔티티의 정보를 List 형태로 받아서 일괄적으로 DB에 INSERT 쿼리를 실행하려고한다. 
• 관련된 내용을 정리해보려한다. 

 

• 프론트 
  
  • 다음과 같이 배열 list에 각 object를 담아서 이 데이터를 POST 요청과 함께 보낸다. 
  • 그러면 백엔드에서 @RequestBody List<ModelVo> 형태로 데이터를 받을 수 있다. 
    • cf) DELETE 요청에는 requestbody  를 보내는게 권장되지 않는다. HTTP 프로토콜의 표준 사양에 따르면 DELETE 요청에 requestbody를 포함하지 않는 게 원칙이다. 보안/캐싱에 관한 문제가 있기 때문이다.
    • 따라서, 선택 삭제 같은 기능을 구현하는 경우, URL에 "id=model3&id=model9" 와 같은 방식으로 이어 붙여서 백엔드로 요청을 보내도록 한다. 그러면 컨트롤러 메서드에서는 @RequestParam List<String> 를 통해 데이터를 전달 받을 수 있다. 

<hide/>

const editModelList = () => {
  let list = [];
  for (let i = 0; i < state.model.list.length; ++i) {
    let editForm = {
      modelId: state.model.list[i].modelId,
      modelNm: modelNm,
    };
    list[i] = editForm;
  }
  $axios
    .post($apiUrls.model.createModelList, list, {
      headers: { "Content-Type": "application/json" },
    })
    .then((res) => {
      console.log(res);
      alert("저장이 완료되었습니다.");
      dialogEdit.value = false;
      location.reload();
    })
    .catch((err) => {
      console.log(err);
      if (
        err.response &&
        err.response.status &&
        (err.response.status === 422 || err.response.status === 400)
      ) {
        alert(err.response.data.message);
      } else {
        alert("등록에 실패하였습니다.");
      }
    });
};

 

• MyBatis - INSERT
  • PK를 생성하면서 동시에 INSERT 하려고 한다. 
    
    • def) seq_tb_common 는 시퀀스 라는 데이터베이스 오브젝트이다. 데이터베이스에서 테이블의 기본키를 생성하거나 유일한 식별자를 생성하는데 사용된다. 일반적으로 정수 값을 생성하고 고유하고 연속적인 값을 보장한다. 다음 값을 얻기 위해서는 'NEXTVAL'함수를 이용한다. 
    • 시퀀스는 스프링 JPA의  @GeneratedValue 와 유사한 기능이다.
  • <insert>의 속성 parameterType에 Java의 List를 넣어준다. 
  • VALUES 안에는 forEach와 seperator를 이용해서 여러 개의 데이터를 ',' 로 구분하도록 지정해준다.
    • collection="list"
    • item="item" 은 반복문으로 하나씩 insert 해주는 각 데이터를 의미한다. 
    • 파라미터로 컬렉션이 아닌 하나의 데이터만 받는 경우는 forEach 코드가 필요없다. 

<hide/>
<insert id="insertModelBatch" parameterType="java.util.List">
    INSERT INTO tb_model (
        model_id,
        model_nm
    )
    VALUES
    <foreach collection="list" item="item" separator=",">
        (
        CONCAT('MODEL', EXTRACT(EPOCH FROM now())::int, LPAD(CAST(NEXTVAL('seq_tb_common') AS varchar), 4, '0')),
        #{item.modelNm}
    </foreach>
</insert>

<hide/>
@Operation(summary="모델 등록 (Multi)")
@PostMapping("/api/models")
public ResponseEntity<Object> createModel(@RequestBody List<ModelVo> list){
    List<String> result = service.createModelList(list);
    return makeResponseEntity(result, HttpStatus.CREATED, "/api/models");
}

 

 

• MyBatis - DELETE
  
  • 어느 DB 에서나 WHERE절 조건을 만족하는 모든 row에 대해서 DELETE 쿼리는 한 번만 실행되므로 batch 처리를 하기 위해 INSERT, UPDATE 처럼 <foreach>가 필수로 필요하지 않다. 
  • 아래의 쿼리는 모델 코드를 만족하는 모든 model을 한 번에 삭제한다. 

<hide/>
<delete id="deleteModelBatch" parameterType="java.lang.String">
    DELETE
    FROM tb_model
    WHERE model_cd = #{modelCd}
</delete>

 

---

유효성 검증 - Vue.js 3

• 회원 가입을 하거나 정보를 수정할 때, 필수적인 어떤 정보를  입력하지 않은 경우 API를 실행하지 못하도록 하는 방법을 알아보려고한다. 

 

• HTML
  
  • model: 저장할 대상인 정보의 변수
  • model인 'state.editInfo'에 저장된 값이 'state.rules'를 만족하는지 아닌지 판단하기 위한 ref 형 변수가 바로 'ruleFormRef'이다.
  • cf) state는 reactive를 이용한 반응형 데이터를 저장하는 변수명으로 주로 쓰인다.

<hide/>
<el-form
      ref="ruleFormRef"
      :model="state.editInfo"
      :rules="state.rules"
  ...
/>

 

• SCRIPT
  
  • state의 필드 중 하나인 rules에는 다음과 같이 필수로 입력해야 하는 값에 대한 규칙과 그에 대한 메시지를 만들 수 있다. 
  • required: 필수로 입력해야하는 필드인지 여부
  • message: 규칙을 만족하지 않는 경우 띄울 메시지, 
  • ex) modelNm 필드가 비어있을 경우, 입력 칸 아래에 빨간색으로 '입력하세요' 라는 메시지를 띄운다.  

<hide/>
const state = reactive({
	editInfo; {},
	rules: {
        modelNm: [
          {
            required: true,
            message: "입력하세요.",
            trigger: "blur",
          },
        ],
    ...
	}
});

 

• validate()를 이용하면 해당 폼이 유효한지 검사해서 유효한지 여부를 의미하는 boolean 값을 매개변수 (valid)로 받을 수 있다.
  
  • 아래의 editModel() 은 등록 버튼을 클릭할 때 실행되는 메서드이다.
  • HTML 에서 <el-form> 태그 안에 넣어준 ref 형 변수에 대해 validate() 메서드를 실행할 수 있다.
  • 그런데 위에서 설정한 rules의 어떤 조건을 만족하지 않은 경우, validate 안의 매개변수 valid가 false로 들어온다. 
  • 그래서 다음과 같이 alert 창을 띄울 수 있다. 

<hide/>
const ruleFormRef = ref()
const EditModel = () => {
  let ruleForm = ruleFormRef.value;
  if (!ruleForm) return;
  ruleForm.validate((valid) => {
    if (!valid) {
      alert("필수사항을 입력하십시오.");
      return;
    }
    // 유효성 검증 완료 => axios POST 요청
}

 

 

---

사내에서 메타데이터 관련 업무를 맡게 되어서 관련 내용을 알아보려 한다. 

주로 RDF, GraphQL 과 같은 내용이다.

 

 

---

Json LD (JavaScript Object Notation for Linked Data)

• Json을 사용해서 Linked data를 인코딩하는 방식이다. 
• Json => Json LD 로 변환을 간소화하기 위해 쓰인다. 
• 전통적인 Json 과 유사한 방식으로 데이터를 직렬화할 수 있다. 

 

---

 GraphQL(그래프큐엘)

• 페이스북에서 2015년 공개한 API를 위한 쿼리 언어이다. 클라이언트에게 요청한 만큼의 데이터를 제공하는데 우선 순위를 둔다. 
• NoSQL에 속한다. 유연하고 스키마 기반으로 작동한다. 
• 유연한 데이터 요청

 

디비버에서도 GraphQL을 사용 가능하다.

 

---

SPARQL(SPARQL Protocol and RDF Query Language, 스파클)

• RDF(Resource Description Framework) 데이터를 검색하거나 조작할 수 있는 언어이다. 
  • RDF 는 주어, 술어, 목적어(트리플)로 데이터를 표현하는 데이터 모델로 웹 상의 데이터를 표현하고 연결하는데 사용된다. 
  • 자원에 대해 설명해주는 간단한 문장을 만드는 게 가능하다. 
  • RDF는 웹 상의 데이터를 표현하고 연결하는 방법으로 Semantic Web 기술이다.
  • Semantic Web(시맨틱 웹, 의미론적인 웹): 인터넷 같은 분산환경에서 리소트(웹 문서, 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계가 처리할 수 있는 온톨로지 형태로 표현하고 이를 컴퓨터가 처리하도록 하는 프레임워크이자 기술이다. 
    • 일반적으로 웹이라고 하면 문서들이 연결된 네트워크이지만 시맨틱 웹은 문서뿐만 아니라 문서들 사이의 의미적 관계를 표현한다. 
    • 이를 통해 검색 엔진이 더 정확한 결과를 제공하거나 데이터를 공유하고 연결하는데 큰 도움이 된다.
    • Semantic Web의 목표: 웹을 하나의 거대한 지식 베이스로 만들어서 유용하게 활용하는 것

 

 

 

참고)

RDF: https://bitnine.tistory.com/46

---

Virtuoso(버투소)

• 오픈 소스 시반의 RDF 데이터베이스 및 SPARQL 쿼리엔진이다. 
• SPARQL 쿼리를 처리하고 RDF 데이터를 효율적으로 저장하고 검색하는데 사용된다. 
• RDF 데이터 뿐만 아니라 XML, Json, HTML 등  다양한 데이터 포맷을 지원한다.

 

---

(진행 예정)

• 다운로드
• 환경 변수 설정
• 관리자 권한으로 cmd 창 열기
  • bin 폴더의 isql을 실행한다.

 

• w3c : https://www.w3.org/TR/skos-reference/#schemes

참고)

https://kwongas.tistory.com/entry/SPARQL-Virtuoso-%EC%84%A4%EC%B9%98-%EC%A0%81%EC%9E%AC-%EC%82%AD%EC%A0%9C

---

title

• con
• con