음악, 삶, 개발

@for $i from 0 through 63 { [data-color="#{$i}"] { background-color: hsl(360 / 64 * ($i - 1), 38%, 43%); } } https://www.sassmeister.com

귀찮게 svg 요소 만들어서 집어넣을 필요없이 css 에서 사용할수있는 방법이 있다. 먼저 https://yoksel.github.io/url-encoder/ 가서 svg 를 url 로 변환한뒤에 .div { background-color: red; /* svg fill 색 */ -webkit-mask-image: url('svg를url로변경한string'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; mask-image: url('svg를url로변경한string'); mask-repeat: no-repeat; mask-position: center center; } 이렇게 하면 center 에 align 할수있으며, ma..

https://emilk.github.io/egui/ https://github.com/emilk/egui 매우 흥미로운 프로젝트다. 성능적으로 엄청난데, 추후 rust 를 배워서 나의 ui 를 이걸로 대체하고싶을정도..

https://tahti.studio

/* Generated using SCSS at https://www.sassmeister.com/ This is code. @for $i from 1 through 4 { .my-bg-color-#{$i} { background-color: hsl(360 / 64 * ($i - 1), 38%, 43%); } }

single page application 을 개발할때 보통 아래와 같이 html 파일을 생성한다. /* index.html - 단일 실행 불가. server 필요 */ index.html 파일안에 css 파일과 index.js 파일을 로딩하는것이다. 이렇게 될 경우 index.html, style.css, index. js 3개의 파일을 함께 배포해야한다. 또한 랜더린된 화면을 보기위해서는 server 가 필요하다. server 가 필요없이 그냥 내 컴퓨터안에서 index.html 파일을 더블클릭함으로써 화면을 보고싶다면 css 파일안에 모든 내용을 style 태그안에 집어놓고, script 태그안에 index.js 의 모든 내용을 복사 붙여넣기 해줘야한다. /* index.html : 단일 실행 가능..

https://www.npmjs.com/package/objc objc NodeJS ↔ Objective-C bridge www.npmjs.com OS 의 clipboard 에 텍스트 복사는 라이브러리도 있고 Node.js 에도 가능하지만, 파일 복사는 불가능하다. 이를 구현하기위해서 하루종일 구글링을하다가 결국 JUCE 의 가장 밑단 코드들까지 뒤져보게되었고, 결국 macOS 의 native api 를 node.js 에서 호출할수없을까라는 고민까지 하게되었다. JUCE 의 DragAndDropContainer 에서 결국 object-c 로 작성된 코드가 가장 밑바닥에 자리하고있었기때문이다. 지금 나는 JUCE 로 개발하고있지않기때문에 Node.js 에서 os 의 native 함수를 호출할수없나 찾아보게..

개발이 후반부으로 가다보면 작지만 더럽게 널부러져있는 코드를 정리하고, 최적화에 집중하게된다. array 와 루프는 js 코드에서 매우 자주쓰이는 형태인데, 루프를 도는 여러 방법들이 존재하지만, forEach 는 느려서 사용하지않고, 대부분 그냥 for loop 를 사용하였다. 가독성은 조금 떨어지지만 가장 빠르기때문이다. 만약 for loop 의 도는 순서가 반대로 바뀌어도 상관없는 경우에만, 아래의 loop 를 쓰면 가장 빠르다. for (let i = array.length; i--; ) 여기서 i-- 만으로 조건이 확인이된다. i 가 0 일 경우 false 로 간주되기때문이다. 주의할점은 일반적인 for loop 와 달리 --i 를 하면 안된다. 벤치마크 : http://jsbench.githu..

https://codepen.io/AlexWarnes/pen/jXYYKL

보통 client 가 server 에 접속시, path 모듈을 이용해 index.html 이 포함된 폴더를 client 하게 넘기게된다. 이렇게 하기위해서는 결국 client 에서 build 를 해놔야하는데, 개발중에는 매번 빌드하는것이 매우 번거러운 일이다. 따라서 개발시에는 Backend 서버와 FrontEnd 서버 (Vite 같은것) 가 동시에 실행된 상황에서, FrontEnd 속 socket.io-client 는 BackEnd 서버로 접속할수있게 해야한다. Vite 같은경우 npm run dev 를 하였을때, 기본적으로 3000 으로 접속하게된다. Backend 서버가 8000 포트를 사용하고, Frontend 서버가 3000 을 사용하고있다고 해보자. /* back_end_server.js */..