Web Components 란 무엇인가 : 알아야 할 모든 것

개발자가 웹 사이트를 처음 볼 때 일반적으로 다음과 같은 HTML 템플릿을 보게 됩니다: <div><button onclick="doSomethingFunction">Click me</button></div>) + JavaScript + CSS

그러나 HTML 및 JS로 작업하는 것은 어려울 수 있습니다. 많은 시간, 노력 및 유지 관리도 어려운 코드 줄이 필요합니다. 특히 웹 그리드 구성 요소, 웹 구성 요소, 차트 및 그래프 등을 구축하는 것과 같은 복잡한 작업을 수행하려는 경우.

이것이 TypeScript(또는 JavaScript) 및 다양한 웹 애플리케이션 프레임워크가 등장한 이유입니다. 새 프로젝트에서 작업할 때 사용할 준비가 된 미리 정의된 기능이 많이 있습니다. 그러나 다음 과제인 학습 곡선이 있습니다. Angular, React, jQuery Blazor와 같은 프레임워크를 사용하고 필요한 구성 요소를 개발할 수 있으려면 특정 프로그래밍 기술을 마스터해야 합니다.

이제 프레임워크 없이도 이러한 작업을 수행할 수 있으며 Web Components 덕분에 모든 모듈, 코딩 언어 및 통합 이면의 복잡성을 이해할 필요가 없습니다.

Web Components 이란 무엇입니까?

전 세계 여러분 안녕하세요. 제 이름은 컴포넌트입니다... Web Components

Web Components는 버튼, 위젯 등과 같은 사용자 지정 UI 요소를 만들거나 전체 화면, 페이지 및 앱을 빌드하는 데 사용되는 브라우저 네이티브 HTML 및 JavaScript 기술입니다. 그것을 훌륭하게 만드는 것은 코드의 나머지 부분과 구별되는 캡슐화 된 기능과 <html-element>의 재사용 가능성입니다. 이러한 모듈화를 통해 프로젝트의 어느 곳에서나 개별 요소를 활용하고, <hello-world></hello-world> 이상의 것을 빠르고 쉽게 빌드하고, 개발 시간을 단축할 수 있습니다.

하지만 Web Components 프레임워크나 렌더링 라이브러리와 혼동하지 마세요. Web Components 이러한 기술 범주에 속하지 않습니다. 다음과 같이 보는 것이 더 적절합니다.

• 저수준 브라우저 API
• 표준 구성요소 인터페이스
• 프레임워크에 구애받지 않는 풍부한 사용자 경험

​2011년 프론티어스 컨퍼런스(Fronteers Conference)에서 알렉스 러셀(Alex Russell)이 처음 소개한 비교적 새로운 개념으로 여겨지는 표준 Web Components의 개념은 지난 10년 동안 크게 발전하여 개발자(특히 초보자)가 최신 웹 애플리케이션을 만드는 방법을 단순화할 수 있는 방법을 제공합니다. Web Components에 대해 이야기 할 때 우리는 실제로 세 가지 사양에 대해 이야기하고 있습니다.

사용자 지정 요소– 새 HTML 태그를 만들고, 기존 태그를 개선하고, 사용자 지정 요소 동작을 정의하고, 다른 프로그래머가 빌드한 구성 요소를 확장하여 UI와 가장 잘 일치하도록 할 수 있는 JavaScript API 집합입니다. 사용자 지정 요소에는 고유한 의미 체계와 태그가 있으며 타사 프레임워크 없이 존재합니다.

Shadow DOM– CSS와 JavaScript를 분리하고 캡슐화를 제공합니다. 이렇게 하면 사용자 지정 요소의 태그 구조, 스타일 및 동작을 페이지의 다른 코드와 격리하여 서로 다른 부분이 충돌하지 않도록 하는 동시에 코드를 깔끔하게 유지할 수 있습니다. Shadow DOM API를 사용하면 주어진 요소에 숨겨진 DOM을 첨부할 수도 있습니다.

HTML 템플릿– 사용자 지정 요소에 사용되는 <template>를 사용하면 페이지 로드 시 즉시 렌더링되지 않는 동적 콘텐츠가 포함된 마크업 템플릿을 만들 수 있습니다. 이러한 매개변수는 여러 번 추가로 재사용할 수 있으며 런타임 중에 호출됩니다. 또한 소위 <슬롯>이 있어 요소의 내용을 관리하는 방법을 용이하게 합니다.

왜 Web Components 사용합니까?

Web Components는 프로덕션 준비가 되어 있지만 계속 발전하고 발전하므로 개발자는 앞으로 더 많은 이점을 얻을 수 있습니다. 그러나 Web Components의 이점은 무엇입니까? 다음은 현대 웹 개발을 정확히 어떻게 향상시킬 수 있는지 여전히 궁금하다면 염두에 두어야 할 몇 가지 생각입니다.

• 모듈화를 강화하고 상호 운용 가능합니다.

Web Components 사용하면 웹 앱에 쉽게 적용할 수 있는 작고 재사용 가능한 모듈식 요소를 활용하고 개발 시간을 단축할 수 있습니다. 교차 공유가 가능하고 기술 스택에 의존하지 않기 때문에 서로 다른 프레임워크로 작성된 많은 프로젝트에 적용할 Web Components 있습니다. 예를 들어 이를 통해 Angular에서 React 프로젝트로 전환할 수 있습니다.

• 렌더링 UI는 더 적은 JavaScript로 발생합니다.

