Sign in

nextjs

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

[NodeJS] 엑셀의 차트, 함수, 그래프 유지하며 저장하기 with xlsx-populate

개요 최근에 NodeJS를 통해 엑셀파일을 불러와 새로운 엑셀로 생성하려고 하다 문제가 생겼다. 엑셀을 출력할 때 스타일, 차트, 함수 등이 전부 깨지는 현상이 발생한 것이다. 확인을 해보니 내가 사용하던 xlsx 라이브러리는 엑셀 저장을 할 때 기존에 불러온  엑셀을 그대로 저장하는 게 아닌 새로운 엑셀파일로 저장하는 것이 문제였다. 아무리 찾아봐도 차트를 유지해 주는 기능을 찾지 못했다. 그렇게 삽질을 이어가던 중 xlsx-populate라는 라이브러리를 발견했다. https://www.npmjs.com/package/xlsx-populate xlsx-populateExcel XLSX parser/generator written in JavaScript with Node.js and browser s..
wono | discuss |
it dev nextjs nodejs excel xlsx-populate

JS로 차트 훼손 없이 엑셀 수정하기!!!

자바스크립트로 엑셀 파일을 생성하거나 수정하는데 자주 사용되는 npm 패키지들이 있습니다. 세 패키지에 대해 알아보고 어느 상황에서 어떤 라이브러리를 쓰면 좋을지 정리해 보겠습니다.sheetJSExcelJSxlsx-populate SheetJS가장 대표적으로 많이 사용되는 라이브러리입니다. 주로 쓰거나 읽기 작업에 사용되는 라이브러리입니다. 가볍고 빠르기 때문에 간단한 작업을 하거나 브라우저를 사용할때 이용하면 좋습니다. ExcelJSSheetJS에 비해 스타일 지정, 차트, 머지 등 엑셀의 레이아웃 요소를 조작할 수 있는 고급 기능들을 더 제공합니다. 데이터 시각화와 포맷 중심의 엑셀 작업에서 주로 활용됩니다. xlsx-populate 엑셀 문서 조작에 초점을 맞춘 라이브러리입니다. 기존 엑셀 파일을 ..
wono | discuss |
it dev nextjs excel

[Node.js] Excel 파일 업로드 및 다운로드 하기 (feat. Multer)

1. 계기 회사에서 진행 중인 프로젝트에서 여러 명의 사용자를 추가할 때, 엑셀 파일을 업로드한 후, 해당 파일 데이터를 파싱하여 사용하려고 하는 로직이 추가되었다. 프론트에서도 추가적으로 양식을 다운로드한 후, 작성된 파일을 다시 업로드하는 컴포넌트를 만들게 되었다. 로직은 크게 1. 서버로부터 받은 파일 다운로드 2. 파일 서버로 업로드 두 가지다. 아직 서버쪽 API 개발이 완성되지 않았다고 하여, 임시로 express.js로 node.js 서버를 구현해 테스트해보았다. 2. 개발 환경 테스트용 서버로 express를 사용하였고, FormData 형식의 데이터를 읽기 위해 Multer를 사용할 예정이다. 기본적인 서버는 아래와 같이 세팅하였다. // server.js import cors from ..
wono | discuss |