React 프로젝트에서 eject 를 하거나 바닥부터 만들어야 하는 이유

create-react-app 을 써서 만들면 초반에 웹팩 관련 설정을 하지 않아도 되어서 되어서 편리하다고 생각 할 수 있다.

 

toss slash 컨퍼런스의 발표 내용 중에서 CRA로 앱을 만들면 몇가지 설정을 하기 불편해서 하지 않는다는 내용이 있다.

 

무슨 설정일까 궁금했다.

 

1. import 경로를 alias 하는데 문제가 있다.

 

import aaa from '@project/component' 이렇게 작성하면 편리하다.

 

import aaa from '../../../../components' 이렇게 작성하는 것은 불편하다.

 

@project/component 이렇게 쓰기 위해서 alias 경로를 수정하려면 tsconfig.json 같은 파일들을 조금 수정해야 한다.

 

결론적으로 CRA로 만들면 eject 해야 alias 를 추가할 수 있다.

 

eject 안하려면 craco-alias 라는 npm 모듈을 설치해야 한다.

https://www.npmjs.com/package/craco-alias

craco-alias

 

2. scss를 쓰는데 문제가 있다

 

리액트에서 Scss를 쓰려면 웹팩을 수정해야 한다고 한다.

 

CRA로 만든 앱의 웹팩을 수정하려면 eject를 해야한다.

 

eject 를 하면 내가 하지 않은 설정들까지 모두 드러나게 된다.

 

이렇게 하는것 보다는 처음부터 웹팩 설정을 해서 만들거나 / 아니면 create next app으로 만드는 방법이 있을 것 같다.

 

https://nextjs.org/docs/api-reference/create-next-app

Create Next App | Next.js

 

https://sass-lang.com/dart-sass

Sass: Dart Sass

 

dart sass 를 라이브러리를 사용하는 방법도 있다고 한다.