코딩/React

WIL #5

AMD만세 2022. 2. 14. 09:50

1. React

 

1) Axios

  • Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.
  • 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다.

 

2) HTTP Methods

클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알리는 수단

 

3) GET

axios.get(url,[,config])	

GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도임. 주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없다.

 

 

4) POST

axios.post("url주소",{
    	data객체
    },[,config])

post 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.

Q. Post는 새로운 리소스를 생성할 때 사용되는데 그러면 언제 POST를 사용하나?

-> 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용한다. Post를 사용하면 주소창에 쿼리스트링이 남지 않기때문에 GET보다 안전하다고 함...

 

5) DELETE

axios.delete(URL,[,config]);

Delete메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.

ex)

axios.delete("/thisisExample/list/30").then(function(response){
    console.log(response);
      }).catch(function(ex){
      throw new Error(ex)
}

 

6) PUT

axios.put(url[, data[, config]])

PUT메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아님.

PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.

 

 

출처: https://velog.io/@zofqofhtltm8015/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%84%9C%EB%B2%84-%ED%86%B5%EC%8B%A0-%ED%95%B4%EB%B3%B4%EA%B8%B0

'코딩 > React' 카테고리의 다른 글

WIL #7  (0) 2022.02.28
WIL #6  (0) 2022.02.20
WIL #4  (0) 2022.02.06
WIL #3 - React 숙련 주  (0) 2022.01.31
1주차 입문 #3 - Props, State(될 때까지 판다.)  (0) 2022.01.27