WebDevCurriculum / 컴포넌트 기반 개발

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다.

Introduction

• 이번 퀘스트에서는 Vue.js 프레임워크를 통해 컴포넌트 기반의 웹 클라이언트 개발 방법론을 더 자세히 알아보겠습니다.

Checklist

• Vue.js는 어떤 특징을 가지고 있는 웹 프레임워크인가요?

Vue.js는 가벼운 웹 프레임워크로, SPA(Single Page Application)를 개발하기 위해 설계되었습니다.

Vue.js는 다음과 같은 특징을 가지고 있습니다.

• 리액트와 앵귤러에 비해 가볍습니다.
• MVVM(Model-View-ViewModel) 패턴을 기반으로 합니다.
• 가상 DOM(Virtual DOM) 기반의 빠른 렌더링 속도를 가지고 있습니다.
• 컴포넌트 기반 구조를 가지고 있어 재사용성이 높습니다.
• 데이터 바인딩 기능이 강화되어 있습니다.
• 반응형 UI(Responsive UI)를 쉽게 구현할 수 있습니다.
• 템플릿과 로직을 분리하여 개발할 수 있습니다.
• 유연한 라우팅 기능을 제공합니다.
• 높은 커뮤니티 지원으로 인한 다양한 생태계와 라이브러리가 존재합니다.

Vue.js는 대규모 웹 어플리케이션에서도 사용될 수 있으며, 다른 라이브러리나 프레임워크와 함께 사용할 수 있습니다.

또한, Vue.js는 문서화가 잘 되어 있고 학습 곡선이 낮기 때문에 쉽게 접근할 수 있는 프레임워크 중 하나입니다.

 

• Vue.js는 내부적으로 어떤 식으로 동작하나요?

Vue.js는 MVVM(Model-View-ViewModel) 패턴을 기반으로 하며, 반응형(Reactive) 데이터 바인딩을 통해 View와 Model 간의 상호 작용을 처리합니다. Vue.js의 동작 과정은 다음과 같습니다.

1. 인스턴스 생성: Vue.js를 사용하기 위해서는 인스턴스를 생성해야 합니다. 인스턴스를 생성할 때, Vue.js에서 사용할 데이터와 템플릿, 메소드 등을 정의할 수 있습니다.
2. 템플릿 컴파일: 인스턴스가 생성되면, Vue.js는 템플릿을 컴파일합니다. 이때, 가상 DOM(Virtual DOM)을 사용하여 최적화된 렌더링을 수행합니다.
3. 데이터 바인딩: 컴파일된 템플릿은 데이터와 함께 바인딩됩니다. 이를 통해 View와 Model 간의 데이터 변화를 감지하여 자동으로 View를 업데이트합니다.
4. 이벤트 처리: View에서 발생한 이벤트는 Vue.js 인스턴스의 메소드로 매핑됩니다. 이를 통해 사용자의 입력에 대한 응답을 처리할 수 있습니다.
5. 업데이트 처리: 데이터 변경이 발생하면 Vue.js는 가상 DOM을 사용하여 View를 업데이트합니다. 이때, 필요한 최소한의 업데이트만 수행하여 최적화된 렌더링을 제공합니다.
6. 파괴 처리: 인스턴스가 파괴되면, Vue.js는 사용한 리소스를 해제하고 메모리를 정리합니다.

Vue.js는 이러한 과정을 통해 컴포넌트 기반 구조를 구현하며, 높은 재사용성과 유지보수성을 제공합니다. 

 

• Vue.js에서의 컴포넌트란 무엇인가요?

Vue.js에서 컴포넌트는 재사용 가능한 UI 모듈을 의미합니다. 각 컴포넌트는 독립적인 스코프를 가지며, 데이터와 로직을 캡슐화하여 다른 컴포넌트와의 충돌을 방지합니다. 이를 통해 개발자는 전체 어플리케이션을 작은 부분으로 분해하여 개발할 수 있습니다.

 

Vue.js에서 컴포넌트는 다음과 같은 형식으로 작성됩니다.

Vue.component('component-name', {
  // 컴포넌트 옵션
})

여기서 component-name은 컴포넌트의 이름을 의미하며, {} 안에는 컴포넌트의 옵션을 정의합니다. 컴포넌트 옵션은 다음과 같습니다.

• template: 컴포넌트의 HTML 템플릿을 정의합니다.
• data: 컴포넌트에서 사용할 데이터를 정의합니다.
• methods: 컴포넌트에서 사용할 메소드를 정의합니다.
• computed: 컴포넌트에서 사용할 계산된 속성을 정의합니다.
• props: 컴포넌트에서 사용할 속성을 정의합니다.
• watch: 컴포넌트에서 감시할 데이터를 정의합니다.

Vue.js에서는 컴포넌트를 중첩하여 사용할 수 있으며, 컴포넌트 간의 통신에는 props와 event를 사용할 수 있습니다. 이를 통해 다양한 형태의 UI를 구현할 수 있습니다.

 

• Vue 컴포넌트의 라이프사이클은 어떤 식으로 호출되나요?

Vue 컴포넌트의 라이프사이클은 컴포넌트가 생성되고 제거될 때 일련의 이벤트가 발생하는 것을 의미합니다. Vue 컴포넌트의 라이프사이클은 크게 생성 단계, 갱신 단계, 소멸 단계로 구분됩니다.

 

