개요 자바스크립트 코딩을 하다보면 복잡한 계산식의 경우 쓰레드 처리를 하고 싶을 때가 있을 수 있습니다. JS 에서 Web Worker 로 쓰레드 구현이 가능합니다. 오늘은 Web Worker 의 간단 구현을 해보도록 하겠습니다. https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers Using Web Workers - Web APIs | MDN Web Workers are a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the u..

개요 proxy 객체는 target 객체를 감싸게 되고 이를 참조하거나 변경시 이벤트를 중간에 조작할 수 있게 해줍니다. Proxy 공부를하면서 이것저것 console.log 를 찍어보는데 target이 되는 객체가 1depth 가 아니라 2, 3, 4, depth 일때를 찍어보았습니다. 그 중 첫 depth 외에 2번째 이후로 찍히는 prop과 return target[prop] 의 값이 다른점을 확인하였습니다. 원인 분석한 결과를 포스팅합니다. 문서 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get handler.get() - JavaScript | MDN handler.get() 메..

개요 자바스크립트 코딩을 하다보면 객체에 접근시 이벤트를 발생하거나 Validate를 해야하는 경우가 있습니다. 이를 Proxy 객체로 감싸고 ( Wrapper ) Trap( 핸들러 메소드 ) 를 사용하여 제어하거나 로직을 심을수 있습니다. Proxy 객체에 대해서 알아보았습니다. 문서 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy Proxy - JavaScript | MDN Proxy 객체를 사용하면 한 객체에 대한 기본 작업을 가로채고 재정의하는 프록시를 만들 수 있습니다. developer.mozilla.org 틀린것이 있을 수 있으니 양해부탁드립니다. 틀린점은 댓글로 알려주시면 정말 감사드리겠습..

개요 스크립트 개발 혹은 공부를 하거나 면접 준비를 하다보면, 호이스팅 이란 개념에 대해 자주 나옵니다 호이스팅을 공부하다 보면, 이번엔 실행 컨텍스트를 공부를 필수적으로 해야 합니다. 제가 문서를 보고 분석한 내용을 설명하고자 합니다. 문서 https://262.ecma-international.org/6.0/ ECMAScript 2015 Language Specification – ECMA-262 6th Edition 5.1.1 Context-Free Grammars A context-free grammar consists of a number of productions. Each production has an abstract symbol called a nonterminal as its left-..

Var , Let & Const 이해 ES2015(ES6) 부터 변수 선언에 사용할 수 있는 let 과 const가 추가되었습니다. 이전 개발 자료 혹은 소스코드를 보게 되면, var 로 변수선언이 이루어진 경우가 많은데 정확히 무엇이 다른지 알아보겠습니다 Var 스코프 레벨 - 선언된 위치에 따라 나뉨 var 가 함수 외부에서 선언될 때의 범위는 전역범위가 됩니다. 즉 함수 외부에서 var를 사용하여 선왼된 모든 변수를 전체 윈도우 상에서 사용할 수 있습니다. var 가 함수 내에서 선언된 경우에는 함수 범위로 지정됩니다. 함수 내에서만 사용 가능하고 접근할 수 있습니다. - 외부사용불가 가능) var test = "테스트입니다" var test = "변경합니다" 또한 var test = "테스트입니다..

