1. 자바스크립트의 타입
- 프로그래밍 언어는 값을 특정 유형으로 분류하는데 특정 유형을 다른 말로 하면 자료형이나 타입(type)이라 부릅니다.
- 모든 프로그래밍 언어는 내장 자료형이 있지만 내장 자료형은 언어마다 다릅니다.
- JavaScript 는 느슨한 타입(loosely typed)언어, 혹은 동적(dynamic) 언어입니다.
=> 변수의 타입을 미리 선언할 필요가 없다는 뜻으로 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이고 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻입니다.
- 자바스크립트의 타입 종류
- 원시 타입(Primitive Data Type, 기본 타입)
- 값이 변수에 할당될 때 메모리 상에 고정된 크기로 저장합니다.
- 원시 타입의 값은 병경 불가능한 값, 불변 값(Immutabel Value)을 받습니다.
- 원시 타입의 데이터 타입으론 숫자형(Number), 불린형(Boolean), 문자형(String), 심볼형(Symbol), null, undefined 가 있습니다.
- ⅰ) 숫자형(Number)
- 숫자를 표현하는 자료형
- 프로그래밍 언어는 숫자 안에서도 정수, 실수 등 여러 종류로 구분하지만, 자바스크립트는 그 종류들을 숫자형 하나로 포괄함
- 숫자끼리 연산이 가능
- ⅱ) 문자형(String)
- 작은따옴표 ' ' 나 큰따옴표 " " 를 양 끝에 두고, 그 안에 한 글자 이상의 문자, 기호, 숫자가 있는 자료형
- ⅲ) 불린형(Boolean)
- 참(true), 거짓(false) 두 가지 값을 가지는 타입
- ⅳ) 심볼형(Symbol)
- ES6(ECMAScript 6)부터 추가된 원시 자료형
- 다른 원시 자료형과 다르게 유일하게 변경이 불가능한 자료형
- 참조형의 키(key)로도 사용이 가능
- 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용
// Symbol은 Symbol() 함수로 생성, Symbol() 함수는 호출될 때마다 Symbol 값을 생성
// 생성된 Symbol은 객체가 아니라 변경 불가능한 원시 타입의 값
let mySymbol = Symbol()
console.log(mysymbol) // Symbol()
console.log(typeof mySymbol) // Symbol
// Symbol() 함수는 String, Number, Boolean과 같이 래퍼 객체를 생성하는 생성자 함수와는 달리 new 연산자를 사용하지 않음
new Symbol() // TypeError: Symbol is not a constructor
-
-
-
- ⅴ) null, undefined
- null 은 빈 값, undefined 는 존재하지 않은 값을 의미
- 참조 타입(REference Data Type)
- 변수에 고정된 크기를 저장하지 않고, 값의 메모리 주소를 참조합니다.
- 참조 타입의 데이터 타입으로 객체(Object)가 있습니다.
- 객체는 속성들(Properties)의 집합을 의미하고 집합 내부에는 순서도 크기도 고정되어 있지 않습니다.
- 고정되지 않은 값을 변수에 할당하려면 해당 값을 저장할 수 없으나 참조하는 것은 가능합니다.
=> 참조 타입은 값의 메모리 주소를 변수에 할당하여 값을 참조합니다.
- 메모리 주소를 통해 값을 참조한다는 의미는 "주소"라는 의미 그대로 해석하면 됩니다.
- 변수의 값을 불러오면 저장되어 있는 메모리 주소를 찾아서 값을 가져옵니다.
- 객체(Object)
- {} 안에 키: 값 의 형태로 이루어진 속성들의 모음
- 키는 반드시 문자(String) 자료형이어야 하고 이 속성 키를 통해 해당 속성에 매핑된 값에 접근할 수 있음
- 객체의 종류
- ⅰ) Global Object 객체
- ⅱ) 표준 내장 객체
- Global Object를 부모 삼아 함수(Function), 배열(Array), 원시 자료형을 감싼 새로운 형태의 객체(String, Number, Boolean)와 특수 연산에 특화된 내장 객체(Math, JSON, RegEx) 그리고 Iterable과 Collection 특성의 객체(Map, Set, WeakMap, WeakSet)등이 있음
const num = 7 // 숫자형(Number)
const S = "Seven" // 문자형(String)
const isTrue = true // 불린형(Boolean)
const empty = null // null
let noting // undefined
const sy = Symbol("me") // Symbol
const item = { // 객체(Object)
price: 10000,
count: 7
}
const color = ["SkyBlue", "Pink", "Black", "Aquamarine", "gold", "DarkGreen", "Violet"] // 배열(Array)
const addColor = function(color){ // 함수(Function)
color.push(color)
}
addColor("red")
console.log(color) // ["SkyBlue", "Pink", "Black", "Aquamarine", "gold", "DarkGreen", "Violet", "red"]
2. 프로토타입
- JavaScript 는 기존의 객체를 복사하여(cloning) 새로운 객체를 생성하는 프로토타입 기반 언어라고 불립니다.
- JavaScript 는 객체지향 언어이지만 다른 프로그래밍 언어(Java, Python, Ruby 등)랑 다르게 JavaScript 는 클래스(Class)라는 개념이 없는 대신 프로토타입(Prototype)이라는 것이 존재합니다.
=> JavaScript 가 프로토타입 기반 언어라고 불리는 이유
- 클래스(Class)가 없으니 기본적으로 상속 기능이 없지만 보통 프로토타입을 기반으로 상속을 흉내 내도록 구현해 사용합니다. 최근의 ES6(ECMAScript 6)에서는 Class 문법이 추가되었지만 JavaScript가 클래스 기반으로 바뀌었다는 것은 아닙니다.
- 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냅니다. 생성된 객체 역시 또 다른 객체의 원형이 될 수 있습니다.
=> 프로토타입은 객체를 확장하고 객체지향적인 프로그래밍을 할 수 있게 해 줍니다.
프로토타입이란 자신을 만든 부모 격인 객체와 연결된 링크이며, 중복적으로 메모리에 올라가는 함수를 부모의 프로토타입 영역에 넣어서 메모리의 효율을 높일 수 있습니다.
3. 브라우저의 렌더링 과정
- ⅰ) 브라우저 주소창에 주소를 입력하면 해당 페이지의 서버를 찾아갑니다.
- ⅱ) DNS(실제 서버가 어디에 있는지 알고 있는 서버)가 연결해줄 곳을 찾습니다.
=> 만약에 주소 앞에 http 가 붙어있으면 http방식으로 통신하겠다는 의미입니다.
- ⅲ) 서버의 기본 설정이 대부분 index.html로 되어 있어 서버에서 이 파일을 클라이언트로 전송합니다.
- ⅳ) 브라우저는 텍스트로 이루어진 index.html 파일을 파싱 합니다.
- ⅴ) index.html 한줄한줄 읽으면서 DOM 트리를 만들어나갑니다.
- ⅵ) 중간에 link태그를 만나 CSS 요청이 발생한다면 요청과 응답 과정을 거치고 CSS를 파싱 합니다.
- ⅶ) CSS 파싱이 끝나면 중단된 html을 다시 읽고 DOM트리를 완성합니다.
- ⅷ) 완성된 DOM트리와 CSSOM트리를 합쳐 RenderTree를 만들고 그립니다.
- ⅸ) 중간에 HTML파서는 Script 태그를 만나게 되면 JavaScript 코드를 실행하기 위해 파싱을 중단합니다.
- ⅹ) 제어권한을 자바스크립트 엔진에게 넘기고 자바스크립트 코드 또는 파일을 로드해서 파싱 하고 실행합니다.
*
- 파싱
어떤 페이지(문서, html 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것을 말함
먼저 파서는 컴파일의 일부로서 원시 프로그램의 명령문이나 온라인 명령문, HTML 문서 등에서 Markup Tag 등을 입력으로 받아들여 구문을 해석할 수 있는 단위와 여러 부분으로 분할해주는 역할을 함
이러한 파서(parser) 역할을 하는 컴퓨터가 구문 트리(parse tree)로 재구성하는 구문 분석 과정을 뜻함
- DOM 트리(DOM tree)
브라우저가 HTML 문서를 로드한 후 파싱 하여 생성하는 모델을 의미
객체의 트리로 구조화되어 있기 때문에 DOM tree라 부름. DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의
객체이며 Document 객체의 자식임
- CSSOM(CSS Object Model)
브라우저에서 DOM을 만들게 되면 우리가 정의한 CSS를 병합해서 CSSOM 이라는 트리를 다시 만들게 됨
브라우저가 html 파일을 DOM으로 만들었다면 html 파일 안에 있는 스타일 즉, 임베디드 된 스타일이나, CSS 파일에
정의한 style 요소들을 비롯해서 이런 스타일이 따로 지정되어 있지 않아도 브라우저 상에서 기본적으로 가지고 있는
스타일에 대한 모든 정보들을 합쳐서 CSSDOM 이라는 트리를 만들게 됨 CSSDOM에는 우리가 정의한 스타일뿐
아니라 브라우저에서 기본적으로 설정된 모든 속성 값들이 cascading rule 에 의해 정의되어 있는데 이것을
computed styles라고 함
- Render Tree
DOM과 CSSOM은 독립적인 개체, 하나는 콘텐츠를 다른 하나는 문서의 스타일 규칙을 설명
브라우저가 이 두 가지를 병합하여 화면에 픽셀을 렌더링 하기 위한 마지막 단계
DOM과 CSSOM을 합한 후 최종적으로 브라우저에 표기될 것들만 렌더 트리에 선별되어 생성이 됨, 표시되는 각
요소의 레이아웃을 계산하는 데 사용되고 픽셀을 화면에 렌더링 하는 페인트 프로세스에 대한 입력으로 처리가 되고
최적의 렌더링 성능을 얻기 위해 이러한 단계를 이해하고 각각을 최적화하는 것이 중요함