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 기능 체력이 감소하는..

Indexing v-for 디렉티브는 배열 내 항목을 반복 출력하는 기능 외에 다양한 데이터를 출력할 수 있습니다. 예를 들어, 배열 내 항목의 인덱스도 출력할 수 있습니다. {{ goal }} - {{ index }} 이렇게 설정하면 Goal1 - 0, Goal2 - 1 이런식으로 인덱스 번호까지 같이 출력할 수 있습니다. Object Looping 그리고 배열 외에도 루프를 걸 수 있습니다 (ex: 객체) 지금 goals는 배열이기 떄문에 배열에 loop를 걸었지만 객체에 loop를 걸 경우도 있을 겁니다. {{ value }} 위 코드에서 객체를 간단하게 HTML 내에서 선언했지만 실무라면 객체는 Javascript App으로 옮기는것이 좋습니다. v-for를 이용해서 프로퍼티에 있는 여러 값을 출..

Conditional Rendering 이번엔 컨텐츠의 조건부 렌더링에 대해 배워보겠습니다. 특정 조건을 만족할 때 페이지의 일정 부분이 렌더링 되도록 하고 컨텐츠 목록을 출력하는 방법을 알아볼겁니다. 예를 들어 강의 목표, 상품 목록 등 동적 렌더링이 필요한 부분을 작업해 볼겁니다. 그리고 목록이 늘어나면 새 항목이 렌더링 되고, 목록이 줄어들면 항목이 제거될 겁니다. 학습할 목록 렌더링 할 상품이 없을때 특정 텍스트를 표시할 수 있는 Vue 도구 데이터 목록을 출력하는 방법 Vue 내부 동작 과정의 이해와 중요한 최적화 방법 1가지 (데이터 목록을 출력할 때 사용) 구현 지금 위 페이지에선 Input에 입력값을 넣고 Add Goal을 눌러도 아무런 반응이 없는 상태입니다. 이제 해볼것은 입력값을 넣고..

만들어보기 배운것을 활용하여 만들어 볼 페이지는, 사용자로부터 입력을 받아 CSS 클래스와 인라인 스타일을 적용하여 문단을 스타일링하고, 버튼을 클릭하여 문단을 보이거나 숨기는 기능을 구현합니다. 사용자 입력을 CSS 클래스로 적용하는 기능 사용자는 요소를 통해 텍스트를 입력할 수 있습니다. 이 입력은 v-model 디렉티브를 통해 inputClass 데이터 속성과 양방향으로 바인딩됩니다. 사용자가 입력한 클래스명은 아래의 요소에 바로 적용됩니다. 즉, 사용자가 입력한 클래스를 paraClasses 계산된 속성을 통해 Vue에서 적절한 클래스로 연결합니다. 가능한 클래스는 "user1"과 "user2"입니다. 버튼을 클릭하여 문단을 보이거나 숨기는 기능 "Toggle Paragraph" 버튼을 클릭하면 ..