프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.
9월 28일 (화)
📚 TIL
Vue 학습
📮 Feelings
Vue 학습
SFC 프로젝트 구성
번들러 도구인 Parcel과 Webpack을 활용하여 SFC를 프로젝트로 구성해보았다.
상대적으로 Parcel이 사용법은 훨씬 간단하게 느껴졌고 Webpack은 여러 속성들로인해 사용법이 훨씬 복잡하게 느껴졌다.
Parcel은 간단한 사용법이 장점으로 느껴졌고 Webpack은 복잡한 사용방법을 가진만틈 다양한 세부적인 번들 설정이 가능하다는 것이 장점이라고 느낄 수 있었다.
이번 Vue뿐 아니라 언젠가 진행할 수 있는 JavaScript와 React 역시 번들러 도구로 프로젝트 빌드과정과 개발과정을 체계적으로 작업할 수 있도록 Webpack에 대해 더 깊게 다루어 보아야겠다.
컴포넌트 등록
이전에 학습하였던 컴포넌트의 전역등록 방법에 이어서 SFC 환경에서의 컴포넌트의 전역 등록 방법과 지역 등록 방법에 대해 비교하며 학습할 수 있었다.
전역으로 한 번에 컴포넌트들을 사용하면 하나의 파일에서만 컴포넌트를 등록하는 편리함이 있을 수 있겠지만 지역적으로 컴포넌트 단위별로 등록하는 과정에서 높은 재사용과 제어를 다룰 수 있는점이 장점으로 느껴졌다.
컴포넌트 Props 속성
상위 컴포넌트에서 하위 컴포넌트로 넘겨주는 데이터에 관련한 Props 속성에 대하여 학습할 수 있었는데 여러 컴포넌트간의 데이터 흐름에 집중하여 이해를 하려고 노력하였다.
다양한 형태의 동적인 데이터를 하위 컴포넌트에 전달하는 다양한 방법들을 알게 되었다.
컴포넌트 Non-Prop 속성
상위 컴포넌트에서 하위 컴포넌트로 전달되는 Props 속성이 아닌 다른 속성들의 데이터들을 하위 컴포넌트로 전달하며 데이터를 제어하는 방법에 대해 학습할 수 있었다.
어떤 종류의 속성들이 Non-Prop 속성에 해당하는지 좀 더 구체적인 공부를 진행해야 겠다고 생각하게 되었다.
컴포넌트 커스텀 이벤트
상위 컴포넌트에서 하위 컴포넌트로만 이어지는 데이터의 단방향 흐름에 대하여 커스텀 이벤트를 하위 이벤트에서 발생시켜 상위 컴포넌트에서 그 이벤트를 제어하는 방법을 통하여 상위와 하위 컴포넌트간의 양방향 데이터 흐름을 제어하는 방법에 대하여 학습할 수 있었다.
기본적으로 하위 컴포넌트 자체에서 상위 컴포넌트에서 전달하는 데이터에 대한 수정은 막으면서 하위의 요청에 의한 데이터 수정을 진행하는 방법이 굉장히 안정적으로 데이터를 제어한다는 느낌을 받을 수 있었다.
컴포넌트 Slots
컴포넌트에 props 속성으로 데이터를 전달하는 것이 아닌 컴포넌트 태그사이에 지정한 DOM 요소들을 구간으로 묶어 하위 컴포넌트에 전달하여 DOM 요소를 제어하는 slot 태그에 대하여 학습할 수 있었다.
정적이지 않은 동적인 상태의 DOM 요소들을 비교적 간단하게 다루는 방법이 인상깊었고 slot 태그 역시 상위와 하위 컴포넌트 사이에 양방향 데이터 바인딩이 가능한 방법이 있었고 다양한 상황에서 유용하게 사용할 수 있겠다고 느끼게 되었다.
동적 컴포넌트
컴포넌트를 직접적으로 명시하는 것이 아니라 필요에 따라 컴포넌트의 교체가 가능하도록 하는 방법을 학습하게 되었다.
컴포넌트이 교체가 자주 일어날경우 컴포넌트의 라이프 사이클이 계속해서 반복이 일어나게 되므로 메모리 성능이 떨어지게 되는데 이를 방지하기 위한 캐쉬 기능으로 컴포넌트를 기억하는 keep-alive 태그를 활용하여 메모리 성능이 떨어지는 것을 방지하는 방법에 대해 학습할 수 있었다.
하지만 keep-alive 태그 역시 캐쉬 메모리를 차지하게 되므로 자주 컴포넌트 교체가 발생하지 않는 이상 사용을 지양해야한다.
Refs
특정 DOM 요소에 접근하는 방법에서 문서 최상단에서부터 DOM 요소를 조회하는 것이 아닌 컴포넌트에서 지정한 refs 객체를 통해 바로 특정 DOM 요소를 조회하는 방법을 학습할 수 있었다.
성능적으로 훨씬 빠른 조회가 가능하겠다라는 생각과 함께 특정 DOM 요소에 접근하는 효율적인 방법을 깨달을 수 있었다.
추가로 $nextTick 함수를 통해 DOM 업데이트 이후 반응형으로 뷰에 렌더링까지의 시간을 기다린 후에 특정 콜백을 진행할 수 있도록 진행해주는 방법을 배울 수 있었는데 특정상황에서 굉장히 유용하게 사용될 수 있겠다는 생각을 하며 JavaScript의 콜스택 원리에 대해 복기해보는 시간을 가지게 되었다.
마치며 🙏
오늘은 이때까지 다룬 vue의 기초 문법들에서 SFC로 재사용성이 높은 컴포넌트 단위로의 프로젝트를 분리한 후에 데이터의 흐름에 좀 더 집중한 내용들에 대하여 공부하게 된 것 같다.
당연히 기초 문법을 다룰때에는 하나의 파일에서 모든 데이터들을 관리했었더라면 오늘 배운 SFC에서는 여러개의 컴포넌트 파일들을 모듈화를 통해 특정 컴포넌트들 간의 데이터 흐름을 제어하다보니 좀 더 복잡한 느낌이 들었다.
하지만 그렇게 이해하기 어렵지는 않았고 좀 더 많은 코딩을 통해 익숙해지는 시간이 필요함을 느끼게 되었다.
📅 Future Action Plans
- Vue 학습
- 플러그인
- 믹스인
- Teleport
- Provide와 inject
- Vuex
