삽질블로그 삽질블로그

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() 를 호출해줘야만한다. 호출하지 않으면 모든 라우팅이 대..

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 로 들어가면 앱 비밀번호를 만드는 ..

amplify profile 을 추가하려면 $ aws configure --profile {프로필명} 입력하면 아래와 같은 입력사항들이 나타난다. aws access key id 와 secret key 는 한번 발급받고나서 다시 확인할 수 없으니 꼭 저장을 해놓아야한다. 발급받은 access key id 와 secret access key 를 입력하고 나면 {프로필명} 으로 입력했던 프로필이 하나 더 생성된다. 이제, $ amplify pull 명령어를 실행하면 추가된 프로필이 같이 보여진다. amplify 버전업데이트하기 1. 버전 확인 $ amplify -v 2. 최신버전 설치하기 $ npm install -g @aws-amplify/cli 3. 최신버전으로 업데이트 되었는지 다시 버전확인 $ amp..

요즘들어 크고작은 요청이 많이 들어와 대거작업 중에 텍스트 또는 키 변경과 같은 짜잘한 작업을 해야하는 경우가 많아졌다. 대거작업 중에는 2-3일정도가 소요되고, 작은 작업은 1분이면 끝나는 작업들이 많기에 처리를 어떻게 해야할 지 애매할 때가 있는데 이럴 때 사용하는 git stash 기능이 있다. git stash 는 아직 작업이 완료되지 않아 커밋 하기엔 애매할 때 내가 작업하던 내용들을 임시저장하기에 좋은 기능이다. 현재 작업중인 내용을 스택에 저장하기 $ git stash 기존에 스택에 저장해놓았던 내용을 꺼내 사용하기 (꺼내는 순간 스택에서 사라진다) $ git stash pop pop과 비슷해보이지만 스택에 저장되어있던 내용들을 지우지 않고 그대로 저장해둔다 $ git stash apply ..

강제적으로 컴포넌트를 리로드 해줘야하는 경우가 있다. 예를들면, 부모컴포넌트로부터 이미지를 전달받아 image editor를 사용하는 자식 컴포넌트가 있는데, 부모컴포넌트에서 전달하는 이미지가 변경되었을 때 자동으로 변경되지 않으므로 reload 를 해주어야만 한다. 이럴 때 component 에 key를 설정해주고, key를 변경하면 자동으로 forceRerendering 된다. 출처: https://hyeonyeee.tistory.com/97 [hyeoneee's blog]

vue 에서 공통로직을 사용할 때 나는 vue의 prototype에 funtion으로 정의하고는 했다. 하지만 이렇게 간단한 공통함수는 mixin으로 정의하는것이 편하겠다. (예를들면 아래처럼...) install( Vue ) { Vue.prototype.$isEmptyObject = function( obj ) { if( !obj || obj == null || JSON.stringify( obj ) == "{}" ) { return true; } return false; } }, mixin 에서 store 을 사용하는 방법 mixin 에서 this 는 vue component 를 가리킨다. mixin 에서 store을 사용하려면 그냥 컴포넌트 내에서 사용하는 것과 마찬가지로 this.$store 이런..

.parent { position: relative; height: 100%; /* 적용 후에 먹지 않아서 뭐가 문제인가 봤더니 parent 요소 높이가 측정되지 않아 적용되지 않는 문제가 있었음 */ } //위아래 가운데에 요소를 넣을 때 .child { position: absolute; top:50%; transform: translateY(-50%); } //정가운데에 넣을 때 .child2 { position: absolute; top:50%; transform: translateY(-50%) translateX(-50%); left:50%; } translateY, translateX에 대해 간단히 설명하자면 부모 요소의 크기를 이용해 top, left로 가운데 지점의 위치를 구하고, 해당 지..

vue dom에 이벤트가 걸려있을 때, Default 로 보내주는 parameter가 있다. 예를 들어 @input="testmethod" 이벤트를 넣어놓으면 methods에 정의되어있는 testmethod 함수에서 console로 이벤트를 찍어보면 testmethod( e ) { console.log(e) } e는 해당 input dom 에 들어온 텍스트로 찍힌다. 그런데 여기서 해당 텍스트 이외에 다른 파라미터를 추가로 받아오고싶은 경우가 있다. 그럴때는 이런식으로 정의 하면 default로 가져오는 파라미터에 추가로 내가 넣은 파리터까지 받아올 수 있다. methods : { autoNext( e, count ) { console.log( "param ::: ", e, count );// `para..