[nodejs MVC 로그인기능] 11. fetch,bodyparser를 이용해 입력 데이터 서버로 보내기

2023. 7. 14. 19:08· nodejs

지난번까지 해서 login.js파일에 req변수에 입력 id와 pwd를 저장하는 과정을 거쳤다

오늘은 입력값을 서버까지 보내는 것까지 할것이다.

 

원래 데이터를 서버와 주고받을때 서버개발자와 프론트엔드 개발자 사이에 API가 만들어져 있어야 한다.

(API란 프론트개발자와, 백엔드 개발자가 데이터를 동일한 경로로 주고받기 위해 사용하는 약속 이라고 생각하면 된다)

우리는 로그인 화면의 router를 index.js에 만들어 놓긴 했지만, 아이디와 비밀번호를 받는 것까지는 구현이 안되어 있다.

 

 

일단은 , 구현이 되어있다 가정하고 프론트(login.js)에서 데이터를 보낼수 있도록 먼저 수정하겠다.

login.js파일에 JSON형태로 저장되어있는 req 변수를, string으로 바꿔준다.

stringfy함수의 역할을 자세히 보기위해 console로 req를 찍어보자

 

 

서버 실행후 console을 보면 보라색글씨체의 JSON형태와, 스트링형태의 데이터를 확인할수 있다. 

 

 

이제 데이터를 잘 넘겨주기 위해 login.js파일의 코드를 더 수정한다.

fetch함수에서, 내가 넘겨줄 데이터의 정보를 명시해야한다.

method에는 데이터를 넘겨줄방식(get,post)

headers에는 데이터의 형식

body에는 데이터를 명시하게 된다.

 

 

현재 index.js에는 post방식으로 데이터를 받는 API가 만들어지지 않은 상태이다. 

 

POST방식의 API를 추가하기 전에 단순히 화면 렌더링만 담당하는 ctrl.home,login 함수를 조금 변경해주자

컨트롤러(home.ctrl.js)에서 home ,login화면의 render 함수를 ouput객체에 담고,

로그인 버튼을 눌렀을때의 데이터인 req.body를 로그에 출력하는 login 함수를 output변수를 exports해준다

두 변수의 함수는 이름은 같지만 기능과 선언이 다름을 알아두자

 

이제 app.js에서 가져온 데이터를 파싱하기 위해 bodyparser를 선언해야 한다.

먼저 터미널에서 bodyparser를 설치해준다.

npm install body-parser -s

 

 

이제 app.js에서 body-parser 객체를 선언하고

bodyParser.json()으로 미들웨어를 등록해준다.

또 urlencode로 오류를 최소화 한다.

 

 

이제 서버를 실행후 로그인을 클릭하면, 아이디와 비밀번호가 터미널 콘솔창에 출력되는것을 확인할수 있다.

 

 

 

'nodejs' 카테고리의 다른 글

[nodejs MVC 로그인기능] 13. MVC패턴 model 분리  (0) 2023.07.14
[nodejs MVC 로그인기능] 12. 로그인 인증 기능 구현  (0) 2023.07.14
[nodejs MVC 로그인기능] 10. Dom으로 Html 객체 제어  (0) 2023.07.14
[nodejs MVC 로그인기능] 9. 프론트엔드를 위한 JS파일 생성, 미들웨어 등록  (0) 2023.07.14
[nodejs MVC 로그인기능] 8. 디렉토리 구조 최적화  (0) 2023.07.14
'nodejs' 카테고리의 다른 글
  • [nodejs MVC 로그인기능] 13. MVC패턴 model 분리
  • [nodejs MVC 로그인기능] 12. 로그인 인증 기능 구현
  • [nodejs MVC 로그인기능] 10. Dom으로 Html 객체 제어
  • [nodejs MVC 로그인기능] 9. 프론트엔드를 위한 JS파일 생성, 미들웨어 등록
driscoll
driscoll
driscoll
groomgroom
driscoll
전체
오늘
어제
  • 분류 전체보기 (24)
    • AWS (3)
    • javascript (6)
    • nodejs (10)
    • Devops (1)
    • docker image scanner (1)
    • docker (2)
    • 개발 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • var let const
  • aws nodejs 서버 배포
  • AWS EC2
  • var let 차이
  • ec2 xshell
  • Dynamic typing
  • 트라팔가 로 해적단 베포
  • express vuejs배포
  • express 배포
  • EC2
  • EC2배포
  • javscript
  • javascript연산자
  • nodejs 배포
  • JavaScript
  • AWS배포
  • awsec2
  • nodejs 서버 배포
  • BlockScope
  • hoisting
  • ec2 xshell 연결
  • vuejs 배포
  • AWS

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
driscoll
[nodejs MVC 로그인기능] 11. fetch,bodyparser를 이용해 입력 데이터 서버로 보내기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.