webpack5 [webpack]웹팩(webpack) 설정하기(2) ✔️ 속성 entry : 진입점 (기본적으로 webpack config js 파일은 javascript 파일을 기준점으로 함) output: 반환점 (결과물을 내보내는 역할) - path : 결과물들의 저장 위치 (폴더명) (주의 : 상대경로(./dist)와 같은 경로를 입력하면 안 됩니다. 꼭 절대경로를 입력할 것.) - filename : 진입점의 파일 name과 동일하게 적어줍니다. 여기서 만든 filename은 entry의 key 값이 됩니다. (여러개 만들수도 있습니다. 동적으로 file name을 결정할 땐 [filename].js를 입력해주세요. ) clean : 이전에 만들어진 파일들 제거(단,5.20 version 이상만 사용 가능합니다. document에 여러 속성 및 version이 .. 2021. 10. 7. [webpack]웹팩 시작하기(1) 저번 글에 이어 웹팩 프로젝트를 설정하겠습니다. 먼저 package.json 파일을 만들어 줍니다. 문법 npm init -y webpack 준비에 필요한 패키지들을 다운받아 줍니다. (-D : 개발 영역에 다운로드 받는 의미입니다.) npm i -D webpack webpack-cli webpack-dev-server@next webpack : bundler 번들러가 동작하기 위한 핵심적인 package입니다. (webpack version4 이후는 cli도 설치해야 합니다.) webpack-cli : 터미널 부분에 입력하는 여러가지 명령들을 커맨드라인 interface라고 하는데 이것을 지원해줍니다. (이로인해 webpack-cli를 통하여 command line을 사용할 수 있게 만들어 줍니다 밑에.. 2021. 10. 6. [webpack]웹팩(webpack) 초기 설정 setting 이번에는 webpack 설정에 대해서 알아봅시다 👀 front-end의 필수 무기라고 할 수 있습니다. 먼저 등장 배경부터 알아보죠! | 웹팩(webpack)이 왜 생겼을까? 꼭 필요할까? - 대규모 project에서는 js 파일안에 많은양의 코드들이 존재합니다. 이 수많은 code line을 관리하려면 장난아니겠죠? 더 나아가 변수명도 만들기 힘들어집니다. 또한, 로딩하는데 속도가 파일이 크면 클 수록 장난 아니게 될겁니다. 결정적인 건, 신규 사이트들은 SPA를 활용한 방식의 사이트들이 많습니다. SPA란 하나의 html page에서 여러개(연관된)의 js 파일들을 포합하는 page입니다. 따라서 흩어져있는 js파일들을 하나의 파일로 번들링해줄뿐더러, 성능 최적화도 도와줍니다. 따라서 webpack을.. 2021. 10. 6. [Webpack]webpack-bundle-analyzer 배포 준비 안녕하세요! 이번에는 TypeScript Proejct를 배포를 위한 준비를 해보겠습니다! 먼저 간단하게 webpack-bundle-analyzer(웹팩 번들 에널라이저)에 대해 알아보겠습니다! Webpack을 사용하여 번들링되는 모듈을 분석해서 시각적으로 표현해주는 모듈입니다. 모듈이 차지하는 용량에 따라서 눈에 보이는 영역도 커지기 때문에 어떤 모듈이 얼만큼 용량을 차지하는지 쉡게 파악할 수 있습니다 밑에 그림 처럼요 ! Webpack 특성상 수십개들의 파일들을 단 하나의 js 파일로 압축해주는 역할을 맡고 있습니다. 이럴 때 용량 문제가 큰 이슈 사항인데요. 합쳤을 때 용량이 너무 크면 문제가 되겠죠? 지금은 app.js는무려 총 크기가 1.5MB를 차지하고 있습니다. (사실상 한국은 별 문제 없는.. 2021. 8. 27. CORS와 Webpack DevSercer Proxy | CORS 란 ? 브라우저에서 기본적으로 API를 요청 할 때 브라우저의 현재 주소와 API의 주소의 도메인이 일치해야만 데이터를 접근 할 수 있습니다. 만약 다른 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요합니다. json-server 로 만든 서버의 경우에는 모든 도메인을 허용해주는 CORS 규칙이 적용되어있습니다. 하지만, Open API를 만드는게 아니라면 모든 도메인은 허용하면 안됩니다. webpack 개발 서버에서 제공하는 Proxy 기능을 사용하여 도메인을 사용해 봅시다. | Proxy 설정 웹팩 개발서버의 프록시를 사용하게 되면, 브라우저 API 를 요청 할 때 백엔드 Server에 직접적으로 요청을 하지 않고, 현재 개발 서버의 주소로 요청을 하게 됩니다. 그러면 .. 2021. 2. 18. 이전 1 다음
