pile·
프론트엔드·인프랩 (인프런)인프런 (인프랩)·

shadow DOM으로 신규 프로젝트의 스타일을 지키는 방법

문제Bulma 기반 전역 스타일이 깔린 기존 서비스에 신규 React 페이지를 통합하니 태그 선택자 등으로 스타일이 오염됐다.
접근!important와 SCSS 회피책 대신 react-shadow로 Shadow DOM을 도입했다. Emotion 캐시를 shadow root로 옮기고, React Portal 타겟도 shadow DOM으로 재설정해 모달·툴팁까지 격리했다.
결과신규 앱과 기존 서비스가 완전히 독립된 스타일 환경에서 공존하게 되었고, 모던 스택으로의 점진적 마이그레이션이 가능해졌다.
인프랩 (인프런)
인프런 (인프랩) 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2