HTML에 모듈을 import하여 해당 HTML에서 Vue에서 인스턴스나, 컴포넌트에서 사용하듯 접근하여 사용하고 싶어 구글링을 하다가 방법을 찾아서 정리한다. import한 모듈 ( 여기서는 common )을 window에 module이라는 객체를 추가하여 넣어준다. window.module = common { alert(makKind); } } mapFunc = new mapFunc(); export var mapFunc = mapFunc; common.js // basisMap.js, mapFunc import import {basicMap} from './components/basisMap.js'; import {mapFunc} from './components/mapFunc.js'; export..

DOM이 랜더링 되면 바로 해야 할 작업 ( 변수 생성, 함수 호출 ... )이 있을 때 자주 사용하는 녀석인데 제이쿼리 : Ready 순수자바스크립트 : DOMContentLoaded 둘의 차이점은 아래와 같다. 1. Ready가 DOMContentLoaded보다 먼저 실행된다. 2. Ready는 여러번 실행되지만, DOMContentLoaded는 단 한번만 실행된다. 필요한 녀석을 골라쓰자. 아래 샘플 코드를 적어놓음 ( 근데 Ready는 사용을 피하는 게 좋다고 한다.. ) JQuery버전 $(document).ready(function(){ // 실행할 기능을 정의해주세요. }); 순수 javascript 버전 document.addEventListener("DOMContentLoaded", fu..

기본문법 배열명.join(); 예제 let array = [ 'a', 'b', 'c', 'd', 'e' ]; let result = array.join(); --결과 : 'a,b,c,d,e' // join 함수안에 특정 문자를 넣으면 해당 문자로 연결할 수 있음 // 없으면 default로 , 이 들어감 let result = array.join('/'); --결과 : 'a/b/c/d/e'

javascript에서 객체를 생성하는 3가지 방법에 대해서 정리해보려 한다. 1. Object 생성자 함수 사용 2. 객체 리터널 방식 사용 3. 생성자 함수 사용 이렇게 3가지 방법이 있는데, 내가 객체를 생성할 때 가장 많이 쓰는 방식은 객체 리터럴 방식이다. 각 장단점이 있겠지만, 가장 좋은 방식은 객체 리터널 방식이지 않을까 싶다. 우선 직관적인 게 첫번째 이유, 그리고 객체를 생성함과 동시에 프로퍼티를 할당하기 때문에 속도가 빠르다는 게 두번째 이유이다. 그럼 각 방식에 대해서 자세히 알아보자. 1.Object 생성자 함수 사용 //비어있는 객체 생성 var student = new Object(); //student 객체의 프로퍼티를 할당 student.name = 'michelle' stu..

코드만 필요한 사람은 아래 코드를 갖다가 쓰도록 하자. 브라우저의 종류 및 버전 확인 위의 코드 실행결과는 아래와 같다.. ( 크롬이랑 엣지밖에 설치되어 있지 않아, 2개로만 테스트 해봄.. ) 해당 코드를 사용하려는 사람은 가져다 쓰되, 반드시 설정에서 실제 버전과 맞는 지 확인 하길 바람! 크롬 엣지

보통 프로미스에서 비동기통신을 한 뒤 then()에서 가져온 데이터를 정제할 때 this 객체를 이용하면 아래와 같이 undefined가 뜨는 것을 볼 수 있다... 샘플코드 결과 this객체는 누가 호출했냐에 따라 동적으로 변한다. Window에서 thisFun()을 호출하였으니, thisFun()에서의 this는 Window가 될 것이며, Window객체가 콘솔에 찍히는 것을 확인 할 수 있다.. 그런데 3번째 라인을 보면 undefined가 콘솔에 찍혔다. 즉 then()안에서는 this가 Window객체를 바라보고 있지 않다는 의미... 왜 then()에서는 this객체가 undefined로 뜰까? 구글링을 해본 결과 this객체는 함수를 호출 하는 "녀석"을 가르키게 되는데 then() 안에서는..