TIL 16일차 - [JS/브라우저] DOM

• DOM의 개념을 이해한다.

  o
  Document Object Model의 약자로
  HTML 요소를 Object처럼 조작할 수 있는 API를 제공한다.

• DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다.

  o
  DOM은 HTML의 아주 작은 부분까지 접근할 수 있는 구조를 만드는데,
  이 구조를 DOM 트리라고 한다.
  HTML 문서는 태그로 이루어진 트리 구조로 표현되는 반면,
  DOM은 HTML 문서를 파싱(분석)하여 객체 모델로 변환하는 과정에서
  트리 구조로 표현된다.
  트리 구조 탐색 방법에는 깊이 우선 탐색과 너비 우선 탐색이 있다.

• HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다.

  o

  1. 적절한 위치에 <script>파일 추가해야 한다.
     스크립트 파일은 HTML 문서에서 불러온 '순서대로' 실행된다.
     따라서, 스크립트 파일을 불러올 때는
     HTML 문서의 끝에 위치시키는 것이 좋다.
     이렇게 하면 HTML 문서의 로딩이 끝난 후에
     스크립트 파일이 로딩되어 페이지 성능이 개선될 수 있다.

  2.<script> 파일의 크기가 크지 않도록 한다.
  스크립트 파일이 클수록 로딩 시간이 느려질 수 있기 때문에
  가능하면 스크립트 파일의 크기를 줄이는 것이 좋다.
  이를 위해, 코드를 압축하거나 불필요한 주석과 공백을 제거하는 등의
  방법을 사용할 수 있다.

  3.<script> 파일을 캐싱한다.
  스크립트 파일을 캐싱하면, 로컬 저장소에서 불러올 수 있기 때문에
  사용자가 페이지를 다시 로드할 때
  매번 스크립트 파일을 다시 다운로드할 필요가 없어져서
  페이지 로딩 속도가 빨라질 수 있다.
  따라서, HTTP 헤더를 이용하여
  스크립트 파일을 캐싱할 수 있도록 설정하는 것이 좋다.

  4.<script> 파일을 외부 도메인에서 불러온다.
  다른 도메인에서 호스팅되는 스크립트 파일을 불러오면,
  해당 도메인의 서버 부하를 줄일 수 있고,
  캐싱 기능을 활용할 수 있어 성능을 개선할 수 있다.
  하지만, 이 방법을 사용할 경우 크로스 도메인 이슈가 발생할 수 있으므로
  이를 방지하기 위해 CORS 설정을 해주어야 한다.

  5.<script>파일을 불러오는 과정에서 에러가 발생할 수 있다.
  이 경우, 해당 파일이 로드되지 않아
  페이지가 올바르게 동작하지 않을 수 있다.
  따라서, 스크립트 파일을 로드할 때는
  에러 처리를 반드시 해주어야 한다.

• DOM과 JavaScript의 차이에 대해 이해할 수 있다.

  o
  DOM(Documnet Object Model)은
  HTML, XML 등의 문서를 객체 모델로 표현한 것이며,
  문서의 구조, 콘텐츠, 스타일 등을 프로그래밍적으로 조작할 수 있도록
  API(Application Programming Interface)를 제공한다.

  반면, JavaScript는 프로그래밍 언어로,
  DOM을 포함하여 웹 페이지를 제어하기 위해 사용된다.
  JavaScript를 사용하여 DOM을 조작하면,
  문서의 구조와 콘텐츠를 변경하거나,
  스타일을 수정하거나, 이벤트 처리 등을 할 수 있다.

  즉, DOM은 HTML 문서를 객체 모델로 표현하고,
  JavaScript는 DOM을 이용하여 HTML 문서를 조작하는 데 사용된다.

  DOM과 JavaScript는 서로 밀접하게 연관되어 있으며,
  웹 개발에서 DOM과 JavaScript는 뗄 수 없는 존재다.

• DOM을 JavaScript로 조작하여 HTML Element를 추가할 수 있다. (CREATE)

  o
  document.createElement('추가할 HTML Element')

  변수로 설정하여 생성한 요소를 할당할 수 있다.

  ex) <div>요소를 추가한다고 해보자.
  const oneDiv = document.createElement('div')

