Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

자바스크립트란 무엇인가?

by
Difficulty:BeginnerLength:LongLanguages:

Korean (한국어) translation by Dae-yeop Lee (you can also view the original English article)

웹 개발에서 유행하고 있는 자바스크립트는 과소평가되고 있다. 사실 몇 년 전에 열정적인 프로그래머인 Jeff Atwood다음과 같은 "Atwood의 법칙"을 만들었다.

자바스크립트로 작성될 수 있는 모든 어플리케이션은 결과적으로 자바스크립트로 작성될 것이다.

본 아티클을 작성하고 있는 시점에 너무나 많은 자바스크립트 프레임워크와 라이브러리들이 존재하며, 도대체 어디서부터 시작을 해야 할지 난처하게 한다. 이는 특히 초심자에게 더 그러하다.

저자가 아는 바로는, 이 곳에 공개된 상당수의 아티클은 이미 웹 어플리케이션을 작성한 경험이 있거나 웹 개발에 관하여 무엇인가를 진행하고 있는 이들에게 적합하다. 하지만 본 아티클은 위와 같은 독자들을 염두에 두고 쓰여진 것이 아니다.

그 대신, 본 아티클은 특히 자바스크립트 작성 경험이 전무하거나 거의 없지만, 자바스크립트 언어를 배우기를 원하고 이해하고 싶어하는 이들을 위한 것이다. 더 나아가 자바스크립트가 어떻게 사용되며, 이 언어로 무엇을 할 수 있는지를 다루려고 한다.

요컨데, 이 아티클은 숙련된 전문가를 위한 글이 아니다. 하지만 아마도 이 입문서는 어디서부터 자바스크립트를 시작하는 지에 대해 궁금한 이들로 하여금 올바른 방향을 설정하도록 도와줄 것이다.

자 이제 시작해보자.

자바스크립트의 정의

익히 들어본 것처럼, 자바스크립트는 웹 브라우저에서 동작하는 프로그래밍 언어의 다른 말로서, "클라이언트 측 스크립트 언어"이다.

위키피디아의 정의를 살펴보자.

자바스크립트는 고수준, 동적, 타입이 없는, 해석형 프로그래밍 언어이다. 자바스크립트는 ECMAScript 언어 명세에서 표준화되어 있다.

상기 위키피디아의 모든 정의가 맞는 말이다. 하지만 자바스크립트가 서버 측에서도 동작한다는 것도 추가될 수 있다. 물론 너무 앞서간 정의이긴 하다. 일단 상기 위키피디아에서 지적한 것들을 먼저 살펴보고, 이후에 서버 측에서의 자바스크립트에 대해 살펴보도록 하자.

  • 고수준 : 프로그래밍 언어가 고수준인 경우, 컴퓨터의 이면에 있는 상세한 것들에 대한 완벽한 지식이 없이도 활용할 수 있는 것으로 간주된다. 메모리 관리나 실행 중인 프로세스 타입에 대한 지식이 필요없으며, C나 어셈블리와 같은 언어에서 사용되는 포인터와 같은 것을 상대할 필요가 없다.
  • 동적 : 동적 언어는 컴파일이 필요한 프로그램과는 대조적으로 개발자로 하여금 신규 코드를 추가하거나 Post 객체와 같은 신규 객체를 생성함으로써 언어의 특정 측면을 확장할 수 있도록 해준다. 이는 자바스크립트의 강력한 특징이다.
  • 타입이 없는 : 만약 어떤 프로그래밍 경험이 있다면, 작성 중인 변수의 타입을 필수적으로 명시해야 한다는 것을 알고 있는 것이다. 이를테면, 변수는 string이나 boolean으로 저장될 것이다. 자바스크립트에서는 이러한 명시가 필요치 않다. 대시 간단히 var 키워드로 변수를 정의하면 된다.
  • 해석형 : 컴파일형 언어인 경우, 사용자에게 배포하려면 작성된 코드를 실행 가능한 바이너리로 변환해야 한다. 윈도우에서는 EXE 파일로 알려져 있다. OS X의 경우, 보통 앱스토어에서 다운로드한 프로그램이나 어플리케이션 디렉토리에 드래그한 프로그램이다. 자바스크립트가 해석형이라는 것은 위와 같은 컴파일러가 없다는 것을 의미한다. 대신에 코드가 PHP처럼 해석된다. 따라서 작성한 코드와 컴퓨터 사이에서 해석해주는 해석기라고 불리는 일종의 매개체가 존재한다.
  • 표준화된 : 자바스크립트는 공식적으로 명시된 ECMAScript로 표준화되어 있다. 이 말은 곧 이 표준을 충족시키는 모든 브라우저는 동일한 기능을 제공한다는 것을 의미한다. 표준화되어 있지 않는 기능이라면, 크롬에서 제공하는 기능이지만 엣지(Edge)에서는 제공하지 않는다.

