에러발생..npm error could not determine executable to run npm error A complete log of this run can be found in: /Users/xxx/.npm/_logs/xxx-xx-17T05_26_44_563Z-debug-0.log tailwindcss 추가하고npm install -D tailwindcss postcss autoprefixer 초기화 진행시..npx tailwindcss init -p 다음과 같은 에러가 발생한다.npm error could not determine executable to runnpm error A complete log of this run can be found in: /Users/xxx/.npm/_l..
프로그래밍
Node 에서는 함수의 종류별 또는 기능별로 별도 파일에 작성해서 필요한 기능을 불러와 사용할 수 있도록 만들었졌다. Node 는 NPM 을 이용해서 필요한 패키지를 설치할 수 있다.이러한 패키지는 필요한 기능을 모듈별로 만들어서 관리한다. 그럼 어떻게 작성하고 불러올 수 있을까 ?기본형식다음과 같은 함수를 만들었고 파일명을 math.js 로 저장했다. function add(a, b) { return a + b;}console.log(add(1,2));$ node math.js>>3잘 실행된다. 불러오기어떻게 불러올 수 있을까? 다음과 같다. 기본형식이다. 작성법module.exports = 함수명(); 불러오기require(파일명); // math.jsmodule.exports = function ..
PostCSS는 CSS를 변환하는 JavaScript 기반의 도구로, 플러그인 시스템을 통해 CSS를 처리하고 변형할 수 있도록 설계된 빌드 도구입니다. 단순한 CSS 전처리기가 아니라, 플러그인 기반의 유연한 CSS 처리 엔진이라는 점이 큰 특징입니다. PostCSS는 기본적으로 CSS를 읽고 변환한 후 다시 출력하는 엔진이며, 다양한 플러그인을 조합하여 기능을 확장할 수 있습니다. PostCSS 주요 기능1. 자동 접두사 추가 (Autoprefixer)/* 입력 */.foo { display: flex;}/* 출력 (Autoprefixer 적용) */.foo { display: -webkit-flex; display: -ms-flexbox; display: flex;}Autoprefixer ..
/src ├── /composables │ ├── useCommon.js │ ├── useExtra.js │ ├── useUser.js │ ├── useProduct.js ├── /components │ ├── MyComponent.vue {{ message }} 인사하기 작별 인사 사용자: {{ userName }} 이름 변경 상품 목록 {{ product.name }} 상품 추가 같은 이름의 함수 처리방법 (충돌방지)1. 이름 변경 // 별칭을 사용하여 함수 이름 변경 const { greet: commonGreet } = useCommon(); const { greet: ..
🔥 Vue 2에서는 Mixins 사용이 유용하지만, Vue 3에서는 Composition API (setup())를 추천! ✅ Mixins 장점✔ 여러 컴포넌트에서 동일한 기능을 쉽게 재사용 가능✔ 라이프사이클 훅, 데이터, 메서드까지 포함 가능 ❌ Mixins 단점✔ 데이터 및 메서드 충돌 가능 (우선순위 문제 발생)✔ 코드의 출처가 명확하지 않아 유지보수 어려움✔ Vue 3에서는 Composition API가 더 선호됨 Mixins는 Vue.js에서 코드의 재사용성을 높이기 위해 사용되는 기능이다. 여러 컴포넌트에서 공통적으로 사용되는 로직(예: 데이터, 메서드, 라이프사이클 훅 등)을 하나의 mixin 파일로 정의하고, 이를 필요한 컴포넌트에서 mixins 옵션을 통해 포함할 수 있다. 공통 ..
1. if () {} 2. &&{ cars.length && { cars.length } } 3. condition ? A : B (참이면 A, 거짓이면 B)
React Components 는 항상 HTML 문서를 반환한다. 이때 JSX 문서 형식을 이용한다. 클릭과 같은 이벤트와 CSS 도 같이 넣을 수 있다. 하나의 완성된 HTML 문서라고 생각하면 된다. 이제 레고에서 하나의 블록을 만들었다고 생각하자. 원하는 모양의 html 문서를 조합하면 된다. 조합된 html 문서는 보였다 안보였다 하면서 화면을 변경한다. React 에서도 JavaScript 와 비슷하게 적용한다. JavaScript Eventonclick="shoot()" React EventonClick={shoot}
시나리오 1. useState를 통해서 변수에 값을 저장하고 변경할 수 있었다. 2. 변수가 언제 변경되는지 알 수 있을까?3. 이때 필요한 것이 useEffect 이다. 4. 변수가 변경될 때마다 useEffect 는 동작한다. (fetch, timer 에서도 감지한다.) 변화에 대한 감지를 다음과 같이 구분할 수 있다. 1. 모든 변화에 대해서 감지2. 특정 변수에 대해서만 감지3. 처음 한번만 감지 사용형식useEffect(, ) # 모든 변화에 대해서 감지함.import { useState, useEffect } from "react";const [count, setCount] = useState(0);useEffect(()=>{ console.log('감지');}); setCount(count..
$attrsv-model = "form.name"v-bind="{ ...$attrs, class: null}"modelValue@input="$emit('update:modelValue', $event.target.value)" TextInput.vue (컴포넌트) {{ label }}: {{ error }} {{ $attrs }} Parents.vue (부모 컴포넌트) focus 랜더링 결과 [코드 분석해 보기] v-bind="{ ...$attrs, class: null }" 의 최종 랜더링 코드는{ "class": "pb-8 pr-6 w-full lg:w-1/2", "content": "content" } 이다..
... 점3개로 표현되는 Spread Operator 가 나온 이유는 배열 또는 Object 복사를 손쉽게 하기 위해서다. - 모든 괄호를 없애주는 기호- 대괄호 또는 중괄호를 제거해 주는 연산자 1. 배열 합치기var a = [1,2,3];var b = [4,5];var c = [...a, ...b];c = [1,2,3,4,5] 배열은 참조가 변수에 저장되기 때문에 값을 복사하기 위해서는 실제 데이타를 복사해야 하는데, 이를 손쉽게 만들수 있다. 2. 객체 합치기const a = { name: 'kim', age: 30,}const b = { address: 'Seoul',}const c = {...a, ...b} const c = { name: 'kim', age: 30, address: 'Se..
공식링크 : https://devtools.vuejs.org/getting-started/introduction 3가지 방법 제공. 크롬 확장프로그램 설치 링크 :https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?utm_source=ext_sidebar Vue.js devtools - Chrome 웹 스토어DevTools browser extension for Vue.jschromewebstore.google.com 크롬을 다시 껐다가 켜면 Vue 메뉴가 보인다.
기본 레이 아웃은 여러개의 slot 을 사용할 수 없다. [시나리오1]기본 Layout > MainLayout.vue 으로 사용한다. app.js 파일 내용import './bootstrap';import { createApp, h } from 'vue'import { createInertiaApp } from '@inertiajs/vue3'import MainLayout from './Layouts/MainLayout.vue'createInertiaApp({ resolve: name => { const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) const page = pages[`./Pages/${name}.vue`] ..
