🎄메리크리스마스🎄

1. Vue.js Project 생성

vue create todoapp

미리 Git Clone 시켜놓고 그 폴더 안에 Vue.js 프로젝트를 생성한다.

(Git Clone : GitHub Code 복사 → VSCode에서 Ctrl + Shift + P → Git: Clone → GitHub Code 붙여 넣기)

cd todoapp
npm run serve

프로젝트를 실행시켜보고 실행이 잘 된다면

Defalut 파일 src/component/HelloWorld.vue 파일을 삭제한다.

src/App.vue에 HelloWorld.vue 관련 내용을 다 지운다. (아래 주석 부분)

<!-- src/App.vue -->
<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>

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

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

2. Components 생성 및 import (TodoInput, TodoList, TodoItem)

src/components 아래에 3개의 vue 파일을 만들어주고,

일단 파일 내용은 <h3> 태그로 파일명만 작성을 해둔다.

<!-- src/App.vue -->
<template>
  <div id="app">
    <TodoInput/>
    <TodoList/>
  </div>
</template>

<script>
import TodoInput from '@/components/TodoInput';
import TodoList from '@/components/TodoList';

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

TodoInput과 TodoList 파일은 App.vue에 import 시켜주고,

<!-- src/components/TodoList.vue -->
<template>
    <div>
        <h3>Todo List</h3>
        <TodoItem/>
        <TodoItem/>
        <TodoItem/>
    </div>
</template>

<script>
import TodoItem from '@/components/TodoItem';

export default {
    components: {
        TodoItem
    }
}
</script>

<style>

</style>

TodoItem은 TodoList에 import 시켜준다.

일단 예시로 TodoItem을 3개 표시해줘 봤다.

저렇게 import 시키고 실행을 하면 이런 화면이 출력될 거다.

3.  Vuetify 추가 후 UI 수정

이제 각자 파일명이 아닌 역할을 주기로 😉

먼저 TodoInput.vue 파일에 <input>과 <button>을 생성한다.

<!-- src/components/TodoInput.vue -->
<template>
    <div>
        <input type="text"/>
        <button>Add</button>
    </div>
</template>
<!-- script, style 그대로 -->

TodoList.vue에는 <h3> 제목 태그를 지워주고 <TodoItem>만 담는다.

<!-- src/components/TodoList.vue -->
<template>
    <div>
        <TodoItem/>
        <TodoItem/>
        <TodoItem/>
    </div>
</template>
<!-- script, style 그대로 -->

TodoItem.vue에는 <button> 두 개와 기타 등등 생성 😋

<!-- src/components/TodoItem.vue -->
<template>
    <div>
        <h5>#1</h5>
        <h3>Todo Title</h3>
        <button>Edit</button>
        <button>Delete</button>
    </div>
</template>
<!-- script, style 그대로 -->

이렇게 나오면 된다.

근데 UI가 마음에 안들어서 이제야 Vuetify 추가... ^^

Vuetify 추가하면서 App.vue가 아예 바뀌어버려서

App.vue에 import 했던 거 다 사라짐!

(vuetify 추가할 거면 미리 하기 🙄)

파일들을 Vuetify Tag로 바꾸고 코드를 다시 수정해보겠습니다 ,,, ^^

<!-- src/App.vue -->
<v-main>
  <TodoInput/>
  <TodoList/>
</v-main>
.
.
.
<script>
import TodoInput from '@/components/TodoInput';
import TodoList from '@/components/TodoList';

export default {
  name: 'App',

  components: {
    TodoInput,
    TodoList
  },

  data: () => ({
    //
  }),
};
</script>

<!-- src/components/TodoInput.vue -->
<template>
    <v-container fluid>
        <v-row class="mt-6" justify="center">
            <v-col cols="4">
                <v-text-field outlined></v-text-field>
            </v-col>
            <v-col cols="1">
                <v-btn block x-large color="primary">Add</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
export default {

}
</script>

<style>

</style>

<!-- src/components/TodoList.vue -->
<template>
    <v-container>
        <TodoItem/>
        <TodoItem/>
        <TodoItem/>
    </v-container>
</template>

<script>
import TodoItem from '@/components/TodoItem';

export default {
    components: {
        TodoItem
    }
}
</script>

<style>

</style>

<!-- src/components/TodoItem.vue -->
<template>
    <v-container fluid>
        <v-row class="mb-3 text-center" justify="center">
            <v-col cols="1">
                #1
            </v-col>
            <v-col cols="2">
                Todo Title
            </v-col>
            <v-col cols="1">
                <v-btn block color="primary">Edit</v-btn>
            </v-col>
            <v-col cols="1">
                <v-btn block color="error">Delete</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
