꾸준히만 가자

최근 실무를 하면서 Module federation 환경에서 tailwind css를 사용해서 개발을 이어가고 있다. 헤드리스 UI가 부각되면서 Radix UI 기반의 Shadcn UI를 사용하려다보니 tailwind css를 사용하게 되었다. 하지만 역시 시행착오는 있다. 실제 잘 작동할 줄 알았던 스타일링에 문제가 발생했다. 문제 상황 remote 패키지에서 작성한 tailwind css의 class name이 제대로 host 패키지에서 서빙될때 스타일링이 되지 않는 문제 원인 파악 브라우저에서 실제 클래스 네임과 테일윈드의 클래스 네임이 mapping이 잘되는지 확인해보는게 우선이었다. 브라우저에서 스타일링이 정상적이지 않는 요소를 검사해보니 클래스 네임은 들어갔지만 스타일링 mapping이 되지 ..

2022년 5월 경에 작성한 블로그 글을 이관한 포스트입니다. Vue에서 scoped란..? vue 개발을 하면서 보통 스타일 태그에 보통 scoped를 주어 사용할 것입니다. 하지만 이렇게 되면 컴포넌트로 정의해놓은 UI를 적용 페이지에 맞게 입맛대로 커스텀해서 사용하기가 힘들 것 입니다. 특히나 페어코팅을 하고 컴포넌트가 내가 만든것이 아니라면 더욱이 그렇죠. 그래서 입맛대로 바꾸려면 어떻게..? 이런 경우를 대비해서 vue에서 정확히는 vue-loader에서는 Deep Selectors를 제공하고 있습니다. 일반적인 css에서는 .a >>> .b {...} 위 처럼 주면 되지만 scss를 사용한다면 위 명령어가 정상작동하지 않을 것입니다. scss에서는 .a::v-deep .b {...} 위로 공식..