오늘은 사상 처음으로 지금까지 구현한 위스타그램을 이용하여, back-end와 front가 처음으로 연결되어 로그인/회원가입 기능을 구현하였다. 로그인/회원가입 세션을 들은 후, front는 fetch함수와 back이 연결되어있는 ip주소 와 api주소를 통해 회원가입 -> 로그인하는 절차를 진행하였다.
여기서 button에 이벤트 핸들러를 달때에는 fetch 함수를 이용해서 데이터를 보내면 된다.
fetch("API 주소", {
method: "POST",
body: JSON.stringify({
email: id,
password: pw,
}),
})
.then((response) => response.json())
.then((result) => console.log("결과: ", result));
body안에 있는 key값은 back에서 지정한 그대로 보내줘야 에러없이 통신이 가능하다.
백엔드와의 소통이 중요하다고만 들었지, 직접 겪기 전까진 몰랐다. 이메일 형식, 비밀번호 형식들에 대한 얘기를 하지않고도 계속 에러뜨는것을 보고 좌절하였지만, 생각보다 금방해결되는것을 보니 허탈하기도 하였다. 사실 오늘 세션의 교훈은 개발자들간의 소통이 아닐까라는 생각을 한다.