JS.코어
1.코어 자바스크립트 (객체:기본)
객체 여덟가지 자료형 중에 7개는 오직 하나의 데이터만 담을 수 있어 '원시형'이라 부르는데 객체형은 원시형과 달리 여러 데이터를 같이 담을 수 있음 {..} 중괄호를 이용해서 만들 수 있음 key : value 형태로 구성된 프로퍼티를 넣을 수 있는데 ke
2.코어 자바스크립트 (배열)
순서가 있는 컬렉션을 저장할 때 쓰는 자료구조 배열각 배열 요소에는 0부터 시작하는 숫자가 매겨져있음배열 내에 특정 요소를 얻고 싶다면 대괄호 안에 순서를 나타내는 숫자인 인덱스를 넣어주면됨같은 방법 으로 수정할 수 있음새로운 요소를 배열에 추가하는 것도 가능lengt
3.코어 자바스크립트 (배열과 메서드) #
배열과 메서드 이미 push, pop, shift, unshift를 배움 1.요소 추가, 제거 메서드 1)splice 배열에서 요소를 하나만 지우고 싶다면 연산자 delete 사용해 볼 수 있을 것 요소는 지웠지만 배열의 요소는 여전히 3개임을 확인할 수 있다. 배
4.코어 자바스크립트 (참조에 의한 객체 복사)
객체와 원시 타입의 근본적 차이 중 하나는 객체는 '참조에 의해' 저장되고 복사됨객체의 동작방식은 변수에 객체가 그대로 저장되는게 아니라, 객체가 저장되어있는 '메모리 주소'인 객체에 대한 '참조 값'이 저장객체 비교 시 동등 연산자 ==와 일치 연산자 ===는 동일하
5.코어 자바스크립트 (가비지 컬렉션)
가비지 컬렉션 garbage collection 1.가비지 컬렉션 기준 JS는 reachability 도달가능성 이라는 개념을 사용해 메모리 관리를 수행 reachability는 어떻게든 접근하거나 사용할수 있는 값을 의미 1) 아래 소개해 드릴 값, 태생부터 도
6.코어 자바스크립트 (메서드와 this) #
객체는 사용자(user), 주문(order) 등과 가이 실제 존재하는 개체를 표현하고자 할 때 생성자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 '행동' 할 수 있는 능력 부여객체 프로퍼티에 할당된 함수를 '메서드'라고 부름!function 을 생략해도 메서
7.JS. 코어 ('new'연산자와 생성자 함수)
'new'연산자와 생성자 함수를 사용하면 유사한 객체 여러개를 쉽게 만들 수 있음1)함수 이름의 첫 글자는 대문자로 시작2) 반드시 "new"연산자를 붙여 실행new User(...)를 써서 함수를 실행, 아래와 같은 알고리즘 동작빈 객체를 만들어 this에 할당함수
8.JS.코어 (reduce)
arr.reduce((accumulator, currentValue, index, array)(, initialValue)accumulator : 누산자라고 불리는 것, callback값을 의미하는데, function에서 값을 처리리하고 리턴 값이 여기 들어온다,cur
9.JS.코어 (map & set)
키가 있는 데이터를 저장한다는 점, 객체와 유사다만 키에 다양한 자료형을 허용한다는 점new Map() : 맵을 만듬map.set(key, value) : keyf를 이용해 value에 저장map.get(key) : key에 해당하는 값을 반환, key가 존재하지않으면
10.JS.코어 변수의 유효범위와 클로저
함수가 생성된 이후에 외부 변수가 변경되면 어떤 일이 발생할까? 함수는 새로운 값을 가져올껀가 아니면 생성 시점 이전의 값을 가져올까?{} 인에서 선언한 변수는 블록 안에서만 사용할 수 있음{} 밖에서 message를 출력하면 message가 선언되지 않았다고 반응함그
11.나머지 매개변수와 전개 문법
...는 나머지 매개변수들을 한데 모아 배열에 집어넣어라 를 의미매개변수는 변수로, 그 이외에 매개변수들은 배열로 모을 수 있음특별한 유사 배열 객체인덱스를 사용해 모든 인수에 접근할 수 있음이터러블(반복가능한) 객체임, 하지만 배열은 아님 그래서 배열 메서드는 사용불
12.JS.코어 구조 분해 할당
객체나 배열을 변수로 분해할 수 있게 해주는 문법할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 크더라도 에러가 발생하지않음할당할 값이 없으면 undefined로 취급=을 이용하면 할당할 값이 없을 때 기본으로 할당해 줄 값인 '기본값'을 설정할 수 있음
13.브라우저 환경과 다양한 명세서
\-호스트 환경window'루트'객체자바스크립트 코드의 전역 객체'브라우저 창'을 대변, 이를 제어할 수 있는 메서드를 제공웹페이지 내의 모든 콘텐츠를 객체로 나타내줌documnet객체는 페이지의 기본 출발점 역할을 함문서 이외에 모든 것을 제어하기 위해 브라우저가 제
14.DOM 탐색하기
트리 상단의 노드는 document의 프로퍼티를 사용해 접근 가능<html> = document.documentElement<body> = document.body<head> = document.head자식 노드 : 바로 아래의 자식 요소를 나타냄, &
15.브라우저 이벤트 소개
브라우저 이벤트 소개 1.마우스 이벤트 click : 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때(터치스크린이 있는 장치에선 탭 했을 때) 발생합니다. contextmenu : 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생합니다. mouseover와 mouseout
16.프로토타입
자바스크립트에서 객체는 \[\[Prototype]]이라는 숨김 프로퍼티를 가짐, 이 숨김 프로퍼티 값은 null이거나 다른 객체에 대한 참조, 참조하는 경우 참조 대상을 프로토타입이라고 부름클로저에 대해 공부할 떄 함수는 자신의 환경을 기억하고 \[Environment
17.네이티브 프로토타입
객체를 만들 때, \[prototype]은 Object.prototype을 참조모든 내장 프로토타입 꼭대기에는 Object.prototpye, 모든 것은 객체를 상속받음네이티브 프로토타입 변경을 허용하는 경우는 딱 하나, 폴리필을 만들 때=> 프로토타입은 전역으로 영향
18.클래스와 기본문법
new User('John')을 하면1.새로운 객체가 생성되고2\. 넘겨받은 인수와 함께 constructor가 실행되고 'John'이 this.name에 할당됨자바스크립트에서 클래스는 함수의 한 종류입니다.class User 가 하는 일은1\. User라는 이름을 가
19.클래스 상속
상속클래스 Rabbit을 이용해 만든 객체는 Animal에 정의된 메서드에도 접근할 수 있습니다.class Rabbit은 class Animal에 있는 메서드를 그대로 상속받습니다.부모 메서드 전체를 교체하지않고 , 부모 메서드 일부만 변경하고 싶을 때나 확장하고 싶을
20.JSON 과 메서드
JSON과 메서드 다른 곳에 데이터를 보내고자 할때, 객체는 문자열로 전환 해야함 그런데 개발하는 과정에서 프로퍼티가 추가, 수정 , 삭제되는 일이 있는데 할 떄마다 문자열로 전환해줘야하는데 이런 소요를 줄이기 위해서 JSON 사용 1. JSON.stringify
21.setTimeout과 setInterval 호출 스케줄링
setTimeout : 일정시간이 지난 후에 함수를 실행하는 방법setInterval : 일정시간 간격을 두고 함수를 실행하는 방법setTimeout(func|code, delay, arg1, arg2, ...)func|code : 실행하고자 하는 코드, 함수가 들어감
22.콜백
함수 loadScript는 <script src = "...">을 동적으로 만들고 이를 문서에 추가함브라우저는 자동으로 태그에 있는 스크립트를 불러오고, 로딩이 완료되면 스크립트를 실행함이 때, 스크립트는 '비동기적'으로 실행됨, 로딩은 당장 시작되어도 실행은 함
23.Promise(프라미스)
new Promise에 전달되는 함수를 excutor이라고 부름excutor은 new Promise가 만들어질 때 자동으로 실행resolve와 reject는 자바스크립트에서 자체 제공하는 콜백 \- resolve(value) : 일이 성공적으로 끝난 경우 그 결과를
24.프라미스 체이닝
프라미스 체이닝 순차적으로 처리해야 하는 비동기 작업이 여러 개 있다고 가정할 때 프라미스 체이닝으로 해결가능 1초 후 최초 프라미스가 이행 이후 첫 번째 .then 핸들러가 호출 2에서 반환한 값은 다음 .then 핸들러에 전달됨 위 과정이 이어짐 위 과정이 가능
25.async와 await
async function f() { return 1}function 앞에 async를 붙이면 해당 함수는 프라미스를 항상 반환함\\let value = await promise;자바스크립트는 await를 만나면 프라미스가 처리될 때까지 기다림, 결과는 그 이후에 반환
26.프라미스와 에러 핸들링
프라미스와 에러 핸들링
27.프라미스 API
Promise 클래스에는 5가지 정적 메서드가 있음promise.all 은 복수의 url에 동시에 요청을 보내고, 다운로드가 모두 완료된 후에 콘텐츠를 처리할 때 사용할 수 있음배열 안 프라미스가 모두 처리되면 새로운 프라미스가 이행, 배열 안 프라미스의 결과값을 담은
28.마이크로태스크(microtask)
프라미스 핸들러 .then/ catch / finally 는 항상 비동기적으로 실행이됨마이크로테스크 큐는 먼저 들어온 작업을 먼저 실행(FIFO)실행할 것이 아무것도 남아있지 않을 때만 마이크로테스크 큐에 있는 작업이 실행되기 시작어떤 프라미스가 준비되었을 때, 이 프
29.fetch
fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환url : 접근하고자 하는 URLoptions : 선택 매개변수, method나 header등을 지정할 수 있음 options에 아무것도 넘기지않으면 요청은 GET메서드로 진행, url로 콘텐츠