[javascript]opener 함수 사용 시 callback이 opener로 갈 때
2023. 11. 8. 17:22 Developer/Javascript
오늘 겪었던 내용을 바탕으로 포스팅 하겠습니다 상황은 이러합니다 팝업 페이지에서 사용하고자 하는 api함수가 메인 페이지에 이미 import 되어있습니다 이럴 때 우리는 자연스레 opener.api함수명(); 과 같이 사용하겠죠 이 api함수명이 test라고 해봅시다 구조를 살펴보면 function test (l1, l2, callback){ 무수한 변수들 내용 $.ajax({ url : url type : 'post' success : function (res) { result.result = "success"; result.data = res; if (instanceof callback == "function") { callback(result); } } }); } 대략적인 함수의 내용입니다 이 함수..
[javascript]레이어 팝업 생성함수
2023. 5. 22. 15:59 Developer/Javascript
팝업을 사용하다보면 레이어 팝업이 꼭 필요한 시점이 있습니다 간단하게 띄운 후 입력 받아 처리 해야 하는데 클라이언트들은 뒷 화면이 가려지거나 혹은 팝업이 표출 됐는데 메인 창 뒤로 사라져서 알지 못하고 불편하다고 이야기 하는 경우들이 종종 있어서 이럴땐 레이어 팝업이 적합하다고 할 수 있습니다 레이어 팝업을 페이지마다 추가 해놓고 숨김 및 보임 처리 하기에는 힘들기에 공통함수에 레이어 팝업을 추가하여 사용하도록 하는것이 좋을것같습니다 function addLayerPopup(title, url, height, width, param){ let stIdx = url.lastIndexOf('/'); let edIdx = url.indexOf('.'); let popId = url.substring(stId..
[javascript]체크박스 일괄 선택하여 일괄삭제 백앤드까지 구현하기
2023. 2. 14. 17:11 Developer/Javascript
우리가 백 단에서 리스트를 표출시키고 이 글들을 일괄적으로 삭제시키기 위해서는 아마 화면단에서 배열로 받아 백단에서 반복문을 이용해서 delete 쿼리를 보내는 분들이 많을 겁니다 간단하기도 하고 delete쿼리를 한번만 작성해두면 그대로만 이용하면 되기 때문에 제가 실무에서도 많이 본 소스였습니다 그렇지만 제가 아는 내용은 최대한 DB에 접근하는 즉 쿼리를 날리는 횟수를 줄여야 한다고 알고 있습니다 데이터 흐름을 생각해 보면 화면 - 프런트앤드 - 백앤드 - DB접근 - 백앤드 - 프런트앤드 or 화면 바로 출력되는것이죠 그리고 세부적으로 살펴보면 백앤드에서도 아마 대부분 MVC 패턴으로 프로젝트가 설계되었을 건데 아무리 Impl.java 에서 돌린다고 하더라도 DB접근은 될 수 있으면 한 번에 끝내는..
[javascript] 다중팝업 제어
2023. 1. 12. 09:41 Developer/Javascript
이번 내용은 저번에 다뤘던 팝업 제어 하는 내용과 비슷하긴 합니다 하지만 저번엔 상세한 내용은 아니었습니다 주제에 대한 상세한 코드도 아니었고요 ㅎㅎ 이번엔 제가 현업에서 시간이 조금 나서 저번에 했던 팝업이 여러개가 있을 때 포커스 이동에 대한 내용이기도 합니다 포커스에 대한 자세한 내용은 검색해보시면 아시겠지만 원활하진 않습니다 main 화면으로 focus를 보냈다가 다시 팝업으로 focus 이런 현상이 쉽지가 않게 되었습니다 왜냐하면 팝업을 호출 한 parent window에서 컨트롤이 가능하지만 호출당한 팝업이 main 으로 focus를 했을 땐 크롬 정책으로 인해 동작하질 않더라고요 며칠 찾아보니 결론적으론 안된다에 도착했죠 ㅜ 그래서 구조 자체를 변경하고 다른 방법을 생각해 낸 것이 commo..
[javascript]div태그를 input처럼 사용하고 전체 선택 설정
2022. 10. 6. 10:30 Developer/Javascript
안녕하세요 오늘은 제가 현업에서 근무하며 생긴 이슈를 처리하는 과정에 대해 설명하고 비슷한 이슈가 있을때 좀 더 편하게 처리 하시라는 의미로 작성합니다 간혹 사용자입력을 받는 영역을 지정해놓고 input 태그를 이용해서 대부분 사용 하실 거라 생각합니다 그렇지만 div 태그에 텍스트가 들어가있는 경우가 있습니다 input태그 처럼 사용하는것이지요 일단은 div 태그를 input 처럼 사용하는 속성은 contenteditable='ture' 입니다 내용1 내용2 숫자 이런 상태이면 숫자 라는 택스트를 수정 할 수 있게 됩니다 input과도 같은 느낌이죠 ㅎㅎ 근데 저에게 생겼던 이슈는 기존에 저 태그에 content 속성만 들어가있는게 아니라 다른것도 하나 더 끼어있었습니다 저 div에 onfocus 이벤..
[javascript]엑셀 다운로드 기능 구현
2022. 8. 12. 15:33 Developer/Javascript
이 기능은 다른 라이브러리 없이 구현 한 것으로 다소 허접해 보이긴 합니다 ㅎㅎ 그리고 스타일이 적용 되지 않은 소스코드로 스타일이 필요없을때 사용 하면 되겠습니다 이 전 포스팅에서 했던 페이징 기능의 list 배열 객체를 이용해서 엑셀 다운로드 기능을 만들어 보도록 하겠습니다 //다운로드 버튼 생성 다운로드 버튼을 하나 생성 해주고 download 함수를 만들어 봅시다 html 태그를 생성해서 엑셀 다운로드로 만들어 보도록 할 것이므로 변수에 html 태그를 생성합니다 function download() { let excelTable = ""; excelTable += ""; excelTable += ""; excelTable += ""; excelTable += "No"; excelTable += "..
[javascript] 페이징 처리
2022. 8. 11. 14:56 Developer/Javascript
오늘 받은 업무는 여러개의 데이터를 페이징 처리를 해라 라는 업무를 받아서 여러 페이지 서치를 통해 구현했습니다 먼저 저는 함수로 구현을 했는데 이유는 다른 페이지에서도 사용가능 하도록 하기 위함 입니다 html태그는 해드와 바디를 구분 짓기 위해 이렇게 작성 했습니다 번호 구분 수식 계산 메시지 테스트 데이터는 이렇습니다 var list = [ {no : 1, gubun: '구분자1', formula:'B', calcFrq:123123, collisMsg:'메시지'}, {no : 2, gubun: '구분자2', formula:'B', calcFrq:123123, collisMsg:'메시지'}, {no : 3, gubun: '구분자3', formula:'B', calcFrq:123123, collisMs..
[javascript] input 글자수 제한하기
2022. 7. 27. 15:50 Developer/Javascript
html 태그에 간혹 maxlength="100" 먹히지가 않을때가 있더라구요 이 이유에 대해서는 나중에 차차 알아볼 생각인데 일단 먼저 버그를 수정해야 하기 때문에 소스로 수정했습니다 this 로 엘리멘트 자체를 넘겨주고 제한 할 길이를 받아 oninput으로 제한 할 수 있습니다 function inputCheck(el, maxlength){ if (el.value.length > maxlength) { el.value = el.value.substr(0, maxlength); } } 자바스크립트 영역에 해당과 같이 함수를 만들어주시고 html 태그에는 이와 같이 해주시면 길이가 70 이상은 입력되지 않습니다 그리고 가장 중요한것은 백앤드 쪽에서도 길이를 체크 해줘야합니다 프론트에서만 제한 해놓으면 ..
[javascript]radio 전체 체크하기
2022. 7. 12. 13:29 Developer/Javascript
반갑습니다 오늘은 제가 실무에서 겪은 내용을 바탕으로 소스를 공유하고자 합니다 이번엔 사용자 만족도 조사 페이지를 만들게 됐는데 다들 화면 만드는건 뭐 어렵지 않게 하실거같아요 그래서 그 내용은 건너뛰고 폼은 이런 형태였습니다 번호 측정항목 매우만족 만족 보통 불만족 매우불만족 1 속도가 적당한가 ㅇ ㅇ ㅇ ㅇ ㅇ 2 화면 구성이 편리한가 ㅇ ㅇ ㅇ ㅇ ㅇ 3 친절하게 응대하는가 ㅇ ㅇ ㅇ ㅇ ㅇ 이런 폼이였습니다 만족도 선택 영역은 라디오 버튼으로 되어있는것입니다 1개만 선택 해야하니까요 그래서 1개의 행의 name을 사용해서 폼 구성은 1행은 sv1 으로 name을 주고 2행은 sv2로 name을 주고 10 개의 행까지 같은 방식으로 처리했습니다 근데 중요한건 저장 버튼을 눌렀을때에 만족도 부분에 체..
[javascript]JSON
2022. 7. 7. 15:42 Developer/Javascript
JSON 이란 javascript object notation 입니다 자바스크립트 문법을 이용한 데이터 형식이라고 할 수 있겠죠 ㅎㅎ 제이슨 이라고 다들 이야기를 많이 하시기도 하고 프로그래밍을 하다 보면 빼먹을 수 없는 내용입니다 무조건 알고 있으셔야해요 ㅎㅎ javascript 개념으로 봤을때는 그냥 객체 처럼 보입니다 객체라고 할 수 있는 겁니다 ㅎㅎ 그리고 이 JSON이 나온 배경은 옛날 프로젝트들 보시면 아마 JSON을 안쓰고 XML을 쓸겁니다 ㅎㅎ 제가 했던 GIS 프로젝트 에서는 기본적으로 사용하는 지도를 기본도 라고 지정 해놓고 사용했는데 기본도에 필요한 데이터들을 xml파일로 저장해두고 불러와 사용하곤 했습니다 ㅎㅎ 근데 요즘은 XML쓰지 않죠 JSON을 사용하기 때문입니다 자 구조를 한..
복사했습니다!

티스토리툴바