2017년 2월 26일 일요일

Asynch JS. The Poser of $.Defferred (번역중)


  • 데스크탑, 네이티브: 쓰레딩 모델 접근가능
  • 브라우저 : 쓰레딩 모델 접근 불가능(UI: DOM)를 건드리는 모든 것은 single-thread
    •  UI요소들을 건드리고 변경하는 모든 앱 로직이 항상 같은 쓰레드에서 동작
    • > app은 브라우저가 제공하는 비동기 기능을 최대한 사용하여 최대한 효율적으로 잘 동작하도록 유지하는 것이 중요
  • 브라우저의 비동기 API
    • XHR(XMLHttpRequest 또는 AJAX)와 같은 비동기 API제공
    • 예 ) IndexedDb, SQLite, HTML5 Web Workers, HTML5 GeoLocation API
    • 브라우저가 비동기 프로그래밍을 앱 로직에 노출시키는 방법 : 이벤트 또는 콜백 사용
      예) 이벤트 기반 비동기 API경우, DOM에 이벤트 핸들러 등록하고 나서 동작 호출.
      브라우저는 보통 다른 thread로 동작 수행하고, 적절한 때 main-thread에서 이벤트 발생.
  • $.Deferred의 적용
    • Promises라는 비교적 오래된 패턴+ jQuery 코어에 비동기 프로그래밍을 하는데
    • Promises패턴 + $.Deferred (jQuery 코어의 구현체)
      • Promise패턴: promise객체를 반환하는 비동기 API를 정의하는 것.
      • Promise: (결과가 해당 데이터를 가지고 해결될 것이라는 약속)
  • 사용례
    • 데이터 접근: 특히 원격데이터일 경우. 
    • UI 애니매이션: 



작성자: 시간: 댓글 없음:

javascript 에서 e.preventDefault()를 쓰는 이유

