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번을 수행하지 않으면 특정영역이 아닌 문서의 ..

오늘은 뷰 프로젝트에 TypeScript를 설치하고 적용해보자. ( 귀찮아서 프리티어랑 린트 적용한 프로젝트에서 진행.. ) 사전준비물을 VSCode와 Vue프로젝트이다. (나는 Vue3..) 기존에 만들어진 Vue프로젝트에 Typescript을 설치할 거다. 그럼 하나하나 따라가보자. TypeScript 및 관련 패키지 설치 1) Typescript 설치 vue add typescript 2) ts-loader 설치 npm i ts-loader ts-loader는 .ts로 작성 된 파일을 웹브라우저에서 읽을 수 있는 javascript코드로 변환해주는 작업을 해주고, 빌드시 타입검사를 해준다. 3) tsc-watch 설치 npm add tsc-watch tsc-watch는 .ts파일을 감시하고 있다가 ..