🎄메리크리스마스🎄

1. Delete Todo 코드 작성하기

먼저 데이터를 store에서 관리 중이니까 actions와 mutations를 작성해야 한다.

// src/store/index.js
mutations: {
    mutationsAddTodo(state, todo) {
      state.todos.push(todo);
      console.log(todo);
    },
    mutationsDelTodo(state, id) {
      state.todos = state.todos.filter((todo) => todo.id != id);
    }
  },
  actions: {
    actionsAddTodo({commit}, todo) {
      commit('mutationsAddTodo', todo);
    },
    actionsDelTodo({commit}, id) {
      commit('mutationsDelTodo', id);
    }
  },

actions에 actionsDelTodo 함수를 작성하고, todo의 id를 받는다.

mutations에 mutationsDelTodo에서는 해당 id가 아닌 것만 가져오는 필터 함수를 짠다.

// src/components/TodoItem.vue
export default {
    props: {
        todo: {}
    },
    methods: {
        ...mapActions(['actionsDelTodo'])
    },
}

TodoItem에 mapActions를 작성하여 store actions와 연결해주고

<!-- src/components/TodoItem.vue -->
<v-btn @click="actionsDelTodo(todo.id)" block color="error">Delete</v-btn>

작성해둔 Delete 버튼에 클릭 이벤트를 추가하고 todo의 id를 넣어주면 잘 작동한다 !

2. Edit Todo 코드 작성하기

이제 Add와 Delete까지 가능하니 Edit 기능만 넣으면

기본적인 TodoList App 작성은 끝이 난다 !

// src/components/TodoItem.vue
<script>
import { mapActions } from 'vuex';

export default {
    props: {
        todo: {}
    },
    data() {
        return {
            editing: null
        }
    },
    methods: {
        ...mapActions(['actionsDelTodo'])
    },
}
</script>

TodoItem에 editing이라는 변수를 하나 선언해둔다.

저걸로 EDIT라는 버튼을 눌렀을 때 편집 박스를 켜고 끄는 상태를 관리할 거다.

<!-- src/components/TodoItem.vue -->
<template>
    <v-container fluid>
        <v-row class="mb-3" justify="center" align="center">
            <v-col cols="4">
                <h3 v-if="!editing">{{ todo.title }}</h3>
                <v-text-field
                    label="Edit"
                    outlined
                    dense
                    hide-details
                    v-else
                ></v-text-field>
            </v-col>
            <v-col cols="1">
                <v-btn @click="editing = !editing" block large color="primary">
                    {{ editing ? 'Save' : 'Edit' }}
                </v-btn>
            </v-col>
            <v-col cols="1">
                <v-btn @click="actionsDelTodo(todo.id)" block large color="error">Delete</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

그리고 v-if와 v-else를 사용하여 todo.title을 보여줄 건지,

편집 텍스트 필드를 보여줄 건지 작성한다.

🚨 outlined, dense, hide-details는 v-text-field의 style 속성

v-btn에 text도 editing이 true일 때는 Save, false일 때는 Edit가 뜨게 작성하고

클릭 이벤트를 달아서 누를 때마다 true, false가 바뀌게 작성한다.

🚨 삼항연산자 → 조건 ? true : false

state에 저장해놓고 삭제, 수정을 하려면 사용자 입력값을 받아야 하는데

// src/components/TodoItem.vue
data() {
    return {
        todoText: '',
        editing: null
    }
},

script 안에 data에 todoText를 선언해둔다.

<!-- src/components/TodoItem.vue -->
<v-text-field
    v-else
    v-model="todoText"
    label="Edit"
    outlined
    dense
    hide-details
></v-text-field>

위에서 선언한 todoText를 같은 파일 내의 text field에 v-model로 연결시켜둔다.

그러면 입력값이 v-model로 연결해둔 todoText로 들어가게 된다.

<!-- src/components/TodoItem.vue -->
<v-col cols="1">
    <v-btn @click="modTodo(todo)" block large color="primary">
        {{ editing ? 'Save' : 'Edit' }}
    </v-btn>
</v-col>

아까 만들었던 Save / Edit button에 클릭 이벤트를 modTodo라는 함수에 todo를 넣은 걸로 변경한다.

// src/components/TodoItem.vue
methods: {
    ...mapActions(['actionsDelTodo', 'actionsModTodo']),
    modTodo(todo) {
        this.editing = !this.editing;
        if(this.editing) this.actionsModTodo(todo);
        else todo.title = this.todoText;
    }
},

같은 파일에 mapActions에 actionsModTodo를 추가하고,

