자바스크립트 썸네일형 리스트형 [javascript] 이미지 동적 로딩 Javascript을 이용한 간단한 이미지 동적 로딩을 다룬다. 동적로딩이라는 부분이 애매할 수 있는데, 이미지가 매우크거나 속도나 느린 네트워크에서는 이미지가 바로 보이지 않는다. 일부만 천천히 로딩되거나 중간에 로딩이 실패하면서 이미지가 제대로 보이지 않는다. 이럴 경우 이미지가 제대로 로딩이 완료되면 표시되면 화면에 표시되고 그렇지 않으면 표시되지 않게 할 수 있다. 이를 응용하면 이미지 로딩 중을 기본으로 화면에 표시하고 로딩되면 표시하도록 만들수 있다. 그럼 간단하게 만들 수 있는 방법을 알아보자. 작성자: http://ospace.tistory.com/ (ospace114@empal.com) 단순 이미지 로딩 가장 일반적인 이미지를 로딩하는 예제이다. 이미지 태그를 사용한 간단한 예제이다. 위.. 더보기 [jquery] multiselect 플러그인 제작하기 들어가기 jQuery로 플러기인을 만들었던 그 경험을 공유하려고 글을 작성하였다. 만들려는 UI 컴포넌트는 multiselect로 select 컨트롤에 체크박스를 추가하여 여러 값을 선택할 수 있는 select이다. 물론 기능적으로는 문제는 없지만 플러그인을 작성하기 위해 매우 간단하게 작성하였으므로 실제로 사용하다보면 수정이 많이 필요하다. 그렇기에 실제 multiselect은 다른 플러그인을 사용하고 여기 multiselect은 간단한 플러그인 제작을 위해서만 참고하기 바란다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ Multiselect 요구사항 Multiselect은 여러 체크박스로 동시에 여러 항목을 선택하는 컨트롤이다. 여기서는 이런 체크 .. 더보기 [jquery] multiselect 플러그인 소개 들어가기 jQuery 기반의 multiselect 컨트롤러 컴포넌트이다. jQuery 플러그인 형태로 구현되었다. 최대한 기존 select의 기능과 인터페이스를 그대로 지원했고, 좀더 확장된 기능을 추가했다. select을 단순하게 사용했다면 별다른 변경없이 그대로 적용할 수 있다. 작업한 플러그인은 jQuery 플러인 제작을 위한 연습용으로 만들어서 기능적으로 부족한 부분이 많다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ Multiselect 플러그인 소개 기존에 select 태그를 사용한 폼 컴포넌트는 많이 사용되는 기능 중에 하나이다. 그러나 기능이 너무 단순하고 여러 요소를 선택하거나 값을 선택하는 명령이나 선택된 값을 추출하는 처리가 쉽지 않.. 더보기 [javascript] Javascript에서 MD5 사용 들어가기 Javascript에서 MD5 라이브러리들을 간단하게 살펴보고 테스트를 해보았다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 기존 문제점 기존에 MD5을 이용해 해시값을 생성하는데 있어서 이슈가 있다. SparkMD5 성능 이슈 기존에 SparkMD5 라이브러리를 사용해 MD5 해시값을 생성하고 있었다. 잘 사용하고 있었는데 문제점이 파일 크기가 커지만 시간이 오래걸린다. 파일 크기가 4MB와 16MB인 경우 각각 0.58초와 2초가 걸린다. 파일 개수가 많아지면 치명적이게 된다. IE11 문제점 더 큰 문제는 IE11에서는 Chrome에서 파일 읽어 오는 부분이 다르다. IE11에서는 readAsBinaryString()이 지원하지 않는다. .. 더보기 [Javascript] Javascript의 prototype에 대한 고찰 들어가기 Javascript는 웹환경에서 핵심 기술로 이미 잘 알려진 프로그래밍 언어이다. javascript는 일급 함수을 가진 가벼운 인터프리터이다. javascript는 prototype 기반이고, 다중 패러다임, 싱글 쓰레드, 동적 언어이며 객체지향, 명령형, 선언형 스타일을 지원한다. 대부분은 javascirpt을 스크립트 언어로 이벤트 기반으로 객체지향 언어처럼 사용하고 있다. 여기서 prototype 기반이라는 의미를 다시 생각볼려고 한다. 물론 다양한 패러다임이 있기 때문에 다른 형태로 비슷하게 작성할 수 있다. 이글의 목적은 javascript에서 prototype에 대해 생각해보는 기회를 가져볼려고 한다. 작성자: ospace114@empal.com, http://ospace.tisto.. 더보기 [javascript] 문자열 키로 객체에 속성 존재 여부 확인하기 들어가기 객체 내에 특정 속성을 같은 값는 있는지 확인이 필요할 때가 있다. 속성을 지칭하는 키 길이 긴 경우에 확인하기 쉽지 않다. 예를 들어 "obj.data[1].item"이란 형태로 되어 있는 경우이다. 여기서는 해당 키가 문자열로 입력되고 특정 객체에서 문자열로 준 키에 해당하는 속성이 있는지 확인하는 방법을 소개하려고 한다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 확인하는 방법 문자열로 된 키로 객체에 속성이 있는지 확인하는 방법이다. 예를 들어 다음과 같은 문자열 키들이다. 'info.name' 'info["name"]' 'data[0].item.value' 'data[0]["item"].. 더보기 [javascript] 객체 변경 감지 들어기기 객체가 변경되었을때 특정 작업을 하는 경우가 의외로 많다. 객체의 변경 감지는 두가지 방법이 있다. 하나는 defineProperty이고 다른 하나는 Proxy이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 샘플객체 먼저 아래 객체가 있다고 하자. let obj = { id: 1, name: 'foo', info: { type: 'object' } };방법1: DefineProperty 먼저 defineProperty()를 사용해보자. defineProperty()에서 정적으로 value을 할당해서 사용하는 방법과 get과 set을 정의해서 사용하는 방법으로 나눌 수 있다. 여기에서는 value을 사용한 방법이 아.. 더보기 [Javascript] Worker와 Notification 들어가기 Worker은 javascript에서 백그라운드로 돌아가는 프로세스같은 역활을 한다. Worker 객체를 만들어서 사용하며 백그라운드로 실행될 자바스크립트를 별도로 작성해야 한다. 그리고 Worker 객체와는 메시지를 통해서 데이터를 주고 받을 수 있다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 화면 간단하게 입력받을 화면을 작성한다. Send Log: Worker Log 출력을 할 함수를 작성한다. function log(msg) { var span = document.createElement('div'); span.innerText = msg; logger.appendChild(span); } Worker 객체를 생성해보자... 더보기 이전 1 다음
