The Execution Context : 실행문맥 제대로 이해하기

원문 출처 : http://www.jibbering.com/faq/faq_notes/closures.html

평소에 일반적인 C,C++,Java,C# 이딴 언어를 주로 사용하다 자바스크립트와 같은 스크립트 언어를 조금만 하다보면, 금방 궁금증이 늘어난다.

과연.. 요놈들은 왜? 이렇게 작동하는걸까? 라는 좀 원초적인 질문이다.

어제 오늘 클로저라는 놈을 제대로 이해하기위해, 각종 아티클들을 찾아보다가..
괜찮은 아티클을 발견하고, 지금 번역은 아니고.. 그냥 해석해서 이해하는 중이다.
사실 클로저라는 놈을 이해하기위해선, 자바스크립트 내부적으로 작동하는 매커니즘을 이해할 필요가 있다..

이름하야, Indentifier Resolution, Execution Contexts, Scope Chains, Property Chain 같은 용어와 내부 매커니즘을 이해해야 한다는 얘기다.

오늘은 그중에서 실행문맥(Execution Contexts)에 대해서 정리해보자.

위에 원문을 A4로 출력하면, 대략 4페이지에 나오는 내용이다.

실행문맥은 ECMAScript 스펙에서 정의 된대로 추상적인 개념이고, 요 스팩을 구현하기 위해서 요구되는 지침정도라고 생각해보면 되겠다. 하지만 스펙에는 어떻게 구현하라는 이야기는 없으므로, 대충 개념만이라도 이해하자.

모든 자바스크립트 코드의 실행은 실행문맥안에서 이루어 진다. 전역 코드가 실행될때는 전역실행문맥이라고 불리는 곳에서 실행된다. 그리고 그 전역실행 문맥 안에 존재하는 각각의 function 들은 그 펑션마다 고유의 실행 문맥이 만들어지고 그 안에서 실행이 된다. eval 펑션은 예외다.

자바스크립트 펑션이 호출되면, 실행문맥안으로 들어가고 그안에서 새로운 펑션이 호출되면, 새로운 실행문맥을 만들고, 그 실행문맥 안으로 들어간다. 그리고 값이 리턴되면, 본래 호출되었던 펑션으로 복귀를 하게 되고, 이값도 리턴이 되면, 실행문맥은 사라진다.
결국 실행문맥이라는 것은 우리가 흔히 메모리 구조를 그릴때 그리는 스택구조와 비슷하다고 보면 되겠다.

일반 실행 문맥
실행문맥이 생성될때, 많은 일들이 순차적으로 일어난다.

1. Activation 객체 생성
먼저, 펑션의 실행문맥안에서 특별한 매커니즘을 갖는 Activation  이라는 객체를 만든다. 이 Activation 객체는 결과적으로 이름이 있는 프로퍼티에 접근할수 있으므로, 일반적인 객체라고 봐도 무방하다. 하지만, 일반 객체들이 모두 가지고 있는 프로토타입(prototype)을 가지고 있지 않고, 자바스크립트 코드에 의해서 직접적으로 참조되지 않는다.

2. arguments 객체 생성
다음으로 배열과 비슷하게 index를 가지는 Arguments 객체를 생성한다. 이 객체는 length(호출자가 넘겨주는 인자의 갯수)와 callee(실행중인 함수 객체-재귀를 위해 필요하다) 프로퍼티도 갖는다.
그리고 앞서 만든 Activation 객체에 “arguments”라는 이름의 프로퍼티가 만들어지고, 이 arguments객체를 참조할수 있도록 할당(assign)된다.

3. scope 할당
다음으로, 실행문맥은 Scope를 할당(assign)한다. 스코프는 객체들의 리스트로 구성된다. 흔히들 스코프 체인이라고 이야기한다. 한편 각 펑션 객체는 내부적인 [[scope]] 프로퍼티를 갖고 있는데, 그 [[scope]] 프로퍼티 역시 객체들의 리스트로 구성된다.
실행문맥에 할당된 스코프는 맨 앞에 Actiovation객체를 넣고, 호출된 본 함수 객체의  [[scope]] 프로퍼티가 참조하는 리스트들을 함께 구성한다.

