JavaScript

seumomo_TAEILKIM·2023년 5월 18일

JavaScript frontend 프론트엔드

총정리

목록 보기

4/8

2023/07/27

JavaScript Tree Structure

JavaScript는 Browser와 node.js 환경에서 읽힐 수 있고, 읽히는 순간 실행 컨텍스트가 생성된다.
실행 컨텍스트는 Global(전역)과 Function으로 나뉜다.

Global(전역)

Lexical Environment(어휘적 환경)가 생성되고,
Lexical Environment에는 Environment Record(기록하는 환경)가 생긴다.
Environment Record(기록하는 환경)에서는 Object Environment(객체 환경), Declarative Environment(선언 환경), this로 나뉜다.

Object Environment => Binding Object(var, function)
=> window의 객체에 묶인다.

Declarative => let, const
=> Temperal Dead Zone

this => GlobalThisValtue

전역 객체

전역 객체를 사용하면 어디서나 사용 가능한 변수나 함수를 만들 수 있다.
=> 전역 변수는 성능적인 측면에서 되도록 사용하지 않는 것이 좋다.

브라우저 환경의 전역 객체는 window, Node.js 환경의 전역 객체는 global이다.
=> explorer를 제외한 모든 환경에서 사용되도록 통합된 전역 객체는 globalThis이다.

var로 선언된 변수는 전역 객체의 프로퍼티가 된다.

NameSpace

전역을 오염시키지 않기 위해 변수를 객체에 할당하면 객체 안에서만 사용할 수 있는 변수가 된다.
객체이름.변수이름 = 값

function(함수)

함수를 정의하게 되면 global 안에 global과 동일한 방식으로 동작하는 함수의 환경이 생성된다.

변수를 찾을 때의 순서

같은 블록 내에서 변수에서 찾는다.

같은 블록 내의 매개변수에서 찾는다.

상위 요소에서 변수에서 찾는다.

상위 요소의 매개변수에서 찾는다.

상위로 가면서 반복한다.

기본 문법

세미콜론은 선택적인데, []앞에는 세모콜론이 있다고 가정하지 않는다.

변수

데이터를 기억하기 위해 변수에 담으며, 변수는 유지보수와 성능 측면에서 사용이 필수적이다.

변수의 선언

변수 이름에는 문자, 숫자, _, $만 올 수 있고, 숫자가 처음에 올 수 없다.
let 변수이름 (영어의 대소문자는 구별된다.)
var, let, const를 사용하여 변수를 선언한다.

변수의 이름은 간결하고 무엇을 담는지 명확하도록 설정하며, 줄임말은 피한다.

변수의 이름에는 snake case를 사용하거나, camel case를 사용한다.

여부를 물어볼때는 is, has로 시작하는 이름을 주로 사용한다.

변수의 할당

선언한 변수에 값을 담는 행위를 말한다.
변수이름 = 값
let(var) 변수이름 = 값

var는 함수 내에서 사용된 것이 아니라면, 전역에서 접근이 가능한 변수이다.
=> 전역에서 접근이 가능한 이유는, var를 사용한 선언은 문서의 최상단으로 호이스팅되기 때문이다.

할당은 호이스팅되지 않기 때문에 undefined로 출력된다.

=> 블록 스코프가 없다.
=> 함수의 스코프에는 영향을 받는다.

상수

상수는 재할당하지 않을 것이라고 확신이 들 때 사용한다.

상수의 선언 및 할당

상수의 이름 규칙은 변수의 이름 규칙과 같고, 상수는 선언과 동시에 할당이 되어야 한다.
const 상수이름 = 값

코드가 실행되기 전 이미 값을 알고 있는 상수는 대문자로 이름을 선언한다.

엄격모드

기본적으로 자바스크립트는 모든 버전이 호환되도록 설계되어 있는데,
모던 자바스크립트만을 사용하기 위해, 문서에 'use strict'지시자를 사용한다.

엄격모드를 사용한 후에는 사용 전으로 되돌릴 수 없다.

자료형

원시 데이터 유형

숫자형(Number)

Infinity,-Infinity,NaN도 숫자형에 포함된다.

모든 수를 0으로 나누면 Infinity가 된다.

BigInt

2**53-1보다 크거나 -2**53-1보다 작은 정수는 숫자형으로 나타낼 수 없다.

숫자형 뒤에 n을 붙이면 BigInt로 표현된다.

문자형(String)

따옴표로 감싸주면 문자형으로 되며, 따옴표의 종류는 "" | '' | `` 세가지이다.

