프론트엔드
-
기본자료형/객체 비교하기, 타입 확인하기프론트엔드/JavaScript 2020. 9. 19. 06:29
타입 확인하기와 자료 비교하기 C언어,자바는 코드 작성 중 변수에 데이터를 할당할 때 사용자가 직접 자료형을 지정해야 한다. 반면 자바스크립트의 경우 사용자가 변수에 데이터를 할당할 때 자료형을 따로 지정하지 않는다. 컴파일 과정에서 알아서 코드의 내용에 따라 데이터타입이 지정되는 동적 타이핑에 따른 결과다. 하지만 실제로 코드를 작성하다보면 자료형을 비교하거나 타입을 확인해야할 때가 있다. 그럴 때는 어떻게 해야할까? 타입 확인하기( typeof ) 타입을 확인할 때는 'typeof' 명령어를 써주면 된다. typeof + 변수명 위와 같이 명령어를 써주면 해당 변수가 가진 데이터의 데이터형을 확인할 수 있다. 객체 확인하기 ( instanceof ) 'typeof' 를 사용하면 변수가 가진 데이터의 ..
-
자료, 객체의 복사에 대해서프론트엔드/JavaScript 2020. 9. 19. 06:07
자바스크립트의 복사 자바 스크립트를 이용하다보면 복사를 할 일이 많다. 이때 주의할 것이 자료형에 따라 복사의 형태가 달라진다는 것이다. 우선 기본 자료형인 Number의 복사를 보면 다음과 같다. 그 다음은 String의 복사를 보자. Number, String의 경우 자료를 복사하고 자료가 본사된 변수를 수정해도 원본에 문제가 없다. 어떻게 보면 당연한 것 처럼 보이기도 하다. 하지만 기본 자료형을 제외한 객체는 다르다. 배열 객체의 경우 복사를 시행하고 복사된 배열 객체를 수정했더니 원본이 변했다. 왜 그런것일까? 기본 자료형과 객체의 차이 자바스크립트에선 기본 자료형(primitive)과 객체(object)로 나눠진다. 그럼 이건 무슨 기준으로 나눠진걸까? 간단히 말하면 변수가 저장하고 있는 값의..
-
자바스크립트엔진의 런타임(runtime)프론트엔드/프론트엔드 이론 2020. 9. 18. 12:04
자바스크립트 엔진의 런타임 자바스크립트 엔진은 소스코드를 실행할 때 파싱 후 AST를 생성하고 컴파일러, 인터프리터 방식을 거쳐 기계어를 CPU에 전달하여 소스를 실행한다. 기계어가 CPU에서 실행되면 자바 스크립트 엔진에서 무슨 일이 일어날까? 자바스크립트 엔진 런타임 중 상황 크롬의 V8 엔진 기준으로 자바 스크립트 코드의 런타임 중에는 위와 같은 상황이 벌어진다. 각각의 구조를 설명하면 다음과 같다. 1. Call Stack(스택 메모리, 선입후출, FILO) Call Stack은 코드 내의 함수를 임시로 저장하고 실행하는 역할을 한다. 자바스크립트는 단일 스레드 프로그래밍 언어다. 즉 단일 Call Stack(콜스택)이다. 그래서 Call Stack 내에서는 코드 내 함수를 한 번에 하나씩 실행하..
-
자바스크립트 엔진(JavaScript Engine)프론트엔드/프론트엔드 이론 2020. 9. 18. 05:18
자바스크립트 엔진이란? 자바스크립트엔진이란 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터를 이야기한다. 이때 자바스크립트 엔진은 코드를 표준적인 인터프리터로 구현할 수도 있고 JIT 컴파일( 매번 모든 코드를 해석하는 것이 아니라 자주 쓰는 코드는 미리 저장해뒀다가 나중에 프로그램 실행 시 사용 )로도 구현이 가능하다. V8같은 경우는 엔진 내에서 컴파일, 인터프리터 방식 두 가지를 모두 지원한다. 자바스크립트 엔진들 자바 스크립트를 언어를 해석하는 자바스크립트 엔진은 굉장히 다양한 종류가 있는데, 대체로 브라우저에 탑재되기 때문에 브라우저 제작사마다 각자의 자바 스크립트 엔진을 쓰는 경우가 많다. 1. V8: 오픈 소스로 구글이 개발. 구글 크롬과 안드로이드와 Node.js에서도 사용된다. 2...
-
렌더 트리 (Render Tree)프론트엔드/프론트엔드 이론 2020. 9. 18. 02:20
렌더트리와 그 역할 CSSOM과 DOM 트리는 결합하여 렌더 트리를 만들어낸다. 렌더 트리는 웹 페이지에 나타낼 각 요소들의 위치(Layout, 레이아웃)을 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트(Paint) 즉 화면에 요소들을 표현하는 프로세스를 위해 존재한다. 렌더트리의 생성과 그 후 과정 렌더 트리는 DOM과 CSSOM의 결합으로 만들어진다. 1. DOM 트리의 루트(Document)에서 시작되어 단계별로 노드들을 배치한다. 이때 일부 노드(메타태그, 스크립트 태그) 등은 여기서 제외된다. 또한 CSS를 통해 숨겨지는 노드들도 여기서 제외된다. 2. 표시된 각 노드들에 대해 적절하게 맞는 CSSOM 규칙을 찾아 적용한다. 3. 표시된 노드들를 콘텐츠와 계산된 스타일과 결합하여 내보낸다...
-
CSSOM(CSS Object Model)프론트엔드/프론트엔드 이론 2020. 9. 18. 01:51
CSSOM(CSS Object Model)이란? 웹 사이트를 브라우저상에 표현할 때 서버로부터 받은 정보를 브라우저가 렌더링 엔진을 통해 파싱하는데 이 때 두 가지가 요소를 파싱하는데 하나는 HTML, 또 하나는 CSS다. 이때 HTML을 파싱하여 자료를 구조화 한것을 DOM이라 하고 CSS 내용을 파싱하여 자료를 구조화한 것을 CSSOM이라 한다. 즉 DOM처럼 CSS의 내용을 해석하고 노드를 만들어 트리 구조로 만든 것을 CSSOM이라 한다. CSSOM은 왜 트리구조일까? 잘 생각해보면 CSS는 트리 구조일 필요는 없다. DOM의 경우 태그 별로 상하위가 이미 존재하고 문서 구조화를 통해 다양한 작업을 수월하게 할 수 있다. 하지만 스타일은 위아래가 없는데 트리 구조라는게 이상하다. 이는 CSS는 하..
-
DOM(Document Object Model)프론트엔드/프론트엔드 이론 2020. 9. 18. 01:36
DOM이란? 문서 객체 모델 DOM은 Document Object Model의 약자로 HTML, XML 문서의 프로그래밍 interface다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍언어(흔히 자바스크립트)가 DOM 구조에 접근할 수 있는 방법을 제공한다. 렌더링 엔진이 텍스트 파일로 이뤄진 문서를 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 사용하는 구조 모델을 DOM이라 한다. DOM트리란? 브라우저가 웹서버로부터 받은 정보는 복잡하게 섞여있다. 렌더링 엔진은 이것을 브라우저가 쉽게 이해하기 위해 정리한다. 그 과정에서 모든 요소, 요소의 어트리뷰터(속성), 텍스트를 각각의 개체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이..
-
브라우저 엔진프론트엔드/프론트엔드 이론 2020. 9. 18. 00:55
브라우저 엔진이란? 웹 브라우저의 핵심이 되는 구성 요소다. 브라우저 엔진은 간단히 말하면 주로 HTML, CSS 등 웹 페이지 구성을 위한 자료를 해석하여 사용자의 장치에 맞게 시각적인 표현으로 변환하는 역할을 한다. 레이아웃 엔진? 렌더링 엔진? 브라우저 엔진은 레이아웃 엔진, 렌더링 엔진이라고도 불린다. 렌더딩과 레이아웃은 별도 엔진의 의해 관리될 수 있으나 실제로 이 둘은 서로 밀접히 연결되있고 브라우저 엔진과 같이 묶어서 이야기하는 경우가 많다. 렌더링이란? 사용자가 요청한 컨텐츠를 표시하는 역할을 한다. 예를 들어 HTML을 요청하면 HTML, CSS를 파싱하여 화면에 표시하는 역할을 한다. 브라우저 엔진 작동 방법 브라우저 엔진의 종류에 따라 다소 다르지만 대체로 아래와 같은 방법으로 동작한..