fetch 비동기 처리

1) 화면 열기

컨트롤러:

@GetMapping("/regist")
public void registMenu() {}

반환형이 void면, 요청 경로(/menu/regist)를 뷰 이름으로 간주

2) 카테고리 JSON API

컨트롤러:

    @GetMapping("/regist")
    public void registMenu(){}

    @GetMapping("/category")
    **@ResponseBody**
    // 핸들러 메서드의 반환형이 View Resolver를 무시해야 할 때
    // -> json문자열로 변환
    public List<CategoryDTO> findCategoryList(){
        return menuService.findAllCategory();
    }

regist.html

<body>
<h1>신규 메뉴 등록</h1>
<form action="/menu/regist" method="post">
    <label>메뉴 이름: </label><input type="text" name="menuName"><br>
    <label>메뉴 가격: </label><input type="number" name="menuPrice"><br>
    <label>카테고리: </label>
    **<select name="categoryCode" id="categoryCode">
        <!--
            카테고리 내용을 현재 DB에 있는 
            카테고리 내용으로 보여질 수 있게 
            fetch를 활용한 비동기 처리
        -->
    </select><br>**
    <label>판매 상태: </label>
    <select name="orderableStatus">
        <option value="Y">판매가능</option>
        <option value="N">판매불가</option>
    </select>
    <input type="submit" value="메뉴추가">
</form>

@ResponseBody 덕분에 반환 값이 뷰가 아니라 바디(JSON) 로 나감
Spring Boot의 spring-boot-starter-web에 포함된 Jackson이 List<CategoryDTO>를 JSON 배열로 자동 변환
클라이언트는 이 JSON을 받아 <option>을 동적으로 만듬
사용자가 신규 메뉴 등록 페이지(GET /menu/regist)에 들어가면 HTML <form> 화면이 나옴
그 안에 <select>(카테고리 선택 박스)
이건 DB의 카테고리 데이터를 서버에서 직접 <option>으로 채워 넣는 게 아니다.
대신 JavaScript fetch API를 이용해서 /menu/category 엔드포인트를 비동기 요청(Ajax)으로 호출 → JSON 데이터를 받아서 <option>을 동적으로 만들어 붙임

fetch

스크린샷 2025-09-19 오후 3.10.24.png

regist.html

<script>
    **fetch('/menu/category', {method: "GET"})**
        .then(res => res.json())
        .then(data => {
            const $categoryCode = document.getElementById("categoryCode");
            console.log($categoryCode);

            for(let index in data) {
                if (data[index].categoryCode > 3) {
                    **const $option = document.createElement('option');**
                    $option.value = data[index].categoryCode;
                    $option.textContent = data[index].categoryName;

                    $categoryCode.appendChild($option);
                }
            }
        });
</script>

fetch('/menu/category')

→ 서버의 /menu/category 엔드포인트 호출 (Controller의 findCategoryList() 실행)

→ 이 메서드는 DB에서 카테고리 조회 후 List<CategoryDTO> 반환 → JSON으로 직렬화됨
res.json()

→ 응답 데이터를 JSON 객체로 변환
data

→ JSON 배열

([{"categoryCode":4,"categoryName":"한식","refCategoryCode":null}, ...]).
for문

→ 배열을 순회하면서 categoryCode > 3 조건을 만족하는 데이터만 <option> 생성