CFCs (feat. web component)

앞으로 프론트엔드에서 어떤 기술이 중요해질까?

React? Vue? Svelte? 아니면 Next 또는 Nuxt 같은 프레임워크?

위 기술들도 분명 중요한 기술들임에는 틀림없지만 나는 그보다 Web Component가 더 중요해질거같다는 생각이 든다.

https://developer.mozilla.org/en-US/docs/Web/API/Web_components

물론 회사 상황에따라 다르다.

서비스 코드가 일괄적으로 하나의 기술로만 구현되어있다면 해당 기술을 사용해 공통 컴포넌트를 만들어놓으면 될 것이다.

하지만 서비스 코드가 프로젝트마다 다른 기술로 개발되어있다면?

(이런 일이 흔하지 않을거라고 생각할 수 있지만, 내 주변에 의외로 이런 일이 많이 발생하고 있다. 솔직히 우리 회사처럼 다양한 기술들을 사용하진 않았더라도 React와 Vue를 같이 사용하는 회사들은 많다. 심지어 많이 사용하지 않는 기술.. Svelte가 될 수도 있고.. 우리회사는 WoowahanJS가 있고.. 과거에 많이 사용했던 JSP도 있고.. 이런 기술들을 사용한 곳도 많이 있을 것이다.)

그러면 각 기술별 공통 컴포넌트를 만드는건 엄청나게 귀찮고 어려운 작업이 될 것이다.

똑같은 기능을하는 컴포넌트를 각 기술마다 따로 만들어야되기 때문이다.

이러한 문제를 해결해주는 것이 Web Component이다.

위 기술은 표준화된 기술로 대부분의 브라우저에서 지원하고 있다.

그리고 공식적으로 재사용 가능한 컴포넌트를 만들기위한 기술이라고 명시되어있다.

그렇기 때문에 위 기술로 공통 컴포넌트, 디자인 시스템을 만들어놓으면 해당 서비스에서 어떤 기술을 사용하던 기술에 구애받지않고 개발을 할 수 있다.

또한 기능을 캡슐화하고 slot 이란 장치를 이용해서 기존 코드를 건드리지않고 특정 기능을 부여할 수 있기까지하다.

마치 데코레이터처럼.

지금 회사에서 실제로 JSP, WoowahanJS, React, Vue3로 되어있는 서비스를 위 Web Component 기술을 사용하여 개발하고 있는데 만족도가 굉장히 높다. (이런 프로젝트가 있을 수 있어?라고 생각할 수도 있지만 실제로 있을 수 있다.)

Web Component 기술로 공통 컴포넌트(또는 디자인시스템)를 Headless UI 방식으로 개발해놓으면 그 컴포넌트를 모든 기술에서 가져다 사용할 수 있다.

즉, 프레임워크 자유도가 확 올라가는 것이다.

사실 개발자라면 다들 새로운 기술, 보다 더 좋은 기술에 대한 욕심이 조금이라도 있을 것이다.

하지만 현실의 벽에 부딪혀 실행에 못 옮기는 분들이 많을 것이다.

개발 일정도 준수해야되고.. 괜히 신기술을 사용했다가 다른 프론트엔드 개발자의 러닝커브만 높이게되고..

하지만 이 벽을 깨고싶다면, 이 벽을 깨서 기술 선택의 자유도를 높이고 싶다면, Web Component를 사용해보는 것도 좋은 방법이 될 것이다.

물론 이걸하려면 Web Component와 Litjs를 따로 좀 학습해야되지만.. (litjs는 Web Component를 보다 더 쉽게 개발하게 해주는 프레임워크이다. 사실 이런 프레임워크들은 따로 많이 있지만(Stenciljs 등) Litjs를 제일 많이 사용하는거같아 선택했다.)

그리고 무엇보다도 Headless UI 원칙을 준수해 개발해야돼서 머리가 꽤 아프지만.. 좋은 선택지임에는 틀림없다고 생각한다.