📌 RESTful API와 Axios 비동기 요청 실습 + 동기/비동기 개념 정리

📅 날짜

2025-04-28

---

📝 학습 내용

1️⃣ RESTful API와 Axios 소개

• RESTful API: HTTP 메서드(GET, POST, PUT, DELETE 등)를 활용해 자원을 관리하는 아키텍처 스타일.
• Axios: Promise 기반의 JavaScript HTTP 클라이언트로, 비동기 통신을 쉽게 구현할 수 있음.
• 이번 실습에서는 JSP 페이지에서 Axios를 이용해 RESTful API를 호출하는 과정을 학습.

---

2️⃣ Axios 비동기 요청 실습

✅ GET 요청 (조회)

• 서버에 데이터를 요청할 때 사용. 파라미터는 URL에 쿼리스트링으로 전달.

axios.get(projectPath + "/rest/memo/add?id=" + form.id.value + "&text=" + form.text.value)
     .then(resp => console.log(resp))
     .catch(err => console.log(err));

---

✅ POST 요청 (등록)

• 데이터를 JSON 형식으로 서버에 전달.

const headers = { 'Content-Type': 'application/json' };
const param = { "id": form.id.value, "text": form.text.value };

axios.post(projectPath + "/rest/memo/post", param, headers)
     .then(resp => console.log(resp))
     .catch(err => console.log(err));

---

✅ PUT 요청 (전체 수정)

• 리소스를 전체 수정할 때 사용.

axios.put(projectPath + "/rest/memo/put2/" + form.id.value + "/" + form.text.value)
     .then(resp => console.log(resp))
     .catch(err => console.log(err));

---

✅ DELETE 요청 (삭제)

• 특정 리소스를 삭제할 때 사용.

axios.delete(projectPath + "/memo/remove/" + form.id.value)
     .then(resp => console.log(resp))
     .catch(err => console.log(err));

---

3️⃣ 동기(Synchronous) vs 비동기(Asynchronous) 통신

✅ 개념 정리

• 동기(Synchronous) 요청 → 응답이 올 때까지 대기 후 다음 작업 수행.
  • 예시: 기본 HTML Form 제출, 페이지 이동
• 비동기(Asynchronous) 요청 후 대기하지 않고 다음 작업 수행, 응답이 오면 별도로 처리.
  • 예시: Ajax, Fetch, Axios 등

🔹 비교 표

구분	동기(Sync)	비동기(Async)
처리 방식	요청 후 응답까지 대기	요청 후 바로 다음 작업
사용자 경험	페이지 새로고침 발생	페이지 유지
대표 예시	HTML Form, 기본 GET	Ajax, Fetch, Axios
장점	구현이 단순	빠른 응답, UX 향상
단점	대기 시간 발생	복잡한 로직 가능성

---

4️⃣ Spring RestController 구현

@RestController
@Slf4j
@RequestMapping("/rest/memo")
public class MemoRestController {
    @Autowired
    private MemoServiceImpl memoService;

    @GetMapping("/getAll")
    public List<MemoDto> getAll() { ... }

    @GetMapping("/get/{id}")
    public ResponseEntity<MemoDto> get(@PathVariable int id) { ... }

    @PostMapping("/post")
    public void add(@RequestBody MemoDto dto) throws SQLException { ... }

    @PutMapping("/put/{id}/{text}")
    public void put(MemoDto dto) { ... }

    @PutMapping("/put2")
    public void put2(@RequestBody MemoDto dto) { ... }

    @PatchMapping("/patch/{id}/{text}")
    public void patch(MemoDto dto) { ... }

    @DeleteMapping("/remove/{id}")
    public void remove(@PathVariable int id) { ... }
}

---

🔥 정리

• RESTful API의 HTTP 메서드 활용법 숙지
• Axios를 사용한 비동기 통신으로 서버와 효율적으로 데이터 교환
• 동기 vs 비동기 개념을 명확히 이해
• 클라이언트(JSP)와 서버(Spring RestController) 간 연동 구조 실습

---

🔗 참고 자료

• Axios 공식 문서
• RESTful API 디자인 가이드
• 동기와 비동기 이해하기 - MDN
• Spring @RestController 가이드

---