TIL_211227_Frontend

 

코드가 에러가 나면 에러 메세지를 보자. 답은 거기 있다.

 

 

오늘도 사용자 관리창을 이어서 만들었다.

 

 

null 값인 경우 처리(null이 들어가도 에러 뜨지 않게 해주기 위해)

      <template #cell(Department)="data">
        {{ data.item.Department && data.item.Department.name }} // 앞에가 true면 뒤에가 출력됨
      </template>

모든 경우에 있어 테스트 늘 해야됨

 

 

watch(값이 변경되면 감지)

inform.vue

...
export default {
  data() {
    return {
      user: {
        id: null,
        departmentId: null,
        name: null,
        userid: null,
        password: null,
        role: null,
        email: null,
        phone: null,
        updatedPwDate: null,
        createdAt: null,
        updatedAt: null
      },
      userRole: {
        default: 'member', // 기본값
        options: [
          { value: 'leader', text: '팀장' },
          { value: 'member', text: '팀원' }
        ]
      }
    }
  },
  computed: {
    infoData() {
      return this.$store.getters.User
    },
    inputMode() {
      return this.$store.getters.UserInputMode
    },
    //부서 리스트 (이때 created에서 생성한 걸 사용)
    departmentList() {
      return this.$store.getters.DepartmentList
    }
  },
  watch: {
    infoData(value) {
      // value: 위에서 변경된 값
      console.log('watch.infoData', value)
      this.user = { ...value } // 전개연산자
    }
  },
  ...

 

 

신규입력 창 내용 초기화

user.js

    // 초기화
    actUserInit(context, payload) {
       context.commit('setUser', { ...stateInit.User }) // 현재 값만 들어감/setUser에 statInit.User 요소를 풀어서 넣어줌=전부 복붙(null값이 됨)
      // context.commit('setUser', stateInit.User) // 메모리 주소 복사(User가 변경되면 변경된 값이 들어감)
    },

index.vue

    onClickAddNew() {
      // 1. 입력모드 설정
      this.$store.dispatch('actUserInputMode', 'insert')

      // 초기화
      this.$store.dispatch('actUserInit') // 순서는 모달 뜨기 전

      // 입력 모달 띄우기
      this.$bvModal.show('modal-user-inform')
      console.log('onClickAddNew')

 

 

사용자 등록 시 데이터 전송 처리

user.js

    // 등록
    actUserInsert(context, payload) {
      console.log('actUserInsert', payload) // 적은 정보가 payload를 통해 넘어옴
    },
    
    // 백엔드 호출 (결과값 수신)(watch에서 감지하게 해주기 위해 setTimeout 사용)
      setTimeout(() => {
        const insertedResult = 1
        context.commit('setInsertedResult', insertedResult)
      }, 300) // state값의 변화를 감지하기 위하여 일부러 지연 시켰다.
},

inform.vue

  methods: {
    onSubmit() {
      // console.log('onSubmit', { ...this.user })
      if (this.inputMode === 'insert') {
        this.$store.dispatch('actUserInsert', { ...this.user }) // 입력모드일때만 동작
      }
    },

 

 

전개 연산자 언제 써야할까

1. 전개 할때

2. 값만 복사 할때

3. 특정 항목의 값을 수정 할때

4. (없던)항목이 추가 될때

const user = {
  id: 1,
  name: 'kim'
}

const user2 = {
  ...user
}

const user3 = user

user.name = 'park'

const user4 = {
  ...user,
  name: 'choi'
}

const user5 = {
  ...user,
  department: 'dev'
}

console.log('user', user)
console.log('user2', user2)
console.log('user3', user3)
console.log('user4', user4)
console.log('user5', user5)

 

 

헤더에 NavBar 삽입

header.vue

<template>
  <div>
    <b-navbar toggleable="lg" type="light" variant="light">
      <b-navbar-brand href="#">VUEPROJ</b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item href="#">메뉴1</b-nav-item>
          <b-nav-item href="#">메뉴2</b-nav-item>
        </b-navbar-nav>

        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
          <b-nav-item-dropdown right>
            <!-- Using 'button-content' slot -->
            <template #button-content>
              <em>User</em>
            </template>
            <b-dropdown-item href="#">Profile</b-dropdown-item>
            <b-dropdown-item href="#">Sign Out</b-dropdown-item>
          </b-nav-item-dropdown>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>

 

 

디버깅

위 항목을 삭제하고나서 다음에 또 삭제를 누르면 null 값이 들어가며 삭제 실패가 한번 뜨고 성공이 떴다.

하나씩 지워가며 확인해봤는데 다행히 문제를 찾았다.

 

index.vue

 deletedResult(value) {
      console.log('watch.deletedResult', value)
      // 삭제 후 처리

      if (value !== null) {
        // null 값이 아닐 때 빼먹음!!!
        if (value > 0) {
          // 삭제가 성공한 경우

          // 1. 메세지 출력
          this.$bvToast.toast('삭제 되었습니다.', {
            title: 'SUCCESS',
            variant: 'success',
            solid: true
          })

          // 2. 리스트 재 검색
          this.searchUserList()
        } else {
          // 삭제가 실패한 경우
          this.$bvToast.toast('삭제가 실패하였습니다.', {
            title: 'ERROR',
            variant: 'danger',
            solid: true
          })
        }
      }
    }

여기서

if (value !== null)

이걸 빼먹었다! (조건 : null 값이 아닐 때)

null 값이 힌트였나보다.

 

 

이렇게 만든 프론트를 백엔드, db랑 연동 시키기

먼저 백엔드 확인

postgres : 확인한 DB 생성

DBeaver : postgres에서 생성한 DB 연결

준비 완

백엔드 설치(npm install) 및 실행(npm run start => 개발할 땐 npm run dev를 많이 쓴다 이번엔 예외적으로 start로 실행)

시퀄라이즈 orm

연동 성공

쿼리

쿼리 날릴 때 위치 주의!

지정한 row만 실행

d는 department의 alias

커서를 ;의 안쪽으로 옮긴 다음 ctrl-enter 누르면 해당 쿼리 실행(전체 쿼리 실행 시 큰일날 수 있음)

 

 

등록/수정 잘 작동한다.

 

느낀 점

백엔드랑 프론트엔드 연동...

뭔가 코드는 더 간단하긴 한데

좀 더 봐야겠다ㅎㅎ