01장 프로그래밍
1.1. 프로그래밍이란?
프로그래밍이란? 0과 1만 이해할 수 있는 컴퓨터에게 정확하게 요구사항을 설명하는 것.
이것을 위해 문제 해결 능력이 요구된다.
- 복잡함을 단순하게 분해
- 자료를 정리/구분
- 순서에 맞게 행위를 배열
문제 해결 방안을 고려할 때 컴퓨터의 입장에서 바라봐야 한다. (Computational thinking)🧐
1.2 프로그래밍 언어
기계어로 컴퓨터에게 명령을 전달하려면 프로그래밍 언어를 사용해 프로그램을 작성하고 그것을 컴퓨터가 이해할 수 있는 기계어로 번역해야 하는데 이 번역기를 컴파일러(compiler) 혹은 인터프리터(interpreter)라고 한다.
1.3 구문과 의미
언어는 문법에 맞는 문장을 구성하는 것은 물론 의미(semantics)를 가지고 있어야 한다.
작성된 코드는 해결 방안의 구체적 구현물로, 프로그래밍 언어의 문법에 부합하는 것은 물론이고 문제가 해결되어야 의미가 있다.
결국 프로그래밍은 요구사항의 집합을 분석해 적절한 자료구조와 함수의 집합으로 변환하고 그 흐름을 제어하는 것이다!
02장 자바스크립트란?
2.1 자바스크립트의 탄생
자바스크립트는 웹 페이지의 보조적 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어로 개발된 것이다.
2.2 자바스크립트의 표준화
자바스크립트가 표준화되지 못하고 적당히 호환되었기 때문에 브라우저에 따라서 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생해, 표준화된 자바스크립트의 필요성이 대두되었다.
1997년 ES1(표준화된 자바스크립트 초판)을 시작으로 2015년 ES6에 let/const 클래스, 화살표 함수, 템플릿 리터럴, 스프레드 문법, rest 파라미터, promise, Map/Set 등 프로그래밍 언어로서 갖춰야 할 기능들을 대거 도입하는 큰 변화가 있었다.🤯
2.3 자바스크립트 성장의 역사
초창기 자바스크립트는 주로 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 HTML, CSS를 렌더링만 하는 수준이었다.
2.3.1 Ajax
1999년 자바스크립트를 통해 서버와 브라우저가 비동기 방식으로 데이터를 주고 받을 수 있는 통신 기능인 Ajax(Asynchronous JavaScript and XML)가 XMLHttpRequest☄️라는 이름으로 등장했다.
이전의 웹페이지는 서버로부터 <html></html>로 끝나는 HTML 코드를 받으면 웹페이지 전체를 렌더링하고, 화면이 전환될 때마다 다시 새로운 HTML을 받아 웹페이지 전체를 다시 렌더링했다.
-> 서버로부터 변경할 필요 없는 HTML 코드를 다시 받기 때문에 불필요한 데이터 통신 발생.
Ajax가 등장하면서 서버로부터 필요한 데이터만 받아 변경할 부분만 렌더링하는 방식이 가능해져 웹 브라우저에서도 빠른 성능과 부드러운 화면 전환이 가능해졌다!🙌
2.3.2 jQuery
2006년 자바스크립트보다 배우기 쉽고 직관적인 jQuery가 등장해 DOM을 더욱 쉽게 제어할 수 있게 되었다.
2.3.3. V8 자바스크립트 엔진
자바스크립트로 웹 애플리케이션을 구축하려는 시도가 늘며 자바스크립트 엔진의 필요성이 대두되었고, 2008년 구글의 V8 자바스크립트 엔진이 등장했다.
이로 인해 웹 서버에서 수행되던 로직들이 브라우저로 이동했고 웹 애플리케이션 개발에서 프론트엔드 영역이 주목받는 계기가 되었다.
2.3.4 Node.js
Node.js는 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다. 주로 서버 사이드 애플리케이션 개발에 사용된다.
비동기 I/O를 지원하고 단일 스레드 이벤트 루프 기반으로 동작해 요청 처리 성능이 좋다.
즉 Node.js는 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA(Single Page Application)에 적합하다.
Node.js의 등장으로 자바스크립트는 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 프로그래밍 언어가 되었고, 자바스크립트는 프론트엔드는 물론 백엔드 영역까지 아우르는 웹 프로그래밍 언어의 표준으로 자리잡았다!
2.3.5 SPA 프레임워크
모던 웹 애플리케이션은 데스크탑 애플리케이션과 비교해도 손색없는 사용자 경험을 제공하는 것이 필수가 되었고 이전의 개발 방식으로는 이 복잡해진 개발 과정을 수행하기 어려워졌다. 그래서 많은 패턴과 라이브러리가 생겨났지만, 변경에 유연하며 확장하기 쉬운 애플리케이션 아키텍쳐의 구축을 어렵게 했고 Angular, React, Vue.js, Svelte 등 다양한 SPA 프레임워크가 등장했다.
2.4 자바스크립트와 ECMAScript
ECMAScript는 자바스크립트 표준 사양인 ECMA-262를 말하고, 프로그래밍 언어의 값, 타입, 객체/프로퍼티, 함수 등 핵심 문법을 규정한다.
자바스크립트는 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API인 DOM, XMLHttpRequest, fetch, Web Storage 등을 아우르는 개념이다.
2.5 자바스크립트의 특징
자바스크립트는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이고, 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.
또 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.
03장 자바스크립트 개발 환경과 실행 방법
3.1 자바스크립트 실행 환경
모든 브라우저와 Node.js는 자바스크립트 엔진을 내장하고 있어, 자바스크립트는 브라우저 환경/Node.js 환경에서 실행할 수 있다.
하지만 브라우저와 Node.js는 용도가 다르다.
브라우저는 HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 목적이고, Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 목적이다.
브라우저는 ECMAScript와 DOM, XMLHttpRequest, fetch, Web Storage과 같은 클라이언트 사이드 Web API를 지원하고, Node.js는 클라이언트 사이드 Web API를 지원하지 않고 ECMAScript와 Node.js 고유의 API를 지원한다.
3.2 웹 브라우저
3.2.1 개발자 도구
- Elements - 로딩된 웹페이지의 DOM과 CSS를 편집해 렌더링된 뷰를 확인
- Console - 로딩된 웹페이지의 에러를 확인하거나 소스코드에 작성한 console.log() 결과를 확인
- Source - 로딩된 웹페이지의 코드 디버깅
- Network - 로딩된 웹페이지 관련 네트워크 요청 정보/성능 확인
- Application - 웹 스토리지, 세션, 쿠키 확인/관리
3.2.2 콘솔
에러가 발생했을 때 가장 먼저 살펴보아야 하는 곳
에러가 발생한 경우가 아니더라도 구현 단계에서 디버깅을 실행하는 것보다 console.log 메서드를 사용
3.2.3 브라우저에서 자바스크립트 실행
브라우저는 HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드를 실행한다.
3.2.4 디버깅
에러 정보의 오른쪽에 에러 발생 위치를 나타내는 링크를 클릭하면 Source 패널로 이동한다.
에러 발생 위치에 빨간 밑줄이 표시되고 마우스를 올리면 에러 정보가 표시된다.
3.3 Node.js
브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 있지만, 프로젝트 규모가 커짐에 따라 프레임워크/라이브러리를 도입하거나 Babel, Webpack, ESLint 등의 도구를 사용할 필요가 있는데, 이때 Node.js와 npm이 필요하다.
3.3.2 Node.js 설치
터미널에서 설치되었는지 확인
$ node -v
$ node -v3.3.3 Node.js REPL
Node.js가 제공하는 REPL(Read Eval Print Loop)를 사용하면 간단한 자바스크립트 코드를 실행해 결과를 확인할 수 있다.
터미널에서 명령어 실행
node프롬프트가 >로 변경되면 코드를 실행해볼 수 있다.
자바스크립트 파일을 실행하려면 명령어 뒤에 파일 이름 입력 (확장자 생략 가능)
node index.jsCtrl + C 두 번 입력하면 Node.js REPL 종료
3.4 비주얼 스튜디오 코드
3.4.1 비주얼 스튜디오 코드 설치
코드 에디터를 사용하면 코드 자동 완성, 문법 오류 감지, 디버깅, Git 연동 등 편리한 기능을 사용할 수 있다.
3.4.2 내장 터미널
VS Code에는 터미널이 내장되어 있다.
터미널 열기
Ctrl + `3.4.3 Code Runner 확장 플러그인
Code Runner 확장 플러그인을 사용하면 내장 터미널에서 단축키를 통해 자바스크립트 코드를 비롯한 다양한 프로그래밍 언어로 구현된 소스코드를 간단히 실행할 수 있다.
Code Runner 확장 플러그인에서는 현재 표시 중인 자바스크립트 파일을 실행할 수 있다.
(윈도우) Ctrl + Alt + N
(macOS) control + option + N3.4.4 Live Server 확장 플러그인
소스코드를 수정할 때마다 수정 사항을 브라우저에 자동으로 반영해준다.
