one Book a Day

CSS 변수 제어하기. 어떤 속성값을 제어할 것이냐? name에 부여한 style의 spacing과 blur속성을 제어한다. this 키워드 동작을 나타내는 메서드는 객체의 state 즉 property를 참조하고 변경할 수 있어야한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.(객체 내부의 메서드가 객체를 참조할 수 있어야 제어가 가능) this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수. this를 통해 자신이 속한 객체 똔느 생성할 인스턴스의 프로퍼티나 메서드를 참조. this는 함수가 실행됨과 동시에 함수내부에 선언됨 객체 내 메서드에서만 의미를 가지지 일반 함수에서는 undefined..

JS 30개 프로젝트 만들기. Wes Bos님 강의 2.Analog Clock 제어해야 될 요소들 (시침, 분침, 초침) transform-origin 은 0퍼센트일경우 왼쪽 끝이 축, 100퍼센트는 오른쪽 끝이 축.(변환원점) 하나 더주면 상하 축까지 조정. 축을 기준으로 rotate 움직임은 0.05초 동안 유지 transition-timing-function transition의 진행속도를 조절한다. east. linear, ease-in, ease-out, initial, inherit ... 각 시계침들을 요소로 1초마다 set Date를 불러 업데이트.(setInterval) now 날짜 객체의 시, 분.. 위 코드는 오타. hour은 getHour로 받아옴. 원본은 수정 setInterval..

자바 스크립트 30개 미니 프로젝트 만들기 - 1 Drum Kit JS 30개 프로젝트 만들기. Wes Bos님 강의 Drum Kit data key값으로 오디오를 불러오는 것이 핵심. key와 audio에 대해 각 event 속성을 불러 control event를 트리거로 classList를 통해 class를 추가, 제거시키므로써 입력에 대한 제어를 가능케 함. const div = document.createElement('div'); div.className = 'foo'; // our starting state: console.log(div.outerHTML); // use the classList API to remove and add classes div.classList.remove("foo..

JS의 비동기 처리방식 동기 / 비동기 처리 동기(Syncronous)는 먼저 시작한 작업이 끝날 때 까지 다른 작업을 할 수 없다. 비동기(Asyncronous)는 동시에 여러가지 작업을 처리하며 기다리는 과정에서 다른 함수 호출이 가능하다. 비동기 처리의 예 다음과 같은 작업들은 주로 비동기적으로 처리하게 된다. Ajax Web API요청 : 화면을 렌더링해야하는데 서버쪽에서 응답을 해주기까지 마냥 대기할 수 없다. 비동기적으로 처리한다. Ajax function getData() { let data; $.ajax({ type: 'post', url: 'https://devlibrary00108.tistory.com/', data: { seungjoo:zzang, }, s..

JS는 싱글 쓰레드 자바스크립트의 메인 쓰레드인 이벤트 루프는 싱글 쓰레드이다. 하지만 이벤트 루프만 독립적으로 실행되지 않고 웹 브라우저나 NodeJS같은 멀티 쓰레드 환경에서 실행된다. 즉 JS는 싱글쓰레드지만 JS런타임은 싱글 쓰레드가 아니다. 싱글쓰레드로 병렬처리를 하는 방법. 기존 동기식 요청은 코드를 한줄 한줄 차례로 실행한다. 하지만 이렇게 되면 앞의 작업시간이 길수록 병목이 생기고 시간과 자원이 낭비된다. 요청이 완료될때까지 기다리지 않고 다른작업을 비동기 호출로 수행한다. JS의 비동기 런타임. Call Stack: 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리(메인 스택) Web API: 웹 브라우저에서 제공하는 API로 AJAX나 Timeout등의 비동기 작업을 실..

https://dongmin-jang.medium.com/vuejs-%EB%8F%99%EC%A0%81-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-4cf1a4f7e561