Jihan Kim laziel

ES6시대의 JavaScript

원문 : http://techlife.cookpad.com/entry/2015/02/02/094607

안녕하세요. 사원사업부의 마루야마@h13i32maru입니다. 최근의 Web 프론트엔드의 변화는 매우 격렬해서, 조금 눈을 땐 사이에 점점 새로운 것이 나오고 있더라구요. 그런 격렬한 변화중 하나가 ES6이라는 차세대 JavaScript의 사양입니다. 이 ES6는 현재 재정중으로 집필시점에서는 Draft Rev31이 공개되어있습니다.

JavaScript는 ECMAScript(ECMA262)라는 사양을 기반으로 구현되어있습니다. 현재 모던한 Web 브라우저는 ECMAScript 5.1th Edition을 기반으로 한 JavaScript실행 엔진을 탑재하고 있습니다. 그리고 다음 버전인 ECMAScript 6th Edition이 현재 재정중으로, 약칭으로 ES6이라는 명칭이 사용되고 있습니다.

	const genRandomStr = (length = 16) {
	let t = '';
	while (t.length < 16) {
	t = t + Math.random().toString(36).substr(2);
	}
	return t.substr(0, length);
	};

	#!/bin/bash

	# https://stackoverflow.com/a/23877974/3474615

	while [[ $EXT_PREFIX != "ioio" ]] # change 'ioio' to your desired prefix (can only use lowercase a-p)
	do
	rm key.pem manifest_key.txt extension_id.txt

	2>/dev/null openssl genrsa 2048 \| openssl pkcs8 -topk8 -nocrypt -out key.pem
	2>/dev/null openssl rsa -in key.pem -pubout -outform DER \| openssl base64 -A > manifest_key.txt

	// Usually I use this in my app's config file, in case I need to disable all cache from the app
	// Cache is from `js-cache`, something like `import Cache from 'js-cache';`
	const cacheable = true,
	cache = new Cache();

	// On request, return the cached version, if any
	axios.interceptors.request.use(request => {

	// Only cache GET requests
	if (request.method === 'get' && cacheable) {

	/*
	JPEG orientation transform
	See https://magnushoff.com/jpeg-orientation.html
	*/
	img[data-orientation="2"] {
	transform: rotateY(180deg);
	}

	img[data-orientation="3"] {
	transform: rotate(180deg);

	/** Extracted from https://gist.github.com/alexandrudima/bda598fbed179a581986b634cc94ab8d */

	/**
	* Returns the number in the set [0, 1].
	* - O => Darkest Black.
	* - 1 => Lightest white.
	* @see http://www.w3.org/TR/WCAG20/#relativeluminancedef
	*
	* @param {Object} color
	* @param {Number} color.r

	/**
	* Get image orientation from EXIF header
	*
	* Referenced:
	* - https://gist.github.com/nezed/d536ccdace84c6f2ef13da47a8fd6bdb
	* - https://gist.github.com/wonnage/9d2e73d9228f5a0b300d75babe2c3796
	* - https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image-meta.js
	*
	* @param {String} imageUrl
	* @return {Promise}

	var http = require('http')
	var fs = require('fs')
	var argv = require('optimist').argv

	var rxVideoID = /v=([\]\[!"#$%'()+,.\/:;<=>?@\^_`{\|}~-\w])/
	var link = argv._.toString()
	var videoID = link.match(rxVideoID)[1]

	http.get("http://www.youtube.com/get_video_info?video_id="+videoID, function(res) {
	var chunks = []

	(function () {
	const wrapper = document.querySelector(`#test`);
	const pos = {};

	const moveDrag = evt => {
	// const { scrollLeft, scrollTop } = document.scrollingElement;

	const o = {
	top: wrapper.offsetTop - (pos.clientY - evt.clientY),
	left: wrapper.offsetLeft - (pos.clientX - evt.clientX)

	/*
	* Water Canvas by Almer Thie (http://code.almeros.com).
	* Description: A realtime water ripple effect on an HTML5 canvas.
	* Copyright 2010 Almer Thie. All rights reserved.
	*
	* Example: http://code.almeros.com/code-examples/water-effect-canvas/
	* Tutorial: http://code.almeros.com/water-ripple-canvas-and-javascript
	*/