공지사항 [중요!] Google Chrome 정책 변경으로 인한, Wijmo 업그레이드 및 코드 수정 안내
페이지 정보
작성자 MESCIUS
작성일 2024-03-13 15:50 조회 201회
댓글 0건
본문
관련링크
2024년 07월 30일, DOMNodeInserted 이벤트가
Chrome에서 강제 삭제됩니다.
DOM 변화를 감지하기 위해 사용되었던, Mutation Events(돌연변이 이벤트)가
다가오는 2024년 7월 30일 Chrome(크롬) 127버전부터 Google Chrome(크롬) 정책 변경으로 인해 완전히 삭제됩니다.
*크롬 정책 변경에 대한 자세한 내용은 아래 Google의 Chrome(크롬) 블로그 글을 참고해주세요.
삭제되는 Mutation Events(돌연변이 이벤트) 리스트
- DOMNodeInserted
- DOMNodeRemoved
- DOMSubtreeModified
- DOMCharacterDataModified
- DOMNodeInsertedIntoDocument
- DOMNodeRemovedFromDocument
- (최신 브라우저에서는 지원되지 않음)DOMAttrModified
- (최신 브라우저에서는 지원되지 않음)DOMAttributeNameChanged
- (최신 브라우저에서는 지원되지 않음)DOMElementNameChanged
Chrome 정책 변화가 Wijmo 컨트롤에 미치는 영향
(*2023 V1 포함, 하위 버전 영향)
Wijmo의 컨트롤에서 사용자가 원하는 형태로 컨트롤을 사용자 정의할 수 있도록 지원하고자 Chrome(크롬)에서 제공하는 DOMNodeInserted를 이용하고 있습니다.
(예시: FlexGrid의 각 열의 Column(열)의 이름이나 속성을 사용자 정의)
이로 인하여, 여러분의 웹 애플리케이션에 사용자 정의된 Wijmo 컨트롤을 개발하고 적용하신 경우, 아래와 같은 Chrome(크롬) 콘솔(Console) 경고 문구가 나타날 수 있으며, 반드시 적절한 조치를 취해야 합니다.
2024년 7월 30일 이후에는, Google Chrome의 강제적인 정책 변화로 Wijmo의 일부 컨트롤이 Chrome(크롬)브라우저에서 정상 작동하지 않을 수 있습니다.
[크롬 브라우저 콘솔 메시지]
[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.
Chrome 정책 변경으로 인한, 이슈 해결 방법.
Wijmo 최신버전(2023v2) 업그레이드가 필요합니다!!
*Chrome(크롬) 이슈를 해결하기 위해서 Wijmo 업그레이드를 강력 권장합니다.
메시어스에서는 크롬(Chrome) 브라우저의 강제적인 정책 변화에 대응하고, Wijmo를 사용하는 고객분들의 불편함을 해소시키기 위해 신속하게 해당 이슈를 개선하고자 노력해왔으며, Wijmo 2023v2 (5.20232.939)부터 해당 이슈에 대한 업데이트가 적용되었습니다.
지금 Wijmo 최신 버전으로 업그레이드 해보세요!
- Wijmo 최신버전 다운로드 (Latest Version)
무료 업그레이드 안내
Wijmo 2022v2 이상 버전을 구매하신 분들은
추가적인 구매 없이, JS 라이브러리 변경 만으로 2023v2로 무료 업그레이드가 가능합니다.
[적용 방법]
Wijmo 최신버전 다운로드 또는 NPM을 통해,
Wijmo의 최신 JavaScript 라이브러리로 교체해주면 바로 적용이 가능합니다.
* 위의 고객분들의 경우, 기존에 사용중이신 배포 라이선스 키를 그대로 사용가능합니다.
* 최신 버전 기준으로 배포 키를 추가로 발급 받으시거나, 변경하실 필요없습니다.
고객 상담
만약 구매 및 업그레이드 상담 및 상세한 안내가 필요하신 경우,
아래의 편하신 상담 창구로 연락바랍니다.
- 온라인 상담 요청
- 전화 : 1670-0583
- 메일 : sales-kor@mescius.com
추가 방법 안내
소스코드 상에 Workaround 대체 코드 작성
Google Chrome(크롬) 강제적 제한 사항은 Wijmo 2023v2(5.20232.939)에서 해결되었습니다.
만약 해당 최신 Wijmo 버전으로 업그레이드가 어려우신 경우.
아래와 같은 Workaround(대채코드)를 적용하여 해결이 가능합니다.
* Chrome(크롬) 이슈를 해결하기 위해서 Wijmo 업그레이드를 강력 권장합니다.
JS 프레임워크 별, Workaround 코드 안내
React, Vue, Angular 프레임워크에서 Wijmo를 사용하는 경우에만, Chrome 정책 변경으로 인한 이슈가 발생하며, 아래의 Workaround(대체코드)를 적용하여 문제해결이 가능합니다.
* PureJS(일반 JavaScrirpt)기반에서 Wijmo를 사용하는 경우 해당되지 않습니다.
JS 프레임워크 별 방법:
아래 Workaround는 고객분들이 많이 가장 많이 사용하는, Wijmo의 FlexGrid의 대체코드를 우선 설명합니다.
혹시, FlexGrid 이외의 다른 컨트롤에서 문제가 발생하는 경우,
Wijmo Q&A | 기술문의 게시판을 통해 문의 주시면, 빠르게 도움을 드릴 수 있도록 하겠습니다.
React Workaround 코드
[기존 코드]
변경 전 (FlexGridColumn 컴포넌트 사용):
import * as wjGrid from '@grapecity/wijmo.react.grid';<wjGrid.FlexGrid itemsSource={data} autoClipboard={false} initialized={gridInitialized}>// Column 컴포넌트 사용 <wjGrid.FlexGridColumn header="시작일" binding="start" /> <wjGrid.FlexGridColumn header="판매" binding="sales" width="2*"/> <wjGrid.FlexGridColumn header="비용" binding="expenses" format="n0" />// Column 컴포넌트 </wjGrid.FlexGrid> |
[Workaround 코드]
변경 후 (FlexGridColumn 컴포넌트 제거 및 initialize 메소드로 열 설정)
import useEvent from 'react-use-event-hook';function App() { const gridRef = React.useRef(null); const gridInitialized = useEvent((sender) => { gridRef.current = sender; //initialize 메소드로 열을 설정 sender.initialize({ columns: [ { binding: "start", header: "시작일", }, { binding: "sales", header: "판매", width:"2*" }, { binding: "expenses", header: "비용", format: 'n0' }, ], }); //initialize 메소드로 열을 설정 });(...) <wjGrid.FlexGrid itemsSource={data} autoClipboard={false} initialized={gridInitialized}>// FlexGridColumn 컴포넌트 제거 </wjGrid.FlexGrid> |
Vue Workaround 코드
[기존 코드]
변경 전 (wj-flex-grid-column 컴포넌트 사용)
<wj-flex-grid class="grid" :itemsSource="data" :autoClipboard="false">// wj-flex-grid-column 컴포넌트 사용 <wj-flex-grid-column header="시작일" binding="start"></wj-flex-grid-column> <wj-flex-grid-column header="판매" binding="sales" width="2*"></wj-flex-grid-column> <wj-flex-grid-column header="비용" binding="expenses" format="n0"></wj-flex-grid-column>// wj-flex-grid-column 컴포넌트 사용</wj-flex-grid> |
[Workaround 코드]
변경 후 (wj-flex-grid-column 컴포넌트 제거 및 initialize 메소드로 열 설정 )
<wj-flex-grid class="grid" :itemsSource="data" :autoClipboard="false" :initialized="flexInitialized">//wj-flex-grid 컴포넌트 제거</wj-flex-grid>(...) methods: { flexInitialized: function (flexgrid) { //initialize 메소드로 열을 설정 flexgrid.initialize({ columns: [ { binding: "start", header: "시작일", }, { binding: "sales", header: "판매", width:"2*" }, { binding: "expenses", header: "비용", format: 'n0' }, ], }); //initialize 메소드로 열을 설정 }, }, |
Angular Workaround 코드
[기존 코드]
변경 전 (wj-flex-grid-column 컴포넌트 사용)
<wj-flex-grid #flex [itemsSource]="data" [autoClipboard]="false">//wj-flex-grid-column 컴포넌트 사용 <wj-flex-grid-column [header]="'시작일'" [binding]="'start'"></wj-flex-grid-column> <wj-flex-grid-column [header]="'판매'" [binding]="'product'" [width]="'2*'" </wj-flex-grid-column> <wj-flex-grid-column [header]="'비용'" [binding]="'amount'" [format]="'n0'"></wj-flex-grid-column>//wj-flex-grid-column 컴포넌트 사용 </wj-flex-grid> |
[Workaround 코드]
변경 후 (wj-flex-grid-column 컴포넌트 제거 및 initialize 메소드로 열 설정)
HTML:
<wj-flex-grid #flex class="grid" [autoGenerateColumns]="false" [itemsSource]="data" [autoClipboard]="false">// wj-flex-grid-column 컴포넌트 제거 </wj-flex-grid> |
TS:
export class AppComponent { data: any[]; // references FlexGrid named 'flex' in the view @ViewChild('flex', { static: true }) flex: FlexGrid; ngOnInit() { if (this.flex) { //initialize 메소드로 열을 설정 this.flex.initialize({ columns: [ { binding: "start", header: "시작일", }, { binding: "sales", header: "판매", width:"2*" }, { binding: "expenses", header: "비용", format: 'n0' }, ], }); //initialize 메소드로 열을 설정 } |
크롬의 정책 변경에 대한 대응으로 2023 v2 버전부터 패치되었으니 2023 v1 이하 Wijmo 제품을 사용하시는 경우, 해당 경고창이 나타나시는지 꼭 확인 후, 위에 안내드린 내용과 같이 최신 버전으로 업그레이드 또는 workaround를 적용하시기 바랍니다.
지금 바로 Wijmo를 다운로드하여 직접 테스트해 보세요!
댓글목록
등록된 댓글이 없습니다.
