-
[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
반응형'Front-End(Web) > React - 프레임워크(React, Next)' 카테고리의 다른 글
[Next.js] next/image - <Image> 컴포넌트 (0) 2022.03.13 [React] Portal (포탈), Modal 구현하기 (0) 2022.02.06 [Craco] Craco 란? (0) 2022.01.18 [React Router/lib.] React Router v6 (0) 2021.12.14 [Next.js + TS] 초기세팅 - (4) Babel 설정 (4) 2021.11.02