๐Ÿค” Linaria?

Linaria๋Š” ๋Ÿฐํƒ€์ž„ ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ์—†๋Š” CSS-in-JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ์•„์ด๋””์–ด๋Š” styled-components๋‚˜ emotion, glamor ๋“ฑ๊ณผ ๋น„์Šทํ•˜์ฃ .

โ“ ์„ ํƒ์˜ ์ด์œ 

์‚ฌ์‹ค styled-components ์ข‹์ฃ . ์„ค์ •๋„ ํŽธํ•˜๊ณ , ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋„ ์ž˜ ์ง€์›ํ•˜๊ณ . ๊ทผ๋ฐ ๋งˆ์Œ์— ์•ˆ ๋“œ๋Š” ๊ตฌ์„์ด ์žˆ์—ˆ์–ด์š”.

ํฌ๊ณ  ์•„๋ฆ„๋‹ค์šด ์žฅํ’!

๋ฐ”๋กœ ๋ณ„ ๊ฑฐ ์•„๋‹Œ๋ฐ ๋„ˆ๋ฌด ๊นŠ์–ด์ง„๋‹ค๋Š” ์ ์ด์—ˆ์ฃ ! (styled-components ํ˜ธํ™˜ API๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด linaria๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ง€๋งŒ์š”) ๊ทธ๋ฆฌ๊ณ  ๋Ÿฐํƒ€์ž„ ์˜ค๋ฒ„ํ—ค๋“œ ์—†์Œ ๊ฐ™์€ ๊ฑฐ ์ข‹์ž–์•„์š”. SC๋Š” ๋„ˆ๋ฌด ๋Ÿฐํƒ€์ž„์— ํ‘๋งˆ์ˆ ์„ ๋ถ€๋ฆฌ๋Š” ๊ฒƒ ๊ฐ™๊ณ . ๋˜ linaria์˜ ๋™์  ์Šคํƒ€์ผ๋ง ๋ฐฉ๋ฒ•๋ก ์— ๋ฌป์–ด๋‚˜๋Š” ๋Š๋‚Œ๋„ ๋„ˆ๋ฌด ๋งˆ์Œ์— ๋“ค์—ˆ์–ด์š”.

๐Ÿš€ ์ ์šฉํ•˜๊ธฐ

์ €๋Š” React๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— React ๊ธฐ๋ฐ˜์œผ๋กœ ์„ค์ •์„ ์ง„ํ–‰ํ–ˆ์–ด์š”. webpack/babel์„ ์ง์ ‘ ๊ฑด๋“ค ์ˆ˜ ์žˆ๋Š” ์ƒํ™ฉ์ด๋ผ๋ฉด ๊ณต์‹ ์„ค๋ช…์„ ๋”ฐ๋ฅด๋Š” ๊ฒƒ์ด ๋” ์ข‹์•„์š”.

๐Ÿ˜“ create-react-app๊ณผ์˜ ๋ถˆํŽธํ•œ ๊ด€๊ณ„

create-react-app์œผ๋กœ ๋งŒ๋“  ์•ฑ์€ ์ •๋ง ํ™˜์ƒ์ ์ด์ฃ . ๊ทธ ๋ฐ–์œผ๋กœ ๋ฒ—์–ด๋‚˜๊ธฐ๊ฐ€ ๊ท€์ฐฎ๋‹ค๋Š” ์ ๋งŒ ๋นผ๋ฉด์š”. ๊ทธ๋ƒฅ ํ‰๋ฒ”ํ•˜๊ฒŒ eject ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ eject๋กœ ์ œ ํ”„๋กœ์ ํŠธ๋ฅผ ๋”๋Ÿฝํžˆ๊ณ  ์‹ถ์ง€ ์•Š์•˜์–ด์š”.

๐Ÿ”ง 1. react-app-rewired

react-app-rewired๋Š” ๊ฐ€์žฅ ๋„๋ฆฌ ์•Œ๋ ค์ง„ react-scripts ํŠธ์œ„์ปค์ผ ๊ฑฐ์—์š”. ์ฒ˜์Œ์—” ์ด๊ฑธ ์“ฐ๋ ค๊ณ  ํ–ˆ์–ด์š”. ๋‹ค๋งŒ ์–ด๋–ค ๋ ˆํฌ์ง€ํ† ๋ฆฌ ๋•Œ๋ฌธ์— ๋น™๋น™ ๋Œ์•„์„œ ๋ฒ—์–ด๋‚˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค... ์„ค์ • ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ–ˆ์–ด์š”.

module.exports = {
  webpack: webpackConfig => {
    // ์Šคํฌ๋ฆฝํŠธ ๋กœ๋”๋ฅผ ๊ฐ€์ ธ์™€์„œ
    const loader = webpackConfig.module.rules[2].oneOf[1];

    loader.rules = [
      // ๊ธฐ์กด ๋กœ๋”์—๋‹ค๊ฐ€
      {
        loader: loader.loader,
        options: {
          presets: [...loader.options.presets]
        }
      },
      // linaria ๋กœ๋” ๋”ํ•˜๊ธฐ
      {
        loader: 'linaria/loader',
        options: {
          cacheDirectory: 'src/.linaria_cache',
          sourceMap: process.env.NODE_ENV !== 'production',
          babelOptions: {
            presets: loader.options.presets
          }
        }
      }
    ];

    return webpackConfig;
  }
};

