몽땅뚝딱 개발자

◽ getBoundingClientRect() 이 method가 return하는 width, height 속성값은 padding과 border-width를 포함한 것이다. 즉, 엘리먼트 자체의 width + padding + border-width를 다 더한값이다. ◽ getBoundingClientRect()의 속성 - x: x 좌표 값 - y: y 좌표 값 - width - height - top - right - bottom - left // 이렇게 사용할 수 있다. getBoundingClientRect().top 출처 및 참조 https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect

◽ 개요 많은 컴포넌트에서 사용하고 싶은 데이터나 유틸리티가 있지만 global scope에 의해 오염되는 것은 원하지 않는다. 이 때 이런 것들을 prototype에서 정의하면 각 Vue instance에서 사용할 수 있다. ◽ 문법 앞에 $를 붙여준다. 이 기호는 Vue에서 사용하는 것으로, 모든 인스턴스에서 사용가능한 프로퍼티라고 알려주는 하나의 방식이다. 변수나 computed 요소, 메소드 등의 이름이 겹치는 경우가 있을 수 있으므로 이 기호를 사용하면 같은 이름으로 인한 충돌을 피할 수 있다. // 데이터 정의하기 Vue.prototype.$appName = 'My App' // function 정의하기 Vue.prototype.$appName = function thisFunc() { // ..

◽ apply(thisArg, [argArray]) // function.prorototype.apply() func.apply(thisArg, [argArray]); 메서드를 호출할 때 function 내부의 this를 매개변수인 thisArg로 바인딩 시킨다. argArray는 메서드에 인자로 사용된다. let max = Math.max.apply(null, [3, 1, 5]); console.log("max >>> ", max); // => 5 let min = Math.min.apply(null, [3, 1, 5]); console.log("min >>> ", min); // => 1 ◽ call(thisArg[,arg1[,arg2[,...]]]) // function.prorototype.cal..

에러 ERROR: Could not find a valid gem 'sass' (>= 0), here is why:Unable to download data from https://rubygems.org/ - SSL_connectreturned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://rubygems.org/latest_ ERROR: Could not find a valid gem 'sass' (>= 0), here is why:Unable to download data from https://rubygems.org/ - SSL_connectreturned=1 errno=0 state=SSLv3 ..

outline width, height 속성에 영향을 주지않고 현재 위치에서 테두리만 생기기 때문에 레이아웃에 영향을 주지 않는다. 테두리 영역을 지정하여 선을 줄 수 없다. border width, height가 늘어나 레이아웃에 영향을 준다. border-box: box-sizing; 속성을 추가하여 박스 안쪽에 생기게 할 수도 있다. 위, 아래, 왼쪽, 오른쪽 각각에 선을 줄 수 있다. 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

📄 _mixins.scss ◽ clear: both; @mixin clearfix() { &::after { content: ''; display: block; clear: both; } } ◽ 말줄임 @mixin Nellipsis ($lines: null) { @if ($lines == null) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @else { display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: $lines; -webkit-box-orient: vertical; } } ◽ 줄바꿈 속성 @mixi..

◽ $on(event, callback) 이벤트를 할당한다. // 이벤트이름과 함수를 지정한다. this.$on('test', function(data) { console.log('data is ', data); }) // $emit으로 호출할 수 있다. this.$emit('test', 'hi') // => data is hi ◽ Arguments { string | Array } event (배열은 2.2.0 이상에서만 지원) { function } callback 출처 https://vuejs.org/v2/api/#vm-on 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

Vue 객체의 속성 중 $가 붙은 것은 '내장 객체'라고 하며, 각 컴포넌트의 option들에 접근할 수 있는 속성들이다. console.log(this)를 찍어보면 options 밑에 여러 객체가 있는 것을 확인할 수 있다. ◽ $data 컴포넌트 인스턴스의 data 옵션에 접근한다. ◽ $el 엘리먼트에 접근한다. ◽ $root 현재 컴포넌트 트리의 root Vue 인스턴스를 찾는다. 현재 인스턴스에 부모가 없다면 $root 값은 현재 인스턴스이다. ◽ $options 해당 컴포넌트의 option들에 접근할 수 있다. 컴포넌트의 스크립트 영역 안에 정의된 data, created, method, props 등을 option이라 일컫는다. 이미 정의된 옵션말고도 커스터마이징한 옵션에도 접근할 수도 있다..

axios...🤦🏻‍♀️ 새로운건 왜 이렇게 많을까.. 머리가 조금 아프지만.. 내 프로젝트에도 적용해 볼 예정... ◽ interceptor 모두가 알다시피 '가로채다'라는 의미이다. 내가 만드는 귀여운 프로젝트는 header에 어떤 값도 실을 필요가 없어서(나의 편의를 위한..) 필요성을 느끼지 못했다. 하지만 생각해보면 매번 API를 호출할 때 마다 header에 똑같은 값을 싣는 로직을 쓸 수는 없는 노릇이다. axios의 interceptors를 사용하면 요청/응답 시 필요한 동작을 처리해주고 에러도 한번에 처리할 수 있다. ◽ 사용방법 // 요청 인터셉터 추가 axios.interceptors.request.use( function (config) { // 요청을 보내기 전에 수행할 일 // ..

콘솔 찍을 때 사용하면 좋은 팁 정리. 제공해주는 API도 굉장히 다양하다. Update: 220220 ◽ 간단한 사용 찍을 변수, 문자열 등등 뒤에 .log를 자동완성으로 입력하면 알아서 씌워진다. 간편하다. ◽ %s - 문자열 (String) // 문자열 찍기 console.log('data is %s', myStrVal) ◽ %d - 숫자 (Digit, Integer) // 숫자 찍기 console.log('data is %d', myNumVal) ◽ 문자열과 숫자 같이 찍기 // 같이 찍기 console.log('data is %s (%d)', myStrVal, myNumVal) ◽ 객체 // Bad // '+'를 사용하는 경우 const object = {value: "hi"} console.l..