본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript74

Javascript를 활용하여 엑셀파일을 웹에서 테이블로(Javascript read excel file, sheetjs, javascript parsing excel) 엑셀파일의 내용을 읽어와서 표를 구현해야되는 경우가 종종 있다. 예전에는 이러한 요구사항을 해결하려면, 서버에서 엑셀파일을 읽어서 json 형식으로 리턴하고..리턴된 형식의 데이터를 가져와서 웹에서 일일이 그려주는 방식으로 처리 했었다. 그런데..엄청난 라이브러리가 있었다.. https://sheetjs.com/ SheetJS SheetJS Tools for Excel Spreadsheets sheetjs.com 해당 라이브러리는 거의 대부분의 브라우저에서 지원되는 라이브러리로, 파일 또는 서버에서 가져온 일반 blob형태의 엑셀 데이터를 파싱하여 테이블로 그려주는 기능을 가지고 있다. 일단 위 사이트를 통해서 라이브러리를 받자. 해당 사이트의 깃허브로 이동하면 받을 수 있다. https://github.. 2019. 10. 23.
(기본/기초) 자바스크립트 var, let, const (Javascript var) 자바스크립트에서 var 가 붙은 변수들은 대부분 어디서든 접근 가능하다. 물론 클로저형태는 빼고 말이다. 간혹..이러한 글로벌한 형태의 참조변수를 햇갈려서 아래 소스코드를 만나면 버그? 로 생각하는 경우가 있었다. for(var i = 0; i { console.log(num); },100); } 정말로 당연히 num 값이 0부터 9까지 나올줄 알았는데..결과는? 흑..이래서 기본에 충실해야 되는구나~ 라는 것을 정말 많이 느꼈다. 저기 저 setTimeout이라는 함수가 시간을 주고 num을 바라보고 있을때는...이미 반복문 for에 의해서 "참조" 하고 있는 i값이 전부 증가 해 버렸기 때문에 발생하는 현상이다. 반복문이 0부터 1.. 2019. 10. 4.
(기본/기초) Javascript 클로저, Javascript closure, 자바스크립트 클로저 웹 개발을 공부하면서 사실 기본을 처음부터 익히지 않고 무작정 달려들었던 것 같다. 원리와 기본 개념이 없어도 쉽다고 생각한 것이 자바스크립트였는데...막상 몇몇 기본적인 현상과 마주치고 나니.. "이건 버그야!" 라고 생각하는 경우도 종종 있었다. 아무튼, 클로저라는 개념을 모르고 사용한 코드가 아래처럼 종종 있었다. function hi(name) { var _name = '안녕! '; //클로저~ return function() { console.log(_name + ', ' + name); }; } var mm = new hi('world'); mm(); 위 경우를 살펴보면 _name으로 선언한 변수는 앞에 var가 붙었음에도 불구하고 글로벌하게 사용되지 않는 것을 볼 수 있다. 즉, 내가 무슨짓.. 2019. 10. 4.
엣지에서 IP주소가 파란색 및 줄로 나오는 현상(edge ip auto underline, x-ms-format-detection ) 네네. 우리의 마이크로소프트의 브라우저가 저런 황당한(?) 기능을 부여할 때가 있습니다. 즉, a테그없이 그냥 단순히 ip 만 들어갔을 뿐인데 저런 현상을 보여주곤 합니다. 이를 해결하기 위해서는 x-ms-format-detection을 메타테그에 설정하던지 아니면 해당 엘리먼트의 속성에 x-ms-format-detection 추가하고 none값을 주면 됩니다. 1. 속성에 주는 방법 111.222.111.222 2. 메타테그에 주는 방법 111.222.111.222 끝~ 2019. 9. 20.
Javascript 배열 정렬 (Array Sort) var array = [ {random_type4:'B', random_type5:'D', daying:'2019-07-01 01:51', count:2}, {random_type4:'B', random_type5:'D', daying:'2019-07-02 01:51', count:5}, {random_type4:'B', random_type5:'D', daying:'2019-07-01 00:51', count:1}, {random_type4:'B', random_type5:'D', daying:'2019-07-01 03:51', count:4}, {random_type4:'B', random_type5:'D', daying:'2019-07-01 02:51', count:3} ]; array.sort(f.. 2019. 7. 18.
Parcel 웹 어플리케이션 번들러 타입스크립트나 javascript로 잘 짜여진 코드를 webpack으로 압축해서 잘 쓰다보면 require 관련된 오류나 import 때문에 골치아파지는 경우가 있다. 익스플로러에서 자주 만나게 되는 것 같다.. 또한 일일이 import한 내용을 옮기거나 포함시키려면 어려운 경우가 종종 있는데.. parcel 이라는 번들러는 이러한 문제를 간단하게 해결하여 준다. 대상 파일에 명령어를 통해 buiild하게되면 간단하게 파일 1개로 떨구어 준다. https://parceljs.org/ Parcel Blazing fast, zero configuration web application bundler parceljs.org 설치방법 npm install -g parcel-bundler 사용 parcel 대상 .. 2019. 7. 16.

티스토리툴바