hmk run dev

이터레이터 이터레이터는 자바스크립트뿐만 아니라 다른 언어들에도 있는 개념으로, 루프를 생각하면 이해하기 쉽습니다. 배열(array)은 대표적인 이터레이블 객체로서 이터레이터를 사용할 수 있습니다. 이터레이터는 단순히 루프를 수행하는 것이 아닌 현재 어디를 돌고 있는지 확인할 수 있습니다. const arr = [1,2,3] const it = arr.values() 위의 코드를 보면 arr에 values()를 이용해 이터레이터를 생성했습니다. it를 console에 찍어보면 이처럼 이터레이터 객체가 찍힙니다! 이터레이터 객체는 next라는 메서드를 가지고 있고 next를 arr의 개수만큼 사용하면 아래와 같습니다. next()를 호출할 때마다 그다음 값으로 넘어가며 모든 값을 돌고 나면 done이 tru..

웹 어셈블리란 왜 쓰는 것일까? 새로운 프로그램 언어가 아닌 브라우저에서 실행할 수 있는 새로운 파일 형식 WASM를 쓰는 이유 자바스크립트 말고 다른 언어의 코드도 브라우저에서 실행 가능 javascript 보다 작동 속도가 빠르다. js 코드는 크롬 브라우저가 실행해준다. 그 과정을 뜯어보면 상당히 복잡한데 javascript 작동과정 1. 크롬 브라우저가 js 코드를 발견한다. 2. parsing ex) 코드의 변수 함수 등을 스캔 3. Bytecode // 기계 친화적인 js 해석본 > 반복되는 코드는 최적화 Optimized Code(Optimizing 해줌) > Turbofan 엔진이 빠르게 실행해줌 옵티마이즈는 취소도 가끔 함 ex) 타입이 변하거나 그럴 때! 4. interpreter가 코..

실행 컨텍스트는 한마디로 - 코드를 실행하는데 필요한 환경을 제공하는 객체! - 코드 실행 시 식별자를 더욱 효율적으로 결정하기위한 수단! 자바스크립트 코드가 실행되면 싱글 스레드인 자바스크립트 엔진은 가장 먼저 콜 스택에 전역 실행 콘텍스트를 담습니다! 여기서 실행 콘텍스트는 Record와 Outer를 담고 있습니다. 그리고 임의의 함수 A가 실행될 경우 함수 A의 실행 콘텍스트가 콜 스택에 담겨서 맨 위에 쌓입니다. 콜 스택에선 가장 최근에 추가된 콘텍스트가 활성화됩니다. 그리고 함수 A에서 함수 B가 실행될 경우 콜 스택에 함수 B가 쌓이며 B의 실행환경이 활성화됩니다. 그리고 LIFO 방식으로 B의 함수가 실행되고 사라지고 그다음은 A 그다음은 전역 상태가 실행되며 사라집니다. 싱글 스레드인 자바..

스코프와 클로저 그리고 this를 모두 적절하게 이용한 코드를 보면서 이해해 보자! let that = this; 기본적으로 this는 window를 가르키지만 vue에선 보통 현재 컴포넌트를 가리킨다! 그런데 굳이 this를 that에 할당한 이유는 클로저 때문이다..! 선언당시에 참조범위는 created(){} 블록이며 axios({}) 비동기 통신 로직안에 this( vue 컴포넌트 data ) 속성 상태에 변화를 주고 싶어서 아래처럼 코드를 짰다! that에 할당한 this(vueComponent)는 axios 블록안에서도 스코프 체인에 의해 vueComponent를 가리켜 컴포넌트 상태(data)에 바로 변화를 줘 바로 렌더링 될 수 있도록 한다. data() { return { lineChar..

나는 이때까지 대부분의 loop 문을 for문으로 사용했었는데 문득, 다른 loop문에 대해서도 궁금해졌다 분명 각기 다른 특징이 있어서 나눠놨을거란 생각으로 여러가지 loop함수에 대해 알아보고자 작성하는 글이다. 1. for for (let i = 0; i < arr.length; i++){ console.log(arr[i]) } 가장 먼저 내가 제일 자주 쓰는 for loop - 빠르고 단순하다 손에 익었다. - 모든 자료형에서 사용가능 - 중간에 loop를 건너뛰거(continue)나 종료(break)가 가능하다. - 반복범위를 조절할 수 있다 ( i++, i--, i += 2 ) - i를 index값으로 사용할 수 있다. 2. forEach arr.forEach(function(v,i,arr){..

마우스만 갖다 대면 이벤트가 수십번씩 일어나는 경우가 있다 아래처럼 바꿔주면 깔끔! mouseover > mouseenter mouseout > mouseleave

콘솔을 이용해 디버깅하는 방법은 너무 귀찮고 한계가 있다.. 마침 오늘회사에서 해결할 문제가 회사 포트폴리오 팝업에 이미지 파일이 받아지기 전까지 (사진이미지가 많고 조금커서 팝업이 먼저떠도 조금 기다려야하는 상황...) 스피너가 보여지는 작업을 해야했는데... 단순히 html 파일을 가져오는게 아닌 그안에 이미지파일이 로드 되었는지를 구분 해야했다. 어떻게 이미지파일의 status를 가져올지..에 대해 막혔다.. 아래처럼 dim_loading(스피너)를 보여주고 > 팝업호출 > 이미지 파일 호출 > 스피너 display:none; 처리 async function comPopup($src){ debugger; // script 안에 break 포인트를 직접 지정해주는 경우 $('#dim_loading')..