vue

ref()composition API에서 반응형 상태를 선언 시 권장하는 방법import { ref } from 'vue'const count = ref(0) 템플릿에서 ref를 사용할 때는 .value 를 추가할 필요가 없다. 편의상 ref는 템플릿 내에서 사용될 때 자동으로 언래핑된다.이벤트 핸들러에 직접 참조를 변경할 때도 .value 가 불필요하다.pluscount : {{ count }} 다만 이벤트 핸들러에 따로 정의한 함수를 바인딩하여 ref를 변경할 경우, 스크립트에서 .value 는 필요하다.pluscount : {{ count }}const plusCount = () => { count.value++} 🔎 react의 useState와 비슷한 기능? 상태 관리를 위한 도구라는 점에서..

vue의 반응성 시스템을 공부하며 찾아 본 내용이라 vue에 조금 치중되어 있습니다…   공통점1. 선언적 방식으로 UI를 업데이트 한다.개발자는 데이터가 바뀌었을 때 어떤 식으로 UI가 바뀌는지를 명시하는 대신, 데이터와 UI 간의 관계를 설정하면 내부에서 알아서 UI를 갱신해준다. 2. Virtual DOM 사용데이터가 변화하면 실제 DOM을 바로 업데이트하는 대신 가상 DOM을 먼저 계산하여, 변경된 부분만 실제 DOM에 적용하는 방식으로 성능을 최적화한다. → reconciliationhttps://ko.vuejs.org/guide/extras/rendering-mechanism#virtual-dom 3. 컴포넌트 기반각 컴포넌트는 자체적인 상태를 가지고 있으며, 그 상태가 변할 때 UI를 갱신한..

Vue 2의 한계Vue 2에서 사용된 Object.defineProperty 는 객체의 각 속성에 접근할 때마다 getter와 setter를 설정하여 반응성을 제공하는 방식이다.해당 방식은 몇 가지 한계를 가지고 있다.새 속성 추가 : 이미 존재하는 속성에 대해서만 반응성을 적용할 수 있기 때문에, 객체에 새 속성을 추가하거나 배열의 특정 항목을 변경하는 경우 반응성을 처리하지 못했다.배열 처리 : 배열의 특정 인덱스 변경이나 크기 조작도 반응성 시스템에서 추적되지 않는다.성능 문제 : 큰 객체의 모든 속성에 일일이 getter와 setter를 정의하는 방식이므로, 특히 중첩된 객체 구조에서는 성능과 메모리 사용량 면에서 부담이 있었다.  Vue 3에서의 Proxy 기반 반응성 구현Vue 3의 반응성 시..

Type 선언 방식 defineProps() 는 2가지 타입 선언 방식을 가지고 있다. 1. 런타임 선언 ◾ ( ) 안에 인수를 정의 2. 타입 기반 선언 ◾ Props의 타입을 미리 정의해두고 컴파일러는 이를 기반으로 동일한 런타임 옵션을 추론한다. (타입스크립트와 함께 사용한다면 이 방법을 권장!) 안에 인수를 정의 위의 두 가지 선언은 모두 사용가능하지만, 동시에 사용할 수는 없다. 또한 Props 타입을 별도의 인터페이스로 분리할 수도 있다. 또한 인터페이스를 외부 소스에서 가져올 수도 있다 (import) ※ 외부 인터페이스 참조는 3.3버전 이상에서만 가능함 (하위 버전에서는 로컬 인터페이스 참조만 가능) → 내가 Vue 버전 업데이트를 진행한 이유 기본 값 설정 2번째 방법인 타입 기..

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..