TIL - Day 34

MyeonghoonNam·2021년 9월 17일

TIL

목록 보기

40/49

프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.

9월 16일 (목)

📚 TIL

Vue 학습

📮 Feelings

Vue 학습

애플리케이션과 인스턴스 생성

Vue 애플리케이션을 생성하고 생성된 인스턴스를 HTML DOM에 연결시키는 마운트 과정에 대해 학습할 수 있었다. 인스턴스 체이닝을 통하여 좀 더 간단하게 Vue 애플리케이션을 생성하는 방법까지 배울 수 있었다.

최종적으로 최상위 컴포넌트의 여러 속성들에 대해 배우고 속성들이 적용된 컴포넌트의 생성과 마운트 단계를 지난 후에 html에 데이터를 반영하는 단계까지 실습하여 이해도를 높일 수 있었다.

라이프 사이클

컴포넌트의 각 시기에 맞는 일련의 초기화 단계인 라이프 사이클에 대하여 학습할 수 있었다. 최상위 컴포넌트인 Vue 애플리케이션의 생성이 이루어지기 전과 후, 마운트 과정이 이루어지기 전과 후, 데이터의 변화가 이루어진 후DOM 상태가 변경되기 전과 후, 마운트된 애플리케이션의 연결이 해제되기 전과 후의 과정에 대하여 자세히 학습할 수 있었다.

렌더링 과정이 이루어지는 작업에서 필요한 로직을 시기적으로 적절하게 구현할 수 있게 되었습니다.

템플릿 문법

Vue에서의 보간법에서 원시 HTML을 사용하는 방법과 javascript 표현식을 사용하는 방법에 대하여 학습하였고, 몇 가지 디렉티브에 대한 사용법과 다양한 형태의 인자를 전달하는 방법에 대하여 학습할 수 있었습니다.

그 중에서 디렉티브를 html 태그에 포함시키는 과정에서 코드가 길어지는 느낌을 받았는데 디렉티브의 약어 사용법까지 배울 수 있어서 찝찝함이 해결되었습니다.

Data와 Methods

Vue에서의 data 속성을 다루는 방법과 data의 반응형에 사용되어지는 Proxy 함수에 대해 이해도를 높일 수 있었다. getter와 setter에 의해 객체의 data가 각각의 인스턴스에서 독립적으로 유지될 수 있도록 data 속성을 함수로 리턴하는 것에 대한 중요성을 인지할 수 있었다.

methods 옵션을 활용하여 컴포넌트 인스턴스의 data에 접근하여 기능을 할 수 있는 함수 지정 방법에 대해 학습할 수 있었다. 이 부분을 공부하면서 일반 함수와 화살표 함수에서의 this 바인딩에 대한 공부를 복습하면서 Vue에서의 methods 안에서의 this는 함수를 호출한 컴포넌트 인스턴스에 바인딩이 된다는 점이 중요함을 인지하게 되었다.

Computed와 Watch

computed와 methods 옵션을 비교하면서 computed의 장점에 대해 공부할 수 있었다.

computed의 캐싱 기능을 통해 변화없는 값에 대해서는 함수를 실행하는것이 아닌 즉시 기존 값 반환이라는 점을 통해 메모리 절약이 가능한 점을 배우게 되었다.

computed는 의존성이 있는 data의 변화에만 반응한다는 점이 굉장히 최적화에 용이하다라는 점으로 다가왔으며 이는 다른 data의 변화에 대한 부작용이 없다라는 장점을 보여주는 것을 알 수 있었다.

computed 옵션에 getter와 setter를 활용하여 데이터 접근과 수정과 같은 상황에 대한 연산을 지정할 수 있다는 점을 배우게 되었다. 앞서 배웠던 proxy의 getter, setter와 구현 방법이 비슷하여 쉽게 이해할 수 있었다.

watch 속성을 통해 반응형으로 선언된 데이터에 한하여 변화가 감지되었을 때의 실행이 이루어지는 로직을 추가하는 방법과 원시 값이 아닌 참조형 데이터에 대한 반응형을 감시하는 방법에 대하여 computed 속성과 비교하는 시간을 가지게 되었는데 watch 속성이 좀 더 명령형적인 부분이 없지 않아 있는 것 같다고 느꼈다.

추가로 자료를 찾아보니 데이터 변경에 대한 비동기 처리와 무거운 비용의 작업을 다루기에 가장 유용하다는 점을 알게 되었다.