[TIL #30] React - 회원가입 & 로그인 구현(feat. fetch 함수)

프론트엔드와 백엔드의 통신

전체적인 흐름

1. 유저가 e-mail & 비밀번호 입력 -> input 의 onChange함수 실행.
2. onChange함수에서 input 의 value를 setState를 통하여 업데이트
3. Button 클릭하면 onClick 함수 실행
4. onClick 함수 안에서 fetch 함수 통해 server에 요청(Request) 보냄
5. server에서 인증/인가 후 결과를 응답(Response)로 보냄

<작성 code>

  goToMain = e => {
    e.preventDefault();
    fetch('http://10.58.7.242:8000/users/signIn', {
      method: 'POST',
      headers: {
        Authorization: 'token',
      },
      body: JSON.stringify({
        email: this.state.idInputValue,
        password: this.state.pwInputValue,
      }),
    })
      .then(response => response.json())
      .then(result => {
        if (result.toke) {
          localStorage.setItem('wtw-token', result.token);
        }

        if (result.result === 'SUCCESS') {
          return this.props.history.push('/Main-joonhyun');
        }

        if (result.result === 'INVALID_USER') {
          return alert('비밀번호 또는 이메일이 잘 못 되었습니다.');
        }
      });
  };

• e.preventDefault : preventDefault 는 a 태그 처럼 클릭 이벤트 외에 별도의 브라우저 행동을 막기 위해 사용됩니다.
• fetch 함수는 첫번째 인자는 api 주소, 두 번째 인자는 http 통신에 관련 내용
• 여기서 두 번째 인자는:
  - method 는 GET,POST,PATH 등을 사용
  - JSON형태로 데이터를 주고 받으며, 이 데이터는 body에 넣어준다.
  -통신시 string 형태의 JSON으로 보내야하며 이를 위해 JSON.stringify 함수를 활용하여 object - > string 변환
• 통신은 다른 로직에 비해 오래걸리므로 비동기처리되므로 then 매서드 사용

   .then(response => response.json())

첫번째 then에서는 JSON  을 Javascript로 변환 해준다.

  .then(result => {
    if (result.toke) {
      localStorage.setItem('wtw-token', result.token);

두번째 then 에서는 원하는 로직을 구현 할 수 있다.

• 로그인 성공하면 token 저장
• 로그인 성공하면 main 페이지로 이동
• 로그인 실패하면 alert 창에 "아이디나 비밀번호를 확인해주세요." 띄우기

첫 역사적인 front & back 의 통신

소감

동영상에는 나오지 않았지만, 로그인 성공 했을때 console.log  success 라는 글자를 보고 너무 신기했다. 또한 아이디 중복 가입, 잘못 입력 했을때 error 메시지가 잘 구현 되는 것을 보고 신기하고 지난 1달간의 위코드 생활이 생각났다.
이번 백앤드와의 통신을 통해 백엔드와 프론트엔그 간에 유기적이고 체계적인 communicatiob을 해야만 프로젝트가 잘 진행 될 수 있다는 것을 느낄 수도 있었다.
남은 기간 두번의 프로젝트가 있는데 오늘 느낀 경험을 바탕으로 팀원들과 잘 communication하도록 노력 해야겠다.