씹어먹는 블로그

vue 파일을 수정하게 되면 매번 아래 명령어로 컴파일을 해야 한다. // 개발환경에서 js/css 무압축 npm run dev // 운영환경에서 js/css 압축 npm run production 이런 귀찮음을 해결하기 위해 watch 라는 기능을 제공 npm run watch watch를 켜놓은 상태에서 vue를 수정하게 되면, watch가 변경된 파일이 있는지 계속 지켜보고 있다가 파일 변경이 감지되면 자동으로 컴파일 함

vue 파일첨부 [파일 삭제] {{file.file_name}} 1. 실제 파일업로드 input 은 display:none으로 숨기고, 2. 커스텀 button 에 label을 씌워서 '파일첨부' 텍스트 클릭 시 파일업로드 창이 뜨게 구현 script 1. myFiles 라는 변수를 생성해놓고, 2. http 요청을 할 header와 formdata 들을 세팅 3. 업로드가 끝난 후 v-for 에 사용되는 myFiles 를 업데이트 laravel route : Route::post('/profile/upload', 'UserController@myFileUpload'); controller : 실제 구현시에 로직은 service로 빼는것이 유지보수에 좋지만, 지금은 흐름만 적는 것이므로 controlle..

https://sweetalert2.github.io/ SweetAlert2 A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 사용법 : CSS : Swal 의 title 옵션에 style을 사용시에는 #swal2-title 형식으로 접근 html 옵션은 직접 html 삽입 가능 vue 에서 과 를 잘 구분해야 한다.

1. /resources/js/components/ 밑에 원하는 이름의 Vue컴포넌트를 생성 Test.vue 컴포넌트 123 456 2. 전역 컴포넌트 설정 전역 컴포넌트로 설정하게 되면 어느 페이지에서든 바로 태그를 쓸수있다. app.js 또는 main.js 에 전역으로 설정한다. Vue.component('test', require('./components/Test').default); 컴포넌트를 사용할 Vue 페이지 test-class에 a를 넣어주면 오렌지색이 적용 되고, b를 넣으면 연두색이 적용 된다. 3. 지역 컴포넌트 설정 지역 컴포넌트는 해당 컴포넌트를 불러올 Vue 파일 내에서만 선언 해주는 것이다. 다른 Vue 파일에서는 각각 선언 해주기 전까지는 불러다가 쓸수 없다. 컴포넌트를 사용..

1. 패키지 설치 npm install vue-mobile-detection --save 2. 컴포넌트 import 세팅 main.js 또는 app.js 에 (프로젝트 설정에 맞게) import VueMobileDetection from 'vue-mobile-detection' Vue.use(VueMobileDetection) 3. 사용 MOBILE DESKTOP OR TABLET

일반적으로 HTML 페이지에 구글 스크립트를 삽입하는 방법으로는 Vue에서 정상적인 구동이 되지 않는다. Component 형태로 설치 후 사용이 가능하다. *구글 자동광고 사용시에는 범위 밖에 상단에 구글 공통스크립트 한줄만 추가 해주면 알아서 페이지 내에 불러와진다. 아래 설명은 수동으로 광고를 삽입할 때의 설명임 1. 구글 광고 생성 구글 애드센스 홈페이지에 가입을 하고, 광고가 표시될 도메인을 등록하고, 수동으로 삽입할 광고를 만든다. Google 애드센스 - 웹사이트에서 수익 창출하기 Google 애드센스의 웹사이트 수익 창출 기능을 사용하여 수익을 올려보세요. Google 애드센스에서 광고 크기를 자동으로 최적화하여 광고의 노출 및 클릭 가능성이 높아집니다. www.google.co.kr 그리..

1. 배열 v-for 를 통해 배열을 사용 할 때, 데이터를 삽입하거나 제거할 때 주의할 점. Vue.js 는 반응성 이라는 기능을 제공한다. v-for 를 이용해 데이터를 출력한 후, script 부분에서 잘못된 방법으로 데이터를 삽입하게 되면, 삽입된 데이터가 화면에 출력되지 않는 불상사가 생길 수 있다. 아래 예제를 통해 확인해보자. 데이터삽입 {{data.item}} 위 처럼 일반적인 자바스크립트 문법으로 this.datas[3] = 형식으로 데이터를 배열로 넣게 되었을 때의 결과 빨간 박스와 같이 배열의 길이는 (4) 로 정상적으로 삽입 되었다. 하지만 왼쪽 화면에는 '값4' 가 출력되지 않았다. 이 부분이 바로 반응성이 적용되지 않았기 때문이다. 이 반응성을 해결하기 위해서, 배열 가공 시 사..

{{data.item}} * 중요 : v-for 사용시에는, 단순 반복이나 의도적으로 성능 향상을 위한 작업이 아니라면 웬만하면 v-bind:key 와 함께 사용하라고 권하고 있다. key에 대한 이상적인 값은, 각 항목을 구별할 수 있는 유일한 값이어야 한다. HTML에 id 속성과 비슷한 역할 이라고 보면 된다. 위 코드처럼 약어로 사용 가능 v-bind:key -> :key v-on:click -> @click

watch 속성은 '지켜보다'라는 의미를 가지고, data 혹은 computed 속성의 데이터 값이 변경될 때 실행되는 속성이다. {{ msg }} {{ msgReversed }} 결과 실행 : watch 속성에 msg 와 msgReversed 메소드를 만들어놓은 것을 볼 수 있고, 같은 이름의 data, computed 속성의 data 들이 변경될 때 각 이름에 해당하는 watch 메소드 들이 실행된다는 것을 알 수 있다. kr.vuejs.org/v2/guide/computed.html computed와 watch — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org

vue 인스턴스의 데이터를 가공할 때 computed 를 사용하면 된다. computed의 유용한 기능들에 대해서 알아보자. 1. 캐싱 2. Getter/Setter 1. 캐싱 {{ msgFun() }} {{ msgFun() }} {{ msgFun() }} 위 코드와 같이 반복적인 데이터를 사용해야 할 때 캐싱기능을 사용하면 리소스낭비를 줄일 수 있다. {{ msgFun() }} {{ msgFun() }} {{ msgFun() }} ============== {{ msgCaching }} {{ msgCaching }} {{ msgCaching }} === 구분선 위의 값은 매번 연산 한 값이고, 아래의 값은 캐싱된 값이 출력된다. * computed 캐싱 사용 시 주의할 점 : msgCaching 사용 ..