어제도 새벽까지 프로젝트 코드를 만졌는데, 벌써 수요일이라니...
원래 이번주 금요일이 발표였는데 어떻게 그럴 수가 있지?(ㅋㅋㅋㅋㅋ)
혼자 구현해보면서 프로젝트에 기본적으로 들어가야 하는 기능들은 숙지했지만
아직 검색기능, 원하는 데이터만 불러오기 기능을 완료하지 못했다.
(내가 오늘 반드시 성공시킨다)
이렇게 바쁜 중에 모던자바스크립트의 브라우저 부분이 왜 그렇게 중요하다고 햇는지
다시 한번 깨닫게 되는 하루였다.
너무 바쁘니 이번주는 개발일지에 한번에 공부한 내용을 정리해야겠다.
📖 오늘 새롭게 알게된 내용
--> 브라우저 부분 진짜 중요하네... 프로젝트 진짜 일찍 끝내고 , 무조건 이 부분도 마스터한다
DOM 노드 클래스
모든 DOM 노드는 공통 조상으로부터 만들어지기 때문에 노드 종류는 다르지만, 모든 DOM 노드는 공통된 프로퍼티와 메서드를 지원한다.
DOM 노드는 종류에 따라 대응하는 내장 클래스가 다르다.
계층 구조 꼭대기엔 EventTarget이 있는데, Node는 EventTarget을, 다른 DOM 노드들은 Node 클래스를 상속받는다.
==> 이벤트타겟 > 노드 > 다른 DOM
클래스는 다음과 같은 특징을 지닌다.
- EventTarget – 루트에 있는 ‘추상(abstract)’ 클래스로, 이 클래스에 대응하는 객체는 실제로 만들어지지 않는다. EventTarget가 모든 DOM 노드의 베이스에 있기때문에 DOM 노드에서 '이벤트’를 사용할 수 있다.
- Node – 역시 ‘추상’ 클래스로, DOM 노드의 베이스 역할을 한다. getter 역할을 하는 parentNode, nextSibling, childNodes 등의 주요 트리 탐색 기능을 제공한다. Node 클래스의 객체는 절대 생성되지 않는다. 하지만 이 클래스를 상속받는 클래스는 있다. 텍스트 노드를 위한 Text 클래스와 요소 노드를 위한 Element 클래스, 주석 노드를 위한 Comment클래스는 Node클래스를 상속받는다.
- Element – DOM 요소를 위한 베이스 클래스이다. nextElementSibling, children 이나 getElementsByTagName, querySelector 같이 요소 전용 탐색을 도와주는 프로퍼티나 메서드가 이를 기반으로 한다. 브라우저는 HTML뿐만 아니라 XML, SVG도 지원하는데 Element 클래스는 이와 관련된 SVGElement, XMLElement, HTMLElement 클래스의 베이스 역할을 한다.
- HTMLElement – HTML 요소 노드의 베이스 역할을 하는 클래스이다. 아래 나열한 클래스들은 실제 HTML 요소에 대응하고 HTMLElement를 상속받는다.
- HTMLInputElement – <input> 요소에 대응하는 클래스
- HTMLBodyElement – <body> 요소에 대응하는 클래스
- HTMLAnchorElement – <a> 요소에 대응하는 클래스
이렇게 특정 노드에서 사용할 수 있는 프로퍼티와 메서드는 상속을 기반으로 결정된다.
<input> 요소에 대응하는 DOM 객체를 예로 들어보면, 이 객체는 HTMLInputElement 클래스를 기반으로 만들어진다.
객체엔 아래에 나열한 클래스에서 상속받은 프로퍼티와 메서드가 있을 것
- HTMLInputElement – 입력 관련 프로퍼티를 제공하는 클래스
- HTMLElement – HTML 요소 메서드와 getter, setter를 제공하는 클래스
- Element – 요소 노드 메서드를 제공하는 클래스
- Node – 공통 DOM 노드 프로퍼티를 제공하는 클래스
- EventTarget – 이벤트 관련 기능을 제공하는 클래스
- Object – hasOwnProperty같이 ‘일반 객체’ 메서드를 제공하는 클래스
>> 프로젝트하면서 실제로 발견한 노드!!!!! 완전 신기행 >_<
innerHTML로 내용 조작하기
innerHTML 프로퍼티를 사용하면 요소 안의 HTML을 문자열 형태로 받아올 수 있다.
요소 안 HTML을 수정하는 것도 가능하다. innerHTML은 페이지를 수정하는 데 쓰이는 강력한 방법의 하나이다.
<body>
<p>p 태그</p>
<div>div 태그</div>
<script>
alert( document.body.innerHTML ); // 내용 읽기
document.body.innerHTML = '새로운 BODY!'; // 교체
</script>
</body><body>
<script>
document.body.innerHTML = '<b>test'; // 닫는 태그를 잊음
alert( document.body.innerHTML ); // <b>test</b> (자동으로 수정됨)
</script>
</body>innerHTML을 사용해 문서에 <script> 태그를 삽입하면 해당 태그는 HTML의 일부가 되긴 하지만 실행은 되지 않는다고 한다.
‘innerHTML+=’ 사용 시 주의점
elem.innerHTML+="추가 html"을 사용하면 요소에 HTML을 추가할 수 있다.
chatDiv.innerHTML += "<div>안녕하세요<img src='smile.gif'/> !</div>";
chatDiv.innerHTML += "잘 지내죠?";
그런데 'innerHTML+='은 추가가 아니라 내용을 덮어쓰기 때문에 주의해서 사용해야 한다.
즉, innerHTML+=는 아래와 같은 일을 한다.
- 기존 내용 삭제
- 기존 내용과 새로운 내용을 합친 새로운 내용을 씀
기존 내용이 '완전히 삭제’된 후 밑바닥부터 다시 내용이 쓰여지기 때문에 이미지 등의 리소스 전부가 다시 로딩된다.
chatDiv 예시의 chatDiv.innerHTML+="잘 지내죠?" 윗줄의 HTML 내용이 재생성되고 smile.gif 역시 다시 로딩된다.
textContent로 순수한 텍스트만
textContent를 사용하면 요소 내의 텍스트에 접근할 수 있습니다. <태그>는 제외하고 오로지 텍스트만 추출할 수 있다.
사용자가 입력한 임의의 문자열을 다시 출력해주는 경우를 생각해본다.
- innerHTML을 사용하면 사용자가 입력한 문자열이 ‘HTML 형태로’ 태그와 함께 저장된다.
- textContent를 사용하면 사용자가 입력한 문자열이 ‘순수 텍스트 형태로’ 저장되기 때문에 태그를 구성하는 특수문자들이 문자열로 처리된다.
<div id="elem1"></div>
<div id="elem2"></div>
<script>
let name = prompt("이름을 알려주세요.", "<b>이보라</b>");
elem1.innerHTML = name;
elem2.textContent = name;
</script>- 첫 번째 <div>엔 이름이 'HTML 형태’로 저장되서 입력한 태그는 태그로 해석되어 굵은 글씨가 출력된다.
- 두 번째 <div>엔 이름이 '텍스트 형태’로 저장된다. 따라서 입력한 값 그대로 <b>이보라</b>가 출력된다.
개발을 하다보면 사용자의 입력값을 받아 처리해야 하는 경우가 많은데, 이때 사용자가 입력한 값은 텍스트로 처리되어야 한다.
예상치 못한 HTML이 사이트에 침투하는 것을 막으려면 textContent를 사용하기!!
hidden 프로퍼티
hidden 속성과 hidden 프로퍼티는 요소를 보여줄지 말지 지정할 때 사용할 수 있다.
hidden은 HTML 안에서 쓸 수도 있고 자바스크립트에서도 쓸 수 있다.
<div>아래 두 div를 숨기기</div>
<div hidden>HTML의 hidden 속성 사용하기</div>
<div id="elem">자바스크립트의 hidden 프로퍼티 사용하기</div>
<script>
elem.hidden = true;
</script>hidden은 기술적으로 style="display:none"와 동일하다고 한다.
hidden을 사용해 요소를 깜빡이게 해보면?
<div id="elem">깜빡이는 요소</div>
<script>
setInterval(() => elem.hidden = !elem.hidden, 1000);
</script>
메시지 생성하기
메시지가 들어갈 div는 세 단계로 만들 수 있다.
// 1. <div> 요소 만들기
let div = document.createElement('div');
// 2. 만든 요소의 클래스를 'alert'로 설정
div.className = "alert";
// 3. 내용 채워넣기
div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";이렇게 세 단계를 거치면 요소가 만들어진다. 그런데 요소를 만들긴 했지만, 아직 이 요소는 div라는 이름을 가진 변수에 불과하기 때문에 페이지엔 나타나지 않는다.
삽입 메서드
div가 페이지에 나타나게 하려면 document 내 어딘가에 div를 넣어줘야 한다.
document.body로 참조할 수 있는 <body>안 같은 곳에!
요소 삽입 메서드 append를 사용한 코드 document.body.append(div)를 사용해 직접 새롭게 만든 요소 노드를 페이지에 나타내기
<style>
.alert {
padding: 15px;
border: 1px solid #d6e9c6;
border-radius: 4px;
color: #3c763d;
background-color: #dff0d8;
}
</style>
<script>
let div = document.createElement('div');
div.className = "alert";
div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";
document.body.append(div);
</script>
자바스크립트에서 지원하는 노드 삽입 메서드
- node.append(노드나 문자열) – 노드나 문자열을 node 끝에 삽입
- node.prepend(노드나 문자열) – 노드나 문자열을 node 맨 앞에 삽입
- node.before(노드나 문자열) –- 노드나 문자열을 node 이전에 삽입
- node.after(노드나 문자열) –- 노드나 문자열을 node 다음에 삽입
- node.replaceWith(노드나 문자열) –- node를 새로운 노드나 문자열로 대체
삽입 메서드엔 임의의 노드 목록이나 문자열을 넘겨줄 수 있다. 문자열을 넘겨주면 자동으로 텍스트 노드가 만들어진다.
너무 중요한 내용들인데, 프로젝트도 해야할 일들이 많아서 너무 아쉽다.
이번 주에도 시간이 있을지 모르겠네
여유있게 꼭 마치도록 하고, 남은 시간에 밀린 공부들 복습 꼭 해서 다음 주에 뒤쳐지지 않고 싶다!!!!!
하는데까지 하는거지 파이퉹!!!!!
'📖 나의 개발일지 (WIL&TIL)' 카테고리의 다른 글
| [20일차] 오늘의 개발일지 (TIL) (0) | 2022.11.25 |
|---|---|
| [19일차] 오늘의 개발일지(TIL) (0) | 2022.11.24 |
| [17일차] 오늘의 개발일지(TIL) (2) | 2022.11.22 |
| [16일차] 월요팅! 페이스 조절도 필요한 오늘의 개발일지(TIL) (1) | 2022.11.21 |
| [3회차 주말] 다음 주 프로젝트를 위한 빌드업 작업! 주말 개발일지(WIL) (1) | 2022.11.19 |
댓글