javascript
[JavaScript] innerHTML, innerText, textContent 차이점
innerHTML, innerText, textContent는 노드의 특정 값을 읽어오고 설정할 수 있다는 점에서 비슷합니다. 하지만 각자 차이점이 존재하므로 이 글을 통해 정리하고자 합니다. 예제 다음 예제를 실행하여 각각의 차이점을 알아보겠습니다. 안녕하세요. 테스트 입니다. 숨겨진 글 const test = document.getElementById("test"); console.log(test.innerHTML) console.log(test.innerText) console.log(test.textContent) innerHTML 안녕하세요. 테스트 입니다. 숨겨진 글 innerHTML는 해당 노드 안에 있는 모든 HTML 마크업을 문자열로 반환하거나 직접 변경합니다. innerHTML을 사용하..
[JavaScript] 이벤트 루프 (Event Loop)
JavaScript는 싱글 스레드 언어로써 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 실제 웹을 보면 여러 작업들이 동시에 처리되는 것을 볼 수 있습니다. JavaScript는 어떻게 여러 작업을 처리할 수 있었을까요? 답은 이벤트 루프(Event Loop)에 있습니다. 이 글을 통해 이벤트 루프의 개념과 JavaScript의 비동기 처리 과정을 알아보겠습니다. 이벤트 루프 (Event Loop) JavaScript는 이벤트 루프를 통한 비동기 처리로 동시성(Concurrency)을 지원합니다. 다만 그림을 보면 알듯이 JavaScript 엔진 내부에서 비동기 요청을 처리하지는 않습니다. 엔진은 그저 호출 스택(Call Stack)에 들어오는 요청을 순차적으로 처리하는 역할만 합니다. 비동기 요..
[JavaScript] getElementById와 querySelector 차이점
querySelector와 getElementById 모두 엘리먼트를 반환하는 메서드입니다. 하지만 각각은 사용 방법, 반환 객체, 성능 등에서 차이가 납니다. 이 글을 통해 querySelector와 getElementById를 자세히 비교해보겠습니다. 🎯 getElementById vs querySelector 다음은 id="username"인 input 엘리먼트를 반환하는 예제입니다. // getElemenyById const username = document.getElementById("username"); // querySelector const username = document.querySelector("#userForm #username"); getElementById element = ..
[JavaScript] 실행 컨텍스트 (Execution Context)
실행 컨텍스트는 실행할 코드에 관한 환경 정보들을 모아놓은 객체입니다. 실행 컨텍스트는 scope, hoisting, this, closure 등의 많은 개념을 포함하고 있습니다. 그래서 동적 언어인 JavaScript를 이해하는 핵심 개념이기도 합니다. 이 글을 통해 실행 컨텍스트의 구조 및 동작 방식에 대해 알아보겠습니다. 먼저 실행 컨텍스트가 구성되는 코드들은 다음과 같습니다. 전역 코드 eval 코드 함수 코드 모듈 코드 1. 실행 컨텍스트의 구조 JavaScript 엔진은 실행 컨텍스트의 추상화된 정보들을 물리적 객체 형태로 관리합니다. 1.1 변수 객체 (VO, Variable Object) 변수 객체가 담고 있는 정보들은 다음과 같습니다. 변수 매개변수(parameter)와 인수 정보(arg..
[JavaScript] 자료형 (Data Type)
데이터 타입은 프로그래밍 언어가 사용할 수 있는 데이터의 종류를 의미합니다. 이 글을 통해 먼저 원시 타입의 종류에 대해 알아보고자 합니다. 또 불변성의 관점에서 원시 타입과 참조 타입을 알아볼 예정입니다. 그러면 왜 타입마다의 데이터 전달 방식이 다른 지도 함께 이해될 것입니다. 1. 원시 타입 (Primitive Type) 원시 타입은 immutable합니다. 즉 값이 생성된 후에 그 값을 변경할 수 없습니다. 원시 타입은 값을 복사하여 전달(pass by value)합니다. 각 타입마다 할당받는 메모리 크기가 다릅니다. 이를 통해 한정된 메모리 공간을 효율적으로 사용할 수 있습니다. 그리고 할당 가능한 값의 유효 범위를 한정할 수도 있습니다. 1.1 number C 등 대부분 언어는 다양한 숫자 타..
[JavaScript] 로딩 최적화
프론트엔드 최적화는 로딩 최적화와 렌더링 최적화로 대표될 수 있다. 렌더링 최적화는 이전 글에서 알아봤으니 이번엔 로딩 최적화를 알아보고자 한다. 로딩 최적화는 서비스의 첫인상을 결정한다. 사용자에게 컨텐츠를 더 빨리, 더 쾌적하게 제공할 수 있기 때문이다. 이 글에선 로딩 성능을 나타내는 지표와 로딩 최적화를 하는 방법에 대해 소개하겠다. 로딩 성능을 나타내는 지표 로딩 성능 지표의 측정 기준은 크게 브라우저와 사용자 입장으로 나눌 수 있다. 💻 브라우저 기준의 성능 측정 지표 내비게이션 타이밍 모델 (Navigation Timing Model) 내비게이션 타이밍 모델은 브라우저의 동작 단계별 시간을 측정하는 방식이다. 그림은 브라우저가 렌더링 되는 일련의 과정이다. 프론트엔드의 역할은 마지막의 Pro..
[JavaScript] this
JavaScript에서 this가 바인딩할 객체는 함수가 선언할 때 정적으로 결정되는 것이 아니다. 함수를 호출할 때 함수의 호출 방식에 따라 바인딩할 객체가 동적으로 결정된다. 1. 함수의 this 기본적으로 this는 전역 객체를 바인딩한다. 전역 객체 (Global Object) 전역 객체는 모든 객체의 유일한 최상위 객체를 의미한다. Browser-side → window 객체 Server-side → global 객체 // browser side this === window // true // server side (node.js) this === global // true 내부 함수 내부 함수는 일반 함수, 메서드, 콜백 함수 어디에서 선언되었든 관계없이 this가 전역 객체를 바인딩한다. f..
[JavaScript] Prototype
1. Prototype (프로토타입) JavaScript는 프로토타입 기반 객체지향 프로그래밍 언어이다. JavaScript의 모든 객체는 상속되는 정보가 담긴 프로토타입(prototype) 객체를 가지고 있다. 이를 통해 모든 객체는 자신의 프로토타입으로부터 프로퍼티와 메소드들을 상속받을 수 있다. 덕분에 JavaScript는 클래스 없이 프로토타입만으로 객체를 생성할 수 있다. (ES6에서 클래스 문법 추가) 2. [[Prototype]] vs prototype 프로퍼티 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]] 이라는 내부 슬롯(internal slot)을 갖는다. (내부 슬롯은 은닉 속성 정도로 해석되며, 상속을 위해 사용된다.) 함수도 객체이므로 [[Prototype]] ..
[JavaScript] Spread와 Rest의 차이
ES6에서 도입된 Spread와 Rest 문법은 똑같이 생겼다. 다만 쓰이는 상황에 따라서 둘을 구분하기 때문에 확실하게 정리해보고자 한다. 1. Spread (전개 구문) Spread는 배열, 문자열 등의 Iterable 한 요소들을 개별 요소로 분리할 수 있다. 주로 객체나 배열의 연결, 복사 등의 용도로 유용하게 쓰인다. (참고로 객체는 Iterable이 아니지만 ES9부터 Spread 사용이 가능해졌다.) 1) 배열 결합 기존엔 두 배열을 합치는 데에 concat()를 이용했었다. 하지만 ES6에선 Spread 연산자를 이용하여 좀 더 쉬게 배열을 합칠 수 있다. // ES5 - concat() var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var arr = arr..