공부 기록

Webpack은 웹 애플리케이션 개발에서 자주 사용하는 모듈 번들러(module bundler)이다.자바스크립트, CSS, 이미지 등 다양한 파일을 의존성 그래프(dependency graph)로 관리하고 이를 하나 또는 여러 개의 번들(bundle) 파일로 묶어준다.이 과정을 통해 애플리케이션의 성능을 최적화하고, 배포를 쉽게 만들어주는 역할을 한다.쉽게 말해 주방의 요리사로 비유할 수 있다. 모듈 번들러에 대해 잘 모른다면? [Web] 모듈 번들러, 한 페이지로 끝내기모듈 번들러(Module Bundler)란?여러 개의 파일(모듈)을 하나의 파일(또는 몇 개의 파일)로 묶어주는 도구이다. 이를 통해 웹 애플리케이션을 실행하기 위해 필요한 모든 파일을 효율적으로 관리하mi-dairy.tistory.co..

모듈 번들러(Module Bundler)란?여러 개의 파일(모듈)을 하나의 파일(또는 몇 개의 파일)로 묶어주는 도구이다. 이를 통해 웹 애플리케이션을 실행하기 위해 필요한 모든 파일을 효율적으로 관리하고 브라우저에서 실행 가능한 형태로 제공할 수 있으며 개발자는 복잡한 코드를 관리하고 성능 최적화된 웹 애플리케이션을 쉽게 배포할 수 있다.대표적인 모듈 번들러로는 Webpack, Parcel, Vite, Rollup 등이 있다. 비유를 하자면 웹 애플리케이션은 복잡한 재료(코드, 이미지, CSS)를 가진 요리와 같고 모듈 번들러는 요리를 만들기 위해 재료를 준비하고 최적화된 형태로 포장하는 주방 관리자로 비유할 수 있다.  1. 필요한 이유현대의 웹 애플리케이션은 규모가 커지고 복잡해지면서 여러 개의 ..

브라우저가 특정 보안 정책을 따르기 때문에 웹 페이지가 자신과 다른 출처에서 자원을 요청하려고 할 때 이를 허용하거나 차단할 수 있는 설정이 필요하다. CORS는 이런 상황에서 중요한 역할을 한다. 1. CORS (Cross-Origin Resource Sharing)정의웹 개발에서 다른 도메인(출처)간의 자원 공유를 제어하기 위한 보안 메커니즘, 마치 경비실에서 출입증 검사를 받는 것과 유사하다.동일 출처 정책의 제한을 풀기 위해 서버 측에서 제공하는 옵션동일 출처 정책(Same-Origin Policy) : 브라우저가 기본적으로 보안상의 이유로 브라우저는 기본적으로 다른 출처(도메인, 프로토콜, 포트 번호가 다름)에서 리소스를 요청을 차단하는 정책브라우저에 내장된 기본적인 보안 체계로 동작해 이를 바..