로그인 & 회원가입 실습 (백엔드와의 첫 통신

fetch함수를 이용하여 백엔드와 통신

fetch 함수의 특징

• 인자 2개를 받음
  - 첫번째 인자는 API주소
  - 두번째 인자는 HTTP 통신에 관한 내용

• 두 번째 인자

  	-method 에는 GET, POST, PATCH 등 HTTP method를 입력합니다.
  	-body 에는 JSON 형태로 주고 받을 데이터를 넣습니다.

  • 통신을 할 때는 String 형태의 JSON으로 보내야 하기 때문에
    JSON.stringify() 라는 메서드를 활용해서 포맷을 기존의 javascript object에서 JSON String으로 변환해줍니다.

회원가입 데이터 보내주기

let signUp = () => {
    fetch(‘http://10.58.6.64:8000/users/signup’, {
      method: ‘POST’,
      body: JSON.stringify({
        name: ‘eokhwa’,
        email: id,
        password: pw,
        contact: ‘01010101010’,
      }),
    })
      .then(response => response.json())
      .then(result => console.log(‘결과: ’, result));
  };

• 백엔드가 받아야하는 키 값들과 내가 보내주는 키 값이 일치해야만 하기 때문에 의사소통이 중요

회원가입한 아이디로 로그인 하기

    let login = () => {
      fetch('http://10.58.6.64:8000/users/login', {
        method: 'POST',
        body: JSON.stringify({
          email: person.text,
          password: person.pw,
        }),
      })
        .then(response => response.json())
        .then(result => {
          if (result.message === 'SUCCESS') {
            navigate('/main-geumgwan');
          }
        });
    };

백엔드와 소통해서 result. 값이 토큰이 아니라 다른 변수 값이 오게끔 해주면 편함.
위같은 경우엔 message가 SUCCESS 로 뜰경우 main으로 이동하게끔 함