20240105 TIL 해커톤/ 면접준비 1

토요일에 해커톤을 진행했다. 기업과제에 협업을 늘릴 수 있는 기회라고 해서 도전했다. 

과제자체는 조금 간단한 편이었고 지금까지 배운 것을 활용하면 할 수 있을 정도였다. 물론 typescript로 해보진 않았지만..

하지만 8시간이라는 시간안에 구현하기에 지금까지 배운 것으로 하기에 조금 나태한 것 같아 새로운 것을 적용해 보기로 했다. ui 자체는 전에 사용했던 것을 그대로 사용했다. 

내가 사용한 것은 react-hook-form 라이브러리와 yup 이다. 

 

차례대로 작성을 해보겠다.

 

라이브러리 설치

yarn add react-hook-form yup @hookform/resolvers

schema 설정해주기

  const schema = yup.object().shape({
    id: yup
      .string()
      .email('⚠이메일 형식이 적합하지 않습니다.')
      .required('⚠반드시 입력해야하는 필수 사항입니다.'),

    password: yup
      .string()
      .min(4, '⚠비밀번호는 최소4자리 이상입니다.')
      .max(15, '⚠비밀번호는 최대 15자리까지입니다.')
      .required('⚠비밀번호는 반드시 입력해주세요.'),
    checkPassword: yup
      .string()
      .oneOf([yup.ref('password')], '⚠비밀번호가 일치하지 않습니다.')
      .required('⚠비밀번호를 한번 더 입력해주세요'),
    nickname: yup
      .string()
      .min(1, '⚠닉네임은 최소1자리 이상입니다.')
      .max(10, '⚠닉네임은 최대 10자리까지입니다.')
      .required('⚠닉네임은 반드시 입력해주세요.')
  });

위의 코드는 yup 라이브러리를 사용하여 유효성 검사(schema validation)를 정의하는 TypeScript 코드다.

 

yup은 JavaScript나 TypeScript에서 데이터의 유효성을 검사하기 위한 강력하고 유연한 라이브러리이기에 사용했다. 

 각 필드(id, password, checkPassword, nickname)에 대한 규칙을 설정하여 유효성을 검사

1. id (이메일) 필드:
   • .string 타입의 값을 기대하며, email 메서드를 사용하여 이메일 형식인지 검사
   • .required 메서드를 사용하여 반드시 입력되어야 하는 필드임을 명시
2. password 필드:
   • .string 타입의 값을 기대하며, .min과 .max 메서드를 사용하여 비밀번호의 길이 제한을 설정
   • .required 메서드를 사용하여 반드시 입력되어야 하는 필드임을 명시
3. checkPassword 필드:
   • .string 타입의 값을 기대하며, .oneOf 메서드를 사용하여 비밀번호와 일치하는지 검사
   • .required 메서드를 사용하여 반드시 입력되어야 하는 필드임을 명시
4. nickname 필드:
   • .string 타입의 값을 기대하며, .min과 .max 메서드를 사용하여 닉네임의 길이 제한을 설정
   • .required 메서드를 사용하여 반드시 입력되어야 하는 필드임을 명시

이렇게 정의된 스키마(schema)는 폼에서 입력된 데이터에 대해 유효성 검사를 수행할 때 사용된다. yup은 이 스키마를 기반으로 데이터를 검증하고, 각 필드에 대한 오류 메시지를 생성한다. 만약 유효하지 않은 데이터가 입력되면 해당 오류 메시지를 사용하여 사용자에게 알려줄 수 있다.

 

useform 사용/설정

  const {
    handleSubmit,
    register,
    formState: { errors }
  } = useForm<FormData>({
    mode: 'onChange',
    resolver: yupResolver(schema)
  });
  type FormData = yup.InferType<typeof schema>;

 

useForm 훅은 react-hook-form에서 제공하는 폼 관리를 위한 훅

handleSubmit: 폼이 제출될 때 실행할 함수를 제공하는 이벤트 핸들러

register: 각각의 폼 필드를 react-hook-form에 등록하는 함수

formState: { errors }: 폼 필드에서 발생한 에러 정보를 담은 객체

설정

mode : onChange 입력값이 변경될 때마다 폼 상태를 업데이트하도록 설정 / 다른 옵션으로는 onsubmit과 onBlur가 있다. 

resolver : yupResolver를 사용하여 yup 스키마를 폼의 유효성 검사에 적용합니다. 이를 통해 자동으로 유효성 검사가 이루어짐

 

