๋์ ์ต์ ํ ๊ธฐ์ ๋ก ํ๋ฐํธ์๋ ์ฑ๋ฅ์ ๊ทน๋ํํ์ธ์. ์ด ๊ฐ์ด๋๋ JavaScript ์คํ๋ถํฐ ๋ ๋๋ง ์ต์ ํ๊น์ง ๋ฐํ์ ์ฑ๋ฅ ํ๋ ์ ๋ต์ ๋ค๋ฃน๋๋ค.
ํ๋ฐํธ์๋ ๋์ ์ต์ ํ: ๋ฐํ์ ์ฑ๋ฅ ํ๋
ํ๋ฐํธ์๋ ๊ฐ๋ฐ ์์ญ์์ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ์ถ์ ๋ฐ ์ด๋ฏธ์ง ์์ถ๊ณผ ๊ฐ์ ์ ์ ์ต์ ํ ๊ธฐ์ ์ ํ์์ ์ธ ์์์ ์ ๋๋ค. ๊ทธ๋ฌ๋ ์ง์ ํ ๊ณผ์ ๋ ์ฌ์ฉ์๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ํธ ์์ฉํ ๋ ๋ฐ์ํ๋ ๋ฐํ์ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ํด๊ฒฐํ๋ ๋ฐ ์์ต๋๋ค. ์ด ๊ฐ์ด๋๋ ๋์ ์ต์ ํ์ ์ธ๊ณ๋ฅผ ๊น์ด ํ๊ณ ๋ค์ด, ๋ฐํ์ ์ค ์ต์ ์ ์ฑ๋ฅ์ ์ํด ํ๋ฐํธ์๋๋ฅผ ๋ฏธ์ธ ์กฐ์ ํ๋ ์ง์๊ณผ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
๋ฐํ์ ์ฑ๋ฅ ์ดํดํ๊ธฐ
๋ฐํ์ ์ฑ๋ฅ์ ํ๋ฐํธ์๋ ์ฝ๋๊ฐ ์ฌ์ฉ์ ๋ธ๋ผ์ฐ์ ์์ ์ผ๋ง๋ ํจ์จ์ ์ผ๋ก ์คํ๋๊ณ ๋ ๋๋ง๋๋์ง๋ฅผ ๋ํ๋ ๋๋ค. ์ฌ๊ธฐ์๋ ๋ค์๊ณผ ๊ฐ์ ๋ค์ํ ์ธก๋ฉด์ด ํฌํจ๋ฉ๋๋ค:
- JavaScript ์คํ: JavaScript ์ฝ๋๊ฐ ๊ตฌ๋ฌธ ๋ถ์, ์ปดํ์ผ ๋ฐ ์คํ๋๋ ์๋.
- ๋ ๋๋ง ์ฑ๋ฅ: ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ทธ๋ฆฌ๋ ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ์์ง์ ํจ์จ์ฑ.
- ๋ฉ๋ชจ๋ฆฌ ๊ด๋ฆฌ: ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ํ ๋นํ๊ณ ํด์ ํ๋ ํจ์จ์ฑ.
- ๋คํธ์ํฌ ์์ฒญ: ์๋ฒ์์ ๋ฆฌ์์ค๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ.
๋ฐํ์ ์ฑ๋ฅ ์ ํ๋ ๋ค์์ ์ ๋ฐํ ์ ์์ต๋๋ค:
- ๋๋ฆฐ ํ์ด์ง ๋ก๋ ์๊ฐ: ์ฌ์ฉ์๋ฅผ ์ข์ ์ํค๊ณ ๊ฒ์ ์์ง ์์์ ์ ์ฌ์ ์ผ๋ก ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
- ๋ฐ์ ์๋ UI: ์ง์ฐ๋๊ณ ๋ถ์พํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๋ฐํฉ๋๋ค.
- ๋์์ง ์ดํ๋ฅ : ๋ฎ์ ์ฑ๋ฅ์ผ๋ก ์ธํด ์ฌ์ฉ์๊ฐ ์น์ฌ์ดํธ๋ฅผ ๋ ๋ฉ๋๋ค.
- ๋ ๋์ ์๋ฒ ๋น์ฉ: ๋นํจ์จ์ ์ธ ์ฝ๋๋ก ์ธํด ๋ ๋ง์ ๋ฆฌ์์ค๊ฐ ํ์ํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
ํ๋กํ์ผ๋ง ๋ฐ ๋ณ๋ชฉ ํ์ ์๋ณ
๋์ ์ต์ ํ์ ์ฒซ ๋ฒ์งธ ๋จ๊ณ๋ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๋ ๊ฒ์ ๋๋ค. ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ ํ๋ฐํธ์๋๊ฐ ์ด๋ ค์์ ๊ฒช๊ณ ์๋ ์์ญ์ ์ ํํ ์ฐพ์๋ด๋ ๋ฐ ๋์์ด ๋๋ ๊ฐ๋ ฅํ ํ๋กํ์ผ๋ง ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ์ธ๊ธฐ ์๋ ๋๊ตฌ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- Chrome ๊ฐ๋ฐ์ ๋๊ตฌ: ์น ์ ํ๋ฆฌ์ผ์ด์ ๋๋ฒ๊น ๋ฐ ํ๋กํ์ผ๋ง์ ์ํ ํฌ๊ด์ ์ธ ๋๊ตฌ ๋ชจ์์ ๋๋ค.
- Firefox ๊ฐ๋ฐ์ ๋๊ตฌ: Chrome ๊ฐ๋ฐ์ ๋๊ตฌ์ ์ ์ฌํ๋ฉฐ, ์ฑ๋ฅ ๊ฒ์ฌ ๋ฐ ์ต์ ํ๋ฅผ ์ํ ๋ค์ํ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
- Safari ์น ๊ฒ์ฌ๊ธฐ: Safari ๋ธ๋ผ์ฐ์ ์ ๋ด์ฅ๋ ๊ฐ๋ฐ์ ๋๊ตฌ ์ธํธ์ ๋๋ค.
ํ๋กํ์ผ๋ง์ ์ํ Chrome ๊ฐ๋ฐ์ ๋๊ตฌ ์ฌ์ฉํ๊ธฐ
๋ค์์ Chrome ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ ํ๋กํ์ผ๋ง์ ๊ธฐ๋ณธ ์ํฌํ๋ก์ ๋๋ค:
- ๊ฐ๋ฐ์ ๋๊ตฌ ์ด๊ธฐ: ํ์ด์ง์์ ๋ง์ฐ์ค ์ค๋ฅธ์ชฝ ๋ฒํผ์ ํด๋ฆญํ๊ณ "๊ฒ์ฌ(Inspect)"๋ฅผ ์ ํํ๊ฑฐ๋ F12๋ฅผ ๋๋ฆ ๋๋ค.
- ์ฑ๋ฅ ํญ์ผ๋ก ์ด๋: ์ด ํญ์ ๋ฐํ์ ์ฑ๋ฅ์ ๊ธฐ๋กํ๊ณ ๋ถ์ํ๋ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ๊ธฐ๋ก ์์: ๊ธฐ๋ก ๋ฒํผ(์ ๋ชจ์)์ ํด๋ฆญํ์ฌ ํ๋กํ์ผ๋ง์ ์์ํฉ๋๋ค.
- ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ํธ ์์ฉ: ๋ถ์ํ๋ ค๋ ์์ ์ ์ํํฉ๋๋ค.
- ๊ธฐ๋ก ์ค์ง: ๊ธฐ๋ก ๋ฒํผ์ ๋ค์ ํด๋ฆญํ์ฌ ํ๋กํ์ผ๋ง์ ์ค์งํฉ๋๋ค.
- ๊ฒฐ๊ณผ ๋ถ์: ๊ฐ๋ฐ์ ๋๊ตฌ๋ JavaScript ์คํ, ๋ ๋๋ง ๋ฐ ๋คํธ์ํฌ ํ๋์ ํฌํจํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ๋ํ ์์ธํ ํ์๋ผ์ธ์ ํ์ํฉ๋๋ค.
์ฑ๋ฅ ํญ์์ ์ง์คํด์ผ ํ ์ฃผ์ ์์ญ:
- CPU ์ฌ์ฉ๋: ๋์ CPU ์ฌ์ฉ๋์ JavaScript ์ฝ๋๊ฐ ์๋นํ ์์ ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ ์๋นํ๊ณ ์์์ ๋ํ๋ ๋๋ค.
- ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋: ๋ฉ๋ชจ๋ฆฌ ํ ๋น ๋ฐ ๊ฐ๋น์ง ์ปฌ๋ ์ ์ ์ถ์ ํ์ฌ ์ ์ฌ์ ์ธ ๋ฉ๋ชจ๋ฆฌ ๋์๋ฅผ ์๋ณํฉ๋๋ค.
- ๋ ๋๋ง ์๊ฐ: ๋ธ๋ผ์ฐ์ ๊ฐ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ทธ๋ฆฌ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๋ถ์ํฉ๋๋ค.
- ๋คํธ์ํฌ ํ๋: ๋๋ฆฌ๊ฑฐ๋ ๋นํจ์จ์ ์ธ ๋คํธ์ํฌ ์์ฒญ์ ์๋ณํฉ๋๋ค.
ํ๋กํ์ผ๋ง ๋ฐ์ดํฐ๋ฅผ ์ ์คํ๊ฒ ๋ถ์ํ์ฌ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์ ๋ฐํ๋ ํน์ ํจ์, ๊ตฌ์ฑ ์์ ๋๋ ๋ ๋๋ง ์์ ์ ์๋ณํ ์ ์์ต๋๋ค.
JavaScript ์ต์ ํ ๊ธฐ์
JavaScript๋ ๋ฐํ์ ์ฑ๋ฅ ๋ฌธ์ ์ ์ฃผ์ ์์ธ์ธ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ๋ค์์ JavaScript ์ฝ๋๋ฅผ ์ต์ ํํ๋ ๋ช ๊ฐ์ง ํต์ฌ ๊ธฐ์ ์ ๋๋ค:
1. ๋๋ฐ์ด์ฑ(Debouncing) ๋ฐ ์ค๋กํ๋ง(Throttling)
๋๋ฐ์ด์ฑ๊ณผ ์ค๋กํ๋ง์ ํจ์๊ฐ ์คํ๋๋ ์๋๋ฅผ ์ ํํ๋ ๋ฐ ์ฌ์ฉ๋๋ ๊ธฐ์ ์ ๋๋ค. ์คํฌ๋กค ์ด๋ฒคํธ, ํฌ๊ธฐ ์กฐ์ ์ด๋ฒคํธ, ์ ๋ ฅ ์ด๋ฒคํธ์ ๊ฐ์ด ์์ฃผ ๋ฐ์ํ๋ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ ํนํ ์ ์ฉํฉ๋๋ค.
- ๋๋ฐ์ด์ฑ: ํจ์๊ฐ ๋ง์ง๋ง์ผ๋ก ํธ์ถ๋ ์์ ์ผ๋ก๋ถํฐ ํน์ ์๊ฐ์ด ๊ฒฝ๊ณผํ ํ์์ผ ํจ์์ ์คํ์ ์ง์ฐ์ํต๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ๋น ๋ฅด๊ฒ ํ์ดํํ๊ฑฐ๋ ์คํฌ๋กคํ ๋ ํจ์๊ฐ ๋๋ฌด ์์ฃผ ์คํ๋๋ ๊ฒ์ ๋ฐฉ์งํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค.
- ์ค๋กํ๋ง: ์ง์ ๋ ์๊ฐ ๋ด์ ํจ์๋ฅผ ์ต๋ ํ ๋ฒ ์คํํฉ๋๋ค. ์ด๋ ์ด๋ฒคํธ๊ฐ ๊ณ์ ์์ฃผ ๋ฐ์ํ๋๋ผ๋ ํจ์๊ฐ ์คํ๋๋ ์๋๋ฅผ ์ ํํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค.
์์ (๋๋ฐ์ด์ฑ):
function debounce(func, delay) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), delay);
};
}
const expensiveFunction = () => {
console.log("Executing expensive function");
};
const debouncedFunction = debounce(expensiveFunction, 250);
window.addEventListener('resize', debouncedFunction);
์์ (์ค๋กํ๋ง):
function throttle(func, limit) {
let inThrottle;
return function(...args) {
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
}
}
const expensiveFunction = () => {
console.log("Executing expensive function");
};
const throttledFunction = throttle(expensiveFunction, 250);
window.addEventListener('scroll', throttledFunction);
2. ๋ฉ๋ชจ์ด์ ์ด์ (Memoization)
๋ฉ๋ชจ์ด์ ์ด์ ์ ๋น์ฉ์ด ๋ง์ด ๋๋ ํจ์ ํธ์ถ ๊ฒฐ๊ณผ๋ฅผ ์บ์ฑํ๊ณ ๋์ผํ ์ ๋ ฅ์ด ๋ค์ ๋ฐ์ํ ๋ ์บ์๋ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ ์ต์ ํ ๊ธฐ์ ์ ๋๋ค. ์ด๋ ๋์ผํ ์ธ์๋ก ๋ฐ๋ณต์ ์ผ๋ก ํธ์ถ๋๋ ํจ์์ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์์:
function memoize(func) {
const cache = {};
return function(...args) {
const key = JSON.stringify(args);
if (cache[key]) {
return cache[key];
} else {
const result = func.apply(this, args);
cache[key] = result;
return result;
}
};
}
const expensiveCalculation = (n) => {
console.log("Performing expensive calculation for", n);
let result = 0;
for (let i = 0; i < n; i++) {
result += i;
}
return result;
};
const memoizedCalculation = memoize(expensiveCalculation);
console.log(memoizedCalculation(1000)); // Performs the calculation
console.log(memoizedCalculation(1000)); // Returns cached result
3. ์ฝ๋ ์คํ๋ฆฌํ (Code Splitting)
์ฝ๋ ์คํ๋ฆฌํ ์ JavaScript ์ฝ๋๋ฅผ ํ์ํ ๋ ๋ก๋ํ ์ ์๋ ๋ ์์ ์ฒญํฌ๋ก ๋๋๋ ๊ณผ์ ์ ๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ์ด๊ธฐ ๋ทฐ๋ฅผ ๋ณด๋ ๋ฐ ํ์ํ ์ฝ๋๋ง ๋ก๋ํจ์ผ๋ก์จ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ์ค์ผ ์ ์์ต๋๋ค. React, Angular, Vue.js์ ๊ฐ์ ํ๋ ์์ํฌ๋ ๋์ ์ํฌํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋ ์คํ๋ฆฌํ ์ ๋ํ ๋ด์ฅ ์ง์์ ์ ๊ณตํฉ๋๋ค.
์์ (React):
import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
Loading... 4. ํจ์จ์ ์ธ DOM ์กฐ์
DOM ์กฐ์์ ์ ์คํ๊ฒ ์ฒ๋ฆฌํ์ง ์์ผ๋ฉด ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ด ๋ ์ ์์ต๋๋ค. ๋ค์๊ณผ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ์ง์ ์ ์ธ DOM ์กฐ์์ ์ต์ํํ์ญ์์ค:
- ๊ฐ์ DOM ์ฌ์ฉ: React ๋ฐ Vue.js์ ๊ฐ์ ํ๋ ์์ํฌ๋ ๊ฐ์ DOM์ ์ฌ์ฉํ์ฌ ์ค์ DOM ์ ๋ฐ์ดํธ ์๋ฅผ ์ต์ํํฉ๋๋ค.
- ์ ๋ฐ์ดํธ ์ผ๊ด ์ฒ๋ฆฌ: ์ฌ๋ฌ DOM ์ ๋ฐ์ดํธ๋ฅผ ๋จ์ผ ์์ ์ผ๋ก ๊ทธ๋ฃนํํ์ฌ ๋ฆฌํ๋ก์ฐ(reflow) ๋ฐ ๋ฆฌํ์ธํธ(repaint) ์๋ฅผ ์ค์ ๋๋ค.
- DOM ์์ ์บ์ฑ: ์์ฃผ ์ก์ธ์คํ๋ DOM ์์์ ๋ํ ์ฐธ์กฐ๋ฅผ ์ ์ฅํ์ฌ ๋ฐ๋ณต์ ์ธ ์กฐํ๋ฅผ ๋ฐฉ์งํฉ๋๋ค.
- Document Fragments ์ฌ์ฉ: document fragment๋ฅผ ์ฌ์ฉํ์ฌ ๋ฉ๋ชจ๋ฆฌ์ DOM ์์๋ฅผ ์์ฑํ ๋ค์ ๋จ์ผ ์์ ์ผ๋ก DOM์ ์ถ๊ฐํฉ๋๋ค.
5. ์น ์์ปค(Web Workers)
์น ์์ปค๋ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ง ์๊ณ ๋ฐฑ๊ทธ๋ผ์ด๋ ์ค๋ ๋์์ JavaScript ์ฝ๋๋ฅผ ์คํํ ์ ์๋๋ก ํฉ๋๋ค. ์ด๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋๋ฆฌ๊ฒ ๋ง๋ค ์ ์๋ ๊ณ์ฐ ์ง์ฝ์ ์ธ ์์ ์ ์ํํ๋ ๋ฐ ์ ์ฉํ ์ ์์ต๋๋ค. ์ผ๋ฐ์ ์ธ ์ฌ์ฉ ์ฌ๋ก๋ก๋ ์ด๋ฏธ์ง ์ฒ๋ฆฌ, ๋ฐ์ดํฐ ๋ถ์ ๋ฐ ๋ณต์กํ ๊ณ์ฐ์ด ์์ต๋๋ค.
์์:
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ task: 'expensiveCalculation', data: 1000000 });
worker.onmessage = (event) => {
console.log('Result from worker:', event.data);
};
// worker.js
self.onmessage = (event) => {
const { task, data } = event.data;
if (task === 'expensiveCalculation') {
let result = 0;
for (let i = 0; i < data; i++) {
result += i;
}
self.postMessage(result);
}
};
6. ๋ฃจํ ์ต์ ํ
๋ฃจํ๋ JavaScript์์ ํํ ์ฌ์ฉ๋๋ฉฐ, ๋นํจ์จ์ ์ธ ๋ฃจํ๋ ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
- ๋ฃจํ ๋ด ์์ ์ต์ํ: ๊ฐ๋ฅํ๋ค๋ฉด ๊ณ์ฐ์ด๋ ๋ณ์ ์ ์ธ์ ๋ฃจํ ๋ฐ์ผ๋ก ์ฎ๊น๋๋ค.
- ๋ฐฐ์ด ๊ธธ์ด ์บ์ฑ: ๋ฃจํ ์กฐ๊ฑด ๋ด์์ ๋ฐฐ์ด ๊ธธ์ด๋ฅผ ๋ฐ๋ณต์ ์ผ๋ก ๊ณ์ฐํ๋ ๊ฒ์ ํผํฉ๋๋ค.
- ๊ฐ์ฅ ํจ์จ์ ์ธ ๋ฃจํ ์ ํ ์ฌ์ฉ: ๊ฐ๋จํ ๋ฐ๋ณต์ ๊ฒฝ์ฐ, `for` ๋ฃจํ๊ฐ ์ผ๋ฐ์ ์ผ๋ก `forEach` ๋๋ `map`๋ณด๋ค ๋น ๋ฆ ๋๋ค.
7. ์ฌ๋ฐ๋ฅธ ๋ฐ์ดํฐ ๊ตฌ์กฐ ์ ํ
๋ฐ์ดํฐ ๊ตฌ์กฐ์ ์ ํ์ ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ๋ค์ ์์๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
- ๋ฐฐ์ด vs. ๊ฐ์ฒด: ๋ฐฐ์ด์ ์ผ๋ฐ์ ์ผ๋ก ์์ฐจ ์ ๊ทผ์ ๋ ๋น ๋ฅด๋ฉฐ, ๊ฐ์ฒด๋ ํค๋ก ์์์ ์ ๊ทผํ๋ ๋ฐ ๋ ์ข์ต๋๋ค.
- Set ๋ฐ Map: Set ๋ฐ Map์ ํน์ ์์ ์ ๋ํด ์ผ๋ฐ ๊ฐ์ฒด๋ณด๋ค ํจ์จ์ ์ธ ์กฐํ ๋ฐ ์ฝ์ ์ ์ ๊ณตํฉ๋๋ค.
๋ ๋๋ง ์ต์ ํ ๊ธฐ์
๋ ๋๋ง ์ฑ๋ฅ์ ํ๋ฐํธ์๋ ์ต์ ํ์ ๋ ๋ค๋ฅธ ์ค์ํ ์ธก๋ฉด์ ๋๋ค. ๋๋ฆฐ ๋ ๋๋ง์ ๋๊ธฐ๋ ์ ๋๋ฉ์ด์ ๊ณผ ๋๋ฆฐ ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ๋ค์์ ๋ ๋๋ง ์ฑ๋ฅ์ ํฅ์์ํค๊ธฐ ์ํ ๋ช ๊ฐ์ง ๊ธฐ์ ์ ๋๋ค:
1. ๋ฆฌํ๋ก์ฐ(Reflow) ๋ฐ ๋ฆฌํ์ธํธ(Repaint) ์ต์ํ
๋ฆฌํ๋ก์ฐ(๋ ์ด์์์ด๋ผ๊ณ ๋ ํจ)๋ ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ด์ง์ ๋ ์ด์์์ ๋ค์ ๊ณ์ฐํ ๋ ๋ฐ์ํฉ๋๋ค. ๋ฆฌํ์ธํธ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ด์ง์ ์ผ๋ถ๋ฅผ ๋ค์ ๊ทธ๋ฆด ๋ ๋ฐ์ํฉ๋๋ค. ๋ฆฌํ๋ก์ฐ์ ๋ฆฌํ์ธํธ ๋ชจ๋ ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ ์ด๋ฉฐ, ์ด๋ฅผ ์ต์ํํ๋ ๊ฒ์ ๋ถ๋๋ฌ์ด ๋ ๋๋ง ์ฑ๋ฅ์ ๋ฌ์ฑํ๋ ๋ฐ ์ค์ํฉ๋๋ค. ๋ฆฌํ๋ก์ฐ๋ฅผ ์ ๋ฐํ๋ ์์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- DOM ๊ตฌ์กฐ ๋ณ๊ฒฝ
- ๋ ์ด์์์ ์ํฅ์ ๋ฏธ์น๋ ์คํ์ผ ๋ณ๊ฒฝ (์: width, height, margin, padding)
- offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth, scrollHeight ๊ณ์ฐ
๋ฆฌํ๋ก์ฐ ๋ฐ ๋ฆฌํ์ธํธ๋ฅผ ์ต์ํํ๋ ค๋ฉด:
- DOM ์ ๋ฐ์ดํธ ์ผ๊ด ์ฒ๋ฆฌ: ์ฌ๋ฌ DOM ์์ ์ ๋จ์ผ ์์ ์ผ๋ก ๊ทธ๋ฃนํํฉ๋๋ค.
- ๊ฐ์ ๋๊ธฐ ๋ ์ด์์ ํผํ๊ธฐ: ๋ ์ด์์์ ์ํฅ์ ๋ฏธ์น๋ ์คํ์ผ์ ์์ ํ ์งํ ๋ ์ด์์ ์์ฑ(์: offsetWidth)์ ์ฝ์ง ๋ง์ญ์์ค.
- CSS ํธ๋์คํผ ์ฌ์ฉ: ์ ๋๋ฉ์ด์ ๋ฐ ์ ํ์ ๊ฒฝ์ฐ, ํ๋์จ์ด ๊ฐ์๋๋ CSS ํธ๋์คํผ(์: `transform: translate()`, `transform: scale()`)์ ์ฌ์ฉํฉ๋๋ค.
2. CSS ์ ํ์ ์ต์ ํ
๋ณต์กํ CSS ์ ํ์๋ ํ๊ฐํ๋ ๋ฐ ์๊ฐ์ด ์ค๋ ๊ฑธ๋ฆด ์ ์์ต๋๋ค. ๊ตฌ์ฒด์ ์ด๊ณ ํจ์จ์ ์ธ ์ ํ์๋ฅผ ์ฌ์ฉํ์ญ์์ค:
- ์ง๋์น๊ฒ ๊ตฌ์ฒด์ ์ธ ์ ํ์ ํผํ๊ธฐ: ์ ํ์์ ์ค์ฒฉ ์์ค์ ์ค์ ๋๋ค.
- ํด๋์ค ์ด๋ฆ ์ฌ์ฉ: ํด๋์ค ์ด๋ฆ์ ์ผ๋ฐ์ ์ผ๋ก ํ๊ทธ ์ด๋ฆ์ด๋ ์์ฑ ์ ํ์๋ณด๋ค ๋น ๋ฆ ๋๋ค.
- ์ ์ฒด ์ ํ์ ํผํ๊ธฐ: ์ ์ฒด ์ ํ์(`*`)๋ ๋๋ฌผ๊ฒ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
3. CSS Containment ์ฌ์ฉ
`contain` CSS ์์ฑ์ ์ฌ์ฉํ๋ฉด DOM ํธ๋ฆฌ์ ์ผ๋ถ๋ฅผ ๊ฒฉ๋ฆฌํ์ฌ ํธ๋ฆฌ์ ํ ๋ถ๋ถ์์ ๋ฐ์ํ๋ ๋ณ๊ฒฝ ์ฌํญ์ด ๋ค๋ฅธ ๋ถ๋ถ์ ์ํฅ์ ๋ฏธ์น์ง ์๋๋ก ํ ์ ์์ต๋๋ค. ์ด๋ ๋ฆฌํ๋ก์ฐ ๋ฐ ๋ฆฌํ์ธํธ์ ๋ฒ์๋ฅผ ์ค์ฌ ๋ ๋๋ง ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์์:
.container {
contain: layout paint;
}
์ด๋ ๋ธ๋ผ์ฐ์ ์๊ฒ `.container` ์์ ๋ด์ ๋ณ๊ฒฝ ์ฌํญ์ด ์ปจํ ์ด๋ ์ธ๋ถ ์์์ ๋ ์ด์์์ด๋ ํ์ธํ ์ ์ํฅ์ ๋ฏธ์น์ง ์์์ผ ํจ์ ์๋ ค์ค๋๋ค.
4. ๊ฐ์ํ (Windowing)
๊ฐ์ํ๋ windowing์ด๋ผ๊ณ ๋ ํ๋ฉฐ, ํฐ ๋ชฉ๋ก์ด๋ ๊ทธ๋ฆฌ๋์์ ๋ณด์ด๋ ๋ถ๋ถ๋ง ๋ ๋๋งํ๋ ๊ธฐ์ ์ ๋๋ค. ์ด๋ ์์ฒ ๋๋ ์๋ฐฑ๋ง ๊ฐ์ ํญ๋ชฉ์ ํฌํจํ๋ ๋ฐ์ดํฐ ์ธํธ๋ฅผ ์ฒ๋ฆฌํ ๋ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. `react-window` ๋ฐ `react-virtualized`์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๊ฐ์ํ ํ๋ก์ธ์ค๋ฅผ ๋จ์ํํ๋ ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ณตํฉ๋๋ค.
์์ (React):
import { FixedSizeList } from 'react-window';
const Row = ({ index, style }) => (
Row {index}
);
const ListComponent = () => (
{Row}
);
5. ํ๋์จ์ด ๊ฐ์
๋ธ๋ผ์ฐ์ ๋ GPU(๊ทธ๋ํฝ ์ฒ๋ฆฌ ์ฅ์น)๋ฅผ ํ์ฉํ์ฌ CSS ํธ๋์คํผ ๋ฐ ์ ๋๋ฉ์ด์ ๊ณผ ๊ฐ์ ํน์ ๋ ๋๋ง ์์ ์ ๊ฐ์ํํ ์ ์์ต๋๋ค. ํ๋์จ์ด ๊ฐ์์ ํธ๋ฆฌ๊ฑฐํ๋ ค๋ฉด `transform: translateZ(0)` ๋๋ `backface-visibility: hidden` CSS ์์ฑ์ ์ฌ์ฉํ์ญ์์ค. ๊ทธ๋ฌ๋ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ์ผ๋ถ ์ฅ์น์์ ์ฑ๋ฅ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ผ๋ฏ๋ก ์ ์คํ๊ฒ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
์ด๋ฏธ์ง ์ต์ ํ
์ด๋ฏธ์ง๋ ์ข ์ข ํ์ด์ง ๋ก๋ ์๊ฐ์ ํฌ๊ฒ ๊ธฐ์ฌํฉ๋๋ค. ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ๋ ค๋ฉด ๋ค์์ ์ํํ์ญ์์ค:
- ์ฌ๋ฐ๋ฅธ ํ์ ์ ํ: JPEG ๋ฐ PNG์ ๋นํด ์ฐ์ํ ์์ถ ๋ฐ ํ์ง์ ์ํด WebP๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ์ด๋ฏธ์ง ์์ถ: ImageOptim ๋๋ TinyPNG์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ํ์ง ์์ค ์์ด ์ด๋ฏธ์ง ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค.
- ์ด๋ฏธ์ง ํฌ๊ธฐ ์กฐ์ : ๋์คํ๋ ์ด์ ์ ํฉํ ํฌ๊ธฐ๋ก ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ๋ฐ์ํ ์ด๋ฏธ์ง ์ฌ์ฉ: `srcset` ์์ฑ์ ์ฌ์ฉํ์ฌ ์ฅ์น์ ํ๋ฉด ํฌ๊ธฐ ๋ฐ ํด์๋์ ๋ฐ๋ผ ๋ค๋ฅธ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ์ด๋ฏธ์ง ์ง์ฐ ๋ก๋ฉ(Lazy loading): ๋ทฐํฌํธ์์ ์ด๋ฏธ์ง๊ฐ ๊ฑฐ์ ๋ณด์ผ ๋๋ง ๋ก๋ํฉ๋๋ค.
๊ธ๊ผด ์ต์ ํ
์น ๊ธ๊ผด ๋ํ ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ๊ธ๊ผด์ ์ต์ ํํ๋ ค๋ฉด ๋ค์์ ์ํํ์ญ์์ค:
- WOFF2 ํ์ ์ฌ์ฉ: WOFF2๋ ์ต๊ณ ์ ์์ถ๋ฅ ์ ์ ๊ณตํฉ๋๋ค.
- ๊ธ๊ผด ์๋ธ์ธํ : ์น์ฌ์ดํธ์์ ์ค์ ๋ก ์ฌ์ฉ๋๋ ๋ฌธ์๋ง ํฌํจํฉ๋๋ค.
- `font-display` ์ฌ์ฉ: ๊ธ๊ผด ๋ก๋ฉ ์ค ๊ธ๊ผด์ด ๋ ๋๋ง๋๋ ๋ฐฉ์์ ์ ์ดํฉ๋๋ค. `font-display: swap`์ ๊ธ๊ผด ๋ก๋ฉ ์ค ํ ์คํธ๊ฐ ๋ณด์ด์ง ์๋ ๊ฒ์ ๋ฐฉ์งํ๊ธฐ ์ํ ์ข์ ์ต์ ์ ๋๋ค.
๋ชจ๋ํฐ๋ง ๋ฐ ์ง์์ ์ธ ๊ฐ์
๋์ ์ต์ ํ๋ ์ง์์ ์ธ ํ๋ก์ธ์ค์ ๋๋ค. ๋ค์๊ณผ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ฐํธ์๋ ์ฑ๋ฅ์ ์ง์์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ์ญ์์ค:
- Google PageSpeed Insights: ํ์ด์ง ์๋ ํฅ์์ ์ํ ๊ถ์ฅ ์ฌํญ์ ์ ๊ณตํ๊ณ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํฉ๋๋ค.
- WebPageTest: ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋ถ์ํ๊ณ ๊ฐ์ ์์ญ์ ์๋ณํ๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค.
- ์ค์ฌ์ฉ์ ๋ชจ๋ํฐ๋ง(RUM): ์ค์ ์ฌ์ฉ์๋ก๋ถํฐ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์์งํ์ฌ ์น์ฌ์ดํธ๊ฐ ์ค์ ํ๊ฒฝ์์ ์ด๋ป๊ฒ ์๋ํ๋์ง์ ๋ํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํฉ๋๋ค.
ํ๋ฐํธ์๋ ์ฑ๋ฅ์ ์ ๊ธฐ์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ๊ณ ์ด ๊ฐ์ด๋์ ์ค๋ช ๋ ์ต์ ํ ๊ธฐ์ ์ ์ ์ฉํจ์ผ๋ก์จ ์ฌ์ฉ์์๊ฒ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋๋ฉฐ ์ฆ๊ฑฐ์ด ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
๊ตญ์ ํ(Internationalization) ๊ณ ๋ ค ์ฌํญ
๊ธ๋ก๋ฒ ๊ณ ๊ฐ์ ์ํด ์ต์ ํํ ๋, ๋ค์ ๊ตญ์ ํ(i18n) ์ธก๋ฉด์ ๊ณ ๋ คํ์ญ์์ค:
- ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN): ์ง๋ฆฌ์ ์ผ๋ก ๋ถ์ฐ๋ ์๋ฒ๋ฅผ ๊ฐ์ง CDN์ ์ฌ์ฉํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์์ ์ง์ฐ ์๊ฐ์ ์ค์ ๋๋ค. CDN์ด ์ง์ญํ๋ ์ฝํ ์ธ ์ ๊ณต์ ์ง์ํ๋์ง ํ์ธํ์ญ์์ค.
- ์ง์ญํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ: ์ฑ๋ฅ์ ์ต์ ํ๋ i18n ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ญ์์ค. ์ผ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์๋นํ ์ค๋ฒํค๋๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค. ํ๋ก์ ํธ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ํ๋ช ํ๊ฒ ์ ํํ์ญ์์ค.
- ๊ธ๊ผด ๋ ๋๋ง: ์ ํํ ๊ธ๊ผด์ด ์ฌ์ดํธ์์ ์ง์ํ๋ ์ธ์ด์ ํ์ํ ๋ฌธ์ ์งํฉ์ ์ง์ํ๋์ง ํ์ธํ์ญ์์ค. ํฌ๊ณ ํฌ๊ด์ ์ธ ๊ธ๊ผด์ ๋ ๋๋ง ์๋๋ฅผ ๋ฆ์ถ ์ ์์ต๋๋ค.
- ์ด๋ฏธ์ง ์ต์ ํ: ์ด๋ฏธ์ง ์ ํธ๋์์ ๋ฌธํ์ ์ฐจ์ด๋ฅผ ๊ณ ๋ คํ์ญ์์ค. ์๋ฅผ ๋ค์ด, ์ผ๋ถ ๋ฌธํ๊ถ์ ๋ ๋ฐ๊ฑฐ๋ ์ฑ๋๊ฐ ๋์ ์ด๋ฏธ์ง๋ฅผ ์ ํธํฉ๋๋ค. ์ด์ ๋ฐ๋ผ ์ด๋ฏธ์ง ์์ถ ๋ฐ ํ์ง ์ค์ ์ ์กฐ์ ํ์ญ์์ค.
- ์ง์ฐ ๋ก๋ฉ: ์ง์ฐ ๋ก๋ฉ์ ์ ๋ต์ ์ผ๋ก ๊ตฌํํ์ญ์์ค. ์ธํฐ๋ท ์ฐ๊ฒฐ ์๋๊ฐ ๋๋ฆฐ ์ง์ญ์ ์ฌ์ฉ์๋ ์ ๊ทน์ ์ธ ์ง์ฐ ๋ก๋ฉ์ผ๋ก๋ถํฐ ๋ ๋ง์ ์ด์ ์ ์ป์ ๊ฒ์ ๋๋ค.
์ ๊ทผ์ฑ ๊ณ ๋ ค ์ฌํญ
์ฑ๋ฅ ์ต์ ํ ์ค์๋ ์ ๊ทผ์ฑ์ ์ ์งํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค:
- ์๋งจํฑ HTML: ์๋งจํฑ HTML ์์(์: `
`, ` - ARIA ์์ฑ: ARIA ์์ฑ์ ์ฌ์ฉํ์ฌ ๋ณด์กฐ ๊ธฐ์ ์ ์ถ๊ฐ ์ ๋ณด๋ฅผ ์ ๊ณตํ์ญ์์ค. ARIA ์์ฑ์ด ์ฌ๋ฐ๋ฅด๊ฒ ์ฌ์ฉ๋๊ณ ์ฑ๋ฅ์ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ฏธ์น์ง ์๋์ง ํ์ธํ์ญ์์ค.
- ์ด์ ๊ด๋ฆฌ: ํค๋ณด๋ ์ฌ์ฉ์๋ฅผ ์ํด ์ด์ ์ด ์ ์ ํ๊ฒ ๊ด๋ฆฌ๋๋์ง ํ์ธํ์ญ์์ค. ํผ๋์ ์ฃผ๊ฑฐ๋ ํผ๋์ค๋ฝ๊ฒ ํ ์ ์๋ ๋ฐฉ์์ผ๋ก JavaScript๋ฅผ ์ฌ์ฉํ์ฌ ์ด์ ์ ์กฐ์ํ๋ ๊ฒ์ ํผํ์ญ์์ค.
- ํ ์คํธ ๋์ฒด: ๋ชจ๋ ์ด๋ฏธ์ง ๋ฐ ๊ธฐํ ๋นํ ์คํธ ์ฝํ ์ธ ์ ๋ํ ํ ์คํธ ๋์์ ์ ๊ณตํ์ญ์์ค. ํ ์คํธ ๋์์ ์ ๊ทผ์ฑ์ ํ์์ ์ด๋ฉฐ SEO๋ ํฅ์์ํต๋๋ค.
- ์์ ๋๋น: ํ ์คํธ์ ๋ฐฐ๊ฒฝ์ ์ฌ์ด์ ์ถฉ๋ถํ ์์ ๋๋น๊ฐ ์๋์ง ํ์ธํ์ญ์์ค. ์ด๋ ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์๊ฒ ํ์์ ์ ๋๋ค.
๊ฒฐ๋ก
ํ๋ฐํธ์๋ ๋์ ์ต์ ํ๋ ๋ธ๋ผ์ฐ์ ๋ด๋ถ, JavaScript ์คํ ๋ฐ ๋ ๋๋ง ๊ธฐ์ ์ ๋ํ ๊น์ ์ดํด๋ฅผ ์๊ตฌํ๋ ๋ค๊ฐ์ ์ธ ๋ถ์ผ์ ๋๋ค. ์ด ๊ฐ์ด๋์ ์ค๋ช ๋ ์ ๋ต์ ์ฑํํจ์ผ๋ก์จ ํ๋ฐํธ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐํ์ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์์ผ ๊ธ๋ก๋ฒ ์ฌ์ฉ์์๊ฒ ์ฐ์ํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค. ์ต์ ํ๋ ๋ฐ๋ณต์ ์ธ ํ๋ก์ธ์ค์์ ๊ธฐ์ตํ์ญ์์ค. ์ฑ๋ฅ์ ์ง์์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ๊ณ ๋ณ๋ชฉ ํ์์ ์๋ณํ๋ฉฐ ์ฝ๋๋ฅผ ๊ฐ์ ํ์ฌ ์ต์ ์ ๊ฒฐ๊ณผ๋ฅผ ์ป์ผ์ญ์์ค.