webpack 3

[webpack 미니 발표 3부] Vite는 뭐지?

webpack 미니 발표 시리즈의 마지막~~ vite 는 뭐지? 그 동안 요약 웹팩은 모듈 번들러이다. 모듈 번들러는?? 웹 어플리케이션을 이루는 수많은 자원들이 있는데, 이것들을 조합하고 압축해서 하나의 결과물로 만들어준다. 웹팩의 필요성 1. 코드 의존성을 따져서 파일들을 압축, 조합해서 웹 어플리케이션을 빠르고 효율적으로 로딩되게 해준다. 2. 변수의 scope(유효 범위) 문제를 해결해준다. 3. 웹 개발 작업을 자동화해준다. Vite 더보기 TMI) 나는 '바이트'로 읽는 줄 알았는데 '비이트'라고 한다. Vite는 'Vite is a build tool that aims to provide a faster and leaner development experience for modern web ..

프론트엔드💛 2022.08.07

[webpack 미니 발표 2부] Webpack의 필요성과 주요 개념

1부 요약 - 웹팩은 모듈 번들러이다. - 모듈 번들러는?? 웹 어플리케이션을 이루는 수많은 자원들이 있는데, 이것들을 조합하고 압축해서 하나의 결과물로 만들어준다. Webpack의 필요성 1. 웹 사이트가 빠르게 로딩되게 해준다. 여러 파일을 압축, 조합 -> 서버에 요청해야 하는 파일 개수 감소 -> 사이트가 빨리 로딩됨. 1부에서 썼다 :) 또한 처음에 모든 자원을 요청하는 게 아니라, 필요해질 때 자원을 요청하는 Lazy loading도 지원해서 초기 페이지 로딩 속도를 높인다. 2. Dependency graphy를 생성해서 빌드하여 변수의 scope(유효 범위) 문제를 해결한다. javascript의 변수는 기본적으로 전역 범위를 가진다. 그런데 여러 js 파일을 조합해서, 큰 웹 어플리케이션..

프론트엔드💛 2022.08.07

[webpack 미니 발표 1부] 모듈 번들러란?

들어가며... 두둥...! 회사에서 2주에 한번씩 돌아가면서 미니 발표를 하는데, 내 차례가 왔다.. 그 주제를 미리 정해뒀는데, 내가 선택한 주제는 'webpack'이었다. 왜 그랬니..? 과거의 나..?? 싸피에서 프로젝트하면서 리액트에서 절대 경로를 사용하고 싶을 때 웹팩 설정을 따로 해야 하는 등 많이 들어봤는데, 잘 몰라서 궁금해서 정했던 것 같다.... 그런데 발표할 때가 올 때까지 안(? 못?) 하고 있다가 급하게 하는 중이다.. 하다 보니 webpack을 하려면 모듈 번들러에 대해서도 말해야 하고, 그러려면 모듈도, 번들러도 이야기해야 한다. 그리고 우리 회사는 요즘 vite를 더 많이 써서, webpack보다는 vite에 대해서도 이야기해야 할 것 같고... 적어도 webpack vs v..

프론트엔드💛 2022.08.07
728x90