Hello, World! 출력하기
<head>
<script src="파일명.js"></script>
</head>// 크롬에서 ctrl + shift + j or i를 입력하면 console 창에서 출력된 코드를 확인 할 수 있다.
console.log('Hello, World!'); // Hello, World!API(Application Programming Interface)
API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. - wikipedia
Console API 링크텍스트
The Console API provides functionality to allow developers to perform debugging tasks, such as logging messages or the values of variables at set points in your code, or timing how long an operation takes to complete.
Console은 언어 자체에 포함되어있지는 않지만, 통상적으로 많이 쓰임. Node js와 web api에 공통적으로 포함되어있어서 똑같은 Console api를 이용해서 node js에도 출력할 수 있고, 브라우서 상에서도 console창에 출력할 수 있다.
- Console tab에서 javascript를 실행할 수 있다. 동적으로 요소를 검사하고, 실행할 수 있다.
console.log('Hello, everyone'); // Hello, everyone
alert('Get out!'); // 입력하자마자 새 창에 get out 메세지가 뜬다.
hello = 10; // 변수 정의
hello // 10 출력Sources tab에서는 디버깅하는데 유용하게 사용한다.
디버깅(영어: debugging) 또는 디버그(영어: debug)는 컴퓨터 프로그램 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산(버그)을 찾아내고 그 원인을 밝히고 수정하는 작업 과정을 뜻한다. 일반적으로 디버깅을 하는 방법으로 테스트 상의 체크, 기계를 사용하는 테스트, 실제 데이터를 사용해 테스트하는 법이 있다. - wikipedia
그 외 Performance, Memory tab들은 나중에 사용 할 일이 있을 것이다.
자바스크립트를 더 잘 알기 위해서 ECMA 링크텍스트 또는 MDN(추천) 링크텍스트에서 확인해보기.
async vs defer
html에 javascript를 포함할 때 어떻게 포함해야 효율적인가?
- head 사이에
<!-- 💩js파일이 크고, 인터넷이 느리면 사용자가 웹사이트를 보는데 많은 시간 소요 -->
<head>
<script src="file.js></script>
</head>- closing body 바로 위위
<body>
<footer></footer>
<script src="file.js></script>
<body>
장점: 사용자가 html 기본 컨텐츠를 빨리 볼 수 있다.
단점: if 웹사이트가 javascript에 의존적인 사이트라면 fetching js, executing js하는 시간이 오래걸릴 수 있다.3.head + asyn
<head> asyn: boolean type 속성 값, 선언을 하면 True라서 밑처럼 사용 가능.
<script asyn src="file.js></script> asyn: 병렬로 js파일을 받자!
<head>
장점: 다운로드 받는 시간 절약
단점: js는 다 받고, 실행했는데 html이 실행이 안 될 수 있다.
js파일이 여러개면 각각 다운되는대로 실행하기 때문에 위험할 수 있음.
예를 들어서 file1.js이 선행되어 실행되고, file2, 3.js이
그 다음에 실행되어야하는데 구조인데,
file2.js을 먼저 받고 실행하고, file1, 3.js을 그 다음에 받고 실행하면 문제가 될 수 있다.4.head + defer(추천): 효율, 안전
<head>
<script defer src="file.js></script>
<head>
장점: defer를 읽게 되면, js파일을 fetching 하는데, fetching 후에 바로 js 파일을 executing하는 게 아니라 html 파일을 다 받고 나서 js파일을 executing 한다.
단점: Tip
바닐라자바스크립트를 js 파일을 작성할 때는 'use strict';를 입력하고 코딩하자.
why? javascript는 flexible에서 개발자가 실수를 할 수 있는 가능성이 크다. 실수는 위험 요소가 될 수 있다. javascript에서는 선언되지 않는 값을 할당한다던지, 기존에 존재하는 프로토타입을 변경한다던지, 하는 비상식적인 미친 짓을 할 수 있기때문에...'use strict'; console.log('javascript is flexible and it could mean, it's dangerous') 이렇게해야 정의되어있지않은 값을 넣었을 때, 에러메시지로 확인할 수 있다. 'use strict';가 없으면? 에러메시지가 나오지 않아서, 나중에 문제가 된다.
parsing: 어떤 페이지(문서, html 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것 | parse: analyze (a sentence) into its parts and describe their syntactic roles. fetching: 가져오는 것 | fetch: go for and then bring back (someone or something) for someone.
Visual Studio Code 실행 단축키
Command Palette : cmd + shift + p / ctrl + shift + p
