[Basic] Frontend의 이해 - Web Components and Type Checkers

1. Web Component

- Web Component는 웹 개발에서 재사용 가능한 컴포넌트를 만들기 위한 기술

- HTML Templates, Custom Elements, 그리고 Shadow DOM을 활용
- 컴포넌트 기반 개발을 간편하게 만들어주고, 코드의 재사용성과 유지보수성을 향상

• HTML Templates
  • 재사용 가능한 HTML 코드 블록을 정의하는 기능
  • <template> 태그를 사용하여 템플릿을 정의하고, JavaScript에서 템플릿을 가져와서 동적으로 콘텐츠를 채움
  • 동일한 구조를 가지는 컴포넌트를 여러 번 사용
  • 코드 재사용성과 유지보수성을 향상
•  Custom Elements
  • Custom Elements는 사용자가 직접 정의한 HTML 요소
  • class 키워드나 extends HTMLElement를 사용하여 JavaScript 클래스로 커스텀 요소를 정의
  • 기존의 HTML 요소와 마찬가지로 사용
  • 필요에 따라 자신만의 동작과 스타일을 가질 수 있음
• Shadow DOM
  • 독립적인 DOM 트리를 생성하여 캡슐화된 스타일과 구조를 가지는 기능
  • Shadow DOM을 사용하면 컴포넌트의 스타일이나 레이아웃이 외부 요소에 영향을 주지 않음
  • Shadow DOM 내부에서 동작하는 JavaScript 코드도 외부와 격리되어 충돌 방지
  • 컴포넌트의 독립성과 재사용성을 높임

2. Type Checkers

- 개발자가 코드에 타입을 추가하여 작성

- 코드 내의 타입 오류를 탐지하려고 하며, 컴파일 시간에 이를 제거하여 더 적은 버그가 있는 코드를 작성할 수 있도록 함

• TypeScript
  • Microsoft에서 개발한 프로그래밍 언어로, JavaScript에 정적 타입을 추가한 상위 집합 언어
  • JavaScript의 모든 기능을 포함하면서 타입 시스템을 도입
  • 개발자가 더 안정적이고 확장 가능한 코드를 작성할 수 있도록 도움
  • 변수, 매개변수, 함수 반환값 등에 타입을 명시해 가독성을 높이고, 컴파일 단계에서 타입 체크를 수행하여 오류를 미리 방지
  • 클래스, 상속, 인터페이스 등 객체 지향 프로그래밍의 개념을 지원해 코드를 모듈화하고 재사용성을 높임
  • 최신 JavaScript(ECMAScript) 문법을 지원
  • TypeScript는 강력한 개발 도구와 풍부한 생태계를 가지고 있음
  • TypeScript 컴파일러를 통해 JavaScript 코드로 변환할 수 있으며, 에디터와 IDE에서 코드 자동 완성, 타입 체크 등 다양한 지원 받기 가능
  • 많은 JavaScript 라이브러리와 프레임워크에서 TypeScript를 지원