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

---

목록 선택 삭제 기능 구현  (프론트에서 axios요청으로 백엔드에 컬렉션 데이터 보내기)

• 어떤 리스트에 대한 선택 삭제 기능을 만들려고 한다. 
• 프론트에서 axios  DELETE 요청에서 Java의 List<String>형태로 삭제하려는 ID 리스트를 보내려고 한다. 
  • id=modelA&id=modelB&...와 같은 형태이다. 
  • 지금껏 어떤 데이터를 삭제할 때, @PathVariable을 통해 id를 전달해서 엔티티를 하나씩 삭제하는 방법만 구현해왔다. 그래서 이번에는 여러 개의 데이터를 어떻게 보낼지 고민을 했다. 
  • 특히 @RequestParam과 @RequestBody의 차이점에 대해 정확히 몰라서 더욱 헷갈렸다. 

 

• 프론트
  • list에 map(), join() 을 통해 "id =modelA&id=modelB&... " 와 같은 형태로 이어붙여서 query string을 만들었다. 
  • 이렇게 URL로 HTTP 요청하는 경우, Spring에서는 @RequestParam을 이용해서  List<String>형태로 데이터를 받을 수 있다. 
  • 참고로 apiUrls는 '백엔드에 요청을 보낼 API 주소 목록'을 정의한 Json 파일이다. 그 안에 정의한 deleteModelList 의 주소로 HTTP 요청을 보낸다. 
  • ex) "deleteModelList" : "localhost:8080/api/model" 과 같은 식으로 정의되어 있다. 

<hide/>
const deleteRdfPropertyList = () => {

  let list = [];
  for (let model of modelList.value) {
    if (model.deleteCheckBox === true) {
      list.push(model.id);
    }
  }
  if (list.length === 0) {
    alert("삭제할 모델을 선택해주세요.");
    return;
  }
  let deleteYn = confirm("삭제하시겠습니까?");
  if (!deleteYn) {
    return;
  }
  const serializedIds = list
    .map((id) => `id=${id}`)
    .join("&");
  $axios
    .delete(
    `${$apiUrls.deleteModelList}?${serializedIds}`
    )
    .then(() => {
      alert("삭제 완료하였습니다.");
      goToList();
      dialogModify.value = false;
    })
    .catch((err) => {
      console.log(err);
      alert(err.response.data.message);
     }
    }
}

 

• 백엔드(Spring)
  • @RequestParam 적용한다. 
  • Spring 컨트롤러의 메서드 안에는 화면에서 선택한 모델의 id 정보를 List<String> 로 받을 수 있다. 

<hide/>
/** 선택된 model 일괄 삭제 */
@DeleteMapping("/api/model")
public ResponseEntity<HttpStatus> delete(@RequestParam("id") List<String> list){
    service.deleteModelList(list);
    return new ResponseEntity<>(HttpStatus.NO_CONTENT);
}

---

PostgreSQL 배열 데이터 

• PostgreSQL 안에는 _VARCHAR 형태로 필드를 만들면 배열 데이터를 담을 수 있다. 
• 여기에 데이터를 넣고 지우는 방법을 알아보려고 한다. 

 

• UPDATE
  
  • SET 절의  array 안에 새롭게 넣어줄 배열을 정의한다. 
  • 아래와 같이 배열을 통째로 바꿀 수도 있다.
  • 또는 배열의 특정 인덱스 위치에 있는 값만 바꿀 수도 있다. 
  • ex) fruit_arr[1] = "grape"와 같은 식으로 넣을 수 있다.
  • INSERT도 아래와 같은 방식으로 배열 데이터를 넣을 수 있다. 

<hide/>
UPDATE tb_fruitbasket
set fruit_arr = array['grape', 'apple']
where basket_id = 'BSK00001'

 

• SELECT
  • array [] 안에 index를 넣어서 특정 위치에 있는 값만 가져오거나
    • SELECT  fruit_arr[1] 결과:  mango
  • array 를 그대로 가져올 수도 있다. 
    • SELECT fruit_arr 결과:  {mango,grape,apple,banana}
  • 배열 길이: array_length(배열명, 1)
    • cf)  fruit_arr[0] 에 데이터가 없는 경우에, fruit_arr[1] 에만 데이터를 넣으면 배열 길이는?
    • 그래도 length는 1이다. 
    • 또한, fruit_arr를 SELECT 하더라도 NULL인 위치는 생략된다.

<hide/>
select fruit_arr,
    fruit_arr[0],
    fruit_arr[1],
    fruit_arr[2],
    fruit_arr[3],
    fruit_arr[4],
    array_length(fruit_arr, 1) 
from dtmeta.tb_fruitbasket  
where basket_id = 'BSK00001'

 

---

TITLE

• content
• content

---

TITLE

• content
• content

참고) https://sudo-minz.tistory.com/158

 

https://aeliketodo.tistory.com/91