프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.
9월 29일 (수)
📚 TIL
Vue 학습
📮 Feelings
Vue 학습
플러그인
Vue에서의 플러그인을 전역으로 설정하여 사용하는 방법에 대하여 학습하게 되었다.
plugins 폴더를 분리한 후 js 파일에 플러그인 지정을 위함 install 메소드를 활용하여 전역속성을 지정한후 methods에서 호출하는 용도로 사용하는 방법을 익히게 되었다.
흔히 사용하는 fetch 함수를 플러그인으로 분리하여 컴포넌트에서 호출하는 로직을 구현해보았는데 모듈 분리를 통한 갓히적인 코드를 작성할 수 있었다.
믹스인
다양한 기능의 컴포넌트에서도 더 작은 단위로 비슷한 로직이 자주 사용된다면 믹스인을 사용할 수 있다라는 것을 배우게 되었다.
간단한 설문조사 애플리케이션을 만들어보면서 설문양식폼에 필요한 컴포넌트들에서 비슷한 형태의 로직이 반복되어 믹스인으로 따로 분류하여 코드양을 줄이게 되었다.
이 과정에서 믹스인말고도 이때까지 학습하였던 내용들을 간단히 활용해 볼 수 있는 좋은 시간을 가지게 되었는데 특히 하나의 컴포넌트에 import 할 컴포넌트의 수가 많은 경우에 대해 하나의 js 파일에서 모든 컴포넌트들을 내보내기를 하도록 분리하고 많은 수의 컴포넌트들이 필요한 컴포넌트에서 단 한줄의 코드로 js에 관리하는 모든 컴포넌트들을 불러와 컴포넌트명을 모두 코딩하지 않아도 되는 사용법이 굉장히 인상적이였고 효율적인 관리가 가능한 코드를 설계하는 방법에 대해 알게 되었다.
Teleport
Teleport 문법을 통하여 컴포넌트에 의해 생성되는 DOM 요소의 위치를 지정해주는 방법을 학습하게 되었다.
style요소에서 fixed와 같이 부모 요소의 특정 속성에 영향을 받는 속성 사용시 DOM의 위치가 달라지는 경우에 사용하면 유용한 방법이겠다는 생각을 하게 되었다.
Provide와 Inject
부모 요소와 직계 자식 요소 사이가 아닌 조상 요소와 후손 요소들 사이의 데이터 교환이 가능한 방법인 provide와 inject 문법에 대해 학습할 수 있었다.
하위 요소에 전달하려고하는 데이터를 상위 요소와 하위 요소의 중간에 위치하여 단순히 데이터를 전달만 하는 불필요한 작업을 줄일 수 있는점에서 굉장히 유용하다라고 생각하게 되었다.
이러한 불편함에 대해 예전에 리액트를 공부하면서도 느꼈던 적이 있던 내용이라 금방 파악하기 쉬웠고 이해하는데에도 도움이 되었던 것 같다.
Vuex
Vue 애플리케이션에서 좀 더 유연한 상태 관리를 제공해주는 라이브러리인 Vuex에 대해 학습할 수 있었다.
이전에는 수직관계의 컴포넌트의 사이에서 데이터의 흐름을 다루는 방법에 대해 학습을 하였는데 수직관계의 컴포넌트와 더불어 수평관계에서의 데이터 흐름 역시 교환하게 해주는 라이브러리를 통해 좀 더 다양한 상황에서의 데이터 상태를 관리하는 방법을 배울 수 있었다.
전역적으로 하나의 파일에서 데이터의 상태들을 관리할 수 있고 뿐만아니라 모듈화를 통해 좀 더 의존성이 낮은 코드 역시 작성할 수 있는 방법에 대해 배울 수 있어서 흥미로웠고 재미있었다.
마치며 🙏
오늘은 좀 더 다양한 상황의 개발 흐름에 대해 배울 수 있었던 시간을 가지게 되었다. 특히 컴포넌트의 데이터들을 통합적으로 사용할 수 있게 해주는 Vuex 라이브러리에 대해 학습할 때 흥미로웠다.
다양한 컴포넌트에서의 데이터 접근을 다루지만 특정 동작들이 명확한 객체에서 이루어지게 보장하여 개발 안정성을 높여주는 기능이 굉장히 인상깊었기 때문이다.
지금까지 학습한 뷰의 내용들을 토대로 영화 검색 애플리케이션을 구현해보려고 한다. 처음부터 능숙하게 코드를 작성하기에는 어려움이 있겠지만 기능들을 구현하고 지속적인 리펙토링을 통해 코드를 개선하려고 노력해야겠다.
📅 Future Action Plans
- Vue 학습
- Router 기초
- Router 모드
- Router 네비게이션 가드, 메타 필드
- Router 스크롤 동작
- Babel 구성
- PostCss, Autoprefixer 구성
- Webpack Template 정리
