[TIL] 230627

메인 페이지 작업

warning
bundle.js:107426 styled-components: it looks like an unknown prop "theme" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via

저번주 스타일 컴포넌트 연습했던거에선 발생하지 않았는데 theme관련 내용이 없더라도 이번에 설치한 패키지에서는 해당 주의 표시가 발생했다.

env

환경변수를 각각 REACT_APP_[변수명]으로 작성하여
process.env.~ 으로 접근하여 사용할 수 있다.
개발 화경에서 개발서버가 실행중인 경우 환경변수가 변경은 서버를 재시작 해야 적용된다.

Firebase

yarn add firebase나 npm install로 설치가 가능하고 메서드를 불러와서 쉽게 로그인 기능을 구현할 수 있다.

error 처리

// 에러 코드에 대한 안내 문구 반환하기
// 사전 유효성 검증 여부 등을 고려해 발생 빈도 순으로 분기처리하는게 좋다.
switch (error.code) {
  case "auth/user-not-found" || "auth/wrong-password":
    return "이메일 혹은 비밀번호가 일치하지 않습니다.";
  case "auth/email-already-in-use":
    return "이미 사용 중인 이메일입니다.";
  case "auth/weak-password":
    return "비밀번호는 6글자 이상이어야 합니다.";
  case "auth/network-request-failed":
    return "네트워크 연결에 실패 하였습니다.";
  case "auth/invalid-email":
    return "잘못된 이메일 형식입니다.";
  case "auth/internal-error":
    return "잘못된 요청입니다.";
  default:
    return "로그인에 실패 하였습니다.";
}

로그인

1. useEffect함수에서 onAuthStateChanged 사용
2. auth.currentUser
   현재 로그인한 user를 확인한다.

React는 렌더링이 되기 때문에 로그인 상태가 유지되도록 만들어야한다.
DB에 유저의 정보를 저장하여 마이페이지에서 정보를 수정할 수 있도록 만들고 비밀번호는 보안을 위해 빼고 저장하도록하고 email을 중복해서 만들지 못하게 하여 데이터가 겹치는 것을 방지하도록 만들어야겠다.