일부러 손댄것은 아니고 회사에서 맡게된 프로젝트가 거의다 만들어진 생태에서 다듬는 단계였다.
jQuery를 사용한 자바 스프링 프레임워크인데 항상 컴포넌트 형대로 프로그램을 만들어오다보니 손대기가 너무 어려웠다. 다행인것은 크로스 브라우징에 대한 제약이 없어서 과감하게 추가하는 기능을 web component로 만들게 되었다.

공부를 해둔것은 아니지만 항상 관심을 가지고 컨셉 정도는 익혀둔 상태라서 이리저리 리서치 해보면서 만들어 보았다.
처음 만든 컴포넌트는 이미지와 비디오를 같이 사용하는 컴포넌트가 필요했는데 이미지 파일을 넣으면 이미지로 나오고 비디오 파일을 넣으면 비디오 플레이어로 플레이 되는 기능을 가진 컴포넌트를 재미있게 만들었다.
소스가 뭔지도 모르는 상태에서 조건문을 걸고 수십군데에다 집어넣으려면 간소한 형태로 사용되어서 컴포넌트 하나만 고치면 한번에 업데이트를 하는데 컴포넌트 방식으로 만드는것이 제격이다.

이렇게 처음 한번 만들어보고 두개, 세개째 웹 컴포넌트를 만들어봤다. 만들고 결과물을 보니 꽤 보람이 생기는 작업이었다.

개인적으로 웹 컴포넌트에 굉장히 기대감을 가지고 있는 이유는..

• 웹 프레임워크에 자유롭다. 일반 엘리먼트와 같은 모습으로 사용하는 컨셉이라 어디서든지 사용할 수 있다.
• 번들링에 상대적으로 덜 의존적으로 개발할 수 있다.
• 컴포넌트 내부 공간이 격리되어있다. (이것은 장점과 단점 둘다 포함되어있어 보인다.)

이렇게 컴포넌트 몇개를 만들어보니 웹 컴포넌트 콜렉션을 만들어보는게 어떨까 생각에 미쳤다.
이리저리 필요해서 만들게 된 컴포넌트가 아이디어와 노력이 결집되어 있는데 단발성으로 사용하고 끝나는걸로 끝나는것보다 다른 곳에서 꺼내서 사용할 수 있으면 좀더 가치가 있지 않을까 하는 생각에 미쳤다.

컴포넌트의 세계의 미지의 대륙에서 개척해 나가는거와 같은 느낌이고 많은 변수와 시행착오를 느낄 수 있어 보인다.

요즘 모듈형태의 자바스크립트 개발을 많이 접하게 되는데 npm 디펜더시 방식이 자꾸 거슬리게 느껴진다. 컴포넌트속에서 <script src="https://domain.com/module.js">같은 외부 리소스를 불러와서 격리해서 사용할 수 있는 방법도 연구해볼 가치가 있어 보인다.

멀쩡한 리엑트 프로그램에서 컴포넌트 속에서 제이쿼리를 사용할지는 모르는 일것이다!

1개의 댓글