๐Ÿ”ง 2. craco

์‚ฌ์‹ค ์ฒ˜์Œ์—” react-app-rewired๋ฅผ ์“ธ ์ƒ๊ฐ์ด์—ˆ๋Š”๋ฐ, ์ด์Šˆ์—์„œ ๋‹ค๋“ค linaria-cra๋ฅผ ์“ด๋‹ค๊ธธ๋ž˜ ์ €๋„ ์ €๊ฑธ ์“ฐ๋ ค๊ณ  ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ craco๋ผ๋Š” ์ฒ˜์Œ ๋“ฃ๋Š” ํŠธ์œ„์ปค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฑฐ์—์š”. ์ฉ ๋‚˜๋น ๋ณด์ด์ง€๋Š” ์•Š๊ธธ๋ž˜ ์ผ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ฝค๋‚˜ ๊ดœ์ฐฎ์•˜์Šต๋‹ˆ๋‹ค. linaria-cra๋ฅผ ๋”ฐ๋ผ๊ฐ€๋„ ์ข‹์ง€๋งŒ ์ฝ”๋“œ๊ฐ€ ์กฐ๊ธˆ ๋งˆ์Œ์— ์•ˆ ๋“ค์–ด์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ์“ฐ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค (๊ทธ๋ฆฌ๊ณ  ์ด ํ•ต๊ฐ™์€ ์ฝ”๋“œ ๋Œ€์‹  ๋” ์ข‹์€ ์ฝ”๋“œ๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด ํ•˜๋ฃจ๋ฅผ ๋‚ญ๋น„ํ–ˆ๊ณ , ์‹คํŒจํ–ˆ์Šต๋‹ˆ๋‹ค).

const { loaderByName, getLoader } = require('@craco/craco');

module.exports = {
  webpack: {
    configure: webpackConfig => {
      // ์Šคํฌ๋ฆฝํŠธ ๋กœ๋”๋ฅผ ๊ฐ€์ ธ์™€์„œ
      const lm = getLoader(webpackConfig, loaderByName('babel-loader'));
      const loader = lm.match.loader;

      loader.rules = [
        // ๊ธฐ์กด ๋กœ๋”์—๋‹ค๊ฐ€
        {
          loader: loader.loader,
          options: {
            presets: [...loader.options.presets]
          }
        },
        // linaria ๋กœ๋” ๋”ํ•˜๊ธฐ
        {
          loader: 'linaria/loader',
          options: {
            cacheDirectory: 'src/.linaria_cache',
            sourceMap: process.env.NODE_ENV !== 'production',
            babelOptions: {
              presets: loader.options.presets
            }
          }
        }
      ];

      return webpackConfig;
    }
  }
};

๐ŸŽ‰ ์‚ฌ์šฉํ•˜๊ธฐ

HMR ์ž‘๋™์ด ์•ˆ ๋˜๊ธธ๋ž˜ craco๋ฅผ ์“ฐ๋‹ค react-app-rewired๋ฅผ ์“ฐ๋‹ค craco๋กœ ๋Œ์•„์˜ค๊ณ  react-scripts v3๋ฅผ v2๋กœ ๋‚ด๋ฆฌ๊ธฐ๋„ ํ•˜๊ณ  ๊ทธ๋Ÿฌ๋ฉฐ ์šฐ์—ฌ๊ณก์ ˆ ๋์— ํ”„๋กœ์ ํŠธ๋ฅผ ์„ค์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. TypeScript๋„ ์˜ˆ์˜๊ฒŒ ์ž˜ ๋“ค์–ด๊ฐ”๊ตฌ์š”. ๋‹ค๋งŒ ์ฝ”๋“œ๋Š” ์กฐ๊ธˆ ๊ท€์ฐฎ์•„์กŒ์Šต๋‹ˆ๋‹ค.

์ฝ”๋“œ

ํ•˜์ง€๋งŒ ์žฅํ’์ด ์‚ฌ๋ผ์ง„ ์ž๋ฆฌ์—๋Š” ๊ฐ๋™ ๊ทธ ์ž์ฒด.

์žฅํ’ ์‚ฌ๋ผ์ง„ ์ฝ”๋“œ

๐Ÿ˜Ž ๊ฒฐ๋ก 

linaria์˜ ์…‹์—…์€ ๊ท€์ฐฎ์•˜์ง€๋งŒ linaria๋Š” ์šฐ์•„ํ•จ ๊ทธ ์ž์ฒด์˜€๊ณ  ์ƒ๋‹นํžˆ ๋งŒ์กฑ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค.