JAVASCRIPT (6) 썸네일형 리스트형 [Javascript] javascript 로 엑셀 다운로드 기능 추가하기 사용자에게 내역을 전달해주는 것은 대부분 엑셀을 사용합니다. 엑셀을 업로드 하거나 다운로드 기능을 제공해주는 라이브러리가 있는데, 바로SheetJS js-xlsx 입니다. Github : https://github.com/sheetjs/sheetjs js-xlsx 사용하기 설치 $ npm install xlsx $ bower install js-xlsx browser CDN 엑셀 파일 생성하기 const workSheetData = [['hello', 'test']]; const workSheet = XLSX.utils.aoa_to_sheet(workSheetData); workSheet['!autofilter'] = {ref : "A1:R11"}; const workBook = XLSX.utils.bo.. [Javascript] IE11 에서 SCRIPT10002 와 SCRIPT10009 콘솔 오류 발생하는 문제 해결 최근 Vue 프레임워크로 매니저 사이트를 개발 후 크롬과 사파리에서 테스트 진행 후 IE11 에서 최종 확인을 하였는데, 화면 자체가 뜨지 않는 문제가 발생하였습니다. 요소 검사를 띄워 확인해보니 다음과 같은 'SCRIPT1002' 오류가 발생하였습니다. 문법오류가 있으면 실행이 안되었어야 할텐데 크롬은 정상적으로 동작이 되고 있다는 것을 확인하였기에, 끊임없는 삽질만 반복하고 있었습니다. 그러던 중 babel targets 에 browserlists 에 "ie 11" 를 추가하려는데 babel config 가 없다는 것을 발견하였습니다. package.json 에는 babel 에 대한 library 가 import 되어있었다고 생각해서 고려를 안했는데 babelrc 파일이 존재하지 않아서 발생한 문제였.. [Javascript] Webpack ? Bundle ? Webpack ? bundle ? 프론트 작업을 하게되면 필요한 것 들이 여러가지 있습니다. 컴파일이나 트랜스포터 등 화면을 띄우기 위해서는 수많은 작업이 요구됩니다. 만약 이런것들을 수동으로 작업을 해야했다면, 웹 사이트 시장이 절대 이렇게 커질 수 없었을 것입니다. Angular 는 Typescript 를 지원하는데, 실행하기 위해서는 javascript 로 변환 후, 프로젝트가 의존하는 모듈들을 로드하는 HTML 파일의 script 태그를 작성해야합니다. 또한 분리되어 있는 Javascript 를 하나의 파일로 모아줘야하는데 이러한 작업을 수작업하게 된다면 수많은 실수와 시간과 노력이 발생할 것입니다. 이러한 편리성을 제공해준 대표적인 것이, Webpack 입니다. Angular, Vue 등 대표적.. [Javascript] 새로고침 시 알림팝업 띄우고, 뒤로가기 버튼 클릭 시 띄우지 않기 Javascript 사용자에게 입력을 받는 화면을 개발하던 중, 새로고침을 하게되면 작성 중인 데이터가 날라가 이용하는데 불편함을 겪는 이슈가 있었습니다. 이러한 문제를 해결하기 위해서는 새로고침에 대한 확인을 받는 것이 좋다고 생각했습니다. 브라우저 내에서 제공하는 메서드인 window.onbeforeunload 를 이용하여 쉽게 구현할 수 있습니다. 특정 문자열을 리턴하지 않으면 알림 팝업이 발생하지 않습니다. 기존에는 팝업내의 메시를 return 값에 넘겨줌으로써 수정할 수 있었지만 특정 취약점으로 인해 변경이 불가능해졌습니다. refresh 는 사실상 무의미한 데이터입니다. ""로 넘기셔도 문제없이 팝업이 발생합니다. MDN - Custom messages in onbeforeunload dial.. [Javascript] CrytptoJS 암호화 시 TypeError: Converting circular structure to JSON 나는 문제 해결 cryptoJS 는 Object 형태를 저장할 수 없고, String 형태만 가능하기 때문에 JSON 의 경우 JSON.stringify 를 사용하여 String 형태로 직렬화 후 사용가능합니다. cryptoJS 라이브러리를 사용하여 객체를 String 으로 직렬화하여 암호화 후 역직렬화하여 데이터에 저장 시 다음과 같은 오류가 발생합니다. 이와 같은 에러는 주로 직렬화나 역직렬화 시 내부에 타입이 맞지 않는 문제로 순환 참조 시 발생합니다. CryptoJS - npm 해결방안 CryptoJS.AES.encode(JSON.stringify(data), key) 로 데이터를 암호화 진행하면 console.log 에는 문제없이 출력되지만 저장 시 오류가 발생하는데, 마지막에 .toString() 을 추가해주.. [Javascript] sessionStorage 에 객체 저장하고 꺼내기 문제점 sessionStorage 는 기본적으로 key, value 형태의 문자열 값을 저장할 수 있도록 한다. 따라서 객체의 형태를 저장할 경우 String 형태로 "[Object, Object]" 가 저장되기 때문에 getItem 하여 사용할 수 없게된다. Web storage API - MDN 해결방안 따라서,객채형태를 value 로 저장하기 위해서는 String 으로 변환을 하거나, 별도의 prototype 을 정의해줘야한다. 객체형태를 String 으로 변환하여 사용하는 방법 // keyName 이라는 이름의 key 에 objectData 이름의 객체 데이터를 세션에 저장 sessionStorage.setItem(keyName, JSON.stringify(objectData)); // keyNa.. 이전 1 다음
