post 방식을 이용한 정보 전달 (body-parser )

get 방식에 이어서 post 방식으로 서버에 정보를 전달해야 하는데... 큰 문제가 생겼다.....

위처럼 bodyParser가 사용되지 않는 함수라고 해서.. 음.. 그래도 실행은 되지 않을까?? 했는데..

역시나 오류가 발생했다,, 

 

이번에도 공식 문서를 들어가보니..

이런 식으로 바뀌어 있었다!! 근데 이 코드 활용해서 해결하려 했더니... 잘 모르는 상태에서 코드 쳐서 하니까 해결이 안된다..ㅠㅠ

 

일단 '미들웨어'라는 개념을 새로 알게 됐는데

 

미들웨어: 컴퓨터 제작 회사가 사용자의 특정한 요구대로 만들어 제공하는 프로그램으로, 운영 체제와 응용 소프트웨어의 중간에서 조정과 중개의 역할을 수행하는 소프트웨어

(= sw계의 풀 glue 같은 존재)

(미들웨어 유형도 여러가지던데.. 지금 난 오류 해결하기 급급해서 다음 기회에,,)

 

app.use()는 미들웨어 기능을 마운트하거나 지정된 경로에 마운트하는 데 사용된다. 마운트는 또 뭐여...

(마운트:  컴퓨터 과학에서 저장 장치에 접근할 수 있는 경로를 디렉터리 구조에 편입시키는 작업 이라고 하네요..)

body-parsing 같은 미들웨어를 쓰려면,

 

app.use(express.json())  => json 타입 마운트 (=쉽게 말해서 그냥 json 형태를 가져온다)

 

app.use(express.urlencoded({extended:true}) => url 문자열을 마운트(*urlencoded:  url을 이용하여 데이터를 전송하고자 할 때 URL로 인코딩한 문자열을 반환)

 

위의 두 줄처럼 마운트 작업이 필요하다!

 

 

---

그래서 결국 어떻게 해결했냐면...

일단 bodyParser 관련된 건 다 치워버리고.. 

(++ 예전에는 body parsing 모듈을 따로 불러와야 했다면 4.16 버전부터는 express 안에 내장된 모듈이라서 bodyParser 함수를 쓰지 않아도 되는거였다..!)

공식문서처럼 두 줄을 새로 써줬다. 그런데!! extended: true 로 공식문서처럼 썼더니 로딩만 되고 실행이 안되어서 1시간 동안 서치+서치+서치+서치 를 한 결과(진짜 stackoverflow 뒤지고 난리남) extended: false 로 바꾸었더니 거짓말처럼 해결됨.....

 

그렇다면 extended <-- 이 옵션은 대체 뭘까?? 

https://velog.io/@hyunju-song/body-parser%EC%9D%98-urlencoded%EB%8A%94-%EB%8F%84%EB%8C%80%EC%B2%B4-%EC%96%B4%EB%96%A4-%EC%97%AD%ED%95%A0%EC%9D%84-%ED%95%98%EB%8A%94-%EA%B1%B8%EA%B9%8C

body-parser의 urlencoded는 도대체 어떤 역할을 하는 걸까?

감사하게도 위 글을 참고하여 해결하였는데,

'extended: true 이면 객체 형태로 전달된 데이터 내에서 또다른 중첩된 객체를 허용한다는 말이며, false인 경우에는 허용하지 않는다.'

이게 머선 소리고? 하니..

 

js 는 데이터를 '객체 형태'로 주고 받는다. 라는 사실을 알아야 한다. 그래서 객체 안에 객체가 또 있으면 그거를 parsing하는 작업을 거쳐야 한다고 한다..!

 

또 하나.. extended: true 이면 아래와 같이 npm qs 를 설치해야 한다.

$npm install qs

그래야만 extended, 말그대로 확장된 형태로 bodyParsing 미들웨어를 사용할 수 있는 것이다. 

결국 qs 를 설치 안해서 에러가 난 것..ㅠㅠ

 

그럼 qs 는 또 뭔지?? (qs-> 추가적인 보안기능이 있는 모듈 이라고 하네요...!)

 

qs 설치하고 extended: false 로 바꾸었더니 또 실행이 잘되었다!!! (글쓴이 님 감사해요 흑흑)

 

post 방식

 

실행 결과

 

아.....이걸 오전 내내 해결하고 있었다니........... 눈물

그치만 오류 안났으면 코드 하나하나 함수 하나하나 무슨 의미인지도 모르고 그냥 코드 따라치거나 복붙했을 것 같다. 그럼 머리 속에 남는 거 하나 없었겠지.. 오늘도 에러 +1 적립 성공~