[Udemy Vue 완벽가이드 Section12] 154. HTTP요청을 보내는 방법과 보내지 않는 방법

Vue앱 내부에서 Firebase 또는 다른 백엔드와 어떻게 통신할까?

 

# form태그의 submit 이벤트

예전에 우연히 HTTP 요청을 보내는 방법을 봤었다.

<form @submit.prevent="submitSurvey">
  <div class="form-control">
   <!--생략-->
  </div>
  <div>
    <base-button>Submit</base-button>
  </div>
</form>

LearningSurvey에 있는 form에 Submit버튼이 있다.

양식이 submit될때 브라우저 기본 동작을 막아야한다. 그렇게 하지 않으면 HTTP요청이 전송되기 때문

**submit의 브라우저 기본동작 : form데이터를 서버에 전송하고 페이지를 새로고침하는것.

form태그의 submit에 prevent수식어를 잠시 삭제하고 새로고침한 다음, Submit을 클릭하면 새로고침 아이콘이 잠깐 'x'로 바뀌는 것을 볼 수 있다.

이것을 클릭할 때마다 브라우저는 기본 동작을 사용해서 HTTP요청을 보낸다.

 

## 로컬 컴퓨터로의 HTTP 요청

문제는 요청을 백엔드인 Firebase서버로 보내지는 것이 아니라, 이 페이지를 제공하는데 사용된 동일한 주소로 보낸다는 것.

이 경우는 로컬 컴퓨터이고, 로컬 컴퓨터에서는 이 요청을 수신할 코드가 없다.

그래서 이 기본 요청은 무시된다.

 

## Firebase로의 HTTP 요청

그럼 우리의 백엔드인 Firebase로 어떻게 요청을 보낼 수 있을까?

Firebase 서버의 좋은점은 실시간 데이터베이스(Realtime Database)이고, HTTP주소가 있다.

특정형식의 요청을 이 주소로 보내면, Firebase가 데이터를 자동으로 선택하고 데이터베이스에 기록한다.

데이터베이스와 직접 통신하는것처럼 보일 수 있지만 실제로 그렇지 않다.

우리가 보낼 요청을 파싱한 다음, 데이터를 추출해서 데이터베이스에 기록한다. 따라서 우리에게는 데이터베이스와 직접 통신하는것처럼 보이지만 실제로는 그렇지 않다.

 

### Firebase로의 HTTP 요청 보내는 방법

Vue코드 내부에서 요청을 어떻게 보낼 수 있을까?

몇가지 옵션이 있다.

 

1/ Axios

매우 인기있는 JS패키지인 Axios와 같은 서드파티 패키지를 사용해서 JS내부에서 HTTP요청을 보낼 수 있다. 아주 효과적이고 사용하기 쉬워서 사용할만한 옵션.

 

2/ fetch 메서드

또는, 브라우저에도 HTTP요청을 보낼 수 있는 내장메서드가 있다. → fetch메서드.

데이터를 fetching해서 가져오기만 할 것 같지만, 실제로는 서버로 데이터 전송도 하는 함수이다.

fetch함수는 첫번째 인수로 URL을 취한 다음, URL에서 데이터를 가져오도록 구성하거나 해당 URL로 데이터를 보낼 수 있다.

브라우저에 내장되어 있으니 이번에는 fetch를 사용하자.

 

Axios와 fetch는 둘 다 내부에서 HTTP요청을 보낸다.

즉, 페이지를 새로고침하지 않고, 애플리케이션을 종료하지도, 시작하지도 않는다.

Vue 애플리케이션은 계속 실행되고 HTTP요청은 내부에서 백엔드로 전송된다. 정확히 우리가 구현하려는 동작이다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.