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

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 결과물

Vue 회사에서 바로 다음주에 새 프로젝트를 시작하게 되어 메모 잠시 중단하고 대충대충 쓴것들만 올려놓겠습니다. 그래도 아예 안하진 않고 조금씩 올릴거임 내 Vue Github Repository 학습한 목록 Basic-Without-Vue Without JS Vue 사용해보기 Start-Vue Vue를 이용한 DOM 상호작용 기본 보간법(Interpolation) v-bind 디렉티브 속성 바인딩 Vue의 Method 이해하기 v-html 디렉티브 이해하기 Section2 과제 완료 Events Event Binding 이해하기 Event Binding Method 이해하기 Native Event Object Event Modifier Section3 과제 완료 양방향 바인딩 Computed Prope..