3.구현/HTML5&Javascript 썸네일형 리스트형 [jquery] jQuery 플러그인 제작을 위한 기초 들어가기 jQuery는 한때 정말 많이 사용했던 라이브러리이다. reack나 vue.js가 나오면서 사용이 뜸해지기는 했지만, 아직도 사용되는 툴이다. jQuery는 플러그인 확장 기능을 제공하고 있다. 이를 이용한 여러 추가 기능이나 컨포넌트 제작에 많이 사용되었다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 기존에 사용하는 방식 jQuery를 사용해서 DOM 객체을 찾고 스타일 변경할 경우 아래처럼 많이 사용한다. $('a').css('color', 'red');모든 링크 태그에 대해서 color라는 스타일에 red 값을 할당한다. 이전에는 모든 링크 테그를 찾고 루프를 통해 하나씩 스타일을 적용해야했지만,.. 더보기 [vue2] Vuetiful Datatable 사용하기 들어가기 테이블 형태의 데이터 표현은 매우 많이 사용되는 UI이다. 이런 Data Table 종류의 컨트롤들은 데이터를 테이블 형태로 자주 출력하고 테이블 형태로 데이터를 수정할 때 많이 사용한다. 이전에 사용 중인 element UI 라이브러리 중에 Table 컴포넌트가 있었는데 단순 데이터 표현에는 적합하지만 편집 기능이 없었다. 그래서 대안으로 찾은게 Vuetiful 라이브러리에서 DataTable이다. 혹시나해서 Vuetify UI 라이브러리가 아니라 Vuetiful이다. Vuetiful은 Vuejs용 컴포넌트 라이브러리로서 Calendar, Chip, Datatable, Datetime-picker, Dynamic, Floating-Panel, Paginator, Panel, Tab-contro.. 더보기 [javascript] Map Service 사용 들어가기 웹 기반 지도 서비스 제공되는 플랫폼을 비교 분석해보았다. 대표적인 웹기반 지도 서비스를 제공하는 Google, Naver, Kakao 서비스들을 비교분석해보았다. 모바일 기반 맵을 다루지 않았고 일반적인 웹 기반 맵을 다루었다. 그외 다양한 맵 서비스와 라이브러리가 있지만 가장 전통적인 방식의 Javascript 라이브리러를 활용했다. 여기 작성된 내용은 2024/01/23 기준으로 확인했다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 사전작업 맵 서비스 사용하기 전에 사전에 해야할 작업이 있다. 키를 발급 받는 작업이 필요하다. Google Google Map을 사용하기 위해서는 API 키가 필요하다. Google Maps Platform에.. 더보기 [javascript] IndexedDB 라이브러리 소개 들어가기 HTML5에서 브라우저 환경에서 데이터를 관리하기 위한 다양한 저장소가 있다. Web Storage와 Web Database로 구분된다. Web Storage는 임시로 로컬 브라우저에 저장하기 위한 저장소이다. 이는 쿠키와는 다르게 서버로 전송 안되며 로컬에서만 사용한다. 종류로는 LocalStorage(만료일없음), SessionStorage(세션유지동안)가 있다. 이런 저장소는 브라우저 강력 새로고침 등에 의해서 제거될 수 있다. 이를 보완할 수 있는 저장소가 있는데 Web Database와 Indexed Database이다. Web Database는 큰 용량의 구조화된 데이터를 사용할 수 있고 Web Storage와는 다르게 큰 데이터를 관리할 수 있다. 처음에 Web SQL Databas.. 더보기 [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()이 지원하지 않는다. .. 더보기 [jquery] datatables에서 ajax활용한 검색 및 페이징 들어가기 jQuery를 사용할 때에 데이터를 테이블 형태로 표시할 때 많이 쓰는 테이블 컨트롤이다. 기능도 다양하고 커스터마이징도 가능하며 라이센스도 MIT라서 걱정없이 사용할 수 있다. 흔히 datatables를 데이터를 가져와서 사용하는 방식으로 많은 데이터를 표현하기 힘들다. datatables에서 내부적으로 ajax를 활용해 페이징 처리할 수 있는 기능이 있다. 한번 알아보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ HTML 구성 datatables을 사용했던 분이라면 이미 알고 있겠지만 jquery을 로딩해야 한다. option: serverSide 자동으로 테이블에서 필요한 조건 데이터를 생성해서 요청하는 기능이다. datatables의 .. 더보기 [javascript] Underscore 성능 들어가기 Unserscore는 함수형 프로그래밍을 지원하는 자바스크립트 라이브러리입니다. 성능을 좀더 향상하고 효율적으로 처리하기 위해서 많이 사용하고 있습니다. 성능에 대해 조금 다룰려고 합니다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 데이터 구조 사용할 데이터 구조는 다음과 같다. contents 배열이 있고, contents안에 다시 files 배열이 있다. 여기서 원하는 부분은 files 배열안에 있는 file_id를 배열 형태로 추출하고 싶다. Underscore로 추출 Underscore로 file_id를 추출할 수 있는 방법이 몇가지가 있다. 방법1 먼저 reduce(), union(), map()을 활용해보자. var a = _.red.. 더보기 [HTML5] tistory에서 카테고리 선택 팝업창 추가 들어가기 tistory에서 글이 많아지면서 원하는 글을 찾기위해 카테고리 별로 선택할 수 있는 기능이 필요했다. 현재 사용하는 스킨이 나쁘지는 않아 변경할 생각은 없었다. 그래서 카테고리 선택하는 팝업창을 만들기로 했다. 어떻게 만드는지 살펴보자. 이글은 HTML과 CSS에 대한 자세히 설명은 생략했다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 스킨 편집 하기 먼저 스킨 편집기로 이동해야 한다. 관리자 화면에서 [꾸미기 > 스킨편집] 버튼이 있다. 클릭하면 스킨편집 화면이 새로운 탭으로 열린다. 스킨편집 화면 오른쪽에 [html 편집] 버튼이 있다. [html 편집] 버튼을 클릭하면 팝업 경고 창이 뜨는데 자신이 수정하다가 문제가 생기면 알아서 해결(.. 더보기 이전 1 2 3 4 5 6 다음
