오늘서핑은 서적 '모던 자바스크립트 DeepDive'를 완독하고자 하는 굳은 결심으로 시작된 프론트엔드 개발자 지망생인 나의 웹서핑 기록이다.

• 수기로 도서 내용을 정리한 내용은 상단에, 조금이라도 의아한 것들의 서핑기록은 하단에 정리했다.
• 내가 타고다닌 링크들은 title명: 사이트명 혹은 플랫폼으로 정리되었다.
• 초보 서퍼의 기록이므로 맞지 않는 이해나 서술이 있을 가능성이 다분하다.
• 무엇이든 코멘트를 남겨주시면 기쁠것이다.

그리고 그 과정에서 부디 내가 좀더 나은 서퍼가 될 수 있기를.

---

들어가며

자바스크립트의 탄생 목적 : 웹 페이지의 보조기능 처리. 다른 언어들은 애플리케이션을 위한 범용적인 언어로 출발했다.

1.1 프로그래밍이란

컴퓨터에게 실행을 요구하는 커뮤니케이션

• 요구사항을 명확히 이해할 것
• 작은 단위로 분해할 것
• 자료를 구분하고 정리할 것
• 순서와 행위를 배열할 것

구문 Syntax와 의미 Semantics의 조합이다

1.2 프로그래밍 언어

사람 - 프로그래밍언어 - 컴파일러 - 기계어 - 컴퓨터

요구사항의 집합을 분석하고, 그것을 자료구조와 함수의 집합으로 변환한뒤 그 흐름을 제어하는 것

2.1 자바스크립트의 탄생

1. 당시 브라우저 점유율이 높았던 넷스케이프커뮤니케이션즈가 웹페이지 보조기능을 수행할 경량 프로그래밍 언어 도입.
2. 마이크로 소프트에서 JScript를 인터넷 익스플로러에 탑재.
3. 시장점유율을 높이기 위해 자사브라우저에서만 동작하는 기능을 경쟁적으로 추가.
4. 브라우저에 따른 크로스 브라우징 이슈가 발생
5. 넷스케이프가 컴퓨터 시스템 표준관리 비영리 표준화 기구 ECMA인터네셔널에 표준화 요청

2009년 ES5가 HTML5와 함께 나옴
2015년 ES6 (let, const, 화살표 함수, 스프레드 문법, rest파라미터 등)의 주요 업데이트

2.2 성장의 역사

당시엔 대부분 로직이 서버에서 실행되고, 브라우저는 서버가 준 HTML과 CSS를 렌더링 하는 수준이었다.

2.3.1 Ajax

Asynchronous Javascript and Xml

1. 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 기능이 XMLHttpRequest로 추가되었다.

2. 이전에는 페이지를 로드할때 서버로부터 새로운 HTML을 받아 처리했지만 불필요한 부분까지 다시 렌더링하며 화면이 순간적으로 깜빡이는 현상이 발생

3. 서버로부터 필요한 데이터만 받아 변경할 부분만 변경(렌더링)하자!
   Ajax를 사용한 상징적인 서비스로 2005년의 구글 Maps가 있다.

2.3.3 V8자바스크립트 엔진

웹서버의 로직들이 대거 브라우저로 이동하였으며 프론트엔드가 주목받는 계기가 되었다

2.3.4 Node.js

라이언 달이 개발한 구글 V8엔진으로 빌드된 런타임환경. 브라우저에서만 작동하던 자바스크립트 엔진을 브라우저에서 독립시켰다. 서버사이드에서 주로 사용하며 필요한 모듈, 파일 I/O 시스템, 내장 Api를 제공한다.
비동기 I/O를 지원하는 싱글스레드 이벤트 루프 기반으로 동작하며 요청Request 처리 성능이 좋다. 데이터의 실시간 처리가 빈번한 SPA에 적합하며 CPU사용율이 높은 어플리케이션에는 권장하지 않는다.

범용개발 언어로 발돋움해 크로스플랫폼의 중요한 언어로 부상하였다

• 웹, 모바일 하이브리드앱
• 서버 Node.js
• 데스크톱 Electron
• 머신러닝 TensorFlow.js
• 로보틱스 Johnny-Five

2.3.5 SPA 프레임워크

모던 웹 어플리케이션은 데스크톱 어플리케이션과 비교해도 손색없는 사용자 경험을 제공하게 되었으며 이에 따라 개발규모와 복잡도가 상승하였다. 패턴과 라이브러리가 등장했으나 변경하기 유연하지 않고 확장하기 어렵다는 아쉬움이 있어 프레임워크가 등장했다. CBD방법론 Component based development 의 SPA가 대중화 되기 시작했다.

---

서핑 기록

DOM 논란?

