What should I do?

음... 이 글을 끝까지 읽는 것을 추천한다. UTF-8로 처리되지않는 btoa 함수 javascript에서 base64 인코딩을 하려고 하던 중 좀 어의가 없는 상황을 만났다. 어찌보면 틀렸다고도 할 수 있고, 맞다고도 할 수 있지만... 문제의 발생은 한글은 처리가 안된다는 것이다. 한글을 입력할 경우 다음과 같은 오류[에러]를 console log창에 서 확인 할 수 있다. let a = 'abcd'; let b = '갓댕치'; console.log( btoa( a ) ); // [YWJjZA==] // 정상 console.log( btoa( b ) ); // < ERROR // 불여우 : Uncaught DOMException: String contains an invalid character /..

이제 화면 내부만이 아닌 화면의 근처에 있는 이미지를 미리 로드하는 코드를 추가하도록 해보자. 트래픽과 시스템리소스는 조금 더 먹겠지만, 사용자에게 가장 깔끔하게 보여지는 것이 더 중요할 것이다. 이왕하는 김에 다른 내용도 추가한다. 할 일 1. 스크롤시 화면근처에 있는 이미지를 로드한다. 2. 이미지가 로드되면 화면 내부(화면에 조금이라도 겹친다면)일 경우 fade-in처리를 하지만, 화면 바깥이라면 그냥 그린다. 3. (추가로) 기본 이미지를 미리 깔아 놓고, 로드된 이미지를 위에 덮어 그리기를 한다.(로딩중 같은 이미지에 적용하면 좋을 듯하다) 어디까지 로드할 것인가? 필자가 테스트한 바로는 현재 보고있는 화면크기에서 위로 한화면, 아래로 한화면이 가장 적당한 듯 했다. 마우스로 스크롤하기도 하지만..

#1편에서 언급했듯이 img태그를 쓰지 못하는 경우가 있다. 특히 img태그를 쓰지 않고 이미지를 화면에 표시하는 방법을 쓰는 경우가 있다. 예를 들면 div태그에 background-image를 이용하여 표시하는 경우가 이에 해당한다. 당연히 이 div태그에는 loading속성은 존재하지 않기에(css도 없는 듯) Lazy-Loading은 javascript로 구현해 낼 수 밖에 없다. 이로인해 img태그의 loading속성은 무용지물이 되지만, 그래도 javascript로 만들면 제어가 가능하기에 오히려 장점도 많으니 이 방법을 이용해 보자. 시나리오는 다음과 같다. [사용자가 "스크롤"할 때마다~] 1. 페이지내의 "lazy"가 있는 모든 요소를 가지고 온다. 이 때 이 요소에는 data-imgsr..

이미지를 필요할 때만 로딩하는 방법이 있다. 브라우저는 HTML을 전송받으면 다음으로 이미지를 서버에 요청하게 되는 데, 이 때 HTML파일이 이미지가 100개 있다면, 브라우저는 100개를 모두 서버에 요청하게 된다. 하지만 이 100개의 이미지를 사용자가 다 볼일은 없다. 물론 다 볼 수도 있지만, 보이지 않는 이미지도 있을 것이고, 페이지가 길면 길수록 사용자가 보지 않는 이미지는 더 많아 질 것이다. 이미지의 전송량을 줄이는 것은 서버의 부담을 줄이고, 네트워크 전송량을 줄이는 데 아주 효과적이다. 실제 긴 화면상의 이미지중에 70~80%는 사용자가 보지않고 다른 페이지로 이동을 하는 경우가 대부분이다. 이말은 네트워크사용량을 20% 수준으로 줄일 수 있다는 말이 되고, 서버도 쓸데없이 자원을 허..

