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

Vue Component Custom Event (Parent -> Child) 저번에 봤던 Props는 App.vue App 에서 컴포넌트로 전달했지만 이번엔 컴포넌트에서 App.vue App으로 데이터를 전달합니다, props와는 반대 방향이죠. 버튼을 클릭했을떄 이벤트가 발생하듯이 Vue의 컴포넌트도 마찬가지입니다. 컴포넌트가 App.vue App에게 무언가 알리고자 한다면 컴포넌트는 App.vue가 수신할 이벤트를 발생시켜야 합니다. methods: { toogleFavorite() { this.friendIsFavorite = !this.friendIsFavorite; } }; // ----------------------- methods: { toggleFavorite() { this.$emi..

Vue Props 같은 컴포넌트를 사용할 때 서로 다른 데이터를 출력하기 위한 개념이자 일종의 Custom HTML 속성이다. Vue App에 Props를 정의할 때는 카멜케이스, HTML내 Custom Tag에 Props를 정의할떈 케밥케이스 (- 를 이용함)를 사용한다. Props는 Data 프로퍼티와 동일하게 취급되며 배열을 값으로 가질수도 있고, 객체를 가질수도 있다. 팀으로 협업을 한다면 왠만하면 객체를 값으로 가지는게 좋다. props: [ 'name', 'phoneNumber', 'emailAddress' ] 또, Props는 Immutable하기 때문에 단방향 데이터 플로우에 위반하면 Vue App이 실행되지 않습니다. 즉, Custom HTML ..

Vue Component Vue.createApp({ data() ... }).component('second-app', { data() ... template: ` HTML 코드 복붙 ` }).mount() 컴포넌트는 기본적으로 Custom HTML 요소이고 2개의 파라미터를 받는다. 첫번쨰 파라미터는 식별자를 받으며, 무조건 - 과 두 단어로 이어진 Custom HTML Tag를 받는다. 그 이유는 기존의 HTML은 모두 한 단어로 이루어져 있기 떄문에 충돌을 방지하게 위해서이다. 두번째 파라미터는 객체를 받는다. 이 두번째 파라미터는 component()를 호출한 Vue 앱과 캡슐화가 되고, 서로 통신을 하지 않기 떄문에 동일한 프로퍼티가 있어도 충돌이 나지 않는다. 그리고 이 컴포넌..