μ΅κ³ μ μ±λ₯μ μν CSS μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ΅μ ν μ¬μΈ΅ λΆμ. λ λλ§ λΉμ©μ μ΅μννκ³ , νλ μλ₯ μ κ°μ νλ©°, λΆλλ½κ³ λ§€λ ₯μ μΈ μ¬μ©μ κ²½νμ λ§λλ κΈ°μ μ λ°°μ보μΈμ.
CSS μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ±λ₯: μ λλ©μ΄μ λ λλ§ μ΅μ ν λ§μ€ν°νκΈ°
μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ μΉ μνΈμμ©μ νμ μ κ°μ Έμ€λ©°, κ°λ°μλ€μ΄ λ§€λ ₯μ μ΄κ³ ν₯λ―Έλ‘μ΄ μ¬μ©μ κ²½νμ λ§λ€ μ μκ² ν΄μ€λλ€. μ λλ©μ΄μ μ μ¬μ©μμ μ€ν¬λ‘€ λμμ μ§μ μ°κ²°ν¨μΌλ‘μ¨ μΉμ¬μ΄νΈλ λ λ°μμ μ΄κ³ μ§κ΄μ μΌλ‘ λκ»΄μ§ μ μμ΅λλ€. νμ§λ§, μλͺ» ꡬνλ μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ λΉ λ₯΄κ² μ±λ₯ λ³λͺ© νμμ μΌμΌμΌ μ λλ©μ΄μ μ΄ λκΈ°κ³ μ€λ§μ€λ¬μ΄ μ¬μ©μ κ²½νμ μ΄λν μ μμ΅λλ€. μ΄ κΈμμλ μ¬μ©μμ κΈ°κΈ°λ μμΉμ κ΄κ³μμ΄ λΆλλ½κ³ μ±λ₯μ΄ λ°μ΄λ μνΈμμ©μ 보μ₯νκΈ° μν CSS μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ΅μ ν κΈ°μ λ€μ μ΄ν΄λ΄ λλ€.
λ λλ§ νμ΄νλΌμΈ μ΄ν΄νκΈ°
νΉμ μ΅μ ν κΈ°μ μ μ΄ν΄λ³΄κΈ° μ μ λΈλΌμ°μ μ λ λλ§ νμ΄νλΌμΈμ μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. μ΄ νμ΄νλΌμΈμ λΈλΌμ°μ κ° HTML, CSS, JavaScriptλ₯Ό νλ©΄μ ν½μ λ‘ λ³ννλ λ¨κ³λ₯Ό μ€λͺ ν©λλ€. μ£Όμ λ¨κ³λ λ€μκ³Ό κ°μ΅λλ€:
- JavaScript: μλ°μ€ν¬λ¦½νΈ λ‘μ§μ΄ DOMκ³Ό CSS μ€νμΌμ μμ ν©λλ€.
- Style: λΈλΌμ°μ κ° CSS κ·μΉμ λ°λΌ κ° μμμ μ΅μ’ μ€νμΌμ κ³μ°ν©λλ€.
- Layout: λΈλΌμ°μ κ° λ¬Έμ λ΄ κ° μμμ μμΉμ ν¬κΈ°λ₯Ό κ²°μ ν©λλ€. μ΄λ₯Ό 리νλ‘μ°(reflow)λΌκ³ λ ν©λλ€.
- Paint: λΈλΌμ°μ κ° μμλ₯Ό λ μ΄μ΄μ 그립λλ€.
- Composite: λΈλΌμ°μ κ° λ μ΄μ΄λ€μ κ²°ν©νμ¬ μ΅μ’ μ΄λ―Έμ§λ₯Ό μμ±ν©λλ€.
κ° λ¨κ³λ μ μ¬μ μΈ λ³λͺ© μ§μ μ΄ λ μ μμ΅λλ€. μ λλ©μ΄μ μ μ΅μ ννλ κ²μ κ° λ¨κ³, νΉν κ°μ₯ λΉμ©μ΄ λ§μ΄ λλ Layoutκ³Ό Paint λ¨κ³μ λΉμ©μ μ΅μννλ κ²μ ν¬ν¨ν©λλ€.
will-changeμ ν
will-change CSS μμ±μ λΈλΌμ°μ μκ² μμμ μμ±μ΄ μμΌλ‘ λ³κ²½λ κ²μμ μλ €μ£Όλ κ°λ ₯ν λꡬμ
λλ€. μ΄λ₯Ό ν΅ν΄ λΈλΌμ°μ λ λ©λͺ¨λ¦¬ ν λΉ λ° ν©μ± λ μ΄μ΄ μμ±κ³Ό κ°μ μ΅μ νλ₯Ό 미리 μνν μ μμ΅λλ€.
μμ :
.animated-element {
will-change: transform, opacity;
}
μ΄ μμ μμ μ°λ¦¬λ λΈλΌμ°μ μκ² .animated-elementμ transformκ³Ό opacity μμ±μ΄ λ³κ²½λ κ²μ΄λΌκ³ μλ¦¬κ³ μμ΅λλ€. κ·Έλ¬λ©΄ λΈλΌμ°μ λ μ΄λ¬ν λ³κ²½μ λλΉνμ¬ μ±λ₯μ μ μ¬μ μΌλ‘ ν₯μμν¬ μ μμ΅λλ€. νμ§λ§ will-changeλ₯Ό κ³Όλνκ² μ¬μ©νλ©΄ κ³Όλν λ©λͺ¨λ¦¬λ₯Ό μλͺ¨νμ¬ μ±λ₯μ λΆμ μ μΈ μν₯μ λ―ΈμΉ μ μμ΅λλ€. μ λλ©μ΄μ
μ΄ νλ°νκ² μ μ©λλ μμμλ§ μ μ€νκ² μ¬μ©νμΈμ.
transformκ³Ό opacity νμ©νκΈ°
μμ±μ μ λλ©μ΄μ
μ μ μ©ν λ, transformκ³Ό opacityλ₯Ό μ°μ μ μΌλ‘ μ¬μ©νμΈμ. μ΄ μμ±λ€μ layoutμ΄λ paintλ₯Ό μ λ°νμ§ μκ³ μ λλ©μ΄μ
μ μ μ©ν μ μμ΄ width, height, top, leftμ κ°μ λ€λ₯Έ μμ±λ€λ³΄λ€ ν¨μ¬ μ±λ₯μ΄ λ°μ΄λ©λλ€.
μμ (μ’μ):
.animated-element {
transform: translateX(100px);
opacity: 0.5;
}
μμ (λμ¨):
.animated-element {
left: 100px;
width: 200px;
}
첫 λ²μ§Έ μμ λ ν©μ±(compositing)λ§ νμν transformκ³Ό opacityλ₯Ό μ¬μ©ν©λλ€. λ λ²μ§Έ μμ λ layoutκ³Ό paintλ₯Ό μ λ°νλ leftμ widthλ₯Ό μ¬μ©νμ¬ μ±λ₯μ΄ ν¨μ¬ μ νλ©λλ€. leftλ top λμ transform: translate()λ₯Ό μ¬μ©νλ κ²μ΄ μ€μν μ΅μ νμ
λλ€.
μ€ν¬λ‘€ μ΄λ²€νΈ λλ°μ΄μ±κ³Ό μ€λ‘νλ§
μ€ν¬λ‘€ μ΄λ²€νΈλ λΉ λ₯΄κ² λ°μνμ¬ νμ μ΄μμΌλ‘ μμ£Ό μ λλ©μ΄μ μ μ λ°ν μ μμ΅λλ€. μ΄λ λΈλΌμ°μ μ κ³ΌλΆνλ₯Ό μ£Όκ³ μ±λ₯ λ¬Έμ λ₯Ό μΌμΌν¬ μ μμ΅λλ€. λλ°μ΄μ±(Debouncing)κ³Ό μ€λ‘νλ§(Throttling)μ μ€ν¬λ‘€ μ΄λ²€νΈμ λν ν¨μ μ€ν λΉλλ₯Ό μ ννλ κΈ°μ μ λλ€.
λλ°μ΄μ±: ν¨μκ° λ§μ§λ§μΌλ‘ νΈμΆλ ν μΌμ μκ°μ΄ μ§λ νμμΌ ν¨μ μ€νμ μ§μ°μν΅λλ€.
μ€λ‘νλ§: μ΄λ²€νΈκ° μΌλ§λ μμ£Ό λ°μνλ μκ΄μμ΄ μΌμ ν κ°κ²©μΌλ‘ ν¨μλ₯Ό μ€νν©λλ€.
λ€μμ JavaScriptμ κ°λ¨ν μ€λ‘νλ§ ν¨μ μμ μ λλ€:
function throttle(func, delay) {
let timeoutId;
let lastExecTime = 0;
return function(...args) {
const currentTime = new Date().getTime();
if (!timeoutId) {
// If no timeout is active, schedule the function
if (currentTime - lastExecTime >= delay) {
func.apply(this, args);
lastExecTime = currentTime;
} else {
// If less time than delay has passed, schedule for the end of the period
timeoutId = setTimeout(() => {
func.apply(this, args);
lastExecTime = new Date().getTime();
timeoutId = null; // Clear timeout after execution
}, delay - (currentTime - lastExecTime));
}
}
};
}
const handleScroll = () => {
// Your animation logic here
console.log("Scroll event");
};
const throttledScrollHandler = throttle(handleScroll, 100); // Throttle to 100ms
window.addEventListener('scroll', throttledScrollHandler);
μ΄ μ½λ μ€λν«μ μ€ν¬λ‘€ νΈλ€λ¬ ν¨μλ₯Ό μ€λ‘νλ§νμ¬ μ΅λ 100λ°λ¦¬μ΄λ§λ€ ν λ²λ§ μ€νλλλ‘ νλ λ°©λ²μ 보μ¬μ€λλ€. λλ°μ΄μ±λ λΉμ·ν μ리λ₯Ό λ°λ₯΄μ§λ§, μ΄λ²€νΈ λ°μμ΄ μ§μ λ μκ° λμ λ©μΆ νμ μ€νμ μ§μ°μν¨λ€λ μ°¨μ΄κ° μμ΅λλ€.
Intersection Observer API μ¬μ©νκΈ°
Intersection Observer APIλ μμκ° λ·°ν¬νΈμ λ€μ΄μ€κ±°λ λκ°λ κ²μ κ°μ§νλ λ ν¨μ¨μ μΈ λ°©λ²μ μ 곡ν©λλ€. μ€ν¬λ‘€ μ΄λ²€νΈλ₯Ό κ³μ μμ νκ³ κ³μ°μ μνν νμκ° μμ΄, μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ νΈλ¦¬κ±°νλ λ° μ΄μμ μ λλ€.
μμ :
const element = document.querySelector('.animated-element');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Element is in the viewport
entry.target.classList.add('animate');
} else {
// Element is out of the viewport
entry.target.classList.remove('animate');
}
});
});
observer.observe(element);
μ΄ μ½λ μ€λν«μ .animated-elementμ κ°μμ±μ λͺ¨λν°λ§νλ Intersection Observerλ₯Ό μμ±ν©λλ€. μμκ° λ·°ν¬νΈμ λ€μ΄μ€λ©΄ animate ν΄λμ€κ° μΆκ°λμ΄ μ λλ©μ΄μ
μ΄ μμλ©λλ€. μμκ° λ·°ν¬νΈλ₯Ό λ²μ΄λλ©΄ ν΄λμ€κ° μ κ±°λ©λλ€. μ΄ μ κ·Ό λ°©μμ μ€ν¬λ‘€ μ΄λ²€νΈ νΈλ€λ¬ λ΄μμ μμμ μμΉλ₯Ό κ³μ νμΈνλ κ²λ³΄λ€ μ±λ₯μ΄ λ μ’μ΅λλ€.
μ΄λ―Έμ§ λ° κΈ°ν μμ° μ΅μ ν
ν° μ΄λ―Έμ§μ κΈ°ν μμ°μ μ λλ©μ΄μ μ±λ₯μ μλΉν μν₯μ λ―ΈμΉ μ μμ΅λλ€. μ μ ν νμΌ νμ(μ: WebP, JPEG)κ³Ό μμΆ μμ€μ μ¬μ©νμ¬ μ΄λ―Έμ§κ° μΉμ μ΅μ νλμλμ§ νμΈνμΈμ. μ§μ° λ‘λ©(lazy loading)μ μ¬μ©νμ¬ μ΄λ―Έμ§κ° λ·°ν¬νΈμ λ³΄μΌ λλ§ λ‘λνλ κ²μ κ³ λ €νμΈμ.
μμ (μ§μ° λ‘λ©):
loading="lazy" μμ±μ λΈλΌμ°μ μκ² μ΄λ―Έμ§κ° λ·°ν¬νΈμ κ°κΉμμ§ λκΉμ§ λ‘λλ₯Ό μ§μ°νλλ‘ μ§μν©λλ€.
DOM 볡μ‘μ± μ€μ΄κΈ°
볡μ‘ν DOMμ λ λλ§ νμ΄νλΌμΈ, νΉν layout λ¨κ³λ₯Ό λλ¦¬κ² ν μ μμ΅λλ€. λΆνμν μμλ₯Ό μ κ±°νκ³ HTML ꡬ쑰λ₯Ό λ¨μννμ¬ DOM 볡μ‘μ±μ μ€μ΄μΈμ. κ°μ DOMκ³Ό κ°μ κΈ°μ μ μ¬μ©νμ¬ DOM μ‘°μμ μν₯μ μ΅μννλ κ²μ κ³ λ €νμΈμ.
νλμ¨μ΄ κ°μ
νλμ¨μ΄ κ°μμ λΈλΌμ°μ κ° λ λλ§ μμ
μ GPUμ μ€νλ‘λν μ μκ² ν΄μ£Όλ©°, GPUλ μ λλ©μ΄μ
κ³Ό μκ° ν¨κ³Όλ₯Ό μ²λ¦¬νλ λ° ν¨μ¬ λ ν¨μ¨μ μ
λλ€. transformμ΄λ opacityμ κ°μ μμ±μ μΌλ°μ μΌλ‘ κΈ°λ³Έμ μΌλ‘ νλμ¨μ΄ κ°μμ΄ μ μ©λ©λλ€. will-changeλ₯Ό μ¬μ©νλ κ²λ λΈλΌμ°μ κ° νλμ¨μ΄ κ°μμ μ¬μ©νλλ‘ μ λν μ μμ΅λλ€.
νλ‘νμΌλ§ λ° λλ²κΉ
νλ‘νμΌλ§ λꡬλ μ λλ©μ΄μ μ μ±λ₯ λ³λͺ© νμμ μλ³νλ λ° νμμ μ λλ€. Chrome DevToolsμ Firefox Developer Toolsλ λ λλ§ νμ΄νλΌμΈμ λΆμνκ³ μ΅μ νν μμμ μλ³ν μ μλ κ°λ ₯ν νλ‘νμΌλ§ κΈ°λ₯μ μ 곡ν©λλ€.
μ£Όμ νλ‘νμΌλ§ μ§ν:
- νλ μλ₯ (FPS): λΆλλ¬μ΄ μ λλ©μ΄μ μ μν΄ μΌκ΄λ 60 FPSλ₯Ό λͺ©νλ‘ νμΈμ.
- CPU μ¬μ©λ: λμ CPU μ¬μ©λμ μ±λ₯ λ³λͺ© νμμ λνλΌ μ μμ΅λλ€.
- λ©λͺ¨λ¦¬ μ¬μ©λ: κ³Όλν λ©λͺ¨λ¦¬ μ¬μ©μ μ±λ₯ λ¬Έμ λ₯Ό μΌμΌν¬ μ μμ΅λλ€.
- λ λλ§ μκ°: λ λλ§ νμ΄νλΌμΈμ κ° λ¨κ³μμ μμλλ μκ°μ λΆμνμΈμ.
μ΄λ¬ν μ§νλ₯Ό λΆμν¨μΌλ‘μ¨ μ λλ©μ΄μ μμ μ±λ₯ λ¬Έμ λ₯Ό μΌμΌν€λ νΉμ μμμ μ νν μ°Ύμλ΄κ³ λͺ©νμ λ§λ μ΅μ νλ₯Ό ꡬνν μ μμ΅λλ€.
μ¬λ°λ₯Έ μ λλ©μ΄μ κΈ°λ² μ ννκΈ°
CSSμμ μ λλ©μ΄μ μ λ§λλ λ°©λ²μλ μ¬λ¬ κ°μ§κ° μμ΅λλ€:
- CSS νΈλμ§μ : μμ±μ΄ λ³κ²½λ λ λ°μνλ κ°λ¨ν μ λλ©μ΄μ μ λλ€.
- CSS ν€νλ μ μ λλ©μ΄μ : ν€νλ μ μνμ€λ₯Ό μ μνλ λ 볡μ‘ν μ λλ©μ΄μ μ λλ€.
- μλ°μ€ν¬λ¦½νΈ μ λλ©μ΄μ : μλ°μ€ν¬λ¦½νΈ μ½λλ‘ μ μ΄λλ μ λλ©μ΄μ μ λλ€.
μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ κ²½μ°, CSS ν€νλ μ μ λλ©μ΄μ μ΄ κ°μ₯ ν¨μ¨μ μΈ μ νμΈ κ²½μ°κ° λ§μ΅λλ€. μ λλ©μ΄μ μνμ€λ₯Ό μ μΈμ μΌλ‘ μ μν μ μκ² ν΄μ£Όμ΄ λΈλΌμ°μ κ° μ΅μ νν μ μμ΅λλ€. μλ°μ€ν¬λ¦½νΈ μ λλ©μ΄μ μ λ λ§μ μ μ°μ±μ μ 곡ν μ μμ§λ§, μ μ€νκ² κ΅¬ννμ§ μμΌλ©΄ μ±λ₯μ΄ μ νλ μ μμ΅λλ€.
μμ (CSS ν€νλ μ μ λλ©μ΄μ ):
@keyframes slide-in {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.animated-element {
animation: slide-in 1s ease-out forwards;
}
λ·°ν¬νΈ λ©ν νκ·Έ μ΅μ ν
μ μ ν λ·°ν¬νΈ μ€μ μ λ°μν λμμΈκ³Ό μ΅μ μ μ±λ₯μ λ§€μ° μ€μν©λλ€. λ·°ν¬νΈ λ©ν νκ·Έλ νμ΄μ§κ° λ€λ₯Έ κΈ°κΈ°μμ μ΄λ»κ² μ€μΌμΌλ§λ μ§λ₯Ό μ μ΄ν©λλ€. μ¬λ°λ₯΄κ² ꡬμ±λ λ·°ν¬νΈ λ©ν νκ·Έλ νμ΄μ§κ° μ¬λ°λ₯Έ μ€μΌμΌλ‘ λ λλ§λλλ‘ λ³΄μ₯νμ¬ λΆνμν νλλ₯Ό λ°©μ§νκ³ μ±λ₯μ ν₯μμν΅λλ€.
μμ :
μ΄ λ©ν νκ·Έλ λ·°ν¬νΈ λλΉλ₯Ό κΈ°κΈ° λλΉλ‘ μ€μ νκ³ μ΄κΈ° μ€μΌμΌμ 1.0μΌλ‘ μ€μ νμ¬ νμ΄μ§κ° λ€μν νλ©΄ ν¬κΈ°μμ μ¬λ°λ₯΄κ² λ λλ§λλλ‘ ν©λλ€.
μ κ·Όμ± κ³ λ €μ¬ν
λ§€λ ₯μ μΈ μ λλ©μ΄μ
μ λ§λ€ λ μ κ·Όμ±μ κ³ λ €νλ κ²μ΄ μ€μν©λλ€. μΌλΆ μ¬μ©μλ μ λλ©μ΄μ
μ λ―Όκ°νκ±°λ μ λλ©μ΄μ
μ½ν
μΈ μ μνΈμμ©νκΈ° μ΄λ €μ΄ μ₯μ λ₯Ό κ°μ§κ³ μμ μ μμ΅λλ€. μ λλ©μ΄μ
μ λΉνμ±ννκ±°λ κ°λλ₯Ό μ€μΌ μ μλ μ΅μ
μ μ 곡νμΈμ. μ¬μ©μκ° μμ€ν
μ€μ μμ μμ§μ κ°μλ₯Ό μμ²νλμ§ κ°μ§νλ €λ©΄ prefers-reduced-motion λ―Έλμ΄ μΏΌλ¦¬λ₯Ό μ¬μ©νμΈμ.
μμ :
@media (prefers-reduced-motion: reduce) {
.animated-element {
animation: none;
transition: none;
}
}
μ΄ μ½λ μ€λν«μ μμ§μ κ°μλ₯Ό μμ²ν μ¬μ©μλ₯Ό μν΄ μ λλ©μ΄μ κ³Ό νΈλμ§μ μ λΉνμ±νν©λλ€. μ΄λ₯Ό ν΅ν΄ μ νΈλλ μ₯μ μ κ΄κ³μμ΄ λͺ¨λ μ¬μ©μκ° μΉμ¬μ΄νΈμ μ κ·Όν μ μλλ‘ λ³΄μ₯ν©λλ€.
λ€μν κΈ°κΈ° λ° λΈλΌμ°μ μμ ν μ€νΈνκΈ°
μ λλ©μ΄μ μ±λ₯μ κΈ°κΈ°μ λΈλΌμ°μ μ λ°λΌ ν¬κ² λ€λ₯Ό μ μμ΅λλ€. λͺ¨λ μ¬μ©μμκ² μ’μ μ±λ₯μ 보μ₯νκΈ° μν΄ ν΄λν°, νλΈλ¦Ώ, λ°μ€ν¬ν± μ»΄ν¨ν° λ± λ€μν κΈ°κΈ°μμ μ λλ©μ΄μ μ ν μ€νΈνλ κ²μ΄ μ€μν©λλ€. λΈλΌμ°μ κ°λ°μ λꡬλ₯Ό μ¬μ©νμ¬ μ¬λ¬ λΈλΌμ°μ μμ μ λλ©μ΄μ μ νλ‘νμΌλ§νκ³ λΈλΌμ°μ λ³ μ±λ₯ λ¬Έμ λ₯Ό μλ³νμΈμ. BrowserStack λ° Sauce Labsμ κ°μ ν΄λΌμ°λ κΈ°λ° ν μ€νΈ νλ«νΌμ κ΄λ²μν κΈ°κΈ° λ° λΈλΌμ°μ μμ μΉμ¬μ΄νΈλ₯Ό ν μ€νΈνλ λ° λμμ΄ λ μ μμ΅λλ€.
μ½ν μΈ μ μ‘ λ€νΈμν¬(CDN)
μ½ν μΈ μ μ‘ λ€νΈμν¬(CDN)λ₯Ό μ¬μ©νλ©΄ μ μΈκ³μ μμΉν μλ²μ μ μ μμ°(μ: μ΄λ―Έμ§, CSS, JavaScript)μ μΊμ±νμ¬ μΉμ¬μ΄νΈ μ±λ₯μ ν¬κ² ν₯μμν¬ μ μμ΅λλ€. μ¬μ©μκ° μμ°μ μμ²νλ©΄ CDNμ μ¬μ©μμ μμΉμμ κ°μ₯ κ°κΉμ΄ μλ²μμ μμ°μ μ λ¬νμ¬ μ§μ° μκ°μ μ€μ΄κ³ λ€μ΄λ‘λ μλλ₯Ό ν₯μμν΅λλ€. μ΄λ λ λΉ λ₯Έ νμ΄μ§ λ‘λ μκ°κ³Ό λ λΆλλ¬μ΄ μ λλ©μ΄μ μΌλ‘ μ΄μ΄μ§ μ μμ΅λλ€.
CSS λ° JavaScript μ΅μν
CSS λ° JavaScript νμΌμ μ΅μννλ©΄ μ½λμμ λΆνμν λ¬Έμ(μ: 곡백, μ£Όμ)λ₯Ό μ κ±°νμ¬ νμΌ ν¬κΈ°λ₯Ό μ€μ΄κ³ λ€μ΄λ‘λ μλλ₯Ό ν₯μμν΅λλ€. μ΄λ λ λΉ λ₯Έ νμ΄μ§ λ‘λ μκ°κ³Ό ν₯μλ μ λλ©μ΄μ μ±λ₯μΌλ‘ μ΄μ΄μ§ μ μμ΅λλ€. UglifyJS λ° CSSNanoμ κ°μ λꡬλ₯Ό μ¬μ©νμ¬ CSS λ° JavaScript νμΌμ μ΅μνν μ μμ΅λλ€.
μ½λ λΆν
μ½λ λΆν μ JavaScript μ½λλ₯Ό νμμ λ°λΌ λ‘λν μ μλ λ μμ μ²ν¬λ‘ λλλ κΈ°μ μ λλ€. μ΄λ λ€μ΄λ‘λνκ³ νμ±ν΄μΌ νλ μ½λμ μμ μ€μ¬ μ΄κΈ° νμ΄μ§ λ‘λ μκ°μ κ°μ ν μ μμ΅λλ€. Webpackκ³Ό Parcelμ μ½λ λΆν μ μ§μνλ μΈκΈ° μλ λͺ¨λ λ²λ€λ¬μ λλ€.
μλ² μ¬μ΄λ λ λλ§(SSR)
μλ² μ¬μ΄λ λ λλ§(SSR)μ μΉμ¬μ΄νΈμ μ΄κΈ° HTMLμ λΈλΌμ°μ κ° μλ μλ²μμ λ λλ§νλ κ²μ ν¬ν¨ν©λλ€. μ΄λ μ΄κΈ° νμ΄μ§ λ‘λ μκ°κ³Ό κ²μ μμ§ μ΅μ ν(SEO)λ₯Ό κ°μ ν μ μμ΅λλ€. SSRμ 볡μ‘ν μ λλ©μ΄μ μ΄ μλ μΉμ¬μ΄νΈμ νΉν μ μ©ν μ μλλ°, λΈλΌμ°μ κ° JavaScriptκ° λ‘λλκ³ μ€νλκΈ°λ₯Ό κΈ°λ€λ¦΄ νμ μμ΄ μ¦μ νμ΄μ§ μ½ν μΈ λ λλ§μ μμν μ μκΈ° λλ¬Έμ λλ€.
μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ λ―Έλ
μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ νμ μλ‘μ΄ κΈ°μ κ³Ό κΈ°μ μ΄ λ±μ₯νλ©΄μ λμμμ΄ μ§ννκ³ μμ΅λλ€. CSS μνΉ κ·Έλ£Ήμ μ±λ₯μ΄ λ°μ΄λκ³ μ κ·Όμ±μ΄ μ’μ μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ λ μ½κ² λ§λ€ μ μλ μλ‘μ΄ κΈ°λ₯κ³Ό APIλ₯Ό μ κ·Ήμ μΌλ‘ κ°λ°νκ³ μμ΅λλ€. μ΄λ¬ν λ°μ μ μ£Όλͺ©νκ³ μλ‘μ΄ κΈ°μ μ μ€ννμ¬ μμ λκ°μΈμ.
κ²°λ‘
CSS μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ μ΅μ ννλ €λ©΄ λΈλΌμ°μ μ λ λλ§ νμ΄νλΌμΈμ λν κΉμ μ΄ν΄, μ μ€ν μ λλ©μ΄μ μμ± μ ν, μ±λ₯ μ΅μ ν κΈ°μ μ μ λ΅μ μ¬μ©μ ν¬ν¨νλ λ€κ°μ μΈ μ κ·Ό λ°©μμ΄ νμν©λλ€. μ΄ κΈμμ μ€λͺ ν μ λ΅μ ꡬνν¨μΌλ‘μ¨ κ°λ°μλ μ±λ₯μ ν¬μνμ§ μμΌλ©΄μλ λ§€λ ₯μ μ΄κ³ ν₯λ―Έλ‘μ΄ μ¬μ©μ κ²½νμ λ§λ€ μ μμ΅λλ€. μ κ·Όμ±μ μ°μ μνκ³ , λ€μν κΈ°κΈ°μ λΈλΌμ°μ μμ ν μ€νΈνλ©°, μ±λ₯ λ³λͺ© νμμ μλ³νκ³ ν΄κ²°νκΈ° μν΄ μ§μμ μΌλ‘ μ λλ©μ΄μ μ νλ‘νμΌλ§νλ κ²μ μμ§ λ§μΈμ. μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ νμ λ°μλ€μ΄λ, νμ μ±λ₯κ³Ό μ¬μ©μ κ²½νμ μ΅μ°μ μΌλ‘ μκ°νμΈμ.
μ΄λ¬ν κΈ°μ μ μ΄ν΄ν¨μΌλ‘μ¨ μ μΈκ³ κ°λ°μλ€μ λ λΆλλ½κ³ , λ λ°μμ΄ λΉ λ₯΄λ©°, λ λ§€λ ₯μ μΈ μΉ κ²½νμ λ§λ€ μ μμ΅λλ€. λ€μν νκ²½μμ μΌκ΄λ μ±λ₯μ 보μ₯νκΈ° μν΄ νμ λ€μν κΈ°κΈ°μ λΈλΌμ°μ μμ ꡬνμ ν μ€νΈνλ κ²μ μμ§ λ§μΈμ.