신비한 개발사전

zod는 자바스크립트에서 사용할 수 있는 데이터 스키마 검증 라이브러리다. 데이터의 유효성을 확인해주는 것뿐만 아니라, 유효하지 않을 경우 스키마와 일치하지 않는 부분에 대해 내가 지정한 오류 메세지가 담긴 객체를 알아서 반환해주기도 한다. 폼 데이터 검증 등의 상황에서 검증 로직을 간편하게 구현할 수 있도록 도와준다. zod를 사용하면 크게 스키마 정의 → 정의한 스키마를 토대로 데이터 검증 → 검증 성공/실패 여부에 따라 처리 플로우로 로직을 구현할 수 있다. 스키마 정의하기데이터가 올바른 형식으로 들어왔는지 확인하려면 일단 비교할 스키마가 필요하다. 스키마는 라이브러리에서 z를 import한 다음 정의하고 싶은 데이터 타입을 선언해 만들 수 있다. 이때 다양한 조건을 덧붙여서 내가 원하는 데이터가 ..

Nuxt는 Vue 프레임워크에서 SSR 컴포넌트를 쓸 수 있게 해주는 풀스택 프레임워크다. Vue의 Next.js인 셈이다. 디렉토리 구조(root)/ components └ 컴포넌트.vue layouts └ default.vue pages └ index.vue └ page1.vue └ page2.vue app.vue Nuxt는 root 디렉토리에 있는 app.vue나 pages 폴더의 index.vue 파일을 기준으로 기본 주소인 "/"의 메인 페이지를 생성한다. app.vue 파일과 pages 폴더를 함께 쓰려면 app.vue 안에 컴포넌트를 추가하고 /pages/index.vue 파일을 메인으로 써야 하지만, app.vue 파일을 삭제하고 /pages/index...

Konva는 HTML의 요소를 쓰기 쉽게 만들어주는 라이브러리다. 캔버스 안에 오브젝트 하나 그리려고 일일이 lineTo()와 moveTo()를 쓰지 않아도 되는 편리함을 제공한다.  관련 라이브러리는 Konva 외에도 Fabric.js, EaselJS 등 다양하지만 Konva를 선택한 이유는 리액트에서 사용할 때 깔끔해 보여서다. Fabric.js가 제일 인기있는 모양이지만 샘플 코드에서 useEffect를 쓰는 것을 보고 Konva를 써보기로 했다. * 리액트에서 Konva를 쓰려면 konva와 react-konva 둘 다 설치해야 한다. 기본 구조Konva의 캔버스는 컨테이너인 컴포넌트 안에 각 그림을 컴포넌트별로 나뉘는 구조를 갖고 있다. 캔버스 오브젝트는 이 와 의 영역 안에 구현한다. ..

리액트 생태계에 react-calendar가 있듯, Vue 생태계에는 v-calendar 라이브러리가 있다. 현재 깃헙에 수많은 이슈들이 오픈되어 있지만, 간단한 캘린더를 구현할 땐 특별히 큰 문제는 없어서 나도 계속 사용할 것 같다. 다만 v-calendar의 주간 view 컴포넌트에 버그가 있어서 해결하기 위해 이런저런 시도를 해봤고, 그 끝에 나름대로의 대안책을 찾았다. v-calendar는 view prop을 통해 주 단위로 보여주는 캘린더를 구현할 수 있다. 추가로 attributes prop을 전달하면 캘린더 날짜에 이벤트가 있음을 나타내주는 표시와 팝업도 넣을 수 있다. 그런데 주간 view와 과거 날짜의 이벤트가 포함되어 있는 attributes를 함께 설정하면 제일 오래된 이벤트가 발생한..

Vue 3 버전 기준, Vue의 컴포넌트는 SFC(Single File Components)라고 부르는 하나의 *.vue 파일에 만들어 활용할 수 있다. SFC 파일에는 자바스크립트의 동적 기능, 페이지에 렌더링할 HTML DOM 태그, 그리고 CSS 스타일링까지 한꺼번에 작성해서 하나의 독자적인 컴포넌트로 사용할 수 있는데, 우연히 이런 SFC 컴포넌트 내에서 CSS 스타일을 적용할 때 유의해야 하는 점을 알게 됐다. SFC 컴포넌트에서 태그를 사용할 때, 특정 클래스명에 스타일을 부여하면 해당 클래스명을 사용하는 외부 모든 컴포넌트들에도 스타일이 적용된다. 각 .vue 파일에 선언할 수 있어서 해당 파일이 렌더링하는 요소들에게만 적용되는 고유한 스타일이라고 생각했는데, 사실은 아니었던 것이다. 태..

이벤트 emitVue에서는 자식 컴포넌트가 부모 컴포넌트에게 어떤 이벤트에 대한 시그널을 보내는 emit 기능을 활용할 수 있다. 자식 컴포넌트에 defineEmits()로 이벤트의 명칭을 선언하면, 부모 컴포넌트는 자식 컴포넌트를 렌더링할 때 v-on 디렉티브를 통해 해당 이벤트에 listen할 수 있다. v-on 디렉티브에 이벤트가 감지됐을 때 실행할 콜백을 전달하고, 그 콜백은 자동으로 자식 컴포넌트가 이벤트를 emit하면서 보낸 데이터를 인자로 받는다. console.log(msg)" /> 이벤트 emit은 Click me 컴포넌트 prop자식 컴포넌트가 prop을 받을 땐 defineProps()에 명시한다. 타입스크립트의 경우 defineProps() 안에다가 명시하는 대신 제네릭을 사..

Clerk 서비스를 사용하면 간편하게 인증 플로우를 구현할 수 있는 것은 물론, 유저 계정을 권한별로 나누도록 구현할 수도 있다. Clerk에서는 Organization이라는 부가기능을 통해 유저를 그룹별로 관리하고 어드민 권한 등을 설정할 수 있지만, Pro 티어를 사용하지 않으면 한 Organization에 최대 5명까지만 추가할 수 있다. 하지만 metadata를 활용하면 Pro 티어 없이도 어드민 유저를 지정해 특정 페이지에 접근할 수 있도록 구현할 수 있다. 유저 계정에 metadata 추가Metadata는 API를 사용하거나 Clerk 대시보드에서 수동으로 설정할 수 있다. Public과 unsafe metadata는 클라이언트에서 접근할 수 있는 반면 private metadata는 서버에서..

최근 간편한 authentication 솔루션으로 Clerk가 많이 보이고 있어서 한번 활용해 보기로 했다. 대부분의 메이져 프레임워크를 지원하고, 공식 문서도 잘 정리돼있어서 빠르게 시작할 수 있다. 마침 사용자 로그인 기능이 필요한 Next.js 프로젝트가 있어서 바로 @clerk/nextjs 패키지를 설치해 사용해봤다. Clerk 서비스 사용에 필요한 퍼블릭과 시크릿 키는 .env.local 파일에 추가하면 된다고 한다. Clerk에서 제공하는 API를 사용하려면 우선 를 wrap 시켜준다. 앱 최상위에 provider를 적용해 두면 모든 페이지에서 Clerk의 인증 관련 훅을 사용할 수 있게 된다.import { ClerkProvider } from "@clerk/nextjs";export def..