NODE_PATH와 jsconfig.json 설정
원문 번역 사이트 - https://alligator.io/react/clean-import-statements-in-react/
이 기사에서, 당신의 import문들을 더 깔끔하고 쉽게 리팩터링 만드는 방법을 배울 수 있습니다.
최신 버전인 create-react-app v3은 Absolute Imports를 위한 많은 것이 지원됩니다. 이러한 기능은 Visual Studio Code IDE에서 영감을 받았고, 지금 최신 버전인 v3에서 누구나 사용가능합니다.
“Absolute Imports”가 무엇인가?
일반적으로 리액트는 베이스로 있는 코드가 꽤 크고, 프로젝트의 파일 구조는 그림과 같습니다. (그림 생략 - 위의 원문 참고)
프로젝트에서 다른 <Component/>이나 local module을 import 할때마다 파일에 ./Foo, ../foo, ../../../foo-bar 이런식의 import 문을 작성할 것입니다.
만약 파일을 다른 경로로 옮긴다면, 기존의 import 문이 오류가 나겠죠. 최신 create-react-app v3에 있는 “Absolute imports”는 webpack이 import문을 읽는 방법을 바꿈으로써 이러한 문제를 해결했습니다.
이제 import { Header } from 'components/Header' import { HeaderContainer } from 'containers/HeaderContainer' 이런 구조로 사용합니다.
이것은 npm module인 “component”를 import 하는 것처럼 보이지만 그렇게 동작하진 않습니다. webpack은 node_modules 대신에 첫번째로 보는 경로로 src 폴더를 사용합니다.
지금 파일을 다른 경로로 옮겨야 할 때, 당신은 import 문이 오류가 나지 않을 것입니다. 보너스로 더 깔끔하게 보일 것이고, 새로운 사람이 당신의 프로젝트가 어떻게 구조화되어 있는지 이해하기 더 쉽게 만들어 줄것입니다.
사용 방법
1. jsconfig.json file 생성
{
"compilerOptions": {
"baseUrl": "src"
}
}프로젝트의 최상위 경로(package.json이 있는 경로)에 jsconfig.json 파일을 생성합니다. 그리고 위 코드와 같이 webpack에게 src를 사용하라고 알려줍니다.
이렇게만 한다면 당신의 프로젝트는 개발, 프로덕션 빌드에서 “Absolute Imports”를 사용할 수 있을 것입니다.
번외 - NODE_PATH 설정
create react app 프로젝트에 .env 파일을 만들어 webpack이 위와 같은 작업을 할 수 있도록 하는 구식 방법이 있습니다.
NODE_PATH=src그러나 최신 Create React App v3 에서는 이러한 warning 메세지를 줄 것입니다.
Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.
나는 React 팀이 .env 파일과 같은 도구에 구애받지 않는 표준을 왜 더 이상 사용하지 않는지 의문이 듭니다. 나는 jsconfig.json이 앞으로의 Create React App에서 중요한 config 파일이 될 것 같다는 추측을 합니다.
