728x90 반응형 전체 글133 웹 프론트엔드 빌드에서 번들링의 역할과 동작 원리 개요현대의 번들링은 프론트엔드 빌드 과정 중 하나로,소스 코드를 실제 배포 가능한 형태로 변환하는 역할을 한다. 본 문서에서는 번들링의 개념과 빌드 과정에서의 역할을 정리한다. 번들이란 무엇인가?프론트엔드 개발에서 번들(Bundle)이란, 여러 개로 나뉘어 있는 소스 파일과 리소스를 하나 또는 소수의 파일로 묶는 과정과 그 결과물을 의미한다.현대 웹 애플리케이션은 JavaScript 파일뿐만 아니라 CSS, 이미지, 폰트 등 다양한 리소스로 구성된다. 이 파일들을 각각 개별적으로 로드하면 네트워크 요청이 많아져 성능 저하가 발생할 수 있다. 이를 해결하기 위해 번들링 과정을 통해 필요한 리소스를 하나의 묶음으로 생성한다. 1. Bundler하나의 진입점으로 부터 여러 모듈 또는 소스 코드의 파악하여 최적.. 2026. 1. 16. 최신 JavaScript는 왜 깨지지 않을까? 트랜스파일러의 역할 개요최신 웹 표준(ES6+)은 매년 발전하지만, 사용자의 브라우저 환경은 제각각입니다. 개발자의 생산성을 높이면서 서비스의 브라우저 호환성(Cross Browsing)을 완벽하게 해결하기 위해 어떻게 해야할 가요? 이번 문서에서는 Cross Browsing 해결의 핵심 도구, 트랜스파일러에 대해 정리해 보겠습니다. 배경1. 웹 개발의 복잡성점점 기술이 발전하고 하나의 웹 서비스에 수천개의 JS 파일을 사용하게 되면서 중복 함수 및 변수명으로 인한 충돌 문제 발생 가능성을 방지하기 어려워졌다. JavaScript 는 파일마다 독립적인 스코프가 있는것이 아니라, 전역 객체를 공유하는 특징으로 인해 스코프 문제와 의존성 문제가 발생하고, 이를 개선하기 위해 IIFE, Closer 를 사용하였지만, 모듈화를 구.. 2026. 1. 2. webpack 4 -> 5 마이그레이션 webpack 4 -> 5 마이그레이션Webpack 5에는 최소한 Node.js 10.13.0(LTS)이 필요하므로 아직 이전 Node.js를 실행하고 있다면 Node.js를 업그레이드하세요.1. mode의 기본값 설정 변경production, development 2. 오래된 옵션 업데이트optimization 옵션명과 항목 값 변경optimization.hashedModuleIds: true→optimization.moduleIds: 'hashed'optimization.namedChunks: true→optimization.chunkIds: 'named'optimization.namedModules: true→optimization.moduleIds: 'named'optimization.noEmit.. 2025. 12. 23. GitHub Actions로 구축하는 실전 CI/CD 파이프라인 가이드 개요최근 CI/CD 도구로 GitHub Actions를 활용한 프로젝트가 점점 늘어나는 추세입니다. 이 문서는 그 이유를 살펴보고, 현재 많이 사용되는 다른 CI/CD 도구와의 장단점을 비교합니다.이 후, 현재 환경에 GitHub Actions가 적합한 사례가 있다면 워크플로우에 적용해보고자 합니다. CI/CD PopelinesCI (Continuous Integration) : 지속적인 통합CD (Continuous Deployment) : 지속적인 배포 CI/CD 도구 트렌트Stack Overflow Trends (언급량 기반 트렌드 분석) GitHub Actions란?GitHub Actions는 GitHub에서 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD(연속 통합 .. 2025. 12. 8. Git Rebase로 커밋 수정하기 개요Git에서 여러 커밋을 정리하거나 수정, 합치기(squash), 삭제, 재정렬 할때 사용하는 rebase에 대해 정리한 포스팅입니다. 기본 개념git rebase -i 은 지정한 커밋 이후의 커밋들을 편집할 수 있는 기능입니다. 은 기준 커밋으로, 이 커밋 이후 커밋들을 재작성 대상으로 삼습니다. 주요 옵션pick : 커밋 그대로 사용reword : 커밋 메시지 수정edit : 커밋 내용 수정squash : 이전 커밋과 합치기drop : 커밋 삭제 주의 사항이미 원격에 푸시된 커밋을 rebase 후 강제 푸시(--force) 해야 할 수 있음협업 브랜치에서 rebase 사용 시 다른 사람 작업과 충돌 가능중요한 커밋은 삭제 전 반드시 백업해야 합니다. 기본 예시커밋 이후의 모든 커밋이 목록으로 나.. 2025. 12. 1. JavaScript로 웹뷰 키보드 스크롤 문제 해결하기 개요모바일 환경(WebView)에서 웹을 사용할 때, 웹과는 다른 방식으로 UI가 동작하면서 의도치 않은 문제가 발생하는 경우가 많습니다.이번 글에서는 모바일 키보드 등장으로 인한 스크롤 문제의 원인과 실질적인 해결책을 간단히 정리합니다. 스크롤 밀림, 화면 가려짐 현상모바일 환경에서는 키보드, 주소창(UI chrome), 안전영역(safe-area) 등으로 시스템이 자동으로 화면을 밀어 올리기는 경우가 있습니다.예를 들어, 모바일 키보드 등장시 뷰포트는 키보드 변화에 따라 동적으로 재조정이 필요합니다.다양한 뷰포트 변화에 UI가 즉시 대응(재배치)하지 못하는 경우 다음과 같은 현상이 발생할 수 있습니다.input 포커스 시 화면이 위로 밀려 기존 시야가 사라짐키보드가 입력창을 덮어버림 왜 이런 문제가.. 2025. 11. 21. Webpack 번들 성능 확인 가이드 개요웹 애플리케이션이 커질수록 번들 크기, 로딩 속도, 중복 모듈 문제는 성능에 직접적인 영향을 미칩니다. 이번 포스팅에서는 Webpack 번들 성능을 확인하고 분석하는 방법을 단계별로 정리합니다. 성능 체크리스트초기 페이지에 필요한 JS만 로드되는가?청크가 브라우저 캐싱으로 재사용 가능한가?최초 렌더링 성능(FCP/LCP)이 좋아졌는가? 1. Webpack 통계 JSON 생성Webpack은 빌드 시 모듈별 통계가 포함된 JSON 파일을 생성하게 해주는 Stats Data 기능을 지원합니다.이 JSON 파일에는 번들 구조, 모듈별 크기, 청크 구성, 빌드 시간 등의 정보가 포함됩니다.$ npx webpack --config webpack/webpack.config.prod.js --profile --js.. 2025. 11. 14. Webpack 빌드 속도 최적화, 단일 번들 최적화 방법 | noParse 개요noParse 옵션을 활용해 jQuery, Lodash, React 등 대형 라이브러리의 빌드 시간을 줄이고 효율적으로 관리하는 방법을 알아봅니다. Webpack의 JS 파일 처리 흐름웹팩(Webpack)은 JavaScript 파일을 처리할 때 기본적으로 다음 세 단계를 거칩니다.파싱(Parsing)import, require, export, 동적 import() 같은 구문을 읽어 의존성 그래프를 만듭니다.로더(Loader) 변환설정된 로더를 적용해 코드 변환을 수행합니다.(예: TypeScript → JS, SCSS → CSS)번들(Bundle) 생성최종적으로 여러 모듈을 하나 또는 여러 청크로 합쳐 번들링합니다.빌드 시간을 최적화하려면 각 단계의 처리 범위를 줄이거나 건너뛰는 것이 효과적입니다... 2025. 11. 14. form vs fetch — CORS와 비동기 요청의 차이 개요웹 개발에서는 데이터를 서버로 전송할 때 크게 두 가지 방식을 사용합니다.HTML 제출 방식JavaScript 기반 비동기 요청 방식 (fetch, axios 등)두 방식은 CORS 적용 여부, 비동기 처리 가능성, UX 제어 범위에서 명확한 차이가 있습니다.이번 글에서는 HTTP 통신 방식과 CORS 관점에서 이 두 접근법을 정확히 비교합니다. HTTP 통신이란?HTTP 통신이란 클라이언트(브라우저 또는 JS 런타임) 가 서버에 요청(Request)을 보내고, 서버가 응답(Response)을 반환하는 일련의 과정입니다. HTTP 비동기 처리 방식방식설명이벤트 리스너XMLHttpRequest 방식콜백가독성 저하, 콜백 지옥 문제Promise현재 표준 방식async/awaitPromise 기반 문법.. 2025. 6. 26. 이전 1 2 3 4 ··· 15 다음 728x90 반응형
