Mock Data, Login & Signup

최정훈·2022년 6월 1일

mock data

실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터
mock data 를 만들어 데이터가 들어오는 상황을 미리 대비하고 UI 가 기획에 맞게 구현 되는지 확인
Backend 와의 소통 - 주고 받는 데이터가 어떤 형태인지, key-value 값 조정

mock data 관리하는 두 가지 방법

data.js
- export DATA, import DATA from './data'
public 폴더 > data 폴더 > data.json

const [ commentList, setCommentList ] = useState([]);

useEffect(() => {
	fetch('http://localhost:3000/data/commentData.json', {
		method: 'GET'
	})
	.then(res => res.json())
	.then(res => {
		setCommentList(res.data);
	});
}, []);

<ul>
    {commentList.map(comment => {
        return (
            <Comment
                clickEvent={changeColor}
                comment={comment}
            />
        );
     })}
</ul>

`fetch()` 함수를 이용한 API 통신

handleLogin = () => {
    const { userID, userPW } = this.state;

    fetch("http://3.34.133.239:8000/account/signin", {
        method: "POST",
        body: JSON.stringify({
          email: userID,
          password: userPW,
        }),
    })
    .then((response) => response.json())
    .then((result) => {
        if (result.token) {
          localStorage.setItem("token", result.token);
          history.push("main");
        } else if (result.message === "UNAUTHORIZED") {
          alert("아이디나 비밀번호를 확인해주세요.");
        }
    });
  }
};