- setup
- install libraries
- styled-components
- react hook form
- react router dom
- apollo client
- react helmet
- react-fontawesome
- Router
- Authentication
- Architecture
- Styles
- Styled-components + TypeScript
- auth(login/signup)
- login page
- extending styled-components
- targeting html tag in styled-components
- css : pseudo-classes(:last-child), pseudo-elements(::placeholder), box-sizing, all:unset
- add web fonts in index.html
- refactoring :last-child to new component
- add several colors to the theme
- use the tag in react-router-dom not use the tag. because the anchor tag triggers refresh so all the states and react application go away.
- utilize components
- prop-types
- signup page
- develop form in React way
- react helmet: should be inside
- react-hook-form
- register, watch, handleSubmit(onSubmitValid, onSubmitInvalid), errors
- validation : required, validate() : async, pattern.....
- mode 유효성 검사를 언제 진행하는지
- onSubmit: Submit 버튼을 클릭할 때
- onChange: 실시간으로 사용자가 인풋에 무언가를 입력할 때마다
- onBlur: 인풋에 무언가를 입력한 뒤 외부를 클릭했을 때(인풋의 포커스 상태가 해제된 순간)
- onTouched: 인풋을 클릭하는 순간부터