1. 앱에서 뒤로가기 버튼 눌러도 기대동작 안하는 경우 방지

  • 이벤트 바인딩 형식으로 이벤트를 구성하고, ahref="#" 이걸 기본으로 넣는경우가 많음-->  이럴경우에는 url끝에 hash(#)가 붙음
  • 그래서 뒤로가기 눌러도 url  hash붙기전 기본 페이지로 동작하여, 우리가 기대하는 기존 web view로 return되지 않아을 수 있음
  • 히스토리 꼬일 수 있기 때문에, 왠만한 event binding들에는 e.preventDefault()를 걸어주는 것을 추천 
작성자: 시간: 댓글 없음:

2016년 6월 2일 목요일

jQuery.extend의 의미

자바스크립트 jQuery를 보다가 혹은 include되어있는 js파일에서 흔히 보이던 문구

  • jQuery 1.0 version
    jQuery.extend = jQuery.fn.extend = function (obj, prop) {
           if(!prop) {prop = obj; obj = this;}
           for( var i in prop) obj[i] = prop[i];
           return obj;
    };
    • jQuery.fn 
      • jQuery.prototype( jQuery 객체의 부모같은 역할)
    • jQuery.extend = jQuery.fn.extend = ...
      • jQuery함수 객체와 jQuery 함수 객체의 인스턴스 모두 extend함수가 있다는 말.
        > new jQuery(..).extend(); jQuery.extend() 둘 다 가능하다는말
    • if( !prop) { prop = obj; obj = this;}
      • extend함수 인자가 한개만 들어올 경우, 현재 객체 (this)에 인자로 들어오는 객체의 프로퍼티 복사, 두개가 들어오는 경우에는 첫번째에 두번째 객체의 프로퍼티를 복사하겠다는 것
    • for( var i in prop) obj [i] = prop [i];
      • 얕은복사 (shallow copy) : not copy the data just reference it.
        > 보통 extend구현 대상이 객체일경우  deep copy를 하는 것이 일반적
        함수 객체인 경우는 그대로 얕은 복사 진행. 

출처: 인사이드 자바스크립트 06장 - 객체 지향 프로그래밍
작성자: 시간: 댓글 없음:
라벨: , , ,

2016년 6월 1일 수요일

jQuery에서 즉시 실행 함수 (immediate function) window 를 사용하는 이유

jQuery 코드를 보면 아래와 같이 작성되어 있다.

  • ( function(window, undefined) {
           
           //to implement

    } )( window );
  • jQuery에서 immediate function을 쓰는이유는 자바스크립트에서 variable scope때문.
    function안에서만 존재하는 "함수유효범위"를 사용하여, 그 내부에서만 사용되어 외부에서 접근하여 조작되는 data corruption을 방지할 수 있기 때문이다.

    (왜냐하면 자바스크립트에서는 변수를 선언하면 보통 전역변수로 사용되기 때문이다.)
작성자: 시간: 댓글 1개:

프론트엔드 개발자를 위한 자바스크립트 프로그래밍 - 발췌독 및 정리 (수정중)

 1장. 자바스크립트란 무엇인가
1.2 자바스크립트 구현 
 자바스크립트 구성

  • 코어(ECMAScript)
  • 문서 객체 모델(DOM)
  • 브라우저 객체 모델(BOM)
    • 1.2.1 ECMASCript
      단순 명세에서 설명하는 부분들을 구현한 언어를 부르는 말. 
      즉 자바스크립트는 ECMAScript를 구현한것
    • 1.2.2 문서 객체 모델
      XML을 HTML에서 사용할 수 있도록 확장한 애플리케이션 프로그래밍 인터페이스(API)
      DOM은 전체 페이지를 노드의 계층 구조로 변환. 
      DOM은 문서를 표현하는 트리를 생성하고, 개발자는 이를 통해 문서의 콘텐츠와 구조를 자유롭게 수정할 수 있게 됨. DOM API를 통해 노드를 쉽게 추가,교체,제거,수정 가능함
    • 1.2.3 브라우저 객체 모델
      브라우저 창에 접근하고 조작할 수 있게 하는 인터페이스
      BOM을 이용하면 브라우저에 표시된 페이지와는 별개의 컨텍스트에서 브라우저와 상호 작용 가능. 
      [한계점] 자바스크립트 표준이 존재하지 않음 > HTML5등장하며 개선중.


 1.4 요약
자바스크립트는 웹 페이지와 상호작용하도록 디자인된 스크립트 언어이며 다음 세 부분으로 구성됨

  • ECMA-262에서 정의하는 ECMAScript, 핵심 기능을 제공합니다.
  • 문서 객체 모델(DOM). 웹 페이지 콘텐츠를 조작하는 메서드와 인터페이스를 제공합니다.
  • 브라우저 객체 모델(BOM). 브라우저와 상호작용하는 메서드와 인터페이스를 제공합니다. 

 2장. HTML속의 자바스크립트

자바스크립트가 HTML페이지 렌더링을 방해하지 않으면서 공존할 길을 모색
  • 2.1 <script>요소
    • 여섯가지 속성
      • async- 스크립트를 즉시 내려받지만, 자원을 내려받거나 다른 스크립트를 불러오는 등 다른 페이지 작업 방해해서는 안된다고 지시. 외부 스크립트 파일을 불러올때만 유효
      • charset - src속성으로 명시한 코드의 문자셋을 지정. 브라우저는 대게 이 속성의 값을 무시하므로 좀처럼 쓰이지 않습니다. 
      • defer - 문서의 콘텐츠를 완전히 파싱하고 표시할때까지 스크립트 실행을 지연해도 안전함을 나타냄. 외부 스크립트 파일을 불러올때만 유효. IE 7이전 버전에서는 인라인 스크립트에서도 위 속성 유효
      • language - 폐기됨: 사용하지 X
      •  src - 실행할 코드를 포함한 외부 파일의 위치 지정
      • type - language 속성 대체할 의도로 만들어짐. 스크립트 언어의 콘텐츠 타입(마임 타입)을 지정. 
    • 인라인 자바 스크립트 코드 : <script>요소 안에 작성한 자바스크립트 코드
      위에서부터 차례대로 해석. <script>요소 내부의 코드 전체를 evaludate하기 전에는 나머지 페이지 콘튼체를 불러오지도 않고 표시하지도 않음. 
    • 외부파일에서 자바 스크립트 불러옴: <script>내부에 src속성 사용(js파일 URL지정)
      외부 파일의 코드를 해석하는 동안에는 페이지 처리 멈춤 + 파일다운로드 시간.  
      XHTML에서는 <script></script>닫는태그를 생략할수 있지만 HTML에서는 <script />이 문법을 허용하지 않음. 특히IE.
      • 2.1.1 태그 위치
        전통적으로 <script> 요소는 <head> 요소 안에 쓰는것이 일반적. 
        CSS파일이나 JS파일같은 외부 파일에 대한 참조를 한곳에서 관리하자는 것 --> [문제점] 자바스크립트 코드 전부 내려받고, 파싱하고, 해석 끝낼때까지 페이지 렌더링 멈춤. b/c 브라우저는 body태그를 만나면서 페이지 렌더링을 시작하기 때문. head요소에 스크립트 모두 불러오면 눈에 띌 정도로 페이지 렌더링 지연되며, 이 시간 동안 브라우저에는 텅빈 화면만 존재. 이런 이유로 최신 웹 앱에서는 body요소안에, 페이지 콘텐츠 마지막에 씀--> 브라우저가 페이지 렌더링 모두 마친 다음 js 코드 처리. 빈 화면 떠있는 시간 줄어서 빠르다고 느껴짐
      • 2.1.2 스크립트 처리 지연
        defer속성의 목적은 스크립트에서 페이지 구조를 바꾸지 않는다고 명시하는 것. 따라서 페이지 전체를 파싱한 후에 스크립트 실행해도 상관없음. defer속성을 설정하면 브라우저는 해당 요소를 만나는 즉시 코드 내려받지만, 실행은 지연. 외부 스크립트 파일만 적용(not 인라인스크립트)
        -스크립트 요소가 head에 있어도, 브라우저가 </html>태그를 만날때 실행됨. HTML5명세서는 스크립트 요소 순서대로 실행하도록 정의되어있지만, 현실에서는 defer로 지연시킨 스크립트가 순서대로 실행되지도 않고, DOMContentLoaded 이벤트 > ex1.js > ex2.js 보장 불가
        -따라서 <script>요소 하나만 사용하는 것이 최선
        -IE4, FF 3.5, Safari5, Chrome7 이상 지원. 다른브라우저는 무시하므로 
        =지연하고싶을때 페이지 맨 마지막에 놓는것이 여전히 최상임
  • 2.2 인라인 코드와 외부파일
    HTML파일에 JS직접 써도되지만, 외부 파일로 분리하는걸 추천
    • 관리하기 쉬움: 마크업과 무관하게 js 수정가능
    • 캐싱 - 브라우저는 특정 설정에 따라, 외부에서 연결된 js파일 모두 캐시. 서로 다른 페이지에서 같은 파일 사용한다면 한번만 내려 받을 수 있으므로 속도 빨라짐
    • 미래에도 안전: 외부파일 call문법은 XHTML이나 HTML모두 비슷
//todo..
 3장. 언어의 기초


  •  3.3 변수ECMAScript는 느슨한 변수 타입 사용 = 어떤타입의 데이터라도 변수에 저장 가능var msg; //undefined 할당var msg; // locally assignedmsg = 10 ; //globally assigned
  • 3.4 데이터 타입
    • 기본데이터 타입 primitive data type
      • Undefined
      • Null
      • Boolean
      • 숫자
      • 문자열
      • 객체: 이름-값 쌍의 순서 없는 목록
    • 3.4.1 typeof연산자
      • 정의되지 않은 변수: "undefined"
      • boolean
      • string
      • number
      • 함수를 제외한 객체 또는 null : "object"
      • 함수: function
    • 3.4.2 undefined 타입
      명시적으로 undefined할당가능, 변수 할당안된경우 default로 undefined할당
      출력시 명시적인경우 undefinedㄹ고 나오지만 묵시적인경우 error
      > 권장 : 변수 늘 초기화하면,  undefined를 초기화여부를 확인 가능한 field
    • 3.4.3Null타입
      빈 객체 가리키는 포인터.
    • 3.4.4 boolean
      데이터 타입 변환규칙

 데이터 타입
true로 변환되는 값
false로 변환되는 값 
 불리언
true
false 
 문자열
비어있지 않은 문자열 모두 
""(빈문자열) 
 숫자
0이아닌 모든 숫자, 무한대 포함 
0,NaN
객체
모든 객체 
null 
Undefined 
해당없음 
undefined 

  • 3.4.6 문자열타입
    문자 리터럴
     리터럴
    의미 
    \n
    줄바꿈 
    \t 
    탭 
    \b 
    백스페이스 
    \r 
    캐리지리턴 
    \f 
    폼 피드 
    \\ 
    역슬래시(\) 
    \' , \"
    작은따옴표, 큰따옴표 - "He said \"hey.\"" 
     \xnn
    16진수 코드 'nn'로 표현한 문자입니다. 여기서 'n'은 0부터 f까지의 16진수
    \x41 > 65(decimal) > ascII> '"A"입니다.  
     \unnnn
    16진수코드 'nn'로 표현한 문자.
    \u03a3은 그리스 문자 입실론???임 

    문자열의 성질
    : 문자열은 불변(ECMAScript)입니다.
    //todo: 더 추가하기
  • 3.5.7 동일 연산자
    -종류: 
    [ 타입강제 ]동일 /비동일 연산자(타입변경후 비교) , == , 객체에 대한 참조 비교(reference 비교)  
    [타입비강제] 일치/ 불일치 ,===
  • 3.7.1 매개 변수의 이해 
    매개변수 숫자, 데이터 타입 체크 X (interpreter 에러로 간주 X) > b/c 매개변수가 내부적으로 arguments 배열로 표현되기 때문에. 



 //todo: 변수 등등 다 정리해야해 중요

  • 4.4 요약
    • 자바스크립트 변수의 종류 : 원시값, 참조값
      • 원시값은 고정된 크기를 가지며 스택 메모리에 저장됨
      • 원시 값을 한 변수에서 다른 변수로 복사하면 값 자체가 복사
      • 참조 값은 객체이며 힙 메모리에 저장
      • 변수에 참조값을 저장하면 객체에 대한 참조만 저장할뿐
      • typeof연산자는 값의 원시 타입 판별, instanceof 연산자는 값의 참조타입 판별
    • 원시값과 참조값의 모든 변수는 스코프라고 불리기도하는 실행 컨텍스트에 존재, 실행 컨텍스트는 변수가 존재하는 기간을 결정하며 어느 코드가 해당 변수에 접근할 수 있는지도 결정함. 
      • 실행 컨텍스트에는 전역 컨텍스트와 함수 컨텍스트가 있음
      • 실행 컨텍스트에 진입할 때마다 스코프 체인이 만들어지며, 스코프 체인은 변수와 함수를 검색하는데 쓰임
      • 함수 컨텍스트는 해당 스코프에 있는 변수, 해당 스코프를 포함하는 컨텍스트에 있는 변수, 전역 컨텍스트에 있는 변수에 모두 접근가능
      • 전역 컨텍스트는 전역 컨텍스트에 있는 변수와 함수에만 접근할 수 있으며 로컬 컨텍스트(함수) 있는 데이터에 직접접근 불가
      • 실행 컨텍스트는 변수에 할당된 메모리 언제 해제할 수 있는지 판단하는데 도움
    • 자바스크립트는 자동으로 가비지 컬렉션을 수행하므로 개발자가 메모리 할당,회수에 신경쓸 필요 없음
      자바스크립트 GC 루틴 요약
      • 값이 스콮 벗어나면 자동 표시되고, 다음 GC실행시 값 삭제
      • 주로 쓰이는 GC 알고리즘은 '표시하고 지우기'로, 현재 사용하지 않는 값에 표시 남겨서 메모리 회수
      • 다른 알고리즘 -카운팅: 값 참조 추적: 거의안씀, IE에서 아직 쓰임. DOM요소처럼 네이티브 자바스크립트 객체가 아닌 객체를 JS에서 접근해야하기 떄문에
      • 참조 카운팅 알고리즘은 순환 참조 문제가 있음
      • 변수에서 참조 제거하면 순환 참조 문제 해결할 수 있고, GC에도 도움. 가능한 많은 메모리 회수해 효율적 관리하려면- 전역 객체, 전역 객체의 프로퍼티, 순환 참조에 대한 참조를 제거해야함
         

 5장. 참조 타입
 5.2 Array 타입
다른 언어와 달리, 어떤 타입의 데이터도 넣을 수 있음
생성방법: 생성자 new Array(length), new Array("data1", "data2" , "data3");
배열 리터럴 var colors = ["red","green","blue"];

  • 5.2.1 배열감지
    객체와 배열의 구분 어려움
    > if (value instanceof Array) 문제점 : 실행 컨텍스트가 하나뿐이라고 가정. 
    만약 웹 페이지에 프레임이 여러개 있다면, 전역 실행 컨텍스트가 2개 있고, Array생성자도 두개있음.
    -> ECMAScript 5는 Array.isArray()메서드 제공. (실행컨텍스트와 무관하게 주어진 값이 배열인지 확인)
  • 5.2.2 변환 메서드
    toString(), valueOf(), arrays.join(",")
  • 5.2.3 스택 메서드
    var count = colors.push("elem1","elem2"); //return the length of array 
    var item = colors.pop(); //the last elem comes out
  • 5.2.4 큐 메서드
    var count = colors.push("red",  "green"); //put data in the tail
    var item = colors.shift(); //the first elem comes out
    var count = colors.shift("first"); //put data in the head 
  • 5.2.5 정렬 메서드
    reverse(), sort();
    var values =[0,1,5,10,15];
    values.sort(); //0,1, 10, 15,5
    values.sort(compare);

    function compare(val1, val2) {if(val1 < val2) return -1; else if(val1 > val2) return 1; else return 0;}
    //자신을 호출한 배열에 대한 참조 반환 > array.sort(compare).reverse() 가능하다는 뜻
  • 5.2.6 조작 메서드
    concat(): var colors2 = colors.concat("two", ["three","four"]);
    slice()
    splice()
  • 5.2.7 위치 메서드
  • 5.2.8 반복 메서드
    매개변수 2개 받음: 각 데이터에서 실행할 함수, 함수 실행할 스코프 객체
    • every() - callback 호출결과 전부 true일경우 return true
    • filter () - callback 값이 true인경우에 해당하여 새 배열에 저장
    • forEach() - callback호출. 반환값 없음. 
    • map() - callback호출하고 결과를 배열에 저장
    • some() - callback결과 하나라도 true이면 return true;


 5.8 요약
자바스크립트 객체는 참조 값이라고 불리며 다음과 같이 내장된 참조 타입을 통해 특정 타입의 객체를 만들 수 있음

  • 모든 참조 타입은 Object 타입의 작동방식을 상속
  • Array타입은 데이터 순서 있는 목록이며 포함 값을 조작하고 변환하는 기능 제공
  • Date타입은 현재 날짜 시간 포함해 그에 관한 정보를 제공, 가공하는 메서드 제공
  • RegExp타입은 //todo
자바스크립트의 독특한 점은 함수가 Function 타입의 인스턴스, 즉 함수도 객체의 일종
함수는 객체이므로 메서드가 있고, 이 메서드를 통해 함수 동작방식 확장 가능

JS는 원시 래퍼 타입이 있어서 원시값을 객체처럼 다룰 수 있음. 
원시 래퍼 타입: Boolean, Number, String
  • 각 래퍼 타입은 같은 이름의 원시 타입에 대응
  • 원시 값을 읽기 모드로 접근할 때, 원시 래퍼 객체의 인스턴스가 만들어지며 이를 통해 데이터 조작
  • 래퍼 객체는 원시값을 조작하는 문장이 실행되는 즉시 파기
내장 객체인 Global, Math 객체는 코드가 실행되는 즉시 생성. 
ECMAScript에서 Global 객체에 접근방법은 없지만 웹 브라우저는 Global 객체를 window객체로 구현. 
Global 객체는 모든 전역 변수와 함수를 프로퍼티 형태로 포함. 
Math객체에는 수학계산에 필요한 프로퍼티와 메서드 내포. 





 8장. 브라우저 객체 모델
8.1 window객체
BOM의 핵심에는 브라우저의 인스턴스인 window객체가 있음
window객체의 역할: 브라우저 창의 자바스크립트 인터페이스 구실, ECMAScript Global객체로 기능
Therefore, window가 global객체 구실함 > @ 웹페이지에서 정의한 모든 객체,변수,함수

8.1.6 인터벌과 타임아웃
브라우저에서 자바스크립트는 단일 스레드로 실행되지만, 타임아웃과 인터벌을 통해 코드가 특정 시간에 실행될 수 있도록 조절 가능.
  • 절대하면안됨, 성능저하: setTimeout("alert('AA')", 1000);
  • 다음과 같이: setTimeout(function() {alert('AA');},1000);
  • 타임아웃으로 실행하는 코드는 항상 전역 스코프에서 실행, 함수의 this값은 스트릭트 모드가 아닐때는 항상 window이고 스트릭트 모드에서는 항상 undefined














작성자: 시간: 댓글 1개:
라벨: , , , , ,

2016년 5월 25일 수요일

Cross Domain 문제 해결법 (jsonp, cors )

  • 문제상황: Cross Domain
    • Cross Domain문제란?
    • ajax호출을 통해 다른 도메인에 있는 자원에 접근할 때
      다른 도메인에 존재하는 데이터를 가져오는 경우, 자바스크립트가 있는 서버가 아닌 다른 서버와 통신하면 보안이슈에 의해서 통신할 수 없음. ( mash up application개발시에 주로 발생) 
  • 해결방법
    1. Server Proxy
      • 웹 브라우저에서 보여지고 있는 문서와 동일한 origin에 proxy를 두고, 다른 origin의 데이터를 가져옴. 
    2. Cross Document Messaging
      • 페이지간 커뮤니케이션 지원하는 API
    3. JSONP
      • html에 script src를 추가하여, 필요한 자원을 로드하듯이, 필요한 페이지 주소를 cript사이에 넣음
      • 예)
        <script> function test(data) {
                     console.log(data); //log로 데이터 출력됨
        }
        </script>

        <script src="http://google.co.kr/example/api/getSearchPages/news.json?callback=test"></script>
      • 한계점: HTTP METHOD:GET만 가능
    4. CORS
      • cors.js를 이용하여 요청
      • response.setHeader("Access-Control-Allow-Origin","*");
  • 참고
    • https://www.w3.org/TR/cors/
    • https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
