[browser] APIs

APIs (Application Programming Interfaces)

1. Web APIs

브라우저마다 공통적으로 제공하기로 규약한 API들 ex)

1. DOM (Document Object Model) APIs
   • 웹페이지 요소 생성/삭제, 스타일 변경 등
2. Network APIs
   • 서버와 통신
3. Graphics APIs
   • canvas
   • WebGL
4. Audio/Video APIs
5. Device APIs
6. File APIs
7. Storage APIs

필요할 때 공부해서 사용방법을 아는 것이 중요!

MDN WebAPIs

Web APIs Security

HTTP vs HTTPs

1. HTTP (Hypertext Transfer Protocol): 웹 클라이언트와 서버의 통신 규약

1. HTTPs (Secure)

HTTPs 는 보안 처리가 되어있기 때문에 HTTPs 에서만 동작하는 API들이 있다.

참고: The Internet: Encryption & Public Keys

2. Browser 구조 분석

• Window: 브라우저에 열려있는 전체적인 창을 의미
• Document: 페이지가 표기되는 부분
• Navigator: 눈에 보이지는 않지만 브라우저 자체에 관련된 정보들이 담겨있는 오브젝트

• DOM (Document Object Model): 새로운 요소를 추가/삭제 등
• BOM (Browser Object Model): 브라우저에 관련된 API 사용 가능

> console.log(window)
  ▶ Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, ...}

> console.log(this)
  ▶ Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, ...}

Window 는 글로벌 오브젝트 => 아무런 오브젝트를 지정하지 않은 상태에서 this로 Window 사용 가능

자주 사용하는 Window 기능

• size
• scrolling
• load

> window.screen // 사용자 모니터 크기
> window.outer  // 브라우저의 사이즈
> window.inner  // 페이지가 표기되는 부분 전체(스크롤바 포함)
> documentElement.clinet.clientWidth  // (스크롤바를 제외한) 순수 document 크기

3. Browser 좌표

• 브라우저에서의 X축과 Y축은 그림과 같다. 좌측 최상단이 0, 0 에 해당한다.

• Element.getBoundingClientRect()

주의! css 에서의 right, bottom과 의미하는 것이 다르다

• Client x, y vs Page x, y

시작하는 지점이 다르다

4. Window load

브라우저의 동작 순서 HTML 읽기 => 이미지,폰트 등의 리소스의 다운로드 => js 파일 다운로드