Docs: vitepress로 docs 페이지 제작 #25
Conversation
Summary of ChangesHello @976520, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
📊 Test Coverage Report (vitest)
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| const millionsCount = ref(0); | ||
| const kbCount = ref(0); | ||
|
|
||
| const animateCountUp = (targetValue, duration, callback) => { | ||
| const startTime = performance.now(); | ||
| const startValue = 0; | ||
|
|
||
| const animate = (currentTime) => { | ||
| const elapsed = currentTime - startTime; | ||
| const progress = Math.min(elapsed / duration, 1); | ||
|
|
||
| const easeInOutCubic = | ||
| progress < 0.5 | ||
| ? 4 * progress * progress * progress | ||
| : 1 - Math.pow(-2 * progress + 2, 3) / 2; | ||
|
|
||
| const currentValue = Math.floor( | ||
| startValue + (targetValue - startValue) * easeInOutCubic | ||
| ); | ||
| callback(currentValue); | ||
|
|
||
| if (progress < 1) { | ||
| requestAnimationFrame(animate); | ||
| } else { | ||
| callback(targetValue); | ||
| } | ||
| }; | ||
|
|
||
| requestAnimationFrame(animate); | ||
| }; | ||
|
|
||
| const startInitialAnimation = () => { | ||
| animateCountUp(42, 1500, (value) => { | ||
| kbCount.value = value; | ||
| }); | ||
|
|
||
| animateCountUp(1048596, 2500, (value) => { | ||
| millionsCount.value = value; | ||
| if (value >= 1048596) { | ||
| if (!window.__incrementStarted) { | ||
| window.__incrementStarted = true; | ||
| setInterval(() => { | ||
| millionsCount.value += Math.floor(Math.random() * 8) + 2; | ||
| }, 100); | ||
| } | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| const scrolled = ref(false); | ||
|
|
||
| const handleScroll = () => { | ||
| scrolled.value = window.scrollY > 50; | ||
| }; | ||
|
|
||
| onMounted(() => { | ||
| startInitialAnimation(); | ||
| window.addEventListener("scroll", handleScroll); | ||
| }); | ||
|
|
||
| onUnmounted(() => { | ||
| window.removeEventListener("scroll", handleScroll); | ||
| }); |
There was a problem hiding this comment.
setInterval이 컴포넌트가 unmount될 때 정리되지 않아 메모리 누수가 발생할 수 있습니다. 또한, window.__incrementStarted와 같이 전역 window 객체에 상태를 저장하는 것은 사이드 이펙트를 유발할 수 있으므로 피하는 것이 좋습니다. setInterval의 ID와 시작 상태를 컴포넌트 내부 ref로 관리하고, onUnmounted에서 clearInterval을 호출하여 타이머를 정리하도록 수정했습니다.
const millionsCount = ref(0);
const kbCount = ref(0);
const incrementInterval = ref(null);
const incrementStarted = ref(false);
const animateCountUp = (targetValue, duration, callback) => {
const startTime = performance.now();
const startValue = 0;
const animate = (currentTime) => {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const easeInOutCubic =
progress < 0.5
? 4 * progress * progress * progress
: 1 - Math.pow(-2 * progress + 2, 3) / 2;
const currentValue = Math.floor(
startValue + (targetValue - startValue) * easeInOutCubic
);
callback(currentValue);
if (progress < 1) {
requestAnimationFrame(animate);
} else {
callback(targetValue);
}
};
requestAnimationFrame(animate);
};
const startInitialAnimation = () => {
animateCountUp(42, 1500, (value) => {
kbCount.value = value;
});
animateCountUp(1048596, 2500, (value) => {
millionsCount.value = value;
if (value >= 1048596) {
if (!incrementStarted.value) {
incrementStarted.value = true;
incrementInterval.value = setInterval(() => {
millionsCount.value += Math.floor(Math.random() * 8) + 2;
}, 100);
}
}
});
};
const scrolled = ref(false);
const handleScroll = () => {
scrolled.value = window.scrollY > 50;
};
onMounted(() => {
startInitialAnimation();
window.addEventListener("scroll", handleScroll);
});
onUnmounted(() => {
window.removeEventListener("scroll", handleScroll);
if (incrementInterval.value) {
clearInterval(incrementInterval.value);
}
});
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
📊 Test Coverage Report (vitest)
|
📊 Test Coverage Report (vitest)
|
📊 Test Coverage Report (vitest)
|
vitepress