Vue 프로젝트의 구성 요소

프로젝트 구성 요소

1. node_modules

VS Code를 통해 작업 폴더(이하 webproject)를 열면 탐색기에서 프로젝트를 구성하고 있는 내용을 확인할 수 있습니다.

이것들을 편의상 크게 4가지로 구분하여 간단한 설명을 하고 넘어가겠습니다.

 

노드 모듈은 앞에서 node.js를 설치할 때 같이 설치된 NPM(Node Package Manager)에 의해 설치 및 실행되며, 이전에 Vue CLI를 통해 프로젝트를 생성할 때 같이 인스톨되었습니다. 노드 모듈은 앞에서 설명한 것처럼 다양한 개발자, 개발 단체들이 자신 및 타인을 위한 목적으로 개발한 공개 라이브러리를 받아서 사용할 수 있게 해 줍니다.

폴더를 열어보면 수십 개의 하위 폴더로 구성되어 있는 것을 확인할 수 있는데 이 구성 요소에 대해 정리된 문서가 package.json입니다. 나중에 이 폴더를 삭제하더라도 언제든지 다음 명령어를 통해 재 설치가 가능합니다.

npm install

package.json에 대한 설명은 아래에서 다시 하겠습니다.

노드 모듈 설치에 대한 이해를 간단히 돕기 위해 yarn을 설치해보겠습니다. yarn은 페이스북에서 만든 JavaScript Package Manger로서 NPM과 동일한 기능을 수행합니다. 다만 다운로드한 패키지 데이터를 캐시로 저장하여, 중복된 데이터를 다운로드하지 않고, 여러 개의 패키지를 설치할 경우 병렬 처리함으로써 속도가 더 빠릅니다. 또한 yarn은 모든 디바이스에 같은 패키지를 설치하도록 함으로써 버전 차이로 인해 발생하는 버그를 방지할 수 있습니다.

다음과 같은 명령어를 입력합니다(개발 서버가 실행 중이라면 터미널에서 ctrl + c를 눌러 종료합니다).

npm install --global yarn

 yarn을 전역(global)으로 설치한다는 내용입니다. 명령어 하나만 입력하고 기다리면 자동으로 모두 설치됩니다. 설치 완료 메시지 이후 잘 설치되어 있는지 확인하기 위해 다음 명령어를 입력합니다.

yarn --version

저 같은 경우 yarn version v1.22.17 메시지가 출력되며 정상적으로 설치되었음을 확인할 수 있습니다.

 

2. public

퍼블릭 폴더는 당분간 건드릴 일이 없는 내용이므로 바로 다음으로 넘어가겠습니다.

 

3. src

저희가 앞으로 코딩을 할 작업 공간입니다. src폴더를 클릭하면 assets 폴더, components 폴더, App.vue, main.js를 확인할 수 있습니다.

assets 폴더는 익숙한 이름처럼 에셋들이 들어가는 폴더입니다. 현재는 logo.png 이미지 파일만 들어가 있으나 이후 폰트나 사운드 파일 등이 들어갈 수 있습니다.

components 폴더는 컴포넌트가 들어가는 폴더입니다. 컴포넌트는 말 그대로 구성 요소라는 의미를 가지고 있으며, 이는 페이지 하나를 의미할 수도 오브젝트 하나를 의미할 수도 있습니다. 컴포넌트는 이후에 Vuetify 페이지를 살펴볼 때 좀 더 자세히 설명드리도록 하겠습니다.

App.vue는 이후 라우터(router)를 사용할 때 메인이 되는 div입니다. 쉽게 말해 App.vue 위에 각각의 route를 입힌다고 생각하시면 될 것 같습니다. 라우트(route)는 무엇일까요? 저희가 알고 있는 홈페이지를 생각해봅시다.

새 인터넷 창을 열어 Google 메인 페이지에서 gmail을 들어가 봅시다. '받은 편지함' 페이지가 가장 먼저 나오며 이 페이지의 주소는 https://mail.google.com/mail/u/0/?tab=om#inbox입니다. 

그다음 '별표 편지함'과 '다시 알림 항목'을 차례로 눌러봅니다. 인터넷 주소는 각각 https://mail.google.com/mail/u/0/?tab=om#starred와 https://mail.google.com/mail/u/0/?tab=om#snoozed입니다. 여기서 가장 뒤에 있는 단어가 변경되는데 이것이 바로 path(경로)이자 라우트입니다. 라우트 뷰는 지정된 경로와 일치하는 컴포넌트를 렌더링 하는 방식을 말합니다.

 

4. 기타 파일

폴더 없이 밖으로 나와 있는 기타 파일이 바로 보이는데 현재는 package.json 파일만 알아보고 넘어가겠습니다. 

{
  "name": "webpoject",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

앞에서 설명한 것과 같이 이는 노드 모듈을 구성하고 있는 항목에 대한 구성 요소 내역서이며, 이후에 노드 모듈을 삭제하더라도 이 내역서를 통해 동일하게 재설치할 수 있습니다. 항목 뒤에 "^7.32.0"과 같은 것은 해당 항목의 버전을 표시하며 나중에 버전 업그레이드가 필요한 경우 package.json에 버전을 바꿔 기입하면 업그레이드 버전으로 재설치할 수 있습니다. 또한 작업 중 실수로 노드 모듈을 건드려 손상되었거나 내가 작업 중인 프로젝트를 복사하여 옮길 때 유용할 수 있습니다(프로젝트 용량의 대부분은 노드 모듈이 차지하기 때문에 복사 시 노드 모듈을 제외한 내용만 복사한 후 재설치하는 방식을 사용합니다).