음악, 삶, 개발

stackoverflow.com/questions/12503146/create-an-array-with-same-element-repeated-multiple-times 개발을 하다보면, 똑같은 요소들이 반복되는 긴 Array 를 만들어야할때가 있다. 2가지 방법이 있다. 이 Array 가 가진것들이 object 들일 경우, 각각이 reference 가 아닌 value 로 이어져야한다는것이 중요하다. const a = () => ({ v : 100 }) // 3번 반복하자 const b1 = Array.from({length: 3}, a) // 방법1 const b2 = Array(3).fill(null).map(a) // 방법2 b1[0].v = 999 b2[0].v = 888 con..

보통 객체안에 무언가를 집어넣을때는 key 와 value 가 필요하다. const o = { myKey : 'myValue!'} 위의 상황에서, value 를 제거하고 const o = { myKey } 하게되면, Uncaught ReferenceError: myKey is not defined 라는 에러가 발생한다. 하지만 아래와 같은 대입은 할수있다. const one = 1 const two = 2 const three = 3 const o = { one, two, three } console.log(o) // { one : 1, two : 2, three : 3} 위의 코드에서는 앞서, 여러 변수들을 각각 정의하였고, 이 변수명을 고대로 객체안에 집어넣었는데, 이때는 결과적으로 변수명이 해당 객체..

개인적으로 JS 에서 객체를 만드는 방법에 대해 여러 옵션들을 경험해보았다. 그중 가장 내 취향인것은 Factory function 이다. function make(a, b, c) { const obj = { a : a, b : b, c : c, } return obj } ES6 에서는 이 Factory Function 을 다음과 같이 매우 간결하게 작성할수있다. const make = (a, b, c) => ({ a : a, b : b, c : c }) make(20, 30, 40) // {a : 20, b : 30, c : 40}

/* 반드시 overlay 여야함!! */ .test { overflow: overlay; } .test::-webkit-scrollbar { width: 1vw; } .test::-webkit-scrollbar-thumb { background-color: hsla(0, 0%, 42%, 0.49); border-radius: 100px; } scroll 바의 default 인 뒷배경을 날릴려면, 반드시 overflow 가 overlay 여야한다. overflow : scroll 인 상태에서 아무리 ::-webkit 을 지지고볶고해도 배경은 변하지않는다.

Menu {{each}}

DropDown 메뉴를 만드는데 기본은, dropdown 창을 열수있는것은 오직 자기 자신이지만 닫는것은 자기 자신 또는 바깥에서도 닫을수있어야한다는것이다. 이를 위해 vue 의 ref 객체와 window.addEventListener 의 적절한 조합이 필요하다. 바깥을 클릭하는지 확인하기위해 vue 의 ref 를 사용하고, 이 객체를 e.target 과 비교하는것이 중요하다. if (e.target !== menu.value) close() // 바깥을 클릭했으면 close() 실행 ES6 스타일로 작성해보면.. const mouseDown = () => { !state.isOpened ? open() : close() } const open = () => { state.isOpened = true w..

{ } 가 => 뒤에 있냐없느냐에 따라 return 의 존재여부가 결정된다. { } 가 없을 경우는, 곧 바로 return 하게되며, { } 가 있을 경우는 return 을 적시해줘야한다. const f1 = () => 'hello' // { } 가 없으므로 'hello' 를 return 함! const f2 = () => { return 'world '} // { } 가 있으므로, return 을 작성해줘야함!

medium.com/@_diana_lee/default-export와-named-export-차이점-38fa5d7f57d4 developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export /* test.js */ //1 . 변수, 함수 정의 const value = 'One' const method = (msg) => { console.log(msg) } //2. 변수, 함수를 하나의 변수에 담기! const test = { value, method } //3. 이 변수 내보내기! (반드시 해야함!) export default test ES6 의 export, import /* text.js */ const value..

v3.vuejs.org/guide/composition-api-template-refs.html#template-refs 아래와 같이 div 와 .css 가 있다. #something { width : 100%; height : 100%; background-color : red; } 이때 id 와 getComputedStyle 함수를 이용해 해당 요소의 현재 style 의 각 속성별 값을 알아낼수있다. function getStyle(id, property) { return getComputedStyle(document.getElementById(id))[property] } console.log(getStyle('something', 'width')) // 731.429px conso..

앞서 SVG 관련 포스트가 있지만, 좀더 완벽하게 정리해놓으려한다. 1. 일러스트레이터에서 텍스트를 작성한뒤, 적당한 폰트를 고른다. 2. Create Outlines 를 이용해 path 로 깨트린다. 3. 일러스트레이터에서 Ctrl + C (복사) 한뒤, jakearchibald.github.io/svgomg/ 에서 Ctrl + V (붙여넣기한다) 이렇게 하면 Path 와 여러 잡스러운 SVG 태그가 정리된다. 4. 이를 다시 복사해 VSCode 에 붙여넣는다. 엄청나게 길지만, 이게 Hello 의 Path 다. 위에서 style 속성을 제거해준다. viewBox 외에 다른 속성이 SVG 태그안에 필요하지않다. 필요한것은 CSS 클래스로 정의하게된다. 5. 이제 CSS 에서 svg 를 정의한다. svg..