신비한 개발사전

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는 서버에서..