Node.js - express (3) get 요청 , post 요청

 

 

이번 포스팅에서는 웹브라우저가 get 방식 혹은 post 방식으로 데이터를 담아 웹서버에 요청을 보냈을 때 express와 nunjucks를 활용해 이러한 요청들을 처리하는 방법에 대해 다뤄보고자 한다.

 

 

< 목차 >

1. get 방식의 요청과 응답
2. post 방식의 요청과 응답

 

 

 

< get 방식의 요청과 응답 >

웹브라우저에서 웹서버로 요청을 보내는 방식은 크게 get 방식과 post 방식이 있다. get 방식은 URL에 queryString 형태로 데이터를 담아 웹서버에게 요청을 보내는 방식이다. 

 

위와 같은 형태로 express.js 파일과 index.html 파일이 작성되어 있다고 했을 때 app.get( ) 메소드의 콜백함수에게 전달된 req 객체를 이용하면 get 방식으로 요청이 들어왔을 때 queryString에 있는 데이터를 가져와서 html 파일에서 사용할 수 있다. URL과 queryStirng은 ?를 구분자로 해서 그 내용이 나뉘게 되는데 웹브라우저의 주소창에 "localhost:3000/express/?name=bitkunst"를 입력해서 웹서버에게 요청을 보내면 app.get() 메소드의 콜백함수 안에 있는 req 객체를 이용해 queryString으로 전달된 데이터를 받아올 수 있다.

app.get("/express", (req, res)=>{
    let name = req.query.name  // queryString 데이터를 받아오는 구문
    res.render("index.html", {
        user: name
    })
})

req 객체의 query 속성을 이용해 queryString에 있는 name값인 bitkunst를 name 변수에 담았다. 그리고 res.render() 메소드의 두번째 인자값으로 전달된 객체를 이용해 user라는 변수안에 name의 내용을 담아 html 파일에 전달했다. index.html 파일에서는 변수를 넣고자 하는 위치에 {{ user }} 형식으로 넣어주면 아래와 같이 페이지가 랜더되는 것을 확인할 수 있다.

 

이를 통해 queryString으로 전달된 정보의 내용이 바뀜에 따라서 각기 다른 정보를 담고 있는 페이지를 랜더해 줄 수 있다는 사실을 알 수 있다. 또한 queryString에는 여러 데이터들을 담을 수 있는데 이 때 &를 구분자로 해서 내용을 나눌 수 있다. app.get() 메소드 안에 console.log(req.query)를 작성해서 다시 한번 어떠한 내용들이 전달되는지 살펴보자.

 

웹브라우저의 주소창에 "localhost:3000/express/?name=bitkunst&height=180" 을 입력해서 웹서버에게 요청을 보내면 콘솔창에 다음과 같이 출력되는 것을 확인할 수 있다.

 

 

이제 index.html 파일 안에 아래와 같이 <form>엘리먼트를 추가해서 get 방식을 통해 input 박스에 입력한 내용들을 queryString을 이용해 URL에 붙여 전달해 보도록 하자. html 파일에 작성한 <form>엘리먼트에 의해 method="get" 방식으로 "/express" 경로에 input 박스에 입력된 데이터가 전달된다. <form method="get" action="/express">에 의해 input 박스에 작성된 내용들이 queryString 형태로 URL에 붙어서 "/express" 경로로 전달된 것이다.

<form method="get" action="/express">
    <input type="text" name="name">
    <input type="password" name="passwd">
    <input type="submit" value="로그인">
</form>

submit 버튼을 누르는 순간 URL에 queryString이 붙게 되고 내가 입력한 데이터가 queryString을 통해 전달되는 것을 확인할 수 있다.

 

이처럼 queryString을 이용하면 웹서버 입장에서는 html 페이지 하나를 가지고 사용자로부터 어떠한 데이터를 전달받는지에 따라 각기 다른 내용의 데이터를 가지고 웹브라우저에게 내용을 전달할 수 있는 구조가 만들어지는 것이다.

 

하지만 queryString을 이용한 get 방식의 요청은 웹서버에게 전달하는 데이터가 URL 주소창에 너무 노골적으로 드러난다는 것과 URL을 조작해서 내용을 쉽게 바꿀 수 있다는 단점을 가지고 있다. URL을 통해 드러나지 않았으면 하는 데이터들을 전달할 때 사용하는 것이 바로 post 방식의 요청이다.

 

 

 

 

< post 방식의 요청과 응답 >

post 방식의 요청은 URL에 queryString을 붙여서 데이터를 전달하는 get 방식과 달리 HTTP 패킷의 Body 영역에 queryString 형태로 데이터를 담아서 요청을 보내는 방식이다. 

 

