[새싹x코딩온] 웹 개발자 부트캠프 과정 6주차 회고 | 동적 form 전송

1. 들어가며

• 비동기 HTTP 통신을 이용해서 동적 form 전송 구현해보기

2. Axios 를 이용해서 동적 form 전송 구현하기

form 요소를 이용해서 데이터를 전송하면 페이지 이동이 일어난다.

(form 요소의 action 속성에 지정된 경로로 이동하며 데이터 전송)

그러나 비동기 HTTP 통신을 이용하면 폼의 데이터를 서버와 동적으로 송수신해서 실시간으로 변경된 것을 보여줄 수 있다.

위의 예시처럼 아이디와 비밀번호가 일치하지 않을 때, 페이지가 변경되지 않으면서 동적으로 데이터를 송수신해서 변경된 내용을 보여줄 수 있다.

 

비동기 HTTP 통신 방법

비동기 HTTP 통신 방법에는 크게 3가지가 있으며 아래와 같다.

1. Ajax
2. Axios
3. Fetch

본 포스팅에서는 Axios 를 이용한 동적 form 구현을 다룰 거지만 간단한 이론 정도만 적어놓고자 한다.

 

1. Ajax

Ajax는 Asynchronous JavaScript And XML 의 약자이며 자바스크립트를 이용해 클라이언트와 서버 간에

데이터를 주고 받는 비동기 HTTP 통신이다. 

브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를

동적으로 갱신하는 프로그래밍 방식이다.

 

 

자바스크립트에서는 아래와 같이 인스턴스를 생성해서 변수에 할당해서 사용한다.

const ajax = new XMLHttpRequest();

자바스크립트에서 XML을 사용하는 방법은 다소 복잡하다고 한다. 

그러나 Ajax는 jQuery를 사용하면 간단하게 사용할 수 있다.

jQuery를 이용한 요청 방법은 아래와 같다. 

$.ajax({
    type : 'GET', // get 방식으로 요청을 보냄
    url : '/ajax', // form 태그의 action 역할 -> 요청을 받을 서버 측 경로
    data, 
    success : function(data){ // server 에서 req.query 로 받은 데이터를 여기서 받는다.
        console.log(data);
    }
})

2. Axios

Axios는 Promise기반 HTTP 클라이언트 라이브러리다.

axios 또한 자바스크립트를 이용해 클라이언트와 서버간의 데이터를 주고받는 비동기 HTTP 통신이다.

axios를 이용한 요청 방법은 아래와 같다.

// 지정된 ID를 가진 유저에 대한 요청
axios.get('/user?ID=12345')
.then(function (response) {
// 성공 핸들링
console.log(response);
})
.catch(function (error) {
// 에러 핸들링
console.log(error);
})
.finally(function () {
// 항상 실행되는 영역
});

 

 

axios는 json 파일이나 외부 API를 불러올 때도 자주 사용한다.

 

3. Fetch

fetch 또한 Promise 기반으로 만들어진 비동기 HTTP 통신이다.

ES6 부터 들어온 자바스크립트 내장 라이브러리기 때문에 axios 처럼 별도의 import 는 하지 않아도 된다.

다만 최신 문법이고 axios에 비해 기능이 부족하다.

fetch는 get 요청이 디폴트이므로 post 요청 시, 별도의 속성을 적어줘야 한다. 

fetch를 사용한 방법은 아래와 같다. 

// fetch(`fetch${urlQuery}`, {method : 'GET'})
fetch(`fetch${urlQuery}`).then((res)=>{
    console.log(res);
    return res.json(); 
    // res 객체로부터 json 포맷의 응답을 js obj로 변환 
    // -> axios는 이게 자동인데 얘는 아니라 따로 설정해줘야함
}).then((data)=>{
    console.log(data); // js obj 
})

// fetch POST 요청 시 headers 옵션을 통해 JSON 포맷을 사용한다고 알려줘야함
// => body 에서도 json 형식으로 데이터를 바꾸어 보내야함
fetch(`fetch`, {
    method : 'POST',
    headers : {'Content-Type': 'application/json'},
    body : JSON.stringify(data) // js obj -> json
}).then((res)=>{
    console.log(res);
    return res.json(); 
}).then((data)=>{
    console.log(data); // js obj 
    resultBox.textContent = 
    `POST fetch 요청에 대한 응답 완료 ${data.name}님은 ${data.gender}이시죠?`
    resultBox.style.color = 'hotpink'
})

 

 

