button태그에 box-shadow 속성이 하위 HTML 요소에 가려지는 현상 개선하기 1. 문제현상 상위 버튼이 하위 요소에 의해 shadow가 가려진다. 2. 트러블슈팅 두가지 속성을 shadow 속성이 부여된 요소에 추가한다. position: relative; z-index: 1;

우리가 메일을 보낼때는 상대의 컴퓨터로 메일을 바로 송신하는것이 아니라 중간에 메일서버 라는 곳을 몇군데 거치게 된다. 메일 서버에 메일이 보관되고, 그것을 다른 메일 서버에 보내면서 end user에게 전해진다. 📝SMTP란? 일반적으로 메일서버간 메일을 주고받을때는 SMTP를 사용한다. SMTP는 Simple Mail Transfer Protocol의 약자로 메일을 주고받는 프로토콜의 규약이다. SMTP는 메일의 메시지들을 주소에 맞게 전달해주는 역할을 하며, 이때 규약이 SMTP에 담겨져있다. SMTP 이외에도 POP3, IMAP라는 다른 프로토콜을 이용하기도 한다. SMTP가 메일 서버간 전송 규약이라면, POP3와 IMAP는 유저가 메일서버에서 메일을 받기 위한 프로토콜이다. 💻 예시 설명 메일..

웹팩에 외부 라이브러리를 추가하는 방식에 대해 정리된 글이 많이 없어서 정리하고자 한다. 나는 오픈소스인 bootsrtap을 설치해 사용했으며, 이때 기반이 되는 jquery를 웹팩에 추가하는 방식으로 진행했다.CLI로 신규프로젝트 생성 및 bootstrap이 설치되었다는 가정 하에 진행한다! (npm i bootstrap) 1. Bootstrap 설정 Bootstrap이란? 반응형 웹사이트를 개발하기 위해 트위터에서 오픈소스로 공개한 UI Framework이다. jQuery기반으로 되어 있으며, PC, Tablet, Mobile의 스크린을 자유롭게 설계하여 UI의 표현을 가능하게 한다. Bootstrap의 경우는 js 이외의 UI를 표현해주는 css파일도 포함시켜줘야 합니다. 따라서 아래와같이 두가지를..

앞서 Vue 객체의 prototype으로 인스턴스 메소드를 추가하는 방법을 기재하였다! https://pro-jm.tistory.com/89?category=1064702 main.js 공통함수 전역 선언하기 컨포넌트에서 공용으로 사용할 파일 이름을 생성한다. common-plugin.js common-plugin.js 예시 const methods = { setTestOpts: () => { return 'test' } } export default { install (Vue) { Vue.prototype.$set.. pro-jm.tistory.com 전역설정을 할때 글로벌메소드 install과 use에 대해 찾아보다가 발견한 플러그인에 대해 적어보려 한다. 플러그인(plugin) 이란? plugin은..

컨포넌트에서 공용으로 사용할 파일 이름을 생성한다. common-plugin.js common-plugin.js 예시 const methods = { setTestOpts: () => { return 'test' } } export default { install (Vue) { Vue.prototype.$setTestOpts = methods.setTestOpts } } 나는 테스트용으로 'test'라는 스트링 값을 리턴하는 함수를 작성하였다. vue의 글로벌 메소드인 install을 사용하여 프로토타입의 객체로 함수를 셋팅하여준다. 원하는 작업을 setTestOpts에 구성하면 되겠다. 다음은 해당 속성을 전역으로 등록해주는 작업이 필요하다. main.js import CommonPlugin from ..

** 트러블슈팅 ** 목적 vue-grid-item 이동시 백그라운드로 표시되는 placehold 배경색을 바꾸려고 한다. 방법 해당 아이템의 class로 접근하여 원하는 옵션을 추가한다. 그후 important를 먹이면 기존 클래스의 옵션값이 무시되고 반영된다. .vue-grid-item.vue-grid-placeholder { background: rgb(0 151 255) !important; opacity: 0.1 !important; } 주의* SCSS 스코프 내에 선언할것. *참고링크 https://jbaysolutions.github.io/vue-grid-layout/guide/styling.html#placeholder

div 영역을 클릭했을때 선택된듯한 시각적 효과를 주려고한다. 따라서 focus와 blur를 사용하고자 한다. * focus 이벤트는 요소가 포커스를 받을 때, blur 이벤트는 포커스를 잃을 때 발생한다. * 트러블 div 객체를 가져온 후 .focus() 메소드를 수행시켰으나 전혀 먹지 않았다. 그 이유는 다음과 같다. ** 대다수의 요소는 기본적으로 포커싱을 지원하지 않기 때문이다. 포커싱을 지원하지 않는 요소 목록은 브라우저마다 다르긴 하지만 한 가지 확실한 것은 , , , 와 같이 사용자가 웹 페이지와 상호작용 할 수 있게 도와주는 요소는 focus, blur를 지원한다는 사실이다. 반면 , , 같이 무언가를 표시하는 용도로 사용하는 요소들은 포커싱을 지원하지 않는다. 따라서 이런 요소엔 ele..

에러 프로젝트 라우터 이동시 콘솔에 다음과같은 에러가 발생했다. Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/test". 이는 같은 라우터로 router.push('path')를 하게될때 발생한다. 위의 경우는 /test 링크에서 /test로 이동하려 할때 발생하는 에러이다. 해결방법 1 $router.push()의 에러 예외처리가 되지 않아 기본으로 콘솔에 에러가 찍힌다. catch문으로 위 에러를 잡아주는 방법이 있다. this.$router.push('/') 에서 this.$router.push('/').catch(()=>{}); 로 catch만 추가해주면된다. 하지만 이방..