JavaScript 란 무엇일까?

결론부터 말하자면 JavaScript 란 scripting language 이고 interpreted language 이다.

말이 좀 어려운데 간단하게 설명하자면 scripting 의 의미는 control 할 수 있도록 도와주는 의미이고, interpreted 의 의미는 컴파일 하지 않는 이미 해석되어있는 언어라는 의미이다.

후자의 의미가 좀 어려운데 다시 설명해보자. c언어와 같은 compile 기반의 프로그래밍 언어는 실행 되기 전에 컴파일러에 의해 compile 된 이후 실행된다. 허나 이와는 달리 JavaScript 는 run time 떄 그냥 바로 실행되버린다는 특징이 있다.

즉, script 로 되어있는 프로그램들을 실행할 때 인터프리터의 도움을 받아 다이나믹하게 on-demand 로 그 자리에서 해석 하여 머신코드로 변환시키는 작업을 얻게 되는 것이다. 즉 이러한 특징으로 interpreted language 라고 한것이다.

JavaScript 는 1995년에 Netscape Communication 에서 Mocha라는 이름으로 개발되었다.

이후 사람들에게 쉽게 인식되기 위해서 마케팅 적으로 그 당시 유명했던 Java의 이름을 빌려 JavaScript 라고 불렸다.

이 때문에 현재 Trademark License 가 아직도 Oracle 에 있기도 한다. ㅎㅎ

여튼 이렇게 개발된 Java와 C랑 문법이 비슷하다는 특징이 있는 JavaScript 는 처음 나왔을 때는 그저그런 언어였다. 허나 (당시 욕심쟁이)MS 에서 JScript 를 개발했고 Netscape 이 없어진 후 당시 엄청난 기술이었던 AJAX 기술이 생기게 되었고 그 후 JavaScript BOOOOOOM! 이 발생하게 되었다.

이 BOOM 을 기점으로 HTML5 에 대한 표준이 생기고 ECMAScript 라는 JavaScript 의 표준이 생기는 등 큰 변화가 생겼고, 현재 엄청난 인기의 JavaScript (ECMAScript) 가 생기게 되었다!

💡 ECMAScript

ECMAScript 는 Ecma International 에 의해 관리되는 JavaScript 의 표준안이다. 5버전 까지는 클래스 코딩이 어렵고 함수 객체? 독자적인 코딩 문법으로 그렇게 큰 인기를 끌진 못했지만 6버전 이후 Class, let, const, Promise (await, async), block scoping 등 여러 절출 개념들이 생겨나 큰 인기를 끌게 되었다.

초기의 Web Browser 들은 Tag의 structuring 과 같은 HTML parsing에 큰 초점을 두었다. 허나 점차 시간이 지나면서 HTML 위에서 동작하는 script 언어가 필요했고, 해당 역할을 JavaScript 가 맡게 되었다. 물론 현재 Google 의 Dart 가 있지만 대부분 Javascript 를 사용하고 있다. ( 마치 IPv6가 생겼지만 계속 쓰고있는 IPv4 를 쓰는 느낌? )

💡 Interpreter

여튼 이런 script 언어가 생김에 따라 각 브라우저들은 해당 언어를 실행시키기 위해 위에서 말한

"Interpreter"

를 내장하게 되었다. Mozilla Firefox 는 SpiderMonkey라는 엔진을 가지고 있고, Chrome 과 Opera 는 V8이라는 엔진을 사용하고 잇다.

Javascript 를 사용하면 HTML 문서에 대해 style을 자유자재로 바꿀 수 있고, event 를 처리할 수도 있으며 AJAX 을 사용할 수도 있다.

요즘 3D 이미지 시각화 툴을 만들어가면서 HTML5 표준이 미디어에 큰 힘을 불어넣어주고 있구나를 체감하고 있습니다.

