ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Craco] Craco로 설정하기 (절대경로, Less)
    Front-End(Web)/React - 프레임워크(React, Next) 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  

    반응형
Designed by Tistory.