2019년 06월 – 유지성의 개발노트

[npm]babel 설치하기

바벨을 설치하기 전에 webpack을 설치해야한다. 준비가 안되었을 경우 아래글을 먼저 읽기

npm을 이용해서 webpack 설치하기
http://blog.ujsstudio.com/?p=194

npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev

webpack.config.js에 바벨로더를 추가해준다

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer:{
    contentBase: './dist' //개발서버가 root가 아닌 dist 폴더를 인식
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  }
};

.babelrc 파일을 루트(webpack.config.js와 같은 위치)에 생성하고 아래와 같이 입력

{
    "presets": ["@babel/preset-env"]
}

npm run devserver 명령을 통해서 바벨이 잘 작동되는지 확인하면 된다.

참조
https://babeljs.io/setup

[npm]webpack 설치하기

mkfir webpack-demo
cd webpack-demo
npm init -y
npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev

webpack.config.js 파일을 생성하고 아래와 같이 세팅해준다.

//webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer:{
    contentBase: './dist' //개발서버가 root가 아닌 dist 폴더를 인식
  },
};

package.json 파일에 스크립트를 추가한다.

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bulid": "webpack",
    "devserver": "webpack-dev-server --open --progress"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1"
  },
}

스크립트를 수정할 때마다 빌드명령하는게 불편하기 때문에 wevpack-dev-server를 이용한다. package.json 에 등록한 스크립트 ‘devserver’를 실행시키기 위해서 npm run devserver 한다. 소스를 변경하면 개발서버가 변경을 감지해서 빌드한것 처럼 브라우저를 갱신 시켜준다.

[참고]
https://webpack.js.org/guides/getting-started/#basic-setup

[같이 읽기]
바벨설치하기 : http://blog.ujsstudio.com/?p=198

[javascript] 아이프레임간 데이터 전송 방법

외부사이트를 아이프레임으로 불러오는 경우 높이 값을 수정하고 싶을때 ‘targetWindow.postMessage’를 이용해서 필요한 데이터를 전송, 전달 받을 수 있다.

크로스도메인에서도 사용가능한 방법이다.

<!-- mysite.com -->

<iframe id ="sizetracker" src="http://redcong.com/test.php" scrolling="auto" frameborder="0" allowtransparency="true" class="reser_frame" style="height: 500px !important;"></iframe>
<script type="text/javascript">
	window.addEventListener("message", function(e){
		var data = JSON.parse(e.data);
	    console.log(data);
	}, false);
</script>

<!-- example.com -->

<div>...</div>
<script type="text/javascript">
  parent.postMessage(
  '{"height": '+ document.body.scrollHeight +'}',
  "http://mysite.com" // '*' 사용할 경우 모든 도메인 허용
</script>

참조:
https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage