[TIL] 23.04.03

오늘의 나는 무엇을 잘했을까?

정리를 하며 공부하는데 요령이 조금 생긴 것 같다. 조금 더 빨리 정리가 가능하니 강의를 듣고 시간이 좀 남아 다른 공부를 할 수 있었다.

오늘의 나는 무엇을 배웠을까?

JS

1. 자바스크립트로 HTML 태그 선택하기

1-1. id 로 태그 선택

• document.getElementById('id');
• document 객체의 getElementById 메소드
• JS로 딱 하나만의 요소를 선택하고 싶을 때 (id가 HTML에서 고유한 값)
• 존재하지 않는 id 선택시 null 값 반환

1-2. class 속성으로 태그 선택

• document.getElementsByClassName('class');
• document 객체의 getElementsByClassName 메소드
• HTML Collection 형태 -> 유사 배열 (array-like)
• HTML Collection 내 요소의 순서는 깊이와 상관 없이 위에서부터 차례로
• 존재하지 않는 class 선택시 undefined 값 반환

1-3. tag 이름으로 태그 선택

• document.getElementsByTagName('tag');
• HTML 문서 내의 해당하는 모든 태그 선택
• 많은 요소를 한꺼번에 다뤄 실수가 생길 수 있기 때문에 잘 사용되지는 않음

1-4. css 선택자로 태그 선택

• document.querySelector('css');
  - 만약 동일한 css 선택자를 사용하는 (e.g. class name) 여러개의 요소가 있다면 그 중 가장 처음 요소만 선택
  - 존재하지 않는 요소 선택 시 null 값 반환
• document.querySelectorAll('css')
  - NodeList 형태 -> 유사 배열
  - 활용이 유연하여 대체로 많이 사용됨
  - 존재하지 않는 요소 선택 시 빈 NodeList 반환

2. 유사 배열 (Array-Like Object)

2-1. 유사 배열이란?

• 배열과 모양은 같지만, 완벽히 배열은 아닌 형태
• e.g. HTML Collection

2-2. 유사 배열의 조건

• 숫자 형태의 indexing이 가능함
  - 앞선 사진을 보았을 때 0부터 시작하는 숫자 형태의 index가 있음을 알 수 있음
  - index를 통해 요소에 접근 가능함
• length 프로퍼티 존재
  - length 프로퍼티가 없다면 단지 숫자 형태의 key를 가진 일반적인 객체
  

2-3. 배열과 유사 배열의 차이점

• 유사 배열은 배열의 기본 메소드를 사용할 수 없음
  - 따라서 내부 요소는 배열처럼 다룰 수 있게 하며 배열의 기본적인 메소드 사용을 막고 싶을 때,
  - 일반 배열에는 없는 특별한 메소드를 제공하고 싶을 때 유사 배열 활용
• Array.isArray(유사배열) === false

3. DOM (Document Object Model)

3-1. DOM 이란?

• 웹 페이지에 나타난 HTML 문서 전체를 객체로 표현한 것
• document 객체가 웹 문서의 최상단 객체
• console.log(document);

• 태그 형태가 출력
• console.dir(document);

• 객체 형태로 출력
• DOM을 활용하면 자바스크립트로 HTML을 자유롭게 다룰 수 있음

3-2. DOM 트리

• Document 객체를 최상단으로 하여 구조를 표현한 것
• 각 객체를 노드(Node) 라고 표현
• 부모 <-> 자식 노드, 형제 노드로 구성
• 노드 타입 (Node Type)
  1. 요소 노드(Element Node) : 태그를 표현하는 노드
  2. 텍스트 노드(Text Node) : 문자를 표현하는 노드
  - 요소 노드의 자식 노드가 되며, 스스로는 자식 요소를 가질 수 없음
  3. 코멘트 노드... 등 총 12가지의 노드 타입이 존재

3-3. DOM 트리 활용하여 태그 선택 (요소 노드)

1. 자식 요소 노드

   • children 프로퍼티 : 자식 요소를 HTML Collection으로 반환
   • firstElementChild 프로퍼티 : 해당 요소의 첫번째 자식 요소 선택
   • lastElementChild 프로퍼티 : 헤당 요소의 마지막 자식 요소 선택

2. 부모 요소 노드

   • parentElement 프로퍼티 : 부모 요소를 선택