10p에 '다소 번거롭고 논란이 있던 DOM'이라는 표현이 있어서 참지 못하고 구글링해보았다. javascript DOM 논란 등등. (...다소의 논란은 호기심을 자극하는 법이다) 어떤 논란 이 있었는지는 알지 못하였다.

자바스크립트란(1): 블로그

• Javascript는 C-family language로 C, Java에서 많은 문법을 차용했으며 Awk, Perl, Python으로부터 영향을 받았다.
• Javascript는 인터프리터 언어(Interpreter language)이기 때문에 HTML파일 안에 직접 기술이 가능하다.

리마인드에 도움이 되었으나 나는 논란이 궁금했다!

크로스 브라우징과 클라이언트 탐지

가십을 찾다가 도착한 곳은 엉뚱하게도 크로스브라우징 문제를 해결하는 테스트 방법에 대해 적어놓은 기술블로그였다. 아직 브라우저별, 디스플레이별 크로스 브라우징 최적화를 해본적이 없는 나로서는 처음 접하는 정보여서 스크랩 해두었다.

클라이언트 탐지, 기능탐지, 퀵스 탐지: 블로그

• 여러 플랫폼에서 동작하는 브라우저는 종종 플랫폼별로, 심지어는 기술적으로 같은 버전인데도 서로 다른 문제를 갖고 있습니다. 이러한 차이 때문에 웹 개발자들은 모든 브라우저에서 공통인 최소한의 기능만 이용하여 디자인하거나 다양한 클라이언트 탐지 방법을 통해 제한점을 우회하여 개발합니다.
• 브라우저 사이의 차이와 혼란스러운 점이 너무 많아서 클라이언트 탐지는 보험처럼 만약을 대비한 수단일 수도 있지만 개발 전략에서 빼놓을 수 없는 중요 파트입니다.
• 기능 탐지에서 매우 중요한 두 가지 개념 (1)
  같은 결과를 얻을 수 있는 가장 일반적인 방법을 제일 먼저 테스트 해야 합니다.
• document.getElementById() 를 document.all보다 먼저 테스트하는 것이 이에 해당합니다. 일반적인 기능을 먼저 테스트하면 테스트할 조건 수가 줄어들어 코드 실행이 능률적입니다.
• 기능 탐지에서 매우 중요한 두 가지 개념 (2)
  사용하려는 기능을 정확히 테스트해야 합니다. A라는 기능이 어떤 브라우제 있다해서, 다른 브라우저에 그를 대신할 B 기능이 반드시 존재하는건 아닙니다.

DOM

그래서 다시 DOM에 대해 찾기 시작했다. 도큐먼트 오브젝트 모델. 수업에서 배울때는 html 문서구조를 트리구조의 객체로 치환시키는 방식. 정도로 모호하게 알고 있었는데 MDN에 가서 처음으로 정확한 정의를 읽어보았다

DOM소개: MDN

• DOM이란 HTML, XML 문서의 프로그래밍 인터페이스 이다.
• 문서의 구조화된 표현을 제공하고, 프로그래밍 언어가 구조에 접근할 수 있는 방법을 제공한다.
• 즉, 웹페이지를 스크립트 또는 프로그래밍언어가 사용할 수 있게 연결시켜주는 역할을 담당한다.
• DOM은 웹페이지의 객체 지향 표현이다.
• 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다
• 초창기에는 자바스크립트와 DOM 가 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전해왔다.
• 많은 objects 가 여러 개의 다른 interfaces 와 연관되어 있다. 예를 들어, table object 는 createCaption, insertRow method 들이 포함된 HTMLTableElement 을 구현한 것이다.
• window object 는 브라우저와 같다고 할 수 있으며, document object 는 root document 자체라고 할 수 있다.

오늘의 큰 배움. 하나의 개념으로 느꼈던 코드들이 모두 인터페이스의 집합이었다니. 한줄한줄 짜인 코드가 상속되고 묶이기를 반복하며 효율과 생산성을 극대화시키는구나, 하는게 바로 와닿았다. 특히 html에서 별 생각 없이 써왔던 <table>태그가 table object, 즉 table을 생성하는데 필요한 메소드를 포함하고 있는 HTMLTableElement를 구현했다는 대목이 인상깊다.

웹 공부를 하면서 느끼는, 이 모든것이 '마술'이 아니라 누군가가 구현해낸 '기술'이라는 걸 알아냈을 때의 특별한 전율이 있다. 태어날때부터 윈도우 XP가 있었고, GUI 컴퓨터를 '컴퓨터'로 알고 살아갔었기 때문에 더 새삼스러운지도 모른다.

문서 객체 모델:위키백과

