Vue - 사용자 지정 directive Vue에서 directive는 Vue 자체에서 내장하고 있는 directive와 사용자 지정 directive가 있다. 전자의 경우 html태그를 보다 동적으로, 효율적으로 다룰 수 있게 해주고, 후자의 경우는 사용자가 직접 디렉티브 지시어를 설정해 사용함으로써 특정 기능을 만들 수 있다. 이번 게시글에서는 사용자 지정 directive를 다뤄볼 것이다. 왜 사용자 지정 directive를 사용하는가? 1) 지시어를 선언함으로써 재사용성이 증가한다. (여러 컴포넌트에서 사용할 때) 2) 개발자의 의도로 directive hook을 통해 DOM에 side-effect를 줄 수 있다. (mounted 훅의 코드를 줄여주는 등) 사용자 지정 directive에는 전역과..

Vue-firebase 프로젝트 생성하기, 웹 호스팅 이번 글에서는 Vue에서 firebase 프로젝트를 생성하려고 한다. firebase 백엔드를 이용하면 데이터베이스에 대한 지식없이도 간편하게 스스로 웹사이트의 폼에 대한 정보나 그 외 정보들을 저장하고 관리할 수 있다. 1. 먼저 google에 firebase를 검색해서 사이트에 들어가고 오른쪽 상단에 콘솔로 이동을 누른다. 2. 프로젝트 생성을 클릭하고 프로젝트 생성에 아무거나 적어준다. (계속을 누르다보면 애널리틱스 생성과 같은 것도 있는데 이것도 어떻게 하든 상관없다. 일단 넘어가자) 3. authentic에 들어간 뒤 4가지 탭 중에 Sign-in method에 들어간다. 4. 만약 이메일에 관한 데이터정보를 담고 싶으면 이메일을 클릭한 뒤 ..

Vue-Composition API Vue에서는 Option API방식으로 데이터 또는 함수를 관리하거나 Composition API방식을 사용하거나 둘 중 하나를 사용하여 개발한다. Option API방식은 뜻 그대로 Vue에서 제공하는 옵션 하나하나를 이용하여 개발한다. 예를 들어 data(), methods, computed와 같은 것처럼 말이다. 반대로 Composition은 setup()이라는 것 안에 모든 것을 정의해서 사용한다. 그럼 왜 Composition API를 사용할까? 작은 프로젝트의 경우 Option API방법으로 진행했을 때 상관이 없다. 하지만 조금 규모가 커졌을 때는 데이터의 이동추적을 하려면 일일히 찾아야하며 많은 데이터와 많은 함수가 있기 떄문에 스크롤도 많이해야하는 번거..