음악, 삶, 개발

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

stackoverflow.com/questions/10765755/how-to-apply-multiple-transforms-in-css

/* server.js */ const maxApi = require('max-api') const express = require('express') const app = express() const port = 8000 const server = app.listen(port) const io = require('socket.io')(server) const folderName = 'dist' // 사용자가 접속했을때 제공할 폴더. (Vue 로 build 한 폴더) app.use(express.static(folderName)) // 사용자가 접속했을때 메세지 보냄. io.on("connection", (socket) => { socket.emit('Max', 'Welcome to Max!') }); ..

const message = { a : 'Hello', b : 'World', c : [1, 2, 3, 4], d : { something : 'cool' }, e : 45.24 } io.emit('철수', message)

/* server.js */ const maxApi = require('max-api') maxApi.addHandler('message', (index, value) => { const message = { index : index, value : value, } io.emit('Channel', message) })

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

@mixin layer { .layer { display: grid; grid-template-columns: 1fr; * { grid-column-start : 1; grid-row-start : 1; } } } @include layer; 이렇게 해놓으면, 자식 요소에는 아무런 처리를 해주지않아도, 부모 크기에 맞춰 100% 100% 가 되고, 포토샵처럼 완전 같은 위치에 레이어할수있다.

매번 .vue 파일에 내가 만든 scss 를 import 하는것은 매우 귀찮은일이다. 다행히 global 로 scss 를 추가하는법은 생각보다 간단했다. main.js 에 해당 파일을 import 해주면 된다. /* main.js */ import { createApp } from 'vue' import App from './App.vue' import './index.css' import './dev/scss/leestrument.scss' // 내가 만든 scss! createApp(App).mount('#app') 이렇게 되면, 모든 .vue 파일에서 import 없이 scss 로 만든 클래스들을 접근할수있다.

CSS 에서는 -- 를 앞에 붙임으로써 변수를 선언할수있다. 또한 CSS 변수는 다른 클래스안에서 재설정할수있다. .rect { --bg-color : black; background: var(--bg-color); } .red { --bg-color : red; } .blue { --bg-color : blue; } .green { --bg-color : green; } .purple { --bg-color : purple;} 위와 같이 작성하면, JS 에서 inline-style 을 접근하여 귀찮게 변경하지않고, 그저 클래스를 갈아끼움으로써 해당 변수가 다르게 적용되게끔 할수있다. 이 변수는 linear-gradient 같은 CSS 함수의 내부 인자로 전달될수있다. JS 에서 지지고볶지말고 클래스를 ..