커뮤니티토픽게시판

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

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

 

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

 

 

3434.png

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

65656.png

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

234234.png

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

 

 

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

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

 

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

 

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

 

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

글쓴이 snax

profile
안녕하세요! Digital Product Designer, Calvin Snax입니다.
제 작업물을 확인해보시거나 작업을 의뢰하고 싶으신 분들은 제 사이트를 방문해주세요.
https://calvinsnax.com

XE & Rhymix 제작 자료
#HASHTAG 레이아웃: https://calvinsnax.com/hashtag
Alice 게시판 스킨: https://calvinsnax.com/alice
Slow 테마 패키지: https://calvinsnax.com/slow
coronach 레이아웃: https://calvinsnax.com/coronach
equeer 레이아웃: https://calvinsnax.com/equeer
eden 게시판 스킨: https://calvinsnax.com/eden
  • ?
    저도 js로 할수 있는게 상당히 많다는걸 깨달았습니다.
    프론트엔드는 물론이요, node.js로 백엔드 담당까지, 웹앱만들기도 편리하죠.
    여튼 응원합니다~
  • profile
    본업에서도 개발을 하시는군요? 역시 취미로 하실 분은 아닌 것 같긴 했습니다. 뷰는 트위터로 항상 소식은 받아보지만 손이 잘 안가네요. 3.0이 나오면 한번 써볼 것 같기도..
  • profile profile
    원래는 디자이너가 본업입니다만... 어쩌다보니 맛들이게 되서 개발에 뛰어들게 되었습니다ㅋㅋ 그래서 아직은 많이 부족합니다. Vue 쪽이 앵귤러나 리액트에 비해 서드파티가 조금 부족하긴 하지만 개발하기가 훨씬 편한 것 같아요. 이번에 vue cli 3.0이 베타로 공개됬는데 GUI로 프로젝트를 조작하는게 새로웠습니다. 물론 SSR 때문에 nuxt가 강제되는 탓에 최신 기능들을 다 써보지는 못하고 있네요ㅠㅠ