음악, 삶, 개발

다른 사람들의 코드를 보면 막 css class 명, vue 에서 제공하는 특정 함수들이 막 섞여있어서 그런것들 다 배제하고 작성해야하는 최소한의 코드만을 사용했다. 잔 곁가지들을 다 걷어내고 완전한 순살 코드만 작성한것이다. "click" 대신 "mousedown" 을 사용하였고, vue 의 component 들과 송신하기위한 ref 외에는 lifecycle hook 등은 일체 사용하지않고 구현하였다. dropdown 메뉴에서 중요한건 window event listener 가 메뉴가 열리면 생기고, 닫히면 소멸해야하는것이다. Vue 에서 잠시 Svelte 로 넘어갔던 이유가 boilerplate 코드가 너무 많다고 느꼈기때문인데, Vue 3 의 script setup 이 생기면서 거의 Svelte 수..

re-rendering 을 원한다면 함수를 써도 되지만, static 한 style 일 경우 return 값으로 넘겨야한다. 위 경우 해당 컴포넌트에 무슨일이 일어날때마다, v-text 가 변한다. 이것을 방지하려면, 위와 같이 생성후 return 해주어야한다. 이는 v-text 뿐아니라 :style 에도 적용된다. 의도적으로 무슨일이 생길때마다 랜더링을 원하다면 함수를 바로 사용하는것이고, 아닐 경우 return 한다.

먼저 이걸 기억하자. v-for 를 사용하는 요소는 독립된 컴포넌트, 즉 .vue 파일이어야한다. Vue 를 사용하면 Virtual DOM 을 사용하므로, 업데이트된 요소만 다시 랜더링된다고 배우지만, div나 기본 tag를 v-for 하게되면 전체가 랜더링되게 된다. add {{e}} 보이는것처럼, 요소를 추가하는데 모든 요소가 다시 랜더링되고있다. 따라서 v-for 를 할 요소는, 반드시 독립된 vue 파일로 만들어 분리해야한다.

v3.vuejs.org/guide/class-and-style.html#object-syntax-2 style 속성에 array 를 넣으므로써, class 를 흉내낼수있다. ES6 를 활용하면 아래와 같이 객체로도 가능하다.

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..

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..

github.com/vitejs/vite/issues/178 Vite 는 Vue-Cli 와 달리, .vue 파일을 import 할때 반드시 .vue 확장자를 포함해야한다. import LeeButton from './components/LeeButton.vue' Vue 창조자의 디자인적인 결정이었다고함.