modTodo에는 editing을 true, false로 바꿔주는 구문과

if(this.editing)으로 값을 확인하고 actions로 넘어갈 건지,

todo.title을 todoText로만 바꿔줄 건지 비교 작성한다.

// src/store/index.js
mutations: {
  mutationsAddTodo(state, todo) {
    state.todos.push(todo);
    console.log(todo);
  },
  mutationsDelTodo(state, id) {
    state.todos = state.todos.filter((todo) => todo.id != id);
  },
  mutationsModTodo(state, todo) {
    let idx = state.todos.findIndex(x=>x.id == todo.id);
    if(idx > -1) {
      state.todos[idx] = todo;
    }
  }
},
actions: {
  actionsAddTodo({commit}, todo) {
    commit('mutationsAddTodo', todo);
  },
  actionsDelTodo({commit}, id) {
    commit('mutationsDelTodo', id);
  },
  actionsModTodo({commit}, todo) {
    commit('mutationsModTodo', todo);
  }
},

store 내의 actions와 mutations에 Mod관련 함수를 작성한다.

mutationsModTodo에서는 받은 todo의 아이디와 같은 값을 state에서 찾고,

그 Index에 해당하는 todo를 받은 todo로 교체해주면 수정 완료 !

3. 결과

다음은 뭘 만들어볼까 🤔

이전글보기

1. Vuex 추가하기

vue add vuex

서버가 켜져있다면 서버를 종료시키고(VSCode 단축키 : Ctrl + c)

현재 프로젝트에 vuex를 추가한다.

성공적으로 추가되고나면 src 폴더 아래에 store 폴더가 새로 생겨있다.

이제 프로젝트에서 상태관리는 이 store로 하면 된다!

🤔 vuex도 한번 정리해야겠다 🤔

2. Vuex 활용하기

src/store/index.js의 기본 형태는 이렇게 생겼다.

회사에서는 관리해야 할 종류가 많아서 따로 모듈로 빼서

index.js를 통해 관리하는 방식으로 진행중이지만,

지금은 관리 할 데이터 종류가 많지않으니 한곳에서 관리하도록 한다.

// index.js state
state: {
    todos: [
      {
        id: 1,
        title: 'One'
      },
      {
        id: 2,
        title: 'Two'
      },
      {
        id: 3,
        title: 'Three'
      }
    ]
  }

state에 미리 담겨있을 3개의 데이터를 작성하고,

// index.js getters, mutations, actions
getters: {
  allTodos: (state) => state.todos,
},
mutations: {
  mutationsAddTodo(state, todo) {
    state.todos.push(todo);
    console.log(state.todos);
  }
},
actions: {
  actionsAddTodo({commit}, todo) {
    commit('mutationsAddTodo', todo);
  }
}

getters에는 state에 저장된 모든 todos를 가져올 allTodos를 작성했다.

mutations에는 actions에서 넘어온 데이터를 state에 push할 mutationsAddTodo를 작성했다.

actions에는 vue 소스에서 이거 저장시켜!하고 호출될 actionsAddTodo를 작성했다.

commit('mutationsAddTodo', todo)를 실행하면 mutations에 해당 이름의 함수를 실행시킨다.

- mutations에는 순차적인 로직을 작성하고,

  actions에는 비순차적 또는 비동기 처리 로직을 작성한다.

  이 부분도 vuex 정리하면서 다룰 예정!

함수 앞에 mutations와 actions는 알아보기 쉽게 붙여놓은것이므로 생략해도 무방하다.

<!-- 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 @click="actionsAddTodo('12345')" block x-large color="primary">Add</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
import { mapActions } from 'vuex';

export default {
    methods: {
        ...mapActions(['actionsAddTodo'])
    },
}
</script>

TodoInput에 vuex의 actions를 import 시키면 ...mapActions라는 이름으로 호출할 수 있다.

import 시키지 않더라도 this.$store.dispatch('actionsAddTodo')로 호출 가능하다.

vue → store actions 호출 : dispatch
actions → mutations 호출 : commit

Add 버튼을 누르면 actionsAddTodo를 '12345'라는 데이터를 넣어서 실행시킨다.

mutatilnsAddTodo에서 state todos에 push 시키고 state의 todos를 콘솔로 찍어보면

같이 넘겨줬던 12345가 담겨있는것을 확인할 수 있다.

그렇다면 이제 실제로 사용자가 text-field에서 적은 값을 넘겨봅시다 😘

<!-- src/components/TodoInput.vue -->
<script>
import { mapActions } from 'vuex';

export default {
    data() {
        return {
            todoText: ''
        }
    },
    methods: {
        ...mapActions(['actionsAddTodo'])
    },
}
</script>

