[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 주간 뷰에서 시간 표시 없애기 header: { left: 'title', center: '', right: 'dayGridMonth,dayGridWeek,dayGridDay today prev,next',} 주간 뷰에서 시간을 제외하고, 일 단위로만 보고 싶으면timeGridWeek를 쓰지 말고 dayGridWeek를 하면 된다. Front/JS & jQuery 2025.07.28
[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
[js] FullCalendar.js id값 FullCalendar.js에서 사용된 id는 각 이벤트를 고유하게 식별하기 위한 식별자(ID) 입니다. ➡️이벤트를 식별하기 위한 고유값. 수정·삭제·검색 시 필요✅ 실무에서의 활용id에 DB의 PK나 유니크 코드를 사용하는 경우가 많습니다. 🤔표시해야하는 데이터가 pk만으로는 중복이 될 수 있는 경우✅ 해결 방법 1: devCd + 구분값 조합 ➡️ id = menuCd + '_REQ', menuCd + '_RES' 등으로 유니크 보장✅ 해결 방법 2: UUID나 고유번호 부여 Front/JS & jQuery 2025.07.24
[js] FullCalendar.js FullCalendar.js는 강력하고 유연한 자바스크립트 캘린더 라이브러리이다.✅ HTML 기본 구조 ✅ JavaScript 기본 초기화 ✅ 주요 옵션 설명옵션설명initialView초기 보기 형태 (dayGridMonth, timeGridWeek, timeGridDay, listWeek 등)headerToolbar상단 툴바 위치 및 버튼 지정events일정 데이터 (배열 또는 URL로 Ajax 호출 가능)locale언어 설정 (ko 사용 시 한국어)editable드래그/수정 가능 여부selectable날짜 선택 가능 여부eventClick이벤트 클릭 시 처리 함수dateClick날짜 클릭 시 처리 함수 ✳️ 요약기본적인 사용은 new FullCalendar.Calendar()로 캘린더 생성 → .. Front/JS & jQuery 2025.07.23
[js] URL 이동 및 히스토리 제어 메서드 ✅ 1. location.assign(url)지정한 URL로 이동합니다.브라우저 히스토리에 현재 페이지가 남습니다 (뒤로가기 가능).location.href = url과 동일한 동작입니다.location.assign("/login"); // 이동 + 뒤로가기 가능 ✅ 2. location.replace(url)지정한 URL로 이동합니다.히스토리에 현재 페이지를 남기지 않습니다 (뒤로가기 불가).로그인 후 리디렉션 등에 자주 사용됩니다.location.replace("/login"); // 이동 + 현재 페이지를 히스토리에서 제거✅ 3. location.reload()현재 페이지를 새로고침합니다.캐시 없이 새로고침하려면 location.reload(true) (일부 브라우저에서는 무시됨)location.. Front/JS & jQuery 2025.07.15
[js] location 속성별 설명 속성 설명예시 (https://example.com/customer/page.html?page=1#section1)location.href전체 URL 문자열 (읽기/쓰기 가능)"https://example.com/customer/page.html?page=1#section1"location.origin프로토콜 + 호스트 + 포트 번호"https://example.com"location.pathname호스트 뒤의 경로 부분"/customer/page.html"location.search쿼리 문자열 (물음표 포함)"?page=1"location.hash해시(anchor) (샵 포함)"#section1"location.protocol프로토콜"https:"location.hostname호스트 이름(도메인)"e.. Front/JS & jQuery 2025.07.14
[js] location.origin location.origin은 현재 웹 페이지의 **기본 URL(= 출처, origin)**을 의미합니다.즉, 프로토콜 + 호스트 + 포트 번호로 구성된 문자열입니다. ✅ location.origin 구성 요소구성 요소 예시 location.protocol"https:" 또는 "http:"location.hostname"example.com" 또는 "localhost"location.port":8080" (포트가 있을 경우)전체 조합 (origin)"https://example.com" 또는 "http://localhost:8080" ✅ 예시예 1: 기본 포트URL: https://example.com/path/page.htmllocation.origin // "https://example.com".. Front/JS & jQuery 2025.07.10
[js] navigator.clipboard.writeText() 브라우저에서 텍스트를 클립보드(복사 영역)**에 저장하는 표준 JavaScript API입니다. ✅ 기본 설명navigator.clipboard.writeText(text) text: 복사할 문자열이 메서드는 Promise를 반환합니다.복사가 성공하면 .then()이 호출되고, 실패하면 .catch()에서 오류를 처리합니다.✅ 예시navigator.clipboard.writeText("https://example.com") .then(() => { alert("클립보드에 복사되었습니다!"); }) .catch(err => { alert("복사 실패: " + err); }); Front/JS & jQuery 2025.07.09