index.html 파일 안에 작성한 <form>엘리먼트의 method 속성을 "post" 방식으로 수정하여 요청을 보내보도록 하자.

 

<form method="post" action="/express"> 에 의해 input 박스에 입력된 내용들을 가지고 post 방식으로 서버에게 요청을 보내게 된다. post 방식의 요청은 app.get() 메소드를 이용해서 받을 수 없다. app.get() 메소드는 get 방식의 요청을 받는 메소드이기 때문에 post 방식의 요청을 받기 위해서는 app.post() 메소드를 사용해 줘야만 한다. express.js 파일에 아래의 코드를 추가로 작성하여 post 방식의 요청을 받아보자.

app.post("/express", (req, res)=>{
    res.send("<h1>post 방식의 요청입니다.</h1>")
})

input 박스에 내용을 입력하고 submit 버튼을 누르는 순간 <form>엘리먼트의 action="/express"에 의해 "localhost:3000/express" 페이지로 이동하게 되고 method="post"에 의해 post 방식으로 요청을 보내 웹서버에게 입력한 데이터를 전달한다. express는 app.post() 메소드에 의해 "/express" 경로로 들어온 post 방식의 요청에 대해 응답할 수 있게 되고 res.send("<h1>post 방식의 요청입니다.</h1>") 에 의해 아래와 같은 페이지가 랜더된다.

 

앞서 얘기한 것과 같이 post 방식의 요청은 URL에 queryString을 붙인 형태가 아닌 HTTP 패킷의 Request Body 부분에 queryString 형태로 데이터를 담아서 내용을 전달하게 되는데 해당 내용은 웹브라우저의 개발자도구에서 network 탭을 통해 살펴볼 수 있다.

 

HTTP 패킷의 Request Headers 부분

HTTP 패킷의 Request Body 부분

HTTP 패킷의 Request Headers 부분에는 요청과 관련된 정보가 쓰여있고 Body 부분에는 입력한 데이터가 queryString 형태로 담겨 있는 것을 확인할 수 있다. Body영역에 담겨있는 데이터를 가져오기 위해서는 app.get() 메소드에서 사용한 req.query와 같이 req 객체에 있는 query 속성을 이용해서는 안된다. req 객체에 있는 body 속성을 사용해서 Request Body 영역에 담겨 있는 데이터를 가져와야만 한다. 하지만 req 객체의 body 속성을 사용하기 위해서는 추가적인 작업을 통해 설정해줘야만 하는 부분들이 있다. HTTP 패킷의 Request Body에는 여러 종류의 데이터 타입이 들어갈 수 있기 때문에 어떠한 데이터를 가져오고자 하는지 세팅해주는 작업이라고 보면 된다. req.body 속성을 사용해 Body 영역의 데이터를 가져오기 위한 방법으로는 외부 라이브러리를 이용하는 방법과 express에 내장된 함수를 이용하는 방법이 있다.

 

express.js 파일에 아래와 같은 구문을 추가로 작성해서 post 방식의 요청이 들어왔을 때 Request Body 영역의 데이터를 가져올 수 있도록 하는 세팅 작업을 해줘야만 한다. 이 방법은 express에 내장된 함수를 이용하는 방법이다.

app.use(express.urlencoded({extended: true}))

+) app.use() 메소드는 request method가 get이든 post든 어떤 방식의 요청이든 상관없이 uri만 같으면 요청을 받겠다라는 의미를 가진 메소드이다. 또한 첫번째 인자값으로 URL이 전달되지 않으면 어떤 경로로 요청이 들어오든, 모든 페이지의 요청을 전부 받겠다는 의미이다. 

 

console.log(req.body)를 통해 express가 Body 영역에 담겨있는 데이터를 제대로 가져오고 있다는 것을 확인할 수 있다.

 

 

 

외부 라이브러리를 이용하는 방법은 "body-parser" 라는 패키지를 설치해서 사용하는 방법이다. 터미널 창에 npm install body-parser --save를 입력해 body-parser 패키지를 설치해주자.

 

package.json 파일에 패키지가 추가된 것을 확인했으면 express.js 파일에 아래의 코드를 작성해서 body-parser 모듈을 사용할 수 있게 세팅해주면 된다. 

const bodyParser = require("body-parser")

app.use(bodyParser.urlencoded({extended: true}))

마찬가지로 console.log(req.body)를 통해 express가 body 영역에 담겨있는 데이터를 제대로 가져오고 있다는 것을 확인할 수 있다.

 

 

이상으로 express에서 get 방식의 요청과 post 방식의 요청을 어떻게 처리하고 응답하는지에 대해 살펴보았다.