본문 바로가기

JS6

[JS] 데이터 타입(Data type) - 복사, 불변성과 가변성 이번 포스팅의 내용을 잘 이해하기 위해서는 [JS] 메모리와 데이터에 대한 이해가 필요합니다. [JS] 메모리와 데이터 컴퓨터는 우리의 명령(코드)에 따라 데이터를 조작하는 동작을 수행합니다. 이때, 조작의 대상인 데이터와 컴퓨터가 수행해야하는 명령어들은 컴퓨터의 메모리(RAM)에 저장됩니다. 코드에서 명 hangeoreum.tistory.com 자바스크립트에서 데이터에는 타입이 존재하고, 기본형(Primitive type)과 참조형(Reference type)으로 구분 가능합니다. 기본형에는 숫자(Number), BigIng, 문자열(String), 불리언(Boolean), null, undefined, 심볼(Symbol)이 포함됩니다. 참조형에는 객체(Object)가 있고 배열(Array), 함수(F.. 2022. 1. 12.
[JS] 메모리와 데이터 컴퓨터는 우리의 명령(코드)에 따라 데이터를 조작하는 동작을 수행합니다. 이때, 조작의 대상인 데이터와 컴퓨터가 수행해야하는 명령어들은 컴퓨터의 메모리(RAM)에 저장됩니다. 코드에서 명령어와 변수에 선언하는 데이터들이 메모리에 저장되고, CPU 프로세서를 통해 명령어와 데이터를 읽어 동작하게됩니다. 1. 메모리 메모리에는 수많은 비트가 저장되고 각각의 비트는 고유한 식별자(unique identifier)를 통해 위치를 확인할 수 있습니다. 비트는 0이나 1의 두 가지 값만 표현할 수 있기 때문에 비트 단위로 데이터를 처리하는 것은 큰 용량의 데이터를 처리하기에는 매우 비효율적입니다. 비트를 여러 개를 하나의 단위로 관리한다면 하나의 단위로 표현할 수 있는 값의 수도 많아지고 처리 시간도 줄일 수 있어.. 2022. 1. 10.
[JS] Event Delegation(이벤트 위임) 이벤트 위임을 이해하기 위해서는 이벤트 버블링과 캡쳐링에 대한 이해가 필요합니다. 이벤트 버블링과 캡쳐링에 대해 잘 모르시는 분은 아래 글을 참고하시면 될 것 같습니다. [JS] Event Bubbling과 Capturing [JS] Event Bubbling과 Capturing 웹페이지에서 가장 중요한 것 중 하나를 뽑자면 사용자와의 인터렉션을 꼽을 수 있습니다. 인터렉션은 브라우저 이벤트로 구현할 수 있고, 주로 DOM 이벤트를 이용합니다. 이벤트에는 마우스, hangeoreum.tistory.com 1. 이벤트 위임(Event Delegation) 이벤트 위임은 상위 요소에서 하위 요소의 이벤트를 제어하는 방식입니다. Vanilla JS로 웹페이지를 만들다 보면 다음과 같은 동작을 수행하고 싶은 경.. 2022. 1. 6.
[JS] Event Bubbling과 Capturing 웹페이지에서 가장 중요한 것 중 하나를 뽑자면 사용자와의 인터렉션을 꼽을 수 있습니다. 인터렉션은 브라우저 이벤트로 구현할 수 있고, 주로 DOM 이벤트를 이용합니다. 이벤트에는 마우스, 키보드, 폼(form) 관련 기본적인 사용자 인터렉션뿐만 아니라, 네트워크나 리소스 등 렌더링 관련 이벤트까지 다양한 종류가 있습니다. [목차] 1. 이벤트 등록 2. 이벤트 객체 3. 이벤트 흐름(Event Flow) 4. 이벤트 버블링(Event Bubbling) 5. 이벤트 캡처링(Event Capturing) 6. 이벤트 흐름 중단하기 1. 이벤트 등록 1 - 1. addEventListener() 웹페이지에서 이벤트를 구현하기 위해서는 먼저 DOM 요소에 이벤트를 등록해야 합니다. 이렇게 DOM 요소가 이벤트를.. 2022. 1. 6.
[JS] var, let, const와 hoisting ES6가 나오기 전까지 JS에서 변수를 선언하기 위해서는 var를 사용했습니다. var는 다음과 같은 특징을 갖고 있는데, 이 특징들로 예상치 못한 issue가 생기기도 합니다. 함수 레벨 scope(Function-level scope) var 키워드 생략 가능 전역 객체 property 생성 중복 선언 가능 hoisting ES6에서 let과 const가 도입되면서 var을 사용하면서 생기는 문제점들을 보완했습니다. [목차] 1. var 2. let과 const 3. Hoisting 1. var 1 - 1. 함수 레벨 scope 함수 안에서 var을 사용해 변수를 선언하면 그 변수는 선언된 함수 안에서만 사용가능합니다. 함수 밖에서 var을 사용한다면, 선언된 변수는 global scope를 갖습니다.. 2021. 10. 24.
[JS] 실행 컨텍스트(Execution Context) 실행 컨텍스트(Execution Context, EC)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, JS의 동적 언어로서의 성격을 잘 드러내는 개념입니다. 이름에서 유추할 수 있는 것처럼 코드가 실행되기 위해 필요한 환경이라고 생각할 수도 있습니다. 실행 컨텍스트에 대해 잘 이해한다면 scope, hoisting, this, closure 같은 JS의 필수적인 개념들을 이해하는데 도움이 됩니다. [목차] 1. 실행 컨텍스트(Execution Context) 2. 실행 컨텍스트 스택(Execution Context Stack) 3. 실행 컨텍스트의 구성 4. 실행 컨텍스트의 생성 과정 5. Hoisting 1. 실행 컨텍스트(Execution Context) JS 코드를 실행하기 위해서 자바스크.. 2021. 10. 23.

티스토리툴바