[포스코x코딩온] 웹개발자 풀스택 과정 5주차 | 동적 form 전송

구준희·2023년 8월 2일

[포스코X코딩온]

[포스코x코딩온]교육

목록 보기

14/40

동적 Form 전송

form 전송

input type = "submit" 이나 button type="submit"을 이용해 전송
전송 시 페이지 이동이 일어난다.

비동기 HTTP 통신

동기 방식
- 한 번에 하나만 처리 -> 페이지를 아예 이동해 서버가 데이터 처리
비동기 방식
- 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리 가능!
dynamic
- 웹 문서가 정적으로 멈춰있는 것이 아니라 일부 내용이 실시간으로 변경되는 것
- 비동기 HTTP 통신 : 폼의 데이터를 서버와 dynamic하게 송수신 하는 것

비동기 HTTP 통신방법

1. Ajax

Asynchronous Javascript And XML
자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고 받는 비동기 HTTP 통신
XML이란?
- Extensible Markup Language
- HTML과 비슷한 마크업 언어
- HTMl와 달리 정해져 있는 것이 아니라 사용자가 정의해 사용 가능하다.
장점
- JQuery를 통해 쉽게 구현 가능
- Error, Success, Complete의 상태를 통해 실행 흐름을 조절할 수 있다.
단점
- Jquery를 사용해야만 간편하고 호환성이 보장된다.(XML은 복잡함)
- Promise 기반이 아니다.

GET방식

//index.js
app.get('/ajax', (req, res) =>{
    console.log('back', req.query);
    res.send(req.query);
});

//index.ejs
function ajaxGet(){

  console.log('ajax get')
  //폼선택
  const form = document.forms['register'];


  // document.forms로 접근했을 때만 input type = text를 id로만 불러올 수있다.
  // 물론 다른애들은 name으로 불러와야댐
  console.log(form);
  // console.log(form.name.value);
  // console.log(form.gender.value);
  const data = {
    name : form.name.value,
    gender : form.gender.value
  }
  $.ajax({
    type : 'GET', 
    url : '/ajax',  //받는 type만 다르다면 같은 url로 받아도 됨
    data : data,    //키랑 value값이랑 같을 때 data, < 이런식으로만 입력해줘도된다.
    success: (res) =>{
      console.log('res', res);
      resultBox.textContent = `GET /ajax 요청완료 ${res.name}님은 ${res.gender}입니다.`
      resultBox.style.color = 'blue'
    },
  });
}

POST방식

//index.js
app.post('/ajax', (req,res) =>{
    console.log('back', req.body);
    res.send(req.body);
});

//index.ejs
function ajaxPost(){
  console.log('ajax post')
  const form = document.forms['register']
  //예외처리
  if(form.name.value === ''){
    alert('이름을 입력하세요')
    return;
  }
  const data ={
    name: form.name.value,
    gender:form.gender.value
  }
  $.ajax({
    type: 'POST',
    url: '/ajax',
    data : data,
    success: (res) =>{
      console.log('res', res);
      resultBox.textContent = `POST /ajax 요청완료 ${res.name} 님은 ${res.gender}입니다.`
      resultBox.style.color = 'red';
    },
  });
}

2. Axios

Node.js와 브라우저를 위한 Promise API를 활용
비동기 HTTP 통신이 가능, return이 Promise 객체로 온다.
장점
- Promise 기반으로 만들어졌다.
- 브라우저 호환성이 뛰어나다.
단점
- 모듈 설치 or 호출을 해줘야 사용이 가능하다.

GET방식

// index.js
app.get('/axios', (req, res) =>{
    console.log('back', req.query);
    res.send(req.query);
});

//index.ejs
function axiosGet(){
  console.log('axios get')
  const form = document.forms['register'];
  const data ={
    name: form.name.value,
    gender : form.gender.value,
  };
  axios({
    method: 'GET',
    url: 'axios',
    params: data,
  }).then(res => {
    console.log('res', res)     //ajax는 success로 res 받았는데 axios는 then 뒤에 응답받는다.
    resultBox.textContent = `GET /axios 요청완료! ${res.data.name}님은 ${res.data.gender}입니다.`;
    resultBox.style.color = 'aqua';
    // res는 axios가 만들어준 객체임
  });
}

POST방식

