Front

Non-Prop 속성 (fallthrough 속성) Non-Prop 속성은 props 또는 event에 명시적으로 선언되지 않은 속성 또는 이벤트 입니다. 예를 들어 class, style, id와 같은 것들이 있습니다. 속성 상속 컴포넌트가 단일 루트 요소로 구성되어 있으면 fallthrough 속성은 루트 요소의 속성에 자동으로 추가됩니다. 예를들어 이라는 컴포넌트가 있다고 가정해보겠습니다. 그리고 이 컴포넌트를 사용하는 부모 컴포넌트는 다음과 같습니다. 최종 렌더링된 DOM은 다음과 같습니다. 최종 렌더링은 자식 컴포넌트의 루트 엘리먼트에 이렇게 상속됩니다. 루트 엘리먼트란? 컴포넌트의 template 태그 속에서 제일 상위 요소입니다. 예: template 바로 밑에 있는 div가 루트 엘리먼트 ..

Events 자식 컴포넌트에서도 부모 컴포넌트로 데이터를 전달 또는 트리거의 목적으로 이벤트를 내보내는것을 말합니다. 그리고 이벤트는 컴포넌트의 emit 메서드를 통하여 발생시킬수 있습니다. 이벤트 발생 및 수신 컴포넌트의 블록 안에서 내장 함수 $emit()을 사용하여 직접 커스텀한 이벤트를 내보낼 수 있습니다. 그러면 부모 컴포넌트에서 v-on(또는 @)을 사용하여 이벤트를 수신할 수 있습니다. .once 수식어는 컴포넌트 커스텀 이벤트에서도 지원됩니다 이벤트 파라미터 이벤트와 함께 특정 값을 내보낼 수 있습니다. $emit 함수 이벤트명에 추가로 파라미터를 넘길 수 있습니다. 그런다음 부모 컴포넌트에서 이벤트와 함께 파라미터를 받을 수 있습니다. 이벤트 선언하기 Vue2와 다르게 Vue3에는 emi..

Props UI나 레이아웃은 동일하지만 게시글의 제목, 내용 같은 데이터는 각각 다릅니다. 그럼 컴포넌트에 각각 제목, 내용 데이터를 전달해야 하는데 이때 Props를 사용하여 컴포넌트로 데이터(속성)을 전달할 수 잇습니다. Props란? Props란? 컴포넌트에 등록할 수 있는 사용자 정의 속성 입니다. 블로그 게시글 컴포넌트에 사용자 정의 속성을 선언하면 이 컴포넌트를 사용하는 부모 컴포넌트에서 데이터 (속성)를 전달할 수 있습니다. Props 선언 Vue 컴포넌트에는 명시적 Props 선언이 필요합니다. 왜냐하면 컴포넌트에 전달된 외부 props가 fallthough 속성으로 처리되어야 함을 알 수 있습니다. 문자열 배열 선언 컴포넌트에 props 옵션을 사용하여 선언할 수 있습니다. 객체문법 선언..

Vue에서 Single-File Component(SFC, *.vue)는 Vue 컴포넌트의 템플릿(template), 로직(script), 스타일(style)을 하나의 파일로 캡슐화 하는 특수 파일 형식 입니다. 확장자는 *.vue이며 다음은 SFC의 예 입니다. 위 예시처럼 Vue SFC는 HTML, CSS, JavaScript의 문법을 유지하면서 확장한 특수 파일 입니다. 언어 블록 각 *.vue 파일은 한번에 최대 하나의 top-level 블록을 포함할 수 있습니다. 콘텐츠는 추출되어 @vue/compiler-dom으로 전달되고, javaScript 렌더 기능으로 사전 컴파일되고, render 옵션으로 내보내어 컴포넌트에 첨부됩니다. 각 *.vue 파일은 한 번에 최대 하나의 블록을 포함할 수 있습..

