서버띄우고 접속했는데 원래 화면이 뜨지 않는다

포트를 8080 -> 15361로 바꾸고 접속하니 접속 성공

프로젝트는 Vue 프레임워크를 사용해 개발되어 있다.
ProcessList를 수정함에 앞서 Vue에 대한 기본적인 지식이 필요할 것 같다.

.Vue

Vue.js란

MVVM 패턴의 ViewModel 레이어에 해당하는 화면단의 라이브러리

• 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공, 관련 API를 지원
• 양방향 데이터 바인딩을 제공
• 컴포넌트 간의 통신은 단방향 데이터 흐름 (부모 -> 자식)
• 다른 프론트엔드 프레임워크에 비해 상대적으로 가볍고 빠르다

MVVM 패턴이란

화면 동작 로직과 데이터 처리 및 서버 로직을 분리하고, 뒷단에서 넘어온 데이터를 Model에 담아 View로 넘어주는 중간 지점
View <-> ViewModel <-> Model 로 구성

vue의 구성

Vue 파일은 세 부분으로 이루어져 있다.

< template > - 컴포넌트 템플릿 정의

컴포넌트의 모든 마크업 구조와 디스플레이 로직을 포함
HTML, Vue 구문 등을 포함

< script > - 스크립트 작성

화면에 표시되지 않는 모든 로직을 포함
script 태그안에 기본으로 export되는 JS 오브젝트가 있어야 함
로컬 컴포넌트 등록, 컴포넌트 잇풋(props) 정의, 로컬 상태 관리, 메서드 정의 등의 작업
빌드 단계에서 처리되고, 템플릿과 함께 render() 함수를 통해 Vue 컴포넌트로 변환

< sytle > - 스타일 정보 작성

style에는 컴포넌트에서 사용할 CSS를 포함한다.

Vue Instance

인스턴스는 Vue.js로 화면을 개발하기 위해 꼭 생성해야 하는 필수 단위

vue instance 생성자

new Vue({
  // instance option properties
});

vue에서 인스턴스를 생성하는 방법
Vue 객체를 생성할 때 아래와 같이 data, template, el, methods, life cycle hook등의 인스턴스 옵션 속성을 포함할 수 있다.

new Vue({
  // instance option properties
  template: "",
  el: "",
  methods: {}
  // ...
});

vue instance 라이프사이클 초기화

인스턴스가 생성될 때 아래의 초기화 작업을 수행한다.

• 데이터 관찰
• 템플릿 컴파일
• DOM 객체에 연결
• 데이터 변경시 DOM 업데이트

Vue Components

화면의 영역을 일정한 단위로 쪼개어 재활용 가능한 형태로 관리하는 것

컴포넌트 등록

<div id="app">
  <my-component></my-component>
</div>

new Vue({
  el: "#app",
  // 컴포넌트 등록 코드
  components: {
    // '컴포넌트 이름' : 컴포넌트 내용
    "my-component": {
      template: "<div>A custom component!</div>"
    }
  }
});

Global or Local Component

전역 컴포넌트 등록 하는 방법

Vue.component('my-component', {
  // 컴포넌트 내용
  template: '',
  ...
})

로컬 컴포넌트 등록하는 방법

var cmp = {
  // 컴포넌트 내용
  template: '',
  ...
}
  
new Vue({
  components: {
  	'my-cmp' : cmp
 }
})

컴포넌트의 관계

컴포넌트 관계도에서 상하 관계에 있는 컴포넌트 통신은
위에서 아래로는 데이터(props)를 내리고, 아래서 위로는 이벤트를 올린다.

Props

Props는 상위 컴포넌트에서 하위 컴포넌트로 내리는 데이터 속성을 의미.
모든 컴포넌트가 각 컴포넌트 자체의 스코프를 갖고 있어 다른 컴포넌트의 값을 바로 참조할 수 없음.

컴포넌트 간의 직접 통신은 불가능하게 되어 있다.

Event Bus

상하위 관계가 아닌 컴포넌트 간의 통신을 위해 Event Bus를 활용할 수 있다.

Event Bus를 사용하기 위해 새로운 뷰 인스턴스 생성

var eventBus = new Vue();

new Vue({
  //...
});

이벤트를 발생시킬 컴포넌트에서 $emit() 호출

eventBus.$emit("refresh", 10);

이벤트를 받을 컴포넌트에서 $on() 이벤트 수신

new Vue({
  created: function() {
    eventBus.$on("refresh", function(data) {
      	console.log(data); // 10 출력
    });
  }
});

Vue Routers

뷰를 이용해 싱글 페이지 어플리케이션 제작에 유용한
라우팅 라이브러리, 뷰 코어 라이브러리와 함께 공식 라이브러리로 지원됨

npm or CDN 방식으로 설치 가능

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

npm install vue-router --save

라우터 특성

Vue 라우터는 기본적으로 '루트 url'/#/'라우터 이름'으로 사용

example.com/#/user

