본문 바로가기

분류 전체보기

[Webpack] 알아두면 쓸데있는 웹팩지식 CHECK 헷갈림 정리 헷갈릴 수 있는 개념들을 정리해 놓은 글 entry는 Array? Object? Loaders 와 Plugin의 차이 query 와 options 뭘 써야하지? loaders 와 rules 중 뭘 써야하지? use 를 써야하나 loader를 써야하나? __dirname 과 . 의 차이가 무엇인가? Development(개발모드) 와 Production(배포모드) entry는 Array? Object? entry 프로퍼티에는 Array 를 써야하나요 Object를 써야하나요? Array 를 쓰는 경우 서로 의존성 없는 여러파일을 사용한다면 Array형식으로 사용한다 module.exports = { entry: ['./js/index.js', './js/foo.js'], output..
[Webpack] css-loader & style-loader css-loader_style-loader css-loader webpack에서 .css 파일을 읽어들이기위해 사용하는 로더 설치 $ npm install --save-dev css-loaderstyle-loader 태그를 삽입하여 CSS에 DOM을 추가 설치 $ npm install --save-dev style-loader사용법 style-loader 와 css-loader 를 결합해서 쓰는것이 보통이다 번들링할 .js 파일의 상단에 css 파일을 import import '/* 경로 */' webpack.config.js 파일에서 설정 module.exports = { module: { rules: [ {...}, // 생략 { test: /\.css$/, use: ['style-loader', '..
[Webpack] extract-text-webpack-plugin extract-text-webpack-plugin extract-text-webpack-plugin 이 플러그인은 텍스트를 파일로 추출하는 플러그인이다 설치 $ npm install --save-dev extract-text-webpack-plugin사용법 css파일을 별도로 뽑아보겠다 // webpack.config.jsconst ExtractTextPlugin = require('extract-text-webpack-plugin'); webpack.config.js 파일의 가장 상단에 require 해줌 // webpack.config.jsconst ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module..
[Webpack] Babel babel Babel Babel 은 es6/es7 으로 작성된 코드를 es5 코드로 transpiling 하기 위한 도구이며 transpiler 이다. 작은 모듈들로 구성되어있으며, Babel은 다양한 모듈을 담는 일종의 상자역할을 함 왜 쓰는가 ? 아직까지 최신 문법을 지원하지 않는 브라우저가 있기에 호환을 위해 씀 babel-loader webpack이 모듈을 번들링할 때 바벨을 사용하기 위한 로더 $ npm install --save-dev babel-loaderbabel-preset-env babel-preset-env 모듈은 설정된 환경에 적합한 플러그인을 자동으로 설정해줌 $ npm install --save-dev babel-preset-envquery: { presets: ["env"]}/..
[Webpack] Webpack 웹팩이란? webpack Webpack Webpack 은 Module Bundler 이다. Module ? 모듈은 구현 세부사항을 캡슐화하고 공개 API를 노출해 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드조각이다. Bundler ? Bundle : 소프트웨어 및 일부 하드웨어와 함께 작동하는데 필요한 모든것을 포함하는 패키지. Bundler 란 필요한 의존성에 대해 정확히 추적해 해당하는 의존성들을 그룹핑 해주는 도구이다. 모듈번들러는 빌드타임에 실행되며 번들파일을 생성한다 (예: bundle.js) 생성된 번들파일을 브라우저에서 로드한다. 웹팩(Webpack) 의 장점 모듈 번들러의 기능을 커스터마이징해서 사용 가능 third-party library에 대해 모듈로 통합하는 기능 제공 we..
[Javascript] 객체지향 자바스크립트 [클래스] Class 클래스 (Class) 자바스크립트는 ES6부터 클래스를 도입했다. 하지만 다른언어의 클래스와는 다르다. 상속에 대해 문법적으로 보기 편하게 만든것일 뿐이다. 이를 Syntactic Sugar 라고 한다. 클래스 정의 (Class declarations) 클래스는 함수이므로 함수 표현식과 함수 선언식을 사용하는것처럼 사용가능하다. class Person{}console.log(typeof Person); // function class 는 다른 함수처럼 호이스팅(hoisting) 을 지원하지 않는다. const p = new Person(); // error! Person is not definedclass Person{} 일반함수처럼 함수 표현식이 가능하며 이를 클래스표현식이라 한다. 이름은 ..
[Javascript] 객체지향 자바스크립트 [상속] Inheritance 상속 (Inheritance) 자바스크립트는 클래스기반 언어가 아니기때문에 상속(Inheritance)이라는 기능이 없다. 하지만 프로토타입을 이용해서 상속을 구현할 수 있다. ES6부터 추가된 class 라는 문법이 있지만 이는 문법이 추가된 것이지 클래스 기반으로 바뀌었다는 의미는 아니다. 자바스크립트에서는 두가지의 상속방법이 존재한다. Classical 방식 Prototypal 방식 classical 방식은 new 연산자를 통해 마치 JAVA 의 객체 생성방식과 비슷해 classical 방식이라 한다. prototypal 방식은 Object.create() 메서드를 이용해 객체를 생성하고 확장하는 방식이다. 짚고 넘어가기 함수를 정의하면 일어나는 일 (Parsing) Func ..
[Javascript] 객체지향 자바스크립트 [프로토타입] 프로토타입 (Prototype) 워밍업 자바스크립트는 프로토타입 기반 언어라고 불린다. 그렇다면 프로토타입이 무엇인지 파헤쳐봐야 재밌어지지 않을까 싶다. prototype 이라는 단어의 뜻 부터 알고 시작하도록 하자!prototype : 원형, 본형, 원작 자바스크립트는 사실 객체지향이다? Java, C++ 등 다른 언어는 class 라는 개념이 있다. 하지만 자바스크립트에는 존재하지 않는다. ES6 부터 지원된 class 라는 문법이 존재하지만 문법이 추가됐을 뿐 class 기반으로 바뀌지는않았다. class 기반이 아니므로 상속도 존재하지않는다.자바스크립트가 class 기반이 아닌데도 객체지향이라고 불리는이유는 prototype 이라는것이 존재하기 때문이다. 그렇기 때문에 우리는 prototype 을..

티스토리툴바