Mock Data, Login & Signup

jeongssi94·2022년 6월 1일
0

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("아이디나 비밀번호를 확인해주세요.");
        }
    });
  }
};

Refactoring Check List

(참고) [React] Refactoring Check List

  • console.log , 불필요한 주석 삭제
  • 함수명, 변수명, 클래스명(className)
  • reset.scss & common.scss - 초기 세팅의 중요성
  • Sass nesting ( + 최상위 요소 className )
  • className의 동적 사용 - inline style 지양
  • 비구조화 할당, 구조분해 할당(destructuring)
  • 반복되는 코드는 Array.map() 활용
  • inputHandler 함수 합치기 - 계산된 속성명
  • <a> vs <Link>
  • 가독성 - 들여쓰기, 줄바꿈 처리, 함수와 함수 사이 간격, etc.
  • import 순서 (React > Pacakges, Library > Component > Style)
  • 여러가지 속성 - 우선순위, 관련도
  • img 태그에 alt 속성
profile
사과

0개의 댓글