기록을 합시다.

오류메시지 Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes. at..

form을 만들다가, 역시 이것도 내가 하기 귀찮으니 사람들이 만들어준 문명의 이기 중에 하나인 react-hook-form을 이용하기로 했다. 자, 일단은 react-hook-form을 깔아주자. npm install react-hook-form 이 포스트에서는 react-hook-form중에서 사람들이 제일 자주 쓰고 유명한 useForm을 위주로 이야기하겠다. useForm Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com useForm의 props들은 form의 기본 세팅을 해주는 것 위주이다. (지금은 쓸 게 없음..) 우리는 useForm의 return props 중에 registe..

DatePicker를 이용하여, 해당 날짜마다의 데이터를 출력하고싶었다. 하지만 아직 서버를 구현하지 않아 DB에 연결하여 더미데이터를 만들 수 없었다. 그래서 일단은 아래와 같이 직접 일일이 더미데이터 한 7개 정도 만들어놨다. const user_data = [ { key: "1", category: "커피", detail: "라떼", price: 3500, date: new Date() }, { key: "2", category: "외식", detail: "마라탕", price: 8000, date: new Date() }, { key: "3", category: "집밥", detail: "나물", price: 30000, date: new Date() }, { key: "4", category: ..

이번에는 NextUI를 이용해 손쉽게 ProgressBar를 만들어볼 것이다. 아래 이미지는 결과물이다. 일단은 NextUI의 문서를 한 번 확인해보자. https://nextui.org/docs/components/progress Progress | NextUI - Beautiful, fast and modern React UI Library The Progress component allows you to view the progress of any activity. nextui.org 위의 문서를 보았듯이 Progress를 import 시켜서 props에 값을 넣어주면 된다. 확인해본 결과, 당연하게도 Progress의 value값은 0~100이다. 물론 그 이상의 값을 넣더라도 Progress의 ..

정확히는 React 오류이지만.. Next.js 프로젝트를 생성해서 하고 있으니 Next.js라고 제목에 붙였다. 코딩을 하다가 갑자기 이 오류가 났다. 아.. handleSelectedComponent함수를 만들어서, child 한테 props를 넘겨줬는데.. 함수라고 인식하지 못 했다. 부모 컴포넌트와 자식 컴포넌트는 아래와 같다. 이렇게 handleSelectedComponent를 만들어 ButtonGroup 태그에 넘겨줬는데도 왜 함수라 인식 못 했을까? 그것은 바로 props를 자식 태그에 넘길 때 {}를 안 써서였다. ㅜㅜ 즉, ButtonGroup(handleSelectedComponent)라고 쓰면 안 되고, ButtonGroup({handleSelectedComponent})라고 적어야 ..

보통 useState를 이용해 input 요소 안의 글자를 입력하는 것으로 알고 있어서 useState를 썼다. 그.런.데. 영어로는 잘 써지는데 한글은 꼭 두 번씩 글자가 써지는 현상이 일어났다. 그리하여 검색의 검색을 거듭하여 알아보니, 한글이 유니코드이며, 한 글자에 2바이트 이상의 문자라서 그렇다고 한다. (참고로 영어는 한 글자에 1바이트..) 아무튼 한글을 입력하고, 받아올 때에는 useState가 아니라 useRef를 이용하여야 한다. 위와 같이 useRef를 이용하면 해결된다!! 아래는 전체 코드이다. import { useState, useRef } from "react"; import { Button, Input, Card, Col, Row, Text, Spacer } from "@ne..

리액트를 인터넷 강의로 배우기는 했지만..(Udemy, 니코쌤.. ) 역시 내가 UI 구성에 너무 약해서 그냥 있는 걸 활용하기로 했다. 그래서 내가 바로 찾아온 건 NextUI!! https://nextui.org/ NextUI - Beautiful, fast and modern React UI Library Make beautiful websites regardless of your design experience. nextui.org 검색을 해보니 이 라이브러리가 나온지 그렇게 오래되지는 않았다고 한다. 실제로 Document를 봐보면 아직 준비중인 컴포넌트들도 있다. 물론 그 컴포넌트들 빼고도 충분하게 UI 구성이 가능하다. (그리고 쉬워보여서 내가 고름..) 일단은 NextUI를 시작하기 위해서..

express로 코딩을 하고 있는데 에러가 났다.. 전체 에러 메시지는 아래와 같다. C:\account-book\server\node_modules\mysql2\promise.js:369 const localErr = new Error(); ^ Error: Bind parameters must be array if namedPlaceholders parameter is not enabled at PromisePool.execute (C:\account-book\server\node_modules\mysql2\promise.js:369:22) at User.checkEmail (C:\account-book\server\models\userModel.js:26:12) at exports.create (C:..