3. 형제 요소 노드

   • previousElementSibling 프로퍼티 : 해당 요소 전 혹은 좌측의 형제 요소 선택
   • nextElementSibling 프로퍼티 : 해당 요소의 다음 혹은 우측의 형제 요소 선택

3-4. DOM 트리 활용하여 태그 선택 (모든 노드)

프로퍼티	유형	결과
node.childNodes	자식 노드	node의 자식 NodeList
node.firstChild	자식 노드	node의 첫번재 자식 노드 하나
node.lastChild	자식 노드	node의 마지막 자식 노드 하나
node.parentNode	부모 노드	node의 부모 요소 하나
node.previousSibling	형제 노드	node의 이전 혹은 좌측에 있는 노드 하나
node.nextSibling	형제 노드	node의 다음 혹은 우측에 있는 노드 하나

• 다만, 잘 활용되지는 않음
• DOM 트리가 구성될 때 줄 바꿈과 들여쓰기도 텍스트 노드로 생성되는데,
• 해당 텍스트 노드를 파악하기 어려워 위 프로퍼티로 요소에 접근을 하면 예상치 못한 노드 선택할 수 있음

3-5. 요소 노드의 주요 프로퍼티

1. innerHTML

   • 요소 안의 HTML 자체를 문자열로 반환
   • 태그와 태그 사이의 줄바꿈이나 들여쓰기도 모두 포함
   • 보통 요소 안의 HTML을 수정할 때 자주 사용

   

2. outerHTML

   • 해당 요소를 포함한 HTML 자체를 문자열로 반환
   • 태그와 태그 사이의 줄바꿈이나 들여쓰기도 모두 포함
   • 값을 할당하면 처음 선택한 요소는 삭제 -> 해당 요소를 포함한 HTML이 변경 되기 떄문

     

3. textContent

   • 요소 안의 내용 중 HTML 제외한 텍스트만 반환
   • 내부의 줄바꿈이나 들여쓰기 모두 포함
   • 특수문자(e.g. HTML 태그)도 텍스트로 처리

     

3-6. 요소 노드 추가하기

1. 요소 노드 만들기 : document.createElement
2. 요소 노드 꾸미기 : textContent , innerHTML 등등...
3. 요소 노드 추가하기
   NODE.prepend(node); : NODE의 제일 첫번째 자식요소로, 파라미터로 전달한 요소 추가
   NODE.append(node); : NODE의 가장 마지막 자식요소로, 파라미터로 전달한 요소 추가
   NODE.before(node); : NODE의 앞에 형제요소로, 파라미터로 전달한 요소 추가
   NODE.after(node); : NODE의 뒤에 형제요소로, 파라미터로 전달한 요소 추가
   - 위 메소드들은 요소 노드를 추가할 때 뿐만 아니라 단순 문자열도 추가 가능
   - 파라미터로 여러개 값을 주면 순서대로 추가
   

3-7. 요소 노드 삭제 / 이동하기

1. 삭제
   NODE.remove(); 메소드 활용
2. 이동
   요소 노드를 추가할 때 사용했던 메소드 (prepend , append , before , after) 활용
   e.g. NODE.append(이동시키고 싶은 요소 노드);

3-8. HTML 속성 다루기

• DOM이 생성될 때 HTML 태그의 속성은 요소 노드의 프로퍼티가 됨
• 단, HTML 표준이 아닌 속성을 태그에 추가하고 그 값에 접근하면 undefined 반환
• 또한 클래스 속성은 className 이라는 이름으로 프로퍼티 생성, 나머지는 이름 그대로

1. 속성에 접근하기
   • 비표준 속성에 접근하기 위해서는 element.getAttribute('attr') 활용 가능
   • 표준 속성은 그냥 element.속성이름 으로 접근 가능
2. 속성 추가 또는 수정하기
   • element.setAttribute('attr', 'value')
   • 없었던 속성이면 추가, 있던 속성이면 수정
3. 속성 제거하기
   • element.removeAttribute('attr')
   • 현재까지 살펴본 3가지 메소드 모두 속성 이름은 대소문자 구분 X => 자동으로 소문자 변환하여 동작

3-9. 스타일 다루기

1. style 프로퍼티 사용
   • element.style.property = 'style';
   • 이 때 스타일 속성이 한 단어 이상으로 이어졌다면 (e.g. text-decoration) 이어서 camelCase로
   • HTML 태그에 직접 style 속성을 추가하므로 권장되지 않음
