🌐 fetch · JSP · Spring 연동 완벽 정리

---

⚙️ [ fetch ]

정의: JS에서 제공하는 내장 통신 함수
역할: HTTP 요청을 보내고 응답을 비동기적으로 처리하는 기능 제공

---

🧩 fetch 기본 개념

항목	설명
📘 정의	JS에서 제공하는 비동기 통신 함수
🎯 역할	HTTP 요청을 보내고, 응답을 받아 비동기적으로 처리
🔁 주요 방식	then() 체인 방식 (비동기), async/await 방식 (동기)

---

🚀 1️⃣ 비동기 방식 (then 체인 형식)

const func = () => {
    fetch(URL, option)
        .then(response => response.json())
        .then(data => { 실행문 })
        .catch(error => { 실행문 })
}

💡 fetch가 실행된 후 결과가 오기 전에 다음 코드가 먼저 실행된다.

---

🕹️ 2️⃣ 동기 방식 (async + await 권장)

const func = async () => {
    const response = await fetch(URL, option);
    const data = await response.json();
}

✅ fetch가 실행되고 결과를 기다린 후 다음 코드가 실행된다.

---

📡 주요 구성 요소

항목	설명
🌍 URL	Spring 프로젝트의 Controller 내 @XXXMapping 경로 지정 쿼리스트링 사용 시 백틱() 활용<br>예시: `` /member/info?mid=${mid}` ``
⚙️ option	요청 메소드 및 헤더, 바디 설정
💬 then(response ⇒ response.json())	응답 객체를 JSON으로 변환
📜 then(response ⇒ response.text())	응답 객체를 문자열로 변환 (거의 사용 X)
🧩 then(data ⇒ { 실행문 })	통신 결과를 받아 처리
⚠️ catch(error ⇒ { 실행문 })	통신 중 오류 발생 시 예외 처리

---

🧱 option 예시

메소드	예시 코드
🟢 GET / DELETE	{ method: "GET" }{ method: "DELETE" }
🟠 POST / PUT	{ method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }

---

🔄 [ 동기 vs 비동기 ]

프로그램에서 작업을 처리하는 방식의 차이

구분	처리 방식	특징	예시
⏳ 동기 (Synchronous)	작업을 순차적으로 실행	처리 속도 느림, 무결성 중시	💰 계좌이체 (출금 후 입금)
⚡ 비동기 (Asynchronous)	여러 작업을 동시에 처리	빠르지만 무결성 낮음	💬 채팅, 알림 시스템

---

🧱 [ JSP ]

JSP(Java Server Page)는 HTML 내부에서 Java 코드를 함께 사용할 수 있는 서버 사이드 템플릿 기술

---

📜 JSP 기본 설정 코드

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>

💡 JSP 파일은 최상단에 반드시 선언해야 올바르게 작동한다.

---

🧩 JSP 재사용 (include)

<jsp:include page="JSP 경로"></jsp:include>

✅ 공통 영역(헤더, 푸터 등)을 분리하여 재사용 가능

---

⚙️ [ Spring + JSP 통합 ]

Spring Boot는 JSP를 공식적으로 지원하지 않지만, 설정을 통해 사용 가능하다.

⚠️ 문제점

• Spring 회사에서 공식적으로 JSP 지원 중단
• IntelliJ 무료 버전에서는 자동완성 지원 X
• 👉 HTML 작성 시 VSCode 사용 권장

---

🧭 설치 및 설정 절차 (Gradle 환경)

단계	설명
1️⃣ 의존성 추가	build.gradle 파일에 아래 코드 추가 후 새로고침 (Ctrl + Shift + O)
	gradle : implementation "org.apache.tomcat.embed:tomcat-embed-jasper"
2️⃣ 패키지 구성	src → main → webapp 폴더 생성
3️⃣ JSP 파일 생성	webapp 내 .jsp 파일 작성
4️⃣ JSP 상단 설정 코드 추가	```jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

| 5️⃣ **URL 접근 경로** | `http://localhost:8080/(webapp 이하 경로)` → 예: `http://localhost:8080/test.jsp` |

---