'Programming'에 해당하는 글 377건

import Vue

Programming/Vue.js 2021. 8. 20. 02:15

vue create 로 vue 프로젝트를 생성했을 때, 자동으로 생성된 파일들 중 뭔가 중요해 보이는 파일들을 살펴 보았다.

 

  • public/index.html
  • src/main.js
  • src/App.vue
  • src/components/HelloWorld.vue

 

 

1. public/index.html 

 

<html lang="">
    <head>
        ...
    </head>
    <body>

    <div id="app"></div>

    </body>
</html>

 

vue-cli-service serve 명령으로 보았다시피 Welcome Vue 웹사이트를 확인하였는데, 이 때의 템플릿이 public/index.html 파일이며 html-webpack-plugin 라이브러리로 처리된다. 빌드시 JS / CSS 등이 자동으로 삽입되며, webpack.config.js 파일을 생성하여 템플릿 관련 여러가지 설정 변경이 가능하다. (기본 템플릿 파일 및 타이틀 변경 등...) 이 파일에서 중요한 한 줄은,

 

<div id="app"></div>

 

이 html 파일은 body 안에 div 태그 한 줄만 있는 것을 보니, 레이아웃 보다는 정적 리소스를 관리하는 템플릿이다. 이 div 태그 하나에 앞으로 많은 컴포넌트들이 보여질 것이다.

 

 

2. src/main.js

 

어플리케이션의 시작점이 되는 파일이며, Vue 를 초기화하여 index.html 의 태그(#app) 에 삽입하는 코드가 들어 있다.

 

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

 

vue3 로 오면서 코드가 아주 조금 간단(?)해졌다. Vue 어플리케이션에 App 컴포넌트를 가져와서 #app 에 붙이는 코드이다. createApp 에 전달된 App 컴포넌트는 루트 컴포넌트가 된다. Vue 어플리케이션을 생성하는 이 파일에 추가적으로 자주 사용할 전역 컴포넌트나 부가적인 Vue 라이브러리를 등록할 수도 있다.

 

 

3. src/App.vue

 

<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
    name: 'App',
    components: {
        HelloWorld
    }
}
</script>

<style>
...
</style>

 

루트 컴포넌트에서는 다른 컴포넌트들을 트리형태로 계속해서 추가하여 사용할 수 있다. <template> 태그 안에는 기존의 html 태그와 동일하게 작성할 수 있으며 <HelloWorld> 태그 자리에는 해당 컴포넌트의 html 태그들이 삽입될 것이다. <script> 태그 안에는 HelloWorld 컴포넌트 태그를 사용할 수 있도록 명시하였다. 컴포넌트는 기존의 html 파일과 마찬가지로 html 태그, js, css 등도 여전히 사용할 수 있으며 재사용이 가능하다.

 

 

 

Vue 프로젝트는 이와 같은 구조로 .vue 컴포넌트만 열심히 만들면 된다.

 

빌드(vue-cli-service serve) 하게 되면 브라우저에서 vue 프로젝트를 확인할 수 있다. 기본 웹페이지에서 devtool 등을 이용하여 네트워크 resource 를 나열해 보면, index.html 템플릿과 vue 파일로 작성된 코드들이 js 파일(app.js, chunk-vendors.js 등)로 번들링(webpack) 되어 동작하는 것을 확인할 수 있다.

 


WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret

 

vue create 명령으로 생성된 node_modules 와 package.json 을 살펴본다. 

 

package.json 파일에는 프로젝트 정보 및 scripts, dependencies, devDependencies 등의 속성이 기본적으로 포함되어 있다.

 

  • scripts : 주로 사용할 명령어 모음
  • dependencies : 해당 모듈에 필요한 라이브러리 모음 (프로덕션 환경)
  • devDependencies : 해당 모듈에 필요한 라이브러리 모음 (개발 및 테스트 환경)

 

 

1. dependencies / devDependencies 속성

 

디펜던시는 우리말로 의존성, 종속성이라고 한다. 라이브러리로 생각하면 편하지만, 어쨌든 이 속성에 기입하면 해당 모듈에 종속이 되므로 그냥 디펜던시라고 부른다. 이 디펜던시를 패키지 관리자(npm, yarn, ...)로부터 설치하고 나면 node_modules 디렉토리에 포함된다. 각종 테스트 도구나 컴파일러 관련 도구들은 개발 및 테스트 환경에서만 사용될 것이므로 devDependencies 속성에 포함할 것이다. 또한 빌드시 devDependencies 속성의 디펜던시들은 포함되지 않으므로 더 빠르고 가볍게 빌드가 가능하다. package.json 파일에 디펜던시를 정의한 후 npm 으로 설치해도 되고, npm 명령어(--save)로 설치 후에 package.json 파일의 디펜던시 속성을 업데이트 할 수도 있다.

 

> npm install --save vue vue-router vuex (--save: default)
> npm install --save-dev webpack webpack-cli

 

 

