axios 톡신 μ‹œ http μƒνƒœμ½”λ“œ λ°›μ•„μ˜€κΈ°

일간 두더지 νƒˆμΆœκΈ° (λΆ€μ œ. μ‚½μ§ˆ 멈좰!…)
HappyHouse ν”„λ‘œμ νŠΈλ₯Ό μ§„ν–‰ν•˜λ©° λ°œμƒν•œ μ—λŸ¬λ₯Ό μ •λ¦¬ν•©λ‹ˆλ‹€.

ν˜„μž¬ μ§„ν–‰ν•˜λŠ” HappyHouse ν”„λ‘œμ νŠΈλŠ” Spring Boot ν™˜κ²½μ˜ λ°±μ—”λ“œ μ„œλ²„μ™€ vue cli ν™˜κ²½μ˜ ν”„λ‘ νŠΈλ‘œ κ΅¬μ„±λ˜μ–΄ μžˆλ‹€. vue의 강점이라고 μƒκ°ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈ 기반 SPA(Single Page Application) ν”„λ‘œμ νŠΈλ₯Ό μ§„ν–‰ν•˜κΈ° μœ„ν•΄μ„œλŠ” 비동기 톡신이 ν•„μˆ˜μ μΈλ°, 이 λ•Œ axiosλ₯Ό μ“΄λ‹€.

JQuery 라이브러리둜 ν”„λ‘ νŠΈλ₯Ό λ§Œλ“€ 땐 ajax둜 ν†΅μ‹ ν–ˆμ§€λ§Œ, vueμ—μ„œλŠ” axiosλ₯Ό κ°•λ ₯ ꢌμž₯ν•˜κ³  있기 λ•Œλ¬Έμ— ν˜„μž¬ ν”„λ‘œμ νŠΈλ‘œ axios둜 ν†΅μ‹ ν•˜λ„λ‘ κ΅¬ν˜„ν•˜κ³  μžˆλ‹€.

SPA ν”„λ‘œμ νŠΈμ—μ„œ 비동기 톡신과 ν•¨κ»˜ λ”°λΌμ˜€λŠ” 짝ꢁ이 μžˆλŠ”λ°, λ°”λ‘œ REST API이닀. REST API에 λŒ€ν•΄ μ•„λŠ” 것을 μ•„μ£Ό κ°„λ‹¨ν•˜κ²Œ λ§ν•˜λ©΄ ν΄λΌμ΄μ–ΈνŠΈμ˜ μš”μ²­μ— λ”°λ₯Έ 응닡을 λ°μ΄ν„°λ‘œ μ „μ†‘ν•˜λŠ” 방식이닀. HTTP URI을 톡해 μžμ›(데이터)을 μ •μ˜ν•˜κ³ , HTTP methodλ₯Ό 톡해 μžμ›(데이터)에 λŒ€ν•œ ν–‰μœ„λ₯Ό μ •μ˜ν•˜μ—¬ μš”μ²­κ³Ό 응닡을 μ£Όκ³  λ°›λŠ”λ‹€.

RESTfulν•˜κ²Œ 데이터λ₯Ό ν†΅μ‹ ν•œλ‹€λ©΄ 더 이상 μ„œλ²„λ‹¨μ—μ„œ ν™”λ©΄(λ·°)을 μ œμ–΄ν•˜κ±°λ‚˜ 제곡(jsp 방식)ν•˜μ§€ μ•Šμ•„λ„ 되고, 화면은 ν”„λ‘ νŠΈλ‹¨μ˜ 정적 λ¦¬μ†ŒμŠ€(css, html, js)만으둜 κ΅¬μ„±ν•˜μ—¬ ν”„λ‘ νŠΈμ™€ λ°±, ν™”λ©΄κ³Ό λ‘œμ§μ„ μ™„λ²½ν•˜κ²Œ 뢄리할 수 μžˆλ‹€!