// index.js
app.post('/axios', (req, res) =>{
    console.log('back', req.body);
    res.send(req.body);
});
// index.ejs
async function axiosPost(){
  console.log('axios Post');
  const form = document.forms['register'];
  const data ={
    name: form.name.value,
    gender : form.gender.value,
  };

  const res = await axios({
    method: 'POST',
    url: 'axios',
    data,       //post기 때문에 params를 적어주면 안된다.
  });

  const {name, gender} =res.data  //구조분해할당
  //그럼 밑에 res.data.name으로 안 적고 그냥 name만 적어도 된다.
  resultBox.textContent = `POST /axios 요청 완료! ${name}님은 ${gender}입니다.`
  resultBox.style.color = 'greenyellow'
}

3. Fetch

ES6부터 들어온 Javascript 내장 라이브러리
Promise 기반
장점
- Javascript 내장 라이브러리이므로 별도의 import 필요X
- Promise 기반
단점
- 최신 문법
- Timeout 기능이 없다.
- 상대적으로 Axios에 비해 기능 부족

GET방식

app.get('/fetch', (req, res) =>{
    console.log('back', req.query);
    res.send(req.query);
})

//index.ejs
function fetchGet(){
  console.log('fetch Get');
  // fetch는 객체를 만들 필요는 없음
  const form = document.forms['register']
  const url = `?name=${form.name.value}&gender=${form.gender.value}`
  fetch(`/fetch${url}`, {
    method : 'GET'
  }).then(res =>{
    //JSON응답을 네이티브 자바스크립트 객체로 파싱
    console.log('res', res);

    //return으로 밑에 json 객체를 밑에 then에 넘겨준다.
    return res.json()
  }).then(data =>{
    console.log('data',data);
    resultBox.textContent = `GEt /fetch 요청 완료! ${data.name}님은 ${data.gender}입니다.`
    resultBox.style.color = 'orange'
  });
}

POST 방식

//index.js
app.post('/fetch', (req, res)=>{
    console.log('back', req.body);
    res.send(req.body);
})

//index.ejs
function fetchPost(){
  console.log('fetch post')
  const form = document.forms['register']
  const data = {
    name : form.name.value,
    gender : form.gender.value,
  };
  fetch('/fetch', {
    method: 'POST',
    headers :{
      'Content-Type' : 'application/json'
    },
    body:JSON.stringify(data)
    //JSON.stringify() : 자바스크립트 객체를 JSON 텍스트로 변환 -> key,value 가 스트링형태로 바뀜
    //JSON.parse(): JSON형식의 텍스트를 자바스크립트 객체로 변환

  }).then(res =>{
    console.log('res', res);
    return res.json();
  }).then(data =>{
    console.log('data', data);
    resultBox.textContent = `post /fetch 요청 완료! ${data.name}님은 ${data.gender}입니다.`
    resultBox.style.color = 'hotpink'
  });
}

3.1 Fetch - response

response에는 Promise를 기반으로 하는 다양한 메서드(함수) 존재. 이 메서드들을 사용한다면 다양한 형태의 응답 처리 가능
response.text() : 응답을 읽고 텍스트를 반환
response.json() : 응답을 JSON 형태로 파싱(실제로 확인해보면 javascript 객체 형태로 반환

response.text() response.json()

Axios

1. Axios문법 - 요청

axios({
  url : '통신하고자 하는 주소',
  method : '통신하고자 하는 방식',
  data: {json 형태의 보내고자 하는 데이터}
});

url
- form 에서의 action에 해당한다.
- 내가 데이터를 보내고자 하는 주소
method
- 기본(default)값은 get
- get,post,patch,delete가 있음
params
- GET 방식으로 보낼 때 ? 뒤에 객체로 보내는 것
- {key:value, key:value}로 작성한다.
- Request의 query가 받는다.(req.query 이거 말하는거임)
- Params 값을 안 보낼거면 url 자체를 쿼리스트링으로 보내도된다.
  ex) http://~~~?key=value&key=value 이런식으로

2. Axios문법 - 응답

axios({
  method: 'POST'
  url : '/axios',
  data : data
}.then((response) =>{
  response.data
  response.status
  response.statusText
  response.headers
  response.config
});

response.data : 서버가 제공한 응답(데이터)
response.status : 서버 응답의 HTTP 상태 코드, 성공이면 200
response.headers : 서버가 응답한 헤더