Vue에서 Single-File Component(SFC, *vue 파일)는 Vue 컴포넌트의 템플릿, 로직, 스타일을 하나의 파일로 캡슐화하는 특수 파일 형식 입니다.

컴포넌트 UI(HTML, CSS, JS) 를 재사용 할 수 있도록 정의한것이 컴포넌트다. 컴포넌트 정의 컴포넌트를 정의하는 방법은 Single-File Conponent (SFC)를 사용하는 방법과 문자열 템플릿 (Spring template)으로 정의하는 방법이 있습니다. Single-File Conponent (SFC) -> 실무에서 일반적으로 사용하는 방법 문자열 템플릿 (Spring template) Single-File Component(SFC) 빌드 도구를 사용할 때 컴포넌트는 일반적으로 Single-File Component(SFC)로 정의할 수 있습니다. Single-File Component(SFC)는 확장자 *.vue를 가진 단일 파일입니다. 문자열 템플릿 빌드 도구를 사용하지 않을 때..

https://npmtrends.com/nuxt-vs-quasar-vs-vuetify nuxt vs quasar vs vuetify | npm trends Comparing trends for nuxt 3.9.3 which has 625,788 weekly downloads and unknown number of GitHub stars vs. quasar 2.14.3 which has 126,915 weekly downloads and unknown number of GitHub stars vs. vuetify 3.5.1 which has 517,559 weekly downloads and unknown n npmtrends.com

Watch 우리는 종종 반응형 상태가 변경 되었을때 감지하여 다른 작업(api 호출 등)을 수행해야 하는 경우가 있습니다. 예를 들어 어떤 상태가 변경 되었을때 DOM을 변경하거나 비동기 작업을해서 다른 상태를 변경하는 것입니다. Compositon API의 watch 함수를 사용하여 반응형 상태가 변경 될 때마다 특정 작업을 수행할 수 있습니다. watch의 첫번째 인자는 감지할 데이터, 두번째 인자는 콜백 함수 () =>{} 콜백 함수의 매개변수로는 (변경된 새로운값, 이전 값) watch (감지 데이터, (새 값, 이전 값) => { }); watch의 첫번째 매개변수로 getter 함수를 넣어 줄 수있다. watch의 매개변수로 array를 넘길 수 도 있다. 결과도 array로 받는다. obje..

v-model 프론트엔드에서 입력 양식을 처리할때 입력 요소의 상태와 자바스크립트의 상태를 동기화해야 하는 경우가 많습니다. value를 바인딩하고 @input 이벤트로 text를 변경하는것은 번거로울 수 있습니다. 그래서 Vue에서는 이런 작업은 단순화 하도록 양방향 바인딩을 할 수 있는 v-model 디렉티브를 제공합니다. textarea :value, @input v-model checkbox, radio, select v-model은 내부적으로 HTML 요소가 어떤 요소냐에 따라 서로 다른 속성(:value)과 이벤트(@input)을 사용합니다. input text="text"와 textarea는 value 속성과 input 이벤트를 사용합니다. checkbox와 radio 버튼은 checked ..

이벤트 처리는 v-on 디렉티브로 사용할 수 있습니다. 그리고 v-on 이벤트는 자주 사용하기 때문에 @단축 표현으로 많이 사용됩니다 메소드 이벤트 핸들러 v-on 디렉티브에서 메소드를 호출할 수 있습니다. 그리고 이때 매개변수로 event 객체를 받습니다 event.target으로 엘리먼트에 접근 할 수 있다. 이벤트 객체 접근 인라인 핸들링에서 event 객체에 접근할 수 있습니다. 접근하는 방법은 $event 키워드를 사용합니다. 바로 함수를 실행시키고 싶을때 $event로 event 객체에 접근한다. 디렉티브 구성 디렉티브는 다음과 같이 구성되어 있습니다. 디렉티브(Directives) : v- 접두사가 있는 특수 속성으로 디렉티브의 값이 변경될때 특정 효과를 반응적으로 DOM에 적용하는것을 말합..