Web + APP/JavaScript 썸네일형 리스트형 JavaScript 함수와 프로토타입 체이닝 (5) 드디어 JavaScript 함수 마지막 글입니다. 여기까지 읽으신 분이 있으신진 모르겠지만, 읽으셨다면 추후에 큰 도움 되실겁니다. 다 기억까지한다면 베스트 ! 프로토타입 체이닝 프로토타입의 두 가지 의미 JS는 기존 C++이나 자바 같은 객체지향 프로그래밍 언어와는 다른 프로토타입 기반의 객체지향 프로그래밍을 지원합니다. JS에서 OOP 상속에 근간이 되는 프로토타입과 프로토타입 체이닝의 기본 개념을 알아보도록 합시다. 자바와 같은 객체지향 프로그래밍에서는 클래스를 정의하고 이를 통해 객체를 생성합니다. JS에는 이러한 클래스 개념이 없습니다. 대신에 객체 리터럴이나 앞서 설명했던 생성자 함수로 객체를 생성합니다. 이렇게 생성된 객체의 부모 객체가 바로 '프로토타입' 객체입니다. 즉, 상속 개념과 마찬.. 더보기 JavaScript 함수와 프로토타입 체이닝 (4) 사실 이렇게 길어질 줄은 몰랐네요. 계속 함수만 해서 지루하실 수도 있으시겠지만, 지금 당장 React, Vue, JQuery를 공부하는 것보다 이 내용을 알아놓으시면 분명히 도움이 될 겁니다. 제가 약속할게요 ! 함수 호출과 this 1. arguments 객체 C와 달리 엄격한 언어가 아니기 때문에 JS는 함수 형식에 맞춰 인자를 넘기지 않아도 에러가 발생하지 않습니다. (이 것은 추후 큰 문제가 되는데...) function func(arg1, arg2) { console.log(arg1, arg2); } func(); // undefined undefined func(1); // 1 undefined func(1, 2); // 1 2 func(1, 2, 3); // 1 2 이렇게 런타임 시에 호출.. 더보기 JavaScript 함수와 프로토타입 체이닝 (3) 함수의 다양한 형태 1. 콜백 함수 자바스크립트 함수 표현식에서의 함수 이름은 선택 사항입니다. 이러한 익명 함수의 대표적 용도가 콜백 함수입니다. 콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 말합니다. 대표적인 콜백 함수의 사용 예가 이벤트 핸들러 처리가 되겠죠. window.onload = function() { alert('This is the callback function.'); }; 2. 즉시 실행 함수 함수를 정의함과 동시에 바로 실행하는 함수를 즉시 실행 함수라고 합니다. 이 역시 익명 함수를 응용한 형태입니다. (function (name) { console.log('This is the immediat.. 더보기 JavaScript 함수와 프로토타입 체이닝 (2) 시간이 없어요 !! 바로 시작합시다. 함수 객체 : 함수도 객체다 자바스크립트에서는 함수도 객체다 자바스크립트에서는 함수도 객체입니다. 즉, 함수의 기본 기능인 코드 실행 뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다는 것입니다. function add(x, y) { return x + y; } add.result = add(3, 2); add.status = 'OK'; console.log(add.result); // '5' console.log(add.status); // 'OK' 앞서 설명한 것처럼 자바스크립트는 일반 객체처럼 취급될 수 있단 점을 알고가야합니다. 리터럴에 의해 생성 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능 함수의 인자로 전달 가능 함수의 리턴값으로.. 더보기 JavaScript 함수와 프로토타입 체이닝 (1) 안녕하세요 되게 오랜만이네요 ! 오늘 12월 13일, 제 생일에 맞춰서 글을 써보려 합니다. 글 주제는 JavaScript 함수와 프로토타입 체이닝인데, 저번 글에서 JavaScript 함수에 관해 글을 썼는데, 너무 성의 없었나해서 블로그에 다시 글을 남겨보려 합니다 ! 본 글은 아마 프론트엔드 개발자라면 분명히 알고 있어야하는 개념인거 같고, 면접에서도 자주 나올 법한 이야기가 아닐까 싶네요 ! 시작해볼게요 ! 자바스크립트에서 가장 중요한 개념 1순위는 뭘까요? 당연히 함수입니다. 제가 처음 자바스크립트를 공부하면서 이 함수 부분에서는 굉장히 헷갈리는 부분이 많았습니다. 기존에 알고있던 Python, C 언어와는 뭔가 다른 느낌이었거든요. 자바스크립트에서는 이 함수를 얼마나 제대로 이해하고 활용하느냐.. 더보기 JAVASCRIPT - 함수 (ES6 함수 선언 포함) 제가 요새 JAVASCRIPT 책을 읽고 있는데, 함수 설명이 너무 잘 되어 있더라고요. 항상 애로우 function, 익명 함수에 대해서 헷갈리고, call / apply / bind 개념이 헷갈렸는데, 이 책을 읽으니 너무 이해가 잘 됐습니다. 그래서 공유하려고 왔어요 !! github.com/rrkkee015/Learning-JAVASCRIPT/tree/master/6%EA%B0%95 rrkkee015/Learning-JAVASCRIPT 러닝 자바스크립트 : ES6로 제대로 입문하는 모던 자바스크립트 웹 개발. Contribute to rrkkee015/Learning-JAVASCRIPT development by creating an account on GitHub. github.com 제 깃허브.. 더보기 JavaScript 횡 이동 스크롤 만들기 Web을 만들다보면 아래와 같은 횡 이동 스크롤을 만들 때가 있습니다. 많은 컨텐츠를 보여주기 위함으로 사용되죠. 물론 Bootstrap에 Carousel이라는 훌륭한 방법이 존재합니다만 저는 이걸 Pick하지 않았어요 ! 저는 그리고 마우스로 딱 잡고 이동하는걸 원했거든요. 마치 휴대폰으로 슬라이딩하는 것처럼요 ! 근데 이게 생각보다 쉽지 않습니다. 흑흑 그래서 한 번 JQuery를 사용해봤습니다. 우선 html 코드를 봅시다. {% for view in view_list %} {{ }} {% endfor %} Django Template Language를 사용하여, 필요한 data를 가져왔다고 칩시다. 그렇다면 안에 div 내용물들이 많이 생기겠죠? 그걸 제일 최상단 div로 감쌌습니다. id는 sc.. 더보기 이전 1 2 다음
