rhanziy

HTML 삽입 미리보기할 수 없는 소스 1. 2022년 크리스마스 - 현재날짜를 until변수에 담는다. 2. 담아진 변수값은 밀리초 단위이므로 날짜 형식에 맞게 변환해준다. until/(1000*60*60*24) = 1일로 나누면 총 day를 구할 수 있다. until/(1000*60*60)%24) = 1시간으로 나누면 총 hours를 구할 수 있는데 이미 day를 구했기 때문에 day를 나눈 나머지 값(%)이 남은 hours가 된다. 3. 시, 분, 초가 1의 자리면 padStart를 이용해 0을 추가해준다. (ex. 07시 53분 04초)

자바스크립트에서는 document객체를 이용하여 html의 구조를 선택해서 조작하고, 추가할 수 있다. document는 DOM 트리의 최상위 객체이다. 브라우저는 HTML 문서를 로드하기 전에 document 객체를 먼저 만든다. 그리고 document 객체를 뿌리로 하는 DOM 트리를 만든다. 문서 객체 모델(DOM)이란? 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. > html의 element로 생각하면 된당. document 객체의 역할은 아래와 같다. - 프로퍼티로 HTML 문서의 전반적 속성을 나타냄 - 메소드로 ..

array.forEach는 받아온 array를 for 반복문 없이 item(element) 하나씩 function에 넣을 수 있는 함수 arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) 다음 세 가지 매개변수를 받는다. element - 처리할 현재 요소. index(Optional) - 처리할 현재 요소의 인덱스. array(Optional) - filter를 호출한 배열. const arr = ["pizza", "hamburger", "chicken"]; arr.forEach((food)=> console.log(food)); 배열안의 element 하나하나를 food라는 이름으로 정의하고 콘솔을 찍은 결과값 pizza hamburge..

object -> string 으로 변환하는 방법은 JSON.stringify( object name ) 을 해주면 된다. js에서 localStorage.setItem()을 할 때, localStorage는 js의 오브젝트를 저장할 수 없다. object -> string 바꿔 localstorage에 저장해야한다. localStorage.setItem(localStorage KEY, JSON.stringify(오브젝트[])); string -> object 로 변환하는 방법은 JSON.parse( localStorage key ) 를 해주면 된다. const savedToDos = localStorage.getItem(localStroage KEY); if(savedToDos){ const parse..

setInterval(sayHello, 5000); sayHello( )를 5초마다 실행 setTimeout(sayHello, 5000); sayHello( )를 5초 후에 실행. 1회성 padStart( ); (targetLength, padString) 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환. 채워넣기는 대상 문자열의 시작(좌측)부터 적용 >> string타입. 데이터 타입변환 필요하다. ex) String(date.getSeconds()).padStart(2, "0"); date객체의 초를 받아와서 10초 이하, 즉 1, 2, 3초일 경우 앞에 0을 채워넣는다. padEnd( ); 는대상 문자열의 시작(좌측)부터 적용 appendChild( )는 구조..

class Counter { constructor(runEveryFive){ this.counter = 0; this.callback = runEveryFive; } increase(){ this.counter++; console.log(this.counter); if(this.counter % 5 === 0){ this.callback && this.callback(this.counter); // this.callback이 있다면 함수를 실행 } } } function printSomething(num){ console.log(`yo! ${num}`); } function alertSomething(num){ alert(`yo! ${num}`); } const coolCounter = new Count..

async 키워드를 사용하면 반환받는 값은 Promise가 된다. fulfil Promise가 반환되기 때문에 반환된 값을 사용하기 위해선 .then() 블럭을 사용해야 한다. Async/await 는 우리의 코드를 마치 동기식 코드처럼 보이게 한다. 그리고 어떤 면에서는 정말로 동기적으로 행동합니다. 함수 블럭에 여러 개의 await 키워드를 사용하면 Promise가 fulfilled되기 전 까지 다음 await 을 차단해버린다!! >> Promise.all API 사용! 전달인자로 Promise를 받는데, [배열]로 받는다 // async & await // clear style of using promise // 1.async // function fetchUser(){ // return new P..

Promise는 세 개중 하나의 상태를 갖는다. pending(대기): Promise가 생성되어 작업을 진행 중인 상태 fulfilled(이행): Promise가 작업을 성공적으로 완료한 상태 rejected(거절됨): Promise가 작업을 완료하였지만 실패한 상태 완료 상태인 fulfilled와 rejected를 합쳐 settled라고도 한다고 함. 이러한 상태 정보는 [[PromiseState]]에 명시된다. // 비동기를 간편하게 처리할 수 있도록 도와주는 object // promise is a JavaScript object for asynchronous operation. // state: pending -> fulfilled or rejected // Producer vs Consumer ..