| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
- 이벤트
- 모던 자바스크립트 딥 다이브
- 메가바이트스쿨
- 자료구조
- 코딩테스트
- styled-components
- 입문
- 프론트엔드
- react
- 공식문서
- Github
- JavaScript
- 개발 공부
- 개발자취업부트캠프
- 알고리즘
- 모던 딥 다이브 자바스크립트
- useMemo
- 자바스크립트
- next.js
- CSS
- 패스트캠퍼스
- 비전공자
- 국비지원교육
- useRef
- MegabyteSchool
- 프로그래머스
- 리액트
- 내일배움카드
- TypeScript
- GIT
- Today
- Total
개발 기록 남기기✍️
[Deep Dive] 1~3장 본문
이 카테고리는 모던 자바스크립트 Deep Dive 책을 공부하며 글을 정리한 포스팅하는 공간입니다.
1 프로그래밍
1.1 프로그래밍이란?
프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다.
0과 1로 이루어진 바이너리 코드만 아는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 코드로 설명하는 작업이다. 이 때 필요한 것이 컴퓨터의 입장에서 문제를 바라보는 컴퓨팅 사고이다.
예를 들어, 사람은 소리의 크기를 "크다" 또는 "작다"로 표현한다. 하지만 이는 상대적인 개념으로 기준이 불명확하다.
컴퓨터에게는 양적 개념인 숫자를 사용해서 "볼륨을 60으로 조정해라"라고 명령해야 한다.
1.1 프로그래밍 언어
문제 해결 명령을 수행할 주체는 컴퓨터이기 때문에 자연어가 아닌 기계어로 명령을 전달해야 한다. 하지만 사람이 직접 기계어로 명령을 전달하는 것은 어렵기 때문에 약속된 구문으로 구성된 프로그래밍 언어를 사용해 프로그램을 작성한 후, 컴파일러를 통해 기계어로 변환시키기로 약속했다.
프로그래밍 언어는 명령에 사용되는 일종의 표현 수단으로, 사람과 컴퓨터(컴파일러 또는 인터프리터) 모두가 이해할 수 있는 약속된 형태의 인공어다.
프로그래밍 언어는 구문과 의미의 조합으로 표현된다.
1.2 구문과 의미
문법에 맞는 문장을 구성하는 것은 물론이고, 의미를 가지고 있어야 언어의 역할을 충실히 수행할 수 있다.
const number = 'string';
console.log(number * number); // NaN
자바스크립트의 변수에는 어떠한 타입의 값도 할당할 수 있어서 문법적으로 전혀 문제가 없지만 의미적으로는 옳지 않다.
number라는 이름의 변수에 문자열이 할당되어 있기 때문이다.
이런 문제를 방지하고 요구사항이 실현될 수 있도록 적절한 자료구조와 함수의 집합으로 변환한 후 그 흐름을 제어하는 것이 프로그래밍이다.
2. 자바스크립트란?
2.1 자바스크립트의 탄생
1996년 3월, 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 "모카"라는 이름으로 도입한다. (브랜던 아이크) 그해 9월 "라이브스크립트"로 이름이 바뀌었다 12월에 "2자바스크립트"라는 이름으로 최종 명명되었다.
2.2 자바스크립트의 표준화
마이크로소프트에서 자바스크립트의 파생 버전인 "JScript"를 내놓고, 각 회사에서는 브라우저 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 내놓아 크로스 브라우징 이슈가 발생하게 된다.
1997년 7월, 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구 ECMA를 통해 표준화된 ECMAScript 1(ES1)이 완성된다. 원래 용도가 보조적인 기능 수행이였기 때문에 계속해서 버전 업그레이드를 거치면서 지금의 ES6에 이르게 된다.
(하지만 아직 모든 브라우저에 100% 지원하진 않아 ES5를 보편적으로 사용함)
2.3 자바스크립트 성장의 역사
초창기 자바스크립트는 HTML과 CSS를 단순히 렌더링하는 수준이었다.
2.3.1 Ajax
Ajax : 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
Ajax를 통해 웹페이지에서 변경할 필요가 없는 부분은 재렌더링하지 않고, 서버로부터 필요한 데이터만 받고 그 부분만 렌더링하는 방식이 가능해졌다.
2.3.2 jQuery
jQoery : 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리
jQuery를 통해 DOM을 더욱 쉽게 제어할 수 있게 되고 크로스 브라우징 이슈도 어느 정도 해결되었다.
자바스크립트보다 배우기 쉽고 직관적인 것이 장점이다.
2.3.3 V8 자바스크립트 엔진
V8 : 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진
구글의 V8 자바스크립트 엔진을 통해 자바스크립트는 데스크톱 애플리케이션과 유사한 UX를 제공하는 언어가 되었다.
웹 프론트엔드 영역이 주목받는 계기가 되었다.
2.3.4 Node.js
Node.js : 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
브라우저 이외의 환경에서도 자바스크립트가 동작할 수 있도록 한다. Node.js는 서버 사이드 애플리케이션 개발에 주로 사용되며, 이에 필요한 모듈, 파일 시스템, http 등 내장 API를 제공한다.
2.3.5 SPA 프레임워크
SPA(Single Page Apllication) : 단일 페이지 애플리케이션
서버로 부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함
Web Front-end 용 SPA프레임워크에는 Angular JS 나 Angular 2, Vue.js, React 등이 있다.
2.4 자바스크립트와 ECMAScript
각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현한다.
자바스크립트는 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 DOM, BOM, Canvas, fetch, SVG, Web Storage 등을 아우르는 개념이다.
Javascript > ECMAScript
2.5 자바스크립트의 특징
- 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
- 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어
- 인터프리터(소스 코드 즉시 실행)와 컴파일러(빠르게 동작하는 머신 코드 생성)의 장점을 경합해 비교적 처리 속도가 느린 인터프리터의 단점 해결
- 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
- 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어이다.
3장(자바스크립트 개발 환경과 실행 방법)은 이미 설정된 환경이 있기 때문에 스킵하도록 하겠습니다.
'Front-End > 숨참고 Deep Dive🏊♀️' 카테고리의 다른 글
| [Deep Dive] 8장 - 제어문 (0) | 2022.12.23 |
|---|---|
| [Deep Dive] 7장 - 연산자 (0) | 2022.12.22 |
| [Deep Dive] 6장 - 데이터 타입 (0) | 2022.12.21 |
| [Deep Dive] 5장 - 표현식과 문 (0) | 2022.12.20 |
| [Deep Dive] 4장 - 변수 (0) | 2022.12.16 |