문자열에 변수나 표현식을 넣을 때는 ``를 사용하고, 변수나 표현식을 ${}로 감싸서 넣어준다.

불린형(Boolean)

true 또는 false로 반환된다.

null

값을 알 수 없거나, 비어있을 때 null로 반환된다.

undefined

값이 할당되지 않았을 때 undefined로 반환된다.

변수의 값이 비어있거나 알 수 없는 상태를 나타낼 때는 undefined가 아닌 null을 주로 사용한다.

symbol

고유한 식별자를 만들 때 사용한다.

객체 데이터 유형

데이터 컬렉션이나 복잡한 개체를 표현할 때 사용한다.

객체(object)

=> function과 array도 object 유형에 속한다.
=> 객체를 생성할 때는 new Function(Array, Object)() 함수를 사용할 수 있다.

typeof

자료형의 종류를 반환한다.

typeof 값 연산자 또는 typeof(값) 함수로 사용된다.

typeof null의 값이 object로 반환되는 것은 오류이다.

typeof function의 값이 function으로 반환되는 것은 오류이다.

Object.prototype.toString.call()
=> typeof보다 더 정확하게 어떤 자료형인지 확인할 수 있다.
=> [object 자료형]와 같이 반환된다.

형 변환

자동 형 변환

숫자 + 문자 = 문자

숫자형 문자 값을 숫자 값으로 바꾸기
=> 숫자형 문자 값에 +를 붙이거나, -0 또는 *1 또는 /1

숫자 + null = 숫자

숫자 + undefined = NaN

문자형으로의 변환

명시적 형 변환

typeof value; // boolean

String(value);
typeof value; // string

암시적 형 변환

typeof value; // boolean

value = value + '';
typeof value; // string

숫자형으로의 변환

명시적 형 변환

const value = '123';

typeof value; // string

Number(value);
typeof value; // number

undefined와 문자열이 들어 있는 값을 숫자형으로 변환하려고 하면, NaN이 반환된다.

null을 숫자형으로 변환하면, 0이 반환된다.

숫자 값의 양쪽 공백이 제거된다.

암시적 형 변환

const value = '123';

typeof value; // string

value = +value( value * 1 | value / 1 );
typeof value; // number

불린형으로의 변환

명시적 형 변환

const value = 0;

typeof value; // number

Boolean(value); // false
typeof value; // boolean

암시적 형 변환

const value = 0;

typeof value; // number

value = !!value; // false
typeof value; // boolean

!를 하나만 붙이면 불린 값이 반대로 바뀐다.(부정된다.)

기본 연산자와 수학

단항 연산자

피연산자가 한 개일 때를 말한다.
=> -로 부호를 바꾸는 경우

이항 연산자

피연산자가 두 개일 때를 말한다.
=> 숫자1 + 숫자2 사칙연산과 같이 일반적이 연산이 해당된다.

덧셈 연산자

숫자 값과 문자형 숫자 값을 더하면 문자열로 변환된다.
2 + 2 + '1' = '41'

배열을 합치기 위해서는
배열1.concat(배열2) 메소드를 사용할 수 있지만 주로 사용하는 방법은 아니다.
주로 배열을 합칠 때는 [...배열1, ...배열2]로 합친다.

뺄셈, 곱셈, 나눗셈 연산자

문자형 숫자 값도 연산을 하게 되면 숫자형으로 변환되어 계산된다.
'5' - '3' = 2
'5' * '3' = 15

쉼표 연산자

여러 연산들을 쉼표로 구분하게 되면, 모두 실행은 되지만 마지막 식만 반환이 된다.

비교 연산자

비교 연산자는 불린 값을 반환한다.

다른 형을 가진 값 간의 비교

문자형 숫자 값과 숫자 값을 비교할 때는 숫자 값으로 변환되어서 비교된다.

예외적인 경우

null == undefined는 true이다.

null
null > 0 // false
null == 0 // false
null >= 0 // true

일치 연산자

일치 연산자 ===는 자료형의 동등 여부까지 검사한다.

논리 연산자

AND(&&), OR(||), NOT(!)
=> &&가 ||보다 먼저 평가된다.

조건문

논리 연산자를 활용한 조건식

