JavaScript 강의 - 1
유튜브 강의
자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)
- AJAX(Asynchronous JavaScript and XML)
비동기적으로 data를 서버에서 받아오고 처리할 수 있도록 도와주는 기술
- 라이브러리 : 함수 호출하면 서로 다른 브라우저에서 알아서 동작하게 만들어줌
ex. jQuery
- JIT : javascript를 빠르게 실행하는 엔진(크롬에 포함되어 있는 엔진)
- javascript와 웹 APIs 사용하여 웹사이트 개발 가능
- 개발은 최신 버전, 배포할 때는 JavaScript transcompiler(Babel) 사용
- SPA(Single Page Application) : 하나의 페이지에서 데이터를 받아와서 필요한 부분만 업데이트하는 방식
react, angular, vue 등 사용
- javascript 이용 분야
backend : node.js
react-native : mobile
electron : desktop
JavaScript 강의 - 2
유튜브 강의
자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)
cf) node.js에 javascript 엔진이 있어서 브라우저 없이도 실행 가능
API(Application Programming Interface) : 브라우저가 제공하는 함수
공식사이트
콘솔에 출력
js 코드
console.log('Hello World');html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
</body>
</html>async vs defer
- async
- html parsing과 js 파일 fetching을 동시에 진행
- fetching이 끝나면 js파일 실행
- defer
- parsing과 js 파일 fetching 동시 진행
- parsing 끝난 후 js 파일 실행
cf) js 파일 맨 앞에 ‘use strict’; 추가
JavaScript 강의 - 3
유튜브 강의
자바스크립트 3. 데이터타입, data types, let vs var, hoisting | 프론트엔드 개발자 입문편 (JavaScript ES5+)
변수 선언
- let (added in ES6)
- 변수 선언 후 값 변경 가능(mutable)
- const
- 선언 후 값 변경 불가능(immutable)
- 한 번 설정한 값을 변경할 수 없도록 하는 것이 좋음
// let, read/write
let globalName = 'global name';
{
let name = 'ellie';
console.log(name);
name = 'kim';
console.log(name);
console.log(globalName);
}
console.log(name);
console.log(globalName);
// var, don't use
age = 4;
var age;
console.log(age);
// const, read only
const daysInWeek = 7;
const maxNumber = 5;Block Scope
{ } 내부에 있는 변수는 { } 밖에서 호출 불가
globalName은 어디서든 가능
- var는 사용하지 말 것
- hoisting : 어디에서 선언하든 상관 없이 가장 위로 올려주는 것
- var는 block scope도 무시함
데이터 type
- primitive
- 한 가지의 item
- number, string, boolean, null, undefined, symbol
- object
- primitive를 여러 개 묶어 하나의 단위로 관리
- function
- function도 변수에 할당 가능
number
- 정해져 있는 number
- Infinity
- -Infinity
- NaN
cf) bigInt : 숫자 끝에 n 붙이면 큰 숫자도 인식됨(number는 -2^53 ~ 2^53 까지만 인식)
// number
const count = 12; //integer
const size = 1.2; //decimal number
console.log(`value: ${count}, type: ${typeof count}`);
console.log(`value: ${size}, type: ${typeof size}`);
const infinity = 1 / 0;
const negativeinfinity = -1 / 0;
const nan = 'not a number' / 2;
console.log(infinity);
console.log(negativeinfinity);
console.log(nan);
const bigInt = 1231212312312312123n;
console.log(`value: ${bigInt}, type: ${typeof bigInt}`);string
- + 으로 string 연결 가능
- template literals (백틱 사용)
- `hi ${brendan}`
// string
const char = 'c';
const brendan = 'brendan';
const greeting = 'hello' + brendan;
console.log(`value: ${greeting}, type: ${typeof greeting}`);
const helloBob = `hi ${brendan}`; // template literals
console.log(`value: ${helloBob}, type: ${typeof helloBob}`);boolean
- false : 0, null, undefined, NaN, ‘’
- true : false 아닌 것 모두
// boolean
const canRead = true;
const test = 3 < 1;
console.log(`value: ${canRead}, type: ${typeof canRead}`);
console.log(`value: ${test}, type: ${typeof test}`);null
- null로 정의된 것
// null
let nothing = null;
console.log(`value: ${nothing}, type: ${typeof nothing}`);undefined
- 값이 할당되어있지 않은 상태
// undefined
let x;
console.log(`value: ${x}, type: ${typeof x}`);symbol
- 고유한 식별자가 필요할 때 사용
- 동일한 string으로 symbol 만들어도 다른 식별자로 인식함
- 동일한 이름이면 같은 symbol이 되도록 하려면 Symbol.for 사용
// symbol
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2);
const gsymbol1 = Symbol.for('id');
const gsymbol2 = Symbol.for('id');
console.log(gsymbol1 === gsymbol2);object
- key, value로 이루어진 property 집합
- const로 선언하면 object 자체는 수정 불가하지만 내부 property는 key를 이용해 수정 가능하다
- reference가 저장되어 실제 object가 담겨 있는 메모리를 가리킴
- JS에서 array, object는 mutable하다
// object
const ellie = {name : 'ellie', age: 20}
ellie.age = 21;
console.log(`value: ${ellie}, type: ${typeof ellie}`);Dynamic typing
- 변수 선언 시 type을 설정하지 않음
- 자동으로 type 설정됨
// Dynamic typing
let text = 'hello';
console.log(text.charAt(0));
console.log(`value: ${text}, type: ${typeof text}`);
text = 1;
console.log(`value: ${text}, type: ${typeof text}`);
text = '7' + 5;
console.log(`value: ${text}, type: ${typeof text}`);
text = '8' / '2';
console.log(`value: ${text}, type: ${typeof text}`);
beginner