javascript로 데이터를 가공한 후 다운로드를 받아야 하는 경우가 있다. 서버를 통해서 다운로드 받으면 대부분 간단히 해결이 되지만, 네트웍사용량을 줄이고 싶다든지, 이미 브라우저가 가지고 있는 내용을 다시 다운 받을 필요가 없다는 생각이 들면, 바로 다운로드하는 것이 가장 좋은 방법일 것이다.(뭐.. 솔직히 개발하는 시간 생각하면 그냥 서버에서 가공해서 받는 게, 젤 좋기는 하다..) 다운로드하는 코드 브라우저가 다운로드를 실행하게 하려면 다음과 같은 방법을 쓰면 된다. window.location = 'data:jpg/image;base64,'+ [base64로 인코딩된 내용]; 이 방법은 문제가 많은 데, 우리의 아름다운 IE는 11버전에서도 안되고, 되는 다른 브라우저도 이름을 정할 수가 없..

구글에 업로드한 파일을 공유를 하면, 공유한 파일에 URI를 받을 수 있지만, 이 URI는 공유한 파일을 직접 받을 수 있는 URI가 아니고 파일을 받을 수 있는 곳의 URI다. 따라서 다른 웹페이지에 그림을 첨부를 한다든가, 바로 다운로드 링크를 걸수는 없다. 그도 그럴것이 구글드라이브의 제공 목적이 파일호스팅을 위한 목적은 아니라는 이유이다. 하지만 신기하게도 구글에서는 이 바로다운받을 수 있는 링크를 만드는 사이트를 제공해 주고 있다. 처음이 사이트를 발견했을 때, 가짜 구글 사이트가 아닐까 생각했지만, 진짜. URL이 [.google.com]인 것으로 봐서, "구글에서 제공하는 구나..." 했지만, sites.google.com이 뭘 하는 곳인지 파악해보니, 웹페이지를 만드는 곳으로 판단된다. 따..

압축을 하는 코드는 다음과 같다. 전체 HTML코드를 올려 놓았다. 주석을 참고하면서 보면 그리 어렵지 않을 것이다. 압축할 파일 선택후 [download]버튼을 누르세요.. [download]버튼을 누른 후 한참 걸릴 수도 있습니다.. 압축할 파일 선택후 [download]버튼을 누르세요. 파일선택 창에서 여러개를 선택할 수 있습니다. [download]버튼을 누른 후 한참 걸릴 수도 있습니다..

사용자가 파일을 선택하면 해당파일의 내용을 보여주고 각 항목을 클릭시 다운로드하는 예제를 만들어 보도록 하겠다. 이 곳에 사용되는 파일들은 다음에 파일을 다운 받으면 된다. html코드 Zip파일 선택 : 파일을 선택하면 myOnCangedFile함수가 호출하도록 되어었다. zip_common.js 파일의 내용은 이 때까지 만들어둔 zip관련 함수를 묶어놓은 파일이다. // 로드된 zip instance에서 entryName에 해당하는 파일을 filename으로 다운로드하는 함수 function zip_download_content( zip, entryName, filename ) { zip.file( entryName ).async("base64").then( function ( base64Text )..

이제 Zip파일을 만들어 보도록하자. 새로운 Zip파일을 생성하기 위해 다음과 같이 빈 Instance를 하나 만든다. var zip = new JSZip(); Zip Instance에 entry를 만들려면 다음과 같이 한다. zip.file( "file.txt", base64data, {'base64':true}); "file.txt"는 Zip파일내부에서 사용할 파일이름이고 base64data는 이미 base64로 인코딩된 text다. base64를 이용하기 때문에 세번째 파라미터에 base64옵션을 켜주었다. 단순히 스트링데이터를 넣으려면 다음과 같이 할 수 있다. zip.file( "file.txt", text ); 현재 우리는 웹에서 사용을 해야 하기 때문에, 두가지를 고려할 수 있다. 첫번째는 ..

필자는 이 것을 웹서버없이 local에서 Zip파일을 읽어서 처리하려 했지만, 불행히도, 브라우저들이 보안이 강화되면서 사용자가 파일을 열어주기전에는 로컬에서 파일을 읽을 방법이 없었다. ajax는 local에서 [파일읽기]자체가 보안문제로 불가능해져서 어쩔 수 없이 웹서버를 돌릴 수 밖에 없었다. Apache와 같이 덩치가 큰 것을 깔긴 싫어서 뒤져보니, 개발언어들에서 테스트용으로 간이 웹서버를 돌릴 수 있는 기능들이 있었다. 만약 phyton이나 php 프로그래밍 모듈이 설치되어 있다면, 굳이 무거운 웹서버를 깔지 않고도 간단한 테스트는 수행할 수 있다. python # If Python version returned above is 3.X python3 -m http.server # On windo..

