JavaScript에 대한 이야기

자바스크립트는 맨 처음 나오게 된 계기는 브라우저에 랜더링 된 정적인 HTML을 동적으로 제어할 수 있게 하기 위해 나왔습니다.

HTML로만 작성한 정적인, 멈춰있는 사이트를 동적으로 만들어 주는 역할을 합니다.

예를 들어 HTML의 table 태그로 만들어진 어떤 시간표 테이블이 있다고 가정합니다.

또한 이 시간표의 색상을 바꾸는 "파란색으로 변경"이란 버튼이 있다고 합시다.

이제 처음 시간표 페이지를 브라우저에 띄웠을 때 시간표 색상이 초록색이 나왔습니다.

이 초록색을 파란색 버튼으로 바꾸기 위해 "파란색으로 변경하기" 버튼을 누릅니다. 

하지만 아무 반응이 없습니다. HTML은 그저 화면의 구조를 정하고 CSS는 이 HTML과 함께 레이아웃, 스타일을 지정할 뿐 뭔가 파란색으로 변해라! 하고 버튼을 눌러도 반응이 없습니다. 이럴땐 어떻게 해야할까요?

하지만 JavaScript를 쓰면 가능합니다. 자바스크립트를 쓰면 페이지를 동적으로 컨트롤 할 수 있게 됩니다. 웹사이트에 생기를 불어 넣는 느낌이랄까요

자바스크립트는 시간표 테이블과 "파란색으로 변경"이란 버튼을 DOM에서 찾아내고, 자바스크립트가 테이블의 CSS를 변경하여 최종적으로 색이 바뀌게 됩니다.

이 외에도 또 자바스크립트 활용 사례는 많습니다.

그 중에 요즘 사이트들을 보면 이미지 슬라이드는 흔하게 볼 수 있습니다.

HTML은 화면에서 무언가를 움직일 순 없습니다. 이 것도 역시 자바스크립트가 수행합니다.

물론 요즘 CSS로 애니메이션이 가능하다고 하는데, 아무튼 자바스크립트로도 할 수 있다는 것은 자바스크립트는 화면을 동적으로 다룰 수 있는 언어라는 것 입니다.

이렇게 널리 쓰이고 있는 이 언어가 사실 제가 듣기론 자바스크립트가 급하게(?) 만들어져서 다른 언어보다 완성도 있는 언어는 아니라고 알고 있습니다.  소소하게 헛점들이 좀 있고 일반적인 언어랑 조금 다른 면이 있습니다. 

하지만 자바스크립트가 정말 강력한 이유는 크로스 플랫폼이 가능하기 때문입니다.

요즘 뜨고 있는 하이브리드 앱도 모바일 앱이지만 웹 기술로 만들기 때문에 자바스크립트는 빠질 수 가 없습니다.

제일 장점이죠. 웹 기술만으로 모든 플랫폼을 맞출 수 있는 프로그램을 만들 수 있다니요!

페이지의 동적인 효과를 주기 위해 자바스크립트는 필수이며 HTML과는 다르게 프로그래밍이 가능하기 때문에 클라이언트단의 소스를 MVC로 개발할 수 있게 해주는 JavaScript Framework 인 AngularJS나 리액트 같은 것이 쏟아지고 있습니다.

페이스북 앱의 일부는 리액트로 만들었다고도 합니다.

웹 컴포넌트 방식이라는 방법론도 뜨면서 Polymer 라는 프레임워크도 구글에서 내놓았습니다.

이것도 한번 사용해봤는데 신세계더라구요. 자신이 태그를 만들어서 씁니다. div id 가 아니라 만든 태그를 단일 태그 처럼 쓰는 거죠.

이런 태그들은 공유도 가능하고 재사용이 쉽습니다.

Cordova도 자바스크립트로 안드로이드와 iOS를 컨트롤 할 수 있게 해줍니다. 물론 지원하지 않는 기능은 직접 네이티브로 짜서 플러그인을 만들어야하지만 왠만한 앱은 플러그인이 워낙 많아서 무리가 전혀 없다고 합니다.

(저는 앵귤러로 하이브리드앱 만드는 실습을 하는 중인데 너무너무 재밌습니다.)

심지어 자바스크립트는 서버의 영역까지 확장했습니다.  node.js 바로 그 것인데 다른 서버언어로 할 수 있는 것들을 다 할 수 있으며 비동기라는 면에서 특정한 상황에선 더 강력하다는 장점이 있습니다.

이 처럼 자바스크립트는 계속 되는 웹의 발전과 함께 중요성이 커지고 있습니다.

웹은 브라우저만 있으면 되기 때문에 크래스플랫폼에 유리하고 그래서 웹앱이 많아지면 그만큼 표준이 되고 개발인력과 개발기간을 줄일 수 있는 효과도 있습니다.

이제 HTML5, CSS3이 좀 더 발전하게 되서 애니메이션도 웹에서 충분히 만들 수 있게 되었고 어도비 플레시와 비슷하게 웹 애니메이션을 만드는 툴인 hippani 라는 툴도 나왔습니다. (전 이걸로 게임 한번 만들어보려구요 ㅋㅋ)

아무튼 자바스크립트는 못하는게 없는 것 같네요. 하지만 다른 언어보다 디버깅이 좀 힘든 것도 있습니다. 어디서 멈추면 그 뒤의 코드들은 해석이 안됩니다. 그래서 에러 검출을 위해 항상 콘솔 보는 것이 습관이 되어야 한다고 생각합니다.

이럴땐 크롬 개발자 도구 (F12 또는 커맨드+옵션+I) 를 활용해보세요~ 요청, 응답 헤더, 네트워크, 자바스크립트 콘솔, HTML/CSS 등등 별게 다 있습니다.

이번에 자바스크립트 과외를 하게 되서 다시 훑고 있는데 다시 공부하니 재밌네요! 

무엇보다 다른 언어보다 다른 개념들이 있다는게 재밌습니다. 유효범위도 var를 붙히냐 안붙히냐에 따라서 어떤 지역에 있어도 전역변수가 될 수 있는 등 좀 이상하지만 특이해서 재밌네요.

그래도 있을건 다 있습니다. 객체지향 프로그래밍을 하려면 할 수 있구요.

게임엔진, 채팅모듈도 오픈소스로 돌아다니는게 많아요.

그리고 자바스크립트는 실습할때 에디터, 브라우저만 있으면 다 할 수 있습니다.

그래서 처음 프로그래밍 공부하시는 분들은 이 언어를 추천드립니다.

아무튼 자바스크립트에 대해 알아보고 포스팅까지 해보니 정말 유망한 언어라는걸 다시 한번 느끼게 되고 이런 언어를 공부하고 있다는게 스스로 성취감이 생겨서 좋네요.

모두 즐거운 공부, 코딩 되세요!