nyan cat을 깔았다 후후
오늘은 fetch 함수를 이용해서 백엔드와 통신을 하는 법을 배웠다!
먼저 백엔드와 통신을 하기 위해서는 API 주소가 필요하다!
로그인 페이지에서 통신을 하려고 하기 때문에 Login.js 에서 작업을 해주었다!
우리가 했던것은 먼저 백엔드가 만들어놓은 회원가입 페이지 API 주소로 이동한 후 그 주소를 통해 이메일, 패스워드를 넣으면 SUCCESS 라는 메시지와 함께 백엔드 DB 우리의 정보가 저장된다
그럼 이제 로그인 페이지 API로 이동해서 우리가 회원가입 시 만들어두었던 이메일, 비밀번호로 똑같이 로그인을 하는 것이다!
먼저 백엔드의 회원가입 API 주소를 고정 변수에다 넣는다
const API = "http://10.58.2.58:8000/usr/login/";
이 화면에서 첫번째 인풋창에 이메일을, 두번째 인풋창에 비밀번호를 써 넣고 로그인 버튼을 누르면 동작을 해야한다!
그리고 버튼에 onClick 이벤트를 걸어주고 다음과 같이 코드를 작성한다.
click_event = () => {
const { id, pw } = this.state;
fetch(API, {
method: "POST",
body: JSON.stringify({
email: id,
password: pw,
}),
})
.then((res) => { return res.json()})
.then((res) => { console.log(res) })
}먼저 가장먼저 눈에 띄는게 fetch 함수가 눈에 띄는데
fetch 함수는 백엔드와의 통신수단이라고 보면 된다.
이 fetch 함수를 통해 프론트가 백엔드 한테 데이터를 요청할 수 있다!
fetch 함수를 자세히보면 method가 "POST"로 되어있는데
이는, 우리가 body에 정보를 담기위해서이다!
보통 데이터를 그냥 받기만 하면 method를 "GET" 으로
받은 데이터를 가공해서 다시 백엔드로 보내고 싶다면 "POST" 방식을 사용한다!
이제 body 부분을 보면 JSON.stringify 이 부분이 눈에 띌 것이다!
여긴 우리가 통신을 할때 데이터 타입은 무조건 string 이므로 우리의 정보를 JSON객체의 stringify라는 메서드를 사용해서 보낸 것이다!
여기서 id와 pw는 각각 onChange에서 e.target.value의 값이 저장된 state들이다!
email과 password 부분은 백엔드가 작성한 양식에 맞춰서 바꿔줘야 한다!
예를 들어 백엔드가 나는 email이 아니라 id야 ~ 이렇게 하면
나는 body 부분을 이렇게 고쳐야 한다!
body: JSON.stringify({
id: id,
password: pw,
})키 값만 백엔드의 양식에 맞추어서 주면되고, 벨류는 우리가 만든 그대로 사용해도 된다!
근데 만약에 백엔드가 나는 name, phone도 필요해 ~
이러면 일단 프론트 에서 아직 만들어놓지 않았기 때문에 하드코딩으로 값을 그냥 전달해준다!
body: JSON.stringify({
id: id,
password: pw,
name: "taehyun",
phone: "01012345678"
})이렇게 말이다!!
여기 까지가 request, 요청 부분이고 그 밑에 then이 나오는 부분은 우리가 데이터를 받아서 가공하는 부분이다!
then이 뭘까??
fetch 함수는 비동기 방식으로 처리가 되는데
비동기라는 것은 우리가 보통 동기적(순차적)으로 처리가 되지만 데이터가 크고 읽는게 오래걸리면 이렇게 동기적으로 처리하면 비효율적이기 때문에 따로 워커라는 곳에 보내고 그 다음 명령을 처리하는 것이다!
워커로 간 비동기 동작이 처리가 되면 바로 작동중인 동기적 작업 중간에 껴서 들어간다.
then이라는 것은 이 비동기 동작을 동기적으로 만들어주는데
이 말은 fetch 함수 자체는 비동기적으로 동작을 하나 그 안에 있는 then 부분은 차례대로 동기적으로 동작을 하는 것을 말한다.
.then((res) => { return res.json() })
.then((res)) => { console.log(res) }이 부분을 자세히 보면 첫번째 res는 서버로 부터 받은 응답이고 타입은 string이다!
에로우펑션으로 연결된 res.json()은 이 string 타입의 데이터를 json 형태로 변환시켜 주는 것을 말한다!
단순히 변환하는 parse와 json 둘 사이의 차이점이 있는데
parse는 우리가 불필요한 정보(헤더 같은)까지 변환되서 리턴되고, json은 우리가 필요한 정보만을 쏙 떼서 리턴된다.
그래서 2번째 줄 res에는 이 정보가 담겨있고 console을 찍으면 우리가 이제 가공할 수 있는 정보가 담겨있다!
백엔드와 통신이 성공적이었을때 console을 찍으니 이 res에는 message success가 적혀있었다!
이렇게 이제 회원가입이 완료가 되면 백엔드의 DB에는 내가 적은 정보가 담겨있다!
이제 로그인 통신을 해보면은 우선 API 주소를 백엔드의 로그인 API 주소로 바꿔준다!
그리고 회원가입 했던 데이터를 그대로 다시 화면에다가 적고 전송하면 로그인까지 완성!
우리가 데이터를 보내면서 백엔드와 통신을 할때마다 백엔드 쪽에서는 status 코드가 찍힌다!
통신이 잘됬으면 200번대가 통신이 뭔가 내쪽에서 잘못됬으면 400번대가 뜬다
나중엔 여기에 console 대신 라우터 기능을 이용해서 다른 페이지로 보내주거나 localStorage.getItem으로 토큰을 확인하고 가져올 수 있다!
토큰쪽을 자세히 살펴보면 localStorage가 있는데 이건 일종의 작은 백엔드 부분이라고 생각하면 된다
localStorage.setItem은 우리가 아까 했던 POST 방식과 비슷하고
localStorage.getItem은 GET 방식과 비슷하다.
느낀점
백엔드와 프론트 사이에서 데이터가 어떤게 오고가는지 궁금했었는데 정말 신기하고 재밌었다!
백엔드 작업하는 건 오늘 처음 봤는데 백엔드도 재밌어보였다
처음엔 좀 애먹었는데 왜 백엔드와 소통이 중요하다는 강조하는지 다시 한번 느꼈다
