React.js로 개발을 하다 절대 경로 설정을 추가하게 되었다. TypeScript의 경우 tsconfig.json 파일을, JavaScript의 경우 jsconfig.json 파일만 추가하면 되었기 때문에 그리 어렵지 않게 설정할 수 있었다.
하지만 문제는 절대 경로를 추가하니 eslint에서 문법이 이상하다고 계속 경고를 울렸다.
이 이슈도 좀 유명한 이슈였는지 검색하니 여러 가지 방법이 나왔고, 여러 방법을 시도하던 중 eslint에서 'import/no-unresolved' 옵션을 아래와 같이 설정해주면 된다고 하여 이 이슈도 해결할 수 있었다.
"rules": {
"import/no-unresolved": [
2,
{ "caseSensitive": false }
],
// 또는
"import/no-unresolved": "off",
}
나 같은 경우 다른 설정은 작동하지 않아 "off"로 해결할 수 있었는데, 이 문제를 해결하는 글들을 읽어보며 "import/no-unresolved"가 정확히 어떤 옵션인지는 설명해주지 않아 나의 호기심을 자극했다.
다행히 GitHub에 이에 관련된 글이 있어, 이 부분을 알 수 있게 되었다. 아래 링크를 첨부하겠다.
https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-unresolved.md
원글을 읽는 것이 가장 좋겠지만, 시간이 없거나 영어를 잘 못 읽는 분들을 위해 간단히 정리하자면
경로의 파일이 unresolved하는 일이 없도록 하는 옵션인 것 같다. 그래서 이름부터 import/no-unresolved다. 정확히는 import로 가져온 파일 혹은 모듈이 unresolved가 되지 않도록(no)하는 옵션이다.
친절한 이 옵션은 import 뿐만 아니라 require, define 등의 CommonJS 혹은 AMD도 지원을 해준다.
심지어 CommonJS 혹은 AMD를 { commonjs: true/false, amd: true/false } 옵션을 통하여 감지할지 말지를 정해줄 수도 있다!
그리고 한 가지 옵션을 더 설명하자면 "caseSensitive"라는 옵션이 있는데, 파일 경로가 틀린 것을 감지하는 옵션이다.
당연히 기본적으로는 켜져있어서 true이고, 끄고 싶다면 false로 바꾸어주면 된다.
절대 경로의 경우에는 flie system의 실제 경로와 맞지 않기 때문에 lint에서 빨간 밑줄을 띄우게 되고, 이 옵션을 끄게되면 이제 더이상 실제 경로와 틀리다는 경고성 밑줄이 뜨게 되지 않는 것이다.
그리고 또 여러 가지 옵션이 더 있는데, 자세한 사항은 위의 GitHub 링크 들어가서 읽어보면 좋을 것 같다.
다시 한번 더 링크
https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-unresolved.md