<div id="readability-page-1" class="page"><div><div><a rel="noopener" href="/?source=post_page-----1b77c9a1b8bb--------------------------------"><div><p><img alt="Jeong Woo Ahn" src="https://miro.medium.com/fit/c/56/56/2*5-DkBQYvxo0TLldXjX88Og.png" width="28" height="28"></p></div></a></div><p id="4556">그리고 몇 가지 이슈들과 해법</p><p id="e2b1"><a href="https://vue-loader-v14.vuejs.org/kr/features/scoped-css.html" rel="noopener nofollow">Vue.js의 Scoped CSS 기능</a>은 Vue.js의 내장 기능이 아니라 <a href="https://vue-loader.vuejs.org/" rel="noopener nofollow">vue-loader</a> 에서 제공하는 기능이다. <a href="https://vue-loader.vuejs.org/" rel="noopener nofollow">vue-loader</a> 는 <a href="https://vue-loader.vuejs.org/spec.html" rel="noopener nofollow">Single-File Components (SFCs)</a> 포맷으로 코드를 작성할 수 있도록 도와주는 도구이다. 즉 Scoped CSS는 SFC 로 작성할 경우 해당되는 이야기이니 참고바란다.</p><p id="36e4"><a href="https://www.html5rocks.com/ko/tutorials/webcomponents/shadowdom-201/" rel="noopener nofollow">Shadow DOM의 스타일 캡슐화</a>(encapsulation) 기능과 흡사하다고 한다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*1IEncOQU1Qe-0Ow787Qxng.jpeg" width="700" height="453" role="presentation"></p></div></figure><h2 id="fd54">왜 Scoped CSS 인가</h2><p id="d101">Scoped CSS는 특정 컴포넌트에 정의된 스타일 정의가 나도 모르게 다른 컴포넌트에 영향을 주는 사이드 이펙트를 막을 수 있다.</p><p id="ba7b">Vue.js를 비롯한 컴포넌트 중심의 코딩을 유도하는 프레임워크에서 작업을 하게되면 자연스럽게 컴포넌트들의 중첩이 이뤄진다. 그 과정에서 의도하지 않게 특정 컴포넌트의 스타일 정의가 다른 컴포넌트에 영향을 주게 된다.</p><p id="0991">앱의 규모가 작을때<span id="rmm"><span id="rmm">는</span></span> 큰 문제가 안될 수 있으나 규모가 커지면 사이드 이펙트를 관리하는것도 상당한 스트레스로 작용할 수 있고 이것을 해소하기 위한 코드들을 별도로 생산해야할 수도 있다.</p><p id="b481"><a href="https://medium.com/witinweb/css-%EB%B0%A9%EB%B2%95%EB%A1%A0-1-bem-block-element-modifier-1c03034e65a1" rel="noopener">BEM과 같은 CSS 작성 방법론</a>이 모듈 단위의 재사용성 높은 스타일링이 이런 사이드 이펙트를 완화시키는데 도움이 되기는 하지만 이것만으로는 사이드 이펙트를 완전히 피하기는 힘들다.</p><h2 id="260f">기본적인 사용법</h2><p id="a4a6">Scoped CSS는 특정 컴포넌트의 스타일이 해당 컴포넌트에만 적용되도록 강제하는 역할을 하게된다. 다음과 같이 스타일 태그에 <code>scoped</code> 속성을 명시하면 된다.</p><figure></figure><p id="2a57">이렇게 작성하면 실제로 아래와 같이 변환된다.</p><figure></figure><p id="177b">위와 같이 돔 속성에 랜덤한 속성 이름(data-v-f3f3fdk)이 생성이 되고 스타일 시트의 클래스 이름은 그 속성 이름과 함께 명시(.example[data-v-f3f3fdk])되기 때문에 해당 돔에만 영향을 주도록 범위가 제한(scoped)된다.</p><h2 id="a07c">문제1 : v-html 사용 시</h2><p id="0349">하지만 v-html 디렉티브를 통해 추가되는 html은 scoped 된 속성이름이 생성되지 않는다.</p><figure></figure><p id="9256">이런 경우 아래와 같이 변환된다.</p><figure></figure><p id="212a">위와 같이 v-html로 주입된 돔에는 scoped 속성이름이 추가되지 않는다. 따라서 변환된 스타일 정의 <code>.my .content[data-v-02564f04]</code>는 아무것도 셀렉트하지 못한다.</p><h2 id="63a2">문제2: 하위 컴포넌트</h2><p id="7f94">하위 컴포넌트에 영향을 주는 스타일을 정의하고 싶은 경우에도 문제가 된다. 왜냐하면 하위 컴포넌트의 scoped 속성이름은 부모와 다르거나 속성이름이 없기(scoped 설정을 하지 않을 경우) 때문이다.</p><p id="8d08">방법은 Deep Selector를 사용하면 가능하다. 물론 원칙적으로는 하위 컴포넌트에 영향을 주는 스타일은 매우 예외적인 경우에만 사용하는 것이 좋지만 말이다.</p><h2 id="bb9b">Deep Selectors</h2><p id="8831">위 문제들을 해결해주는 것이 <a href="https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors" rel="noopener nofollow">Deep Selector</a>이다. 아래와 같이 작성하면</p><pre><span id="dbd7">&lt;style scoped&gt;<br>.a &gt;&gt;&gt; .b { /* ... */ }<br>&lt;/style&gt;</span></pre><p id="ba12">아래와 같이 변환된다.</p><pre><span id="d4a4">.a[data-v-f3f3eg9] .b { /* ... */ }</span></pre><p id="cd89">따라서 클래스 b를 가진 돔이 어떤 scoped 속성이름을 가지고 있다고 하더라도 셀렉트는 잘 동작한다.</p><p id="523a">Sass 와 같은 <strong>pre-processor 를 사용하는 경우</strong> <code>a. &gt;&gt;&gt; .b</code>대신 <code>.a::v-deep .b</code> 혹은 <code>.a /deep/ .b</code>와 같이 사용해야 동일한 효과를 볼 수 있다.</p><p id="c050">다시한번 말하지만 사이드 이팩트를 제거하기 위해 scoped css 기능을 사용하는 것이기 때문에 또 다른 사이드 이팩트를 야기할 가능성이 있는 deep selector는 <strong>매우 예외적인 경우에만</strong> 사용하고, 되도록이면 컴포넌트에 옵션(BEM 용어를 빌리면 modifier)을 추가하는 방식과 같이 다른 방법이 가능한지 따져 보고 판단하길 바란다.</p></div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

