Westagram 로그인 페이지에서 로그인기능, 메인페이지에서 댓글기능 작업 완료 후
백엔드 와 소통하는 시간을 갖게되었다.
1차프로젝트 시작 전 백엔드 와 회원가입 과 로그인기능 을 맞춰보는 시간을 통해 너무나 좋은 경험을 했다.
fetch() 함수 기본
fetch('api 주소')
.then(res => res.json())
.then(res => { // data를 응답 받은 후의 로직 });
백엔드와 통신할때 fatch() 함수 에대해 알아보자.
fetch("API 주소", {
method: "POST", body: JSON.stringify ({
email: id, password: pw,
}),
})
.then((response) => response.json())
.then((result) => console.log("결과: ", result));
- fetch 함수는 인자를 2가지 받습니다.
- 첫번째 인자는 API 주소 입니다.
- 두 번째 인자는 HTTP 통신에 관한 내용 입니다.
- method 에는 GET, POST, PATCH 등 HTTP method를 입력합니다.
- body 에는 JSON 형태로 주고 받을 데이터를 넣습니다.
- 통신을 할 때는 String 형태의 JSON으로 보내야 하기 때문에 JSON.stringify() 라는 메서드를 활용해서 포맷을 기존의 javascript object에서 JSON String으로 변환해줍니다.
- HTTP 통신은 다른 로직에 비해 오래 걸리기 때문에 비동기로 처리합니다. JS 에서 비동기를 처리하는 문법으로 Promise 객체가 있습니다. 따라서 fetch 함수는 Promise 객체를 리턴 합니다.
- then() 메서드는 Promise 객체에 사용할 수 있는 메서드 입니다. 위 예제 코드를 보면, then() 메서드를 fetch 함수의 실행 결과에 체이닝 하고 있는데, 이는 비동기로 처리된 fetch 함수의 결과 값이 들어오면 then 메서드의 액션을 실행 하라는 의미입니다.
- 첫번째 then()에서는 server에서 보내준 response 를 object 형태로 변환합니다. (body에서 리턴한 값을 받음)
- 두 번째 then에서는 object로 변환한 response를 console.log로 확인합니다.
- 로그인 성공하면 main 페이지로 이동
- 로그인 실패하면 alert 창에 "아이디 / 비밀번호를 확인해주세요." 띄우기
제가 작성한 코드 입니다.
여기서 email , password 부분에서 앞에 붙은 email , password 는 백엔드에서 설정한 key값으로 적어줘야한다.
다르면 키값이 정확하게 전달되지 않는다.
뒤에 붙은 email , password 은 내가 작성한 코드의 state값이다.
여기서 name과 contact를 적어준 이유는 백엔드에서 4가지의 키값을 설정해 놨기 때문에 키값을 적고 내용은 임의대로 적어주었다.
이렇게 백엔드에서 전달받은 signup API 를 fatch에 적용시킨 후 회원가입을 시도해보았다.
따로 회원가입 컴포넌트를 만든것은 아니고 로그인창에서 회원가입 형식으로 이메일에 @포함 비밀번호는 대,소문자,숫자,특수문자 포함
조건을 백엔드에서 걸어놨기 때문에 내가 로그인 하고자 하는 이메일과 비밀번호를 작성했다.
이렇게 회원가입이 완료 된 후
이렇게 API의 엔드포인트를 바꾼 후 방금 전 회원가입 완료한 아이디와 비밀번호를 입력하고 로그인을 시도해보았다.
이렇게 200 OK 코드가 출력이 되는걸 볼 수 있다.
네트워크창을 확인하면 이렇게 토큰이 들어온걸 확인할 수 있다. 로그인 성공 !!
위의 로그인 fatch 코드에서 2번째 .than() 에 나는 조건을 걸어주었다.
메세지가 "SUCCES" 로 들어온다면 로컬스토리지에 토큰을 저장하는 동작과 useNavigate 를 활용하여 "SUCCES" 메세지가 들어온다면 버튼 클릭시 메인화면으로 이동하게끔 동작을 구현했다.
만약 "SUCCES" 가 아니라면 alert 창을 띄웠다.
프론트 / 백엔드 통신이 안될 때 확인사항
- 연결 자체가 안될 때
- 동일한 WIFI 를 사용하고 있는지 확인.
- fetch 함수가 실행이 되는지 확인.
- API 주소에 http://10.58.8.116:8000/users/signup 과 같이 http:// , IP주소 , 포트번호 , 엔드포인트 다 작성이 잘 되었는지 확인.
- 백엔드 IP 주소 재확인.
- 백엔드 서버가 열려 있는지 확인.
- 연결은 되었지만, 원하는 응답이 오지 않고 에러가 날 때.
- fetch 함수의 syntax 확인.
- body 에 담아서 전달해 주어야 하는 정보중 누락된 것이 있는지 확인.
- body 에 key 값이 올바르게 들어갔는지 확인.