긍정적 자기부정

신기방기

setInterval 일정 시간의 간격을 가지고 함수를 반복적으로 실행시키는 것이다. arguments: 실행할 callback 함수, 반복적으로 함수를 실행시키기 위한 시간 간격(밀리초) return value: 임의의 타이머 id setInterval(function(){ console.log('1초'); },1000); // 1초라는 단어를 1초마다 console창에 보여준다! clearInterval(timerId) 반복 실행중인 타이머를 종료한다. arguments: 타이머 ID return value: 없음 ar timer = setInterval(function(){ console.log('1초'); },1000); clearInterval(timer); 참고 : setTimeout에 대응하..

Callback 함수에 대한 복습 callback 함수란 다른 함수의 전달인자(argument)로 넘겨주는 함수다. 이때, parameter를 넘겨받는 함수는 callback 함수를 필요에 따라 즉시 실행하거나, 나중에 실행할 수 있다. 즉시 실행하는 것은 synchronously -> 동기 나중에 실행하는 것은 asynchronoously ->비동기 blocking vs non-blocking blocking은 진행되던 일을 멈추고 다른 것을 시행해야하며, non-blocking은 진행되던 일을 계속면서 실행할 수 있다. blocking은 synchronous에 대응되고, non-blocking은 asynchronous에 대응된다. 종합해보자면 콜백을 사용하여 함수들이 비동기적으로 실행되도록 만들면, ..

function returnTimeBefore(tweet){ let endtime = Date.now(); let starttime = tweet.created_at; let timebefore = endtime-starttime; //timebefore는 miliseconds 단위의 시간 차다. //이것을 연,월,일,시간,분 단위로 쪼개는 것을 하면 됨. let toseconds = timebefore/1000 let appendtotimebefore = '' let oneyear = 3.154e+7; let onemonth = 2.628e+6; let oneweek = 604800; let oneday = 86400; let onehour = 3600; let onemin = 60; if(toseco..

parent element에 position: relative; childe element에 position : absolute; top: 50%; parent element에 justify-content : center; align-items; center;

여러 시행착오를 통해 DOM으로 작동하는 웹앱을 만드는 방법론에 대해서 어느 정도 알게 된 것 같다. 만드는 순서 1) 다루고 싶은 부분을 정의 2) 이벤트 핸들러 안에 사용되어 여러가지 조건에 부합하는지 확인할 함수를 정의 3) 만든 함수를 이용하여 이벤트 핸들러에 조건을 부여함. 4) 이벤트 핸들러와 엘리먼트를 연결함 함수의 재사용 이벤트 핸들러 안에서 어떤 조건들을 지정하는 것보다는, 이벤트 핸들러 외부에서 조건을 부여하는 함수를 만드는 것이 재사용 등에 훨씬 좋은 것을 알 수 있었다. addEventListner addEventListner는 인자로 들어간 함수에 어떠한 인자를 부여하는 것으로 보인다. 생활코딩에서 관련 부분을 잠깐 찾아보니 addEventListner는 인자로 전달한 event ..

아래는 자바스크립트 코드. console.log('welcome JavaScript') let msgElement = document.querySelector('#container'); console.log(msgElement); 개발자 모드에서 콘솔창을 보면 아래 두 결과는 다르다. head태그 안에 넣은 것은 #container를 찾지 못하고 null을 반환함. 그 이유는 브라우저가 html 코드를 위에서부터 차례대로 해석하다가 script 태그를 중간에 javascript 파일을 불러와서 실행하기 때문이다. 따라서 모든 html 태그를 읽고 script를 실행할 수 있도록 body 태그 끝나기 직전에 넣자! Tweet List hello world code states Tweet List hello..

CRUD Ceate createElement: 요소를 생성한다. document.createElement('div') createDocumentFragment: 아직 잘 모르겠다! 우선 이런 것이 있다는 것만 알고 넘어간다! untitledtblog.tistory.com/44 DocumentFragment를 이용한 JavaScript 성능 최적화 자바스크립트의 DOM 객체는 연산을 수행할 때마다 DOM tree라는 자료구조에 접근해야 하기 때문에 자바스크립트의 성능을 저하시키는 주된 요인 중 하나이다. 따라서, 자바스크립트의 성능을 최 untitledtblog.tistory.com ko.javascript.info/modifying-document#document-fragment 문서 수정하기 ko.ja..

DOM vs. HTML HTML 문서가 웹 브라우저에서 기능하기까지의 프로세스가 있다. (Critical Rendering Path라고 함) 이때, 이 과정은 크게 두 가지로 나눠진다. 1) HTML 문서를 parsing하여 무엇을 브라우저로 보여줄까 결정하기 2) 사용자가 보는 화면을 구현하기 이 때, 과정1)을 통해 만드러진 결과를 Render Tree라고 부른다. 이 Render Tree는 두 가지 정보를 포함한다. 하나는 스타일 정보, 나머지는 DOM이다.(구성 요소 정보) DOM을 정의해보자면 HTML 문서를 객체의 형태로 표현한 것이다. (객체와 좀 다른 점도 있다고 한다. 그러나 기본적으로 객체로 표현하여 다른 프로그램에서 사용할 수 있게 만든다는 것은 변함 없다.) DOM의 구조는 Node..

맵리듀스란? 대용량 데이터 처리를 위한 분산 프로그래밍 모델이다. 흩어져 있는 데이터를 Map을 통해 정돈한 후, reduce로 필요한 형태의 정보로 압축시키는 방법을 의미하는 것