크롬 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

[Vue 빠른시작] 조건부 렌더링(Conditional Rendering) 예제 추가

1. v-if v-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용된다. 블록은 디렉티브 표현식이 truthy 값을 반환하는 경우에만 렌더링 된다. Vue는 정말 멋지죠! 2. v-else 'v-else' 디렉티브를 사용하여 v-if에 대한 "else 블록"을 나타낼 수 있다. 'v-else' 엘리먼트는 v-if 또는 'v-else-if' 엘리먼트 바로 다음에 와야 한다. 그렇지 않으면 인식되지 않는다. 전환 Vue는 정말 멋지죠! 아닌가요? 3. v-else-if A B C No 4. 에서 v-if v-if는 디렉티브이므로 단일 엘리먼트에 연결해야 한다. 따라서 둘 이상의 엘리먼트를 전환하려면 보이지 않는 래퍼 역할을 하는 엘리먼트에 v-if를 사용할 수 있..

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