자바스크립트 개발자라면 반드시 이해해야 할 핵심 개념 중 하나가 바로 '실행 컨텍스트(Execution Context)' 입니다.이 글에서는 실행 컨텍스트의 개념부터 세부 구성 요소까지 상세히 살펴보겠습니다. 1. 실행 컨텍스트란?실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 추상화한 개념입니다.기본적으로 소스코드를 평가하여 실행 컨텍스트를 생성하는데요.코드의 실행 순서와 스코프를 관리하며, 변수, 객체, 함수 등의 식별자 결정을 담당합니다.쉽게 말해서 소스코드를 실행하는데 필요한 환경을 제공하고 실행결과를 관리하는 영역입니다. 스코프와 코드실행 순서를 관리하는 매커니즘으로 모든 코드는 실행컨텍스트를 통해 실행되고 관리됩니다.실행컨텍스트의 렉시컬 환경이 스코프를 관리하며실행컨텍스트의 스택이 실행순서..

이 글에서는 React Virtual DOM과 Reconciliation이 내부적으로 어떻게 작동하는지에 대해 알아보도록 하겠습니다. Virtual DOM에 대해 말하기 전에 브라우저 렌더링 프로세스와 DOM에 대한 이해가 필요합니다. 브라우저 렌더링 프로세스는 해당 아티클을 읽어보고 오시면 되겠습니다. https://oreeyo00.tistory.com/7 Rendering (렌더링) 이란? ** 이 글에서는 렌더링 엔진이 작동하는 방식과 사용자 화면에 웹 페이지를 표시하는 방법을 알아볼거다. * 먼저 설명하는 데에 쓰일 용어들의 의미를 알아보도록 하자. 파싱 (parsing) 이란? 컴퓨 oreeyo00.tistory.com Virtual DOM DOM을 JavaScript 객체로 표현한 것입니다. ..

프로그램을 만들기 위해 개발자는 소스코드를 작성합니다. 소스코드는 컴파일러 (Compiler) 에 의해 기계어코드로 변환되어 실행이 가능한 프로그램이 되는데, 이 단계를 컴파일 타임(Compile Time) 이라고 부릅니다. 즉, 컴파일 타임 은 소스코드가 컴파일 과정을 거쳐서 컴퓨터가 인식할 수 있는 기계어 (바이트 코드)로 변환되어 실행할 수 있는 프로그램이 되는 과정을 의미합니다. 컴파일(compile)은 추상화 단계가 다른 고수준에서 저수준 언어로 변환되는 과정을 가리키는데요. 하지만 타입스크립트는 고수준 언어가 저수준 언어로 변환되는 것이 아니라, 고수준 언어 (타입스크립트) => 고수준 언어(자바스크립트) 로 변환되는 것이기 때문에, 트랜스파일(transpile) 이라고 부르기도 합니다. < ..

any 와 unknown은 값의 유형이 무엇인지 확실하지 않을 때, 사용되는 이스케이프 방법인 반면에 never는 모든 데이터 유형이 부족하고 값이 남지 않을 때 사용됩니다. Any any 타입은 타입 체크를 회피할 수 있는 타입으로, 어떤 종류의 값도 할당할 수 있습니다. 타입스크립트의 타입 시스템에서 any는 "어떤 것이든 될 수 있음"을 의미하며, 컴파일러에게 해당 변수에 대한 타입 체크를 수행하지 말라고 지시합니다. any 타입으로 지정된 변수에는 무엇이든 할당 할 수 있습니다. 단점 :정의되지 않은 메서드를 호출할 수도 있으며, Typescript 에서는 오류가 발생하지 않습니다. Unknown unknown 타입은 타입스크립트 3.0에서 소개되었으며, any 타입보다 타입 안전성을 강화한 타입..

IP (Internet Protocol) IP란 Internet Protocol 의 약자이다. 그러면 IP (인터넷 프로토콜)의 역할은 뭐일까? 지정한 IP 주소 (ip address) 에 데이터 전달 패킷 (packet) 이라는 통신 단위로 데이터 전달 IP 패킷 이란? => 인터넷 프로토콜(IP)을 통해 데이터를 전송할 때 사용되는 데이터 단위 이다. 패킷에는 주로 두 부분이 포함돼있다. 헤더(header) 데이터(payload) 헤더에는 패킷을 올바르게 전송하고, 조립하며, 처리하기 위해 필요한 제어 정보가 담겨져있고, 데이터에는 실제로 전송하려는 사용자 데이터 (예: 이메일 메시지, 웹 페이지 등)가 포함돼있다. 그렇다면 IP 헤더의 콘텐츠로는 뭐가 있을까? 버전 (IPv4 인지? IPv6인지?)..

이번 글에서는 enum 대신에 union type을 써야한다는 내용에 대해 써보겠습니다. 얻어갈 수 있는 내용🎯 - enum 타입의 컴파일 과정과 런타임에 미치는 영향 - Tree-shaking - 굳이 enum 타입을 쓰는 방법 - enum 타입 말고 union type을 써야하는 이유 타입스크립트에서 정적 타입 자체는 런타임에 직접적인 영향을 주지 않습니다.🙅‍♂️ 타입스크립트에서 타입 정보는 컴파일 타임에만 사용되고, 컴파일된 JavaScript 코드에서는 제거되는데요 이는 타입스크립트의 타입 시스템이 런타임에 존재하지 않는다는 것을 의미합니다. 즉, 런타임에는 모든 타입이 사라지고, 순수한 JavaScript 코드만 남게 된다는거죠. 그런데 말입니다. enum과 같은 특정 타입스크립트 구문은 런타..

이번 글에서는 webpack 로더의 종류인 file-loader 와 url-loader에 대해서 알아보도록 하겠습니다. 👨‍💻 얻어갈 수 있는 내용 file-loader 와 url-loader는 어디서, 어떻게 사용되는걸까? file-loader 와 url-loader의 차이는 무엇이며, 둘 중에 뭐를 사용해야될까? Webpack 로더 웹팩은 JavaScript 모듈 번들러로 시작했지만, 시간이 지나면서 CSS, 이미지, 폰트 등과 같은 다양한 타입의 리소스들을 처리할 필요성이 커졌는데요. 로더 (loaders) 라는 옵션을 사용하게되면 Webpack이 다른 포멧의 파일을 처리하고, 이를 애플리케이션에서 사용할 수 있는 모듈로 변환 할 수 있게됩니다. // webpack.config.js module.e..

JavaScript의 Set 객체는 고유한 값들의 집합을 저장하는 데 사용되며, 중복된 값을 허용하지 않는다. 이러한 Set 객체는 다양한 상황에서 유용하게 활용될 수 있는데 한눈에 보기 쉽도록 Set 객체에 대해 자세히 알아보겠다. 목차 1. Set 객체 소개 2. Set 객체 생성 3. Set 메서드 4. Set 반복(iteration) 5. Set과 배열/객체 비교 6. Set을 활용한 유용한 예시 7. Set의 성능과 주의할 점 8. Set의 브라우저 호환성 1. Set 객체 소개 Set이란? Set 객체는 JavaScript에서 고유한 값들의 집합을 저장하는 자료 구조이다. 중복된 값을 허용하지 않으며, 값들의 삽입 순서를 유지해준다. 이렇기 때문에 Set은 고유한 값들의 집합을 효과적으로 관리..