Vue.js 사용하면서 드는 생각

오랜만에 XE타운입니다. 한 동안 본업에만 집중하고 있어서 XE 쪽은 어느새 점점 멀어지게 되었네요.

요즘은 본업에서 Vue.js를 사용하고 있습니다. 자바스크립트로 서버부터 프론트엔드까지 다 작업이 되는 신세계를 맛보고 있네요. 이래서 더더욱 XE로 돌아오기가 쉽지 않습니다. ><;a

Vue.js를 사용하면서 굉장히 편했던 점 중에 하나가 css를 각 컴포넌트별로 분리시켜서 관리할 수 있다는 점인데요.

위 스크린샷처럼 컴포넌트 내에 'scoped'라는 옵션을 추가하면

자동으로 해당 컴포넌트 내 태그들에 컴포넌트를 지칭하는 attribute가 붙고,

반환된 css 선택자에 자동으로 이 attribute가 붙습니다.

이 구조 덕분에 개발자는 각 컴포넌트별로 코드가 영향받는 걸 신경쓰지 않아도 됩니다.

또한 Vue.js와 같은 자바스크립트 프레임워크는 웹팩의 청크라는 기능을 사용해서 해당 컴포넌트가 마운트될 때만 그에 해당하는 css를 불러오도록 할 수 있습니다. 덕분에 웹 효율이 더 올라가죠.

SPA다 보니 서버사이드 렌더링을 하기 위해서 조금 번거로운 작업이 필요하지만, 확실히 편하고 재미있는 것 같네요.

이 기능을 사용하면서 XE의 템플릿 엔진도 이렇게 게시판 스킨, 회원 정보 스킨 등에 들어가는 css는 scope되도록 만들어졌다면 좋지 않았을까하는 생각이 들었습니다. 이렇게 되면 서드파티들간의 css 충돌은 신경쓰지 않아도 되니까요.

특히 부트스트랩의 클래스명을 따르는 스킨들은 서로 충돌이 너무 잦습니다. 유일하게 클래스명 충돌이 일어나지 않는 방식이 .uk-navbar 와 같이 용도를 지칭하는 클래스명 앞에 프로그램의 이니셜을 OO-oo 이와 같은 형태로 붙이는 겁니다. 처음부터 저 방식으로 클래스명을 지어주었다면 이렇게 고민할 일이 없었을텐데 아쉽습니다. 이제 와서 코드를 뜯어고치기에는 너무 귀찮은 작업이 될 것 같고, 다음에 XE 스킨을 작업하게 된다면 그때는 이 방식을 사용할 것 같네요.