개발 기록이

Node랑 Element 개념이 헷갈려서 정리해보려고 한다. Node (노드) ├─ Element Node (요소 노드)- , 와 같은 HTML 태그 ├─ Text Node (텍스트 노드) - "Hello, World!" 등 ├─ Comment Node (주석 노드) - 등 └─ Document Node (문서 노드) - document 객체 Element(요소)는 Node(노드)의 종류 중 하나이다. 즉, 노드(Node)는 DOM(Document Object Model) 트리 구조의 모든 단위를 포괄하는 개념이고, 이 중에서 HTML 태그를 나타내는 것이 요소(Element)를 나타낸다. 따라서 요소는 노드의 하위 개념이라고 이해하면 된다. 노드(Node): DOM 트리의 모든 단위.요소(Element..

1. 새로운 노드를 기존의 노드 바로 앞에 insert node.insertBefore(새로운 노드, 기존 노드) return : node object * 새로운 노드를 자식으로, 기존 노드 바로 앞에 추가함. 2. 자식 노드 삭제node.removeChild(node) return : node object 3. 노드 복제node.cloneNode(boolean) return : node object * 참고 : https://studyingbackhoe.tistory.com/60 [JavaScript] cloneNode로 HTML 요소 복제하기평소에 JavaScript로 배열에 담긴 JSON 데이터를 HTML로 뿌릴 때 innerHTML에 더하는 방식을 사용했다.data.forEach(info => {..

1. 노드 태그 이름 가져오기element.tagName return : string 2. 노드 id 속성값 접근element.id return : string 3. 노드 class 속성값 접근element.className return : string 4. 노드 속성 접근element.getAttribute(속성명) return string 5. 노드의 속성값 변경element.setAttribute(속성명, 값) return : 없음 6. 노드 속성 제거element.removeAttribute(속성명) return : 없음 7. 노드의 속성이 있는지 체크element.hasAttribute(속성명) return : boolean 8. 새로운 노드 생성document.createElement(node..

1. id 접근document.getElementById(id) return : element object* element object는 node object와 다른 유형(텍스트 노드, 주석은 element object에 포함되지 않음) 2. tag 명으로 접근document.getElementsByTageName(tagname) return : nodeList object* nodeList object는 Array와 같은 노드 목록을 의미함. 3. class 접근document.getElementsByClassName(class) return : nodeList object 4. css 기법으로 첫 번째 노드 선택document.querySelector(css selectors) return : nod..

평소에 JavaScript로 배열에 담긴 JSON 데이터를 HTML로 뿌릴 때 innerHTML에 더하는 방식을 사용했다.data.forEach(info => { htmlList.innerHTML += ` 사용자 번호: ${info.userSeq} 이름: ${info.userName} 전화번호: ${info.tel} 부서명: ${info.deptName} `;}) 이 방식이 코드상으로는 간단히 작성할 수 있어 편리하지만 반복적으로 innerHTML을 사용하여 리스트를 가져오는 경우, 전체 구조가 다시 렌더링 되면서 성능 저하를 불러올 수 있다는 단점이 있기 때문에 cloneNode 방식을 사용해 보기로 했다. * innerHTML : 기존의..

현재 페이지에서 이전에 방문한 페이지의 URL을 가져오는 방법에 대해 알아보자. 첫 번째 페이지(http://localhost:8482/firstPage.do)에서 버튼을 통해 두 번째 페이지로 이동 키보드 F12를 눌러 개발자도구 열기 - [Network 탭] - [Headers] 의 Referer에 이전 페이지(http://localhost:8482/firstPage.do) URL 값이 들어있는 걸 확인할 수 있다. 이 값을 자바스크립트로 가져오기 위해서는 아래와 같은 코드를 사용하면 된다.document.referrer 두번째 페이지에 다음과 같은 스크립트를 추가하여 알럿으로 확인해볼 수 있다.alert("이전 페이지 URL은 " + document.referrer + "입니다."); HTML 삽입..

1. 클로저의 개념함수가 정의될 때의 렉시컬 환경을 기억하여 함수가 실행될 때 그 환경의 변수들에 접근할 수 있게 하는 특성. 이 문장만 보면 무슨 의미인지 이해하기가 어려우니 간단한 예시 코드를 통해 하나씩 뜯어보자.클로저에 대한 설명은 다음과 같다.외부 함수의 변수를 내부 함수에서 사용할 때 클로저가 생성.해당 변수의 값이 외부 함수 변수에서 선언한 값으로 초기화되지 않고도 사용 가능.클로저는 외부 함수의 스코프를 기억하고 있어서, 외부 함수가 종료된 이후에도 내부 함수에서 외부 함수의 변수에 접근할 수 있음. (예시 코드)const func = (function() {    let cnt = 0;        return function() {        console.log(cnt++);    ..

URL에 태운 파라미터 값을 가져와서 자바스크립트 단에서 처리해야 할 일이 있었다. 로컬 환경에서 예시를 들자면, http://localhost:8080?userid=user001&name=kim 와 같이 userid와 name 2개의 파라미터를 넘겼을 때 각 파라미터의 값을 가져오는 방법에 대해 알아보자. 1. URL const urlParams = new URL(window.location.href).searchParams;console.log(urlParams.get('userid')); // user001console.log(urlParams.get('name')); // kim- window.location.href : 파라미터를 포함한 전체 URL 문자열을 반환한다. ex) http://loc..

시퀀스 값이 불규칙한 상태(ex: 1, 10, 2, 3, 5, 7)에서 특정 시퀀스의 앞 행과 뒤 행의 값을 조회하는 방법에 대해 알아보자. mybatis에 적용하기 위해서 SET 방식(SET @rownum:=0;)이 아닌 다음과 같은 방식으로 rownum을 생성했다. SELECT @rownum := @rownum + 1 AS rownum, post_seq, title, contents, reg_date, mod_date FROM ( SELECT post_seq, title, contents, reg_date, ..

브라우저 뒤로 가기를 실행했을 때 특정 이벤트를 실행해주는 방법에 대해 알아보자. 1. BF캐시 (Back Forward Cache)BF캐시란 브라우저에서 발생하는 최적화 기능으로 브라우저의 뒤로 가기 ..