로그인/회원가입

뱅기뱅규·2022년 4월 20일
0

위스타그램 Back-Front 연결

오늘은 사상 처음으로 지금까지 구현한 위스타그램을 이용하여, back-end와 front가 처음으로 연결되어 로그인/회원가입 기능을 구현하였다. 로그인/회원가입 세션을 들은 후, front는 fetch함수와 back이 연결되어있는 ip주소 와 api주소를 통해 회원가입 -> 로그인하는 절차를 진행하였다.

하는법

  1. 유저가 이메일을 입력합니다. Email Input의 onChange 이벤트 핸들러에 연결된 함수가 실행됩니다.
  2. 함수에서 Email Input의 value를 setId를 통해 업데이트 합니다.
  3. 유저가 비밀번호를 입력합니다. Password Input의 onChange 이벤트 핸들러에 연결된 함수가 실행됩니다.
  4. 함수 안에서 Password Input의 value를 setPw를 통해 업데이트 합니다.
  5. Button을 클릭하면 onClick 이벤트 핸들러에 연결된 함수가 실행됩니다.
  6. 함수 안에서 fetch 함수를 통해 server에 요청(Request)을 보냅니다.
  7. server에서 인증 / 인가 과정을 거친 후의 결과를 응답(Response)으로 보내 줍니다.
  8. 응답의 결과에 따라 Main 페이지로 이동 하거나 에러 메세지를 띄웁니다.

여기서 button에 이벤트 핸들러를 달때에는 fetch 함수를 이용해서 데이터를 보내면 된다.

  • How to use fetch
fetch("API 주소", {
  method: "POST",
  body: JSON.stringify({
    email: id,
    password: pw,
  }),
})
.then((response) => response.json())
.then((result) => console.log("결과: ", result));

✊ 주의할 점

body안에 있는 key값은 back에서 지정한 그대로 보내줘야 에러없이 통신이 가능하다.

소감

백엔드와의 소통이 중요하다고만 들었지, 직접 겪기 전까진 몰랐다. 이메일 형식, 비밀번호 형식들에 대한 얘기를 하지않고도 계속 에러뜨는것을 보고 좌절하였지만, 생각보다 금방해결되는것을 보니 허탈하기도 하였다. 사실 오늘 세션의 교훈은 개발자들간의 소통이 아닐까라는 생각을 한다.

0개의 댓글