study_record

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

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

한 사이트에서 주소가 다른 서버로 요청을 보낼 때 CORS 에러를 한 번쯤은 본 적 있을 것이다. 그렇다면 CORS 에러는 왜 생기며 우리를 괴롭히는(?) 걸까? CORS를 이해하기 전, 먼저 SOP에 대해 알아야 한다.  1. SOP (Same Origin Policy)SOP는 말 그대로 동일 출처 정책, 즉 동일한 출처(Origin) 끼리만 API 등의 데이터 접근이 가능하도록 막는 정책을 말한다.다르게 말하면 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식이다.  출처(Origin)란 어떤 걸 말하는 걸까? URL은 위의 사진과 같이 Protocol, Host, Port, Path, Query-String, Fragment .. 등으로 이루어져있다.이 중 출처는 Protocot, Host, ..