개발 환경 : ES6 , jQuery 문제 발생 : custom 한 jQuery 이벤트 명칭 찾기 해결 방법 : $._data($("#id")[0],"events"); 혹은 jQuery._data($("#id")[0],"events"); 개발을 하면서 퍼블리싱 업체가 준 datepicker 에 change 이벤트를 발생시키고 싶을때 문제가 발생했습니다. ("#target).on('change',function(){ //events }) 위의 코드를 적용시켜도 반응이 없었습니다. 해당 엘리먼트에 걸려있는 이벤트를 확인하기 위해 다음과 같은 방법을 사용하였습니다. let test = document.querySelector("#id"); getEventListeners(test); 동적으로 F12(개발자 도..

현상 Spring 이 설치되어 있는 IntelliJ 프로젝트에서 실행은 정상적으로 작동하나, 디버그모드 실행시 아래와 같은 빨간색 오류코드 발생 NPT Cannot open libaray 과 함께 Event log 에는 intellij Applicastion Server was not connected before run configuration stop reason Unable to ping --- 이 발생할 경우 첫 빌드 시작시 경로에 Users 다음 한국어가 껴있는지 확인한다. 인코딩이 잘못 되어있을경우 오류가 발생한다. 해결방법 1. User 이름 변경 2. JDK 경로 한국어가 들어가지 않는 경로로 변경한다.

이전에 Babel 과 Polyfill에 대해 알아보았습니다. https://yn971106.tistory.com/140 [Babel]_Babel 과 Babel-polyfill 이란? 개요 프론트 개발을 하면서 ()=> ( 화살표 함수 ) `` ( 템플릿 코드 ) forEach filter 등 최신문법을 사용하여 개발하였습니다. IE 테스트 단계에서 문제가 발생했습니다. IE의 경우 ES6 이상의 문법을 사 yn971106.tistory.com 이번에는 webpack, nodeJS 환경에서 npm으로 설치하는 방법이 아닌 Spring -> Script 단에서 Polyfill을 사용하는 방법에 대해 알아보겠습니다. 사용 이유 크로스 브라우징을 구현하기 위함. Spring( 웹 ) 환경에서 Internet E..

개요 프론트 개발을 하면서 ()=> ( 화살표 함수 ) `` ( 템플릿 코드 ) forEach filter 등 최신문법을 사용하여 개발하였습니다. IE 테스트 단계에서 문제가 발생했습니다. IE의 경우 ES6 이상의 문법을 사용하게 되면 오류가 발생합니다. 한국에서는 공공기관의 경우 Active X 사용으로 인해 Internet Explorer 의 사용 비중이 높습니다. 따라서 IE 환경도 고려를 해야 합니다. 이를 해결할 수 있는 방법이 Babel, Babel-Polyfill 사용입니다. 1. Babel Babel 은 자바스크립트 컴파일러 입니다. 컴파일이란 어떤 언어의 코드 전체를 다른 언어로 바꿔주는 과정입니다. 즉 Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ (..

문제 요인 실전에서 여러개의 함수를 선언, 사용 하고 전역변수처럼 사용하는 지역변수에 값을 수정할 때 원하는 순서대로 진행이 되지 않아 debug를 하는 경우가 많습니다. 대부분 값을 가져오는 동안 해당 값을 가져가거나, 통신속도가 느려, 환경마다 값이 달라지는 문제가 발생하기도 합니다. 이럴때는 데이터를 받아올 때 까지 기다렸다가 진행해야합니다. 보통은 await 라는 기능을 사용합니다. 여기서는 ajax 통신 등 데이터를 받아와 저장하는 경우 await 를 사용하지 못하거나, 사용하지 않고 흉내내는 방법을 설명합니다. 여러개의 함수를 선언하고 $(document).ready(function() { }) 내부에 함수를 정렬하게 되어도, 내부 실행 속도에 따라서 순서가 천차 만별입니다. 예시를 보겠습니다..

목적 ajax와 같은 비동기 통신시 여러개의 동일 요청이 들어오면 가장 마지막 요청만 받아서 수행하도록 구성 비동기 통신을 구현하면서 다음과 같은 현상이 발생합니다. 게시판 페이징 처리를 했다고 가정합니다. 네트워크가 느리거나, 데이터가 많아서 로딩이 오래걸리는 경우 페이징을 1~5까지 빠르게 넘길 때 데이터가 이 속도를 따라오지 못해서 느리게 쫒아오는 경우가 있습니다. 이럴경우 로딩이 안되고 다른페이지 로드시 오류가 발생할 수도 있고, 시각적으로도 올바르지 못합니다. 이럴때 사용하는 메소드는 abort() 메소드 입니다. abort() 를 사용해서 동일한 ajax 호출시. 이전 요청을 삭제하고 지금 받은 요청을 처리하는 식으로 코드를 짜면됩니다. let ajax = null; // function no..

보호되어 있는 글입니다.