const a = 1; const b = 2; export { a }; export const c = 3; export default b; 위과 같이 export 했다면아래와 같이 import 할 수 있다. import d, { a, c as e } from './Example'; console.log(a, d, e); // 1, 2, 3export 할 때 {} 와 const 로 설정했다면import 할 때 {} 로 받아서 사용할 수 있다.또한 import 할 때 as 변수명을 변경할 수 있다. export 할 때 default 로 설정했다면import 할 때 {} 없이 변수를 임의로 정해서 받을 수 있다.(위에서 import d 처럼) 참고https://www.zerocho.com/category/Ec..

동일한 기능을 수행하지만 명령어가 달라서 헷갈릴 때가 많다. npm install === yarn npm install taco --save === yarn add taco 위와 같이 일부 정리해 놓은 사이트가 있다.아래의 링크를 참고https://shift.infinite.red/npm-vs-yarn-cheat-sheet-8755b092e5cc 아래의 또 다른 링크에서 Yarn vs npm: CLI Differences 부분을 참고하는 것도 좋다.https://www.sitepoint.com/yarn-vs-npm/ Yarn 공식 문서

속 싶은 자바스크립트 7장 : 자바스크립트 성능과 사용자 경험 개선 script위치와 lazyloadscript 태그의 위치는 body 태그 아래쪽에 위치해야한다. 아니면 lazyload 방식을 이용하여 html과 css가 먼저 load되어 화면이 렌더링 된 후 script를 호출하도록 해야 한다. (function () { var previousOnload; if (window.addEventListener) { window.addEventListener("load", lazyload); } else if (window.attachEvent) { window.attachEvent("onload", lazyload); } else if (window.onload) { previousOnload = win..

속 깊은 자바스크립트의 6장 : 브라우저 환경에서의 자바스크립트를 요약 단일스레드setTimeout() 시간을 0 으로 설정해 놓는다면 어떤 일이 벌어질까? 직관적으로 바로 시작된다고 생각했다. 물론 맞는 얘기일수도 있다. 하지만 정확히 실행 시간이 아닌 실행 큐에 들어가는 시간을 이야기 한다. 자바스크립트는 단일스레드다. 일하는 놈이 한 놈 밖에 없다. 한 놈이 모든 실행을 처리한다. 이 놈이 일 할 실행 순서를 담아 놓는 큐가 있는데 setTimeout()의 시간설정은 큐에 들어가는 시간을 설정하는 것이다. 만약 setTimeout(func, 0) 으로 실행될 함수 func가 큐에 들어갔는데 그보다 앞서 실행순서를 기다리고 있던 함수들이 있다고 한다면 함수들의 실행이 모두 끝난 후 func가 실행된다..

http://www.jaeminjo.com/post/107109578789/arrayprototypeslicecallarguments 위의 링크에 친절한 설명이 나와 있지만 부가 설명을 해본다. 이것을 이해하기 위해서는 call(), arguments를 이해해야 한다. call()은 상위 context를 변경하는 메서드이고arguments는 함수의 매개변수에 접근할 수 있는 속성이다. 먼저 위의 행위를 말로 설명하자면 이 코드가 존재하는 함수의 매개변수로 넘어온 값들을 array로 변환하겠다는 것이다.function func(a, b){} 에서 a와 b를 arguments[0]과 arguments[1]로 접근가능하다.하지만 여기서 arguments는 array가 아니며 object임을 알아야 한다.(참고..

패턴의 필요성직관은 주로 지난 경험에 기반을 둔다. 훌륭한 개발자는 다양한 경험을 통해서 상황에 맞는 기법을 적절히 구사한다. // 시간에 따라 진화한 코드 ix=0; the_test: if (ix >- myArray.length) { goto then_end; } doSomething(myArray[ix]); ix = ix + 1; goto the_test; // 자바스크립트에 goto 문이 있다고 치자. the_end: // 위 코드보다 개선된 코드 for (ix=0; ix -1 { alert(this.innerHTML); } }, true); }();이벤트 전파를 중단하고 싶다면 event.stopPropagation() 함수를 호출한다. 프락시 패턴하나의 객체가 프락시 역할을 수행하여 상황에 따라..