• DOM을 JavaScript로 조작하여 HTML Element를 조회할 수 있다. (READ)

  o
  DOM으로 HTML Element를 조회하기 위해서는
  querySelector의 첫 번째 인자로 선택자를 전달하여 확인할 수 있다.
  선택자로는 HTML요소('div'), id('#one'), class(.text)가 주로 많이 사용된다.
  ('#one'은 id가 one/ .two은 class가 text인 것을 예시로 들었다.)

  -하나의 요소를 조회할 때,

  • const oneDiv = document.querySelector('.text')
    : querySelector에 '.text을 첫 번째 인자로 넣으면,
    클래스 이름이 two인 HTML 요소 중 첫 번째 요소를 조회할 수 있다.

  -여러 개의 요소를 조회할 때,

  • const texts = document.getElementsByClassName('text')

  -해당 요소를 전부 조회할 때,

  • const texts = document.querySelectorAll('.text')
  • const texts = document.getElementsByTagName('text')

• DOM을 JavaScript로 조작하여 HTML Element를 변경할 수 있다. (UPDATE)

  o
  -해당 요소에 내용을 추가할 때, textContent 메서드 사용.
  : oneDiv.textContent = 'I just got some contents.'
  console.log(oneDiv)
  // <div>I just got some contents.</div>

  -해당 요소의 css 스타일링이 적용되도록 할 때, classList 메서드 사용.
  : oneDiv.classList.add('text')
  console.log(oneDiv)
  //<div class="text">I just got some contents.</div>

  -id와 class 말고 다른 attribute를 추가할 시,
  setAttribute 메서드를 사용.
  : setAttribute(name, value)
  name에는 값을 설정할 속성의 이름을 지정하고,
  value에는 속성에 할당할 값이 포함된 문자열을 작성한다.

• DOM을 JavaScript로 조작하여 HTML Element를 삭제할 수 있다. (DELETE)

  o
  -삭제하려는 요소의 위치를 알고 있으면, remove() 메서드 사용.
  oneDiv.remove()

  -여러 개의 자식 요소를 삭제할 경우, innerHTML을 사용.
  그러나 XSS Attract의 보안상의 문제가 발생하므로 사용 권장 안 함.
  document.querySelector('#container').innerHTML='';

  -자식 요소를 지정해서 삭제하는 경우, removeChild()메서드 사용.
  document.querySelector('#container').removeChild(text)

• 생성한 HTML Element를 부모 엘리먼트의 자식 엘리먼트로 포함할 수 있다. (APPEND)

  o
  생성, 추가, 삭제 등 변경을 해도 트리 구조로 이루어진
  DOM 요소에는 이 변경된 요소들이 적용되지 않는다.
  따라서 부모 엘리먼트의 자식 엘리먼트로 적용시켜줘야 한다.

  const container = document.querySelector('#container')
  container.append(oneDiv)

• innerHTML과 textContent의 차이를 이해한다.

  o
  둘 다 DOM 요소의 텍스트 내용을 설정하거나 반환하는 데 사용되는 속성이다.
  그러나 중요한 차이가 있다.
  innerHTML은 HTML 태그를 해석하고 해당 태그의 결과를 반환한다.
  그래서 태그까지 같이 반환한다.
  반면, textContent는 요소의 모든 자식 요소를 포함한 텍스트 내용을
  반환하며, HTML 태그를 해석하지 않으므로 태그 없이 텍스트만 반환한다.

• DOM과 JavaScript의 차이에 대해 이해할 수 있다.

  o (위에서 설명함)

• createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다.

  o
  createDocumentFragment()는
  DOM API에서 제공하는 메서드 중 하나로,
  빈 문서 조각(document fragment) 객체를 생성한다.

  문서 조각은 일시적인 DOM 구조를 만들기 위한 도구로서,
  노드를 일시적으로 보관하고 다룰 수 있는 가상의 컨테이너 역할을 한다.
  이를 이용해 여러 개의 노드를 동시에 조작할 수 있으며,
  노드를 추가하거나 삭제하는 등의 작업이 완료된 후에 한꺼번에 DOM에 반영할 수 있다.

