티스토리 뷰

javascript

javascript - 1장 1

타올이 2022. 3. 20. 23:06
반응형

프로그래밍이란?

컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다.
요구되는 것은 문제해결 능력이다. 문제해결 능력과 알고리즘은 다르다.

그러기 위해서는 문제의 본질을 파악하고 이를 단순하게 분해하여 구분해야한다.
이를 토대로 컴퓨터에게 정확하고 상세하게 요구사항을 설명하는 작업이며, 그 작업물이 코드이다.
그러기 위해 컴퓨터의 입장에서 문제를 바라보아야 하며 이때 필요한것이 Computational thinking(컴퓨터 사고)이다.

컴퓨터와 사람의 차이점
즉 컴퓨터와 사람은 어떤 행위, 단어에 대한 인지의 방식이 다르다.
예를 들어 사람에게는 노래소리를좀 줄여줘 라고 하게되면 그 사람만의 기준을 통해 줄이거나
또는 줄인다음 확인을 할 것이다. "이정도면 괜찮아?"
그러나 컴퓨터의 경우에는 노래소리를 줄여달라는 부탁을 받게되면 얼마나 어떻게 줄여달라는 것인지
이해하지 못하기 때문에 수많은 에러를 발생시킬 것이다.

컴퓨터에게 명령을 전달하기위한 언어
기계어는 컴퓨터가 이해할 수 있는 언어, 즉 사람이 이해하는 자연어랑은 다르다.
사람이 기계어를 보고 이해하기는 굉장히 어렵다. 비트단위로 기술되어 있기도하다.

그렇기 때문에 컴퓨터에게 명령을 할때는 사람이 이해할 수 있는 약속된 구문(문법)으로 구성된
프로그래밍 언어를 사용해 프로그램을 작성한 후 이를 기계어로 변환하는 작업을 진행해주는
컴파일러, 혹은 인터프리터를 통해 변환 후 전달해야 한다.
※ 컴파일러는 개발자의 언어와 컴퓨터의 언어를 모두 이해하는 번역가

 프로그래밍언어란?

컴퓨터와의 대화(명령)에 사용되는 일종의 표현수단으로,
사람과 컴퓨터(컴파일러 또는 인터프리터) 모두가 이해할 수 있는 약속된 형태의 인공어이다.

구문과 의미

언어의 의미는 문맥에 있는 것이지 문법에 있는것이 아니다. - 노엄 촘스키 -
결국 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후,
그 흐름을 제어하는 것이다.
※ 컴퓨터에서 원시 언어의 문장을 올바르게 구성하기 위한 규칙(자연어 문법)
 

자바스크립트의 탄생(왜 ES5, ES6 라고 하는가?)


1995년 웹브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션은 보조적인 기능을 수행하기 위해
자바스크립트를 개발하게 된다.
뒤이어 우리가 아는 마이크로소프트에서 JScript를 개발하게 되고 서로 각자의 브라우저에서 이를 호환하도록
하였다. 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생한다.
이를 해결하기 위해서 넷스케이프측에서는 ECMA인터내셔널에 자바스크립트의 표준화를 요청했고
이를 받아들여 상표권의 문제로 자바스크립트는 ECMAScript로 불리게 된다.
즉 이로 인해서 ES5, ES6문법 등으로 우리가 부르게 된 것이다. (궁금증 해결)

자바스크립트 성장의 역사

초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 사용되었다.
대부분의 로직은 웹 서버에서 실행되었고, 브라우저는 서버로부터 받은 HTML과 CSS를 단순히 렌더링하는 수준이었다.
초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 사용되었다.
※ 렌더링? HTML, CSS, JavaScript로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것

Ajax

