음악, 삶, 개발

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 에서 지지고볶지말고 클래스를 ..

^#[^@}]+} // id ^\.[^@}]+} // class Vscode 말고, Sublime Text 에서 해야함.

tailWind css 를 사용하면서, 내가 직접 CSS 라이브러리를 짜보고싶다면 욕심이 생겼다. 이를 위해 필요한것이 SCSS 이다. SCSS 는 CSS 의 단점을 보완하기위해 나온 언어이다. SCSS 를 사용하면 CSS 안에서 for loop 를 하여, 여러 클래스를 순차적으로 생성해낼수있다. SCSS 는 pre-processor 이기때문에, 빌드하고나면 plain CSS 가 된다. 먼저 vite 환경 터미널에서 npm install -D sass 를 통해 설치를 한다. 이제 사용해보자. /* test.scss */ $len : 100; @for $i from 1 through $len { .text-size-#{$i} { color : yellow; font-size : $i + px; } } 위의..