programming study/Front-end (28) 썸네일형 리스트형 dependencies vs. devDependencies 1. 개요 오늘 package.json의 dependencies와 devDependencies에 대해 질문을 받았다. 나는 내가 알고 있는 것을 토대로 이렇게 답변을 드렸다. dependencies는 production에 관여하는 의존성들입니다. 실질적으로 사용자가 접하는 코드를 구성하는 의존성들이라고 할 수 있습니다. 대표적인 예로 React.js를 들 수 있겠습니다. devDependecies는 development에서만 관여하는 의존성입니다. 개발단계 또는 빌드과정에서만 관여하는 의존성입니다. webpack과 같은 번들링 패키지, babel과 같은 트랜스파일러 등이 그 예라고 들 수 있겠습니다. 그러나 엄밀히는 이 내용이 맞지 않다는 것을 듣게 되었다. 그리고 이와 관련해서 빌드 배포, 패키지 배포.. 웹팩 - Webpack Dev Server 본 내용은 인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다. 1. Webpack Dev Server가 필요한 이유 개발을 진행하면서, 코드의 결과를 실시간으로 확인 가능 웹 애플리케이션을 개발하는 과정에서 유용하게 사용되는 도구 웹팩의 빌드 대상 파일이 변경되었을 때 코드만 변경하고 저장하면 웹팩으로 빌드하여 브라우저를 새로고침 명령어 입력 시간, 브라우저 새로고침 시간, 웹팩 빌드 시간을 절약할 수 있음 2. Webpack Dev Server 설치 및 적용 설치 npm i webpack webpack-cli webpack-dev-server -D 명령어 // package.json ... "scripts": { "dev": "webpack-dev-server", .. 웹팩 - plugin 본 내용은 인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다. 1. plugin 적용 plugin 설치 npm i -D mini-css-extract-plugin webapck.config.js 설치한 플러그인을 불러오기 // webpack.config.js var path = require('path'); // 플러그인 불러오기 var MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { mode: 'none', entry: './index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, .. 웹팩 - loader 본 내용은 인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다. 1. webpack.config.js 분석 mode 세 가지 모드 지원(production, development, none) 배포시에는 production으로 할 것 entry: 웹팩으로 번들링할 파일의 주소(시작점) output: 결과물의 이름과 경로 module: loader rules 속성 안에 로더를 설정 var path = require('path'); module.exports = { mode: 'none', // production, development, none entry: './index.js', output: { filename: 'bundle.js', path: path.resolv.. 웹팩의 주요 속성 소개 본 내용은 인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다. 1. 웹팩 주요 속성 entry output loader plugin 2. entry 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 JavaScript 파일 경로 entry 속성에 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨져 있어야 함 엔트리 포인트는 1개 또는 여러개 1개인 경우: 싱글 페이지 애플리케이션 2개 이상인 경우: 멀티 페이지 애플리케이션 // webpack.config.js module.exports = { entry: './src/index.js' } 3. output 빌드 결과물의 파일 경로 최소한 filename을 지정 일반적으로 path 속성을 함께 정의.. 웹팩 소개 본 내용은 인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다. 1. 웹팩 모듈 번들러 애플리케이션을 구성하는 자원을 조합해서 병합된 하나의 결과물로 만듦 하나의 페이지를 로딩할 때, 느린 네트워크 환경에서 페이지를 구성하는 모듈을 불러오는 것은 많은 시간이 걸림 모듈이 많을 수록 더 걸리게 됨 웹팩을 이용하여 모듈을 번들링하여 해결 브라우저를 위한 사전 컴파일러 JavaScript 만이 아닌, 웹 페이지에 관련된 모든 자원을 위한 도구 2. 모듈 특정 기능을 갖는 작은 코드 단위 모듈이 합쳐서 거대한 모듈이 될 수도 있음 웹팩에서의 모듈 JavaScript 모듈에만 국한되지 않음 웹 애플리케이션을 구성하는 모든 자원을 의미 HTML, CSS, JavaScript, I.. 웹팩 시작하기 본 내용은 인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다. 1. 웹팩 소개 모듈 번들러(Module Bundler) 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구 모듈 번들링 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작 빌드 == 번들링 == 변환 2. 웹팩 설치 및 실행 웹팩 설치 npm i webpack webpack-cli -D 커스텀 명령어 추가 package.json에 커스텀 명령어 추가 ... "scripts": { "build": "webpack" }, ... 커스텀 명령어 실행 npm.. NPM 명령어 본 내용은 인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다. 1. NPM 지역 설치 & 제거 지역 설치 npm install [패키지명] # 위와 같음 npm i [패키지명] --save-prod 옵션이 생략되어도 지역 설치 해당 패키지가 node_modules에 설치 패키지와 관련된 패키지도 설치 package.json의 dependencies에 해당 패키지와 버전이 기록 지역 제거 npm uninstall [패키지명] node_modules와 package.json의 dependencies에서 삭제됨 지역 설치 명령어 옵션 npm install [패키지명] --save-prod npm install [패키지명] --save-dev # 위와 같음 npm insta.. 이전 1 2 3 4 다음