블로그 이미지
평범하게 살고 싶은 월급쟁이 기술적인 토론 환영합니다.같이 이야기 하고 싶으시면 부담 말고 연락주세요:이메일-bwcho75골뱅이지메일 닷컴. 조대협


Archive»


 
 

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

프로그래밍/JavaScript | 2014.06.19 16:52 | Posted by 조대협

실습중 코멘트

클래스 내에서 변수

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라는 게임,에니메이션용 엔진이 있음

저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

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

프로그래밍/JavaScript | 2014.06.18 18:04 | Posted by 조대협

자료형

변수

null과 undefined 이외에는 모든 변수는 객체로 됨
Set을 사용할때는 key는 String만 사용 가능하며, value는 리터럴 모두 가능하다.

var a ={ test:function(){

}};
a.test();

리터럴에 대한 탐색 (순서를 보정하지 않는다.)
cf. 배열은 순서를 보장한다.

var a={1:[],2:[]};
1,2 순서대로 나오지 않는다.

배열 선언

var a = new Array(5); 길이가 5인것
var a = [5]; 멤버가 5인것을 사용. 리터럴 방식의 선언 방식
아래 리터럴 방식의 선언이 실행 속도가 더 빠름
배열의 형 체크

아래와 같이하면, a는 Object로 판별됨

typeof a

그래서, 아래와 같은 방법을 체크하는 게 좋은데,

a instanceof Array

배열을 선언하는 방식에 따라서 Array로 인식이 안될 수 있기 때문에, jQuery등에서 제공되는 함수를 사용하는 것이 좋음

함수 선언

var a = function(){
  console.log('hello');
}

function a(){

}

