Snapshot Testing \ud328\ud134: UI\ub098 \ucd9c\ub825 \uacb0\uacfc\ub97c \uc2a4\ub0c5\uc0f7\uc73c\ub85c \ube44\uad50\ud574 \ud68c\uadc0 \ubc84\uadf8 \ubc1c\uacac<\/title><\/p>\n<h1 id=\"snapshot-testing-%ed%8c%a8%ed%84%b4-ui%eb%82%98-%ec%b6%9c%eb%a0%a5-%ea%b2%b0%ea%b3%bc%eb%a5%bc-%ec%8a%a4%eb%83%85%ec%83%b7%ec%9c%bc%eb%a1%9c-%eb%b9%84%ea%b5%90%ed%95%b4-%ed%9a%8c%ea%b7%80-%eb%b2%84-FdQYRnKksP\">Snapshot Testing \ud328\ud134: UI\ub098 \ucd9c\ub825 \uacb0\uacfc\ub97c \uc2a4\ub0c5\uc0f7\uc73c\ub85c \ube44\uad50\ud574 \ud68c\uadc0 \ubc84\uadf8 \ubc1c\uacac<\/h1>\n<img decoding=\"async\" src=\"https:\/\/m9js.shop\/blog\/wp-content\/uploads\/2025\/03\/snapshot-testing-ed8ca8ed84b4-uieb8298-ecb69ceba0a5-eab2b0eab3bceba5bc-ec8aa4eb8385ec83b7ec9cbceba19c-ebb984eab590ed95b4-ed9a8ceab780-ebb284.jpeg\" alt=\"Snapshot Testing \ud328\ud134: UI\ub098 \ucd9c\ub825 \uacb0\uacfc\ub97c \uc2a4\ub0c5\uc0f7\uc73c\ub85c \ube44\uad50\ud574 \ud68c\uadc0 \ubc84\uadf8 \ubc1c\uacac\" \/><\/p>\n<h2 id=\"1-snapshot-testing%ec%9d%98-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%97%ad%ec%82%ac%ec%a0%81-%eb%b0%b0%ea%b2%bd-FdQYRnKksP\">1. Snapshot Testing\uc758 \uc774\ud574\uc640 \uc5ed\uc0ac\uc801 \ubc30\uacbd<\/h2>\nSnapshot Testing\uc740 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c, \ud2b9\ud788 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c \uc601\uc5ed\uc5d0\uc11c \ud68c\uadc0 \ubc84\uadf8\ub97c \uc0ac\uc804\uc5d0 \uc608\ubc29\ud558\uae30 \uc704\ud574 \ub110\ub9ac \uc0ac\uc6a9\ub418\ub294 \ud14c\uc2a4\ud2b8 \uae30\ubc95\uc785\ub2c8\ub2e4. \uc774 \uae30\ubc95\uc740 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc758 UI\ub098 \ucd9c\ub825 \uacb0\uacfc\ub97c \ud2b9\uc815 \uc2dc\uc810\uc758 \u201c\uc2a4\ub0c5\uc0f7\u201d\uacfc \ube44\uad50\ud558\uc5ec \ubcc0\uacbd \uc0ac\ud56d\uc744 \uac10\uc9c0\ud558\uace0, \uc758\ub3c4\uce58 \uc54a\uc740 \ubcc0\ud654\uac00 \ubc1c\uc0dd\ud588\uc744 \uacbd\uc6b0 \uc774\ub97c \uc989\uac01\uc801\uc73c\ub85c \uc54c \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. \uac1c\ubc1c \ucd08\uae30\uc5d0\ub294 \ub2e8\uc21c\ud788 \ud654\uba74 \uad6c\uc131 \uc694\uc18c\uc758 \ubcc0\uacbd \uc5ec\ubd80\ub97c \uccb4\ud06c\ud558\ub294 \uc6a9\ub3c4\ub85c \uc2dc\uc791\ub418\uc5c8\uc9c0\ub9cc, \uc2dc\uac04\uc774 \uc9c0\ub0a8\uc5d0 \ub530\ub77c \ub2e4\uc591\ud55c \ub3c4\uad6c\uc640 \ud504\ub808\uc784\uc6cc\ud06c\uc5d0 \uc801\uc6a9\ub418\uc5b4 \ud14c\uc2a4\ud2b8 \uc790\ub3d9\ud654\uc758 \ud55c \ucd95\uc744 \ub2f4\ub2f9\ud558\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\ucd08\uae30\uc758 Snapshot Testing\uc740 \uc8fc\ub85c \ud14d\uc2a4\ud2b8 \uae30\ubc18\uc758 \ucd9c\ub825 \uacb0\uacfc \ube44\uad50\uc5d0\uc11c \ucd9c\ubc1c\ud558\uc600\uc2b5\ub2c8\ub2e4. \uac1c\ubc1c\uc790\ub4e4\uc740 \ub85c\uadf8 \ud30c\uc77c\uc774\ub098 \ucf58\uc194 \ucd9c\ub825\uc744 \ud14d\uc2a4\ud2b8 \ud30c\uc77c\ub85c \uc800\uc7a5\ud55c \ud6c4, \ubcc0\uacbd \uc5ec\ubd80\ub97c \uc218\ub3d9\uc73c\ub85c \ube44\uad50\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \ud68c\uadc0 \ud14c\uc2a4\ud2b8\ub97c \uc9c4\ud589\ud588\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc774\ub7ec\ud55c \ubc29\uc2dd\uc740 \uc218\uc791\uc5c5\uc774 \ub9ce\uc774 \ub4e4\uace0, \ubcc0\uacbd\uc758 \uc758\ub3c4\ub97c \ud30c\uc545\ud558\uae30 \uc5b4\ub824\uc6cc \uc810\ucc28 \uc790\ub3d9\ud654\ub41c \uc2a4\ub0c5\uc0f7 \ube44\uad50 \ub3c4\uad6c\ub85c \ubc1c\uc804\ud558\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4. 2000\ub144\ub300 \uc911\ud6c4\ubc18\uc5d0\ub294 Jest\uc640 \uac19\uc740 \ud14c\uc2a4\ud305 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \ub4f1\uc7a5\ud558\uba74\uc11c Snapshot Testing\uc758 \ubb38\ubc95\uacfc \uc0ac\uc6a9 \ubc29\uc2dd\uc774 \ud45c\uc900\ud654\ub418\uc5c8\uc73c\uba70, \uac1c\ubc1c\uc790\ub4e4 \uc0ac\uc774\uc5d0\uc11c \ube60\ub978 \ud53c\ub4dc\ubc31\uacfc \uc548\uc815\uc801\uc778 \ud68c\uadc0 \ud14c\uc2a4\ud2b8 \ub3c4\uad6c\ub85c \uc790\ub9ac\ub9e4\uae40\ud558\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\uc5ed\uc0ac\uc801\uc73c\ub85c Snapshot Testing\uc740 \ubc18\ubcf5\uc801\uc778 UI \uc7ac\uad6c\uc131 \ubc0f \ucf54\ub4dc \ub9ac\ud329\ud1a0\ub9c1 \uacfc\uc815\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc608\uae30\uce58 \uc54a\uac70\ub098 \ubd80\uc218\uc801\uc778 \ud6a8\uacfc\ub97c \uc870\uae30\uc5d0 \ubc1c\uacac\ud558\uae30 \uc704\ud574 \ud0c4\uc0dd\ud558\uc600\uc2b5\ub2c8\ub2e4. \ud2b9\ud788, \uc0ac\uc6a9\uc790 \uacbd\ud5d8(UX)\uc774 \uc911\uc694\ud55c \ud604\ub300\uc758 \uc6f9 \ubc0f \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0\uc11c\ub294 UI\uc758 \ubbf8\uc138\ud55c \ubcc0\uacbd\uc870\ucc28\ub3c4 \uc0ac\uc6a9\uc790\uc5d0\uac8c \ud070 \uc601\ud5a5\uc744 \uc904 \uc218 \uc788\uae30\uc5d0, \uc2a4\ub0c5\uc0f7 \ube44\uad50\ub97c \ud1b5\ud574 \ubcc0\uacbd\uc758 \uc758\ub3c4\ub97c \uba85\ud655\ud558\uac8c \ud30c\uc545\ud558\uace0 \uc2e0\uc18d\ud558\uac8c \ub300\uc751\ud560 \uc218 \uc788\ub294 \uc2dc\uc2a4\ud15c\uc774 \ud544\uc218\uc801\uc774 \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ub610\ud55c, \ud14c\uc2a4\ud2b8 \ucf54\ub4dc\uc640 \uc2e4\uc81c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ucf54\ub4dc\uc758 \ubd84\ub9ac\ub97c \uba85\ud655\ud788 \ud558\uc5ec \ubaa8\ub4c8\ud654\ub41c \ud14c\uc2a4\ud2b8 \uc804\ub7b5\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \ud06c\uac8c \uae30\uc5ec\ud558\uc600\uc2b5\ub2c8\ub2e4.<\/p>\n\ud14c\uc2a4\ud2b8 \uc790\ub3d9\ud654 \ub3c4\uad6c\uc778 Jest\ub294 Snapshot Testing\uc744 \ub3c4\uc785\ud558\uba74\uc11c \ucee4\ubba4\ub2c8\ud2f0\uc5d0 \ud070 \ubc18\ud5a5\uc744 \uc77c\uc73c\ucf30\uc2b5\ub2c8\ub2e4. Jest\ub294 React\uc640 \uac19\uc740 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud558\uba70, \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub80c\ub354\ub9c1\ud55c \uacb0\uacfc\ubb3c\uc744 JSON \ud615\ud0dc\ub85c \ubcc0\ud658\ud55c \ud6c4, \ub0b4\ubd80\uc801\uc73c\ub85c \uad00\ub9ac\ub418\ub294 \uc2a4\ub0c5\uc0f7 \ud30c\uc77c\uacfc \ube44\uad50\ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ud504\ub85c\uc138\uc2a4\ub294 \uac1c\ubc1c\uc790\uac00 UI\uc758 \ubcc0\uacbd \uc5ec\ubd80\ub97c \uc27d\uac8c \uac10\uc9c0\ud560 \uc218 \uc788\uac8c \ud574\uc8fc\uba70, \ubcc0\uacbd\uc758 \uc6d0\uc778\uc774 \uc2e4\uc81c\ub85c \uc758\ub3c4\ud55c \uac83\uc778\uc9c0 \uc544\ub2c8\uba74 \ubc84\uadf8\uc5d0 \uc758\ud55c \uac83\uc778\uc9c0\ub97c \uba85\ud655\ud558\uac8c \uad6c\ubd84\ud560 \uc218 \uc788\uac8c \ub3c4\uc640\uc90d\ub2c8\ub2e4. \uc774\uc640 \uac19\uc774 Snapshot Testing\uc740 \uae30\uc874\uc758 \ub2e8\uc704 \ud14c\uc2a4\ud2b8, \ud1b5\ud569 \ud14c\uc2a4\ud2b8\uc640 \ud568\uaed8 \uc804\uccb4\uc801\uc778 \ud14c\uc2a4\ud2b8 \ucee4\ubc84\ub9ac\uc9c0\ub97c \ub192\uc774\ub294 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\ub610\ud55c, Snapshot Testing\uc740 \ub2e8\uc21c\ud55c UI \ube44\uad50\ub97c \ub118\uc5b4 API \uc751\ub2f5, \ub370\uc774\ud130 \ubaa8\ub378\uc758 \uad6c\uc870, \uc2ec\uc9c0\uc5b4 \ubb38\uc11c\ud654\ub41c \uacb0\uacfc \ud30c\uc77c\uae4c\uc9c0 \ub2e4\uc591\ud55c \ubd84\uc57c\uc5d0 \uc801\uc6a9\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uc2dc\uc2a4\ud15c\uc774 \ubcf5\uc7a1\ud574\uc9c8\uc218\ub85d \ub2e4\uc591\ud55c \ucd9c\ub825 \uacb0\uacfc\ubb3c\ub4e4\uc774 \uc0dd\uae30\uac8c \ub418\ub294\ub370, \uc774 \ubaa8\ub4e0 \uacb0\uacfc\ubb3c\uc744 \uc77c\uc77c\uc774 \uac80\uc99d\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc790\ub3d9\ud654\ub41c \ube44\uad50 \ub3c4\uad6c\uac00 \ubc18\ub4dc\uc2dc \ud544\uc694\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc624\ub958\ub97c \uc870\uae30\uc5d0 \ubc1c\uacac\ud558\uace0 \uc218\uc815\ud558\uba70, \uac1c\ubc1c \uc8fc\uae30\ub97c \ub2e8\ucd95\ud560 \uc218 \uc788\ub294 \uc7a5\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\uc2a4\ub0c5\uc0f7\uc758 \uc0dd\uc131 \ubc0f \ube44\uad50 \uacfc\uc815\uc740 \uc5ec\ub7ec \ub2e8\uacc4\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. \uba3c\uc800, \ud14c\uc2a4\ud2b8 \uc2e4\ud589 \uc2dc\uc810\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8 \ub610\ub294 \ud568\uc218\uc758 \uc2e4\uc81c \uacb0\uacfc\ubb3c\uc774 \uc2a4\ub0c5\uc0f7 \ud615\ud0dc\ub85c \uc800\uc7a5\ub418\uba70, \uc774\ud6c4 \ud14c\uc2a4\ud2b8\uac00 \uc7ac\uc2e4\ud589\ub420 \ub54c\ub9c8\ub2e4 \uc800\uc7a5\ub41c \uc2a4\ub0c5\uc0f7\uacfc \ube44\uad50\ub97c \uc9c4\ud589\ud569\ub2c8\ub2e4. \ub9cc\uc57d \ucc28\uc774\uac00 \ubc1c\uacac\ub41c\ub2e4\uba74 \ud14c\uc2a4\ud2b8\ub294 \uc2e4\ud328 \ucc98\ub9ac\ub418\uba70, \uac1c\ubc1c\uc790\uc5d0\uac8c \ucc28\uc774\uac00 \ubc1c\uc0dd\ud55c \ubd80\ubd84\uc5d0 \ub300\ud574 \uc0c1\uc138\ud55c \ub9ac\ud3ec\ud2b8\ub97c \uc81c\uacf5\ud558\uac8c \ub429\ub2c8\ub2e4. \uc774 \uae30\ubc95\uc740 \ud2b9\ud788 UI \uc694\uc18c\uc758 \ubbf8\uc138\ud55c \ucc28\uc774\uae4c\uc9c0\ub3c4 \uc7a1\uc544\ub0bc \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0, \ub514\uc790\uc778 \ubcc0\uacbd\uc774 \uc758\ub3c4\ud55c \uac83\uc778\uc9c0 \uc2e4\uc218\ub85c \uc778\ud574 \ubc1c\uc0dd\ud55c \uac83\uc778\uc9c0\ub97c \uba85\ud655\ud788 \uad6c\ubd84\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\ucd5c\uadfc \uba87 \ub144\uac04 Snapshot Testing\uc5d0 \ub300\ud55c \uad00\uc2ec\uc740 \ub354\uc6b1 \uc99d\uac00\ud558\uc600\uc73c\uba70, \ub2e4\uc591\ud55c \ub3c4\uad6c\ub4e4\uc774 \ub4f1\uc7a5\ud558\uba74\uc11c \uadf8 \ud65c\uc6a9 \ubc94\uc704\uac00 \uc810\ucc28 \ud655\ub300\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, React\ubfd0\ub9cc \uc544\ub2c8\ub77c Vue, Angular \ub4f1 \ub2e4\uc591\ud55c \ud504\ub808\uc784\uc6cc\ud06c\uc5d0\uc11c \uc2a4\ub0c5\uc0f7 \ud14c\uc2a4\ud2b8\ub97c \uc9c0\uc6d0\ud558\uba70, \uac01 \ub3c4\uad6c\ub4e4\uc740 \uc800\ub9c8\ub2e4\uc758 \ud2b9\uc9d5\uacfc \uc7a5\uc810\uc744 \uac00\uc9c0\uace0 \uac1c\ubc1c\uc790\ub4e4\uc5d0\uac8c \uc81c\uacf5\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, Snapshot Testing\uc740 CI\/CD \ud30c\uc774\ud504\ub77c\uc778\uc5d0 \ud1b5\ud569\ub418\uc5b4, \uc790\ub3d9\uc73c\ub85c \uc2e4\ud589\ub418\ub294 \ud14c\uc2a4\ud2b8 \uc2a4\uc704\ud2b8\uc758 \uc911\uc694\ud55c \uc77c\ubd80\ub85c \uc790\ub9ac\ub9e4\uae40\ud558\uc600\uc2b5\ub2c8\ub2e4.<\/p>\n\uc2a4\ub0c5\uc0f7 \ube44\uad50 \uae30\ubc95\uc758 \ubc1c\uc804\uc740 \ub2e8\uc21c \ube44\uad50\uc5d0 \uadf8\uce58\uc9c0 \uc54a\uace0, \ucc28\uc774\uc810\uc5d0 \ub300\ud55c \uc0c1\uc138 \ubd84\uc11d \ubc0f \ubcc0\uacbd \uc0ac\ud56d\uc5d0 \ub300\ud55c \ud788\uc2a4\ud1a0\ub9ac \uad00\ub9ac \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud615\ud0dc\ub85c \uc9c4\ud654\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uae30\ub2a5\ub4e4\uc740 \uac1c\ubc1c\uc790\uac00 \ubcc0\uacbd \uc0ac\ud56d\uc758 \uc6d0\uc778\uc744 \ubcf4\ub2e4 \uc27d\uac8c \ud30c\uc545\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\uba70, \ub300\uaddc\ubaa8 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \uc608\uae30\uce58 \uc54a\uc740 \uc624\ub958\ub97c \ubbf8\uc5f0\uc5d0 \ubc29\uc9c0\ud558\ub294 \ub370 \ud070 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \ub610\ud55c, \ubcc0\uacbd \uc0ac\ud56d\uc774 \ubc1c\uc0dd\ud588\uc744 \ub54c \ubcc0\uacbd\uc758 \uc758\ub3c4\uc640 \uad00\ub828\ub41c \uc124\uba85\uc744 \ucd94\uac00\ud558\uc5ec, \ud300 \ub0b4 \ub9ac\ubdf0 \uacfc\uc815\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \ub9cc\ub4e4\uc5b4 \uc90d\ub2c8\ub2e4.<\/p>\n\uc774\ucc98\ub7fc Snapshot Testing\uc740 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c\uc758 \uc911\uc694\ud55c \ud14c\uc2a4\ud2b8 \uc804\ub7b5\uc73c\ub85c \uc790\ub9ac \uc7a1\uc558\uc73c\uba70, \ud5a5\ud6c4 \ub354\uc6b1 \ubc1c\uc804\ub41c \uae30\uc220 \ubc0f \ub3c4\uad6c\uc640 \uacb0\ud569\ub418\uc5b4 \uc548\uc815\uc801\uc778 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c \ud658\uacbd\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \ud575\uc2ec\uc801\uc778 \uc5ed\ud560\uc744 \ud560 \uac83\uc73c\ub85c \uae30\ub300\ub429\ub2c8\ub2e4. \uc5ed\uc0ac\uc801 \ubc30\uacbd\uacfc \uae30\uc220\uc801 \uc9c4\ud654\ub97c \uace0\ub824\ud560 \ub54c, \uc2a4\ub0c5\uc0f7 \ud14c\uc2a4\ud2b8\ub294 \ub2e8\uc21c\ud55c \ud14c\uc2a4\ud2b8 \uae30\ubc95\uc744 \ub6f0\uc5b4\ub118\uc5b4 \uac1c\ubc1c \ubb38\ud654\uc758 \ud55c \ubd80\ubd84\uc73c\ub85c \uc790\ub9ac\ub9e4\uae40\ud558\uace0 \uc788\uc73c\uba70, \uc55e\uc73c\ub85c\ub3c4 \uadf8 \uc601\ud5a5\ub825\uc740 \uacc4\uc18d \ud655\ub300\ub420 \uc804\ub9dd\uc785\ub2c8\ub2e4.<\/p>\n<h2 id=\"2-snapshot-testing-%ea%b5%ac%ed%98%84-%eb%b0%a9%eb%b2%95-%eb%b0%8f-%eb%8f%84%ea%b5%ac-%eb%b6%84%ec%84%9d-FdQYRnKksP\">2. Snapshot Testing \uad6c\ud604 \ubc29\ubc95 \ubc0f \ub3c4\uad6c \ubd84\uc11d<\/h2>\n\ubcf8 \uc139\uc158\uc5d0\uc11c\ub294 Snapshot Testing\uc744 \uc2e4\uc81c \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uacfc \uc774\ub97c \uc9c0\uc6d0\ud558\ub294 \ub2e4\uc591\ud55c \ub3c4\uad6c\ub4e4\uc5d0 \ub300\ud574 \uc2ec\uce35\uc801\uc73c\ub85c \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c \ud504\ub85c\uc138\uc2a4\uc758 \uc790\ub3d9\ud654\uac00 \uac15\uc870\ub418\ub294 \uc624\ub298\ub0a0, Snapshot Testing\uc740 \ub2e8\uc21c\ud788 UI \uac80\uc99d\uc744 \ub118\uc5b4 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uc804\ubc18\uc758 \uc548\uc815\uc131\uc744 \ud655\ubcf4\ud558\ub294 \ub370 \ud544\uc218\uc801\uc778 \ub3c4\uad6c\ub85c \uc790\ub9ac \uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uc139\uc158\uc5d0\uc11c\ub294 Snapshot Testing\uc758 \uae30\ubcf8 \uac1c\ub150\ubfd0 \uc544\ub2c8\ub77c, \ub2e4\uc591\ud55c \uad6c\ud604 \ub2e8\uacc4\uc640 \ubc29\ubc95\ub860, \uadf8\ub9ac\uace0 \uac01 \ub3c4\uad6c\uc758 \uc7a5\ub2e8\uc810\uc744 \uad6c\uccb4\uc801\uc778 \uc0ac\ub840\uc640 \ucf54\ub4dc \uc608\uc81c\ub97c \ud1b5\ud574 \ubd84\uc11d\ud569\ub2c8\ub2e4.<\/p>\n\uccab \ubc88\uc9f8\ub85c, Snapshot Testing \uad6c\ud604\uc758 \uae30\ubcf8 \uc6d0\ub9ac\ub294 \ud14c\uc2a4\ud2b8 \ub300\uc0c1\uc758 \uacb0\uacfc\ubb3c\uc744 \uc2a4\ub0c5\uc0f7 \ud30c\uc77c\ub85c \uc800\uc7a5\ud55c \ud6c4, \uc774\ud6c4 \ud14c\uc2a4\ud2b8 \uc2e4\ud589 \uc2dc \ud574\ub2f9 \uc2a4\ub0c5\uc0f7 \ud30c\uc77c\uacfc \uacb0\uacfc\ubb3c\uc774 \ub3d9\uc77c\ud55c\uc9c0 \ube44\uad50\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \ud14c\uc2a4\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\uc778 Jest\ub098 Mocha \ub4f1\uc740 \uc774\ub7ec\ud55c \uae30\ub2a5\uc744 \ub0b4\uc7a5\ud558\uace0 \uc788\uc73c\uba70, \uadf8 \uc0ac\uc6a9\ubc95\ub3c4 \ub9e4\uc6b0 \uac04\ub2e8\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, React \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub300\uc0c1\uc73c\ub85c \ud558\ub294 Snapshot Testing\uc740 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub80c\ub354\ub9c1 \uacb0\uacfc\ub97c JSON \ud615\ud0dc\ub85c \ubcc0\ud658\ud558\uc5ec \uc800\uc7a5\ud55c \ud6c4, \ubcc0\ub3d9 \uc0ac\ud56d\uc774 \uc788\ub294\uc9c0 \uc790\ub3d9\uc73c\ub85c \ube44\uad50 \ubd84\uc11d\ud569\ub2c8\ub2e4.<\/p>\n\uc544\ub798\ub294 Jest\ub97c \ud65c\uc6a9\ud55c Snapshot Testing\uc758 \ucf54\ub4dc \uc608\uc81c\uc785\ub2c8\ub2e4. \uc774 \uc608\uc81c\ub294 React \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc62c\ubc14\ub974\uac8c \ub80c\ub354\ub9c1\ub418\ub294\uc9c0\ub97c \uac80\uc99d\ud558\uba70, \uc2a4\ub0c5\uc0f7\uc744 \uc0dd\uc131\ud558\uace0 \ube44\uad50\ud558\ub294 \uacfc\uc815\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n\ucf54\ub4dc \uc608\uc81c:<\/p>\n<pre><code>import React from 'react';\nimport renderer from 'react-test-renderer';\nimport MyComponent from '.\/MyComponent';\n\ntest('MyComponent\uac00 \uc62c\ubc14\ub974\uac8c \ub80c\ub354\ub9c1 \ub418\ub294\uc9c0 \ud655\uc778', () => {\n const component = renderer.create(\n <MyComponent prop1=\"value1\" prop2=\"value2\" \/>\n );\n let tree = component.toJSON();\n expect(tree).toMatchSnapshot();\n});\n <\/code><\/pre>\n\uc774 \ucf54\ub4dc \uc608\uc81c\ub294 \uac04\uacb0\ud558\uba74\uc11c\ub3c4 Snapshot Testing\uc758 \uc804\ubc18\uc801\uc778 \uacfc\uc815, \uc989 \ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc131, JSON \ubcc0\ud658, \uadf8\ub9ac\uace0 \uc2a4\ub0c5\uc0f7 \ube44\uad50 \uacfc\uc815\uc744 \ubaa8\ub450 \ud3ec\ud568\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ud14c\uc2a4\ud2b8 \uc2e4\ud589 \uc2dc \ucd5c\ucd08 \uc2e4\ud589\uc5d0\uc11c\ub294 \uc2a4\ub0c5\uc0f7 \ud30c\uc77c\uc774 \uc0dd\uc131\ub418\uace0, \uc774\ud6c4 \uc2e4\ud589\uc5d0\uc11c\ub294 \uae30\uc874 \ud30c\uc77c\uacfc \ube44\uad50\ud558\uc5ec \ucc28\uc774\uac00 \uc788\ub294 \uacbd\uc6b0 \ud14c\uc2a4\ud2b8\ub97c \uc2e4\ud328\ucc98\ub9ac\ud569\ub2c8\ub2e4. \uc774\ub294 \ubcc0\uacbd \uc0ac\ud56d\uc774 \ubc1c\uc0dd\ud55c \uc704\uce58\uc640 \uc6d0\uc778\uc744 \uc2e0\uc18d\ud558\uac8c \ud30c\uc545\ud560 \uc218 \uc788\ub294 \uae30\ubc18\uc774 \ub429\ub2c8\ub2e4.<\/p>\n\ub450 \ubc88\uc9f8\ub85c, Snapshot Testing \uad6c\ud604 \uc2dc \uace0\ub824\ud574\uc57c \ud560 \uc0ac\ud56d \uc911 \ud558\ub098\ub294 \uc2a4\ub0c5\uc0f7 \ud30c\uc77c\uc758 \uad00\ub9ac\uc785\ub2c8\ub2e4. \uc2a4\ub0c5\uc0f7 \ud30c\uc77c\uc740 \ubcf4\ud1b5 Git\uacfc \uac19\uc740 \ubc84\uc804 \uad00\ub9ac \uc2dc\uc2a4\ud15c\uc5d0 \ud3ec\ud568\ub418\uc5b4 \uac1c\ubc1c\uc790\ub4e4\uc774 \ubcc0\uacbd \uc774\ub825\uc744 \ucd94\uc801\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc57c \ud569\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \ubd88\ud544\uc694\ud558\uac8c \ube48\ubc88\ud55c \uc5c5\ub370\uc774\ud2b8\ub098, \uc758\ub3c4\uce58 \uc54a\uc740 \uc218\uc815\uc73c\ub85c \uc778\ud574 \uc2a4\ub0c5\uc0f7 \ud30c\uc77c\uc774 \uc624\uc5fc\ub420 \uacbd\uc6b0, \ud14c\uc2a4\ud2b8\uc758 \uc2e0\ub8b0\ub3c4\uac00 \ub5a8\uc5b4\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc2a4\ub0c5\uc0f7 \ud30c\uc77c\uc758 \ubcc0\uacbd \uc0ac\ud56d\uc5d0 \ub300\ud55c \ub9ac\ubdf0 \ubc0f \uc2b9\uc778 \uc808\ucc28\ub97c \uba85\ud655\ud788 \ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n\uc138 \ubc88\uc9f8\ub85c, \ud14c\uc2a4\ud2b8\uc758 \uac00\ub3c5\uc131\uacfc \uc720\uc9c0\ubcf4\uc218\uc131\uc744 \ub192\uc774\uae30 \uc704\ud574 \uc2a4\ub0c5\uc0f7 \ub370\uc774\ud130\ub97c \uad6c\uc870\ud654\ud558\uace0, \ubd88\ud544\uc694\ud55c \ub370\uc774\ud130\uac00 \ud3ec\ud568\ub418\uc9c0 \uc54a\ub3c4\ub85d \uc8fc\uc758\ud574\uc57c \ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub80c\ub354\ub9c1 \uacb0\uacfc\uc5d0 \ud3ec\ud568\ub41c \ud0c0\uc784\uc2a4\ud0ec\ud504\ub098 \ub79c\ub364 \uac12 \ub4f1\uc740 \uc2a4\ub0c5\uc0f7 \ud14c\uc2a4\ud2b8 \uc2dc \ubd88\ud544\uc694\ud55c \ube44\uad50 \ub300\uc0c1\uc774 \ub420 \uc218 \uc788\uc73c\ubbc0\ub85c, \uc774\ub7ec\ud55c \ub370\uc774\ud130\ub97c \ud544\ud130\ub9c1\ud558\ub294 \ubc29\ubc95\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. \ub300\ud45c\uc801\uc73c\ub85c, \ud2b9\uc815 \ud504\ub85c\ud37c\ud2f0\ub97c \ubb34\uc2dc\ud558\ub3c4\ub85d \uc124\uc815\ud558\uac70\ub098, \ud5ec\ud37c \ud568\uc218\ub97c \ud65c\uc6a9\ud558\uc5ec \uc815\uaddc\ud654 \uacfc\uc815\uc744 \uac70\uce58\ub294 \ubc29\ubc95\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\ub124 \ubc88\uc9f8\ub85c, \ub2e4\uc591\ud55c \ud658\uacbd\uc5d0\uc11c Snapshot Testing\uc744 \uc801\uc6a9\ud558\uae30 \uc704\ud574 \ub3c4\uad6c \uc120\ud0dd\uc758 \ud3ed\uc774 \ub113\uc5b4\uc84c\uc2b5\ub2c8\ub2e4. React \uae30\ubc18\uc758 \ud504\ub808\uc784\uc6cc\ud06c\uc5d0\uc11c\ub294 Jest\uac00 \ub110\ub9ac \uc0ac\uc6a9\ub418\uc9c0\ub9cc, Vue.js\uc5d0\uc11c\ub294 vue-test-utils\uc640 Jest\uc758 \uc870\ud569, Angular\uc5d0\uc11c\ub294 Karma\uc640 Jasmine\uc744 \ud65c\uc6a9\ud55c Snapshot Testing \ubc29\uc2dd\uc774 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uac01 \ub3c4\uad6c\ub9c8\ub2e4 \uc9c0\uc6d0\ud558\ub294 \uae30\ub2a5\uacfc \uc124\uc815 \ubc29\ubc95\uc774 \ub2e4\ub974\uae30 \ub54c\ubb38\uc5d0, \ud504\ub85c\uc81d\ud2b8\uc758 \ud2b9\uc131\uc5d0 \ub9de\ucd94\uc5b4 \uc801\uc808\ud55c \ub3c4\uad6c\ub97c \uc120\uc815\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n\ub2e4\uc12f \ubc88\uc9f8\ub85c, Snapshot Testing \ub3c4\uad6c\ub4e4\uc740 CI\/CD \ud30c\uc774\ud504\ub77c\uc778\uc5d0 \uc27d\uac8c \ud1b5\ud569\ud560 \uc218 \uc788\ub3c4\ub85d \ub2e4\uc591\ud55c \ud50c\ub7ec\uadf8\uc778\uacfc \uc5f0\ub3d9 \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, CircleCI\ub098 Jenkins\uc640 \uac19\uc740 \ub3c4\uad6c\uc640 \uc5f0\ub3d9\ud558\uc5ec, \ucee4\ubc0b\ub9c8\ub2e4 \uc790\ub3d9\uc73c\ub85c Snapshot Testing\uc744 \uc2e4\ud589\ud558\uace0, \uc774\uc0c1 \uc9d5\ud6c4\uac00 \uac10\uc9c0\ub420 \uacbd\uc6b0 \uc989\uc2dc \uc54c\ub9bc\uc744 \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uac1c\ubc1c \uc8fc\uae30 \ub0b4\uc5d0 \ud68c\uadc0 \ubc84\uadf8\ub97c \ube60\ub974\uac8c \ubc1c\uacac\ud558\uace0 \ub300\uc751\ud560 \uc218 \uc788\ub294 \uc7a5\uc810\uc744 \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\uc5ec\uc12f \ubc88\uc9f8\ub85c, Snapshot Testing\uc740 \ub2e8\uc21c\ud788 UI \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub80c\ub354\ub9c1 \uacb0\uacfc\ubfd0 \uc544\ub2c8\ub77c, API \uc751\ub2f5\uc774\ub098 \ub370\uc774\ud130 \uad6c\uc870 \ub4f1 \ub2e4\uc591\ud55c \ucd9c\ub825 \uacb0\uacfc\ubb3c\uc5d0 \ub300\ud574 \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uba74, JSON \uc751\ub2f5\uc744 \uc2a4\ub0c5\uc0f7 \ud30c\uc77c\ub85c \uc800\uc7a5\ud558\uc5ec API\uc758 \uc751\ub2f5 \ud3ec\ub9f7\uc774 \ubcc0\uacbd\ub418\uc5c8\uc744 \ub54c \uc774\ub97c \uac10\uc9c0\ud558\ub294 \uc791\uc5c5\ub3c4 \uac00\ub2a5\ud558\uba70, \uc774\ub85c\uc368 \ubc31\uc5d4\ub4dc\uc640 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac04\uc758 \ub370\uc774\ud130 \uacc4\uc57d(Contract)\uc774 \uc81c\ub300\ub85c \uc720\uc9c0\ub418\uace0 \uc788\ub294\uc9c0 \uac80\uc99d\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\uc77c\uacf1 \ubc88\uc9f8\ub85c, Snapshot Testing\uc758 \ub2e8\uc810\uacfc \ud55c\uacc4 \uc5ed\uc2dc \uace0\ub824\ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uc9c0\ub098\uce58\uac8c \uc138\ubc00\ud55c \ube44\uad50\ub294 \uc624\ud788\ub824 \ud14c\uc2a4\ud2b8\uc758 \uc720\uc9c0\ubcf4\uc218\ub97c \uc5b4\ub835\uac8c \ub9cc\ub4e4 \uc218 \uc788\uc73c\uba70, UI \uc694\uc18c\uc758 \uc791\uc740 \ubcc0\uacbd\uc5d0\ub3c4 \ud14c\uc2a4\ud2b8\uac00 \uc2e4\ud328\ud560 \uc218 \uc788\ub294 \ub2e8\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c, \ubcc0\uacbd\uc758 \uc758\ub3c4\ub97c \uba85\ud655\ud788 \ud558\uae30 \uc704\ud574 \uc2a4\ub0c5\uc0f7 \uc5c5\ub370\uc774\ud2b8\uc5d0 \ub300\ud55c \uac00\uc774\ub4dc\ub77c\uc778 \ub9c8\ub828\uacfc, \ud14c\uc2a4\ud2b8 \ub300\uc0c1 \ub370\uc774\ud130\ub97c \uc120\ud0dd\uc801\uc73c\ub85c \uad6c\uc131\ud558\ub294 \uc804\ub7b5\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n\uc5ec\ub35f \ubc88\uc9f8\ub85c, Snapshot Testing\uc744 \ud6a8\uacfc\uc801\uc73c\ub85c \ud65c\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \ud14c\uc2a4\ud2b8 \ucf54\ub4dc\uc640 \uc2a4\ub0c5\uc0f7 \ud30c\uc77c \uac04\uc758 \uad00\uacc4\ub97c \uba85\ud655\ud788 \ud30c\uc545\ud560 \uc218 \uc788\ub294 \ubb38\uc11c\ud654\uac00 \ud544\uc218\uc801\uc785\ub2c8\ub2e4. \uac1c\ubc1c\uc790\ub4e4\uc774 \ubcc0\uacbd \uc0ac\ud56d\uc744 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\ub3c4\ub85d \uc2a4\ub0c5\uc0f7 \ud30c\uc77c \ub0b4\ubd80\uc5d0 \uc8fc\uc11d\uc744 \ub2e4\ub294 \ubc29\ubc95\uc774\ub098, \ubcc4\ub3c4\uc758 \ubcc0\uacbd \ub85c\uadf8\ub97c \ud568\uaed8 \uad00\ub9ac\ud558\ub294 \ub4f1\uc758 \ubc29\ubc95\uc744 \ud1b5\ud574 \ud300 \ub0b4 \ud611\uc5c5\uc744 \uac15\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\uc544\ud649 \ubc88\uc9f8\ub85c, \uae30\uc220 \ubc1c\uc804\uc5d0 \ub530\ub77c Snapshot Testing \ub3c4\uad6c \uc790\uccb4\ub3c4 \uafb8\uc900\ud788 \uc5c5\ub370\uc774\ud2b8\ub418\uace0 \uc788\uc73c\uba70, \ucd5c\uc2e0 \ubc84\uc804\uc5d0\uc11c\ub294 \uc131\ub2a5 \uac1c\uc120, \uc0ac\uc6a9\uc131 \ud5a5\uc0c1 \ubc0f \ub2e4\uc591\ud55c \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \uae30\ub2a5\uc774 \ucd94\uac00\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc640 \ud568\uaed8, \uc624\ud508\uc18c\uc2a4 \ucee4\ubba4\ub2c8\ud2f0\uc758 \ud65c\ubc1c\ud55c \ud65c\ub3d9\uc744 \ud1b5\ud574 \ub9ce\uc740 \uac1c\uc120 \uc0ac\ud56d\uc774 \ubc18\uc601\ub418\uace0 \uc788\uc73c\uba70, \uc774\ub97c \uc801\uc808\ud788 \ud65c\uc6a9\ud558\uba74 \ub354\uc6b1 \uacac\uace0\ud55c \ud14c\uc2a4\ud2b8 \ud658\uacbd\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\uc5f4 \ubc88\uc9f8\ub85c, \ub2e4\uc591\ud55c \uad6c\ud604 \ubc29\ubc95\uacfc \ub3c4\uad6c\ub97c \ud65c\uc6a9\ud55c Snapshot Testing\uc740 \uacb0\uad6d \uac1c\ubc1c \uc0dd\uc0b0\uc131 \ubc0f \uc548\uc815\uc131\uc744 \ub192\uc774\ub294 \ub370 \ud070 \uae30\uc5ec\ub97c \ud569\ub2c8\ub2e4. \uac1c\ubc1c\uc790\ub294 \uc2a4\ub0c5\uc0f7 \ube44\uad50\ub97c \ud1b5\ud574 UI \ubcc0\uacbd\uc758 \uc758\ub3c4\ub97c \uba85\ud655\ud788 \ud558\uace0, \ubd88\ud544\uc694\ud55c \ud68c\uadc0 \ubc84\uadf8\ub97c \uc0ac\uc804\uc5d0 \ubc1c\uacac\ud558\uc5ec \ub300\uc751\ud560 \uc218 \uc788\uc73c\uba70, \uc774\ub294 \uc81c\ud488\uc758 \ud488\uc9c8 \ud5a5\uc0c1 \ubc0f \uc2dc\uc7a5 \uacbd\uc7c1\ub825 \uac15\ud654\ub85c \uc774\uc5b4\uc9d1\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc774\uc720\ub85c Snapshot Testing\uc740 \uc55e\uc73c\ub85c\ub3c4 \uc9c0\uc18d\uc801\uc73c\ub85c \ubc1c\uc804\ud558\uace0, \ub2e4\uc591\ud55c \ud658\uacbd\uacfc \ub3c4\uad6c\uc5d0\uc11c \uadf8 \ud65c\uc6a9 \ubc94\uc704\ub97c \ub113\ud600 \ub098\uac08 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<h2 id=\"3-%ec%82%ac%eb%a1%80-%ec%97%b0%ea%b5%ac-%eb%b0%8f-%ec%84%b1%ea%b3%b5-%ec%82%ac%eb%a1%80-%eb%b6%84%ec%84%9d-FdQYRnKksP\">3. \uc0ac\ub840 \uc5f0\uad6c \ubc0f \uc131\uacf5 \uc0ac\ub840 \ubd84\uc11d<\/h2>\n\uc774 \uc139\uc158\uc5d0\uc11c\ub294 Snapshot Testing\uc744 \ub3c4\uc785\ud55c \uc2e4\uc81c \uc0ac\ub840\ub97c \uc911\uc2ec\uc73c\ub85c, \uc774 \uae30\ubc95\uc774 \uc5b4\ub5bb\uac8c \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c\uc758 \uc548\uc815\uc131\uacfc \uc0dd\uc0b0\uc131\uc744 \ub192\uc600\ub294\uc9c0 \uad6c\uccb4\uc801\uc778 \uc0ac\ub840 \uc5f0\uad6c\ub97c \ud1b5\ud574 \ubd84\uc11d\ud569\ub2c8\ub2e4. \ub2e4\uc591\ud55c \uc0b0\uc5c5 \ubd84\uc57c\uc5d0\uc11c Snapshot Testing\uc758 \uc131\uacf5 \uc0ac\ub840\ub294 \ud68c\uadc0 \ubc84\uadf8\ub97c \uc0ac\uc804\uc5d0 \ubc1c\uacac\ud558\uace0 \uc218\uc815\ud558\ub294 \ub370 \ud06c\uac8c \uae30\uc5ec\ud558\uc600\uc73c\uba70, \uadf8 \uacb0\uacfc \uc81c\ud488\uc758 \ud488\uc9c8 \ud5a5\uc0c1\uacfc \ube44\uc6a9 \uc808\uac10 \ud6a8\uacfc\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4.<\/p>\n\uccab \ubc88\uc9f8 \uc0ac\ub840\ub85c, \uc138\uacc4\uc801\uc778 IT \uae30\uc5c5 A\uc0ac\ub294 \ub300\uaddc\ubaa8\uc758 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294 \uacfc\uc815\uc5d0\uc11c Snapshot Testing\uc744 \ub3c4\uc785\ud558\uc5ec UI \ucef4\ud3ec\ub10c\ud2b8\uc758 \ubcc0\uacbd \uc0ac\ud56d\uc744 \uccb4\uacc4\uc801\uc73c\ub85c \uad00\ub9ac\ud558\uc600\uc2b5\ub2c8\ub2e4. \uae30\uc874\uc5d0\ub294 \uc218\ub3d9 UI \ud14c\uc2a4\ud2b8\uc5d0 \uc758\uc874\ud558\ub2e4 \ubcf4\ub2c8, \uc791\uc740 \ucf54\ub4dc \ubcc0\ud654\uc5d0\ub3c4 \ubd88\uad6c\ud558\uace0 \ubbf8\ucc98 \ud30c\uc545\ud558\uc9c0 \ubabb\ud55c \ud68c\uadc0 \ubc84\uadf8\uac00 \uc7a6\uc558\uc73c\ub098, Snapshot Testing \ub3c4\uc785 \ud6c4 \uc790\ub3d9 \ube44\uad50\ub97c \ud1b5\ud574 \uc2e0\uc18d\ud558\uac8c \ubb38\uc81c\ub97c \ubc1c\uacac\ud558\uace0 \ud574\uacb0\ud560 \uc218 \uc788\uc5c8\uc2b5\ub2c8\ub2e4. \uc774 \uacb0\uacfc, \ubc30\ud3ec \ud6c4 \ubc1c\uc0dd\ud558\ub294 \ubc84\uadf8\uc758 \uc218\uac00 30% \uc774\uc0c1 \uac10\uc18c\ud55c \uc0ac\ub840\uac00 \ubcf4\uace0\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\ub450 \ubc88\uc9f8 \uc0ac\ub840\ub85c, \uc2a4\ud0c0\ud2b8\uc5c5 B\uc0ac\ub294 \ubaa8\ubc14\uc77c \uc571 \uac1c\ubc1c \uc2dc Snapshot Testing\uc744 \ud65c\uc6a9\ud558\uc5ec \ub9e4\ubc88 \uc5c5\ub370\uc774\ud2b8\ub418\ub294 UI \ubc0f \ub370\uc774\ud130 \uc751\ub2f5 \ub370\uc774\ud130\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud558\uc600\uc2b5\ub2c8\ub2e4. \ud2b9\ud788, API \uc751\ub2f5 \ud3ec\ub9f7\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \ub370\uc774\ud130 \ubd88\uc77c\uce58 \ubb38\uc81c\ub97c \ubbf8\uc5f0\uc5d0 \ubc29\uc9c0\ud558\uae30 \uc704\ud574, API\uc758 JSON \uc751\ub2f5 \uacb0\uacfc\ub97c \uc2a4\ub0c5\uc0f7 \ud30c\uc77c\ub85c \uc800\uc7a5\ud558\uace0 \uc815\uae30\uc801\uc73c\ub85c \ube44\uad50\ud558\ub294 \uc2dc\uc2a4\ud15c\uc744 \uad6c\ucd95\ud558\uc600\uc2b5\ub2c8\ub2e4. \uc774\ub85c \uc778\ud574 \uc571 \uc5c5\ub370\uc774\ud2b8 \ud6c4 \uc0ac\uc6a9\uc790 \ubd88\ub9cc\uc774 \ud06c\uac8c \uc904\uc5b4\ub4e4\uc5c8\uc73c\uba70, \uc0ac\uc6a9\uc790 \ub9cc\uc871\ub3c4\uac00 25% \uc774\uc0c1 \ud5a5\uc0c1\ub418\uc5c8\ub2e4\ub294 \ud1b5\uacc4 \uc790\ub8cc\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\uc138 \ubc88\uc9f8 \uc0ac\ub840\ub85c, \uae00\ub85c\ubc8c \uc804\uc790\uc0c1\uac70\ub798 \ud50c\ub7ab\ud3fc C\uc0ac\ub294 \uc9c0\uc18d\uc801\uc778 \ub9b4\ub9ac\uc988\uc640 \ube48\ubc88\ud55c UI \uc5c5\ub370\uc774\ud2b8\ub85c \uc778\ud574 \ud14c\uc2a4\ud2b8 \uc790\ub3d9\ud654\uc758 \ud544\uc694\uc131\uc774 \ud06c\uac8c \ub300\ub450\ub41c \uc0c1\ud669\uc5d0\uc11c Snapshot Testing\uc744 \ud575\uc2ec \ud14c\uc2a4\ud2b8 \uc804\ub7b5\uc73c\ub85c \ucc44\ud0dd\ud558\uc600\uc2b5\ub2c8\ub2e4. \uc774 \uae30\uc5c5\uc740 \ub2e4\uc591\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c(React, Vue \ub4f1)\ub97c \ud63c\ud569\ud558\uc5ec \uc0ac\uc6a9\ud558\uace0 \uc788\uc5c8\uc73c\uba70, \uac01 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub80c\ub354\ub9c1 \uacb0\uacfc\ub97c \uc2a4\ub0c5\uc0f7\uc73c\ub85c \uad00\ub9ac\ud558\ub294 \ud1b5\ud569 \ud14c\uc2a4\ud2b8 \uc2dc\uc2a4\ud15c\uc744 \ub3c4\uc785\ud558\uc600\uc2b5\ub2c8\ub2e4. \uadf8 \uacb0\uacfc, \uc804\uccb4 \ud14c\uc2a4\ud2b8 \ucee4\ubc84\ub9ac\uc9c0\uac00 80% \uc774\uc0c1\uc73c\ub85c \uc99d\uac00\ud558\uc600\uace0, \ubc30\ud3ec \ud6c4 \ubc1c\uc0dd\ud558\ub294 UI \uad00\ub828 \ubc84\uadf8\uac00 \uac70\uc758 \uc81c\ub85c\uc5d0 \uac00\uae4c\uc6b4 \uc218\uc900\uc73c\ub85c \ub0ae\uc544\uc84c\uc2b5\ub2c8\ub2e4.<\/p>\n\ub124 \ubc88\uc9f8 \uc0ac\ub840\ub85c, \uae08\uc735\uad8c\uc758 D\uc0ac\ub294 \ub0b4\ubd80 \uc2dc\uc2a4\ud15c \ubc0f \uace0\uac1d\uc6a9 \ud3ec\ud138 \uc0ac\uc774\ud2b8 \uac1c\ubc1c\uc5d0 Snapshot Testing\uc744 \ub3c4\uc785\ud558\uc600\uc2b5\ub2c8\ub2e4. \uae08\uc735 \uc2dc\uc2a4\ud15c\uc740 \ubcf4\uc548\uacfc \uc2e0\ub8b0\uc131\uc774 \ub9e4\uc6b0 \uc911\uc694\ud55c\ub370, UI \ubc0f \ub370\uc774\ud130 \ucd9c\ub825\uc758 \uc791\uc740 \uc624\ub958\ub3c4 \ud070 \ubb38\uc81c\ub85c \uc774\uc5b4\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. D\uc0ac\ub294 Snapshot Testing\uc744 \ud1b5\ud574 \ub9e4 \ub9b4\ub9ac\uc988\ub9c8\ub2e4 UI\uc640 \ub370\uc774\ud130 \ucd9c\ub825\uc744 \uccb4\ud06c\ud558\uace0 \uc788\uc73c\uba70, \uc774\ub97c \ud1b5\ud574 \uc0ac\uc804\uc5d0 \ud68c\uadc0 \ubc84\uadf8\ub97c \ubc1c\uacac\ud558\uace0 \uae34\uae09 \ud328\uce58\ub97c \uc2e4\uc2dc\ud568\uc73c\ub85c\uc368 \uc2dc\uc2a4\ud15c \uc548\uc815\uc131\uc744 \uc720\uc9c0\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc2e4\uc81c\ub85c, Snapshot Testing \ub3c4\uc785 \uc774\ud6c4 \uc2dc\uc2a4\ud15c \uc7a5\uc560 \ubc1c\uc0dd \ube48\ub3c4\uac00 40% \uc774\uc0c1 \uac10\uc18c\ud55c \uac83\uc73c\ub85c \ubd84\uc11d\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\ub2e4\uc12f \ubc88\uc9f8 \uc0ac\ub840\ub85c, \uc624\ud508\uc18c\uc2a4 \ud504\ub85c\uc81d\ud2b8 E\ub294 \ub2e4\uc591\ud55c \uae30\uc5ec\uc790\uac00 \ub3d9\uc2dc\uc5d0 \ucf54\ub4dc\ub97c \uc218\uc815\ud558\uace0 \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \ud658\uacbd\uc5d0\uc11c Snapshot Testing\uc744 \ud1b5\ud574 \ubcc0\uacbd \uc0ac\ud56d\uc758 \uc815\ud655\uc131\uacfc \uc77c\uad00\uc131\uc744 \uc720\uc9c0\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 GitHub Actions\uc640 \uac19\uc740 CI \ub3c4\uad6c\uc640 \uc5f0\ub3d9\ud558\uc5ec \uc2a4\ub0c5\uc0f7 \ud14c\uc2a4\ud2b8\ub97c \uc790\ub3d9\ud654\ud558\uace0 \uc788\uc73c\uba70, \uc8fc\uc694 \uae30\uc5ec\uc790\ub4e4\uc774 \uc2a4\ub0c5\uc0f7 \uc5c5\ub370\uc774\ud2b8\uc5d0 \ub300\ud55c \ub9ac\ubdf0\ub97c \ucca0\uc800\ud788 \uc9c4\ud589\ud568\uc73c\ub85c\uc368 \ud488\uc9c8 \ub192\uc740 \uc18c\ud504\ud2b8\uc6e8\uc5b4\ub97c \uc720\uc9c0\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc2dc\uc2a4\ud15c \ub355\ubd84\uc5d0 E \ud504\ub85c\uc81d\ud2b8\ub294 \uc804 \uc138\uacc4 \uc218\ucc9c \uba85\uc758 \uc0ac\uc6a9\uc790\uc640 \uae30\uc5ec\uc790\ub85c\ubd80\ud130 \ub192\uc740 \uc2e0\ub8b0\ub97c \ubc1b\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\uc5ec\uc12f \ubc88\uc9f8 \uc0ac\ub840\ub85c, \ub300\ud615 \uac8c\uc784 \uac1c\ubc1c\uc0ac F\ub294 \uac8c\uc784 \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 UI \uc5d0\uc14b\uc758 \ubcc0\uacbd \uc0ac\ud56d\uc744 \ucd94\uc801\ud558\uae30 \uc704\ud574 Snapshot Testing \uae30\ubc95\uc744 \uc751\uc6a9\ud558\uc600\uc2b5\ub2c8\ub2e4. \uac8c\uc784 \uac1c\ubc1c \uacfc\uc815\uc5d0\uc11c\ub294 UI\uc640 \uadf8\ub798\ud53d \uc694\uc18c\uc758 \ubbf8\uc138\ud55c \ubcc0\ud654\ub3c4 \uac8c\uc784 \ud50c\ub808\uc774\uc5b4\uc758 \uacbd\ud5d8\uc5d0 \ud070 \uc601\ud5a5\uc744 \ubbf8\uce60 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0, F\uc0ac\ub294 \uac8c\uc784 UI\uc758 \uac01 \ud504\ub808\uc784\uc744 \uc2a4\ub0c5\uc0f7\uc73c\ub85c \uc800\uc7a5\ud558\uc5ec \uc2e4\uc2dc\uac04\uc73c\ub85c \ube44\uad50 \ubd84\uc11d\ud558\ub294 \uc2dc\uc2a4\ud15c\uc744 \ub3c4\uc785\ud588\uc2b5\ub2c8\ub2e4. \uc774 \uc2dc\uc2a4\ud15c\uc740 \uac8c\uc784 \uc5c5\ub370\uc774\ud2b8 \uc2dc \uae30\uc874 \uc694\uc18c\uc640\uc758 \ucc28\uc774\ub97c \uc2e0\uc18d\ud558\uac8c \ud3ec\ucc29\ud558\uc5ec, \ubc84\uadf8 \ubc1c\uc0dd \uc2dc \uc989\uac01 \ub300\uc751\ud560 \uc218 \uc788\uac8c \ud558\uc600\uace0 \uac8c\uc784 \ucd9c\uc2dc \uc774\ud6c4 \ub192\uc740 \uc548\uc815\uc131\uc744 \uc720\uc9c0\ud558\ub294 \ub370 \uae30\uc5ec\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n\uc77c\uacf1 \ubc88\uc9f8 \uc0ac\ub840\ub85c, \ub300\uae30\uc5c5 G\ub294 \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)\uc744 \uc0ac\uc6a9\ud558\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c API \uc751\ub2f5\uacfc \ub80c\ub354\ub9c1 \uacb0\uacfc\uc758 \uc815\ud655\uc131\uc744 \uc720\uc9c0\ud558\uae30 \uc704\ud574 Snapshot Testing\uc744 \ub3c4\uc785\ud588\uc2b5\ub2c8\ub2e4. \uc774 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \ub3d9\uc801 \ub370\uc774\ud130\uac00 \ud3ec\ud568\ub41c \uacb0\uacfc\ubb3c\uc758 \uc2a4\ub0c5\uc0f7\uc744 \uc0dd\uc131\ud558\uace0, \uc815\uaddc\ud654 \uacfc\uc815\uc744 \uac70\uccd0 \ube44\uad50\ud558\ub294 \ubcf5\ud569\uc801\uc778 \ud14c\uc2a4\ud2b8 \uae30\ubc95\uc774 \uc801\uc6a9\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uac1c\ubc1c\ud300\uc740 \uc774\ub85c \uc778\ud574 API \uc751\ub2f5\uc758 \ubbf8\uc138\ud55c \ud3ec\ub9f7 \uc624\ub958\ub3c4 \uc989\uc2dc \uac10\uc9c0\ud560 \uc218 \uc788\uc5c8\uace0, \uc774\ub97c \ud1b5\ud574 \uace0\uac1d \ub370\uc774\ud130 \ucc98\ub9ac \uc624\ub958\ub098 \uc0ac\uc6a9\uc131 \ubb38\uc81c\ub97c \uc608\ubc29\ud558\ub294 \ub370 \uc131\uacf5\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n\uc5ec\ub35f \ubc88\uc9f8 \uc0ac\ub840\ub85c, \uc911\uacac IT \uae30\uc5c5 H\ub294 \ubaa8\ub4c8\ud615 \uc124\uacc4\ub97c \ucc44\ud0dd\ud55c \ub300\uaddc\ubaa8 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8 \uac04\uc758 \uacb0\ud569\ub3c4\ub97c \ub0ae\ucd94\uace0 \ub3c5\ub9bd\uc801\uc778 \ud14c\uc2a4\ud2b8\ub97c \uc9c4\ud589\ud558\uae30 \uc704\ud574 Snapshot Testing\uc744 \uc0ac\uc6a9\ud588\uc2b5\ub2c8\ub2e4. H\uc0ac\ub294 \uac01 \ucef4\ud3ec\ub10c\ud2b8\ubcc4\ub85c \uac1c\ubcc4\uc801\uc778 \uc2a4\ub0c5\uc0f7\uc744 \uad00\ub9ac\ud558\uba74\uc11c, \uc608\uc0c1\uce58 \ubabb\ud55c UI \ubcc0\ud654\uac00 \ub2e4\ub978 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ubbf8\uce58\ub294 \uc601\ud5a5\uc744 \ud30c\uc545\ud560 \uc218 \uc788\ub3c4\ub85d \ud14c\uc2a4\ud2b8 \uc2dc\uc2a4\ud15c\uc744 \uad6c\uc131\ud558\uc600\uc2b5\ub2c8\ub2e4. \uc774\ub85c \uc778\ud574 \uc2dc\uc2a4\ud15c \uc804\ubc18\uc758 \uc720\uc9c0\ubcf4\uc218\uc131\uc774 \ud06c\uac8c \ud5a5\uc0c1\ub418\uc5c8\uc73c\uba70, \ubc84\uadf8 \ubc1c\uc0dd \uc2dc \ubb38\uc81c \uc9c0\uc810\uc744 \ube60\ub974\uac8c \uc2dd\ubcc4\ud560 \uc218 \uc788\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\uc544\ud649 \ubc88\uc9f8 \uc0ac\ub840\ub85c, \ud55c \uc911\uc18c\uae30\uc5c5 I\ub294 \ucd5c\uadfc \ud074\ub77c\uc6b0\ub4dc \ud658\uacbd\uc73c\ub85c \uc804\ud658\ud558\uba74\uc11c \ud14c\uc2a4\ud2b8 \uc790\ub3d9\ud654 \ub3c4\uad6c\ub97c \ub3c4\uc785\ud55c \uacfc\uc815\uc5d0\uc11c Snapshot Testing\uc758 \uc7a5\uc810\uc744 \uccb4\uac10\ud588\uc2b5\ub2c8\ub2e4. I\uc0ac\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc API \uc11c\ubc84\ub97c \ubaa8\ub450 \ub300\uc0c1\uc73c\ub85c \uc2a4\ub0c5\uc0f7 \uae30\ubc18 \ud14c\uc2a4\ud2b8\ub97c \uc2e4\uc2dc\ud568\uc73c\ub85c\uc368, \uac01 \uc5c5\ub370\uc774\ud2b8\ubcc4\ub85c \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \uc608\uc0c1\uce58 \ubabb\ud55c \ubb38\uc81c\ub4e4\uc744 \ubbf8\ub9ac \ubc29\uc9c0\ud558\uc600\uc2b5\ub2c8\ub2e4. \uc774 \uacb0\uacfc, \ud074\ub77c\uc6b0\ub4dc \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud6c4 \uc548\uc815\uc131\uc774 \ud06c\uac8c \ud5a5\uc0c1\ub418\uc5c8\uc73c\uba70, \uace0\uac1d \uc9c0\uc6d0 \uc694\uccad \uac74\uc218\uac00 \ub208\uc5d0 \ub744\uac8c \uac10\uc18c\ud55c \uc0ac\ub840\uac00 \ubcf4\uace0\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\uc5f4 \ubc88\uc9f8 \uc0ac\ub840\ub85c, \uae00\ub85c\ubc8c \ud611\uc5c5 \ud504\ub85c\uc81d\ud2b8 J\uc5d0\uc11c\ub294 \uc5ec\ub7ec \uad6d\uac00\uc758 \uac1c\ubc1c\uc790\ub4e4\uc774 \ub3d9\uc2dc\uc5d0 \ucf54\ub4dc\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \ud658\uacbd\uc5d0\uc11c Snapshot Testing\uc744 \ud1b5\ud574 \ucf54\ub4dc\uc758 \uc77c\uad00\uc131\uc744 \ud655\uc778\ud558\uc600\uc2b5\ub2c8\ub2e4. \uc774 \ud504\ub85c\uc81d\ud2b8\ub294 \ub2e4\uc591\ud55c \ubb38\ud654\uc801, \uc5b8\uc5b4\uc801 \ud2b9\uc131\uc774 \ubc18\uc601\ub41c UI \uc694\uc18c\ub4e4\uc744 \ud3ec\ud568\ud558\uace0 \uc788\uc5c8\uae30\uc5d0, \ubcc0\uacbd \uc0ac\ud56d\uc774 \uc2dc\uc2a4\ud15c \uc804\uccb4\uc5d0 \ubbf8\uce58\ub294 \uc601\ud5a5\uc744 \uc0ac\uc804\uc5d0 \ud655\uc778\ud558\ub294 \uac83\uc774 \ub9e4\uc6b0 \uc911\uc694\ud588\uc2b5\ub2c8\ub2e4. Snapshot Testing \ub3c4\uc785 \ud6c4, J \ud504\ub85c\uc81d\ud2b8 \ud300\uc740 UI \ubcc0\ud654\uc5d0 \ub530\ub978 \uc624\ub958 \ubc1c\uc0dd\ub960\uc744 50% \uc774\uc0c1 \ub0ae\ucd94\ub294 \uc131\uacfc\ub97c \uac70\ub450\uc5c8\uc73c\uba70, \uc0ac\uc6a9\uc790 \ud53c\ub4dc\ubc31\uc744 \ud1b5\ud574 \uc548\uc815\uc131\uacfc \uc2e0\ub8b0\uc131\uc774 \ud06c\uac8c \ud5a5\uc0c1\ub418\uc5c8\ub2e4\ub294 \ud3c9\uac00\ub97c \ubc1b\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\uc774\uc640 \uac19\uc774 \ub2e4\uc591\ud55c \uc0ac\ub840 \uc5f0\uad6c\ub97c \ud1b5\ud574 Snapshot Testing\uc774 \ud68c\uadc0 \ubc84\uadf8\ub97c \ubbf8\uc5f0\uc5d0 \ubc29\uc9c0\ud558\uace0, UI \ubc0f \ub370\uc774\ud130 \ucd9c\ub825\uc758 \uc77c\uad00\uc131\uc744 \uc720\uc9c0\ud558\ub294 \ub370 \uc5bc\ub9c8\ub098 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud558\ub294\uc9c0\ub97c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac01 \uc0ac\ub840\uc5d0\uc11c \ubcfc \uc218 \uc788\ub4ef\uc774, Snapshot Testing\uc740 \ub2e8\uc21c\ud55c \ud14c\uc2a4\ud305 \uae30\ubc95 \uc774\uc0c1\uc758 \uac00\uce58\ub97c \uc81c\uacf5\ud558\uba70, \ud504\ub85c\uc81d\ud2b8\uc758 \uaddc\ubaa8\uc640 \ubcf5\uc7a1\ub3c4\uc5d0 \uc0c1\uad00\uc5c6\uc774 \ud6a8\uc728\uc801\uc778 \ud68c\uadc0 \ud14c\uc2a4\ud2b8 \uc194\ub8e8\uc158\uc73c\ub85c \uc790\ub9ac \uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uae30\uc220\uc801 \uc811\uadfc\uc740 \uc81c\ud488\uc758 \ud488\uc9c8 \ud5a5\uc0c1\uc740 \ubb3c\ub860, \uac1c\ubc1c \ube44\uc6a9 \uc808\uac10\uacfc \ucd9c\uc2dc \uc8fc\uae30\uc758 \ub2e8\ucd95\uc5d0\ub3c4 \ud06c\uac8c \uae30\uc5ec\ud558\uc600\uc73c\uba70, \uc55e\uc73c\ub85c\ub3c4 \ub2e4\uc591\ud55c \uc0b0\uc5c5 \ubd84\uc57c\uc5d0\uc11c \uadf8 \ud65c\uc6a9\ub3c4\uac00 \ub354\uc6b1 \ud655\ub300\ub420 \uc804\ub9dd\uc785\ub2c8\ub2e4.<\/p>\n<h2 id=\"4-%eb%aa%a8%eb%b2%94-%ec%82%ac%eb%a1%80-%ec%a0%84%eb%9e%b5-%ea%b7%b8%eb%a6%ac%ea%b3%a0-%eb%af%b8%eb%9e%98-%eb%b0%9c%ec%a0%84-%eb%b0%a9%ed%96%a5-FdQYRnKksP\">4. \ubaa8\ubc94 \uc0ac\ub840, \uc804\ub7b5 \uadf8\ub9ac\uace0 \ubbf8\ub798 \ubc1c\uc804 \ubc29\ud5a5<\/h2>\n\ub9c8\uc9c0\ub9c9 \uc139\uc158\uc5d0\uc11c\ub294 Snapshot Testing\uc758 \ubaa8\ubc94 \uc0ac\ub840\uc640 \uc774\ub97c \ud65c\uc6a9\ud55c \uc804\ub7b5, \uadf8\ub9ac\uace0 \uc55e\uc73c\ub85c\uc758 \ubc1c\uc804 \ubc29\ud5a5\uc5d0 \ub300\ud574 \uc2ec\ub3c4 \uae4a\uac8c \ub17c\uc758\ud569\ub2c8\ub2e4. \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c \ud658\uacbd\uc740 \uc9c0\uc18d\uc801\uc73c\ub85c \ubcc0\ud654\ud558\uace0 \uc788\uc73c\uba70, Snapshot Testing \uc5ed\uc2dc \ub2e8\uc21c \ube44\uad50 \ub3c4\uad6c\ub97c \ub118\uc5b4 \ub2e4\uc591\ud55c \ud601\uc2e0\uc801\uc778 \uae30\ub2a5\ub4e4\uc744 \ud3ec\ud568\ud558\ub294 \ud14c\uc2a4\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\ub85c \ubc1c\uc804\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc640 \uad00\ub828\ud574 \uba85\ud655\ud55c \uac00\uc774\ub4dc\ub77c\uc778\uacfc \uc804\ub7b5\uc744 \uc81c\uc2dc\ud568\uc73c\ub85c\uc368, \uac1c\ubc1c\uc790\ub4e4\uc774 \ub354\uc6b1 \uc548\uc815\uc801\uc774\uace0 \ud6a8\uc728\uc801\uc778 \ud14c\uc2a4\ud2b8 \ud658\uacbd\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294 \uac83\uc774 \uc774 \uc139\uc158\uc758 \uc8fc\uc694 \ubaa9\ud45c\uc785\ub2c8\ub2e4.<\/p>\n\uccab\uc9f8, Snapshot Testing\uc744 \ud6a8\uacfc\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\uae30 \uc704\ud55c \ubaa8\ubc94 \uc0ac\ub840\ub85c\ub294 \uc2a4\ub0c5\uc0f7 \ud30c\uc77c\uc758 \uc8fc\uae30\uc801\uc778 \uad00\ub9ac \ubc0f \uac10\uc0ac\ub97c \uaf3d\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubaa8\ub4e0 \uc2a4\ub0c5\uc0f7 \ud30c\uc77c\uc740 \ubc84\uc804 \uad00\ub9ac \uc2dc\uc2a4\ud15c\uc5d0 \ud3ec\ud568\ub418\uc5b4, \ubcc0\uacbd \uc774\ub825\uacfc \ud568\uaed8 \uac1c\ubc1c\uc790\ub4e4\uc774 \uc218\uc815 \ub0b4\uc5ed\uc744 \uc27d\uac8c \ud30c\uc545\ud560 \uc218 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4. \ub610\ud55c, \ud300 \ub0b4\uc5d0\uc11c \uc2a4\ub0c5\uc0f7 \uc5c5\ub370\uc774\ud2b8 \uae30\uc900\uc744 \uba85\ud655\ud788 \ud558\uace0, \ubcc0\uacbd\uc758 \uc758\ub3c4\uc5d0 \ub300\ud55c \uc124\uba85\uc744 \ucd94\uac00\ud558\ub294 \uc790\uc138\ud55c \ub9ac\ubdf0 \uacfc\uc815\uc744 \ud1b5\ud574 \ubd88\ud544\uc694\ud55c \uc624\ub958\ub97c \ubc29\uc9c0\ud560 \ud544\uc694\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ud14c\uc2a4\ud2b8\uc758 \uc2e0\ub8b0\uc131\uc774 \ub192\uc544\uc9c0\uace0, \uc7a5\uae30\uc801\uc778 \uc720\uc9c0\ubcf4\uc218 \ube44\uc6a9\uc744 \ud6a8\uacfc\uc801\uc73c\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\ub458\uc9f8, Snapshot Testing \uc804\ub7b5 \uc218\ub9bd \uc2dc \ubd88\ud544\uc694\ud55c \ub370\uc774\ud130 \ub178\uc774\uc988\ub97c \ucd5c\uc18c\ud654\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub80c\ub354\ub9c1 \uacb0\uacfc\uc5d0 \ud3ec\ud568\ub41c \ud0c0\uc784\uc2a4\ud0ec\ud504, \ubb34\uc791\uc704 \uc0dd\uc131\ub41c ID \ub4f1\uc740 \ud14c\uc2a4\ud2b8 \uacb0\uacfc\uc5d0 \ubd88\ud544\uc694\ud558\uac8c \uc601\ud5a5\uc744 \ubbf8\uce60 \uc218 \uc788\uc73c\ubbc0\ub85c, \uc774\ub7ec\ud55c \ub370\uc774\ud130\ub97c \ud544\ud130\ub9c1\ud558\uac70\ub098 \uc815\uaddc\ud654\ud558\ub294 \uc804\ub7b5\uc744 \ucc44\ud0dd\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 \ud5ec\ud37c \ud568\uc218\ub098 \ubaa8\ub4c8\uc744 \ub3c4\uc785\ud558\uc5ec, \ud14c\uc2a4\ud2b8 \ub300\uc0c1 \ub370\uc774\ud130\ub97c \uc804\ucc98\ub9ac\ud55c \ud6c4 \ube44\uad50\ud558\ub294 \ubc29\ubc95\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc640 \uad00\ub828\ud574 \uc544\ub798\uc640 \uac19\uc740 \uc608\uc2dc \ucf54\ub4dc\ub97c \ucc38\uace0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre><code>function normalizeSnapshot(tree) {\n \/\/ tree \uac1d\uccb4\uc5d0\uc11c \ubd88\ud544\uc694\ud55c \uc18d\uc131(\uc608: \ud0c0\uc784\uc2a4\ud0ec\ud504, \ub79c\ub364 \uac12)\uc744 \uc81c\uac70\ud569\ub2c8\ub2e4.\n const { timestamp, randomValue, ...filteredTree } = tree;\n return filteredTree;\n}\n\ntest('\ucef4\ud3ec\ub10c\ud2b8 \uc2a4\ub0c5\uc0f7 \uc815\uaddc\ud654 \ud14c\uc2a4\ud2b8', () => {\n const component = renderer.create(<MyComponent \/>);\n let tree = component.toJSON();\n \/\/ \uc815\uaddc\ud654\ub41c \uacb0\uacfc\ub85c \uc2a4\ub0c5\uc0f7 \ube44\uad50\n expect(normalizeSnapshot(tree)).toMatchSnapshot();\n});\n <\/code><\/pre>\n\uc14b\uc9f8, Snapshot Testing\uc744 \uc9c0\uc18d\uc801\uc73c\ub85c \ubc1c\uc804\uc2dc\ud0a4\uae30 \uc704\ud574\uc11c\ub294 \ucd5c\uc2e0 \ub3c4\uad6c \ubc0f \uae30\ubc95\uc744 \uc801\uadf9\uc801\uc73c\ub85c \ub3c4\uc785\ud558\uace0, \ucee4\ubba4\ub2c8\ud2f0\uc640\uc758 \ud611\uc5c5\uc744 \ud1b5\ud574 \uc5c5\ub370\uc774\ud2b8 \uc815\ubcf4\ub97c \uacf5\uc720\ud558\ub294 \uac83\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. \uc624\ud508\uc18c\uc2a4 \ud504\ub85c\uc81d\ud2b8\ub098 \ub0b4\ubd80 \uae30\uc220 \ube14\ub85c\uadf8\ub97c \ud1b5\ud574 \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc774\ub098 \uac1c\uc120 \uc0ac\ud56d\uc744 \uc2e0\uc18d\ud558\uac8c \ud30c\uc545\ud558\uace0, \ud544\uc694\uc2dc \ub3c4\uad6c\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \uc804\ub7b5\uc774 \uc694\uad6c\ub429\ub2c8\ub2e4. \uc774\uc640 \uac19\uc740 \uc811\uadfc\uc740 \ud300 \ub0b4\ubd80\ubfd0\ub9cc \uc544\ub2c8\ub77c, \uc804\uccb4 \uac1c\ubc1c \uc0dd\ud0dc\uacc4\uc758 \uae30\uc220 \uc218\uc900\uc744 \ub192\uc774\ub294 \ub370\ub3c4 \ud06c\uac8c \uae30\uc5ec\ud560 \uac83\uc785\ub2c8\ub2e4.<\/p>\n\ub137\uc9f8, CI\/CD \ud30c\uc774\ud504\ub77c\uc778\uacfc\uc758 \uc5f0\ub3d9\ub3c4 \uc911\uc694\ud55c \ubaa8\ubc94 \uc0ac\ub840 \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. Snapshot Testing\uc740 \ucf54\ub4dc \uc81c\ucd9c \uc2dc \uc790\ub3d9\uc73c\ub85c \uc2e4\ud589\ub418\uc5b4 \ubcc0\uacbd \uc0ac\ud56d\uc744 \uc2e4\uc2dc\uac04\uc73c\ub85c \ubaa8\ub2c8\ud130\ub9c1\ud558\uace0, \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud560 \uacbd\uc6b0 \ube60\ub974\uac8c \ud53c\ub4dc\ubc31\uc744 \uc81c\uacf5\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ud06c\uac8c \ub450 \uac00\uc9c0 \uc774\uc810\uc744 \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uccab\uc9f8, \ucf54\ub4dc \ub9ac\ubdf0 \ub2e8\uacc4\uc5d0\uc11c \ubb38\uc81c\uc758 \uc6d0\uc778\uc744 \uc870\uae30\uc5d0 \ud30c\uc545\ud560 \uc218 \uc788\uace0, \ub458\uc9f8, \ubc30\ud3ec \uc774\uc804\uc5d0 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \uc911\ub300\ud55c \uc624\ub958\ub97c \uc608\ubc29\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Jenkins, CircleCI, GitHub Actions \ub4f1 \ub2e4\uc591\ud55c CI \ub3c4\uad6c\uc640 \uc5f0\ub3d9\ud558\uc5ec \ud6a8\uc728\uc801\uc778 \ud14c\uc2a4\ud2b8 \ud658\uacbd\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\ub2e4\uc12f\uc9f8, \ud14c\uc2a4\ud2b8 \uacb0\uacfc\uc758 \uc2dc\uac01\ud654\uc640 \ud788\uc2a4\ud1a0\ub9ac \uad00\ub9ac\ub294 \ud300 \ub0b4 \ud611\uc5c5\uc744 \uac15\ud654\ud558\ub294 \ub370 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \uac01 \ud14c\uc2a4\ud2b8 \uacb0\uacfc\ub97c \ub300\uc2dc\ubcf4\ub4dc\ub098 \uc0c1\uc138 \ub808\ud3ec\ud2b8 \ud615\ud0dc\ub85c \uc2dc\uac01\ud654\ud568\uc73c\ub85c\uc368, \uac1c\ubc1c\uc790\ub4e4\uc740 \ubcc0\uacbd \uc0ac\ud56d \ubc0f \ubc84\uadf8 \ubc1c\uc0dd \ucd94\uc774\ub97c \uc27d\uac8c \ud30c\uc545\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ud5a5\ud6c4 \ubc1c\uc0dd \uac00\ub2a5\ud55c \ubb38\uc81c\uc5d0 \ub300\ud574 \uc120\uc81c\uc801\uc73c\ub85c \ub300\uc751\ud560 \uc218 \uc788\uc73c\uba70, \ud14c\uc2a4\ud2b8 \ucee4\ubc84\ub9ac\uc9c0 \uac1c\uc120\uc5d0\ub3c4 \uae30\uc5ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\ub7ec \uc0ac\ub840\uc5d0\uc11c \ubcf4\ub4ef\uc774, \uac00\uc2dc\uc801\uc778 \uc815\ubcf4 \uc81c\uacf5\uc740 \ud300 \uc804\uccb4\uc758 \ud488\uc9c8 \uad00\ub9ac \ubb38\ud654 \ud655\ub9bd\uc5d0 \ud070 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/p>\n\uc5ec\uc12f\uc9f8, Snapshot Testing\uc744 \uc9c0\uc6d0\ud558\ub294 \ub2e4\uc591\ud55c \ud50c\ub7ec\uadf8\uc778\uacfc \ud655\uc7a5 \ub3c4\uad6c\ub97c \ud65c\uc6a9\ud558\ub294 \uac83\ub3c4 \uc911\uc694\ud55c \uc804\ub7b5\uc785\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ud2b9\uc815 UI \ubcc0\uacbd \uc0ac\ud56d\uc5d0 \ub300\ud574 \uc2dc\uac01\uc801\uc778 \ucc28\uc774\ub97c \uac15\uc870\ud558\ub294 \ub3c4\uad6c\ub098, \uc2a4\ub0c5\uc0f7 \ube44\uad50 \uacb0\uacfc\ub97c \ub354\uc6b1 \uc138\ubc00\ud558\uac8c \ubd84\uc11d\ud558\ub294 \ud655\uc7a5 \uae30\ub2a5 \ub4f1\uc744 \ud65c\uc6a9\ud558\uba74, \ud14c\uc2a4\ud2b8 \ud6a8\uc728\uc131\uc774 \ud06c\uac8c \uac1c\uc120\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc9c0\uc18d\uc801\uc778 \uae30\uc220 \ud2b8\ub80c\ub4dc \ubd84\uc11d\uacfc \ud568\uaed8 \uc774\ub97c \ubc18\uc601\ud55c \ub3c4\uad6c\uc758 \ub3c4\uc785\uc740 \uc7a5\uae30\uc801\uc778 \ud504\ub85c\uc81d\ud2b8 \uc548\uc815\uc131\uc744 \ubcf4\uc7a5\ud560 \uc218 \uc788\ub294 \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4.<\/p>\n\uc77c\uacf1\uc9f8, \ud300 \ub0b4 \uad50\uc721\uacfc \uc6cc\ud06c\uc0f5\ub3c4 Snapshot Testing \ud65c\uc6a9 \ubc29\uc548\uc744 \ud655\uc0b0\uc2dc\ud0a4\ub294 \uc911\uc694\ud55c \uc804\ub7b5\uc785\ub2c8\ub2e4. \uac1c\ubc1c\uc790\ub4e4\uc774 \uc0c8\ub85c\uc6b4 \ud14c\uc2a4\ud2b8 \ubc29\ubc95\ub860\uacfc \ub3c4\uad6c \uc0ac\uc6a9\ubc95\uc744 \uc775\ud790 \uc218 \uc788\ub3c4\ub85d \uc815\uae30\uc801\uc778 \uc138\ubbf8\ub098\uc640 \uad50\uc721 \ud504\ub85c\uadf8\ub7a8\uc744 \uc6b4\uc601\ud558\uace0, \ub0b4\ubd80 \ucf54\ub4dc \ub9ac\ubdf0\ub97c \ud1b5\ud574 \ubaa8\ubc94 \uc0ac\ub840\ub97c \uacf5\uc720\ud558\ub294 \ubb38\ud654\uac00 \ud615\uc131\ub418\uba74, \uc804\uccb4\uc801\uc778 \ud14c\uc2a4\ud2b8 \uc5ed\ub7c9\uc774 \ud06c\uac8c \uac15\ud654\ub429\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uac1c\ubc1c\uc790\ub4e4\uc740 \ubcc0\uacbd \uc0ac\ud56d\uc5d0 \ub300\ud55c \ub300\uc751\ub825\uc744 \ub192\uc774\uace0, \ud14c\uc2a4\ud2b8 \ucf54\ub4dc \uc791\uc131\uc758 \ud488\uc9c8\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\uc5ec\ub35f\uc9f8, \ubbf8\ub798 \ubc1c\uc804 \ubc29\ud5a5\uacfc \uad00\ub828\ud574\uc11c\ub294 Snapshot Testing\uc774 \uc778\uacf5\uc9c0\ub2a5(AI)\uc640 \uba38\uc2e0\ub7ec\ub2dd(ML) \uae30\ubc95\uacfc \uacb0\ud569\ub420 \uac00\ub2a5\uc131\uc774 \ub192\uc2b5\ub2c8\ub2e4. AI \uae30\ubc18\uc758 \ubcc0\ud654 \uac10\uc9c0 \uc2dc\uc2a4\ud15c\uc740 \uae30\uc874\uc758 \ub2e8\uc21c \ube44\uad50 \ubc29\ubc95\ubcf4\ub2e4 \ub354\uc6b1 \uc815\uad50\ud558\uac8c UI \ubcc0\ud654\uc758 \uc758\ub3c4\ub97c \ud30c\uc545\ud558\uace0, \ubd88\ud544\uc694\ud55c \uac70\uc9d3 \uc591\uc131\uc744 \ucd5c\uc18c\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, ML \uc54c\uace0\ub9ac\uc998\uc744 \ud1b5\ud574 \uacfc\uac70 \ud14c\uc2a4\ud2b8 \ub370\uc774\ud130\ub97c \ubd84\uc11d\ud558\uc5ec, \ud2b9\uc815 \ubcc0\uacbd \uc0ac\ud56d\uc774 \uc2e4\uc81c \ubc84\uadf8\ub85c \uc774\uc5b4\uc9c8 \uac00\ub2a5\uc131\uc744 \uc608\uce21\ud558\ub294 \uae30\ub2a5\uc774 \ucd94\uac00\ub41c\ub2e4\uba74, \ud68c\uadc0 \ud14c\uc2a4\ud2b8\uc758 \ud6a8\uacfc\ub294 \ub354\uc6b1 \uadf9\ub300\ud654\ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n\uc544\ud649\uc9f8, \uae30\uc220 \ubc1c\uc804\uacfc \ud568\uaed8 Snapshot Testing \ub3c4\uad6c\ub4e4\uc740 \uc810\ucc28 \uc0ac\uc6a9\uc790 \uce5c\ud654\uc801\uc778 \uc778\ud130\ud398\uc774\uc2a4\uc640 \uc124\uc815 \uc635\uc158\uc744 \uc81c\uacf5\ud558\uac8c \ub420 \uac83\uc785\ub2c8\ub2e4. \uac1c\ubc1c\uc790\ub4e4\uc774 \uc9c1\uad00\uc801\uc73c\ub85c \ud14c\uc2a4\ud2b8 \ud658\uacbd\uc744 \uad6c\uc131\ud558\uace0, \uacb0\uacfc\ubb3c\uc744 \uc27d\uac8c \ubd84\uc11d\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 UI\/UX \uac1c\uc120\uc740, \ud14c\uc2a4\ud2b8 \uc790\ub3d9\ud654\uc758 \ud575\uc2ec \uc694\uc18c\ub85c \uc790\ub9ac \uc7a1\uc744 \uc804\ub9dd\uc785\ub2c8\ub2e4. \ud2b9\ud788, \ubcf5\uc7a1\ud55c UI \ucef4\ud3ec\ub10c\ud2b8\uc640 \ub2e4\uc591\ud55c \ucd9c\ub825 \uacb0\uacfc\ubb3c\uc744 \ub2e4\ub8e8\ub294 \ud604\ub300 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c \ud658\uacbd\uc5d0\uc11c, \uc774\ub7ec\ud55c \ub3c4\uad6c\uc758 \ubc1c\uc804\uc740 \ud68c\uadc0 \ubc84\uadf8 \uc608\ubc29\uacfc \ud488\uc9c8 \uad00\ub9ac\uc5d0 \uc911\ub300\ud55c \uc601\ud5a5\uc744 \ubbf8\uce60 \uac83\uc785\ub2c8\ub2e4.<\/p>\n\uc5f4\ubc88\uc9f8\ub85c, Snapshot Testing\uc758 \ubbf8\ub798\ub294 \ub2e8\uc21c\ud788 \ucf54\ub4dc \ube44\uad50\uc5d0\uc11c \ubc97\uc5b4\ub098, \uc804\uccb4 \uac1c\ubc1c \uc0dd\ud0dc\uacc4\uc640 \ub354\uc6b1 \uae34\ubc00\ud558\uac8c \uc5f0\ub3d9\ub41c \ud1b5\ud569 \ud14c\uc2a4\ud2b8 \ud50c\ub7ab\ud3fc\uc73c\ub85c \uc9c4\ud654\ud560 \uac83\uc73c\ub85c \uc608\uc0c1\ub429\ub2c8\ub2e4. \uc774\ub294 \ub2e8\uc77c \ud504\ub85c\uc81d\ud2b8\uc5d0 \uad6d\ud55c\ub418\uc9c0 \uc54a\uace0, \uc5ec\ub7ec \ud504\ub85c\uc81d\ud2b8 \uac04\uc758 \ud14c\uc2a4\ud2b8 \uacb0\uacfc \uacf5\uc720, \ud1b5\uacc4\uc801 \ubd84\uc11d, \uadf8\ub9ac\uace0 \ubcc0\uacbd \uc774\ub825 \uad00\ub9ac \ub4f1\uc774 \ud3ec\ud568\ub41c \ud3ec\uad04\uc801 \ud14c\uc2a4\ud2b8 \uc194\ub8e8\uc158\uc73c\ub85c \ubc1c\uc804\ud560 \uac00\ub2a5\uc131\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc2dc\uc2a4\ud15c\uc740 \uacb0\uad6d \uac1c\ubc1c \ube44\uc6a9 \uc808\uac10, \ube60\ub978 \ud53c\ub4dc\ubc31 \ub8e8\ud504 \ud655\ubcf4, \uadf8\ub9ac\uace0 \uc81c\ud488 \ud488\uc9c8 \ud5a5\uc0c1\uc744 \ud1b5\ud574 \uc0b0\uc5c5 \uc804\ubc18\uc758 \uacbd\uc7c1\ub825\uc744 \uc81c\uace0\ud558\ub294 \ud575\uc2ec \uc5ed\ud560\uc744 \ud560 \uac83\uc785\ub2c8\ub2e4.<\/p>\n\uacb0\ub860\uc801\uc73c\ub85c, Snapshot Testing\uc740 \ud68c\uadc0 \ubc84\uadf8\ub97c \uc608\ubc29\ud558\uae30 \uc704\ud55c \uac15\ub825\ud55c \ub3c4\uad6c\ub85c\uc11c, \uc9c0\uc18d\uc801\uc778 \uae30\uc220 \ud601\uc2e0\uacfc \ubaa8\ubc94 \uc0ac\ub840 \uacf5\uc720\ub97c \ud1b5\ud574 \uc55e\uc73c\ub85c\ub3c4 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ub2f4\ub2f9\ud560 \uac83\uc785\ub2c8\ub2e4. \uac1c\ubc1c\uc790\ub4e4\uc740 \uc774\ub97c \ud1b5\ud574 UI \ubc0f \ub370\uc774\ud130 \ucd9c\ub825 \uacb0\uacfc\uc758 \ubcc0\ud654\uc5d0 \ubbfc\uac10\ud558\uac8c \ub300\uc751\ud558\uba70, \uc548\uc815\uc801\uc778 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uc81c\ud488\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc744 \uac83\uc785\ub2c8\ub2e4. \ud5a5\ud6c4 \uc778\uacf5\uc9c0\ub2a5 \ubc0f \uace0\uae09 \ubd84\uc11d \uae30\ubc95\uacfc\uc758 \uc735\ud569\uc774 \uc774\ub8e8\uc5b4\uc9c4\ub2e4\uba74, Snapshot Testing\uc740 \ub354\uc6b1 \uc815\uad50\ud558\uace0 \uc608\uce21 \uac00\ub2a5\ud55c \ud14c\uc2a4\ud2b8 \uc2dc\uc2a4\ud15c\uc73c\ub85c \ubc1c\uc804\ud560 \uac83\uc774\uba70, \uc804\uccb4 \uac1c\ubc1c \uc0dd\ud0dc\uacc4\uc5d0 \uae0d\uc815\uc801\uc778 \uc601\ud5a5\uc744 \ubbf8\uce60 \uac83\uc73c\ub85c \uae30\ub300\ub429\ub2c8\ub2e4.<\/p>\n\uc694\uc57d\ud558\uc790\uba74, Snapshot Testing\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \ud575\uc2ec \uc804\ub7b5\uacfc \ubaa8\ubc94 \uc0ac\ub840\ub97c \uac16\ucd94\uace0 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n<ul>\n<li>\uc2a4\ub0c5\uc0f7 \ud30c\uc77c\uc758 \uccb4\uacc4\uc801 \uad00\ub9ac\uc640 \ub9ac\ubdf0 \ud504\ub85c\uc138\uc2a4 \uac15\ud654<\/li>\n<li>\ubd88\ud544\uc694\ud55c \ub370\uc774\ud130 \uc815\uaddc\ud654\ub97c \ud1b5\ud55c \ube44\uad50 \ub300\uc0c1 \ucd5c\uc801\ud654<\/li>\n<li>CI\/CD \ud30c\uc774\ud504\ub77c\uc778 \ub0b4 \uc790\ub3d9\ud654 \ud14c\uc2a4\ud2b8 \uad6c\ud604<\/li>\n<li>\ud14c\uc2a4\ud2b8 \uacb0\uacfc\uc758 \uc2dc\uac01\ud654 \ubc0f \ud788\uc2a4\ud1a0\ub9ac \uad00\ub9ac<\/li>\n<li>\ucd5c\uc2e0 \ub3c4\uad6c\uc640 \ud655\uc7a5 \uae30\ub2a5\uc744 \ud65c\uc6a9\ud55c \ud14c\uc2a4\ud2b8 \ud6a8\uc728\uc131 \uc99d\ub300<\/li>\n<li>\ud300 \ub0b4\ubd80 \uad50\uc721\uacfc \ubaa8\ubc94 \uc0ac\ub840 \uacf5\uc720 \ubb38\ud654 \ud655\uc0b0<\/li>\n<li>AI\/ML \uae30\ubc18 \uc608\uce21 \ubc0f \ubcc0\ud654 \uac10\uc9c0 \uc2dc\uc2a4\ud15c \ub3c4\uc785<\/li>\n<\/ul>\n\uc774\uc640 \uac19\uc774 \ubaa8\ubc94 \uc0ac\ub840\ub97c \uae30\ubc18\uc73c\ub85c \ud55c Snapshot Testing\uc740, \ud604\uc7ac\uc758 \ud68c\uadc0 \ud14c\uc2a4\ud2b8 \ubb38\uc81c\uc810\uc744 \ud6a8\uacfc\uc801\uc73c\ub85c \uadf9\ubcf5\ud560 \ubfd0\ub9cc \uc544\ub2c8\ub77c, \uc9c0\uc18d\uc801\uc778 \uae30\uc220 \ubc1c\uc804\uacfc \ud568\uaed8 \uc804\uccb4 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c \uc0dd\ud0dc\uacc4\uc758 \uc911\uc694\ud55c \ucd95\uc73c\ub85c \uc790\ub9ac \uc7a1\uc744 \uac83\uc785\ub2c8\ub2e4. \uac1c\ubc1c\uc790\ub4e4\uc740 \uc774\ub7ec\ud55c \ud14c\uc2a4\ud2b8 \uc804\ub7b5\uc744 \uc801\uadf9 \ud65c\uc6a9\ud568\uc73c\ub85c\uc368, \uc81c\ud488 \ucd9c\uc2dc \ud6c4 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \ub2e4\uc591\ud55c \ubb38\uc81c\ub97c \uc0ac\uc804\uc5d0 \uc608\ubc29\ud558\uace0, \uc548\uc815\uc801\uc778 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uc6b4\uc601 \ud658\uacbd\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\ub9c8\uc9c0\ub9c9\uc73c\ub85c, Snapshot Testing \ud328\ud134\uc740 \uac1c\ubc1c \ucd08\uae30 \ub2e8\uacc4\ubd80\ud130 \ubc30\ud3ec \ud6c4 \uc6b4\uc601\uae4c\uc9c0 \uc804\ubc18\uc801\uc778 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uc0dd\uba85\uc8fc\uae30\uc5d0\uc11c \uc911\uc694\ud55c \uc5ed\ud560\uc744 \uc218\ud589\ud569\ub2c8\ub2e4. \uc548\uc815\uc801\uc778 \ud14c\uc2a4\ud2b8 \ud658\uacbd \uad6c\ucd95\uacfc \ud568\uaed8, \uc9c0\uc18d\uc801\uc778 \ub3c4\uad6c \uc5c5\ub370\uc774\ud2b8 \ubc0f \ubaa8\ubc94 \uc0ac\ub840 \uc801\uc6a9\uc740 \ud5a5\ud6c4 \ub354\uc6b1 \ubcf5\uc7a1\ud574\uc9c0\ub294 \uac1c\ubc1c \ud658\uacbd\uc5d0\uc11c \uac1c\ubc1c\uc790\ub4e4\uc774 \uc2e0\ub8b0\ud560 \uc218 \uc788\ub294 \uacb0\uacfc\ub97c \ub3c4\ucd9c\ud558\ub3c4\ub85d \ub3c4\uc640\uc904 \uac83\uc785\ub2c8\ub2e4. \ub530\ub77c\uc11c \ubaa8\ub4e0 \ud300\uacfc \uc870\uc9c1\uc740 Snapshot Testing\uc758 \ub3c4\uc785 \ubc0f \ucd5c\uc801\ud654\ub97c \uc704\ud574 \uc9c0\uc18d\uc801\uc73c\ub85c \ub178\ub825\ud574\uc57c \ud558\uba70, \uc774\ub97c \ud1b5\ud574 \uc7a5\uae30\uc801\uc778 \uc81c\ud488 \uc2e0\ub8b0\uc131\uacfc \uc2dc\uc7a5 \uacbd\uc7c1\ub825\uc744 \ud655\ubcf4\ud560 \uc218 \uc788\uc744 \uac83\uc785\ub2c8\ub2e4.<\/p>\n\uac15\ub825\ud55c \uc694\uc57d: Snapshot Testing\uc740 UI \ubc0f \ucd9c\ub825 \uacb0\uacfc\ub97c \uc2a4\ub0c5\uc0f7 \ud615\ud0dc\ub85c \uae30\ub85d, \ube44\uad50\ud568\uc73c\ub85c\uc368 \ud68c\uadc0 \ubc84\uadf8\ub97c \uc870\uae30\uc5d0 \ubc1c\uacac\ud558\uace0 \ub300\uc751\ud560 \uc218 \uc788\ub294 \ud6a8\uacfc\uc801\uc778 \ud14c\uc2a4\ud2b8 \ubc29\ubc95\ub860\uc785\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ucf54\ub4dc \ubcc0\uacbd\uc73c\ub85c \uc778\ud55c \uc608\uae30\uce58 \uc54a\uc740 \uc624\ub958\ub97c \uc608\ubc29\ud558\uace0, \uc0ac\uc6a9\uc790 \uacbd\ud5d8 \ubc0f \uc81c\ud488 \ud488\uc9c8\uc744 \ub192\uc774\uba70, \uc804\ubc18\uc801\uc778 \uac1c\ubc1c \uc0dd\uc0b0\uc131\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc55e\uc73c\ub85c AI\uc640\uc758 \uc811\ubaa9 \ub4f1 \ud601\uc2e0\uc801\uc778 \uae30\uc220 \ubc1c\uc804\uc744 \ud1b5\ud574 \ub354\uc6b1 \uc815\uad50\ud574\uc9c4 Snapshot Testing \uae30\ubc95\uc740, \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c \uc0b0\uc5c5\uc758 \uc911\uc694\ud55c \ubbf8\ub798 \uae30\uc220 \uc911 \ud558\ub098\ub85c \uc790\ub9ac\ub9e4\uae40\ud560 \uac83\uc785\ub2c8\ub2e4.<\/p>\n\uc774\uc0c1\uc758 \ub0b4\uc6a9\uc744 \uc885\ud569\ud558\uba74, Snapshot Testing\uc740 \ub2e8\uc21c \ube44\uad50 \ub3c4\uad6c \uc774\uc0c1\uc758 \uac00\uce58\uc640 \uc804\ub7b5\uc801 \uc911\uc694\uc131\uc744 \ub0b4\ud3ec\ud558\uace0 \uc788\uc73c\uba70, \uc9c0\uc18d \uac00\ub2a5\ud55c \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c\uacfc \ud488\uc9c8 \uad00\ub9ac\ub97c \uc704\ud55c \ud544\uc218\uc801\uc778 \uad6c\uc131 \uc694\uc18c\uc785\ub2c8\ub2e4. \uac1c\ubc1c\uc790\uc640 \uc870\uc9c1 \ubaa8\ub450\uac00 \uc774\uc5d0 \ub300\ud55c \uc774\ud574\ub97c \ub192\uc774\uace0, \uc801\uadf9\uc801\uc73c\ub85c \ud65c\uc6a9\ud568\uc73c\ub85c\uc368 \ubcf4\ub2e4 \uc548\uc815\uc801\uc774\uace0 \ud6a8\uc728\uc801\uc778 \uac1c\ubc1c \ud658\uacbd\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\uc744 \uac83\uc785\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"Snapshot Testing \ud328\ud134\uc740 UI\ub098 \ucd9c\ub825 \uacb0\uacfc\ub97c \uc2a4\ub0c5\uc0f7\uacfc \ube44\uad50\ud558\uc5ec \ud68c\uadc0 \ubc84\uadf8\ub97c \uc2e0\uc18d\ud558\uac8c \uac10\uc9c0\ud560 \uc218 \uc788\ub294 \ud6a8\uacfc\uc801\uc778 \uac80\uc99d \uae30\ubc95\uc785\ub2c8\ub2e4.<\/p>\n","protected":false},"author":1,"featured_media":55125,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1957],"tags":[2119,2083,2052],"class_list":["post-55121","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-api","tag-react","tag-testing"],"acf":[],"_links":{"self":[{"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/posts\/55121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/comments?post=55121"}],"version-history":[{"count":1,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/posts\/55121\/revisions"}],"predecessor-version":[{"id":55124,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/posts\/55121\/revisions\/55124"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/media\/55125"}],"wp:attachment":[{"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/media?parent=55121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/categories?post=55121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/m9js.shop\/blog\/wp-json\/wp\/v2\/tags?post=55121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":55121,"date":"2025-03-08T19:31:19","date_gmt":"2025-03-08T10:31:19","guid":{"rendered":"https:\/\/m9js.shop\/blog\/development\/snapshot-testing-pattern-find-regression-bugs-by-comparing-ui-or-output-results-to-snapshots"},"modified":"2025-03-08T19:31:21","modified_gmt":"2025-03-08T10:31:21","slug":"snapshot-testing-pattern-find-regression-bugs-by-comparing-ui-or-output-results-to-snapshots","status":"publish","type":"post","link":"https:\/\/m9js.shop\/blog\/development\/snapshot-testing-pattern-find-regression-bugs-by-comparing-ui-or-output-results-to-snapshots","title":{"rendered":"Snapshot Testing \ud328\ud134: UI\ub098 \ucd9c\ub825 \uacb0\uacfc\ub97c \uc2a4\ub0c5\uc0f7\uc73c\ub85c \ube44\uad50\ud574 \ud68c\uadc0 \ubc84\uadf8 \ubc1c\uacac"},"content":{"rendered":"

\n
\ubaa9\ucc28<\/h2>\n