지난번까지 해서 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 |
지난번까지 해서 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 |