자바스크립트를 이용하여 서버와 브라우저가 비동기(asynchronous)방식으로 데이터를 교환할 수 있는 통신기능이
XMLHttpRequest라는 이름으로 등장한다.
이전의 웹페이지는 html태그 -> html태그로 끝나는 완전한 HTML코드를 서버로부터 전송받아 페이지 전체를 렌더링하는 방식으로 동작했다.
즉 화면이 전환되면 서버로부터 모든 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링 해야했다.
Ajax의 등장으로 인해 전체 HTML을 렌더링하지 않고 변경이 필요한 부분만 렌더링할 수 있게 되었다.
ex) 2005년 구글이 발표한 구글 맵스

V8 자바스크립트 엔진

구글 맵스를 통해 자바스크립트에 대한 기대감은 높아졌고 성능 업그레이드를 위해
더 빠르게 동작하는 엔진이 필요했다. 이 때 등장한 것이 구글의 V8 자바스크립트 엔진이다.
이 엔진을 통해 대부분을 서버에서 담당하던 SSR에서 브라우저에서 로직을 담당하는 CSR으로
넘어올 수 있는 계기가 되었고 이때부터 프론트엔드 영역이 주목받게 된다.

Node.js

2009년, 라이언 달이 발표한 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.
이때부터 JavsScript는 브라우저안에서 뿐만 아니라 밖에서도 동작할 수 있게 된다.
또한 이를 통해 JavaScript를 통해서 프론트와 백엔드 영역 모두에서 자바스크립트를 통해 작업할 수 있게된다.
주로 SSR에 사용되며 , 이에 필요한 모듈, 파일 시스템, HTTP등을 빌트인 API를 제공한다.

 Node.js는 비동기 I / O를 지원하며 단일 스레트 이벤트 루프를 기반으로 동작한다.
그로인해 SPA(Single Page Application) 적합하고 CPU 사용률이 높은 애플리케이션에는 권장하지 않는다.
※ Node.js는 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행환경  

SPA 기반 프레임워크/라이브러리

CBD 개발 방법론을 기반으로 하는 SPA가 대중화 되면서 Angular, React, Vue.js, Svelte등 다양한 SPA 프레임워크/라이브러리가 각광받기 시장했다.

자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준사양인 ECMA-262를 말한다.
각 브라우저에서는 ECMAScript 사양을 준수하여 각자 내장되는 JavaScript 엔진을 구현한다.
자바스크립트란 일반적으로 프래그래밍언어이고 기본 뼈대를 이루는 ECMAScript와 브라우저가 지원하는 클라이언트 사이드 Web API, 즉 DOM, BOM, Canvas, XMLHttprequest, fetch, SVG 등을 모두 포합하는 개념이다.
※ JavaScript는 일반적으로 ECMAScript 를 아우르는 개념

자바스크립트의 특징

자바스크립트는 웹브라우저 상에서 동작하는 유일한 프로그래밍 언어이다.
자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.
그러나 각각의 브라우저의 엔진들은 인터프리터와 컴파일러의 장점들을 결합시켜서 비교적 속도가 느린 인터프리터의 단점을 보완했다.
인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신코드를 생성하고 최적화 한다.
이를 통해서 추가적으로 시간이 필요함에도 더욱 빠르게 코드를 실행할 수 있다.
자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.
또한 강력한 객체지향 프로그래밍 능력을 지니고 있다.

인터넷 익스플로러를 제외한 대부분의 브라우저들은 ES6를 지원하고 있다.

그러나 그렇지 못한 상황이라면 바벨과 같은 트랜스파일러를 사용해 ES6를 ES5 이하로 다운그레이드 할 필요가 있다.

 

자바스크립트 실행 환경

브라우저는 HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링이 주목적,

node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주목적  -----> DOM API를 제공하지 않음

DOM API

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

 

node.js

2009년, 라이언 달이 발표한 크롬 V8자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다

 

npm

자바스크립트 패키지 매니저이다

 

식별자(변수 이름)

식별자는 어떤 값을 구별해서 식별할 수 잇는 고유한 이름을 말한다.

식별자는 값이 아니라 메모리 주소를 기억하고 있다.

 

 

반응형
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/09   »
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
29 30
링크
글 보관함