메로그

린트란? 코드의 오류, 버그, 스타일 등 코드 규격을 점검하는 것을 린트라고 부릅니다. 린트를 사용하면 코드의 가독성을 높일 수 있고, 스크립트의 런타임 에러를 예방할 수 있습니다. (미리 오류를 뱉어주기 때문에) ESLint ECMAScript 를 검사하는 도구 중 하나이다. ESLint 를 사용해서 코드의 포멧팅, 품질 을 검사할 수 있다. 혼자 개발하는 경우에는 자기만의 스타일대로 하기 때문에 큰 문제점은 생기지 않을 수 있지만, 여러 사람이 개발하는 경우에는 코드의 스타일을 가지고 있는 것이 좋다. 이를 이용하여 스타일, 잠재정 버그를 예방할 수 있다. npm install eslint // .eslintrc.js 만들기 npx eslint --init rules 를 이용하여 여러 규칙을 추가할 ..

크로스 브라우징 브라우저마다 사용하는 언어 스펙이 달라 코드를 읽지 못하는 경우가 발생한다. 자바스크립트의 경우, IE 에서 프라미스를 이해하지 못하는데 이를 해결해줄 수 있는 것이 바벨이다. es6 이상의 언어로 작성된 코드를 바벨을 이용한 트랜스파일링 작업을 하여 모든 브라우저에서 호환가능하도록 한다. 바벨 설치 npm install @babel/core @babel/cli // 실행 npx babel app.js 프리셋 바벨에는 여러가지 플러그인이 있는데, block-scoping, arrow-functions 등등 이 있다. 이러한 것들을 하나씩 다운받기는 우리는 너무 너무 귀찮다. 그러니까 이러한 플러그인이 모아져 있는 프리셋을 사용하자 ^.^~~ preset-env 는 es6 를 변환할 때 사..

플러그인 이란? 로더가 파일 단위로 처리한다면, 플러그인은 번들된 결과물을 난독화, 특정 텍스트를 추출하는 용도 등으로 사용하도록 합니다. 간단하게 커스텀 플러그인을 만들어 보자. my-webpack-plugin.js /* 로더와 달리 플러그인은 클래스로 되어 있고 apply 함수를 구현하여 인자로 받는 compiler 객체 안에 있는 tap() 함수를 사용하여 작업이 완료된 시점에 로드를 찍는 코드를 작성해보자. */ class MyWebpackPlugin { apply(compiler) { compiler.hooks.done.tap("My Plugin", stats => { console.log("MyPlugin: done") }) } } /* compiler.plugin() 함수의 두번째 인자인 콜..

cross-env 란? 환경변수 값을 주어 빌드 할시 OS 마다 환경변수를 설정하는 방법이 달라서 오류가 나는 경우가 발생한다. 예를 들어, build: "NODE_ENV=production webpack --progress" 를 사용하는 경우, Mac 에서는 되지만, Windows 에서는 에러가 나는 것을 확인하였다. 이를 해결하기 위해 cross-env 모듈을 사용한다. 설치 npm install cross-env 앞에 cross-env 키워드를 붙여 사용해주면 동적으로 환경 변수가 변경되며 모든 운영체제에서 동일한 방법으로 환경 변수를 변경할 수 있다. build: "cross-env NODE_ENV=production webpack --progress"

dependencies, devDependencies 차이 우리가 노드모듈을 설치하다보면, package.json 에 dependencies, devDependencies 를 접하게 될텐데, 이의 차이점을 알아보자. 생각보다 간단하다. 우리가 설치할 때, --save-dev, -D 같은 명령어를 붙여서 설치하면 devDependencies 로 설치되게 된다. 이는 개발할 때 개발용으로 사용할 라이브러리를 설치하는 것이고 배포시에는 포함되지 않는다. 동작과는 연관이 없는 모듈을 설치 해주면 되는 것이다. 사용하는 이유 사용하는 이유는 용량 때문이다. 우리가 배포시 필요없는 모듈도 같이 올라간다면 그만큼 용량도 커지고 리소스를 잡아먹게 된다. 불필요한 라이브러리를 포함시키지 않기 위해 사용하는 것이다.

로더 웹팩은 모든 파일(html, js, css ...)을 모듈로 하여 바라보고 있습니다. 그러하여 import 구문을 사용하여 자바스크립트 코드 안으로 가져올 수 있는데 이게 가능한 이유가 웹팩의 로더 덕분입니다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환, 이미지를 dataUrl 형식의 문자열로 변환, CSS 를 자바스크립트에서 직접 로드할 수 있도록 합니다. 커스텀 로더 만들기 임의의 js 파일을 하나 만들어봅시다. userLoader.js module.exports = function userLoader (c) { return c; } 로더가 읽은 파일의 내용이 함수 인자 c 로 전달됨. webpack.config.js module: { rules: [{ test: /\.js..