프론트엔드/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] JavaScript 엔진 구조 (Call Stack, Memory Heap)
JavaScript 엔진은 Call Stack과 Memory Heap으로 구성되어 있습니다. 각각은 Stack, Heap 자료구조와 관련된 특징들을 보이고 있습니다. 그래서 저장하는 데이터나 동작하는 방식 등에서 차이가 나타납니다. 먼저 이 글을 통해 JavaScript의 엔진 구조에 대해 알아보겠습니다. 궁극적으로는 JavaScript의 Event Loop 방식을 이해하는 것을 목표로 합니다. JavaScript 엔진 구조 JavaScript 엔진은 Call Stack과 Memory Heap으로 구성되어 있습니다. 대표적인 JavaScript 엔진의 예시로 구글의 V8 엔진이 있습니다. 또한 JavaScript는 한 번에 하나의 작업만 처리하는 싱글 스레드 언어입니다. 이는 하나의 Call Stack을..
[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] 렌더링 최적화 (Reflow와 Repaint)
렌더링을 최적화하는 여러 방법 중 하나는 Reflow와 Repaint 과정을 줄이는 것이다. 먼저 Reflow와 Repaint에 대해 알아본 뒤, 다양한 최적화 방법을 소개하겠다. 📐 Reflow html 요소의 크기나 위치가 변하면 그에 영향을 받는 노드들의 크기와 위치를 다시 계산하게 된다. 이렇게 요소의 변화에 따라 Layout 과정을 다시 수행하는 것을 Reflow라고 한다. Reflow가 발생하는 사례 페이지 초기 렌더링 (최초 Layout 과정) 윈도우 리사이징 (Viewport 크기 변경) DOM 노드 추가, 제거 DOM 노드 위치, 크기 변경 폰트 변경, 텍스트 내용 변경 이미지 크기 변경 애니메이션, 트랜지션 Reflow가 발생하는 속성 position width height left t..
[JavaScript] 브라우저 렌더링
렌더링이란 HTML, CSS, JavaScript 등을 브라우저에서 그래픽 형태로 출력하는 과정을 말한다. 렌더링을 알아두면 어떻게 좋은 성능을 낼지, 최적화를 할지를 판단할 수 있다. 이번 글을 통해선 렌더링 방식을 이해하고 최적화에 대해선 따로 자세히 다루겠다. 🔨 렌더링 엔진 대부분의 브라우저는 렌더링을 해주는 렌더링 엔진(Rendering Engine)을 가지고 있다. 다만 모든 브라우저가 같은 렌더링 엔진을 사용하지는 않는다. IE : Trident Edge : EdgeHTML, Blink Chrome : Webkit, Blink(웹킷을 Fork 하여 자체 구현) Safari : Webkit FireFox : Gecko 각각의 렌더링 엔진들은 웹 표준을 따르며 브라우저를 렌더링 한다. 하지만 렌..