[Recoil] 새로고침해도 유지되는 state_Recoil Persist

결제 기능을 구현하는 과정에서 결제창이 넘어가며 state가 초기화되어 결제 승인 페이지에 도착하기 전에 사용자가 입력한 예약 정보가 모두 날아가는 문제가 발생했다. 그래서 사용자가 입력한 예약 정보를 임시로 저장하기 위해 Recoil Persist 기능을 이용하여 구현했다. Recoil Persist란? Recoil과 함께 사용할 수 있는 별도의 라이브러리로, Recoil로 생성한 global state를 localStorage 혹은 sessionStorage에 저장하여 새로고침해도 state가 유지되도록 사용할 수 있다. 기존 Recoil 사용 방법과 동일하게 useRecoilState 등의 훅을 이용하여 쉽게 Storage에 상태를 저장할 수 있다. Recoil Persist 사용 방법 npm in..

• format_list_bulleted JavaScript
• · 2023. 6. 6.
• textsms

[TIL] 2023.05.28 button 공통 컴포넌트 만들기

여러 페이지에서 공통적으로 사용하는 버튼이 있었는데 코드가 불필요하게 중복되는 느낌이라 컴포넌트 화해서 재사용하기 위해 GlobalButton 컴포넌트를 생성했다. const GlobalButton = ({ width, text, btnType }: StrProps) => { return ( {text} ); }; export default GlobalButton; GlobalButton 컴포넌트를 사용할 때 props로 3가지 요소를 받아야 했는데 버튼의 width와 type, 그리고 버튼 내부 텍스트였다. width를 props로 받아서 tailwind와 결합해야 했는데 이를 위해 className을 {}로 감싼 후 백틱(`)을 추가했다. 버튼 type의 경우 props로 받아 온 btnType을 t..

• format_list_bulleted JavaScript
• · 2023. 5. 28.
• textsms

[React] HTML <dialog> 태그로 Modal 구현하기

유튜브에서 우연히 HTML dialog 태그 관련 영상을 보고 이번 프로젝트에 너무 적용해 보고 싶었다! 많은 시행착오가 있었지만 결국 dialog 태그를 이용해서 모달을 구현하는 데 성공했다. 구현 과정에서 React에 dialog 태그를 적용하는 자료를 많이 찾을 수 없었기 때문에 코드를 기록으로 남기려 한다. HTML dialog 태그를 사용했을 때의 장점 backdrop을 포함한 기본적인 모달의 UI가 제공된다. (CSS 커스텀도 가능) dialog에서 제공되는 showModal(), close() 등의 API를 이용하여 모달을 쉽게 구현할 수 있다. esc 버튼을 클릭하여 모달을 닫을 수 있다. 기본적인 모달 UI 제공 (CSS 수정 방법) backdrop과 함께 정가운데 모달이 생성된다. 만약..

• format_list_bulleted JavaScript
• · 2023. 5. 28.
• textsms

[TIL] 2023.05.23 Prisma schema Model 생성

Prisma schema The Prisma schema file is the main configuration file for your Prisma setup. It is typically called schema.prisma and consists of the following parts: Data sources: Specify the details of the data sources Prisma should connect to (e.g. a PostgreSQL database) Generators: Specifies what clients should be generated based on the data model (e.g. Prisma Client) Data model definition: Sp..

• format_list_bulleted JavaScript
• · 2023. 5. 23.
• textsms

[TIL] 2023.05.20 Typescript

기본 타입 지정 let project: { member: string[]; days: number; started: boolean } = { member: ['kim', 'park'], days: 30, started: true, }; Union type let age: string | number = 'kim'; let name: (string | number) = 100;. let array: (number | string)[] = [1,'2',3] let object: {data : (number | string) } = { data : '123' } let 학교: { score: (number | boolean)[]; teacher: string; friend: string | string[]; ..

• format_list_bulleted JavaScript
• · 2023. 5. 20.
• textsms

[TIL] 2023.05.19 react-phone-input-2로 국가 번호 입력 dropdown 구현하기

해외 전화번호를 입력할 때 국가 코드를 dropdown 형태로 선택할 수 있게 구현하고 싶었다. 검색 결과 react-phone-input-2라는 리액트를 위한 라이브러리가 있어서 공식문서도 잘 정리되어 있고 UI도 프로젝트와 잘 어울려서 사용하기로 결정했다. import PhoneInput from 'react-phone-input-2'; import 'react-phone-input-2/lib/style.css'; npm 설치 후 PhoneInput 컴포넌트를 import 해서 사용하면 된다. 드롭다운에 특정 국가들만 상단에 고정해서 보여주는 기능도 preferredCountries라는 옵션을 이용해서 매우 간단하게 구현할 수 있어 마음에 들었다. enableSearch 옵션을 true로 설정하면 드..

• format_list_bulleted JavaScript
• · 2023. 5. 19.
• textsms

[TIL] 2023.05.19 Next.js 13버전에 Recoil 적용하기

Root Layout에 바로 RecoilRoot를 넣으려고 했더니 에러가 발생했다. TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. RecoilRoot를 사용하려면 서버 컴포넌트를 클라이언트 컴포넌트로 변경해야 하는 거 같다. 하지만 Root Layout 파일을 클라이언트로 변경하면 모든 컴포넌트가 클라이언트 컴포넌트로 변경되는 결과가 생길 거 같아서 recoil 파일을 따로 빼서 적용하기로 했다. 'use client' import { ReactNode } from 'react' import { RecoilRoot } from 're..

• format_list_bulleted JavaScript
• · 2023. 5. 19.
• textsms

[TIL] 2023.05.16 Prisma 초기 세팅 및 Create 구현

Today I Learned Prisma & PostgreSQL 초기 세팅 Prisma로 Create 하기 Prisma 초기 세팅 Prisma schema Model 생성하기 [TIL] 2023.05.23 Prisma schema Model 생성 Prisma schema The Prisma schema file is the main configuration file for your Prisma setup. It is typically called schema.prisma and consists of the following parts: Data sources: Specify the details of the data sources Prisma should connect to (e.g. a Post div..

• format_list_bulleted JavaScript
• · 2023. 5. 16.
• textsms

[TIL] 2023.05.09 React-Slick으로 Carousel 구현하기

다음과 같은 Carousel을 구현하기 위해서 React-Slick라는 라이브러리를 사용했다. npm 설치 명령어 및 기초 세팅 npm install react-slick --save npm i --save-dev @types/react-slick npm install slick-carousel --save import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; export default function SimpleSlider() { const settings = { dots: true, infinite: true, speed: 500, sli..

• format_list_bulleted JavaScript
• · 2023. 5. 9.
• textsms

[TIL] 2023.05.07 Next.js next/navigation과 usePathname()

route에 따라 코드를 다르게 작성하고 싶어서 useRouter를 이용해서 pathname을 가져오려고 했다. 그런데 서버 컴포넌트를 사용할 때는 next/navigation을 사용하라는 에러 메시지가 떴다. // 수정 전 import { useRouter } from 'next/router'; // 수정 후 import { useRouter } from 'next/navigation'; 그래서 useRouter를 next/navigation에서 import 해 오는 방식으로 수정했는데 또다시 클라이언트 컴포넌트에서만 useRouter를 사용할 수 있다는 에러 메시지가 발생했다. 그래서 최상단에 "use client"를 추가하여 서버 컴포넌트를 클라이언트 컴포넌트로 변경해 주었다. import { us..

• format_list_bulleted JavaScript
• · 2023. 5. 7.
• textsms