[node.js] axios를 사용한 동적 form 전송

in Study on node.js, Web, 포스코 x 코딩온 풀스택 웹 개발자 부트캠프 8기
[node.js] axios를 사용한 동적 form 전송

axios를 사용해 동적으로 form을 전송해봅니다.


클라이언트가 서버에 요청을 보낼 때도 동기 처리와 비동기 처리가 존재합니다. 서버에 요청을 보낸 뒤 응답이 올 때 까지 대기 하는 경우 동기 처리에 해당하고, 서버에 요청을 보낸 뒤 대기하지 않고 바로 다음 작업을 수행할 경우 비동기 처리에 해당합니다.
axios를 사용해 비동기 HTTP 통신을 수행하여 웹 문서가 실시간으로 변경될 수 있도록 합니다.
먼저 axios를 어떻게 사용하는지 살펴보겠습니다.


1. axios 모듈 설치 / 호출


1

axios를 사용하기 위해서는 ‘npm i axios’ 명령어를 통해 axios 모듈을 설치하거나 cdn을 통해 호출해야 합니다.
위 그림과 같이 cdn 방식으로’<script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script>‘를 ejs 파일의 헤더에 작성해 axios를 사용할 수 있습니다.

2. axios request - get


2

axios를 사용하는 방법은 위 코드와 같습니다.
axios의 매개변수로 객체를 작성합니다. 해당 객체는 정해진 key를 사용하며 위 코드에서 사용된 key는 다음과 같습니다.
method: 해당 요청의 방식을 value로 갖습니다. 요청 방식으로는 GET, POST, PATCH, DELETE 등이 있습니다.
url: 내가 데이터를 보내고자 하는 주소를 value로 갖습니다.
params: get 방식으로 객체를 전송할 때 사용합니다. 전송된 객체는 request의 query가 수신합니다.
위의 axios는 get 방식으로 ‘/resultGet’에게 data 객체를 담아 요청을 전송합니다.

3. get(‘/resultGet’)


3

전송한 요청을 받을 수 있도록 코드를 작성합니다.
get 방식으로 ‘/resultGet’에 요청이 올 경우 해당 요청의 객체를 확인하기 위해 console.log(‘req.query’)로 출력하고 respone을 주도록 작성합니다.
req.query를 data라는 key에 담고 true라는 value를 가진 result key와 함께 respone을 줍니다.

4. axios request - get 결과


4

2번에서 작성한 폼에 정보를 입력한 뒤 버튼을 클릭한 결과 정상적으로 서버에 data 객체가 전달된 것을 확인할 수 있습니다.

5. axios respone 결과


5

axios의 then()을 사용해 요청에 대한 응답이 정상적으로 돌아왔을 때의 코드를 작성할 수 있습니다.
응답을 log로 출력해보면 result와 data 객체를 확인할 수 있습니다.
만약 응답이 정상적으로 도착하지 않았을 때의 동작은 catch()를 사용해 작성할 수 있습니다.

6. axios request - post


6

axios를 사용한 post 방식 request는 위와 같습니다.
json 형태의 data를 전송합니다.

7. post(‘/resultPost’)


7

get 방식으로 요청받을 때와 달리 post 방식으로 요청받을 때 서버는 req.body를 사용해 값을 전달받습니다. 이는 데이터를 쉽게 처리할 수 있도록 도와주는 ‘body-parser’로 express에 내장된 라이브러리입니다.
req.body를 console.log로 출력해 확인할 수 있도록 코드를 작성합니다.

8. axios request - post 결과


8

서버에서 req.body를 확인한 결과 정상적으로 request에 담긴 정보를 출력하는 것을 알 수 있습니다.

© 2022. All rights reserved.