작성자: 시간: 댓글 없음:
라벨: , ,

2016년 5월 12일 목요일

IntelliJ 한글 인코딩 깨짐 해결 (properties file, utf-8 encoding): "Transparent natvie-to-ascii conversion"

  • [문제상황]: 프로젝트 Import후 모든 한글 파일들이 깨짐
    • project > preferences > 에서 인코딩 UTF-8선택하였지만 --> 한글깨짐
  • [해결방법]: 다음과 같이
                 
    • Project> preferences > editor> file encodings에서 Properties File에 Transparent native-to-ascii conversion체크
    • Transparent native-to-ascii conversion:
      JetsBrains의 설명에 따르면, Standard JAVA API는 ISO 8859-1을 이용하여 Properties파일을 인코딩함. 
      하지만 위에서 properties파일을 UTF-8로 세팅함
    • 만약 위의 설정을 체크하면 다른인코딩을 사용한다면, properties파일은 \0A 과 같은 escape들의 연속으로 저장되더라도, 보여지기는 한글이나 ASCII아스키로 보일 수 있도록 지정해주는 옵션이다. //해결!
      https://www.jetbrains.com/help/idea/2016.1/configuring-encoding-for-properties-files.html?origin=old_help
       
작성자: 시간: 댓글 없음:
라벨: , ,
피드 구독하기: 글 (Atom)