모던 자바스크립트 Deep Dive #1

JY.L·2021년 11월 10일
0
post-thumbnail

학습 목표

  1. 용어 의미 제대로 알기(책에 나온 용어, 단어)
  2. 기본 개념과 동작 원리 제대로 이해하기
  3. 의도적인 연습, 프로젝트 할 수 있는 상태로 거듭나기

1장 프로그래밍

컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션

즉 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업

컴파일러 or 인터프리터
=> 기계가 이해할 수 있는 언어로 변환하는 일종의 번역기

2장 자바스크립트란?

1995년
넷스케이프 커뮤니케이션즈가 웹페이지 보조적인 기능을 위해 개발한 경량 프로그래밍 언어(브레던 아이크)

1996년
모카 => 라이브스크립트 => 자바스크립트 / 최종명명

JScript - 마이크로소프트 개발, 인터넷 익스플로러에 탑재

각자 자사의 시장 점유율을 높이기 위해 자사 브라우저 동자하는 기능을 경재적으로 추가

그로 인해 크로스 브라우징 이슈 발생

1997년
ECMA 인터내셔널 - 자바스크립트 표준화된 ECMAScript 초판 등장

JavaScript
초창기 웹페이지의 보조적인 기능을 수행하기 위한 한정적인 용도로 사용

Ajax
자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
=> 웹페이지에서 변경할 필요한 데이터만 전송받아 부분 한정적 렌더링 방식이 가능해짐

jQuery
DOM(Document Object Model)을 더욱 쉽게 제어가 가능해짐

V8자바스크립트 엔진
웹 애플리케이션을 구축하려는 시도가 늘면서 더욱 빠르게 동작하는 자바스크립트 엔진 등장
=> 과거 웹 서버에서 수행되던 로직들이 대거 브라우저(클라이언트)로 이동

Node.js
라이언 달이 발표한 V8자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
브라우저의 자바스크립트 엔진을 넘어서 그 외 환경에서도 자바스크립트 동작이 가능해짐

SPA 프레임워크
웹 애플리케이션은 데스크톱 애플리케이션과 비교해도 손색없는 성능과 사용자 경험을 제공하는 것이 필수 해짐에 따라 CBD방법론을 기반으로 SPA가 대중화됨

자바스크립트
=> 기본 뼈대인 ECMAScript + 클라이언트 사이드 Web API, DOM, BOM, Canvas, fetch 등
=> 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어

3장 개발 환경

4장 변수

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 or 그 메모리 공간을 식별하기 위해 붙인 이름

변수는 프로그래밍 언어세서 값을 저장하고 참조하는 메커니즘으로 값의 위치를 가리키는 상징적인 이름

또한 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않음

즉 변수는 프로그래밍 언어의 컴파일러 or 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 바뀌어 실행됨

식별자
어떤 값을 구별해서 식별할 수 있는 고유한 이름(ex 사람이름)
식별자는 값이 저장되어 있는 메모리 주소를 기억하고 있음

     answer ---------->  0x0669F913  ----------     30

변수이름(식별자)---------> 메모리 주소 ------------ 메모리

변수를 사용하려면 반드시 선언이 필요 => var, let, const 키워드 사용

변수선언

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

var score; // 변수 선언
undefined 자바스크립트에서 제공하는 원시 타입의 값

변수 선언의 실행 시점과 변수 호이스팅

console.log(score); // undefined
var score; // 변수 선언문

위 코드는 변수 선언문 보다 변수를 참조 코드가 앞에 있지만 에러가 발생하지 않고 undefined가 출력된다 => 변수 선언은 런타임이 아니라 그 이전 단계에서 실행이 먼저 되기 때문임

이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라함

값의 할당

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

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

값의 할당은 소스코드가 순차적으로 실행되는 런타임에 실행됨

var score = 80;
socre = 90; // 값의 재할당

이처럼 할당되어 있는 변수에 새로운 값을 다시 할당 가능

  • 상수 : 변수에 저장된 값을 변경할 수 없음, 즉 재할당 불가

5장 표현식, 문

(value)는 식(expression)이 평가(evaluate)되어 생성된 결과

리터럴
사람이 이해할 수 있는 문자 or 약속된 기호를 사용해 값을 생성하는 표기법

정수, 부동소수점, 2진수, 8진수, 16진수, 문자열, 불리언, null, undefined, 객체, 배열, 함수, 정규 표현식 등이 있음

표현식
값으로 평가될 수 있는 문
ex) var score = 100

//리터럴 표현식
10
'hello'

//식별자 표현식
sum
person.name
arr[1]

//연산자 표현식
10 + 20
sum = 10
sum !== 10

//함수, 메서드 호출 표현식
square()
person.getName()

문(statement)
프로그램을 구성하는 기본 단위이자 최소 실행 단위

토큰(token)
문법적인 의미, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소

ex) var(토큰) sum(토큰) =(토큰) 1(토큰) +(토큰) 2(토큰); => 문(statement)

출처 : 모던 스크립트 Deep Dive 책

0개의 댓글