Sign in

dev

it dev react fullcalendar

[MySchedule project] 15. React-big-Calendar 사용하기 (1)

이번 시간은 react big calendar 라이브러리를 사용해서 스케줄관리에 대한 코드를 작성해 보겠다. 구현에 들어가기 앞서 react-big-calendar 라이브러리를 설치한다. 추가적으로 날짜관리 라이브러리인 moment.js도 같이 설치 해준다. [ 설치 ] npm install --save react-big-calendar npm install moment [ import ] - "react-big-calendar" 라이브러리와 "moment.js"를 설치 했다면 아래 부분을 import 해준다. import { Calendar, View, DateLocalizer } from "react-big-calendar"; import moment from "moment"; import { mom..
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 |