개념
fetch 함수 구조
<script>
fetch("api주소", {
method: "POST",
body: JSON.stringify({
email: this.state.id,
password: this.state.pw,
}),
})
.then((response) => response.json())
.then((result) => console.log("결과: ", result));
</script>실습
오늘은 처음으로 백엔드와 통신하였습니다.
React로 만들었던 로그인 페이지를 사용하여 회원가입을 하고
(페이지 모양은 로그인이지만, 회원가입과 로그인 모두 구현)
- 회원가입 성공하기
- 중복된 id값
- 키 에러 만들기
- 로그인 성공 후 받은 토큰(성공하면 토큰을 보내줌) 콘솔 찍기
를 해보았습니다.
0. fetch 함수 넣기.
로그인 페이지의 값을fetch 함수는 button의 onClick 이벤트를 받는 this.goToMain 함수 내에 만들어 줍니다.
1. 회원가입 하기.
<script>
goToMain = () => {
fetch("http://10.58.3.178:8000/users/login", {
method: 'POST',
body: JSON.stringify({
password: this.state.inputPw,
email: this.state.inputId,
name: "hjkk",
phone_number: "01011111110"
}),
})
.then((response) => response.json())
.then((result) => console.log("결과: ", result));
</script>1) fetch 함수 안에 backend에서 api주소를 받아옵니다.
2) method는 POST를 사용했고
3) body에는 JSON.stringify를 사용하여 string으로 바꾸어줍니다.
4) backend 병재님은 회원가입을 할 때 password, email, name, phone_number을 받아야 해서 위와 같이 입력해주었고, name과 phone_number는 state를 따로 만들지 않았었기에 하드코딩으로 값을 넣어주었습니다.
이때 back에서 회원가입 양식이 잘 설정되거나 그렇지 않을 때 값을 콘솔창으로 보내줍니다. (캡쳐를 안해놓음..ㅡㅡ) 중복된 id 값으로 회원가입 했을 때에도 나옴.
2. key error 만들기
앞서서 알 수있는데 백에서는 password, email, name, phone_number를 받아야 했습니다. 그런데 프론트에서는 password와 email 값을 받는 state만 만들어져있어서 나머지는 하드코딩으로 만들어주었죠.
그 하드코딩으로 만들기 전에 두 가지만 백에 전달하였는데 그때 key error가 일어났습니다.
3. 로그인 하기
저는 로그인 페이지에 회원가입과 로그인 통신을 모두 했었기에 코드를 수정하여 사용하였습니다. 로그인 할 때 fetch함수는 아래와 같습니다.
<script>
goToMain = () => {
fetch("http://10.58.3.178:8000/users/login", {
method: 'POST',
body: JSON.stringify({
account: this.state.inputId,
password: this.state.inputPw,
}),
})
.then((response) => response.json())
.then((result) => console.log("결과: ", result));
});
};
</script>1) ~ 3) 회원가입과 동일
4) 로그인을 할 때 백에서 account와 password를 받아야 해서 위와 같이 입력해주었습니다.
+ 추가 사항
로그인을 구현했을 때, 화면이 Main page로 넘어가지 않는 문제가 있었습니다.
혼자서 프론트만 구현했을 때는
goToMain = () => {
this.props.history.push('/mainhyo');
}이렇게 goToMain을 만들었습니다. 하지만 fetch 함수를 만들고 그건 작동이 되지 않아서 두번째 .then에 그것을 적용해 주었습니다.
<script>
.then((response) => response.json())
.then((result) => {
if(result.result) {
this.props.history.push('/mainhyo');
} else if (result.message === "INVALID_USER") {
console.log(result.message);
} else if(result.message === "KEY_ERROR") {
alert("id, pw를 확인해주세요.")
}
</script>- result 객체의 key가 result(==로그인 성공)일 때는 main page로 이동.
- result 객체의 key message가 "INVALID_USER"(==로그인 실패)일때는
"INVALID_USER"출력 - result 객체의 key message가 "KEY_ERROR"(==로그인 실패)일때는
"KEY_ERROR"출력
