soly.log

♣ Devtool & Source Map- Source Map : 브라우저에서 디버깅할 때 번들된 코드가 아닌 원본 코드를 확인할 수 있게 해주는 기능 - Devtool : SourceMap의 기능 생성을 제어하는 설정 값 module.exports = {devtool: 'source-map',}물론 내가 작성한 코드들이 매우 간단해서 사실 크게 헷갈리지 않지만 코드가 많다는 가정이라면 왼쪽처럼 번들링 된 코드는 알아보기 힘들 수 있다. 그래서 devtool을 사용해서 sourceMap(원본과 번들파일과연결)이 생성된다면 오른쪽과 같이 원본코드를 볼 수 있고 디버깅하는 게 훨씬 수훨해질 것이다. webpack에서 소스맵을 사용하는 경우는 많은 옵션이 존재한다. 나는 그중에 'source-map'을 ..

♣ Caching- webpack은 컴파일로 생성된 파일에서 변경된 내용이 없다면 브라우저는 캐시 상태를 유지하고 그대로 사용하게 된다코드를 직접 작성한 사람은 이 파일이 변경된 건지 안된 건지 알 수 있지만 다른 사람들이 본다면? 업데이트가 된 거야..? 뭐야라고 생각할 수도 있다!이럴 때 알 수 있는 방법은 build시 생성 되는 파일이름으로 확인 할 수 있는데 방법은 아래아와 같다. 1. 파일명에 hash값 작성하기!// 변경 전 output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js', },// 변경 후output: { path: path.resolve(__dirname, 'dist'), filename..

♣ Webpack Plugin의 정의- Plugin이란 번들링이 완료된 결과물(output)에 추가 기능이 필요할 때 사용 하는 것으로 loader가 파일을 변환해주는 역할을 한다면 Plugin은 이미 webpack을 통해 변환된 파일에 추가적인 기능(번들 최적화, 환경 변수 설정, 빌드 자동화)을 더하고 싶을 때 된다 많은 Plugin이 있지만 이번에는 소스코드 내에서 HTML 파일을 생성해서 작업하면 그 파일을 buil 할 수 있게 하는 HTML Webpack Plugin을 정리해보려고한다. 1. plugin 설치npm i -D html-webpack-plugin 2. webpack.config.js에 plugins에 HtmlWebpackPlugin 인스턴스 생성하여 적용const HtmlWebpa..

♣ Webpack Loader에 대해서 알아보자 - 리액트로 플젝을 진행할 때 css, font, image 등 사용할 때 뭔가 설정했던 기억 없음... 왜? 이미 CRA로 webpack이 전부 설정되어 있었기 때문플젝의 자원을 사용할 수 있게 도와주는 Webpack의 Loader는 Webpack이 웹앱을 해설할 때 자바스크립트 파일이 아닌 웹자원(HTML, CSS, Images, Font)들을 변환할 수 있도록 도와주는 속성이라고 생각하면 된다. 지금 해보는 건 scss를 사용한 스타일링이 가능하도록 작업환경을 만들어볼 건데 그러기 위해선 아래와 같이 라이브러리 설치가 필요하다npm i -D css-loader style-loader sass sass-loader 중간에 sass가 들어간 이유는 해당 ..

♣ webpack.config.js- 정말 완전 기초적인 웹팩 기본설정 파일을 만들어본다const path = require('path');module.exports = { mode: 'development', // 시작점(단일) entry: path.resolve(__dirname, 'src/index.js'), // 웹팩 작업을 통해 생성된 결과물 저장위치 output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js', },}; ➜ mode : 번들링 할 때 최적화 수준을 설정하는 옵션development(개발), production(배포), none(설정 없이 webpack기능만적용) 이렇게 3가지를 확인할 수 있는데..

♣ Import 기능 구현해 보기 - 리액트를 사용했던 사람이라면 최소 1번 아니 아주 많이 다른 폴더에서 작성한 컴포넌트를 Import을 통해서 쉽게 가져와서 사용했던 경험이 있을 거라고 말할 수 있다 하지만 이 Import 기능 또한 CRA로 프로젝트를 생성할 때 이미지 Webpack에 설정을 해놨기 때문에 사용할 수 있었다는 걸 모를 수도 있다고 생각하기 때문에 이 부분에 대해서 다뤄보려고 한다.(내가 몰랐기에..ㅎ)▪ 현재 파일 구조/Users/local/Documents/GitHub/study/webpack├── dist│ └── index.html└── src ├── index.js └── randomAddress.js 아래 화면과 같이 코드를 작성해서 Import를 시켰더니 E..

♣ Webpack이란?- 오픈소스로 만들어진 자바스크립트 모듈 번들러로 여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리라고 생각하면 된다.(번들링)♣ Webpack장점다수의 장점 중 가장 크게 보였던 장점 2가지를 말한다면1. 다수 파일의 자바스크립트 코드를 압축하여 최적화할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다2. 모듈 단위로 개발이 가능하여 개발 시 코드의 가독성이 좋아지고 유지보수가 용의 하다 ♣ React를 사용하여 개발을 하면서 왜 한 번도 Webpack을 설정해 본 적이 없을까? - 나는 항상 React로 프로젝트를 생성할 때 Create-React-App(CRA)를 통해 작업을 시작했었다.CRA를 사용했던 이유는 그냥, 그렇..