[CSS] css reset (Normalize, Obfuscate)

Angular에서 React로 변경하면서 원본 페이지의 CSS가 새 페이지에 영향을 미치지 않도록 하기 위한 방법이 필요했습니다.

 

CSS Reset (Normalize)

CSS Reset은 브라우저마다 다르게 적용되는 기본 스타일을 초기화하여 일관된 스타일을 보장하는 기술입니다. 이를 통해 원본 페이지의 글로벌 스타일이 위젯에 영향을 미치지 않도록 할 수 있습니다.

 

1. CSS Reset 라이브러리 사용: Normalize.css와 같은 라이브러리를 사용하여 스타일을 초기화합니다.
2. 위젯의 최상위 클래스에 CSS Reset 적용: 위젯의 최상위 클래스에 CSS Reset을 적용하여 원본 페이지의 스타일을 무효화합니다.

/* normalize.css 또는 reset.css 파일을 프로젝트에 추가 */

.container {
  /* Normalize CSS를 여기 적용 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 추가적인 reset 스타일 */
}

 

 

CSS Classname Obfuscate (Uglify 또는 Minify)

CSS 클래스 이름을 난독화하여 번들 크기를 줄이고, 원본 페이지와 클래스 이름이 겹치는 것을 방지하는 기술입니다. 이를 통해 스타일 충돌을 방지할 수 있습니다.

1. CSS Loader: CSS Modules, PostCSS 등의 도구를 사용하여 클래스 이름을 난독화합니다.
2. 빌드 과정에서 적용: Webpack, Parcel 등의 빌드 도구를 사용하여 클래스 이름을 난독화합니다.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[hash:base64:5]'
            }
          }
        ]
      }
    ]
  }
};

/* React 컴포넌트 CSS */
.wrapmsgr_container {
  background-color: white;
  /* 다른 스타일 */
}