index.html blue yellow pink 남성 라지 main.js function loadItems() { // fetch api // fetch('url') -> 네트워크 주소를 적으면 받아옴 return fetch('data/data.json') // 성공하면 받아온 데이터를 제이슨 변환 .then(response => response.json()) .then(data => data.items); } function displayItems(items){ // html 문서의 ul을 선택 const container = document.querySelector('.items'); container.innerHTML = items.map(item => createHTMLString(item))...

자바스크립트 비동기 처리 동기적처리(Synchronous) 비동기적처리(Asynchronous) 1. 콜백함수 2. Promise 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트입니다. 기능을 수행하고 나서 정상적으로 기능이 수행되면 성공의 메세지와 처리된 결과값을 전달 수행하다가 예상치 못한 결과가 생기면 에러를 전달해줍니다. 프로미스 상태 state: Promise가 수행중이면 pending 수행이 종료되면 fullfilled 수행중 오류가 발생 rejected 프로듀서와 컨슈머 프로듀서: Promise 제공 컨슈머: Promise 사용 synchronous.html callback.html myScript.js function printHi() { console.log..

JSON(JavaScript Object Notaion) 서버와 데이터를 전송할 때 사용되는 데이터포맷 자바스크립트의 객체를 보고 만든 데이터 포맷 텍스트를 기반으로 하여 가벼움 데이터를 직렬화하여 전송할 때 쓰임 프로그램 언어나 플랫폼에 상관없이 쓸 수 있음 XML -> JSON 자바스크립트 객체 -> 직렬화-> JSON JSON -> 자바스크립트 객체 1. object to JSON JSON.stringify(obj) 2. JSON to object JSON.parse(json)

클래스 - 객체를 생성하는 템플릿 class Person { name; age; speak(); } class Person { constructor(name, age) { this.name = name; this.age = age; } speak() { console.log(`${this.name}: 안녕`); } } class.html

let const 기본타입 number, string, boolean, null, undefined Symbol 참조형타입 object 배열 - 순서가 있는 컬랙션 let arr = []; let arr = new Araay(); let arr = [1, 2, 3, 4, 5, 6, 7]; arr[0] arr[1] 객체 - key와 value가 있는 컬랙션 let obj = { key: value, key2: value2, key3: value3, } let obj2 = { name: "bella"; age: 22, } obj['name'] obj.name obj['isjob'] = true; 객체 생성자방식 let user = new Object(); 객체 리터럴방식 let user = {}; array..

방법 3가지 ! 1. window.onload = function() { 실행문 } 2. 3.window.addEventListener("load", function() { 실행문 }) * 인터넷 속도 넘 빨라서 window.onload = hideLoading; 대신 이렇게도 씀 function hideLoading() { let spinner = document.querySelector('#spinnerwrap'); spinner.style.display = "none"; } setTimeout(() => { // alert("로딩끝"); hideLoading(); }, 2000); html 블럭 script 블럭 css 블럭 #spinnerwrap { position: absolute; top: 0..

http://hyodev.dothome.co.kr/sarar/ Document hyodev.dothome.co.kr sarar / index.html COLLECTION COLLECTION menu item menu item menu item menu item STORE LOCATION STORE LOCATION menu item menu item menu item menu item ADVERTISEMENT ADVERTISEMENT menu item menu item menu item menu item ONLINE STORE ONLINE STORE menu item menu item menu item menu item CONTACT CONTACT menu item menu item menu item me..

[[prototype]] 자바스크립트 객체는 [[prototype]]이라는 숨김 프로퍼티를 갖습니다. 이 숨김 프로퍼티가 다른 객체에 대한 참조가 되는데 다른 객체를 참조하는 경우 참조 타입을 프로토타입이라 부릅니다. prototype.html

구조 분해 할당 (React에서 많이 쓰임) 배열과 객체의 값을 분해해서 변수에 할당해줌 배열의 값을 복사한 후 변수에 할당해주므로 배열이 수정 또는 파괴되지 않습니다. let fruits = ["사과", "수박", "오렌지", "딸기"] let fruit1 = fruits[0]; let fruit2 = fruits[1]; let fruit3 = fruits[2]; let fruit4 = fruits[3]; 1) 기본구문 let [변수명, 변수명, ...] = 배열변수 ex> let [fruit1, fuit2, fruit3, fruit4] = fruits; 2) 쉼표를 사용하여 요소 무시하기 let frutis = ["사과", "수박", "오렌지", "딸기"] let [fruit1, , fruit2] =..

15slide_left2.html (인디게이터) 이전 다음 15slide2.html (왼쪽으로 이동하는 무한 슬라이더) 이전 다음