이시안 개발 블로그

오늘은 DOM에 대해 공부했습니다. DOM의 생성 Document Object Model의 약자로HTML 문서를 파싱한 결과를 말합니다. 브라우저의 요청에 의해 응답된 HTML 문서는 파싱되어 브라우저가 해석할 수 있게 됩니다. 위와 같이 HTML 문서가 파싱되면 각각의 노드들을 트리 자료구조로 구성하게 됩니다. 이 트리 구조를 DOM이라고 합니다. DOM을 생성하는 과정에서 CSS를 로드하는 태그를 만나게 되면 CSSOM을 생성하게 되고 script 태그를 만나면 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘기게 됩니다. 이때 자바스크립트 엔진이 코드를 해석하고 실행하게 되며 DOM API를 조작하는 코드가 있다면 DOM, CSSOM이 변경되고 다시 렌더링하는 과정을 거치게 됩니다..

오늘은 IIFE와 모듈에 대해 정리해보겠습니다. IIFE (즉시 실행 함수) (function () { // 코드 } )() 위와 같은 형태를 취하는 것이 IIFE인데요. 저는 봤을 때 자바의 익명 객체와 비슷한 건가라고 생각했습니다. 자바의 익명 객체는 재사용성이 없는 객체를 1회용으로 쓰기 위해 사용되는 데, 자바스크립트의 IIFE도 그런 면으로 보면 비슷한 것 같습니다. // 기명 즉시 실행 함수 (function foo() { // code ... }()); // 익명 즉시 실행 함수 (function () { // code ... }()); 자바스크립트의 IIFE는 이름을 가질 수도 있고, 이름 없는 함수로도 정의해서 사용할 수 있습니다. 소괄호 내부에 함수를 작성해야 하며 함수 블록을 닫는 중..

오늘은 표현식 (Expression)과 문장 (Statement)에 대해서 정리해보겠습니다. 표현식 (Expression) 단순하게 식이라고도 하며 값을 만들어내는 문장입니다. // 리터럴 100; 'Hello World' // 식별자 foo arr[1] obj.name // 연산자 표현식 1 + 11; bar !== foo // 함수 sum() obj.getName() 위의 예제는 모두 표현식입니다. 모두 값을 생성하거나, 값으로 평가될 수 있다는 공통점을 가지고 있습니다. 표현식은 리터럴, 식별자, 연산자, 함수 호출 등 수많은 방법으로 만들 수 있으며 값으로 평가될 수 있다는 특징이 있습니다. 또한 값으로 평가될 수 있으므로 표현식을 다른 표현식에서 사용할 수도 있습니다. 문장 (Statement)..

자바스크립트는 var, let, const로 변수를 선언할 수 있습니다. var와 let, const는 스코프가 다르게 동작하며 변수와 함수 모두 관련이 있는 매우 중요한 요소입니다. 오늘은 스코프에 대해 정리해보겠습니다. 스코프 var a = 'global'; function foo(){ var a = 'inner'; console.log(a); // 'inner' } console.log(a); // 'global' 스코프는 유효 범위로 모든 식별자(변수, 함수, 클래스 등)가 선언된 위치에 따라 다른 코드가 참조할 수 있는 지 결정됩니다. 외부에서 선언한 변수 a와 함수 내부에서 선언한 변수 a는 식별자 이름은 같지만 엄연히 다른 스코프를 가지고 있습니다. 이 경우 자바스크립트 엔진이 코드를 실행할..

자바스크립트의 모든 값은 타입이 있고 타입은 변환될 수 있습니다. 이것을 타입 변환또는 형변환(Type Conversion)이라고 하며 형변환에 대해서 알아보겠습니다. 타입 변환 타입 변환은 명시적 타입 변환, 암묵적 타입 변환으로 나눌 수 있습니다. 이때 타입 변환이 일어나도 기존 원시 값이 직접 변경되는 것은 아닙니다. 이전에도 알아봤듯이 자바스크립트의 기본 데이터 타입은 변경 불가능한 값이므로 타입 변환은 기존 원시 값으로 다른 타입의 새로운 원시 값을 생성한다고 이해하면 되겠습니다. 명시적 타입 변환 명시적 타입 변환은 개발자의 의도에 의한 타입 변환을 말합니다. let x = 10; let str = String(x); console.log(str); // 문자열 10 console.log(x)..

자바스크립트의 값을 비교할 때 주로 ==, ===, typeof 이 3가지를 사용합니다. 3가지 방법의 차이를 알아보겠습니다. 동등 연산자 ==, != console.log(1 == 1); // true console.log(1 == '1'); // true console.log(1 == true); // true console.log(0 != '0'); // false console.log(undefined != null); // false 동등 연산자는 두 피연산자를 비교하여 boolean 값을 반환합니다. 이 때 타입이 서로 다른 피연산자도 비교한다는 특징이 있습니다. 두 피연산자가 모두 객체라면 같은 객체를 참조할 때 true null 과 undefined 를 서로 비교할 때 true 타입이 다른..

오늘은 자바스크립트 호출 스택(Call Stack)과 이벤트 루프(Event Loop)에 공부해보겠습니다. Call Stack 자바스크립트는 단일 스레드 기반의 언어입니다. 단일 스레드이므로 호출 스택(Call Stack)이 하나만 존재하고 이것은 한 번에 하나의 작업만 처리할 수 있다는 것을 뜻합니다. 스택은 LIFO(후입선출) 구조이며 위에서부터 차곡차곡 쌓이는 형태의 자료구조입니다. 자바스크립트는 현재 어떤 함수가 동작하고 또 다음 호출될 함수는 무엇인지 호출 스택을 통해 제어합니다. 스크립트가 함수를 호출하면 인터프리터가 호출 스택에 추가한 다음 함수를 수행 해당 함수에 의해 호출된 함수는 호출 스택에 추가되고 호출이 도달하는 위치에서 실행 함수가 끝나면 인터프리터는 스택을 제거하고 메인 코드 목..

자바스크립트는 두 가지의 데이터 타입이 있으며 원시 타입은 값으로 전달되며, 그 외의 객체는 참조로 전달되는 형태입니다. 오늘은 두 타입의 차이를 공부해보겠습니다. Value let a = 10; let b = a; // b = 10 a = 20; console.log(b); // 10 자바스크립트의 원시 타입은 불변성을 가지고 있으며 교체할 수는 있지만 변경할 수 없습니다. 위 예제를 보면 a는 10이라는 값을 초기화했고 b는 a로 초기화를 했습니다. a는 10이기 때문에 b 또한 10을 가지게 됩니다. 그리고 a를 20으로 재할당해도 b의 값은 바뀌지 않습니다. b는 a의 값을 복사했기 때문입니다. 이것을 값에 의한 전달이라고 합니다. 값에 의한 전달은 원시 타입에서 일어나게 되며 값을 그대로 복사하..