javascript 썸네일형 리스트형 [javascript] 이미지 동적 로딩 Javascript을 이용한 간단한 이미지 동적 로딩을 다룬다. 동적로딩이라는 부분이 애매할 수 있는데, 이미지가 매우크거나 속도나 느린 네트워크에서는 이미지가 바로 보이지 않는다. 일부만 천천히 로딩되거나 중간에 로딩이 실패하면서 이미지가 제대로 보이지 않는다. 이럴 경우 이미지가 제대로 로딩이 완료되면 표시되면 화면에 표시되고 그렇지 않으면 표시되지 않게 할 수 있다. 이를 응용하면 이미지 로딩 중을 기본으로 화면에 표시하고 로딩되면 표시하도록 만들수 있다. 그럼 간단하게 만들 수 있는 방법을 알아보자. 작성자: http://ospace.tistory.com/ (ospace114@empal.com) 단순 이미지 로딩 가장 일반적인 이미지를 로딩하는 예제이다. 이미지 태그를 사용한 간단한 예제이다. 위.. 더보기 [HTML] crossorigin 속성 들어가기 최근 작성했던 글을 보다가 특정 이미지가 보이지 않는 상황을 인지했다. 원인을 확인해보니 Chrome에서 CROS 정책으로 인해서 이미지 처리 중에 “No 'Access-Control-Allow-Origin' header is present on the requested resource.” 오류가 발생했다. 하나씩 살펴보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ crossorigin crossorigin 속성은 audio, img, link, script, video 태그에 있는 속성이다. 이는 각 요소가 교차출처 리소스 공유(Cross-Origin Resource Sharing, CORS) 요청하는 방식을 지정할 수 있다. 설정할 수 있.. 더보기 [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] JSONP 란? 들어가기JSONP(JSON with Padding)는 크로스 도메인(cross domain)으로 인한 접근 제한 문제를 회피하기 위한 방법이다. 크로스-도메인 정책으로 다른 서버에 Ajax를 요청할 수 없다. JSONP을 간단히 설명하면 클로스-도메인을 우회하여 요청하는 방법으로 ajax를 사용하지 않고 script 태그를 사용한 요청방법이다. 하나씩 살펴보자.작성자: ospace114@empal.com, http://ospace.tistory.com/일반적인 Ajax 요청 처리일반적인 Ajax 요청은 다음 처럼 실행이 가능하다.fetch('http://192.168.1.2:8080/user/1') .then(res => res.json()) .then(json => { // jso.. 더보기 [jquery] jQuery 플러그인 제작을 위한 기초 들어가기 jQuery는 한때 정말 많이 사용했던 라이브러리이다. reack나 vue.js가 나오면서 사용이 뜸해지기는 했지만, 아직도 사용되는 툴이다. jQuery는 플러그인 확장 기능을 제공하고 있다. 이를 이용한 여러 추가 기능이나 컨포넌트 제작에 많이 사용되었다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 기존에 사용하는 방식 jQuery를 사용해서 DOM 객체을 찾고 스타일 변경할 경우 아래처럼 많이 사용한다. $('a').css('color', 'red');모든 링크 태그에 대해서 color라는 스타일에 red 값을 할당한다. 이전에는 모든 링크 테그를 찾고 루프를 통해 하나씩 스타일을 적용해야했지만,.. 더보기 [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.. 더보기 이전 1 2 3 다음
