Vue

Props 단방향 데이터 흐름 부모 → 자식 방향으로 데이터 전달 부모 컴포넌트가 업데이트될 때마다 자식 컴포넌트의 모든 props가 최신 값으로 업데이트된다. 따라서 자식 컴포넌트 내부에서 props를 변경하려 하면 안된다. defineProps 자식 컴포넌트에서 props를 변경해야 하는 경우 1. props는 초기 값을 전달하는 데만 사용하고, 이를 자식 컴포넌트에서 로컬 데이터 속성으로 할당하여 사용 const props = defineProps(['initialCounter']) // props.initialCounter는 counter의 초기 값으로 사용됩니다. // 추후 props가 갱신되어도 counter 값이 업데이트 되지 않습니다. const counter = ref(props.init..

v-slot이란? 기존 Vue2에서는 slot과 slot-scope 라는 각각의 디렉티브를 사용했는데, 2.6.0버전부터는 이 두가지 슬롯을 합친 v-slot 디렉티브를 도입했다. 슬롯은 특정 컴포넌트에서 자신에게 등록된 자식 컴포넌트의 내용을 재정의 할 수 있는 디렉티브이다. props 사용하기 귀찮을 때 사용할 수도 있지만, 완전히 대체하지는 못한다. (쓰임이 조금 다르다) slot 문법은 HTML 태그처럼만 사용할 수 있다. slot 태그가 있는 곳은 실질적으로 렌더링될 위치이다. 그때 부모 컴포넌트에서 그 위치에 제공할 대체 컨텐츠에 대한 내용을 작성한다. 즉, 코드는 상위에 작성되지만, 실질적인 렌더링 위치는 slot 태그가 있는 하위의 컴포넌트인 것이다. v-slot 사용법 이름이 없는 슬롯은..

게시글의 내용은 mkEditor로 작성되어 저장된 html이다. 그렇기 때문에 이를 게시글 상세 페이지에 보여주기 위한 방법을 고민했는데, 그 중 가장 간단한 것이 div 태그에 v-html을 바인딩하는 것이다. 그러나 v-html은 사용이 지양되고 있다. 그 이유는 XSS 공격 위험 때문이다. 우리가 렌더링하는 데이터의 경우 분리된 관리자페이지에서 작성 및 수정이 이뤄지기 때문에 신뢰할 수 있는 컨텐츠라고 생각했지만, 혹시 모를 위험에 v-html은 떠나보내줬다. 대신 q-editor을 사용해서 간단하고 가볍게 html 내용을 출력했다. 내가 필요한건 오직 html을 읽는 것 뿐이기 때문에 readonly로 사용했으며, toolbar을 지워버렸다. 굉장히 심플한 형태로 바인딩할 데이터, readonly..

업그레이드 이유현재 개발 환경은 Vue 프레임워크와 TypeScript 언어를 사용하고 있다.개발을 하던 중 defineProps의 인터페이스를 지정해줄 때, 3.0.0 버전의 경우 동일한 SFC 파일 내부에 정의된 인터페이스만 읽을 수 있었다.즉, 외부 파일에 선언된 인터페이스를 Import 해오는 것이 불가능했다. (이는 declare로 선언된 인터페이스도 동일) 3.3 버전 이전의 Vue는 해당 props 인터페이스의 속성을 분석하여 해당하는 런타임 옵션을 생성할 수 있어야 하기 때문에 타입 정의를 로컬 환경으로 제한하고, 리터럴과 인터페이스만을 지원했었다. https://blog.vuejs.org/posts/vue-3-3#imported-and-complex-types-support-in-macr..