본문 바로가기
반응형

javascript 코어 개념35

32. 빌드 도구(Build Tools) - 2 번들링(Bundling)과 트리 쉐이킹(Tree Shaking) 번들링과 트리 쉐이킹은 모두 프론트엔드 개발에서 자바스크립트 코드를 최적화하는 데 중요한 기술입니다. 이 블로그에서는 각각의 개념과 실제 코드 예제를 통해 그 원리와 활용 방법을 알아보겠습니다. 1. 번들링(Bundling) 개념: 번들링은 여러 개의 소스 파일을 하나의 번들로 묶는 과정을 말합니다. 이 과정에서는 여러 모듈 간의 의존성을 해결하고, 코드를 최적화하여 브라우저가 이해할 수 있는 형태로 변환합니다. 코드 예제: // index.js import { add } from './math'; console.log(add(3, 5)); // math.js export function add(a, b) { return a + b; } 번.. 2024. 2. 17.
31. 빌드 도구(Build Tools) - 1 웹팩(Webpack), Parcel, Rollup 등의 빌드 도구 소개 현대의 웹 개발에서는 복잡한 프로젝트 구조와 다양한 종류의 파일들을 효율적으로 관리하고 빌드하는 것이 중요합니다. 이를 위해 웹팩, Parcel, Rollup과 같은 빌드 도구들이 사용됩니다. 이번 글에서는 각각의 빌드 도구에 대해 소개하고, 간단한 예제를 통해 사용법을 살펴보겠습니다. 1. 웹팩(Webpack) 웹팩은 모듈 번들러로, 프로젝트의 자원들을 번들링하여 처리합니다. 주로 JavaScript 파일들을 모아 하나의 번들 파일로 만들어줍니다. 주요 특징: 모듈 번들링 로더(loader)를 통한 자원 변환 코드 스플리팅(Code Splitting) 플러그인(Plugin) 시스템 제공 예제: // webpack.config.js .. 2024. 2. 17.
30. 모듈 시스템(Module System) - 3 동적 임포트(Dynamic Import)의 활용과 효과 동적 임포트(Dynamic Import)는 ECMAScript 2020(ES11)에서 도입된 기능으로, 모듈을 동적으로 로드할 수 있게 해줍니다. 이 기능은 애플리케이션의 성능을 향상시키고 코드를 효율적으로 관리할 수 있는 강력한 도구입니다. 이번 글에서는 동적 임포트의 활용과 효과에 대해 알아보겠습니다. 1. 동적 임포트의 활용 동적 임포트는 특히 다음과 같은 상황에서 유용하게 활용될 수 있습니다. 조건부 모듈 로딩 특정 조건이 충족되었을 때 모듈을 로드해야 하는 경우에 동적 임포트를 사용할 수 있습니다. if (condition) { import('./module') .then(module => { // 모듈 사용 }) .catch(error =.. 2024. 2. 17.
29. 모듈 시스템(Module System) - 2 모듈 로딩과 해석 과정 자바스크립트에서 모듈을 로딩하고 해석하는 과정은 어떻게 이루어질까요? 이번 글에서는 모듈 로딩과 해석 과정을 알아보고 코드 예제를 통해 이해해 보겠습니다. 1. 모듈 로딩 자바스크립트에서 모듈을 로딩하는 과정은 환경에 따라 다를 수 있지만, 주로 브라우저 환경과 Node.js 환경에서 모듈이 로딩됩니다. 브라우저 환경 브라우저에서는 Node.js 환경 Node.js에서는 require() 함수를 사용하여 모듈을 로딩합니다. 모듈의 경로를 인자로 전달하여 로딩합니다. const myModule = require('./module'); 2. 모듈 해석 로딩된 모듈은 해석되어 실행 가능한 코드로 변환됩니다. 이 과정은 모듈 시스템에 따라 다르며, 주로 다음과 같은 단계로 이루어집니다. .. 2024. 2. 17.
반응형

티스토리툴바