fetch함수와 메시지 컨버터, 뷰 리졸버 및 DELETE 메소드 실습

서지우·2023년 7월 31일

Spring Boot

목록 보기

7/18

fetch함수

앞서 자바스크립트를 배우면서 fetch함수에 대해 작성했었다

참고자료
fetch함수에 대해

content type

content-type이란 간단히 말해 보내는 자원의 형식을 명시하기 위해 헤더에 실리는 정보이다.

Content-Type: Application/json

많은 것 중에 위의 Content-Type은 꼭 기억해야한다.

참고자료
content type 개념과 종류에 대해

MVC

아래의 그림을 보면 앞서 실습했던 구조가 눈에 보일 것이다.

(이걸 이해 못하고 있으면 강사님이 다시 시작하라고..ReZero인거지 뭐😂🤢)

DispatcherServlet

디스패처 서블릿의 dispatch는 "보내다"라는 뜻을 가지고 있다.
그리고 이러한 단어를 포함하는 디스패처 서블릿은 HTTP 프로토콜로 들어오는 모든 요청을 가장 먼저 받아 적합한 컨트롤러에 위임해주는 프론트 컨트롤러(Front Controller)라고 정의할 수 있습니다.

Front Controller
주로 서블릿 컨테이너의 제일 앞에서 서버로 들어오는 클라이언트의 모든 요청을 받아서 처리해주는 컨트롤러로써, MVC 구조에서 함께 사용되는 디자인 패턴

Spring MVC는 DispatcherServlet이 등장함에 따라 web.xml의 역할을 상당히 축소시켜주었다.

dispatcher-servlet이 해당 어플리케이션으로 들어오는 모든 요청을 핸들링해주고 공통 작업을 처리면서 상당히 편리하게 이용할 수 있게 되었다.

참고자료
DispatcherServlet에 대해

HTTP 메시지 컨버터란?

JSON 데이터를 HTTP 메시지 바디에서 직접 읽거나 쓰는 경우, HTTP 메시지 컨버터를 사용하면 매우 편리하다!

HTTP 메시지 컨버터란, 요청 본문에서 메시지를 읽어들이거나(@RequestBody), 응답 본문에 메시지를 작성할 때(@ResponseBody) 사용하는 컨버터다.

참고자료
https://yeonyeon.tistory.com/151
https://cs-ssupport.tistory.com/473
https://ojt90902.tistory.com/668

뷰 리졸버(View Resolver)란?

먼저 핸들러 매핑과 핸들러 어댑터를 통해 핸들러를 실행한 이후, 핸들러(컨트롤러)가 처리하고 ModelAndView를 반환한다.

이후 ModelAndView를 알맞은 View로 전달하기 위해 DispatcherServlet에 의해 뷰 리졸버가 호출된다.

즉, 뷰 리졸버는 ModelAndView 객체를 View 영역으로 전달하기 위해 알맞은 View 정보를 설정하는 역할을 한다.

ex) JSP, Thymeleaf, Mustache 등등

참고자료
https://ittrue.tistory.com/237
https://needneo.tistory.com/204

데이터베이스 테이블에서 특정 row가져오기

select * 테이블 where idx = 0;

row를 구분할 수 있는 기본키만 있으면 가져올 수 있음

insert

기본키를 제외한 데이터들을 넣을 수 있음

update

기본키로 데이터를 수정할 수 있음

delete

기본키만으로 삭제가 가능함

DELETE 실습

전 게시물에 이어서 실습한다.

MainControllerApiV1.java

@DeleteMapping을 사용해준다.
PathVariable은 regionsId로 받는다.

    @DeleteMapping("/api/v1/main/{regionsId}")
    public void deleteMainData(@PathVariable Integer regionsId){
        System.out.println("regionsId : " + regionsId);
    }

실행해서 POSTMAN에 들어가서 임시로 "1"을 입력해주고 send를 해준다.
그럼 상태코드 200으로 정상으로 되는 것을 볼 수 있고, 콘솔에서도 1이 출력되는 것을 볼 수 있다.

MainService.java

(필요한 코드부분만 들고 왔다)
null일 경우 에러를 터지게 만들었다.

    private RegionsReposiotory regionsReposiotory;

    public void deleteMainData(Integer regionsId){
        RegionsEntity regionsEntity = regionsReposiotory.findByRegionId(regionsId);

        if (regionsEntity == null) {
            throw new RuntimeException("이미 삭제된 지역입니다.");           
        }

        regionsReposiotory.delete(regionsEntity);   
    }

MainControllerApiV1.java

ResponseDTO를 이용해 message를 출력하게 했다.

    @DeleteMapping("/api/v1/main/{regionsId}")
    public ResponseDTO<Object> deleteMainData(@PathVariable Integer regionsId){
        // System.out.println("regionsId : " + regionsId);

        mainService.deleteMainData(regionsId);

        return ResponseDTO.builder()
        .code(0)
        .message("region 삭제에 성공했습니다.")
        .build();
        
    }

실행해서 POSTMAN에 들어가 아무 지역 번호(테이블에 있는 번호여야 함)를 넣고 send해준다.
그럼 상태코드가 200으로 정상 삭제된 것을 볼 수 있다.

마찬가지로 DB에 들어가서 보면 region_id가 7인 row는 삭제되었다.

개발자가 삭제한 것이기 때문에 유저가 삭제할 수 있도록 해준다.

main.html

삭제를 할 수 있도록 script를 만들었다.
위에 적힌 fetch함수를 이해해야 한다.(아님 그냥 강제로 외우던가)

      const deleteRegion = (regionsId) => {
        const check = confirm(`정말 ${regionsId}번 지역을 삭제하시겠습니까?`);
        if (check) {
          fetch("/api/v1/main/" + regionsId, {
            method: "DELETE",
          })
            .then((response) => response.json())
            .then((result) => {
              alert(result.message);
              if (result.code === 0) {
                location.reload();
              }
            });
        }
      };

html안에 thymeleaf를 이용해 값을 뿌릴 수 있도록 한다.

    <div>
      <ul>
        <li th:each="dto : ${resMainDTOList}">
          <span th:text="${dto.regionsId}"></span>
          <span th:text="${dto.regionName}"></span>
          <span class="regionBtn" th:onclick="deleteRegion([[${dto.regionsId}]])">X</span>
        </li>
      </ul>
    </div>