# yup

38개의 포스트
post-thumbnail

[TIL] react-hook-form

24-1 HOF와 로컬 스토리지를 활용한 기능 만들기24-2 react-hook-form24-3 검증 라이브러리(yup)브라우저 저장소를 이용하면 비회원 전용 장바구니를 구현할 수 있다.쿠키, 로컬 스토리지, 세션 스토리지 중 어떤걸 선택해도 상관없다.각 브라우저 저장

2023년 4월 17일
·
0개의 댓글
·

2023. 4. 14 , 17

INDEX HOF&로컬 스토리지를 활용한 기능 만들기 (예시 코드) 코드를 구현하며 쿠키, 로컬 스토리지, 세션 스토리지 중 어떤 것을 이용해도 좋다. 각 브라우저 저장소의 특성을 고려해 기획 의도에 적합한 저장소를 선택할 것 비회원 장바구니 기능 구현 1) fet

2023년 4월 17일
·
0개의 댓글
·
post-thumbnail

#2.항해 sw camp 로그인 회원가입 기능 제작

개발기간이 2주뿐이여서 기능 구현에만 집중한 나머지 블로그 정리할 여건이 되지 않았다.mvp 기능까지 구현을 마친 상태에서 밀린 포스트를 작성하려고 한다.내가 프로젝트에서 맡은 구현은 로그인과 회원가입 기능이고 내가 이 기능을 맡은 이유는평소 경험하지 못했던 파트이기도

2023년 3월 16일
·
0개의 댓글
·
post-thumbnail

React 유효성 검사

React Hook Form 과 YUP을 사용하여 훨씬 편하게 유효성 검사 구현을 해보자

2023년 2월 1일
·
0개의 댓글
·
post-thumbnail

[React] React-Hook-Form

폼을 자동으로 만들어주는 라이브러리 React-Form Redux-Form - redux에서만 사용이 가능하다는게 단점 Formik - 3년전까지만해도 유명했었음 클래스형에서 함수형으로 이동하면서 떨어짐(러닝커브가 심함) React-Hook-Form - 함수형에서

2022년 12월 4일
·
0개의 댓글
·

로그인, 회원가입 구현

로그인, 회원가입을 react-hook-form 사용해 바꿔보기import CreateUserButtonPage from "../buttons/createUserbutton/button";import CreateUserInputsPage from "../inputs/c

2022년 12월 4일
·
0개의 댓글
·

24day - React-hook-form, yup

React-hook-form 제어 컴포넌트는 입력할 때마다 state에 저장되는 방식으로 동기화에 초점이 맞춰져 있다. ex) 안녕 -> ㅇ,ㅏ,ㄴ,ㄴ,ㅕ,ㅇ 비제어 컴포넌트는 state에 저장하지 않고 필요할 때 document.getElementById나 useR

2022년 12월 3일
·
0개의 댓글
·

12/2 폼사용, 검증, 공통컴포넌트

어제수업내용을 정리해본다.사실, 게시판 만드는데 배운걸 적용해보느라 시간이 훌쩍가... 오늘이 되었다.늘 강조하시는 부분이지만, 코드를 유지보수 쉽게하기위해 리펙토링이라는 과정을 거쳐야한다.코드를 간단하게 최대한 줄이는 것이다.그러나 쉽지는 않았다...폼을 자동으로 만

2022년 12월 3일
·
0개의 댓글
·
post-thumbnail

[React] 폼을 자동으로! React-Hook-Form, 공통 컴포넌트란?

폼들을 어떻게 하면 효율적으로 관리할 수 있을까?Formik이 원래 인기가 많았으나, 클래스형 컴포넌트에서 함수형 컴포넌트로 넘어가면서 '굳이 Formik을 써야하나?' 라는 인식이 생겨 굉장히 편리한 React-hook-form이 나왔다. 사용법도 쉬워서 요즘 많이

2022년 12월 2일
·
0개의 댓글
·
post-thumbnail

formik + yup 사용해보기 -2