4. 변수 인스턴스화 과정수행
다음으로, ECMA 262에서 “Variable” 객체로 언급한  객체들을 사용해서 변수의 인스턴스화(“variable instantiation”) 과정이 일어난다. Activation 객체 또한  Variable 객체로써 사용된다. (결국 Activation 객체와 Variable 객체는 사실상 같은 객체다. 아주 중요하니 체크하기 바람!!)

함수 표현식에서 선언된 공식적인 파라메타들을 식별자로 Activation 객체의 프로퍼티로 생성하고, 호출자로 부터 넘어온 인자값은 그 프로퍼티들의 값으로 한다. 인자가 넘어오지 않은 프로퍼티는 그 값으로는 undefined 할당이 된다.

함수 선언에서 사용된 함수 이름은 그 이름으로 함수 객체를 만들고 Variable 객체(이름은 다르게 표현하지만 결국 Activation 객체를 말한다)의 프로퍼티로 생성한다.변수 인스턴스화의 마지막 과정은 함수 안에서 지역변수로 선언된 모든 변수들을 Variable 객체의 프로퍼티로 생성하면서 마무리 짓는다.

변수 인스턴스화 과정에서 지역 변수로 생성된 프로퍼티들은 모두 undefined 값으로 초기화된다. 실질적인 값 초기화 과정은 함수 내부 코드가 실행될때 비로서 값이 정해진다는것을 잊지말자!

 arguments 프로퍼티를 가지는 Activation 객체와 지역 변수로 쓰이는 정해진 이름의 프로퍼티들을 가지는 Valiable 객체는 결국 서로 같은 객체다. 그리고 식별자 arguments 가 마치 지역변수로써 쓰일수 있도록 허가되어진다.

5. this 키워드 값 할당
마지막으로 this 키워드 값이 할당된다. 만일 this가 어떤 객체를 참조하도록 할당이 되면, 프로퍼티 접근 연산자를 통해서 그 this 키워드가 가르키는 객체의 프로퍼티들을 참조 한다.
즉, this.(프로퍼티 이름) 이딴 식으로 참조할수 있게 되고, this 에 null 값이 할당되면, 이 this 키워드는 전역 객체(window)를 참조하게 될것이다.

전역 실행 문맥

전역 실행 문맥은 arguments 가 없기 때문에 정의된 Activation 객체를 가질필요가 없다는 것이 약간 다르다. 하지만 스코프는 필요로 한다. 전역 실행 문맥의 스코프 체인은 오직 전역 객체 하나만을 가르킨다.

역주) 코드에서 선언된 전역변수는 모두 이 전역객체의 프로퍼티로 들어가기 때문에 사실상 전역객체 하나만 가지고 있는 꼴이 된다.

일반적인 최상위 레벨의 함수 선언들은 전역 실행 문맥의 내부 함수 들로써, 변수 인스턴화 과정을 거친다. 즉, 이 변수 인스턴화 과정을 거치게 되므로, 결론적으로 이 함수들은 전역 객체의 프로퍼티로써 존재하게 된다.  그리고 마지막으로 전역객체는 this 객체를 통해서 참조 될수 있다.

휴..-_- 그냥 원문 읽는거랑 번역해서 쓰는거랑 차이가 심하군..2시간이나 걸렸넹..ㅜㅜ..

AJax 토글형 댓글 링크 버튼 만들기

제목을 어떻게 해야할찌 몰라서.. 일단 [Ajax 토글형 댓글 링크 버튼] 이라고 적고 시작한다.
이게 어떤거냐면,.. Me2day에 있는 댓글(0) 버튼이라고 생각하면 된다.
미투데이에 요 버튼이 좀 재밌는데.. 버튼이라고 하면, 보통 input 태그를 이용한 버튼을 이용하지만..
요건 링크와 자바스크립트 그리고 CSS 스타일을 적절히 이용한다.

