야훔의 저렴한 개발

Nuxt.js Store기능의 본편이라고 말할 수 있는 "모듈 모드"를 이야기해볼까 한다. 사실 지난번 P.S에도 남겨놨듯 Nuxt.js는 버전 3을 기점으로 Store의 클래식 모드는 지원하지 않는다고 Warning 메시지를 표시하고 있다. 지금이야 뭐 쓸 수 있겠지만 곧 사라질 것이라는 점에서 우리는 모듈모드를 반드시 알아야만 할 것인데 사실 번외편 Vuex를 설명할 때 처럼 모듈모드가 막 어렵거나 하지 않으니 긴장할 필요는 없다. 왜냐하면 Nuxt.js가 알아서 잘 처리해주기 때문이다. 가만 보면 Nuxt.js 참 기특하다. 일단 store/index.js 파일을 수정하자. store/index.js export const state = () => ({ counter: 0 }); export con..

드디어 돌고 돌아서 Nuxt.js 에서 Store의 기능에 대해서 이야기할 수 있게 되었다니! 지난 computed, Vuex 관련 포스팅들, 동기 / 비동기 관련 포스팅까지 머릿속에 스쳐 지나가며 Nuxt.js에 대해 아련함과 감동이 느껴질 정도다. 앞에서 진행한 번외편 Vue.js 강좌들은 모두 Nuxt.js의 Store 기능을 위한 Vuex 라이브러리 관련 강좌였다. 도대체 Store 기능이 무엇이고 Vuex가 무엇이고 이것을 사용하려면 어떻게 써야 하는지에 대하여 알아보는 시간이었다면 오늘은 Nuxt.js에서 Store 기능을 사용하는 방법에 대해서 알아보는 시간을 갖도록 하겠다. 앞서 만들었던 starter-template로 Nuxt.js 프로젝트를 잘 보면 store 디렉토리가 있는 것을 확인..

Nuxt.js에서 Store라는 기능을 이해할 필요가 있는데 그러기 위해서는 일단 Store가 무엇인지부터 알아야 한다. Store는 어플리케이션 전역적으로 어떠한 상태 값을 저장해야할 때 그리고 그 상태를 전역적으로 반영해야할 때 Store 라고 부르는 저장소에 값을 저장한 뒤에 활용할 수 있도록 해주는 기능을 이야기한다. Nuxt.js의 Store는 Vuex 라이브러리를 기반으로 만들어졌고 Vuex에 대해서 알아야 Store에 대한 설명을 이해하기 용이 하겠다 싶어서 선행학습을 진행하는 포스트로 꾸며보았다. Vuex는 일단 ES2015을 기본 문법으로 사용한다. 그러니 일반적인 방법으로는 사용하기엔 조금 애매한 부분들이 있다. 그러니 샘플 페이지 만드는 작업부터 좀 설명해야겠다. 그러면 테스트 할만한..