Barista: [๋น ๋ฅธ ํ•„ํ„ฐ] ํ™œ์„ฑ [ํ•„ํ„ฐ]๋ฅผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์œผ๋กœ ์ถ”๊ฐ€ํ•˜๋ฉด ExpressionChangedAfterItHasBeenCheckedError๊ฐ€ ๋ฐœ์ƒํ•˜๊ณ  ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ์‹คํ–‰๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2020๋…„ 07์›” 16์ผ  ยท  12์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: dynatrace-oss/barista

๋ฒ„๊ทธ ์‹ ๊ณ 

DtQuickFilter ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ํ•„ํ„ฐ ๋ฐฐ์—ด์„ [filters] ์ž…๋ ฅ์— ์ „๋‹ฌํ•  ๋•Œ ๊ตฌ์„ฑ ์š”์†Œ๋Š” DtFilterField์ฒ˜๋Ÿผ ํ•„์š”ํ•œ ๋Œ€๋กœ ๋ฐ˜์‘ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜์•ผ

DtQuickFilter ๊ตฌ์„ฑ ์š”์†Œ๋Š” [filters] ์ž…๋ ฅ์— ์ „๋‹ฌ๋œ ํ•„ํ„ฐ์— ์ ์ ˆํ•˜๊ฒŒ ๋ฐ˜์‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ (filterChanges) ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

ํ˜„์žฌ ์ผ์–ด๋‚˜๋Š” ์ผ

DtQuickFilter ๊ตฌ์„ฑ ์š”์†Œ๋Š” [filters]์— ์ „๋‹ฌ๋œ ํ•„ํ„ฐ๋ฅผ ํ—ˆ์šฉํ•˜์ง€๋งŒ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ์‹คํ–‰ํ•˜์ง€ ์•Š์œผ๋ฉฐ ์ฝ˜์†”์—๋„ ExpressionChangedAfterItHasBeenCheckedError๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

๋ฐ๋ชจ

https://stackblitz.com/edit/github-mpgcfd?file=src%2Fquick-filter%2Fquick-filter-default-example%2Fquick-filter-default-example.ts

  1. [filters] ์ž…๋ ฅ์— ์ „๋‹ฌ๋˜๋Š” "fakeFilters" ๋ฐฐ์—ด์— ์œ ์˜ํ•˜์‹ญ์‹œ์˜ค.
  2. (filterChanges) ์ด๋ฒคํŠธ์— ์ฒจ๋ถ€๋œ "handle(event)" ๋ฉ”์†Œ๋“œ์˜ ์ฝ˜์†” ๋กœ๊ทธ๋ฅผ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.
  3. ์‹ค์ œ๋กœ ํ•„ํ„ฐ ํ‘œ์‹œ์ค„์— ๊ฐ€์งœ ํ•„ํ„ฐ๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ์ง€๋งŒ ๋ธŒ๋ผ์šฐ์ € ์ฝ˜์†”์„ ํ™•์ธํ•˜์—ฌ ์ด๋ฒคํŠธ๊ฐ€ ์‹คํ–‰๋˜์ง€ ์•Š์•˜๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.
  4. ๋ธŒ๋ผ์šฐ์ € ๋กœ๊ทธ์—์„œ ํ‘œํ˜„์‹์ด ๋ณ€๊ฒฝ๋จ ์˜ค๋ฅ˜์— ์œ ์˜ํ•˜์‹ญ์‹œ์˜ค.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!
์•„๋ฅด๋…ธ

bug cannot reproduce has-pr

๋ชจ๋“  12 ๋Œ“๊ธ€

@areknow ์žฌ์ƒ์‚ฐ ์˜ˆ์ œ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ๋ฌธ์ œ๋ฅผ ์—ด์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.
์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์€ ์˜๋„์ ์œผ๋กœ ์„ค๊ณ„๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ํ•„ํ„ฐ๋ฅผ ์ด๋ฏธ ์„ค์ •ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ํ•„ํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜์—ˆ์Œ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ž…๋ ฅ์ด ์„ค์ •๋œ ์งํ›„์— ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ๊ตฌ์„ฑ ์š”์†Œ์™€ ์ƒํ˜ธ ์ž‘์šฉํ•  ๋•Œ๋งŒ ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด ๊ฒฝ์šฐ์—๋Š” ๋‚ด๊ฐ€ ํ‹€๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค @lukasholzer ๋‹น์‹ ์€ ํ™•์‹คํžˆ ๋” ๋งŽ์ด ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค :)

