함께 성장하는 프로독학러

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 jQuery 의 scroll 이벤트를 통하여 웹 어플리케이션에서 무한스크롤링을 구현하는 방법에 대해서 알아보도록 하겠습니다. 무한스크롤을 구현하려면 window 객체에 scroll 이벤트를 지정해 주어야 합니다. $(window).scroll(이벤트가 발생하면 실행될 함수) 위와 같은 방식으로 말이죠. 1. window 객체와 document 객체의 차이 이해 무한 스크롤링을 구현하기 위해서는 window 와 document 가 어떻게 다른지 이해해야 합니다. 네이버 홈페이지를 통해 window 와 document 가 어떻게 다른지 살펴보도록 하겠습니다. 크롬 브라우저를 통해 네이버에 접속한 화면입니다. window 는 브라우저의 창 자체를 의미합니다. ..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6 의 강력한 기능 중 하나인 class에 대해서 알아보겠습니다. class는 생성자 함수의 업그레이드 버전이라고 보면 됩니다.생성자 함수에 대해서 간단하게 살펴보도록 하죠. 1234567891011121314151617181920function person (name, job) { this.name = name; this.job = job;}; person.prototype.getName = function(){ console.log(this.name);}; function korean (name, job) { person.apply(this, arguments);}korean.prototype = new person(); var man_1 = ne..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 자바스크립트의 생성자 함수와 prototype 객체에 대해서 알아보도록 하겠습니다. 먼저 prototype 객체에 대해서 알아보겠습니다. 일단 이름부터가 무시무시합니다. 저도 처음에 프로토타입 객체니 생성자니 this니 constructor니... 하는 용어들에 압도된 적이 있었는데요, 천천히 알아가 보도록 합시다. 자바스크립트에는 여러가지 데이터 형태가 있습니다.Boolean, Number, String, Null, undefined, Object, Array, Function 등 여러가지의 데이터 타입이 있습니다.이 데이터 타입을 크게 기본 타입과 객체로 나누어 볼 수 있습니다. 기본 타입 : Number, String, Boolean, undefin..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 property shorthand(단축 속성명)에 대해서 알아보록 하겠습니다.property shorthand는 객체를 정의 할 때 객체의 key값과 value의 값이 같으면, key 와 value 값을 각각 표기하지 않고 한 번만 표기하는 것을 의미합니다. 코드를 통해 살펴보도록 하겠습니다. var a = "foo", b = 42, c = {}; var o = { a: a, b: b, c: c };먼저 선언부에서 변수 a, b, c, 에 각각 "foo", 42, {} 를 할당했습니다.그리고 변수 o 에 객체를 할당하는데, 해당 객체의 key 'a' 는 변수 a의 값("foo")을 value 값으로 가지고, key 'b' 는 변수 b의 값(42)..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 method shorthand에 대해서 알아보겠습니다. 표현식부터 살펴보도록 하겠습니다. // 단축 메서드명 (ES6) var o = { property([parameters]) {}, get property() {}, set property(value) {}, * generator() {} };위와 같이 객체 안에서 메서드를 지정할 때 function을 생략할 수 있습니다. 이해를 돕기위해 예제를 살펴보겠습니다. 1234567891011var obj = { add: function (a, b){ return a+b; }, mult: function (a, b){ return a*b; }} console.log(obj.add(10, 5)); //..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 객체를 병합하는 메서드인 object.assign 메서드에 대해서 알아보도록 하겠습니다. 먼저 표현식 부터 보시겠습니다. Object.assign(target, ...sources)object.assign 메서드의 첫 번째 인자는 타겟입니다.두 번째 인자부터 마지막 인자까지는 소스 오브젝트입니다.소스 오브젝트는 타겟 오브젝트에 병합됩니다.그리고 리턴값으로 타겟오브젝트를 반환합니다. 이해를 돕기 위해 예제를 보겠습니다. 123var obj = {a:1};var copy = Object.assign({}, obj);console.log(copy); // {a: 1}cs 위의 예제에서 obj는 a라는 프로퍼티 하나를 가진 객체입니다.그리고 copy라는 변수에 ..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 직관적으로 이해하기 힘든 'this'란 녀석에 대해서 알아보도록 하겠습니다. 자바스크립트에서 this란 함수의 현재 실행 문맥을 의미합니다. 실행 문맥이란 단어가 익숙하지 않으신 분들을 위해 첨언 하자면, '함수가 실행되는 객체'라고 이해하시면 될 것 같습니다.전역에서 실행되고 있는 함수라면 전역객체 Window의 메소드가 실행 되는 것이므로 이때 함수의 this는 Window 객체 입니다. this가 현재 함수의 실행 문맥이라 했는데, javascript에는 4가지의 함수 실행 타입이 있습니다. 함수 실행 : alert('Hello world') 메소드 실행 : console.log('Hello world') 생성자 실행 : new RegExp("\d"..