2022-02-06 TIL

Fact

• 주말 동안 기초부터 완성까지 프런트엔드 1장 2장을 읽고 블로그에 정리했다.
• 회원가입, 로그인 유효성 검사를 만들었다.
• firebase을 이용한 로그인, 회원가입을 사용했지만 기본적으로 firebase auth는 이메일, 패스워드만을 저장한다. 그래서 회원가입 시 유저정보를 작성할 때 데이터를 데이터베이스에 넣어주어야 한다.

Feelings

• yup, react-hook-form을 사용해서 회원가입과 로그인 폼을 만들었는데, 내가 원하던 것을 구현해서 좋았다. yup은 간단한 object 설정으로 input 값의 타입과 유효성을 검사해 주고, 그에 맞는 에러를 알려준다. react-hook-form은 일일이 내가 input의 value 값을 변경해 주면서 상태에 저장할 필요 없이 결과물만 함수 props로 가져올 수 있다. 또한 form에는 많은 기능을 하는 태그가 존재해 원하지 않는 페이지 이동이나, 이벤트가 발생할 수 있다. 그래서 이벤트 함수에 preventDefault로 문제를 해결하곤 하는데, react-hook-form에 있는 handleSubmit을 사용하면 이 행위를 막아준다. 나는 react-hook-form와 yup을 같이 사용해서 해당 input 값 유효성 검사에서 이상이 있다면 에러를 발생시키도록 구현했다.

Findings

아래 코드는 yup을 이용한 간단한 로그인 유효성 검사다.
export const loginValidation = yup.object({
  email: yup
    .string()
    .email("이메일을 입력해주세요")
    .required("이메일을 입력해주세요"),
  password: yup.string().required("비밀번호를 입력해주세요"),
});

아래 코드는 react-hook-form, yup을 사용해서 폼을 설정하는 코드다.

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<LoginType>({
  resolver: yupResolver(loginValidation),
  mode: 'onBlur', //포커스가 멈췄을때 유효성 트리거
})

• mongoDB에서 populate를 하려면 오직 ObjectId값으로만 가져올 수 있다. 나는 email값으로 populate를 시도하려고 했는데 실패했다. 공식문서 사용법에도 배열에 ObjectId를 저장한다고 되어있었다.

So far we've created two Models. Our Person model has its stories field set to an array of ObjectIds. The ref option is what tells Mongoose which model to use during population, in our case the Story model. All _ids we store here must be document _ids from the Story model.

Future Action

• 구현할수록 코드가 많이 길어진다는 느낌을 많이 받는다 어떻게 코드를 줄일 수 있을까?