개발/Vue

vue.js 사용자 지정 디렉티브를 활용해서 코드를 깔끔하게 작성하는 방법 (vue custom directive)

🤚 들어가기 전에 Vue에는 기본적으로 내장된 디렉티브가 존재합니다. v-model과 v-show가 대표적인 예시죠. 하지만 이외에도 사용자가 직접 디렉티브를 만들고 등록할 수도 있습니다. 디렉티브를 잘 만들어 놓으면 굉장히 유용하게 재사용할 수 있습니다. 💻 디렉티브 등록 방법 사용자 지정 디렉티브를 등록하는 방법에는 2가지 방법이 있습니다. 전역으로 등록하는 방법과 로컬 컴포넌트에 등록하는 방법입니다. 전역 선언 Vue 인스턴스 선언하기 전에 Vue.directive 전역 등록을 시켜줍니다. 지역 선언 로컬 컴포넌트에 directives로 등록하는 방법입니다. 아래와 같이 지역적으로 directives를 등록하면 됩니다. 💻 훅 함수 디렉티브에는 아래와 같은 다양한 훅 함수를 제공합니다. bind 디..

개발/Javascript

자바스크립트 호이스팅 (Javascript hoisting)

자바스크립트를 공부하는 사람들은 호이스팅이라는 용어를 접해본 경험이 있을 것이다. 정의를 내려보기 전에, 아래의 예제를 한번 살펴보도록 하자. function greeting() { console.log('hello'); } greeting();greeting 함수를 호출 할 때, 예상대로 hello 문자열이 console에 기록이 될 것이다. 하지만 함수를 선언하기 전에 실행하면 어떻게 될까? greeting(); function greeting() { console.log('hello'); }위 예시는 신기하게도 처음 예시와 동일하게 hello 문자열을 콘솔창에 기록한다. 이것이 바로 호이스팅이 동작하는 방식이다. 대부분 이 호이스팅 동작 방식을 설명할 때, 선언한 변수와..

개발/Javascript

디자인 패턴:: Simple Factory - Factory Pattern 1

팩토리 패턴은 추상화된 부모 클래스를 활용해서 다양한 파생 클래스들을 공장처럼 찍어내듯 만들어내는 것을 말합니다. real world 예시로는 자동차, 커피, 피자 등 특정 제품을 만들 때 공통된 부분을 추상화된 부모 클래스로 생성하고 제품들 마다 커스텀하게 만들어야 하는 부분들은 하위 클래스에서 지정해주는 것을 들 수 있습니다. 팩토리 패턴은 크게 3종류로 분류해볼 수 있습니다. Simple Factory Factory Method Abstract Factory 이번 포스팅에서는 Simple Factory를 다뤄보도록 하겠습니다. Simple Factory Simple Factory는 객체들의 생성을 책임지고 관리하는 팩토리를 만들어서 확장 및 관리를 용이하게 해주는 방식입니다. Simple Facto..

개발/Javascript

자바스크립트 call, apply, bind 차이점

자바스크립트 함수를 다루다 보면 this 키워드를 다뤄야 할 경우가 많이 생기게 됩니다. 이 this 키워드를 정확하게 이해하려면 함수와 메서드의 차이부터 제대로 짚고 넘어가야 됩니다. Function vs Method 함수와 메서드는 둘 다 동일한 함수이지만 존재하는 위치에 따라서 함수가 될 수 있고, 메서드가 될 수 있습니다. // 함수 const greeting = () => { console.log(this); } const module = { greeting() { console.log(this); } } greeting(); // window object module.greeting(); // module object차이점이 보이나요? greeting 변수에 할당된 함수에서의 this와 mod..

개발/Javascript

자바스크립트 비동기 프로그래밍 - 콜백함수(callback function)

콜백함수(Callback Function)? 콜백함수를 간단하게 정의하면 어떤 특정 함수가 실행을 마친 후에 실행되는 함수를 콜백함수라고 합니다. 조금 더 세부적으로 설명드리면, 자바스크립트에서 함수는 객체입니다. 이러한 특징덕분에 함수는 인자로써 함수를 받을 수 있고, 다른 함수를 리턴할 수 있습니다. 이러한 특징을 가지는 함수를 고차함수(higher-order functions)라고 부릅니다. 인자로 전달된 함수를 콜백함수(callback function)이라고 부르는 거구요. 고차함수(higher-order functions) 조건 함수를 파라미터로 전달받는 함수 함수를 리턴하는 함수 콜백함수가 필요한 이유 콜백 함수를 사용하는 가장 큰 이유 중 하나는 비동기 데이터를 처리하기 위함입니다. 아래의 ..