Vue 3 Composition API 지금까지 배운 Option API에서는 data, methods, computed property, watcher등을 사용했습니다. Composition API란 컴포넌트를 작성하는 2가지 방법 중 하나일뿐 Option API 보다 무조건 좋은건 아닙니다. Composition API를 사용하는 이유 Option API는 필요한 데이터 프로퍼티, 함수, 연산 프로퍼티 등등이 각 컴포넌트마다 전부 다 분산되있거나 중복 로직이 발생 Option API는 컴포넌트 로직의 재사용이 까다롭다. Option API 로직을 여러가지 옵션 (data, methods 등)에 나누어 놓는 방식 // Option API data() { return { name: 'Max&#39..

Vue Router Vue Router 패키지 설치 npm i vue-router@next --save 그리고 main.ts 파일에 Router를 Import 해줍니다. import { createApp } from 'vue'; import { createRouter } from 'vue-router'; // Import Router import App from './App.vue'; const app = createApp(App) const router = createRouter({ routes: [] }); app.mount('#app'); 위 코드에서 router 변수에 createRouter() 라는 함수를 사용했습니다. 이 함수의 첫번째 ..

Native Fetch API를 이용한 HTTP Request 전송 Vue에서는 Javascript 내장 함수를 이용한 방법과, Axios를 이용해 HTTP Reqeust를 보낼 수 있습니다. Javascript 내장 함수를 이용한 방법에는 fetch 함수가 있습니다. 데이터를 Fetch 하는 역할도 있지만 서버로 데이터를 전송도 하는 함수입니다. fetch 함수와 Axios는 첫번째 파라미터로 URL을 받고 내부에서 HTTP 요청을 보냅니다. URL로는 Firebase의 Real-Time Database를 사용하였습니다. Firebase URL 뒤에 임의의 URL 명과 json 확장자를 붙여줍니다. 임의의 URL로 요청을 전송하면 Firebase에서 그에 맞는 API를 자동 생성해줍니다. fetch(&..

추가한 학습 목록을 배열에서 삭제하기를 구현합니다. 저번에 봤던것처럼 TheResource.vue 컴포넌트가 동적 컴포넌트로 연결되있기 때문에, 커스텀 이벤트를 발생시켜서 처리를 못하고, 직접 함수를 작성해야 합니다. TheResources.vue removeResource 함수와 provice에 deleteResource를 추가해주었습니다. methods: { setSelectedTab(tab) { this.selectedTab = tab; }, addResource(title, description, url) { const newResource = { id: new Date().toISOString(), title: title, description: description, link: url }; /..

Custom Dialog를 이용한 Validation 사용자에게 입력값을 Form으로 받아 배열에 추가 후 출력하는것 까지 했었습니다. 그런데 이 입력폼은 공백을 제출해도 추가가 되게 되어 있기 때문에 입력값에 대한 검증을 해야 합니다. 이때 이용할 방법으로는 저번에 배웠던 Dialog를 이용한 검증을 수행하는겁니다. AddResource.vue 그럼 입력폼을 받는 컴포넌트인 AddResource에 검증 함수를 만들어야겠죠. 아직 Dialog 컴포넌트를 만들지 않았으니 if 조건문만 추가해줍니다. submitData() { const enteredTitle = this.$refs.titleInput.value; const enteredDesc = this.$refs.descInput.value; cons..