https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript
그래서, 진짜 어떤 일을 할 수 있나요?
JavaScript는 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 그리고 꽤나 많은 다른 일(물론, 전부는 아니지만 몇 줄만의 자바스크립트 코드로 얻는 결과는 놀라울겁니다.)들을 할 수 있는 스크립트 언어입니다.
=> 스크립트 언어가 기억이 안나 전에 정리했던거 다시 봄(맨 처음 1일차) 단순하게 생각해놓으면 자바처럼 컴파일을 할 필요 없이 바로 실행시킬 수 있는 언어
https://terms.naver.com/entry.naver?docId=836402&cid=50376&categoryId=50376
Browser API는 웹 브라우저에 설치된 API들로, 컴퓨터 환경구성으로 부터 데이터를 보이게 하고 복잡한 일들을 하게 합니다.
=> DOM API, Geolocation API 등등 기능에 따라 이렇게 api를 구분해주기도 하는 걸 알게되었다.
웹 페이지에 JavaScript를 어떻게 넣나요?
-
HTML 내부의 자바스크립트
-
외부의 자바스크립트
=> 지금까지 프로젝트는 자바스크립트 코드가 엄청 많지는 않았어서 내부의 자바스크립트를 사용했으나 규모가 커지면 커질수록 외부의 자바스크립트가 필요. css처럼.
- 인라인 JavaScript 처리기
=>역시나 비효율적
스크립트의 로딩 방법
중요한 것은 모든 HTML 요소는 순서대로 페이지에 로드된다는 것입니다. 만약 당신이 자바스크립트를 이용해 HTML 요소를 조작할 경우(정확하게는 DOM), 자바스크립트 코드가 조작 대상인 HTML 요소보다 먼저 실행된다면 조작할 요소가 존재하지 않는 상태이기 때문에 제대로 동작하지 않을 것입니다.
=> 그렇지 이래서 어제 배웠던 자바스크립트를 나중에 넣는 이유 아닌가? 왜 여기는 밑에 넣는게 아니라 일단 해드에 넣는다고 그러지...?
=> 그 다음 줄에 나오는데 바디 맨 밑에 넣는건 옛날방식이라고???? 충격띠...
예전 방식은 scirpt 요소를 body태그의 맨 끝에 넣는 방법이었습니다(</body 바로 위에). 이 방식을 사용해도 body태그가 모두 로드된 이후 scirpt가 실행되게 만들 수 있습니다. 문제는 이 방법과 DOMContentLoaded를 이용한 방법 모두 HTML DOM이 로드되기 전까지 script의 로딩과 파싱이 완전히 차단된다는 것입다. 이는 많은 자바스크립트 코드를 다루는 규모가 큰 사이트의 경우 사이트를 느리게 만드는 중요한 성능 문제를 야기할 수 있습니다. 이것이 async 속성을 사용해야 하는 이유입니다!
-
내부 자바스크립트
=> 이벤트 발생시 작동하게 만들면 HTML 구조가 전부 만들어진 후 작동 -
외부 자바스크립트
=> async 속성을 사용, 일반적으로 script 태그를 만나면 html로딩이 멈추게 되는데, async 요소는 비동기방식으로 멈추지 않고 다운받도록 유지시킨다. -
async & defer
=> async는 외부 스크립트끼리의 구체적인 순서를 보장하지 않고, 단지 나머지 페이지가 나타나는 동안 스크립트가 비동기방식으로 다운로드 되어 중단되지 않는다는 것만 보장.
=> 고로, async는 각각의 스크립트가 독립적으로, 서로에게 의존하지 않는 관계일 때 적절.
=> 세개의 외부 스크립트가 추가됐다면 세번째가 두번째 코드를 이용하면 문제가 발생할 수 있다.
=> Defer는 이와 다르게 순서대로 다운로드 한 후 모든 스크립트와 내용이 다운로드 되었을 때 실행
=> 위에서부터 다운로드 순서가 보장됨.
=> 충격적이게도 이 내용을 처음 알았다..
공식문서 가장 초반에 나오는 내용인데도 불구하고..
