2/1화

appsmith

• Drag & Drop으로 ui 구성
• API 연결 배포
• 인증/인가도

2/2수

Managing list of form fields w/ formik through (ex. todo app)

• useField
• FieldArray

Accessible Formik forms

• aria-invalid="true"
• aria-required
• → 내가 잘 모르는 것

2/3 목

Building dynamic forms w/ Formik w/ React, TS (2018)

• Form in React 단점
• <Field>
• validate
  • validationSchema (by yup)
• Custom Styled fields (by styled components)
• <FieldArray>
• 글 순서 참고하만

Simple React form validation w/ Formik, Yup, Spected

• 비밀번호 재확인 → yup의 when() 사용하면 될듯
• Validation 요구사항 인상적
• yup: pros, cons
• spected: pros, cons

2/4 금

Handling fields and reCaptcha

• 그냥 각종 라이브러리 사용

2/5토

The Joy fo Forms w/ React and Formik

• 배경: 다양한 type? 검증? 비동기? 비활서? dirty? → formik
• formik
• yup. validate 직접 작성도
• Form Layout <TextInput>
• Form state and submission
  • actions.setSubmitting(false)
  • isSubmmiting 으로 버튼 제어

Painless React Forms w/ Formik

• Formik 이 해결할 문제
  1. Props → form state 변환
  2. 검증, 오류 메시지 (w/ yup)
  3. 폼 제출
• HoC 방식 사용
• Yup.object().shape() → 이걸 많이 사용하네
  • .when('email', email => ...) → 의존적 검증 가능
• gif 땜에 집중 안됨. 대충 읽음

2/7월

Using formik to handle forms in react

• 컴포넌트는 상태와 프롭으로 살고 숨쉰다
• 제어폼 , 비제어폼, 비제어 다루기 복잡해
• react hook form, react form 과 비교
• 세 가지 방법
  • 훅 useForm
  • 컨택스트 Formik
  • HoC withFormik
• 비니니스 로직만 남기고 폼은 formik에 맡겨
• validation
  • form lv
  • field lv
  • manual trigger

Conventional commits

• 앵귤러 커밋 가이드린
• 예. feat(api): send an email...
• 목적: 자동화, 구조화된 이력

2/8화

Formik. 3rd party binding / guide.validation

• form level validation: validate, validationSchema
• field level validation
• manual triggering validation: validateField
• display error msg

Formik.Arrays and nested object

Formik.ts

Formik.submission

• pre submission
  • isSubmitting
  • touch all fields
• validation
  • isValidating
  • run all fields validate
• submission

2/9수

Formik.api ref

• connect
• err msg
• fast field
  • 일반 필드는 모든 프롭 변경마다 렌더.
  • 이것은 자기 값만 보고 렌더
  • shouldCompnentUpdate와 관련
  • 모든 필드가 독립적일 때 사용
• field
  • as, children, component

(번역) Remix vs Nextjs

• remix 더 나아
• 일다 중단. 번역 별로

2/10목

Formik.api ref(계속)

• FieldArray. 뭐가 다르지?
• Form. handleSubmit, Reset 연결
• Formik
• useField
• useFormik. 비추. 컨택스트 생성. Formik, withFormik 사용할수 없을때 쓸것
• useFormikContext. AutoSubmitToken
• withFormik. formikbag(props, form handler)

지식인 앱을 flutter로 개발 이유

• dart 쉬워
• 선언형 ui
• vs code
• 핫 리로드
• 신규 개발보다 기존 것을 그대로 구현 더 어려워

2/11금

formkic.code

• 초기값으로 ref 사용
• context 사용
• useCallback

브라우저 주소창에 url을치면 일어나는 일들

• 면접 단골 질문

2/12토

인프런 장애 회고. 2022년1월 100% 할인 이벤트 장애 부검

• 모르는 키워드
  • dead tuple rate
  • postgresql mncc(multi version concurrency control)