nodejs 서버 // http 서버 차근차근 -3 GET요청(axios)

get요청이 사실 post요청보다 쉬운데 먼저 post를 다룬 이유는

post로 적은 데이터를 서버에서 처리해서 브라우저에 띄워주게 했기 떄문이다.

또한 json으로 내용을 가져왔기에 더욱 복잡해졌다.

 

먼저 front.js코드에 axios요청을 좀 다듬었다

 

document.getElementById("superForm").addEventListener("submit", async (e) => {

  e.preventDefault();

  const message = e.target.superData.value;

  if (!message) {

    return alert('메세지를 입력하세요');

  }

  try {

    await axios.post('/message', { message });

    getMessages();

  } catch (err) {

    console.error(err);

  }

  e.target.superData.value = '';

});

폼에 입력값을 넣고 버튼을 누르면 아래 코드가 실행되는데 차례대로 보자면

 

# e.preventDefault()

얘는그냥 폼 전송해도 페이지 안넘어가는거다.

 

# if (!message){~}

이건 만약 아무것도 안쓰고 전송하면 입력하라고 닥달하는것

 

#await axios.post('/message', {message});

저번에 썼듯이 /message라는 라우터로 message객체화해서 보내는거다.

서버단에서 이렇게 제이슨 형태로 데이터를 받게된다

밑에 서버코드에선 data부분임.

 

 

 

일단 서버쪽 post요청을 조금 더 손보면..

 

    else if (req.method ==='POST'){

        if (req.url === '/message'){

            let body = '';

            req.on('data', (data)=>{

                body += data;

            });

            return req.on('end', ()=>{

                console.log(body, '입력');

                const {message} = JSON.parse(body);

                const id = Date.now();

                messages[id]= message;

                res.writeHead(201, { 'Content-Type': 'text/plain; charset=utf-8' });

                res.end('ok')

            })

        }

    }

먼저 req.url이 message라면 body라는 변수를 정해주고

req.on에서 데이터를 빈 body스트링에 넣어준다.

 

# if(req.url === '/message') {~

만약 '/message' 라우터로 포스트 요청이 들어오면

 

# let body = ''

먼저 빈 문자열인 body를 만들어주고

 

# req.on('data', (data)=>{

body += data

})

받은 데이터가 data인데 이걸 body 라는곳에 더해준다.

body를 쓴 이유는 함수밖에서 이 data를 써야하기 때문

 

# return req.on('end', ()=>{

const message = JSON.parse(body)

})

아까 이런식으로 data를 body안에 넣어줬으니 이건 제이슨형식에 맞다.

따라서 이걸 다시 객체로 만들어주려고 JSON.parse로 한거다.

제이슨은 그냥 스트링이라고 보면됨.

 

# const id = Date.now();

이건 객체 키값을 지금시간으로 정했다 이건 유니코드인가 머시기한 시간설정임.

 

#messages[id]= message;

messages 라는 객체는 코드 제일 밖에 빈객체로 만든거다.

이 객체의 id라는 키값에 message를 넣어줬다. 메세지는 body, 즉 사용자 인풋값을 data로 가져온거임.

 

 

 

 

이제 저번에도 json하면서 서버단에서 제이슨형식을 get하는법을 썼는데 

else if (req.url === '/messages'){

            res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });

            return res.end(JSON.stringify(messages))

        }

messages라는 주소로 가면

아까 messages 라는 객체를 제이슨형식(스트링)으로 바꿔서 보여준다. 

실제로 접속하면 이렇게 아까 넣었던 값들이 들어가있다.

 

 

 

 

이걸 이제 프론트 브라우저에서 보여줘야하는데 front.js로 가서 보자.

아까 프론트 post요청에서

getMessages(); 

이렇게 함수를 하나 적어줬는데 이 함수를 봐야한다.

 

 

async function getMessages() {

  try {

    const res = await axios.get("/messages");

    const messages = res.data;

    const list = document.getElementById("list");

    console.log(res.data)

    list.innerHTML = '';

    Object.keys(messages).map(function (key) {

      const messageDiv = document.createElement("div");

      const span = document.createElement("span");

      span.textContent = messages[key];

      messageDiv.appendChild(span);

      list.appendChild(messageDiv);

      console.log(res.data);

    });

  } catch (err) {

    console.error(err);

  }

}

먼저 /messages라는 url주소에서 받아온걸 res라는 변수에 담아둔다.

res라는 변수를 콘솔에 출력해보면

이렇다네.

여기 data에 들어있는게 바로 우리가 아까 입력했던 데이터다.

 

그리고 이걸 보여주는게  아래코드인데 이건 브라우저쪽 코드를 아직 안배워서 잘모르겠지만

어떻게 돌아가는지는 알것같다.

 

 

내일은 이 코드를 활용해서 직접 원하던 기능을 만들어봐야겠다.