티스토리

씹어먹는 블로그

검색하기

블로그 홈

씹어먹는 블로그

mosei.tistory.com/m

먹세 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[Vue.js] vue 파일 변경 시 자동 컴파일 하는 법 vue 파일을 수정하게 되면 매번 아래 명령어로 컴파일을 해야 한다. // 개발환경에서 js/css 무압축 npm run dev // 운영환경에서 js/css 압축 npm run production 이런 귀찮음을 해결하기 위해 watch 라는 기능을 제공 npm run watch watch를 켜놓은 상태에서 vue를 수정하게 되면, watch가 변경된 파일이 있는지 계속 지켜보고 있다가 파일 변경이 감지되면 자동으로 컴파일 함 공감수 0 댓글수 0 2021. 9. 9.
[Vue.js] Laravel 을 이용한 S3 파일업로드 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.. 공감수 0 댓글수 0 2021. 9. 8.
[Vue.js] 뷰에서 사용할 수 있는 alert 컴포넌트 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 에서 과 를 잘 구분해야 한다. 공감수 0 댓글수 0 2021. 9. 8.
[Vue.js] 컴포넌트 연동하기 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 파일에서는 각각 선언 해주기 전까지는 불러다가 쓸수 없다. 컴포넌트를 사용.. 공감수 0 댓글수 0 2021. 4. 23.
[Vue.js] Vue에서 isMobile 모바일 구분 사용하기 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 공감수 0 댓글수 0 2021. 4. 19.
[Vue.js] Vue에 Google Adsense 넣기 일반적으로 HTML 페이지에 구글 스크립트를 삽입하는 방법으로는 Vue에서 정상적인 구동이 되지 않는다. Component 형태로 설치 후 사용이 가능하다. *구글 자동광고 사용시에는 범위 밖에 상단에 구글 공통스크립트 한줄만 추가 해주면 알아서 페이지 내에 불러와진다. 아래 설명은 수동으로 광고를 삽입할 때의 설명임 1. 구글 광고 생성 구글 애드센스 홈페이지에 가입을 하고, 광고가 표시될 도메인을 등록하고, 수동으로 삽입할 광고를 만든다. Google 애드센스 - 웹사이트에서 수익 창출하기 Google 애드센스의 웹사이트 수익 창출 기능을 사용하여 수익을 올려보세요. Google 애드센스에서 광고 크기를 자동으로 최적화하여 광고의 노출 및 클릭 가능성이 높아집니다. www.google.co.kr 그리.. 공감수 1 댓글수 0 2021. 4. 15.
[Vue.js] Array 배열 및 Object 객체 데이터 사용 시 주의사항 1. 배열 v-for 를 통해 배열을 사용 할 때, 데이터를 삽입하거나 제거할 때 주의할 점. Vue.js 는 반응성 이라는 기능을 제공한다. v-for 를 이용해 데이터를 출력한 후, script 부분에서 잘못된 방법으로 데이터를 삽입하게 되면, 삽입된 데이터가 화면에 출력되지 않는 불상사가 생길 수 있다. 아래 예제를 통해 확인해보자. 데이터삽입 {{data.item}} 위 처럼 일반적인 자바스크립트 문법으로 this.datas[3] = 형식으로 데이터를 배열로 넣게 되었을 때의 결과 빨간 박스와 같이 배열의 길이는 (4) 로 정상적으로 삽입 되었다. 하지만 왼쪽 화면에는 '값4' 가 출력되지 않았다. 이 부분이 바로 반응성이 적용되지 않았기 때문이다. 이 반응성을 해결하기 위해서, 배열 가공 시 사.. 공감수 3 댓글수 0 2020. 10. 19.
[Vue.js] v-for 사용법 {{data.item}} * 중요 : v-for 사용시에는, 단순 반복이나 의도적으로 성능 향상을 위한 작업이 아니라면 웬만하면 v-bind:key 와 함께 사용하라고 권하고 있다. key에 대한 이상적인 값은, 각 항목을 구별할 수 있는 유일한 값이어야 한다. HTML에 id 속성과 비슷한 역할 이라고 보면 된다. 위 코드처럼 약어로 사용 가능 v-bind:key -> :key v-on:click -> @click 공감수 1 댓글수 0 2020. 10. 19.
[Vue.js] Watch 사용 방법 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 공감수 1 댓글수 0 2020. 9. 23.
[Vue.js] Computed 사용 방법 (캐싱, Getter/Setter) vue 인스턴스의 데이터를 가공할 때 computed 를 사용하면 된다. computed의 유용한 기능들에 대해서 알아보자. 1. 캐싱 2. Getter/Setter 1. 캐싱 {{ msgFun() }} {{ msgFun() }} {{ msgFun() }} 위 코드와 같이 반복적인 데이터를 사용해야 할 때 캐싱기능을 사용하면 리소스낭비를 줄일 수 있다. {{ msgFun() }} {{ msgFun() }} {{ msgFun() }} ============== {{ msgCaching }} {{ msgCaching }} {{ msgCaching }} === 구분선 위의 값은 매번 연산 한 값이고, 아래의 값은 캐싱된 값이 출력된다. * computed 캐싱 사용 시 주의할 점 : msgCaching 사용 .. 공감수 2 댓글수 0 2020. 9. 22.
[Vue.js] 라이프사이클 vue.js 인스턴스 라이프사이클 훅 new Vue 를 생성할때 라이프사이클이 돌기 시작 참고 : kr.vuejs.org/ Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 라이프사이클 훅 이벤트 순서 1. beforeCreate : 반응성 및 기본 Vue에서 필요한 기능들이 생성되기 전 2. created : 반응성 및 기본 Vue에서 필요한 기능들이 생성되고난 후 3. beforeMount : DOM 연결 전 4. mountd : DOM 연결 후 (html 요소를 제어하기 위해서는 mounted 사용) 5. beforeUpdate : 데이터가 변경되기 전 (화면을 다시 그리기 전) 6. updated : 데이터가 변경되고난 후 (화면을 다시 그리고난 후) 7. b.. 공감수 0 댓글수 0 2020. 9. 22.
node.js 환경에 vue-cli 설치 + Git 연동 *vue-cli 를 쓰는 이유 express-generate 와 마찬가지로 vue.js 프로젝트의 구성을 도와주는 역할을 한다. vue-cli를 쓰지 않더라도 vue.js 프로젝트를 만드는데 아무 문제가 없다. 하지만 vue.js와 관련된 오픈소스들은 대부분 vue-cli를 통해 쉽게 구성이 가능하고, 또한 프로젝트 시작 시 git으로 clone 하지 않더라도 vue-cli로도 손쉽게 설치가 가능하기 때문에 vue-cli를 많이 사용한다. vue-cli를 설치하기 위해서는 node.js 8.9 버전 이상이 필요 2020-02-27 현재 설치 버전 node.js : v12.16.1 vue-cli : @vue/cli 4.2.3 1. yarn 설치 //npm으로 설치한 vue-cli로 프로젝트를 만들더라도 y.. 공감수 0 댓글수 2 2020. 2. 28.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.