본문 바로가기

텍스트 하이라이트 (text highlight) Mark.js 예제 필요해서 만들려고 생각하다가 분명히 있을거야 라고 찾아보면 항상 있죠 ㅋㅋㅋㅋ 최근에 검색한 결과 중에서 검색어를 하이라이트해서 보여주고 싶다는 생각이 들었고 찾아보니 mark.js 라는 라이브러리가 있더라고요. 사용도 간단하고 가볍고 해서 선택했습니다. 간단한 사용 예제 하나 가지고 왔어요. .... 위와 같은 코드로 mark.js 를 간단하게 적용할 수 있습니다. 코드를 간단히 살펴보면 aa_table에 존재하는 test라는 글자를 test로 변경해줍니다. 따라서 test는 table_highlight css 적용을 받게 되고 배경이 노란색으로 표시되죠. mark.js 홈페이지에 가보시면 더 많은 예제, 사용방법이 나와있습니다. mark.js 홈페이지 바로가기 : https://markjs.io/ 더보기
자바스크립트 이전 페이지로 돌아가기 javascript 에서 이전 페이지 정보는 document.referrer 를 찾아보시면 됩니다. console.log(document.referrer); document.referrer로 redirect 시켜도 될 것 같긴한데 아래와 같은 코드로 이전 페이지로 갈 수 있습니다. history.go(-1); 더보기
javascript replace (with regex) 자바스크립트에서 replace는 제일 처음것만 해준다고 합니다. 그래서 regex로 replace를 많이 사용한다고 합니다. 결론은 귀찮은 regex를 해야 한다. 라는 것인데. 생각해보면 내가 싫어서 제대로 공부하지 않은 regex라고 마냥 뒤로 미뤄두는 것도 아닌 것 같아 사용할 수 있을 때 사용해보려고 노력중입니다. 일단 아래 사이트에서 regex 로 매칭되는 것들을 확인할 수 있습니다. 테스트 하는 거죠. https://www.regexpal.com/ Regex Tester - Javascript, PCRE, PHP RegexPal requires a modern browser. Please update your browser to the latest version and try again. ww.. 더보기
datatables create example/sample Datatables Create Example datatables 라이브러리를 사용해서 테이블을 생성하는 예시입니다. 라이브러리 추가, trunc 함수 추가 등이 필요하지만 대충 코드 보시면 아실 것 같아서 자세한 내용은 추가하지 않았습니다. var table = $('#targetTable').DataTable({ data: source_data, dom: 'Bfrtip', buttons: [{ extend: 'excelHtml5', text: 'Excel Download', className: 'btn btn-black export-button' } ], columns: [{ title: "description" }, { title: "status" } ], "columnDefs": [{ "width.. 더보기
html select selection for test / jQuery, trigger select를 선택하기 위해서는 아래와 같은 코드로 가능합니다. jQuery를 통해서 trigger('change') 하고 싶은 select의 element를 알아냅니다. trigger('change') 하는데 value가 option_3 인 것을 선택하도록 하는 것입니다. 하나 두울 세엣 네엣 다섯 말로 설명하는 것보다 코드를 보는게 훨씬 이해가 빠른 경우가 많죠. 위에 적어둔 설명글보다 코드를 보시는 것을 추천합니다. 개발 과정에서 어떤 선택들을 잔뜩하고 그 결과를 봐야할 때 테스트를 해야 하는 것이 많은데 전부 다 눌러보기 힘들 때 이벤트에 따라서 다른 것을 선택하는 코드를 작성해야 할 때 등등 에서 사용할 수 있겠습니다. 더보기
자바스크립트 jQuery input enter event javascript로 input에서 엔터키를 눌렀을 때 반응하는 이벤트는 아래와 같이 구현할 수 있습니다. $("#input_id").keyup(function(event) { if (event.keyCode === 13) { console.log('enter! enter!'); } }); input class 던지 id로 jQuery에서 찾고 keyup이라는 함수를 통해서 keyCode의 값이 13이면 처리하라는 코드가 되겠습니다. keyCode 값은 ASCII 코드 값인데요. https://keycode.info/ 사이트에서 직접 키를 눌러서 어떤 keyCode값이 나오는지 확인할 수 있습니다. 더보기
datatables redraw 자바스크립트로 테이블 그리실 때 datatables (https://datatables.net/) 많이 사용하실 것 같아요. 저도 사용하고 있는데 redraw 하는 방법 간단하게 정리해봅니다. 저는 destroy하고 다시 그리는 방법을 사용하고 있는데요. data만 변경하는 것도 있겠죠? var table; //테이블을 생성해서 저장해둘 변수 table = $('#targetTableDiv').DataTable({ ..... }); //이런식으로 DataTable..로 생성할 때 return되는 것을 table에 저장해둡니다. table.destroy(); //table을 destroy 하시고 다시 그립니다. table = $('#targetTableDiv').DataTable({ ..... }); da.. 더보기
jQuery로 select 된 값 가지고 오기 jQuery를 사용해서 select에서 선택된 값을 가지고 오는 방법은 아래와 같습니다. $('.target-selection').click(function(){ var option_value = $(".target-selection option:selected").val(); var option_text = $(".target-selection option:selected").text(); console.log(option_value ); console.log(option_text ); }); target-selection 이라는 클래스를 가진 select 에서 선택이 이루어지면 option:selected를 활용해서 value값은 val() 로 가지고 오고요. text 값은 text()로 가지고 옵니.. 더보기
javascript - select - focus and change 아래와 같이 생긴 select가 있다고 가정하고요. ... 이 select가 focus, change 될 때 일어나는 이벤트는 아래와 같은 코드로 처리할 수 있습니다. $('.aaa-select').on('focus', function () { console.log('focus event'); }).change(function() { console.log('change event'); }); 이런식의 시나리오를 처리할 수 있을 것 같아요. focus 되면 현재 선택되어 있는 값을 저장합니다. change가 일어나면 어떤 프로세스를 처리하는데 변경에 정상적으로 이루어지면 상관없지만 어떤 이유에서 변경이 이뤄지지 않아야 하면 focus에서 저장된 값을 사용해서 원래대로 돌려버리는 것이죠. 그리고 에러 메세지.. 더보기
자바스크립트 여러줄을 하나의 문자열로 만들기 자바스크립트에서 여러 줄을 하나의 문자열을 표현하는 방법은 여러 가지가 있지만 문자열 사이사이에 변수가 들어가는 것이 아니라면 아래와 같이 `(숫자 1키 왼쪽에 있는 backtick)을 사용하는 방법이 있습니다. 여러 줄을 하나의 문자열로 표현하기 위해서 이렇게 사용 할 수 있습니다. `문자열문자열문자열` 비슷하게 생겨서 혼동될까바 한 번 더 강조하면 apostrophe가 아니라 backtick을 사용하는거에요 !! 문제는 backtick으로 지정한 문자열이 gulp-uglify를 통과하면서 에러가 발생하더라고요. 인터넷에 찾아보니 gulp-babel을 활용하면 된다고 해서 해보니 성공 !! 대략 아래 처럼 사용하면 되더라고요. uglify 전에 babel로 es2015로 변경해주면 해결 !! gulp-.. 더보기
Autocomplete Library 추천 1. 깃허브에서 Autocomplete를 검색해보면 아래와 같습니다. 자바스크립트만 1834개가 검색되요. ㅠㅠㅠㅠㅠ물론 중복도 있겠지만 그래도 넘 많아요. 2. 추천은 !! Autocomplete 라이브러리가 너무 많아서 어떤 걸 사용해야 할지 모르겠다면 !! 저는 awesomplete를 추천해드리고 싶어요.homepage : https://leaverou.github.io/awesomplete/이유는 가볍고, 핵심적인 기능만 담고 있고, 디펜던시도 없기 때문입니다. 3. 물론 제가 모든 Autocomplete 라이브러리를 사용해본건 아니라서 이게 짱이에요는 아닙니다만.사용해보니깐 만족해요 !! 4. 팁 홈페이지에 잘 나와 있어서 그것만 잘 보면 됩니다만!! + input 박스를 클릭했을 때 dropd.. 더보기
atom installed packages / themes 제가 사용하고 있는 atom packages를 작성해두려고 합니다. 언제 또 개발 환경이 변경되고 atom을 다시 설치해야 하는 상황이 발생할지 몰라서요. atom-beautify 는 여러 파일의 indent를 맞추는데 사용하고 있어요. atom-ternjs 는 아마도 javascript autocomplete 를 위해서 사용하고요. autoclose-html 은 html 작성할 때 close tag를 제공하기 때문에 쓰고 있어요. autocomplete-python 은 이름 그대로 입니다 :) file-icons 는 atom의 밋밋한 파일 표현을 진짜 이쁘게 바꿔줘요. 꽤 맘에 들어요. multi-cursor 는 여러 줄을 한 번에 편집할 수 있어서 좋아요. highlight-selected 는 선택한.. 더보기
Javascript 모듈화 예제 (기록용) 예전에 포스팅한 아래 글에 이어서 하나 더 추가해봅니다. 2016/07/16 - [Bootstrap&JS] - Javascript 모듈화 (기록용) 위 포스팅보다 좀 더 친절하게 작성했습니다.일단은 기록용이고 틀린 부분은 지적해주세요. github에도 추가했습니다. https://github.com/motobyus/moto // ===============================================// write : moto// update : 2016.10.30.// =============================================== var OBJSAMPLE = function() { // private variables ---------------------------.. 더보기
typeahead list open !! 정말 기록용으로 간단하게만 typeahead로 select를 구현했을 때 어떤 액션에 따라 리스트를 보여지게 하고 싶을 때 그리고 사용했었던 bloodhound 함수 var bloodhound_create = function(target_id, inputList, initialize_value) { $(target_id).typeahead('destroy'); var idata = new Bloodhound({ initialize: initialize_value, datumTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace, local: inputList }); idata.initializ.. 더보기
한국에서 지난 1년간 프로그래밍 언어별 관심도 변화 1. 구글 트렌드 검색이 좀 더 좋아졌네요 :) 2. C++은 C로 인식하는 듯 ㅠ 3. 앞으로 블로그 포스팅을 어디에 집중할까 싶어서 알아봤어요. 4. 한국은 역시 자바인가 !!! 5. 개강하면 관심도 그래프가 다들 좀 오르지 않을까? 1. 오!!! Swift 2. 그래도 자바가 !!! 3. 남들이 많이 하니깐 좀 멀리했는데 이제는 남들이 하니깐 가까이 하고 싶은. 4. 그냥 알아만 봤어요 :) 더보기
Javascript 모듈화 (기록용) Javascript 모듈화 방법이 참 많이 있는 것 같다. 여기에는 제가 자주 사용하는 모듈화 방법에 대해서 기록용으로 남겨둡니다. var AAA = function() { var private_value; var processing_func = function(args...) { // private private_value = 0; }; var get_private_value = function(args...) { // privatereturn private_value; }; return { status_check : function (args...) { // public }, get_status : function (args...) { // public get_private_value(); } } }.. 더보기