221012 - 학습내용

@babel
필요한 기능들을 조립해서 쓴다.

기본환경셋팅
npm install --save-dev @babel-core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/node

컴파일러들의 특징:
1.설치작업(install)
2.정의하는 작업(configuration) -> config
->최상위 root 디렉토리에 설치되어야 한다.
babel.config.json
기본셋팅

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

test.js

import fs from 'fs';
import http from 'http';

console.dir(http);

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'content-type': 'application/json' });
  res.end(
    JSON.stringify(
      {
        message: 'Hello World',
      },
      null,
      2
    )
  );
});

// 원시코드 : 개발자만 보는 코드
// 터미널에 띄워진 코드들
// -> 목적 코드(배포용)

npx babel test.js

var _fs = _interopRequireDefault(require("fs"));
var _http = _interopRequireDefault(require("http"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
//const fs = require('fs');
  res.writeHead(200, {
  });
  res.end(JSON.stringify({
    message: 'Hello World'
});

조립된코드 저장(컴파일된 코드)
npx babel test.js -d ./work
-> work폴더에 test.js로 새로 만들어준다.

spread.js

const a = ['피카츄', '라이츄', '파이리'];
const b = ['아구몬', '파피몬', '피요몬'];

const c = [...a, ...b];
// [ '피카츄', '라이츄', '파이리', '아구몬', '파피몬', '피요몬' ]
// ES6버전 문법
console.log(c);

class Monster {
  constructor(id, name, type) {
    this.id = id;
    this.name = name;
    this.type = type;
  }
  getName() {
    return this.name;
  }
}
const test = new Monster(1, a[0], '전기');
console.log(test);
console.log(test.getName());

npx babel spread.js -d ./dist
dist 폴더에 spread.js파일 저장

'use strict';

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError('Cannot call a class as a function');
  }
}
function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ('value' in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}
function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  Object.defineProperty(Constructor, 'prototype', { writable: false });
  return Constructor;
}
var a = ['피카츄', '라이츄', '파이리'];
var b = ['아구몬', '파피몬', '피요몬'];
var c = [].concat(a, b);
// [ '피카츄', '라이츄', '파이리', '아구몬', '파피몬', '피요몬' ]
// ES6버전 문법
console.log(c);
var Monster = /*#__PURE__*/ (function () {
  function Monster(id, name, type) {
    _classCallCheck(this, Monster);
    this.id = id;
    this.name = name;
    this.type = type;
  }
  _createClass(Monster, [
    {
      key: 'getName',
      value: function getName() {
        return this.name;
      },
    },
  ]);
  return Monster;
})();
var test = new Monster(1, a[0], '전기');
console.log(test);
console.log(test.getName());

폴더 dist
: 목적코드 폴더 (배포용 파일이 담긴 폴더)

"코드를 '만드는'코드"
1. 남들이 보는 코드
2. 남들이 보지 못하는 코드

---

당시 수업시간에 배운내용을 여기에 같이 적었는데, 임시저장만 하고 정리해서 올린다는게 올리지 못했네..