import 오류... 라이브러리 설치 오류... (인줄 알았던..) 😨

팀 프로젝트에서 야심 차게 alert 창을 이쁘게 변경하고 싶어서 sweetalert2 라이브러리를 사용하고 깃허브에 push 를 했다.

 

근데..? 팀원분들께서 내가 수정 사항을 풀 받으니까 import 오류가 발생한다고 하였다. 설치한 라이브러리가 package.jason 에 잘 들어가있는것을 보니 잘 설치한 것으로 판단했지만... 팀원분들께 yarn add sweetalert2 로 설치해 봐달라고 부탁했지만 여전히 오류가 발생했다. 

 

어쩔 수 없이 일단 내 잘못 같아서 롤백했지만.. 나중에 알게 된 원인은 아래와 같다.

 

원인

원인을 이해하려면 모듈이 설치되는 위치와 gitignore 에 대해서 이해하고 있어야 한다.

 

라이브러리(모듈)를 설치할 때 yarn add 혹은 npm install 명령어로 설치하는데, 설치하는 순간 프로젝트 폴더 중 node_modules 안에 설치가 된다. 그리고 여기 설치된 것을 사용하기 위해서 import 를 하면 이 폴더에 있는 것을 찾아서 import 하는 방식으로 모듈을 사용한다.

 

그러면 설치한 것을 깃허브에 푸쉬하면 다른 팀원들도 import 가 되어야하는데..?? 

 

아니다!! 알고 보니 gitignore 에 node_modules 가 명시되어 있어서 설치된 파일은 깃허브에 올라가지 않는다. node_modules 폴더는 기본적으로 깃허브에 올리지 않는다. 왜냐하면 뭔가 많아서 무겁기때문에!

 

그러면 설치 파일들을 안 올리면 풀받는 쪽은 yarn 혹은 npm install 명령어로 직접 로컬에 설치를 해주어야 한다. 그러면 알아서package.json 기준으로 모듈이 설치된다. 

 

즉, 오류의 원인은 팀원 분들 로컬에는 import 만 코드에 있을 뿐 아직 import 할 모듈이 없어서 발생한 것! 해결 방법은 내가 롤백하는 것이 아니라 내가 모듈을 설치하고 푸시를 했으면 팀원분들께 모듈 설치 안내를 했으면 됐던 것이다.

😵‍💫 이 기본적인 것을 몰랐다니 🤨

 

명령어

이참에 모듈 설치 명령어도 알아보았다.

 

아래는 모듈 설치 명령어이다.

yarn === npm install

yarn add "~~" === npm install = "~~~"

 

yarn 과 npm install 명령어는 같은 행위를 한다. 누군가 모듈을 설치하고 푸시를 했으면 받는 쪽에서는 위의 명령어만 입력하면 된다.

 

 

참고

모듈을 설치하면 변경되는 파일이 있다. 바로 yarn.lock 이다. 

yarn 으로 설치하면 yarn.lock 파일이 생기고, npm install 로 설치하면 package.lock.json 이 생긴다.

 

이 파일의 역할은 모듈들의 버전을 명시해 놓은 파일이다. 하는 일은 이 특정 버전으로 이 프로젝트를 만들어놨으니까, 나중에 다시 빌드하더라도 이 특정 모듈들 버전으로 설치할 수 있도록 해준다.

 

참고로 프로젝트에 yarn.lock 도 있고, package.lock.jsno 이 동시에 있다? 그러면 어떤 개발자는 yarnd 을 사용하고 어떤 개발자는 npm install 을 사용한다는 뜻! ㅋㅋㅋ 될 수 있으면 하나로 통일하는 것이 좋아보이니~ 앞으로 협업할 때 이런 규칙을 미리 정하면 좋을 것겠다고 생각했다.