타입 지정은 yup.InferType을 사용하여 yup 스키마에서 타입을 추론하고, 이를 FormData라는 타입으로 지정한다.

 

온클릭 이벤트 넣기

const onSubmitHandler: SubmitHandler<FieldValues> = async ({
    id,
    password,
    nickname
  }) => {
    //회원가입

    try {
      const { data } = await authApi.post('/register', {
        id,
        password,
        nickname
      });
      if (data.success) {
        alert('회원가입 성공');
        navigate('/login');
      }
    } catch (err: any) {
      alert(err.response.data.message);
    }
  };

submitHandler와 FieldValues는 react-hook-form 라이브러리에서 타입스크립트를 지원하면서 담겨있는 타이다.

import { FieldValues, SubmitHandler } from 'react-hook-form/dist/types';

임포트 해와서 사용할 수 있다.

SubmitHandler 

• react-hook-form에서 제공하는 useForm 훅을 사용할 때, 폼을 제출할 때 실행되는 함수의 타입
• 일반적으로 onSubmit 속성으로 전달되며, 제출 버튼을 누를 때 실행되는 함수다.

FieldValues

• react-hook-form에서 제공하는 제네릭 타입으로, 각각의 폼 필드의 값들을 나타냄
• 폼의 각 필드는 name 속성을 통해 식별되고, FieldValues에는 이러한 각 필드의 값이 포함된다

이것은 타입 안정성을 제공한다고 한다.

 

jsx 

<Container>
      <Form onSubmit={handleSubmit(onSubmitHandler)}>
        <Title> 회원가입</Title>
        <Input
          placeholder="이메일을 입력해주세요 "
          {...register('id', { required: true })}
        />
        <Message>{errors.id?.message}</Message>
        <Input
          type="password"
          placeholder="비밀번호 (4~15글자)를 입력해주세요"
          {...register('password', { required: true })}
        />
        <Message>{errors.password?.message}</Message>

        <>
          <Input
            placeholder="비밀번호를 다시 입력해주세요"
            {...register('checkPassword', { required: true })}
          />
          <Message>{errors.checkPassword?.message}</Message>
          <Input
            placeholder="닉네임 (1~10글자)를 입력해주세요"
            {...register('nickname', { required: true })}
          />
          <Message>{errors.nickname?.message}</Message>
        </>

        <Button onClick={() => {}} text={'회원가입하기'} />

        <ToggleText>
          <span
            onClick={() => {
              navigate('/login');
            }}
          >
            로그인
          </span>
        </ToggleText>
      </Form>
    </Container>

 

 

면접준비

 

상태관리는 왜하고, 주로 무엇을 사용하는가

react는 컴포넌트가 변화 할 때 리랜더링 되는데 가상dom에서 변경된 부분만 캐치해서 실제 dom에 반영시켜주는데 이러한 리랜더링을 통해서 우리가 원하는 값을 변경시켜 보여줄 수 있다점에서 상태관리가 필요하다고 생각합니다.

하지만 여러개의 컴포넌트를 타고 내려가다 보면 props drilling이 시작되고 props가 도대체 어디서부터 시작된건지 타고 올라가는 것이 쉽지 않아지는데

그때문에 등장한 것이 상태관리 라이브러리입니다. 평소에 상태관리는 react-query를 이용하는 편입니다. react-query는 다양한 기능을 쉽고 빠르게 작성할 수 있다는 점에서 자주 사용합니다.

-> react-query가 무슨 기능을 지원하는가
 fresh상태와 stale상태로 데이터를 관리해 최신상태를 관리하기가 용이하고, api요청 결과를 캐싱하여 중복 요청을 최소화할 수 있습니다. 또한 비동기 api요청에 대한 로딩, 결과, 에러와 같은 여러 상태를 확인 하는 기능을 제공해줍니다.

 

수정답안 

수요일 추가

리덕스는 무엇인가요, 왜 리덕스를 사용하시나요

데이터를 저장소에서 전역상태로 관리하는 것입니다. 애플리케이션에서 상태를 효율적으로 관리 할 수 있도록 도와줍니다. 그래서 SPA에서 유용하게 사용됩니다. 컴포넌트를 props drilling하거나 복잡한과정을 통해 하위에서 상위로 올려줄 필요없이 전역에서 관리를 해서 모든 컴포넌트에서 저장소에 접근해 상태관리를 할 수 있습니다.

 

수정답안 

수요일 추가