줄없는 연습장

예전에 셀병합을 자동으로 해주는 소스를 올린 적이 있다.([jQuery] 유동적인 테이블 셀병합 - rowspan (tistory.com)) 데이터가 무엇인지에 따라 병합을 해주다보니, 실데이터가 달라도 세세하게 병합할 부분을 조절하고 싶은데 그러지 못했다. 그래서 만든 소스가 아래의 소스. 한땀 한땀 코딩했다. 기준 데이터는 실데이터가 아닌, 그룹sort("groupSort")와 세부sort("detailSort"). 데이터의 key 이름이 달라도 사용할 수 있도록 구현했다. 필요하신 분들은 갖다 쓰시길. document.addEventListener("DOMContentLoaded", function(event) { let dataList = {"dataList":[{"groupSort":1,"det..

라이브러리 사용해도 충분히 만들 수 있고 더 간편하지만.. 기획과 설계가 쪽대본처럼 진행되는 내 경력사상 초유의 프로젝트에서.. 개발이 끝난다고 해도 어떤 요상한(-_-) 추가 요구사항이 들어올지 모르는 뭐같은 환경에서는 쌩으로 만드는 것이 추후 정신 건강에 좋을 수도 있다. 라이브러리는 갖다 쓰기는 편해도 입맛에 맞게 고치기 힘드니까 말이다. 혹시라도 나처럼 쌩으로 만들어야 하는 사람들을 위해 위의 이미지 같이 구현되는 소스를 공유한다. ▽ page.jsp 멀티플 셀렉트 체크박스 선택하시오. 저장 자동검색완성 해보자. ▽ page.js document.addEventListener("DOMContentLoaded", function(event) { // 멀티플 셀렉트박스 영역을 클릭했을 때 동작 Set..

백엔드/프론트엔드 구분해서 개발하는 추세라 리액트나 vue 사용하면 쌩으로 페이징을 개발해서 쓸 것 같진 않은데, 그래도 정리차 올려놓는다. 참고로 pagingUtils쪽 로직은 내가 개발한 부분은 아니고, 먼저 이전 분이 개발해놓으신 거다. 퍼블리싱은 알아서... ▽ paging.js /** * 페이징 처리 JS */ var pagingUtil = { pagingView: function (currentPageNo, pageSize, totalCount, targetFunction) { var pageNo = parseInt(currentPageNo); // 현재 페이지 번호 var countPage = 10; // 한 화면에 출력될 페이징 개수. var finalPageNo = parseInt(tot..

1. fetch를 사용한 이유 jquery ajax를 사용하지 않고(바닐라 자바스크립트 지향) 비동기 호출을 할 수 있는 방법을 찾던 중, 원시적인 XMLHttpRequest를 사용하는 방법과 fetch API를 사용하는 방법 대략 두 가지가 있음을 알게 되었다. XMLHttpRequest의 경우 브라우저별로 객체 생성을 달리해야 하는 번거로움이 있다. 그래서 나온 게 ajax. 그러나 난 jquery를 기반으로 하는 ajax를 쓰고 싶지 않다! 고로 XMLHttpRequest에 비해 브라우저 호환성 걱정할 필요없고 사용법도 간단한 fetch를 선택했다. 아래는 실제 프로젝트에 사용한 예제다. 2. 예제 /** * 비동기 호출 함수 (POST-일반) * @param {string} url 비동기 호출할 ..

jQueyr와 같은 여타 다른 JS라이브러리를 사용하지 않고 javascript만 사용하는 걸 pure javascript 혹은 vanillaJS 혹은 plain javascript라고 부른다. 요즘 순수 자바스크립트만으로 개발할 경우가 생겨서 이참에 자주 사용하는 코드들을 정리해봤다. $(document).ready(function() { console.log("jQuery document ready!"); }); document.addEventListener("DOMContentLoaded", function(event) { console.log("javascript document ready!"); }); // 1. 클래스명으로 값 가져오기. // jQuery $(".someClassName").v..

페이징이 되어있는 게시판에서 1페이지에서 체크했던 값들이 2페이지에 갔다가 다시 1페이지로 돌아와도 체크된 상태로 남아있도록 하는 로직을 고객이 아닌 PM이 요구하여 만들게 됐다. 체크박스 체크 상태가 유지되는 게시판을 여태 본 적도 없고, 이용하는 사람 입장에서도 왜 그렇게 해야 하는지는 모르겠으나.. 만들라고 하니까 만들었다. 처음엔 체크할 때마다 ajax처리해서 session으로 들고다닐까 하다가, 겨우 체크박스 하나 때문에 불필요한 서버-클라이언트 통신이 발생하는 것도 아닐 뿐더러 띄엄띄엄 하는 체크에 많은 양의 체크를 할 것 같지도 않아서 그냥 쿠키로 해결하기로 했다. 좀더 정리가 필요한 소스이긴 하지만, 더이상은 귀찮다. ㅡ.ㅡ;; Javascript단 var cookieName = "item..

간단하게 짤 수 있는 코드지만, 항상 필요할 때마다 타이핑하자니 귀찮아서 여기에 저장해놔야겠다. function setPeriod(period){ var startDate = getPastDate(period); var endDate = getRecentDate(); $("#startDate").val(startDate); $("#endDate").val(endDate); } function getRecentDate(){ var dt = new Date(); var recentYear = dt.getFullYear(); var recentMonth = dt.getMonth() + 1; var recentDay = dt.getDate(); if(recentMonth < 10) recentMonth = "0..