canvas 태그에 2D 이미지를 자유롭게 렌더링하거나, svg 값을 통해 이미지를 좀더 유동적으로 설정하며 시각화 툴을 만드는 와중에 3D 이미지 렌더링을 위한 webGL 에 관심이 가게 되어 자료들을 모으고 정리하는 중입니다.

* WebGL 사용 후기

 WebGL은 canvas 에 2D 이미지를 렌더링하는 것과 거의 비슷하게 점, 선, 삼각형 등 간단한 도형을 그려줍니다. 다만 2D가 아닌 3D 그래픽화 시켜준다는 것이 차이점입니다.

 Scene, Mesh, Geometry, Camera 등 여러 객체들을 초기화해주고 각각을 잘 연결시켜 Renderer에게 canvas에 그려줘~ 라고 요청하는 느낌의 3D 렌더링 작업은 어떻게 보면 쉬울 수 있지만, 참으로 골치아픈 작업이라고 느끼고 있습니다. (별로 해보진 않았지만..)

현재 진행중인 프로젝트에서 위 처럼 각 객체들을 잘 연결시켜주어 하나의 Scene을 구성해주고 마지막에 Renderer에게 그려달라 작업하는 기본 코드를 응용해 MRI, CT 영상 DICOM 파일들을 canvas 상에서 3D 프린팅해주듯이 결과물을 나타내려고 매우 삽질중입니다. 자료가 너무 없는 건지.. 내가 잘 못 찾는 건지.. 게다가 웹서비스 툴이다보니 대용량 파일을 여러개 불러오고, 업로드하고 바이너리 값으로 바꿔 전처리하고 하는 과정에서 엄청난 정신력 소모 중입니다. 

프로그래머 진화과정 중 너무 쓰디쓴 맛을 느끼는 중이지만 더 열심히 조사하고 해결해야겠지요..ㅎㅎ 

여튼 Three.js 를 사용하면서 느낀 것은 HTML5 표준으로 바뀌며 프론트앤드에서 그래픽 작업같은 고성능 작업을 동적으로 처리할 수 있구나~를 느껴 JavaScript 가 더더더 중요해지구 있구나를 느꼈습니다. 

코딩하는 과정에서 객체를 정의할 때 해당 객체의 프로퍼티를 셋팅하도록 설정한다면 해당 객체를 추후 재활용하는데에 귀찮음과 어려움이 생길 수 있다.

-> 이를 보완하기 위해 생성자를 새용해 원하는 프로퍼티의 인스턴스를 생성할 수 있도록 해줄 수 있다.

즉 생성자 패턴을 도입함으로써 코드의 재사용성을 대폭 높혀 레고 블럭인 객체를 좀더 자유자제로 사용할 수 있게 된다.

- 함수를 호출할 때 new 를 붙이면 해당 함수는 새로운 객체를 만든 후에 이를 리턴한다. 해당 객체의 생성자를 호출한다고 생각하면 편하다.

- 일반적인 객체지향 언어에서 생성자는 클래스의 소속이다. 하지만 자바스크립트에서 객체를 만드는 주체는 함수이다. 즉, 함수에 new 를 붙이는 것을 통해 객체를 만들 수 있다는 것은 자바스크립트의 특징이면서 자바스크립트가 추구하는 자유로움을 보여주는 사례라고 할 수 있다.

객체지향언어에서는 보통 클래스를 인스턴스화 시키기 위해 new 연산자를 사용한다. 

하지만 자바스크립트에서는 두개의 객체를 연결하기 위해 new 연산자를 사용한다.

즉, 전자의 경우 클래스로부터 작동을 복사하여 새로운 객체를 만드는 것이고, 후자의 경우 복사 과정 없이 그저 두 객체를 연결한다는 것이다. 따라서 자바스크립트의 new 키워드는 흔히 아는 new 키워드와 다르게 동작한다고 할 수 있다.