ExpressionChangedAfterChecked ์˜ค๋ฅ˜์™€ ๊ด€๋ จํ•˜์—ฌ - ์ด๊ฒƒ์€ ํ™•์‹คํžˆ ํ™•์ธํ•ด์•ผ ํ•  ์‚ฌํ•ญ์ž…๋‹ˆ๋‹ค.

์ด ์‹œ์ ์—์„œ ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ์ด viewEngine์—์„œ ์‹คํ–‰ํ•  ๋•Œ ๋ฌธ์ œ๋ผ๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค.
์šฐ๋ฆฌ๋Š” ๊ฐœ๋ฐœ ๋ฐ ๋ฐ๋ชจ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ด๋ฅผ ์žฌํ˜„ํ•˜๋ ค๊ณ  ์‹œ๋„ํ–ˆ์ง€๋งŒ ์„ฑ๊ณตํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. stackblitz ์™ธ๋ถ€์—์„œ ๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•  ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค.

@areknow ์ด ๋ฌธ์ œ๋ฅผ ๋ฐœ๊ฒฌํ•œ ์•ฑ์ด viewEngine์—์„œ ์‹คํ–‰ ์ค‘์ธ์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ(stackblitz๊ฐ€ viewEngine์„ ์‹คํ–‰ ์ค‘์ž„์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค)?

@ffriedl89 ๋ฌผ๋ก ์ž…๋‹ˆ๋‹ค. ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์— ๋Œ€ํ•œ ์„ค๋ช… ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

@gselltho ๋‚ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด viewEngine์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Œ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ณ ๋งˆ์›Œ ์–˜๋“ค์•„!

@tomheller ๋ฐฉ๊ธˆ ๋‚ด ์•ฑ์—์„œ Ivy๋ฅผ ํ™œ์„ฑํ™”ํ–ˆ์ง€๋งŒ ์—ฌ์ „ํžˆ ExpressionChangedAfterChecked ์˜ค๋ฅ˜๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ๋Š” ๊ฒƒ์€ ์•„๋‹๊นŒ?

๋˜ ๋‹ค๋ฅธ ํฅ๋ฏธ๋กœ์šด ์—…๋ฐ์ดํŠธ: ์˜ค๋ฅ˜๋Š” ๋กœ์ปฌ์—์„œ๋งŒ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ์˜ ํŒŒ์ดํ”„๋ผ์ธ(jenkins)์„ ํ†ตํ•ด dev์—์„œ ๋นŒ๋“œํ•œ ํ›„์—๋Š” dev env์—์„œ ์˜ค๋ฅ˜๊ฐ€ ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋กœ์ปฌ์—์„œ ์ „์ฒด npm ci ํ–ˆ์ง€๋งŒ ์—ฌ์ „ํžˆ ์˜ค๋ฅ˜๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ์ง€์›Œ์•ผ ํ•  ๋‹ค๋ฅธ ์บ์‹œ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ์‚ฌ!

@areknow AOT๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋กœ์ปฌ์—์„œ ์•ฑ์„ ๋นŒ๋“œํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? (๋ฏธ๋ฆฌ ์ปดํŒŒ์ผ). ๋‹น์‹ ์€ ์„ค์ •ํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค aot ์žฌ์‚ฐ angular.json true๋กœ ๋˜๋Š” ์ „๋‹ฌํ•˜์—ฌ --aot ๋ฐ›๋Š” ng serve ... ๋ช…๋ น.

๋‚˜๋Š” ์ด๊ฒƒ์ด JIT(์ ์‹œ) ์ปดํŒŒ์ผ ๋ฌธ์ œ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ ๋ณผ ์ˆ˜ ์—†๋Š” ์ด์œ ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ผ๋ฐ˜์ ์œผ๋กœ ๋ฒ„์ „ 9๋ถ€ํ„ฐ ์ปดํŒŒ์ผ์— AOT๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
https://angular.io/guide/aot-compiler#choosing -a-์ปดํŒŒ์ผ๋Ÿฌ

