나는 Javascript, Typescript, React 프레임워크를 이용해 프론트엔드 개발을 진행한다. 웹 프론트엔드를 개발하면서, 자바스크립트라는 언어에 대한 깊이있는 이해가 효율적인 코드 작성에 도움이 될 것 같아 모던 자바스크립트 Deep Dive를 읽고 자바스크립트와 자바스크립트 개발 환경에 대해 이해하는 시간을 틈틈히 가져보려 한다. 해당 블로그는 1장부터 3장까지 읽고 정리한 글이다.
1. 프로그래밍
프로그래밍이란?
- 프로그래밍 = 기계에게 정확하고 상세하게 요구사항을 설명하는 작업
- 프로그래밍의 결과물 = 코드
- 따라서 프로그래밍 이전 먼저 요구사항을 정의하고, 적절한 문제 해결 방안을 설계한 후 코드를 짜는 것이 중요
- 이때 필요한 것 → 컴퓨팅 사고
- 컴퓨터의 관점에서 문제를 사고하는 것으로 해결 과제를 작은 단위로 분해하고 패턴화해서 추출하며, 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야 함
프로그래밍 언어
- 컴퓨터가 명령을 수행하기 위해서는 사람이 이해할 수 있는 자연어가 아니라 컴퓨터가 이해할 수 있는 기계어로 명령을 전달해야 함
- 프로세스
- 사람: 프로그래밍 언어를 사용해 프로그램 작성
- 컴파일러, 인터프리터: 기계어로 변환
- 프로그래밍 언어는 구문(syntax)과 의미(semantics)의 조합으로 표현됨
구문과 의미
- 문제 해결 능력을 통해 만들어낸 문제 해결 방안은 프로그래밍 언어의 문법을 사용해 표현
- 작성된 코드
- 해결방안의 구체적 구현물
- 프로그래밍 언어의 문법에 부합해야 하며 요구사항이 실현되어야 의미가 있음
💡 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것
2. 자바스크립트란?
자바스크립트의 탄생
- 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하고자 개발된 언어
자바스크립트의 표준화
- JavaScript와 파생 버전인 JScript가 있었으나, 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈 발생
- 자바스크립트의 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성 대두
- 이후 1997년부터 표준화된 자바스크립트가 공개되고 있음
자바스크립트 성장의 역사
- 초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용됨
- 대부분의 로직은 주로 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준
- rendering: HTML, CSS, 자바스크립트로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것
- Ajax(Asynchronous JavaScript and XML)
- 1999년 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 XMLHttpRequest라는 이름으로 등장
- 기존 한계: 웹페이지는 완전한 HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작
- 화면이 전환되면 새로운 HTML을 전송받아 처음부터 다시 렌더링
- 변경할 필요가 없는 부분까지 다시 전송받기 때문에 불필요한 데이터 통신 발생
- 도입 이후: 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 렌더링하는 방식이 가능해짐 → 빠른 성능과 부드러운 화면 전환이 가능해짐
- jQuery
- DOM을 더욱 쉽게 제어할 수 있게 되었고, 크로스 브라우징 이슈 해결
- V8 자바스크립트 엔진
- 과거 웹 서버에서 수행되던 로직들이 클라이언트(브라우저)로 이동했고, 웹 애플리케이션 개발에서 프론트엔드 영역이 주목받는 계기가 됨
- Node.js
- V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
- 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트를 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경
- 서버 사이드 애플리케이션 개발에 주로 사용되며, 이에 필요한 모듈, 파일 시스템, HTTP 등 built-in API를 제공
- 비동기 I/O를 지원하며, 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋음
- SPA 프레임워크
- CBD 방법론 기반
- Angular, React, Vue.js, Svelte
Javascript와 ECMAScript
- ECMAScript = 자바스크립트의 표준 사양을 뜻하며, 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정
- 각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현
- JavaScript는 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API, 즉 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등을 아우리는 개념
자바스크립트의 특징
- 자바스크립트는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
- 컴파일 언어 VS 인터프리터 언어
컴파일러 언어 인터프리터 언어 코드가 실행되기 전 컴파일 타임에 소스코드 전체를 한번에 머신 코드로 변환한 후 실행 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간 코드인 바이트코드로 변환한 후 실행 실행 파일을 생성 실행 파일을 생성하지 않음 컴파일 단계와 실행 단계가 분리되어 있음 → 코드 실행 속도가 빠름 인터프리트 단계와 실행 단계가 분리되어 있지 않음. → 반복 수행되므로 코드 실행 속도가 비교적 느림 실행에 앞서 컴파일은 단 한번 수행 코드가 실행될 때마다 인터프리트 과정이 반복 수행됨 - 자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다
- 대부분의 모던 브라우저에서 사용되는 인터프리터는 컴파일러 언어처럼 명시적인 단계를 거치지는 않지만, 복잡한 과정을 거쳐 일부 소스코드를 컴파일하고 실행함
- 인터프리터 언어의 장점인 동적 기능 지원을 살리면서 실행 속도가 느리다는 단점 극복
- 자바스크립트는 런타임에 컴파일되며, 실행 파일이 생성되지 않고 인터프리터 도움 없이 실행될 수 없음!! → 따라서 절대 컴파일러 언어라고 볼 수 없음
- 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
3.자바스크립트 개발 환경과 실행 방법
자바스크립트 실행 환경
- 모든 브라우저와 Node.js는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있음
- 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있는데, 두 용도가 다름
- 브라우저: HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주 목적
- 클라이언트 사이드 Web API 지원
- 파일 시스템 지원하지 않음 (Web API를 이용해 사용자가 지정한 파일을 읽어 들이는 것은 가능)
- Node.js: 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주 목적
- 클라이언트 사이드 Web API를 지원하지 않고 고유의 API 지원
- 파일을 생성하고 수정할 수 있는 파일 시스템 기본 제공
브라우저에서 자바스크립트 실행
- 브라우저는 HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드를 실행함
Node.js
- 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
- 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있도록 함
npm
- 자바스크립트 패키지 매니저
- Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공
소통하는 개발자가 꿈입니다!