Client/Vue (21) 썸네일형 리스트형 [Vue] Typescript 전역 Mixin 설정하기 악 아아악! 악!!!!!! 아 mixin이 global 함수같은 존재(?) 라서 공통된 작업을 해야할 때 등록해두면 편하고 편할 것 같긴 한데 vue 컴포넌트 파일마다 import 를 하는게 너무 귀찮아서 (이를테면 로그인 체크라던지 기타등등... 로그인 체크는 보통 세션으로 진행하지만 생략) 이걸 따로 import 하지 않고 main.ts(또는 .js) 에 등록해서 사용하는 법은 없나 하고 고민했다. 결과적으로 글을 쓰고 있는 지금은 딱히 뾰족한 수가 떠오르질 않음... 아니 정확히 말하면 방법은 있다. main.ts 파일에 Vue.mixin({}) 으로 등록해서 사용하면 컴포넌트에 따로 import 할 필요 없이 this.functionName() 으로 접근해서 mixin 함수를 사용할 수 있음. 아.. [Vue] typescript를 활용한 vue 프로젝트(메모2) 이전에 javascript 로 생성한 vue 프로젝트를 typescript 로 튜닝해보려 하는데 스타일이 비슷한 듯 달라 공부가 더 필요할 듯 하다. 일단 typescript 를 활용한 문법이 java와 굉장히 흡사해서 (클래스 단위 형식이라던지 등등) 오랫동안 java 를 안 보고 살았더니 감이 안오고, 데코레이터 구조도 모르겠고 해서 일단 적는다 일단 메모메모 .ts 파일이나 vue 파일 내 script 블럭에서 Component 를 import 하는 경우는 (현재까지 확인한 바로만) 두 케이스 인 것 같다. 첫째는 'vue-class-component' 로부터 import 하는 경우. 이 경우에는 해당 파일(현재 작성하고 있는 파일)에 작성하는 클래스가 Vue 컴포넌트임을 나타내기 위해 import.. [Vue] typescript 를 활용한 Vue 개발환경 구축 (vue3반영) * 본 게시글은 상업적 용도가 전혀 없으며, 개인적인 스터디의 메모용으로 작성된 것임을 명시한다. 참고서적을 기반으로 본인의 주관적 견해가 버무려져 있으므로 해당 게시글 조회 시 참고 바람. *2023.07 update: 가독성을 위해 게시글을 수정하던 중 vue2가 지원 종료되고, vue3로 변화됨에 따라 cli 명령 사용에 변경사항이 있는 걸 확인해 내용을 갱신했다. 현재 글은 vue3를 기준으로 수정 중. 참고 서적 : 타입스크립트, AWS 서버리스로 들어올리다. 1. vue-cli 설치 vue2: cli를 통해 project를 구축할 것이기 때문에, 작업 환경에 vue-cli가 설치되어있지 않다면 아래 명령어를 실행해 cli를 설치한다. 이때, global로 설치하지 않으면 해당 프로젝트 내 폴더.. [vue] laravel에서 vue 라우팅 보통 라우팅 처리는 서버 내 routes/web.php 에서 prefix와 path 를 설정하고 routing 시키는데, 작업후 서버에 파일을 올려도 라우팅이 안 됨... 근데 내가 등록한 path는 전부 php에 해당하는 path고, vue 화면을 띄우기 위해서는 해당 화면을 띄우는 php를 만들어야 하는 것 즉, vue 화면을 routing 하는 controller 내에 function으로 제작해야 하는데, 이때 php-laravel은 blade파일에서 경로를 읽어와 해당 파일(index.html)을 return한다는 듯 하다(지금 정신이 없어서 일단 횡설수설 아무소리라도 적어놓음) 그래서 순차적으로 정리하면 서버 내 resources/views/파일명.blade.php 파일을 만들고 routing .. [vue]$nextTick data(){ return{ reloadFlag = true; } } methods:{ this.reloadFlag = false; ... this.$nextTick(function(){ this.reloadFlag = true; }) } $nextTick = 약간 페이지 새로고침 같은 기능. select 등 변경 하면서 내부 component 로 등록한 페이지의 데이터도 함께 바뀌길 원할 때 flag등을 달아서 사용하는 듯 [vue] vuejs 카카오 링크 연동 오늘은 공유하기... 오늘도 어제도 뻘짓 했다... 공유하기 자체는 간단함. kakao developer 사이트에서 로그인 하고 앱 등록 후 api key 받은 후에 api 붙이고 적용하면 되니까. [index.html] 일단은 index.html에 스크립트 등록해주고, key도 init 해줌. key같은 경우에는 최초 1회만 등록하면 돼서 그냥 저기에 추가했다. 공유 할 때마다 init 함수를 넣으면 이미 등록된 key라고 오류를 뱉어내더라. [공유하기.vue] export defalut { ... methods: { ... kakaoShare() { Kakao.Link.sendDefault({ objectType: 'feed', content: { title: this.title, imageUrl: .. [vue] npm run build 시 사이트 디버깅 막기 npm run build로 웹 페이지를 빌딩 후 ftp등을 이용해 서버에 등록할 때 일반적으로는 js파일 등에서 .map 파일이 생성된다. 이럴 경우 f12 디버그 모드나 소스보기 등에서 사이트 디버깅이 가능하고, 개발한 소스가 노출되는 경우가 있음. 이를 막기 위해 vue 프레임워크를 사용할 때에는 root에 위치한 vue.config.js 파일 내에 module.exports = { lintOnSave: false, productionSourceMap: false, //js .map 파일을 생성하지 않는다. map 파일 생성시 사이트 디버깅 가능 }; 해당 코드, productionSourceMap: false [vue] vue moment, moment.js https://momentjs.com/docs/ Moment.js | Docs moment.relativeTimeThreshold(unit); // getter moment.relativeTimeThreshold(unit, limit); // setter duration.humanize has thresholds which define when a unit is considered a minute, an hour and so on. For example, by default more than 45 seconds is consider momentjs.com 이전 1 2 3 다음