처음 자바스크립트 시작하기

자바스크립트가 무엇인지 보다 어떻게 연습해야 할까? 백문이 불여일견

 

  자바스크립트를 누가, 언제 만들어 졌다느니 스크립트언어가 어떻다느니 보다는 소스가 있으면 입력해 보고 실행해 봐야 재미도 있고 바로 알 수 있을거라 생각해서 이 글을 작성해 본다.

 

  문서편집기에 소스코드를 입력하고 저장할 때 확장자를 html, htm 으로 저장해서 더블클릭해 보면 좀 번거로우므로 브라우저를 통해서 연습하는 방법을 찾아보았다. 가장 대중적인 인터넷 익스플로러와 파이어 폭스 두가지 버전을 사용해 보자.

 

Internet Explorer

 

 

 

  우선 인터넷 익스플로러를 실행하여 F12 기능키(도구->F12 개발자 도구)를 누르면 개발자 도구가 실행 될 것이다. 위에 그림에서 ①의 콘솔을 누르고 상태표시줄에 ②를 클릭하면 ③의 입력창이 나오는데 여기에 인터넷에서 돌아다니는 코드를 입력해 보자. 필자는 alert('Hello World'); 를 입력해 보았다. ④의 실행을 누르면 자바스크립트가 실행된다. 물론 에러가 있으면 친절하게 알려준다.

 

 

 

 

Mozilla Firefox

 

  파이어폭스에는 스크래치패드라는 좋은 연습도구가 있다. 일단 파이어폭스 Shift + F4 를 누르면 나온다. 주석으로 단축키도 있으니 그냥 소스 입력하고 실행이나 Ctrl + R 누르면 끝!

 

 

jsfiddle.net

 

  HTML, CSS, Javascript를 동시에 연습할 수 있다. 적극 활용하자. 콘솔창은 브라우저마다 다르니 알아서 열어보자. 실행은 Run아이콘을 누르거나 Ctrl + Enter

 

 

codepen.io

 

  여기도 위의 사이트와 같다. 블로그에 소스로 입력할 수도 있다. 좋다.

 

 

우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. 자바스크립트는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다. 예를 들어 자바스크립트를 이용하면 ‘버튼을 클릭하면 밑에 날짜를 보여줘’라는 식의 명령을 내릴 수 있다.

자바스크립트를 이용하면 웹에 풍부한 효과를 넣을 수 있지만, 2000년대 초반만 해도 자바스크립트는 개발자들에게 무시당하는 언어였다. 별다른 기능도 없고, 성능도 별로 좋지 않았기 때문이다. 하지만 최근 몇 년 사이에 다양한 자바스크립트 프레임워크와 라이브러리가 생기면서 자바스크립트 생태계는 크게 확장되고 있으며, 그 위상도 점점 높아지고 있다.

1995년 탄생한 동적 언어

프로그래밍 입문자들은 자바스크립트와 자바(Java)가 서로 비슷한 기술이라고 생각하곤 한다. 두 언어 모두 자바라는 단어를 사용하기 때문이다. 하지만 자바스크립트는 자바와는 전혀 관계가 없다. 언어를 만든 사람부터 기능과 사용법까지 완전히 다르다.

자바스크립트는 브랜든 아이크(Brendan Eich)가 개발했다. 브랜든 아이크는 1995년 넷스케이프에 근무하면서 자바스크립트 개념을 만들었다. 그는 처음에는 자바스크립트가 아닌 ‘모카(Mocha)’라는 이름을 붙였다. 모카는 1995년 12월 ‘라이브 스크립트(LiveScript)’라는 이름으로 바뀌었는데, 당시 자바가 큰 인기를 끌자 마케팅 효과를 노려 이름을 자바스크립트로 변경했다. 이후 자바스크립트 기술이 다양하게 발전했고, 이에 대한 표준과 명세를 ECMA 인터내셔널에서 관리하고 있다.

Java와 비교한 JavaScript

자바스크립트와 자바 비교 <출처: (CC-BY-SA) MDN(Mozilla Developer Network) JavaScript 소개>

