728x90
반응형

Front/JS & jQuery 454

[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

[jQuery] .has()

jQuery의 .has()는 선택된 요소 집합 중에서 특정 자식을 포함하는 요소만 필터링하는 메서드입니다.📌 문법$(selector).has(selectorOrElement) selectorOrElement: 특정 자식 요소(selector) 또는 DOM 요소를 의미합니다.반환값: 해당 자식 요소를 포함하고 있는 상위 요소만 반환하는 새로운 jQuery 객체입니다.✅ 예제 1: 특정 자식 요소를 가진 부모 필터링 Apple Banana Cherry $('li').has('span').css('color', 'red');📌 결과: 요소 중 을 자식으로 가지고 있는 요소만 빨간색으로 바뀜즉, 2번째와 3번째 만 선택됨 ✅ 예제 2: 특정 DOM 요소가 자식으로 있는지 확인$('#parent1, #p..

Front/JS & jQuery 2025.07.07

[js] hide() / remove()

hide()는 화면에서만 숨기고 DOM에는 그대로 남아 있는 반면,remove()는 DOM 자체에서 요소를 완전히 제거합니다.메서드 설명hide()요소를 display: none으로 만들어 화면에서 숨김. DOM에는 존재.remove()요소를 DOM 트리에서 완전히 제거. 이후 .find()로도 못 찾음.detach()DOM에서 제거하지만, 이벤트 핸들러/데이터는 유지. 나중에 다시 붙일 수 있음. ✅ 언제 remove를 쓸까?폼에서 아예 해당 항목이 필요 없을 때성능상 필요 없는 노드를 줄이고 싶을 때사용자에게 혼란을 줄 수 있는 비활성화 필드 자체를 안 보여줄 때필요에 따라 hide() vs remove() 선택하시면 됩니다.remove()를 사용하면 이후 해당 요소는 다시 show()로 복구할 수..

Front/JS & jQuery 2025.07.05
728x90
반응형