HTTP 동기 통신

HTTP 통신의 형태는 크게 4파트로 구성되어있다.

 

     1. start-line
     2. Headers
     3. empty line
     4. body

 

이렇게 4파트의 형식을 가진 REQUEST 와 RESPONSES가 서로 통신을 주고 받는걸 HTTP 통신이라고 하는데 각각 어떤 내용을 담고 있는지 확인해 보자

 

 

REQUEST

 

 

1. start line

 

   => request method(GET or POST) 현재 URL HTTP버전

   예시) GET http://localhost:3000 HTTP/1.1

 

 

2.headers

 

헤더는 화면에 꾸며지지 않는 정보들을 담고 있다.

몇가지만 살펴보자

host: 사이트의 도메인 주소(ex: 네이버, 구글)

user-agent: 사이트를 사용하고 있는 user의 정보

content-type: body내용의 데이터 타입을 명시한다. (ex: multipart/formdata)

content-length : ...

 

단 fetch를 사용해서 POST로 정보값을 보낼때는 내용을 직접 입력해줘야한다.

 

예시

 

    let token;
    try {
        token = await axios({
            method: 'POST',
            url: 'https://kauth.kakao.com/oauth/token',
            headers: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            data: qs.stringify({
                grant_type: 'authorization_code',
                client_id: kakao.clientID,
                client_secret: kakao.clientSecret,
                redirectUri: kakao.redirectUri,
                code,
            })
        })
    } catch (err) {
        res.json(err.data)
    }

method, url은 start line에, headers안에 들어있는 데이터는 headers에게 전송한다

 

3. empty line

말그대로 비어있는 한 줄

 

4. body

우리 눈에 보이는 body내용이다.

 

 

RESPONSES

 

1. start line

   => HTTP버전 응답코드 응답내용

   예시) HTTP/1.1 200 OK

   응답코드 종류에 대해서 더 알려면 https://velog.io/@sdc337dc/%EC%9B%B9-%EA%B0%9C%EB%85%90-Http-%ED%86%B5%EC%8B%A0 참고

 

3, 4 는 REQUEST와 동일하다

 

 

아래에 작성된 두가지 코드로 페이지를 가동 시키고 파이어 폭스 브라우저에서 id와 pw값을 입력하고 GET 버튼을 눌러 render된 페이지의 헤더를 살펴보았다.

index.html

 

<h1>GET REQUEST</h1>
<form action="/login" method="get">
    <input type="text" name="userid">
    <input type="password" name="userpw">
    <input type="submit" value="GET"> 
</form>

 

 

server.js

 

const express = require('express');
const nunjucks = require('nunjucks');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({extended:false}));
app.set('view engine','html');
nunjucks.configure('views',{
    express:app,
})

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

app.get('/login',(req,res)=>{
    let {userid,userpw} = req.body;
    console.log(userid,userpw)
    res.send(`GET OK ${userid}/${userpw}`)
});

app.listen(3000,()=>{
    console.log('start')
})

 

처음 랜더한 페이지

 

id와 pw입력한후 get 버튼 눌렀을때

 

 

요청 헤더는 이런식으로 뜬다

 

 

아까 썼던 내용을 확인해 보기 위해서 원시 코드를 확인해봤다.

 

 

여기서 맨 첫번째 줄 GET /login?userid=&userpw= HTTP/1.1은 위에서 말한 start line이다 그 아래로는 header부분이고이 뒤로 빈칸 한줄, body내용이 담긴다.

 

 

응답헤더는 이렇게 뜬다

 

똑같이 원시 코드를 확인해 보면

 

 

 

자 그럼 POST를 이용한 헤더를 확인해 보자

 

코드참고

HTML

 

<h1>POST REQUEST</h1>
<form action="/login" method="post">
    <input type="text" name="userid">
    <input type="password" name="userpw">
    <input type="submit" value="POST">
</form>

 

 

JS

 

const express = require('express');
const nunjucks = require('nunjucks');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({extended:false}));
app.set('view engine','html');
nunjucks.configure('views',{
    express:app,
})

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

app.post('/login',(req,res)=>{
    let {userid,userpw} = req.body;
    console.log(userid,userpw)
    res.setTimeout(3000,()=>{
        res.send(`POST OK ${userid}/${userpw}`)
    });
});

app.listen(3001,()=>{
    console.log('start')
})

 

이번에는 POST를 사용해서 정보를 주고 받아보자.

 

값을 각각 입력하고 POST버튼을 누르면 

 

REQUEST HEADER

 

 

 

RESPONSES HEADER