먼저 링크,
링크는 보통 아래처럼 이용한다.
<a href=”이동할 주소”>이동링크이름</a>
<a href=”./comment”>댓글</a>

여기에 자바 스크립트를 적용해서 이벤트를 걸면,..
<a onclick=”이벤트함수이름();” href=”이동할 주소”>이동 링크 이름</a>
<a onclick=”comment_list_toggle();” href=”./comment”>댓글</a>

위에 처럼 쓰는게 보통인데.. 위에 경우엔 보통 링크를 클릭하면 해당 링크로 점프를 띤다.
그러면 당근 버튼 효과를 내지 못한다.. 그래서 아래처럼..

<a onclick=”이벤트함수이름(); return false;” href=”이동할 주소”>이동 링크 이름</a>
<a onclick=”comment_lists_toggle(); return false;” href=”./comment”>댓글</a>

자바스크립트에 false를 리턴하게 되면, 클라이언트에서 서버로 전송을 하지않고, 클라이언트에서 함수만 실행하고 종료를 하게 된다. 보통 취소 버튼을 구현할때 요걸 많이 쓴다.

그러면 바로 요 이벤트 함수를 통해서 comment 라고 지정해둔 id 태그의 스타일을 변화시키면 된다.
<script type=”text/javascript”>
//<![CDATA[
        function comment_lists_toggle() {
            if(document.getElementById(“comment”).style.display==”none”)
            {
                document.getElementById(“comment”).style.display=””;
            }   
            else
                document.getElementById(“comment”).style.display=”none”;          
        }
//]]>
</script>


기본은 머 저렇게 하면되는데… 기본적으로 Ajax 콜백에 대한 이해가 있으면,..
어렵지 않게 구현할수 있을것이다..

사실 내가 젤 어려웠떤건,..-_- 따옴표 처리문제..ㅜㅜ..
아무대로 에디터를 한번 따로 만들어봐야겠다..

————— updated 2012.07 —————–
간혹 리피러를 확인해보는데, 이 포스트가 검색에 걸려 읽으시는 분들에게…
이글은 2008년 2월에 작성한 글로써, 매우 전문적인지 않은 글이니… 그냥 그려려니 참고만하세요. 🙂

윗 글에서 몇가지 정정한다면,
1. 엘리먼트의 return false;
 

 <a onclick=”이벤트함수이름(); return false;” href=”이동할 주소”>이동 링크 이름</a>

여기서 클릭 이벤트에 return false;를 하는 이유는 본래 a태그가 하는 기본 기능을 수행하지 않겠다는 의미입니다.  a 태그의 기본 기능은 바로 href로 지정된 url로 이동하는 기능을 말합니다.
따라서 위와 같이 걸면, a 태그의 기본기능을 수행하지 않게 되는 거죠!
이거 a 태그뿐만 아니라 기본 기능이 걸려있는 모든 엘리먼트에 해당하는 내용입니다.
 href=’#’ 으로 해시 값을 지정했을때는 새로 고침하지 않고, URL 뒤에 # 해시가 붙게 되는데,..
이런 해시값이 지저분하다고 느낄때도 return false를 넣어서 처리하곤 합니다.

2. 인라인 이벤트는 가급적 피하세요!
인라인 이벤트라 함은 앞에서 처럼 HTML 마크업에 바로 onclick=’어쩌고 저쩌고’ 하고 이벤트 핸들러를 할당하는 경우죠. 이거보다는 addEventListener 함수를 이용해 이벤트를 따로 등록하는 것이 좋습니다.
왜 이게 좋냐면,..
1. 마크업이 깨끗해집니다.
2. 같은 이벤트에 여러 핸들러를 중복해서 추가 할수있습니다. (인라인은 덮어버리죠!)
3. 인라인 핸들러가 정의되지 않는 시점(마크업이 그려지고 있는 시점)에 클릭하면 에러가 날수있습니다.

