본문 바로가기

Dev.FrontEnd

(51)
$proxy 메소드에 대해서 알아보자. $proxy 메소드에 대해서 알아보자. 123456789function Person(el) { this.name = ''; var self = this; // store reference to this $(el).change(function(event) { self.name = this.value; // captures self in a closure });}Colored by Color Scriptercs this.name에서의 this는 Person이라는 함수를 가리키고 있을 것이다. Person 함수를 내부에서도 가리킬 필요가 있다면 어떻게 해야할까? 우리는 이 함수를 생성한 객체를 가리키고 있는 this를 끌고 내려오기 위해, this의 주소를 self라는 변수에 저장하여 끌고 내려왔다. 이렇게 ..
#JavaScript MVC 모델 연습 - spinbox #JavaScript로 알아보는 MVC 모델 웹 프로그래밍에서 가장 중요한 개념 중 하나인 MVC 모델에 대해서 알아보도록 하자.최근 들어서 서버 사이드 렌더링 말고도,클라이언트 사이드 렌더링과 관련된 프레임워크들이 많이 등장하고 있다. (Angular, Ember, 등)JavaScript로 MVC는 어떻게 설계하는가?간단한 예제인 SpinBox sample을 통해서 MVC 구조에 대해 간단하게 알아보자.>> MVC 모델이란? >> 1단계. JavaScript의 작동을 확인할 기본적인 html 구조를 잡자.1234567891011121314151617181920212223242526 spinbox MVC Spinbox + - Colored by Color Scriptercs html에서 주의할 점 중 하..
7. Material Design 이해하기 - Grid 편 Material Desgin 적용하기Material Design 공식 홈페이지에 한글로 정말 자세히 나와있다.>>Material Design Get Started>> Material Design이 제공하는 디자인에 대해 알아보기 전에,웹사이트의 레이아웃을 결정하고 설계하는데 도움을 주는 Grid System에 대해 먼저 알아보자.Gridhtml code>123456789101112131415161718 s12 s12 m4 l2 s12 m4 l8 s12 m4 l2 s12 m6 l3 s12 m6 l3 s12 m6 l3 s12 m6 l3 Colored by Color Scriptercs Bootstrap 을 사용해봤다면 익숙한 사용방법일거라 생각한다.제공하는 시스템도 거의 동일하다.데스크탑일 경우에는 Larg..
8. 자바스크립트의 프로토타입(Prototype) Chapter 8. 자바스크립트의 프로토타입 자바스크립트에는 클래스라는 개념이 없다. (ECMA 2016부터 정식적으로 등장하긴 했다.)그래서 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어인 것이다. 그만큼 프로토타입의 이해에 대해서는 필수적이다. 프로토타입이란 무엇인가 어떠한 객체가 만들어지기 위해 그 객체의 모태가 되는 녀석을 프로토타입이라고 한다. Java에서의 class가 바로 자바스크립트에서의 프로토타입이다. 프로토타입은 두가지로 해석될 수 있다. 하나는 프로토타입 객체를 참조하는 prototype 속성이고 다른 하나는 객체 멤버인 _proto_ 속성이 참조하는 숨은 링크를 말한다. JavaScript에서 함수를 정의하고 파싱단계에 들어가면 내부적으로 수행되는 작업이 있다..
7. 자바스크립트의 객체와 객체 멤버 Chapter 7. 자바스크립트의 객체와 객체 멤버자바스크립트에서는 기본적으로 모든 메소드, 속성은 공개(public)으로 정의된다.비공개(private)특징을 구현할 수는 있다. 자바스크립트에서는 객체를 만들어내는 방법이 3가지 존재한다.1. new와 Object 생성자 이용 - new Object( ) 2. 객체 리터럴 이용 - { } 이 방법은 1과 비교했을 때, 내부적인 절차는 동일하다. 즉, Object 생성자를 이용해 객체가 생성되고 { }에서 정의한 멤버를 동적으로 추가하는 것이다. 12var obj = { };var obj = new Object;cs위 두 코드는 동일하다. 이렇게 정의된 멤버는 모두 외부에서 접근할 수 있는 공개 멤버이다. 3. new와 사용자 정의 생성자 이용 - new..
6. 자바스크립트의 클로저(Closure)에 대해서 Chapter 6. 자바스크립트의 클로저(Closure)자바스크립트에는 없는 class역할을 대신해 비공개 속성/메소드, 공개 속성/메소드를 구현할 수 있는 방안을 마련한다.따라서 캡슐화와 정보 은닉을 이해하기 위해 클로저를 알아야 한다.아직 클로저가 무엇인지도 모르는데, 그렇다고 한다. 클로저클로저는 두 개의 것(함수, 그 함수가 만들어진 환경)으로 이루어진 특별한 객체의 한 종류이다.환경이라 함은 클로저가 생성될 때 그 범위 안에 있던 여러 지역 변수들로 이루어진다.이 말 역시 무슨말인지 잘 모르겠다. 그렇다고 한다. 다음은 클로저가 생성되는 조건이다. 1) 내부 함수가 익명 함수로 되어 outer 함수의 반환값으로 사용된다. 2) inner 함수는 outer 함수의 실행 환경(execution en..
5. 자바스크립트 호이스팅(Hoisting) Chapter 5. 자바스크립트의 호이스팅(Hoisting)Hoist란?hoist 라는 단어의 사전적 정의는 끌어올리기 라는 뜻이다. 자바스크립트에서 끌어올려지는 것은 변수이다. 모든 변수 선언은 호이스트된다. 호이스트란 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다. 즉, 변수가 함수 내에서 정의되었을 경우, 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우, 전역 컨텍스트의 최상위로 변경이 된다. 선언(Declaration)과 할당(Assignment)을 이해해야 한다. 끌어올려지는 것은 선언이다. 코드를 통해 살펴보자123456function getX(){ console.log(x); // undefined var x = 100; console.log(x); // 100..
4. 자바스크립트의 변수 스코프(Variable scope)에 대하여 Chapter 4. 자바스크립트의 변수 스코프 자바스크립트는 다른 언어와는 달리,변수가 살아있게 되는(?) 범위가 조금 특별하다.변수 스코프에 대한 개념이 없으면 변수가 이리저리 섞여버릴 것이다.변수 스코프에 대해 알기 위해 자바스크립트 프로그램이 구동되는 원리부터 살펴보자. 자바스크립트의 특징1. 자바스크립트는 변수를 함수 단위로 관리한다. => 다른 프로그래밍 언어들은 중괄호를 사용하여 변수의 영역을 결정하는게 일반적이다. 하지만 JS는 함수를 단위로 해당 함수가 사용하는 변수를 관리한다. 2. 실행시 변수 검색은 렉시컬 영역 기준으로 한다. 렉시컬 영역(scope)이란 어휘적 영역이란 뜻으로 함수가 선언된 위치에 따라 정의되는 영역(scope)을 말한다. 3. 실행 시의 변수 검색은 변수 스코프 체..