img lazy loading 적용방법 웹 사이트에 접속했을 때 해당 페이지에 있는 모든 이미지를 바로 다운 받는게 아니라 사용자가 스크롤을 이동함에 따라서 이미지를 불러오는 방법을 lazy loading 이라고 하는데요. 어떻게 하면 적용할 수 있는지 간단하게 정리해두려고요. 대부분의 브라우저에서 지원하지만 지원하지 않는 브라우저까지 lazy loading을 적용하려면 javascript 라이브러리를 활용하면 됩니다. 많이 쓰는게 https://github.com/aFarkas/lazysizes 라고 하고요. 저는 bower로 받아서 사용했습니다. cdn도 있을테니까 그거 사용하셔도 됩니다. 1. lazysizes 라이브러리 추가하기 2. img class에 lazyload 추가하기, src를 data-src로 변경하기 동적으로 이미지 엘리.. 더보기 selenium python - 에러 날 때 한 번 쯤 해보면 좋을 시도 selenium python - 에러 날 때 한 번 쯤 해보면 좋을 시도 에러의 종류에 따라서 달라지겠지만 xpath 혹은 name, class 등으로 elements를 찾아 클릭하는 것을 시도했을 때 에러가 난다면 2가지를 볼 것 같아요. 1 . modal이 띄워져 있어서 해당 elements를 찾았지만 클릭이 안된다. >> 요건 이전 포스팅에 작성해뒀는데 한 번 확인해보세요. modal을 display:none 시키면 됩니다. >> 2019/08/25 - selenium python - Other element would receive the click 2. element를 못찾는다. >> 코드가 실행될 때 selenium이 해당 페이지를 모두 로드하지 못하는 경우도 있는 것 같으니까 time.sle.. 더보기 selenium python - Other element would receive the click selenium python - Other element would receive the click selenium으로 어떤 버튼을 클릭하도록 했는데 Other element would receive the click 에러가 난다면 혹시 modal이 앞으로 나와있는지 확인해보시면 좋을 것 같아요. modal이 나와있으면 뒤에 있는 것들이 클릭 안되는 상황일지도요 ! 간단하게 modal을 없애 버리면 되는데 display:none을 활용하시며 됩니다. 예를 들어서 modal의 id가 modal_aabbcc 인 경우에 아래와 같은 코드로 modal을 사라지게 할 수 있습니다. driver.execute_script("document.getElementById('modal_aabbcc').style.displ.. 더보기 selenium python - find_element_by_xpath selenium python - find_element_by_xpath selenium을 활용하여 어떤 버튼을 클릭하거나 선택하거나 등등의 작업을 할 때 find_element_by_xpath 정말 좋은 것 같아요. 함수명 처럼 xpath를 이용해서 element를 찾아줍니다. xpath는 chrome browser에서 쉽게 얻을 수 있어요. get xpath : chrome >> inspect >> elements select >> copy >> copy XPath 복사하면 이런 것들이 나오거든요. '//*[@id="root"]/div[3]/div[3]/ul/li[8]' 이걸 활용해서 선택, 클릭을 할 수 있습니다. 클릭하기 click() 함수를 사용하시면 됩니다. xpath = '//*[@id="ro.. 더보기 json pretty, beautiful print in web page JSON Pretty, Beautiful Print JSON을 웹 페이지에서 이쁘게 보여줘야 할 때가 있죠. highlight 라이브러리를 통해서 보여주는 것도 좋겠지만 보통은 아래와 같은 방법으로 많이 하는 것 같네요. document.getElementById('printTargetElem').innder.HTML = '' + JSON.stringify(sourceObj, undefined, 4) + ''; 아래 코드를 통해서 JSON을 indent가 들어간 텍스트로 변경할 수 있고요. pre 안에 넣어줌으로써 있는 그대로 출력하게 하는 것이죠 !! JSON.stringify(sourceObj, undefined, 4) JSON.stringify가 JSON이나 Obj를 문자열로 변경시켜주는 함수이고 .. 더보기 table td access: first td, second td, third td Table td Access - first td, second td, third td, ....., n td - table의 여러 td 중에서 특정 td에만 접근해서 무언가를 하고 싶을 때가 있죠. 첫번째는 td:first-child로 접근 가능합니다. 두번째 부터는 td:nth-child(2) 이렇게 접근 가능한데 first-child도 nth-child(1)로 접근 가능하니까 td:first-child 보다는 nth-child로 통일해서 사용하는 것이 좋을 것 같네요. 아래 몇 가지 예시를 작성해봅니다. 1. table의 첫번째 td에만 click 이벤트를 주는 방법 $('#target_table').on('click', 'td:first-child', function(){ console.log('f.. 더보기 텍스트 하이라이트 (text highlight) Mark.js 예제 필요해서 만들려고 생각하다가 분명히 있을거야 라고 찾아보면 항상 있죠 ㅋㅋㅋㅋ 최근에 검색한 결과 중에서 검색어를 하이라이트해서 보여주고 싶다는 생각이 들었고 찾아보니 mark.js 라는 라이브러리가 있더라고요. 사용도 간단하고 가볍고 해서 선택했습니다. 간단한 사용 예제 하나 가지고 왔어요. .... 위와 같은 코드로 mark.js 를 간단하게 적용할 수 있습니다. 코드를 간단히 살펴보면 aa_table에 존재하는 test라는 글자를 test로 변경해줍니다. 따라서 test는 table_highlight css 적용을 받게 되고 배경이 노란색으로 표시되죠. mark.js 홈페이지에 가보시면 더 많은 예제, 사용방법이 나와있습니다. mark.js 홈페이지 바로가기 : https://markjs.io/ 더보기 Data-attribute to Modal in Bootstrap4 (모달에 데이터 전달하기) Data-attribute to Modal in Bootstrap4 부트스트랩4에서 모달을 보여지게 하는 방법은 몇 가지가 있죠. 그중에서 Button을 누르면 모달이 띄워지는 방법이 있죠. 아래와 같은 코드로 가능합니다. 검색 ... 코드를 잠깐 살펴보면 button을 누르면 data-toggle="modal" data-target="#test_modal"을 통해서 modal이 보여지게 되죠. data-target은 modal div의 id와 일치해야 하고요. 이번 포스팅에서 정리하려는 것은 button에 있는 data-test='aaa' 를 modal로 전달하자 라는 것입니다. 아래와 같은 코드로 가능한데요. show.bs.modal은 https://getbootstrap.com/docs/4.3/co.. 더보기 JSON 자동 정렬되는 문제 분명히 서버에서는 아래와 같이 입력되서 보내지는데 클라이언트에서는 740 부터 읽지 않고 610 부터 읽더라고요. { '740' : { 'a': 1 }, '610' : { 'a': 2 } } $.each 를 통해서 처리하는데 이게 문제인가 싶었는데 브라우저에 따라서 자동으로 정렬해버리는 경우가 있는 것 같습니다. 이럴 때에는 브라우저에서 다시 처리할 생각보다는 아예 아래와 같이 depth를 하나 늘리지만 정렬해서 보내버리는 것도 좋을 것 같아요. { '0' : { '740' : { 'a': 1 } }, '1' : { '610' : { 'a': 2 } } } 간단하지만 가끔 까먹고 console.log를 찍고 있길래 정리해둡니다. ㅎㅎ 더보기 자바스크립트 이전 페이지로 돌아가기 javascript 에서 이전 페이지 정보는 document.referrer 를 찾아보시면 됩니다. console.log(document.referrer); document.referrer로 redirect 시켜도 될 것 같긴한데 아래와 같은 코드로 이전 페이지로 갈 수 있습니다. history.go(-1); 더보기 Bootstrap4 Table Border Color Change CSS 부트스트랩 4 테이블 선 색 변경하기 아래와 같은 부트스트랩 테이블이 존재한다고 가정하면 테이블의 내부 선 색을 변경하기 위해서 아래와 같은 css가 필요해요. ... class 이름에 td 붙여주시고 border를 지정해주시면 됩니다. .table_test_class td{ border: 1px solid #000000; } th, tr 등을 이용해서 원하시는 부분에 border color 혹은 border style을 변경하실 수 있습니다. 더보기 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.. 더보기 twbsPagination Redraw pagination으로 twbsPagination을 사용하고 있는데요. Redraw 하는 방법을 정리해보려고요. twbsPagination github : https://github.com/josecebe/twbs-pagination Redraw는 아래와 같은 프로세스로 이루어집니다. pagination create pagination destroy pagination html create pagination recreate 먼저 pagination이 생성되어 있겠죠. html + javascript 로 말이에요. 잘 사용하다가 pagination을 다시 그리고 싶을 때 먼저 destroy하고 html을 다시 추가해줘야 합니다. 요거를 안에 다시 생성해줘야 해요. destrory 할 때 이것도 삭제되버리.. 더보기 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값이 나오는지 확인할 수 있습니다. 더보기 이전 1 2 3 4 5 다음
