[Vue 빠른시작] watchers(감시자) 예제 추가(Options API ver)

[Vue 빠른시작] watchers(감시자) 예제 추가(Options API ver) 감시자 항목은 생각보다 정리가 길어져서 Options API ver, Composition API ver으로 나누어서 작성함 이후글 : [Vue 빠른시작] watchers(감시자) 예제 추가(Composition API ver) 1. Basic Example computed(계산된 속성)은 계산되어 파생된 값을 선언적으로 사용할 수 있게 한다. 그러나 상태 변경에 대한 반응으로 "사이드 이펙트"(ex. DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경하는 것)를 수행해야 하는 경우가 있다. options API를 사용하는 경우, watch 옵션을 사용하여 반응형 속성이 변경될 때마다 함수를 실행할 수 ..

• format_list_bulleted Frontend/Vue3
• · 2024. 1. 18.
• textsms

크롬 Vue.js devtools 사용 시 "Vue.js not detected" 오류

크롬 확장프로그램에서 Vue.js devtools(https://chromewebstore.google.com/detail/nhdogjmejiglipccpnnnanhbledajbpd?hl=ko)을 설치했는데 막상 사용하려고 하니 위 이미지와 같이 "Vue.js not detected" 오류가 뜨면서 사용이 불가능했다. 구글링 한 결과 확장 프로그램 관리에서 옵션 하나를 변경하니 잘 작동하였다. 1. Vue.js devtools 우클릭 후 확장 프로그램 관리 2. 하단의 " 파일 URL에 대한 액세스 허용" 허용 체크 3. 새로 고침 후 개발자 도구를 다시 열면 Vue 탭을 확인 할 수 있다. 단, Vue로 제작된 사이트여야 할 것이고 보안상 devtool을 허용하지 않은 경우도 있다. Vue 공홈에서 d..

• format_list_bulleted Frontend/Vue3
• · 2024. 1. 17.
• textsms

[Vue 빠른시작] Lifecycle Hooks 예제 추가

[Vue 빠른시작] Lifecycle Hooks 예제 추가 각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 예를 들어 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고 데이터가 변경되면 DOM을 업데이트해야 한다. 그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행하여, 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있도록 한다. 1. Registering Lifecycle Hooks 예를 들어 mounted 훅은 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있다. {{ msg }} 인스턴스 생명 주기의 여러 단계에서 호출되는 다른 훅도 있으며, 가장 일반적으로 사용되는 것은 mo..

• format_list_bulleted Frontend/Vue3
• · 2024. 1. 17.
• textsms

[Vue 빠른시작] Form Input Bindings 예제 추가

프론트엔드에서 폼을 처리할 때, 폼 입력 엘리먼트의 상태를 JavaScript의 상태와 동기화해야 하는 경우가 많다. 값 바인딩을 수동으로 연결하고 이벤트 리스너를 변경하는 것은 번거로운 작업이다. v-model 디렉티브는 위의 내용을 다음과 같이 단순화하는 데 도움이 된다. 또한 v-model은 다른 유형의 입력인 및 엘리먼트에 사용할 수 있다. 사용되는 엘리먼트에 따라 자동으로 다른 DOM 속성 및 이벤트 쌍으로 확장된다. 텍스트 유형의 과 경우, value 속성과 input 이벤트를 사용한다. 과 경우, checked 속성과 change 이벤트를 사용한다. 는 value를 속성으로 사용하고 change를 이벤트로 사용한다. 참고! v-model은 모든 폼 엘리먼트에서 감지되는 초기 value, ch..

• format_list_bulleted Frontend/Vue3
• · 2024. 1. 16.
• textsms

[Vue 빠른시작] Event Handling 예제 추가

1. Listening to Events 일반적으로 v-on 디렉티브는 단축 문법으로 @기호를 사용하며, DOM 이벤트를 수신하고 트리거될 때, 사전 정의해둔 JavaScript 코드를 실행할 수 있다. v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용한다. 핸들러 값은 다음 중 하나일 수 있다. Inline handlers: 이벤트가 트리거될 때 실행되는 인라인 JavaScript(네이티브 onclick 속성과 유사) Method handlers: 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로 2. Inline Handlers 다음과 같이 간단한 경우에 사용된다. // Options API ver 1추가 숫자 값은: {{ count }} 3. Me..

• format_list_bulleted Frontend/Vue3
• · 2024. 1. 16.
• textsms

[Vue 빠른시작] List Rendering 예제 추가

[Vue 빠른시작] List Rendering 예제 추가 1. v-for v-for 디렉티브를 사용하여 배열을 리스트로 렌더링 할 수 있다. v-for 디렉티브는 item in items 형식의 특별한 문법이 필요하다. 여기서 items는 배열이고, item(이하 아이템)은 배열 내 반복되는 엘리먼트의 별칭(alias) 이다. // Options API ver {{ item.message }} // Composition API ver const items = ref([{ message: 'foo' }, { message: 'bar' }]) 에러 발생 화면 docs에 나와있는 예제를 따라하면 실행은 되지만 위 에러가 등장한다. [vue/require-v-for-key] Elem..

• format_list_bulleted Frontend/Vue3
• · 2024. 1. 16.
• textsms