export default {

}
</script>

<style>

</style>

저장 후 실행하면 Vuetify Tag가 적용된 화면을 볼 수 있다.

다른 UI 작업은 하지 않고, 예제라 간단한 Vuetify 속성만 사용했다.

다음 글은 Vuex 연결해서 store 관리까지 😊

React가 1등이지만 Vue.js가 버전 2와 3으로 분할된 것을 고려하면 Vue.js가 사실상 선두업체라고 한다.

1. React

React는 가장 인기있는 프레임워크다.

인지도 측면 외에도, 사실상 참고 자료를 찾게 되면 가장 많이 보인다.

그리고 많은 양의 툴과 확장 라이브러리들이 존재하기 대문에 개발자가 쉽게 재사용할 수 있다.

처음엔 Facebook에서 시작해서, 현재까지 유지관리되고 있다.

이런 측면에서 React를 사용하는 개발자나 기업들이 React의 지속적인 발전을 기대할 수 있다.

JSX와 ES6를 사용하며, JavaScript에 익숙하지 않으면 배우기까지 많은 시간과 노력을 할애한다.

때문에 진입장벽이 높은 편이라고 할 수 있다.

2. Vue.js

Vue.js는 다른 프레임워크와에 비해 가볍고 유연한 편이다.

일부 화면 개발도 가능하며, SPA(Single Page Application) 개발도 지원한다.

Vue.js는 HTML 및 ES6에 대한 기본 지식만을 사용하여 개발하는 데 비교적 많은 시간 절약이 가능하다.

간단한 Vue 프로젝트는 <script> 태그로 등록하여 별도의 변환작업 없이 사용할 수도 있고

Vue-router를 이용하여 SPA도 개발할 수 있다.

이렇게 개발자가 적용 범위를 선택할 수 있어서 진입장벽이 낮다고 얘기하고 있다.

Vue.js는 React와 Angular와 달리 1명의 개발자 Evan You에 의해서 제작되었다.

아직 React, Angular와 비교할 때 꽤 작은 시장 점유율을 가지고 있다.

3. Angular

Angular는 MVVM 패턴을 사용하며, 개발 환경 설정에 필요한 패키지들이 많고,

JavaScript의 상위 언어인 TypeScript등 알아야할 기술이 많으며,

API를 직접 만들어서 사용해야한다. Angular는 구글에서 지원해주고 있다.

4. 정리

1. Vue 설치

npm install -g @vue/cli

위 명령어로 vue 설치되어 있는 상태에서 Vuetify 추가해서 사용해보기!

2. Vuetify 추가

npm install vuetify

node_modules 밑에 vuetify가 생성된다.

이제 vue에 추가해서 사용하면 된다.

3. Vuetify 사용 설정

vue add vuetify

src/main.js 파일의 변경된 부분

src/plugins/vuetify.js 파일 생성

틈틈이 Vue 관련 글도 올려야지 🤩

좀비처럼 살아있는 8080 Port를 cmd창에서 kill 시켜버리자 🤢

1. 특정 Port (ex. 8080) 조회하기

netstat -ao | findstr 8080

findstr을 안하고 조회하면 너무 많은 양이 나와서 8080만 조회했다.

내가 필요한건 8080 PID 23744이기 때문에 😐

- 참고 : 로컬 기준이므로 PID 값은 유동적으로 변한다 !

2. 조회된 Port Kill

taskkill /f /pid 23744

응 잘가 다시는 오지마 🐣

Eclipse에서 SVN 사용 중 Commit이 안 되는 오류가 생겨서 해결 후 적는 기록

사실 간단해서 찾아보는데 시간을 투자한 건 아니지만

앞으로 이것저것 열심히 기록하려고 시작해봄 😜

1. 오류 메세지

 Item is out of date
svn: While preparing 'C:\...' for commit
svn: File '/branch/...' is out of date

    Working copy is not up-to-date
svn: Commit failed (details follow):
svn: File 'C:\...' is out of date
Item is out of date
svn: While preparing 'C:\...' for commit
svn: File '/branch/...' is out of date

2. 원인

클라이언트가 가지고 있는 파일의 정보가 너무 오래되어서 뜨는 오류라고 한다.

3. 해결 방법

헤더 정보를 최신화한 후 다시 커밋하기 😊

프로젝트 우클릭 → Team → Update to HEAD → Commit