'#'를 제외하고 싶으면 mode 속성추가

new VueRouter({
  mode: "history"
});

라우팅이란 웹 페이지 간의 이동 방법, 라우팅을 이용하면 화면간의 전환이 매끄럽고 애플리케이션의 사용자 경험을 향상시킬 수 있다.

Nested Routers

라우터로 화면을 이동할 때 네스티드 라우터를 이용해 지정된 하위 컴포넌트를 표시할 수 있다. 구조는 가장 큰 상위 컴포넌트가 하위 컴포넌트를 포함한다.

<!-- localhost:5000 -->
<div id="app">
  <router-view></router-view>
</div>

<!-- localhost:5000/home -->
<div>
  <p>Main Component rendered</p>
  <app-header></app-header>
</div>

// 'localhost:5000/home'에 접근하면 Main과 Header 컴포넌트 둘다 표시된다.
{
  path : '/home',
  component: Main,
  children: [
    {
      path: '/',
      component: AppHeader
    },
    {
      path: '/list',
      component: List
    },
  ]
}

Named Views

특정 URL로 이동했을 때 여러 개의 컴포넌트를 동시에 표시할 수 있는 방법이다.

<div id="app">
  <router-view name="appHeader"></router-view>
  <router-view></router-view>
  <router-view name="appFooter"></router-view>
</div>

{
  path : '/home',
  // Named Router
  components: {
    appHeader: AppHeader,
    default: Body,
    appFooter: AppFooter
  }
},

Nested Router vs Named Views

Nested Router : 특정 URL에 지정된 1개의 컴포넌트가 여러 개의 하위 컴포넌트를 갖는 것
Named Views : 특정 URL에 여러 개의 컴포넌트를 영역 별로 지정하여 렌더링 하는 것

Axios

Vue 에서 가장 많이 사용하는 HTTP 통신 라이브러리
아래와 같은 코드로 사용

methods: {
	fetchData: function() {
      axios.get('URL 주소');
    }
}

Vue Template

템플릿이란 뷰로 화면을 조작하기 위해 제공하는 문법
뷰 인스턴스에서 관리하는 데이터를 화면에 연결하는 데이터바인딩 화면 조작을 편하게 할 수 있는 디렉티브로 나뉜다.

Data Binding

{{}}를 활용해 인스턴스의 data, computed, props 속성을 연결한다.

<div>{{ str }}</div>
<div>{{ number + 1 }}</div>
<div>{{ message.split('').revers().join('') }}</div> 

Directive

HTML 태그 속성에 v- 접두사가 붙은 특별한 속성으로 화면의 DOM 조작을 쉽게할 수 있는 문법 제공

DOM : Document Object Model 웹 문서를 객체화한 개념

<!-- seen의 진위 값에 따라 p 태그가 화면에 표시 또는 미표시 -->
<p v-if="seen">Now you see me</p>
<!-- 화면에 a 태그를 표시하는 시점에 뷰 인스턴스의 url 값을 href에 대입 -->
<a v-bind:href="url"></a>
<!-- 버튼에 클릭 이벤트가 발생했을 때 doSomething이라는 메서드를 실행 -->
<button v-on:click="doSomething"></button>

Filters

화면에 표시되는 텍스트의 형식을 편하게 바꿀 수 있도록 고안된 기능이며 |를 통해 여러 개의 필터를 적용할 수 있다.

{{ message | capitalize }}

message 값에 capitalize 필터를 적용해 첫번째 글자를 대문자로

new Vue({
  filters: {
    capitalize: function(value) {
      if (!value) return "";
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
});

Single File Component

특정 화면 영역의 HTML, CSS, JS 코드를 한 파일에서 관리할 수 있는 방법.
파일의 확장자는 vue 이다.
싱글 파일 컴포넌트로 개발하려면 Webpack과 같은 번들링 도구가 필요하다.
싱글 파일 컴포넌트의 기본 골격

<template>
  <!-- HTML -->
</template>

<script>
  // Javascript
</script>

<style>
  /* CSS */
</style>

Vue Loader

싱글 파일 컴포넌트를 부러우저에서 실행할 수 있게 자바스크립트 파일로 변환해주는 웹팩 로더
뷰로더의 장점

• ES6지원
• style 태그와 template 태그에 대한 각각의 웹팩 로더 지원
• 각 .vue 컴포넌트의 스코프로 좁힌 css 스타일링 지원
• 웹팩의 모듈 번들링에 대한 지원과 의존성 관리가 제공
• 개발시 Hot Module Replacemnet(HMR) 지원

  HMR - 모든 종류의 모듈을 새로고침할 필요없이 런타임에 업데이트 가능하게 해주는 기능

Vue CLI

뷰 프로젝트를 생성하기 위한 명령어 도구. 아래의 명령어로 CLI를 시스템 레벨에 설치 가능

npm install -g @vue/cli

프로젝트 생성

vue create 프로젝트이름

웹 어플리케이션 실행

npm run serve