먼저 TodoInput script에 사용자 입력값을 받을 빈 todoText를 만들어준다.

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

그리고 텍스트 필드 태그에 v-model에 todoText를 넣어준다!

그러면 텍스트 필드가 todoText를 바라보게 되고,

그 값을 버튼을 누르고 actionsAddTodo가 실행될때 같이 넘겨준다.

데이터 입력 후 버튼을 누르고 콘솔에 찍힌 값을 확인해보면 잘 넘어온다!

3. UUID로 ID 부여하기

npm i --save uuid

사용자가 입력하는 todoText는 store에서 title로 관리될 것이고,

ID에는 고유한 key값을 넣기 위해서 UUID를 설치한다.

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

<script>
import { mapActions } from 'vuex';
import { v1 } from 'uuid';

export default {
    data() {
        return {
            todoText: ''
        }
    },
    methods: {
        ...mapActions(['actionsAddTodo']),
        addTodo() {
            this.actionsAddTodo({
                id: v1(),
                title: this.todoText
            });
        }
    },
}
</script>

uuid를 import 시켜주고, addTodo()라는 함수를 만들어서,

actionsAddTodo를 실행할때 id와 title을 넣어서 보내주게 작성한다.

버튼 클릭시에도 addTodo가 실행되게 수정해준다.

test1이라는 같은 값을 두번 넘겨줬지만 id는 고유하게 부여되기 때문에

매번 다른 id가 넘어가는것을 확인할 수 있다.

4. Text Field 초기화 및 TodoList, TodoItem 수정

기존에는 Add 버튼을 눌러서 데이터가 넘어가지만 텍스트 필드에 데이터가 그대로 남아있는 상태였다.

하지만 Add 버튼을 누르면 store에 저장이 되기때문에, 텍스트 필드에 데이터를 초기화 시켜줄 거다!

<!-- src/components/TodoInput.vue -->
<v-text-field @change="todoTextChg" :value="todoText" outlined></v-text-field>

먼저 TodoInput.vue에 있는 텍스트 필드 속성을 좀 바꿔준다.

@change="todoTextChg" 속성을 추가해서 텍스트 필드의 값이 바뀔때마다 todoTextChg를 실행시키도록 한다.

// src/components/TodoInput.vue
methods: {
    ...mapActions(['actionsAddTodo']),
    todoTextChg(e) {
        this.todoText = e;
    },
    addTodo() {
        this.actionsAddTodo({
            id: v1(),
            title: this.todoText
        });
        this.todoText = '';
    }
},

methods에 todoTextChg 함수를 하나 만들고 todoText 값을 e로 바꿔준다.

그리고 addTodo가 실행될때 actionsAddTodo가 실행되고나서 todoText값을 빈값으로 바꿔주면

abcd라는 값을 입력하고 Add 버튼을 누르면

콘솔에 찍힌 데이터에 abcd가 찍혀있고

텍스트 필드는 값이 초기화가 된다.

이제 기존에 TodoList.vue에서 하드코딩으로 넣어놨던 데이터를

store getters allTodos를 통해 가져와서 넣어줄거다.

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

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

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

<!-- src/components/TodoList.vue 변경 후 -->
<template>
    <v-container>
        <v-row v-for="todo in allTodos"
               :key="todo.id"
        >
            <TodoItem :todo='todo'/>
        </v-row>
    </v-container>
</template>

<script>
import TodoItem from '@/components/TodoItem';
import { mapGetters } from 'vuex';

export default {
    components: {
        TodoItem
    },
    computed: {
        ...mapGetters(['allTodos'])
    },
}
</script>

v-container 안에 v-row를 넣어주고, mapGetters로 불러온 allTodos의 수만큼 for문을 돌린다.

allTodos의 수만큼 TodoItem이 나올거고, 자식 컴포넌트인 TodoItem에 todo를 넣어준다.

<!-- src/components/TodoItem.vue -->
<template>
    <v-container fluid>
        <v-row class="mb-3" justify="center" align="center">
            <v-col cols="4">
                {{ 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 {
    props: {
        todo: {}
    }
}
</script>

TodoItem에 props를 만들어줘서 부모 컴포넌트에서 받은 값인 todo를 선언해둔다.

{{ todo.title }}을 적어두면 부모에게 받은 todo의 title을 출력할 수 있게 된다.

5. 결과 🤣

store index.js에 처음 적어둔 One Two Three가 먼저 나오고,

입력한 Four Five도 잘 Add 된다.

삭제 기능은 다음 글에서 😊

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