[포스코x코딩온] 풀스택 부트캠프 6주차 정리 1 - form전송, 동적 form 전송

form 전송

front (브라우저)측에서 보낸 form값을 back(서버) 측에서 받는 것.

form의 method 에 따라 서버측에서 받는 방식이 달라진다.

input에서 type을 password라고 잡으면 한글로 입력해도 영어로 자동변환 되니까 알아두자.

GET: GET방식의 경우 form 속성(프론트)에서 action:'/ 경로이름' method='GET'으로 설정 서버측에서 app.get('/경로이름',  function(req, res) { req.query(에 저장.) }) 정보 가져오거나 검색할 때 쓰임. 서버값이나 상태 변경하지 않을 때 쓰임. URL 쿼리 문자열에 데이터를 실어 전송.

POST: POST방식의 경우 form 속성(프론트)에서 action:'/경로이름' method='POST'으로 설정 서버측에서 app.post('/경로이름',  function(req, res) { req.body(에 저장.) }) 무언가를 생성하거나 어떤 정보를 보낼 때 쓰임.  URL보다 많은 데이터를 body에 실어서 전송 가능

// get의 경우
// response라는 이름으로 req.query를 이용하겠다.
app.get('/', function(req,res) {
  res.render('result', {response: req.query})
});

// post의 경우
// response라는 이름으로 req.body를 이용하겠다.
app.post('/', function(req,res) {
  res.render('result', {response: req.body})
});

 

 

body-parser

요청의 body를 해석해서 req.body로 받을 수 있게 도와줌

// urlencode를 이용하겠다. (extended: true는 이외의 확장도 이용하겠다. true라는 뜻.)

app.use(express.urlencoded({ extended: true}));
// json도 이용하겠다. extended: false면 못씀
app.use(express.json());

 

 

*프론트에서도 유효성 검사를 할 수 있지만, 백에서 한 번 더 해주는 것이 좋다.

 

 

---

 

동적 form 전송 (Axios)

*동적 form 전송은 submit을 통해서 자동으로 전송되는 것과 다르게 수동으로 보내고 받아야 한다. 대신 새로고침을 하지 않아도 가져올 수 있다. Axios의 경우 3자 패키지이므로 install하거나 cdn 필수

 

// get 요청 프론트

const btnElement = document.querySelector("button");
      const bodyElement = document.querySelector("body");
      
      btnElement.addEventListener("click", async function () {
        const form = document.forms["form"]; // form이라는 name의 form 태그

        // data라는 객체를 만들고 submit할 내용물 넣기
        //.표기법의 경우 form의 자식인 input의 name도 되고 id도 됨
        const data = {
          name: form.name.value, 
          sex: form.sex.value,
          year: form.year.value,
          month: form.month.value,
          day: form.day.value,
        };
        
        // async await 사용
        const response = await axios({
        // form 태그의 method
          method: "get",
          // form 태그의 action
          url: "/exercise1/axios",
          // submit할 정보들 보내기
          params: data,
        });
        // 제이쿼리를 써서 반환된 promise값(response)을 string화 해서 append하기 
        $("body").append(JSON.stringify(response.data));
      });
      
      
  // get 요청 back
  
  app.get('/exercise1/axios', function(req, res) {
    res.send(req.query);
})

 

 

 

// post 요청 front

const btnElement = document.querySelector('button');
        
        async function post() {
            try {
                const formElement = $('#form')[0]; 
                const data = {
                    id : document.querySelector('#id').value,
                    pw : $('#password')[0].value
                }
                const response = await axios({
                    method: 'post',
                    url: '/exercise2/login',
                    // get과는 다르게 params가 아닌 data이다.
                    data: data
                })
                $('div').html(`<span>${response.data}</span>`);
                $('div').css('color', 'blue');
            }catch(error) {
                $('div').html(`<span>${error.response.data}</span>`);
                $('div').css('color', 'red');
                
        }
    }
    btnElement.addEventListener('click', post);
    
    //post 요청 back
    
    app.post('/exercise2/login', function(req, res) {
    const id = 'aaaa';
    const pw = '1111';
    if (req.body.id === id && req.body.pw === pw) {
        res.send('로그인이 성공했습니다.');
    } else {
        res.status(400).send('로그인이 실패했습니다.');
    }
})

 

동적 form 전송 (fetch)

가장 최근문법으로, get 할때 굉장히 편하다. 또한 내장함수라서 따로 다운로드 받을 필요가 없다.

 

//Get 요청

// back 
app.get('/fetch', function(req, res) {
    console.log(req.query);
    res.json(req.query);
})


// front
async function fetchGet() {
        const form = document.forms['register'];
        const data = {
            name: form.name.value,
            gender: form.gender.value
        }

        // fetch(url, options)
        const response = await fetch(`/fetch?name=${data.name}&gender=${data.gender}`);
        // 응답 (response) 객체로부터 JSON포맷의 응답 전문을 자바스크립트 객체로 변환
        const responseJson = response.json();
            console.log('response>',response)
            // console.log('response.json>',response.json());

            resultBox.textContent =`fetch Get 응답 완료. 당신의 이름은 ${responseJson.name}, 성별은 ${responseJson.gender}`
      }

 

// post

// back
app.post('/fetch', function(req, res) {
    console.log(req.body);
    res.send(req.body);
})

// front

      function fetchPost() {
        const form = document.forms['register'];
        const data = {
            name: form.name.value,
            gender: form.gender.value
        }

        // fetch - post메소드 => options 객체가 반드시 필요함
        fetch('/fetch', {
          // 1. method: post 지정
          // 2. headers: JSON 포맷 사용 선언
          // 3. body: 서버로 보낼 데이터를 담아줌
          method: 'post',
          headers: {'Content-Type' : 'application/json'},
          body: JSON.stringify(data)
          // data: js object
          // JSON.stringify(data): json 형식
        }).then((response) => {
          console.log(response);
          return response.json();
        }).then(function(data) {
          console.log(data);
          resultBox.textContent =`fetch Post 응답 완료. 당신의 이름은 ${data.name}, 성별은 ${data.gender}`
        })
      }

 

res.send와 res.json의 차이점

 

res.send의 경우 인자에 들어간 값에 따라서 알아서 content-type을 처리 해준다. 때문에

'string', 'json' 모두 사용 가능하다.

 

res.json의 경우 json만 사용 가능하다. content-type을 application/JSON으로 고정시키기 때문이다. 다만 객체를 인자에 넣을때는 res.json의 경우가 효율이 더 좋다.

참고: https://haeguri.github.io/2018/12/30/compare-response-json-send-func/