FE/Nuxt.js12 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 다음 주소 검색 API 사용하기 Nuxt.js 다음 주소 검색 API 사용하기 프로젝트를 진행하다 회원가입을 진행할 때, 결제창에서 주소를 입력받을 때 등 사용자에게 주소를 입력받아야 하는 상황이 생깁니다. (사실 이 부분을 깜빡하고 있다가 급하게 생각나서 찾아보고 만들게 되었네요ㅋㅋ..) 처음에는 행정안전부에서 제공하는 도로명검색 오픈 API를 활용해서 만들 생각이었습니다. 사기업에서 제공하는 오픈 API가 언제 유료화 될 지 모른다는 막연한 생각을 가지고 행정안전부의 도로명검색 API를 찾아 키를 발급받고 테스트를 진행해보았는데 뭐 때문인지는 모르겠지만 발급받은 승인키가 안 먹는 현상이 발생하여 급하게 다음 주소 검색 API를 활용하기로 했습니다. (개발용으로 키를 발급받아서 테스트를 진행했는데 제가 대충해봐서 인지 잘 모르겠지만 .. 2021. 5. 2. 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. Nuxt.js routing 알아보기 Nuxt.js routing 알아보기 Nuxt.js의 정적 페이지와 동적 페이지 예제를 통한 그 안의 여러가지 개념들을 함께 복습 및 공부하려고 합니다. 프로젝트를 진행하면서 많이 사용하는 개념이기도 해서 기록겸 복습겸 쓰고 있습니다. 예제는 주로 공식문서 예제를 사용할 예정이고 필요에 따라 예제를 생성해서 작성하려 합니다. 역시나 제가 알고 있는 부분과 다른 내용이 있거나 수정할 부분이 있다면 댓글로 남겨주세요! Routing 라우팅의 경우 기본적으로 Nuxt에선 와 같이 NuxtLink 태그로 라우팅을 합니다. 기존 Vue.js 라우팅은 아래와 같이 수동으로 설정해줘야 합니다. Hello App! Go to Foo Go to Bar // 0. 모듈 시스템 (예: vue-cli)을 이용하고 있다면, V.. 2021. 4. 23. 이전 1 2 3 다음 728x90 반응형