λ‹€μ‹œ axios둜 λŒμ•„μ™€μ„œ, μ„œλ²„λ‹¨μ—μ„œ ν΄λΌμ΄μ–ΈνŠΈ μš”μ²­μ— λŒ€ν•œ 둜직 처리λ₯Ό 마치고 응닡을 λ°˜ν™˜ν•  λ•ŒλŠ” 데이터 뿐만 μ•„λ‹ˆλΌ 톡신 과정이 μ–΄λ– ν–ˆλŠ”μ§€λΌλŠ” 의미λ₯Ό 담은 μƒνƒœμ½”λ“œλ₯Ό ν•¨κ»˜ λ°˜ν™˜ν•œλ‹€. 사전에 μ •μ˜ν•΄λ‘” μƒνƒœμ½”λ“œλ₯Ό 톡해 응닡이 잘 μ™”λŠ”μ§€, μš”μ²­ν•˜λŠ” 데이터가 μ‘΄μž¬ν•˜λŠ”μ§€, μ„œλ²„λ‹¨μ—μ„œ λ¬Έμ œκ°€ μžˆμ—ˆλŠ”μ§€ λ“± μ—¬λŸ¬ 성곡/μ—λŸ¬ 상황에 λŒ€ν•œ 이해가 κ°€λŠ₯해진닀. (λˆ„κ΅°κ°€ 무슨 일을 μš”μ²­ν–ˆλŠ”λ° κ·Έλƒ₯ μ•ˆν•˜λŠ” 것보단, μ™œ μ•ˆν–ˆλŠ”μ§€ μ„€λͺ…ν•˜λŠ”κ²Œ μ’‹μœΌλ‹ˆκΉŒ)

λ”°λΌμ„œ μ„œλ²„λ‹¨μ—μ„œ μƒνƒœμ½”λ“œλ₯Ό λ°˜ν™˜ν•˜κ³  ν”„λ‘ νŠΈμ—μ„  이 μƒνƒœμ½”λ“œμ— 따라 λΆ„κΈ°μ²˜λ¦¬λ₯Ό ν•œλ‹€λ©΄ 훨씬 ꡬ쑰적인 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ§Œλ“€ 수 μžˆμ„ 것 κ°™μ•„ μ„œλ²„μ—μ„œλŠ” μƒνƒœμ½”λ“œλ₯Ό ν•¨κ»˜ λ°˜ν™˜ν•˜κ³  μžˆλ‹€. axios ν†΅μ‹ μ˜ ꡬ체적인 κ΅¬ν˜„ 방법을 정리해둔닀.

BackEnd (controller λΆ€λΆ„)

@GetMapping
public ResponseEntity<List<Post>> retrievePosts() {
    List<Post> posts = postService.retrievePosts();
    if (posts.size()!=0) return ResponseEntity.ok(posts);     // 200
    else return ResponseEntity.noContent().build();           // 204
}

μœ„μ™€ 같이 Builder νŒ¨ν„΄μ„ μ΄μš©ν•˜μ—¬ μƒνƒœμ½”λ“œλ₯Ό λ©”μ„œλ“œ ν˜•μ‹μœΌλ‘œ μƒμ„±ν•˜μ—¬ λ°˜ν™˜ν•  수 μžˆλ‹€.

FrontEnd

http
.get("/board")
.then((response) => {
    if (response.status === 200) {
        this.data = response.data;
    } else if (response.status === 204) {
        alert("μ €μž₯된 κ²Œμ‹œκΈ€μ΄ μ—†μŠ΅λ‹ˆλ‹€.");
    }
});

μ΄μ „μ—λŠ” .then(({data}) => { ... } 와 같이 responseμ—μ„œ λ°”λ‘œ dataλ₯Ό κ°€μ Έλ‹€ μΌλŠ”λ°, μƒνƒœμ½”λ“œκΉŒμ§€ ν•¨κ»˜ ν™•μΈν•˜κ³ μ‹Άλ‹€λ©΄ μ€‘κ΄„ν˜Έλ₯Ό λΉΌκ³  μ†Œκ΄„ν˜Έλ‘œ κ΅¬μ„±λœ response λ§€κ°œλ³€μˆ˜λ₯Ό 받아와야 ν•œλ‹€. μ΄λ•Œ 성곡 μ‹œ μƒνƒœμ½”λ“œλŠ” response.status, λ°μ΄ν„°λŠ” response.data둜 확인할 수 μžˆλ‹€.

끗!