web-components

사내 스터디

• 개요: Web Components는 재사용 가능한 커스텀 요소를 만들고, 다른 코드와 독립적으로 작동하도록 캡슐화하여 웹 애플리케이션에서 사용할 수 있는 기술 집합, 리액트나 뷰에도 사용이 가능

• 목표: Vue의 토대가 되는 Web Components를 배워보자

• 주요 개념: Custom Elements: JavaScript API를 통해 사용자 정의 요소와 동작을 정의하고, 이를 UI에서 자유롭게 활용 가능. Shadow DOM: 요소에 캡슐화된 DOM 트리를 연결하여 다른 코드와 충돌 없이 독립적으로 스크립트 및 스타일 적용 가능. HTML Templates: 과 을 사용해 렌더링되지 않는 마크업 템플릿을 작성하고, 이를 커스텀 요소의 구조로 재사용.

  1주차: Guide - Jay

  2주차: Interfaces: 나

  • https://docs.google.com/presentation/d/1wn-x4qIVKFe2iOf4J5ZhAlKQlie2i4GXyL-KEfZryak/edit?usp=sharing

  3주차: Properties: Aiden

  • https://docs.google.com/presentation/d/1et8e3GoC4HMSR_Z3pSSrDkLiSz6l4AP5/edit?usp=sharing&ouid=104618386438161714141&rtpof=true&sd=true

  4주차: Method - Jay

  5주차: Web components를 활용하여 Todo list 구현 및 발표

  • 나의 최종 결과물
  • https://github.com/qkreltms/web-components-basic