Sign in

nextjs

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 |
it dev nextjs nodejs excel

[Nextjs] xlsx 엑셀 파일 비밀번호 적용

xlsx 엑셀 파일에 비밀번호를 적용하는 방안은 여러가지일 수 있다. 첫번째, https://sheetjs.com/ 를 통해 사용할 수 있다. 2년 동안 갱신이 없는데도 주간 다운로드 수를 보면 200만씩 다운로드 되는 것을 보면 일반적으로 활용하기 좋은 라이브러리인 것 같다. 하지만 비밀번호를 적용하려면 유료 pricing 정책으로 잡혀져 있고, 개인 개발자라 연락이 되는건지 의문이다. (https://git.sheetjs.com/sheetjs/sheetjs/issues 에서 답변하는 것 보면 활동을 하는것 같긴하다.) 두번째, 엑셀 파일을 만들고 zip으로 압축하여 zip에 비밀번호를 적용한다. 통상적인 우회방안으로 많이 사용되는 방법이다. 하지만 근래에 windows11 최신 업데이트를 통해 chr..
wono | discuss |