rae-han(7주차): 객체지향 프론트엔드 개발 그리고 멀티패러다임적 접근과 응용

raehan/7. 객체지향 프론트엔드 개발 그리고 멀티패러다임적 접근과 응용.md

@@ -0,0 +1,76 @@
+# 객체지향 프론트엔드 개발 그리고 멀티패러다임적 접근과 응용
+
+## 1. 현대 클라이언트 개발의 패러다임 변화
+
+최근 웹 프론트엔드 개발은 **리액티브(reactive) 패러다임** 기반의 라이브러리(예: React, Vue 등)를 통해 선언적 방식으로 UI를 작성하고, DOM 직접 조작을 최소화하며, 자바스크립트의 내장 객체만으로도 상당 부분 구현이 가능해졌습니다.
+
+이런 접근은 개발의 편의성과 생산성을 크게 향상시키지만, **구글 캘린더, 스프레드시트, 피그마**처럼 복잡한 실시간 편집 툴을 만들기 위해서는 여전히 **객체지향 프로그래밍(OOP)**의 직접적인 시스템 자원 및 플랫폼 기능 연동 능력이 요구됩니다.
+
+## 2. 객체지향 프로그래밍(OOP)의 역할과 확장성
+
+OOP는 **캡슐화, 추상화, 상속, 다형성** 등 명확한 개념 체계를 바탕으로, 대규모 기능의 모듈화와 관리에 매우 유용합니다.
+
+- 디자인 패턴과 다양한 SDK 사례를 통해 검증된 유산이 있음
+- **iOS, 안드로이드, macOS, 윈도우** 등 다양한 플랫폼의 클라이언트 개발에서도 동일하게 적용됨
+- **Web API** 등 브라우저의 공식 API 역시 객체지향적으로 설계되어 있어, 이를 이해하고 활용하는 경험이 다양한 기술 스택으로의 확장성과 고품질 소프트웨어 개발의 토대를 제공함
+
+## 3. 플랫폼 SDK 기반 프로그래밍의 본질
+
+**플랫폼 SDK 기반 프로그래밍**은 개발자가 시스템 레벨 API를 직접 호출하고, 네이티브로 제공되는 라이브러리를 활용하는, 기본 기술에 충실한 개발 방법론입니다.
+
+이런 방식은 렌더링 자동화보다는 **"상태가 언제, 어떻게 변해야 하는가"**를 세밀하게 통제하는 설계 철학을 지향하며, 퍼포먼스와 사용자 경험(UX) 측면에서 유리합니다.
+
+> **TypeScript**와 **Web API**를 조합하면, 별도의 프레임워크 없이도 객체지향적이고 확장 가능한 설계를 구현할 수 있습니다.
+
+## 4. 컴포넌트 구조와 이벤트 시스템의 설계
+
+### 계층화된 컴포넌트 구조
+
+`View`, `SwitchView`, `SettingItemView`, `SettingListView`, `SettingPage` 등으로 계층화된 컴포넌트 구조를 설계하여, 각 컴포넌트가 자신의 상태와 하위 컴포넌트를 캡슐화하고, 상호작용을 명확히 분리합니다.
+
+### 상태 변경과 이벤트 발생의 분리
+
+- **사용자의 직접 상호작용**(예: 클릭)에 의해서만 커스텀 이벤트(`toggled`)가 발생
+- **프로그램 내부 로직**(`setOn` 등)으로 상태를 변경할 때는 이벤트를 발생시키지 않음
+
+이를 통해 불필요한 이벤트 루프나 복잡한 상호참조 문제를 방지하고, 이벤트의 본질적 역할(**외부에 알려지지 않은 상태 변화를 통지**)을 명확히 합니다.
+
+## 5. 추상화, 상속, 데코레이터 등 언어적 기법의 활용
+
+### 추상 클래스를 통한 공통 로직 추상화
+
+- **추상 클래스**(`ToggleView` 등)를 통해 공통 로직을 상속 구조로 추상화
+- 하위 클래스(`SwitchView`, `CheckView` 등)는 템플릿만 정의하여 코드 중복을 줄임
+
+### TypeScript 데코레이터 활용
+
+```typescript
+// 데코레이터를 통한 부가기능 주입 예시
+@EventDecorator("click")
+class ToggleView {
+  // 클래스 구현
+}
+```
+
+TypeScript의 **데코레이터 기능**을 활용해, 클래스/메서드에 부가기능(예: 이벤트 등록)을 선언적으로 주입할 수 있습니다. 이는 코드의 간결성과 가독성을 크게 높입니다.
+
+### 인터페이스 기반 설계
+
+**인터페이스 기반 설계**(`TogglePage` 등)를 통해 구체 구현 없이도 구조적 유연성을 확보하고, 생산성을 높입니다.
+
+## 6. 상태 관리와 DOM 동기화의 효율적 구현
+
+### 효율적인 DOM 동기화
+
+- `ListView` 등에서 `append`, `splice` 등의 메서드를 통해 데이터와 뷰의 동기화를 효율적으로 처리
+- 불필요한 DOM 조작을 최소화
+
+### 성능 최적화
+
+데이터 변경에 따라 **필요한 부분만 DOM에 반영**하는 구조로, 성능과 유지보수성을 모두 확보합니다.
+
+## 핵심 요약
+
+> **현대 프론트엔드 개발**은 리액티브 선언적 패러다임과 객체지향 프로그래밍의 장점을 결합하여, **확장성·유지보수성·성능**을 모두 갖춘 구조적 소프트웨어를 지향합니다.
+
+**플랫폼 SDK 기반의 객체지향적 접근**은 다양한 환경에서 일관된 고품질 UX를 구현하는 데 필수적이며, **추상화·이벤트 분리·데코레이터** 등 언어적 기법이 이를 뒷받침합니다.