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에도 주입해줍니다. 그리고, 커스템 버튼에 클릭 이벤트를 쓰면 ..

Base Button Components 학습 기록 앱에 쓰일 기본 버튼 Component를 추가해보겠습니다. props중 type 프로퍼티는, 버튼의 타입을 받아서 타입마다 다른 CSS를 적용할 수 있게 Style을 해두었습니다. (ex: 마우스를 올릴 시 다른 CSS 적용) mode 프로퍼티는 CSS의 Class 명을 받아서 mode에 바인딩 해줍니다. 그리고, 버튼에 들어갈 컨텐츠는 당연히 외부에서 받아야 하므로 slot으로 받습니다. BaseButton.vue 그리고, 이 기본 버튼도 다른 컴포넌트들에서 계속 사용할 것이기 떄문에 전역 컴포넌트로 등록해줍니다. main.js import { createApp } from 'vue'; import App from './App.v..

UI Components 이제 UI 컴포넌트들 만들어보겠습니다. BaseCard라는 컴포넌트를 만들고 scoped 스타일링을 적용해서 원하는 HTML 요소에 slot을 달면 적용됩니다. BaseCard.vue {{ title }} 그리고 전에 작성한 LearningResource.vue 파일의 div 태그를 base-card 태그로 바꿔주면 Card의 CSS가 적용됩니다. {{ title }} Delete {{ description }} View Resource 그리고, 이 UI 컴포넌트는 LearningResource 컴포넌트 뿐만 아니라 다른 컴포넌트에서도 사용할 것이므로, Local 컴포넌트가 아닌 Global 컴포넌트로 등록 할겁니다. main.js import { createApp } from ..

Learning Resource + Styling App.vue는 Root Component이기 때문에 Template에 최대한 MarkUp이 없게 만들어야 합니다. Data 프로퍼티에 더미 데이터 배열을 만들고 그 데이터를 Stored-Resource로 넘겨주고, Stored-Resource는 배열을 받고 순회 하면서 데이터를 Learning-Resource로 바인딩합니다. Style 부분은 전역 스타일 설정은 왠만하면 App.vue에 지정하고 나머지 컴포넌트들에는 scoped style을 적용하였습니다. App.vue LearningResource.vue {{ title }} Delete {{ description }} View Resource StoredResources.vue 결과물