new Function('a)';

앞의 두가지 방식이 많이 사용됨. 세번째 방식은 사용하지 않는 것이 좋음

홀스팅

 var b=2
 function a(){
      console.log(b);
      var b=1;
  }
 a();

결과는 undefined로 나온다. 변수의 선언을 나중에 했더라도, 변수 선언은 function내에서 유효하다. 단 값은 그 행을 수행해야 값이 assign 된다.

 function(a,b){
 }
 function(){
   arguments[0]; // a
   arguments[1]; // b
 }

arguments를 사용하면, 변수의 인자를 순서대로 받을 수 있다. java의 argv[]와 유사.

this 컨택스트

this 는 해당 메서드를 호출하는 컨텍스트를 지칭한다.

 function a(){
  console.log(this);
}

a();
`

이 경우, 이 스크립트가 속한 windows 객체가 된다.
a()는 window.a()와 같기 때문에 이 window를 this로 리턴한다.
this는 실행시키는 주체를 리턴한다.

function a(){
  console.log(this);
}

var b={
  a:a // 뒤의 a는 function이 됨
};

b.a();

이 경우는 b가 a()를 호출하였기 때문에, b를 this로 인식하고 리턴한다.

var widget = new Widget();
widget.hello();

hello 메서드를 호출하는 주체가 ‘widget’ 객체이기 때문에, widget 객체가 this가 된다.
주로 callback이나 다른 프레임웍 (Jquery)등에 컨텍스트를 넘길때 사용한다.

방안 1. 이런 것을 해결하기 위해서 function을 부를때, f.call(this,변수들)식으로 넘긴다.

function f(p,h){
  console.log(this);
  console.log(p,h);
}
f.call(this,1,2);
f.apply(this,[1,2]);

방안 2.JQuery의 var a=$.proxy 라는 방식을 이용하여, this를 재정의 할 수 있다.

방안 3. 클로저를 사용한다. - 많이 사용하는 방식

var self = this
functiona(){
 self
}

클로저 (중요함)

‘부모의 유효 범위를 가지고 있는다.’
‘부모의 유효 범위에 있는 변수를 사용할 수 있다.’

var test=( function(){
  var a=1;

  return function(){ // 이것이 클로져임. 
    console.log(a);
  };
})();

var a = test();
setTimeout(function(){
  f();
},1000);

위의 예제에서 변수 a가 함수 f가 없어질때까지 계속 따라다님.

var a = [1,2,3];
for(var i = 0,l= a.length;i<l;i++){
  console.log('i'+a[i]);
  setTimeout(function(){
    console.log(i+':'+a[i]);
  },1000);
}

a[i]가 undefined로 찍힘

var a = [1,2,3];
for(var i = 0,l= a.length;i<l;i++){
  console.log('i'+a[i]);
  (function(){
    var index=i;
    setTimeout(function(){

      console.log(i+':'+a[index]);
    },1000);
  })();
}

클로저를 하나 더 만들어서 스코프를 유지함

※ 자바스크립트에서 가장 잘 잡아야 되는 것은 this와 클로져의 개념이다.

객체 생성

var Test = function(){
    // constructor와 같이
    this.member =1 ;
};

var test = new Test();
test.member = 1;

}

다른 방식으로는 prototype을 사용할 수 있음
이건 따로 공부해야 할듯

모듈 패턴

( function(){
  var a = 1;
  return {
    method: function(){

    }
  };
})();


abcd.method();

위에서 처럼 별도의 SCOPE을 정해놓고, method들을 정의한후, 그 파일을 다른 파일에서 불러다 쓴다.

DOM 처리

  • document.getElementById(‘key’);
  • document.querySelector를 사용하는 방식이 있음 (IE 옛날 버전에서는 지원이 안됨) -> JQuery로 대처해서 사용됨.
    ※ JQuery는 느리다.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id='a b c' class='a b c' style='border-color'  ></div>
</body>
</html>

스타일을 css에 만들어놓고 class에서 불러서 적용하거나, 직접 스타일을 style attribute로 적용할 수 있음.

CSS

.a{
  width:100px;
  height:100px;
  background-color:red;
}
.b{
  border:10px solid blue;

}

이벤트

이벤트 바인딩

DOM에 이벤트를 할당하는 3가지 방법
HTML이 다음과 같을때

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id='a' class='a b c' style='border-color'  ></div>
  <button id='_test'>버튼</button>
</body>
</html>

JQuery를 사용하는 방법

$('._test').on('click',function{
               alert(1);
               });

Native

document.querySelector('._test').onclick=function(){
 alert(1);
 }

또는

document.addEventHandler

HTML에서 마크업에서 직접 정의하는 방법

<button onclick='alert();'>

이벤트 delegation,캡춰링,버블링

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <div>
      <button>버튼</div>
      </div>
    </div>
</body>
</html>

부모 자식간에서

  • 캡춰링 : 부모한테서 이벤트가 자식에게 내려가는 것
    body > div > div > button
  • 버블링 : 자식에게서 부모한테로 이벤트가 올라가는것
    button > div >div >body

이벤트 발생은 캡춰링과 버블링이 순서대로 항상 같이 발생한다.

예를 들어서 부모에게만 click 이벤트를 걸어놓으면, 아래에 여러개의 버튼이 있을때, 부모에게서 받은 이벤트를 받아놓은 후에, 어떤 버튼을 클릭했는지를 받아서 분기 처리 (Selector라고 )한다.

$(document.body).on('click','button',function(e){ console.log(e.currentTarget);
 });

위의 예제는 document body에 이벤트를 걸어놓고, 하위에 버튼을 눌렀을때, 함수를 실행하는 것이다. ‘button’이라고 정해놓은것을 selector 라고 한다.

: 이렇게 부모에게 이벤트 핸들러를 잡아놓고, 차일드에서의 이벤트들을 부모에서 대신 처리하는 것을 Event delegation이라고 한다.

※ JQuery는 버블링만 지원한다. (IE7이 캡춰링을 지원하지 않기 때문에)

document.body.addEventLister((‘click’,function(){},true));
마지막 인자가 true이면 캡춰링, false이면 버블링이다.

캡춰링과 버블링은 같은 이벤트를 걸어놨을때, 어느 순서(레벨)부터 수행이 되는가등을 정할때 사용한다.

보통 버블링을 사용한다.

... on('click',function(e)){
e.stopPropagation();
});
}

버블링이나 캡춰링을 전파(다음 단계로 넘어가는 것)을 중지 시킬 수 있다.
cf. e.preventDefault(); 현재 발생된 이벤트를 취소 시킨다.

실습

  • <script &rt; 태그를 맨아래 /body 앞에 넣는 이유는 브라우져는 script 태그를 만나면 모든 일을 멈추고 스크립트 수행에 집중하기 때문에, 화면 렌더링을 멈춘다. 그래서 UX 관점에서 화면을 다 그리고 스크립트 처리를 하도록 하기 위해서, 맨 아래에 넣는 것이 좋다.

API 사용하기

동일 출처 원칙 - 다른 사이트에서 정보를 얻어오는 건 불가하다. daum.net에서 실행되는 자바스크립트로 naver.com 에서 정보를 읽어올 수 없다. 이를 해결하는 방법이 JSONP가 있다.
동일 출처 원칙의 영향을 받지 않는 것은 script를 사용하는 방식 (HTTP GET만 사용할 수 있음)

<script src="http://타사이트/a.js">
</script>
<script>
_callback({name:'john'});
</script>

<script>
_callback = function(data){
 data..
 };
}
</script>

이런 원리로 된다는 것인데, HTTP GET 방식만 호출할 수 있음

아래는 JQuery ajax의 예

$.ajax({
url:'API URL',
datatype:'jonsp',
success: function(data){ // data : 리턴되는 데이타
console.log(data);
}
});

}
})

예제에 사용할 API URL http://apis.daum.net/socialpick/search
API 설명 - http://dna.daum.net/apis/socialpick/ref#search

템플릿

Widget.prototype._getTemplate = function(id,values){
    return $('#'+id).text().replace(/{{([^}]+)}}/g,function(text,matchedText){
        console.log(arguments); // for debug
        return values && typeof values[matchedText] !== 'undefined' ? values[matchedText] : '';
    });
};

String의 replace 명령을 이용하여, regular expression을 사용한다.


저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

결과적으로 모두 Service를 정의하는 방법의 차이 - 코딩 스타일의 차이? (그렇다면 왜 만들어 놨을까?)


What is service,factory and provider


Difference between service and factory

http://blog.manishchhabra.com/2013/09/angularjs-service-vs-factory-with-example/


서비스를 생성하는 방법이 여러가지가 있는데 (클래스를 객체화 시키는 것 처럼)

Service를 가지고 직접 생성하는 방법이 있고,

아니면 Factory를 생성한후, Factory에서 instance를 받는 방법이 있고

아니면 Constructor에서, 받아서 생성하는 방법이 있고

또는 Provider를 사용하는 방법이 있다.


개념은 잡았는데, 구현 하라면 못하겄네.


아래는 service를 가지고 생성하는 방법

Service를 이용해서 생성하는 방법은 Common 서비스나 재사용 가능한 서비스를 정의 하는데 유리함



var app = angular.module('myApp', []);

     

// Service definition

app.service('testService', function(){

    this.sayHello= function(text){

        return "Service says \"Hello " + text + "\"";

    };        

});

 

// AngularJS Controller that uses the service

function HelloCtrl($scope, testService)

{

    $scope.fromService = testService.sayHello("World");

}


아래는 factory를 가지고 생성하는 방법

이건 class를 리턴해야 하는 경우에 유리함. (별 차이 없어 보이는데?)


var app = angular.module('myApp', []);

 

// Factory

app.factory('testFactory', function(){

    return {

        sayHello: function(text){

            return "Factory says \"Hello " + text + "\"";

        }  

    }               

});

 

// AngularJS Controller that uses the factory

function HelloCtrl($scope, testFactory)

{

    $scope.fromFactory = testFactory.sayHello("World");

}



저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
angularJS를 이용한 REST Client 예제
서버는 http//URL/msg에서 다음과 같은 리턴값을 보냄
HTTP/1.1 200 OK
Content-Type: application/json;charset=utf-8
Content-Length: 57

{
"data":{
"name":"Terry",
"city":"Seoul"
}
}


AngularJS 코드

<!--

reference : http://www.jacopretorius.net/2013/04/using-ngresource-with-angularjs.html

reference : https://github.com/wprl/baucis/blob/master/examples/angular-example-resource.html

There are two ways to implement REST client

first one is using $http. It is more flexible but need more coding.

The other one is $resource. It is more efficient. 

-->

<html ng-app='jsonGetApp'>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js"></script>        

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-resource.js"></script>        

<script type="text/javascript">

var jsonGetApp = angular.module('jsonGetApp',['ngResource']);

jsonGetApp.controller("MsgCtrl",["$resource","$scope","$log",function($resource,$scope,$log){

$scope.$log=$log;

$scope.jsonmsg='';

var msgs = $resource('/msg','',{query:{method:'GET',isArray:false}});

$scope.sendJson = function(){

$log.info('sendJson has been called');

var result = msgs.query();

$log.info(result);

$scope.jsonmsg=result;

}

}]

);

</script>

</head>

<body>

<div ng-controller="MsgCtrl">

<textarea rows="5" style="width: 100%" ng-model="jsonmsg" ></textarea>

<button ng-click="sendJson();">Get JSON</button>

{{jsonmsg}}

</div>

</body>

</html>

저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License



Fiddler는 간단하면서도 아주 강력한 웹 디버깅 툴이다. http://fiddler2.com

중간에서 웹서버 프록시 역할을 하면서, 오고 가는 트래픽을 모두 모니터링 및 디버깅할 수 도 있고, 기존에 보냈던 트래픽을 replay해서 다시 보낼 수 도 있다. (WireShark 보다 웹디버깅 측면에서는 오히려 더 편한듯).

여러가지 기능이 있지만,오늘은 Fiddler를 json 웹서버 처럼 사용하는 방법에 대해서 소개하고자 한다.

요즘 들어서, 특히 자바스크립트로 웹 클라이언트를 개발하는 일이 잦아지면서, 클라이언트 개발시 서버가 필요한데, 특히 JSON 서버의 경우에는 별도의 서버를 올리고, 간단하더라도 JSON 서비스를 만들어줘야 하기 때문에, JSON 클라이언트를 만드는 입장에서는 꽤나 번거롭다. 이를 Fiddler를 이용해서 간단하게 해결할 수 있다.


Fiddler의 기능중의 하나가 특정 URL 패턴으로 들어오는 request를 가로채서, 특정 Response를 보내게 만드는 기능이 있다.


바로 AutoResponder라는 기능인데, 위의 그림과 같이 설정할 수 있다.

RuleEditor에서 /jsonproxy 라는 URL로 설정해놓으면, 모든 사이트로 가는 Request에 대해 /jsonproxy라는 URI를 가지면 모두 이 Rule을 적용 받는다. 그리고, 아래에, Response를 선택할 수 있는데, 여기서는 특정 JSON 파일을 만들어서 선택하였다.

sample.json 파일의 내용은 아래와 같다.

HTTP/1.1 200 OK

Content-Type: application/json;charset=utf-8

Content-Length: 57


{

"data":{

"name":"Terry",

"city":"Seoul"

}

}

마지막으로 위의 AutoResponder메뉴에서 "Enable automatic response" 체크 박스를 선택해주면. /jsonproxy로 가는 모든 Request에 대해서, 위의 파일에 저장된 값을 리턴해준다.


저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

AngularJS 개발 환경 준비하기

프로그래밍/JavaScript | 2014.01.12 12:02 | Posted by 조대협



Sublime Text 2 에디터


1. Package installer 설치 방법

메뉴에서 View > Show Console을 선택. Console 창이 열리면 아래와 같은 명령어를 이력


import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')


2. sublime text를 리스타트 한후에


메뉴에서 Tools > Command Palette를 선택한후, 

Package Control : Install Pacakge 를 선택하면

설치할 수 있는 패키지 목록을 찾아준다.


3. 패키지 준비

 AngularJS 패키지와 - https://github.com/angular-ui/AngularJS-sublime-package

 GitHub Tools를 찾아서 설치한다. - https://sublime.wbond.net/packages/Github%20Tools


참고

  • 온라인상에서 간단하게 개발할 수 있는 툴 - http://jsfiddle.net/
  • sublime text와 github 연동하기 - http://unikys.tistory.com/331

웹서버 세팅

View등을 사용하려면 local에서 file://로 접근하면 안되기 때문에, 웹서버가 필요함

- 파이썬 웹서버가 가장 간단함

- python -m SimpleHTTPServer 로 수행하면됨.


디버깅

-Chrome에서 AngularJS 디버깅 플러그인 설치

-메뉴 > 개발도구에서 추적

-주요 문제는 Java Script Console을 보면 에러 메세지들이 나옴.


저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

Structuring jQuery with Backbone.js

프로그래밍/JavaScript | 2014.01.08 01:46 | Posted by 조대협

Structuring jQuery with Backbone.js

http://www.codemag.com/Article/1312061



저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
 

티스토리 툴바