일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 머쓱이
- CSS
- Javascript
- 반복문
- 코딩문제
- 코딩연습
- 코딩입문
- 코딩공부
- 자바스크립트
- reduce함수
- 헬스
- 프레임워크
- for문
- axios
- react
- React-Three-Fiber
- 웹팩
- 코딩
- 운동
- 리엑트
- 코딩테스트
- map함수
- 자바스크립
- 오름차순
- codingtest
- MPA
- Programmers
- 배열뒤집기
- 프로그래머스
- threejs
- Today
- Total
목록웹팩 (2)
SG의 개발 공부로그

그냥 vite를 쓰는 이유 를 먼저 요약을 하자면 1. 번들링을 생략하기 때문에 서버를 빠르게 구동시킨다. 2. HTTP 상태 코드를 활용하여 리로딩이 더 빠르다. 3. Vite가 설정한 최소한의 config로도 사용이 가능하다. 4. 닥치고 속도차이가 확연히 느껴진다. CRA를 사용해서 React 프로젝트를 많이 생성해 봤을 거다. React 공식에서도 추천해 주는 보일러 플레이트이기도 하고 많은 유용한 기능들을 제공해 주기 때문이다. 하지만, CRA를 쓰다가 Vite를 사용해 보면 속도에 있어서 엄청난 차이를 느껴 볼 수 있다. Vite가 빠른 이유 왜 그럴까? 전의 웹개발방법은 HTML , CSS , JS 이렇게 각각 만들어서 코드를 짜고 서버에 올리면 끝이었다. 그런데 사람들이 자바스크립트 라이브..

웹팩(webpack) 이란 무엇인가? 웹 사이트를 개발하다 보면 JS, CSS, IMG 등 많은 리소스 파일들이 생기는데, 파일이 많아질수록 서버와의 접속이 많고 로딩이 느려지게 된다. 자바스크립트를 모듈화해서 사용하더라도 같은 스코프를 공유하기 때문에 변수 충돌이 일어날 수가 있다. 그리고 라이브러리 순서에따라 로딩 속도에도 차이가 생기거나 시간, 공간 복잡도에 따른 문제도 생길 수 있다. 그래서 등장한 게 번들러 (Bundler) 그 중에 가장 인기가 많은 웹팩 (webpack) 웹팩 공식 사이트 사진. 앱을 구성하는 수많은 자원들을 하나로 병합, 압축해주는 것이 모듈 번들링이라고 한다. 번들러의 장점. 여러 파일의 자바스크립트 코드를 압축하여 최적화할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄..