# 웹팩
[S4U3]번들링과 웹팩
1. 번들링 1-1. 번들링이란? 번들링은 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미한다. 그럼 프론트엔드 개발자 입장에서의 번들은 무엇일까? 바로 "사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음"을 의미한다. 사용자가 브라우저를
Section4 - Unit 3 [React] 번들링과 웹팩
: FE에서는 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음이란 의미로 파일간의 의존관계를 해석해 그룹화해 다양한 문제를 해결함파일 코드를 하나로 묶고 압축하는 과정에서 용량이 크게 줄어들어 실행속도 및 메모리 자원 활용에 이점을 가짐번들링 및 압축된 상태에서는

Webpack과 번들링
Webpack이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다. 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이다.Webpack에서의 모듈은 JavaSc

웹팩? 모듈? 바벨?
프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.모듈은 웹 애플리케이션을 구성하는 모든 자원을 포함한다. HTML, CSS, Javascript, Images, Font 등 파일 하나하나가 모듈이다.웹 애플리케이션을 구성하는 모듈들을 하나의 파일로 병합 및
번들링과 웹팩
개발이 완료된 앱을 배포하기 위해 하나의 폴더(directory)로 구성하여 준비하는 작업.React 앱을 기준으로 설명을 하면, npm run build를 실행하면 React build 작업이 진행되고, index.html 파일에 압축되어 배포에 최적화된 상태를 제공

웹팩
이전 게시글을 다시 보니,,, 부족한 점이 많다는 걸 느꼇다.왜 쓰는지 이런 것들은 나름,,,? 정리 한 것 같지만 웹팩 설정을 할때 중요한 핵심 개념들을,웹팩 공식문서에서는 Concepts라고 하는 것의 설명을 하나도 작성하지 않았다!!그래서 그것들에 대해 내가 이해

React 설정을 직접 해보자!
Cra 없이 리액트를 환경을 직접 만들어보자! 라고한지 벌써 10일이 지나버린 오늘,,, 사실 없이 만든건 저번주에 전부 해보았다! 문제는 그걸 왜 기록을 안한거야,,,, 하면서 깃허브에 커밋도하고 했어야 했는데,,,,, ㅠㅠ 여튼... 그러한 이유로 드디어 웹팩으로
웹팩을 공부해보았다...?
기초부터 다시 시작해야지 마음먹은 가운데.... 전부터 항상 궁금 했던것..! Create React App 없이 React를 초기 설정 하려면 어떻게 하면 될까 였다. 일단 단 한번도 해본적이 없기 때문에, 찾아보니 내가 직접 만드려면 중요한 포인트는 다른 설정도
Unit3 회고
[React]번들링과 웹팩 🔆 번들링 > #### 번들링🗃 : 여러 제품이나 코드, 프로그램을 묶어 패키지로 제공하는 행위 번들: 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 번들링의 필요성 변수 간 충돌 방지 번들 파일 용량 압축 사용자 임의 조작 방지
번들링과 웹팩
개념 - Bundle, 영어로 묶음이라는 뜻이며 보통 상품을 구매했을 때 끼워주는 걸 말한다. 스마트폰을 구입했을 때 나누어주는 이어폰이나 PC를 구입할 때 끼워주는 소프트웨어 등이다.두 개의 .js 파일에서 같은 변수를 사용하고 있어서, 변수 간 충돌이 일어났습니다.
[웹지식] 번들링, 웹팩에 대한 개념정리
웹 파일 (html, css, js) + (기타 static 파일, png, jpeg 등등)을 배포하기 쉽도록 용량을 줄여 묶어주는 방법 웹팩은 프론트엔드 애플리케이션 배포를 위해 현재 가장 많이 사용하는 번들러이다.모던 웹에 진화에 맞추어 많은 양의 자바스크립트 모듈

WebPack(웹팩) 개발 툴
웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구이다.웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다.매번 명령어를 치는 시간과 브라우저를 새로

번들링, 웹팩
여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위.프론트엔드 개발자에게 번들은 "사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음"이다.두개의 js 파일에서 같은 변수를 사용하고 있어서, 변수간 충돌이 일어날 때딱 한 번 불러오는 코드의 크기가 비교적

[Webpack] 궁금해서 혼자 정리하는 웹팩 3
실제 배포 환경을 구축하기 위한 유틸리티와 좋은 사례들에 대해 알아보자.development 와 production의 빌드 목표는 매우 다르다. development 같은 경우에는 강력한 소스 매핑을 통한 디버깅, localhost 서버에서 라이브 리로딩이나 hot m