TIL 2022/06/12

1일1로그 100일완성 IT지식

014 / 015

프로세서는 명령어 1개를 1나노초보다 빨리 실행할 수 있다. 하지만 메모리에서 명령어나 데이터를 인출하는데 걸리는 시간은 10~20나노초 정도이다. 충분히 빠른 속도이지만 프로세서의 관점에서 보면 느린 속도이다. 이러한 문제점을 극복하기 위해 캐시가 사용된다. 캐시에 대한 내용은 뒤에 좀더 자세히 다뤄 볼 것이다.
프로세서의 속도를 향상시키기 윈한 다른 방법도 존재한다. 파이프라이닝 기법이 있는데 이는 인출과 실행단계가 겹치도록 설계하여 명령어 여러개가 다양한 단계에 걸쳐 진행되도록 하는 것이다.
또한, 프로세서를 늘려 여러 프로세서가 동시에 작업하도록 하는 방법도 있는데 하드웨어 초기에 다루었던 Core의 개념이 바로 이 방식이다.
프로세서의 속도를 향상시키면 그에 따라 전력 소비량도 늘어나고 발생되는 열도 많아지게 된다. 데스크탑의 경우 여러 냉각장치를 사용하고 높은 전력의 파워를 사용하여 유지할 수 있지만 노트북이나 핸드폰의 경우에는 한계가 있다. 따라서 컴퓨터의 용도에 맞춰서 프로세서의 속도는 조절되어야 한다.

앞서 살펴본 대로 메모리에서 데이터를 인출하는데 시간이 오래걸리는 단점을 보완하기 위해 캐시가 사용된다. 캐시메모리는 용량이 작고 속도가 빠른 메모리로 곧 다시 사용될 가능성이 높은(인접한 데이터, 한번 사용한 데이터)를 저장하여 재사용시 빠르게 인출할 수 있도록 하는 메모리이다.
캐싱라는 개념은 일반적인 개념으로 하드디스크 관점에서는 RAM도 캐싱이라고 볼 수 있고 네트워크 데이터에 관점에서는 RAM, 하드디스트 모두 캐싱으로 볼 수 있다.

VUE

라이프사이클 훅

모든 라이프사이클 훅은 자동으로 this 컨텍스트가 인스턴스에 바인딩되어 있으므로, data, computed 및 methods 속성에 접근할 수 있습니다. 즉, 화살표 함수를 사용해서 라이프사이클 메소드를 정의하면 안됩니다. 그 이유는 화살표 함수가 부모 컨텍스트를 바인딩하기 때문에, this는 예상하는 바와 같은 컴포넌트 인스턴스가 정의되지 않습니다(undefined).

• beforeCreate : Vue 인스턴스가 초기화 된 직후에 발생. 컴포넌트가 DOM에 추가되기 전이어서 this.$el에 접근할 수 없다. 또한 data, event, watcher에도 접근하기 전이라 data, methods에도 접근할 수 없다.

• created : data, computed, methods, watch 등이 활성화되어 접근이 가능. 하지만 DOM에는 추가되지 않은 상태입니다. data에 직접 접근이 가능하기 때문에, 컴포넌트 초기에 외부에서 받아온 값들로 data를 세팅해야 하거나 이벤트 리스너를 선언해야 할 때 사용.

• beforeMount : 마운트가 시작되기 직전에 호출됩니다. render 함수가 처음으로 호출됩니다. 이 훅은 서버측 렌더링 중 호출되지 않습니다.

• mounted : 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행되므로, this.$el을 비롯한 data, computed, methods, watch 등 모든 요소에 접근이 가능. 하지만 모든 자식 컴포넌트가 마운트 된 상태를 보장하지는 않기 때문에 this.$nextTick을 사용하여 모든 화면이 렌더링 된 이후 마운트 상태를 보장할 수 있다.

• beforeUpdate : DOM이 패치되기 전에 데이터가 변경될 때 호출. 이 훅은 업데이트 전에 기존 DOM에 접근할 수 있다. 초기 렌더링만 서버측에서 수행되기 때문에, 이 훅은 서버측 렌더링 중 호출되지 않습니다.

• updated : 변경된 data가 DOM에도 적용된 상태로 만약 변경된 값들을 DOM을 이용해 접근하고 싶다면, 이 훅이 가장 적절하다. 다만 이 훅에서 data를 변경하는 것은 무한 루프를 일으킬 수 있으므로 이 훅에서는 데이터를 직접 바꾸어서는 안 된다. mounted훅과 마찬가지로, this.$nextTick을 이용해, 모든 화면이 업데이트 된 이후의 상태를 보장할 수 있습니다.

• beforeDestroy : 해당 인스턴스가 해체되기 직전에 호출. 아직 해체되기 이전이므로, 인스턴스는 완전하게 작동하기 때문에 모든 속성에 접근이 가능합니다. 이 단계에서는 이벤트 리스너를 해제하는 등 인스턴스가 사라지기 전에 해야할 일들을 처리.

• destoryed : 인스턴스가 해체되고 난 직후에 호출. 해체가 끝난 이후기 때문에, 인스턴스의 속성에 접근할 수 없으며 하위 Vue 인스턴스 역시 삭제.

부모-자식 컴포넌트 라이프사이클

컴포넌트에서 자식 컴포넌트를 호출 할 경구 각 컴포넌트별 created, mounted 훅이 실행되는 순서. 자식 컴포넌트의 mounted가 호출 된 후 부모의 mounted가 호출되지만 mounted가 완료된 상태를 보장하지는 않는다.

오늘의 한줄
프로세서의 성능을 향상 시키기 위한 다양한 방법을 알게 되었다.
그 중 다양한 분야에서 사용되고 있는 캐싱에 대해 자세히 알 수 있었다.

또한, vue.js를 사용하며 정말 자주 사용하는 훅들에 대해 정리하였는데
매번 사용하다 예상치 못한 결과를 보고 수정하던 훅들에 개념을 정리하여
이제는 헷갈리지 않고 원하는 결과에 따른 훅들을 적절히 사용할 수 있을 것 같다.