G-Cafe :: JavaScript Core

What is JavaScript

브라우저에서 인터프리트되는 스크립트언어로, 브라우저에서 폼을 검증하는 등의 클라이언트 사이드에서 상호작용을 할 수 있도록 사용성을 입힌다.

Feature of JavaScript

자바스립트의 특성에 대해 간략히 알아보도록 하자.

객체 기반의 프로그래밍 언어다.
일단 JavaScript 는 프로그래밍 언어다.
즉 JavaScript 를 공부하는 것은 프로그래밍을 공부하는 것과 같다.
JavaScript가 어려운가? 당연하다. 프로그래밍이니까.
개발자가 아닌 이상에야 프로그래밍이 쉬울리가 없다.

JavaScript는 특별히 객체 기반의 프로그래밍 언어이다.
심지어 데이터 타입까지도 객체다..... ;;;; _{(이 부분에 대해서는 차후 천천히 알아보도록 하겠다.)}
때문에 객체를 이해하기 시작하면 JavaScript 뿐 아니라 DOM, jQuery 등의 동작을 이해할 수 있게 된다하여도 과언이 아니다.
꽤 유연한 언어다.
JavaScript 는 다른 프로그래밍 언어들에 비해 꽤나 유연한 언어다.
데이터 타입을 스스로 판단하고, 굳이 변수를 선언하지 않아도 변수 사용이 가능하다.
뭐, 다른 프로그래밍 언어를 접해본 적이 없는 사람이라면 이게 뭔 소리여...? 할거다.
그냥 그런가보다 하고 넘겨도 좋다. 다른 프로그래밍 언어까지 공부할게 아니라면 ㅋ
소스에 대한 보안성을 가지고 있지 않다.
무슨 이야기인고 하니, js파일이나 HTML문서를 열어보면 소스가 그대로 노출 되어 있다는 것이다.
즉 마음만 먹으면 js 파일은 다 뜯어볼수가 있다. =ㅅ= ;;;
때문에 보안적 처리는 Server-side 에서 처리하는 것이 바람직하다.
Interpreter 언어다.
인터프리터 언어는 해석과 동시에 실행이 된다.
다른 프로그래밍언어들이 컴파일이라는 단계를 거쳐 프로그램이 완성되어지는 것과는 사뭇 차이가 있다.
그렇기 때문에 작성하고 실행시키기가 매우 쉽다.
그냥 메모장에 끄적끄적이고 브라우저에 띄우면... 스크립트는 바로 실행된다 ;;;;
물론, 인터프리터 언어이기 때문에 오류가 발새되면 오류 발생 포인트 이후의 코드는 실행이 안되버리는 현상을 종종 만나게 된다.

Standard of JavaScript

JavaScript는 Core 언어와 이벤트, DOM 이 사용된다.
JavaScript는 프로그램언어( Core )이면서 사용자와의 Interactive 작용을 위해서는 사용자의 Action을 기다려야 하고 (Event), 문서의 일부(DOM)를 업데이트 해주어야 하기 때문이다.
각각은 표준화 주체가 다르다.

우선, JavaScript의 Core 언어는 유럽 컴퓨터 제조업자 협회(ECMA)에서 표준화한다.
이 유럽 컴퓨터 제조업자 협회에서 표준화한 Core Script 를 ECMA Script 라고 부른다.

DOM은 이벤트 핸들링과 CSS 수정을 포함하며 월드와이드웹 컨소시엄(W3C)에서 표준화한다.

JScript

대부분 스크립트 개발에 있어 많은 문제가 되는 부분은 바로 이녀석이다.
MS IE외 타 major 브라우저들은 대다수 Core Language와 DOM 모델을 모두 W3C 모델을 기반으로 한다.
반면 MS IE는 ECMA Script를 기반으로 MS가 자체 표준으로 만든 Script Core 언어인 JScript 및 자체 DOM 모델을 기반으로 하기 때문에 MS 모델을 기반으로 짜여진 스크립트들은 타 브라우저에서 올바르게 실행되지 않는 상황이 많이 연출되게 된다.

물론 현재는 Web Standard 운동 덕분에 대다수의 브라우저들이 W3C의 표준을 따르는 추세로 돌아서고 있다.

