[모던 자바스크립트 Deep Dive] 01-04 톺아보기

개요

이 글은 자바스크립트라는 말이 들리면 자꾸 겁 먹게 되는 이유로 인해 [모던 자바스크립트 딥 다이브] 책을 가지고 공부하면서 정리한 글이다. 모든 내용이 정리되어 있는 것이 아니라 어? Ajax 가 이거였군아 하는 내용들만 간단하게 정리하고자 한다. 즉, 자주 들리는데 뭔지 정확하게는 잘 모르는 내용들이 주를 이룬다. 그리고! 일종의 오답노트이다. 한 번 몰랐던 자바스크립트 두 번 모르면 안 되니깐

• 초창기 자바스크립트 : 대부분의 로직은 주로 웹서버에서 실행되었고, 브라우저는 서버로부터 전달받는 HTML 과 CSS 를 렌더링하는 수준이었음

아니 이것도 모르냐고...

Ajax

• 서버와 브라우저가 비동기 (Asynchronous) 방식으로 데이터를 교환할 수 있는 통신 기능이다.
• 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이다.
• 웹 브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환이 가능해졌다.
  • 이전에는 모든 HTML 코드를 서버로부터 다시 전송 받아 불필요한 데이터 통신과 전체 렌더링으로 인한 성능 문제, 화면전환으로 인한 깜빡임 등의 한계가 있었다.

JQuery

• 손쉬운 DOM (Document Object Model) 제어가 가능하다.
• 크로스 브라우징 이슈를 상당 수준 해결했다.

V8 자바스크립트 엔진

• 데스크톱 애플리케이션과 유사한 사용자 경험 (UX) 을 제공한다.
• 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트 (브라우저) 로 옮겨졌다.

Node.js

• 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 이다.
• 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다.
• 서버 사이드 애플리케이션 개발에 주로 사용하며, 이에 필요한 모듈, 파일 시스템, HTTP 등 내장 API 를 제공한다.
• 프론트엔드와 백엔드 영역에서 자바스크립트를 사용할 수 있다는 동형성 (Isomorphic) 으로 학습 코스트를 감소시킬 수 있다.
• 비동기 I/O 를 지원하고, 단일 스레드 (Single Thread) 이벤트 루프 기반으로 동작해 요청 (Request) 처리 성능이 좋다.

자바스크립트와 ECMAScript

• EMCAScript는 자바스크립트의 표준 사양인 ECMA-262를 말하며, 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체(Standar Built-in Obejct) 등 핵심 문법 규정되어 있다.
• 자바스크립트는 EMCAScript와 클라이언트 사이드 Web API(DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, WEb Storage, Web Component, Web Worker 등)를 포함하는 개념이다.
• 클라이언트 사이드 Web API는 월드 와이드 웹 콘소시엄(World Wide Web Consortium; W3C)에서 별도의 사양으로 관리하고 있다.

자바스크립트의 특징

• 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.
• 명령형(Imperative), 함수형(Functional), 프로토타입 기반(Prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.

브라우저 환경과 Node.js 의 차이점

• 브라우저
  • HTML, CSS, JavaScript 를 실행하여 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적
  • 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합인 DOM API 제공
  • 파일 시스템은 제공하지 않음 (Web API - FileReader 객체 사용하는 방법 사용 필요)
  • 클라이언트 사이드 web API 제공
    • ex. ECMAScript, DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component …
• Node.js
  • 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적
  • DOM API 제공 X
  • 파일 시스템 (파일 생성 및 수정) 기본 제공
  • 클라이언트 사이드 web API 제공 X
  • ECMAScript와 Node.js 고유의 API 제공

웹 브라우저

• 개발자 도구
  • Elements : 로딩된 웹페이지의 DOM과 CSS를 편집해 렌더링된 뷰 확인 가능
  • Console : 로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 메서드의 실행 결과 확인 가능
  • Sources : 로딩된 웹페이지의 자바스크립트 코드 디버깅 가능
  • Network : 로딩된 웹페이지에 관련된 네트워크 요청(request) 정보 및 성능 확인 가능
  • Application : 웹 스토리지, 세션, 쿠키 확인 및 관리 가능
• 콘솔
• 브라우저에서 자바스크립트 실행
• 디버깅

메모리 (memory)

• 메모리는 데이터를 저장할 수 있는 메모리 셀 (memory cell) 의 집합체
• 메모리 셀 하나의 크기는 1 바이트 (8비트)
• 1 바이트 단위로 데이터를 저장(write) 하거나 읽어(read)들인다.
• 모든 데이터는 2진수로 저장된다.
• 메모리 주소는 각 셀이 고유하게 가지고 있는 메모리 공간의 위치 값이다. 메모리 크기 범위의 정수값이다.
  • ex) 4GB 메모리는 0x00000000 ~ 0xFFFFFFFF의 주소를 갖는다.

변수의 필요성

1. 자바스크립트는 개발자의 직접적 메모리 제어를 허용하지 않는다. 직접적인 메모리 제어시 의도치 않은 수정으로 치명적인 문제가 발생할 수 있기 때문이다.
2. 값이 저장될 메모리의 주소는 코드가 실행될 때 메모리의 상황에 따라 임의로 결정되기 때문에 사전에 메모리 주소를 알 수 없다.

