primevue는 vue에서 많이 쓰이는 UI 라이브러리이고, 문서가 깔끔하게 잘 되어있다는 장점이 있다. 특히나 pass through를 이용해 css 커스텀을 쉽게 할 수 있는 것도 굉장히 편리하다. primevue 설치npm install primevuenpm install --save-dev @primevue/nuxt-module// stylednpm install @primevue/themes nuxt.config.ts 파일에 모듈 등록export default defineNuxtConfig({ modules: [ '@primevue/nuxt-module' ], primevue: { /* Configuration */ }}) 기본 테마 쉽게 사용..
Vue
nuxt/ui 설치 npm install @nuxt/ui @nuxtjs/color-mode @nuxt/icon 💥 설치 시 Error가 발생했다!![vite-node] [ERR_LOAD_URL] #tailwind-config/theme/colors 참고 링크→ Tailwind CSS and Nuxt UI의 충돌로 발생한 에러라는 뜻 만약 이 에러가 발생했다면 defineNuxtConfig 내부의 모듈 정의 순서를 바꿔주면 된다.// @nuxt/ui가 앞에 위치해야 한다.modules: ["@nuxt/ui", "@nuxtjs/tailwindcss"],그리고 애초에 nuxt/ui를 쓸거면 따로 깔 이유가 하등 없다…나는 tailwind를 먼저 설치해서 그런거였다ㅜ
ESLint코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구JS코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구 (에러 표시)다양한 방식으로 구현할 수 있는 코드 방식을 일관성있게 구현할 수 있도록 잡아준다.처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있다. ESLint Module - Nuxt ESLintAll-in-one ESLint integration for Nuxt. It generates a project-aware ESLint flat config and provides the ability to optionally run ESLint check along side the dev..
computed()반응형 데이터를 포함하는 복잡한 논리를 표현할 때 사용하는 계산된 속성 계산된 ref를 반환하기 때문에 computed 값 또한 .value를 통해 접근한다. (템플릿 표현식에서는 .value 없이 참조 가능) computed는 해당 computed 값이 의존 중인 반응형 데이터 ref, reactive 등의 변경을 자동으로 추적한다. computed는 의존된 반응형을 기반으로 캐시된다.const scores = ref([100, 80, 88, 50, 70, 90, 96])const average = computed(() => { const sum = scores.value.reduce((sum, item) => (sum += item), 0) return sum / scores.v..
어떤 것을 사용해야 할 지 고민하다가 정리했다. 공식 문서에서 분명하게 잘 설명해줬기 때문에 이를 좀 더 확실히 기억하고자 테스트해봤다. v-ifv-if 문의 경우 조건의 성립(True / False) 여부에 따라 요소의 렌더링 여부가 결정된다. v-showv-show의 경우 조건 결과와 관계없이 태그를 렌더링하지만, False의 경우 display: none 처리를 통해 보이지 않게 한다. 결론적으로,→ 보였다/ 안 보였다 빈도가 많으면 v-show→ 조건이 여러 개면 v-if (v-else-if, v-else 등 사용 가능)
reactive()reactive()는 객체 자체를 반응형으로 만든다. reactive()의 반환 값은 원본 객체를 재정의한 프록시(proxy)이다.const raw = {}const proxy = reactive(raw)// 반응형으로 재정의 된 것은 원본과 같지 않습니다.console.log(proxy === raw) // false 원본 객체는 반응형이 아니고, 프록시만 반응형이기 때문에 객체를 Vue의 반응형 시스템으로 작업할 때는 상태를 재정의한 프록시만 사용하는 것이 가장 좋다. 프록시에 대한 일관된 접근이 보장된다.// 객체를 reactive() 한 반환 값과 프록시는 동일합니다.console.log(reactive(raw) === proxy) // true// 프록시를 reactive()한..
watch Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org하나 이상의 반응형 데이터 소스를 감시하고, 소스가 변경되면 콜백 함수를 호출한다.watch()는 기본적으로 게으르기(lazy) 때문에, 감시된 소스가 변경되었을 때만 콜백이 호출된다. 첫 번째 인자 → 감시될 소스값을 반환하는 getter 함수ref반응형 객체또는 위에 나열한 것들의 배열※ 반응형 객체의 속성(number, string 등)은 감시할 수 없다. 두 번째 인자 → 콜백콜백의 인자변경된 값이전 값사이드 이펙트 클린업 콜백을 등록하기 위한 함수 세 번째 인자(optional) → 옵션 객체immediate: 감시자가 생성되는 즉시 콜백 호출deep: 소스가 객체인 경우, 깊은..
ref()composition API에서 반응형 상태를 선언 시 권장하는 방법import { ref } from 'vue'const count = ref(0) 템플릿에서 ref를 사용할 때는 .value 를 추가할 필요가 없다. 편의상 ref는 템플릿 내에서 사용될 때 자동으로 언래핑된다.이벤트 핸들러에 직접 참조를 변경할 때도 .value 가 불필요하다.pluscount : {{ count }} 다만 이벤트 핸들러에 따로 정의한 함수를 바인딩하여 ref를 변경할 경우, 스크립트에서 .value 는 필요하다.pluscount : {{ count }}const plusCount = () => { count.value++} 🔎 react의 useState와 비슷한 기능? 상태 관리를 위한 도구라는 점에서..
vue의 반응성 시스템을 공부하며 찾아 본 내용이라 vue에 조금 치중되어 있습니다… 공통점1. 선언적 방식으로 UI를 업데이트 한다.개발자는 데이터가 바뀌었을 때 어떤 식으로 UI가 바뀌는지를 명시하는 대신, 데이터와 UI 간의 관계를 설정하면 내부에서 알아서 UI를 갱신해준다. 2. Virtual DOM 사용데이터가 변화하면 실제 DOM을 바로 업데이트하는 대신 가상 DOM을 먼저 계산하여, 변경된 부분만 실제 DOM에 적용하는 방식으로 성능을 최적화한다. → reconciliationhttps://ko.vuejs.org/guide/extras/rendering-mechanism#virtual-dom 3. 컴포넌트 기반각 컴포넌트는 자체적인 상태를 가지고 있으며, 그 상태가 변할 때 UI를 갱신한..
Vue 2의 한계Vue 2에서 사용된 Object.defineProperty 는 객체의 각 속성에 접근할 때마다 getter와 setter를 설정하여 반응성을 제공하는 방식이다.해당 방식은 몇 가지 한계를 가지고 있다.새 속성 추가 : 이미 존재하는 속성에 대해서만 반응성을 적용할 수 있기 때문에, 객체에 새 속성을 추가하거나 배열의 특정 항목을 변경하는 경우 반응성을 처리하지 못했다.배열 처리 : 배열의 특정 인덱스 변경이나 크기 조작도 반응성 시스템에서 추적되지 않는다.성능 문제 : 큰 객체의 모든 속성에 일일이 getter와 setter를 정의하는 방식이므로, 특히 중첩된 객체 구조에서는 성능과 메모리 사용량 면에서 부담이 있었다. Vue 3에서의 Proxy 기반 반응성 구현Vue 3의 반응성 시..
