-
var
-es5까지 사용하던 변수생성 키워드
-같은 변수 여러개, 생략 가능
-함수레벨 스코프(변수를 어디까지 사용할 수 있는가)
-선언 전에도 사용 가능(호이스팅 때문)
let
-블록레벨 스코프
-재선언 불가
-재할당 가능
const
-재선언, 재할당 불가
typeof 자료형을 알아낼 수 있는 연산자
컴포넌트 쪼개기
-뷰만 생각해서 쪼개는 방법
-데이터를 생각해서 쪼개는 방법
자바스크립트는 싱글 쓰레드(한번에 한가지만 동작할 수 있음)
비동기 작업은 동시에 가능.
자바스크립트 엔진
메모리힙, 콜스택
싱글쓰레드란 스택이 하나라는 말
작업을 시작하면 실행할 것이 스택 안에 쌓이고 끝나면 없어진다.
작업이 들어오는 순으로 쌓아놨다가 하나씩 처리해서 사라지게 함.
비동기-자바스크립트 수행을 도와주는 친구들과 같이 처리
엔진+웹 API(Ajax, DOM)+콜백큐+이벤트루프
비동기 요청->콜스택에 쌓인다.->웹API에게 요청(위임)->콜백큐에 콜백함수 넘겨줌->이벤트루프를 통해서 콜스택에 콜백함수 다시 넣어버림->콜스택이 처리 후 사라짐
콜백이란?
어떤 함수의 인수로 넘겨주는 함수
비동기 작업 에서는 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나.(콜백패턴)
->콜백 헬, 멸망의 피라미드: 비동기 작업을 한 후 받아온 값에 다시 비동기 작업을 하는 비동기 처리가 늘어나면
호출이 계속 중첩되고, 코드가 깊어지고, 관리가 어려워진다.
콜백헬을 해결할 방법?
-프라미스(ES6에서 도입한 비동기 처리 패턴)
->비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체
프라미스의 상태값
1.pending: 비동기 처리(프라미스 처리)가 끝났는지 안끝났는지에 대한 것.
아직 처리가 안되었으면 pending이 불려온다.
2.fulfilled: 수행 성공(resolve가 호출된 상태)
3.rejected: 수행 실패(reject가 호출된 상태)
4.settled: 성공or실패(resolve나 reject가 호출된 상태)
쿠키: 크라이언트 로컬에 저장되는 Key:Value형태의 저장소
세션 스토리지: HTML5에서 추가된 저장소입니다! 쿠키와 마찬가지로 key:value 형태의 저장소예요.
-저장된 데이터는 브라우저를 닫으면 제거->자동 로그인이나, 장바구니같은 다음에 브라우저를 열었을 때도 유지해야하는 데이터는 넣기 어렵
로컬스토리지: HTML5에서 추가된 저장소입니다! 쿠키와 마찬가지로 key:value 형태의 저장소예요
-로컬 스토리지는 따로 지워주지 않으면 계속 브라우저에 남아 있어요. ->유저의 아이디, 비밀번호같은 중요한 정보를 넣어두면 아주 위험
토큰은 어디에 저장?
-쿠키에 저장:
모든 API요청을 할 때 HTTP통신을 한다.
쿠키에 저장을 해놓으면 HTTP통신을 할때 쿠키정보를 같이 보낸다.->토큰만 넣어놓으면 편함.but쿠키는 만료일 설정, 파싱해서 써야하는 점이 불편.저장소 적음
로컬 스토리지에 저장:
-쿠키보다 많은 정보 저장 가능(쿠키 4kb, 로컬 스토리지 5MB)
-모든 http통신에 딸려가지 않는다. 토큰정보 뿐만 아니라 다른 정보들을 같이 저장했을 때 용이함.
세션스토리지
-어떤 정보를 유지하지 않아도 될 때(자동로그인이 없는 사이트)
pop(): 배열의 마지막 요소를 가져오는 것
shift(): 배열의 제일 첫번째 요소를 가져오는 것