본문 바로가기

Dev.FrontEnd/JavaScript

(41)
#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에서 주의할 점 중 하..
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. 실행 시의 변수 검색은 변수 스코프 체..
3-3. 자바스크립트의 함수 / Argument Chapter 3-3. 자바스크립트의 함수 / ArugumentArgument 함수 인자 Argument parameter : 함수를 정의하는 코드에서 괄호 안에 정의하고 있는 변수 ( = 매개변수 ) arguments : 함수를 호출하는 곳에서 함수에 전달하는 값 ( = 인자 ) argument는 배열과 비슷한 객체를 말한다. 자바스크립트에서는 함수에서 정의하는 매개변수 개수와 실제로 호출에 사용되는 인자의 개수가 반드시 같지 않아도 된다. 함수에서 정의한 매개변수의 수보다 많은 수의 인자값이 전달되면 자바스크립트는 Arguments 객체를 생성하고 ( Arguments 타입의 객체는 함수가 호출되면 자바스크립트가 자동으로 생성하는 객체이다.) 객체의 값을 앞에서부터 차례로 받아서 매개변수에 할당하고 ..
3-2. 자바스크립트 함수 / 정의, 종류 Chapter 3-2. 자바스크립트의 함수 / 정의, 종류함수 정의 3가지 방법 첫번째,123function add(x,y){ return x+y;}cs파싱하는 단계에서 함수 변수인 add가 정의되고, 함수를 호출하면 런타임에 x,y가 정의된다. 두번째,123var add = function(x,y) { return x+y;}cs실행코드블록을 갖는 함수를 정의해 add라는 변수에 할당하고 있다. 이렇게 정의된 함수는 이름이 없다. 이름 대신 변수로 호출할 수 있다. 실행코드로서 런타임에 함수가 정의된다. 세번째,1var add = new Function(“x”, “y”, “return x+y;”);csFunction이라는 생성자(객체)를 사용하여 함수를 정의하는 방법으로 new와 함께 사용해야 한다.이 ..