본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section9] 121. 텔레포트(Teleport)를 활용하여 요소 이동시키기 error dialog에 무슨 문제가 있을까? 겉보기에는 문제가 없어 보인다. 하지만 검사를 해보면 HTML 마크업에 문제가 있는 것을 볼 수 있다. dialog 태그가 div태그 아래에 h2, input, button태그들과 같이 중첩되어 있다. 물론, ManageGoals.vue 컴포넌트 템플릿에서 이곳에 추가했기 때문이다. 하지만, semantic관점과 HTML 관점에서 dialog요소를 이 위치에 놓는 것은 dialog가 전체 페이지에 오버레이된다는 문제가 있다. 이 dialog를 여기에 놓는 것은 HTML 측면에서 이상적이지 않다. 작동은 하지만, 접근성을 생각해보면 이상하다. 또한 스타일링 문제가 발생할 수 있다. 코드 깊은 곳에 위치하지않고, HTML 트리의 루트에 삽입하는게 이상적이다. s..
[Udemy Vue 완벽가이드 Section9] 120. 이론 적용하기 & 한가지 문제점 아주 유용한 기능을 하나 더 알아보자. ManageGoals.vue 컴포넌트를 계속 사용해보자. 'Set Goal(목표설정)'이라는 텍스트가 적힌 button이 있고, 버튼을 클릭하면 input창에 입력한 goal을 저장하고 싶다. 그리고 input 필드를 확인하여, 비어있다면 오류 메시지를 유저에게 보여주자. 그리고 입력 필드에 적힌 값이 유효한 goal이라면 별다른 조치를 취하지 말자. (지금 다루는 건 오류와 오류 메시지 부분 뿐이므로.) setGoal 메서드를 포인터로 가리키고, setGoal 메서드 내부에서 ref로 enteredValue를 얻을 수 있다. (또는 v-model과 양방향 바인딩으로도 가능하다. 이번에는 ref 개념을 사용해보자.) input창의 ref에 원하는 식별자를 추가한다...
[Udemy Vue 완벽가이드 Section9] 119. 동적 컴포넌트를 활성 상태로 유지하기 동적 컴포넌트에 대해 더 알아야 할 내용이 있다. ManageGoals.vue 파일에 입력필드가 있다고 해보자. 그리고 그 입력필드에 유저가 goal를 입력할 수 있다고 가정하자. (dummy input 필드로서 이 값으로 뭔가를 하지는 않을 예정.) Manage Goals 유저가 하나 이상의 컴포넌트에서 뭔가를 입력할 수 있는 상황은 충분히 있을 수 있다. 이제 component태그로 컴포넌트를 동적으로 불러오자. 여기서 문제가 발생한다. ManageGoals.vue 컴포넌트에 있는 입력필드에 입력값을 입력하고, 저장하기 전에 ActiveGoals.vue로 이동한 다음, 다시 ManageGoals.vue로 오면 입력한 값이 사라진다. ▼ ▼ 왜냐하면 component 요소로 컴포넌트를 바꿀 때 이전 컴..
[Udemy Vue 완벽가이드 Section9] 118. 동적 컴포넌트 (component태그) 새로운 두 컴포넌트를 추가해보자. → ManageGoals.vue, ActiveGoals.vue ManageGoals.vue : 사용자가 새 강의 목표를 추가할 수 있는 컴포넌트. ActiveGoals.vue : 추가된 모든 활성화 목표를 볼 수 있는 컴포넌트. 두 컴포넌트 모두 script 태그도 추가하지 않을 예정이다. 기본 구성 객체를 export하지 않을거다. 비어있다면 굳이 export할 필요 없으므로. App.vue에서 두 컴포넌트를 지역 컴포넌트로 등록하자. 여러 탭을 가진 컴포넌트를 구축한다고 하자. 여러 버튼이 있고, 해당 컴포넌트를 누르면 그 컴포넌트를 보여준다. 즉, 동시에 두 컴포넌트를 보여주지 않고, Active Goals, Manage Goals 중 한 컴포넌트만 보여준다. 이를..
[Udemy Vue 완벽가이드 Section9] 117. 범위가 지정된(scoped) 슬롯 slot은 중요한 기능이다. slot에 관해 한가지 더 알아보자. 심화기능이지만, 알고 있으면 좋다. CourseGoals.vue라는 새로운 컴포넌트를 만들어보자. {{ goal }} App.vue로 가서 새로 생성한 CourseGoals.vue 컴포넌트를 불러온다. CourseGoals.vue를 지역 컴포넌트로 등록하면 이제 template에서 사용할 수 있다. 이렇게 입력한다. 이렇게 아래 CourseGoals 컴포넌트가 화면에 출력된다. 이 화면이 slot과 어떤 관련이 있을까? CourseGoals.vue 컴포넌트는 'goals' 데이터를 포함하고, 관련해서 더 많은 로직을 가질 수 있다. 그리고 그 goals를 화면에 렌더링한다. 여기서 사용자 정의할 수 있는 요소가 하나 있다. 바로 li 항목..
[Udemy Vue 완벽가이드 Section9] 116. 슬롯에 대한 추가 정보(fallback 기본컨텐츠, $slots, #default) 슬롯은 분명히 중요한 기능이다. 더 많은 유연성을 제공해주고, 슬롯 없이는 할 수 없는 작업을 가능하게 해준다. 아직 슬롯에 관해 다뤄야할 것이 더 있다. # fallback 기본 컨텐츠 제공 예를 들어, 슬롯에 기본 컨텐츠를 제공할 수 있다. 여기서 '기본'이란 이름(name)이 없는 슬롯을 의미하는건 아니다. 수신하는 컨텐츠가 없는 슬롯에 기본 컨텐츠를 렌더링할 수 있다는 의미. 예를 들어, BaseCard.vue 파일에 header에서 slot태그 사이에 컨텐츠를 추가하여 기본 컨텐츠를 만들 수 있다. 어떻게 작동하는지 보기위해 header태그의 slot 사이에 h2태그로 'The Default'를 추가해보자. The Default 기본 컨텐츠가 필요한 컴포넌트도 분명히 있을 수 있다. 컨텐츠를 s..
[Udemy Vue 완벽가이드 Section9] 115. 슬롯 스타일 및 컴파일 슬롯은 아주 효과적인 기능이지만, 스타일링에 문제가 생겼다. UserInfo.vue 컴포넌트에서 배지의 스타일링이 깨졌다. 이전에 UserInfo.vue 파일에서 header를 지정해서 스타일링을 적용했지만, 그 header 부분을 다른 컴포넌트인 BaseCard.vue 컴포넌트에 있는 header로 보내고있다. {{ fullName }} {{ infoText }} header로 보낸 컨텐츠가 스타일링의 범위를 지정한 컴포넌트(style scoped)에서 정의되었기 때문에, UserInfo.vue에서 BaseCard.vue 컴포넌트로 보내진 컴텐츠도 UserInfo.vue에 있는 스타일링에 영향을 받는다고 생각할 수 있지만 Vue는 그렇게 작동하지 않는다. 아주 간단한 규칙이 있다. slot을 작업할 때..
[Udemy Vue 완벽가이드 Section9] 114. 이름이 있는 슬롯(Named Slots) slot에 대해 배웠으니, BadgeList.vue에서도 base-card 슬롯을 사용할 수 있다. BadgeList.vue에도 card look을 적용할 section이 있으므로. Available Badges BadgeList에서 section 스타일은 삭제하고, base-card 커스텀 태그를 이용해 h2태그와 ul을 wrapping하자. base-card를 컨텐츠 wrapper로 사용하면, 이전과 동일하게 화면에 표시된다. 이제 재사용할 수 있는 card 컴포넌트가 생겼다. card look이 필요하면 언제든지 사용할 수 있다. # 여러 개의 slot slot의 용도가 이게 전부는 아니다. 컴포넌트의 여는 태그와 닫는 태그 사이에 있는 '동적 콘텐츠'를 전달할 수 있는건 좋은데, 가끔은 커스텀 컴..

티스토리툴바