[React] fetch 함수를 이용한 회원가입 & 로그인 구현(백엔드와 첫 통신) & mock data 활용법
흐름
- 유저가 이메일을 입력합니다.
Email Input의onChange
이벤트 핸들러에 연결된 함수가 실행됩니다. - 함수에서 Email Input의
value
를setId
를 통해 업데이트 합니다. - 유저가 비밀번호를 입력합니다.
Password Input의onChange
이벤트 핸들러에 연결된 함수가 실행됩니다. - 함수 안에서 Password Input의
value
를setPw
를 통해 업데이트 합니다. - Button을 클릭하면
onClick
이벤트 핸들러에 연결된 함수가 실행됩니다. - 함수 안에서
fetch
함수를 통해 server에 요청(Request)을 보냅니다. - server에서 인증 / 인가 과정을 거친 후의 결과를 응답(Response)으로 보내 줍니다.
- 응답의 결과에 따라 Main 페이지로 이동 하거나 에러 메세지를 띄웁니다.
fetch
- fetch 함수는 인자를 2가지 받습니다.
- 첫번째 인자는
API 주소
입니다. - 두번째 인자는
HTTP 통신에 관한 내용
입니다.
- 첫번째 인자는
- 두 번째 인자
method
에는GET
,POST
,PATCH
등 HTTP method를 입력합니다.body
에는 JSON 형태로 주고 받을 데이터를 넣습니다.- 통신을 할 때는 String 형태의 JSON으로 보내야 하기 때문에
JSON.stringify()
라는 메서드를 활용해서 포맷을 기존의 javascript object에서 JSON String으로 변환해줍니다.
- 통신을 할 때는 String 형태의 JSON으로 보내야 하기 때문에
- HTTP 통신은 다른 로직에 비해 오래 걸리기 때문에 비동기로 처리합니다. JS 에서 비동기를 처리하는 문법으로 Promise 객체가 있습니다. 따라서 fetch 함수는 Promise 객체를 리턴 합니다.
then()
메서드는 Promise 객체에 사용할 수 있는 메서드 입니다. 위 예제 코드를 보면,then()
메서드를 fetch 함수의 실행 결과에 체이닝 하고 있는데, 이는 비동기로 처리된 fetch 함수의 결과 값이 들어오면 then 메서드의 액션을 실행 하라는 의미입니다.
첫 번째 then에서는 server에서 보내준 response를 Object 형태로 변환합니다..then((response) => response.json())
두 번째 then에서는 object로 변환한 response를 console.log로 확인합니다. 위 예제 코드에서는 콘솔을 출력하고 있지만, 사실 이 부분에 분기 처리하는 로직이 구현 됩니다. 예를 들어,.then((result) => console.log("결과: ", result));
-
로그인 성공하면 main 페이지로 이동
-
로그인 실패하면 alert 창에 "아이디 / 비밀번호를 확인해주세요." 띄우기
와 같은 로직이 들어가게 됩니다.
-
통신이 안될 때
- 연결 자체가 안될 때
- 동일한 WIFI 를 사용하고 있는지 확인.
- fetch 함수가 실행이 되는지 확인.
- API 주소에
http://10.58.8.116:8000/users/signup
과 같이http://
,IP주소
,포트번호
,엔드포인트
다 작성이 잘 되었는지 확인. - 백엔드 IP 주소 재확인.
- 백엔드 서버가 열려 있는지 확인.
- 연결은 되었지만, 원하는 응답이 오지 않고 에러가 날 때.
- fetch 함수의 syntax 확인.
- body 에 담아서 전달해 주어야 하는 정보중 누락된 것이 있는지 확인.
- body 에 key 값이 올바르게 들어갔는지 확인.
나의 실습코드
회원가입 페이지를 따로 구현하지 않아서 로그인 페이지를 사용하되, 함수 onClick시 사용될 함수만 교체하며 진행. 백엔드에서 결과를 객체형태(json)로 반환하는데, 이 객체에 접근해서 메시지를 확인한 후 다음 로직으로 넘어가도록 할 수 있음.(ex. alert, useNavigate)
1. 회원가입
const signup = () => {
fetch('http://**.**.*.**:8000/users/signup', {
method: 'POST',
body: JSON.stringify({
email: idInput,
password: pwInput,
}),
})
.then(response => response.json())
.then(result => {
//console.log('결과: ', result.message)
if (result.message === 'EMAIL_ALREADY_EXISTS') {
console.log('Error : Duplicated');
}
});
};
2. 로그인
const login = () => {
fetch('http://**.**.*.**:8000/users/login', {
method: 'POST',
body: JSON.stringify({
email: idInput,
password: pwInput,
}),
})
.then(response => response.json())
.then(result => {
//console.log('결과: ', result.message)
if (result.message === 'SUCCESS') {
console.log('login SUCCESS');
}
});
};
3. Mock data를 fetch
useEffect(() => {
fetch('http://localhost:3000/data/commentData.json', {
method: 'GET' // GET method는 기본값이라서 생략이 가능합니다.
}) // 예시코드에서는 이해를 돕기 위해 명시적으로 기입해뒀습니다.
.then(res => res.json())
.then(data => {
setCommentList(data);
});
},[])
4. fetch불가능시 js파일의 Mock data 사용
const COMMENT_LIST = [
{
id: 1,
userName: 'wecode',
content: 'Welcome to world best coding bootcamp!',
isLiked: true
},
{
id: 2,
userName: 'joonsikyang',
content: 'Hi there.',
isLiked: false
},
{
id: 3,
userName: 'jayPark',
content: 'Hey.',
isLiked: false
}
];
export default COMMENT_LIST;
import React from 'react';
import Comment from './Comment/Comment';
import COMMENT_LIST from './commentData';
import './CommentList.scss';
function CommentList() {
return (
<div className="commentList">
<h1>댓글</h1>
<ul>
{COMMENT_LIST.map(comment => {
return (
<Comment
key={comment.id}
name={comment.userName}
comment={comment.content}
/>
);
})}
</ul>
</div>
);
}
export default CommentList;
Author And Source
이 문제에 관하여([React] fetch 함수를 이용한 회원가입 & 로그인 구현(백엔드와 첫 통신) & mock data 활용법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyeonze/React-fetch-함수를-이용한-회원가입-로그인-구현백엔드와-첫-통신저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)