mixin
-
[CSS/Lang] LESSFront-End(Web)/HTML, CSS 2021. 8. 12. 02:10
😃 서론 오랜만에 CSS 라이브러리 포스팅을 진행하는 것 같다. Less 같은 경우엔 내가 선택했다기 보다, 현재 회사에서 쓰이는 언어이다. 리드 엔지니어님께서 쓰시는 패턴을 차용해서 작업을 진행하다보니, 확실히 CSS 코드가 눈에띄게 짧아짐을 느꼈다. 또, 믹스인들로 구성한 문법이 마치 또다른 언어같지만, 눈에 익다보면 CSS 약어와 비슷하여 금방 적응도 되었다. 앞으로 리뉴얼되는 우리의 코드에는 Less가 더 적극적으로 쓰이며, 나 역시도 Vue 개인 프로젝트를 진행할 때 Less를 많이 사용할 것 같아 좀 더 원론적으로 정리하고자 이 글을 포스팅하게 시작했다. 🔵 Less 란? LESS는 CSS에 script의 능력(변수, 함수, 연산, 중첩, 스코프 등) 을 덧붙여 확장한 언어이다. LESS는 C..
-
[Vue.js] 재사용 & 컴포지션 - (1) Mixin, Directive, RenderFront-End(Web)/Vue 2021. 7. 20. 21:58
내가 Vue를 사용, 공부하면서 가장 정리하고 싶은 섹션이 시작되었다! 프론트엔드 작업을 하다보면 반복되는 컴포넌트와 기능들이 등장하기 마련이다. 특히, 이런 기능들이 필요할 때마다 매번 컴포넌트에 작성하게 된다면, 이후 수정 등 유지보수가 매우 안 좋을 것이다. 이러한 기능들을 공통화, 전역화하는 다양한 기법들이 Vue에 존재한다고 들었다. (믹스인, 플러그인 등) 이들의 차이점은 무엇인지, 그리고 어떻게 사용하며 어떤 상황에서 특히 적합할지를 공부해보도록 하겠다. 💚 Mixins(믹스인) Mixins는 Vue 컴포넌트에서 재사용 가능한 기능을 배포하는 유연한 방법이라고 소개한다. * 믹스인(Mixin) : 다중 상속을 지원하는, 구현된 인터페이스를 의미함 의미 그대로, 컴포넌트에 원하는 기능을 실행하..