Lightning Web Component의 등장 배경과 사용해야 하는 이유

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.

LWC는 Web Component의 핵심 표준 기술을 활용하며 Salesforce가 지원하는 브라우저에서 제대로 작동하기 위해 필요한 기능만 제공합니다. 또한 브라우저에서 바로 작동하기 때문에, LWC는 가볍고 뛰어난 성능을 제공합니다. 대부분의 코드는 표준 Javascript와 HTML로 작성하게 됩니다.

 

Salesforce의 LWC 소개문에서 발췌한 내용이다. 뭐 대충 빠르고 가볍다는 것은 알겠는데 Web Component라는 단어가 보인다. 그냥 지나칠 수도 있는 단어지만 알아두면 도움이 되는 지식이므로, 이번 포스팅에서는 Web Component가 대체 무엇이며 Salesforce가 LWC를 등장시킨 배경에 대해 알아보려 한다.

 

현대의 어플리케이션 개발은 점점 복잡해지고 규모도 커지고 있다. 이를 관리하기 위해 UI를 컴포넌트 단위로 쪼개서 재사용성을 높이는 컴포넌트 기반 아키텍처가 등장하였고 이것을 기반으로한 다양한 front-end 라이브러리 및 프레임워크가 선풍적인 인기를 끌게된다. React, Vue, Angular가 대표적인 사례이며, Salesforce는 Lightning Component를 기반으로 한 Aura라는 자체 개발 프레임워크를 제공하고 있다.

 

그러던 2019년 2월, Salesforce는 Aura를 이어갈 차세대 front-end 프레임워크인 Lightning Web Component(LWC)를 출시하게 된다. 처음 출시됐을 시기에는 호환성 문제 및 신기술 러닝 커브로 인해 다들 프로젝트에 적용하기를 꺼려하는 분위기였으며 이는 3년이 지난 현재도 그렇다. 대부분의 파트너사들도 LWC로만 개발하는 프로젝트는 아직까지 손에 꼽는 수준이다. 또 실제로 개발을 해보면 Aura에 비해 불편한 부분이 한 두개가 아니다. 대표적으로 변수 바인딩 작업이나 조건부 렌더링에서의 표현식 사용 불가 문제가 있다.

 

그럼에도 불구하고 나는 LWC사용을 적극 권장한다. 그 이유를 설명하려면 컴포넌트 기반의 아키텍처의 등장 배경과 Web stack의 진화 과정에 대해 알아야 한다.

 

Web stack의 진화 과정. 프레임워크에서 웹 표준으로 많은 기술들이 이전되는 모습을 볼 수 있다.

상술된 링크의 내용들을 요약하자면

• 프레임워크와 라이브러리는 언제든지 새로운 기술에 의해 대체될 수 있으며, 특정 기술에 의존성이 강해서 다른 시스템으로 갈아타기 어렵다.이를 Vendor lock-in이라고 한다.
• 특정 라이브러리, 프레임워크에 종속되지 않는 웹 표준 기술(HTML, JS, CSS)만 사용해서 개발을 하면 Vendor lock-in을 대부분 해소할 수 있다. 하지만 기존의 웹 표준 기술만으로는 컴포넌트 아키텍처 기반 개발이 쉽지 않았었다.
• 14년~19년 사이에 컴포넌트 기반 프레임워크의 많은 기능들이 Web stack에 이전되어서 "Web Component"라는 기술의 모음으로 웹 표준에 추가되었다. 이로 인해 웹 표준 기술만으로도 컴포넌트 기반 아키텍처를 구성하는 것이 수월해졌다. (Shadow DOM을 활용한 캡슐화, Custom Element/HTML Template을 활용한 컴포넌트 분리, 컴포넌트 Life Cycle 관리 등)
• 또한 Web stack을 활용하면 프레임워크나 라이브러리가 아닌 브라우저에서 native로 기능을 수행하기 때문에 성능이 개선된다.

Web Component는 이러한 과정을 거쳐 탄생했고, LWC는 Web Component를 기반으로 만든 경량화 프레임워크다.

Salesforce는 기존에 Aura 프레임워크가 처리하던 작업들을 Web Component를 활용하여 브라우저에게 위임하면서 성능을 개선하고, 언젠가 출시하게될 또 다른 프레임워크에 대한 대비까지 하고 있는 것이다. 만약 LWC가 없었다면 Aura는 언젠가 다른 프레임워크로 대체되었을 것이고, Vendor lock-in으로 인해 많은 사람들이 고통받았을 것이다.

 

문득 든 생각을 적어보자면, Visualforce에서 Aura로 넘어갈 때에는 상호 호출이 가능했던 반면(물론 호출방식이 까다롭고 제한적이기는 하다), LWC에서는 Aura 컴포넌트를 호출할 수 없다. Aura의 수명이 빠르게 줄어들고 있다는 뜻인 것 같다.

 

그래서 나는 LWC를 사용하는 것을 적극 권장한다.

 

주의사항

• Web component가 모든 브라우저에서 작동하는 것이 아닌만큼, LWC도 모든 브라우저에서 사용할 수 있는 것은 아니다. LWC 브라우저 지원 목록을 확인해보자(작성일 기준 LWC와 Aura는 지원 브라우저가 동일함).
• LWC가 아직까지 Aura의 대부분의 기능을 지원하고 있지만 모든 기능을 지원하는 것은 아니다. 안되는 것들은 과감하게 Aura로 개발하자. Aura에서는 LWC 호출이 자유롭다.