생성 단계

1. beforeCreate: Vue 인스턴스가 생성되고 초기화되기 전에 호출됩니다.

2. created: Vue 인스턴스가 생성되고 초기화된 후에 호출됩니다. 이 단계에서는 Vue 인스턴스의 데이터나 메소드 등이 초기화됩니다.

3. beforeMount: Vue 인스턴스가 DOM에 마운트되기 전에 호출됩니다.

4. mounted: Vue 인스턴스가 DOM에 마운트된 후에 호출됩니다.

 

갱신 단계

5. beforeUpdate: Vue 인스턴스에서 사용하는 반응형 속성이 변경되어 DOM을 다시 렌더링하기 전에 호출됩니다.

6. updated: Vue 인스턴스에서 사용하는 반응형 속성이 변경되어 DOM을 다시 렌더링한 후에 호출됩니다.

 

소멸 단계

7. beforeDestroy: Vue 인스턴스가 제거되기 전에 호출됩니다.

8. destroyed: Vue 인스턴스가 제거된 후에 호출됩니다.

 

위와 같은 라이프사이클 훅들을 사용하면 Vue 컴포넌트의 특정 단계에서 로직을 수행할 수 있습니다.

 

• 컴포넌트 간에 데이터를 주고받을 때 단방향 바인딩과 양방향 바인딩 방식이 어떻게 다르고, 어떤 장단점을 가지고 있나요?

Vue에서 컴포넌트 간에 데이터를 주고받는 방식에는 단방향 바인딩과 양방향 바인딩 두 가지가 있습니다.

 

단방향 바인딩

단방향 바인딩에서는 데이터가 한 방향으로만 흐릅니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있지만, 자식 컴포넌트에서 부모 컴포넌트로 데이터를 직접 전달할 수는 없습니다. 자식 컴포넌트는 부모 컴포넌트로 이벤트를 발생시키거나 프롭스(props)을 통해 부모로부터 데이터를 전달받아야 합니다.

 

단방향 바인딩의 장점은 데이터의 흐름이 단순하고 예측 가능하다는 것입니다. 데이터의 변화가 일어날 때 어떤 컴포넌트에서 변경되었는지 쉽게 파악할 수 있으며, 디버깅과 유지보수가 쉽습니다.

 

양방향 바인딩

반면에 양방향 바인딩에서는 데이터가 양쪽으로 흐릅니다. 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 뿐만 아니라, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수도 있습니다. 이를 가능하게 하기 위해서는 v-model 디렉티브를 사용합니다.

 

양방향 바인딩의 장점은 간단한 입력 폼 같은 곳에서 매우 유용하다는 것입니다. 사용자 입력이 자주 발생하는 곳에서 양방향 바인딩을 사용하면 코드의 양을 줄일 수 있습니다. 하지만 데이터의 흐름이 복잡해지고 예측하기 어려워질 수 있으며, 디버깅과 유지보수가 어려워질 수 있습니다.

 

따라서 일반적으로 단방향 바인딩을 사용하고, 필요한 경우에만 양방향 바인딩을 사용하는 것이 좋습니다.

 

• Vue.js 기반의 웹 어플리케이션을 위한 상태관리 라이브러리에는 어떤 것이 있을까요? 이러한 상태관리 툴을 사용하는 것에는 어떤 장단점이 있을까요?

Vue.js 기반의 웹 어플리케이션을 위한 상태관리 라이브러리로는 다음과 같은 것들이 있습니다.

• Vuex: Vue.js 공식 상태 관리 라이브러리로, Vue.js 애플리케이션의 모든 컴포넌트에서 공유되는 중앙 집중식 저장소를 제공합니다.
• Redux: React 생태계에서 가장 널리 사용되는 상태 관리 라이브러리 중 하나입니다. Vue.js에서도 사용 가능하며, Vuex와 비슷한 역할을 합니다.
• MobX: React와 Vue.js에서 모두 사용할 수 있는 간단하고 확장 가능한 JavaScript 상태 관리 라이브러리입니다.
• Vue.observable: Vue.js 2.6 이상에서 제공되는 간단한 상태 관리 솔루션으로, Vuex보다 더 경량화된 대안입니다.

장점:

• 복잡한 애플리케이션에서 데이터의 흐름과 상태를 더욱 명확하게 파악할 수 있습니다.
• 컴포넌트 간의 데이터 전달이 간편하며, 중앙 집중식으로 상태를 관리하므로 코드의 유지보수가 편리합니다.
• 디버깅이 용이하고, 테스트 코드 작성 시 편리합니다.

단점:

• 초기 구성이 복잡할 수 있습니다. 상태관리 라이브러리를 사용하기 위해서는 일정한 학습이 필요하며, 초기 구성 비용이 높아질 수 있습니다.
• 상태관리 라이브러리를 사용하지 않을 경우 간단한 애플리케이션에서는 오히려 코드량을 줄일 수 있습니다.
• 과도한 사용으로 인해 복잡성이 증가할 수 있습니다. 애플리케이션의 규모가 작은 경우에는 별도의 상태관리 라이브러리를 사용하지 않는 것이 더 효율적일 수 있습니다.