호출 스택

function first() {
  second()
  console.log('첫 번째');
}
function second() {
  third()
  console.log('첫 번째');
}
function third() {
  console.log('첫 번째');
}
first();

• 순서: 세 번째 -> 두 번째 -> 첫 번째

이벤트 루프

호출 스택 -> 백그라운드 -> 태스크 큐(호출 스택이 비어 있을 때만 실행 가능)

function onMore() {
  console.log('one more');
}
function run () {
  console.log('run run')
  setTimeout(() => {
    console.log('wow');
  }, 0)
  new Promise((resolve) => {
    resolve('hi');
  })
  	.then(console.log);
  oneMore();
}

setTimeout(run, 5000);

• 콘솔창: run run -> one more -> hi -> wow
• Promise의 then이 다른 타이머 함수보다 먼저 실행된다.

const, var, let

• const: 블록 스코프, 값 선언 한번만 가능
• var: 함수 스코프
• let: 값 선언 여러번 가능

템플릿 문자열

• 템플릿 문자열: 백틱 기호 사용

const desc = `Hi, My name is ${name}, ${age} years old.` 

화살표 함수

const add2 = (x, y) => {
  return x+y;
};
const add2 = (x, y) => x + y;
const add2 = (x, y) => (x + y);

const obj = (x, y) => {
  return {x, y}
};

// 객체를 리터럴하는 경우에는 소괄호가 필수!
const obj = (x, y) => ({x, y})

• 화살표 함수가 function() {}을 대체하지는 못한다.-> this가 달라지기 때문에

구조 분해 할당

const example = { a: 123, b: { c: 135, d: 146} }
const { a, b: { d } } = example;
console.log(a); // 123
console.log(d); // 146

arr = [1, 2, 3, 4, 5]
const [x, y, , , z] = arr;

• this가 있는 경우에는 구조분해 할당 X

생성자 함수

• new 연산자와 생성자 함수를 사용해 재사용할 수 있는 객체 생성 코드 구현

this

• 메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.

Promise

• 프로미스: 내용은 실행이 되었지만 결과를 아직 반환하지 않은 객체
• then -> 결과 반환
• Resolve(성공리턴값) -> then으로 연결
• Reject(실패리턴값) -> catch로 연결
• finally 부분 무조건 실행
• 함수를 분리하여 원하는 타이밍에 실행가능(콜백함수는 불가능)

async/await

• 변수 = await 프로미스; -> 프로미스가 resolve된 값이 변수에 저장됨
• async 함수는 항상 promise를 반환(return)
  • then, await을 붙여서 쓴다.
• for await (변수 of 프로미스배열)
  • resolve된 프로미스가 변수에 담겨 나옴
  • async 함수 안에서 사용해야함

Map/Set

Map : 객체와 유사, 키에 다양한 자료형을 허용함

• new Map() : 맵 생성
• map.set(key, value): key를 이용해 value를 저장
• map.get(key): key에 해당하는 값 반환, key가 존재하지 않으면 undefined 반환
• map.has(key): key가 존재하면 true, 존재하지 않으면 false 반환
• map.delete(key): key에 해당하는 값 삭제
• map.clear(): 맵 안의 모든 요소 제거
• map.size: 요소의 개수 반환
• forEach 지원

Set : 배열과 유사, 중복을 허용하지 않는 값을 모아놓은 컬렉션

• new Set(iterable): 셋 생성
• set.add(value): 값을 추가하고 셋 자신 반환
• set.delete(value): 값 제거
• set.has(value): 셋 내에 값이 존재하면 true, 아니면 false
• set.clear(): 셋을 비움
• set.size: 셋의 전체 값의 개수 반환
• forEach 지원

널 병합/ 옵셔널 체이닝

• ?? : 널 병합 연산자
• ?. : 옵셔널 체이닝
  • 중첩 객체를 에러없이 안전하게 접근 가능

프론트엔드 자바스크립트

• axios.get
• axios.post
• axios로 이미지 데이터 보낼 때 : FormData 객체 이용
  • FormData 메서드
    1. Append: 데이터 하나씩 추가
    2. Has: 데이터 존재 여부 확인
    3. Get: 데이터 조회
    4. getAll: 데이터 모두 조회
    5. delete: 데이터 삭제
    6. set: 데이터 수정
• 주소창에 한글 입력 시
  • encodeURIComponent('내용')으로 감싸줘서 처리
  • decodeURIComponent로 서버에서 한글 해석