이제 유효성 검사를 추가한 formik을 살펴보자.yup을 쓰는건 아니고, 먼저 기본적으로 if 문을 사용하여 유효성 검사를 하는 형태다.커스텀한 유효성검사 함수 validate를 만들고, 그 안에 initialValue 중 유효성 검사가 필요한 애들을 조건문으로 정의

2022년 11월 18일
·
0개의 댓글
·
post-thumbnail

formik + yup 사용해보기 -1

이번 프로젝트에서 방을 생성하는 모달을 만들어야 했다.방을 만들며 몇몇 부분에 대해 유효성 검사를 해야했고, form의 형태로 백엔드에 데이터를 넘겨줘야한다.리액트에는 form을 위한 다양한 라이브러리들이 있는데, 그 중 formik이라는 친구를 사용해보기로 했다.구글

2022년 11월 17일
·
0개의 댓글
·

main-프로젝트/ 회원가입 유효성 검사

아직 서버 연결이 되지 않아서 기다리는 겸 유효성 검사 부분 코딩을 먼저 진행했다. typescript로 진행하는 것은 처음이어서 검색을 하던 중, yup 이라는 좋은 라이브러리를 발견했다react-hook-formyup@hookform/resolvers다음 명령어를

2022년 9월 17일
·
0개의 댓글
·
post-thumbnail

24일차-2) [REACT/JS] react-hook-form / yup

react-hook-form > 우리는 이전까지 state를 직접 만들고 onchange함수도 일일이 만들어서 바인딩해주었음. 그러나, 폼 라이브러리를 이용하면 더이상 이러한 코딩을 하지 않아도 된다. 폼 라이브러리에는 react-form, redux-from, re

2022년 8월 6일
·
0개의 댓글
·

검증 라이브러리(yup)

검증 라이브러리로 대표적인 것이 yup 입니다.

2022년 7월 7일
·
0개의 댓글
·
post-thumbnail

Formik과 Yup을 사용하여 input validation 간편하게 처리하기

언제까지 util/validate.js 만들어 사용할꺼야

2022년 6월 14일
·
0개의 댓글
·
post-thumbnail

Day-24 useApolloClient, form, yup, 정규표현식

기존에는 useQuery를 사용해서 데이터를 불러오는 방법을 사용을 했다.하지만 useQuery는 내가 원하는 시점에서 데이터를 불러오지 않고 그 페이지가 실행되면 바로 불러와지기 때문에 axios를 이용하여 원하는 시점에 불러오면 되지만 axios는 rest 방식이므

2022년 6월 10일
·
0개의 댓글
·
post-thumbnail

24) Yup,, 왜 이제 알았는지?

Algorithm Self Study, Common-Component, Control Components, Non-Control Components, react hook form, useApolloClient, use query, yup, Algorithm Class

2022년 6월 10일
·
0개의 댓글
·
post-thumbnail

코드캠프 FE 24일차 - TIL(useApolloClient,React-Hook-Form,Yup,Common-Component)

학습목표UseQuery를 axios처럼 사용할 수 있대 >> useApolloClient폼을 자동으로 >> React-Hook-FormValidation 라이브러리 >> Yup재사용을 위한 공통컴포넌트 >> Common-Componentjsx가 있으면 하이오더 컴포넌트

2022년 6월 10일
·
0개의 댓글
·

[next + emotion + react-hook-form + yup](외부 검증 라이브러리) 회원가입 폼 만들어보기

react-hook-form + yup(외부 검증 라이브러리) 회원가입 폼 만들어보기

2022년 4월 20일
·
0개의 댓글
·
post-thumbnail

CodeCamp 24일차

여러가지 쿼리 방식 useQuery : 요청을해서 data를 받아오면 알아서 자동으로 그려줌 useLazyQuery : 어떠한 함수를 실행할 때 요청 이후 동작은 useQuery와 동일 useApolloClient : 데이터를 가져온 후에 변수에 담거나 알아서 가공해

2022년 4월 14일
·
0개의 댓글
·