• HTML5 template tag 사용법을 이해할 수 있다.

  o
  HTML5에서 추가된 <template> 태그는 미리 정의된 콘텐츠를 가지고 있으며,
  이를 사용자가 나중에 JavaScript를 이용하여 동적으로 삽입할 수 있는 방법을 제공함.

  • id 속성은 템플릿을 식별하는 데 사용

  <template id="templateId">
  <!-- 미리 정의된 콘텐츠 -->
  </template>

  • JavaScript를 이용하여 템플릿 콘텐츠 가져오기

   const template = document.querySelector('#templateId');

  • 템플릿 콘텐츠를 동적으로 삽입하기

   const clone = template.content.cloneNode(true);
    document.body.appendChild(clone);

• element와 node의 차이를 이해할 수 있다.

  o
  Node는 HTML 문서에서 모든 구성 요소를 포함하는 기본적인 단위이며,
  Element는 Node의 하위 개념 중 하나다.
  즉, 모든 Element는 Node이지만, 모든 Node가 Element는 아니다.

  Node는 요소(Element), 텍스트, 주석, 속성(Attribute) 등이 모두 Node다.
  따라서, Node는 Element를 포함하여
  HTML 문서의 모든 내용을 나타내는 넓은 의미로 사용될 수 있다.

  반면에, Element는
  HTML 문서에서 태그로 둘러싸인 부분을 나타내는 특정 유형의 Node다.
  예를 들어, <p> 태그는 <p>와 </p> 사이의 내용을 포함하는 Element를 나타낸다.

• children과 childNodes의 차이를 이해할 수 있다.

  o
  children과 childNodes는
  둘 다 DOM의 요소(element)의 자식 노드(child node)를 나타내지만,
  약간의 차이가 있다.

  children은 해당 요소의 자식 노드 중에서
  요소 노드(element node)만을 선택한다.
  즉, 텍스트 노드(text node)나 주석 노드(comment node) 등은 선택하지 않는다.

  childNodes는 해당 요소의 모든 자식 노드를 선택한다.
  즉, 요소 노드(element node) 뿐만 아니라
  텍스트 노드(text node)나 주석 노드(comment node) 등 모든 노드를 선택한다.

• remove와 removeChild의 차이를 이해할 수 있다.

  o

  삭제하려는 요소의 위치를 알고 있으면, remove() 메서드 사용.
  oneDiv.remove()

  자식 요소를 지정해서 삭제하는 경우, removeChild()메서드 사용.
  document.querySelector('#container').removeChild(text)

• 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?

  x
  JavaScript에서 appendChild() 메서드는
  주어진 부모 노드의 자식 노드 목록 끝에 새로운 자식 노드를 추가한다.
  따라서 같은 엘리먼트를 appendChild()로 추가하면 기존 엘리먼트를 복사하지 않고,
  그저 기존 엘리먼트의 참조가 추가한다.

• offsetTop 등을 이용하여 좌표 정보를 조회할 수 있다.

  o
  offsetTop은 요소(element)의 상위 요소(parent element)로부터의
  거리를 나타내는 속성이다.
  조회하려는 해당 요소.offsetTop으로 해당 요소의 화면상의 위치를 조회할 수 있다.
  조회된 값은 화면상에서 해당 요소의 위치를 나타내므로,
  이를 이용하여 요소를 이동하거나 위치에 따른 다른 작업을 수행할 수 있다.

• offsetWidth 등을 이용하여 크기 정보를 조회할 수 있다.

  o
  offsetWidth는 요소의 가로(width) 크기를 포함하여
  테두리(border), 패딩(padding), 스크롤바 등을 포함한
  전체 너비를 나타내는 속성이다.
  따라서 조회하려는 해당 요소.offsetWidth으로
  해당 요소의 크기 정보를 조회할 수 있다.
  조회된 값은 요소의 가로 크기를 포함한 전체 너비를 나타내므로,
  이를 이용하여 요소를 크기에 따라 다른 작업을 수행할 수 있다.

• DOM 기초 실습을 통해, 구체적인 사용법을 익힐 수 있다.

  o

• querySelector를 활용하여, HTML 엘리먼트 정보를 가져올 수 있다.

  o
  (DOM을 JavaScript로 조작하여 HTML Element를 조회할 수 있다.
  (READ)에서 설명함)

