일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- GRID
- javscript
- 자바스크립트
- Mongoose
- node.js
- express
- graphQL
- JavaScript
- Session
- react
- Component
- frontend
- heroku
- HTML
- Flutter
- NextJs
- CLONE
- DART
- API
- form
- pug
- clonecoding
- nodejs
- MongoDB
- backend
- 리액트
- TypeScript
- ES6
- CSS
- ECMAScript
- Today
- Total
목록webpack (2)
Enjoy Programming

이제 프론트엔드쪽을 빌드 할텐데. webpack에는 development, production, none모드등이 있다. 프론트엔드 클라이언트를 빌드할텐데 현재 webpack conifg은 mode가 development로 되어있다~ dev와 build 스크립트할때 두가지를 다르게 주고싶은데 webpack config의 mode를 지워주고 script에서 실행시 명령어로 전달해주도록 하자. 요롷게~~~ 명령어를 작성해 전달할 수 있다. 두가지다 실행시 매우 잘 실행된다~~` 차이점은 위는 dev모드 이고 이건 production모드 이다. 압축되어있다~~~ 한가지 수정해야하는데 현재 build에서도 watch가 실행되고 있다~ 역시 webpack config에서 watch:true를 삭제하고 command..

아 어려웠다 웹팩 설치.. 프로그래밍을 배우며 항상 어렵게 느껴지는게 바로 설정이다... 무언가 새로운 툴을 설치하고 설정하고 하는게 참 어렵다... ㅋㅋ 자 장장 두시간에 걸쳐 설정한 webpack을 알아보자 유튜브 클론코딩을 하던 중 서버쪽은 어느정도 진행이 되었는데 이제 클라이언트 쪽의 css나 javascript를 아직 하나도 안했다. 자 그럼 웹팩이란 무엇인가. 개발을 하다보면 자바스크립트 코드가 많아지고 여러개의 자바스크립트 파일을 만들게 된다. 이 파일들이 많아 질 수록 브라우저에서 로딩하는 것이 많이지기에 브라우저가 느려질 수 있고 또한 그만큼 네트워크 비용을 치뤄야 하는 단점이 있다. 그리고 파일들 간에 작성이 잘못된 경우 충돌의 위험성도 있다. 이러한 단점을 보완한 하나의 파일로 bun..