반응형

전체 글 371

[JS] AJAX 로딩바 사용시 async: false를 꺼줘야 한다.

ajax 사용시 유독 오래 업로드 되는 구간이 있어서 해당 부분을 처리해야했다. 그런데, 안먹힌다. 뭘해도 업로드 끝나고 작동되는 문제가 있었다. 제이쿼리 이벤트 바인딩이 느려서인가? document.getElementById로 잡아보기도하고, 이것도 느리니 아예 함수 호출시 내장으로 변수에 할당해서 구현해보기도 하였다. 그래도 안된다... 찾다보니 async를 꺼보라네? 그렇다 ajax 내 async : false 상태가 되면 이전단계에선 호출이 안되는 것... 즉 모든 이벤트가 끝나고 작동되게 되는 것이다.(error/success/complete) 더보기 what it is saying is, if your request is async: false then you should not use aja..

[JS] Masonry 레이아웃 구성하기.

처음에는 https://pang2h.tistory.com/227 masonry 레이아웃 구성하기 이런 식으로 이미지, 혹은 내부 요소를 구성하는 방법이 필요해서 검색 좀 해봤습니다. 개인적으로 몇몇과 함께 하고 있는 프로젝트에서 갤러리 레이아웃이 필요해서요. 이 스타일로 페이지를 pang2h.tistory.com 이분의 코드를 사용했다. 그런데 말야... 너무 느리다.. 이미지 200개가 뜨는데 10초 걸리는게 말이 되나? 그래서 엎었다. 그래서 찾아보니까 우연히보니 이미 잘 만들어놓은 코드가 있더라. 무엇보다 JS로 컨트롤하는 것이 아니라 CSS로 컨트롤해서 더 빠르고. Cinderella wearing European fashion of the mid-1860’s Rapunzel, clothed in..

[Node.js] text파일 읽어와서 excel파일로 저장하기.

text를 이전에 만들어놨는데, 파일 안 형식은 json파일과 동일하다. [ {'이름': "홍길동", '나이':'70'}, {'이름': "홍길동2", '나이':'72'}, {'이름': "홍길동3", '나이':'70'}] 대충 위와 같이 이렇게 구성되어 있는데, 이를 읽어오기 위해서 fs모듈을 사용하고, xlsx를 사용하였다. sheetjs보다 좋은게 너비 설정이 가능해서 참 좋네~(sheetjs는 이건 유료 기능) // array 데이터 이용 const xlsx = require('xlsx'); const path = require('path'); const fs = require('fs'); let file = './해당 text.txt'; let textString; fs.readFile(file, ..

[owlCarosel] ver 1.2.1 mouse event detect! 마우스 이벤트 감지

회사에서 그지 같은 오래된 코드를 줬다. 문제는 레퍼런스도 적용이 안될만큼 오래된 코드... 공식문서 봐도 이벤트가 안 먹힌다. https://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/ Owl Carousel How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. 2. Set up your HTML You don't need any special mar..

[JS] 부트스트랩 3.* Navbar 현재 페이지 active 상태로 두기

기존 scrollspy가 적용된 template를 수정해서 써야하는 일이 생겼다. 하지만 이것은 기본적으로 scrollspy가 적용되어 scroll에 따라 먹히는 부분... 그래서 페이지 이동에 따라 작동되도록 nav를 수정해야했다. Link (current) Link nav는 위와 같은 상태로 둔다. https://getbootstrap.com/docs/3.4/components/#navbar Components · Bootstrap Extend form controls by adding text or buttons before, after, or on both sides of any text-based . Use .input-group with an .input-group-addon or .input..

[ci4] DataTable 서버-사이드 Server-side Processing

데이터 테이블을 구현하는데 있어 서버사이드 기능이 필요했다. 프론트만 쓰면 좋지만, 이게 5천개가 넘어간 순간 1분이 넘게 로딩된다... 그래서 이전에는 구현하지 못했지만, 이번에 구현하게 되었다. 아래 테이블 컬럼들은 의미 없는 데이터입니다. // front.js 네트워크 통신시 전달되는 데이터 값. draw: 3 columns[0][data]: 0 columns[0][name]: columns[0][searchable]: true columns[0][orderable]: true columns[0][search][value]: columns[0][search][regex]: false columns[1][data]: 1 columns[1][name]: columns[1][searchable]: tru..

취업/CodeIgniter 2022.07.15

[CI4]HTML 특정 태그 위치로 스크롤 이동하기.

여기로 이동됩니다. 이걸 클릭하면요 내용은 정말 간단하다. function scrollEvent(_params, speed) { let anchor_id = $(_params).attr('data-anchor'); if( !speed ) var speed = 'slow'; var a_tag = $("#"+anchor_id); if(a_tag.length > 0){ $('html, body').animate({ scrollTop: a_tag.offset().top }, speed); } } 원형 코드와 다르게, 나에게 맞게 수정을 진행하였다. 원형 코드 https://web.webmini.net/anchor_tab_scroll 버튼 클릭시 원하는 곳으로 이동하기(스크롤 위치 기억) - 웹미니 : 웹속의 작..

취업/CodeIgniter 2022.07.11

[JS] 프리티포토 모바일 크기 수정하기.

워드프레스 라이브러리 같은데, 엄청 오래된 라이브러리다. 아마도 수정이 되어야 했을 거 같은데 안되어서...그냥 있는 버그였다. jquery.prettyPhoto.js 파일에서 코드 난독화를 제거하고, imageWidth, imageHeight를 찾아보면 -200을 수정해야한다. 예쁜 사진에서 같은 문제가 발생했고 rafael.dev에서 게시한 것과 동일한 CSS 코드 수정 사항을 찾았습니다. 다만, 이전 버튼과 다음 버튼이 사라지고 스타일이 정말 이상해서 여전히 좋지 않은 것 같습니다. 크기 조정 계산으로 인해 문제가 발생한 것 같아서 js 소스에서 크기 조정 기능의 스니펫을 찾으려고 하면 아래와 같이 쉽게 솔루션을 얻을 수 있습니다. 저는 3.1.6 버전을 사용하고 있습니다 _fitToViewport..

728x90