Javascript 기초

Heejin Ryu·2021년 4월 28일
JavaScript
0

javascript

목록 보기
1/2

Intro for JS

왜 배워야 할까?

  • 브라우저 화면을 동적으로 만들기 위함
  • 브라우저를 조작할 수 있는 유일한 언어

브라우저

  • 웹 서버에서 이동하며 클라이언트와 서버간 양방향으로 통신하고, ㅗ씌HTML문서나 파일을 출력하는 GUI 기반의 소프트웨어
  • 인터넷 컨텐츠를 검ㅁ색 및 열람하도록 함
  • 웹 브라우저 라고도 함
  • 주요 브라우저
    - 크롬, 파이어폭스, 엣지, 오페라, 사파리

History of JS

1. 핵심 인물

  1. 팀 버너스 리
  • WWW, URL, HTTP, HTML 최초 설계자
  • 웹의 아버지
  1. 브랜던 아이크
  • JS 최초 설계자
  • 모질라 재단 공동 설립자

2. JS의 탄생

  • 1994년 당시 넷스케이프 커뮤니케이션스사의 NN브라우저가 전 세계 점유율 80% 이상 독점하며 표준 역할을 함.
  • 당시 넷스케이프에 재직중이던 브랜던 아이크가 HTML을 동적으로 동작하기 위한 회사 내부 프로젝트를 진행 중, JS 개발.
  • JS 이름 변천사
    - Mocha -> LiveScript -> JavaScript
  • 그러나 1995년 경쟁사 마이크로 소프트에서 이를 채택해 자체적인 커스텀을 통해 Jscript를 만들어 IE 1.0에 탑재 -> 1차 브라우저 전쟁의 시작

3. 제 1차 브라우저 전쟁

  • 넷스케이프 vs 마이크로소프트
  • 빌게이츠 주도하에 MS는 1997년 IE 4를 발표하면서 시장을 장악하기 시작
    - 당시 윈도우 시장 점유율 90%
  • MS의 승리로 끝나며 2001년 부터 IE의 점유율은 90%를 상회
  • 1998년 넷스케이프에서 나온 브랜던 아이크 외 후계자들이 모질라 재단을 설립
    - 파이어폭스를 통해 IE에 대항하며 꾸준히 점유율을 올려감

4. 제 2차 브라우저 전쟁(2009~)

  • MS vs Google
  • 2008년 Google의 Chrome 브라우저 발표
  • 2011년 3년 만에 파이어폭스의 점유율을 돌파 후 2012년 전세계 점유율 1위 탈환
  • 크롬의 승리 요인
    - 압도적인 속도
    • 강력한 개발자 도구 제공
    • 웹 표준

5. 파편화와 표준화

  • 제 1차 브라우저 전쟁 이후 수 많은 브라우저에서 자체 자바스크립트 언어를 사용하게 됨
  • 결국 서로 다른 모습의 자바스크립트가 만들어지면서 크로스 브라우징 이슈가 발생하여 웹 표준의 필요성이 제기
  • 크로스 브라우징
    - W3C에서 채택된 표준 웹 기술을 채택해 서로 다른 브라우저에서 다르게 구현되고 있는 기술을 비슷하게 만들며 웹 페이지를 제장하는 방법론(동일성이 아닌 동등성)
    • 브라우저 마다 렌더링에 사용하는 엔진이 다르기 때문
  • 1996년부터 넷스케이프는 표준 제정에 대한 필요성을 주장
  • 1997 ECMAscript1(ES1) 탄생
  • 제 1차 브라우저 전쟁 이후 문제된 언어의 파편화를 해결하기 위해 크롬의 등장 이후 각 브라우저 회사 및 재단은 표준화에 더욱더 적극적으로 힘을 모으기 시작

6. 현재의 JS

2015년 ES2015(ES6)탄생

  • Next-gen of JS
  • JS의 고질적인 문제들을 해결
  • JS의 다음 시대라고 불리울 정도로 많은 혁신과 변화를 맞이한 버전
  • 이때붙 버전 순서가 아닌 출시 년도를 붙이는 것이 공식 명칭이나 통상적으로 ES6라 부름
  • 현재는 대부분의 표준이 ES6+로 넘어옴.

7. Vanilla JavaScript

  • 크로스 브라우징, 간편한 활용 등을 위해 많은 라이브러리 등장
  • 최근 표준화된 브라우저, ES6 이후의 다양한 도구의 등장으로 순수 자바스크립트 활용의 증대

DOM

브라우저에서 할 수 있는 일

  1. DOM (Document Object Model)
  2. BOM (Brower Object Model)
  3. JavaScript Core

DOM이란

  • HTML, XML등과 같은 문서를 다루기 위한 언어 독립적인 문서 모델 인터페이스
  • 문서를 구조화하고 구조화된 구성 요소를 하나로 취급하며 다루는 논리적 트리 모델
  • 문서가 구조화되어 있으며 각 요소는 객체로 취급
  • 단순한 속성 접근, 메서드 활용 뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작 가능
  • 주요 객체
    • window: DOM을 표현하는 창. 가장 최상위 객체
    • document: 페이지 콘텐트의 Entry Point역할을 하며, <body>등과 같은 수 많은 다른 요소들을 포함
    • navigator, location, history, screen

DOM 해석

  • parsing(파싱)
    • 구문분석, 해석
    • 브라우저가 문자열을 해석하여 DOM Tree로 만드는 과정

