prototype
·
JavaScript
prototype" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스객체간의 상속을 구현하는 개념function MakeFunc(name) { this.name = name; // this는 생성될 객체를 가르킨다.}MakeFunc.prototype.greeting = function () { console.log(`hello ${this.name}`) };const newFunc = new MakeFunc("Kim");위 코드를 전제로 프로토타입을 한번 알아보자.생성자 함수 MakeFunc을 만든다. (화살표 함수는 this 바인딩이 없다.). 생성자 함수엔 prototype 이라는 객체가 기본적으로 내장되어 있다. 이 prototype 객체에 greeting 메서드를 추가했다..
IntersectionObserver
·
JavaScript
IntersectionObserver">IntersectionObserver요소와 뷰포트의 관계를 감지하는 객체를 생성  window.onload = () => { const io = new IntersectionObserver((entries) => {}, { root: null, rootMargin: "0px 0px 0px 0px", threshold: 0, });};1. IntersectionObserver 생성자 함수의 첫번째 매개변수는 감지할 요소들이 들어있는 배열을..
FileReader
·
JavaScript
속성1. error : 파일 읽기 작업 중 오류가 발생했을 때 해당 오류를 일으킨 이벤트 객체2. result : 파일의 컨텐츠, 읽기 작업이 완료되고 읽기 작업의 초기화에 사용한 방식으로 결정된 데이터의 포맷3. readyState : FileReader의 상태를 나타내는 숫자이벤트 핸들러1. onabort : 파일 읽기 작업이 중단되었을 때 발생2. onerror : 파일 읽기 작업 중에 에러가 생길 때 발생3. onload : 파일 읽기 작업이 성공적으로 완료되었을 때 발생4. onloadstart : 파일 읽기 작업이 시작 될 때 발생5. onloadend : 파일 읽기 작업이 끝났을 때 발생 (읽기의 성공, 실패 여부는 상관x)6. onprogress : Blob 컨텐트를 읽는 동안 호출 메서드..
Promise
·
JavaScript
Promise" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스비동기 작업을 처리할 때 사용되는 객체 Promise 객체의 생성과 구조" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스window.onload = () => { const promise = new Promise((resolve, reject) => { const count = 1 + 1; count === 2 ? resolve(count) : reject("Error"); }); const errPromise = new Promise((resolve, reject) => { const count = 1 + 1; count === 3 ? resolve(count..
async/await
·
JavaScript
async/await" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스Promise 객체를 다루는 비동기 문법. async" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스함수에 붙어 return값을 PromiseResult 로 갖는 Promise객체를 반환window.onload = () => { const result = async() => { return "hello world!"; }}1. async 함수에서 Promise객체를 return하면 async 함수는 중첩된 Promise객체를 반환하지 않고, return하려는 Promise객체를 그대로 반환한다. await" data-ke-type="html">HTML 삽입미리보기할 수 없는 ..
axios
·
JavaScript
axios" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스Promise 기반의 HTTP 클라이언트 라이브러리 GET 요청" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스import axios from "axios";const Home = () => { const response = axios.get("https://learn.codeit.kr/api/members");}export default Home;1. 첫번째 인자는 앤드포인트, 선택적으로 두번째 인자에 config객체를 넣을 수 있다2. axios.get()이 반환하는 promise 객체에 있는 PromiseResult 객체의 data 프로퍼티 값은 fetch의 json()이 반환하는 Pro..
fetch
·
JavaScript
fetch" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스네트워크 요청을 보내거나, 응답을 처리하는 웹 API  GET 요청" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스window.onload = () => { const response = fetch("https://learn.codeit.kr/api/members");}window.onload = () => { fetch("https://learn.codeit.kr/api/members") .then((promiseResult) => { console.log(promiseResult.json()); });}1. 첫번째 인자로 앤드포인트를 넣는다.2. 선택적으로 두번째 인자에 method..
property attribute
·
JavaScript
앞으로 살펴볼 프로퍼티 어트리뷰트를 이해하기 위해 먼저 내부 슬롯과 내부 메서드의 개념에 대해 알아보자. 내부슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드다. 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값인 내부 슬롯을 자동 정의한다. ○ [[value]] : 값. ○ [[writable]] : 값의 갱신 가능 여부. ○ [[enumerable]] : 열거 가능 여부. ○ [[configurable]] : 정의 가능 여부. 내부 슬롯에는 직접 접근할 수 없지만, Object..
Event
·
JavaScript
이벤트 드리븐 프로그래밍브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 에를 들어, 클릭 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킨다. 만약 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러 라고 하고, 이벤트가 발생했을 때 브라우저 에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록 이라 한다. 예를들어, 사용자가 버튼을 클릭했을 때 함수를 호출하여 어떤 처리를 하고 싶다고 가정해보자. 이때 문제는 "언제 함수를 호출해야 하는가"다. 사용자가 ..
Map
·
JavaScript
Map 객체는 키와 값의 쌍으로 이루어진 이터러블 컬렉션이다. Map 객체는 객체와 유사 하지만 다음과 같은 차이가 있다. 키로 사용할 수 있는 값 : 객체(문자열 또는 심볼 값), Map 객체(객체를 포함한 모든 값) 이터러블 : 객체(X), Map 객체(O) 요소 개수 확인 : 객체(Object.keys(obj).legnth), Map 객체(map.size) 1. Map 객체 생성 ○ Map 객체는 Map 생성자 함수로 생선한다. Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성된다. ○ Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 한다. ○ Map 생성자 함수의 인수로 전달한 ..
Set
·
JavaScript
Set 객체는 중복되지 않는 유일한 값들의 집합인 이터러블객체 이다 Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 동일한 값을 중복하여 포함할 수 있다 : 배열(O), Set객체(X) 요소 순서에 의미가 있다. : 배열(O), Set객체(X) 인덱스로 요소에 접근할 수 잇다. : 배열(O), Set객체(X) 1. Set 객체의 생성 set 객체는 Set 생성자 함수로 생선한다. Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 저장되지 않는다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const setOne = new Set([1,2,3,3]); console.log(setOne); //{1,2..
배열 메서드
·
JavaScript
배열 메서드는 결과물을 반환하는 패턴이 두 가지 이다. 원본배열을 직접 변경하는 메서드와, 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다. 1. Array.isArray Array.isArray는 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다. 2. Array.prototype.indexOf Array.prototype.index 는 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다. - 원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러 개 있다면, 첫 번째로 검색된 요소의 인덱스를 반환한다.- 원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환한다. const arr=[1,2,2,3]; arr.indexOf(2); //..
Hyunsoo_Kim
상단으로

티스토리툴바