JSZip Instance만들기 압축을 풀기위해 이제 JSZip인스턴스를 만들어보자. 이 곳에는 zip파일의 내부정보가 저장되어 이 것을 통해 파일목록을 뽑아내거나 특정파일을 압축해제해야한다. 서버에서 zip파일을 가져와서 zip 인스턴스를 만들자. var zipInst = null; // 서버에서 'Zip파일 uri'을 땡겨온다. JSZipUtils.getBinaryContent( 'Zip파일 uri', function(err, data) // 서버에서 당겨온 파일내용이 data에 들어있게 된다. { if(err) { throw err; // or handle err } // data를 분석하여 Zip파일내의 파일정보를 추출할 것이다. JSZip.loadAsync( data ).then( // zip ..

웹브라우저에서 Zip파일을 다룰 일은 사실상 존재하기 어려운 문제지만, 어쩌다 보니, 웹브라우저에서 Zip파일을 풀 일이 생겨 버렸다. 뭐, 다른 방법이 있음에도 좀 욕심을 부린 부분이 있기는 하지만, 결론적으로는 현재작업에는 상당히 도움이 되는 방식이라 이 곳에 기록을 남기기로 한다. 제목 내용 Zip파일 구조와 준비작업 작업을 위해 필요한 library를 다운 받아 설치한다. 인스턴스 만들기 / 파일목록 뽑기 zip파일내의 목록을 뽑아보자 파일의 압축풀기 파일을 풀어서 이미지로 지정하거나 다운로드 간단한 웹서버 돌리기 Ajax를 써야하기 때문에 웹서버를 돌려야한다. 무거운 서버말고 간단히 돌리는 방법이 있다. 파일 압축하기 사용자가 올린파일(실제로올리지는 않고) zip파일을 만들어 다운로드 해보자 예..

간단히 보는 Zip파일 구조 Zip집파일은 단순히 압축된 정보를 그냥 배열을 해놓은 형태로 구성되어 있다. 하지만, 어떤파일이 있는 지에 대한 정보는 파일의 맨끝에 존재하기 때문에, 파일의 끝까지 읽기전에는 압축을 해제할 수가 없다. 위 그림에서 보이듯 파일의 끝에 정보가 있지만, 이 정보가 없어도 앞부분부터 차례대로 읽으면 압축을 풀 수도 있지만, 대부분의 Zip파일을 다루는 라이브러리들은 맨끝의 정보를 이용하여 파일정보를 처리하기 때문에 파일의 끝까지 읽어야 하는 점이 있다. Zip파일을 복구하는 프로그램은 맨끝의 정보없이 바로 처리하도록 만들어져 있다. 여기서는 복구하는 방식이 아닌 기존의 라이브러리를 사용할 것이기에 파일을 온전히 다 읽어야 처리할 수가 있다. 네트웍에서 Zip파일을 받아 처리해야..

Zip파일내의 파일 압축 풀기 실제 파일을 압축을 풀려면 다음과 같이 한다. zip.file( entryName ).async("base64").then( function ( base64Text ) // 압축이 다 풀리면 실행되는 함수 { // base64Text : 압축이 풀린 내용 } ); entryName은 zip파일내의 파일이름이며 결과가 base64형태로 나오게 된다. jszip라이브러리는 성능을 위해(javascript의 꾸진 성능을 보완하려고) thread를 만들어 압축을 푼다. 압축이 다 풀어지면 지정한 함수가 수행되고, 압축을 푼 데이터가 파라미터로 넘어오게 된다. 이 파라미터가 어떤 형태를 갖게 할지는 aync함수의 parameter로 지정할 수가 있다. 우리는 브라우저를 사용하기 때문..