DOM 조작

개념

  • Document는 문서 한 장에 해당하고 이를 조작
  • 조작 순서
    1. 선택
    2. 변경

DOM 관련 객체의 상속 구조

  • EventTarget
    • EventListener를 가질 수 있는 객체가 구현하는 DOM 인터페이스
  • Node
    • 여러가지 DOM 타입들이 상속하는 인터페이스
  • Elemnt
    • Document안의 모든 객체가 상속하는 가장 범용적인 기반 클래스
    • 부모인 노드와 그 부모인 EventTarget의 속성을 상속
  • Document
    • 브라우저가 불러온 웹 페이지를 나타냄
    • DOM트리의 진입점 역할을 수행
  • HTMLElement
    • 모든 종류의 HTML 요소
    • 부모인 Element의 속성 상속

DOM 선택

  • Document.querySelector()
    • 제공한 선택자와 일치하는 element 하나 선택
    • 제공한 CSS selector를 만족하는 첫번째 element객체를 반환
  • Document.querySelectorAll()
    • 제공한 선택자와 일치하는 여러 element를 선택
    • 매칭할 하나 이상의 셀렉터를 포함하는 유효한 CSS selector를 인자로 받음
    • 지정된 셀렉터에 일치하는 NodeList를 반환
  • getElementById()
  • getElemenetByTagName()
  • getElementsByClassName()

querySeector(), querySelectorAll()을 사용하는 이유
id, class, tag선택자 등을 모두 사용하기 때문에 더 구체적이고 유연하게 선택 가능

선택 메서드 별 반환 타입

  • 단일 element
    • getElementById()
    • querySelector()
  • HTMLCollection
    • getElementsByTagName()
    • getElementsByClassName()I
  • NodeList
    • querySelectorAll()

HTMLCollection & NodeList

  • HTMLCollection
    • name, id, 인덱스 속성으로 각 항목들에 접근 가능
  • NodeList
    • 인덱스 번호로만 각 항목들에 접근 가능
    • 단, HTMLCollection과 달리 배열에서 사용하는 for each 함수 및 다양한 메서드 사용 가능
  • 둘 다 배열과 같이 각 항목을 접근하기 위한 인덱스를 제공(유사 배열)
  • 둘 다 Live Collection으로 DOM의 변경사항을 실시간으로 반영하지만, querySelectorAll()에 의해 반환되는 NodeList는 Static Collection

collection

  • live collection
    • 문서가 바뀔 때 실시간으로 업데이트
    • HTML collection, NodeList
  • static collection(non-live)
    • 돔이 변경되어도 collection 내용에는 영향을 주지 않음.
    • querySelectorAll()의 반환 NodeList만 static collection

변경

  • Document.createElement()
    • 주어진 태그명을 사용해 HTML요소를 만들어 반환
  • ParentNode.append()
    • 특정 부모 노드의 자식 노드 리스트 중 마지막 자식 다음에 Node 객체나 DOMString을 삽입
    • 여러 개의 Node 객체, DOMString을 추가 할 수 있음
  • Node.appendChild()
    • 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 삽입(Node만 추가)
    • 만약 주어진 노드가 이미 문서에 존재하는 다른 노드를 참조한다면 새로운 위치로 이동
  • ChildNode.remove()
    • 이를 포함하는 트리로부터 특정 객체를 제거
  • Node.removeChild()
    • DOM에서 자식 노드를 제거하고 제거 된 노드를 반환
    • Node는 인자로 들어가는 자식 노드의 부모 노드

변경 관련 속성

  • Node.innerText
    • 노드와 그 자손의 텍스트 컨텐츠를 표현
    • 즉, 줄 바꿈을 인식하고 숨겨진 내용을 무시하는 등 최종적으로 스타일링이 적용 된 모습으로 표현
  • Element.innerHTML
    • 요소 내에 포함 된 HTML 마크업을 반환
    • XSS 공격에 취약점이 있으므로 사용시 주의

변경 관련 메서드

  • Element.setAttribute(name, value)
    • 지정된 요소의 값을 설정
    • 값이 이미 존재하면 업데이트 되고, 아니면 새로 생성된다.
  • Element.getAttribute()
    • 해당 요소의 지정된 값을 반환

EventListener

Event

  • 네트워크 활동 혹은 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 객체
  • 이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자 행동에 의해 발생할 수도 있고, 특정 메서드를 호출하여 프로그래밍적으로도 만들어낼 수 있음.
  • 이벤트 처리기
    • EventTarget.addEventListener()
    • 해당 메서드를 통해 다양한 요소에서 이벤트를 붙일 수 있음
    • removeEventListener()를 통해 이벤트를 제거 가능

Event handler

  • EventTarget.addEventListener()
  • 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정
  • 이벤트를 지원하는 모든 객체를 대상으로 지정 가능
  • target.addEventListener(type, listener[, options])
    • type: 반응 할 이벤트 유형(대소문자 구분 문자열)
    • listener: 지정된 타입의 이벤트가 발생 했을 때 알림을 받는 객체
      EventListener 인터페이스 혹은 JS function 객체(콜백 함수)여야 함
profile
Heejin Ryu
Chocolate lover🍫 & Junior Android developer🤖
다음 포스트

Vue3 Compositon API 학습

0개의 댓글