본문 바로가기
코딩/NodeJS

nodejs에서 웹으로부터의 요청 처리하기(feat. post)

뱁새의이중장부 2023. 1. 23. 21:20
반응형

post 기억납니까?

 

2023.01.19 - [코딩/NodeJS] - 백엔드 공부를 위한 NodeJS 알아보기 + 설치

 

백엔드 공부를 위한 NodeJS 알아보기 + 설치

개발자가 되고 싶은 사람이라면 프론트엔드와 백엔드라는 단어를 들어봤을 건데 궁금해서 나무위키를 찾아보면 '백엔드는 DB와 API 서버 개발을 맡는다'라고 적혀있음 여기서 DB는 데이터베이스

bebutae.tistory.com

여기서 get이랑 post이야기 한적이 있음

 

귀찮은 사람들을 위해 간단히 설명하자면

get은 서버에 읽기 요청을 하는 것

post는 서버에 쓰기 요청을 하는 것

 

자 그래서 일단 서버에 form을 갖고있는 html파일을 띄워봅시다

참고로 form에 정보를 입력하고, 서버로 전송할거라서 form을 넣은거임

하나더 참고로 나는 html 파일 명을 main.html로 했음

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Bebsae</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
          </ul>
        </div>
        </nav>
        <div>
            <!--
                form 태그에 넣은 action="/add" method="POST"는
                버튼을 눌렀을 때 form에 있는 내용을 서버로 전달해주는 옵션
                GET 요청을 하고 싶으면 method를 GET으로 바꾸면 됨
                /add는 POST요청을 할 경로임
                위 코드에서는 폼에 작성한 내용을 /add 경로로 전달함
            -->
            <form style="margin: 20px" action="/add" method="POST">
                <div class="form-group">
                  <label for="exampleInputEmail1">할일</label>
                  <input class="form-control" aria-describedby="emailHelp">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">duedate</label>
                  <input class="form-control">
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>
        </div>
      
     

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

주석에도 적혀있지만 form태그에

action="경로" method="POST"

이게 들어가있어야 함

 

server.js 파일에는 이걸 넣어주세요

// express로 서버 만들기 기본 셋팅
const express = require("express");
const app = express();

// listen(서버 띄울 포트번호, 띄운 후 실행할 코드)
app.listen(8080, function () {
    console.log("서버 실행 중");
});

// get('경로', 함수)
// function(요청, 응답)
// html파일 띄우는 소스
app.get("/", function (req, res) {
    res.sendFile(__dirname + "/main.html");
});

// POST요청을 처리하는 소스
app.post("/add", function (req, res) {
    res.send('전송완료');
});

여기까지 읽고 뭔소린가 싶다면

2023.01.20 - [코딩/NodeJS] - NodeJS로 서버 만들고 실행해보기

 

NodeJS로 서버 만들고 실행해보기

서버 뭔가 거창하고 어려울 것 같은데 우린 이미 지난 포스팅에서 준비를 다함 2023.01.19 - [코딩/NodeJS] - 백엔드 공부를 위한 NodeJS 알아보기 + 설치 백엔드 공부를 위한 NodeJS 알아보기 + 설치 개발

bebutae.tistory.com

이걸 참고하시길, 시리즈로 작성중임

암튼 저대로 다 복붙하고 서버 돌리면 이런 화면이 뜸

 

여기서 Submit 버튼 누르면

 이렇게 전송완료 라는 글자가 앙증맞게 띄워짐

 

아 근데 우리가 form을 만들었는데

form 내용도 좀 보고싶지 않음??

 

서버 끄시고

npm install body-parser

 터미널에 위 명령어 입력해서 body parser설치합시다

이게 있어야 편하게 form 내용 가져올 수 있음

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}));

설치 끝났으면 server.js파일 최상단에 이거 작성하세요

// express로 서버 만들기 기본 셋팅
const express = require("express");
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}));

이전에 이미 작성해둔 코드가 있으니깐 이렇게 작성하면 됨

 

그담에 다시 html파일로 가서

할일 input 태그 안에 name="title" 이라고 입력하세요

duedate input 태그 안에는 name="date" 라고 쓰면 됨

 

이걸 적어야 서버가 어느 form에서 데이터 가져오면 되는 건지 분간을 할 수 있음

 

// POST요청을 처리하는 소스
app.post("/add", function (req, res) {
    res.send('전송완료');
    console.log(req.body.title);
    console.log(req.body.date);
});

자 이제 위 코드를 server.js에 추가합니다

 

서버 재시작시키면 수정된 코드가 적용될거고

form에 내용 적고 submit 버튼 누르면

터미널에 해당 내용 출력됨

이렇게 되는겨

 

쉽다쉬워

 

참고로 여러분 회원가입 같은거 할때

웹에다가 회원가입 양식에 맞춰서 ID랑 PW입력하면

DB서버에 ID랑 PW를 POST해서 저장하는 거임

 

그리고 로그인 같은거 할때

웹에다가 로그인 양식에 맞춰서 ID랑 PW입력하면

또 DB서버에 ID랑 PW를 POST하고

DB서버에 해당 ID랑 PW가 있으면 로그인 시켜주는 거임

반응형
저작자표시 비영리 변경금지

'코딩 > NodeJS' 카테고리의 다른 글

nodejs로 mongodb랑 데이터 주고받기  (0) 2023.01.25
nodejs랑 mongodb 연결해보기  (1) 2023.01.24
nodejs로 HTML 파일 띄워보기  (0) 2023.01.22
nodejs 서버 자동으로 껐다 켜주는 Nodemon 설치하기  (0) 2023.01.21
NodeJS로 서버 만들고 실행해보기  (0) 2023.01.20

'코딩/NodeJS' Related Articles

티스토리툴바