[REACT] 프론트에서 서버로 데이터 보내기

브라우저에서 사용자가 입력한 Id , 비밀번호 내역을 백엔드에게 보내주는 통신을 할 것임!

이때 전달할 데이터는 request 라는 데이터고, fetch라는 함수를 통해서 전달을 할 것이며

어떤경로로 전달을 할 것인지 정해줘야함 -> 이러한 경로는 보통 서버 개발자가 설계

프론트는 해당 경로를 요청하고, 해당 경로의 api는 미리 만들어져있어야함

 

이때 내 파일상 index.js에 해당 api가 만들어져있음

하지만 아직 id, 비번을 받을 api는 아직 정해지지않은 상태

하지만 만들어져있다고 가정하고  데이터를 전달해보는 과정을 구현할 것임

 

*index.js

/Login 과 같은 것을 api 라고 칭함 l 지금은 get밖에 없어서 받을 수는 있지만 post가 없어서 줄 수 없음

 

이에 /login이라는 경로가 이미 있다고 가정하고 login.js에서 fetch함수를 설계할 예정 -> /Login이라는 경로로 전달

 

 

*login.js

fetch 함수

- 첫번째 파라미터 : 해당 api (로그인 경로) /

- 두번째 파라미터 : 전달할 데이터 (body라는 키와 값의 형태로 req값 보낼건데 json형태로 감싸서 보낼 예정)

*문자열로 바꿔주는 것 : stringify

- json 데이터임은 header로 설명할 수 있음 . 제이슨 데이터를 전달한다!! : content-type

- 데이터만 전달하면 안되고 body로 전달할 때는 post 형태로 전달해야함 (restapi 관련 내용이기에 잘 모르겠다면

[Restful API] 자원의 표현을 가지고 상태를 전달한다. 유투브 영상 참고)

 

 

 

 

---

그렇게 처음 구현해본 로그인창 fetch 함수 ~!~

---

 

---

사실 이 전에 [DOM으로 HTML 객체 제어하기 | 프런트 기능 구현]도 했다

 

*login.js

DOM

document object method로서 html에 접근하기 위한 수단이다. 이에 질의선택자인 querySelector을 사용한다.

#id와 같이 #을 붙혀주는 이유는 간단하다. input "id" 라면 그 중 "id"만 꺼내와달라는 말이다

 

*login.ejs

 

이에 맞추어 ejs를 활용하여 객체를 똑같이 적어주었다

 

 

 

 

참고 영상

https://www.youtube.com/watch?v=QRo3-00n_ew