그리고 몇 가지 이슈들과 해법
Vue.js의 Scoped CSS 기능은 Vue.js의 내장 기능이 아니라 vue-loader 에서 제공하는 기능이다. vue-loader 는 Single-File Components (SFCs) 포맷으로 코드를 작성할 수 있도록 도와주는 도구이다. 즉 Scoped CSS는 SFC 로 작성할 경우 해당되는 이야기이니 참고바란다.
Shadow DOM의 스타일 캡슐화(encapsulation) 기능과 흡사하다고 한다.
왜 Scoped CSS 인가
Scoped CSS는 특정 컴포넌트에 정의된 스타일 정의가 나도 모르게 다른 컴포넌트에 영향을 주는 사이드 이펙트를 막을 수 있다.
Vue.js를 비롯한 컴포넌트 중심의 코딩을 유도하는 프레임워크에서 작업을 하게되면 자연스럽게 컴포넌트들의 중첩이 이뤄진다. 그 과정에서 의도하지 않게 특정 컴포넌트의 스타일 정의가 다른 컴포넌트에 영향을 주게 된다.
앱의 규모가 작을때는 큰 문제가 안될 수 있으나 규모가 커지면 사이드 이펙트를 관리하는것도 상당한 스트레스로 작용할 수 있고 이것을 해소하기 위한 코드들을 별도로 생산해야할 수도 있다.
BEM과 같은 CSS 작성 방법론이 모듈 단위의 재사용성 높은 스타일링이 이런 사이드 이펙트를 완화시키는데 도움이 되기는 하지만 이것만으로는 사이드 이펙트를 완전히 피하기는 힘들다.
기본적인 사용법
Scoped CSS는 특정 컴포넌트의 스타일이 해당 컴포넌트에만 적용되도록 강제하는 역할을 하게된다. 다음과 같이 스타일 태그에 scoped 속성을 명시하면 된다.
https://medium.com/media/f88d64c765e48e4373707177eb5cdd7d/href
이렇게 작성하면 실제로 아래와 같이 변환된다.
https://medium.com/media/bea936a4af1ac0c8658aa4d25dab7de4/href
위와 같이 돔 속성에 랜덤한 속성 이름(data-v-f3f3fdk)이 생성이 되고 스타일 시트의 클래스 이름은 그 속성 이름과 함께 명시(.example[data-v-f3f3fdk])되기 때문에 해당 돔에만 영향을 주도록 범위가 제한(scoped)된다.
문제1 : v-html 사용 시
하지만 v-html 디렉티브를 통해 추가되는 html은 scoped 된 속성이름이 생성되지 않는다.
https://medium.com/media/f4dea87786a3019260c26bc9d0c23a27/href
이런 경우 아래와 같이 변환된다.
https://medium.com/media/4271b17118de08067bf32ca21bafca6f/href
위와 같이 v-html로 주입된 돔에는 scoped 속성이름이 추가되지 않는다. 따라서 변환된 스타일 정의 .my .content[data-v-02564f04]는 아무것도 셀렉트하지 못한다.
문제2: 하위 컴포넌트
하위 컴포넌트에 영향을 주는 스타일을 정의하고 싶은 경우에도 문제가 된다. 왜냐하면 하위 컴포넌트의 scoped 속성이름은 부모와 다르거나 속성이름이 없기(scoped 설정을 하지 않을 경우) 때문이다.
방법은 Deep Selector를 사용하면 가능하다. 물론 원칙적으로는 하위 컴포넌트에 영향을 주는 스타일은 매우 예외적인 경우에만 사용하는 것이 좋지만 말이다.
Deep Selectors
위 문제들을 해결해주는 것이 Deep Selector이다. 아래와 같이 작성하면
<style scoped>
.a >>> .b { /* ... */ }
</style>
아래와 같이 변환된다.
.a[data-v-f3f3eg9] .b { /* ... */ }
따라서 클래스 b를 가진 돔이 어떤 scoped 속성이름을 가지고 있다고 하더라도 셀렉트는 잘 동작한다.
Sass 와 같은 pre-processor 를 사용하는 경우 a. >>> .b대신 .a::v-deep .b 혹은 .a /deep/ .b와 같이 사용해야 동일한 효과를 볼 수 있다.
다시한번 말하지만 사이드 이팩트를 제거하기 위해 scoped css 기능을 사용하는 것이기 때문에 또 다른 사이드 이팩트를 야기할 가능성이 있는 deep selector는 매우 예외적인 경우에만 사용하고, 되도록이면 컴포넌트에 옵션(BEM 용어를 빌리면 modifier)을 추가하는 방식과 같이 다른 방법이 가능한지 따져 보고 판단하길 바란다.
이 글이 마음에 드셨다면 👏🏽👏🏽와 커피한잔 후원하기 (카카오페이), 이메일로 소식을 받아보고 싶으시다면 ✉️ 이메일 구독하기

Vue.js Scoped CSS

댓글