'Language/JavaScript' 카테고리의 글 목록

new Date()

2026.03.10·

Language/JavaScript

new Date()현재 날짜와 시간에 대한 객체를 생성하는 생성자 함수const today = new Date();console.log(today); // Tue Mar 10 2026 19:55:00 GMT+0900 (한국 표준시)new Date()의 인자new Date();new Date("2026-03-10"); // 날짜 문자열new Date("2026-03-10T03:34:56Z"); // ISO 문자열○ 인자에 따라 Tue Mar 10 2026 19:55:00 GMT+0900 (한국 표준시) 같은 형식에 값만 다른 Date 객체를 반환한다.new Date()로 생성한 Date 객체의 비교Date 객체는 비교연산이 가능하다.const todayOne = new Date();console.log(t..

FormData

2026.02.04·

Language/JavaScript

FormDatamultipart/form-data를 요청을 만들기 위한 특수 데이터 구조FormData 특징○ 일반 텍스트 데이터 뿐만 아니라, 파일도 전송할 수 있다.○ 서버로 전송될 때 자동으로 multipart/form-data 형식으로 인코딩된다.○ append()로 추가한 값을 console.log로 확인할 수 없다.사용법// 이미지 파일 서버 전송const formData = new FormData();formData.append("name", "/* 이미지 이름 */");formData.append("file", /* 파일 */);fetch( "POST", { body: formData // Content-Type 헤더는 multipart/form-data으로 자동 설정 })..

Prototype

2024.08.13·

Language/JavaScript

Prototype객체간의 상속을 구현하는 개념프로토타입 체이닝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 메서드를 추가했다. 그런데 prototype 객체에 내가 추가하지 않은 co..

IntersectionObserver

2024.04.18·

Language/JavaScript

IntersectionObserver요소와 뷰포트의 관계를 비동기적으로 감지하는 방법객체 생성 window.onload = () => { const io = new IntersectionObserver((entries) => {}, { root: null, rootMargin: "0px 0px 0px 0px", threshold: 0, });};○IntersectionObserver 생성자 함수의 첫번째 매개변수는 감지할 요소들이 들어있는 배열을 매개변수로 받는 콜백함수이고 ..

FileReader

2024.03.23·

Language/JavaScript

FileReader사용자 컴퓨터에 저장된 파일을 비동기적으로 읽을 수 있게 해주는 Web APIFileReader 객체 생성const reader = new FileReader();주요 프로퍼티○ error : 파일 읽기 작업 중 오류가 발생했을 때 해당 오류를 일으킨 이벤트 객체○ result : 파일의 컨텐츠, 읽기 작업이 완료되고 읽기 작업의 초기화에 사용한 방식으로 결정된 데이터의 포맷○ readyState : FileReader의 상태를 나타내는 숫자이벤트 핸들러○ onabort : 파일 읽기 작업이 중단되었을 때 발생○ onerror : 파일 읽기 작업 중에 에러가 생길 때 발생○ onload : 파일 읽기 작업이 성공적으로 완료되었을 때 발생○ onloadstart : 파일 읽기 작업이 시작..

Promise

2024.02.14·

Language/JavaScript

Promise비동기 작업의 최종 완료 혹은 실패를 나타내는 객체Promise 객체 생성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) : reject("Error"); });};○ Promise 객체는 프로토타입, 현재 상태값을 가진 PromiseState, 작업 결과값을 가진..

Async/Await

2024.02.09·

Language/JavaScript

Async/AwaitPromise 객체를 다루는 비동기 문법Async함수에 붙어 return값을 PromiseResult 로 갖는 Promise객체를 반환window.onload = () => { const result = async() => { return "hello world!"; }}○ async 함수에서 Promise객체를 return하면 async 함수는 중첩된 Promise객체를 반환하지 않고, return하려는 Promise객체를 그대로 반환한다.Awaitasync 함수 내부에서 promise를 반환하는 함수 앞에 붙어 작동하는 비동기 문법window.onload = () => { const func = async() => { const response = await fet..

Fetch

2023.10.07·

Language/JavaScript

Fetch네트워크 요청을 보내거나, 응답을 처리하는 웹 APIGET 요청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()); });}○ 첫번째 인자로 앤드포인트를 넣는다.○ 선택적으로 두번째 인자에 method와 headers 프로퍼티를 가진 객체를 넣을 수 있다.○ fetch는 promise 객체를 반환하며, [[PromiseResult]]에 json형식으로 된 ..

property attribute

2023.10.02·

Language/JavaScript

앞으로 살펴볼 프로퍼티 어트리뷰트를 이해하기 위해 먼저 내부 슬롯과 내부 메서드의 개념에 대해 알아보자. 내부슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드다. 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값인 내부 슬롯을 자동 정의한다. ○ [[value]] : 값. ○ [[writable]] : 값의 갱신 가능 여부. ○ [[enumerable]] : 열거 가능 여부. ○ [[configurable]] : 정의 가능 여부. 내부 슬롯에는 직접 접근할 수 없지만, Object..

Event

2023.09.29·

Language/JavaScript

이벤트 드리븐 프로그래밍브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 에를 들어, 클릭 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킨다. 만약 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러 라고 하고, 이벤트가 발생했을 때 브라우저 에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록 이라 한다. 예를들어, 사용자가 버튼을 클릭했을 때 함수를 호출하여 어떤 처리를 하고 싶다고 가정해보자. 이때 문제는 "언제 함수를 호출해야 하는가"다. 사용자가 ..

Map

2023.09.29·

Language/JavaScript

Map 객체는 키와 값의 쌍으로 이루어진 이터러블 컬렉션이다. Map 객체는 객체와 유사 하지만 다음과 같은 차이가 있다. 키로 사용할 수 있는 값 : 객체(문자열 또는 심볼 값), Map 객체(객체를 포함한 모든 값) 이터러블 : 객체(X), Map 객체(O) 요소 개수 확인 : 객체(Object.keys(obj).legnth), Map 객체(map.size) 1. Map 객체 생성 ○ Map 객체는 Map 생성자 함수로 생선한다. Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성된다. ○ Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 한다. ○ Map 생성자 함수의 인수로 전달한 ..

Set

2023.09.28·

Language/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..

티스토리툴바