package 버전 문제 (lock 파일의 중요성)

이슈 발췌일: 2022.10.28 (금)

문제 상황

갑자기 Popup의 레이아웃이 깨지는 현상을 발견했다. 확인해보니 Viewport 사이즈 별로 css를 적용하기 위해 세팅해주는 className이 Popup에 세팅되지 않아서 발생한 문제였다.

 

문제 원인 분석

해당 상황이 발생했을 때는 내가 Popup 컴포넌트를 수정하는 작업을 하고 있을 때였다. 그래서 혹시 내가 뭘 잘못 건드렸나 싶어서 지금까지 한 작업을 브랜치를 따서 커밋하고 develop 브랜치에서 확인해보았다. 해당 이슈는 develop 브랜치에서도 발생하고 있었다. 그럼 예전부터 문제가 발생했다는 걸까...? 망했다...근데 다행히도 production에서는 문제가 발생하지 않더라...

 

일단 해당 이슈가 처음 발생한 commit 지점을 찾아야 했다. 현재 프로덕션에서는 해당 에러가 발생하지 않기 때문에 지난 배포 이후로 발생한 문제일 것이다. develop 브랜치에서 의심가는 commit 포인트들로 돌아가서 확인해보았다. 그 다음 처음 이슈가 발생한 commit을 찾아내서 해당 commit 지점으로 checkout 했다.

 

해당 commit에서 작업한 내용은 대충 다음과 같았다.

• 새로운 컴포넌트 작성
• package-lock.json, yarn.lock 파일 삭제
• Popup 컴포넌트 수정

일단 Popup 컴포넌트를 수정한 작업이 있기 때문에, 저 부분을 먼저 살펴 보았다. 수정하기 전 코드로 돌려놓아도 문제는 계속 발생했다. 새로운 컴포넌트 작성이랑 관련있을 것 같지도 않았기에 문제가 난항으로 빠지던 즈음이었다.

 

해당 commit에는 변경사항이 하나 더 있었다. package-lock.json과 yarn.lock 파일을 삭제한 부분이다. 평소에 Pull Request를 보거나 하면 lock 파일 변경사항은 안보고 넘겼기 때문에 이번에도 처음엔 그냥 넘겼다. 근데 다른 변경 사항이원인이 아니라면 이제 남아있는 후보는 lock 파일 변경사항 밖에 없었던 것이다.

 

정확히는 기억이 안나지만 아마 yarn.lock이랑 package-lock.json이 둘 다 있어서 일단 다 지우고 yarn.lock만 다시 생성해서 사용하려는 의도로 지웠던 것 같다. 그리고 나는 이 일을 굉장히 후회하게 된다.

 

한번 확인은 해봐야 하지 않나 싶어서 문제 발생 지점의 바로 이전 commit으로 돌아가서 yarn.lock 파일을 복사해온 후에 문제 발생 지점으로 돌아가서 넣어주었다. 그리고 yarn install을 한 후에 다시 실행해보았는데...문제가 해결되었다.

 

해결 방법 정리

현재 WEB에서는 devextreme이라는 UI 라이브러리를 사용하고 있었다. 최신으로 생성된 lock 파일과 문제 발생 이전 lock 파일을 비교해보니 devextreme 라이브러리 버전이 달랐다. 알고보니 해당 라이브러리의 마이너 버전업이 된 것이 문제였다. (^21.2.3으로 버전을 명시했는데, 21.2.x 버전에서 문제가 발생함)

 

일단 문제 해결을 위해 package.json에 명시된 devextreme 라이브러리 버전을 수정해주었다. 라이브러리의 버전이 21.1.3 >= (라이브러리 버전) < 21.2.0 처럼 되도록 캐럿(^)을 틸드(~)로 바꿔주었다. 아무래도 patch는 버전업 해주는 게 좋을 것 같았다.

 

이슈에 대한 회고

사실 해당 버그 원인 분석 후 배포 준비 하느라 devextreme 21.2.x 버전부터 왜 Popup이 다르게 동작하는지는 제대로 알아보지 못했다. 해당 이슈 로그는 패키지 버전 문제가 중심이라서 자세히 이야기하지는 않았는데, Popup 스타일이 깨지는 이유는 원래 Popup 오버레이 들어가던 className이 Popup 하위 엘리먼트에 들어갔기 때문이다. 해당 부분은 지금 생각해보니 조금 아쉽다.

 

솔직히 lock 파일에 대해 제대로 몰랐고 그냥 협업 시 꼭 필요한 파일이니 repo에 올려야 한다? 정도만 알고 있었다. 이번 기회에 쓴 맛을 한번 보고 lock 파일에 대해 제대로 알게된 것 같아서 나름 뿌듯하다.