React, Angular, Vue.jsμ κ°μ μλ°μ€ν¬λ¦½νΈ νλ μμν¬μμ μ»΄ν¬λνΈ νΈλ¦¬λ₯Ό μ΅μ ννλ μ’ ν© κ°μ΄λ. μ±λ₯ λ³λͺ© νμ, λ λλ§ μ λ΅, λͺ¨λ² μ¬λ‘λ₯Ό λ€λ£Ήλλ€.
μλ°μ€ν¬λ¦½νΈ νλ μμν¬ μν€ν μ²: μ»΄ν¬λνΈ νΈλ¦¬ μ΅μ ν λ§μ€ν°νκΈ°
νλ μΉ κ°λ° μΈκ³μμ μλ°μ€ν¬λ¦½νΈ νλ μμν¬λ μ΅κ³ μ μ리λ₯Ό μ°¨μ§νκ³ μμ΅λλ€. React, Angular, Vue.jsμ κ°μ νλ μμν¬λ 볡μ‘νκ³ μνΈμμ©μ΄ κ°λ₯ν μ¬μ©μ μΈν°νμ΄μ€λ₯Ό ꡬμΆνκΈ° μν κ°λ ₯ν λꡬλ₯Ό μ 곡ν©λλ€. μ΄λ¬ν νλ μμν¬μ ν΅μ¬μλ UIλ₯Ό λνλ΄λ κ³μΈ΅μ κ΅¬μ‘°μΈ μ»΄ν¬λνΈ νΈλ¦¬λΌλ κ°λ μ΄ μμ΅λλ€. κ·Έλ¬λ μ ν리μΌμ΄μ μ΄ λ³΅μ‘ν΄μ§μλ‘ μ»΄ν¬λνΈ νΈλ¦¬λ μ μ νκ² κ΄λ¦¬λμ§ μμΌλ©΄ μ¬κ°ν μ±λ₯ λ³λͺ© νμμ μ λ°ν μ μμ΅λλ€. μ΄ κΈμμλ μλ°μ€ν¬λ¦½νΈ νλ μμν¬μ μ»΄ν¬λνΈ νΈλ¦¬ μ΅μ νμ λν μ’ ν©μ μΈ κ°μ΄λλ₯Ό μ 곡νλ©°, μ±λ₯ λ³λͺ© νμ, λ λλ§ μ λ΅ λ° λͺ¨λ² μ¬λ‘λ₯Ό λ€λ£Ήλλ€.
μ»΄ν¬λνΈ νΈλ¦¬ μ΄ν΄νκΈ°
μ»΄ν¬λνΈ νΈλ¦¬λ UIμ κ³μΈ΅μ ννμΌλ‘, κ° λ Έλκ° μ»΄ν¬λνΈλ₯Ό λνλ λλ€. μ»΄ν¬λνΈλ λ‘μ§κ³Ό ννμ μΊ‘μννλ μ¬μ¬μ© κ°λ₯ν λΉλ© λΈλ‘μ λλ€. μ»΄ν¬λνΈ νΈλ¦¬μ ꡬ쑰λ νΉν λ λλ§ λ° μ λ°μ΄νΈ μ€μ μ ν리μΌμ΄μ μ μ±λ₯μ μ§μ μ μΈ μν₯μ λ―ΈμΉ©λλ€.
λ λλ§κ³Ό κ°μ DOM
λλΆλΆμ μ΅μ μλ°μ€ν¬λ¦½νΈ νλ μμν¬λ κ°μ DOM(Virtual DOM)μ μ¬μ©ν©λλ€. κ°μ DOMμ μ€μ DOMμ μΈλ©λͺ¨λ¦¬(in-memory) ννμ λλ€. μ ν리μΌμ΄μ μνκ° λ³κ²½λλ©΄ νλ μμν¬λ κ°μ DOMμ μ΄μ λ²μ κ³Ό λΉκ΅νμ¬ μ°¨μ΄μ μ μλ³(diffing)νκ³ , μ€μ DOMμλ νμν μ λ°μ΄νΈλ§ μ μ©ν©λλ€. μ΄ κ³Όμ μ μ¬μ‘°μ (reconciliation)μ΄λΌκ³ ν©λλ€.
κ·Έλ¬λ μ¬μ‘°μ κ³Όμ μ체λ νΉν ν¬κ³ 볡μ‘ν μ»΄ν¬λνΈ νΈλ¦¬μμ κ³μ° λΉμ©μ΄ λ§μ΄ λ€ μ μμ΅λλ€. μ»΄ν¬λνΈ νΈλ¦¬λ₯Ό μ΅μ ννλ κ²μ μ¬μ‘°μ λΉμ©μ μ΅μννκ³ μ λ°μ μΈ μ±λ₯μ ν₯μμν€λ λ° λ§€μ° μ€μν©λλ€.
μ±λ₯ λ³λͺ© νμ μλ³νκΈ°
μ΅μ ν κΈ°μ μ μ΄ν΄λ³΄κΈ° μ μ μ»΄ν¬λνΈ νΈλ¦¬μμ μ μ¬μ μΈ μ±λ₯ λ³λͺ© νμμ μλ³νλ κ²μ΄ μ€μν©λλ€. μ±λ₯ λ¬Έμ μ μΌλ°μ μΈ μμΈμ λ€μκ³Ό κ°μ΅λλ€:
- λΆνμν 리λ λλ§: propsλ stateκ° λ³κ²½λμ§ μμμμλ μ»΄ν¬λνΈκ° λ€μ λ λλ§λλ κ²½μ°.
- κ±°λν μ»΄ν¬λνΈ νΈλ¦¬: κΉκ² μ€μ²©λ μ»΄ν¬λνΈ κ³μΈ΅μ λ λλ§ μλλ₯Ό μ νμν¬ μ μμ΅λλ€.
- λΉμ©μ΄ ν° μ°μ°: λ λλ§ μ€ μ»΄ν¬λνΈ λ΄μμ 볡μ‘ν κ³μ°μ΄λ λ°μ΄ν° λ³νμ΄ μΌμ΄λλ κ²½μ°.
- λΉν¨μ¨μ μΈ μλ£ κ΅¬μ‘°: λΉλ²ν μ‘°νλ μ λ°μ΄νΈμ μ΅μ νλμ§ μμ μλ£ κ΅¬μ‘°λ₯Ό μ¬μ©νλ κ²½μ°.
- μ§μ μ μΈ DOM μ‘°μ: νλ μμν¬μ μ λ°μ΄νΈ λ©μ»€λμ¦μ μμ‘΄νμ§ μκ³ DOMμ μ§μ μ‘°μνλ κ²½μ°.
νλ‘νμΌλ§ λꡬλ μ΄λ¬ν λ³λͺ© νμμ μλ³νλ λ° λμμ΄ λ μ μμ΅λλ€. λνμ μΈ μ΅μ μΌλ‘λ React Profiler, Angular DevTools, Vue.js Devtoolsκ° μμ΅λλ€. μ΄λ¬ν λꡬλ₯Ό μ¬μ©νλ©΄ κ° μ»΄ν¬λνΈλ₯Ό λ λλ§νλ λ° μμλλ μκ°μ μΈ‘μ νκ³ , λΆνμν 리λ λλ§μ μλ³νλ©°, λΉμ©μ΄ ν° μ°μ°μ μ°ΎμλΌ μ μμ΅λλ€.
νλ‘νμΌλ§ μμ (React)
React Profilerλ React μ ν리μΌμ΄μ μ μ±λ₯μ λΆμνκΈ° μν κ°λ ₯ν λꡬμ λλ€. React DevTools λΈλΌμ°μ νμ₯ νλ‘κ·Έλ¨μμ μ κ·Όν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ μ ν리μΌμ΄μ κ³Όμ μνΈμμ©μ κΈ°λ‘νκ³ , ν΄λΉ μνΈμμ© λμ κ° μ»΄ν¬λνΈμ μ±λ₯μ λΆμν μ μμ΅λλ€.
React Profiler μ¬μ© λ°©λ²:
- λΈλΌμ°μ μμ React DevToolsλ₯Ό μ½λλ€.
- "Profiler" νμ μ νν©λλ€.
- "Record" λ²νΌμ ν΄λ¦ν©λλ€.
- μ ν리μΌμ΄μ κ³Ό μνΈμμ©ν©λλ€.
- "Stop" λ²νΌμ ν΄λ¦ν©λλ€.
- κ²°κ³Όλ₯Ό λΆμν©λλ€.
Profilerλ κ° μ»΄ν¬λνΈλ₯Ό λ λλ§νλ λ° μμλ μκ°μ λνλ΄λ νλ μ κ·Έλν(flame graph)λ₯Ό 보μ¬μ€λλ€. λ λλ§νλ λ° μ€λ μκ°μ΄ 걸리λ μ»΄ν¬λνΈκ° μ μ¬μ μΈ λ³λͺ© μ§μ μ λλ€. λν Ranked μ°¨νΈλ₯Ό μ¬μ©νμ¬ λ λλ§μ μμλ μκ° μμΌλ‘ μ λ ¬λ μ»΄ν¬λνΈ λͺ©λ‘μ λ³Ό μ μμ΅λλ€.
μ΅μ ν κΈ°λ²
λ³λͺ© νμμ μλ³νλ€λ©΄, λ€μν μ΅μ ν κΈ°λ²μ μ μ©νμ¬ μ»΄ν¬λνΈ νΈλ¦¬μ μ±λ₯μ ν₯μμν¬ μ μμ΅λλ€.
1. λ©λͺ¨μ΄μ μ΄μ (Memoization)
λ©λͺ¨μ΄μ μ΄μ μ λΉμ©μ΄ ν° ν¨μ νΈμΆμ κ²°κ³Όλ₯Ό μΊμ±νκ³ , λμΌν μ λ ₯μ΄ λ€μ λ°μν λ μΊμλ κ²°κ³Όλ₯Ό λ°ννλ κΈ°λ²μ λλ€. μ»΄ν¬λνΈ νΈλ¦¬ λ§₯λ½μμ λ©λͺ¨μ΄μ μ΄μ μ μ»΄ν¬λνΈμ propsκ° λ³κ²½λμ§ μμλ€λ©΄ 리λ λλ§λλ κ²μ λ°©μ§ν©λλ€.
React.memo
Reactλ ν¨μν μ»΄ν¬λνΈλ₯Ό λ©λͺ¨μ΄μ μ΄μ
νκΈ° μν΄ κ³ μ°¨ μ»΄ν¬λνΈ(higher-order component)μΈ React.memoλ₯Ό μ 곡ν©λλ€. React.memoλ μ»΄ν¬λνΈμ propsλ₯Ό μκ² λΉκ΅(shallowly compare)νμ¬ propsκ° λ³κ²½λ κ²½μ°μλ§ λ¦¬λ λλ§ν©λλ€.
μμ:
import React from 'react';
const MyComponent = React.memo(function MyComponent(props) {
// μ¬κΈ°μ λ λλ§ λ‘μ§ μ²λ¦¬
return {props.data};
});
export default MyComponent;
μμ λΉκ΅λ§μΌλ‘ μΆ©λΆνμ§ μμ κ²½μ°, React.memoμ μ¬μ©μ μ μ λΉκ΅ ν¨μλ₯Ό μ 곡ν μλ μμ΅λλ€.
useMemoμ useCallback
useMemoμ useCallbackμ κ°κ° κ°κ³Ό ν¨μλ₯Ό λ©λͺ¨μ΄μ μ΄μ
νλ λ° μ¬μ©ν μ μλ React ν
(hook)μ
λλ€. μ΄ ν
λ€μ λ©λͺ¨μ΄μ μ΄μ
λ μ»΄ν¬λνΈμ propsλ₯Ό μ λ¬ν λ νΉν μ μ©ν©λλ€.
useMemoλ κ°μ λ©λͺ¨μ΄μ μ΄μ
ν©λλ€:
import React, { useMemo } from 'react';
function MyComponent(props) {
const expensiveValue = useMemo(() => {
// μ¬κΈ°μ λΉμ©μ΄ ν° μ°μ° μν
return computeExpensiveValue(props.data);
}, [props.data]);
return {expensiveValue};
}
useCallbackμ ν¨μλ₯Ό λ©λͺ¨μ΄μ μ΄μ
ν©λλ€:
import React, { useCallback } from 'react';
function MyComponent(props) {
const handleClick = useCallback(() => {
// ν΄λ¦ μ΄λ²€νΈ μ²λ¦¬
props.onClick(props.data);
}, [props.data, props.onClick]);
return ;
}
useCallbackμ΄ μμΌλ©΄ λ§€ λ λλ§λ§λ€ μλ‘μ΄ ν¨μ μΈμ€ν΄μ€κ° μμ±λμ΄, ν¨μμ λ‘μ§μ΄ λμΌνλλΌλ λ©λͺ¨μ΄μ μ΄μ
λ μμ μ»΄ν¬λνΈκ° 리λ λλ§λ μ μμ΅λλ€.
Angular λ³κ²½ κ°μ§ μ λ΅
Angularλ μ»΄ν¬λνΈκ° μ
λ°μ΄νΈλλ λ°©μμ μν₯μ λ―ΈμΉλ λ€μν λ³κ²½ κ°μ§ μ λ΅μ μ 곡ν©λλ€. κΈ°λ³Έ μ λ΅μΈ ChangeDetectionStrategy.Defaultλ λͺ¨λ λ³κ²½ κ°μ§ μ£ΌκΈ°λ§λ€ λͺ¨λ μ»΄ν¬λνΈμ λ³κ²½ μ¬νμ νμΈν©λλ€.
μ±λ₯μ ν₯μμν€κΈ° μν΄ ChangeDetectionStrategy.OnPushλ₯Ό μ¬μ©ν μ μμ΅λλ€. μ΄ μ λ΅μ μ¬μ©νλ©΄ Angularλ λ€μκ³Ό κ°μ κ²½μ°μλ§ μ»΄ν¬λνΈμ λ³κ²½ μ¬νμ νμΈν©λλ€:
- μ»΄ν¬λνΈμ μ λ ₯ νλ‘νΌν°(input property)κ° (μ°Έμ‘°μ μν΄) λ³κ²½λ κ²½μ°.
- μ»΄ν¬λνΈ λλ κ·Έ μμ μ€ νλμμ μ΄λ²€νΈκ° λ°μν κ²½μ°.
- λ³κ²½ κ°μ§κ° λͺ μμ μΌλ‘ νΈλ¦¬κ±°λ κ²½μ°.
ChangeDetectionStrategy.OnPushλ₯Ό μ¬μ©νλ €λ©΄ μ»΄ν¬λνΈ λ°μ½λ μ΄ν°μμ changeDetection μμ±μ μ€μ ν©λλ€:
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponentComponent {
@Input() data: any;
}
Vue.js κ³μ°λ μμ±κ³Ό λ©λͺ¨μ΄μ μ΄μ
Vue.jsλ λ°μν μμ€ν μ νμ©νμ¬ λ°μ΄ν°κ° λ³κ²½λ λ DOMμ μλμΌλ‘ μ λ°μ΄νΈν©λλ€. κ³μ°λ μμ±(Computed properties)μ μλμΌλ‘ λ©λͺ¨μ΄μ μ΄μ λλ©°, κ·Έ μμ‘΄μ±μ΄ λ³κ²½λ λλ§ μ¬νκ°λ©λλ€.
μμ:
{{ computedValue }}
λ 볡μ‘ν λ©λͺ¨μ΄μ μ΄μ μλ리μ€μ κ²½μ°, Vue.jsλ λΉμ©μ΄ ν° κ³μ° κ²°κ³Όλ₯Ό μΊμ±νκ³ νμν λλ§ μ λ°μ΄νΈνλ λ±μ κΈ°μ μ μ¬μ©νμ¬ κ³μ°λ μμ±μ΄ μ¬νκ°λλ μμ μ μλμΌλ‘ μ μ΄ν μ μλλ‘ ν©λλ€.
2. μ½λ λΆν (Code Splitting)κ³Ό μ§μ° λ‘λ©(Lazy Loading)
μ½λ λΆν μ μ ν리μΌμ΄μ μ½λλ₯Ό νμμ λ°λΌ λ‘λν μ μλ λ μμ λ²λ€λ‘ λλλ κ³Όμ μ λλ€. μ΄λ μ ν리μΌμ΄μ μ μ΄κΈ° λ‘λ μκ°μ μ€μ΄κ³ μ¬μ©μ κ²½νμ ν₯μμν΅λλ€.
μ§μ° λ‘λ©μ 리μμ€κ° νμν λλ§ λ‘λνλ κΈ°μ μ λλ€. μ΄λ μ»΄ν¬λνΈ, λͺ¨λ λλ κ°λ³ ν¨μμλ μ μ©λ μ μμ΅λλ€.
React.lazyμ Suspense
Reactλ μ»΄ν¬λνΈλ₯Ό μ§μ° λ‘λ©νκΈ° μν React.lazy ν¨μλ₯Ό μ 곡ν©λλ€. React.lazyλ λμ import()λ₯Ό νΈμΆν΄μΌ νλ ν¨μλ₯Ό μΈμλ‘ λ°μ΅λλ€. μ΄λ React μ»΄ν¬λνΈλ₯Ό ν¬ν¨νλ default exportκ° μλ λͺ¨λλ‘ ν΄μλλ Promiseλ₯Ό λ°νν©λλ€.
κ·Έλ° λ€μ μ§μ° λ‘λ©λλ μ»΄ν¬λνΈ μμ Suspense μ»΄ν¬λνΈλ₯Ό λ λλ§ν΄μΌ ν©λλ€. μ΄λ μ§μ° λ‘λ© μ»΄ν¬λνΈκ° λ‘λλλ λμ νμν λ체 UIλ₯Ό μ§μ ν©λλ€.
μμ:
import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
Loading... Angular μ§μ° λ‘λ© λͺ¨λ
Angularλ λͺ¨λμ μ§μ° λ‘λ©μ μ§μν©λλ€. μ΄λ₯Ό ν΅ν΄ μ ν리μΌμ΄μ μ μΌλΆλ₯Ό νμν λλ§ λ‘λνμ¬ μ΄κΈ° λ‘λ μκ°μ μ€μΌ μ μμ΅λλ€.
λͺ¨λμ μ§μ° λ‘λ©νλ €λ©΄ λΌμ°ν
μ€μ μμ λμ import() λ¬Έμ μ¬μ©νλλ‘ κ΅¬μ±ν΄μΌ ν©λλ€:
const routes: Routes = [
{
path: 'my-module',
loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
}
];
Vue.js λΉλκΈ° μ»΄ν¬λνΈ
Vue.jsλ λΉλκΈ° μ»΄ν¬λνΈλ₯Ό μ§μνμ¬ νμμ λ°λΌ μ»΄ν¬λνΈλ₯Ό λ‘λν μ μμ΅λλ€. Promiseλ₯Ό λ°ννλ ν¨μλ₯Ό μ¬μ©νμ¬ λΉλκΈ° μ»΄ν¬λνΈλ₯Ό μ μν μ μμ΅λλ€:
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// resolve μ½λ°±μ μ»΄ν¬λνΈ μ μλ₯Ό μ λ¬ν©λλ€
resolve({
template: 'I am async!'
})
}, 1000)
})
λλ λμ import() ꡬ문μ μ¬μ©ν μλ μμ΅λλ€:
Vue.component('async-webpack-example', () => import('./my-async-component'))
3. κ°μν(Virtualization)μ μλμ(Windowing)
ν° λͺ©λ‘μ΄λ ν μ΄λΈμ λ λλ§ν λ κ°μν(μλμμ΄λΌκ³ λ ν¨)λ μ±λ₯μ ν¬κ² ν₯μμν¬ μ μμ΅λλ€. κ°μνλ λͺ©λ‘μμ 보μ΄λ νλͺ©λ§ λ λλ§νκ³ μ¬μ©μκ° μ€ν¬λ‘€ν λ λ€μ λ λλ§νλ κ²μ ν¬ν¨ν©λλ€.
μμ² κ°μ νμ ν λ²μ λ λλ§νλ λμ , κ°μν λΌμ΄λΈλ¬λ¦¬λ νμ¬ λ·°ν¬νΈμ 보μ΄λ νλ§ λ λλ§ν©λλ€. μ΄λ μμ± λ° μ λ°μ΄νΈν΄μΌ ν DOM λ Έλμ μλ₯Ό κ·Ήμ μΌλ‘ μ€μ¬ λ λΆλλ¬μ΄ μ€ν¬λ‘€λ§κ³Ό λ λμ μ±λ₯μ μ 곡ν©λλ€.
React κ°μν λΌμ΄λΈλ¬λ¦¬
- react-window: ν° λͺ©λ‘κ³Ό ν μ΄λΈ νμ λ°μ΄ν°λ₯Ό ν¨μ¨μ μΌλ‘ λ λλ§νκΈ° μν μΈκΈ° μλ λΌμ΄λΈλ¬λ¦¬μ λλ€.
- react-virtualized: λ€μν κ°μν μ»΄ν¬λνΈλ₯Ό μ 곡νλ λ λ€λ₯Έ μ μλ €μ§ λΌμ΄λΈλ¬λ¦¬μ λλ€.
Angular κ°μν λΌμ΄λΈλ¬λ¦¬
- @angular/cdk/scrolling: Angularμ Component Dev Kit(CDK)μ κ°μ μ€ν¬λ‘€λ§μ μν μ»΄ν¬λνΈλ₯Ό ν¬ν¨νλ
ScrollingModuleμ μ 곡ν©λλ€.
Vue.js κ°μν λΌμ΄λΈλ¬λ¦¬
- vue-virtual-scroller: ν° λͺ©λ‘μ κ°μ μ€ν¬λ‘€λ§μ μν Vue.js μ»΄ν¬λνΈμ λλ€.
4. μλ£ κ΅¬μ‘° μ΅μ ν
μλ£ κ΅¬μ‘°μ μ νμ μ»΄ν¬λνΈ νΈλ¦¬μ μ±λ₯μ μλΉν μν₯μ λ―ΈμΉ μ μμ΅λλ€. λ°μ΄ν°λ₯Ό μ μ₯νκ³ μ‘°μνλ λ° ν¨μ¨μ μΈ μλ£ κ΅¬μ‘°λ₯Ό μ¬μ©νλ©΄ λ λλ§ μ€ λ°μ΄ν° μ²λ¦¬ μκ°μ μ€μΌ μ μμ΅λλ€.
- Mapκ³Ό Set: μΌλ° μλ°μ€ν¬λ¦½νΈ κ°μ²΄ λμ ν¨μ¨μ μΈ ν€-κ° μ‘°ν λ° λ©€λ²μ νμΈμ μν΄ Mapκ³Ό Setμ μ¬μ©νμΈμ.
- λΆλ³ μλ£ κ΅¬μ‘°: λΆλ³ μλ£ κ΅¬μ‘°λ₯Ό μ¬μ©νλ©΄ μ°λ°μ μΈ λ°μ΄ν° λ³κ²½μ λ°©μ§νκ³ λ³κ²½ κ°μ§λ₯Ό λ¨μνν μ μμ΅λλ€. Immutable.jsμ κ°μ λΌμ΄λΈλ¬λ¦¬λ μλ°μ€ν¬λ¦½νΈλ₯Ό μν λΆλ³ μλ£ κ΅¬μ‘°λ₯Ό μ 곡ν©λλ€.
5. λΆνμν DOM μ‘°μ νΌνκΈ°
DOMμ μ§μ μ‘°μνλ κ²μ λλ¦¬κ³ μ±λ₯ λ¬Έμ λ₯Ό μΌκΈ°ν μ μμ΅λλ€. λμ νλ μμν¬μ μ
λ°μ΄νΈ λ©μ»€λμ¦μ μμ‘΄νμ¬ DOMμ ν¨μ¨μ μΌλ‘ μ
λ°μ΄νΈνμΈμ. document.getElementByIdλ document.querySelectorμ κ°μ λ©μλλ₯Ό μ¬μ©νμ¬ DOM μμλ₯Ό μ§μ μμ νλ κ²μ νΌνμΈμ.
DOMκ³Ό μ§μ μνΈμμ©ν΄μΌ νλ κ²½μ°, DOM μμ νμλ₯Ό μ΅μννκ³ κ°λ₯νλ©΄ ν¨κ» λ¬Άμ΄μ μ²λ¦¬νμΈμ.
6. λλ°μ΄μ±(Debouncing)κ³Ό μ€λ‘νλ§(Throttling)
λλ°μ΄μ±κ³Ό μ€λ‘νλ§μ ν¨μκ° μ€νλλ λΉλλ₯Ό μ ννλ λ° μ¬μ©λλ κΈ°μ μ λλ€. μ΄λ μ€ν¬λ‘€ μ΄λ²€νΈλ 리μ¬μ΄μ¦ μ΄λ²€νΈμ κ°μ΄ μμ£Ό λ°μνλ μ΄λ²€νΈλ₯Ό μ²λ¦¬νλ λ° μ μ©ν μ μμ΅λλ€.
- λλ°μ΄μ±: ν¨μκ° λ§μ§λ§μΌλ‘ νΈμΆλ ν μΌμ μκ°μ΄ μ§λ λκΉμ§ ν¨μ μ€νμ μ§μ°μν΅λλ€.
- μ€λ‘νλ§: μ§μ λ μκ° λμ ν¨μλ₯Ό μ΅λ ν λ²λ§ μ€νν©λλ€.
μ΄λ¬ν κΈ°μ μ λΆνμν 리λ λλ§μ λ°©μ§νκ³ μ ν리μΌμ΄μ μ λ°μμ±μ ν₯μμν¬ μ μμ΅λλ€.
μ»΄ν¬λνΈ νΈλ¦¬ μ΅μ νλ₯Ό μν λͺ¨λ² μ¬λ‘
μμμ μΈκΈν κΈ°μ μΈμλ, μ»΄ν¬λνΈ νΈλ¦¬λ₯Ό ꡬμΆνκ³ μ΅μ νν λ λ°λΌμΌ ν λͺ κ°μ§ λͺ¨λ² μ¬λ‘κ° μμ΅λλ€:
- μ»΄ν¬λνΈλ₯Ό μκ³ μ§μ€μ μΌλ‘ μ μ§νκΈ°: μμ μ»΄ν¬λνΈλ μ΄ν΄νκ³ , ν μ€νΈνκ³ , μ΅μ ννκΈ° λ μ½μ΅λλ€.
- κΉμ μ€μ²© νΌνκΈ°: κΉκ² μ€μ²©λ μ»΄ν¬λνΈ νΈλ¦¬λ κ΄λ¦¬νκΈ° μ΄λ ΅κ³ μ±λ₯ λ¬Έμ λ₯Ό μ λ°ν μ μμ΅λλ€.
- λμ λͺ©λ‘μ key μ¬μ©νκΈ°: λμ λͺ©λ‘μ λ λλ§ν λ κ° νλͺ©μ κ³ μ ν key propμ μ 곡νμ¬ νλ μμν¬κ° λͺ©λ‘μ ν¨μ¨μ μΌλ‘ μ λ°μ΄νΈνλλ‘ λμμΌ ν©λλ€. keyλ μμ μ μ΄κ³ μμΈ‘ κ°λ₯νλ©° κ³ μ ν΄μΌ ν©λλ€.
- μ΄λ―Έμ§ λ° μμ° μ΅μ ν: ν° μ΄λ―Έμ§μ μμ°μ μ ν리μΌμ΄μ λ‘λ© μλλ₯Ό μ νμν¬ μ μμ΅λλ€. μ΄λ―Έμ§λ₯Ό μμΆνκ³ μ μ ν νμμ μ¬μ©νμ¬ μ΅μ ννμΈμ.
- μ κΈ°μ μΌλ‘ μ±λ₯ λͺ¨λν°λ§νκΈ°: μ ν리μΌμ΄μ μ μ±λ₯μ μ§μμ μΌλ‘ λͺ¨λν°λ§νκ³ μ μ¬μ μΈ λ³λͺ© νμμ μ‘°κΈ°μ μλ³νμΈμ.
- μλ² μ¬μ΄λ λ λλ§(SSR) κ³ λ €νκΈ°: SEO λ° μ΄κΈ° λ‘λ μ±λ₯μ μν΄ μλ² μ¬μ΄λ λ λλ§ μ¬μ©μ κ³ λ €νμΈμ. SSRμ μλ²μμ μ΄κΈ° HTMLμ λ λλ§νμ¬ μμ ν λ λλ§λ νμ΄μ§λ₯Ό ν΄λΌμ΄μΈνΈλ‘ 보λ λλ€. μ΄λ μ΄κΈ° λ‘λ μκ°μ κ°μ νκ³ κ²μ μμ§ ν¬λ‘€λ¬κ° μ½ν μΈ μ λ μ½κ² μ κ·Όν μ μλλ‘ ν©λλ€.
μ€μ μ¬λ‘
μ»΄ν¬λνΈ νΈλ¦¬ μ΅μ νμ λͺ κ°μ§ μ€μ μ¬λ‘λ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€:
- μ μμκ±°λ μΉμ¬μ΄νΈ: λκ·λͺ¨ μν μΉ΄νλ‘κ·Έκ° μλ μ μμκ±°λ μΉμ¬μ΄νΈλ μν λͺ©λ‘ νμ΄μ§μ μ±λ₯μ ν₯μμν€κΈ° μν΄ κ°μνμ μ§μ° λ‘λ©μ νμ©ν μ μμ΅λλ€. λν μ½λ λΆν μ μ¬μ©νμ¬ μΉμ¬μ΄νΈμ λ€λ₯Έ μΉμ (μ: μν μμΈ νμ΄μ§, μ₯λ°κ΅¬λ)μ νμμ λ°λΌ λ‘λν μ μμ΅λλ€.
- μμ λ―Έλμ΄ νΌλ: κ²μλ¬Όμ΄ λ§μ μμ λ―Έλμ΄ νΌλλ κ°μνλ₯Ό μ¬μ©νμ¬ λ³΄μ΄λ κ²μλ¬Όλ§ λ λλ§ν μ μμ΅λλ€. λ©λͺ¨μ΄μ μ΄μ μ μ¬μ©νμ¬ λ³κ²½λμ§ μμ κ²μλ¬Όμ 리λ λλ§μ λ°©μ§ν μ μμ΅λλ€.
- λ°μ΄ν° μκ°ν λμ보λ: 볡μ‘ν μ°¨νΈμ κ·Έλνκ° μλ λ°μ΄ν° μκ°ν λμ보λλ λ©λͺ¨μ΄μ μ΄μ μ μ¬μ©νμ¬ λΉμ©μ΄ ν° κ³μ° κ²°κ³Όλ₯Ό μΊμν μ μμ΅λλ€. μ½λ λΆν μ μ¬μ©νμ¬ λ€λ₯Έ μ°¨νΈμ κ·Έλνλ₯Ό νμμ λ°λΌ λ‘λν μ μμ΅λλ€.
κ²°λ‘
μ»΄ν¬λνΈ νΈλ¦¬λ₯Ό μ΅μ ννλ κ²μ κ³ μ±λ₯ μλ°μ€ν¬λ¦½νΈ μ ν리μΌμ΄μ μ ꡬμΆνλ λ° λ§€μ° μ€μν©λλ€. λ λλ§μ κΈ°λ³Έ μ리λ₯Ό μ΄ν΄νκ³ , μ±λ₯ λ³λͺ© νμμ μλ³νλ©°, μ΄ κΈμμ μ€λͺ ν κΈ°μ λ€μ μ μ©ν¨μΌλ‘μ¨ μ ν리μΌμ΄μ μ μ±λ₯κ³Ό λ°μμ±μ ν¬κ² ν₯μμν¬ μ μμ΅λλ€. μ ν리μΌμ΄μ μ μ±λ₯μ μ§μμ μΌλ‘ λͺ¨λν°λ§νκ³ νμμ λ°λΌ μ΅μ ν μ λ΅μ μ‘°μ νλ κ²μ μμ§ λ§μΈμ. μ΄λ€ κΈ°μ μ μ νν μ§λ μ¬μ© μ€μΈ νλ μμν¬μ μ ν리μΌμ΄μ μ νΉμ μꡬ μ¬νμ λ°λΌ λ¬λΌμ§λλ€. νμ΄μ λΉλλ€!