본문 바로가기
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.
Vue.js 기본 사용법 정리 Template Syntax - template 문법 Interpolation {{ }} 문자열을 출력 할 수 있습니다. 또한 간단한 JS문법을 interpolation에 사용할 수 있습니다. (if 는 안됩니다) message: {{ message }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} Directive 1. v-once 딱 한번만 출력하여 수정할 수 없게 지정할 수 있습니다. Can't modify this text : {{ message }} 2. v-html Native HTML 태그를 그대로 프린트 할 수 있습니다. Using v-html: 3. v-bind 양방향 데이터 바인딩 ** HTML attribute.. 2020. 6. 21.
React - React lifecycle methods 정리 Lifecycle methods 1. type component가 만들어질 때 실행 ( 기본 state를 설정할 수 있음 ) 2. componentWillMount() component가 DOM에 렌더링전 실행 ( DOM 처리를 할 수 없음 ) 3. render 4. componentDidMount() component 결과가 DOM에 렌더링 된 후 작동 ( 다른 js 프레임워크 연동 및 setTimeout, setInterval 및 AJAX 사용, DOM 처리 가능 ) 5. componentWillReceiveProps() 새로운 props를 받았을 때, props에 따라 state를 업데이트할 때 유용 ( setState 가능 ) 6. shouldComponentUpdate(nextProps, nex.. 2020. 5. 16.
SASS CSS, SASS, SCSS는 서로 완벽호환되며, Ruby와 node에서 사용 할 수 있습니다. SCSS는 { 코드블럭 }을 사용하지만, SASS는 { 코드블럭 } 대신 tab을 사용하며, 세미콜론( ; )을 사용하지 않는다 - indented syntax사용 SASS 사용 1. Variable :: $ SASS의 변수는 이미 변수에 값이 할당되었을 경우 재할당될 수 없습니다. !default를 변수와 함께 할당할 경우 해당값이 변수에 기본으로 할당됩니다. $myval1: null; $myval1: "Sass was developed" !default; p:after { content: $myval1; // content: "Sass was developed" } 2. @use /* scss */ @us.. 2020. 5. 16.

티스토리툴바