자바스크립트 스터디 노트 #2

실습중 코멘트

클래스 내에서 변수

var MyClass = function(){
    var local;                    // 생성자 내에서만 유효
    this.objectvalue;            // 객체 단위로 유효
}
MyClass.prototype.classvalue;    /// 클래스 단위로 유효

text와 html

$(‘#xxx’).html : <BR> 등의 HTML 태그가 반영됨
$(‘#xxx’).text : <BR> 등의 HTML 태그가 문자열로 저장됨 (실제 태그 효과가 없어짐)

JQuery

jqeury 엘리먼트는 생성자에서 객체 변수로 캐슁해서 사용하도록 하는 것이 좋다.

클래스

클내부 변수나 내부 메서드는 _를 사용하거나, _$로 시작하는 것이 좋다.
구글의 자바스크립트 네이밍 컨벤션 참고할것.

자바스크립트 엔진

싱글 쓰레드임을 명시 할것.
콜백은 비동기로 수행된다. 코드 순서대로 수행이 안되기 때문에 주의. 순차 실행이 필요한 경우, 콜백함수내에 정의할것

크롬데브툴

각 기능들에 대해서 간략하게 살펴본다.
자세한 기능은 https://developer.chrome.com/devtools/index

네트워크

헤더, 프리뷰등 리턴값을 볼 수 있고,
필터를 통해서, 헤더,바디,XHR등 특정 부분들만 보는 것도 가능하다.

소스

로딩된 자바스크립트나, CSS등을 볼 수 있다.
중요한 기능 - 소스 파일을 수정해서 반영해서 볼 수 있다. 서버에 있는 소스일지라 할지라도 가능. ADD Folder to workspace 라는 기능을 이용해서 브라우져에서 에디트해서, 추가할 수 있음. (내소스코드와 서버쪽 소스코드를 맵핑/일치 시킬 수 있다.)
디버깅하는 기능이 있음-보통 console.log로 디버깅하는데, 소스에서는 직접 소스를 봐서, 여기서 브레이크 포인트를 걸어서, 일반적인 IDE의 디버거처럼 사용할 수 있다. 브레이크 포인트를 걸때, 오른쪽 마우스 버튼을 누르면 conditional break point를 걸 수 있다. (변수나 특정 조건에 따를때만 브레이크를 거는 기능)
브레이크포인트에 걸렸을때, console에서 console.log 등을 이용해서 값들을 추척해볼 수 있다.

※ Snippet - 코드 조각을 저장하는 기능

엘리먼트

엘리먼트창에서 오른쪽에서 >= 메뉴를 누르면 에뮬레이션이라는 기능이 있음, 폰 종류를 골라서, 폰 형태에 맞춰서 보여줄 수 있음. (중요한 기능. )

타임라인

녹화 버튼을 누르면, 서버와 통신한 기록 내용을 볼 수 있음.
메모리 사용 기록 등

프로파일

CPU,메모리 힘등을 자세하게 프로파일링이 가능함
메모리 릭등을 잡을 때 사용이 가능함. (스냅샷을 여러개 찍어서, 스냅샷등을 비교할 수 있는 기능이 있음)

리소스

웹 SQL,Index SQL등을 살펴볼 수 있음.

Audit(감사)

페이지가 어떤 부분이 안좋다, 문제가 있다는 부분을 자동으로 검출해서 리포트를 출력해줌.
비슷한 기능으로 페이지 스피드라는 플러그인이 있음 (구글에서 만들어짐. )

콘솔

다양한 기능들이 있음. 단순히 console.log 를 찍는 출력이 아니라
CLI 명령을 사용할 수 도 있음.

console.time('111');
console.timeEnd('111');

00.000ms 단위까지 출력해준다. (자바스크립트는 일반적으로 ms 단위 측정만 가능한데, console은 더 미세한 측정이 가능함)

자바스크립트 라이브러리

www.jsdb.io에 들어가면 자바스크립트 라이브러리들이 잘 정리되어 있음.(분류가 잘 되어 있음)

• 에니메이션 : 모바일에서는 3.js 정도가 유행. 특별하게 주류가 없음 보통 jquery 애니메이터를 사용함
• 애플리케이션 툴 :
  • Angular.js,Ember,Backbone 들이 MVC 성격,
  • underscore는 유틸성으로 많이 씀.
  • underscore를 좀 더 빠르게 만든게 로우대쉬라는게 있음
  • 템플릿 엔진. Handlebar등 종류가 많음 . 템플릿 엔진은 코드와 뷰를 분리하는 관점에서 거의 필수이다.. 주로 성능이 선택 요소가 됨. (컴파일 방식이 빠름)
  • requirejs : 모듈화 툴
  • Q : Promise 패턴을 구현해놓았음. (async, callback hell등 처리) - 중첩 콜백을 간소화해서 코딩이 가능함.-
• 오디오 : 사운드 메니져
• 개발툴 :
  • Bower 유명은 한데, 실제로 적용하기가 어렵다. (패키지 정보등을 개인이 올리는게 아니기 때문에 )
  • JSHint 정적 검사툴 (Strict 하게 검사됨. 오류가 아닌것도 오류로 검색한다.)
  • Grunt 빌드도구
  • Jasmine 테스트
• DOM 핸들링
  • JQuery : 가장 강력함.
  • Prototype : 도태됩
  • BootStrap : 많이 쓰는 UX
• 이미지
  • Three JS 3D에서 유명함

자바크립트 테스팅

Jasmine,QUnit,Mocha 등이 사용됨.
Mocha는 Mocha 단독만으로는 안씀. (다른 라이브러리와 섞어 쓰는게 추세, 어떤 라이브러리?) NPM 랭킹으로는 Mocha가 더 높음
※ 자바스크립트 문서와 도구는 JSDOC을 많이 사용함

정적 검사

JSLint (이게 더 스트릭트), JSHint
실제 프로젝트에는 JSHint가 더 적용하기 좋음. 반드시 실제 프로젝트에서는 사용하도록 하자

최적화

자바스크립트도 느리다. IE8 같은것을 해보면, 느리다. 최적화가 필요하다.

Reflow

비용이 크다. (리플로우를 최소화해야 한다.)
개념을 잡을려면 유투브에서 reflow 라는 이름으로 동영상을 찾아보면 실제 화면을 렌더링 하는 동영상들이 있음.
: 화면이 렌더링 되는 과정 주로 언제 발생되냐?

• 화면에 표시되는 구성요소의 크기,위치,표시 방법등이 변경되는 경우들과 같이 스타일을 지정하거나, 또는 스타일 값을 가져올때

  obj.style.width=
  obj.style.height=

• 화면에 객체가 추가 제거되는 경우
• 스크롤과 관련

어떻게 조심 하냐?

• 객체 추가제거 : 하나씩 append하는게 아니라, body.innderHTML=”문자열” 같이 한방에 추가한다. 효과가 매우 좋음 단 실제로 객체단위로 관리가 안됨
• documentFragment : 객체 단위로 관리를 하기 위해서 화면에 표시 되지 않는 껍데기 document를 만들어놓고, 사용함 (innerHTML 방식이 더 빠름)

  document.createDocumentFragment

• CSS 변경 : 화면에 적용되기 전에 element를 만들어서 붙임

  예제 sudo code
  var obj = createElement()
  obj.style.width=xx
  obj.style.width=xx
  document.addElement(obj)
  

• 캐쉬 : 속성들의 값을 가지고 오는 것을 줄이기 위해서, 캐쉬를 이용하는 방법을 쓰자. DOM 접근 비용도 크다. Parent element를 캐슁하는 것도 방법. 그 dom 까지 찾아가는 시간 까지도 줄일 수 있음.
• CSS 변경 : 스타일 룰 방식(CSS Rule) : (자세한것은 찾아볼것)
• CSS 클래스를 잘 활용
  ※ jsPerf라는 사이트를 이용하면, before, after의 코드 성능을 비교해볼 수 있다.
• HTML collection은 배열처럼 보이지만, Collection은 문서에 정의된 순서대로 변환하기 위해서 그때 마다 DOM 파싱이 발생한다. 대층 객체 목록을 반환하는것 childNode, getElementByTagNames() 등등
• CSS selector
  • 선택자는 오른쪽에서 왼쪽으로 탐색한다.
  • 선택자는 구체적이기 보다는 간단하게 하는게 더 좋다. (구체적이면 구체적으로 나열한거 다 찾는다.)
  • 아이디는 엘리먼트를 찾는 가장 빠른 방법이다.
  • 검색 범위는 줄여주는게 좋다.

자주 하는 실수

• HTML element가 로드 되기 전에, javascript가 로드 되어서, 엘리먼트를 참조하는 사례 —> 자바스크립트를 HTML이 로딩된 다음에 로딩 되도록 <script> 태그를 body 아랫부분에 넣으면 됨

box2d 라는 물리 엔진
네이버의 collie라는 게임,에니메이션용 엔진이 있음