해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다.
이번에는 JavaScript lesson 1~4에 해당되는 프로그래밍 기본 개념, 자바스크립트란?, 개발 환경, 브라우저 동작 원리에 대해 알아보겠습니다.
1. 기본 개념과 동작 원리 이해의 중요성(Programming)
프로그래밍이란?
기계가 실행할 수 있는 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며, 작업물이 코드입니다.
컴퓨터와 사람은 사고와 인지의 방식이 다른데 이 때 필요한 것이 컴퓨터의 관점으로 사고를 하는 Computational thinking 입니다.
이 때 논리적, 수학적 사고가 필요하게 되고, 해결 과제를 작은 단위로 분해하고 패턴화하여 추출하며 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의되어야 합니다.
프로그래밍 언어
명령을 수행할 주체는 컴퓨터이기 때문에 컴퓨터가 이해할 수 있는 언어인 기계어로 명령을 전달해야 합니다.
직접 기계어로 명령을 전달하는 것을 대체할 수 있는 것이 인간이 이해할 수 있는 약속된 구문으로 구성된 프로그래밍 언어입니다.
프로그래밍 언어는 Syntax(구문)와 Semantics(의미)의 조합으로 표현됩니다.
이렇게 작성된 것을 기계어로 변환해주는 번역기가 컴파일러(compiler) or 인터프리터(interpreter)라고 합니다.
Syntax & Semantics
프로그래밍 학습은 외국어 학습과 유사하다고 할 수 있습니다.
문법을 안다고 해서 잘하는 것이 아닌 문법에 맞는 문장을 구성하여 의미를 가지고 있어야 합니다.
문제 해결 능력을 통해 만들어낸 코드는 수행하고자 하는 바를 정확하게 수행하는 것, 즉 요구사항이 실현(문제가 해결)되어야 의미가 있습니다.
프로그래밍 언어가 제공하는 문법을 적절히 사용하여 변수를 통해 값을 저장하고 참조하며 연산자로 값을 연산, 평가하고 조건문과 반복문에 의한 흐름제어로 코드의 실행 순서를 제어하고 함수로 재사용이 가능한 문의 집합을 만들며 객체, 배열 등으로 자료를 구조화 합니다.
따라서 프로그래밍은 요구사항의 집합을 분석해 적절한 자료구조와 함수의 집합으로 변환한 후, 흐름을 제어하는 것입니다.
기본 개념과 동작 원리 이해의 중요성
프로그래머가 해야 할 일은 문제를 해결하기 위한 방안을 고안하고 문법에 맞게 코드를 구현하는 것입니다.
구현된 코드는 의도한대로 정확히 동작해 문제를 해결해야 합니다.
이를 위해서는 기본 개념과 동작 원리를 정확하게 이해하는 것이 중요합니다.
기본 개념은 문맥에 맞는 정확한 용어를 사용할 수 있게 도우며, 명확한 의사 소통을 가능하게 합니다.
동작 원리의 이해는 코드의 동작을 예측할 수 있게 돕습니다.
에러를 발생시키는 코드를 만나도 원인을 이해해야 디버깅이 가능합니다.
즉, 기본 개념과 동작 원리의 이해는 어렵고 생소한 용어들로 이루어진 기술적 의사소통을 가능하게 합니다.
자바스크립트란?
자바스크립트의 탄생 및 파편화와 표준화
1995년 동적으로 표현하기 위해 Brendan Eich가 개발했습니다.
1996년 3월, 넷스케이프 커뮤니케이션즈의 웹 브라우저인 Netscape Navigator 2에 탑재합니다.
그러나 얼마 안 되어 파생버전인 JScript가 8월에 출시하며, 자바스크립트에 위기가 찾아옵니다.
브라우저의 시장 점유율을 점유하기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하기 시작합니다.
이로 인해 브라우저에 따라 웹 페이지가 정상 동작하지 않는 크로스 브라우징 이슈가 발생했습니다.
자바스크립트의 파편화를 방지하고 모든 브라우저에서 동일하게 동작하는 표준화된 자바스크립트에 대한 필요성이 제기되기 시작했습니다.
1996년 11월, 넷스케이프 커뮤니케이션즈는 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA 인터내셔널에 자바스크립트의 표준화를 요청하게 됩니다.
1997년 7월, 자바스크립트 초판(ECMAScript 1)의 명세(specification)가 완성되었고 상표권 문제로 자바스크립트는 ECMAScript로 명명되었습니다.
ECMAScript의 버전별 특징은 다음과 같습니다.
버전 |
출시 년도 |
특징 |
---|---|---|
ES1 | 1997 | 초판 |
ES2 | 1998 | ISO/IEC 16262 국제 표준과 동일한 규격을 적용 |
ES3 | 1999 | 정규 표현식, try…catch 예외 처리 |
ES5 | 2009 | HTML5와 함께 출현한 표준안. JSON, strict mode, 접근자 프로퍼티(getter, setter), 향상된 배열 조작 기능(forEach, map, filter, reduce, some, every) |
ES6 (ECMAScript 2015) | 2015 | let, const, class, 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당, spread 문법, rest 파라미터, Symbol, Promise, Map/Set, iterator/generator, module import/export |
ES7 (ECMAScript 2016) | 2016 | 지수(**) 연산자, Array.prototype.includes, String.prototype.includes |
ES8 (ECMAScript 2017) | 2017 | async/await, Object 정적 메소드(Object.values, Object.entries, Object.getOwnPropertyDescriptors) |
ES9 (ECMAScript 2018) | 2018 | https://github.com/tc39/proposal-object-rest-spread |
자바스크립트 성장의 역사
초창기 자바스크립트는 웹 페이지의 보조적인 기능을 수행하기 위해 한정적인 용도(HTML과 CSS를 단순히 렌더링하는 수준)로 사용되었습니다.
1999년, 자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환활 수 있는 통신 기능인 Ajax(Asynchronous JavaScript and XML)가 XMLHttpRequest이라는 이름으로 등장 했습니다.
이전의 웹 페이지는 서버로부터 완전한 HTML을 전송 받아 웹 페이지 전체를 렌더링하는 방식으로 동작했습니다.
이로 인해 화면 전환이 일어나면 화면이 순간적으로 깜박이는 현상이 발생하기도 했습니다.
Ajax의 등장으로 웹 페이지의 변경이 필요 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만을 전송 받아 변경이 필요한 부분만을 한정적으로 렌더링하는 방식이 가능하게 되었습니다.
2005년, 구글이 발표한 Google Maps가 개발 프로그래밍 언어로서 자바스크립트의 가능성을 확인하는 계기를 마련했습니다.
2006년, jQuery의 등장으로 다소 번거롭고 논란이 있던 DOM(Document Object Model)을 보다 쉽게 제어할 수 있게 되었고 크로스 브라우징 이슈도 어느 정도 해결되었습니다.
이에 넓은 사용자 층을 순식간에 확보하며, jQuery를 선호하는 개발자가 양산되기도 했습니다.
자바스크립트로 웹 애플리케이션을 구축하려는 시도가 늘어나면서 빠르게 동작하는 자바스크립트 엔진이 요구되었스비다.
2008년, 구글의 V8 자바스크립트 엔진은 요구에 부합하는 빠른 성능을 보여주게 됩니다.
이 등장으로 자바스크립트가 웹 애플리케이션 개발 프로그래밍 언어로 정착하게 됩니다.
2009년, 브라우저에서만 동작하던 자바스크립트를 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경인 Node.js의 등장으로 서버 사이드 애플리케이션 개발에서도 사용되는 범용 프로그래밍 언어가 되었습니다.
- 서버 사이드 개발? 서버에서 페이지를 그려 클라이언트(브라우저)로 보내 화면에 표시하는 기법
이로 인해 자바스크립트는 프론트엔드 영역 뿐만 아니라 백엔드 영역까지 아우르는 프로그래밍 언어의 표준으로 자리 잡게 되었습니다.
현재는 크로스 플랫폼을 위한 가장 중요한 언어로 주목받고 있습니다.
- 크로스 플랫폼? 컴퓨터 프로그램, 운영 체제, 컴퓨터 언어, 프로그래밍 언어, 컴퓨터 소프트웨어 등이 여러 종류의 컴퓨터 플랫폼에서 동작할 수 있다는 것을 뜻함
자바스크립트는 웹은 물론 모바일 하이브리드 앱, 서버 사이드(NodeJS), 데스크톱(Electron), 머신러닝(TensorFlow.js), 로보틱스(Johnny-Five) 프로그래밍 언어로서 세계에서 가장 인기있는 프로그래밍 언어가 되었습니다.
웹 애플리케이션은 데스크톱 애플리케이션과 비교해도 손색없는 성능과 사용자 경험을 제공하는 것이 필수가 되었고, 개발 규모와 복잡도도 더불어 상승하게 되면서 프레임워크가 등장하게 되었습니다.
SPA(Single Page Application)가 대중화되면서 Angular, React, Vue.js 등 다양한 SPA 프레임워크/라이브러리 또한 많은 사용층을 확보하게 되었습니다.
JavaScript와 ECMAScript
ECMAScript는 자바스크립트의 표준 명세인 ECMA-262
를 말하며 프로그래밍 언어의 타입, 값, 객체와 프로퍼티, 함수, 빌트인 객체 등 핵심 문법(core syntax)을 규정합니다.
각 브라우저 제조사는 ECMAScript를 준수하여 브라우저에 내장되는 자바스크립트 엔진을 구현합니다.
자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API로 이루어 집니다.
클라이언트 사이드 Web API는 ECMAScript와는 별도로 World Wide Web Consortium (W3C)에서 별도의 명세로 관리하고 있으며, 자세한 내용은 MDN web docs: Web API를 참고하기 바랍니다.
자바스크립트의 특징
HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어 입니다.
개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이기도 합니다.
대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합하여 비교적 처리 속도가 느린 인터프리터의 단점을 해결했습니다.
자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어 입니다.
<용어 정리>
- 명령형? 프로그래밍의 상태, 상태를 변경시키는 구문 관점에서 연산을 설명하는 프로그래밍 패러다임의 일종 → 컴퓨터가 수행할 명령들을 순서대로 써놓은 것
- 함수형? 자료 처리를 수학적 함수의 계산으로 취급하고, 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나
- 프로토타입기반 객체지향 프로그래밍? 객체지향 프로그래밍의 한 형태로 클래스가 없고, 객체를 원형(프로토타입)으로 해서 복제의 과정을 통해 객체의 동작 방식을 다시 사용하는 것
- 멀티 패러다임 프로그래밍? 하나 이상의 프로그래밍 패러다임을 지원하는 프로그래밍 언어
ES6 브라우저 지원 현황
Internet Explorer를 제외한 모던 브라우저의 ES6 지원 비율은 96~ 99%로 거의 100%에 육박합니다.
하지만 Internet Explorer나 구형 브라우저는 ES6를 대부분 지원하지 않습니다.
고려해야 하는 상황이라면 babel과 같은 트랜스파일러를 사용하여 ES6로 구현한 소스코드를 ES5 이하의 버전으로 다운그레이드할 필요가 있습니다.
3. 자바스크립트 개발 환경과 실행 방법
모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있습니다.
뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있습니다.
하지만 브라우저와 Node.js 환경에서 실행할 수 있지만 존재 목적이 다르기에 ECMAScript 이외에 추가적으로 제공하는 기능은 호환되지 않습니다.
웹 브라우저
개발자 도구
크롬 브라우저가 제공하는 개발자 도구는 자바스크립트 개발에 필수적인 강력한 도구입니다.
기본적으로 내장되어 있으므로 별도의 설치가 필요 없으며, 단축키는 다음과 같습니다.
Windows :
F12
orCtrl + Shift + I
macOS :
command + option + I
개발자 도구에서 자주 사용하는 기능은 다음과 같습니다.
Elements
: 로딩된 웹 페이지의 DOM과 CSS를 편집하여 렌더링된 뷰 확인, 편집한 내용 저장되지 않음
Console
: 로딩된 웹 페이지의 에러 확인 or 자바스크립트 소스코드에 포함시킨 console.log 메소드의 결과 확인 가능
Sources
: 로딩된 웹 페이지의 자바스크립트 코드 디버깅
Network
: 로딩된 웹 페이지에 관련한 네트워크 요청(request) 정보와 퍼포먼스 확인
Application
: 웹 스토리지, 세션, 쿠키를 확인 및 관리
콘솔
자바스크립트 코드에서 에러가 발생하여 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴보아야 할 곳 입니다.
콘솔을 열어두지 않으면 에러가 발생했는지 조차 알 수 없는 경우가 있습니다.
에러가 발생한 경우가 아니더라도 구현 단계에서 디버깅을 실행하는 것보다 간편하게 값을 확인하며 개발을 진행하기 위해 console.log
함수를 사용하는 경우가 많습니다.
위의 사진은 HTML에 포함된 자바스크립트를 브라우저에서 실행했는데, 에러가 발생한 경우입니다.
디버깅
Sources에서는 에러가 발생한 위치에 빨간 밑줄이 표시되고 마우스를 올려보면 에러 정보가 표시됩니다.
에러가 발생한 코드 왼쪽의 라인 번호를 클릭하여 브레이크 포인트(중단점)을 걸고 다시 버튼을 클릭하면 아래와 같이 디버깅 모드로 들어가게 됩니다.
콘솔과 디버깅에 대한 보다 자세한 내용은 구글의 Tools for Web Developers: 콘솔 사용과 Tools for Web Developers: Chrome DevTools에서 자바스크립트 디버깅 시작하기를 참고하기 바랍니다.
Node.js
클라이언트 사이드, 즉 웹 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발을 할 수 있습니다.
하지만 규모가 커짐에 따라 React
, jQuery
와 같은 외부 라이브러리를 도입하거나 Babel
, Webpack
, ESlint
등 여러 가지 도구를 사용해야 할 필요가 있습니다.
이때 Node.js와 npm이 필요하게 됩니다.
소개
Node.js는 주로 서버 사이드 애플리케이션 개발에 사용되며 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공합니다.
데이터를 실시간 처리하여 빈번한 I/O가 발생하는 SPA(Single Page Application)에 적합하지만 CPU 사용률이 높은 애플리케이션에는 권장하지 않습니다.
npm(node package manager)은 자바스크립트 패키지 매니저 입니다.
Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공합니다.
설치
Node.js의 웹사이트에 접속할 수 있으며, 2가지 버전을 다운로드 할 수 있습니다.
LTS(Long Term Supported) 버전은 장기적으로 안정된 지원이 보장됩니다.
Current 버전은 최신 기능을 제공하지만 업데이트가 발생하고 있는 버전입니다.
설치를 하게 되면 npm도 동시에 설치됩니다.
정상적으로 설치 되었는지 확인하려면 node -v
, npm -v
터미널(명령 프롬프트)에 입력 시 확인할 수 있습니다.
Node.js REPL
REPL(Read Eval Print Loop)은 Node.js는 물론 대부분의 언어(Java, Python 등)가 제공하는 가상 환경으로 간단한 코드를 직접 실행해 결과를 확인해 볼 수 있습니다.
Node.js REPL에 관한 더 자세한 내용은 Node.js Documentation : REPL을 참고하시기 바랍니다.
비주얼 스튜디오 코드
코드 에디터를 사용하면 코드 자동 완성, 문법 오류 감지, 디버깅, Git 연동 등 강력하고 편리한 기능을 지원합니다.
VS Code 웹사이트에 접속하면 자신의 운영체제에 맞게 설치할 수 있습니다.
내장 터미널
VS Code를 실행한 다음 적당한 위치에 프로젝트 폴더를 생성한 뒤, 자바스크립트 파일을 생성합니다.
내장 터미널을 오픈 하게 되면 파일을 실행할 수 있습니다.
확장 플러그인
확장 플러그인 저장소인 “마켓플레이스”에서 다양한 확장 플러그인을 다운로드하여 설치할 수 있습니다.
Code Runner
, Live Server
를 활용하는 방법은 원본 글을 참고 바랍니다.
4. 브라우저 동작 원리(JavaScript Environment)
대부분의 프로그래밍 언어는 운영체제(Operating System, OS) 위에서 실행되지만 웹 애플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행됩니다.
브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것입니다.
자바스크립트는 자바스크립트 엔진이 처리합니다.
HTML
파서는 <script>
를 만나면 자바스크립트 코드를 실행하기 위해 DOM
생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘깁니다.
제어 권한을 넘겨 받은 자바스크립트 엔진은 <script>
내의 자바스크립트 코드 또는 <script>
의 src
어트리뷰트에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행합니다.
자바스크립트의 실행이 완료되면 다시 HTML
파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM
생성을 재개합니다.
이처럼 브라우저는 동기적으로 처리하며, 이는 <script>
위치에 따라 DOM의 생성이 지연될 수 있다는 것을 의미 합니다.
따라서 body 요소의 가장 아래에 위치시키는데, 이유는 다음과 같습니다.
HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간 단축
DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하면 에러 발생
여기까지 프로그래밍 기본 개념, 자바스크립트란?, 개발 환경, 브라우저 동작 원리에 대해 알아보았습니다.
다음은 자바스크립트의 기본 문법, 데이터 타입과 변수에 대해 알아보겠습니다.