SilverPrize silverprize

Vue.js + TSX + Storybook 구성이 불가능함

Storybook 패키지로부터 react, react-dom, emotion 패키지의 타입 정의가 컴파일에 포함되는데,
vue에 맞게 intrinsic elements, value-based elements를 타입 호환이 되도록 맞출수가 없다. storybookjs/storybook#7379

템플릿 기반 functional component의 v-for & ref 오동작

부모 컴포넌트에서 functional component엘리먼트에 v-for와 ref를 적용했을때 refInFor가 적용되지 않음.
ref에 지정한 이름의 프로퍼티에 엘리먼트 array로 저장되지 않고 v-for의 마지막 엘리먼트만 저장됨. vuejs/vue#10171 찾아봤는데 vue-template-compiler에 결함이 있다.

텍스트 입력할때 CPU사용량이 폭등하는 문제 완화하기
https://youtrack.jetbrains.com/issue/IDEA-207243

webpack-dev-server 모듈 기반으로 구성된 프런트엔드 개발환경에서 불시에 페이지 무한 리로드를 발생시키는 문제가 있어 코드를 쫓아가 보았다.
webpack-dev-server -> chokidar -> fsevents 관계로 의존하고 있다.

chokidar 모듈은 파일 시스템 watch를 사용하기 좋게 만든 모듈이고 fsevents 모듈은 macOS 파일시스템 이벤트를 감지하는 모듈이다.
macOS 파일 시스템 이벤트 목록은 아래 링크에서 볼 수 있다.
https://developer.apple.com/documentation/coreservices/1455361-fseventstreameventflags?language=objc
즉, fsevents 모듈은 chokidar 모듈의 엔진이라고 볼 수 있다.

무한 리로드 현상은 위 링크의 이벤트중에서 "kFSEventStreamEventFlagMustScanSubDirs & kFSEventStreamEventFlagKernelDropped" 으로 조합된 이벤트가 발생했을때 시작된다.
macOS는 이 이벤트가 발생하는 원인을 해결할 때까지 이벤트를 계속 보내준다.

참고글 : https://blog.jonnew.com/posts/poo-dot-length-equals-two

“🖤”.length() => 2
“❤️”.length() => 2
“👦”.length() => 2
“👦🏾”.length() => 4
“🚵‍♀️”.length() => 5
“👨‍👩‍👦‍👦”.length() => 11

한글자로 취급될 것 같은 한개의 이모지에서 이런 결과가 나오는 이유를 찾아보았습니다.

	{
	"editor.lineHeight": 19,
	"editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero'",
	"editor.fontFamily": "'FiraCode-Retina', 'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace",
	"editor.tabSize": 2,
	"editor.wordWrapColumn": 100,
	"editor.wordWrap": "on",
	"files.trimTrailingWhitespace": true,
	"workbench.colorTheme": "Visual Studio Light",
	"workbench.editor.showTabs": true,

	import javax.servlet.ServletException;
	import javax.servlet.http.HttpServletRequest;
	import javax.servlet.http.HttpServletResponse;
	import java.io.IOException;
	import java.util.Map;
	import java.util.UUID;

	import org.springframework.beans.factory.annotation.Autowired;
	import org.springframework.beans.factory.annotation.Value;
	import org.springframework.context.annotation.Configuration;

	(defn- count-change [coins offset target]
	(if (= target 0)
	1
	(loop [coins coins offset offset target target sum 0]
	(if (< offset (alength coins))
	(if (>= target (nth coins offset))
	(recur coins (inc offset) target (+ sum (count-change coins offset (- target (nth coins offset)))))
	(recur coins (inc offset) target sum))
	sum))))

	(defn- swap [source idx0 idx1]
	(def tmp (aget source idx0))
	(aset source idx0 (aget source idx1))
	(aset source idx1 tmp))

	; find median among start/mid/end
	(defn- get-pivot [source start len]
	(let [end (+ start (dec len)) mid (+ start (int (/ len 2)))]
	(if
	(or

	(defn- round [idx]
	(int (+ idx 0.5)))

	(defn- get-parent-idx [idx]
	(dec (round (* idx 0.5))))

	(defn- get-left-child-idx [idx]
	(inc (* idx 2)))

	(defn- get-right-child-idx [idx]

	# convert all m4a to mp3 in directory
	# mp3 256k bitrate
	for f in *.m4a; do name=`basename ${f} .m4a`; ffmpeg -i ${f} -acodec libmp3lame -ab 256k ${name}.mp3; done