Dynamic Import 정적 import를 통해 모든 스크립트를 동시에 가져온다면 로딩 시간이 길어진다. 이러한 문제점을 보완하기 위해 ES6에서 필요한 스크립트를 필요한 시점에 가져와서 사용하도록 Dynamic Import를 정의했다. () => import('./components'); 예) vue router 설정할때의 예 import SearchLayout from '@/layout/search_index.vue' const SearchRouter = { path: '/search', name: 'Search', hidden: true, redirect: '/search/searchList', component: SearchLayout, meta: { title: '통합 검색', icon: '..

export(내보내기) Javascript 내부에서 객체, 함수, 원시 값을 내보낼때 사용한다. 외부에서 import를 통해 불러온다. export 방식에는 Named와 default 방식이 있다. named export 방식 export const obo = 'obo'; export const oboArray = [1,2,3,4]; export function oboFunction() {}; export {obo, oboArray, oboFunction}; //동시에 선언 named export 방식으로 사용하면 import 하는곳에서 위에 선언된 이름을 사용해야한다. 다른이름을 사용하기 위해선 as 라는 키워드를 사용해서 변경이 가능하다. export const obo = 'obo'; export c..

Javascript Javascript는 웹페이지를 조작하는 프로그래밍 언어이다. Javascript 런타임 : 런타임이란 프로그래밍 언어가 구동되는 환경을 말한다. : Javascript 런타임은 자바스크립트가 구동되는 환경을 말한다. 예) 크롬, 파이어폭스 등 여러 브라우저들과 Nodejs 를 자바스크립트 런타임이라고 한다. Javascript 동기(Synchronous) 동기 방식은 서버에 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행한다. Javascript 비동기(Asynchronous) 비동기 방식은 요청을 보냈을 때 응답과 상관없이 다음 동작을 수행한다. 보통의 웹에선 서버에 요청을 할때 비동기 방식으로 요청을 한다. 동기 방식으로 요청을 했을경우 응답이 올때까지 브라우저는 반응이 없고..

Window.Open: Window.Open은 지정한 URL을 새로운 창 혹은 현재 창에 불러오고 해당 Window 객체를 반환한다.: Javascript "Window" 객체의 open() 함수를 사용한다. 문법window.open(url, name[, specs][, replace]);* [] 대괄호의 속성은 선택사항 url : 새로운 창에 보여질 URL 주소, 값을 비워두면 빈창(about:blank) name : 새로운 창의 속성을 지정하거나 창의 이름을 지정한다. 기본값은 "_blank"_blank : 새로운 창에 열린다. 기본값이다. _parent : window.open을 호출한 부모창에서 열린다. _self : 현재 페이지를 대체한다._top : 로드된 프레임셋을 대체한다.특정..

동적 컴포넌팅을 위해선 태그를 사용한다. comp라는 변수명을 이용해 특정 컴포넌트들을 집어넣으면 동적으로 렌더링 시킨다. 매번 특정 컴포넌트를 전환할떄는 Destory 소멸되고 새로 생성된다. 하지만 컴포넌트를 전환할 때 컴포넌트의 상태를 유지하거나 성능상의 이유로 다시 렌더링되는걸 방지해야 할때가 있다. 이때 사용하는게 이다. 태그를 태그로 감싸면 컴포넌트가 전환될때도 Destroy 소멸하지 않고 계속 남아있다. keep-alive keep-alive는 컴포넌트의 상태를 보존할때 사용한다. include 속성을 사용해 전활될때 소멸하지 않고 남길 컴포넌트를 지정할 수 있다. 아래와 같이 test1 이라는 컴포넌트는 재 렌더링이 되지 않고 캐시된 데이터를 다시 불러온다. 컴포넌트 전환 할때마다 페이지의..

Blob(Binary Large Object) JavaScrpt에서 Blob(Binary Large Object)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용한다. 보통 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터 송수신을 위한 작은 Blob 객체로 나누는 등의 작업에 사용한다. Blob 생성 const newBlob = new Blob(array, options); ​ * array Blob 생성자의 첫번째 인수로 ArrayBuffer, ArrayBufferView, Blob(file), DomString 객체 또는 이러한 객체가 혼합된 Array를 사용할 수 있습니다. ​ * options 옵션으로는 type 과 endings 를 설정할 수 있다. type ..