1. 자바스크립트의 역사
-netscape가 좀더 사용자에게 편리한 UI가 있는 웹브라우저를 출시했지만 정적인 페이지만 가능했음
-좀 더 동적인 부분들을 추가하기 위해 새로운 언어를 추가하기로 생각!
-프로토타입을 기반으로 한 유연한 언어 개발➡LiveScript➡java 인기에 숟가락 얹으려고 이름을 javascript로 바꿈
-마이크로소프트사도 이에 힘입어 jscript라는 언어 개발
-브라우저 환경이 각각 다르다 보니까 netscape는 자신들이 만든 javascript로 표준안을 만들기로 함(ECMAScript)
-그러나 마이크로소프트사가 만든 익스플로러 시장점유율이 높아지면서 익스플로러는 표준안에 맞추기보단 자신들이 표준이라며 ECMAScript 표준안 개발에 불참=>표준안 개발이 더뎌짐..
-2009년 구글이 JIT시스템이 도입된 Chrome을 개발하면서 다른 브라우저회사들이 자극을 받고 한데 모여 표준안 개발에 힘쓰기로 함 그래서 ECMAScript가 계속 발전되고 있음!! (es6이상 구현 가능한 사람이 우대사항에 있길래 뭔소린가 했는데 이걸 말하는 거였다...)
2. 콘솔에 출력, script async와 defer의 차이점
(1)콘솔 출력
console.log('Hello World');js파일을 생성하고 html 파일에 script를 연결한 뒤,
개발자도구-콘솔창으로 봤을 때 콘솔에 Hello world가 출력돼있는 걸 알 수 있다!
TIQ: 그래서 콘솔을 왜 쓰는 건데?
console은 강사님과 함께 할때도 배웠던 부분이긴 하지만 그래서 왜 쓰는지는 생각을 하지 않았던 것 같다. 근데 문득 그래서 이거 왜 쓰는 건데?란 생각이 들어 구글링을 해 보았다.
참고: OKKY https://okky.kr/article/360077 (콘솔을 왜 쓰는 건지에 대한 답변)
참고: Higher의 창작소 https://higher77.tistory.com/19?category=967499 (콘솔에 직접 입력이 아닌 console.log를 쓰는 이유)
이 두글을 읽고 나서 완벽하게 이해한 것은 아니지만,
나 같은 경우는 페이지 개수가 많아봤자 7개의 페이지가 담긴 사이트를 코딩해보았기 때문에
이런 애로사항은 없었지만, 실무에서 백여개의 페이지를 코딩할때는
데이터를 매번 변환하고, 출력하기에는 엄청난 시간이 소요될 것 같다는 것이다.
그래서 콘솔은 미리보기의 역할이라고 이해했다. 또한, 콘솔에 직접 객체 입력이 아닌 console.log라는 함수(?)를 이용해 스크립트를 넣는 것은 기록을 위해서라고 한다.
그냥 콘솔창에 직접 입력하면 최종결과만 나오는데 log를 이용해서 스크립트를 넣으면
객체별로 볼 수 있다는 걸로 이해했는데..맞는진 모르겠다!
아무튼 도대체 그래서 콘솔을 왜 쓰는 건가 했는데 그 부분에 대해서는 어느정도
궁금중이 풀리게 된 것 같다.
(2) html에 javascript 링크 연결하는 방법들
위처럼 생성한 스크립트를 html에 연결시킬 때 나는 보통 head에
<script src="index.js"></script>이렇게 작성하곤 했다.
아니면 body 맨 끝에 작성하거나!
하지만 각각 단점이 존재했다.
✔ head에 script를 링크할 시
-브라우저가 랜더링을 할 때 html, css, javascript순서대로 읽는데 head에 작성하면 랜더링속도가 매우 길어진다고 한다. 그래서 내 포트폴리오 사이트 열리는 속도가 그렇게 느렸나..✔ body 하단에 script를 링크할 시
-head에 작성하는 것보다 html로 구현한 것이 사용자에게 더 빠르게 보인다는 것은 있지만, script가 작동되기 전부터 정상적으로 구현되지 않은 페이지가 보인다는 단점이 있다.✔ head에 asyn 속성을 활용할시
script async src="index.js" 이렇게 async이라는 속성을 활용하면 body하단에 쓰는 것보다는 파싱이 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있다. 그렇지만 html이 출력되기 전부터 실행이 되고 있기 때문에 우리가 원하는 시점에 html 요소가 아직 정의되지 않을 수 있다는 단점이 있다.✔ head에 defer 속성을 활용할시
-html을 parsing하다가 script 파일이 있네? 하고 명령을 시켜놓고, html 파싱하는 도중에 script에 필요한 파일을 다 다운을 받아놓고, 파싱이 다 되면 script를 출력시켜주는 거라고 한다.(3) async와 defer의 차이점
◾ async
-여러개의 스크립트 파일을 async속성으로 연결시켰을 때 파일순서에 상관없이 먼저 다운로드 된 파일부터 스크립트가 실행됨 그래서 우리가 구현하고자 하는 게 순서에 의존적인 파일이라면 async는 비동기적으로 실행되므로, 치명적인 단점이 있다.◾ defer
-우리가 정의한 순서대로 실행되기 때문에 우리가 원하는 대로 실행될 것이라 예측할 수 있음 그래서, 효율적이고 안전하기 위해서는 defer를 쓰는 것이 좋음+)vanilla javascript 공부할 때
◾'use strict';
-javascript는 flexible한 언어인데, 이는 그만큼 위험한 언어라고도 해석될 수 있다. 그래서 비상식적인 변수들이 발생한다고 하는데.. 정상적인 스크립트 구현을 위해서는 js 파일 맨 위에 'use strict';라고 써주는 것이 바닐라 자바스크립트 엔진이 더 효율적이고 빠르게 자바스크립트를 해석해주기 때문에 쓰는 게 좋다!아무래도 인턴을 하게 되면서 html,css,javascript에 대한 부분은 공부를 하기가 어려웠는데, 이렇게 짬을 내서 유튜브를 들으면서 javascript 역사와 간단한 세팅을 알게 되니 든든~~허다!! 앞으로도 일정이 바쁘지만 않다면 하루에 최소 두강의씩은 들으면 큰 도움이 될 것 같다 :)
