programming study/Front-end (28) 썸네일형 리스트형 Webpack - 로더 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. 로더의 역할 Webpack은 모든 파일을 모듈로 취급한다. JavaScript 뿐만 아니라, 스타일 시트, 이미지, 폰트까지 모두 모듈로 봄 import(ES6) 구문을 사용하면 JavaScript 코드 안으로 가져올 수 있다. 로더가 모든파일을 JavaScript의 모듈처럼 만들어준다. 이미지 파일 -> data URL 형식의 문자열 CSS -> JavaScript에서 직접 로딩할 수 있도록 함 2. 커스텀 로더 만들기 로더 파일 정의 // my-webpack-loader.js module.exports = function myWebpackLoader(con.. Webpack - 엔트리와 아웃풋 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. Webpack의 역할 모듈로 연결된 여러개의 JavaScript 파일을 묶어준다. 이를 번들이라고 한다. 즉, Webpack은 번들을 만드는 번들러라고 할 수 있다. 2. Webpack 설치 npm install -D webpack webpack-cli -D 옵션: devDependencies에 추가된다. 개발용 패키지 3. Webpack 명령어 명령어 조회 node_modules/.bin/webpack --help --mode 아래의 세가지 값이 올 수 있다. development 개발환경 production 운영환경 배포하기위한 최적화 설정 none --e.. Webpack - 웹팩이 필요한 이유와 모듈 시스템 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. 웹팩이 필요한 이유 전역 스코프의 오염 위험 예) 전역 스코프에 함수나 변수를 선언하면 다른 파일에서도 접근이 가능 애플리케이션이 예측할 수 없게 되고 런타임 에러가 발생 2. IIFE 방식의 모듈 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression) 전역 스코프 오염 문제를 예방하기 위해 사용 함수 외부에서 함수 내부를 접근할 수 없음 외부로부터 독립적 var math = math || {}; (function() { // 함수 안에 넣음으로써 독립적 function sum(a, b) { return a +.. NPM 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. Node.js 최신스펙으로 개발할 수 있다. 웹팩, 바벨, TypeScript, SASS를 실행할 수 있는 환경이 되어준다. 빌드 자동화 파일 압축, 코드 난독화, 폴리필 추가의 작업을 거친후 배포 라이브러리 의존성 해결 각종 테스트 자동화 개발 환경 커스터마이징 node REPL Node.js 설치 후 터미널에서 node를 입력 자바스크립트 코드를 입력하고 즉시 결과를 확인 가능 .exit: 종료 NPM node package manager 2. NPM으로 프로젝트 생성하기 프로젝트 생성 npm init 프로젝트를 생성하고 메타정보를 입력 모든 메타정보가 입.. 이전 1 2 3 4 다음