Dog foot print

노드를 공부하다보니 책에서 이벤트와 콜백 개념이 계속해서 등장했다. 단순히 콜백이나 동기와 비동기가 아닌 노드내부에서 v8엔진이 콜백을 처리할 때 어떻게 되어있는지 설명을 하는데 그냥 넘어가기에는 내용이 조금 복잡하니 포스팅으로 글을 남기려 한다. 동기와 비동기 console.log('start'); console.log('middle'); console.log('end'); 위의 코드 결과는 당연히 start , middle , end 순이다. 이 처럼 코드를 위에서 아래로 읽으면서 순차적으로 코드를 실행하는 것을 동기(Syncrhronous 줄여서 sync)라고 한다. setTimeout(() => { console.log("first") }, 3000); setTimeout(() => { conso..

나는 리액트를 접할때 유명한 리액트 블로거인 벨로퍼트님의 책을 보면서 create-react-app 을 사용해서 손 쉽게 리액트 개발환경을 구축하는 것을 먼저 배웠다. 리액트 책을 볼 때 웹팩에 대해서 일정부분 설명이 있었으나 곧 이어 sass와 css_module을 사용을 하며 나에게는 웹팩은 sass와 css_module을 사용할때 만 건들고 더 이상은 건들지 않아도 되겠다는 개념으로 자리잡게 되었다. 그러나 오늘 채용공고에서 웹팩과 바벨의 이해가 있는 사람을 우대하는 것을 보고 집에가는 길에 웹팩에 관한 글을 읽게 되었다. 내용은 결국 여러 모듈화된 파일들을 하나의 번들파일로 만들어 이를 배포하게 해주는 것이였는데 중요한점은 "javascript외 다른 지원 파일들을 import 했을 때 사용하는 ..

화살표 함수는 es6 2015에 등장한 함수사용법으로 function 키워드를 사용하지 않고 함수를 만들 수 있다. 그래서 그자체로는 익명함수가 되며 함수표현식을 이용하여 주로 사용한다. ex ) const arrow = ()=>{}; 화살표 함수사용 ()=>{} // 매개변수가 없는경우 x => {} // 매개변수가 한개인 경우 (x,y) =>{} //매개변수가 여럿인 경우 () => console.log("arrow"); //실행문이 한 줄인경우 () =>{ return { property : 1 } }; // 객체반환 ()=>({ property : 1 }); //객체 반환 () =>{ let myName = "hokeys"; return console.log(myName); } 화살표 함수의 렉시..

선형큐는 enque로 인하여 rear가 max_size 까지 갔다면 공간이 배열에 빈공간이 있더라도 front와 rear를 초기해주지 않는 이상 enqueue를 할 수 없다. 그런 단점을 극복한 것이 원형큐이다. 원형큐는 선형큐와 달리 원형의 모양을 하고 있으며 이 queue의 공간에 아이템이 꽉 차지 않는 이상 언제든 enque와 deque를 할 수 있다. 원형큐 설명 원형 큐는 enque와 deque의 형태가 조금 다른데 그 이유는 max_size 까지 가면 front와 rear가 0 부터 다시 처음부터 시작해야 하기 때문이다. 또한 front는 항상 item이 있는 곳 앞에 존재한다. 원형큐의 멤버변수 constructor(size){ this.maxQueueSize = size; this.arra..

학교에서 c언어나 c# 실기수업을 들을때 가장 신기한 것은 학생들이 지역변수나 포인터를 사용하지 않고 대부분 main 함수에서 전역변수를 이용해서 프로그래밍을 하던 것이다. 또한 내가운영하는 자스민에도 스코프의 개념이나 변수들의 유효범위에 대해서 모르는 경우가 많았기에 스코프에대해서 포스팅을 하고 다시 정리하도록 해야겠다. 스코프를 포스팅하기위해 여러 블로그를 보던 중 잘 정리되어있는 번역글이 있어 그 글을 다시정리하며 내것으로 만들어 보겠다. https://medium.com/@khwsc1/번역-자바스크립트-스코프와-클로저-javascript-scope-and-closures-8d402c976d19 [번역] 자바스크립트 스코프와 클로저(JavaScript Scope and Closures) 본 글은 J..

재귀 함수란 영어로 reclusive function 이라고도 불리운다. 이 재귀함수는 함수를 정의할때 함수내부에서 자신을 호출하는 함수, 알고리즘입니다. 재귀 함수의 사용 function reclusive(numb){ if(numb == 0){ console.log("end"); }else{ console.log(numb); reclusive(numb-1); } } reclusive(10); 파라메터로 들어온 인자를 0이 될때 까지 1씩 감소시켜 출력하는 함수를 만들었다. 재귀 함수는 함수내부에서 자신을 호출하기 때문에 별다른 제어장치가 없다면 무한 루프에 빠지기 쉽다. 그러므로 항상 제어문을 통해 재귀함수호출을 통제해야 한다. 왜 재귀 함수를 사용하는가 ? for 문이나 while문을 사용해서도 위와..

제이쿼리를 사용하면 toggleclass 나 addClass , removeClass 등 스타일링을 간단하게 변환할 수 있지만 바닐라 js에서는 document객체 를 이용해 className을 스트링으로 제어해야 한다. 해당 헤드에 대한 html 과 css 정보는 https://hokeydokey.tistory.com/33 이 링크에서 받을 수 있다. span 추가하기 jasmin 이 div안에 있는데 우리가 기대하는건 logo를 클릭했을때 컬러의 색상이 변경해야 함으로 logo를 span으로 감싸준다. 로직 구상 하기 span 태그를 건들면 해당 로고의 색상이 변경되어야 한다. 그럼 우리가 필요한 것들은 document.getElementById()로 해당 요소를 가져온다음 onclick 이벤트로 해..

css reset div가 블락속성이라도 브라우저에 걸려있는 디폴트 속성들 때문에 body태그에 약간의 마진이 있어 딱 맞지 않기 때문에 디폴트 속성도 없애주는 css reset을 다운받아 링크 걸어주어야 한다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was disc..