관심있는것들

webpack devhttps://webpack.js.org/configuration/dev-server/ DevServer | webpackwebpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.webpack.js.org devServer: { setupMiddlewares: (middlewares, devServer) => { if (!devServer) { throw new Err..

크로스 브라우징브라우져 마다 사용하는 언어가 달라서 프론트엔드 코드는 일관적이지 못할 때가 많다.바벨은 ECMAScript2015+ 로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 지켜준다. 바벨은 3단계로 빌드를 진행한다. 파싱 -> 변환 -> 출력module.exports = function myBabelPlugin() { return { visitor: { Identifier(path) { const name = path.node.name; // 바벨이 만든 AST 노드를 출력한다 console.log("Identifier() name:", name) // 변환작업: 코드 문자열을 역순으로 변환한다. path.no..

NPM install을 통해서 CDN, 직접 source download대신에 외부 패키지 의존성을 관리할 수 있다. Webpack function mySum(a,b) { return a + b;}이 상태에서 index.html이 브라우저에 렌더리되면 전역 scope가 오염이된다. 어디에서든 mySum을 접근을 할 수 있게된다.var math = math || {};(function() { function mySum(a,b) { return a + b } math.sum = mySum})()math를 전역scope로 두고 다른 곳에서는 math.sum으로 접근하도록 변경한다. AMD(Asynchronous Module Definition) 브라우저 같이 javascript 를 로딩해서 ..