||
=> 하나만 true여도 true로 반환되기 때문에, 처음으로 true를 만났을 때 실행을 중단하고 해당 값을 반환한다.
=> 하나의 true도 찾지 못했을 때는, 마지막까지 실행됐기 때문에 마지막 false의 값을 반환한다.
&&
=> 모두 true여야 true로 반환되고, 마지막까지 실행됐기 때문에 마지막 true의 값을 반환한다.
=> 하나만 false여도 false로 반환되기 때문에, 처음으로 false를 만났을 때 실행을 중단하고 해당 값을 반환한다.

switch-case

조건이 많을 때 if 문보다 유용하다.

switch (인수) {
  case 조건: 조건이 참일 경우 실행될 문장;
  break;
  default: 참인 조건이 없을 때 실행될 문장

break가 없으면 true인 case 이후의 모든 case 및 default를 실행한다.

case를 이어서 쓰면 ||으로 묶인다.

3항 연산식

조건 ? 값1 : 값2
=> 조건이 참이면 값1을 그렇지 않으면 값2를 반환한다.

nullish 병합 연산자(??)

||와 유사하지만, ||와 다르게 정의된 값을 만나면 해당 값을 반환한다.

a = 0;
b = 1;

a || b // 0은 false이기 때문에 1을 반환한다.
a ?? b // 0은 정의된 값이기 때문에 0을 반환한다.

a가 null이나 undefined가 아니라면(정의된 값을 가졌다면) a를 반환한다.
=> a가 정의되지 않았다면(null || undefined) b를 반환한다.
=> 안정성 측면에서 &&, || 와 함께 사용하지 못한다.

반복문

continue 지시자 아래의 구문을 실행하지 않고, 다시 조건으로 돌아간다.

while

조건이 true인 동안 계속 실행된다.

while(조건) {
실행될 구문
}

do-while

while과 동일하지만 무조건 do의 코드를 최소 한번 실행한다.
=> 무조건 한번은 실행되어야 할 때 사용한다.

do {
실행될 구문
} while(조건)

for

for (시작값; 조건; 갱신) {
실행될 구문
}

for-in(객체)

for(let 변수이름 in 객체이름) {}
=> 객체에서 순환하며 key를 찾을 때 사용한다.

for-of(배열)

for (let 변수이름 of 배열이름) {}

[[prototype]]에 symbol.iterator를 가지고 있어야 사용이 가능하다.

함수

메소드 => 객체가 소유한 함수
return을 만나면 실행이 중단되고, 해당 값을 반환한다.
함수는 하나의 동작만 담당해야 한다.

throw new Error('에러메세지')
에러 메세지를 출력한다.

콜백함수
=> 나중에 호출되는 함수

arguments 객체를 사용해서 함수의 매개변수 없이 함수를 사용할 수 있다.
=> arguments는 유사배열이며 for-of문으로 순환이 가능하다.

함수 정의(함수 선언문)

function 함수이름() {}

함수를 선언하면 최상단으로 호이스팅되기 때문에 어디서든 사용이 가능하다.

엄격모드에서는 블록의 영향을 받기 때문에, 블록 내에서만 사용이 가능하다.

함수 이름 짓기

show~ => 무언가를 보여줄 때
get~ => 값을 반환함
calc~ => 무언가를 계산할 때
create~ => 무언가를 생성할 때
check~ => 무언가를 확인하고 불린값을 반환할 때

함수 표현식

함수를 변수에 할당한다.

let(const, var) 함수이름 = function() {}

변수 선언만 최상단으로 호이스팅되기 때문에 코드를 만나기 이전에는 사용할 수 없다.

블록의 영향은 받지 않기 때문에 코드 이후에는 어디서든 사용이 가능하다.

화살표 함수

let func = (arg1, arg2, ...argN) => expression

() 안에 매개변수를 담고, => 뒤에 return할 값을 담는다.
=> return 값이 여러 줄이라면, {} 안에 return 지시자 뒤에 값을 담는다.

매개변수에 ...argN => 나머지 인수를 배열로 만들어준다.

일반 함수와 화살표 함수에서의 this의 차이점

일반함수의 this
=> 나를 호출한 대상을 가리킨다.

화살표함수의 this
=> this를 바인딩할 수 없으며 부모의 this를 가리킨다.

함수 호출

함수이름()
함수가참조된변수이름()

매개변수와 인수

매개변수

함수를 정의할 때의 변수(parameters)
매개변수에 매개변수 = 기본값으로 기본값을 정의할 수 있다.
function 함수이름(매개변수 = 기본값) {}

인수

함수를 사용할 때, 변수에 넣을 인수(arguments)
함수이름(인수)

함수 결과 반환

함수에서 처리되야 할 코드를 return을 작성하여 결과를 반환해야 결과값이 저장된다.

결과 값이 요구될 때는 get~함수

결과 값이 요구되지 않을 때는 set~함수

내장된 함수와 메소드

window.parseInt()
=> 인수에서 정수만 10진수로 추출한다.
=> 문자 뒤에 있는 정수는 추출되지 않는다.

window.parseFloat()
=> 인수에서 실수만 10진수로 추출한다.
=> 문자 뒤에 있는 실수는 추출되지 않는다.

window.alert()
=> 사용자에게 인수를 보여준다.

window.confirm()
=> 사용자에게 인수를 보여주고, 확인 또는 취소의 답변을 받는다.

window.prompt()
=> 사용자에게 인수를 보여주고, 답변을 입력할 수 있도록 한다.
=> 입력된 답변은 데이터로 저장되며, 숫자를 입력하더라도 문자형으로 저장된다.

window.console.log()
=> 콘솔 창에 인수를 보여준다.

window.console.info()
=> 콘솔 창에 인수를 정보로 보여준다.

window.console.warn()
=> 콘솔 창에 인수를 경고로 보여준다.
window.console.error()
=> 콘솔 창에 인수를 에러로 보여준다.
window는 전역객체로서, window를 생략하고 메소드만 사용할 수 있다.

parseInt()와 Math.floor()의 차이점

parseInt()는 소수를 아예 삭제하고 정수만 반환하고,

Math.floor()는 소수를 반내림하기 때문에, 음수인 경우에 차이가 발생한다.
parseInt(-5.5) // -5
Math.floor(-5.5) // -6

즉시 실행 함수 표현식(IIFE)

전역을 오염시키지 않기 위해 사용한다.
=> IIFE를 변수에 할당하면 함수의 return 값만 저장된다.

(function () {
})();  // 뒤에 바로 ()를 붙여준다.

익명 함수를 사용한다.

함수 정의 후 ()로 감싸준 다음 뒤에 ()를 붙여 즉시 실행되도록 한다.

this

객체의 메소드를 정의할 때는 화살표 함수 사용을 지양한다.
=> 객체 안에서의 this를 찾을 수 없기 때문이다.

메소드 안에서의 함수를 호출할 때는 화살표 함수 사용을 지향한다.
=> 메소드 안에서 일반함수를 사용하고 this를 찾게 되면 예상한 값과 다르게 나올 수 있기 때문이다.

화살표 함수의 this

상위 환경에서 this를 찾았을 때의 값을 가져온다.

객체(Object)

key를 변수로부터 받아와서 처리할 때는 . 표기법이 아닌 [] 표기법으로 불러온다.
=> 계산된 프로퍼티 (computed property)

단축 프로퍼티(Shorthand Property)

key와 value가 같을 때에는 하나만 써서 표현할 수 있다.

object = {
name,  // name: name
email  // email: email
}

key 조회

Object.prototype.hasOwnProperty.call(객체이름, 'key')
=> Object.prototype은 ({})로 대체할 수 있다.

.call() 메소드를 사용하면 다른 자료형의 기능을 수행할 수 있다.
=> 기능을가지는자료형.prototype.기능이름.call()
=> 객체가 가지는 고유의 기능(Instance Method)이 있고,
공통적으로 사용할 수 있는 기능(Static Method)이 있다.

Property 나열

Object.keys(객체이름)
=> 모든 key를 배열로 반환한다.

Object.values(객체이름)
=> 모든 value를 배열로 반환한다.

Object.entries(객체이름)
=> key와 value를 각각 쌍으로 하는 배열로 반환한다.

객체를 for-of로 순환하려면 배열로 바꾸고 사용한다.

Property 제거 | 삭제

object.key = null;  // object의 key를 null로 한다.(제거)

delete object.key;  // object의 key를 delete한다.(삭제)

객체 구조 분해 할당

객체를 분해해서 변수에 담을 때 사용하며,
순서를 바꿀 수 있고 변수의 이름을 바꾸려면 변수 객체의 value를 설정해주어야 한다.

const salaries = {
  권: 50,
  이: 3000,
  강: 500,
  김: 700
}  // 변수 선언 및 객체를 변수에 할당

const {권, 이, 강, 김} = salaries  // salaries의 '권, 이, 강, 김'이라는 key의 value를 '권, 이, 강, 김'이라는 변수에 각각 할당한다.

/*
const 권 = salaries.권
const 이 = salaries.이
const 강 = salaries.강
const 김 = salaries.김
*/

객체 합성

{...객체이름, ...객체이름}

Date 객체

New Date()로 새로운 Date 객체를 만들 수 있다.
=> () 안에 연, 월, 일, 시, 분, 초 순서대로 삽입할 수도 있다.

연도 구하기
=> .getFullYear() 메소드를 사용한다.

월 구하기
=> .getMonth() 메소드를 사용한다.
=> 1월이 0으로 반환되기 때문에 +1을 해줘야 한다.

일 구하기
=> .getDate() 메소드를 사용한다.

요일 구하기
=> .getDay() 메소드를 사용한다.
=> 0 ~ 6으로 반환되며, 0은 일요일이다.

시간 구하기
=> .getHours() 메소드를 사용한다.

분 구하기
=> .getMinutes() 메소드를 사용한다.

초 구하기
=> .getSeconds() 메소드를 사용한다.

밀리초 구하기
=> .getMilliseconds() 메소드를 사용한다.

현재 시간을 밀리초 값으로 구하기
=> .getTime() 메소드를 사용한다.
=> 1970년 1월 1일 00시 00분 00초 이후의 밀리초를 반환한다.

배열(Array)

배열 만드는 방법

[...] (spread syntax)

Array.from(객체이름)

배열 구조 분해 할당

배열을 분해해서 변수에 담을 때 사용하며,
순서를 바꿀수 없고 변수의 이름은 바꿀 수 있다.

let color = ['#ff0000', '#2b00ff', '#00ff2f']  // 변수 선언 및 배열을 변수에 할당

let [red, blue, green] = color  // 배열의 요소들을 순서대로 변수에 각각 할당한다.

/*
let red = color[0]
let blue = color[1]
let green = color[2]
*/

값 복사 vs 값 참조

값 복사
원시데이터(null, undefined, string, number, boolean)의 값을 복사 할 수 있다.
=> 복사된 값이 변경되었을 때 변수의 값은 변경되지 않는다.

값 참조
객체 유형(object, array, function)의 값을 참조할 수 있다.
=> 참조된 값이 변경되었을 때 변수의 값도 같이 변경된다.
=> for 문을 사용해서 객체 유형도 복사할 수도 있다.
값 참조에서 복사하는 방법

Object.assign(복사받을객체이름, 복사할객체이름1, ...)

spread syntax(...)
복사받을객체이름 = {...복사할객체이름}

Class

extends

extends한 경우에, constructor를 수정한다면 super()를 필수로 사용해야 한다.
=> 부모의 property를 이어받아 사용한다.

static 지시자를 사용하면 class에 메소드가 정의된다.

#을 사용하면 외부에서 property에 접근하지 못하게 할 수 있다.

Closure

전역을 오염시키지 않기 위해 사용한다.
=> 지역변수를 기억하고 외부에서 수정할 수 없도록 한다.

Optional Chaining

에러가 나는 경우에 에러가 나지 않도록 해준다.
?.은 undefined나 null 이면 평가를 멈추고 undefined를 반환한다.

Number Methods

Math.floor(number)
=> 소수를 내림한다.

Math.round(number)
=> 소수를 반올림한다.

Math.ceil(number)
=> 소수를 올림한다.

Math.trunc(number)
=> 소수 이하를 절삭한다.

Math.random()
=> 0 이상 1 미만의 랜덤한 수를 반환한다.

Math.max(numbers)
=> 수 중 최댓값을 반환한다.

Math.min(numbers)
=> 수 중 최솟값을 반환한다.

Math.pow(number, 거듭제곱)
=> 수를 거듭제곱한 값을 반환한다.

Math.abs(number)
=> 절대값을 반환한다.

String Methods

.length
=> 공백을 포함한 길이를 반환한다.

.slice(number1, number2)
=> number1번째부터 number2번째 전까지를 자른 복사본을 반환한다.
=> 오른쪽부터 순서를 세려면 number에 음수를 넣는다.
=> 인수를 넣지 않으면 그대로 배열로 반환한다.

.subString(index1, index2)
=> index1부터 index2까지를 반환한다.

.substr(index, number)
=> index부터 number개 글자를 반환한다.

.indexOf('string')
=> 문자열이 포함됐는지를 확인한다.
=> 포함됐으면 index를, 포함되지 않았으면 -1을 반환한다.

.lastIndexOf('string')
=> .indexOf()와 동일한 방식이나, 뒤에서부터 값을 찾는다.

.includes('string')
=> string을 포함하는지 boolean 값으로 반환한다.

.startsWith('string')
=> string으로 시작하는지 boolean 값으로 반환한다.

.endsWith('string')
=> string으로 끝나는지 boolean 값으로 반환한다.

.trim(Start | End)()
=> 공백을 없애준다.

.repeat(number)
=> number만큼 반복한다.

.toLowerCase()
=> 소문자로 변환한다.

.toUpperCase()
=> 대문자로 변환한다.

Array Methods

원형 파괴

push()
=> 배열의 마지막에 요소를 추가한다.
=> 반환은 length 값

pop()
=> 배열의 마지막 요소를 추출한다.

unshift()
=> 배열의 앞에 요소를 추가한다.
=> 반환은 length 값

shift()
=> 배열의 앞 요소를 추출한다.

.reverse()
=> 배열을 뒤집어준다.

.splice(index, 제거될개수, itemN)
=> index부터 개수만큼 제거하고 item을 추가해준다.

.sort(a-b)
=> a-b의 결과가 0보다 작으면 a가 b보다 앞에 위치한다.
=> a-b의 결과가 0이면 a와 b의 위치를 바꾸지 않는다.
=> a-b의 결과가 0보다 크면 a가 b보다 뒤에 위치한다.

.join(value)
=> 배열의 요소들을 value로 구분하여 하나의 string으로 반환한다.

새로운 배열 반환(원형 비파괴)

.concat(배열n)
=> 배열1과 배열2를 합쳐서 새로운 배열을 반환한다.

.slice()

.toSorted()
=> .sort()와 동일하게 동작한다.

.toReversed()
=> .reverse()와 동일하게 동작한다.

.toSpliced()
=> .splice()와 동일하게 동작한다.

.map()
=> .forEach()와 동일하게 동작하며, 값을 반환한다.

요소 찾기

.find()
=> 해당하는 요소 1개를 반환한다.

.filter()
=> 해당하는 요소들을 배열로 반환한다.

요소별 reducer 실행

.reduce((누적값, 아이템) => {return 값}, 누적값의초깃값)
=> 초깃값을 올바르게 설정해 주어야 원하는 값을 얻을 수 있다.
=> 누적값의 초깃값부터 순환하면서 아이템들을 연산하고 최종 누적값을 반환한다.
=> return이 필수이다.
=> Array().fill().reduce()를 이용해서 반복문처럼 사용할 수 있다.
=> Array().fill()가 반복 횟수가 된다.

string과 array의 변환

.split()
=> 문자열에서 인수를 기준으로 구분하여 배열로 반환한다.

.join()
=> 배열에서 인수를 기준으로 합쳐서 문자열로 반환한다.

Stack과 Queue

Stack : 배열의 마지막에 추가된 요소가 먼저 추출된다.
Queue : 배열의 먼저 추가된 요소가 먼저 추출된다.

정규 표현식

특정 문자 조합을 찾기 위한 패턴이다.
=> 정규 표현식도 객체이다.

try-catch(예외 처리)

Error가 발생한 지점 이후의 모든 코드가 실행되지 않는 것을 방지하기 위해 사용한다.
=> 서버와 연결할 때에는 필수이다.

try {
}
catch() {
}
finally {
}

=> error가 발생할 경우에는 try의 코드를 중단하고 catch의 코드를 실행한다.
=> finally는 error가 발생해도 작동하는 코드이다.

Error는 name과 message, stack으로 구분된다.
=> stack = name + message

BOM

(Browser Object Model)

Location 객체

http://localhost:5500/index.html?type=listing&page=2#title

http://
=> protocol(프로토콜)

localhost:5500
=> port(포트 넘버)

/index.html
=> pathname(경로명)

?type=listing&page=2
=> search(검색)

#title
=> hash(해시)

Navigator 객체

platform
=> 브라우저가 실행되는 플랫폼 정보를 반환한다.

userAgent
=> 브라우저와 운영체제 정보를 반환한다.

language
=> 브라우저에서 사용되는 언어를 반환한다.

onLine
=> 브라우저가 온라인인지의 여부를 반환한다.

Screen 객체

height
=> 모니터 사이즈

availHeight
=> 브라우저의 높이

innerHeight
=> 브라우저의 내부 높이

History 객체

back
=> 뒤로 가기

forward
=> 앞으로 가기

DOM

(Document Object Model)

문서 대상 찾기

.closest(선택자)
=> 자기 자신을 포함하여 선택자와 일치하는 가장 가까운 부모 요소를 찾아준다.

.nextSibling(previousSibling)으로 다음(이전) 요소를 찾을 수 있다.

nodeType
=> element = 1, attribute = 2, text = 3, comment = 8
=> 한 문서 페이지의 단위를 node라고 한다

.children
=> 해당 요소의 자식 중 요소 node만을 유사 배열로 반환한다.

문서 대상 확인

.matches()
=> 요소에 인수의 값이 존재하는지 확인한다.

.contains()
=> 요소의 자식들 중에 해당하는 요소가 있는지 확인한다.

노드 콘텐츠 읽기 / 쓰기

.hidden
=> display: none과 동일하게 작동한다.
=> HTML에 inline 방식으로 CSS를 설정하면 무시된다.

속성과 프로퍼티

HTML에 작성된 표준 속성은 DOM에서 사용할 수 있는 프로퍼티가된다.

프로퍼티 검토

.hasAttribute()
=> 인수의 속성이 존재하는지를 확인한다.

.getAttribute()
=> 인수의 속성값을 가져온다.

.setAttribute(속성, 값)
=> 인수의 속성과 값을 설정해준다.

.removeAttribute()
=> 인수의 속성을 삭제한다.

.attributes
=> 인수가 가지는 속성들을 열거 가능한 객체로 반환한다.

비표준 속성, 프로퍼티 설정

비표준 속성을 data-속성으로 수정하면 표준 속성이 된다.
=> 프로퍼티로 사용할 때는 .dataset으로 사용한다.
=> .dataset.속성은 값을 반환한다.
=> .dataset.속성 = '값'은 속성의 값을 수정한다.

Manipulation

.insertAdjacentHTML(위치, 값)
=> HTML의 요소의 위치에 값을 추가한다.

Style

.classList.(add | remove | toggle)(name)
=> name의 class를 add | remove | toggle한다.

.classList.contains(name)
=> 요소에 name의 class가 있는지를 확인한다.

.style.property = value
=> 요소의 property를 value로 설정한다.

getComputedStyle(요소).property
=> 요소의 property의 value를 반환한다.

Event

Event가 발생하면 Event Object가 생성된다.

Event 추가

HTML 속성 활용
=> HTML 속성을 활용할 때에만 실행 연산자 ()가 있어야 한다.

DOM property 활용
=> Event 하나에 한 동작만 적용시킬 수 있다.

Method 활용
=> .addEventListener(이벤트, 함수)

Event 제거

.removeEvenetListener(이벤트, 함수)
=> 추가된 Event의 함수와 동일한 이름을 넣어주어야 한다.

Bubbling

겹치는 영역에서 상위 요소의 Event가 같이 동작하는 현상을 말한다.
=> Event Object에 .stopPropagation()을 사용해서 방지할 수 있다.

Capturing

Bubbling의 Event의 동작 순서가 반대로 된다.
=> Event의 함수 뒤에 true를 줘서 사용한다.

Delegation

Bubbling이 발생하는 상황에서, 상위 요소의 Event가 하위 요소로 위임되는 것을 말한다.

.currentTarget
=> Event를 갖고 있는 요소를 반환한다.

.target
=> Event를 동작시킨 요소를 반환한다.

.closest()를 활용하여 동작 범위를 상위 요소까지로 확장시킬 수 있다.

화살표 함수에서는 currentTarget을 사용한다.

모듈 프로그래밍

type="module"로 실행한다.

항상 엄격 모드로 실행된다.

각각의 module들이 캡슐화되기 때문에 각자의 scope를 가진다.

module끼리 export | import 해서 사용한다.
=> 주제가 비슷한 module끼리 폴더에 저장하고, index.js로 합쳐서 호출한다.

module은 여러번 호출되더라도 한 번만 실행된다.

항상 defer 속성이 적용된다.

AJAX

Asynchronous Javascript And XML - 상황

sync (동기 통신)

User Interface에서 Web Server로 모든 데이터를 요청하고 받는다.

async (비동기 통신)

코드의 실행 흐름과 다르게 동작하는 코드

setTimeout(콜백함수, ms)
=> ms 뒤에 콜백함수가 실행된다.

setInterval(콜백함수, ms)
=> ms마다 콜백함수가 실행된다.

setTimeout()과 setInterval()를 실행하면 고유의 id를 반환한다.
=> clearTimeout(id) 또는 clearInterval(id)로 함수를 종료시킨다.

User Interface에서 필요한 데이터를, Ajax Engine을 통해 문자화 된 JSON data로 Web Server에 요청하고, Ajax Engine을 통해 문자화 된 JSON data를 받는다.
=> sync에 비해 부드럽게 데이터를 가져온다.

문자화 된 데이터는 JSON.parse() 또는 JSON.stringify()를 사용해 변환한다.

REST

Repressentational State Transfer - 방법

POST (Create)
GET (Read)
PUT (Update)
DELETE (Delete)

XHR

new XMLHttpRequest() 생성자 함수를 변수에 담는다.

.open() 메소드를 사용해서 웹페이지를 연다.

.addEventListener('readystatechange', 콜백함수) 메소드를 사용하여 변화되는 상태에 따른 코드를 작성한다.

.send() 메소드를 사용하여 보낸다.

JSDoc
=> /** */ 주석을 이용해서 함수에 대한 설명을 만들어줄 수 있다.

Callback 패턴

순차적으로 실행되지 않는 코드에 콜백 함수를 매개변수로 하여 비동기 코드를 순차적으로 실행되도록 한다.

Promise

코드가 복잡하고, 어느 시점에서 코드가 실행됐는지 파악하기 어려운 콜백 함수 패턴을 개선하기 위해 사용한다.

let promise = new Promise(function(resolve, reject) {excutor})

excutor는 반드시 실행된다.
resolve 또는 reject 중 하나는 반드시 설정해야 하고, 둘 중 하나만 실행된다.
=> resolve가 실행됐을 때의 state는 fulfilled이다.
=> reject가 실행됐을 때의 state는 rejected이다.
이후의 처리는 .then() 메소드를 사용하여 처리할 수 있다.
promise().then(() => {
  return b()
}).then(() => {
.then() 메소드의 첫 번째 인수는 promise가 이행되었을 때 실행될 함수(result)이다.

두 번째 인수는 promise가 이행되지 않았을 때 실행될 함수(error)이다.

보통은 두 번째 인수는 설정하지 않고, .catch() 절에서 promise가 이행되지 않았을 때의 실행될 함수를 설정한다.

Promise Chaining

.then | .catch | .finally를 호출하면 promise가 반환되기 때문에,
반환된 값에 다시 메소드를 사용할 수 있다.

비동기 통신에서 항상 promise를 반환하도록 해야 언제든 chaining 하기에 유리하다.

async()

function 앞에 async를 붙이면 해당 function은 항상 이행된 promise로 반환된다.

await

async 함수 안에서나 promise 객체 앞에서, promise가 처리될 때까지 기다렸다가 이후에 실행된다.

let value = await promise;

promise가 처리되기를 기다리는 동안, 다른 일들을 수행할 수 있기 때문에 리소스가 낭비되지 않는다는 장점이 있다.

promise에 all을 붙여 모든 promise가 처리되길 기다리도록 할 수 있다.

result 값을 반환해 주는 역할을 한다.

promise가 이행되지 않으면, throw문처럼 error를 던져준다.

error에 try-catch문을 사용할 수 있다.

fetch

페이지 새로 고침 없이 정보를 받아올 때 사용한다.
fetch()를 호출하면 네트워크 요청을 보내고 promise가 반환된다.
=> await 또는 .then()을 사용하여 데이터를 받은 후의 동작을 처리한다.

let promise = fetch(url, [options])

options
=> options에 인수를 넘기지 않으면, GET 요청으로 실행된다.

response의 메소드를 활용하여 응답받은 본문을 처리할 수 있다.
=> 본문을 읽을 때는 하나의 메소드만 사용할 수 있다.

.json() 메소드를 이용하여 받은 값을 불러올 수 있다.

응답 헤더
=> response.headers에 map과 유사한 형태로 저장된다.

요청 헤더
=> headers options을 사용해 요청 헤더를 설정할 수 있다.

POST 요청
=> GET 이외의 요청에는 추가 options를 사용해야 한다.

body는 문자열 | FormData | Blob | BufferSource | URLSearchParams 중 하나여야 한다.

Storage

localStorage

origin이 같은 경우 모든 탭과 창에서 데이터가 공유된다.
재시작하더라도 데이터가 삭제되지 않는다.

.setItem(key, value)로 item을 저장할 수 있다.
👉 .getItem(key)로 해당 key의 value를 가져올 수 있다.

item은 문자형만 저장할 수 있으나, JSON.stringify()를 이용하면 객체를 저장할 수 있다.
👉 JSON.parse()를 이용하여 객체로 get한다.

seumomo_TAEILKIM

어제의 나보다 1% 발전하기💪

이전 포스트

Sass

다음 포스트