개발 기록이

최근 리액트를 사용하면서 ES5 이상 JavaScript 문법을 사용하고 있는데 그중에서 옵셔널 체이닝 연산자에 대해 정리해보려고 한다. 옵셔널 체이닝(?.)은 ES11(ECMAScript 2020)에서 도입된 연산자로 중첩된 객체의 속성에 접근할 때 에러 없이 안전하게 접근할 수 있게 해 준다. null이나 undefined가 있을 경우 에러를 발생시키지 않고 대신 undefined를 반환시킨다. let user = {};console.log(user.info.tel); // Uncaught TypeError: Cannot read properties of undefined (reading 'tel')console.log(user && user.info && user.info.tel); // undef..

window.open('url','name','options') 1. url : 새 창으로 띄울 웹페이지 url 2. name: 새 창 이름_blank : 새 창으로 열린다.(기본값)_parent : 부모 프레임에 열린다._self : 현재 페이지를 대체한다._top : 현재 페이지에서의 최상의 페이지에서 새 창이 열린다.name(임의의 이름) : 새 창이 열리고 창의 이름을 지정한다. 3. options : 창의 크기, 위치, 툴바 및 기타 속성을 지정한다. 속성들은 쉼표로 구분하여 사용하면 된다.width: 창의 너비height: 창의 높이top: 창의 상단 위치left: 창의 왼쪽 위치resizable: 창의 크기 조절 가능 여부scrollbars: 스크롤바 표시 여부 예제 코드window.open..

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

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

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://lo..