지금까지 언어의 특징들을 살펴보았으니, 이제 언어가 지닌 특정한 양상이나 뉘앙스를 논해보도록 하자.

이상의 모든 내용은 중요하며, (특별히 다른 언어로 작업한 이들에게 있어서) 언어가 어떻게 동작하는지에 대한 본질적인 것이기도 하다. 따라서 언어가 어떻게 동작할 것이지 또는 어떻게 동작해야 하는지에 대한 선이해가 없이는 개발에 뛰어들 수 없다.

대신 본 아티클은 언어가 어떻게 동작하는지를 다룸으로써, 독자들로 하여금 코드 작성을 시작할 수 있도록 하며, 정확히 무엇을 하고 있는지를 이해할 수 있도록 하였다.

언어에 관하여

무엇보다도 자바스크립트는 객체 지향 프로그래밍 언어이다. 하지만 (만약 객체 지향 프로그래밍 언어에 익숙하다면) 익히 알고 있는 것과는 약간 다르다.

자바스크립트는 소위 말하는 프로토타입형 언어이다. 즉 String과 같은 자바스크립트의 모든 객체는 프로토타입을 기초로 한다.

이는 개발자들로 하여금 프로토타입 상속을 사용함으로써 객체에 추가적인 기능을 추가하도록 한다.

프로토타입에 기반한 프로그래밍은 객체 지향 프로그래밍의 스타일이며, (상속으로 알려진) 동작 재사용은 프로토타입으로 제공되는 이미 존재하는 객체를 복제하는 과정을 수반한다.

필자의 생각이지만 객체 지향 언어로 작업한 적이 없는 이들에게 이와 같은 점이 이점으로 작용한다. 왜냐하면 이와 같은 동작을 생각하기 위해서 전환이 필요한 개념적인 모델을 지니고 있지 않기 때문이다.

반대로 이와 같은 형태의 언어로 작업한 적이 있다면, 프로토타입 상속과 전통적인 상속을 구별한다는 점에서 가치가 있다고 생각한다.

  • 전통적인 상속에서는 개발자들은 클래스를 작성한다. 다중 객체들은 이 단일 클래스를 통해 생성된다. 게다가 이 클래스를 상속하는 또다른 클래스를 작성할 수 있으며, 이들 클래스의 인스턴스들을 생성할 수 있다. 이와 같은 상황에서, 서브 클래스들은 기본 클래스와 코드를 공유한다. 따라서 서브 클래스의 인스턴스를 생성하면, 서브클래스 및 부모 클래스 등의 모든 기능에 접근할 수 있다.
  • 프로토타입 상속에서는 이와 같은 클래스는 없다. 대신 단순하게 객체를 기술하고 어떤 기능이 필요한지만 작성하면 된다. 이미 존재하는 객체에 기능을 추가하고 싶다면, 객체의 프로토타입에 추가하면 된다. 만일 Number와 같은 객체에 대한 메쏘드를 호출하려는 경우에는 객체에 대한 메쏘드를 확인할 것이다. 만약 찾지 못할 경우, 체인을 따라 올라가서 기본 Object 내에 존재하는 해당 메쏘드를 찾을 때까지 거슬러 올라갈 것이다.

마지막으로 가장 중요한 점은 프로토타입을 통해 객체를 변경한 경우, (적어도 여러분의 환경이라는 맥락 내에서) 해당 객체를 사용하는 모두가 접근할 수 있다.

프로토타입 상속은 아주 강력하며, 신선하다. 하지만 이와 같은 환경에서 작업하는 것이 익숙하지 않다면 사고의 전환이 필요하다.

자바스크립트를 어떻게 사용할 것인가?

자바스크립트를 실제로 사용하는 것에 관하여는 전적으로 여러분들의 목표에 따라 달라진다. 어떤 점에서 자바스크립트로 작업하는 것은 웹 페이지 상에서 "무엇인가가 발생하게 하는 것"이 필요함을 의미할 수 있다. 이는 곧 동작을 제어하는 것을 의미한다.

이를테면 요소를 가르키거나, 제거 혹은 숨기는 것이 될 수 있다. 보다 전문적으로는 브라우저가 비동기로 서버에 호출을 할 수 있고, 응답을 제어하여, 이 응답에 기초하여 페이지의 상태를 변경한다.

