Zero1's Note

2021-03-02 TIL

  1. fact

    • 코드숨 5강 풀이 보고 리팩터링 하기
    • 코드숨 6강 문서 읽기
    • 코드숨 6강 동영상 보기
    • 코드숨 6강 보면서 따라치기
    • 코드숨 6강 안보고 강의 부분 해보기
    • 퇴사 회고 작성하기
    • DOM을 깨우치다 20페이지 읽기
    • 자기전에 object 읽다 자기

  2. feelings

    • 오늘 계획한 일정을 모두 완수해서 기분이 좋다.
    • 오늘 약 3시간 마다 한번씩 30분씩 걷다가 왔다.
    • 공부할 시간이 많아서 행복하다.

  3. finding

    • 코드숨 router

      • 강의에서 나만의 목차를 만들었다.

        1. 잘못된 url 접근 처리
        2. window.location.pathname을 이용한 간단한 라우터
        3. 라우팅 테이블을 이용한 웹 router
        4. browser Router
        5. switch
        6. route
        7. memory Router
        8. Link
        9. Memory Router를 이용한 test 코드 작성
    • DOM을 깨우치다 (1p~20p)
    • Document Object Model(DOM)은 자바스크립트 Node 개체의 계층화된 트이다.
    • 브라우저는 HTML 코드를 해석해서 트리 형태로 구조화된 노드들을 가지고 있는 DOM을 생성한다.
    • HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 개체들의 트리 구조로 변환된다.
    • DOM의 목적은 JS를 사용해서 이 문서에 대한 스크립트 작성(삭제, 추가, 변경, 이벤트처리, 바꾸기)를 위한 프로그래밍 인터페이스를 제공하는 것이다.
    • 자주 사용되는 노드 개체 유형
    • DOCUMENT_NODE (window.document)
    • ELEMENT_NODE(body, a, p script, style, html, h1)
    • ATTRIBUTE_NODE(class=“funEdges”)
    • TEXT_NODE(줄바꿈과 공백을 포함한 HTML 문서 내의 텍스트 문자)
    • DOCUMENTFRAGMENTNODE(document.createDocumentFragment())
    • DOCUMENTTYPENOED )
    • 모든 노드 유형이 Node로 부터 상속받으며 뿐만아니라 상속 체인이 길어질 수도 있다.
    • Object < Node < Element < HTMLElement< (예: HTML * Element)
    • 모든 노드가 prototype 체인의 속성뿐만 아니라 생성자로부터 일련의 기본 속성 및 메서드를 상속받는다.
    • 모든 노드 개체가 Node 개체로 부터 상속 속성과 메서드를 상속 받으며, 이는 DOM을 조작, 조사, 탐색하는 기준이 되는 값과 함수이다.
    • 자주 사용되는 Node 속성 및 메서드며 하위 노드 인터페이스에 속한 노드들을 다루기 위한 관련 속성들이다.

    • Node 속성

      1. childNodes
      2. firstChild
      3. lastChild
      4. nextSibling
      5. nodeName
      6. nodeName
      7. nodeType
      8. nodeValue
      9. parentNode
      10. previousSibling

    • Node 메서드

      1. appendChild()
      2. cloneNode()
      3. compareDocumentPosition()
      4. contains()
      5. hasChildNode()
      6. insertBefore()
      7. isEqualNode()
      8. removeChild()
      9. replaceChild()

    • Document 메서드

      1. document.createElement()
      2. document.createTextNode()

    • HTML *Element 속성

      1. innerHTML
      2. outerHTML
      3. textContent
      4. innerText
      5. outerText
      6. firstElementChild
      7. lastElementChild
      8. nextElementChild
      9. previousElementChild
      10. children

    • HTML Element 메서드

      1. insertAdjacentHTML()
    • Node로 부터 상속받는 nodeType 및 nodeName속성은 노드의 유형과 이름을 식별하기 위해 사용되며 노드의 유형을 판별하는 가장 빠른 방법은 nodeType 속성을 확인하는 것이다.
    • nodeValue 속성은 TextNode와 Comment 제외한 대부분의 노드에서 null을 반환하며 이들의 용도는 text와 comment 노드에서 실제 텍스트 문자열을 추출을 위함이다.
    • 브라우저가 HTML 문서를 해석할때 HTML 파일 내용을 기반으로 노드와 트리를 구성하며 브라우저는 HTML 문서를 초기 로딩할 때 노드 생성을 처리하지만 js를 사용해서 직접 노드를 생성하는 것도 가능하다.
    • createElement()
    • createTextNode()
    • js 문자열을 사용하여 DOM에 element 및 text 노드를 생성 및 추가할 수 있다.
    • innerHTML : HTML 파서를 호출하여 문자열을 파싱한 후에 HTML 요소를 실제 DOM 노드로 변환하여 DOM에 추가
    • outerHTML : 위와 같이 파싱한 후에 내용을 해당 DOM을 대체함.
    • textContext : textNode를 생성 파싱하지 않고 단순 text로 들어간다.
    • insertAdjacentHTML : 시작 태그의 앞, 뒤, 종료태그의 앞, 뒤에 노드를 삽입이 가능하게 해준다. 하지만 beforebegin 및 afterend옵션은 노드가 DOM 트리 내에 존재하고 부모 요소를 가진 경우에만 동작한다.
    • appendChild 및 insertBefore 노드 메서드는 js 노드 개체를 DOM 트리에 삽입할 수 있게 해준다.
    • appendChild : 하나 또는 여러 노드를 메서드가 호출된 노드의 자식 노드 끝에 삽입할 수 있게 해준다.
    • insertBefore : 자식 노드 목록 끝에 노드를 추가하는 것 외 삽입 위치를 조정하는 것이 필요할 경우 사용 되며, 첫번째 매개변수는 삽입될 노드와 두번째 매개변수는 삽입하고자 하는 문서 내의 참조 노드이다.

  4. Future Action Plan

    • 3시간 마다 걷기
    • 행복하게 코딩하기 못하는 것은 당연한것 ^^.. 못하니까 공부하는것
    • 내가 만든 목차에 살 붙혀서 정리하기
    • 6강 안보고 다시 쳐보기
    • 6강 계획 세우기
    • dom 책읽기
    • 이력서 준비
Written by@Zero1
This blog is for that I organize what I study and my thinking, feeling and experience.

GitHub