/signup 으로 회원가입 (데이터에 아이디, 패스워드 저장)
const handleClick = () => {
fetch('http://10.58.52.154:3000/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8',
},
body: JSON.stringify({
name: 'ㅇㅇㅇ'
email: idState,
password: pwState,
profileImage: '...'
}),
})
.then((response) => response.json())
.then((data) => console.log(data));
};/login 으로 로그인 성공
const handleClick = () => {
fetch('http://10.58.52.154:3000/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8',
},
body: JSON.stringify({
email: idState,
password: pwState,
}),
})
.then((response) => response.json())
.then((data) => console.log(data));
};fetch
백엔드에서 설정해준 url 주소 ( 'http://IP주소:port번호/Endpoint' )
method는 백엔드랑 맞추면 됨 ( 일명 : http request method )
headers에는 'Content-Type': 'application/json;charset=utf-8' 로 넣는다.
백엔드에 보낼 요청내용이 담길 body
JSON.stringify() -> javascript를 JSON 형식으로 바꿔주는 메서드
백엔드 데이터에 저장돼있는 key값을 사용해야 한다
( 우리팀 백엔드 데이터는 name, email, password, profileImage 가 key값이었다 )
email 에는 아이디 input 창에 들어가는 state명을 넣어줌
password 에는 패스워드 input 창에 들어가는 state명을 넣어줌
( + password의 조건들이 백엔드 쪽에 정규표현식으로 있어서, 회원가입 요청할 때 조건에 맞게 작성하여 보내주었다. 조건에 맞지 않으면 에러 뜸. )
.then((resp_텍스트_onse) => response.json())
-> 내가 보낸 요청에 응답을 받음 (json 파일을 javascript 파일로 변경)
-> 연결이나 에러등이 떴을 때, 자세한 걸 보고싶으면 console.log(response) !
.then((data) => console.log(data));
-> 첫번째 then 함수에서 반환된 값이 데이터로 들어옴 (브라우저 콘솔에서 데이터 확인가능)
로그인이 성공되면, 고유의 Token을 받게 됨
-> jwt.io 사이트로 가면 토큰을 해석해준다. 내 고유 ID번호를 알 수 있음 !
로그인 버튼을 눌렀을 때 request 되는 것이기에, 로그인 버튼 onClick 이벤트에 해당 함수(handleClick)를 넣어주었다.
+ 토큰을 로컬스토리지에 accessToken 이라는 이름으로 저장해주는 코드👇🏻
.then((data) => localStorage.setItem('accessToken', data.token));로컬스토리지에 있는 토큰을 가져오려면 getItem 메서드를 사용하면 된다고 한다! 이건 나중에-!
