분류 전체보기

Vue.js 에서 HOC(High Order Component) 만들기

HOC(High Order Component)란? 자주 반복해서 작성하게 되는 코드를 함수화하여 재사용하는 것을 말합니다. 리액트에서는 자주 반복되는 코드를 공통화한 뒤 props로 컴포넌트를 받아 로직을 처리한 후에 컴포넌트를 리턴해주는 형식으로 많이 사용됩니다. 이러한 개념을 Vue.js에서도 비슷하게 사용할 수 있습니다. //NewsView.vue //JobsView.vue 위의 두 소스코드는 가져오는 데이터만 다르지 그 외의 구조나 로직들은 똑같은 것을 볼 수 있습니다. 이러한 컴포넌트 위에 새로운 컴포넌트를 정의하고 공통된 로직을 모아두는 기법이라고 보면 됩니다. 하지만 이러한 HOC는 공통 요소를 뽑아내 코드를 재사용할 수 있다는 장점이 있지만, 많이 사용할 수록 컴포넌트의 레빌이 깊어져서 복..

Vue.js 라우터 네비게이션 가드

네비게이션 가드란? 네비게이션 가드란 뷰 라우터로 특정 URL에 접근할 해 해당 URL의 접근을 막는 방법을 말합니다. 예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술입니다. 종류 애플리케이션 전역에서 동작하는 전역 가드 특정 URL에서만 동작하는 라우터 가드 라우터 컴포넌트 안에 정의하는 컴포넌트 가드 전역 가드 전역 가드는 라우터 인스턴스를 참조하는 객체로 설정할 수 있습니다. 먼저, 전역 가드 설정을 위해 라우터 인스턴스를 생성합니다. var router = new VueRouter(); 다음으로 beforeEach() API를 호출합니다. router.beforeEach(function (to, from, next) { // to : 이동할 url //..

자바스크립트의 이벤트

Event 이벤트는 말 그대로 어떤 사건을 의미합니다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM요소와 관련이 있습니다. 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해 주어야 합니다. 이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기전에는 실행되지 않다가 발생되면 실행됩니다. 이 함수를 이벤트 핸들러라고 하며 이벤트에 대응하는 처리를 기술합니다. 이벤트 루프와 동시성 브라우저는 단일 쓰레드에서 event-driven 방식으로 동작합니다. 단일 쓰레드는 쓰레드가 하나뿐이라는 의미이고 이말은 곧 하나의 작업만을 처리할 수 있다는 것입니다. 하지만 실제로 웹 애플리케이션은 많..

자바스크립트에서 객체지향 프로그래밍이란?

자바스크립트 객체지향 프로그래밍 프로토타입 기반 언어 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 언어입니다. 간혹 클래스가 없어서 객체지향이 아니라고 생각하는 사람들도 있으나 프로토타입 기반의 객체지향 언어입니다. 자바스크립트에는 클래스 개념이 없고 별도의 객체 생성 방법이 존재합니다. 객체 리터럴 Object() 생성자 함수 생성자 함수 // 객체 리터럴 var obj1 = {}; obj1.name = 'Lee'; // Object() 생성자 함수 var obj2 = new Object(); obj2.name = 'Lee'; // 생성자 함수 function F() {} var obj3 = new F(); obj3.name = 'Lee'; 자바스..

자바스크립트 core 개념 간단 정리

this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. 자바스크립트의 this는 다른 언어와는 다르게 함수 호출 방식에 의해 this에 바인딩할 객체가 동적으로 결정됩니다. 즉 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다. 함수 호출 function foo() { console.log("foo's this: ", this); // window function bar() { console.log("bar's this: ", this); // window } bar(); } foo(); 기본적으로 this는 전역 객..

클로저(closure)란???

클로저(closure) 자바스크립트를 공부하다보면 클로저라는 개념을 자주 보게 되는데, 처음 접했을 때는 closure가 아닌 closer라고 생각했었습니다. 아무튼 클로저는 실행 컨텍스트에 대한 사전 지식이 있어야 이해하기 쉬운 개념이라고 볼 수 있습니다. 개념 클로저는 자바스크립트의 고유 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(얼랭, 스칼라, 하스켈 등..)에서 사용되는 중요한 특성입니다. 클로저에 대해 MDN은 아래와 같이 정의하고 있습니다. “A closure is the combination of a function and the lexical environment within which that function was declared.” 클로저는 함수와 그 함수가 선..

자바스크립트 실행 컨텍스트

실행 컨텍스트(Execution Context) ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구부하는 추상적인 개념이라고 정의합니다. 말만 들으면 솔직히 바로 이해가 안됩니다. 쉽게 말하면 코드들이 실행되기 위한 환경이라고 이해하면 된다고 합니다. 코드가 실행되면 이 실행 컨텍스트 내부에서 실행되고 있는 것입니다. 자바스크립트 엔진은 코드를 실행하기 위해 아래와 같은 실행에 필요한 정보들을 알고 있어야 합니다. 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티 함수 선언 변수의 유효범위(scope) this 이와 같이 실행에 필요한 정보를 형상화하고 구분하기 위해 자바스크립트 엔진은 실행 컨텍스트를 물리적 객체의 형태로 관리합니다. var x = 'xxx'; f..

자바스크립트에서 scope란?

Scope 스코프는 자바스크립트를 포하함 모든 프로그래밍 언어의 기본적인 개념입니다. 스코프란 참조 대사 식별자를 찾아내기 위한 규칙입니다. 자바스크립트는 이 규칙대로 식별자를 찾습니다. 프로그래밍은 변수를 선언하고 값을 할당하며 변수를 참조하는 기본적인 기능을 제공하며 이것으로 프로그램의 상태를 관리할 수 있습니다. 변수는 전역 또는 코드블록이나 함수 내에 선언하며 코드 블록이나 함수는 중첩될 수 있습니다. 식별자는 자신이 어디에서 선언됐는지에 의해 자신이 유요한 범위를 갖습니다. 만약 스코프가 없다면 어떻게 될까요? 스코프가 없다면 같은 식별자 이름은 충돌을 일으키므로 전체에서 하나밖에 사용할 수 없습니다. 스코프의 구분 자바스크립트에서 스코프를 구분하면 2가지로 나눌 수 있습니다. 전역 스코프 (G..