회원가입

1.input 2개와 button하나를 만든다.

input엔 onChange={this.handleId} ,onChange={this.handlePw}
button엔 onClick={this.handleClick} 으로!

위에다가

백엔드랑 맞춰야 하는 것

얘네는

얘네랑 맞춰야 한다.

API주소를 ~~~signup으로! 바꿔준다.
그 후,

API주소 연결하는 방법

변하지않는 상수는 앞에 대문자로 써준다.
Config.js

같은 파일에 할 경우는 위에다 그냥 선언해줘도되지만,

원래는 Config.js라는 파일을 만들어서 따로 관리해줘야 한다.
왜?엄청많은 페이지에서 api를 사용할텐데 api주소가 서버 껏다킬때마다 바뀐다.
그러므로 한 곳에서 관리를 해주는 것이 용이하다.
그걸 변수로 만들어놓은다음 꺼내쓰는것이다. (엔드포인드 전까지)

import해준다.

변수로 만들어줬을 경우엔

이렇게 써준다.

TIP)

Login.js와 Config.js에서

export default와 export의 차이는

default가 붙는 순간 import 뒤에 쓰는 이름이 아무이름이어도 상관없음.
export일때만 { AIP } 중괄호를 붙여서 이름으로 써야한다.

키에러만들기

body안에 있는 키를 의도적으로 잘못쳐서 확인해본다.

로그인 성공 후 받은 토큰 콘솔 찍기

로그인은 api주소를 ~~~signin 으로 바꿔서 작업해본다.

코드로 로컬스토리지에 저장하는 방법 :

result에 오퍼라이제이션이 있으면 로컬스토리지에 저장!(셋아이템)을 한다.
두개의 인자를 받는데 첫번째는 키,두번째는 벨류이다.
저 토큰은 혼자할땐 맘대로해도되지만 , 프로젝트 들어가면 모두가 토큰을 씀.
그러니 맞춰야한다.
result.Authorization이 토큰의 값

성공!

alert창 띄워보기

토큰 확인하기

<button onclick = {this.checkToken}>토큰확인</button>

추가한다.

결과:

토큰 삭제하기

removeItem를 쓰면 된다.

    checkToken = () => {
        localStorage.removeItem("token");
        // const token = localStorage.getItem("token")
        // alert (token);
    };

"token" 이름의 토큰이 없어진걸 확인할 수 있다.

자주 출력되는 서버 에러 코드 및 원인

아래는 간략하게 서버에서 자주 출력되는 에러만 어떤 것이 있는지 알아보았습니다.

200 // [ OK ] 서버의 Request가 유효하고 성공한 경우
텍스트301 // [ Moved Permanently ] 서버에서 리다이렉트(redirect) 페이지 이동 발생
401 // [ Unauthorized ] 유효한 인증 정보를 가지지 않는 경우
403 // [ Forbidden ] 인증이 실패한 경우
405 // [ Methods Not Allowed ] 서버에 요청한 Methods가 유효하지 않는 경우
503 // [ Service Unavailable] 서버가 요청을 받을 준비가 되지 않은 경우