Axios로 동적 폼 전송을 구현해보자.
구글 로그인을 할 때 이메일이나 휴대전화를 입력하지 않고 로그인을 했을 때 페이지 이동이 일어나지 않고 경고문이 뜨는 걸 볼 수 있다.
이걸 비동기 HTTP 통신 이라고 하는데 axios를 이용해서 이 비동기 HTTP 통신을 구현해보고자 한다.
비동기 HTTP 통신 방법
비동기 HTTP 통신 방법에는 크게 3가지가 있다.
1. Ajax
2. Axios
3. Fetch
이중에서 나는 가장 많이 사용하는 Axios를 사용해서 구현을 해보았고,
Axios에 대해 알아보고자 한다.
Axios를 이용한 동적 Form 구현
axios를 활용하기 위한 동적 form을 아래와 같이 구현을 했다.
form 요소 내부에 아이디 input과 비밀번호 input을 넣어서 아이디나 비밀번호 값을 입력하지 않고 axiosGet/axiosPost 버튼을 누르면 아이디 or 비밀번호를 입력해달라는 경고창이 뜨도록 하고, 아이디와 비밀번호를 입력하고 버튼을 눌렀을 시에는 입력한 id값으로 환영합니다! 문구를 표시하도록 구현해보았다.
그럼 이제 코드를 살펴보도록 하겠다.
1. express 사용해서 서버 구축
우선 express를 이용해 서버를 구축하고 뷰 템플릿 엔진은 ejs로 설정하고 라우터는 기본 경로인 루트 경로와 axios를 처리할 경로 2개를 설정해 주었다.
// express 모듈 등록
const express = require('express');
const app = express();
const PORT = 8888;
// 뷰 템플릿
app.set('view engine', 'ejs'); // ejs 엔진 설정
app.set('views', './views'); // views 폴더 연결
// 미들웨어 함수 등록
app.use(express.urlencoded({extended:true}));
app.use(express.json());
app.use('/static', express.static(__dirname + '/static'));
// 라우터
app.get('/', (req, res)=>{
// console.log('test');
res.render('dynamic');
});
// axios (GET)
app.get('/axios', (req, res)=>{
console.log(req.query);
res.send(req.query);
})
// axios (POST)
app.post('/axios', (req, res)=>{
console.log(req.body);
res.send(req.body);
})
// 서버 실행
app.listen(PORT, ()=>{
console.log(`Server start!! http://localhost:${PORT}`);
});2. Axios로 동적 폼 전송
아래는 Axios의 GET 요청방식을 사용한 코드이다.
const resultBox = document.querySelector('.msg');
function axiosGet(){
console.log('axiosGet btn');
const form = document.forms['loginForm'];
const data = {
id: form.id.value.trim(),
pw: form.pw.value.trim()
};
console.log('data >> ', data);
if(!data.id){
resultBox.textContent = '아이디를 입력해주세요!';
resultBox.style.color = 'red';
}else if(!data.pw){
resultBox.textContent = '비밀번호를 입력해주세요!';
resultBox.style.color = 'red';
}else{
axios({
method: 'GET',
url: '/axios',
params: data,
}).then((res)=>{
console.log(res);
console.log(res.data);
const {id} = res.data;
resultBox.textContent = `${id}님 환영합니다!`;
resultBox.style.color = 'green';
}).catch((error)=>{
console.log(error);
resultBox.textContent = '알수없는 오류가 발생했습니다. 다시 시도해주세요!'
resultBox.style.color = 'red'
})
}
}- 경고문을 담을 resultBox 변수 생성
- axiosGet() 함수 생성
- 폼 요소를 선택해서 form 변수에 담기
- 서버로 보낼 데이터 양식을 data 변수에 담기
- 유효성검사로 아이디와 비밀번호 입력하지 않았을 시에 경고문 처리
- 아이디와 비밀번호 입력시 axios 비동기 통신 get 요청 실행
💡 알아둘점!
axios GET 요청방식은 params 키를 이용하는데
params 키를 이용하지 않는다면 요청 url에 query string을 작성한다.axios({ method: 'GET', url: '/axios', params: data, // params 키를 이용하는 경우 })axios({ method: 'GET', url: `/axios?id=${form.id.value}$pw=${form.pw.value}`, // params 키를 이용하지 않는 경우 })
아래는 Axios의 POST 요청방식을 사용한 코드이다.
설명은 위 GET 요청방식과 같고 다른점은 data 키에 정보를 실어서 보낸다는 점이다.
(GET 요청이 아닌 요청들은 모두 data 키에 정보를 실어서 보내야 한다.)
function axiosPost(){
console.log('axiosPost btn');
const form = document.forms['loginForm'];
const data = {
id: form.id.value.trim(),
pw: form.pw.value.trim()
};
console.log('data >> ', data);
if(!data.id){
resultBox.textContent = '아이디를 입력해주세요!';
resultBox.style.color = 'red';
}else if(!data.pw){
resultBox.textContent = '비밀번호를 입력해주세요!';
resultBox.style.color = 'red';
}else{
axios({
method: 'POST',
url: '/axios',
data, // data: data, // GET 요청이 아닌 요청들은 모두 data 키에 정보를 실어서 보내야 함
}).then((res)=>{
console.log(res);
console.log(res.data);
const {id} = res.data;
resultBox.textContent = `${id}님 환영합니다!`;
resultBox.style.color = 'gold';
}).catch((error)=>{
console.log(error);
resultBox.textContent = '알수없는 오류가 발생했습니다. 다시 시도해주세요!'
resultBox.style.color = 'red'
})
}
}ajax를 활용한 동적 폼 전송에 대해 알아보았다. 페이지를 이동하지 않고 결과를 보여주는 것에 대해 알아보았는데, 로그인 폼 말고도 어떤 게시물에 댓글을 달면 페이지 이동이 일어나지 않고 바로 대댓글이 달리는 이런 경우도 있고 다양한데 이 방법은 사용자 입장에서 편리한 방법이라고 볼 수 있을 것 같다. 😊
