프로그램을 만들기 위해 개발자는 소스코드를 작성합니다. 소스코드는 컴파일러 (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은 고유한 값들의 집합을 효과적으로 관리..

* ES 가 뭐에요? ES 는 ECMA Script를 뜻하고, 자바스크립트를 표준화 하기위해 만들어진 규격이다. * lint (린트)는 뭐에요? lint는 소프트웨어 개발에서 코드의 오류, 버그, 스타일 문제 등을 찾아내는 정적 분석 도구 이다. 따라서 lint는 코드 오류 및 스타일 문제를 찾아내는 도구로 일반적인 용어이고, ESLint는 JavaScript에서 사용되는 구체적인 린트 도구 중 하나이다. * ESLint 를 적용하는 순서 1. Node.js 설치: ESLint를 사용하려면 Node.js가 설치되어 있어야 한다. Node.js는 공식 사이트(https://nodejs.org/)에서 다운로드하여 설치할 수 있다. 2. 프로젝트 디렉토리 설정: ESLint를 사용할 프로젝트 디렉토리로 이동한..

* 웹팩 (webpack) 이란? 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들의 의존성을 해결하며 하나의 자바스크립트 코드로 압축 (번들링) 하고 최적화해서 성능 향상과 로딩 시간 단축을 위해 사용되는 라이브러리 이다. * 모듈 (Module) 프로그래밍에서 독립적인 기능을 갖고 있는 작은 코드 조각을 말한다. 모듈은 일반적으로 특정 기능이나 작업을 수행하는 코드의 조각으로, 모듈화를 통해 코드를 세분화해서 유지보수성을 높이고 코드의 재사용성을 높일 수 있다. * 번들러 (Bundler) 모듈 번들링(Module Bundling)을 수행하는 도구로, 여러 개의 모듈 (js파일, css파일, 이미지 등) 을 가져와서 이를 하나 또는 여러 개의 번들로 묶어주는 도구를 의미한다..