nc2u Blog

Vue.js 컴포넌트는 기본적으로 시작 태그와 종료 태그 사이에 오는 컨텐츠(다른 컴포넌트, 요소, 텍스트 노드)를 무시하고 렌더링된다. 그러나 컴포넌트가 사용되는 상황에 따라 외부로부터 컨텐츠를 전달 받는 편이 컴포넌트를 재사용하기에 유리한 경우가 있다. 이렇게 외부로부터 컨텐츠를 전달받는 수단을 슬롯(slot) 이라고 한다. 모달 윈도우 컴포넌트를 예로 들어보자. 모달 윈도우의 내용은 해당 모달 윈도우가 사용되는 상황에 따라 달라진다. 단순히 텍스트로 된 내용만 표시하는 것이라면 속성을 통해 텍스트를 전달받기만 하면 될 수도 있다. 그러나 메시지에 강조 표시를 추가하고 싶다거나 메시지에 삽입된 URL을 링크로 만들어야 하는 경우 등이 있을 수 있다. 단순히 속성으로 값을 전달하는 것만으로는 이런 기능..

$router 객체와 $route 객체는 이름은 비슷하지만, 전혀 다른 것이기 때문에 주의가 필요하다. $router는 Router 인스턴스를 가리킨다. Router 인스턴스는 웹 애플리케이션 전체에서 딱 하나만 존재하는 것으로 전반적인 라우터 기능을 관리한다. 예를 들면 애플리케이션 전체에서 히스토리를 어떻게 관리할지에 대한 설정이나 router-link 요소 없이 프로그램적인 방법으로 페이지를 이동(this.$router.push())할 때 이 Router 인스턴스를 사용한다. 이와 달리 this.$route.params 등의 코드에 나오는 $route 는 Route 객체다. 페이지 이동 등으로 라우팅이 발생할 때마다 생성되며, 현재 활성화된 라우트의 상태를 저장한 객체이다. 즉, 현재의 경로 및 U..

HTML 문서에서 다이나믹한 UI는 요소에서 발생하는 이벤트 처리를 통해서 구현되는 경우가 많다. 예를 들어 키보드를 누를 때 발생하는 `keyup`, `keypress`, `keydown` 이벤트, 마우스를 클릭할 때 발생하는 `click`, `doubleclick` 이벤트, 마우스를 움직일 때 발생하는 `mousemove` 이벤트 등이 있는데, 다음 페이지에서 이런 이벤트 종류에 대해서 참고할 수 있다. https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가적인 커스..