[React] Vendor Prefix (공급업체 접두사) 설정

안녕하세요. J4J입니다.

 

이번 포스팅은 공급업체 접두사 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

Vendor Prefix (공급업체 접두사) 설정 방법

 

들어가기에 앞서 webpack과 관련된 패키지들은 최신 버전으로 설치해야 정상적으로 동작됩니다.

 

제가 설정하는 환경은 webpack 관련 패키지들이 다음과 같기 때문에 참고하시길 바랍니다.

 

{
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.2"
  }
}

 

 

 

[ 1. 패키지 설치 ]

 

$ npm install -D postcss autoprefixer postcss-loader
$ npm install -D style-loader css-loader sass-loader node-sass

 

 

 

[ 2. postcss 설정 ]

 

root위치에 .postcssrc.js 파일을 만들어주고 다음과 같이 작성해줍니다.

 

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
}

 

 

 

[ 3. webpack 설정 ]

 

module.exports = {
    // 로더 등록
    module: {
        rules: [
            {
                test: /\.s?css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ],
            },
        ],
    },
};

 

 

 

[ 4. package.json 설정 ]

 

{
  "browserslist": [
    "> 1%", // 전 세계에서 사용되는 브라우저 점유율의 1% 이상인 브라우저에만 적용
    "last 2 versions" // 각 브라우저들의 최신 2개의 버전만 적용
  ],
}

 

 

반응형

 

 

테스트 코드

 

테스트는 다음과 같이 총 5가지를 해볼겁니다.

 

• Css
• Scss
• StyledComponents - 내부
• StyledComponents - 외부
• Self - 요소 작성할 때 style 설정

 

 

 

또한 테스트를 위해 작성될 파일들은 다음과 같습니다.

 

[ style.css ]

 

.css {
    display: flex;

    margin: 40px 0;
}

 

 

 

[ style.scss ]

 

.scss {
    display: flex;

    margin: 40px 0;
}

 

 

 

[ styled.ts ]

 

import styled from "styled-components";

export const OuterStyled = styled.div`
    display: flex;

    margin: 40px 0;
`

 

 

 

위의 파일들을 모두 작성을 했다면 App.tsx파일에 다음과 같이 코드를 작성해보겠습니다.

 

import * as React from 'react';
import styled from 'styled-components';
import { OuterStyled } from './styled';
import './style.scss';
import './style.css';

const InnerStyled = styled.div`
    display: flex;

    margin: 40px 0;
`

const App = (): JSX.Element => {
    return (
        <div>
            <div className='css'>
                <h3>Css</h3>
            </div>
            
            <div className='scss'>
                <h3>Scss</h3>
            </div>

            <InnerStyled>
                <h3>InnerStyled</h3>
            </InnerStyled>

            <OuterStyled>
                <h3>OuterStyled</h3>
            </OuterStyled>

            <div style={{display: 'flex', margin: '40px 0'}}>
                <h3>Self</h3>
            </div>
        </div>
    )
}

export default App;

 

 

 

현재 모든 스타일에는 display: flex가 들어있습니다.

 

공급업체 접두사 설정이 정상적으로 되었다면 display: flex뿐만 아니라 각 브라우저 엔진들에 맞는 스타일들도 같이 적용되어 있어야 합니다.

 

코드를 작성하고 적용된 스타일을 확인해보면 다음과 같은 결과를 볼 수 있습니다.

 

 

 

Css 결과

 

 

728x90

 

 

Scss 결과

 

 

 

StyledComponents - 내부 결과

 

 

 

StyledComponent - 외부 결과

 

 

 

Self 결과

 

 

 

 

 

 

 

이상으로 공급업체 접두사 설정하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.