Younho9 Notes2022-10-20
TODO
- https://github.com/nuxt-modules/tailwindcss/pull/544#discussion_r999167727
- Vue Storybook에서 외부에 props를 선언했을 때, Control Panel(ArgTypes)에 나타나지 않는 문제
- #storybook #vue
- ArgTypes (storybook.js.org)
- vue-docgen-api를 사용하는 것으로 보임
- Addon-docs: Options for vue-docgen-api · Issue #9615 · storybookjs/storybook (github.com)
- Components withs external props are not rendered · Issue #222 · vue-styleguidist/vue-styleguidist (github.com)
- Props not showing in the DocsPage when they're imported from another file into the component (Vue) · Issue #11774 · storybookjs/storybook (github.com)
- vue-styleguidist가 구문 분석하는 유일한 두 가지 종속성은
mixins,extends이다.
- vue-styleguidist가 구문 분석하는 유일한 두 가지 종속성은
Learning
js
function temp() {
for (let i = 0; i < 100000000; i++) {
const j = i * 2;
}
}
console.time('temp');
temp();
console.timeEnd('temp');
function temp() {
for (let i = 0; i < 100000000; i++) {
const j = i * 2;
}
}
console.time('temp');
temp();
console.timeEnd('temp');
- 점점 빨라짐
클로저는 반환된 내부함수가 자신이 선언되었을 때의 환경인 스코프를 기억하여 자신이 선언되었을 때의 환경 곧 스코프 밖에서 호출되어도 그 환경에 접근할 수 있는 함수를 말한다.
클로저는 자신이 생성될 때의 환경을 기억하는 함수다.
부트스트랩(Bootstrap)이란, 일반적으로 한 번 시작되면 알아서 진행되는 일련의 과정을 뜻한다. 컴퓨터 부팅 과정을 부트스트랩이라고 하기도 하는데,
debounce 구현
ver.1
js
export const debounce = (callback: Function, delayTime = 0) => {
let timeout: NodeJS.Timeout;
return (...args: any[]) => {
if (timeout) clearTimeout(timeout); // (1)
timeout = setTimeout(() => {
callback(...args);
clearTimeout(timeout); // (2)
}, delayTime);
};
};
export const debounce = (callback: Function, delayTime = 0) => {
let timeout: NodeJS.Timeout;
return (...args: any[]) => {
if (timeout) clearTimeout(timeout); // (1)
timeout = setTimeout(() => {
callback(...args);
clearTimeout(timeout); // (2)
}, delayTime);
};
};
clearTimeout 을 하더라도, timeout 변수는 null | undefined 가 아니므로, (1) 은 첫 실행을 제외하고 모두 실행된다.
delayTime이 경과하여 callback이 실행되는 경우, clearTimeout으로 가장 마지막 timeout을 취소한다. 다음 실행에서 (1)로 인해 같은 ID를 두 번 취소하게 된다.
ver.2
js
export const debounce = (callback: Function, delayTime = 0) => {
let timeout: NodeJS.Timeout;
return (...args: any[]) => {
clearTimeout(timeout);
timeout = setTimeout(() => {
callback(...args);
}, delayTime);
};
};
export const debounce = (callback: Function, delayTime = 0) => {
let timeout: NodeJS.Timeout;
return (...args: any[]) => {
clearTimeout(timeout);
timeout = setTimeout(() => {
callback(...args);
}, delayTime);
};
};