[바미] Javascript (!) Missing global variable name 에러 해결하기.

안녕하세요. 오늘은 (!) Missing global variable name 에러관련하여 글을 써보려고 합니다.

디버그 시 위와 같은 에러가 뜨면 상당히 난감해질 때가 많이 있을 것 같습니다.

 

보통 제가 위의 에러를 경험했을 때가 

import Library from '../../ExmpleLibrary'

위와 같이 어떤 라이브러리나 파일을 import 하는 상황에서 많이 접했습니다.

 

그래서 import시 발생했을 때 어떻게 해결했는지 공유하고자 합니다.

 

1. 경로 문제

실제로 import 하려는 파일의 경로가 잘 못 되었을 때 발생하는 경우인데요.

원래 파일은 '../../Forder/File'에 있는데

import importFile from '../../../Forder/File'

위와 같이 지정했을 때 발생하게 됩니다.

 

이 때 해결 방법은 해당 파일이 있는 위치에 경로를 맞추어 주면 되는데 파일과 폴더가 너무 방대한 경우 이를 찾기 어렵습니다.

그래서 간단한 팁을 드리자면 VSCode에선 

위와 같은 방법으로 '../'단위로 폴더를 확인 할 수 있어 폴더와 파일 찾는데 큰 도움이 됩니다.

(이거 모르는 분들 은근 있더라구요! (❁´◡`❁))

 

2.  import한 라이브러리 다운을 받지 않았거나 버전이 다른 경우.

보통 위와 같은 경우 아래의 경고 문구가 하나 더 뜨죠.

이 에러 문구 다음에 

이 에러 문구가 뜨더라구요 ㅎㅎ

 

보통 저 상황에선 import는 했지만 자신의 환경에서는 라이브러리를 받지 않을 때나 해당 라이브러리를 받았으나 자신의 개발환경에서 사용중인 라이브러리의 버전이 맞지 않은 경우 주로 발생하는데요.

협업이나 오픈소스를 가지고 실행할 때 자주 보이는 문구입니다.

 

이 상황에서 해결 방법은 다운을 받거나 버전 업데이트를 시켜주면 됩니다.

자신이 NPM을 사용 중인 경우

npm install -g 사용하려는 라이브러리

를 VSCode 터미널 창에 입력하시면 되고,

 

NPM이 아닌 Yarn을 사용 하시는 경우엔

yarn install 사용하려는 라이브러리 
yarn add 사용하려는 라이브러리

저 둘 중 하나를 VSCode 터미널 창에 입력하시면 됩니다.

 

3. 사용하는 폴더의 대, 소문자 구별이 안되어 있을 때

이 상황은 조금 특별한 상황입니다.자신의 개발 환경에서는 정상적으로 동작하는데 그것을 Linux 서버에 올릴 경우 발생하는 에러입니다.

 

처음에 젠킨스를 통해 배포하려 했을 때 어떤 원인으로 뜬 것인지 몰라 몇 주간 고생했던 적이 있습니다.

몇 주간 고생 끝에 발생했던 원인을 찾을 수 있었는데 윈도우 환경에서는 대,소문자 구분을 하지 않아 정상적으로 돌아 갈 수 있었지만

Linux 환경에서는 'a'와 'A'가 다른 값으로 인식하기 때문에 발생했던 것이였습니다.

 

이렇게 오늘은 Javascript환경에서 개발 시에 흔하게 접하는 (!) Missing global variable name 에러에 대해 알아보았습니다.

도움 되셨길 바라며, 그 외에도 발생한 원인과 그에 따른 해결 방법이 있으시다면 댓글로 알려주시면 감사하겠습니다.