중요한 패치가 필요한 프로젝트를 작업중이었는데, 원래 내 브랜치에서 작업할 땐 문제가 없었다. 문제가 터진건 이제 최종 배포를 위해 다른 브랜치로 이동해서 확인 후, 빌드를 했는데... css가 깨지는 현상이 발생했다. 배포된 파일을 보니 내가 추가한 적도 없는 css와 vuetify 태그들이 들어있었는데 소스상에서는 문제가 될 부분이 전혀 없었다. vuetify를 사용하고 있었기 때문에 vuetify와 관련한 문제가 발생했음을 인지하고, 이 문제를 가지고 2일정도 삽질을 했다. 삽질 끝에 결국 package.json과 package-lock.json 관련 문제라는 것을 알게되었다.
1. 문제가 발생한 원인
문제가 발생한 원인은 우선 내가 계속해서 사용하고 있던 브랜치에는 기존에 쭉 사용하고 있던 package-lock.json 파일이 존재했다. 하지만 이동한 브랜치에는 package-lock.json 파일이 없어 npm install을 통해 새롭게 만들어졌다. 새롭게 이동한 브랜치에서 작업할 때, CSS가 깨지고 vuetify 내부적으로 새로운 div가 추가되는 등의 문제는 사용하고 있는 vuetify 버전에 대한 문제였다. 즉, 다시 말해 package.json 안에 기재되어있는 라이브러리들이 기존 버전을 유지하느냐, 다른 버전이 설치되느냐에 대한 문제였던 것이다.
2. package.json vs package-lock.json
package.json 파일은 npm 패키지 설치를 위해 필요한 파일로, 일반적으로 프로젝트의 이름, 버전, 설명, 프로젝트 실행에 필요한 의존성 목록 등이 포함된다. 해당 파일만 있으면 npm install을 통해 해당 파일에 있는 의존성이 자동으로 설치되므로 프로젝트의 의존성을 쉽게 관리할 수 있고, 필요한 패키지들을 쉽게 설치할 수 있다. 반면에 package-lock.json 파일은 npm install과 함께 설치되는 파일로 package.json 파일 패키지들의 정확한 버전 정보를 가지고 있는 파일이라고 생각하면 될 것 같다. package-lock.json의 경우 기존에 이미 가지고 있다면, 그 내부에 명시된 버전으로 그대로 설치가 되지만 해당 파일이 없다면 package.json 내부의 패키지를 다시 설치하기에 기존에 사용하던 버전과 같은 버전으로 설치가 될거라는 보장이 없는 것이다. 그래서 package.json 파일을 확인해본 결과, 문제가 되었던 부분은 package.json 파일 내에서 명시된 버전에 있었다.
3. ^ 기호의 의미와 중요성
아래와 같이 버전 앞에 ^이 붙을 경우 3.0.1 버전 이상이라는 의미가 되는데 자동으로 메이저 버전 번호가 3인 경우 중 가장 최신 버전을 설치하게 된다.
"vuetify": "^3.0.1"그래서 기존에 있던 package-lock.json 파일을 봤을 때는 3.1.6 버전이 설치되어있었지만, 해당 파일이 없는 상태로 npm install을 했을 때는 가장 최신 버전이 설치되며, 의도하지 않은 문제가 발생했던 것이다. 그래서 다른 사람들과 협업을 할 때는 ^가 붙는 버전이 아닌 말그대로 딱 명확한 버전을 명시하는 것이 좋을 것 같다. 그래야 서로 개발을 할 때 동일한 환경에서 개발을 진행할 수 있으니 말이다...
"vuetify": "3.1.6"그래서 결국 기존에 사용하던 버전 정보를 package.json에 명확하게 명시함으로써 어떤 누가 프로젝트를 받아 실행시켜도 동일한 환경에서 개발을 진행할 수 있게 되었다. 2일간의 삽질 끝에 package-lock.json 파일의 중요성과 버전 명시의 중요성을 알게 되었고, 다시 실행시켜도 문제가 없도록 처리해놓았다. package-lock.json 파일의 경우 그냥 npm install을 하면 자동으로 생성되는 파일이라고만 알고 있었지 해당 파일이 어떤 역할을 하는지에 대해서는 잘 몰랐다. 이번 기회에 해당 파일의 용도와 중요성을 알게 되었고, 협업할 때 동일한 환경을 유지하려면 이런 부분도 필요하구나라는 것을 알게 되었다.
