Sign in

nextjs

it dev nextjs hydration

어쩔 수 없는 hydration mismatch를 useEffect없이 해결하기

이 데이터들은 서버에서 값을 알 수 없으므로, 클라이언트에서 데이터를 처리해야 한다. 만약 이 내용을 서버에서 바로 처리하려고 하면, 서버의 결과와 클라이언트의 결과가 달라질 수 있다. 즉, hydration mismatch가 날 수 있다. 다만 이 방법도 한계가 존재한다. 텍스트 대상으로만 가능하다는 점이다. 만약, nested 된 dom 구조에…
wono | discuss |
it dev nextjs shadcnui csv

[Next.js] 리엑트 테이블 CSV 저장 구현(feat. Shadcn)

개요Shadcn의 Data Table에서 불러온 데이터를 CSV로 저장하는 기능이 필요하여 적용해보았다. export-to-csv 모듈을 설치하고 Shadcn Data Table 모듈에 버튼을 추가하여 커스텀한 페이지를 작성해 보았다. 설치다음의 모듈을 설치하고 다음의 함수를 사용한다.npm install export-to-csv --saveimport { mkConfig, generateCsv, download } from 'export-to-csv' 본문(Shadcn 커스텀)Shadcn Data Table에 CSV 다운 버튼을 적용한 파일이다.ProjectPage.tsx"use client";import * as React from "react";import { useEffect, useState }..
wono | discuss |
it dev react nextjs

[React] 핸드폰 인증번호 타이머 기능을 구현해보자

구현 먼저 구현하기 위해 간단한 핸드폰 번호 입력 폼과 전송 버튼을 간단하게 만들어보았다. 기능에 초점을 두기 위해 최대한 디자인은 심플하게 구성하였다. import styled from "styled-components"; export default function Verification() { return ( 인증번호 전송 ); } const Wrapper = styled.div` display: flex; flex-direction: column; `; const Form = { Wrapper: styled.div` display: flex; gap: 8px; `, Input: styled.input` padding: 12px 18px; border: none; border-radius: 8px; ..
wono | discuss |
it dev nextjs zode phoneregex

zod를 이용해 회원가입 폼을 만들어보기

zod는 타입스크립트를 우선하는 스키마 선언 / 검증 라이브러리입니다. 타입스크립트의 타입체킹을 보완해주는 역할을 수행한다고도 볼 수 있는데 쉽게 생각하면 폼,인풋에 필연적으로 따라오는 유효성검증 로직을 해결해주는 라이브러리입니다. 기본적인 개념과 사용방법은 아래 링크에서 참고해주시기 바랍니다. https://xionwcfm.tistory.com/346 zod 라이브러리 사용법 간단히 익히기 zod zod는 타입스크립트를 우선하는 스키마 선언 / 검증 라이브러리입니다. validation을 도와준다고도 생각할 수 있는데 문법은 간결하고 쉬우면서도 기능은 강력합니다. 공식 documentation에 따르면 xionwcfm.tistory.com 이번엔 위 링크에서 얻은 선수지식을 기반으로 사용할 수 있는 회..
wono | discuss |