Programming/Vue 3

Vue.js Lifecycle Hooks 라이프사이클 훅 개념 정리

Vue Lifecycle Hooks 라이프사이클 훅 개념 정리Vue.js는 컴포넌트(Component) 기반 프레임워크이며, 각각의 컴포넌트는 생성되어 업데이트되고 소멸되는 일련의 과정(Lifecycle)을 거치게 되는데요.이러한 일련의 과정을 컴포넌트의 '라이프사이클'이라고 하며, 과정 중 각각의 단계(초기화, 마운트, 업데이트, 소멸)에서 실행되는 함수들을 '라이프사이클 훅(Lifecycle Hooks)'이라고 합니다. Vue.js에서 Lifecycle Hooks를 이해하는 것은 어느 시점에 어떤 훅을 통해 컴포넌트의 상태를 업데이트해야 하고, 리소스 등 불필요한 요소를 제거하며, 렌더링을 최적화하는 등, 컴포넌트의 상태 변화에 맞춰 필요한 작업을 수행할 수 있기 때문에 상당히 중요한 부분이라고 생각..

Programming/Vue 2024.06.13

Vue.js 프로젝트 기본 구조에 대한 이해

Vue.js에 대한 공부를 시작하면서 가장 기본이 되는 프로젝트의 구조와 각각의 부분에 대한 이해를 하기 위해 정리한 내용입니다. 잘못된 부분은 댓글로 남겨주시면 확인하고 공부하면서 다시 수정하겠습니다. 미리 감사드립니다. 'Vue 3'를 기본으로 'vuex'와 'router'를 사용하는 프로젝트를 생성한 결과입니다. package.json, package-lock.json, node_modules 먼저 package.json, package-lock.json, node_modules 폴더에 대해서 살펴보겠습니다. package.json 파일은 프로젝트에 대한 정보를 담고 있는데요. 프로젝트의 이름, 버전, private 여부, 배포 및 개발에서 사용할 모듈 정보, 실행 명령어, 지원할 브라우저에 대한 ..

Programming/Vue 2022.07.05

VSCode Vue.js 프로젝트 생성 및 실행하기

시작에 앞서 Vue.js란, 2014년 첫 출시된 Vue.js는 애플리케이션 로직과 UI의 분리가 필요한 프로젝트에서 UI를 빠르게 개발하기 위해 만들어진 자바스크립트 기반 프레임워크입니다. MVVM(Model-View-ViewModel) 패턴을 따르며, Angular.js와 React.js가 대부분을 차지하던 JavaScript Framework 시장에서 꾸준하게 점유율을 높여 현재는 비슷한 위치에 있다고 합니다. Vue.js는 Angular.js와 React.js에 비하여 유연하고 가볍다는 장점이 있으며, HTML 마크업 기반의 템플릿을 활용하여 CSS를 작성하는 기존의 문법 스타일을 사용하기 때문에 Vue.js를 처음 접하는 사용자들이 배우기 쉽다는 점도 장점으로 꼽히고 있습니다. Vue.js 프로..

Programming/Vue 2022.06.10