form (4) 썸네일형 리스트형 [Vue3] Vue3로 접근성 고려한 Form(양식) 개발하기 Vue3로 접근성을 고려한 Form(양식)을 개발하는 방법의 기초를 학습해 봅시다. 전체 소스 코드 보기 https://github.com/Code-Pop/Vue-3-Forms/tree/l9-end GitHub - Code-Pop/Vue-3-Forms Contribute to Code-Pop/Vue-3-Forms development by creating an account on GitHub. github.com 양식(form)의 기초 1. HTML에서 양식의 기본 동작은 브라우저 탐색(navigation) 이벤트를 트리거하여 지정된 URL로 많은 데이터를 보내는 것입니다. Axios와 같은 라이브러리를 사용하지 않으면 HTML 양식 제출시 브라우저가 완전히 새로운 페이지를 로드하게 합니다다 페이지를 지.. 리액트 테스트 : 폼(Form) 테스트 TLDR: mocking을 이용하여 software가 어떻게 사용되는지(how)를 명시적으로 테스트 할 수 있습니다. > jest.fn 테스트 케이스 작성 시에는 소프트웨어가 사용되는 how에 집중하는게 좋습니다. faker 라이브러리를 사용하여 매번 가짜 데이터를 만들 수 있습니다. 테스트 객체를 쉽게 만들기 위해 오브젝트 팩터리 함수를 사용합니다. 사용자는 Form과 상호 작용하는 데 많은 시간을 할애하며 Form은 응용 프로그램에서 가장 중요한 부분입니다 (예: 전자 상거래 앱의 "체크아웃" Form 또는 대부분의 앱의 "로그인" Form). 사용자가 Form에서 입력을 찾고, 정보를 입력하고, Form을 제출할 때 제출된 데이터가 올바른지 확인할 수 있는지를 검증합니다. 로그인 폼 검증 테스트할.. 리액트 쿼리 : 폼 원문 : https://tkdodo.eu/blog/react-query-and-forms form은 서버 상태와 클라이언트 상태의 경계가 모호지는 영역입니다. 해당 게시물에선 react-hook-form 과 React Query를 함께 사용하는 방법을 알아봅니다. Server State vs. Client State 서버 상태 대부분 비동기 대부분 스냅샷에만 접근 가능 대부분 우리가 소유하지 않은 상태 클라이언트 상태 완전히 제어할 수 있음 대부분 동기적 항상 정확한 값을 알 고 있음 간단한 접근 방법 저는 상태를 props에 넣거나, 다른 상태관리 도구로 상태를 복사하는 방법을 좋아하지 않습니다만, form은 예외가 될 수 있다고 생각합니다. 서버 상태를 초기값으로만 사용할 가능성이 높기 때문입니다. .. [Epic React] form 사용하기 Epic React by Kent C. Dodds https://epicreact.dev/learn/ epicreact.dev kent c dodds 의 Epic React 기초 강의 공부 내용 정리이다. 추가로 적고 넘어갈만한 팁이 있다면 fragment는 flexbox나 grid랑 사용하면 좋다고 한다. jsx를 바벨이 해석할 때. 함수형 컴포넌트와 일반 컴포넌트를 맨 앞글자의 대소문자 여부로 판단하기 때문에 주의해야 함. function UsernameForm({onSubmitUsername}) { const [error,setError] = React.useState(null); const [value,setValue] = React.useState(""); function handleSubmit.. 이전 1 다음
