전체 글
-
[vue] google map 적용하기 , vue2-google-map 사용성장과정(dev)/Frontend(feat. Vue, Next.js) 2022. 5. 12. 20:25
vue2-google-map을 사용할 때 map에서 제공하는 함수들을 사용하는 방법 this.$refs.gmap.$mapPromise.then((map) => { map.setZoom(18) }) 이 promise 에서 map에 담아주는 객체는 google.maps.Map 에서 제공하는 객체이므로 이 객체를 google map api 문서 (https://developers.google.com/maps/documentation/javascript/reference/map) 에 써져있는 그대로 사용할 수 있다. * 기본세팅방법 import vue2-google-maps import Vue from "vue"; import * as VueGoogleMaps from 'vue2-google-maps'; imp..
-
[Vue] props sync 관련문제, 모달 내에 자식컴포넌트가 있을 때 props sync 가 안되는 문제 다루기성장과정(dev)/Frontend(feat. Vue, Next.js) 2022. 5. 10. 23:49
Write with reference to https://ui.toast.com/weekly-pick/ko_20190307 1. 부모로부터 받아온 props data 를 watch 할 때 감시하고 있는 것이 객체나 배열이라면 내부 속성의 변경여부도 검사한다고 정의해줘야만 watch 에서 감지한다. 아래와 같이 deep : true 로 설정해줘야한다. export default { name: 'ColourChange', props: { colours: { type: Array, required: true, }, }, watch: { colours: { // This will let Vue know to look inside the array deep: true, // We have to move our m..
-
이미지 파일 사이즈 리사이징성장과정(dev)/Typescript ⊃Javascript 2022. 5. 9. 13:58
이미지를 리사이징하기 위해 base64로 이미지를 변환한다. 여기서 이미지 변환 quality 에 대하여 브라우저 의존적이며, 크롬이나 파이어폭스에서의 default 값은 0.92이다. (0~1 사이로 정의해야하며 낮으면 그만큼 low quality image로 변환된다. canvas.toDataURL(`image/jpeg`, /* default quality */) 이미지 용량 줄이기 let base64 = e.target.result; /** 용량 줄이기 */ const image = new Image(); image.src = base64; image.onload = (event) => { const $canvas = document.createElement(`canvas`); const ctx =..
-
[Vue] 네비게이션 가드, url 접근 막기, router 설정성장과정(dev)/Frontend(feat. Vue, Next.js) 2022. 4. 28. 22:30
ctrl c ctrl v from https://joshua1988.github.io/web-development/vuejs/vue-router-navigation-guards/ 기억하기 위한 글 * 네비게이션 가드 > 뷰 라우터로 특정 url 에 접근할 떄 해당 url 에 접근을 막는 방법 * 네이게이션 가드 종류 1. 전역가드 : 어플리케이션 전역에서 동작 router.beforeEach(function (to, from, next) { // to : 이동할 url // from : 현재 url // next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수 }); // from 에서 to url 로 이동하기 위해서는 next() 를 호출해줘야만한다. 호출하지 않으면 모든 라우팅이 대..
-
[intellij] bitbucket 로그인 하기성장과정(dev)/Git (feat. github, bitbucket) 2022. 3. 10. 12:12
bitbucket에서 구글계정으로 로그인 및 계정 생성 했을 시 intellij 에서 git 계정연동 할 때 문제가 있다. git 에서 2단계 인증코드를 지원하지 않기에 토큰을 사용하여 로그인해야한다고 한다. * source https://intellij-support.jetbrains.com/hc/en-us/community/posts/360003444939-Login-issue-with-Bitbucket-integration 정말 bitbucket 에서 로그인 하려고 할 때 사용자 이름, 비밀번호 를 입력해야하는 창이 뜨는데 , 사용자이름에 이메일을 입력할 수 없다. 이럴 때 bitbucket 사이트에서 personal setting - App passwords 로 들어가면 앱 비밀번호를 만드는 ..
-
[aws]amplify cli 로 amplify profile 추가하기성장과정(dev)/클라우드서비스 2022. 3. 8. 23:31
amplify profile 을 추가하려면$ aws configure --profile {프로필명}입력하면 아래와 같은 입력사항들이 나타난다.aws access key id 와 secret key 는 한번 발급받고나서 다시 확인할 수 없으니 꼭 저장을 해놓아야한다.발급받은 access key id 와 secret access key 를 입력하고 나면 {프로필명} 으로 입력했던 프로필이 하나 더 생성된다.이제,$ amplify pull명령어를 실행하면 추가된 프로필이 같이 보여진다. amplify 버전업데이트하기1. 버전 확인$ amplify -v2. 최신버전 설치하기$ npm install -g @aws-amplify/cli3. 최신버전으로 업데이트 되었는지 다시 버전확인$ amplify -v
-
Git 의 stash 업무 시 활용하기성장과정(dev)/Git (feat. github, bitbucket) 2022. 3. 8. 00:09
요즘들어 크고작은 요청이 많이 들어와 대거작업 중에 텍스트 또는 키 변경과 같은 짜잘한 작업을 해야하는 경우가 많아졌다. 대거작업 중에는 2-3일정도가 소요되고, 작은 작업은 1분이면 끝나는 작업들이 많기에 처리를 어떻게 해야할 지 애매할 때가 있는데 이럴 때 사용하는 git stash 기능이 있다. git stash 는 아직 작업이 완료되지 않아 커밋 하기엔 애매할 때 내가 작업하던 내용들을 임시저장하기에 좋은 기능이다. 현재 작업중인 내용을 스택에 저장하기 $ git stash 기존에 스택에 저장해놓았던 내용을 꺼내 사용하기 (꺼내는 순간 스택에서 사라진다) $ git stash pop pop과 비슷해보이지만 스택에 저장되어있던 내용들을 지우지 않고 그대로 저장해둔다 $ git stash apply ..