[JS] 모던 자바스크립트 딥 다이브
ECMA(에크마) International
자바스크립트를 표준화 해주는 국제 표준화 기구
5버전과 6버전 사이에 (2015년도) 크게 바뀌게 되었고 그 뒤에는 1년에 한 번씩 소소하게 업데이트가 되고 있다.
TML
페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당한다.
CSS
실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당한다.
JS
콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당한다.
웹앱 동작 방법
통신 프로토콜 (Communication Protocol, 통신 규약)
컴퓨터나 원거리 통신 장비 사이에서 메세지를 주고 받는 양식 및 규칙의 체계를 의미합니다. 대표적으로 HTTP, HTPS, FTP, SSL 등이 있습니다.
로컬(Local) 개발 환경
웹 사이트를 개발할 우리의 컴퓨터 환경
웹 표준(Web Standard)
"웹에서 사용되는 표준 기술이나 규칙"을 의미, W3C의 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술
크로스 브라우징 (Cross Browsing)
조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험 (같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술 및 방법
typeof
데이터 타입을 알 수 있는 키워드
단, null, { }, [ ] 등 일부 데이터 타입이 odject로 통일되어서 나온다.
function getType(data) {
return object.prototype.toString.call(data).slice(8, -1)
}
위 코드를 사용하면 null, { }, [ ] 등에 대한 자세한 데이터 타입을 알 수 있다.
산술연산자 (arithmetic operator)
| 이항 산술 연산자 | 의미 |
| + | 덧셈 |
| - | 뺄셈 |
| * | 곱셈 |
| / | 나눗셈 |
| % | 나머지 |
할당 연산자 (assignment operator)
| 할당 연산자 | 예시 | 동일 표현 |
| = | x = 5 | x = 5 |
| += | x += 5 | x = x + 5 |
| -= | x -= 5 | x = x - 5 |
| *= | x *= 5 | x = x * 5 |
| /= | x /= 5 | x = x / 5 |
| %= | x %= 5 | x = x % 5 |
let a = 4
// a = a * 2 // 첫째줄에 a값을 4로 선언해두었기 때문에 4 * 2가 되며 새로운 값을 a에 재선언했다.
a *= 2
consol.log(a) // 8
논리 연산자
&& : (and / 그리고) 앞 뒤 조건 모두 참인 경우에만 true 반환된다.
|| : ( or / 또는) 둘 중 하나만 참이여도 true가 반환된다.
! : (not / 부정) 특정한 데이터의 반대되는 값이 나타난다.
삼항 연산자
조건문
if문을 좀 더 많이 사용하지만 때에 따라 switch를 활용하면 좋다
반복문
통상적으로 i로 지정한다.
시작조건 : i가 0일 때 시작된다.
종료조건 : i가 3보다 같거나 커질때 반복을 종료한다.
변화조건: 반복할때마다 i에 숫자 1을 더한다 ( 0 + 1 / 1 + 1 ...)
변수 유효범위 (Variable Scope)
var : 함수레벨 유효범위 (사용을 권장하지 않는다)
let, const : 블록레벨 유효범위
= console.log의 위치
var의 경우 유효범위가 크기 때문에 의도하지 않은 범위에서 변수가 사용될 수 있으며, 그만큼 메모리를 차지하고 있어 결과적으로 개발자가 확인하지 못하는 메모리 누수가 될 수 있다.
형 변환 (Type conversion)
Truthy (참과 같은 값)
true, { }, [ ], 1, 2, 'false', -12, '3.14' ...
Falsy (거짓과 같은 값)
false, ' ', null, undefined, 0, -0, NaN (Not a Number)
화살표 함수
화살표 함수는 익명 함수로만 만들 수 있다.
화살표 함수는 생성자로 사용할 수 없다.
화살표 함수는 스스로의 this, argument를 가지지 않는다.
함수가 정의된 스코프에 존재하는 this를 가리킨다.
화살표 함수는 생성될 때 this가 결정된다.
화살표 함수가 어떻게 사용되건(호출되건) this는 바뀌지 않는다.
객체 데이터를 사용할 경우 { }를 사용하면 인식 중복으로 화살표 함수의 블록으로 해석이 될 수 있다.
이와같은 경우에는 ( ) 안에 { }를 담아서 사용한다.
즉시 실행 함수 (IIFE)
함수를 선언하고 함수를 실행할 때 기명함수를 호출하는 방식이 아닌 익명함수로 선언하는 즉시 바로 실행할 수 있다.
호이스팅(hoisting)
함수 선언부가 유효범위 최상단으로 끌어올려지는 현상
타이머 함수
setTimeout (함수, 시간) : 일정 시간 후 함수 실행
setInterval (함수, 시간) : 시간 간격마다 함수 실행
clearTimeout( ) : 설정된 Timeout 함수를 종료
clearInterval( ) : 설정된 Interval 함수를 종료
콜백(Callback)
함수의 인수로 사용되는 함수.
기본 문법 정리
mimi라는 변수가 하나 선언되어 있고 그 안에 { } 객체 데이터가 할당되어 있다.
객체 데이터의 구조
firstName, lastName은 속성
getFullName처럼 속성에 함수 데이터가 할당되어 있다면 메소드라고 부른다.
=> 속성과 메소드를 통틀어 멤버(Member)라고 부른다.
리터럴
특정한 데이터들을 " " 따옴표라는 기호를 통해서 만들어 내는 방식을 리터럴 방식으로 한다
형식, 속성, 속성값 접근 방법 여러 가지 변수를 하나의 묶음으로 나타낼 때 객체를 사용한다.
이러한 객체를 표현할 때, 중괄호 {}를 사용하여 나타내는 방식이 바로 객체 리터럴이다.
배열 데이터는 [ ] 대괄호를 사용하며, 문자 데이터는 " " 큰따옴표, ' ' 작은따옴표, 빽팁을 사용한다
인스턴스
비슷한 성질을 가진 여러개의 객체를 만들기 위해, 일종의 설계도라고 할 수 있는 생성자 함수(Constructor)를 만들어 찍어내듯 사용하는데 이렇게 생성된 객체를 인스턴스라 부를 수 있다.
new 연산자와 생성자 함수
객체 리터럴 {...} 을 사용하면 객체를 쉽게 만들 수 있으나, 복수의 사용자, 메뉴 내 다양한 아이템 등 유사한 객체를 여러개 만들어야할 때 생성자 함수를 사용한다.
'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다.
생성자 함수
생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없으나 다만 생성자 함수는 아래 두 법칙을 따른다.
1. 함수 이름의 첫 글자는 대문자로 시작한다. // 파스칼 케이스 사용
2. 반드시 'new' 연산자를 붙여 실행합니다.
this
일반(Nomal) 함수는 호출 위치에 따라 this 정의
화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의