<웹의 기본>
API(Application Programming Interfaces)
- 이미 만들어진 코드의 집합체
- 약간 getter, setter, 요런..느낌? 기능의 조각?
Browser API의 종류
Browser API라고 하면 웹 브라우저에 설치된 API로, 데이터를 보이게 하고 복잡한 일들을 하게 함
1. DOM document object moel API : 동적으로 페이지의 스타일을 정하는 등 view와 연관.
2. Geolocation APi : 지리적 정보를 검색할 수 있게 해 줌
3. Canvas & WebGL : 2d/3d그래픽을 만들 수 있게 함
4. HTMLMediaElement/ WebRTC 등 : 오디오/비디오 API. 웹 상에서 음악과 비디오를 재생하고, 캡쳐, 표시한하는 등의 것.
5. 이 외에 기본 제공되는 것이 아닌 누군가가 제작한 third party API가 있음.
웹 페이지에서 js가 하는 일.
브라우저가 웹페이지를 불러올 때 => 실행 환경안에서 html, css, js코드가 실행됨
자바스크립트는 html & css가 결합되어 웹페이지 상에 올라간 후 브라우저의 자바스크립트 엔진에 의해 실행 됨.
(즉, 웹에서의 실행 순서 html&css => js)
브라우저 보안성
브라우저 탭 => 보통 독립된 실행 환경(runtime). , 보안상 좋음.
#js 실행 순서
일반적으로 위 -> 아래
interpreter language vs compiler language
- 인터프리터 언어 : js, python… 한줄한줄 실행. 목적 코드로 변환x
- 컴파일러 언어 : 목적 코드로 변환O. 어셈블리어로 컴파일되어 동작함.
동적 vs 정적 코드
- 동적 : 클라이언트 + 서버. 각기 다른 “상황”에서 적절한 정보가 보임.
- 동적으로 바뀌지 않으면 정적 페이지임.
javascript 삽입 방식
- 내부
<head>~~~~~
<script>{자바스크립트 코드 삽입}</script>
</head>
<body></body>
</html>
- 외부
- 스크립트의 로딩 방식.
작성된 스크립트를 적절한 때에 로딩하는 것이 중요
자바스크립트가 html보다 먼저 로딩되면 제대로 동작안하겠쥬?
(html이 dom의 형식에 맞게 parse되고 그 dom을 javascript로 건드리는 것이니까)
Html head부분에 <script / >(즉, 내부 코드)를 넣었을 경우 문제 발생가능성 있음.
=>document.addEventListenr(“DOMContentLoaded”,function(){})으로
돔이 완전히 로드되고 해설됐을 때 발생됨. 즉, 여기서 js로딩하면 html이 완전히 로드되기전 js가 불려오는 참사는 일어나지 않을 것이라는 뜻이지.
외부 코드를 import하는 경우에는 좀 최신 문법인 async를 사용
Async는 비동기 방식으로, script태그에 도달햇을 때 브라우저에게 html요소를 멈추지 않고 다운로드받ㄱ도록 유지시킴.
예제
async & defer
더 깊게 들어가보면 이러한 코드문제를 해결하기 위한 방법은 실제로 두가지가 있습니다. — async 와defer 입니다. 두 가지의 차이를 봅시다.
async 스크립트는 페이지 렌더링의 중단 없이 스크립트를 다운로드 하고, 또한 스크립트의 다운로드가 끝나자 마자 이를 실행시킵니다. async는 외부 스크립트끼리의 구체적인 실행 순서는 보장하지 않고, 단지 나머지 페이지가 나타나는 동안 스크립트가 비동기방식으로 다운로드 되어 중단되지 않는다는 것만 보장합니다. async는 각각의 스크립트가 독립적으로, 서로에게 의존하지 않는 관계일 때 적절합니다.
아래의 예제를 보시죠:
3개의 스크립트를 로딩하지만 이들의 순서는 보장할 수 없습니다. 이는 script2.js나 script3.js에 있는 함수가 jquery.js의 함수를 사용한다면 에러를 발생될 수 있다는 것을 의미합니다.
Defer는 이와 다르게 순서대로 다운로드 한 후 모든 스크립트와 내용이 다운로드 되었을 때 실행됩니다:
따라서 위의 예제의 경우에는 jquery.js -> script2.js -> script3.js 의 순서가 보장됩니다.
요약 :
- 만약 scirpt들이 각각의 스크립트에 의존하지 않고 독립적으로 파싱되도 상관없다면, async 를 사용합니다.
- 먄약 sciprt들이 의존하고 하나의 스크립트가 파싱될때까지 기다려야 한다면, defer 를 사용하고 각각의
