Dev.FrontEnd (51) 썸네일형 리스트형 JavaScript 로 알아보는 클라이언트 사이드 렌더링 MVC 구조 JavaScript 로 알아보는 클라이언트 사이드 렌더링 MVC Architecture 데이터(Model), 표현 계층(View), 사용자 상호작용 계층(Controller) 1. 사용자가 애플리케이션과 상호작용한다. 2. 컨트롤러의 이벤트 핸들러가 실행된다. 3. 컨트롤러는 모델에게 데이터를 요청하고 그 결과를 뷰로 전달한다. 4. 뷰는 데이터를 사용자에게 표시한다. Model 자바스크립트는 데이터를 원격으로 가져와서 클라이언트에 일시적으로 저장한다. 클라이언트의 데이터 접속은 마치 메모리에서 데이터를 가져오듯이 즉시 처리된다. 이는 인터페이스에 큰 영향을 미친다. ORM을 이용하면 상당히 쉽게 데이터를 얻을 수 있다. ORM을 통해서 서버 데이터를 가져와서 모델 레코드를 갱신하는 방법을 사용한다. C.. 11. 자바스크립트의 함수 호출과 this Chapter 11. 함수 호출과 This모든 함수는 실행할 때마다 this라는 객체가 추가된다. 앞 포스팅에서 설명한 arguments 객체와 함께 함수 내부로 암묵적으로 전달되는 것이다. 자바스크립트에서의 this 는 여러가지 이유로 상황에 맞게 모습을 달리한다. (그래서 너무 어렵다. console.log()의 힘을 빌려 연습하자) 함수가 호출되는 방식, 즉 호출 패턴에 따른 this 바인딩을 알아보자. 상황 1. 객체의 메서드를 호출할 때 this 바인딩 객체의 프로퍼티가 함수일 경우 메서드라고 부른다. this는 함수를 실행할 때 함수를 소유하고 있는 객체(메소드를 포함하고 있는 인스턴스)를 참조한다. 즉 해당 메서드를 호출한 객체로 바인딩된다. code>12345678910111213var m.. 10. 자바스크립트 내장객체 - arguments Chapter 10. 자바스크립트의 내장 객체 - argument 자바스크립트에서는 함수를 호출할 때 함수 형식에 맞춰 인자를 넘기지 않더라도 에러가 발생하지 않는다. 정의된 함수의 인자보다 적게 인자를 넘겨주면 넘겨지지 않은 인자에 대해서는 undefined 값이 할당되고 정의된 함수의 인자보다 많게 인자를 넘겨주게 되면 초과된 인수는 가볍게 무시된다! 자바스크립트의 이러한 특성 때문에 함수 코드를 작성할 때, 런타임 시에 호출된 인자의 개수를 확인하고 이에 따라 동작을 다르게 해줘야 할 경우가 있다. code> 1234567function func (arg1, arg2){ console.log(arg1, arg2);}func( ); // > undefined undefinedfunc(1); // > .. 9. 자바스크립트의 내장 객체 - 배열 ( Array ) Chapter 9. 내장 객체로서의 배열 배열 객체 객체는 여러 개의 멤버로 구성되지만 이러한 구성 값은 정렬되지 않는다. 객체를 구성하는 멤버에는 고유한 이름이 부여되어 있는데, 특정 값에 접근하려면 이름으로 접근할 수 있다. 하지만 자바스크립트에도 넘버링되어 순차적으로 구성되어있는 객체가 존재한다. 이 경우에는 해당 값의 인덱스를 이용할 수 있다. 이 객체를 배열(array)라고 한다. 배열의 요소로는 다른 배열 객체에 대한 참조 변수, 객체, 함수 등 어떤 데이터 타입의 값도 포함될 수 있다. var ar = new Array( ); var ar = { }; 후자의 방법인 객체 리터럴을 통해 배열 생성하기를 권장한다. Array 도 Object처럼 자바스크립트에서 미리 만들어 놓은 배열 객체의 생성.. #Javascript 에서의 include ( 외부 소스 코드 삽입하기 ) #JavaScript에서 외부 소스 코드 삽입하기0. evaleval 은 전역객체의 함수 프로퍼티이다.eval 함수를 사용하면 자바스크립트 소스 코드를 동적으로 로드하여 실행할 수 있다.하지만 eval 함수로는 보안상 위험이 존재하기 때문에 그리고 eval 함수 이외에도 동적으로 자바스크립트 소스 코드를 실행할 수 있는 방법이 많이 존재하기 때문에 권장되지 않는 방법이다. 자바스크립트 컴파일러가 미리 최적화시킬 수 없기 때문에 코드 최적화에 대한 이야기에 단골로 등장하는 함수가 eval 함수이다.eval 함수의 파라미터로 넘어온 String 인자는 Javascript Parser에 의해 파싱되고 실행된다. 1. Ajax Loading12345678910111213function require(script.. #반응형 웹과 적응형 웹에 대한 고찰 반응형 웹 디자인 ( RWD; Responsive Web Design ) 반응형 웹다지안은 가로 크기에 변화를 줄 때, 컨텐츠들이 사이즈에 맞춰 유동적으로 재배치 되는 형태. " 너가 어떤 화면 크기를 갖고 있는 디바이스일지 몰라서 모두 다 준비해봤어!걱정은 하지마 너의 디바이스 크기대로 바뀔테니!! " 적응형 웹 디자인 ( AWD; Adaptive Web Design ) 브라우저 크기를 줄여도 한동안 반응이 없다가 정해진 해상도가 되면 레이아웃이 갑자기 재배치 되는 형태. 스크린에 맞는 성능을 보장하지만 모든 디바이스에 맞춘 화면을 설계한다는 것은 불가능에 가깝다. " 너가 그 크기라면 이것을 줄게! 물론 그 크기도 내가 따로 준비했지! 헉헉... " 웹 디자인의 현주소N-Screen의 모바일 시대다... [JS_Design Pattern] 2. 모듈 패턴 ( Module Pattern ) Module Pattern 자바스크립트의 모듈 패턴은 javascript 의 코드 관리 기법 중 하나로 객체 핸들링을 위한 방법론 중 하나이다. 객체에 유효범위를 주어 private, public을 구분하여 캡슐화를 할 때 사용하는 방법이다. Namespace pattern에 Lexical Scope를 추가한 것으로 보면 된다. Module Pattern 이란, 즉시 실행 함수(Immediately Invoked Function)에 this인자를 넘겨주고 함수 내부에서 exports란 인자로 접근할 수 있는 패턴을 말한다. basic>123(function(){ //something to do})();cs 모듈 패턴을 사용하는 예를 코드를 통해 살펴보자.code>12345678910111213141516.. [JS_Design Pattern] 1. 네임 스페이스 패턴 ( NameSpace Pattern ) NameSpace Pattern 전역 변수를 기초로 하는 JavaScript의 단점 때문에, 여러 스크립트가 한 페이지 안에 함께 있는 소스코드에서는 변수가 많아질 수록 이름이 겹칠 우려가 있다. 이는 협업에서도 상당히 중요한 부분이다. 뿐만 아니라 어느 곳에서도 접근할 수 있는 전역 변수이기에 소스의 신뢰도가 낮아질 수 있다. 이러한 단점들을 보완하기 위한 패턴이 네임스페이스 패턴이다. 네임 스페이스란 구분이 가능하도록 정해놓은 범위나 영역을 의미한다. 이름 그대로, 이름 공간을 선언하여 다른 공간과 구분하도록 하는 것이다. 객체 리터럴 네임 스페이싱(Object Literal NameSpacing) 하나의 전역 객체를 생성한 다음. 모든 함수, 객체, 변수를 이 전역객체에 추가하여 구현하는 방법이다... 이전 1 2 3 4 5 ··· 7 다음
