bootstrapVue Vue.js

bootstrap vue 

table filtering and loading 

https://hohanga.medium.com/bootstrapvue-table-filtering-and-loading-5e4610da341b

 

table row select event 

@row-clicked

https://stackoverflow.com/questions/51836186/get-row-element-form-row-clicked-event

 

 

부모 컴포넌트에서 자식 컴포넌트로 데이터 전달을 위한 prop 예시

https://velog.io/@devmin/Vue.js-props-basic

prop, emit 를 써서 해볼까 했는데, 컴포넌트 간 데이터 전달 후 이벤트까지 설정할 생각을 하니 vuex 를 적용하는게 빠르겠다는 생각을 했다. 

vuex 

공식문서 보는 게 빠르겠다. 

https://vuex.vuejs.org/guide/mutations.html

https://kamang-it.tistory.com/entry/Vue14vuex-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0?category=732314

 

v-model = v-bind + v-on

 

 

@ -> src 경로에서 시작한다는 의미 

 

.save() 사용해서 insert document

auto generate mongoDB id by mongoose

https://stackoverflow.com/questions/17899750/how-can-i-generate-an-objectid-with-mongoose

 

 

MongoServerError: E11000 duplicate key error collection: hybrix.certifications index: tableName_1 dup key: { tableName: null }        at D:\vue-study\vuejs-deep-dive\backend\node_modules\mongodb\lib\operations\insert.js:51:33     at D:\vue-study\vuejs-deep-dive\backend\node_modules\mongodb\lib\cmap\connection_pool.js:272:25     at handleOperationResult (D:\vue-study\vuejs-deep-dive\backend\node_modules\mongodb\lib\sdam\server.js:363:9)     at MessageStream.messageHandler (D:\vue-study\vuejs-deep-dive\backend\node_modules\mongodb\lib\cmap\connection.js:479:9)          at MessageStream.emit (events.js:400:28)     at processIncomingData (D:\vue-study\vuejs-deep-dive\backend\node_modules\mongodb\lib\cmap\message_stream.js:108:16)     at MessageStream._write (D:\vue-study\vuejs-deep-dive\backend\node_modules\mongodb\lib\cmap\message_stream.js:28:9)     at writeOrBuffer (internal/streams/writable.js:358:12)     at MessageStream.Writable.write (internal/streams/writable.js:303:10)     at Socket.ondata (internal/streams/readable.js:726:22) {   index: 0,   code: 11000,   keyPattern: { tableName: 1 },   keyValue: { tableName: null } }

-> mongoDB _id 가 하나만 저장되고, 새로 insert 가 안되는 문제가 있었다. 영문을 알 수 없는 일. 

collection drop하고 backend project 를 다시 실행해서 저장했더니 해결됨. 

이런일은 왜 꼭 나에게 생기는지 모르겠다. 

https://codingapple.com/forums/topic/mongoose-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%EA%B8%B0%EB%8A%A5%EC%A7%88%EB%AC%B8%EC%9E%85%EB%8B%88%EB%8B%A4/

 

rest api 에서 DELETE 는 payload body 가 없다. 

-> 일단은 post 사용해서 delete 처리를 해두었음. 나중에 더 알아보자. 

 

< bootstrap 에서 array 길이만큼 checkbox 만들기 >

bootstrapVue checkbox-group (offical) 

https://bootstrap-vue.org/docs/components/form-checkbox#checkbox-group-options-array

multiple dynamic checkgroup in Vue example 

https://getbootstrap.com/docs/5.1/components/list-group/#checkboxes-and-radios

-> 두가지 예제를 조합해서 만들어본다. 

 

load 버튼 클릭 시, 

checkbox 에서 선택한 컬럼을 column 모델에 저장 

 

< 안되는 이유 >

tableName 만 가져오면 안되는 이유 : 서로 다른 DB에 tableName 이 중복될 경우

DB명 + table명으로 사용했을 때 -> DB명이나 table명이 바뀌는 경우

 

sequelize-auto 로 model을 auto-generate 했으니 RDBMS 테이블을 가져오는 것은 가능 -> RDBMS Schema 를 mongoDB Schema 로 바꾸고, collection 을 생성하는 부분은 어떻게 할 수 있는지? 

mongoDB Schema 를 자동으로 만들어주는 것이 가능한가?

 

사용자 입력 컬럼을 5개 정도 미리 할당해놓고, key : value 값을 사용자가 지정할 수 있도록 만든다. 

 

TODO)

aws mysql static table (excel)

-> credential, data table

 

aws azure excel 등

 

 

Mongoose : MongoDB 의 ODM (Object Document Mapping)

-> MongoDB 의 Document 를 자바스크립트 객체로 바꾸어주는 역할

 

mongodb collection create without model 이렇게 찾아봄

https://coderedirect.com/questions/190347/querying-a-collection-without-passing-schema-in-mongoose

-> 골머리... 일단 나중에 하자. 

 

Static Table ( excel 파일 활용) 

.xlsx .csv 파일을 일단 사용할 예정 

(csv 파일은 sheet 하나만 사용가능한 것으로 알고 있다.)

load 버튼 클릭 시, file 내용을 grid로 보여주는 부분까지 구현해보자. 

 

전체 배열을 돌면서 key:value setting?? -> 이렇게까지 해야하나 싶은데, 하면 되기는 할 것 같다. 

-> 다른 방법을 찾아보았는데, 그냥 이렇게 하자. 

 

bootstrapVue table 

https://bootstrap-vue.org/docs/components/table

테이블에서 보여줄 fields 와 items 를 따로 설정할 수 있다. 

 

mongoDB 에 json object 그대로 저장한다. 

xlsx 활용 excel import 예시 

https://eblo.tistory.com/83

 

grid 에 binding 된 data 변경 시, grid refresh 하는 법 -> 안해도 되어서 그냥 냅뒀는데, 

this.$refs.xlsxDataTable.refresh();

이렇게 하면 되긴 되더라.