JavaScript에서의 상속 원리 및 실무 적용
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *JavaScript/React 개발자**
- 난이도: 중급~고급 (ES6, 프로토타입 체인, 성능 최적화 이해 필요)
- 관련 분야: UI 컴포넌트 라이브러리, 데이터 모델 설계, 보안 고려사항
핵심 요약
- 프로토타입 상속: 객체는 프로토타입을 통해 속성과 메서드를 상속받음.
Object.prototype
이 체인의 끝. class
구문: ES6에서 도입된 프로토타입 상속의 구문적 편의 제공. 내부 메커니즘은 변함 없음.- 보안 및 성능 고려:
Object.prototype
수정은 피해야 하며, 깊은 프로토타입 체인은 성능 저하 유발.
섹션별 세부 요약
1. **상속의 개념과 JavaScript의 프로토타입 체인**
- JavaScript는 프로토타입 기반 상속을 사용. 객체의 속성 접근 시 객체 자체 → 프로토타입 →
Object.prototype
순서로 검색. class
키워드는 프로토타입 상속의 구문적 편의 제공.class
내부 메서드는 프로토타입에 등록됨.- TC39 제안: 표준화되지 않은 명시적 상속 모델 논의 중.
2. **실무 적용 사례**
- 컴포넌트 라이브러리:
BaseComponent
에서isLoading
,error
상태와renderLoading
,renderError
메서드를 상속받는UserProfile
컴포넌트. - 에러 핸들링:
BaseError
클래스에서NetworkError
,ValidationError
등 상속. - 데이터 모델:
Model
클래스에서User
,Product
등의 CRUD 기능 상속. - 플러그인 시스템:
Plugin
기반의init
,run
,destroy
생명주기 메서드 재사용.
3. **성능 고려사항**
- 프로토타입 체인 깊이: 깊은 체인은 속성 접근 지연 발생.
- Benchmark 예시:
```javascript
console.time('Inheritance Lookup');
for (let i = 0; i < 1000000; i++) {
const obj = new DeeplyInheritedObject();
obj.someProperty;
}
console.timeEnd('Inheritance Lookup');
```
- Lighthouse 점수: 과도한 상속은 "성능" 카테고리 점수 하락 유발.
4. **보안 고려사항**
- 프로토타입 오염:
Object.prototype
수정 시 애플리케이션 전체에 영향. - 대응 전략:
- Object.freeze()
로 객체 불변화
- DOMPurify
로 HTML 내용 정화
- CSP(Content Security Policy) 적용
5. **테스트 및 디버깅**
- Jest/Vitest:
```javascript
test('Inheritance works as expected', () => {
const userProfile = new UserProfile({ userId: 123 });
expect(userProfile.handleError).toBeDefined();
});
```
- DevTools:
console.table()
으로 프로토타입 체인 시각화.
6. **상속 대신 조합(Composition) 사용**
- 조합 예시:
```javascript
const withLoading = (Component) => ({
...Component,
render() {
if (this.props.isLoading) return
Loading...
;
return
},
});
```
- 장점: 유연성과 유지보수성 향상.
결론
- 핵심 팁: 조합을 우선적으로 사용하고, 상속 체인은 얕게 유지.
Object.prototype
수정은 절대 금지. - 도구 활용:
Lodash
로 유틸리티 함수 공유,Core-js
로 ES6 기능 호환성 보장. - 보안 강화: CSP 적용,
DOMPurify
사용, 모든 입력 검증 필수. - 성능 최적화: 프로토타입 체인 최소화,
super()
누락 방지.