[Node.js]body-parser 미들웨어의 urlencoded( )의 역할

전문적인 정보를 다루는 것이 아닌 개인적으로 학습한 내용에 대해

포스팅을 했기 때문에 이점을 감안하여 봐주시면 감사하겠습니다👏

 

코드 리뷰를 진행하는 과정에서 urlencoded이 어떻게 사용되는지에 대한 질문을 받았었습니다.

body-parser와 연관이 있는 것 같았지만, 책에 나온 그대로 따라 사용했었는데 정확히 쓰임새를 알지 못하고 정확한 정답을 제시하지 못하였던 것 같아, 이번 기회에 찾아보았습니다.

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

 

우선 위 코드가 정확히 왜 사용되는지 알려면 데이터가 어떤 방식으로 인코딩 되는지 알아야합니다.

 

인코딩 방식

POST 방식으로 요청을 하게 되면, Header 필드에는 body안의 데이터가 어떤 형식의 인코딩 방법을 썼는지가 명시 되어있습니다. 그 인코딩 방법 중 하나가 바로 application/x-www-form-urlencoded 라는 방식입니다.

보통 Login 처럼 어떤 문자열을 입력하는 양식이라면 일반적으로 application/x-www-form-urlencoded 인코딩 방식을 사용합니다.

 

application/x-www-form-urlencoded 인코딩 방식이란?

데이터를 "key: value" 와 같은 형태로 만들어 주는 방식입니다. 

body-parser

우선 body-parser란 요청의 본문에 있는 데이터를 해석해서 req.body 객체로 만들어주는 미들웨어 입니다. 보통 form 데이터나 AJAX 요청의 데이터를 처리합니다. 단, 멀티파트(이미지, 동영상, 파일) 데이터는 처리하지 못합니다. 멀티파트 데이터는 multer 모듈을 사용하면 됩니다.

 

body-parser 미들웨어는 다음과 같이 사용합니다.

app.use(express.json());

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

이전에는 body-parser를 설치하여 사용하였지만, 익스프레스 4.16.0 버전부터 body-parser 미들웨어의 일부 기능이 익스프레스에 내장되어서 따로 설치할 필요는 없다고 합니다.

 

JSON은 JSON 형식의 데이터 전달 방식이고, URL-encoded는 주소 형식으로 데이터를 보내는 방식입니다. 폼 전송은 URL-encoded 방식을 주로 사용합니다. urlencoded 메서드를 보면 { extended: false }라는 옵션이 들어 있습니다. 이 옵션이 false면 노드의 querystring 모듈을 사용하여 쿼리스트링을 해석하고, true면 qs 모듈을 사용하여 쿼리스트링을 해석합니다. qs 모듈은 내장 모듈이 아니라 npm 패키지 이며, querystring 모듈의 기능을 좀 더 확장한 모듈이라고 합니다.

 

다시 정리해서 얘기하자면 예를 들어, JSON 형식으로 { name: 'kchmin', book: 'nodejs' } 를 본문으로 보낸다면 req.body에 그대로 들어가게 됩니다. URL-encoded 형식으로 name = kchmin&book=nodejs를 본문으로 보낸다면

req.body에 { name: 'kchmin', book: 'nodejs' } 가 들어갑니다.

 

 

    app.use(express.urlencoded({extended: false}));

위에서는 옵션값이 true였지만, false부터 먼저 얘기하자면 

application/x-www-form-urlencoded 방식이면 -> false

application/x-www-form-urlencoded 방식이 아닌 다른 인코딩 방식이라면 -> true 를 넣어주면 됩니다.

 

 

• 참고

- zerocho 님의 ' Node.js 교과서 '