• 문서 객체 모델의 역사는 1990년대 말 웹 브라우저의 자바스크립트 엔진에 널리 구현된 최초의 스크립트 언어들인 자바스크립트와 J스크립트의 역사, 그리고 넷스케이프 내비게이터와 인터넷 익스플로러 간 브라우저 전쟁의 역사와 뒤얽혀있다.
• ECMA스크립트의 표준화 이후 W3C DOM 워킹 그룹은 표준 DOM 사양의 초안화를 시작하였다. "DOM 레벨 1"이라는 이름의 완성된 사양은 1998년 말 W3C 권고안이 되었다

DOM의 단계 단락에서 단계 3에 Xpath가 나와서 반가웠다. spring 프로젝트때 api가 xml응답만 지원하여서 곤란했을때, java.Xpath 패키지를 이용해 xml을 노드 리스트로 바꾸고, 해당 노드의 내용을 추출하여 디비에 저장했던게 생각났다.

• 만약 개발자가 마이크로소프트의 DOM 확장을 사용한다면 표준 준수에 대한 신뢰성을 잃을 수 있으며, 반대의 경우라면 비표준 확장을 사용하지 않음으로 생기는 기능적 제약 때문에 사용자가 이탈할 수도 있다.
• 얄궂게도 마이크로소프트와 넷스케이프 양쪽 다 표준 경쟁의 와중에서 비표준 기능을 퍼트리게 된 것에 대한 책임을 피할 수 없다

해당 단락에서는 조금 웃고 말았다.

Document

그리고 DOM 문서를 본 김에 Document 문서를 보고, 콘솔창을 켜서 도큐먼트 메소드를 몇가지를 호출해보았다. 이 문서가 '믹스인'이라는 표현을 처음 접하는 계기가 되었다

Document: mdn

• 다음 이벤트 처리기들은 GlobalEventHandlers 믹스인이 정의하고, HTMLElement, Document, Window와 웹 워커의 WorkerGlobalScope (en-US)가 구현합니다.

믹스인

믹스인 :javascript.info

• 믹스인은 특정 행동을 실행해주는 메서드를 제공하는데 단독으로 쓰이지 않고 다른 클래스에 행동을 더해주는 용도로 사용된다.
• 믹스인은 이벤트 핸들링 등의 행동을 추가하여 클래스를 확장하는 용도로 사용할 수 있다.
• 객체지향의 범용적 용어로, 다른 클래스들의 메서드 조합을 포함하는 클래스이며, 자바스크립트처럼 다중상속을 지원하지 않는 언어에서 믹스인으로 메서드를 복사한 뒤 프로토타입으로 구현할 수 있다.

아마 클래스 진도를 나가지 못하고 spring으로 넘어갔기 때문에 처음 들어봤던 것 같다. 기본서 정독하면서 클래스 파트까지 도달하기만을 고대중.

그 다음으로 궁금했던 것은 런타임 환경과 엔진의 차이이다.

런타임 환경과 엔진의 차이

자바스크립트 엔진과 런타임의 차이: 블로그

• 자바스크립트 엔진은 파싱과 JIT컴파일을 하는 머신을 제공해야한다.
• 스크립트로 기계가 실행가능한 과정을 만들어내는 것
• 런타임환경은 프로그램이 실행될 동안 사용 가능한 내장된 라이브러리를 제공한다.
• 만약 컴퓨터 내에서 프로그램이 가동되면, 컴퓨터가 그 프로그램의 런타임 환경이다. 일부 프로그래밍 언어는 재사용 가능한 프로그램이나 루틴들이 런타임 라이브러리로 만들어진다. 이런 루틴들이 프로그램이 실행될 때 연결되어 사용가능해진다.

JIT 컴파일

JIT컴파일: 위키백과

• just-in-time, 혹은 동적번역.
• 프로그램이 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법
• 인터프리터와 정적 컴파일을 혼합한 방식으로
  실행시점에 인터프리터 방식으로 바이트 코드를 생성하고, 이후 캐싱하여 같은 함수의 재생성을 방지한다.
• 소스코드 - 바이트 코드 - 기계어
• 미리 바이트 코드를 통해 최적화 후 기계어로 번역하므로 성능이 빠르다

그리고 spa 파트에서 나온 CBD방법론에 대한 각주를 참고했다

CBD 방법론

• Component based development
• 기존의 시스템이나 소프트웨어를 구성하는 컴포넌트를 조립해서 하나의 응용프로그램을 만드는 소프트웨어 개발 방법론

언젠가서핑

• 자바스크립트 엔진의 파싱
• 단일 스레드 이벤트 루프 기반이라는 것
• cpu 사용율이 높은 어플리케이션과 그렇지 않은 어플리케이션
• CSSOM과 렌더링
• API와 인터페이스 전반에 대한 기초를 더 닦는것