작심삼일 개발이야기

라이브러리 없이 Form을 만들고 돌아보니 코드 양이 어마어마하다... React Hook Form을 사용해서 조금 더 쉽게 Form을 만들어보고 싶어서 도전! 아직 공부하며 사용 중이라 완벽하게 마스터하지는 못했지만 아는 것만 정리해보려 한다. 설치 npm install react-hook-form 사용법 const { register, handleSubmit, watch, formState: { errors } } = useForm(); register 유효성 검사에 사용할 요소를 register를 이용해서 연결한다. register에 사용할 수 있는 유효성 검사 목록은 아래와 같다. required (필수 값) min (최소 값) max (최대 값) minLength (값의 최소 길이) maxLen..

const router = useRouter(); console.log(router); 단 2줄로 에러가 발생했다. console.log가 안된다 ㅋㅋㅋ const router = useRouter(); console.log("", router); console.log 첫 번째 인자로 빈 문자열을 넣어서 해결 가능하다. 해결해주겠지...

Next.js를 사용하면서 현재 url 경로가 필요할 때 react와 동일하게 react-router-dom에 있는 useLocation을 사용해서 찾으려고 했다. 결과는 실패 ㅋㅋㅋ Next.js에서 현재 url을 알고 싶을 땐 useRouter를 사용해야한다. import { useRouter } from 'next/router' function Example() { const router = useRouter(); console.log(router); } pathname: 현재 경로 query: 동적 경로 ( :id 값을 사용하게 되면 해당 객체에 포함이 된다. )

px은 CSS에서 가장 기본적인 단위이다. px를 사용하여 크기를 설정하면 그 크기는 절댓값이 되어버린다. 하지만 웹 페이지 사이즈의 변동이 많아 크기가 고정되어 버리면 접근성에 안 좋아질 수 있다. 보통 웹 브라우저의 기본 폰트 사이즈는 16px로 설정되어 있으며 일부 웹 브라우저는 기본 폰트 사이즈를 확대하는 기능을 제공한다. 기본 폰트 사이즈를 확대 하더라도 px로 설정되어 있는 폰트 사이즈는 변함이 없다. (ctrl + 휠 키를 사용한 화면 확대는 화면 전체를 확대하는 것이라 가능하다.) rem을 사용하게 된다면 좋은 점 웹 브라우저 마다 다른 기본 폰트 사이즈에 대응할 수 있다. 저시력자 접근성에 대응할 수 있다. rem을 사용하게 된다면 html의 폰트 사이즈를 기준으로 폰트 사이즈를 계산하게..