2. scripts 속성

 

...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
...

 

vue-cli-service serve 명령을 실행하면, 기본적으로 개발 서버 환경이 구동되며 브라우저(http://localhost:8080) 에서 프로젝트를 확인할 수 있다. 이 때 webpack-dev-server 기반의 HMR(Hot-Module-Replacement) 기능으로 소스 수정시 실시간으로 브라우저의 화면이 업데이트된다.

 

script 속성에는 패키지 관리자로부터 serve 명령을 실행하면 vue-cli-service serve 라는 구문을 실행하도록 되어 있는데 여기서 vue-cli-service 라는 파일은 ./node_modules/@vue/cli-service/bin/ 디렉토리에 있으며 ./node_modules/.bin 디렉토리에 심볼링 링크로 존재한다. 모든 디펜던시들이 이러한 형태를 가지고 있다. node_modules 디렉토리 안에 각자의 디렉토리들을 가지고 있으며 실행파일의 심볼릭 링크를 ./node_modules/.bin 디렉토리에 만들어서 경로를 단순하게 만들어 준다.

 

이 때 root 디렉토리에서 vue-cli-service serve 를 실행할 수 있는 방법은 다양하다.

 

> npm run serve (npm 사용)
> npx vue-cli-service serve (npx 사용)
> ./node_modules/.bin/vue-cli-service serve (심볼링 링크 사용)
> node ./node_modules/@vue/cli-service/bin/vue-cli-service serve (원본 파일 사용)
> vue-cli-service serve (./node_modules/.bin 디렉토리 path 추가 후 사용)


serve 명령 아래에 vue-cli-service build 명령을 실행하면, dist 디렉토리에 빌드된 결과물들이 생성되며, 이 결과물들을 실서버에 배포할 수 있다. vue-cli-service lint 명령은 소스 에러 체크시 사용한다.

 


WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret

Vue 프로젝트를 생성하는 방법으로, html 파일의 <script> 태그에 직접적으로 cdn import 를 시킬 수도 있겠지만 대부분은 IDE 나 vue-cli 를 사용하여 프로젝트의 전반을 구성할 것이다.

 

 

1. WebStorm

 

돈을 조금 내면(?) 빠르고 간단하게 Vue.js 프로젝트를 구성할 수 있다. WebStorm 은 JavaScript 통합 개발 환경으로, 대부분의 JS 프레임워크를 쉽게 시작할 수 있다. 메뉴에서 [New Project] - [Vue.js] 만 선택하면 vue 기본 프로젝트 생성이 끝난다. 이 때 필요한 것은 node.js 정도? 생성이 끝나면 기본 프로젝트(HelloWorld) 페이지를 빠르게 확인할 수 있다.

 

 

2. Visual Studio Code

 

VSC 가 꽤나 인기가 많은듯?(나만 몰랐다;) VSC 는 무료라는 가장 큰 장점도 있지만, 단지 텍스트 에디터에서 많은 확장 플러그인을 지원하여 IDE 에 가깝게 확장할 수 있는 것이 무료 매니아들의 마음을 사로잡은 것이 아닌가, 특히 JS 개발에 있어서... VSC 는 IDE 가 아니기 때문에 vue 프로젝트를 자동으로 만들어 주는 편리함은 없지만, 뭔가 수동으로 조작하는 맛이가 있는거 같음.

 

VSC 에서 vue.js 를 시작하기 위해서는 약간의 터미널 작업이 필요하다. (vue-cli 설치/vue 프로젝트 생성)

 

> npm install -g @vue/cli
# OR
> yarn global add @vue/cli

 

vue-cli 를 위와 같이 전역 설치하면 vue 명령어를 사용하여 프로젝트를 관리할 수 있다. vue create 를 사용하여 vue 프로젝트를 생성한다.

 

> vue create my-project

 

현재 디렉토리에 my-project 디렉토리가 생성되며, VSC 에서 생성한 my-project 디렉토리를 열면 자동 생성된 vue 프로젝트 구조(디렉토리 및 파일)를 확인할 수 있으며, WebStome 에서 만든 결과물과 거의 동일하다.

 

 

  • dist 디렉토리 : 빌드된 파일 생성 (실제 서버에는 이 디렉토리 내용만 올리면 됨)
  • node_modules : 설치된 모듈 패키지
  • public : webpack 으로 처리될 템플릿 (index.html)
  •  src  : 기본으로 assets, components 정도가 생성되어 있으며 router, views 등 실제 vue 개발에 관련된 작업물이 저장될 디렉토리
  • package.json : 자주 실행할 명령어(scripts), 확장 모듈(dependencies) 등 관리

 

package.json 파일의 serve 스크립트를 실행하면 브라우저(http://localhost:8080) 에서 생성된 vue 프로젝트를 확인할 수 있다.

 

 

추가적으로 VSC 에서 vue 개발에 필요한 확장 플러그인(ext:vue) 을 설치한다. vetur, html css support 등... 

 


WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret

 

NVM(Node Version Manager) : 노드 버전 관리 툴

 

개발하다 보면 node.js 의 다양한 버전을 필요로 할 때가 있다. 이 때 nvm 을 사용하면 특정 버전의 node 설치 및 활성화를 쉽게 할 수 있다. 사이트에서 다운받아 설치하고 IDE 에서 설치하는 등 다양한 방법으로 node 버전을 관리하다가 빡치지 말고 처음부터 nvm 으로 관리하시길.

 

다운로드 / 설치 https://github.com/coreybutler/nvm-windows/releases

 

Releases · coreybutler/nvm-windows

A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows

github.com

 

> nvm list available

|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|    16.6.2    |   14.17.5    |   0.12.18    |   0.11.16    |
|    16.6.1    |   14.17.4    |   0.12.17    |   0.11.15    |
|    16.6.0    |   14.17.3    |   0.12.16    |   0.11.14    |
|    16.5.0    |   14.17.2    |   0.12.15    |   0.11.13    |
|    16.4.2    |   14.17.1    |   0.12.14    |   0.11.12    |
|    16.4.1    |   14.17.0    |   0.12.13    |   0.11.11    |
|    16.4.0    |   14.16.1    |   0.12.12    |   0.11.10    |
|    16.3.0    |   14.16.0    |   0.12.11    |    0.11.9    |
|    16.2.0    |   14.15.5    |   0.12.10    |    0.11.8    |
|    16.1.0    |   14.15.4    |    0.12.9    |    0.11.7    |
|    16.0.0    |   14.15.3    |    0.12.8    |    0.11.6    |
|   15.14.0    |   14.15.2    |    0.12.7    |    0.11.5    |
|   15.13.0    |   14.15.1    |    0.12.6    |    0.11.4    |
|   15.12.0    |   14.15.0    |    0.12.5    |    0.11.3    |
|   15.11.0    |   12.22.5    |    0.12.4    |    0.11.2    |
|   15.10.0    |   12.22.4    |    0.12.3    |    0.11.1    |
|    15.9.0    |   12.22.3    |    0.12.2    |    0.11.0    |
|    15.8.0    |   12.22.2    |    0.12.1    |    0.9.12    |
|    15.7.0    |   12.22.1    |    0.12.0    |    0.9.11    |
|    15.6.0    |   12.22.0    |   0.10.48    |    0.9.10    |

This is a partial list. For a complete list, visit https://nodejs.org/download/release

> nvm install 14.17.5
Downloading node.js version 14.17.5 (64-bit)...
Complete
Creating C:\Users\hongs\AppData\Roaming\nvm\temp

Downloading npm version 6.14.14... Complete
Installing npm v6.14.14...

Installation complete. If you want to use this version, type

nvm use 14.17.5

> nvm use 14.17.5
Now using node v14.17.5 (64-bit)

> nvm ls

  * 14.17.5 (Currently using 64-bit executable)
    12.22.5

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret

 

Vue.js 란 무엇인가?

 

프론트엔드 개발자가 익혀야 하는 범주에 들어가는 SPA(Single-page application) 프레임워크 중 하나이다. SPA 는 프레임워크만의 기술로 렌더링하여 한번에 웹페이지 전체를 로드하는 방식으로, 이미 웹프론트 개발에 자리 잡은지 오래다. 이런 멋진 SPA 사이트를 만들기 위해서는 VueJS 나 ReactJS, AngularJS 중 하나를 학습하면 된다.

 

 

Vue.js 를 사용하는 이유?

 

Vue 는 Angular 나 React 에 비해 코드가 간결하고 자바스크립트를 덜 몰라도 개발하는데 문제가 없다고는 하는데... 그리고 HTML 렌더링하는 시간이 아주 쬐끔 더 빠르다고 한다. 개인적으로는 프론트 개발자는 아니지만 잠시 해야할 필요가 있다면 Vue, 프론트 개발자이면서 전문성을 높여야 한다면 React 를 배우는 것이 낫지않나 싶다.

 

 

Vue 사용법

 

스크립트로 vue.js 를 불러오고, js 에서 Vue 인스턴스를 이용하여 DOM 의 데이터를 렌더링하는 가벼운 예제이다.

 

<script src="https://unpkg.com/vue@next"></script>

<div id="counter">
  Counter: {{ counter }}
</div>

<script>
const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')
</script>

 

 

Vue 개발 환경

 

아마도 프레임워크를 저런식(?)으로 호출해서 사용할 일은 없을 것이고, VS code 나 WebStorm 정도의 IDE 를 사용해서 효율적으로 Vue 를 시작하게 될 것이다. 또한 npm 이나 yarn 같은 자바스크립트 패키지 관리 툴도 필요하다.


WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret