[Vue] 1일차_몇가지 개념정리 및 참고사이트 (진행중...)

Vue instance 와 Dom 을 연결해야 한다. '-->  뷰 라이브러리 : $mount() 사용
 
## RealGrid (1.0)
그리드의 컬럼의 코드 값을 코드 명 등으로 보여주려고 할 때,
  >> https://support.realgrid.com/tickets/no/23102

https://support.realgrid.com/tickets/no/23102

  >> https://sanga88.tistory.com/entry/displayCallback-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%ED%99%94%EB%A9%B4-%ED%91%9C%EC%8B%9C-%EA%B0%92-%EB%B3%80%EA%B2%BD

displayCallback 이용하여 화면 표시 값 변경

>> 코딩 예

---

---

그리드의 Data Field 를 다음과 같이 구성

========
========
<script setup lang="ts">
import { ConfigObject, DataFieldInput, DataValues, ValueType, GridBase, GridCell, LinkCellRenderer, DataProviderBase} from 'realgrid'
</script>
==========
그리드영역
==========
const fileds: DataFieldInput[] = [

  ...

  { fieldName: 'aaa', dataType: valueType.TEXT, valueCallback: getComCodeName },

  ...

]

======
선언부 (예: 코드: CODE0001)
======
//getComCodeName
const getComCodeName = (_ds: DataProviderBase, _rowId: number, _fieldName: string, fields: string[], values: any[]) => {
  return getComCodeNames('CODE0001', values[fields.indexOf('aaa')]
}


=============================================
공통부 bbb.ts
@param {string} comCdId
@param {(string[] | string)} [comCdVals='']
@return {(string[] | string)}
=============================================
const getComCodeNames = (comCdId: string, comCdVals: string[] | string = '') => {
  const tmpData = commonCodeList.value[comCdId]
  
  if(typeof comCdVals == 'string') {
    retrun tmpData.find(el => el.comCdVal === comCdVals)?.comCdValNm ?? ''
  } else if (Array.isArray(comCdVals)) {
    retrun comCdVals.map(comCdVal => tmpData.find(el => comCdVal === el.comCdVal)?.comCdValNm ?? '')
  } else {
    return ''
  }
  
}

'===>

const fileds: DataFieldInput[] = [
  ...
  { fieldName: 'aaa', dataType: valueType.TEXT, valueCallback: getComCodeName },
  ...
]
 
##. 주교재 참고 사이트
예제 파일 : https://github.com/gilbutITbook/080384 or https://github.com/gilbutITbook/080384 >> 자료실
 

GitHub - gilbutITbook/080384: <코딩 자율학습 Vue.js 프런트엔드 개발 입문> 소스 코드 저장소입니다.

코딩 자율학습단
https://github.com/gilbutITbook/080384

GitHub - gilbutITbook/080384: <코딩 자율학습 Vue.js 프런트엔드 개발 입문> 소스 코드 저장소입니다.

https://www.sucoding.kr/

수코딩 | 누구나 쉽게 배우는 온라인 코딩 스쿨

https://www.youtube.com/@sucoding

수코딩

 
##. Referral Sites & Blog...
https://ko.vuejs.org/guide/essentials/template-syntax