증상Vue.js is detected on this page.Open DevTools and look for the Vue panel.크롬 확장에서 이렇게 메시지가 떴는데도 개발자 도구에서 vue 패널이 안보였다. 해결결론: 개발자 도구 새로고침 하면 된다. 1. 개발자 도구에서 command + shift + p2. Reload DevTool 을 검색해서 실행한다. https://github.com/vuejs/devtools/issues/652

라라벨 11 버전 기준입니다.composer, vue.js, inertia.js 등을 설치했다고 가정합니다. 0. Ziggy를 사용하는 이유Ziggy는 Laravel의 서버 측 라우트를 그대로 JavaScript에서도 사용할 수 있게 해준다. 이를 통해 서버와 클라이언트에서 동일한 라우트 이름 구조를 사용할 수 있다. 때문에 프론트엔드와 백엔드 코드의 일관성을 유지할 수 있고 따로 프론트에서 라우팅 로직을 중복하지 않아도 되기 때문에 유지 보수가 간편해진다. 또, URL을 하드코딩하지 않기 때문에 보안성을 높일 수 있다. 1. 설치방법1. Ziggy 설치composer require tightenco/ziggycomposer를 통해 Ziggy를 설치한다. 2. app.blade.php 파일 수정app.j..

1. v-if / v-else-if / v-else A B C A/B/C 아님type 값에 따라 조건적으로 어떤 div가 렌더링 될지 지정할 수 있다.template 엘리먼트에 사용 가능하다.v-for 와 같이 사용하는 것을 피해야 한다.(참고: https://ko.vuejs.org/style-guide/rules-essential#avoid-v-if-with-v-for) 2. v-show안녕!display css 속성만 전환해서 엘리먼트를 조건부로 나타낼 수 있다. => 항상 렌더링되고 DOM에 남는다.template 엘리먼트에는 사용할 수 없다.  3. v-if vs v-showv-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높다.=> 조건이 자주 변경되는 경우에는 v..

0. 들어가며Vue.js 프로젝트가 작을 때는 문제가 없지만, 프로젝트 규모가 커지고 컴포넌트가 많아지면 상대 경로로 import를 설정하는 것이 매우 복잡하다. 이를 해결하기 위해 경로 별칭을 설정하면, 컴포넌트가 위치한 폴더에 상관없이 절대 경로로 다른 컴포넌트를 import할 수 있어 경로 관리가 훨씬 편리해진다. 1. 설정 방법1. 진행하는 프로젝트 루트에 jsconfig.json 파일을 생성한다.2. jsconfig.json 파일 내용을 아래와 같이 수정하고 저장한다.{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": [ // 별칭 지정 "resources/js/*" // 경..

0. 데이터 바인딩Vue 인스턴스의 데이터와 HTML 요소를 서로 연결하는 개념Vue 인스턴스의 데이터가 변경될 때 HTML의 콘텐츠도 자동으로 업데이트 된다.양방향 바인딩(v-model 등) 사용시 HTML 요소의 변화를 Vue 인스턴스 데이터에 실시간으로 반영할 수 있다. 1. 텍스트 보간법메세지: {{ msg }}데이터 바인딩의 가장 기본적인 형태. 이중 괄호를 사용하여 인스턴스의 데이터와 바인딩한다.해당 예시의 경우 컴포넌트 인스턴스의 msg의 속성값이 출력된다.  2. 속성 바인딩 v-bindv-bind 는 태그의 속성(id, class, disabled 등)을 바인딩한다.예시는 id 속성을 컴포넌트의 dynamicId 속성과 동기화 되도록한다. v-bind의 단축 문법v-bind는 매우 일반적..