content.json

{"pages":[{"title":"about","text":"About DillyMember of EnyoJS javascript framework team. Writing Moonstone TV UI Library for webOS. Web front-end software engineer. Love HTML5, CSS3, ES6. About JaneShe is funny. About my dogShe’s name is ‘Honey’. Love Jane and Dilly. Always jump when feels good. No barking. Sleep a lot.","link":"/about/index.html"},{"title":"Categories","text":"","link":"/categories/index.html"},{"title":"Tags","text":"","link":"/tags/index.html"}],"posts":[{"title":"ES6의 7번째 타입 Symbol","text":"참고) http://hacks.mozilla.or.kr/2015/09/es6-in-depth-symbols/ 기존 JS는 다음과 같이 6가지 타입을 가지고 있었습니다. Undefined Null Boolean Number String Object Symbol은 7번째로 추가된 (문자열이나 객채가 아닌) 어떠한 값을 갖는 새로운 타입 입니다. 다음 코드는 Symbol이 활용될 수 있는 경우를 나타내는 예제 입니다. See the Pen dXAZqg by Kunmyon Choi (@KunmyonChoi) on CodePen. 예제 에서는 object 에 annotation 용도로 flag를 설정하고자 합니다. isMoving flag는 Symbol을 사용해 지정했고, isHaving flag는 일반적인 boolean property를 사용해 지정 했습니다. 결과를 비교해 보면 Object.keys() 에서 isMoving은 보이지 않지만 isHaving은 key로 나타납니다. 일반적으로 이렇게 property 삽입으로 변형된 array의 경우 Object.keys()나 for-in loop에 의도치 않게 key로 해석되어 나타나기 때문에 권장되는 방법이 아닙니다. Symbol은 이런 경우 key로 해석되지 않기 때문에 안전하게 사용이 가능합니다.","link":"/2016/08/18/ES6-7th-type-Symbol/"},{"title":"Easy Array Cloning","text":"React를 사용하다 보면 immutable 이라는 단어를 많이 보게 됩니다. pure function으로 previous state와 action으로 next state를 생성하는 과정에서 이전 상태의 일부 값을 변경하는 것이 아니라 완전히 새로운 객체를 생성해 내게 됩니다. ReactElement 코드를 보면 다음과 같은 구문을 볼 수 있는데, 이는 Array를 복사한 새로운 Clone array를 만들어 내는 역할을 합니다. var shadowChildren = props.children.slice(0); 이렇게 복사된 객체가 이전과 동일한지 아래와 같이 확인해 볼 수 있다. See the Pen Array clone by Kunmyon Choi (@KunmyonChoi) on CodePen.","link":"/2016/08/18/Easy-Array-Cloning/"},{"title":"export default에 대해","text":"http://www.2ality.com/2014/09/es6-modules-final.html 를 번역한 글입니다. ES6의 module 문법 표준에 따르면 export 는 2가지 종류가 있다. named exports (모듈 당 여러 개의 export)와 default exports (모듈 당 하나의 export)가 그것이다. named exports하나의 module 파일이라도 이 중 일부만 필요로 하는 경우가 있을 수 있다. 예를 들어 하나의 함수 혹은 하나의 클래스 만 사용하고 싶은 경우이다. 이런 때 es6 module 문법은 다음과 같은 형식으로 이를 가능하게 한다. 12345678910111213//------ lib.js ------export const sqrt = Math.sqrt;export function square(x) { return x * x;}export function diag(x, y) { return sqrt(square(x) + square(y));}//------ main.js ------import { square, diag } from 'lib';console.log(square(11)); // 121console.log(diag(4, 3)); // 5 또한 이런 형식도 가능하다. 1234//------ main.js ------import * as lib from 'lib';console.log(lib.square(11)); // 121console.log(lib.diag(4, 3)); // 5 default exportsnode 개발자는 변수 하나만 export 하는 등의 방식이 빈번히 사용되는데, front end 개발자의 경우는 constructor나 class를 export 하는 경우가 많다. 이런 경우 하나의 module이 하나의 export만 갖는 경우가 되는데 이런 때 사용할 수 있는 것이 default exports 이다. 123456789101112//------ myFunc.js ------export default function () { ... };//------ main1.js ------import myFunc from 'myFunc';myFunc();//------ MyClass.js ------export default class { ... };//------ main2.js ------import MyClass from 'MyClass';let inst = new MyClass(); es6에선 _가 default exports를 의미하며, each나 forEach는 named exports를 의미한다. 따라서 다음과 같이 default exports와 named exports를 동시에 얻는 방법도 가능하다. 123456789101112//------ underscore.js ------export default function (obj) { ...};export function each(obj, iterator, context) { ...}export { each as forEach };//------ main.js ------import _, { each } from 'underscore';...","link":"/2016/08/18/about-export-default/"},{"title":"Hello World","text":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new \"My New Post\" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment","link":"/2018/09/07/hello-world/"}],"tags":[{"name":"ES6","slug":"ES6","link":"/tags/ES6/"},{"name":"Standard","slug":"Standard","link":"/tags/Standard/"},{"name":"Tip","slug":"Tip","link":"/tags/Tip/"}],"categories":[{"name":"Javascript","slug":"Javascript","link":"/categories/Javascript/"}]}