2015년 ES6문법이 도입되면서 javascript에서도 모듈을 가지고 올 수 있는 import와 export가 생겼다. import를 할 때 아래와 같은 2가지의 방식이 있는데 1. import() 2. import ...from 이 친구들 똑같이 모듈을 import하지만 작동방식이 다르다. 오늘은 그 작동방식에 대해 정리해보려 한다.(간단히) import ...from의 작동방식 import하기전에 모듈들을 미리 로드 해놓고 import를 수행함 import.html import.js const temp = "temp입니다."; export { temp }; 결과 결과를 보면 temp에 모듈에서 export한 temp변수가 제대로 들어온 것을 확인할 수 있다. 그리고 눈 여겨봐야 할 점은 좌측의 소..

다음과 같은 코드(샘플)가 있다고 가정해보자. import.html import.js let initialized = true; export { initialized }; 코드만 보면 그냥 변수하나를 export하고 import해서 콘솔에 찍어주는 단순한 코드인데 근데 이런 상황에서 undefined가 뜨는 상황이 발생했다고 가정해보자. ( 가정이다. ) 분명 javascript는 동기적인 언어이기 때문에 import를 먼저 실행할 것이고 그 뒤에 console.log()가 실행이 될텐데.. 문제의 원인은 간단했다. 바로 import라는 키워드는 동적이 아니라, 내부적으로 비동기 프로세스를 탄다는 것이다. (이걸 모르고 있었음.. 당연히 동기인 줄 알았다.) 대충 그림으로 설명하면 이렇다. 실제 디버깅을..

작업 전.. html2canvas 및 jspdf 라이브러리에 대한 설명.. 우선 2개의 라이브러리를 대충 설명하면 html2canvas : DOM을 기반으로 하여 전체 또는 특정 영역의 스크린샷을 생성하는 라이브러리 jsPDF : javascript로 PDF를 생성해주는 라이브러리 대충 위와 같은 기능을 제공하는 라이브러리인 것만 인지하고 아래 그림을 보도록 하자. 우리가 작성한 HTML을 PDF로 변환하는 과정은 위와 같다. 보통 인쇄 기능을 구현하거나, PDF로 변환할 때 사용자가 원하는 엘리먼트를 잡고 body를 변경해주거나, 직접 파라메터로 HTML 엘리먼트를 넣어주는데 여기서는 HTML 엘리먼트를 우선 이미지로 변환한 뒤, PDF로 변환해준다. ( 물론 인쇄도 된다. ) 대충 이해 했으면 이제 ..

지금 프로젝트가 Vue기반의 프로젝트라, 각 기능들을 Vue 컴포넌트로 빼서 사용하고 있는데 이때 인쇄 기능을 만들어야 했다. 그런데 구현하는데 뭔가 잘 되지 않았다.. 발생문제와 원인 1. 발생문제와 작성코드 우선 발생한 문제는 아래와 같다. 작성코드 This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS. 인쇄 미리보기 Close 분명 웹화면상에는 텍스트가 제대로 들어가 있는데, 이상하게 인쇄 미리보기만 하면 해당 텍스트가 사라지는 문제였다. (근데 생각해보면 사라지는게 당연하긴 함..) 2. 문제가 발생한 원인 이건 Vue의..

웹에서 인쇄 기능을 구현하는 것은 간단하다. window객체에서 제공하는 print함수를 이용하면 DOM에 있는 내용을 그대로 가지고 인쇄 할 수 있다. 설명 window 객체에서 제공하는 print함수는 별개의 파라메터를 받지 않고, 현재 문서를 인쇄해주는 기능을 제공하는 함수이다. 즉, 사용자가 원하는 특정영역을 인쇄하기 위해서는 DOM을 조작 할 필요가 있다. 그러기 위해 자주 사용하는 방법은 아래와 같다. 1. print가 되기전에 document.body에 사용자가 원하는 영역의 element를 저장해준다. 2. print를 수행한다. 3. print가 수행되고 난후, document.body에 기존에 있던 element를 다시 저장해준다. 여기서 1번을 수행하지 않으면 특정영역이 아닌 문서의 ..

가끔 콜백함수가 뭔지 헷갈려 하는 사람이 많기도 하고, 나도 개발을 할때는 자주 쓰는데 설명하라고 하면 헷갈릴 때가 있어 정리해본다. 콜백(Callback) 함수란? 콜백 함수는 다른 함수에 인수로 전달된 다음 외부 함수 내에서 호출되어 일종의 루틴이나 작업을 완료하는 함수입니다. -MDN- 위는 MDN에서 설명하고 있는 콜백함수인데, 저 빨갛게 표시한 게 콜백함수의 전부이다. 요약하자면 정의 : 콜백함수란 함수에 파라메터로서 함수가 들어가는 것을 의미한다. 용도 : 콜백함수는 함수내에서 일종의 루틴이나 작업을 위해 사용된다. 이렇게만 보면 잘 이해가 되지 않지만, 알게 모르게 쓴 적이 많을 것이다. 샘플코드랑 실제 어떤 경우에 자주 쓰이는지 코드로 확인해보자. 콜백(Callback) 함수 샘플코드 샘플..