🌐 Fetch · Spring · 프로젝트 설계 정리

---

⚙️ [ Fetch ]

Fetch는 JS에서 제공하는 비동기 통신 함수로, 서버와 데이터를 주고받을 때 사용된다.

🧠 특징

• 함수 선언은 람다식으로 작성한다.
• 데이터 전송 시 JSON 형식을 주로 사용한다.

---

🧾 Fetch 함수 선언 순서

단계	설명	코드 예시
1️⃣ 보낼 데이터 준비	전송할 데이터를 객체 형태로 선언	let data = { "bno": 1, "bcontent": "테스트" };
2️⃣ fetch 옵션 구성	HTTP 메소드, 헤더, 본문(body) 설정	let option =method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }
3️⃣ fetch 실행	서버 통신 요청 및 응답 처리	fetch(URL, option) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));

---

💡 핵심 포인트

항목	설명
🚀 method	"GET", "POST", "PUT", "DELETE" 등 사용
🧱 headers	"Content-Type": "application/json" 설정 필수
📦 body	JSON.stringify(data)로 객체를 문자열로 변환
⚙️ then()	응답을 JSON으로 변환 후 처리
⚠️ catch()	통신 실패 시 예외 처리

---

☕ [ Spring ]

Spring에서의 컨트롤러 구조 및 데이터 처리 방식 정리

어노테이션	설명
🧩 @RestController	@Component(싱글톤 역할) + @Controller + @ResponseBody의 조합
📦 @RequestBody	클라이언트가 보낸 데이터를 Dto 객체로 한 번에 매핑 가능 (매개변수 개별 선언 불필요)

---

💻 예시 코드

@RestController
public class BoardController {

    @PostMapping("/board/write")
    public String write(@RequestBody BoardDto dto) {
        System.out.println(dto);
        return "게시글 등록 완료";
    }
}

const writeBoard = async () => {
    const data = { bno: 1, bcontent: "테스트" };
    const option = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data)
    };
    const response = await fetch("/board/write", option);
    const result = await response.text();
    console.log(result);
}

💡 정리:

• @RequestBody를 사용하면 JS → Spring 간 객체 전달이 단순화됨
• DTO 기반으로 데이터를 한 번에 처리할 수 있어 유지보수 용이

---

🚀 [ 프로젝트 설계 및 개선 방향 ]

권장 방향	설명
🧮 메소드 수보다 질	기능 양보다 API 활용 / 문법 이해에 집중
🧠 문법 중심 개발	상속, 인터페이스, 제네릭 등을 활용해 확장성 있는 코드 작성
💡 아이디어 중심	CRUD 중심이 아닌 창의적 기능 구현 시도
🧩 자동화 지향	반복적인 코드는 자동화 / 모듈화로 단축
🎯 기본기 강화	기능 구현 외에도 문법 응용 및 코드 구조 개선 연습

---