Nuxt 적응...중 맞닥뜨린 문제

서두

기존 Next.js로 만들던 프로젝트를 Nuxt로 마이그레이션 하는 도중 상태관리 관련 이슈를 만났습니다.

큰 이슈는 아니지만 공식문서에서 찾아보지 않고, GPT와 블로그를 따라했던 저를 반성하며... 어떤 실수를 했고, 어떻게 고쳤는지 적어보겠습니다.

 

본문

먼저 제가 실수했던 부분은 store 폴더를 살펴볼 생각을 안하고 구글에 'Vue 상태관리', 'Nuxt 상태관리'를 검색하고, 라이브러리를 설치하는 블로그만 찾아봤습니다. 그러고 Vuex가 많이 사용된다는 글을 보고 무작정 설치부터 했습니다.

당연히 설치되겠지 했지만 npm install을 하면 에러가 났습니다.(여기서 멈췄어야 했는데...)

Nuxt2여서 다운그레이드 해야하나? 라는 생각과 함께 GPT에게 물어봤습니다.

 

나: npm install 하니까 에러만 뜨고 설치가 안되는데?

GPT: 아마 Nuxt2라서 그런듯~ npm install --legacy-peer-deps 해봐~! 😄

 

바보같이 무작정 따라서 하다보니 결국엔 npm install이 안되는 에러로 번졌습니다.

그렇게 몇 시간을 더 해보다가 도저히 안되길래 자문을 구했습니다.

 

???: 저는 10년을 개발하면서 legacy-peer-deps 나 force는 딱 한 번 써봤어요. 그것도 React Native 버전 업그레이드때문에...

 

그렇습니다. 저는 10년에 한 번 할까 말까한 명령어를 아무 생각없이 사용했고, 그 결과 기본적인 npm install이 안되는 문제로 까지 번졌습니다.

 

차근차근 잘못 밟아온 단계를 다시 되돌아가기 시작했습니다.

일단 legacy-peer-deps를 사용해서 강제로 설치했던 Vuex를 지우고 다시 npm install을 했습니다.

다행히 npm install이 잘 되었고, 그 후 Nuxt2 공식문서를 봤습니다.

https://v2.nuxt.com/docs/directory-structure/store/

Store directory

 

Nuxt2에는 store라는 폴더가 있는데 이 폴더에 Vuex Store 파일이 자체적으로 설치되어 있어 따로 Vuex를 설치하지 않아도 됐습니다.
(심지어 store 폴더의 README.md만 읽어봐도... 알 수 있는데...)

 

결미

Nuxt를 공부하면서 필요할 때 공식문서와 블로그, GPT를 번갈아가면서 봤지만 결국 처음 공부를 할때는 역시 공식문서를 믿고 따라가야겠습니다...