nodejs 서버 // http 서버 차근차근 -2 POST요청(axios)

먼저 post요청이 무엇인지 대충 적어보면

클라이언트단에서 서버에 특정 데이터를 보내는 것이다.

get요청은 서버에서 클라이언트에게 데이터를 보내는것이니 반대기능이다.

 

먼저 사용자가 보낼 데이터를 입력할 폼과인풋을 html에 만들어주자.

 

    <form id="superForm">

        <input type="text" id="superData">

        <button type="submit">등록</button>

    </form>

그럼 브라우저에선 이렇게 보인다.

 

 

간단하게 걍 인풋에다가 뭘 적고 등록버튼을 누르면 보낼 수 있다.

여기서 중요한건 폼태그와 인풋에다가 id값을 정해줘야한다.

난 superForm, superData로 정해줬다. 여기선 버튼눌러도 설정해둔게 없어서 아무반응이 없다.

 

 

 

#1 프론트 js에서 인풋데이터 받기

이제 front단 js파일을 손봐야한다.

 

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

  e.preventDefault();

  console.log(e)

  console.log(e.target.superData)

  console.log(e.target.superData.value)

});

먼저 첫줄은 superForm안에있는 submit버튼을 누르면이라는 뜻이다.

그다음 e를 보내는 콜백함수를 실행할건데

e는 그냥 클라이언트단에서 브라우저로 보낸 요청이라고 보면 된다.

먼저 e.preventDafault()메서드는 그냥 페이지 새로고침 안되게해주는거다.

 

첫번쨰로는 e를 출력해보면 클래스로 만들어진 객체 전체가 뜨는데 존나 많이뜬다.

그 안에 target키값의 벨류에는 우리가 만들어놓은 폼안의 인풋들이 들어있는데

여기서 바로 superData를 찾을 수 있다. 출력해보면

 

이렇게 우리가 아까 적은 인풋값이 들어있다.

 

또 마지막에 value를 적어주면 클라이언트가 인풋에 적은내용을 프론트단에서 가져올 수 있다.

 

대충 응용해서 사용자가 내용을 입력하고 버튼을 누르면 

그게 alert로 뜨게 해보자.

 

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

  e.preventDefault();

  const hola = e.target.superData.value;

  alert(`${hola}라고 입력하셧네용? ㅋㅋ`)

});

걍 hola라는 변수에 인풋값을 받고

그걸 알러트 텍스트로 넣어 보내줬다. 동작엔 이상이 없고...

 

 

 

 

#2 서버에서 인풋 데이터 받아오기

먼저 프론트 js 단에서 코드를 axios코드를 적어줘야한다.

.

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

  e.preventDefault();

  const hola = e.target.superData.value;

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

});

이렇게 적어주고

 

이제 서버단 코드를 보자.

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

        console.log('전송')

        console.log(req.method)

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

            console.log(data.toString())

        })

    }

포스트 요청에서 req.on메서드를 실행해주고 data가 버퍼로오길래 toString()메서드 붙여줬다.

 

이렇게 인풋에 적고 등록을 눌러주면

서버 cmd에서 이렇게 객체형식으로 담아와서 보여준다.

 

axios.post('/message', {hola}) 라고 객체 편의문법써서

저렇게 보내주는것 같다.

 

그럼 여기서 /message는 뭘까?

 

post요청 서버코드에서

            console.log(req.url)

으로 적어주면 '/message'를 가져와준다. 따라서 프론트 js단에서 한 form에서 가져온 자료를

url별로 나눌 수 있다. 근데 굳이..이럴거까진 없는것같은데? 

 

라우터라고 하는데 다음포스트에서 axios get을 보면서 해답이 나올듯하다.