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 앱과 캡슐화가 되고, 서로 통신을 하지 않기 떄문에 동일한 프로퍼티가 있어도 충돌이 나지 않는다. 그리고 이 컴포넌..

Monster Slayer Game 만들기 이번엔 몬스터와 전투하며 여러 선택지 중 할 행동을 고르는 작은 게임을 만들어 보겠습니다. 어떤 일이 있었는지 보여주는 전투 기록 기능도 넣을 겁니다. 가장 중요한 것은 이 게임을 만들면서 지금까지 학습한 모든 Vue 핵심 기능을 사용하겠습니다. Interpolation, v-bind, v-on, v-model을 사용한 데이터/이벤트 바인딩 v-for를 사용해 데이터 목록 출력 v-if를 사용한 Conditional Contents 등등 배운 모든것을 활용 위 사진과 같이 나와 적의 체력, 공격, 특수공격, 회복, 항복, 전투 기록의 틀을 기반으로 Vue와 Javascript를 이용해 브라우저 기반 웹 게임을 만들어 보겠습니다. Attack 기능 체력이 감소하는..