![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/nsgbL/btraMpPLNaD/Q0jHr7kWbTw9fu81ffxW2k/img.png)
url-loader는 file-loader와 출력의 형태가 다르다. file-loader는 파일을 그대로 출력해주는 역할을 한다면 url-loader는 파일을 data uri문자열형태로 변환해준다. url-loader 설정 yarn add url-loader -D webpack의 module에 loader를 설정한다. module.exports = { ..., module: { rules: [ ..., { test: /\.svg$/i, use: [{ loader: 'url-loader', options: { limit: 8192 } }] } ] }, ... } svg파일에 대한 설정을 했다. options의 limit는 파일 크기의 제한을 두는 것이며, byte단위로 설정한다. 위에서는 8kb정도로 설정..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cc9FlW/btraJojokIc/DPHx29mkRbHqWuh0zXMebk/img.png)
모듈 내에서 import또는 require로 파일을 모듈로 읽어들이기 위한 loader이다. file loader는 build 시 webpack에서 설정된 Output 디렉토리로 파일을 복사한다. file loader 설정 yarn add file-loader -D webpack에서 image파일에 대한 설정을 하기위해 module의 rules에 새로운 원소를 추가해야 된다. module.exports = { ..., module: { rules: [ ..., { test: /\.(png|jpe?g|gif|tif?f|raw|bmp)$/i, use: [{ loader: 'file-loader', options: { name: '[contenthash].[ext]' } }] }, ... ] }, .... }..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/C8nqU/btrazLG2PnB/RfhVnh73vkbdDMvnPQNExk/img.png)
Webpack으로 설정한 소스코드 최적화에 관련된 설정을 Production mode(배포)에서만 진행될 수 있도록 분리 코드 최적화 설정 정보 https://kmj24.tistory.com/175 webpack 소스 코드 최적화 Minification & Mangling - 코드를 압축 및 난독화 - Application에 관여하지 않는 문자열 제거(주석 등) - 들여쓰기, 띄어쓰기와 같은 공백문자 제거 - 분기문을 3항연산자로 표현 Webpack 설정 HTML -.. kmj24.tistory.com 분리를 통해 최적화 관련 설정은 배포할 때만 진행 되며 개발 과정에서는 수정 반영 시간이 단축되어 쾌적한 환경으로 개발이 가능해진다. 환경 별 설정 파일 분리 각 환경 별 (Dev, Prod) 설정을 구분..
Minification & Mangling - 코드를 압축 및 난독화 - Application에 관여하지 않는 문자열 제거(주석 등) - 들여쓰기, 띄어쓰기와 같은 공백문자 제거 - 분기문을 3항연산자로 표현 Webpack 설정 HTML - html-webpack-plugin에서 html파일의 minifiaction설정이 가능 module.exports = { ..., plugins: [ new HtmlWebpackPlugin({ title: 'Webpack', template: './template.hbs', meta:{ viewport: "width=device-width, initial-scale=1.0" }, minify:{ removeComments: true, useShortDoctype: t..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/coYIuw/btraqstf9AY/iO5lcBNShTdPWlxp0yUNBk/img.png)
Caching은 자주 사용하는 데이터를 저장해 두고 client - server 통신의 비용을 줄일 수 있는 시스템이다. Webpack을 이용하여 Caching설정을 할 수 있다. module들을 bundle.js로 만들면, 브라우저는 bundle.js를 받고 web application을 동작시키게 되는데, 이때 설정한 내용으로 bundle.js를 만들게 되면 브라우저는 같은 이름으로 bundle.js을 호출한다. 브라우저가 caching을 구별하는 기준은 url이다. 그래서 load하는 resource의 이름이 같을 경우 caching을 이용하기 때문에 이전 bundle.js의 결과로 보이게 되어, 파일이 수정이 되었더라도 수정이 안된것 처럼 보여진다. 이런 문제를 방지하기 위해 bundle.js에 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/CQZZs/btradS5XAIi/tLA77LM4ioQVP9pQOT9hF0/img.png)
Module exports키워드를 이용하여 모듈관리 //내보내기 module.exports = { module명1, module명2 } exports.getCircleArea = module명3; //가져오기 const module = require('모듈 위치'); ESM을 이용한 module관리 npm install esm package.json에 "type": "module"추가 //가져오기 import module명 from '모듈위치'; //내보내기 export module명 export default module을 사용할 경우 코드의 재사용성이 증가 코드의 관리가 편해짐 코드를 모듈화 하는 기준이 명확해야 한다. Bundle module들의 의존성을 안전하게 유지하며 하나의 파일로 묶는것을 b..
Ducks: Redux Reducer Bundles Redux를 사용하여 상태관리를 구축하는 과정에서 하나의 기능을 만들 떄 각각 use case에 따라 type, action, reducer를 계속 추가해야 된다는 점과 reducer와 actions만 서로 연관된 동작을 하므로 하나의 독립된 모듈로 묶는것이 더 의미가 있고 라이브러리로 packaging하기 더 쉽다고 한다. 규칙 1. 하나의 모듈은 항상 reducer 함수를 default로 export해야 한다. 2. action 생성자를 함수로 export해야 한다. 3. action 타입은 npm-module-or-app/reducer 4. 외부 reducer가 해당 action들의 발생을 계속 기다리거나, 재사용이 가능한 라이브러리일 경우 "UP..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bbJs6N/btq74Dw0NcB/BzCq6M90nE7MPwJ2bdkDhk/img.png)
React Hooks란? React v16.8에 추가된 새로운 기능이다. 기존 함수 컴포넌트에서는 Class컴포넌트의 life cycle기능을 사용할 수 없었는데 hooks를 이용하여 가능하도록 했다. (class 컴포넌트는 hooks사용 불가능) https://kmj24.tistory.com/118 [React] Lifecycle과 useEffect hook React는 class로 컴포넌트를 생성할 수 있고, function으로 컴포넌트를 생성할 수 있다. class컴포넌트와 함수 컴포넌트의 차이는 Lifecycle method를 사용할 수 있냐 없냐가 있다. React에서 함수 컴포넌트를 kmj24.tistory.com State Hook class컴포넌트에서 state는 object 형태로 사용했..