Javasciprt란 무엇인가? - 개발자의 책 읽기(모던 자바스크립트 DeepDive #1)

서문 : ‘빨리 가는 유일한 방법은 제대로 가는 것이다.’ (로버트 C. 마틴)

자바스크립트의 태생적 특징

자바스크립트는 과도할 정도로 친절한 프로그래밍 언어다.

이러한 친절한 자동화는 편리하기도 하지만 내부동작을 이해하기 어렵게 한다.

이 친절함은 자바스크립트가 다른 언어와 목적이 다르기 때문이다.

대부분의 프로그래밍 언어가 어플리케이션 개발을 위한 범용적인 용도로 설계되었다.

그러나 JS는 웹 페이지의 단순한 보조 기능 처리하는 제한적 용도로 탄생했다.

그러나 이제 자바스크립트도 범용성을 가진 언어로 인식되고 사용된다.

때문에 기본 개념과 동작 원리의 이해가 필요하다.

기본 개념의 중요성

기본 개념과 동작 원리는 라이브러리 등 특정 기술에 국한되지 않는 기본 기술이다.

또한 코드의 동작을 예측하고 설명하는데 필수적이다.

즉, 안정적이고 효율적인 코드를 생산하는 기본기이다.

기본기는 아무리 강조해도 지나치지 않다.

학습 방법

모든 것을 한번에 학습하려 하지 말고 중요한 키워드를 중심으로 기본 개념과 동작 원리를 익힌다.

한 번에 이해하려기 보단 여러번의 반복을 추천한다.

학습중인 키워드에 집중하고, 엘리스의 토끼굴에 빠지지 않도록 경계하라.

어느 정도 이해했다면 코드로 구현하라.

이 때 연습은 의도적인 연습이 되어야 한다.

쉬운 것 보단 어느정도 새로운 시도와 실패를 경험하도록 스스로를 유도해라.

이렇게 기본 개념과 동작 원리, 코딩 스킬, 프로젝트를 통한 실전이라는 사이클을 순환하라.

이를 반복하면서 이해를 점진적으로 넓혀나가는 것, 즉 지속적인 개선을 통한 성장이 바로 학습니다.

1. 프로그래밍

1.1 프로그래밍이란?

인간의 사고방식은 매우 포괄적이다.

또한 실생활에서 경험한 익숙한 사항에 대해 당연시하는 안이한 인식이 있다.

컴퓨터는 인간과 사고, 인지의 방식이 다르다.

때문에 문제 해결의 방식은 컴퓨터의 방식으로 이뤄져야한다.

1.2 프로그래밍 언어

컴퓨터는 기계어를 사용한다.

인간은 기계어에 능숙하지 못하기 때문에 컴파일러 혹은 인터프리터의 도움을 받는다.

컴파일러는 사람의 언어와 가까운 프로그래밍 언어를 기계어로 바꿔준다.

프로그래밍은 프로그래밍 언어를 사용해 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다.

프로그래밍 언어는 구문(syntax)와 의미(semantics)의 조합으로 표현된다.

1.3 구문의 의미

프로그래밍은 학습은 일반적으로 언어의 문법을 배우는 것이다.

그러나 문법 만으로 충분하지 않다.

문법적(syntex)으로 온전해도 의미(semantics)가 없다면 문제가 있는 것이다.

작성된 코드는 해결의 구체적 구현물이다.

이것은 프로그래밍 언어 문법에 부합해야 함은 물론이고 명확한 수행도 동반해야 한다.

즉 요구 사항이 실현되어야 의미가 있다.

결국 프로그래밍은 요구 사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것이다.

2. Javascript란?

2.1 자바스크립트의 탄생

(생략)

2.2 자바스크립트의 표준화

(생략)

2.3 자바스크립트 성장의 역사

(생략)

2.3.1 Ajax

서버와 브라우저가 비동기 방식으로 데이터를 교환하는 통신 기능을 의미한다.

Ajax 전에는 화면 전환을 위해 모든 html을 다시 랜더링 해야 했다.

그래서 필요 없는 부분까지 데이터를 전송하는 낭비가 발생한다.

Ajax 등장 이후 필요한 부분만 전송받아 랜더링 하는 기능이 가능해졌다.

이로서 웹 브라우저도 데스크톱 App과 유사한 빠른 성능과 부드러운 화면 전환이 가능해졌다.

2.3.2 jQuery

jQuery는 번거롭던 DOM 조작을 더우 쉽게 해주었다.

또한 크로스 브라우징 이슈도 상당 부분 해소해줬다.

jQuery로 인해 배우기 까다롭고 브라우저에 따른 이용이 어려웠던 JS의 활용도를 향상시켰다.

2.3.3 V8 자바스크립트 엔진

2005년 구글 맵스를 통해 JS 가 웹 App 언어로서 가능성 인정받았다.

Web app 구축을 위한 시도가 늘면서 더욱 빠르게 동작하는 앤진 필요성 대두되었다.

2008년 등장한 V8 JS 엔진은 빠른 성능으로 JS가 웹 App 개발 언어로 정착하는 계기가 되었다.

V8 JS 엔진으로 과거 웹 서버에서만 수행되던 로직들이 대거 클라이언트로 이동했다.

웹 개발에서 프런트엔드 영역이 주목받는 계기로 작용한다.

2.3.4 Node.js

node.js는 google V8 JS 엔진으로 빌드된 자바스크립트 런타임 환경이다.

node.js로 인해 JS는 브라우저 이외의 환경에서도 동작이 가능해진다.

비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로 요청 처리 성능이 좋다.

다양한 활용이 있지만, 서버 사이드 개발에 주로 사용된다.

이로서 JS는 브라우저를 넘어 크로스 플랫폼을 위한 가장 중요한 언어로 주목받고 있다.

2.3.5 SPA 프레임 워크

웹 어플리케이션은 데스크톱 어플과 비교해도 손색없는 성능이 필요해졌다.

더불어 개발 규모와 복잡도도 상승했다.

이를 위해서 CBD(Component Based Development)를 기반으로 한 SPA가 대중화된다.

여기에는 React, Angular, Vue, Svelte 등이 있다.

2.4 자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준 사양인 ECMA-262를 말한다.

이는 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정한다.

각 브라우저 제조사는 ECMAScript의 사양을 준수해 브라우저에 내장되는 자바스크립트 엔진을 구현한다.

JS는 일반적으로 언어로서 뼈대인 ECMAScript와 브라우저 별도 지원하는 Client Side Web API로 구성된다.

Client Side Web Api에는 DOM, BOM, Canvas, XMLHttpRequest, fetch 등이 있다.

2.5 자바스크립트의 특징

자바스크립트는 웹 브라우저에서 작동하는 유일한 프로그래밍 언어다.

기본 문법은 C, Java와 유사하고 Self에서는 프로토타입 기반 상속을, Scheme 에서는 일급함수의 개념을 차용했다.

JS는 개발자가 별도의 컴파일 과정을 수행하지 않는 인터프리터 언어다.

브라우저 마다 모던 자바스크립트 엔진이 있다.(Chrome의 V8, 파이어 폭스의 SpiderMonkey 등등)

이들은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리속도가 느린 인터프리터의 단점을 해결했다.

인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성, 최적화 한다.

이를 통해 컴파일 단계에서 추가적인 시간이 필요함에도 더울 빠르게 코드를 실행 할 수 있다.

즉, 자바스크립트는 인터프리터 언어이지만 엔진을 통해 컴파일 언어의 장점도 가지고 있다.

3. 자바스크립트 개발 환경과 실행 방법

3.1 자바스크립트 실행 환경

모든 브라우저와 node.js는 JS 엔진을 내장하고 있다.

즉, JS는 브라우저나 node.js에서 실행 가능하다.

다만 브라우저는 HTML, CSS, JS를 실행해 웹 페이지를 브라우저 화면에 렌더링 하는 것이 주된 목적이다.

그러나 node.js는 브라우저 외부에서 실행 시키는 것이 목적이다.

이로서 node.js에서는 ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다.

예를 들어 브라우저는 HTML 요소를 파싱해서 객체화한 DOM API를 제공한다.

그러나 node.js에서는 DOM을 직접 다루지 않기 때문에 필요가 없다.

반대로 node.js는 파일을 생성, 수정 할 수 있는 시스템을 기본 제공한다.

그러나 브라우저는 보안상의 문제로 수정과 생성 기능을 제공하지 않는다.

요약하면 브라우저는 ECMAScript와 Web API를, node.js는 ECMAScript와 Node 고유 API를 제공한다.

3.2 웹 브라우저

웹 브라우저를 통한 JS 이용의 가장 중요한 점은 콘솔과 디버깅이다.

콘솔은 구글의 ‘Tools for Web Developers: 콘솔 사용’

디버깅은 ‘Tools for Web Developers: Chrome DevTools에서 JS 디버깅 시작하기’를 참고하기 바란다.

3.3 Node.js

프로젝트의 규모가 커지면서 단일 JS만으로는 어플리케이션을 제어하기 어려워진다.

복잡성을 제어하기 위해 필요한 것이 프레임워크와 라이브러리 혹은 Babel, Webpack, ESLint 등 도구들이다.

이를 다운로드 하기 위해 Node.js와 npm이 필요하다.

3.3.1 node.js와 npm

노드는 2009년 ‘라이언 달’이 크롬 V8 엔진으로 만들어 배포했다.

npm(node package manager)은 node의 패지키 메니저다.

npm을 통해 자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색해 사용할 수 있다.

3.3.2 Node.js 설치

노드는 2009년 ‘라이언 달’이 크롬 V8 엔진으로 만들어 배포했다.

npm(node package manager)은 node의 패지키 메니저다.

npm을 통해 자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색해 사용할 수 있다.

3.3.3 Node.js REPL

(생략)

3.4 비주얼 스튜디오 코드

(생략)