🔁 Spring · Fetch · JSP 복습 정리

---

🧩 [ 복습 ]

스프링 프로젝트의 구조와 통신 기본 개념을 정리한 내용입니다.

항목	설명
🏁 AppStart 클래스 위치	항상 최상위 패키지에 위치해야 함 → 이유: @SpringBootApplication은 현재 패키지와 하위 패키지만 스캔
🌐 기본 URL	http://localhost:8080/
📦 매개변수 전달 방식	- HTTP 본문: @RequestBody 사용 - 쿼리스트링: @RequestParam 사용

---

☕ [ Spring ]

🧱 [ Spring 정적 파일 구조 ]

HTML, CSS, JS, IMG 등의 정적 파일은 반드시 src → main → resources → static 폴더 내에 위치해야 합니다.

항목	설명
📁 정적 파일 경로	Spring은 static 폴더 내 파일을 정적으로 제공
🚫 식별 불가 예시	다른 폴더에 위치한 HTML/CSS/JS 파일은 인식 불가
🌍 접근 경로 예시	http://localhost:8080/(static 이하 경로) → http://localhost:8080/example/example1.html
🧾 지원 확장자	.html, .css, .js, .png, .jpg, .svg 등

---

🌐 [ Spring + JS 연동 ]

JavaScript와 HTML에서 함수 실행 방식 및 선언 방식 정리

구분	실행 위치	예시 코드
💻 JS 내부 실행	JS 파일 내	func(값1, 값2);
🧱 HTML에서 실행	HTML 마크업 속성	<button onclick='func(값1, 값2)'>실행</button>
⚙️ 람다식 선언	JS 함수 선언	```js

const func = (a, b) => { console.log('func exe'); };
func(10, 20);

---

## 🚀 [ Fetch ]
> Fetch는 외부 주소로부터 요청/응답을 **비동기 통신** 방식으로 처리하는 JS 함수입니다.

### 📦 기본 구조
```js
fetch(URL, option)
    .then(response => response.json())
    .then(data => { 실행문 })
    .catch(error => { 실행문 });

---

⚙️ 구성 요소

구성	설명
🌍 URL	통신할 컨트롤러의 URL 주소 (@RequestMapping 기반)
⚙️ option	HTTP 통신 설정값 (method, headers, body)
🧾 then(response ⇒ response.json())	응답 자료를 JSON 타입으로 변환
💡 then(data ⇒ { 실행문 })	변환된 데이터를 매개변수로 받아 실행
⚠️ catch(error ⇒ { 실행문 })	통신 중 에러 발생 시 예외 처리

---

🧩 option 객체 예시

let option = {
    method: "POST", // "GET", "PUT", "DELETE" 가능
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ key: "value" }) // 전송할 객체를 문자열로 변환
};

---

🧠 Fetch 처리 순서 요약

단계	내용
1️⃣ 요청 전송	fetch(URL, option)으로 서버에 요청
2️⃣ 응답 수신	then(response => response.json())으로 응답 변환
3️⃣ 데이터 처리	then(data => { 실행문 })으로 결과 사용
4️⃣ 오류 처리	catch(error => { 실행문 })으로 예외 처리

---

💬 [ 핵심 요약 ]

✅ Spring + Fetch 정리 핵심 포인트

항목	내용
⚙️ AppStart 위치	항상 최상위 패키지에 위치
🌐 기본 URL	http://localhost:8080/
🧾 매개변수	@RequestBody (HTTP 본문) / @RequestParam (쿼리스트링)
📁 정적파일 경로	resources/static 폴더 내 파일만 인식
⚙️ Fetch 통신	비동기 방식으로 요청/응답 처리
💡 option 설정	method, headers, body 필수 구성

---