7) Nodejs - 백앤드 넓고 얕게 맛보기_정리_프론트 요청에 대한 파싱(출처 유튭 강의)

먼저 post며 login의 경로로 만들어야 한다

메서드 다르고 경로는 같으며 컨트롤러 까지 같으면 안되는데.. 이걸 이제 직관적이되 서로 다른 컨트롤러라는걸 보여주자

 

그럼 컨트롤러 부분을 가서 보면

	home과 login은 단순 랜더링만 해주는 함수이다 그럼 이렇게 만들어 줄수 있
	outpupt 이라는 Object 라는걸 만들고 그 안에 home이는 key값과 login이라는 key값을 집어 넣는다 그리고 모듈을 내보는곳도 output으로 내보내줘야 한다 여기까지 컨트롤러를 수정해 줬고 라우트 부분도 수정을 해줘야 함
	ctrl로 접근해 output을 불러와 그안에 home와 login을 각각 불러오는걸로 좀더 직관적이게 됬다 자 그럼 router.post("login", crtl.login) 얘는 그럼..? 앞에서 했던 fetch로 뚝딱뚝딱 해 만들어 서버로 값을 던지기 까지만 해줬잖음?

서버로 넘어온 값을

받아줘야지

	process 오브젝트를 받아준다 해줬으니
	새 오브젝트를 만들어 그 안에 login 이라는 key값을 만들어 주고 서버로 넘어온 값을 어떻게 받아올건지 생각 해보자
	우리는 이 req 라는 변수에 값을 담아 줬었음 body로 데이터를 전달 할거고 그걸 받아 req에 요청할 값을 담아 서버로 JSON형태로 보냈을
	그걸 동일한 login 경로의 post 메소드를 쓰는 이 process 오브젝트 안에 login key 값이 작동을 할건데 그래서 이렇게 req 요청의 body를 보겠다 하면 값이 서버까지 잘 파싱 하게 됨

??? 왜 파싱이 안되지..?

---

데이터 파싱을 위해 body-parser 설치

body에서 넘어온 데이터를 파싱하기 위해

얘 설치해 줘야 한다

 

 

	설치한 모듈 불러오고
	미들웨어를 만들어 준다 저거 true를 해주는 이유는 URL을 통해 전달되는 데이터에 한글,공백 등과 같은  문자가 포함될 경우 제대로 인식되지 않는 문제를 해결 하기 때문이다
	이제 사용자가 입력한 값이 서버까지 잘 전달 됬다

여기까지..

 

fecth를 사용해 사용자가 입력한 값을 JSON으로 형태로 요청값을 담아 서버로 전달 해 줬고

body-parser를 사용해 전달 받은 데이터를 파싱해 서버의 콘솔에 찍어 보는것 까지 해봤음

 

그냥 이게 기본 형태라 생각하면 됨 다 이런식임

---

로그인 인증 기능 구현하기

 서버는 여기 요청한  req의 body 데이터를 가지고 로그인 기능을 구현하게 될건데

유저 모델을 임의로 컨트롤러 안에 만들어 놓고 그걸로 작업을 해보겠음

 

 

	컨트롤러 안에 users 라는 데이터를 만들었는데 이제 이 해당 데이터와 프런트 앤드에서 전달하는 데이터랑 인증하는 과정을 만드려 함 유저 입력값 한번 확인 해보자
	입력값이 들어오는걸 확인 완료
	이제 users 안에 담긴 데이터와 비교를 해보자. 이거 신기하다. 만약 user에 id가 있는지(includes) 내가입력하거를 볼거 {  idx에는 users의 id가 있는 인덱스 값(내가 넣은값의 0 1 2 있것지)  만약 (users의 비번의 idx가 같다면(===) 내가입력한 비번과 {     값을 return 해줘 success를 true 라고   } } 앞에서 성공이라 리턴 해줘 버렸으니 여기서  값을 success를 false로 message는 로그인 실패 문구

이제 이 return 값을 프론트에서 정상적으로 받을수 있는가
해보도록 하겠음

login.ejs와 연결된 login.js 라는 파일의 fetch가

서버로 값 던져주는 곳이였지?

 

저기서 응답인 res를 보면

res.json()의 반환 값은 Promise임

기본 res의 반환값은  Response 스트림인데

".json()"메서드 통해 Response(응답) 스트림을 읽을 수 있다

".json()"으로 Response 스트림을 가져와 완료될 때 까지 읽음

다 읽은 body 의 텍스트를 Promise 형태로 반환함.

이렇게 Promise 형태로 받는다~

는걸 알았고 이걸 한번더

여기까지 한게

1. 프런트에서 서버로 fetch를 사용해 JSON으로 입력값을 던져줬고

2. 서버쪽 컨트롤러에서 요청한 req의 body 값을 받아와 if-else를 사용해 유저 유무에 따라 success값을 리턴해주거

까지 했음.

 

로그인이 되면 메인화면으로 가야 함