본문 바로가기

JavaScript

(10)

변수의 호이스팅, TDZ의 개념 바로알기 호이스팅 (Hoisting) 이란 ? JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. -MDN- 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위(실행 컨텍스트)의 최상단에 선언하는 것. 호이스팅의 대상 자바스크립트에서는 모든 선언을 호이스팅한다. 보통 호이스팅은 var 키워드로 선언된 변수에서만 일어난다고 생각하지만 let, const 에서도 호이스팅이 일어난다. 변수의 생성 단계를 알아보면서 이해해보자 변수는 3개의 단계를 거쳐 생성이 된다. 1. 선언단계 자바스크립트에서 변수의 선언은 var, const, let 키워드로 할 수 있으며, ES6에서 const와 let이 추가되었다. 선언단계에서는 ..

자바스크립트가 싱글스레드지만 비동기로 동작하는 이유 우선 글을 시작하기 전에 스레드에 대한 간단한 개념부터 이해하고 가면 좋을 듯하다. 프로세스와 스레드 차이 프로세스는 메모리 상에서 실행중인 프로그램을 말하며, 스레드는 이 프로세스 안에서 실행되는 흐름 단위를 말한다. 프로세스마다 최소 하나의 스레드를 보유하고 있으며, 각각 별도의 주소 공간을 독립적으로 할당받는다. (code, data, heap, stack) 스레드는 이중에 stack만 따로 할당받고 나머지 영역은 스레드끼리 서로 공유한다. 프로세스 : 자신만의 고유 공간과 자원을 할당받아 사용 스레드 : 다른 스레드와 공간과 자원을 공유하면서 사용 즉 스레드는 실행되는 흐름의 단위이며 멀티스레드 환경에서는 이 스레드가 다중적으로 이루어져 있기 때문에 한 번에 많은 일들을 처리할 수 있는 것이다. ..

브라우저 렌더링 원리 ( Critical Rendering Path ) 렌더링이란 웹사이트에 url로 접근했을 때 서버로부터 받은 ( HTML,CSS, 자바스크립트 ) 등의 응답을 화면에 나타내는 것이다 브라우저 엔진 브라우저마다 렌더링을 수행하는 렌더링 엔진을 가지고 있다. 브라우저 엔진 파이어 폭스 게코 엔진 사파리, 크롬 웹킷 엔진 브라우저 렌더링 (Critical Rendering Path) 과정 Critical Rendering Path(CRP)는 브라우저가 서버로부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 과정이다. DOM 트리 만들기 CSSOM 트리 만들기 Render 트리 만들기 레이아웃 생성하기 페인팅 이제 각 단계마다 어떤 역할을 하는지 알아보자 DOM 트리 생성 HTML 문서를 파싱 하여 DOM(Document Object Model) 트리를 ..

JavaScript (ES6) - 서버 통신의 시작 JSON 글을 작성하기에 앞서 이 게시글의 모든 글은 유튜브 드림코딩 by 엘리님의 동영상이 출처임을 알려드립니다. https://www.youtube.com/watch?v=yOdAVDuHUKQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=8 JSON JavaScript Object Notation JSON 이란 웹 브라우저와 웹 서버 간 비동기 통신, 웹 서버 간의 데이터 교환 등에 주로 사용된다 또 브라우저뿐만 아니라 모바일에서 서버와 주고받을 때, 또는 서버와 통신을 하지 않아도 오브젝트를 파일시스템에 저장할 때도 JSON을 이용한다! JSON은 key와 value로 이루어져 있다 오브젝트를 직렬화 ( serialize ) 해서 어떻게 JSON으로 변환할지, 직렬..

JavaScript (ES6) - Array APIs 총정리 - ( 유용한 10가지 배열 함수 ) 글을 작성하기에 앞서 이 게시글의 모든 글은 유튜브 드림코딩 by 엘리님의 동영상이 출처임을 알려드립니다. https://www.youtube.com/watch?v=yOdAVDuHUKQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=8 자바스크립트 배열의 유용한 함수들을 알아보자 ! Join Join은 배열에 존재하는 데이터들을 하나의 문자열로 만들어 주는 API이다 ! 바로 코드로 알아보자 const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(); console.log(result); 우선 fruits 배열 안에 있는 세 개의 데이터를 result 변수에 하나로 만들어 주기 위해 join 을..

JavaScript (ES6) - Prototype 자바스크립트는 기본 타입을 제외한 모든 것을 객체로 분류한다. 즉, number, string, boolean, null, undefined 와 같은 기본 타입을 제외한 모든 값은 객체다. 따라서 배열, 함수, 정규 표현식 등도 모두 자바스크립트 객체로 표현됩니다! 자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. 즉, 객체는 객체지향의 상속 개념과 같이 부모 객체의 프로퍼티를 자신의 프로퍼티로써 사용할 수 있다 객체가 생성이 되면서 자동적으로 가지게 되는 부모 객체를 프로토타입 객체 ( Prototype ) 라고 부른다 예를 통해 살펴보자 Prototype let song = { name: 'song', age: 25, }; let choi = new Object(); choi..

JavaScript (ES6) - Array 개념과 APIs 글을 작성하기에 앞서 이 게시글의 지식은 유튜브 드림코딩 by 엘리님의 동영상이 출처임을 알려드립니다. https://www.youtube.com/watch?v=yOdAVDuHUKQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=8 Declaration 배열을 선언하는 방법에 대해 알아보자 const arr1 = new Array(); 첫 번째로 위와 같이 new를 사용하여 배열 오브젝트를 선언하는 방식이고 두 번째로 더 흔하게 쓰이는 방법이 있다 const arr2 = [1, 2, 3, 4]; 대괄호 안에 데이터를 삽입하여 배열을 생성할 수 있다 배열은 Index를 기준으로 데이터가 저장이 된다 배열의 첫 번째 Index는 0번째부터 시작하기 때문에 1이 삽입된 ..

JavaScript (ES6) - Object 글을 작성하기에 앞서 이 게시글의 지식은 유튜브 드림코딩 by 엘리님의 동영상이 출처임을 알려드립니다. https://www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=7 Object 생성하는 방법 const obj1 = {name: 'song' , age: 25}; 이런 식으로 만들 수도 있다 이 방법을 'object literal' 이라고 하며 const obj2 = new Object(); 클래스를 이용하여 new 키워드로 생성하는 방법도 있다 이 방법을 'object constructor' 이라고 한다. 자바스크립트에서는 클래스가 없어도 괄호 {} 를 사용하여 오브젝트를 생성할 수 있다. 자..

이전 1 2 다음

티스토리툴바