Axios를 이용한 동적 form 구현

axios를 활용한 동적 form 구현을 위해 아래와 같이 화면을 구성했다.

form 요소 내부에 이름을 받는 input 과 생년월일을 받는 input 을 넣어주었다.

이름과 생년월일을 작성하지 않고 제출 버튼을 누르면 작성해달라고 표시하고

작성을 하고 제출하면 이름과 생년월일이 밑에 표시되도록 만들었다.

이름을 작성하지 않고 제출 시

생년월일을 입력하지 않고 제출 시

이름과 생년월일 모두 입력하고 제출 시

 

위 화면을 구성하기 위해 express.js 를 이용해서 서버를 만들고 뷰 템플릿 엔진은 ejs 를 사용했다.

코드는 아래와 같다.

// express module 등록
const express = require('express')
const app = express()
const PORT = 8080;

// ejs 엔진 설정
app.set('view engine', 'ejs')
// views 폴더 연결
app.set('views', './views')

// 미들웨어 함수 등록
app.use(express.urlencoded({extended : true}));
app.use(express.json())
app.use(express.static('public'))

app.get('/', (req, res)=>{
    res.render('index')
})

// axios 처리
app.get('/axios', (req, res)=>{
    res.send(req.query)
})

app.listen(PORT, ()=>{
    console.log(PORT);
})

 

axios의 get 요청방식을 사용하였다

요청 코드는 아래와 같다.

const resultBx = document.querySelector(".result")
const btn = document.querySelector("#register button")

btn.addEventListener('click', getAxios)

async function getAxios() {
    // 1. 폼 요소 선택
    const form = document.forms['register']

    // 2. 서버로 보낼 데이터 양식 생성
    const data = {
        name : form.name.value,
        birth : form.birth.value
    }

    // 3. axios 비동기 통신 get
    // 유효성검사
    if(!form.name.checkValidity()){ // 이름을 입력하지 않았을 때
        resultBx.textContent = '이름을 입력하세요'
        resultBx.style.color = 'red'
    } else if(form.birth.value === ''){ // 생년월일을 입력하지 않았을 때
        resultBx.textContent = '생년월일을 입력하세요'
        resultBx.style.color = 'red'
    } else {
        try {
            const waitAxios = await axios({
                method : 'get', // get 요청
                url : '/axios',
                params : data,
            })
            const {name, birth} = waitAxios.data;
            let birthData = birth.split('-')
            resultBx.textContent = 
            `${name}님 환영합니다! 생년월일은 ${birthData[0]}년 ${birthData[1]}월 ${birthData[2]}일 이시군요`
            resultBx.style.color = 'hotpink'
        } catch(err){
            console.error(err);
            resultBx.textContent = '알 수 없는 오류가 발생했습니다. 다시 시도해주세요'
            resultBx.style.color = 'red'
        }
    }
}

 

3. 마치며

페이지를 최대한 이동하지 않고 결과를 보여주는 것이 사용자 입장에선 편리할 것 같다.

예를 들어 메일이 새로 들어왔을 때 보여준다거나 로그인 시 아이디와 비밀번호가 틀렸을 때 결과를 보여주는 것처럼 말이다.

개발자는 계속 사용자 편의성을 추구하며 더 효율적인 방법으로 개발을 고민해야 하는 것 같다.

그리고 그 방법 중 하나를 배워서 뿌듯하다.

사실 로그인의 경우 서버에 이 로그인 정보가 데이터베이스에 있느냐? 를 물어봐야 하지만

아직 그 정도까지는 못해서 아쉽다. 더욱 더 깊이 공부해서 그 정도 수준까지 올라가야겠다.

 

4. Reference

1. 코딩온 강의 자료

 

2. 모던 자바스크립트 Deep Dive

http://product.kyobobook.co.kr/detail/S000001766445?LINK=NVB&NaPm=ct%3Dlwt20us8%7Cci%3D3eeae87413d188962c2189bfc03af972cec288fd%7Ctr%3Dboksl1%7Csn%3D5342564%7Chk%3D0a86971807241e21311b2f82ad997d61e4c24ab4

모던 자바스크립트 Deep Dive | 이웅모 - 교보문고

 

3. https://axios-http.com/kr/docs/example

기본 예제 | Axios Docs