끄적이는 개발노트

프론트엔드에서 쿠키를 사용하기 위해 라이브러리를 찾던 중 js-cookie를 사용했다. 일반적으로 Next.js 나 React.js에는 react-cookie를 많이들 사용하고 있었지만, 본인은 js-cookie를 선택했는데 이유는 다음과 같다. 본인에게 좀 더 사용법이 직관적 많은 사용률 지속적인 업데이트 1. 설치 yarn add js-cookie 2. 쿠키 생성 Cookies.set('name', 'value') Cookies.set('name', 'value', {expires: 7, path: '/'}) 3. 쿠키 가져오기 Cookies.get('name') 4. 쿠키 삭제 Cookies.remove('name')

이번 포스트에서는 모달창을 생성해주는 npm인 react-modal에 대해 알아본다. import ReactModal from "react-modal"; import { useEffect, useState } from "react"; import { IoIosCloseCircle } from "react-icons/io"; const HeoTest = () => { const [modalOpen, setModalOpen] = useState(false); // modal 창 여부 // modal 창 팝업 시 뒤에 배경 scroll 막기 useEffect(() => { modalOpen === true ? (document.body.style.overflow = "hidden") : (document.bo..

이번 포스트에서는 타이머 기능을 만드는 방법을 알아본다. 본인이 선택한 방식은 useInterval로, react에서 제공하는 hook이 아니라 custom hook이다. 이를 활용하는 이유는 setInterval과 clearInterval을 활용하여 타이머를 만드는 것보다 장점이 많다. 코드가 간결해진다. delay를 변수로 활용 가능하다. import { NextPage } from "next"; import { useState } from "react"; import { useInterval } from "react-use"; const Test: NextPage = () => { /*****************************************************************..

이번 포스트에서는 달력을 만들고 일자 선택이 가능한 react-day-picker npm에 대해 알아본다. import { useState } from "react"; import DayPicker from "react-day-picker"; import "react-day-picker/lib/style.css"; const Calendar = () => { const [day, setDay] = useState(new Date()); // 날짜 state const [schedule, setSchedule] = useState( `${new Date().toLocaleDateString()} 일정` ); const modifiers = { toDay: new Date(), selectDay: day, ..

지난 포스트에서는 react-hook-form 기본 설정을 알아보았다. 이번 포스트에서는 react-hook-form에서 자주 사용되는 기능들에 대해 해당하느 부분의 코드를 살펴보며 알아본다. 1. 필수값

이번 포스트에서는 react-hook-form 사용법에 대해 알아본다. React.js에서 폼, 양식을 만들 때 사용하는 라이브러리다. 기존에 제공하는 폼을 사용할 경우, 간단한건 쉽게 되지만, 복잡하고 다양한 정보를 받는 폼을 만들 경우, 원하는대로 다루기가 매우 복잡해진다. 이 때, 간결하고 쉬운 코드작성을 도와주는 것이 react-hook-form 이다. react-hook-form은 기존의 폼에서 입력해야 하는 여러 번거로운 작업을 줄여주고, Typescript로 작성되어 호환이 잘 된다. 또한, 컴포넌트 기반으로 작동하여, 성능이 우수하다. 1. 설치 npm i react-hook-form 2. 사용법 기존 Form import { useState } from "react"; const Logi..