다시 말해 JavaScript 에서 new 연산자는 결국 새 객체를 다른 객체와 연결하기 위한 간접적인 우회 방법이며, 직접적으로 연결해주기 위해 Object.create() 을 이용하기도 한다.

 또한 [[Prototype]] 체계를 흔히들 프로퍼타입 상속이라고도 부르는데 상속은 기본적으로 복사를 수반하지만, 자바스크립트는 객체 프로퍼티를 복사하지 않고, 연결만 한다는 점에서 약간은 다르다. 따라서 프로퍼타입 상속이라는 말은 의미를 좀 헷갈리게 한다고 할 수 있고, 다른 적절한 단어인 위임이라고 생각하면 더 정확하지 않을까 한다.

객체 지향이라는 말은 코딩에 입문한 이후로 끊임없이 들었던 단어였다. 허나 정확한 개념에 대해 설명하라는 질문을 들었을 때 얼타기 일쑤인 말이기도 하다. 때문에 간단하게나마 정리하고자 한다.

* 객체지향 프로그래밍 

 좀 더 나은 프로그램을 만들기 위한 프로그래밍 패러다임으로 로직을 상태(state)와 행위(behave)로 이루어진 객체로 만드는 것이라고 할 수 있다.

 이 객체들을 마치 레고블럭처럼 조립해서 하나의 프로그램을 만드는 것이 객체지향 프로그래밍이라고 할 수 있다. 다시 말해서 객체지향 프로그래밍은 객체(레고블럭 조각) 를 만드는 것이다. 따라서 객체지향 프로그래밍의 시작은 객체가 무엇인가를 이해하는 것이라고 할 수 있다.

 또한 객체지향을 비슷한 관점에서 부품화의 정점이라고도 할 수 있다. 즉, 여러 로직들을 결합해 메소드라는 완제품을 만들고 이러한 메소드를 부품으로 해서 하나의 완제품인 독립된 프로그램을 만드는 것이라고 할 수 있다.

 이 때 서로 연관된 메소드와 그 메소드가 사용하는 변수들을 분류하고 그룹핑한 대상이 객체이고 이 과정에서 information hiding, Encapsulation 이라는 컨셉이 생겨난다.

cf) 객체란 변수와 메소드를 그룹핑한 것이라고 일단 생각하자.

* 인터페이스

잘 만들어진 부품이라면 부품과 부품을 서로 교환할 수 있어야 한다. 예를 들어 컴퓨터와 모니터는 서로가 교환관계에 있다. 이 이유는 모니터와 컴퓨터를 연결하는 케이블의 규격이 표준화 되어있기 때문이다. 이 때의 표준을 인터페이스라고 한다.

JavaScript 엔진은 JavaScript 코드의 인터프리터라고 보면된다.

여기서 인터프리터란 코드 한 구문씩 기계어로 해석해나가면서 실행해주는 프로그램이라고 알면 되고~

여튼 JavaScript 엔진은 여러 종류의 웹 브라우저에서 찾아볼 수 있는데 대표적으로 Google Chrome의 V8, 블링크가 있으며, Mozilla Firefox의 SpiderMonkey 도 있다.

이 엔진들은 각자 퍼포먼스가 다르고, 지원되는 ECMAScript도 다르다. ECMAScript가 새로운 에디션을 발표하면 이에 맞춰서 JavaScript 엔진도 해당 사양을 따라가도록 점진적으로 업데이트를 해준다. 

이 때!! 브라우저마다 ECMAScript 를 지원하는 범위가 다르게 때문에, 웹 코딩시 흔히 듣는 "호환성 문제" 라는 것이 여기서 발생하게 된다.

이러한 문제를 해결하기 위해 바벨(babel) 이라는 오픈소스 JavaScript 트랜스 파일러를 사용한다. 바벨은 ES6 사양 기준으로 작성된 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환해준다. 주요 브라우저는 ES5까지 지원하기 때문에 바벨이 ES5 코드로 변경해주어 호환성 문제를 해결할 수 있게 해준다.