[Vue.js] Vue.js에서 Ziggy를 이용해 Laravel route name 사용하기
·
Vue.js
라라벨 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..
[Vue.js] 조건부 렌더링
·
Vue.js
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..
[Vue.js] 경로 별칭 설정하기(@)
·
Vue.js
0. 들어가며Vue.js 프로젝트가 작을 때는 문제가 없지만, 프로젝트 규모가 커지고 컴포넌트가 많아지면 상대 경로로 import를 설정하는 것이 매우 복잡하다. 이를 해결하기 위해 경로 별칭을 설정하면, 컴포넌트가 위치한 폴더에 상관없이 절대 경로로 다른 컴포넌트를 import할 수 있어 경로 관리가 훨씬 편리해진다. 1. 설정 방법1. 진행하는 프로젝트 루트에 jsconfig.json 파일을 생성한다.2. jsconfig.json 파일 내용을 아래와 같이 수정하고 저장한다.{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": [ // 별칭 지정 "resources/js/*" // 경..
[Laravel] 프로젝트 시작하기(+ Vue.js, Inertia.js)
·
Laravel
M1 맥 환경 기준, VS code 사용php, composer, node.js 설치 완료 후 진행 1. 새 프로젝트 설치composer create-project laravel/laravel:^11.0 example-app버전과 프로젝트명을 지정하여 프로젝트를 설치한다.프로젝트가 설치된 경로로 이동해 'php artisan serve'를 통해 내장 서버를 구동하고,INFO  Server running on [~]에서 ~에 해당하는 도메인을 브라우저에 입력했을 때 아래 이미지처럼 라라벨 기본 페이지가 나오면 완료. 2. Vite를 통해 Vue.js 설치npm install --save-dev @vitejs/plugin-vue프로젝트 폴더 내에서 위 명령어를 입력해 vue.js를 설치한다.설치가 완료되면 ..
[Vue.js] 기본 데이터 바인딩
·
Vue.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는 매우 일반적..