package 버전 관리의 중요성 및 논의거리

[minsour]

이 글은 금일(05.13) 오전에 발생했던 이슈에 대해 알려드리고, client에 설치된 node_module 중 next-redux-wrapper 에 대해 논의할 게 있어서 작성합니다.

아침에 눈을 뜨고 어제 그림님과 민지님과 했던 회의를 정리하기 전에, 올라와 있는 다은님의 PR부터 리뷰를 좀 하고 가려고 해당 branch로 checkout을 했습니다. 그때까지만 해도 참 평화로운 아침이었는데..

문제의 발단

커밋 로그를 어느 정도 보다가 실행시켜보려고 npm install 명령어를 쳐서 package들을 설치 후 실행을 했습니다.

localhost:3000 으로 접근하려고 하자 TypeError가 뜨면서 실행이 안됐습니다.

뭐지 싶어서 다은님께 DM을 보내서 내 로컬에서만 안되는건지 여쭤봤습니다.
저만 안되는 것이었고, 다은님과 함께 이 에러를 해결하기 위해 삽질을 시작했습니다.

문제 원인 찾아 삼만리..

1. You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.withRedux(). TypeError: Cannot read property 'getState' of undefined 에러를 읽어보니 createWrapper랑 withRedux를 사용하라는 맥락이었습니다.
   근데 구글링을 해보니 use createWrapper() and wrapper.withRedux()에 대한 레퍼런스가 없었습니다.
   그리고 다은님은 실행이 잘되는 코드와 똑같은 코드를 실행한다는 생각에 이 에러를 깊게 생각해보지 않았습니다. 젠장.

2. 그래서 에러 메세지를 사뿐히 패스하고 나름의 원인을 파악하기 위해 오류가 발생하기 시작한 커밋 위치를 찾아보았고, redux 관련 베이스 코드가 작성된 시점부터 에러가 나는 걸 확인했습니다.

3. 다은님과 저는 코드 문제는 아닌것 같고 react-redux의 버전 문제가 아닐까요? .env 디렉토리에 뭔가 잘못 된게 아닐까요? 등등 나름의 추측들을 하며 여러 시도를 했습니다.

4. 하지만 결국 해결할 수 없었고 다시 에러 메세지를 구글링 하기 시작했습니다.

5. 저는 도대체 createWrapper랑 withRedux가 어디있는거냐면서 설치되어 있는 라이브러리를 뒤지기 시작했습니다. 그 둘은 next-redux-wrapper 라이브러리에 있었습니다. 근데 우리 프로젝트에서는 withRedux만 사용하고 있었습니다.

6. next-redux-wrapper github repo에 들어가 readme 파일을 보니 createWrapper랑 withRedux를 같이 사용하는 예제가 작성되어 있었습니다. 순간 느낌이 왔습니다..ㅎㅎ

7. 제발 next-redux-wrapper 업데이트가 최근에 됐길 바라면서 npmjs에 접속해 버전 로그를 확인해봤습니다.
   확인 결과 바로 어제인 2020.5.12 오전 06:18:32에 새 버전이 배포되어 있었습니다. 소름.. 그리고 readme 파일도 어제 업데이트가 되어 있었네요. ㅎㅎㅎㅎ

8. next-redux-wrapper를 지우고 6.0.0-rc.7 버전으로 다시 설치했더니 해결됐습니다.

결론 및 논의할 것

1. package-lock.json, yarn.lock

제 로컬에 어제 업데이트 된 버전이 설치된 이유는
첫 번째로 패키지의 의존성 트리를 생성하기 위한 package-lock.json이나 yarn.lock 파일이 없었고,
두 번째로 package.json 파일의 dependencies에 next-redux-wrapper 버전이 ^6.0.0-rc.7로 되어 있었고 앞에 ^ 이 붙으면 6.x.x 버전 중 최신버전을 설치하게 되기 때문이었습니다.
아마 다른 분들도 node_modules 삭제하고 패키지 다시 설치하면 같은 에러가 뜰겁니다!(아마도..?)

그래서 보니깐 npm과 yarn 중 사용하는게 다들 다른 것 같던데 우선 npm을 쓸 지, yarn을 쓸지 통일 하는 게 좋을 것 같고, 그에 맞는 package-lock.json이나 yarn.lock도 커밋할 때 같이 올리는 것이 좋을 것 같다고 생각합니다.

2. next-redux-wrapper 사용할 버전 논의

