Posis

이번 포스트에서는 컴포넌트 재 사용성을 늘리기 위한 slot을 활용하는 방법에 대해서 다뤄보겠습니다. slot은 언제 사용할까? slot은 컴포넌트를 재사용성을 높이고 싶을 때 사용한다. 즉, 재사용을 한다는 말은 다른 컴포넌트들 보다 디테일하기 때문이다. 디테일하기 때문에 재사용성을 높일 수 있는 것이다. 예를 들어 1번 컴포넌트는 다양한 곳에 사용된다고 한다. 하지만 매번 다른 문구들을 출력해야 할 때 이번장에서 다루는 slot태그를 활용하면 쉽게 재사용할 수 있는 컴포넌트를 만드는 것이다. Basic 프로젝트이름/src/components/Slot.vue 프로젝트이름/src/App.vue Vue.js 기본적으로 부모 컴포넌트를 열린 태그와 닫힌태그를 같이 사용할 때 그 안에 문구를 넣어주면 그 값이..

이번 포스트에서는 컴포넌트(component)를 만들고 어떻게 사용하는지에 대해서 다뤄보겠습니다. 컴포넌트(component) 만들기 프로젝트이름/src/components/Btn.vue {{ text }} 프로젝트이름/src/App.vue App.vue와 같은 위치에 components 폴더를 만들고 원하는 컴포넌트 파일을 만듭니다. - Btn.vue 저는 박스 안에 text(props)를 받아서 글자를 출력하기 위해서 script에서 props - text를 등록해줍니다. type은 String, text(props)를 넘겨주지 않았을 경우 기본값(default)으로 JavaScript를 등록해줍니다. App.vue 파일로 돌아와 script에 컴포넌트 파일을 import 하고 components에 ..

이번 포스트에서는 컴포넌트에 대해서 다뤄보겠습니다. 컴포넌트(component) 개념 컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타날 수도 있습니다. Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다. 위 그림은 왼쪽은 화면 오른쪽은 컴포넌트를 분할해 나눠둔 것이다. 컴포넌트를 그림으로 설명하자면 오른쪽에 블록 한 개가 하..