JavaScript
-
1. forEach 와 return 문 let array = [1,2,3,4]; array.forEach((item, index) => { console.log(item); if(item == 2){ return; } }) 위 코드를 보면 2까지 출력한 후 반복문이 종료될거 같지만 종료되지 않으며, 배열의 크기만큼 출력한 후 종료된다. forEach 반복문의 return은 아무런 영향을 끼치지 않는다. 공식 MDN 문서의 forEach에 관한 내용은 아래와 같다. 예외를 발생시키는 경우를 제외하고는 forEach() 루프를 중단시킬 방법은 없다. 만약 그러한 목적으로 forEach() 메소드를 사용하는것은 잘못된 방법이다. 공식 MDN - forEach 위 설명과 같이 forEach() 반복문은 도중에 ..
반복문과 return1. forEach 와 return 문 let array = [1,2,3,4]; array.forEach((item, index) => { console.log(item); if(item == 2){ return; } }) 위 코드를 보면 2까지 출력한 후 반복문이 종료될거 같지만 종료되지 않으며, 배열의 크기만큼 출력한 후 종료된다. forEach 반복문의 return은 아무런 영향을 끼치지 않는다. 공식 MDN 문서의 forEach에 관한 내용은 아래와 같다. 예외를 발생시키는 경우를 제외하고는 forEach() 루프를 중단시킬 방법은 없다. 만약 그러한 목적으로 forEach() 메소드를 사용하는것은 잘못된 방법이다. 공식 MDN - forEach 위 설명과 같이 forEach() 반복문은 도중에 ..
2021.12.09 -
$emit emit은 하위 컴포넌트에서 상위 컴포넌트에게 이벤트를 전달하기 위해 사용한다. * 하위 컴포넌트에서 상위 컴포넌트로 이벤트 전달 this.$emit('이벤트 명', 값); * 상위 컴포넌트에서는 하위컴포넌트에서 넘어온 이벤트와 값을 처리 v-on:'이벤트 명'="methods 명" 예) modal.vue 삭제 날짜 ParendModal.vue
$emit$emit emit은 하위 컴포넌트에서 상위 컴포넌트에게 이벤트를 전달하기 위해 사용한다. * 하위 컴포넌트에서 상위 컴포넌트로 이벤트 전달 this.$emit('이벤트 명', 값); * 상위 컴포넌트에서는 하위컴포넌트에서 넘어온 이벤트와 값을 처리 v-on:'이벤트 명'="methods 명" 예) modal.vue 삭제 날짜 ParendModal.vue
2021.11.10 -
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: '..
Dynamic ImportDynamic 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: '..
2021.11.09 -
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