내가 보려고 만든 블로그

laravel 프로젝트를 nginx 로 연동한거에 이어 vue 프로젝트도 서버에 올려보자! 2020.06.11 - [LINUX] - ubuntu 18.04 + laravel + nginx 로 환경 설정하기 ubuntu 18.04 + laravel + nginx 로 환경 설정하기 환경 ubuntu 18.04 php 7.3 nginx 팀장님이 아마존 aws ec2를 이용해서 새로운 ec2를 만들어 보라구 했다! 그래서 아마존 aws ec2에서 새로운 인스턴스를 만들고 환경설정을 했다 기록 안하고있다가 기록하 become-a-developer.tistory.com 환경설정 먼저 ubuntu 업데이트 해주기 apt-get upgrade apt-get update 해준다음 nginx 도 같이 설치해준다 apt-g..

vue에서 무한 스크롤 만들어서 사용하기! *공식 문서* peachscript.github.io/vue-infinite-loading/guide/#installation Guide | Vue-infinite-loading Guide Installation NPM If you are building a large application, we recommend you use the following method: Direct Include After you import this plugin through the script tag, it will register the InfiniteLoading component automatically, so you can use it i peachscript.githu..

vue에서 윈도우 사이즈 변경될때마다 윈도우 사이즈를 가져오고싶은데 구글링을 아무리 해봐도 원하는 결과가 나오지 않았는데 좀더 구글링 해서 찾았다! router/index.js 에 추가해주고 사용할때는 $viewport.width 로 사용하면 width값을 가져올 수 있다! // router/index.js const updateSizes = (obj = {}) => { obj.width = window.innerWidth obj.height = window.innerHeight return obj } Object.defineProperty(Vue.prototype, '$viewport', { value: Vue.observable(updateSizes()) }) window.addEventListene..

vuejs 에서 store 관련 async 와 await 관련 오류가 발생했는데 해결방법은 아래와 같다. npm install --save-dev babel-polyfill npm install --save-dev babel-plugin-transform-regenerator npm i babel-plugin-transform-runtime scr/main.js import 'regenerator-runtime/runtime' babel-polyfill 관련 모듈을 설치해준다음 main.js에 import를 해주면 해결된다!

ckeditor 설치 npm install ckeditor4-vue vue 선언한곳에 사용하기 (main.js) import CKEditor from 'ckeditor4-vue'; Vue.use( CKEditor ); vue 파일에서 사용하기 원래는 editor5 쓰려고했는데 계속 오류가 발생해서 editor4로 변경하여 하니 한번에 바로 되었다! #공식사이트 ckeditor.com/docs/ckeditor4/latest/guide/dev_vue.html Vue Integration - CKEditor 4 Documentation Learn how to install, integrate and configure CKEditor 4. More complex aspects, like creating plug..

vue2-google-map 에서 gmap-authocomplete를 사용중에 하단의 오류가 발생했다. utc_offset의 지원이 중단되었으며, 2020년 11월에 사용이 중단되니 사용하지 말라는 뜻인데 나는 아무리 봐도 사용하고있지않는듯 한데 다음과 같은 오류에 어리둥절해서 구글링을 해보니 쉽게 해결 할 수 있었다! :options="{fields: ['geometry', 'formatted_address', 'address_components']}" 위에 옵션만 추가해주면 해결된다!

javascript에서 event.target.hasClass('classname') 으로 클릭한 div에 내가 찾으려고하는 div가 포함되어있는지 없는지 확인 했었다. vue에서는 조금 다르게 선언해주어야된다! @click="clickFunc($event)" 우선 클릭 함수는 다음과 같이 $event를 매개변수로해서 넘겨준다 clickFunc(event){ if(event.target.classList.contains('classname')){ console.log('포함되어있다.') }else{ console.log('포함되어있지않다.') } } event.target.classlist.contains으로 확인하면된다. 포함되어있으면 true를 반환하고 포함되어있지않으면 false를 반환한다!

이글은 vuejs 진입/진출 그리고 트랜지션 글을 나중에 제가 보려고 작성한 글이기 때문에 정보가 부족할 수도 있고 잘못 이해한 부분이 있을 수 있습니다. :) 또한 이 글에는 단일 엘리먼트/컴포넌트에 대한 정보만 작성되어있습니다. 다른 부분이 필요하신 분은 공식 문서 및 다른글을 참고바랍니다. 감사합니다 kr.vuejs.org/v2/guide/transitions.html 진입/진출 그리고 리스트 트랜지션 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Vue에서 DOM에 삽입, 갱신 또는 제거될 때 트랜지션 효과를 어떻게 지원하는지에 대해 알아보았다. 기존 HTML과 같은 JAVASCRIPT나 JQUERY에서와 달리 vue에서 지원하는데 지원하는 조건은 다음..

vue에서 화면을 이동할때 컴포넌트를 변경하는데 렌더링이 아닌 값에 따라 동적으로 컴포넌트를 선언해서 변경하는 방법을 알아보았다! 1. 컴포넌트 갈아끼우는 방법 모든 컴포넌트들을 선언 한 뒤, 값에 따라 가져오는것이다. 만약 부모 컴포넌트로 받은 auth가 있을경우 마이페이지 컴포넌트로 이동하고 아닐경우 로그인 화면으로 이동한다. auth 값에 따라 component 엘리먼트의 is 속성에 바인딩 된 값이 변경된다. 2. 필요한 컴포넌트만 로딩하여 사용하기 로딩해야하는 컴포넌트가 한두개가 아닌 여러개일 경우에 위의 방식보다 더 효율적인데 필요한 컴포넌트만 import 하여 사용하는 방식이다. 위와 같이 하면 동적으로 필요한 컴포턴트 마다 import 할 수있다. 출처 및 참고자료 lovemewithout..

개발환경 laravel vue.js sass 안녕하세요 오랫만에 글을 쓰는거같아요! 이번에는 라라벨/뷰에서 sass를 연동해보았습니다. 먼저 resources/sass 디렉토리가 있는지 확인합니다. 저는 없어서 만들어야했어요 처음엔 그냥 수기로 만들려다가 이건 좀 아닌거같아서 구글링 해보았습니다. composer require laravel/ui --dev php artisan ui vue 코드를 다음과 같이 입력하면 이렇게 디렉토리가 생기는걸 볼수있어요! 그리고 webpack.mix.js 를 확인해보니 코드가 이렇게 바껴있는걸 볼 수있었어요 여러개의 Sass 파일을 대응하는 css 파일로 컴파일 할 수있으며, CSS 결과 파일의 위치를 커스텀마이징 할 수있대요! 그리고 만들어진 app.scss 파일을 ..