Skip to main content

8 posts tagged with "react"

View All Tags

React에서 MSW 2.0 적용, 동적 경로 및 쿼리스트링을 받을 경우 핸들러 파일 수정하기



Mock Service Worker(MSW)는 웹 개발 및 테스트 환경에서 네트워크 요청을 모킹(mocking)하고, 가짜 응답을 제공하여 서버와의 상호작용을 시뮬레이션하는 도구입니다. 이 도구는 특히 API 호출을 테스트할 때 매우 유용하며, 서버가 실제로 존재하지 않거나 서버에 접근할 수 없는 경우에도 클라이언트 애플리케이션을 개발하고 디버깅할 수 있게 해줍니다.

React에서 Firestore를 사용하여 DB 제어하기



Firebase의 Firestore는 유연하고 확장 가능한 NoSQL 기반의 데이터베이스이며, Collection, Document, Field로 구성되어 있고, 프론트엔드 코드만을 사용하여 빠르게 백엔드를 기능을 구현할 수 있습니다.

하지만 직접 백엔드를 구현하는 것에 비해 요금이 비싸고, 쿼리도 빈약하며, 기능의 커스텀에 제약이 많습니다.

위즈윅(WYSIWYG) 에디터, react-quill 사용하기



WYSIWYG(What You See Is What You Get)은 작성중인 문서와 출력될 결과를 동일하게 보여주어 문서 작성을 직관적이고 쉽게 할 수 있게 해줍니다.

리액트에서 WYSIWYG 에디터로 TOAST UI Editor, React Draft Wysiwyg, react-quill 등이 있습니다. 데모 페이지에 들어가 사용해본 결과 react-quill이 가장 사용성이 좋다 느껴져서 사용하게 되었습니다.

[React] input 유효성 검증 및 helper text 표시하기


리액트에서 useState와 useRef를 사용하여 input text의 유효성을 검증하고 helper text를 표시하는 방법입니다.


변수 및 함수 설명​

  • updateData : input값을 inputData에 저장하는 함수
  • checkValidation : 이메일 또는 비밀번호 양식이 맞지 않는 경우, helperText를 표시하는 함수
  • handleChange : input값이 변경될때 실행되는 함수 (updateData, checkValidation 함수 실행)

useState vs useRef​

렌더링이 필요없는 email, password는 useRef를 사용하였고, 렌더링이 필요한 helperText는 useState를 사용했습니다.

코드​

Live Editor
function App() {
  const inputData = useRef({
    email: '',
    password: '',
  });

  const [helperText, setHelperText] = useState({
    email: false,
    password: false,
  });

  const updateData = (id, value) => {
    inputData.current[id] = value;
  };

  const checkValidation = (id, value) => {
    const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    const passwordRegex =
      /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,16}$/;
    const regex = id === 'email' ? emailRegex : passwordRegex;

    regex.test(value)
      ? setHelperText({ ...helperText, [id]: false })
      : setHelperText({ ...helperText, [id]: true });
  };

  const handleChange = (event) => {
    const { id, value } = event.target;
    checkValidation(id, value);
    updateData(id, value);
  };

  return (
    <>
      <input id="email" onChange={handleChange} />
      <span>{helperText['email'] && '이메일 형식을 맞춰주세요.'}</span>
      <br />

      <input id="password" onChange={handleChange} />
      <span>
        {helperText['password'] &&
          '비밀번호는 8~16자 영문 대 소문자, 숫자, 특수문자를 사용하세요.'}
      </span>
    </>
  );
}
Result
Loading...

참고자료