뒤죽박죽 공책 뒤죽박죽 공책

최대한 라이브러리를 사용하지 않고 구현을 하는 것에 집중을 하다가 평소에 제일 사용해보고 싶었던 라이브러리인 react-hook-form을 사용하여보았다. 그래서 react-hook-form의 기초적인 형태에 대해 작성해보고자 한다. 해당 글은 NestJS 13버전과 React-hook-form 7버전을 바탕으로 작성한 글이다. 사용한 계기 form을 일일히 만드는 것은 매우 귀찮은 일이다. 전체적인 form을 만들고, 각각의 input에 onChange를 적용하여 값이 변할 때마다 useState값을 갱신한 후 이를 제출할 때 유효성을 검사하는 이벤트를 다 작성해주고, 통과한다면 이벤트를 실행시키고, 통과하지 못한다면 에러가 발생한 부분에 문구를 출력해주는 등 이러한 작업들을 모두 일일히 작성해줘야 하..

NextJs를 사용하기 전에는 이미지를 넣어야 한다면 태그를 사용하여 이미지를 넣고는 하였다. 하지만 Next 자체에서 컴포넌트가 존재하기 때문에 이를 사용하여 이미지를 넣을 수 있다. 그렇다면 어떨 때 컴포넌트를 사용하고, 왜 사용하는 것인지에 대해 공부한 내용을 작성해보고자 한다. 컴포넌트는 lazy-loading이 지원되며 기본적으로 width와 heigth를 작성해줘야 한다. 또한 alt값을 필수로 작성해야만 오류가 발생하지 않는다. 또한 해당 컴포넌트는 이미지를 최적화해서 보여주기 때문에 사용처에 따라 이미지의 크기를 원본과 다르게 보여준다. 위의 값을 설정하기 위해 지원하는 옵션을 적어보고자 한다. width, heigth // 300px X 300px 괄호 안에 들어간 값은 픽셀로 이미지가 ..

서버사이드 렌더링을 공부하면서 getServerSideProps를 알게 되었다. 쉽게 이야기하면 페이지가 처음 로드될 때 getServerSideProps의 함수를 사용하면 반환된 데이터를 사용하여 페이지를 미리 렌더링 할 수 있게 된다. 이외에도 getStaticPaths, getStaticProps 함수가 존재해 모두 서버사이드 렌더링을 도와준다. 위 함수들은 Next.js에서 기본적으로 제공하기 때문에 추가적인 라이브러리 없이 사용이 가능하다. 하지만 나는 next-redux-wrapper의 라이브러리를 사용하고 있기 때문에 Next.js에서 제공하는 getServeSideProps와 next-redux-wrapper를 섞어 쓰는 것은 추천하지 않는다고 한다. 중요한 것은 나는 next-redux-..