개발새발 로그

1. npm i pinia 2. main.ts에서 적용하기 3. 파일 및 폴더 생성 4. 기본 구성 - vuex와 다르게 this를 통해서 값을 가져온다. 5. 기본 사용 방법

배포과정은 간단하므로 패스한다. 아래 과정에서 아래와 같이 입력만 잘 하면 된다. 첫 번째 문제 새로고침했을 때 history API 문제 개발 서버에서는 HTMLAPIFallback옵션을 이용해서 새로고침해도 온전하게 동작하도록했다. 아래 사이트 접속 https://www.netlify.com/blog/2020/04/07/creating-better-more-predictable-redirect-rules-for-spas/ How to Create Better Redirect Rules for SPAs with Netlify Redirects are handy to manage how browsers serve content. Learn how to use Netlify redirects in SPAs..

Vue를 사용해서 프로젝트를 만들다가 생긴 오류이다. 나는 타입스크립트를 사용하지도 않는데 위 같은 오류가 뜬다.. 문제는 안생기는데 오류가 뜨는게 거슬린다. 해결방법 태그가 작성이 안되어 있어서 생기는 오류였다. 태그를 작성하니 오류가 사라졌다. https://stackoverflow.com/questions/70302671/type-class-string-is-not-assignable-to-type-detailedhtmlpropshtmlattri

만약 컴포넌트 태그 사이에 텍스트를 넣게되면 어떻게 될까? 위 처럼 slot 태그를 컴포넌트에서 넣어줘야 컴포넌트 태그사이에 넣었던 텍스트를 출력할 수 있다. 그럼 만약 slot 태그 사이에 텍스트를 넣게되면 어떻게 될까? 만약 컴포넌트태그 사이에 아무런 텍스트도 넣지않게 되었을 때 위에 작성한 텍스트가 사용된다. 이를 Fallback 콘텐트라고 한다. 슬롯에 이름을 지정해서 요소를 나눠서 출력가능! - 위 노란색 오류는 약어를 사용하라는 알림이다. - 아래와 같이 사용한다. 이름을 지정할 때 만약 슬롯이 하나만 있으면 해당 슬롯의 이름은 default이다. 슬롯에 데이터를 지정해 부모 컴포넌트로 끌어올릴 수 도 있다. 이는 Hello 컴포넌트 내에서 해당되는 요소 내에서만 사용가능하다.

현재 컴포넌트에 props 데이터는 아래와 같은 과정으로 데이터를 전달한다. - 이때 props로 받은 데이터를 수정할 수도 없고 수정한다 하더라도 부모 컴포넌트에 영향을 줄 수도 없다. - 이때 살펴본 것이 커스텀 이벤트 방식인 $emit이다! $emit 과정 1. $emit을 등록 후 커스텀 이벤트 이름을 인수로 넣어준다. 2. Hello 컴포넌트에서 해당 이벤트가 발생했을 때 이벤트를 체크할 수 있게 만들어야한다. - 이벤트가 발생하면 reverseMsg라는 함수를 실행한다는 뜻이다. 3. reverseMsg함수를 부모 컴포넌트에서 작성해준다. $emit 사용시 주의 사항 - $emit을 사용할 때는 스크립트 부분에 선언을 해줘야한다. 만약 native 이벤트를 커스텀 이벤트인 $emit에 등록하게..

컴포넌트 태그에 속성을 지정하면 어떻게 될까? - 위처럼 컴포넌트에 요소가 하나만 있으면 정상적으로 적용이 된다. - 하지만 요소가 두 개일 때 적용이 되지 않는다. - 적용을 위해서는 요소에 속성을 명시적으로 지정해줘야한다. - $attrs는 객체, 컴포넌트가 갖고 있는 속성을 가지고 있는 객체다. 만약 모든 속성을 요소가 받는다면 일일이 작성하지 않고 아래처럼 간단하게 사용할 수도 있다. props에 속성이름으로 된 데이터를 작성하게된다면? - attrs는 props를 통해 지정되지 않은 나머지 속성들을 다룬 객체다. - props에서 style을 사용하겠다고 지정했기 때문에 나머지 속성이 아니게 되고, attrs에 들어가지 못한다. 만약 상속된 속성들을 사용하기 싫다면 어떻게 할까?

정적 vs. 동적 Props​ 지금까지는 정적인 값으로 전달된 props 예제들을 보았습니다: 그리고 v-bind(:: 축약어)를 사용하여 동적으로 할당된 props도 보았습니다: 다양한 타입의 값 전달​ 위의 두 가지 예제에서 문자열 값을 전달했지만, 사실 어떠한 타입의 값도 prop로 전달할 수 있습니다. 숫자​ 불리언​ 배열​ 객체​ 객체로 여러 속성 바인딩하기​ 객체의 모든 속성을 props로 전달하려면 인자 없이 v-bind를 사용할 수 있습니다. 예를 들어, post 객체가 주어지면 const post = { id: 1, title: 'Vue와 함께하는 나의 여정' } 다음 템플릿은 다음과 동일합니다 단방향 데이터 흐름​ 모든 props는 자식 속성과 부모 속성 사이에 하향식 단방향 바인딩을 ..

전역 등록​ .component() 메서드를 사용하여 현재 Vue 앱에서 컴포넌트를 전역으로 사용할 수 있도록 할 수 있습니다 import { createApp } from 'vue' const app = createApp({}) app.component( // 등록될 이름 'MyComponent', // 구현체 { /* ... */ } ) SFC를 사용하는 경우, 가져온 .vue 파일을 등록합니다 import MyComponent from './App.vue' app.component('MyComponent', MyComponent) .component() 메서드는 다음과 같이 연결할 수 있습니다: app .component('ComponentA', ComponentA) .component('Compo..