따라서 되도록이면 모든 마크업이 다 그려지고 나서 자바스크립트를 한번에 로드하고 처리하세요!

내사랑 자바 스크립트 +_+_+

참으로 오랜만에 긴시간을 코딩에 또 빠져들었다..
요샌 모 과제도 없고,.. 특별한 일 없으면,.. 거의 코드를 쳐다도 보지 않는데..ㅎㅎㅎ

근데.. 요새 말야.. 내가 자바스크립트와 Ajax 에 빠져버렸다.. 빠져서 완전 허우적 허우적…
어제는 거의 집에 오자마자 11시부턴가?..시작해서 밤을 꼬박새고 아침 7시에 밥을 먹고 잠이 들었다..
든든히 아침도 먹고 잤겠다.. 점심때쯤.. 일어나서.. 오후 12시부턴가.. 시작해서.. 지금 새벽 1시 좀넘었다..

지금까지… 완전 연속은 아니고.. 중간중간 네이트로 수다를 떤거를 제외하고는..
밥도 먹으면서 코딩하는 감행… 내 취미가 코딩이라서 참으로 다행스럽다.
안그랬음.. 머리가 터져 버렸을찌도..ㅎㅎㅎ

자바스크립트 개발을 시작하면서, 참으로 FireBug 에 대한 놀라움에 새삼 놀라고있다..
이젠 스크립트 디버깅까지 된다.. 이야~ +++++
놀랍지 아니한가..

그래도.. 여전히 Ajax 형태의 디버깅은 머리아프다..ㅜㅜ..
Java코드와 JSP 서버사이드 코드, 가끔 건드리는 SQL 쿼리문과  JavaScript 코드 거기에 CSS 코드까지..
한꺼번에 디버깅하기란 쉽지가 않다.. 정말로..ㅜㅜ.. 커기에 크로스 브라우징까지..++++

Ajax 를 하면서 한가지 습관이 생겨버렸다.. 그건 바로 머릿속으로 디버깅하기..ㅜㅜ 아~ 떠진다 떠져..
이 모든걸 가능하게 만드는건 바로 내 맥북~ +
+++
윈도우 개발환경에선 상상도 못했다.. ㅎㅎㅎ

래퍼드에서 가장 멋진 기능은 아무래도 스페이스 분할 기능과 화면 4각에 마우스 포인터 갖다 대면, 기능을 정의할수 있다는 것!! 아~ 훌륭해~ 훌륭해~ ++++
지금 내가 쓰는 방법은 Dock을 왼쪽 자동 수직바로 놓았기때문에 왼쪽의 위아래 각은 사용안한다..
단 오른쪽 위엣각은 스페이스 이동으로 정의를 했고.. 오른쪽 아래는 바탕화면 보기…

그리고 더욱더 놀라운건,.. 바로 Cyberduck!! 요 오리새끼가 정말 대단한 놈이 었다..
알 FTP 상에서 편집할수 잇는 기능이 요 오리새끼는 Textmate 와 훌륭히 짝을 맺고 있다.
거기에 단축키까지.. 오리새끼에서 Command + K 키가 바로 편집하는기능..  하긴 이건 어디나 있지..
근데 여기서 Command + S 를 눌러서 저장하면, 알 FTP에서 파일 편집하고 나서 업로드하고 확인을 누르는 작업을 자동으로 해준다. 이게 정말 좋다~ +
+++  췍오~!!

역시 개발자에게 개발환경이란 코딩의 욕구와 능률을 200% 까지 높일수 있는 중요한 요소다..

맥에서 이제 뱅킹만 되면 이제 더할나위가 없겠다.. 아니다.. 스타도 되면 좋겠다 +++_+
요새 스타 중계만 보고 안하니까.. 손이 근질근질하다.. ㅎㅎㅎㅎ

오늘은 넘 무리했으니.. 운동하고 자야지…