JavaScript
-
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..
ES6 export 와 importexport(내보내기) 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..
2021.11.09 -
Javascript Javascript는 웹페이지를 조작하는 프로그래밍 언어이다. Javascript 런타임 : 런타임이란 프로그래밍 언어가 구동되는 환경을 말한다. : Javascript 런타임은 자바스크립트가 구동되는 환경을 말한다. 예) 크롬, 파이어폭스 등 여러 브라우저들과 Nodejs 를 자바스크립트 런타임이라고 한다. Javascript 동기(Synchronous) 동기 방식은 서버에 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행한다. Javascript 비동기(Asynchronous) 비동기 방식은 요청을 보냈을 때 응답과 상관없이 다음 동작을 수행한다. 보통의 웹에선 서버에 요청을 할때 비동기 방식으로 요청을 한다. 동기 방식으로 요청을 했을경우 응답이 올때까지 브라우저는 반응이 없고..
Javascript 를 이해하자Javascript Javascript는 웹페이지를 조작하는 프로그래밍 언어이다. Javascript 런타임 : 런타임이란 프로그래밍 언어가 구동되는 환경을 말한다. : Javascript 런타임은 자바스크립트가 구동되는 환경을 말한다. 예) 크롬, 파이어폭스 등 여러 브라우저들과 Nodejs 를 자바스크립트 런타임이라고 한다. Javascript 동기(Synchronous) 동기 방식은 서버에 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행한다. Javascript 비동기(Asynchronous) 비동기 방식은 요청을 보냈을 때 응답과 상관없이 다음 동작을 수행한다. 보통의 웹에선 서버에 요청을 할때 비동기 방식으로 요청을 한다. 동기 방식으로 요청을 했을경우 응답이 올때까지 브라우저는 반응이 없고..
2021.11.09 -
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 : 로드된 프레임셋을 대체한다.특정..
Window.Open 과 Window.OpenerWindow.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 : 로드된 프레임셋을 대체한다.특정..
2021.11.09 -
동적 컴포넌팅을 위해선 태그를 사용한다. comp라는 변수명을 이용해 특정 컴포넌트들을 집어넣으면 동적으로 렌더링 시킨다. 매번 특정 컴포넌트를 전환할떄는 Destory 소멸되고 새로 생성된다. 하지만 컴포넌트를 전환할 때 컴포넌트의 상태를 유지하거나 성능상의 이유로 다시 렌더링되는걸 방지해야 할때가 있다. 이때 사용하는게 이다. 태그를 태그로 감싸면 컴포넌트가 전환될때도 Destroy 소멸하지 않고 계속 남아있다. keep-alive keep-alive는 컴포넌트의 상태를 보존할때 사용한다. include 속성을 사용해 전활될때 소멸하지 않고 남길 컴포넌트를 지정할 수 있다. 아래와 같이 test1 이라는 컴포넌트는 재 렌더링이 되지 않고 캐시된 데이터를 다시 불러온다. 컴포넌트 전환 할때마다 페이지의..
동적 컴포넌팅과 keep-alive동적 컴포넌팅을 위해선 태그를 사용한다. comp라는 변수명을 이용해 특정 컴포넌트들을 집어넣으면 동적으로 렌더링 시킨다. 매번 특정 컴포넌트를 전환할떄는 Destory 소멸되고 새로 생성된다. 하지만 컴포넌트를 전환할 때 컴포넌트의 상태를 유지하거나 성능상의 이유로 다시 렌더링되는걸 방지해야 할때가 있다. 이때 사용하는게 이다. 태그를 태그로 감싸면 컴포넌트가 전환될때도 Destroy 소멸하지 않고 계속 남아있다. keep-alive keep-alive는 컴포넌트의 상태를 보존할때 사용한다. include 속성을 사용해 전활될때 소멸하지 않고 남길 컴포넌트를 지정할 수 있다. 아래와 같이 test1 이라는 컴포넌트는 재 렌더링이 되지 않고 캐시된 데이터를 다시 불러온다. 컴포넌트 전환 할때마다 페이지의..
2021.11.02 -
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 ..
Blob(Binary Large Object)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 ..
2021.10.27 -
Document(문서) Object(객체) Model(모델) - 문서객체모델 문서객체란 , 와 같은 html 문서의 태그들을 JavaScript가 이해하고 이용할 수 있는 객체(Object)로 만들면 그것을 문서 객체라고 합니다. Model 은 문서 객체를 '인식하는 방식'이라고 해석할수 있다. 쉽게 말해서, DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다. 더 쉽게 말하면 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 결론은 DOM은 자바스크립트와 HTML을 이어주는 공간으로 내가 작성한 HTML 을 자바스크립트가 이해할 수 있도록 객체(Object)로 변환하는 것이다. 여기서 DOM은 Tree 형태의 노드 구조이다. 위 내용을 보면 HTML 코드로 트리구조를..
DOM(Document Object Model)Document(문서) Object(객체) Model(모델) - 문서객체모델 문서객체란 , 와 같은 html 문서의 태그들을 JavaScript가 이해하고 이용할 수 있는 객체(Object)로 만들면 그것을 문서 객체라고 합니다. Model 은 문서 객체를 '인식하는 방식'이라고 해석할수 있다. 쉽게 말해서, DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다. 더 쉽게 말하면 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 결론은 DOM은 자바스크립트와 HTML을 이어주는 공간으로 내가 작성한 HTML 을 자바스크립트가 이해할 수 있도록 객체(Object)로 변환하는 것이다. 여기서 DOM은 Tree 형태의 노드 구조이다. 위 내용을 보면 HTML 코드로 트리구조를..
2021.10.27