Front-End(Web)/React - 프레임워크(React, Next)

[Craco] Craco로 설정하기 (절대경로, Less)

ttaeng_99 2022. 1. 23. 18:45
반응형

이전 포스팅에선 Craco가 무엇인지, 그리고 기본적으로 설치하는 방법에 대해 알아보았다.

이번 포스팅은, Craco 익스텐션을 통해 내가 보일러 플레이트에 적용했던 설정들을 기록하는 시간을 갖도록 하겠다.

💙 Craco-alias : 절대경로 설정하기

절대경로는, 모듈들을 참조(import)할 때 경로를 루트(root) 혹은 src로부터 작성하기 위해 설정하곤 한다.

상대경로로 작성된 경로는, 아무래도 가독성도 떨어질뿐더러 파일이 추가되거나 수정될 때 경로추적이 매우 번거롭다는 단점이 있다.

tsconfig.json으로 설정하면 경로추적은 가능하나, 컴파일 시 해당경로의 모듈을 찾지 못한다는 에러가 발생한다.

그렇기에, Webpack을 eject해서 경로에 대한 정보를 추가해주어야 하며, 이 번거로움을 줄이기 위해 Craco를 사용하는 것이다!

 

 

절대경로는 보통 루트(root) 혹은 src를 기준으로 설정하며, 이를 명시하기 위한 문법인 alias를 설정하곤 한다. (통상, @ 혹은 ~)

 

1. Craco 및 익스텐션 설치

yarn add @craco/craco
yarn add craco-alias -D

Craco를 우선 설치한다. 그리고, craco-alias 익스텐션을 설치하는데, 개발환경에만 필요하므로 -D(dev 옵션)으로 설정해도 무방하다.

 

2. Scripts문 수정

"scripts": {
  "start": "craco start",
  "build": "craco build"
  "test": "craco test"
}

Craco 설정을 적용하기 위해 package.json의 scripts 커맨드들을 craco 기반으로 바꿔준다.

이제 Webpack 수동 설정을 위한 eject 커맨드가 불필요하므로 지워도 무방하다!

 

3. tsconfig.paths.json 경로전용 설정파일 추가

// tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

루트에 tsconfig.paths.json 파일을 추가해준다.

이는, tsconfig(혹은 jsconfig) 에서 경로설정 관련된 내용만 작성하기 위한 익스텐션 파일이다.

baseUrl(기준)을 root('.')로 잡았다. '@/' alias는 src폴더를 가르키기 위해 paths에 설정해주었다.

 

이를, tsconfig.json에 적용하기 위해 extension 옵션을 설정한다.

// tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    // ...
  },
}

 

4. craco.config.js 설정파일 추가 및 설정

const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        tsConfigPath: 'tsconfig.paths.json',
      },
    },
  ],
};

다음으로, 루트에 craco.config.js 설정파일을 만들고, 여기에 craco-alias 플러그인을 설정을 해준다. 몇 가지 설정옵션을 알아보겠다!

  • source : 기본 설정파일 소스로 jsconfig, tsconfig 선택 가능. 기본값은 options.
  • baseUrl : 기준경로를 가르키며 기본값은 "./"(루트).
  • aliases : alias 이름과 경로. 기본값은 {} 빈 객체이며, 여기에 설정해도 되나 통상 tsconfig.paths.json으로 설정
  • tsConfigPath : source가 tsconfig 인 경우, paths.json 경로 설정파일을 적어준다.
  • debug : 디버깅 여부. 기본값은 false.

 

5. 적용하기

컴포넌트들을 가져오는 게 매우 깔끔해진 모습이다!

 

 

 

💙 Craco-Less : Less 컴파일 설정하기

사실 현재의 CSS 트랜드인 Styled-components나 tailwindCSS 에 비해, 이 Less는 생소하거나 혹은 과거회귀하는 느낌이 강할 것이다.

그럼에도 내가 Less를 활용한 CSS Module을 선택한 이유는, 회사 개발팀장님께서 세팅해주신 Single-Line CSS가 매우 편리해서이다.

// Multi-Line : Styled-Components

const ScMemoListItem = styled.li`
  position: relative;
  padding: 15px 10px 15px 35px;
  border-top: 1px solid black;
  cursor: pointer;
`;



// Single-Line : LESS + CSS Modules

// ./MemoListItem.module.less
.memoListItem { .rel; .p(15,10,15,35); .-t(black); .pointer; }

 

Sass, Less와 같은 CSS 전처리기를 사용하기 위해서는 Loader를 사용해야 한다.

Sass, Less 모듈들을 입력받아 CSS로 컴파일 해줄뿐만 아니라, 변환된 CSS 결과물로서 빌드하기 위해 사용되야 한다.

 

less, less-loader 라이브러리들뿐만 아니라, 컴파일 시 Less가 적용되기 위해 Craco를 설정해보겠다!

 

1. 설치 및 scripts 수정

yarn add @craco/craco craco-less
"scripts": {
  "start": "craco start",
  "build": "craco build"
  "test": "craco test"
}

Craco와 craco-less 플러그인을 설치해준다. 스크립트문은 위에서 설명한 절대경로와 같은 방식으로 수정한다.

 

2. craco.config.js 설정파일 추가

마찬가지로, root에 설정파일을 추가한 뒤, 여기에 craco-less 플러그인에 대한 설정을 추가해준다.

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
            // modifyVars: {
            //   "@primary-color": "#1DA57A",
            //   "@link-color": "#1DA57A",
            //   "@border-radius-base": "2px",
            // },
          },
        },
      },
    },
  ],
};

options내 lessLoaderOptions 프로퍼티를 작성하고 내부에 설정해주면 된다. javascriptEnabled를 true로 설정한다.

또한, lessOptions 내 modifyVars 옵션을 통해 직접적으로 변수설정도 가능하나, 통상 별도의 Less 파일들을 사용하는 것이 일반적이다.

이번 포스팅은 그리 길진 않았지만, 프로젝트를 좀 더 유용하게 만들어주는 옵션들을 설정하는 방법에 대해 정리해보았다.

크고 작은 프로젝트들을 경험하면서, 세팅의 중요성을 더더욱 절실하게 느끼게 되는 것 같다.

 

기존에는 CRA로 초기세팅하는 것이 마냥 편리하다고 느꼈지만,

유용한 설정들을 접하다보니 이를 내 프로젝트에도 반영하고자하는 의지가 생겼으며, 특히 이러한 설정들을 Webpack에 적용하기 위해선 eject를 하던가 수동적으로 직접 설정하는 과정이 필수적임을 느꼈다.

 

후에 시간을 할애해서, 직접 Webpack을 커스텀해보는 경험을 가지는것도 좋을 것 같다!

 

📎 출처

- [Craco 기본] Craco Github : https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation. 

- [craco-alias] jacobko 님의 블로그 : https://jacobko.info/react/react_14/. 

- [craco-less] craco-less 공식 Github : https://github.com/DocSpring/craco-less  

반응형