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 등 사용 가능)
Promise.all() Promise.all() - JavaScript | MDNPromise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫developer.mozilla.org Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환한다.const p1 = Promise.resolve('하나')const p2 = Promise.resolve('둘')const p3 = Promise.resolve('셋')const result = Promise.all([p1,..
reactive()reactive()는 객체 자체를 반응형으로 만든다. reactive()의 반환 값은 원본 객체를 재정의한 프록시(proxy)이다.const raw = {}const proxy = reactive(raw)// 반응형으로 재정의 된 것은 원본과 같지 않습니다.console.log(proxy === raw) // false 원본 객체는 반응형이 아니고, 프록시만 반응형이기 때문에 객체를 Vue의 반응형 시스템으로 작업할 때는 상태를 재정의한 프록시만 사용하는 것이 가장 좋다. 프록시에 대한 일관된 접근이 보장된다.// 객체를 reactive() 한 반환 값과 프록시는 동일합니다.console.log(reactive(raw) === proxy) // true// 프록시를 reactive()한..
문제https://www.acmicpc.net/problem/1094 아이디어2의 거듭제곱인 [ 64, 32, 16, 8, 4, 2, 1] 중 어떤 막대기들로 조합하면 x를 구할 수 있는지를 찾으면 된다. 가장 단순하게 생각할 수 있는 건 반복문을 돌면서 해당 거듭제곱 수와 대소 비교를 통해 막대기의 수를 구할 수 있을 것 같았다.그러나 2진수를 이용하면 더 쉽고 간단하게 문제를 해결할 수 있을 거라는 생각이 들어 이를 채택했다. 풀이# 0 bin()10진수를 2진수로 변경8 → 0b1000 / 24 → 0b11000 (binary를 뜻하는 0b가 함께 출력됨)str()데이터를 문자열로 형 변환.count(sub[, start[, end]])리스트나 문자열에서 특정 요소의 개수를 셀 수 있음탐색을..
문자 키를 눌렀을 때만 발생하던 keypress 이벤트가 deprecated 됐기 때문에 keydown 이나 keyup 이벤트를 통해 문자 입력 이벤트를 감지해야 한다.이때 keydown과 keyup 사이에는 차이점이 조금 존재하기 때문에 쓰임새에 맞춰 적절한 이벤트를 선택하는 것이 필요하다. keydown키를 눌렀을 때 발생모든 키문자, 숫자, 특수 문자, enter 키를 눌렀을 때는 연속적으로 발생그 외의 키는 한 번만 발생 keyup누르고 있던 키를 놓았을 때 한 번만 발생모든 키 목적검색 입력 값만 따로 추출 이때 KeyboardEvent의 key 프로퍼티를 활용하고자 했다. KeyboardEvent: key property - Web APIs | MDNThe KeyboardEvent inter..
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와 비슷한 기능? 상태 관리를 위한 도구라는 점에서..
