create-react-app에서 절대 경로로 import 해보기
절대 경로가 상대 경로보다 좋을까요? - 넵!
생각해보면 웹사이트에서 여러 정적 리소스를* 가져올 때, 여러 이유로 보통 절대 경로를 사용합니다.
마찬가지로 import시에도 절대 경로에 비슷한 장점이 있다고 생각합니다. 그럼 어떻게 하는지 한 번 봐요!
*: static resource, 여러 이미지나 css 파일 등
Absolute Imports: Importing a Component
먼저 CRA 공홈의 문서를 읽어보죠! 그리고… 그리고?
그대로 따라해보면 됩니다! jsconfig.json 파일만 추가하고,
나와있는대로 compilerOptions.baseUrl과 include만 설정해주시면 됩니다. (복붙복붙)
엥 끝?🤔 넵 끝이에요!🥳
이게 왜 되는거냐면요~
에 그러니까? 이건 사실 webpack의 설정인 webpack.config.js의 resolve.modules을 (참고) CRA 3.0.0에서부터 구현한 내용입니다. 자세한 내용이 궁금하시면 아래 풀리퀘를 참고하세요!
Set baseUrl from jsconfig.json/tsconfig.json #6656
그 대신.. 제한을 걸어놨어요! 위의 문서처럼 compilerOptions.baseUrl, include를 src로 설정해주셔야 합니다. 뭔가의 안전상 이유일까요?
// Otherwise, throw an error.
throw new Error(
chalk.red.bold(
"Your project's `baseUrl` can only be set to `src` or `node_modules`." +
' Create React App does not support other values at this time.'
)
);
(참고: packages/react-scripts/config/modules.js :48)
그리고 또한 Jest에서도 문제 없도록 jest.config.js의 modulePaths를 (참고) 챙겨주고 있답니다!
module.exports = (resolve, rootDir, isEjecting) => {
// Use this instead of `paths.testsSetup` to avoid putting
// an absolute filename into configuration after ejecting.
const setupTestsMatches = paths.testsSetup.match(/src[/\\]setupTests\.(.+)/);
const setupTestsFileExtension =
(setupTestsMatches && setupTestsMatches[1]) || 'js';
const setupTestsFile = fs.existsSync(paths.testsSetup)
? `<rootDir>/src/setupTests.${setupTestsFileExtension}`
: undefined;
const config = {
// 중략
modulePaths: modules.additionalModulePaths || [],
(참고: packages/react-scripts/scripts/utils/createJestConfig.js :53)
와! 굳이 module-alias를 쓰지 않아도 되네요!