Programming/Vue7

• [Vue2] mapGetters로 가져온 값을 watch하는 법 isLogin(newVal, oldVal) { ... } Programming/Vue 2023. 5. 16.

• 

  [Nuxt.js] Vuex state가 변경되어도 자동으로 update되지 않는 layout 컴포넌트 업데이트시키기 Nuxt.js의 경우 layout 폴더에 따로 분류된 컴포넌트들은 Vuex state가 변경되어도 자동으로 업데이트되고 캐싱된 값을 사용한다. 그래서 일종의 강제 리렌더링이 필요하다. 이 때, Nuxt의 $store.subscribe() 함수를 사용해 mutation이 일어날 때마다 말 그대로 그 변화를 '구독'할 수 있다. 그러나, 이 방법은 코드를 더 복잡하게 만드는 방법이므로 computed를 사용할 것을 권장하고 있다. 빠른 시간 내에 업무를 처리하려다보니 이런 코드를 사용하게 됐는데, 간편하고 보기도 좋으며 Nuxt(Vue)의 Lifecycle을 자연스럽게 따라가는 computed를 대신 사용하자! 예시 코드 created() { ... if (this.isLogin) { this.$store... Programming/Vue 2023. 4. 25.

• 

  [Vue3]Quasar와 VeeValidate 함께 쓰기(공식 문서) https://vee-validate.logaretm.com/v3/guide/3rd-party-libraries.html#vuetify Validating 3rd Party Libraries | VeeValidate Validating 3rd Party Libraries There is a good chance, you would be using a UI framework in your Vue.js application, vee-validate is ui-agnostic and works with all types of fields. these examples show how to validate the input components with ValidationPro vee-validate.logaret.. Programming/Vue 2022. 7. 29.

• 

  [Vue3] Pinia 관련 자료 https://www.univdev.page/posts/about-pinia/ Vue3에서 사용되는 상태 관리자, Pinia Pinia Pinia는 Composition API 기반에서 동작하는 상태 관리자입니다. 여태까지 Vue에서 사용되던 가장 보편적이고 유명한 상태 관리자는 Vuex였습니다. 그런데 Vue의 개발자, Even You는 본인의 트위터에서 www.univdev.page https://eggplantiny.github.io/blog/articles/pinia-a-new-statement-manage-plugin/ Pinia - Vuex 를 대체할 새로운 Store! 왜 Vue 에서 가장 중요하고 핵심인 상태관리 플러그인 Vuex 를 뒤로 두고 새로운 Pinia 를 추천하게 된 것일까? P.. Programming/Vue 2022. 7. 25.

• 

  [Vue3] Vue3 관련 자료들 https://joshua1988.github.io/vue-camp/vue3.html#%E1%84%80%E1%85%B5%E1%84%8C%E1%85%A9%E1%86%AB%E1%84%8B%E1%85%B4-%E1%84%86%E1%85%AE%E1%86%AB%E1%84%8C%E1%85%A6%E1%84%8C%E1%85%A5%E1%86%B7 Vue 3.0 | Cracking Vue.js Vue 3.0 새로 등장한 Vue.js Composition API(뷰 3.0)에 대해 알아보겠습니다. 기존의 문제점 복잡한 앱에서 코드 재사용 방법의 한계 가고자 하는 방향 인스턴스 옵션 단위가 아니라 특정 기능이나 논리 joshua1988.github.io https://dev-josh.tistory.com/28 [Vue] Vue.. Programming/Vue 2022. 7. 25.

• 

  [Quasar 공식문서 뽀개기] 30분 영상 튜토리얼 분석하기 Video Tutorials | Quasar Framework The list of video tutorials on Quasar created by the community. quasar.dev SSAFY 2학기 프로젝트에서 CSS 프레임워크로 Quasar를 사용하기로 했다. Vue.js를 기반으로 한 프레임워크로, 팀원의 추천으로 사용하게 되었는데 UI가 깔끔하고 정말 많은 기능을 제공하고 있어 프로젝트에 빠르고 쉽게 적용할 수 있다는 생각이 든다. Quasar 공식문서에서 가장 먼저 만날 수 있는 기능 설명은 위의 튜토리얼 영상이다. 40분이 조금 넘는 길이지만 웹사이트를 만드는 데 핵심적인 기능들을 잘 알려주고 있어 평가가 좋은 것 같다. 영상의 내용은 Quasar를 이용해 TODO앱을 만들고, .. Programming/Vue 2022. 7. 19.

• 

  [Vue 3 + Quasar 2.0] 프론트엔드 개발자에게 필수! ESLint + Prettier 사용하기 ESLint란? Lint는 보푸라기라는 뜻인데 프로그래밍 쪽에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다. 즉 ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미한다. 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일을 유지(포맷팅)하여 개발자가 쉽게 읽도록 코드를 만들어준다. 나는 SSAFY 1학기 프로젝트에서 ESLint를 사용했다고 생각했는데, 사실 확장 프로그램만 설치하고 configuration 해주지 않아서 결국 아무것도 사용하지 않은 꼴이 되었다 ㅋㅋㅋㅋ 나와 같은 실수를 하지 않으려면 글에서 서술하듯 1. ESLint, Prettier npm install 2. VSCode 관련 확장 프로그램 설치 3. VSCode settin.. Programming/Vue 2022. 7. 18.