본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section9] 113. 슬롯(slots) 소개 Vue 컴포넌트에는 멋진 기능이 하나 더 있다. 이걸 사용하면 코드를 구성하고 여러 컴포넌트로 분할할 때 훨씬 더 많은 옵션을 제공한다. → 바로 slot 기능 # slot은 뭘까? UserInfo.vue에는 header와 p가 포함된 section이 있다. {{ fullName }} {{ infoText }} BadgeList.vue에도 컨텐츠가 포함된 section이 있다. Available Badges BadgeList.vue와 UserInfo.vue의 컨텐츠는 서로 다르지만, 두 컴포넌트에 공통으로 포함된 것이 있다. 바로 section태그 + section에 적용된 스타일링. 두 컴포넌트에 있는 section이 같은 스타일을 가지고 있다. 이를 위해 두가지 대안이 있다. 1/ 스타일 범위가 지정..
[Udemy Vue 완벽가이드 Section9] 112. 범위가 지정된(scoped) 스타일 이번에는 스타일링에 대해 이야기해보자. # style태그를 .vue파일에 추가하고, 그 안에 스타일링을 설정할 수 있다. 스타일링은 추가한 위치와 관계없이 항상 앱 전체에 영향을 주는 '전역 스타일'로 취급된다. 예를 들어, BadgeList.vue파일에서 section, h2 태그 스타일을 정의하더라도 위치는 중요하지 않다. 이 스타일이 이 BadgeList.vue 컴포넌트의 템플릿에만 영향을 미치는게 아니라, 모든 파일에 영향을 미친다. TheHeader.vue파일에서 header요소를 태그로 선택하고, 특정 스타일을 적용시켜보자. UserInfo.vue에 div로 wrapping되어있는 곳을 header요소로 변경하면 똑같은 스타일이 적용된다. 즉, 해당 파일에 스타일이 설정되어있더라도 앱 전체에 ..
[Udemy Vue 완벽가이드 Section9] 111. 전역 컴포넌트와 지역 컴포넌트 # 전역 컴포넌트 컴포넌트 등록은 component 메서드를 사용하여 앱에 컴포넌트를 등록한다. 이전의 모든 프로젝트도 이 방법으로 컴포넌트를 등록하였다. 방법 자체에는 아무런 문제가 없지만, 컴포넌트를 등록하는 가장 좋은 방법은 아니다. 더 좋은 대안이 있으므로. ## 의미 component 메서드를 사용하여 앱에 컴포넌트를 등록하면, 전역(global) 컴포넌트로 등록된다. - 전체 Vue앱에서 전역적으로 사용할 수 있다는 의미. (Global Components: Components you can use anywhere in your Vue app - i.e. in any template.) - 컴포넌트를 앱의 어디에서나 커스텀 HTML 요소로 사용할 수 있다. - App.vue 파일 뿐만 아니라 ..
[Udemy Vue 완벽가이드 Section9] 109. 섹션 소개 이제 컴포넌트가 아주 유용하다는걸 알게 되었다. 컴포넌트를 구축하는 방법과, 재사용하는 방법을 알고 있고 props와 커스텀 이벤트를 사용해서 컴포넌트를 결합하고 사용자 인터페이스를 구축하는 방법도 배웠다. 이번에는 컴포넌트에 관해 더 깊이 파고들어보자. 1/ Component Registration & Styling 물론, Vue앱에 컴포넌트를 등록하는 방법은 이미 알고 있지만, 등록하는 방법은 두 가지 이상이다. 모든 방법은 용도가 있고, 특정 상황에 맞는 방법이 있다. 컴포넌트를 스타일링하는 방법과, 특정 스타일이 특정 컴포넌트에만 영향을 미치도록 하는 방법을 알아보자. 2/ Slots & Dynamic Components slot이 무엇인지, 왜 유용한지. 동적 컴포넌트와 slot을 어떤 경우에 ..
[Udemy Vue 완벽가이드 Section8] 107. 섹션 요약 컴포넌트가 서로 통신하는데 필요한 핵심 개념 몇 가지만 기억하면 된다. 1/ Component Communication Overview - Components are used to build UIs by combining them. 보통 여러 컴포넌트를 결합하여 사용자 인터페이스를 구축한다. 컴포넌트의 좋은 점은 템플릿에 논리를 캡슐화하여 코드를 여러 개의 조각으로 나눌 수 있고, 컴포넌트를 재사용할수도 있다는 것. - Components build 'parent-child' relations and use 'unidirectional data flows' for communication. 컴포넌트는 자동으로 부모-자식 관계를 형성한다. 컴포넌트 A의 템플릿에서 컴포넌트 B를 사용한다면 컴포넌트 A는 컴..
[Udemy Vue 완벽가이드 Section8] 106. provide + inject vs props 및 커스텀 이벤트 provide, inject는 컴포넌트가 통신하도록 하는데 아주 유용한, Vue에 내장된 도구이다. 부모와 자식 컴포넌트 사이, 또는 부모와 자식 컴포넌트의 자식 컴포넌트 사이에서만 통신을 할 수 있다. 이웃 간에 통신하는데 사용할 수는 없다. 중요한 점은 또 하나 있다. props와 커스텀 이벤트를 대체하기 위해 provide와 inject를 항상 사용해서는 안된다. 실제 props와 커스텀 이벤트가 기본 통신 메커니즘이어야 한다. 불필요하게 통과해야만 하는 컴포넌트가 있을 때, provide와 inject 사용을 고려해볼 수 있다. KnowledgeBase.vue는 props를 전달하고, 발생한 이벤트를 전달하는 컴포넌트일 뿐이었다. 이런 경우는 provide, inject를 사용하면 불필요한 코드를..
[Udemy Vue 완벽가이드 Section8] 105. 함수/메서드에서의 provide + inject 커스텀 이벤트에서도 provide, inject를 사용할 수 있을까? 할 수 있지만, 조금 다르게 구현된다. 커스텀 이벤트가 발생하면 트리거되는 메서드와 연결한다. App.vue의 activateTopic처럼. 물론, props를 사용해서 이런 메서드를 이벤트를 호출하는 아래 컴포넌트에 전달할 수도 있다. # 함수/메서드 provide + inject 방법 1/ 함수를 사용하는 컴포넌트에서 selectTopic처럼 원하는 이름으로 함수명을 설정하자. 2/ 그런 다음, button 이벤트 리스너로 바인딩하자. selectTopic은 함수가 된다. click이 발생하면 실행되는 함수. 함수를 가리키고, provide, inject 메커니즘을 사용하여 이 함수를 value로서 가져오기를 원한다. Learn M..
[Udemy Vue 완벽가이드 Section8] 104. Provide + Inject로 해결하기 코드를 통과해야하는 문제를 해결하는데 Vue를 어떻게 사용할 수 있을까? 다시 말하면, props와 커스텀 이벤트가 여러 컴포넌트를 통과하는게 꼭 문제인건 아니다. 기존 방식대로 해도 괜찮다. 하지만 불필요한 코드를 작성하지 않으려면 새로운 방법이 좋다. # props 대신 provide - inject 사용 먼저 props인 topics부터 시작해보자. KnowledgeGrid.vue에 topics를 다른 방법으로 전달해보자. topics가 KnowledgeGrid.vue에 필요하고, App.vue에서 관리해야한다. App.vue는 topics가 필요한 ActiveElement 컴포넌트도 있고, KnowledgeBase도 있고, 이 KnowledgeBase 컴포넌트는 마지막에 KnowledgeGrid...

티스토리툴바