Vue.js4 Nuxt.js vuex-persistedstate로 화면 새로고침에도 데이터 유지하기 vuex-persistedstate를 통한 화면 새로고침에도 데이터 유지하기 Vue.js든 Nuxt.js든 Vuex를 사용하다 보면 새로고침 시 데이터가 사라지는 것을 확인할 수 있습니다. 이는 Vuex가 JavaScript 레벨에서 데이터를 취급하기 때문에 페이지 새로고침(F5)시 데이터 값이 사라지게 됩니다. 이전 Nuxt.js에서 Vuex Store 사용하기 작성할 때 Vuex에서 데이터가 사라지는 것을 어떻게 해결을 해야할 지 고민했습니다. 구글갓에 검색을 해보고 npm으로 라이브러리를 다운받아 사용하기로 생각했습니다. 그중에 저는 vuex-persistedstate 라이브러리를 사용하기로 결정했습니다. (이것 말고 몇가지 테스트를 해봤는데 별 차이점을 못느꼈습니다ㄷㄷ) 저는 Nuxt.js에서 v.. 2021. 5. 4. Nuxt.js Toast Ui Editor 적용 Toast Ui Editor 적용하기 프로젝트를 진행하다 Nuxt.js에서 텍스트에디터를 사용할 일이 생겨서 이번엔 Nuxt.js에 Toast Ui Editor를 적용하는 방법에 대해 글을 써보려 합니다. 처음엔 Toast Ui Editor가 아닌 Quill Editor나 Summernote를 사용해서 진행해 볼까라고 생각하여 Quill Editor와 Summernote 모두 사용해보았습니다. 3가지 텍스트에디터 모두 사용해보았으나 Toast Ui Editor가 저는 가장 편리하고 기능도 괜찮다고 느꼈습니다. (nhn 만세!!) Quill Editor의 경우 심플하지만 모든 기능을 다 직접 구현해야 하는 번거러움이 있었고 Summernote는 자세히는 써보지 않았지만 저는 딱히 매력을 느끼지 못했습니다... 2021. 4. 26. Vue.js Computed, Methods, Watch 비교 Vue.js Computed, Methods, Watch 비교 Nuxt.js로 개발을 하거나 공부를 할 때, Vue의 개념은 필수적입니다. 저는 Nuxt로 개발을 시작할 당시 Vue.js로 딱히 프로젝트를 진행해보지도 않았고, 개념정도만 알고 있는 그 정도였습니다. (약간 몸으로 부딪히며 배우는 스타일..) 그래서 Nuxt로 처음 프로젝트를 진행할 때, 중간 중간 Vue.js 개념도 다시 살펴보고 같이 공부하면서 진행했습니다. 물론 처음 Nuxt.js 기술검토할 때 Vue.js와 어떤 점이 다른지, 어떤 점이 편해졌는지 등은 공부했습니다. (Nuxt.js는 자료가 너무 부족하여 굉장히 힘들었습니다...) 이번엔 Vue.js의 비슷하지만 다른 3가지 개념을 포스팅 하려고 합니다. 혹시나 알고 계신 것과 다.. 2021. 4. 9. Nuxt.js 란? (feat. SSR, CSR) 이미 나도 이 프레임워크로 개발을 진행하고 있는 상태이기 때문에 다시 정리도 하고, 기본적인 내용들을 상기하고, 글로 남겨두기 위해 작성하였다. Nuxt.js 란? Nuxt.js는 Vue.js 애플리케이션 개발을 보다 강력하고 사용하기 쉽게 만들어 주는 프레임워크이다. 개발자들은 조금 더 빠른 개발 속도를 위해 Vue.js를 빠르게 적용하는 방법을 고안했고, 이를 프레임워크로 만들었다. Nuxt.js의 등장 배경 Nuxt.js 나 Next.js 같은 SSR Framework가 왜 등장했는가에 대해 짚고 넘어가기 위해서는 SPA와 CSR, SSR에 대한 차이를 명확히 짚고 넘어갈 필요가 있다. SPA (Single Page Application) SPA는 Web Application을 Single Page.. 2021. 4. 9. 이전 1 다음 728x90 반응형
