Javascript 1-3. 기초, 데이터 타입

<꿀팁 정리>

1. 크롬 개발자도구 단축키
cmd + option + i 

2. 백틱
한글일 때 : 원화 표시 ₩
영문일 때 : 백틱 표시 `

---

node js

node를 다운하라길래 했다. 아직 노드를 어떤 식으로 사용해야 하는지 잘 모른다.

node js를 깔면 js파일을 바로 읽을 수 있다고 했다. 

 

맥 내 TextEdit.app 을 사용하면 js확장자로 저장해도 읽히지 않는다.

그래서 vscode로 js파일을 생성해서 node를 사용해서 읽으니까 log 출력에 성공했다.

---

Dev Tools 

tab별로 간단한 소스 코드 수정 및 리뷰 가능

(데브 툴스가 뭔지 몰랐는데 나는 이미 데브 툴스를 사용하면서 디버깅하고 있었음을..)

 

console 탭에서도 간단한 자스 수정이 가능함.

source 는 디버깅할 때 유용

 

---

Javascript Background

http (Hypertext Transfer Protocol)

 

동적인 웹사이트를 만들기 위한 스크립팅 언어의 필요성 대두

-> LiveScript ...->Javascript가 만들어지게 됨

-> ajax 비동기 데이터처리 만들어짐

 

-> 웹 브라우저(익스플로러, 파이어폭스, 라이브..)가 다양화되면서 웹이 요구하는 기준마다 개발해야 하는 문제 발생

 

-> 크롭 웹 브라우저가 등장 

-> 표준화에 대한 중요성이 대두됨

 

-> ECMA 5/6 등장 => class, const, let의 사용화

     Babel : 배포 transcompiler. 최신 ECMA로 사용.

-> SPA : 싱글로 필요한 부분만 수정. (ex. web assembly WA) 

 

ECMAScript : JS 공식 사이트

but, MDN에서 설명을 보고 확인하면 이해가 더 빠를 수 있다.

---

html에서 js파일을 어떻게 포함하는게 좋은가?

 

1. head에서 일반적으로 js를 포함하면? (내가 원래 썼던 방식)

: js파일이 크다면 로딩이 굉장히 느려질 것. 별로 좋지 않다.

1. html을 열면 코드를 쭉 parsing
2. script 발견
    1) html parsing 멈춤
    2) script 파일 다운 
    3) script 파일 실행
3. 파일 실행완료 후 html 다시 parsing

 

2. body의 끝 부분에 포함한다면?

: 사용자가 빨리 기본 html을  파악할 수 있다는 장점, 

but, js의존도가 높은 페이지의 경우 의미있는 컨텐츠를 출력할 수 없다.

1. html 페이지 로딩 끝난 후
2. 스크립트 파일 불러와 실행

 

async / defer

*모두 head 단에 쓴다

like this...

 

1. async

1. html 로딩
2. 병렬로 js파일이 모두 다운로드 됨
    1) 다운 완료 js 실행 

-> body 끝에 붙이는 것보다 빨리 js 실행가능

 

but,

html이 완전히 로드되기 전에 js가 다운이 완료되면 바로 실행됨 -> error 발생 가능성 ↑

+) js파일이 여러개일 경우, 먼저 다운로드 완료된 순으로 실행됨 -> error 발생 가능성 ↑ 

=> js 의존적, 특히 파일 순서에 의존적이면 절대 사용해선 안됨

 

2. defer

1. html parsing 하면서, 도중에 마크업된 js파일을 다운로드 함
2. html parsing 모두 완료
3. 바로 이어 js 순서대로 실행

html이 모두 파싱되면 바로 이어 js를 순서대로 실행해주기 때문에 가장 좋은 방법이라 할 수 있다.

 

---

Javascript

https://github.com/qeiqiem/learn-javascript.git

qeiqiem/learn-javascript

 

 

1. 
"use strict";

use strict를 쓰면 지정되지 않은 타입이나, script가 그냥 실행해버리는 애매한 것들을 오류로 잡아줘서

디버깅할 때도 도움이 되고, 큰 규모의 개발을 할 때는 에러 발생 위험이 크기 때문에 필수적이다.

 

2. Variable (변수) / Constant (상수 개념)

let, const
(added in ES6)

global scope : 전역변수 (java로 치면 static..)
block scope {} : 지역변수 (java로 치면 메서드 내 쓰는..)

* var의 문제점

hoisting : 변수를 어디에 선언했던 간에 그냥 끌어올려 출력해버림.

var은 블럭스콥이 없름. 블럭안에 선언해도 글로벌에서 콘솔로그하면 출력되버림.

 

3. Variable Types
primative / object / function

p : 더 이상 나뉠 수 없는 한가지 아이템
    ( number, string,...)
    
o : box container
    ( p 타입을 여러개로 묶어 관리함)
    

---

// number
const count = 17; // integer
const size = 17.1; // decimal number
console.log(`value: ${count}, type: ${typeof count}`);
console.log(`value: ${size}, type: ${typeof size}`);

백틱 ` 과 ${ } 을 이용하면 (' ' + a +' ') 이런 염병없이 log를 한번에 출력할 수 있다.