405 Method Not Allowed

☑️ 리액트에서 삭제버튼을 누르니 '405 Method Not Allowed' 오류가 나왔다

[오류화면]

ERROR
Request failed with status code 405
AxiosError: Request failed with status code 405
    at settle (http://localhost:3000/static/js/bundle.js:43409:12)
    at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:42075:66)
    at Axios.request (http://localhost:3000/static/js/bundle.js:42562:41)
    at async deleteUser (http://localhost:3000/main.6bb3839d45305a5ee717.hot-update.js:117:5)

▶해당 오류는 위 오류는 메서드가 맞지 않을 경우, URL 매핑이 맞지 않을 경우 발생한다!

<수정 전 코드>
[리액트 APP.js]
await axios.delete(`/users?id=${id}`);
[Controller.java]
@DeleteMapping("/{id}") //삭제를 진행하기 위해 만나는 주소(api) users/유저번호
     public void deleteUser(@PathVariable int id) {
            userService.deleteUser(id);
     }
 <수정 후 코드>
 [리액트 APP.js]
 awit axios.delete(`/users/${id}`);
 [Controller.java]
 @DeleteMapping("/{id}") //삭제를 진행하기 위해 만나는 주소(api) users/유저번호
     public void deleteUser(@PathVarable("id") int id){
           userService.deleteUser(id);
        }

 

▶ axios 경로에서 ?id값을 빼주고 자바에서 @PathVarable경로에 ("id)를 넣어주니 삭제 기능이 정상적으로 작동 하였다!

 

🔵 여기서 axios와 백엔드의 관계가 궁금해졌다

Axios를 이용한 서버 통신

Axios란 백엔드와 프론트엔드 사이의 통신을 쉽게 하기 위해 사용하는 라이브러리.

: axios는 리액트에서 HTTP요청을 쉽게 수행할 수 있게 해주는 자바스크립트 라이브러리러 axios를 사용하면 

  스프링 부트 백엔드와의 통신을 간편하게 처리할 수 있다.

1. HTTP 요청 전송 : axios는 GET, POST, PUT, DELETE 등 다양한 HTTP 메서드를 사용하여 서버에 요청을 

  보낼 수 있다. 이는 데이트를 가져오거나 서버에 데이터를 보내기 위해 사용된다.

＊여기서 잠깐 http 메서드(웹주소에서 사용되는 기능 명칭)를 정리해본다 ＊

   GET : 서버로부터 데이터를 조회하기 위한 요청    - CRUD 에서는 Read

   GET /users = 모든 사용자 목록을 조회하는 주소

   POST : 클라이언트가 서버에 새로운 데이터를 생성해달라고 요청  - CRUD에서는 Create

   Post/user = 새로운 사용자를 생성 body에 사용자의 정보가 포함돼서 DB에 전송

   PUT : 클라이언트가 서버에 존재하는 데이터를 본인의 취지에 맞게 업데이트 해달라고 요청  - CRUD 에서는 update

   PUT/mypage = 기존에 존재하는 사용자가 자신의 정보를 수정해달라고 서버에 요청 DB가 수정됨

   DELETE = 클라이언트가 서버에 존재하는 데이터를 삭제하기 위한 요청  - CRUD 에서는 DELETE

   DELETE/user/1 = 회원번호가 1인 사용자를 삭제

2. 서버와의 통신 관리

   : 'axios'는 비동기 요청을 쉽게 관리할 수 있도록 도와준다

3. JSON 데이터 처리

 

🔵 더불어 @PathVarable 에 대해 알아보았다

 사용법은 URL 상에서 {}로 감싸여 있는 부분과 동일한 변수명을 사용하는 방법

 메서드 파라미터에 @PathVariable 을 사용하여 URL 경로의 변수를 매핑

[예시]

@GetMApping("/{age}")
public String user(
       @PathVariable(value = "age") String userAge,
       @PathVariable(value = "name") String userName)
      System.out.println("나이는" + userAge);
      System.out.println("이름은" + userName);
           return "index";
         }
       }