728x90 반응형 전체 글122 [javascript] 이벤트 캡처링과 버블링 (캡쳐링과 버블링이 발생하는 이유?) 이벤트 캡처링과 버블링(캡쳐링과 버블링이 발생하는 이유?) 이벤트 캡처링과 버블링에 대해 구글링해보고 내 입맛대로 이해한 내용을 정리했다. 1. 이벤트 캡쳐링과 버블링이 발생하는 이유 . 브라우저는 이벤트를 감지한다. 이벤트가 발생하면, 발생한 이벤트의 정보를 가지고 있는 event 객체를 생성한다. event 객체는 무조건 이벤트가 발생한 요소에 전달해야 한다. event 객체에는 많은 정보들이 있지만 그 중에서도, event.type = 발생한 이벤트의 타입 event.target = 이벤트가 발생한 위치의 요소 로 예를 들어보자면 (1) click했다. click event 객체가 만들어진다. event.type = "click" 이다. (2) document에서 가장 최상위 요소에서 click 이.. 2024. 4. 23. [javascript] event.preventDefault() 1. 사용하는 경우 페이지 이동을 하는 기본동작을 빼주어야 할 때 사용함. 우리가 보통 화면의 버튼에 이벤트를 걸기 위해서는 addEventListener 함수를 사용한다. 요소.addEventListener("이벤트", 함수명); 이벤트 중에서도 submit 이벤트는 form 내용을 제출하는 이벤트로, submit을 하게되면 action로 지정된 url로 이동하거나 url이 없는 경우에는 새로고침이 된다. ... 페이지 내 구조상, 여러 개의 form이 있고 각자 submit을 사용해야 할 필요가 있을 때 ! 페이지 이동 없이 input 내용을 submit하여 데이터를 주고 받을 수 있는 ajax 기능을 사용하게 된다. 다만 ajax는 제이쿼리에 있는 기능이며, vanilla script 로 구현하기 .. 2024. 4. 19. [javascript] classList 로 반환되는 DOMTokenList 1. DOMTokenList 의 정의 DOMTokenList The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList or HTMLLinkElement.relList, and many others. A DOMTokenList is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive. ( 해석내용 ) DOMTokenList 인터페이스는 space를 기준으로 구분되어지는 토큰의 set이다. Element.classList 또는 HTMLLink.. 2024. 4. 3. [javascript] 랜덤 로또 번호 뽑기 랜덤으로 로또번호 뽑기 만들기 - document.querySelector(cs선택자) - 요소.addEventListener("click", function) 결과물 index.html 로또번호 뽑기 app.js function getLottoNumber(){ // 숫자 6개 + 추가번호 1개 // 1~45 let html = ""; for(let i = 1; i 2024. 4. 2. 자바스크립트 객체 상속 (feat. [[Prototype]] 과 __proto__) 자바스크립트 객체 상속 (feat. [[Prototype]] 과 __proto__) 자바스크립트 객체에서도 상속관계처럼 다른 객체를 사용할 수 있다. 기본적으로 자바스크립트 객체는 숨김 프로퍼티인 [[Prototype]] 를 가진다. 그리고 [[Prototype]] 프로퍼티의 getter/setter 함수도 존재한다. 숨김 프로퍼티인 [[prototype]] 는 다른 객체로 설정해줄 수 있다. 무조건 객체타입만 가능하며, 객체 이외의 타입인 경우 설정이 무시된다. 이 Prototype 프로퍼티를, 상속관계처럼 사용할 수 있다. let animal = { walk() { // 또는 walk : function() { ... } if (!this.isSleeping) { alert(`동물이 걸어갑니다.`);.. 2024. 2. 28. 오라클 시퀀스 ↔ 테이블 시퀀스 맞추기 (동기화하기) 간혹 데이터를 이관하다보면, 해당 테이블의 pk 로 사용하는 시퀀스와, 거기에 사용되는 시퀀스의 value가 맞지 않을 때가 있다. 나는 무결성 제약위반 오류가 뜨면서 데이터가 수정처리 되지 않았기 때문에, 시퀀스를 맞춰주어야 하는 상황이었다 또 이런 상황이 생길 수도 있으니 간단한 프로시저로 만들어보았다 create or replace PROCEDURE "SYNC_SEQ" ( P_SQ_NM in VARCHAR2-- 시퀀스명 , P_TB_SEQ_NM in VARCHAR2 -- 테이블 내 시퀀스 컬럼명 , P_TB_NM in VARCHAR2 -- 테이블명 ) IS V_NEXT_VALUE NUMBER; V_MAX_VALUE NUMBER; V_CAL_VALUE NUMBER; T_NUM N.. 2024. 2. 20. [IntelliJ] 폐쇄망에서 인텔리제이 라이센스 등록하기 인텔리제이 회사용 계정이 있지만 사내 폐쇄망에서 접근하려면 일반적인 로그인으로는 안된다. 폐쇄망에서 계정 등록하여 인텔리제이를 활성화 하는 과정을 기록해본다..! 1. 인텔리제이 로그인 인텔리제이 로그인 화면 접근 https://www.jetbrains.com/ko-kr/idea/ 로그인주소로 이동해서 로그인한다. 2. 오프라인 활성 코드 겟하기 로그인 된 화면에서, Download a code for offline activation 버튼을 클릭하여 오프라인 접속코드를 다운로드 한다. 압축폴더에 txt 파일로 저장된다. 저장되는 코드파일명 형식은 [라이센스코드 - 계정이메일 - for 버전] 인 듯 하다. 나는 인텔리제이를 2021년도 버전으로 깔았으니, 아래에 있는 텍스트파일에 있는 코드를 사용했다... 2024. 2. 8. [front] 브라우저 탭 아이콘 적용하기 (favicon) 태그 안에 link 태그를 작성해주기. 2024. 2. 2. [back] 자바의 직렬화 (Serialzation : implements Serializable) 자바의 직렬화 (implements Serializable) 1. java에서 직렬화란? 데이터 객체를 전송하기 쉬운 형태로, 객체 상태를 저장하는 일련의 바이트로 바꾸는 과정 (자료구조 저장) 처음에는 이렇게 적어놓은 글들을 보면서 뭔말이지 싶었는데 이렇게 말고는 설명할 방법이 .. 2. 직렬화를 사용하는 이유 구글링 해서 접한 여러 글들을 읽어봤을 때, 내가 이해한 바는 이렇다. - 시스템과 시스템 간에, 네트워크로 데이터 교환을 하기 위해서는 서로 데이터를 알아먹을 수 있는 자료구조 양식(class)이 있어야하고, 그 양식이 이 양식인지 알아차리기 위해서는 양식번호(serialVersionUID)가 있어야 한다. 내가 사용자에게 이름과 연락처를 적을 수 있는 양식을 줬지만, 사용자는 그 양식이 어떤.. 2024. 2. 1. [front] 카카오톡 공유하기 이미지 수정하기, og:image 종종 공유하기 버튼이 들어가는 이벤트 페이지를 개발하면, 클라이언트가 특정 이미지가 공유되길 원할 때가 있다. 그럴 때 수정하는 곳이 og 태그. 태그 안에 작성해주면 된다 !! 예제 ) 내 티스토리 블로그 를 공유했을 때 1. og 태그란 - 오픈그래프 프로토콜을 의미 (창시자는 페이스북이라고 한다) - 메타태그의 property가 og로 지정되어 있는 정보를 긁어올 수 있다. 즉, 사용자가 페이지에 진입하기 전에 미리보기용 정보를 가져올 수 있게 하는 태그다. 보통 title, image, description, url을 설정한다. image의 크기는 최소 6060x315px , 1.91:1의 비율, 권장 사이즈는 1200x630px이라고 하는데,, 이미지 크기 관련해서는 https://ogp.me/ 2024. 2. 1. 이전 1 2 3 4 ··· 13 다음 728x90 반응형
