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..

Resource Form 지금까지 더미 데이터를 이용해 Resource를 만들었지만 이제부터 Form을 이용해 사용자로부터 입력을 받아서 Form을 제출해, Resource를 배열에 동적으로 추가해보겠습니다. 하나의 div마다 입력 값을 정해주고 제목, 내용(3줄), 링크를 입력할 수 있는 공간과 제출 버튼을 만들어 주었습니다. 제목 설명 링크 학습 추가 Form 양식 적용 이제 입력은 받았으니 입력값을 배열에 넣어서 출력해보겠습니다. AddResource에서 Custom Event를 발생시켜 상위 컴포넌트로 수신하게 해도 되지만, AddResource 컴포넌트가 동적으로 등록되어 있기 때문에 이 방법은 어렵습니다. 일단 AddResource 컴포넌트에 입력값을 가져올 수 있도록 ref 속성을 사용해줍니..

동적 컴포넌트 및 속성 풀스루 저번에 추가한 App.vue의 더미데이터를 지우고 사용자가 직접 리소스를 입력하고, 배열에 추가하는 로직을 만들어보겠습니다. 그러려면 제목, 설명, 링크를 작성할 수 있는 입력 폼이 필요합니다. 그리고, 버튼을 만들어서 학습을 기록한 목록과 다른 화면을 전환할 수 있게 동적 컴포넌트를 만들겠습니다. 기존 App.vue에 있던 더미 데이터를 TheResources.vue 파일을 만들어 더미 데이터를 옮기고, 이 데이터와 컴포넌트를 이용해 버튼을 누르면 화면 간 전환하는 로직을 짭니다. 그리고, storedResources를 TheResource로 옮기면서 provide/inject를 써서 StoredResource에도 주입해줍니다. 그리고, 커스템 버튼에 클릭 이벤트를 쓰면 ..