본문 바로가기

FRONTEND67

Render Functions & JSX Render Function & JSX Nodes, Trees, Virtual DOM createElement Arguments 내부 Data Object 완성 예제 제약 constraints Template을 일반 JS로 대체하기 v-if & v-for v-model Event & Key Modifier Slots JSX Functional Components Attribute, Event를 Child Element/Component에 전달하기 Render Function Example Codes JSX Tree Example Render Function & JSX Vue는 HTML을 빌드하기위해서 template를 사용합니다. 그러나 JS 프로그램 방식으로 생성할 필요한 경우가 있습니다. 여기서 re.. 2020. 11. 11.
P_브라우저 객체 모델 BOM 브라우저 객체모델(BOM)은 웹에서 사용하는 자바스크립트의 핵심입니다. BOM은 웹 페이지 콘텐츠와 무관하게 브라우저 기능을 노출하는 객체 입니다. 제대로된 명세가 없는 기간이 길었기 때문에 브라우저 제조사들은 각 회사가 원하는 대로 BOM을 확장했고, 이는 문제를 많이 발생시켰습니다. 브라우저 사이의 공통점이 사실상의 표준이 되었고, 브라우저 개발 목적은 거의 상호작용성에 집중 되었습니다. Window 객체 BOM의 핵심에는 브라우저의 인스턴스인 window 객체가 있습니다. window 객체는 브라우저 창의 자바스크립트 인터페이스 구실을 하고 다른 한편으로는 ECMAScript global 객체로 기능합니다. 따라서 웹 페이지에서 정의한 모든 객체, 변수, 함수에서 window 가 global.. 2020. 10. 6.
Javascript Function - 함수 표현식 재귀 재귀함수는 일반적으로 함수가 자기자신을 이름으로 호출하는 형태입니다. function factorial (num) { if (num val2) return 1 else return 0 } } 이 예제는 내부함수 (B scope)이면서 외부 함수(A scope)의 변수(prop) 에 접근합니다. 내부 함수의 scope 체인에 comparison 함수의 스코프가 포함되기 때문에 내부 함수(b)가 반환되어 다른 컨텍스트에서 실행되는 동안에도 prop 에 접근할 수 있습니다. 스코프 체인에 대해서 여기에서 설명했습니다 >> 다른 함수의 내부에 존재하는 함수는, 외부 함수의 활성화 객체 (내부에서 사용하는 매개변수 - arguments 또는 이름 붙은 매개변수) 를 자신의 스코프 체인에 추가하여 자기 자신의.. 2020. 9. 23.
200905 Vue - Lifecycle & Hooks Vue instance의 lifecycle & Hooks beforeCreate() new 키워드로 인스턴스를 생성한 바로 직후, vue는 첫번째 lifecycle (beforeCreate) 를 동기적으로 호출합니다. 이 hook을 호출한 후에, vue는 data observation(관찰)과 event를 초기화하는 과정을 진행합니다. create() 다음으로, create 라는 hook을 가지는데, 인스턴스가 생성된 후에 동기적으로 호출됩니다. 이 hook 이 호출되면, vue 인스턴스의 옵션들은 data observation, computed properties, methods 등등을 세팅하는 과정을 진행합니다. 그리고 우리가 제작한 을 가지고 컴파일링 하게됩니다. 이 말은 즉, Virtual DOM.. 2020. 9. 6.
Vue.js (4) - 프록시 Vue Proxy 전체 시리즈에서, 우리는 data 프로퍼티, methods, computed 프로퍼티, 그리고 watchers를 직접적으로 prefix 없이 접근할 수 있는지 살펴봤습니다. 지금부터는 마지막으로 화면 뒤에서 발생하는 일에 대해서 살펴봅니다. 첫번째로, 몇몇 프로퍼티가 $ 표시로 prefix 되어있는지 주목해주세요. 이것은 우리가 접근할 수 있는 Vue 프로퍼티들이고, 이 시리즈중에서 나중에 확인해볼 것들입니다. $options 프로퍼티를 보면, 우리들의 data, computed 프로퍼티, methods 등등을 포함하고 있습니다. 여기에서 우리는 computed 프로퍼티와 method를 확인할 수 있습니다. data 프로퍼티는 function이므로, data를 직접적으로 여기서 확인할 .. 2020. 9. 6.
Vue.js (3) - Computed :: Getter & Setter의 정의 Computed computed 프로퍼티는 methods와 비슷하지만, 아주 강력한 힘을 가지고 있습니다. Computed는 캐싱(cache)을 가지고있다는 것입니다. 그래서 캐싱이 뭔가요? 캐시(cache)는 잠시 저장해 둔다는 의미를 가진 특별한 기능입니다. 하드웨어에서 '캐시 메모리'라고 하면 실제 메모리와 CPU 사이에서 빠르게 전달하기 위해 미리 데이터들을 저장해 두는 좀 더 빠른 메모리입니다. 같은 맥락으로 네트워크 영역에서도 캐시는 로컬 장소에 파일을 미리 받아놓는것을 의미합니다. 웹 서버에서도 매번 번거롭고 느리게 로딩을 해야 하는 파일들을 미리 로딩해두고, 발빠른 응답을 주기도 합니다. 데이터 베이스를 매번 확인해야 하는 것도 캐시 서버를 이용한다면 빠른 응답을 줄 수 있습니다. 먼 곳에.. 2020. 9. 6.
Javascript의 프로토타입 프로토타입 이란? 모든 객체(함수 포함)는 prototype 프로퍼티를 가집니다. 이 프로퍼티는 참조 타입의 인스턴스가 가지고 있는 모든 프로퍼티와 메서드들을 가지고있는 객체입니다. prototype 의 프로퍼티와 메서드는 객체 인스턴스 전체에서 공유된다는 점이 프로토타입의 장점입니다. 자바스크립트 객체는, 생성과 동시에 프로퍼티에 null 이 아닌 값이 할당됩니다. prototype 프로퍼티의 값은 다음과 같이 직접적으로 할당 할 수 있습니다. function Person () { } Person.prototype.name = "JJD" Person.prototype.sayName = function () { console.log(this.name) } const p1 = new Person() con.. 2020. 9. 3.
Javascript의 this this 에 대하여 Javascript에서 this 키워드는 this 가 속해있는 object를 참조합니다. 어디에서 사용되느냐에 따라 this 가 가리키는 값에 차이가 있습니다. 1. Object method 내부 this const person = { firstName: "JJ", lastName: "D", fullName: function => { return this.firstName + " " + this.lastName; } } person.fullName(); // "JJ D" Object의 method 에서 this 는 소유자 객체(owner object)를 참조합니다. 예제에서 this는, fullName Function 을 "소유한" person Object입니다. 다른말로 하면 thi.. 2020. 8. 19.
Javascript Function - Function 타입 Function 타입 ECMAScript에서 함수는 사실 객체입니다. 모든 함수는 Function 타입에 대한 인스턴스이며 다른 참조 타입과 마찬가지로 프로퍼티/메서드가 있습니다 함수를 정의하는 방법 function sum (num1, num2) { return num1 + num2; } 함수 선언 방식 함수 선언 호이스팅 과정으로 인하여 함수 선언부를 다른 코드를 실행하기전에 먼저 읽고 모든 실행 컨텍스트에서 접근하고 실행할 수 있습니다. ** 함수 선언 호이스팅(hoisting) JS 엔진은 코드를 평가할 때 제일 먼저 함수 선언을 찾은 다음 이들을 맨 위로 올립니다. 함수가 선언된 부분이 함수가 실행되는 부분보다 뒤에 있을 경우에도 JS 엔진이 함수 선언을 '끌어올립니다 hoist'. const s.. 2020. 8. 3.
참조타입 Javascript의 변수는 원시 값과 참조 값 두 가지 타입의 데이터를 저장 할 수 있습니다. 원시 값 : 단순한 데이터 - 값으로 접근 undefined null Boolean Number String 참조 값 : 여러 값으로 구성되는 객체 - 참조로 접근 자바스크립트는 메모리 위치에 직접 접근하지 않고 객체에 대한 참조를 조작합니다. 값은 메모리에 저장된 객체입니다. Array Object 값 복사 원시 값과 참조 값은 저장되는 방식 외에도 특정 변수에서 다른 변수로 값을 복사 할 때도 다르게 동작합니다. 원시 값 : 현재 저장된 값을 새로 생성한 다음 새로운 변수에 복사합니다. const num1 = 5; const num2 = num1; 복사한 값은 기존의 변수와 완전히 분리되어 있습니다. 참조.. 2020. 7. 29.
웹 브라우저의 메모리 관리 - 가비지 컬렉션(Garbage Collection) 가비지 컬렉션 자바스크립트는 실행 환경에서 코드 실행중에 메모리를 관리합니다. C나 C++ 같은 언어에서는 메모리 추적이 매우 중요한데 많은 개발자들이 이 때문에 골치 아파합니다. 자바스크립트는 필요한 메모리를 자동으로 할당하고 더 이상 사용하지 않는 메모리는 자동으로 회수하므로 개발자가 직접 메모리를 관리하지 않아도 됩니다. 자바스크립트의 가비지 컬렉터는 더이상 사용하지 않을 변수를 찾아내어 해당 변수가 차지하고있던 메모리를 회수합니다. 이 프로세스는 주기적으로 실행되는데, 코드 실행중에 특정 시점에서 메모리를 회수하도록 지정할 수도 있습니다. 표시하고 지우기 자바스크립트에서 가장 널리 사용하는 가비지 컬렉션 방법은 표시하고 지우기 'mak-and-sweep' 이라 불립니다. 변수가 특정 컨텍스트 안에.. 2020. 7. 29.
Vue - Virtual DOM에 대하여 Vitual DOM - 가상 DOM DOM 이란? Virtual DOM에 대해 들어가 보기 전에, DOM 이 무엇인지 살펴보도록 합시다. DOM은 Document Object Model(문서객체모델) 이고, 기본적으로 HTML 마크업과 HTML 요소를 위한 객체로 구성되어 있습니다. 이 객체들은 tree 구조로 저장되어있는데, 브라우저는 이 구조를 웹 페이지를 로딩할 때 만들어내고, DOM은 우리에게 interaction(상호작용)과 HTML 요소(elements나 css 등)를 제작할 수 있도록 합니다. DOM을 이용하는것은 규모가 작은 웹 어플리케이션을 작업할때 아주 깔끔하지만, 앱이 커지면 커질수록, DOM을 직접 제작하는일은 느려지며, 비효율적입니다. 이것이 Virtual DOM이 생겨나게 된 이.. 2020. 7. 26.

티스토리툴바