버전 업데이트를 해서 사용할 지, package.json 파일의 dependencies에 next-redux-wrapper 버전에서 ^를 빼고 정확히 6.0.0-rc.7 버전을 사용할 지 정해야 할 것 같습니다.

지금은 일단 버전 업데이트를 해버리면 베이스 코드를 다시 작성해야 하니 6.0.0-rc.7 버전을 사용하는 게 어떨까 싶습니다.

의견 부탁드립니다~!

[uneap]

소름이네요,,,, 제가 생각하기엔 베이스 코드 작성은 그렇게 오래 걸리진 않으므로 가장 최신으로 설정하는 것이 최고 일 것 같습니다ㅎㅎㅎ
제가 작성해서 올리겠습니다!

[minsour]

@jeongdaeun98
넵넵 그럼 저도 버전은 최신버전으로 업그레이드 해놓을게요! 오전부터 고생이 많으시네요ㅠㅠ
그리고 하고 나서 yarn 쓰시면 yarn.lock도 같이 올려주실 수 있나요~?

[uneap]

아녜요ㅎㅎ 민수님도 이슈처리 하시느라 엄청 고생하셨어요!! 넵 그러겠습니다 :)

[withearth]

정말 중요한 이야기가 나왔네요. 💯

1. package-lock.json, yarn.lock
   제 로컬에 어제 업데이트 된 버전이 설치된 이유는
   첫 번째로 패키지의 의존성 트리를 생성하기 위한 package-lock.json이나 yarn.lock 파일이 없었고,
   두 번째로 package.json 파일의 dependencies에 next-redux-wrapper 버전이 ^6.0.0-rc.7로 되어 있었고 앞에 ^ 이 붙으면 6.x.x 버전 중 최신버전을 설치하게 되기 때문이었습니다.
   아마 다른 분들도 node_modules 삭제하고 패키지 다시 설치하면 같은 에러가 뜰겁니다!(아마도..?)
   그래서 보니깐 npm과 yarn 중 사용하는게 다들 다른 것 같던데 우선 npm을 쓸 지, yarn을 쓸지 통일 하는 게 좋을 것 같고, 그에 맞는 package-lock.json이나 yarn.lock도 커밋할 때 같이 올리는 것이 좋을 것 같다고 생각합니다.

[uneap]

2. next-redux-wrapper 사용할 버전 논의
   기존에 사용하던 버전이 현재 deprecated가 되어서 버전 업을 해야할 것 같습니다!
   우선 내일까지는 redux를 사용할 수 있도록 base code를 작성해보겠습니다.
   도움 주실 수 있으신 분들은 같이 도와주신다면 정말 감사하겠습니다 :)

[minsour]

@jeongdaeun98
제가 도와드릴게요! 라인 드리겠습니다 :)

[uneap]

https://github.com/kirill-konshin/next-redux-wrapper/releases
민수님과 현재 라인으로 해결하고 있는데요!
모든분들께도 상황 공유 드립니다.
현재 보다시피 저희 프로젝트에서 사용하고 있는 withRedux가 deprecated되었다고 하여서
다른 방식으로 고치는 중입니다!

[uneap]

[uneap]

우선 이렇게 변경했습니다. 아직 같은 이슈가 나오는 군요,,
그런데 버전 설명 페이지 내에
3. App should no longer wrap its children with Provider, it is now done internally.
5. store is not passed to wrapped component props.
이러한 문구로 인해서 이런 현상이 발생했습니다. 3번을 못봤으면 수정을 못했을 텐데 캐치해주셔서 감사합니다!
따라서

이렇게 변경했더니 다시 잘 됩니다!
next-redux-wrapper가 버전 업을 하면서 더 편리한 방향으로 버전 업했네요 :)

[Seogeurim]

학교 일정 때문에 바빴다 보니, 이슈를 이제야 확인하고 이해했습니다. ㅎㅎ 아이구

당장 어제 새 버전이 배포되고 기존 버전이 deprecated되다니.. 정말 신기하고 재밌습니다 ㅎㅎ
그리고 모두가 말씀해주셨듯이 정말 중요한 이슈네요 ! 알게 해주셔서 감사합니다.
앞으로 협업할 때 아주 중요하게 생각하고 있어야겠습니다.
패키지의 의존성 트리 생성을 위한 package-lock 또는 yarn.lock 파일도 중요하다는 것 꼭 기억하겠습니다!