Development Artist

[웹 서비스 A-Z][Vuejs] #4 Design Pattern 본문

Project_Personal

[웹 서비스 A-Z][Vuejs] #4 Design Pattern

JMcunst 2023. 2. 28. 11:45
728x90
반응형

Design Pattern

이전 장에서, 깡통 Vue 프로젝트를 하나 생성하고 실행도 시켜보았습니다.

이제 궁금해집니다. 어떻게 저런 모양을 하고 있는 것이지?

이것을 이해하기 위해서는 Vue의 디자인 패턴을 알아야합니다. 구글링해보면 알겠지만, Vue의 디자인 패턴은 MVVM 입니다. MVVM은(Model-View-ViewModel)의 약자입니다.

각자의 역할이 무엇일까요?

  • ‘View’는 사용자에게 보여지는 UI 부분이 됩니다.
  • ‘Model’은 데이터가 들어있습니다.
  • ‘ViewModel’은 ‘Model’의 데이터를 가져다가 View에 바인딩합니다.

이렇게 설명하면 잘 와닿지가 않습니다. 실제 코드를 한번 봐볼까요?

아래는 src/main.js 입니다. Vue가 실행되면 가장 먼저 main.js를 보게 됩니다. 보시다시피, ./App.vue를 import 하고 new Vue ~ 부분에서 새로운 Vue 인스턴스를 생성합니다. 괄호 안에 보시면, import 해온 App을 렌더링하고 #app 부분에 마운트를 시킵니다.

느낌이 오시나요?

  • import 해오는 App.vue (Model)를
  • 생성되는 새로운 Vue 인스턴스(ViewModel)가
  • #app(View)에 마운트를 한다.

자, 그렇다면 우리는 무엇을 하면 될까요? 맞습니다. App.vue를 조금 더 자세히 볼 필요가 있겠네요.

 

아래는 App.vue 입니다. 여기서 가장 먼저 눈여겨 볼 것은 <template>-<script>-<style> 입니다. 맞습니다. 모든 .Vue 파일은 다음과 같은 형식을 따릅니다. <template>은 HTML 형식으로 실제 View에 렌더링되는 레이어 담당을, <script> 부분은 데이터를 처리하는 담당을. <style>은 위의 탬플릿의 스타일링 담당을 하고 있습니다.

4번째 줄에 보시면 HelloWorld라는 태그를 사용하고 있습니다. 어떻게 가능한 것일까요? 9번째 줄에서 HelloWorld.vue를 import 하면서 HelloWorld를 쓰겠다고 명시하고 있기 때문입니다.

 

이것에 대한 이해는 ‘컴포넌트’라는 것을 설명해야 하는데요. 아래에서 추가적으로 설명하겠습니다.

 

App.vue의 템플릿에는 <img> 태그 하나와 <HelloWorld> 태그를 쓴 것 밖에 없네요. 일단 HelloWorld.vue로 가기전에 <img> 태그를 봅시다. src의 경로에 이미지가 있는데요, 상대경로로 지정이 되어 있네요. ./assets/logo.png를 찾아서 봐볼까요? 아래와 같은 이미지를 사용하고 있는데요, 어라라? 깡통 Vue 프로젝트를 실행했을 때 보았던 화면에서 다음과 같은 이미지를 보았습니다. 맞습니다.

그렇다면, Welcome 부터 하위 View들은 <HelloWorld> 태그가 담당하고 있는 것을 유추해볼 수 있습니다. <HelloWorld> 태그로 가봅시다.

src/components/HelloWorld.vue 인데요, 매칭이 되시나요?

<h1>{{ msg }}</h1> → Welcome to Your Vue.js App

<p>For a guid and recipes on how to configure / customize this project, <br> check out the <a></a></p> → For a guide and recipes on how to configure / customize this project, check out the vue-cli documentation.

<h3>Installed CLI Plugins</h3> → Installed CLI Plugins

‘’’ 중략 ‘’’

msg는 변수로써, <template>에서 선언해두고 <script> 내에서 create 될 때, 값을 전달합니다. <script> 태그를 보시면 props 안에 msg를 두고 있는데요, props는 차후 설명하도록 하겠습니다.

다음 장에서는, <script> 태그와 Vue의 라이프사이클에 대해 설명하도록 하겠습니다.

 

Additional

아까전에 컴포넌트에 대해 설명을 한다고 했었습니다. 컴포넌트의 뜻이 무엇일까요? 해시넷 위키에 따르면,

여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위

라고 설명하고 있습니다. 쉽게 생각해서 작은 조각 또는 덩어리라고 볼 수 있습니다.

이 개념은 다양한 개발 프레임워크에서 사용 되는데요, Vue에서는 SFC로 사용이 됩니다.

SFC는 Single-File Component로 단일 파일 컴포넌트를 의미합니다. 이 말은 ‘하나의 파일이 하나의 컴포넌트’를 의미합니다.

위에서 보시듯이, App.vue는 또 다른 HelloWolrd.vue 라는 컴포넌트를 import 해서 사용하고 있습니다. 이것은 내가 원하는 컴포넌트를 자유자재로 import 해서 사용할 수 있다는 것을 의미합니다.

예를 들어, 아래 처럼 모니터링 대시보드를 만들고 싶습니다.

하나의 DashBoard.vue 파일로 작성하면 될까요? 물론 작성해도 상관없지만, 우리는 SFC 개념을 적용하고 싶습니다.

따라서 우리는

  • DashBoard.vue
  • SideBar.vue
  • ResourceUsage.vue
  • CostByTeam.vue
  • CurrentResource.vue

와 같이 파일을 구성하고 DashBoard.vue에서 4개의 컴포넌트(.vue)를 import 해주는 것입니다.

왜 이렇게 구성할까요? 이런식으로 구성을 하면 재사용성이 높아집니다. 혹여 사이드바가 다른 레이어에서도 필요하다면 import 해서 바로 사용이 가능합니다.

또한, 유지보수가 쉬워집니다. 사이드바에 업데이트 사항이 생깁니다. 만약 SFC로 만들지 않았다면, 사이드바를 구현한 모든 파일을 수정해줘야 합니다. 하지만, SFC로 만들었다면 SideBar.vue 하나만 수정하면 되겠죠?

추가적으로 위의 main.js코드를 보시면 #app에 마운트를 한는데요, #app은 어디에 있을까요?

바로 ‘public/index.html’에 있습니다.

<body> 태그 안에 <div> 태그가 id=app으로, Vue 인스턴스가 해당 부분에 마운트를 하고 있습니다.

'npm run serve' 를 하게 되면 보여지는 화면이 index.html 입니다.

검사를 통해 Elements를 분석해보시면 더 명확히 이해할 수 있을 것입니다.

728x90
반응형

'Project_Personal' 카테고리의 다른 글

[웹 서비스 A-Z][Django] #6 Config  (0) 2023.03.02
[웹 서비스 A-Z][Vuejs] #5 Life Cycle  (0) 2023.03.01
[웹 서비스 A-Z][Vuejs] #3 Creation  (0) 2023.02.27
[웹 서비스 A-Z][Vuejs] #2 Config  (0) 2023.02.26
[웹 서비스 A-Z][Intro] #1 Frontend, Backend, Infra  (0) 2023.02.25
'Project_Personal' Related Articles more
Comments