자바스크립트 창시자 브랜든 아이크에 대해 보다 자세히 알아보자. 그는 미국 산타클라라대학교에서 수학과 컴퓨터과학을 전공했으며, 이후 일리노이대학교 어바나-샴페인캠퍼스에서 석사학위를 받았다. 대학 졸업 이후 그는 주로 운영체제와 네트워크 관련 개발을 맡았고, 1995년 넷스케이프에 합류한 이후부터 웹 기술에 깊숙이 관여했다. 넷스케이프(Netscape)는 당시 마이크로소프트(MS)가 만든 ‘인터넷 익스플로러(IE)’의 가장 강력한 라이벌 웹브라우저를 만들고 있었다.

넷스케이프는 원래 브랜든 아이크에게 프로그래밍 언어 ‘스킴’을 웹브라우저에서 활용할 수 있는 방법을 알아봐달라고 요청했지만, 브랜든 아이크는 이와 달리 자바스크립트라는 언어를 새로 개발했다. 1998년 그는 웹 개방성을 옹호하는 모질라 프로젝트를 새로 시작했고, ‘파이어폭스(FireFox)’라는 웹브라우저를 만들었다. 이후 모질라에서 개발하는 기술은 그가 총괄하게 된다. 이러한 이유로 자바스크립트와 관련해 다양하고 자세한 문서를 모질라 커뮤니티 홈페이지에서 볼 수 있다.

2014년 브랜든 아이크는 모질라 기업의 CEO 자리에 올라갔다. 하지만 문제가 닥쳤다. 내부 직원들이 “브랜든 아이크가 동성결혼을 금지하는 ‘동성결혼금지법(California’s Proposition 8)’을 위해 1천달러를 낸 경력이 있다”라며 “파이어폭스가 추구하는 가치인 다양성과 맞지 않다”라고 공개적으로 비판했다. 이후 브랜든 아이크는 CEO 자리에 올라선 지 열흘 만에 사퇴했다.

모질라 기업을 떠난 브랜든 아이크는 2015년 브레이브소프트웨어라는 새로운 기업을 설립하고, 여기서 오픈소스 모바일 웹브라우저를 개발하고 있다. 브레이브소프트웨어는 ‘더 빠르고 안전한’ 웹브라우저를 지향한다. 기업이 함부로 개인 정보 및 쿠키 데이터를 추적하지 못하고, 가독성을 방해하는 광고를 없애는 방식의 기술을 만들고 있다.

배우기 쉽고 확장성 높지만, 보안엔 취약해

자바스크립트는 다양한 장점과 단점을 가진다. 먼저 장점부터 살펴보자. 자바스크립트는 컴파일 과정이 없기 때문에 다른 언어와 비교했을 때 빠른 시간 안에 스크립트 코드를 작성할 수 있게 도와준다. 기존 C나 자바 언어와 달리 굉장히 단순한 구조와 원칙을 가지고 있기 때문에 초보 개발자들이 쉽게 배우고 이해할 수 있다.

예를 들어 자바스크립트 코드 안에서는 변수, 클래스 및 메소드를 선언하지 않아도 되고, 메소드가 ‘public’, ‘private’ 또는 ‘protected’인지 구분하지 않아도 된다. 이러한 특징은 개발자마다 서로 다른 방식으로 코드를 짜는 부작용도 있다. 그래서 구글이나 에어비앤비 같은 기업들은 ‘자바스크립트 스타일 가이드’라는 문서를 따로 만들어 읽기 쉽고 실수를 피할 수 있는 자바스크립트 작성법을 공개하기도 했다. 자바스크립트는 웹에 특화된 기술이기 때문에 운영체제나 플랫폼에 상관없이 잘 작동되고 확장성도 높다. 단점은 성능이나 보안 측면이다. 일단 내부에서 제공되는 기능이 제한적이고, 관련된 개발도구도 적은 편이다. 또한 자바스크립트는 HTML 소스코드에 함께 작성되면서 소스코드가 외부로 공개되는데, 이 과정에서 보안 취약점이 발생할 수 있다.