FE14 Nuxt.js dotenv로 환경 변수 사용하기 Nuxt.js dotenv로 환경 변수 사용하기 Nuxt.js로 개발을 진행하다 보면 production과 development로 분리하고 싶을 때가 있습니다. 물론 환경 분리는 분리하고 싶을 때 분리하는 게 아닌 저는 필수라고 생각합니다. 환경변수들을 개발용 실제 운영용으로 분리하는 것은 개발자체도 용이하게 해 줄뿐더러 보안상에도 좋습니다. 재사용하는 정보들이나 공개되어서는 안될 정보들(DB URL, 각종 Key 값 등)을 편하게 관리할 수 있습니다. 만약 백엔드와 통신을 하는데 하드코딩으로 API EndPoint를 노출한다던지, 중요한 키값을 노출하게 된다면 제 정보 좀 가져가 주세요~라고 하는 것과 같습니다. .env 파일이란? .env파일이나 dotenv파일은 응용 프로그램 환경 변수를 제어하는 .. 2021. 5. 7. 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. 이전 1 2 3 4 다음 728x90 반응형