따라서 프로그래밍 언어는 값을 메모리에 저장하고 저장된 값을 읽어 들여 재사용하기 위해 변수라는 매커니즘을 제공한다.

 

변수 할당과 참조

• 할당 (assignment) : 변수에 값을 저장하는 것
• 참조 (reference) : 변수의 값을 읽어오는 것

식별자

• 식별자 (identifier) 는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.
• 변수, 함수, 클래스 등의 이름은 모두 식별자이다.
• 식별자는 값이 아니라, 값이 저장된 메모리 주소를 기억한다.
• 식별자는 선언 (declaration) 에 의해 자바스크립트 엔진에 존재를 알린다.

변수 선언

• var, let, const 키워드를 사용한다.
  • 키워드는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어이다.
• 구체적으로 변수 선언은 메모리 공간을 확보 (allocate) 하고, 메모리 공간의 주소를 변수 이름에 연결 (name binding) 하는 것이다.

자바스크립트 변수 선언 단계

1. 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보 (allocate) 하고 암묵적으로 undefined 를 할당해 초기화한다.

선언하지 않은 식별자에 접근하면 ReferenceError (참조 에러) 가 발생한다. 참조 에러는 자바스크립트 엔진이 참조하려는 식별자를 찾을 수 없을 때 발생한다.

 

호이스팅 (variable hohisting)

• 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다.

1. 자바스크립트 엔진은 코드를 순차적으로 실행하기 전 소스코드의 평가 과정을 거치며 실행 준비를 한다.
2. 평가 과정에서 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다.
3. 평가 과정이 끝나면 모든 선언문을 제외하고 소스코드를 순차적으로 실행한다.

console.log(score); // undefined
var score;

따라서 위와 같이 선언문 전 참조문을 사용하더라도 선언문이 호이스팅되어 먼저 실행되므로 ReferenceError (참조 에러) 가 발생하지 않고 초기값 undefined 가 출력된다.

 

값의 할당

• 변수에 값을 저장하는 할당 (assignment) 은 할당 연산자 = 를 사용한다.

var score; //변수 선언
score = 80; // 변수 할당
var score = 80; //변수 선언과 값의 할당

• 변수 선언과 할당은 위와 같이 하나의 문 (statement) 으로 단축 표현할 수도 있다.
• 하지만 단축하여 사용해도 선언부 는 런타임 이전에 호이스팅되고, 변수 할당은 런타임에 분리되어 실행된다.

값의 재할당

• 이미 값이 할당되어 있는 변수에 새로운 값을 다시 할당하는 것이다.
• 기존 메모리 공간의 값을 지우고 새 값을 저장하는 것이 아니라, 새로운 메모리 공간을 확보하여 저장한다.
• var 키워드로 선언한 변수는 선언과 동시에 undefined 로 초기화되기 때문에 처음으로 값을 할당하는 것도 재할당이다.
  • ES6 에서 도입한 const 키워드를 사용하면 해당 변수는 재할당이 금지되어 상수를 표현할 수 있다.
• 식별자와 연결이 끊어진 기존 값은 가비지 콜렉터 (garbage collector) 에 의해 자동으로 해지되며 해지 시점은 예측할 수 없다.
  • 가비지 콜렉터 (garbage collector) 가 자동으로 메모리 해지를 수행하는 언어를 매니지드 언어 (managed language), 개발자가 명시적으로 해지하는 언어를 언매니지드 언어 (unmanaged language) 라고 한다.

네이밍 규칙 (naming rule)

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어 (_), 달러 기호 ($) 를 포함할 수 있다.
• 단, 특수문자를 제외한 문자, 숫자, 언더스코어 (_), 달러 기호 ($) 로 시작해야한다.
• 숫자로 시작하는 것은 허용하지 않는다.
• 예약어는 식별자로 사용할 수 없다.
• 자바스크립트는 대소문자를 구별하므로 firstname 과 firstName 을 다른 변수로 취급한다.

네이밍 컨벤션 (naming convention)

• 네이밍 컨벤션은 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성을 높이기 위한 명명 규칙이다.
• 일반적으로 변수나 함수명은 카멜케이스를, 생성자 함수, 클래스의 이름에는 파스칼 케이스를 사용한다.

// 카멜 케이스(camelCase)
var firstName;
// 스네이크 케이스(snake_case)
var first_name;
// 파스칼 케이스(PascalCase)
var FirstName;
// 헝가리언 케이스(typeHungarianCase)
var strFirstName; // type + identifier

 

 

정리

모각코 시간에 프론트 스터디로 자바스크립트 공부를 해야겠당,., 하고 시작하게 되었다

오늘 안에 10 장 까지 끝내려고 했는데 생각보다 양이 엄~~~청나게 많다

개강한지 2 주도 안 된 것 같은데 지금 나 제법 세상에서 제일 정신 없어요

이번 주 안에 10 장 범위까지 공부하기가 목표이자 필수이다 쩝

그리고 대학교 3 학년 헛된 건 아닌 점 : 그래도 아는 말이 쫌 된다 히히 굳

예전에 공부할 땐 같은 책인데 하나도 몰랐는데 기분이 좋다 나 성장했음

 

[참고 문헌]

Data type & Variable | PoiemaWeb