프론트엔드(44)
-
[JS] 객체
객체(Object) - 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(KEY)와 값(VALUE)로 구성됨. - 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있기에 함수는 일급 객체이므로 값으로 취급되어 프로퍼티의 값으로 사용될 수 있으며, 일반 함수와 구분하기 위해 메서드라고 부름. 자바스크립트 객체 생성방법 - 객체 리터럴 - Object 생성자 함수 - 생성자 함수 - Object.create 메서드 - 클래스(ES6) 객체리터럴에 의한 객체 생성방법 var obj = { num :0, increase : function(){ this.num++; } }
2021.07.11 -
[JS] 자바스크립트 객체 KEY 동적 할당
자바스크립트 객체 KEY 동적 할당 var something = { name: 'zincider', job: 'student' } 위와 같이 Object는 KEY와 VALUE의 쌍으로 이루어진 키는 임의로 작성할 수 있고 또는 쌍따옴표를 이용해서 "name" : "zincoder"와 같이 작성할 수 있지만, KEY에는 문자열을 그대로 사용하기 때문에 KEY를 동적으로 할당해주어야 할 필요가 있을 때는 바로 사용이 불가능함. var keyname = 'name'; var something = {keyname : 'zincoder'} //원래 의도는 {name: "zincoder"} console.log(something) //{keyname: "zincoder"} 위와 같은 코드를 작성하였을 때, 원래 의..
2021.07.11 -
[Vue.js] Vue 라이프사이클 훅
Vue 공식문서에서 확인할 수 있는 이미지와 같이 Vue 인스턴스는 크게 4가지 과정을 거치게 되는데, 그 4가지에는 Created(생성), Mounted(DOM에 부착), Update(업데이트), Destroy(소멸) 이 있음. Vue는 각각의 프로세스에서 Vue를 사용하는 사람들을 위해 Hook을 할 수 있도록 API를 제공하는데, 일반적으로 많이 사용하는 것에는 beforeCreated, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 등이 있음. beforeCreated 가장 먼저 실행되는 훅인 beforeCreated는 Vue인스턴스가 초기화 된 직후에 발생됨. 컴포넌트가 DOM에 추가되기 전이기 때문에..
2021.07.06 -
[Vue.js] mitt (Vue3에서 컴포넌트간 통신방법)
[에러내용] Vue3에서 EventBus를 적용해보려 했는데, 계속 $on관련 에러발생 Vue3마이그레션(사용)을 위해 알아둘 점 Vue3에서는 $on, $once, $off를 사용하지 않음 $emit은 parent componet에 부착되어 trigger event handler API로 여전히 사용됨 'EventBus'는 Vue가 추천하는 공식적인 방법이 아님 'mitt'이라는 외부라이브러리를 이용하여 EventBus구현 mitt 외부 라이브러리 mitt라이브러리는 커스텀이벤트를 만들어 송출, 수신할 수 있게 해줌 기존의 eventBus 대체하여 사용 가능 mitt사용예시 나의 경우, 'TodoInput.vue'에서 todoInput이라는 입력값을 입력받고 형제컴포넌트인 'TodoList.vue'로 ..
2021.07.04 -
[JS] this
this this는 함수의 실행컨텍스트를 가리키는 예약어인데, 다시 말해 '함수가 실행되는 환경(함수가 실행될 때의 컨텍스트)'라고 할 수 있음. console.log(this); //window - this의 가장 기본적인 컨텍스트는 글로벌(전역) 컨텍스트이기 때문에 여기서 출력된 window는 자바스크립트의 최상위 객체를 가리킴 var obj = { num:10, printNum: function(){ console.log(this.num); } } obj.printNum(); //10 - 객체 속성 함수 안에서의 this는 기본적으로 해당 객체를 가리킴 function showComment(){ consloe.log(this); } shoeComment(); //window - 위 함수를 실행시키면..
2021.06.24 -
[JS] EVENT
이벤트(EVENT) 웹을 탐색하는 동안 브라우저는 여러 종류의 이벤트를 등록함. 이벤트(event)는 어떤 사건을 의미하는데, 브라우저에서의 사건이란 사용자가 클릭했을 '때', 스크롤을 했을 '때', 텍스트를 입력했을 '때'와 같은 것을 의미함. 이벤트의 종류 사용자의 이벤트를 다루기 위해서는 먼저, 이벤트의 종류에 대해 알아야함. 1) 사용자 인터페이스 이벤트 사용자 인터페이스(UI) 이벤트는 브라우저가 로드한 HTML페이지가 아닌 브라우저 창을 사용할 때 발생하는 이벤트를 의미함. 예를 들어, 페이지가 로드되었거나 브라우저 창의 크기가 조정된 경우에 발생하는 이벤트들이 포함됨. - load : 웹페이지의 로드가 완료되었을 때 - unload : 웹 페이지가 unload될 때(새로운 페이지를 요청한 경..
2021.06.14