💫 개요
프로토타입에 대해서 글을 작성해보려고, 자바스크립트는 왜 프로토타입을 선택했을까글을 찾게 되었다. 그래서 흥미가 생겨서 작성해 보려 했는데 이와 관련된 글이 매우 많아서 🥲 원문을 읽어보는 게 더 도움이 될 것 같다고 생각했다. (나만 늦게 알게 된 글인 느낌?)
그래서 철학적인 이야기 말고 실제로 자바스크립트가 프로토타입을 선택하며 출시된 내용이 궁금해져 글의 방향성을 바꾸게 되었다.
🪐 자바스크립트의 탄생 비화
넷스케이프는 웹 페이지에 작성하는 HTML의 한계를 넘어서 웹을 확장하고 싶어 시작한 것이다. 특히 웹사이트에 상호작용(인터렉션) 기능을 추가하고 싶었다.
Netscape Navigator 1.0은 1994년 12월에 출시가 되었는데, 이때에 출시한 것은 상호작용은 커녕 웹 표준 지원도 제대로 이뤄지지 않았었다.
1.0은 "Cookie, HTML Table, Javascript, HTTP의 기능들"이 모두 지원되지 않았었다. 즉, HTML 마크업만 지원하는 것 정적인 웹 페이지 그이상 그이하도 아니였다.
☄️ 1993-1994: 자바스크립트가 탄생되는 배경
넷스케이프는 상업적인 목적으로 설립되었기 때문에 웹 커뮤니티에 부가가치를 제공할 방법을 찾고있었다. 넷스케이프는 웹에 멀티미디어(Image, Video 등)을 가져오고 싶어했다.
1993년 2월 초에 넷스케이프 공동 창업자 마크 앤드리슨(Marc Lowell Andreessen)이 HTML에 멀티미디어 요소를 추가하는데 관심을 가졌고, img 태그를 추가하자고 제안했다. (이때가 넷스케이프의 출신인 Mosaic가 출시한지 한달 후)
위의 사진은 마크 앤드리슨이 관심을 가졌다는 이메일이다.
이렇게 추가된 이미지는 링크(링크 클릭하면 이미지가 새창으로 열리는 형태)로만 추가할 수 있었다. 그러나 앤드리슨은 이미지를 인라인 형태로 넣고 싶어했고 1993년 후반에 브라우저에 기능을 추가하였다. 그럼에도 1995년 11월까지도 W3C HTML 사양에 포함되지 않았다.
David Brody(데이비드 브로디)(넷스케이프 기여자)는 0.9버전에서는 속도가 너무 느렸다고 리뷰도 남겼다.
Those whose umbilical cord to the net is a 14,400 kbs modem, high speed by modem standards, but a snail when it comes to loading those cool color pictures and happening sounds.
"모자이크 넷스케이프는 저처럼 대역폭이 부족한 컴퓨터 사용자들의 요구를 충족하기 위해 개발되었습니다. 인터넷과 연결된 탯줄이 14,400kbps 모뎀인 그들에게는 모뎀 기준으로는 빠른 속도지만, 멋진 컬러 사진과 생생한 사운드를 로딩하는 데는 달팽이와 같습니다."
출처: https://web.archive.org/web/19961102091029/http://desires.com/1.1/Features/netscape.html
이후 브로디는 백그라운드에서 필요하지 않은 항목(이미지)를 다운로드하는 동안 탐색할 수 있는 방식이라고 했다.
"Rather than forcing you to wait for a graphic to load, Netscape, loads a page’s text first, allowing you to scroll down the page or jump ahead to another URL while that nice looking, but perhaps not immediately necessary graphic, loads a piece at a time and without the need to wait for the page to paginate."
"Netscape는 그래픽이 로드될 때까지 기다리게 하는 대신 먼저 페이지의 텍스트를 로드하여, 보기에는 좋지만 당장 필요하지 않은 그래픽이 페이지가 매겨질 때까지 기다릴 필요 없이 한 번에 한 부분씩 로드되는 동안 페이지를 아래로 스크롤하거나 다른 URL로 이동할 수 있도록 합니다."
이미지 로딩에 대한 부담을 줄이고자 1.0버전에서는 다운로드하지 않는 옵션이 존재했다.
"You have the option, however, of turning off the automatic loading of images. You can do this by unchecking the Options/Auto Load Images menu item. When this menu item is unchecked, the images in pages do not automatically load. Instead, small icons are placed in the position on the page where an image would otherwise be."
하지만 이미지 자동 로딩 기능을 끌 수 있습니다. "옵션/이미지 자동 로딩" 메뉴 항목의 체크를 해제하면 됩니다. 이 메뉴 항목의 체크를 해제하면 페이지의 이미지가 자동으로 로딩되지 않습니다. 대신, 이미지가 있어야 할 위치에 작은 아이콘이 배치됩니다.
출처: https://web.archive.org/web/20000816221942/http://home.mcom.com/home/manual_docs/learn.html#C9
하지만 HTML만으로는 웹 페이지에 동적 요소를 추가할 수 없기 때문에 HTML에 코드를 삽입하는 방식으로 추가 기능을 추가할 수 있는 언어가 필요했다.
☄️ 1995년: Brendan Eich(브랜든 아이크) & Java
브랜든 아이크는 1995년 4월 넷스케이프에 입사한다. 사실 그는 1994년 4월에도 입사 제안을 받았었지만 거절한지 1년 후에 스크립팅 언어를 구현할 기회가 생겨 그 자리에 지원하게 되었다. 그는 "small special-purpose languages that supported kernel and networking programming tasks(커널 및 네트워킹 프로그램이 작업을 지원하는 소규모 특수 언어)"의 경력을 가지고 있어 채용이 되었다.
그는 새로운 언어를 처음부터 개발해야 할 것이라고 생각하지 않았다. 왜냐하면 연구 언어인 Scheme이나 Perl이나 Python 같은 Unix 기반 언어 등 이미 사용 가능한 언어들이 있었기 때문이다. (여기서 연구 언어는 연구나 실험적 목적으로 사용되는 프로그래밍 언어를 의미하는 것으로 보인다.)
그래서 브라우저에 Scheme을 구현할 수 있을 것이라 기대했지만 정치적인 문제들(간단히 말해서 대부분 Microsoft에 반대하였고, Netscape는 Microsoft의 경쟁사인 Sun Microsystems와 제휴를 맺음)로 인해 생각했던 방향과는 다르게(새로운 언어를 개발하는 방향) 흘러가게 되었다.
Java 의 등장
1995년 5월 23일, Sun에 의해 자바가 세상에 등장하며 넷스케이프는 브라우저에 자바를 사용할 수 있도록 라이센스를 제공했다고 발표했다. 그러나 자바는 웹 환경에 적합하지 않았다. 그 이유는 한번 작성하게 되면 어디서든 실행가능한 범용 프르그래밍 언어였지만, 프로그래머가 아닌 사람들(웹 디자이너)이 사용하기엔 너무 복잡했다. 그래서 넷스케이프는 자바 대신 더 작고 배우기 쉬운 프로그래밍 언어를 스크립팅 언어가 필요하다고 판단했다.
출처: https://archive.org/details/MicroComputerJournal1996MarApr/page/n23/mode/2up
위의 사진은 Java가 의학 연구 및 교육에 사용이 되고 있는 예시이다. 사진 설명을 보면 어떻게 사용할 수 있는지에 대해 설명이 쓰여있다.
Javascript의 마케스라이팅
자바스크립트는 "자바처럼 보이지만", 자바처럼 클래스 기반이 아닌 객체 기반 언어가 되어야 한다는 결정이 내려졌다. 아이크는 나중에 "(I was under marketing orders to make it look like Java but not make it too big for its britches … [it] needed to be a silly little brother language.)자바처럼 보이도록 하되, 너무 과장되지 않도록 하라는 마케팅 지시를 받았습니다. [자바는] 바보 같은 동생 언어가 필요했습니다." 라고 회상했다.
(🥹 여기서도 정치적인 이슈가..)
이후 아이크는 "자바스크립트"에 대한 이름에 불만을 품어왔다. 트위터에도 "(big fat marketing scam)거대한 마케팅 사기"라고 올린 글도 있다.🤣 (https://x.com/BrendanEich/status/1334966006813319168)
Computing Conversations with Brendan Eich
에서 인터뷰한 영상을 살펴보면 자바스크립트를 매우 유연한 언어로 만들어하다고 얘기한다. 오늘날의 자바스크립트는 웹 환경, 서버 환경 등 다양한 용도로 사용되고 있기 때문에 인기를 이끌고 있다.
(위 영상에서 자바스크립트를 개발하게 된 이야기를 직접 들을 수 있으니 한번 재미 삼아 보는 것도 추천해 드립니다.)
HyperCard
자바스크립트는 웹보다 먼저 등장한 Apple의 HyperCard(애플이 만든 응용프로그램)에 영감을 받았다. HyperCard에는 HyperTalk이라는 객체 지향 스크립팅 언어가 포함되어 있는데 이는 프로그래머가 아닌 사람도 쉽게 배울 수 있게 만들어져 있었다.
HyperTalk의 문법 살펴보기: https://wiki.xxiivv.com/site/hypertalk.html
자바스크립트가 HyperTalk의 영감을 받았다는 설명이 "넷스케이프 자바스크립트 핸드북 문서"에 설명이 되어 있다.
In contrast, JavaScript descends in spirit from a line of smaller, dynamically typed languages like HyperTalk and dBASE. These scripting languages offer programming tools to a much wider audience because of their easier syntax, specialized built-in functionality, and minimal requirements for object creation.
JavaScript는 HyperTalk와 dBASE처럼 작고 동적으로 타입이 지정되는 언어 계열에서 정신적으로 유래되었습니다. 이러한 스크립팅 언어는 쉬운 구문, 특화된 내장 기능, 그리고 객체 생성에 대한 최소한의 요구 사항 덕분에 훨씬 더 폭넓은 사용자에게 프로그래밍 도구를 제공합니다.
☄️ Mocha → LiveScript → Javascript
그렇게 Mocha(현 자바스크립트)가 1995년 5월에 등장하게 되었다. 1995년 8월에 넷스케이프는 IPO를 얼마 남기지 않았기 때문에 Navigator 2.0에 통합하는데 집중하였다.
9월에 Navigator 2.0의 베타버전이 출시하였을 때, LiveScript라는 이름으로 첫 번째 버전이 포함되었다. 이후 12월에 Javascript라는 이름으로 출시되게 된다.
릴리즈 노트: https://www.ibiblio.org/team/history/evolution/browser
릴리즈 노트에는 자바스크립트에 대해서 다음과 같은 설명이 쓰여 있다.
"Flexible, lightweight programmability is provided via JavaScript, a programmable API that allows cross-platform scripting of events, objects, and actions. It allows the page designer to access events such as startups, exits, and user mouse clicks. Based on the Java language, the JavaScript extends the programmatic capabilities of Netscape Navigator to a wide range of authors and is easy enough for anyone who can compose HTML."
"이벤트, 객체 및 액션의 크로스 플랫폼 스크립팅을 지원하는 프로그래밍 가능 API인 JavaScript를 통해 유연하고 가벼운 프로그래밍 기능을 제공합니다. 페이지 디자이너는 JavaScript를 통해 시작, 종료, 사용자 마우스 클릭과 같은 이벤트에 접근할 수 있습니다. Java 언어를 기반으로 하는 JavaScript는 Netscape Navigator의 프로그래밍 기능을 다양한 작성자에게 확장하며, HTML을 작성할 수 있는 사람이라면 누구나 쉽게 사용할 수 있습니다."
이렇게 자바스크립트가 포함된 Netscape Navigator 2.0 는 배포가 되었다.
1995년 후반에 Javascript를 통해 만들어진 웹의 예시들은 현재 접근이 가능한 곳은 많이 없지만, 해당 자바스크립트 구현체 목록은 있다.
실제로 동작하는 예시는 Ticker Tape("ticker tape scrolling text")가 있는데 여기서 확인이 가능하다.
이후의 이야기는 자바스크립트가 점점 진화하고, ECMA에 의해 표준화되어 발전되는 단계로 접어들게 된다. 여기 이후부터는 더 깊게 알아보지 않고 10일동안 개발한 내용에 대해서 더 깊게 알아보려고 한다. 더 관심이 있으면 이후의 이야기도 재미가 있으니 한번 보는 것도 추천한다.
🪐 10일 간의 자바스크립트 여정
☄️ Day 1~2: 구문 결정
Java의 구문을 차용하여 익숙한 문법을 내장하게 된다.
C 언어의 중괄호를 사용한 Java 유사 구문
function greet(name) {
return "Hello, " + name + "!";
}이러한 유사 구문 기저에는 Self/Scheme에 영향을 받은 프로토타입-기반의 언어를 내재하게 된다.
// 일급-객체 함수
const greetings = ["Alice", "Bob", "Charlie"].map(function (name) {
return "Hi, " + name;
});
// 프로토타입 기반 내제
function Animal(type) {
this.type = type;
}
Animal.prototype.speak = function () {
return "The " + this.type + " makes a sound.";
};☄️ Day 3~5: 객체 그리고 프로토타입
자바의 클래스 기반 객체지향과는 다르게 더 유연한 프로토타입 모델을 선택하게 된다.
객체는 런타임 환경에서 수정이 가능하게 되는 형태이다.
const animal = {
type: "pig",
speak: function() {
return "The " + this.type + " makes a sound."
}
}
// 프로퍼티를 동적으로 추가한다.
animal.leg = '4';
이렇게 동적으로 추가가 가능해지면서 유연해졌지만, 가장 오해가 생기는 기능 중 하나로 자리잡았다.
☄️ Day 6~7: 일급 객체로서의 함수
일급 객체(First-class citizen) 함수란?
함수가 값처럼 변수에 할당, 전달, 반환될 수 있는 것을 의미한다.
- 변수에 할당(assignment)할 수 있다.
- 다른 함수를 인자(argument)로 전달 받는다.
- 다른 함수의 결과로서 반환될 수 있다.
function multiplier(factor) {
return function (number) {
return number * factor;
};
}
const double = multiplier(2);
const triple = multiplier(3);
console.log(double(5)); // 10
console.log(triple(5)); // 15일급 객체 함수가 가능해지면서 클로져, 콜백, 비동기, React의 훅 등 고급 기능이 가능해지게 된 것이다.
☄️ Day 8~10: 자바스크립트의 이상한 점들
시간적 압박(🥹)으로 인해 개발자들로 하여금 자바스크립트의 이상한 점들이 여기서 발견되게 된다. 이와 관련된 퀴즈 사이트도 있다 ㅋㅋ(https://jsisweird.com/)
// 자동 형변환
console.log(5 + '3'); // 53
console.log(5 - '2'); // 3
// 동등 연산자의 느슨한 비교
console.log(true == "true"); // false
console.log(true === "true"); // false
console.log(0 == "0"); // true
console.log(0 === "0"); // false
console.log(NaN === NaN); // false
// https://2ality.com/2013/10/typeof-null.html
// typeof null이 object로 나오는 이유는 "버그" 입니다
console.log(typeof null); // "object"⚡️ 마무리
가장 많이 사용하고 있는 언어인 Javascript에 대해서 관련 내용을 찾아보면서 흥미로운 내용을 많이 알게 된 것 같다. 유연하게 개발이 브랜든이 10일만에 개발한 언어임에도 불구하고 지금까지도 유연하게 사용할 수 있는 언어로 각광받고 있는게 신기하기도 했다.
"프로토타입 기반 상속", "일급-객체 함수"와 같은 유연함이 인기가 있어진 이유에 한몫을 하는게 아닐까 한다. 그리고 네이밍에 있어서 마케팅적 요소가 가미된 히스토리는 이번에 처음 알게 되었는데 예상밖의 내용이라 당황했다.
I’m not proud, but I’m happy that I chose some good features and patterns to lift from better programming languages. - Brendan Eich-
자랑스럽지는 않지만, 더 나은 프로그래밍 언어에서 몇 가지 좋은 기능과 패턴을 따와서 선택했다는 점이 기쁘다.
참고 자료
