왜 자바스크립트일까?

알고싶다 너란 언어

---

개인적으로 HTML과 CSS는 정말 재밌게 배웠습니다. 자바스크립트(javascript)도 초반에는 재밌었습니다. 그러나..갈수록 어렵고 깊이가 엄청난걸 느꼈습니다. 이래서 T자형 커리어가 중요한가봅니다. 앞으로 자바스크립트, 리액트를 중점적으로 공부할 생각인데 이 녀석은 제대로 알고가야 사용하면서도 찝찝하지 않을 것 같아서 글로 정리해보려 합니다.

어떻게 탄생하게 되었을까?

넷스케이프에 대해 아시나요? 1994년 마크 앤드리슨은 넷스케이프 내비게이터라는 웹 브라우저를 개발했고, 인터넷 사용자들의 폭발적 반응을 얻어 약 90%의 시장점유율을 차지했었습니다. 마크 앤드리슨은 정적인 페이지에 대해 "어떻게 하면 동적인 웹사이트를 만들 수 있을까?"를 고심하게 되고, DOM 요소를 조작할 수 있는 스크립트 언어(scripting language)를 추가하기로 결심하게 됩니다. 

넷스케이프는 자사 웹 브라우저에 스크립트 언어를 임베디드하기 위해 브렌던 아이크를 영입하고, 브렌던 아이크는 스킴 프로그래밍 언어를 약간 변형한 프로그래밍 언어인 자바스크립트를 개발하게 됩니다. 

 

여담으로 넷스케이프는 1995년 마이크로소프트가 인터넷 익스플로러를 개발하고, 윈도우 운영체제에 포함시켜 무료로 배포하면서 시장점유율이 급격히 떨어지고 1997년에 웹 브라우저 전쟁에서 패배하고, 1999년에 AOL이라는 미국의 온라인 사업 관련 회사가 인수했습니다.

프로토타입 기반 언어

자바스크립트는 프로토타입(prototype) 기반 언어라고합니다. 프로토타입 기반 프로그래밍에 대한 정의는 다음과 같습니다.

프로토타입 기반 프로그래밍은 객체지향 프로그래밍의 한 형태의 갈래로 클래스가 없고, 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하여 복제의 과정을 통하여 객체의 동작 방식을 다시 사용할 수 있다. 프로토타입 기반 프로그래밍은 클래스리스(class-less), 프로토타입 지향(prototype-oriented) 혹은 인스턴스 기반(instance-based) 프로그래밍이라고도 한다. - 위키백과

 

프로토타입이 무엇인지 알아보고자 공부를 몇 시간 해봤는데요. 아직은 감이 잘 잡히지 않습니다. 이 개념에 대해 깨우친 순간, 숙련도가 올라가고 재밌어진다고 하니 더 공부해보고 글로 써봐야겠습니다.
현재는 "이게 도대체 뭐지..?"란 생각밖에 안듭니다..하하;
여기서 중요한 것은 객체지향의 한 갈래가 프로토타입 기반이란 것입니다. vallista님의 면접에서 의미있는 질문을 하고있나요 글을 보면 자바스크립트가 왜 프로토타입 기반 언어인지 추측해볼 수 있습니다.

프로토타입 디자인 패턴은 여러 장점이 있지만, 그 중에서도 객체의 생성 비용을 효과적으로 줄일 수 있습니다. 그렇다면 프로토타입 기반에서 추구하는 것 중 하나는 객체의 생성 비용을 효과적으로 줄일 수 있기 때문이라고 볼 수 있겠군요. 그렇다면 JavaScript가 적용되던 환경은 객체의 생성 비용을 줄여야하는 환경이었음을 파악할 수 있습니다. - vallista님의 블로그

 

자바스크립트가 적용된 웹 브라우저의 초기 환경에선 메모리가 적게 들어가는 프로토타입 기반의 프로그래밍이 적합했던 것입니다. 하지만 현재는 웹이 할 일들이 많아지고, 하드웨어의 발전으로 환경이 매우 좋아졌습니다. 따라서 함수 기반인 프로토타입 기반 시스템보다 클래스 기반 객체 모델이 더 많은 호응을 얻으며 2015년엔 ECMAScript6(ES6)에서 Class 문법이 추가되었습니다.

AJAX의 등장

"2005년 'AJAX' 용어의 등장으로 웹이 할 일이 많아지고, 이때부터 프론트 엔드 개발자라는 완전한 분리 구조의 직군이 생기기 시작했다."라는 말을 들은 적이 있습니다. AJAX를 사용함으로써 사용자와 대화형(상호 반응) 서비스를 만들 때 중복되는 HTML 코드의 낭비를 줄여주고 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있습니다. 즉, 비동기적으로 정보 교환이 가능해집니다. 나무위키에서 말하는 정의는 다음과 같습니다.

AJAX는 Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다.
개념적으로 1999년 3월에 이미 정립되어 있었지만, 용어 자체는 2005년 2월 18일 Jesse James Garrett에 의해 처음 사용되었다. 이름에 XML이라고 명시되어있긴 하지만 JSON이나 일반 텍스트 파일과 같은 다른 데이터 오브젝트들도 사용 가능해서 요즘엔 XML을 잘 안 쓰고 십중팔구 JSON을 다룬다. 용어와 실제 기술간의 차이가 커져서 요즘에는 약어가 아닌 고유명사 취급하고 있다. - 나무위키

 

현재는 JSON을 주로 다룬다고 합니다.
이름은 'Asynchronous JavaScript and XML'이라 혼동이 올 수도 있을 것 같습니다. (작명의 중요성..?)

그래서 자바스크립트가 하는 일은?

자바스크립트(JavaScript)는 '동적인 웹 페이지를 만들기 위해' 개발된 프로그래밍 언어입니다. 자바스크립트는 브라우저뿐만 아니라 서버에서도 실행할 수 있습니다. 이 외에도 자바스크립트 엔진(JavaScript engine)이라 불리는 특별한 프로그램이 들어 있는 모든 디바이스에서도 동작합니다. 일론 머스크가 CEO인 스페이스X의 유인 우주선에 크로미움/자바스크립트가 쓰였다고 해서 화제가 되기도 했죠. 그만큼 자바스크립트가 강해지고 있는건 사실인 것 같습니다. 자바스크립트가 브라우저에서 할 수 있는 일은 다음과 같습니다.

• 페이지에 새로운 HTML을 추가하거나 기존 HTML 조작, 스타일 수정하기
• 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기
• 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX와 같은 기술 사용)
• 쿠키를 가져오거나 설정하기. 사용자에게 질문을 건네거나 메시지 보여주기
• 클라이언트 측에 데이터 저장하기(로컬 스토리지)

끝으로

웹 브라우저 환경에서 빠져선 안되는 자바스크립트. 프론트엔드 개발자라면 반드시 알아야 하며 깊이 파볼 가치가 충분히 있다고 생각합니다. 자바스크립트의 탄생부터 프로토타입 기반 프로그래밍 언어라는 사실, 역할까지 알아보았는데 이제 좀 이녀석과 친해졌단 생각이 듭니다. (아주 조금..)

---

참고

자바스크립트란? - 모던 자바스크립트 튜토리얼
Ajax란 무엇인가? - 코딩팩토리
AJAX란 무엇인가? - surim014.log
AJAX - 나무위키
Ajax - 위키백과
면접에서 의미있는 질문을 하고 있나요 - vallista