TIL_211222_Frontend

<b-table small hover striped //생략

여기 small, hover, striped는 모두 각각의 속성이다.

true인경우 속성만 쓴다.(small = small: true)

 

console.log 제거

console.log는 개발 끝난 후 반드시 주석/삭제처리한다

보안의 위험/디버깅의 어려움/pc의 부담

 

 

뷰 파일의 개발 순서

화면(기능)설계

store의 state, getter, mutation, actions 생성

화면에서 store(의 위에 적은 기능들) 호출

 

 

수정 화면 제작

동작 -

리스트 화면에서 수정 버튼을 클릭 -> 해당 부서의 상세 정보 모달 출력

상세정보 모달에서 항목 수정 후 ok 버튼 클릭 -> 업데이트 API 호출

모달은 닫히고 업데이트 후 결과에 따라 안내 메세지 출력 및 리스트 재검색

 

부서 정보 초기화

const stateInit = {
  Department: {
    id: null,
    name: null,
    code: null,
    description: null,
    createdAt: null,
    updatedAt: null
  }
}

//부서정보 초기화
    actDepartmentInit(context, payload) {
      context.commit('setDepartment', { ...stateInit.Department }) //stateInit.Department = null
    }

전개연산자

    actDepartmentInit(context, payload) {
      const dept = {
        ...stateInit.Department,
        name: 'aaa',
        etc: 'aaaa'
      }
 // ===
     actDepartmentInit(context, payload) {
      const dept = {
        id: null,
    	// name: null, (밑에 중복되어 삭제됨)
    	code: null,
    	description: null,
    	createdAt: null,
    	updatedAt: null,
        name: 'aaa', // name 값을 null에서 aaa로 변경
        etc: 'aaaa' // etc 항목 추가
      }

 

store 보충 설명

state : 그릇 | 그릇 자체
getters : 배달 | 배달하는 사람
mutations : 그릇에 요리 담기 | 그릇에 담는 행위(자)
actions : 요리하기 | 요리하는 행위 or 요리하는 행위를 호출(요리는 백엔드가)
=> 다 따로따로(컴퓨터에 선후관계는 존재하지 않음)

예시)
배달 어플
주문 : 요리 선택
배달 요청 : getters 요청

 

* 액션에 있는 걸 호출할 땐 자동완성이 안되므로 복붙(오타를 피하기 위해)

* 속성에 영향을 주는 것 :, ", @ 딱 3가지

* UTC 세계협정시(GMT랑 거의 비슷) ex) '2021-12-01T00:00:00.000Z'

* 실행 되는 지 확인하려면 해당 항목에 console.log 찍기 ex) console.log('actDepartmentUpdate', payload)

* 코드에서 이미 쓴 걸 갖다 쓰면서 이름 바꿀 때 updated -> deleted / update -> delete 처럼 잘 확인하고 바꿔야함! 대소문자도!

* 코딩할 때 하나하나 호출되나 확인하며 코딩하는 게 한꺼번에 많은 양을 코딩하는 것보다 오류를 줄일 수 있음(양이 많을수록 디버깅 힘들어짐)

 

 

크롬 확장프로그램 vue.js devtools

store의 정보를 볼 수 있음

주의 : 정보가 너무 많을 수 있음

 

 

사용자 관리 혼자 만들 때 체크

department -> user(대소문자 체크!)

부서 -> 사용자

모달 항목은 맨 처음엔 모두 input text로 통일

 

 

 

삭제 기능 제작

동작 - 리스트 화면에서 '삭제'버튼 클릭 시 confirm에 의해 삭제 처리를 한다.

(if문 이용)

 

 

 

- 느낀점

 

쉬는 시간에 bootstrap vue 페이지에서 혼자 navbar 삽입해봤다.

근데 처음엔 삽입(@click="$router.push(./dashboard')")하는 도중에 에러가 났다...

 v-on 에러('Avoid using JavaScript keyword as "v-on" value')가 나서 한꺼번에 삽입한게 문젠가 싶어 한줄한줄 쳤더니 작동한다.

 

store이 어떻게 작동하는 지 어제보단 조금 더 이해가 가는 것 같다. 확실히 반복하니까 아무래도 익숙해져서 그런가?