👨‍💻
프론트엔드 기술 블로그
  • 프론트엔드 기술 저장소
  • React
    • React Hook
      • useRef
      • useReducer
      • useCallback
      • useMemo
      • useState
      • useEffect
      • useContext
      • Custom Hook
  • Javascript
    • 자바스크립트 기본
      • 데이터타입
      • 배열메소드
      • 타입 및 객체 체크
      • this
        • bind, call, apply
      • 프로토타입
      • 클로저
      • 스코프
      • 함수
      • 호이스팅
    • ECMAScript 6
      • let, const
      • 화살표 함수
      • 구조분해할당
      • Promise
      • 템플릿 문자열 표현식
      • 이터레이션
      • 클래스 (Class)
      • 심볼 (Symbol)
      • 제너레이터
  • 객체지향설계
    • 객체 지향 설계 원칙
      • 단일 책임 원칙
      • 개방 폐쇄 원칙
      • 리스코프 치환 원칙
      • 인터페이스 분리 원칙
      • 의존 역전 원칙
  • 브라우저와 자바스크립트
    • Document Object Model
      • DOM API
      • 이벤트 (Event)
  • Node.js
    • 번들러
      • webpack 설정
    • node.js 버전 관리
  • HTTP
    • HTTP 기본
      • 1. 웹과 네트워크 기본
        • 1.1 웹은 HTTP로 나타낸다.
        • 1.2 HTTP 탄생과 성장
        • 1.3 네트워크 기본 TCP/IP
        • 1.4 HTTP와 관계가 깊은 프로토콜 IP/TCP/DNS
        • 1.5 이름 해결 담당 DNS
        • 1.6 각각과 HTTP와의 관계
        • 1.7 URI와 URL
      • 2. 프로토콜 HTTP
        • 2.1 HTTP는 클라이언트와 서버간에 통신을 한다.
        • 2.2 리퀘스트와 리스폰스를 교환하여 성립
        • 2.3 상태를 유지하지 않는 프로토콜 HTTP
        • 2.4 리퀘스트 URI로 리소스 식별
        • 2.5 HTTP 메소드
        • 2.6 메소드 사용
        • 2.7 지속연결로 접속량 절약
        • 2.8 쿠키를 사용한 상태관리
      • 3. HTTP 정보는 HTTP 메시지에 있다.
        • 3.1 HTTP 메시지
        • 3.2 리퀘스트 메시지와 리스폰스 메시지 구조
        • 3.3 인코딩으로 전송 효율을 높이다.
        • 3.4 여러 데이터를 보내는 멀티파트
        • 3.5 일부분만 받는 레인지 리퀘스트
        • 3.6 최적의 콘텐츠를 돌려주는 콘텐츠 네고시에이션
      • 4. 결과를 전달하는 HTTP 상태코드
        • 4.1 상태코드는 서버로부터 리퀘스트 결과를 전달한다.
        • 4.2 2xx 성공
        • 4.3. 3xx 리다이렉트
        • 4.4 4xx 클라이언트 에러
        • 4.5 5xx 서버 에러
      • 5. HTTP와 연계하는 웹 서버
        • 5.1 1대로 멀티 도메인을 가능하게 하는 가상 호스트
        • 5.2 통신을 중계하는 프로그램 : 프록시, 게이트웨이, 터널
      • 7. 웹을 안전하게 HTTPS
        • 7.1 HTTP의 약점
        • 7.2 HTTP+암호화+인증+완전성보호 = HTTPS
  • IDE
    • Webstorm
      • 웹스톰 단축키
      • 웹스톰 소스코드 특정폴더 검색 제외
  • GIT
    • Git 기초 명령어
Powered by GitBook
On this page

Was this helpful?

  1. 브라우저와 자바스크립트

Document Object Model

문서 객체 모델 (Dom)

브라우저랜더링 엔진이 HTML를 파싱하여 브라우저가 이해할 수 있는 구조로 메모리에 올리는데 이것을 DOM이라고 한다. 모든 요소를 객체로 만들고 부모자식 관계를 표현할 수 있는 트리구조로 구성한다.

DOM트리는 노드로 구성된다. 루트를 제외하고 모든노드에 부모가 있으며 자식노드 있어도 되고 없어도 된다. 루트노드는 document이며 자식노드는 html요소이다. 이하 자식노드로 head, body가 있으며 body노드 아래로 여러 자식노드가 존재한다.

DOM트리의 모든 노드는 Node 클래스의 인스턴스이다. 부모와 자식노드 자신을 나타내는 프로퍼티인 parentNode, childNodes, nodeName, nodeType이 있다.

DOM은 자신을 변경가능할 수 있게 API를 제공한다. 이를 DOM API라고 한다. document.getElementById() 이런 메서드들이 DOM API 이다. 요소에 접근하고 객체를 가져오고 변경이 가능하다.

DOM tree 종류

  • 문서노드 (Document Node)

트리의 최상위에 존재하며 각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서노드로 접근한다.

  • 요소노드 (Element Node)

HTML 요소를 표현한다. 부자관계를 가지며 문서의 구조를 표현한다. HTMLElement 객체를 상속한 객체이다.

  • 어트리뷰트 노드 (Attribute Node)

HTML 요소의 어트리뷰트를 표현한다. 특정요소의 접근하여 어트리뷰트를 참조할 수 있다.

  • 텍스트 노드 (Text Node)

HTML 요소의 텍스트를 표현하며 요소노드의 자식이다. 자식노드를 가질수 없고 DOM tree의 최종단이다.

react, vue 등 라이브러리를 사용한다면 직접 쓰일일은 많지 않지만 라이브러리 없이 순수자바스크립트로 조작하는 법은 알고있어야 한다고 생각한다.

Previous의존 역전 원칙NextDOM API

Last updated 2 years ago

Was this helpful?