위와 같은 기술은 Ajax를 통해 구현된다. 만약 이것을 읽고 있다면, 여러분은 이 용어에 익숙한 것이다. 그렇지 않다면, 페이지 리로딩 없이 자바스크립트가 페이지를 호스팅하는 서버에 호출하고, 받아오는 응답을 제어한다고 생각할 수 있다.

하지만 자바스크립트는 이보다 훨씬 더 성숙해졌다.

구글은 V8로 알려진 고성능 자바스크립트 파싱 엔진을 개발해냈으며, 다른 브라우저들도 마찬가지로 최적의 자바스크립트 성능을 제공하려고 노력하고 있다.

The landing page for Chrome V8 Googles JavaScript Engine

사실, 이제는 Node.js와 같은 툴을 사용하여 서버 상에서 자바스크립트를 작성할 수 있다. 더 나아가, 심지어 모바일 기기에서 실행되는 하이브리드 어플리케이션도 구축할 수 있다. 이 말은 곧 자바스크립트를 사용함으로써 휴대폰, 태블릿, 데스크탑 컴퓨터를 위한 솔루션을 구축할 수 있다는 것을 의미한다.

The homepage for Nodejs a runtime engine for writing JavaScript on the server

그리고 이것은 화면상의 뭔가를 움직이게 하는 방법으로 사용되던 언어에서 왔다. 이 말은 자바스크립트를 처음 사용하는 경우에는 이를 과소평가하지 말아야 한다는 것이다.

"나는 이 언어에서 무엇을 기대할 수 있을까?"

위에서 언급한 모든 내용을 읽는 것은 흥미롭고 우리가 무엇을 할 수 있을지 보는 것도 즐겁지만 순수하게 실용적인 관점에서 보면 우리는 자바스크립트라는 언어에서 무엇을 기대할 수 있을까?

자바스크립트 언어를 처음 접하든 다른 언어적 배경이 있는 상태에서 새로운 언어를 배우려는 경우든 언어가 제공할 수 있는 수준에 대한 기대 수준이 있을 것이다.

그리고 앞에서 자바스크립트 언어가 내부 관점에서 어떻게 동작하는지에 대해 이야기했지만 API는 말할 것도 없고 자바스크립트 언어에서 사용할 수 있는 객체에 관해서는 실제로 말하지 않았다. 솔직히 말해서 자바스크립트 언어의 API와 내장 함수를 다루는 것은 그 자체로도 별도의 글로 다룰 만한 주제다.

그런데 자바스크립트의 내장 객체를 다루는 것은 어떨까? 그 정도는 이 글을 끝내기 전에 검토할 수 있을 만한 주제다.

  • 객체. 모든 여타의 객체로부터 가져온 기본 객체는 기본적인 기능을 상속한다.
  • 함수. 자바스크립트가 진정한 객체 지향이라는 점은 모든 것이 객체라는 것을 의미하며, 함수도 포함된다. 따라서 새 함수를 만들면 Function 타입의 객체에 대한 참조가 만들어진다. 그리고 함수에는 런타임 중에 검사할 수있는 속성(함수에 전달된 인수 같은)이 있다.
  • 불린 이 객체는 불린 값의 객체 래퍼의 역할을 수행한다. 많은 언어에서 불린은 true이거나 false인 데이터 타입이다. 자바스크립트에서는 여전히 그러한 값으로 이용할 수 있지만 그것들을 객체로 이해해야 한다.
  • 숫자. 많은 프로그래밍 언어에는 float, int, double 등의 기본 타입이 있다. 자바스크립트에는 숫자 형식만 있고 이것도 객체다.
  • 날짜. 프로그래밍에서 날짜를 다루는 작업은 결코 재미있지 않다. 특히 시간대를 도입할 때는 더욱 그렇다. 나는 자바스크립트가 시간대와 관련된 모든 문제를 해결할 것이라고 말할 수는 없지만 날짜를 다루는 일을 더 쉽게 할 수 있다(연, 월에서 일,시, 분, 초까지).
  • 문자열. 거의 모든 프로그래밍 언어에는 기본 문자열 데이터 타입이 있다. 자바스크립트도 그다지 다르지 않으며, 예상한 바와 같이 문자열은 자체적인 속성을 가진 객체다.

앞에서 볼 수있는 모든 타입은 사용자가 호출할 수있는 고유한 속성(및 함수)을 가진 객체라는 사실을 기억해 두자. 그렇다고 해서 변수를 인스턴스화하기 위해 생성자를 호출해야한다는 의미는 아니다. 즉, 문자열과 불린, 숫자를 다음과 같이 만들 수 있다.

