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 })
    }

 

결과

 

콘솔 로그도 정상(개발팀 - 1, 영업팀 - 2)

 

 

입력을 막는 방법 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')

 

여기까지 하면 에러남

action을 못찾겠다!

 

=> 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를 쓰는 이유라해도 과언이 아닌 중요한 기능이니 계속 반복하며 지식을 업데이트해야겠다.

주말동안 장비 관리 페이지를 만들어야하는데 오타, 괄호, 대소문자! 주의하며 잘 만들어봐야겠다.