• onclick, onkeyup 속성이나 addEventListener 메서드로
  이벤트 핸들러 함수를 HTML 엘리먼트에 적용할 수 있다.

  o
  onclick 속성은 HTML 요소가 마우스 클릭 이벤트를 수신하도록 지정하는 데 사용된다.

  ex) document.querySelector('#apply').onclick = displayAlert.

  onkeyup 속성은 HTML 요소가 키를 놓았을 때 이벤트를 수신하도록 지정하는 데 사용된다.

  ex) password1.onkeyup = function() {
  isMatch(password1.value, password2.value);
  }

  그러나, 이러한 속성은 복잡한 기능을 구현하기에는 제한적이며, 보다 강력한 이벤트 처리 기능을 원할 때, addEventListener() 메서드를 사용하는 것이 좋다.

  addEventListener() 메서드는 특정 이벤트가 발생했을 때 실행할 함수를 지정할 수 있으며, 이는 자바스크립트 코드에서 동적으로 할당하는 것이 가능하다.

  ex) document.querySelector('#apply').addEventListener('click', function(){
  alert("특정 이벤트가 발생했을 때, 실행할 함수를 지정할 수 있다.")
  }

• 이벤트 핸들러 함수에서 이벤트가 발생한 곳의 정보를 확인할 수 있다.

  o

• 이벤트 핸들러 함수로 유효성 검사를 실행할 수 있다.

  o

• 유효성 검사에 필요한 기술 요소를 익힐 수 있다.

  o

• 유효성 검사에 필요한 HTML 엘리먼트, CSS 속성이 무엇인지 알 수 있다.

  o

• 엘리먼트가 화면에 표시되거나 사라지게 만들 수 있다. (display: none)

  o
  display:none 속성은 화면상에서 표시되지 않게 만드는 속성으로,
  실제로 DOM 상에서는 엘리먼트가 존재하나, 브라우저에서 표시할 때는,
  마치 해당 엘리먼트가 레이아웃 상에서 없는 것처럼 취급한다.

  visibility: hidden은
  display: none이 브라우저에서 아예 영역조차 사라지는 것과는 달리,
  엘리먼트가 차지하는 영역을 그대로 남겨놓는다는 점에서 다르다.

• 유효성 검사에서 활용할 수 있는 정규 표현식의 기초 사용법에 대해 익힐 수 있다. (advanced)

  o
  정규 표현식(Regular Expression)은
  문자열 내에서 특정한 규칙(패턴)을 가진 문자열을
  찾아내는 데 사용하는 문자열 검색 패턴이다.

  따라서 유효성 검사에서 정규 표현식은
  특정한 규칙에 따라 작성된 문자열 패턴을 찾아내는 데 사용된다.
  일반적으로 이러한 검사는
  입력된 데이터가 올바른 형식으로 입력되었는지 여부를 확인하는 데 사용된다.

  정규 표현식을 활용하여 유효성 검사를 수행하는 기초적인 방법에는
  -정규 표현식에서 문자 검색은 해당 문자가 입력된 문자열에 포함되어 있는지 여부를 확인
  -정규 표현식에서 메타 문자는 문자열 내에서 특별한 의미를 가지는 문자로 백슬래시로 시작하는 특별한 문자로 표시된다.
  -문자 클래스는 검색하려는 문자의 범위를 지정하는 데 사용된다.
  대괄호([]) 안에 검색하려는 문자의 범위를 지정하면 된다.
  -정규 표현식에서 특수 문자는 일반적으로 키워드와 연관되어있다.
  이러한 문자는 정규 표현식에서 특별한 의미를 가지며,
  검색하려는 문자열 패턴을 보다 쉽게 찾을 수 있도록 도와준다.

• 관심사 분리를 적용하거나, 유효성 검사 함수를 따로 분리해서 설계할 수 있다. (advanced)

  o
  관심사 분리(Separation of Concerns)란,
  소프트웨어 설계에서 관심사를 분리하여 각각을 독립적으로 다루는 것을 말한다.
  이는 소프트웨어의 유지보수성과 확장성을 향상시키고
  코드의 재사용성을 높이는 데 도움을 준다.

  유효성 검사 함수를 따로 분리하여 설계하는 것은
  이러한 관심사 분리를 적용한 것이다.

  즉, 유효성 검사 함수를 하나의 독립적인 모듈로 분리하여
  다른 코드와 분리된 상태로 유지함으로써
  소프트웨어의 구조가 더 간결하고 응집성이 높아지며,
  유효성 검사 함수의 재사용성도 높아진다.

  또한, 유효성 검사 함수를 따로 분리하여 설계하면,
  유효성 검사를 수행하는 코드와 비즈니스 로직을 분리할 수 있으므로
  코드의 가독성이 높아진다.

• 기초적인 event를 알고, event handler를 element에 적용할 수 있다.

  o

• onclick에 직접 할당하는 것과 addEventListener의 차이를 이해한다.

  o
  어떤 이벤트가 발생할 떄, 작동하는 함수를 할당하는 방법에는 두가지가 있다.
  하나는 DOM 객체에 onclick을 직접 지정하는 것과
  addEventListener라는 메서드를 사용하여 할당하는 것이다.

  다만, 이벤트 속성(onclick)에 이벤트 핸들러를 등록할 때에는
  이벤트의 이름을 정확하게 작성해야 한다.
  또한, 함수의 실행 값(displayAlert())을 할당하면 안 되고,
  함수 그 자체(displayAlert)를 할당해야 한다.

• eventHandler 함수를 만들고, eventHandler의 첫 번째 인자를 사용할 수 있다.

  o

• 이벤트 객체에 대해서 더 자세히 알고 싶다면, 아래 키워드를 검색해서 학습하기

  -onsubmit
  : 폼(form)을 제출할 때 발생하는 이벤트로
  이벤트 핸들러를 이용하여 폼이 제출되기 전에
  데이터를 검증하거나 처리할 수 있다.

  -onchange
  : 폼 요소의 값이 변경될 때 발생하는 이벤트로
  해당 태그의 선택자나 값이 변경되는 경우에 발생한다.

  -onmouseover
  : 마우스 커서가 요소 위로 이동할 때 발생하는 이벤트로
  이벤트 핸들러를 이용하여 마우스가 요소 위로 이동했을 때
  특정 동작을 수행하도록 할 수 있다.

  -onkeyup : (위에서 설명함)

  -event.preventDefault
  : 이벤트의 기본 동작을 취소하는 메서드

  예를 들어, 폼 제출 이벤트에서 event.preventDefault()를 호출하면
  폼이 제출되지 않도록 막을 수 있다. 이 메서드는 이벤트 핸들러에서 호출된다.

• MDN에서 querySelector를 검색하여, 다음의 질문에 대해 학습하기

  -querySelector의 첫 번째 인자에 'div'를 넣으면 어떻게 될까?
  : HTML 문서에서 div 요소를 찾는다.
  이는 CSS 선택자를 사용하여 요소를 선택할 수 있도록 하는 웹 API 이다.

  -querySelector를 통해서 더 복잡한 작업을 할 수 있을까?
  : o
  querySelector를 사용하여 다양한 CSS 선택자를 활용하면,
  더 복잡한 작업을 수행할 수 있다.

  -querySelector의 부모는 꼭 document 객체여야만 할까?
  : x
  querySelector 메소드는 Document 객체뿐만 아니라,
  다른 요소의 자식 요소에서도 사용할 수 있다.

  Document 객체의 메소드이기 때문에,
  일반적으로는 document 객체에서 시작하여 하위 요소에서 특정 요소를 찾는다.
  그러나 querySelector 메소드를 사용하는 요소에서부터 검색을 시작할 수도 있다.

소감

🔡➡️💻➡️🤓👍

오늘은 나의 노력이 배신하지 않았다는 걸 몸소 느꼈던 하루였다.
과제를 주어진 시간 내에 혼자 해냈다는 게 스스로 대견하다고 생각했다.
이번주는 조금씩 예습할 시간이 생긴다.
어느 정도의 여유가 생기니 '내일은 뭐 배우지?' 살펴볼 수도 있고,
예습할 시간도 없이 복습하는 시간에 쫓긴다는 느낌이 덜하다.
조금씩 성장하고 있는 것 같은 기분이 든다.
역시 노력은 배신하지 않는다.
.
.
.
You're doing so great!
Keep It Up!👊