TIL_211224_Frontend
워밍업
개발 공부단계
1. 이게 뭐야?
2. 따라하기(내가 뭘한거지?) -> 처음 비개발자가 개발자가 될 때 넘기 힘든 문턱
3. 반복
4. 알 것 같은 느낌
5. 기출 변형
6. 익숙해짐(기계적인 코딩 가능 => 개발 가능)
7. 깨달음(보통 각 부분별로 온다 -> 허탈할 수 있음(이미 공부한 논리잖아?))
8. 신출
- 날짜 넣을 때 주의! UTC가 기준! 로컬타임 주의
오늘은 이어서 사용자 관리 화면을 만들었다.
일단 부서 선택화면을 만들었다.
bootstrap vue의 Form Selected 기능을 이용했다. 그 중에서도 option field names를 변경해주는 옵션을 이용했다.
난 거기에 선택을 요구하는 -- 부서를 선택하세요 -- 항목(비활성화)을 먼저 넣었다.
이제 어디에 붙여넣어야하는지는 알 것 같다.
<template>
<div>
<b-modal id="modal-user-inform" title="사용자 등록" @ok="onSubmit">
<b-form-group label-cols="3" label="부서PK" label-for="departmentId">
<b-form-select v-model="user.departmentId" :options="DepartmentList" value-field="id" text-field="name">
// value : 전송되는 정보, text : 사람이 보는 정보
<template #first>
<b-form-select-option :value="null" disabled>-- 부서를 선택하세요 --</b-form-select-option>
</template>
</b-form-select>
</b-form-group>
</template>
export default {
data() {
return {
DepartmentList: [
{ id: 1, name: '개발팀', code: 'dev', createdAt: '2021-12-01T00:00:00.000Z' },
{ id: 2, name: '영업팀', code: 'sales', createdAt: '2021-12-01T00:00:00.000Z' }
]
}
},
methods: {
onSubmit() {
console.log('onSubmit', { ...this.user })
}
결과
입력을 막는 방법 2가지
- readonly : 읽기 전용
- disabled : 아예 입력이 안됨(말 그대로 비활성화)
=> readonly 폼 전송에 있어 복잡할 수 있기 때문에 왠만하면 disabled 추천
선택적으로 disabled 해야할 시(ex 권한에 따라서) :disabled="변수 !== 'leader'" <- 리더로 로그인했을때만 풀림
store
- 등록/수정모드 전환될 수 있도록 등록
user.js 폴더 생성
import api from '../apiUtil'
export default {
state: {
// state에 사용할 모델이나 값을 선언 한다.
InputMode: null // 입력모드(등록:insert, 수정: update)
},
getters: {
// getters을 통해 state값을 호출 한다.
UserInputMode: state => state.InputMode
},
mutations: {
// mutations는 동기적이어야 함.(비동기 사용 불가)
setInputMode(state, data) {
state.InputMode = data
}
},
actions: {
// action은 비동기적 사용이 가능하다. (action에서 mutation을 호출하는 방법을 권장함)
// 입력모드 설정
actUserInputMode(context, payload) {
context.commit('setInputMode', payload)
}
}
}index.vue
onClickAddNew() {
// 1. 입력모드 설정
this.$store.dispatch('actUserInputMode', 'insert')
여기까지 하면 에러남
=> index.js에 등록
import Vue from 'vue'
import Vuex from 'vuex'
import Department from './models/department'
import User from './models/user' // user 추가
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
Department,
User // user 추가
}
})
수정에도 입력모드 설정 (user.js)
onClickEdit(id) {
// 1. 입력모드 설정
this.$store.dispatch('actUserInputMode', 'update') // update로 하자
// 입력 모달 띄우기
this.$bvModal.show('modal-user-inform')
console.log('onClickEdit', id)
},
computed 추가 (inform.vue)
<script>
export defalut {
...
computed: {
inputMode() {
return this.$store.getters.UserInputMode
}
},
...
}
</script>
삼항연산자로 사용자 등록/수정을 모드에 따라 바꿀 수 있다.(v-if="true"면 나옴)
<b-modal id="modal-user-inform" :title="`사용자 ${inputMode === 'insert' ? '등록' : '수정'}`" @ok="onSubmit">AAA ? b : c
AAA가 참(true)이면 b 아니면 c
(다만 이렇게 하면 등록 아니면 다 수정임)
이제 index에 뒀던 userlist 정보를 store로 옮긴다. (user.js)
import api from '../apiUtil'
export default {
state: {
// state에 사용할 모델이나 값을 선언 한다.
UserList: [],
InputMode: null // 입력모드(등록:insert, 수정: update)
},
getters: {
// getters을 통해 state값을 호출 한다.
UserList: state => state.UserList,
UserInputMode: state => state.InputMode
},
mutations: {
// mutations는 동기적이어야 함.(비동기 사용 불가)
setUserList(state, data) {
state.UserList = data
},
setInputMode(state, data) {
state.InputMode = data
}
},
actions: {
// action은 비동기적 사용이 가능하다. (action에서 mutation을 호출하는 방법을 권장함)
// user 리스트
actUserList(context, payload) {
console.log('actUserList', payload)
const UserList = [
{
id: 1,
departmentId: 1,
name: '홍길동',
userid: 'hong',
role: 'leader',
email: 'hong@email.com',
phone: '010-1234-5678',
createdAt: '2021-12-01T00:00:00.000Z',
Department: { id: 1, name: '개발팀', code: 'dev', createdAt: '2021-12-01T00:00:00.000Z' }
},
{
id: 2,
departmentId: 2,
name: '김길동',
userid: 'kim',
role: 'member',
email: 'kim@email.com',
phone: '010-9876-5432',
createdAt: '2021-12-01T00:00:00.000Z',
Department: { id: 2, name: '영업팀', code: 'sales', createdAt: '2021-12-01T00:00:00.000Z' }
}
]
},
...
검색창에 검색했을 때 userList가 뜨도록 한다.
index.vue
<template>
<div>
...
</b-table>
UserList: {{ userList }}
...
</div>
</template>
...
computed: {
userList() {
return this.$store.getters.UserList
}
},
...user.js
actUserList(context, payload) {
...
context.commit('setUserList', UserList) // 검색하면 payload(검색어) 대신 UserList가 뜸
},결과
computed에 넣은 userList를 테이블에 삽입한다.
<b-table striped hover :items="userList" :fields="fields">결과
부서 전환해도 데이터가 사라지지 않는다. 다만, 새로고침하면 store는 모두 날라가니 주의
store의 특징 : 한번 담으면 삭제하라 할 때까지 담아놓는다.
이제 검색을 누르지 않아도 처음 들어갔을 때 바로 로딩하기 위해 created에 담아준다.
index.vue
created() {
this.searchUserList()
},
모달에 뜨는 부서 리스트(selected)도 하드코딩에서 store로 옮겨줬다.
...
<!-- 부서 -->
<b-form-group label-cols="3" label="부서" label-for="departmentId">
<b-form-select v-model="user.departmentId" :options="departmentList" value-field="id" text-field="name"> //options 수정
<template #first>
<b-form-select-option :value="null">-- 부서를 선택해 주세요 --</b-form-select-option>
</template>
</b-form-select>
</b-form-group>
...
computed: {
inputMode() {
return this.$store.getters.UserInputMode
},
//부서 리스트 (이때 created에서 생성한 걸 사용)
departmentList() {
return this.$store.getters.DepartmentList
}
},
created() {
// this.user.rolo = 'member' // 사용자 권한 초기값 주기(이러면 수정을 할 수가 없음) => 인풋모드가 입력모드 일때만 동작하게 만들어야
this.setDefaultValues()
// 부서 리스트 불러오기 (이때 생성)
this.$store.dispatch('actDepartmentList')
},
...created에 넣으면 인덱스를 생성할 때 실행된다.
수정창에 정보 띄우기
...
// 초기값 선언
const stateInit = {
User: {
id: null,
departmentId: null,
name: null,
userid: null,
password: null,
role: null,
email: null,
phone: null,
updatedPwDate: null,
createdAt: null,
updatedAt: null
}
}
...
// 사용자 정보 조회
actUserInfo(context, payload) {
// console.log('actUserInfo', payload) // 기능 넣기 전 호출해보기
}
느낀 점
이젠 드디어 store가 대충 어떻게 돌아가는지 느낌은 대강 알 것 같다.(그 전까진 알듯모를듯)
vue를 쓰는 이유라해도 과언이 아닌 중요한 기능이니 계속 반복하며 지식을 업데이트해야겠다.
주말동안 장비 관리 페이지를 만들어야하는데 오타, 괄호, 대소문자! 주의하며 잘 만들어봐야겠다.