2024 Feb 의 회고

2월의 회고.. 사실 비슷한 거 같기도..

 

 

 

Formik의 validationSchema 와 Yup 의 test 메서드

 

User

 

Formik의 validationSchema를 사용하고 있는데 Yup의 test 메서드에 대해 궁금합니다. 자세한 설명과 예시를 보여주세요.

 

ChatGPT

Yup은 JavaScript에서 사용할 수 있는 강력한 데이터 유효성 검사 라이브러리입니다. Formik과 함께 사용하여 폼의 유효성을 쉽게 관리할 수 있습니다. test 메서드는 Yup에서 제공하는 유효성 검사 규칙 중 하나입니다. 이 메서드를 사용하여 사용자 지정 유효성 검사 규칙을 정의할 수 있습니다.

다음은 test 메서드의 사용법과 예시입니다:

사용법

test(name: string, message: string | function, test: function): Schema

• name: 테스트의 이름을 나타내는 문자열입니다.
• message: 테스트를 통과하지 못했을 때 나타낼 오류 메시지 또는 함수입니다.
• test: 실제 유효성을 검사하는 함수입니다. 이 함수는 값이 유효한 경우 true를 반환해야 합니다. 값이 유효하지 않은 경우 false를 반환합니다.

예시

import * as Yup from 'yup';

const schema = Yup.object().shape({
  username: Yup.string()
    .test('is-john-doe', 'Username must be "john-doe"', (value) => value === 'john-doe')
    .required('Username is required'),
  age: Yup.number()
    .test('is-adult', 'Age must be greater than 18', (value) => value > 18)
    .required('Age is required'),
});

// Later, in your Formik form component
<Formik
  initialValues={{ username: '', age: '' }}
  validationSchema={schema}
  onSubmit={(values, actions) => {
    // Handle form submission
  }}
>
  {(formikProps) => (
    <Form>
      <Field name="username" />
      {formikProps.errors.username && formikProps.touched.username && <div>{formikProps.errors.username}</div>}
      
      <Field name="age" />
      {formikProps.errors.age && formikProps.touched.age && <div>{formikProps.errors.age}</div>}
      
      <button type="submit">Submit</button>
    </Form>
  )}
</Formik>

 

 

위의 예시에서는 두 가지 테스트를 사용하여 유효성을 검사합니다:

1. is-john-doe: username 필드 값이 "john-doe"인지 확인합니다.
2. is-adult: age 필드 값이 18보다 큰지 확인합니다.

test 메서드를 사용하여 필드에 대한 사용자 지정 유효성 검사를 정의할 수 있습니다.

 

 

 

|| 와 ?? 연산자

// 수정필요

이 오류는 checkOptionStatus() 함수가 undefined를 반환하여 .map() 함수를 호출할 수 없기 때문에 발생합니다. 이런 경우에는 함수가 빈 배열을 반환하도록 보장하거나, 함수가 undefined를 반환하는 경우를 처리해주어야 합니다.

가장 간단한 해결책은 checkOptionStatus() 함수가 항상 배열을 반환하도록 보장하는 것입니다. 예를 들어, checkOptionStatus() 함수 내에서 기본값이나 유효한 값을 반환하지 않을 때 빈 배열을 반환하도록 수정할 수 있습니다. 아래는 수정된 코드입니다:

javascript

const checkOptionStatus = () => { if (data.selectedOption === "static") { return data.defaultOptionValue || []; // data.defaultOptionValue가 없을 경우 빈 배열 반환 } return data.dynamicDefaultOptionValue || []; // data.dynamicDefaultOptionValue가 없을 경우 빈 배열 반환 };

이렇게 수정하면 checkOptionStatus() 함수가 항상 배열을 반환하므로 .map() 함수를 호출할 때 오류가 발생하지 않게 됩니다.

 

User

 

||를 쓴 이유가 뭔가요. 당신이 알려준 코드에서 || 를 쓰는 것과 ?? 를 쓰는 것의 차이를 알려주세요

 

ChatGPT

|| 와 ?? 연산자는 모두 값이 falsy 한 경우에 대비하여 기본값을 설정하는 데 사용됩니다. 그러나 두 연산자의 동작 방식에는 약간의 차이가 있습니다.

1. || 연산자:
   • 왼쪽 피연산자가 falsy한 경우, 오른쪽 피연산자를 반환합니다.
   • 왼쪽 피연산자가 truthy한 경우, 왼쪽 피연산자를 반환합니다.

예를 들어, a || b에서 a가 falsy한 경우 b를 반환하고, a가 truthy한 경우 a를 반환합니다.

1. ?? 연산자 (널 병합 연산자):
   • 왼쪽 피연산자가 null 또는 undefined인 경우, 오른쪽 피연산자를 반환합니다.
   • 왼쪽 피연산자가 null 또는 undefined가 아닌 경우, 왼쪽 피연산자를 반환합니다.

예를 들어, a ?? b에서 a가 null 또는 undefined인 경우 b를 반환하고, a가 null 또는 undefined가 아닌 경우 a를 반환합니다.

따라서, 이전에 제안한 코드에서 || 를 사용한 이유는 data.defaultOptionValue 또는 data.dynamicDefaultOptionValue 값이 null 또는 undefined 인 경우 빈 배열을 반환하기 위해서입니다. 만약 data.defaultOptionValue 또는 data.dynamicDefaultOptionValue가 null 또는 undefined가 아니면 해당 값을 반환하게 됩니다.

 

 

기존의 데이터에 대한 고려

- 기존에는 input이었던 것을 select로 바꾼데다가 기존의 값이 아니라 아예 새로운 값이 들어가면서 기존의 페이지가 새로운 값과 맞지 않는 부분으로 어떻게 해야할지 엄청 이야기가 있었다. 마이그레이션 이야기도 있고 반 강제로 바꾸는 이야기도 있지만 결국 쿼리에 대한 내용이라서 우선 사용자에게 안내를 해주는 팝업을 보여주고 수정하도록 유도하는 자유도와 옵션을 주는 내용으로 결정했는데 이러한 부분으로 어떻게 해야할지는 정말 고려할 게 많은 듯.

 

 

보안 인증

인증 관련 TF에서 고려할 게 생각보다 많다. 관리자가 로그에 대한 내용에 대해서라던가 input 중에서 설정과 관련된 경우 sql injection을 방지해야 하고... IP에 대해서도 범위적인 부분이 안되서.. ipv4 형식을 따르면서 시스템적인 0.0.0.0같은 거 부터 서브넷 마스크 쪽인 255.255.255.255 도 막고 기타 등등..

고민할 게 많으면서도 답답한데 보안상으로 필요하니까 싶으면 납득은 된다.

 

 

 

 

2월에는 뭔가 얼레벌레 바빠서 정리가 안 되었네.