๊ธฐ๋ก์„ ์œ„ํ•ด ์ด ๋ฌธ์ œ๋ฅผ ์ถ”๊ฐ€๋กœ ์กฐ์‚ฌํ•˜๊ธฐ ์œ„ํ•ด ํ†ตํ™” ๋™๊ธฐํ™”๋„ ์˜ˆ์•ฝ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์„ค์ •ํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค @areknow .

@areknow AOT๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋กœ์ปฌ์—์„œ ์•ฑ์„ ๋นŒ๋“œํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? (๋ฏธ๋ฆฌ ์ปดํŒŒ์ผ). ๋‹น์‹ ์€ ์„ค์ •ํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค aot ์žฌ์‚ฐ angular.json true๋กœ ๋˜๋Š” ์ „๋‹ฌํ•˜์—ฌ --aot ๋ฐ›๋Š” ng serve ... ๋ช…๋ น.

๋‚˜๋Š” ์ด๊ฒƒ์ด JIT(์ ์‹œ) ์ปดํŒŒ์ผ ๋ฌธ์ œ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ ๋ณผ ์ˆ˜ ์—†๋Š” ์ด์œ ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ผ๋ฐ˜์ ์œผ๋กœ ๋ฒ„์ „ 9๋ถ€ํ„ฐ ์ปดํŒŒ์ผ์— AOT๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
https://angular.io/guide/aot-compiler#choosing -a-์ปดํŒŒ์ผ๋Ÿฌ

@lukasholzer ๋‹ต๋ณ€ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!
angular.json์˜ Serve ๋นŒ๋“œ ๊ตฌ์„ฑ์— aot: true ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ ค๊ณ  ์‹œ๋„ํ–ˆ๊ณ  ๋˜ํ•œ serve ๋ช…๋ น์— --aot ํ”Œ๋ž˜๊ทธ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ ค๊ณ  ํ–ˆ์Šต๋‹ˆ๋‹ค. ์—ฌ์ „ํžˆ ๋กœ์ปฌ์—์„œ ์˜ค๋ฅ˜๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค ๐Ÿ˜‚

์ด๊ฒƒ์€ ์ •๋ง ์ด์ƒํ•ด์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ivy: on|off ๋ฐ viewEngine: on|off ๊ฐ€๋Šฅํ•œ ๋ชจ๋“  ์ˆœ์—ด์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ด๋ฅผ ์‹œ๋„ํ–ˆ์ง€๋งŒ ์—ฌ์ „ํžˆ ์˜ค๋ฅ˜๋ฅผ ์žฌํ˜„ํ•  ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์šฐ๋ฆฌ๋Š” ์ด๊ฒƒ์„ stackblitz์—์„œ ๋ณผ ์ˆ˜ ์žˆ๊ณ  ์™œ ์ด๋Ÿฐ ์ผ์ด ์ผ์–ด๋‚˜๋Š”์ง€ ์ƒ๋‹นํžˆ ๋‹นํ™ฉํ•ฉ๋‹ˆ๋‹ค. @areknow์˜ ์ „ํ™”๋ฅผ ๊ธฐ๋‹ค๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๋จธ๋ฆฌ๋ฅผ ๋งž๋Œ€๋ฉด ์—ฌ๊ธฐ์„œ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@tomheller๋Š” ์ข‹์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค!

@tomheller ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ์—์„œ ๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค: https://github.com/areknow/barista-quick-filter-bug

๊ทธ๋ž˜๋„ ์˜ˆ์ •๋œ ์‹œ๊ฐ„์— ๋งŒ๋‚˜์„œ ๋ฐ˜๊ฐ€์›Œ์š”๐Ÿ‘

@areknow ๋•๋ถ„์— ๊ทธ๊ฐ€ ์ œ๊ณตํ•œ ์„ค์ •์—์„œ ๋ฌธ์ œ์˜ ์›์ธ์„ ์ถ”์ ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋ถˆํ–‰ํžˆ๋„ ์šฐ๋ฆฌ๋Š” ์—ฌ์ „ํžˆ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ ๋‚ด์˜ ์–ด๋–ค ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ๋„ ์ด๋ฅผ ์žฌํ˜„ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋‹ค์†Œ ๊ฑฑ์ •์Šค๋Ÿฌ์šด ์ผ์ž…๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