본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section8] 103. 잠재적인 문제점 App.vue 컴포넌트를 보면, ActiveElement 컴포넌트와 KnowledgeBase 컴포넌트를 렌더링하고 있다. App.vue에서는 이 두 props를 activeTopic에 기반해 active-element에 제공한다. activeTopic은 컴포넌트 내부 데이터이고, 초깃값은 null이다. activateTopic 메서드가 트리거되면, activeTopic을 topic 배열에 있는 두 topic 중 하나로 설정한다. activateTopic은 topicId를 수신하고, 해당 id를 topics 배열에 포함된 두 topic 중 하나를 식별하는데 사용한다. select-topic 이벤트는 knowledge-base 컴포넌트에서 발생(emit)한다. select-topic 이벤트가 발생하면 act..
[Udemy Vue 완벽가이드 Section8] 102. 데모: 더 많은 컴포넌트 통신 추가하기 이번에는 친구 삭제 작업을 해보자. FriendContact.vue 컴포넌트에 새로운 버튼을 추가하자. 클릭을 수신하면, deleteFriend 메서드를 트리거하도록 하자. Delete deleteFriend(){ this.$emit('delete', this.id); } 위와 같이 작성해도 되고, 별도의 메서드를 사용하지 않고 template에서 바로 $emit을 호출하면 된다. (아래 코드 참조) (이벤트에 바인딩 할때는 메서드를 가리켜 메서드를 실행하거나, 다른 기본 JS 코드를 실행할 수 있다.) template에서는 항상 그렇듯이 this키워드는 없어도 된다. Delete 별도의 메서드를 사용하든, template에 바로 $emit을 호출하든 delete 이벤트가 있다는걸 표시하기 위해 emit..
[기본] 시간복잡도 Time Complexity ## 알고리즘이란? 알고리즘 : 문제해결방법 예시 : 숫자가 적힌 5개의 공이 있다. 5개의 공을 오름차순 정렬을 하려고 한다. 어떤 방법으로 정렬을 완료할 수 있을까? 1/ 가장 작은 숫자가 적힌 공을 찾자 → 1 이 공을 맨 앞에 둔다. → 1 | 3 5 2 4 2/ 나머지 4개의 공(3 5 2 4) 중, 가장 작은 숫자가 적힌 공을 찾자 → 2 이 공을 두 번째 자리에 둔다. → 1 2 | 3 5 4 3/ 이 과정을 나머지 공들에도 반복하면 정렬이 완료된다. 정리해보면, 문제상황 : 공 5개를 오름차순 정렬 해결방법 : ' 알고리즘 ' 가장 작은 숫자를 찾아 서 맨 앞에 놓는다. 남은 공들에 대해서 (1) 방법 반복 위 말로 풀어쓴 알고리즘을 코드로도 작성할 수 있다. ## 실행시간 이 알고리즘을 ..
[Udemy Vue 완벽가이드 Section8] 101. 데모: 컴포넌트 추가 및 연결하기 컴포넌트, props, 커스텀 이벤트에 대해 많이 공부하였다. props는 컴포넌트에 데이터를 '보내기' 위해, 이벤트는 컴포넌트로부터 데이터를 '내보내기'위해 존재한다는게 핵심 포인트. App.vue 파일에서 friends 데이터 프로퍼티는 정적이다. 친구 두명의 배열인데다, isFavorite을 변경할 수는 있지만 친구를 추가하거나 삭제할 수는 없다. # 동적으로 friend 추가하기 먼저 name, phonenumber, emailaddress 등의 friend 데이터를 입력할 새 컴포넌트를 만들어보자. 그리고 해당 데이터를 확정하고, friends 데이터 프로퍼티에 추가해보자. 많은 로직이 포함된 큰 Vue 파일 대신, 더 작게 쪼개진 특화된 컴포넌트를 만들고 그 컴포넌트를 조합하여 UI를 구축하..
[Udemy Vue 완벽가이드 Section8] 100. 프로퍼티/이벤트 폴스루 및 모든 프로퍼티 바인딩하기 다음 두 가지 심화개념을 알아보자. 폴스루(fallthrough:대체) 프로퍼티 컴포넌트의 모든 프로퍼티 바인딩하기 1/ 폴스루(fallthrough) 프로퍼티 # 정의 - 등록(정의)하지 않은 props를 컴포넌트 내부에 설정하거나, 등록하지 않은 (커스텀)이벤트를 컴포넌트 내부에서 수신할 수 있다. - 컴포넌트에 전달되는 속성(props) 또는 v-on 이벤트 리스너이지만, 이것을 받는 컴포넌트의 props 또는 emits에서 명시적으로 선언되지 않은 속성. (Non-Prop 속성) - 일반적인 예로는 class, style, id 속성이 있다. 컴포넌트가 싱글 루트 엘리먼트를 렌더링하면, 폴스루 속성이 루트 엘리먼트의 속성에 자동으로 추가된다. # 예시 예를 들어, 템플릿이 있는 컴포넌트가 있다고 ..
[Udemy Vue 완벽가이드 Section8] 99. 커스텀 이벤트 정의 및 검증하기 이제 컴포넌트 통신에 있어 커스텀 이벤트가 중요한 기능을 담당한다는 사실을 알게 되었다. # 커스텀 이벤트 정의 커스텀 이벤트도 props처럼 정의할 수 있다. 즉, 컴포넌트가 emit할 이벤트를 Vue에 알려줄 수 있다. - props는 필수적으로 알려야 하지만, emit은 필수는 아니고, 권장사항이다. → 바로 emits 프로퍼티. emits은 props와 대응된다. - props : 컴포넌트가 수신하는 prop을 정의. - emits : 컴포넌트가 어떠한 시점에 발생시킬 '커스텀 이벤트'를 정의. 컴포넌트에 이렇게 emits를 적어두면, 이 컴포넌트의 작동방식과 어떤 이벤트를 수신하는지 등을 다른 개발자가 명확하게 알 수 있다. 만약 이런 설명이 없다면, toggle-favorite 같은 커스텀 이..
[Udemy Vue 완벽가이드 Section8] 98. 커스텀 이벤트 방출 (자식 ⇒ 부모 통신) App.vue 파일(부모)에서 FriendContact.vue 컴포넌트(자식)로 데이터를 전달하기 위해 props를 사용했다. 그럼, 반대로 컴포넌트(자식)에서 부모로의 통신은 어떻게 이뤄질까? Toggle Favorite 버튼이 좋은 예시가 된다. 현재, isFavorite prop은 생성된 모든 friends에 대해 'true'값으로 설정되어있다. //App.vue data() { return { friends: [ { id: "manuel", name: "Manuel Lorenz", phone: "0123 45678 90", email: "manuel@localhost.com", isFavorite: true, }, { id: "julie", name: "Julie Johnes", phone: "0..
[Udemy Vue 완벽가이드 Section8] 97. 동적 props값 사용하기 물론 props의 값은 String이 아닐 수 있다. 다른 HTML 요소처럼 props도 동적 값에 바인딩할 수 있다. # 기존 props 값 : 항상 string으로 전달된다. props: { isFavorite: { type: String, required: false, default: '0', validator: function(value) { return value === '1' || value === '0'; } }, }, 위 코드를 보면, isFavorite은 현재 1 또는 0으로 동작한다. (validator함수 참고) 딱 두 개의 값만 사용하니 사실 String 보다는 Boolean이 더 적합하다. 그러니 type을 String이 아닌 Boolean으로 바꾸자. 그럼 validator함수를..

티스토리툴바