fetch라는 것을 이용해서 브라우저에 입력한 아이디와 비밀번호 값을 서버에게 전달해보는 네트워크 통신을 해볼 것입니다. 저희가 전달할 값은 req에 해당하는 값이죠.
일단 어떤 경로로 전달할지를 정해줘야합니다. 서버랑 프런트랑 해당 데이터를 어떤 경로에서 주고 받을지를 정해줘야합니다. 그런 경로는 서버 개발자가 설계하게 되고요. 프런트 개발자가 해당 경로를 요청하기전에 그 해당 경로에 API라는게 만들어져있어야합니다.
근데 저희는 라우트에 index.js를 보면
해당 API가 만들어져있는데요. 그런데 아직 아이디와 비밀번호를 받을 API는 만들어지지 않은 상태입니다. 그 API는 다음에 만들건데 그전에 데이터를 전달하는 과정을 설명드리겠습니다. 일단 fetch()라는 것을 통해서 어떠한 경로로 데이터를 전달을해야하는데요.
login이라는 경로가 있다고 가정하고 전달을하겠습니다. 그리고 두번째 파라미터로 전달할 데이터를 보내줄 수 있습니다. 오브젝트 형태로 보내줘야하는데요. body라는 키 값으로 req(request)라는 데이터를 전달할 수 있는데요.
저는 데이터 타입을 JSON형태로 전달하겠습니다. 그리고 stringify는 지정된 오브젝트를 문자열 형태로 바꾸는 메소드입니다.
그리고 body형태로 전달하면 POST 형태로 전달을해줘야하니 메소드를 POST로 해줘야합니다. 그리고 전달하는 데이터가 JSON 형태인지 알려줘야하는데요. 그것은 헤더로 표현할 수 있습니다. 이렇게 되면 데이터가 서버로 전달이 되겠죠. 이런 데이터를 서버에서 받으려면 경로가 같고 메소드가 같은 API가 필요합니다.
그런데 지금 get으로만 받을 수 있는 API가 있으니까 다음에는 POST로도 받을 수 있느는 API를 만들어보겠습니다.
'IT-백엔드' 카테고리의 다른 글
| Node.js 백엔드 맛보기 | app.listen() 모듈화, 폴더 구조 최적화 (0) | 2024.01.24 |
|---|---|
| Node.js DOM으로 HTML 객체 제어하기 | 프런트 기능 구현 (0) | 2024.01.24 |
| node.js 로그인 API 만들기 (0) | 2024.01.24 |
| Rest API에 대해서 1 (0) | 2024.01.24 |
| Rest API에 대해서 2 (0) | 2024.01.24 |
