blog.asamaru.net/2017/05/04/script-async-defer/
script의 async와 defer 속성
웹 브라우저는 html을 랜더링하는 과정에서 css() 또는 js(
velog.io/@moonsun116/async-vs-defer
async vs defer
스크립트를 html에 포함하는 방식은 여러 방식이 존재한다.그중 제일 많이 쓰이는 방법은 head안에 script를 넣는 방식 혹은 body 맨 뒤에 script를 포함하는 방식을 많이 사용한다.그중 script를 head안에
velog.io
결론: HEAD에 DEFER를 써라
HTML구문 파싱하는 동안 JScript 다운 받을 수 있고 다운받고나서 HTML파싱 계속 진행하고
HTML 파싱이 다 끝나야 JScript파일이 실행이됨 -> 순서대로
(async는 순서대로가 아님 html파싱하다가 async만나면 js 로드하고 완료되면 html파싱멈추고 js실행시키고 html파싱 다시진행함)
API를 잘써서
인터페이스를 사용하는 사용자는 영향받지 않도록해야함
ECMAScript가 잘 정립되어서 이제는 더이상 JQuery를 사용하지 않아도됨.
JQuery는 수많은 브라우저 상에서 소스가 잘 돌아가도록 만든 API
개발할때는 최신으로 하고 -> 최신 브라우저를 사용하지 않는
사람에게도 ECMAScript6 버전으로 뿌려지게 해주는게 Babel
SPA (싱글페이지 어플리케이션)
- 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 어플리케이션이나 웹사이트를 말합니다.
- 바뀌는 것만 가져옴
동적인 요소를 추가하기 위해 만드는것: 리액트 앵귤로 등등이 나오는 이유
nodeJs Backend
nodeJS 는 자바스크립트 엔진이 있어서 브라우저 없이도 가능
1. DOM이란 무엇인가
출처는 아래 블로그!
velog.io/@godori/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
DOM이란 무엇인가?
DOM MDN 에서 말하는 DOM의 정의는 다음과 같습니다. > 문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. 그래서 DOM이 정확히 뭐라고요? 옳은 것을 모두 골라보세요.
velog.io
DOM
정리하자면, DOM은 브라우저에 의해 기록되는 모든 것입니다. JavaScript는 이를 조작할 수 있는 문법이고 언어일 뿐이며, 이는 Node.js 등의 브라우저 밖의 DOM API가 없는 환경에서도 동작할 수 있습니다.
DOM은 The Document Object Model, DOM은 HTML, XML 문서의 프로그래밍 Interface다
-
- 내가 작성한 코드가 브라우저에 파싱되면 DOM이됨 (HTML코드가 DOM은 아님)
JavaScript vs. the DOM
JavaScript is a language that the browser reads and does stuff with. But the DOM is where that stuff happens. In fact a lot of what you might think of as a “JavaScript Thing” is more accurately a “DOM API”.
What is the DOM? | CSS-Tricks
A reader recently wrote in asking me what the DOM was. They said they've heard it mentioned and alluded to, but aren't sure they really understand it. We
css-tricks.com
자바스크립트는 그냥 브라우저가 읽고 동작시킬수 있는 언어다.
DOM은 그 동작들이 일어나는 거고. 자바스크립트라고 일어나는 많은 일들이 사실상 DOM API임
1. HTML을 브라우저가 파싱해서 DOM으로 만드는 것임
2. 크롬-우클릭-페이지소스보기 ViewSource는 내가 작성한 HTML이지 DOM은 아니다.
-> 내가 작성한 HTML과 다르다면
a) 백엔드 언어로 작성됐거나
b) html 작성후 빌드 프로세스가 일어났거나
c) HTML이 압축됐거나 바꼈거나.
하는 이슈지 ViewSource는 DOM이아니다.
3. DevTool패널에서 DOM의 시각적 표현을 확인할 수 있는데 나의 HTML과 같다.
3. DevTools에서 보이는 코드가 DOM이다
그렇습니다. 브라우저에서 지원하는 개발자 툴에서 보이는 것이 바로 DOM입니다! 이 툴에서 시각적으로 표현한 DOM이 나의 HTML 코드와 동일할 수는 있지만, 대개는 달라지게 되며 DevTool에서는 이러한 변경 사항이 적용되어 표시됩니다.
World Wide Web Consortium (W3C)
- W3C(영어: World Wide Web Consortium, 축약형은 영어: WWW 또는 W3)는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직-
-
'[React] Front-End' 카테고리의 다른 글
| [JS] 자바스크립트 필터 함수 (0) | 2021.04.15 |
|---|---|
| [Javascript] 앨리의 드림코딩 총정리 (0) | 2021.04.10 |
| [Javascript] POST 로 다중 파라미터 값 보내기 (0) | 2020.06.08 |
| [JSP/Javascript] HTTP 통신 GET방식 파라미터 값 수신 (0) | 2020.06.04 |
| [Vanilla Javascript] Events, Events Handler (0) | 2020.02.11 |