Web Components의 모든 부분은 사용자 지정 요소에서 슬롯에 이르기까지 브라우저에서 작동합니다. 이는 특히 툴링이 거의 필요하지 않고 사양만으로 쉽게 구축 할 수있는 정적 사이트 개발에 매우 유용합니다.

• 학습에 관한 한 힘든 싸움이 최소화됩니다.

경험이 부족한 개발자는 전체 JavaScript 라이브러리를 배우지 않고도 코드 작성을 시작할 수 있습니다. Web Components 모든 사람이 실제로 이해하고 적용할 수 있는 사양을 제공하기 위해 단계를 밟습니다.

• 접근성(a11y)은 물론입니다

HTML Web Components는 사용자 지정 기본 제공 요소가 기본 HTML 요소(input, select, button)를 확장할 수 있으므로 액세스할 수 있습니다. 그렇게 하면 모든 기능과 특성을 상속받습니다.

• Delivers platform-independence

HTML, CSS 및 JavaScript를 사용하여 개발된 Web Components는 다른 브라우저에서 실행하는 데 문제가 없으며 안정적인 API로 만족스러운 수준의 브라우저 지원이 있습니다. Web Components는 이미 Chrome 및 Safari(2016년), Firefox(2018년) 및 Edge(2020년)에 추가되었습니다. Microsoft Edge 및 Internet Explorer 11과 같은 이전 브라우저와의 이전 버전과의 호환성도 JavaScript 기반 폴리필을 사용하여 달성됩니다. 또한 웹 구성 요소 표준에 구축된 모든 사용자 정의 구성 요소 및 위젯은 HTML로 작동하는 모든 JavaScript 라이브러리 또는 프레임워크와 함께 사용할 수 있습니다.

• Offers encapsulation mechanism

Web Components의 Shadow DOM은 캡슐화 메커니즘을 제공합니다. 스타일, 스크립트 및 HTML 마크업을 분리할 수 있으므로 구성 요소의 내용이 외부 문서에 의해 어떤 식으로든 손상될 수 없습니다. 이를 통해 모듈식 프론트엔드 개발이 쉽고 빨라집니다.

가장 큰 기술 대기업 및 업계 이름 중 일부에서 만든 Web Components 라이브러리 또는 웹 구성 요소 프레임워크 형태의 훌륭한 Web Components 예가 있습니다. 우리는 Microsoft의 FAST 구성 요소, Salesforce에서 개발한 Lightning Web Components, 물론 Google에서 개발한 Polymer 프로젝트를 알고 있습니다.

프레임워크가 토끼굴로 내려가고 있습니까?

훨씬 더 흥미롭고 단순한 것을 쫓는 것... Web Components 처럼?

Angular, React, jQuery 및 기타 프레임워크는 훨씬 더 성숙한 기술입니다. 그들은 수년 동안 시장에 존재해 왔지만 HTML Web Components는 새로운 트렌드로 간주됩니다. 그러나 어떻게 비교할 수 있으며 개발자는 Web Components 대 Angular, Web Components 대 React 전투를 어떻게 이해할 수 있습니까?

먼저 Web Components과 Angular 또는 React는 다양한 문제를 해결한다는 아이디어로 구축되었다는 점을 언급하는 것으로 시작해야 합니다. 최신 프레임워크는 DOM을 데이터와 동기화된 상태로 유지하는 풍부한 라이브러리를 제공하지만, Web Components는 캡슐화를 허용하고 다양한 프로젝트와 플랫폼에서 사용할 수 있는 상호 운용 가능한 요소를 제공합니다.

프레임워크는 학습 곡선이 가파르다. 제대로 사용하려면 특정 기술을 습득해야 하고 코드를 업데이트해야 하는 반면, Web Components는 단일 프로그래밍 언어에 대한 모듈식 접근 방식을 소개합니다.

주어진 프레임워크를 위해 개발된 구성 요소는 다른 프레임워크에 거의 맞지 않습니다. 우리가 알고 있는 프레임워크를 사용하면 라이브러리를 별도로 추가해야 합니다. 반면에 HTML Web Components는 브라우저에 내장된 웹 API를 사용하며 프레임워크에 구애받지 않습니다.

Web Components 사용하면 인기 있는 앱 개발 프레임워크에서 사용할 수 있는 데이터 바인딩 및 상태 관리와 같은 기능이 없기 때문에 몇 가지 스타일링에 어려움이 있습니다.

​React, Angular 및 널리 채택된 나머지 앱 개발 플랫폼의 생태계는 인상적으로 강력합니다. 그들은 대규모 커뮤니티의 지원을 받으며 지속적으로 진화하는 도구와 라이브러리를 기반으로 합니다.

물론 각각에는 강점과 약점이 있습니다. 좋은 소식은 프레임워크와 Web Components 모두의 미래가 밝다는 것입니다. 프론트엔드 개발이 점점 더 간소화되고 효율적이 되도록 계속 업데이트되고 개발될 것입니다.

최신 웹 앱을 위한 최첨단 개발 도구를 제공한다는 아이디어로 Ignite UI for Web Components 라이브러리를 출시했습니다. 이를 사용하면 미래 지향적인 앱 개발 전략에서 종속성 없는 구성 요소를 사용하는 이점을 제공하는 고급 웹 애플리케이션을 구축할 수 있습니다.

Web Components에 추가해야 하는 새로운 기능에 대한 아이디어가 있는 경우 제품 아이디어 웹사이트에 요청 및 제안 사항을 게시하여 알려줄 수 있습니다.