2. className 프로퍼티 사용
   • element.className = 'class';
   • 기존 있던 클래스를 유지하고 싶을 때는 적합하지 않을 수 있음, 아예 새로운 클래스를 할당하므로
3. classList 프로퍼티 사용
   - 클래스의 속성값을 유사배열로 다룸
   - element.classList
   - classList의 메소드인
   add('class', 'class', ...) : classList에 추가, 여러개 파라미터 주면 동시에 추가
   remove('class', 'class', ...) : classList에서 제거, 여러개 파라미터 주면 동시에 제거
   toggle('class', true/false) : classList에 있으면 제거 없으면 추가, 두번째 파라미터 true - add 기능만, false - remove 기능만, 사실 자주 사용 X

마지막 console.log vs console.dir

3. 이벤트 (Event)

• 웹 페이지에서 일어날 수 있는 거의 대부분의 일, HTML 요소에 일어날 수 있는 일
• e.g. 클릭, 스크롤 등등
• 다양한 이벤트 종류

3-1. 이벤트 핸들링 (Event Handling)

• 이러한 이벤트를 처리하는 것
• 이벤트 핸들러를 등록함으로써 처리함
• element.addEventListner('event_type', handler);
  어떤 이벤트를 다룰지, 이벤트가 발생하면 어떤 동작을 할지를 파라미터로
  handler 부분에 함수를 작성할 때 ()를 사용하면 제대로 등록이 되지 않음
  => 함수가 바로 호출이 되어 동작하고 반환한 return 값이 파라미터로 들어가기 때문
• element.removeEventListner('event_type', handler);
  반드시 등록할 때 사용했던 핸들러를 그대로 전달해야 함

3-2. 이벤트 객체 (Event Object)

• 웹 페이지에서 이벤트가 발생하면 관련 정보를 담은 객체가 생성
• 이를 이벤트 객체라고 함
• 이벤트 객체는 이벤트 핸들러의 첫번째 파라미터로 암묵적 전달
• 이벤트 객체의 다양한 프로퍼티 - 7.1부터

3-3. 이벤트 버블링(bubbling) 과 캡쳐링(capturing)

• HTML 요소에 이벤트가 발생하면 연쇄적 반응이 일어남 => 이벤트 전파(Event Propagation)
• 전파의 2가지 방식이 버블링과 캡쳐링이다.

1. 이벤트 버블링
   • 자식요소에서 발생한 이벤트가 부모요소로 전파되는 것
   • 버블링이 일어나 부모요소로 이벤트가 전파되면 해당 요소의 등록된 이벤트 핸들러가 동작
   • stopPropagation() 메소드로 버블링을 막을 수 있음 => 필요한 경우가 아니면 사용 X
2. 이벤트 캡쳐링
   • 자식요소에서 발생한 이벤트가 부모요소부터 시작하여 이벤트를 발생시킨 자식요소까지 도달하는 것
   • 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면 addEventListener 메소드의 3번째 프로퍼티로 true 전달

3-3. 이벤트 위임 (Event Delegation)

• 다수의 자식요소에 각각 이벤트 핸들러를 바인딩하는 대신,
• 하나의 부모 요소에 이벤트 핸들러를 바인딩 하는 방법
• 이벤트 버블링이 일어나기 때문에 가능함
• 이벤트 객체의 target 프로퍼티를 활용하여 발생시킨 요소에 적용

3-4. 브라우저 기본 동작 변경

1. Event.preventDefault()
   • HTML 요소는 각각 기본 동작을 가지고 있음 (e.g. a tag => href 값으로 이동)
   • 이러한 기본 동작을 중단시켜 줌
2. Event.stopPropagation()
   • 한 요소를 이용하여 이벤트를 처리한 후 부모요소로 이벤트가 전파 되는 것을 중단
   • 부모요소에 동일한 이벤트에 대한 다른 핸들러가 지정되어 있을 경우 사용

오늘의 나는 어떤 어려움이 있었을까?

오늘 오랜만에 10시부터 10시까지 공부를 하다보니 마지막에 조금 피곤했던 것 같다. 체력 관리가 필요하다고 느꼈다.

내일의 나는 무엇을 해야할까?

• 반응형 웹 퍼블리싱 수강
• CS 강의 1개 수강
• 개인 / 팀 데일리 미션