로그인/회원가입

홍석현·2022년 11월 10일
1
const Login = () => {
    fetch('API주소(회원가입을 위한/로그인을위한)', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
      body: JSON.stringify({ email: id, password: pw }),
    })
      .then(response => response.json())
      .then(data => {
        console.log(data);
        localStorage.setItem('sohard-token', data.accessToken);
        goToMain();
      });
  };

회원가입과 로그인을 위한
백과 프론트의 통신을 해봤다.
토큰을 주고받는 형태의 통신을 시도했다.
fetch 메서드를 사용해
서버의 IP주소를 받아온 후 서버에서 요청한 사항들을 json 파일 형식으로
변환시켜 post한다.
그 후

프론트에서 처리해야할 코드를 .then 을 사용해 작성한다.
.then(response => response.json())로 받아온 값을 json화 시켜주고
.then(data => {
console.log(data);
localStorage.setItem('sohard-token', data);
});
로 토큰 값을 로컬 서랍장에 위치시킨다.

느낀점

  • 서버와의 데이터 통신을 통해 좀 더 흥미로운 코딩을 할 수 있을것같다.
  • 로직을 짤때 서버와 통신하는 상황을 염두에두고 작성 할 수 있을것같다.
  • 서버와 통신하는 방법을 좀 더 알아보고싶다.
  • 서버를 만드는것도 어렵겠지만 경험 해보고 싶다.
  • 로그인시에 회원가입 정보와 다를 경우 경고창이 뜨는것도 구현해봐야겠다.
profile
Front-end to Full-stack

0개의 댓글