728x90
반응형

Front/JS & jQuery 444

[js] pignoseCalendar 바인딩

👉 pignoseCalendar 기본 동작pignoseCalendar는 단순히 인풋에만 달리는 게 아니라, 그 인풋과 같은 input-group 영역 클릭도 트리거로 인식합니다.공식 문서에서도 input-group과 같이 쓰면 아이콘/버튼 클릭 시에도 focus 이벤트가 인풋에 전달되도록 되어 있습니다.(.input-group-append .input-group-text 클릭 → 내부적으로 input.focus() 발생 → 달력이 뜸)즉, 아이콘을 눌렀을 때도 실제로는 인풋을 focus() 시키기 때문에 pignoseCalendar가 실행되는 거예요.✅ 정리하면:pignoseCalendar는 input의 focus 이벤트를 후킹해서 달력을 띄움.Bootstrap input-group-append는 ..

Front/JS & jQuery 2025.09.01

[js/JAVA] switch 차이

JavaScript와 Java의 switch는 비슷해 보이지만, 동작 방식과 타입 처리에서 꽤 큰 차이가 있습니다. 1️⃣ 타입 비교 방식특징JavaJavaScript타입 엄격성엄격함 (String, int 등 정확히 맞아야 함)느슨함 (== 대신 === 쓰지 않으면 타입 변환 가능)예시switch(1)에서 case "1":는 매칭 안됨switch(1)에서 case "1":도 동작 가능 (느슨 비교)Java: 타입이 안 맞으면 절대 매칭 안 됨.JS: 타입이 맞지 않아도 느슨 비교에 따라 동작할 수 있음 (== 사용 시).2️⃣ break 문 처리Java:switch(x) { case 1: System.out.println("1"); case 2: System.out.println("2");..

Front/JS & jQuery 2025.08.27

[js] PDF 파일(blob 데이터)을 새창에서 보여줄 때, URL 수정하기

예를 들어 blob:http://localhost:8080/3c1a5b1e-2b0f-4f90-b1a0-0c5f9b7d5a1f 이런식으로 이상한 주소로 생성되는데,임시 가짜 주소가 만들어지니까.그게싫으면, 하나 새로운 페이지 내가 url을 만들어서 페이지를 연다음에 ifame으로 blob데이터를 보여주면 된다. https://imswengineer.tistory.com/1376 { const blobUrl = URL.createObjectURL(blob); window.open(blobUrl, '_blank');}, 동작브라우저에서 새 탭을 열고, blob URL을 그대로 그 탭에서 표시브라우저 기본 PDF 뷰" data-og-host="imswengineer.tistory.com" data-og-sour..

Front/JS & jQuery 2025.08.26

[js] blob 데이터를 보여주는 방식 (새창열기, 현재페이지에 보여주기)

1️⃣ window.open(blobUrl, '_blank') 방식success: (blob) => { const blobUrl = URL.createObjectURL(blob); window.open(blobUrl, '_blank');}, 동작브라우저에서 새 탭을 열고, blob URL을 그대로 그 탭에서 표시브라우저 기본 PDF 뷰어 사용특징페이지 내에는 아무것도 표시하지 않고 새 창/탭만 열림UI/레이아웃 제어 불가브라우저 탭 주소 표시줄에 blob URL 표시 (blob://…)사용 시점단순히 PDF를 새 창/탭에서 보여주고 싶을 때2️⃣ 방식success: (blob) => { const blobUrl = URL.createObjectURL(blob); const $ifr..

Front/JS & jQuery 2025.08.25

[js][quill] .ql-editor 클래스

.ql-editor { box-sizing: border-box; line-height: 1.42; height: 100%; outline: none; overflow-y: auto; padding: 12px 15px; tab-size: 4; -moz-tab-size: 4; text-align: left; white-space: pre-wrap; word-wrap: break-word;}👉 주요 특징:line-height와 padding으로 편집 영역의 기본 레이아웃 지정white-space: pre-wrap → 줄바꿈 유지word-wrap: break-word → 긴 단어 자동 줄바꿈overflow-y: auto → 내용이 길면 스크롤 생김이미지 → 기본적으로는 원본 크기로 들어가..

Front/JS & jQuery 2025.08.12

[jQuery] toggleClass()

toggleClass() 는 jQuery에서 클래스를 켜고 끄는 스위치 역할을 하는 메서드입니다. 동작 방식지정한 클래스가 없으면 → 추가지정한 클래스가 있으면 → 제거즉, 한 번 호출할 때마다 상태가 토글(ON ↔ OFF)됩니다. $(this).find("a.panel").toggleClass("active");이 코드는 this 요소 안에서 a.panel 요소를 찾아서:현재 .active 클래스가 있으면 → 제거없으면 → 추가

Front/JS & jQuery 2025.08.01

[js] FullCalendar.js 표시 갯수 제한 ( 더보기 기능 )

, eventLimit: true // 더 보기 기능 활성화, eventLimitClick: 'popover', // "더 보기" 클릭 시 팝업을 띄워서 나머지 이벤트 표시, views: { dayGridMonth: { eventLimit: 4 // 더보기 포함해서라 4로 설정 }}, eventPositioned: (info) => { if (info.view.viewSpec.type == 'dayGridMonth') { const moreLink = $(".fc-more-cell").find(".fc-more"); if (moreLink.length) { moreLink.each(function() { ..

Front/JS & jQuery 2025.07.31

[js] FullCalendar.js groupId

groupId 속성을 사용하면 같은 그룹으로 묶인 이벤트로 취급할 수 있습니다.const event = { id: 'MENU123_REQ', groupId: 'MENU123', // ← menuCd로 그룹화 title: '테스트', ...}FullCalendar에서 eventClick 또는 eventMouseEnter, eventMouseLeave 같은 이벤트에서 groupId로 묶인여러 이벤트를 한꺼번에 처리하려면 다음과 같은 방식으로 접근할 수 있습니다. ✅ 예시: eventClick에서 groupId로 묶인 이벤트 전체 선택하기eventClick: function(info) { const calendarApi = info.view.calendar; const clickedEvent = i..

Front/JS & jQuery 2025.07.25
728x90
반응형