그러나 궁극적으로 이것들은 여전히 객체다.

설명을 명확하게 하자면 이것들은 기본 객체다. 특히 오류 처리, 배열을 넘어서는 다양한 유형의 컬렉션 등을 이용할 예정이라면 살펴봐야 할 가치가 있는 훨씬 더 고급 객체가 있다.

이러한 객체에 대해 더 알고 싶다면 모질라 개발자 네트워크(Mozilla Developer Network)의 이 페이지를 참고하길 권장한다.

어떤 라이브러리와 프레임워크를 사용할 수 있을까?

자바스크립트 경제에 속한 다양한 프레임워크, 라이브러리, 기타 도구를 계속 알아보고 있다면 이 경제가 얼마나 활발하게 움직였는지 결코 알 수 없다.

그러나 이 글에서는 자바스크립트를 시작하려는 분들을 대상으로 한다. 이제 언어의 구조와 작동 방식에 대해 어느 정도 이해했으므로 웹 및/또는 애플리케이션 개발을 용이하게 하는 라이브러리와 프레임워크를 살펴볼 차례다.

  • jQuery는 "적은 비용으로 더 많은 일을 할 수 있는" 크로스 브라우저 API를 제공하는 것을 목표로 하는 라이브러리다.
  • Angular는 단일 페이지 애플리케이션을 더욱 쉽게 작성하는 것을 목표로 하는 자바스크립트 프레임워크다.
  • React는 사용자 인터페이스를 제작하기 위한 자바스크립트 라이브러리다.
  • Backbone은 모델, 컬렉션, 뷰를 이용해 웹 애플리케이션에 구조를 제공하는 것을 목표로 한다.
  • Ember.js는 "야심 찬 웹 애플리케이션 제작"을 위한 또 다른 프레임워크다.
  • 기타 등등.

이것은 전체 목록과는 거리가 멀지만 시작일 뿐이며, 자바스크립트에 익숙해지려는 사용자가 이것들 중 어떤 것도 사용하지 않더라도 적어도 알아 둬야 할 몇 가지 선택지에 해당한다.

그리고 자바스크립트를 이제 막 배우기 시작하고 이러한 도구 중 일부를 선택하기 시작하면 여러분이 사용하는 몇 가지 인기 있는 애플리케이션 중 일부에 얼마나 인기가 있는지 알 수 있을지도 모른다.

자바스크립트 배우기

기대하고 있는 바와 같이 Envato는 "전 세계 수백만의 사람들에게 기술을 가르치기" 위한 곳이다. 그래서 인기 있는 자바스크립트 글과 교육 과정의 링크를 아래와 같이 정리했다.

이러한 모든 참고자료는 자바스크립트를 시작하고 웹 개발 기술을 늘리는 데 아주 효과적이다.

정리

자바스크립트는 웹 개발의 일부다. "기본 자바스크립트"로 간주되는 것을 사용하지 않아도 되고 사용 가능한 여러 라이브러리 및/또는 프레임워크 중 하나를 선택하더라도 자바스크립트는 거의 모든 웹 개발자가 알아야 할 언어다.

물론 모든 이들이 프런트엔드 업무를 하는 것은 아니다. 일부는 순전히 서버 측 개발자이고, 일부는 순전히 클라이언트 측 개발자다. 그럼에도 우리 모두는 애플리케이션의 여러 부분이 서로 통신하도록 협력해야 한다.

이를 위해 클라이언트 측의 데이터를 자바스크리트를 통해 서버 측으로 보내는 방법과 서버 측에서 처리한 다음 클라이언트 측에 반환해서 다양한 방식으로 사용하는 법을 이해하는 것이 중요하다.

프런트엔드 개발자가 아니라는 이유로 자바스크립트를 너무 빨리 단념하지 말라. 여러분과 함께 일하는 누군가가 자바스크립트를 사용하고 있으며 애플리케이션의 일부를 자바스크립트와 함께 연동해야 할 가능성이 높을 것이다.

물론 이 글이 수박 겉 핥기에 불과하다는 것을 인정한다. 이 글을 처음 시작할 때 말했듯이, 이 글의 목적은 자바스크립트가 무엇이고, 어떻게 사용되며, 그리고 무엇을 기대할 수 있고, 특히 언어를 시작하려는 사람들에게 자바스크립트를 설명하는 데 있다.

이 기사를 재밌게 읽었다면 내 프로필 페이지에서 강의 및 자습서를 확인하고, 관심이 있다면 내 블로그에서 워드프레스 및 워드프레스 개발에 대한 더 많은 글을 읽을 수 있다.

참고 자료

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.