-
320x100
CRA
- 리액트 프로젝트를 뚝딱 시작할 수 있게 돕는 보일러 플레이트* (*자주 쓰는 수식, 명령어 등을 미리 입력해 놓는 것)
- 그래서 번거롭게 Babel, ESLint, Webpack 등을 따로 설치할 필요가 없다CRA(create-react-app)에서 config 건드리기
절대경로 설정(alias)을 하려면 Webpack의 config를 건드려야 하지만, CRA로 생성하면 기본적으로 config 파일을 볼 수 없다.
eject 하면 숨겨져 있던 config 파일을 밖으로 꺼낼 수 있지만, 이거 한 번 하면 못 돌리는 옵션인데.... 웹팩이랑 안 친한데.... 🥺
이럴 땐 CRACO(Create React App Configuration Override) 를 사용하자! eject 없이 설정을 건드릴 수 있다 🙌
$ yarn add @craco/craco $ yarn add -D craco-sass-resources-loader
설치한 후 config 파일들을 슥슥 만져준다.
1. craco가 명령어를 실행하도록 바꾸기
/* package.json 수정 */ { ... "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", }, ... }
2. craco.config.js 파일 설정
- 타입스크립트 환경이여서 plugins.options.source 를 tsconfig 로 설정했다. (자바스크립트 환경이라면 jsconfig)
/* craco.config.js 생성 */ const CracoAlias = require('craco-alias'); module.exports = { plugins: [ { plugin: CracoAlias, options: { source: 'tsconfig', tsConfigPath: 'tsconfig.paths.json' } } ] };
3. tsconfig.paths.json 생성 후 경로 설정
- 별도 파일로 분리하지 않고 config.js 내에 직접 입력해도 무관!
/* tsconfig.paths.json 생성 */ { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] // 또는 "@components/*": ["src/components/*"] 처럼 지정 가능 } } }
4. tsconfig.json 수정
- 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정하는 파일
-
extends
: 다른 파일의 설정을 상속-
include
: 컴파일 할때 포함할 폴더나 파일/* tsconfig.json 수정 */ { "extends": "./tsconfig.paths.json", "compilerOptions": { //... }, "include": ["src", "tsconfig.paths.json"] }
이렇게 하면 @/components/button 또는 @/styles/_mixin.scss 와 같이 불러와 쓸 수 있다.
이제 craco.config.js 에서 글로벌로 적용할 스타일을 @/styles/로 지정해 줄 수 있다.
const CracoAlias = require('craco-alias'); module.exports = { style: { sass: { loaderOptions: { additionalData: ` @import "@/styles/_variable.scss"; @import "@/styles/_mixin.scss"; ` } } }, plugins: [ { plugin: CracoAlias, options: { source: 'tsconfig', tsConfigPath: 'tsconfig.paths.json' } } ] };
덧1) CRA 기반 Storybook에서 전역 변수 이해하게 만들기
와... 어마무시한 삽질!!
이렇게만 했더니 스토리북에서는 전역 변수를 이해하지 못해서 여러 방면으로 타일러보다가 (왜 이해하질 못하니ㅠㅠ!!)
스토리북의 main.js 에서 sass-loader 에 additionalData 넣는 걸로 해결.
/* .storybook/main.js */ module.exports = { //... webpackFinal: async (config, { configType }) => { config.module.rules.push({ test: /\.scss$/, use: [ { loader: 'sass-loader', options: { additionalData: ` @import "./src/styles/_variable.scss"; @import "./src/styles/_mixin.scss"; ` } } ] }); return config; } };
이유는 모르겠으나 sass-loader 외에 style-loader 나 css-loader도 같이 지정하게 되면,
"import API from "!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";" 에러가 붐붐쳌.
아무래도 기본 설정이랑 어딘가에서 충돌이 나는 것 같지만 지금으로선 알 수 없다... 😭
덧2) Vite 환경에서 설정하기
CRACO 없이 tsconfig.json, vite.config.js 파일을 설정해주면 된다.
굳이 paths.json 으로 빼지 않고 tsconfig.json 에 경로를 입력해주고, vite.config.ts에 alias를 지정해 준 모습👇
/* tsconfig.json */ { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } }
/* vite.config.ts */ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import * as path from 'path'; // <https://vitejs.dev/config/> export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src') } }, css: { preprocessorOptions: { scss: { additionalData: ` @import '@/styles/_variable.scss'; @import '@/styles/_mixin.scss'; `, }, }, }, });
마무리는 역시...
야..얍! Ⓒ LINE+ 728x90'🐿 > JS' 카테고리의 다른 글
코어자바스크립트 - 자바스크립트 기본 (0) 2022.01.02 2021년 회고 (0) 2021.12.29 댓글 0