Unobtrusive Scripting

우리말로 번역하자면 "겸손한 스크립트"다
이 용어는 2002년 스튜어트 랭그리지에 의해 만들어졌다.
필자는 개인적으로 겸손한 스크립팅에 매우 동의를 가진다.
"겸손한 스크립트"의 특성은 다음과 같다.

스크립트는 사용성이 높아야 한다.
스크립트는 접근성이 높아야 한다.
웹페이지는 자바스크립트가 동작하지 않더라도 읽을 수 있고 이해할 수 있어야 한다. _{(사용성 저하를 피할 수 없더라도)}
스크립트는 구현하기 쉬워야 한다. 개발자가 스크립트를 웹페이지에 포함시키고 자바스크립트 훅(hook)을 추가하기만 하면 스크립트가 동작해야 한다.
스크립트는 분리돼야 한다. HTML 안에 흩어져 있는것이 아니라 js 파일에 따로 존재해야 한다.

대다수 두 번째 접근성이 높아야 한다는 점에 있어 많은 오해하는 부분이 있는데,
접근성을 높이는 것이 높은 사용성을 가진 자바스크립트를 사용하지 말라는 부분이 아니다.
단지 자바스크립트 없이도 페이지를 사용할 수 있도록 페이지가 만들어 져야 한다는 것이다.

자바스크립트 없이도 페이지를 사용할 수 있도록 페이지를 만든 다는 것은 비 자바스크립트 사용자와 자바스크립트 사용자에게 동일한 기능을 제공한다는 의미가 아니다. 자바스크립트의 미사용으로 인한 웹페이지의 사용성이 제한되어서는 안된다라는 것이다.

작성 방법

뭐 이미 알고 있는 거시겠지만, 그래도 집고 넘어가자.
일단 JavaScript 는 페이지에 포함시키는 방법에 따라 크게 두 가지 방법으로 나뉜다.

`<script> <script>` 내에 JavaScript 코드를 직접 삽입하는 방법

<script type="text/javascript">
//<![CDATA[
	// statements
//]]>>
</script>

syntaxhighter 가 완벽히 지원이 안되는지... 색상이 조금 이상하게 나온다 ㅠㅠ
위 코드 처럼 작성하며, 위 코드를 head 혹은 body 요소 내에 위치시켜 사용한다

대다수 많은 책들이 관례상 head 요소 내에 위치 시키는 것을 권장하고 있다.
하지만 필자는 body 요소의 닫는 태그 즉, </body>의 바로 위에 위치시키는 것을 권한다. 이는 아래 나올 src 속성을 이용한 로딩 방식에도 동일하다.
이유는 다음과 같다.

head 요소 내 위치시킬 경우 HTML 또한 인터프리터 언어이기 때문에 script 를 한 줄 한 줄 읽고 실행하게 된다.
그런데, 이 코드의 양이 많거나 처리해야할 로직이 많거나 혹은 js file 을 로드시켰을 때 js file 의 용량이 커버리거나 하는 일이 발생되면, 실제 컨텐츠가 표현되는데까지 오랜 시간이 걸리는 일이 발생 될 수 있다.
head 요소 내 코드를 작성 시, DOM을 컨트롤 하는 코드가 존재할 경우, 이 코드 자체가 DOM이 모두 로드 된 이후에 실행되도록 처리되지 않으면 DOM에 접근하지 못해 오류가 발생되는 상황을 만날 수 있게 된다

</body> 요소 바로 위에 위치 시킬 경우, 위 문제들을 모두 피할 수 있다.
그리고 이 방법이 웹사이트 최적화를 위한 javascript 작성 방법의 한 가지로 알려져 있기도 하다.

`<script>` 요소에 src(source) 속성을 정의하는 방법

<script type="text/javascript" src="./js/common.js" ></script>

웹표준, 그리고 겸손한 자바스크립트에서 말하는 구조와 기능의 분리 면에서 가장 적합한 방법이다.
JavaScript를 js file 로 분리하여 작성하고 이 작성된 js 파일을 src 속성을 이용하여 로드시키며, 이렇게 만들 경우 script 코드의 재사용성을 높일 수 있고 유지보수가 한결 편해지게 된다.

Posted By 멀더끙