씹어먹는 블로그

참조 : 자바스크립트 객체 복사하기 자바스크립트에서 객체를 복사하는 방법은 참 많습니다. junwoo45.github.io

이벤트루프란, 단일 호출 스택인(싱글쓰레드) javascript에서 비동기 처리를 할 때 꼭 필요한 기능이다. 비동기 작업이 끝난 후, 콜백함수들을 보관하고있는 작업큐(Task Queue/Callback Queue/Event Queue 등으로 불린다)에서 콜스택으로 작업을 푸시 해주는 역할을 한다. 콜스택을 주시하고 있다가 콜스택이 비어있게 되면 작업큐에 대기하고있는 작업을 콜스택으로 푸시 해준다. ES6를 지원하는 자바스크립트 런타임 환경에서는 작업큐에 Micro Task Queue라는 것이 추가 되었다. ES6부터 공식적으로 지원하게 된 Promise도 대표적인 비동기 처리함수 인데, 바로 이 Promise의 콜백은, 기존의 setTimeout 등과는 달리 Micro Task Queue로 들어가게 된..

Axios 는 Promise 기반의 브라우저, Node.js 를 위한 HTTP 요청 메소드 이다. API 작업을 할 때 주로 사용한다. 이전에는 jQuery Ajax 를 많이 썼지만 요즘은 Axios를 많이 쓴다. 요즘은 jQuery를 아예 쓰지 않는 추세이기도 하고. Asios를 사용하기 위해서는 우선 설치를 해야한다. $ npm install axios post 요청시 파라미터 전달 방법 axios.post('/url', { id: myId, name : myName }).then(response => { console.log(response.data); }).catch(error => { console.log(error.response); }); get 요청시 파라미터 전달 방법 axios.get(..

파일 업로드시 multiple 을 사용하여 여러개의 파일을 한번에 사용할 때 formData에 배열을 이용한다. 그런데 formData를 console.log로 찍으면 안보임 아래처럼 가공해서 확인 가능하다. fileUpload(e) { const config = { headers : {'content-type': 'multipart/form-data'} }; const formData = new FormData(); const images = new Array(); e.target.files.Foreach(function(item, key, arr){ formData.append('images[]', item); //images 배열에 item을 하나씩 넣는다. }); //param.settings f..

자바스크립트에서 범위를 지정하여 랜덤으로 숫자를 추출하는 방법 Math.random() 함수와 Math.floor() 함수를 이용해서 범위 지정 가능한 랜덤 숫자 출력 함수를 만든다. Math.random() 함수는 0이상~1미만의 난수를 생성한다. (예 : 0.52938372) Math.random(); Math.floor() 함수는 해당숫자와 같거나 해당숫자 보다 더 작은 정수를 반환 한다. Math.floor(2.5); //결과 2 Math.floor(-2.5); //결과 -3 Math.random() 함수를 이용하여 범위지정을 할 수 있는 함수를 만든다. function randomNum(min, max){ var randNum = Math.floor(Math.random()*(max-min+1)..

현재 브라우저에서 얼마나 스크롤 이동 했는지 확인 var winX = window.pageXOffset; var winY = window.pageYOffset; 현재 보고있는 화면 기준으로 특정 요소의 위치 알아내기 var div = document.getElementById("div_id"); var divTop = div.getBoundingClientRect().top; var divBottom = div.getBoundingClientRect().bottom; var divLeft = div.getBoundingClientRect().left; var divRight = div.getBoundingClientRect().right; 또 다른 방법. var divTop = document.query..

시나리오. 1. Copy 버튼 클릭 시, 현재 URL이 클립보드로 복사 된다. 2. 복사 완료 메시지 출력 후 완료. 1. Copy 버튼 클릭 시, 현재 URL이 클립보드로 복사 된다. * 필수사항 input 또는 textarea 태그가 필요함 (input / textarea 태그 안에 있는 텍스트만 클립보드 복사가 가능함) input 또는 textarea 태그가 hidden 또는 visibility 이면 안됨 예) input type='hidden' (x) 예) input style='visibility:hidden' (x) 예) textarea style='display:none' (x) 결국, 복사 할 텍스트를 갖고있는 form이 보이는 상태로 있어야 함 Copy 할 텍스트가 안보이는 상태로 클립보..

// obj 는 Object 일때. for (let key in obj) { console.log("key : " + key + "/// value : " + obj[key]); } array를 선언해놓고, 입맛에 맞게 사용.

php(laravel) 에서 array를 가져와 blade 내에서 javascript json으로 변환해서 사용하는 방법. $data 가 php 배열일때var arrData = $.parseJSON('{!! json_encode($data) !!}');console.log(arrData);

ajax 를 이용하여 xml 문자열을 컨트롤 할 때, "&" 같은 특수문자때문에 ajax 처리시 error를 발생시키는 경우가 있다. 이런 경우에는 CDATA 를 활용하여 문자열 변수에 적용해주면 간단히 해결된다. 예제는 아래와 같다. Name)?>]]>CName)?>]]>DName);?>]]>Title);?>]]> 위와 같이 숫자 이외에 문자열을 처리하는 곳에 적용해주면 된다.