Posis

Fontawesome이란 많은 개발자들이 웹 개발을 할 때 사용하는 무료 폰트 아이콘을 제공해주는 사이트입니다. 무료 폰트 사이트이지만 유료버전을 결제해서 더 많은 아이콘들도 이용할 수 있는 유용한 사이트입니다. 이 fontawesome을 HTML, CSS, JS로 웹 개발할 때는 HTML head 태그 안에 link로 불러와서 i 태그를 이용해 매우 간단하게 사용할 수 있다. 이처럼 매우 간단하게 사용할 수 있다. 하지만 Vue.js에서 fontawesome을 사용하기 위해서는 npm을 이용해서 필요한 라이브러리들을 설치해 주어야 합니다. Vue.js 프로젝트에서 Fontawesome 사용하기 아마 이 글을 읽는다면 Vue.js는 이미 사용하고 있는 상황일 거라 생각하고 진행하겠습니다. NPM(노드 패..

이번 포스트에서는 Vue에서 제공하는 refs를 활용하여 DOM에 접근하는 방법에 대해서 다뤄보겠습니다. Refs JavaScript에서는 DOM과 엘리먼트를 직접 조작하기 위해서는 getElementById, getElementsByClassName, querySelector 등등과 같은 메서드를 활용했어야 합니다. 하지만 Vue에서는 Refs를 제공을 해줍니다. 장점 자식 컴포넌트에 직접적으로 접근할 수 있음 DOM조작 메서드 없이 편리하게 엘리먼트를 조작할 수 있음 기본적인 DOM 출력 Hello Vue.js!! Vue의 refs를 활용한 DOM 출력 Hello Vue.js!! 기본적인 DOM 출력의 document.querySelector와 Vue의 refs 출력 this.$refs가 동일한 기능..

이번 포스트는 Provide/inject를 활용한 컴포넌트 데이터 전달에 대해서 다뤄보겠습니다. props와 provide/inject 컴포넌트 간에 데이터 전달에는 props와 provide/inject 두 가지가 존재합니다. props: 컴포넌트 태그마다 작성을 해서 데이터를 보내서 자식 컴포넌트 안에서 script안에 props를 정의해 주어야 합니다. 단, 컴포넌트를 여러 번 거친다고 할 때 모든 컴포넌트마다 작성을 해 주어야 합니다. provide/inject: provide와 inject는 컴포넌트 태그에 작성하지 않습니다. script안에 작성하며 props와 다른 점은 컴포넌트가 여러 번 거쳐도 최상위 컴포넌트와 최하위 컴포넌트 단 두 곳에서만 작성하면 데이터 전달이 이루어집니다. prop..

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

이번 포스트에서는 emit Event를 활용해서 자식 컴포넌트에서 부모 컴포넌트로 데이터 통신하는 방법에 대해서 다뤄보겠습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 props 간단 정리 부모 컴포넌트에서는 props를 활용하여 자식 컴포넌트로 데이터를 보낼 수 있다. 즉, 단방향 데이터 바인딩 방식이다. 자식 컴포넌트에서 emit Event를 활용하여 부모 컴포넌트로 데이터 보내기 프로젝트이름/src/App.vue 프로젝트이름/src/components/Input.vue Input 컴포넌트에 abc를 작성하면 watch 속성이 msg의 데이터 변경을 감지하고 한글자씩 a -> ab -> abc를 콘솔에 출력하는 것을 볼 수 있습니다. 동작 순서 input의 입력한 데이터를 변경을 감지해줄 ..

이번 포스트에서는 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하여 사용하는 방법에 대해서 다뤄보겠습니다. 프로젝트이름/src/components/Btn.vue {{ text }} 프로젝트이름/src/App.vue 위 예제 코드는 버튼 컴포넌트를 만들어 재사용하는 코드입니다. 간단하게 코드를 설명하겠습니다. App.vue 자식 컴포넌트에 보내는 props는 총 3개 color, large, text입니다. color는 내가 어떠한 색을 입힐지 작성해줍니다. 16진수도 가능합니다. CSS에서 색을 표현할 수 있는 수단은 모두 가능합니다. HSL, HSV 등등 large는 Boolean 타입의 props입니다. 컴포넌트 태그에 large만 작성하면 true로 인식합니다. 만익 large props를 작..