diff --git a/.firebase/hosting.ZGlzdC9iaW4vYWRldi9idWlsZC9icm93c2Vy.cache b/.firebase/hosting.ZGlzdC9iaW4vYWRldi9idWlsZC9icm93c2Vy.cache
new file mode 100644
index 000000000000..5d7d7a404272
--- /dev/null
+++ b/.firebase/hosting.ZGlzdC9iaW4vYWRldi9idWlsZC9icm93c2Vy.cache
@@ -0,0 +1,1538 @@
+api-reference-list.component.css.map,1742567121429,3717e963940fc92e764af43ef477f1dd144d300b3775ce91bde6f655420f5eef
+chunk-5ELMQMYE.js,1742567121379,ca552ac856ce4830dd82ad5184c558863b3cb7ca13f1253dbaeb47d92aafbe96
+chunk-5ELMQMYE.js.map,1742567121378,afe29ad5572d18504a63c543c91e40ef902b48b96625e21db2e83eaafc69bedd
+api-items-section.component.css.map,1742567121429,0b3eb5e5a63e24dd6b64252e663ac12dc7e9cb3f84160eb82d4fc805350fa186
+api-reference-details-page.component.css.map,1742567121429,1bb5eb331b733f0307df886dd2af571bb2d85f14d457f1ba08757852bf98678d
+app.component.css.map,1742567121429,a5f8a814dc3a15b1fe8e093fb402ae429fc97c624f220768b2916b0ff0fd4de6
+chunk-DVZPGCWK.js.map,1742567121427,270b2ef8e517b9f0a5405ebc34c861360aad2e35562175783e45013fa2a11105
+chunk-DVZPGCWK.js,1742567121427,10d7d8a0e17b52ec076b660475e1277d07f3fee4b7c50aaa9efadc98a8133b30
+chunk-DYBZWTTG.js,1742567121379,5836a72867dc817df439ab9e330227195ffc8108784d46001f6b5b31596b872f
+chunk-E4ZKEAWN.js,1742567121378,597c954b38d93537a16fd3f290e60b78c87e528824a89003a48e5bf230c68864
+chunk-EAIT4MI7.js,1742567121429,c83d668c016fb7f6797d8ba3d0f4b289ad83ee87b1e24f010dea01afe7f6bee7
+chunk-EAIT4MI7.js.map,1742567121433,8c7373bc1dbd7a2eab22866dbd83ab779a6e6229ba63aede4cf3619fb6f26323
+chunk-G5KYQXNF.js,1742567121379,5a078abc2ed24d7513eab0010a417c6d5ebdbfa8f8f8d5e9a221b74d7f35d3d0
+chunk-DYBZWTTG.js.map,1742567121379,310a9ec23a96a0e28203e56ca16251608a20141ee4a411b1f52cffd93d885ee7
+chunk-E4ZKEAWN.js.map,1742567121378,24171f8c67300e1a967d205245cb445c9f00ea2cdc657ad47c2da9ff13f2c67a
+chunk-G5KYQXNF.js.map,1742567121379,a5fef018eb841db30e10a7919578f1554938f744069e78f6fda56c7fcd0db1e2
+chunk-L7FBWR7L.js,1742567121378,ed0b1501afba2375181a8ff774810e1950561e05669732e116e1549e22ec574b
+chunk-L7FBWR7L.js.map,1742567121379,6ba208a4e780442a756715dc44c139be110ceba06d1e07f09d7cfb5dac5374ef
+chunk-HJSZGJNU.js,1742567121428,b6cdab3de90cb4955055e47cfac04a44da3a4f2efebba5d10073c4530c1c78f1
+chunk-HJSZGJNU.js.map,1742567121428,c2399c3984c569fc2676efcda8f8408a7507c0f85a5d9db8ebd0d32ef1cfd706
+chunk-M76KBEJJ.js,1742567121379,25b4968af5b00267d0514e3d3624c2852f138c2a57e0ea6efc0ffab44768465e
+chunk-NWFZAPIQ.js,1742567121427,8de25043a78a0bf742908d6ca87ba95d2c614edb0bd01d8218b82783949b33ae
+chunk-OWI2WYQS.js.map,1742567121428,a89ca97d7b16f1d46f963db51a3d2d28a461143b671a909a22cda2f7b0ba5b9b
+chunk-M76KBEJJ.js.map,1742567121378,6356c10eb6512ddf2c4b029dbb55fbab4f885cb2e5ad01ea521f11fc9f5e6bac
+chunk-NWFZAPIQ.js.map,1742567121427,afe29ad5572d18504a63c543c91e40ef902b48b96625e21db2e83eaafc69bedd
+chunk-OWI2WYQS.js,1742567121428,0d14f556870998cc3b8f297f116f8da644a052be3c7396daf2e7f44d3c04885c
+chunk-ULLHZYJS.js,1742567121427,58b30537093890b8eb0ebbcc8fd704722d900b627da7a4679f75d916d44f862a
+chunk-VDXNPWWZ.js.map,1742567121381,1de6a3736640b07f58a96acd054aea348ba8a03ea987950f4f7e628c48587c04
+chunk-VDXNPWWZ.js,1742567121379,b280a106449233c43931d2752577012593580c4778fe427da6cd953229e7e179
+chunk-ULLHZYJS.js.map,1742567121427,afe29ad5572d18504a63c543c91e40ef902b48b96625e21db2e83eaafc69bedd
+chunk-FNRAOLJP.js,1742567121426,4f5877d85df5872e04b03eed7735452dcb6bdbe500ec7b309a3f952a568aa109
+chunk-B3AYJFXO.js,1742567121378,b02aab52cd1f26a6d18d6f57335475068a90857d6679546dbf3db46a431ba8da
+chunk-B3AYJFXO.js.map,1742567121378,d3de085a0bdcf417ea82b65ab96c65c33dd338d6706ac0c3bed82191c3baa5d1
+chunk-FNRAOLJP.js.map,1742567121428,477bf599b5b77a4f3ba1da92f568b3526da0768c36da6d9126bbe5085c21fe05
+chunk-T3QFQXTK.js,1742567121427,5c0c236578f8e14dae85208811ff8e1a0a159899e2069e508f0bad4f4f980a73
+chunk-NRMPW26I.js,1742567121428,77a0590d09f70ec1d22ade1b8739dd005909a1ea4e98d81122e01e79654ec64d
+chunk-Y54KV5WX.js,1742567121379,bbd87c865c253017cffd75ba315114122597e968f4e1cf9a09d1558f03dc8e80
+chunk-Y54KV5WX.js.map,1742567121381,47c38e4d40fedc27d9146b2fc117ac29bb5712c82645986b8b03b19eb12c8735
+cli-reference-details-page.component.css.map,1742567121429,03769318dc856cb436354dced3c1ca0ce7ab5f0ed3499277268f96fdc6c5a022
+code-editor.component.css.map,1742567121433,b9b07ae616b243ff06c6586ae3c6a2a2158c0eb3709f3c675841844907138ae5
+docs.component.css.map,1742567121429,4e16b82e529eccc3b05d96f5d95a264e5f7c658bacc87b8e09c1229c9972d5bd
+error-snack-bar.css.map,1742567121429,11b4c655e391f0f7ce69a8e8276f519a21d75d4fb2b2c6ea6f47d7d04e987d23
+embedded-editor.component.css.map,1742567121429,d8fa310401dbb3ed798be3eaf8a34a08760bf39e16b9905811af27b7a5e7677b
+home.component.css.map,1742567121438,ce24a4339ce411baf78fd2377d103a80e11bbda36f40281d4f0ccd5bbe9f4805
+footer.component.css.map,1742567121429,0e7116d9caf77a9958d00c05081e9bfd35b1c089a2f3d70309e5eff56ac94ef1
+favicon.ico,1742567120813,82d0472d0e7cd2b3f28ddc8563bee7b857747a9fb0c8cd112ac0b4052a955046
+index.csr.html,1742567121579,48fa666d8d8dcecea005228b71d0399481fee49ad02bd582a44705a4d14d2eda
+home-animation.component.css.map,1742567121429,e4ff3e6e9fe1cf7982d6089a2ed21a6625d73692c850e967289ba868e90f604f
+mini-menu.css.map,1742567121430,a779d2404fbc3681138880dbc0cd0300dc79558ec34dc8c1eed3b48c02fddbd5
+nav-item.css.map,1742567121429,524bc6e7e2375a034a0f17c551a937d3b7569000e81b29af1c9dfd61a76fd462
+navigation.component.css.map,1742567121429,aab1ff7f8afcbf943c2229c2e4e2fe306365d004e9407c316ce756c999d82395
+playground.component.css.map,1742567121429,9a9189f367aa4a75bf08b60f735f72ce218cf4091f9a8ab5d0beb4cf3af9d363
+preview-error.component.css.map,1742567121429,dffafaa2187f7fe749f85a53ab1b68104f62f396ae6125eb6673b549034bff72
+robots.txt,1742567120812,7c7dcbd76930edf38f916f3b93d4121ada1859632aa3f8e4b64d3571fe77a03e
+preview.component.css.map,1742567121429,d0557919fbe139306a2eadee79862abd1d1b96246f054d7e7f86f01aa2e87915
+secondary-navigation.component.css.map,1742567121429,c0d4596210b3e433b9d07a62d418cd68f3984a24732f1bc53f9a7cef6b879457
+terminal.component.css.map,1742567121429,ff1b3ab69e8a4dbfa9d9ef92d8039bc21833aeec3e8035ee9be8cd7fea504159
+tutorial-navigation-list.css.map,1742567121429,4835115d74f9e11d949769d892091d8ee3a1771293807c54f668635f9146faae
+chunk-T3QFQXTK.js.map,1742567121427,29854aa92e87c05ed6c02f73fe27a8a6306cf2a5186a72fcefd3716182c1456f
+chunk-Y6PFTRUN.js,1742567121427,724777a5369456271bb7f01344afbdfccc902672f1a7c184ff40ffb65ab6c113
+tutorial-navigation.css.map,1742567121430,ccb32d20bcc96a3be6da1e47ffcc92b4317809a36ecc0bb8d4522edb80291737
+styles.css,1742567121579,3ae21d40cbd96458e24a6b9018c1e7dbc8aedacabcbb5a931d946e69e45a32e8
+tutorial.component.css.map,1742567121433,ea52077461e79837790b76a13b65db38c3891b80c154c38d596e1a36dcd6179a
+chunk-NRMPW26I.js.map,1742567121427,c363132e22d825cc6ae039f0e268581306ebe2c75476b0bc54b51786a8b2dccc
+update.component.css.map,1742567121429,0ebded68cbf39fef966d1a8101327dbee3294a9f0d808c92203571381b3cd82b
+chunk-Y6PFTRUN.js.map,1742567121427,2a7fde991fd862a53913021659a8b6ecf6ab8abdafbbbb3703e98d5bc5664ed6
+styles.css.map,1742567121579,d4bebc4baba781ea6be68b9221c7406a15dbc999a10c613333f683804bd280a9
+assets/content/api/angular_animations_AUTO_STYLE_constant.html,1742567121123,87fb757c2d8eb1a273b430936f949e317e5fdffb51626acad320d6f75adbfe1b
+assets/content/error.md.html,1742567120817,0af00bd9c4859603633b661cf2e232611881168631632533a7c35282f1acacac
+assets/content/api/angular_animations_AnimateChildOptions_interface.html,1742567121133,b12f8a157dfb92c09a9b193b5c33a273538ef6fba247d7c479b73b818fe39b0c
+assets/content/api/angular_animations_AnimationAnimateChildMetadata_interface.html,1742567121133,02133ced71faaa1d06495e33f31b55e1b1547d19bbf70719791f08c21078da85
+assets/content/api/angular_animations_AnimateTimings_type_alias.html,1742567121136,af3cd4e81f6ee7d1521610b9ef5b23b8b86e2e0eaa4aa316f86f2c5f08ed4283
+assets/content/api/angular_animations_AnimationAnimateRefMetadata_interface.html,1742567121133,a21dc8396e1c90bef36ffef412bc01eb04b0e38344c3a79252a0b7a1a2d0943b
+assets/content/api/angular_animations_AnimationAnimateMetadata_interface.html,1742567121133,e22a501bc9dd074cdd37b1f1ae331555a7b9cae3374feea68ed257823ff72b9c
+assets/content/api/angular_animations_AnimationBuilder_undecorated_class.html,1742567121135,84332e9aad01ecbb9dffa84f212ad5e9aebc83fd867cbcf829099751439f6c9d
+assets/content/api/angular_animations_AnimationEvent_interface.html,1742567121135,940966e3870b1692399564295c997d989b6a16850815a571fc40c9b6d202d0c5
+assets/content/api/angular_animations_AnimationFactory_undecorated_class.html,1742567121134,ae45f67d6d7f44fed05e7962e1e47c66d210459b63cbb0caaed43b9eb3a26ba3
+assets/content/api/angular_animations_AnimationGroupMetadata_interface.html,1742567121134,d9d6d2e8e740199118aae40acc0dc9df5a6daf1d0275cf6fd72a6b6d86e31d87
+assets/content/api/angular_animations_AnimationKeyframesSequenceMetadata_interface.html,1742567121135,ba0e37fed8cf3ef9c64785b30ca9b262ccb43bbde16cb3cd39ecc32fa17cca74
+assets/content/api/angular_animations_AnimationMetadataType_enum.html,1742567121135,3be90dbbaa4cef14fc613bebe5463933fff61fceca522fd2ac2ba0f5d1bf9da8
+assets/content/api/angular_animations_AnimationMetadata_interface.html,1742567121136,17db5b0d6723cacc80e2a505382ed4d72bf57d1cdee151a370ff51bbfb16c3eb
+assets/content/api/angular_animations_AnimationOptions_interface.html,1742567121135,9e9a4bbc9384151875512b3604480f37eeed765ddd56e2c1e83f4b22bbeb9bce
+assets/content/api/angular_animations_AnimationQueryMetadata_interface.html,1742567121135,e2753b4f01bd0a9633add258ba894cbf17b023eb7695355b24f115b67f3797bc
+assets/content/api/angular_animations_AnimationQueryOptions_interface.html,1742567121135,d128617d039eb6d96b3673f18ff81bf452ce1fe0a67e9918a018932c1a05fe7e
+assets/content/api/angular_animations_AnimationPlayer_interface.html,1742567121137,3685640d17e68437d0327411093cb4f13432834863a9308058e585f7f7ea6666
+assets/content/api/angular_animations_AnimationReferenceMetadata_interface.html,1742567121136,f02d59b81a9f475b63a00e86426b0f4a6333b5ca56a84d8edde71c94eafcf25e
+assets/content/api/angular_animations_AnimationSequenceMetadata_interface.html,1742567121136,2c6d943ba36ef18104028f48c5b5f1a2b34dd6128111fe2a41c079b140bfc31c
+assets/content/api/angular_animations_AnimationStaggerMetadata_interface.html,1742567121136,4d0be0a0784bda18d8c29924130629b6af91e9f32d2b616cc1c5bef92c68b994
+assets/content/api/angular_animations_AnimationStateMetadata_interface.html,1742567121136,1c3219b2684afae3c90e6ad381e54474312731f0476bc7b5dae5c200a06a5e80
+assets/api/manifest.json,1742567120814,ff63cbef5572337a638b96a26a3cfd15942b6f0a9dac167f9f7dad7198937712
+assets/content/api/angular_animations_AnimationStyleMetadata_interface.html,1742567121136,70947d3f9bbcd60311f5765eadcf799ce9a2dcb2a85a75b53cf4c71110f4eb6f
+assets/content/api/angular_animations_AnimationTransitionMetadata_interface.html,1742567121140,011ea0f1dab479f049acde49e418689bc3661f1774c0006acad6688b71dd7b15
+main.js,1742567121381,3671a025abc0262fe6087a44b36f78830c851de7051bc55888048f5dd6458a3f
+assets/content/api/angular_animations_AnimationTriggerMetadata_interface.html,1742567121137,553f86e09d7b62b85539ff2fc381405e4ce35a60d1cbc4828b8d51b3e0e36ef8
+assets/content/api/angular_animations_NoopAnimationPlayer_undecorated_class.html,1742567121138,aeede638758d872a27040494d16ed2d79b2f42e68466b1bec332f88972d97bd1
+assets/content/api/angular_animations_animateChild_function.html,1742567121137,e541ac833f8505fbd1578fc5b812dc6109c42c7d1cd299fb852d1c503e117dd5
+assets/content/api/angular_animations_animate_function.html,1742567121138,f2452008efb8c1743520b6cf7042136995d8e913b18c9e79b98d74574253b81b
+assets/content/api/angular_animations_animation_function.html,1742567121138,6a43e120796e55cf4bfd148b3b041161e59206c0b6e86c543d1ea3277ebd4780
+assets/content/api/angular_animations_browser_AnimationDriver_undecorated_class.html,1742567121139,f76d3519df12e9ae30ad919a93484286e0ecfe8eb517a015e7622396e38da076
+main.js.map,1742567121381,eb65a5b5c8b8c2f4dfdf49c229322759ab32a4fb2c471b465ebe206b9da3f5f5
+assets/content/api/angular_animations_browser_NoopAnimationDriver_undecorated_class.html,1742567121139,3fe70bbd5c1c72d30b9217c3393ad7cc540f3c9b71746b14876f844ff8d1890d
+assets/content/api/angular_animations_browser_testing_MockAnimationDriver_undecorated_class.html,1742567121140,858e0404aed0f520e2424e7082af80aa04ab15528fd8cb5ce4af51594958ec3b
+assets/content/api/angular_animations_browser_testing_MockAnimationPlayer_undecorated_class.html,1742567121140,aff0e020a3c68547e37a3ee69bd44f89a76b7cb9e2733db96b8c237a218270ed
+assets/content/api/angular_animations_group_function.html,1742567121139,019a1acfc0de60c679cd937f091eaaa74db4b47de7eb90a778bc0e0da870b5c0
+assets/content/api/angular_animations_keyframes_function.html,1742567121139,e93ae470380ec7c973ebe93e3cb0d1419e942d3eab10e2ed08ea60e8658120f6
+assets/content/api/angular_animations_query_function.html,1742567121139,0920ea03daaf98077156e42f432166e2dd6418a827a59406b67b9c62d12fa15b
+assets/content/api/angular_animations_sequence_function.html,1742567121140,b82c34c82f292a5908f6c8a2d7baf806c51bd4203b62df2f4f465e7b7c933200
+assets/content/api/angular_animations_stagger_function.html,1742567121141,9855a731936bf950a5846dd0014cc017bf08dbc93d5744f865cc98a0cb145191
+assets/content/api/angular_animations_state_function.html,1742567121140,bafe405e65c79e1bc4d314c50bbdd0669777ed1e27d1b19887458b66d5c64a31
+assets/content/api/angular_animations_style_function.html,1742567121140,b94f44d4c0d47258d18505feb21684c5e55d85700a84343a925ccfdfc0e731ba
+assets/content/api/angular_animations_useAnimation_function.html,1742567121142,dad4e967dc653862996b5d65f36cd914402c33a326e56029d097fa52e9458fd5
+assets/content/api/angular_animations_transition_function.html,1742567121141,67de3656e59fb346c3214ead4fd262a7cd8d3efcfad824d4a3b31b594c7f1786
+assets/content/api/angular_animations_trigger_function.html,1742567121141,425fdc74ec0e3c119f945135367cd32410493dc3b9206d20b5d2f77ce09202da
+assets/content/api/angular_common_APP_BASE_HREF_constant.html,1742567121142,a8d713835149c73da0db10f0613246ccf3ff0af68395efe735f877d0bac0cb42
+assets/content/api/angular_common_BrowserPlatformLocation_undecorated_class.html,1742567121142,8e6339f688198954a384122248ec632627ec0d9604748aa01670704180e34fc6
+assets/content/api/angular_common_AsyncPipe_pipe.html,1742567121142,937bf4b5b53aa67d3b89d37451472ccaf39cce5ba0a4a560edbd37bf2e057935
+assets/content/api/angular_common_CommonModule_ng_module.html,1742567121142,e92cc06dd4a2df4fa0c29dce224354b201961a8bb00e9da571c949538a1c7af9
+assets/content/api/angular_common_CurrencyPipe_pipe.html,1742567121143,10b1863b9d1094a2d0bf0fc15b33b9db476ff7a0a73364e1738a25bdfd45fd66
+assets/content/api/angular_common_DATE_PIPE_DEFAULT_OPTIONS_constant.html,1742567121143,0bb83c2b56806684ad23283e54016d430d69b0a78bcd5c4c6b7eba5512e454ae
+assets/content/api/angular_common_DATE_PIPE_DEFAULT_TIMEZONE_constant.html,1742567121142,9ff2b044d1ea69b24366e77b0172484fa0e65340cff1bd13ec236afc36538350
+assets/content/api/angular_common_DOCUMENT_constant.html,1742567121143,ad85755f19f9094d283ce1fa448ac02d7509b37ace6146efb97d9c248cfe76ff
+assets/content/api/angular_common_DatePipeConfig_interface.html,1742567121143,7e2140c75e7b8aa7f4c0da0fa12a8beaeb631ac8278cc6e5b649d5021098999f
+assets/content/api/angular_common_DecimalPipe_pipe.html,1742567121143,8bb6d502c2a5e546fdfcada241a575e514df8e685f977baf3b27544f7e1dcbf3
+assets/content/api/angular_common_DatePipe_pipe.html,1742567121143,f4a129fc07b6b8227fc1b84a0f3cd4ca2df43c6c99ca8d765e85e784d71005ac
+chunk-ZUJBENQB.js,1742567121428,2f1e14553797bf5614b122a751dc6fb6909363181f9f77de223e5d0710f1ad1b
+assets/content/api/angular_common_FormStyle_enum.html,1742567121143,cf3d1f463506e18f217b9cb00af49021ea6a3c91eece1871a6f60f1cf59a3730
+assets/content/api/angular_common_FormatWidth_enum.html,1742567121143,88188c1b9c91fe1a390e54f41edcfadb57e3409d1f449e870e9e1607bb3b7270
+chunk-GZ4633PQ.js,1742567121427,40d695638d74f3fb63dc378a784f8e713bc9ca21b7089cb7c2cfa4d49357c9dd
+assets/content/api/angular_common_HashLocationStrategy_undecorated_class.html,1742567121144,3ba24cfa2c9c92f5dd55244c8969eeea128de4d5f644e46299781425851c51b7
+assets/content/api/angular_common_I18nPluralPipe_pipe.html,1742567121144,78862b08fa4361508730e131ff0b3e52e7f0e3c631dce09bb663789b5d7a5a39
+assets/content/api/angular_common_I18nSelectPipe_pipe.html,1742567121144,c8e11842d8273598fcae9b65d5d9c5c29108cbdf58e6616ec9e012ab8f84a52f
+assets/content/api/angular_common_IMAGE_CONFIG_constant.html,1742567121144,08bc55bbcddda4fa6aac342d7f7e469aa1fc89d00a8388d1bbaea459070a8d9d
+assets/content/api/angular_common_IMAGE_LOADER_constant.html,1742567121144,f19ab1e6ac92c8b9c5929b45f364a29f63df9c4d418467e97e50cb858232f400
+assets/content/api/angular_common_ImageConfig_type_alias.html,1742567121145,5e7b86cc5eb7d7b65c8d99b9309b71f8ecce2b2ed434295eac745e6e40fd4477
+assets/content/api/angular_common_ImageLoaderConfig_interface.html,1742567121145,bd2e675687f90b55c6dcc7b03190f396d1de3dd3c09f3bb52ff5c249a0b8e37d
+assets/content/api/angular_common_ImageLoader_type_alias.html,1742567121145,c7c756d77b876cd605a6a1458daea62f7db24458a2e8a379bf1bad7bb30d3361
+chunk-MLYXGPVM.js,1742567121427,80ff5e277fe97029645c676e14efe9eb28be36dc3e8fa3c18dfa1311ffc9e0c6
+assets/content/api/angular_common_ImagePlaceholderConfig_interface.html,1742567121145,b4d819e9d0441a9bc0cb8c32087ec9f6d6d8059aa84215ff76f4aa012faa8d14
+assets/content/api/angular_common_JsonPipe_pipe.html,1742567121145,61a26439f1d9737295ff529ced2cbed5b44cf94df9be4b4175fa54f0860a48a8
+assets/content/api/angular_common_KeyValue_interface.html,1742567121145,5b4dcdc1ea9f35225ad81717c9ef83d7063934c3423ea022dd31f3b7f3daddec
+assets/content/api/angular_common_KeyValuePipe_pipe.html,1742567121146,2fa62d4ed43ec472648b4123a50b77c01b3d68f8c1563ef5909fdf72504510cf
+assets/content/api/angular_common_LOCATION_INITIALIZED_constant.html,1742567121145,ba101b2e67eadbb4b0f9a91ea0c8a9053ce417483a6d2564cd2ad7ef9e213a31
+assets/content/api/angular_common_LocationChangeEvent_interface.html,1742567121145,724f00900cdc828c68c0f7ce50e22c2448df25d6a4d9e09142c462015ffb0f42
+assets/content/api/angular_common_LocationChangeListener_interface.html,1742567121145,6a8a49488ea12e30e58a030e4db7fb862df89ed5d40fb17846163b01634d7a5e
+assets/content/api/angular_common_LocationStrategy_undecorated_class.html,1742567121147,06b0f91f92d16eef2a7b8b5d99e654dcbb6fc14403e045c9820567c42bebaeae
+assets/content/api/angular_common_Location_undecorated_class.html,1742567121147,ac9821e01588bf8735f0880624edbd93de9236d8eff20ec069d778be42ebb55a
+assets/content/api/angular_common_LowerCasePipe_pipe.html,1742567121147,c0155b02740cd004a72058ebcdaed3ab27be8f842d0d53491e1b49f4c43f1be8
+assets/content/api/angular_common_NgClass_directive.html,1742567121147,91e1cfde07509e7327ae096d5886b3294b243d66bb8da638e6c01688f511ab73
+assets/content/api/angular_common_NgComponentOutlet_directive.html,1742567121148,4c65de9820714819ee3d6448c44f38cf220ead960d8c1c3632425225dbda3b4e
+assets/content/api/angular_common_NgForOfContext_undecorated_class.html,1742567121148,99b938539e0550c24d33043fccd329a8ab8d8653c33f5e54a5b4e6725c2d0f34
+assets/content/api/angular_common_NgForOf_directive.html,1742567121148,cdda800c7dbddaa0f1c6a559031f15459d90e3964695aa02583f00f94bc08c8e
+assets/content/api/angular_common_NgIfContext_undecorated_class.html,1742567121148,b65fbb77a1c5e44dc5acf5ffe492f09122f8adf456585f6e24756ce4994e87c5
+assets/content/api/angular_common_NgLocalization_undecorated_class.html,1742567121148,f79bb9d778560d0c2a37da0615b821fc662aca18cff03840775e7fc8771a8d7c
+assets/content/api/angular_common_NgLocaleLocalization_undecorated_class.html,1742567121148,d67b7a4eea5d2273ad749d2e7b6bf651fd6b2ffc8047ab523928327ab8b910f5
+assets/content/api/angular_common_NgFor_directive.html,1742567121148,04d4cac458ce99ebbf18e548d488515d921586d625bf86a9abb9eb61eff597c7
+assets/content/api/angular_common_NgOptimizedImage_directive.html,1742567121149,04e6bf48fee3a330a504dd8c663dd16a040d514142903aab8930322dfd64f948
+assets/content/api/angular_common_NgPluralCase_directive.html,1742567121149,fa3cf2e06449de3d1d5ee3bd180a5950d41cd5ef2710dc8fac02c86ce6727f2d
+assets/content/api/angular_common_NgIf_directive.html,1742567121149,dfa213fb6d1c947b8c9dbb4898835693dd2bccc1bfe18ea37573b5b116fc44c1
+assets/content/api/angular_common_NgPlural_directive.html,1742567121149,4f3d21d3cc7ab40cfac1abc4136f29c95c18a5bed4b2c43f4fba7eefc0cfdae9
+assets/content/api/angular_common_NgStyle_directive.html,1742567121149,4fa23f1c774fcb4cd8c6144b6c6d715520795bd91ae0f17fbfb0f296b4b4c0e2
+assets/content/api/angular_common_NgSwitchCase_directive.html,1742567121149,4c12b216848a63fd8e026c528623346a3711a2c8aab97a58477fb178510e1529
+assets/content/api/angular_common_NgSwitchDefault_directive.html,1742567121150,6c5ed2a8d08e0e8253c9f2c10686d0c12cb38bd9124f56a1a29a9e42396e0110
+assets/content/api/angular_common_NgSwitch_directive.html,1742567121150,b79a7acdfc14224e196d933d98802b1acd13b7a735cafd96b829e18893db7e3e
+assets/content/api/angular_common_NgTemplateOutlet_directive.html,1742567121150,582b4b723f89c1aedc228fbf2e7c95780c5a864f4b7954f84391b6e1622855d3
+assets/content/api/angular_common_NumberFormatStyle_enum.html,1742567121150,08e8de68f33ef9598eed1dcbd835fa22e74c7ac883a0004855b4df653534cf54
+assets/content/api/angular_common_NumberSymbol_enum.html,1742567121150,9c8483a280072f0a8c3c9f912b18886056f34a7c9ad841265c69464d1d86eaa4
+assets/content/api/angular_common_PRECONNECT_CHECK_BLOCKLIST_constant.html,1742567121150,28299d1c3114fdd8f951c581d23fda34a673eff200e206950acc830b79fa360a
+assets/content/api/angular_common_PathLocationStrategy_undecorated_class.html,1742567121151,ee37f48d3d7deed9a61db0ac52d81b04f6fd4c1a228dc0360cf0ec5ad5d07ac5
+assets/content/api/angular_common_PercentPipe_pipe.html,1742567121151,b6348643c6392c2a878c555b8e64029e283d3bacf0ad3b1ac76060b6c4c9e98e
+assets/content/api/angular_common_PlatformLocation_undecorated_class.html,1742567121151,f37b6cffd82aed92030df328f6eb3792b8698a24202bdf3d2e792a765d0415c7
+assets/content/api/angular_common_Plural_enum.html,1742567121151,8eeb4d66b286421876d6bc8fc3caa52f281533a39f78aa767da642029294f14a
+chunk-QIQFGZBU.js,1742567121438,9cfe6882b80c91678ff3b8bb80130afd6632d0765332d9d8ab5003a2d0cdf1e2
+assets/content/api/angular_common_PopStateEvent_interface.html,1742567121151,d65910e241925ca60a321c4c68a15e40d1c24f0460405fddbbe0edffafe9ceb7
+assets/content/api/angular_common_Time_type_alias.html,1742567121152,cafdaa64f16e838aabbb338dd90d6e50830a8ed2f5a516c878ca0e250ed5fcee
+assets/content/api/angular_common_SlicePipe_pipe.html,1742567121152,ac6a26af7e974054b22f9e969a66de6cb89db820e72f322f35b78fa947f158f8
+assets/content/api/angular_common_TitleCasePipe_pipe.html,1742567121151,831e5c3197cd41c4b14ac696701168b4049acd49b56c75959d503afe2c627665
+assets/content/api/angular_common_TranslationWidth_enum.html,1742567121151,86b31dbdf29306b7fc99c908018a8ebfe4c75be5f60e69b37a2a36677f583bb3
+assets/content/api/angular_common_UpperCasePipe_pipe.html,1742567121152,06aa63f983d7a317ecf0368494b3de89aa63639f07255f040699a6f341bdd4f4
+assets/content/api/angular_common_VERSION_constant.html,1742567121152,206c68cb83da0005c66d11f47fb89312a52d3f52d5d4e0e495e2279dad8c3d68
+assets/content/api/angular_common_ViewportScroller_undecorated_class.html,1742567121152,fc2f6d992d00ca4c5fa364f2c4ae10f1c6632b5bfe2ea3f2556c8a2c193967b1
+assets/content/api/angular_common_WeekDay_enum.html,1742567121153,f002af9a7469f394deaca1b854697508a60c079ed2d6b80a7bc0fac223c0ad3a
+assets/content/api/angular_common_formatCurrency_function.html,1742567121153,e20ce57ac14d366beb6823df954f62a350c110eafbc7b22adb58e16fd009dafb
+assets/content/api/angular_common_XhrFactory_undecorated_class.html,1742567121153,466916ae0d18fb84ce6e50b8e547dcb4d5ce856fcf2cacfb7f135321359595a7
+assets/content/api/angular_common_formatDate_function.html,1742567121154,acb9ca8c19ca5219446b03594036cb4f81870c96beecc3a83d216c36cae66f19
+assets/content/api/angular_common_formatNumber_function.html,1742567121154,97f327afefaa8196446441e48caf2108aae8d1d67b1c4a9272daa5479013fec3
+assets/content/api/angular_common_formatPercent_function.html,1742567121154,cbaa84fd943ba694478418a2aadec5db1e899360b7dd9fe08dce5327853bab7c
+assets/content/api/angular_common_getCurrencySymbol_function.html,1742567121154,e492c632e69f451922e98ecd1d5e3c36bc61516391e3144fd545276d3a3622a0
+assets/content/api/angular_common_getLocaleCurrencyCode_function.html,1742567121155,d37fc8da2b89fb6f5277dccf486c0f53778d382878e85e14d913ef6b957641ed
+assets/content/api/angular_common_getLocaleCurrencyName_function.html,1742567121155,2189ee3a963466e43fceaddf5ab1f2bf2fa4f713b6e97f983300ab1f7ecac8b0
+assets/content/api/angular_common_getLocaleCurrencySymbol_function.html,1742567121156,a4257a5899d40e810be105876cfe7c1243ba014c269fdb9d1263dd18503ea772
+assets/content/api/angular_common_getLocaleDateFormat_function.html,1742567121156,57e4857f9061403ced3300618dd3eb454f257fc6411b1bf0055861f0ee9e520c
+assets/content/api/angular_common_getLocaleDateTimeFormat_function.html,1742567121156,1b4b5787e3e9e4f8f4c10f709ae19b506db68e0be2cb642338c73c60a25c9175
+assets/content/api/angular_common_getLocaleDayNames_function.html,1742567121156,9d9e5e21f29e3b3f64471fae560b5a361311d579bd39c062199f74e2e90b4296
+assets/content/api/angular_common_getLocaleDayPeriods_function.html,1742567121156,5c31d7b25b3c2ac9ea576011d5a41b2d9ef13d26586efbb3132b5ce1da52a14d
+chunk-GZ4633PQ.js.map,1742567121439,9c2316f8671b11f334c79706329bff503805c1513d5460503cd1810105867dc0
+assets/content/api/angular_common_getLocaleDirection_function.html,1742567121156,d9d32bd7e1dcfc4f04ec8edbd513b7ce19e0f9adf5d0d2dc26d1cf6d8ef4c228
+assets/content/api/angular_common_getLocaleEraNames_function.html,1742567121156,d9607ed68c193657d5ff6b58f91effd8ff4aa23b5b931801362399cc169348e0
+assets/content/api/angular_common_getLocaleExtraDayPeriodRules_function.html,1742567121156,aec41951639035e48d61738cd129d4cdeffd90e08e9e2341d4c9f10abe13fa26
+assets/content/api/angular_common_getLocaleExtraDayPeriods_function.html,1742567121156,1654c20ee0ec08c702adb01c9709dc6bdd7f42636fbdb804b673b038c265e1c1
+assets/content/api/angular_common_getLocaleFirstDayOfWeek_function.html,1742567121156,f4bc31b78dac9550ef67e13b5f649e223554e4d46cddeb3a10ad171e444dcd96
+assets/content/api/angular_common_getLocaleId_function.html,1742567121156,69e869dd4e302325c86de580da2c80ebe1e372a6e88e220996570eb7d912b44c
+assets/content/api/angular_common_getLocaleMonthNames_function.html,1742567121156,5fd8d0fcf2f1acdb664c20e0b676d4932fc8a1acc53be02de4f7c8caf5da1c3d
+assets/content/api/angular_common_getLocaleNumberFormat_function.html,1742567121156,9304552c4b702edef15eb5a706a08221514e0b1d2c5b4442e4a81b850666478a
+assets/content/api/angular_common_getLocaleNumberSymbol_function.html,1742567121156,df9fe1dc901e2f875fa393bc60f21ffbb392a0a323216b859e5191bddc267910
+assets/content/api/angular_common_getLocalePluralCase_constant.html,1742567121156,6be2ab804b7cdd26899a3568209ed17c26f635dec113a35722944bdd23341073
+assets/content/api/angular_common_getLocaleTimeFormat_function.html,1742567121156,64a48044be89fe9243d2eaafc9428d4148166533a57ce31ba3f89e3cbc5b2a0e
+assets/content/api/angular_common_getLocaleWeekEndRange_function.html,1742567121157,b5189786bef25af96a89058706f45f2e3ccc798ebd2b3dc50bdb73bd29dfac28
+assets/content/api/angular_common_getNumberOfCurrencyDigits_function.html,1742567121157,b09f47a4de8fb57be7e3fef1a2daead9b9ecb89a9c203bf85d933e9230748c69
+assets/content/api/angular_common_http_FetchBackend_undecorated_class.html,1742567121158,2cb2457ff69a52c1db6c0f16b19a20fc220623ddb89ad48a7a41f7997a1f3076
+assets/content/api/angular_common_http_HTTP_INTERCEPTORS_constant.html,1742567121157,1b502ef350e370a1d4ebfd403831b4bc0a92337bed7c94f8823db805c359c5de
+assets/content/api/angular_common_http_HTTP_TRANSFER_CACHE_ORIGIN_MAP_constant.html,1742567121158,068ba9c2307a99415f86fd20f8ba1cd5359445f0986d62c81aacbb41cb7b75ac
+assets/content/api/angular_common_http_HttpBackend_undecorated_class.html,1742567121158,3f8056a7b5acf4058799e9633b8a440057a6c5d790485a06af543f1c6d427c4d
+assets/content/api/angular_common_http_HttpClientJsonpModule_ng_module.html,1742567121157,0ff6f635b298efbd1e5d1cdb9ff31c61ab7db3e4a57fde65016aa288b1c74111
+assets/content/api/angular_common_http_HttpClientModule_ng_module.html,1742567121158,0815441a1b551a6a78bb6fa9074692719f1800840efccb4bf816a0bfce8805e1
+assets/content/api/angular_common_http_HttpClientXsrfModule_ng_module.html,1742567121158,ef52177fc72d03a0802f50bd11bef20cb4c96c7f4e8ce73880315d887b238215
+assets/content/api/angular_common_http_HttpContextToken_undecorated_class.html,1742567121158,19ac8cef378da1688de40bc6376a70d4e63221c996ac5bc7d542a656d5177556
+assets/content/api/angular_common_http_HttpContext_undecorated_class.html,1742567121158,7e3641d8401d5d69576c3a845cc636c2befd0bb96fe3a769ac1aa19c4d5f55a6
+assets/content/api/angular_common_http_HttpErrorResponse_undecorated_class.html,1742567121159,eaa71eb363e678d8aace877cbbc31c3a8f26b1a85de4596861d3b988ee5928c3
+assets/content/api/angular_common_http_HttpEventType_enum.html,1742567121159,48102cd0c126556b162c64ab6a54ad80c54a8aa7f3f36d974149bcbea5f82efb
+assets/content/api/angular_common_http_HttpDownloadProgressEvent_interface.html,1742567121158,38aa0e8760df20d00f1dbf2c3ca8d3099375ab9b869ae0ffdc4484a374e986f6
+assets/content/api/angular_common_http_HttpFeatureKind_enum.html,1742567121159,cbaf9524dea977f9e4a04825adabfef5ff31327c752cdd433ec10a97fb40e5c7
+assets/content/api/angular_common_http_HttpEvent_type_alias.html,1742567121159,7ac99a9ec7f3e72ea0eb247c7f862e9f45700d1d716edd68d56199d8115cd240
+assets/content/api/angular_common_http_HttpHandlerFn_type_alias.html,1742567121159,0f7673dd3a82b77c4638cf3f6967fb7aaba626c97172a2cdde7f1300c5a496b0
+assets/content/api/angular_common_http_HttpHandler_undecorated_class.html,1742567121160,19ef9ef782e9b4910e4718be6e465f84dc3f670758e78c5d3ff5842c44dbfe28
+assets/content/api/angular_common_http_HttpFeature_interface.html,1742567121159,2b51856238af74fef2cc980ec4a794372f1b39a368d370882d20633be5edd9e2
+assets/content/api/angular_common_http_HttpHeaderResponse_undecorated_class.html,1742567121163,a7b0973b47dd66231892a3282e452633335bbfc76e104eef392c6ceaf7647b3c
+assets/content/api/angular_common_http_HttpHeaders_undecorated_class.html,1742567121160,6dd766b2a8fe1fe840ff5b4f58f337afcaa260f433b7e511fc598194b6c53656
+assets/content/api/angular_common_http_HttpInterceptorFn_type_alias.html,1742567121163,f880499ee590231fabab8bfa8caeab7a8cb86bd7e63aed92dbe555fb416441ea
+assets/content/api/angular_common_http_HttpInterceptor_interface.html,1742567121161,b52a8ae0d376ac70ff4bf3407cfb013eb2b12040e28249f2046ed052b3d25f2a
+assets/content/api/angular_common_http_HttpParameterCodec_interface.html,1742567121163,ee24d31fce4d63e80c4e117b001c12243ae4cb08c101045b0b7b71fc16db0ba3
+assets/content/api/angular_common_http_HttpParamsOptions_interface.html,1742567121163,7b0bb27f987bcd409a38d588c6dd68de38ac9cf284075cdd2b2262fadbfc2c5b
+assets/content/api/angular_common_http_HttpProgressEvent_interface.html,1742567121163,093dd9f477facb5379bcff081a19ce0aa018b5a36bd627c6a44784260abfabb5
+assets/content/api/angular_common_http_HttpParams_undecorated_class.html,1742567121164,dda7097a35b5e0ae1953d00a394d595228872c6417e87b80b4d976fd2a4df66f
+assets/content/api/angular_common_http_HttpResourceOptions_interface.html,1742567121164,e606e5ec735cb2cd055277f1763a8f53dae4bde2049ae94b9b2daac53d5ad57e
+assets/content/api/angular_common_http_HttpResourceFn_interface.html,1742567121164,c0df8fe37e8bc4e614d31bb308d2fc6c09aa784f54e6ddc8a303ee13c6e3bd28
+assets/content/api/angular_common_http_HttpResourceRef_interface.html,1742567121164,57944926124c241d5450dafd560a96f4c3b04351bc1620c8f7abd0f49d439197
+assets/content/api/angular_common_http_HttpResourceRequest_interface.html,1742567121165,65996490b1499f909a74b2fb68e808219f7ccbe2893d8a875a96b25e0012ab10
+assets/content/api/angular_common_http_HttpResponse_undecorated_class.html,1742567121165,8434dd2bb8dfe4a95f68d372abf1b6ebad9676c2e3ebab306298016b69c3e874
+assets/content/api/angular_common_http_HttpResponseBase_undecorated_class.html,1742567121165,94d0c1757e362fec911ab4f5dae4e2593a58e69a4833063455a32d8f56479e87
+chunk-ZUJBENQB.js.map,1742567121439,2e77b22898f82469c2a8220c571b6f65839983b1670a5d16318163dcd50483c2
+assets/content/api/angular_common_http_HttpSentEvent_interface.html,1742567121165,9b191ea0dad36c2fb92bb684fcbd8d210c66f18e4ca849d1e59a2408545f8bf2
+assets/content/api/angular_common_http_HttpTransferCacheOptions_type_alias.html,1742567121165,55161fd2fb89c98a7b0ec15843b42aa347573724ffc05a89a1e12ef752cbbe92
+assets/content/api/angular_common_http_HttpStatusCode_enum.html,1742567121166,d53e0ccbf4651d56a602acaf8c57754bcb5e221453207802554762dbcca0bca1
+assets/content/api/angular_common_http_HttpUploadProgressEvent_interface.html,1742567121166,3e473e8fb1f6287accee8e4fad722dcb5de0f183c6ea06be16614a9e4ef529a7
+assets/content/api/angular_common_http_HttpRequest_undecorated_class.html,1742567121165,27a0b4c28f93d76c02f9a7d22be3d932d383cb98b851b96101b036014cbaccc8
+assets/content/api/angular_common_http_HttpUrlEncodingCodec_undecorated_class.html,1742567121166,955ec4280ec255ee41f9a6f8c5b4201498731d389e93e31b066f7fb3ba41d2db
+assets/content/api/angular_common_http_HttpUserEvent_interface.html,1742567121166,7f6be03b04c541d0c1dcd1aba72f8336c47998b13da628baf9943a05048245b2
+assets/content/api/angular_common_http_HttpXhrBackend_undecorated_class.html,1742567121167,4cec014812637de59f5f2b49b9df07545715b5e1788dbf912963f4d29aa0ee7e
+assets/content/api/angular_common_http_HttpXsrfTokenExtractor_undecorated_class.html,1742567121166,36e602c248d91804a23402d23d80ca5f2a851fc5969cbb27e6fb55c6f9170584
+assets/content/api/angular_common_http_JsonpClientBackend_undecorated_class.html,1742567121167,a528de4589f4097d3d80243b91dddd3c498aabe05f26565019df663831e7b5b6
+assets/content/api/angular_common_http_JsonpInterceptor_undecorated_class.html,1742567121167,a17e3835e3f21f9a9170b4427015b7e18a2f4c5033e93a24d84d6bdf14c4aed0
+assets/content/api/angular_common_http_provideHttpClient_function.html,1742567121167,cb690ba89e8f40422f693410e20e199c949feb911740ed26d183873a739e53a4
+assets/content/api/angular_common_http_httpResource_initializer_api_function.html,1742567121169,e48239ff2bb14e6b28313cd8fe034e87feeb5499fb5c4437526aa256c4e808df
+assets/content/api/angular_common_http_testing_HttpClientTestingModule_undecorated_class.html,1742567121168,2751987b6c4c57e6a10f1d7265f97a4487b7e9cce1855b8e0a847e53339de06f
+assets/content/api/angular_common_http_testing_RequestMatch_interface.html,1742567121168,b4a43d197413e9c2fc4fc12387054f2ae951a12d4417a85dd245c2f9deca3289
+assets/content/api/angular_common_http_testing_TestRequest_undecorated_class.html,1742567121169,cdba11919d46f6813dc67b32a48964d6c2b0539a6f3e07b07868daf3f2f9f520
+assets/content/api/angular_common_http_testing_provideHttpClientTesting_function.html,1742567121168,1bc7de71400dda956e69a2c9a2ccecee365f3028f334e174440c275726807f19
+assets/content/api/angular_common_http_withFetch_function.html,1742567121169,ca52533495bf3d8929f5ef72f3ebde4032b1c037a05d92e0b508c254097ff6ae
+assets/content/api/angular_common_http_withInterceptorsFromDi_function.html,1742567121169,b2c96d360062f341d2c4368bcee1fbfa8a65582fefe13f58f6d806ac5a3706f9
+assets/content/api/angular_common_http_withInterceptors_function.html,1742567121169,d2cdebfb654a4e87310fa53083c6c099aec2756a56ca504bde9535e97ce110e7
+assets/content/api/angular_common_http_withJsonpSupport_function.html,1742567121169,f9c3a7b8cddb17d21fcf81eedec691ec09d53620d36e8aa14eb59613518eac61
+assets/content/api/angular_common_http_withNoXsrfProtection_function.html,1742567121169,6c471df8f142f81629f620f3a8a942a0bc3784266c5fa17aadbffdf13725e55a
+chunk-B7NVROQ5.js,1742567121438,9434c0ad8b3b00c9c2c4554a6d7c8afa515c818e90850ca306b5307d3696a9f3
+assets/content/api/angular_common_http_withRequestsMadeViaParent_function.html,1742567121170,da0fcb61af503786743e8a3c47766d76c9a4abdc5f2e18871a65012c1ddf2405
+assets/content/api/angular_common_isPlatformBrowser_function.html,1742567121171,aa8da606bbe08f6101a0eef308550486d33c8cd919228497f80f2e26717d3ffa
+assets/content/api/angular_common_http_testing_HttpTestingController_undecorated_class.html,1742567121168,f4029d6d805651bdfd31f522e12c7739a99b2fd615b59e828ef8627731634385
+assets/content/api/angular_common_isPlatformServer_function.html,1742567121170,956f12792ea2ff549e16aa4f605370912445483c9d69bde9d8525f1dfdef230d
+assets/content/api/angular_common_http_withXsrfConfiguration_function.html,1742567121170,c337315e95760b34c89be34fbcefe3c7289ca5b5289cfdef18ea6f9c95eddac6
+assets/content/api/angular_common_provideCloudflareLoader_constant.html,1742567121170,2dc07ea11ddb5d5a7b7a087396bc8d03080645f3a0ef61bf347b72256e402f69
+assets/content/api/angular_common_provideImageKitLoader_constant.html,1742567121171,62f4964333e97b86ff90b50a24b9416ce11717cf23d8426e2c348301f7824e92
+assets/content/api/angular_common_provideCloudinaryLoader_constant.html,1742567121171,1ea7dedafe6c51b867b10471e96f21c543772d5ebc639137d790fe158b1ff88f
+assets/content/api/angular_common_provideImgixLoader_constant.html,1742567121171,7c373b08682a5d57ba79b49dd2f4daffe629e0b92fb68c875ca30fc72d68dfd1
+assets/content/api/angular_common_provideNetlifyLoader_function.html,1742567121171,305946573a1f29d2825853572f408e067f43fe1a9ac14618488c179970326d55
+assets/content/api/angular_common_testing_MOCK_PLATFORM_LOCATION_CONFIG_constant.html,1742567121172,40b37a479f42ed76eeff1efaed7ca561e4e88369da51c7b5cc795b4956b21e29
+assets/content/api/angular_common_registerLocaleData_function.html,1742567121172,5d91210bb028c65eb2d5aa6119ed1a4ec52c33f5a983e968bdac3cd4e1c046aa
+assets/content/api/angular_common_testing_MockPlatformLocationConfig_interface.html,1742567121172,691dc33e5675203e7cef5a6a0392ae49d83f9df93933220b6a7d130606baf3d1
+assets/content/api/angular_common_testing_MockLocationStrategy_undecorated_class.html,1742567121175,0f29af69489f1334125ccc2794771c83222dbc71c493262bc30cd6cd6205830d
+assets/content/api/angular_common_testing_MockPlatformLocation_undecorated_class.html,1742567121175,b543346bea4cc398470a04acbf63f2c9d159ff0e3df99423414a444b6e862c16
+assets/content/api/angular_common_testing_SpyLocation_undecorated_class.html,1742567121175,8dfb16e7a7a9225a7e2abfc368f8947f61253a392cec20ba55165da8e5bfc935
+assets/content/api/angular_common_testing_provideLocationMocks_function.html,1742567121174,a47faa9e26c9919a6baff99aab0a4d6ba8426759e6e4dc295229fd48c79769e2
+assets/content/api/angular_common_upgrade_$locationShimProvider_undecorated_class.html,1742567121175,f88da3589618c777f775b0a73038443581a4291a4e367f7c836dec3e19022182
+assets/content/api/angular_common_upgrade_AngularJSUrlCodec_undecorated_class.html,1742567121176,056c5d38781c69f5c69c531efb2b50f33a866bef89cb2ed29c89ae95cb3d2464
+assets/content/api/angular_common_upgrade_$locationShim_undecorated_class.html,1742567121177,ac965bb543517d587dff375be6cec0578fd0cc08db81f52849a07a2e0811f51a
+assets/content/api/angular_common_upgrade_LOCATION_UPGRADE_CONFIGURATION_constant.html,1742567121175,abc12ece93bcae52654d9808a5b279154cf2a1c78953a910a92f751093b9f6fb
+assets/content/api/angular_common_upgrade_LocationUpgradeConfig_interface.html,1742567121176,b2b230da9e9e8303d5c73775781ea71a0899d6b74e5238fbecab4011d035ab1e
+assets/content/api/angular_common_upgrade_LocationUpgradeModule_ng_module.html,1742567121176,1eb92a254862dc092d4025b2724d4e9817850fdc204d87f1597c08aa984f946d
+chunk-RQGIGR6X.js,1742567121439,9eb1425b9cb7fb1e7524553c1d83efa89057b1cf8ef59ae4f4bf35b75772e70c
+assets/content/api/angular_core_@defer_block.html,1742567121177,dc891629d3433bd9e04bb55460974f4697f0dc1533eba99768624b3f41ea4dd0
+assets/content/api/angular_core_@for_block.html,1742567121177,13004debfe6f55ba41626c89a294b59c4af6d24f192f39dba5e799b1a7804e7e
+assets/content/api/angular_common_upgrade_UrlCodec_undecorated_class.html,1742567121177,4f91d00d2dc06c68471a77b8e171c2119ea05b51caf383cc7aecf2e5ed40ca46
+assets/content/api/angular_core_@if_block.html,1742567121177,77d20d2b089a41bbc2d825d74529736cb156362239472ce9e748410e44de39c1
+assets/content/api/angular_core_@let_block.html,1742567121177,44e2e2c8deb73db4ace3b614bfa4ecb2c79c42bc73bdc7a49b74440f4945f0dd
+assets/content/api/angular_core_@switch_block.html,1742567121178,0c7f9a4b034d0e4e6001d036aea3f07c97461875a98ca6a72e21396e760128bb
+assets/content/api/angular_core_ANIMATION_MODULE_TYPE_constant.html,1742567121179,48280234a8ae5dcfe8dcdb2b48002c3c657d6382b618576dde1d7b734f948afb
+assets/content/api/angular_core_APP_BOOTSTRAP_LISTENER_constant.html,1742567121180,78b5ebaf23319d654398543e8166211683cb38c509d7c941747ec9c7efa09b93
+chunk-MLYXGPVM.js.map,1742567121439,021e9f6712997b09b48f382715c8c3fe2ca79b859c208b6216dcdce9adb4858a
+assets/content/api/angular_core_APP_ID_constant.html,1742567121180,5266006caba9616f170a2c66ec2c482287abd0fc33276edf747c86703d883456
+assets/content/api/angular_core_AbstractType_interface.html,1742567121180,23d2079dd894d36704950b791357e16466fbc89705f6d8707b2ad6a79dd05507
+assets/content/api/angular_core_APP_INITIALIZER_constant.html,1742567121180,e945845664d1f2263ed8df7e1b4cd802352e9943cf65f1a0233261c1f2e4b78f
+assets/content/api/angular_core_AfterContentInit_interface.html,1742567121181,9ffdca8651d5e1c0dc5a693bcd2b56dd4bca6e152ee18f6db86c09088eb025ec
+assets/content/api/angular_core_AfterContentChecked_interface.html,1742567121181,0c5c90566b24845337c97d2dd8740d79d2a3e7ac5cbcd6ca62dbabac283eed6e
+assets/content/api/angular_core_AfterRenderOptions_interface.html,1742567121181,1cdddc04a8651f5974482c60c11d64e78f75b8e2f8d0f8aef42d773ecb4b08f4
+assets/content/api/angular_core_AfterRenderPhase_enum.html,1742567121181,fba5030069781e4983703e6c9a09d33242d0a97873d6849b4c1e056b032ea7a5
+assets/content/api/angular_core_AfterRenderRef_interface.html,1742567121181,9e25b15737d33e2e37786e666c08065944d54bd492b5c8b16361769fb32ae185
+assets/content/api/angular_core_AfterViewChecked_interface.html,1742567121182,d02e6ffeae9b8f202028d5ed16b4ec70b74c82ea0a40579760cc70dc4daa490e
+assets/content/api/angular_core_AfterViewInit_interface.html,1742567121182,14464b64a226de05d73d370e6fc248fb01267e7541421eacac4d8956f31583d6
+assets/content/api/angular_core_ApplicationConfig_interface.html,1742567121182,e61a494c8bcf1e2b996109f942f58e1e82e11d9182f2445c3ba19b708b2320b7
+assets/content/api/angular_core_ApplicationModule_ng_module.html,1742567121182,efeaf2f22436a16f851bd53285d38af31afa07551f907ff1eec3e3adbfd6a563
+assets/content/api/angular_core_ApplicationInitStatus_undecorated_class.html,1742567121182,a8265158a55169f84bf02196f89c2f3fd23acc2a6afbbec43d5a11dc231cb886
+assets/content/api/angular_core_Attribute_decorator.html,1742567121182,6b1fc538fbc2dbdd8fd7cbd180722e269e0bbca23dbb4e522b7a47a55e8f9b7f
+assets/content/api/angular_core_ApplicationRef_undecorated_class.html,1742567121182,a0b37a2f6d2d27ed091a2a23f8538089a5cd61620dec16601e80115d962cb058
+assets/content/api/angular_core_BaseResourceOptions_interface.html,1742567121182,1f8e132f7dfb78bd8c0a8aaeedb26858300dacb625678c9b9cad8eccb265b68b
+assets/content/api/angular_core_COMPILER_OPTIONS_constant.html,1742567121183,c8a3310819e98a2a59a921991534841dd3c5065dad73d7bdaa29c353b0358a29
+assets/content/api/angular_core_CSP_NONCE_constant.html,1742567121183,759d6d6fc38ceba2d7427cfc2f6a213a66c77371baf0babe4f929a62fe017c82
+assets/content/api/angular_core_CUSTOM_ELEMENTS_SCHEMA_constant.html,1742567121183,217fadab6411d0a1700034bdcb7e6dbeb0c588c1324afbe26aab72b8900bbd2e
+assets/content/api/angular_core_BootstrapOptions_interface.html,1742567121183,ea3409c6e6ae319febf97f46fbaa0672521f41da2148d3d7c4b81d5d24524910
+assets/content/api/angular_core_ChangeDetectionStrategy_enum.html,1742567121183,4153534381b756c4c0ced65a29d59a4488fabbf5313c294ab56e1b13995dd6a9
+assets/content/api/angular_core_ChangeDetectorRef_undecorated_class.html,1742567121185,9df9ad3c857f1f41661eda0c30d15f8e7d61520fed83e4cf8a30ba4d78fc7fd3
+assets/content/api/angular_core_ClassProvider_interface.html,1742567121183,baedc578c3bd02e5cc3db9a9c1e0cfa141e963068fa549761943b96687b74c75
+assets/content/api/angular_core_ClassSansProvider_interface.html,1742567121183,f640327898076be70bfdf39c5ac53ff8fedbe3838540b672360c0cb1c5a48cab
+assets/content/api/angular_core_CompilerFactory_undecorated_class.html,1742567121183,f5659af325b4982aa63688078133e10633f27564398f0e366e7b3247aa910e9a
+assets/content/api/angular_core_CompilerOptions_type_alias.html,1742567121185,1b4f26e53c87ea869fd05c356363d4621b5e4ebd33f3db53530fc55966260af7
+assets/content/api/angular_core_Compiler_undecorated_class.html,1742567121185,28ef5409d11967a130208983705aa9fea998d689dd17ec40f4daa01f1b410c29
+assets/content/api/angular_core_ComponentFactoryResolver_undecorated_class.html,1742567121185,32196889bb81505065aa84bb6cc2781666543c67751efeb0344c3f7825ed3363
+assets/content/api/angular_core_ComponentFactory_undecorated_class.html,1742567121186,c633f650c722fa2b95313b82629aecc07c2cb0d3b79016180247233a416f4562
+assets/content/api/angular_core_ComponentMirror_interface.html,1742567121185,e12ebced2c05593160a8d29a7b18f8f67ad3f44637bb1733dca51b5cb2aa73c2
+assets/content/api/angular_core_ComponentRef_undecorated_class.html,1742567121185,d9c7b612d0153c2082a6167d7e4754735e9f92bce8e22c50643f528288e9d491
+assets/content/api/angular_core_ConstructorProvider_interface.html,1742567121186,da63211a42c28a5722ff2691b4133b5fd8a1b4270c7171ef77fefd8abf57324c
+assets/content/api/angular_core_ConstructorSansProvider_interface.html,1742567121186,007ff83835203e0df59084adde1281e3ae95b4f15d32b0fd16e70b10a04ea93f
+assets/content/api/angular_core_CreateComputedOptions_interface.html,1742567121186,e89c2538417877463322a4b8052f9cbffeedf09ba50e891b2f40f254620dfe9d
+assets/content/api/angular_core_ContentChild_decorator.html,1742567121186,20e69cb920afad81aeca823df14921e62901c1c8997f61a25c8efc538296fb5d
+assets/content/api/angular_core_ContentChildren_decorator.html,1742567121187,5ff0d7454348de88e5a9c00c5e49b655b3d02f06c6dfbbfbec78ba43556e4625
+assets/content/api/angular_core_CreateEffectOptions_interface.html,1742567121187,a631b24a78b31d31f3111a2957fd873ae6a8ff0e2f1a2488b872655eb4e39e06
+assets/content/api/angular_core_CreateSignalOptions_interface.html,1742567121187,bf347a59a1a21659fff31c4d81617bab237bf20d5db14923eab0e98bd127225d
+assets/content/api/angular_core_Component_decorator.html,1742567121187,5767e85af43efe438f2156f7496cc229dc1792caca197f910f47aca77fb01811
+assets/content/api/angular_core_DEFAULT_CURRENCY_CODE_constant.html,1742567121187,edafe9be2d5895da4fae639b19a598f88623b13f84411c52c7ca1f97156f4e77
+assets/content/api/angular_core_DebugEventListener_undecorated_class.html,1742567121187,d7c0819663e659a79747d583a37406fe04cd050245e0304bb0302faa0afa10d6
+assets/content/api/angular_core_DebugElement_undecorated_class.html,1742567121187,1551606e1cb49db4de7e7f6a091f9857021148dd2783b50f990562fff0b46b02
+assets/content/api/angular_core_DebugNode_undecorated_class.html,1742567121187,c4bb452718e8f0b3d63cf9e0119e128278c66cbda5eb70e56f62765ab2d79111
+assets/content/api/angular_core_DefaultIterableDiffer_undecorated_class.html,1742567121188,86800fce9af72586c8102808ee2b1d35c1b3b1de56742362906936eb61b26e1b
+assets/content/api/angular_core_DestroyRef_undecorated_class.html,1742567121188,6558c2aff46e326a085d209a60a71b7a88a847461d2533f6cbe04d53186c57f2
+assets/content/api/angular_core_DestroyableInjector_interface.html,1742567121187,28dc2f61273e2fbfd5f128189a393f48be61bef283a5570273d4642f7dcb5eaa
+assets/content/api/angular_core_Directive_decorator.html,1742567121188,d982ee0d4a0145c7593a331e28b9e53b32fc29ce3e87accf456ca95877fdb5ac
+assets/content/api/angular_core_DoBootstrap_interface.html,1742567121188,571dac2435cced05c134a4e4ecdc2226b18c7eab368b796c103be6e8ab497cc0
+assets/content/api/angular_core_DoCheck_interface.html,1742567121188,72ea319a57b55ecdc6a3ae1efdcc709c53f54b9f34b56363b506bf25c4a08064
+assets/content/api/angular_core_EffectCleanupFn_type_alias.html,1742567121188,a73f6b4479c76becb60d9b90031ba6628a065ca93106be513adc0d5ccc303376
+assets/content/api/angular_core_ENVIRONMENT_INITIALIZER_constant.html,1742567121188,1b2601a8ae1ebe6dc632a54bace8ce7e5738cc366e72c6525d7ae2761c958244
+assets/content/api/angular_core_EffectRef_interface.html,1742567121188,b72471f4ab559c3cc3a646403b5ebaed4c7eed29ac2184c72b5329b83cd87ba1
+assets/content/api/angular_core_EffectCleanupRegisterFn_type_alias.html,1742567121188,4eb2ad1580e2b1df15b48076f04a14d77218b651f3e15571734623eded6a7e41
+assets/content/api/angular_core_ElementRef_undecorated_class.html,1742567121188,5cce33eaf1a9bcf840f3dc388ff8d8856a29659e3875ea18f5c5fab3702c6387
+assets/content/api/angular_core_EmbeddedViewRef_undecorated_class.html,1742567121189,833001ef3122fbd086f3137f9365a2132ab221e7e3f3b1a439b2a9bdbf65e630
+assets/content/api/angular_core_EnvironmentInjector_undecorated_class.html,1742567121189,7e9e386101cfece0e416db0e2b242a50a0886de6771e3bca69e1f7abcf51cb54
+assets/content/api/angular_core_EnvironmentProviders_type_alias.html,1742567121189,c9c82f0a390c6c6de1bfca907858084218e969663a628873b67860b43a6d06a4
+assets/content/api/angular_core_ErrorHandler_undecorated_class.html,1742567121189,8a74a6f197d26772b7813eb837565dcfc7d45e478384ad98c4c21df46d7e5110
+assets/content/api/angular_core_ExistingSansProvider_interface.html,1742567121189,008105cd0126ddff3a2790fefbd39f941a833d54ac282d9b7f0ece4df9dbf563
+assets/content/api/angular_core_ExistingProvider_interface.html,1742567121189,5e2f32087071f129ee5894714977d7ffe90de9b556276b46fea562902e120c06
+assets/content/api/angular_core_EventEmitter_constant.html,1742567121189,9ee3565ba6f662d9815fea6ed2a0a6ab527ec798746f7fd0dce39bac73180424
+assets/content/api/angular_core_FactorySansProvider_interface.html,1742567121189,c669eb0f368500831d37894b70b46a1c0b2b795ee1925f58e0529d66b97443da
+assets/content/api/angular_core_FactoryProvider_interface.html,1742567121189,d13ddf58e25c46029828465a7dd5d5639a5836a0e9a6a565651fa85cf7ebb293
+assets/content/api/angular_core_ForwardRefFn_interface.html,1742567121189,a20594ee3edef6506302a06775a53e0e53f97d3305e8ccbe70764b86b7533bb2
+assets/content/api/angular_core_HOST_TAG_NAME_constant.html,1742567121189,a59ac53eb04b94ad92a8af4a184685ab0d98ff19872a8141c76a71b8375563f0
+assets/content/api/angular_core_HostAttributeToken_undecorated_class.html,1742567121190,32f04ac24687020e0a832897c0bbca7b2ad9bbd6827b051b8f1379370a79483e
+assets/content/api/angular_core_HostBinding_decorator.html,1742567121190,8beef4e268c2e264ecfa7e6770079d18161c0e40b27ec010d08bb883909bd137
+assets/content/api/angular_core_HostListener_decorator.html,1742567121190,d5687952a19f46387ec477974793603ccf599b2e66464a283e834c886adaf7f5
+assets/content/api/angular_core_GetTestability_interface.html,1742567121189,d73e6ba68abbc444c677b092ae80b992a07533b3ff84f73f72050d165bc9f071
+assets/content/api/angular_core_Host_decorator.html,1742567121190,f5ed0995da92c0ce28724759c4ca23637b5217b824780ecb6206d77738f1c643
+assets/content/api/angular_core_INJECTOR_constant.html,1742567121190,6823ab6ae49fd9d3b5b8d39152965475430e3a4f99a1ddc02d1f99bec54a4d51
+assets/content/api/angular_core_ImportProvidersSource_type_alias.html,1742567121190,d28edd0d693cd372b99f502966c8306940cd2b73cd3c7f38fe1ed3f2c9fd74a4
+assets/content/api/angular_core_ImportedNgModuleProviders_type_alias.html,1742567121190,7db98f6692abe3f046ebed29f0ef3add75d7ea1c815caae7ad08147f5e62c2af
+assets/content/api/angular_core_InjectOptions_interface.html,1742567121190,e51f15119c62b858859d49ba1c72e4edc91416eb5bc79485d4c16c706a9db16e
+assets/content/api/angular_core_Inject_decorator.html,1742567121190,3b4e293995d5dc9b27fc7cfc0f7f779bc687307820f41a57f01799b56242119b
+assets/content/api/angular_core_InjectableProvider_type_alias.html,1742567121190,e71be7c1a20fc737fc1b1d69b3c549032a3ba6869840a2d65c9c0b272d906b89
+assets/content/api/angular_core_InjectableType_interface.html,1742567121191,5f31b07b450bbffd2700b28ffbc937085c031f7ce63f2aecb17943de3ac778e7
+assets/content/api/angular_core_Injectable_decorator.html,1742567121191,1e6e7f05f528867a1a141f0c83353a5a7cdea69540ea0000020632f7d8df634d
+assets/content/api/angular_core_InjectionToken_undecorated_class.html,1742567121191,1e64c0e174d8db33801fffe0bbe54ff7c649467c82c04a18befd02eddb9a58c1
+assets/content/api/angular_core_InjectorType_interface.html,1742567121191,615d619d937bcc32caee502d0bc38f4312748f2a1a03472e49e10ed6a8ffa3f5
+assets/content/api/angular_common_http_HttpClient_undecorated_class.html,1742567121166,a794dbcfc9aad16e30294d50561b4474a46558a9d8ce84d0eb3bf1c6bac0f015
+assets/content/api/angular_core_Injector_undecorated_class.html,1742567121192,122992257fda5bfaa5ad3446b40fa410bf5b9a1f33e9cff25eec70d4dc424bb5
+assets/content/api/angular_core_InputOptionsWithTransform_type_alias.html,1742567121191,cc0c347c49d16a915f14f53bf0e1947f2084e7a6e9aef453ebd8024749edc381
+assets/content/api/angular_core_InputOptionsWithoutTransform_type_alias.html,1742567121191,0075631ec6abe2c2727e0a3afe8248a318b47151207d5cf122babb3e4c67d5b2
+assets/content/api/angular_core_InputOptions_interface.html,1742567121193,2fc6046a5cb0246c150550ac22e94286cbf5a23437908fd0940e148d16aba4d0
+assets/content/api/angular_core_InputSignalWithTransform_interface.html,1742567121192,d18738ea0157ce1ffe4a05e8f3ebc79dc2987dac2b6462cc7c2aa6f4c68a1175
+assets/content/api/angular_core_InputSignal_interface.html,1742567121192,e56f798252cc6f711a88de6e8963ad6cd3541392f5dfd63a19d3a42718c1db0b
+assets/content/api/angular_core_IterableChangeRecord_interface.html,1742567121193,3e1f547ad12bac27e46b5194d0e603055b17096b50fc2d4c43b33e7ad39aad42
+assets/content/api/angular_core_Input_decorator.html,1742567121192,5a74e4e502fe9397d2cf73f524aa9dbeb1771c436ffe314f9468143945ae0609
+assets/content/api/angular_core_IterableDifferFactory_interface.html,1742567121193,6dd70fc39ea9671e21c351cd5c7f44f51c21687f0d43d65bffdfbfb74bea613d
+assets/content/api/angular_core_IterableChanges_interface.html,1742567121193,47ee87d4dd357acd36016603c4fc2c74898eab043f3d88eea6c747ae23defe60
+assets/content/api/angular_core_IterableDiffer_interface.html,1742567121193,06528bce7f4047ac3dd2ca631352dbe3618709f353cea2fa3f28ecaf215752d1
+assets/content/api/angular_core_KeyValueChangeRecord_interface.html,1742567121193,779e9c3a79f83a5cc7143e7f4b01b212a503bb1f3338f7538af70152e5e3fb3d
+assets/content/api/angular_core_IterableDiffers_undecorated_class.html,1742567121193,2d5fa8dccaa491f6ff496a9735440e5eb493c9a06c832233bfeede997861c76a
+assets/content/api/angular_core_KeyValueChanges_interface.html,1742567121193,9db7490cdd2530e67db883a167e4b242af69087604e72dba4618f1ad2f2d4e05
+assets/content/api/angular_core_LOCALE_ID_constant.html,1742567121193,1866a5d2c4ef8698cd00bd9cf8e0c5e781813d80222f035c7f2c4c5d091cd468
+assets/content/api/angular_core_KeyValueDiffer_interface.html,1742567121193,07ae9693cf6197b49b17fb615d5f55b4b420412540616cf636531dd522424c97
+assets/content/api/angular_core_KeyValueDiffers_undecorated_class.html,1742567121193,51ff35aa54ef9c04e130530f47784b7d30b4a5caa4d8563636a08f91d5103668
+assets/content/api/angular_core_MissingTranslationStrategy_enum.html,1742567121194,8ad6db47c61fbd616a1af73b7ca49c5d08814cc094b93bbbaceb3c6917338d47
+assets/content/api/angular_core_ModelOptions_interface.html,1742567121194,7b5b682b6b03eacb4b8053fe096f47e410eb1d87706cbad5f7749fc9cab8f82a
+assets/content/api/angular_core_ListenerOptions_interface.html,1742567121193,a3adcdb05b822efa5a65d4280c594ea1702b04500bb35ba416b03045a6a6260d
+assets/content/api/angular_core_ModelSignal_interface.html,1742567121194,8a5083aea4d22422c7261bf7500be429c2c8f556df275b945d7a82a0982cd45f
+assets/content/api/angular_core_ModuleWithComponentFactories_undecorated_class.html,1742567121194,abb02322f1733350011ef261abb78d29f2940a20e2ebdff6ee05b4c80d840d5f
+assets/content/api/angular_core_NO_ERRORS_SCHEMA_constant.html,1742567121194,39b6f164177280acc4bc70f698bfe1d7d1422dc3f0c02e4847040e1da7b5fe1e
+assets/content/api/angular_core_ModuleWithProviders_interface.html,1742567121194,c27062a1dd34abe5dd6c61589631d95614b75b45859a884e582af20ef735da9e
+assets/content/api/angular_core_NgIterable_type_alias.html,1742567121194,28a4907a27a79479db64c506323305b5676a41c76386f7ea84c193423c7a0a7a
+assets/content/api/angular_core_NgModuleFactory_undecorated_class.html,1742567121194,53ffa424403121bba59495bc0ff5bdcea5f34e462a98866f3ec8042298a8addc
+assets/content/api/angular_core_KeyValueDifferFactory_interface.html,1742567121193,4b52ac9441e799a85607d56d16325e2b16790bdcf49ee424f772be9545107432
+assets/content/api/angular_core_NgModule_decorator.html,1742567121194,3253b7c7c9c200a34d096925310c6ea881e2b908f7eefe3e4c8e7a6873a0fa60
+assets/content/api/angular_core_NgModuleRef_undecorated_class.html,1742567121194,6cf1547dacdefae236e8da0c6a930ec1017e882b4dd0f3cdfaa20e5b1dcfb874
+assets/content/api/angular_core_NgProbeToken_undecorated_class.html,1742567121194,a46654072f76e117e2b7112598dbb8bc394097fbe56962b0b0e02acb28f2dcb0
+assets/content/api/angular_core_NgZoneOptions_interface.html,1742567121194,c4587acbaef70e1b42bb105304f85071b0ba3b3b62467124b7f0009561c7afe1
+assets/content/api/angular_core_NgZone_undecorated_class.html,1742567121196,208a46d97527ce6fd39487d931d5d8045337663d1401077e34d54548451c128c
+assets/content/api/angular_core_OnChanges_interface.html,1742567121194,0fd0d78c9790a3c8d25ff99bf38af9fe4613e4936d20e514047c72c51b8f827c
+assets/content/api/angular_core_OnDestroy_interface.html,1742567121195,e64be2cef22030498614f74c00c9d6905c6ecc828ba0765bd5ef9a78743f2e29
+assets/content/api/angular_core_OnInit_interface.html,1742567121195,293be5c8602c91d40b6e1ccc563dee37a321640973f0f37e6ee5c292645aecb3
+assets/content/api/angular_core_Optional_decorator.html,1742567121195,50267adb728631034a65fe09a3a0e7350c00837b48908a0cdc4bed1718ce67c1
+assets/content/api/angular_core_OutputEmitterRef_undecorated_class.html,1742567121196,6ea4cb6e1f99ebd6575e436656cfe5e7e0fd5715e6ef0aba309871bfdb41cad7
+assets/content/api/angular_core_OutputOptions_interface.html,1742567121196,e982bed84ed97714b7edc1de6987718c846a7a7b768b8fddb668ef86b13f4baa
+assets/content/api/angular_core_OutputRefSubscription_interface.html,1742567121196,85b71e8631ed0eb6889b31e958ef96e0ad85d91f262195a84b8d2794f38e476b
+assets/content/api/angular_core_OutputRef_interface.html,1742567121197,24c21a97ffc1af3f85d2889a63e98a7f4c07e8418151d9636cf58babe46c6120
+assets/content/api/angular_core_Output_decorator.html,1742567121197,d1241f18ce2a3d79adba7eeae7b8a74bacd1fea911b8d166ade5bac9f43ed3b5
+assets/content/api/angular_core_PACKAGE_ROOT_URL_constant.html,1742567121196,b64e830aa31ad00c74243c9f9341d5f187680822649d2d1c9c181dabf54742e0
+assets/content/api/angular_core_PLATFORM_ID_constant.html,1742567121196,18fd9058b690186a3d49b7af268d44010997e033bb3f80ad7dfce274e79df30d
+assets/content/api/angular_core_PLATFORM_INITIALIZER_constant.html,1742567121197,bca88b8a8e3a420433e6769b7597ccf261c9b97e118f8ea52e3d122371fda28b
+assets/content/api/angular_core_PendingTasks_undecorated_class.html,1742567121197,3fc17015331fb7e176391d96f1df049cb6edfe1a49a46f46c8848f0a934aa1a2
+assets/content/api/angular_core_PipeTransform_interface.html,1742567121197,62ff598852855d754641cd8e34a5e29948012547f3c23eead65e5d851539f4b7
+assets/content/api/angular_core_Pipe_decorator.html,1742567121197,535b07b170e229fa2bf938ae8eb433881d5cbfd9b9cbcac97ccd012d8e69dbaf
+assets/content/api/angular_core_Predicate_type_alias.html,1742567121197,7b36fcc046c30944227b803a4a318e62b5c8c094db2bb75733fcb74b3b67f9a1
+assets/content/api/angular_core_ProviderToken_type_alias.html,1742567121197,cb353b8e577e7ea7973d0366cc5c61904ad1c4d1b7fc67b42a368564867c19dd
+assets/content/api/angular_core_Provider_type_alias.html,1742567121197,00f2a25abf010bab491cea3db73e9a3df2609457fe56cfab9f09ab4fe47443c2
+assets/content/api/angular_core_PromiseResourceOptions_interface.html,1742567121197,9f0d0fee17bc6727bb78a4baa0d2d7d662a3b955bff92f7940a110e18f248946
+assets/content/api/angular_core_Query_undecorated_class.html,1742567121198,ba13e9c5f50cc7c14c0cd71714a8707bcd7b531ee3ae8850453599957eaa12c6
+assets/content/api/angular_core_PlatformRef_undecorated_class.html,1742567121197,320c6f51d16c2522fab062120aec19edfdbf2a4c3149678f85bae3078673e209
+assets/content/api/angular_core_REQUEST_CONTEXT_constant.html,1742567121198,8e665709b57aaf2d707cda8222b36a7de0348d9f4d708fca295d38d09c19ac3c
+assets/content/api/angular_core_REQUEST_constant.html,1742567121198,08a1f72ca3b755d4121110de6c66ae4847e00c9af49a2fbc572f9f1bf2450fc2
+assets/content/api/angular_core_RESPONSE_INIT_constant.html,1742567121198,36f64664573754a6103d3cab4a4517e84468fe996853126c1320dfca6cd6b5b7
+assets/content/api/angular_core_QueryList_undecorated_class.html,1742567121198,6cdead093026b7c0cb38195707fc023ce17a27d95929b9b7a70e2700807e69e6
+assets/content/api/angular_core_RendererFactory2_undecorated_class.html,1742567121198,e3114e5500196007ad413021980283d3a6e871b10fbb798727f1484f02f3119d
+assets/content/api/angular_core_RendererType2_interface.html,1742567121198,63079ad025598c7ebdc3f5919a1a9f2b2864751b69afb81d7347b49f019b1bd3
+assets/content/api/angular_core_Renderer2_undecorated_class.html,1742567121200,52a62de9ad783af875ad1381f4c50176d4e3861e89429620b292afa626257718
+assets/content/api/angular_core_ResourceLoaderParams_interface.html,1742567121198,cb493533fb75e869b510c4a10087389df0e5e968d5a0f547c67f7f06f1a4ca01
+assets/content/api/angular_core_RendererStyleFlags2_enum.html,1742567121198,583bdf0b23c15169a2f7736dfb94205952853c9f2f807a10c1ad322952b11144
+assets/content/api/angular_core_ResourceLoader_type_alias.html,1742567121198,b2998a1ddbe7c920b5f9ef96b25f26975813af9409c09b67209658b272ff81f0
+assets/content/api/angular_core_ResourceRef_interface.html,1742567121201,3a4056dd41cb73e3dbf7c227971124184669803cf8cf02f0857b7fb730b0efb6
+assets/content/api/angular_core_ResourceOptions_type_alias.html,1742567121198,f76e1672169b8acdf169ec494201c3ef5b1b2131691daadf6fb26d0b2e079413
+assets/content/api/angular_core_ResourceStreamItem_type_alias.html,1742567121200,9810b832af6f55ef61448e68444f241b1563cfbd4a986aae9c0c039cbb9b7fd1
+assets/content/api/angular_core_ResourceStreamingLoader_type_alias.html,1742567121201,442566265ccf8bf4923ba9511c4bfb6c6c2d777eb4d4accc4c80cf7d3990a059
+assets/content/api/angular_core_ResourceStatus_enum.html,1742567121200,58db1548c7803f0012c122eb982813fb06b986e3d23ae0b98e143d3789c9c88e
+assets/content/api/angular_core_Sanitizer_undecorated_class.html,1742567121201,f3a17093b6aaa70fd2f5c8c752f34f9997b0ee9ebb4ea5a9527ce0d85113ac08
+assets/content/api/angular_core_Resource_interface.html,1742567121201,4a013ec4e4681cfa300aa73bfc719964de9d1ef07c3871a31c3e19c17910a4fb
+assets/content/api/angular_core_SecurityContext_enum.html,1742567121201,2b0ddd94dd5c5c07ad9c1983be1417833af2a342d1db489027bf83a0b3b3da2d
+assets/content/api/angular_core_SchemaMetadata_interface.html,1742567121201,3f970ed71f98a2ca96501d14864e5e33834339c75e3dd1022bc912f2196154ab
+assets/content/api/angular_core_Signal_type_alias.html,1742567121201,c6105af81b70449724f5573a2156c34ff0727f21319d68c7d9973a104e48f9bf
+assets/content/api/angular_core_Self_decorator.html,1742567121201,6792bfacfcaa471d064fc8026e524cdc6aeadfb9ec640029f7309f9b3b1eaed5
+assets/content/api/angular_core_SimpleChanges_interface.html,1742567121202,2deb18dd98cec9537f51b0251b43691ae731e0d61896e79ce02b42d1aba2f0b4
+assets/content/api/angular_core_SimpleChange_undecorated_class.html,1742567121201,eda3b576c8d6edaa6f8e12a92ce758ce64ae44df82e93f96291c6c07dc0e19dd
+chunk-QIQFGZBU.js.map,1742567121447,c8c3bea544c31b93a8eaa51e03d3a34eda320e4ecb10896ef917a499da426ad3
+assets/content/api/angular_core_SkipSelf_decorator.html,1742567121202,dc3986a233c1ed84d367be87ced3f0c9940d0f6db3270abfb9da5af5236e3aa4
+assets/content/api/angular_core_StateKey_type_alias.html,1742567121201,3de0e0f81368919f87997240e2f7e3855e02178da44f81e88af8731657453990
+assets/content/api/angular_core_StaticClassProvider_interface.html,1742567121202,838db19375cf275b2192f93708e7f2d195bd962fa56524c57a8f7c8453b51af4
+assets/content/api/angular_core_StaticClassSansProvider_interface.html,1742567121203,4cd52984e83d50897a49cabdd2f37e4e37acf4604cae1761ee73c1fa8fe9c80a
+assets/content/api/angular_core_StaticProvider_type_alias.html,1742567121202,04eb7c7e136a7eefa379f11f96320149aa219e8308029183b416aef0871b4784
+assets/content/api/angular_core_StreamingResourceOptions_interface.html,1742567121202,9a6b93e5107992ca3211149b85e72fa9aeb2430e68f3cd321683ae7ae29a2b17
+assets/content/api/angular_core_TRANSLATIONS_FORMAT_constant.html,1742567121203,b4ab82474cad3ca83764b504000548b8fd273a5969132e8745fc016b36189160
+assets/content/api/angular_core_TRANSLATIONS_constant.html,1742567121204,cc24147968d05a38ae2e1311ad69d10ac24eb879480afcbe3dcbf377c0869501
+assets/content/api/angular_core_TemplateRef_undecorated_class.html,1742567121204,011e0254da1dc717140d98fb09148528789abb77730c0c9e0c343a46ed4334cd
+assets/content/api/angular_core_TestabilityRegistry_undecorated_class.html,1742567121205,db02876a9737117920a98791b2d127bfbb69482138143e07124fa8997e0a550c
+assets/content/api/angular_core_Testability_undecorated_class.html,1742567121204,d5e8ceb9b3483956f6288775a051c785b5497fa52db43ea4767e315b23a55ab9
+assets/content/api/angular_core_TrackByFunction_interface.html,1742567121204,92bdb6f31561c3e73dfb331c0c286a8c80862e046043af1ead3ab5176e838e6f
+assets/content/api/angular_core_TransferState_undecorated_class.html,1742567121205,da1ecebadae162f6953c47579160c5609af558895cccb0c0a1f17c94ac96d569
+assets/content/api/angular_core_Type_constant.html,1742567121206,71b7bee25ff4b71fe9072b3dfd651453ea9ee7aad77f58bf128799e98ec8a5f3
+assets/content/api/angular_core_TypeProvider_interface.html,1742567121206,f4c305659bed418692eee6599ee454b8c96ed780423a44fd02b2f63818ff750b
+assets/content/api/angular_core_VERSION_constant.html,1742567121206,656b1fc66c0af746fdf43e6504874416778f39678964f5fb7b0d22da3787c076
+assets/content/api/angular_core_ValueEqualityFn_type_alias.html,1742567121206,92fd1f04e8a49b6ac9bbafa78595d131ea7b4155758838c899aa31375b1f080f
+assets/content/api/angular_core_ValueProvider_interface.html,1742567121206,cfb62540f5a68b4a1e06f3eed33b945a8d4ce4df446823fd86e88eb2d7a61a79
+assets/content/api/angular_core_Version_undecorated_class.html,1742567121207,130d51fc950546e59ad6559130f827085536fdf83644e1aa03b7853cc0ac2c1f
+assets/content/api/angular_core_ViewChild_decorator.html,1742567121208,695a70119722eab64cf9d76c2c0d2293f8f969477e5921849ab4a8c758a7aff8
+assets/content/api/angular_core_ValueSansProvider_interface.html,1742567121206,a5cf5245f921cde454f2533c9f765b84f96d4a990cb97cdf481a2b545c7a1f75
+assets/content/api/angular_core_ViewEncapsulation_enum.html,1742567121208,ba8d48e984ccdd9452da585d0dfb64296bb36da5663ccdb0f39fa4dd908656e6
+assets/content/api/angular_core_ViewChildren_decorator.html,1742567121208,97b3037efcf48f40064b47fe7e83436dd7c3801d5b6a9d0c4771243fa8d25661
+assets/content/api/angular_core_ViewContainerRef_undecorated_class.html,1742567121209,a88957baf3f736faf1029d64f4a96378f9c9ec5f62017236cebf5c0f90d72f65
+assets/content/api/angular_core_ViewRef_undecorated_class.html,1742567121208,80405055f83b132bf7ed7fb943ca5e80f68452711160c336191bff1f0348c4ef
+assets/content/api/angular_core_WritableResource_interface.html,1742567121208,7bafac645ae7a017e5452836e3df659c3fbbe31c87d6986cabac525a4828e5f6
+assets/content/api/angular_core_WritableSignal_interface.html,1742567121209,d0baf3c7e436376fda0ebb48e2c3801b84d7ba015393f87507951f2bcb0b21e6
+assets/content/api/angular_core_afterRenderEffect_function.html,1742567121209,dcc55a567c47133d0a1c5dcf105f12f1165fb597b52b5d781609992d0f6f4640
+assets/content/api/angular_core_asNativeElements_function.html,1742567121209,ceb9de53171c95f3551c32c5247795b5355a5b48df11005329c92a9bf0100728
+assets/content/api/angular_core_afterRender_function.html,1742567121209,815d8e845a73125003673413925235959452727d9f4b1ee1c903dd9be3a873cb
+assets/content/api/angular_core_assertInInjectionContext_function.html,1742567121210,b88389423c6452bf5e80df60d83b51c4cb81c43ec4c33862b1667818ea9a91b2
+assets/content/api/angular_core_afterNextRender_function.html,1742567121209,c69cfd7261c4556e8afa5d6ea22094aa11e56daea35173de6c9a7cad4b81ee3c
+assets/content/api/angular_core_assertNotInReactiveContext_function.html,1742567121210,7f6aa287cac83a3c8410c8c1639e491617bc024b849f12a3d0788ad972f9ea60
+assets/content/api/angular_core_assertPlatform_function.html,1742567121210,b2641df41f7d3effa5b91904e4ae1d5ba0994993728cb81e818bf2203e679065
+assets/content/api/angular_core_booleanAttribute_function.html,1742567121210,1a2790086944f52d8aba64e5d3ee71aed7ecced1c3e5fdcf74ad9ea52ab874fd
+assets/content/api/angular_core_computed_function.html,1742567121210,1522ad697c5063a8059eead6650212de5da2a4297aad12596633e5bdd2577ccd
+assets/content/api/angular_core_contentChild_initializer_api_function.html,1742567121210,9a81c9751ba2e32820c110d755937ab83fe7c33d98eb72da4b9067cb7e15a552
+assets/content/api/angular_core_contentChildren_initializer_api_function.html,1742567121210,252d68c35d5b625e687dd49924b1d0f6f0ce7c49fe284c20f80ce89e0d83ab7e
+assets/content/api/angular_core_createComponent_function.html,1742567121210,25d45b84a13131631c96de77bda46940e41123d4dd732ced1effad6aff88f01a
+assets/content/api/angular_core_createEnvironmentInjector_function.html,1742567121210,f13b9e351efccdcdd821ee65794ec492f8c13e645a3b7700b898053f79bd2ac2
+assets/content/api/angular_core_createNgModuleRef_constant.html,1742567121210,3ae48a5b1c493096fa205a018292fc61bc3983f0b22618a0a78a84af5017ef9e
+assets/content/api/angular_core_createNgModule_function.html,1742567121210,d9d18f9f8cd419969f866992ff3b8682cdf98691bbc4f3fdd8f44c685b8b0616
+assets/content/api/angular_core_createPlatformFactory_function.html,1742567121211,0534301c79861ca5bfe18fcd78046661ba9f6dfcc9423cb9671ad21df017f808
+assets/content/api/angular_core_defineInjectable_constant.html,1742567121211,20131f02cf6e593c55a758ee536d36c6358738771e7555f3081966f1ce4eb888
+assets/content/api/angular_core_createPlatform_function.html,1742567121211,1d269e704ea10c9c95e464ce7ba97e9d170de2b5a3abfb2ef41e36ccfd26580b
+assets/content/api/angular_core_destroyPlatform_function.html,1742567121211,abfc08fdb3ac3261aa6409adf4d79027839493b6ab98d8498918df6e4306a54f
+assets/content/api/angular_core_effect_function.html,1742567121211,d6941a8b94b9fde4c4ef78bec9eb8f895d0145fd351d64d5f2a20fca22f727b5
+assets/content/api/angular_core_enableProdMode_function.html,1742567121213,ab2d9a2316e1d58dd7661afd3480d3e82ae88bce0f3da5fcfb4523c927bde795
+assets/content/api/angular_core_getDebugNode_function.html,1742567121213,2d614223e16744894c649a6aea74d0044b3d7bca9ba4bcf6458933dc60af5bd8
+assets/content/api/angular_core_getModuleFactory_function.html,1742567121213,e8f26a9000aa201fa8964a850da01bee93954a2ab625bd12bab25968e19b4c3b
+assets/content/api/angular_core_forwardRef_function.html,1742567121215,b846357047906f0b24b9370bb033cf215d11c2bfe04808af049bbd49e4eb56d3
+assets/content/api/angular_core_getNgModuleById_function.html,1742567121215,d6b6d76b09969cd568699a39cfeb2acc6ee78e811b2c1d16d70d6569fa7efcd6
+assets/content/api/angular_core_getPlatform_function.html,1742567121215,101369425ef6f4919a932d68c15555021b4fdccb93a8c6d1b7e38ec5d0c0ab78
+assets/content/api/angular_core_globals_ComponentDebugMetadata_interface.html,1742567121216,d8c08d5456d8de6e332f560326f055c549551f03b4ac14f4698716ee328ad095
+assets/content/api/angular_core_globals_DirectiveDebugMetadata_interface.html,1742567121216,b1c489a09c3c3bdf2bdde7bd3fbdf837b8413a3d0fbd4d4d2be0a0d5288a9aa0
+assets/content/api/angular_core_globals_Listener_interface.html,1742567121216,99b09728c37885afe06f29dcf664ad9222d37ac6d4e0eaacad3d2ff517035f14
+chunk-AZHCMFIV.js,1742567121391,47dcad65575d34441efb1f17fd4bfceb467c8f5fbfba7d8fe230ad5fad418ef9
+assets/content/api/angular_core_globals_applyChanges_function.html,1742567121216,81e0b27380cbe74f2564bfd5c260260d74d1d831ad60b1dcf5803e145b5638f4
+assets/content/api/angular_core_globals_getComponent_function.html,1742567121216,25b67ca0177def283a5d295a1fbf5aba93cce095480300777afd3c04861d1066
+assets/content/api/angular_core_globals_getContext_function.html,1742567121216,44f46ed94eba70b0ea2f6647628ca37df735d0bbe73f729747c8b20b0d73c7d6
+assets/content/api/angular_core_globals_getDirectiveMetadata_function.html,1742567121216,c8bc79edd27a4c9e08223db5ff5d3af1561c6c7b7cef6f169c23c7cb98926aa0
+assets/content/api/angular_core_globals_getHostElement_function.html,1742567121217,7e596f064a6be514b296daa27c238c8cc49338c23e23c86487609ec5f8bfc203
+assets/content/api/angular_core_globals_getDirectives_function.html,1742567121217,d6ab4bec09d925f1e8090c84d18699c116411e51bc406a3497344f37f51168ec
+assets/content/api/angular_core_globals_getInjector_function.html,1742567121217,107ad067f1ca042b4c6e890c7f919068e927c446f8027e7bf58da16173bb1616
+assets/content/api/angular_core_globals_getListeners_function.html,1742567121218,fd3f0c9bb082995c986544b7abbade4de9852d5e92fb6502899b9790b9da6b4a
+assets/content/api/angular_core_globals_getOwningComponent_function.html,1742567121218,0416d46d96c77e53ac0fa7c1b34584bdd714b7c4206e67231db5835253148365
+assets/content/api/angular_core_globals_getRootComponents_function.html,1742567121218,a82a385305bb20bac5549b8e0b019a0a96001c0b17354ed8b5f4bba97b317d8a
+assets/content/api/angular_core_importProvidersFrom_function.html,1742567121218,973157a8519f10d460086be421ee4e686fbb851393dd2777a2dfa46152664c02
+assets/content/api/angular_core_inputBinding_function.html,1742567121219,bef8491ac40ff96cdd9c572a76e9e2697ebbe61ada250e21b022460d7cfe1684
+assets/content/api/angular_core_isDevMode_function.html,1742567121219,febadb180f74f00c49d9799ff5690dfe519e6e9d70cda66a59e40bdfd3c8c55d
+assets/content/api/angular_core_isSignal_function.html,1742567121219,4082a051c9aac12766c52508d712a3545087a65340bbb0d9fe9cba452671afac
+assets/content/api/angular_core_input_initializer_api_function.html,1742567121219,a70c6cbe17e9c54d9fe851349e7180c8b9c91cce1a21e5206aaca6d2ced6cfe9
+assets/content/api/angular_core_inject_function.html,1742567121219,217b2df6dafc93a68fb59df26045ad5bddf2a77e075096a246d03e5150e094a1
+assets/content/api/angular_core_isStandalone_function.html,1742567121219,9c948c14cf01ee93aafdd095e5789d633e7425a9601e31a4f5d937de92d7c607
+assets/content/api/angular_core_linkedSignal_function.html,1742567121219,de5842c7b3ffb3f53a3839d48350ff0eacae2529456810f8bef576601e8f9865
+assets/content/api/angular_core_makeEnvironmentProviders_function.html,1742567121219,3e88ba6fa03528556b36c9953f89573b71839057f2908df4f9ab42bef2e544a2
+assets/content/api/angular_core_makeStateKey_function.html,1742567121219,d2869c8182707f371be88739cc51414bca3a04e3c7b8437778b85ce0dbc963f2
+assets/content/api/angular_core_mergeApplicationConfig_function.html,1742567121219,4d51e86a93c8d2f9b3d9288ea6cccdb560d8ca748dbff5ad7c209048b590279b
+assets/content/api/angular_core_model_initializer_api_function.html,1742567121220,ee2c25d4926125ae49f15dd814b31bd804390cb9cf426cf622de4616647ae4f5
+assets/content/api/angular_core_ng-container_element.html,1742567121220,816dc5d0101407b1d37605b5b8aaecb816df8edde2377906dcee0f1aa99c0209
+assets/content/api/angular_core_ng-template_element.html,1742567121220,e7b5ba8d5b4bdf1c58bbce7b37b620b87d4b6ace858ecccbe940d5bf776cac75
+assets/content/api/angular_core_numberAttribute_function.html,1742567121220,560df4454efabd40525505026e3b1ff9ba23ac72d87a209a4a03714439a7d46f
+assets/content/api/angular_core_outputBinding_function.html,1742567121220,f78155a877f52ad3daa53d2025a4622aa47f730e5b72053f4a22a3ae9add9aff
+assets/content/api/angular_core_ng-content_element.html,1742567121220,5d1a0b00266ad622fa9869bc1eab854daead00244492039d6ff030a332ada8d4
+assets/content/api/angular_core_platformCore_constant.html,1742567121220,9a17aec63fbf5387dc7f918efd3b006b999e1cf1d0937fc83d0e313f688d78da
+assets/content/api/angular_core_output_initializer_api_function.html,1742567121220,b9bb6925858ba1aac576d914f1963324df3782169ed3fcbbcf0f9e4f3caf71ec
+assets/content/api/angular_core_provideAppInitializer_function.html,1742567121220,89a53d8db55fecf8802ded7cd48cc5ca6c06f4a320836b2a1ac54aa07044a21c
+assets/content/api/angular_core_provideEnvironmentInitializer_function.html,1742567121220,4167c73c2cbf2c987db4753657996ea5ce422b20025dcc4c9de68c7d343494a3
+assets/content/api/angular_core_provideExperimentalCheckNoChangesForDebug_function.html,1742567121220,4bade93b3fa690ec8b8c948c188de0e3b9415967ceb206e73bd82682bffd229d
+assets/content/api/angular_core_provideExperimentalZonelessChangeDetection_function.html,1742567121221,fc48765bfee6f4c9f2a217c977dcccf27492e7dbe66e72d86cb1211669727fb5
+assets/content/api/angular_core_providePlatformInitializer_function.html,1742567121221,c575f8ed836c8b1b9a8951501ac4bcc396e726b99e4c32e1e2225b2d3c64ca75
+assets/content/api/angular_core_provideZoneChangeDetection_function.html,1742567121222,3d84494576338a3a3734ec4c8086a691c2d7f5d8fdb039495f0670d71cbad153
+assets/content/api/angular_core_reflectComponentType_function.html,1742567121223,733749f3aadbaed613c048560af5d8683a3f6e029b2a98bb0c2915be7224bf11
+assets/content/api/angular_core_resolveForwardRef_function.html,1742567121222,801e924521e123b9602ad026d91bb68098127babe5c07a6047c7b8d23159a571
+assets/content/api/angular_core_resource_function.html,1742567121223,badba2759d03bd0f9ec8ed4299e78e97a7a0d28268dc76d72c0b72ff0ec34fb5
+assets/content/api/angular_core_runInInjectionContext_function.html,1742567121223,e62def98fa7f053a38372521a936128244403a3202e8b4583e6d6407aabbb955
+assets/content/api/angular_core_rxjs-interop_RxResourceOptions_interface.html,1742567121223,97d507d3d8987d3a475e96bd261a9b7a1f4d54b16e658a492adf4ee8759f25ec
+assets/content/api/angular_core_rxjs-interop_ToObservableOptions_interface.html,1742567121224,086f508f473dd11a5c5f354f01d9c0e2918eecf5b1beae876932f77bbdd5c4d4
+assets/content/api/angular_core_rxjs-interop_ToSignalOptions_interface.html,1742567121224,4a7885fc15292faa9a8435123e93e5780d1417cc923ec213563543cdc896863b
+assets/content/api/angular_core_rxjs-interop_outputFromObservable_function.html,1742567121224,f9f234749ace648bbefe9a59e898b34401c8cae22820d65828e2ab06dd98f6e0
+assets/content/api/angular_core_rxjs-interop_outputToObservable_function.html,1742567121224,b121c506bb4ec74cabbd7b57beba75c97dbac8e7460f62789583c598173c5538
+assets/content/api/angular_core_rxjs-interop_pendingUntilEvent_function.html,1742567121225,9b069dfe30eb78fd786f290d1352e2f97007603d11f149587a4cb6949442f516
+assets/content/api/angular_core_rxjs-interop_rxResource_function.html,1742567121225,5b8657d2e44345e1077424e0b190606d32491ce9e40e230695fb83f480ad54a8
+assets/content/api/angular_core_rxjs-interop_takeUntilDestroyed_function.html,1742567121225,1bd335f56ef48e3ca61d6d5514740673c422030d83c7f2db15ab28023ca3c806
+assets/content/api/angular_core_rxjs-interop_toObservable_function.html,1742567121225,6f8cb70a12d64a9a7b6953c2bf6476b904d045b3b5b9d4ebea0c03c11bbccc6a
+assets/content/api/angular_core_rxjs-interop_toSignal_function.html,1742567121226,308f165efb5bf6c035d2cc716e2e57450b73aa8ee76e50a6924d676b71d68b8f
+assets/content/api/angular_core_setTestabilityGetter_function.html,1742567121225,e8f986bc11565e7958a78f90d861bbe9485e0ff98691fec448ad7b5a0f7ca75e
+assets/content/api/angular_core_signal_function.html,1742567121226,34c9f385a943b8cce860511766fa4554240925d926ce196c538fbce7b8697509
+assets/content/api/angular_core_testing_ComponentFixtureAutoDetect_constant.html,1742567121226,ba8af9486ce7676b21909d6c92687e6e7e4081073bba37a2b406050bf393d561
+assets/content/api/angular_core_testing_ComponentFixtureNoNgZone_constant.html,1742567121226,2415fc1b5fca332b9af6fa4dbebc9a3235c96b1f96dc5aa8cfd1bbf70e417991
+assets/content/api/angular_core_testing_DeferBlockBehavior_enum.html,1742567121227,fb07ec36ca09ea8588c16452563d90b8456517dd33ecbd8e85c4fef8196cdec6
+assets/content/api/angular_core_testing_DeferBlockFixture_undecorated_class.html,1742567121227,356654228300a56119f2b1f99b28d0e1972bd9dd65018e60771c8d40ec7c2284
+assets/content/api/angular_core_testing_DeferBlockState_enum.html,1742567121227,6d30b6bd51fd2aef2e87cc71667195a6ba6cf877cdd80ca72fc90ac192afd86a
+assets/content/api/angular_core_testing_InjectSetupWrapper_undecorated_class.html,1742567121227,c1c1c9fa1c900000bcd3e591d4ee3929777f37f1db880b39c9bda43b34c27ee3
+assets/content/api/angular_core_testing_MetadataOverride_type_alias.html,1742567121227,9bed8345ded9a071a2f1ce5fc935e77967139f02f90e71ffc540860d26c9f538
+assets/content/api/angular_core_testing_ModuleTeardownOptions_interface.html,1742567121228,35925b814218ac3420ef748f9b6c0ea917111c306d1a07a948ed115568ec9a2e
+assets/content/api/angular_core_testing_ComponentFixture_undecorated_class.html,1742567121227,c6833b9480d13ee2af401f768c3c3e60d721d7356fe07106adb96e7b2c7d9165
+assets/content/api/angular_core_testing_TestBed_constant.html,1742567121228,9ff13e4644b03068a29e588e23c5ad2a356d603e645a603dfaed3bae6d8b67c9
+assets/content/api/angular_core_testing_TestComponentRenderer_undecorated_class.html,1742567121228,f3306816463f9fe59a1597cea0baaf35c1f00d4e494df798e05d88d3d48c16b7
+assets/content/api/angular_core_testing_TestEnvironmentOptions_interface.html,1742567121228,45c79e70ccc78bd984340ddebf8a27565005474452354d76e5ee455caba5ff0b
+assets/content/api/angular_core_testing_TestBedStatic_interface.html,1742567121229,44bc773780366ce50e5fdfe22ecb528c7c5f1c6eae78ce1e433b0b4f44230b0c
+assets/content/api/angular_core_testing_TestModuleMetadata_interface.html,1742567121228,0af37b13216c668a91f6c4290f45962e8343ef8a90a26e46fe0df9aa843799d2
+assets/content/api/angular_core_testing_discardPeriodicTasks_function.html,1742567121228,0c85419d90674488958c15d0bd954f2065c166476db6d2d08fecffa4a11cdc1f
+assets/content/api/angular_core_testing_flushMicrotasks_function.html,1742567121228,f4cc57a396a0dfa07179cb4ac1cf7d9ead6d64f3138e9342390ccf41ded3209d
+assets/content/api/angular_core_testing_fakeAsync_function.html,1742567121228,7082e9ebb796f9f669ff390f1d6f7f5ac789256a15987d9c87088ef34ca0401d
+assets/content/api/angular_core_testing_flush_function.html,1742567121228,3a1564ffa0e42dc6ca76ead0a1d17026798a6b0ace860ab10cc78ccf40c7f427
+assets/content/api/angular_core_testing_inject_function.html,1742567121229,c51fd60fd30d54987bdc4177e5fd604fecb32a04648e3cb2c92806a42c19e377
+assets/content/api/angular_core_testing_getTestBed_function.html,1742567121228,14c4991371d12c1a93193e52ffbafe367dcd322a7298634826a153598249ffb8
+assets/content/api/angular_core_testing_resetFakeAsyncZone_function.html,1742567121229,9842b5dae236782af623501fcd00a38d859a4e47cc7088dc62431283dbc63be8
+assets/content/api/angular_core_testing_tick_function.html,1742567121229,f249629bff9273e7d234578e003e1ec7ef40e77947fdee128bf8bfc8665d49cc
+assets/content/api/angular_core_testing_waitForAsync_function.html,1742567121229,4e881b1291919b1548c9c1cd147047dd5c888857f4afd841ef664897a4e8afb2
+assets/content/api/angular_core_testing_withModule_function.html,1742567121229,adeba284a6988e6bc34c36d5d650369e0f824c97565fc6ea93a810b4b0a06287
+assets/content/api/angular_core_twoWayBinding_function.html,1742567121229,d1e9d6a237c13235fcc1c6e0ea174d2d8fcaac9c56eeac48aeb780bab0f16375
+assets/content/api/angular_core_untracked_function.html,1742567121229,d1a15ec50845b10aad27a864e0611de61a5cd424f4299ec996a464318a5cebdf
+assets/content/api/angular_core_viewChildren_initializer_api_function.html,1742567121229,be01c61bd0e8f5cd032aeb50feab21ffdbbe9b7bd88f1ec9a942df45a46b01d5
+assets/content/api/angular_core_viewChild_initializer_api_function.html,1742567121230,e08cd8a9304b6eeb0a2cdaa4de54d6f39e7fdfb0fc590173f17dcca53bbee144
+assets/content/api/angular_elements_NgElementConfig_interface.html,1742567121230,2d86268025c7e5abe8a6b7a1d668bbf1aa413d2ab6e4e3cf2bfdd7818508b161
+assets/content/api/angular_elements_NgElementConstructor_interface.html,1742567121230,93ac441e5d763521f8ef1e2fd0f73203c31918a0bbb7d03c2b022ff49153db0e
+assets/content/api/angular_elements_NgElementStrategyEvent_interface.html,1742567121230,86852f5eb7f5a01616171cb8cd995de65bf3a32348588a68c0fb42d615ecafde
+assets/content/api/angular_elements_NgElementStrategyFactory_interface.html,1742567121230,4dfe9715395347625a06a2d093d5c772146a8b1fca1f42b95019be07170cbecc
+assets/content/api/angular_elements_NgElementStrategy_interface.html,1742567121230,888594f8f9a8e57ead2897cf53cd7b99198dbf7f3d591b7997cf9b3df74d902f
+assets/content/api/angular_elements_VERSION_constant.html,1742567121230,add54ec12ab627b5ac309f8cb3fef83aac3d29195d612ae63d03c2ded4d9e924
+assets/content/api/angular_elements_WithProperties_type_alias.html,1742567121230,18248fe3fd9a284fe8df0ff3bfbe1a9be747a6ca385cbb9f4359497b58207c3b
+assets/content/api/angular_elements_createCustomElement_function.html,1742567121231,e054dac6fd3f7ac394e0dcb85abc411b2e01038802b8afa25b0db5bfcb018d0d
+assets/content/api/angular_forms_AbstractControlOptions_interface.html,1742567121231,9fbeafa2a9034d0b62ee81e46a865c556597c31a856734ceedfac5a04c49b185
+assets/content/api/angular_forms_AbstractControlDirective_undecorated_class.html,1742567121231,2c3eb22a7a2e521b2961eeab4d1a8f692a89292442602f4ac8161711848edcd5
+assets/content/api/angular_forms_AbstractFormGroupDirective_directive.html,1742567121232,90a1a1e2c01b043e4f567b20c968fceb7296e33ea293fc61d1b87efa770a7997
+assets/content/api/angular_forms_AsyncValidatorFn_interface.html,1742567121232,cc6e538a3431b951b2722a97266d40e75dabb04fb9fb31b9edeb4448cf5c6d4d
+assets/content/api/angular_forms_AsyncValidator_interface.html,1742567121232,5e338b2f2857bd7fab5b1b5f3fd18feede4427cbebc81278a6b528d14a72202d
+assets/content/api/angular_forms_COMPOSITION_BUFFER_MODE_constant.html,1742567121232,3fc870942d254ef48958d07f4ad255794079e533fa574cc86fceb1bf072595c9
+assets/content/api/angular_forms_CheckboxControlValueAccessor_directive.html,1742567121232,81c140eb1eb4cb135879327107743ca3884e595e045aa8d730505cb98f153fa3
+assets/content/api/angular_forms_ControlConfig_type_alias.html,1742567121233,eca98c90e1074dc5bfa99253be94598aa00b2cc00d7794766d12e7b9352fe823
+assets/content/api/angular_forms_CheckboxRequiredValidator_directive.html,1742567121233,4d568af4856d638d537ca4ddc4f75be0ad93d23ba9c1947e3461ef4c0df5c1c4
+assets/content/api/angular_forms_ControlEvent_undecorated_class.html,1742567121233,d3b7e5312095b8cf7bcf9e350470a4de2fb6f84aa1ffa42bc3e8c31c3f73b729
+assets/content/api/angular_forms_DefaultValueAccessor_directive.html,1742567121235,d83bf25ddac140fcd57c928e26f9e7eea3aec59be9fed6ee3ad9efe29c223406
+assets/content/api/angular_forms_ControlValueAccessor_interface.html,1742567121235,6eb380bfc6447f106b2e2eba0b7e3643c13bfdb9ec0b0292cc419969f81114fc
+assets/content/api/angular_forms_EmailValidator_directive.html,1742567121235,cdf16cc8e54ff1b7299d2b0dc667bcb7dd8b34070d78dc97b3ce9af5203ca314
+assets/content/api/angular_forms_ControlContainer_undecorated_class.html,1742567121235,27fc7851745bdb808d8fd7ba44034d60da6fbfeba1a1429d3a574626a5ab8201
+assets/content/api/angular_forms_FormArrayName_directive.html,1742567121238,65afb4fe95788d47fbfb6c86e12693be6ed5cde3f002fdfe3e655326f8b67eda
+assets/content/api/angular_forms_FormBuilder_undecorated_class.html,1742567121237,8015af81d39d2b87e0be6771800c443a5815ddc353e8d5f3b17f734c2275e210
+assets/content/api/angular_forms_FormControlDirective_directive.html,1742567121238,baaeead700f274b5df4ccfcc00adaa94060150cbfef2f941c9c4b6aa87b19c04
+assets/content/api/angular_forms_FormControlOptions_interface.html,1742567121238,161c2c6cb0fde57a4e7be75e8b4a2eeb5009bb13ddd0ee33c35008556dc6c09f
+assets/content/api/angular_forms_FormControlState_interface.html,1742567121238,72336ba95551c8a41f97d95c3dfdeedff1aae47b489b5776db40f5bb7e74c632
+assets/content/api/angular_forms_FormControlStatus_type_alias.html,1742567121238,5e3b844f57423c6fd6662e5fc2a5d6f474c087f89b8cdb899e3c853981cafd1d
+assets/content/api/angular_forms_FormControlName_directive.html,1742567121238,ede24a1cd8db2f9dadc2840a7e2cee776e72d06a845bdddb06a6401411c1ee04
+assets/content/api/angular_forms_FormGroupName_directive.html,1742567121239,ee77231cd760561f4bc0c2a8eb755a4b993a6dbe59f2d375635f12a55d610f2b
+assets/content/api/angular_forms_FormResetEvent_undecorated_class.html,1742567121240,7f20e3e98ab9a94f33f6d97cc3df062b80431acec292399db38c1a41c6d7022a
+assets/content/api/angular_forms_FormSubmittedEvent_undecorated_class.html,1742567121240,40cc0cf49e522e6bf34b1dcd30be2cf2722ad31ff3a743948f7d743a8e97a679
+assets/content/api/angular_forms_FormsModule_ng_module.html,1742567121241,eb64385c5a19c549947562353783f86f54076468391568a2a275348f916cfdbd
+assets/content/api/angular_forms_Form_interface.html,1742567121240,c7ec9bc16d9a651f04ad89e98e9f3448890e2564581af9e3f989511e77c9b1d9
+assets/content/api/angular_forms_MaxLengthValidator_directive.html,1742567121241,6878ec1a29d4a810987c57e0d82e63ddfb37d0a451e37e3af52478b5e21d48b9
+assets/content/api/angular_forms_MaxValidator_directive.html,1742567121241,27f9395cf9f06c2d81fcda16ad94e911589511754891e3f225f3cdd236067bec
+assets/content/api/angular_forms_MinLengthValidator_directive.html,1742567121241,fae59041ac6bd3f933c760497680de3d967d8afcce63e62d75c3e6d3123a3b7c
+assets/content/api/angular_forms_MinValidator_directive.html,1742567121241,553e1cb86cb6476f4a3a003f819c6076c8cfb97e1260ab8a6dc1b48df286cf1b
+assets/content/api/angular_forms_FormGroupDirective_directive.html,1742567121239,c79785fb60a56b26343de37939334f89262894da4ae22e3c12ec6fcfff1579be
+assets/content/api/angular_forms_NG_VALIDATORS_constant.html,1742567121242,d18334da4de542f1e007fb86bbc5d5e6c22463f06b94c2c014071c82ccc6c588
+assets/content/api/angular_forms_NG_VALUE_ACCESSOR_constant.html,1742567121242,ddfb8ed055e88331f88197283265e171343bc1c335f60fb65e13e36caddab2ff
+assets/content/api/angular_forms_NG_ASYNC_VALIDATORS_constant.html,1742567121242,06e9a41d5929cfcb06ba9a25cacc6ea377a15d20c73f4d1a16d04026b3c4bdb5
+assets/content/api/angular_forms_NgControlStatusGroup_directive.html,1742567121242,8d725a9fbbff2bc079244b0ca0b58891053a057d527dff66edffd58054573c4e
+assets/content/api/angular_forms_NgControlStatus_directive.html,1742567121242,715a5b546f19020f6df9281eb55a4e20261405536a81967bd9ed5f3253ff4bce
+assets/content/api/angular_forms_AbstractControl_undecorated_class.html,1742567121232,9e05ce59ea24f0ac4e3ea72b85bea69c270c7dfb348f4234315af25b4dcdbdea
+assets/content/api/angular_forms_FormArray_undecorated_class.html,1742567121238,1b19ee56b8b144ef2ed2f30b8b28cc33b229fb741b0e3becab401bd0433467aa
+assets/content/api/angular_forms_FormControl_interface.html,1742567121239,62af87644c998feb3f14a1969889f6054464e1e44ae30bc0d2d59d56175074e0
+assets/content/api/angular_forms_NgControl_undecorated_class.html,1742567121244,d3622f8d10ad2d89466df28a6ca89f7ea891889214c36821cd443e53b5109bdd
+assets/content/api/angular_forms_FormRecord_undecorated_class.html,1742567121241,a3fed2b54d6e1da25634211e036b4c4aaa6c661920eacfc3c84dac1db8e9cb27
+assets/content/api/angular_forms_NgModelGroup_directive.html,1742567121245,6007ccea2c60bab6c4d601eb8023654f5ed7789c430edef37e7c1c79a5df799b
+assets/content/api/angular_forms_NgSelectOption_directive.html,1742567121244,66b91783779e846b7526201e096eff538a6e3121f0886a43af56a4fa740a352f
+assets/content/api/angular_forms_NumberValueAccessor_directive.html,1742567121245,e6957b556eb3bea768e4ff171266f4c6bc283424c67341c9b569c278b8a63d16
+assets/content/api/angular_forms_NonNullableFormBuilder_undecorated_class.html,1742567121245,e44ee7d0fed0ab2e782d94191e653e605b404b1f587839539a8b68f38569d2be
+assets/content/api/angular_forms_PatternValidator_directive.html,1742567121245,751020dc4a32c5fe17b167f44ac5f77f557a431002a919216b1ce98ab4fd05ba
+assets/content/api/angular_forms_PristineChangeEvent_undecorated_class.html,1742567121245,81a598ef70357d4f9c598e6b18870453bc042c423629744f09e30e361f46c1eb
+assets/content/api/angular_forms_RangeValueAccessor_directive.html,1742567121246,7020225e2851b651acddc6af7c011ab1fef1b82df363a1c0378393834b6d66ea
+assets/content/api/angular_forms_ReactiveFormsModule_ng_module.html,1742567121245,f6f60e2b586413bf7629717938afcd0821eb09dd9b9b97044807e817827b39d9
+assets/content/api/angular_forms_RadioControlValueAccessor_directive.html,1742567121246,192d31eb3c8e43c6604505aaf7f145e83dcb992592aefeb3013c75e84408552b
+assets/content/api/angular_forms_FormGroup_undecorated_class.html,1742567121241,b55a36f8bea5612245298841759aa84cb0f06019e8c206307898ca8f71e63fd4
+assets/content/api/angular_forms_SelectControlValueAccessor_directive.html,1742567121246,8b9669882703c15f9191ceb67016d4238992ed3d88084cf9ba5024c55a8da0bd
+assets/content/api/angular_forms_RequiredValidator_directive.html,1742567121246,96f089d427e99360788bcf747dcb30f22e49d9d1bb36f6a5b5c82ac5723d9584
+assets/content/api/angular_forms_SelectMultipleControlValueAccessor_directive.html,1742567121246,49d4ed6eb42bd7b99f0ab0ad9eb6b69b897fc4c5004497788d0d9b4d4b30eaa8
+assets/content/api/angular_forms_StatusChangeEvent_undecorated_class.html,1742567121246,1f18afb8596fa5539c93bc9f383a535652e376f866a79845718c93fc9a9fa7f2
+assets/content/api/angular_forms_TouchedChangeEvent_undecorated_class.html,1742567121246,0a8653c1048dcf69204d0d0f83de4634fc7a4291619a85e677fa5fd9bef0f27a
+assets/content/api/angular_forms_SetDisabledStateOption_type_alias.html,1742567121246,083759ff1e6165dc367fe8510ba5d00b5f8f2d4d05c8d1018709e19206142f02
+assets/content/api/angular_forms_UntypedFormArray_constant.html,1742567121246,b743b88b4b9f18462453fbe9de676e32cf1b6608437781b00efa356b28cb6c37
+assets/content/api/angular_forms_UntypedFormControl_constant.html,1742567121246,9a6863526ca119cfbf9408b4823c98e08441d12715ba80635717281f3b68524c
+assets/content/api/angular_forms_UntypedFormGroup_constant.html,1742567121246,8cb8204d3c816d725c7aef5131c4b4c6a61af620e47e2de30194295a27e8ce9a
+assets/content/api/angular_forms_VERSION_constant.html,1742567121246,0001e89500f8c88f0e5a7a16f0b23ffee8c3377d6840f0be7cd7490f227622cf
+assets/content/api/angular_forms_UntypedFormBuilder_undecorated_class.html,1742567121247,26857eddb938c1b8d520211972e7d89ffa73d6b8a4ad065a44190f29f4947b47
+assets/content/api/angular_forms_ValidationErrors_type_alias.html,1742567121246,c60803ce76415b49a07b0ea74015700f41f88d09e51f547800f43a242819eb04
+assets/content/api/angular_forms_NgForm_directive.html,1742567121244,fe40cd3f23ce22fb4c350c6c74945b16c4356ae97e2007c74e7a9d554a681727
+assets/content/api/angular_forms_NgModel_directive.html,1742567121245,35794787250877695eeb80a82928a6ceca12c72457636e61609756224d3d9209
+assets/content/api/angular_forms_ValidatorFn_interface.html,1742567121247,90b4555db769e7e7333fc16fd8752b9f9379f41f06666aca1ca8469e4d19ad68
+assets/content/api/angular_forms_Validator_interface.html,1742567121247,93505bf435cf4d005c84e751145e333e73419d3ab548e6b2e9309507676d4eef
+assets/content/api/angular_forms_Validators_undecorated_class.html,1742567121249,ae4ce7e42e6ebe4829ecf6015f2db15e3674176f7be14309a13887b80e2d27a1
+assets/content/api/angular_forms_isFormArray_constant.html,1742567121247,62628d4d2429af730a40872cc625418daf5414a205dc0d006291acb550278e16
+assets/content/api/angular_forms_ValueChangeEvent_undecorated_class.html,1742567121247,74f5c8deb05e79e80b0a086e0aad95342f4938a357db4bfaef85bde5ea030a55
+assets/content/api/angular_forms_isFormControl_constant.html,1742567121247,ee2a8f896d67c709b7b71691f90240f8986c0fbd988585a66367dc5d60d59be8
+assets/content/api/angular_forms_isFormGroup_constant.html,1742567121247,55f66062ccc105142cea13724be65d3e3050c04ac168659f43526bc29852e9c6
+assets/content/api/angular_forms_isFormRecord_constant.html,1742567121247,4db45ff9a42c473e3bc4e67ca8437852e73b956f99c5d32fb0b8230cd570a422
+assets/content/api/angular_localize_TargetMessage_type_alias.html,1742567121247,6eb9f326e6b99547564ecf1fa2b6c4da29118fb5eec39ca370ac76009887907b
+assets/content/api/angular_localize_MessageId_type_alias.html,1742567121247,992134b22db6886a080f62501a079b900ab2ed0fc966183692922b7337301d77
+assets/content/api/angular_localize_clearTranslations_function.html,1742567121248,b5e89c47325d7b6226d3dfefa449dec6460de2f6a6a76e97b25588a7909ba236
+assets/content/api/angular_localize_init_$localize_constant.html,1742567121249,679d504931e11afb2749b920a4e6146ebc9a65a055dcda3acf93a485ea9cf00b
+assets/content/api/angular_platform-browser-dynamic_VERSION_constant.html,1742567121249,244c2b1cdb3e2aaf06bf785162397beae28ce0afd2ae4941a0eab30a3d2a49c2
+assets/content/api/angular_localize_loadTranslations_function.html,1742567121249,e369f30ac1caa2a9c224bb4e0ef615fac0167e6568a65e5b616cc1e903a699c7
+assets/content/api/angular_platform-browser-dynamic_JitCompilerFactory_undecorated_class.html,1742567121249,cf8e592d31e4385bf2040022abd8a3734e09495c226e42c5c437daeacb3567af
+assets/content/api/angular_platform-browser-dynamic_platformBrowserDynamic_constant.html,1742567121249,9b8c511c97f7e5ca3263b989b76a340bad72a87e2a4564e1e4cb6c6716b0a75e
+assets/content/api/angular_platform-browser-dynamic_testing_BrowserDynamicTestingModule_undecorated_class.html,1742567121250,95e3cc091418bf29b5e77bff337640b5f2280c300cdea9ed88942758b2485cc8
+assets/content/api/angular_platform-browser-dynamic_testing_platformBrowserDynamicTesting_constant.html,1742567121250,889e4af8d15e8911d3bddefd59980e2e0dfd8f4f59f549ea749426c1644225f9
+assets/content/api/angular_platform-browser_ApplicationConfig_type_alias.html,1742567121250,3f0ff2361dff5aa22aa38791cd89b9788b6f1c2b6f6f249673663684fd21a0c7
+assets/content/api/angular_elements_NgElement_undecorated_class.html,1742567121234,99bc59d0d97cb61cb135da68eeb09d64270be9bb56e04e21e79bc85d10f7ff09
+assets/content/api/angular_platform-browser_BrowserModule_ng_module.html,1742567121250,af9ff04ab0e41cd5f65e8e0043b1ade4893e55c3791ade96cbae02990944f380
+chunk-RQGIGR6X.js.map,1742567121459,f97ee296743e59ccbee58836b9c16511568ade59e5d7ddc804a1f9d3dee75e9d
+assets/content/api/angular_platform-browser_By_undecorated_class.html,1742567121250,54950ee9849cdf2d73ced79a107efd043ec0b10cdbcdbd0f39c3872368a78145
+assets/content/api/angular_platform-browser_DomSanitizer_undecorated_class.html,1742567121251,c87eb36d864347b66e8698327c82e7a7915bf3c93b51d3bb31413270c254603e
+assets/content/api/angular_platform-browser_EVENT_MANAGER_PLUGINS_constant.html,1742567121251,a9ca961afe8eaa8d22ca6257628480233cc320c880b8f70ae5d9930c0430d2c0
+assets/content/api/angular_platform-browser_EventManager_undecorated_class.html,1742567121251,378eb439f85b4fc561bec0c05a19362960ee287a1d73df7e6779c75de6928c3b
+assets/content/api/angular_platform-browser_HAMMER_GESTURE_CONFIG_constant.html,1742567121251,11107f1fa766f0764d66e438ef49f2ef15fcca5e24114afd1e7ff5eb3bfca2c4
+assets/content/api/angular_platform-browser_EventManagerPlugin_undecorated_class.html,1742567121251,8e380a6a2ac541c3eff804967a10c48d27d0082a3e73a8dd929f1f98d3ad21a7
+assets/content/api/angular_platform-browser_HAMMER_LOADER_constant.html,1742567121251,7e3328f34b5e7e0cfc27c81d8e329fde551d526639b52b477183039fb3523cc0
+assets/content/api/angular_platform-browser_HammerLoader_type_alias.html,1742567121251,8f6f68665be2f57d64a74c37ea8acf431cb742f0e3ab3d3298ea38d29fc9532f
+assets/content/api/angular_platform-browser_HammerModule_ng_module.html,1742567121252,d7233283c6e81c3e51dbf2cd8b8758cfe024d256e2bc9a8a03340d946cdf6524
+assets/content/api/angular_platform-browser_HydrationFeatureKind_enum.html,1742567121252,e824be5f87c8b4aa9bf0bb12a41a90fb3c575b5bbda7843ae0df9d70ee6331b2
+assets/content/api/angular_platform-browser_HydrationFeature_interface.html,1742567121252,a333a213087e999bf74f6c3dbe7db86ff8225a34b1b72be686532978f38ade7b
+assets/content/api/angular_platform-browser_HammerGestureConfig_undecorated_class.html,1742567121252,e91ee48f9bf1573557c18cb7857aec10deed249ed577a2d8af981c4cff553855
+assets/content/api/angular_platform-browser_MetaDefinition_type_alias.html,1742567121252,b6143690a868b88caec3ce3d60a0085f892ea6f62af1cd8bcc598d4fbabe85c4
+assets/content/api/angular_platform-browser_REMOVE_STYLES_ON_COMPONENT_DESTROY_constant.html,1742567121252,86e44eec61d7f23b15ddfee0de30d015e7f13244d9ea226519d49cfcefdf0b52
+assets/content/api/angular_platform-browser_SafeHtml_interface.html,1742567121254,3b3605536aaa7ded5eaec4a4c4d1fd8eb653d180a0d956653c0f3047badaf665
+assets/content/api/angular_platform-browser_SafeResourceUrl_interface.html,1742567121253,eb8aa2be526c8065a9beea1e0b16e04c6e7c82610ba5ab796d991cf98d45df69
+assets/content/api/angular_platform-browser_Meta_undecorated_class.html,1742567121253,2b2d8e71005e61dab175ac26d77003bb6b785eadcdf27fac12a8fcfdfb471ab0
+assets/content/api/angular_platform-browser_SafeStyle_interface.html,1742567121254,3685502cb00019efd5a99f6449c424dcb52bdfb429e240ea63dd441cb3e97a96
+assets/content/api/angular_platform-browser_SafeUrl_interface.html,1742567121254,6382ca28fde826796dfd405c20b9e504b64e41be99379741cf8e05568f49a7f5
+assets/content/api/angular_platform-browser_SafeScript_interface.html,1742567121253,fc693f0076ab86e39d5ea7f2e06ae181fd1e9921b751c371e3f2cbc3511ca8ce
+assets/content/api/angular_platform-browser_SafeValue_interface.html,1742567121254,156838ae0e9445f50f39ca028abe33df9052d2840f674e795794ef023b0827ba
+assets/content/api/angular_platform-browser_VERSION_constant.html,1742567121254,41a81b387562ad3e708ac2ae3ad969218071bd7363018eb64482859a282010f5
+assets/content/api/angular_platform-browser_Title_undecorated_class.html,1742567121254,2478e550372edd5ea01f224c97bf46f74e6865b95473dcf0e9b76d506e99802d
+assets/content/api/angular_platform-browser_animations_ANIMATION_MODULE_TYPE_constant.html,1742567121254,fa7265df4605c1b5d104153ad570587b990073b3dc786725c6e5321221c95e15
+assets/content/api/angular_platform-browser_animations_BrowserAnimationsModuleConfig_interface.html,1742567121256,7eea8ce186a991618aa257ac077ca4999e19089c0c2bbe7e4a81177bb3fce8be
+assets/content/api/angular_platform-browser_animations_BrowserAnimationsModule_ng_module.html,1742567121256,9094e4b57555ca1abb6650dc5ed39ac0763f4990d3880e420e7f76258b30ab5e
+assets/content/api/angular_platform-browser_animations_NoopAnimationsModule_ng_module.html,1742567121254,64d16b01274e6ac62641416fbafcafd7da6a4b048cf031e63014818d03ef6de2
+assets/content/api/angular_platform-browser_animations_async_provideAnimationsAsync_function.html,1742567121256,d4ea1c39f7b0606ee6bbd92e1f5ac36cefdd502ff0793129d4a763f752b03e68
+assets/content/api/angular_platform-browser_animations_provideAnimations_function.html,1742567121256,9d51dbd661c7a77ce79ef0b7a0bebde15e5f2c346b9df9144b940301acf3dfa2
+assets/content/api/angular_platform-browser_animations_provideNoopAnimations_function.html,1742567121256,854826706aefc8672d2a192d187d5dc1d15535a6b860071d056906a60e0f5a5b
+assets/content/api/angular_platform-browser_bootstrapApplication_function.html,1742567121256,04b270012e0c6a44b25a272c79b8f0509b9a05a78bcf9b64811c960bd0695005
+assets/content/api/angular_platform-browser_createApplication_function.html,1742567121256,567fd59884460f9219205fbad227d768650a9a2bf80274965ab0006782475b98
+assets/content/api/angular_platform-browser_disableDebugTools_function.html,1742567121256,0a036f761bc1362c7f1880247a5e576cf18cef76bc10c395553e9e2a95d154e6
+assets/content/api/angular_platform-browser_enableDebugTools_function.html,1742567121256,4650d7fe539fdd4ad7b7ef1913816e0fd60545aaa2f79b25915d636b7c9d5311
+assets/content/api/angular_platform-browser_platformBrowser_constant.html,1742567121256,4329c911ffe6e76d9fd540608b6f88ac53c03154a9085dd9cde4e961675fd464
+assets/content/api/angular_platform-browser_provideClientHydration_function.html,1742567121257,7df399a186b87369318ec4d3f356e0ecddb7ddb99079c40ef565e0a2ab72f788
+assets/content/api/angular_platform-browser_provideProtractorTestingSupport_function.html,1742567121257,486c7e8a407c6a14987c73518c8fd626c7e37b9550501803e02a94c4d2d5cc9d
+assets/content/api/angular_platform-browser_testing_BrowserTestingModule_ng_module.html,1742567121258,b524476f909116140c33167669b1a6a3ee78e0fcb0e8f18d25b880a2957ea850
+assets/content/api/angular_platform-browser_testing_platformBrowserTesting_constant.html,1742567121258,2217981098a4115dacd0077fdc1b0d89e2db77a2698d8fe3625a25f9c0bfb5eb
+assets/content/api/angular_platform-browser_withEventReplay_function.html,1742567121259,8e00d1f44dbcf63a7ed608962110c95139e11501cbb0046694bf8a5775b0aec8
+assets/content/api/angular_platform-browser_withHttpTransferCacheOptions_function.html,1742567121259,ec88baed0640e351e6085f8bcd0ab8959d77b4fcb1d3eb238ef2c4d9b19ae851
+assets/content/api/angular_platform-browser_withI18nSupport_function.html,1742567121258,ae0d73f74a6ccc06a82e87d7e903d3cfceba77b66d9cefae9e7e6fb8fcd54b0c
+assets/content/api/angular_platform-browser_withIncrementalHydration_function.html,1742567121260,e2908195856359adafcd3fd8480245ea20e5592cfb47e6b66e26078e836ac600
+assets/content/api/angular_platform-browser_withNoHttpTransferCache_function.html,1742567121260,a91db250392dd6a00ceaeb86a42907e4acd3a7c1dd07b4e647b2202f9e5cc848
+assets/content/api/angular_platform-server_BEFORE_APP_SERIALIZED_constant.html,1742567121260,896e515a0a55cbb4cb8fc1ca60ebc58486147002f2510746c82a9af512637e77
+assets/content/api/angular_platform-server_INITIAL_CONFIG_constant.html,1742567121260,386730484ad4b119489c21605146420fc475b5a19e89658ce2998a5fde34325f
+assets/content/api/angular_platform-server_PlatformConfig_interface.html,1742567121260,297f18bf51a92e495a5d20083a1b4ebf06f7101a17d2497df18c1bbb2580d2ca
+assets/content/api/angular_platform-server_PlatformState_undecorated_class.html,1742567121261,d489a9a89b8df69b5808255656be965907266da89bdd7d2227fface21692ceb5
+assets/content/api/angular_platform-server_ServerModule_ng_module.html,1742567121261,c362e881af19d2a477cbfef21dc2595506b1c41e487e7eb17b1c073303dd6b77
+assets/content/api/angular_platform-server_platformServer_function.html,1742567121261,97e87a7f8f1c8f6f5239b55dd7ba1f11b5121622bd6981967a975fb46fe7c9cf
+assets/content/api/angular_platform-server_VERSION_constant.html,1742567121261,b2789d919194a3d7f7bb443372c413ad8042d38a8e67682f27cc77f775db343f
+assets/content/api/angular_platform-server_provideServerRendering_function.html,1742567121261,dc88d2799b4a010601480b2111ce8a91b0f4eecf0841b45eb571b91d5658d139
+assets/content/api/angular_platform-server_renderModule_function.html,1742567121263,95d5d5dd580e76f166415a26b7463976a55555481416187d4a4813c4dbc8b28a
+assets/content/api/angular_platform-server_renderApplication_function.html,1742567121264,7871161a819b8835b889d7d10b28a5d1616781bbebbfdc8e339d559e78bc4486
+assets/content/api/angular_platform-server_testing_ServerTestingModule_undecorated_class.html,1742567121261,f7f604d94c8f6bed30a3e04591ea8f6072b31b6f648071058367122463968b06
+assets/content/api/angular_platform-server_testing_platformServerTesting_constant.html,1742567121262,e51d272bb0cbdeb8190e4dc6fc65956d7964dfb53a830cf0b6938655d907bd7b
+assets/content/api/angular_router_ActivationEnd_undecorated_class.html,1742567121263,a071e7da7a809b9ea142c2f25100137e27981b362a522c281afd7a94820f5dc9
+assets/content/api/angular_router_ActivationStart_undecorated_class.html,1742567121264,d344d62e377cd9ef6e40125a1b0b152ff611d881bc909f05fdf0827170e6013b
+assets/content/api/angular_router_CanActivateChildFn_type_alias.html,1742567121264,97e16be5f1a1b44b3b8255656db94ff04a4f7da51ea167ead9d924e30e06fc71
+assets/content/api/angular_router_ActivatedRouteSnapshot_undecorated_class.html,1742567121264,4403f258dc7ca0f2f3a1cdad912b9d4658e1fcb1ea384950232a0fc7854db9be
+assets/content/api/angular_router_ActivatedRoute_undecorated_class.html,1742567121264,4a9d686bac3879932b8a206c85edf46efef313887fee59f5de9aa6f89c40e054
+assets/content/api/angular_router_CanActivateChild_interface.html,1742567121264,44dddac2a5414ec739e899b84709969c842d6a48e0a5277400f02b34d919ac71
+assets/content/api/angular_router_CanActivate_interface.html,1742567121264,9d4ee13b8398c2da4181c61608271793a634829e2f75da75e56bb3c84537e919
+assets/content/api/angular_router_BaseRouteReuseStrategy_undecorated_class.html,1742567121264,b99d3d0444be61a56c61ed4e5fa6499c17834da6a46390e442dd83bb5e9aeddf
+assets/content/api/angular_router_CanActivateFn_type_alias.html,1742567121264,fb51af3be9f8db1503e1ff7b7a10eac7ba8f32f0cc9628ebeb9a5e29b6aa3cca
+assets/content/api/angular_router_CanLoadFn_type_alias.html,1742567121265,576a98a544dca6712ce604a7351d1ab4e0bbc54c47d80ccad01274ee50243896
+assets/content/api/angular_router_CanDeactivateFn_type_alias.html,1742567121264,04fea21f69b906248ffea28fae79ac4bfe2aeba5cfad88ff64696548e3f16a4c
+assets/content/api/angular_router_CanDeactivate_interface.html,1742567121265,18ae53b4f86de40658df38a29adc9ae099274ae0354743db61409096552ebf29
+assets/content/api/angular_router_CanMatchFn_type_alias.html,1742567121265,d3e5687f7f1ba7470a550578fd142091910580ffc61e26c691045f6a17e8ea6b
+assets/content/api/angular_router_CanLoad_interface.html,1742567121265,abac941afd53ad782fd8926710f3c7bcab2a01f5780751a323e6516421615edc
+assets/content/api/angular_router_ChildActivationEnd_undecorated_class.html,1742567121265,227b4d795a802d1f77eba9e30dc7dbd7c51c76adbb6fd8822614cb28a172ee85
+assets/content/api/angular_router_CanMatch_interface.html,1742567121265,798e63fade4ec34b792c84e5fef50e63559c5253fcadb43b3a915bcf367d1e5a
+assets/content/api/angular_router_ChildActivationStart_undecorated_class.html,1742567121265,f9ebb072f330c27ad0ea2ee08250dcedf622e3a0598e3d1fc974ae040ffaecbb
+assets/content/api/angular_router_ComponentInputBindingFeature_type_alias.html,1742567121265,b408ef1359752b87e7f7303d864d5de01e34cac2c0f40262f8737255e2b8ccce
+assets/content/api/angular_router_ChildrenOutletContexts_undecorated_class.html,1742567121265,8aa4ebf7ab1b64e9ae4c4275af4e88d8506afdc364436b6a5afd0bcddebf520b
+assets/content/api/angular_router_Data_type_alias.html,1742567121265,bb5b17b2ec76853bfd916ade3744a3c46b06cdbc48872405208c19443f2bb90a
+assets/content/api/angular_router_DefaultExport_interface.html,1742567121267,b0a8fcb9981acdc74ae8c7e4f1d3304f9a59040c79993bf2bc8e0029bf70928f
+assets/content/api/angular_router_DebugTracingFeature_type_alias.html,1742567121267,87d4fbffdca611b2121f1b71e4a22d1bb7d43f1da11034a5aa82c6d236590621
+assets/content/api/angular_router_DefaultTitleStrategy_undecorated_class.html,1742567121268,392b50c5ee46f5d1ca590c3cdf6a13bbf5cf7fd017405d653a756045ddbad97d
+assets/content/api/angular_router_DefaultUrlSerializer_undecorated_class.html,1742567121269,4f0d567f89f7aee229647fa6d4a8af8556ee55c71ff3171935b416c2d51950ff
+assets/content/api/angular_router_DeprecatedGuard_type_alias.html,1742567121268,50ce0ef43d778ebe1c91185d0758406d0e64e1b8ad99de7af54b096c28e25a21
+assets/content/api/angular_router_DetachedRouteHandle_type_alias.html,1742567121268,afdff400bee063a57e9c58e10c41c89b663e94a198ed728972b6c980cd9a259d
+assets/content/api/angular_router_DisabledInitialNavigationFeature_type_alias.html,1742567121268,16f438b28750c3e52ff26acb20cb2c2f379f83d646fcd9e6e708ac49f4523dc8
+assets/content/api/angular_router_EnabledBlockingInitialNavigationFeature_type_alias.html,1742567121269,7d90811925adaefb03ab024e48a9d48d3e355d752d2209f1eae6548d83cca3ce
+assets/content/api/angular_router_EventType_enum.html,1742567121269,da7cc3fc0de0afa19ac9c73ea8fb3cf89ae52d85201aa89f430efc800d9ea139
+assets/content/api/angular_router_Event_type_alias.html,1742567121269,22fc8696d908db4b73a9869ab4d6761cc776e59e64238b981e8bf0950344c2c4
+assets/content/api/angular_router_ExtraOptions_interface.html,1742567121270,d3ad1b952e2a00dd0052e1d29dd87ecb520da8c39b9349cd34fd53b0a1346ae6
+assets/content/api/angular_router_GuardResult_type_alias.html,1742567121269,76c475e797ac3ca922265b81ed4df1fe88ea029b0c2015dd8047b7579b3627ec
+assets/content/api/angular_router_GuardsCheckEnd_undecorated_class.html,1742567121270,325a5123efcd38e2a7a9a7223c64457c4a32b0b4a27afb5b4384add38c2b14a5
+assets/content/api/angular_router_GuardsCheckStart_undecorated_class.html,1742567121270,2c1e696536573f0b2d03477ca25e870a245d1b25b32a5a85b74c6ce7abecc6fb
+assets/content/api/angular_router_InMemoryScrollingFeature_type_alias.html,1742567121269,2c2ed3f035d2a5396727784851d5f1bd2149ecdf36d5a966d228ae254f0899af
+assets/content/api/angular_router_InMemoryScrollingOptions_interface.html,1742567121270,2afdd31bde180d43100306cc1ea974b6084feed72fd720f4ab964904b3aca45b
+assets/content/api/angular_router_InitialNavigationFeature_type_alias.html,1742567121270,0c57dbb6cdb8f44859e74f34161275102cc1dc1d76d180084c94606a1e743acb
+assets/content/api/angular_router_InitialNavigation_type_alias.html,1742567121270,253199f605c1caed637280309a772be789712e569083696f267c6da878b13e87
+assets/content/api/angular_router_IsActiveMatchOptions_interface.html,1742567121270,287b1dc7c223b4e67823a4598c1ca7798711c4dae7040d25e1e05a5451eab404
+assets/content/api/angular_router_LoadChildrenCallback_type_alias.html,1742567121270,0c66989c9266c4a63683fd64610d1c9f35cd7581dd133c95655d0aea7644cc45
+assets/content/api/angular_router_LoadChildren_type_alias.html,1742567121270,f2d267fcf560709dfdb67176f1a18ae9584064061375ebf8662ba044e94ac550
+assets/content/api/angular_router_MaybeAsync_type_alias.html,1742567121270,4e060d2a29332456fe84b7527d956f10cc119172611d919dc555a82922db0895
+assets/content/api/angular_router_NavigationBehaviorOptions_interface.html,1742567121270,0b13e71c85fc32b49972b8171f6994829721e56cdf6922ad32168d98b0e94352
+assets/content/api/angular_router_NavigationCancellationCode_enum.html,1742567121271,665b0fe452dfd167e58d79e2ac2831b2fea9e7220f69995badd5e46d2319398e
+assets/content/api/angular_router_NavigationCancel_undecorated_class.html,1742567121271,0e41024425f94df4b5481a8ae4d5a0cd9ff8fb1363ba200883946686ea6471d6
+assets/content/api/angular_router_NavigationErrorHandlerFeature_type_alias.html,1742567121271,432a24d2f3f33c919eb48e08b8f8e3b78a62fa81606fe85f04d62e949f31b66c
+assets/content/api/angular_router_NavigationError_undecorated_class.html,1742567121271,60d6c9c75e9a8640a1e3d3389bc2e3f08851403725c25710d80019e51d1f78b4
+assets/content/api/angular_router_NavigationEnd_undecorated_class.html,1742567121271,af2d4e8eae66b2b6142faeb5eec4c0b7279d180b7c4303def44ff4776c6c9dab
+assets/content/api/angular_router_NavigationSkippedCode_enum.html,1742567121272,8c1eb43c80927c5ac8ac756903e36cd57c25c99eaf245fe5c37e38434584fe82
+assets/content/api/angular_router_NavigationSkipped_undecorated_class.html,1742567121272,cbd75d00049986626822119ee97cee07321574ba57cbfbdb36ec9816c034a2f2
+assets/content/api/angular_router_NavigationExtras_interface.html,1742567121272,4bac9163ce61a707a59389fe67a46a2ec903d8647be3a46eb236321faa31b1cf
+assets/content/api/angular_router_NavigationStart_undecorated_class.html,1742567121272,4bceecc0d630772e6ec49606c4fb64eea43e2827ec3fc8956e1f7eced262926f
+assets/content/api/angular_router_Navigation_interface.html,1742567121272,90b8c100a95736d2caf0c65bb671df5e885cd04c17ccd00a0fa1ccb7f55e337b
+assets/content/api/angular_router_OnSameUrlNavigation_type_alias.html,1742567121272,aeae73a8971fb1fc14f5ced8e1bffc466eed645cf5959472d1bdbfe4daa226a9
+assets/content/api/angular_router_NoPreloading_undecorated_class.html,1742567121272,3152c5ec5e42082840a2d9fdb252155218b4bc8f25505a8b44f3de2d961aad46
+assets/content/api/angular_router_OutletContext_undecorated_class.html,1742567121272,292f7ca39d76b52e5da347572552f53fc552713c8be1b2b101877837e1105360
+assets/content/api/angular_router_PRIMARY_OUTLET_constant.html,1742567121272,f2a1cd9ea66d9ecac9f9b11b425787235d161890dafde86cc1895336bf7b169f
+assets/content/api/angular_router_ParamMap_interface.html,1742567121272,3ca65d9aa3c9e6d64a122cd667ac7b860f5bfb6705b1a3614602c18010de6760
+assets/content/api/angular_router_Params_type_alias.html,1742567121272,39fb73a853c54cc7f30e74e40568ed548cb1fbc5695fddfb39723d2e4b31763d
+assets/content/api/angular_router_PreloadAllModules_undecorated_class.html,1742567121272,171be51744837febba091461eba7d9e0bfc85dff6402a2829006f086487ca0fe
+assets/content/api/angular_router_PreloadingFeature_type_alias.html,1742567121272,a817c2edd814ff402228a9dc45142b339a7233183b7bd9af25907129253b520f
+assets/content/api/angular_router_PreloadingStrategy_undecorated_class.html,1742567121273,4248ca2aae7b86fbcce8b274a92110b6c6f8bbf43e2a62c9e334eb30e758b137
+assets/content/api/angular_router_QueryParamsHandling_type_alias.html,1742567121273,a1fe2cb273ffb0beabfb74a1f7f09452d142f029f346a51b37e9a9cd7eaeb5ec
+assets/content/api/angular_router_ROUTER_CONFIGURATION_constant.html,1742567121273,7d1ba2da6a982642a0e1ef4d553d8e299b5e39488df0ac706cbd1307ef1dc3ec
+assets/content/api/angular_router_ROUTER_INITIALIZER_constant.html,1742567121273,214104c19613712cb9b87fc13220994e749b4bdcd4a9c80e27e1a2cd3283c3fe
+assets/content/api/angular_router_ROUTER_OUTLET_DATA_constant.html,1742567121273,7cfca02a9d81cae13c237fa71903bc4ed0c32e011c58193eebf3f3cdcc8bacf9
+assets/content/api/angular_router_ROUTES_constant.html,1742567121273,9b9c84a074ec76ea0498ea80be8da2255723410d5c82d12ba22eb10726292aeb
+assets/content/api/angular_router_RedirectCommand_undecorated_class.html,1742567121273,a3921a4f031f18f2fa74e83bef199c094d40e079868f213bf806027eacc12866
+assets/content/api/angular_router_RedirectFunction_type_alias.html,1742567121273,48f759c8e02e69ddf16568307eed8fbb9353a1c23be5c8a10c25f2ca2587fa7c
+assets/content/api/angular_router_ResolveData_type_alias.html,1742567121273,4571fff4edf7ae791d4cb56b355ca30e624590946ee5ce0963bdbe87a11fe911
+assets/content/api/angular_router_ResolveEnd_undecorated_class.html,1742567121273,86212d74a3d338e43a250479a9ebb04cd5cd750b7e34abbbaaf696188d24e1af
+assets/content/api/angular_router_ResolveStart_undecorated_class.html,1742567121273,5ef0a343007671fc3387b3c3983c8f0669a791efaeec5126c44de975ae0d7540
+assets/content/api/angular_router_ResolveFn_type_alias.html,1742567121274,af70ad525a19752d9a808997d311e28667d9c59f3628e6124d78caeb61c03ff3
+assets/content/api/angular_router_Resolve_interface.html,1742567121274,ff82feef2987d37c308928e53e0a0a5e7ac8530c2fdeba8847b4b671514dbd7b
+assets/content/api/angular_router_RouteConfigLoadEnd_undecorated_class.html,1742567121275,39ce4e87ee81336b6109cc7de94c1d6af683dc9b556f3d2a4a66a5ea090a05e3
+assets/content/api/angular_router_RouteConfigLoadStart_undecorated_class.html,1742567121275,2a7eafd05890636aa22f8549ee335bc96793a0b55a234d71ccb639fa61348ef2
+assets/content/api/angular_router_RouteReuseStrategy_undecorated_class.html,1742567121275,37564946bc5f5593878f62732789397597419e742795e405b77e4744098e4ffc
+assets/content/api/angular_router_Route_interface.html,1742567121275,dd92ff77804cf3fdb84e62496681f6443f6cb0b460c301d84747e762476bd206
+assets/content/api/angular_router_RouterConfigurationFeature_type_alias.html,1742567121275,e2a7ed67fddc01e88ddf6d47c118b60802781f6889610a6873e0fe320cd9499f
+assets/content/api/angular_router_RouterConfigOptions_interface.html,1742567121275,7005aa49a0080ff32e2a950268f95362a5a753b18c99baa6286ff344de087b7b
+assets/content/api/angular_router_RouterFeature_interface.html,1742567121275,3190fe7a73df93526ec3b9b21c2813b69902f762c4e5d8394edcbad397e411f9
+assets/content/api/angular_router_RouterEvent_undecorated_class.html,1742567121275,3cecab2e30982c0b753ecb0592d684acefe77199e4b085fb54f5ee782d9ebc12
+assets/content/api/angular_router_RouterHashLocationFeature_type_alias.html,1742567121275,5ce23a5097add5ef74370a7256b2a9aa5468b26fb1e25b0956061b885faf5d84
+assets/content/api/angular_router_RouterFeatures_type_alias.html,1742567121275,505ac612162e708bb6270f069ad66d2fca3686151331eec048672a51e72d9812
+assets/content/api/angular_router_RouterLinkActive_directive.html,1742567121276,7e02145f81132a980ab1ca24a2fda788d8519e47e6981b04105a8c20183c3518
+assets/content/api/angular_router_RouterLinkWithHref_directive.html,1742567121276,fec61767a7694d941465f16c37754588471ddd773927843dde4552467b0d28a4
+assets/content/api/angular_router_RouterModule_ng_module.html,1742567121277,3ea4041f35adb944c711068e1815595ea087df080aa98f94c5187792072b173c
+assets/content/api/angular_router_RouterOutletContract_interface.html,1742567121277,c9acb0d145c507375e830da7707c76943fd2156a21e9bfa2743915a322c0c97d
+assets/content/api/angular_router_RouterOutlet_directive.html,1742567121277,5b563314174abf55b7ca48e4b7a771b3481abe03022d7a86b98c9689879b888c
+assets/content/api/angular_router_RouterPreloader_undecorated_class.html,1742567121277,43c3e4cbfe74f327a1d60f7076307dcf61ea530b8d0eda0ff72e7d1b5e58a3e1
+assets/content/api/angular_router_RouterLink_directive.html,1742567121277,0ad5ff38c2f7ba130538f85906745e97d2e2882c6d6e84af35a661c84ac240f6
+assets/content/api/angular_router_RouterStateSnapshot_undecorated_class.html,1742567121277,38b53285bb40938f902368b3ea43415c90c6d38f56f7994d3753b167e90d7425
+assets/content/api/angular_router_RouterState_undecorated_class.html,1742567121277,c133b3b03b517c2ad37b85668f4733163cd6c7e69a8ae2fdb35c79b0ba1935f4
+assets/content/api/angular_router_Router_undecorated_class.html,1742567121277,40f5b93d07d187f8cc18252f712d10961d2bd9b817abda076529123793817631
+assets/content/api/angular_router_RoutesRecognized_undecorated_class.html,1742567121277,76b531a00dbae8567559e40ca870358e9cbcf46feb2ad322bfda7ff5fa8e077d
+assets/content/api/angular_router_Routes_type_alias.html,1742567121277,1d164e1ac365725a8a33190c31d4c7e79f50d94024b1143ba18a08c175bb13fc
+assets/content/api/angular_router_RunGuardsAndResolvers_type_alias.html,1742567121278,c81ea5bcd8f413a145905c2beecde726fb332fb7c9d181d1263b7875d5f146cc
+assets/content/api/angular_router_Scroll_undecorated_class.html,1742567121278,fefdf546b4ee4fc42e60634598a1bab901eb57faa381d64b224a7b7710a61b54
+assets/content/api/angular_router_TitleStrategy_undecorated_class.html,1742567121278,f14a1aa4106e913b88cfa2c3ef9ee344f3999555c4497cfee755998fac18ebef
+assets/content/api/angular_router_UrlCreationOptions_interface.html,1742567121278,5b5b2061ceb5815319105a718e8fd6fadd841f7e2f00f8132f7e6f425136f42b
+assets/content/api/angular_router_UrlHandlingStrategy_undecorated_class.html,1742567121278,287d55feb11903c735d279cd4984699ceaf7b9b0d17a6e6f8787da902d2d5faa
+assets/content/api/angular_router_UrlMatchResult_type_alias.html,1742567121278,bb63e482957aba236e0bad6907054796e3e73747981bb67cb38db0677b2f8c6b
+assets/content/api/angular_router_UrlMatcher_type_alias.html,1742567121278,19b845e584b10a704b4b9cee21e5722209e4ecf5a2d71fde45890c6f7c04ac49
+assets/content/api/angular_router_UrlSegmentGroup_undecorated_class.html,1742567121279,9100eab95c0a08e131a93a2bc21205f313af8ee7ce8f7b259b521408e5771f70
+assets/content/api/angular_router_UrlSegment_undecorated_class.html,1742567121279,db74327ef5990c2e9b2cfef1988997a1f5eff5e1270a0f934d9eec52dfb399f1
+assets/content/api/angular_router_UrlSerializer_undecorated_class.html,1742567121279,287358c42ae82172449f6c3778c23f819d2c7d0afa7c9ed7cfe791c6a80ed3b1
+assets/content/api/angular_router_UrlTree_undecorated_class.html,1742567121279,7a14bcd7bdfb938f50236abf4fb7981e189fd80c6f487afea33501a203384563
+assets/content/api/angular_router_VERSION_constant.html,1742567121279,4867feb44f17c581edba0880a73d84fb10585d423fdcabf2d12a4219de9d190f
+assets/content/api/angular_router_ViewTransitionInfo_interface.html,1742567121279,6bf0e86371a81dadce26b324408e0a80de140852665a3008e5d743758d65be04
+assets/content/api/angular_router_ViewTransitionsFeatureOptions_interface.html,1742567121279,36e932aa520c11201a3f71598618095766cbc396d08549529c6bb5d80143a48a
+assets/content/api/angular_router_ViewTransitionsFeature_type_alias.html,1742567121280,ec53fc55eefbff85618a992bf15702d3f6f34c5e6202d13e9a3780741de50d83
+assets/content/api/angular_router_convertToParamMap_function.html,1742567121280,baeac6f50475372d413176a4ab203a603631940133e8c65cd2694561aaa4c33b
+assets/content/api/angular_router_createUrlTreeFromSnapshot_function.html,1742567121280,64c275de3a1048a650eaba58fc77eae6517f9a2d19286bfe97045a189df848b7
+assets/content/api/angular_router_defaultUrlMatcher_function.html,1742567121279,b12472076389a61927b92b5f0331849c80d872ecb6493e8cea8da7a48b55bfd3
+assets/content/api/angular_router_mapToCanActivate_function.html,1742567121280,b2aacca5cbe899eda649df83d3dc6c24bc9ab53099d2ec395f93abd9048530ca
+assets/content/api/angular_router_mapToCanActivateChild_function.html,1742567121280,20663f60a04594713f411e644633763cbacf6c2a38b237e5607022a11df7069d
+assets/content/api/angular_router_mapToCanDeactivate_function.html,1742567121280,2c4802712b4d2906a80818b6f75c1b7b83a1e3104fa3698d70e600c1449de23b
+assets/content/api/angular_router_mapToCanMatch_function.html,1742567121280,fd4f5347cf28c4320d67eca68af269f7f925250993c2b41f515fb3d51cdce0ab
+assets/content/api/angular_router_mapToResolve_function.html,1742567121280,e39c4ab3da14dfed978c40748558c0a29c55af1472d0c98bd8b6e5e8e6477717
+assets/content/api/angular_router_provideRouter_function.html,1742567121281,cc778b0f9df6ad909e51e4b627f71826c24e5928c22efb8ead421c0dc78a4222
+assets/content/api/angular_router_provideRoutes_function.html,1742567121280,0d234a611697c86d5f7a90154efaf762589635f04e1b22b3aff636e7e97cace1
+assets/content/api/angular_router_testing_RouterTestingModule_undecorated_class.html,1742567121282,c1c4ac6007a7afcaaed089b6154a035bb18cf7941f07fec5ff6bc23371c1e017
+assets/content/api/angular_router_testing_RouterTestingHarness_undecorated_class.html,1742567121282,39f45866bef9d116f6975b7d1f910cdef3dff7f0bf5fb42b6d0f6ed687a501df
+assets/content/api/angular_router_upgrade_RouterUpgradeInitializer_constant.html,1742567121281,8721d4775171e75f3fc2bbfe6ad5d9e8278bc52b1045d36a3cf5885e5a8b435a
+assets/content/api/angular_router_upgrade_locationSyncBootstrapListener_function.html,1742567121282,e5a61fa2de4e0986cab003bbc43f4bd35bd726291c74fbbc6c318d67e305ae46
+assets/content/api/angular_router_upgrade_setUpLocationSync_function.html,1742567121282,4e19cdae2293eb9d469ee30956eec00ca00164e4f224f4a23fb000cbd77ac6b2
+assets/content/api/angular_router_withComponentInputBinding_function.html,1742567121282,e7d57d89ab85cdb2214436dce9d14b7701da5a1830d761f3ae4918450b82aef8
+assets/content/api/angular_router_withDebugTracing_function.html,1742567121282,be651c3235bf4c02e2d8a62e7004d3316f2e32bb396aaa72ca1d9a1121735edd
+assets/content/api/angular_router_withDisabledInitialNavigation_function.html,1742567121282,affbf85b812bc341b90eb7289641aa3c409ce788b6fd0f312516f5be0941fdb6
+assets/content/api/angular_router_withEnabledBlockingInitialNavigation_function.html,1742567121282,d59e62fbbf041e939e89fe1413f929ade886dd8aa02d541b649272076eecbc10
+assets/content/api/angular_router_withHashLocation_function.html,1742567121282,17a8507d541e9ccd227b31e4a715448eda51935265802e08098e54ca941645bd
+assets/content/api/angular_router_withInMemoryScrolling_function.html,1742567121282,5dd29e8643ce0333009cf5247025367d51a19ed0170bee988090fd40a3cdfb37
+assets/content/api/angular_router_withNavigationErrorHandler_function.html,1742567121283,f2b1d32145241b5106614539527d0f992574c5e803becf99a9f53fdb4d388616
+assets/content/api/angular_router_withPreloading_function.html,1742567121283,9b016b50434c152da8c3d2147335ecb6f69153b4eb02c5fb738270a92ca6d953
+assets/content/api/angular_service-worker_NoNewVersionDetectedEvent_interface.html,1742567121283,d006030d8ad47d88b87b27894c2fe5ead7f745491cd1d3c830ae49255cdca531
+assets/content/api/angular_router_withViewTransitions_function.html,1742567121283,b412a8cccb3c616b29e4a25d2c1fb9c6c37724664d75c7e7330092513876c0e7
+assets/content/api/angular_router_withRouterConfig_function.html,1742567121283,a316b31bb538fe5abb002b812df730a4467e50cfd9471b40b0d1c1b4ec4629a5
+assets/content/api/angular_service-worker_ServiceWorkerModule_ng_module.html,1742567121283,44ada99f736f625bdf4f581f9d65cdf9fabfeba1d5e70a1109c172d70bbac805
+assets/content/api/angular_service-worker_SwRegistrationOptions_undecorated_class.html,1742567121283,006ae9cc05d15d78f325563bce636f19b4d56b032ebe42fd768e7a853285dffd
+assets/content/api/angular_service-worker_SwUpdate_undecorated_class.html,1742567121283,9458320c17559731c3323c38d8591d93f6a89dbc7436cf4bdfa70eaf7dbe5bea
+assets/content/api/angular_service-worker_VersionEvent_type_alias.html,1742567121284,fb8204d9e42bdcc0efe393aa1e7c98759220762c932d3077f17690dbd331bca5
+assets/content/api/angular_service-worker_VersionDetectedEvent_interface.html,1742567121283,d7203d6bc242192b5e961f6b885d273c112123c3b5b8c6815b540ca11df19f78
+assets/content/api/angular_service-worker_VersionInstallationFailedEvent_interface.html,1742567121284,919f235b7ecab5a709e29fbc5a5cbae16952858bf32987bf7dcf7f1a43d6aea0
+assets/content/api/angular_service-worker_UnrecoverableStateEvent_interface.html,1742567121283,4407053daf484fc9558da6cdc7e542f23ff7cd5d8ece24a8d509324581469d85
+assets/content/api/angular_service-worker_VersionReadyEvent_interface.html,1742567121284,2c7fe812ec03a226b670bc917ac1c86f105c3e668aad63aa79544dc3eb4ca59c
+assets/content/api/angular_ssr_AngularAppEngine_undecorated_class.html,1742567121284,328a88ec5158edd37237b2184157fcd8a5880ea2b2a642486f8c6f8c592fd814
+assets/content/api/angular_service-worker_SwPush_undecorated_class.html,1742567121283,00b628ed6dbfe8f469fce9b0a101d3e1303c4dc7c83d845222e9717b8556c823
+assets/content/api/angular_service-worker_provideServiceWorker_function.html,1742567121284,1ed09221668c199804b2cc16c4b4bc26e729b39b88799066645a437b5a0cd825
+assets/content/api/angular_ssr_RenderMode_enum.html,1742567121284,0cfa7d497fcef05ee8cea0ce5680283352bcdba48245ef4353cf69da5c370ece
+assets/content/api/angular_ssr_PrerenderFallback_enum.html,1742567121284,d91e1fd5327f469084a9c5a3f831dda2b5684783e86cec49fec98ca0d183e47b
+assets/content/api/angular_ssr_RequestHandlerFunction_type_alias.html,1742567121284,a2e29b4d9ffd82f6fb74524ee21f6094cc6810f52947ae671d78ac30239e5a99
+assets/content/api/angular_ssr_ServerRouteClient_interface.html,1742567121285,611fcc5708c1314a5341ebb6c1538756dd2657d29c07f53f35ac36704ebc5897
+assets/content/api/angular_ssr_ServerRouteCommon_interface.html,1742567121285,58f78a95b1111c8fab75cd414434cc887e3060c62e17caa732bc4c93e3cf15e7
+assets/content/api/angular_ssr_ServerRoutePrerenderWithParams_interface.html,1742567121286,48d77e7f29a44c79b3feec001fad3bf485cede0fa154d11e629747ab70daece2
+assets/content/api/angular_ssr_ServerRoutePrerender_interface.html,1742567121286,60ea4080709a2cc011233a0e50299f6f15800aaec8ee726b784a0d68547e7b57
+assets/content/api/angular_ssr_ServerRoute_type_alias.html,1742567121286,a9cbb9b8d88bdcdd34764cf17d1d19692f8dab20cf3dc80a9f6ad0c941013ac4
+assets/content/api/angular_ssr_ServerRouteServer_interface.html,1742567121285,fac14fe5d8349d11d1dc39f5513d2ca9615bdc76f2a7a0b1865f8483e2db225b
+assets/content/api/angular_ssr_createRequestHandler_function.html,1742567121286,68af08d85afef82240e0568723d3df12736fc9cda228376be5ac909419911ea5
+assets/content/api/angular_ssr_node_AngularNodeAppEngine_undecorated_class.html,1742567121286,2be05d384b67b2919b1bc01c9f96fe39a2cb5c9e5ae434ec3dc7614a26b146aa
+assets/content/api/angular_ssr_node_CommonEngineRenderOptions_interface.html,1742567121287,8520d690253ffbed52ef38eb70eb6fbf651d27b9df4452974b67236d2e0194fc
+assets/content/api/angular_ssr_node_CommonEngineOptions_interface.html,1742567121286,b69f38df49e875700a5fb389af036bf1899830121a9ad9314754bc51455e7959
+assets/content/api/angular_ssr_node_CommonEngine_undecorated_class.html,1742567121287,e50698d72b5456e92cdbd6715ead40ebfacbf99b25acd4c4e6e02dca5371ae4f
+assets/content/api/angular_ssr_node_NodeRequestHandlerFunction_type_alias.html,1742567121287,4b4a077b79877bb6b87e0255d4b503c63e791e4be8207fa451afc0cc4724e0c9
+assets/content/api/angular_ssr_node_createWebRequestFromNodeRequest_function.html,1742567121287,70deaf4db9ecf1de5b795fc94a95b7b7e1d50f0b6b201d86b9b356f676d90d5d
+assets/content/api/angular_ssr_node_createNodeRequestHandler_function.html,1742567121287,37c5cbfdd89df8b1269916c56a13bfed3dfc82183511da85549cfbed3a53d973
+assets/content/api/angular_ssr_node_isMainModule_function.html,1742567121287,88c056e67652df77ad0879d267c3951589159b94bd42206d9d49d650ff9bc0eb
+assets/content/api/angular_ssr_node_writeResponseToNodeResponse_function.html,1742567121287,e203a71f1e2d72e1bedfbf45ddce82f56b324cf90f9588d2f9d0cc9ca092df53
+assets/content/api/angular_ssr_provideServerRouting_function.html,1742567121287,ab5fd5f7b108e13d41fc6800ef1e3c2e330746e8876fe02d23c7be94202c9985
+assets/content/api/angular_upgrade_UpgradeAdapterRef_undecorated_class.html,1742567121288,b5f609cb0f3410af0930332e9280855f2b700763d10d039d96d74a67e8ca4934
+assets/content/api/angular_ssr_withAppShell_function.html,1742567121288,7b39b6043d1402bb243fe04cd3af249cb2bf8edf20cc17ec29212f85e4510b07
+assets/content/api/angular_upgrade_static_UpgradeComponent_directive.html,1742567121288,0eac13167f7634b63f8406f0c7ad4ebcb26339184bd025fcb967e2d097d8580f
+assets/content/api/angular_upgrade_static_UpgradeModule_ng_module.html,1742567121288,a68f2772f21b3b74d443c37e586fe7c91c1093f57f6b14c135d41a9ac6df034e
+assets/content/api/angular_upgrade_static_VERSION_constant.html,1742567121288,744fee3c7642b65312e32855d7027a785cafd3233c5a92fc9ce3a9aeef91d7f0
+assets/content/api/angular_upgrade_UpgradeAdapter_undecorated_class.html,1742567121288,08fef0af8c7b1427a4031cf38aa1f310d47a840947668b6e1cb53eed48fe4ad0
+assets/content/api/angular_upgrade_static_downgradeInjectable_function.html,1742567121289,9a78bf2c22e2c8d882c10f22c975aa6cca69a5354af18afac0253d5c572db2ee
+assets/content/api/angular_upgrade_static_getAngularJSGlobal_function.html,1742567121289,a0186165e4babebc1f850deb4cf877740cc8e63752d2a5d9053b881eb47bd08e
+assets/content/api/angular_upgrade_static_downgradeComponent_function.html,1742567121289,659e3281e1ff3e6289028627e0c7e75b0ddbfb9d94f5870657f7f7ccd96c1a2a
+assets/content/api/angular_upgrade_static_downgradeModule_function.html,1742567121289,f3dbddceb306d00be898986a1e5f9c042a23a80168364b20985472f893d15928
+assets/content/api/angular_upgrade_static_setAngularJSGlobal_function.html,1742567121289,f31a39ff8aef68fd8466f50bb7aa77bba16a9fe600712dc7827b8bd010da0581
+assets/content/api/angular_upgrade_static_getAngularLib_function.html,1742567121289,a86e5bd4ea1bc752bd9ef343cf5932e612793cf622a2d48b1fd1c3a9684e8f39
+assets/content/api/angular_upgrade_static_testing_createAngularTestingModule_function.html,1742567121290,d6d2776fb9b2c776ec74090194813d9fccfcc7e75c035ef5f6361dd6372dbdff
+assets/content/api/angular_upgrade_static_testing_createAngularJSTestingModule_function.html,1742567121290,da0458c0f0058bc3db41c9b8d4974650705710102331000f821421d5a6de87f9
+assets/content/api/angular_upgrade_static_setAngularLib_function.html,1742567121290,02af501f3fc50e7ed4720a57498a085058ff6f98eec4f506dd30de6200e3b39f
+assets/content/best-practices/update.md.html,1742567120857,76921e9ce97dde6ed78356e7fbbe0ea4ee782593419633d22eb77c2bd9dc682d
+assets/content/best-practices/runtime-performance/overview.md.html,1742567121123,4fce47c75ca59b917bdbaff8b471d69e0c25075f6fea76e8f2162ff75e669705
+assets/content/best-practices/a11y.md.html,1742567120855,27ad695efe83bf50a86f6e2ded44ee248cc2f2c4f8a815f010c24d8a1349192e
+assets/content/best-practices/runtime-performance/slow-computations.md.html,1742567121131,52bbd7fdd29107ef19cb382c2b5dabf904ebe935ae9fe4e485c174a95dd87ab2
+assets/content/cli/add.html,1742567120817,11f2fc9502ab7fd007868e3daf7133b8fcb67f8ffb2f10904abd091bbb1ea9bd
+assets/content/cli/cache.html,1742567120858,630b72dcafb2124fba20193b5272f6baf76c24b39ba5b9b27efbee6df6fda32a
+assets/content/cli/build.html,1742567120857,4c0a7714eb0bd526ba665a69a6ef9c011d7f89d351537be9a229f65ee0e3d830
+assets/content/cli/analytics.html,1742567120857,f8f1273a49f7a554654df92c5753548d310f214b3b1e6475f5cee7df4c026ba7
+assets/content/cli/config.html,1742567120860,17b725d0c94039cb48bcfc3d2551cc8721434b7516ef3bde2e35b3de8043a1c9
+assets/content/best-practices/runtime-performance/zone-pollution.md.html,1742567121133,b14c662bc051193c2408b5d29e0d7dce7c552f8c7f45984e7c9ea35cd747577f
+assets/content/cli/completion.html,1742567120859,c2fc4a01d9a2bd4febf057bdfe52003eab012ed33082bfd704b2a9584882ea42
+assets/content/cli/deploy.html,1742567120860,c1d2ee40c2e975055006ca043ee679c852bd43ea4b30c0c307ccbd0fcaf3de28
+assets/content/cli/extract-i18n.html,1742567120860,d1af6959a16dbc8a7ab1544e66e61bc19b8b6e4a3814196ce896d791180948bc
+assets/content/cli/generate.html,1742567120860,7b43141e5ef40634fcffcc5a0882181af5e07994227e894ead888ec965b3869e
+assets/content/cli/e2e.html,1742567120860,bb04dc221d845cd05201f52f222688a099bbec491a946f4338a3d9010fb58856
+assets/content/cli/new.html,1742567120861,9c0a01eb0d38e216a6848016427b37b8e2d1f5d002b81f8125b07a7dcf0e0315
+assets/content/cli/lint.html,1742567120861,d26f0aad0e7be710b7ca409b63994bf37b9444fdc555367898db21b5b3ac2afc
+assets/content/cli/run.html,1742567120861,147e634e822fe1a60095f639ebe40d98d15d1230076c1d6d15f85919005ab4a1
+assets/content/cli/serve.html,1742567120863,b16e974fa3325766dcf853de5af2667601383aecbcafaa99ccbe23dc38497210
+assets/content/best-practices/runtime-performance/skipping-subtrees.md.html,1742567121132,4fd17850d287f6d780dfeee9aa936054305d677ee0b20bd6d6ec935fe72717fd
+assets/content/cli/test.html,1742567120863,731eac1276610cd0bac1147d202590e6fd951becd2bc526d645d6d4c5c4889d7
+assets/content/cli/update.html,1742567120863,8b1fe62ca60a9ba14cc02475e7ff0f2e3ea9513360c1c91b619f3d8e207e5131
+assets/content/cli/version.html,1742567120863,305aaa8f4bf2c1a0b512b560f3569157732b96769c30d4f6e0b58f31272e1f18
+assets/content/cli/analytics/disable.html,1742567121296,4fea08ff4d43bfe32676ebe7407c486d569f036ed1fbb175ee2f1fcd81f69057
+assets/content/cli/analytics/enable.html,1742567121299,9054bc8b0dfb2375076ba593fec42fcfa0adba0a388e593b154f19d842d4084e
+assets/content/cli/analytics/info.html,1742567121300,be9210ced9c09c9ac8ca9e3514de9774ccf22871c3acfd3f2c3bddeae9822289
+assets/content/cli/analytics/prompt.html,1742567121299,d59a3ff095392d99aaed7674f2d54777580f4ca9155d65fd0485e3671b515d25
+assets/content/cli/cache/clean.html,1742567121291,c7f68418c1be87dfcb40d82eb70d21461a88fcf3e4f2aa6f00e47b629c060293
+assets/content/cli/cache/disable.html,1742567121292,a6af073a2e542e4f46dedf0e1edc4374b8c3a2961204c9ea1db030f7986b901a
+assets/content/cli/cache/info.html,1742567121292,55d32ab16fde41563beeb4e2b26349227bea17e779652899fcd6a0ab67412c0b
+assets/content/cli/completion/script.html,1742567121291,6ad08bd4d4b4b3fab11b18393d39b2e96626942160beda2f759a073a962c7b30
+assets/content/cli/cache/enable.html,1742567121292,252525b8d5bc0b2310f2a9bd98c517c1a2847ed8522465bc2f629222ce22131b
+assets/content/cli/generate/app-shell.html,1742567121291,d51345d40aa3226649b352210cfa5ac8bff41ebe43e6f82f8e068d00ce800d0e
+assets/content/cli/generate/class.html,1742567121292,e38e15e2e678908b47cfe81c2699a203268910bb1ac4c4ea76263c44675239a7
+assets/content/cli/generate/application.html,1742567121293,7009c9e5caa88e4a9753aff357486db9dbd4e8cdbafb19f2a68943a117b1e5f1
+assets/content/cli/generate/component.html,1742567121293,690339815e34ef43b503f980eeecf3dd5909a336eb137cf280871cd705b710f1
+assets/content/cli/generate/config.html,1742567121293,560923b5a4d877851709bace7cfb65b9aa811238a55182f89c128af259339fbd
+assets/content/cli/generate/environments.html,1742567121294,77d3093d2ec7c46998e3f12abff62074d12fc963bce99c91a8c4ff203c01ef6c
+assets/content/cli/generate/enum.html,1742567121293,d79b5da2a503c406a026d4874cb920c90fcb67d6ba080b6a6273ce9aca359917
+assets/content/cli/generate/directive.html,1742567121293,d1e272feacb0d0f5be2e0b67e6303336bbbc160c7ca522242e64b74d56828a6c
+assets/content/cli/generate/interface.html,1742567121294,32bdfe713aaa533d08afa218688dc5c042dded6aff998dd9b64dbcd40c23100a
+assets/content/cli/generate/interceptor.html,1742567121294,ea47033672669d3e8a802d5dae289bad8b20aaaf827da1fd1f771369ae9dd31f
+assets/content/cli/generate/guard.html,1742567121294,a1d379fdb851261f09d7f061e271910e86eb6db034e45b77ea923134c905d358
+assets/content/cli/generate/library.html,1742567121294,16650351a3561de8b9d3633847bcb7fe862bd046242017b058bdbb54cddcc770
+assets/content/cli/generate/module.html,1742567121294,34f45c90167e0e9387aa4369844da1381fad915b83761313c684430236f51a76
+assets/content/cli/generate/pipe.html,1742567121294,21f3bc855668062ad12892f2296dbcd86b918c842a4f10972aff2243c0835dd2
+assets/content/cli/generate/resolver.html,1742567121294,1b8d99eaed9f8f43a23dc69d71775db5a7847b0a8c4bd902377e8daeabf68a98
+assets/content/cli/generate/service-worker.html,1742567121294,b3e1c011d829789350d77ec5af428040c3391e5733e69bdcd7c675f484d45d18
+assets/content/cli/generate/service.html,1742567121294,744dc339b4d4872ecba188dddfb6e3577dcb2264ab0458606cf5b1f28a4dcf14
+assets/content/cli/generate/web-worker.html,1742567121295,92cdc42da569c3858c59745fd72ef705f02d05455b8e5858b71c71a241b84089
+assets/content/ecosystem/web-workers.md.html,1742567120855,968a2a0cef454b67390b5a6066372d25b01e6d682fa150002a9ed01b2ac6d7a5
+assets/content/ecosystem/custom-build-pipeline.md.html,1742567120817,1bcdc94e71609d636a7003c50b2cb77bd411cab0063f22c3ea032be65ee72350
+assets/content/ecosystem/rxjs-interop/output-interop.md.html,1742567121290,2b0be3a6cd1be50f1746c330a7232c4464ba5992a0ef8cc7cc21063aa7879730
+assets/content/ecosystem/service-workers/app-shell.md.html,1742567121290,a3c6f43399db5b22f8fd1af659a9a2278305ee7e45458e99399f6359463fba8f
+assets/content/ecosystem/rxjs-interop/signals-interop.md.html,1742567121292,e6a7799f2f209e6793d82a7835e139419a6ac9f942a2b03884137ca6575a148e
+assets/content/ecosystem/service-workers/communications.md.html,1742567121291,5252d8424880aa02a1bb83d01ca21a32d84ed6e85deda5ef7b2d9c4a2e11b0e5
+assets/content/ecosystem/service-workers/getting-started.md.html,1742567121291,5041385deb2d34cbbb5fdbfecddce664cc8e8979045d9a3eafaad0d18a0e7734
+assets/content/ecosystem/service-workers/config.md.html,1742567121291,48db74977d3ad1ff3153f3d5d913068ff49e7c8a217ecaccb3a2e73a5fb750fb
+assets/content/ecosystem/service-workers/devops.md.html,1742567121291,f5a0630e0e0f0a293bdbe6508d710c26bf7bdb1cf548d9c242c9539fd892d97a
+assets/content/ecosystem/service-workers/overview.md.html,1742567121291,aaa58e25428cb959ba9c98540e3d676adba07bbf40d3bef00c30caba9fdd3cfb
+assets/content/ecosystem/service-workers/push-notifications.md.html,1742567121292,53636c54d4776d0a0e0fa195f15587cc0c2fa76073d9449957677c5ca3ab8d22
+assets/content/guide/hydration.md.html,1742567120872,62e5db10bbc436b977771f9332c6f53d27cdacf9341470da6a3beb3194efb325
+assets/content/guide/incremental-hydration.md.html,1742567120876,e14712efb478f4ecdaed45f44cfab00473eb73c60c64e6cf16441bdf21fe5898
+assets/content/guide/elements.md.html,1742567120865,b6acf2cac81d9793caea520324b133f6bc3c382bcf23b415525da7191005f53f
+assets/content/guide/zoneless.md.html,1742567120877,5e59e25f278b822b1fc75fea0bc35be113021a35a031cfa2ca4ddd1a32567789
+assets/content/guide/ssr.md.html,1742567120879,3c8ec5575f32d9efe6248628e75cf5202eb1ca06bba3e219f8129df658ff8b75
+assets/content/guide/animations/reusable-animations.md.html,1742567121300,ec89f80aa839ea46a2f0f5f6bf4f4e44c13d8a218bc97be3521ae1d975fd58a6
+assets/content/best-practices/style-guide.md.html,1742567120824,c0a4c87b3b86006b71c5540cf6e6189930fbd40a59e51448534dee1513cd2d1a
+assets/content/guide/animations/route-animations.md.html,1742567121299,9f1599d79a6baf30a4b0247b1bf5e02fa099ba39345e1f97da2cc49d997b682a
+assets/content/guide/components/advanced-configuration.md.html,1742567121296,93c0c2362f54f7c1b22d5f56f43e6bc90cff4726fcb9ba142b0f0e9258b2a28e
+assets/content/guide/image-optimization.md.html,1742567120872,9a10bd17e39b5ce42abdc5b7076f3ddfd819b02a89d628b4f34ca81f8854e6d4
+assets/content/guide/security.md.html,1742567120875,b7c7272cef10aee795078859df9d6c01816e5fa5eed94c168c4d2c1f734d33ea
+assets/content/guide/components/dom-apis.md.html,1742567121304,92b4f4a062f51f12fc82716d41d9328ebfc1b93b8a463608b8e2977564dd17f0
+assets/content/guide/components/content-projection.md.html,1742567121307,fb0ac5375b3beeaf03b717e3817b035076bdc48b9fe45170eab727a5d8c54df8
+assets/content/guide/animations/complex-sequences.md.html,1742567121297,1ede610aa092c0a167d43e5e68b2f73baee6a9a9d1cbd7b04879f947b51f4f9a
+assets/content/guide/components/host-elements.md.html,1742567121301,c7442aeacd577e640820e0666a920e0cf1dc94111a768c12ab6f51b0588090e5
+assets/content/guide/components/inheritance.md.html,1742567121301,beb2bed5e25867af35df8a25ad7111a639af3d8b060c15474a5aed03066e0035
+assets/content/guide/components/inputs.md.html,1742567121302,da0b6e0d5f25cbfec5553faa0b6312b1f926ff633bbab3fbf20053e74093db25
+assets/content/guide/components/anatomy-of-components.md.html,1742567121301,937fde9466f2520403190bb4c8cd41b86a7d5a704ef3d3af61eaa9d694ad4f7b
+assets/content/guide/components/outputs.md.html,1742567121303,60371457cbc56c53e10102cc20995aa3f4fb61a77437598033f29939a9344727
+assets/content/guide/components/programmatic-rendering.md.html,1742567121303,48dd7c79138019d6e2df586fedcf1fbff0b671de37963d25351fec3117845c37
+assets/content/guide/components/selectors.md.html,1742567121304,c69415d8963c38d6f5c6d775f1bee2e609d8cae9ea2eaa0f0094a10cb90896c8
+assets/content/guide/components/styling.md.html,1742567121304,a918a8355de3558d7251e35ebc63ac134fd384502a90bf5107c543d0d031dc3d
+assets/content/guide/animations/overview.md.html,1742567121300,31ce749384fc1de7a6621b4b3f2e5ce80ad581c97d562b46029a3af58ae4eec9
+assets/content/guide/di/dependency-injection-providers.md.html,1742567121305,38e7911afbe7bbfb4709b9c95df1e229e8b9bd4ea3abc2334eaec7e9f6ec055f
+assets/content/guide/di/di-in-action.md.html,1742567121305,e492b4ab6c905a28670b5d5e1f622046cca817a8404becee603fb2c4677330b3
+assets/content/guide/di/dependency-injection-context.md.html,1742567121304,6f4dc76268128c1a28f6608cd1add0a1dec1f0b8c63bb37e3bb470e496078a50
+assets/content/guide/di/dependency-injection.md.html,1742567121305,bae735fc1213f9adf234019191a7010f43c87716a3e5b4cdcffd94a9a91c9b1a
+assets/content/guide/di/creating-injectable-service.md.html,1742567121296,7076b3579165e396a15244632687d1baeef62d9d442b8b7026959d2d8a054357
+assets/content/guide/di/lightweight-injection-tokens.md.html,1742567121306,fc457fdf2fec23a3fe8060267a6270f60c46bc03cbc788dadce83cf3d2c8cdb3
+assets/content/guide/di/overview.md.html,1742567121306,7661e67fde8f82116494070113c84bc18f24c4e4c04b4d618c81c35ebd9a49e6
+assets/content/guide/directives/directive-composition-api.md.html,1742567121308,b2b4371f4fa50b45d7c9bedeb8a96daf163e23d421b0d5501d25217eccc25f8d
+chunk-B7NVROQ5.js.map,1742567121479,b1c35330b25a874fb1d3ff10efd6391f7716bbdb07e2816a0085ead489dba43c
+assets/content/guide/directives/structural-directives.md.html,1742567121310,1707cd7d63f878053584142f412a865efdb62e48a0a44057004b9ccb8e51455d
+assets/content/guide/components/lifecycle.md.html,1742567121303,c3adbdf9b86b035654d0bedc95022fe1e5d07a5a368922603d6011740509e0d6
+assets/content/guide/forms/typed-forms.md.html,1742567121316,20dd87dd79845c07654f49d6a76ed7afbce240e388fc8314a4dee2b9ff5821d3
+assets/content/guide/http/interceptors.md.html,1742567121297,a79fdb1b9f6c02c9775d8b351436031b258a8fc0d3c15451f7ce8d6159a804f1
+assets/content/guide/components/queries.md.html,1742567121304,467a0f5a4c754d01ae771b4da4d4069f3b0dfa149a9ea5fe5badabb802c0c7f6
+assets/content/guide/http/overview.md.html,1742567121309,fa295c4f24fd1aa8e2c5b11571fc2185a6a4d7d577fb958cf34b85d7d73eea97
+assets/content/guide/http/making-requests.md.html,1742567121309,e6ff547f9a44e74e59f6d4f5561af180391aba302489b7641a66ce9109454d1d
+assets/content/guide/http/setup.md.html,1742567121309,7611a7b8c40a612f97bca188c249376f7fb07bca526cb5a66713783c8aba257a
+assets/content/guide/http/security.md.html,1742567121309,d7e0839a0e7bc71c84d9024262a083316ef99d020043d67d0666c6472b3a261b
+assets/content/guide/i18n/add-package.md.html,1742567121297,3a425e963950e302c9ca023385ff16b64fe5d0787f2e969a84f6ea6a046bd87c
+assets/content/guide/i18n/deploy.md.html,1742567121317,1629dea8c6c0d7d2402efc71ba695e002b1777b245b11258760b8aaff1e3af87
+assets/content/guide/http/testing.md.html,1742567121310,fa9a9c0f3ddfcb094a7616392f549988a710a3237fc10c8930cb1e7bc9ace893
+assets/content/guide/i18n/example.md.html,1742567121319,fd63a163304b8b172f9e884921bbffdd3820a653366802693e35fc6af301096c
+assets/content/guide/i18n/format-data-locale.md.html,1742567121320,28a3049a4c0b97782f7f4b871f7c0fd681e3c5a8e60c72f9cf45cbfa07bc5d5a
+assets/content/guide/forms/dynamic-forms.md.html,1742567121298,58aa4c9336fe286b7a29313b0d61364d8e81b723865101a02211acd1f9fc8334
+assets/content/guide/i18n/import-global-variants.md.html,1742567121320,0854ff66a761451bb8ccc7c7d9697030fd2a5571cf7b44a0d3019984e139ec6a
+assets/content/guide/i18n/locale-id.md.html,1742567121323,0addb62f0c31993ac16db47c35edc031cddc5f8198d25444cfe2052df9499797
+assets/content/guide/directives/attribute-directives.md.html,1742567121297,898e5c64d6d8a013de221ee230da3b6f463dbbc415bcfa99e75b4252f3b0cf1d
+assets/content/guide/animations/transition-and-triggers.md.html,1742567121302,c669ad64f7be77ef42e6128f2f40e34f32ec2480e172839d9f5371b32f07830e
+assets/content/guide/i18n/overview.md.html,1742567121324,6dc25fab6f274c75cab2d609aa25ba9e8d512d51eda3d8645c23a037005f2192
+assets/content/guide/ngmodules/overview.md.html,1742567121298,581bd4ab570db91f72601e9ca69e6ed9e10887bbaf8555c44c39a0e3f525515c
+assets/content/guide/performance/overview.md.html,1742567121298,1cc1f9454623549153c3dc84a244a1dd37c81ca16b14f164871a41e6d97c03a4
+assets/content/guide/i18n/manage-marked-text.md.html,1742567121326,20488257ce60afa21b8571a0a697c737863b2046fa0a742195d9bec508e3e22e
+assets/content/guide/routing/overview.md.html,1742567121302,e48f1a0df1a53155d3d9358277fed5f5b1a886ccc192ff2be25ca3ad5ad5bd61
+assets/content/guide/forms/overview.md.html,1742567121315,4739f04397f2a427a2f012f29f46e1a359be5afd614c77a3e6402fca79331f15
+assets/content/guide/routing/router-reference.md.html,1742567121329,a8d4bdab4b6f60e425fdfeff5664c4b7bdb8e019bdbc88f0d739bd9dd818d493
+assets/content/guide/routing/routing-with-urlmatcher.md.html,1742567121330,8c00677bf56d8ee7ba5d05a79e0f7cc16ad9423625f3ed40830d35f4f77c2fea
+assets/content/guide/signals/linked-signal.md.html,1742567121333,026f4aaf58dcd8b187f98bd1846623a5dd735f79a8337a6af31c223c2cde6466
+assets/content/guide/signals/resource.md.html,1742567121334,ce5f6c148626cd4b647c22bf7561d75c50fd1ea49bf74243bea5170e2c62421c
+assets/content/guide/templates/binding.md.html,1742567121338,8e5e3216d2b63e8dd98c060f1d12cb1ce28b1d83104dd4deb5e659fe474b2711
+assets/content/guide/templates/control-flow.md.html,1742567121333,a273a52596803c420b0f8293341bde6d21f36eedb75c32318c13ece41bed0294
+assets/content/guide/signals/overview.md.html,1742567121336,52b2f75562966473017ba505ae9557dedff830f70770fc61e39cbb9b74e77bcf
+assets/content/guide/templates/event-listeners.md.html,1742567121336,a4f437ca575253dea3100e3791e6107f2bde1f6edf6396981870ea0a7526b356
+assets/content/guide/templates/defer.md.html,1742567121336,0566afd831de8c79c464786fc9ee97254c6836992259a31705439d8c326c8e4c
+assets/content/guide/templates/ng-content.md.html,1742567121336,8a15bf8cb08310fa55ec617595f1f1d8fbf5dea2936be75b78f9d4e0cfcf186b
+assets/content/guide/templates/expression-syntax.md.html,1742567121335,61659016b176db7df457ef16b41482f68734d11ddbf0bc49f520f36f60e520b0
+assets/content/guide/templates/ng-container.md.html,1742567121336,6f07e196f09bce40af0e1c08a55491627fc99d237fa921ea1485d4b0bdf46e91
+assets/content/guide/di/hierarchical-dependency-injection.md.html,1742567121308,b98a7960cf1aa5745aaed6f57866046c3a8f00866a1944868bf614a64333b2b3
+assets/content/guide/i18n/merge.md.html,1742567121328,81fd7ed02052fe8f3e5d0ce7391192dc8800714ea11580a78928b106240c9235
+assets/content/guide/routing/common-router-tasks.md.html,1742567121331,88f636395e55d35eb5d22acf02dd65c57adee743135f3c9eb4c761214d312de7
+assets/content/guide/templates/ng-template.md.html,1742567121337,477e676c866ec1278e8b43a0fd8653d1a37497af381b191c15dcb619c274f0b0
+assets/content/guide/templates/overview.md.html,1742567121336,d98978ae16dd9f39ff1216c89bc5e752c040dc6369ee24339a9c857e96b6a85e
+assets/content/guide/i18n/prepare.md.html,1742567121329,b6a6529c1f02933767750305632c8cfc08947e8dcd61ad1e34336368e6f52ec7
+assets/content/guide/templates/two-way-binding.md.html,1742567121336,33c9974bb8c0903db7b1fbc418acbc009a28b725532558482eeca72f85485e27
+assets/content/guide/templates/pipes.md.html,1742567121337,d90a827c307d4fedbb5b0dda2cd592227369fc7ce3e39dff72c7b1160af07f02
+assets/content/guide/templates/whitespace.md.html,1742567121337,8811d47263e23efe4357da9c9d0d0e9f47e8d484911d9f721e66c3030a27741c
+assets/content/guide/templates/variables.md.html,1742567121337,a4806578ff2a0a1d27c8fca3c5d5ce18d493c4d0b3e6ce5d07ff6efc28f0196e
+assets/content/guide/routing/router-tutorial.md.html,1742567121332,1b4f5707ccc12afbc471ea4ee3523cf390d5ef940504b11c9b36f2c827a162f2
+assets/content/guide/testing/component-harnesses-overview.md.html,1742567121342,356753f08972db29b562bec5e0c9f1945d4bcefc4f04120b5ba3122544e74fec
+assets/content/guide/testing/code-coverage.md.html,1742567121333,454c2a93ceacb086ca967309a2658a2499d54893a9e53c963d166125f60e2482
+assets/content/guide/testing/component-harnesses-testing-environments.md.html,1742567121340,5db0e33c91ae81889b16c82ea01d07c1290536507f52fb9dfbd0072455b972ce
+assets/content/guide/testing/debugging.md.html,1742567121339,1d66280312684de0510adb8dc3d8a94fbc9a9620e12af240b5bef3771b121c19
+assets/content/guide/testing/overview.md.html,1742567121339,96feb1bb2574561f4a645e13ce6c2288b51c492d45d56d9493853717eca5afe6
+assets/content/guide/testing/creating-component-harnesses.md.html,1742567121339,c3ff684edac076cdd94ade73447caf99a9793526b2d749c587fa55f0ef847768
+assets/content/guide/testing/using-component-harnesses.md.html,1742567121341,ba9f575812cac0de4e82626ae1f71ee4baaed5b1bbf95a10aa75c9ebd17521d6
+assets/content/introduction/installation.md.html,1742567120865,9a008a4b38f92eb23b81d53f2d48c9c5df7ac04bfe0fe2300a2125cd1a1db371
+assets/content/guide/forms/form-validation.md.html,1742567121315,d4ea88e288a7a819c29b9b31f3c5c386e4972f6271435f849011e28fb5886f95
+assets/content/guide/testing/attribute-directives.md.html,1742567121338,9b63fbefee1f6559354ec97c9d93febb90edaefd305eb5d0d5722450d6c0feaa
+assets/content/guide/testing/pipes.md.html,1742567121341,7ea955bbf91be00fb4ae4817890da6a6868087685bf9d459aa4e45e77fa89504
+assets/content/guide/forms/reactive-forms.md.html,1742567121320,359e767b174ec3ab4ea60204cb07a2c6dbf89972caf75dd27d38349a64a0033f
+assets/content/introduction/what-is-angular.md.html,1742567120881,8ee95b77fc901dc0a943ec6cd172410dca76726fd72dd7df8ada73fcb4a7d544
+assets/content/introduction/essentials/next-steps.md.html,1742567121366,cecccab35ab3cce77fb66ac4eb378446444386c3ed41a14c8825e94ea609babc
+assets/content/guide/i18n/translation-files.md.html,1742567121328,67663efb9594f3cf0632527f1a2376602ad2bad3a687ca659808b3a2b8435556
+assets/content/introduction/essentials/overview.md.html,1742567121366,ad54751b89245eb53714b08ebf98cb4a563e7d9c99acd1ec1760425ad7b99ccb
+assets/content/introduction/essentials/dependency-injection.md.html,1742567121366,f9787978c8415109a175b5fcab298068f0d1ed86d713f9580424b93479758eea
+assets/content/introduction/essentials/signals.md.html,1742567121367,9ed1411b45f2533a3e793b267ccd0d63cab31b622603f466c8e4413a67dbf890
+assets/content/reference/cli.md.html,1742567120864,58660292eb299a9b3c21ba4cbc97a6fa7fd8fcb001624bb38f70adb563110e0d
+assets/content/reference/press-kit.md.html,1742567120880,8081d9e37ddc395bdb34dd03cba761c5b4b93df49850f0e3a1a588e08c657108
+assets/content/reference/license.md.html,1742567120878,f5dcc6f47c0f2f4d8da24f64041a36316b640808c0c3f5f2783de7cba9424d33
+assets/content/introduction/essentials/templates.md.html,1742567121368,168bf345b00668bee59f3fed9e25f5fa9e498ea63040ebb251f7904e9fc5a9c8
+assets/content/reference/releases.md.html,1742567120879,6e8496abb869ffb52b2485c7039704815a3642dd802243e0a59d751e99668e00
+assets/content/reference/versions.md.html,1742567120880,037e1c3377fee4aa6b6d4245cbb9dad41723a8cbf5324e4c673d53fb1e5a03f2
+assets/content/reference/concepts/overview.md.html,1742567121332,f89af52788cf2b46241b8b3b7eaef88ad09c3b3ec7e8adaaf1d551d560384af5
+assets/content/reference/roadmap.md.html,1742567120880,26d583f553beaf531a53578727d65a557100f8b7df2e920069f697b6d0611100
+assets/content/introduction/essentials/components.md.html,1742567121362,8224ba98c66e4072f829ac76388dbc9bcb315c52cbc609a85eaecc90336b5e9f
+assets/content/reference/configs/npm-packages.md.html,1742567121337,399149fc707cb9a4be5adf851d65c02eceb6239d6ed3f805cbfb7ef3f51cac95
+assets/content/reference/configs/angular-compiler-options.md.html,1742567121334,dc3291e4c5de60873036684c7817a557bc108f993ef3b594f9df0f0e62d63fea
+assets/content/reference/configs/file-structure.md.html,1742567121337,646849715b4efacc37a4811be47cb2b006a93eea5913529f0be6895894476662
+assets/content/reference/errors/NG0100.md.html,1742567121342,c7489c5bfc6523872c709cd26202fa2d568495fe565777fc9a3384a9d3676d25
+assets/content/reference/errors/NG01203.md.html,1742567121343,5d4ab8ab0529da236de727c18d2a0c5538bfb63c34a7d28f7144a5c9f5b1f5f2
+assets/content/reference/errors/NG0200.md.html,1742567121343,40ee2c58d0ec4b21f72aaa7bf1e4ea717d6eea41d689b73e2d0f3ff764e45940
+assets/content/reference/errors/NG01101.md.html,1742567121333,ed34c1feaa0bee7ec699edc493158dbb2b93099ce14cb8ff1b9d2da13abf253d
+assets/content/reference/errors/NG0201.md.html,1742567121344,000cbf178253fd4a0ade2310a336c0b0b4ce4be894876d15f5ad359b46518975
+assets/content/reference/errors/NG0203.md.html,1742567121345,630969943609fdcdd7613cc9401f30a59df9e2c74bcc70ddcec3a4fd4a537922
+assets/content/reference/errors/NG0209.md.html,1742567121345,5465c0ad156dcb7182b34f18b3cd6b191e3101b8643e85e508e6c8b1c02def7e
+assets/content/reference/errors/NG02800.md.html,1742567121346,2c718a1456119c4ab98d8b8d6fa922739851a30386b2e7a6ac5045cf0222edd7
+assets/content/reference/errors/NG02200.md.html,1742567121345,f877b8b2d20c574493b6bfd8fd3fc77215c8d3ef1ceec68cba6349efacf2674e
+assets/content/reference/errors/NG0300.md.html,1742567121346,265ada081ff83f2a6dc4d7d2acf261170a3ff8d58ce98e87567661daca46fb31
+assets/content/reference/errors/NG0301.md.html,1742567121346,cc3466af493fe2384548e8b3cc4d59e4b02793ad36261f10ff026a6776d1bd8e
+assets/content/reference/errors/NG0302.md.html,1742567121346,89608b118273e4459579c48ba7b28907658402e5567585fe366895e6d8f12eb5
+assets/content/reference/errors/NG0403.md.html,1742567121346,c3503768c35522b15308cbbdec1cdb1c2aa5c339db43220b4231fbbebb3040eb
+assets/content/reference/errors/NG0500.md.html,1742567121347,89435113f519862fe44470b23a592826357dd73fbc03d1c9e0fec2835a502671
+assets/content/reference/errors/NG05000.md.html,1742567121347,0c36f7e098270e9193b5a34d926c08ef237330f8d5f5eed69a4fb53d930f37ba
+assets/content/reference/errors/NG0501.md.html,1742567121348,3adcb55b3ce0de9b648e12e8fb20ef5de96052327556109cd9826570a64896d0
+assets/content/reference/configs/workspace-config.md.html,1742567121338,f40d51a98fd8789f50b4f5e72ef45583ce84a36739e68b287da98c34d97eb723
+assets/content/reference/errors/NG0502.md.html,1742567121348,502492e48e0c026b237515df4fec4c64ac4668474bf740ef1e1b7ebcc35d57d0
+assets/content/reference/errors/NG0503.md.html,1742567121352,3dc62dd239ef7a88eef803f418a85bf48f081ebfbc7a779e8b0256ed10a37a2c
+assets/content/reference/errors/NG0505.md.html,1742567121349,99a53fe33503cc0d57eb565037b6eb13f46b34a4454dd79ec9a838f71b152e4b
+assets/content/reference/errors/NG0504.md.html,1742567121350,b214f6f0a1ccb028af0278b848c8ae080508e4bf9afb6ad0fada093bc017e302
+assets/content/guide/testing/utility-apis.md.html,1742567121344,231602a7d4237cecf4ccc7ee606ebc9321b02a5b944576f6273b20adf1b073f2
+assets/content/guide/testing/components-basics.md.html,1742567121340,8465cac0b30fa20adb4b3bd277bdccc5e36cf02dbebe391e987b5a801205419f
+assets/content/reference/errors/NG0507.md.html,1742567121350,55c0e5eef47957f4e4ebd8ee7622c48d2a844ed8dac43e70e24bb5651197a806
+assets/content/reference/errors/NG0506.md.html,1742567121350,85431638736caab678fa7d820db147dd243db928550bfec2ed49fc9f4f0822f4
+assets/content/reference/errors/NG05104.md.html,1742567121350,a3d313aba07c8cea5609589fd34d333bf8fb2ffc5854da542d10fe65ccc26912
+assets/content/reference/errors/NG0750.md.html,1742567121351,467fdb6fd223d5f6db20e04cc08bff696845f73e599d621de5f611148d0ef4ee
+assets/content/reference/errors/NG0912.md.html,1742567121351,e169237df72adf0a8912c0e19496c405b8f2f0b455803e0967492fdf01e41bc5
+assets/content/reference/errors/NG0602.md.html,1742567121350,d6e557b07bb53a3cf463fde39a0e0909a40910ec2a3c6be221106c4b3563b3eb
+assets/content/reference/errors/NG0913.md.html,1742567121352,f3aedeb60340f52b894934f9d5ac88a7289b00ea452b7d13b9aa0116aa7bc711
+assets/content/reference/errors/NG0950.md.html,1742567121352,dcf4ce7e2d1a37e01d766670454dc5d7de3746904200e9df20ad434ae86fe082
+assets/content/reference/errors/NG0951.md.html,1742567121353,3788ecffff9f11c3e4fcbe6e17a1fb655c9cba1ab97b3350ac5893045cdd2e22
+assets/content/reference/errors/NG0955.md.html,1742567121356,1c1459213071db8ed64e32ea018f1ce79ca7deafa81387130c5c63d9c8ebe244
+assets/content/reference/errors/NG0910.md.html,1742567121351,ab6e0508761bd74c97ac0c9ab23b39f3e3e3a1e4e9f2f50e00b22ea6c79617e3
+assets/content/reference/errors/NG2003.md.html,1742567121356,c90683fd985afab48c5cb268527bcb2d5fe3ef26520247217079b6a1da210958
+assets/content/reference/errors/NG2009.md.html,1742567121356,9e2acd8bc79c3e2f8d8b49e2e0a74e8ea9cd196bd99822c58c409b719e51b4b1
+assets/content/reference/errors/NG1001.md.html,1742567121356,b23af0143c075ca0eab80ce33095112ade272af6b8a491f9217ea6126d815025
+assets/content/reference/errors/NG0956.md.html,1742567121356,0a6995d7418b556d4568dbc8fa9bc577f460d87edfb14c0cedcd0523f9d89e56
+assets/content/reference/errors/NG3003.md.html,1742567121358,2728ce2fc42255ddc51cfeeafb74cc1c97b9bb79b2c8c65dce7d1a71e2906df7
+assets/content/reference/errors/NG6100.md.html,1742567121358,55ad65a3e6750bb2f174c1f3a21979da1fcd59c6ab765a3d3fcb72a27caf6e2b
+assets/content/reference/errors/NG8001.md.html,1742567121360,8b7c9d7f8a8580f6368f9c73b61e874209b1d7eaa7aa4f6c1a9b9e65b1d4466d
+assets/content/reference/errors/NG8002.md.html,1742567121358,2b8452d77c9ad52994d9822ec064d77e9bdb6492c6e0dd26ff7f499789b7f0d2
+assets/content/reference/errors/NG8003.md.html,1742567121358,4ffe8740e6abf4777658a54df2e9ada05929e84c7745eb1bf14d9ccf436b42ac
+assets/content/reference/errors/routes.json,1742567121358,61d5f92fc91c3b967e51573d823ea2e17d814d68b3d170b2f4afb4a2a5dab44d
+assets/content/reference/errors/overview.md.html,1742567121359,e3e06b797b5ded78d319713b2d85587cbea1821ff491de4d25581ced16e2321a
+assets/content/reference/extended-diagnostics/NG8101.md.html,1742567121360,fd069d1c3d96770980b5ca0cc360193161accf28e4be605914ee3f34128cc548
+assets/content/reference/extended-diagnostics/NG8102.md.html,1742567121361,35ce9195233244d3950b03c7640f1319d371187026ebcb9480cf65cc07c4da41
+assets/content/reference/extended-diagnostics/NG8103.md.html,1742567121362,62f0a86d4df532b88cc0f1ecd163f0495ab16562bdc990d1ec8d50af4035b278
+assets/content/reference/extended-diagnostics/NG8104.md.html,1742567121363,0fda57236e8bc1b4fc3852fb5422ca6e0a1daa8d15bce980855dae35bce06c3e
+assets/content/reference/extended-diagnostics/NG8106.md.html,1742567121363,f95f14c93c11d21eb5e1a0ef852ba9dd2f2e0763287719ba6bc461d6785a39ac
+assets/content/reference/extended-diagnostics/NG8105.md.html,1742567121364,58b08850900721536c81eb88ac7e5b2612604e02e480b3fa4477c60f0472ae41
+assets/content/reference/extended-diagnostics/NG8108.md.html,1742567121364,84e39ae7f84621e272679adf2e88cb80ebb0a2723ec3e2b25b567c9fc20987ce
+assets/content/reference/extended-diagnostics/NG8107.md.html,1742567121364,3d5c51c03296efd20cfd9c4405e66b1897bb8bff2c6b616b373e66c6b015f492
+assets/content/reference/extended-diagnostics/NG8109.md.html,1742567121364,aa54efeedfecd3824b141df16ffc55799fc22dd0b28be7c5e43222add0720091
+assets/content/reference/extended-diagnostics/NG8113.md.html,1742567121366,be6354033c161be35972c1724ff4fcd58078697f4b559c7c69bcdefa1af07285
+assets/content/reference/extended-diagnostics/NG8111.md.html,1742567121365,24e251df7f7f8b610b85d8b28f6c3a945cc6070b350fac6da270b5d227c5ae12
+assets/content/reference/extended-diagnostics/NG8114.md.html,1742567121365,7912f2f7c8a04c1e38764e33600ad490b6bc0ca32493ade1ea7d935b0cefac4b
+assets/content/reference/extended-diagnostics/overview.md.html,1742567121366,66410bf3de857c791e05079473a95bfb51fa550a7a435c7f97386b4f70620f25
+assets/content/reference/extended-diagnostics/routes.json,1742567121365,f08939fa8e7ff8781808859303b41c081f617fa7f050b27d9f45d9c76183e675
+assets/content/reference/migrations/cleanup-unused-imports.md.html,1742567121360,397147a154a181d9ac1fe181944fa5e25a7247d5b85f852999f4e869c2d980e5
+assets/content/reference/migrations/control-flow.md.html,1742567121367,118e05d5032a98f57026b15aa2c4a4ab6f1fa1d55d3e4b6222452ffb82c71198
+assets/content/reference/migrations/inject-function.md.html,1742567121368,5fab72bbd8df444bd01e484844ab60c7c97a90a1551aa7e4f35db9cc36a2a217
+assets/content/reference/migrations/overview.md.html,1742567121368,7845fda0958ade6ef72bca6b45f0d4228e56900c231ed94df06b9d9d221d5a8b
+assets/content/reference/migrations/outputs.md.html,1742567121368,c56b2c16ef059d0eaee5f703591c61e8a64792154533a0d6ae112be14ad77c47
+assets/content/reference/migrations/route-lazy-loading.md.html,1742567121369,deb8ba9864292d349b2653cc440fcdd7fc15850b6fa8f23ca7b660006f2cd0ba
+assets/content/reference/migrations/self-closing-tags.md.html,1742567121370,afcc124e1a9d348a82a3edac8e46849d69e09bb6e17fa224927c5b65f938a95e
+assets/content/reference/migrations/signal-inputs.md.html,1742567121370,a78c30e77d07abdf4395c329e38cadc8d2728f9aa82c775d2968500848b91bc3
+assets/content/reference/migrations/signal-queries.md.html,1742567121370,3a07d2d07e914abba9556cbb1b7b153183755659f99d7c90fbfd38709d2dfc0f
+assets/content/reference/migrations/standalone.md.html,1742567121371,75920136de7a43eac21aaba619e355a06ffab04b90ebe15eb80ef6a8364814c6
+assets/content/tools/language-service.md.html,1742567120881,3edc7e123f29bf274b463a1fba1b93731f809b2aab299531b16d67620b4af658
+assets/content/tools/devtools.md.html,1742567120865,1d0827f951d92e54f671dbfbb8f74752c5e9b3aee19ac1e6f514b27ae8c00ace
+assets/content/tools/cli/aot-compiler.md.html,1742567121362,a9cb8bb40ca8c6a6e7e91b39f74dc81dea59e740a23fb2da91167895b7d0caa1
+assets/content/tools/cli/aot-metadata-errors.md.html,1742567121373,f5ef2089c776125de7f258c0f3d946291f34da9261f4145a82818e4fac34fe33
+assets/content/tools/cli/deployment.md.html,1742567121373,cbd0b05bfe663d99b096c8af6b1e17e97e169e41c305a39d66a15bd2cfebb780
+assets/content/tools/cli/end-to-end.md.html,1742567121373,6f547d063954935fcfff989bf24109b74ac24bc8c327ca809471038ae4463f22
+assets/content/tools/cli/build.md.html,1742567121372,488925852b6ea3713f332d359b2fb9c09d2c4ca4b228bbaa690d561dae2da41c
+assets/content/tools/cli/overview.md.html,1742567121373,70aef6cee4820b6cae416730db2d1908ec37b51b61ee20ec4fbad397a9c01462
+assets/content/tools/cli/environments.md.html,1742567121373,701989d56c342a3cf103b9eff87a3e3288c4acd53b0cab5d0aac3435af9e2b09
+assets/content/tools/cli/schematics-authoring.md.html,1742567121375,b744cff8a3a46e5dc2f8fa122a9d87440416d20f225121d511e5007d3eb09dce
+assets/content/tools/cli/schematics.md.html,1742567121374,cbb7fe7c6608d7251e1472a972af47c1ee2ff6d916735255c702330aae1502da
+assets/content/tools/cli/serve.md.html,1742567121374,7357b167f8a4d40f9bf3611217d1e275701e2dd437add1c6cd0534bfbb8a6e04
+assets/content/tools/cli/setup-local.md.html,1742567121374,b5bdf6b18e343c46c3ed8269624ef2d49924a76299180f10fc2bdc1526c86340
+assets/content/tools/cli/template-typecheck.md.html,1742567121375,e6b3ef1251f07f7d507b8f3298e0c729e2252c9972274f700b8d3c84000be41c
+assets/content/tools/libraries/overview.md.html,1742567121375,c7fb69a7740c0da27b80a8d87f2e81973f4a3bb04af2a1435bf9a89e303f8da7
+assets/content/tools/libraries/angular-package-format.md.html,1742567121362,8f78a14959f3789b7eca76c5543d5f375e2aea93cf1388b3b028779c38b7d914
+assets/content/tools/libraries/creating-libraries.md.html,1742567121376,5bdbd62cf43eb1201836f4aa42e1d9325d73f51dfabbc08e7b0e78db48a222d4
+assets/content/tutorials/deferrable-views/intro/README.md.html,1742567121376,858c48a2572edecf8ccf594cce804249b8e197148f38b42775867a054fb31d10
+assets/content/tools/libraries/using-libraries.md.html,1742567121375,17e4c69de63525d0e69de8c4514d69e350408cfad605399823c00cf1cca4d90a
+assets/content/tutorials/home.md.html,1742567120867,6af183892ab33c8ce38b6e3dfdc964aaddc2d7bd77a6feb6773111a138a0b4bb
+assets/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md.html,1742567121398,b25f2ee23172cd034e39f5d02a8c1a8cb821e67f7f78bbc000c87ce61c94e29d
+assets/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md.html,1742567121397,8dfb7fe9e0b1fc801a96d173095adc441e996ddb3ad9b09b8711cd3a0024c0b5
+assets/content/tools/cli/build-system-migration.md.html,1742567121373,d4def8e551d61d07f4bb394c94a636f941c1e2d2df9f705fdd5824e835f0284d
+assets/content/tutorials/first-app/intro/README.md.html,1742567121376,7d1fe5f571241a27aa91aebcd2ce476bff026d342e93350b3f0a0f2ddbd67e11
+assets/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md.html,1742567121384,a5b69e526a8634a733a913cc1ac2ede400848cafb9071c948499d855becfa779
+assets/content/guide/forms/template-driven-forms.md.html,1742567121323,1dbaf4d953ea7969ef5fa72990dff28fd200b2c1ea9547ca1aad028cacb9cdc5
+assets/content/tools/cli/cli-builder.md.html,1742567121374,4070f0f8e59b7a25da57c13f10f955d67228f228c0c8b123b92403f19f2661c5
+assets/content/tutorials/first-app/steps/01-hello-world/README.md.html,1742567121384,876050108a872d6d483debde9f3e6eab064e7df7c9764e8a1d7f59fa05749002
+assets/content/tutorials/first-app/steps/03-HousingLocation/README.md.html,1742567121396,4fe834713d1517ca5d9ebd89cfca8c1ab900cf5bcdb021955be84ee6f020a60c
+assets/content/tutorials/first-app/steps/04-interfaces/README.md.html,1742567121391,6c18eab75451946541f785fdd7780b8d3ce31174a93224f7c30c04d1c4503722
+assets/content/tutorials/first-app/steps/05-inputs/README.md.html,1742567121397,eb6e0a5369c0a532b8a89a719476f304f9300c53145b5fe9ae24fc413f44fad2
+assets/content/tutorials/first-app/steps/02-HomeComponent/README.md.html,1742567121391,1dcb416260095bd2af6ef1a0fce86ad0b032e1ad4febae2916add5c5ad16e06e
+assets/content/tutorials/first-app/steps/07-dynamic-template-values/README.md.html,1742567121392,91383b0a323cf88d6ca487d48ef319334d1b6a11a73f92e3e48aa32d8770c99e
+assets/content/tutorials/first-app/steps/06-property-binding/README.md.html,1742567121392,19ed864fe040a7876b3efe3657999b86917884a2ae6cbeaab7c04d9a1f9a8cb0
+chunk-AZHCMFIV.js.map,1742567121414,c08a4eb0b98abafd3bb98801e4cd5c7f939bf4773fd899e1827d579f5d366c61
+assets/content/tutorials/first-app/steps/10-routing/README.md.html,1742567121394,c4f07cdd26deed3b726d094de27eb1a9d3275226a072f2cf967f9b18e1e4a25a
+assets/content/tutorials/first-app/steps/13-search/README.md.html,1742567121397,1ee76d2f1a52501ac78b6e6eefce580904837c0e4bb2d5f25090d5613a2fd539
+assets/content/tutorials/learn-angular/steps/1-components-in-angular/README.md.html,1742567121383,93eeb8f9c664d777825588e51c2c226bf05def9f10fb694b6198b762cf8fbfbf
+assets/content/tutorials/learn-angular/intro/README.md.html,1742567121377,a3561cc830ae0909b850aeff91d4b6d3d064ff7509504355b87a6597e1c000b1
+assets/content/tools/cli/schematics-for-libraries.md.html,1742567121377,425a80a1c94b5a7d4d9c14b705d0095db5d5aa992c88a097b140c624729d9e3c
+assets/content/tutorials/first-app/steps/08-ngFor/README.md.html,1742567121391,98151f6844f0605949f8796bd600bc188604a5057bc6a067b9b1791df2ac29b0
+assets/content/tutorials/first-app/steps/09-services/README.md.html,1742567121395,d9e934f8735808588e0d481356b2b85447cc75fae8a61ce5510a51976835678a
+assets/content/tutorials/learn-angular/steps/10-deferrable-views/README.md.html,1742567121386,c53a46cb0313bbeb56014798ef9035788c129d3ddd115a1693813da8863a0e80
+assets/content/tutorials/learn-angular/steps/13-define-a-route/README.md.html,1742567121386,8815433fc1f5cb2adc2cf2f523dc9575743300589d934368eef512a404f4d189
+assets/content/tutorials/learn-angular/steps/11-optimizing-images/README.md.html,1742567121384,81e42e3890ed4f0ad6042f1548118a82d25935249ab06b984f937b0b6f09eb16
+assets/content/tutorials/learn-angular/steps/12-enable-routing/README.md.html,1742567121384,458752ad08134623312db15944b433c3b30432aee84014edadf8c5e475ee21c5
+assets/content/tutorials/first-app/steps/11-details-page/README.md.html,1742567121397,b1d0373e559a03e6c074b2e1c64f12c356664773acba07ad84d41d223f511389
+assets/content/tutorials/learn-angular/steps/14-routerLink/README.md.html,1742567121385,816e12d6b61429e6d1d81353462eedf5d3bfb8e2011ca6a96b3c53f00d476047
+assets/content/tutorials/learn-angular/steps/16-form-control-values/README.md.html,1742567121385,439413d6e32ee5541eb109d00ebf5df3d57cadf51ac8191cdc77db89bf7e78d1
+assets/content/tutorials/learn-angular/steps/15-forms/README.md.html,1742567121384,f238eb72ff102edb8f6fb3933f0044a7413cc9d967782e3e4faf0b5d0d3723a2
+assets/content/tutorials/learn-angular/steps/17-reactive-forms/README.md.html,1742567121386,5cb6aadb71c8d4fc2c2e8fa3a70e236a1b7314f20f52748972b8ff0bc6104412
+assets/content/tutorials/learn-angular/steps/18-forms-validation/README.md.html,1742567121386,383132b3d2f613dc08b9e02335a5970c1aa1fc97955e17993875585669aa9738
+assets/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md.html,1742567121388,a452df206e467a8ff0136e7be7b77c1292250bf373da127e3e3a0036ce003c4d
+assets/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.md.html,1742567121388,ac3aba428625c36cfe10628331a1538d4ce86441bc47c802b098db462abeb28e
+assets/content/tutorials/learn-angular/steps/20-inject-based-di/README.md.html,1742567121386,83ae34fc9703db4dbc6dff19650ff5e5d2d278994b85aee0fcf8946f3e7e41a3
+assets/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md.html,1742567121389,a9cb631b686f94c38800a6191b2a26ecb40f80bc95079b79c5c7d15adc2d25aa
+assets/content/tutorials/learn-angular/steps/22-pipes/README.md.html,1742567121388,2e9cc63af7fc5f1cf5960d0038922c024c489456159869250a24ade912875071
+assets/content/tutorials/learn-angular/steps/25-next-steps/README.md.html,1742567121388,2d26349e4cb48620cc44c2dd6e33f578c57a3bc37e148f08ae8f5c128fee39a4
+assets/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md.html,1742567121388,8e27c5238e7ba5195807d7a1739b9e579f0f1186f8849ba062455545841cf5b6
+assets/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md.html,1742567121388,b329cdb845b34ee7ed8c551880eb925f8f0a2f15e1bbb77007432a89ef320136
+assets/content/tutorials/first-app/steps/14-http/README.md.html,1742567121415,6a23dda4743850985a9c6f8123332052c3b14869bffba05c964f8a977865f26b
+assets/content/tutorials/learn-angular/steps/4-control-flow-if/README.md.html,1742567121389,1f9d0eb5ae86edf74c78fe2f020b7d76edc8c1f991d6d5f9e302b3ef814bdae4
+assets/content/tutorials/learn-angular/steps/3-composing-components/README.md.html,1742567121389,531f0dcd23adc7b2c2fe08bc364cd25e3aa2d538612c94d7043165e88baca61c
+assets/content/tutorials/learn-angular/steps/5-control-flow-for/README.md.html,1742567121390,fa4dbf4895a2c16355770aece887e7bc700b07e4c68b95a3a63e608a63e04b63
+assets/content/tutorials/learn-angular/steps/6-property-binding/README.md.html,1742567121390,cc307506bc532cac145d103ee2063eac8e859fbac85e68090f96963a1ac2960b
+assets/content/tutorials/learn-angular/steps/9-output/README.md.html,1742567121390,6ce3c685031abfff48ffc0aec4f025782c764e091039e450648ef44fb5fac1ed
+assets/content/tutorials/learn-angular/steps/8-input/README.md.html,1742567121390,8428ef3b2d663c6a3bc787eef9de9dd98101a8f0d18055182957770e1d2e3968
+assets/icons/BUILD.bazel,1742567120838,bc4aaa05bba4bc837f2650d5dda73720510c5cd43f2f0e17b97297751fabcac6
+assets/content/tutorials/learn-angular/steps/7-event-handling/README.md.html,1742567121390,4870cac36ee903dfaec008916ff62f8356a1091f8401e5ac881ce266862ecdfc
+assets/icons/android-chrome-192x192.png,1742567120814,b5d8f2b84db042cd10b76c6d43a8da13a530e843ef3811e9efe979b23e689190
+assets/content/tutorials/first-app/steps/12-forms/README.md.html,1742567121398,9e896ece9a39e2d855febcc800f30bc467b19ef307a65026e4da031c14ce55a2
+assets/icons/browserconfig.xml,1742567120819,2ec4f859dad5ab038feb1ceba9908d7d5161fcb597ec98df1dd46d7cd448e606
+assets/icons/apple-touch-icon.png,1742567120819,4e4373a0c09d0f3ec3444cc02f93b15488c06d5cb04339aea86006da9b8129d6
+assets/icons/favicon-16x16.png,1742567120820,648e71939df364b27f011708698915007919fc4c67e85630f58b5c48fc252cab
+assets/icons/favicon-32x32.png,1742567120819,e5eff8d1e180b56fbf055fb2bcbd83ee4e846c07a9de65d85c35e93399cdb680
+assets/icons/favicon-48x48.png,1742567120820,3325dc060b7bbc150bf7fd8f8e6960af2d1ce50586c25bc5c997230cde0ae3b9
+assets/icons/mstile-144x144.png,1742567120820,6012ea178332029e4b895e1b7d1ba6f5b0e79f2bad8d10676dd6d8269f54eba5
+assets/icons/mstile-150x150.png,1742567120820,a455c9cf00a5358995e07aced616ff6ff105eeef770e7e49488e6ff90f20a64f
+assets/icons/favicon.ico,1742567120821,8f1fc0f94ae643bb8757c3cb49f69bf6cb2228f632cb77c7e47d8ee3995d88a7
+assets/icons/android-chrome-512x512.png,1742567120819,4d06dcaaeacddfd832de6d025a67ca9cb6e8f213eb3d92baa56a35c9afa58e4d
+assets/icons/mstile-310x150.png,1742567120824,90b7deb003898dcaf3ee14c41cb79d6e34506550237c4efd09c04947aec0bbc9
+assets/icons/mstile-310x310.png,1742567120822,af2c63c430c9eec23578c86bed46e283cd7bdf55d41b8274cfc95300ddec73ae
+assets/icons/mstile-70x70.png,1742567120821,7ab0502cf1028fb7915de4bb4fdc8c9a3ff132458d27821b16b475f21a436216
+assets/icons/safari-pinned-tab.svg,1742567120823,f617affbed1b6196d524bb45edf02b65275c3b8f9ada7d2f52c539c4dcd1e896
+assets/icons/site.webmanifest,1742567120823,08777b0f4ca4ff32ae3beda737fe9aaaf61b9ef8c1b0c64e989d03bea89eb251
+assets/images/BUILD.bazel,1742567120814,e5db6f748ce8aba0a4cadfad4fbd900f409801e11b7ec70ea2cb223f6d48ca2e
+assets/images/ang_illustrations-04.svg,1742567120823,67af7fced35ab8be079c082c6c0ae0d49f0fdecbbdab9bb70bfcddaebb95037b
+assets/images/dependency_injection.svg,1742567120823,d2f3a37a08a30d68814cc3ce4b662ae455d6e63b4d3ed5853d1fdbd516e588b8
+assets/images/directives.svg,1742567120824,21e87af1d77e3427e173de13cf5bd88fa1938b63a7908f03c4363ed76b4bdc13
+assets/images/components.svg,1742567120824,a89fc9dc41673f1b2fef5a80cbbc1b876d7d40aad7347cfccc383598874baa35
+assets/images/globe.svg,1742567120834,1e2047f9e02f317b95a9fbc5500f06e74b376bafa303c666fcec9d5f563877b3
+assets/images/learn-angular-local.svg,1742567120834,28b9c65f3aa83d558e3d32cfad5816bdb64d32a5c61965bbda36aa73f4ac6463
+assets/images/learn-angular-browser.svg,1742567120834,538415ebc2954dcf33ba17866697f4083983ea601a1671985db8c21b1534597b
+assets/images/roadmap.svg,1742567120835,1a087737ed0096be9cd770f265b2870212ed83fc7328acccedbe45a70ac09f89
+assets/images/signals.svg,1742567120836,ca337aa8c82ba518462560121a95a366de0068e720029d8ef5f5a0b18b6eeccd
+assets/images/routing.svg,1742567120836,f3761a55eda744ee583ad95c3c8c25d4325da77065395b4d9fea790fe018e56d
+assets/images/templates.svg,1742567120836,f25b1a3056f7b04e077fadf509a12a0cf1f3a0c9ff1ff77e4abdf7af77f248d0
+assets/images/what_is_angular.svg,1742567120838,0cd6310f4b8cf767bc52c0552e1e9efea6bf4aec6ef0df4a232a851f83c5ba0d
+assets/images/overview.svg,1742567120835,9777d638b941e42b466909c99e6a6c73b378c4cfdcd7b3d9fa8ea44e8f407df6
+assets/images/guide/animations/animation_auto.gif,1742567120982,bf8f9a2be3a45c02a4d319afb77bc8a36f43fc7696904835cc4e62d21652512f
+assets/images/guide/animations/animation_enter_leave.gif,1742567121024,28ef61e94e82dea7a2fd9b93d18ae85b1a30acf9425b565117786112232149fe
+assets/images/guide/animations/keyframes-500.png,1742567121028,b3c94884392ffaceb10e899b33d5fa7730b19d163467e0d236ff7588609ccb24
+assets/images/guide/animations/keyframes-offset-500.png,1742567121028,a85d75ba7c5defed16debafa221a3d943bb848771f83382343d845381abff0cc
+assets/images/guide/animations/animation_basic_click.gif,1742567121023,456ad6459652c01eb8de99456d51230097023b2a0b4be79ad6807f627b163f33
+assets/images/guide/attribute-directives/first-highlight.png,1742567120981,d94e6e423177c0d8b8998e898cfbfd3316ca26230891ba818b2676d989f9086a
+assets/images/guide/animations/keyframes-pulsation.png,1742567121029,7e75b9b93281bf9c827fb46e73a962177f39edd9f015bfde227ad11c5dd6ebfd
+assets/images/guide/animations/ng_animate_transitions_inactive_active_void.png,1742567121029,51ba5c1f4c35c69a30d57e1e508b9541851ed297544ac3555aeeacb0937fd1c6
+assets/images/guide/animations/ng_animate_transitions_inactive_active.png,1742567121029,163767d5fd31377f6c00df25d0292304569fecdb6f766108bab0285da61bd776
+assets/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png,1742567121031,21b4add722fdadfd30713c179d3c6f1010677b67c7389af1e4b7e00976ca7d81
+assets/images/guide/animations/ng_animate_transitions_void_in.png,1742567121030,2b91595e39a588789b4340997add4a52c262fea3b80a5ab5b14972302a2487bd
+assets/images/guide/animations/animation_enter_leave_states.gif,1742567121026,5e49757720677f29efa9edc5abf028804cb30a75e7d68e7718593f1676fafc4c
+assets/images/guide/animations/wildcard-state-500.png,1742567121030,e83daa8dd5fe3f1370a14200253ebcb4ebd600a046f162a1d6722b12f7990e15
+assets/images/guide/build/build-config-targets.gif,1742567120982,5fac713b38d02d796afab5eb6a930e525bd567b2fe9e3198202ff3dc3c2b27ee
+assets/images/guide/animations/animation_multistep.gif,1742567121028,21055ad4894baf7b1ad2df04fb261d5eab7cb9a4bbc71bb53424e4aab54afe74
+assets/images/guide/animations/wildcard-3-states.png,1742567121031,ed1d253945294955922865929d545ca2efa835ce736e92cf42380cb8dc6e4678
+assets/images/guide/dependency-injection/car-components.png,1742567120983,122c12964f47ccb74ee8ec4f49686b40115cb998e07ed4b87a51d2ab7ec521bb
+assets/images/guide/dependency-injection/component-hierarchy.png,1742567121031,8719340ad3f6dbd6b1c69ddd86263cacfd512ebce1b7d4cb587b3a700806f2be
+assets/images/guide/dependency-injection/injector-tree.png,1742567121032,35b70a02858b332b042590a35a49cfa728baf2f7f47e1bcd92848d25df9e8323
+assets/images/guide/deployment/quickstart-sourcemap-explorer.png,1742567121039,90c2f87aa5c7efaf8d99f5ebc77152e6c78d2aed376e2746608296902ade569a
+assets/images/guide/dependency-injection/injectors.svg,1742567121038,7986b16b9819574b7ece8e31ea418755fc9dc34ddb87388c1512da4ba77dfa60
+assets/images/guide/dependency-injection/injector-injects.png,1742567121032,9ae6cdbed7e0ea41dd9e2deb7e24003ae18a38095aee41f273bcc222c3a504bf
+assets/images/guide/animations/animation_groups.gif,1742567121026,309e3d08b25062e386d83f786564f5cd2c4fd1a8fe84d717bbbba9d79c12ec0c
+assets/images/guide/animations/animation_timings.gif,1742567121030,bde5596d44c3ea38cd788c072ca14e5e1e8005d0bce0e4f92f8ca886064e327e
+assets/images/guide/devtools/default-profiler-view.png,1742567121054,abe4307e2aee6b87e1490dc734c4092de7f6386b79f6500a1534ece120259010
+assets/images/guide/dynamic-form/dynamic-form.png,1742567121039,42d9ac78f7f662d84914f1e00c60e4254d29e7768bb460031b5c7c5fba5865ae
+assets/images/guide/attribute-directives/highlight-directive-anim.gif,1742567121018,24291839c4986cd71bcf99c1dad999d19712aa65dfc91f737afeb63a076896b1
+assets/images/guide/forms-overview/key-diff-reactive-forms.png,1742567121052,a3b4af5759cf3f41d63c6dfc3b31155859db83e78b755826d9aa472be77eb950
+assets/content/guide/testing/services.md.html,1742567121350,7d22c9a45c5e2ca228ee02d36cebf1339f85264fcd04e4b5a78aa210aa7544d6
+assets/images/guide/built-in-directives/ngswitch.gif,1742567121031,a0c4f7f7017c33d3c43d01e6b7c0919414b0f2dc6697abca7c56ee8057af1c0d
+assets/images/guide/devtools/profiler.png,1742567121066,180f0c3fd7ce840329aecab4efe6736945d8889522fcb88e0376a68e9729873e
+assets/images/guide/form-validation/plunker.png,1742567121039,6cdef8955c089df1ce305f376c98e6219cd4d43a8e433446d9b904bf0d3e0d61
+assets/images/guide/http/interceptor-order.svg,1742567121041,b12b9f730446e090032b81ebdbcc8412ce406c94d098516cf2b6f7d0699ca65a
+assets/images/guide/forms-overview/key-diff-td-forms.png,1742567121052,d2042bd4e97935725703e162a5936d97e57c277dbf6f7aff671f74ea1e807d6f
+assets/images/guide/devtools/component-explorer.png,1742567121053,1243bc44462cca893374c6da7b4273f64439ff38d9573181b5177e8a18860fbb
+assets/images/ng-image.jpg,1742567120838,883182c852cf01e1c64fdb44e4f892873467040ce74a45ebdc52a88571e5be39
+assets/images/guide/devtools/devtools-tabs.png,1742567121054,d77779cb087406c7ca981a6fa798ee582b8054a71326709c7694efc69661af3e
+assets/images/guide/forms-overview/dataflow-td-forms-mtv.png,1742567121051,54bd8d89fb406b010a40f748e2cdbc3db55b740f3aa79f1a1aef825b5b8d3861
+assets/images/guide/forms-overview/dataflow-td-forms-vtm.png,1742567121051,27908d885d112b938574e4e5c45d270dcbd4fbc8acae150779672d64d1f28830
+assets/images/best-practices/runtime-performance/zone-pollution.png,1742567120986,80a2556433db26e9c467db00824a6a1ecfdab0c75ff6a220df3ae98f0ab56adb
+assets/images/guide/forms-overview/dataflow-reactive-forms-mtv.png,1742567121040,cb2bb897e285101f35c6ccce05551593da4fdba92bf661c891a7bc1bf055c817
+assets/images/guide/forms-overview/dataflow-reactive-forms-vtm.png,1742567121051,cec4b18e634adb6987c3dae59e3c3de8a138d1beb705ea0364c8e61e59d0f1c2
+assets/content/guide/directives/overview.md.html,1742567121324,9a14c3e3a8ebf812d2dcf1aa44b69f872bf194b27c17871ef4f1de7985e73956
+assets/images/guide/built-in-directives/ng-model-anim.gif,1742567120986,0871d8e27d9ab884fb0e7ca4115054fb6234cf5e99a134fc2eaecb7518ff7cce
+assets/images/guide/inputs-outputs/input-diagram-target-source.svg,1742567121043,94e8d1b7b8e1c1db8a50e5edc1521c07ebfd0540b423ce0791788271061e9102
+assets/images/guide/inputs-outputs/input-output-diagram.svg,1742567121072,9bf3285640a35b4d22b0af3cb0dcb33a86381004ce9677649463d614f6a35624
+assets/images/guide/devtools/save-profile.png,1742567121069,9f4bae453927c3594cf5775b5172fe9793a2e0cf0310fde588b0b42d845d19b5
+assets/images/guide/inputs-outputs/input.svg,1742567121073,07d07f6071fbb25a360fe554d42e8931548725886ec95effcf1bc8e3c99e7c3f
+assets/images/guide/inputs-outputs/output.svg,1742567121072,80463a9304c5e0389230e0b66eb19a92307597d0fb5ae751d2474770509573bf
+assets/images/guide/devtools/profiler-selected-bar.png,1742567121065,7080dad09a5d9d37dee3ae3f7f4527deefec9a7bae4d4aefabaa6ee81c4c954c
+assets/images/guide/http/wiki-2.gif,1742567121073,4e3a7b09f26df9d90bd2cc4c71df1e9f5f18977be1b2926d172e4d8b790c6c36
+assets/images/guide/devtools/debugging-onpush.png,1742567121055,ea597322955d071d9ab26320cb2dd218350564266dabbedd3a4af8dac5982413
+assets/images/guide/lifecycle-hooks/projected-child-view.png,1742567121076,2f75b36e051bca8c0d5a87414c5e8c447c5ce4ea1b042a877ad9bc56f0ac9396
+assets/images/guide/devtools/directive-details.png,1742567121064,178c18392459efdd02463f3b28c7858a1032313d374618eac30ac9759a5a360b
+assets/images/guide/modules/lazy-loading-clear.gif,1742567121081,af90e502f8f7cbe1c3dd532383b77eb7693482490f2bec683f0bd77e6e0271d4
+assets/images/guide/http/wiki-1.gif,1742567121072,fcde539280e391baaeef04c17e0017f68437051839407a02e7f22ab930d9eadd
+assets/images/guide/devtools/flame-graph-view.png,1742567121065,a83368079da5268b34018ba4236c90f879a94db299c52baffa7b4be4cbe67106
+assets/images/editor-light-horizontal.svg,1742567120833,0322776e7bfc6f86423c908b99dac4536740e3f7792dfdef70ce992d993aac19
+assets/images/guide/modules/feature-module.png,1742567121047,1f7d17ab1d394180a47ec3aee2e5025d2e134146833800cef878f140dee3d97c
+assets/images/guide/pipes/power-boost-calculator.png,1742567121047,65ce9e5e66023ba0258a64c38dcd8422cc112466e1b831dee2cf50b83435afc8
+assets/images/guide/devtools/devtools.png,1742567121056,8c28fd6bcc9a89a577b09d30b76f9c35c7c2cadb15fac44bec1fc8387a1c2c7b
+assets/images/editor-light-vertical.svg,1742567120834,c70738e416087a099f605edb46fb6145e0e3ccc32e06a8b6e076de77c1394cc1
+assets/images/guide/providers/any-provider.svg,1742567121048,ba7c52b397ce5b4c5f92d62769d79355bdac45a0e3fce0c8e54181152677953b
+assets/images/guide/reactive-forms/name-editor-1.png,1742567121082,66291bed16d7a7851ec50399630e23f20e0e415d0b6c0cb896e0d364eef9cfe2
+assets/images/guide/reactive-forms/name-editor-2.gif,1742567121047,d925c4f5bb71d824160e39c2052be4e2c91e1c008f1a5e59655d8d1de0cc9260
+assets/images/guide/lifecycle-hooks/peek-a-boo.png,1742567121077,f0d60964f03bc24a541f7a4fef1871e5f763f2df0565ab93e8f6a538fa22d82e
+assets/images/guide/reactive-forms/profile-editor-1.gif,1742567121082,d6da5b9945ae7f3b77c5b4e71ca4621ae7f63af22bcb96e3184e69d6a56091b8
+assets/images/guide/modules/lazy-loading-three-buttons.png,1742567121082,d81d99b7678a31a6d3a9591198270a2d170162fa830a3cde10952e452ae0c63f
+assets/images/guide/devtools/di-injector-tree.png,1742567121060,01ded33be150d8556070e6e31a581fe6d06b644601393f20a8b4fe752d00243e
+assets/images/best-practices/runtime-performance/slow-computations.png,1742567120980,1bb75583d5d340aad829357a6eb5bf09cb6ea45e740375f1f52bb57586a3c0a4
+assets/images/guide/reactive-forms/profile-editor-2.png,1742567121083,7b8fd0280d08d6250fd79d97260a834304cda08bc478861dcbb9f6404f404087
+assets/images/guide/reactive-forms/profile-editor-3.png,1742567121082,ff96db799718e73c703e105e6b98b61629ef18bfdd01027ee4a5c73445e9434d
+assets/images/guide/router/confirm-dialog.png,1742567121085,e5c8f5d0e18af4a3f7b293df000a5314b781fc2a1123d7c275120ce473eccba1
+assets/images/guide/reactive-forms/profile-editor-4.png,1742567121083,d34d022a01096406e7974a2232f9c6bdec2ecf8e67ce7853e135dfe53c33798f
+assets/images/guide/lifecycle-hooks/peek-a-boo.gif,1742567121077,0c53dc4363ab7860861bf9285e2d9f11409b987ab00aafecb3b9f0a73f075f55
+assets/images/guide/devtools/access-console.png,1742567121043,864ba49673f4b320a985fa911ca8f2745bebcaa2c517ff1563f24a3c686cfde8
+assets/images/guide/security/bypass-security-component.png,1742567121083,f6f400c7b51541621b4e31849d31dc6b8d5501ee85b06e40c36d9088c7355dda
+assets/images/guide/lifecycle-hooks/on-changes-anim.gif,1742567121080,bf8367a03e10562f3e225f38470f8dda1ff361bf6c016a5bfc08c507fb8ae403
+assets/images/guide/devtools/view-properties.png,1742567121074,51032e6eba68505eb61c430822195b992866c1efe3efa2f94964d48180f92713
+assets/images/guide/structural-directives/bad-paragraph.png,1742567121085,bbd59ecc69d11332fcd6b4cc55cbbb70b386cfb645e7fc2ffef51968ca76781e
+assets/images/guide/structural-directives/good-paragraph.png,1742567121090,a2901b8e594c4c4ef3deddcde7fc2806e4d46435f4622b1b5ecb575aa70302b9
+assets/images/guide/security/binding-inner-html.png,1742567121050,56986da523d2f484092634ab04482ff0db49f89a7b3023a7399f1c8eb18a4eb8
+assets/images/guide/modules/lazy-loading-chunk-arrow.png,1742567121080,134a2947ea3c2ff142dceec45da0c146dd79b65243d574250dc483e840d58405
+assets/images/guide/template-syntax/evil-title.png,1742567121085,3d410cf5147ed8d5a1cd24a4027cd29d28df82f860c81fec7034bb9b6e2f23c2
+assets/images/guide/template-syntax/syntax-diagram.svg,1742567121092,5d793f74c04eff2cc7e177ee239cd43135f31d0c7ffedb369bfe1dc5aa95f861
+assets/images/guide/devtools/update-property.png,1742567121071,30caef7ad4bf5116d95718b85f206fece3dbcd802983cb862603dd9ded33209f
+assets/images/guide/modules/lazy-loading-network-tab.png,1742567121084,cddcf2eab58aedc0b95b28a18ecd0acd81f21d6ed4e1d95b875df63feb3f7582
+assets/images/guide/devtools/navigate-source.png,1742567121066,2b30e05b1dd2f0c5e634d6397b661df10d2fe11c1b8c9470f152e08e21ce63b0
+assets/images/guide/schematics/collection-files.gif,1742567121050,332e5f0776d03283a0a5f968534bc01fc5716fbdca0fff66eb0787e8be3084ac
+assets/images/guide/structural-directives/unless-anim.gif,1742567121091,c760f222fbe9a4e07fa298e9426bb0137c206ab1db65f869dea7e852c7ba4fa2
+assets/images/guide/structural-directives/select-ngcontainer-anim.gif,1742567121092,3d78a89a3dcf97185c31272d552d9571332c083ddf9b9774d4280b6037ca5539
+assets/images/guide/testing/highlight-directive-spec.png,1742567121091,e20ae2a9c4623a6c856f161a2290c9483a3919d408ea9d53f93b6220c59048ec
+assets/images/guide/testing/app-plunker.png,1742567121085,45a66d060b9d9a6937fddb991e2a8870f2bce394d079bdfeeedee3df3a4ff1ff
+assets/images/guide/language-service/language-completion.gif,1742567121046,21b6b416ab3db9f1b2b162f04c7c3b5b32f9649dd6900fd87d5d1be1cedd9e40
+assets/images/guide/testing/app-specs-plunker.png,1742567121091,a49ef65440e9ac73dc755350ee403a45a05995b62094e09d7ec8cb9487221af6
+assets/images/guide/devtools/di-injector-tree-selected.png,1742567121061,d974f1f5f0645f53c3d5edab4eb971cd00af3d398da20e0e985b95b545c2cd1b
+assets/images/guide/testing/initial-jasmine-html-reporter.png,1742567121091,fedc71e10267ca714cc2e0c79aea71f69847cc5dd4774992bf9368d864df6755
+assets/images/guide/testing/karma-browser.png,1742567121091,6e31d4a0d143f398b69b90a8480fbf3289de4106e15c35abae44d42a46d7e0ac
+assets/images/editor-dark-horizontal.svg,1742567120837,b51c7c98d3865936e9159058e6876814ee6a14c7734e89ce2e87fc9860cf241b
+assets/images/guide/service-worker/offline-option.png,1742567121086,432ba6e6de906ee635968fe9533381d0d87a0c5ef107e97643d77ab489769ff2
+assets/images/guide/user-input/keyup1-anim.gif,1742567121091,541a4dce5030b31edf823a261a70cf724c8b294e2e82894397f5a8ab67174dec
+assets/images/guide/user-input/keyup-loop-back-anim.gif,1742567121085,66e52345b09d94856f76fc128ef032312566e80eac3ce227c7d1137233b3751a
+assets/images/guide/service-worker/sw-active.png,1742567121090,128fa6e26d643f3078e222e037d3c18f0712a9489cf5bc554cb54ae5f31930c5
+assets/images/editor-dark-vertical.svg,1742567120838,766b368cbe95732fdb635344fd6a6f933b8c7cd2f10fe632421a117404ab6c9f
+assets/images/guide/testing/karma-1st-spec-output.png,1742567121091,a63713c611514e6988793242620a355e6008c2ed109fce36c8882e6a253ffe8a
+assets/images/guide/service-worker/welcome-msg-en.png,1742567121090,39c83ed33c086fd8f80c830de8a94c6a0a705c7d02368af2e8f35d7d1510b2c5
+assets/images/guide/service-worker/welcome-msg-fr.png,1742567121091,0d1904f2bc385cbf562ff354c005a7ca9cf4f9a180ace32f3e951edd8ee4bf1b
+assets/images/guide/testing/karma-1st-spec-debug.png,1742567121091,1a395ad949b269d9ec073b5ed877d5141716747537a2fa50770f56e9355d552c
+assets/images/guide/view-encapsulation/no-encapsulation.png,1742567121092,84c58f26b77cbbe40484a0a068f8a356a00d81eb65bfdfaa1775a1b403892d2f
+assets/images/guide/image-optimization/devtools-lcp.png,1742567121044,d659b1cbff29adb3554bb6e0eddeae3931997e1b8587f564fd02e07ef21e578d
+assets/images/guide/devtools/search.png,1742567121071,847858fe9414a6db84195774fd868116105d5e8ca6f9e6c9ce49f8cae71aa4a8
+assets/images/guide/view-encapsulation/emulated-encapsulation.png,1742567121086,c6eb38f95bc0b91ca94cbf79951128e854df2b7d21698a32a11b4bf822a45391
+assets/images/guide/attribute-directives/highlight-directive-v2-anim.gif,1742567121022,0716a54a759c16054675b69df3a44751133a739f0106098059694a72cd665ef2
+assets/images/guide/devtools/di-injector-tree-providers.png,1742567121058,cca138173037c6ddd0bd3e747ad25cb45ec4d06d729c76af1b63f2c8fbe0c0e4
+assets/images/uwu.png,1742567120853,72dc7acb5788ee1f40348b6e1da3ffc37cd6f247411ce3a346d389115c107250
+assets/images/guide/user-input/keyup3-anim.gif,1742567121092,0d6b2cfc3d788205b2bdb66d4fce306fb2fbe311b7a59f7701403650cf9f5ef8
+assets/images/guide/lifecycle-hooks/do-check-anim.gif,1742567121081,283e20adadcc6a324cc3b4d41b86ce7bb84dc5b74cfdf847d674fda691b911e6
+assets/images/guide/view-encapsulation/shadow-dom-encapsulation.png,1742567121093,e12a7e94938db6bf3db96fa0b9b4db3e78aa023c946f5dfe62e3f1050f064e36
+assets/images/tutorials/common/idx_logo.svg,1742567120989,28a2342a673eeb4f526d86e69d56d14b855a1d294cb766101ba6cd5b0e444e92
+assets/images/press-kit/angular_wordmark_black.png,1742567120882,78e1d3b5a5885cd279e4e987c99af48920518c2a9bce005b7e253baa4c995876
+assets/images/press-kit/angular_wordmark_white.png,1742567120884,cfe703be873ddee165ec119d0164dd313d40a3b5cb06a4268ca098146c6321eb
+assets/images/guide/devtools/inspect-element.png,1742567121070,a3a7fcd6d858201396ebd3d069d577e6d3d146e35e394ee1157f0b23484f2190
+assets/images/migrations/signal-inputs-vscode.png,1742567120867,f0c9784d888f9974ce4ca89346418ee1d390080ad9f2a6230193504e079ec0bc
+assets/images/tutorials/first-app/homes-app-lesson-02-step-2.png,1742567120998,956ad2547badf8f55207528d19ad7d42f7db3eb4da57b10392f0822985b79cb5
+assets/images/tutorials/first-app/homes-app-lesson-02-step-3.png,1742567120999,ab5e13e8690446c187700277a74024b506508d9537a3933137c2cf6311dc4332
+assets/previews/previews.ts,1742567120819,d0fb616affd20a514bf2113019285900493a5bbff09b916ce845bb33aae61402
+assets/previews/BUILD.bazel,1742567120814,0acdc3e5683e34f07b2e9bc57b6613477c9a94152ebacf3eae4c7a783fa752f9
+assets/images/migrations/signal-queries-vscode.png,1742567120882,5d396167ca30b02b878e42d47f13bd5cffcb8048063039d5f0478ecfc6719fc4
+assets/tutorials/deferrable-views/metadata.json,1742567120814,0f5c1cd07dc0d4d89e421459a4cd83159139220ad46b0a12a39ab1403a11f2b1
+assets/images/tutorials/first-app/homes-app-lesson-11-step-1.png,1742567120999,7f7a70c85f8b5c716ab59451510bc9236f44e17d21e515115d2fc07ea39e9919
+assets/images/guide/lifecycle-hooks/after-view-anim.gif,1742567121047,3a3a5821aaf255979b590253a743d0afa517ae9d4fdf6a69e5b4ee93a564ddba
+assets/tutorials/deferrable-views/routes.json,1742567120838,1cd8da45808709817547f88f4e14d347fb07b8792d0edf2d5e39a5ab77ec9fb1
+assets/images/tutorials/first-app/homes-app-lesson-01-browser.png,1742567120997,09c4204fe5275113eaf884b4cc98b923eca92d3c1a72e45b7378776abf571b20
+assets/tutorials/deferrable-views/1-what-are-deferrable-views/metadata.json,1742567120867,9463ca31deec9616ce5d74c35251c40bba81be5b43b8450c132a3e7552bd496d
+assets/images/press-kit/angular_pride.png,1742567120886,e0e14d56c46531ed880ebb4fc5a5c98d5df39b3ad1203cefded14f151bcac5ce
+assets/images/tutorials/common/krzysztof-hepner-978RAXoXnH4-unsplash.jpg,1742567120992,704db635dd27238a5ad675a87efbab43210d9a2be72bb54c71ca9d8f439353cd
+assets/tutorials/deferrable-views/2-loading-error-placeholder/metadata.json,1742567120867,b68912dc3685f639f49b1806e64a4b2b8cf31698a11392b962a3f5c064b62327
+assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png,1742567120997,4a096e0217bcdce4a92a237741df38bc00bf7524aa5b237fb479edc2da2d8e4d
+assets/images/tutorials/common/brandon-griggs-wR11KBaB86U-unsplash.jpg,1742567120986,001081c7105ce653bfd7f7a253c047d77f4f3d526f651e40921635fe352ad421
+assets/images/tutorials/common/example-house.jpg,1742567120988,001081c7105ce653bfd7f7a253c047d77f4f3d526f651e40921635fe352ad421
+assets/images/press-kit/angular_wordmark_gradient.png,1742567120883,76689a8f29cbf57a21f6f55bad5e6c2423899300c8152bec4dd8c84c6e44df52
+assets/tutorials/deferrable-views/3-defer-triggers/metadata.json,1742567120867,8e9d506e62fcccb01fde79c088a37337f63ff4c423875acd193095ef6878582b
+assets/tutorials/first-app/metadata.json,1742567120815,5a5d068bda52c44ba32684e3eef1c1c070a5e3b647536ed6899e4aec841ca7dd
+assets/tutorials/first-app/routes.json,1742567120839,6f055ba6c759029fef7606317b181e8ec88a69d581fdde9ac3355da904351dd4
+assets/tutorials/first-app/01-hello-world/metadata.json,1742567120868,86956f3d72d6f61f1ef486b7bdd0a370589d4e662db2d8e9675c34db8ea610db
+assets/tutorials/first-app/02-HomeComponent/metadata.json,1742567120868,9ab02072c877c5d1fc072e88b0df782ce5a11bd970b87e2a5e46d13df8316bfe
+assets/images/guide/language-service/language-error.gif,1742567121075,e2219f4868c50853a407eccd5a4fb0d222d1c29730e64725d6608b35879c045f
+assets/tutorials/first-app/03-HousingLocation/metadata.json,1742567120869,be5bc23640346cb45d3893bfe06b6acc34130a14fb66d1dbea96ad8963f55b48
+assets/tutorials/first-app/04-interfaces/metadata.json,1742567120869,3d5bdf2848871bed50afad6cfc4e3c60f42349009258b7b753650706419b16dd
+assets/tutorials/first-app/05-inputs/metadata.json,1742567120881,d1c3a726c1ba8496191e4ce72e9474b8f888ff503d4ec23e1a0e556949337afa
+assets/images/tutorials/common/r-architecture-GGupkreKwxA-unsplash.jpg,1742567120994,85e188c8c19a12b5160c4f7212b1ff5499aee15e61dc27224d44de5fddd98eae
+assets/content/guide/testing/components-scenarios.md.html,1742567121354,3e7af929f1908015c121cfdf72a7c5c22f263e24b8e5386ad97b71a6fd413944
+assets/images/tutorials/common/webaliser-_TPTXZd9mOo-unsplash.jpg,1742567120996,34cb330e0dff0b6f6e00842f2ac781cebb1e941f642962fd60bdb936cbf0c6f0
+assets/tutorials/first-app/06-property-binding/metadata.json,1742567120871,280978a2d41c310379d2f7400790cd170e98ca51e73183dc313e46a7f5b371f3
+assets/tutorials/first-app/07-dynamic-template-values/metadata.json,1742567120870,a01851fb11b0e924ca1f8db58463ac214f8519cd7f890058923409751053ac15
+assets/images/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg,1742567120983,e0e4818d948ebdcd31693ed707546b850d6e8d2ab6426fbd38075ed89494174b
+assets/tutorials/first-app/09-services/metadata.json,1742567120871,2bd16b58e1289879e60a8737ca99a71f6284d71973cc16b4041b49ad09c3b339
+assets/tutorials/first-app/08-ngFor/metadata.json,1742567120959,4562fefac15f80a3b0e6e8ae0450c4ca4332b6a332bb4f15447a4e15c3d4d69d
+assets/images/tutorials/common/ian-macdonald-W8z6aiwfi1E-unsplash.jpg,1742567120990,b46784c201a0e4da428ff77c0de2f8e261baaab68bbc8ee9d5aeaca7ceaab5e0
+assets/tutorials/first-app/10-routing/metadata.json,1742567120878,1f9e6bba09fe9b06136d7b7d799f15fb6878175e008bf0a5fb49f67319336257
+assets/images/tutorials/common/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg,1742567120991,09d84a2332fd9f665d33aa514fe5a4ea2d8415da9bfbd1f89ff896b6057fe50c
+assets/tutorials/first-app/11-details-page/metadata.json,1742567120962,e784ba78dacbedbe92abfe3e2ce6707297b2a4b95cecfb2242e9542be872c335
+assets/tutorials/deferrable-views/source-code.json,1742567120852,6b0e3fcff805366bb7cec3c1099c9d1b5d31297961f0b2b7a54a60fb9b2f8ebe
+assets/tutorials/first-app/12-forms/metadata.json,1742567120959,6e9ca68cf0099ffb81cb113ea8d18547010409add49b25d25835368fc7d39c1c
+assets/tutorials/deferrable-views/1-what-are-deferrable-views/source-code.json,1742567120891,2daac45269fc4e9a0287b3c14bfdedaaa5e045ab12d8d8a917edf5358bbe3ada
+assets/tutorials/first-app/13-search/metadata.json,1742567120961,25d36652f47d055a39485729ad4bf1448ca5d8f915914a018ecc1e54d206189c
+assets/tutorials/first-app/14-http/metadata.json,1742567120961,7b3a4113fc58f6f274eb8e498ff3b1085fa8c00821371d61d20f9889e821f318
+assets/tutorials/deferrable-views/2-loading-error-placeholder/source-code.json,1742567120897,f7d0c8a9964593c981c7d5226019509719d49ef80cd9008235565dbb7f24e451
+assets/images/guide/attribute-directives/highlight-directive-final-anim.gif,1742567121025,d02d7deb2fa21379db9ace11a6c8e862e4ad3192da6b6f7795f1471f525aa748
+assets/images/tutorials/common/phil-hearing-IYfp2Ixe9nM-unsplash.jpg,1742567120994,4a301778ba63148a04a566fdfbe75d1931199f60bfb77f598ef14a5462e3dbde
+assets/tutorials/homepage/metadata.json,1742567120815,6dae7a8ed30b0c0a6c68689582da728d7356607e8caa250654042047d7f2a094
+assets/images/guide/styleguide/use-extension.gif,1742567121087,9f91c2aeb790fae04806687586691451c821e8543f19bd0f3ecd69d0e5649b4a
+assets/tutorials/deferrable-views/3-defer-triggers/source-code.json,1742567120893,1bf951f7bd0e044cefbfcffaad7ff700931509719f9ee0070c1e8297fef40dcb
+assets/tutorials/homepage/routes.json,1742567120839,3ce5069153a8f7f8c7b5ccfed147d43c805d5c5e2e8d7b46880c616ebfdb43bf
+assets/tutorials/learn-angular/metadata.json,1742567120815,0ea6719f0cd7f22a3991e10d33ecc71c2d5988c516898b007d04d8cd340bcd09
+assets/images/press-kit/do_and_dont.png,1742567120887,985f5a86f34f43128c63d2a928ea78ea003363a720e6e535d89189dfaee31ad5
+assets/tutorials/learn-angular/routes.json,1742567120853,636ffab358187e359d0e4400cd9ade0125511503d118cd8046bf7f868544ad74
+assets/tutorials/learn-angular/1-components-in-angular/metadata.json,1742567121086,3ef09ed724c23c2f834a446825036945287f2148894d9c18b1c51ad740da347f
+assets/tutorials/learn-angular/10-deferrable-views/metadata.json,1742567121093,2af2cfdd0fa21acf5d6e43cb4b8d68273ac15a4c7abd09bc233d44e794f02810
+assets/tutorials/learn-angular/11-optimizing-images/metadata.json,1742567121087,ee04345645ac30abb06561b0adf525f129f4dcfbf378d93970e6a73a9ae4c559
+assets/images/tutorials/common/r-architecture-JvQ0Q5IkeMM-unsplash.jpg,1742567120995,1c140aa47e5e43e2c0c7a6a81879c775b3ecfce6c6ca5c0b3bf2602766a5bfdf
+assets/tutorials/learn-angular/12-enable-routing/metadata.json,1742567121087,f929e5fc9e41a4362b215c11ab83ed96c500dcb66069d6a9506b1dd0873cfc05
+assets/tutorials/learn-angular/13-define-a-route/metadata.json,1742567121088,1a25afa98dcd3ee96e95e27d75327273a870dbbf9d09e6eff0f7c017479134df
+assets/tutorials/learn-angular/14-routerLink/metadata.json,1742567121087,4c2269b886095a68f1e8b1ba74d183115abd9d4e062fe3be615243f2624afbd4
+assets/images/tutorials/first-app/homes-app-lesson-07-step-2.png,1742567121000,327031301af9b389e2ce32c1b6d0d164998262185ba07eae26b4c08a0dcadc40
+assets/tutorials/learn-angular/15-forms/metadata.json,1742567121087,f54f543825be7aa941bcb37d1c5df863c3276731f4d4bcd9634b9c33ce5ecd6c
+assets/tutorials/learn-angular/16-form-control-values/metadata.json,1742567121088,558112e692f843bb28254b54b593f17fef0efcc73cdb75d13cb01c9415e376ae
+assets/tutorials/learn-angular/17-reactive-forms/metadata.json,1742567121088,cfa5290cfeaf80b6760cbd62412090b3796559708ea3aae4faf81ad780ab17ff
+assets/tutorials/learn-angular/18-forms-validation/metadata.json,1742567121088,79cc12af9220529795b2f97a741cad3763ae86765dcb2823b9330671f4abc8e3
+assets/images/tutorials/common/saru-robert-9rP3mxf8qWI-unsplash.jpg,1742567120996,4455cb4ff54d7b7514543457cd9ab15166843e7dae934cce706b1018372a0222
+assets/tutorials/learn-angular/19-creating-an-injectable-service/metadata.json,1742567121089,725e401bcf478f5c4f3a6fd5945790650578da6e730b5e35ddbecae745b0e003
+assets/tutorials/homepage/source-code.json,1742567120852,73788c9d99f5fbf4563ce198a630cbe33194d27edf111cf1c1d3100cfd778af6
+assets/tutorials/learn-angular/2-updating-the-component-class/metadata.json,1742567121089,cf499bb518ebbe752271f6fc38036e28ba04326c91d5446f2949b3f70df9412e
+assets/tutorials/learn-angular/20-inject-based-di/metadata.json,1742567121089,498a1cf344a27c9c6741f6a175fd726569a57ace688d28b5e29dd15f18df5483
+assets/tutorials/learn-angular/source-code.json,1742567120859,ee27839f9918174349749797441cc2da5a6aaa7875baf1e05f549b0e41e30f0e
+assets/tutorials/learn-angular/1-components-in-angular/source-code.json,1742567121096,9363310fe774899f395ec615851258d0b907f0e5db619b882520fdd29ce1bf22
+assets/tutorials/learn-angular/21-constructor-based-di/metadata.json,1742567121089,1e01fe2219137b3d819df531e763db80b059ffba8f2a7c325730f359319a59ef
+assets/tutorials/learn-angular/10-deferrable-views/source-code.json,1742567121089,6a4672d9d10dae0f4e72187ae5cb24af1677e1d301608d6d1dfa34a3dc605de0
+assets/tutorials/learn-angular/11-optimizing-images/source-code.json,1742567121097,45fe8089d514805561204fed75c98a27e14d48434f133c02cebb003491687c38
+assets/tutorials/learn-angular/12-enable-routing/source-code.json,1742567121096,cf2b973f7622e0ce9610918c59d5220c02f8ec9410c4e95e36295d8dee5f6024
+assets/tutorials/learn-angular/22-pipes/metadata.json,1742567121089,a155d29140cf6c76f45241313417bdb918c533a6323c893b34a52bcbca365ca6
+assets/tutorials/learn-angular/13-define-a-route/source-code.json,1742567121102,6a2e5294be81a888e3e8bd3f0348d46a152af2f48c83bf9129c404484f95873a
+assets/tutorials/first-app/source-code.json,1742567120857,98631e7ffcf5ead2da8ff256a95058dc3480d4367cd69fd8a1eeae238033de4c
+assets/tutorials/learn-angular/23-pipes-format-data/metadata.json,1742567121090,c91e903a95c94e9d2f511fb9bbcdd47cd27bebc5e906533ea0b41e8a1dfaa48c
+assets/tutorials/learn-angular/14-routerLink/source-code.json,1742567121097,0dd04a34368a4e55280013b3d261fd55f0f7319415c83a71025124015a51fc5a
+assets/tutorials/first-app/01-hello-world/source-code.json,1742567120907,1b957b55d82102b831c5d397e87341e2413f170884d481ddcf1a558aa8cd8547
+assets/tutorials/learn-angular/15-forms/source-code.json,1742567121101,f00798ce81f69a05c88c59cb45c2c45f1e2a4456ddcc48d78d3058a039428832
+assets/tutorials/learn-angular/16-form-control-values/source-code.json,1742567121104,78268e999a09b6e00cea20c87de6fa5ad0698ba6d54383bb5b4e704085bb0f54
+assets/tutorials/learn-angular/24-create-a-pipe/metadata.json,1742567121089,d818993f35bc2c497ba45e1db8e3e5f9eee535322e0f06c71c85e6023514d5f8
+assets/tutorials/first-app/03-HousingLocation/source-code.json,1742567120931,4cf67e886fcacc95c183620ff9c5e7a9506651e496d4e5a5ec8d9bef6d0ba641
+assets/tutorials/first-app/02-HomeComponent/source-code.json,1742567120913,1e57549c8cd8623572bd4ee7fa326c064dff4b2fb4178b24304cbd623180c3a5
+assets/tutorials/learn-angular/25-next-steps/metadata.json,1742567121090,8b013b1e4acdd93f2f64f9f225a0a5944e28e7ff0e8f838e1ce7328c87820b68
+assets/tutorials/first-app/04-interfaces/source-code.json,1742567120932,40a27e3577eef14974a1b0c86966c1c51c8a96972f2cb686c037f01b129392f5
+assets/tutorials/learn-angular/17-reactive-forms/source-code.json,1742567121104,d2793022ed59a37daf8ba97a1b138867a94b3edacf61dd9705997ea2293c8d6c
+assets/tutorials/learn-angular/18-forms-validation/source-code.json,1742567121107,a4ac5e47712302d5a61dc623bdad019dc48b3b3045cbe9675412a0fc451e499e
+assets/tutorials/first-app/05-inputs/source-code.json,1742567120965,f79a98bd343eb477f1b8f32531b967e41657d17a8bdf77cf1555bdfa5820e7cc
+assets/tutorials/first-app/06-property-binding/source-code.json,1742567120941,b45fd3743dfd1191dbd38ca9cf68005f4b9a712e071d49ef29429f5e951f6be4
+assets/tutorials/learn-angular/3-composing-components/metadata.json,1742567121121,95b8f3fd239e100d2b6ad80608d3a7cab908cf9982a582cb24ef3f58707fcda8
+assets/tutorials/learn-angular/4-control-flow-if/metadata.json,1742567121090,67e0354a55391fce1f88e55189b86eaba6e2aced1091dc8caaaabf034b791b5f
+assets/tutorials/learn-angular/19-creating-an-injectable-service/source-code.json,1742567121110,6985dc38cef3eb42794225bef10c4e31bb6fe461f4d49d77ef03307ab1a849d0
+assets/tutorials/learn-angular/5-control-flow-for/metadata.json,1742567121090,b35372318a7939399f45a0c348e2df7cf446ecbf2be745e2abe98a287591ca00
+assets/tutorials/learn-angular/2-updating-the-component-class/source-code.json,1742567121108,867b3e84b5afe81ed5ebe985f45b9c2cf0c32f7c356bad363ef1b06bce7ced33
+assets/tutorials/first-app/08-ngFor/source-code.json,1742567120976,764e7441f6c333d76cb9c691755cf9fd1cfb63b82f45f9e1e37a6da9a243909b
+assets/tutorials/learn-angular/6-property-binding/metadata.json,1742567121123,2744ba56faaab04086524a2bf059e45deb6d8bc57240c384b52dd14901696187
+assets/tutorials/learn-angular/7-event-handling/metadata.json,1742567121121,faf233fb08870944b79fc09db51ba52b680744680a0253d77b647abff86c5986
+assets/tutorials/first-app/07-dynamic-template-values/source-code.json,1742567120941,dcef71a2679991016e80cfc74832ec32d88273945ea1026f3a6ee70c98ad3626
+assets/images/guide/built-in-directives/ngfor-trackby.gif,1742567121037,f1c8f1b5012e814cf0f9a374548a0c41576ee248cebc457433fcce656650246d
+assets/tutorials/first-app/09-services/source-code.json,1742567120941,b3164bf02a5ec515f47678a7fd02eeef31e4dfb3ed77372e8f20f0fb17ef38bc
+assets/tutorials/learn-angular/8-input/metadata.json,1742567121122,873a58ced36924e0144fa9f75a6908e59873cf75ffc3871a520b1f614fb907ed
+assets/tutorials/first-app/10-routing/source-code.json,1742567120947,c0e687e5006470c2f0547eae7c10756428f1d7b15aa27b4301d3b5e74fc004ef
+assets/tutorials/learn-angular/20-inject-based-di/source-code.json,1742567121111,6b3594a905b0aadb097fdd880303ea028a6e4523e37a7daa950cfd91ced47011
+assets/tutorials/learn-angular/9-output/metadata.json,1742567121122,a832d03fed15e41424f8ced3d525e3d2ead1f0a905e3af5ca00b58667b052144
+assets/tutorials/playground/0-hello-world/metadata.json,1742567121122,723f1d27bfb707ec1402bf938009e842be01a7caa4a1126571d473de15fe4570
+assets/tutorials/playground/routes.json,1742567120815,d50740ad83e1b7da54e7318318b4a34bce9ad0b4b72d0ac552235f689c5deeb7
+assets/tutorials/first-app/11-details-page/source-code.json,1742567120968,3395fb95db7b34eeeb668a23dd083f56cef756d3cbf1333579769a0d20aaed2a
+assets/tutorials/first-app/13-search/source-code.json,1742567120980,27e249df50dad3bd9a291edc5247b2dcf7ffe7b5068ebb420acee6e123c69cb9
+assets/tutorials/first-app/12-forms/source-code.json,1742567120979,648b4f56bc4e7f2c835bd3be959a5bb2e0e8efcd38d3247f554e8131324eb28b
+assets/tutorials/playground/1-signals/metadata.json,1742567121122,3c8e1e28e31a31f171dab9aef8136468aa6d2b65ff91f369a58b08ccb9cc46e0
+assets/tutorials/playground/2-control-flow/metadata.json,1742567121130,f5cb55154fab01ff61258f80c2db0783723d61da7989ff446cde6890d49b9045
+assets/images/guide/language-service/language-navigation.gif,1742567121081,be9d8cbef521650584f04cbc11e1bdab6800b126bc501a5780df6383585e5683
+assets/tutorials/learn-angular/21-constructor-based-di/source-code.json,1742567121114,51c76ec552fb5e8f5949773c7bdab90aa7d8051365e8fa28710e9e90c229965a
+assets/tutorials/playground/3-minigame/metadata.json,1742567121123,de58e602e769b60ce5516f76e8cec3012a79b31d644c66590554c98e386216c1
+assets/tutorials/learn-angular/22-pipes/source-code.json,1742567121116,dfe8fa3a83a96c23a36b261cead199df6df4df0eb9d847fbfd33b3e459dd43b5
+assets/tutorials/first-app/14-http/source-code.json,1742567120981,b8d9e603124c5c9ce46ad01bb7bd5cd79be28cc2baeef3589958a658a8547ca1
+media/chevron.svg,1742567121579,fcd5035f3a38232a77d740187b0325542955f66a40dcc6288163dd4a15ebc20a
+assets/tutorials/learn-angular/23-pipes-format-data/source-code.json,1742567121119,085515186f38c4ee6c571ad9e0dcac010af5057558fdd7ef566b1d197134ad05
+assets/tutorials/learn-angular/24-create-a-pipe/source-code.json,1742567121117,eb965c342cf7f2cdb15204f7e01811bfc19ba60169a0ab90e12f6be707f59f77
+assets/tutorials/learn-angular/25-next-steps/source-code.json,1742567121117,c06cb565e64320d527c6ee7d2ea2702a1995d111ad4d057e637ec98561cf39db
+assets/tutorials/learn-angular/3-composing-components/source-code.json,1742567121128,9df1af65bbb7c7d65a7eca72e3a54adbf69e6c885cb93245b109b9958c9e6fa3
+assets/images/guide/dynamic-component-loader/ads-example.gif,1742567121048,3599e870f469b0e3671b31e3b36d5b9516ed03b5a14c238b6268a61bd886e536
+assets/tutorials/learn-angular/4-control-flow-if/source-code.json,1742567121119,28d62476ccea4ea64e852cd9e90ecbe93d934cedfbabc587903632e994e4501f
+assets/tutorials/learn-angular/5-control-flow-for/source-code.json,1742567121122,864aaf0270ac341b230ccf227e543e72da10f64b4610cb9641c63b7bf21f1531
+assets/tutorials/learn-angular/6-property-binding/source-code.json,1742567121124,0db177696c93f8f63fed5b03ad214ccea742274222fa21a92b01e6a70b21f58a
+assets/tutorials/learn-angular/7-event-handling/source-code.json,1742567121127,4ae627427c801d4439b8876c418e8f468a4b74f30c23e7ae9239301a73f3a99f
+assets/tutorials/learn-angular/8-input/source-code.json,1742567121131,97f951194756887c1d6c7981ae3b9712d75cc92caf137997295a421c778fb2b2
+assets/tutorials/learn-angular/9-output/source-code.json,1742567121129,38cc764b23c555dddcd0365de3755cc7f74336f71d084fe1c1ef28258125427a
+assets/tutorials/playground/0-hello-world/source-code.json,1742567121130,939586cbde030748a608cf303a845098c8c7a3ed79963ee747cfd6c7b2b879b5
+assets/tutorials/playground/1-signals/source-code.json,1742567121132,af1c907953f9d77e52bc5303c65c4c9e6fb1da8c07104738a5ea0a48f48a6538
+assets/tutorials/playground/2-control-flow/source-code.json,1742567121125,e8a4307fe4d86130a5f5042ddfb91478053ed0dcb9eca22eab115b28be44bc6c
+assets/tutorials/playground/3-minigame/source-code.json,1742567121133,d5f1ac1a1bde705304f29c9b3c44542937470b349bae0a05fb8f4b5fdba96ff7
+media/editor-light-horizontal.svg,1742567121452,0322776e7bfc6f86423c908b99dac4536740e3f7792dfdef70ce992d993aac19
+media/editor-light-vertical.svg,1742567121449,c70738e416087a099f605edb46fb6145e0e3ccc32e06a8b6e076de77c1394cc1
+assets/images/kitchen-sink/rhubarb.jpg,1742567120873,f150696aef3692cf5ca29c2c9dc2fe6a17c3c4d36a251f58b1bda02f13a21fdd
+assets/images/tutorials/first-app/homes-app-lesson-11-step-3.png,1742567121015,ea6a4cf87bc94703f08ad5d6f8d269aa5e1deccfa17c3e824ac075d5cfd769f4
+assets/images/tutorials/first-app/homes-app-lesson-12-step-3.png,1742567121016,9337e80142185464005901061c4278a88ccabbc069f779d7fbdad22d4e7bc65c
+media/editor-dark-vertical.svg,1742567121472,766b368cbe95732fdb635344fd6a6f933b8c7cd2f10fe632421a117404ab6c9f
+media/editor-dark-horizontal.svg,1742567121457,b51c7c98d3865936e9159058e6876814ee6a14c7734e89ce2e87fc9860cf241b
+assets/images/tutorials/first-app/homes-app-lesson-13-step-3.png,1742567121023,37886b90fe535c9562612ddf56b41dd1b5e46813b9441987c3811e5491366e12
+assets/images/press-kit/angular_signals.png,1742567120930,c70dd8bb576c38249212d3a227d7da808bb731b09edc11e82c90b443833bac9e
+assets/images/tutorials/first-app/homes-app-lesson-08-step-2.png,1742567121026,0e1192ba04de2b34f987cc66683d9ad91b57b4a135769f2e8be642cb664637b1
+assets/images/tutorials/first-app/homes-app-landing-page.png,1742567120999,0d8c08ee69d2bb2795afca4ba60b1c22b8719ce380001905c0e2e26d09beb96f
+assets/images/guide/cli/completion.gif,1742567121066,61ef4fb40010b38fcd709614f222512163d0c292de52713dce459db43065ea47
+assets/images/press-kit/angular_icon_gradient.gif,1742567120956,798beddacc6b838a4f894325fd944679157103371180182eb942e0f35ff0eea1
+worker-LQULJ2ET.js,1742567121561,ba842e592b27603a07807b152fd3b5da01ecdbb1bf3986af2f5142351e1a6961
+worker-LQULJ2ET.js.map,1742567121577,c132de4ff991cbe68928076a406ea6b9e4ad372bc93e215072c3915a4aba274a
diff --git a/.firebaserc b/.firebaserc
new file mode 100644
index 000000000000..fcae0c37fd93
--- /dev/null
+++ b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "angular-kr-docs"
+  }
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 8c124604a98f..17a365dfbe07 100644
--- a/.gitignore
+++ b/.gitignore
@@ -56,3 +56,4 @@ baseline.json
 
 # Ignore cache created with the Angular CLI.
 .angular/
+.env
diff --git a/README.md b/README.md
index 611304a9d5cf..497e74c929cb 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,11 @@
-<h1 align="center">Angular - The modern web developer's platform</h1>
+<h1 align="center">Angular - 현대 웹 개발자를 위한 플랫폼</h1>
+<h2 align="center">비공식 한글 문서 번역 프로젝트</h2>
 
 <p align="center">
   <img src="adev/src/assets/images/press-kit/angular_icon_gradient.gif" alt="angular-logo" width="120px" height="120px"/>
   <br>
-  <em>Angular is a development platform for building mobile and desktop web applications
-    <br> using TypeScript/JavaScript and other languages.</em>
+  <em>Angular는 모바일 및 데스크톱 웹 애플리케이션 개발을 위한 플랫폼입니다.
+    <br> TypeScript/JavaScript 및 기타 언어로 개발할 수 있습니다.</em>
   <br>
 </p>
 
@@ -14,133 +15,156 @@
 </p>
 
 <p align="center">
-  <a href="CONTRIBUTING.md">Contributing Guidelines</a>
+  <a href="CONTRIBUTING.md">기여 가이드</a>
   ·
-  <a href="https://github.com/angular/angular/issues">Submit an Issue</a>
+  <a href="https://github.com/angular/angular/issues">이슈 제출</a>
   ·
-  <a href="https://blog.angular.dev/">Blog</a>
+  <a href="https://blog.angular.dev/">블로그</a>
   <br>
   <br>
 </p>
 
 <p align="center">
   <a href="https://www.npmjs.com/@angular/core">
-    <img src="https://img.shields.io/npm/v/@angular/core.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen" alt="Angular on npm" />
+    <img src="https://img.shields.io/npm/v/@angular/core.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen" alt="npm의 Angular" />
   </a>&nbsp;
   <a href="https://discord.gg/angular">
-    <img src="https://img.shields.io/discord/463752820026376202.svg?logo=discord&logoColor=fff&label=Discord&color=7389d8" alt="Discord conversation" />
+    <img src="https://img.shields.io/discord/463752820026376202.svg?logo=discord&logoColor=fff&label=Discord&color=7389d8" alt="Discord 채널" />
   </a>
 </p>
 
 <hr>
 
-## Documentation
+## 한글 문서 프로젝트 소개
 
-Get started with Angular, learn the fundamentals and explore advanced topics on our documentation website.
+이 프로젝트는 Angular 공식 문서를 한국어로 번역하는 커뮤니티 주도형 프로젝트입니다. 한국 개발자들이 Angular를 더 쉽게 배우고 활용할 수 있도록 돕는 것을 목표로 합니다.
 
-- [Getting Started][quickstart]
-- [Architecture][architecture]
-- [Components and Templates][componentstemplates]
-- [Forms][forms]
-- [API][api]
+### 번역 진행 상황
 
-### Advanced
+현재 이 저장소의 문서들은 대부분 AI를 이용한 초벌 번역만 진행된 상태입니다. 정확하고 자연스러운 번역을 위해 커뮤니티 구성원들의 검토와 수정이 필요합니다. 함께 양질의 한글 Angular 문서를 만들어 나가요!
 
-- [Angular Elements][angularelements]
-- [Server Side Rendering][ssr]
-- [Schematics][schematics]
-- [Lazy Loading][lazyloading]
-- [Animations][animations]
+- 최근 업데이트: 2025-03-21
 
-### Local Development
+### 사용 도구
 
-To contribute to the Angular Docs, check out the [Angular.dev README](adev/README.md)
+- [ai-markdown-translator](https://github.com/h7ml/ai-markdown-translator)
+- [Cursor](https://www.cursor.com/)
 
-## Development Setup
+### 번역 참여하기
 
-### Prerequisites
+이 프로젝트에 기여하고 싶으시다면:
 
-- Install [Node.js] which includes [Node Package Manager][npm]
+1. 이 저장소를 포크(Fork)하세요
+2. 번역 작업을 수행하세요
+3. Pull Request를 제출하세요
 
-### Setting Up a Project
+자세한 내용은 [번역 기여 가이드](TRANSLATION_CONTRIBUTING.md)를 참조하세요.
 
-Install the Angular CLI globally:
+## 문서
+
+Angular를 시작하고 기본 원리를 배우며, 문서 웹사이트에서 고급 주제를 탐색해 보세요.
+
+- [시작하기][quickstart]
+- [아키텍처][architecture]
+- [컴포넌트 및 템플릿][componentstemplates]
+- [폼][forms]
+- [API 참조][api]
+
+### 고급 주제
+
+- [Angular 엘리먼트][angularelements]
+- [서버 사이드 렌더링][ssr]
+- [스키매틱][schematics]
+- [지연 로딩][lazyloading]
+- [애니메이션][animations]
+
+### 로컬 개발
+
+Angular 문서에 기여하려면 [Angular.dev README](adev/README.md)를 확인하세요.
+
+## 개발 환경 설정
+
+### 필수 요소
+
+- [Node.js] 설치 (여기에는 [Node Package Manager][npm]이 포함되어 있습니다)
+
+### 프로젝트 설정하기
+
+Angular CLI 전역 설치:
 
 ```
 npm install -g @angular/cli
 ```
 
-Create workspace:
+워크스페이스 생성:
 
 ```
-ng new [PROJECT NAME]
+ng new [프로젝트 이름]
 ```
 
-Run the application:
+애플리케이션 실행:
 
 ```
-cd [PROJECT NAME]
+cd [프로젝트 이름]
 ng serve
 ```
 
-Angular is cross-platform, fast, scalable, has incredible tooling, and is loved by millions.
+Angular는 크로스 플랫폼이며, 빠르고 확장 가능하며, 다양한 도구를 제공하여 전 세계 수백만 개발자들에게 사랑받고 있습니다.
 
-## Quickstart
+## 빠른 시작
 
-[Get started in 5 minutes][quickstart].
+[5분 안에 시작하기][quickstart]
 
-## Ecosystem
+## 생태계
 
 <p>
   <img src="/contributing-docs/images/angular-ecosystem-logos.png" alt="angular ecosystem logos" width="500px" height="auto">
 </p>
 
-- [Angular Command Line (CLI)][cli]
+- [Angular CLI][cli]
 - [Angular Material][angularmaterial]
 
-## Changelog
+## 변경 이력
 
-[Learn about the latest improvements][changelog].
+[최신 개선 사항 알아보기][changelog]
 
-## Upgrading
+## 업그레이드
 
-Check out our [upgrade guide](https://angular.dev/update-guide/) to find out the best way to upgrade your project.
+프로젝트 업그레이드를 위한 최적의 방법은 [업그레이드 가이드](https://angular.dev/update-guide/)를 확인하세요.
 
-## Contributing
+## 기여하기
 
-### Contributing Guidelines
+### 기여 가이드라인
 
-Read through our [contributing guidelines][contributing] to learn about our submission process, coding rules, and more.
+[기여 가이드][contributing]를 읽고 제출 절차, 코딩 규칙 등에 대해 알아보세요.
 
-### Want to Help?
+### 도움을 주고 싶으신가요?
 
-Want to report a bug, contribute some code, or improve the documentation? Excellent! Read up on our guidelines for [contributing][contributing] and then check out one of our issues labeled as <kbd>[help wanted](https://github.com/angular/angular/labels/help%20wanted)</kbd> or <kbd>[good first issue](https://github.com/angular/angular/labels/good%20first%20issue)</kbd>.
+버그를 신고하거나, 코드를 기여하거나, 문서를 개선하고 싶으신가요? 훌륭합니다! [기여 가이드][contributing]를 읽은 후, <kbd>[도움이 필요함](https://github.com/angular/angular/labels/help%20wanted)</kbd> 또는 <kbd>[초보자에게 적합](https://github.com/angular/angular/labels/good%20first%20issue)</kbd> 라벨이 붙은 이슈를 확인해보세요.
 
-### Code of Conduct
+### 행동 강령
 
-Help us keep Angular open and inclusive. Please read and follow our [Code of Conduct][codeofconduct].
+Angular를 개방적이고 포용적인 커뮤니티로 유지할 수 있도록 도와주세요. [행동 강령][codeofconduct]을 읽고 준수해 주세요.
 
-## Community
+## 커뮤니티
 
-Join the conversation and help the community.
+대화에 참여하고 커뮤니티에 기여하세요.
 
-- [X (formerly Twitter)][X (formerly Twitter)]
+- [X (구 Twitter)][X (formerly Twitter)]
 - [Bluesky][bluesky]
 - [Discord][discord]
 - [Gitter][gitter]
 - [YouTube][youtube]
 - [StackOverflow][stackoverflow]
-- Find a Local [Meetup][meetup]
+- 지역 [밋업][meetup] 찾기
 
 [![Love Angular badge](https://img.shields.io/badge/angular-love-blue?logo=angular&angular=love)](https://www.github.com/angular/angular)
 
-**Love Angular? Give our repo a star :star: :arrow_up:.**
+**Angular를 좋아하시나요? 저장소에 별표를 눌러주세요! :star: :arrow_up:**
 
 [contributing]: CONTRIBUTING.md
 [quickstart]: https://angular.dev/tutorials/learn-angular
 [changelog]: CHANGELOG.md
-[ng]: https://angular.dev
-[documentation]: https://angular.dev/overview
 [angularmaterial]: https://material.angular.io/
 [cli]: https://angular.dev/tools/cli
 [architecture]: https://angular.dev/essentials
diff --git a/TRANSLATION_CONTRIBUTING.md b/TRANSLATION_CONTRIBUTING.md
new file mode 100644
index 000000000000..004b691d13a0
--- /dev/null
+++ b/TRANSLATION_CONTRIBUTING.md
@@ -0,0 +1,60 @@
+# Angular 한글 문서 번역 기여 가이드
+
+Angular 공식 문서의 한글 번역 프로젝트에 참여해 주셔서 감사합니다! 이 문서는 번역 작업에 참여하는 방법과 번역 시 지켜야 할 규칙에 대한 안내입니다.
+
+## 번역 참여 방법
+
+1. 이 저장소를 포크(Fork)합니다.
+2. 포크한 저장소를 로컬에 클론합니다.
+3. 번역할 문서를 선택합니다.
+4. 번역 작업을 수행합니다.
+5. 변경사항을 커밋하고 푸시합니다.
+6. 원본 저장소로 Pull Request를 제출합니다.
+
+## 번역 규칙
+
+### 기본 원칙
+
+1. 원문의 의미를 정확하게 전달하는 것을 최우선으로 합니다.
+2. 기술 용어는 가능한 한 한글로 번역하되, 필요시 영문을 병기합니다.
+3. 번역된 문장은 자연스러운 한글 문장이 되도록 합니다.
+4. 존칭(~합니다, ~입니다 등)을 사용합니다.
+
+### 기술 용어 번역
+
+일관성 있는 번역을 위해 다음과 같은 기술 용어 번역 사전을 참고하세요:
+
+| 영문 | 한글 번역 |
+|------|----------|
+| component | 컴포넌트 |
+| directive | 지시자 |
+| pipe | 파이프 |
+| service | 서비스 |
+| dependency injection | 의존성 주입 |
+| template | 템플릿 |
+| binding | 바인딩 |
+| router | 라우터 |
+| module | 모듈 |
+| decorator | 데코레이터 |
+
+위 목록에 없는 용어는 [용어 토론 이슈](https://github.com/your-username/angular/issues)를 통해 논의할 수 있습니다.
+
+### 번역 검토 프로세스
+
+1. Pull Request가 제출되면 다른 기여자들이 코드 리뷰를 진행합니다.
+2. 리뷰어는 다음 사항을 확인합니다:
+   - 원문의 의미가 정확하게 전달되었는지
+   - 번역 규칙이 준수되었는지
+   - 문법적 오류가 없는지
+   - 용어 사용이 일관적인지
+3. 리뷰를 통과한 번역은 메인 브랜치에 병합됩니다.
+
+## 번역 진행 상황 확인
+
+현재 번역 진행 상황은 [이슈 페이지](https://github.com/your-username/angular/issues)에서 확인할 수 있습니다. 번역을 시작하기 전에 다른 기여자가 이미 해당 문서를 번역하고 있는지 확인하세요.
+
+## 문의 및 도움말
+
+번역 작업 중 질문이나 도움이 필요하시면 [이슈](https://github.com/your-username/angular/issues)를 등록하거나 [디스코드 채널](#)에 참여하세요.
+
+함께 Angular 공식 문서의 한글화를 완성해 나가요!
diff --git a/adev/README.md b/adev/README.md
index 6335c24805c3..eef2759d5a3e 100644
--- a/adev/README.md
+++ b/adev/README.md
@@ -1,53 +1,51 @@
 # [Angular.dev](https://www.angular.dev)
 
-This site is built with Angular.
+이 사이트는 Angular로 구축되었습니다.
 
-The content is written primarily in Markdown format located in `src/content`. For simple edits, you can directly edit the file on GitHub and generate a Pull Request.
+내용은 주로 `src/content`에 위치한 Markdown 형식으로 작성되어 있습니다. 간단한 수정의 경우, GitHub에서 파일을 직접 수정하고 Pull Request를 생성할 수 있습니다.
 
-## Local Development
+## 로컬 개발
 
-For local development, [yarn](https://yarnpkg.com/) is the preferred package manager. You can set up a local environment with the following commands
-:
+로컬 개발을 위해 [yarn](https://yarnpkg.com/)이 선호되는 패키지 관리자입니다. 다음 명령어로 로컬 환경을 설정할 수 있습니다:
 
 ```bash
-# Clone Angular repo
+# Angular 레포지토리 클론
 git clone https://github.com/angular/angular.git
 
-# Navigate to project directory
+# 프로젝트 디렉토리로 이동
 cd angular
 
-# Install dependencies
+# 의존성 설치
 yarn
 
-# Build and run local dev server
-# Note: Initial build will take some time
+# 로컬 개발 서버 빌드 및 실행
+# 주의: 초기 빌드는 시간이 걸릴 수 있습니다
 yarn docs
 ```
 
-If you are having issues with the docs building, see the [FAQs](#faqs) section.
+문서 빌드에 문제가 있는 경우, [자주 묻는 질문(FAQs)](#faqs) 섹션을 참조하세요.
 
-## Contributing
+## 기여
 
-Want to report a bug, contribute some code, or improve the documentation? Excellent!
+버그를 보고하거나, 코드를 기여하거나, 문서를 개선하고 싶으신가요? 훌륭합니다!
 
-Read through our [contributing guidelines](/CONTRIBUTING.md) to learn about our submission process, coding rules, and more.
+우리의 [기여 가이드라인](/CONTRIBUTING.md)을 읽고 제출 프로세스, 코딩 규칙 등을 알아보세요.
 
-And if you're new, check out one of our issues labeled as <kbd>[help wanted](https://github.com/angular/angular/labels/help%20wanted)</kbd> or <kbd>[good first issue](https://github.com/angular/angular/labels/good%20first%20issue)</kbd>.
+그리고 새로 오셨다면, <kbd>[도움 필요](https://github.com/angular/angular/labels/help%20wanted)</kbd> 또는 <kbd>[좋은 첫 문제](https://github.com/angular/angular/labels/good%20first%20issue)</kbd>로 라벨이 붙은 문제 중 하나를 확인해 보세요.
 
-### Code of Conduct
+### 행동 강령
 
-Help us keep Angular open and inclusive. Please read and follow our [Code of Conduct](/CODE_OF_CONDUCT.md).
+Angular를 개방적이고 포용적으로 유지하는 데 도움을 주세요. 우리의 [행동 강령](/CODE_OF_CONDUCT.md)을 읽고 따르세요.
 
-## FAQs
+## 자주 묻는 질문(FAQs)
 
-### The build is failing and I'm seeing `bazel:bazel failed: missing input file` messages.
+### 빌드에 실패하고 `bazel:bazel failed: missing input file` 메시지가 표시됩니다.
 
-This is most likely due to a bazel dependency / caching issue. To resolve this, run the following command:
+이는 대부분 bazel 의존성 / 캐싱 문제 때문일 가능성이 높습니다. 이를 해결하려면 다음 명령어를 실행하세요:
 
 ```
-# Try this first
+# 먼저 이걸 시도하세요
 yarn bazel clean
 
-# If that doesn't work, try it with the expunge flag
-yarn bazel clean --expunge
-```
+# 그것이 작동하지 않으면, expunge 플래그와 함께 시도하세요
+yarn bazel clean --expunge
\ No newline at end of file
diff --git a/adev/scripts/update-cli-help/README.md b/adev/scripts/update-cli-help/README.md
index a2844a522403..aac45802343f 100644
--- a/adev/scripts/update-cli-help/README.md
+++ b/adev/scripts/update-cli-help/README.md
@@ -1,3 +1,3 @@
-# Generating data for `angular.dev/cli`
+# `angular.dev/cli`를 위한 데이터 생성
 
-This script updates the Angular CLI help JSON files stored in `adev/src/content/cli/help`. This files are used to generate the [angular.dev CLI](https://angular.dev/cli) pages.
+이 스크립트는 `adev/src/content/cli/help`에 저장된 Angular CLI 도움말 JSON 파일을 업데이트합니다. 이 파일들은 [angular.dev CLI](https://angular.dev/cli) 페이지를 생성하는 데 사용됩니다.
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/api-gen/rendering/regions/README.md b/adev/shared-docs/pipeline/api-gen/rendering/regions/README.md
index 0f18941a8743..663951aad43d 100644
--- a/adev/shared-docs/pipeline/api-gen/rendering/regions/README.md
+++ b/adev/shared-docs/pipeline/api-gen/rendering/regions/README.md
@@ -1,3 +1,3 @@
-# Code Regions
+# 코드 영역
 
-All the files in the regions folder were implemented based on angular.io: <https://github.com/angular/angular/tree/17.2.x/aio/tools/transforms/examples-package/services>.
+regions 폴더의 모든 파일은 angular.io를 기반으로 구현되었습니다: <https://github.com/angular/angular/tree/17.2.x/aio/tools/transforms/examples-package/services>.
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/docs-alert/docs-alert.md b/adev/shared-docs/pipeline/guides/testing/docs-alert/docs-alert.md
index 56ea9fa35e2f..a98c18ca7e74 100644
--- a/adev/shared-docs/pipeline/guides/testing/docs-alert/docs-alert.md
+++ b/adev/shared-docs/pipeline/guides/testing/docs-alert/docs-alert.md
@@ -1,18 +1,18 @@
-Note: Use Note for ancillary/additional information that's not _essential_ to the main text.
-This is a multiline note
+Note: Use Note for ancillary/additional information that's not _essential_ to the main text.  
+이것은 여러 줄 노트입니다.
 
-Tip: Use Tip to call out a specific task/action users can perform, or a fact that plays directly into a task/action.
+Tip: Use Tip to call out a specific task/action users can perform, or a fact that plays directly into a task/action.  
 
-TODO: Use TODO for incomplete documentation that you plan to expand soon. You can also assign the TODO, e.g. TODO(emmatwersky): Text.
+TODO: Use TODO for incomplete documentation that you plan to expand soon. You can also assign the TODO, e.g. TODO(emmatwersky): Text.  
 
-QUESTION: Use Question to pose a question to the reader, kind of like a mini-quiz that they should be able to answer.
+QUESTION: Use Question to pose a question to the reader, kind of like a mini-quiz that they should be able to answer.  
 
-Summary: Use Summary to provide a two- or three-sentence synopsis of the page or section content, so readers can figure out whether this is the right place for them.
+Summary: Use Summary to provide a two- or three-sentence synopsis of the page or section content, so readers can figure out whether this is the right place for them.  
 
-TLDR: Use TLDR if you can provide the essential information about a page or section in a sentence or two.
+TLDR: Use TLDR if you can provide the essential information about a page or section in a sentence or two.  
 
-CRITICAL: Use Critical to call out potential bad stuff or alert the reader they ought to be careful before doing something. For example, Warning: Running `rm` with the `-f` option will delete write-protected files or directories without prompting you.
+CRITICAL: Use Critical to call out potential bad stuff or alert the reader they ought to be careful before doing something. For example, Warning: Running `rm` with the `-f` option will delete write-protected files or directories without prompting you.  
 
-IMPORTANT: Use Important for information that's crucial to comprehending the text or to completing some task.
+IMPORTANT: Use Important for information that's crucial to comprehending the text or to completing some task.  
 
-HELPFUL: Use Best practice to call out practices that are known to be successful or better than alternatives.
+HELPFUL: Use Best practice to call out practices that are known to be successful or better than alternatives.  
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/docs-callout/docs-callout.md b/adev/shared-docs/pipeline/guides/testing/docs-callout/docs-callout.md
index c329eb6298d3..ed45d8b546ff 100644
--- a/adev/shared-docs/pipeline/guides/testing/docs-callout/docs-callout.md
+++ b/adev/shared-docs/pipeline/guides/testing/docs-callout/docs-callout.md
@@ -1,16 +1,16 @@
-<docs-callout title="Default callout title" id="test">
+<docs-callout title="기본 호출 제목" id="test">
   <span id="default-marker"></span>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  로렘 입숨 돌로르 시트 아메트, 컨세크터 아디픽싱 엘리트.
 </docs-callout>
 
-<docs-callout critical title="Callout title for critical">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+<docs-callout critical title="위험 호출 제목">
+  로렘 입숨 돌로르 시트 아메트, 컨세크터 아디픽싱 엘리트.
 </docs-callout>
 
-<docs-callout important title="Callout title for important">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+<docs-callout important title="중요 호출 제목">
+  로렘 입숨 돌로르 시트 아메트, 컨세크터 아디픽싱 엘리트.
 </docs-callout>
 
-<docs-callout helpful title="Callout title for helpful">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+<docs-callout helpful title="도움이 되는 호출 제목">
+  로렘 입숨 돌로르 시트 아메트, 컨세크터 아디픽싱 엘리트.
 </docs-callout>
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/docs-card/docs-card.md b/adev/shared-docs/pipeline/guides/testing/docs-card/docs-card.md
index 246abf08e81a..df0d6447ea8e 100644
--- a/adev/shared-docs/pipeline/guides/testing/docs-card/docs-card.md
+++ b/adev/shared-docs/pipeline/guides/testing/docs-card/docs-card.md
@@ -1,5 +1,5 @@
-<docs-card title="No Link Card">Card Content</docs-card>
-<docs-card title="Link Card" link="Try It Now" href="in/app/link">
-  Card Content
+<docs-card title="링크 없는 카드">카드 내용</docs-card>
+<docs-card title="링크 카드" link="지금 시도하기" href="in/app/link">
+  카드 내용
 </docs-card>
-<docs-card title="Image Card" imgSrc="adev/shared-docs/pipeline/guides/testing/docs-card/angular.svg"></docs-card>
\ No newline at end of file
+<docs-card title="이미지 카드" imgSrc="adev/shared-docs/pipeline/guides/testing/docs-card/angular.svg"></docs-card>
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/docs-code-block/docs-code-block.md b/adev/shared-docs/pipeline/guides/testing/docs-code-block/docs-code-block.md
index 6896608fd142..a0b443fa9dc3 100644
--- a/adev/shared-docs/pipeline/guides/testing/docs-code-block/docs-code-block.md
+++ b/adev/shared-docs/pipeline/guides/testing/docs-code-block/docs-code-block.md
@@ -1,3 +1 @@
-```typescript
-this is a code block
-```
\ No newline at end of file
+이것은 코드 블록입니다
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/docs-code-multifile/docs-code-multifile.md b/adev/shared-docs/pipeline/guides/testing/docs-code-multifile/docs-code-multifile.md
index af1c4329b15f..e16f3106517c 100644
--- a/adev/shared-docs/pipeline/guides/testing/docs-code-multifile/docs-code-multifile.md
+++ b/adev/shared-docs/pipeline/guides/testing/docs-code-multifile/docs-code-multifile.md
@@ -1,4 +1,4 @@
 <docs-code-multifile>
-<docs-code >this is code</docs-code>
-<docs-code >this is also code</docs-code>
+<docs-code >이것은 코드입니다</docs-code>
+<docs-code >이것도 코드입니다</docs-code>
 </docs-code-multifile>
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/docs-code/docs-code.md b/adev/shared-docs/pipeline/guides/testing/docs-code/docs-code.md
index 187fa3184c3b..70be2a48319b 100644
--- a/adev/shared-docs/pipeline/guides/testing/docs-code/docs-code.md
+++ b/adev/shared-docs/pipeline/guides/testing/docs-code/docs-code.md
@@ -1,12 +1,11 @@
 <docs-code>
-this is code
+이것은 코드입니다
 </docs-code>
 
 <docs-code path="adev/shared-docs/pipeline/guides/testing/docs-code/example-with-eslint-comment.ts" />
 <docs-code path="adev/shared-docs/pipeline/guides/testing/docs-code/example-with-region.ts" />
 
-
 <docs-code path="adev/shared-docs/pipeline/guides/testing/docs-code/new-code.ts"
            diff="adev/shared-docs/pipeline/guides/testing/docs-code/old-code.ts" />
 
-<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/shared-docs/pipeline/guides/testing/docs-code/messages.fr.xlf.html" />
+<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/shared-docs/pipeline/guides/testing/docs-code/messages.fr.xlf.html" />
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/docs-decorative-header/docs-decorative-header.md b/adev/shared-docs/pipeline/guides/testing/docs-decorative-header/docs-decorative-header.md
index a0e6fe346b8a..0fb4b5320f5e 100644
--- a/adev/shared-docs/pipeline/guides/testing/docs-decorative-header/docs-decorative-header.md
+++ b/adev/shared-docs/pipeline/guides/testing/docs-decorative-header/docs-decorative-header.md
@@ -1,3 +1,3 @@
-<docs-decorative-header title="Custom Title" imgSrc="adev/shared-docs/pipeline/guides/testing/docs-decorative-header/decoration.svg">
-This is header text
+<docs-decorative-header title="사용자 정의 제목" imgSrc="adev/shared-docs/pipeline/guides/testing/docs-decorative-header/decoration.svg">
+이것은 헤더 텍스트입니다
 </docs-decorative-header>
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/docs-pill-row/docs-pill-row.md b/adev/shared-docs/pipeline/guides/testing/docs-pill-row/docs-pill-row.md
index f0a36fa2b371..33411035adf8 100644
--- a/adev/shared-docs/pipeline/guides/testing/docs-pill-row/docs-pill-row.md
+++ b/adev/shared-docs/pipeline/guides/testing/docs-pill-row/docs-pill-row.md
@@ -1,4 +1,4 @@
 <docs-pill-row>
-  <docs-pill href="#pill-row" title="Link"/>
-  <docs-pill href="#pill-row" title="Link"/>
+  <docs-pill href="#pill-row" title="링크"/>
+  <docs-pill href="#pill-row" title="링크"/>
 </docs-pill-row>
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/docs-pill/docs-pill.md b/adev/shared-docs/pipeline/guides/testing/docs-pill/docs-pill.md
index 14dfb4bb7bb5..d90d10acaf47 100644
--- a/adev/shared-docs/pipeline/guides/testing/docs-pill/docs-pill.md
+++ b/adev/shared-docs/pipeline/guides/testing/docs-pill/docs-pill.md
@@ -1,4 +1,4 @@
 Text to force this as inline.
-<docs-pill href="#pill-row" title="Same Page"/>
-<docs-pill href="http://angular.dev" title="External Page"/>
-<docs-pill href="./this-other-page" title="Another Page"/>
\ No newline at end of file
+<docs-pill href="#pill-row" title="동일한 페이지"/>
+<docs-pill href="http://angular.dev" title="외부 페이지"/>
+<docs-pill href="./this-other-page" title="다른 페이지"/>
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/docs-step/docs-step.md b/adev/shared-docs/pipeline/guides/testing/docs-step/docs-step.md
index 7c46f019a653..452626a007ac 100644
--- a/adev/shared-docs/pipeline/guides/testing/docs-step/docs-step.md
+++ b/adev/shared-docs/pipeline/guides/testing/docs-step/docs-step.md
@@ -1,6 +1,6 @@
-<docs-step title="Step 1">
-  Do the first thing.
+<docs-step title="1단계">
+  첫 번째 일을 하세요.
 </docs-step>
-<docs-step title="Step B">
-  Do another thing after that.
+<docs-step title="B단계">
+  그 후에 다른 일을 하세요.
 </docs-step>
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/docs-video/docs-video.md b/adev/shared-docs/pipeline/guides/testing/docs-video/docs-video.md
index a1f4f87d8e62..26013205a1ea 100644
--- a/adev/shared-docs/pipeline/guides/testing/docs-video/docs-video.md
+++ b/adev/shared-docs/pipeline/guides/testing/docs-video/docs-video.md
@@ -1,2 +1,2 @@
 This is a video:
-<docs-video src="https://www.youtube.com/embed/O47uUnJjbJc" alt="Expression Changed After Checked Video"/>
\ No newline at end of file
+<docs-video src="https://www.youtube.com/embed/O47uUnJjbJc" alt="변경된 표현 후 확인된 비디오"/>
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/docs-workflow/docs-workflow.md b/adev/shared-docs/pipeline/guides/testing/docs-workflow/docs-workflow.md
index e5e74a90ab70..b583dafa11e2 100644
--- a/adev/shared-docs/pipeline/guides/testing/docs-workflow/docs-workflow.md
+++ b/adev/shared-docs/pipeline/guides/testing/docs-workflow/docs-workflow.md
@@ -1,8 +1,8 @@
 <docs-workflow>
-  <docs-step title="Step 1">
-    Do the first thing.
+  <docs-step title="1단계">
+    첫 번째 작업을 수행합니다.
   </docs-step>
-  <docs-step title="Step B">
-    Do another thing after that.
+  <docs-step title="B단계">
+    그 후에 다른 작업을 수행합니다.
   </docs-step>
 </docs-workflow>
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/heading/heading.md b/adev/shared-docs/pipeline/guides/testing/heading/heading.md
index 31203e15b42c..6b7b84c07114 100644
--- a/adev/shared-docs/pipeline/guides/testing/heading/heading.md
+++ b/adev/shared-docs/pipeline/guides/testing/heading/heading.md
@@ -1,13 +1,13 @@
-# Top Header (h1)
-## Headers (h2)
-### Smaller headers (h3)
-#### Even smaller (h4)
-##### Even more smaller (h5)
-###### The smallest! (h6)
-##### Another "more smaller" (h5)
-## Duplicate Anchor
-## Duplicate Anchor
-## `myClass.myMethod` is the best
-## ステップ 2 - アプリケーションのレイアウトに新しいコンポーネントを追加
-## My heading {# my-custom-id }
-## Query for the `<h1>`
\ No newline at end of file
+# 상단 헤더 (h1)
+## 헤더 (h2)
+### 더 작은 헤더 (h3)
+#### 더욱 더 작은 (h4)
+##### 더더욱 작은 (h5)
+###### 가장 작은! (h6)
+##### 또 다른 "더 작은" (h5)
+## 중복 앵커
+## 중복 앵커
+## `myClass.myMethod`가 최고입니다
+## 단계 2 - 애플리케이션 레이아웃에 새 구성 요소 추가
+## 내 제목 {# my-custom-id }
+## `<h1>`에 대한 쿼리
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/image/image.md b/adev/shared-docs/pipeline/guides/testing/image/image.md
index f8e9bcee3728..bb0050258ac5 100644
--- a/adev/shared-docs/pipeline/guides/testing/image/image.md
+++ b/adev/shared-docs/pipeline/guides/testing/image/image.md
@@ -1,2 +1,2 @@
-![New Logo!](https://angular.dev/favicon.ico 'Our new icon')
-![New Logo!](./some-image.png 'Local Image')
\ No newline at end of file
+![새로운 로고!](https://angular.dev/favicon.ico '우리의 새로운 아이콘')
+![새로운 로고!](./some-image.png '로컬 이미지')
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/link/link.md b/adev/shared-docs/pipeline/guides/testing/link/link.md
index a25130fef56e..400156c52dc9 100644
--- a/adev/shared-docs/pipeline/guides/testing/link/link.md
+++ b/adev/shared-docs/pipeline/guides/testing/link/link.md
@@ -1,3 +1,3 @@
-[Angular Site](https://angular.dev)
-[same page](#test)
-[same site](../other/page)
\ No newline at end of file
+[Angular Site](https://angular.dev)  
+[same page](#test)  
+[same site](../other/page)  
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/list/list.md b/adev/shared-docs/pipeline/guides/testing/list/list.md
index 3ed62056b230..1f30a4a10e58 100644
--- a/adev/shared-docs/pipeline/guides/testing/list/list.md
+++ b/adev/shared-docs/pipeline/guides/testing/list/list.md
@@ -1,12 +1,12 @@
 # Ordered List
-1. First Item
-2. Another Item
-3. Last in order
+1. 첫 번째 항목
+2. 다른 항목
+3. 마지막 순서
 
 # Unordered List
-- Order
-- here
-- matter
-- doesn't
-- [some link](https://angular.dev)
-- Code block `SomeClass`
\ No newline at end of file
+- 순서
+- 여기
+- 중요하지 않음
+- 중요하지 않음
+- [일부 링크](https://angular.dev)
+- 코드 블록 `SomeClass`
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/table/table.md b/adev/shared-docs/pipeline/guides/testing/table/table.md
index d4dce00341a9..39bbe7e7d778 100644
--- a/adev/shared-docs/pipeline/guides/testing/table/table.md
+++ b/adev/shared-docs/pipeline/guides/testing/table/table.md
@@ -1,5 +1,5 @@
-| Sports           | Season |
+| 스포츠           | 시즌   |
 | ---------------- | ------ |
-| Skiing           | Winter |
-| Baseball | Summer |
-| Running |  Year Round |
\ No newline at end of file
+| 스키             | 겨울   |
+| 야구             | 여름   |
+| 러닝             | 연중   |
\ No newline at end of file
diff --git a/adev/shared-docs/pipeline/guides/testing/text/text.md b/adev/shared-docs/pipeline/guides/testing/text/text.md
index 1960b2d29f70..a5f0f8d07e6f 100644
--- a/adev/shared-docs/pipeline/guides/testing/text/text.md
+++ b/adev/shared-docs/pipeline/guides/testing/text/text.md
@@ -1,5 +1,5 @@
-This is a string that contains an emoji, 😎. See there it was;
+이 문자열에는 이모지가 포함되어 있습니다, 😎. 봐요, 저기에 있었어요;
 
-# This header causes there to be two text areas
+# 이 헤더는 두 개의 텍스트 영역을 생성합니다.
 
-This is a string without an emoji.
\ No newline at end of file
+이 문자열에는 이모지가 없습니다.
\ No newline at end of file
diff --git a/adev/src/app/app.component.html b/adev/src/app/app.component.html
index e589f3591286..83268bf239f0 100644
--- a/adev/src/app/app.component.html
+++ b/adev/src/app/app.component.html
@@ -1,8 +1,13 @@
-<button (click)="focusFirstHeading()" class="adev-skip">Skip to main content</button>
+<button (click)="focusFirstHeading()" class="adev-skip">메인 콘텐츠로 건너뛰기</button>
 
 @defer (when isBrowser) {
   <adev-progress-bar />
-  <docs-top-level-banner expiry="2024-12-10" id="state-of-js-2024" link="https://survey.devographics.com/en-US/survey/state-of-js/2024?source=angular_homepage" text="Share your experience with Angular in The State of JavaScript 2024 survey"  />
+  <docs-top-level-banner
+    expiry="2024-12-10"
+    id="state-of-js-2024"
+    link="https://survey.devographics.com/en-US/survey/state-of-js/2024?source=angular_homepage"
+    text="The State of JavaScript 2024 설문조사에서 Angular에 대한 경험을 공유해주세요"
+  />
 }
 
 <div class="adev-nav"></div>
diff --git a/adev/src/app/core/layout/footer/footer.component.html b/adev/src/app/core/layout/footer/footer.component.html
index bc076da2ebda..f003dafd246c 100644
--- a/adev/src/app/core/layout/footer/footer.component.html
+++ b/adev/src/app/core/layout/footer/footer.component.html
@@ -1,13 +1,13 @@
 <div class="adev-footer-container">
   <div class="adev-footer-columns">
     <div>
-      <h2>Social Media</h2>
+      <h2>소셜 미디어</h2>
       <ul>
         <li>
-          <a [href]="MEDIUM" title="Angular blog">Blog</a>
+          <a [href]="MEDIUM" title="Angular 블로그">블로그</a>
         </li>
         <li>
-          <a [href]="X" title="X (formerly Twitter)">X (formerly Twitter)</a>
+          <a [href]="X" title="X (구 Twitter)">X (구 Twitter)</a>
         </li>
         <li>
           <a [href]="BLUESKY" title="Bluesky">Bluesky</a>
@@ -18,7 +18,7 @@ <h2>Social Media</h2>
         <li>
           <a
             href="https://discord.gg/angular"
-            title="Join the discussions at Angular Community Discord server."
+            title="Angular 커뮤니티 Discord 서버에서 토론에 참여하세요."
           >
             Discord
           </a>
@@ -29,7 +29,7 @@ <h2>Social Media</h2>
         <li>
           <a
             href="https://stackoverflow.com/questions/tagged/angular"
-            title="Stack Overflow: where the community answers your technical Angular questions."
+            title="Stack Overflow: 커뮤니티가 당신의 Angular 기술 질문에 답변하는 곳."
           >
             Stack Overflow
           </a>
@@ -37,20 +37,20 @@ <h2>Social Media</h2>
       </ul>
     </div>
     <div>
-      <h2>Community</h2>
+      <h2>커뮤니티</h2>
       <ul>
         <li>
           <a
             href="https://github.com/angular/angular/blob/main/CONTRIBUTING.md"
-            title="Contribute to Angular"
+            title="Angular에 기여하기"
           >
-            Contribute
+            기여하기
           </a>
         </li>
         <li>
           <a
             href="https://github.com/angular/code-of-conduct/blob/main/CODE_OF_CONDUCT.md"
-            title="Treating each other with respect."
+            title="서로를 존중하세요."
           >
             Code of Conduct
           </a>
@@ -58,62 +58,57 @@ <h2>Community</h2>
         <li>
           <a
             href="https://github.com/angular/angular/issues"
-            title="Post issues and suggestions on github."
+            title="GitHub에 이슈 및 제안 등록하기."
           >
-            Report Issues
+            이슈 보고
           </a>
         </li>
         <li>
           <a
             href="https://devlibrary.withgoogle.com/products/angular?sort=updated"
-            title="Google's DevLibrary"
+            title="Google의 DevLibrary"
           >
-            Google's DevLibrary
+            Google의 DevLibrary
           </a>
         </li>
         <li>
           <a
             href="https://developers.google.com/community/experts/directory?specialization=angular"
-            title="Angular Google Developer Experts"
+            title="Angular Google 개발자 전문가"
           >
-            Angular Google Developer Experts
+            Angular Google 개발자 전문가
           </a>
         </li>
       </ul>
     </div>
     <div>
-      <h2>Resources</h2>
+      <h2>리소스</h2>
       <ul>
         <li>
           <a routerLink="/press-kit" title="Press contacts, logos, and branding.">Press Kit</a>
         </li>
         <li>
-          <a routerLink="/roadmap" title="Roadmap">Roadmap</a>
+          <a routerLink="/roadmap" title="로드맵">로드맵</a>
         </li>
       </ul>
     </div>
     <div>
-      <h2>Languages</h2>
+      <h2>언어</h2>
       <ul>
         <li>
-          <a href="https://angular.cn/" title="简体中文版">简体中文版</a>
+          <a href="https://angular.cn/" title="간체 중국어">간체 중국어</a>
         </li>
         <li>
-          <a href="https://angular.tw/" title="正體中文版">正體中文版</a>
+          <a href="https://angular.tw/" title="번체 중국어">번체 중국어</a>
         </li>
         <li>
-          <a href="https://angular.jp/" title="日本語版">日本語版</a>
+          <a href="https://angular.jp/" title="일본어">일본어</a>
         </li>
         <li>
           <a href="https://angular.kr/" title="한국어">한국어</a>
         </li>
         <li>
-          <a
-            href="https://angular-gr.web.app"
-            title="&Epsilon;&lambda;&lambda;&eta;&nu;&iota;&kappa;ά"
-          >
-            &Epsilon;&lambda;&lambda;&eta;&nu;&iota;&kappa;ά
-          </a>
+          <a href="https://angular-gr.web.app" title="그리스어"> 그리스어 </a>
         </li>
       </ul>
     </div>
diff --git a/adev/src/app/core/layout/navigation/navigation.component.html b/adev/src/app/core/layout/navigation/navigation.component.html
index 080b38299f40..dbecfb15fd7b 100644
--- a/adev/src/app/core/layout/navigation/navigation.component.html
+++ b/adev/src/app/core/layout/navigation/navigation.component.html
@@ -10,7 +10,7 @@
     <button
       type="button"
       class="adev-mobile-nav-button"
-      aria-label="Toggle mobile navigation"
+      aria-label="모바일 내비게이션 토글"
       (click)="openMobileNav($event)"
     >
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="32">
@@ -69,7 +69,7 @@
       type="button"
       class="adev-close-nav"
       (click)="closeMobileNav()"
-      aria-label="Close navigation"
+      aria-label="내비게이션 닫기"
     >
       <docs-icon role="presentation">close</docs-icon>
     </button>
@@ -80,67 +80,74 @@
         class="adev-nav-item adev-nav-item--logo"
         [class.adev-nav-item--active]="activeRouteItem() === HOME_ROUTE"
       >
-        <a aria-label="Angular homepage" routerLink="/">
+        <a aria-label="Angular 홈페이지" routerLink="/">
           <!-- Logo Symbol -->
-          @if(!isUwu) {
-          <svg class="angular-logo" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="32">
-            <g clip-path="url(#a)">
-              <path
-                fill="url(#b)"
-                d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
-              />
-              <path
-                fill="url(#c)"
-                d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
-              />
-            </g>
-            <defs>
-              <linearGradient
-                id="b"
-                x1="49.009"
-                x2="225.829"
-                y1="213.75"
-                y2="129.722"
-                gradientUnits="userSpaceOnUse"
-              >
-                <stop stop-color="#E40035" />
-                <stop offset=".24" stop-color="#F60A48" />
-                <stop offset=".352" stop-color="#F20755" />
-                <stop offset=".494" stop-color="#DC087D" />
-                <stop offset=".745" stop-color="#9717E7" />
-                <stop offset="1" stop-color="#6C00F5" />
-              </linearGradient>
-              <linearGradient
-                id="c"
-                x1="41.025"
-                x2="156.741"
-                y1="28.344"
-                y2="160.344"
-                gradientUnits="userSpaceOnUse"
-              >
-                <stop stop-color="#FF31D9" />
-                <stop offset="1" stop-color="#FF5BE1" stop-opacity="0" />
-              </linearGradient>
-              <clipPath id="a">
-                <path fill="#fff" d="M0 0h223v236H0z" />
-              </clipPath>
-            </defs>
-          </svg>
-        } @else {
-          <img
-            src="assets/images/uwu.png"
-            style="width: auto; margin: 0"
-            class="uwu-logo"
-            alt="Angular logo"
-            height="34"/>
-        }
+          @if (!isUwu) {
+            <svg
+              class="angular-logo"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 223 236"
+              width="32"
+            >
+              <g clip-path="url(#a)">
+                <path
+                  fill="url(#b)"
+                  d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
+                />
+                <path
+                  fill="url(#c)"
+                  d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
+                />
+              </g>
+              <defs>
+                <linearGradient
+                  id="b"
+                  x1="49.009"
+                  x2="225.829"
+                  y1="213.75"
+                  y2="129.722"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stop-color="#E40035" />
+                  <stop offset=".24" stop-color="#F60A48" />
+                  <stop offset=".352" stop-color="#F20755" />
+                  <stop offset=".494" stop-color="#DC087D" />
+                  <stop offset=".745" stop-color="#9717E7" />
+                  <stop offset="1" stop-color="#6C00F5" />
+                </linearGradient>
+                <linearGradient
+                  id="c"
+                  x1="41.025"
+                  x2="156.741"
+                  y1="28.344"
+                  y2="160.344"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stop-color="#FF31D9" />
+                  <stop offset="1" stop-color="#FF5BE1" stop-opacity="0" />
+                </linearGradient>
+                <clipPath id="a">
+                  <path fill="#fff" d="M0 0h223v236H0z" />
+                </clipPath>
+              </defs>
+            </svg>
+          } @else {
+            <img
+              src="assets/images/uwu.png"
+              style="width: auto; margin: 0"
+              class="uwu-logo"
+              alt="Angular logo"
+              height="34"
+            />
+          }
         </a>
 
         <!-- Version picker for v18+ -->
         <div class="adev-nav-item">
           <button
             type="button"
-            aria-label="Select Angular version"
+            aria-label="Angular 버전 선택"
             role="menu"
             class="adev-version-button"
             [class.adev-mini-menu-open]="openedMenu === 'version-picker'"
@@ -164,16 +171,16 @@
           <ng-template #docsVersionMiniMenu>
             <ul class="adev-mini-menu adev-version-picker" cdkMenu>
               @for (item of versions(); track item) {
-              <li>
-                <a
-                  type="button"
-                  cdkMenuItem
-                  [href]="item.url"
-                  [attr.aria-label]="item.displayName"
-                >
-                  <span>{{ item.displayName }}</span>
-              </a>
-              </li>
+                <li>
+                  <a
+                    type="button"
+                    cdkMenuItem
+                    [href]="item.url"
+                    [attr.aria-label]="item.displayName"
+                  >
+                    <span>{{ item.displayName }}</span>
+                  </a>
+                </li>
               }
             </ul>
           </ng-template>
@@ -201,7 +208,7 @@
           </svg>
           <span
             class="adev-nav-item__label adev-search-desktop"
-            [attr.aria-label]="'Open search dialog with ' + searchTitle"
+            [attr.aria-label]="'검색 대화상자 열기 ' + searchTitle"
           >
             <kbd>{{ searchLabel }}</kbd>
             <kbd>K</kbd>
@@ -223,7 +230,7 @@
               d="M3.645 13.792h6.708v-1.25H3.645v1.25Zm0-3.542h6.708V9H3.645v1.25Zm-2.063 7.083a1.2 1.2 0 0 1-.875-.375 1.2 1.2 0 0 1-.375-.875V1.917a1.2 1.2 0 0 1 .375-.875 1.2 1.2 0 0 1 .875-.375h7.52l4.563 4.562v10.854a1.2 1.2 0 0 1-.375.875 1.2 1.2 0 0 1-.875.375H1.582ZM8.478 5.792V1.917H1.582v14.166h10.833V5.792H8.478Z"
             />
           </svg>
-          <span class="adev-nav-item__label">Docs</span>
+          <span class="adev-nav-item__label">문서</span>
         </a>
       </li>
 
@@ -244,7 +251,7 @@
               d="m5.668 10-5-5 5-5 1.187 1.188L3.022 5.02l3.813 3.812L5.668 10Zm6.667 0-1.188-1.188L14.98 4.98l-3.812-3.812L12.335 0l5 5-5 5Z"
             />
           </svg>
-          <span class="adev-nav-item__label">Tutorials</span>
+          <span class="adev-nav-item__label">튜토리얼</span>
         </a>
       </li>
 
@@ -259,7 +266,7 @@
               d="M450.001-611.691v-32.386q-39.385-9.923-64.692-41.897-25.308-31.975-25.308-74.025 0-49.922 35.038-84.96 35.039-35.038 84.961-35.038t84.961 35.038q35.038 35.038 35.038 84.96 0 42.05-25.308 74.025-25.307 31.974-64.692 41.897v32.386l273.846 157.538q17.173 9.912 26.663 26.582 9.491 16.671 9.491 36.495v62.152q0 19.824-9.491 36.495-9.49 16.67-26.663 26.582L516.154-111.771q-17.203 9.846-36.217 9.846t-36.091-9.846L176.155-265.847q-17.173-9.912-26.663-26.582-9.491-16.671-9.491-36.495v-62.152q0-19.824 9.491-36.495 9.49-16.67 26.663-26.582l273.846-157.538Zm-6.155 364.537L200-387.461v58.537q0 3.078 1.539 5.962 1.538 2.885 4.615 4.808l267.692 154.692q3.077 1.923 6.154 1.923t6.154-1.923l267.692-154.692q3.077-1.923 4.615-4.808 1.539-2.884 1.539-5.962v-58.537L516.154-247.154q-17.203 9.847-36.217 9.847t-36.091-9.847Zm6.155-162.847V-542.77L250.46-427.691l223.386 128.846q3.077 1.924 6.154 1.924t6.154-1.924l223.001-128.846L509.999-542.77v132.769h-59.998ZM480-699.999q25 0 42.5-17.5t17.5-42.5q0-25-17.5-42.5t-42.5-17.5q-25 0-42.5 17.5t-17.5 42.5q0 25 17.5 42.5t42.5 17.5Zm-2.308 538.46Z"
             />
           </svg>
-          <span class="adev-nav-item__label">Playground</span>
+          <span class="adev-nav-item__label">플레이그라운드</span>
         </a>
       </li>
 
@@ -280,7 +287,7 @@
               d="M3.645 13.792h6.708v-1.25H3.645v1.25Zm0-3.542h6.708V9H3.645v1.25Zm-2.063 7.083a1.2 1.2 0 0 1-.875-.375 1.2 1.2 0 0 1-.375-.875V1.917a1.2 1.2 0 0 1 .375-.875 1.2 1.2 0 0 1 .875-.375h7.52l4.563 4.562v10.854a1.2 1.2 0 0 1-.375.875 1.2 1.2 0 0 1-.875.375H1.582ZM8.478 5.792V1.917H1.582v14.166h10.833V5.792H8.478Z"
             />
           </svg>
-          <span class="adev-nav-item__label">Reference</span>
+          <span class="adev-nav-item__label">레퍼런스</span>
         </a>
       </li>
     </ul>
@@ -293,7 +300,7 @@
           type="button"
           [cdkMenuTriggerFor]="socialMiniMenu"
           [cdkMenuPosition]="miniMenuPositions"
-          aria-label="Open social media links"
+          aria-label="소셜 미디어 링크 열기"
           (cdkMenuClosed)="closeMenu()"
           (cdkMenuOpened)="openMenu('social')"
         >
@@ -306,7 +313,7 @@
               <a
                 [href]="YOUTUBE"
                 cdkMenuItem
-                title="Angular YouTube channel"
+                title="Angular YouTube 채널"
                 target="_blank"
                 rel="noopener"
               >
@@ -328,7 +335,7 @@
               <a
                 [href]="X"
                 cdkMenuItem
-                title="Angular X (formerly Twitter) profile"
+                title="Angular X (구 Twitter) 프로필"
                 target="_blank"
                 rel="noopener"
               >
@@ -350,7 +357,7 @@
               <a
                 [href]="BLUESKY"
                 cdkMenuItem
-                title="Angular Bluesky profile"
+                title="Angular Bluesky 프로필"
                 target="_blank"
                 rel="noopener"
               >
@@ -362,8 +369,9 @@
                   fill="none"
                   xmlns="http://www.w3.org/2000/svg"
                 >
-			<path
-				d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z"></path>
+                  <path
+                    d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z"
+                  ></path>
                 </svg>
               </a>
             </li>
@@ -371,7 +379,7 @@
               <a
                 [href]="MEDIUM"
                 cdkMenuItem
-                title="Angular Medium blog"
+                title="Angular Medium 블로그"
                 target="_blank"
                 rel="noopener"
               >
@@ -402,21 +410,27 @@
               </a>
             </li>
             <li>
-              <a [href]="DISCORD" cdkMenuItem title="Angular Discord" target="_blank" rel="noopener">
+              <a
+                [href]="DISCORD"
+                cdkMenuItem
+                title="Angular Discord"
+                target="_blank"
+                rel="noopener"
+              >
                 <!-- Discord Icon -->
                 <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 127.14 96.36"
-                    width="20"
-                    height="20"
-                    fill="none"
-                    >
-                    <path
-                      fill-rule="evenodd"
-                      clip-rule="evenodd"
-                      d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,110.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
-                    />
-                  </svg>
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 127.14 96.36"
+                  width="20"
+                  height="20"
+                  fill="none"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0110.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
+                  />
+                </svg>
               </a>
             </li>
           </ul>
@@ -428,18 +442,22 @@
           type="button"
           [cdkMenuTriggerFor]="themeMiniMenu"
           [cdkMenuPosition]="miniMenuPositions"
-          aria-label="Open theme picker"
+          aria-label="테마 선택기 열기"
           (cdkMenuClosed)="closeMenu()"
           (cdkMenuOpened)="openMenu('theme-picker')"
         >
           <docs-icon role="presentation">
-            @switch (theme()) { @case ('light') {
-            {{ 'light_mode' }}
-            } @case ('dark') {
-            {{ 'dark_mode' }}
-            } @case ('auto') {
-            {{ 'routine' }}
-            } }
+            @switch (theme()) {
+              @case ('light') {
+                {{ 'light_mode' }}
+              }
+              @case ('dark') {
+                {{ 'dark_mode' }}
+              }
+              @case ('auto') {
+                {{ 'routine' }}
+              }
+            }
           </docs-icon>
         </button>
 
@@ -450,21 +468,16 @@
                 type="button"
                 cdkMenuItem
                 (click)="setTheme('auto')"
-                aria-label="Set default system theme"
+                aria-label="시스템 기본 테마"
               >
                 <docs-icon class="docs-icon_high-contrast">routine</docs-icon>
-                <span>System</span>
+                <span>시스템</span>
               </button>
             </li>
             <li>
-              <button
-                type="button"
-                cdkMenuItem
-                (click)="setTheme('dark')"
-                aria-label="Set dark theme"
-              >
+              <button type="button" cdkMenuItem (click)="setTheme('dark')" aria-label="다크 테마">
                 <docs-icon class="docs-icon_high-contrast">dark_mode</docs-icon>
-                <span>Dark</span>
+                <span>다크</span>
               </button>
             </li>
             <li>
@@ -472,10 +485,10 @@
                 type="button"
                 cdkMenuItem
                 (click)="setTheme('light')"
-                aria-label="Set light theme"
+                aria-label="라이트 테마"
               >
                 <docs-icon class="docs-icon_high-contrast">light_mode</docs-icon>
-                <span>Light</span>
+                <span>라이트</span>
               </button>
             </li>
           </ul>
@@ -486,15 +499,16 @@
 
   <!-- Tablet: Second horizontal nav layer which opens the secondary nav -->
   @if (activeRouteItem() === DOCS_ROUTE || activeRouteItem() === REFERENCE_ROUTE) {
-  <div class="adev-secondary-tablet-bar">
-    <button type="button" (click)="openMobileNav($event)">
-      <docs-icon class="docs-icon_high-contrast">menu</docs-icon>
-      @if (activeRouteItem() === DOCS_ROUTE) {
-      <span>Docs</span>
-      } @if (activeRouteItem() === REFERENCE_ROUTE) {
-      <span>API</span>
-      }
-    </button>
-  </div>
+    <div class="adev-secondary-tablet-bar">
+      <button type="button" (click)="openMobileNav($event)">
+        <docs-icon class="docs-icon_high-contrast">menu</docs-icon>
+        @if (activeRouteItem() === DOCS_ROUTE) {
+          <span>문서</span>
+        }
+        @if (activeRouteItem() === REFERENCE_ROUTE) {
+          <span>API</span>
+        }
+      </button>
+    </div>
   }
 </div>
diff --git a/adev/src/app/editor/README.md b/adev/src/app/editor/README.md
index d42ae25f937b..e458bb540a64 100644
--- a/adev/src/app/editor/README.md
+++ b/adev/src/app/editor/README.md
@@ -1,21 +1,21 @@
-# EmbeddedEditor components, services and functionality
+# EmbeddedEditor 구성 요소, 서비스 및 기능
 
-- [Scenarios](#scenarios)
-  - [Loading a project](#loading-a-project)
-  - [Updating the code](#updating-the-code)
-  - [Creating a new file](#creating-a-new-file)
-  - [Deleting a file](#deleting-a-file)
-  - [Switching a project](#switching-a-project)
-- [Components and services](#components-and-services)
+- [시나리오](#scenarios)
+  - [프로젝트 로딩](#loading-a-project)
+  - [코드 업데이트](#updating-the-code)
+  - [새 파일 생성](#creating-a-new-file)
+  - [파일 삭제](#deleting-a-file)
+  - [프로젝트 전환](#switching-a-project)
+- [구성 요소 및 서비스](#components-and-services)
 
   - [EmbeddedEditor](#EmbeddedEditor)
   - [CodeEditor](#CodeEditor)
     - [CodeMirrorEditor](#CodeMirrorEditor)
-      - [TypeScript Web Worker](#typescript-web-worker)
-  - [Preview](#Preview)
-  - [Terminal](#Terminal)
+      - [TypeScript 웹 워커](#typescript-web-worker)
+  - [미리보기](#Preview)
+  - [터미널](#Terminal)
     - [InteractiveTerminal](#InteractiveTerminal)
-    - [Console](#Console)
+    - [콘솔](#Console)
   - [NodeRuntimeSandbox](#NodeRuntimeSandbox)
     - [NodeRuntimeState](#NodeRuntimeState)
   - [EmbeddedTutorialManager](#EmbeddedTutorialManager)
@@ -24,184 +24,184 @@
   - [AlertManager](#AlertManager)
   - [TypingsLoader](#TypingsLoader)
 
-## External libraries
+## 외부 라이브러리
 
 - [WebContainers API](https://webcontainers.io/)
 - [CodeMirror](https://codemirror.net/)
 - [@typescript/vfs](https://www.npmjs.com/package/@typescript/vfs)
 - [Xterm.js](https://xtermjs.org/)
 
-## Notes
+## 노트
 
-- See [scripts/tutorials/README.md](/scripts/tutorials/README.md) for more information about the tutorials script.
-- See [adev/src/content/tutorials/README.md](/adev/src/content/tutorials/README.md) for more information about the tutorials content.
+- 튜토리얼 스크립트에 대한 자세한 정보는 [scripts/tutorials/README.md](/scripts/tutorials/README.md)를 참조하세요.
+- 튜토리얼 콘텐츠에 대한 자세한 정보는 [adev/src/content/tutorials/README.md](/adev/src/content/tutorials/README.md)를 참조하세요.
 
 ---
 
-## Scenarios
+## 시나리오
 
-### Loading a project
+### 프로젝트 로딩
 
-1. The page responsible for the embedded editor lazy loads the [`EmbeddedEditor`](./embedded-editor.component.ts) component and the [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts), then triggers the initialization of all components and services. The embedded editor is available in the following pages:
+1. EmbeddedEditor를 위한 페이지는 [`EmbeddedEditor`](./embedded-editor.component.ts) 구성 요소와 [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts)를 지연 로딩하고, 모든 구성 요소 및 서비스의 초기화를 트리거합니다. EmbeddedEditor는 다음 페이지에서 사용할 수 있습니다:
 
-   - homepage: https://angular.dev
-   - playground: https://angular.dev/playground
-   - tutorial pages: https://angular.dev/tutorials
+   - 홈페이지: https://angular.dev
+   - 플레이그라운드: https://angular.dev/playground
+   - 튜토리얼 페이지: https://angular.dev/tutorials
 
-2. The project assets are fetched by the [`EmbeddedTutorialManager`](./embedded-tutorial-manager.service.ts). Meanwhile:
+2. 프로젝트 자산은 [`EmbeddedTutorialManager`](./embedded-tutorial-manager.service.ts)에 의해 가져옵니다. 이 동안:
 
-   - The code editor is initialized
-   - The code editor initializes the TypeScript Web Worker, which initializes the "default file system map" using TypeScript's CDN.
-   - The WebContainer is initialized
-   - The terminal is initialized
+   - 코드 편집기가 초기화됩니다
+   - 코드 편집기는 TypeScript 웹 워커를 초기화하며, 이는 TypeScript의 CDN을 사용해 "기본 파일 시스템 맵"을 초기화합니다.
+   - WebContainer가 초기화됩니다
+   - 터미널이 초기화됩니다
 
-3. The tutorial source code is mounted in the `WebContainer`'s filesystem by the [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts)
-4. The tutorial project dependencies are installed by the [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts).
-5. The development server is started by the [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts) and the types are loaded by the [`TypingsLoader`](./typings-loader.service.ts) service.
-6. The preview is loaded with the URL provided by the WebContainer API after the development server is started.
-7. The project is ready.
+3. 튜토리얼 소스 코드는 [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts)에 의해 `WebContainer`의 파일 시스템에 마운트됩니다.
+4. 튜토리얼 프로젝트의 종속성이 [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts)에 의해 설치됩니다.
+5. 개발 서버는 [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts)에 의해 시작되며, 타입은 [`TypingsLoader`](./typings-loader.service.ts) 서비스에 의해 로드됩니다.
+6. 미리보기는 개발 서버가 시작된 후 WebContainer API에서 제공하는 URL로 로드됩니다.
+7. 프로젝트가 준비됩니다.
 
-### Updating the code
+### 코드 업데이트
 
-1. The user update the code in the code editor.
-2. The code editor state is updated on real time, without debouncing so that the user can see the changes in the code editor and CodeMirror can handle the changes accordingly.
-3. At the same time, the changes are sent to the TypeScript web worker to provide diagnostics, autocomplete and type features as soon as possible.
-4. The code changes are debounced to be written in the WebContainer filesystem by the [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts).
-5. After the debounce time is reached, the code changes are written in the WebContainer filesystem by the [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts), then the user can see the changes in the preview.
+1. 사용자는 코드 편집기에서 코드를 업데이트합니다.
+2. 코드 편집기 상태는 실시간으로 업데이트되며, 사용자에게 코드 편집기에서 변경 사항을 확인할 수 있도록 하며, CodeMirror는 변경 사항을 적절히 처리합니다.
+3. 동시에, 변경 사항은 TypeScript 웹 워커에 전달되어 가능한 한 빨리 진단, 자동 완완 및 타입 기능을 제공합니다.
+4. 코드 변경 사항은 [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts)에 의해 WebContainer 파일 시스템에 기록되기 위해 디바운스됩니다.
+5. 디바운스 시간이 초과되면 코드 변경 사항이 [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts)에 의해 WebContainer 파일 시스템에 기록되며, 사용자는 미리보기에서 변경 사항을 확인할 수 있습니다.
 
-### Creating a new file
+### 새 파일 생성
 
-1. The user clicks on the new file button.
-2. The new file tab is opened.
-3. The user types the new file name.
-4. If the file name is valid, the file is created in the WebContainer filesystem by the [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts).
+1. 사용자가 새 파일 버튼을 클릭합니다.
+2. 새 파일 탭이 열립니다.
+3. 사용자가 새 파일 이름을 입력합니다.
+4. 파일 이름이 유효하면, [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts)에 의해 WebContainer 파일 시스템에서 파일이 생성됩니다.
 
-   - `..` is disallowed in the file name to prevent users to create files outside the `src` directory.
+   - `..`는 사용자들이 `src` 디렉토리 외부에 파일을 생성하지 못하도록 파일 이름에 허용되지 않습니다.
 
-5. The file is added to the TypeScript virtual file system, allowing the TypeScript web worker to provide diagnostics, autocomplete and type features for the new file. Also, exports from the new file are available in other files.
-6. The new file is added as the last tab in the code editor and the new file can be edited.
+5. 파일은 TypeScript 가상 파일 시스템에 추가되어 새로운 파일에 대한 진단, 자동 완완 및 타입 기능을 제공할 수 있게 됩니다. 또한, 새로운 파일에서의 내보내기는 다른 파일에서 사용할 수 있습니다.
+6. 새로운 파일은 코드 편집기에서 마지막 탭으로 추가되며, 새 파일은 편집할 수 있습니다.
 
-Note: If the new file name matches a file that already exists but is hidden in the code editor, the content for that file will show up in the created file. An example for a file that always exists is `index.html`.
+노트: 새 파일 이름이 이미 존재하지만 코드 편집기에서 숨겨진 파일과 일치할 경우, 해당 파일의 콘텐츠가 생성된 파일에 표시됩니다. 항상 존재하는 파일의 예는 `index.html`입니다.
 
-### Deleting a file
+### 파일 삭제
 
-1. The user clicks on the delete file button.
-2. The file is deleted from the WebContainer filesystem by the [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts).
-3. The file is removed from the TypeScript virtual file system.
-4. The file is removed from the code editor tabs.
+1. 사용자가 파일 삭제 버튼을 클릭합니다.
+2. 파일은 [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts)에 의해 WebContainer 파일 시스템에서 삭제됩니다.
+3. 파일은 TypeScript 가상 파일 시스템에서 제거됩니다.
+4. 파일은 코드 편집기 탭에서 제거됩니다.
 
-Note: Some files can't be deleted to prevent users to break the app, being `src/main.ts`and `src/index.html`
+노트: 일부 파일은 사용자가 애플리케이션을 파괴하는 것을 방지하기 위해 삭제할 수 없습니다. 해당 파일은 `src/main.ts` 및 `src/index.html`입니다.
 
-### Switching a project
+### 프로젝트 전환
 
-The embedded editor considers a project change when the embedded editor was already initialized and the user changes the page in the following scenarios:
+EmbeddedEditor는 EmbeddedEditor가 이미 초기화된 상태에서 사용자가 다음 시나리오에서 페이지를 변경할 때 프로젝트 변경을 고려합니다:
 
-- Navigating through tutorial steps
-- Going from the homepage after the embedded editor is initialized to the playground
-- Going from a tutorial page to the playground
-- Going from a tutorial page to the homepage
-- Going from the playground to the homepage
+- 튜토리얼 단계를 탐색할 때
+- EmbeddedEditor가 초기화된 후 홈페이지에서 플레이그라운드로 이동할 때
+- 튜토리얼 페이지에서 플레이그라운드로 이동할 때
+- 튜토리얼 페이지에서 홈페이지로 이동할 때
+- 플레이그라운드에서 홈페이지로 이동할 때
 
-When a project change is detected, the [`EmbeddedTutorialManager`](./embedded-tutorial-manager.service.ts) emits the `tutorialChanged` observable, which is listened in multiple sub-components and services, then each component/service performs the necessary operations to switch the project.
+프로젝트 변경이 감지되면, [`EmbeddedTutorialManager`](./embedded-tutorial-manager.service.ts)는 `tutorialChanged` 옵저버블을 방출하며, 이는 여러 하위 구성 요소 및 서비스에서 수신 대기되고, 각 구성 요소/서비스는 프로젝트 전환에 필요한 작업을 수행합니다.
 
-The following steps are executed on project change:
+프로젝트 변경 시 다음 단계가 실행됩니다:
 
-1. The new project files are fetched by the [`EmbeddedTutorialManager`](./embedded-tutorial-manager.service.ts).
-2. The new project files are mounted in the WebContainer filesystem.
-3. The TypeScript virtual filesystem is updated with the new files and contents.
-4. The previous project and new project files are compared.
-   1. Files that are not available in the new project are deleted from the WebContainer filesystem.
-   2. Files that have the same path and name have their content replaced on the previous step when the files are mounted.
-5. The previous project dependencies are compared with the new project dependencies.
-   1. If there are differences, a `npm install` is triggered, hiding the preview and going to the install loading step.
-   2. If there are no differences, the project is ready.
-6. Some states are reset, for example the "reveal answer" state if the previous project was in the "reveal answer" state.
+1. 새로운 프로젝트 파일은 [`EmbeddedTutorialManager`](./embedded-tutorial-manager.service.ts)에 의해 가져옵니다.
+2. 새로운 프로젝트 파일은 WebContainer 파일 시스템에 마운트됩니다.
+3. TypeScript 가상 파일 시스템은 새로운 파일 및 내용으로 업데이트됩니다.
+4. 이전 프로젝트와 새로운 프로젝트 파일이 비교됩니다.
+   1. 새로운 프로젝트에 없는 파일은 WebContainer 파일 시스템에서 삭제됩니다.
+   2. 같은 경로와 이름을 가진 파일은 파일이 마운트 될 때 이전 단계에서 그 콘텐츠가 대체됩니다.
+5. 이전 프로젝트 종속성이 새로운 프로젝트 종속성과 비교됩니다.
+   1. 차이가 있으면, `npm install`이 실행되어 미리보기를 숨기고 설치 로딩 단계로 진행됩니다.
+   2. 차이가 없으면, 프로젝트가 준비됩니다.
+6. 일부 상태가 리셋되며, 예를 들어 이전 프로젝트가 "답안 표시" 상태였던 경우 "답안 표시" 상태가 리셋됩니다.
 
-## Components and services
+## 구성 요소 및 서비스
 
 ### [`EmbeddedEditor`](./embedded-editor.component.ts)
 
-The embedded editor is the parent component that holds all the components and services that compose the embedded editor.
+EmbeddedEditor는 EmbeddedEditor를 구성하는 모든 구성 요소 및 서비스를 보유하는 부모 구성 요소입니다.
 
 #### [`CodeEditor`](./code-editor/code-editor.component.ts)
 
-The component that holds the code editor view and the code editor state.
+코드 편집기 뷰와 코드 편집기 상태를 보유하는 구성 요소입니다.
 
 ##### [`CodeMirrorEditor`](./code-editor/code-mirror-editor.service.ts)
 
-[CodeMirror](https://codemirror.net/) is the library used to handle the code editor.
+[CodeMirror](https://codemirror.net/)는 코드 편집기를 다루기 위해 사용되는 라이브러리입니다.
 
-The `CodeMirrorEditor` service manages the CodeMirror instance and all the interactions with the library used to handle the code editor.
+`CodeMirrorEditor` 서비스는 CodeMirror 인스턴스와 코드 편집기를 다루기 위해 사용되는 모든 상호작용을 관리합니다.
 
-- handle the file edits and the CodeMirror view and state
-- handle the current project files in the code editor
-- handle the file creations and deletions
-- handle the file changes
-- handle all the CodeMirror specific events and extensions
+- 파일 편집 및 CodeMirror 뷰와 상태 처리
+- 코드 편집기에서 현재 프로젝트 파일 관리
+- 파일 생성 및 삭제 처리
+- 파일 변경 처리
+- 모든 CodeMirror 특화 이벤트와 확장을 처리
 
-###### [TypeScript Web Worker](./code-editor/workers/typescript-vfs.worker.ts)
+###### [TypeScript 웹 워커](./code-editor/workers/typescript-vfs.worker.ts)
 
-The TypeScript features are provided by the TypeScript web worker, that is initialized by the `CodeMirrorEditor` service.
+TypeScript 기능은 `CodeMirrorEditor` 서비스에 의해 초기화된 TypeScript 웹 워커에 의해 제공됩니다.
 
-The TypeScript web worker uses `@typescript/vfs` and the TypeScript language service to provide diagnostics, autocomplete and type features.
+TypeScript 웹 워커는 `@typescript/vfs` 및 TypeScript 언어 서비스를 사용하여 진단, 자동 완완 및 타입 기능을 제공합니다.
 
 #### [`Preview`](./preview/preview.component.ts)
 
-The preview component manages the `iframe` responsible for displaying the tutorial project preview, with the URL provided by the WebContainer API after the development server is started.
+미리보기 구성 요소는 튜토리얼 프로젝트 미리보기를 표시하는 책임이 있는 `iframe`을 관리하며, 개발 서버가 시작된 후 WebContainer API에서 제공되는 URL을 사용합니다.
 
-While the project is being initialized, the preview displays the loading state.
+프로젝트가 초기화되는 동안, 미리보기는 로딩 상태를 표시합니다.
 
 #### [`Terminal`](./terminal/terminal.component.ts)
 
-[Xterm.js](https://xtermjs.org/) is the library used to handle the terminals.
+[Xterm.js](https://xtermjs.org/)는 터미널을 다루기 위해 사용되는 라이브러리입니다.
 
-The terminal component handles the Xterm.js instance for the console and for the interactive terminal.
+터미널 구성 요소는 콘솔을 위한 Xterm.js 인스턴스와 인터랙티브 터미널을 처리합니다.
 
 ##### [`InteractiveTerminal`](./terminal/interactive-terminal.ts)
 
-The interactive terminal is the terminal where the user can interact with the terminal and run commands, supporting only commands for the Angular CLI.
+인터랙티브 터미널은 사용자가 터미널과 상호작용하고 명령어를 실행할 수 있는 터미널로 Angular CLI용 명령어만 지원합니다.
 
-##### Console
+##### 콘솔
 
-The console displays the output for `npm install` and `ng serve`.
+콘솔은 `npm install` 및 `ng serve`의 출력을 표시합니다.
 
 #### [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts)
 
-Responsible for managing the WebContainer instance and all communication with its API. This service handles:
+WebContainer 인스턴스와 API 간의 모든 통신을 관리하는 책임이 있는 서비스입니다. 이 서비스는 다음을 처리합니다:
 
-- the WebContainer instance
-- all Node.js scripts
-- the WebContainer filesystem, mounting the tutorial project files, writing new content, deleting and creating files.
-- the terminal session, reading and processing user inputs.
-- the tutorial project dependencies, installing the dependencies.
-- the processes running inside the WebContainer, being the npm scripts to install the dependencies, run the development server and the user inputs for the `ng` CLI.
+- WebContainer 인스턴스
+- 모든 Node.js 스크립트
+- WebContainer 파일 시스템, 튜토리얼 프로젝트 파일을 마운트하고 새로운 내용을 기록하고, 파일을 삭제 및 생성합니다.
+- 터미널 세션, 사용자 입력을 읽고 처리합니다.
+- 튜토리얼 프로젝트 종속성, 종속성을 설치합니다.
+- WebContainer 내부에서 실행되는 프로세스, 종속성을 설치하고 개발 서버를 실행하며 사용자의 입력을 `ng` CLI에 전달합니다.
 
 ##### [`NodeRuntimeState`](./node-runtime-state.service.ts)
 
-Manages the [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts) loading and error state.
+[`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts)의 로딩 및 오류 상태를 관리합니다.
 
 #### [`EmbeddedTutorialManager`](./embedded-tutorial-manager.service.ts)
 
-Manages the tutorial assets, being responsible for fetching the tutorial source code and metadata.
+튜토리얼 자산을 관리하며, 튜토리얼 소스 코드와 메타데이터를 가져오는 책임이 있습니다.
 
-The source code is mounted in the WebContainer filesystem by the [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts).
+소스 코드는 [`NodeRuntimeSandbox`](./node-runtime-sandbox.service.ts)에 의해 WebContainer 파일 시스템에 마운트됩니다.
 
-The metadata is used to manage the project, handle the project changes and the user interactivity with the app.
+메타데이터는 프로젝트 관리, 프로젝트 변경 처리 및 사용자와 애플리케이션 간의 상호작용을 처리하는 데 사용됩니다.
 
-This service also handles the reveal answer and reset reveal answer feature.
+이 서비스는 또한 답안 표시 및 답안 표시 재설정 기능을 처리합니다.
 
 #### [`EditorUiState`](./editor-ui-state.service.ts)
 
-Manages the editor UI state, being responsible for handling the user interactions with the editor tabs, switching between the preview, the terminal and the console.
+편집기 UI 상태를 관리하며, 편집기 탭 간의 사용자 상호작용을 처리하고 미리보기, 터미널 및 콘솔 간의 전환을 담당합니다.
 
 #### [`DownloadManager`](./download-manager.service.ts)
 
-Responsible for handling the download button in the embedded editor, fetching the tutorial project files and generating a zip file with the project content.
+EmbeddedEditor에서 다운로드 버튼을 처리하는 책임이 있으며, 튜토리얼 프로젝트 파일을 가져오고 프로젝트 내용을 포함하는 zip 파일을 생성합니다.
 
 #### [`AlertManager`](./alert-manager.service.ts)
 
-Manage the alerts displayed in the embedded editor, being the out of memory alert when multiple tabs are opened, and unsupported environments alerts.
+EmbeddedEditor에서 표시되는 알림을 관리하며, 여러 탭이 열린 경우 메모리 부족 경고 및 지원되지 않는 환경 경고를 포함합니다.
 
 #### [`TypingsLoader`](./typings-loader.service.ts)
 
-Manages the types definitions for the code editor.
+코드 편집기를 위한 타입 정의를 관리합니다.
\ No newline at end of file
diff --git a/adev/src/app/editor/preview/preview-error.component.html b/adev/src/app/editor/preview/preview-error.component.html
index 88b6c773f8cc..8446e8ece337 100644
--- a/adev/src/app/editor/preview/preview-error.component.html
+++ b/adev/src/app/editor/preview/preview-error.component.html
@@ -1,23 +1,23 @@
 <div class="adev-preview-error docs-light-mode docs-mini-scroll-track">
   @if (error()?.type === ErrorType.UNSUPPORTED_BROWSER_ENVIRONMENT) {
     @if (isIos) {
-      <p>Open angular.dev on desktop to code in your browser.</p>
+      <p>코드를 브라우저에서 실행하려면 데스크톱에서 angular.dev를 열어주세요.</p>
     }
   } @else if (error()?.type === ErrorType.COOKIES || error()?.type === ErrorType.UNKNOWN) {
     <p>
-      We couldn't start the tutorial app. Please ensure third party cookies are enabled for this
-      site.
+      튜토리얼 앱을 시작할 수 없습니다. 이 사이트에서 서드파티 쿠키가 활성화되어 있는지
+      확인해주세요.
     </p>
   } @else if (error()?.type === ErrorType.OUT_OF_MEMORY) {
     <p>
-      We couldn't start the tutorial app because your browser is out of memory. To free up memory,
-      close angular.dev tutorials in other tabs or windows, and refresh the page.
+      브라우저의 메모리가 부족하여 튜토리얼 앱을 시작할 수 없습니다. 메모리를 확보하려면 다른 탭이나
+      창에서 실행 중인 angular.dev 튜토리얼을 닫고 페이지를 새로고침해주세요.
     </p>
   }
 
   @if (error()?.message) {
     <small>
-      The error message is:
+      오류 메시지:
       <code>{{ error()!.message }}</code>
     </small>
   }
diff --git a/adev/src/app/environment.ts b/adev/src/app/environment.ts
index 30f0d78db304..895e33ed9e84 100644
--- a/adev/src/app/environment.ts
+++ b/adev/src/app/environment.ts
@@ -15,5 +15,5 @@ export default {
     apiKey: 'dfca7ed184db27927a512e5c6668b968',
     indexName: 'angular_v17',
   },
-  googleAnalyticsId: 'G-XB6NEVW32B',
+  googleAnalyticsId: 'G-42J4L8B4YZ',
 };
diff --git a/adev/src/app/features/home/animation/README.md b/adev/src/app/features/home/animation/README.md
index af68e389fc5b..8dea868c0c5b 100644
--- a/adev/src/app/features/home/animation/README.md
+++ b/adev/src/app/features/home/animation/README.md
@@ -1,14 +1,14 @@
 # `Animation` API
 
-The `Animation` class provides a simplistic interface for creating and processing CSS-based animations. In essence, it represents a CSS animation player.
+`Animation` 클래스는 CSS 기반 애니메이션을 생성하고 처리하는 간단한 인터페이스를 제공합니다. 본질적으로 이는 CSS 애니메이션 플레이어를 나타냅니다.
 
 ## API
 
-Anyone capable of writing CSS, and a certain dose of creativity, should be able to create animations with the `Animation` API.
+CSS를 작성할 수 있고, 약간의 창의성이 있는 누구나 `Animation` API로 애니메이션을 생성할 수 있어야 합니다.
 
 ### Layers
 
-To start, you need to divide your animation template into layers that make logical sense. These layers should use the `AnimationLayerDirective` which requires a mandatory `layerId` property to be set. The layer ID should be unique for the `Animation` instance.
+먼저 애니메이션 템플릿을 논리적으로 의미 있는 레이어로 나누어야 합니다. 이러한 레이어는 필수 `layerId` 속성이 설정된 `AnimationLayerDirective`를 사용해야 합니다. 레이어 ID는 `Animation` 인스턴스에 대해 고유해야 합니다.
 
 ```html
 <div adevAnimationLayer layerId="layer-1">
@@ -19,14 +19,14 @@ To start, you need to divide your animation template into layers that make logic
 </div>
 ```
 
-The layers should be styled as normal elements/components in the animation host component stylesheet. These styles will act as the initial animation styles.
+레이어는 애니메이션 호스트 컴포넌트 스타일시트의 일반 요소/컴포넌트로서 스타일이 적용되어야 합니다. 이러한 스타일은 초기 애니메이션 스타일로 작용합니다.
 
 > [!CAUTION]
-> Do not style elements via the `style` attribute, if you plan to animate them. Stale styles are removed by the animation processor which means that any initial styles set via `style` will be cleared as well.
+> 애니메이션을 적용할 계획이라면 `style` 속성을 통해 요소에 스타일을 적용하지 마십시오. 오래된 스타일은 애니메이션 프로세서에 의해 제거되므로 `style`을 통해 설정된 초기 스타일도 제거됩니다.
 
 ### Creating an `Animation` instance
 
-To create a new animation instance, you should use the `AnimationCreatorService` service in your animation host component as follows:
+새 애니메이션 인스턴스를 생성하려면 애니메이션 호스트 컴포넌트에서 `AnimationCreatorService` 서비스를 사용해야 합니다. 다음과 같이 사용할 수 있습니다:
 
 ```typescript
 class AnimationHost implements AfterViewInit {
@@ -35,7 +35,7 @@ class AnimationHost implements AfterViewInit {
 
   constructor() {
     afterNextRender({ read: () => {
-      // The layers must be provided
+      // 레이어는 제공되어야 합니다
       const animation = this.animationCreator.createAnimation(this.layers());
       // ...
     }});
@@ -45,29 +45,29 @@ class AnimationHost implements AfterViewInit {
 
 ### Definition
 
-After you create an `Animation` instance, you have to provide your `AnimationDefinition` to the `define()` method:
+`Animation` 인스턴스를 생성한 후에는 `define()` 메서드에 `AnimationDefinition`을 제공해야 합니다:
 
 ```typescript
 animation.define(DEFINITION);
 ```
 
-The definition is where the actual animation is described. The API is very similar to CSS `@keyframes` where you provide start (`from`) and end (`to`) styles with the added extra that you now have control over the timing – when the animation processor should start applying the styles. Additionally, you have to specify the target element or layer in the following format:
+정의는 실제 애니메이션이 설명되는 곳입니다. API는 CSS `@keyframes`와 매우 유사하며 시작(`from`) 및 종료(`to`) 스타일을 제공하며, 추가로 애니메이션 프로세서가 언제 스타일을 적용해야 할지를 제어할 수 있습니다. 또한, 다음 형식으로 대상 요소 또는 레이어를 지정해야 합니다:
 
 ```
 <LAYER_ID> >> .<CLASS_NAME>
 ```
 
-The class name should be of an element within the layer. Accessing the layer directly without a specified element is supported as well (i.e. just use `<LAYER_ID>`). Pay attention to the dot in front of the class name. Although, internally, we are using `getElementsByClassName` the dot is still there in case we want to add support for other types of selectors in the future which will require switching to `getQuerySelectorAll`, for instance. It also provides some form of differentiation between the layer ID and the class name.
+클래스 이름은 레이어 내의 요소에 해당해야 합니다. 지정된 요소 없이 레이어에 직접 접근하는 것도 지원됩니다(즉, `<LAYER_ID>`만 사용). 클래스 이름 앞에 있는 점에 주의하십시오. 내부적으로 `getElementsByClassName`를 사용하더라도, 향후 다른 유형의 선택자에 대한 지원을 추가할 수 있기 때문에 점이 존재합니다. 이는 레이어 ID와 클래스 이름 간의 구분을 제공합니다.
 
 > [!TIP]
-> You can achieve `@keyframes` percentage-based sequencing by combining multiple `AnimationRule`-s with different timings and change rates. The same can be said about CSS timing functions – you can achieve similar resemblance by animation rule composition (currently, only linear transitions are supported but that might change if there is a need for that).
+> 여러 개의 `AnimationRule`을 서로 다른 타이밍과 변경 비율로 결합하여 `@keyframes` 비율 기반 시퀀싱을 Achieve할 수 있습니다. CSS 타이밍 함수에 대해서도 동일하게 적용될 수 있습니다. 애니메이션 규칙 조합을 통해 유사성을 달성할 수 있습니다(현재는 선형 전환만 지원되지만 필요에 따라 변경될 수 있습니다).
 
 ```typescript
 const DEFINITION: AnimationDefinition = [
-  // Changes the color of the circle from black to white.
+  // 원의 색상을 검정색에서 흰색으로 변경합니다.
   {
     selector: `layer-1 >> .circle`,
-    timeframe: [3, 5], // Starts at the 3rd and ends at the 5th second.
+    timeframe: [3, 5], // 3초에서 시작하여 5초에 종료됩니다.
     from: {
       'background-color': '#000',
     },
@@ -78,17 +78,17 @@ const DEFINITION: AnimationDefinition = [
 ];
 ```
 
-It is suggested that the start styles match the initial styles of the element. Generally, it shouldn't matter but it can cause issues with the visualizations if you add `transition`-s to the animated CSS properties.
+시작 스타일은 요소의 초기 스타일과 일치하는 것이 좋습니다. 일반적으로는 문제가 되지 않지만 애니메이션된 CSS 속성에 `transition`을 추가하면 시각화에 문제가 발생할 수 있습니다.
 
 > [!IMPORTANT]
-> The `from` and `to` CSS properties should match.
+> `from` 및 `to` CSS 속성은 일치해야 합니다.
 
 #### Static rules
 
-If you want to apply certain styles at a concrete time, you should use a static animation rule instead:
+특정 스타일을 특정 시간에 적용하려면 대신 정적 애니메이션 규칙을 사용해야 합니다:
 
 ```typescript
-// Hides the layer at the 7th second.
+// 7초에 레이어를 숨깁니다.
 {
   selector: `layer-2`,
   at: 7,
@@ -99,62 +99,62 @@ If you want to apply certain styles at a concrete time, you should use a static
 ```
 
 > [!NOTE]
-> Static values like `display: none` will be applied immediately in the case of dynamic rules (`timeframe`). They can't be animated.
+> `display: none`과 같은 정적 값은 동적 규칙(`timeframe`)의 경우 즉시 적용됩니다. 이들은 애니메이션할 수 없습니다.
 
 ### Animation duration and animation control methods
 
-As mentioned in the description, the `Animation` is essentially a CSS player. Hence, you can use the control methods `play`, `pause`, `stop`, `seek` and `reset` to start and play with an animation after providing a definition.
+설명에서 언급했듯이, `Animation`은 본질적으로 CSS 플레이어입니다. 따라서 정의를 제공한 후 애니메이션을 시작하고 조작하기 위해 `play`, `pause`, `stop`, `seek`, `reset`과 같은 제어 메서드를 사용할 수 있습니다.
 
-Note that animation duration is automatically inferred by the rule that ends its execution last.
+애니메이션 기간은 실행을 마지막으로 종료하는 규칙에 의해 자동으로 추론됩니다.
 
 #### Plugins
 
-The plugin system allows for extending the animation functionality. Currently, there are two available plugins:
+플러그인 시스템은 애니메이션 기능을 확장할 수 있게 해줍니다. 현재 사용할 수 있는 두 개의 플러그인이 있습니다:
 
-- `AnimationPlayer` – Used for development. As the name suggests, it renders animation controls for ease of use.
-- `AnimationScrollHandler` – Enables page scroll control over the animation.
+- `AnimationPlayer` – 개발에 사용됩니다. 이름에서 알 수 있듯이 사용의 용이성을 위해 애니메이션 제어를 렌더링합니다.
+- `AnimationScrollHandler` – 애니메이션에 대한 페이지 스크롤 제어를 활성화합니다.
 
 ```typescript
 animation.addPlugin(new AnimationScrollHandler(...));
 ```
 
 > [!TIP]
-> You can create your own plugin by extending the `AnimationPlugin` interface.
+> `AnimationPlugin` 인터페이스를 확장하여 자신만의 플러그인을 만들 수 있습니다.
 
 > [!CAUTION]
-> Use `animation.dispose()` on host component destroy, if you add any plugins as they might result in memory leaks or stale UI leftovers.
+> 메모리 누수나 오래된 UI 잔여물로 인해 플러그인을 추가한 경우 호스트 컴포넌트가 파괴될 때 `animation.dispose()`를 사용하십시오.
 
 ##### Scroll handler plugin
 
-It's worth mentioning that the speed of animation progression in the context of the scroll handler plugin is determined by both the animation duration and the provided timestep (check `AnimationConfig` for detailed info). The timings in the definition merely act as a way to describe relative timing among the different animation rules not absolute time of execution.
+스크롤 핸들러 플러그인 맥락에서 애니메이션 진행 속도는 애니메이션 지속 시간과 제공된 타임스텝에 의해 결정된다는 점은 주목할 만합니다(자세한 정보는 `AnimationConfig`를 확인하십시오). 정의의 타이밍은 서로 다른 애니메이션 규칙 간의 상대적인 타이밍을 설명하는 방식으로 작용하며, 절대적인 실행 시간은 아닙니다.
 
-By default, the plugin will add a spacer to the host element that will be tall enough to match the whole animation duration. This means it's implied that the animation layers use `position: fixed`. You can disable the spacer and use an alternative layout if you desire.
+기본적으로 플러그인은 호스트 요소에 전체 애니메이션 지속 시간과 일치할 만큼 충분한 높이를 가진 스페이서를 추가합니다. 즉, 애니메이션 레이어가 `position: fixed`를 사용한다고 암시합니다. 스페이서를 비활성화하고 대체 레이아웃을 사용할 수 있습니다.
 
 > [!TIP]
-> Apply transitions, as part of the initial styles, to the animated properties when using the scroll handler. This might be needed since scrolling via mouse scroll wheel results in non-continuous `scrollY` which results in jagged animation.
+> 스크롤 핸들러를 사용할 때 애니메이션 속성의 초기 스타일의 일부분으로 전환을 적용하십시오. 마우스 스크롤 휠로 스크롤하면 비연속적인 `scrollY`가 발생하여 부드럽지 않은 애니메이션이 발생할 수 있습니다.
 
 ## Limitations
 
-There are certain limitations that come with the usage of the `Animation` API. Most of them are related to CSS property values parsing. So, it's crucial to understand that there are several data types – `numeric`, `transition`, `color` and `static` values. All values can be animated with the exclusion of `static` values. For example `display: block` is considered static (i.e. non-animatable). However, there are certain cases where the parser is unable to process a value that might be deemed animatable/continuous which will then be treated as static one. These cases are as follows:
+`Animation` API 사용과 관련하여 몇 가지 제한 사항이 있습니다. 대부분은 CSS 속성 값 파싱과 관련이 있습니다. 따라서 여러 데이터 유형이 존재한다는 것을 이해하는 것이 중요합니다 – `numeric`, `transition`, `color`, `static` 값. 모든 값은 `static` 값을 제외하고 애니메이션할 수 있습니다. 예를 들어 `display: block`은 정적 값으로 간주됩니다(즉, 애니메이션할 수 없음). 그러나 파서가 애니메이션 가능성 있는 값을 처리할 수 없는 특정 경우도 있으며, 이는 정적 값으로 처리됩니다. 이러한 경우는 다음과 같습니다:
 
-- _Parsing shorthand CSS properties like `border`_ – The animation processor won't be able to animate `1px solid red` <=> `20px solid red`, for example. In such cases, it is suggested to use the standard CSS properties that describe only the numeric part of the property, i.e. `border-width: 1px <=> 20px`.
-- _Only hex, `rgb` and `rgba` colors are supported_ – At this stage, color spaces like `hsl` or `lch`, for instance, are not supported.
-- _Not all transform functions are supported_ – You can check the list [here](https://github.com/angular/angular/blob/main/adev/src/app/features/home/animation/parser/css-value-parser.ts#L13). It's merely a preventative measure in case a new function is added to the standard that requires additional changes to the parser. You can try adding your desired function to the list and verifying if it works or not.
-- _`calc` and `var` (and probably more) are not supported_ – The parser is not fully CSS-spec-compliant. There are probably more CSS perks that won't be parsable but the current functionality should be sufficient enough for rich animations.
+- _`border`와 같은 축약 CSS 속성을 파싱할 경우_ – 애니메이션 프로세서는 `1px solid red` <=> `20px solid red`를 애니메이션할 수 없습니다. 이런 경우에는 속성의 숫자 부분만 설명하는 표준 CSS 속성을 사용하는 것이 좋습니다, 즉 `border-width: 1px <=> 20px`.
+- _오직 hex, `rgb`, `rgba` 색상만 지원됨_ – 현재 색상 공간인 `hsl` 또는 `lch`는 지원되지 않습니다.
+- _모든 변환 함수가 지원되는 것은 아님_ – 지원되는 함수 목록은 [여기](https://github.com/angular/angular/blob/main/adev/src/app/features/home/animation/parser/css-value-parser.ts#L13)에서 확인할 수 있습니다. 이는 새로운 함수가 표준에 추가되어 파서를 추가 변경이 필요할 경우의 예방 조치일 뿐입니다. 원하는 함수를 목록에 추가하여 작동하는지 검증할 수 있습니다.
+- _`calc`와 `var`(및 아마 더 많은 것들) 지원되지 않음_ – 파서는 완전한 CSS 사양을 준수하지 않습니다. 파서가 처리할 수 없는 더 많은 CSS 기능이 있을 수 있지만 현재 기능은 풍부한 애니메이션을 위한 충분한 기능을 제공해야 합니다.
 
-**Other limitations**
+**다른 제한 사항**
 
-- _Definition can't be changed dynamically_ – This means that you can't add additional layers or animation rules to the animation during its runtime.
-- _Number of animated elements_ – This is probably obvious but rendering a lot of elements and animating them can be computationally expensive and, respectively, degrade the user experience. For such animations, use HTML Canvas solutions.
+- _정의는 동적으로 변경할 수 없음_ – 즉, 애니메이션 실행 중에 추가 레이어나 애니메이션 규칙을 추가할 수 없습니다.
+- _애니메이션된 요소 수_ – 많은 요소를 렌더링하고 애니메이션하는 것은 계산 비용이 많이 들 수 있으며, 결과적으로 사용자 경험이 저하됩니다. 그러한 애니메이션에는 HTML Canvas 솔루션을 사용하십시오.
 
 ## How it works?
 
-The principle is simple: we calculate the value progression based on time progression (e.g. timeframe = [0, 4]; current time = 3s => progression = 75% => we apply 75% of the defined CSS property value span between `from` and `to` styles, unless the value is static). This happens for each frame via the `updateFrame` method that is called internally.
+원리는 간단합니다: 시간 진행에 따라 값 진행을 계산합니다(예: timeframe = [0, 4]; 현재 시간 = 3s => 진행 = 75% => `from` 및 `to` 스타일 간의 정의된 CSS 속성 값의 범위 중 75%를 적용합니다. 이는 정적 값이 아닌 경우에 해당합니다). 이는 내부적으로 호출되는 `updateFrame` 메서드를 통해 각 프레임에 대해 발생합니다.
 
-Other than that the different phases of `Animation` are:
+그 외에도 `Animation`의 다양한 단계는 다음과 같습니다:
 
-- Instantiation
-- Animation definition
-- Object reference extraction and validation; Property validation
-- Parsing of the animation definition to the internal data format (CSS value parsing happens here)
-- Value processing/calculations on play/seek/forward/back (i.e. frame update)
+- 인스턴스화
+- 애니메이션 정의
+- 객체 참조 추출 및 검증; 속성 검증
+- 애니메이션 정의를 내부 데이터 형식으로 파싱(여기서 CSS 값 파싱이 발생)
+- 재생/찾기/앞/뒤로의 값 처리/계산(i.e. 프레임 업데이트)
\ No newline at end of file
diff --git a/adev/src/app/features/home/components/home-animation/home-animation.component.html b/adev/src/app/features/home/components/home-animation/home-animation.component.html
index a599d9eefada..05873c7471d2 100644
--- a/adev/src/app/features/home/components/home-animation/home-animation.component.html
+++ b/adev/src/app/features/home/components/home-animation/home-animation.component.html
@@ -6,13 +6,13 @@
       class="adev-banner"
       target="_blank"
     >
-      <h1 tabindex="-1">Angular v19 is here!</h1>
-      <p class="adev-banner-cta">Read about our newest release.</p>
+      <h1 tabindex="-1">Angular v19가 출시되었습니다!</h1>
+      <p class="adev-banner-cta">최신 릴리스에 대해 자세히 알아보세요.</p>
     </a>
     <div class="learn-angular">
       <a [routerLink]="ctaLink" class="adev-cta">
-        <button class="docs-primary-btn" [attr.text]="'Learn Angular'" aria-label="Learn Angular">
-          Learn Angular
+        <button class="docs-primary-btn" [attr.text]="'Angular 배우기'" aria-label="Angular 배우기">
+          Angular 배우기
         </button>
       </a>
       <div class="adev-arrow"></div>
@@ -93,15 +93,16 @@ <h1 tabindex="-1">Angular v19 is here!</h1>
   } @else {
     <!-- UwU logo -->
     <div adevAnimationLayer layerId="uwu" class="uwu-layer layer">
-      <img src="assets/images/uwu.png" alt="Angular logo" />
+      <img src="assets/images/uwu.png" alt="Angular 로고" />
     </div>
   }
 
   <!-- Works at any scale -->
   <div adevAnimationLayer layerId="works-at-any-scale" class="works-at-any-scale-layer layer">
-    <h2>Works at any scale</h2>
+    <h2>어떤 규모에서도 적합한 프레임워크</h2>
     <p>
-      Angular lets you start small on a well-lit path and supports you as your team and apps grow.
+      Angular는 작지만 명확한 기준과 높은 품질에서 시작할 수 있게 하고, 팀과 앱이 성장함에 따라 그에
+      맞춰 지원을 이어갑니다.
     </p>
   </div>
 
@@ -124,19 +125,16 @@ <h2>Works at any scale</h2>
 
   <!-- Loved by millions -->
   <div adevAnimationLayer layerId="loved-by-millions" class="loved-by-millions-layer layer">
-    <h2>Loved by millions</h2>
-    <p>
-      Join the millions of developers all over the world building with Angular in a thriving and
-      friendly community.
-    </p>
+    <h2>수백만이 선택한 프레임워크</h2>
+    <p>활기차고 친절한 커뮤니티에서 Angular로 개발하는 전 세계 수백만 개발자들과 함께하세요.</p>
   </div>
 
   <!-- Build for everyone -->
   <div adevAnimationLayer layerId="build-for-everyone" class="build-for-everyone-layer layer">
-    <h2 class="title">Build for everyone</h2>
+    <h2 class="title">모두를 위한 개발</h2>
     <p>
-      Rely on Angular's built-in hydration, internationalization, security, and accessibility
-      support to build for everyone around the world.
+      Angular에 내장된 하이드레이션, 국제화, 보안 및 접근성 기능들을 이용해 전 세계 모든 사람들을
+      위한 앱을 만드세요
     </p>
   </div>
 </div>
diff --git a/adev/src/app/features/playground/playground.component.html b/adev/src/app/features/playground/playground.component.html
index 32f533172997..34c7d27ad1e7 100644
--- a/adev/src/app/features/playground/playground.component.html
+++ b/adev/src/app/features/playground/playground.component.html
@@ -1,6 +1,6 @@
 <div class="adev-playground-header">
   <header>
-    <h1 tabindex="-1">Angular Playground</h1>
+    <h1 tabindex="-1">Angular 플레이그라운드</h1>
   </header>
   <div class="adev-template-select">
     <label for="playgroundTemplate">Select a template</label>
@@ -12,17 +12,17 @@ <h1 tabindex="-1">Angular Playground</h1>
 </div>
 
 @if (embeddedEditorComponent) {
-<ng-container *ngComponentOutlet="embeddedEditorComponent" />
+  <ng-container *ngComponentOutlet="embeddedEditorComponent" />
 }
 
 <ng-template #templatesMenu>
   <ul class="adev-template-dropdown" cdkMenu>
     @for (template of templates; track template.path) {
-    <li>
-      <button cdkMenuItem type="button" (click)="changeTemplate(template)">
-        <span>{{ template.label }}</span>
-      </button>
-    </li>
+      <li>
+        <button cdkMenuItem type="button" (click)="changeTemplate(template)">
+          <span>{{ template.label }}</span>
+        </button>
+      </li>
     }
   </ul>
 </ng-template>
diff --git a/adev/src/app/features/update/update.component.html b/adev/src/app/features/update/update.component.html
index 8635134a7a2a..e3fe3b50cd5c 100644
--- a/adev/src/app/features/update/update.component.html
+++ b/adev/src/app/features/update/update.component.html
@@ -1,10 +1,10 @@
 <div class="page docs-viewer">
-  <h1 tabindex="-1">Update Guide</h1>
+  <h1 tabindex="-1">업데이트 가이드</h1>
   <div class="wizard">
     <div>
-      <h2>Select the options that match your update</h2>
+      <h2>업데이트하려는 버전을 선택하세요</h2>
 
-      <h3>Angular versions</h3>
+      <h3>Angular 버전</h3>
 
       <div class="adev-version-selector">
         <span class="adev-template-select">
@@ -54,9 +54,9 @@ <h3>Angular versions</h3>
       @if (from.number >= futureVersion || to.number >= futureVersion) {
         <div class="docs-alert docs-alert-critical">
           <p>
-            <strong>Warning:</strong>
-            Plans for releases after the current major release are not finalized and may change.
-            These recommendations are based on scheduled deprecations.
+            <strong>경고:</strong>
+            현재 주요 릴리스 이후의 릴리스 계획은 아직 확정되지 않았으며 변경될 수 있습니다. 이러한
+            권장 사항은 예정된 지원 중단을 기반으로 합니다.
           </p>
         </div>
       }
@@ -64,8 +64,8 @@ <h3>Angular versions</h3>
       @if (from.number > to.number) {
         <div class="docs-alert docs-alert-critical">
           <p>
-            <strong>Warning:</strong>
-            We do not support downgrading versions of Angular.
+            <strong>경고:</strong>
+            Angular 버전의 다운그레이드는 지원하지 않습니다.
           </p>
         </div>
       }
@@ -73,11 +73,9 @@ <h3>Angular versions</h3>
       @if ((to.number - from.number > 150) && from.number > 240) {
         <div class="docs-alert docs-alert-critical">
           <p>
-            <strong>Warning:</strong>
-            Be sure to follow the guide below to migrate your application to the new version. You
-            can't run
-            <code>ng update</code>
-            to update Angular applications more than one major version at a time.
+            <strong>경고:</strong>
+            어플리케이션을 새 버전으로 마이그레이션하려면 아래 가이드를 따라주세요.
+            <code>ng update</code>로는 한 번에 두 단계 이상 마이그레이션 할 수 없습니다.
           </p>
         </div>
       }
@@ -88,16 +86,16 @@ <h3>Application complexity</h3>
         [value]="level"
         style="margin-bottom:16px;"
       >
-        <mat-button-toggle [value]="1">Basic</mat-button-toggle>
-        <mat-button-toggle [value]="2">Medium</mat-button-toggle>
-        <mat-button-toggle [value]="3">Advanced</mat-button-toggle>
+        <mat-button-toggle [value]="1">기본</mat-button-toggle>
+        <mat-button-toggle [value]="2">중급</mat-button-toggle>
+        <mat-button-toggle [value]="3">고급</mat-button-toggle>
       </mat-button-toggle-group>
       @if (level === 1) {
-        <p>Shows information for all Angular developers.</p>
+        <p>모든 Angular 개발자를 위한 정보를 보여줍니다.</p>
       } @else if (level === 2) {
-        <p>Shows information that's of interest to more advanced Angular developers.</p>
+        <p>더 전문적인 Angular 개발자들에게 필요한 정보를 보여줍니다.</p>
       } @else if (level === 3) {
-        <p>Shows all the information we have about this update.</p>
+        <p>이 업데이트의 모든 정보를 보여줍니다.</p>
       }
 
       <h3>Other dependencies</h3>
@@ -106,13 +104,13 @@ <h3>Other dependencies</h3>
           <mat-checkbox
             (change)="options[option.id] = $event.checked; showUpdatePath()"
             [checked]="options[option.id]"
-            >I use {{option.name}} {{option.description}}</mat-checkbox
+            >{{option.name}} {{option.description}}을(를) 사용합니다</mat-checkbox
           >
         </div>
       }
 
       @if (from.number < 600) {
-        <h4>Package Manager</h4>
+        <h4>패키지 매니저</h4>
         <mat-button-toggle-group
           (change)="packageManager = $event.value; showUpdatePath()"
           [value]="packageManager"
@@ -126,9 +124,9 @@ <h4>Package Manager</h4>
         type="button"
         (click)="showUpdatePath()"
         class="docs-primary-btn show-button"
-        [attr.text]="'Show me how to update!'"
+        [attr.text]="'업데이트 방법 보기!'"
       >
-        Show me how to update!
+        업데이트 방법 보기!
       </button>
     </div>
   </div>
@@ -142,8 +140,8 @@ <h4>Package Manager</h4>
     <div class="recommendations">
       <h2>{{title}}</h2>
 
-      <h3>Before you update</h3>
-      @for (r  of beforeRecommendations; track $index) {
+      <h3>업데이트 전</h3>
+      @for (r of beforeRecommendations; track $index) {
         <div class="adev-recommentation-item">
           <mat-checkbox></mat-checkbox>
           <div [innerHTML]="r.renderedStep"></div>
@@ -151,14 +149,14 @@ <h3>Before you update</h3>
       }
       @if (beforeRecommendations.length <= 0) {
         <div>
-          <em>You don't need to do anything before moving between these versions.</em>
+          <em>마이그레이션에 앞서 필요한 작업이 없습니다.</em>
         </div>
       }
 
-      <h3>Update to the new version</h3>
+      <h3>새 버전으로 업데이트</h3>
       @if (duringRecommendations.length > 0) {
         <div>
-          <em>Review these changes and perform the actions to update your application.</em>
+          <em>변경 사항을 확인하고 마이그레이션을 진행하세요.</em>
         </div>
       }
 
@@ -170,11 +168,11 @@ <h3>Update to the new version</h3>
       }
       @if (duringRecommendations.length <= 0) {
         <div>
-          <em>There aren't any recommendations for moving between these versions.</em>
+          <em>마이그레이션에 대한 권장 사항이 없습니다.</em>
         </div>
       }
 
-      <h3>After you update</h3>
+      <h3>업데이트 후</h3>
       @for (r of afterRecommendations; track $index) {
         <div class="adev-recommentation-item">
           <mat-checkbox></mat-checkbox>
@@ -183,7 +181,7 @@ <h3>After you update</h3>
       }
       @if (afterRecommendations.length <= 0) {
         <div>
-          <em>You don't need to do anything after moving between these versions.</em>
+          <em>마이그레이션 후 필요한 작업이 없습니다.</em>
         </div>
       }
     </div>
diff --git a/adev/src/content/best-practices/a11y.md b/adev/src/content/best-practices/a11y.md
index 2672002a2571..5fc740eee9da 100644
--- a/adev/src/content/best-practices/a11y.md
+++ b/adev/src/content/best-practices/a11y.md
@@ -1,80 +1,80 @@
-# Accessibility in Angular
+# 앵귤러에서의 접근성
 
-The web is used by a wide variety of people, including those who have visual or motor impairments.
-A variety of assistive technologies are available that make it much easier for these groups to interact with web-based software applications.
-Also, designing an application to be more accessible generally improves the user experience for all users.
+웹은 시각 또는 운동 장애가 있는 사람들을 포함하여 다양한 사람들이 사용합니다.
+이러한 그룹이 웹 기반 소프트웨어 애플리케이션과 상호작용할 수 있도록 돕는 다양한 보조 기술이 있습니다.
+또한, 애플리케이션을 더 접근 가능하게 설계하는 것은 일반적으로 모든 사용자에게 더 나은 사용자 경험을 제공합니다.
 
-For an in-depth introduction to issues and techniques for designing accessible applications, see Google's web.dev [Learn Accessibility](https://web.dev/learn/accessibility/) course.
+접근 가능한 애플리케이션을 설계하기 위한 문제와 기술에 대한 심층적인 소개는 구글 웹.dev의 [접근성 배우기](https://web.dev/learn/accessibility/) 과정을 참조하십시오.
 
-This page discusses best practices for designing Angular applications that work well for all users, including those who rely on assistive technologies.
+이 페이지에서는 보조 기술에 의존하는 사용자를 포함하여 모든 사용자에게 잘 작동하는 앵귤러 애플리케이션을 설계하기 위한 모범 사례를 논의합니다.
 
-## Accessibility attributes
+## 접근 속성
 
 <!-- TODO: add link once attribute binding guide is implemented -->
-Building accessible web experience often involves setting [Accessible Rich Internet Applications \(ARIA\) attributes](https://web.dev/learn/accessibility/aria-html/) to provide semantic meaning where it might otherwise be missing.
-Use attribute binding template syntax to control the values of accessibility-related attributes.
+접근 가능한 웹 경험을 구축하는 것은 종종 [접근 가능 리치 인터넷 애플리케이션 \(ARIA\) 속성](https://web.dev/learn/accessibility/aria-html/)을 설정하여 논리적 의미를 제공하는 것과 관련이 있습니다.
+접근성과 관련된 속성의 값을 제어하기 위해 속성 바인딩 템플릿 구문을 사용하십시오.
 
-When binding to ARIA attributes in Angular, you must use the `attr.` prefix. The ARIA specification depends specifically on HTML attributes rather than properties of DOM elements.
+앵귤러에서 ARIA 속성에 바인딩할 때는 `attr.` 접두사를 사용해야 합니다. ARIA 사양은 DOM 요소의 속성이 아니라 HTML 속성에 의존합니다.
 
 <docs-code language="html">
-<!-- Use attr. when binding to an ARIA attribute -->
+<!-- ARIA 속성에 바인딩할 때 attr. 사용 -->
 <button [attr.aria-label]="myActionLabel">…</button>
 </docs-code>
 
-Note: This syntax is only necessary for attribute *bindings*.
-Static ARIA attributes require no extra syntax.
+참고: 이 구문은 속성 *바인딩*에만 필요합니다.
+정적 ARIA 속성에는 추가 구문이 필요하지 않습니다.
 
 <docs-code language="html">
-<!-- Static ARIA attributes require no extra syntax -->
+<!-- 정적 ARIA 속성에는 추가 구문이 필요하지 않음 -->
 <button aria-label="Save document">…</button>
 </docs-code>
 
-HELPFUL: By convention, HTML attributes use lowercase names \(`tabindex`\), while properties use camelCase names \(`tabIndex`\).
+유용한 팁: 관례적으로, HTML 속성은 소문자 이름을 사용하고 \(`tabindex`\), 속성은 카멜 케이스 이름을 사용합니다 \(`tabIndex`\).
 
 <!-- TODO: add link once attribute binding guide implemented -->
-See the [Binding syntax guide](guide/templates) for more background on the difference between attributes and properties.
+속성과 속성의 차이에 대한 자세한 내용은 [바인딩 구문 가이드](guide/templates)를 참조하십시오.
 
-## Angular UI components
+## 앵귤러 UI 구성 요소
 
-The [Angular Material](https://material.angular.io) library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible.
-The [Component Development Kit (CDK)](https://material.angular.io/cdk/categories) includes the `a11y` package that provides tools to support various areas of accessibility.
-For example:
+앵귤러 팀이 유지 관리하는 [앵귤러 머티리얼](https://material.angular.io) 라이브러리는 완전히 접근 가능하도록 설계된 재사용 가능한 UI 구성 요소 모음입니다.
+[구성 요소 개발 키트(CDK)](https://material.angular.io/cdk/categories)에는 다양한 접근성을 지원하는 도구를 제공하는 `a11y` 패키지가 포함되어 있습니다.
+예를 들면:
 
-* `LiveAnnouncer` is used to announce messages for screen-reader users using an `aria-live` region.
-    See the W3C documentation for more information on [aria-live regions](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live).
+* `LiveAnnouncer`는 화면 리더 사용자에게 메시지를 알리기 위해 `aria-live` 영역을 사용합니다.
+    `aria-live` 영역에 대한 자세한 내용은 W3C 문서를 참조하십시오. [aria-live 영역](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live).
 
-* The `cdkTrapFocus` directive traps Tab-key focus within an element.
-    Use it to create accessible experience for components such as modal dialogs, where focus must be constrained.
+* `cdkTrapFocus` 지시문은 Tab 키 포커스를 요소 내에 가둡니다.
+    이 지시문을 사용하여 포커스를 제어해야 하는 모달 대화상자와 같은 구성 요소에 대한 접근 가능한 경험을 생성하십시오.
 
-For full details of these and other tools, see the [Angular CDK accessibility overview](https://material.angular.io/cdk/a11y/overview).
+이들 및 기타 도구의 전체 세부정보는 [앵귤러 CDK 접근성 개요](https://material.angular.io/cdk/a11y/overview)를 참조하십시오.
 
-### Augmenting native elements
+### 네이티브 요소 보강
 
-Native HTML elements capture several standard interaction patterns that are important to accessibility.
-When authoring Angular components, you should re-use these native elements directly when possible, rather than re-implementing well-supported behaviors.
+네이티브 HTML 요소는 접근성에 중요한 여러 표준 상호작용 패턴을 캡처합니다.
+앵귤러 구성 요소를 저작할 때는 잘 지원되는 동작을 재구현하기보다는 이러한 네이티브 요소를 직접 재사용해야 합니다.
 
-For example, instead of creating a custom element for a new variety of button, create a component that uses an attribute selector with a native `<button>` element.
-This most commonly applies to `<button>` and `<a>`, but can be used with many other types of element.
+예를 들어, 새 종류의 버튼을 위한 사용자 정의 요소를 만드는 대신, 네이티브 `<button>` 요소와 함께 속성 선택기를 사용한 구성 요소를 만듭니다.
+이것은 가장 일반적으로 `<button>` 및 `<a>`에 적용되지만, 다른 많은 유형의 요소와 함께 사용할 수 있습니다.
 
-You can see examples of this pattern in Angular Material:
-[`MatButton`](https://github.com/angular/components/blob/main/src/material/button/button.ts#L33C3-L36C5), [`MatTabNav`](https://github.com/angular/components/blob/main/src/material/tabs/tab-nav-bar/tab-nav-bar.ts#L62), and [`MatTable`](https://github.com/angular/components/blob/main/src/material/table/table.ts#L40).
+이 패턴의 예제를 앵귤러 머티리얼에서 확인할 수 있습니다:
+[`MatButton`](https://github.com/angular/components/blob/main/src/material/button/button.ts#L33C3-L36C5), [`MatTabNav`](https://github.com/angular/components/blob/main/src/material/tabs/tab-nav-bar/tab-nav-bar.ts#L62), 및 [`MatTable`](https://github.com/angular/components/blob/main/src/material/table/table.ts#L40).
 
-### Using containers for native elements
+### 네이티브 요소를 위한 컨테이너 사용
 
-Sometimes using the appropriate native element requires a container element.
-For example, the native `<input>` element cannot have children, so any custom text entry components need to wrap an `<input>` with extra elements.
-By just including `<input>` in your custom component's template, it's impossible for your component's users  to set arbitrary properties and attributes to the `<input>` element.
-Instead, create a container component that uses content projection to include the native control in the component's API.
+가끔 올바른 네이티브 요소를 사용하려면 컨테이너 요소가 필요합니다.
+예를 들어, 네이티브 `<input>` 요소는 자식 요소를 가질 수 없으므로 모든 사용자 정의 텍스트 입력 구성 요소는 추가 요소를 사용하여 `<input>`을 감싸야 합니다.
+단순히 사용자 정의 구성 요소의 템플릿에 `<input>`을 포함하면 사용자가 `<input>` 요소에 임의의 속성 및 속성을 설정하는 것이 불가능합니다.
+대신에 네이티브 컨트롤을 구성 요소의 API에 포함하기 위해 콘텐츠 투영을 사용하는 컨테이너 구성 요소를 만드십시오.
 
-You can see [`MatFormField`](https://material.angular.io/components/form-field/overview) as an example of this pattern.
+이 패턴의 예제로 [`MatFormField`](https://material.angular.io/components/form-field/overview)를 확인할 수 있습니다.
 
-## Case study: Building a custom progress bar
+## 사례 연구: 사용자 정의 진행 표시줄 만들기
 
-The following example shows how to make a progress bar accessible by using host binding to control accessibility-related attributes.
+다음 예제는 호스트 바인딩을 사용하여 접근성과 관련된 속성을 제어함으로써 진행 표시줄을 접근 가능하게 만드는 방법을 보여줍니다.
 
-* The component defines an accessibility-enabled element with both the standard HTML attribute `role`, and ARIA attributes.
-    The ARIA attribute `aria-valuenow` is bound to the user's input.
-* In the template, the `aria-label` attribute ensures that the control is accessible to screen readers.
+* 구성 요소는 표준 HTML 속성 `role` 및 ARIA 속성을 모두 갖춘 접근성이 활성화된 요소를 정의합니다.
+    ARIA 속성 `aria-valuenow`는 사용자의 입력에 바인딩됩니다.
+* 템플릿에서 `aria-label` 속성은 컨트롤이 화면 리더에서 접근 가능하도록 보장합니다.
 
 <docs-code-multifile>
   <docs-code
@@ -89,17 +89,17 @@ The following example shows how to make a progress bar accessible by using host
     highlight="[8, 9]"/>
 </docs-code-multifile>
 
-## Routing
+## 라우팅
 
-### Focus management after navigation
+### 탐색 후 포커스 관리
 
-Tracking and controlling [focus](https://web.dev/learn/accessibility/focus/) in a UI is an important consideration in designing for accessibility.
-When using Angular routing, you should decide where page focus goes upon navigation.
+UI에서 [포커스](https://web.dev/learn/accessibility/focus/)를 추적하고 제어하는 것은 접근성을 설계할 때 중요한 고려 사항입니다.
+앵귤러 라우팅을 사용할 때는 페이지 탐색 시 포커스가 어디로 이동할지를 결정해야 합니다.
 
-To avoid relying solely on visual cues, you need to make sure your routing code updates focus after page navigation.
-Use the `NavigationEnd` event from the `Router` service to know when to update focus.
+시각적 단서에만 의존하지 않도록 하려면 라우팅 코드가 페이지 탐색 후 포커스를 업데이트하도록 해야 합니다.
+라우터 서비스의 `NavigationEnd` 이벤트를 사용하여 포커스를 업데이트해야 할 시점을 확인하십시오.
 
-The following example shows how to find and focus the main content header in the DOM after navigation.
+다음 예제는 탐색 후 DOM에서 주요 콘텐츠 헤더를 찾고 포커스를 주는 방법을 보여줍니다.
 
 <docs-code language="typescript">
 
@@ -112,62 +112,62 @@ router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
 
 </docs-code>
 
-In a real application, the element that receives focus depends on your specific application structure and layout.
-The focused element should put users in a position to immediately move into the main content that has just been routed into view.
-You should avoid situations where focus returns to the `body` element after a route change.
+실제 애플리케이션에서는 포커스를 받는 요소가 특정 애플리케이션 구조 및 레이아웃에 따라 달라집니다.
+포커스된 요소는 사용자가 방금 보기로 라우팅된 주요 콘텐츠로 즉시 이동할 수 있도록 해야 합니다.
+라우트 변경 후 포커스가 `body` 요소로 돌아가는 상황을 피해야 합니다.
 
-### Active links identification
+### 활성 링크 식별
 
-CSS classes applied to active `RouterLink` elements, such as `RouterLinkActive`, provide a visual cue to identify the active link.
-Unfortunately, a visual cue doesn't help blind or visually impaired users.
-Applying the `aria-current` attribute to the element can help identify the active link.
-For more information, see [Mozilla Developer Network \(MDN\) aria-current](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-current)).
+`RouterLink` 요소에 적용된 CSS 클래스는 `RouterLinkActive`와 같은 활성 링크를 식별하기 위한 시각적 단서를 제공합니다.
+불행히도, 시각적 단서는 시각 장애인이나 시각적으로 손상된 사용자에게는 도움이 되지 않습니다.
+요소에 `aria-current` 속성을 적용하여 활성 링크를 식별하는 데 도움을 줄 수 있습니다.
+자세한 내용은 [Mozilla Developer Network \(MDN\) aria-current](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Attributes/aria-current)를 참조하십시오.
 
-The `RouterLinkActive` directive provides the `ariaCurrentWhenActive` input which sets the `aria-current` to a specified value when the link becomes active.
+`RouterLinkActive` 지시문은 링크가 활성화될 때 `aria-current`를 지정된 값으로 설정하는 `ariaCurrentWhenActive` 입력을 제공합니다.
 
-The following example shows how to apply the `active-page` class to active links as well as setting their `aria-current` attribute to `"page"` when they are active:
+다음 예제는 활성 링크에 `active-page` 클래스를 적용하고 링크가 활성화될 때 `aria-current` 속성을 `"page"`로 설정하는 방법을 보여줍니다:
 
 ```angular-html
 <nav>
   <a routerLink="home"
       routerLinkActive="active-page"
       ariaCurrentWhenActive="page">
-    Home
+    홈
   </a>
   <a routerLink="about"
       routerLinkActive="active-page"
       ariaCurrentWhenActive="page">
-    About
+    소개
   </a>
   <a routerLink="shop"
       routerLinkActive="active-page"
       ariaCurrentWhenActive="page">
-    Shop
+    상점
   </a>
 </nav>
 ```
 
 <!-- vale Angular.Angular_Spelling = NO -->
 
-## More information
+## 추가 정보
 
-* [Accessibility - Google Web Fundamentals](https://developers.google.com/web/fundamentals/accessibility)
-* [ARIA specification and authoring practices](https://www.w3.org/TR/wai-aria)
-* [Material Design - Accessibility](https://material.io/design/usability/accessibility.html)
+* [접근성 - Google 웹 기본 사항](https://developers.google.com/web/fundamentals/accessibility)
+* [ARIA 사양 및 작성 관행](https://www.w3.org/TR/wai-aria)
+* [머티리얼 디자인 - 접근성](https://material.io/design/usability/accessibility.html)
 * [Smashing Magazine](https://www.smashingmagazine.com/search/?q=accessibility)
-* [Inclusive Components](https://inclusive-components.design)
-* [Accessibility Resources and Code Examples](https://dequeuniversity.com/resources)
-* [W3C - Web Accessibility Initiative](https://www.w3.org/WAI/people-use-web)
+* [포괄적인 구성 요소](https://inclusive-components.design)
+* [접근성 리소스 및 코드 예제](https://dequeuniversity.com/resources)
+* [W3C - 웹 접근성 이니셔티브](https://www.w3.org/WAI/people-use-web)
 * [Rob Dodson A11ycasts](https://www.youtube.com/watch?v=HtTyRajRuyY)
-* [Angular ESLint](https://github.com/angular-eslint/angular-eslint#functionality) provides linting rules that can help you make sure your code meets accessibility standards.
+* [Angular ESLint](https://github.com/angular-eslint/angular-eslint#functionality)는 코드가 접근성 표준을 충족하는지 확인하는 데 도움이 되는 린팅 규칙을 제공합니다.
 
 <!-- vale Angular.Angular_Spelling = YES -->
 
-Books
+책들
 
 <!-- vale Angular.Google_Quotes = NO -->
 
-* "A Web for Everyone: Designing Accessible User Experiences," Sarah Horton and Whitney Quesenbery
-* "Inclusive Design Patterns," Heydon Pickering
+* "모두를 위한 웹: 접근 가능한 사용자 경험 설계," Sarah Horton 및 Whitney Quesenbery
+* "포괄적 디자인 패턴," Heydon Pickering
 
-<!-- vale Angular.Google_Quotes = YES -->
+<!-- vale Angular.Google_Quotes = YES -->
\ No newline at end of file
diff --git a/adev/src/content/best-practices/runtime-performance/overview.md b/adev/src/content/best-practices/runtime-performance/overview.md
index 202338322755..8e325108f0e9 100644
--- a/adev/src/content/best-practices/runtime-performance/overview.md
+++ b/adev/src/content/best-practices/runtime-performance/overview.md
@@ -1,13 +1,13 @@
 # Runtime performance optimization
 
-Fast rendering is critical for Angular and we've built the framework with a lot of optimizations in mind to help you develop performant apps. To better understand the performance of your app we offer [Angular DevTools](tools/devtools) and a [video guide](https://www.youtube.com/watch?v=FjyX_hkscII) on how to use Chrome DevTools for profiling. In this section we cover the most common performance optimization techniques.
+빠른 렌더링은 Angular에서 매우 중요하며, 우리는 성능이 뛰어난 앱을 개발할 수 있도록 많은 최적화가 포함된 프레임워크를 구축했습니다. 앱의 성능을 더 잘 이해하기 위해 [Angular DevTools](tools/devtools)와 Chrome DevTools를 사용하여 프로파일링하는 방법에 대한 [비디오 가이드](https://www.youtube.com/watch?v=FjyX_hkscII)를 제공합니다. 이 섹션에서는 가장 일반적인 성능 최적화 기술을 다룹니다.
 
-**Change detection** is the process through which Angular checks to see whether your application state has changed, and if any DOM needs to be updated. At a high level, Angular walks your components from top to bottom, looking for changes. Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application’s view. Change detection can be triggered either manually or through an asynchronous event (for example, a user interaction or an XMLHttpRequest completion).
+**변경 감지**는 Angular가 애플리케이션 상태가 변경되었는지 확인하고 DOM이 업데이트되어야 하는지를 검사하는 과정입니다. 높은 수준에서 Angular는 변경 사항을 찾기 위해 구성 요소를 위에서 아래로 탐색합니다. Angular는 데이터 모델의 변경 사항이 애플리케이션의 뷰에 반영되도록 정기적으로 변경 감지 메커니즘을 실행합니다. 변경 감지는 수동 또는 비동기 이벤트(예: 사용자 상호작용 또는 XMLHttpRequest 완료)를 통해 트리거될 수 있습니다.
 
-Change detection is highly optimized and performant, but it can still cause slowdowns if the application runs it too frequently.
+변경 감지는 매우 최적화되고 성능이 뛰어나지만, 애플리케이션이 너무 자주 실행되면 여전히 느려질 수 있습니다.
 
-In this guide, you’ll learn how to control and optimize the change detection mechanism by skipping parts of your application and running change detection only when necessary.
+이 가이드에서는 애플리케이션의 일부를 건너뛰고 필요한 경우에만 변경 감지를 실행하여 변경 감지 메커니즘을 제어하고 최적화하는 방법을 배우게 됩니다.
 
-Watch this video if you prefer to learn more about performance optimizations in a media format:
+미디어 형식으로 성능 최적화에 대해 더 배우고 싶다면 이 비디오를 시청하십시오:
 
-<docs-video src="https://www.youtube.com/embed/f8sA-i6gkGQ"/>
+<docs-video src="https://www.youtube.com/embed/f8sA-i6gkGQ"/>
\ No newline at end of file
diff --git a/adev/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev/src/content/best-practices/runtime-performance/skipping-subtrees.md
index 64e984dddfe1..9b0ff5cf1728 100644
--- a/adev/src/content/best-practices/runtime-performance/skipping-subtrees.md
+++ b/adev/src/content/best-practices/runtime-performance/skipping-subtrees.md
@@ -1,19 +1,19 @@
-# Skipping component subtrees
+# 컴포넌트 서브트리 건너뛰기
 
-JavaScript, by default, uses mutable data structures that you can reference from multiple different components. Angular runs change detection over your entire component tree to make sure that the most up-to-date state of your data structures is reflected in the DOM.
+JavaScript는 기본적으로 다양한 컴포넌트에서 참조할 수 있는 변경 가능한 데이터 구조를 사용합니다. Angular는 컴포넌트 트리 전체에 대해 변경 감지를 실행하여 데이터 구조의 최신 상태가 DOM에 반영되도록 합니다.
 
-Change detection is sufficiently fast for most applications. However, when an application has an especially large component tree, running change detection across the whole application can cause performance issues. You can address this by configuring change detection to only run on a subset of the component tree.
+변경 감지는 대부분의 애플리케이션에서 충분히 빠릅니다. 그러나 애플리케이션에 특별히 큰 컴포넌트 트리가 있는 경우 전체 애플리케이션에 걸쳐 변경 감지를 실행하면 성능 문제가 발생할 수 있습니다. 이를 해결하기 위해 변경 감지를 컴포넌트 트리의 일부에만 실행되도록 구성할 수 있습니다.
 
-If you are confident that a part of the application is not affected by a state change, you can use [OnPush](/api/core/ChangeDetectionStrategy) to skip change detection in an entire component subtree.
+애플리케이션의 일부가 상태 변경의 영향을 받지 않는다고 확신하는 경우 [OnPush](/api/core/ChangeDetectionStrategy)를 사용하여 전체 컴포넌트 서브트리에서 변경 감지를 건너뜁니다.
 
-## Using `OnPush`
+## `OnPush` 사용하기
 
-OnPush change detection instructs Angular to run change detection for a component subtree **only** when:
+OnPush 변경 감지는 Angular에게 다음 경우에만 컴포넌트 서브트리에 대해 변경 감지를 실행하도록 지시합니다:
 
-* The root component of the subtree receives new inputs as the result of a template binding. Angular compares the current and past value of the input with `==`.
-* Angular handles an event _(for example using event binding, output binding, or `@HostListener` )_ in the subtree's root component or any of its children whether they are using OnPush change detection or not.
+* 서브트리의 루트 컴포넌트가 템플릿 바인딩의 결과로 새로운 입력을 받을 때. Angular는 입력의 현재 값과 과거 값을 `==`로 비교합니다.
+* Angular가 서브트리의 루트 컴포넌트 또는 자식 컴포넌트에서 이벤트를 처리할 때 _(예: 이벤트 바인딩, 출력 바인딩 또는 `@HostListener` 사용)_, OnPush 변경 감지를 사용하든 그렇지 않든 상관없습니다.
 
-You can set the change detection strategy of a component to `OnPush` in the `@Component` decorator:
+`@Component` 데코레이터에서 컴포넌트의 변경 감지 전략을 `OnPush`로 설정할 수 있습니다:
 
 ```ts
 import { ChangeDetectionStrategy, Component } from '@angular/core';
@@ -23,15 +23,15 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 export class MyComponent {}
 ```
 
-## Common change detection scenarios
+## 일반적인 변경 감지 시나리오
 
-This section examines several common change detection scenarios to illustrate Angular's behavior.
+이 섹션에서는 Angular의 동작을 설명하기 위해 여러 일반적인 변경 감지 시나리오를 살펴봅니다.
 
-### An event is handled by a component with default change detection
+### 기본 변경 감지를 사용하는 컴포넌트에서 이벤트 처리
 
-If Angular handles an event within a component without `OnPush` strategy, the framework executes change detection on the entire component tree. Angular will skip descendant component subtrees with roots using `OnPush`, which have not received new inputs.
+Angular가 `OnPush` 전략 없이 컴포넌트 내에서 이벤트를 처리하면 프레임워크는 전체 컴포넌트 트리에 대해 변경 감지를 실행합니다. Angular는 새로운 입력을 받지 않은 `OnPush`를 사용하는 루트를 가진 자식 컴포넌트 서브트리를 건너뜁니다.
 
-As an example, if we set the change detection strategy of `MainComponent` to `OnPush` and the user interacts with a component outside the subtree with root `MainComponent`, Angular will check all the pink components from the diagram below (`AppComponent`, `HeaderComponent`, `SearchComponent`, `ButtonComponent`) unless `MainComponent` receives new inputs:
+예를 들어, `MainComponent`의 변경 감지 전략을 `OnPush`로 설정하고 사용자가 `MainComponent`의 루트 외부에서 컴포넌트와 상호작용하면, Angular는 `MainComponent`가 새로운 입력을 받지 않는 한 아래 다이어그램의 모든 핑크색 컴포넌트(`AppComponent`, `HeaderComponent`, `SearchComponent`, `ButtonComponent`)를 확인합니다:
 
 ```mermaid
 graph TD;
@@ -50,11 +50,11 @@ class search checkedNode
 class event eventNode
 ```
 
-## An event is handled by a component with OnPush
+## OnPush가 있는 컴포넌트에서 이벤트 처리
 
-If Angular handles an event within a component with OnPush strategy, the framework will execute change detection within the entire component tree. Angular will ignore component subtrees with roots using OnPush, which have not received new inputs and are outside the component which handled the event.
+Angular가 OnPush 전략이 있는 컴포넌트 내에서 이벤트를 처리하면 프레임워크는 전체 컴포넌트 트리 내에서 변경 감지를 실행합니다. Angular는 새로운 입력을 받지 않고 이벤트를 처리한 컴포넌트 외부에 있는 `OnPush`를 사용하는 루트를 가진 컴포넌트 서브트리를 무시합니다.
 
-As an example, if Angular handles an event within `MainComponent`, the framework will run change detection in the entire component tree. Angular will ignore the subtree with root `LoginComponent` because it has `OnPush` and the event happened outside of its scope.
+예를 들어, Angular가 `MainComponent` 내에서 이벤트를 처리하는 경우 프레임워크는 전체 컴포넌트 트리에서 변경 감지를 실행합니다. Angular는 `LoginComponent`의 루트 서브트리를 무시하는데, 이는 `OnPush`를 사용하며 이벤트가 해당 범위 외부에서 발생했기 때문입니다.
 
 ```mermaid
 graph TD;
@@ -75,11 +75,11 @@ class details checkedNode
 class event eventNode
 ```
 
-## An event is handled by a descendant of a component with OnPush
+## OnPush가 있는 컴포넌트의 자손에서 이벤트 처리
 
-If Angular handles an event in a component with OnPush, the framework will execute change detection in the entire component tree, including the component’s ancestors.
+Angular가 OnPush가 있는 컴포넌트에서 이벤트를 처리하면 프레임워크는 컴포넌트의 조상(부모 컴포넌트)도 포함하여 전체 컴포넌트 트리에서 변경 감지를 실행합니다.
 
-As an example, in the diagram below, Angular handles an event in `LoginComponent` which uses OnPush. Angular will invoke change detection in the entire component subtree including `MainComponent` (`LoginComponent`’s parent), even though `MainComponent` has `OnPush` as well. Angular checks `MainComponent` as well because `LoginComponent` is part of its view.
+예를 들어, 아래 다이어그램에서 Angular는 OnPush를 사용하는 `LoginComponent` 내에서 이벤트를 처리합니다. Angular는 `MainComponent`(`LoginComponent`의 부모)도 포함하여 전체 컴포넌트 서브트리에서 변경 감지를 실행합니다. `MainComponent`도 `OnPush`를 가지고 있지만, `LoginComponent`가 그 뷰의 일부이기 때문에 Angular는 `MainComponent`도 확인합니다.
 
 ```mermaid
 graph TD;
@@ -101,11 +101,11 @@ class details checkedNode
 class event eventNode
 ```
 
-## New inputs to component with OnPush
+## OnPush가 있는 컴포넌트에 대한 새로운 입력
 
-Angular will run change detection within a child component with `OnPush` when setting an input property as result of a template binding.
+Angular는 템플릿 바인딩의 결과로 입력 속성을 설정할 때 `OnPush`가 있는 자식 컴포넌트 내에서 변경 감지를 실행합니다.
 
-For example, in the diagram below, `AppComponent` passes a new input to `MainComponent`, which has `OnPush`. Angular will run change detection in `MainComponent` but will not run change detection in `LoginComponent`, which also has `OnPush`, unless it receives new inputs as well.
+예를 들어, 아래 다이어그램에서는 `AppComponent`가 `OnPush`가 있는 `MainComponent`에 새로운 입력을 전달합니다. Angular는 `MainComponent`에서 변경 감지를 실행하지만, 새로운 입력을 받지 않는 한 `LoginComponent`에서 변경 감지는 실행하지 않습니다.
 
 ```mermaid
 graph TD;
@@ -126,7 +126,7 @@ class details checkedNode
 class event eventNode
 ```
 
-## Edge cases
+## 예외 사례
 
-* **Modifying input properties in TypeScript code**. When you use an API like `@ViewChild` or `@ContentChild` to get a reference to a component in TypeScript and manually modify an `@Input` property, Angular will not automatically run change detection for OnPush components. If you need Angular to run change detection, you can inject `ChangeDetectorRef` in your component and call `changeDetectorRef.markForCheck()` to tell Angular to schedule a change detection.
-* **Modifying object references**. In case an input receives a mutable object as value and you modify the object but preserve the reference, Angular will not invoke change detection. That’s the expected behavior because the previous and the current value of the input point to the same reference.
+* **TypeScript 코드에서 입력 속성 수정**. TypeScript에서 `@ViewChild`나 `@ContentChild`와 같은 API를 사용하여 컴포넌스를 참조하고 `@Input` 속성을 수동으로 수정할 때, Angular는 OnPush 컴포넌트에 대해 자동으로 변경 감지를 실행하지 않습니다. Angular가 변경 감지를 실행하도록 하려면 컴포넌트에 `ChangeDetectorRef`를 주입하고 `changeDetectorRef.markForCheck()`를 호출하여 Angular에 변경 감지를 예약하도록 알릴 수 있습니다.
+* **객체 참조 수정**. 입력이 변경 가능한 객체를 값으로 받고 객체를 수정하지만 참조를 유지하는 경우, Angular는 변경 감지를 실행하지 않습니다. 이는 입력의 이전 값과 현재 값이 동일한 참조를 가리키기 때문에 예상되는 동작입니다.
\ No newline at end of file
diff --git a/adev/src/content/best-practices/runtime-performance/slow-computations.md b/adev/src/content/best-practices/runtime-performance/slow-computations.md
index 38f8aabea602..0a54a1165fe0 100644
--- a/adev/src/content/best-practices/runtime-performance/slow-computations.md
+++ b/adev/src/content/best-practices/runtime-performance/slow-computations.md
@@ -1,26 +1,25 @@
-# Slow computations
+# 느린 계산
 
-On every change detection cycle, Angular synchronously:
+모든 변경 감지 주기에서 Angular는 동기적으로:
 
-* Evaluates all template expressions in all components, unless specified otherwise, based on that each component's detection strategy
-* Executes the `ngDoCheck`, `ngAfterContentChecked`, `ngAfterViewChecked`, and `ngOnChanges` lifecycle hooks.
-A single slow computation within a template or a lifecycle hook can slow down the entire change detection process because Angular runs the computations sequentially.
+* 각 구성 요소의 감지 전략에 따라 지정되지 않은 경우 모든 구성 요소의 모든 템플릿 표현식을 평가합니다.
+* `ngDoCheck`, `ngAfterContentChecked`, `ngAfterViewChecked`, 및 `ngOnChanges` 생명주기 후크를 실행합니다. 템플릿이나 생명주기 후크 내에서 단일 느린 계산이 전체 변경 감지 프로세스를 느리게 할 수 있습니다. Angular는 계산을 순차적으로 실행하기 때문입니다.
 
-## Identifying slow computations
+## 느린 계산 식별
 
-You can identify heavy computations with Angular DevTools’ profiler. In the performance timeline, click a bar to preview a particular change detection cycle. This displays a bar chart, which shows how long the framework spent in change detection for each component. When you click a component, you can preview how long Angular spent  evaluating its template and lifecycle hooks.
+Angular DevTools의 프로파일러를 사용하여 무거운 계산을 식별할 수 있습니다. 성능 타임라인에서 막대를 클릭하여 특정 변경 감지 주기를 미리 볼 수 있습니다. 이렇게 하면 각 구성 요소에 대해 프레임워크가 변경 감지에 얼마나 많은 시간을 소비했는지를 보여주는 막대 차트가 표시됩니다. 구성 요소를 클릭하면 Angular가 해당 템플릿과 생명주기 후크를 평가하는 데 얼마나 많은 시간을 소비했는지 미리 볼 수 있습니다.
 
-<img alt="Angular DevTools profiler preview showing slow computation" src="assets/images/best-practices/runtime-performance/slow-computations.png">
+<img alt="Angular DevTools 프로파일러 미리보기 - 느린 계산" src="assets/images/best-practices/runtime-performance/slow-computations.png">
 
-For example, in the preceding screenshot, the second recorded change detection cycle is selected. Angular spent over 573 ms on this cycle, with the most time spent in the `EmployeeListComponent`. In the details panel, you can see that Angular spent over 297 ms evaluating the template of the `EmployeeListComponent`.
+예를 들어, 이전 스크린샷에서 두 번째로 기록된 변경 감지 주기가 선택되었습니다. Angular는 이 주기에 573ms 이상을 소모했으며, 가장 많은 시간이 `EmployeeListComponent`에서 소모되었습니다. 세부 정보 패널에서 Angular가 `EmployeeListComponent`의 템플릿을 평가하는 데 297ms 이상을 소모했다는 것을 볼 수 있습니다.
 
-## Optimizing slow computations
+## 느린 계산 최적화
 
-Here are several techniques to remove slow computations:
+다음은 느린 계산을 제거하기 위한 몇 가지 기술입니다:
 
-* **Optimizing the underlying algorithm**. This is the recommended approach. If you can speed up the algorithm that is causing the problem, you can speed up the entire change detection mechanism.
-* **Caching using pure pipes**. You can move the heavy computation to a pure [pipe](guide/pipes). Angular reevaluates a pure pipe only if it detects that its inputs have changed, compared to the previous time Angular called it.
-* **Using memoization**. [Memoization](https://en.wikipedia.org/wiki/Memoization) is a similar technique to pure pipes, with the difference that pure pipes preserve only the last result from the computation where memoization could store multiple results.
-* **Avoid repaints/reflows in lifecycle hooks**. Certain [operations](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/) cause the browser to either synchronously recalculate the layout of the page or re-render it. Since reflows and repaints are generally slow, you want to avoid performing them in every change detection cycle.
+* **기본 알고리즘 최적화**. 이것이 권장되는 접근 방식입니다. 문제의 원인이 되는 알고리즘을 가속화할 수 있다면 전체 변경 감지 메커니즘을 가속화할 수 있습니다.
+* **순수 파이프를 통한 캐싱**. 무거운 계산을 순수 [파이프](guide/pipes)로 이동할 수 있습니다. Angular는 입력이 이전에 Angular가 호출했을 때와 비교하여 변경된 경우에만 순수 파이프를 재평가합니다.
+* **메모이제이션 사용**. [메모이제이션](https://en.wikipedia.org/wiki/Memoization)은 순수 파이프와 유사한 기술로, 메모이제이션은 여러 결과를 저장할 수 있는 반면 순수 파이프는 계산의 마지막 결과만 유지합니다.
+* **생명주기 후크에서 repaint/reflow 피하기**. 특정 [작업](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/)은 브라우저가 페이지의 레이아웃을 동기적으로 재계산하거나 재렌더링하도록 합니다. 리플로우와 리페인트는 일반적으로 느리므로 모든 변경 감지 주기에서 이를 수행하는 것을 피하고 싶습니다.
 
-Pure pipes and memoization have different trade-offs. Pure pipes are an Angular built-in concept compared to memoization, which is a general software engineering practice for caching function results. The memory overhead of memoization could be significant if you invoke the heavy computation frequently with different arguments.
+순수 파이프와 메모이제이션은 서로 다른 장단점이 있습니다. 순수 파이프는 메모이제이션에 비해 Angular의 내장 개념입니다. 메모이제이션은 함수 결과를 캐싱하기 위한 일반 소프트웨어 공학 관행입니다. 무거운 계산을 자주 다양한 인수로 호출하면 메모이제이션의 메모리 오버헤드가 상당할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/best-practices/runtime-performance/zone-pollution.md b/adev/src/content/best-practices/runtime-performance/zone-pollution.md
index bf8ceb13d32e..07b0aaf9e132 100644
--- a/adev/src/content/best-practices/runtime-performance/zone-pollution.md
+++ b/adev/src/content/best-practices/runtime-performance/zone-pollution.md
@@ -1,27 +1,27 @@
-# Resolving zone pollution
+# 영역 오염 해결
 
-**Zone.js** is a signaling mechanism that Angular uses to detect when an application state might have changed. It captures asynchronous operations like `setTimeout`, network requests, and event listeners. Angular schedules change detection based on signals from Zone.js.
+**Zone.js**는 Angular가 애플리케이션 상태가 변경될 수 있을 때를 감지하기 위해 사용하는 신호 메커니즘입니다. 이는 `setTimeout`, 네트워크 요청 및 이벤트 리스너와 같은 비동기 작업을 포착합니다. Angular는 Zone.js의 신호를 기반으로 변경 감지를 예약합니다.
 
-In some cases scheduled [tasks](https://developer.mozilla.org/docs/Web/API/HTML_DOM_API/Microtask_guide#tasks) or [microtasks](https://developer.mozilla.org/docs/Web/API/HTML_DOM_API/Microtask_guide#microtasks) don’t make any changes in the data model, which makes running change detection unnecessary. Common examples are:
+일부 경우에 예약된 [작업](https://developer.mozilla.org/docs/Web/API/HTML_DOM_API/Microtask_guide#tasks) 또는 [마이크로작업](https://developer.mozilla.org/docs/Web/API/HTML_DOM_API/Microtask_guide#microtasks)이 데이터 모델에 어떠한 변경도 하지 않으며, 이로 인해 변경 감지 실행이 불필요해집니다. 일반적인 예는 다음과 같습니다:
 
-* `requestAnimationFrame`, `setTimeout` or `setInterval`
-* Task or microtask scheduling by third-party libraries
+* `requestAnimationFrame`, `setTimeout` 또는 `setInterval`
+* 제3자 라이브러리에 의한 작업 또는 마이크로작업 예약
 
-This section covers how to identify such conditions, and how to run code outside the Angular zone to avoid unnecessary change detection calls.
+이 섹션에서는 이러한 조건을 식별하는 방법과 불필요한 변경 감지 호출을 피하기 위해 Angular 영역 밖에서 코드를 실행하는 방법을 설명합니다.
 
-## Identifying unnecessary change detection calls
+## 불필요한 변경 감지 호출 식별하기
 
-You can detect unnecessary change detection calls using Angular DevTools. Often they appear as consecutive bars in the profiler’s timeline with source `setTimeout`, `setInterval`, `requestAnimationFrame`, or an event handler. When you have limited calls within your application of these APIs, the change detection invocation is usually caused by a third-party library.
+Angular DevTools를 사용하여 불필요한 변경 감지 호출을 탐지할 수 있습니다. 종종 이는 프로파일러의 타임라인에서 `setTimeout`, `setInterval`, `requestAnimationFrame` 또는 이벤트 핸들러를 소스로 하는 연속적인 막대로 나타납니다. 애플리케이션 내에서 이러한 API 호출이 제한적일 때 변경 감지 호출은 일반적으로 제3자 라이브러리에 의해 발생합니다.
 
 <img alt="Angular DevTools profiler preview showing Zone pollution" src="assets/images/best-practices/runtime-performance/zone-pollution.png">
 
-In the image above, there is a series of change detection calls triggered by event handlers associated with an element. That’s a common challenge when using third-party, non-native Angular components, which do not alter the default behavior of `NgZone`.
+위 이미지에서는 요소와 연결된 이벤트 핸들러에 의해 트리거된 일련의 변경 감지 호출이 있습니다. 이는 기본 `NgZone`의 동작을 변경하지 않는 제3자 비네이티브 Angular 컴포넌트를 사용할 때 자주 발생하는 도전 과제입니다.
 
-## Run tasks outside `NgZone`
+## `NgZone` 외부에서 작업 실행하기
 
-In such cases, you can instruct Angular to avoid calling change detection for tasks scheduled by a given piece of code using [NgZone](/api/core/NgZone).
+이러한 경우, Angular에 특정 코드 조각에 의해 예약된 작업에 대해 변경 감지를 호출하지 않도록 지시할 수 있습니다 [NgZone](/api/core/NgZone)를 사용하여.
 
-<docs-code header="Run outside of the Zone" language='ts' linenums>
+<docs-code header="영역 밖에서 실행하기" language='ts' linenums>
 import { Component, NgZone, OnInit } from '@angular/core';
 
 @Component(...)
@@ -33,11 +33,11 @@ class AppComponent implements OnInit {
 }
 </docs-code>
 
-The preceding snippet instructs Angular to call `setInterval` outside the Angular Zone and skip running change detection after `pollForUpdates` runs.
+위의 코드 조각은 Angular에 `setInterval`을 Angular Zone 외부에서 호출하도록 지시하고, `pollForUpdates`가 실행된 후 변경 감지를 건너뛰도록 합니다.
 
-Third-party libraries commonly trigger unnecessary change detection cycles when their APIs are invoked within the Angular zone. This phenomenon particularly affects libraries that set up event listeners or initiate other tasks (such as timers, XHR requests, etc.). Avoid these extra cycles by calling library APIs outside the Angular zone:
+제3자 라이브러리는 종종 그들의 API가 Angular 영역 내에서 호출될 때 불필요한 변경 감지 사이클을 유발합니다. 이러한 현상은 이벤트 리스너를 설정하거나 다른 작업(예: 타이머, XHR 요청 등)을 시작하는 라이브러리에 특히 영향을 미칩니다. 라이브러리 API를 Angular 영역 밖에서 호출하여 이러한 추가 사이클을 피하세요:
 
-<docs-code header="Move the plot initialization outside of the Zone" language='ts' linenums>
+<docs-code header="플롯 초기화를 영역 밖으로 이동하기" language='ts' linenums>
 import { Component, NgZone, OnInit } from '@angular/core';
 import * as Plotly from 'plotly.js-dist-min';
 
@@ -54,13 +54,13 @@ class AppComponent implements OnInit {
 }
 </docs-code>
 
-Running `Plotly.newPlot('chart', data);` within `runOutsideAngular` instructs the framework that it shouldn’t run change detection after the execution of tasks scheduled by the initialization logic.
+`runOutsideAngular` 내에서 `Plotly.newPlot('chart', data);`를 실행하면 초기화 로직에 의해 예약된 작업 실행 후 변경 감지를 실행하지 않도록 프레임워크에 지시합니다.
 
-For example, if `Plotly.newPlot('chart', data)` adds event listeners to a DOM element, Angular does not run change detection after the execution of their handlers.
+예를 들어 `Plotly.newPlot('chart', data)`가 DOM 요소에 이벤트 리스너를 추가하면, Angular는 이 핸들러들이 실행된 후 변경 감지를 실행하지 않습니다.
 
-But sometimes, you may need to listen to events dispatched by third-party APIs. In such cases, it's important to remember that those event listeners will also execute outside of the Angular zone if the initialization logic was done there:
+하지만 때때로, 당신은 제3자 API가 전송하는 이벤트를 듣고 싶을 수 있습니다. 이러한 경우, 초기화 로직이 그곳에서 수행되었다면 해당 이벤트 리스너도 Angular 영역 밖에서 실행된다는 것을 기억하는 것이 중요합니다:
 
-<docs-code header="Check whether the handler is called outside of the Zone" language='ts' linenums>
+<docs-code header="핸들러가 영역 밖에서 호출되는지 확인하기" language='ts' linenums>
 import { Component, NgZone, OnInit, output } from '@angular/core';
 import * as Plotly from 'plotly.js-dist-min';
 
@@ -80,9 +80,9 @@ class AppComponent implements OnInit {
     const plotly = await Plotly.newPlot('chart', data);
 
     plotly.on('plotly_click', (event: Plotly.PlotMouseEvent) => {
-      // This handler will be called outside of the Angular zone because
-      // the initialization logic is also called outside of the zone. To check
-      // whether we're in the Angular zone, we can call the following:
+      // 이 핸들러는 초기화 로직이 영역 밖에서 호출되기 때문에 
+      // Angular 영역 밖에서 호출됩니다. 우리가 Angular 영역에 있는지 확인하기 위해서는 
+      // 다음을 호출할 수 있습니다:
       console.log(NgZone.isInAngularZone());
       this.plotlyClick.emit(event);
     });
@@ -90,9 +90,9 @@ class AppComponent implements OnInit {
 }
 </docs-code>
 
-If you need to dispatch events to parent components and execute specific view update logic, you should consider re-entering the Angular zone to instruct the framework to run change detection or run change detection manually:
+부모 컴포넌트에 이벤트를 전송하고 특정 뷰 업데이트 로직을 실행해야 하는 경우, 변경 감지를 실행하도록 프레임워크에 지시하거나 수동으로 변경 감지를 실행하기 위해 Angular 영역에 재진입하는 것을 고려해야 합니다:
 
-<docs-code header="Re-enter the Angular zone when dispatching event" language='ts' linenums>
+<docs-code header="이벤트 전송 시 Angular 영역에 재진입하기" language='ts' linenums>
 import { Component, NgZone, OnInit, output } from '@angular/core';
 import * as Plotly from 'plotly.js-dist-min';
 
@@ -120,4 +120,4 @@ class AppComponent implements OnInit {
 }
 </docs-code>
 
-The scenario of dispatching events outside of the Angular zone may also arise. It's important to remember that triggering change detection (for example, manually) may result to the creation/update of views outside of the Angular zone.
\ No newline at end of file
+Angular 영역 외부에서 이벤트를 전송하는 상황도 발생할 수 있습니다. 변경 감지를 트리거하는 것(예: 수동으로)은 Angular 영역 외부에서 뷰의 생성/업데이트를 초래할 수 있다는 점을 기억하는 것이 중요합니다.
\ No newline at end of file
diff --git a/adev/src/content/best-practices/style-guide.md b/adev/src/content/best-practices/style-guide.md
index 184899457993..3b5898d54ce5 100644
--- a/adev/src/content/best-practices/style-guide.md
+++ b/adev/src/content/best-practices/style-guide.md
@@ -1,70 +1,67 @@
-# Angular coding style guide
+# Angular 코딩 스타일 가이드
 
-Looking for an opinionated guide to Angular syntax, conventions, and application structure?
-Step right in.
-This style guide presents preferred conventions and, as importantly, explains why.
+Angular 구문, 규칙 및 애플리케이션 구조에 대한 의견이 반영된 가이드를 찾고 계십니까?  
+바로 들어오세요.  
+이 스타일 가이드는 선호하는 규칙을 제시하고, 그 이유를 설명합니다.
 
-## Style vocabulary
+## 스타일 용어
 
-Each guideline describes either a good or bad practice, and all have a consistent presentation.
+각 지침은 좋은 또는 나쁜 관행을 설명하며, 모두 일관된 표현을 가지고 있습니다.  
+각 지침의 표현은 권장 정도를 나타냅니다.
 
-The wording of each guideline indicates how strong the recommendation is.
+**Do**는 항상 따르야 하는 규칙입니다.  
+*항상* 이라는 단어는 다소 강할 수 있습니다.  
+정말로 항상 준수해야 하는 규칙은 극히 드뭅니다.  
+반면, *Do* 지침을 위반해야 하는 경우는 정말로 특별한 경우입니다.
 
-**Do** is one that should always be followed.
-*Always* might be a bit too strong of a word.
-Guidelines that literally should always be followed are extremely rare.
-On the other hand, you need a really unusual case for breaking a *Do* guideline.
+**Consider** 지침은 일반적으로 따르는 것이 좋습니다.  
+규칙의 의미를 완전히 이해하고 따르지 않을 이유가 분명하다면 그렇게 하십시오.  
+일관성을 유지하는 것이 목표입니다.
 
-**Consider** guidelines should generally be followed.
-If you fully understand the meaning behind the guideline and have a good reason to deviate, then do so.
-Aim to be consistent.
+**Avoid**는 거의 하지 말아야 할 것을 의미합니다.  
+*Avoid*할 코드 예시는 눈에 띄는 빨간색 머리글이 있습니다.
 
-**Avoid** indicates something you should almost never do.
-Code examples to *avoid* have an unmistakable red header.
+**왜**? <br />
+이전 권장 사항을 따르는 이유를 제공합니다.
 
-**Why**? <br />
-Gives reasons for following the previous recommendations.
+## 파일 구조 규칙
 
-## File structure conventions
+일부 코드 예시는 하나 이상의 유사한 이름의 보조 파일이 있는 파일을 표시합니다.  
+예를 들어, `hero.component.ts` 및 `hero.component.html`.
 
-Some code examples display a file that has one or more similarly named companion files.
-For example, `hero.component.ts` and `hero.component.html`.
+지침에서는 이러한 다양한 파일을 나타내기 위해 단축키 `hero.component.ts|html|css|spec`를 사용합니다.  
+이 단축키를 사용하면 이 가이드의 파일 구조를 더 쉽게 읽을 수 있습니다.
 
-The guideline uses the shortcut `hero.component.ts|html|css|spec` to represent those various files.
-Using this shortcut makes this guide's file structures easier to read and more terse.
+## 단일 책임
 
-## Single responsibility
+모든 구성 요소, 서비스 및 기타 기호에 [*단일 책임 원칙(SRP)*](https://wikipedia.org/wiki/Single_responsibility_principle)를 적용합니다.  
+이것은 애플리케이션을 더 깔끔하고 읽기 쉬우며 유지 보수가 용이하고 테스트 가능하게 만듭니다.
 
-Apply the [*single responsibility principle (SRP)*](https://wikipedia.org/wiki/Single_responsibility_principle) to all components, services, and other symbols.
-This helps make the application cleaner, easier to read and maintain, and more testable.
+### 하나의 규칙
 
-### Rule of One
+#### 스타일 01-01
 
-#### Style 01-01
+**Do** 파일당 하나의 서비스나 구성 요소와 같은 것만 정의하십시오.
 
-**Do** define one thing, such as a service or component, per file.
+**Consider** 파일을 400줄로 제한하는 것을 고려하십시오.
 
-**Consider** limiting files to 400 lines of code.
+**왜**? <br />
+파일당 하나의 구성 요소는 읽기, 유지 보수 및 소스 제어에서 팀 간 충돌을 피하는 데 훨씬 쉽게 만듭니다.
 
-**Why**? <br />
-One component per file makes it far easier to read, maintain, and avoid collisions with teams in source control.
+**왜**? <br />
+파일당 하나의 구성 요소는 변수 공유, 원치 않는 클로저 생성 또는 종속성과의 원치 않는 결합이 발생할 수 있는 파일 내에서 구성 요소를 결합할 때 종종 발생하는 숨겨진 버그를 방지합니다.
 
-**Why**? <br />
-One component per file avoids hidden bugs that often arise when combining components in a file where they may share variables, create unwanted closures, or unwanted coupling with dependencies.
+**왜**? <br />
+단일 구성 요소는 해당 파일의 기본 내보내기가 될 수 있어 라우터와 함께 지연 로딩을 용이하게 합니다.
 
-**Why**? <br />
-A single component can be the default export for its file which facilitates lazy loading with the router.
+핵심은 코드를 더 재사용 가능하게 하고, 읽기 쉽게 만들고, 실수를 덜 하게 만드는 것입니다.
 
-The key is to make the code more reusable, easier to read, and less mistake-prone.
-
-The following *negative* example defines the `AppComponent`, bootstraps the app,
-defines the `Hero` model object, and loads heroes from the server all in the same file.
-*Don't do this*.
+다음 *부정적인* 예시는 `AppComponent`를 정의하고, 앱을 부트스트랩하고, `Hero` 모델 객체를 정의하며, 서버에서 영웅을 모두 같은 파일에서 로드합니다.  
+*이런 식으로 하지 마세요*.
 
 <docs-code path="adev/src/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts" language="typescript" header="app/heroes/hero.component.ts"/>
 
-It is a better practice to redistribute the component and its
-supporting classes into their own, dedicated files.
+구성 요소와 해당 지원 클래스를 전용 파일로 재배포하는 것이 더 나은 관행입니다.
 
 <docs-code-multifile>
     <docs-code header="main.ts" path="adev/src/content/examples/styleguide/src/01-01/main.ts"/>
@@ -76,80 +73,80 @@ supporting classes into their own, dedicated files.
     <docs-code header="app/heroes/shared/mock-heroes.ts" path="adev/src/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts"/>
 </docs-code-multifile>
 
-As the application grows, this rule becomes even more important.
+애플리케이션이 성장함에 따라 이 규칙은 더욱 중요해집니다.
 
-## Naming
+## 명명
 
-Naming conventions are hugely important to maintainability and readability.
-This guide recommends naming conventions for the file name and the symbol name.
+명명 규칙은 유지 보수성과 가독성에 매우 중요합니다.  
+이 가이드는 파일 이름과 기호 이름에 대한 명명 규칙을 추천합니다.
 
-### General Naming Guidelines
+### 일반 명명 규칙
 
-#### Style 02-01
+#### 스타일 02-01
 
-**Do** use consistent names for all symbols.
+**Do** 모든 기호에 대해 일관된 이름을 사용하십시오.
 
-**Do** follow a pattern that describes the symbol's feature then its type.
-The recommended pattern is `feature.type.ts`.
+**Do** 기호의 기능을 설명하는 패턴을 따르고 그 다음에는 타입을 설명하십시오.  
+추천 패턴은 `feature.type.ts`입니다.
 
-**Why**? <br />
-Naming conventions help provide a consistent way to find content at a glance.
-Consistency within the project is vital.
-Consistency with a team is important.
-Consistency across a company provides tremendous efficiency.
+**왜**? <br />
+명명 규칙은 내용을 한눈에 쉽게 찾을 수 있는 일관된 방법을 제공하는 데 도움이 됩니다.  
+프로젝트 내의 일관성이 중요합니다.  
+팀 내 일관성도 중요합니다.  
+회사의 일관성은 엄청난 효율성을 제공합니다.
 
-**Why**? <br />
-The naming conventions should help find desired code faster and make it easier to understand.
+**왜**? <br />
+명명 규칙은 원하는 코드를 더 빨리 찾을 수 있도록 도와주고 이해하기 쉽게 만듭니다.
 
-**Why**? <br />
-Names of folders and files should clearly convey their intent.
-For example, `app/heroes/hero-list.component.ts` may contain a component that manages a list of heroes.
+**왜**? <br />
+폴더와 파일의 이름은 그 의도를 명확하게 전달해야 합니다.  
+예를 들어, `app/heroes/hero-list.component.ts`는 영웅 목록을 관리하는 구성 요소를 포함할 수 있습니다.
 
-### Separate file names with dots and dashes
+### 파일 이름을 점과 대시로 구분
 
-#### Style 02-02
+#### 스타일 02-02
 
-**Do** use dashes to separate words in the descriptive name.
+**Do** 설명적인 이름의 단어를 구분하기 위해 대시를 사용하십시오.
 
-**Do** use dots to separate the descriptive name from the type.
+**Do** 설명적인 이름과 타입 이름을 구분하기 위해 점을 사용하십시오.
 
-**Do** use consistent type names for all components following a pattern that describes the component's feature then its type.
-A recommended pattern is `feature.type.ts`.
+**Do** 모든 구성 요소에 대해 일관된 타입 이름을 사용하십시오. 구성 요소의 기능을 설명하는 패턴을 따르십시오.  
+추천 패턴은 `feature.type.ts`입니다.
 
-**Do** use conventional type names including `.service`, `.component`, `.pipe`, `.module`, and `.directive`.
-Invent additional type names if you must but take care not to create too many.
+**Do** `.service`, `.component`, `.pipe`, `.module`, 및 `.directive`와 같은 관습적인 타입 이름을 사용하십시오.  
+추가 타입 이름을 만들 필요가 있다면 너무 많이 만들지 않도록 주의하십시오.
 
-**Why**? <br />
-Type names provide a consistent way to quickly identify what is in the file.
+**왜**? <br />
+타입 이름은 파일에 무엇이 들어 있는지를 빠르게 식별할 수 있는 일관된 방법을 제공합니다.
 
-**Why**? <br />
-Type names make it easy to find a specific file type using an editor or IDE's fuzzy search techniques.
+**왜**? <br />
+타입 이름은 에디터나 IDE의 퍼지 검색 기술을 사용하여 특정 파일 유형을 쉽게 찾을 수 있도록 합니다.
 
-**Why**? <br />
-Unabbreviated type names such as `.service` are descriptive and unambiguous.
-Abbreviations such as `.srv`, `.svc`, and `.serv` can be confusing.
+**왜**? <br />
+`.service`와 같은 비축약 방식의 타입 이름은 설명적이며 모호하지 않습니다.  
+`.srv`, `.svc`, 및 `.serv`와 같은 약어는 혼란을 줄 수 있습니다.
 
-**Why**? <br />
-Type names provide pattern matching for any automated tasks.
+**왜**? <br />
+타입 이름은 자동화 작업을 위한 패턴 매칭을 제공합니다.
 
-### Symbols and file names
+### 기호 및 파일 이름
 
-#### Style 02-03
+#### 스타일 02-03
 
-**Do** use consistent names for all assets named after what they represent.
+**Do** 자신이 나타내는 것에 따라 이름을 붙인 모든 자산에 대해 일관된 이름을 사용하십시오.
 
-**Do** use upper camel case for class names.
+**Do** 클래스 이름에 대해 대문자 카멜 표기법을 사용하십시오.
 
-**Do** match the name of the symbol to the name of the file.
+**Do** 기호의 이름을 파일의 이름과 일치시킵니다.
 
-**Do** append the symbol name with the conventional suffix \(such as `Component`, `Directive`, `Module`, `Pipe`, or `Service`\) for a thing of that type.
+**Do** 해당 유형의 항목에 대한 전통적인 접미사 \(예: `Component`, `Directive`, `Module`, `Pipe`, 또는 `Service`\)로 기호 이름을 추가하십시오.
 
-**Do** give the filename the conventional suffix \(such as `.component.ts`, `.directive.ts`, `.module.ts`, `.pipe.ts`, or `.service.ts`\) for a file of that type.
+**Do** 해당 유형의 파일에 대해 전통적인 접미사 \(예: `.component.ts`, `.directive.ts`, `.module.ts`, `.pipe.ts`, 또는 `.service.ts`\)를 파일 이름에 추가하십시오.
 
-**Why**? <br />
-Consistent conventions make it easy to quickly identify and reference assets of different types.
+**왜**? <br />
+일관된 규칙은 다양한 유형의 자산을 빠르게 식별하고 참조할 수 있도록 쉽게 만듭니다.
 
-| Symbol name                                                                                                                                                                          | File name |
+| 기호 이름                                                                                                                                                                          | 파일 이름 |
 |:---                                                                                                                                                                                  |:---       |
 | <docs-code hideCopy language="typescript"> @Component({ … }) <br>export class AppComponent { } </docs-code>                             | app.component.ts |
 | <docs-code hideCopy language="typescript"> @Component({ … }) <br>export class HeroesComponent { } </docs-code>                          | heroes.component.ts |
@@ -160,63 +157,63 @@ Consistent conventions make it easy to quickly identify and reference assets of
 | <docs-code hideCopy language="typescript"> @Pipe({ name: 'initCaps' }) <br>export class InitCapsPipe implements PipeTransform { } </docs-code> | init-caps.pipe.ts |
 | <docs-code hideCopy language="typescript"> @Injectable() <br>export class UserProfileService { } </docs-code>                                  | user-profile.service.ts |
 
-### Service names
+### 서비스 이름
 
-#### Style 02-04
+#### 스타일 02-04
 
-**Do** use consistent names for all services named after their feature.
+**Do** 자신들의 기능에 따라 이름을 붙인 모든 서비스에 대해 일관된 이름을 사용하십시오.
 
-**Do** suffix a service class name with `Service`.
-For example, something that gets data or heroes should be called a `DataService` or a `HeroService`.
+**Do** 서비스 클래스 이름에 `Service`를 접미사로 붙이십시오.  
+예를 들어, 데이터를 가져오거나 영웅을 가져오는 항목은 `DataService` 또는 `HeroService`로 불려야 합니다.
 
-A few terms are unambiguously services.
-They typically indicate agency by ending in "-er".
-You may prefer to name a service that logs messages `Logger` rather than `LoggerService`.
-Decide if this exception is agreeable in your project.
-As always, strive for consistency.
+몇 가지 용어는 서비스임을 명확히 나타냅니다.  
+그들은 일반적으로 "-er"로 끝나는 에이전시를 나타냅니다.  
+메시지를 기록하는 서비스를 `LoggerService`보다 `Logger`라고 명명하는 것을 선호할 수 있습니다.  
+이 예외가 프로젝트에서 수용 가능한지 결정하십시오.  
+항상 일관성을 유지하기 위해 노력하십시오.
 
-**Why**? <br />
-Provides a consistent way to quickly identify and reference services.
+**왜**? <br />
+서비스를 빠르게 식별하고 참조할 수 있는 일관된 방법을 제공합니다.
 
-**Why**? <br />
-Clear service names such as `Logger` do not require a suffix.
+**왜**? <br />
+`Logger`와 같은 명확한 서비스 이름은 접미사가 필요 없습니다.
 
-**Why**? <br />
-Service names such as `Credit` are nouns and require a suffix and should be named with a suffix when it is not obvious if it is a service or something else.
+**왜**? <br />
+`Credit`와 같은 서비스 이름은 명사이고 접미사가 필요하며 서비스인지 다른 것인지 명확하지 않을 경우 접미사를 붙여야 합니다.
 
-| Symbol name                                                                                                                                      | File name |
+| 기호 이름                                                                                                                                      | 파일 이름 |
 |:---                                                                                                                                              |:---       |
 | <docs-code hideCopy language="typescript"> @Injectable() <br>export class HeroDataService { } </docs-code> | hero-data.service.ts |
 | <docs-code hideCopy language="typescript"> @Injectable() <br>export class CreditService { } </docs-code>   | credit.service.ts    |
 | <docs-code hideCopy language="typescript"> @Injectable() <br>export class Logger { } </docs-code>          | logger.service.ts    |
 
-### Bootstrapping
+### 부트스트래핑
 
-#### Style 02-05
+#### 스타일 02-05
 
-**Do** put bootstrapping and platform logic for the application in a file named `main.ts`.
+**Do** 애플리케이션의 부트스트래핑 및 플랫폼 로직을 `main.ts`라는 파일에 넣으십시오.
 
-**Do** include error handling in the bootstrapping logic.
+**Do** 부트스트래핑 로직에 오류 처리를 포함하십시오.
 
-**Avoid** putting application logic in `main.ts`.
-Instead, consider placing it in a component or service.
+**Avoid** `main.ts`에 애플리케이션 로직을 넣지 마십시오.  
+대신, 이를 구성 요소 또는 서비스에 두는 것이 좋습니다.
 
-**Why**? <br />
-Follows a consistent convention for the startup logic of an app.
+**왜**? <br />
+앱의 시작 로직에 대해 일관된 규칙을 따릅니다.
 
-**Why**? <br />
-Follows a familiar convention from other technology platforms.
+**왜**? <br />
+다른 기술 플랫폼에서 익숙한 규칙을 따릅니다.
 
 <docs-code header="main.ts" path="adev/src/content/examples/styleguide/src/02-05/main.ts"/>
 
-### Component selectors
+### 구성 요소 선택자
 
-#### Style 05-02
+#### 스타일 05-02
 
-**Do** use *dashed-case* or *kebab-case* for naming the element selectors of components.
+**Do** 구성 요소의 요소 선택자를 이름 짓는 데 *대시 대소문자* 또는 *케밥 대소문자*를 사용하십시오.
 
-**Why**? <br />
-Keeps the element names consistent with the specification for [Custom Elements](https://www.w3.org/TR/custom-elements).
+**왜**? <br />
+요소 이름을 [Custom Elements](https://www.w3.org/TR/custom-elements) 사양과 일치시킵니다.
 
 <docs-code header="app/heroes/shared/hero-button/hero-button.component.ts" path="adev/src/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts" visibleRegion="example"/>
 
@@ -225,22 +222,22 @@ Keeps the element names consistent with the specification for [Custom Elements](
     <docs-code header="app/app.component.html" path="adev/src/content/examples/styleguide/src/05-02/app/app.component.html"/>
 </docs-code-multifile>
 
-### Component custom prefix
+### 구성 요소 사용자 정의 접두사
 
-#### Style 02-07
+#### 스타일 02-07
 
-**Do** use a hyphenated, lowercase element selector value; for example, `admin-users`.
+**Do** 하이픈이 있는 소문자 요소 선택기 값을 사용하십시오. 예를 들어, `admin-users`.
 
-**Do** use a prefix that identifies the feature area or the application itself.
+**Do** 기능 영역이나 애플리케이션 자체를 식별하는 접두사를 사용하십시오.
 
-**Why**? <br />
-Prevents element name collisions with components in other applications and with native HTML elements.
+**왜**? <br />
+다른 애플리케이션의 구성 요소 및 기본 HTML 요소와 이름 충돌을 방지합니다.
 
-**Why**? <br />
-Makes it easier to promote and share the component in other applications.
+**왜**? <br />
+다른 애플리케이션에서 구성 요소를 홍보하고 공유하기 쉽게 만듭니다.
 
-**Why**? <br />
-Components are easy to identify in the DOM.
+**왜**? <br />
+DOM에서 구성 요소를 쉽게 식별할 수 있습니다.
 
 <docs-code header="app/heroes/hero.component.ts" path="adev/src/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts" visibleRegion="example"/>
 
@@ -250,104 +247,104 @@ Components are easy to identify in the DOM.
 
 <docs-code header="app/users/users.component.ts" path="adev/src/content/examples/styleguide/src/02-07/app/users/users.component.ts" visibleRegion="example"/>
 
-### Directive selectors
+### 지시자 선택자
 
-#### Style 02-06
+#### 스타일 02-06
 
-**Do** Use lower camel case for naming the selectors of directives.
+**Do** 지시자의 선택자 이름에 대해 소문자 카멜 표기법을 사용하십시오.
 
-**Why**? <br />
-Keeps the names of the properties defined in the directives that are bound to the view consistent with the attribute names.
+**왜**? <br />
+보기와 바인딩된 지시자에서 정의된 속성 이름이 속성 이름과 일치하게 유지됩니다.
 
-**Why**? <br />
-The Angular HTML parser is case-sensitive and recognizes lower camel case.
+**왜**? <br />
+Angular HTML 파서는 대소문자를 구분하며 소문자 카멜 표기법을 인식합니다.
 
-### Directive custom prefix
+### 지시자 사용자 정의 접두사
 
-#### Style 02-08
+#### 스타일 02-08
 
-**Do** spell non-element selectors in lower camel case unless the selector is meant to match a native HTML attribute.
+**Do** 요소가 아닌 선택자는 소문자 카멜 표기법으로 표기합니다. 지시자가 기본 HTML 속성과 일치하는 경우는 제외입니다.
 
-**Don't** prefix a directive name with `ng` because that prefix is reserved for Angular and using it could cause bugs that are difficult to diagnose.
+**Don't** 지시자 이름에 `ng`로 접두어를 붙이지 마십시오. 그 접두사는 Angular에 예약되어 있으며, 사용하면 진단하기 어려운 버그를 초래할 수 있습니다.
 
-**Why**? <br />
-Prevents name collisions.
+**왜**? <br />
+이름 충돌을 방지합니다.
 
-**Why**? <br />
-Directives are easily identified.
+**왜**? <br />
+지시자를 쉽게 식별할 수 있습니다.
 
 <docs-code header="app/shared/validate.directive.ts" path="adev/src/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts" visibleRegion="example"/>
 
 <docs-code header="app/shared/validate.directive.ts" path="adev/src/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts" visibleRegion="example"/>
 
-### Pipe names
+### 파이프 이름
 
-#### Style 02-09
+#### 스타일 02-09
 
-**Do** use consistent names for all pipes, named after their feature.
-The pipe class name should use `UpperCamelCase` \(the general convention for class names\), and the corresponding `name` string should use *lowerCamelCase*.
-The `name` string cannot use hyphens \("dash-case" or "kebab-case"\).
+**Do** 모든 파이프에 대해 일관된 이름을 사용하십시오. 각 파이프는 그 기능에 맞춰 이름을 붙여야 합니다.  
+파이프 클래스 이름은 `UpperCamelCase` \(클래스 이름의 일반 규칙\)를 사용하고, 해당하는 `name` 문자열은 *lowerCamelCase*를 사용해야 합니다.  
+`name` 문자열은 하이픈을 사용할 수 없습니다 \("대시 대소문자" 또는 "케밥 대소문자"\).
 
-**Why**? <br />
-Provides a consistent way to quickly identify and reference pipes.
+**왜**? <br />
+파이프를 빠르게 식별하고 참조할 수 있는 일관된 방법을 제공합니다.
 
-| Symbol name                                                                                                                                                                          | File name |
+| 기호 이름                                                                                                                                                                          | 파일 이름 |
 |:---                                                                                                                                                                                  |:---       |
 | <docs-code hideCopy language="typescript"> @Pipe({ name: 'ellipsis' }) <br>export class EllipsisPipe implements PipeTransform { } </docs-code> | ellipsis.pipe.ts  |
 | <docs-code hideCopy language="typescript"> @Pipe({ name: 'initCaps' }) <br>export class InitCapsPipe implements PipeTransform { } </docs-code> | init-caps.pipe.ts |
 
-### Unit test file names
+### 단위 테스트 파일 이름
 
-#### Style 02-10
+#### 스타일 02-10
 
-**Do** name test specification files the same as the component they test.
+**Do** 테스트 사양 파일의 이름을 해당 테스트의 구성 요소와 동일하게 지정하십시오.
 
-**Do** name test specification files with a suffix of `.spec`.
+**Do** 테스트 사양 파일 이름에 `.spec` 접미사를 붙이십시오.
 
-**Why**? <br />
-Provides a consistent way to quickly identify tests.
+**왜**? <br />
+테스트를 빠르게 식별할 수 있는 일관된 방법을 제공합니다.
 
-**Why**? <br />
-Provides pattern matching for [karma](https://karma-runner.github.io) or other test runners.
+**왜**? <br />
+[karma](https://karma-runner.github.io) 또는 기타 테스트 실행기를 위한 패턴 매칭을 제공합니다.
 
-| Test type  | File names |
+| 테스트 유형 | 파일 이름 |
 |:---        |:---        |
-| Components | heroes.component.spec.ts <br /> hero-list.component.spec.ts <br /> hero-detail.component.spec.ts |
-| Services   | logger.service.spec.ts <br /> hero.service.spec.ts <br /> filter-text.service.spec.ts            |
-| Pipes      | ellipsis.pipe.spec.ts <br /> init-caps.pipe.spec.ts                                              |
+| 구성 요소 | heroes.component.spec.ts <br /> hero-list.component.spec.ts <br /> hero-detail.component.spec.ts |
+| 서비스   | logger.service.spec.ts <br /> hero.service.spec.ts <br /> filter-text.service.spec.ts            |
+| 파이프      | ellipsis.pipe.spec.ts <br /> init-caps.pipe.spec.ts                                              |
 
-## Application structure and NgModules
+## 애플리케이션 구조 및 NgModules
 
-Have a near-term view of implementation and a long-term vision.
-Start small but keep in mind where the application is heading.
+구현에 대한 단기적 관점을 갖고 장기적 비전을 세우십시오.  
+작게 시작하되 애플리케이션이 향후 나아갈 방향을 염두에 두십시오.
 
-All of the application's code goes in a folder named `src`.
-All feature areas are in their own folder.
+애플리케이션의 모든 코드는 `src`라는 폴더에 저장됩니다.  
+모든 기능 영역은 각각의 폴더에 위치합니다.
 
-All content is one asset per file.
-Each component, service, and pipe is in its own file.
-All third party vendor scripts are stored in another folder and not in the `src` folder.
-Use the naming conventions for files in this guide.
+모든 콘텐츠는 파일당 하나의 자산입니다.  
+각 구성 요소, 서비스 및 파이프는 각자의 파일에 있습니다.  
+모든 서드파티 벤더 스크립트는 다른 폴더에 저장되고 `src` 폴더에 저장되지 않습니다.  
+파일에 대한 이 가이드의 명명 규칙을 사용하십시오.
 
-### Overall structural guidelines
+### 전체 구조 규칙
 
-#### Style 04-06
+#### 스타일 04-06
 
-**Do** start small but keep in mind where the application is heading down the road.
+**Do** 작게 시작하되 애플리케이션이 향후 나아갈 방향을 염두에 두십시오.
 
-**Do** have a near term view of implementation and a long term vision.
+**Do** 구현에 대해 단기적 관점을 갖고 장기적 비전을 세우십시오.
 
-**Do** put all of the application's code in a folder named `src`.
+**Do** 애플리케이션의 모든 코드를 `src`라는 폴더에 넣으십시오.
 
-**Consider** creating a folder for a component when it has multiple accompanying files \(`.ts`, `.html`, `.css`, and `.spec`\).
+**Consider** 여러 개의 보조 파일 \(`.ts`, `.html`, `.css`, 및 `.spec`\)이 있는 경우 구성 요소 폴더를 만드는 것을 고려하십시오.
 
-**Why**? <br />
-Helps keep the application structure small and easy to maintain in the early stages, while being easy to evolve as the application grows.
+**왜**? <br />
+애플리케이션 구조를 작고 유지 보수하기 쉽게 만드는 데 도움이 되며, 애플리케이션이 성장할수록 발전하기 쉬워집니다.
 
-**Why**? <br />
-Components often have four files \(for example, `*.html`, `*.css`, `*.ts`, and `*.spec.ts`\) and can clutter a folder quickly.
+**왜**? <br />
+구성 요소는 종종 네 개의 파일 \(`*.html`, `*.css`, `*.ts`, 및 `*.spec.ts`\)을 가지며 빠르게 폴더를 혼잡하게 만들 수 있습니다.
 
-Here is a compliant folder and file structure:
+다음은 준수하는 폴더 및 파일 구조입니다:
 
 ```markdown
 project root
@@ -390,115 +387,113 @@ project root
 └── …
 ```
 
-HELPFUL: While components in dedicated folders are widely preferred, another option for small applications is to keep components flat \(not in a dedicated folder\).
-This adds up to four files to the existing folder, but also reduces the folder nesting.
-Whatever you choose, be consistent.
+유용한 팁: 전용 폴더에 구성 요소를 두는 것이 널리 선호되지만, 작은 애플리케이션의 경우 구성 요소를 평면으로 유지하는 것도 선택할 수 있습니다 \(전용 폴더에 두지 않음\).  
+이렇게 하면 기존 폴더에 최대 네 개의 파일이 추가되지만 폴더의 중첩도 줄어듭니다.  
+어떤 것을 선택하든 일관성을 유지해야 합니다.
 
-### *Folders-by-feature* structure
+### *기능별 폴더* 구조
 
-#### Style 04-07
+#### 스타일 04-07
 
-**Do** create folders named for the feature area they represent.
+**Do** 그 기능 영역을 나타내는 이름의 폴더를 만드십시오.
 
-**Why**? <br />
-A developer can locate the code and identify what each file represents at a glance.
-The structure is as flat as it can be and there are no repetitive or redundant names.
+**왜**? <br />
+개발자는 코드를 찾고 각 파일이 무엇을 나타내는지 한눈에 식별할 수 있습니다.  
+구조는 가능한 한 평면이며 반복되거나 불필요한 이름이 없습니다.
 
-**Why**? <br />
-Helps reduce the application from becoming cluttered through organizing the content.
+**왜**? <br />
+내용을 정리하여 애플리케이션이 복잡해지지 않도록 도와줍니다.
 
-**Why**? <br />
-When there are a lot of files, for example 10+, locating them is easier with a consistent folder structure and more difficult in a flat structure.
+**왜**? <br />
+파일이 많을 때, 예를 들어 10개 이상일 경우에는 일관된 폴더 구조로 찾기가 편하고 평면 구조에서는 더 어렵습니다.
 
-For more information, refer to [this folder and file structure example](#overall-structural-guidelines).
+더 많은 정보는 [이 폴더 및 파일 구조 예제](#overall-structural-guidelines)를 참조하십시오.
 
-### App *root module*
+### 앱 *루트 모듈*
 
-IMPORTANT: The following style guide recommendations are for applications based on `NgModule`. New applications should use standalone components, directives, and pipes instead.
+중요: 다음 스타일 가이드 권장 사항은 `NgModule` 기반 애플리케이션에 해당됩니다. 새 애플리케이션은 독립형 구성 요소, 지시자 및 파이프를 사용해야 합니다.
 
-#### Style 04-08
+#### 스타일 04-08
 
-**Do** create an NgModule in the application's root folder, for example, in `/src/app` if creating a `NgModule` based app.
+**Do** 애플리케이션의 루트 폴더에 NgModule을 생성하십시오. 예를 들어, `/src/app`에 `NgModule` 기반 앱을 만들 때.
 
-**Why**? <br />
-Every `NgModule` based application requires at least one root NgModule.
+**왜**? <br />
+모든 `NgModule` 기반 애플리케이션은 최소한 하나의 루트 NgModule이 필요합니다.
 
-**Consider** naming the root module `app.module.ts`.
+**Consider** 루트 모듈의 이름을 `app.module.ts`로 하십시오.
 
-**Why**? <br />
-Makes it easier to locate and identify the root module.
+**왜**? <br />
+루트 모듈을 식별하고 찾기 쉽게 만듭니다.
 
 <docs-code path="adev/src/content/examples/styleguide/src/04-08/app/app.module.ts" language="typescript" visibleRegion="example" header="app/app.module.ts"/>
 
-### Feature modules
+### 기능 모듈
 
-#### Style 04-09
+#### 스타일 04-09
 
-**Do** create an NgModule for all distinct features in an application; for example, a `Heroes` feature.
+**Do** 애플리케이션의 모든 특정 기능에 대해 NgModule을 만드십시오. 예를 들어, `Heroes` 기능.
 
-**Do** place the feature module in the same named folder as the feature area; for example, in `app/heroes`.
+**Do** 기능 모듈을 기능 영역과 동일한 이름의 폴더에 배치하십시오. 예를 들어, `app/heroes`에.
 
-**Do** name the feature module file reflecting the name of the feature area and folder; for example, `app/heroes/heroes.module.ts`.
+**Do** 기능 모듈 파일을 기능 영역 및 폴더의 이름을 반영하여 이름 지으십시오. 예를 들어, `app/heroes/heroes.module.ts`.
 
-**Do** name the feature module symbol reflecting the name of the feature area, folder, and file; for example, `app/heroes/heroes.module.ts` defines `HeroesModule`.
+**Do** 기능 모듈 기호를 기능 영역, 폴더 및 파일 이름을 반영하여 이름 지으십시오. 예를 들어, `app/heroes/heroes.module.ts`는 `HeroesModule`을 정의합니다.
 
-**Why**? <br />
-A feature module can expose or hide its implementation from other modules.
+**왜**? <br />
+기능 모듈은 구현을 다른 모듈에서 노출하거나 숨길 수 있습니다.
 
-**Why**? <br />
-A feature module identifies distinct sets of related components that comprise the feature area.
+**왜**? <br />
+기능 모듈은 기능 영역을 구성하는 관련된 구성 요소의 특정 세트를 식별합니다.
 
-**Why**? <br />
-A feature module can easily be routed to both eagerly and lazily.
+**왜**? <br />
+기능 모듈은 열기 및 지연 로드 모두에 쉽게 라우팅될 수 있습니다.
 
-**Why**? <br />
-A feature module defines clear boundaries between specific functionality and other application features.
+**왜**? <br />
+기능 모듈은 특정 기능과 다른 애플리케이션 기능 간의 명확한 경계를 정의합니다.
 
-**Why**? <br />
-A feature module helps clarify and make it easier to assign development responsibilities to different teams.
+**왜**? <br />
+기능 모듈은 개발 책임을 여러 팀에 원활하게 배분할 수 있습니다.
 
-**Why**? <br />
-A feature module can easily be isolated for testing.
+**왜**? <br />
+기능 모듈은 쉽게 테스트를 위해 격리될 수 있습니다.
 
-### Shared feature module
+### 공유 기능 모듈
 
-#### Style 04-10
+#### 스타일 04-10
 
-**Do** create a feature module named `SharedModule` in a `shared` folder; for example, `app/shared/shared.module.ts` defines `SharedModule`.
+**Do** `SharedModule`라는 기능 모듈을 `shared` 폴더에 만드십시오. 예를 들어, `app/shared/shared.module.ts`는 `SharedModule`을 정의합니다.
 
-**Do** declare components, directives, and pipes in a shared module when those items will be re-used and referenced by the components declared in other feature modules.
+**Do** 구성 요소, 지시자 및 파이프를 공유 모듈에 선언하십시오. 이러한 항목이 다른 기능 모듈에서 정의된 구성 요소에 의해 재사용되고 참조될 것입니다.
 
-**Consider** using the name SharedModule when the contents of a shared
-module are referenced across the entire application.
+**Consider** 공유 모듈의 내용이 전체 애플리케이션에서 참조되는 경우 `SharedModule`이라는 이름을 사용하는 것을 고려하십시오.
 
-**Consider** *not* providing services in shared modules.
-Services are usually singletons that are provided once for the entire application or in a particular feature module.
-There are exceptions, however.
-For example, in the sample code that follows, notice that the `SharedModule` provides `FilterTextService`.
-This is acceptable here because the service is stateless;that is, the consumers of the service aren't impacted by new instances.
+**Consider** 공유 모듈에서 서비스를 제공하지 마십시오.  
+서비스는 일반적으로 전체 애플리케이션이나 특정 기능 모듈에 대해 한 번 제공되는 단일 객체입니다.  
+그러나 예외가 있을 수 있습니다.  
+예를 들어, 아래의 샘플 코드에서 `SharedModule`이 `FilterTextService`를 제공하는 것을 확인하십시오.  
+여기서 서비스가 상태가 없기 때문에 허용됩니다. 즉, 서비스 소비자는 새로운 인스턴스의 영향을 받지 않습니다.
 
-**Do** import all modules required by the assets in the `SharedModule`; for example, `CommonModule` and `FormsModule`.
+**Do** `SharedModule`의 자산에 필요한 모든 모듈을 가져오십시오. 예를 들어, `CommonModule` 및 `FormsModule`.
 
-**Why**? <br />
-`SharedModule` will contain components, directives, and pipes that may need features from another common module; for example, `ngFor` in `CommonModule`.
+**왜**? <br />
+`SharedModule`은 다른 공통 모듈의 기능이 필요할 수 있는 구성 요소, 지시자 및 파이프를 포함합니다. 예를 들어, `CommonModule`의 `ngFor`.
 
-**Do** declare all components, directives, and pipes in the `SharedModule`.
+**Do** `SharedModule`의 모든 구성 요소, 지시자 및 파이프를 선언하십시오.
 
-**Do** export all symbols from the `SharedModule` that other feature modules need to use.
+**Do** 다른 기능 모듈에서 사용하기 위해 `SharedModule`에서 필요한 모든 기호를 내보내십시오.
 
-**Why**? <br />
-`SharedModule` exists to make commonly used components, directives, and pipes available for use in the templates of components in many other modules.
+**왜**? <br />
+`SharedModule`은 여러 다른 모듈의 구성 요소 템플릿에서 사용할 수 있는 일반적으로 사용되는 구성 요소, 지시자 및 파이프를 만들기 위해 존재합니다.
 
-**Avoid** specifying app-wide singleton providers in a `SharedModule`.
-Intentional singletons are OK.
-Take care.
+**Avoid** `SharedModule`에서 애플리케이션 전역 단일 제공자를 지정하십시오.  
+의도적인 단일 제공자는 괜찮습니다.  
+주목하십시오.
 
-**Why**? <br />
-A lazy loaded feature module that imports that shared module will make its own copy of the service and likely have undesirable results.
+**왜**? <br />
+지연 로드된 기능 모듈이 공유 모듈을 가져오면 서비스의 자체 복사본이 생성되고 원하지 않는 결과가 발생할 수 있습니다.
 
-**Why**? <br />
-You don't want each module to have its own separate instance of singleton services.
-Yet there is a real danger of that happening if the `SharedModule` provides a service.
+**왜**? <br />
+각 모듈이 단일 서비스의 별도 인스턴스를 갖게 하지 않으려면 그렇지 않으면 `SharedModule`이 서비스를 제공하면 발생할 수 있습니다.
 
 ```markdown
 project root
@@ -526,37 +521,37 @@ project root
     <docs-code header="app/heroes/heroes.component.html" path="adev/src/content/examples/styleguide/src/04-10/app/heroes/heroes.component.html"/>
 </docs-code-multifile>
 
-### Lazy Loaded folders
+### 지연 로드 폴더
 
-#### Style 04-11
+#### 스타일 04-11
 
-A distinct application feature or workflow may be *lazy loaded* or *loaded on demand* rather than when the application starts.
+특정 애플리케이션 기능이나 워크플로를 *지연 로드* 또는 *요청 시 로드* 할 수 있습니다. 애플리케이션이 시작될 때가 아닌 경우입니다.
 
-**Do** put the contents of lazy loaded features in a *lazy loaded folder*.
-A typical *lazy loaded folder* contains a *routing component*, its child components, and their related assets.
+**Do** 지연 로드된 기능의 내용을 *지연 로드 폴더*에 넣으십시오.  
+일반적인 *지연 로드 폴더*는 *라우팅 구성 요소*, 자식 구성 요소 및 관련 자산을 포함합니다.
 
-**Why**? <br />
-The folder makes it easy to identify and isolate the feature content.
+**왜**? <br />
+폴더가 기능 콘텐츠를 식별하고 격리하는 것을 쉽게 만듭니다.
 
-## Components
+## 구성 요소
 
-### Components as elements
+### 요소로서의 구성 요소
 
-#### Style 05-03
+#### 스타일 05-03
 
-**Consider** giving components an *element* selector, as opposed to *attribute* or *class* selectors.
+**Consider** 구성 요소에 *요소* 선택기를 부여하십시오. *속성* 또는 *클래스* 선택기 대신에.
 
-**Why**? <br />
-Components have templates containing HTML and optional Angular template syntax.
-They display content.
-Developers place components on the page as they would native HTML elements and web components.
+**왜**? <br />
+구성 요소에는 HTML 및 선택적 Angular 템플릿 구문이 포함된 템플릿이 있습니다.  
+그들은 콘텐츠를 표시합니다.  
+개발자는 구성 요소를 페이지에 원래 HTML 요소 및 웹 구성 요소처럼 배치합니다.
 
-**Why**? <br />
-It is easier to recognize that a symbol is a component by looking at the template's html.
+**왜**? <br />
+템플릿의 HTML을 보고 기호가 구성 요소임을 인식하기가 더 쉽습니다.
 
-HELPFUL: There are a few cases where you give a component an attribute, such as when you want to augment a built-in element.
-For example, [Material Design](https://material.angular.io/components/button/overview) uses this technique with `<button mat-button>`.
-However, you wouldn't use this technique on a custom element.
+유용한 팁: 기본 요소를 증강하려는 경우와 같이 구성 요소에 속성을 부여하는 몇 가지 사례가 있습니다.  
+예를 들어, [Material Design](https://material.angular.io/components/button/overview)은 `<button mat-button>`에서 이 기술을 사용합니다.  
+그러나 사용자 정의 요소에서는 이 기술을 사용하지 않을 것입니다.
 
 <docs-code header="app/heroes/hero-button/hero-button.component.ts" path="adev/src/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts" visibleRegion="example"/>
 
@@ -567,30 +562,30 @@ However, you wouldn't use this technique on a custom element.
     <docs-code header="app/app.component.html" path="adev/src/content/examples/styleguide/src/05-03/app/app.component.html"/>
 </docs-code-multifile>
 
-### Extract templates and styles to their own files
+### 템플릿 및 스타일을 별도의 파일로 추출
 
-#### Style 05-04
+#### 스타일 05-04
 
-**Do** extract templates and styles into a separate file, when more than 3 lines.
+**Do** 3줄 이상일 때 템플릿 및 스타일을 별도의 파일로 추출하십시오.
 
-**Do** name the template file `[component-name].component.html`, where [component-name] is the component name.
+**Do** 템플릿 파일의 이름을 `[component-name].component.html`로 지정하십시오. 여기서 [component-name]은 구성 요소의 이름입니다.
 
-**Do** name the style file `[component-name].component.css`, where [component-name] is the component name.
+**Do** 스타일 파일의 이름을 `[component-name].component.css`로 지정하십시오. 여기서 [component-name]은 구성 요소의 이름입니다.
 
-**Do** specify *component-relative* URLs, prefixed with `./`.
+**Do** `./`로 접두사된 *구성 요소 상대* URL을 지정하십시오.
 
-**Why**? <br />
-Large, inline templates and styles obscure the component's purpose and implementation, reducing readability and maintainability.
+**왜**? <br />
+큰 인라인 템플릿과 스타일은 구성 요소의 목적과 구현을 흐릿하게 하여 가독성과 유지 보수성을 감소시킵니다.
 
-**Why**? <br />
-In most editors, syntax hints and code snippets aren't available when developing inline templates and styles.
-The Angular TypeScript Language Service \(forthcoming\) promises to overcome this deficiency for HTML templates in those editors that support it; it won't help with CSS styles.
+**왜**? <br />
+대부분의 에디터에서 인라인 템플릿 및 스타일을 개발할 때 구문 힌트 및 코드 스니펫을 사용할 수 없습니다.  
+Angular TypeScript 언어 서비스 \(곧 출시 예정\)는 이러한 에디터에서 HTML 템플릿을 지원하여 이 결점을 극복할 수 있습니다. 그러나 CSS 스타일에 대해서는 도움이 되지 않습니다.
 
-**Why**? <br />
-A *component relative* URL requires no change when you move the component files, as long as the files stay together.
+**왜**? <br />
+구성 요소 파일을 이동할 때 파일이 함께 유지되는 한 *구성 요소 상대* URL은 변경이 필요 없습니다.
 
-**Why**? <br />
-The `./` prefix is standard syntax for relative URLs; don't depend on Angular's current ability to do without that prefix.
+**왜**? <br />
+`./` 접두사는 상대 URL의 표준 구문입니다. Angular의 현재 기능에 의존해서는 안 됩니다.
 
 <docs-code header="app/heroes/heroes.component.ts" path="adev/src/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts" visibleRegion="example"/>
 
@@ -600,43 +595,42 @@ The `./` prefix is standard syntax for relative URLs; don't depend on Angular's
     <docs-code header="app/heroes/heroes.component.css" path="adev/src/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css"/>
 </docs-code-multifile>
 
-### Decorate `input` and `output` properties
+### `input` 및 `output` 속성 장식
 
-#### Style 05-12
+#### 스타일 05-12
 
-**Do** use the `@Input()` and `@Output()` class decorators instead of the `inputs` and `outputs` properties of the `@Directive` and `@Component` metadata:
+**Do** `@Input()` 및 `@Output()` 클래스 장식자를 사용하고, `@Directive` 및 `@Component` 메타데이터의 `inputs` 및 `outputs` 속성은 사용하지 마십시오:
 
-**Consider** placing `@Input()` or `@Output()` on the same line as the property it decorates.
+**Consider** `@Input()` 또는 `@Output()`를 장식하는 속성과 같은 줄에 배치하는 것을 고려하십시오.
 
-**Why**? <br />
-It is easier and more readable to identify which properties in a class are inputs or outputs.
+**왜**? <br />
+클래스의 어떤 속성이 입력인지 출력인지 식별하는 것이 더 쉽고 가독성이 향상됩니다.
 
-**Why**? <br />
-If you ever need to rename the property or event name associated with `@Input()` or `@Output()`, you can modify it in a single place.
+**왜**? <br />
+`@Input()` 또는 `@Output()`와 관련된 속성이나 이벤트 이름을 변경해야 하는 경우, 한 곳에서 수정할 수 있습니다.
 
-**Why**? <br />
-The metadata declaration attached to the directive is shorter and thus more readable.
+**왜**? <br />
+지시자에 대한 메타데이터 선언이 더 짧고 가독성이 뛰어납니다.
 
-**Why**? <br />
-Placing the decorator on the same line *usually* makes for shorter code and still easily identifies the property as an input or output.
-Put it on the line above when doing so is clearly more readable.
+**왜**? <br />
+장식자를 같은 줄에 배치하는 것은 *대개* 더 짧은 코드를 만들고 속성이 입력 또는 출력임을 쉽게 식별할 수 있습니다.  
+더 가독성이 좋으면 이전 줄에 두십시오.
 
 <docs-code header="app/heroes/shared/hero-button/hero-button.component.ts" path="adev/src/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts" visibleRegion="example"/>
 
 <docs-code header="app/heroes/shared/hero-button/hero-button.component.ts" path="adev/src/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts" visibleRegion="example"/>
 
-### Avoid aliasing `inputs` and `outputs`
+### `inputs` 및 `outputs` 별칭 피하기
 
-#### Style 05-13
+#### 스타일 05-13
 
-**Avoid** `input` and `output` aliases except when it serves an important purpose.
+**Avoid** `input` 및 `output` 별칭은 중요한 목적이 필요 없는 한 사용하지 마십시오.
 
-**Why**? <br />
-Two names for the same property \(one private, one public\) is inherently confusing.
+**왜**? <br />
+같은 속성에 대해 두 가지 이름 \(`하나는 비공식적이고 다른 하나는 공식적`\)을 두는 것은 본질적으로 혼란스럽습니다.
 
-**Why**? <br />
-You should use an alias when the directive name is also an `input` property,
-and the directive name doesn't describe the property.
+**왜**? <br />
+지시자 이름이 `input` 속성이기도 하고, 지시자 이름이 속성을 설명하지 않는 경우 알리아스 사용을 고려해야 합니다.
 
 <docs-code header="app/heroes/shared/hero-button/hero-button.component.ts" path="adev/src/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts" visibleRegion="example"/>
 
@@ -648,45 +642,45 @@ and the directive name doesn't describe the property.
     <docs-code header="app/app.component.html" path="adev/src/content/examples/styleguide/src/05-13/app/app.component.html"/>
 </docs-code-multifile>
 
-### Delegate complex component logic to services
+### 복잡한 구성 요소 논리를 서비스에 위임
 
-#### Style 05-15
+#### 스타일 05-15
 
-**Do** limit logic in a component to only that required for the view.
-All other logic should be delegated to services.
+**Do** 구성 요소의 논리를 뷰에 필요한 논리로 제한하십시오.  
+나머지 모든 논리는 서비스에 위임해야 합니다.
 
-**Do** move reusable logic to services and keep components simple and focused on their intended purpose.
+**Do** 재사용 가능한 논리를 서비스를 통해 이동시키고 구성 요소는 단순하고 의도한 목적에 집중하게 하십시오.
 
-**Why**? <br />
-Logic may be reused by multiple components when placed within a service and exposed as a function.
+**왜**? <br />
+로직은 서비스 내에 배치되어 함수로 노출될 때 여러 구성 요소에서 재사용할 수 있습니다.
 
-**Why**? <br />
-Logic in a service can more easily be isolated in a unit test, while the calling logic in the component can be easily mocked.
+**왜**? <br />
+서비스 내의 로직은 단위 테스트에서 더 쉽게 격리될 수 있으며, 구성 요소에서 호출되는 로직을 쉽게 모의할 수 있습니다.
 
-**Why**? <br />
-Removes dependencies and hides implementation details from the component.
+**왜**? <br />
+구성 요소에서 종속성을 제거하고 구현 세부사항을 숨깁니다.
 
-**Why**? <br />
-Keeps the component slim, trim, and focused.
+**왜**? <br />
+구성 요소를 날씬하고 간결하며 집중하도록 유지합니다.
 
 <docs-code header="app/heroes/hero-list/hero-list.component.ts" path="adev/src/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts"/>
 
 <docs-code header="app/heroes/hero-list/hero-list.component.ts" path="adev/src/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts" visibleRegion="example"/>
 
-### Don't prefix `output` properties
+### `output` 속성에 접두어를 붙이지 마십시오.
 
-#### Style 05-16
+#### 스타일 05-16
 
-**Do** name events without the prefix `on`.
+**Do** 이벤트의 이름 앞에 `on` 접두어를 붙이지 마십시오.
 
-**Do** name event handler methods with the prefix `on` followed by the event name.
+**Do** 이벤트 핸들러 메서드에 이벤트 이름 다음에 `on` 접두어를 붙이십시오.
 
-**Why**? <br />
-This is consistent with built-in events such as button clicks.
+**왜**? <br />
+이는 버튼 클릭과 같은 내장 이벤트와 일관성이 있습니다.
 
-**Why**? <br />
-Angular allows for an [alternative syntax](guide/templates/binding) `on-*`.
-If the event itself was prefixed with `on` this would result in an `on-onEvent` binding expression.
+**왜**? <br />
+Angular는 [대체 구문](guide/templates/binding) `on-*`을 허용합니다.  
+이벤트 이름에 `on` 접두사가 붙으면 `on-onEvent` 바인딩 표현식이 생성됩니다.
 
 <docs-code header="app/heroes/hero.component.ts" path="adev/src/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts" visibleRegion="example"/>
 
@@ -697,190 +691,188 @@ If the event itself was prefixed with `on` this would result in an `on-onEvent`
     <docs-code header="app/app.component.html" path="adev/src/content/examples/styleguide/src/05-16/app/app.component.html"/>
 </docs-code-multifile>
 
-### Put presentation logic in the component class
+### 표현 논리를 구성 요소 클래스에 넣으십시오.
 
-#### Style 05-17
+#### 스타일 05-17
 
-**Do** put presentation logic in the component class, and not in the template.
+**Do** 표현 논리를 구성 요소 클래스에 두고 템플릿에 두지 마십시오.
 
-**Why**? <br />
-Logic will be contained in one place \(the component class\) instead of being spread in two places.
+**왜**? <br />
+논리가 한 곳 \(구성 요소 클래스\)에 저장되므로 두 육각형에 분산되지 않습니다.
 
-**Why**? <br />
-Keeping the component's presentation logic in the class instead of the template improves testability, maintainability, and reusability.
+**왜**? <br />
+구성 요소의 표현 논리를 템플릿 대신 클래스에 보관하면 테스트 가능성, 유지 보수성 및 재사용성이 향상됩니다.
 
 <docs-code header="app/heroes/hero-list/hero-list.component.ts" path="adev/src/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts" visibleRegion="example"/>
 
 <docs-code header="app/heroes/hero-list/hero-list.component.ts" path="adev/src/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts" visibleRegion="example"/>
-### Initialize inputs
+### 입력 초기화
 
-#### Style 05-18
+#### 스타일 05-18
 
-TypeScript's `--strictPropertyInitialization` compiler option ensures that a class initializes its properties during construction.
-When enabled, this option causes the TypeScript compiler to report an error if the class does not set a value to any property that is not explicitly marked as optional.
+TypeScript의 `--strictPropertyInitialization` 컴파일러 옵션은 클래스가 생성하는 동안 속성을 초기화하도록 보장합니다.  
+이 옵션이 활성화되면 클래스가 명시적으로 선택란로 표시되지 않은 속성에 값을 설정하지 않으면 TypeScript 컴파일러가 오류를 보고합니다.
 
-By design, Angular treats all `@Input` properties as optional.
-When possible, you should satisfy `--strictPropertyInitialization` by providing a default value.
+설계상 Angular는 모든 `@Input` 속성을 선택적으로 처리합니다.  
+가능할 경우 기본값을 제공하여 `--strictPropertyInitialization`을 충족해야 합니다.
 
 <docs-code header="app/heroes/hero/hero.component.ts" path="adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.ts" visibleRegion="example"/>
 
-If the property is hard to construct a default value for, use `?` to explicitly mark the property as optional.
+기본값을 생성하기 어려운 속성이 있다면 `?`를 사용하여 해당 속성을 명시적 선택적 속성으로 표시하십시오.
 
 <docs-code header="app/heroes/hero/hero.component.ts" path="adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.optional.ts" visibleRegion="example"/>
 
-You may want to have a required `@Input` field, meaning all your component users are required to pass that attribute.
-In such cases, use a default value.
-Just suppressing the TypeScript error with `!` is insufficient and should be avoided because it will prevent the type checker from ensuring the input value is provided.
+필수 `@Input` 필드를 가져오고 싶다는 의미이기에 모든 구성 요소 사용자는 해당 속성을 전달해야 합니다.  
+이런 경우에는 기본값을 사용해야 합니다.  
+TypeScript 오류를 `!`로 억제하는 것은 충분하지 않으며 피해야 합니다. 이는 입력 값이 제공되도록 유형 검사기가 확인하는 것을 방해합니다.
 
 <docs-code header="app/heroes/hero/hero.component.ts" path="adev/src/content/examples/styleguide/src/05-18/app/heroes/hero/hero.component.avoid.ts" visibleRegion="example"/>
 
-## Directives
+## 지시자
 
-### Use directives to enhance an element
+### 요소를 향상시키기 위해 지시자를 사용하십시오.
 
-#### Style 06-01
+#### 스타일 06-01
 
-**Do** use attribute directives when you have presentation logic without a template.
+**Do** 프레젠테이션 로직이 템플릿 없이 있는 경우 속성 지시자를 사용하십시오.
 
-**Why**? <br />
-Attribute directives don't have an associated template.
+**왜**? <br />
+속성 지시자는 관련된 템플릿이 없습니다.
 
-**Why**? <br />
-An element may have more than one attribute directive applied.
+**왜**? <br />
+하나의 요소에 여러 개의 속성 지시자가 적용될 수 있습니다.
 
 <docs-code header="app/shared/highlight.directive.ts" path="adev/src/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts" visibleRegion="example"/>
 
 <docs-code header="app/app.component.html" path="adev/src/content/examples/styleguide/src/06-01/app/app.component.html"/>
 
-### `HostListener`/`HostBinding` decorators versus `host` metadata
+### `HostListener`/`HostBinding` 장식자 대 `host` 메타데이터
 
-#### Style 06-03
+#### 스타일 06-03
 
-**Consider** preferring the `@HostListener` and `@HostBinding` to the `host` property of the `@Directive` and `@Component` decorators.
+**Consider** `@Directive` 및 `@Component` 장식자의 `host` 속성 대신 `@HostListener`와 `@HostBinding`을 선호하십시오.
 
-**Do** be consistent in your choice.
+**Do** 선택 사항에서 일관성을 유지하십시오.
 
-**Why**? <br />
-The property associated with `@HostBinding` or the method associated with `@HostListener` can be modified only in a single place —in the directive's class.
-If you use the `host` metadata property, you must modify both the property/method declaration in the directive's class and the metadata in the decorator associated with the directive.
+**왜**? <br />
+`@HostBinding`과 관련된 속성이나 `@HostListener`와 관련된 메서드는 단일 위치에서만 수정될 수 있습니다. 이러한 지시자의 클래스에서 변수를 조정해야 합니다.  
+`host` 메타데이터 속성을 사용하는 경우, 속성/메서드 선언과 지시자와 관련된 장식자에서 모두 수정해야 합니다.
 
 <docs-code header="app/shared/validator.directive.ts" path="adev/src/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts"/>
 
-Compare with the less preferred `host` metadata alternative.
+덜 선호되는 `host` 메타데이터 대안과 비교하십시오.
 
-**Why**? <br />
-The `host` metadata is only one term to remember and doesn't require extra ES imports.
+**왜**? <br />
+`host` 메타데이터는 한 가지 기억할 용어만 필요하며 추가 ES 가져오기를 요구하지 않습니다.
 
 <docs-code header="app/shared/validator2.directive.ts" path="adev/src/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts"/>
-## Services
+## 서비스
 
-### Services are singletons
+### 서비스는 단일 객체입니다.
 
-#### Style 07-01
+#### 스타일 07-01
 
-**Do** use services as singletons within the same injector.
-Use them for sharing data and functionality.
+**Do** 서비스를 동일한 주입기에서 단일 객체로 사용하십시오.  
+데이터 및 기능 공유 용도로 사용합니다.
 
-**Why**? <br />
-Services are ideal for sharing methods across a feature area or an app.
+**왜**? <br />
+서비스는 기능 영역 또는 앱 전체에서 메서드를 공유하는 데 이상적입니다.
 
-**Why**? <br />
-Services are ideal for sharing stateful in-memory data.
+**왜**? <br />
+서비스는 상태가 있는 메모리 내 데이터를 공유하는 데 이상적입니다.
 
 <docs-code header="app/heroes/shared/hero.service.ts" path="adev/src/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts" visibleRegion="example"/>
 
-### Providing a service
+### 서비스를 제공하기
 
-#### Style 07-03
+#### 스타일 07-03
 
-**Do** provide a service with the application root injector in the `@Injectable` decorator of the service.
+**Do** 서비스를 `@Injectable` decorators의 루트 주입기에서 제공합니다.
 
-**Why**? <br />
-The Angular injector is hierarchical.
+**왜**? <br />
+Angular 주입기는 계층적입니다.
 
-**Why**? <br />
-When you provide the service to a root injector, that instance of the service is shared and available in every class that needs the service.
-This is ideal when a service is sharing methods or state.
+**왜**? <br />
+루트 주입기에 서비스를 제공할 때 해당 서비스의 인스턴스가 공유되며 서비스를 필요로 하는 모든 클래스에서 사용할 수 있습니다.  
+서비스가 메서드나 상태를 공유할 때 이상적입니다.
 
-**Why**? <br />
-When you register a service in the `@Injectable` decorator of the service, optimization tools such as those used by the [Angular CLI's](cli) production builds can perform tree shaking and remove services that aren't used by your app.
+**왜**? <br />
+서비스를 `@Injectable` 장식자의 `@Injectable`에서 등록할 때 Angular CLI의 프로덕션 빌드에서 사용하는 최적화 도구가 트리 흔들기 및 앱에서 사용되지 않는 서비스를 제거할 수 있습니다.
 
-**Why**? <br />
-This is not ideal when two different components need different instances of a service.
-In this scenario it would be better to provide the service at the component level that needs the new and separate instance.
+**왜**? <br />
+이는 서로 다른 두 개의 구성 요소가 서비스의 서로 다른 인스턴스가 필요할 때 이상적이지 않습니다.  
+이 경우 새로운 및 별도의 인스턴스를 필요로 하는 구성 요소 수준에서 서비스를 제공하면 더 나은 솔루션이 됩니다.
 
 <docs-code header="src/app/treeshaking/service.ts" path="adev/src/content/examples/dependency-injection/src/app/tree-shaking/service.ts"/>
 
-### Use the @Injectable() class decorator
+### @Injectable() 클래스 장식자 사용
 
-#### Style 07-04
+#### 스타일 07-04
 
-**Do** use the `@Injectable()` class decorator instead of the `@Inject` parameter decorator when using types as tokens for the dependencies of a service.
+**Do** 서비스의 의존성에 대한 토큰으로 유형을 사용할 때 `@Inject` 매개변수 장식자 대신 `@Injectable()` 클래스 장식자를 사용하십시오.
 
-**Why**? <br />
-The Angular Dependency Injection \(DI\) mechanism resolves a service's own
-dependencies based on the declared types of that service's constructor parameters.
+**왜**? <br />
+Angular의 종속성 주입 \(DI\) 메커니즘은 서비스의 생성자 매개변수로 선언된 유형을 기반으로 자신의 종속성을 해결합니다.
 
-**Why**? <br />
-When a service accepts only dependencies associated with type tokens, the `@Injectable()` syntax is much less verbose compared to using `@Inject()` on each individual constructor parameter.
+**왜**? <br />
+서비스가 유형 토큰과 연관된 종속성만 수용할 때, `@Injectable()` 구문은 각 개별 생성자 매개변수에 대해 `@Inject()`를 사용하는 것보다 훨씬 간단합니다.
 
 <docs-code header="app/heroes/shared/hero-arena.service.ts" path="adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts" visibleRegion="example"/>
 
 <docs-code header="app/heroes/shared/hero-arena.service.ts" path="adev/src/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts" visibleRegion="example"/>
-## Data Services
-
-### Talk to the server through a service
+## 데이터 서비스
 
-#### Style 08-01
+### 서버와 소통하기
 
-**Do** refactor logic for making data operations and interacting with data to a service.
+#### 스타일 08-01
 
-**Do** make data services responsible for XHR calls, local storage, stashing in memory, or any other data operations.
+**Do** 데이터 작업 및 데이터와의 상호 작용에 대한 로직을 서비스로 리팩토링하십시오.
 
-**Why**? <br />
-The component's responsibility is for the presentation and gathering of information for the view.
-It should not care how it gets the data, just that it knows who to ask for it.
-Separating the data services moves the logic on how to get it to the data service, and lets the component be simpler and more focused on the view.
+**Do** 데이터 서비스가 XHR 호출, 로컬 저장소, 메모리에서 저장, 또는 기타 데이터 작업을 담당하게 하십시오.
 
-**Why**? <br />
-This makes it easier to test \(mock or real\) the data calls when testing a component that uses a data service.
+**왜**? <br />
+구성 요소의 책임은 프레젠테이션이며, 뷰를 위한 정보를 모으는 것입니다.  
+데이터를 얻는 방법은 신경 쓰지 않고 단지 요청할 사람이 누구인지 알아야 합니다.  
+데이터 서비스로 로직을 분리하면 이를 얻는 방법을 데이터 서비스에 맡기고 구성 요소 논리를 단순하게 유지할 수 있습니다.
 
-**Why**? <br />
-The details of data management, such as headers, HTTP methods, caching, error handling, and retry logic, are irrelevant to components and other data consumers.
+**왜**? <br />
+이를 통해 데이터 서비스를 사용하는 구성 요소를 테스트할 때 \(모의 또는 실제\) 데이터 호출 테스트가 더 쉬워집니다.
 
-A data service encapsulates these details.
-It's easier to evolve these details inside the service without affecting its consumers.
-And it's easier to test the consumers with mock service implementations.
+**왜**? <br />
+헤더, HTTP 메서드, 캐싱, 오류 처리 및 재시도 로직과 같은 데이터 관리의 세부 사항은 구성 요소 및 기타 데이터 소비자에게는 중요하지 않습니다.  
+데이터 서비스는 이러한 세부 사항을 캡슐화합니다.  
+서비스 내에서 이러한 세부 사항을 발전시키는 것이 소비자에게 영향을 주지 않고 더 쉽습니다.  
+그리고 모의 서비스 구현으로 소비자를 테스트하는 것이 더 쉽습니다.
 
-## Lifecycle hooks
+## 생명 주기 훅
 
-Use Lifecycle hooks to tap into important events exposed by Angular.
+Angular가 노출하는 중요 이벤트에 참여하는 생명 주기 훅을 사용하십시오.
 
-### Implement lifecycle hook interfaces
+### 생명 주기 훅 인터페이스 구현
 
-#### Style 09-01
+#### 스타일 09-01
 
-**Do** implement the lifecycle hook interfaces.
+**Do** 생명 주기 훅 인터페이스를 구현하십시오.
 
-**Why**? <br />
-Lifecycle interfaces prescribe typed method signatures.
-Use those signatures to flag spelling and syntax mistakes.
+**왜**? <br />
+생명 주기 인터페이스는 형식화된 메서드 시그니처를 규정합니다.  
+오타 및 구문 오류에 대해 해당 서명을 사용하십시오.
 
 <docs-code header="app/heroes/shared/hero-button/hero-button.component.ts" path="adev/src/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts" visibleRegion="example"/>
 
 <docs-code header="app/heroes/shared/hero-button/hero-button.component.ts" path="adev/src/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts" visibleRegion="example"/>
-## Appendix
+## 부록
 
-Useful tools and tips for Angular.
+Angular에 유용한 도구와 팁입니다.
 
-### File templates and snippets
+### 파일 템플릿 및 스니펫
 
-#### Style A-02
+#### 스타일 A-02
 
-**Do** use file templates or snippets to help follow consistent styles and patterns.
-Here are templates and/or snippets for some of the web development editors and IDEs.
+**Do** 일관된 스타일 및 패턴을 따르도록 도와주는 파일 템플릿이나 스니펫을 사용하십시오.  
+다음은 일부 웹 개발 에디터와 IDE를 위한 템플릿 및/또는 스니펫입니다.
 
-**Consider** using [snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) for [Visual Studio Code](https://code.visualstudio.com) that follow these styles and guidelines.
+**Consider** 이 스타일 및 규칙을 따르는 [Visual Studio Code](https://code.visualstudio.com)용 [스니펫](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)을 사용하는 것을 고려하십시오.
 
 <a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2">
 
@@ -888,6 +880,6 @@ Here are templates and/or snippets for some of the web development editors and I
 
 </a>
 
-**Consider** using [snippets](https://github.com/orizens/sublime-angular2-snippets) for [Sublime Text](https://www.sublimetext.com) that follow these styles and guidelines.
+**Consider** 이 스타일 및 규칙을 따르는 [Sublime Text](https://www.sublimetext.com)용 [스니펫](https://github.com/orizens/sublime-angular2-snippets)을 사용하는 것을 고려하십시오.
 
-**Consider** using [snippets](https://github.com/mhartington/vim-angular2-snippets) for [Vim](https://www.vim.org) that follow these styles and guidelines.
+**Consider** 이 스타일 및 규칙을 따르는 [Vim](https://www.vim.org)용 [스니펫](https://github.com/mhartington/vim-angular2-snippets)을 사용하는 것을 고려하십시오.
\ No newline at end of file
diff --git a/adev/src/content/best-practices/update.md b/adev/src/content/best-practices/update.md
index 3ce48ce9aea7..450383c0492d 100644
--- a/adev/src/content/best-practices/update.md
+++ b/adev/src/content/best-practices/update.md
@@ -1,64 +1,64 @@
-# Keeping your Angular projects up-to-date
+# Angular 프로젝트 최신 상태 유지하기
 
-Just like Web and the entire web ecosystem, Angular is continuously improving.
-Angular balances continuous improvement with a strong focus on stability and making updates straightforward.
-Keeping your Angular application up-to-date enables you to take advantage of leading-edge new features, as well as optimizations and bug fixes.
+웹 및 전체 웹 생태계와 마찬가지로 Angular는 지속적으로 개선되고 있습니다.
+Angular는 지속적인 개선과 안정성, 그리고 업데이트를 즉각적으로 할 수 있도록 하는 데 중점을 두고 있습니다.
+Angular 애플리케이션을 최신 상태로 유지하면 최신 기능, 최적화 및 버그 수정을 활용할 수 있습니다.
 
-This document contains information and resources to help you keep your Angular applications and libraries up-to-date.
+이 문서는 Angular 애플리케이션 및 라이브러리를 최신 상태로 유지하는 데 도움이 되는 정보와 리소스를 포함하고 있습니다.
 
-For information about our versioning policy and practices —including support and deprecation practices, as well as the release schedule— see [Angular versioning and releases](reference/releases "Angular versioning and releases").
+버전 관리 정책 및 관행에 대한 정보—지원 및 사용 중단 관행, 출시 일정 포함—은 [Angular 버전 관리 및 출시](reference/releases "Angular 버전 관리 및 출시")를 참조하십시오.
 
-HELPFUL: If you are currently using AngularJS, see [Upgrading from AngularJS](https://angular.io/guide/upgrade "Upgrading from Angular JS").
-*AngularJS* is the name for all v1.x versions of Angular.
+도움됨: 현재 AngularJS를 사용 중인 경우 [AngularJS에서 업그레이드](https://angular.io/guide/upgrade "AngularJS에서 업그레이드")를 참조하십시오.
+*AngularJS*는 모든 v1.x 버전의 Angular를 지칭하는 이름입니다.
 
-## Getting notified of new releases
+## 새 릴리스 알림 받기
 
-To be notified when new releases are available, follow [@angular](https://x.com/angular "@angular on X") on X (formerly Twitter) or subscribe to the [Angular blog](https://blog.angular.dev "Angular blog").
+새 릴리스가 제공될 때 알림을 받으려면 X(옛날 Twitter)에서 [@angular](https://x.com/angular "@angular on X)를 팔로우하거나 [Angular 블로그](https://blog.angular.dev "Angular 블로그")를 구독하십시오.
 
-## Learning about new features
+## 새로운 기능 배우기
 
-What's new? What's changed? We share the most important things you need to know on the Angular blog in [release announcements]( https://blog.angular.dev/ "Angular blog - release announcements").
+새로운 것은 무엇인가요? 무엇이 변경되었나요? Angular 블로그의 [릴리스 발표](https://blog.angular.dev/ "Angular 블로그 - 릴리스 발표")에 가장 중요한 정보를 공유합니다.
 
-To review a complete list of changes, organized by version, see the [Angular change log](https://github.com/angular/angular/blob/main/CHANGELOG.md "Angular change log").
+변경사항의 전체 목록을 버전별로 검토하려면 [Angular 변경 로그](https://github.com/angular/angular/blob/main/CHANGELOG.md "Angular 변경 로그")를 참조하십시오.
 
-## Checking your version of Angular
+## Angular 버전 확인하기
 
-To check your application's version of Angular use the `ng version` command from within your project directory.
+애플리케이션의 Angular 버전을 확인하려면 프로젝트 디렉터리 내에서 `ng version` 명령을 사용하십시오.
 
-## Finding the current version of Angular
+## 현재 Angular 버전 찾기
 
-The most recent stable released version of Angular appears [on npm](https://www.npmjs.com/package/@angular/core "Angular on npm") under "Version." For example, `16.2.4`.
+가장 최근에 안정적으로 출시된 Angular 버전은 [npm](https://www.npmjs.com/package/@angular/core "npm의 Angular")의 "버전" 아래에 표시됩니다. 예: `16.2.4`.
 
-You can also find the most current version of Angular by using the CLI command [`ng update`](cli/update).
-By default, [`ng update`](cli/update)(without additional arguments) lists the updates that are available to you.
+또한 CLI 명령 [`ng update`](cli/update)를 사용하여 최신 Angular 버전을 찾을 수 있습니다.
+기본적으로 [`ng update`](cli/update)(추가 인수 없음)는 귀하가 사용할 수 있는 업데이트를 나열합니다.
 
-## Updating your environment and apps
+## 환경 및 애플리케이션 업데이트하기
 
-To make updating uncomplicated, we provide complete instructions in the interactive [Angular Update Guide](update-guide).
+업데이트를 간단하게 하기 위해 인터랙티브 [Angular 업데이트 가이드](update-guide)에서 완전한 지침을 제공합니다.
 
-The Angular Update Guide provides customized update instructions, based on the current and target versions that you specify.
-It includes basic and advanced update paths, to match the complexity of your applications.
-It also includes troubleshooting information and any recommended manual changes to help you get the most out of the new release.
+Angular 업데이트 가이드는 귀하가 지정한 현재 및 목표 버전에 기반하여 맞춤형 업데이트 지침을 제공합니다.
+복잡성에 맞춘 기본 및 고급 업데이트 경로를 포함하고 있습니다.
+트러블슈팅 정보와 함께 새로운 릴리스를 최대한 활용하기 위해 필요한 수동 변경 사항도 포함되어 있습니다.
 
-For simple updates, the CLI command [`ng update`](cli/update) is all you need.
-Without additional arguments, [`ng update`](cli/update) lists the updates that are available to you and provides recommended steps to update your application to the most current version.
+간단한 업데이트의 경우 CLI 명령 [`ng update`](cli/update)만으로 충분합니다.
+추가 인수 없이 [`ng update`](cli/update)는 귀하가 사용할 수 있는 업데이트를 나열하고 애플리케이션을 최신 버전으로 업데이트하기 위한 추천 단계를 제공합니다.
 
-[Angular Versioning and Releases](reference/releases#versioning "Angular Release Practices, Versioning") describes the level of change that you can expect based on a release's version number.
-It also describes supported update paths.
+[Angular 버전 관리 및 출시](reference/releases#versioning "Angular 출시 관행, 버전 관리")는 릴리스 버전 번호에 따라 기대할 수 있는 변경 수준을 설명합니다.
+또한 지원되는 업데이트 경로를 설명합니다.
 
-## Resource summary
+## 리소스 요약
 
-* Release announcements:
-    [Angular blog - release announcements](https://blog.angular.dev/ "Angular blog announcements about recent releases")
+* 릴리스 발표:
+    [Angular 블로그 - 릴리스 발표](https://blog.angular.dev/ "Angular 블로그에서의 최근 릴리스 안내")
 
-* Release details:
-    [Angular change log](https://github.com/angular/angular/blob/main/CHANGELOG.md "Angular change log")
+* 릴리스 세부정보:
+    [Angular 변경 로그](https://github.com/angular/angular/blob/main/CHANGELOG.md "Angular 변경 로그")
 
-* Update instructions:
-    [Angular Update Guide](update-guide)
+* 업데이트 지침:
+    [Angular 업데이트 가이드](update-guide)
 
-* Update command reference:
-    [Angular CLI `ng update` command reference](cli/update)
+* 업데이트 명령 참조:
+    [Angular CLI `ng update` 명령 참조](cli/update)
 
-* Versioning, release, support, and deprecation practices:
-    [Angular versioning and releases](reference/releases "Angular versioning and releases")
+* 버전 관리, 릴리스, 지원 및 사용 중단 관행:
+    [Angular 버전 관리 및 출시](reference/releases "Angular 버전 관리 및 출시")
\ No newline at end of file
diff --git a/adev/src/content/cli/index.md b/adev/src/content/cli/index.md
index 76cc1778f2a4..4be619738180 100644
--- a/adev/src/content/cli/index.md
+++ b/adev/src/content/cli/index.md
@@ -1,26 +1,26 @@
-# CLI Overview and Command Reference
+# CLI 개요 및 명령어 참조
 
-The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.
+Angular CLI는 명령 셸에서 Angular 애플리케이션을 초기화, 개발, 스캐폴드 및 유지 관리하는 데 사용하는 명령 줄 인터페이스 도구입니다.
 
-## Installing Angular CLI
+## Angular CLI 설치
 
-Major versions of Angular CLI follow the supported major version of Angular, but minor versions can be released separately.
+Angular CLI의 주요 버전은 지원되는 Angular의 주요 버전을 따르지만, 부버전은 별도로 출시될 수 있습니다.
 
-Install the CLI using the `npm` package manager:
+`npm` 패키지 관리자를 사용하여 CLI를 설치합니다:
 
 <code-example format="shell" language="shell">
 
-npm install -g &commat;angular/cli<aio-angular-dist-tag class="pln"></aio-angular-dist-tag>
+npm install -g @angular/cli<aio-angular-dist-tag class="pln"></aio-angular-dist-tag>
 
 </code-example>
 
-For details about changes between versions, and information about updating from previous releases, see the Releases tab on GitHub: https://github.com/angular/angular-cli/releases
+버전 간 변경 사항에 대한 자세한 내용과 이전 릴리스에서 업데이트하는 방법에 대한 정보는 GitHub의 릴리스 탭을 참조하십시오: https://github.com/angular/angular-cli/releases
 
-## Basic workflow
+## 기본 워크플로우
 
-Invoke the tool on the command line through the `ng` executable.
-Online help is available on the command line.
-Enter the following to list commands or options for a given command \(such as [new](cli/new)\) with a short description.
+`ng` 실행 파일을 통해 명령 줄에서 도구를 호출합니다.
+온라인 도움말은 명령 줄에서 사용할 수 있습니다.
+다음 명령을 입력하여 주어진 명령(예: [new](cli/new))에 대한 명령 또는 옵션을 짧은 설명과 함께 나열합니다.
 
 <code-example format="shell" language="shell">
 
@@ -29,7 +29,7 @@ ng new --help
 
 </code-example>
 
-To create, build, and serve a new, basic Angular project on a development server, go to the parent directory of your new workspace use the following commands:
+새롭고 기본 Angular 프로젝트를 개발 서버에서 생성, 빌드 및 제공하려면 새 작업공간의 상위 디렉토리로 가서 다음 명령을 사용하세요:
 
 <code-example format="shell" language="shell">
 
@@ -39,63 +39,63 @@ ng serve
 
 </code-example>
 
-In your browser, open http://localhost:4200/ to see the new application run.
-When you use the [ng serve](cli/serve) command to build an application and serve it locally, the server automatically rebuilds the application and reloads the page when you change any of the source files.
+브라우저에서 http://localhost:4200/을 열어 새 애플리케이션이 실행되는 것을 확인하세요.
+[ng serve](cli/serve) 명령을 사용하여 애플리케이션을 빌드하고 로컬로 제공하면, 서버는 소스 파일 중 하나를 변경할 때마다 애플리케이션을 자동으로 재구축하고 페이지를 새로 고칩니다.
 
 <div class="docs-alert docs-alert-helpful">
 
-When you run `ng new my-first-project` a new folder, named `my-first-project`, will be created in the current working directory.
-Since you want to be able to create files inside that folder, make sure you have sufficient rights in the current working directory before running the command.
+`ng new my-first-project`를 실행하면 현재 작업 디렉토리에 `my-first-project`라는 새 폴더가 생성됩니다.
+그 폴더 안에 파일을 생성할 수 있도록, 명령을 실행하기 전에 현재 작업 디렉토리에서 충분한 권한이 있는지 확인하세요.
 
-If the current working directory is not the right place for your project, you can change to a more appropriate directory by running `cd <path-to-other-directory>`.
+현재 작업 디렉토리가 프로젝트에 적합하지 않은 경우, `cd <path-to-other-directory>`를 실행하여 보다 적절한 디렉토리로 변경할 수 있습니다.
 
 </div>
 
-## Workspaces and project files
+## 작업공간 및 프로젝트 파일
 
-The [ng new](cli/new) command creates an *Angular workspace* folder and generates a new application skeleton.
-A workspace can contain multiple applications and libraries.
-The initial application created by the [ng new](cli/new) command is at the top level of the workspace.
-When you generate an additional application or library in a workspace, it goes into a `projects/` subfolder.
+[ng new](cli/new) 명령은 *Angular 작업공간* 폴더를 생성하고 새 애플리케이션 스켈레톤을 만듭니다.
+작업공간에는 여러 애플리케이션과 라이브러리를 포함할 수 있습니다.
+[ng new](cli/new) 명령으로 생성된 초기 애플리케이션은 작업공간의 최상위 수준에 있습니다.
+작업공간에서 추가 애플리케이션이나 라이브러리를 생성하면 `projects/` 하위 폴더에 들어갑니다.
 
-A newly generated application contains the source files for a root module, with a root component and template.
-Each application has a `src` folder that contains the logic, data, and assets.
+새로 생성된 애플리케이션에는 루트 모듈에 대한 소스 파일, 루트 컴포넌트 및 템플릿이 포함됩니다.
+각 애플리케이션은 로직, 데이터 및 자산을 포함하는 `src` 폴더가 있습니다.
 
-You can edit the generated files directly, or add to and modify them using CLI commands.
-Use the [ng generate](cli/generate) command to add new files for additional components and services, and code for new pipes, directives, and so on.
-Commands such as [add](cli/add) and [generate](cli/generate), which create or operate on applications and libraries, must be executed from within a workspace or project folder.
+생성된 파일을 직접 편집하거나 CLI 명령을 사용하여 추가 및 수정할 수 있습니다.
+[ng generate](cli/generate) 명령을 사용하여 추가 컴포넌트 및 서비스에 대한 새로운 파일을 추가하고 새로운 파이프, 지시자 등을 위한 코드를 생성합니다.
+애플리케이션 및 라이브러리를 생성하거나 운영하는 [add](cli/add) 및 [generate](cli/generate)와 같은 명령은 작업공간 또는 프로젝트 폴더 내에서 실행되어야 합니다.
 
-*   See more about the [Workspace file structure](guide/file-structure).
+*   [작업공간 파일 구조](guide/file-structure)에 대한 자세한 내용을 확인하세요.
 
-### Workspace and project configuration
+### 작업공간 및 프로젝트 구성
 
-A single workspace configuration file, `angular.json`, is created at the top level of the workspace.
-This is where you can set per-project defaults for CLI command options, and specify configurations to use when the CLI builds a project for different targets.
+작업공간의 최상위 수준에 단일 작업공간 구성 파일 `angular.json`이 생성됩니다.
+여기에서 CLI 명령 옵션에 대한 프로젝트별 기본값을 설정하고, CLI가 서로 다른 대상을 위해 프로젝트를 빌드할 때 사용할 구성을 지정할 수 있습니다.
 
-The [ng config](cli/config) command lets you set and retrieve configuration values from the command line, or you can edit the `angular.json` file directly.
+[ng config](cli/config) 명령을 사용하여 명령 줄에서 구성 값을 설정하고 검색할 수 있으며, 또는 `angular.json` 파일을 직접 편집할 수 있습니다.
 
 <div class="alert is-helpful">
 
-**NOTE**: <br />
-Option names in the configuration file must use [camelCase](guide/glossary#case-types), while option names supplied to commands must be dash-case.
+**참고**: <br />
+구성 파일의 옵션 이름은 [camelCase](guide/glossary#case-types)를 사용해야 하며, 명령에 제공되는 옵션 이름은 대시 형태여야 합니다.
 
 </div>
 
-*   See more about [Workspace Configuration](guide/workspace-config).
+*   [작업공간 구성](guide/workspace-config)에 대한 자세한 내용을 확인하세요.
 
-## CLI command-language syntax
+## CLI 명령어 언어 구문
 
-Command syntax is shown as follows:
+명령 구문은 다음과 같이 표시됩니다:
 
 `ng` *<command-name>* *<required-arg>* [*optional-arg*] `[options]`
 
-*   Most commands, and some options, have aliases.
-    Aliases are shown in the syntax statement for each command.
+*   대부분의 명령 및 일부 옵션은 별칭을 가집니다.
+    별칭은 각 명령의 구문에서 보여집니다.
 
-*   Option names are prefixed with a double dash \(`--`\) characters.
-    Option aliases are prefixed with a single dash \(`-`\) character.
-    Arguments are not prefixed.
-    For example:
+*   옵션 이름은 두 개의 대시 \(`--`\) 문자로 시작합니다.
+    옵션 별칭은 하나의 대시 \(`-`\) 문자로 시작합니다.
+    인수에는 접두사가 없습니다.
+    예를 들면:
 
     <code-example format="shell" language="shell">
 
@@ -103,29 +103,29 @@ Command syntax is shown as follows:
 
     </code-example>
 
-*   Typically, the name of a generated artifact can be given as an argument to the command or specified with the `--name` option.
+*   일반적으로 생성된 아티팩트의 이름은 명령에 대한 인수로 지정하거나 `--name` 옵션으로 지정할 수 있습니다.
 
-*   Arguments and option names must be given in [dash-case](guide/glossary#case-types).
-    For example: `--my-option-name`
+*   인수 및 옵션 이름은 [대시 케이스](guide/glossary#case-types)로 제공되어야 합니다.
+    예: `--my-option-name`
 
-### Boolean options
+### 부울 옵션
 
-Boolean options have two forms: `--this-option` sets the flag to `true`, `--no-this-option` sets it to `false`.
-If neither option is supplied, the flag remains in its default state, as listed in the reference documentation.
+부울 옵션에는 두 가지 형태가 있습니다: `--this-option`은 플래그를 `true`로 설정하고, `--no-this-option`은 `false`로 설정합니다.
+두 옵션이 제공되지 않으면, 플래그는 참조 문서에 나열된 기본 상태로 유지됩니다.
 
-### Array options
+### 배열 옵션
 
-Array options can be provided in two forms: `--option value1 value2` or `--option value1 --option value2`.
+배열 옵션은 두 가지 형식으로 제공될 수 있습니다: `--option value1 value2` 또는 `--option value1 --option value2`.
 
-### Relative paths
+### 상대 경로
 
-Options that specify files can be given as absolute paths, or as paths relative to the current working directory, which is generally either the workspace or project root.
+파일을 지정하는 옵션은 절대 경로 또는 현재 작업 디렉토리에 대한 경로(일반적으로 작업공간 또는 프로젝트 루트)를 상대적으로 지정할 수 있습니다.
 
-### Schematics
+### 스키매틱
 
-The [ng generate](cli/generate) and [ng add](cli/add) commands take, as an argument, the artifact or library to be generated or added to the current project.
-In addition to any general options, each artifact or library defines its own options in a *schematic*.
-Schematic options are supplied to the command in the same format as immediate command options.
+[ng generate](cli/generate) 및 [ng add](cli/add) 명령은 현재 프로젝트에 생성되거나 추가될 아티팩트 또는 라이브러리를 인수로 사용합니다.
+일반 옵션 외에도, 각 아티팩트 또는 라이브러리는 *스키매틱*에서 자신의 옵션을 정의합니다.
+스키매틱 옵션은 즉각적인 명령 옵션과 동일한 형식으로 명령에 제공됩니다.
 
 <!-- links -->
 
@@ -133,4 +133,4 @@ Schematic options are supplied to the command in the same format as immediate co
 
 <!-- end links -->
 
-@reviewed 2022-02-28
+@reviewed 2022-02-28
\ No newline at end of file
diff --git a/adev/src/content/ecosystem/custom-build-pipeline.md b/adev/src/content/ecosystem/custom-build-pipeline.md
index 71fdaa24a2b4..1ab0dd39d189 100644
--- a/adev/src/content/ecosystem/custom-build-pipeline.md
+++ b/adev/src/content/ecosystem/custom-build-pipeline.md
@@ -1,33 +1,33 @@
-# Custom build pipeline
+# 커스텀 빌드 파이프라인
 
-When building an Angular app we strongly recommend you to use the Angular CLI to leverage its structure-dependent update functionality and build system abstraction. This way your projects benefit from the latest security, performance, and API improvements and transparent build improvements.
+Angular 앱을 빌드할 때 Angular CLI를 사용하는 것을 강력히 권장합니다. 이를 통해 구조 종속 업데이트 기능 및 빌드 시스템 추상화를 활용할 수 있습니다. 이렇게 하면 프로젝트는 최신 보안, 성능 및 API 개선 사항과 투명한 빌드 개선의 혜택을 누리게 됩니다.
 
-This page explores the **rare use cases** when you need a custom build pipeline that does not use the Angular CLI. All listed tools below are open source build plugins that are maintained by members of the Angular community. To learn more about their support model and maintenance status look at their documentation and GitHub repository URLs.
+이 페이지에서는 Angular CLI를 사용하지 않는 커스텀 빌드 파이프라인이 필요한 **드문 사용 사례**를 탐구합니다. 아래에 나열된 모든 도구는 Angular 커뮤니티의 구성원들이 유지 관리하는 오픈 소스 빌드 플러그인입니다. 그들의 지원 모델 및 유지 관리 상태에 대해 자세히 알아보려면 문서 및 GitHub 리포지토리 URL을 확인하세요.
 
-## When should you use a custom build pipeline?
+## 커스텀 빌드 파이프라인을 언제 사용해야 하나요?
 
-There are some niche use cases when you may want to maintain a custom build pipeline. For example:
+커스텀 빌드 파이프라인을 유지 관리하려는 몇 가지 틈새 사용 사례가 있습니다. 예를 들어:
 
-* You have an existing app using a different toolchain and you’d like to add Angular to it
-* You’re strongly coupled to [module federation](https://module-federation.io/) and unable to adopt bundler-agnostic [native federation](https://www.npmjs.com/package/@angular-architects/native-federation)
-* You’d like to create an short-lived experiment using your favorite build tool
+* 다른 도구 체인을 사용하는 기존 앱이 있으며 Angular를 추가하고 싶다
+* [모듈 연합](https://module-federation.io/)에 강하게 결합되어 있으며 번들러에 구애받지 않는 [네이티브 연합](https://www.npmjs.com/package/@angular-architects/native-federation)을 채택할 수 없다
+* 좋아하는 빌드 도구를 사용하여 단기적 실험을 만들고 싶다
 
-## What are the options?
+## 옵션은 무엇인가요?
 
-Currently, there are two well supported community tools that enable you to create a custom build pipeline with a [Vite plugin](https://www.npmjs.com/package/@analogjs/vite-plugin-angular) and [Rspack plugin](https://www.npmjs.com/package/@ng-rspack/build). Both of them use underlying abstractions that power the Angular CLI. They allow you to create a flexible build pipeline and require manual maintenance and no automated update experience.
+현재 커뮤니티에서 잘 지원되는 두 가지 도구가 있습니다. 이를 통해 [Vite 플러그인](https://www.npmjs.com/package/@analogjs/vite-plugin-angular)과 [Rspack 플러그인](https://www.npmjs.com/package/@ng-rspack/build)을 사용하여 커스텀 빌드 파이프라인을 만들 수 있습니다. 둘 다 Angular CLI의 기반 추상화를 사용합니다. 유연한 빌드 파이프라인을 만들 수 있도록 하며 수동 유지 관리가 필요하고 자동 업데이트 경험이 없습니다.
 
 ### Rspack
 
-Rspack is a Rust-based bundler that aims to provide compatibility with the webpack plugin ecosystem.
+Rspack은 웹팩 플러그인 생태계와의 호환성을 제공하는 것을 목표로 하는 Rust 기반 번들러입니다.
 
-If your project is tightly coupled to the webpack ecosystem, heavily relying on a custom webpack configuration you can leverage Rspack to improve your build times.
+프로젝트가 웹팩 생태계와 강하게 결합되어 있으며 맞춤형 웹팩 구성에 의존하는 경우 Rspack을 사용하여 빌드 시간을 개선할 수 있습니다.
 
-You can find more about Angular Rspack on the project’s [documentation website](https://angular-rspack.dev/guide/migration/from-webpack).
+Angular Rspack에 대한 자세한 내용은 프로젝트의 [문서 웹사이트](https://angular-rspack.dev/guide/migration/from-webpack)에서 확인할 수 있습니다.
 
 ### Vite
 
-Vite is a frontend build tool that aims to provide a faster and leaner development experience for modern web projects. Vite is also extensible through its plugin system that allows ecosystems to build integrations with Vite, such as Vitest for unit and browser testing, Storybook for authoring components in isolation, and more. The Angular CLI also uses Vite as its development server.
+Vite는 현대 웹 프로젝트를 위한 더 빠르고 슬림한 개발 경험을 제공하는 프론트엔드 빌드 도구입니다. Vite는 또한 플러그인 시스템을 통해 확장 가능하여, Vitest(단위 및 브라우저 테스트용), 스토리북(고립된 컴포넌트 작성용) 등과 같은 생태계와 Vite 간의 통합을 구축할 수 있습니다. Angular CLI도 개발 서버로 Vite를 사용합니다.
 
-The [AnalogJS Vite plugin for Angular](https://www.npmjs.com/package/@analogjs/vite-plugin-angular) enables the adoption of Angular with a project or framework that uses or is built on top of Vite. This can consist of developing and building an Angular project with Vite directly, or adding Angular to an existing project or pipeline. One example is integrating Angular UI components into a documentation website using [Astro and Starlight](https://analogjs.org/docs/packages/astro-angular/overview).
+[Angular를 위한 AnalogJS Vite 플러그인](https://www.npmjs.com/package/@analogjs/vite-plugin-angular)은 Vite를 사용하거나 Vite 위에 구축된 프로젝트나 프레임워크에서 Angular를 채택할 수 있게 해줍니다. 이는 Vite를 통해 Angular 프로젝트를 직접 개발하고 빌드하거나 기존 프로젝트나 파이프라인에 Angular를 추가하는 것을 포함할 수 있습니다. 한 예로는 [Astro와 Starlight](https://analogjs.org/docs/packages/astro-angular/overview)를 사용하여 문서 웹사이트에 Angular UI 컴포넌트를 통합하는 경우가 있습니다.
 
-You can learn more about AnalogJS and how to use the plugin through its [documentation page](https://analogjs.org/docs/packages/vite-plugin-angular/overview).
+AnalogJS 및 플러그인을 사용하는 방법에 대해 더 알아보려면 [문서 페이지](https://analogjs.org/docs/packages/vite-plugin-angular/overview)를 확인하세요.
\ No newline at end of file
diff --git a/adev/src/content/ecosystem/rxjs-interop/output-interop.md b/adev/src/content/ecosystem/rxjs-interop/output-interop.md
index 2007e832da9d..ffade859c314 100644
--- a/adev/src/content/ecosystem/rxjs-interop/output-interop.md
+++ b/adev/src/content/ecosystem/rxjs-interop/output-interop.md
@@ -1,12 +1,12 @@
-# RxJS interop with component and directive outputs
+# RxJS 컴포넌트 및 지시자 출력과의 상호 운용성
 
-Tip: This guide assumes you're familiar with [component and directive outputs](guide/components/outputs).
+팁: 이 가이드는 [컴포넌트 및 지시자 출력](guide/components/outputs)에 익숙하다고 가정합니다.
 
-The `@angular/rxjs-interop` package offers two APIs related to component and directive outputs.
+`@angular/rxjs-interop` 패키지는 컴포넌트 및 지시자 출력과 관련된 두 가지 API를 제공합니다.
 
-## Creating an output based on an RxJs Observable
+## RxJS Observable을 기반으로 하는 출력 만들기
 
-The `outputFromObservable` lets you create a component or directive output that emits based on an RxJS observable:
+`outputFromObservable`을 사용하면 RxJS Observable을 기반으로 방출되는 컴포넌트 또는 지시자 출력을 생성할 수 있습니다:
 
 <docs-code language="ts" highlight="[7]">
 import {Directive} from '@angular/core';
@@ -16,20 +16,20 @@ import {outputFromObservable} from '@angular/core/rxjs-interop';
 class Draggable {
   pointerMoves$: Observable<PointerMovements> = listenToPointerMoves();
   
-  // Whenever `pointerMoves$` emits, the `pointerMove` event fires.
+  // `pointerMoves$`가 방출될 때마다 `pointerMove` 이벤트가 발생합니다.
   pointerMove = outputFromObservable(this.pointerMoves$);
 }
 </docs-code>
 
-The `outputFromObservable` function has special meaning to the Angular compiler. **You may only call `outputFromObservable` in component and directive property initializers.**
+`outputFromObservable` 함수는 Angular 컴파일러에 특별한 의미가 있습니다. **컴포넌트 및 지시자 속성 초기화기에서만 `outputFromObservable`을 호출해야 합니다.**
 
-When you `subscribe` to the output, Angular automatically forwards the subscription to the underlying observable. Angular stops forwarding values when the component or directive is destroyed.
+출력에 `subscribe`할 때 Angular는 자동으로 기본 Observable로 구독을 전달합니다. Angular는 컴포넌트 또는 지시자가 파괴될 때 값을 전달하는 것을 중지합니다.
 
-HELPFUL: Consider using `output()` directly if you can emit values imperatively.
+도움이 됨: 명령형으로 값을 방출할 수 있다면 `output()`을 직접 사용하는 것을 고려하세요.
 
-## Creating an RxJS Observable from a component or directive output
+## 컴포넌트 또는 지시자 출에서 RxJS Observable 생성하기
 
-The `outputToObservable` function lets you create an RxJS observable from a component output.
+`outputToObservable` 함수는 컴포넌트 출력에서 RxJS Observable을 생성할 수 있게 해줍니다.
 
 <docs-code language="ts" highlight="[11]">
 import {outputToObservable} from '@angular/core/rxjs-interop';
@@ -39,7 +39,7 @@ class CustomSlider {
   valueChange = output<number>();
 }
 
-// Instance reference to `CustomSlider`.
+// `CustomSlider`에 대한 인스턴스 참조.
 const slider: CustomSlider = createSlider();
 
 outputToObservable(slider.valueChange) // Observable<number>
@@ -47,4 +47,4 @@ outputToObservable(slider.valueChange) // Observable<number>
   .subscribe(...);
 </docs-code>
 
-HELPFUL: Consider using the `subscribe` method on `OutputRef` directly if it meets your needs.
+도움이 됨: 필요에 맞는다면 `OutputRef`에서 직접 `subscribe` 메서드를 사용하는 것을 고려하세요.
\ No newline at end of file
diff --git a/adev/src/content/ecosystem/rxjs-interop/signals-interop.md b/adev/src/content/ecosystem/rxjs-interop/signals-interop.md
index 1eccfccc2a56..72ea1827145f 100644
--- a/adev/src/content/ecosystem/rxjs-interop/signals-interop.md
+++ b/adev/src/content/ecosystem/rxjs-interop/signals-interop.md
@@ -1,12 +1,12 @@
-# RxJS interop with Angular signals
+# RxJS와 Angular 신호 간의 상호 운용성
 
-IMPORTANT: The RxJS Interop package is available for [developer preview](reference/releases#developer-preview). It's ready for you to try, but it might change before it is stable.
+중요: RxJS Interop 패키지는 [개발자 미리 보기](reference/releases#developer-preview)로 제공됩니다. 시도할 준비가 되었지만 안정화되기 전까지 변경될 수 있습니다.
 
-The `@angular/rxjs-interop` package offers APIs that help you integrate RxJS and Angular signals.
+`@angular/rxjs-interop` 패키지는 RxJS와 Angular 신호를 통합하는 데 도움이 되는 API를 제공합니다.
 
-## Create a signal from an RxJs Observable with `toSignal`
+## `toSignal`로 RxJs Observable에서 신호 만들기
 
-Use the `toSignal` function to create a signal which tracks the value of an Observable. It behaves similarly to the `async` pipe in templates, but is more flexible and can be used anywhere in an application.
+`toSignal` 함수를 사용하여 Observable의 값을 추적하는 신호를 생성합니다. 이는 템플릿의 `async` 파이프와 유사하게 동작하지만 더 유연하며 애플리케이션의 어디에서나 사용할 수 있습니다.
 
 ```ts
 import { Component } from '@angular/core';
@@ -20,52 +20,52 @@ import { toSignal } from '@angular/core/rxjs-interop';
 export class Ticker {
   counterObservable = interval(1000);
 
-  // Get a `Signal` representing the `counterObservable`'s value.
+  // `counterObservable`의 값을 나타내는 `Signal`을 가져옴.
   counter = toSignal(this.counterObservable, {initialValue: 0});
 }
 ```
 
-Like the `async` pipe, `toSignal` subscribes to the Observable immediately, which may trigger side effects. The subscription created by `toSignal` automatically unsubscribes from the given Observable when the component or service which calls `toSignal` is destroyed.
+`async` 파이프와 마찬가지로 `toSignal`은 Observable에 즉시 구독하여 부작용을 발생시킬 수 있습니다. `toSignal`로 생성된 구독은 `toSignal`을 호출하는 컴포넌트나 서비스가 파괴될 때 자동으로 주어진 Observable에서 구독을 해제합니다.
 
-IMPORTANT: `toSignal` creates a subscription. You should avoid calling it repeatedly for the same Observable, and instead reuse the signal it returns.
+중요: `toSignal`은 구독을 생성합니다. 동일한 Observable에 대해 반복해서 호출하는 것은 피하고 대신 반환된 신호를 재사용해야 합니다.
 
-### Injection context
+### 주입 컨텍스트
 
-`toSignal` by default needs to run in an [injection context](guide/di/dependency-injection-context), such as during construction of a component or service. If an injection context is not available, you can manually specify the `Injector` to use instead.
+기본적으로 `toSignal`은 컴포넌트나 서비스의 생성 중과 같은 [주입 컨텍스트](guide/di/dependency-injection-context) 내에서 실행되어야 합니다. 주입 컨텍스트를 사용할 수 없는 경우 수동으로 사용할 `Injector`를 지정할 수 있습니다.
 
-### Initial values
+### 초기 값
 
-Observables may not produce a value synchronously on subscription, but signals always require a current value. There are several ways to deal with this "initial" value of `toSignal` signals.
+Observable은 구독 시 동기적으로 값을 생성하지 않을 수 있지만, 신호는 항상 현재 값을 요구합니다. `toSignal` 신호의 이 "초기" 값을 처리하는 여러 가지 방법이 있습니다.
 
-#### The `initialValue` option
+#### `initialValue` 옵션
 
-As in the example above, you can specify an `initialValue` option with the value the signal should return before the Observable emits for the first time.
+위의 예와 같이, Observable이 처음으로 값을 방출하기 전에 신호가 반환해야 하는 값을 가진 `initialValue` 옵션을 지정할 수 있습니다.
 
-#### `undefined` initial values
+#### `undefined` 초기 값
 
-If you don't provide an `initialValue`, the resulting signal will return `undefined` until the Observable emits. This is similar to the `async` pipe's behavior of returning `null`.
+`initialValue`를 제공하지 않으면, 결과 신호는 Observable이 방출될 때까지 `undefined`를 반환합니다. 이는 `async` 파이프의 `null` 반환 동작과 유사합니다.
 
-#### The `requireSync` option
+#### `requireSync` 옵션
 
-Some Observables are guaranteed to emit synchronously, such as `BehaviorSubject`. In those cases, you can specify the `requireSync: true` option.
+일부 Observable은 `BehaviorSubject`와 같은 동기적으로 방출될 것을 보장합니다. 이러한 경우 `requireSync: true` 옵션을 지정할 수 있습니다.
 
-When `requiredSync` is `true`, `toSignal` enforces that the Observable emits synchronously on subscription. This guarantees that the signal always has a value, and no `undefined` type or initial value is required.
+`requiredSync`가 `true`일 때, `toSignal`은 구독 시 Observable이 동기적으로 방출되도록 보장합니다. 이는 신호가 항상 값을 가지도록 보장하며, `undefined` 유형이나 초기 값이 필요하지 않습니다.
 
 ### `manualCleanup`
 
-By default, `toSignal` automatically unsubscribes from the Observable when the component or service that creates it is destroyed.
+기본적으로 `toSignal`은 그것을 생성한 컴포넌트나 서비스가 파괴될 때 Observable에서 자동으로 구독을 해제합니다.
 
-To override this behavior, you can pass the `manualCleanup` option. You can use this setting for Observables that complete themselves naturally.
+이 동작을 재정의하려면 `manualCleanup` 옵션을 전달할 수 있습니다. 이 설정은 자연적으로 완료되는 Observable에 사용할 수 있습니다.
 
-### Error and Completion
+### 오류 및 완료
 
-If an Observable used in `toSignal` produces an error, that error is thrown when the signal is read.
+`toSignal`에서 사용된 Observable이 오류를 발생시키면, 그 오류는 신호가 읽힐 때 발생합니다.
 
-If an Observable used in `toSignal` completes, the signal continues to return the most recently emitted value before completion.
+`toSignal`에서 사용된 Observable이 완료되면, 신호는 완료 전 마지막으로 방출된 값을 계속 반환합니다.
 
-## Create an RxJS Observable from a signal with `toObservable`
+## 신호에서 RxJS Observable 만들기 `toObservable`
 
-Use the `toObservable` utility to create an `Observable` which tracks the value of a signal. The signal's value is monitored with an `effect` which emits the value to the Observable when it changes.
+`toObservable` 유틸리티를 사용하여 신호의 값을 추적하는 `Observable`을 생성합니다. 신호의 값은 변할 때 Observable에 값을 방출하는 `effect`로 모니터링됩니다.
 
 ```ts
 import { Component, signal } from '@angular/core';
@@ -82,17 +82,17 @@ export class SearchResults {
 }
 ```
 
-As the `query` signal changes, the `query$` Observable emits the latest query and triggers a new HTTP request.
+`query` 신호가 변경됨에 따라 `query$` Observable은 최신 쿼리를 방출하고 새로운 HTTP 요청을 트리거합니다.
 
-### Injection context
+### 주입 컨텍스트
 
-`toObservable` by default needs to run in an [injection context](guide/di/dependency-injection-context), such as during construction of a component or service. If an injection context is not available, you can manually specify the `Injector` to use instead.
+기본적으로 `toObservable`은 컴포넌트나 서비스의 생성 중과 같은 [주입 컨텍스트](guide/di/dependency-injection-context) 내에서 실행되어야 합니다. 주입 컨텍스트를 사용할 수 없는 경우 수동으로 사용할 `Injector`를 지정할 수 있습니다.
 
-### Timing of `toObservable`
+### `toObservable`의 타이밍
 
-`toObservable` uses an effect to track the value of the signal in a `ReplaySubject`. On subscription, the first value (if available) may be emitted synchronously, and all subsequent values will be asynchronous.
+`toObservable`은 `ReplaySubject`에서 신호의 값을 추적하기 위해 effect를 사용합니다. 구독 시 첫 번째 값(가능한 경우)은 동기적으로 방출될 수 있으며, 이후의 모든 값은 비동기적으로 방출됩니다.
 
-Unlike Observables, signals never provide a synchronous notification of changes. Even if you update a signal's value multiple times, `toObservable` will only emit the value after the signal stabilizes.
+Observable과 달리 신호는 변경에 대한 동기 알림을 제공하지 않습니다. 신호의 값을 여러 번 업데이트하더라도, `toObservable`은 신호가 안정화된 후에만 값을 방출합니다.
 
 ```ts
 const obs$ = toObservable(mySignal);
@@ -103,4 +103,4 @@ mySignal.set(2);
 mySignal.set(3);
 ```
 
-Here, only the last value (3) will be logged.
+여기서 마지막 값(3)만이 로그에 기록됩니다.
\ No newline at end of file
diff --git a/adev/src/content/ecosystem/service-workers/app-shell.md b/adev/src/content/ecosystem/service-workers/app-shell.md
index e4fdf2fb4788..fb7f473f8165 100644
--- a/adev/src/content/ecosystem/service-workers/app-shell.md
+++ b/adev/src/content/ecosystem/service-workers/app-shell.md
@@ -1,13 +1,13 @@
-# App shell pattern
+# 앱 쉘 패턴
 
-The [App shell pattern](https://developer.chrome.com/blog/app-shell) is a way to render a portion of your application using a route at build time.
-It can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads.
+[앱 쉘 패턴](https://developer.chrome.com/blog/app-shell)은 빌드 시 라우트를 사용하여 애플리케이션의 일부를 렌더링하는 방법입니다.
+브라우저가 전체 클라이언트 버전을 다운로드하고 코드를 로드한 후 자동으로 전환하는 동안 정적 렌더링 페이지(모든 페이지에 공통적인 스켈레톤)를 빠르게 시작함으로써 사용자 경험을 향상시킬 수 있습니다.
 
-This gives users a meaningful first paint of your application that appears quickly because the browser can render the HTML and CSS without the need to initialize any JavaScript.
+이것은 사용자가 애플리케이션의 의미 있는 첫 번째 페인트를 빨리 볼 수 있게 하며, 브라우저가 JavaScript를 초기화할 필요 없이 HTML과 CSS를 렌더링할 수 있기 때문입니다.
 
 <docs-workflow>
-<docs-step title="Prepare the application">
-Do this with the following Angular CLI command:
+<docs-step title="애플리케이션 준비">
+다음 Angular CLI 명령을 사용하여 수행하십시오:
 
 <docs-code language="shell">
 
@@ -15,10 +15,10 @@ ng new my-app
 
 </docs-code>
 
-For an existing application, you have to manually add the `Router` and defining a `<router-outlet>` within your application.
+기존 애플리케이션의 경우, `Router`를 수동으로 추가하고 애플리케이션 내에 `<router-outlet>`을 정의해야 합니다.
 </docs-step>
-<docs-step title="Create the application shell">
-Use the Angular CLI to automatically create the application shell.
+<docs-step title="애플리케이션 쉘 생성">
+Angular CLI를 사용하여 애플리케이션 쉘을 자동으로 생성하십시오.
 
 <docs-code language="shell">
 
@@ -26,31 +26,30 @@ ng generate app-shell
 
 </docs-code>
 
-For more information about this command, see [App shell command](cli/generate/app-shell).
+이 명령에 대한 자세한 내용은 [앱 쉘 명령](cli/generate/app-shell)을 참조하십시오.
 
-The command updates the application code and adds extra files to the project structure.
+해당 명령은 애플리케이션 코드를 업데이트하고 프로젝트 구조에 추가 파일을 추가합니다.
 
 <docs-code language="text">
 src
 ├── app
-│ ├── app.config.server.ts # server application configuration
-│ └── app-shell # app-shell component
+│ ├── app.config.server.ts # 서버 애플리케이션 구성
+│ └── app-shell # 앱 쉘 구성 요소
 │   ├── app-shell.component.html
 │   ├── app-shell.component.scss
 │   ├── app-shell.component.spec.ts
 │   └── app-shell.component.ts
-└── main.server.ts # main server application bootstrapping
+└── main.server.ts # 메인 서버 애플리케이션 부트스트래핑
 </docs-code>
 
-<docs-step title="Verify the application is built with the shell content">
-
+<docs-step title="애플리케이션이 쉘 콘텐츠로 빌드되었는지 확인">
 <docs-code language="shell">
 
 ng build --configuration=development
 
 </docs-code>
 
-Or to use the production configuration.
+또는 프로덕션 구성을 사용합니다.
 
 <docs-code language="shell">
 
@@ -58,7 +57,7 @@ ng build
 
 </docs-code>
 
-To verify the build output, open <code class="no-auto-link">dist/my-app/browser/index.html</code>.
-Look for default text `app-shell works!` to show that the application shell route was rendered as part of the output.
+빌드 출력을 확인하려면 <code class="no-auto-link">dist/my-app/browser/index.html</code>을 엽니다.
+기본 텍스트 `app-shell works!`가 표시되어 애플리케이션 쉘 라우트가 출력의 일부로 렌더링되었음을 보여줍니다.
 </docs-step>
-</docs-workflow>
+</docs-workflow>
\ No newline at end of file
diff --git a/adev/src/content/ecosystem/service-workers/communications.md b/adev/src/content/ecosystem/service-workers/communications.md
index ea08f24a932d..3ed3c53a3553 100644
--- a/adev/src/content/ecosystem/service-workers/communications.md
+++ b/adev/src/content/ecosystem/service-workers/communications.md
@@ -1,107 +1,107 @@
-# Communicating with the Service Worker
+# 서비스 워커와의 통신
 
-Enabling service worker support does more than just register the service worker; it also provides services you can use to interact with the service worker and control the caching of your application.
+서비스 워커 지원을 활성화하는 것은 서비스 워커를 등록하는 것 이상입니다. 이는 서비스 워커와 상호작용하고 애플리케이션의 캐싱을 제어하는 데 사용할 수 있는 서비스도 제공합니다.
 
-## `SwUpdate` service
+## `SwUpdate` 서비스
 
-The `SwUpdate` service gives you access to events that indicate when the service worker discovers and installs an available update for your application.
+`SwUpdate` 서비스는 서비스 워커가 애플리케이션에 대한 사용 가능한 업데이트를 발견하고 설치할 때를 나타내는 이벤트에 접근할 수 있도록 합니다.
 
-The `SwUpdate` service supports three separate operations:
+`SwUpdate` 서비스는 세 가지 별도의 작업을 지원합니다:
 
-* Receiving notifications when an updated version is *detected* on the server, *installed and ready* to be used locally or when an *installation fails*.
-* Asking the service worker to check the server for new updates.
-* Asking the service worker to activate the latest version of the application for the current tab.
+* 서버에서 업데이트된 버전이 *감지*되었을 때, *설치되었으며* 로컬에서 사용할 준비가 되었을 때 또는 *설치 실패* 시 알림 수신.
+* 서비스 워커에게 새로운 업데이트가 있는지 서버를 확인하도록 요청.
+* 현재 탭에 대해 애플리케이션의 최신 버전을 활성화하도록 서비스 워커에게 요청.
 
-### Version updates
+### 버전 업데이트
 
-The `versionUpdates` is an `Observable` property of `SwUpdate` and emits four event types:
+`versionUpdates`는 `SwUpdate`의 `Observable` 속성이며, 네 가지 이벤트 유형을 발생시킵니다:
 
-| Event types                      | Details |
-|:---                              |:---     |
-| `VersionDetectedEvent`           | Emitted when the service worker has detected a new version of the app on the server and is about to start downloading it.                                                   |
-| `NoNewVersionDetectedEvent`      | Emitted when the service worker has checked the version of the app on the server and did not find a new version.                                                            |
-| `VersionReadyEvent`              | Emitted when a new version of the app is available to be activated by clients. It may be used to notify the user of an available update or prompt them to refresh the page. |
-| `VersionInstallationFailedEvent` | Emitted when the installation of a new version failed. It may be used for logging/monitoring purposes.                                                                      |
+| 이벤트 유형                           | 세부 사항 |
+|:---                                  |:---     |
+| `VersionDetectedEvent`               | 서비스 워커가 서버에서 앱의 새 버전을 감지하고 다운로드를 시작하려고 할 때 발생합니다.                                                  |
+| `NoNewVersionDetectedEvent`          | 서비스 워커가 서버에서 앱의 버전을 확인했지만 새 버전을 찾지 못했을 때 발생합니다.                                                             |
+| `VersionReadyEvent`                  | 클라이언트가 활성화할 수 있는 새 버전의 앱이 있을 때 발생합니다. 이는 사용자에게 사용 가능한 업데이트를 알리거나 페이지 새로 고침을 요청하는 데 사용될 수 있습니다. |
+| `VersionInstallationFailedEvent`     | 새 버전 설치가 실패했을 때 발생합니다. 이는 로깅/모니터링 목적으로 사용될 수 있습니다.                                                                     |
 
 <docs-code header="log-update.service.ts" path="adev/src/content/examples/service-worker-getting-started/src/app/log-update.service.ts" visibleRegion="sw-update"/>
 
-### Checking for updates
+### 업데이트 확인
 
-It's possible to ask the service worker to check if any updates have been deployed to the server.
-The service worker checks for updates during initialization and on each navigation request —that is, when the user navigates from a different address to your application.
-However, you might choose to manually check for updates if you have a site that changes frequently or want updates to happen on a schedule.
+서비스 워커에게 서버에 배포된 업데이트가 있는지 확인하도록 요청할 수 있습니다.
+서비스 워커는 초기화 중 및 각 탐색 요청(즉, 사용자가 다른 주소에서 애플리케이션으로 탐색할 때) 중에 업데이트를 확인합니다.
+그러나 변경频繁한 사이트가 있거나 일정에 따라 업데이트가 발생하도록 원한다면 수동으로 업데이트를 확인할 수 있습니다.
 
-Do this with the `checkForUpdate()` method:
+`checkForUpdate()` 메서드를 사용하여 수행합니다:
 
 <docs-code header="check-for-update.service.ts" path="adev/src/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts"/>
 
-This method returns a `Promise<boolean>` which indicates if an update is available for activation.
-The check might fail, which will cause a rejection of the `Promise`.
+이 메서드는 활성화가 가능한 업데이트가 있는지를 나타내는 `Promise<boolean>`을 반환합니다.
+검사가 실패할 수 있으며, 이 경우 `Promise`가 거부됩니다.
 
-<docs-callout important title="Stabilization and service worker registration">
-In order to avoid negatively affecting the initial rendering of the page, by default the Angular service worker service waits for up to 30 seconds for the application to stabilize before registering the ServiceWorker script.
+<docs-callout important title="안정화 및 서비스 워커 등록">
+페이지의 초기 렌더링에 부정적인 영향을 미치지 않도록, 기본적으로 Angular 서비스 워커 서비스는 애플리케이션이 안정화될 때까지 최대 30초 동안 대기한 후 ServiceWorker 스크립트를 등록합니다.
 
-Constantly polling for updates, for example, with [setInterval()](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) or RxJS' [interval()](https://rxjs.dev/api/index/function/interval), prevents the application from stabilizing and the ServiceWorker script is not registered with the browser until the 30 seconds upper limit is reached.
+예를 들어, [setInterval()](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) 또는 RxJS의 [interval()](https://rxjs.dev/api/index/function/interval)을 사용하여 업데이트를 지속적으로 폴링하면 애플리케이션이 안정화되지 못하고, 30초 제한에 도달할 때까지 ServiceWorker 스크립트가 브라우저에 등록되지 않습니다.
 
-This is true for any kind of polling done by your application.
-Check the [isStable](api/core/ApplicationRef#isStable) documentation for more information.
+이는 애플리케이션에 의해 수행되는 모든 종류의 폴링에 해당합니다.
+자세한 내용은 [isStable](api/core/ApplicationRef#isStable) 문서를 참조하십시오.
 
-Avoid that delay by waiting for the application to stabilize first, before starting to poll for updates, as shown in the preceding example.
-Alternatively, you might want to define a different [registration strategy](api/service-worker/SwRegistrationOptions#registrationStrategy) for the ServiceWorker.
+업데이트를 폴링하기 시작하기 전에 애플리케이션이 먼저 안정화될 때까지 기다려 딜레이를 피하도록 하세요. 이전의 예제처럼요.
+대안으로, ServiceWorker에 대해 다른 [등록 전략](api/service-worker/SwRegistrationOptions#registrationStrategy)을 정의할 수도 있습니다.
 </docs-callout>
 
-### Updating to the latest version
+### 최신 버전으로 업데이트하기
 
-You can update an existing tab to the latest version by reloading the page as soon as a new version is ready.
-To avoid disrupting the user's progress, it is generally a good idea to prompt the user and let them confirm that it is OK to reload the page and update to the latest version:
+새 버전이 준비되면 페이지를 새로 고쳐 기존 탭을 최신 버전으로 업데이트할 수 있습니다.
+사용자의 진행 상황이 방해받지 않도록 일반적으로 사용자를 프롬프트하여 페이지를 새로 고치고 최신 버전으로 업데이트해도 괜찮다고 확인하도록 하는 것이 좋습니다:
 
 <docs-code header="prompt-update.service.ts" path="adev/src/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts" visibleRegion="sw-version-ready"/>
 
-<docs-callout important title="Safety of updating without reloading">
-Calling `activateUpdate()` updates a tab to the latest version without reloading the page, but this could break the application.
+<docs-callout important title="페이지 새로 고침 없이 업데이트의 안전성">
+`activateUpdate()`를 호출하면 페이지를 새로 고침하지 않고 탭을 최신 버전으로 업데이트하지만, 이것은 애플리케이션을 깨뜨릴 수 있습니다.
 
-Updating without reloading can create a version mismatch between the application shell and other page resources, such as lazy-loaded chunks, whose filenames may change between versions.
+새로 고침 없이 업데이트하면 애플리케이션 셸과 lazy-loaded 청크와 같은 기타 페이지 리소스 간에 버전 불일치가 발생할 수 있으며, 이러한 리소스의 파일 이름은 버전 간에 변경될 수 있습니다.
 
-You should only use `activateUpdate()`, if you are certain it is safe for your specific use case.
+특정 사용 사례에 대해 안전하다고 확신하는 경우에만 `activateUpdate()`를 사용해야 합니다.
 </docs-callout>
 
-### Handling an unrecoverable state
+### 복구 불가능한 상태 처리
 
-In some cases, the version of the application used by the service worker to serve a client might be in a broken state that cannot be recovered from without a full page reload.
+일부 경우, 서비스 워커가 클라이언트에 서비스를 제공하는 데 사용하는 애플리케이션의 버전이 전체 페이지 새로 고침 없이 복구할 수 없는 손상된 상태일 수 있습니다.
 
-For example, imagine the following scenario:
+예를 들어, 다음 시나리오를 가정해 보십시오:
 
-1. A user opens the application for the first time and the service worker caches the latest version of the application.
-    Assume the application's cached assets include `index.html`, `main.<main-hash-1>.js` and `lazy-chunk.<lazy-hash-1>.js`.
+1. 사용자가 애플리케이션을 처음 열고 서비스 워커가 애플리케이션의 최신 버전을 캐싱합니다.
+    애플리케이션의 캐시된 자산에는 `index.html`, `main.<main-hash-1>.js` 및 `lazy-chunk.<lazy-hash-1>.js`가 포함됩니다.
 
-1. The user closes the application and does not open it for a while.
-1. After some time, a new version of the application is deployed to the server.
-    This newer version includes the files `index.html`, `main.<main-hash-2>.js` and `lazy-chunk.<lazy-hash-2>.js`.
+1. 사용자가 애플리케이션을 닫고 잠시 동안 열지 않습니다.
+1. 시간이 지나고 애플리케이션의 새로운 버전이 서버에 배포됩니다.
+    이 새로운 버전에는 `index.html`, `main.<main-hash-2>.js` 및 `lazy-chunk.<lazy-hash-2>.js` 파일이 포함됩니다.
 
-IMPORTANT: The hashes are different now, because the content of the files changed. The old version is no longer available on the server.
+중요: 현재 해시가 다르므로 파일의 내용이 변경되었습니다. 이전 버전은 더 이상 서버에서 사용할 수 없습니다.
 
-1. In the meantime, the user's browser decides to evict `lazy-chunk.<lazy-hash-1>.js` from its cache.
-    Browsers might decide to evict specific (or all) resources from a cache in order to reclaim disk space.
+1. 그 사이에 사용자의 브라우저는 `lazy-chunk.<lazy-hash-1>.js`를 캐시에서 퇴출하기로 결정합니다.
+    브라우저는 디스크 공간을 회수하기 위해 캐시에서 특정(또는 모든) 리소스를 퇴출하기로 결정할 수 있습니다.
 
-1. The user opens the application again.
-    The service worker serves the latest version known to it at this point, namely the old version (`index.html` and `main.<main-hash-1>.js`).
+1. 사용자가 애플리케이션을 다시 엽니다.
+    서비스 워커는 이 시점에서 알고 있는 최신 버전인 이전 버전(`index.html` 및 `main.<main-hash-1>.js`)을 제공합니다.
 
-1. At some later point, the application requests the lazy bundle, `lazy-chunk.<lazy-hash-1>.js`.
-1. The service worker is unable to find the asset in the cache (remember that the browser evicted it).
-    Nor is it able to retrieve it from the server (because the server now only has `lazy-chunk.<lazy-hash-2>.js` from the newer version).
+1. 이후에 애플리케이션이 lazy 번들인 `lazy-chunk.<lazy-hash-1>.js`를 요청합니다.
+1. 서비스 워커는 캐시에서 자산을 찾을 수 없습니다(브라우저가 이를 퇴출했기 때문임을 기억하십시오).
+    또한 서버에서 이를 검색할 수 없습니다(서버에는 이제 새로운 버전에서 `lazy-chunk.<lazy-hash-2>.js`만 있습니다).
 
-In the preceding scenario, the service worker is not able to serve an asset that would normally be cached.
-That particular application version is broken and there is no way to fix the state of the client without reloading the page.
-In such cases, the service worker notifies the client by sending an `UnrecoverableStateEvent` event.
-Subscribe to `SwUpdate#unrecoverable` to be notified and handle these errors.
+앞의 시나리오에서 서비스 워커는 일반적으로 캐시된 자산을 제공할 수 없습니다.
+특정 애플리케이션 버전이 손상되어 클라이언트의 상태를 페이지를 새로 고침하지 않고 수정할 방법이 없습니다.
+이러한 경우, 서비스 워커는 `UnrecoverableStateEvent` 이벤트를 보내 클라이언트를 알립니다.
+`SwUpdate#unrecoverable`를 구독하여 알림을 받고 이러한 오류를 처리하세요.
 
 <docs-code header="handle-unrecoverable-state.service.ts" path="adev/src/content/examples/service-worker-getting-started/src/app/handle-unrecoverable-state.service.ts" visibleRegion="sw-unrecoverable-state"/>
 
-## More on Angular service workers
+## Angular 서비스 워커에 대한 더 많은 정보
 
-You might also be interested in the following:
+다음 내용에도 관심이 있을 수 있습니다:
 
 <docs-pill-row>
-  <docs-pill href="ecosystem/service-workers/push-notifications" title="Push notifications"/>
-  <docs-pill href="ecosystem/service-workers/devops" title="Service Worker devops"/>
-</docs-pill-row>
+  <docs-pill href="ecosystem/service-workers/push-notifications" title="푸시 알림"/>
+  <docs-pill href="ecosystem/service-workers/devops" title="서비스 워커 DevOps"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/ecosystem/service-workers/config.md b/adev/src/content/ecosystem/service-workers/config.md
index 1cdf056d346c..39f7abac4915 100644
--- a/adev/src/content/ecosystem/service-workers/config.md
+++ b/adev/src/content/ecosystem/service-workers/config.md
@@ -1,67 +1,67 @@
-# Service Worker configuration file
+# 서비스 워커 구성 파일
 
-This topic describes the properties of the service worker configuration file.
+이 주제는 서비스 워커 구성 파일의 속성에 대해 설명합니다.
 
-## Modifying the configuration
+## 구성 수정
 
-The `ngsw-config.json` JSON configuration file specifies which files and data URLs the Angular service worker should cache and how it should update the cached files and data.
-The [Angular CLI](tools/cli) processes this configuration file during `ng build`.
+`ngsw-config.json` JSON 구성 파일은 Angular 서비스 워커가 캐시해야 할 파일과 데이터 URL을 지정하고, 캐시된 파일과 데이터를 업데이트하는 방법을 정의합니다.
+[Angular CLI](tools/cli)는 `ng build` 동안 이 구성 파일을 처리합니다.
 
-All file paths must begin with `/`, which corresponds to the deployment directory — usually `dist/<project-name>` in CLI projects.
+모든 파일 경로는 `/`로 시작해야 하며, 이는 배포 디렉터리에 해당합니다. 일반적으로 CLI 프로젝트에서는 `dist/<project-name>`입니다.
 
-Unless otherwise commented, patterns use a **limited*** glob format that internally will be converted into regex:
+특별한 언급이 없는 한, 패턴은 **제한된** glob 형식을 사용하며, 내부적으로는 regex로 변환됩니다.
 
-| Glob formats | Details |
-|:---          |:---     |
-| `**`         | Matches 0 or more path segments                                                                        |
-| `*`          | Matches 0 or more characters excluding `/`                                                             |
-| `?`          | Matches exactly one character excluding `/`                                                            |
-| `!` prefix   | Marks the pattern as being negative, meaning that only files that don't match the pattern are included |
+| Glob 형식   | 세부사항                |
+|:---         |:---                    |
+| `**`        | 0개 이상의 경로 세그먼트를 일치시킵니다.                  |
+| `*`         | `/`를 제외한 0개 이상의 문자와 일치합니다.               |
+| `?`         | `/`를 제외한 정확히 하나의 문자와 일치합니다.            |
+| `!` 접두사  | 패턴을 부정으로 표시하여 패턴과 일치하지 않는 파일만 포함됩니다. |
 
-<docs-callout important title="Special characters need to be escaped">
-Pay attention that some characters with a special meaning in a regular expression are not escaped and also the pattern is not wrapped in `^`/`$` in the internal glob to regex conversion.
+<docs-callout important title="특수 문자는 이스케이프되어야 합니다">
+정규 표현식에서 특별한 의미를 가진 일부 문자가 이스케이프되지 않으며, 내부 glob에서 regex 변환 시 패턴이 `^`/`$`로 감싸지지 않는 것을 주의하십시오.
 
-`$` is a special character in regex that matches the end of the string and will not be automatically escaped when converting the glob pattern to a regular expression.
+`$`는 문자열의 끝과 일치하는 regex의 특수 문자이며, glob 패턴을 정규 표현식으로 변환할 때 자동으로 이스케이프되지 않습니다.
 
-If you want to literally match the `$` character, you have to escape it yourself (with `\\$`). For example, the glob pattern `/foo/bar/$value` results in an unmatchable expression, because it is impossible to have a string that has any characters after it has ended.
+`$` 문자를 문자적으로 일치시키려면 직접 이스케이프해야 합니다(예: `\\$`). 예를 들어, glob 패턴 `/foo/bar/$value`는 일치할 수 없는 표현식을 생성합니다. 문자열이 끝난 이후에 어떤 문자도 존재할 수 없기 때문입니다.
 
-The pattern will not be automatically wrapped in `^` and `$` when converting it to a regular expression. Therefore, the patterns will partially match the request URLs.
+패턴은 정규 표현식으로 변환할 때 자동으로 `^`와 `$`로 감싸지지 않습니다. 따라서 패턴은 요청 URL과 부분적으로 일치합니다.
 
-If you want your patterns to match the beginning and/or end of URLs, you can add `^`/`$` yourself. For example, the glob pattern `/foo/bar/*.js` will match both `.js` and `.json` files. If you want to only match `.js` files, use `/foo/bar/*.js$`.
+패턴이 URL의 시작 및/또는 끝과 일치하려면 `^`/`$`를 직접 추가할 수 있습니다. 예를 들어, glob 패턴 `/foo/bar/*.js`는 `.js` 및 `.json` 파일을 모두 일치시킵니다. `.js` 파일만 일치시키려면 `/foo/bar/*.js$`를 사용하십시오.
 </docs-callout>
 
-Example patterns:
+예시 패턴:
 
-| Patterns     | Details |
-|:---          |:---     |
-| `/**/*.html` | Specifies all HTML files              |
-| `/*.html`    | Specifies only HTML files in the root |
-| `!/**/*.map` | Exclude all sourcemaps                |
+| 패턴        | 세부사항                          |
+|:---         |:---                              |
+| `/**/*.html` | 모든 HTML 파일을 지정합니다.      |
+| `/*.html`    | 루트에서만 HTML 파일을 지정합니다. |
+| `!/**/*.map` | 모든 소스 맵을 제외합니다.           |
 
-## Service worker configuration properties
+## 서비스 워커 구성 속성
 
-The following sections describe each property of the configuration file.
+다음 섹션에서는 구성 파일의 각 속성에 대해 설명합니다.
 
 ### `appData`
 
-This section enables you to pass any data you want that describes this particular version of the application.
-The `SwUpdate` service includes that data in the update notifications.
-Many applications use this section to provide additional information for the display of UI popups, notifying users of the available update.
+이 섹션에서는 이 특정 버전의 애플리케이션을 설명하는 데이터를 전달할 수 있습니다.
+`SwUpdate` 서비스는 해당 데이터를 업데이트 알림에 포함합니다.
+많은 애플리케이션이 이 섹션을 사용하여 UI 팝업 표시를 위한 추가 정보를 제공하며, 사용자가 사용 가능한 업데이트에 대해 알립니다.
 
 ### `index`
 
-Specifies the file that serves as the index page to satisfy navigation requests.
-Usually this is `/index.html`.
+탐색 요청을 만족시키기 위해 인덱스 페이지 역할을 하는 파일을 지정합니다.
+보통 이 파일은 `/index.html`입니다.
 
 ### `assetGroups`
 
-*Assets* are resources that are part of the application version that update along with the application.
-They can include resources loaded from the page's origin as well as third-party resources loaded from CDNs and other external URLs.
-As not all such external URLs might be known at build time, URL patterns can be matched.
+*자산*은 애플리케이션 버전의 일부로, 애플리케이션과 함께 업데이트되는 리소스입니다.
+이는 페이지의 출처에서 로드되는 리소스와 CDN 및 기타 외부 URL에서 로드되는 제3자 리소스를 포함할 수 있습니다.
+모든 외부 URL이 빌드 시점에 알려지지 않을 수 있으므로, URL 패턴을 매칭할 수 있습니다.
 
-HELPFUL: For the service worker to handle resources that are loaded from different origins, make sure that [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) is correctly configured on each origin's server.
+도움이 됨: 다양한 출처에서 로드되는 리소스를 서비스 워커가 처리하게 하려면 각 출처 서버에서 [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS)가 올바르게 구성되어 있는지 확인하십시오.
 
-This field contains an array of asset groups, each of which defines a set of asset resources and the policy by which they are cached.
+이 필드는 각각 자신이 캐시되는 자산 리소스 집합과 정책을 정의하는 자산 그룹의 배열을 포함합니다.
 
 <docs-code language="json">
 
@@ -78,16 +78,16 @@ This field contains an array of asset groups, each of which defines a set of ass
 
 </docs-code>
 
-HELPFUL: When the ServiceWorker handles a request, it checks asset groups in the order in which they appear in `ngsw-config.json`.
-The first asset group that matches the requested resource handles the request.
+도움이 됨: 서비스 워커가 요청을 처리할 때 `ngsw-config.json`에 나타나는 순서대로 자산 그룹을 체크합니다.
+첫 번째로 요청된 리소스와 일치하는 자산 그룹이 요청을 처리합니다.
 
-It is recommended that you put the more specific asset groups higher in the list.
-For example, an asset group that matches `/foo.js` should appear before one that matches `*.js`.
+더 구체적인 자산 그룹을 목록 상단에 배치하는 것이 좋습니다.
+예를 들어, `/foo.js`와 일치하는 자산 그룹은 `*.js`와 일치하는 자산 그룹보다 위에 와야 합니다.
 
-Each asset group specifies both a group of resources and a policy that governs them.
-This policy determines when the resources are fetched and what happens when changes are detected.
+각 자산 그룹은 리소스 그룹과 이를 관리하는 정책을 모두 지정합니다.
+이 정책은 리소스가 언제 가져오는지와 변경 사항이 감지되었을 때 어떤 일이 발생하는지를 결정합니다.
 
-Asset groups follow the Typescript interface shown here:
+자산 그룹은 다음과 같은 Typescript 인터페이스를 따릅니다:
 
 <docs-code language="typescript">
 
@@ -106,63 +106,63 @@ interface AssetGroup {
 
 </docs-code>
 
-Each `AssetGroup` is defined by the following asset group properties.
+각 `AssetGroup`은 다음 자산 그룹 속성으로 정의됩니다.
 
 #### `name`
 
-A `name` is mandatory.
-It identifies this particular group of assets between versions of the configuration.
+`name`은 필수입니다.
+구성의 버전 간에 특정 자산 그룹을 구분합니다.
 
 #### `installMode`
 
-The `installMode` determines how these resources are initially cached.
-The `installMode` can be either of two values:
+`installMode`는 이러한 리소스가 처음 캐시되는 방법을 결정합니다.
+`installMode`는 두 가지 값 중 하나일 수 있습니다:
 
-| Values     | Details |
-|:---        |:---     |
-| `prefetch` | Tells the Angular service worker to fetch every single listed resource while it's caching the current version of the application. This is bandwidth-intensive but ensures resources are available whenever they're requested, even if the browser is currently offline.                                                                                                                       |
-| `lazy`     | Does not cache any of the resources up front. Instead, the Angular service worker only caches resources for which it receives requests. This is an on-demand caching mode. Resources that are never requested are not cached. This is useful for things like images at different resolutions, so the service worker only caches the correct assets for the particular screen and orientation. |
+| 값         | 세부사항                                                                                                                                                                                             |
+|:---        |:---                                                                                                                                                                                               |
+| `prefetch` | Angular 서비스 워커에게 현재 애플리케이션의 버전을 캐시하는 동안 모든 나열된 리소스를 미리 가져오라고 지시합니다. 이는 대역폭을 많이 소모하지만, 브라우저가 오프라인일 때에도 리소스를 요청할 때 사용할 수 있도록 보장합니다. |
+| `lazy`     | 리소스를 사전에 캐시하지 않습니다. 대신, Angular 서비스 워커는 요청이 들어오는 리소스만 캐시합니다. 이는 요구 시 캐싱 모드입니다. 요청되지 않은 리소스는 캐시되지 않습니다. 이는 다양한 해상도의 이미지와 같은 것에 유용하여, 서비스 워커는 특정 화면과 방향에 필요한 올바른 자산만 캐시합니다. |
 
-Defaults to `prefetch`.
+기본값은 `prefetch`입니다.
 
 #### `updateMode`
 
-For resources already in the cache, the `updateMode` determines the caching behavior when a new version of the application is discovered.
-Any resources in the group that have changed since the previous version are updated in accordance with `updateMode`.
+캐시에 이미 있는 리소스의 경우, `updateMode`는 새로운 버전의 애플리케이션이 발견되었을 때의 캐싱 동작을 결정합니다.
+이전 버전 이후 변경된 자산 그룹의 리소스는 `updateMode`에 따라 업데이트됩니다.
 
-| Values     | Details |
-|:---        |:---     |
-| `prefetch` | Tells the service worker to download and cache the changed resources immediately.                                                                                                                                                        |
-| `lazy`     | Tells the service worker to not cache those resources. Instead, it treats them as unrequested and waits until they're requested again before updating them. An `updateMode` of `lazy` is only valid if the `installMode` is also `lazy`. |
+| 값         | 세부사항                                                                                                                                              |
+|:---        |:---                                                                                                                                               |
+| `prefetch` | 변경된 리소스를 즉시 다운로드 및 캐시하라고 서비스 워커에 지시합니다.                                                                                   |
+| `lazy`     | 서비스 워커에 해당 리소스를 캐시하지 말라고 지시합니다. 대신, 이는 요청되지 않은 것처럼 처리하고 요청이 다시 들어올 때까지 업데이트를 기다립니다. `lazy`의 `updateMode`는 `installMode`도 `lazy`일 때만 유효합니다. |
 
-Defaults to the value `installMode` is set to.
+기본값은 `installMode`에 설정된 값입니다.
 
 #### `resources`
 
-This section describes the resources to cache, broken up into the following groups:
+이 섹션에서는 캐시할 리소스를 설명하며, 다음 그룹으로 나뉩니다:
 
-| Resource groups | Details |
-|:---             |:---     |
-| `files`         | Lists patterns that match files in the distribution directory. These can be single files or glob-like patterns that match a number of files.                                                                                                                                                                                                                                                                   |
-| `urls`          | Includes both URLs and URL patterns that are matched at runtime. These resources are not fetched directly and do not have content hashes, but they are cached according to their HTTP headers. This is most useful for CDNs such as the Google Fonts service. <br />  *(Negative glob patterns are not supported and `?` will be matched literally; that is, it will not match any character other than `?`.)* |
+| 리소스 그룹  | 세부사항                                                    |
+|:---          |:---                                                        |
+| `files`      | 배포 디렉터리에서 파일과 일치하는 패턴 목록입니다. 이러한 패턴은 단일 파일 또는 여러 파일과 일치하는 glob과 유사한 패턴일 수 있습니다. |
+| `urls`       | 런타임에서 일치하는 URL 및 URL 패턴을 포함합니다. 이러한 리소스는 직접 가져오지 않으며 콘텐츠 해시가 없지만 HTTP 헤더에 따라 캐시됩니다. Google Fonts 서비스와 같은 CDN에 유용합니다. <br />  *(부정적인 glob 패턴은 지원되지 않으며 `?`는 문자 그대로 일치합니다; 즉, `?` 외의 다른 문자와 일치하지 않습니다.)* |
 
 #### `cacheQueryOptions`
 
-These options are used to modify the matching behavior of requests.
-They are passed to the browsers `Cache#match` function.
-See [MDN](https://developer.mozilla.org/docs/Web/API/Cache/match) for details.
-Currently, only the following options are supported:
+이 옵션들은 요청의 매칭 동작을 수정하는 데 사용됩니다.
+브라우저의 `Cache#match` 함수에 전달됩니다.
+자세한 내용은 [MDN](https://developer.mozilla.org/docs/Web/API/Cache/match)을 참조하십시오.
+현재 지원되는 옵션은 다음과 같습니다:
 
-| Options        | Details |
-|:---            |:---     |
-| `ignoreSearch` | Ignore query parameters. Defaults to `false`. |
+| 옵션          | 세부사항                          |
+|:---          |:---                              |
+| `ignoreSearch` | 쿼리 매개변수를 무시합니다. 기본값은 `false`입니다. |
 
 ### `dataGroups`
 
-Unlike asset resources, data requests are not versioned along with the application.
-They're cached according to manually-configured policies that are more useful for situations such as API requests and other data dependencies.
+자산 리소스와 달리 데이터 요청은 애플리케이션과 함께 버전 관리되지 않습니다.
+이들은 API 요청 및 기타 데이터 종속성과 같은 상황에 더 유용한 수동 구성 정책에 따라 캐시됩니다.
 
-This field contains an array of data groups, each of which defines a set of data resources and the policy by which they are cached.
+이 필드는 각각 데이터 리소스를 정의하고 이를 캐시하는 정책을 포함하는 데이터 그룹의 배열을 포함합니다.
 
 <docs-code language="json">
 
@@ -179,13 +179,13 @@ This field contains an array of data groups, each of which defines a set of data
 
 </docs-code>
 
-HELPFUL: When the ServiceWorker handles a request, it checks data groups in the order in which they appear in `ngsw-config.json`.
-The first data group that matches the requested resource handles the request.
+도움이 됨: 서비스 워커가 요청을 처리할 때 `ngsw-config.json`에 나타나는 순서대로 데이터 그룹을 체크합니다.
+첫 번째로 요청된 리소스와 일치하는 데이터 그룹이 요청을 처리합니다.
 
-It is recommended that you put the more specific data groups higher in the list.
-For example, a data group that matches `/api/foo.json` should appear before one that matches `/api/*.json`.
+더 구체적인 데이터 그룹을 목록 상단에 배치하는 것이 좋습니다.
+예를 들어, `/api/foo.json`과 일치하는 데이터 그룹은 `/api/*.json`과 일치하는 그룹보다 위에 와야 합니다.
 
-Data groups follow this Typescript interface:
+데이터 그룹은 다음 Typescript 인터페이스를 따릅니다:
 
 <docs-code language="typescript">
 
@@ -207,175 +207,173 @@ export interface DataGroup {
 
 </docs-code>
 
-Each `DataGroup` is defined by the following data group properties.
+각 `DataGroup`은 다음 데이터 그룹 속성으로 정의됩니다.
 
 #### `name`
 
-Similar to `assetGroups`, every data group has a `name` which uniquely identifies it.
+`assetGroups`와 유사하게 각 데이터 그룹은 고유하게 식별하는 `name`을 가집니다.
 
 #### `urls`
 
-A list of URL patterns.
-URLs that match these patterns are cached according to this data group's policy.
-Only non-mutating requests (GET and HEAD) are cached.
+URL 패턴 목록입니다.
+이 패턴과 일치하는 URL는 이 데이터 그룹의 정책에 따라 캐시됩니다.
+오직 비변이 요청(GET 및 HEAD)만 캐시됩니다.
 
-* Negative glob patterns are not supported
-* `?` is matched literally; that is, it matches *only* the character `?`
+* 부정적인 glob 패턴은 지원되지 않습니다.
+* `?`는 문자 그대로일치합니다; 즉, `?` 문자와만 일치합니다.
 
 #### `version`
 
-Occasionally APIs change formats in a way that is not backward-compatible.
-A new version of the application might not be compatible with the old API format and thus might not be compatible with existing cached resources from that API.
+때때로 API는 이전 호환성과 호환되지 않는 방식으로 형식을 변경합니다. 
+애플리케이션의 새로운 버전은 이전 API 형식과 호환되지 않을 수 있으며, 그러므로 기존 캐시된 리소스와 호환되지 않을 수 있습니다.
 
-`version` provides a mechanism to indicate that the resources being cached have been updated in a backwards-incompatible way, and that the old cache entries —those from previous versions— should be discarded.
+`version`은 캐시되는 리소스가 이전 호환성과 호환되지 않게 업데이트되었음을 나타내는 메커니즘을 제공합니다.
+이전 버전의 캐시 항목은 폐기되어야 합니다.
 
-`version` is an integer field and defaults to `1`.
+`version`은 정수 필드이며, 기본값은 `1`입니다.
 
 #### `cacheConfig`
 
-The following properties define the policy by which matching requests are cached.
+아래 속성들은 요청이 매칭되는 방식을 정의합니다.
 
 ##### `maxSize`
 
-The maximum number of entries, or responses, in the cache.
+캐시에서 엔트리, 또는 응답의 최대 수입니다.
 
-CRITICAL: Open-ended caches can grow in unbounded ways and eventually exceed storage quotas, resulting in eviction.
+중요: 무한 캐시는 무제한으로 성장할 수 있으며 결국 저장소 쿼터를 초과하여 제거될 수 있습니다.
 
 ##### `maxAge`
 
-The `maxAge` parameter indicates how long responses are allowed to remain in the cache before being considered invalid and evicted. `maxAge` is a duration string, using the following unit suffixes:
+`maxAge` 매개변수는 응답이 유효하지 않도록 간주되어 제거되기까지 캐시에서 얼마나 오랫동안 유지될 수 있는지를 나타냅니다. `maxAge`는 다음 단위 접미사를 사용하는 기간 문자열입니다:
 
-| Suffixes | Details |
-|:---      |:---     |
-| `d`      | Days         |
-| `h`      | Hours        |
-| `m`      | Minutes      |
-| `s`      | Seconds      |
-| `u`      | Milliseconds |
+| 접미사 | 세부사항                  |
+|:---     |:---                      |
+| `d`     | 일                       |
+| `h`     | 시간                     |
+| `m`     | 분                       |
+| `s`     | 초                       |
+| `u`     | 밀리초                   |
 
-For example, the string `3d12h` caches content for up to three and a half days.
+예를 들어, 문자열 `3d12h`는 콘텐츠를 최대 3일 반 동안 캐시합니다.
 
 ##### `timeout`
 
-This duration string specifies the network timeout.
-The network timeout is how long the Angular service worker waits for the network to respond before using a cached response, if configured to do so.
-`timeout` is a duration string, using the following unit suffixes:
+이 기간 문자열은 네트워크 시간 초과를 지정합니다.
+네트워크 시간 초과는 Angular 서비스 워커가 응답하기 이전에 네트워크가 응답하기를 얼마 동안 기다리는지를 결정합니다. 
+`timeout`은 기간 문자열로, 다음 단위 접미사를 사용합니다:
 
-| Suffixes | Details |
-|:---      |:---     |
-| `d`      | Days         |
-| `h`      | Hours        |
-| `m`      | Minutes      |
-| `s`      | Seconds      |
-| `u`      | Milliseconds |
+| 접미사 | 세부사항                  |
+|:---     |:---                      |
+| `d`     | 일                       |
+| `h`     | 시간                     |
+| `m`     | 분                       |
+| `s`     | 초                       |
+| `u`     | 밀리초                   |
 
-For example, the string `5s30u` translates to five seconds and 30 milliseconds of network timeout.
+예를 들어, 문자열 `5s30u`는 5초와 30밀리초의 네트워크 시간 초과를 나타냅니다.
 
 
 ##### `refreshAhead`
 
-This duration string specifies the time ahead of the expiration of a cached resource when the Angular service worker should proactively attempt to refresh the resource from the network.
-The `refreshAhead` duration is an optional configuration that determines how much time before the expiration of a cached response the service worker should initiate a request to refresh the resource from the network.
+이 기간 문자열은 Angular 서비스 워커가 캐시된 리소스의 유효 기간 만료 이전에 네트워크에서 리소스를 업데이트하기 위해 시도해야 하는 시간을 지정합니다.
+`refreshAhead` 기간은 선택적 구성으로, 캐시된 응답의 유효 기간 만료 이전에 서비스 워커가 네트워크에서 리소스를 업데이트하기 위해 요청해야 하는 시간을 결정합니다.
 
-| Suffixes | Details |
-|:---      |:---     |
-| `d`      | Days         |
-| `h`      | Hours        |
-| `m`      | Minutes      |
-| `s`      | Seconds      |
-| `u`      | Milliseconds |
+| 접미사 | 세부사항                  |
+|:---     |:---                      |
+| `d`     | 일                       |
+| `h`     | 시간                     |
+| `m`     | 분                       |
+| `s`     | 초                       |
+| `u`     | 밀리초                   |
 
-For example, the string `1h30m` translates to one hour and 30 minutes ahead of the expiration time.
+예를 들어, 문자열 `1h30m`는 만료 시간의 1시간 30분 전을 나타냅니다.
 
 ##### `strategy`
 
-The Angular service worker can use either of two caching strategies for data resources.
+Angular 서비스 워커는 데이터 리소스를 위해 두 가지 캐싱 전략 중 하나를 사용할 수 있습니다.
 
-| Caching strategies | Details |
-|:---                |:---     |
-| `performance`      | The default, optimizes for responses that are as fast as possible. If a resource exists in the cache, the cached version is used, and no network request is made. This allows for some staleness, depending on the `maxAge`, in exchange for better performance. This is suitable for resources that don't change often; for example, user avatar images. |
-| `freshness`        | Optimizes for currency of data, preferentially fetching requested data from the network. Only if the network times out, according to `timeout`, does the request fall back to the cache. This is useful for resources that change frequently; for example, account balances.                                                                              |
+| 캐싱 전략        | 세부사항                                                                                                          |
+|:---              |:---                                                                                                          |
+| `performance`    | 기본값으로, 가능한 한 빨리 응답을 최적화합니다. 리소스가 캐시되어 있다면 캐시된 버전을 사용하며 네트워크 요청이 이루어지지 않습니다. 이는 `maxAge`에 따라 다소 오래된 자료를 허용하는 대신 더 나은 성능을 제공합니다. | 
+| `freshness`      | 데이터의 최신성을 최적화하여, 요청된 데이터를 네트워크에서 우선적으로 가져옵니다. 네트워크가 시간 초과되면 요청이 캐시로 되돌아갑니다. 이는 자주 변경되는 리소스(예: 계좌 잔액)에 유용합니다.                                          |
 
-HELPFUL: You can also emulate a third strategy, [staleWhileRevalidate](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#stale-while-revalidate), which returns cached data if it is available, but also fetches fresh data from the network in the background for next time.
-To use this strategy set `strategy` to `freshness` and `timeout` to `0u` in `cacheConfig`.
+도움이 됨: 또한 세 번째 전략인 [staleWhileRevalidate](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#stale-while-revalidate)를 에뮬레이트할 수 있습니다. 이 전략은 사용 가능한 경우 캐시된 데이터를 반환하지만, 다음 번을 위해 네트워크에서 최신 데이터를 배경으로 가져옵니다.
+이 전략을 사용하려면 `cacheConfig`에서 `strategy`를 `freshness`로 설정하고 `timeout`을 `0u`로 설정하십시오.
 
-This essentially does the following:
+이는 기본적으로 다음과 같은 조치를 취합니다:
 
-1. Try to fetch from the network first.
-2. If the network request does not complete immediately, that is after a timeout of 0&nbsp;ms, ignore the cache age and fall back to the cached value.
-3. Once the network request completes, update the cache for future requests.
-4. If the resource does not exist in the cache, wait for the network request anyway.
+1. 먼저 네트워크에서 가져오기를 시도합니다.
+2. 네트워크 요청이 즉시 완료되지 않는 경우, 즉 0ms의 시간 초과 후, 캐시의 연령을 무시하고 캐시된 값을 반환합니다.
+3. 네트워크 요청이 완료되면 향후 요청을 위해 캐시를 업데이트합니다.
+4. 캐시에 리소스가 존재하지 않는 경우에도 네트워크 요청을 기다립니다.
 
 ##### `cacheOpaqueResponses`
 
-Whether the Angular service worker should cache opaque responses or not.
+Angular 서비스 워커가 불투명 응답을 캐시해야 하는지 여부입니다.
 
-If not specified, the default value depends on the data group's configured strategy:
+지정하지 않으면 기본값은 데이터 그룹의 구성된 전략에 따라 다릅니다:
 
-| Strategies                             | Details |
-|:---                                    |:---     |
-| Groups with the `freshness` strategy   | The default value is `true` and the service worker caches opaque responses. These groups will request the data every time and only fall back to the cached response when offline or on a slow network. Therefore, it doesn't matter if the service worker caches an error response. |
-| Groups with the `performance` strategy | The default value is `false` and the service worker doesn't cache opaque responses. These groups would continue to return a cached response until `maxAge` expires, even if the error was due to a temporary network or server issue. Therefore, it would be problematic for the service worker to cache an error response. |
+| 전략                              | 세부사항                                                                                                                                           |
+|:---                               |:---                                                                                                                                           |
+| `freshness` 전략을 가진 그룹      | 기본값은 `true`이며, 서비스 워커가 불투명 응답을 캐시합니다. 이러한 그룹은 매번 데이터를 요청하며 오프라인이거나 느린 네트워크에서만 캐시된 응답으로 돌아갑니다. 따라서 서비스 워커가 오류 응답을 캐시하는 것은 중요하지 않습니다. |
+| `performance` 전략을 가진 그룹    | 기본값은 `false`이며, 서비스 워커는 불투명 응답을 캐시하지 않습니다. 이러한 그룹은 `maxAge`가 만료될 때까지 캐시된 응답을 반환할 것입니다. 오류가 일시적인 네트워크 또는 서버 문제로 인해 발생했다 하더라도 문제가 됩니다. |
 
-<docs-callout title="Comment on opaque responses">
-
-In case you are not familiar, an [opaque response](https://fetch.spec.whatwg.org#concept-filtered-response-opaque) is a special type of response returned when requesting a resource that is on a different origin which doesn't return CORS headers.
-One of the characteristics of an opaque response is that the service worker is not allowed to read its status, meaning it can't check if the request was successful or not.
-See [Introduction to `fetch()`](https://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types) for more details.
-
-If you are not able to implement CORS — for example, if you don't control the origin — prefer using the `freshness` strategy for resources that result in opaque responses.
+<docs-callout title="불투명 응답에 대한 주석">
+불투명 응답이 무엇인지 잘 모른다면, [불투명 응답](https://fetch.spec.whatwg.org#concept-filtered-response-opaque)은 CORS 헤더를 반환하지 않는 다른 출처에서 요청된 리소스를 반환할 때 반환되는 특별한 응답 유형입니다.
+불투명 응답의 특징 중 하나는 서비스 워커가 상태를 읽을 수 없으며, 요청이 성공적이었는지 확인할 수 없습니다.
+자세한 내용은 [fetch() 소개](https://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types)를 참조하십시오.
 
+CORS를 구현할 수 없는 경우(예: 출처를 제어할 수 없는 경우) 불투명 응답을 초래하는 리소스의 경우 `freshness` 전략을 사용하는 것이 좋습니다.
 </docs-callout>
 
 #### `cacheQueryOptions`
 
-See [assetGroups](#assetgroups) for details.
+자세한 정보는 [assetGroups](#assetgroups)를 참조하십시오.
 
 ### `navigationUrls`
 
-This optional section enables you to specify a custom list of URLs that will be redirected to the index file.
+이 선택적 섹션은 인덱스 파일로 리디렉션될 사용자 정의 URL 목록을 지정할 수 있게 해줍니다.
 
-#### Handling navigation requests
+#### 탐색 요청 처리
 
-The ServiceWorker redirects navigation requests that don't match any `asset` or `data` group to the specified [index file](#index).
-A request is considered to be a navigation request if:
+서비스 워커는 `asset` 또는 `data` 그룹과 일치하지 않는 탐색 요청을 지정된 [인덱스 파일](#index)로 리디렉션합니다.
+요청이 탐색 요청으로 간주되려면:
 
-* Its [method](https://developer.mozilla.org/docs/Web/API/Request/method) is `GET`
-* Its [mode](https://developer.mozilla.org/docs/Web/API/Request/mode) is `navigation`
-* It accepts a `text/html` response as determined by the value of the `Accept` header
-* Its URL matches the following criteria:
-  * The URL must not contain a file extension (that is, a `.`) in the last path segment
-  * The URL must not contain `__`
+* [메서드](https://developer.mozilla.org/docs/Web/API/Request/method)가 `GET`이어야 합니다.
+* [모드](https://developer.mozilla.org/docs/Web/API/Request/mode)가 `navigation`이어야 합니다.
+* `Accept` 헤더의 값에 따라 `text/html` 응답을 받아들여야 합니다.
+* URL은 다음 기준을 충족해야 합니다: 
+  * URL의 마지막 경로 세그먼트에 파일 확장자(즉, `.`)가 포함되어서는 안 됩니다.
+  * URL은 `__`를 포함해서는 안 됩니다.
 
-HELPFUL: To configure whether navigation requests are sent through to the network or not, see the [navigationRequestStrategy](#navigationrequeststrategy) section and [applicationMaxAge](#application-max-age) sections.
+도움이 됨: 탐색 요청이 네트워크를 통해 전송되는지 여부를 구성하려면 [navigationRequestStrategy](#navigationrequeststrategy) 섹션과 [applicationMaxAge](#application-max-age) 섹션을 참조하십시오.
 
-#### Matching navigation request URLs
+#### 탐색 요청 URL와 일치시키기
 
-While these default criteria are fine in most cases, it is sometimes desirable to configure different rules.
-For example, you might want to ignore specific routes, such as those that are not part of the Angular app, and pass them through to the server.
+이러한 기본 기준은 대부분의 경우 괜찮지만, 때때로 다양한 규칙을 구성하는 것이 바람직할 수 있습니다. 예를 들어, Angular 앱의 일부가 아닌 특정 경로를 무시하고 서버로 전달하고 싶을 수 있습니다.
 
-This field contains an array of URLs and [glob-like](#modifying-the-configuration) URL patterns that are matched at runtime.
-It can contain both negative patterns (that is, patterns starting with `!`) and non-negative patterns and URLs.
+이 필드는 런타임에서 일치되는 URL과 [glob와 유사한](#modifying-the-configuration) URL 패턴의 배열을 포함합니다.
+부정적인 패턴(즉, `!`로 시작하는 패턴)과 비부정 패턴 및 URL을 모두 포함할 수 있습니다.
 
-Only requests whose URLs match *any* of the non-negative URLs/patterns and *none* of the negative ones are considered navigation requests.
-The URL query is ignored when matching.
+비부정 URL/패턴 중에서 *어느 것*이라도 일치하고, *부정적인 것에는* 전혀 일치하지 않는 요청만 탐색 요청으로 간주됩니다.
+URL 쿼리는 일치할 때 무시됩니다.
 
-If the field is omitted, it defaults to:
+이 필드가 생략되면 기본값은 다음과 같습니다:
 
 <docs-code language="typescript">
 
 [
-  '/**',           // Include all URLs.
-  '!/**/*.*',      // Exclude URLs to files (containing a file extension in the last segment).
-  '!/**/*__*',     // Exclude URLs containing `__` in the last segment.
-  '!/**/*__*/**',  // Exclude URLs containing `__` in any other segment.
+  '/**',             // 모든 URL 포함.
+  '!/**/*.*',        // 파일(URL의 마지막 세그먼트에 파일 확장자가 있는) URL 제외.
+  '!/**/*__*',       // 마지막 세그먼트에 `__`가 포함된 URL 제외.
+  '!/**/*__*/**',     // 다른 세그먼트에 `__`가 포함된 URL 제외.
 ]
 
 </docs-code>
 
 ### `navigationRequestStrategy`
 
-This optional property enables you to configure how the service worker handles navigation requests:
+이 선택적 속성은 서비스 워커가 탐색 요청을 처리하는 방법을 구성할 수 있게 해줍니다:
 
 <docs-code language="json">
 
@@ -385,13 +383,13 @@ This optional property enables you to configure how the service worker handles n
 
 </docs-code>
 
-| Possible values | Details |
-|:---             |:---     |
-| `'performance'` | The default setting. Serves the specified [index file](#index-file), which is typically cached. |
-| `'freshness'`   | Passes the requests through to the network and falls back to the `performance` behavior when offline. This value is useful when the server redirects the navigation requests elsewhere using a `3xx` HTTP redirect status code. Reasons for using this value include: <ul> <li> Redirecting to an authentication website when authentication is not handled by the application </li> <li> Redirecting specific URLs to avoid breaking existing links/bookmarks after a website redesign </li> <li> Redirecting to a different website, such as a server-status page, while a page is temporarily down </li> </ul> |
+| 가능한 값     | 세부사항                                                                                  |
+|:---           |:---                                                                                       |
+| `'performance'` | 기본 설정입니다. 지정된 [인덱스 파일](#index-file)을 제공합니다. 일반적으로 캐시됩니다.                                   |
+| `'freshness'`   | 요청을 네트워크로 전달하고 오프라인일 때는 `performance` 동작으로 되돌아갑니다. 이 값은 서버가 3xx HTTP 리디렉션 상태 코드를 사용하여 탐색 요청을 다른 곳으로 리디렉션할 때 유용합니다. 이 값을 사용하는 이유는 다음과 같습니다: <ul> <li> 애플리케이션에서 인증을 처리하지 않거나 인증 웹사이트로 리디렉션하는 것 </li> <li> 웹사이트 디자인 변경 후 기존 링크/북마크가 깨지지 않도록 특정 URL 리디렉션하는 것 </li> <li> 페이지가 일시적으로 다운되어 있을 때 다른 웹사이트(예: 서버 상태 페이지)로 리디렉션하는 것 </li> </ul> |
 
-IMPORTANT: The `freshness` strategy usually results in more requests sent to the server, which can increase response latency. It is recommended that you use the default performance strategy whenever possible.
+중요: `freshness` 전략은 일반적으로 서버에 더 많은 요청을 전송하게 되어 응답 대기 시간이 증가할 수 있습니다. 가능한 경우 기본 성능 전략을 사용하는 것이 좋습니다.
 
 ### `applicationMaxAge`
 
-This optional property enables you to configure how long the service worker will cache any requests. Within the `maxAge`, files will be served from cache. Beyond it, all requests will only be served from the network, including asset and data requests.
+이 선택적 속성은 서비스 워커가 요청을 캐시하는 기간을 구성할 수 있게 해줍니다. `maxAge` 내에서는 파일이 캐시에서 제공됩니다. 이를 초과하면 모든 요청은 네트워크에서만 제공되며, 자산 및 데이터 요청이 포함됩니다.
\ No newline at end of file
diff --git a/adev/src/content/ecosystem/service-workers/devops.md b/adev/src/content/ecosystem/service-workers/devops.md
index 4aea23e7435a..0bb3b43e263b 100644
--- a/adev/src/content/ecosystem/service-workers/devops.md
+++ b/adev/src/content/ecosystem/service-workers/devops.md
@@ -1,315 +1,313 @@
-# Service worker devops
+# 서비스 워커 DevOps
 
-This page is a reference for deploying and supporting production applications that use the Angular service worker.
-It explains how the Angular service worker fits into the larger production environment, the service worker's behavior under various conditions, and available resources and fail-safes.
+이 페이지는 Angular 서비스 워커를 사용하는 프로덕션 애플리케이션을 배포하고 지원하기 위한 참조입니다. 
+Angular 서비스 워커가 더 큰 프로덕션 환경에 어떻게 적합하는지, 다양한 조건에서 서비스 워커의 행동, 사용 가능한 리소스 및 장애 조치 방법을 설명합니다.
 
-## Service worker and caching of application resources
+## 서비스 워커 및 애플리케이션 리소스의 캐싱
 
-Imagine the Angular service worker as a forward cache or a Content Delivery Network (CDN) edge that is installed in the end user's web browser.
-The service worker responds to requests made by the Angular application for resources or data from a local cache, without needing to wait for the network.
-Like any cache, it has rules for how content is expired and updated.
+Angular 서비스 워커를 최종 사용자의 웹 브라우저에 설치된 전방 캐시 또는 콘텐츠 전송 네트워크(CDN) 엣지로 생각해 보세요. 
+서비스 워커는 네트워크를 기다리지 않고 Angular 애플리케이션의 리소스 또는 데이터 요청에 대한 응답을 로컬 캐시에서 처리합니다.
+모든 캐시와 마찬가지로 콘텐츠가 만료되고 업데이트되는 규칙이 있습니다.
 
-### Application versions
+### 애플리케이션 버전
 
-In the context of an Angular service worker, a "version" is a collection of resources that represent a specific build of the Angular application.
-Whenever a new build of the application is deployed, the service worker treats that build as a new version of the application.
-This is true even if only a single file is updated.
-At any given time, the service worker might have multiple versions of the application in its cache and it might be serving them simultaneously.
-For more information, see the [Application tabs](#application-tabs) section.
+Angular 서비스 워커의 맥락에서 "버전"은 특정 빌드를 나타내는 리소스 집합입니다. 
+애플리케이션의 새로운 빌드가 배포될 때마다 서비스 워커는 해당 빌드를 애플리케이션의 새로운 버전으로 처리합니다. 
+이는 단일 파일이 업데이트된 경우에도 해당됩니다. 
+어떤 특정 시점에 서비스 워커는 캐시에서 여러 애플리케이션 버전을 가질 수 있으며 동시에 그것들을 제공할 수 있습니다. 
+자세한 정보는 [애플리케이션 탭](#application-tabs) 섹션을 참조하세요.
 
-To preserve application integrity, the Angular service worker groups all files into a version together.
-The files grouped into a version usually include HTML, JS, and CSS files.
-Grouping of these files is essential for integrity because HTML, JS, and CSS files frequently refer to each other and depend on specific content.
-For example, an `index.html` file might have a `<script>` tag that references `bundle.js` and it might attempt to call a function `startApp()` from within that script.
-Any time this version of `index.html` is served, the corresponding `bundle.js` must be served with it.
-For example, assume that the `startApp()` function is renamed to `runApp()` in both files.
-In this scenario, it is not valid to serve the old `index.html`, which calls `startApp()`, along with the new bundle, which defines `runApp()`.
+애플리케이션 무결성을 유지하기 위해 Angular 서비스 워커는 모든 파일을 함께 버전으로 그룹화합니다. 
+버전으로 그룹화된 파일에는 일반적으로 HTML, JS 및 CSS 파일이 포함됩니다. 
+이러한 파일을 그룹화하는 것은 HTML, JS 및 CSS 파일이 서로를 참조하고 특정 콘텐츠에 의존하기 때문입니다. 
+예를 들어 `index.html` 파일은 `bundle.js`를 참조하는 `<script>` 태그를 가질 수 있으며 해당 스크립트에서 `startApp()` 함수를 호출하려고 할 수 있습니다. 
+이 버전의 `index.html`이 제공될 때마다 해당 `bundle.js`도 함께 제공되어야 합니다. 
+예를 들어, `startApp()` 함수가 두 파일 모두에서 `runApp()`으로 이름이 변경되었다고 가정해 보겠습니다. 
+이 경우, `startApp()`을 호출하는 이전 `index.html`을 새로운 번들과 함께 제공하는 것은 유효하지 않습니다.
 
-This file integrity is especially important when lazy loading.
-A JS bundle might reference many lazy chunks, and the filenames of the lazy chunks are unique to the particular build of the application.
-If a running application at version `X` attempts to load a lazy chunk, but the server has already updated to version `X + 1`, the lazy loading operation fails.
+이 파일 무결성은 지연 로딩 시 특히 중요합니다. 
+JS 번들은 많은 지연 청크를 참조할 수 있으며, 지연 청크의 파일 이름은 애플리케이션의 특정 빌드에 고유합니다. 
+버전 `X`의 실행 중인 애플리케이션이 지연 청크를 로드하려고 하지만 서버가 이미 버전 `X + 1`로 업데이트된 경우, 지연 로딩 작업이 실패합니다.
 
-The version identifier of the application is determined by the contents of all resources, and it changes if any of them change.
-In practice, the version is determined by the contents of the `ngsw.json` file, which includes hashes for all known content.
-If any of the cached files change, the file's hash changes in `ngsw.json`. This change causes the Angular service worker to treat the active set of files as a new version.
+애플리케이션의 버전 식별자는 모든 리소스의 내용에 의해 결정되며, 그 중 어느 것이라도 변경될 경우 변경됩니다. 
+실제로 버전은 모든 알려진 내용에 대한 해시를 포함하는 `ngsw.json` 파일의 내용에 의해 결정됩니다. 
+캐시된 파일이 변경되면 해당 파일의 해시는 `ngsw.json`에서 변경됩니다. 이 변경은 Angular 서비스 워커가 활성 파일 세트를 새로운 버전으로 처리하게 만듭니다.
 
-HELPFUL: The build process creates the manifest file, `ngsw.json`, using information from `ngsw-config.json`.
+도움됨: 빌드 프로세스는 `ngsw-config.json`의 정보를 사용하여 매니페스트 파일 `ngsw.json`을 생성합니다.
 
-With the versioning behavior of the Angular service worker, an application server can ensure that the Angular application always has a consistent set of files.
+Angular 서비스 워커의 버전 관리 동작을 통해 애플리케이션 서버는 Angular 애플리케이션이 항상 일관된 파일 세트를 갖추도록 할 수 있습니다.
 
-#### Update checks
+#### 업데이트 확인
 
-Every time the user opens or refreshes the application, the Angular service worker checks for updates to the application by looking for updates to the `ngsw.json` manifest.
-If an update is found, it is downloaded and cached automatically, and is served the next time the application is loaded.
+사용자가 애플리케이션을 열거나 새로 고칠 때마다 Angular 서비스 워커는 `ngsw.json` 매니페스트의 업데이트를 확인합니다. 
+업데이트가 발견되면 자동으로 다운로드되고 캐시되며, 다음에 애플리케이션이 로드될 때 제공됩니다.
 
-### Resource integrity
+### 리소스 무결성
 
-One of the potential side effects of long caching is inadvertently caching a resource that's not valid.
-In a normal HTTP cache, a hard refresh or the cache expiring limits the negative effects of caching a file that's not valid.
-A service worker ignores such constraints and effectively long-caches the entire application.
-It's important that the service worker gets the correct content, so it keeps hashes of the resources to maintain their integrity.
+오래된 캐싱의 잠재적인 부작용 중 하나는 유효하지 않은 리소스를 무심코 캐싱하는 것입니다. 
+일반 HTTP 캐시의 경우 하드 새로 고침이나 캐시 만료가 유효하지 않은 파일 캐싱의 부정적인 영향을 제한합니다. 
+서비스 워커는 이러한 제약을 무시하고 효과적으로 전체 애플리케이션을 장기간 캐시합니다. 
+서비스 워커가 올바른 콘텐츠를 가져오는 것이 중요하므로, 리소스의 해시를 유지하여 무결성을 유지합니다.
 
-#### Hashed content
+#### 해시된 콘텐츠
 
-To ensure resource integrity, the Angular service worker validates the hashes of all resources for which it has a hash.
-For an application created with the [Angular CLI](tools/cli), this is everything in the `dist` directory covered by the user's `src/ngsw-config.json` configuration.
+리소스 무결성을 보장하기 위해 Angular 서비스 워커는 해시가 있는 모든 리소스의 해시를 검증합니다. 
+[Angular CLI](tools/cli)를 사용하여 생성된 애플리케이션의 경우 이는 사용자의 `src/ngsw-config.json` 구성에 의해 관리되는 `dist` 디렉터리의 모든 콘텐츠입니다.
 
-If a particular file fails validation, the Angular service worker attempts to re-fetch the content using a "cache-busting" URL parameter to prevent browser or intermediate caching.
-If that content also fails validation, the service worker considers the entire version of the application to not be valid and stops serving the application.
-If necessary, the service worker enters a safe mode where requests fall back on the network. The service worker doesn't use its cache if there's a high risk of serving content that is broken, outdated, or not valid.
+특정 파일이 유효성 검사에 실패하는 경우, Angular 서비스 워커는 브라우저 또는 중간 캐싱을 방지하기 위해 "캐시 무효화" URL 매개변수를 사용하여 콘텐츠를 다시 가져오려고 시도합니다. 
+해당 콘텐츠도 유효성 검사에 실패하면 서비스 워커는 애플리케이션의 전체 버전이 유효하지 않다고 간주하고 서비스를 중지합니다. 
+필요한 경우 서비스 워커는 요청이 네트워크에 돌아가도록 하는 안전 모드에 들어갑니다. 서비스 워커는 손상되거나 구식이거나 유효하지 않은 콘텐츠를 제공할 위험이 높은 경우 캐시를 사용하지 않습니다.
 
-Hash mismatches can occur for a variety of reasons:
+해시 불일치는 여러 가지 이유로 발생할 수 있습니다:
 
-* Caching layers between the origin server and the end user could serve stale content
-* A non-atomic deployment could result in the Angular service worker having visibility of partially updated content
-* Errors during the build process could result in updated resources without `ngsw.json` being updated.
-    The reverse could also happen resulting in an updated `ngsw.json` without updated resources.
+* 원본 서버와 최종 사용자 간의 캐싱 계층이 구식 콘텐츠를 제공할 수 있습니다.
+* 비원자적으로 배포하는 경우 Angular 서비스 워커가 일부 업데이트된 콘텐츠를 볼 수 있습니다.
+* 빌드 프로세스 중 오류가 발생할 경우 `ngsw.json`이 업데이트되지 않고 리소스가 업데이트될 수 있습니다. 
+    반대로 업데이트된 리소스가 없는 경우 `ngsw.json`이 업데이트될 수 있습니다.
 
-#### Unhashed content
+#### 해시가 없는 콘텐츠
 
-The only resources that have hashes in the `ngsw.json` manifest are resources that were present in the `dist` directory at the time the manifest was built.
-Other resources, especially those loaded from CDNs, have content that is unknown at build time or are updated more frequently than the application is deployed.
+`ngsw.json` 매니페스트의 해시가 있는 유일한 리소스는 매니페스트가 생성되었을 때 `dist` 디렉터리 내에 존재했던 리소스입니다. 
+CDN에서 로드되는 기타 리소스는 빌드 시간에 알 수 없는 콘텐츠가 있거나 애플리케이션이 배포될 때보다 더 자주 업데이트됩니다.
 
-If the Angular service worker does not have a hash to verify a resource is valid, it still caches its contents. At the same time, it honors the HTTP caching headers by using a policy of *stale while revalidate*.
-The Angular service worker continues to serve a resource even after its HTTP caching headers indicate
-that it is no longer valid. At the same time, it attempts to refresh the expired resource in the background.
-This way, broken unhashed resources do not remain in the cache beyond their configured lifetimes.
+Angular 서비스 워커가 리소스의 유효성을 검증할 해시가 없는 경우에도 그 콘텐츠를 캐시합니다. 동시에 HTTP 캐싱 헤더를 존중하며 *유효성 재확인 중 오래된 상태* 정책을 사용합니다. 
+Angular 서비스 워커는 HTTP 캐싱 헤더가 더 이상 유효하지 않다고 표시한 후에도 리소스를 계속 제공합니다. 동시에 만료된 리소스를 백그라운드에서 새로 고치려고 합니다. 
+이렇게 하면 손상된 해시가 없는 리소스가 설정된 수명을 초과하여 캐시에 남아 있지 않습니다.
 
-### Application tabs
+### 애플리케이션 탭
 
-It can be problematic for an application if the version of resources it's receiving changes suddenly or without warning.
-See the [Application versions](#application-versions) section for a description of such issues.
+리소스의 버전이 갑자기 또는 경고 없이 변경되는 경우 애플리케이션에 문제가 발생할 수 있습니다. 
+이와 같은 문제에 대한 설명은 [애플리케이션 버전](#application-versions) 섹션을 참조하세요.
 
-The Angular service worker provides a guarantee: a running application continues to run the same version of the application.
-If another instance of the application is opened in a new web browser tab, then the most current version of the application is served.
-As a result, that new tab can be running a different version of the application than the original tab.
+Angular 서비스 워커는 보장을 제공합니다: 실행 중인 애플리케이션은 동일한 버전의 애플리케이션을 계속 실행합니다. 
+새 웹 브라우저 탭에서 애플리케이션의 다른 인스턴스가 열릴 경우 최신 버전의 애플리케이션이 제공됩니다. 
+따라서 새 탭은 원래 탭과 다른 애플리케이션 버전을 실행할 수 있습니다.
 
-IMPORTANT: This guarantee is **stronger** than that provided by the normal web deployment model. Without a service worker, there is no guarantee that lazily loaded code is from the same version as the application's initial code.
+중요: 이 보장은 일반 웹 배포 모델에서 제공되는 것보다 **강력한** 것입니다. 서비스 워커가 없으면 지연 로드된 코드가 애플리케이션의 초기 코드와 동일한 버전에서 오는지에 대한 보장이 없습니다.
 
-The Angular service worker might change the version of a running application under error conditions such as:
+Angular 서비스 워커는 다음과 같은 오류 조건에서 실행 중인 애플리케이션의 버전을 변경할 수 있습니다:
 
-* The current version becomes non-valid due to a failed hash.
-* An unrelated error causes the service worker to enter safe mode and deactivates it temporarily.
+* 현재 버전이 해시 실패로 인해 유효하지 않아졌습니다.
+* 관련 없는 오류로 인해 서비스 워커가 안전 모드에 들어가고 일시적으로 비활성화됩니다.
 
-The Angular service worker cleans up application versions when no tab is using them.
+Angular 서비스 워커는 아무 탭도 사용하지 않을 때 애플리케이션 버전을 정리합니다.
 
-Other reasons the Angular service worker might change the version of a running application are normal events:
+실행 중인 애플리케이션의 버전을 변경하는 Angular 서비스 워커의 기타 이유는 일반적인 이벤트입니다:
 
-* The page is reloaded/refreshed.
-* The page requests an update be immediately activated using the `SwUpdate` service.
+* 페이지가 새로 고쳐지거나 새로 고쳐집니다.
+* 페이지가 `SwUpdate` 서비스를 사용하여 업데이트를 즉시 활성화하도록 요청합니다.
 
-### Service worker updates
+### 서비스 워커 업데이트
 
-The Angular service worker is a small script that runs in web browsers.
-From time to time, the service worker is updated with bug fixes and feature improvements.
+Angular 서비스 워커는 웹 브라우저에서 실행되는 작은 스크립트입니다. 
+때때로, 서비스 워커는 버그 수정 및 기능 개선으로 업데이트됩니다.
 
-The Angular service worker is downloaded when the application is first opened and when the application is accessed after a period of inactivity.
-If the service worker changes, it's updated in the background.
+Angular 서비스 워커는 처음 애플리케이션이 열릴 때와 일정 시간이 지난 후 애플리케이션 접근 시 다운로드됩니다. 
+서비스 워커가 변경될 경우, 백그라운드에서 업데이트됩니다.
 
-Most updates to the Angular service worker are transparent to the application. The old caches are still valid and content is still served normally.
-Occasionally, a bug fix or feature in the Angular service worker might require the invalidation of old caches.
-In this case, the service worker transparently refreshes the application from the network.
+Angular 서비스 워커에 대한 대부분의 업데이트는 애플리케이션에 투명합니다. 이전 캐시는 여전히 유효하며 콘텐츠는 여전히 정상적으로 제공됩니다. 
+가끔 Angular 서비스 워커의 버그 수정이나 기능이 이전 캐시를 무효화해야 할 수도 있습니다. 
+이 경우 서비스 워커는 네트워크에서 애플리케이션을 투명하게 새로 고칩니다.
 
-### Bypassing the service worker
+### 서비스 워커 우회하기
 
-In some cases, you might want to bypass the service worker entirely and let the browser handle the request.
-An example is when you rely on a feature that is currently not supported in service workers, such as [reporting progress on uploaded files](https://github.com/w3c/ServiceWorker/issues/1141).
+경우에 따라 서비스 워커를 완전히 우회하고 브라우저가 요청을 처리하도록 할 수 있습니다. 
+예를 들어, [업로드 파일의 진행 상황 보고](https://github.com/w3c/ServiceWorker/issues/1141)와 같이 현재 서비스 워커에서 지원되지 않는 기능에 의존하는 경우가 있습니다.
 
-To bypass the service worker, set `ngsw-bypass` as a request header, or as a query parameter.
-The value of the header or query parameter is ignored and can be empty or omitted.
+서비스 워커를 우회하려면 요청 헤더 또는 쿼리 매개변수로 `ngsw-bypass`를 설정하세요. 
+헤더 또는 쿼리 매개변수의 값은 무시되며 비워 두거나 생략할 수 있습니다.
 
-### Service worker requests when the server can't be reached
+### 서버에 도달할 수 없을 때의 서비스 워커 요청
 
-The service worker processes all requests unless the [service worker is explicitly bypassed](#bypassing-the-service-worker).
-The service worker either returns a cached response or sends the request to the server, depending on the state and configuration of the cache.
-The service worker only caches responses to non-mutating requests, such as `GET` and `HEAD`.
+서비스 워커는 [서비스 워커가 명시적으로 우회되지 않는 한](#bypassing-the-service-worker) 모든 요청을 처리합니다. 
+서비스 워커는 캐시의 상태와 구성에 따라 캐시된 응답을 반환하거나 서버에 요청을 보냅니다. 
+서비스 워커는 `GET` 및 `HEAD`와 같은 변경되지 않는 요청에 대해서만 응답을 캐시합니다.
 
-If the service worker receives an error from the server or it doesn't receive a response, it returns an error status that indicates the result of the call.
-For example, if the service worker doesn't receive a response, it creates a [504 Gateway Timeout](https://developer.mozilla.org/docs/Web/HTTP/Status/504) status to return. The `504` status in this example could be returned because the server is offline or the client is disconnected.
+서비스 워커가 서버로부터 오류를 받거나 응답을 받지 못하면 호출 결과를 나타내는 오류 상태를 반환합니다. 
+예를 들어, 서비스 워커가 응답을 받지 못한 경우 [504 게이트웨이 타임아웃](https://developer.mozilla.org/docs/Web/HTTP/Status/504) 상태를 생성하여 반환합니다. 이 예에서 `504` 상태는 서버가 오프라인 중이거나 클라이언트가 연결이 끊어진 경우일 수 있습니다.
 
-## Debugging the Angular service worker
+## Angular 서비스 워커 디버깅
 
-Occasionally, it might be necessary to examine the Angular service worker in a running state to investigate issues or whether it's operating as designed.
-Browsers provide built-in tools for debugging service workers and the Angular service worker itself includes useful debugging features.
+때때로 Angular 서비스 워커의 실행 상태를 검사하여 문제를 조사하거나 설계대로 작동하는지 확인해야 할 수 있습니다. 
+브라우저에는 서비스 워커를 디버깅하기 위한 기본 도구가 제공되며, Angular 서비스 워커 자체에도 유용한 디버깅 기능이 포함되어 있습니다.
 
-### Locating and analyzing debugging information
+### 디버깅 정보 찾기 및 분석하기
 
-The Angular service worker exposes debugging information under the `ngsw/` virtual directory.
-Currently, the single exposed URL is `ngsw/state`.
-Here is an example of this debug page's contents:
+Angular 서비스 워커는 `ngsw/` 가상 디렉터리 아래에 디버깅 정보를 노출합니다. 
+현재 노출된 단일 URL은 `ngsw/state`입니다. 
+다음은 이 디버그 페이지 내용의 예입니다:
 
 <docs-code hideCopy language="shell">
 
-NGSW Debug Info:
+NGSW 디버그 정보:
 
-Driver version: 13.3.7
-Driver state: NORMAL ((nominal))
-Latest manifest hash: eea7f5f464f90789b621170af5a569d6be077e5c
-Last update check: never
+드라이버 버전: 13.3.7
+드라이버 상태: 정상 ((nominal))
+최신 매니페스트 해시: eea7f5f464f90789b621170af5a569d6be077e5c
+마지막 업데이트 확인: 없음
 
-=== Version eea7f5f464f90789b621170af5a569d6be077e5c ===
+=== 버전 eea7f5f464f90789b621170af5a569d6be077e5c ===
 
-Clients: 7b79a015-69af-4d3d-9ae6-95ba90c79486, 5bc08295-aaf2-42f3-a4cc-9e4ef9100f65
+클라이언트: 7b79a015-69af-4d3d-9ae6-95ba90c79486, 5bc08295-aaf2-42f3-a4cc-9e4ef9100f65
 
-=== Idle Task Queue ===
-Last update tick: 1s496u
-Last update run: never
-Task queue:
- * init post-load (update, cleanup)
+=== 대기 작업 큐 ===
+마지막 업데이트 틱: 1s496u
+마지막 업데이트 실행: 없음
+작업 큐:
+ * 초기 포스트 로드 (업데이트, 정리)
 
-Debug log:
+디버그 로그:
 
 </docs-code>
 
-#### Driver state
+#### 드라이버 상태
 
-The first line indicates the driver state:
+첫 번째 줄은 드라이버 상태를 나타냅니다:
 
 <docs-code hideCopy language="shell">
 
-Driver state: NORMAL ((nominal))
+드라이버 상태: 정상 ((nominal))
 
 </docs-code>
 
-`NORMAL` indicates that the service worker is operating normally and is not in a degraded state.
+`정상`은 서비스 워커가 정상적으로 작동하고 있으며 저하된 상태에 있지 않음을 나타냅니다.
 
-There are two possible degraded states:
+두 가지 가능한 저하 상태가 있습니다:
 
-| Degraded states         | Details |
-|:---                     |:---     |
-| `EXISTING_CLIENTS_ONLY` | The service worker does not have a clean copy of the latest known version of the application. Older cached versions are safe to use, so existing tabs continue to run from cache, but new loads of the application will be served from the network. The service worker will try to recover from this state when a new version of the application is detected and installed. This happens when a new `ngsw.json` is available. |
-| `SAFE_MODE`             | The service worker cannot guarantee the safety of using cached data. Either an unexpected error occurred or all cached versions are invalid. All traffic will be served from the network, running as little service worker code as possible. |
+| 저하 상태                      | 세부 사항 |
+|:---                          |:---     |
+| `기존_클라이언트_전용`        | 서비스 워커가 애플리케이션의 최신 알려진 버전의 깨끗한 복사본이 없습니다. 오래된 캐시 버전은 안전하게 사용할 수 있으므로 기존 탭은 계속해서 캐시에서 실행되지만 애플리케이션의 새로운 로드는 네트워크에서 제공됩니다. 서비스 워커는 애플리케이션의 새 버전이 감지되고 설치될 때 이 상태에서 복구하려고 시도합니다. 이는 새로운 `ngsw.json`이 사용 가능할 때 발생합니다. |
+| `안전 모드`                    | 서비스 워커가 캐시 데이터를 사용하고 안전하다는 보장을 제공할 수 없습니다. 예기치 않은 오류가 발생했거나 모든 캐시된 버전이 유효하지 않습니다. 모든 트래픽은 네트워크에서 제공되며 가능한 한 적은 서비스 워커 코드가 실행됩니다. |
 
-In both cases, the parenthetical annotation provides the
-error that caused the service worker to enter the degraded state.
+두 경우 모두 괄호 주석은 서비스 워커가 저하된 상태로 들어가게 한 오류를 제공합니다.
 
-Both states are temporary; they are saved only for the lifetime of the [ServiceWorker instance](https://developer.mozilla.org/docs/Web/API/ServiceWorkerGlobalScope).
-The browser sometimes terminates an idle service worker to conserve memory and processor power, and creates a new service worker instance in response to network events.
-The new instance starts in the `NORMAL` mode, regardless of the state of the previous instance.
+두 상태는 일시적이며, [ServiceWorker 인스턴스](https://developer.mozilla.org/docs/Web/API/ServiceWorkerGlobalScope)의 생애주기 동안만 저장됩니다. 
+브라우저는 때때로 메모리와 프로세서 전력을 절약하기 위해 유휴 서비스 워커를 종료하고 네트워크 이벤트에 응답하여 새 서비스 워커 인스턴스를 만듭니다. 
+새 인스턴스는 이전 인스턴스의 상태에 관계없이 `정상` 모드에서 시작합니다.
 
-#### Latest manifest hash
+#### 최신 매니페스트 해시
 
 <docs-code hideCopy language="shell">
 
-Latest manifest hash: eea7f5f464f90789b621170af5a569d6be077e5c
+최신 매니페스트 해시: eea7f5f464f90789b621170af5a569d6be077e5c
 
 </docs-code>
 
-This is the SHA1 hash of the most up-to-date version of the application that the service worker knows about.
+이는 서비스 워커가 아는 애플리케이션의 가장 최신 버전의 SHA1 해시입니다.
 
-#### Last update check
+#### 마지막 업데이트 확인
 
 <docs-code hideCopy language="shell">
 
-Last update check: never
+마지막 업데이트 확인: 없음
 
 </docs-code>
 
-This indicates the last time the service worker checked for a new version, or update, of the application.
-`never` indicates that the service worker has never checked for an update.
+이는 서비스 워커가 애플리케이션의 새 버전 또는 업데이트를 확인한 마지막 시간입니다. 
+`없음`은 서비스 워커가 업데이트를 확인한 적이 없음을 나타냅니다. 
 
-In this example debug file, the update check is currently scheduled, as explained the next section.
+이 예제 디버그 파일에서 업데이트 확인이 현재 예약되어 있음을 다음 섹션에서 설명합니다.
 
-#### Version
+#### 버전
 
 <docs-code hideCopy language="shell">
 
-=== Version eea7f5f464f90789b621170af5a569d6be077e5c ===
+=== 버전 eea7f5f464f90789b621170af5a569d6be077e5c ===
 
-Clients: 7b79a015-69af-4d3d-9ae6-95ba90c79486, 5bc08295-aaf2-42f3-a4cc-9e4ef9100f65
+클라이언트: 7b79a015-69af-4d3d-9ae6-95ba90c79486, 5bc08295-aaf2-42f3-a4cc-9e4ef9100f65
 
 </docs-code>
 
-In this example, the service worker has one version of the application cached and being used to serve two different tabs.
+이 예제에서 서비스 워커는 하나의 애플리케이션 버전을 캐시하여 두 개의 서로 다른 탭에 제공하고 있습니다.
 
-HELPFUL: This version hash is the "latest manifest hash" listed above. Both clients are on the latest version. Each client is listed by its ID from the `Clients` API in the browser.
+도움됨: 이 버전 해시는 위에서 설명한 "최신 매니페스트 해시"입니다. 두 클라이언트 모두 최신 버전입니다. 각 클라이언트는 브라우저의 `Clients` API로부터 나온 ID로 나열됩니다.
 
-#### Idle task queue
+#### 대기 작업 큐
 
 <docs-code hideCopy language="shell">
 
-=== Idle Task Queue ===
-Last update tick: 1s496u
-Last update run: never
-Task queue:
- * init post-load (update, cleanup)
+=== 대기 작업 큐 ===
+마지막 업데이트 틱: 1s496u
+마지막 업데이트 실행: 없음
+작업 큐:
+ * 초기 포스트 로드 (업데이트, 정리)
 
 </docs-code>
 
-The Idle Task Queue is the queue of all pending tasks that happen in the background in the service worker.
-If there are any tasks in the queue, they are listed with a description.
-In this example, the service worker has one such task scheduled, a post-initialization operation involving an update check and cleanup of stale caches.
+대기 작업 큐는 서비스 워커에서 백그라운드에서 발생하는 모든 대기 작업의 큐입니다. 
+큐에 작업이 있는 경우 설명과 함께 나열됩니다. 
+이 예제에서 서비스 워커에는 업데이트 확인 및 오래된 캐시 정리를 포함한 초기화 작업이 예정되어 있습니다.
 
-The last update tick/run counters give the time since specific events happened related to the idle queue.
-The "Last update run" counter shows the last time idle tasks were actually executed.
-"Last update tick" shows the time since the last event after which the queue might be processed.
+마지막 업데이트 틱/실행 카운터는 대기 큐와 관련된 특정 이벤트가 발생한 이후의 시간을 나타냅니다. 
+"마지막 업데이트 실행" 카운터는 유휴 작업이 실제로 실행된 마지막 시간을 보여줍니다. 
+"마지막 업데이트 틱"은 큐가 처리될 수 있는 마지막 이벤트 이후의 시간을 보여줍니다.
 
-#### Debug log
+#### 디버그 로그
 
 <docs-code hideCopy language="shell">
 
-Debug log:
+디버그 로그:
 
 </docs-code>
 
-Errors that occur within the service worker are logged here.
+서비스 워커 내에서 발생하는 오류는 여기에 기록됩니다.
 
-### Developer tools
+### 개발자 도구
 
-Browsers such as Chrome provide developer tools for interacting with service workers.
-Such tools can be powerful when used properly, but there are a few things to keep in mind.
+Chrome과 같은 브라우저는 서비스 워커와 상호작용하기 위한 개발자 도구를 제공합니다. 
+이러한 도구는 올바르게 사용될 때 강력할 수 있지만 몇 가지 사항을 염두에 두어야 합니다.
 
-* When using developer tools, the service worker is kept running in the background and never restarts.
-    This can cause behavior with Dev Tools open to differ from behavior a user might experience.
+* 개발자 도구를 사용할 때 서비스 워커는 백그라운드에서 실행되며 절대 재시작되지 않습니다. 
+    이것은 개발자 도구가 열려 있을 때의 동작이 사용자가 경험할 수 있는 동작과 다를 수 있습니다.
 
-* If you look in the Cache Storage viewer, the cache is frequently out of date.
-    Right-click the Cache Storage title and refresh the caches.
+* 캐시 저장소 뷰어를 보면 캐시가 자주 오래된 상태입니다. 
+    캐시 저장소 제목을 마우스 오른쪽 버튼으로 클릭하고 캐시를 새로 고쳐보세요.
 
-* Stopping and starting the service worker in the Service Worker pane checks for updates
+* 서비스 워커 창에서 서비스 워커를 중지하고 시작하면 업데이트를 확인합니다.
 
-## Service worker safety
+## 서비스 워커 안전성
 
-Bugs or broken configurations could cause the Angular service worker to act in unexpected ways.
-If this happens, the Angular service worker contains several failsafe mechanisms in case an administrator needs to deactivate the service worker quickly.
+버그나 잘못된 구성으로 인해 Angular 서비스 워커가 예상치 못한 방식으로 작동할 수 있습니다. 
+이러한 상황이 발생하면, Angular 서비스 워커는 관리자가 서비스를 신속하게 비활성화해야 할 경우를 대비하여 여러 가지 장애 조치 메커니즘을 포함합니다.
 
-### Fail-safe
+### 장애 조치
 
-To deactivate the service worker, rename the `ngsw.json` file or delete it.
-When the service worker's request for `ngsw.json` returns a `404`, then the service worker removes all its caches and de-registers itself, essentially self-destructing.
+서비스 워커를 비활성화하려면 `ngsw.json` 파일의 이름을 바꾸거나 삭제하십시오. 
+서비스 워커가 `ngsw.json`에 대한 요청을 수행한 결과 `404`가 반환되면 서비스 워커는 모든 캐시를 제거하고 스스로 등록을 취소하여 사실상 자멸하게 됩니다.
 
-### Safety worker
+### 안전 워커
 
 <!-- vale Angular.Google_Acronyms = NO -->
 
-A small script, `safety-worker.js`, is also included in the `@angular/service-worker` NPM package.
-When loaded, it un-registers itself from the browser and removes the service worker caches.
-This script can be used as a last resort to get rid of unwanted service workers already installed on client pages.
+작은 스크립트 `safety-worker.js`가 `@angular/service-worker` NPM 패키지에도 포함되어 있습니다. 
+로드될 때 브라우저에서 스스로 등록을 취소하고 서비스 워커 캐시를 제거합니다. 
+이 스크립트는 클라이언트 페이지에 이미 설치된 원치 않는 서비스 워커를 제거하는 마지막 수단으로 사용할 수 있습니다.
 
 <!-- vale Angular.Google_Acronyms = YES -->
 
-CRITICAL: You cannot register this worker directly, as old clients with cached state might not see a new `index.html` which installs the different worker script.
+중요: 이 워커를 직접 등록할 수 없습니다. 캐시된 상태의 이전 클라이언트가 다른 워커 스크립트를 설치하는 새로운 `index.html`을 보지 못할 수 있습니다.
 
-Instead, you must serve the contents of `safety-worker.js` at the URL of the Service Worker script you are trying to unregister. You must continue to do so until you are certain all users have successfully unregistered the old worker.
-For most sites, this means that you should serve the safety worker at the old Service Worker URL forever.
-This script can be used to deactivate `@angular/service-worker` and remove the corresponding caches. It also removes any other Service Workers which might have been served in the past on your site.
+대신, 등록 해제하려는 서비스 워커 스크립트의 URL에서 `safety-worker.js`의 내용을 제공해야 합니다. 모든 사용자가 이전 워커를 성공적으로 등록 해제할 때까지 계속 그렇게 해야 합니다.
+대부분의 사이트에서는 안전 워커를 이전 서비스 워커 URL에서 영원히 제공해야 합니다. 
+이 스크립트는 `@angular/service-worker`를 비활성화하고 해당 캐시를 제거하는 데 사용할 수 있습니다. 또한 과거에 사이트에서 제공된 다른 서비스 워커도 제거합니다.
 
-### Changing your application's location
+### 애플리케이션의 위치 변경
 
-IMPORTANT: Service workers don't work behind redirect.
-You might have already encountered the error `The script resource is behind a redirect, which is disallowed`.
+중요: 서비스 워커는 리디렉션 뒤에서 작동하지 않습니다. 
+`스크립트 리소스가 리디렉션 뒤에 있어 허용되지 않습니다`라는 오류를 이미 encountered할 수 있습니다.
 
-This can be a problem if you have to change your application's location.
-If you set up a redirect from the old location, such as `example.com`, to the new location, `www.example.com` in this example, the worker stops working.
-Also, the redirect won't even trigger for users who are loading the site entirely from Service Worker.
-The old worker, which was registered at `example.com`, tries to update and sends a request to the old location `example.com`. This request is redirected to the new location `www.example.com` and creates the error: `The script resource is behind a redirect, which is disallowed`.
+애플리케이션의 위치 변경이 필요한 경우 문제가 발생할 수 있습니다. 
+`example.com`과 같은 이전 위치에서 새로운 위치인 `www.example.com`으로 리디렉션이 설정된 경우, 워커는 작동을 멈춥니다. 
+또한, 사용자가 서비스 워커에서 전체 애플리케이션을 로드할 경우 리디렉션이 트리거되지 않습니다. 
+이전 `example.com`에 등록된 이전 워커는 업데이트를 시도하고 이전 위치인 `example.com`으로 요청을 전송합니다. 이 요청은 새로운 위치인 `www.example.com`으로 리디렉션되어 `스크립트 리소스가 리디렉션 뒤에 있어 허용되지 않습니다` 오류를 생성합니다.
 
-To remedy this, you might need to deactivate the old worker using one of the preceding techniques: [Fail-safe](#fail-safe) or [Safety Worker](#safety-worker).
+이를 해결하기 위해 [장애 조치](#fail-safe) 또는 [안전 워커](#safety-worker) 중 하나를 사용하여 이전 워커를 비활성화해야 할 수도 있습니다.
 
-## More on Angular service workers
+## Angular 서비스 워커에 대한 추가 정보
 
-You might also be interested in the following:
+다음에도 관심이 있을 수 있습니다:
 
 <docs-pill-row>
-  <docs-pill href="ecosystem/service-workers/config" title="Configuration file"/>
-  <docs-pill href="ecosystem/service-workers/communications" title="Communicating with the Service Worker"/>
-</docs-pill-row>
+  <docs-pill href="ecosystem/service-workers/config" title="구성 파일"/>
+  <docs-pill href="ecosystem/service-workers/communications" title="서비스 워커와의 통신"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/ecosystem/service-workers/getting-started.md b/adev/src/content/ecosystem/service-workers/getting-started.md
index ec89a81aae2e..4431f1fb4d09 100644
--- a/adev/src/content/ecosystem/service-workers/getting-started.md
+++ b/adev/src/content/ecosystem/service-workers/getting-started.md
@@ -1,10 +1,10 @@
-# Getting started with service workers
+# 서비스 워커 시작하기
 
-This document explains how to enable Angular service worker support in projects that you created with the [Angular CLI](tools/cli). It then uses an example to show you a service worker in action, demonstrating loading and basic caching.
+이 문서는 [Angular CLI](tools/cli)로 생성한 프로젝트에서 Angular 서비스 워커 지원을 활성화하는 방법을 설명합니다. 그런 다음 예제를 사용하여 작동 중인 서비스 워커를 보여주며, 로딩 및 기본 캐싱을 시연합니다.
 
-## Adding a service worker to your project
+## 프로젝트에 서비스 워커 추가하기
 
-To set up the Angular service worker in your project, run the following CLI command:
+프로젝트에서 Angular 서비스 워커를 설정하려면 다음 CLI 명령을 실행하세요:
 
 <docs-code language="shell">
 
@@ -12,19 +12,18 @@ ng add @angular/pwa
 
 </docs-code>
 
-The CLI configures your application to use service workers with the following actions:
+CLI는 다음의 작업을 수행하여 애플리케이션을 서비스 워커를 사용하도록 구성합니다:
 
-1. Adds the `@angular/service-worker` package to your project.
-1. Enables service worker build support in the CLI.
-1. Imports and registers the service worker with the application's root providers.
-1. Updates the `index.html` file:
-    * Includes a link to add the `manifest.webmanifest` file
-    * Adds a meta tag for `theme-color`
-1. Installs icon files to support the installed Progressive Web App (PWA).
-1. Creates the service worker configuration file called [`ngsw-config.json`](ecosystem/service-workers/config),
-which specifies the caching behaviors and other settings.
+1. `@angular/service-worker` 패키지를 프로젝트에 추가합니다.
+1. CLI에서 서비스 워커 빌드 지원을 활성화합니다.
+1. 애플리케이션의 루트 제공자에 서비스 워커를 가져오고 등록합니다.
+1. `index.html` 파일을 업데이트합니다:
+    * `manifest.webmanifest` 파일을 추가하는 링크 포함
+    * `theme-color`에 대한 메타 태그 추가
+1. 설치된 진행형 웹 애플리케이션(PWA)을 지원하기 위해 아이콘 파일을 설치합니다.
+1. 캐싱 동작 및 기타 설정을 지정하는 [`ngsw-config.json`](ecosystem/service-workers/config)라는 서비스 워커 구성 파일을 생성합니다.
 
-Now, build the project:
+이제 프로젝트를 빌드합니다:
 
 <docs-code language="shell">
 
@@ -32,12 +31,11 @@ ng build
 
 </docs-code>
 
-The CLI project is now set up to use the Angular service worker.
+이제 CLI 프로젝트가 Angular 서비스 워커를 사용할 준비가 되었습니다.
 
-## Service worker in action: a tour
+## 서비스 워커 작동 중: 투어
 
-This section demonstrates a service worker in action,
-using an example application. To enable service worker support during local development, use the production configuration with the following command:
+이 섹션은 예제 애플리케이션을 사용하여 서비스 워커가 작동하는 모습을 시연합니다. 로컬 개발 중에 서비스 워커 지원을 활성화하려면 다음 명령으로 프로덕션 구성을 사용하세요:
 
 <docs-code language="shell">
 
@@ -45,8 +43,7 @@ ng serve --prod
 
 </docs-code>
 
-Alternatively, you can use the [`http-server package`](https://www.npmjs.com/package/http-server) from
-npm, which supports service worker applications. Run it without installation using:
+또는 npm에서 서비스 워커 애플리케이션을 지원하는 [`http-server 패키지`](https://www.npmjs.com/package/http-server)를 사용할 수 있습니다. 다음과 같이 설치 없이 실행합니다:
 
 <docs-code language="shell">
 
@@ -54,75 +51,69 @@ npx http-server -p 8080 -c-1 dist/&lt;project-name&gt;/browser
 
 </docs-code>
 
-This will serve your application with service worker support at http://localhost:8080.
+이 명령은 http://localhost:8080에서 서비스 워커 지원이 있는 애플리케이션을 제공합니다.
 
-### Initial load
+### 초기 로드
 
-With the server running on port `8080`, point your browser at `http://localhost:8080`.
-Your application should load normally.
+서버가 포트 `8080`에서 실행되고 있으므로 브라우저에서 `http://localhost:8080`을 입력합니다. 애플리케이션은 정상적으로 로드되어야 합니다.
 
-Tip: When testing Angular service workers, it's a good idea to use an incognito or private window in your browser to ensure the service worker doesn't end up reading from a previous leftover state, which can cause unexpected behavior.
+팁: Angular 서비스 워커를 테스트할 때 서비스 워커가 이전의 남은 상태를 읽지 않도록 브라우저에서 인코그니토 또는 개인 창을 사용하는 것이 좋습니다. 이전 상태를 읽으면 예기치 않은 동작이 발생할 수 있습니다.
 
-HELPFUL: If you are not using HTTPS, the service worker will only be registered when accessing the application on `localhost`.
+도움말: HTTPS를 사용하지 않으면 서비스 워커는 `localhost`에서 애플리케이션에 접근할 때만 등록됩니다.
 
-### Simulating a network issue
+### 네트워크 문제 시뮬레이션
 
-To simulate a network issue, disable network interaction for your application.
+네트워크 문제를 시뮬레이션하려면 애플리케이션의 네트워크 상호작용을 비활성화합니다.
 
-In Chrome:
+Chrome에서:
 
-1. Select **Tools** > **Developer Tools** (from the Chrome menu located in the top right corner).
-1. Go to the **Network tab**.
-1. Select **Offline** in the **Throttling** dropdown menu.
+1. **도구** > **개발자 도구**를 선택합니다 (우측 상단에 있는 Chrome 메뉴에서).
+1. **네트워크 탭**으로 이동합니다.
+1. **Throttle** 드롭다운 메뉴에서 **Offline**을 선택합니다.
 
-<img alt="The offline option in the Network tab is selected" src="assets/images/guide/service-worker/offline-option.png">
+<img alt="네트워크 탭에서 오프라인 옵션이 선택되었습니다" src="assets/images/guide/service-worker/offline-option.png">
 
-Now the application has no access to network interaction.
+이제 애플리케이션은 네트워크 상호작용에 접근할 수 없습니다.
 
-For applications that do not use the Angular service worker, refreshing now would display Chrome's Internet disconnected page that says "There is no Internet connection".
+Angular 서비스 워커를 사용하지 않는 애플리케이션에서는 지금 새로 고침하면 "인터넷 연결이 없습니다"라는 Chrome의 인터넷 연결 끊김 페이지가 표시됩니다.
 
-With the addition of an Angular service worker, the application behavior changes.
-On a refresh, the page loads normally.
+Angular 서비스 워커가 추가되면 애플리케이션의 동작이 변경됩니다. 새로 고침하면 페이지가 정상적으로 로드됩니다.
 
-Look at the Network tab to verify that the service worker is active.
+네트워크 탭을 확인하여 서비스 워커가 활성화되어 있는지 확인하세요.
 
-<img alt="Requests are marked as from ServiceWorker" src="assets/images/guide/service-worker/sw-active.png">
+<img alt="요청이 ServiceWorker로 표시됨" src="assets/images/guide/service-worker/sw-active.png">
 
-HELPFUL: Under the "Size" column, the requests state is `(ServiceWorker)`.
-This means that the resources are not being loaded from the network.
-Instead, they are being loaded from the service worker's cache.
+도움말: "크기" 열 아래에서 요청 상태가 `(ServiceWorker)`로 표시됩니다. 이는 리소스가 네트워크에서 로드되지 않고 서비스 워커의 캐시에서 로드되고 있음을 의미합니다.
 
-### What's being cached?
+### 무엇이 캐시되고 있나요?
 
-Notice that all of the files the browser needs to render this application are cached.
-The `ngsw-config.json` boilerplate configuration is set up to cache the specific resources used by the CLI:
+브라우저에서 이 애플리케이션을 렌더링하는 데 필요한 모든 파일이 캐시되고 있음을 주목하세요. `ngsw-config.json` 보일러플레이트 구성은 CLI에서 사용하는 특정 리소스를 캐시하도록 설정되어 있습니다:
 
 * `index.html`
 * `favicon.ico`
-* Build artifacts (JS and CSS bundles)
-* Anything under `assets`
-* Images and fonts directly under the configured `outputPath` (by default `./dist/<project-name>/`) or `resourcesOutputPath`.
-    See the documentation for `ng build` for more information about these options.
+* 빌드 결과물 (JS 및 CSS 번들)
+* `assets` 아래의 모든 항목
+* 구성된 `outputPath` (기본값 `./dist/<project-name>/`) 또는 `resourcesOutputPath` 아래의 이미지 및 폰트.
+    이러한 옵션에 대한 자세한 내용은 `ng build` 문서를 참조하세요.
 
-IMPORTANT: The generated `ngsw-config.json` includes a limited list of cacheable fonts and images extensions. In some cases, you might want to modify the glob pattern to suit your needs.
+중요: 생성된 `ngsw-config.json`에는 캐시 가능한 폰트 및 이미지 확장자의 제한된 목록이 포함되어 있습니다. 경우에 따라 glob 패턴을 수정하여 필요에 맞출 수 있습니다.
 
-IMPORTANT: If `resourcesOutputPath` or `assets` paths are modified after the generation of configuration file, you need to change the paths manually in `ngsw-config.json`.
+중요: 구성 파일이 생성된 후 `resourcesOutputPath` 또는 `assets` 경로가 수정되면 `ngsw-config.json`에서 경로를 수동으로 변경해야 합니다.
 
-### Making changes to your application
+### 애플리케이션 변경 사항
 
-Now that you've seen how service workers cache your application, the next step is understanding how updates work.
-Make a change to the application, and watch the service worker install the update:
+서비스 워커가 애플리케이션을 캐시하는 방법을 확인했으므로, 다음 단계는 업데이트 작동 방식을 이해하는 것입니다. 애플리케이션을 변경하고 서비스 워커가 업데이트를 설치하는 모습을 지켜보세요:
 
-1. If you're testing in an incognito window, open a second blank tab.
-    This keeps the incognito and the cache state alive during your test.
+1. 인코그니토 창에서 테스트 중이라면 빈 탭을 하나 더 엽니다.
+    이렇게 하면 테스트 중 인코그니토 및 캐시 상태가 유지됩니다.
 
-1. Close the application tab, but not the window.
-    This should also close the Developer Tools.
+1. 애플리케이션 탭을 닫지만 창은 닫지 않습니다.
+    이 작업은 개발자 도구도 닫을 것입니다.
 
-1. Shut down `http-server` (Ctrl-c).
-1. Open `src/app/app.component.html` for editing.
-1. Change the text `Welcome to {{title}}!` to `Bienvenue à {{title}}!`.
-1. Build and run the server again:
+1. `http-server`를 종료합니다 (Ctrl-c).
+1. `src/app/app.component.html`을 편집을 위해 엽니다.
+1. 텍스트 `Welcome to {{title}}!`를 `Bienvenue à {{title}}!`로 변경합니다.
+1. 서버를 다시 빌드하고 실행합니다:
 
     <docs-code language="shell">
 
@@ -131,42 +122,42 @@ Make a change to the application, and watch the service worker install the updat
 
     </docs-code>
 
-### Updating your application in the browser
+### 브라우저에서 애플리케이션 업데이트하기
 
-Now look at how the browser and service worker handle the updated application.
+이제 브라우저와 서비스 워커가 업데이트된 애플리케이션을 처리하는 방법을 살펴보세요.
 
-1. Open [http://localhost:8080](http://localhost:8080) again in the same window.
-    What happens?
+1. 같은 창에서 [http://localhost:8080](http://localhost:8080)을 다시 엽니다.
+    무슨 일이 일어나나요?
 
-    <img alt="It still says Welcome to Service Workers!" src="assets/images/guide/service-worker/welcome-msg-en.png">
+    <img alt="여전히 Welcome to Service Workers!라고 표시됩니다" src="assets/images/guide/service-worker/welcome-msg-en.png">
 
-    What went wrong?
-    _Nothing, actually!_
-    The Angular service worker is doing its job and serving the version of the application that it has **installed**, even though there is an update available.
-    In the interest of speed, the service worker doesn't wait to check for updates before it serves the application that it has cached.
+    무슨 일이 잘못되었나요?
+    _사실 아무 일도 일어나지 않았습니다!_
+    Angular 서비스 워커는 자신의 **설치된** 애플리케이션 버전을 제공하고 있으며, 업데이트가 가능하더라도 말입니다.
+    속도를 위해 서비스 워커는 애플리케이션이 캐시된 내용을 제공하기 전에 업데이트를 확인하지 않습니다.
 
-    Look at the `http-server` logs to see the service worker requesting `/ngsw.json`.
+    서비스 워커가 `/ngsw.json`을 요청하는 것을 보려면 `http-server` 로그를 확인하세요.
 
     <docs-code language="shell">
     [2023-09-07T00:37:24.372Z]  "GET /ngsw.json?ngsw-cache-bust=0.9365263935102124" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
     </docs-code>
 
-    This is how the service worker checks for updates.
+    이것이 서비스 워커가 업데이트를 확인하는 방법입니다.
 
-1. Refresh the page.
+1. 페이지를 새로 고칩니다.
 
-    <img alt="The text has changed to say Bienvenue à app!" src="assets/images/guide/service-worker/welcome-msg-fr.png">
+    <img alt="텍스트가 Bienvenue à app!으로 변경되었습니다" src="assets/images/guide/service-worker/welcome-msg-fr.png">
 
-    The service worker installed the updated version of your application _in the background_, and the next time the page is loaded or reloaded, the service worker switches to the latest version.
+    서비스 워커가 _백그라운드에서_ 업데이트된 애플리케이션 버전을 설치했으며, 다음 번 페이지가 로드되거나 새로 고침될 때 서비스 워커가 최신 버전으로 전환됩니다.
 
-## More on Angular service workers
+## Angular 서비스 워커에 대한 추가 정보
 
-You might also be interested in the following:
+다음 사항에도 관심이 있을 수 있습니다:
 
 <docs-pill-row>
-  <docs-pill href="ecosystem/service-workers/config" title="Configuration file"/>
-  <docs-pill href="ecosystem/service-workers/communications" title="Communicating with the Service Worker"/>
-  <docs-pill href="ecosystem/service-workers/push-notifications" title="Push notifications"/>
-  <docs-pill href="ecosystem/service-workers/devops" title="Service Worker devops"/>
-  <docs-pill href="ecosystem/service-workers/app-shell" title="App shell pattern"/>
-</docs-pill-row>
+  <docs-pill href="ecosystem/service-workers/config" title="구성 파일"/>
+  <docs-pill href="ecosystem/service-workers/communications" title="서비스 워커와의 통신"/>
+  <docs-pill href="ecosystem/service-workers/push-notifications" title="푸시 알림"/>
+  <docs-pill href="ecosystem/service-workers/devops" title="서비스 워커 DevOps"/>
+  <docs-pill href="ecosystem/service-workers/app-shell" title="앱 쉘 패턴"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/ecosystem/service-workers/overview.md b/adev/src/content/ecosystem/service-workers/overview.md
index 3ce87dfbaa96..e56eebbeb415 100644
--- a/adev/src/content/ecosystem/service-workers/overview.md
+++ b/adev/src/content/ecosystem/service-workers/overview.md
@@ -1,108 +1,107 @@
-# Angular service worker overview
+# Angular 서비스 워커 개요
 
-Service workers augment the traditional web deployment model and empower applications to deliver a user experience with the reliability and performance on par with code that is written to run on your operating system and hardware.
-Adding a service worker to an Angular application is one of the steps for turning an application into a [Progressive Web App](https://web.dev/progressive-web-apps/) (also known as a PWA).
+서비스 워커는 전통적인 웹 배포 모델을 보강하고 애플리케이션이 운영 체제 및 하드웨어에서 실행되도록 작성된 코드와 동등한 신뢰성과 성능으로 사용자 경험을 제공할 수 있도록 합니다. Angular 애플리케이션에 서비스 워커를 추가하는 것은 애플리케이션을 [진보적인 웹 애플리케이션](https://web.dev/progressive-web-apps/) (PWA로 알려짐)으로 전환하는 단계 중 하나입니다.
 
-At its simplest, a service worker is a script that runs in the web browser and manages caching for an application.
+가장 간단하게 말하면, 서비스 워커는 웹 브라우저에서 실행되고 애플리케이션의 캐싱을 관리하는 스크립트입니다.
 
-Service workers function as a network proxy.
-They intercept all outgoing HTTP requests made by the application and can choose how to respond to them.
-For example, they can query a local cache and deliver a cached response if one is available.
-Proxying isn't limited to requests made through programmatic APIs, such as `fetch`; it also includes resources referenced in HTML and even the initial request to `index.html`.
-Service worker-based caching is thus completely programmable and doesn't rely on server-specified caching headers.
+서비스 워커는 네트워크 프록시로 기능합니다. 
+애플리케이션이 만든 모든 아웃고잉 HTTP 요청을 가로채고 응답하는 방법을 선택할 수 있습니다. 
+예를 들어, 로컬 캐시를 쿼리하고 사용 가능한 경우 캐시된 응답을 제공할 수 있습니다. 
+프록싱은 `fetch`와 같은 프로그래밍 API를 통해 이루어진 요청에 한정되지 않으며, HTML에서 참조된 리소스와 `index.html`에 대한 초기 요청도 포함됩니다. 
+따라서 서비스 워커 기반 캐싱은 완전히 프로그래밍 가능하며 서버가 지정한 캐싱 헤더에 의존하지 않습니다.
 
-Unlike the other scripts that make up an application, such as the Angular application bundle, the service worker is preserved after the user closes the tab.
-The next time that browser loads the application, the service worker loads first, and can intercept every request for resources to load the application.
-If the service worker is designed to do so, it can *completely satisfy the loading of the application, without the need for the network*.
+애플리케이션을 구성하는 다른 스크립트와 달리, Angular 애플리케이션 번들의 경우 서비스 워커는 사용자가 탭을 닫은 후에도 유지됩니다. 
+브라우저가 애플리케이션을 다음에 로드할 때, 서비스 워커가 먼저 로드되고 애플리케이션을 로드하기 위해 리소스 요청을 가로챌 수 있습니다. 
+서비스 워커가 그렇게 설계되었다면, **네트워크 없이 애플리케이션의 로딩을 완전히 만족시킬 수 있습니다**.
 
-Even across a fast reliable network, round-trip delays can introduce significant latency when loading the application.
-Using a service worker to reduce dependency on the network can significantly improve the user experience.
+빠르고 안정적인 네트워크에서도 왕복 지연이 애플리케이션을 로드할 때 상당한 지연을 초래할 수 있습니다. 
+서비스 워커를 사용하여 네트워크 의존성을 줄이면 사용자 경험을 크게 향상시킬 수 있습니다.
 
-## Service workers in Angular
+## Angular의 서비스 워커
 
-Angular applications, as single-page applications, are in a prime position to benefit from the advantages of service workers. Angular ships with a service worker implementation. Angular developers can take advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs.
+Angular 애플리케이션은 단일 페이지 애플리케이션으로, 서비스 워커의 이점을 누리기 위한 최적의 위치에 있습니다. Angular는 서비스 워커 구현을 함께 제공하며, Angular 개발자는 이러한 서비스 워커를 활용하여 낮은 수준의 API에 대한 코딩 없이도 제공하는 신뢰성과 성능의 이점을 누릴 수 있습니다.
 
-Angular's service worker is designed to optimize the end user experience of using an application over a slow or unreliable network connection, while also minimizing the risks of serving outdated content.
+Angular의 서비스 워커는 느리거나 신뢰할 수 없는 네트워크 연결에서 애플리케이션을 사용할 때 최종 사용자 경험을 최적화하도록 설계되었으며, 구식 콘텐츠 제공의 위험을 최소화합니다.
 
-To achieve this, the Angular service worker follows these guidelines:
+이를 달성하기 위해 Angular 서비스 워커는 다음 지침을 따릅니다:
 
-* Caching an application is like installing a native application.
-    The application is cached as one unit, and all files update together.
+* 애플리케이션을 캐싱하는 것은 네이티브 애플리케이션을 설치하는 것과 같습니다.
+    애플리케이션은 하나의 단위로 캐시되며 모든 파일이 함께 업데이트됩니다.
 
-* A running application continues to run with the same version of all files.
-    It does not suddenly start receiving cached files from a newer version, which are likely incompatible.
+* 실행 중인 애플리케이션은 모든 파일의 동일한 버전으로 계속 실행됩니다.
+    사용자는 호환되지 않을 가능성이 있는 최신 버전의 캐시된 파일을 갑자기 받지 않습니다.
 
-* When users refresh the application, they see the latest fully cached version.
-    New tabs load the latest cached code.
+* 사용자가 애플리케이션을 새로 고치면 최신 전체 캐시된 버전을 볼 수 있습니다.
+    새 탭에서는 최신 캐시된 코드가 로드됩니다.
 
-* Updates happen in the background, relatively quickly after changes are published.
-    The previous version of the application is served until an update is installed and ready.
+* 업데이트는 변경 사항이 게시된 후 상대적으로 빠르게 백그라운드에서 발생합니다.
+    업데이트가 설치되고 준비될 때까지 이전 버전의 애플리케이션이 제공됩니다.
 
-* The service worker conserves bandwidth when possible.
-    Resources are only downloaded if they've changed.
+* 서비스 워커는 가능한 경우 대역폭을 절약합니다.
+    리소스가 변경된 경우에만 다운로드됩니다.
 
-To support these behaviors, the Angular service worker loads a *manifest* file from the server.
-The file, called `ngsw.json` (not to be confused with the [web app manifest](https://developer.mozilla.org/docs/Web/Manifest)), describes the resources to cache and includes hashes of every file's contents.
-When an update to the application is deployed, the contents of the manifest change, informing the service worker that a new version of the application should be downloaded and cached.
-This manifest is generated from a CLI-generated configuration file called `ngsw-config.json`.
+이러한 동작을 지원하기 위해 Angular 서비스 워커는 서버에서 *매니페스트* 파일을 로드합니다. 
+`ngsw.json`이라고 불리는 이 파일은 캐시할 리소스를 설명하며 각 파일 내용의 해시를 포함합니다. 
+애플리케이션에 대한 업데이트가 배포되면 매니페스트의 내용이 변경되어 서비스 워커에 새 버전의 애플리케이션을 다운로드하고 캐시해야 한다고 알려줍니다. 
+이 매니페스트는 `ngsw-config.json`이라는 CLI 생성 구성 파일에서 생성됩니다.
 
-Installing the Angular service worker is as straightforward as [running an Angular CLI command](ecosystem/service-workers/getting-started#adding-a-service-worker-to-your-project).
-In addition to registering the Angular service worker with the browser, this also makes a few services available for injection which interact with the service worker and can be used to control it.
-For example, an application can ask to be notified when a new update becomes available, or an application can ask the service worker to check the server for available updates.
+Angular 서비스 워커 설치는 [Angular CLI 명령 실행](ecosystem/service-workers/getting-started#adding-a-service-worker-to-your-project)처럼 간단합니다. 
+브라우저에 Angular 서비스 워커를 등록하는 것 외에도, 서비스 워커와 상호 작용하고 이를 제어하기 위해 사용할 수 있는 몇 가지 서비스를 주입할 수 있습니다. 
+예를 들어, 애플리케이션은 새 업데이트가 제공될 때 알림을 받도록 요청할 수 있으며, 애플리케이션은 서비스 워커에 서버에서 사용 가능한 업데이트를 확인하도록 요청할 수 있습니다.
 
-## Before you start
+## 시작하기 전에
 
-To make use of all the features of Angular service workers, use the latest versions of Angular and the [Angular CLI](tools/cli).
+Angular 서비스 워커의 모든 기능을 활용하려면 최신 버전의 Angular 및 [Angular CLI](tools/cli)를 사용하세요.
 
-For service workers to be registered, the application must be accessed over HTTPS, not HTTP.
-Browsers ignore service workers on pages that are served over an insecure connection.
-The reason is that service workers are quite powerful, so extra care is needed to ensure the service worker script has not been tampered with.
+서비스 워커가 등록되기 위해서는 애플리케이션에 HTTPS를 통해 액세스해야 하며, HTTP는 허용되지 않습니다. 
+브라우저는 불안전한 연결로 제공되는 페이지에서 서비스 워커를 무시합니다. 
+그 이유는 서비스 워커가 매우 강력하기 때문에 서비스 워커 스크립트가 변조되지 않았는지 확인하는 추가적인 주의가 필요하기 때문입니다.
 
-There is one exception to this rule: to make local development more straightforward, browsers do *not* require a secure connection when accessing an application on `localhost`.
+이 규칙에는 하나의 예외가 있습니다: 로컬 개발을 더 간단하게 만들기 위해 브라우저는 `localhost`에서 애플리케이션에 액세스할 때 보안 연결을 *필요로 하지 않습니다*.
 
-### Browser support
+### 브라우저 지원
 
-To benefit from the Angular service worker, your application must run in a web browser that supports service workers in general.
-Currently, service workers are supported in the latest versions of Chrome, Firefox, Edge, Safari, Opera, UC Browser (Android version) and Samsung Internet.
-Browsers like IE and Opera Mini do not support service workers.
+Angular 서비스 워커의 이점을 얻으려면 애플리케이션이 일반적으로 서비스 워커를 지원하는 웹 브라우저에서 실행되어야 합니다. 
+현재, Chrome, Firefox, Edge, Safari, Opera, UC Browser (Android 버전), Samsung Internet의 최신 버전에서 서비스 워커가 지원됩니다. 
+IE 및 Opera Mini와 같은 브라우저는 서비스 워커를 지원하지 않습니다.
 
-If the user is accessing your application with a browser that does not support service workers, the service worker is not registered and related behavior such as offline cache management and push notifications does not happen.
-More specifically:
+사용자가 서비스 워커를 지원하지 않는 브라우저로 애플리케이션에 액세스하면 서비스 워커가 등록되지 않으며 오프라인 캐시 관리 및 푸시 알림과 같은 관련 동작이 발생하지 않습니다. 
+보다 구체적으로:
 
-* The browser does not download the service worker script and the `ngsw.json` manifest file
-* Active attempts to interact with the service worker, such as calling `SwUpdate.checkForUpdate()`, return rejected promises
-* The observable events of related services, such as `SwUpdate.available`, are not triggered
+* 브라우저는 서비스 워커 스크립트 및 `ngsw.json` 매니페스트 파일을 다운로드하지 않습니다.
+* `SwUpdate.checkForUpdate()` 호출과 같은 서비스 워커와 상호 작용하려는 시도는 거부된 프로미스를 반환합니다.
+* `SwUpdate.available`와 같은 관련 서비스의 Observable 이벤트가 트리거되지 않습니다.
 
-It is highly recommended that you ensure that your application works even without service worker support in the browser.
-Although an unsupported browser ignores service worker caching, it still reports errors if the application attempts to interact with the service worker.
-For example, calling `SwUpdate.checkForUpdate()` returns rejected promises.
-To avoid such an error, check whether the Angular service worker is enabled using `SwUpdate.isEnabled`.
+브라우저에서 서비스 워커 지원 없이 애플리케이션이 작동하는지 확인하는 것이 강력히 권장됩니다. 
+지원되지 않는 브라우저는 서비스 워커 캐싱을 무시하지만, 애플리케이션이 서비스 워커와 상호 작용하려고 할 때 오류를 보고합니다. 
+예를 들어, `SwUpdate.checkForUpdate()` 호출은 거부된 프로미스를 반환합니다. 
+이러한 오류를 피하기 위해서는 `SwUpdate.isEnabled`를 사용하여 Angular 서비스 워커가 활성화되어 있는지 확인하세요.
 
-To learn more about other browsers that are service worker ready, see the [Can I Use](https://caniuse.com/#feat=serviceworkers) page and [MDN docs](https://developer.mozilla.org/docs/Web/API/Service_Worker_API).
+서비스 워커 준비가 된 다른 브라우저에 대한 자세한 내용은 [Can I Use](https://caniuse.com/#feat=serviceworkers) 페이지와 [MDN 문서](https://developer.mozilla.org/docs/Web/API/Service_Worker_API)를 참조하세요.
 
-## Related resources
+## 관련 리소스
 
-The rest of the articles in this section specifically address the Angular implementation of service workers.
+이 섹션의 나머지 기사들은 서비스 워커의 Angular 구현에 구체적으로 다룹니다.
 
 <docs-pill-row>
-  <docs-pill href="ecosystem/service-workers/config" title="Configuration file"/>
-  <docs-pill href="ecosystem/service-workers/communications" title="Communicating with the Service Worker"/>
-  <docs-pill href="ecosystem/service-workers/push-notifications" title="Push notifications"/>
-  <docs-pill href="ecosystem/service-workers/devops" title="Service Worker devops"/>
-  <docs-pill href="ecosystem/service-workers/app-shell" title="App shell pattern"/>
+  <docs-pill href="ecosystem/service-workers/config" title="구성 파일"/>
+  <docs-pill href="ecosystem/service-workers/communications" title="서비스 워커와의 통신"/>
+  <docs-pill href="ecosystem/service-workers/push-notifications" title="푸시 알림"/>
+  <docs-pill href="ecosystem/service-workers/devops" title="서비스 워커 DevOps"/>
+  <docs-pill href="ecosystem/service-workers/app-shell" title="앱 셸 패턴"/>
 </docs-pill-row>
 
-For more information about service workers in general, see [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers).
+서비스 워커에 대한 일반적인 정보는 [서비스 워커: 소개](https://developers.google.com/web/fundamentals/primers/service-workers)를 참조하세요.
 
-For more information about browser support, see the [browser support](https://developers.google.com/web/fundamentals/primers/service-workers/#browser_support) section of [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers), Jake Archibald's [Is Serviceworker ready?](https://jakearchibald.github.io/isserviceworkerready), and [Can I Use](https://caniuse.com/serviceworkers).
+브라우저 지원에 대한 추가 정보는 [서비스 워커: 소개](https://developers.google.com/web/fundamentals/primers/service-workers) 섹션의 [브라우저 지원](https://developers.google.com/web/fundamentals/primers/service-workers/#browser_support), Jake Archibald의 [서비스워커 준비 상태?](https://jakearchibald.github.io/isserviceworkerready), 및 [Can I Use](https://caniuse.com/serviceworkers)를 참조하십시오.
 
-For additional recommendations and examples, see:
+추가 권장 사항 및 예제는 다음을 참조하세요:
 
 <docs-pill-row>
-  <docs-pill href="https://web.dev/precaching-with-the-angular-service-worker" title="Precaching with Angular Service Worker"/>
-  <docs-pill href="https://web.dev/creating-pwa-with-angular-cli" title="Creating a PWA with Angular CLI"/>
+  <docs-pill href="https://web.dev/precaching-with-the-angular-service-worker" title="Angular 서비스 워커로 프리캐싱하기"/>
+  <docs-pill href="https://web.dev/creating-pwa-with-angular-cli" title="Angular CLI로 PWA 만들기"/>
 </docs-pill-row>
 
-## Next step
+## 다음 단계
 
-To begin using Angular service workers, see [Getting Started with service workers](ecosystem/service-workers/getting-started).
+Angular 서비스 워커를 사용하려면 [서비스 워커 시작하기](ecosystem/service-workers/getting-started)를 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/ecosystem/service-workers/push-notifications.md b/adev/src/content/ecosystem/service-workers/push-notifications.md
index 2f1ac6a63de7..399ef025e472 100644
--- a/adev/src/content/ecosystem/service-workers/push-notifications.md
+++ b/adev/src/content/ecosystem/service-workers/push-notifications.md
@@ -1,33 +1,33 @@
-# Push notifications
+# 푸시 알림
 
-Push notifications are a compelling way to engage users.
-Through the power of service workers, notifications can be delivered to a device even when your application is not in focus.
+푸시 알림은 사용자와 상호작용할 수 있는 매력적인 방법입니다.
+서비스 워커의 힘을 통해, 애플리케이션이 포커스되고 있지 않을 때에도 푸시 알림을 장치로 전송할 수 있습니다.
 
-The Angular service worker enables the display of push notifications and the handling of notification click events.
+Angular 서비스 워커는 푸시 알림의 표시와 알림 클릭 이벤트의 처리를 가능하게 합니다.
 
-HELPFUL: When using the Angular service worker, push notification interactions are handled using the `SwPush` service.
-To learn more about the browser APIs involved see [Push API](https://developer.mozilla.org/docs/Web/API/Push_API) and [Using the Notifications API](https://developer.mozilla.org/docs/Web/API/Notifications_API/Using_the_Notifications_API).
+도움말: Angular 서비스 워커를 사용할 때, 푸시 알림 상호작용은 `SwPush` 서비스를 사용하여 처리됩니다.
+브라우저 API에 대해 더 알아보려면 [푸시 API](https://developer.mozilla.org/docs/Web/API/Push_API) 및 [알림 API 사용](https://developer.mozilla.org/docs/Web/API/Notifications_API/Using_the_Notifications_API)을 참조하세요.
 
-## Notification payload
+## 알림 페이로드
 
-Invoke push notifications by pushing a message with a valid payload.
-See `SwPush` for guidance.
+유효한 페이로드로 메시지를 푸시하여 푸시 알림을 호출합니다.
+안내는 `SwPush`를 참조하세요.
 
-HELPFUL: In Chrome, you can test push notifications without a backend.
-Open Devtools -> Application -> Service Workers and use the `Push` input to send a JSON notification payload.
+도움말: Chrome에서는 백엔드 없이 푸시 알림을 테스트할 수 있습니다.
+Devtools -> 응용 프로그램 -> 서비스 워커를 열고 `푸시` 입력을 사용하여 JSON 알림 페이로드를 전송하세요.
 
-## Notification click handling
+## 알림 클릭 처리
 
-The default behavior for the `notificationclick` event is to close the notification and notify `SwPush.notificationClicks`.
+`notificationclick` 이벤트에 대한 기본 동작은 알림을 닫고 `SwPush.notificationClicks`에 알립니다.
 
-You can specify an additional operation to be executed on `notificationclick` by adding an `onActionClick` property to the `data` object, and providing a `default` entry.
-This is especially useful for when there are no open clients when a notification is clicked.
+`data` 객체에 `onActionClick` 속성을 추가하고 `default` 항목을 제공하여 `notificationclick`에서 실행될 추가 작업을 지정할 수 있습니다.
+이는 알림이 클릭될 때 열려 있는 클라이언트가 없을 경우 특히 유용합니다.
 
 <docs-code language="json">
 
 {
   "notification": {
-    "title": "New Notification!",
+    "title": "새 알림!",
     "data": {
       "onActionClick": {
         "default": {"operation": "openWindow", "url": "foo"}
@@ -38,39 +38,39 @@ This is especially useful for when there are no open clients when a notification
 
 </docs-code>
 
-### Operations
+### 작업
 
-The Angular service worker supports the following operations:
+Angular 서비스 워커는 다음 작업을 지원합니다:
 
-| Operations                  | Details |
-|:---                         |:---     |
-| `openWindow`                | Opens a new tab at the specified URL.                                                                                                            |
-| `focusLastFocusedOrOpen`    | Focuses the last focused client. If there is no client open, then it opens a new tab at the specified URL.                                       |
-| `navigateLastFocusedOrOpen` | Focuses the last focused client and navigates it to the specified URL. If there is no client open, then it opens a new tab at the specified URL. |
-| `sendRequest`               | Send a simple GET request to the specified URL.                                                                                                                                                          |
+| 작업                       | 세부정보 |
+|:---                        |:---      |
+| `openWindow`                | 지정된 URL에서 새 탭을 엽니다.                                                                                                            |
+| `focusLastFocusedOrOpen`    | 마지막으로 포커스된 클라이언트에 포커스를 맞춥니다. 클라이언트가 열려 있지 않으면 지정된 URL에서 새 탭을 엽니다.                                       |
+| `navigateLastFocusedOrOpen` | 마지막으로 포커스된 클라이언트에 포커스를 맞추고 지정된 URL로 이동합니다. 클라이언트가 열려 있지 않으면 지정된 URL에서 새 탭을 엽니다. |
+| `sendRequest`               | 지정된 URL로 간단한 GET 요청을 전송합니다.                                                                                                                                                          |
 
-IMPORTANT: URLs are resolved relative to the service worker's registration scope.<br />If an `onActionClick` item does not define a `url`, then the service worker's registration scope is used.
+중요: URL은 서비스 워커의 등록 범위에 상대적으로 해결됩니다.<br />`onActionClick` 항목이 `url`을 정의하지 않으면 서비스 워커의 등록 범위가 사용됩니다.
 
-### Actions
+### 작업
 
-Actions offer a way to customize how the user can interact with a notification.
+작업은 사용자가 알림과 상호작용할 수 있는 방식을 사용자 정의할 수 있는 방법을 제공합니다.
 
-Using the `actions` property, you can define a set of available actions.
-Each action is represented as an action button that the user can click to interact with the notification.
+`actions` 속성을 사용하여 사용 가능한 작업 집합을 정의할 수 있습니다.
+각 작업은 사용자가 클릭하여 알림과 상호작용할 수 있는 작업 버튼으로 표시됩니다.
 
-In addition, using the `onActionClick` property on the `data` object, you can tie each action to an operation to be performed when the corresponding action button is clicked:
+또한, `data` 객체의 `onActionClick` 속성을 사용하여 각 작업을 해당 작업 버튼이 클릭될 때 수행할 작업에 연결할 수 있습니다:
 
 <docs-code language="typescript">
 
 {
   "notification": {
-    "title": "New Notification!",
+    "title": "새 알림!",
     "actions": [
-      {"action": "foo", "title": "Open new tab"},
-      {"action": "bar", "title": "Focus last"},
-      {"action": "baz", "title": "Navigate last"},
-      {"action": "qux", "title": "Send request in the background"},
-      {"action": "other", "title": "Just notify existing clients"}
+      {"action": "foo", "title": "새 탭 열기"},
+      {"action": "bar", "title": "마지막으로 포커스"},
+      {"action": "baz", "title": "마지막으로 이동"},
+      {"action": "qux", "title": "백그라운드에서 요청 전송"},
+      {"action": "other", "title": "기존 클라이언트에 알림만 보내기"}
     ],
     "data": {
       "onActionClick": {
@@ -86,14 +86,14 @@ In addition, using the `onActionClick` property on the `data` object, you can ti
 
 </docs-code>
 
-IMPORTANT: If an action does not have a corresponding `onActionClick` entry, then the notification is closed and `SwPush.notificationClicks` is notified on existing clients.
+중요: 작업에 해당 `onActionClick` 항목이 없는 경우, 알림은 닫히고 `SwPush.notificationClicks`가 기존 클라이언트에 알립니다.
 
-## More on Angular service workers
+## Angular 서비스 워커에 대한 더 많은 정보
 
-You might also be interested in the following:
+다음 정보에 관심이 있을 수도 있습니다:
 
 <docs-pill-row>
 
-  <docs-pill href="ecosystem/service-workers/communications" title="Communicating with the Service Worker"/>
-  <docs-pill href="ecosystem/service-workers/devops" title="Service Worker devops"/>
-</docs-pill-row>
+  <docs-pill href="ecosystem/service-workers/communications" title="서비스 워커와의 통신"/>
+  <docs-pill href="ecosystem/service-workers/devops" title="서비스 워커 DevOps"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/ecosystem/web-workers.md b/adev/src/content/ecosystem/web-workers.md
index c832564b4e19..db0e9d6360c6 100644
--- a/adev/src/content/ecosystem/web-workers.md
+++ b/adev/src/content/ecosystem/web-workers.md
@@ -1,13 +1,13 @@
-# Background processing using web workers
+# 백그라운드 처리를 위한 웹 워커 사용
 
-[Web workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API) let you run CPU-intensive computations in a background thread, freeing the main thread to update the user interface.
-Application's performing a lot of computations, like generating Computer-Aided Design \(CAD\) drawings or doing heavy geometric calculations, can use web workers to increase performance.
+[웹 워커](https://developer.mozilla.org/docs/Web/API/Web_Workers_API)는 CPU 집약적인 계산을 백그라운드 스레드에서 실행할 수 있게 하여, 메인 스레드가 사용자 인터페이스를 업데이트할 수 있도록 해줍니다.
+CAD(Computer-Aided Design) 도면 생성이나 복잡한 기하학적 계산과 같이 많은 계산을 수행하는 애플리케이션은 성능을 향상시키기 위해 웹 워커를 사용할 수 있습니다.
 
-HELPFUL: The Angular CLI does not support running itself in a web worker.
+도움말: Angular CLI는 웹 워커에서 자체적으로 실행되는 것을 지원하지 않습니다.
 
-## Adding a web worker
+## 웹 워커 추가
 
-To add a web worker to an existing project, use the Angular CLI `ng generate` command.
+기존 프로젝트에 웹 워커를 추가하려면, Angular CLI의 `ng generate` 명령을 사용하십시오.
 
 <docs-code language="shell">
 
@@ -15,8 +15,8 @@ ng generate web-worker <location>
 
 </docs-code>
 
-You can add a web worker anywhere in your application.
-For example, to add a web worker to the root component, `src/app/app.component.ts`, run the following command.
+애플리케이션의 어디에서나 웹 워커를 추가할 수 있습니다.
+예를 들어, 루트 컴포넌트인 `src/app/app.component.ts`에 웹 워커를 추가하려면, 다음 명령을 실행하십시오.
 
 <docs-code language="shell">
 
@@ -24,10 +24,10 @@ ng generate web-worker app
 
 </docs-code>
 
-The command performs the following actions.
+이 명령은 다음 작업을 수행합니다.
 
-1. Configures your project to use web workers, if it isn't already.
-1. Adds the following scaffold code to `src/app/app.worker.ts` to  receive messages.
+1. 프로젝트가 웹 워커를 사용할 수 있도록 구성합니다(아직 사용하지 않는 경우).
+1. 메시지를 수신하기 위해 `src/app/app.worker.ts`에 다음 스캐폴드 코드를 추가합니다.
 
     <docs-code language="typescript" header="src/app/app.worker.ts">
 
@@ -38,26 +38,26 @@ The command performs the following actions.
 
     </docs-code>
 
-1. Adds the following scaffold code to `src/app/app.component.ts` to use the worker.
+1. 워커를 사용하기 위해 `src/app/app.component.ts`에 다음 스캐폴드 코드를 추가합니다.
 
     <docs-code language="typescript" header="src/app/app.component.ts">
 
     if (typeof Worker !== 'undefined') {
-      // Create a new
+      // 새로운 워커 생성
       const worker = new Worker(new URL('./app.worker', import.meta.url));
       worker.onmessage = ({ data }) => {
-        console.log(`page got message: ${data}`);
+        console.log(`페이지가 메시지를 받았습니다: ${data}`);
       };
       worker.postMessage('hello');
     } else {
-      // Web workers are not supported in this environment.
-      // You should add a fallback so that your program still executes correctly.
+      // 이 환경에서는 웹 워커가 지원되지 않습니다.
+      // 프로그램이 여전히 올바르게 실행되도록 대체 방법을 추가해야 합니다.
     }
 
     </docs-code>
 
-After you create this initial scaffold, you must refactor your code to use the web worker by sending messages to and from the worker.
+이 초기 스캐폴드를 생성한 후, 워커를 통해 메시지를 주고받도록 코드를 리팩토링해야 합니다.
 
-IMPORTANT: Some environments or platforms, such as `@angular/platform-server` used in [Server-side Rendering](guide/ssr), don't support web workers.
+중요: [서버 측 렌더링](guide/ssr)에서 사용되는 `@angular/platform-server`와 같은 일부 환경 또는 플랫폼은 웹 워커를 지원하지 않습니다.
 
-To ensure that your application works in these environments, you must provide a fallback mechanism to perform the computations that the worker would otherwise perform.
+이러한 환경에서도 애플리케이션이 작동하도록 하려면, 워커가 수행할 수 있는 계산을 수행하기 위한 대체 메커니즘을 제공해야 합니다.
\ No newline at end of file
diff --git a/adev/src/content/error.md b/adev/src/content/error.md
index ded6ff92ac15..cca0e4c478e8 100644
--- a/adev/src/content/error.md
+++ b/adev/src/content/error.md
@@ -1,3 +1,3 @@
-# Page Not Found 🙃
+# 페이지를 찾을 수 없습니다 🙃
 
-If you think this is a mistake, please [open an issue](https://github.com/angular/angular/issues/new?template=3-docs-bug.yaml) so we can fix it.
+이것이 실수라고 생각되면, [문제를 제기해 주세요](https://github.com/angular/angular/issues/new?template=3-docs-bug.yaml) 우리가 수정할 수 있도록.
\ No newline at end of file
diff --git a/adev/src/content/examples/animations/src/app/about.component.html b/adev/src/content/examples/animations/src/app/about.component.html
index 6ef2412703a9..95234cca2cf4 100755
--- a/adev/src/content/examples/animations/src/app/about.component.html
+++ b/adev/src/content/examples/animations/src/app/about.component.html
@@ -1,3 +1,4 @@
 <p>
-  Angular's animations library makes it easy to define and apply animation effects such as page and list transitions.
+  Angular의 애니메이션 라이브러리는 페이지 전환 및 목록 전환과 같은 애니메이션 효과를 쉽게 정의하고
+  적용할 수 있게 해줍니다.
 </p>
diff --git a/adev/src/content/examples/i18n/readme.md b/adev/src/content/examples/i18n/readme.md
index c01dfd111a6b..c5f8f543063e 100644
--- a/adev/src/content/examples/i18n/readme.md
+++ b/adev/src/content/examples/i18n/readme.md
@@ -1,22 +1,22 @@
-# Angular i18n Internationalization Example
+# Angular i18n 국제화 예제
 
-This sample comes from the Angular documentation's "[Example Angular Internationalization application](https://angular.dev/guide/i18n/example)" page.
+이 샘플은 Angular 문서의 "[예제 Angular 국제화 애플리케이션](https://angular.dev/guide/i18n/example)" 페이지에서 가져온 것입니다.
 
-## Install and Run the Download
+## 다운로드 및 실행
 
-1. `npm install` the node_module packages
-2. `npm start` to see it run in English
-3. `npm run start:fr` to see it run with French translation.
+1. `npm install`로 node_module 패키지를 설치합니다.
+2. `npm start`로 영어로 실행되는 것을 확인합니다.
+3. `npm run start:fr`로 프랑스어 번역으로 실행되는 것을 확인합니다.
 
->See the scripts in `package.json` for an explanation of these commands.
+>이 명령어들에 대한 설명은 `package.json` 스크립트를 참고하세요.
 
-## Run in Stackblitz
+## Stackblitz에서 실행
 
-Stackblitz compiles and runs the English version by default.
+Stackblitz는 기본적으로 영어 버전을 컴파일하고 실행합니다.
 
-To see the example translate to French with Angular i18n:
+Angular i18n을 사용하여 예제를 프랑스어로 번역하려면:
 
-1. Open the `project.json` file and add the following to the bottom:
+1. `project.json` 파일을 열고 아래와 같이 추가하세요:
 
 ```json
   "stackblitz": {
@@ -24,4 +24,4 @@ To see the example translate to French with Angular i18n:
   }
 ```
 
-1. Click the "Fork" button in the stackblitz header. That makes a new copy for you with this change and re-runs the example in French.
+2. Stackblitz 헤더의 "Fork" 버튼을 클릭하세요. 그러면 이 변경 사항으로 새로운 복사본이 생성되고 예제가 프랑스어로 다시 실행됩니다.
\ No newline at end of file
diff --git a/adev/src/content/examples/reactive-forms/src/index.html b/adev/src/content/examples/reactive-forms/src/index.html
index 4a6b8fdac082..548e927ec3db 100644
--- a/adev/src/content/examples/reactive-forms/src/index.html
+++ b/adev/src/content/examples/reactive-forms/src/index.html
@@ -1,14 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <!-- #docregion -->
 <html lang="en">
   <head>
-    <title>Angular Reactive Forms</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Angular 반응형 Form</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
 
   <body>
     <app-root></app-root>
   </body>
-
 </html>
diff --git a/adev/src/content/examples/resolution-modifiers/src/app/optional/optional.component.html b/adev/src/content/examples/resolution-modifiers/src/app/optional/optional.component.html
index e73b2bc67b92..04686a704fe1 100755
--- a/adev/src/content/examples/resolution-modifiers/src/app/optional/optional.component.html
+++ b/adev/src/content/examples/resolution-modifiers/src/app/optional/optional.component.html
@@ -1,4 +1,8 @@
 <div class="section">
-	<h2>&commat;Optional() Component</h2>
-	<p>This component still works even though the OptionalService (notice &commat;Optional() in the constructor isn't provided or configured anywhere. Angular goes through tree and visibility rules, and if it doesn't find the requested service, returns null.</p>
+  <h2>&commat;Optional() 컴포넌트</h2>
+  <p>
+    이 컴포넌트는 OptionalService(생성자에서 &commat;Optional()이 표시됨)가 어디에서도 제공되거나
+    구성되지 않았더라도 작동합니다. Angular는 트리와 가시성 규칙을 기반으로 필요한 Service를 찾지
+    못하면 null을 반환합니다.
+  </p>
 </div>
diff --git a/adev/src/content/examples/service-worker-getting-started/src/app/app.component.html b/adev/src/content/examples/service-worker-getting-started/src/app/app.component.html
index 462335339c1e..a82d5dae6854 100755
--- a/adev/src/content/examples/service-worker-getting-started/src/app/app.component.html
+++ b/adev/src/content/examples/service-worker-getting-started/src/app/app.component.html
@@ -1,23 +1,33 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+  <h1>{{ title }}에 오신 것을 환영합니다!</h1>
+  <img
+    width="300"
+    alt="Angular 로고"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
+  />
 </div>
 
-<button type="button" id="check" (click)="updateCheck()">Check for Update</button>
+<button type="button" id="check" (click)="updateCheck()">업데이트 확인</button>
 <p id="checkResult">{{ updateCheckText }}</p>
 
-<h2>Here are some links to help you start: </h2>
+<h2>시작하는 데 도움이 될 몇 가지 링크가 있습니다:</h2>
 <ul>
   <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.dev/ecosystem/service-workers">Angular Service Worker Intro</a></h2>
+    <h2>
+      <a target="_blank" rel="noopener" href="https://angular.dev/ecosystem/service-workers"
+        >Angular 서비스 워커 소개</a
+      >
+    </h2>
   </li>
   <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+    <h2>
+      <a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki"
+        >CLI 문서</a
+      >
+    </h2>
   </li>
   <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.dev/">Angular blog</a></h2>
+    <h2><a target="_blank" rel="noopener" href="https://blog.angular.dev/">Angular 블로그</a></h2>
   </li>
 </ul>
diff --git a/adev/src/content/examples/service-worker-getting-started/src/app/readme.md b/adev/src/content/examples/service-worker-getting-started/src/app/readme.md
index a616d6ae0f2c..71bbd8723de7 100644
--- a/adev/src/content/examples/service-worker-getting-started/src/app/readme.md
+++ b/adev/src/content/examples/service-worker-getting-started/src/app/readme.md
@@ -1,9 +1,9 @@
-# Instructions for Angular Universal Example Download
+# Angular Universal 예제 다운로드 지침
 
-This is the downloaded sample code for the [Angular Universal (Standalone) guide](https://angular.dev/guide/ssr).
+이것은 [Angular Universal (Standalone) 가이드](https://angular.dev/guide/ssr)에 대한 다운로드된 샘플 코드입니다.
 
-## Install and Run
+## 설치 및 실행
 
-1. `npm install` to install the `node_module` packages
-2. `npm run dev:ssr` to launch the server and application
-3. Launch the browser to `http://localhost:4200`
+1. `npm install`을 실행하여 `node_module` 패키지를 설치합니다.
+2. `npm run dev:ssr`을 실행하여 서버와 애플리케이션을 시작합니다.
+3. 브라우저를 열고 `http://localhost:4200`에 접속합니다.
\ No newline at end of file
diff --git a/adev/src/content/examples/setup/src/index.html b/adev/src/content/examples/setup/src/index.html
index d293eaf05949..d2da9b435f74 100644
--- a/adev/src/content/examples/setup/src/index.html
+++ b/adev/src/content/examples/setup/src/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html lang="ko">
   <head>
-    <title>Angular Quickstart Seed</title>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
+    <title>Angular 퀵스타트 시드</title>
+    <base href="/" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="styles.css" />
 
     <!-- Polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
@@ -21,5 +21,4 @@
   <body>
     <app-root><!-- content managed by Angular --></app-root>
   </body>
-
 </html>
diff --git a/adev/src/content/examples/ssr/readme.md b/adev/src/content/examples/ssr/readme.md
index 26a204eabcfb..18261d329791 100644
--- a/adev/src/content/examples/ssr/readme.md
+++ b/adev/src/content/examples/ssr/readme.md
@@ -1,9 +1,9 @@
-# Instructions for Angular SSR Example Download
+# Angular SSR 예제 다운로드 지침
 
-This is the downloaded sample code for the [Angular SSR (Standalone) guide](https://angular.io/guide/ssr).
+이것은 [Angular SSR (Standalone) 가이드](https://angular.io/guide/ssr)용으로 다운로드된 샘플 코드입니다.
 
-## Install and Run
+## 설치 및 실행
 
-1. `npm install` to install the `node_module` packages
-2. `ng serve` to launch the dev-server
-3. Launch the browser to `http://localhost:4200`
+1. `npm install`을 사용하여 `node_module` 패키지를 설치합니다.
+2. `ng serve`를 사용하여 개발 서버를 실행합니다.
+3. 브라우저를 열고 `http://localhost:4200`으로 이동합니다.
\ No newline at end of file
diff --git a/adev/src/content/examples/structural-directives/src/index.html b/adev/src/content/examples/structural-directives/src/index.html
index 451b66ce357d..92824ed66a49 100644
--- a/adev/src/content/examples/structural-directives/src/index.html
+++ b/adev/src/content/examples/structural-directives/src/index.html
@@ -1,15 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <!-- #docregion -->
-<html lang="en">
+<html lang="ko">
   <head>
-    <title>Angular Structural Directives</title>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Angular 구조 디렉티브</title>
+    <base href="/" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
 
   <body>
     <app-root></app-root>
   </body>
-
 </html>
diff --git a/adev/src/content/guide/animations/complex-sequences.md b/adev/src/content/guide/animations/complex-sequences.md
index c8cff5529a82..d6f6ee1838b3 100644
--- a/adev/src/content/guide/animations/complex-sequences.md
+++ b/adev/src/content/guide/animations/complex-sequences.md
@@ -1,142 +1,142 @@
-# Complex animation sequences
+# 복잡한 애니메이션 시퀀스
 
-So far, we've learned simple animations of single HTML elements.
-Angular also lets you animate coordinated sequences, such as an entire grid or list of elements as they enter and leave a page.
-You can choose to run multiple animations in parallel, or run discrete animations sequentially, one following another.
+지금까지 우리는 단일 HTML 요소의 간단한 애니메이션을 배웠습니다.
+Angular는 전체 그리드나 페이지에 들어오고 나가는 요소 목록과 같은 조정된 시퀀스를 애니메이션할 수 있도록 합니다.
+여러 애니메이션을 병렬로 실행할 수도 있고, 하나씩 순차적으로 실행할 수도 있습니다.
 
-The functions that control complex animation sequences are:
+복잡한 애니메이션 시퀀스를 제어하는 함수는 다음과 같습니다:
 
-| Functions                         | Details |
-|:---                               |:---     |
-| `query()`                         | Finds one or more inner HTML elements. |
-| `stagger()`                       | Applies a cascading delay to animations for multiple elements. |
-| [`group()`](api/animations/group) | Runs multiple animation steps in parallel. |
-| `sequence()`                      | Runs animation steps one after another. |
+| 함수                               | 세부사항 |
+|:---                                 |:---       |
+| `query()`                           | 하나 이상의 내부 HTML 요소를 찾습니다. |
+| `stagger()`                         | 여러 요소의 애니메이션에 계단식 지연을 적용합니다. |
+| [`group()`](api/animations/group) | 여러 애니메이션 단계를 병렬로 실행합니다. |
+| `sequence()`                        | 애니메이션 단계를 차례로 실행합니다. |
 
-## The query() function
+## query() 함수
 
-Most complex animations rely on the `query()` function to find child elements and apply animations to them, basic examples of such are:
+대부분의 복잡한 애니메이션은 `query()` 함수에 의존하여 자식 요소를 찾고 애니메이션을 적용합니다. 기본적인 예는 다음과 같습니다:
 
-| Examples                               | Details |
-|:---                                    |:---     |
-| `query()` followed by `animate()`      | Used to query simple HTML elements and directly apply animations to them.                                                                                                                            |
-| `query()` followed by `animateChild()` | Used to query child elements, which themselves have animations metadata applied to them and trigger such animation \(which would be otherwise be blocked by the current/parent element's animation\). |
+| 예제                                   | 세부사항 |
+|:---                                    |:---       |
+| `query()` 다음에 `animate()`          | 간단한 HTML 요소를 쿼리하고 그에 직접 애니메이션을 적용하는 데 사용됩니다.                                                                  |
+| `query()` 다음에 `animateChild()`     | 자식 요소를 쿼리하는 데 사용되며, 해당 요소에 애니메이션 메타데이터가 적용되어 그러한 애니메이션을 트리거합니다 \(일반적으로는 현재/부모 요소의 애니메이션에 의해 차단됩니다\). |
 
-The first argument of `query()` is a [css selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) string which can also contain the following Angular-specific tokens:
+`query()`의 첫 번째 인수는 다음 Angular 전용 토큰을 포함할 수 있는 [css 선택기](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) 문자열입니다:
 
-| Tokens                     | Details |
-|:---                        |:---     |
-| `:enter` <br /> `:leave`   | For entering/leaving elements.               |
-| `:animating`               | For elements currently animating.            |
-| `@*` <br /> `@triggerName` | For elements with any—or a specific—trigger. |
-| `:self`                    | The animating element itself.                |
+| 토큰                              | 세부사항 |
+|:---                                |:---       |
+| `:enter` <br /> `:leave`          | 들어오는/나가는 요소에 대한 것입니다.         |
+| `:animating`                       | 현재 애니메이션 중인 요소입니다.              |
+| `@*` <br /> `@triggerName`       | 모든 애니메이션이나 특정 트리거가 있는 요소입니다. |
+| `:self`                            | 애니메이션을 수행하는 요소 자체입니다.          |
 
-<docs-callout title="Entering and Leaving Elements">
+<docs-callout title="들어오고 나가는 요소">
 
-Not all child elements are actually considered as entering/leaving; this can, at times, be counterintuitive and confusing. Please see the [query api docs](api/animations/query#entering-and-leaving-elements) for more information.
+모든 자식 요소가 실제로 들어오거나 나가는 것으로 간주되는 것은 아닙니다. 이는 때때로 직관에 반하고 혼란스러울 수 있습니다. 자세한 내용은 [query api 문서](api/animations/query#entering-and-leaving-elements)를 참조하십시오.
 
-You can also see an illustration of this in the animations example \(introduced in the animations [introduction section](guide/animations#about-this-guide)\) under the Querying tab.
+이것에 대한 예시는 애니메이션 예제 \(애니메이션 [소개 섹션](guide/animations#about-this-guide)에서 소개됨\)의 쿼리 탭에서 확인할 수 있습니다.
 
 </docs-callout>
 
-## Animate multiple elements using query() and stagger() functions
+## query()와 stagger() 함수를 사용하여 여러 요소 애니메이션
 
-After having queried child elements via `query()`, the `stagger()` function lets you define a timing gap between each queried item that is animated and thus animates elements with a delay between them.
+`query()`를 사용하여 자식 요소를 쿼리한 후, `stagger()` 함수는 애니메이션되는 각 쿼리 항목 간의 시간 간격을 정의하여 요소들 간의 지연을 생성합니다.
 
-The following example demonstrates how to use the `query()` and `stagger()` functions to animate a list \(of heroes\) adding each in sequence, with a slight delay, from top to bottom.
+다음 예시는 `query()`와 `stagger()` 함수를 사용하여 \(영웅의\) 목록을 아래에서 위로 조금씩 지연을 두고 추가하는 방법을 보여줍니다.
 
-* Use `query()` to look for an element entering the page that meets certain criteria
-* For each of these elements, use `style()` to set the same initial style for the element.
-    Make it transparent and use `transform` to move it out of position so that it can slide into place.
+* `query()`를 사용하여 페이지에 들어오는 특정 기준을 충족하는 요소를 찾습니다.
+* 각 요소에 대해 `style()`을 사용하여 요소의 동일한 초기 스타일을 설정합니다.
+    요소를 투명하게 만들고 `transform`을 사용하여 위치를 이동시켜야지 위치에 맞게 슬라이드할 수 있습니다.
 
-* Use `stagger()` to delay each animation by 30 milliseconds
-* Animate each element on screen for 0.5 seconds using a custom-defined easing curve, simultaneously fading it in and un-transforming it
+* 각 애니메이션을 30밀리초 지연시킵니다.
+* 사용자 정의 이징 곡선을 사용하여 화면의 각 요소를 0.5초 동안 애니메이션하면서 동시에 페이드 인 및 언트랜스폼합니다.
 
 <docs-code header="src/app/hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" visibleRegion="page-animations"/>
 
-## Parallel animation using group() function
+## group() 함수를 사용한 병렬 애니메이션
 
-You've seen how to add a delay between each successive animation.
-But you might also want to configure animations that happen in parallel.
-For example, you might want to animate two CSS properties of the same element but use a different `easing` function for each one.
-For this, you can use the animation [`group()`](api/animations/group) function.
+각 연속 애니메이션 사이에 지연을 추가하는 방법을 보았습니다.
+하지만 병렬로 발생하는 애니메이션을 구성할 수도 있습니다.
+예를 들어, 동일한 요소의 두 개의 CSS 속성을 애니메이션하고 싶으나 각 속성에 대해 다른 `easing` 함수를 사용하고자 할 수 있습니다.
+이 경우 애니메이션 [`group()`](api/animations/group) 함수를 사용할 수 있습니다.
 
-HELPFUL: The [`group()`](api/animations/group) function is used to group animation *steps*, rather than animated elements.
+도움이 되는 가이드: [`group()`](api/animations/group) 함수는 애니메이션 *단계*를 그룹화하는 데 사용되며, 애니메이션 요소를 그룹화하는 것이 아닙니다.
 
-The following example uses [`group()`](api/animations/group)s on both `:enter` and `:leave` for two different timing configurations, thus applying two independent animations to the same element in parallel.
+다음 예시는 두 가지 다른 타이밍 구성에 대해 `:enter` 및 `:leave`에 [`group()`](api/animations/group)를 사용하는데, 이를 통해 동일한 요소에 두 개의 독립 애니메이션을 동시에 적용합니다.
 
 <docs-code header="src/app/hero-list-groups.component.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.component.ts" visibleRegion="animationdef"/>
 
-## Sequential vs. parallel animations
+## 순차 애니메이션 vs. 병렬 애니메이션
 
-Complex animations can have many things happening at once.
-But what if you want to create an animation involving several animations happening one after the other? Earlier you used [`group()`](api/animations/group) to run multiple animations all at the same time, in parallel.
+복잡한 애니메이션은 동시에 많은 일이 발생할 수 있습니다.
+하지만 여러 애니메이션이 차례로 발생하는 애니메이션을 생성하고 싶다면 어떻게 해야 하나요? 이전에 [`group()`](api/animations/group)를 사용하여 모든 애니메이션을 동시에 병렬로 실행했었습니다.
 
-A second function called `sequence()` lets you run those same animations one after the other.
-Within `sequence()`, the animation steps consist of either `style()` or `animate()` function calls.
+두 번째 `sequence()`라는 함수를 사용하면 동일한 애니메이션을 차례로 실행할 수 있습니다.
+`sequence()` 내에서 애니메이션 단계는 `style()` 또는 `animate()` 함수 호출로 구성됩니다.
 
-* Use `style()` to apply the provided styling data immediately.
-* Use `animate()` to apply styling data over a given time interval.
+* `style()`을 사용하여 제공된 스타일링 데이터를 즉시 적용합니다.
+* `animate()`를 사용하여 주어진 시간 간격에 스타일링 데이터를 적용합니다.
 
-## Filter animation example
+## 필터 애니메이션 예제
 
-Take a look at another animation on the example page.
-Under the Filter/Stagger tab, enter some text into the **Search Heroes** text box, such as `Magnet` or `tornado`.
+예제 페이지의 다른 애니메이션을 살펴보십시오.
+Filter/Stagger 탭 아래에서 **Search Heroes** 텍스트 상자에 `Magnet` 또는 `tornado`와 같은 텍스트를 입력하세요.
 
-The filter works in real time as you type.
-Elements leave the page as you type each new letter and the filter gets progressively stricter.
-The heroes list gradually re-enters the page as you delete each letter in the filter box.
+필터는 입력하는 동안 실시간으로 작동합니다.
+새로운 글자를 입력할 때마다 요소는 페이지를 떠나고 필터는 점차적으로 더 엄격해집니다.
+영웅 목록은 필터 상자에서 각 글자를 삭제할 때 점차 페이지로 다시 들어옵니다.
 
-The HTML template contains a trigger called `filterAnimation`.
+HTML 템플릿에는 `filterAnimation`이라는 트리거가 포함되어 있습니다.
 
 <docs-code header="src/app/hero-list-page.component.html" path="adev/src/content/examples/animations/src/app/hero-list-page.component.html" visibleRegion="filter-animations" language="angular-html"/>
 
-The `filterAnimation` in the component's decorator contains three transitions.
+컴포넌트 장식자의 `filterAnimation`에는 세 가지 전환이 포함되어 있습니다.
 
 <docs-code header="src/app/hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" visibleRegion="filter-animations"/>
 
-The code in this example performs the following tasks:
+이 예제의 코드는 다음과 같은 작업을 수행합니다:
 
-* Skips animations when the user first opens or navigates to this page \(the filter animation narrows what is already there, so it only works on elements that already exist in the DOM\)
-* Filters heroes based on the search input's value
+* 사용자가 처음 이 페이지를 열거나 탐색할 때 애니메이션을 건너뜁니다 \(필터 애니메이션은 이미 있는 요소에서만 작동하므로, DOM에 존재하는 요소에만 영향을 줍니다\).
+* 검색 입력값에 따라 영웅을 필터링합니다.
 
-For each change:
+각 변경사항에 대해:
 
-* Hides an element leaving the DOM by setting its opacity and width to 0
-* Animates an element entering the DOM over 300 milliseconds.
-    During the animation, the element assumes its default width and opacity.
+* DOM을 떠나는 요소의 불투명도와 너비를 0으로 설정하여 숨깁니다.
+* 300밀리초 동안 DOM에 들어오는 요소를 애니메이션합니다.
+    애니메이션 중에 요소는 기본 너비와 불투명도를 가집니다.
 
-* If there are multiple elements entering or leaving the DOM, staggers each animation starting at the top of the page, with a 50-millisecond delay between each element
+* DOM으로 들어오거나 나가는 요소가 여러 개 있을 경우, 페이지 상단에서 시작하여 각 요소 간의 50밀리초 지연으로 애니메이션을 단계적으로 진행합니다.
 
-## Animating the items of a reordering list
+## 재정렬 목록의 항목 애니메이션
 
-Although Angular animates correctly `*ngFor` list items out of the box, it will not be able to do so if their ordering changes.
-This is because it will lose track of which element is which, resulting in broken animations.
-The only way to help Angular keep track of such elements is by assigning a `TrackByFunction` to the `NgForOf` directive.
-This makes sure that Angular always knows which element is which, thus allowing it to apply the correct animations to the correct elements all the time.
+Angular는 기본적으로 `*ngFor` 목록 항목의 애니메이션을 올바르게 수행하지만, 항목의 순서가 변경되면 수행할 수 없습니다.
+이는 어떤 요소가 어떤 것인지 추적을 잃기 때문에 애니메이션이 깨지게 됩니다.
+Angular가 이러한 요소를 추적하는 데 도움을 주는 유일한 방법은 `NgForOf` 지시문에 `TrackByFunction`을 할당하는 것입니다.
+이렇게 하면 Angular는 항상 어떤 요소가 어떤 것인지 알 수 있으므로 언제나 올바른 요소에 올바른 애니메이션을 적용할 수 있습니다.
 
-IMPORTANT: If you need to animate the items of an `*ngFor` list and there is a possibility that the order of such items will change during runtime, always use a `TrackByFunction`.
+중요: `*ngFor` 목록의 항목을 애니메이션할 필요가 있고, 이 항목들의 순서가 런타임 동안 변경될 가능성이 있는 경우, 항상 `TrackByFunction`을 사용하세요.
 
-## Animations and Component View Encapsulation
+## 애니메이션 및 컴포넌트 뷰 캡슐화
 
-Angular animations are based on the components DOM structure and do not directly take [View Encapsulation](guide/components/styling#style-scoping) into account, this means that components using `ViewEncapsulation.Emulated` behave exactly as if they were using `ViewEncapsulation.None` (`ViewEncapsulation.ShadowDom` behaves differently as we'll discuss shortly).
+Angular 애니메이션은 컴포넌트의 DOM 구조를 기반으로 하며 [뷰 캡슐화](guide/components/styling#style-scoping)를 직접 고려하지 않습니다. 이는 `ViewEncapsulation.Emulated`를 사용하는 컴포넌트가 실제로는 `ViewEncapsulation.None`을 사용하는 것처럼 작동한다는 의미입니다 \( `ViewEncapsulation.ShadowDom`은 곧 논의할 내용과 다르게 작동합니다 \).
 
-For example if the `query()` function (which you'll see more of in the rest of the Animations guide) were to be applied at the top of a tree of components using the emulated view encapsulation, such query would be able to identify (and thus animate) DOM elements on any depth of the tree.
+예를 들어, `query()` 함수가 에뮬레이션된 뷰 캡슐화를 사용하는 컴포넌트 트리 상단에 적용된다면, 그러한 쿼리는 트리의 어떤 깊이에서도 DOM 요소를 식별하고 (따라서 애니메이션을 적용할 수 있습니다).
 
-On the other hand the `ViewEncapsulation.ShadowDom` changes the component's DOM structure by "hiding" DOM elements inside [`ShadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot) elements. Such DOM manipulations do prevent some of the animations implementation to work properly since it relies on simple DOM structures and doesn't take `ShadowRoot` elements into account. Therefore it is advised to avoid applying animations to views incorporating components using the ShadowDom view encapsulation.
+반면 `ViewEncapsulation.ShadowDom`은 컴포넌트의 DOM 구조를 변경하여 DOM 요소를 [`ShadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot) 요소 안에 "숨깁니다". 이러한 DOM 조작은 일부 애니메이션 구현이 제대로 작동하지 못하게 하며, 이는 단순한 DOM 구조에 의존하고 `ShadowRoot` 요소를 고려하지 않기 때문입니다. 따라서 ShadowDom 뷰 캡슐화를 사용하는 컴포넌트를 포함하는 뷰에 애니메이션을 적용하는 것은 피하는 것이 좋습니다.
 
-## Animation sequence summary
+## 애니메이션 시퀀스 요약
 
-Angular functions for animating multiple elements start with `query()` to find inner elements; for example, gathering all images within a `<div>`.
-The remaining functions, `stagger()`, [`group()`](api/animations/group), and `sequence()`, apply cascades or let you control how multiple animation steps are applied.
+Angular는 여러 요소의 애니메이션에 대해 `query()`로 내부 요소를 찾기 시작합니다. 예를 들어, `<div>` 내의 모든 이미지를 모으는 것입니다.
+나머지 함수들인 `stagger()`, [`group()`](api/animations/group), 및 `sequence()`는 계단식 효과를 적용하거나 여러 애니메이션 단계를 적용하는 방법을 제어하게 해줍니다.
 
-## More on Angular animations
+## Angular 애니메이션에 대한 더 많은 정보
 
-You might also be interested in the following:
+다음 내용에도 관심이 있을 수 있습니다:
 
 <docs-pill-row>
-  <docs-pill href="guide/animations" title="Introduction to Angular animations"/>
-  <docs-pill href="guide/animations/transition-and-triggers" title="Transition and triggers"/>
-  <docs-pill href="guide/animations/reusable-animations" title="Reusable animations"/>
-  <docs-pill href="guide/animations/route-animations" title="Route transition animations"/>
-</docs-pill-row>
+  <docs-pill href="guide/animations" title="Angular 애니메이션 소개"/>
+  <docs-pill href="guide/animations/transition-and-triggers" title="전환 및 트리거"/>
+  <docs-pill href="guide/animations/reusable-animations" title="재사용 가능한 애니메이션"/>
+  <docs-pill href="guide/animations/route-animations" title="경로 전환 애니메이션"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/guide/animations/overview.md b/adev/src/content/guide/animations/overview.md
index 8ea7b23ab3bc..b26592956482 100644
--- a/adev/src/content/guide/animations/overview.md
+++ b/adev/src/content/guide/animations/overview.md
@@ -1,36 +1,30 @@
-# Introduction to Angular animations
+# Angular 애니메이션 소개
 
-Animation provides the illusion of motion: HTML elements change styling over time.
-Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic.
-Animations can improve your application and user experience in a number of ways:
+애니메이션은 움직임의 환상을 제공합니다: HTML 요소는 시간이 지남에 따라 스타일이 변경됩니다. 잘 설계된 애니메이션은 애플리케이션을 더 재미있고 직관적으로 사용할 수 있게 하지만, 단지 장식적인 요소가 아닙니다. 애니메이션은 몇 가지 방법으로 애플리케이션과 사용자 경험을 개선할 수 있습니다:
 
-* Without animations, web page transitions can seem abrupt and jarring
-* Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions
-* Good animations intuitively call the user's attention to where it is needed
+* 애니메이션이 없으면 웹 페이지 전환이 갑작스럽고 충격적으로 보일 수 있습니다.
+* 움직임은 사용자 경험을 크게 향상시키므로, 애니메이션은 사용자가 자신의 행동에 대한 애플리케이션의 반응을 감지할 수 있는 기회를 제공합니다.
+* 좋은 애니메이션은 직관적으로 사용자가 주목해야 할 부분을 알려줍니다.
 
-Typically, animations involve multiple style *transformations* over time.
-An HTML element can move, change color, grow or shrink, fade, or slide off the page.
-These changes can occur simultaneously or sequentially. You can control the timing of each transformation.
+일반적으로 애니메이션은 시간이 지남에 따라 여러 스타일 *변환*을 포함합니다. HTML 요소는 이동할 수 있고, 색상을 변경하며, 커지거나 줄어들고, 서서히 사라지거나 페이지에서 미끄러질 수 있습니다. 이러한 변화는 동시에 또는 순차적으로 발생할 수 있으며, 각 변환의 타이밍을 제어할 수 있습니다.
 
-Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable.
-This includes positions, sizes, transforms, colors, borders, and more.
-The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1) page.
+Angular의 애니메이션 시스템은 CSS 기능에 기반하여 구축되었으며, 이는 브라우저가 애니메이션 가능하다고 간주하는 모든 속성을 애니메이션 할 수 있음을 의미합니다. 여기에는 위치, 크기, 변형, 색상, 경계 등이 포함됩니다. W3C는 자신의 [CSS Transitions](https://www.w3.org/TR/css-transitions-1) 페이지에 애니메이션 가능한 속성 목록을 유지하고 있습니다.
 
-## About this guide
+## 이 가이드에 대하여
 
-This guide covers the basic Angular animation features to get you started on adding Angular animations to your project.
+이 가이드는 Angular 애니메이션을 프로젝트에 추가하는 데 필요한 기본 Angular 애니메이션 기능을 다룹니다.
 
-## Getting started
+## 시작하기
 
-The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`.
+애니메이션을 위한 주요 Angular 모듈은 `@angular/animations`와 `@angular/platform-browser`입니다.
 
-To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality.
+프로젝트에 Angular 애니메이션을 추가하려면, 표준 Angular 기능과 함께 애니메이션 전용 모듈을 가져옵니다.
 
 <docs-workflow>
-<docs-step title="Enabling the animations module">
-Import `provideAnimationsAsync` from `@angular/platform-browser/animations/async` and add it to the providers list in the `bootstrapApplication` function call.
+<docs-step title="애니메이션 모듈 활성화">
+`@angular/platform-browser/animations/async`에서 `provideAnimationsAsync`를 가져와 `bootstrapApplication` 함수 호출의 제공자 목록에 추가합니다.
 
-<docs-code header="Enabling Animations" language="ts" linenums>
+<docs-code header="애니메이션 활성화" language="ts" linenums>
 bootstrapApplication(AppComponent, {
   providers: [
     provideAnimationsAsync(),
@@ -38,47 +32,40 @@ bootstrapApplication(AppComponent, {
 });
 </docs-code>
 
-<docs-callout important title="If you need immediate animations in your application">
-  If you need to have an animation happen immediately when your application is loaded,
-  you will want to switch to the eagerly loaded animations module. Import `provideAnimations`
-  from `@angular/platform-browser/animations` instead, and use `provideAnimations` **in place of**
-  `provideAnimationsAsync` in the `bootstrapApplication` function call.
+<docs-callout important title="애플리케이션에서 즉각적인 애니메이션이 필요한 경우">
+  애플리케이션이 로드될 때 즉각적으로 애니메이션이 발생해야 하는 경우,
+  기꺼이 로드된 애니메이션 모듈로 전환하는 것이 좋습니다. 대신 `@angular/platform-browser/animations`에서 `provideAnimations`를 가져오고,
+  `bootstrapApplication` 함수 호출에서 `provideAnimationsAsync` **대신에** `provideAnimations`를 사용하세요.
 </docs-callout>
 
-For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
+`NgModule` 기반 애플리케이션의 경우, 애니메이션 기능을 Angular 루트 애플리케이션 모듈에 도입하는 `BrowserAnimationsModule`을 가져옵니다.
 
 <docs-code header="src/app/app.module.ts" path="adev/src/content/examples/animations/src/app/app.module.1.ts"/>
 </docs-step>
-<docs-step title="Importing animation functions into component files">
-If you plan to use specific animation functions in component files, import those functions from `@angular/animations`.
+<docs-step title="컴포넌트 파일에 애니메이션 함수 가져오기">
+컴포넌트 파일에서 특정 애니메이션 함수를 사용할 계획이라면, `@angular/animations`에서 해당 함수를 가져옵니다.
 
 <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="imports"/>
 
-See all [available animation functions](guide/animations#animations-api-summary) at the end of this guide.
+이 가이드 끝에서 모든 [사용 가능한 애니메이션 함수](guide/animations#animations-api-summary)를 확인하세요.
 
 </docs-step>
-<docs-step title="Adding the animation metadata property">
-In the component file, add a metadata property called `animations:` within the `@Component()` decorator.
-You put the trigger that defines an animation within the `animations` metadata property.
+<docs-step title="애니메이션 메타데이터 속성 추가하기">
+컴포넌트 파일에서 `@Component()` 데코레이터 내에 `animations:`라는 메타데이터 속성을 추가합니다. 애니메이션을 정의하는 트리거를 `animations` 메타데이터 속성 내에 넣습니다.
 
 <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="decorator"/>
 </docs-step>
 </docs-workflow>
 
-## Animating a transition
+## 전환 애니메이션
 
-Let's animate a transition that changes a single HTML element from one state to another.
-For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action.
-When the button is in the `open` state, it's visible and yellow.
-When it's the `closed` state, it's translucent and blue.
+하나의 HTML 요소가 한 상태에서 다른 상태로 변경되는 전환을 애니메이션해 보겠습니다. 예를 들어 버튼이 사용자의 마지막 행동에 따라 **열기** 또는 **닫기**를 표시하도록 지정할 수 있습니다. 버튼이 `open` 상태에 있을 때는 표시되고 노란색입니다. `closed` 상태일 때는 반투명하고 파란색입니다.
 
-In HTML, these attributes are set using ordinary CSS styles such as color and opacity.
-In Angular, use the `style()` function to specify a set of CSS styles for use with animations.
-Collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`.
+HTML에서 이러한 속성은 색상 및 불투명도와 같은 일반적인 CSS 스타일을 사용하여 설정됩니다. Angular에서는 `style()` 함수를 사용하여 애니메이션에 사용할 CSS 스타일 세트를 지정합니다. 애니메이션 상태에서 스타일 세트를 수집하고, 상태에 이름(예: `open` 또는 `closed`)을 지정합니다.
 
-HELPFUL: Let's create a new `open-close` component to animate with simple transitions.
+도움이 되는 정보: 간단한 전환으로 애니메이션할 새로운 `open-close` 컴포넌트를 만들어 보겠습니다.
 
-Run the following command in terminal to generate the component:
+다음 명령어를 터미널에서 실행하여 컴포넌트를 생성합니다:
 
 <docs-code language="shell">
 
@@ -86,45 +73,35 @@ ng g component open-close
 
 </docs-code>
 
-This will create the component at `src/app/open-close.component.ts`.
+이렇게 하면 `src/app/open-close.component.ts`에 컴포넌트가 생성됩니다.
 
-### Animation state and styles
+### 애니메이션 상태 및 스타일
 
-Use Angular's [`state()`](api/animations/state) function to define different states to call at the end of each transition.
-This function takes two arguments:
-A unique name like `open` or `closed` and a `style()` function.
+Angular의 [링크를 이용해](api/animations/state) 다양한 상태를 정의하여 각 전환의 끝에서 호출할 수 있습니다. 이 함수는 두 개의 인수를 받습니다: `open` 또는 `closed`와 같은 고유한 이름과 `style()` 함수입니다.
 
-Use the `style()` function to define a set of styles to associate with a given state name.
-You must use *camelCase* for style attributes that contain dashes, such as `backgroundColor` or wrap them in quotes, such as `'background-color'`.
+`style()` 함수를 사용하여 주어진 상태 이름과 연관된 스타일 세트를 정의합니다. 대시가 포함된 스타일 속성은 *camelCase* 형식으로 사용해야 하며, 예를 들어 `backgroundColor`와 같은 형식이나, `'background-color'`와 같이 따옴표로 묶을 수 있습니다.
 
-Let's see how Angular's [`state()`](api/animations/state) function works with the `style⁣­(⁠)` function to set CSS style attributes.
-In this code snippet, multiple style attributes are set at the same time for the state.
-In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color.
+Angular의 [state()](api/animations/state) 함수가 `style()` 함수와 어떻게 함께 작동하는지 확인해 보겠습니다. 이 코드 조각에서는 상태에 대해 여러 스타일 속성이 동시에 설정됩니다. `open` 상태에서 버튼은 높이가 200픽셀이고, 불투명도는 1이며, 배경 색상은 노란색입니다.
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state1"/>
 
-In the following `closed` state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of blue.
+이후의 `closed` 상태에서 버튼의 높이는 100픽셀, 불투명도는 0.8이며, 배경 색상은 파란색입니다.
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state2"/>
 
-### Transitions and timing
+### 전환 및 타이밍
 
-In Angular, you can set multiple styles without any animation.
-However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring.
+Angular에서는 애니메이션 없이 여러 스타일을 설정할 수 있습니다. 그러나 추가적인 정제가 없다면 버튼은 변화 없이 즉시 변형되어 버립니다.
 
-To make the change less abrupt, you need to define an animation *transition* to specify the changes that occur between one state and another over a period of time.
-The `transition()` function accepts two arguments:
-The first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps.
+변화를 덜 갑작스럽게 만들려면, 애니메이션 *전환*을 정의하여 한 상태에서 다른 상태로의 변화가 시간에 따라 발생하도록 해야 합니다. `transition()` 함수는 두 개의 인수를 받습니다: 첫 번째 인수는 두 전환 상태 간의 방향을 정의하는 표현식을 받고, 두 번째 인수는 하나 또는 여러 개의 `animate()` 단계를 받습니다.
 
-Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place.
-Use the `animate()` function to define the `keyframes()` function for multi-step animations.
-These definitions are placed in the second argument of the `animate()` function.
+`animate()` 함수를 사용하여 전환의 길이, 지연 및 진동을 정의하고, 애니메이션이 진행되는 동안 스타일을 정의하는 스타일 함수를 지정합니다. `animate()` 함수는 다단계 애니메이션을 위한 `keyframes()` 함수를 정의하는 데 사용됩니다. 이러한 정의는 `animate()` 함수의 두 번째 인수에 위치하게 됩니다.
 
-#### Animation metadata: duration, delay, and easing
+#### 애니메이션 메타데이터: 지속 시간, 지연 및 진동
 
-The `animate()` function \(second argument of the transition function\) accepts the `timings` and `styles` input parameters.
+`animate()` 함수 (전이 함수의 두 번째 인수)는 `timings` 및 `styles` 입력 매개변수를 받습니다.
 
-The `timings` parameter takes either a number or a string defined in three parts.
+`timings` 매개변수는 숫자나 세 부분으로 정의된 문자열을 받을 수 있습니다.
 
 <docs-code language="typescript">
 
@@ -132,7 +109,7 @@ animate (duration)
 
 </docs-code>
 
-or
+또는
 
 <docs-code language="typescript">
 
@@ -140,59 +117,50 @@ animate ('duration delay easing')
 
 </docs-code>
 
-The first part, `duration`, is required.
-The duration can be expressed in milliseconds as a number without quotes, or in seconds with quotes and a time specifier.
-For example, a duration of a tenth of a second can be expressed as follows:
+첫 번째 부분인 `duration`은 필수입니다. 지속 시간은 따옴표 없이 숫자로 밀리초로 표현할 수 있고, 따옴표와 시간 지정자가 있는 문자열로 표현할 수도 있습니다. 예를 들어, 0.1초의 지속 시간은 다음과 같이 표현할 수 있습니다:
 
-* As a plain number, in milliseconds:
+* 일반 숫자로, 밀리초로:
     `100`
 
-* In a string, as milliseconds:
+* 문자열로, 밀리초로:
     `'100ms'`
 
-* In a string, as seconds:
+* 문자열로, 초로:
     `'0.1s'`
 
-The second argument, `delay`, has the same syntax as `duration`.
-For example:
+두 번째 인수인 `delay`는 `duration`과 동일한 구문을 가집니다. 예를 들면:
 
-* Wait for 100ms and then run for 200ms: `'0.2s 100ms'`
+* 100ms 기다린 다음 200ms 실행: `'0.2s 100ms'`
 
-The third argument, `easing`, controls how the animation [accelerates and decelerates](https://easings.net) during its runtime.
-For example, `ease-in` causes the animation to begin slowly, and to pick up speed as it progresses.
+세 번째 인수인 `easing`은 애니메이션이 실행되는 동안 [가속과 감속을](https://easings.net) 제어합니다. 예를 들어, `ease-in`은 애니메이션이 천천히 시작하고 진행됨에 따라 속도가 빨라지게 합니다.
 
-* Wait for 100ms, run for 200ms.
-    Use a deceleration curve to start out fast and slowly decelerate to a resting point:
-    `'0.2s 100ms ease-out'`
+* 100ms 기다리고 200ms 실행.
+    시작하는 기울기를 사용하여 빠르게 시작하고 느리게 감속하여 안정된 지점에 도달하게 합니다: `'0.2s 100ms ease-out'`
 
-* Run for 200ms, with no delay.
-    Use a standard curve to start slow, accelerate in the middle, and then decelerate slowly at the end:
-    `'0.2s ease-in-out'`
+* 200ms 실행하고 지연 없음.
+    표준 곡선을 사용하여 천천히 시작하고 중간에 가속한 후 마지막에 서서히 감속합니다: `'0.2s ease-in-out'`
 
-* Start immediately, run for 200ms.
-    Use an acceleration curve to start slow and end at full velocity:
-    `'0.2s ease-in'`
+* 즉시 시작하고 200ms 실행.
+    가속 곡선을 사용하여 천천히 시작하고 전체 속도로 끝나게 합니다: `'0.2s ease-in'`
 
-HELPFUL: See the Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves.
+도움이 되는 정보: [자연스러운 진동 곡선에 대한](https://material.io/design/motion/speed.html#easing) Material Design 웹사이트의 주제를 확인하세요.
 
-This example provides a state transition from `open` to `closed` with a 1-second transition between states.
+이 예는 `open`에서 `closed` 상태로의 상태 전환을 제공하며, 상태 간의 1초 전환이 있습니다.
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition1"/>
 
-In the preceding code snippet, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional.
-Within the transition, `animate()` specifies how long the transition takes.
-In this case, the state change from `open` to `closed` takes 1 second, expressed here as `1s`.
+앞선 코드 조각에서 `=>` 연산자는 단방향 전환을 나타내고, `<=>`는 양방향입니다. 전환 내에서 `animate()`는 전환이 걸리는 시간을 지정합니다. 이 경우, `open`에서 `closed`로의 상태 변화는 1초가 걸리며, 여기서는 `1s`로 표현됩니다.
 
-This example adds a state transition from the `closed` state to the `open` state with a 0.5-second transition animation arc.
+이 예제는 `closed` 상태에서 `open` 상태로의 상태 전환을 추가하며, 0.5초의 전환 애니메이션 아크를 가집니다.
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition2"/>
 
-HELPFUL: Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions.
+도움이 되는 정보: `state`(api/animations/state) 및 `transition` 함수 내에서 스타일을 사용하는 것에 대한 추가적인 메모입니다.
 
-* Use [`state()`](api/animations/state) to define styles that are applied at the end of each transition, they persist after the animation completes
-* Use `transition()` to define intermediate styles, which create the illusion of motion during the animation
-* When animations are disabled, `transition()` styles can be skipped, but [`state()`](api/animations/state) styles can't
-* Include multiple state pairs within the same `transition()` argument:
+* `state()`를 사용하여 각 전환 끝에 적용되는 스타일을 정의하면 애니메이션 완료 후에도 지속됩니다.
+* `transition()`을 사용하여 애니메이션 동안 움직임의 환상을 제공하는 중간 스타일을 정의합니다.
+* 애니메이션이 비활성화되어 있는 경우, `transition()` 스타일은 건너뛸 수 있지만 `state()` 스타일은 건너뛸 수 없습니다.
+* 동일한 `transition()` 인수 내에 여러 상태 쌍을 포함할 수 있습니다:
 
     <docs-code language="typescript">
 
@@ -200,30 +168,23 @@ HELPFUL: Some additional notes on using styles within [`state`](api/animations/s
 
     </docs-code>
 
-### Triggering the animation
+### 애니메이션 시작하기
 
-An animation requires a *trigger*, so that it knows when to start.
-The `trigger()` function collects the states and transitions, and gives the animation a name, so that you can attach it to the triggering element in the HTML template.
+애니메이션은 시작할 때 알림을 받을 수 있는 *트리거*가 필요합니다. `trigger()` 함수는 상태와 전환을 수집하고 애니메이션에 이름을 부여하여 HTML 템플릿의 트리거 요소에 연결할 수 있도록 합니다.
 
-The `trigger()` function describes the property name to watch for changes.
-When a change occurs, the trigger initiates the actions included in its definition.
-These actions can be transitions or other functions, as we'll see later on.
+`trigger()` 함수는 변경 사항을 관찰할 속성 이름을 설명합니다. 변경이 발생하면 트리거는 정의에 포함된 동작을 시작합니다. 이러한 동작은 전환이나 다른 함수일 수 있으며, 나중에 보게 될 것입니다.
 
-In this example, we'll name the trigger `openClose`, and attach it to the `button` element.
-The trigger describes the open and closed states, and the timings for the two transitions.
+이 예제에서는 트리거 이름을 `openClose`로 정하고 `button` 요소에 부착합니다. 트리거는 열린 상태와 닫힌 상태 및 두 전환의 타이밍을 설명합니다.
 
-HELPFUL: Within each `trigger()` function call, an element can only be in one state at any given time.
-However, it's possible for multiple triggers to be active at once.
+도움이 되는 정보: 각 `trigger()` 함수 호출 내에서 요소는 언제든지 하나의 상태에만 있을 수 있습니다. 그러나 여러 트리거가 동시에 활성화될 수 있습니다.
 
-### Defining animations and attaching them to the HTML template
+### 애니메이션 정의 및 HTML 템플릿에 부착하기
 
-Animations are defined in the metadata of the component that controls the HTML element to be animated.
-Put the code that defines your animations under the `animations:` property within the `@Component()` decorator.
+애니메이션은 애니메이션할 HTML 요소를 제어하는 컴포넌트의 메타데이터에서 정의됩니다. 애니메이션을 정의하는 코드를 `@Component()` 데코레이터 내의 `animations:` 속성 아래에 배치합니다.
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="component"/>
 
-When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol.
-Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state.
+컴포넌트에 애니메이션 트리거를 정의한 후, 해당 컴포넌트의 템플릿에서 트리거 이름을 괄호로 감싸고 '@' 기호로 앞에 붙여 요소에 부착합니다. 그런 다음 다음과 같이 표준 Angular 속성 바인딩 구문을 사용하여 트리거를 템플릿 표현식에 바인딩할 수 있습니다. 여기서 `triggerName`은 트리거의 이름이고, `expression`은 정의된 애니메이션 상태로 평가됩니다.
 
 <docs-code language="typescript">
 
@@ -231,25 +192,23 @@ Then, you can bind the trigger to a template expression using standard Angular p
 
 </docs-code>
 
-The animation is executed or triggered when the expression value changes to a new state.
+애니메이션은 표현식 값이 새로운 상태로 변경될 때 실행되거나 트리거됩니다.
 
-The following code snippet binds the trigger to the value of the `isOpen` property.
+다음 코드 조각은 트리거를 `isOpen` 속성의 값에 바인딩합니다.
 
 <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.1.html" visibleRegion="trigger"/>
 
-In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change.
-Then it's up to the `openClose` code to handle the state change and kick off a state change animation.
+이 예제에서는 `isOpen` 표현식이 `open` 또는 `closed`의 정의된 상태로 평가될 때, 트리거 `openClose`에 상태 변경을 알립니다. 그런 다음 `openClose` 코드가 상태 변경을 처리하고 상태 변경 애니메이션을 시작하는 작업을 수행합니다.
 
-For elements entering or leaving a page \(inserted or removed from the DOM\), you can make the animations conditional.
-For example, use `*ngIf` with the animation trigger in the HTML template.
+페이지에 들어가거나 나가는 요소( DOM에 삽입 또는 제거되는 경우) 애니메이션을 조건부로 만들 수 있습니다. 예를 들어, HTML 템플릿에서 애니메이션 트리거와 함께 `*ngIf`를 사용할 수 있습니다.
 
-HELPFUL: In the component file, set the trigger that defines the animations as the value of the `animations:` property in the `@Component()` decorator.
+도움이 되는 정보: 컴포넌트 파일에서는 트리거가 애니메이션을 정의하는 값을 `@Component()` 데코레이터의 `animations:` 속성으로 설정합니다.
 
-In the HTML template file, use the trigger name to attach the defined animations to the HTML element to be animated.
+HTML 템플릿 파일에서는 트리거 이름을 사용하여 정의된 애니메이션을 애니메이션할 HTML 요소에 부착합니다.
 
-### Code review
+### 코드 검토
 
-Here are the code files discussed in the transition example.
+여기 전환 예제에서 논의된 코드 파일들이 있습니다.
 
 <docs-code-multifile>
     <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="component"/>
@@ -257,44 +216,43 @@ Here are the code files discussed in the transition example.
     <docs-code header="src/app/open-close.component.css" path="adev/src/content/examples/animations/src/app/open-close.component.css"/>
 </docs-code-multifile>
 
-### Summary
+### 요약
 
-You learned to add animation to a transition between two states, using `style()` and [`state()`](api/animations/state) along with `animate()` for the timing.
+두 상태 간의 전환에 애니메이션을 추가하는 방법을 `style()` 및 [state()](api/animations/state)와 함께 `animate()`를 사용하여 타이밍을 다루는 방법을 배웠습니다.
 
-Learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/animations/transition-and-triggers).
+[전환 및 트리거](guide/animations/transition-and-triggers)에서 고급 기술이 포함된 Angular 애니메이션의 고급 기능에 대해 알아보세요.
 
-## Animations API summary
+## 애니메이션 API 요약
 
-The functional API provided by the `@angular/animations` module provides a domain-specific language \(DSL\) for creating and controlling animations in Angular applications.
-See the [API reference](api#animations) for a complete listing and syntax details of the core functions and related data structures.
+`@angular/animations` 모듈에서 제공하는 기능적 API는 Angular 애플리케이션에서 애니메이션을 생성하고 제어하기 위한 도메인 특정 언어(DSL)를 제공합니다. 핵심 함수 및 관련 데이터 구조의 완전한 목록 및 구문 세부정보는 [API 참고자료](api#animations)를 참조하세요.
 
-| Function name                     | What it does                                                                                                                                                                                                |
-|:---                               |:---                                                                                                                                                                                                         |
-| `trigger()`                       | Kicks off the animation and serves as a container for all other animation function calls. HTML template binds to `triggerName`. Use the first argument to declare a unique trigger name. Uses array syntax. |
-| `style()`                         | Defines one or more CSS styles to use in animations. Controls the visual appearance of HTML elements during animations. Uses object syntax.                                                                 |
-| [`state()`](api/animations/state) | Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions.                              |
-| `animate()`                       | Specifies the timing information for a transition. Optional values for `delay` and `easing`. Can contain `style()` calls within.                                                                            |
-| `transition()`                    | Defines the animation sequence between two named states. Uses array syntax.                                                                                                                                 |
-| `keyframes()`                     | Allows a sequential change between styles within a specified time interval. Use within `animate()`. Can include multiple `style()` calls within each `keyframe()`. Uses array syntax.                       |
-| [`group()`](api/animations/group) | Specifies a group of animation steps \(*inner animations*\) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within `sequence()` or `transition()`.     |
-| `query()`                         | Finds one or more inner HTML elements within the current element.                                                                                                                                           |
-| `sequence()`                      | Specifies a list of animation steps that are run sequentially, one by one.                                                                                                                                  |
-| `stagger()`                       | Staggers the starting time for animations for multiple elements.                                                                                                                                            |
-| `animation()`                     | Produces a reusable animation that can be invoked from elsewhere. Used together with `useAnimation()`.                                                                                                      |
-| `useAnimation()`                  | Activates a reusable animation. Used with `animation()`.                                                                                                                                                    |
-| `animateChild()`                  | Allows animations on child components to be run within the same timeframe as the parent.                                                                                                                    |
+| 함수 이름                         | 기능                                                                                                                                                                                                    |
+|:---                               |:---                                                                                                                                                                                                     |
+| `trigger()`                       | 애니메이션을 시작하고 모든 다른 애니메이션 함수 호출을 위한 컨테이너 역할을 합니다. HTML 템플릿은 `triggerName`에 바인딩됩니다. 첫 번째 인수를 사용하여 고유한 트리거 이름을 선언하세요. 배열 구문을 사용합니다. |
+| `style()`                         | 애니메이션에서 사용할 하나 이상의 CSS 스타일을 정의합니다. 애니메이션 중 HTML 요소의 시각적 모양을 제어합니다. 객체 구문을 사용합니다.                                                                                        |
+| [`state()`](api/animations/state) | 성공적으로 지정된 상태로 전환될 때 적용해야 하는 CSS 스타일 세트를 만듭니다. 이 상태는 다른 애니메이션 함수 내에서 이름으로 참조될 수 있습니다.                                                            |
+| `animate()`                       | 전환의 타이밍 정보를 지정합니다. `delay` 및 `easing`에 대한 선택적 값을 포함할 수 있습니다. 그 안에 `style()` 호출을 포함할 수 있습니다.                                                                         |
+| `transition()`                    | 두 이름이 지정된 상태 간의 애니메이션 시퀀스를 정의합니다. 배열 구문을 사용합니다.                                                                                                                                 |
+| `keyframes()`                     | 특정 시간 간격 내에서 스타일 간의 순차적 변경을 허용합니다. `animate()` 내에서 사용합니다. 각 `keyframe()` 내에 여러 `style()` 호출을 포함할 수 있습니다. 배열 구문을 사용합니다.                              |
+| [`group()`](api/animations/group) | 병렬로 실행될 애니메이션 단계(*내부 애니메이션*)의 그룹을 지정합니다. 모든 내부 애니메이션 단계가 완료된 후에만 애니메이션이 계속됩니다. `sequence()` 또는 `transition()` 내에서 사용됩니다.                            |
+| `query()`                         | 현재 요소 내에서 하나 이상의 내부 HTML 요소를 찾습니다.                                                                                                                                                        |
+| `sequence()`                      | 순차적으로 실행되는 애니메이션 단계 목록을 지정합니다.                                                                                                                                                    |
+| `stagger()`                       | 여러 요소의 애니메이션 시작 시간을 미루게 합니다.                                                                                                                                                       |
+| `animation()`                     | 다른 곳에서 호출할 수 있는 재사용 가능한 애니메이션을 생성합니다. `useAnimation()`과 함께 사용합니다.                                                                                                       |
+| `useAnimation()`                  | 재사용 가능한 애니메이션을 활성화합니다. `animation()`과 함께 사용합니다.                                                                                                                                 |
+| `animateChild()`                  | 부모와 같은 시간 내에 자식 컴포넌트의 애니메이션을 실행할 수 있게 합니다.                                                                                                           |
 
 </table>
 
-## More on Angular animations
+## Angular 애니메이션에 대한 추가 정보
 
-HELPFUL: Check out this [presentation](https://www.youtube.com/watch?v=rnTK9meY5us), shown at the AngularConnect conference in November 2017, and the accompanying [source code](https://github.com/matsko/animationsftw.in).
+도움이 되는 정보: [AngularConnect 2017년 11월 회의에서 보여준 이 프레젠테이션](https://www.youtube.com/watch?v=rnTK9meY5us) 및 동반한 [소스 코드](https://github.com/matsko/animationsftw.in)를 확인하세요.
 
-You might also be interested in the following:
+다음 내용에도 관심이 있을 수 있습니다:
 
 <docs-pill-row>
-  <docs-pill href="guide/animations/transition-and-triggers" title="Transition and triggers"/>
-  <docs-pill href="guide/animations/complex-sequences" title="Complex animation sequences"/>
-  <docs-pill href="guide/animations/reusable-animations" title="Reusable animations"/>
-  <docs-pill href="guide/animations/route-animations" title="Route transition animations"/>
-</docs-pill-row>
+  <docs-pill href="guide/animations/transition-and-triggers" title="전환 및 트리거"/>
+  <docs-pill href="guide/animations/complex-sequences" title="복잡한 애니메이션 시퀀스"/>
+  <docs-pill href="guide/animations/reusable-animations" title="재사용 가능한 애니메이션"/>
+  <docs-pill href="guide/animations/route-animations" title="경로 전환 애니메이션"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/guide/animations/reusable-animations.md b/adev/src/content/guide/animations/reusable-animations.md
index b68f9e23ace5..77e5920bbcb5 100644
--- a/adev/src/content/guide/animations/reusable-animations.md
+++ b/adev/src/content/guide/animations/reusable-animations.md
@@ -1,35 +1,35 @@
-# Reusable animations
+# 재사용 가능한 애니메이션
 
-This topic provides some examples of how to create reusable animations.
+이 주제에서는 재사용 가능한 애니메이션을 만드는 방법에 대한 몇 가지 예를 제공합니다.
 
-## Create reusable animations
+## 재사용 가능한 애니메이션 만들기
 
-To create a reusable animation, use the [`animation()`](api/animations/animation) function to define an animation in a separate `.ts` file and declare this animation definition as a `const` export variable.
-You can then import and reuse this animation in any of your application components using the [`useAnimation()`](api/animations/useAnimation) function.
+재사용 가능한 애니메이션을 만들기 위해서는 [`animation()`](api/animations/animation) 함수를 사용하여 별도의 `.ts` 파일에서 애니메이션을 정의하고 이 애니메이션 정의를 `const` export 변수로 선언합니다.
+그런 다음 [`useAnimation()`](api/animations/useAnimation) 함수를 사용하여 애플리케이션의 모든 구성 요소에서 이 애니메이션을 가져와서 재사용할 수 있습니다.
 
 <docs-code header="src/app/animations.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="animation-const"/>
 
-In the preceding code snippet, `transitionAnimation` is made reusable by declaring it as an export variable.
+위의 코드 스니펫에서 `transitionAnimation`은 export 변수로 선언하여 재사용 가능하게 만들어졌습니다.
 
-HELPFUL: The `height`, `opacity`, `backgroundColor`, and `time` inputs are replaced during runtime.
+도움이 되는 점: `height`, `opacity`, `backgroundColor`, 및 `time` 입력은 런타임 동안 대체됩니다.
 
-You can also export a part of an animation.
-For example, the following snippet exports the animation `trigger`.
+애니메이션의 일부를 내보낼 수도 있습니다.
+예를 들어, 다음 스니펫은 애니메이션 `trigger`를 내보냅니다.
 
 <docs-code header="src/app/animations.1.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="trigger-const"/>
 
-From this point, you can import reusable animation variables in your component class.
-For example, the following code snippet imports the `transitionAnimation` variable and uses it via the `useAnimation()` function.
+이 시점부터는 구성 요소 클래스에서 재사용 가능한 애니메이션 변수를 가져올 수 있습니다.
+예를 들어, 다음 코드 스니펫은 `transitionAnimation` 변수를 가져오고 `useAnimation()` 함수를 통해 사용합니다.
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.3.ts" visibleRegion="reusable"/>
 
-## More on Angular animations
+## Angular 애니메이션에 대한 더 많은 정보
 
-You might also be interested in the following:
+다음 내용에도 관심이 있을 수 있습니다:
 
 <docs-pill-row>
-  <docs-pill href="guide/animations" title="Introduction to Angular animations"/>
-  <docs-pill href="guide/animations/transition-and-triggers" title="Transition and triggers"/>
-  <docs-pill href="guide/animations/complex-sequences" title="Complex animation sequences"/>
-  <docs-pill href="guide/animations/route-animations" title="Route transition animations"/>
-</docs-pill-row>
+  <docs-pill href="guide/animations" title="Angular 애니메이션 소개"/>
+  <docs-pill href="guide/animations/transition-and-triggers" title="전환 및 트리거"/>
+  <docs-pill href="guide/animations/complex-sequences" title="복잡한 애니메이션 시퀀스"/>
+  <docs-pill href="guide/animations/route-animations" title="경로 전환 애니메이션"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/guide/animations/route-animations.md b/adev/src/content/guide/animations/route-animations.md
index 1fbbd973d084..aa3254a4f512 100644
--- a/adev/src/content/guide/animations/route-animations.md
+++ b/adev/src/content/guide/animations/route-animations.md
@@ -1,14 +1,14 @@
-# Route transition animations
+# 경로 전환 애니메이션
 
-When a user navigates from one route to another, the Angular Router maps the URL path to the relevant component and displays its view. Animating this route transition can greatly enhance the user experience. The Router has support for the View Transitions API when navigating between routes in Chrome/Chromium browsers.
+사용자가 하나의 경로에서 다른 경로로 이동할 때 Angular 라우터는 URL 경로를 관련 구성 요소에 매핑하여 해당 보기를 표시합니다. 이러한 경로 전환에 애니메이션을 적용하면 사용자 경험을 크게 향상시킬 수 있습니다. 라우터는 Chrome/Chromium 브라우저에서 경로 간 이동 시 View Transitions API를 지원합니다.
 
-HELPFUL: The Router's native View Transitions integration is currently in [developer preview](/reference/releases#developer-preview). Native View Transitions are also a relatively new feature so there may be limited support in some browsers.
+유용한 정보: 라우터의 기본 View Transitions 통합은 현재 [개발자 미리보기](/reference/releases#developer-preview)에 있습니다. 기본 View Transitions는 비교적 새로운 기능이기도 하므로 일부 브라우저에서 지원이 제한될 수 있습니다.
 
-## How View Transitions work
+## View Transitions의 작동 원리
 
-The native browser method that’s used for view transitions is `document.startViewTransition`. When `startViewTransition()` is called, the browser captures the current state of the page which includes taking a screenshot. The method takes a callback that updates the DOM and this function can be asynchronous. The new state is captured and the transition begins in the next animation frame when the promise returned by the callback resolves.
+뷰 전환에 사용되는 기본 브라우저 방법은 `document.startViewTransition`입니다. `startViewTransition()`가 호출되면 브라우저는 스크린샷을 포함하여 페이지의 현재 상태를 캡처합니다. 이 메서드는 DOM을 업데이트하는 콜백을 받으며, 이 함수는 비동기적일 수 있습니다. 새로운 상태가 캡처되고, 콜백이 반환하는 프로미스가 해결될 때 다음 애니메이션 프레임에서 전환이 시작됩니다.
 
-Here’s an example of the startViewTransition api:
+다음은 startViewTransition API의 예입니다:
 
 ```ts
 document.startViewTransition(async () => {
@@ -16,45 +16,45 @@ document.startViewTransition(async () => {
 });
 ```
 
-If you’re curious to read more about the details of the browser API, the [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions) is an invaluable resource.
+브라우저 API의 세부 사항에 대한 더 많은 정보를 읽고 싶다면, [Chrome 설명서](https://developer.chrome.com/docs/web-platform/view-transitions)는 귀중한 자료입니다.
 
-## How the Router uses view transitions
+## 라우터가 뷰 전환을 사용하는 방법
 
-Several things happen after navigation starts in the router: route matching, loading lazy routes and components, executing guards and resolvers to name a few. Once these have completed successfully, the new routes are ready to be activated. This route activation is the DOM update that we want to perform as part of the view transition.
+라우터에서 탐색이 시작된 후 여러 가지 일이 발생합니다: 경로 매칭, 지연 로딩 경로 및 구성 요소, 가드 및 리졸버 실행 등의 작업이 있습니다. 이러한 작업이 모두 성공적으로 완료되면 새로운 경로가 활성화될 준비가 됩니다. 이 경로 활성화는 뷰 전환의 일환으로 수행하고자 하는 DOM 업데이트입니다.
 
-When the view transition feature is enabled, navigation “pauses” and a call is made to the browser’s `startViewTransition` method. Once the `startViewTransition` callback executes (this happens asynchronously, as outlined in the spec here), navigation “resumes”. The remaining steps for the router navigation include updating the browser URL and activating or deactivating the matched routes (the DOM update).
+뷰 전환 기능이 활성화되면 탐색이 "일시 중지"되고 브라우저의 `startViewTransition` 메서드가 호출됩니다. `startViewTransition` 콜백이 실행되면(이는 사양에 설명된 대로 비동기적으로 발생합니다) 탐색이 "재개"됩니다. 라우터 탐색을 위한 나머지 단계에는 브라우저 URL 업데이트 및 매칭된 경로를 활성화하거나 비활성화하는 것이 포함됩니다 (DOM 업데이트).
 
-Finally, the callback passed to `startViewTransition` returns a Promise that resolves once Angular has finished rendering. As described above, this indicates to the browser that the new DOM state should be captured and the transition should begin.
+마지막으로, `startViewTransition`에 전달된 콜백은 Angular가 렌더링을 완료한 후 해결되는 프로미스를 반환합니다. 위에서 설명한 바와 같이, 이는 브라우저에 새로운 DOM 상태를 캡처하고 전환이 시작되어야 한다고 알립니다.
 
-View transitions are a [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). If the browser does not support the API, the Router will perform the DOM updates without calling `startViewTransition` and the navigation will not be animated.
+뷰 전환은 [점진적 향상](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement)입니다. 브라우저가 API를 지원하지 않는 경우, 라우터는 `startViewTransition`을 호출하지 않고 DOM 업데이트를 수행하며 탐색은 애니메이션되지 않습니다.
 
-## Enabling View Transitions in the Router
+## 라우터에서 View Transitions 활성화
 
-To enable this feature, simply add `withViewTransitions` to the `provideRouter` or set `enableViewTransitions: true` in `RouterModule.forRoot`:
+이 기능을 활성화하려면, `provideRouter`에 `withViewTransitions`를 추가하거나 `RouterModule.forRoot`에서 `enableViewTransitions: true`로 설정하기만 하면 됩니다:
 
 ```ts
-// Standalone bootstrap
+// 독립형 부트스트랩
 bootstrapApplication(MyApp, {providers: [
   provideRouter(ROUTES, withViewTransitions()),
 ]});
 
-// NgModule bootstrap
+// NgModule 부트스트랩
 @NgModule({
   imports: [RouterModule.forRoot(routes, {enableViewTransitions: true})]
 })
 export class AppRouting {}
 ```
 
-[Try the “count” example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-2dnvtm?file=src%2Fmain.ts)
+[StackBlitz에서 “카운트” 예시를 시도해보세요](https://stackblitz.com/edit/stackblitz-starters-2dnvtm?file=src%2Fmain.ts)
 
-This example uses the counter application from the Chrome explainer and replaces the direct call to startViewTransition when the counter increments with a router navigation.
+이 예시는 Chrome 설명서에서 제공되는 카운터 애플리케이션을 사용하며 카운터가 증가할 때 `startViewTransition`에 대한 직접 호출을 라우터 탐색으로 대체합니다.
 
-## Using CSS to customize transitions
+## CSS를 사용해 전환 사용자 정의하기
 
-View transitions can be customized with CSS. We can also instruct the browser to create separate elements for the transition by setting a view-transition-name. We can expand the first example by adding view-transition-name: count to the .count style in the Counter component. Then, in the global styles, we can define a custom animation for this view transition:
+뷰 전환은 CSS로 사용자 정의할 수 있습니다. 우리는 또한 뷰 전환 이름을 설정하여 브라우저가 전환을 위한 별도의 요소를 생성하도록 지시할 수 있습니다. 카운터 구성 요소의 .count 스타일에 view-transition-name: count를 추가하여 첫 번째 예제를 확장할 수 있습니다. 그런 다음 전역 스타일에서 이 뷰 전환을 위한 사용자 정의 애니메이션을 정의할 수 있습니다:
 
 ```css
-/* Custom transition */
+/* 사용자 정의 전환 */
 @keyframes rotate-out {
  to {
    transform: rotate(90deg);
@@ -75,23 +75,22 @@ View transitions can be customized with CSS. We can also instruct the browser to
 }
 ```
 
-It is important that the view transition animations are defined in a global style file. They cannot be defined in the component styles because the default view encapsulation will scope the styles to the component.
+뷰 전환 애니메이션이 전역 스타일 파일에 정의되어야 하는 것이 중요합니다. 구성 요소 스타일에 정의할 수 없으며, 기본 뷰 캡슐화로 인해 스타일이 구성 요소에 한정되기 때문입니다.
 
-[Try the updated “count” example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts)
+[StackBlitz에서 업데이트된 “카운트” 예시를 시도해보세요](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts)
 
-## Controlling transitions with onViewTransitionCreated
+## onViewTransitionCreated로 전환 제어하기
 
-The `withViewTransitions` router feature can also be called with an options object that includes an `onViewTransitionCreated` callback. This callback is run in an [injection context](/guide/di/dependency-injection-context#run-within-an-injection-context) and receives a [ViewTransitionInfo](/api/router/ViewTransitionInfo) object that includes the `ViewTransition` returned from `startViewTransition`, as well as the `ActivatedRouteSnapshot` that the navigation is transitioning from and the new one that it is transitioning to.
+`withViewTransitions` 라우터 기능은 `onViewTransitionCreated` 콜백을 포함하는 옵션 객체와 함께 호출될 수도 있습니다. 이 콜백은 [주입 컨텍스트](/guide/di/dependency-injection-context#run-within-an-injection-context) 내에서 실행되며, `startViewTransition`에서 반환된 `ViewTransition`과 탐색이 전환되는 `ActivatedRouteSnapshot`를 받을 수 있습니다.
 
-This callback can be used for any number of customizations. For example, you might want to skip transitions under certain conditions. We use this on the new angular.dev docs site:
+이 콜백은 여러 가지 사용자 정의를 위해 사용할 수 있습니다. 예를 들어, 특정 조건에서 전환을 건너뛰고 싶을 수 있습니다. 우리는 새로운 angular.dev 문서 사이트에서 이를 사용하고 있습니다:
 
 ```ts
 withViewTransitions({
  onViewTransitionCreated: ({transition}) => {
    const router = inject(Router);
    const targetUrl = router.getCurrentNavigation()!.finalUrl!;
-   // Skip the transition if the only thing 
-   // changing is the fragment and queryParams
+   // 유일하게 변경되는 것이 조각 및 쿼리 파라미터인 경우 전환을 건너뜁니다
    const config = { 
      paths: 'exact', 
      matrixParams: 'exact',
@@ -106,52 +105,51 @@ withViewTransitions({
 }),
 ```
 
-In this code snippet, we create a `UrlTree` from the `ActivatedRouteSnapshot` the navigation is going to. We then check with the Router to see if this `UrlTree` is already active, ignoring any differences in the fragment or query parameters. If it is already active, we call skipTransition which will skip the animation portion of the view transition. This is the case when clicking on an anchor link that will only scroll to another location in the same document.
+이 코드 스니펫에서 탐색할 `ActivatedRouteSnapshot`에서 `UrlTree`를 생성합니다. 그런 다음 조각이나 쿼리 매개변수에서의 차이를 무시하고 이 `UrlTree`가 이미 활성화되어 있는지 Router에 확인합니다. 이미 활성화되어 있다면 skipTransition을 호출하여 뷰 전환의 애니메이션 부분을 건너뜁니다. 동일한 문서 내에서 다른 위치로 스크롤하는 앵커 링크를 클릭할 때의 경우입니다.
 
-## Examples from the Chrome explainer adapted to Angular
+## Angular에 맞게 조정된 Chrome 설명서의 사례
 
-We’ve recreated some of the great examples from the Chrome Team in Angular for you to explore.
+우리는 Chrome 팀의 훌륭한 사례 중 일부를 Angular로 재구성했습니다. 탐색해보세요.
 
-### Transitioning elements don’t need to be the same DOM element
+### 전환하는 요소는 동일한 DOM 요소일 필요가 없습니다
 
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning_elements_dont_need_to_be_the_same_dom_element)
-* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-dh8npr?file=src%2Fmain.ts)
+* [Chrome 설명서](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning_elements_dont_need_to_be_the_same_dom_element)
+* [StackBlitz의 Angular 예제](https://stackblitz.com/edit/stackblitz-starters-dh8npr?file=src%2Fmain.ts)
 
-### Custom entry and exit animations
+### 사용자 정의 진입 및 퇴장 애니메이션
 
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#custom_entry_and_exit_transitions)
-* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-8kly3o)
+* [Chrome 설명서](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#custom_entry_and_exit_transitions)
+* [StackBlitz의 Angular 예제](https://stackblitz.com/edit/stackblitz-starters-8kly3o)
 
-### Async DOM updates and waiting for content
+### 비동기 DOM 업데이트 및 콘텐츠 대기
 
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#async_dom_updates_and_waiting_for_content)
+* [Chrome 설명서](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#async_dom_updates_and_waiting_for_content)
 
-> During this time, the page is frozen, so delays here should be kept to a minimum…in some cases it’s better to avoid the delay altogether, and use the content you already have.
+> 이 시간 동안 페이지가 멈추므로 여기서의 지연은 최소화해야 합니다…경우에 따라 지연을 전혀 피하고 현재 소유하고 있는 콘텐츠를 사용하는 것이 더 좋습니다.
 
-The view transition feature in the Angular router does not provide a way to delay the animation. For the moment, our stance is that it’s always better to use the content you have rather than making the page non-interactive for any additional amount of time.
+Angular 라우터의 뷰 전환 기능은 애니메이션 지연 방법을 제공하지 않습니다. 현재로서는 사용 가능한 콘텐츠를 사용하는 것이 페이지를 추가 시간 동안 비대화형으로 만드는 것보다 항상 더 나은 입장입니다.
 
-### Handle multiple view transition styles with view transition types
+### 뷰 전환 유형으로 여러 뷰 전환 스타일 제어하기
 
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types)
-* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-vxzcam)
+* [Chrome 설명서](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types)
+* [StackBlitz의 Angular 예제](https://stackblitz.com/edit/stackblitz-starters-vxzcam)
 
-### Handle multiple view transition styles with a class name on the view transition root (deprecated)
+### 뷰 전환 루트의 클래스 이름으로 여러 뷰 전환 스타일 처리하기 (사용 중단 예정)
 
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#changing-on-navigation-type)
-* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-nmnzzg?file=src%2Fmain.ts)
+* [Chrome 설명서](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#changing-on-navigation-type)
+* [StackBlitz의 Angular 예제](https://stackblitz.com/edit/stackblitz-starters-nmnzzg?file=src%2Fmain.ts)
 
-### Transitioning without freezing other animations
+### 다른 애니메이션을 멈추지 않고 전환하기
 
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning-without-freezing)
-* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-76kgww)
+* [Chrome 설명서](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning-without-freezing)
+* [StackBlitz의 Angular 예제](https://stackblitz.com/edit/stackblitz-starters-76kgww)
 
-### Animating with Javascript
+### 자바스크립트로 애니메이션 만들기
 
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#animating-with-javascript)
-* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-cklnkm)
+* [Chrome 설명서](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#animating-with-javascript)
+* [StackBlitz의 Angular 예제](https://stackblitz.com/edit/stackblitz-starters-cklnkm)
 
-## Native View Transitions Alternative
+## 기본 View Transitions 대안
 
-Animating the transition between routes can also be done with the `@angular/animations` package. 
-The animation [triggers and transitions](/guide/animations/transition-and-triggers)
-can be derived from the router state, such as the current URL or `ActivatedRoute`.
+경로 간의 전환 애니메이션은 `@angular/animations` 패키지를 사용하여 수행할 수도 있습니다. 
+애니메이션 [트리거 및 전환](/guide/animations/transition-and-triggers)은 현재 URL이나 `ActivatedRoute`와 같은 라우터 상태에서 파생될 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/animations/transition-and-triggers.md b/adev/src/content/guide/animations/transition-and-triggers.md
index e150410e360b..180c51ec67e0 100644
--- a/adev/src/content/guide/animations/transition-and-triggers.md
+++ b/adev/src/content/guide/animations/transition-and-triggers.md
@@ -1,301 +1,260 @@
-# Animation transitions and triggers
+# 애니메이션 전환 및 트리거
 
-This guide goes into depth on special transition states such as the `*` wildcard and `void`. It shows how these special states are used for elements entering and leaving a view.
-This section also explores multiple animation triggers, animation callbacks, and sequence-based animation using keyframes.
+이 가이드는 `*` 와일드카드 및 `void`와 같은 특별한 전환 상태에 대해 깊이 설명합니다. 이 특별한 상태들이 요소가 뷰에 들어가고 나갈 때 어떻게 사용되는지를 보여줍니다. 이 섹션에서는 여러 애니메이션 트리거, 애니메이션 콜백 및 키프레임을 사용한 시퀀스 기반 애니메이션도 탐구합니다.
 
-## Predefined states and wildcard matching
+## 미리 정의된 상태 및 와일드카드 일치
 
-In Angular, transition states can be defined explicitly through the [`state()`](api/animations/state) function, or using the predefined `*` wildcard and `void` states.
+Angular에서 전환 상태는 [`state()`](api/animations/state) 함수를 통해 명시적으로 정의하거나 미리 정의된 `*` 와일드카드 및 `void` 상태를 사용할 수 있습니다.
 
-### Wildcard state
+### 와일드카드 상태
 
-An asterisk `*` or *wildcard* matches any animation state.
-This is useful for defining transitions that apply regardless of the HTML element's start or end state.
+별표 `*` 또는 *와일드카드*는 모든 애니메이션 상태와 일치합니다. 이는 HTML 요소의 시작 또는 종료 상태에 관계없이 적용되는 전환을 정의하는 데 유용합니다.
 
-For example, a transition of `open => *` applies when the element's state changes from open to anything else.
+예를 들어 `open => *`의 전환은 요소의 상태가 열림에서 다른 어떤 것으로 변경될 때 적용됩니다.
 
-<img alt="wildcard state expressions" src="assets/images/guide/animations/wildcard-state-500.png">
+<img alt="와일드카드 상태 표현식" src="assets/images/guide/animations/wildcard-state-500.png">
 
-The following is another code sample using the wildcard state together with the previous example using the `open` and `closed` states.
-Instead of defining each state-to-state transition pair, any transition to `closed` takes 1 second, and any transition to `open` takes 0.5 seconds.
+다음은 와일드카드 상태를 사용한 또 다른 코드 샘플로, 이전 예제의 `open`과 `closed` 상태의 사용과 함께 합니다. 각 상태 간의 전환 쌍을 정의하는 대신, `closed`로의 모든 전환은 1초가 걸리고, `open`으로의 모든 전환은 0.5초가 걸립니다.
 
-This allows the addition of new states without having to include separate transitions for each one.
+이렇게 하면 각 상태에 대해 별도의 전환을 포함하지 않고도 새로운 상태를 추가할 수 있습니다.
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-wildcard1"/>
 
-Use a double arrow syntax to specify state-to-state transitions in both directions.
+상태-상태 전환을 양방향으로 지정하기 위해 더블 화살표 구문을 사용하세요.
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-wildcard2"/>
 
-### Use wildcard state with multiple transition states
+### 여러 전환 상태와 함께 와일드카드 상태 사용
 
-In the two-state button example, the wildcard isn't that useful because there are only two possible states, `open` and `closed`.
-In general, use wildcard states when an element has multiple potential states that it can change to.
-If the button can change from `open` to either `closed` or something like `inProgress`, using a wildcard state could reduce the amount of coding needed.
+이중 상태 버튼 예제에서, 와일드카드의 유용성은 `open`과 `closed`의 두 가지 가능한 상태만 있기 때문에 그다지 크지 않습니다. 일반적으로 요소가 변경할 수 있는 여러 잠재적 상태가 있을 때 와일드카드 상태를 사용합니다. 버튼이 `open`에서 `closed` 또는 `inProgress`와 같은 것으로 변경될 수 있다면, 와일드카드 상태를 사용하면 필요한 코드 양을 줄일 수 있습니다.
 
-<img alt="wildcard state with 3 states" src="assets/images/guide/animations/wildcard-3-states.png">
+<img alt="3개 상태의 와일드카드 상태" src="assets/images/guide/animations/wildcard-3-states.png">
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-transition"/>
 
-The `* => *` transition applies when any change between two states takes place.
+`* => *` 전환은 두 상태 간의 변화가 발생할 때 적용됩니다.
 
-Transitions are matched in the order in which they are defined.
-Thus, you can apply other transitions on top of the `* => *` transition.
-For example, define style changes or animations that would apply just to `open => closed`, then use `* => *` as a fallback for state pairings that aren't otherwise called out.
+전환은 정의된 순서에 따라 일치합니다. 따라서 `* => *` 전환 위에 다른 전환을 적용할 수 있습니다. 예를 들어, `open => closed`에만 적용될 스타일 변경 또는 애니메이션을 정의한 다음, 상태 쌍이 다른 방식으로 호출되지 않을 경우 `* => *`을 폴백으로 사용합니다.
 
-To do this, list the more specific transitions *before* `* => *`.
+이를 하려면 보다 구체적인 전환을 `* => *` 이전에 나열합니다.
 
-### Use wildcards with styles
+### 스타일과 함께 와일드카드 사용
 
-Use the wildcard `*` with a style to tell the animation to use whatever the current style value is, and animate with that.
-Wildcard is a fallback value that's used if the state being animated isn't declared within the trigger.
+와일드카드 `*`를 스타일과 함께 사용하여 애니메이션이 현재 스타일 값을 사용하는지 알려주고 그 값으로 애니메이션을 진행합니다. 와일드카드는 애니메이션이 선언되지 않은 상태에서 사용되는 폴백 값입니다.
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition4"/>
 
-### Void state
+### Void 상태
 
-Use the `void` state to configure transitions for an element that is entering or leaving a page.
-See [Animating entering and leaving a view](guide/animations/transition-and-triggers#aliases-enter-and-leave).
+`void` 상태를 사용하여 페이지에 들어가거나 나가는 요소의 전환을 구성합니다. [뷰에 들어가거나 나가는 애니메이션](guide/animations/transition-and-triggers#aliases-enter-and-leave)을 참조하세요.
 
-### Combine wildcard and void states
+### 와일드카드 및 void 상태 결합
 
-Combine wildcard and void states in a transition to trigger animations that enter and leave the page:
+와일드카드 및 void 상태를 전환에 결합하여 페이지에 들어오고 나가는 애니메이션을 트리거합니다:
 
-* A transition of `* => void` applies when the element leaves a view, regardless of what state it was in before it left
-* A transition of `void => *` applies when the element enters a view, regardless of what state it assumes when entering
-* The wildcard state `*` matches to *any* state, including `void`
+* `* => void`의 전환은 요소가 뷰를 떠날 때 적용되며, 떠나기 전에 어떤 상태에 있었는지는 관계가 없습니다.
+* `void => *`의 전환은 요소가 뷰에 들어갈 때 적용되며, 들어갈 때 어떤 상태를 갖는지는 관계가 없습니다.
+* 와일드카드 상태 `*`는 `void`를 포함한 *모든* 상태와 일치합니다.
 
-## Animate entering and leaving a view
+## 뷰에 들어가고 나가는 애니메이션
 
-This section shows how to animate elements entering or leaving a page.
+이 섹션에서는 페이지에 들어가거나 나가는 요소를 애니메이션하는 방법을 보여줍니다.
 
-Add a new behavior:
+새로운 동작 추가:
 
-* When you add a hero to the list of heroes, it appears to fly onto the page from the left
-* When you remove a hero from the list, it appears to fly out to the right
+* 히어로를 히어로 목록에 추가하면, 왼쪽에서 페이지로 날아오는 것처럼 나타납니다.
+* 목록에서 히어로를 제거하면, 오른쪽으로 날아가는 것처럼 나타납니다.
 
 <docs-code header="src/app/hero-list-enter-leave.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts" visibleRegion="animationdef"/>
 
-In the preceding code, you applied the `void` state when the HTML element isn't attached to a view.
+앞선 코드에서는 HTML 요소가 뷰에 첨부되지 않을 때 `void` 상태를 적용했습니다.
 
-## Aliases :enter and :leave
+## 별칭 :enter 및 :leave
 
-`:enter` and `:leave` are aliases for the `void => *` and `* => void` transitions.
-These aliases are used by several animation functions.
+`:enter` 및 `:leave`는 `void => *` 및 `* => void` 전환의 별칭입니다. 이 별칭은 여러 애니메이션 함수에 의해 사용됩니다.
 
 <docs-code hideCopy language="typescript">
 
-transition ( ':enter', [ … ] );  // alias for void => *
-transition ( ':leave', [ … ] );  // alias for * => void
+transition ( ':enter', [ … ] );  // void => *의 별칭
+transition ( ':leave', [ … ] );  // * => void의 별칭
 
 </docs-code>
 
-It's harder to target an element that is entering a view because it isn't in the DOM yet.
-Use the aliases `:enter` and `:leave` to target HTML elements that are inserted or removed from a view.
+뷰에 들어가는 요소를 타겟으로 하는 것이 더 어렵습니다. 왜냐하면 그 요소는 아직 DOM에 없기 때문입니다. HTML 요소를 타겟으로 하려면 뷰에 삽입되거나 제거될 때 `:enter` 및 `:leave` 별칭을 사용하세요.
 
-### Use `*ngIf` and `*ngFor` with :enter and :leave
+### :enter 및 :leave와 함께 `*ngIf` 및 `*ngFor` 사용
 
-The `:enter` transition runs when any `*ngIf` or `*ngFor` views are placed on the page, and `:leave` runs when those views are removed from the page.
+`:enter` 전환은 모든 `*ngIf` 또는 `*ngFor` 뷰가 페이지에 배치될 때 실행되며, `:leave`는 해당 뷰가 페이지에서 제거될 때 실행됩니다.
 
-IMPORTANT: Entering/leaving behaviors can sometime be confusing.
-As a rule of thumb consider that any element being added to the DOM by Angular passes via the `:enter` transition. Only elements being directly removed from the DOM by Angular pass via the `:leave` transition. For example, an element's view is removed from the DOM because its parent is being removed from the DOM.
+중요: 들어가거나 나가는 동작은 때때로 혼란을 줄 수 있습니다. 일반적으로 Angular에 의해 DOM에 추가되는 모든 요소는 `:enter` 전환을 거치게 됩니다. Angular에 의해 DOM에서 직접 제거되는 요소만이 `:leave` 전환을 거치게 됩니다. 예를 들어, 요소의 뷰가 DOM에서 제거되는 것은 그 부모가 DOM에서 제거되기 때문입니다.
 
-This example has a special trigger for the enter and leave animation called `myInsertRemoveTrigger`.
-The HTML template contains the following code.
+이 예제에는 `myInsertRemoveTrigger`라는 이름의 들어가고 나가는 애니메이션을 위한 특별한 트리거가 있습니다. HTML 템플릿은 다음 코드를 포함합니다.
 
 <docs-code header="src/app/insert-remove.component.html" path="adev/src/content/examples/animations/src/app/insert-remove.component.html" visibleRegion="insert-remove"/>
 
-In the component file, the `:enter` transition sets an initial opacity of 0. It then animates it to change that opacity to 1 as the element is inserted into the view.
+컴포넌트 파일에서 `:enter` 전환은 초기 불투명도를 0으로 설정합니다. 그런 다음 요소가 뷰에 삽입될 때 불투명도를 1로 변경되도록 애니메이션을 통해 진행합니다.
 
 <docs-code header="src/app/insert-remove.component.ts" path="adev/src/content/examples/animations/src/app/insert-remove.component.ts" visibleRegion="enter-leave-trigger"/>
 
-Note that this example doesn't need to use [`state()`](api/animations/state).
+이 예제는 [`state()`](api/animations/state)를 사용할 필요가 없습니다.
 
-## Transition :increment and :decrement
+## 전환 :increment 및 :decrement
 
-The `transition()` function takes other selector values, `:increment` and `:decrement`.
-Use these to kick off a transition when a numeric value has increased or decreased in value.
+`transition()` 함수는 다른 선택자 값인 `:increment` 및 `:decrement`를 사용할 수 있습니다. 수치 값이 증가하거나 감소할 때 전환을 시작하는 데 사용합니다.
 
-HELPFUL: The following example uses `query()` and `stagger()` methods.
-For more information on these methods, see the [complex sequences](guide/animations/complex-sequences) page.
+도움이 되는 팁: 다음 예제는 `query()` 및 `stagger()` 메소드를 사용합니다. 이러한 메소드에 대한 자세한 정보는 [복잡한 시퀀스](guide/animations/complex-sequences) 페이지를 참조하세요.
 
 <docs-code header="src/app/hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" visibleRegion="increment"/>
 
-## Boolean values in transitions
+## 전환에서의 부울 값
 
-If a trigger contains a Boolean value as a binding value, then this value can be matched using a `transition()` expression that compares `true` and `false`, or `1` and `0`.
+트리거에 부울 값이 바인딩 값으로 포함되어 있는 경우, 이 값은 `transition()` 표현식을 사용하여 `true`와 `false` 또는 `1`과 `0`을 비교함으로써 일치시킬 수 있습니다.
 
 <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.2.html" visibleRegion="trigger-boolean"/>
 
-In the code snippet above, the HTML template binds a `<div>` element to a trigger named `openClose` with a status expression of `isOpen`, and with possible values of `true` and `false`.
-This pattern is an alternative to the practice of creating two named states like `open` and `close`.
+위 코드 조각에서 HTML 템플릿은 `<div>` 요소를 `isOpen`의 상태 표현식으로 `openClose`라는 트리거에 바인딩하고 `true` 및 `false`의 가능한 값을 가집니다. 이 패턴은 `open` 및 `close`와 같은 이름이 지정된 두 개의 상태를 생성하는 관행에 대한 대안입니다.
 
-Inside the `@Component` metadata under the `animations:` property, when the state evaluates to `true`, the associated HTML element's height is a wildcard style or default.
-In this case, the animation uses whatever height the element already had before the animation started.
-When the element is `closed`, the element gets animated to a height of 0, which makes it invisible.
+`@Component` 메타데이터의 `animations:` 속성 내에서 상태가 `true`로 평가되면, 관련된 HTML 요소의 높이는 와일드카드 스타일 또는 기본값이 됩니다. 이 경우 애니메이션은 애니메이션 시작 전 요소가 이미 가지고 있던 높이를 사용합니다. 요소가 `closed`일 때, 해당 요소는 높이가 0으로 애니메이션되어 보이지 않게 됩니다.
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.2.ts" visibleRegion="trigger-boolean"/>
 
-## Multiple animation triggers
+## 여러 애니메이션 트리거
 
-You can define more than one animation trigger for a component.
-Attach animation triggers to different elements, and the parent-child relationships among the elements affect how and when the animations run.
+컴포넌트에 대해 하나 이상의 애니메이션 트리거를 정의할 수 있습니다. 애니메이션 트리거를 서로 다른 요소에 연결하면 요소 간의 부모-자식 관계가 애니메이션이 실행되는 방식과 시기에 영향을 미칩니다.
 
-### Parent-child animations
+### 부모-자식 애니메이션
 
-Each time an animation is triggered in Angular, the parent animation always gets priority and child animations are blocked.
-For a child animation to run, the parent animation must query each of the elements containing child animations. It then lets the animations run using the [`animateChild()`](api/animations/animateChild) function.
+Angular에서 애니메이션이 트리거될 때마다 부모 애니메이션은 항상 우선 순위를 가지며 자식 애니메이션은 차단됩니다. 자식 애니메이션이 실행되려면 부모 애니메이션이 자식 애니메이션을 포함하는 각 요소를 쿼리해야 합니다. 그 후 [`animateChild()`](api/animations/animateChild) 함수를 사용하여 애니메이션을 실행할 수 있습니다.
 
-#### Disable an animation on an HTML element
+#### HTML 요소에서 애니메이션 비활성화
 
-A special animation control binding called `@.disabled` can be placed on an HTML element to turn off animations on that element, as well as any nested elements.
-When true, the `@.disabled` binding prevents all animations from rendering.
+`@.disabled`라는 특별한 애니메이션 제어 바인딩을 HTML 요소에 배치하여 해당 요소와 모든 중첩 요소의 애니메이션을 끌 수 있습니다. 참일 경우 `@.disabled` 바인딩은 모든 애니메이션을 렌더링하는 것을 방지합니다.
 
-The following code sample shows how to use this feature.
+다음 코드 샘플은 이 기능을 사용하는 방법을 보여줍니다.
 
 <docs-code-multifile>
     <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.4.html" visibleRegion="toggle-animation"/>
     <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.4.ts" visibleRegion="toggle-animation" language="typescript"/>
 </docs-code-multifile>
 
-When the `@.disabled` binding is true, the `@childAnimation` trigger doesn't kick off.
+`@.disabled` 바인딩이 참일 때, `@childAnimation` 트리거는 작동하지 않습니다. 
 
-When an element within an HTML template has animations turned off using the `@.disabled` host binding, animations are turned off on all inner elements as well.
-You can't selectively turn off multiple animations on a single element.<!-- vale off -->
+HTML 템플릿 내에서 요소에 애니메이션을 끄려면 `@.disabled` 호스트 바인딩을 사용해야 하며, 애니메이션은 모든 하위 요소에서도 꺼집니다. 단일 요소에서 여러 애니메이션을 선택적으로 끌 수는 없습니다. 
 
-A selective child animations can still be run on a disabled parent in one of the following ways:
+비활성화된 부모에서 선택적으로 자식 애니메이션을 실행할 수 있는 방법은 다음과 같습니다:
 
-* A parent animation can use the [`query()`](api/animations/query) function to collect inner elements located in disabled areas of the HTML template.
-    Those elements can still animate.
-<!-- vale on -->
+* 부모 애니메이션은 `query()`([api/animations/query](api/animations/query)) 함수를 사용하여 HTML 템플릿의 비활성 영역에 위치한 내부 요소를 수집할 수 있습니다. 그런 요소들은 여전히 애니메이션될 수 있습니다.
+* 부모에 의해 자식 애니메이션이 쿼리되고 후에 `animateChild()` 함수로 애니메이션될 수 있습니다.
 
-* A child animation can be queried by a parent and then later animated with the `animateChild()` function
+#### 모든 애니메이션 비활성화
 
-#### Disable all animations
-
-To turn off all animations for an Angular application, place the `@.disabled` host binding on the topmost Angular component.
+Angular 애플리케이션에 대해 모든 애니메이션을 끄려면 가장 상위 Angular 컴포넌트에 `@.disabled` 호스트 바인딩을 배치하십시오.
 
 <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="toggle-app-animations"/>
 
-HELPFUL: Disabling animations application-wide is useful during end-to-end \(E2E\) testing.
+도움이 되는 팁: 애플리케이션 전역에서 애니메이션을 비활성화하는 것은 종단 간 (E2E) 테스트 중에 유용합니다.
 
-## Animation callbacks
+## 애니메이션 콜백
 
-The animation `trigger()` function emits *callbacks* when it starts and when it finishes.
-The following example features a component that contains an `openClose` trigger.
+애니메이션 `trigger()` 함수는 시작할 때와 끝낼 때 *콜백*을 발생시킵니다. 다음 예제는 `openClose` 트리거를 포함하는 컴포넌트를 보여줍니다.
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="events1"/>
 
-In the HTML template, the animation event is passed back via `$event`, as `@triggerName.start` and `@triggerName.done`, where `triggerName` is the name of the trigger being used.
-In this example, the trigger `openClose` appears as follows.
+HTML 템플릿에서 애니메이션 이벤트는 `$event`를 통해 반환되며, `@triggerName.start` 및 `@triggerName.done`으로 전달됩니다. 여기서 `triggerName`은 사용되는 트리거의 이름입니다. 이 예제에서 `openClose` 트리거는 다음과 같이 나타납니다.
 
 <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.3.html" visibleRegion="callbacks"/>
 
-A potential use for animation callbacks could be to cover for a slow API call, such as a database lookup.
-For example, an **InProgress** button can be set up to have its own looping animation while the backend system operation finishes.
+애니메이션 콜백의 잠재적인 용도는 느린 API 호출, 예를 들어 데이터베이스 조회를 커버하는 것입니다. 예를 들어, **InProgress** 버튼은 백엔드 시스템 작업이 완료될 때까지 자체 루프 애니메이션을 가질 수 있습니다.
 
-Another animation can be called when the current animation finishes.
-For example, the button goes from the `inProgress` state to the `closed` state when the API call is completed.
+현재 애니메이션이 완료될 때 다른 애니메이션을 호출할 수 있습니다. 예를 들어, API 호출이 완료되면 버튼이 `inProgress` 상태에서 `closed` 상태로 전환됩니다.
 
-An animation can influence an end user to *perceive* the operation as faster, even when it is not.
+애니메이션은 최종 사용자가 작업을 더 빠르게 *인식하도록* 영향을 줄 수 있습니다. 비록 실제로는 그렇지 않을지라도.
 
-Callbacks can serve as a debugging tool, for example in conjunction with `console.warn()` to view the application's progress in a browser's Developer JavaScript Console.
-The following code snippet creates console log output for the original example, a button with the two states of `open` and `closed`.
+콜백은 디버깅 도구로 사용될 수 있으며, 예를 들어, `console.warn()`와 함께 사용하여 브라우저의 개발자 JavaScript 콘솔에서 애플리케이션의 진행 상황을 볼 수 있습니다. 다음 코드 조각은 원래 예제인 `open` 및 `closed` 두 상태를 가진 버튼에 대한 콘솔 로그 출력을 생성합니다.
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="events"/>
 
-## Keyframes
+## 키프레임
 
-To create an animation with multiple steps run in sequence, use *keyframes*.
+여러 단계로 순차적으로 실행되는 애니메이션을 생성하려면 *키프레임*을 사용하십시오.
 
-Angular's `keyframe()` function allows several style changes within a single timing segment.
-For example, the button, instead of fading, could change color several times over a single 2-second time span.
+Angular의 `keyframe()` 함수는 단일 타이밍 세그먼트 내에서 여러 스타일 변경을 허용합니다. 예를 들어 버튼이 서서히 사라지는 대신 한 개의 2초 시간 동안 여러 번 색상을 변경할 수 있습니다.
 
-<img alt="keyframes" src="assets/images/guide/animations/keyframes-500.png">
+<img alt="키프레임" src="assets/images/guide/animations/keyframes-500.png">
 
-The code for this color change might look like this.
+이 색상 변경에 대한 코드는 다음과 같을 수 있습니다.
 
 <docs-code header="src/app/status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" visibleRegion="keyframes"/>
 
-### Offset
+### 오프셋
 
-Keyframes include an `offset` that defines the point in the animation where each style change occurs.
-Offsets are relative measures from zero to one, marking the beginning and end of the animation. They should be applied to each of the keyframe steps if used at least once.
+키프레임은 각 스타일 변경이 발생하는 시점을 정의하는 `offset`을 포함합니다. 오프셋은 영에서 1까지의 상대적 조치로, 애니메이션의 시작과 끝을 표시합니다. 사용된 경우 각 키프레임 단계에 적용해야 합니다.
 
-Defining offsets for keyframes is optional.
-If you omit them, evenly spaced offsets are automatically assigned.
-For example, three keyframes without predefined offsets receive offsets of 0, 0.5, and 1.
-Specifying an offset of 0.8 for the middle transition in the preceding example might look like this.
+키프레임에 대한 오프셋을 정의하는 것은 선택 사항입니다. 생략할 경우 균등하게 간격이 배치된 오프셋이 자동으로 할당됩니다. 예를 들어, 사전 정의된 오프셋이 없는 세 개의 키프레임은 0, 0.5, 1의 오프셋을 받습니다. 이전 예에서 중간 전환에 대한 오프셋으로 0.8을 지정할 수 있습니다.
 
-<img alt="keyframes with offset" src="assets/images/guide/animations/keyframes-offset-500.png">
+<img alt="오프셋이 있는 키프레임" src="assets/images/guide/animations/keyframes-offset-500.png">
 
-The code with offsets specified would be as follows.
+오프셋이 지정된 코드는 다음과 같습니다.
 
 <docs-code header="src/app/status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" visibleRegion="keyframesWithOffsets"/>
 
-You can combine keyframes with `duration`, `delay`, and `easing` within a single animation.
+`duration`, `delay`, `easing`과 함께 해주며 키프레임을 단일 애니메이션 내에서 조합할 수 있습니다.
 
-### Keyframes with a pulsation
+### 맥박이 있는 키프레임
 
-Use keyframes to create a pulse effect in your animations by defining styles at specific offset throughout the animation.
+애니메이션 전반에 걸쳐 특정 오프셋에서 스타일을 정의하여 애니메이션에 맥박 효과를 생성하려면 키프레임을 사용하세요.
 
-Here's an example of using keyframes to create a pulse effect:
+다음은 키프레임을 사용하여 맥박 효과를 생성하는 예입니다:
 
-* The original `open` and `closed` states, with the original changes in height, color, and opacity, occurring over a timeframe of 1 second
-* A keyframes sequence inserted in the middle that causes the button to appear to pulsate irregularly over the course of that same 1 second timeframe
+* 원래의 `open` 및 `closed` 상태, 원래 높이, 색상 및 불투명도의 변화가 1초의 시간 범위에서 발생합니다.
+* 그 중간에 삽입된 키프레임 시퀀스가 버튼이 같은 1초의 시간 범위 내에서 불규칙하게 맥박치는 것처럼 보이게 합니다.
 
-<img alt="keyframes with irregular pulsation" src="assets/images/guide/animations/keyframes-pulsation.png">
+<img alt="불규칙한 맥박이 있는 키프레임" src="assets/images/guide/animations/keyframes-pulsation.png">
 
-The code snippet for this animation might look like this.
+이 애니메이션에 대한 코드 조각은 다음과 같을 수 있습니다.
 
 <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.1.ts" visibleRegion="trigger"/>
 
-### Animatable properties and units
+### 애니메이션 가능한 속성과 단위
 
-Angular animations support builds on top of web animations, so you can animate any property that the browser considers animatable.
-This includes positions, sizes, transforms, colors, borders, and more.
-The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1) page.
+Angular 애니메이션은 웹 애니메이션 위에서 구성되므로 브라우저가 애니메이션 똑바로 고려하는 모든 속성을 애니메이션할 수 있습니다. 여기에는 위치, 크기, 변환, 색상, 테두리 등이 포함됩니다. W3C는 [CSS 전환](https://www.w3.org/TR/css-transitions-1) 페이지에서 애니메이션 가능한 속성의 목록을 유지합니다.
 
-For properties with a numeric value, define a unit by providing the value as a string, in quotes, with the appropriate suffix:
+수치 값을 가지는 속성의 경우, 적절한 접미사를 포함한 문자열로 값을 제공하여 단위를 정의합니다:
 
-* 50 pixels:
+* 50픽셀:
     `'50px'`
 
-* Relative font size:
+* 상대적 글꼴 크기:
     `'3em'`
 
-* Percentage:
+* 비율:
     `'100%'`
 
-You can also provide the value as a number. In such cases Angular assumes a default unit of pixels, or `px`.
-Expressing 50 pixels as `50` is the same as saying `'50px'`.
+숫자로 값을 제공할 수도 있습니다. 이 경우 Angular는 기본 단위를 픽셀, 즉 `px`로 간주합니다. 50픽셀을 `50`으로 표현하는 것은 `'50px'`라고 말하는 것과 같습니다.
 
-HELPFUL: The string `"50"` would instead not be considered valid\).
+도움이 되는 팁: 문자열 `"50"`은 유효한 것으로 간주되지 않습니다.
 
-### Automatic property calculation with wildcards
+### 와일드카드를 통한 자동 속성 계산
 
-Sometimes, the value of a dimensional style property isn't known until runtime.
-For example, elements often have widths and heights that depend on their content or the screen size.
-These properties are often challenging to animate using CSS.
+때때로, 차원 스타일 속성의 값은 런타임까지 알려지지 않을 수 있습니다. 예를 들어, 요소는 종종 내용이나 화면 크기에 따라 너비와 높이가 달라집니다. 이러한 속성은 CSS를 사용하여 애니메이션하기가 종종 어렵습니다.
 
-In these cases, you can use a special wildcard `*` property value under `style()`. The value of that particular style property is computed at runtime and then plugged into the animation.
+이 경우 `style()` 아래에서 특별한 와일드카드 `*` 속성 값을 사용할 수 있습니다. 해당 스타일 속성의 값은 런타임에 계산되어 애니메이션에 연결됩니다.
 
-The following example has a trigger called `shrinkOut`, used when an HTML element leaves the page.
-The animation takes whatever height the element has before it leaves, and animates from that height to zero.
+다음 예제에는 HTML 요소가 페이지를 떠날 때 사용되는 `shrinkOut`라는 트리거가 있습니다. 애니메이션은 요소가 떠나기 전에 갖고 있던 높이를 가져오고, 그 높이에서 0으로 애니메이션됩니다.
 
 <docs-code header="src/app/hero-list-auto.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-auto.component.ts" visibleRegion="auto-calc"/>
 
-### Keyframes summary
+### 키프레임 요약
 
-The `keyframes()` function in Angular allows you to specify multiple interim styles within a single transition. An optional `offset` can be used to define the point in the animation where each style change should occur.
+Angular의 `keyframes()` 함수는 단일 전환 내에서 여러 중간 스타일을 지정할 수 있도록 합니다. 각 스타일 변경이 발생해야 할 애니메이션 내의 시점을 정의하기 위해 선택적 `offset`을 사용할 수 있습니다.
 
-## More on Angular animations
+## Angular 애니메이션에 대한 더 많은 정보
 
-You might also be interested in the following:
+다음 항목에도 관심이 있을 수 있습니다:
 
 <docs-pill-row>
-  <docs-pill href="guide/animations" title="Introduction to Angular animations"/>
-  <docs-pill href="guide/animations/complex-sequences" title="Complex animation sequences"/>
-  <docs-pill href="guide/animations/reusable-animations" title="Reusable animations"/>
-  <docs-pill href="guide/animations/route-animations" title="Route transition animations"/>
-</docs-pill-row>
+  <docs-pill href="guide/animations" title="Angular 애니메이션 소개"/>
+  <docs-pill href="guide/animations/complex-sequences" title="복잡한 애니메이션 시퀀스"/>
+  <docs-pill href="guide/animations/reusable-animations" title="재사용 가능한 애니메이션"/>
+  <docs-pill href="guide/animations/route-animations" title="경로 전환 애니메이션"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/guide/components/advanced-configuration.md b/adev/src/content/guide/components/advanced-configuration.md
index 1c4e5d59f557..1214db113667 100644
--- a/adev/src/content/guide/components/advanced-configuration.md
+++ b/adev/src/content/guide/components/advanced-configuration.md
@@ -1,38 +1,28 @@
-# Advanced component configuration
+# 고급 구성 요소 설정
 
-Tip: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
+팁: 이 가이드는 이미 [필수 가이드](essentials)를 읽었다고 가정합니다. Angular에 익숙하지 않다면 먼저 그것을 읽으세요.
 
 ## ChangeDetectionStrategy
 
-The `@Component` decorator accepts a `changeDetection` option that controls the component's **change
-detection mode**. There are two change detection mode options.
+`@Component` 데코레이터는 구성 요소의 **변경 감지 모드**를 제어하는 `changeDetection` 옵션을 받습니다. 변경 감지 모드 옵션은 두 가지가 있습니다.
 
-**`ChangeDetectionStrategy.Default`** is, unsurprisingly, the default strategy. In this mode,
-Angular checks whether the component's DOM needs an update whenever any activity may have occurred
-application-wide. Activities that trigger this checking include user interaction, network response,
-timers, and more.
+**`ChangeDetectionStrategy.Default`**는 말할 필요도 없이 기본 전략입니다. 이 모드에서는 Angular가 응용 프로그램 전반에 어떤 활동이 발생했을 때 구성 요소의 DOM이 업데이트되어야 하는지를 확인합니다. 이 확인을 트리거하는 활동에는 사용자 상호작용, 네트워크 응답, 타이머 등이 포함됩니다.
 
-**`ChangeDetectionStrategy.OnPush`** is an optional mode that reduces the amount of checking Angular
-needs to perform. In this mode, the framework only checks if a component's DOM needs an update when:
+**`ChangeDetectionStrategy.OnPush`**는 Angular가 수행해야 하는 검사의 양을 줄이는 선택적 모드입니다. 이 모드에서는 프레임워크가 구성 요소의 DOM이 업데이트되어야 하는지를 확인할 때 다음과 같은 경우에만 확인합니다:
 
-- A component input has changes as a result of a binding in a template, or
-- An event listener in this component runs
-- The component is explicitly marked for check, via `ChangeDetectorRef.markForCheck` or something which wraps it, like `AsyncPipe`.
+- 템플릿의 바인딩 결과로 구성 요소 입력에 변경이 발생한 경우, 또는
+- 이 구성 요소의 이벤트 리스너가 실행되는 경우
+- `ChangeDetectorRef.markForCheck` 또는 `AsyncPipe`와 같이 그것을 감싸는 것을 통해 구성 요소가 명시적으로 체크하기 위해 표시된 경우.
 
-Additionally, when an OnPush component is checked, Angular _also_ checks all of its ancestor
-components, traversing upwards through the application tree.
+추가로, OnPush 구성 요소가 체크될 때 Angular는 _또한_ 애플리케이션 트리를 통해 위쪽으로 이동하면서 모든 조상 구성 요소를 체크합니다.
 
 ## PreserveWhitespaces
 
-By default, Angular removes and collapses superfluous whitespace in templates, most commonly from
-newlines and indentation. You can change this setting by explicitly setting `preserveWhitespaces` to
-`true` in a component's metadata.
+기본적으로 Angular는 템플릿에서 불필요한 공백을 제거하고 축소합니다. 일반적으로 줄 바꿈 및 들여쓰기를 제거합니다. 구성 요소의 메타데이터에서 `preserveWhitespaces`를 `true`로 명시적으로 설정하여 이 설정을 변경할 수 있습니다.
 
-## Custom element schemas
+## 사용자 정의 요소 스키마
 
-By default, Angular throws an error when it encounters an unknown HTML element. You can
-disable this behavior for a component by including `CUSTOM_ELEMENTS_SCHEMA` in the `schemas`
-property in your component metadata.
+기본적으로 Angular는 알 수 없는 HTML 요소를 만났을 때 오류를 발생시킵니다. 구성 요소 메타데이터의 `schemas` 속성에 `CUSTOM_ELEMENTS_SCHEMA`를 포함하여 이 동작을 비활성화할 수 있습니다.
 
 ```angular-ts
 import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
@@ -45,4 +35,4 @@ import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 export class ComponentWithCustomElements { }
 ```
 
-Angular does not support any other schemas at this time.
+현재 Angular는 다른 스키마를 지원하지 않습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/components/anatomy-of-components.md b/adev/src/content/guide/components/anatomy-of-components.md
index e62580997624..1558daa13944 100644
--- a/adev/src/content/guide/components/anatomy-of-components.md
+++ b/adev/src/content/guide/components/anatomy-of-components.md
@@ -1,15 +1,15 @@
-<docs-decorative-header title="Anatomy of a component" imgSrc="adev/src/assets/images/components.svg"> <!-- markdownlint-disable-line -->
+<docs-decorative-header title="구성 요소의 구조" imgSrc="adev/src/assets/images/components.svg"> <!-- markdownlint-disable-line -->
 </docs-decorative-header>
 
-Tip: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
+팁: 이 가이드는 사용자가 [필수 가이드](essentials)를 이미 읽었다고 가정합니다. Angular에 익숙하지 않다면 먼저 그것을 읽어보세요.
 
-Every component must have:
+모든 구성 요소는 다음을 가져야 합니다:
 
-* A TypeScript class with _behaviors_ such as handling user input and fetching data from a server
-* An HTML template that controls what renders into the DOM
-* A [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors) that defines how the component is used in HTML
+* 사용자 입력을 처리하고 서버에서 데이터를 가져오는 등의 _행동_을 가진 TypeScript 클래스
+* DOM에 렌더링되는 내용을 제어하는 HTML 템플릿
+* HTML에서 구성 요소가 어떻게 사용되는지 정의하는 [CSS 선택자](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors)
 
-You provide Angular-specific information for a component by adding a `@Component` [decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) on top of the TypeScript class:
+TypeScript 클래스 위에 `@Component` [데코레이터](https://www.typescriptlang.org/docs/handbook/decorators.html)를 추가하여 Angular 특정 정보를 구성 요소에 제공합니다:
 
 <docs-code language="angular-ts" highlight="[1, 2, 3, 4]">
 @Component({
@@ -19,11 +19,11 @@ You provide Angular-specific information for a component by adding a `@Component
 export class ProfilePhoto { }
 </docs-code>
 
-For full details on writing Angular templates, including data binding, event handling, and control flow, see the [Templates guide](guide/templates).
+데이터 바인딩, 이벤트 처리 및 제어 흐름을 포함하여 Angular 템플릿 작성에 대한 전체 내용은 [템플릿 가이드](guide/templates)를 참조하세요.
 
-The object passed to the `@Component` decorator is called the component's **metadata**. This includes the `selector`, `template`, and other properties described throughout this guide.
+`@Component` 데코레이터에 전달된 객체를 구성 요소의 **메타데이터**라고 합니다. 여기에는 이 가이드를 통해 설명된 `selector`, `template` 및 기타 속성이 포함됩니다.
 
-Components can optionally include a list of CSS styles that apply to that component's DOM:
+구성 요소는 해당 구성 요소의 DOM에 적용되는 CSS 스타일 목록을 선택적으로 포함할 수 있습니다:
 
 <docs-code language="angular-ts" highlight="[4]">
 @Component({
@@ -34,9 +34,9 @@ Components can optionally include a list of CSS styles that apply to that compon
 export class ProfilePhoto { }
 </docs-code>
 
-By default, a component's styles only affect elements defined in that component's template. See [Styling Components](guide/components/styling) for details on Angular's approach to styling.
+기본적으로 구성 요소의 스타일은 해당 구성 요소의 템플릿에서 정의된 요소에만 영향을 미칩니다. Angular의 스타일링 접근 방식에 대한 자세한 내용은 [구성 요소 스타일링](guide/components/styling)을 참조하세요.
 
-You can alternatively choose to write your template and styles in separate files:
+템플릿과 스타일을 별도의 파일에 작성하도록 선택할 수도 있습니다:
 
 <docs-code language="angular-ts" highlight="[3, 4]">
 @Component({
@@ -47,36 +47,35 @@ You can alternatively choose to write your template and styles in separate files
 export class ProfilePhoto { }
 </docs-code>
 
-This can help separate the concerns of _presentation_ from _behavior_ in your project. You can choose one approach for your entire project, or you decide which to use for each component.
+이는 프로젝트 내에서 _표현_과 _행동_의 우려를 분리하는 데 도움이 됩니다. 전체 프로젝트에 대해 하나의 접근 방식을 선택하거나 각 구성 요소에 사용할 방식을 결정할 수 있습니다.
 
-Both `templateUrl` and `styleUrl` are relative to the directory in which the component resides.
+`templateUrl` 및 `styleUrl`은 구성 요소가 존재하는 디렉토리에 상대적입니다.
 
-## Using components
+## 구성 요소 사용하기
 
-### Imports in the `@Component` decorator
+### `@Component` 데코레이터의 가져오기
 
-To use a component, [directive](guide/directives), or [pipe](guide/templates/pipes), you must add
-it to the `imports` array in the `@Component` decorator:
+구성 요소, [지시문](guide/directives) 또는 [파이프](guide/templates/pipes)를 사용하려면 `@Component` 데코레이터의 `imports` 배열에 추가해야 합니다:
 
 ```angular-ts
 import {ProfilePhoto} from './profile-photo';
 
 @Component({
-  // Import the `ProfilePhoto` component in
-  // order to use it in this component's template.
+  // 이 구성 요소의 템플릿에서 사용하기 위해 
+  // `ProfilePhoto` 구성 요소를 가져옵니다.
   imports: [ProfilePhoto],
   /* ... */
 })
 export class UserProfile { }
 ```
 
-By default, Angular components are *standalone*, meaning that you can directly add them to the `imports` array of other components. Components created with an earlier version of Angular may instead specify `standalone: false` in their `@Component` decorator. For these components, you instead import the `NgModule` in which the component is defined. See the full [`NgModule` guide](guide/ngmodules) for details.
+기본적으로 Angular 구성 요소는 *독립형*입니다. 즉, 다른 구성 요소의 `imports` 배열에 직접 추가할 수 있습니다. 이전 버전의 Angular로 생성된 구성 요소는 대신 `@Component` 데코레이터에 `standalone: false`를 지정할 수 있습니다. 이러한 구성 요소의 경우 구성 요소가 정의된 `NgModule`을 가져와야 합니다. 자세한 내용은 전체 [`NgModule` 가이드](guide/ngmodules)를 참조하세요.
 
-Important: In Angular versions before 19.0.0, the `standalone` option defaults to `false`.
+중요: Angular 19.0.0 이전 버전에서는 `standalone` 옵션이 기본적으로 `false`입니다.
 
-### Showing components in a template
+### 템플릿에서 구성 요소 표시하기
 
-Every component defines a [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors):
+모든 구성 요소는 [CSS 선택자](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors)를 정의합니다:
 
 <docs-code language="angular-ts" highlight="[2]">
 @Component({
@@ -86,9 +85,9 @@ Every component defines a [CSS selector](https://developer.mozilla.org/docs/Lear
 export class ProfilePhoto { }
 </docs-code>
 
-See [Component Selectors](guide/components/selectors) for details about which types of selectors Angular supports and guidance on choosing a selector.
+Angular가 지원하는 선택자 유형 및 선택자 선택에 대한 지침은 [구성 요소 선택자](guide/components/selectors)를 참조하세요.
 
-You show a component by creating a matching HTML element in the template of _other_ components:
+다른 구성 요소의 템플릿에서 일치하는 HTML 요소를 생성하여 구성 요소를 표시합니다:
 
 <docs-code language="angular-ts" highlight="[8]">
 @Component({
@@ -103,12 +102,11 @@ export class ProfilePhoto { }
 export class UserProfile { }
 </docs-code>
 
-Angular creates an instance of the component for every matching HTML element it encounters. The DOM element that matches a component's selector is referred to as that component's **host element**. The contents of a component's template are rendered inside its host element.
+Angular는 일치하는 HTML 요소를 찾을 때마다 구성 요소의 인스턴스를 생성합니다. 구성 요소의 선택자와 일치하는 DOM 요소는 해당 구성 요소의 **호스트 요소**라고 합니다. 구성 요소 템플릿의 내용은 해당 호스트 요소 안에 렌더링됩니다.
 
-The DOM rendered by a component, corresponding to that component's template, is called that
-component's **view**.
+구성 요소가 렌더링한 DOM은 해당 구성 요소의 템플릿에 해당하며, 이를 해당 구성 요소의 **뷰**라고 합니다.
 
-In composing components in this way, **you can think of your Angular application as a tree of components**.
+이런 방식으로 구성 요소를 구성하면 **Angular 애플리케이션을 구성 요소의 트리로 생각할 수 있습니다.** 
 
 ```mermaid
 flowchart TD
@@ -121,5 +119,4 @@ flowchart TD
     E[UserBio]
 ```
 
-
-This tree structure is important to understanding several other Angular concepts, including [dependency injection](guide/di) and [child queries](guide/components/queries).
+이 트리 구조는 여러 다른 Angular 개념, 즉 [의존성 주입](guide/di) 및 [자식 쿼리](guide/components/queries)를 이해하는 데 중요합니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/components/content-projection.md b/adev/src/content/guide/components/content-projection.md
index 59895427bfb4..34b8340fec26 100644
--- a/adev/src/content/guide/components/content-projection.md
+++ b/adev/src/content/guide/components/content-projection.md
@@ -1,19 +1,18 @@
-# Content projection with ng-content
+# 콘텐츠 투영 ng-content 사용하기
 
-Tip: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
+팁: 이 가이드는 여러분이 [필수 가이드](essentials)를 이미 읽었다고 가정합니다. Angular에 처음이라면 먼저 그것을 읽어보세요.
 
-You often need to create components that act as containers for different types of content. For
-example, you may want to create a custom card component:
+여러분은 종종 다양한 유형의 콘텐츠를 위한 컨테이너 역할을 하는 컴포넌트를 만들어야 합니다. 예를 들어, 사용자 지정 카드 컴포넌트를 만들고 싶을 수 있습니다:
 
 ```angular-ts
 @Component({
   selector: 'custom-card',
-  template: '<div class="card-shadow"> <!-- card content goes here --> </div>',
+  template: '<div class="card-shadow"> <!-- 카드 내용은 여기로 --> </div>',
 })
 export class CustomCard {/* ... */}
 ```
 
-**You can use the `<ng-content>` element as a placeholder to mark where content should go**:
+**`<ng-content>` 요소를 자리 표시자로 사용하여 콘텐츠가 들어갈 위치를 표시할 수 있습니다**:
 
 ```angular-ts
 @Component({
@@ -23,15 +22,12 @@ export class CustomCard {/* ... */}
 export class CustomCard {/* ... */}
 ```
 
-Tip: `<ng-content>` works similarly
-to [the native `<slot>` element](https://developer.mozilla.org/docs/Web/HTML/Element/slot),
-but with some Angular-specific functionality.
+팁: `<ng-content>`는 [네이티브 `<slot>` 요소](https://developer.mozilla.org/docs/Web/HTML/Element/slot)와 유사하게 작동하지만, Angular 특정 기능이 있습니다.
 
-When you use a component with `<ng-content>`, any children of the component host element are
-rendered, or **projected**, at the location of that `<ng-content>`:
+`<ng-content>`와 함께 컴포넌트를 사용할 때, 컴포넌트 호스트 요소의 자식들은 그 `<ng-content>` 위치에 **렌더링**되거나 **투영**됩니다:
 
 ```angular-ts
-// Component source
+// 컴포넌트 소스
 @Component({
   selector: 'custom-card',
   template: `
@@ -44,43 +40,33 @@ export class CustomCard {/* ... */}
 ```
 
 ```angular-html
-<!-- Using the component -->
+<!-- 컴포넌트 사용하기 -->
 <custom-card>
-  <p>This is the projected content</p>
+  <p>이것은 투영된 콘텐츠입니다</p>
 </custom-card>
 ```
 
 ```angular-html
-<!-- The rendered DOM -->
+<!-- 렌더링된 DOM -->
 <custom-card>
   <div class="card-shadow">
-    <p>This is the projected content</p>
+    <p>이것은 투영된 콘텐츠입니다</p>
   </div>
 </custom-card>
 ```
 
-Angular refers to any children of a component passed this way as that component's **content**. This
-is distinct from the component's **view**, which refers to the elements defined in the component's
-template.
+Angular는 이러한 방식으로 전달된 컴포넌트의 모든 자식을 **콘텐츠**라고 부릅니다. 이는 컴포넌트의 **뷰**와 구별됩니다. 뷰는 컴포넌트 템플릿에 정의된 요소를 가리킵니다.
 
-**The `<ng-content>` element is neither a component nor DOM element**. Instead, it is a special
-placeholder that tells Angular where to render content. Angular's compiler processes
-all `<ng-content>` elements at build-time. You cannot insert, remove, or modify `<ng-content>` at
-run time. You cannot add directives, styles, or arbitrary attributes to `<ng-content>`.
+**`<ng-content>` 요소는 컴포넌트도 아니고 DOM 요소도 아닙니다**. 대신, Angular에 콘텐츠를 렌더링할 위치를 표시하는 특별한 자리 표시자입니다. Angular의 컴파일러는 빌드 타임에 모든 `<ng-content>` 요소를 처리합니다. 런타임에 `<ng-content>`를 삽입, 제거 또는 수정할 수 없습니다. `<ng-content>`에 지시문, 스타일 또는 임의의 속성을 추가할 수 없습니다.
 
-You should not conditionally include `<ng-content>` with `@if`, `@for`, or `@switch`. Angular always
-instantiates and creates DOM nodes for content rendered to a `<ng-content>` placeholder, even if
-that `<ng-content>` placeholder is hidden. For conditional rendering of component content,
-see [Template fragments](api/core/ng-template).
+`@if`, `@for` 또는 `@switch`로 `<ng-content>`를 조건부로 포함해서는 안 됩니다. Angular는 콘텐츠를 `<ng-content>` 자리 표시자로 렌더링할 때 항상 인스턴스화하고 DOM 노드를 생성합니다. 콘텐츠가 hidden 상태인 경우에도 마찬가지입니다. 컴포넌트 콘텐츠의 조건부 렌더링에 대한 내용은 [템플릿 조각](api/core/ng-template)을 참조하세요.
 
-## Multiple content placeholders
+## 여러 콘텐츠 자리 표시자
 
-Angular supports projecting multiple different elements into different `<ng-content>` placeholders
-based on CSS selector. Expanding the card example from above, you could create two placeholders for
-a card title and a card body by using the `select` attribute:
+Angular는 CSS 선택자에 따라 서로 다른 `<ng-content>` 자리 표시자에 여러 서로 다른 요소를 투영하는 것을 지원합니다. 위의 카드 예제를 확장하여 카드 제목과 카드 본문에 대한 두 개의 자리 표시자를 `select` 속성을 사용하여 만들 수 있습니다:
 
 ```angular-html
-<!-- Component template -->
+<!-- 컴포넌트 템플릿 -->
 <div class="card-shadow">
   <ng-content select="card-title"></ng-content>
   <div class="card-divider"></div>
@@ -89,105 +75,99 @@ a card title and a card body by using the `select` attribute:
 ```
 
 ```angular-html
-<!-- Using the component -->
+<!-- 컴포넌트 사용하기 -->
 <custom-card>
-  <card-title>Hello</card-title>
-  <card-body>Welcome to the example</card-body>
+  <card-title>안녕하세요</card-title>
+  <card-body>예제에 오신 것을 환영합니다</card-body>
 </custom-card>
 ```
 
 ```angular-html
-<!-- Rendered DOM -->
+<!-- 렌더링된 DOM -->
 <custom-card>
   <div class="card-shadow">
-    <card-title>Hello</card-title>
+    <card-title>안녕하세요</card-title>
     <div class="card-divider"></div>
-    <card-body>Welcome to the example</card-body>
+    <card-body>예제에 오신 것을 환영합니다</card-body>
   </div>
 </custom-card>
 ```
 
-The `<ng-content>` placeholder supports the same CSS selectors
-as [component selectors](guide/components/selectors).
+`<ng-content>` 자리 표시자는 [컴포넌트 선택자](guide/components/selectors)와 동일한 CSS 선택자를 지원합니다.
 
-If you include one or more `<ng-content>` placeholders with a `select` attribute and
-one `<ng-content>` placeholder without a `select` attribute, the latter captures all elements that
-did not match a `select` attribute:
+하나 이상의 `select` 속성을 가진 `<ng-content>` 자리 표시자와 `select` 속성이 없는 `<ng-content>` 자리를 포함하면, 후자는 `select` 속성과 일치하지 않는 모든 요소를 캡처합니다:
 
 ```angular-html
-<!-- Component template -->
+<!-- 컴포넌트 템플릿 -->
 <div class="card-shadow">
   <ng-content select="card-title"></ng-content>
   <div class="card-divider"></div>
-  <!-- capture anything except "card-title" -->
+  <!-- "card-title"를 제외한 모든 것을 캡처 -->
   <ng-content></ng-content>
 </div>
 ```
 
 ```angular-html
-<!-- Using the component -->
+<!-- 컴포넌트 사용하기 -->
 <custom-card>
-  <card-title>Hello</card-title>
+  <card-title>안녕하세요</card-title>
   <img src="..." />
-  <p>Welcome to the example</p>
+  <p>예제에 오신 것을 환영합니다</p>
 </custom-card>
 ```
 
 ```angular-html
-<!-- Rendered DOM -->
+<!-- 렌더링된 DOM -->
 <custom-card>
   <div class="card-shadow">
-    <card-title>Hello</card-title>
+    <card-title>안녕하세요</card-title>
     <div class="card-divider"></div>
     <img src="..." />
-    <p>Welcome to the example></p>
+    <p>예제에 오신 것을 환영합니다></p>
   </div>
 </custom-card>
 ```
 
-If a component does not include an `<ng-content>` placeholder without a `select` attribute, any
-elements that don't match one of the component's placeholders do not render into the DOM.
+컴포넌트가 `select` 속성이 없는 `<ng-content>` 자리 표시자를 포함하지 않으면, 컴포넌트의 자리 표시자와 일치하지 않는 요소는 DOM에 렌더링되지 않습니다.
 
-## Fallback content
+## 기본 콘텐츠
 
-Angular can show *fallback content* for a component's `<ng-content>` placeholder if that component doesn't have any matching child content. You can specify fallback content by adding child content to the `<ng-content>` element itself.
+Angular는 컴포넌트의 `<ng-content>` 자리 표시자에 대한 *기본 콘텐츠*를 표시할 수 있습니다. 이 경우 컴포넌트에 일치하는 자식 콘텐츠가 없으면 기본 콘텐츠를 사용할 수 있습니다. 기본 콘텐츠는 `<ng-content>` 요소 자체에 자식 콘텐츠를 추가하여 지정할 수 있습니다.
 
 ```angular-html
-<!-- Component template -->
+<!-- 컴포넌트 템플릿 -->
 <div class="card-shadow">
-  <ng-content select="card-title">Default Title</ng-content>
+  <ng-content select="card-title">기본 제목</ng-content>
   <div class="card-divider"></div>
-  <ng-content select="card-body">Default Body</ng-content>
+  <ng-content select="card-body">기본 본문</ng-content>
 </div>
 ```
 
 ```angular-html
-<!-- Using the component -->
+<!-- 컴포넌트 사용하기 -->
 <custom-card>
-  <card-title>Hello</card-title>
-  <!-- No card-body provided -->
+  <card-title>안녕하세요</card-title>
+  <!-- 카드 본문 제공하지 않음 -->
 </custom-card>
 ```
 
 ```angular-html
-<!-- Rendered DOM -->
+<!-- 렌더링된 DOM -->
 <custom-card>
   <div class="card-shadow">
-    Hello
+    안녕하세요
     <div class="card-divider"></div>
-    Default Body
+    기본 본문
   </div>
 </custom-card>
 ```
 
-## Aliasing content for projection
+## 투영을 위한 콘텐츠 별칭 만들기
 
-Angular supports a special attribute, `ngProjectAs`, that allows you to specify a CSS selector on
-any element. Whenever an element with `ngProjectAs` is checked against an `<ng-content>`
-placeholder, Angular compares against the `ngProjectAs` value instead of the element's identity:
+Angular는 `ngProjectAs`라는 특별한 속성을 지원합니다. 이 속성을 사용하여 임의의 요소에 대한 CSS 선택자를 지정할 수 있습니다. `ngProjectAs`가 있는 요소가 `<ng-content>` 자리 표시자와 비교될 때마다 Angular는 요소의 정체성 대신 `ngProjectAs` 값을 비교합니다:
 
 ```angular-html
-<!-- Component template -->
+<!-- 컴포넌트 템플릿 -->
 <div class="card-shadow">
   <ng-content select="card-title"></ng-content>
   <div class="card-divider"></div>
@@ -196,23 +176,23 @@ placeholder, Angular compares against the `ngProjectAs` value instead of the ele
 ```
 
 ```angular-html
-<!-- Using the component -->
+<!-- 컴포넌트 사용하기 -->
 <custom-card>
-  <h3 ngProjectAs="card-title">Hello</h3>
+  <h3 ngProjectAs="card-title">안녕하세요</h3>
 
-  <p>Welcome to the example</p>
+  <p>예제에 오신 것을 환영합니다</p>
 </custom-card>
 ```
 
 ```angular-html
-<!-- Rendered DOM -->
+<!-- 렌더링된 DOM -->
 <custom-card>
   <div class="card-shadow">
-    <h3>Hello</h3>
+    <h3>안녕하세요</h3>
     <div class="card-divider"></div>
-    <p>Welcome to the example></p>
+    <p>예제에 오신 것을 환영합니다></p>
   </div>
 </custom-card>
 ```
 
-`ngProjectAs` supports only static values and cannot be bound to dynamic expressions.
+`ngProjectAs`는 정적 값만 지원하며 동적 표현식에 바인딩할 수 없습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/components/dom-apis.md b/adev/src/content/guide/components/dom-apis.md
index c51970b93868..2400b397c0b5 100644
--- a/adev/src/content/guide/components/dom-apis.md
+++ b/adev/src/content/guide/components/dom-apis.md
@@ -1,10 +1,8 @@
-# Using DOM APIs
+# DOM API 사용하기
 
-Tip: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
+팁: 이 가이드는 여러분이 이미 [필수 가이드](essentials)를 읽었다고 가정합니다. Angular에 처음이라면 먼저 그 내용을 읽으세요.
 
-Angular handles most DOM creation, updates, and removals for you. However, you might rarely need to
-directly interact with a component's DOM. Components can inject ElementRef to get a reference to the
-component's host element:
+Angular는 대부분의 DOM 생성, 업데이트 및 제거를 자동으로 처리합니다. 그러나 드물게 구성 요소의 DOM과 직접 상호작용해야 할 필요가 있을 수 있습니다. 구성 요소는 ElementRef를 주입하여 구성 요소의 호스트 요소에 대한 참조를 가져올 수 있습니다:
 
 ```ts
 @Component({...})
@@ -15,69 +13,49 @@ export class ProfilePhoto {
 }
 ```
 
-The `nativeElement` property references the
-host [Element](https://developer.mozilla.org/docs/Web/API/Element) instance.
+`nativeElement` 속성은 호스트 [Element](https://developer.mozilla.org/docs/Web/API/Element) 인스턴스를 참조합니다.
 
-You can use Angular's `afterRender` and `afterNextRender` functions to register a **render
-callback** that runs when Angular has finished rendering the page.
+Angular의 `afterRender` 및 `afterNextRender` 함수를 사용하여 Angular가 페이지의 렌더링을 완료했을 때 실행되는 **렌더 콜백**을 등록할 수 있습니다.
 
 ```ts
 @Component({...})
 export class ProfilePhoto {
   constructor(elementRef: ElementRef) {
     afterRender(() => {
-      // Focus the first input element in this component.
+      // 이 구성 요소의 첫 번째 입력 요소에 포커스를 맞춥니다.
       elementRef.nativeElement.querySelector('input')?.focus();
     });
   }
 }
 ```
 
-`afterRender` and `afterNextRender` must be called in an _injection context_, typically a
-component's constructor.
+`afterRender` 및 `afterNextRender`는 일반적으로 구성 요소의 생성자와 같은 _주입 컨텍스트_에서 호출되어야 합니다.
 
-**Avoid direct DOM manipulation whenever possible.** Always prefer expressing your DOM's structure
-in component templates and updating that DOM with bindings.
+**가능한 한 직접적인 DOM 조작을 피하는 것이 좋습니다.** 항상 구성 요소 템플릿에서 DOM 구조를 표현하고 바인딩으로 해당 DOM을 업데이트하는 것을 선호하세요.
 
-**Render callbacks never run during server-side rendering or build-time pre-rendering.**
+**렌더 콜백은 서버 측 렌더링 또는 빌드 타임 사전 렌더링 중에 실행되지 않습니다.**
 
-**Never directly manipulate the DOM inside of other Angular lifecycle hooks**. Angular does not
-guarantee that a component's DOM is fully rendered at any point other than in render callbacks.
-Further, reading or modifying the DOM during other lifecycle hooks can negatively impact page
-performance by
-causing [layout thrashing](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing).
+**다른 Angular 생명 주기 훅 안에서 직접 DOM을 조작하지 마세요.** Angular는 구성 요소의 DOM이 렌더 콜백이 아닌 시점에서 완전히 렌더링되었음을 보장하지 않습니다. 또한, 다른 생명 주기 훅에서 DOM을 읽거나 수정하면 [레이아웃 스래싱](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing)을 일으켜 페이지 성능에 부정적인 영향을 미칠 수 있습니다.
 
-## Using a component's renderer
+## 구성 요소의 렌더러 사용하기
 
-Components can inject an instance of `Renderer2` to perform certain DOM manipulations that are tied
-to other Angular features.
+구성 요소는 `Renderer2` 인스턴스를 주입하여 다른 Angular 기능과 관련된 특정 DOM 조작을 수행할 수 있습니다.
 
-Any DOM elements created by a component's `Renderer2` participate in that
-component's [style encapsulation](guide/components/styling#style-scoping).
+구성 요소의 `Renderer2`로 생성된 모든 DOM 요소는 해당 구성 요소의 [스타일 캡슐화](guide/components/styling#style-scoping)에 참여합니다.
 
-Certain `Renderer2` APIs also tie into Angular's animation system. You can use the `setProperty`
-method to update synthetic animation properties and the `listen` method to add event listeners for
-synthetic animation events. See the [Animations](guide/animations) guide for details.
+특정 `Renderer2` API는 Angular의 애니메이션 시스템과 연결되어 있습니다. `setProperty` 메서드를 사용하여 합성 애니메이션 속성을 업데이트하고 `listen` 메서드를 사용하여 합성 애니메이션 이벤트에 대한 이벤트 리스너를 추가할 수 있습니다. 자세한 내용은 [애니메이션 가이드](guide/animations)를 참조하세요.
 
-Aside from these two narrow use-cases, there is no difference between using `Renderer2` and native
-DOM APIs. `Renderer2` APIs do not support DOM manipulation in server-side rendering or build-time
-pre-rendering contexts.
+이 두 가지 한정된 사용 사례 외에도 `Renderer2`를 사용하는 것과 기본 DOM API를 사용하는 것 사이에는 차이가 없습니다. `Renderer2` API는 서버 측 렌더링 또는 빌드 타임 사전 렌더링 컨텍스트에서 DOM 조작을 지원하지 않습니다.
 
-## When to use DOM APIs
+## DOM API 사용 시기
 
-While Angular handles most rendering concerns, some behaviors may still require using DOM APIs. Some
-common use cases include:
+Angular가 대부분의 렌더링 문제를 처리하는 반면, 일부 동작은 여전히 DOM API를 사용해야 할 수 있습니다. 일반적인 사용 사례는 다음과 같습니다:
 
-- Managing element focus
-- Measuring element geometry, such as with `getBoundingClientRect`
-- Reading an element's text content
-- Setting up native observers such
-  as [`MutationObserver`](https://developer.mozilla.org/docs/Web/API/MutationObserver),
-  [`ResizeObserver`](https://developer.mozilla.org/docs/Web/API/ResizeObserver), or
-  [`IntersectionObserver`](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API).
+- 요소 포커스 관리
+- `getBoundingClientRect`와 같은 요소 기하학 측정
+- 요소의 텍스트 콘텐츠 읽기
+- [`MutationObserver`](https://developer.mozilla.org/docs/Web/API/MutationObserver),
+  [`ResizeObserver`](https://developer.mozilla.org/docs/Web/API/ResizeObserver) 또는
+  [`IntersectionObserver`](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API)와 같은 기본 관찰자 설정.
 
-Avoid inserting, removing, and modifying DOM elements. In particular, **never directly set an
-element's `innerHTML` property**, which can make your application vulnerable
-to [cross-site scripting (XSS) exploits](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting).
-Angular's template bindings, including bindings for `innerHTML`, include safeguards that help
-protect against XSS attacks. See the [Security guide](best-practices/security) for details.
+DOM 요소를 삽입, 제거 및 수정하는 것을 피하세요. 특히, **결코 요소의 `innerHTML` 속성을 직접 설정하지 마세요**, 이는 응용 프로그램을 [교차 사이트 스크립팅(XSS) 공격](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting)에 취약하게 만들 수 있습니다. Angular의 템플릿 바인딩, 특히 `innerHTML`에 대한 바인딩은 XSS 공격으로부터 보호하는 데 도움이 되는 안전 장치를 포함하고 있습니다. 자세한 내용은 [보안 가이드](best-practices/security)를 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/guide/components/host-elements.md b/adev/src/content/guide/components/host-elements.md
index 535dd4efcd24..57712cb8f5d5 100644
--- a/adev/src/content/guide/components/host-elements.md
+++ b/adev/src/content/guide/components/host-elements.md
@@ -1,13 +1,11 @@
-# Component host elements
+# 컴포넌트 호스트 요소
 
-Tip: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
+팁: 이 가이드는 여러분이 [필수 가이드](essentials)를 이미 읽었다고 가정합니다. Angular에 처음이라면 먼저 그것을 읽어보세요.
 
-Angular creates an instance of a component for every HTML element that matches the component's
-selector. The DOM element that matches a component's selector is that component's **host element**.
-The contents of a component's template are rendered inside its host element.
+Angular는 컴포넌트의 선택자와 일치하는 HTML 요소마다 컴포넌트의 인스턴스를 생성합니다. 컴포넌트의 선택자와 일치하는 DOM 요소는 해당 컴포넌트의 **호스트 요소**입니다. 컴포넌트의 템플릿 내용은 호스트 요소 내에 렌더링됩니다.
 
 ```angular-ts
-// Component source
+// 컴포넌트 소스
 @Component({
   selector: 'profile-photo',
   template: `
@@ -18,28 +16,26 @@ export class ProfilePhoto {}
 ```
 
 ```angular-html
-<!-- Using the component -->
-<h3>Your profile photo</h3>
+<!-- 컴포넌트 사용 -->
+<h3>당신의 프로필 사진</h3>
 <profile-photo />
-<button>Upload a new profile photo</button>
+<button>새 프로필 사진 업로드</button>
 ```
 
 ```angular-html
-<!-- Rendered DOM -->
-<h3>Your profile photo</h3>
+<!-- 렌더링된 DOM -->
+<h3>당신의 프로필 사진</h3>
 <profile-photo>
   <img src="profile-photo.jpg" alt="Your profile photo" />
 </profile-photo>
-<button>Upload a new profile photo</button>
+<button>새 프로필 사진 업로드</button>
 ```
 
-In the above example, `<profile-photo>` is the host element of the `ProfilePhoto` component.
+위의 예에서 `<profile-photo>`는 `ProfilePhoto` 컴포넌트의 호스트 요소입니다.
 
-## Binding to the host element
+## 호스트 요소에 바인딩
 
-A component can bind properties, attributes, and events to its host element. This behaves
-identically to bindings on elements inside the component's template, but instead defined with
-the `host` property in the `@Component` decorator:
+컴포넌트는 호스트 요소에 속성, 특성 및 이벤트를 바인딩할 수 있습니다. 이는 컴포넌트의 템플릿 내 요소에 대한 바인딩과 동일하게 작동하지만, `@Component` 데코레이터의 `host` 속성으로 정의됩니다:
 
 ```angular-ts
 @Component({
@@ -62,12 +58,11 @@ export class CustomSlider {
 }
 ```
 
-## The `@HostBinding` and `@HostListener` decorators
+## `@HostBinding` 및 `@HostListener` 데코레이터
 
-You can alternatively bind to the host element by applying the `@HostBinding` and `@HostListener`
-decorator to class members.
+대안으로 클래스 멤버에 `@HostBinding` 및 `@HostListener` 데코레이터를 적용하여 호스트 요소에 바인딩할 수 있습니다.
 
-`@HostBinding` lets you bind host properties and attributes to properties and methods:
+`@HostBinding`은 호스트 속성과 특성을 속성 및 메서드에 바인딩할 수 있게 해줍니다:
 
 ```angular-ts
 @Component({
@@ -86,8 +81,7 @@ export class CustomSlider {
 }
 ```
 
-`@HostListener` lets you bind event listeners to the host element. The decorator accepts an event
-name and an optional array of arguments:
+`@HostListener`는 호스트 요소에 이벤트 리스너를 바인딩할 수 있게 해줍니다. 이 데코레이터는 이벤트 이름과 선택적으로 인수 배열을 받습니다:
 
 ```ts
 export class CustomSlider {
@@ -98,13 +92,11 @@ export class CustomSlider {
 }
 ```
 
-**Always prefer using the `host` property over `@HostBinding` and `@HostListener`.** These
-decorators exist exclusively for backwards compatibility.
+**항상 `@HostBinding` 및 `@HostListener`보다 `host` 속성을 사용하는 것을 선호하세요.** 이 데코레이터는 오직 하위 호환성을 위해 존재합니다.
 
-## Binding collisions
+## 바인딩 충돌
 
-When you use a component in a template, you can add bindings to that component instance's element.
-The component may _also_ define host bindings for the same properties or attributes.
+템플릿에서 컴포넌트를 사용할 때 해당 컴포넌트 인스턴스의 요소에 바인딩을 추가할 수 있습니다. 컴포넌트는 동일한 속성이나 특성에 대해 호스트 바인딩도 정의할 수 있습니다.
 
 ```angular-ts
 @Component({
@@ -121,8 +113,8 @@ export class ProfilePhoto { /* ... */ }
 <profile-photo role="group" [id]="otherId" />
 ```
 
-In cases like this, the following rules determine which value wins:
+이와 같은 경우, 다음 규칙에 따라 어떤 값이 우선하는지를 결정합니다:
 
-- If both values are static, the instance binding wins.
-- If one value is static and the other dynamic, the dynamic value wins.
-- If both values are dynamic, the component's host binding wins.
+- 두 값이 모두 정적이면 인스턴스 바인딩이 우선합니다.
+- 하나의 값이 정적이고 다른 하나가 동적이라면 동적 값이 우선합니다.
+- 두 값이 모두 동적이면 컴포넌트의 호스트 바인딩이 우선합니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/components/inheritance.md b/adev/src/content/guide/components/inheritance.md
index 937d80f617f4..10c34a5a3f98 100644
--- a/adev/src/content/guide/components/inheritance.md
+++ b/adev/src/content/guide/components/inheritance.md
@@ -1,11 +1,10 @@
-# Inheritance
+# 상속
 
-Tip: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
+팁: 이 가이드는 이미 [필수 가이드](essentials)를 읽었고 Angular에 익숙하지 않은 경우 먼저 읽어야 한다고 가정합니다.
 
-Angular components are TypeScript classes and participate in standard JavaScript inheritance
-semantics.
+Angular 컴포넌트는 TypeScript 클래스이며 표준 JavaScript 상속 의미론에 참여합니다.
 
-A component can extend any base class:
+컴포넌트는 어떤 기본 클래스도 확장할 수 있습니다:
 
 ```ts
 export class ListboxBase {
@@ -14,15 +13,13 @@ export class ListboxBase {
 
 @Component({ ... })
 export class CustomListbox extends ListboxBase {
-  // CustomListbox inherits the `value` property.
+  // CustomListbox는 `value` 속성을 상속받습니다.
 }
 ```
 
-## Extending other components and directives
+## 다른 컴포넌트 및 지시문 확장
 
-When a component extends another component or a directive, it inherits some of the metadata defined in
-the base class's decorator and the base class's decorated members. This includes
-host bindings, inputs, outputs, lifecycle methods.
+컴포넌트가 다른 컴포넌트 또는 지시문을 확장할 때, 기본 클래스의 장식자에 정의된 일부 메타데이터와 기본 클래스의 장식된 멤버를 상속받습니다. 여기에는 호스트 바인딩, 입력, 출력, 생명 주기 메소드가 포함됩니다.
 
 ```angular-ts
 @Component({
@@ -58,17 +55,13 @@ export class CustomListbox extends ListboxBase {
 }
 ```
 
-In the example above, `CustomListbox` inherits all the information associated with `ListboxBase`,
-overriding the selector and template with its own values. `CustomListbox` has two inputs (`value`
-and `disabled`) and two event listeners (`keydown` and `click`).
+위의 예에서 `CustomListbox`는 `ListboxBase`와 관련된 모든 정보를 상속받으며, 자신의 값으로 선택자와 템플릿을 재정의합니다. `CustomListbox`에는 두 개의 입력(`value` 및 `disabled`)과 두 개의 이벤트 리스너(`keydown` 및 `click`)가 있습니다.
 
-Child classes end up with the _union_ of all of their ancestors' inputs, outputs, and host bindings
-and their own.
+자식 클래스는 모든 조상의 입력, 출력 및 호스트 바인딩과 자신의 입력의 _합집합_을 가지게 됩니다.
 
-### Forwarding injected dependencies
+### 주입된 종속성 전달
 
-If a base class relies on dependency injection, the child class must explicitly pass these
-dependencies to `super`.
+기본 클래스가 종속성 주입에 의존하는 경우, 자식 클래스는 이러한 종속성을 `super`에 명시적으로 전달해야 합니다.
 
 ```ts
 @Component({ ... })
@@ -84,11 +77,9 @@ export class CustomListbox extends ListboxBase {
 }
 ```
 
-### Overriding lifecycle methods
+### 생명 주기 메소드 재정의
 
-If a base class defines a lifecycle method, such as `ngOnInit`, a child class that also
-implements `ngOnInit` _overrides_ the base class's implementation. If you want to preserve the base
-class's lifecycle method, explicitly call the method with `super`:
+기본 클래스가 `ngOnInit`와 같은 생명 주기 메소드를 정의하는 경우, `ngOnInit`을 구현하는 자식 클래스는 기본 클래스의 구현을 _재정의_합니다. 기본 클래스의 생명 주기 메소드를 보존하려면 `super`를 사용하여 메소드를 명시적으로 호출하십시오:
 
 ```ts
 @Component({ ... })
@@ -105,5 +96,4 @@ export class CustomListbox extends ListboxBase {
     super.ngOnInit();
     /* ... */
   }
-}
-```
+}
\ No newline at end of file
diff --git a/adev/src/content/guide/components/inputs.md b/adev/src/content/guide/components/inputs.md
index 9c4425fce07b..5b265bf81117 100644
--- a/adev/src/content/guide/components/inputs.md
+++ b/adev/src/content/guide/components/inputs.md
@@ -1,100 +1,99 @@
-# Accepting data with input properties
+# 입력 속성으로 데이터 받기
 
-Tip: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
+팁: 이 가이드는 여러분이 이미 [필수 가이드](essentials)를 읽었다고 가정합니다. Angular에 익숙하지 않은 경우 먼저 그 내용을 읽어보세요.
 
-Tip: If you're familiar with other web frameworks, input properties are similar to _props_.
+팁: 다른 웹 프레임워크에 익숙하다면, 입력 속성은 _props_와 유사합니다.
 
-When you use a component, you commonly want to pass some data to it. A component specifies the data that it accepts by declaring
-**inputs**:
+컴포넌트를 사용할 때, 일반적으로 데이터를 전달하고 싶습니다. 컴포넌트는 **입력**을 선언하여 수용할 수 있는 데이터를 지정합니다:
 
 <docs-code language="ts" highlight="[7]">
 import {Component, input} from '@angular/core';
 
 @Component({/*...*/})
 export class CustomSlider {
-  // Declare an input named 'value' with a default value of zero.
+  // 기본 값이 0인 'value'라는 입력을 선언합니다.
   value = input(0);
 }
 </docs-code>
 
-This lets you bind to the property in a template:
+이렇게 하면 템플릿에서 속성에 바인딩할 수 있습니다:
 
 ```angular-html
 <custom-slider [value]="50" />
 ```
 
-If an input has a default value, TypeScript infers the type from the default value:
+입력에 기본 값이 있는 경우, TypeScript는 기본 값으로부터 타입을 추론합니다:
 
 ```typescript
 @Component({/*...*/})
 export class CustomSlider {
-  // TypeScript infers that this input is a number, returning InputSignal<number>.
+  // TypeScript는 이 입력이 숫자임을 추론하여 InputSignal<number>를 반환합니다.
   value = input(0);
 }
 ```
 
-You can explicitly declare a type for the input by specifying a generic parameter to the function.
+입력에 대한 타입을 명시적으로 선언하려면 함수에 제네릭 매개변수를 지정할 수 있습니다.
 
-If an input without a default value is not set, its value is `undefined`:
+기본 값이 없는 입력이 설정되지 않으면, 그 값은 `undefined`입니다:
 
 ```typescript
 @Component({/*...*/})
 export class CustomSlider {
-  // Produces an InputSignal<number | undefined> because `value` may not be set.
+  // `value`가 설정되지 않을 수 있기 때문에 InputSignal<number | undefined>를 생성합니다.
   value = input<number>();
 }
 ```
 
-**Angular records inputs statically at compile-time**. Inputs cannot be added or removed at run-time.
+**Angular는 컴파일 타임에 정적으로 입력을 기록합니다**. 입력은 런타임에 추가하거나 제거할 수 없습니다.
 
-The `input` function has special meaning to the Angular compiler. **You can exclusively call `input` in component and directive property initializers.**
+`input` 함수는 Angular 컴파일러에 특별한 의미를 갖습니다. **컴포넌트 및 지시자의 속성 초기화기에만 `input`을 독점적으로 호출할 수 있습니다.**
 
-When extending a component class, **inputs are inherited by the child class.**
+컴포넌트 클래스가 확장될 때, **입력은 자식 클래스에 상속됩니다.**
 
-**Input names are case-sensitive.**
+**입력 이름은 대소문자를 구분합니다.**
 
-## Reading inputs
+## 입력 읽기
 
-The `input` function returns an `InputSignal`. You can read the value by calling the signal:
+`input` 함수는 `InputSignal`을 반환합니다. 신호를 호출하여 값을 읽을 수 있습니다:
 
 <docs-code language="ts" highlight="[5]">
 import {Component, input} from '@angular/core';
 
 @Component({/*...*/})
 export class CustomSlider {
-  // Declare an input named 'value' with a default value of zero. 
+  // 기본 값이 0인 'value'라는 입력을 선언합니다. 
   value = input(0);
 
-  // Create a computed expression that reads the value input
-  label = computed(() => `The slider's value is ${this.value()}`); 
+  // 입력된 값을 읽는 계산된 표현을 만듭니다.
+  label = computed(() => `슬라이더의 값은 ${this.value()}`); 
 }
 </docs-code>
 
-Signals created by the `input` function are read-only.
+`input` 함수로 생성된 신호는 읽기 전용입니다.
 
-## Required inputs
+## 필수 입력
 
-You can declare that an input is `required` by calling `input.required` instead of `input`:
+입력이 `required`라고 선언하려면 `input.required`를 호출합니다:
 
 <docs-code language="ts" highlight="[3]">
 @Component({/*...*/})
 export class CustomSlider {
-  // Declare a required input named value. Returns an `InputSignal<number>`.
+  // 필수 입력인 'value'를 선언합니다. InputSignal<number>를 반환합니다.
   value = input.required<number>();
 }
 </docs-code>
 
-Angular enforces that required inputs _must_ be set when the component is used in a template. If you try to use a component without specifying all of its required inputs, Angular reports an error at build-time.
+Angular는 컴포넌트가 템플릿에서 사용될 때 필수 입력이 _반드시_ 설정되어야 한다고 강제합니다. 모든 필수 입력을 지정하지 않고 컴포넌트를 사용하려고 하면, Angular는 빌드 타임에 오류를 보고합니다.
 
-Required inputs do not automatically include `undefined` in the generic parameter of the returned `InputSignal`.
+필수 입력은 반환된 `InputSignal`의 제네릭 매개변수에 `undefined`를 자동으로 포함하지 않습니다.
 
-## Configuring inputs
+## 입력 구성
 
-The `input` function accepts a config object as a second parameter that lets you change the way that input works.
+`input` 함수는 입력이 작동하는 방식을 변경할 수 있는 구성 객체를 두 번째 매개변수로 받아들입니다.
 
-### Input transforms
+### 입력 변형
 
-You can specify a `transform` function to change the value of an input when it's set by Angular.
+Angular가 설정할 때 입력의 값을 변경할 `transform` 함수를 지정할 수 있습니다.
 
 <docs-code language="ts" highlight="[6]">
 @Component({
@@ -114,17 +113,17 @@ function trimString(value: string | undefined): string {
 <custom-slider [label]="systemVolume" />
 ```
 
-In the example above, whenever the value of `systemVolume` changes, Angular runs `trimString` and sets `label` to the result.
+위 예제에서, `systemVolume`의 값이 변경될 때마다 Angular는 `trimString`을 실행하고 결과로 `label`을 설정합니다.
 
-The most common use-case for input transforms is to accept a wider range of value types in templates, often including `null` and `undefined`.
+입력 변형의 가장 일반적인 사용 사례는 비어 있거나 `undefined` 및 `null`을 포함한 더 넓은 범위의 값 유형을 템플릿에서 수용하기 위한 것입니다.
 
-**Input transform function must be statically analyzable at build-time.** You cannot set transform functions conditionally or as the result of an expression evaluation.
+**입력 변형 함수는 빌드 타임에 정적으로 분석 가능해야 합니다.** 변형 함수를 조건부로 설정하거나 표현식 평가의 결과로 설정할 수 없습니다.
 
-**Input transform functions should always be [pure functions](https://en.wikipedia.org/wiki/Pure_function).** Relying on state outside the transform function can lead to unpredictable behavior.
+**입력 변형 함수는 항상 [순수 함수](https://en.wikipedia.org/wiki/Pure_function)여야 합니다.** 변형 함수 외부의 상태에 의존하는 것은 예측할 수 없는 동작을 초래할 수 있습니다.
 
-#### Type checking
+#### 타입 검사
 
-When you specify an input transform, the type of the transform function's parameter determines the types of values that can be set to the input in a template.
+입력 변형을 지정할 때 변형 함수의 매개변수 타입은 템플릿에서 입력에 설정할 수 있는 값의 타입을 결정합니다.
 
 <docs-code language="ts">
 @Component({/*...*/})
@@ -137,11 +136,11 @@ function appendPx(value: number): string {
 }
 </docs-code>
 
-In the example above, the `widthPx` input accepts a `number` while the `InputSignal` property returns a `string`.
+위 예제에서, `widthPx` 입력은 `number`를 수용하고, `InputSignal` 속성은 `string`을 반환합니다.
 
-#### Built-in transformations
+#### 내장 변형
 
-Angular includes two built-in transform functions for the two most common scenarios: coercing values to boolean and numbers.
+Angular는 가장 일반적인 두 가지 시나리오, 즉 값을 부울과 숫자로 강제하는 두 가지 내장 변형 함수를 포함합니다.
 
 <docs-code language="ts">
 import {Component, input, booleanAttribute, numberAttribute} from '@angular/core';
@@ -153,14 +152,13 @@ export class CustomSlider {
 }
 </docs-code>
 
-`booleanAttribute` imitates the behavior of standard HTML [boolean attributes](https://developer.mozilla.org/docs/Glossary/Boolean/HTML), where the
-_presence_ of the attribute indicates a "true" value. However, Angular's `booleanAttribute` treats the literal string `"false"` as the boolean `false`.
+`booleanAttribute`는 표준 HTML [부울 속성](https://developer.mozilla.org/docs/Glossary/Boolean/HTML)의 동작을 모방하며, 이 경우 속성의 _존재_가 "true" 값을 나타냅니다. 그러나 Angular의 `booleanAttribute`는 리터럴 문자열 `"false"`를 부울 `false`로 간주합니다.
 
-`numberAttribute` attempts to parse the given value to a number, producing `NaN` if parsing fails.
+`numberAttribute`는 주어진 값을 숫자로 분석하려고 시도하며, 분석에 실패하면 `NaN`을 생성합니다.
 
-### Input aliases
+### 입력 별칭
 
-You can specify the `alias` option to change the name of an input in templates.
+템플릿에서 입력의 이름을 변경할 수 있도록 `alias` 옵션을 지정할 수 있습니다.
 
 <docs-code language="ts" highlight="[3]">
 @Component({/*...*/})
@@ -173,58 +171,58 @@ export class CustomSlider {
 <custom-slider [sliderValue]="50" />
 ```
 
-This alias does not affect usage of the property in TypeScript code.
+이 별칭은 TypeScript 코드에서 속성 사용에 영향을 주지 않습니다.
 
-While you should generally avoid aliasing inputs for components, this feature can be useful for renaming properties while preserving an alias for the original name or for avoiding collisions with the name of native DOM element properties.
+컴포넌트의 입력에 별칭을 부여하는 것을 일반적으로 피해야 하지만, 이 기능은 원래 이름의 별칭을 유지하거나 네이티브 DOM 요소 속성의 이름과의 충돌을 피하기 위한 유용한 방법이 될 수 있습니다.
 
-## Model inputs
+## 모델 입력
 
-**Model inputs** are a special type of input that enable a component to propagate new values back to its parent component.
+**모델 입력**은 컴포넌트가 새 값을 부모 컴포넌트로 전파할 수 있게 하는 특별한 유형의 입력입니다.
 
-When creating a component, you can define a model input similarly to how you create a standard input.
+컴포넌트를 생성할 때, 표준 입력을 생성하는 방식과 유사하게 모델 입력을 정의할 수 있습니다.
 
-Both types of input allow someone to bind a value into the property. However, **model inputs allow the component author to write values into the property**. If the property is bound with a two-way binding, the new value propagates to that binding.
+두 종류의 입력 모두 누군가가 속성에 값을 바인딩할 수 있게 합니다. 그러나 **모델 입력은 컴포넌트 작성자가 속성에 값을 기록할 수 있게 합니다**. 속성이 양방향 바인딩으로 연결되어 있으면, 새 값이 그 바인딩으로 전파됩니다.
 
 ```typescript
 @Component({ /* ... */})
 export class CustomSlider {
-  // Define a model input named "value".
+  // "value"라는 모델 입력을 정의합니다.
   value = model(0);
 
   increment() {
-    // Update the model input with a new value, propagating the value to any bindings. 
+    // 새로운 값으로 모델 입력을 업데이트하여 모든 바인딩에 값을 전파합니다. 
     this.value.update(oldValue => oldValue + 10);
   }
 }
 
 @Component({
   /* ... */
-  // Using the two-way binding syntax means that any changes to the slider's
-  // value automatically propagate back to the `volume` signal.
-  // Note that this binding uses the signal *instance*, not the signal value.
+  // 양방향 바인딩 구문을 사용하면 슬라이더의
+  // 값 변경이 자동으로 `volume` 신호로 전파됩니다.
+  // 이 바인딩은 신호의 *인스턴스*를 사용하며, 신호 값이 아닙니다.
   template: `<custom-slider [(value)]="volume" />`,
 })
 export class MediaControls {
-  // Create a writable signal for the `volume` local state. 
+  // `volume` 로컬 상태에 대한 쓰기 가능한 신호를 생성합니다.
   volume = signal(0);
 }
 ```
 
-In the above example, the `CustomSlider` can write values into its `value` model input, which then propagates those values back to the `volume` signal in `MediaControls`. This binding keeps the values of `value` and `volume` in sync. Notice that the binding passes the `volume` signal instance, not the _value_ of the signal.
+위 예제에서 `CustomSlider`는 자신의 `value` 모델 입력에 값을 기록할 수 있으며, 그 값은 `MediaControls`의 `volume` 신호로 전파됩니다. 이 바인딩은 `value`와 `volume`의 값을 동기화합니다. 바인딩이 `volume` 신호 인스턴스를 전달하고 신호의 _값_이 아님에 유의하십시오.
 
-In other respects, model inputs work similarly to standard inputs. You can read the value by calling the signal function, including in reactive contexts like `computed` and `effect`.
+다른 측면에서 모델 입력은 표준 입력과 유사하게 작동합니다. 신호 함수를 호출하여 값을 읽을 수 있으며, 반응형 컨텍스트인 `computed` 및 `effect`에서도 포함됩니다.
 
-See [Two-way binding](guide/templates/two-way-binding) for more details on two-way binding in templates.
+템플릿에서의 양방향 바인딩에 대한 자세한 내용은 [양방향 바인딩](guide/templates/two-way-binding)을 참조하십시오.
 
-### Two-way binding with plain properties
+### 일반 속성과의 양방향 바인딩
 
-You can bind a plain JavaScript property to a model input.
+일반 JavaScript 속성을 모델 입력에 바인딩할 수 있습니다.
 
 ```angular-ts
 @Component({
   /* ... */
-  // `value` is a model input.
-  // The parenthesis-inside-square-brackets syntax (aka "banana-in-a-box") creates a two-way binding
+  // `value`는 모델 입력입니다.
+  // 대괄호 안의 괄호 구문(일명 "바나나-상자")은 양방향 바인딩을 생성합니다.
   template: '<custom-slider [(value)]="volume" />',
 })
 export class MediaControls {
@@ -232,46 +230,46 @@ export class MediaControls {
 }
 ```
 
-In the example above, the `CustomSlider` can write values into its `value` model input, which then propagates those values back to the `volume` property in `MediaControls`. This binding keeps the values of `value` and `volume` in sync.
+위 예제에서 `CustomSlider`는 자신의 `value` 모델 입력에 값을 기록할 수 있으며, 그 값은 `MediaControls`의 `volume` 속성으로 전파됩니다. 이 바인딩은 `value`와 `volume`의 값을 동기화합니다.
 
-### Implicit `change` events
+### 암묵적 `change` 이벤트
 
-When you declare a model input in a component or directive, Angular automatically creates a corresponding [output](guide/components/outputs) for that model. The output's name is the model input's name suffixed with "Change".
+컴포넌트나 지시자에 모델 입력을 선언하면 Angular는 해당 모델에 대한 [출력](guide/components/outputs)을 자동으로 생성합니다. 출력의 이름은 모델 입력의 이름 뒤에 "Change"가 추가됩니다.
 
 ```angular-ts
 @Directive({ /* ... */ })
 export class CustomCheckbox {
-  // This automatically creates an output named "checkedChange".
-  // Can be subscribed to using `(checkedChange)="handler()"` in the template.
+  // 이로 인해 "checkedChange"라는 출력이 자동으로 생성됩니다.
+  // 템플릿에서 `(checkedChange)="handler()"`를 사용하여 구독할 수 있습니다.
   checked = model(false);
 }
 ```
 
-Angular emits this change event whenever you write a new value into the model input by calling its `set` or `update` methods.
+Angular는 모델 입력에 새 값을 기록할 때마다 이 변경 이벤트를 발생시킵니다. 이는 `set` 또는 `update` 메서드를 호출하여 발생합니다.
 
-See [Custom events with outputs](guide/components/outputs) for more details on outputs.
+출력에 대한 자세한 내용은 [출력을 갖춘 사용자 정의 이벤트](guide/components/outputs)를 참조하십시오.
 
-### Customizing model inputs
+### 모델 입력 사용자 정의
 
-You can mark a model input as required or provide an alias in the same way as a [standard input](guide/signals/inputs).
+모델 입력을 필수로 만들거나 별칭을 지정할 수 있습니다. 이는 [표준 입력](guide/signals/inputs)과 동일한 방식입니다.
 
-Model inputs do not support input transforms.
+모델 입력은 입력 변형을 지원하지 않습니다.
 
-### When to use model inputs
+### 모델 입력 사용 시기
 
-Use model inputs when you want a component to support two-way binding. This is typically appropriate when a component exists to modify a value based on user interaction. Most commonly, custom form controls, such as a date picker or combobox, should use model inputs for their primary value.
+모델 입력은 컴포넌트가 양방향 바인딩을 지원해야 할 때 사용합니다. 이는 일반적으로 컴포넌트가 사용자 상호 작용에 따라 값을 수정하기 위해 존재할 때 적합합니다. 가장 일반적으로, 날짜 선택기 또는 콤보박스와 같은 사용자 정의 폼 컨트롤은 기본 값을 위해 모델 입력을 사용해야 합니다.
 
-## Choosing input names
+## 입력 이름 선택
 
-Avoid choosing input names that collide with properties on DOM elements like HTMLElement. Name collisions introduce confusion about whether the bound property belongs to the component or the DOM element.
+DOM 요소의 속성과 충돌하는 입력 이름 선택을 피하세요. 이름 충돌은 바인딩된 속성이 컴포넌트에 속하는지 DOM 요소에 속하는지에 대한 혼돈을 초래합니다.
 
-Avoid adding prefixes for component inputs like you would with component selectors. Since a given element can only host one component, any custom properties can be assumed to belong to the component.
+컴포넌트 입력에 접두사를 추가하는 것은 피하세요. 특정 요소는 하나의 컴포넌트만 호스팅할 수 있으므로 모든 사용자 지정 속성은 컴포넌트에 속한다고 가정할 수 있습니다.
 
-## Declaring inputs with the `@Input` decorator
+## `@Input` 데코레이터로 입력 선언하기
 
-Tip: While the Angular team recommends using the signal-based `input` function for new projects, the original decorator-based `@Input` API remains fully supported.
+팁: Angular 팀은 새로운 프로젝트에 대해서는 신호 기반의 `input` 함수를 사용하는 것을 권장하지만, 원래의 데코레이터 기반 `@Input` API는 여전히 완전히 지원됩니다.
 
-You can alternatively declare component inputs by adding the `@Input` decorator to a property:
+대신 `@Input` 데코레이터를 속성에 추가하여 컴포넌트 입력을 선언할 수 있습니다:
 
 <docs-code language="ts" highlight="[3]">
 @Component({...})
@@ -280,19 +278,19 @@ export class CustomSlider {
 }
 </docs-code>
 
-Binding to an input is the same in both signal-based and decorator-based inputs:
+입력에 바인딩하는 것은 신호 기반 입력과 데코레이터 기반 입력 모두에서 동일합니다:
 
 ```angular-html
 <custom-slider [value]="50" />
 ```
 
-### Customizing decorator-based inputs
+### 데코레이터 기반 입력 사용자 정의
 
-The `@Input` decorator accepts a config object that lets you change the way that input works.
+`@Input` 데코레이터는 입력이 작동하는 방식을 변경할 수 있는 구성 객체를 받아들입니다.
 
-#### Required inputs
+#### 필수 입력
 
-You can specify the `required` option to enforce that a given input must always have a value.
+주어진 입력은 항상 값이 있어야 한다고 강제하는 `required` 옵션을 지정할 수 있습니다.
 
 <docs-code language="ts" highlight="[3]">
 @Component({...})
@@ -301,11 +299,11 @@ export class CustomSlider {
 }
 </docs-code>
 
-If you try to use a component without specifying all of its required inputs, Angular reports an error at build-time.
+모든 필수 입력을 지정하지 않고 컴포넌트를 사용하려고 하면 Angular는 빌드 타임에 오류를 보고합니다.
 
-#### Input transforms
+#### 입력 변형
 
-You can specify a `transform` function to change the value of an input when it's set by Angular. This transform function works identically to transform functions for signal-based inputs described above.
+입력의 값을 Angular에 의해 설정할 때 변경할 `transform` 함수를 지정할 수 있습니다. 이 변형 함수는 위에서 설명한 신호 기반 입력의 변형 함수와 동일하게 작동합니다.
 
 <docs-code language="ts" highlight="[6]">
 @Component({
@@ -319,9 +317,9 @@ export class CustomSlider {
 function trimString(value: string | undefined) { return value?.trim() ?? ''; }
 </docs-code>
 
-#### Input aliases
+#### 입력 별칭
 
-You can specify the `alias` option to change the name of an input in templates.
+템플릿에서 입력의 이름을 변경할 수 있도록 `alias` 옵션을 지정할 수 있습니다.
 
 <docs-code language="ts" highlight="[3]">
 @Component({...})
@@ -334,13 +332,13 @@ export class CustomSlider {
 <custom-slider [sliderValue]="50" />
 ```
 
-The `@Input` decorator also accepts the alias as its first parameter in place of the config object.
+`@Input` 데코레이터는 구성 객체 대신 첫 번째 매개변수로 별칭을 받아들입니다.
 
-Input aliases work the same way as for signal-based inputs described above.
+입력 별칭은 신호 기반 입력에 대해 설명된 방식과 동일하게 작동합니다.
 
-### Inputs with getters and setters
+### getter와 setter가 있는 입력
 
-When using decorator-based inputs, a property implemented with a getter and setter can be an input:
+데코레이터 기반 입력을 사용할 때, getter와 setter가 구현된 속성은 입력이 될 수 있습니다:
 
 <docs-code language="ts">
 export class CustomSlider {
@@ -349,12 +347,13 @@ export class CustomSlider {
     return this.internalValue;
   }
 
-set value(newValue: number) { this.internalValue = newValue; }
+  set value(newValue: number) { this.internalValue = newValue; }
 
-private internalValue = 0; }
+  private internalValue = 0; 
+}
 </docs-code>
 
-You can even create a _write-only_ input by only defining a public setter:
+공용 setter만 정의하여 _쓰기 전용_ 입력을 만들 수도 있습니다:
 
 <docs-code language="ts">
 export class CustomSlider {
@@ -363,19 +362,20 @@ export class CustomSlider {
     this.internalValue = newValue;
   }
 
-private internalValue = 0; }
+  private internalValue = 0; 
+}
 </docs-code>
 
-**Prefer using input transforms instead of getters and setters** if possible.
+**가능한 경우 getters와 setters 대신 입력 변형을 사용하십시오.**
 
-Avoid complex or costly getters and setters. Angular may invoke an input's setter multiple times, which may negatively impact application performance if the setter performs any costly behaviors, such as DOM manipulation.
+복잡하거나 비용이 많이 드는 getter와 setter를 피하십시오. Angular는 입력의 setter를 여러 번 호출할 수 있으며, setter가 DOM 조작과 같은 비용이 많이 드는 작업을 수행하면 애플리케이션 성능에 부정적인 영향을 미칠 수 있습니다.
 
-## Specify inputs in the `@Component` decorator
+## `@Component` 데코레이터에서 입력 지정하기
 
-In addition to the `@Input` decorator, you can also specify a component's inputs with the `inputs` property in the `@Component` decorator. This can be useful when a component inherits a property from a base class:
+`@Input` 데코레이터 외에도, `@Component` 데코레이터의 `inputs` 속성을 사용하여 컴포넌트의 입력을 지정할 수 있습니다. 이는 컴포넌트가 기본 클래스에서 속성을 상속받을 때 유용할 수 있습니다:
 
 <docs-code language="ts" highlight="[4]">
-// `CustomSlider` inherits the `disabled` property from `BaseSlider`.
+// `CustomSlider`는 `BaseSlider`에서 `disabled` 속성을 상속받습니다.
 @Component({
   ...,
   inputs: ['disabled'],
@@ -383,13 +383,13 @@ In addition to the `@Input` decorator, you can also specify a component's inputs
 export class CustomSlider extends BaseSlider { }
 </docs-code>
 
-You can additionally specify an input alias in the `inputs` list by putting the alias after a colon in the string:
+별칭을 추가로 지정할 수 있으며, 문자열 뒤에 콜론(`:`)을 붙여서 입력 별칭을 지정할 수 있습니다:
 
 <docs-code language="ts" highlight="[4]">
-// `CustomSlider` inherits the `disabled` property from `BaseSlider`.
+// `CustomSlider`는 `BaseSlider`에서 `disabled` 속성을 상속받습니다.
 @Component({
   ...,
   inputs: ['disabled: sliderDisabled'],
 })
 export class CustomSlider extends BaseSlider { }
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/guide/components/lifecycle.md b/adev/src/content/guide/components/lifecycle.md
index 0b604df9490c..753fc67c965c 100644
--- a/adev/src/content/guide/components/lifecycle.md
+++ b/adev/src/content/guide/components/lifecycle.md
@@ -1,112 +1,95 @@
-# Component Lifecycle
+# 구성요소 생명 주기
 
-Tip: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
+팁: 이 가이드는 여러분이 이미 [필수 가이드](essentials)를 읽었다고 가정합니다. Angular에 처음이라면 먼저 읽으세요.
 
-A component's **lifecycle** is the sequence of steps that happen between the component's creation
-and its destruction. Each step represents a different part of Angular's process for rendering
-components and checking them for updates over time.
+구성요소의 **생명 주기**는 구성요소의 생성과 파괴 사이에 발생하는 단계의 순서입니다. 각 단계는 Angular가 구성요소를 렌더링하고 시간이 지남에 따라 업데이트를 확인하는 과정의 다른 부분을 나타냅니다.
 
-In your components, you can implement **lifecycle hooks** to run code during these steps.
-Lifecycle hooks that relate to a specific component instance are implemented as methods on your
-component class. Lifecycle hooks that relate the Angular application as a whole are implemented
-as functions that accept a callback.
+구성요소에서 **생명 주기 훅**을 구현하여 이러한 단계 동안 코드를 실행할 수 있습니다. 특정 구성요소 인스턴스와 관련된 생명 주기 훅은 구성요소 클래스의 메서드로 구현됩니다. Angular 애플리케이션 전체와 관련된 생명 주기 훅은 콜백을 수용하는 함수로 구현됩니다.
 
-A component's lifecycle is tightly connected to how Angular checks your components for changes over
-time. For the purposes of understanding this lifecycle, you only need to know that Angular walks
-your application tree from top to bottom, checking template bindings for changes. The lifecycle
-hooks described below run while Angular is doing this traversal. This traversal visits each
-component exactly once, so you should always avoid making further state changes in the middle of the
-process.
+구성요소의 생명 주기는 Angular가 시간이 지남에 따라 구성요소의 변경을 확인하는 방식과 밀접하게 연결되어 있습니다. 이 생명 주기를 이해하기 위한 목적상, Angular는 애플리케이션 트리를 위에서 아래로 이동하면서 템플릿 바인딩의 변경 여부를 확인한다는 것만 알면 됩니다. 다음에 설명한 생명 주기 훅은 Angular가 이 탐색을 수행하는 동안 실행됩니다. 이 탐색은 각 구성요소를 정확히 한 번 방문하므로 프로세스 중간에 추가 상태 변경을 피해야 합니다.
 
-## Summary
+## 요약
 
 <div class="docs-table docs-scroll-track-transparent">
   <table>
     <tr>
-      <td><strong>Phase</strong></td>
-      <td><strong>Method</strong></td>
-      <td><strong>Summary</strong></td>
+      <td><strong>단계</strong></td>
+      <td><strong>메서드</strong></td>
+      <td><strong>요약</strong></td>
     </tr>
     <tr>
-      <td>Creation</td>
+      <td>생성</td>
       <td><code>constructor</code></td>
       <td>
         <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes/constructor" target="_blank">
-          Standard JavaScript class constructor
-        </a>. Runs when Angular instantiates the component.
+          표준 JavaScript 클래스 생성자
+        </a>. Angular가 구성요소를 인스턴스화할 때 실행됩니다.
       </td>
     </tr>
     <tr>
-      <td rowspan="7">Change<p>Detection</td>
+      <td rowspan="7">변경<p>탐지</td>
       <td><code>ngOnInit</code>
       </td>
-      <td>Runs once after Angular has initialized all the component's inputs.</td>
+      <td>Angular가 모든 구성 요소의 입력을 초기화한 후 한 번 실행됩니다.</td>
     </tr>
     <tr>
       <td><code>ngOnChanges</code></td>
-      <td>Runs every time the component's inputs have changed.</td>
+      <td>구성요소의 입력이 변경될 때마다 실행됩니다.</td>
     </tr>
     <tr>
       <td><code>ngDoCheck</code></td>
-      <td>Runs every time this component is checked for changes.</td>
+      <td>이 구성요소가 변경 사항을 확인할 때마다 실행됩니다.</td>
     </tr>
     <tr>
       <td><code>ngAfterContentInit</code></td>
-      <td>Runs once after the component's <em>content</em> has been initialized.</td>
+      <td>구성요소의 <em>내용</em>이 초기화된 후 한 번 실행됩니다.</td>
     </tr>
     <tr>
       <td><code>ngAfterContentChecked</code></td>
-      <td>Runs every time this component content has been checked for changes.</td>
+      <td>이 구성 요소의 내용이 변경된 여부를 확인할 때마다 실행됩니다.</td>
     </tr>
     <tr>
       <td><code>ngAfterViewInit</code></td>
-      <td>Runs once after the component's <em>view</em> has been initialized.</td>
+      <td>구성요소의 <em>뷰</em>가 초기화된 후 한 번 실행됩니다.</td>
     </tr>
     <tr>
       <td><code>ngAfterViewChecked</code></td>
-      <td>Runs every time the component's view has been checked for changes.</td>
+      <td>구성 요소의 뷰가 변경된 여부를 확인할 때마다 실행됩니다.</td>
     </tr>
     <tr>
-      <td rowspan="2">Rendering</td>
+      <td rowspan="2">렌더링</td>
       <td><code>afterNextRender</code></td>
-      <td>Runs once the next time that <strong>all</strong> components have been rendered to the DOM.</td>
+      <td><strong>모든</strong> 구성요소가 DOM에 렌더링된 다음 한 번 실행됩니다.</td>
     </tr>
     <tr>
       <td><code>afterRender</code></td>
-      <td>Runs every time <strong>all</strong> components have been rendered to the DOM.</td>
+      <td><strong>모든</strong> 구성요소가 DOM에 렌더링될 때마다 실행됩니다.</td>
     </tr>
     <tr>
-      <td>Destruction</td>
+      <td>파괴</td>
       <td><code>ngOnDestroy</code></td>
-      <td>Runs once before the component is destroyed.</td>
+      <td>구성요소가 파괴되기 전에 한 번 실행됩니다.</td>
     </tr>
   </table>
 </div>
 
 ### ngOnInit
 
-The `ngOnInit` method runs after Angular has initialized all the components inputs with their
-initial values. A component's `ngOnInit` runs exactly once.
+`ngOnInit` 메서드는 Angular가 모든 구성 요소의 입력을 초기값으로 초기화한 후 실행됩니다. 구성 요소의 `ngOnInit`은 정확히 한 번 실행됩니다.
 
-This step happens _before_ the component's own template is initialized. This means that you can
-update the component's state based on its initial input values.
+이 단계는 구성 요소의 템플릿이 초기화되기 _전_에 발생합니다. 이는 구성 요소의 상태를 초기 입력 값에 따라 업데이트할 수 있음을 의미합니다.
 
 ### ngOnChanges
 
-The `ngOnChanges` method runs after any component inputs have changed.
+`ngOnChanges` 메서드는 구성 요소의 입력이 변경된 후 실행됩니다.
 
-This step happens _before_ the component's own template is checked. This means that you can update
-the component's state based on its initial input values.
+이 단계는 구성 요소의 템플릿이 확인되기 _전_에 발생합니다. 이는 구성 요소의 상태를 초기 입력 값에 따라 업데이트할 수 있음을 의미합니다.
 
-During initialization, the first `ngOnChanges` runs before `ngOnInit`.
+초기화 중, 첫 번째 `ngOnChanges`는 `ngOnInit`보다 먼저 실행됩니다.
 
-#### Inspecting changes
+#### 변경 사항 검사
 
-The `ngOnChanges` method accepts one `SimpleChanges` argument. This object is
-a [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)
-mapping each component input name to a `SimpleChange` object. Each `SimpleChange` contains the
-input's previous value, its current value, and a flag for whether this is the first time the input
-has changed.
+`ngOnChanges` 메서드는 하나의 `SimpleChanges` 인수를 수용합니다. 이 객체는 각 구성요소 입력 이름을 `SimpleChange` 객체에 매핑하는 [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)입니다. 각 `SimpleChange`에는 입력의 이전 값, 현재 값 및 입력이 변경된 첫 번째 인지 여부를 나타내는 플래그가 포함됩니다.
 
 ```ts
 @Component({
@@ -118,28 +101,23 @@ export class UserProfile {
   ngOnChanges(changes: SimpleChanges) {
     for (const inputName in changes) {
       const inputValues = changes[inputName];
-      console.log(`Previous ${inputName} == ${inputValues.previousValue}`);
-      console.log(`Current ${inputName} == ${inputValues.currentValue}`);
-      console.log(`Is first ${inputName} change == ${inputValues.firstChange}`);
+      console.log(`이전 ${inputName} == ${inputValues.previousValue}`);
+      console.log(`현재 ${inputName} == ${inputValues.currentValue}`);
+      console.log(`첫 번째 ${inputName} 변경인지 == ${inputValues.firstChange}`);
     }
   }
 }
 ```
 
-If you provide an `alias` for any input properties, the `SimpleChanges` Record still uses the
-TypeScript property name as a key, rather than the alias.
+입력 속성에 `alias`를 제공하는 경우, `SimpleChanges` Record는 여전히 TypeScript 속성 이름을 키로 사용하고 별칭은 사용하지 않습니다.
 
 ### ngOnDestroy
 
-The `ngOnDestroy` method runs once just before a component is destroyed. Angular destroys a
-component when it is no longer shown on the page, such as being hidden by `@if` or upon navigating
-to another page.
+`ngOnDestroy` 메서드는 구성 요소가 파괴되기 직전에 한 번 실행됩니다. Angular는 페이지에 더 이상 표시되지 않는 구성요소를 파괴합니다. 예를 들어 `@if`에 의해 숨겨지거나 다른 페이지로 이동할 때입니다.
 
 #### DestroyRef
 
-As an alternative to the `ngOnDestroy` method, you can inject an instance of `DestroyRef`. You can
-register a callback to be invoked upon the component's destruction by calling the `onDestroy` method
-of `DestroyRef`.
+`ngOnDestroy` 메서드 대신 `DestroyRef`의 인스턴스를 주입할 수 있습니다. `DestroyRef`의 `onDestroy` 메서드를 호출하여 구성 요소가 파괴될 때 호출될 콜백을 등록할 수 있습니다.
 
 ```ts
 @Component({
@@ -148,103 +126,69 @@ of `DestroyRef`.
 export class UserProfile {
   constructor(private destroyRef: DestroyRef) {
     destroyRef.onDestroy(() => {
-      console.log('UserProfile destruction');
+      console.log('UserProfile 파괴');
     });
   }
 }
 ```
 
-You can pass the `DestroyRef` instance to functions or classes outside your component. Use this
-pattern if you have other code that should run some cleanup behavior when the component is
-destroyed.
+구성 요소 외부의 함수나 클래스에도 `DestroyRef` 인스턴스를 전달할 수 있습니다. 구성 요소가 파괴될 때 일부 정리 동작을 실행하는 다른 코드가 있는 경우 이 패턴을 사용하세요.
 
-You can also use `DestroyRef` to keep setup code close to cleanup code, rather than putting
-all cleanup code in the `ngOnDestroy` method.
+또한 `ngOnDestroy` 메서드에 모든 정리 코드를 넣는 대신 `DestroyRef`를 사용하여 설정 코드와 정리 코드를 가까이 유지할 수 있습니다.
 
 ### ngDoCheck
 
-The `ngDoCheck` method runs before every time Angular checks a component's template for changes.
+`ngDoCheck` 메서드는 Angular가 구성 요소의 템플릿을 변경 여부를 확인하기 전마다 실행됩니다.
 
-You can use this lifecycle hook to manually check for state changes outside of Angular's normal
-change detection, manually updating the component's state.
+이 생명 주기 훅을 사용하여 Angular의 정상적인 변경 탐지를 벗어나 상태 변경을 수동으로 확인하고 구성 요소의 상태를 수동으로 업데이트할 수 있습니다.
 
-This method runs very frequently and can significantly impact your page's performance. Avoid
-defining this hook whenever possible, only using it when you have no alternative.
+이 메서드는 매우 자주 실행되며 페이지의 성능에 상당한 영향을 미칠 수 있습니다. 가능한 경우 이 훅을 정의하지 않도록 하며, 대안이 없는 경우에만 사용하세요.
 
-During initialization, the first `ngDoCheck` runs after `ngOnInit`.
+초기화 중, 첫 번째 `ngDoCheck`은 `ngOnInit` 이후에 실행됩니다.
 
 ### ngAfterContentInit
 
-The `ngAfterContentInit` method runs once after all the children nested inside the component (its
-_content_) have been initialized.
+`ngAfterContentInit` 메서드는 구성 요소 내부에 중첩된 모든 자식 (_content_)이 초기화된 후 한 번 실행됩니다.
 
-You can use this lifecycle hook to read the results of
-[content queries](guide/components/queries#content-queries). While you can access the initialized
-state of these queries, attempting to change any state in this method results in an
-[ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100)
+이 생명 주기 훅을 사용하여 [내용 쿼리](guide/components/queries#content-queries)의 결과를 읽을 수 있습니다. 이러한 쿼리의 초기화된 상태에 접근할 수 있지만 이 메서드에서 상태를 변경하려고 시도하면 [ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100)가 발생합니다.
 
 ### ngAfterContentChecked
 
-The `ngAfterContentChecked` method runs every time the children nested inside the component (its
-_content_) have been checked for changes.
+`ngAfterContentChecked` 메서드는 구성 요소 내부에 중첩된 자식 (_content_)이 변경 여부를 확인할 때마다 실행됩니다.
 
-This method runs very frequently and can significantly impact your page's performance. Avoid
-defining this hook whenever possible, only using it when you have no alternative.
+이 메서드는 매우 자주 실행되며 페이지의 성능에 상당한 영향을 미칠 수 있습니다. 가능한 경우 이 훅을 정의하지 않도록 하며, 대안이 없는 경우에만 사용하세요.
 
-While you can access the updated state
-of [content queries](guide/components/queries#content-queries) here, attempting to
-change any state in this method results in
-an [ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100).
+여기에서 [내용 쿼리](guide/components/queries#content-queries)의 업데이트된 상태에 접근할 수 있지만 이 메서드에서 상태를 변경하려고 시도하면 [ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100)가 발생합니다.
 
 ### ngAfterViewInit
 
-The `ngAfterViewInit` method runs once after all the children in the component's template (its
-_view_) have been initialized.
+`ngAfterViewInit` 메서드는 구성 요소의 템플릿 (_view_)에 있는 모든 자식이 초기화된 후 한 번 실행됩니다.
 
-You can use this lifecycle hook to read the results of
-[view queries](guide/components/queries#view-queries). While you can access the initialized state of
-these queries, attempting to change any state in this method results in an
-[ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100)
+이 생명 주기 훅을 사용하여 [뷰 쿼리](guide/components/queries#view-queries)의 결과를 읽을 수 있습니다. 이러한 쿼리의 초기화된 상태에 접근할 수 있지만 이 메서드에서 상태를 변경하려고 시도하면 [ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100)가 발생합니다.
 
 ### ngAfterViewChecked
 
-The `ngAfterViewChecked` method runs every time the children in the component's template (its
-_view_) have been checked for changes.
+`ngAfterViewChecked` 메서드는 구성 요소의 템플릿 (_view_)에 있는 자식이 변경 여부를 확인할 때마다 실행됩니다.
 
-This method runs very frequently and can significantly impact your page's performance. Avoid
-defining this hook whenever possible, only using it when you have no alternative.
+이 메서드는 매우 자주 실행되며 페이지의 성능에 상당한 영향을 미칠 수 있습니다. 가능한 경우 이 훅을 정의하지 않도록 하며, 대안이 없는 경우에만 사용하세요.
 
-While you can access the updated state of [view queries](guide/components/queries#view-queries)
-here, attempting to
-change any state in this method results in
-an [ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100).
+여기에서 [뷰 쿼리](guide/components/queries#view-queries)의 업데이트된 상태에 접근할 수 있지만 이 메서드에서 상태를 변경하려고 시도하면 [ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100)가 발생합니다.
 
-### afterRender and afterNextRender
+### afterRender 및 afterNextRender
 
-The `afterRender` and `afterNextRender` functions let you register a **render callback** to be
-invoked after Angular has finished rendering _all components_ on the page into the DOM.
+`afterRender` 및 `afterNextRender` 함수는 Angular가 페이지의 _모든 구성요소_를 DOM에 렌더링한 후 호출될 **렌더 콜백**을 등록할 수 있게 해줍니다.
 
-These functions are different from the other lifecycle hooks described in this guide. Rather than a
-class method, they are standalone functions that accept a callback. The execution of render
-callbacks are not tied to any specific component instance, but instead an application-wide hook.
+이 함수들은 이 가이드에 설명된 다른 생명 주기 훅과 다릅니다. 클래스 메서드가 아닌 콜백을 수용하는 독립형 함수입니다. 렌더 콜백의 실행은 특정 구성 요소 인스턴스에 묶이지 않고 애플리케이션 전역 훅에 tied됩니다.
 
-`afterRender` and `afterNextRender` must be called in
-an [injection context](guide/di/dependency-injection-context), typically a
-component's constructor.
+`afterRender` 및 `afterNextRender`는 [주입 컨텍스트](guide/di/dependency-injection-context), 일반적으로 구성 요소의 생성자 내에서 호출되어야 합니다.
 
-You can use render callbacks to perform manual DOM operations.
-See [Using DOM APIs](guide/components/dom-apis) for guidance on working with the DOM in Angular.
+수동 DOM 작업을 수행하는 데 렌더 콜백을 사용할 수 있습니다. Angular에서 DOM 작업에 대한 가이드는 [DOM API 사용](guide/components/dom-apis)을 참조하세요.
 
-Render callbacks do not run during server-side rendering or during build-time pre-rendering.
+렌더 콜백은 서버 측 렌더링 또는 빌드 타임 미리 렌더링 중에 실행되지 않습니다.
 
-#### afterRender phases
+#### afterRender 단계
 
-When using `afterRender` or `afterNextRender`, you can optionally split the work into phases. The
-phase gives you control over the sequencing of DOM operations, letting you sequence _write_
-operations before _read_ operations in order to minimize
-[layout thrashing](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing). In order to
-communicate across phases, a phase function may return a result value that can be accessed in the
-next phase.
+`afterRender` 또는 `afterNextRender`를 사용할 때 작업을 단계별로 나눌 수 있습니다. 단계는 DOM 작업의 순서를 제어할 수 있게 해주며, _쓰기_ 작업을 _읽기_ 작업보다 먼저 순서대로 방출하여 [레이아웃 난수화](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing)를 최소화할 수 있습니다. 단계 간에 통신하려면 단계 함수가 다음 단계에서 액세스할 수 있는 결과 값을 반환할 수 있습니다.
 
 ```ts
 import {Component, ElementRef, afterNextRender} from '@angular/core';
@@ -258,17 +202,17 @@ export class UserProfile {
     const nativeElement = elementRef.nativeElement;
 
     afterNextRender({
-      // Use the `Write` phase to write to a geometric property.
+      // 기하학적 속성에 쓰기 위해 `Write` 단계를 사용합니다.
       write: () => {
         const padding = computePadding();
         const changed = padding !== this.prevPadding;
         if (changed) {
           nativeElement.style.padding = padding;
         }
-        return changed; // Communicate whether anything changed to the read phase.
+        return changed; // 읽기 단계에 변경된 것이 있는지 통신합니다.
       },
 
-      // Use the `Read` phase to read geometric properties after all writes have occurred.
+      // 모든 쓰기가 발생한 후 기하학적 속성을 읽기 위해 `Read` 단계를 사용합니다.
       read: (didWrite) => {
         if (didWrite) {
           this.elementHeight = nativeElement.getBoundingClientRect().height;
@@ -279,23 +223,20 @@ export class UserProfile {
 }
 ```
 
-There are four phases, run in the following order:
+다음과 같이 네 개의 단계가 있습니다:
 
-| Phase            | Description                                                                                                                                                                                           |
-| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `earlyRead`      | Use this phase to read any layout-affecting DOM properties and styles that are strictly necessary for subsequent calculation. Avoid this phase if possible, preferring the `write` and `read` phases. |
-| `mixedReadWrite` | Default phase. Use for any operations need to both read and write layout-affecting properties and styles. Avoid this phase if possible, preferring the explicit `write` and `read` phases.            |
-| `write`          | Use this phase to write layout-affecting DOM properties and styles.                                                                                                                                   |
-| `read`           | Use this phase to read any layout-affecting DOM properties.                                                                                                                                           |
+| 단계            | 설명                                                                                                                                                                                        |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `earlyRead`      | 후속 계산에 엄격히 필요한 DOM 속성 및 스타일을 읽기 위해 이 단계를 사용하세요. 가능한 경우 이 단계를 피하고 `write` 및 `read` 단계를 선호하세요.                                       |
+| `mixedReadWrite` | 기본 단계. 레이아웃에 영향을 미치는 속성과 스타일을 읽고 쓰기 위해 필요할 때 사용하세요. 가능한 경우 이 단계를 피하고 명시적인 `write` 및 `read` 단계를 선호하세요.                  |
+| `write`          | 레이아웃에 영향을 미치는 DOM 속성과 스타일을 쓰기 위해 이 단계를 사용하세요.                                                                                                                                   |
+| `read`           | 레이아웃에 영향을 미치는 DOM 속성을 읽기 위해 이 단계를 사용하세요.                                                                                                                                           |
 
-## Lifecycle interfaces
+## 생명 주기 인터페이스
 
-Angular provides a TypeScript interface for each lifecycle method. You can optionally import
-and `implement` these interfaces to ensure that your implementation does not have any typos or
-misspellings.
+Angular는 각 생명 주기 메서드에 대해 TypeScript 인터페이스를 제공합니다. 이러한 인터페이스를 선택적으로 가져와서 `implement`하여 구현에 오타나 잘못 표기된 부분이 없도록 할 수 있습니다.
 
-Each interface has the same name as the corresponding method without the `ng` prefix. For example,
-the interface for `ngOnInit` is `OnInit`.
+각 인터페이스는 해당 메서드와 같은 이름을 가지며 `ng` 접두사가 없습니다. 예를 들어 `ngOnInit`의 인터페이스는 `OnInit`입니다.
 
 ```ts
 @Component({
@@ -308,16 +249,16 @@ export class UserProfile implements OnInit {
 }
 ```
 
-## Execution order
+## 실행 순서
 
-The following diagrams show the execution order of Angular's lifecycle hooks.
+다음 다이어그램은 Angular의 생명 주기 훅의 실행 순서를 보여줍니다.
 
-### During initialization
+### 초기화 중
 
 ```mermaid
 graph TD;
 id[constructor]-->CHANGE;
-subgraph CHANGE [Change detection]
+subgraph CHANGE [변경 탐지]
 direction TB
 ngOnChanges-->ngOnInit;
 ngOnInit-->ngDoCheck;
@@ -326,25 +267,22 @@ ngDoCheck-->ngAfterViewInit
 ngAfterContentInit-->ngAfterContentChecked
 ngAfterViewInit-->ngAfterViewChecked
 end
-CHANGE--Rendering-->afterRender
+CHANGE--렌더링-->afterRender
 ```
 
-### Subsequent updates
+### 후속 업데이트
 
 ```mermaid
 graph TD;
-subgraph CHANGE [Change detection]
+subgraph CHANGE [변경 탐지]
 direction TB
 ngOnChanges-->ngDoCheck
 ngDoCheck-->ngAfterContentChecked;
 ngDoCheck-->ngAfterViewChecked
 end
-CHANGE--Rendering-->afterRender
+CHANGE--렌더링-->afterRender
 ```
 
-### Ordering with directives
+### 지시문으로 정렬
 
-When you put one or more directives on the same element as a component, either in a template or with
-the `hostDirectives` property, the framework does not guarantee any ordering of a given lifecycle
-hook between the component and the directives on a single element. Never depend on an observed
-ordering, as this may change in later versions of Angular.
+하나 이상의 지시문을 템플릿의 구성 요소와 같은 요소에 표시하는 경우, 해당 구성 요소의 특정 생명 주기 훅에 대한 순서를 보장하지 않습니다. 관찰된 순서에 의존하지 마세요. 이는 Angular의 이후 버전에서 변경될 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/components/outputs.md b/adev/src/content/guide/components/outputs.md
index 4d910cd6a445..4fe8fd5c2655 100644
--- a/adev/src/content/guide/components/outputs.md
+++ b/adev/src/content/guide/components/outputs.md
@@ -1,8 +1,8 @@
-# Custom events with outputs
+# 사용자 정의 이벤트와 출력
 
-Tip: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
+팁: 이 가이드는 이미 [필수 가이드](essentials)를 읽었다고 가정합니다. Angular에 익숙하지 않다면 먼저 해당 내용을 읽어보세요.
 
-Angular components can define custom events by assigning a property to the `output` function:
+Angular 구성 요소는 `output` 함수에 속성을 할당하여 사용자 정의 이벤트를 정의할 수 있습니다:
 
 <docs-code language="ts" highlight="3">
 @Component({/*...*/})
@@ -15,46 +15,46 @@ export class ExpandablePanel {
 <expandable-panel (panelClosed)="savePanelState()" />
 ```
 
-The `output` function returns an `OutputEmitterRef`. You can emit an event by calling the `emit` method on the `OutputEmitterRef`:
+`output` 함수는 `OutputEmitterRef`를 반환합니다. `OutputEmitterRef`에서 `emit` 메서드를 호출하여 이벤트를 발생시킬 수 있습니다:
 
 <docs-code language="ts" highlight="">
   this.panelClosed.emit();
 </docs-code>
 
-Angular refers to properties initialized with the `output` function as **outputs**. You can use outputs to raise custom events, similar to native browser events like `click`.
+Angular는 `output` 함수로 초기화된 속성을 **출력**이라고 합니다. 출력은 클릭과 같은 기본 브라우저 이벤트와 유사하게 사용자 정의 이벤트를 발생시키는 데 사용할 수 있습니다.
 
-**Angular custom events do not bubble up the DOM**.
+**Angular 사용자 정의 이벤트는 DOM에서 버블링되지 않습니다.**
 
-**Output names are case-sensitive.**
+**출력 이름은 대소문자를 구분합니다.**
 
-When extending a component class, **outputs are inherited by the child class.**
+구성 요소 클래스를 확장할 때 **출력은 자식 클래스에 상속됩니다.**
 
-The `output` function has special meaning to the Angular compiler. **You can exclusively call `output` in component and directive property initializers.**
+`output` 함수는 Angular 컴파일러에 특별한 의미가 있습니다. **구성 요소 및 지시문 속성 초기화자에서만 `output`을 호출할 수 있습니다.**
 
-## Emitting event data
+## 이벤트 데이터 발생
 
-You can pass event data when calling `emit`:
+`emit` 호출 시 이벤트 데이터를 전달할 수 있습니다:
 
 <docs-code language="ts" highlight="">
-// You can emit primitive values.
+// 원시 값을 발생시킬 수 있습니다.
 this.valueChanged.emit(7);
 
-// You can emit custom event objects
+// 사용자 정의 이벤트 객체를 발생시킬 수 있습니다.
 this.thumbDropped.emit({
   pointerX: 123,
   pointerY: 456,
 })
 </docs-code>
 
-When defining an event listener in a template, you can access the event data from the `$event` variable:
+템플릿에서 이벤트 리스너를 정의할 때 `$event` 변수를 통해 이벤트 데이터에 접근할 수 있습니다:
 
 ```angular-html
 <custom-slider (valueChanged)="logValue($event)" />
 ```
 
-## Customizing output names
+## 출력 이름 사용자 지정
 
-The `output` function accepts a parameter that lets you specify a different name for the event in a template:
+`output` 함수는 템플릿에서 이벤트의 다른 이름을 지정할 수 있는 매개변수를 받습니다:
 
 <docs-code language="ts" highlight="">
 @Component({/*...*/})
@@ -67,14 +67,13 @@ export class CustomSlider {
 <custom-slider (valueChanged)="saveVolume()" />
 ```
 
-This alias does not affect usage of the property in TypeScript code.
+이 별칭은 TypeScript 코드에서 속성 사용에 영향을 미치지 않습니다.
 
-While you should generally avoid aliasing outputs for components, this feature can be useful for renaming properties while preserving an alias for the original name or for avoiding collisions with the name of native DOM events.
+구성 요소의 출력에 별칭을 사용하는 것을 일반적으로 피해야 하지만, 이 기능은 원래 이름에 대한 별칭을 유지하면서 속성의 이름을 변경하거나 기본 DOM 이벤트의 이름과 충돌을 피하는 데 유용할 수 있습니다.
 
-## Subscribing to outputs programmatically
+## 프로그래밍 방식으로 출력 구독
 
-When creating a component dynamically, you can programmatically subscribe to output events
-from the component instance. The `OutputRef` type includes a `subscribe` method:
+구성 요소를 동적으로 만들 때 구성 요소 인스턴스에서 출력 이벤트를 프로그래밍 방식으로 구독할 수 있습니다. `OutputRef` 유형은 `subscribe` 메서드를 포함합니다:
 
 ```ts
 const someComponentRef: ComponentRef<SomeComponent> = viewContainerRef.createComponent(/*...*/);
@@ -84,7 +83,7 @@ someComponentRef.instance.someEventProperty.subscribe(eventData => {
 });
 ```
 
-Angular automatically cleans up event subscriptions when it destroys components with subscribers. Alternatively, you can manually unsubscribe from an event. The `subscribe` function returns an `OutputRefSubscription` with an `unsubscribe` method:
+Angular는 구독자가 있는 구성 요소를 파괴할 때 자동으로 이벤트 구독을 정리합니다. 또는 이벤트에서 수동으로 구독을 취소할 수 있습니다. `subscribe` 함수는 `unsubscribe` 메서드가 있는 `OutputRefSubscription`을 반환합니다:
 
 ```typescript
 const eventSubscription = someComponent.someEventProperty.subscribe(eventData => {
@@ -96,24 +95,23 @@ const eventSubscription = someComponent.someEventProperty.subscribe(eventData =>
 eventSubscription.unsubscribe();
 ```
 
-## Choosing event names
+## 이벤트 이름 선택하기
 
-Avoid choosing output names that collide with events on DOM elements like HTMLElement. Name collisions introduce confusion about whether the bound property belongs to the component or the DOM element.
+DOM 요소의 이벤트와 충돌하는 출력 이름을 선택하지 않도록 하세요. 이름 충돌은 연결된 속성이 구성 요소에 속하는지 DOM 요소에 속하는지에 대한 혼란을 초래합니다.
 
-Avoid adding prefixes for component outputs like you would with component selectors. Since a given element can only host one component, any custom properties can be assumed to belong to the component.
+구성 요소 선택자처럼 구성 요소 출력에 접두사를 추가하지 마세요. 주어진 요소는 하나의 구성 요소만 호스팅할 수 있으므로 모든 사용자 정의 속성은 구성 요소에 속한다고 가정할 수 있습니다.
 
-Always use [camelCase](https://en.wikipedia.org/wiki/Camel_case) output names. Avoid prefixing output names with "on".
+항상 [camelCase](https://en.wikipedia.org/wiki/Camel_case) 출력 이름을 사용하세요. "on"으로 출력 이름에 접두사를 추가하는 것은 피하세요.
 
-## Using outputs with RxJS
+## RxJS와 함께 출력 사용하기
 
-See [RxJS interop with component and directive outputs](ecosystem/rxjs-interop/output-interop) for details on interoperability between outputs and RxJS.
+출력과 RxJS 간의 상호 운용성에 대한 자세한 내용은 [RxJS와 구성 요소 및 지시문 출력을 이용한 상호 운용](ecosystem/rxjs-interop/output-interop)을 참조하세요.
 
-## Declaring outputs with the `@Output` decorator
+## `@Output` 데코레이터로 출력 선언하기
 
-Tip: While the Angular team recommends using the `output` function for new projects, the
-original decorator-based `@Output` API remains fully supported.
+팁: Angular 팀은 새로운 프로젝트에 `output` 함수를 사용하는 것을 권장하지만, 원래의 데코레이터 기반 `@Output` API는 여전히 완전히 지원됩니다.
 
-You can alternatively define custom events by assigning a property to a new `EventEmitter` and adding the `@Output` decorator:
+대신 새 `EventEmitter`에 속성을 할당하고 `@Output` 데코레이터를 추가하여 사용자 정의 이벤트를 정의할 수 있습니다:
 
 <docs-code language="ts" highlight="">
 @Component({/*...*/})
@@ -122,11 +120,11 @@ export class ExpandablePanel {
 }
 </docs-code>
 
-You can emit an event by calling the `emit` method on the `EventEmitter`.
+`EventEmitter`에서 `emit` 메서드를 호출하여 이벤트를 발생시킬 수 있습니다.
 
-### Aliases with the `@Output` decorator
+### `@Output` 데코레이터의 별칭
 
-The `@Output` decorator accepts a parameter that lets you specify a different name for the event in a template:
+`@Output` 데코레이터는 템플릿에서 이벤트의 다른 이름을 지정할 수 있는 매개변수를 받습니다:
 
 <docs-code language="ts" highlight="">
 @Component({/*...*/})
@@ -139,14 +137,14 @@ export class CustomSlider {
 <custom-slider (valueChanged)="saveVolume()" />
 ```
 
-This alias does not affect usage of the property in TypeScript code.
+이 별칭은 TypeScript 코드에서 속성 사용에 영향을 미치지 않습니다.
 
-## Specify outputs in the `@Component` decorator
+## `@Component` 데코레이터에서 출력 지정하기
 
-In addition to the `@Output` decorator, you can also specify a component's outputs with the `outputs` property in the `@Component` decorator. This can be useful when a component inherits a property from a base class:
+`@Output` 데코레이터 외에도 `@Component` 데코레이터의 `outputs` 속성을 사용하여 구성 요소의 출력을 지정할 수 있습니다. 이는 구성 요소가 기본 클래스에서 속성을 상속받을 때 유용할 수 있습니다:
 
 <docs-code language="ts" highlight="">
-// `CustomSlider` inherits the `valueChanged` property from `BaseSlider`.
+// `CustomSlider`는 `BaseSlider`에서 `valueChanged` 속성을 상속합니다.
 @Component({
   /*...*/
   outputs: ['valueChanged'],
@@ -154,13 +152,13 @@ In addition to the `@Output` decorator, you can also specify a component's outpu
 export class CustomSlider extends BaseSlider {}
 </docs-code>
 
-You can additionally specify an output alias in the `outputs` list by putting the alias after a colon in the string:
+별칭을 지정할 경우 문자열에서 콜론 뒤에 별칭을 적어 `outputs` 목록에서 별칭을 추가할 수 있습니다:
 
 <docs-code language="ts" highlight="">
-// `CustomSlider` inherits the `valueChanged` property from `BaseSlider`.
+// `CustomSlider`는 `BaseSlider`에서 `valueChanged` 속성을 상속합니다.
 @Component({
   /*...*/
   outputs: ['valueChanged: volumeChanged'],
 })
 export class CustomSlider extends BaseSlider {}
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/guide/components/programmatic-rendering.md b/adev/src/content/guide/components/programmatic-rendering.md
index 9975fae62f3a..a7f489cf4d8e 100644
--- a/adev/src/content/guide/components/programmatic-rendering.md
+++ b/adev/src/content/guide/components/programmatic-rendering.md
@@ -1,15 +1,13 @@
-# Programmatically rendering components
+# 프로그램적으로 컴포넌트 렌더링하기
 
-Tip: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
+팁: 이 가이드는 여러분이 이미 [필수 가이드](essentials)를 읽었다고 가정합니다. Angular가 처음이라면 먼저 그 내용을 읽으세요.
 
-In addition to using a component directly in a template, you can also dynamically render components.
-There are two main ways to dynamically render a component: in a template with `NgComponentOutlet`,
-or in your TypeScript code with `ViewContainerRef`.
+템플릿에서 컴포넌트를 직접 사용하는 것 외에도, 컴포넌트를 동적으로 렌더링할 수 있습니다.
+컴포넌트를 동적으로 렌더링하는 주요 방법은 `NgComponentOutlet`을 사용하는 것과 `ViewContainerRef`를 사용하는 것입니다.
 
-## Using NgComponentOutlet
+## NgComponentOutlet 사용하기
 
-`NgComponentOutlet` is a structural directive that dynamically renders a given component in a
-template.
+`NgComponentOutlet`은 주어진 컴포넌트를 템플릿에서 동적으로 렌더링하는 구조 지시어입니다.
 
 ```angular-ts
 @Component({ ... })
@@ -21,7 +19,7 @@ export class StandardBio { /* ... */ }
 @Component({
   ...,
   template: `
-    <p>Profile for {{user.name}}</p>
+    <p>프로필: {{user.name}}</p>
     <ng-container *ngComponentOutlet="getBioComponent()" /> `
 })
 export class CustomDialog {
@@ -33,24 +31,19 @@ export class CustomDialog {
 }
 ```
 
-See the [NgComponentOutlet API reference](api/common/NgComponentOutlet) for more information on the
-directive's capabilities.
+지시어의 기능에 대한 더 많은 정보는 [NgComponentOutlet API 참조](api/common/NgComponentOutlet)를 참조하세요.
 
-## Using ViewContainerRef
+## ViewContainerRef 사용하기
 
-A **view container** is a node in Angular's component tree that can contain content. Any component
-or directive can inject `ViewContainerRef` to get a reference to a view container corresponding to
-that component or directive's location in the DOM.
+**뷰 컨테이너**는 Angular의 컴포넌트 트리에서 콘텐츠를 포함할 수 있는 노드를 의미합니다. 어떤 컴포넌트나 지시어도 `ViewContainerRef`를 주입하여 해당 컴포넌트나 지시어의 DOM 내 위치에 해당하는 뷰 컨테이너의 참조를 얻을 수 있습니다.
 
-You can use the `createComponent`method on `ViewContainerRef` to dynamically create and render a
-component. When you create a new component with a `ViewContainerRef`, Angular appends it into the
-DOM as the next sibling of the component or directive that injected the `ViewContainerRef`.
+`ViewContainerRef`의 `createComponent` 메서드를 사용하여 컴포넌트를 동적으로 생성하고 렌더링할 수 있습니다. `ViewContainerRef`로 새로운 컴포넌트를 생성하면 Angular는 이를 `ViewContainerRef`를 주입한 컴포넌트나 지시어의 다음 형제로 DOM에 추가합니다.
 
 ```angular-ts
 @Component({
   selector: 'leaf-content',
   template: `
-    This is the leaf content
+    이것은 리프 콘텐츠입니다
   `,
 })
 export class LeafContent {}
@@ -58,9 +51,9 @@ export class LeafContent {}
 @Component({
   selector: 'outer-container',
   template: `
-    <p>This is the start of the outer container</p>
+    <p>이것은 외부 컨테이너의 시작입니다</p>
     <inner-item />
-    <p>This is the end of the outer container</p>
+    <p>이것은 외부 컨테이너의 끝입니다</p>
   `,
 })
 export class OuterContainer {}
@@ -68,7 +61,7 @@ export class OuterContainer {}
 @Component({
   selector: 'inner-item',
   template: `
-    <button (click)="loadContent()">Load content</button>
+    <button (click)="loadContent()">콘텐츠 로드하기</button>
   `,
 })
 export class InnerItem {
@@ -80,37 +73,35 @@ export class InnerItem {
 }
 ```
 
-In the example above, clicking the "Load content" button results in the following DOM structure
+위의 예에서 "콘텐츠 로드하기" 버튼을 클릭하면 다음과 같은 DOM 구조가 생성됩니다.
 
 ```angular-html
 <outer-container>
-  <p>This is the start of the outer container</p>
+  <p>이것은 외부 컨테이너의 시작입니다</p>
   <inner-item>
-    <button>Load content</button>
+    <button>콘텐츠 로드하기</button>
   </inner-item>
-  <leaf-content>This is the leaf content</leaf-content>
-  <p>This is the end of the outer container</p>
+  <leaf-content>이것은 리프 콘텐츠입니다</leaf-content>
+  <p>이것은 외부 컨테이너의 끝입니다</p>
 </outer-container>
 ```
 
-## Lazy-loading components
+## 지연 로딩 컴포넌트
 
-You can use both of the approaches described above, `NgComponentOutlet` and `ViewContainerRef`, to
-render components that are lazy-loaded with a standard
-JavaScript [dynamic import](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import).
+위에서 설명한 두 가지 접근 방법인 `NgComponentOutlet`과 `ViewContainerRef`를 사용할 수 있으며, 이를 통해 표준 JavaScript [동적 import](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import)와 함께 지연 로드된 컴포넌트를 렌더링할 수 있습니다.
 
 ```angular-ts
 @Component({
   ...,
   template: `
     <section>
-      <h2>Basic settings</h2>
+      <h2>기본 설정</h2>
       <basic-settings />
     </section>
     <section>
-      <h2>Advanced settings</h2>
+      <h2>고급 설정</h2>
       <button (click)="loadAdvanced()" *ngIf="!advancedSettings">
-        Load advanced settings
+        고급 설정 로드하기
       </button>
       <ng-container *ngComponentOutlet="advancedSettings" />
     </section>
@@ -126,4 +117,4 @@ export class AdminSettings {
 }
 ```
 
-The example above loads and displays the `AdvancedSettings` upon receiving a button click.
+위의 예제는 버튼 클릭을 통해 `AdvancedSettings`를 로드하고 표시합니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/components/queries.md b/adev/src/content/guide/components/queries.md
index d3a5c8eaf509..559b13e6836a 100644
--- a/adev/src/content/guide/components/queries.md
+++ b/adev/src/content/guide/components/queries.md
@@ -1,19 +1,18 @@
-# Referencing component children with queries
+# 자식 컴포넌트 참조하기
 
-Tip: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
+팁: 이 가이드는 당신이 이미 [기본 가이드](essentials)를 읽었음을 가정합니다. Angular에 처음이라면, 먼저 그것을 읽으세요.
 
-A component can define **queries** that find child elements and read values from their injectors.
+컴포넌트는 자식 요소를 찾고 인젝터에서 값을 읽어오는 **쿼리**를 정의할 수 있습니다.
 
-Developers most commonly use queries to retrieve references to child components, directives, DOM elements, and more.
+개발자는 일반적으로 쿼리를 사용하여 자식 컴포넌트, 지시자, DOM 요소 등의 참조를 가져옵니다.
 
-All query functions return signals that reflect the most up-to-date results. You can read the
-result by calling the signal function, including in reactive contexts like `computed` and `effect`.
+모든 쿼리 함수는 가장 최신의 결과를 반영하는 신호를 반환합니다. 신호 함수를 호출하여 결과를 읽을 수 있으며, `computed`나 `effect`와 같은 반응형 컨텍스트에서도 가능합니다.
 
-There are two categories of query: **view queries** and **content queries.**
+쿼리는 두 가지 범주가 있습니다: **뷰 쿼리**와 **콘텐츠 쿼리**.
 
-## View queries
+## 뷰 쿼리
 
-View queries retrieve results from the elements in the component's _view_ — the elements defined in the component's own template. You can query for a single result with the `viewChild` function.
+뷰 쿼리는 컴포넌트의 _뷰_에 있는 요소로부터 결과를 검색합니다 — 컴포넌트의 자체 템플릿에서 정의된 요소입니다. `viewChild` 함수를 사용하여 단일 결과를 쿼리할 수 있습니다.
 
 <docs-code language="angular-ts" highlight="[14, 15]">
 @Component({
@@ -34,11 +33,11 @@ export class CustomCard {
 }
 </docs-code>
 
-In this example, the `CustomCard` component queries for a child `CustomCardHeader` and uses the result in a `computed`.
+이 예제에서 `CustomCard` 컴포넌트는 자식 `CustomCardHeader`를 쿼리하고 `computed`에서 결과를 사용합니다.
 
-If the query does not find a result, its value is `undefined`. This may occur if the target element is hidden by `@if`. Angular keeps the result of `viewChild` up to date as your application state changes.
+쿼리가 결과를 찾지 못하면, 그 값은 `undefined`가 됩니다. 이는 대상 요소가 `@if`로 숨겨져 있을 때 발생할 수 있습니다. Angular는 애플리케이션 상태가 변화함에 따라 `viewChild`의 결과를 최신 상태로 유지합니다.
 
-You can also query for multiple results with the `viewChildren` function.
+또한 `viewChildren` 함수를 사용하여 여러 결과를 쿼리할 수 있습니다.
 
 <docs-code language="angular-ts" highlight="[17, 19, 20, 21, 22, 23]">
 @Component({
@@ -58,17 +57,17 @@ export class CustomCardAction {
 })
 export class CustomCard {
   actions = viewChildren(CustomCardAction);
-  actionsTexts = computed(() => this.actions().map(action => action.text);
+  actionsTexts = computed(() => this.actions().map(action => action.text));
 }
 </docs-code>
 
-`viewChildren` creates a signal with an `Array` of the query results.
+`viewChildren`는 쿼리 결과의 `Array`로 신호를 생성합니다.
 
-**Queries never pierce through component boundaries.** View queries can only retrieve results from the component's template.
+**쿼리는 컴포넌트 경계를 넘을 수 없습니다.** 뷰 쿼리는 컴포넌트의 템플릿에서만 결과를 검색할 수 있습니다.
 
-## Content queries
+## 콘텐츠 쿼리
 
-Content queries retrieve results from the elements in the component's _content_— the elements nested inside the component in the template where it's used. You can query for a single result with the `contentChild` function.
+콘텐츠 쿼리는 컴포넌트의 _내용_에 있는 요소로부터 결과를 검색합니다 — 사용될 템플릿 내에 컴포넌트 내부에 중첩된 요소입니다. `contentChild` 함수를 사용하여 단일 결과를 쿼리할 수 있습니다.
 
 <docs-code language="angular-ts" highlight="[14, 15]">
 @Component({
@@ -90,7 +89,7 @@ export class CustomExpando {
 
 @Component({ 
   /* ... */
-  // CustomToggle is used inside CustomExpando as content.  
+  // CustomToggle는 CustomExpando 내부에서 내용으로 사용됩니다.  
   template: `
     <custom-expando>
       <custom-toggle>Show</custom-toggle>
@@ -100,13 +99,13 @@ export class CustomExpando {
 export class UserProfile { }
 </docs-code>
 
-In this example, the `CustomExpando` component queries for a child `CustomToggle` and accesses the result in a `computed`.
+이 예제에서 `CustomExpando` 컴포넌트는 자식 `CustomToggle`을 쿼리하고 `computed`에서 결과에 접근합니다.
 
-If the query does not find a result, its value is `undefined`. This may occur if the target element is absent or hidden by `@if`. Angular keeps the result of `contentChild` up to date as your application state changes.
+쿼리가 결과를 찾지 못하면, 그 값은 `undefined`가 됩니다. 이는 대상 요소가 존재하지 않거나 `@if`로 숨겨져 있을 때 발생할 수 있습니다. Angular는 애플리케이션 상태가 변화함에 따라 `contentChild`의 결과를 최신 상태로 유지합니다.
 
-By default, content queries find only _direct_ children of the component and do not traverse into descendants.
+기본적으로 콘텐츠 쿼리는 컴포넌트의 _직접_ 자식만 찾으며, 자손으로는 탐색하지 않습니다.
 
-You can also query for multiple results with the `contentChildren` function.
+또한 `contentChildren` 함수를 사용하여 여러 결과를 쿼리할 수 있습니다.
 
 <docs-code language="angular-ts" highlight="[14, 16, 17, 18, 19, 20]">
 @Component({
@@ -138,15 +137,15 @@ export class CustomMenu {
 export class UserProfile { }
 </docs-code>
 
-`contentChildren` creates a signal with an `Array` of the query results.
+`contentChildren`는 쿼리 결과의 `Array`로 신호를 생성합니다.
 
-**Queries never pierce through component boundaries.** Content queries can only retrieve results from the same template as the component itself.
+**쿼리는 컴포넌트 경계를 넘을 수 없습니다.** 콘텐츠 쿼리는 컴포넌트 자체와 동일한 템플릿에서만 결과를 검색할 수 있습니다.
 
-## Required queries
+## 필수 쿼리
 
-If a child query (`viewChild` or `contentChild`) does not find a result, its value is `undefined`. This may occur if the target element is hidden by a control flow statement like `@if` or `@for`. Because of this, the child queries return a signal that include `undefined` in their value type.
+자식 쿼리(`viewChild` 또는 `contentChild`)가 결과를 찾지 못하면, 그 값은 `undefined`가 됩니다. 이는 대상 요소가 `@if` 또는 `@for`와 같은 제어 흐름 문으로 숨겨져 있을 수 있습니다. 이로 인해 자식 쿼리는 값 유형에 `undefined`가 포함된 신호를 반환합니다.
 
-If some cases, especially with `viewChild`, you know with certainty that a specific child is always available. In other cases, you may want to strictly enforce that a specific child is present. For these cases, you can use a *required query*.
+특히 `viewChild`와 관련하여, 특정 자식이 항상 사용 가능하다는 확신이 있는 경우가 있습니다. 다른 경우에는 특정 자식이 반드시 존재하도록 엄격히 enforce하고 싶을 수도 있습니다. 이러한 경우, *필수 쿼리*를 사용할 수 있습니다.
 
 ```angular-ts
 @Component({/* ... */})
@@ -156,16 +155,15 @@ export class CustomCard {
 }
 ```
 
-If a required query does not find a matching result, Angular reports an error. Because this guarantees that a result is available, require queries do not automatically include `undefined` in the signal's value type.
+필수 쿼리가 일치하는 결과를 찾지 못하면, Angular는 오류를 보고합니다. 결과가 항상 사용 가능하다는 보장을 제공하므로, 필수 쿼리는 신호의 값 유형에 자동으로 `undefined`를 포함하지 않습니다.
 
-## Query locators
+## 쿼리 로케이터
 
-This first parameter for each query decorator is its **locator**.
+각 쿼리 데코레이터의 첫 번째 매개변수는 그 **로케이터**입니다.
 
-Most of the time, you want to use a component or directive as your locator.
+대부분의 경우, 컴포넌트나 지시자를 로케이터로 사용하고 싶습니다.
 
-You can alternatively specify a string locator corresponding to
-a [template reference variable](guide/templates/variables#template-reference-variables).
+대안으로, [템플릿 참조 변수](guide/templates/variables#template-reference-variables)에 해당하는 문자열 로케이터를 지정할 수 있습니다.
 
 ```angular-ts
 @Component({
@@ -180,15 +178,15 @@ export class ActionBar {
 }
 ```
 
-If more than one element defines the same template reference variable, the query retrieves the first matching element.
+하나 이상의 요소가 동일한 템플릿 참조 변수를 정의하는 경우, 쿼리는 첫 번째 일치하는 요소를 가져옵니다.
 
-Angular does not support CSS selectors as query locators.
+Angular는 쿼리 로케이터로 CSS 선택기를 지원하지 않습니다.
 
-### Queries and the injector tree
+### 쿼리와 인젝터 트리
 
-Tip: See [Dependency Injection](guide/di) for background on providers and Angular's injection tree.
+팁: 제공자와 Angular의 인젝션 트리에 대한 배경을 보려면 [의존성 주입](guide/di)을 참조하세요.
 
-For more advanced cases, you can use any `ProviderToken` as a locator. This lets you locate elements based on component and directive providers.
+더 발전된 경우, `ProviderToken`을 로케이터로 사용할 수 있습니다. 이렇게 하면 컴포넌트 및 지시자 제공자를 기반으로 요소를 찾을 수 있습니다.
 
 ```angular-ts
 const SUB_ITEM = new InjectionToken<string>('sub-item');
@@ -205,15 +203,15 @@ export class CustomList {
 }
 ```
 
-The above example uses an `InjectionToken` as a locator, but you can use any `ProviderToken` to locate specific elements.
+위의 예제는 로케이터로 `InjectionToken`을 사용하지만, 특정 요소를 찾기 위해 어떤 `ProviderToken`도 사용할 수 있습니다.
 
-## Query options
+## 쿼리 옵션
 
-All query functions accept an options object as a second parameter. These options control how the query finds its results.
+모든 쿼리 함수는 두 번째 매개변수로 옵션 객체를 허용합니다. 이러한 옵션은 쿼리가 결과를 찾는 방식을 제어합니다.
 
-### Reading specific values from an element's injector
+### 요소의 인젝터에서 특정 값 읽기
 
-By default, the query locator indicates both the element you're searching for and the value retrieved. You can alternatively specify the `read` option to retrieve a different value from the element matched by the locator.
+기본적으로, 쿼리 로케이터는 검색 중인 요소와 검색된 값을 모두 나타냅니다. 대신 로케이터에 의해 일치하는 요소에서 다른 값을 검색하기 위해 `read` 옵션을 지정할 수 있습니다.
 
 ```ts
 @Component({/*...*/})
@@ -222,14 +220,13 @@ export class CustomExpando {
 }
 ```
 
-The above example, locates an element with the directive `ExpandoContent` and retrieves
-the `TemplateRef` associated with that element.
+위의 예제는 `ExpandoContent` 지시어를 가진 요소를 찾고 해당 요소와 연결된 `TemplateRef`를 검색합니다.
 
-Developers most commonly use `read` to retrieve `ElementRef` and `TemplateRef`.
+개발자는 일반적으로 `read`를 사용하여 `ElementRef`와 `TemplateRef`를 검색합니다.
 
-### Content descendants
+### 콘텐츠 자손
 
-By default, content queries find only _direct_ children of the component and do not traverse into descendants.
+기본적으로 콘텐츠 쿼리는 컴포넌트의 _직접_ 자식만 찾으며, 자손으로는 탐색하지 않습니다.
 
 <docs-code language="angular-ts" highlight="[13, 14, 15, 16]">
 @Component({
@@ -245,7 +242,7 @@ export class CustomExpando {
   template: `
     <custom-expando>
       <some-other-component>
-        <!-- custom-toggle will not be found! -->
+        <!-- custom-toggle는 발견되지 않습니다! -->
         <custom-toggle>Show</custom-toggle>
       </some-other-component>
     </custom-expando>
@@ -254,19 +251,18 @@ export class CustomExpando {
 export class UserProfile { }
 </docs-code>
 
-In the example above, `CustomExpando` cannot find `<custom-toggle>` because it is not a direct child of `<custom-expando>`. By setting `descendants: true`, you configure the query to traverse all descendants in the same template. Queries, however, _never_ pierce into components to traverse elements in other templates.
+위의 예제에서 `CustomExpando`는 `<custom-toggle>`을 찾을 수 없습니다. 이는 `<custom-expando>`의 직접 자식이 아니기 때문입니다. `descendants: true`를 설정하면 쿼리가 동일한 템플릿 내의 모든 자손을 탐색하도록 구성할 수 있습니다. 그러나 쿼리는 _절대_ 다른 템플릿의 요소를 탐색하기 위해 컴포넌트 내부로 뚫고 들어가지는 않습니다.
 
-View queries do not have this option because they _always_ traverse into descendants.
+뷰 쿼리에는 이 옵션이 없습니다. 왜냐하면 뷰 쿼리는 _항상_ 자손으로 들어가기 때문입니다.
 
-## Decorator-based queries
-Tip: While the Angular team recommends using the signal-based query function for new projects, the
-original decorator-based query APIs remain fully supported.
+## 데코레이터 기반 쿼리 
+팁: Angular 팀은 새로운 프로젝트에 신호 기반 쿼리 함수를 사용할 것을 권장하지만, 원래의 데코레이터 기반 쿼리 API는 여전히 완전히 지원됩니다.
 
-You can alternatively declare queries by adding the corresponding decorator to a property. Decorator-based queries behave the same way as signal-based queries except as described below.
+속성에 해당하는 데코레이터를 추가하여 쿼리를 선언할 수 있습니다. 데코레이터 기반 쿼리는 아래에서 설명하는 것을 제외하고 신호 기반 쿼리와 동일하게 작동합니다.
 
-### View queries
+### 뷰 쿼리
 
-You can query for a single result with the `@ViewChild` decorator.
+`@ViewChild` 데코레이터를 사용하여 단일 결과를 쿼리할 수 있습니다.
 
 <docs-code language="angular-ts" highlight="[14, 16, 17, 18]">
 @Component({
@@ -290,13 +286,13 @@ export class CustomCard {
 }
 </docs-code>
 
-In this example, the `CustomCard` component queries for a child `CustomCardHeader` and accesses the result in `ngAfterViewInit`.
+이 예제에서 `CustomCard` 컴포넌트는 자식 `CustomCardHeader`를 쿼리하고 `ngAfterViewInit`에서 결과에 접근합니다.
 
-Angular keeps the result of `@ViewChild` up to date as your application state changes.
+Angular는 애플리케이션 상태가 변화함에 따라 `@ViewChild`의 결과를 최신 상태로 유지합니다.
 
-**View query results become available in the `ngAfterViewInit` lifecycle method**. Before this point, the value is `undefined`. See the [Lifecycle](guide/components/lifecycle) section for details on the component lifecycle.
+**뷰 쿼리 결과는 `ngAfterViewInit` 생명주기 메서드에서 사용할 수 있게 됩니다**. 이 시점 이전에는 값이 `undefined`입니다. 컴포넌트 생명 주기에 대한 자세한 내용은 [Lifecycle](guide/components/lifecycle) 섹션을 참조하세요.
 
-You can also query for multiple results with the `@ViewChildren` decorator.
+`@ViewChildren` 데코레이터를 사용하여 여러 결과를 쿼리할 수도 있습니다.
 
 <docs-code language="angular-ts" highlight="[17, 19, 20, 21, 22, 23]">
 @Component({
@@ -325,11 +321,11 @@ export class CustomCard {
 }
 </docs-code>
 
-`@ViewChildren` creates a `QueryList` object that contains the query results. You can subscribe to changes to the query results over time via the `changes` property.
+`@ViewChildren`는 쿼리 결과가 포함된 `QueryList` 객체를 생성합니다. 시간 경과에 따른 쿼리 결과의 변경 사항을 `changes` 속성을 통해 구독할 수 있습니다.
 
-### Content queries
+### 콘텐츠 쿼리
 
-You can query for a single result with the `@ContentChild` decorator.
+`@ContentChild` 데코레이터를 사용하여 단일 결과를 쿼리할 수 있습니다.
 
 <docs-code language="angular-ts" highlight="[14, 16, 17, 18, 25]">
 @Component({
@@ -363,13 +359,13 @@ export class CustomExpando {
 export class UserProfile { }
 </docs-code>
 
-In this example, the `CustomExpando` component queries for a child `CustomToggle` and accesses the result in `ngAfterContentInit`.
+이 예제에서 `CustomExpando` 컴포넌트는 자식 `CustomToggle`를 쿼리하고 `ngAfterContentInit`에서 결과에 접근합니다.
 
-Angular keeps the result of `@ContentChild` up to date as your application state changes.
+Angular는 애플리케이션 상태가 변화함에 따라 `@ContentChild`의 결과를 최신 상태로 유지합니다.
 
-**Content query results become available in the `ngAfterContentInit` lifecycle method**. Before this point, the value is `undefined`. See the [Lifecycle](guide/components/lifecycle) section for details on the component lifecycle.
+**콘텐츠 쿼리 결과는 `ngAfterContentInit` 생명주기 메서드에서 사용할 수 있게 됩니다**. 이 시점 이전에는 값이 `undefined`입니다. 컴포넌트 생명 주기에 대한 자세한 내용은 [Lifecycle](guide/components/lifecycle) 섹션을 참조하세요.
 
-You can also query for multiple results with the `@ContentChildren` decorator.
+`@ContentChildren` 데코레이터를 사용하여 여러 결과를 쿼리할 수도 있습니다.
 
 <docs-code language="angular-ts" highlight="[14, 16, 17, 18, 19, 20]">
 @Component({
@@ -406,15 +402,15 @@ export class CustomMenu {
 export class UserProfile { }
 </docs-code>
 
-`@ContentChildren` creates a `QueryList` object that contains the query results. You can subscribe to changes to the query results over time via the `changes` property.
+`@ContentChildren`는 쿼리 결과가 포함된 `QueryList` 객체를 생성합니다. 시간 경과에 따른 쿼리 결과의 변경 사항을 `changes` 속성을 통해 구독할 수 있습니다.
 
-### Decorator-based query options
+### 데코레이터 기반 쿼리 옵션
 
-All query decorators accept an options object as a second parameter. These options work the same way as signal-based queries except where described below.
+모든 쿼리 데코레이터는 두 번째 매개변수로 옵션 객체를 허용합니다. 이러한 옵션은 아래에서 설명하는 곳을 제외하고 신호 기반 쿼리와 동일하게 작동합니다.
 
-### Static queries
+### 정적 쿼리
 
-`@ViewChild` and `@ContentChild` decorators accept the `static` option.
+`@ViewChild` 및 `@ContentChild` 데코레이터는 `static` 옵션을 허용합니다.
 
 ```angular-ts
 @Component({
@@ -430,26 +426,26 @@ export class CustomCard {
 }
 ```
 
-By setting `static: true`, you guarantee to Angular that the target of this query is _always_ present and is not conditionally rendered. This makes the result available earlier, in the `ngOnInit` lifecycle method.
+`static: true`를 설정하면 Angular에 이 쿼리의 대상이 _항상_ 존재하고 조건부 렌더링되지 않음을 보장합니다. 이로 인해 결과를 `ngOnInit` 생명주기 메서드에서 더 일찍 사용할 수 있게 됩니다.
 
-Static query results do not update after initialization.
+정적 쿼리 결과는 초기화 후 업데이트되지 않습니다.
 
-The `static` option is not available for `@ViewChildren` and `@ContentChildren` queries.
+`@ViewChildren` 및 `@ContentChildren` 쿼리에는 `static` 옵션이 없습니다.
 
-### Using QueryList
+### QueryList 사용하기
 
-`@ViewChildren` and `@ContentChildren` both provide a `QueryList` object that contains a list of results.
+`@ViewChildren` 및 `@ContentChildren`는 모두 결과 목록이 포함된 `QueryList` 객체를 제공합니다.
 
-`QueryList` offers a number of convenience APIs for working with results in an array-like manner, such as `map`, `reduce`, and `forEach`. You can get an array of the current results by calling `toArray`.
+`QueryList`는 `map`, `reduce`, `forEach`와 같이 배열과 유사하게 결과를 처리하는 여러 편리한 API를 제공합니다. 현재 결과의 배열을 얻으려면 `toArray`를 호출하면 됩니다.
 
-You can subscribe to the `changes` property to do something any time the results change.
+결과가 변경될 때마다 수행할 작업이 있으면 `changes` 속성을 구독할 수 있습니다.
 
-## Common query pitfalls
+## 일반적인 쿼리 함정
 
-When using queries, common pitfalls can make your code harder to understand and maintain.
+쿼리를 사용할 때, 일반적인 함정은 코드를 이해하고 유지관리하기 어렵게 만들 수 있습니다.
 
-Always maintain a single source of truth for state shared between multiple components. This avoids scenarios where repeated state in different components becomes out of sync.
+여러 컴포넌트 간에 공유되는 상태의 단일 진실 소스를 항상 유지하세요. 이는 서로 다른 컴포넌트에서 반복된 상태가 동기화되지 않는 시나리오를 피하는 데 도움이 됩니다.
 
-Avoid directly writing state to child components. This pattern can lead to brittle code that is hard to understand and is prone to [ExpressionChangedAfterItHasBeenChecked](errors/NG0100) errors.
+자식 컴포넌트에 상태를 직접 작성하는 것을 피하세요. 이 패턴은 이해하기 어려운 깨지기 쉬운 코드를 초래할 수 있으며, [ExpressionChangedAfterItHasBeenChecked](errors/NG0100) 오류에 취약합니다.
 
-Never directly write state to parent or ancestor components. This pattern can lead to brittle code that is hard to understand and is prone to [ExpressionChangedAfterItHasBeenChecked](errors/NG0100) errors.
+부모 또는 조상 컴포넌트에 상태를 직접 작성하지 마세요. 이 패턴은 이해하기 어려운 깨지기 쉬운 코드를 초래할 수 있으며, [ExpressionChangedAfterItHasBeenChecked](errors/NG0100) 오류에 취약합니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/components/selectors.md b/adev/src/content/guide/components/selectors.md
index 6bc8c20d417d..d001db5b04b3 100644
--- a/adev/src/content/guide/components/selectors.md
+++ b/adev/src/content/guide/components/selectors.md
@@ -1,10 +1,8 @@
-# Component selectors
+# 구성 요소 선택기
 
-Tip: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
+팁: 이 가이드는 이미 [필수 가이드](essentials)를 읽었다고 가정합니다. Angular에 익숙하지 않은 경우 먼저 해당 내용을 읽으세요.
 
-Every component defines
-a [CSS selector](https://developer.mozilla.org/docs/Web/CSS/CSS_selectors) that determines how
-the component is used:
+모든 구성 요소는 구성 요소가 사용되는 방식을 결정하는 [CSS 선택기](https://developer.mozilla.org/docs/Web/CSS/CSS_selectors)를 정의합니다:
 
 <docs-code language="angular-ts" highlight="[2]">
 @Component({
@@ -14,54 +12,43 @@ the component is used:
 export class ProfilePhoto { }
 </docs-code>
 
-You use a component by creating a matching HTML element in the templates of _other_ components:
+구성 요소는 _다른_ 구성 요소의 템플릿에 일치하는 HTML 요소를 생성함으로써 사용합니다:
 
 <docs-code language="angular-ts" highlight="[3]">
 @Component({
   template: `
     <profile-photo />
-    <button>Upload a new profile photo</button>`,
+    <button>새 프로필 사진 업로드</button>`,
   ...,
 })
 export class UserProfile { }
 </docs-code>
 
-**Angular matches selectors statically at compile-time**. Changing the DOM at run-time, either via
-Angular bindings or with DOM APIs, does not affect the components rendered.
+**Angular는 컴파일 시간에 선택기를 정적으로 일치시킵니다**. 실행 시간에 DOM을 변경하면 Angular 바인딩이나 DOM API를 통해서도 렌더링된 구성 요소에는 영향을 미치지 않습니다.
 
-**An element can match exactly one component selector.** If multiple component selectors match a
-single element, Angular reports an error.
+**하나의 요소는 정확히 하나의 구성 요소 선택기에만 일치할 수 있습니다.** 여러 구성 요소 선택기가 단일 요소에 일치하는 경우 Angular는 오류를 보고합니다.
 
-**Component selectors are case-sensitive.**
+**구성 요소 선택기는 대소문자를 구분합니다.**
 
-## Types of selectors
+## 선택기 유형
 
-Angular supports a limited subset
-of [basic CSS selector types](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) in
-component selectors:
+Angular는 구성 요소 선택기에서 [기본 CSS 선택기 유형](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors)의 제한된 하위 집합을 지원합니다:
 
-| **Selector type**  | **Description**                                                                                                 | **Examples**                  |
-| ------------------ | --------------------------------------------------------------------------------------------------------------- | ----------------------------- |
-| Type selector      | Matches elements based on their HTML tag name, or node name.                                                    | `profile-photo`               |
-| Attribute selector | Matches elements based on the presence of an HTML attribute and, optionally, an exact value for that attribute. | `[dropzone]` `[type="reset"]` |
-| Class selector     | Matches elements based on the presence of a CSS class.                                                          | `.menu-item`                  |
+| **선택기 유형**  | **설명**                                                                                                    | **예**                       |
+| ----------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------- |
+| 유형 선택기      | HTML 태그 이름 또는 노드 이름을 기준으로 요소와 일치합니다.                                               | `profile-photo`              |
+| 속성 선택기      | HTML 속성의 존재와 선택적으로 해당 속성의 정확한 값을 기준으로 요소와 일치합니다.                        | `[dropzone]` `[type="reset"]` |
+| 클래스 선택기     | CSS 클래스의 존재를 기준으로 요소와 일치합니다.                                                           | `.menu-item`                 |
 
-For attribute values, Angular supports matching an exact attribute value with the equals (`=`)
-operator. Angular does not support other attribute value operators.
+속성 값의 경우, Angular는 등호(`=`) 연산자를 사용하여 정확한 속성 값을 일치시키는 것을 지원합니다. Angular는 다른 속성 값 연산자를 지원하지 않습니다.
 
-Angular component selectors do not support combinators, including
-the [descendant combinator](https://developer.mozilla.org/docs/Web/CSS/Descendant_combinator)
-or [child combinator](https://developer.mozilla.org/docs/Web/CSS/Child_combinator).
+Angular 구성 요소 선택기는 [자손 결합기](https://developer.mozilla.org/docs/Web/CSS/Descendant_combinator) 또는 [자식 결합기](https://developer.mozilla.org/docs/Web/CSS/Child_combinator)를 포함한 결합기를 지원하지 않습니다.
 
-Angular component selectors do not support
-specifying [namespaces](https://developer.mozilla.org/docs/Web/SVG/Namespaces_Crash_Course).
+Angular 구성 요소 선택기는 [네임스페이스](https://developer.mozilla.org/docs/Web/SVG/Namespaces_Crash_Course)를 지정하는 것을 지원하지 않습니다.
 
-### The `:not` pseudo-class
+### `:not` 의사 클래스
 
-Angular supports [the `:not` pseudo-class](https://developer.mozilla.org/docs/Web/CSS/:not).
-You can append this pseudo-class to any other selector to narrow which elements a component's
-selector matches. For example, you could define a `[dropzone]` attribute selector and prevent
-matching `textarea` elements:
+Angular는 [`:not` 의사 클래스](https://developer.mozilla.org/docs/Web/CSS/:not)를 지원합니다. 이 의사 클래스를 다른 선택기에 추가하여 구성 요소의 선택기가 어떤 요소와 일치하는지를 좁힐 수 있습니다. 예를 들어 `[dropzone]` 속성 선택기를 정의하고 `textarea` 요소와 일치하지 않도록 할 수 있습니다:
 
 <docs-code language="angular-ts" highlight="[2]">
 @Component({
@@ -71,12 +58,11 @@ matching `textarea` elements:
 export class DropZone { }
 </docs-code>
 
-Angular does not support any other pseudo-classes or pseudo-elements in component selectors.
+Angular는 구성 요소 선택기에서 다른 의사 클래스나 의사 요소를 지원하지 않습니다.
 
-### Combining selectors
+### 선택기 결합
 
-You can combine multiple selectors by concatenating them. For example, you can match `<button>`
-elements that specify `type="reset"`:
+여러 선택기를 결합하여 사용할 수 있습니다. 예를 들어, `type="reset"`인 `<button>` 요소와 일치시킬 수 있습니다:
 
 <docs-code language="angular-ts" highlight="[2]">
 @Component({
@@ -86,7 +72,7 @@ elements that specify `type="reset"`:
 export class ResetButton { }
 </docs-code>
 
-You can also define multiple selectors with a comma-separated list:
+쉼표로 구분된 목록을 사용하여 여러 선택기를 정의할 수도 있습니다:
 
 <docs-code language="angular-ts" highlight="[2]">
 @Component({
@@ -96,36 +82,23 @@ You can also define multiple selectors with a comma-separated list:
 export class DropZone { }
 </docs-code>
 
-Angular creates a component for each element that matches _any_ of the selectors in the list.
+Angular는 목록의 _모든_ 선택기와 일치하는 요소마다 구성 요소를 생성합니다.
 
-## Choosing a selector
+## 선택기 선택
 
-The vast majority of components should use a custom element name as their selector. All custom
-element names should include a hyphen as described
-by [the HTML specification](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name).
-By default, Angular reports an error if it encounters a custom tag name that does not match any
-available components, preventing bugs due to mistyped component names.
+대다수의 구성 요소는 선택기로 사용자 정의 요소 이름을 사용하는 것이 좋습니다. 모든 사용자 정의 요소 이름은 [HTML 사양](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name)에 설명된 대로 하이픈을 포함해야 합니다. 기본적으로 Angular는 사용 가능한 구성 요소와 일치하지 않는 사용자 정의 태그 이름을 만나면 오류를 보고하여 잘못 입력된 구성 요소 이름으로 인한 버그를 방지합니다.
 
-See [Advanced component configuration](guide/components/advanced-configuration) for details on
-using [native custom elements](https://developer.mozilla.org/docs/Web/Web_Components) in
-Angular templates.
+[네이티브 사용자 정의 요소](https://developer.mozilla.org/docs/Web/Web_Components)를 Angular 템플릿에서 사용하는 방법에 대한 자세한 내용은 [고급 구성 요소 구성](guide/components/advanced-configuration)을 참조하세요.
 
-### Selector prefixes
+### 선택기 접두사
 
-The Angular team recommends using a short, consistent prefix for all the custom components
-defined inside your project. For example, if you were to build YouTube with Angular, you might
-prefix your components with `yt-`, with components like `yt-menu`, `yt-player`, etc. Namespacing
-your selectors like this makes it immediately clear where a particular component comes from. By
-default, the Angular CLI uses `app-`.
+Angular 팀은 프로젝트 내에서 정의된 모든 사용자 정의 구성 요소에 대해 짧고 일관된 접두사를 사용할 것을 권장합니다. 예를 들어 Angular로 YouTube를 빌드하려는 경우 구성 요소에 `yt-` 접두사를 붙일 수 있으며, 그러면 `yt-menu`, `yt-player`와 같은 구성 요소가 생깁니다. 이렇게 선택기에 네임스페이스를 부여하면 특정 구성 요소가 어디에서 오는지 즉시 명확해집니다. 기본적으로 Angular CLI는 `app-`를 사용합니다.
 
-Angular uses the `ng` selector prefix for its own framework APIs. Never use `ng` as a selector
-prefix for your own custom components.
+Angular는 자체 프레임워크 API에 대해 `ng` 선택기 접두사를 사용합니다. 사용자 정의 구성 요소에 대한 선택기 접두사로 `ng`를 절대 사용하지 마십시오.
 
-### When to use an attribute selector
+### 속성 선택기를 사용할 때
 
-You should consider an attribute selector when you want to create a component on a standard native
-element. For example, if you want to create a custom button component, you can take advantage of the
-standard `<button>` element by using an attribute selector:
+표준 네이티브 요소에서 구성 요소를 생성하려는 경우 속성 선택기를 고려해야 합니다. 예를 들어 사용자 정의 버튼 구성 요소를 생성하려는 경우, 속성 선택기를 사용하여 표준 `<button>` 요소를 활용할 수 있습니다:
 
 <docs-code language="angular-ts" highlight="[2]">
 @Component({
@@ -135,13 +108,8 @@ standard `<button>` element by using an attribute selector:
 export class YouTubeUploadButton { }
 </docs-code>
 
-This approach allows consumers of the component to directly use all the element's standard APIs
-without extra work. This is especially valuable for ARIA attributes such as `aria-label`.
+이 접근 방식은 구성 요소 소비자가 추가 작업 없이 요소의 모든 표준 API를 직접 사용할 수 있게 합니다. 이는 `aria-label`과 같은 ARIA 속성에 특히 유용합니다.
 
-Angular does not report errors when it encounters custom attributes that don't match an available
-component. When using components with attribute selectors, consumers may forget to import the
-component or its NgModule, resulting in the component not rendering.
-See [Importing and using components](guide/components/importing) for more information.
+Angular는 사용 가능한 구성 요소와 일치하지 않는 사용자 정의 속성을 만날 때 오류를 보고하지 않습니다. 속성 선택기를 가진 구성 요소를 사용할 때 소비자가 구성 요소나 해당 NgModule을 가져오는 것을 잊어버릴 수 있으며, 이로 인해 구성 요소가 렌더링되지 않을 수 있습니다. 더 많은 정보는 [구성 요소 가져오기 및 사용](guide/components/importing)을 참조하세요.
 
-Components that define attribute selectors should use lowercase, dash-case attributes. You can
-follow the same prefixing recommendation described above.
+속성 선택기를 정의한 구성 요소는 소문자와 대시 구문 속성을 사용해야 합니다. 위에서 설명한 접두사 추천을 따를 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/components/styling.md b/adev/src/content/guide/components/styling.md
index 540ac6143342..2de51dbd3d59 100644
--- a/adev/src/content/guide/components/styling.md
+++ b/adev/src/content/guide/components/styling.md
@@ -1,8 +1,8 @@
-# Styling components
+# 구성 요소 스타일링
 
-Tip: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
+팁: 이 가이드는 이미 [필수 가이드](essentials)를 읽었다고 가정합니다. Angular에 익숙하지 않다면 먼저 그것을 읽으세요.
 
-Components can optionally include CSS styles that apply to that component's DOM:
+구성 요소는 해당 구성 요소의 DOM에 적용되는 CSS 스타일을 선택적으로 포함할 수 있습니다:
 
 <docs-code language="angular-ts" highlight="[4]">
 @Component({
@@ -13,7 +13,7 @@ Components can optionally include CSS styles that apply to that component's DOM:
 export class ProfilePhoto { }
 </docs-code>
 
-You can also choose to write your styles in separate files:
+또한 스타일을 별도의 파일로 작성할 수도 있습니다:
 
 <docs-code language="angular-ts" highlight="[4]">
 @Component({
@@ -24,20 +24,14 @@ You can also choose to write your styles in separate files:
 export class ProfilePhoto { }
 </docs-code>
 
-When Angular compiles your component, these styles are emitted with your component's JavaScript
-output. This means that component styles participate in the JavaScript module system. When you
-render an Angular component, the framework automatically includes its associated styles, even when
-lazy-loading a component.
+Angular가 구성 요소를 컴파일할 때, 이러한 스타일은 해당 구성 요소의 JavaScript 출력과 함께 전송됩니다. 이는 구성 요소 스타일이 JavaScript 모듈 시스템에 참여한다는 것을 의미합니다. Angular 구성 요소를 렌더링할 때 프레임워크는 관련 스타일을 자동으로 포함하며, 구성 요소를 지연 로드할 때도 마찬가지입니다.
 
-Angular works with any tool that outputs CSS,
-including [Sass](https://sass-lang.com), [less](https://lesscss.org),
-and [stylus](https://stylus-lang.com).
+Angular는 [Sass](https://sass-lang.com), [less](https://lesscss.org),
+및 [stylus](https://stylus-lang.com)를 포함하여 CSS를 출력하는 모든 도구와 함께 작동합니다.
 
-## Style scoping
+## 스타일 스코핑
 
-Every component has a **view encapsulation** setting that determines how the framework scopes a
-component's styles. There are three view encapsulation modes: `Emulated`, `ShadowDom`, and `None`.
-You can specify the mode in the `@Component` decorator:
+모든 구성 요소는 프레임워크가 구성 요소의 스타일을 스코핑하는 방법을 결정하는 **뷰 캡슐화** 설정을 가집니다. 세 가지 뷰 캡슐화 모드가 있습니다: `Emulated`, `ShadowDom`, 및 `None`. `@Component` 데코레이터에서 모드를 지정할 수 있습니다:
 
 <docs-code language="angular-ts" highlight="[3]">
 @Component({
@@ -49,66 +43,37 @@ export class ProfilePhoto { }
 
 ### ViewEncapsulation.Emulated
 
-By default, Angular uses emulated encapsulation so that a component's styles only apply to elements
-defined in that component's template. In this mode, the framework generates a unique HTML attribute
-for each component instance, adds that attribute to elements in the component's template, and
-inserts that attribute into the CSS selectors defined in your component's styles.
-
-This mode ensures that a component's styles do not leak out and affect other components. However,
-global styles defined outside of a component may still affect elements inside a component with
-emulated encapsulation.
-
-In emulated mode, Angular supports
-the [`:host`](https://developer.mozilla.org/docs/Web/CSS/:host)
-and [`:host-context()`](https://developer.mozilla.org/docs/Web/CSS/:host-context) pseudo
-classes without
-using [Shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM).
-During compilation, the framework transforms these pseudo classes into attributes so it doesn't 
-comply with these native pseudo classes' rules at runtime (e.g. browser compatibility, specificity). Angular's
-emulated encapsulation mode does not support any other pseudo classes related to Shadow DOM, such
-as `::shadow` or `::part`.
+기본적으로 Angular는 에뮬레이티드 캡슐화를 사용하여 구성 요소의 스타일이 해당 구성 요소의 템플릿에 정의된 요소에만 적용되도록 합니다. 이 모드에서 프레임워크는 각 구성 요소 인스턴스에 대해 고유한 HTML 속성을 생성하고, 해당 속성을 구성 요소의 템플릿의 요소에 추가하며, 해당 속성을 구성 요소 스타일에 정의된 CSS 선택기에 삽입합니다.
+
+이 모드는 구성 요소의 스타일이 누출되어 다른 구성 요소에 영향을 미치지 않도록 보장합니다. 그러나 구성 요소 외부에 정의된 글로벌 스타일은 여전히 에뮬레이티드 캡슐화가 있는 구성 요소 내부의 요소에 영향을 줄 수 있습니다.
+
+에뮬레이티드 모드에서는 Angular가 [`:host`](https://developer.mozilla.org/docs/Web/CSS/:host)
+및 [`:host-context()`](https://developer.mozilla.org/docs/Web/CSS/:host-context) 의사 클래스를
+[Shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM)을 사용하지 않고 지원합니다.
+컴파일 중에 프레임워크는 이러한 의사 클래스를 속성으로 변환하여 런타임에 이러한 네이티브 의사 클래스의 규칙을 준수하지 않게 만듭니다(예: 브라우저 호환성, 특정성). Angular의 에뮬레이티드 캡슐화 모드는 `::shadow`나 `::part`와 같은 Shadow DOM과 관련된 다른 의사 클래스를 지원하지 않습니다.
 
 #### `::ng-deep`
 
-Angular's emulated encapsulation mode supports a custom pseudo class, `::ng-deep`. Applying this
-pseudo class to a CSS rule disables encapsulation for that rule, effectively turning it into a
-global style. **The Angular team strongly discourages new use of `::ng-deep`**. These APIs remain
-exclusively for backwards compatibility.
+Angular의 에뮬레이티드 캡슐화 모드는 사용자 정의 의사 클래스 `::ng-deep`을 지원합니다. 이 의사 클래스를 CSS 규칙에 적용하면 해당 규칙에 대한 캡슐화가 비활성화되어 전역 스타일로 변환됩니다. **Angular 팀은 `::ng-deep`의 새 사용을 강력히 권장하지 않습니다.** 이러한 API는 오직 이전 버전과의 호환성을 위해 남아 있습니다.
 
 ### ViewEncapsulation.ShadowDom
 
-This mode scopes styles within a component by
-using [the web standard Shadow DOM API](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM).
-When enabling this mode, Angular attaches a shadow root to the component's host element and renders
-the component's template and styles into the corresponding shadow tree.
+이 모드는 [웹 표준 Shadow DOM API](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM)를 사용하여 구성 요소 내에서 스타일을 스코핑합니다. 이 모드를 활성화하면 Angular는 구성 요소의 호스트 요소에 그림자 루트를 첨부하고 구성 요소의 템플릿과 스타일을 해당 그림자 트리에 렌더링합니다.
 
-This mode strictly guarantees that _only_ that component's styles apply to elements in the
-component's template. Global styles cannot affect elements in a shadow tree and styles inside the
-shadow tree cannot affect elements outside of that shadow tree.
+이 모드는 _오로지_ 해당 구성 요소의 스타일만 구성 요소의 템플릿의 요소에 적용되도록 엄격하게 보장합니다. 글로벌 스타일은 그림자 트리의 요소에 영향을 줄 수 없으며 그림자 트리 내의 스타일은 해당 그림자 트리 외부의 요소에 영향을 미칠 수 없습니다.
 
-Enabling `ShadowDom` encapsulation, however, impacts more than style scoping. Rendering the
-component in a shadow tree affects event propagation, interaction
-with [the `<slot>` API](https://developer.mozilla.org/docs/Web/Web_Components/Using_templates_and_slots),
-and how browser developer tools show elements. Always understand the full implications of using
-Shadow DOM in your application before enabling this option.
+`ShadowDom` 캡슐화를 활성화하면 스타일 스코핑 외에도 더 많은 영향을 미칩니다. 그림자 트리에서 구성 요소를 렌더링하면 이벤트 전파, [<slot> API](https://developer.mozilla.org/docs/Web/Web_Components/Using_templates_and_slots)와의 상호 작용, 및 브라우저 개발자 도구가 요소를 보여주는 방식에 영향을 줍니다. 이 옵션을 활성화하기 전에 애플리케이션에서 Shadow DOM을 사용할 때의 전체적인 영향을 항상 이해하십시오.
 
 ### ViewEncapsulation.None
 
-This mode disables all style encapsulation for the component. Any styles associated with the
-component behave as global styles.
+이 모드는 구성 요소에 대한 모든 스타일 캡슐화를 비활성화합니다. 구성 요소에 관련된 모든 스타일은 전역 스타일과 같이 작동합니다.
 
-## Defining styles in templates
+## 템플릿에서 스타일 정의
 
-You can use the `<style>` element in a component's template to define additional styles. The
-component's view encapsulation mode applies to styles defined this way.
+구성 요소의 템플릿에서 `<style>` 요소를 사용하여 추가 스타일을 정의할 수 있습니다. 방식으로 정의된 스타일에는 구성 요소의 뷰 캡슐화 모드가 적용됩니다.
 
-Angular does not support bindings inside of style elements.
+Angular는 스타일 요소 내에서 바인딩을 지원하지 않습니다.
 
-## Referencing external style files
+## 외부 스타일 파일 참조
 
-Component templates can
-use [the `<link>` element](https://developer.mozilla.org/docs/Web/HTML/Element/link) to
-reference CSS files. Additionally, your CSS may
-use [the `@import`at-rule](https://developer.mozilla.org/docs/Web/CSS/@import) to reference
-CSS files. Angular treats these references as _external_ styles. External styles are not affected by
-emulated view encapsulation.
+구성 요소 템플릿은 [<link> 요소](https://developer.mozilla.org/docs/Web/HTML/Element/link)를 사용하여 CSS 파일을 참조할 수 있습니다. 또한 CSS에서 CSS 파일을 참조하기 위해 [@import at-rule](https://developer.mozilla.org/docs/Web/CSS/@import)를 사용할 수 있습니다. Angular는 이러한 참조를 _외부_ 스타일로 처리합니다. 외부 스타일은 에뮬레이티드 뷰 캡슐화의 영향을 받지 않습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/di/creating-injectable-service.md b/adev/src/content/guide/di/creating-injectable-service.md
index 0fbb6711d16a..0f19e984c661 100644
--- a/adev/src/content/guide/di/creating-injectable-service.md
+++ b/adev/src/content/guide/di/creating-injectable-service.md
@@ -1,27 +1,27 @@
-# Creating an injectable service
+# 주입 가능한 서비스 만들기
 
-Service is a broad category encompassing any value, function, or feature that an application needs.
-A service is typically a class with a narrow, well-defined purpose.
-A component is one type of class that can use DI.
+서비스는 애플리케이션에 필요한 값, 기능 또는 특성의 폭넓은 범주입니다.
+서비스는 일반적으로 좁고 잘 정의된 목적을 가진 클래스입니다.
+구성 요소는 DI를 사용할 수 있는 클래스의 한 종류입니다.
 
-Angular distinguishes components from services to increase modularity and reusability.
-By separating a component's view-related features from other kinds of processing, you can make your component classes lean and efficient.
+Angular는 모듈성 및 재사용성을 높이기 위해 구성 요소와 서비스를 구분합니다.
+구성 요소의 보기 관련 기능을 다른 종류의 처리와 분리함으로써 구성 요소 클래스를 간결하고 효율적으로 만들 수 있습니다.
 
-Ideally, a component's job is to enable the user experience and nothing more.
-A component should present properties and methods for data binding, to mediate between the view (rendered by the template) and the application logic (which often includes some notion of a model).
+이상적으로 구성 요소의 작업은 사용자 경험을 가능하게 하는 것뿐입니다.
+구성 요소는 데이터 바인딩을 위한 속성과 메서드를 제공하여 보기(템플릿에 의해 렌더링됨)와 애플리케이션 논리(종종 모델 개념을 포함하는) 간의 중재를 해야 합니다.
 
-A component can delegate certain tasks to services, such as fetching data from the server, validating user input, or logging directly to the console.
-By defining such processing tasks in an injectable service class, you make those tasks available to any component.
-You can also make your application more adaptable by configuring different providers of the same kind of service, as appropriate in different circumstances.
+구성 요소는 데이터 서버에서 가져오기, 사용자 입력 유효성 검사 또는 콘솔에 직접 로깅과 같은 특정 작업을 서비스에 위임할 수 있습니다.
+주입 가능한 서비스 클래스로 이러한 처리 작업을 정의하면 모든 구성 요소에서 이러한 작업을 사용할 수 있게 됩니다.
+또한 상황에 따라 적절한 동일 종류의 서비스 제공자를 구성하여 애플리케이션을 더 적응 가능하게 만들 수 있습니다.
 
-Angular does not enforce these principles.
-Angular helps you follow these principles by making it easy to factor your application logic into services and make those services available to components through DI.
+Angular는 이러한 원칙을 강요하지 않습니다.
+Angular는 애플리케이션 논리를 서비스로 분리하고 DI를 통해 이러한 서비스가 구성 요소에 제공되도록 쉽게 할 수 있도록 도와줍니다.
 
-## Service examples
+## 서비스 예시
 
-Here's an example of a service class that logs to the browser console:
+다음은 브라우저 콘솔에 로깅하는 서비스 클래스의 예입니다:
 
-<docs-code header="src/app/logger.service.ts (class)" language="typescript">
+<docs-code header="src/app/logger.service.ts (클래스)" language="typescript">
 export class Logger {
   log(msg: unknown) { console.log(msg); }
   error(msg: unknown) { console.error(msg); }
@@ -29,9 +29,9 @@ export class Logger {
 }
 </docs-code>
 
-Services can depend on other services.
-For example, here's a `HeroService` that depends on the `Logger` service, and also uses `BackendService` to get heroes.
-That service in turn might depend on the `HttpClient` service to fetch heroes asynchronously from a server:
+서비스는 다른 서비스에 의존할 수 있습니다.
+예를 들어, 다음은 `Logger` 서비스에 의존하고 영웅을 가져오기 위해 `BackendService`를 사용하는 `HeroService`입니다.
+그 서비스는 서버에서 비동기적으로 영웅을 가져오기 위해 `HttpClient` 서비스에 의존할 수 있습니다:
 
 <docs-code header="src/app/hero.service.ts" language="typescript"
            highlight="[7,8,12,13]">
@@ -44,30 +44,30 @@ export class HeroService {
   private logger = inject(Logger);
 
   async getHeroes() {
-    // Fetch
+    // 가져오기
     this.heroes = await this.backend.getAll(Hero);
-    // Log
+    // 로그
     this.logger.log(`Fetched ${this.heroes.length} heroes.`);
     return this.heroes;
   }
 }
 </docs-code>
 
-## Creating an injectable service
+## 주입 가능한 서비스 만들기
 
-The Angular CLI provides a command to create a new service. In the following example, you add a new service to an existing application.
+Angular CLI는 새로운 서비스를 만들기 위한 명령어를 제공합니다. 다음 예제에서는 기존 애플리케이션에 새로운 서비스를 추가합니다.
 
-To generate a new `HeroService` class in the `src/app/heroes` folder, follow these steps:
+`src/app/heroes` 폴더에 새로운 `HeroService` 클래스를 생성하려면 다음 단계를 따르십시오:
 
-1. Run this [Angular CLI](/tools/cli) command:
+1. 이 [Angular CLI](/tools/cli) 명령어를 실행합니다:
 
 <docs-code language="sh">
 ng generate service heroes/hero
 </docs-code>
 
-This command creates the following default `HeroService`:
+이 명령어는 다음 기본 `HeroService`를 생성합니다:
 
-<docs-code header="src/app/heroes/hero.service.ts (CLI-generated)" language="typescript">
+<docs-code header="src/app/heroes/hero.service.ts (CLI 생성)" language="typescript">
 import { Injectable } from '@angular/core';
 
 @Injectable({
@@ -76,18 +76,17 @@ import { Injectable } from '@angular/core';
 export class HeroService {}
 </docs-code>
 
-The `@Injectable()` decorator specifies that Angular can use this class in the DI system.
-The metadata, `providedIn: 'root'`, means that the `HeroService` is provided throughout the application.
+`@Injectable()` 데코레이터는 Angular가 DI 시스템에서 이 클래스를 사용할 수 있음을 지정합니다.
+메타데이터 `providedIn: 'root'`는 `HeroService`가 애플리케이션 전체에서 제공됨을 의미합니다.
 
-Add a `getHeroes()` method that returns the heroes from `mock.heroes.ts` to get the hero mock data:
+영웅 모의 데이터를 가져오기 위해 `mock.heroes.ts`의 영웅을 반환하는 `getHeroes()` 메서드를 추가합니다:
 
 <docs-code header="src/app/heroes/hero.service.ts" language="typescript">
 import { Injectable } from '@angular/core';
 import { HEROES } from './mock-heroes';
 
 @Injectable({
-  // declares that this service should be created
-  // by the root application injector.
+  // 이 서비스가 루트 애플리케이션 인젝터에 의해 생성되어야 함을 선언합니다.
   providedIn: 'root',
 })
 export class HeroService {
@@ -97,15 +96,15 @@ export class HeroService {
 }
 </docs-code>
 
-For clarity and maintainability, it is recommended that you define components and services in separate files.
+명확성과 유지 관리를 위해, 구성 요소와 서비스를 별도의 파일에 정의할 것을 권장합니다.
 
-## Injecting services
+## 서비스 주입
 
-To inject a service as a dependency into a component, you can declare a class field representing the dependency and use Angular's `inject` function to initialize it.
+서비스를 구성 요소에 대한 의존성으로 주입하려면 의존성을 나타내는 클래스 필드를 선언하고 Angular의 `inject` 함수를 사용하여 초기화할 수 있습니다.
 
-The following example specifies the `HeroService` in the `HeroListComponent`.
-The type of `heroService` is `HeroService`.
-Angular recognizes the `HeroService` type as a dependency, since that class was previously annotated with the `@Injectable` decorator:
+다음 예제는 `HeroListComponent`에서 `HeroService`를 지정합니다.
+`heroService`의 타입은 `HeroService`입니다.
+Angular는 이전에 `@Injectable` 데코레이터로 주석 처리된 클래스로 인해 `HeroService` 타입을 의존성으로 인식합니다:
 
 <docs-code header="src/app/heroes/hero-list.component.ts" language="typescript">
 import { inject } from "@angular/core";
@@ -115,18 +114,18 @@ export class HeroListComponent {
 }
 </docs-code>
 
-It is also possible to inject a service into a component using the component's constructor:
+구성 요소의 생성자를 사용하여 서비스 구현도 가능합니다:
 
-<docs-code header="src/app/heroes/hero-list.component.ts (constructor signature)" language="typescript">
+<docs-code header="src/app/heroes/hero-list.component.ts (생성자 서명)" language="typescript">
   constructor(private heroService: HeroService)
 </docs-code>
 
-The `inject` method can be used in both classes and functions, while the constructor method can naturally only be used in a class constructor. However, in either case a dependency may only be injected in a valid [injection context](guide/di/dependency-injection-context), usually in the construction or initialization of a component.
+`inject` 메서드는 클래스와 함수 모두에서 사용할 수 있지만, 생성자 메서드는 자연스럽게 클래스 생성자에서만 사용될 수 있습니다. 그러나 어떤 경우든 의존성은 유효한 [주입 컨텍스트](guide/di/dependency-injection-context)에서만 주입될 수 있으며, 일반적으로 구성 요소의 생성 또는 초기화에서 주입됩니다.
 
-## Injecting services in other services
+## 다른 서비스에 서비스 주입
 
-When a service depends on another service, follow the same pattern as injecting into a component.
-In the following example, `HeroService` depends on a `Logger` service to report its activities:
+서비스가 다른 서비스에 의존할 때는 구성 요소에 주입하는 것과 동일한 패턴을 따릅니다.
+다음 예제에서 `HeroService`는 활동을 보고하기 위해 `Logger` 서비스에 의존합니다:
 
 <docs-code header="src/app/heroes/hero.service.ts" language="typescript"
            highlight="[3,9,12]">
@@ -147,11 +146,11 @@ export class HeroService {
 }
 </docs-code>
 
-In this example, the `getHeroes()` method uses the `Logger` service by logging a message when fetching heroes.
+이 예제에서 `getHeroes()` 메서드는 영웅을 가져올 때 메시지를 로깅하여 `Logger` 서비스를 사용합니다.
 
-## What's next
+## 다음 단계
 
 <docs-pill-row>
-  <docs-pill href="/guide/di/dependency-injection-providers" title="Configuring dependency providers"/>
+  <docs-pill href="/guide/di/dependency-injection-providers" title="의존성 제공자 구성"/>
   <docs-pill href="/guide/di/dependency-injection-providers#using-an-injectiontoken-object" title="`InjectionTokens`"/>
-</docs-pill-row>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/guide/di/dependency-injection-context.md b/adev/src/content/guide/di/dependency-injection-context.md
index b242b87d2c80..e2c8cff61f88 100644
--- a/adev/src/content/guide/di/dependency-injection-context.md
+++ b/adev/src/content/guide/di/dependency-injection-context.md
@@ -1,38 +1,37 @@
-# Injection context
+# 주입 컨텍스트
 
-The dependency injection (DI) system relies internally on a runtime context where the current injector is available.
-This means that injectors can only work when code is executed in such a context.
+의존성 주입(DI) 시스템은 내부적으로 현재 인젝터가 사용 가능한 런타임 컨텍스트에 의존합니다. 이는 인젝터가 이러한 컨텍스트에서 코드가 실행될 때만 작동할 수 있음을 의미합니다.
 
-The injection context is available in these situations:
+주입 컨텍스트는 다음과 같은 상황에서 사용 가능합니다:
 
-* During construction (via the `constructor`) of a class being instantiated by the DI system, such as an `@Injectable` or `@Component`.
-* In the initializer for fields of such classes.
-* In the factory function specified for `useFactory` of a `Provider` or an `@Injectable`.
-* In the `factory` function specified for an `InjectionToken`.
-* Within a stack frame that runs in an injection context.
+* `@Injectable` 또는 `@Component`와 같은 DI 시스템에 의해 인스턴스화되는 클래스의 생성자(`constructor`)에서.
+* 그러한 클래스의 필드 초기자에서.
+* `Provider` 또는 `@Injectable`의 `useFactory`에 지정된 팩토리 함수에서.
+* `InjectionToken`에 지정된 `factory` 함수에서.
+* 주입 컨텍스트에서 실행되는 스택 프레임 내에서.
 
-Knowing when you are in an injection context will allow you to use the [`inject`](api/core/inject) function to inject instances.
+주입 컨텍스트에 있는지 알면 [`inject`](api/core/inject) 함수를 사용하여 인스턴스를 주입할 수 있습니다.
 
-## Class constructors
+## 클래스 생성자
 
-Every time the DI system instantiates a class, it does so in an injection context. This is handled by the framework itself. The constructor of the class is executed in that runtime context, which also allows injection of a token using the [`inject`](api/core/inject) function.
+DI 시스템이 클래스를 인스턴스화할 때마다, 그것은 주입 컨텍스트 내에서 이루어집니다. 이는 프레임워크 자체에 의해 처리됩니다. 클래스의 생성자는 해당 런타임 컨텍스트에서 실행되며, [`inject`](api/core/inject) 함수를 사용하여 토큰을 주입할 수 있습니다.
 
 <docs-code language="typescript" highlight="[[3],[6]]">
 class MyComponent  {
   private service1: Service1;
-  private service2: Service2 = inject(Service2); // In context
+  private service2: Service2 = inject(Service2); // 컨텍스트 안에서
 
   constructor() {
-    this.service1 = inject(Service1) // In context
+    this.service1 = inject(Service1) // 컨텍스트 안에서
   }
 }
 </docs-code>
 
-## Stack frame in context
+## 컨텍스트 내 스택 프레임
 
-Some APIs are designed to be run in an injection context. This is the case, for example, with router guards. This allows the use of [`inject`](api/core/inject) within the guard function to access a service.
+일부 API는 주입 컨텍스트에서 실행되도록 설계되었습니다. 예를 들어, 라우터 가드의 경우입니다. 이는 가드 함수 내에서 서비스를 액세스하기 위해 [`inject`](api/core/inject)를 사용할 수 있게 해줍니다.
 
-Here is an example for `CanActivateFn`
+다음은 `CanActivateFn`에 대한 예입니다.
 
 <docs-code language="typescript" highlight="[3]">
 const canActivateTeam: CanActivateFn =
@@ -41,10 +40,9 @@ const canActivateTeam: CanActivateFn =
     };
 </docs-code>
 
-## Run within an injection context
+## 주입 컨텍스트 내에서 실행
 
-When you want to run a given function in an injection context without already being in one, you can do so with `runInInjectionContext`.
-This requires access to a given injector, like the `EnvironmentInjector`, for example:
+이미 주입 컨텍스트에 있지 않은 상태에서 주어진 함수를 주입 컨텍스트에서 실행하려면 `runInInjectionContext`를 사용할 수 있습니다. 이는 `EnvironmentInjector`와 같은 주어진 인젝터에 대한 액세스를 요구합니다.
 
 <docs-code header="src/app/heroes/hero.service.ts" language="typescript"
            highlight="[9]">
@@ -56,18 +54,18 @@ export class HeroService {
 
   someMethod() {
     runInInjectionContext(this.environmentInjector, () => {
-      inject(SomeService); // Do what you need with the injected service
+      inject(SomeService); // 주입된 서비스와 필요한 작업 수행
     });
   }
 }
 </docs-code>
 
-Note that `inject` will return an instance only if the injector can resolve the required token.
+`inject`는 인젝터가 필요한 토큰을 해결할 수 있는 경우에만 인스턴스를 반환한다는 점에 유의하세요.
 
-## Asserts the context
+## 컨텍스트 단언
 
-Angular provides the `assertInInjectionContext` helper function to assert that the current context is an injection context.
+Angular는 현재 컨텍스트가 주입 컨텍스트임을 단언하기 위해 `assertInInjectionContext` 도우미 함수를 제공합니다.
 
-## Using DI outside of a context
+## 컨텍스트 외부에서 DI 사용
 
-Calling [`inject`](api/core/inject) or calling `assertInInjectionContext` outside of an injection context will throw [error NG0203](/errors/NG0203).
+주입 컨텍스트 외부에서 [`inject`](api/core/inject)를 호출하거나 `assertInInjectionContext`를 호출하면 [오류 NG0203](/errors/NG0203)가 발생합니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/di/dependency-injection-providers.md b/adev/src/content/guide/di/dependency-injection-providers.md
index afd9575b6749..d381aff49a49 100644
--- a/adev/src/content/guide/di/dependency-injection-providers.md
+++ b/adev/src/content/guide/di/dependency-injection-providers.md
@@ -1,63 +1,58 @@
-# Configuring dependency providers
+# 종속성 제공자 구성
 
-The previous sections described how to use class instances as dependencies.
-Aside from classes, you can also use values such as `boolean`, `string`, `Date`, and objects as dependencies.
-Angular provides the necessary APIs to make the dependency configuration flexible, so you can make those values available in DI.
+이전 섹션에서는 클래스 인스턴스를 종속성으로 사용하는 방법에 대해 설명했습니다. 클래스 외에도 `boolean`, `string`, `Date` 및 객체와 같은 값을 종속성으로 사용할 수 있습니다. Angular는 종속성 구성을 유연하게 만드는 데 필요한 API를 제공하므로 DI에서 이러한 값을 사용할 수 있습니다.
 
-## Specifying a provider token
+## 제공자 토큰 지정
 
-If you specify the service class as the provider token, the default behavior is for the injector to instantiate that class using the `new` operator.
+서비스 클래스를 제공자 토큰으로 지정하면 기본 동작은 주입기가 `new` 연산자를 사용하여 해당 클래스를 인스턴스화하는 것입니다.
 
-In the following example, the app component provides a `Logger` instance:
+다음 예제에서 앱 구성 요소는 `Logger` 인스턴스를 제공합니다:
 
 <docs-code header="src/app/app.component.ts" language="typescript">
 providers: [Logger],
 </docs-code>
 
-You can, however, configure DI to associate the `Logger` provider token with a different class or any other value.
-So when the `Logger` is injected, the configured value is used instead.
+그러나 DI를 구성하여 `Logger` 제공자 토큰을 다른 클래스나 기타 값과 연결할 수 있습니다. 따라서 `Logger`가 주입될 때 구성된 값이 대신 사용됩니다.
 
-In fact, the class provider syntax is a shorthand expression that expands into a provider configuration, defined by the `Provider` interface.
-Angular expands the `providers` value in this case into a full provider object as follows:
+실제로 클래스 제공자 구문은 `Provider` 인터페이스에 의해 정의된 제공자 구성으로 확장되는 축약형 표현입니다. Angular는 이 경우 `providers` 값을 전체 제공자 객체로 다음과 같이 확장합니다:
 
 <docs-code header="src/app/app.component.ts" language="typescript">
 [{ provide: Logger, useClass: Logger }]
 </docs-code>
 
-The expanded provider configuration is an object literal with two properties:
+확장된 제공자 구성은 두 개의 속성을 가진 객체 리터럴입니다:
 
-- The `provide` property holds the token that serves as the key for consuming the dependency value.
-- The second property is a provider definition object, which tells the injector **how** to create the dependency value. The provider-definition can be one of the following:
-  - `useClass` - this option tells Angular DI to instantiate a provided class when a dependency is injected
-  - `useExisting` - allows you to alias a token and reference any existing one.
-  - `useFactory` - allows you to define a function that constructs a dependency.
-  - `useValue` - provides a static value that should be used as a dependency.
+- `provide` 속성은 종속성 값을 소비하는 데 사용되는 키 역할을 하는 토큰을 보유합니다.
+- 두 번째 속성은 종속성 값을 생성하는 방법을 주입기에 알리는 제공자 정의 객체입니다. 제공자 정의는 다음 중 하나일 수 있습니다:
+  - `useClass` - 이 옵션은 Angular DI에 종속성이 주입될 때 제공된 클래스를 인스턴스화하라고 지시합니다.
+  - `useExisting` - 토큰을 별칭으로 지정하고 기존의 어떤 것을 참조할 수 있도록 합니다.
+  - `useFactory` - 종속성을 구성하는 함수를 정의할 수 있도록 합니다.
+  - `useValue` - 종속성으로 사용해야 하는 정적 값을 제공합니다.
 
-The sections below describe how to use the different provider definitions.
+아래 섹션에서는 다양한 제공자 정의를 사용하는 방법을 설명합니다.
 
-### Class providers: useClass
+### 클래스 제공자: useClass
 
-The `useClass` provider key lets you create and return a new instance of the specified class.
+`useClass` 제공자 키를 사용하면 지정된 클래스의 새 인스턴스를 생성하고 반환할 수 있습니다.
 
-You can use this type of provider to substitute an alternative implementation for a common or default class.
-The alternative implementation can, for example, implement a different strategy, extend the default class, or emulate the behavior of the real class in a test case.
+이 유형의 제공자를 사용하여 일반 또는 기본 클래스에 대한 대체 구현을 대체할 수 있습니다. 대체 구현은 예를 들어, 다른 전략을 구현하거나 기본 클래스를 확장하거나 테스트 사례에서 실제 클래스의 동작을 에뮬레이트할 수 있습니다.
 
-In the following example, `BetterLogger` would be instantiated when the `Logger` dependency is requested in a component or any other class:
+다음 예제에서 `Logger` 종속성이 구성 요소나 다른 클래스에서 요청될 때 `BetterLogger`가 인스턴스화됩니다:
 
 <docs-code header="src/app/app.component.ts" language="typescript">
 [{ provide: Logger, useClass: BetterLogger }]
 </docs-code>
 
-If the alternative class providers have their own dependencies, specify both providers in the providers metadata property of the parent module or component:
+대체 클래스 제공자가 자체 종속성이 있는 경우 부모 모듈 또는 구성 요소의 제공자 메타데이터 속성에 두 제공자를 모두 지정합니다:
 
 <docs-code header="src/app/app.component.ts" language="typescript">
 [
-  UserService, // dependency needed in `EvenBetterLogger`.
+  UserService, // `EvenBetterLogger`에서 필요한 종속성.
   { provide: Logger, useClass: EvenBetterLogger },
 ]
 </docs-code>
 
-In this example, `EvenBetterLogger` displays the user name in the log message. This logger gets the user from an injected `UserService` instance:
+이 예제에서 `EvenBetterLogger`는 로그 메시지에 사용자 이름을 표시합니다. 이 로거는 주입된 `UserService` 인스턴스에서 사용자를 가져옵니다:
 
 <docs-code header="src/app/even-better-logger.component.ts" language="typescript"
            highlight="[[3],[6]]">
@@ -72,35 +67,31 @@ export class EvenBetterLogger extends Logger {
 }
 </docs-code>
 
-Angular DI knows how to construct the `UserService` dependency, since it has been configured above and is available in the injector.
+Angular DI는 `UserService` 종속성을 구성하는 방법을 알고 있습니다. 이는 위에서 구성되었고 주입기에서 사용 가능합니다.
 
-### Alias providers: useExisting
+### 별칭 제공자: useExisting
 
-The `useExisting` provider key lets you map one token to another.
-In effect, the first token is an alias for the service associated with the second token, creating two ways to access the same service object.
+`useExisting` 제공자 키를 사용하면 한 토큰을 다른 토큰에 매핑할 수 있습니다. 실제로 첫 번째 토큰은 두 번째 토큰과 관련된 서비스의 별칭이 되어 동일한 서비스 객체에 접근하는 두 가지 방법을 만듭니다.
 
-In the following example, the injector injects the singleton instance of `NewLogger` when the component asks for either the new or the old logger:
-In this way, `OldLogger` is an alias for `NewLogger`.
+다음 예제에서 주입기는 구성 요소가 새 로거 또는 이전 로거를 요청할 때 `NewLogger`의 싱글톤 인스턴스를 주입합니다. 이렇게 하면 `OldLogger`가 `NewLogger`의 별칭이 됩니다.
 
 <docs-code header="src/app/app.component.ts" language="typescript" highlight="[4]">
 [
   NewLogger,
-  // Alias OldLogger w/ reference to NewLogger
+  // OldLogger를 NewLogger에 대한 참조로 별칭
   { provide: OldLogger, useExisting: NewLogger},
 ]
 </docs-code>
 
-Note: Ensure you do not alias `OldLogger` to `NewLogger` with `useClass`, as this creates two different `NewLogger` instances.
+주의: `useClass`로 `OldLogger`를 `NewLogger`에 별칭으로 지정하지 않도록 하십시오. 이는 두 개의 다른 `NewLogger` 인스턴스를 생성합니다.
 
-### Factory providers: useFactory
+### 팩토리 제공자: useFactory
 
-The `useFactory` provider key lets you create a dependency object by calling a factory function.
-With this approach, you can create a dynamic value based on information available in the DI and elsewhere in the app.
+`useFactory` 제공자 키를 사용하면 팩토리 함수를 호출하여 종속성 객체를 생성할 수 있습니다. 이 접근 방식을 사용하면 DI 및 애플리케이션의 다른 곳에서 사용할 수 있는 정보를 바탕으로 동적 값을 생성할 수 있습니다.
 
-In the following example, only authorized users should see secret heroes in the `HeroService`.
-Authorization can change during the course of a single application session, as when a different user logs in .
+다음 예제에서는 인증된 사용자만 `HeroService`에서 비밀 영웅을 볼 수 있도록 해야 합니다. 인증은 한 애플리케이션 세션 동안 변경될 수 있으며, 예를 들어 다른 사용자가 로그인을 할 때입니다.
 
-To keep security-sensitive information in `UserService` and out of `HeroService`, give the `HeroService` constructor a boolean flag to control display of secret heroes:
+`UserService`에 보안 관련 정보를 유지하고 `HeroService`에서는 제거하기 위해 `HeroService` 생성자에 비밀 영웅의 표시를 제어하는 부울 플래그를 제공합니다:
 
 <docs-code header="src/app/heroes/hero.service.ts" language="typescript"
            highlight="[[4],[7]]">
@@ -117,16 +108,14 @@ class HeroService {
 }
 </docs-code>
 
-To implement the `isAuthorized` flag, use a factory provider to create a new logger instance for `HeroService`.
-This is necessary as we need to manually pass `Logger` when constructing the hero service:
+`isAuthorized` 플래그를 구현하려면 `HeroService`를 위해 새 로거 인스턴스를 생성하는 팩토리 제공자를 사용합니다. 이는 로거를 수동으로 전달해야 하기 때문에 필요합니다:
 
 <docs-code header="src/app/heroes/hero.service.provider.ts" language="typescript">
 const heroServiceFactory = (logger: Logger, userService: UserService) =>
   new HeroService(logger, userService.user.isAuthorized);
 </docs-code>
 
-The factory function has access to `UserService`.
-You inject both `Logger` and `UserService` into the factory provider so the injector can pass them along to the factory function:
+팩토리 함수는 `UserService`에 접근할 수 있습니다. 주입기가 이들을 팩토리 함수에 전달할 수 있도록 두 개의 `Logger`와 `UserService`를 팩토리 제공자에 주입합니다:
 
 <docs-code header="src/app/heroes/hero.service.provider.ts" language="typescript"
            highlight="[3,4]">
@@ -137,26 +126,22 @@ export const heroServiceProvider = {
 };
 </docs-code>
 
-- The `useFactory` field specifies that the provider is a factory function whose implementation is `heroServiceFactory`.
-- The `deps` property is an array of provider tokens.
-The `Logger` and `UserService` classes serve as tokens for their own class providers.
-The injector resolves these tokens and injects the corresponding services into the matching `heroServiceFactory` factory function parameters, based on the order specified.
+- `useFactory` 필드는 제공자가 `heroServiceFactory`로 구현된 팩토리 함수임을 지정합니다.
+- `deps` 속성은 제공자 토큰의 배열입니다. `Logger`와 `UserService` 클래스를 각자의 클래스 제공자에 대한 토큰으로 사용합니다. 주입기는 이러한 토큰을 해결하고 해당 서비스들을 지정된 순서에 따라 일치하는 `heroServiceFactory` 팩토리 함수 매개변수에 주입합니다.
 
-Capturing the factory provider in the exported variable, `heroServiceProvider`, makes the factory provider reusable.
+팩토리 제공자를 내보낸 변수 `heroServiceProvider`에 캡처함으로써 팩토리 제공자가 재사용 가능하게 됩니다.
 
-### Value providers: useValue
+### 값 제공자: useValue
 
-The `useValue` key lets you associate a static value with a DI token.
+`useValue` 키를 사용하면 정적 값을 DI 토큰과 연결할 수 있습니다.
 
-Use this technique to provide runtime configuration constants such as website base addresses and feature flags.
-You can also use a value provider in a unit test to provide mock data in place of a production data service.
+이 기술을 사용하여 웹사이트 기본 주소 및 기능 플래그와 같은 런타임 구성 상수를 제공합니다. 단위 테스트에서 프로덕션 데이터 서비스를 대신하여 모의 데이터를 제공하기 위해 값 제공자를 사용할 수도 있습니다.
 
-The next section provides more information about the `useValue` key.
+다음 섹션에서는 `useValue` 키에 대한 정보를 제공합니다.
 
-## Using an `InjectionToken` object
+## `InjectionToken` 객체 사용
 
-Use an `InjectionToken` object as provider token for non-class dependencies.
-The following example defines a token, `APP_CONFIG`. of the type `InjectionToken`:
+비클래스 종속성에 대한 제공자 토큰으로 `InjectionToken` 객체를 사용합니다. 다음 예제는 `InjectionToken` 유형의 `APP_CONFIG` 토큰을 정의합니다:
 
 <docs-code header="src/app/app.config.ts" language="typescript" highlight="[3]">
 import { InjectionToken } from '@angular/core';
@@ -168,9 +153,9 @@ export interface AppConfig {
 export const APP_CONFIG = new InjectionToken<AppConfig>('app.config description');
 </docs-code>
 
-The optional type parameter, `<AppConfig>`, and the token description, `app.config description`, specify the token's purpose.
+선택적 유형 매개변수 `<AppConfig>`와 토큰 설명 `app.config description`은 토큰의 용도를 지정합니다.
 
-Next, register the dependency provider in the component using the `InjectionToken` object of `APP_CONFIG`:
+다음으로 `APP_CONFIG`의 `InjectionToken` 객체를 사용하여 구성 요소에 종속성 제공자를 등록합니다:
 
 <docs-code header="src/app/app.component.ts" language="typescript">
 const MY_APP_CONFIG_VARIABLE: AppConfig = {
@@ -180,7 +165,7 @@ const MY_APP_CONFIG_VARIABLE: AppConfig = {
 providers: [{ provide: APP_CONFIG, useValue: MY_APP_CONFIG_VARIABLE }]
 </docs-code>
 
-Now, inject the configuration object into the constructor with the `@Inject()` parameter decorator:
+이제 구성자에 `@Inject()` 매개변수 장식자를 사용하여 구성 객체를 주입합니다:
 
 <docs-code header="src/app/app.component.ts" language="typescript" highlight="[2]">
 export class AppComponent {
@@ -190,22 +175,20 @@ export class AppComponent {
 }
 </docs-code>
 
-### Interfaces and DI
+### 인터페이스와 DI
 
-Though the TypeScript `AppConfig` interface supports typing within the class, the `AppConfig` interface plays no role in DI.
-In TypeScript, an interface is a design-time artifact, and does not have a runtime representation, or token, that the DI framework can use.
+TypeScript `AppConfig` 인터페이스는 클래스 내에서 타이핑을 지원하지만, `AppConfig` 인터페이스는 DI에서 아무런 역할을 하지 않습니다. TypeScript에서 인터페이스는 설계 시간 아티팩트이며, DI 프레임워크가 사용할 수 있는 런타임 표현 또는 토큰이 없습니다.
 
-When the TypeScript transpiles to JavaScript, the interface disappears because JavaScript doesn't have interfaces.
-Because there is no interface for Angular to find at runtime, the interface cannot be a token, nor can you inject it:
+TypeScript가 JavaScript로 변환될 때, 인터페이스는 사라집니다. JavaScript는 인터페이스가 없기 때문입니다. Angular가 런타임에 찾을 수 있는 인터페이스가 없기 때문에, 인터페이스는 토큰이 될 수 없으며 주입할 수 없습니다:
 
 <docs-code header="src/app/app.component.ts" language="typescript">
-// Can't use interface as provider token
+// 인터페이스를 제공자 토큰으로 사용할 수 없음
 [{ provide: AppConfig, useValue: MY_APP_CONFIG_VARIABLE })]
 </docs-code>
 
 <docs-code header="src/app/app.component.ts" language="typescript" highlight="[3]">
 export class AppComponent {
-  // Can't inject using the interface as the parameter type
+  // 인터페이스를 매개변수 유형으로 사용하여 주입할 수 없음
   constructor(private config: AppConfig) {}
 }
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/guide/di/dependency-injection.md b/adev/src/content/guide/di/dependency-injection.md
index ea21ebd14a0c..11bac9ccc1ae 100644
--- a/adev/src/content/guide/di/dependency-injection.md
+++ b/adev/src/content/guide/di/dependency-injection.md
@@ -1,38 +1,38 @@
-# Understanding dependency injection
+# 의존성 주입 이해하기
 
-Dependency injection, or DI, is one of the fundamental concepts in Angular. DI is wired into the Angular framework and allows classes with Angular decorators, such as Components, Directives, Pipes, and Injectables, to configure dependencies that they need.
+의존성 주입(Dependency Injection, DI)은 Angular의 기본 개념 중 하나입니다. DI는 Angular 프레임워크에 내장되어 있으며, 구성 요소, 지시문, 파이프 및 주입 가능 요소와 같은 Angular 데코레이터가 있는 클래스가 필요한 의존성을 구성할 수 있게 해줍니다.
 
-Two main roles exist in the DI system: dependency consumer and dependency provider.
+DI 시스템에는 두 가지 주요 역할이 있습니다: 의존성 소비자와 의존성 제공자입니다.
 
-Angular facilitates the interaction between dependency consumers and dependency providers using an abstraction called `Injector`. When a dependency is requested, the injector checks its registry to see if there is an instance already available there. If not, a new instance is created and stored in the registry. Angular creates an application-wide injector (also known as the "root" injector) during the application bootstrap process. In most cases you don't need to manually create injectors, but you should know that there is a layer that connects providers and consumers.
+Angular는 `Injector`라는 추상화를 사용하여 의존성 소비자와 의존성 제공자 간의 상호작용을 용이하게 합니다. 의존성이 요청되면 인젝터는 등록소를 확인하여 그곳에 이미 사용 가능한 인스턴스가 있는지 확인합니다. 그렇지 않으면 새로운 인스턴스가 생성되어 등록소에 저장됩니다. Angular는 애플리케이션 부트스트랩 프로세스 중에 애플리케이션 전역 인젝터(루트 인젝터로도 알려짐)를 생성합니다. 대부분의 경우 인젝터를 수동으로 생성할 필요는 없지만, 제공자와 소비자를 연결하는 레이어가 있다는 것을 알고 있어야 합니다.
 
-This topic covers basic scenarios of how a class can act as a dependency. Angular also allows you to use functions, objects, primitive types such as string or Boolean, or any other types as dependencies. For more information, see [Dependency providers](guide/di/dependency-injection-providers).
+이 주제에서는 클래스가 의존성으로 작용할 수 있는 기본 시나리오를 다룹니다. Angular는 또한 함수, 객체, 문자열 또는 불리언과 같은 기본 타입, 또는 기타 종류의 의존성을 사용하는 것을 허용합니다. 더 많은 정보는 [의존성 제공자](guide/di/dependency-injection-providers)를 참조하세요.
 
-## Providing a dependency
+## 의존성 제공하기
 
-Consider a class called `HeroService` that needs to act as a dependency in a component.
+구성 요소에서 의존성 역할을 해야 하는 `HeroService`라는 클래스를 고려해 보세요.
 
-The first step is to add the `@Injectable` decorator to show that the class can be injected.
+첫 번째 단계는 클래스가 주입될 수 있음을 나타내기 위해 `@Injectable` 데코레이터를 추가하는 것입니다.
 
 <docs-code language="typescript" highlight="[1]">
 @Injectable()
 class HeroService {}
 </docs-code>
 
-The next step is to make it available in the DI by providing it.
-A dependency can be provided in multiple places:
+다음 단계는 제공하여 DI에서 이를 사용할 수 있도록 만드는 것입니다.
+의존성은 여러 장소에서 제공될 수 있습니다:
 
-* [**Preferred**: At the application root level using `providedIn`.](#preferred-at-the-application-root-level-using-providedin)
-* [At the Component level.](#at-the-component-level)
-* [At the application root level using `ApplicationConfig`.](#at-the-application-root-level-using-applicationconfig)
-* [`NgModule` based applications.](#ngmodule-based-applications)
+* [**선호됨**: `providedIn`을 사용하여 애플리케이션 루트 수준에서.](#preferred-at-the-application-root-level-using-providedin)
+* [구성 요소 수준에서.](#at-the-component-level)
+* [ApplicationConfig를 사용하여 애플리케이션 루트 수준에서.](#at-the-application-root-level-using-applicationconfig)
+* [`NgModule` 기반 애플리케이션에서.](#ngmodule-based-applications)
 
-### **Preferred**: At the application root level using `providedIn`
+### **선호됨**: `providedIn`을 사용하여 애플리케이션 루트 수준에서
 
-Providing a service at the application root level using `providedIn` allows injecting the service into all other classes.
-Using `providedIn` enables Angular and JavaScript code optimizers to effectively remove services that are unused (known as tree-shaking).
+`providedIn`을 사용하여 애플리케이션 루트 수준에서 서비스를 제공하면 모든 다른 클래스에 서비스를 주입할 수 있습니다.
+`providedIn`을 사용하면 Angular와 JavaScript 코드 최적화 도구가 사용되지 않는 서비스를 효과적으로 제거할 수 있습니다(트리 쉐이킹).
 
-You can provide a service by using `providedIn: 'root'` in the `@Injectable` decorator:
+`@Injectable` 데코레이터에서 `providedIn: 'root'`를 사용하여 서비스를 제공할 수 있습니다:
 
 <docs-code language="typescript" highlight="[2]">
 @Injectable({
@@ -41,14 +41,14 @@ You can provide a service by using `providedIn: 'root'` in the `@Injectable` dec
 class HeroService {}
 </docs-code>
 
-When you provide the service at the root level, Angular creates a single, shared instance of the `HeroService` and injects it into any class that asks for it.
+루트 수준에서 서비스를 제공하면 Angular는 `HeroService`의 단일 공유 인스턴스를 생성하여 이를 요청하는 모든 클래스에 주입합니다.
 
-### At the Component level
+### 구성 요소 수준에서
 
-You can provide services at `@Component` level by using the `providers` field of the `@Component` decorator.
-In this case the `HeroService` becomes available to all instances of this component and other components and directives used in the template.
+`@Component` 데코레이터의 `providers` 필드를 사용하여 `@Component` 수준에서 서비스를 제공할 수 있습니다.
+이 경우 `HeroService`는 이 구성 요소의 모든 인스턴스와 템플릿에서 사용하는 다른 구성 요소 및 지시문에서 사용할 수 있게 됩니다.
 
-For example:
+예를 들어:
 
 <docs-code language="typescript" highlight="[4]">
 @Component({
@@ -59,15 +59,15 @@ For example:
 class HeroListComponent {}
 </docs-code>
 
-When you register a provider at the component level, you get a new instance of the service with each new instance of that component.
+구성 요소 수준에서 제공자를 등록하면 각 새 인스턴스의 서비스에 대한 새로운 인스턴스를 얻게 됩니다.
 
-Note: Declaring a service like this causes `HeroService` to always be included in your application— even if the service is unused.
+참고: 이렇게 서비스를 선언하면 서비스가 사용되지 않더라도 항상 애플리케이션에 `HeroService`가 포함됩니다.
 
-### At the application root level using `ApplicationConfig`
+### ApplicationConfig를 사용하여 애플리케이션 루트 수준에서
 
-You can use the `providers` field of the `ApplicationConfig` (passed to the `bootstrapApplication` function) to provide a service or other `Injectable` at the application level.
+`bootstrapApplication` 함수에 전달된 `ApplicationConfig`의 `providers` 필드를 사용하여 애플리케이션 수준에서 서비스나 다른 `Injectable`을 제공할 수 있습니다.
 
-In the example below, the `HeroService` is available to all components, directives, and pipes:
+아래 예제에서 `HeroService`는 모든 구성 요소, 지시문 및 파이프에서 사용 가능합니다:
 
 <docs-code language="typescript" highlight="[3]">
 export const appConfig: ApplicationConfig = {
@@ -77,26 +77,26 @@ export const appConfig: ApplicationConfig = {
 };
 </docs-code>
 
-Then, in `main.ts`:
+그런 다음 `main.ts`에서:
 
 <docs-code language="typescript">
 bootstrapApplication(AppComponent, appConfig)
 </docs-code>
 
-Note: Declaring a service like this causes `HeroService` to always be included in your application— even if the service is unused.
+참고: 이렇게 서비스를 선언하면 서비스가 사용되지 않더라도 항상 애플리케이션에 `HeroService`가 포함됩니다.
 
-### `NgModule` based applications
+### `NgModule` 기반 애플리케이션
 
-`@NgModule`-based applications use the `providers` field of the `@NgModule` decorator to provide a service or other `Injectable` available at the application level.
+`@NgModule` 기반 애플리케이션은 애플리케이션 수준에서 서비스나 다른 `Injectable`을 제공하기 위해 `@NgModule` 데코레이터의 `providers` 필드를 사용합니다.
 
-A service provided in a module is available to all declarations of the module, or to any other modules which share the same `ModuleInjector`.
-To understand all edge-cases, see [Hierarchical injectors](guide/di/hierarchical-dependency-injection).
+모듈에 제공된 서비스는 모듈의 모든 선언에서 사용 가능하며, 동일한 `ModuleInjector`를 공유하는 다른 모듈에서도 사용 가능합니다.
+모든 엣지 케이스를 이해하려면 [계층 인젝터](guide/di/hierarchical-dependency-injection)를 참조하세요.
 
-Note: Declaring a service using `providers` causes the service to be included in your application— even if the service is unused.
+참고: `providers`를 사용하여 서비스를 선언하면 서비스가 사용되지 않더라도 애플리케이션에 포함됩니다.
 
-## Injecting/consuming a dependency
+## 의존성 주입/소비하기
 
-The most common way to inject a dependency is to declare it in a class constructor. When Angular creates a new instance of a component, directive, or pipe class, it determines which services or other dependencies that class needs by looking at the constructor parameter types. For example, if the `HeroListComponent` needs the `HeroService`, the constructor can look like this:
+의존성을 주입하는 가장 일반적인 방법은 클래서 생성자에 선언하는 것입니다. Angular가 구성 요소, 지시문 또는 파이프 클래스의 새 인스턴스를 생성할 때, 생성자 매개변수 타입을 확인하여 해당 클래스가 필요한 서비스나 다른 의존성을 결정합니다. 예를 들어, `HeroListComponent`가 `HeroService`가 필요하다면, 생성자는 다음과 같이 보일 수 있습니다:
 
 <docs-code language="typescript" highlight="[3]">
 @Component({ … })
@@ -105,7 +105,7 @@ class HeroListComponent {
 }
 </docs-code>
 
-Another option is to use the [inject](api/core/inject) method:
+또 다른 옵션은 [inject](api/core/inject) 메서드를 사용하는 것입니다:
 
 <docs-code language="typescript" highlight="[3]">
 @Component({ … })
@@ -114,26 +114,26 @@ class HeroListComponent {
 }
 </docs-code>
 
-When Angular discovers that a component depends on a service, it first checks if the injector has any existing instances of that service. If a requested service instance doesn't yet exist, the injector creates one using the registered provider, and adds it to the injector before returning the service to Angular.
+Angular가 구성 요소가 서비스에 의존한다는 것을 발견하면, 먼저 인젝터에 해당 서비스의 기존 인스턴스가 있는지 확인합니다. 요청된 서비스 인스턴스가 아직 존재하지 않으면, 인젝터는 등록된 제공자를 사용하여 하나를 생성하고 이것을 인젝터에 추가한 후 Angular에 서비스를 반환합니다.
 
-When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments.
+모든 요청된 서비스가 해결되고 반환되면, Angular는 해당 서비스를 인수로 사용하여 구성 요소의 생성자를 호출할 수 있습니다.
 
 ```mermaid
 graph TD;
 subgraph Injector
-serviceA[Service A]
+serviceA[서비스 A]
 heroService[HeroService]
-serviceC[Service C]
-serviceD[Service D]
+serviceC[서비스 C]
+serviceD[서비스 D]
 end
 direction TB
-componentConstructor["Component <br> constructor(HeroService)"]
+componentConstructor["구성 요소 <br> 생성자(HeroService)"]
 heroService-->componentConstructor
 style componentConstructor text-align: left
 ```
 
-## What's next
+## 다음 단계
 
 <docs-pill-row>
-  <docs-pill href="/guide/di/creating-injectable-service" title="Creating an injectable service"/>
-</docs-pill-row>
+  <docs-pill href="/guide/di/creating-injectable-service" title="주입 가능한 서비스 생성하기"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/guide/di/di-in-action.md b/adev/src/content/guide/di/di-in-action.md
index 19ef9a4460ba..87b9db5a0806 100644
--- a/adev/src/content/guide/di/di-in-action.md
+++ b/adev/src/content/guide/di/di-in-action.md
@@ -1,11 +1,11 @@
 # DI in action
 
-This guide explores additional features of dependency injection in Angular.
+이 가이드는 Angular에서 의존성 주입의 추가 기능을 탐구합니다.
 
-## Custom providers with `@Inject`
+## `@Inject`와 함께하는 사용자 지정 제공자
 
-Using a custom provider allows you to provide a concrete implementation for implicit dependencies, such as built-in browser APIs.
-The following example uses an `InjectionToken` to provide the [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) browser API as a dependency in the `BrowserStorageService`:
+사용자 지정 제공자를 사용하면 내장 브라우저 API와 같은 암시적 의존성에 대한 구체적인 구현을 제공할 수 있습니다.
+다음 예제는 `InjectionToken`을 사용하여 `BrowserStorageService`의 종속성으로 [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) 브라우저 API를 제공합니다:
 
 <docs-code header="src/app/storage.service.ts" language="typescript"
            highlight="[[3,6],[12]]">
@@ -32,17 +32,17 @@ export class BrowserStorageService {
 }
 </docs-code>
 
-The `factory` function returns the `localStorage` property that is attached to the browser's window object.
-The `Inject` decorator is applied to the `storage` constructor parameter and specifies a custom provider of the dependency.
+`factory` 함수는 브라우저의 window 객체에 부착된 `localStorage` 속성을 반환합니다.
+`Inject` 데코레이터는 `storage` 생성자 매개변수에 적용되어 종속성의 사용자 지정 제공자를 지정합니다.
 
-This custom provider can now be overridden during testing with a mock API of `localStorage` instead of interacting with real browser APIs.
+이 사용자 지정 제공자는 이제 실제 브라우저 API와 상호작용하는 대신 테스트 중에 `localStorage`의 모의 API로 재정의할 수 있습니다.
 
-## Inject the component's DOM element
+## 컴포넌트의 DOM 요소 주입하기
 
-Although developers strive to avoid it, some visual effects and third-party tools require direct DOM access.
-As a result, you might need to access a component's DOM element.
+개발자들은 이를 피하려고 노력하지만, 일부 시각 효과 및 서드파티 도구는 직접적인 DOM 접근을 필요로 합니다.
+결과적으로 컴포넌트의 DOM 요소에 접근해야 할 수도 있습니다.
 
-Angular exposes the underlying element of a `@Component` or `@Directive` via injection using the `ElementRef` injection token:
+Angular는 `ElementRef` 주입 토큰을 사용하여 `@Component` 또는 `@Directive`의 기본 요소를 주입합니다:
 
 <docs-code language="typescript" highlight="[7]">
 import { Directive, ElementRef } from '@angular/core';
@@ -59,21 +59,21 @@ export class HighlightDirective {
 }
 </docs-code>
 
-## Resolve circular dependencies with a forward reference
+## 순환 의존성을 앞으로 참조하여 해결하기
 
-The order of class declaration matters in TypeScript.
-You can't refer directly to a class until it's been defined.
+TypeScript에서 클래스 선언 순서는 중요합니다.
+정의되기 전까지는 클래스를 직접 참조할 수 없습니다.
 
-This isn't usually a problem, especially if you adhere to the recommended *one class per file* rule.
-But sometimes circular references are unavoidable.
-For example, when class 'A' refers to class 'B' and 'B' refers to 'A', one of them has to be defined first.
+일반적으로 문제는 아니지만, 특히 권장되는 *파일당 하나의 클래스* 규칙을 준수하는 경우에는 문제가 되지 않습니다.
+하지만 때로는 순환 참조가 불가피합니다.
+예를 들어, 클래스 'A'가 클래스 'B'를 참조하고 'B'가 'A'를 참조할 때, 둘 중 하나는 먼저 정의되어야 합니다.
 
-The Angular `forwardRef()` function creates an *indirect* reference that Angular can resolve later.
+Angular의 `forwardRef()` 함수는 Angular가 나중에 해결할 수 있는 *간접* 참조를 생성합니다.
 
-You face a similar problem when a class makes *a reference to itself*.
-For example, in its `providers` array.
-The `providers` array is a property of the `@Component()` decorator function, which must appear before the class definition.
-You can break such circular references by using `forwardRef`.
+클래스가 *자기 자신을 참조할 때*도 유사한 문제에 직면하게 됩니다.
+예를 들어, `providers` 배열에서 그렇습니다.
+`providers` 배열은 클래스 정의보다 먼저 나타나야 하는 `@Component()` 데코레이터 함수의 속성입니다.
+`forwardRef`를 사용하여 이러한 순환 참조를 끊을 수 있습니다.
 
 <docs-code header="app.component.ts" language="typescript" highlight="[4]">
 providers: [
@@ -82,4 +82,4 @@ providers: [
     useExisting: forwardRef(() => MenuItem),
   },
 ],
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/guide/di/hierarchical-dependency-injection.md b/adev/src/content/guide/di/hierarchical-dependency-injection.md
index af5ea8b3fc64..2077d82ca11e 100644
--- a/adev/src/content/guide/di/hierarchical-dependency-injection.md
+++ b/adev/src/content/guide/di/hierarchical-dependency-injection.md
@@ -1,52 +1,52 @@
-# Hierarchical injectors
+# 계층적 주입기
 
-Injectors in Angular have rules that you can leverage to achieve the desired visibility of injectables in your applications.
-By understanding these rules, you can determine whether to declare a provider at the application level, in a Component, or in a Directive.
+Angular의 주입기에는 애플리케이션에서 주입 가능한 항목의 원하는 가시성을 얻기 위해 활용할 수 있는 규칙이 있습니다.
+이러한 규칙을 이해함으로써 애플리케이션 수준, 컴포넌트 수준 또는 지시자 수준에서 공급자를 선언할지를 결정할 수 있습니다.
 
-The applications you build with Angular can become quite large, and one way to manage this complexity is to split up the application into a well-defined tree of components.
+Angular로 구축하는 애플리케이션은 꽤 커질 수 있으며, 이러한 복잡성을 관리하는 한 가지 방법은 애플리케이션을 잘 정의된 컴포넌트 트리로 나누는 것입니다.
 
-There can be sections of your page that work in a completely independent way than the rest of the application, with its own local copies of the services and other dependencies that it needs.
-Some of the services that these sections of the application use might be shared with other parts of the application, or with parent components that are further up in the component tree, while other dependencies are meant to be private.
+페이지의 특정 섹션은 애플리케이션의 나머지 부분과 완전히 독립적으로 작동할 수 있으며, 필요한 서비스 및 기타 종속성의 로컬 복사본을 가질 수 있습니다.
+이러한 애플리케이션의 섹션이 사용하는 서비스 중 일부는 애플리케이션의 다른 부분이나 컴포넌트 트리 상위의 부모 컴포넌트와 공유될 수 있지만, 다른 종속성은 비공식적으로 유지됩니다.
 
-With hierarchical dependency injection, you can isolate sections of the application and give them their own private dependencies not shared with the rest of the application, or have parent components share certain dependencies with its child components only but not with the rest of the component tree, and so on. Hierarchical dependency injection enables you to share dependencies between different parts of the application only when and if you need to.
+계층적 의존성 주입을 사용하면 애플리케이션의 섹션을 격리하고 나머지 애플리케이션과 공유되지 않는 고유한 비공식 종속성을 부여하거나, 부모 컴포넌트가 자식 컴포넌트와만 특정 종속성을 공유하게 할 수 있습니다. 계층적 의존성 주입을 통해 다른 부분 간의 종속성을 필요할 때만 공유할 수 있습니다.
 
-## Types of injector hierarchies
+## 주입기 계층의 유형
 
-Angular has two injector hierarchies:
+Angular에는 두 가지 주입기 계층이 있습니다:
 
-| Injector hierarchies        | Details |
-|:---                         |:---     |
-| `EnvironmentInjector` hierarchy | Configure an `EnvironmentInjector` in this hierarchy using `@Injectable()` or `providers` array in `ApplicationConfig`. |
-| `ElementInjector` hierarchy | Created implicitly at each DOM element. An `ElementInjector` is empty by default unless you configure it in the `providers` property on `@Directive()` or `@Component()`. |
+| 주입기 계층                  | 세부 사항 |
+|:---                       |:---     |
+| `EnvironmentInjector` 계층 | `@Injectable()` 또는 `ApplicationConfig`의 `providers` 배열을 사용하여 이 계층에서 `EnvironmentInjector`를 구성합니다. |
+| `ElementInjector` 계층     | 각 DOM 요소에서 암묵적으로 생성됩니다. `ElementInjector`는 `@Directive()` 또는 `@Component()`의 `providers` 속성에서 구성하지 않는 한 기본값으로 비어 있습니다. |
 
-<docs-callout title="NgModule Based Applications">
-For `NgModule` based applications, you can provide dependencies with the `ModuleInjector` hierarchy using an `@NgModule()` or `@Injectable()` annotation.
+<docs-callout title="NgModule 기반 애플리케이션">
+`NgModule` 기반 애플리케이션의 경우, `@NgModule()` 또는 `@Injectable()` 주석을 사용하여 `ModuleInjector` 계층으로 종속성을 제공할 수 있습니다.
 </docs-callout>
 
 ### `EnvironmentInjector`
 
-The `EnvironmentInjector` can be configured in one of two ways by using:
+`EnvironmentInjector`는 다음 두 가지 방법 중 하나로 구성할 수 있습니다:
 
-* The `@Injectable()` `providedIn` property to refer to `root` or `platform`
-* The `ApplicationConfig` `providers` array
+* `@Injectable()`의 `providedIn` 속성을 사용하여 `root` 또는 `platform`을 참조
+* `ApplicationConfig`의 `providers` 배열
 
-<docs-callout title="Tree-shaking and @Injectable()">
+<docs-callout title="트리 섭취 및 @Injectable()">
 
-Using the `@Injectable()` `providedIn` property is preferable to using the `ApplicationConfig` `providers` array. With `@Injectable()` `providedIn`, optimization tools can perform tree-shaking, which removes services that your application isn't using. This results in smaller bundle sizes.
+`@Injectable()`의 `providedIn` 속성을 사용하는 것이 `ApplicationConfig`의 `providers` 배열을 사용하는 것보다 바람직합니다. `@Injectable()` `providedIn`을 사용하면 최적화 도구가 트리 섭취를 수행할 수 있어, 애플리케이션에서 사용하지 않는 서비스를 제거합니다. 이는 더 작은 번들 크기로 이어집니다.
 
-Tree-shaking is especially useful for a library because the application which uses the library may not have a need to inject it.
+트리 섭취는 라이브러리에 특히 유용한데, 라이브러리를 사용하는 애플리케이션에서 주입할 필요가 없을 수 있습니다.
 
 </docs-callout>
 
-`EnvironmentInjector` is configured by the `ApplicationConfig.providers`.
+`EnvironmentInjector`는 `ApplicationConfig.providers`로 구성됩니다.
 
-Provide services using `providedIn` of `@Injectable()` as follows:
+`@Injectable()`의 `providedIn`을 사용하여 서비스를 제공합니다:
 
 <docs-code language="typescript" highlight="[4]">
 import { Injectable } from '@angular/core';
 
 @Injectable({
-  providedIn: 'root'  // <--provides this service in the root EnvironmentInjector
+  providedIn: 'root'  // <--이 서비스는 루트 EnvironmentInjector에서 제공됩니다.
 })
 export class ItemService {
   name = 'telephone';
@@ -54,66 +54,66 @@ export class ItemService {
 
 </docs-code>
 
-The `@Injectable()` decorator identifies a service class.
-The `providedIn` property configures a specific `EnvironmentInjector`, here `root`, which makes the service available in the `root` `EnvironmentInjector`.
+`@Injectable()` 데코레이터는 서비스 클래스를 식별합니다.
+`providedIn` 속성은 여기서 `root`인 특정 `EnvironmentInjector`를 구성하며, 이를 통해 서비스는 `root` `EnvironmentInjector`에서 사용할 수 있게 됩니다.
 
 ### ModuleInjector
 
-In the case of `NgModule` based applications, the ModuleInjector can be configured in one of two ways by using:
+`NgModule` 기반 애플리케이션의 경우, `ModuleInjector`는 다음 두 가지 방법 중 하나로 구성할 수 있습니다:
 
-* The `@Injectable()` `providedIn` property to refer to `root` or `platform`
-* The `@NgModule()` `providers` array
+* `@Injectable()`의 `providedIn` 속성을 사용하여 `root` 또는 `platform`을 참조
+* `@NgModule()`의 `providers` 배열
 
-`ModuleInjector` is configured by the `@NgModule.providers` and `NgModule.imports` property. `ModuleInjector` is a flattening of all the providers arrays that can be reached by following the `NgModule.imports` recursively.
+`ModuleInjector`는 `@NgModule.providers` 및 `NgModule.imports` 속성으로 구성됩니다. `ModuleInjector`는 재귀적으로 `NgModule.imports`를 따라 접근할 수 있는 모든 공급자 배열의 평면화입니다.
 
-Child `ModuleInjector` hierarchies are created when lazy loading other `@NgModules`.
+자식 `ModuleInjector` 계층은 다른 `@NgModules`를 지연 로딩할 때 생성됩니다.
 
-### Platform injector
+### 플랫폼 주입기
 
-There are two more injectors above `root`, an additional `EnvironmentInjector` and `NullInjector()`.
+`root` 위에는 추가 `EnvironmentInjector`와 `NullInjector()` 두 개의 주입기가 더 있습니다.
 
-Consider how Angular bootstraps the application with the following in `main.ts`:
+Angular가 다음을 사용하여 애플리케이션을 부트스트랩하는 방식을 고려하십시오 `main.ts`에서:
 
 <docs-code language="javascript">
 bootstrapApplication(AppComponent, appConfig);
 </docs-code>
 
-The `bootstrapApplication()` method creates a child injector of the platform injector which is configured by the `ApplicationConfig` instance.
-This is the `root` `EnvironmentInjector`.
+`bootstrapApplication()` 메서드는 `ApplicationConfig` 인스턴스에 의해 구성된 플랫폼 주입기의 자식 주입기를 생성합니다.
+이것이 바로 `root` `EnvironmentInjector`입니다.
 
-The `platformBrowserDynamic()` method creates an injector configured by a `PlatformModule`, which contains platform-specific dependencies.
-This allows multiple applications to share a platform configuration.
-For example, a browser has only one URL bar, no matter how many applications you have running.
-You can configure additional platform-specific providers at the platform level by supplying `extraProviders` using the `platformBrowser()` function.
+`platformBrowserDynamic()` 메서드는 플랫폼별 종속성을 포함하는 `PlatformModule`에 의해 구성된 주입기를 생성합니다.
+이를 통해 여러 애플리케이션이 플랫폼 구성을 공유할 수 있습니다.
+예를 들어, 브라우저는 여러 애플리케이션을 실행하더라도 URL 바가 하나만 있습니다.
+`platformBrowser()` 함수를 사용하여 플랫폼 수준에서 추가 플랫폼별 제공자를 구성할 수 있도록 `extraProviders`를 제공할 수 있습니다.
 
-The next parent injector in the hierarchy is the `NullInjector()`, which is the top of the tree.
-If you've gone so far up the tree that you are looking for a service in the `NullInjector()`, you'll get an error unless you've used `@Optional()` because ultimately, everything ends at the `NullInjector()` and it returns an error or, in the case of `@Optional()`, `null`.
-For more information on `@Optional()`, see the [`@Optional()` section](#optional) of this guide.
+계층에서 다음 부모 주입기는 `NullInjector()`로, 트리의 가장 위에 있습니다.
+`NullInjector()`에서 서비스를 찾으려고 너무 위로 올라가면 `@Optional()`을 사용하지 않는 한 오류가 발생합니다. 궁극적으로 모든 것은 `NullInjector()`에서 끝나며 오류를 반환하거나 `@Optional()`의 경우 `null`을 반환합니다.
+`@Optional()`에 대한 자세한 내용은 이 가이드의 [`@Optional()` 섹션](#optional)을 참조하십시오.
 
-The following diagram represents the relationship between the `root` `ModuleInjector` and its parent injectors as the previous paragraphs describe.
+다음 다이어그램은 `root` `ModuleInjector`와 이전 단락에서 설명한 상위 주입기 간의 관계를 나타냅니다.
 
 ```mermaid
 stateDiagram-v2
-    elementInjector: EnvironmentInjector<br>(configured by Angular)<br>has special things like DomSanitizer => providedIn 'platform'
-    rootInjector: root EnvironmentInjector<br>(configured by AppConfig)<br>has things for your app => bootstrapApplication(..., AppConfig)
-    nullInjector: NullInjector<br>always throws an error unless<br>you use @Optional()
+    elementInjector: EnvironmentInjector<br>(Angular에 의해 구성됨)<br>DomSanitizer와 같은 특별한 항목을 가짐 => providedIn 'platform'
+    rootInjector: root EnvironmentInjector<br>(AppConfig에 의해 구성됨)<br>애플리케이션을 위한 항목을 가짐 => bootstrapApplication(..., AppConfig)
+    nullInjector: NullInjector<br>항상 오류를 발생시킴<br>당신이 @Optional()를 사용하지 않는 한
 
     direction BT
     rootInjector --> elementInjector
     elementInjector --> nullInjector
 ```
 
-While the name `root` is a special alias, other `EnvironmentInjector` hierarchies don't have aliases.
-You have the option to create `EnvironmentInjector` hierarchies whenever a dynamically loaded component is created, such as with the Router, which will create child `EnvironmentInjector` hierarchies.
+`root`이라는 이름은 특별한 별칭이지만, 다른 `EnvironmentInjector` 계층은 별칭을 가지고 있지 않습니다.
+동적으로 로드된 컴포넌트를 생성할 때마다 `EnvironmentInjector` 계층을 만들 수 있는 선택권이 있습니다. 예를 들어, 라우터를 사용할 때 자식 `EnvironmentInjector` 계층을 생성합니다.
 
-All requests forward up to the root injector, whether you configured it with the `ApplicationConfig` instance passed to the `bootstrapApplication()` method, or registered all providers with `root` in their own services.
+모든 요청은 루트 주입기로 전달됩니다. `bootstrapApplication()` 메서드에 전달된 `ApplicationConfig` 인스턴스로 구성했든, 각 서비스에 `root`로 등록된 모든 제공자에서 제공된 것이든 상관없이 말입니다.
 
 <docs-callout title="@Injectable() vs. ApplicationConfig">
 
-If you configure an app-wide provider in the `ApplicationConfig` of `bootstrapApplication`, it overrides one configured for `root` in the `@Injectable()` metadata.
-You can do this to configure a non-default provider of a service that is shared with multiple applications.
+`bootstrapApplication`의 `ApplicationConfig`에서 애플리케이션 전역 제공자를 구성하면, 이것은 `@Injectable()` 메타데이터의 `root`에 구성된 것을 덮어씁니다.
+이렇게 하면 여러 애플리케이션과 공유되는 서비스의 비기본 제공자를 구성할 수 있습니다.
 
-Here is an example of the case where the component router configuration includes a non-default [location strategy](guide/routing#location-strategy) by listing its provider in the `providers` list of the `ApplicationConfig`.
+다음은 컴포넌트 라우터 구성에 비기본 [위치 전략](guide/routing#location-strategy)이 포함된 경우의 예입니다. 제공자를 `ApplicationConfig`의 `providers` 목록에 나열합니다.
 
 ```ts
 providers: [
@@ -121,16 +121,16 @@ providers: [
 ]
 ```
 
-For `NgModule` based applications, configure app-wide providers in the `AppModule` `providers`.
+`NgModule` 기반 애플리케이션의 경우, `AppModule`의 `providers`에서 애플리케이션 전역 제공자를 구성합니다.
 
 </docs-callout>
 
 ### `ElementInjector`
 
-Angular creates `ElementInjector` hierarchies implicitly for each DOM element.
+Angular는 각 DOM 요소에 대해 `ElementInjector` 계층을 암묵적으로 생성합니다.
 
-Providing a service in the `@Component()` decorator using its `providers` or `viewProviders` property configures an `ElementInjector`.
-For example, the following `TestComponent` configures the `ElementInjector` by providing the service as follows:
+`@Component()` 데코레이터에서 `providers` 또는 `viewProviders` 속성을 사용하여 서비스를 제공하면 `ElementInjector`를 구성합니다.
+예를 들어, 다음 `TestComponent`는 다음과 같이 서비스를 제공하여 `ElementInjector`를 구성합니다:
 
 <docs-code language="typescript" highlight="[3]">
 @Component({
@@ -140,67 +140,66 @@ For example, the following `TestComponent` configures the `ElementInjector` by p
 export class TestComponent
 </docs-code>
 
-HELPFUL: See the [resolution rules](#resolution-rules) section to understand the relationship between the `EnvironmentInjector` tree, the `ModuleInjector` and the `ElementInjector` tree.
+도움이 되는 것: `EnvironmentInjector` 트리, `ModuleInjector` 및 `ElementInjector` 트리 간의 관계를 이해하려면 [해결 규칙](#resolution-rules) 섹션을 참조하세요.
 
-When you provide services in a component, that service is available by way of the `ElementInjector` at that component instance.
-It may also be visible at child component/directives based on visibility rules described in the [resolution rules](#resolution-rules) section.
+컴포넌트에서 서비스를 제공할 때, 해당 서비스는 해당 컴포넌트 인스턴스의 `ElementInjector`를 통해 사용할 수 있습니다.
+또한 [해결 규칙](#resolution-rules) 섹션에서 설명한 가시성 규칙에 따라 자식 컴포넌트/지시자에서 가시성이 있을 수 있습니다.
 
-When the component instance is destroyed, so is that service instance.
+컴포넌트 인스턴스가 파괴되면 해당 서비스 인스턴스 또한 사라집니다.
 
-#### `@Directive()` and `@Component()`
+#### `@Directive()` 및 `@Component()`
 
-A component is a special type of directive, which means that just as `@Directive()` has a `providers` property, `@Component()` does too.
-This means that directives as well as components can configure providers, using the `providers` property.
-When you configure a provider for a component or directive using the `providers` property, that provider belongs to the `ElementInjector` of that component or directive.
-Components and directives on the same element share an injector.
+컴포넌트는 특수한 유형의 지시자이며, 이는 `@Directive()`가 `providers` 속성을 가지고 있는 것과 마찬가지로 `@Component()`도 가진다는 것을 의미합니다.
+이는 지시자와 컴포넌트가 `providers` 속성을 사용하여 제공자를 구성할 수 있음을 의미합니다.
+컴포넌트 또는 지시자에 대해 제공자를 구성할 때, 그 제공자는 해당 컴포넌트 또는 지시자의 `ElementInjector`에 속합니다.
+같은 요소의 컴포넌트와 지시자는 주입기를 공유합니다.
 
-## Resolution rules
+## 해결 규칙
 
-When resolving a token for a component/directive, Angular resolves it in two phases:
+컴포넌트/지시자를 위한 토큰을 해결할 때 Angular는 두 단계에서 이를 해결합니다:
 
-1. Against its parents in the `ElementInjector` hierarchy.
-2. Against its parents in the `EnvironmentInjector` hierarchy.
+1. `ElementInjector` 계층의 부모를 기준으로.
+2. `EnvironmentInjector` 계층의 부모를 기준으로.
 
-When a component declares a dependency, Angular tries to satisfy that dependency with its own `ElementInjector`.
-If the component's injector lacks the provider, it passes the request up to its parent component's `ElementInjector`.
+컴포넌트가 종속성을 선언하면 Angular는 자체 `ElementInjector`로 해당 종속성을 충족하려고 합니다.
+컴포넌트의 주입기에 제공자가 부족하면 요청을 부모 컴포넌트의 `ElementInjector`로 전달합니다.
 
-The requests keep forwarding up until Angular finds an injector that can handle the request or runs out of ancestor `ElementInjector` hierarchies.
+요청은 Angular가 요청을 처리할 수 있는 주입기를 찾거나 조상의 `ElementInjector` 계층이 다 떨어질 때까지 계속해서 전달됩니다.
 
-If Angular doesn't find the provider in any `ElementInjector` hierarchies, it goes back to the element where the request originated and looks in the `EnvironmentInjector` hierarchy.
-If Angular still doesn't find the provider, it throws an error.
+Angular가 어떤 `ElementInjector` 계층에서도 제공자를 찾지 못하면 요청이 시작된 요소로 돌아가 `EnvironmentInjector` 계층을 확인합니다.
+Angular가 여전히 제공자를 찾지 못하면 오류를 발생시킵니다.
 
-If you have registered a provider for the same DI token at different levels, the first one Angular encounters is the one it uses to resolve the dependency.
-If, for example, a provider is registered locally in the component that needs a service,
-Angular doesn't look for another provider of the same service.
+동일한 DI 토큰에 대해 여러 레벨에서 제공자를 등록한 경우, Angular가 처음 만나는 제공자는 종속성을 해결하는 데 사용되는 것입니다.
+예를 들어, 서비스가 필요로 하는 컴포넌트에 로컬로 제공자가 등록된 경우, Angular는 동일한 서비스의 다른 제공자를 찾지 않습니다.
 
-HELPFUL: For `NgModule` based applications, Angular will search the `ModuleInjector` hierarchy if it cannot find a provider in the `ElementInjector` hierarchies.
+도움이 되는 것: `NgModule` 기반 애플리케이션의 경우, Angular는 `ElementInjector` 계층에서 제공자를 찾지 못한 경우 `ModuleInjector` 계층을 검색합니다.
 
-## Resolution modifiers
+## 해결 수정자
 
-Angular's resolution behavior can be modified with `@Optional()`, `@Self()`, `@SkipSelf()` and `@Host()`.
-Import each of them from `@angular/core` and use each in the component class constructor or in the `inject` configuration when you inject your service.
+Angular의 해결 동작은 `@Optional()`, `@Self()`, `@SkipSelf()` 및 `@Host()`로 수정할 수 있습니다.
+각각을 `@angular/core`에서 가져와 서비스 주입 시 컴포넌트 클래스 생성자 또는 `inject` 구성에서 사용할 수 있습니다.
 
-### Types of modifiers
+### 수정자의 유형
 
-Resolution modifiers fall into three categories:
+해결 수정자는 세 가지 범주로 나뉩니다:
 
-* What to do if Angular doesn't find what you're looking for, that is `@Optional()`
-* Where to start looking, that is `@SkipSelf()`
-* Where to stop looking, `@Host()` and `@Self()`
+* Angular가 찾고 있는 것을 찾지 못했을 경우의 행동, 즉 `@Optional()`
+* 어디에서 검색을 시작할지, 즉 `@SkipSelf()`
+* 어디에서 검색을 중지할지, 즉 `@Host()`와 `@Self()`
 
-By default, Angular always starts at the current `Injector` and keeps searching all the way up.
-Modifiers allow you to change the starting, or _self_, location and the ending location.
+기본적으로 Angular는 항상 현재 `Injector`에서 시작하여 계속 위로 검색합니다.
+수정자는 시작 또는 _자기_ 위치와 종료 위치를 변경할 수 있게 해줍니다.
 
-Additionally, you can combine all of the modifiers except:
+또한, 아래의 조합을 제외하고 모든 수정자를 조합할 수 있습니다:
 
-* `@Host()` and `@Self()`
-* `@SkipSelf()` and `@Self()`.
+* `@Host()` 및 `@Self()`
+* `@SkipSelf()` 및 `@Self()`.
 
 ### `@Optional()`
 
-`@Optional()` allows Angular to consider a service you inject to be optional.
-This way, if it can't be resolved at runtime, Angular resolves the service as `null`, rather than throwing an error.
-In the following example, the service, `OptionalService`, isn't provided in the service, `ApplicationConfig`, `@NgModule()`, or component class, so it isn't available anywhere in the app.
+`@Optional()`은 Angular가 주입할 서비스를 선택 사항으로 간주하도록 합니다.
+이렇게 하면 런타임에서 해결할 수 없을 경우 Angular는 서비스를 `null`로 해결합니다. 오류를 발생시키지 않게 됩니다.
+다음 예제에서 서비스 `OptionalService`는 서비스인 `ApplicationConfig`, `@NgModule()` 또는 컴포넌트 클래스에서 제공되지 않기 때문에, 애플리케이션 어디에서도 사용할 수 없습니다.
 
 <docs-code header="src/app/optional/optional.component.ts" language="typescript">
 export class OptionalComponent {
@@ -210,12 +209,12 @@ export class OptionalComponent {
 
 ### `@Self()`
 
-Use `@Self()` so that Angular will only look at the `ElementInjector` for the current component or directive.
+`@Self()`를 사용하여 Angular가 현재 컴포넌트 또는 지시자의 `ElementInjector`만 검사하도록 합니다.
 
-A good use case for `@Self()` is to inject a service but only if it is available on the current host element.
-To avoid errors in this situation, combine `@Self()` with `@Optional()`.
+`@Self()`의 좋은 사용 사례는 서비스 주입이지만, 현재 호스트 요소에서만 사용할 수 있을 경우입니다.
+이 경우 오류를 피하려면 `@Self()`를 `@Optional()`과 함께 사용합니다.
 
-For example, in the following `SelfNoDataComponent`, notice the injected `LeafService` in the constructor.
+예를 들어, 다음 `SelfNoDataComponent`에서 생성자의 주입된 `LeafService`를 확인하십시오.
 
 <docs-code header="src/app/self-no-data/self-no-data.component.ts" language="typescript"
            highlight="[7]">
@@ -229,20 +228,20 @@ export class SelfNoDataComponent {
 }
 </docs-code>
 
-In this example, there is a parent provider and injecting the service will return the value, however, injecting the service with `@Self()` and `@Optional()` will return `null` because `@Self()` tells the injector to stop searching in the current host element.
+이 예제에서 부모 제공자가 있고 서비스를 주입하면 값을 반환합니다. 그러나 `@Self()`와 `@Optional()`을 사용하여 서비스를 주입하면 `null`이 반환됩니다. 이는 `@Self()`가 주입기에 현재 호스트 요소에서 검색을 중지하도록 지시하기 때문입니다.
 
-Another example shows the component class with a provider for `FlowerService`.
-In this case, the injector looks no further than the current `ElementInjector` because it finds the `FlowerService` and returns the tulip <code>&#x1F337;</code>.
+또 다른 예는 `FlowerService`에 대한 제공자가 있는 컴포넌트 클래스를 보여줍니다.
+이 경우 주입기는 현재 `ElementInjector`보다 더 이상 검색할 필요가 없기 때문에 `FlowerService`를 찾고 튤립 <code>&#x1F337;</code>을 반환합니다.
 
 <docs-code header="src/app/self/self.component.ts" path="adev/src/content/examples/resolution-modifiers/src/app/self/self.component.ts" visibleRegion="self-component"/>
 
 ### `@SkipSelf()`
 
-`@SkipSelf()` is the opposite of `@Self()`.
-With `@SkipSelf()`, Angular starts its search for a service in the parent `ElementInjector`, rather than in the current one.
-So if the parent `ElementInjector` were using the fern <code>&#x1F33F;</code> value for `emoji`, but you had maple leaf <code>&#x1F341;</code> in the component's `providers` array, Angular would ignore maple leaf <code>&#x1F341;</code> and use fern <code>&#x1F33F;</code>.
+`@SkipSelf()`는 `@Self()`의 반대입니다.
+`@SkipSelf()`를 사용하면 Angular가 현재 `ElementInjector`가 아닌 부모 `ElementInjector`에서 서비스 검색을 시작합니다.
+부모 `ElementInjector`가 이모지 값으로 양치식물 <code>&#x1F33F;</code>를 사용하고 있을 경우, 그러나 컴포넌트의 `providers` 배열에 단풍 나무 잎 <code>&#x1F341;</code>가 있다면, Angular는 단풍 나무 잎 <code>&#x1F341;</code>을 무시하고 양치식물 <code>&#x1F33F;</code>을 사용합니다.
 
-To see this in code, assume that the following value for `emoji` is what the parent component were using, as in this service:
+코드에서 이를 보려면, 부모 컴포넌트가 사용하는 `emoji`의 값을 다음과 같이 가정합니다.
 
 <docs-code header="src/app/leaf.service.ts" language="typescript">
 export class LeafService {
@@ -250,8 +249,8 @@ export class LeafService {
 }
 </docs-code>
 
-Imagine that in the child component, you had a different value, maple leaf <code>&#x1F341;</code> but you wanted to use the parent's value instead.
-This is when you'd use `@SkipSelf()`:
+자식 컴포넌트에 서로 다른 값을 단풍 나무 잎 <code>&#x1F341;</code>를 가졌지만 부모의 값을 사용하고 싶다고 가정해봅시다.
+이때 `@SkipSelf()`를 사용합니다:
 
 <docs-code header="src/app/skipself/skipself.component.ts" language="typescript"
            highlight="[[6],[10]]">
@@ -259,23 +258,23 @@ This is when you'd use `@SkipSelf()`:
   selector: 'app-skipself',
   templateUrl: './skipself.component.html',
   styleUrls: ['./skipself.component.css'],
-  // Angular would ignore this LeafService instance
+  // Angular는 이 LeafService 인스턴스를 무시합니다.
   providers: [{ provide: LeafService, useValue: { emoji: '🍁' } }]
 })
 export class SkipselfComponent {
-  // Use @SkipSelf() in the constructor
+  // 생성자에서 @SkipSelf()를 사용합니다.
   constructor(@SkipSelf() public leaf: LeafService) { }
 }
 </docs-code>
 
-In this case, the value you'd get for `emoji` would be fern <code>&#x1F33F;</code>, not maple leaf <code>&#x1F341;</code>.
+이 경우, 얻는 `emoji` 값은 양치식물 <code>&#x1F33F;</code> 될 것이며, 단풍 나무 잎 <code>&#x1F341;</code>은 아닙니다.
 
-#### `@SkipSelf()` with `@Optional()`
+#### `@SkipSelf()`와 `@Optional()`
 
-Use `@SkipSelf()` with `@Optional()` to prevent an error if the value is `null`.
+`@SkipSelf()`와 `@Optional()`을 함께 사용하여 값이 `null`인 경우 오류를 방지합니다.
 
-In the following example, the `Person` service is injected in the constructor.
-`@SkipSelf()` tells Angular to skip the current injector and `@Optional()` will prevent an error should the `Person` service be `null`.
+다음 예제에서 `Person` 서비스가 생성자에서 주입됩니다.
+`@SkipSelf()`는 Angular에게 현재 주입기를 건너뛰라고 지시하고 `@Optional()`은 `Person` 서비스가 `null`일 경우 오류를 방지합니다.
 
 <docs-code language="typescript">
 class Person {
@@ -287,10 +286,10 @@ class Person {
 
 <!-- TODO: Remove ambiguity between @Host and @Self. -->
 
-`@Host()` lets you designate a component as the last stop in the injector tree when searching for providers.
+`@Host()`를 사용하면 제공자를 찾기 위해 주입기 트리의 마지막 단계에서 컴포넌트를 지정할 수 있습니다.
 
-Even if there is a service instance further up the tree, Angular won't continue looking.
-Use `@Host()` as follows:
+더 높은 트리의 서비스 인스턴스가 있어도 Angular는 계속 검색하지 않습니다.
+다음과 같이 `@Host()`를 사용합니다:
 
 <docs-code header="src/app/host/host.component.ts" language="typescript"
            highlight="[[6],[10]]">
@@ -298,24 +297,24 @@ Use `@Host()` as follows:
   selector: 'app-host',
   templateUrl: './host.component.html',
   styleUrls: ['./host.component.css'],
-  //  provide the service
+  // 서비스를 제공합니다.
   providers: [{ provide: FlowerService, useValue: { emoji: '🌷' } }]
 })
 export class HostComponent {
-  // use @Host() in the constructor when injecting the service
+  // 서비스 주입 시 생성자에서 @Host() 사용
   constructor(@Host() @Optional() public flower?: FlowerService) { }
 }
 </docs-code>
 
-Since `HostComponent` has `@Host()` in its constructor, no matter what the parent of `HostComponent` might have as a `flower.emoji` value, the `HostComponent` will use tulip <code>&#x1F337;</code>.
+`HostComponent`의 생성자에 `@Host()`가 있으므로 부모가 `flower.emoji` 값으로 어떤 것이든 관계없이 `HostComponent`는 튤립 <code>&#x1F337;</code>을 사용합니다.
 
-## Logical structure of the template
+## 템플릿의 논리적 구조
 
-When you provide services in the component class, services are visible within the `ElementInjector` tree relative to where and how you provide those services.
+컴포넌트 클래스에서 서비스를 제공할 때, 서비스는 그 서비스를 제공하는 위치와 방법에 따라 `ElementInjector` 트리 내에서 가시성이 있습니다.
 
-Understanding the underlying logical structure of the Angular template will give you a foundation for configuring services and in turn control their visibility.
+Angular 템플릿의 근본적인 논리적 구조를 이해하면 서비스를 구성하고 그에 따라 가시성을 제어하는 데 기반을 제공합니다.
 
-Components are used in your templates, as in the following example:
+템플릿에서 구성 요소가 사용됩니다. 예를 들어:
 
 <docs-code language="html">
 <app-root>
@@ -323,55 +322,55 @@ Components are used in your templates, as in the following example:
 </app-root>
 </docs-code>
 
-HELPFUL: Usually, you declare the components and their templates in separate files.
-For the purposes of understanding how the injection system works, it is useful to look at them from the point of view of a combined logical tree.
-The term _logical_ distinguishes it from the render tree, which is your application's DOM tree.
-To mark the locations of where the component templates are located, this guide uses the `<#VIEW>` pseudo-element, which doesn't actually exist in the render tree and is present for mental model purposes only.
+도움이 되는 것: 일반적으로 컴포넌트와 그 템플릿을 별도의 파일에 선언합니다.
+주입 시스템이 어떻게 작동하는지 이해하는 데 도움이 되도록 결합된 논리적 트리의 관점에서 보는 것이 유용합니다.
+_논리적_이라는 용어는 렌더 트리와 구별되며, 이는 애플리케이션의 DOM 트리입니다.
+컴포넌트 템플릿이 위치한 위치를 표시하기 위해 이 가이드는 `<#VIEW>` 가상 요소를 사용하며, 이는 실제 렌더 트리에 존재하지 않고 정신 모델 목적을 위해서만 존재합니다.
 
-The following is an example of how the `<app-root>` and `<app-child>` view trees are combined into a single logical tree:
+다음은 `<app-root>` 및 `<app-child>` 뷰 트리가 하나의 논리적 트리로 결합되는 방식의 예입니다:
 
 <docs-code language="html">
 <app-root>
   <#VIEW>
     <app-child>
      <#VIEW>
-       …content goes here…
+       …내용이 여기에 들어갑니다…
      </#VIEW>
     </app-child>
   </#VIEW>
 </app-root>
 </docs-code>
 
-Understanding the idea of the `<#VIEW>` demarcation is especially significant when you configure services in the component class.
+`<#VIEW>` 표시의 아이디어를 이해하는 것은 특히 컴포넌트 클래스에서 서비스를 구성할 때 중요합니다.
 
-## Example: Providing services in `@Component()`
+## 예제: `@Component()`에서 서비스 제공
 
-How you provide services using a `@Component()` (or `@Directive()`) decorator determines their visibility.
-The following sections demonstrate `providers` and `viewProviders` along with ways to modify service visibility with `@SkipSelf()` and `@Host()`.
+`@Component()` (또는 `@Directive()`) 데코레이터를 사용하여 서비스를 제공하는 방법은 그 가시성을 결정합니다.
+다음 섹션에서는 `providers` 및 `viewProviders`를 보여주고, `@SkipSelf()` 및 `@Host()`를 사용하여 서비스 가시성을 수정하는 방법을 보여줍니다.
 
-A component class can provide services in two ways:
+컴포넌트 클래스는 두 가지 방법으로 서비스를 제공할 수 있습니다:
 
-| Arrays                       | Details |
-|:---                          |:---     |
-| With a `providers` array     | `@Component({ providers: [SomeService] })`     |
-| With a `viewProviders` array | `@Component({ viewProviders: [SomeService] })` |
+| 배열                          | 세부 사항 |
+|:---                           |:---     |
+| `providers` 배열 사용         | `@Component({ providers: [SomeService] })`     |
+| `viewProviders` 배열 사용     | `@Component({ viewProviders: [SomeService] })` |
 
-In the examples below, you will see the logical tree of an Angular application.
-To illustrate how the injector works in the context of templates, the logical tree will represent the HTML structure of the application.
-For example, the logical tree will show that `<child-component>` is a direct children of `<parent-component>`.
+아래의 예제에서 Angular 애플리케이션의 논리적 트리를 볼 수 있습니다.
+주입기가 템플릿의 맥락에서 어떻게 작동하는지 설명하기 위해, 논리적 트리는 애플리케이션의 HTML 구조를 나타냅니다.
+예를 들어, 논리적 트리는 `<child-component>`가 `<parent-component>`의 직접적인 자식임을 보여줍니다.
 
-In the logical tree, you will see special attributes: `@Provide`, `@Inject`, and `@ApplicationConfig`.
-These aren't real attributes but are here to demonstrate what is going on under the hood.
+논리적 트리에서 특별한 속성을 볼 수 있습니다: `@Provide`, `@Inject` 및 `@ApplicationConfig`.
+이들은 실제 속성이 아니지만, 내부에서 무슨 일이 일어나고 있는지를 보여주는 데 사용됩니다.
 
-| Angular service attribute                                                                                          | Details |
-|:---                                                                                                                |:---     |
-| `@Inject(Token)=>Value`     | If `Token` is injected at this location in the logical tree, its value would be `Value`.     |
-| `@Provide(Token=Value)`     | Indicates that `Token` is provided with `Value` at this location in the logical tree.        |
-| `@ApplicationConfig` | Demonstrates that a fallback `EnvironmentInjector` should be used at this location.          |
+| Angular 서비스 속성                                                                                  | 세부 사항 |
+|:---                                                                                                  |:---     |
+| `@Inject(Token)=>Value`     | `Token`이 논리적 트리의 이 위치에서 주입되면, 그 값은 `Value`가 됩니다.     |
+| `@Provide(Token=Value)`     | 논리적 트리의 이 위치에서 `Token`이 `Value`로 제공됨을 표시합니다.        |
+| `@ApplicationConfig` | 이 위치에서 하위 `EnvironmentInjector`를 사용해야 함을 나타냅니다.          |
 
-### Example app structure
+### 예제 앱 구조
 
-The example application has a `FlowerService` provided in `root` with an `emoji` value of red hibiscus <code>&#x1F33A;</code>.
+예제 애플리케이션은 `root`에서 제공되는 `FlowerService`를 가지며, 이의 `emoji` 값은 빨간 히비스쿠스 <code>&#x1F33A;</code>입니다.
 
 <docs-code header="src/app/flower.service.ts" language="typescript">
 @Injectable({
@@ -382,24 +381,24 @@ export class FlowerService {
 }
 </docs-code>
 
-Consider an application with only an `AppComponent` and a `ChildComponent`.
-The most basic rendered view would look like nested HTML elements such as the following:
+`AppComponent`와 `ChildComponent`만 있는 애플리케이션을 생각해보겠습니다.
+가장 기본적으로 렌더링된 뷰는 다음과 같은 중첩된 HTML 요소처럼 보입니다:
 
 <docs-code language="html">
 
-<app-root> <!-- AppComponent selector -->
-  <app-child> <!-- ChildComponent selector -->
+<app-root> <!-- AppComponent 선택기 -->
+  <app-child> <!-- ChildComponent 선택기 -->
   </app-child>
 </app-root>
 
 </docs-code>
 
-However, behind the scenes, Angular uses a logical view representation as follows when resolving injection requests:
+그러나 이면 세계에서 Angular는 주입 요청을 해결할 때 논리적 뷰 표현을 다음과 같이 사용합니다:
 
 <docs-code language="html">
-<app-root> <!-- AppComponent selector -->
+<app-root> <!-- AppComponent 선택기 -->
   <#VIEW>
-    <app-child> <!-- ChildComponent selector -->
+    <app-child> <!-- ChildComponent 선택기 -->
       <#VIEW>
       </#VIEW>
     </app-child>
@@ -407,12 +406,11 @@ However, behind the scenes, Angular uses a logical view representation as follow
 </app-root>
 </docs-code>
 
-The `<#VIEW>` here represents an instance of a template.
-Notice that each component has its own `<#VIEW>`.
+여기서 `<#VIEW>`는 템플릿의 인스턴스를 나타냅니다. 각 컴포넌트마다 자체 `<#VIEW>`가 있는 것을 고려하십시오.
 
-Knowledge of this structure can inform how you provide and inject your services, and give you complete control of service visibility.
+이 구조에 대한 지식은 어떻게 서비스를 제공하고 주입할지를 알리고, 서비스 가시성을 완전히 제어할 수 있도록 합니다.
 
-Now, consider that `<app-root>` injects the `FlowerService`:
+이제 `<app-root>`가 `FlowerService`를 주입한다고 가정해 보겠습니다:
 
 <docs-code header="src/app/app.component.ts" language="typescript">
 export class AppComponent  {
@@ -420,25 +418,25 @@ export class AppComponent  {
 }
 </docs-code>
 
-Add a binding to the `<app-root>` template to visualize the result:
+결과를 시각화하기 위해 `<app-root>` 템플릿에 바인딩을 추가합니다:
 
 <docs-code header="src/app/app.component.html" language="html">
-<p>Emoji from FlowerService: {{flower.emoji}}</p>
+<p>FlowerService의 Emoji: {{flower.emoji}}</p>
 </docs-code>
 
-The output in the view would be:
+뷰에서 보이는 출력은 다음과 같습니다:
 
 <docs-code language="shell">
-Emoji from FlowerService: &#x1F33A;
+FlowerService의 Emoji: &#x1F33A;
 </docs-code>
 
-In the logical tree, this would be represented as follows:
+논리적 트리에서는 이것이 다음과 같이 표현됩니다:
 
 <docs-code language="html" highlight="[[1],[2],[4]]">
 <app-root @ApplicationConfig
         @Inject(FlowerService) flower=>"&#x1F33A;">
   <#VIEW>
-    <p>Emoji from FlowerService: {{flower.emoji}} (&#x1F33A;)</p>
+    <p>FlowerService의 Emoji: {{flower.emoji}} (&#x1F33A;)</p>
     <app-child>
       <#VIEW>
       </#VIEW>
@@ -448,29 +446,27 @@ In the logical tree, this would be represented as follows:
 
 </docs-code>
 
-When `<app-root>` requests the `FlowerService`, it is the injector's job to resolve the `FlowerService` token.
-The resolution of the token happens in two phases:
+`<app-root>`가 `FlowerService`를 요청하면, 이는 주입기가 `FlowerService` 토큰을 해결하는 작업이 됩니다.
+토큰의 해결은 두 단계에서 발생합니다:
 
-1. The injector determines the starting location in the logical tree and an ending location of the search.
-    The injector begins with the starting location and looks for the token at each view level in the logical tree.
-    If the token is found it is returned.
+1. 주입기가 논리적 트리에서 시작 위치와 검색 종료 위치를 결정합니다.
+    주입기는 시작 위치에서 시작하여 논리적 트리의 각 뷰 레벨에서 토큰을 찾습니다.
+    토큰이 발견되면 반환됩니다.
 
-1. If the token is not found, the injector looks for the closest parent `EnvironmentInjector` to delegate the request to.
+1. 토큰이 발견되지 않으면 주입기는 가장 가까운 부모 `EnvironmentInjector`를 찾아 요청을 위임합니다.
 
-In the example case, the constraints are:
+예제의 경우 제약 사항은 다음과 같습니다:
 
-1. Start with `<#VIEW>` belonging to `<app-root>` and end with `<app-root>`.
+1. `<#VIEW>`는 `<app-root>` 소속이며 `<app-root>`로 끝납니다.
 
-    * Normally the starting point for search is at the point of injection.
-        However, in this case `<app-root>` is a component. `@Component`s are special in that they also include their own `viewProviders`, which is why the search starts at `<#VIEW>` belonging to `<app-root>`.
-        This would not be the case for a directive matched at the same location.
-    * The ending location happens to be the same as the component itself, because it is the topmost component in this application.
+    * 일반적으로 검색의 시작점은 주입 지점에서 시작됩니다. 그러나 이 경우 `<app-root>`는 컴포넌트입니다. `@Component`는 고유한 `viewProviders`를 포함하므로 검색은 `<app-root>`에 속하는 `<#VIEW>`에서 시작됩니다. 이는 동일한 위치에 일치하는 지시자에게는 해당되지 않습니다.
+    * 종료 위치는 컴포넌트 자체와 같습니다. 왜냐하면 이것은 이 애플리케이션에서 최상위 컴포넌트이기 때문입니다.
 
-1. The `EnvironmentInjector` provided by the `ApplicationConfig` acts as the fallback injector when the injection token can't be found in the `ElementInjector` hierarchies.
+1. `ApplicationConfig`에서 제공하는 `EnvironmentInjector`는 `ElementInjector` 계층에서 주입 토큰을 찾을 수 없을 때 백업 주입기로 작용합니다.
 
-### Using the `providers` array
+### `providers` 배열 사용하기
 
-Now, in the `ChildComponent` class, add a provider for `FlowerService` to demonstrate more complex resolution rules in the upcoming sections:
+이제 `ChildComponent` 클래스에 `FlowerService`에 대한 제공자를 추가하여 향후 섹션에서 더 복잡한 해결 규칙을 설명하겠습니다:
 
 <docs-code header="src/app/child.component.ts" language="typescript"
            highlight="[[5,6],[10]]">
@@ -478,44 +474,44 @@ Now, in the `ChildComponent` class, add a provider for `FlowerService` to demons
   selector: 'app-child',
   templateUrl: './child.component.html',
   styleUrls: ['./child.component.css'],
-  // use the providers array to provide a service
+  // 제공자 배열을 사용하여 서비스를 제공합니다
   providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }]
 })
 export class ChildComponent {
-  // inject the service
-  constructor( public flower: FlowerService) { }
+  // 서비스를 주입합니다
+  constructor(public flower: FlowerService) { }
 }
 </docs-code>
 
-Now that the `FlowerService` is provided in the `@Component()` decorator, when the `<app-child>` requests the service, the injector has only to look as far as the `ElementInjector` in the `<app-child>`.
-It won't have to continue the search any further through the injector tree.
+이제 `@Component()` 데코레이터에서 `FlowerService`가 제공되므로, `<app-child>`가 서비스를 요청할 때 주입기는 `<app-child>`의 `ElementInjector`에서만 봅니다.
+주입기는 더 이상 주입기 트리를 통해 검색을 계속하지 않아야 합니다.
 
-The next step is to add a binding to the `ChildComponent` template.
+다음 단계는 `ChildComponent` 템플릿에 바인딩을 추가하는 것입니다.
 
 <docs-code header="src/app/child.component.html" language="html">
-<p>Emoji from FlowerService: {{flower.emoji}}</p>
+<p>FlowerService의 Emoji: {{flower.emoji}}</p>
 </docs-code>
 
-To render the new values, add `<app-child>` to the bottom of the `AppComponent` template so the view also displays the sunflower:
+새 값을 렌더링하려면, `<app-child>`가 `AppComponent` 템플릿의 하단에 있도록 추가하여 뷰에서 해바라기를 표시하도록 합니다:
 
 <docs-code language="shell">
 Child Component
-Emoji from FlowerService: &#x1F33B;
+FlowerService의 Emoji: &#x1F33B;
 </docs-code>
 
-In the logical tree, this is represented as follows:
+논리적 트리에서는 이것이 다음과 같이 표현됩니다:
 
 <docs-code language="html">
 
 <app-root @ApplicationConfig
         @Inject(FlowerService) flower=>"&#x1F33A;">
   <#VIEW>
-    <p>Emoji from FlowerService: {{flower.emoji}} (&#x1F33A;)</p>
+    <p>FlowerService의 Emoji: {{flower.emoji}} (&#x1F33A;)</p>
     <app-child @Provide(FlowerService="&#x1F33B;")
-               @Inject(FlowerService)=>"&#x1F33B;"> <!-- search ends here -->
-      <#VIEW> <!-- search starts here -->
-        <h2>Child Component</h2>
-        <p>Emoji from FlowerService: {{flower.emoji}} (&#x1F33B;)</p>
+               @Inject(FlowerService)=>"&#x1F33B;"> <!-- 검색이 여기서 종료됨 -->
+      <#VIEW> <!-- 검색이 여기서 시작됨 -->
+        <h2>자식 구성 요소</h2>
+        <p>FlowerService의 Emoji: {{flower.emoji}} (&#x1F33B;)</p>
       </#VIEW>
     </app-child>
   </#VIEW>
@@ -523,23 +519,23 @@ In the logical tree, this is represented as follows:
 
 </docs-code>
 
-When `<app-child>` requests the `FlowerService`, the injector begins its search at the `<#VIEW>` belonging to `<app-child>` \(`<#VIEW>` is included because it is injected from `@Component()`\) and ends with `<app-child>`.
-In this case, the `FlowerService` is resolved in the `providers` array with sunflower <code>&#x1F33B;</code> of the `<app-child>`.
-The injector doesn't have to look any further in the injector tree.
-It stops as soon as it finds the `FlowerService` and never sees the red hibiscus <code>&#x1F33A;</code>.
+`<app-child>`가 `FlowerService`를 요청하면, 주입기는 `<#VIEW>`에서 시작하여 `<app-child>`로 종료합니다.
+이 경우 `FlowerService`는 `<app-child>`의 제공자 배열에서 해바라기 <code>&#x1F33B;</code>로 해결됩니다.
+주입기는 더 이상 주입기 트리에서 다른 곳을 찾아보지 않습니다.
+`FlowerService`를 찾자마자 멈추고 빨간 히비스쿠스 <code>&#x1F33A;</code>는 결코 보지 않습니다.
 
-### Using the `viewProviders` array
+### `viewProviders` 배열 사용하기
 
-Use the `viewProviders` array as another way to provide services in the `@Component()` decorator.
-Using `viewProviders` makes services visible in the `<#VIEW>`.
+`@Component()` 데코레이터의 또 다른 방법으로 서비스를 제공하기 위해 `viewProviders` 배열을 사용하십시오.
+`viewProviders`를 사용하면 `<#VIEW>`에서 서비스가 가시적으로 됩니다.
 
-HELPFUL: The steps are the same as using the `providers` array, with the exception of using the `viewProviders` array instead.
+도움이 되는 것: 단계는 `providers` 배열을 사용할 때와 동일하지만, `viewProviders` 배열을 사용하는 것을 제외합니다.
 
-For step-by-step instructions, continue with this section.
-If you can set it up on your own, skip ahead to [Modifying service availability](#visibility-of-provided-tokens).
+단계별 지침을 보려면 이 섹션을 계속 진행하십시오.
+자신이 설정할 수 있다면 [서비스 가용성 수정](#visibility-of-provided-tokens)으로 건너뛰십시오.
 
-For demonstration, we are building an `AnimalService` to demonstrate `viewProviders`.
-First, create an `AnimalService` with an `emoji` property of whale <code>&#x1F433;</code>:
+예제를 위해 `viewProviders`를 설명하기 위해 'AnimalService'를 구축합니다.
+먼저, 고래 <code>&#x1F433;</code>의 `emoji` 속성을 가진 `AnimalService`를 생성합니다:
 
 <docs-code header="src/app/animal.service.ts" language="typescript">
 import { Injectable } from '@angular/core';
@@ -552,7 +548,7 @@ export class AnimalService {
 }
 </docs-code>
 
-Following the same pattern as with the `FlowerService`, inject the `AnimalService` in the `AppComponent` class:
+`FlowerService`와 동일한 패턴을 따라, `AppComponent` 클래스에서 `AnimalService`를 주입합니다:
 
 <docs-code header="src/app/app.component.ts" language="typescript" highlight="[4]">
 export class AppComponent {
@@ -562,10 +558,10 @@ export class AppComponent {
 }
 </docs-code>
 
-HELPFUL: You can leave all the `FlowerService` related code in place as it will allow a comparison with the `AnimalService`.
+도움이 되는 것: `FlowerService` 관련 코드를 모두 남겨두면 지침되기 위해 `AnimalService`와 비교할 수 있습니다.
 
-Add a `viewProviders` array and inject the `AnimalService` in the `<app-child>` class, too, but give `emoji` a different value.
-Here, it has a value of dog <code>&#x1F436;</code>.
+`viewProviders` 배열을 추가하고 `<app-child>` 클래스에서 `AnimalService`를 주입하되, `emoji`에 다른 값을 부여합니다.
+여기서는 개 <code>&#x1F436;</code>의 값을 가지고 있습니다.
 
 <docs-code header="src/app/child.component.ts" language="typescript"
            highlight="[[7],[11]]">
@@ -573,43 +569,43 @@ Here, it has a value of dog <code>&#x1F436;</code>.
   selector: 'app-child',
   templateUrl: './child.component.html',
   styleUrls: ['./child.component.css'],
-  // provide services
+  // 서비스 제공
   providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }],
   viewProviders: [{ provide: AnimalService, useValue: { emoji: '🐶' } }]
 })
 export class ChildComponent {
-  // inject service
+  // 서비스 주입
   constructor( public flower: FlowerService, public animal: AnimalService) { }
 ...
 }
 </docs-code>
 
-Add bindings to the `ChildComponent` and the `AppComponent` templates.
-In the `ChildComponent` template, add the following binding:
+`ChildComponent` 및 `AppComponent` 템플릿에 바인딩을 추가하십시오.
+`ChildComponent` 템플릿의 경우, 다음과 같은 바인딩을 추가합니다:
 
 <docs-code header="src/app/child.component.html" language="html">
-<p>Emoji from AnimalService: {{animal.emoji}}</p>
+<p>AnimalService의 Emoji: {{animal.emoji}}</p>
 </docs-code>
 
-Additionally, add the same to the `AppComponent` template:
+추가로 `AppComponent` 템플릿에도 동일한 내용을 추가합니다:
 
 <docs-code header="src/app/app.component.html" language="html">
-<p>Emoji from AnimalService: {{animal.emoji}}</p>s
+<p>AnimalService의 Emoji: {{animal.emoji}}</p>
 </docs-code>
 
-Now you should see both values in the browser:
+이제 브라우저에서 두 값을 모두 볼 수 있습니다:
 
 <docs-code hideCopy language="shell">
 
 AppComponent
-Emoji from AnimalService: &#x1F433;
+AnimalService의 Emoji: &#x1F433;
 
 Child Component
-Emoji from AnimalService: &#x1F436;
+AnimalService의 Emoji: &#x1F436;
 
 </docs-code>
 
-The logic tree for this example of `viewProviders` is as follows:
+이 `viewProviders` 예제의 논리적 트리는 다음과 같습니다:
 
 <docs-code language="html">
 
@@ -619,8 +615,8 @@ The logic tree for this example of `viewProviders` is as follows:
     <app-child>
       <#VIEW @Provide(AnimalService="&#x1F436;")
             @Inject(AnimalService=>"&#x1F436;")>
-       <!-- ^^using viewProviders means AnimalService is available in <#VIEW>-->
-       <p>Emoji from AnimalService: {{animal.emoji}} (&#x1F436;)</p>
+       <!-- ^^viewProviders를 사용하면 AnimalService가 <#VIEW>에서 사용 가능 -->
+       <p>AnimalService의 Emoji: {{animal.emoji}} (&#x1F436;)</p>
       </#VIEW>
     </app-child>
   </#VIEW>
@@ -628,18 +624,18 @@ The logic tree for this example of `viewProviders` is as follows:
 
 </docs-code>
 
-Just as with the `FlowerService` example, the `AnimalService` is provided in the `<app-child>` `@Component()` decorator.
-This means that since the injector first looks in the `ElementInjector` of the component, it finds the `AnimalService` value of dog <code>&#x1F436;</code>.
-It doesn't need to continue searching the `ElementInjector` tree, nor does it need to search the `ModuleInjector`.
+`FlowerService` 예제와 마찬가지로 `AnimalService`는 `<app-child>`의 `@Component()` 데코레이터 내에서 제공됩니다.
+이는 주입기가 먼저 컴포넌트의 `ElementInjector`에서 검색하기 때문에 개 <code>&#x1F436;</code> 값을 찾습니다.
+주입기는 더 이상 `ElementInjector` 트리를 검색할 필요가 없으며, `ModuleInjector`도 검색할 필요가 없습니다.
 
-### `providers` vs. `viewProviders`
+### `providers`와 `viewProviders` 비교
 
-The `viewProviders` field is conceptually similar to `providers`, but there is one notable difference.
-Configured providers in `viewProviders` are not visible to projected content that ends up as a logical children of the component.
+`viewProviders` 필드는 `providers`와 개념적으로 유사하지만 한 가지 주목해야 할 차이점이 있습니다.
+`viewProviders`에 구성된 제공자는 컴포넌트의 논리적 자식으로 끝나는 투영된 콘텐츠에 보이지 않습니다.
 
-To see the difference between using `providers` and `viewProviders`, add another component to the example and call it `InspectorComponent`.
-`InspectorComponent` will be a child of the `ChildComponent`.
-In `inspector.component.ts`, inject the `FlowerService` and `AnimalService` in the constructor:
+`providers`와 `viewProviders` 사용의 차이를 보려면 예제에 또 다른 컴포넌트를 추가하고 이를 `InspectorComponent`라고 부르세요.
+`InspectorComponent`는 `ChildComponent`의 자식이 됩니다.
+`inspector.component.ts`에서 생성자에 `FlowerService`와 `AnimalService`를 주입합니다:
 
 <docs-code header="src/app/inspector/inspector.component.ts" language="typescript">
 export class InspectorComponent {
@@ -647,15 +643,15 @@ export class InspectorComponent {
 }
 </docs-code>
 
-You do not need a `providers` or `viewProviders` array.
-Next, in `inspector.component.html`, add the same markup from previous components:
+`providers`나 `viewProviders` 배열이 필요하지 않습니다.
+다음으로 `inspector.component.html`에 이전 컴포넌트와 동일한 마크업을 추가합니다:
 
 <docs-code header="src/app/inspector/inspector.component.html" language="html">
-<p>Emoji from FlowerService: {{flower.emoji}}</p>
-<p>Emoji from AnimalService: {{animal.emoji}}</p>
+<p>FlowerService의 Emoji: {{flower.emoji}}</p>
+<p>AnimalService의 Emoji: {{animal.emoji}}</p>
 </docs-code>
 
-Remember to add the `InspectorComponent` to the `ChildComponent` `imports` array.
+`InspectorComponent`를 `ChildComponent`의 `imports` 배열에 추가하는 것을 잊지 마십시오.
 
 <docs-code header="src/app/child/child.component.ts" language="typescript"
            highlight="[3]">
@@ -666,24 +662,24 @@ Remember to add the `InspectorComponent` to the `ChildComponent` `imports` array
 
 </docs-code>
 
-Next, add the following to `child.component.html`:
+다음으로, `child.component.html`에 다음을 추가합니다:
 
 <docs-code header="src/app/child/child.component.html" language="html"
            highlight="[3,9]">
 ...
 
 <div class="container">
-  <h3>Content projection</h3>
+  <h3>내용 투영</h3>
   <ng-content></ng-content>
 </div>
-<h3>Inside the view</h3>
+<h3>뷰 내부</h3>
 
 <app-inspector></app-inspector>
 </docs-code>
 
-`<ng-content>` allows you to project content, and `<app-inspector>` inside the `ChildComponent` template makes the `InspectorComponent` a child component of `ChildComponent`.
+`<ng-content>`는 콘텐츠를 투영할 수 있게 하며, `ChildComponent` 템플릿 내의 `<app-inspector>`는 `InspectorComponent`를 `ChildComponent`의 자식 컴포넌트로 만듭니다.
 
-Next, add the following to `app.component.html` to take advantage of content projection.
+다음으로 `app.component.html`에 다음을 추가하여 콘텐츠 투영을 활용합니다.
 
 <docs-code header="src/app/app.component.html" language="html" highlight="[2]">
 <app-child>
@@ -691,27 +687,27 @@ Next, add the following to `app.component.html` to take advantage of content pro
 </app-child>
 </docs-code>
 
-The browser now renders the following, omitting the previous examples for brevity:
+브라우저는 이제 다음과 같이 렌더링하며, 이전 예제를 간결하게 생략합니다:
 
 <docs-code hideCopy language="shell">
 ...
-Content projection
+내용 투영
 
-Emoji from FlowerService: &#x1F33B;
-Emoji from AnimalService: &#x1F433;
+FlowerService의 Emoji: &#x1F33B;
+AnimalService의 Emoji: &#x1F433;
 
-Emoji from FlowerService: &#x1F33B;
-Emoji from AnimalService: &#x1F436;
+FlowerService의 Emoji: &#x1F33B;
+AnimalService의 Emoji: &#x1F436;
 
 </docs-code>
 
-These four bindings demonstrate the difference between `providers` and `viewProviders`.
-Remember that the dog emoji <code>&#x1F436;</code> is declared inside the `<#VIEW>` of `ChildComponent` and isn't visible to the projected content.
-Instead, the projected content sees the whale <code>&#x1F433;</code>.
+이 네 가지 바인딩은 `providers`와 `viewProviders` 간의 차이를 보여줍니다.
+개 이모지 <code>&#x1F436;</code>는 `ChildComponent`의 `<#VIEW>` 내부에 선언되었기 때문에 투영된 콘텐츠에서 보이지 않습니다.
+반면에 투영된 콘텐츠는 고래 <code>&#x1F433;</code>을 볼 수 있습니다.
 
-However, in the next output section though, the `InspectorComponent` is an actual child component of `ChildComponent`, `InspectorComponent` is inside the `<#VIEW>`, so when it asks for the `AnimalService`, it sees the dog <code>&#x1F436;</code>.
+하지만 다음 출력 섹션에서는 `InspectorComponent`가 실제로 `ChildComponent`의 자식 컴포넌트이며, `InspectorComponent`는 `<#VIEW>` 내부에 있기 때문에, `AnimalService`를 요청할 때 개 <code>&#x1F436;</code>를 볼 수 있습니다.
 
-The `AnimalService` in the logical tree would look like this:
+논리적 트리에서 `AnimalService`는 다음과 같이 보일 것입니다:
 
 <docs-code language="html">
 
@@ -721,19 +717,19 @@ The `AnimalService` in the logical tree would look like this:
     <app-child>
       <#VIEW @Provide(AnimalService="&#x1F436;")
             @Inject(AnimalService=>"&#x1F436;")>
-        <!-- ^^using viewProviders means AnimalService is available in <#VIEW>-->
-        <p>Emoji from AnimalService: {{animal.emoji}} (&#x1F436;)</p>
+        <!-- ^^viewProviders를 사용하면 AnimalService가 <#VIEW>에서 사용 가능 -->
+        <p>AnimalService의 Emoji: {{animal.emoji}} (&#x1F436;)</p>
 
         <div class="container">
-          <h3>Content projection</h3>
+          <h3>내용 투영</h3>
           <app-inspector @Inject(AnimalService) animal=>"&#x1F433;">
-            <p>Emoji from AnimalService: {{animal.emoji}} (&#x1F433;)</p>
+            <p>AnimalService의 Emoji: {{animal.emoji}} (&#x1F433;)</p>
           </app-inspector>
         </div>
 
         <app-inspector>
           <#VIEW @Inject(AnimalService) animal=>"&#x1F436;">
-            <p>Emoji from AnimalService: {{animal.emoji}} (&#x1F436;)</p>
+            <p>AnimalService의 Emoji: {{animal.emoji}} (&#x1F436;</p>
           </#VIEW>
         </app-inspector>
       </#VIEW>
@@ -743,33 +739,33 @@ The `AnimalService` in the logical tree would look like this:
 
 </docs-code>
 
-The projected content of `<app-inspector>` sees the whale <code>&#x1F433;</code>, not the dog <code>&#x1F436;</code>, because the dog <code>&#x1F436;</code> is inside the `<app-child>` `<#VIEW>`.
-The `<app-inspector>` can only see the dog <code>&#x1F436;</code> if it is also within the `<#VIEW>`.
+`<app-inspector>` 투영된 콘텐츠는 고래 <code>&#x1F433;</code>을 보며, 개 <code>&#x1F436;</code>는 `ChildComponent` `<#VIEW>` 내부에 있기 때문에 보이지 않습니다. 
+`<app-inspector>`는 개 <code>&#x1F436;</code>을 보려면 `<#VIEW>` 내부에도 있어야 합니다.
 
-### Visibility of provided tokens
+### 제공된 토큰의 가시성
 
-Visibility decorators influence where the search for the injection token begins and ends in the logic tree.
-To do this, place visibility decorators at the point of injection, that is, the `constructor()`, rather than at a point of declaration.
+가시성 데코레이터는 논리 트리에서 주입 토큰을 검색하는 시작 위치와 종료 위치에 영향을 미칩니다.
+이를 위해 주입 지점인 `constructor()`에 가시성 데코레이터를 배치하고, 선언 지점에는 배치하지 않습니다.
 
-To alter where the injector starts looking for `FlowerService`, add `@SkipSelf()` to the `<app-child>` `@Inject` declaration where `FlowerService` is injected.
-This declaration is in the `<app-child>` constructor as shown in `child.component.ts`:
+`FlowerService`의 검색 시작 위치를 변경하려면 `<app-child>`에서 `FlowerService`가 주입되는 `@Inject` 선언에 `@SkipSelf()`를 추가합니다.
+이 선언은 `<app-child>` 생성자에 있으며, 다음과 같이 보입니다 `child.component.ts`에서:
 
 <docs-code language="typescript">
 constructor(@SkipSelf() public flower: FlowerService) { }
 </docs-code>
 
-With `@SkipSelf()`, the `<app-child>` injector doesn't look to itself for the `FlowerService`.
-Instead, the injector starts looking for the `FlowerService` at the `ElementInjector` of the `<app-root>`, where it finds nothing.
-Then, it goes back to the `<app-child>` `ModuleInjector` and finds the red hibiscus <code>&#x1F33A;</code> value, which is available because `<app-child>` and `<app-root>` share the same `ModuleInjector`.
-The UI renders the following:
+`@SkipSelf()`를 사용하면 `<app-child>` 주입기는 `FlowerService`를 위해 자신을 보기 않게 됩니다.
+대신 주입기는 `<app-root>`의 `ElementInjector`에서 `FlowerService`를 검색하기 시작하며, 여기서는 아무것도 찾지 못합니다.
+그 다음 `<app-child>` `ModuleInjector`로 돌아가 빨간 히비스쿠스 <code>&#x1F33A;</code> 값을 찾습니다. 이는 `<app-child>`와 `<app-root>`가 같은 `ModuleInjector`를 공유하기 때문에 가능합니다.
+UI는 다음과 같이 렌더링됩니다:
 
 <docs-code hideCopy language="shell">
 
-Emoji from FlowerService: &#x1F33A;
+FlowerService의 Emoji: &#x1F33A;
 
 </docs-code>
 
-In a logical tree, this same idea might look like this:
+논리적 트리에서 이 동일한 아이디어는 다음과 같이 보일 것입니다:
 
 <docs-code language="html">
 
@@ -778,7 +774,7 @@ In a logical tree, this same idea might look like this:
   <#VIEW>
     <app-child @Provide(FlowerService="&#x1F33B;")>
       <#VIEW @Inject(FlowerService, SkipSelf)=>"&#x1F33A;">
-        <!-- With SkipSelf, the injector looks to the next injector up the tree (app-root) -->
+        <!-- SkipSelf로 인해 주입기는 트리에서 다음 주입기로(up) 향한다(app-root) -->
       </#VIEW>
     </app-child>
   </#VIEW>
@@ -786,18 +782,17 @@ In a logical tree, this same idea might look like this:
 
 </docs-code>
 
-Though `<app-child>` provides the sunflower <code>&#x1F33B;</code>, the application renders the red hibiscus <code>&#x1F33A;</code> because `@SkipSelf()` causes the current injector (`app-child`) to skip itself and look to its parent.
+`<app-child>`가 해바라기 <code>&#x1F33B;</code>를 제공하더라도, 애플리케이션은 빨간 히비스쿠스 <code>&#x1F33A;</code>를 렌더링합니다. 이는 `@SkipSelf()`가 현재 주입기(`app-child`)를 건너뛰도록 지시하고 부모를 보도록 하므로 가능합니다.
 
-If you now add `@Host()` (in addition to the `@SkipSelf()`), the result will be `null`.
-This is because `@Host()` limits the upper bound of the search to the `app-child` `<#VIEW>`.
-Here's the idea in the logical tree:
+이제 `@Host()`를 추가한다면, 결과는 `null`이 됩니다.
+이는 `@Host()`가 검색 최상한을 `<app-child>` `<#VIEW>`로 제한하기 때문입니다. 논리적 트리에는 다음과 같이 표시됩니다:
 
 <docs-code language="html">
 
 <app-root @ApplicationConfig
         @Inject(FlowerService) flower=>"&#x1F33A;">
-  <#VIEW> <!-- end search here with null-->
-    <app-child @Provide(FlowerService="&#x1F33B;")> <!-- start search here -->
+  <#VIEW> <!-- null로 종료됨 -->
+    <app-child @Provide(FlowerService="&#x1F33B;")> <!-- 검색 시작 -->
       <#VIEW @Inject(FlowerService, @SkipSelf, @Host, @Optional)=>null>
       </#VIEW>
       </app-parent>
@@ -806,15 +801,15 @@ Here's the idea in the logical tree:
 
 </docs-code>
 
-Here, the services and their values are the same, but `@Host()` stops the injector from looking any further than the `<#VIEW>` for `FlowerService`, so it doesn't find it and returns `null`.
+여기에서 서비스와 값은 동일하지만, `@Host()`는 주입기가 `FlowerService`를 위한 다음 검색을 `<#VIEW>`에서 중지하여, 이를 찾지 못하고 `null`을 반환합니다.
 
-### `@SkipSelf()` and `viewProviders`
+### `@SkipSelf()` 및 `viewProviders`
 
-Remember, `<app-child>` provides the `AnimalService` in the `viewProviders` array with the value of dog <code>&#x1F436;</code>.
-Because the injector has only to look at the `ElementInjector` of the `<app-child>` for the `AnimalService`, it never sees the whale <code>&#x1F433;</code>.
+기억하십시오, `<app-child>`는 값이 개 <code>&#x1F436;</code>인 `AnimalService`를 `viewProviders` 배열에서 제공합니다.
+주입기는 `<app-child>`의 `AnimalService`에 대해서만 검사합니다. 따라서 고래 <code>&#x1F433;</code>는 보지 못합니다.
 
-As in the `FlowerService` example, if you add `@SkipSelf()` to the constructor for the `AnimalService`, the injector won't look in the  `ElementInjector` of the current `<app-child>` for the `AnimalService`.
-Instead, the injector will begin at the `<app-root>` `ElementInjector`.
+`FlowerService` 예제와 마찬가지로, `AnimalService`에 대해 `<app-child>`의 생성자에 `@SkipSelf()`를 추가하면, 주입기는 현재 `<app-child>`의 `ElementInjector`에서 `AnimalService`를 찾지 않습니다.
+대신, 주입기는 `<app-root>`의 `ElementInjector`에서 시작됩니다.
 
 <docs-code language="typescript" highlight="[5]">
 @Component({
@@ -826,17 +821,17 @@ Instead, the injector will begin at the `<app-root>` `ElementInjector`.
 })
 </docs-code>
 
-The logical tree looks like this with `@SkipSelf()` in `<app-child>`:
+논리적 트리는 `<app-child>`의 `@SkipSelf()`로 다음과 같아 보입니다:
 
 <docs-code language="html">
 
 <app-root @ApplicationConfig
-          @Inject(AnimalService=>"&#x1F433;")>
-  <#VIEW><!-- search begins here -->
+          @Inject(AnimalService=>"&#x1F433;">
+  <#VIEW><!-- 검색은 여기서 시작 -->
     <app-child>
       <#VIEW @Provide(AnimalService="&#x1F436;")
-             @Inject(AnimalService, SkipSelf=>"&#x1F433;")>
-        <!--Add @SkipSelf -->
+             @Inject(AnimalService, SkipSelf=>"&#x1F433;">
+        <!-- @SkipSelf 추가 -->
       </#VIEW>
     </app-child>
   </#VIEW>
@@ -844,13 +839,13 @@ The logical tree looks like this with `@SkipSelf()` in `<app-child>`:
 
 </docs-code>
 
-With `@SkipSelf()` in the `<app-child>`, the injector begins its search for the `AnimalService` in the `<app-root>` `ElementInjector` and finds whale <code>&#x1F433;</code>.
+`@SkipSelf()`가 `<app-child>`에 있으면, 주입기는 `AnimalService`의 검색을 `<app-root>` `ElementInjector`에서 시작하며 고래 <code>&#x1F433;</code>를 찾습니다.
 
-### `@Host()` and `viewProviders`
+### `@Host()` 및 `viewProviders`
 
-If you just use `@Host()` for the injection of `AnimalService`, the result is dog <code>&#x1F436;</code> because the injector finds the `AnimalService` in the `<app-child>` `<#VIEW>` itself.
-The `ChildComponent` configures the `viewProviders` so that the dog emoji is provided as `AnimalService` value.
-You can also see `@Host()` in the constructor:
+`AnimalService` 주입의 경우, `@Host()`만 사용하면 결과는 개 <code>&#x1F436;</code>입니다. 주입기가 `<app-child>` `<#VIEW>`에서 `AnimalService`를 찾기 때문입니다.
+`ChildComponent`는 만약 주입기 `viewProviders`에서 개 이모지를 제공하도록 클래스 내에 구성되기 때문에 가능합니다.
+생성자에서도 `@Host()`를 확인할 수 있습니다:
 
 <docs-code language="typescript" highlight="[[5],[9]]">
 @Component({
@@ -865,16 +860,16 @@ export class ChildComponent {
 }
 </docs-code>
 
-`@Host()` causes the injector to look until it encounters the edge of the `<#VIEW>`.
+`@Host()`는 주입기가 `<#VIEW>`의 끝에 도달할 때까지 검색을 계속합니다.
 
 <docs-code language="html">
 
 <app-root @ApplicationConfig
-          @Inject(AnimalService=>"&#x1F433;")>
+          @Inject(AnimalService=>"&#x1F433;">
   <#VIEW>
     <app-child>
       <#VIEW @Provide(AnimalService="&#x1F436;")
-             @Inject(AnimalService, @Host=>"&#x1F436;")> <!-- @Host stops search here -->
+             @Inject(AnimalService, @Host=>"&#x1F436;"> <!-- @Host가 검색 종료 -->
       </#VIEW>
     </app-child>
   </#VIEW>
@@ -882,7 +877,7 @@ export class ChildComponent {
 
 </docs-code>
 
-Add a `viewProviders` array with a third animal, hedgehog <code>&#x1F994;</code>, to the `app.component.ts` `@Component()` metadata:
+`app.component.ts`의 `@Component()` 메타데이터에 세 번째 동물, 고슴도치 <code>&#x1F994;</code>를 추가하는 `viewProviders` 배열을 추가하십시오:
 
 <docs-code language="typescript" highlight="[6]">
 @Component({
@@ -896,8 +891,8 @@ Add a `viewProviders` array with a third animal, hedgehog <code>&#x1F994;</code>
 
 </docs-code>
 
-Next, add `@SkipSelf()` along with `@Host()` to the constructor for the `AnimalService` injection in `child.component.ts`.
-Here are `@Host()` and `@SkipSelf()` in the `<app-child>` constructor:
+그런 다음, `child.component.ts`에서 `AnimalService` 주입에 대해 `@Host()`와 `@SkipSelf()`를 추가합니다.
+다음은 `<app-child>` 생성자에서 `@Host()` 및 `@SkipSelf()`입니다:
 
 <docs-code language="typescript" highlight="[4]">
 export class ChildComponent {
@@ -908,28 +903,26 @@ export class ChildComponent {
 
 </docs-code>
 
-<!-- TODO: This requires a rework. It seems not well explained what `viewProviders`/`injectors` is here
-  and how `@Host()` works.
- -->
+<!-- TODO: 이 requires a rework. 잘 설명되지 않은 것 같습니다. `viewProviders`/`injectors`가 무엇인지와 `@Host()`가 어떻게 작동하는지에 대해 -->
 
-When `@Host()` and `@SkipSelf()` were applied to the `FlowerService`, which is in the `providers` array, the result was `null` because `@SkipSelf()` starts its search in the `<app-child>` injector, but `@Host()` stops searching at `<#VIEW>` —where there is no `FlowerService`
-In the logical tree, you can see that the `FlowerService` is visible in `<app-child>`, not its `<#VIEW>`.
+이제 `@Host()`와 `@SkipSelf()`가 `providers` 배열의 `FlowerService`에 적용되면 결과는 `null`이 됩니다. 
+이는 `@SkipSelf()`가 `<app-child>`의 주입기를 시작하게 하고 `@Host()`가 `<#VIEW>`에서 검색을 중단하게 하기 때문입니다. 논리적 트리에서 볼 수 있습니다. `<FlowerService>`는 `<app-child>`에서 가시성이 있게 되지만 `<#VIEW>` 내에서는 가시성이 없습니다.
 
-However, the `AnimalService`, which is provided in the `AppComponent` `viewProviders` array, is visible.
+그러나 `AnimalService`는 `AppComponent`의 `viewProviders` 배열에서 보입니다.
 
-The logical tree representation shows why this is:
+논리적 트리 표현은 그 이유를 보여줍니다:
 
 <docs-code language="html">
 
 <app-root @ApplicationConfig
-        @Inject(AnimalService=>"&#x1F433;")>
+        @Inject(AnimalService=>"&#x1F433;">
   <#VIEW @Provide(AnimalService="&#x1F994;")
          @Inject(AnimalService, @Optional)=>"&#x1F994;">
-    <!-- ^^@SkipSelf() starts here,  @Host() stops here^^ -->
+    <!-- ^^@SkipSelf()는 여기서 시작되며,  @Host()는 여기서 멈춘다^^ -->
     <app-child>
       <#VIEW @Provide(AnimalService="&#x1F436;")
              @Inject(AnimalService, @SkipSelf, @Host, @Optional)=>"&#x1F994;">
-               <!-- Add @SkipSelf ^^-->
+               <!-- @SkipSelf 추가 ^^-->
       </#VIEW>
       </app-child>
   </#VIEW>
@@ -937,23 +930,24 @@ The logical tree representation shows why this is:
 
 </docs-code>
 
-`@SkipSelf()`, causes the injector to start its search for the `AnimalService` at the `<app-root>`, not the `<app-child>`, where the request originates, and `@Host()` stops the search at the `<app-root>` `<#VIEW>`.
-Since `AnimalService` is provided by way of the `viewProviders` array, the injector finds hedgehog <code>&#x1F994;</code> in the `<#VIEW>`.
+`@SkipSelf()`는 주입기가 `AnimalService`에 대한 검색을 `<app-root>`에서 시작하게 하며, `<app-child>`가 요청의 출발지입니다. 
+`@Host()`는 `<app-root>`의 `<#VIEW>`에서 검색을 멈추게 합니다. 
+`AnimalService`는 `viewProviders` 배열을 통해 제공되므로 주입기는 `<#VIEW>`에서 고슴도치 <code>&#x1F994;</code>를 찾습니다.
 
-## Example: `ElementInjector` use cases
+## 예제: `ElementInjector` 사용 사례
 
-The ability to configure one or more providers at different levels opens up useful possibilities.
+하나 이상의 제공자를 다양한 수준에서 구성할 수 있는 능력은 유용한 가능성을 열어줍니다.
 
-### Scenario: service isolation
+### 시나리오: 서비스 격리
 
-Architectural reasons may lead you to restrict access to a service to the application domain where it belongs.
-For example, consider we build a `VillainsListComponent` that displays a list of villains.
-It gets those villains from a `VillainsService`.
+건축적 이유로 서비스를 속하는 응용 프로그램 도메인에 대한 액세스를 제한할 수 있습니다.
+예를 들어, 악당 목록을 표시하는 `VillainsListComponent`를 고려해보십시오.
+이것은 `VillainsService`에서 이러한 악당을 가져옵니다.
 
-If you provide `VillainsService` in the root `AppModule`, it will make `VillainsService` visible everywhere in the application.
-If you later modify the `VillainsService`, you could break something in other components that started depending this service by accident.
+`VillainsService`를 루트 `AppModule`에서 제공하면 애플리케이션의 모든 곳에서 접근할 수 있게 됩니다.
+나중에 `VillainsService`를 수정하면 우연히 이 서비스에 의존하게 된 다른 컴포넌트에서 문제가 발생할 수 있습니다.
 
-Instead, you should provide the `VillainsService` in the `providers` metadata of the `VillainsListComponent` like this:
+대신 다음과 같이 `VillainsListComponent` 메타데이터의 `providers`에 `VillainsService`를 제공해야 합니다:
 
 <docs-code header="src/app/villains-list.component.ts (metadata)" language="typescript"
            highlight="[4]">
@@ -965,34 +959,34 @@ Instead, you should provide the `VillainsService` in the `providers` metadata of
 export class VillainsListComponent {}
 </docs-code>
 
-By providing `VillainsService` in the `VillainsListComponent` metadata and nowhere else, the service becomes available only in the `VillainsListComponent` and its subcomponent tree.
+`VillainsListComponent` 메타데이터에 `VillainsService`를 제공하고 다른 곳에서는 제공하지 않으면, 서비스는 `VillainsListComponent`와 그 하위 컴포넌트 트리에서만 사용 가능합니다.
 
-`VillainService` is a singleton with respect to `VillainsListComponent` because that is where it is declared.
-As long as `VillainsListComponent` does not get destroyed it will be the same instance of `VillainService` but if there are multiple instances of `VillainsListComponent`, then each instance of `VillainsListComponent` will have its own instance of `VillainService`.
+`VillainsService`는 `VillainsListComponent`에 대해 싱글톤입니다. 이는 제공된 장소이기 때문입니다.
+`VillainsListComponent`가 파괴되지 않는 한, 이는 항상 동일한 `VillainsService` 인스턴스를 가지지만, `VillainsListComponent`의 인스턴스가 복수로 있을 경우 각 인스턴스는 고유한 `VillainsService` 인스턴스를 가집니다.
 
-### Scenario: multiple edit sessions
+### 시나리오: 다수의 편집 세션
 
-Many applications allow users to work on several open tasks at the same time.
-For example, in a tax preparation application, the preparer could be working on several tax returns, switching from one to the other throughout the day.
+많은 애플리케이션은 사용자가 동시에 여러 개의 열린 작업을 진행할 수 있도록 합니다.
+예를 들어, 세금 신고 애플리케이션에서 준비자는 하루 종일 여러 세금 신고서를 처리하면서 하나에서 다른 것으로 전환할 수 있습니다.
 
-To demonstrate that scenario, imagine a `HeroListComponent` that displays a list of super heroes.
+이 시나리오를 설명하기 위해 `HeroListComponent`가 슈퍼히어로의 목록을 표시한다고 가정해 보십시오.
 
-To open a hero's tax return, the preparer clicks on a hero name, which opens a component for editing that return.
-Each selected hero tax return opens in its own component and multiple returns can be open at the same time.
+영웅의 세금 신고서를 열기 위해 준비자는 영웅의 이름을 클릭하여 해당 신고서를 편집하는 컴포넌트를 열 수 있습니다.
+각 선택된 영웅의 세금 신고서는 자체 컴포넌트에서 열리며 여러 신고서를 동시에 열 수 있습니다.
 
-Each tax return component has the following characteristics:
+각 세금 신고서 컴포넌트는 다음과 같은 특성을 가집니다:
 
-* Is its own tax return editing session
-* Can change a tax return without affecting a return in another component
-* Has the ability to save the changes to its tax return or cancel them
+* 자체 세금 신고서 편집 세션입니다.
+* 다른 컴포넌트의 세금 신고서에 영향을 미치지 않고 변경할 수 있습니다.
+* 자신의 세금 신고서에 대한 변경 사항을 저장하거나 취소할 수 있는 기능을 가지고 있습니다.
 
-Suppose that the `HeroTaxReturnComponent` had logic to manage and restore changes.
-That would be a straightforward task for a hero tax return.
-In the real world, with a rich tax return data model, the change management would be tricky.
-You could delegate that management to a helper service, as this example does.
+`HeroTaxReturnComponent`가 변경 관리를 처리하는 논리가 있다고 가정해 보십시오.
+이는 영웅 세금 신고서에는 단순한 작업이 될 것입니다.
+실제 세상에서는 풍부한 세금 신고서 데이터 모델을 사용하여 변경 관리는 복잡할 수 있습니다.
+이 관리 로직을 헬퍼 서비스에 위임할 수 있습니다.
 
-The `HeroTaxReturnService` caches a single `HeroTaxReturn`, tracks changes to that return, and can save or restore it.
-It also delegates to the application-wide singleton `HeroService`, which it gets by injection.
+`HeroTaxReturnService`는 단일 `HeroTaxReturn`을 캐시하고, 해당 신고서의 변경 사항을 추적하며, 저장하거나 복원할 수 있습니다.
+또한 애플리케이션 전역에서 싱글톤인 `HeroService`를 주입하여 위임합니다.
 
 <docs-code header="src/app/hero-tax-return.service.ts" language="typescript">
 import { Injectable } from '@angular/core';
@@ -1026,7 +1020,7 @@ export class HeroTaxReturnService {
 }
 </docs-code>
 
-Here is the `HeroTaxReturnComponent` that makes use of `HeroTaxReturnService`.
+여기 `HeroTaxReturnComponent`가 `HeroTaxReturnService`를 사용하는 방법입니다.
 
 <docs-code header="src/app/hero-tax-return.component.ts" language="typescript">
 import { Component, EventEmitter, Input, Output } from '@angular/core';
@@ -1056,14 +1050,14 @@ export class HeroTaxReturnComponent {
   constructor(private heroTaxReturnService: HeroTaxReturnService) {}
 
   onCanceled()  {
-    this.flashMessage('Canceled');
+    this.flashMessage('취소됨');
     this.heroTaxReturnService.restoreTaxReturn();
   }
 
   onClose() { this.close.emit(); }
 
   onSaved() {
-    this.flashMessage('Saved');
+    this.flashMessage('저장됨');
     this.heroTaxReturnService.saveTaxReturn();
   }
 
@@ -1074,39 +1068,38 @@ export class HeroTaxReturnComponent {
 }
 </docs-code>
 
-The _tax-return-to-edit_ arrives by way of the `@Input()` property, which is implemented with getters and setters.
-The setter initializes the component's own instance of the `HeroTaxReturnService` with the incoming return.
-The getter always returns what that service says is the current state of the hero.
-The component also asks the service to save and restore this tax return.
+_편집할 세금 신고서_는 `@Input()` 속성을 통해 전달되며, 이는 getter 및 setter로 구현됩니다.
+setter는 들어오는 신고서로 컴포넌트의 자체 `HeroTaxReturnService` 인스턴스를 초기화합니다.
+getter는 항상 서비스가 현재 상태로 보고하는 것을 반환합니다.
+또한 컴포넌트는 서비스에 요청하여 이 세금 신고서를 저장하고 복원합니다.
 
-This won't work if the service is an application-wide singleton.
-Every component would share the same service instance, and each component would overwrite the tax return that belonged to another hero.
+이 작업은 서비스가 애플리케이션 전역 싱글톤인 경우에 작동하지 않을 것입니다.
+모든 컴포넌트는 동일한 서비스 인스턴스를 공유하며, 각 컴포넌트는 다른 영웅의 세금 신고서를 덮어쓰게 됩니다.
 
-To prevent this, configure the component-level injector of `HeroTaxReturnComponent` to provide the service, using the `providers` property in the component metadata.
+이러한 작업을 수행하려면 `HeroTaxReturnComponent`의 컴포넌트 수준 주입기에서 서비스를 제공하도록 구성해야 합니다. 컴포넌트 메타데이터의 `providers` 속성을 사용합니다.
 
 <docs-code header="src/app/hero-tax-return.component.ts (providers)" language="typescript">
 providers: [HeroTaxReturnService]
 </docs-code>
 
-The `HeroTaxReturnComponent` has its own provider of the `HeroTaxReturnService`.
-Recall that every component _instance_ has its own injector.
-Providing the service at the component level ensures that _every_ instance of the component gets a private instance of the service. This makes sure that no tax return gets overwritten.
+`HeroTaxReturnComponent`는 `HeroTaxReturnService`의 자체 제공자를 가지게 됩니다.
+각 컴포넌트 _인스턴스_는 자신의 주입기를 가지므로, 컴포넌트 수준에서 서비스를 제공하면 _각_ 컴포넌트 인스턴스가 서비스의 비공식 인스턴스를 받게 됩니다. 이를 통해 어떤 세금 신고서도 덮어쓰여지지 않게 보장합니다.
 
-HELPFUL: The rest of the scenario code relies on other Angular features and techniques that you can learn about elsewhere in the documentation.
+도움이 되는 것: 나머지 시나리오 코드는 다른 Angular 기능 및 기술에 의존하며, 문서의 다른 곳에서 배울 수 있는 내용입니다.
 
-### Scenario: specialized providers
+### 시나리오: 전문화된 제공자
 
-Another reason to provide a service again at another level is to substitute a _more specialized_ implementation of that service, deeper in the component tree.
+서비스를 또 다른 수준에서 제공해야 하는 또 다른 이유는 컴포넌트 트리의 깊은 곳에서 보다 전문화된 서비스 구현을 대체하기 위해서입니다.
 
-For example, consider a `Car` component that includes tire service information and depends on other services to provide more details about the car.
+예를 들어, 타이어 서비스 정보를 포함하고 자동차에 대한 더 많은 세부 정보를 제공하는 다른 서비스에 의존하는 `Car` 컴포넌트를 고려하십시오.
 
-The root injector, marked as (A), uses _generic_ providers for details about `CarService` and `EngineService`.
+루트 주입기(A로 표시됨)는 `CarService` 및 `EngineService`에 대한 _일반적인_ 제공자를 사용합니다.
 
-1. `Car` component (A).  Component (A) displays tire service data about a car and specifies generic services to provide more information about the car.
+1. `Car` 컴포넌트(A).  컴포넌트 (A)는 차량에 대한 타이어 서비스 데이터를 표시하고, 차량에 대한 더 많은 정보를 제공하기 위해 일반 서비스를 지정합니다.
 
-2. Child component (B). Component (B) defines its own, _specialized_ providers for `CarService` and `EngineService` that have special capabilities suitable for what's going on in component (B).
+2. 자식 컴포넌트(B). 컴포넌트 (B)는 `CarService` 및 `EngineService`에 대한 자신의 _전문화된_ 제공자를 정의하여 컴포넌트(B)에서 일어나는 일에 적합한 특별한 기능을 가집니다.
 
-3. Child component (C) as a child of Component (B). Component (C) defines its own, even _more specialized_ provider for `CarService`.
+3. 자식 컴포넌트(C)로 컴포넌트(B)의 자식. 컴포넌트(C)는 `CarService`에 대한 자신의 더욱 _전문화된_ 제공자를 정의합니다.
 
 ```mermaid
 graph TD;
@@ -1123,13 +1116,13 @@ classDef noShadow filter:none
 class COMPONENT_A,COMPONENT_B,COMPONENT_C noShadow
 ```
 
-Behind the scenes, each component sets up its own injector with zero, one, or more providers defined for that component itself.
+비하인드 스토리에서는 각 컴포넌트가 해당 컴포넌트 자체에 대해 정의된 0개, 1개 또는 2개 이상의 제공자를 사용하여 고유한 주입기를 설정합니다.
 
-When you resolve an instance of `Car` at the deepest component (C), its injector produces:
+가장 깊은 컴포넌트(C)에서 `Car` 인스턴스를 해결할 때, 주입기는 다음을 생성합니다:
 
-* An instance of `Car` resolved by injector (C)
-* An `Engine` resolved by injector (B)
-* Its `Tires` resolved by the root injector (A).
+* 주입기(C)에 의해 해결된 `Car` 인스턴스
+* 주입기(B)에 의해 해결된 `Engine`
+* 루트 주입기(A)에 의해 해결된 `Tires`.
 
 ```mermaid
 graph BT;
@@ -1170,8 +1163,8 @@ style tires fill:#BDD7EE,color:#000
 style RootInjector fill:#BDD7EE,color:#000
 ```
 
-## More on dependency injection
+## 의존성 주입에 대한 더 많은 정보
 
 <docs-pill-row>
-  <docs-pill href="/guide/di/dependency-injection-providers" title="DI Providers"/>
-</docs-pill-row>
+  <docs-pill href="/guide/di/dependency-injection-providers" title="DI 제공자"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/guide/di/lightweight-injection-tokens.md b/adev/src/content/guide/di/lightweight-injection-tokens.md
index b20c8e31d3b8..7265094305a8 100644
--- a/adev/src/content/guide/di/lightweight-injection-tokens.md
+++ b/adev/src/content/guide/di/lightweight-injection-tokens.md
@@ -1,26 +1,26 @@
-# Optimizing client application size with lightweight injection tokens
+# 클라이언트 애플리케이션 크기를 최적화하는 경량 주입 토큰 사용
 
-This page provides a conceptual overview of a dependency injection technique that is recommended for library developers.
-Designing your library with *lightweight injection tokens* helps optimize the bundle size of client applications that use your library.
+이 페이지는 라이브러리 개발자를 위한 권장 종속성 주입 기술의 개념적 개요를 제공합니다.
+*경량 주입 토큰*으로 라이브러리를 설계하면 라이브러리를 사용하는 클라이언트 애플리케이션의 번들 크기를 최적화하는 데 도움이 됩니다.
 
-You can manage the dependency structure among your components and injectable services to optimize bundle size by using tree-shakable providers.
-This normally ensures that if a provided component or service is never actually used by the application, the compiler can remove its code from the bundle.
+트리 쉐이커블 프로바이더를 사용하여 구성 요소 및 주입 가능한 서비스 간의 종속성 구조를 관리하여 번들 크기를 최적화할 수 있습니다.
+이렇게 하면 제공된 구성 요소나 서비스가 애플리케이션에서 실제로 사용되지 않을 경우, 컴파일러가 해당 코드를 번들에서 제거할 수 있습니다.
 
-Due to the way Angular stores injection tokens, it is possible that such an unused component or service can end up in the bundle anyway.
-This page describes a dependency injection design pattern that supports proper tree-shaking by using lightweight injection tokens.
+Angular가 주입 토큰을 저장하는 방식 때문에, 사용되지 않는 구성 요소나 서비스가 최종적으로 번들에 포함될 수 있습니다.
+이 페이지에서는 경량 주입 토큰을 사용하여 적절한 트리 쉐이킹을 지원하는 종속성 주입 디자인 패턴을 설명합니다.
 
-The lightweight injection token design pattern is especially important for library developers.
-It ensures that when an application uses only some of your library's capabilities, the unused code can be eliminated from the client's application bundle.
+경량 주입 토큰 디자인 패턴은 라이브러리 개발자에게 특히 중요합니다.
+애플리케이션이 라이브러리의 일부 기능만 사용할 때, 사용되지 않는 코드를 클라이언트 애플리케이션 번들에서 제거할 수 있도록 보장합니다.
 
-When an application uses your library, there might be some services that your library supplies which the client application doesn't use.
-In this case, the application developer should expect that service to be tree-shaken, and not contribute to the size of the compiled application.
-Because the application developer cannot know about or remedy a tree-shaking problem in the library, it is the responsibility of the library developer to do so.
-To prevent the retention of unused components, your library should use the lightweight injection token design pattern.
+애플리케이션이 라이브러리를 사용할 때, 클라이언트 애플리케이션에서 사용하지 않는 라이브러리가 제공하는 서비스가 있을 수 있습니다.
+이 경우 애플리케이션 개발자는 해당 서비스가 트리 쉐이킹 되어 컴파일된 애플리케이션의 크기에 기여하지 않을 것이라고 예상해야 합니다.
+애플리케이션 개발자는 라이브러리의 트리 쉐이킹 문제를 알거나 remedy할 수 없기 때문에, 이를 해결하는 것은 라이브러리 개발자의 책임입니다.
+사용되지 않는 구성 요소의 보존을 방지하기 위해 라이브러리는 경량 주입 토큰 디자인 패턴을 사용해야 합니다.
 
-## When tokens are retained
+## 토큰이 보존되는 경우
 
-To better explain the condition under which token retention occurs, consider a library that provides a library-card component.
-This component contains a body and can contain an optional header:
+토큰 보존이 발생하는 조건을 더 잘 설명하기 위해, 라이브러리 카드 구성 요소를 제공하는 라이브러리를 고려해 보십시오.
+이 구성 요소는 본문을 포함하고 선택적 헤더를 포함할 수 있습니다:
 
 <docs-code language="html">
 
@@ -30,7 +30,7 @@ This component contains a body and can contain an optional header:
 
 </docs-code>
 
-In a likely implementation, the `<lib-card>` component uses `@ContentChild()` or `@ContentChildren()` to get `<lib-header>` and `<lib-body>`, as in the following:
+가능한 구현에서는 `<lib-card>` 구성 요소가 다음과 같이 `@ContentChild()` 또는 `@ContentChildren()`를 사용하여 `<lib-header>`와 `<lib-body>`를 가져옵니다:
 
 <docs-code language="typescript" highlight="[12]">
 @Component({
@@ -49,35 +49,35 @@ class LibCardComponent {
 
 </docs-code>
 
-Because `<lib-header>` is optional, the element can appear in the template in its minimal form, `<lib-card></lib-card>`.
-In this case, `<lib-header>` is not used and you would expect it to be tree-shaken, but that is not what happens.
-This is because `LibCardComponent` actually contains two references to the `LibHeaderComponent`:
+`<lib-header>`가 선택적이기 때문에, 요소는 최소 형태인 `<lib-card></lib-card>`로 템플릿에 나타날 수 있습니다.
+이 경우 `<lib-header>`는 사용되지 않으며 트리 쉐이킹될 것으로 예상되지만, 실제로 그렇게 되지 않습니다.
+이는 `LibCardComponent`가 실제로 `LibHeaderComponent`에 대한 두 개의 참조를 포함하기 때문입니다:
 
 <docs-code language="typescript">
 @ContentChild(LibHeaderComponent) header: LibHeaderComponent;
 </docs-code>
 
-* One of these reference is in the *type position*-- that is, it specifies `LibHeaderComponent` as a type: `header: LibHeaderComponent;`.
-* The other reference is in the *value position*-- that is, LibHeaderComponent is the value of the `@ContentChild()` parameter decorator: `@ContentChild(LibHeaderComponent)`.
+* 이 참조 중 하나는 *타입 위치*에 있습니다 -- 즉, `header: LibHeaderComponent;`로 `LibHeaderComponent`를 타입으로 지정합니다.
+* 다른 참조는 *값 위치*에 있습니다 -- 즉, `@ContentChild(LibHeaderComponent)` 매개변수 데코레이터의 값입니다.
 
-The compiler handles token references in these positions differently:
+컴파일러는 이러한 위치의 토큰 참조를 다르게 처리합니다:
 
-* The compiler erases *type position* references after conversion from TypeScript, so they have no impact on tree-shaking.
-* The compiler must keep *value position* references at runtime, which **prevents** the component from being tree-shaken.
+* 컴파일러는 TypeScript에서 변환한 후 *타입 위치* 참조를 제거하므로 트리 쉐이킹에 영향을 주지 않습니다.
+* 컴파일러는 런타임 시 *값 위치* 참조를 유지해야 하므로, 이는 **구성 요소**가 트리 쉐이킹되는 것을 방지합니다.
 
-In the example, the compiler retains the `LibHeaderComponent` token that occurs in the value position.
-This prevents the referenced component from being tree-shaken, even if the application does not actually use `<lib-header>` anywhere.
-If `LibHeaderComponent` 's code, template, and styles combine to become too large, including it unnecessarily can significantly increase the size of the client application.
+예제에서는 컴파일러가 값 위치에서 발생하는 `LibHeaderComponent` 토큰을 보존합니다.
+이것은 애플리케이션이 실제로 `<lib-header>`를 어디서든 사용하지 않더라도 해당 참조된 구성 요소가 트리 쉐이킹되지 않도록 합니다.
+`LibHeaderComponent`의 코드, 템플릿 및 스타일이 너무 커지면, 불필요하게 포함되면 클라이언트 애플리케이션의 크기를 상당히 증가시킬 수 있습니다.
 
-## When to use the lightweight injection token pattern
+## 경량 주입 토큰 패턴을 사용할 때
 
-The tree-shaking problem arises when a component is used as an injection token.
-There are two cases when that can happen:
+트리 쉐이킹 문제는 구성 요소가 주입 토큰으로 사용될 때 발생합니다.
+다음과 같은 두 가지 경우가 있습니다:
 
-* The token is used in the value position of a [content query](guide/components/queries#content-queries).
-* The token is used as a type specifier for constructor injection.
+* 토큰이 [콘텐츠 쿼리](guide/components/queries#content-queries)의 값 위치에서 사용됩니다.
+* 토큰이 생성자 주입을 위한 타입 지정자로 사용됩니다.
 
-In the following example, both uses of the `OtherComponent` token cause retention of `OtherComponent`, preventing it from being tree-shaken when it is not used:
+다음 예제에서 `OtherComponent` 토큰의 두 사용이 모두 `OtherComponent`가 보존되도록 하여 사용되지 않을 때 트리 쉐이킹되는 것을 방지합니다:
 
 <docs-code language="typescript" highlight="[[2],[4]]">
 class MyComponent {
@@ -87,18 +87,18 @@ class MyComponent {
 }
 </docs-code>
 
-Although tokens used only as type specifiers are removed when converted to JavaScript, all tokens used for dependency injection are needed at runtime.
-These effectively change `constructor(@Optional() other: OtherComponent)` to `constructor(@Optional() @Inject(OtherComponent) other)`.
-The token is now in a value position, which causes the tree-shaker to keep the reference.
+타입 지정자로만 사용되는 토큰은 JavaScript로 변환할 때 제거되지만, 종속성 주입에 사용되는 모든 토큰은 런타임에 필요합니다.
+이로 인해 실제로 `constructor(@Optional() other: OtherComponent)`가 `constructor(@Optional() @Inject(OtherComponent) other)`로 변경됩니다.
+이제 토큰은 값 위치에 있어 트리 쉐이커가 참조를 유지하게 됩니다.
 
-HELPFUL: Libraries should use [tree-shakable providers](guide/di/dependency-injection#providing-dependency) for all services, providing dependencies at the root level rather than in components or modules.
+도움이 되는: 라이브러리는 모든 서비스에 대해 [트리 쉐이커블 프로바이더](guide/di/dependency-injection#providing-dependency)를 사용하여 구성 요소나 모듈이 아닌 루트 수준에서 종속성을 제공해야 합니다.
 
-## Using lightweight injection tokens
+## 경량 주입 토큰 사용하기
 
-The lightweight injection token design pattern consists of using a small abstract class as an injection token, and providing the actual implementation at a later stage.
-The abstract class is retained, not tree-shaken, but it is small and has no material impact on the application size.
+경량 주입 토큰 디자인 패턴은 작은 추상 클래스를 주입 토큰으로 사용하고, 실제 구현을 나중에 제공하는 것으로 구성됩니다.
+추상 클래스는 보존되며 트리 쉐이킹되지 않지만, 작고 애플리케이션 크기에 실질적인 영향을 미치지 않습니다.
 
-The following example shows how this works for the `LibHeaderComponent`:
+다음 예제는 이것이 `LibHeaderComponent`에 대해 어떻게 작용하는지를 보여줍니다:
 
 <docs-code language="typescript" language="[[1],[6],[17]]">
 abstract class LibHeaderToken {}
@@ -121,30 +121,30 @@ class LibCardComponent {
 }
 </docs-code>
 
-In this example, the `LibCardComponent` implementation no longer refers to `LibHeaderComponent` in either the type position or the value position.
-This lets full tree-shaking of `LibHeaderComponent` take place.
-The `LibHeaderToken` is retained, but it is only a class declaration, with no concrete implementation.
-It is small and does not materially impact the application size when retained after compilation.
+이 예제에서 `LibCardComponent` 구현은 이제 타입 위치나 값 위치에서 `LibHeaderComponent`를 참조하지 않습니다.
+이로 인해 `LibHeaderComponent`의 완전한 트리 쉐이킹이 발생합니다.
+`LibHeaderToken`은 보존되지만, 구체적인 구현이 없는 클래스 선언일 뿐입니다.
+규모가 작고 컴파일 후 보존될 때 애플리케이션 크기에 실질적인 영향을 미치지 않습니다.
 
-Instead, `LibHeaderComponent` itself implements the abstract `LibHeaderToken` class.
-You can safely use that token as the provider in the component definition, allowing Angular to correctly inject the concrete type.
+대신 `LibHeaderComponent` 자체가 추상 `LibHeaderToken` 클래스를 구현합니다.
+이 토큰을 컴포넌트 정의에서 프로바이더로 안전하게 사용하면 Angular가 정확하게 구체적인 타입을 주입할 수 있습니다.
 
-To summarize, the lightweight injection token pattern consists of the following:
+요약하면, 경량 주입 토큰 패턴은 다음으로 구성됩니다:
 
-1. A lightweight injection token that is represented as an abstract class.
-1. A component definition that implements the abstract class.
-1. Injection of the lightweight pattern, using `@ContentChild()` or `@ContentChildren()`.
-1. A provider in the implementation of the lightweight injection token which associates the lightweight injection token with the implementation.
+1. 추상 클래스로 표현된 경량 주입 토큰.
+1. 추상 클래스를 구현하는 구성 요소 정의.
+1. `@ContentChild()` 또는 `@ContentChildren()`를 사용한 경량 패턴의 주입.
+1. 경량 주입 토큰의 구현에서 경량 주입 토큰과 구현을 연관 짓는 프로바이더.
 
-### Use the lightweight injection token for API definition
+### API 정의를 위한 경량 주입 토큰 사용하기
 
-A component that injects a lightweight injection token might need to invoke a method in the injected class.
-The token is now an abstract class. Since the injectable component implements that class, you must also declare an abstract method in the abstract lightweight injection token class.
-The implementation of the method, with all its code overhead, resides in the injectable component that can be tree-shaken.
-This lets the parent communicate with the child, if it is present, in a type-safe manner.
+경량 주입 토큰을 주입하는 구성 요소는 주입된 클래스의 메서드를 호출해야 할 수 있습니다.
+토큰은 이제 추상 클래스입니다. 주입 가능한 구성 요소가 해당 클래스를 구현하므로, 추상 경량 주입 토큰 클래스에서도 추상 메서드를 선언해야 합니다.
+메서드의 구현은 모든 코드 오버헤드를 가진 주입 가능한 구성 요소에 있으며 이는 트리 쉐이킹될 수 있습니다.
+이로 인해 부모가 자식과 안전한 방식으로 통신할 수 있습니다.
 
-For example, the `LibCardComponent` now queries `LibHeaderToken` rather than `LibHeaderComponent`.
-The following example shows how the pattern lets `LibCardComponent` communicate with the `LibHeaderComponent` without actually referring to `LibHeaderComponent`:
+예를 들어 `LibCardComponent`는 이제 `LibHeaderComponent`가 아닌 `LibHeaderToken`을 쿼리합니다.
+다음 예제는 이 패턴이 부모가 `LibHeaderComponent`를 실제로 참조하지 않고도 `LibHeaderComponent`와 통신할 수 있도록 보여줍니다:
 
 <docs-code language="typescript" highlight="[[3],[13,16],[27]]">
 abstract class LibHeaderToken {
@@ -160,7 +160,7 @@ abstract class LibHeaderToken {
 })
 class LibHeaderComponent extends LibHeaderToken {
   doSomething(): void {
-    // Concrete implementation of `doSomething`
+    // `doSomething`의 구체적인 구현
   }
 }
 
@@ -179,15 +179,15 @@ class LibCardComponent implement AfterContentInit {
 }
 </docs-code>
 
-In this example, the parent queries the token to get the child component, and stores the resulting component reference if it is present.
-Before calling a method in the child, the parent component checks to see if the child component is present.
-If the child component has been tree-shaken, there is no runtime reference to it, and no call to its method.
+이 예제에서 부모는 토큰을 쿼리하여 자식 구성 요소를 가져오고, 자식이 존재하는 경우 결과 구성 요소 참조를 저장합니다.
+자식의 메서드를 호출하기 전에 부모 구성 요소는 자식 구성 요소가 존재하는지 확인합니다.
+자식 구성 요소가 트리 쉐이킹된 경우, 런타임 참조가 없고 메서드 호출이 없습니다.
 
-### Naming your lightweight injection token
+### 경량 주입 토큰 이름 짓기
 
-Lightweight injection tokens are only useful with components.
-The Angular style guide suggests that you name components using the "Component" suffix.
-The example "LibHeaderComponent" follows this convention.
+경량 주입 토큰은 구성 요소와 함께만 유용합니다.
+Angular 스타일 가이드는 "Component" 접미사를 사용하여 구성 요소의 이름을 지정할 것을 권장합니다.
+예제 "LibHeaderComponent"는 이 규칙을 따릅니다.
 
-You should maintain the relationship between the component and its token while still distinguishing between them.
-The recommended style is to use the component base name with the suffix "`Token`" to name your lightweight injection tokens: "`LibHeaderToken`."
+구성 요소와 해당 토큰 간의 관계를 유지하면서 둘 사이를 구별해야 합니다.
+권장 스타일은 구성 요소 기본 이름에 "`Token`" 접미사를 사용하여 경량 주입 토큰의 이름을 지정하는 것입니다: "`LibHeaderToken`."
\ No newline at end of file
diff --git a/adev/src/content/guide/di/overview.md b/adev/src/content/guide/di/overview.md
index d640e1d7beec..20c24db85ae9 100644
--- a/adev/src/content/guide/di/overview.md
+++ b/adev/src/content/guide/di/overview.md
@@ -1,29 +1,29 @@
-<docs-decorative-header title="Dependency injection in Angular" imgSrc="adev/src/assets/images/dependency_injection.svg"> <!-- markdownlint-disable-line -->
-"DI" is a design pattern and mechanism for creating and delivering some parts of an app to other parts of an app that require them.
+<docs-decorative-header title="Angular의 의존성 주입" imgSrc="adev/src/assets/images/dependency_injection.svg"> <!-- markdownlint-disable-line -->
+"DI"는 앱의 일부를 필요로 하는 앱의 다른 부분에 생성하고 전달하는 디자인 패턴 및 메커니즘입니다.
 </docs-decorative-header>
 
-Tip: Check out Angular's [Essentials](essentials/dependency-injection) before diving into this comprehensive guide.
+팁: 이 포괄적인 가이드에 뛰어들기 전에 Angular의 [필수 사항](essentials/dependency-injection)을 확인하세요.
 
-When you develop a smaller part of your system, like a module or a class, you may need to use features from other classes. For example, you may need an HTTP service to make backend calls. Dependency Injection, or DI, is a design pattern and mechanism for creating and delivering some parts of an application to other parts of an application that require them. Angular supports this design pattern and you can use it in your applications to increase flexibility and modularity.
+시스템의 작은 부분, 예를 들어 모듈이나 클래스를 개발할 때, 다른 클래스의 기능을 사용해야 할 수도 있습니다. 예를 들어, 백엔드 호출을 위한 HTTP 서비스가 필요할 수 있습니다. 의존성 주입(Dependency Injection, DI)은 애플리케이션의 일부를 필요에 따라 다른 부분에 생성하고 전달하는 디자인 패턴 및 메커니즘입니다. Angular는 이 디자인 패턴을 지원하며, 어플리케이션에서 이를 사용하여 유연성과 모듈성을 높일 수 있습니다.
 
-In Angular, dependencies are typically services, but they also can be values, such as strings or functions. An injector for an application (created automatically during bootstrap) instantiates dependencies when needed, using a configured provider of the service or value.
+Angular에서 의존성은 일반적으로 서비스지만, 문자열이나 함수와 같은 값일 수도 있습니다. 애플리케이션의 주입기는 필요할 때 서비스 또는 값의 구성된 제공자를 사용하여 의존성을 인스턴스화합니다(부트스트랩 중 자동 생성됨).
 
-## Learn about Angular dependency injection
+## Angular 의존성 주입에 대해 배우기
 
 <docs-card-container>
-  <docs-card title="Understanding dependency injection" href="/guide/di/dependency-injection">
-    Learn basic principles of dependency injection in Angular.
+  <docs-card title="의존성 주입 이해하기" href="/guide/di/dependency-injection">
+    Angular에서 의존성 주입의 기본 원칙을 배웁니다.
   </docs-card>
-  <docs-card title="Creating and injecting service" href="/guide/di/creating-injectable-service">
-    Describes how to create a service and inject it in other services and components.
+  <docs-card title="서비스 생성 및 주입" href="/guide/di/creating-injectable-service">
+    서비스를 생성하고 다른 서비스 및 구성 요소에 주입하는 방법을 설명합니다.
   </docs-card>
-  <docs-card title="Configuring dependency providers" href="/guide/di/dependency-injection-providers">
-    Describes how to configure dependencies using the providers field on the @Component and @NgModule decorators. Also describes how to use InjectionToken to provide and inject values in DI, which can be helpful when you want to use a value other than classes as dependencies.
+  <docs-card title="의존성 제공자 구성" href="/guide/di/dependency-injection-providers">
+    @Component 및 @NgModule 데코레이터의 제공자 필드를 사용하여 의존성을 구성하는 방법을 설명합니다. 또한 DI에서 의존성으로서 클래스 외의 값을 사용하고자 할 때 유용할 수 있는 InjectionToken을 제공하고 주입하는 방법을 설명합니다.
   </docs-card>
-    <docs-card title="Injection context" href="/guide/di/dependency-injection-context">
-    Describes what an injection context is and how to use the DI system where you need it.
+  <docs-card title="주입 컨텍스트" href="/guide/di/dependency-injection-context">
+    주입 컨텍스트가 무엇인지와 필요한 곳에서 DI 시스템을 사용하는 방법을 설명합니다.
   </docs-card>
-  <docs-card title="Hierarchical injectors" href="/guide/di/hierarchical-dependency-injection">
-    Hierarchical DI enables you to share dependencies between different parts of the application only when and if you need to. This is an advanced topic.
+  <docs-card title="계층적 주입기" href="/guide/di/hierarchical-dependency-injection">
+    계층적 DI는 필요할 때와 필요에 따라 애플리케이션의 다른 부분 간에 의존성을 공유할 수 있도록 합니다. 이것은 고급 주제입니다.
   </docs-card>
-</docs-card-container>
+</docs-card-container>
\ No newline at end of file
diff --git a/adev/src/content/guide/directives/attribute-directives.md b/adev/src/content/guide/directives/attribute-directives.md
index 46b91a2d4eeb..8b59a3fdcaa5 100644
--- a/adev/src/content/guide/directives/attribute-directives.md
+++ b/adev/src/content/guide/directives/attribute-directives.md
@@ -1,12 +1,12 @@
-# Attribute directives
+# 속성 지시자
 
-Change the appearance or behavior of DOM elements and Angular components with attribute directives.
+속성 지시자를 사용하여 DOM 요소와 Angular 구성 요소의 모양이나 동작을 변경합니다.
 
-## Building an attribute directive
+## 속성 지시자 만들기
 
-This section walks you through creating a highlight directive that sets the background color of the host element to yellow.
+이 섹션에서는 호스트 요소의 배경 색상을 노란색으로 설정하는 하이라이트 지시자를 생성하는 과정을 안내합니다.
 
-1. To create a directive, use the CLI command [`ng generate directive`](tools/cli/schematics).
+1. 지시자를 만들려면 CLI 명령어 [`ng generate directive`](tools/cli/schematics)를 사용합니다.
 
     <docs-code language="shell">
 
@@ -14,141 +14,141 @@ This section walks you through creating a highlight directive that sets the back
 
     </docs-code>
 
-    The CLI creates `src/app/highlight.directive.ts`, a corresponding test file `src/app/highlight.directive.spec.ts`.
+    CLI는 `src/app/highlight.directive.ts`와 해당하는 테스트 파일 `src/app/highlight.directive.spec.ts`를 생성합니다.
 
     <docs-code header="src/app/highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.0.ts"/>
 
-    The `@Directive()` decorator's configuration property specifies the directive's CSS attribute selector, `[appHighlight]`.
+    `@Directive()` 데코레이터의 구성 속성은 지시자의 CSS 속성 선택기인 `[appHighlight]`를 지정합니다.
 
-1. Import `ElementRef` from `@angular/core`.
-    `ElementRef` grants direct access to the host DOM element through its `nativeElement` property.
+1. `@angular/core`에서 `ElementRef`를 가져옵니다.
+    `ElementRef`는 호스트 DOM 요소에 대한 직접 액세스를 `nativeElement` 속성을 통해 제공합니다.
 
-1. Add `ElementRef` in the directive's `constructor()` to [inject](guide/di) a reference to the host DOM element, the element to which you apply `appHighlight`.
+1. 지시자의 `constructor()`에서 `ElementRef`를 추가하여 `appHighlight`를 적용하는 호스트 DOM 요소에 대한 참조를 [주입](guide/di)합니다.
 
-1. Add logic to the `HighlightDirective` class that sets the background to yellow.
+1. 배경을 노란색으로 설정하는 로직을 `HighlightDirective` 클래스에 추가합니다.
 
     <docs-code header="src/app/highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.1.ts"/>
 
-HELPFUL: Directives *do not* support namespaces.
+도움말: 지시자는 *이름 공간*을 지원하지 않습니다.
 
 <docs-code header="src/app/app.component.avoid.html (unsupported)" path="adev/src/content/examples/attribute-directives/src/app/app.component.avoid.html" visibleRegion="unsupported"/>
 
-## Applying an attribute directive
+## 속성 지시자 적용하기
 
-1. To use the `HighlightDirective`, add a `<p>` element to the HTML template with the directive as an attribute.
+1. `HighlightDirective`를 사용하려면 HTML 템플릿에 지시자를 속성으로 가진 `<p>` 요소를 추가합니다.
 
     <docs-code header="src/app/app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.html" visibleRegion="applied"/>
 
-Angular creates an instance of the `HighlightDirective` class and injects a reference to the `<p>` element into the directive's constructor, which sets the `<p>` element's background style to yellow.
+Angular는 `HighlightDirective` 클래스의 인스턴스를 생성하고 지시자의 생성자에 `<p>` 요소에 대한 참조를 주입하여 `<p>` 요소의 배경 스타일을 노란색으로 설정합니다.
 
-## Handling user events
+## 사용자 이벤트 처리
 
-This section shows you how to detect when a user mouses into or out of the element and to respond by setting or clearing the highlight color.
+이 섹션에서는 사용자가 요소로 마우스를 들어가거나 나갈 때 감지하고 하이라이트 색상을 설정하거나 지우는 방법을 보여줍니다.
 
-1. Import `HostListener` from '@angular/core'.
+1. `@angular/core`에서 `HostListener`를 가져옵니다.
 
     <docs-code header="src/app/highlight.directive.ts (imports)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" visibleRegion="imports"/>
 
-1. Add two event handlers that respond when the mouse enters or leaves, each with the `@HostListener()` decorator.
+1. 마우스가 들어오거나 나갈 때 반응하는 두 개의 이벤트 핸들러를 추가하고 각각에 `@HostListener()` 데코레이터를 추가합니다.
 
     <docs-code header="src/app/highlight.directive.ts (mouse-methods)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" visibleRegion="mouse-methods"/>
 
-Subscribe to events of the DOM element that hosts an attribute directive, the `<p>` in this case, with the `@HostListener()` decorator.
+속성 지시자를 호스팅하는 DOM 요소의 이벤트에 구독합니다. 이 경우 `<p>`에서 `@HostListener()` 데코레이터를 사용합니다.
 
-HELPFUL: The handlers delegate to a helper method, `highlight()`, that sets the color on the host DOM element, `el`.
+도움말: 핸들러는 호스트 DOM 요소 `el`에서 색상을 설정하는 도우미 메서드인 `highlight()`에 위임합니다.
 
-The complete directive is as follows:
+전체 지시자는 다음과 같습니다.
 
 <docs-code header="src/app/highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts"/>
 
-The background color appears when the pointer hovers over the paragraph element and disappears as the pointer moves out.
+배경 색상은 포인터가 단락 요소 위에 있을 때 나타나고 포인터가 나가면 사라집니다.
 
 <img alt="Second Highlight" src="assets/images/guide/attribute-directives/highlight-directive-anim.gif">
 
-## Passing values into an attribute directive
+## 속성 지시자에 값 전달하기
 
-This section walks you through setting the highlight color while applying the `HighlightDirective`.
+이 섹션에서는 `HighlightDirective`를 적용하면서 하이라이트 색상을 설정하는 과정을 안내합니다.
 
-1. In `highlight.directive.ts`, import `Input` from `@angular/core`.
+1. `highlight.directive.ts`에서 `@angular/core`에서 `Input`을 가져옵니다.
 
     <docs-code header="src/app/highlight.directive.ts (imports)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="imports"/>
 
-1. Add an `appHighlight` `@Input()` property.
+1. `appHighlight` `@Input()` 속성을 추가합니다.
 
     <docs-code header="src/app/highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="input"/>
 
-    The `@Input()` decorator adds metadata to the class that makes the directive's `appHighlight` property available for binding.
+    `@Input()` 데코레이터는 클래스에 메타데이터를 추가하여 지시자의 `appHighlight` 속성을 바인딩 가능하게 만듭니다.
 
-1. In `app.component.ts`, add a `color` property to the `AppComponent`.
+1. `app.component.ts`에서 `AppComponent`에 `color` 속성을 추가합니다.
 
     <docs-code header="src/app/app.component.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.ts" visibleRegion="class"/>
 
-1. To simultaneously apply the directive and the color, use property binding with the `appHighlight` directive selector, setting it equal to `color`.
+1. 지시자와 색상을 동시에 적용하려면 `appHighlight` 지시자 선택기를 사용하여 속성 바인딩을 수행하고 `color`와 동일하게 설정합니다.
 
     <docs-code header="src/app/app.component.html (color)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="color"/>
 
-    The `[appHighlight]` attribute binding performs two tasks:
+    `[appHighlight]` 속성 바인딩은 두 가지 작업을 수행합니다:
 
-    * Applies the highlighting directive to the `<p>` element
-    * Sets the directive's highlight color with a property binding
+    * `<p>` 요소에 하이라이팅 지시자를 적용합니다.
+    * 속성 바인딩으로 지시자의 하이라이트 색상을 설정합니다.
 
-### Setting the value with user input
+### 사용자 입력으로 값 설정
 
-This section guides you through adding radio buttons to bind your color choice to the `appHighlight` directive.
+이 섹션에서는 색상 선택을 `appHighlight` 지시자에 바인딩하기 위해 라디오 버튼을 추가하는 방법을 안내합니다.
 
-1. Add markup to `app.component.html` for choosing a color as follows:
+1. 색상을 선택하기 위한 마크업을 `app.component.html`에 추가합니다:
 
     <docs-code header="src/app/app.component.html (v2)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="v2"/>
 
-1. Revise the `AppComponent.color` so that it has no initial value.
+1. `AppComponent.color`를 수정하여 초기값이 없도록 합니다.
 
     <docs-code header="src/app/app.component.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.ts" visibleRegion="class"/>
 
-1. In `highlight.directive.ts`, revise `onMouseEnter` method so that it first tries to highlight with `appHighlight` and falls back to `red` if `appHighlight` is `undefined`.
+1. `highlight.directive.ts`에서 `onMouseEnter` 메서드를 수정하여 먼저 `appHighlight`로 하이라이트를 시도하고 `appHighlight`가 `undefined`인 경우 `red`로 대체합니다.
 
     <docs-code header="src/app/highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="mouse-enter"/>
 
-1. Serve your application to verify that the user can choose the color with the radio buttons.
+1. 애플리케이션을 제공하여 사용자가 라디오 버튼으로 색상을 선택할 수 있는지 확인합니다.
 
     <img alt="Animated gif of the refactored highlight directive changing color according to the radio button the user selects" src="assets/images/guide/attribute-directives/highlight-directive-v2-anim.gif">
 
-## Binding to a second property
+## 두 번째 속성에 바인딩하기
 
-This section guides you through configuring your application so the developer can set the default color.
+이 섹션에서는 개발자가 기본 색상을 설정할 수 있도록 애플리케이션을 구성하는 방법을 안내합니다.
 
-1. Add a second `Input()` property to `HighlightDirective` called `defaultColor`.
+1. `HighlightDirective`에 두 번째 `Input()` 속성인 `defaultColor`를 추가합니다.
 
     <docs-code header="src/app/highlight.directive.ts (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" visibleRegion="defaultColor"/>
 
-1. Revise the directive's `onMouseEnter` so that it first tries to highlight with the `appHighlight`, then with the `defaultColor`, and falls back to `red` if both properties are `undefined`.
+1. 지시자의 `onMouseEnter`를 수정하여 먼저 `appHighlight`로 하이라이트하고, 다음으로 `defaultColor`로 하이라이트하며, 두 속성이 모두 `undefined`인 경우 `red`로 대체합니다.
 
     <docs-code header="src/app/highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" visibleRegion="mouse-enter"/>
 
-1. To bind to the `AppComponent.color` and fall back to "violet" as the default color, add the following HTML.
-    In this case,  the `defaultColor` binding doesn't use square brackets, `[]`, because it is static.
+1. `AppComponent.color`에 바인딩하고 기본 색상을 "violet"으로 설정하려면 다음 HTML을 추가합니다.
+    이 경우 `defaultColor` 바인딩은 정적이므로 대괄호 `[]`를 사용하지 않습니다.
 
     <docs-code header="src/app/app.component.html (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="defaultColor"/>
 
-    As with components, you can add multiple directive property bindings to a host element.
+    구성 요소와 마찬가지로 호스트 요소에 여러 지시자 속성 바인딩을 추가할 수 있습니다.
 
-The default color is red if there is no default color binding.
-When the user chooses a color the selected color becomes the active highlight color.
+기본 색상이 없으면 기본 색상은 빨강입니다.
+사용자가 색상을 선택하면 선택한 색상이 활성 하이라이트 색상이 됩니다.
 
 <img alt="Animated gif of final highlight directive that shows red color with no binding and violet with the default color set. When user selects color, the selection takes precedence." src="assets/images/guide/attribute-directives/highlight-directive-final-anim.gif">
 
-## Deactivating Angular processing with `NgNonBindable`
+## `NgNonBindable`로 Angular 처리 비활성화하기
 
-To prevent expression evaluation in the browser, add `ngNonBindable` to the host element.
-`ngNonBindable` deactivates interpolation, directives, and binding in templates.
+브라우저에서 표현식 평가를 방지하려면 호스트 요소에 `ngNonBindable`을 추가합니다.
+`ngNonBindable`은 템플릿에서 보간, 지시자 및 바인을딩을 비활성화합니다.
 
-In the following example, the expression `{{ 1 + 1 }}` renders just as it does in your code editor, and does not display `2`.
+다음 예제에서 표현식 `{{ 1 + 1 }}`는 코드 편집기와 동일하게 렌더링되며, `2`를 표시하지 않습니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="ngNonBindable"/>
 
-Applying `ngNonBindable` to an element stops binding for that element's child elements.
-However, `ngNonBindable` still lets directives work on the element where you apply `ngNonBindable`.
-In the following example, the `appHighlight` directive is still active but Angular does not evaluate the expression `{{ 1 + 1 }}`.
+요소에 `ngNonBindable`을 적용하면 해당 요소의 자식 요소에 대한 바인딩이 중단됩니다.
+그러나 `ngNonBindable`은 `ngNonBindable`을 적용한 요소에서 지시자가 작동하도록 허용합니다.
+다음 예제에서 `appHighlight` 지시자는 여전히 활성 상태이지만 Angular는 표현식 `{{ 1 + 1 }}`를 평가하지 않습니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="ngNonBindable-with-directive"/>
 
-If you apply `ngNonBindable` to a parent element, Angular disables interpolation and binding of any sort, such as property binding or event binding, for the element's children.
+부모 요소에 `ngNonBindable`을 적용하면 Angular는 해당 요소의 자식에 대한 모든 종류의 보간 및 바인딩, 즉 속성 바인딩이나 이벤트 바인딩을 비활성화합니다.
diff --git a/adev/src/content/guide/directives/directive-composition-api.md b/adev/src/content/guide/directives/directive-composition-api.md
index c898326894d0..514b00e7d3df 100644
--- a/adev/src/content/guide/directives/directive-composition-api.md
+++ b/adev/src/content/guide/directives/directive-composition-api.md
@@ -1,18 +1,14 @@
-# Directive composition API
+# 지시어 구성 API
 
-Angular directives offer a great way to encapsulate reusable behaviors— directives can apply
-attributes, CSS classes, and event listeners to an element.
+Angular 지시어는 재사용 가능한 동작을 캡슐화하는 훌륭한 방법을 제공합니다. 지시어는 요소에 속성, CSS 클래스 및 이벤트 리스너를 적용할 수 있습니다.
 
-The *directive composition API* lets you apply directives to a component's host element from
-*within* the component TypeScript class.
+*지시어 구성 API*를 사용하면 구성 요소 TypeScript 클래스 *내부*에서 구성 요소의 호스트 요소에 지시어를 적용할 수 있습니다.
 
-## Adding directives to a component
+## 구성 요소에 지시어 추가하기
 
-You apply directives to a component by adding a `hostDirectives` property to a component's
-decorator. We call such directives *host directives*.
+구성 요소의 장식자에 `hostDirectives` 속성을 추가하여 구성 요소에 지시어를 적용합니다. 이러한 지시어를 *호스트 지시어*라고 부릅니다.
 
-In this example, we apply the directive `MenuBehavior` to the host element of `AdminMenu`. This
-works similarly to applying the `MenuBehavior` to the `<admin-menu>` element in a template.
+이 예제에서 우리는 지시어 `MenuBehavior`를 `AdminMenu`의 호스트 요소에 적용합니다. 이는 템플릿의 `<admin-menu>` 요소에 `MenuBehavior`를 적용하는 것과 비슷하게 작동합니다.
 
 ```typescript
 @Component({
@@ -23,23 +19,17 @@ works similarly to applying the `MenuBehavior` to the `<admin-menu>` element in
 export class AdminMenu { }
 ```
 
-When the framework renders a component, Angular also creates an instance of each host directive. The
-directives' host bindings apply to the component's host element. By default, host directive inputs
-and outputs are not exposed as part of the component's public API. See
-[Including inputs and outputs](#including-inputs-and-outputs) below for more information.
+프레임워크가 구성 요소를 렌더링할 때 Angular는 각 호스트 지시어의 인스턴스도 생성합니다. 지시어의 호스트 바인딩은 구성 요소의 호스트 요소에 적용됩니다. 기본적으로 호스트 지시어의 입력 및 출력은 구성 요소의 공개 API의 일부로 노출되지 않습니다. 더 많은 정보는 아래의 [입력 및 출력 포함하기](#including-inputs-and-outputs)를 참조하십시오.
 
-**Angular applies host directives statically at compile time.** You cannot dynamically add
-directives at runtime.
+**Angular는 컴파일 시간에 호스트 지시어를 정적으로 적용합니다.** 런타임에 동적으로 지시어를 추가할 수 없습니다.
 
-**Directives used in `hostDirectives` may not specify `standalone: false`.**
+**`hostDirectives`에 사용된 지시어는 `standalone: false`를 지정할 수 없습니다.**
 
-**Angular ignores the `selector` of directives applied in the `hostDirectives` property.**
+**Angular는 `hostDirectives` 속성에 적용된 지시어의 `selector`를 무시합니다.**
 
-## Including inputs and outputs
+## 입력 및 출력 포함하기
 
-When you apply `hostDirectives` to your component, the inputs and outputs from the host directives
-are not included in your component's API by default. You can explicitly include inputs and outputs
-in your component's API by expanding the entry in `hostDirectives`:
+`hostDirectives`를 구성 요소에 적용할 때, 호스트 지시어에서 입력 및 출력은 기본적으로 구성 요소의 API에 포함되지 않습니다. `hostDirectives` 항목을 확장하여 구성 요소의 API에 입력 및 출력을 명시적으로 포함할 수 있습니다:
 
 ```typescript
 @Component({
@@ -54,16 +44,14 @@ in your component's API by expanding the entry in `hostDirectives`:
 export class AdminMenu { }
 ```
 
-By explicitly specifying the inputs and outputs, consumers of the component with `hostDirective` can
-bind them in a template:
+입력 및 출력을 명시적으로 지정함으로써, `hostDirective`를 가진 구성 요소의 소비자는 이를 템플릿에서 바인딩할 수 있습니다:
 
 ```angular-html
 
 <admin-menu menuId="top-menu" (menuClosed)="logMenuClosed()">
 ```
 
-Furthermore, you can alias inputs and outputs from `hostDirective` to customize the API of your
-component:
+또한, 입력 및 출력을 `hostDirective`에서 별칭으로 설정하여 구성 요소의 API를 사용자 정의할 수 있습니다:
 
 ```typescript
 @Component({
@@ -83,18 +71,13 @@ export class AdminMenu { }
 <admin-menu id="top-menu" (closed)="logMenuClosed()">
 ```
 
-## Adding directives to another directive
+## 다른 지시어에 지시어 추가하기
 
-You can also add `hostDirectives` to other directives, in addition to components. This enables the
-transitive aggregation of multiple behaviors.
+구성 요소 외에도 다른 지시어에 `hostDirectives`를 추가할 수 있습니다. 이것은 여러 동작의 전이 집합을 가능하게 합니다.
 
-In the following example, we define two directives, `Menu` and `Tooltip`. We then compose the behavior
-of these two directives in `MenuWithTooltip`. Finally, we apply `MenuWithTooltip`
-to `SpecializedMenuWithTooltip`.
+다음 예제에서는 `Menu`와 `Tooltip`이라는 두 개의 지시어를 정의합니다. 그런 다음 `MenuWithTooltip`에서 이 두 지시어의 동작을 구성합니다. 마지막으로 `MenuWithTooltip`을 `SpecializedMenuWithTooltip`에 적용합니다.
 
-When `SpecializedMenuWithTooltip` is used in a template, it creates instances of all of `Menu`
-, `Tooltip`, and `MenuWithTooltip`. Each of these directives' host bindings apply to the host
-element of `SpecializedMenuWithTooltip`.
+`SpecializedMenuWithTooltip`가 템플릿에서 사용될 때, `Menu`, `Tooltip` 및 `MenuWithTooltip`의 모든 인스턴스를 생성합니다. 이러한 각 지시어의 호스트 바인딩은 `SpecializedMenuWithTooltip`의 호스트 요소에 적용됩니다.
 
 ```typescript
 @Directive({...})
@@ -103,27 +86,26 @@ export class Menu { }
 @Directive({...})
 export class Tooltip { }
 
-// MenuWithTooltip can compose behaviors from multiple other directives
+// MenuWithTooltip은 여러 다른 지시어의 동작을 집합할 수 있습니다.
 @Directive({
   hostDirectives: [Tooltip, Menu],
 })
 export class MenuWithTooltip { }
 
-// CustomWidget can apply the already-composed behaviors from MenuWithTooltip
+// CustomWidget은 MenuWithTooltip에서 이미 구성된 동작을 적용할 수 있습니다.
 @Directive({
   hostDirectives: [MenuWithTooltip],
 })
 export class SpecializedMenuWithTooltip { }
 ```
 
-## Host directive semantics
+## 호스트 지시어 의미론
 
-### Directive execution order
+### 지시어 실행 순서
 
-Host directives go through the same lifecycle as components and directives used directly in a
-template. However, host directives always execute their constructor, lifecycle hooks, and bindings _before_ the component or directive on which they are applied.
+호스트 지시어는 템플릿에서 직접 사용된 구성 요소 및 지시어와 동일한 생명 주기를 거칩니다. 그러나 호스트 지시어는 항상 적용되는 구성 요소나 지시어보다 _먼저_ 생성자, 생명 주기 훅 및 바인딩을 실행합니다.
 
-The following example shows minimal use of a host directive:
+다음 예제는 호스트 지시어를 최소한으로 사용하는 방법을 보여줍니다:
 
 ```typescript
 @Component({
@@ -134,20 +116,18 @@ The following example shows minimal use of a host directive:
 export class AdminMenu { }
 ```
 
-The order of execution here is:
+여기서 실행 순서는 다음과 같습니다:
 
-1. `MenuBehavior` instantiated
-2. `AdminMenu` instantiated
-3. `MenuBehavior` receives inputs (`ngOnInit`)
-4. `AdminMenu` receives inputs (`ngOnInit`)
-5. `MenuBehavior` applies host bindings
-6. `AdminMenu` applies host bindings
+1. `MenuBehavior` 인스턴스화
+2. `AdminMenu` 인스턴스화
+3. `MenuBehavior`가 입력을 받음(`ngOnInit`)
+4. `AdminMenu`가 입력을 받음(`ngOnInit`)
+5. `MenuBehavior`가 호스트 바인딩을 적용함
+6. `AdminMenu`가 호스트 바인딩을 적용함
 
-This order of operations means that components with `hostDirectives` can override any host bindings
-specified by a host directive.
+이 작업 순서는 `hostDirectives`가 있는 구성 요소가 호스트 지시어에 의해 지정된 모든 호스트 바인딩을 재정의 할 수 있음을 의미합니다.
 
-This order of operations extends to nested chains of host directives, as shown in the following
-example.
+이 작업 순서는 다음 예제에서 볼 수 있는 호스트 지시어의 중첩 체인으로 확장됩니다.
 
 ```typescript
 @Directive({...})
@@ -164,26 +144,22 @@ export class CustomTooltip { }
 export class EvenMoreCustomTooltip { }
 ```
 
-In the example above, the order of execution is:
+위의 예제에서 실행 순서는 다음과 같습니다:
 
-1. `Tooltip` instantiated
-2. `CustomTooltip` instantiated
-3. `EvenMoreCustomTooltip` instantiated
-4. `Tooltip` receives inputs (`ngOnInit`)
-5. `CustomTooltip` receives inputs (`ngOnInit`)
-6. `EvenMoreCustomTooltip` receives inputs (`ngOnInit`)
-7. `Tooltip` applies host bindings
-8. `CustomTooltip` applies host bindings
-9. `EvenMoreCustomTooltip` applies host bindings
+1. `Tooltip` 인스턴스화
+2. `CustomTooltip` 인스턴스화
+3. `EvenMoreCustomTooltip` 인스턴스화
+4. `Tooltip`가 입력을 받음(`ngOnInit`)
+5. `CustomTooltip`가 입력을 받음(`ngOnInit`)
+6. `EvenMoreCustomTooltip`가 입력을 받음(`ngOnInit`)
+7. `Tooltip`가 호스트 바인딩을 적용함
+8. `CustomTooltip`가 호스트 바인딩을 적용함
+9. `EvenMoreCustomTooltip`가 호스트 바인딩을 적용함
 
-### Dependency injection
+### 의존성 주입
 
-A component or directive that specifies `hostDirectives` can inject the instances of those host
-directives and vice versa.
+`hostDirectives`를 지정한 구성 요소나 지시어는 해당 호스트 지시어의 인스턴스를 주입할 수 있으며 그 반대도 가능합니다.
 
-When applying host directives to a component, both the component and host directives can define
-providers.
+구성 요소에 호스트 지시어를 적용할 때, 구성 요소와 호스트 지시어 모두 프로바이더를 정의할 수 있습니다.
 
-If a component or directive with `hostDirectives` and those host directives both provide the same
-injection token, the providers defined by class with `hostDirectives` take precedence over providers
-defined by the host directives.
+`hostDirectives`와 해당 호스트 지시어가 동일한 주입 토큰을 제공하는 경우, `hostDirectives`가 정의한 프로바이더가 호스트 지시어가 정의한 프로바이더보다 우선합니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/directives/overview.md b/adev/src/content/guide/directives/overview.md
index 5e59ce2ce6c2..dfab729faf12 100644
--- a/adev/src/content/guide/directives/overview.md
+++ b/adev/src/content/guide/directives/overview.md
@@ -1,348 +1,346 @@
-<docs-decorative-header title="Built-in directives" imgSrc="adev/src/assets/images/directives.svg"> <!-- markdownlint-disable-line -->
-Directives are classes that add additional behavior to elements in your Angular applications.
+<docs-decorative-header title="내장 지시어" imgSrc="adev/src/assets/images/directives.svg"> <!-- markdownlint-disable-line -->
+지시어는 Angular 애플리케이션 내의 요소에 추가적인 동작을 추가하는 클래스입니다.
 </docs-decorative-header>
 
-Use Angular's built-in directives to manage forms, lists, styles, and what users see.
+Angular의 내장 지시어를 사용하여 양식, 목록, 스타일 및 사용자가 보는 내용을 관리하십시오.
 
-The different types of Angular directives are as follows:
+Angular 지시어는 다음과 같은 다양한 유형이 있습니다:
 
-| Directive Types                                          | Details                                                                           |
+| 지시어 유형                                               | 세부 사항                                                                           |
 | :------------------------------------------------------- | :-------------------------------------------------------------------------------- |
-| [Components](guide/components)                           | Used with a template. This type of directive is the most common directive type.   |
-| [Attribute directives](#built-in-attribute-directives)   | Change the appearance or behavior of an element, component, or another directive. |
-| [Structural directives](#built-in-structural-directives) | Change the DOM layout by adding and removing DOM elements.                        |
+| [컴포넌트](guide/components)                             | 템플릿과 함께 사용됩니다. 이 유형의 지시어는 가장 일반적인 지시어 유형입니다.   |
+| [속성 지시어](#built-in-attribute-directives)           | 요소, 컴포넌트 또는 다른 지시어의 모양이나 동작을 변경합니다.                    |
+| [구조 지시어](#built-in-structural-directives)         | DOM 요소를 추가하고 제거하여 DOM 레이아웃을 변경합니다.                         |
 
-This guide covers built-in [attribute directives](#built-in-attribute-directives) and [structural directives](#built-in-structural-directives).
+이 가이드는 내장 [속성 지시어](#built-in-attribute-directives)와 [구조 지시어](#built-in-structural-directives)를 다룹니다.
 
-## Built-in attribute directives
+## 내장 속성 지시어
 
-Attribute directives listen to and modify the behavior of other HTML elements, attributes, properties, and components.
+속성 지시어는 다른 HTML 요소, 속성, 속성과 컴포넌트의 동작을 듣고 수정합니다.
 
-The most common attribute directives are as follows:
+가장 일반적인 속성 지시어는 다음과 같습니다:
 
-| Common directives                                             | Details                                            |
-| :------------------------------------------------------------ | :------------------------------------------------- |
-| [`NgClass`](#adding-and-removing-classes-with-ngclass)        | Adds and removes a set of CSS classes.             |
-| [`NgStyle`](#setting-inline-styles-with-ngstyle)              | Adds and removes a set of HTML styles.             |
-| [`NgModel`](#displaying-and-updating-properties-with-ngmodel) | Adds two-way data binding to an HTML form element. |
+| 일반적인 지시어                                             | 세부 사항                                            |
+| :---------------------------------------------------------- | :------------------------------------------------- |
+| [`NgClass`](#adding-and-removing-classes-with-ngclass)    | CSS 클래스 집합을 추가하고 제거합니다.             |
+| [`NgStyle`](#setting-inline-styles-with-ngstyle)          | HTML 스타일 집합을 추가하고 제거합니다.           |
+| [`NgModel`](#displaying-and-updating-properties-with-ngmodel) | HTML 양식 요소에 양방향 데이터 바인딩을 추가합니다. |
 
-HELPFUL: Built-in directives use only public APIs. They do not have special access to any private APIs that other directives can't access.
+도움이 되는 정보: 내장 지시어는 오직 공개 API만 사용합니다. 다른 지시어가 접근할 수 없는 개인 API에 특별한 접근 권한이 없습니다.
 
-## Adding and removing classes with `NgClass`
+## `NgClass`로 클래스 추가 및 제거
 
-Add or remove multiple CSS classes simultaneously with `ngClass`.
+`ngClass`를 사용하여 여러 CSS 클래스를 동시에 추가하거나 제거합니다.
 
-HELPFUL: To add or remove a _single_ class, use [class binding](guide/templates/class-binding) rather than `NgClass`.
+도움이 되는 정보: 단일 클래스를 추가하거나 제거하려면 `NgClass` 대신 [클래스 바인딩](guide/templates/class-binding)을 사용하십시오.
 
-### Import `NgClass` in the component
+### 컴포넌트에서 `NgClass` 가져오기
 
-To use `NgClass`, add it to the component's `imports` list.
+`NgClass`를 사용하려면, 컴포넌트의 `imports` 목록에 추가하십시오.
 
 <docs-code header="src/app/app.component.ts (NgClass import)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-ng-class"/>
 
-### Using `NgClass` with an expression
+### 표현식과 함께 `NgClass` 사용하기
 
-On the element you'd like to style, add `[ngClass]` and set it equal to an expression.
-In this case, `isSpecial` is a boolean set to `true` in `app.component.ts`.
-Because `isSpecial` is true, `ngClass` applies the class of `special` to the `<div>`.
+스타일을 지정할 요소에 `[ngClass]`를 추가하고 이를 표현식에 설정하십시오.
+이 경우 `isSpecial`은 `app.component.ts`에서 `true`로 설정된 불리언입니다.
+`isSpecial`이 true이므로 `ngClass`는 `<div>`에 `special` 클래스를 적용합니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="special-div"/>
 
-### Using `NgClass` with a method
+### 메서드와 함께 `NgClass` 사용하기
 
-1. To use `NgClass` with a method, add the method to the component class.
-   In the following example, `setCurrentClasses()` sets the property `currentClasses` with an object that adds or removes three classes based on the `true` or `false` state of three other component properties.
+1. 메서드와 함께 `NgClass`를 사용하려면, 컴포넌트 클래스에 메서드를 추가합니다.
+   다음 예제에서 `setCurrentClasses()`는 세 개의 다른 컴포넌트 속성의 `true` 또는 `false` 상태에 따라 클래스를 추가하거나 제거하는 객체로 `currentClasses` 속성을 설정합니다.
 
-   Each key of the object is a CSS class name.
-   If a key is `true`, `ngClass` adds the class.
-   If a key is `false`, `ngClass` removes the class.
+   객체의 각 키는 CSS 클래스 이름입니다.
+   키가 `true`이면 `ngClass`는 클래스를 추가합니다.
+   키가 `false`이면 `ngClass`는 클래스를 제거합니다.
 
    <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="setClasses"/>
 
-1. In the template, add the `ngClass` property binding to `currentClasses` to set the element's classes:
+1. 템플릿에서 `currentClasses`에 `ngClass` 속성 바인딩을 추가하여 요소의 클래스를 설정하십시오:
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgClass-1"/>
 
-For this use case, Angular applies the classes on initialization and in case of changes caused by reassigning the `currentClasses` object.
-The full example calls `setCurrentClasses()` initially with `ngOnInit()` when the user clicks on the `Refresh currentClasses` button.
-These steps are not necessary to implement `ngClass`.
+이 사용 사례에 대해 Angular는 초기화 시 클래스를 적용하고 `currentClasses` 객체의 재할당으로 인한 변경 시에 적용합니다.
+전체 예제는 사용자가 `Refresh currentClasses` 버튼을 클릭할 때 `ngOnInit()`으로 `setCurrentClasses()`를 처음 호출합니다.
+이 단계는 `ngClass`를 구현하는 데 필요하지 않습니다.
 
-## Setting inline styles with `NgStyle`
+## `NgStyle`로 인라인 스타일 설정하기
 
-HELPFUL: To add or remove a _single_ style, use [style bindings](guide/templates/binding#css-class-and-style-property-bindings) rather than `NgStyle`.
+도움이 되는 정보: 단일 스타일을 추가하거나 제거하려면 `NgStyle` 대신 [스타일 바인딩](guide/templates/binding#css-class-and-style-property-bindings)을 사용하십시오.
 
-### Import `NgStyle` in the component
+### 컴포넌트에서 `NgStyle` 가져오기
 
-To use `NgStyle`, add it to the component's `imports` list.
+`NgStyle`을 사용하려면, 컴포넌트의 `imports` 목록에 추가하십시오.
 
 <docs-code header="src/app/app.component.ts (NgStyle import)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-ng-style"/>
 
-Use `NgStyle` to set multiple inline styles simultaneously, based on the state of the component.
+`NgStyle`을 사용하여 컴포넌트의 상태에 따라 여러 인라인 스타일을 동시에 설정하십시오.
 
-1. To use `NgStyle`, add a method to the component class.
+1. `NgStyle`을 사용하려면, 메서드를 컴포넌트 클래스에 추가하십시오.
 
-   In the following example, `setCurrentStyles()` sets the property `currentStyles` with an object that defines three styles, based on the state of three other component properties.
+   다음 예제에서 `setCurrentStyles()`는 세 개의 다른 컴포넌트 속성의 상태에 따라 세 가지 스타일을 정의하는 객체로 `currentStyles` 속성을 설정합니다.
 
    <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="setStyles"/>
 
-1. To set the element's styles, add an `ngStyle` property binding to `currentStyles`.
+1. 요소의 스타일을 설정하려면 `currentStyles`에 `ngStyle` 속성 바인딩을 추가하십시오.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgStyle-2"/>
 
-For this use case, Angular applies the styles upon initialization and in case of changes.
-To do this, the full example calls `setCurrentStyles()` initially with `ngOnInit()` and when the dependent properties change through a button click.
-However, these steps are not necessary to implement `ngStyle` on its own.
+이 사용 사례에 대해 Angular는 초기화 시 및 변경 시 스타일을 적용합니다.
+이렇게 하려면 전체 예제에서 종속 속성이 버튼 클릭을 통해 변경될 때 기본적으로 `setCurrentStyles()`를 `ngOnInit()`으로 초기 호출합니다.
+그러나 이러한 단계는 `ngStyle`을 단독으로 구현하는 데 필요하지 않습니다.
 
-## Displaying and updating properties with `ngModel`
+## `ngModel`로 속성 표시 및 업데이트하기
 
-Use the `NgModel` directive to display a data property and update that property when the user makes changes.
+`NgModel` 지시어를 사용하여 데이터 속성을 표시하고 사용자가 변경할 경우 해당 속성을 업데이트하십시오.
 
-1. Import `FormsModule` and add it to the AppComponent's `imports` list.
+1. `FormsModule`을 가져오고 AppComponent의 `imports` 목록에 추가하십시오.
 
 <docs-code header="src/app/app.component.ts (FormsModule import)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-forms-module" />
 
-1. Add an `[(ngModel)]` binding on an HTML `<form>` element and set it equal to the property, here `name`.
+1. HTML `<form>` 요소에 `[(ngModel)]` 바인딩을 추가하고 이를 `name` 속성과 설정하십시오.
 
    <docs-code header="src/app/app.component.html (NgModel example)" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgModel-1"/>
 
-   This `[(ngModel)]` syntax can only set a data-bound property.
+   이 `[(ngModel)]` 구문은 데이터 바인딩된 속성만 설정할 수 있습니다.
 
-To customize your configuration, write the expanded form, which separates the property and event binding.
-Use [property binding](guide/templates/property-binding) to set the property and [event binding](guide/templates/event-listeners) to respond to changes.
-The following example changes the `<input>` value to uppercase:
+구성을 사용자 지정하려면 속성과 이벤트 바인딩을 분리하는 확장된 형태를 작성하십시오.
+속성을 설정하기 위해 [속성 바인딩](guide/templates/property-binding)을 사용하고 변경에 반응하기 위해 [이벤트 바인딩](guide/templates/event-listeners)을 사용하십시오.
+다음 예제는 `<input>` 값을 대문자로 변경합니다:
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="uppercase"/>
 
-Here are all variations in action, including the uppercase version:
+모든 변형이 작동하는 모습은 다음과 같습니다. 대문자 버전을 포함하여:
 
 <img alt="NgModel variations" src="assets/images/guide/built-in-directives/ng-model-anim.gif">
 
-### `NgModel` and value accessors
+### `NgModel` 및 값 접근자
 
-The `NgModel` directive works for an element supported by a [ControlValueAccessor](api/forms/ControlValueAccessor).
-Angular provides _value accessors_ for all of the basic HTML form elements.
-For more information, see [Forms](guide/forms).
+`NgModel` 지시어는 [ControlValueAccessor](api/forms/ControlValueAccessor)로 지원되는 요소에 작동합니다.
+Angular는 모든 기본 HTML 양식 요소에 대해 _값 접근자_를 제공합니다.
+자세한 내용은 [양식](guide/forms)을 참조하십시오.
 
-To apply `[(ngModel)]` to a non-form built-in element or a third-party custom component, you have to write a value accessor.
-For more information, see the API documentation on [DefaultValueAccessor](api/forms/DefaultValueAccessor).
+`[(ngModel)]`을 비양식 내장 요소 또는 타사 사용자 정의 컴포넌트에 적용하려면 값 접근자를 작성해야 합니다.
+자세한 내용은 [DefaultValueAccessor](api/forms/DefaultValueAccessor)에 대한 API 문서를 참조하십시오.
 
-HELPFUL: When you write an Angular component, you don't need a value accessor or `NgModel` if you name the value and event properties according to Angular's [two-way binding syntax](guide/templates/two-way-binding#how-two-way-binding-works).
+도움이 되는 정보: Angular 컴포넌트를 작성할 때, Angular의 [양방향 바인딩 구문](guide/templates/two-way-binding#how-two-way-binding-works) 에 따라 값과 이벤트 속성을 이름 붙이면 값 접근자 또는 `NgModel`이 필요하지 않습니다.
 
-## Built-in structural directives
+## 내장 구조 지시어
 
-Structural directives are responsible for HTML layout.
-They shape or reshape the DOM's structure, typically by adding, removing, and manipulating the host elements to which they are attached.
+구조 지시어는 HTML 레이아웃을 책임집니다.
+그들은 일반적으로 다루는 요소가 추가되고 제거되며 조작됨에 따라 DOM의 구조를 형성하거나 재형성합니다.
 
-This section introduces the most common built-in structural directives:
+이 섹션에서는 가장 일반적인 내장 구조 지시어를 소개합니다:
 
-| Common built-in structural directives              | Details                                                          |
-| :------------------------------------------------- | :--------------------------------------------------------------- |
-| [`NgIf`](#adding-or-removing-an-element-with-ngif) | Conditionally creates or disposes of subviews from the template. |
-| [`NgFor`](#listing-items-with-ngfor)               | Repeat a node for each item in a list.                           |
-| [`NgSwitch`](#switching-cases-with-ngswitch)       | A set of directives that switch among alternative views.         |
+| 일반적인 내장 구조 지시어                                  | 세부 사항                                                          |
+| :-------------------------------------------------------- | :--------------------------------------------------------------- |
+| [`NgIf`](#adding-or-removing-an-element-with-ngif)       | 조건적으로 템플릿에서 하위 보기를 생성하거나 폐기합니다. |
+| [`NgFor`](#listing-items-with-ngfor)                      | 목록의 각 항목에 대해 노드를 반복합니다.                           |
+| [`NgSwitch`](#switching-cases-with-ngswitch)              | 대체 보기를 전환하는 지시어 세트입니다.                           |
 
-For more information, see [Structural Directives](guide/directives/structural-directives).
+자세한 정보는 [구조 지시어](guide/directives/structural-directives)를 참조하십시오.
 
-## Adding or removing an element with `NgIf`
+## `NgIf`로 요소 추가 또는 제거하기
 
-Add or remove an element by applying an `NgIf` directive to a host element.
+호스트 요소에 `NgIf` 지시어를 적용하여 요소를 추가하거나 제거하십시오.
 
-When `NgIf` is `false`, Angular removes an element and its descendants from the DOM.
-Angular then disposes of their components, which frees up memory and resources.
+`NgIf`가 `false`일 때 Angular는 DOM에서 요소와 그 자손을 제거합니다.
+그런 다음 Angular는 구성 요소를 폐기하여 메모리와 리소스를 해제합니다.
 
-### Import `NgIf` in the component
+### 컴포넌트에서 `NgIf` 가져오기
 
-To use `NgIf`, add it to the component's `imports` list.
+`NgIf`를 사용하려면, 컴포넌트의 `imports` 목록에 추가하십시오.
 
 <docs-code header="src/app/app.component.ts (NgIf import)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-ng-if"/>
 
-### Using `NgIf`
+### `NgIf` 사용하기
 
-To add or remove an element, bind `*ngIf` to a condition expression such as `isActive` in the following example.
+요소를 추가하거나 제거하려면 조건 표현식에 `*ngIf`를 바인딩합니다. 예를 들어 `isActive`:
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgIf-1"/>
 
-When the `isActive` expression returns a truthy value, `NgIf` adds the `ItemDetailComponent` to the DOM.
-When the expression is falsy, `NgIf` removes the `ItemDetailComponent` from the DOM and disposes of the component and all of its subcomponents.
+`isActive` 표현식이 true값을 반환하면 `NgIf`는 DOM에 `ItemDetailComponent`를 추가합니다.
+표현식이 false일 경우 `NgIf`는 DOM에서 `ItemDetailComponent`를 제거하고 구성 요소 및 모든 하위 구성 요소를 폐기합니다.
 
-For more information on `NgIf` and `NgIfElse`, see the [NgIf API documentation](api/common/NgIf).
+`NgIf` 및 `NgIfElse`에 대한 자세한 내용은 [NgIf API 문서](api/common/NgIf)를 참조하십시오.
 
-### Guarding against `null`
+### `null` 보호
 
-By default, `NgIf` prevents display of an element bound to a null value.
+기본적으로 `NgIf`는 null 값에 바인딩된 요소의 표시를 방지합니다.
 
-To use `NgIf` to guard a `<div>`, add `*ngIf="yourProperty"` to the `<div>`.
-In the following example, the `currentCustomer` name appears because there is a `currentCustomer`.
+`<div>`를 보호하기 위해 `*ngIf="yourProperty"`를 추가하십시오.
+다음 예제에서 `currentCustomer` 이름이 나타나는 이유는 `currentCustomer`가 존재하기 때문입니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgIf-2"/>
 
-However, if the property is `null`, Angular does not display the `<div>`.
-In this example, Angular does not display the `nullCustomer` because it is `null`.
+그러나 속성이 `null`인 경우 Angular는 `<div>`를 표시하지 않습니다.
+이 예제에서는 Angular가 `nullCustomer`를 표시하지 않습니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgIf-2b"/>
 
-## Listing items with `NgFor`
+## `NgFor`로 항목 나열하기
 
-Use the `NgFor` directive to present a list of items.
+`NgFor` 지시어를 사용하여 항목 목록을 표시합니다.
 
-### Import `NgFor` in the component
+### 컴포넌트에서 `NgFor` 가져오기
 
-To use `NgFor`, add it to the component's `imports` list.
+`NgFor`를 사용하려면, 컴포넌트의 `imports` 목록에 추가하십시오.
 
 <docs-code header="src/app/app.component.ts (NgFor import)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-ng-for"/>
 
-### Using `NgFor`
+### `NgFor` 사용하기
 
-To use `NgFor`, you have to:
+`NgFor`를 사용하려면 다음을 수행해야 합니다:
 
-1. Define a block of HTML that determines how Angular renders a single item.
-1. To list your items, assign the shorthand `let item of items` to `*ngFor`.
+1. Angular가 단일 항목을 렌더링하는 방식을 결정하는 HTML 블록을 정의합니다.
+1. 항목을 나열하려면, `*ngFor`에 약식으로 `let item of items`를 할당하십시오.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgFor-1"/>
 
-The string `"let item of items"` instructs Angular to do the following:
+문자열 `"let item of items"`는 Angular에게 다음을 지시합니다:
 
-- Store each item in the `items` array in the local `item` looping variable
-- Make each item available to the templated HTML for each iteration
-- Translate `"let item of items"` into an `<ng-template>` around the host element
-- Repeat the `<ng-template>` for each `item` in the list
+- `items` 배열의 각 항목을 로컬 `item` 반복 변수에 저장합니다.
+- 각 반복을 위해 템플릿 HTML에서 각 항목을 사용할 수 있게 합니다.
+- `"let item of items"`를 호스트 요소 주위에 `<ng-template>`로 변환합니다.
+- 목록의 각 `item`에 대해 `<ng-template>`를 반복합니다.
 
-For more information see the [Structural directive shorthand](guide/directives/structural-directives#structural-directive-shorthand) section of [Structural directives](guide/directives/structural-directives).
+자세한 정보는 [구조 지시어 약식](guide/directives/structural-directives#structural-directive-shorthand) 및 [구조 지시어](guide/directives/structural-directives) 섹션을 참조하십시오.
 
-### Repeating a component view
+### 컴포넌트 뷰 반복하기
 
-To repeat a component element, apply `*ngFor` to the selector.
-In the following example, the selector is `<app-item-detail>`.
+컴포넌트 요소를 반복하기 위해 선택자에 `*ngFor`를 적용하십시오.
+다음 예제에서는 선택자가 `<app-item-detail>`입니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgFor-2"/>
 
-Reference a template input variable, such as `item`, in the following locations:
+템플릿 입력 변수인 `item`을 다음 위치에 참조하십시오:
 
-- Within the `ngFor` host element
-- Within the host element descendants to access the item's properties
+- `ngFor` 호스트 요소 내
+- 호스트 요소의 자손 내에서 항목의 속성에 접근하기 위해
 
-The following example references `item` first in an interpolation and then passes in a binding to the `item` property of the `<app-item-detail>` component.
+다음 예제에서는 `item`을 먼저 보간으로 참조한 후, `<app-item-detail>` 컴포넌트의 `item` 속성에 바인딩합니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgFor-1-2"/>
 
-For more information about template input variables, see [Structural directive shorthand](guide/directives/structural-directives#structural-directive-shorthand).
+템플릿 입력 변수에 대한 자세한 내용은 [구조 지시어 약식](guide/directives/structural-directives#structural-directive-shorthand)을 참조하십시오.
 
-### Getting the `index` of `*ngFor`
+### `*ngFor`의 `index` 가져오기
 
-Get the `index` of `*ngFor` in a template input variable and use it in the template.
+템플릿 입력 변수에서 `*ngFor`의 `index`를 가져와 템플릿에서 사용하십시오.
 
-In the `*ngFor`, add a semicolon and `let i=index` to the shorthand.
-The following example gets the `index` in a variable named `i` and displays it with the item name.
+`*ngFor`에서 약식으로 세미콜론과 `let i=index`를 추가하십시오.
+다음 예제에서는 `index`를 `i`라는 이름의 변수에 가져와 항목 이름과 함께 표시합니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgFor-3"/>
 
-The index property of the `NgFor` directive context returns the zero-based index of the item in each iteration.
+`NgFor` 지시어 컨텍스트의 index 속성은 각 반복에서 항목의 0 기반 인덱스를 반환합니다.
 
-Angular translates this instruction into an `<ng-template>` around the host element,
-then uses this template repeatedly to create a new set of elements and bindings for each `item`
-in the list.
-For more information about shorthand, see the [Structural Directives](guide/directives/structural-directives#structural-directive-shorthand) guide.
+Angular는 이 지시를 호스트 요소 주위에 `<ng-template>`로 변환한 후,
+이 템플릿을 사용하여 목록의 각 `item`에 새 요소 및 바인딩 세트를 생성하는 데 반복하여 사용합니다.
+약식에 대한 자세한 내용은 [구조 지시어](guide/directives/structural-directives#structural-directive-shorthand) 가이드를 참조하십시오.
 
-## Repeating elements when a condition is true
+## 특정 조건이 true일 때 요소 반복하기
 
-To repeat a block of HTML when a particular condition is true, put the `*ngIf` on a container element that wraps an `*ngFor` element.
+특정 조건이 true일 때 HTML 블록을 반복하려면, `*ngIf`를 `*ngFor` 요소를 래핑하는 컨테이너 요소에 두십시오.
 
-For more information see [one structural directive per element](guide/directives/structural-directives#one-structural-directive-per-element).
+자세한 정보는 [각 요소당 하나의 구조 지시어](guide/directives/structural-directives#one-structural-directive-per-element)를 참조하십시오.
 
-### Tracking items with `*ngFor` `trackBy`
+### `*ngFor`의 `trackBy`로 항목 추적하기
 
-Reduce the number of calls your application makes to the server by tracking changes to an item list.
-With the `*ngFor` `trackBy` property, Angular can change and re-render only those items that have changed, rather than reloading the entire list of items.
+항목 목록의 변경 사항을 추적하여 애플리케이션이 서버에 호출하는 수를 줄이십시오.
+`*ngFor`의 `trackBy` 속성을 사용하면 Angular는 변경된 항목만 변경하고 다시 렌더링할 수 있습니다. 전체 항목 목록을 리로드하는 대신.
 
-1. Add a method to the component that returns the value `NgFor` should track.
-In this example, the value to track is the item's `id`.
-If the browser has already rendered `id`, Angular keeps track of it and doesn't re-query the server for the same `id`.
+1. `NgFor`에서 추적해야 할 값을 반환하는 메서드를 컴포넌트에 추가하십시오.
+이 예제에서는 추적하려는 값이 항목의 `id`입니다.
+브라우저가 `id`를 이미 렌더링한 경우, Angular는 이를 추적하여 동일한 `id`에 대해 서버를 다시 쿼리하지 않습니다.
 
 <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="trackByItems"/>
 
-1. In the shorthand expression, set `trackBy` to the `trackByItems()` method.
+1. 약식 표현식에서 `trackBy`를 `trackByItems()` 메서드로 설정하십시오.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="trackBy"/>
 
-**Change ids** creates new items with new `item.id`s.
-In the following illustration of the `trackBy` effect, **Reset items** creates new items with the same `item.id`s.
+**ID 변경**은 새로운 `item.id`를 가진 새 항목을 생성합니다.
+다음 `trackBy` 효과 예시에서는 **Reset items**가 동일한 `item.id`를 가진 새 항목을 생성합니다.
 
-- With no `trackBy`, both buttons trigger complete DOM element replacement.
-- With `trackBy`, only changing the `id` triggers element replacement.
+- `trackBy` 없이 두 버튼 모두 완전한 DOM 요소 교체를 트리거합니다.
+- `trackBy`를 사용하면 `id` 변경만 요소 교체를 트리거합니다.
 
 <img alt="Animation of trackBy" src="assets/images/guide/built-in-directives/ngfor-trackby.gif">
 
-## Hosting a directive without a DOM element
+## DOM 요소 없이 지시어 호스팅하기
 
-The Angular `<ng-container>` is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.
+Angular의 `<ng-container>`는 스타일이나 레이아웃에 방해하지 않는 그룹화 요소입니다. Angular가 DOM에 이를 반영하지 않기 때문에 가능합니다.
 
-Use `<ng-container>` when there's no single element to host the directive.
+단일 요소가 지시어를 호스트하지 않는 경우 `<ng-container>`를 사용하십시오.
 
-Here's a conditional paragraph using `<ng-container>`.
+여기 `<ng-container>`를 사용하는 조건부 단락이 있습니다.
 
 <docs-code header="src/app/app.component.html (ngif-ngcontainer)" path="adev/src/content/examples/structural-directives/src/app/app.component.html" visibleRegion="ngif-ngcontainer"/>
 
 <img alt="ngcontainer paragraph with proper style" src="assets/images/guide/structural-directives/good-paragraph.png">
 
-1. Import the `ngModel` directive from `FormsModule`.
+1. `FormsModule`에서 `ngModel` 지시어를 가져옵니다.
 
-1. Add `FormsModule` to the imports section of the relevant Angular module.
+1. 관련 Angular 모듈의 imports 섹션에 `FormsModule`을 추가합니다.
 
-1. To conditionally exclude an `<option>`, wrap the `<option>` in an `<ng-container>`.
+1. 조건부로 `<option>`을 제외하려면, `<option>`을 `<ng-container>`로 감싸십시오.
 
    <docs-code header="src/app/app.component.html (select-ngcontainer)" path="adev/src/content/examples/structural-directives/src/app/app.component.html" visibleRegion="select-ngcontainer"/>
 
    <img alt="ngcontainer options work properly" src="assets/images/guide/structural-directives/select-ngcontainer-anim.gif">
 
-## Switching cases with `NgSwitch`
+## `NgSwitch`로 케이스 전환하기
 
-Like the JavaScript `switch` statement, `NgSwitch` displays one element from among several possible elements, based on a switch condition.
-Angular puts only the selected element into the DOM.
+JavaScript `switch` 문과 유사하게, `NgSwitch`는 스위치 조건에 따라 여러 가능한 요소 중 하나를 표시합니다.
+Angular는 선택된 요소만 DOM에 넣습니다.
 
 <!--todo: API Flagged -->
 
-`NgSwitch` is a set of three directives:
+`NgSwitch`는 세 개의 지시어 집합입니다:
 
-| `NgSwitch` directives | Details                                                                                                                                                                |
-| :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `NgSwitch`            | An attribute directive that changes the behavior of its companion directives.                                                                                          |
-| `NgSwitchCase`        | Structural directive that adds its element to the DOM when its bound value equals the switch value and removes its bound value when it doesn't equal the switch value. |
-| `NgSwitchDefault`     | Structural directive that adds its element to the DOM when there is no selected `NgSwitchCase`.                                                                        |
+| `NgSwitch` 지시어   | 세부 사항                                                                                                                                                                |
+| :------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `NgSwitch`          | 동반 지시어의 동작을 변경하는 속성 지시어입니다.                                                                                                                      |
+| `NgSwitchCase`      | 바인딩된 값이 스위치 값과 같을 때 요소를 DOM에 추가하고 그렇지 않을 때는 바인딩된 값을 제거하는 구조 지시어입니다.                                                   |
+| `NgSwitchDefault`   | 선택된 `NgSwitchCase`가 없을 때 요소를 DOM에 추가하는 구조 지시어입니다.                                                                                                                 |
 
-To use the directives, add the `NgSwitch`, `NgSwitchCase` and `NgSwitchDefault` to the component's `imports` list.
+지시어를 사용하려면 컴포넌트의 `imports` 목록에 `NgSwitch`, `NgSwitchCase`, `NgSwitchDefault`를 추가하십시오.
 
 <docs-code header="src/app/app.component.ts (NgSwitch imports)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-ng-switch"/>
 
-### Using `NgSwitch`
+### `NgSwitch` 사용하기
 
-1. On an element, such as a `<div>`, add `[ngSwitch]` bound to an expression that returns the switch value, such as `feature`.
-   Though the `feature` value in this example is a string, the switch value can be of any type.
+1. `<div>`와 같은 요소에 스위치 값을 반환하는 표현식에 `[ngSwitch]`를 바인딩합니다. 이 예제의 `feature` 값은 문자열이지만 스위치 값은 어떤 유형도 가능합니다.
 
-1. Bind to `*ngSwitchCase` and `*ngSwitchDefault` on the elements for the cases.
+1. 케이스의 요소에 `*ngSwitchCase` 및 `*ngSwitchDefault`에 바인딩합니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgSwitch"/>
 
-1. In the parent component, define `currentItem`, to use it in the `[ngSwitch]` expression.
+1. 상위 컴포넌트에서 `currentItem`을 정의하여 `[ngSwitch]` 표현식에서 사용할 수 있도록 합니다.
 
 <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="item"/>
 
-1. In each child component, add an `item` [input property](guide/components/inputs) which is bound to the `currentItem` of the parent component.
-   The following two snippets show the parent component and one of the child components.
-   The other child components are identical to `StoutItemComponent`.
+1. 각 하위 컴포넌트에서 상위 컴포넌트의 `currentItem`에 바인딩된 `item` [입력 속성](guide/components/inputs)을 추가합니다.
+   다음 두 코드는 상위 컴포넌트와 하위 컴포넌트 중 하나의 코드를 보여줍니다.
+   다른 하위 컴포넌트는 `StoutItemComponent`와 동일합니다.
 
-   <docs-code header="In each child component, here StoutItemComponent" path="adev/src/content/examples/built-in-directives/src/app/item-switch.component.ts" visibleRegion="input"/>
+   <docs-code header="각 하위 컴포넌트에 사용, 여기 StoutItemComponent" path="adev/src/content/examples/built-in-directives/src/app/item-switch.component.ts" visibleRegion="input"/>
 
    <img alt="Animation of NgSwitch" src="assets/images/guide/built-in-directives/ngswitch.gif">
 
-Switch directives also work with built-in HTML elements and web components.
-For example, you could replace the `<app-best-item>` switch case with a `<div>` as follows.
+스위치 지시어는 내장 HTML 요소 및 웹 컴포넌트와 함께 작동합니다.
+예를 들어, `<app-best-item>` 스위치 케이스를 `<div>`로 교체할 수 있습니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgSwitch-div"/>
 
-## What's next
+## 다음 단계
 
 <docs-pill-row>
-  <docs-pill href="guide/directives/attribute-directives" title="Attribute Directives"/>
-  <docs-pill href="guide/directives/structural-directives" title="Structural Directives"/>
-  <docs-pill href="guide/directives/directive-composition-api" title="Directive composition API"/>
+  <docs-pill href="guide/directives/attribute-directives" title="속성 지시어"/>
+  <docs-pill href="guide/directives/structural-directives" title="구조 지시어"/>
+  <docs-pill href="guide/directives/directive-composition-api" title="지시어 조합 API"/>
 </docs-pill-row>
diff --git a/adev/src/content/guide/directives/structural-directives.md b/adev/src/content/guide/directives/structural-directives.md
index 4b25af1e49ca..b69505936643 100644
--- a/adev/src/content/guide/directives/structural-directives.md
+++ b/adev/src/content/guide/directives/structural-directives.md
@@ -1,79 +1,79 @@
-# Structural directives
+# 구조 지시자
 
-Structural directives are directives applied to an `<ng-template>` element that conditionally or repeatedly render the content of that `<ng-template>`.
+구조 지시자는 `<ng-template>` 요소에 적용되어 해당 `<ng-template>`의 내용을 조건부로 또는 반복적으로 렌더링하는 지시자입니다.
 
-## Example use case
+## 예제 사용 사례
 
-In this guide you'll build a structural directive which fetches data from a given data source and renders its template when that data is available. This directive is called `SelectDirective`, after the SQL keyword `SELECT`, and match it with an attribute selector `[select]`.
+이 가이드에서는 주어진 데이터 소스에서 데이터를 가져오고 해당 데이터가 사용할 수 있을 때 템플릿을 렌더링하는 구조 지시자를 만들 것입니다. 이 지시자는 SQL 키워드 `SELECT`에 따라 이름 지어진 `SelectDirective`이며, 특성 선택자 `[select]`와 일치합니다.
 
-`SelectDirective` will have an input naming the data source to be used, which you will call `selectFrom`. The `select` prefix for this input is important for the [shorthand syntax](#structural-directive-shorthand). The directive will instantiate its `<ng-template>` with a template context providing the selected data.
+`SelectDirective`는 사용될 데이터 소스를 명명하는 입력값을 가지며, 이를 `selectFrom`이라 부릅니다. 이 입력의 `select` 접두사는 [축약 구문](#structural-directive-shorthand)에 중요합니다. 이 지시자는 선택된 데이터를 제공하는 템플릿 컨텍스트로 `<ng-template>`을 인스턴스화합니다.
 
-The following is an example of using this directive directly on an `<ng-template>` would look like:
+다음은 `<ng-template>`에서 이 지시자를 직접 사용하는 예제입니다:
 
 ```angular-html
 <ng-template select let-data [selectFrom]="source">
-  <p>The data is: {{ data }}</p>
+  <p>데이터는: {{ data }}</p>
 </ng-template>
 ```
 
-The structural directive can wait for the data to become available and then render its `<ng-template>`.
+구조 지시자는 데이터가 사용할 수 있게 될 때까지 기다렸다가 `<ng-template>`을 렌더링할 수 있습니다.
 
-HELPFUL: Note that Angular's `<ng-template>` element defines a template that doesn't render anything by default, if you just wrap elements in an `<ng-template>` without applying a structural directive those elements will not be rendered.
+도움말: Angular의 `<ng-template>` 요소는 기본적으로 아무 것도 렌더링하지 않는 템플릿을 정의합니다. 구조 지시자를 적용하지 않고 요소를 `<ng-template>`으로 단순히 감싸면 해당 요소는 렌더링되지 않습니다.
 
-For more information, see the [ng-template API](api/core/ng-template) documentation.
+자세한 내용은 [ng-template API](api/core/ng-template) 문서를 참조하십시오.
 
-## Structural directive shorthand
+## 구조 지시자 축약 구문
 
-Angular supports a shorthand syntax for structural directives which avoids the need to explicitly author an `<ng-template>` element.
+Angular는 구조 지시자에 대해 명시적으로 `<ng-template>` 요소를 작성할 필요가 없는 축약 구문을 지원합니다.
 
-Structural directives can be applied directly on an element by prefixing the directive attribute selector with an asterisk (`*`), such as `*select`. Angular transforms the asterisk in front of a structural directive into an `<ng-template>` that hosts the directive and surrounds the element and its descendants.
+구조 지시자는 지시자 속성 선택자 앞에 별표(`*`)를 접두사로 붙여 요소에 직접 적용할 수 있습니다. 예를 들어 `*select`와 같이 사용합니다. Angular는 구조 지시자 앞의 별표를 지시자를 호스팅하고 요소 및 그 자손을 둘러싸는 `<ng-template>`으로 변환합니다.
 
-You can use this with `SelectDirective` as follows:
+`SelectDirective`와 함께 다음과 같이 사용할 수 있습니다:
 
 ```angular-html
-<p *select="let data from source">The data is: {{data}}</p>
+<p *select="let data from source">데이터는: {{data}}</p>
 ```
 
-This example shows the flexibility of structural directive shorthand syntax, which is sometimes called _microsyntax_.
+이 예제는 때때로 _마이크로구문_이라고 불리는 구조 지시자 축약 구문의 유연성을 보여줍니다.
 
-When used in this way, only the structural directive and its bindings are applied to the `<ng-template>`. Any other attributes or bindings on the `<p>` tag are left alone. For example, these two forms are equivalent:
+이와 같이 사용될 때 구조 지시자와 그 바인딩만이 `<ng-template>`에 적용됩니다. `<p>` 태그의 다른 속성이나 바인딩은 그대로 남아 있습니다. 예를 들어, 다음 두 형태는 동등합니다:
 
 ```angular-html
-<!-- Shorthand syntax: -->
-<p class="data-view" *select="let data from source">The data is: {{data}}</p>
+<!-- 축약 구문: -->
+<p class="data-view" *select="let data from source">데이터는: {{data}}</p>
 
-<!-- Long-form syntax: -->
+<!-- 장황한 구문: -->
 <ng-template select let-data [selectFrom]="source">
-  <p class="data-view">The data is: {{data}}</p>
+  <p class="data-view">데이터는: {{data}}</p>
 </ng-template>
 ```
 
-Shorthand syntax is expanded through a set of conventions. A more thorough [grammar](#structural-directive-syntax-reference) is defined below, but in the above example, this transformation can be explained as follows:
+축약 구문은 일련의 관례를 통해 확장됩니다. 더 철저한 [문법](#structural-directive-syntax-reference)은 아래에 정의되어 있지만, 위의 예에서는 이 변환을 다음과 같이 설명할 수 있습니다:
 
-The first part of the `*select` expression is `let data`, which declares a template variable `data`. Since no assignment follows, the template variable is bound to the template context property `$implicit`.
+`*select` 표현의 첫 번째 부분은 `let data`로, 템플릿 변수를 선언합니다. 할당이 뒤따르지 않으므로 템플릿 변수는 템플릿 컨텍스트 속성 `$implicit`에 바인딩됩니다.
 
-The second piece of syntax is a key-expression pair, `from source`. `from` is a binding key and `source` is a regular template expression. Binding keys are mapped to properties by transforming them to PascalCase and prepending the structural directive selector. The `from` key is mapped to `selectFrom`, which is then bound to the expression `source`. This is why many structural directives will have inputs that are all prefixed with the structural directive's selector.
+두 번째 구문 조각은 키-표현 쌍인 `from source`입니다. `from`은 바인딩 키이며 `source`는 일반 템플릿 표현입니다. 바인딩 키는 PascalCase로 변환되고 구조 지시자 선택자에 접두사가 붙여서 속성에 매핑됩니다. `from` 키는 `selectFrom`에 매핑되며, 이후 표현식 `source`에 바인딩됩니다. 이는 많은 구조 지시자들이 모두 구조 지시자의 선택자로 접두사가 붙은 입력값을 가지는 이유입니다.
 
-## One structural directive per element
+## 요소당 하나의 구조 지시자
 
-You can only apply one structural directive per element when using the shorthand syntax. This is because there is only one `<ng-template>` element onto which that directive gets unwrapped. Multiple directives would require multiple nested `<ng-template>`, and it's unclear which directive should be first. `<ng-container>` can be used when to create wrapper layers when multiple structural directives need to be applied around the same physical DOM element or component, which allows the user to define the nested structure.
+축약 구문을 사용할 때 각 요소에 하나의 구조 지시자만 적용할 수 있습니다. 이는 해당 지시자가 펼쳐질 `<ng-template>` 요소가 하나만 존재하기 때문입니다. 여러 지시자가 필요한 경우 여러 개의 중첩 `<ng-template>`이 필요하며, 어떤 지시자가 먼저 와야 하는지 명확하지 않습니다. `<ng-container>`는 같은 물리적 DOM 요소 또는 구성 요소 주위에 여러 구조 지시자를 적용해야 할 때 래퍼 레이어를 생성하는 데 사용될 수 있으며, 사용자가 중첩 구조를 정의할 수 있게 해줍니다.
 
-## Creating a structural directive
+## 구조 지시자 만들기
 
-This section guides you through creating the `SelectDirective`.
+이 섹션에서는 `SelectDirective`를 만드는 방법을 안내합니다.
 
 <docs-workflow>
-<docs-step title="Generate the directive">
-Using the Angular CLI, run the following command, where `select` is the name of the directive:
+<docs-step title="지시자 생성">
+Angular CLI를 사용하여 다음 명령을 실행합니다. 여기서 `select`는 지시자 이름입니다:
 
 ```shell
 ng generate directive select
 ```
 
-Angular creates the directive class and specifies the CSS selector, `[select]`, that identifies the directive in a template.
+Angular는 지시자 클래스를 생성하고 템플릿에서 지시자를 식별하는 CSS 선택자 `[select]`를 지정합니다.
 </docs-step>
-<docs-step title="Make the directive structural">
-Import `TemplateRef`, and `ViewContainerRef`. Inject `TemplateRef` and `ViewContainerRef` in the directive constructor as private variables.
+<docs-step title="지시자 구조형 만들기">
+`TemplateRef`와 `ViewContainerRef`를 가져옵니다. 지시자 생성자에 `TemplateRef`와 `ViewContainerRef`를 개인 변수로 주입합니다.
 
 ```ts
 import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
@@ -88,8 +88,8 @@ export class SelectDirective {
 ```
 
 </docs-step>
-<docs-step title="Add the 'selectFrom' input">
-Add a `selectFrom` `@Input()` property.
+<docs-step title="‘selectFrom’ 입력 추가">
+`selectFrom` `@Input()` 속성을 추가합니다.
 
 ```ts
 export class SelectDirective {
@@ -100,8 +100,8 @@ export class SelectDirective {
 ```
 
 </docs-step>
-<docs-step title="Add the business logic">
-With `SelectDirective` now scaffolded as a structural directive with its input, you can now add the logic to fetch the data and render the template with it:
+<docs-step title="비즈니스 논리 추가">
+이제 구조 지시자로 틀을 갖춘 `SelectDirective`에 데이터를 가져오고 템플릿을 렌더링하는 논리를 추가할 수 있습니다:
 
 ```ts
 export class SelectDirective {
@@ -110,8 +110,7 @@ export class SelectDirective {
   async ngOnInit() {
     const data = await this.selectFrom.load();
     this.viewContainerRef.createEmbeddedView(this.templateRef, {
-      // Create the embedded view with a context object that contains
-      // the data via the key `$implicit`.
+      // 데이터 키 `$implicit`로 구성된 컨텍스트 개체로 내장된 뷰를 생성합니다.
       $implicit: data,
     });
   }
@@ -121,11 +120,11 @@ export class SelectDirective {
 </docs-step>
 </docs-workflow>
 
-That's it - `SelectDirective` is up and running. A follow-up step might be to [add template type-checking support](#typing-the-directives-context).
+그것으로 `SelectDirective`가 실행됩니다. 후속 단계는 [템플릿 유형 검사 지원 추가](#typing-the-directives-context)일 수 있습니다.
 
-## Structural directive syntax reference
+## 구조 지시자 구문 참조
 
-When you write your own structural directives, use the following syntax:
+자체 구조 지시자를 작성할 때 다음 구문을 사용하십시오:
 
 <docs-code hideCopy language="typescript">
 
@@ -133,7 +132,7 @@ When you write your own structural directives, use the following syntax:
 
 </docs-code>
 
-The following patterns describe each portion of the structural directive grammar:
+다음 패턴은 구조 지시자 문법의 각 부분을 설명합니다:
 
 ```ts
 as = :export "as" :local ";"?
@@ -141,77 +140,72 @@ keyExp = :key ":"? :expression ("as" :local)? ";"?
 let = "let" :local "=" :export ";"?
 ```
 
-| Keyword      | Details                                            |
+| 키워드      | 세부정보                                            |
 | :----------- | :------------------------------------------------- |
-| `prefix`     | HTML attribute key                                 |
-| `key`        | HTML attribute key                                 |
-| `local`      | Local variable name used in the template           |
-| `export`     | Value exported by the directive under a given name |
-| `expression` | Standard Angular expression                        |
+| `prefix`     | HTML 속성 키                                      |
+| `key`        | HTML 속성 키                                      |
+| `local`      | 템플릿에서 사용되는 로컬 변수 이름               |
+| `export`     | 주어진 이름으로 지시자에 의해 내보낸 값          |
+| `expression` | 표준 Angular 표현                                 |
 
-### How Angular translates shorthand
+### Angular가 축약형을 변환하는 방법
 
-Angular translates structural directive shorthand into the normal binding syntax as follows:
+Angular는 구조 지시자 축약형을 정상 바인딩 구문으로 변환합니다:
 
-| Shorthand | Translation |
+| 축약형 | 변환 |
 |:--- |:--- |
-| `prefix` and naked `expression` | `[prefix]="expression"` |
-| `keyExp` | `[prefixKey]="expression"` (The `prefix` is added to the `key`) |
+| `prefix` 및 나체 `expression` | `[prefix]="expression"` |
+| `keyExp` | `[prefixKey]="expression"` (여기서 `prefix`는 `key`에 추가됨) |
 | `let local` | `let-local="export"` |
 
-### Shorthand examples
+### 축약형 예제
 
-The following table provides shorthand examples:
+다음 표는 축약형 예제를 제공합니다:
 
-| Shorthand | How Angular interprets the syntax |
+| 축약형 | Angular가 구문을 해석하는 방법 |
 |:--- |:--- |
 | `*ngFor="let item of [1,2,3]"` | `<ng-template ngFor let-item [ngForOf]="[1, 2, 3]">` |
 | `*ngFor="let item of [1,2,3] as items; trackBy: myTrack; index as i"` | `<ng-template ngFor let-item [ngForOf]="[1,2,3]" let-items="ngForOf" [ngForTrackBy]="myTrack" let-i="index">` |
 | `*ngIf="exp"`| `<ng-template [ngIf]="exp">` |
 | `*ngIf="exp as value"` | `<ng-template [ngIf]="exp" let-value="ngIf">` |
 
-## Improving template type checking for custom directives
+## 맞춤 지시자의 템플릿 유형 검사 개선하기
 
-You can improve template type checking for custom directives by adding template guards to your directive definition.
-These guards help the Angular template type checker find mistakes in the template at compile time, which can avoid runtime errors.
-Two different types of guards are possible:
+맞춤 지시자의 템플릿 유형 검사를 개선하려면 지시자 정의에 템플릿 가드를 추가할 수 있습니다. 이러한 가드는 Angular 템플릿 유형 검사기가 컴파일 타임에 템플릿의 오류를 찾도록 도와주며, 이는 런타임 오류를 피할 수 있습니다. 두 가지 유형의 가드가 가능합니다:
 
-* `ngTemplateGuard_(input)` lets you control how an input expression should be narrowed based on the type of a specific input.
-* `ngTemplateContextGuard` is used to determine the type of the context object for the template, based on the type of the directive itself.
+* `ngTemplateGuard_(input)`를 사용하면 특정 입력 유형에 따라 입력 표현식을 좁히는 방법을 제어할 수 있습니다.
+* `ngTemplateContextGuard`는 템플릿의 컨텍스트 객체 유형을 지시자 자체 유형에 따라 결정하는 데 사용됩니다.
 
-This section provides examples of both kinds of guards.
-For more information, see [Template type checking](tools/cli/template-typecheck "Template type-checking guide").
+이 섹션에서는 두 가지 유형의 가드 예제를 제공합니다. 자세한 내용은 [템플릿 유형 검사](tools/cli/template-typecheck "템플릿 유형 검사 가이드")를 참조하십시오.
 
-### Type narrowing with template guards
+### 템플릿 가드를 사용한 유형 좁히기
 
-A structural directive in a template controls whether that template is rendered at run time. Some structural directives want to perform type narrowing based on the type of input expression.
+템플릿의 구조 지시자는 해당 템플릿이 런타임에서 렌더링되는지 여부를 제어합니다. 일부 구조 지시자는 입력 표현식의 유형에 따라 유형 좁히기를 수행하고자 합니다.
 
-There are two narrowings which are possible with input guards:
+입력 가드를 사용하여 아래 두 가지 유형의 좁히기가 가능합니다:
 
-* Narrowing the input expression based on a TypeScript type assertion function.
-* Narrowing the input expression based on its truthiness.
+* TypeScript 유형 단언 기능을 기반으로 입력 표현식을 좁히기.
+* 진리성을 기반으로 입력 표현식을 좁히기.
 
-To narrow the input expression by defining a type assertion function:
+타입 단언 기능을 정의하여 입력 표현식을 좁히려면:
 
 ```ts
-// This directive only renders its template if the actor is a user.
-// You want to assert that within the template, the type of the `actor`
-// expression is narrowed to `User`.
+// 이 지시자는 배우가 사용자일 경우에만 템플릿을 렌더링합니다.
+// 템플릿 내에서 `actor` 표현식의 유형이 `User`로 좁혀지도록 단언하고자 합니다.
 @Directive(...)
 class ActorIsUser {
   @Input() actor: User|Robot;
 
   static ngTemplateGuard_actor(dir: ActorIsUser, expr: User|Robot): expr is User {
-    // The return statement is unnecessary in practice, but included to
-    // prevent TypeScript errors.
+    // 반환문은 실제로 필요하지 않지만 TypeScript 오류를 피하기 위해 포함되어 있습니다.
     return true;
   }
 }
 ```
 
-Type-checking will behave within the template as if the `ngTemplateGuard_actor` has been asserted on the expression bound to the input.
+유형 검사는 템플릿 내에서 입력에 바인딩된 표현식에 `ngTemplateGuard_actor`가 단언된 것처럼 행동합니다.
 
-Some directives only render their templates when an input is truthy. It's not possible to capture the full semantics of truthiness in a type assertion function, so instead a literal type of `'binding'` can be used to signal to the template type-checker that the binding expression itself should be used as the guard:
+일부 지시자는 입력이 진리성(true)일 때만 템플릿을 렌더링합니다. 진리성의 전체 의미를 타입 단언 기능으로 포착할 수는 없으므로, 대신 `binding`이라는 리터럴 유형을 사용하여 템플릿 유형 검사기에 바인딩 표현식 자체가 가드로 사용되도록 신호를 전달할 수 있습니다:
 
 ```ts
 @Directive(...)
@@ -222,31 +216,28 @@ class CustomIf {
 }
 ```
 
-The template type-checker will behave as if the expression bound to `condition` was asserted to be truthy within the template.
+템플릿 유형 검사기는 조건에 바인딩된 표현식이 템플릿 내에서 진리성으로 단언되었다고 가정하여 동작합니다.
 
-### Typing the directive's context
+### 지시자의 컨텍스트 유형 지정
 
-If your structural directive provides a context to the instantiated template, you can properly type it inside the template by providing a static `ngTemplateContextGuard` type assertion function. This function can use the type of the directive to derive the type of the context, which is useful when the type of the directive is generic.
+구조 지시자가 인스턴스화된 템플릿에 컨텍스트를 제공하는 경우, 템플릿 내에서 이를 적절히 타입 지정할 수 있습니다. 이를 위해 정적 `ngTemplateContextGuard` 유형 단언 기능을 제공할 수 있습니다. 이 함수는 지시자의 유형을 사용하여 컨텍스트의 유형을 유도할 수 있으며, 지시자의 유형이 일반적일 때 유용합니다.
 
-For the `SelectDirective` described above, you can implement an `ngTemplateContextGuard` to correctly specify the data type, even if the data source is generic.
+위에서 설명한 `SelectDirective`의 경우, 데이터 유형을 올바르게 지정하기 위해 `ngTemplateContextGuard`를 구현할 수 있습니다. 데이터 소스가 일반적인 경우에도 가능합니다.
 
 ```ts
-// Declare an interface for the template context:
+// 템플릿 컨텍스트에 대한 인터페이스를 선언합니다:
 export interface SelectTemplateContext<T> {
   $implicit: T;
 }
 
 @Directive(...)
 export class SelectDirective<T> {
-  // The directive's generic type `T` will be inferred from the `DataSource` type
-  // passed to the input.
+  // 지시자의 일반 유형 `T`는 입력으로 전달된 `DataSource` 유형에서 유추됩니다.
   @Input({required: true}) selectFrom!: DataSource<T>;
 
-  // Narrow the type of the context using the generic type of the directive.
+  // 지시자의 일반 유형을 사용하여 컨텍스트 유형을 좁힙니다.
   static ngTemplateContextGuard<T>(dir: SelectDirective<T>, ctx: any): ctx is SelectTemplateContext<T> {
-    // As before the guard body is not used at runtime, and included only to avoid
-    // TypeScript errors.
+    // 이전과 마찬가지로 가드 본체는 런타임에서 사용되지 않으며, TypeScript 오류를 방지하기 위해 포함되어 있습니다.
     return true;
   }
-}
-```
+}
\ No newline at end of file
diff --git a/adev/src/content/guide/elements.md b/adev/src/content/guide/elements.md
index 849c93981ad6..ba206fdec52c 100644
--- a/adev/src/content/guide/elements.md
+++ b/adev/src/content/guide/elements.md
@@ -1,22 +1,22 @@
-# Angular elements overview
+# Angular 요소 개요
 
-_Angular elements_ are Angular components packaged as _custom elements_ \(also called Web Components\), a web standard for defining new HTML elements in a framework-agnostic way.
+_Angular 요소_는 _커스텀 요소_ (웹 컴포넌트라고도 함)로 패키징된 Angular 컴포넌트로, 프레임워크에 구애받지 않는 방식으로 새로운 HTML 요소를 정의하기 위한 웹 표준입니다.
 
-[Custom elements](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements) are a Web Platform feature available on all browsers supported by Angular.
-A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code.
-The browser maintains a `CustomElementRegistry` of defined custom elements, which maps an instantiable JavaScript class to an HTML tag.
+[커스텀 요소](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements)는 Angular에서 지원하는 모든 브라우저에서 사용할 수 있는 웹 플랫폼 기능입니다.
+커스텀 요소는 JavaScript 코드로 생성되고 제어되는 콘텐츠를 정의하는 태그를 허용하여 HTML을 확장합니다.
+브라우저는 정의된 커스텀 요소의 `CustomElementRegistry`를 유지하며, 이는 인스턴스화 가능한 JavaScript 클래스를 HTML 태그에 매핑합니다.
 
-The `@angular/elements` package exports a `createCustomElement()` API that provides a bridge from Angular's component interface and change detection functionality to the built-in DOM API.
+`@angular/elements` 패키지는 Angular의 컴포넌트 인터페이스와 변경 감지 기능에서 내장 DOM API로의 브리지를 제공하는 `createCustomElement()` API를 내보냅니다.
 
-Transforming a component to a custom element makes all the required Angular infrastructure available to the browser.
-Creating a custom element is simple and straightforward, and automatically connects your component-defined view with change detection and data binding, mapping Angular functionality to the corresponding built-in HTML equivalents.
+컴포넌트를 커스텀 요소로 변환하면 브라우저에서 필요한 Angular 인프라가 모두 사용 가능해집니다.
+커스텀 요소를 만드는 것은 간단하고 직관적이며, 자동으로 컴포넌트 정의 뷰를 변경 감지 및 데이터 바인딩과 연결하여 Angular 기능을 해당 내장 HTML 동등물에 매핑합니다.
 
-## Using custom elements
+## 커스텀 요소 사용하기
 
-Custom elements bootstrap themselves - they start when they are added to the DOM, and are destroyed when removed from the DOM.
-Once a custom element is added to the DOM for any page, it looks and behaves like any other HTML element, and does not require any special knowledge of Angular terms or usage conventions.
+커스텀 요소는 스스로 부트스트랩됩니다 - DOM에 추가되면 시작하고, DOM에서 제거되면 파괴됩니다.
+커스텀 요소가 어떤 페이지의 DOM에 추가되면, 다른 HTML 요소처럼 보이고 작동하며, Angular 용어 또는 사용 관례에 대한 특별한 지식을 필요로 하지 않습니다.
 
-To add the `@angular/elements` package to your workspace, run the following command:
+`@angular/elements` 패키지를 작업 공간에 추가하려면 다음 명령을 실행합니다:
 
 <docs-code language="shell">
 
@@ -24,10 +24,10 @@ npm install @angular/elements --save
 
 </docs-code>
 
-### How it works
+### 작동 방식
 
-The `createCustomElement()` function converts a component into a class that can be registered with the browser as a custom element.
-After you register your configured class with the browser's custom-element registry, use the new element just like a built-in HTML element in content that you add directly into the DOM:
+`createCustomElement()` 함수는 컴포넌트를 브라우저에 커스텀 요소로 등록할 수 있는 클래스으로 변환합니다.
+구성된 클래스를 브라우저의 커스텀 요소 레지스트리에 등록한 후, DOM에 직접 추가한 콘텐츠에서 내장 HTML 요소처럼 새 요소를 사용하세요:
 
 <docs-code language="html">
 
@@ -35,58 +35,57 @@ After you register your configured class with the browser's custom-element regis
 
 </docs-code>
 
-When your custom element is placed on a page, the browser creates an instance of the registered class and adds it to the DOM.
-The content is provided by the component's template, which uses Angular template syntax, and is rendered using the component and DOM data.
-Input properties in the component correspond to input attributes for the element.
+커스텀 요소가 페이지에 배치되면, 브라우저는 등록된 클래스의 인스턴스를 생성하고 DOM에 추가합니다.
+콘텐츠는 Angular 템플릿 구문을 사용하는 컴포넌트의 템플릿에 의해 제공되며, 컴포넌트와 DOM 데이터로 렌더링됩니다.
+컴포넌트의 입력 속성은 요소의 입력 속성과 대응됩니다.
 
-## Transforming components to custom elements
+## 컴포넌트를 커스텀 요소로 변환하기
 
-Angular provides the `createCustomElement()` function for converting an Angular component, together with its dependencies, to a custom element.
+Angular는 Angular 컴포넌트를 해당 의존성과 함께 커스텀 요소로 변환하기 위해 `createCustomElement()` 함수를 제공합니다.
 
-The conversion process implements the `NgElementConstructor` interface, and creates a
-constructor class that is configured to produce a self-bootstrapping instance of your component.
+변환 프로세스는 `NgElementConstructor` 인터페이스를 구현하고, 컴포넌트의 자가 부트스트랩 인스턴스를 생성하도록 구성된 생성자 클래스를 만듭니다.
 
-Use the browser's native [`customElements.define()`](https://developer.mozilla.org/docs/Web/API/CustomElementRegistry/define) function to register the configured constructor and its associated custom-element tag with the browser's [`CustomElementRegistry`](https://developer.mozilla.org/docs/Web/API/CustomElementRegistry).
-When the browser encounters the tag for the registered element, it uses the constructor to create a custom-element instance.
+브라우저의 기본 [`customElements.define()`](https://developer.mozilla.org/docs/Web/API/CustomElementRegistry/define) 함수를 사용하여 구성된 생성자와 해당 커스텀 요소 태그를 브라우저의 [`CustomElementRegistry`](https://developer.mozilla.org/docs/Web/API/CustomElementRegistry)에 등록합니다.
+브라우저가 등록된 요소의 태그를 인식하면, 생성자를 사용하여 커스텀 요소 인스턴스를 생성합니다.
 
-IMPORTANT: Avoid using the component's selector as the custom element tag name.
-This can lead to unexpected behavior, due to Angular creating two component instances for a single DOM element:
-One regular Angular component and a second one using the custom element.
+중요: 컴포넌트의 선택기를 커스텀 요소 태그 이름으로 사용하는 것을 피하세요.
+이로 인해 Angular가 단일 DOM 요소에 대해 두 개의 컴포넌트 인스턴스를 생성하는 예기치 않은 동작이 발생할 수 있습니다:
+하나는 일반 Angular 컴포넌트이고, 또 하나는 커스텀 요소를 사용하는 것입니다.
 
-### Mapping
+### 매핑
 
-A custom element _hosts_ an Angular component, providing a bridge between the data and logic defined in the component and standard DOM APIs.
-Component properties and logic maps directly into HTML attributes and the browser's event system.
+커스텀 요소는 Angular 컴포넌트를 _호스팅_하며, 컴포넌트에 정의된 데이터와 로직 및 표준 DOM API 사이의 브리지를 제공합니다.
+컴포넌트의 속성과 로직은 HTML 속성과 브라우저의 이벤트 시스템으로 직접 매핑됩니다.
 
-* The creation API parses the component looking for input properties, and defines corresponding attributes for the custom element.
-  It transforms the property names to make them compatible with custom elements, which do not recognize case distinctions.
-  The resulting attribute names use dash-separated lowercase.
-  For example, for a component with `@Input('myInputProp') inputProp`, the corresponding custom element defines an attribute `my-input-prop`.
+* 생성 API는 입력 속성을 찾기 위해 컴포넌트를 분석하고, 커스텀 요소에 대해 대응하는 속성을 정의합니다.
+  속성 이름을 변환하여 대소문자 구분을 인식하지 않는 커스텀 요소와 호환되도록 합니다.
+  결과적으로 속성 이름은 하이픈으로 구분된 소문자로 사용됩니다.
+  예를 들어 `@Input('myInputProp') inputProp`인 컴포넌트의 경우, 대응하는 커스텀 요소는 `my-input-prop` 속성을 정의합니다.
 
-* Component outputs are dispatched as HTML [Custom Events](https://developer.mozilla.org/docs/Web/API/CustomEvent), with the name of the custom event matching the output name.
-    For example, for a component with `@Output() valueChanged = new EventEmitter()`, the corresponding custom element dispatches events with the name "valueChanged", and the emitted data is stored on the event's `detail` property.
-    If you provide an alias, that value is used; for example, `@Output('myClick') clicks = new EventEmitter<string>();` results in dispatch events with the name "myClick".
+* 컴포넌트 출력은 HTML [커스텀 이벤트](https://developer.mozilla.org/docs/Web/API/CustomEvent)로 전송되며, 커스텀 이벤트의 이름은 출력 이름과 일치합니다.
+    예를 들어 `@Output() valueChanged = new EventEmitter()`인 컴포넌트의 경우, 대응하는 커스텀 요소는 "valueChanged"라는 이름으로 이벤트를 전송하며, 방출된 데이터는 이벤트의 `detail` 속성에 저장됩니다.
+    별칭을 제공하면 해당 값이 사용됩니다; 예를 들어 `@Output('myClick') clicks = new EventEmitter<string>();`는 "myClick"이라는 이름의 이벤트를 전송합니다.
 
-For more information, see Web Component documentation for [Creating custom events](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events#Creating_custom_events).
+자세한 내용은 [커스텀 이벤트 만들기](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events#Creating_custom_events)에서 확인하세요.
 
-## Example: A Popup Service
+## 예제: 팝업 서비스
 
-Previously, when you wanted to add a component to an application at runtime, you had to define a _dynamic component_, and then you would have to load it, attach it to an element in the DOM, and wire up all of the dependencies, change detection, and event handling.
+이전에 런타임에서 애플리케이션에 컴포넌트를 추가하려면 _동적 컴포넌트_를 정의하고, 이를 로드하고, DOM의 요소에 연결하고, 모든 의존성, 변경 감지 및 이벤트 처리를 설정해야 했습니다.
 
-Using an Angular custom element makes the process simpler and more transparent, by providing all the infrastructure and framework automatically —all you have to do is define the kind of event handling you want.
-\(You do still have to exclude the component from compilation, if you are not going to use it in your application.\)
+Angular 커스텀 요소를 사용하면 모든 인프라와 프레임워크를 자동으로 제공하여 프로세스를 더 간단하고 투명하게 만들 수 있습니다 — 당신이 해야 할 일은 원하는 이벤트 처리를 정의하는 것뿐입니다.
+\(애플리케이션에서 사용하지 않을 경우 컴포넌트를 컴파일에서 제외해야 한다는 점은 여전히 유의해야 합니다.\)
 
-The following Popup Service example application defines a component that you can either load dynamically or convert to a custom element.
+다음 팝업 서비스 예제 애플리케이션은 동적으로 로드하거나 커스텀 요소로 변환할 수 있는 컴포넌트를 정의합니다.
 
-| Files                | Details                                                                                                                                                                                                                      |
+| 파일                  | 상세 설명                                                                                                                                                                                                                     |
 | :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `popup.component.ts` | Defines a simple pop-up element that displays an input message, with some animation and styling.                                                                                                                             |
-| `popup.service.ts`   | Creates an injectable service that provides two different ways to invoke the `PopupComponent`; as a dynamic component, or as a custom element. Notice how much more setup is required for the dynamic-loading method.        |  |
-| `app.component.ts`   | Defines the application's root component, which uses the `PopupService` to add the pop-up to the DOM at run time. When the application runs, the root component's constructor converts `PopupComponent` to a custom element. |
+| `popup.component.ts` | 입력 메시지를 표시하는 간단한 팝업 요소를 정의하며, 일부 애니메이션 및 스타일링이 적용됩니다.                                                                                                                                      |
+| `popup.service.ts`   | `PopupComponent`를 동적 컴포넌트 또는 커스텀 요소로 호출하는 두 가지 다른 방법을 제공하는 주입 가능한 서비스를 생성합니다. 동적 로딩 방법에 대해 얼마나 많은 설정이 필요한지 주목하세요.                        |  |
+| `app.component.ts`   | `PopupService`를 사용하여 런타임에 DOM에 팝업을 추가하는 애플리케이션의 루트 컴포넌트를 정의합니다. 애플리케이션이 실행되면 루트 컴포넌트의 생성자가 `PopupComponent`를 커스텀 요소로 변환합니다. |
 
-For comparison, the demo shows both methods.
-One button adds the popup using the dynamic-loading method, and the other uses the custom element.
-The result is the same, but the preparation is different.
+비교를 위해 데모에서는 두 가지 방법을 모두 보여줍니다.
+한 버튼은 동적 로딩 방법을 사용하여 팝업을 추가하고, 다른 버튼은 커스텀 요소를 사용합니다.
+결과는 같지만 준비 과정이 다릅니다.
 
 <docs-code-multifile>
     <docs-code header="popup.component.ts" path="adev/src/content/examples/elements/src/app/popup.component.ts"/>
@@ -94,20 +93,20 @@ The result is the same, but the preparation is different.
     <docs-code header="app.component.ts" path="adev/src/content/examples/elements/src/app/app.component.ts"/>
 </docs-code-multifile>
 
-## Typings for custom elements
+## 커스텀 요소에 대한 타이핑
 
-Generic DOM APIs, such as `document.createElement()` or `document.querySelector()`, return an element type that is appropriate for the specified arguments.
-For example, calling `document.createElement('a')` returns an `HTMLAnchorElement`, which TypeScript knows has an `href` property.
-Similarly, `document.createElement('div')` returns an `HTMLDivElement`, which TypeScript knows has no `href` property.
+`document.createElement()` 또는 `document.querySelector()`와 같은 일반 DOM API는 지정된 인수에 적합한 요소 유형을 반환합니다.
+예를 들어, `document.createElement('a')`를 호출하면 TypeScript가 `href` 속성을 가진 `HTMLAnchorElement`를 반환합니다.
+유사하게, `document.createElement('div')`는 `href` 속성이 없는 `HTMLDivElement`를 반환합니다.
 
-When called with unknown elements, such as a custom element name \(`popup-element` in our example\), the methods return a generic type, such as `HTMLElement`, because TypeScript can't infer the correct type of the returned element.
+알 수 없는 요소로 호출할 때, 예를 들어 커스텀 요소 이름 (`popup-element` 예제에서)으로 호출할 때, 메서드는 `HTMLElement`와 같은 일반 유형을 반환합니다. TypeScript가 반환된 요소의 올바른 유형을 추론할 수 없기 때문입니다.
 
-Custom elements created with Angular extend `NgElement` \(which in turn extends `HTMLElement`\).
-Additionally, these custom elements will have a property for each input of the corresponding component.
-For example, our `popup-element` has a `message` property of type `string`.
+Angular로 생성된 커스텀 요소는 `NgElement`를 확장합니다 (이는 또 `HTMLElement`를 확장합니다).
+또한, 이러한 커스텀 요소는 해당 컴포넌트의 각 입력에 대한 속성을 가집니다.
+예를 들어, `popup-element`에는 `string` 유형의 `message` 속성이 있습니다.
 
-There are a few options if you want to get correct types for your custom elements.
-Assume you create a `my-dialog` custom element based on the following component:
+커스텀 요소에 대한 올바른 유형을 얻으려면 몇 가지 옵션이 있습니다.
+다음 컴포넌트를 기반으로 하는 `my-dialog` 커스텀 요소를 만든다고 가정합니다:
 
 <docs-code language="typescript">
 
@@ -118,22 +117,22 @@ class MyDialog {
 
 </docs-code>
 
-The most straightforward way to get accurate typings is to cast the return value of the relevant DOM methods to the correct type.
-For that, use the `NgElement` and `WithProperties` types \(both exported from `@angular/elements`\):
+정확한 타이핑을 얻는 가장 간단한 방법은 관련 DOM 메서드의 반환 값을 올바른 타입으로 캐스팅하는 것입니다.
+그렇기 위해서는 `NgElement` 및 `WithProperties` 유형을 사용하세요 \(둘 다 `@angular/elements`에서 내보냄\):
 
 <docs-code language="typescript">
 
 const aDialog = document.createElement('my-dialog') as NgElement & WithProperties<{content: string}>;
 aDialog.content = 'Hello, world!';
-aDialog.content = 123;  // <-- ERROR: TypeScript knows this should be a string.
-aDialog.body = 'News';  // <-- ERROR: TypeScript knows there is no `body` property on `aDialog`.
+aDialog.content = 123;  // <-- 오류: TypeScript는 이것이 문자열이어야 한다고 알고 있습니다.
+aDialog.body = 'News';  // <-- 오류: TypeScript는 `aDialog`에 `body` 속성이 없다는 것을 알고 있습니다.
 
 </docs-code>
 
-This is a good way to quickly get TypeScript features, such as type checking and autocomplete support, for your custom element.
-But it can get cumbersome if you need it in several places, because you have to cast the return type on every occurrence.
+이것은 커스텀 요소에 대해 유형 검증 및 자동 완성 지원과 같은 TypeScript 기능을 빠르게 얻는 좋은 방법입니다.
+하지만 여러 곳에서 필요할 경우 매번 반환 유형을 캐스팅해야 하므로 번거로워질 수 있습니다.
 
-An alternative way, that only requires defining each custom element's type once, is augmenting the `HTMLElementTagNameMap`, which TypeScript uses to infer the type of a returned element based on its tag name \(for DOM methods such as `document.createElement()`, `document.querySelector()`, etc.\):
+한 번만 각 커스텀 요소의 유형을 정의해야 하는 대안적인 방법은 TypeScript가 태그 이름을 기반으로 반환된 요소의 유형을 추론하는 데 사용하는 `HTMLElementTagNameMap`을 확장하는 것입니다\(DOM 메서드에서 `document.createElement()`, `document.querySelector()`, 등\):
 
 <docs-code language="typescript">
 
@@ -147,20 +146,20 @@ declare global {
 
 </docs-code>
 
-Now, TypeScript can infer the correct type the same way it does for built-in elements:
+이제 TypeScript는 내장 요소에 대해 수행하는 것처럼 동일한 방식으로 올바른 유형을 추론할 수 있습니다:
 
 <docs-code language="typescript">
 
-document.createElement('div')               //--> HTMLDivElement (built-in element)
-document.querySelector('foo')               //--> Element        (unknown element)
-document.createElement('my-dialog')         //--> NgElement & WithProperties<{content: string}> (custom element)
-document.querySelector('my-other-element')  //--> NgElement & WithProperties<{foo: 'bar'}>      (custom element)
+document.createElement('div')               //--> HTMLDivElement (내장 요소)
+document.querySelector('foo')               //--> Element        (알 수 없는 요소)
+document.createElement('my-dialog')         //--> NgElement & WithProperties<{content: string}> (커스텀 요소)
+document.querySelector('my-other-element')  //--> NgElement & WithProperties<{foo: 'bar'}>      (커스텀 요소)
 
 </docs-code>
 
-## Limitations
+## 제한 사항
 
-Care should be taken when destroying and then re-attaching custom elements created with `@angular/elements` due to issues with the [disconnect()](https://github.com/angular/angular/issues/38778) callback. Cases where you may run into this issue are:
+`@angular/elements`로 생성된 커스텀 요소를 파괴한 후 다시 부착할 때 [disconnect()](https://github.com/angular/angular/issues/38778) 콜백 문제 때문에 주의해야 합니다. 이 문제에 직면할 수 있는 경우는 다음과 같습니다.
 
-- Rendering a component in an `ng-if` or `ng-repeat` in `AngularJs`
-- Manually detaching and re-attaching an element to the DOM
+- `AngularJs`의 `ng-if` 또는 `ng-repeat`에서 컴포넌트를 렌더링하는 경우
+- DOM에 요소를 수동으로 분리하고 다시 부착하는 경우
\ No newline at end of file
diff --git a/adev/src/content/guide/forms/dynamic-forms.md b/adev/src/content/guide/forms/dynamic-forms.md
index 60d0de0af362..e5cfc81298b2 100644
--- a/adev/src/content/guide/forms/dynamic-forms.md
+++ b/adev/src/content/guide/forms/dynamic-forms.md
@@ -1,143 +1,142 @@
-# Building dynamic forms
+# 동적 양식 구축
 
-Many forms, such as questionnaires, can be very similar to one another in format and intent.
-To make it faster and easier to generate different versions of such a form, you can create a _dynamic form template_ based on metadata that describes the business object model.
-Then, use the template to generate new forms automatically, according to changes in the data model.
+설문지와 같은 많은 양식은 형식과 의도가 매우 유사할 수 있습니다.
+이러한 양식의 다양한 버전을 생성하는 데 더 빠르고 쉽게 만들기 위해 비즈니스 개체 모델을 설명하는 메타데이터를 기반으로 하는 _동적 양식 템플릿_을 생성할 수 있습니다.
+그런 다음, 데이터 모델의 변경 사항에 따라 새 양식을 자동으로 생성하기 위해 템플릿을 사용합니다.
 
-The technique is particularly useful when you have a type of form whose content must change frequently to meet rapidly changing business and regulatory requirements.
-A typical use-case is a questionnaire.
-You might need to get input from users in different contexts.
-The format and style of the forms a user sees should remain constant, while the actual questions you need to ask vary with the context.
+이 기술은 내용이 자주 변경되어야 하는 양식 유형이 있을 때 특히 유용합니다. 
+일반적인 사용 사례는 설문지입니다.
+사용자로부터 다양한 맥락에서 입력을 받아야 할 수 있습니다.
+사용자가 보는 양식의 형식과 스타일은 일정하게 유지되어야 하지만, 실제로 질문해야 하는 내용은 맥락에 따라 달라집니다.
 
-In this tutorial you will build a dynamic form that presents a basic questionnaire.
-You build an online application for heroes seeking employment.
-The agency is constantly tinkering with the application process, but by using the dynamic form
-you can create the new forms on the fly without changing the application code.
+이번 튜토리얼에서는 기본 설문지를 제공하는 동적 양식을 구축합니다.
+취업을 원하는 영웅들에 대한 온라인 응용 프로그램을 만듭니다.
+이 기관은 계속해서 신청 프로세스를 수정하고 있지만, 동적 양식을 사용함으로써 애플리케이션 코드를 변경하지 않고도 즉석에서 새 양식을 생성할 수 있습니다.
 
-The tutorial walks you through the following steps.
+튜토리얼은 다음 단계를 안내합니다.
 
-1. Enable reactive forms for a project.
-1. Establish a data model to represent form controls.
-1. Populate the model with sample data.
-1. Develop a component to create form controls dynamically.
+1. 프로젝트에 대한 반응형 양식 활성화.
+1. 양식 컨트롤을 나타내기 위한 데이터 모델 설정.
+1. 모델에 샘플 데이터로 채우기.
+1. 양식 컨트롤을 동적으로 생성하기 위한 컴포넌트 개발.
 
-The form you create uses input validation and styling to improve the user experience.
-It has a Submit button that is only enabled when all user input is valid, and flags invalid input with color coding and error messages.
+당신이 생성한 양식은 사용자 경험을 개선하기 위해 입력 유효성 검사 및 스타일링을 사용합니다.
+모든 사용자 입력이 유효할 때만 활성화되는 제출 버튼이 있으며, 색상 코드 및 오류 메시지로 잘못된 입력을 표시합니다.
 
-The basic version can evolve to support a richer variety of questions, more graceful rendering, and superior user experience.
+기본 버전은 더 다양한 질문을 지원하고, 더 우아하게 렌더링하며, 우수한 사용자 경험을 제공하기 위해 발전할 수 있습니다.
 
-## Enable reactive forms for your project
+## 프로젝트에 대한 반응형 양식 활성화
 
-Dynamic forms are based on reactive forms.
+동적 양식은 반응형 양리를 기반으로 합니다.
 
-To give the application access reactive forms directives, import `ReactiveFormsModule` from the `@angular/forms` library into the necessary components.
+응용 프로그램이 반응형 양식 지시문에 접근할 수 있도록 필수 구성 요소에 `@angular/forms` 라이브러리에서 `ReactiveFormsModule`을 가져옵니다.
 
-The following code from the example shows the setup in the root module.
+예제에서 다음 코드는 루트 모듈 설정을 보여줍니다.
 
 <docs-code-multifile>
     <docs-code header="dynamic-form.component.ts" path="adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.ts"/>
     <docs-code header="dynamic-form-question.component.ts" path="adev/src/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts"/>
 </docs-code-multifile>
 
-## Create a form object model
+## 양식 객체 모델 만들기
 
-A dynamic form requires an object model that can describe all scenarios needed by the form functionality.
-The example hero-application form is a set of questions — that is, each control in the form must ask a question and accept an answer.
+동적 양식은 양식 기능에 필요한 모든 시나리오를 설명할 수 있는 객체 모델이 필요합니다.
+예제 영웅 신청 양식은 질문의 집합으로 구성되며 — 즉, 양식의 각 컨트롤은 질문을 하고 답변을 받아야 합니다.
 
-The data model for this type of form must represent a question.
-The example includes the `DynamicFormQuestionComponent`, which defines a question as the fundamental object in the model.
+이 유형의 양식에 대한 데이터 모델은 질문을 나타내야 합니다.
+예제에는 모델의 기본 객체로 질문을 정의하는 `DynamicFormQuestionComponent`가 포함되어 있습니다.
 
-The following `QuestionBase` is a base class for a set of controls that can represent the question and its answer in the form.
+다음 `QuestionBase`는 질문과 그 답변을 양식에 나타낼 수 있는 컨트롤 집합을 위한 기본 클래스입니다.
 
 <docs-code header="src/app/question-base.ts" path="adev/src/content/examples/dynamic-form/src/app/question-base.ts"/>
 
-### Define control classes
+### 컨트롤 클래스 정의
 
-From this base, the example derives two new classes, `TextboxQuestion` and `DropdownQuestion`, that represent different control types.
-When you create the form template in the next step, you instantiate these specific question types in order to render the appropriate controls dynamically.
+이 기본 클래스에서 예제는 `TextboxQuestion` 및 `DropdownQuestion`의 두 개의 새로운 클래스를 파생시켜 서로 다른 컨트롤 유형을 나타냅니다.
+다음 단계에서 양식 템플릿을 만들 때 이러한 특정 질문 유형을 인스턴스화하여 적절한 컨트롤을 동적으로 렌더링합니다.
 
-The `TextboxQuestion` control type is represented in a form template using an `<input>` element. It presents a question and lets users enter input. The `type` attribute of the element is defined based on the `type` field specified in the `options` argument (for example `text`, `email`, `url`).
+`TextboxQuestion` 컨트롤 유형은 `<input>` 요소를 사용하여 양식 템플릿에 나타냅니다. 질문을 제시하고 사용자가 입력할 수 있도록 합니다. 요소의 `type` 속성은 `options` 인수에 지정된 `type` 필드를 기반으로 정의됩니다(예: `text`, `email`, `url`).
 
 <docs-code header="question-textbox.ts" path="adev/src/content/examples/dynamic-form/src/app/question-textbox.ts"/>
 
-The `DropdownQuestion` control type presents a list of choices in a select box.
+`DropdownQuestion` 컨트롤 유형은 선택 상자에서 선택 목록을 제시합니다.
 
- <docs-code header="question-dropdown.ts" path="adev/src/content/examples/dynamic-form/src/app/question-dropdown.ts"/>
+<docs-code header="question-dropdown.ts" path="adev/src/content/examples/dynamic-form/src/app/question-dropdown.ts"/>
 
-### Compose form groups
+### 양식 그룹 구성
 
-A dynamic form uses a service to create grouped sets of input controls, based on the form model.
-The following `QuestionControlService` collects a set of `FormGroup` instances that consume the metadata from the question model.
-You can specify default values and validation rules.
+동적 양식은 양식 모델을 기반으로 입력 컨트롤의 그룹 세트를 만들기 위해 서비스를 사용합니다.
+다음 `QuestionControlService`는 질문 모델에서 메타데이터를 소비하는 여러 `FormGroup` 인스턴스를 수집합니다.
+기본값 및 유효성 검사 규칙을 지정할 수 있습니다.
 
 <docs-code header="src/app/question-control.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question-control.service.ts"/>
 
-## Compose dynamic form contents
+## 동적 양식 내용 구성하기
 
-The dynamic form itself is represented by a container component, which you add in a later step.
-Each question is represented in the form component's template by an `<app-question>` tag, which matches an instance of `DynamicFormQuestionComponent`.
+동적 양식 자체는 나중에 추가할 컨테이너 컴포넌트로 표시됩니다.
+각 질문은 양식 컴포넌트의 템플릿에서 `<app-question>` 태그로 표시되며, 이는 `DynamicFormQuestionComponent`의 인스턴스와 일치합니다.
 
-The `DynamicFormQuestionComponent` is responsible for rendering the details of an individual question based on values in the data-bound question object.
-The form relies on a [`[formGroup]` directive](api/forms/FormGroupDirective "API reference") to connect the template HTML to the underlying control objects.
-The `DynamicFormQuestionComponent` creates form groups and populates them with controls defined in the question model, specifying display and validation rules.
+`DynamicFormQuestionComponent`는 데이터 바인딩된 질문 객체의 값에 기반하여 개별 질문의 세부정보를 렌더링하는 책임을 집니다.
+양식은 템플릿 HTML을 기본 컨트롤 객체와 연결하는 [`[formGroup]` 지시문](api/forms/FormGroupDirective "API reference")에 의존합니다.
+`DynamicFormQuestionComponent`는 양식 그룹을 생성하고 질문 모델에 정의된 컨트롤로 채우며, 표시 및 유효성 검사 규칙을 지정합니다.
 
 <docs-code-multifile>
   <docs-code header="dynamic-form-question.component.html" path="adev/src/content/examples/dynamic-form/src/app/dynamic-form-question.component.html"/>
   <docs-code header="dynamic-form-question.component.ts" path="adev/src/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts"/>
 </docs-code-multifile>
 
-The goal of the `DynamicFormQuestionComponent` is to present question types defined in your model.
-You only have two types of questions at this point but you can imagine many more.
-The `ngSwitch` statement in the template determines which type of question to display.
-The switch uses directives with the [`formControlName`](api/forms/FormControlName "FormControlName directive API reference") and [`formGroup`](api/forms/FormGroupDirective "FormGroupDirective API reference") selectors.
-Both directives are defined in `ReactiveFormsModule`.
+`DynamicFormQuestionComponent`의 목표는 모델에 정의된 질문 유형을 나타내는 것입니다.
+이 시점에서 질문 유형은 두 가지에 불과하지만, 훨씬 더 많은 질문 유형을 상상할 수 있습니다.
+템플릿의 `ngSwitch` 문은 표시할 질문 유형을 결정합니다.
+스위치는 [`formControlName`](api/forms/FormControlName "FormControlName directive API reference") 및 [`formGroup`](api/forms/FormGroupDirective "FormGroupDirective API reference") 선택기가 포함된 지시문을 사용합니다.
+두 지시문은 `ReactiveFormsModule`에 정의되어 있습니다.
 
-### Supply data
+### 데이터 제공
 
-Another service is needed to supply a specific set of questions from which to build an individual form.
-For this exercise you create the `QuestionService` to supply this array of questions from the hard-coded sample data.
-In a real-world app, the service might fetch data from a backend system.
-The key point, however, is that you control the hero job-application questions entirely through the objects returned from `QuestionService`.
-To maintain the questionnaire as requirements change, you only need to add, update, and remove objects from the `questions` array.
+개별 양식을 빌드하기 위한 특정 질문 세트를 제공하기 위해 또 다른 서비스가 필요합니다.
+이번 연습에서는 하드코딩된 샘플 데이터에서 이 질문 배열을 제공할 `QuestionService`를 생성합니다.
+실제 애플리케이션에서는 서비스가 백엔드 시스템에서 데이터를 가져올 수 있습니다.
+그러나 핵심은 `QuestionService`에서 반환된 객체를 통해 영웅 구직 질문을 완전히 제어할 수 있다는 것입니다.
+요구 사항이 변경됨에 따라 설문지를 유지 관리하려면 `questions` 배열에서 객체를 추가, 업데이트 및 제거하기만 하면 됩니다.
 
-The `QuestionService` supplies a set of questions in the form of an array bound to `@Input()` questions.
+`QuestionService`는 `@Input()` 질문에 바인딩된 형태로 질문 세트를 제공합니다.
 
 <docs-code header="src/app/question.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question.service.ts"/>
 
-## Create a dynamic form template
+## 동적 양식 템플릿 만들기
 
-The `DynamicFormComponent` component is the entry point and the main container for the form, which is represented using the `<app-dynamic-form>` in a template.
+`DynamicFormComponent` 컴포넌트는 진입점이자 양식의 주요 컨테이너로, 템플릿에서 `<app-dynamic-form>`을 사용하여 표현됩니다.
 
-The `DynamicFormComponent` component presents a list of questions by binding each one to an `<app-question>` element that matches the `DynamicFormQuestionComponent`.
+`DynamicFormComponent` 컴포넌트는 각 질문을 `DynamicFormQuestionComponent`와 일치하는 `<app-question>` 요소에 바인딩하여 질문 목록을 제공합니다.
 
 <docs-code-multifile>
     <docs-code header="dynamic-form.component.html" path="adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.html"/>
     <docs-code header="dynamic-form.component.ts" path="adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.ts"/>
 </docs-code-multifile>
 
-### Display the form
+### 양식 표시하기
 
-To display an instance of the dynamic form, the `AppComponent` shell template passes the `questions` array returned by the `QuestionService` to the form container component, `<app-dynamic-form>`.
+동적 양식의 인스턴스를 표시하기 위해 `AppComponent` 셸 템플릿은 `QuestionService`에서 반환된 `questions` 배열을 양식 컨테이너 컴포넌트 `<app-dynamic-form>`에 전달합니다.
 
 <docs-code header="app.component.ts" path="adev/src/content/examples/dynamic-form/src/app/app.component.ts"/>
 
-This separation of model and data lets you repurpose the components for any type of survey, as long as it's compatible with the _question_ object model.
+모델과 데이터의 분리는 질문 객체 모델과 호환되는 한 모든 유형의 설문조사를 위해 컴포넌트를 재사용할 수 있게 합니다.
 
-### Ensuring valid data
+### 유효한 데이터 보장
 
-The form template uses dynamic data binding of metadata to render the form without making any hardcoded assumptions about specific questions.
-It adds both control metadata and validation criteria dynamically.
+양식 템플릿은 특정 질문에 대한 하드코딩된 가정을 하지 않고 메타데이터의 동적 데이터 바인딩을 사용하여 양식을 렌더링합니다.
+제어 메타데이터와 유효성 검사 기준을 동적으로 추가합니다.
 
-To ensure valid input, the _Save_ button is disabled until the form is in a valid state.
-When the form is valid, click _Save_ and the application renders the current form values as JSON.
+유효한 입력을 보장하기 위해 _저장_ 버튼은 양식이 유효한 상태가 될 때까지 비활성화됩니다.
+양식이 유효할 때 _저장_을 클릭하면 애플리케이션이 현재 양식 값을 JSON 형식으로 렌더링합니다.
 
-The following figure shows the final form.
+다음 그림은 최종 양식을 보여줍니다.
 
 <img alt="Dynamic-Form" src="assets/images/guide/dynamic-form/dynamic-form.png">
 
-## Next steps
+## 다음 단계
 
 <docs-pill-row>
-  <docs-pill title="Validating form input" href="guide/forms/reactive-forms#validating-form-input" />
-  <docs-pill title="Form validation guide" href="guide/forms/form-validation" />
-</docs-pill-row>
+  <docs-pill title="양식 입력 유효성 검사" href="guide/forms/reactive-forms#validating-form-input" />
+  <docs-pill title="양식 유효성 검사 가이드" href="guide/forms/form-validation" />
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/guide/forms/form-validation.md b/adev/src/content/guide/forms/form-validation.md
index f72fca26eb9a..68a1ff9a13e5 100644
--- a/adev/src/content/guide/forms/form-validation.md
+++ b/adev/src/content/guide/forms/form-validation.md
@@ -1,143 +1,116 @@
-# Validating form input
+# 폼 입력 유효성 검사
 
-You can improve overall data quality by validating user input for accuracy and completeness.
-This page shows how to validate user input from the UI and display useful validation messages, in both reactive and template-driven forms.
+사용자 입력의 정확성과 완전성을 검증하여 전체 데이터 품질을 향상시킬 수 있습니다. 이 페이지에서는 UI에서 사용자 입력을 검증하고 유용한 유효성 검사 메시지를 표시하는 방법을 다룹니다. 리액티브 양식과 템플릿 기반 양식 모두에서 설명합니다.
 
-## Validating input in template-driven forms
+## 템플릿 기반 양식에서의 입력 유효성 검사
 
-To add validation to a template-driven form, you add the same validation attributes as you would with [native HTML form validation](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation).
-Angular uses directives to match these attributes with validator functions in the framework.
+템플릿 기반 양식에 유효성 검사를 추가하려면 [네이티브 HTML 폼 유효성 검사](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation)와 동일한 유효성 검사 속성을 추가합니다. Angular는 이러한 속성을 프레임워크의 검증기 함수와 연결하는 지시어를 사용합니다.
 
-Every time the value of a form control changes, Angular runs validation and generates either a list of validation errors that results in an `INVALID` status, or null, which results in a VALID status.
+폼 컨트롤의 값이 변경될 때마다, Angular는 유효성 검사를 수행하고 `INVALID` 상태를 초래하는 유효성 검사 오류 목록이나 `null`을 생성합니다. 후자는 VALID 상태를 나타냅니다.
 
-You can then inspect the control's state by exporting `ngModel` to a local template variable.
-The following example exports `NgModel` into a variable called `name`:
+그런 다음 `ngModel`을 지역 템플릿 변수로 내보내어 컨트롤의 상태를 검사할 수 있습니다. 다음 예제에서는 `NgModel`을 `name`이라는 변수가 있는 지역 변수로 내보냅니다:
 
 <docs-code header="template/actor-form-template.component.html (name)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="name-with-error-msg"/>
 
-Notice the following features illustrated by the example.
+다음은 예제가 설명하는 몇 가지 기능입니다.
 
-* The `<input>` element carries the HTML validation attributes: `required` and `minlength`.
-    It also carries a custom validator directive, `forbiddenName`.
-    For more information, see the [Custom validators](#defining-custom-validators) section.
+* `<input>` 요소는 HTML 유효성 검사 속성인 `required`와 `minlength`를 가지고 있습니다. 또한 사용자 정의 검증기 지시어인 `forbiddenName`도 포함되어 있습니다. 자세한 내용은 [사용자 정의 검증기](#defining-custom-validators) 섹션을 참조하십시오.
 
-* `#name="ngModel"` exports `NgModel` into a local variable called `name`.
-    `NgModel` mirrors many of the properties of its underlying `FormControl` instance, so you can use this in the template to check for control states such as `valid` and `dirty`.
-    For a full list of control properties, see the [AbstractControl](api/forms/AbstractControl) API reference.
+* `#name="ngModel"`은 `NgModel`을 `name`이라는 지역 변수로 내보냅니다. `NgModel`은 기본 `FormControl` 인스턴스의 많은 속성을 반영하므로, 템플릿에서 `valid` 및 `dirty`와 같은 컨트롤 상태를 체크하는 데 사용할 수 있습니다. 모든 컨트롤 속성의 전체 목록은 [AbstractControl](api/forms/AbstractControl) API 참조를 참조하십시오.
 
-  * The `*ngIf` on the `<div>` element reveals a set of nested message `divs` but only if the `name` is invalid and the control is either `dirty` or `touched`.
+* `<div>` 요소의 `*ngIf`는 `name`이 유효하지 않고 컨트롤이 `dirty` 또는 `touched`인 경우에만 중첩 메시지 `div` 세트를 나타냅니다.
 
-  * Each nested `<div>` can present a custom message for one of the possible validation errors.
-        There are messages for `required`, `minlength`, and `forbiddenName`.
+* 각 중첩 `<div>`는 가능한 유효성 검사 오류 중 하나를 위한 사용자 지정 메시지를 표시할 수 있습니다. `required`, `minlength` 및 `forbiddenName`에 대한 메시지가 있습니다.
 
-HELPFUL: To prevent the validator from displaying errors before the user has a chance to edit the form, you should check for either the `dirty` or `touched` states in a control.
+도움말: 유효성 검사기가 사용자가 양식을 수정할 기회를 갖기 전에 오류를 표시하지 않도록 하려면 컨트롤의 `dirty` 또는 `touched` 상태를 확인해야 합니다.
 
-* When the user changes the value in the watched field, the control is marked as "dirty"
-* When the user blurs the form control element, the control is marked as "touched"
+* 사용자가 관찰된 필드의 값을 변경하면, 해당 컨트롤은 "dirty"로 표시됩니다. 
+* 사용자가 폼 컨트롤 요소에서 포커스를 잃으면, 해당 컨트롤은 "touched"로 표시됩니다.
 
-## Validating input in reactive forms
+## 리액티브 양식에서의 입력 유효성 검사
 
-In a reactive form, the source of truth is the component class.
-Instead of adding validators through attributes in the template, you add validator functions directly to the form control model in the component class.
-Angular then calls these functions whenever the value of the control changes.
+리액티브 양식에서는 소스 오브 트루스가 컴포넌트 클래스입니다. 템플릿의 속성을 통해 검증기를 추가하는 대신, 컴포넌트 클래스의 폼 컨트롤 모델에 직접 검증기 함수를 추가합니다. Angular는 컨트롤의 값이 변경될 때마다 이러한 함수를 호출합니다.
 
-### Validator functions
+### 검증기 함수
 
-Validator functions can be either synchronous or asynchronous.
+검증기 함수는 동기 또는 비동기일 수 있습니다.
 
-| Validator type   | Details |
+| 검증기 타입     | 세부 사항 |
 |:---              |:---     |
-| Sync validators  | Synchronous functions that take a control instance and immediately return either a set of validation errors or `null`. Pass these in as the second argument when you instantiate a `FormControl`.                       |
-| Async validators | Asynchronous functions that take a control instance and return a Promise or Observable that later emits a set of validation errors or `null`. Pass these in as the third argument when you instantiate a `FormControl`. |
+| 동기 검증기      | 컨트롤 인스턴스를 받아들이고 즉시 유효성 검사 오류 집합 또는 `null`을 반환하는 동기 함수입니다. `FormControl`을 인스턴스화할 때 두 번째 인수로 전달합니다.                       |
+| 비동기 검증기   | 컨트롤 인스턴스를 받아들이고 나중에 유효성 검사 오류 집합 또는 `null`을 방출하는 Promise 또는 Observable을 반환하는 비동기 함수입니다. `FormControl`을 인스턴스화할 때 세 번째 인수로 전달합니다. |
 
-For performance reasons, Angular only runs async validators if all sync validators pass.
-Each must complete before errors are set.
+성능상의 이유로 Angular는 모든 동기 검증기가 통과될 때만 비동기 검증기를 실행합니다. 각 검증기는 오류가 설정되기 전에 완료되어야 합니다.
 
-### Built-in validator functions
+### 내장 검증기 함수
 
-You can choose to [write your own validator functions](#defining-custom-validators), or you can use some of Angular's built-in validators.
+[자체 검증기 함수를 작성](#defining-custom-validators)할 수도 있지만, Angular의 일부 내장 검증기를 사용할 수도 있습니다.
 
-The same built-in validators that are available as attributes in template-driven forms, such as `required` and `minlength`, are all available to use as functions from the `Validators` class.
-For a full list of built-in validators, see the [Validators](api/forms/Validators) API reference.
+템플릿 기반 양식에서 속성으로 사용할 수 있는 `required`와 `minlength`와 같은 모든 내장 검증기를 `Validators` 클래스로부터 함수 형태로 사용할 수 있습니다. 내장 검증기의 전체 목록은 [Validators](api/forms/Validators) API 참조를 참조하십시오.
 
-To update the actor form to be a reactive form, use some of the same
-built-in validators —this time, in function form, as in the following example.
+배우 양식을 리액티브 양식으로 업데이트하기 위해, 이전 예제와 마찬가지로 일부 내장 검증기를 사용합니다. 이번에는 함수를 통해 사용합니다.
 
 <docs-code header="reactive/actor-form-reactive.component.ts (validator functions)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts" visibleRegion="form-group"/>
 
-In this example, the `name` control sets up two built-in validators —`Validators.required` and `Validators.minLength(4)`— and one custom validator, `forbiddenNameValidator`.
+이 예제에서 `name` 컨트롤은 두 가지 내장 검증기 — `Validators.required` 및 `Validators.minLength(4)` — 과 하나의 사용자 정의 검증기인 `forbiddenNameValidator`를 설정합니다.
 
-All of these validators are synchronous, so they are passed as the second argument.
-Notice that you can support multiple validators by passing the functions in as an array.
+이러한 검증기는 모두 동기적이므로 두 번째 인수로 전달됩니다. 함수들을 배열로 전달하여 여러 개의 검증기를 지원할 수 있음을 주목하십시오.
 
-This example also adds a few getter methods.
-In a reactive form, you can always access any form control through the `get` method on its parent group, but sometimes it's useful to define getters as shorthand for the template.
+이 예제는 몇 개의 getter 메서드도 추가합니다. 리액티브 양식에서는 항상 상위 그룹의 `get` 메서드를 통해 어떤 폼 컨트롤에도 접근할 수 있지만, 때때로 템플릿을 위한 약식으로 getter를 정의하는 것이 유용할 수 있습니다.
 
-If you look at the template for the `name` input again, it is fairly similar to the template-driven example.
+다시 `name` 입력의 템플릿을 살펴보면, 템플릿 기반 예제와 상당히 유사합니다.
 
 <docs-code header="reactive/actor-form-reactive.component.html (name with error msg)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html" visibleRegion="name-with-error-msg"/>
 
-This form differs from the template-driven version in that it no longer exports any directives. Instead, it uses the `name` getter defined in  the component class.
+이 양식은 이제 더 이상 어떤 지시어도 내보내지 않으며, 대신 컴포넌트 클래스에서 정의된 `name` getter를 사용합니다.
 
-Notice that the `required` attribute is still present in the template. Although it's not necessary for validation, it should be retained for accessibility purposes.
+템플릿에 여전히 `required` 속성이 존재하는 것을 주목하십시오. 유효성을 검사하는 데 꼭 필요하지는 않지만 접근성을 위해 유지해야 합니다.
 
-## Defining custom validators
+## 사용자 정의 검증기 정의
 
-The built-in validators don't always match the exact use case of your application, so you sometimes need to create a custom validator.
+내장 검증기가 항상 애플리케이션의 정확한 사용 사례와 일치하는 것은 아니므로, 때때로 사용자 정의 검증기를 만들어야 합니다.
 
-Consider the `forbiddenNameValidator` function from the previous example.
-Here's what the definition of that function looks like.
+이전 예제에 있는 `forbiddenNameValidator` 함수를 고려하십시오. 다음은 해당 함수의 정의 예시입니다.
 
 <docs-code header="shared/forbidden-name.directive.ts (forbiddenNameValidator)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="custom-validator"/>
 
-The function is a factory that takes a regular expression to detect a *specific* forbidden name and returns a validator function.
+이 함수는 특정 금지된 이름을 감지하는 정규 표현식을 받아들이고 유효성 검사기 함수를 반환하는 팩토리입니다.
 
-In this sample, the forbidden name is "bob", so the validator rejects any actor name containing "bob".
-Elsewhere it could reject "alice" or any name that the configuring regular expression matches.
+이 샘플에서는 금지된 이름이 "bob"이므로, 검증기는 "bob"을 포함한 어떤 배우 이름도 거부합니다. 다른 곳에서는 "alice" 또는 구성하는 정규 표현식과 일치하는 이름을 거부할 수 있습니다.
 
-The `forbiddenNameValidator` factory returns the configured validator function.
-That function takes an Angular control object and returns *either* null if the control value is valid *or* a validation error object.
-The validation error object typically has a property whose name is the validation key, `'forbiddenName'`, and whose value is an arbitrary dictionary of values that you could insert into an error message, `{name}`.
+`forbiddenNameValidator` 팩토리는 구성된 검증기 함수를 반환합니다. 해당 함수는 Angular 제어 객체를 받아들이고, 제어 값이 유효하면 *null*을 반환하거나 유효성 검사 오류 객체를 반환합니다. 유효성 검사 오류 객체는 일반적으로 이름이 `'forbiddenName'`인 속성과 Error 메시지에 삽입할 수 있는 임의의 값 사전 `{name}`을 포함합니다.
 
-Custom async validators are similar to sync validators, but they must instead return a Promise or observable that later emits null or a validation error object.
-In the case of an observable, the observable must complete, at which point the form uses the last value emitted for validation.
+비동기 사용자 정의 검증기는 동기 검증기와 유사하지만, 반드시 나중에 null 또는 유효성 검사 오류 객체를 방출하는 Promise 또는 Observable을 반환해야 합니다. Observable의 경우, observable은 완료되어야 하며, 이 시점에서 양식은 유효성을 검증하는 데 마지막으로 방출된 값을 사용합니다.
 
-### Adding custom validators to reactive forms
+### 리액티브 양식에 사용자 정의 검증기 추가
 
-In reactive forms, add a custom validator by passing the function directly to the `FormControl`.
+리액티브 양식에서 사용자 정의 검증기를 추가하려면 함수 자체를 `FormControl`에 전달하여 추가합니다.
 
 <docs-code header="reactive/actor-form-reactive.component.ts (validator functions)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts" visibleRegion="custom-validator"/>
 
-### Adding custom validators to template-driven forms
+### 템플릿 기반 양식에 사용자 정의 검증기 추가
 
-In template-driven forms, add a directive to the template, where the directive wraps the validator function.
-For example, the corresponding `ForbiddenValidatorDirective` serves as a wrapper around the `forbiddenNameValidator`.
+템플릿 기반 양식에서는 템플릿에 디렉티브를 추가하는 방식으로 검증기 함수를 래핑하는 디렉티브를 추가합니다. 예를 들어, 해당 `ForbiddenValidatorDirective`는 `forbiddenNameValidator`를 감싸는 역할을 합니다.
 
-Angular recognizes the directive's role in the validation process because the directive registers itself with the `NG_VALIDATORS` provider, as shown in the following example.
-`NG_VALIDATORS` is a predefined provider with an extensible collection of validators.
+Angular는 지시어가 유효성 검사 과정에서 역할을 인식한다. 왜냐하면 해당 지시어는 `NG_VALIDATORS` 제공자에 등록되기 때문입니다. 다음 예시를 참조하십시오. `NG_VALIDATORS`는 확장 가능한 검증기 모음을 가진 사전 정의된 제공자입니다.
 
 <docs-code header="shared/forbidden-name.directive.ts (providers)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="directive-providers"/>
 
-The directive class then implements the `Validator` interface, so that it can easily integrate with Angular forms.
-Here is the rest of the directive to help you get an idea of how it all comes together.
+그 다음, 지시어 클래스는 `Validator` 인터페이스를 구현하여 Angular 양식과 쉽게 통합할 수 있도록 합니다. 여기에는 전체 지시어의 나머지 부분이 포함되어 있어 어떻게 모든 것이 통합되는지 이해하는 데 도움이 됩니다.
 
 <docs-code header="shared/forbidden-name.directive.ts (directive)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="directive"/>
 
-Once the `ForbiddenValidatorDirective` is ready, you can add its selector, `appForbiddenName`, to any input element to activate it.
-For example:
+`ForbiddenValidatorDirective`가 준비되면, `appForbiddenName` 선택자를 모든 입력 요소에 추가하여 활성화할 수 있습니다. 예를 들면:
 
 <docs-code header="template/actor-form-template.component.html (forbidden-name-input)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="name-input"/>
 
-HELPFUL: Notice that the custom validation directive is instantiated with `useExisting` rather than `useClass`.
-The registered validator must be *this instance* of the `ForbiddenValidatorDirective` —the instance in the form with its `forbiddenName` property bound to "bob".
+도움말: 사용자 정의 유효성 검사 지시어는 `useExisting`이 아닌 `useClass`로 인스턴스화된다는 점에 유의하십시오. 등록된 검증기는 `forbiddenName` 속성이 "bob"에 바인딩된 `ForbiddenValidatorDirective`의 *이 인스턴스*이어야 합니다.
 
-If you were to replace `useExisting` with `useClass`, then you'd be registering a new class instance, one that doesn't have a `forbiddenName`.
+`useExisting`을 `useClass`로 교체하면, 새 클래스 인스턴스를 등록하게 되며, 이는 `forbiddenName`이 없을 것입니다.
 
-## Control status CSS classes
+## 제어 상태 CSS 클래스
 
-Angular automatically mirrors many control properties onto the form control element as CSS classes.
-Use these classes to style form control elements according to the state of the form.
-The following classes are currently supported.
+Angular는 많은 제어 속성을 양식 컨트롤 요소에 CSS 클래스로 자동으로 반영합니다. 이러한 클래스를 사용하여 양식 컨트롤 요소의 상태에 따라 스타일을 지정합니다. 현재 지원되는 클래스는 다음과 같습니다.
 
 * `.ng-valid`
 * `.ng-invalid`
@@ -146,30 +119,26 @@ The following classes are currently supported.
 * `.ng-dirty`
 * `.ng-untouched`
 * `.ng-touched`
-* `.ng-submitted` \(enclosing form element only\)
+* `.ng-submitted` (둘러싼 양식 요소만 해당)
 
-In the following example, the actor form uses the `.ng-valid` and `.ng-invalid` classes to
-set the color of each form control's border.
+다음 예제에서, 배우 양식은 각 폼 컨트롤의 테두리 색상을 설정하기 위해 `.ng-valid` 및 `.ng-invalid` 클래스를 사용합니다.
 
 <docs-code header="forms.css (status classes)" path="adev/src/content/examples/form-validation/src/assets/forms.css"/>
 
-## Cross-field validation
+## 교차 필드 유효성 검사
 
-A cross-field validator is a [custom validator](#defining-custom-validators "Read about custom validators") that compares the values of different fields in a form and accepts or rejects them in combination.
-For example, you might have a form that offers mutually incompatible options, so that if the user can choose A or B, but not both.
-Some field values might also depend on others; a user might be allowed to choose B only if A is also chosen.
+교차 필드 검증기는 폼 내의 다양한 필드 값을 비교하고 조합하여 수용할지 거부하는[사용자 정의 검증기](#defining-custom-validators "Read about custom validators")입니다. 예를 들어, 사용자가 A 또는 B를 선택할 수는 있지만 둘 다 선택할 수 없는 상호 배타적인 옵션을 제공하는 폼이 있을 수 있습니다. 어떤 필드 값은 다른 값에 따라 달라질 수도 있습니다. 사용자는 A가 선택된 경우에만 B를 선택할 수 있습니다.
 
-The following cross validation examples show how to do the following:
+다음 교차 유효성 검사 예제에서는 다음을 보여줍니다.
 
-* Validate reactive or template-based form input based on the values of two sibling controls,
-* Show a descriptive error message after the user interacted with the form and the validation failed.
+* 두 형제 컨트롤의 값에 따라 리액티브 또는 템플릿 기반 양식 입력을 검증합니다.
+* 사용자가 양식과 상호작용했지만 유효성 검사가 실패한 후 설명적인 오류 메시지를 표시합니다.
 
-The examples use cross-validation to ensure that actors do not reuse the same name in their role by filling out the Actor Form.
-The validators do this by checking that the actor names and roles do not match.
+예제에서는 교차 유효성 검사를 사용하여 배우가 자신들의 역할에서 동일한 이름을 재사용하지 않도록 Actor Form을 작성하는 방법을 보여줍니다. 검증기는 배우 이름과 역할이 일치하지 않는지 확인하여 이를 수행합니다.
 
-### Adding cross-validation to reactive forms
+### 리액티브 양식에 교차 유효성 검사 추가
 
-The form has the following structure:
+폼의 구조는 다음과 같습니다:
 
 <docs-code language="javascript">
 
@@ -181,11 +150,9 @@ const actorForm = new FormGroup({
 
 </docs-code>
 
-Notice that the `name` and `role` are sibling controls.
-To evaluate both controls in a single custom validator, you must perform the validation in a common ancestor control: the `FormGroup`.
-You query the `FormGroup` for its child controls so that you can compare their values.
+`name`과 `role`이 형제 컨트롤임을 주목하십시오. 두 컨트롤을 단일 사용자 정의 검증기에서 평가하려면, 공통 조상 컨트롤인 `FormGroup`에서 유효성 검사를 수행해야 합니다. `FormGroup`에서 자식 컨트롤을 쿼리하여 값을 비교할 수 있습니다.
 
-To add a validator to the `FormGroup`, pass the new validator in as the second argument on creation.
+`FormGroup`에 검증기를 추가하려면, 생성 시 두 번째 인수로 새 검증기를 전달하면 됩니다.
 
 <docs-code language="javascript">
 
@@ -197,59 +164,50 @@ const actorForm = new FormGroup({
 
 </docs-code>
 
-The validator code is as follows.
+검증기 코드는 다음과 같습니다.
 
 <docs-code header="shared/unambiguous-role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts" visibleRegion="cross-validation-validator"/>
 
-The `unambiguousRoleValidator` validator implements the `ValidatorFn` interface.
-It takes an Angular control object as an argument and returns either null if the form is valid, or `ValidationErrors` otherwise.
+`unambiguousRoleValidator` 검증기는 `ValidatorFn` 인터페이스를 구현합니다. Angular 제어 객체를 인수로 받아들이고, 폼이 유효하면 null을 반환하거나 그렇지 않으면 `ValidationErrors`를 반환합니다.
 
-The validator retrieves the child controls by calling the `FormGroup`'s [get](api/forms/AbstractControl#get) method, then compares the values of the `name` and `role` controls.
+검증기는 `FormGroup`의 [get](api/forms/AbstractControl#get) 메서드를 호출하여 자식 컨트롤을 검색한 후, `name`과 `role` 컨트롤의 값을 비교합니다.
 
-If the values do not match, the role is unambiguous, both are valid, and the validator returns null.
-If they do match, the actor's role is ambiguous and the validator must mark the form as invalid by returning an error object.
+값이 일치하지 않으면 역할이 명확하며 모두 유효하므로 검증기는 null을 반환합니다. 일치하면 배우의 역할이 모호하며, 검증기는 오류 객체를 반환하여 양식을 비유효로 표시해야 합니다.
 
-To provide better user experience, the template shows an appropriate error message when the form is invalid.
+더 나은 사용자 경험을 제공하기 위해, 템플릿은 폼이 비유효할 때 적절한 오류 메시지를 표시합니다.
 
 <docs-code header="reactive/actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html" visibleRegion="cross-validation-error-message"/>
 
-This `*ngIf` displays the error if the `FormGroup` has the cross validation error returned by the `unambiguousRoleValidator` validator, but only if the user finished [interacting with the form](#control-status-css-classes).
+이 `*ngIf`는 `FormGroup`이 `unambiguousRoleValidator` 검증기에서 반환된 교차 검증 오류를 가지고 있는 경우에만 오류를 표시합니다. 그러나 이는 사용자가 [양식과 상호작용을 완료한 후](#control-status-css-classes)만 해당됩니다.
 
-### Adding cross-validation to template-driven forms
+### 템플릿 기반 양식에 교차 유효성 검사 추가
 
-For a template-driven form, you must create a directive to wrap the validator function.
-You provide that directive as the validator using the [`NG_VALIDATORS` token](/api/forms/NG_VALIDATORS), as shown in the following example.
+템플릿 기반 양식에서는 검증기 함수를 래핑하는 디렉티브를 만들어야 합니다. 해당 디렉티브를 검증기로서 [`NG_VALIDATORS` 토큰](/api/forms/NG_VALIDATORS)를 사용하여 제공합니다. 다음 예를 참고하십시오.
 
 <docs-code header="shared/unambiguous-role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts" visibleRegion="cross-validation-directive"/>
 
-You must add the new directive to the HTML template.
-Because the validator must be registered at the highest level in the form, the following template puts the directive on the `form` tag.
+HTML 템플릿에 새 디렉티브를 추가해야 합니다. 검증기는 폼에서 가장 높은 수준에서 등록되어야 하므로, 다음 템플릿은 디렉티브를 `form` 태그에 둡니다.
 
 <docs-code header="template/actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="cross-validation-register-validator"/>
 
-To provide better user experience, an appropriate error message appears when the form is invalid.
+더 나은 사용자 경험을 제공하기 위해, 양형이 비유효할 때 적절한 오류 메시지가 표시됩니다.
 
 <docs-code header="template/actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="cross-validation-error-message"/>
 
-This is the same in both template-driven and reactive forms.
+이는 템플릿 기반 양식과 리액티브 양식 모두에서 동일합니다.
 
-## Creating asynchronous validators
+## 비동기 검증기 생성
 
-Asynchronous validators implement the `AsyncValidatorFn` and `AsyncValidator` interfaces.
-These are very similar to their synchronous counterparts, with the following differences.
+비동기 검증기는 `AsyncValidatorFn` 및 `AsyncValidator` 인터페이스를 구현합니다. 이러한 인터페이스는 동기 검증기와 매우 유사하지만 다음과 같은 차이점이 있습니다.
 
-* The `validate()` functions must return a Promise or an observable,
-* The observable returned must be finite, meaning it must complete at some point.
-    To convert an infinite observable into a finite one, pipe the observable through a filtering operator such as `first`, `last`, `take`, or `takeUntil`.
+* `validate()` 함수는 Promise 또는 observable을 반환해야 합니다.
+* 반환된 observable은 유한해야 하며, 즉 언젠가 완료되어야 합니다. 무한 observable을 유한한 것으로 변환하려면 `first`, `last`, `take` 또는 `takeUntil` 과 같은 필터링 연산자를 통해 observable을 파이프합니다.
 
-Asynchronous validation happens after the synchronous validation, and is performed only if the synchronous validation is successful.
-This check lets forms avoid potentially expensive async validation processes \(such as an HTTP request\) if the more basic validation methods have already found invalid input.
+비동기 유효성 검사는 동기 유효성 검사 후에 발생하며, 동기 유효성 검사가 성공해야만 수행됩니다. 이 체크는 폼이 기본 유효성 검사 방법이 이미 잘못된 입력을 발견한 경우 잠재적으로 비용이 많이 드는 비동기 유효성 검사 프로세스를 피하도록 합니다.
 
-After asynchronous validation begins, the form control enters a `pending` state.
-Inspect the control's `pending` property and use it to give visual feedback about the ongoing validation operation.
+비동기 유효성 검사가 시작되면 폼 컨트롤은 `pending` 상태에 들어갑니다. 제어의 `pending` 속성을 검사하고 이를 사용하여 진행 중인 유효성 검사 작업에 대한 시각적 피드백을 제공합니다.
 
-A common UI pattern is to show a spinner while the async validation is being performed.
-The following example shows how to achieve this in a template-driven form.
+일반적인 UI 패턴은 비동기 유효성 검사 중인 동안 스피너를 표시하는 것입니다. 다음 예제는 템플릿 기반 양식에서 이를 어떻게 달성하는지 보여줍니다.
 
 <docs-code language="html">
 
@@ -258,17 +216,15 @@ The following example shows how to achieve this in a template-driven form.
 
 </docs-code>
 
-### Implementing a custom async validator
+### 사용자 정의 비동기 검증기 구현
 
-In the following example, an async validator ensures that actors are cast for a role that is not already taken.
-New actors are constantly auditioning and old actors are retiring, so the list of available roles cannot be retrieved ahead of time.
-To validate the potential role entry, the validator must initiate an asynchronous operation to consult a central database of all currently cast actors.
+다음 예제에서, 비동기 검증기는 배우가 이미 선택되지 않은 역할로 캐스팅되도록 보장합니다. 새로운 배우는 끊임없이 오디션을 보고 있으며, 오래된 배우는 은퇴하고 있으므로, 사용 가능한 역할 목록을 미리 검색할 수는 없습니다. 잠재적인 역할 입력을 검증하기 위해, 검증기는 현재 캐스팅된 모든 배우의 중앙 데이터베이스를 참고하는 비동기 작업을 시작해야 합니다.
 
-The following code creates the validator class, `UniqueRoleValidator`, which implements the `AsyncValidator` interface.
+다음 코드는 `AsyncValidator` 인터페이스를 구현하는 검증기 클래스 `UniqueRoleValidator`를 생성합니다.
 
 <docs-code path="adev/src/content/examples/form-validation/src/app/shared/role.directive.ts" visibleRegion="async-validator"/>
 
-The constructor injects the `ActorsService`, which defines the following interface.
+생성자는 다음 인터페이스를 정의하는 `ActorsService`를 주입합니다.
 
 <docs-code language="typescript">
 interface ActorsService {
@@ -276,72 +232,58 @@ interface ActorsService {
 }
 </docs-code>
 
-In a real world application, the `ActorsService` would be responsible for making an HTTP request to the actor database to check if the role is available.
-From the validator's point of view, the actual implementation of the service is not important, so the example can just code against the `ActorsService` interface.
+실제 애플리케이션에서 `ActorsService`는 역할의 사용 가능성을 확인하기 위해 배우 데이터베이스에 HTTP 요청을 하는 책임이 있습니다. 검증기 관점에서 볼 때, 서비스의 실제 구현은 중요하지 않으므로 예제는 `ActorsService` 인터페이스에 대해 코딩할 수 있습니다.
 
-As the validation begins, the `UnambiguousRoleValidator` delegates to the `ActorsService` `isRoleTaken()` method with the current control value.
-At this point the control is marked as `pending` and remains in this state until the observable chain returned from the `validate()` method completes.
+유효성 검사가 시작되면, `UnambiguousRoleValidator`는 현재 제어 값을 가지고 `ActorsService`의 `isRoleTaken()` 메서드에 위임합니다. 이 시점에서 제어는 `pending`으로 표시되고, `validate()` 메서드에서 반환된 observable 체인이 완료될 때까지 이 상태를 유지합니다.
 
-The `isRoleTaken()` method dispatches an HTTP request that checks if the role is available, and returns `Observable<boolean>` as the result.
-The `validate()` method pipes the response through the `map` operator and transforms it into a validation result.
+`isRoleTaken()` 메서드는 역할의 사용 가능성을 확인하는 HTTP 요청을 전송하고 `Observable<boolean>`을 결과로 반환합니다. `validate()` 메서드는 응답을 `map` 연산자를 통해 파이프하고 이를 유효성 검사 결과로 변환합니다.
 
-The method then, like any validator, returns `null` if the form is valid, and `ValidationErrors` if it is not.
-This validator handles any potential errors with the `catchError` operator.
-In this case, the validator treats the `isRoleTaken()` error as a successful validation, because failure to make a validation request does not necessarily mean that the role is invalid.
-You could handle the error differently and return the `ValidationError` object instead.
+그런 다음 메서드는, 어떤 검증기와 마찬가지로, 폼이 유효한 경우 `null`을 반환하고 비유효한 경우 `ValidationErrors`를 반환합니다. 이 검증기는 `catchError` 연산자로 잠재적인 오류를 처리합니다. 이 경우, 검증기는 `isRoleTaken()` 오류를 성공적인 유효성 검사로 처리합니다. 왜냐하면 유효성 검사 요청을 수행하지 못한 것이 반드시 역할이 비유효하다는 것을 의미하지 않기 때문입니다. 오류를 다르게 처리하고 `ValidationError` 객체를 반환할 수 있습니다.
 
-After some time passes, the observable chain completes and the asynchronous validation is done.
-The `pending` flag is set to `false`, and the form validity is updated.
+어느 정도 시간이 지나면, observable 체인이 완료되고 비동기 유효성 검사가 완료됩니다. `pending` 플래그는 `false`로 설정되고, 폼 유효성이 업데이트됩니다.
 
-### Adding async validators to reactive forms
+### 리액티브 양식에 비동기 검증기 추가
 
-To use an async validator in reactive forms, begin by injecting the validator into the constructor of the component class.
+리액티브 양식에서 비동기 검증기를 사용하려면, 먼저 검증기를 컴포넌트 클래스의 생성자에 주입합니다.
 
 <docs-code path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts" visibleRegion="async-validator-inject"/>
 
-Then, pass the validator function directly to the `FormControl` to apply it.
+그런 다음, 검증기 함수를 직접 `FormControl`에 전달하여 적용합니다.
 
-In the following example, the `validate` function of `UnambiguousRoleValidator` is applied to `roleControl` by passing it to the control's `asyncValidators` option and binding it to the instance of `UnambiguousRoleValidator` that was injected into `ActorFormReactiveComponent`.
-The value of `asyncValidators` can be either a single async validator function, or an array of functions.
-To learn more about `FormControl` options, see the [AbstractControlOptions](api/forms/AbstractControlOptions) API reference.
+다음 예제에서는 `roleControl`에 `UnambiguousRoleValidator`의 `validate` 함수를 적용합니다. 이를 위해 제어의 `asyncValidators` 옵션에 전달하고, `ActorFormReactiveComponent`에 주입된 `UnambiguousRoleValidator` 인스턴스에 바인딩합니다. `asyncValidators`의 값은 단일 비동기 검증기 함수이거나 함수 배열이 될 수 있습니다. `FormControl` 옵션에 대한 자세한 내용은 [AbstractControlOptions](api/forms/AbstractControlOptions) API 참조를 참조하십시오.
 
 <docs-code path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts" visibleRegion="async-validator-usage"/>
 
-### Adding async validators to template-driven forms
+### 템플릿 기반 양식에 비동기 검증기 추가
 
-To use an async validator in template-driven forms, create a new directive and register the `NG_ASYNC_VALIDATORS` provider on it.
+템플릿 기반 양식에서 비동기 검증기를 사용하려면 새 디렉티브를 만들고 해당 디렉티브에 `NG_ASYNC_VALIDATORS` 제공자를 등록합니다.
 
-In the example below, the directive injects the `UniqueRoleValidator` class that contains the actual validation logic and invokes it in the `validate` function, triggered by Angular when validation should happen.
+아래 예제에서는 디렉티브가 실제 유효성 검사 로직을 포함하는 `UniqueRoleValidator` 클래스를 주입하고, 유효성 검사가 필요할 때 Angular에 의해 트리거되는 `validate` 함수에서 이를 호출합니다.
 
 <docs-code path="adev/src/content/examples/form-validation/src/app/shared/role.directive.ts" visibleRegion="async-validator-directive"/>
 
-Then, as with synchronous validators, add the directive's selector to an input to activate it.
+그런 다음, 동기 검증기와 마찬가지로, 입력을 활성화하기 위해 디렉티브의 선택자를 입력에 추가합니다.
 
 <docs-code header="template/actor-form-template.component.html (unique-unambiguous-role-input)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="role-input"/>
 
-### Optimizing performance of async validators
+### 비동기 검증기의 성능 최적화
 
-By default, all validators run after every form value change.
-With synchronous validators, this does not normally have a noticeable impact on application performance.
-Async validators, however, commonly perform some kind of HTTP request to validate the control.
-Dispatching an HTTP request after every keystroke could put a strain on the backend API, and should be avoided if possible.
+기본적으로 모든 검증기는 폼 값이 변경될 때마다 실행됩니다. 동기 검증기에서는 일반적으로 애플리케이션 성능에 눈에 띄는 영향을 미치지 않습니다. 그러나 비동기 검증기는 일반적으로 확인을 위해 HTTP 요청을 수행합니다. 매번 입력할 때마다 HTTP 요청을 전송하면 백엔드 API에 부하를 줄 수 있으며 가능한 한 피해야 합니다.
 
-You can delay updating the form validity by changing the `updateOn` property from `change` (default) to `submit` or `blur`.
+`updateOn` 속성을 `change`(기본값)에서 `submit` 또는 `blur`로 변경하여 폼 유효성 업데이트를 지연시킬 수 있습니다.
 
-With template-driven forms, set the property in the template.
+템플릿 기반 양식의 경우, 템플릿에서 속성을 설정합니다.
 
 <docs-code language="html">
 <input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">
 </docs-code>
 
-With reactive forms, set the property in the `FormControl` instance.
+리액티브 양식의 경우, `FormControl` 인스턴스에서 속성을 설정합니다.
 
 <docs-code language="typescript">
 new FormControl('', {updateOn: 'blur'});
 </docs-code>
 
-## Interaction with native HTML form validation
+## 네이티브 HTML 폼 유효성 검사와의 상호작용
 
-By default, Angular disables [native HTML form validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation) by adding the `novalidate` attribute on the enclosing `<form>` and uses directives to match these attributes with validator functions in the framework.
-If you want to use native validation **in combination** with Angular-based validation, you can re-enable it with the `ngNativeValidate` directive.
-See the [API docs](api/forms/NgForm#native-dom-validation-ui) for details.
+기본적으로 Angular는 [네이티브 HTML 폼 유효성 검사](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation)를 비활성화하여 둘러싼 `<form>`에 `novalidate` 속성을 추가하고, 이러한 속성을 프레임워크의 검증기 함수와 연결하는 지시어를 사용합니다. Angular 기반 유효성 검사와 **결합하여** 네이티브 유효성 검사를 사용하려면, `ngNativeValidate` 지시어를 사용하여 다시 활성화할 수 있습니다. 자세한 내용은 [API 문서](api/forms/NgForm#native-dom-validation-ui)를 참조하십시오.
\ No newline at end of file
diff --git a/adev/src/content/guide/forms/overview.md b/adev/src/content/guide/forms/overview.md
index 88d64454ddf8..db94a4fd7df4 100644
--- a/adev/src/content/guide/forms/overview.md
+++ b/adev/src/content/guide/forms/overview.md
@@ -1,111 +1,111 @@
-<docs-decorative-header title="Forms in Angular" imgSrc="adev/src/assets/images/overview.svg"> <!-- markdownlint-disable-line -->
-Handling user input with forms is the cornerstone of many common applications.
+<docs-decorative-header title="Angular의 양식" imgSrc="adev/src/assets/images/overview.svg"> <!-- markdownlint-disable-line -->
+사용자 입력을 양식으로 처리하는 것은 많은 일반 애플리케이션의 초석입니다.
 </docs-decorative-header>
 
-Applications use forms to enable users to log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks.
+애플리케이션은 양식을 사용하여 사용자가 로그인하고, 프로필을 업데이트하고, 민감한 정보를 입력하며, 많은 다른 데이터 입력 작업을 수행할 수 있게 합니다.
 
-Angular provides two different approaches to handling user input through forms: reactive and template-driven.
-Both capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.
+Angular는 양식을 통해 사용자 입력을 처리하는 두 가지 접근 방식을 제공합니다: 반응형 및 템플릿 기반.
+두 방법 모두 보기에서 사용자 입력 이벤트를 포착하고, 사용자 입력을 검증하며, 업데이트할 양식 모델 및 데이터 모델을 생성하고, 변경 사항을 추적할 수 있는 방법을 제공합니다.
 
-This guide provides information to help you decide which type of form works best for your situation.
-It introduces the common building blocks used by both approaches.
-It also summarizes the key differences between the two approaches, and demonstrates those differences in the context of setup, data flow, and testing.
+이 가이드는 귀하의 상황에 가장 적합한 양식 유형을 결정하는 데 도움을 주기 위한 정보를 제공합니다.
+두 접근 방식에서 사용되는 일반적인 빌딩 블록을 소개합니다.
+또한 두 접근 방식 간의 주요 차이점을 요약하고, 설정, 데이터 흐름 및 테스트의 맥락에서 이러한 차이점을 보여줍니다.
 
-## Choosing an approach
+## 접근 방식 선택
 
-Reactive forms and template-driven forms process and manage form data differently.
-Each approach offers different advantages.
+반응형 양식과 템플릿 기반 양식은 양식 데이터를 처리하고 관리하는 방식이 다릅니다.
+각 접근 방식은 다른 이점을 제공합니다.
 
-| Forms                 | Details |
+| 양식                 | 세부 정보 |
 |:---                   |:---     |
-| Reactive forms        | Provide direct, explicit access to the underlying form's object model. Compared to template-driven forms, they are more robust: they're more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms.                                                                                             |
-| Template-driven forms | Rely on directives in the template to create and manipulate the underlying object model. They are useful for adding a simple form to an app, such as an email list signup form. They're straightforward to add to an app, but they don't scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, template-driven forms could be a good fit. |
+| 반응형 양식         | 기본 양식의 객체 모델에 대한 직접적이고 명시적인 접근을 제공합니다. 템플릿 기반 양식에 비해 더 강력합니다: 더 확장 가능하고, 재사용 가능하며, 테스트 가능성이 높습니다. 양식이 애플리케이션의 핵심 부분인 경우, 또는 애플리케이션을 구성하는 데 반응형 패턴을 이미 사용하고 있는 경우 반응형 양식을 사용하십시오.                                                                                             |
+| 템플릿 기반 양식     | 기본 객체 모델을 생성하고 조작하기 위해 템플릿의 지시문에 의존합니다. 이메일 목록 가입 양식과 같은 간단한 양식을 앱에 추가하는 데 유용합니다. 앱에 추가하기는 직관적이지만 반응형 양식만큼 확장성이 좋지 않습니다. 아주 기본적인 양식 요구 사항과 논리가 템플릿에서만 관리될 수 있는 경우 템플릿 기반 양식이 잘 맞을 수 있습니다. |
 
-### Key differences
+### 주요 차이점
 
-The following table summarizes the key differences between reactive and template-driven forms.
+다음 표는 반응형 양식과 템플릿 기반 양식 간의 주요 차이점을 요약합니다.
 
-|                                                    | Reactive                             | Template-driven                 |
+|                                                    | 반응형                             | 템플릿 기반                 |
 |:---                                                |:---                                  |:---                             |
-| [Setup of form model](#setting-up-the-form-model)  | Explicit, created in component class | Implicit, created by directives |
-| [Data model](#mutability-of-the-data-model)        | Structured and immutable             | Unstructured and mutable        |
-| [Data flow](#data-flow-in-forms)                     | Synchronous                          | Asynchronous                    |
-| [Form validation](#form-validation)                | Functions                            | Directives                      |
+| [양식 모델 설정](#setting-up-the-form-model)  | 명시적이며, 컴포넌트 클래스에서 생성됨 | 암시적이며, 지시문에 의해 생성됨 |
+| [데이터 모델](#mutability-of-the-data-model)        | 구조화되고 불변                     | 구조화되지 않고 가변          |
+| [데이터 흐름](#data-flow-in-forms)                     | 동기                                | 비동기                        |
+| [양식 검증](#form-validation)                | 함수                                | 지시문                        |
 
-### Scalability
+### 확장성
 
-If forms are a central part of your application, scalability is very important.
-Being able to reuse form models across components is critical.
+양식이 귀하 애플리케이션의 핵심 부분이라면, 확장성이 매우 중요합니다.
+구성 요소 간에 양식 모델을 재사용할 수 있는 능력이 중요합니다.
 
-Reactive forms are more scalable than template-driven forms.
-They provide direct access to the underlying form API, and use [synchronous data flow](#data-flow-in-reactive-forms) between the view and the data model, which makes creating large-scale forms easier.
-Reactive forms require less setup for testing, and testing does not require deep understanding of change detection to properly test form updates and validation.
+반응형 양식은 템플릿 기반 양식보다 더 확장 가능합니다.
+기본 양식 API에 직접 접근을 제공하고, 보기와 데이터 모델 간의 [동기 데이터 흐름](#data-flow-in-reactive-forms)을 사용하여 대규모 양식 생성을 더 쉽게 만듭니다.
+반응형 양식은 테스트를 위한 설정이 적게 필요하며, 양식 업데이트 및 검증을 적절히 테스트하기 위해 변경 감지에 대한 깊은 이해가 필요하지 않습니다.
 
-Template-driven forms focus on simple scenarios and are not as reusable.
-They abstract away the underlying form API, and use [asynchronous data flow](#data-flow-in-template-driven-forms) between the view and the data model.
-The abstraction of template-driven forms also affects testing.
-Tests are deeply reliant on manual change detection execution to run properly, and require more setup.
+템플릿 기반 양식은 간단한 시나리오에 초점을 맞추고 있으며 그렇게 재사용 가능하지 않습니다.
+기본 양식 API를 추상화하고, 보기와 데이터 모델 간의 [비동기 데이터 흐름](#data-flow-in-template-driven-forms)을 사용합니다.
+템플릿 기반 양식의 추상화는 테스트에도 영향을 미칩니다.
+테스트는 제대로 실행되기 위해 수동 변경 감지 실행에 깊게 의존하며, 더 많은 설정이 필요합니다.
 
-## Setting up the form model
+## 양식 모델 설정
 
-Both reactive and template-driven forms track value changes between the form input elements that users interact with and the form data in your component model.
-The two approaches share underlying building blocks, but differ in how you create and manage the common form-control instances.
+반응형 및 템플릿 기반 양식 모두 사용자가 상호 작용하는 양식 입력 요소와 컴포넌트 모델의 양식 데이터 간의 값 변경을 추적합니다.
+두 접근 방식은 기본 빌딩 블록을 공유하지만, 공통의 양식 제어 인스턴스를 생성하고 관리하는 방식이 다릅니다.
 
-### Common form foundation classes
+### 공통 양식 기본 클래스
 
-Both reactive and template-driven forms are built on the following base classes.
+반응형 및 템플릿 기반 양식은 다음 기본 클래스를 기반으로 만들어집니다.
 
-| Base classes           | Details |
+| 기본 클래스           | 세부 정보 |
 |:---                    |:---     |
-| `FormControl`          | Tracks the value and validation status of an individual form control.               |
-| `FormGroup`            | Tracks the same values and status for a collection of form controls.                |
-| `FormArray`            | Tracks the same values and status for an array of form controls.                    |
-| `ControlValueAccessor` | Creates a bridge between Angular `FormControl` instances and built-in DOM elements. |
+| `FormControl`          | 개별 양식 제어의 값과 검증 상태를 추적합니다.               |
+| `FormGroup`            | 양식 제어의 컬렉션에 대한 동일한 값과 상태를 추적합니다.                |
+| `FormArray`            | 양식 제어 배열에 대한 동일한 값과 상태를 추적합니다.                    |
+| `ControlValueAccessor` | Angular `FormControl` 인스턴스와 내장 DOM 요소 간의 다리를 만듭니다. |
 
-### Setup in reactive forms
+### 반응형 양식의 설정
 
-With reactive forms, you define the form model directly in the component class.
-The `[formControl]` directive links the explicitly created `FormControl` instance to a specific form element in the view, using an internal value accessor.
+반응형 양식에서는 양식 모델을 직접 컴포넌트 클래스에서 정의합니다.
+`[formControl]` 지시문은 명시적으로 생성된 `FormControl` 인스턴스를 보기의 특정 양식 요소에 연결합니다.
 
-The following component implements an input field for a single control, using reactive forms.
-In this example, the form model is the `FormControl` instance.
+다음 컴포넌트는 반응형 양식을 사용하여 단일 제어에 대한 입력 필드를 구현합니다.
+이 예에서 양식 모델은 `FormControl` 인스턴스입니다.
 
 <docs-code path="adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.ts"/>
 
-IMPORTANT: In reactive forms, the form model is the source of truth; it provides the value and status of the form element at any given point in time, through the `[formControl]` directive on the `<input>` element.
+중요: 반응형 양식에서는 양식 모델이 진실의 원천입니다. 이것은 `<input>` 요소의 `[formControl]` 지시문을 통해 주어진 시점에서 양식 요소의 값과 상태를 제공합니다.
 
-### Setup in template-driven forms
+### 템플릿 기반 양식의 설정
 
-In template-driven forms, the form model is implicit, rather than explicit.
-The directive `NgModel` creates and manages a `FormControl` instance for a given form element.
+템플릿 기반 양식에서는 양식 모델이 명시적이지 않고 암시적입니다.
+`NgModel` 지시문은 주어진 양식 요소에 대한 `FormControl` 인스턴스를 생성하고 관리합니다.
 
-The following component implements the same input field for a single control, using template-driven forms.
+다음 컴포넌트는 템플릿 기반 양식을 사용하여 단일 제어에 대한 동일한 입력 필드를 구현합니다.
 
 <docs-code path="adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.ts"/>
 
-IMPORTANT: In a template-driven form the source of truth is the template. The `NgModel` directive automatically manages the `FormControl` instance for you.
+중요: 템플릿 기반 양식에서는 진실의 원천이 템플릿입니다. `NgModel` 지시문이 자동으로 `FormControl` 인스턴스를 관리합니다.
 
-## Data flow in forms
+## 양식의 데이터 흐름
 
-When an application contains a form, Angular must keep the view in sync with the component model and the component model in sync with the view.
-As users change values and make selections through the view, the new values must be reflected in the data model.
-Similarly, when the program logic changes values in the data model, those values must be reflected in the view.
+애플리케이션에 양식이 포함될 때, Angular는 보기를 컴포넌트 모델과 동기화하고 컴포넌트 모델과 보기를 동기화해야 합니다.
+사용자가 보기에서 값을 변경하고 선택할 때, 새로운 값은 데이터 모델에 반영되어야 합니다.
+비슷하게, 프로그램 로직이 데이터 모델의 값을 변경할 때, 그 값은 보기에도 반영되어야 합니다.
 
-Reactive and template-driven forms differ in how they handle data flowing from the user or from programmatic changes.
-The following diagrams illustrate both kinds of data flow for each type of form, using the favorite-color input field defined above.
+반응형 양식과 템플릿 기반 양식은 사용자 또는 프로그램적 변경으로부터의 데이터 흐름을 처리하는 방식이 다릅니다.
+다음 다이어그램은 위에서 정의된 favorite-color 입력 필드를 사용하여 각 양식 유형에 대한 두 가지 종류의 데이터 흐름을 설명합니다.
 
-### Data flow in reactive forms
+### 반응형 양식의 데이터 흐름
 
-In reactive forms each form element in the view is directly linked to the form model (a `FormControl` instance).
-Updates from the view to the model and from the model to the view are synchronous and do not depend on how the UI is rendered.
+반응형 양식에서는 보기의 각 양식 요소가 양식 모델(`FormControl` 인스턴스)에 직접 연결되어 있습니다.
+모델로부터 보기로의 업데이트 및 보기로부터 모델로의 업데이트는 동기이며 UI가 렌더링되는 방식에 종속되지 않습니다.
 
-The view-to-model diagram shows how data flows when an input field's value is changed from the view through the following steps.
+보기-모델 다이어그램은 입력 필드의 값이 보기에서 변경될 때 데이터가 흐르는 방법을 보여줍니다.
 
-1. The user types a value into the input element, in this case the favorite color *Blue*.
-1. The form input element emits an "input" event with the latest value.
-1. The `ControlValueAccessor` listening for events on the form input element immediately relays the new value to the `FormControl` instance.
-1. The `FormControl` instance emits the new value through the `valueChanges` observable.
-1. Any subscribers to the `valueChanges` observable receive the new value.
+1. 사용자가 입력 요소에 값을 입력합니다. 이 경우 선호하는 색상은 *파란색*입니다.
+1. 양식 입력 요소는 최신 값과 함께 "input" 이벤트를 내보냅니다.
+1. 양식 입력 요소의 이벤트를 듣고 있는 `ControlValueAccessor`가 새로운 값을 즉시 `FormControl` 인스턴스에 전달합니다.
+1. `FormControl` 인스턴스는 `valueChanges` 옵저버블을 통해 새로운 값을 내보냅니다.
+1. `valueChanges` 옵저버블의 모든 구독자는 새로운 값을 받습니다.
 
 ```mermaid
 flowchart TB
@@ -114,18 +114,18 @@ flowchart TB
     CVA(ControlValueAccessor)
     FC(FormControl)
     O(Observers)
-    U-->|Types in the input box|I
-    I-->|Fires the 'input' event|CVA
-    CVA-->|"Calls setValue() on the FormControl"|FC
-    FC-.->|Fires a 'valueChanges' event to observers|O
+    U-->|입력 상자에 입력함|I
+    I-->|'input' 이벤트를 발생시킴|CVA
+    CVA-->|"FormControl에서 setValue()를 호출함"|FC
+    FC-.->|관찰자에게 'valueChanges' 이벤트를 발생시킴|O
 ```
 
-The model-to-view diagram shows how a programmatic change to the model is propagated to the view through the following steps.
+모델-보기 다이어그램은 모델에 대한 프로그램적 변경이 보기로 전파되는 방법을 보여줍니다.
 
-1. The user calls the `favoriteColorControl.setValue()` method, which updates the `FormControl` value.
-1. The `FormControl` instance emits the new value through the `valueChanges` observable.
-1. Any subscribers to the `valueChanges` observable receive the new value.
-1. The control value accessor on the form input element updates the element with the new value.
+1. 사용자가 `favoriteColorControl.setValue()` 메서드를 호출하여 `FormControl` 값을 업데이트합니다.
+1. `FormControl` 인스턴스는 `valueChanges` 옵저버블을 통해 새로운 값을 내보냅니다.
+1. `valueChanges` 옵저버블의 모든 구독자는 새로운 값을 받습니다.
+1. 양식 입력 요소의 제어 값 접근자는 새로운 값으로 요소를 업데이트합니다.
 
 ```mermaid
 flowchart TB
@@ -134,25 +134,25 @@ flowchart TB
     CVA(ControlValueAccessor)
     FC(FormControl)
     O(Observers)
-    U-->|"Calls setValue() on the FormControl"|FC
-    FC-->|Notifies the ControlValueAccessor|CVA
-    FC-.->|Fires a 'valueChanges' event to observers|O
-    CVA-->|"Updates the value of the &lt;input&gt;"|I
+    U-->|"FormControl에서 setValue()를 호출함"|FC
+    FC-->|ControlValueAccessor에 알림|CVA
+    FC-.->|관찰자에게 'valueChanges' 이벤트를 발생시킴|O
+    CVA-->|"양식 입력의 값을 업데이트함"&lt;input&gt;|I
 ```
 
-### Data flow in template-driven forms
+### 템플릿 기반 양식의 데이터 흐름
 
-In template-driven forms, each form element is linked to a directive that manages the form model internally.
+템플릿 기반 양식에서는 각 양식 요소가 양식 모델을 내부적으로 관리하는 지시문에 연결됩니다.
 
-The view-to-model diagram shows how data flows when an input field's value is changed from the view through the following steps.
+보기-모델 다이어그램은 입력 필드의 값이 보기에서 변경될 때 데이터가 흐르는 방법을 보여줍니다.
 
-1. The user types *Blue* into the input element.
-1. The input element emits an "input" event with the value *Blue*.
-1. The control value accessor attached to the input triggers the `setValue()` method on the `FormControl` instance.
-1. The `FormControl` instance emits the new value through the `valueChanges` observable.
-1. Any subscribers to the `valueChanges` observable receive the new value.
-1. The control value accessor also calls the `NgModel.viewToModelUpdate()` method which emits an `ngModelChange` event.
-1. Because the component template uses two-way data binding for the `favoriteColor` property, the `favoriteColor` property in the component is updated to the value emitted by the `ngModelChange` event \(*Blue*\).
+1. 사용자가 입력 요소에 *파란색*을 입력합니다.
+1. 입력 요소는 *파란색* 값을 가진 "input" 이벤트를 내보냅니다.
+1. 입력에 연결된 제어 값 접근자가 `FormControl` 인스턴스에서 `setValue()` 메서드를 호출합니다.
+1. `FormControl` 인스턴스는 `valueChanges` 옵저버블을 통해 새로운 값을 내보냅니다.
+1. `valueChanges` 옵저버블의 모든 구독자는 새로운 값을 받습니다.
+1. 제어 값 접근자는 `NgModel.viewToModelUpdate()` 메서드를 호출하여 `ngModelChange` 이벤트를 발생시킵니다.
+1. 컴포넌트 템플릿에서 `favoriteColor` 속성에 대한 양방향 데이터 바인딩을 사용하므로, 컴포넌트 내의 `favoriteColor` 속성이 `ngModelChange` 이벤트에 의해 내보낸 값에 업데이트됩니다 \(*파란색*\).
 
 ```mermaid
 flowchart TB
@@ -163,162 +163,162 @@ flowchart TB
     M(NgModel)
     O(Observers)
     C(Component)
-    P(Two-way binding)
-    U-->|Types in the input box|I
-    I-->|Fires the 'input' event|CVA
-    CVA-->|"Calls setValue() on the FormControl"|FC
-    FC-.->|Fires a 'valueChanges' event to observers|O
-    CVA-->|"Calls viewToModelUpdate()"|M
-    M-->|Emits an ngModelChange event|C
-    C-->|Updates the value of the two-way bound property|P
+    P(양방향 바인딩)
+    U-->|입력 상자에 입력함|I
+    I-->|'input' 이벤트를 발생시킴|CVA
+    CVA-->|"FormControl에 setValue()를 호출함"|FC
+    FC-.->|관찰자에게 'valueChanges' 이벤트를 발생시킴|O
+    CVA-->|"viewToModelUpdate()를 호출함"|M
+    M-->|ngModelChange 이벤트를 발생시킴|C
+    C-->|양방향 바인딩된 속성의 값을 업데이트함|P
 ```
 
-The model-to-view diagram shows how data flows from model to view when the `favoriteColor` changes from *Blue* to *Red*, through the following steps
+모델-보기 다이어그램은 `favoriteColor`가 *파란색*에서 *빨간색*으로 변경될 때 데이터가 모델에서 보기로 흐르는 방법을 보여줍니다.
 
-1. The `favoriteColor` value is updated in the component.
-1. Change detection begins.
-1. During change detection, the `ngOnChanges` lifecycle hook is called on the `NgModel` directive instance because the value of one of its inputs has changed.
-1. The `ngOnChanges()` method queues an async task to set the value for the internal `FormControl` instance.
-1. Change detection completes.
-1. On the next tick, the task to set the `FormControl` instance value is executed.
-1. The `FormControl` instance emits the latest value through the `valueChanges` observable.
-1. Any subscribers to the `valueChanges` observable receive the new value.
-1. The control value accessor updates the form input element in the view with the latest `favoriteColor` value.
+1. 컴포넌트에서 `favoriteColor` 값이 업데이트됩니다.
+1. 변경 감지가 시작됩니다.
+1. 변경 감지 동안 `NgModel` 지시문 인스턴스의 입력 값 중 하나가 변경되었기 때문에 `ngOnChanges` 생명 주기 후크가 호출됩니다.
+1. `ngOnChanges()` 메서드는 내부 `FormControl` 인스턴스의 값 설정을 위한 비동기 작업을 큐에 추가합니다.
+1. 변경 감지가 완료됩니다.
+1. 다음 틱에서 `FormControl` 인스턴스 값을 설정하는 작업이 실행됩니다.
+1. `FormControl` 인스턴스는 `valueChanges` 옵저버블을 통해 최신 값을 내보냅니다.
+1. `valueChanges` 옵저버블의 모든 구독자는 새로운 값을 받습니다.
+1. 제어 값 접근자는 보기의 양식 입력 요소를 최신 `favoriteColor` 값으로 업데이트합니다.
 
 ```mermaid
 flowchart TB
     C(Component)
-    P(Property bound to NgModel)
-    C-->|Updates the property value|P
-    P-->|Triggers CD|CD1
+    P(NgModel에 바인딩된 속성)
+    C-->|속성 값을 업데이트함|P
+    P-->|CD를 트리거함|CD1
 
 
-    subgraph CD1 [First Change Detection]
+    subgraph CD1 [첫 번째 변경 감지]
         direction TB
         M(NgModel)
         FC(FormControl)
 
-        M-->|Asynchronously sets FormControl value|FC
+        M-->|비동기적으로 FormControl 값을 설정함|FC
     end
-    CD1-->|Async actions trigger a second round of Change Detection|CD2
+    CD1-->|비동기 작업이 두 번째 변경 감지를 트리거함|CD2
 
-    subgraph CD2 [Second Change Detection]
+    subgraph CD2 [두 번째 변경 감지]
         direction TB
         FC2(FormControl)
         O(Observers)
         CVA(ControlValueAccessor)
         I("&lt;input&gt;")
-        FC2-.->|Fires a 'valueChanges' event to observers|O
-        O-->|ControlValueAccessor receives valueChanges event|CVA
-        CVA-->|Sets the value in the control|I
+        FC2-.->|관찰자에게 'valueChanges' 이벤트를 발생시킴|O
+        O-->|ControlValueAccessor가 valueChanges 이벤트를 수신함|CVA
+        CVA-->|제어 값을 설정함|I
     end
 ```
 
-Note: `NgModel` triggers a second change detection to avoid `ExpressionChangedAfterItHasBeenChecked` errors, because the value change originates in an input binding.
+참고: `NgModel`은 입력 바인딩에서 값 변경이 발생하므로 `ExpressionChangedAfterItHasBeenChecked` 오류를 피하기 위해 두 번째 변경 감지를 트리거합니다.
 
-### Mutability of the data model
+### 데이터 모델의 가변성
 
-The change-tracking method plays a role in the efficiency of your application.
+변경 추적 방법은 애플리케이션의 효율성에 중요한 역할을 합니다.
 
-| Forms                 | Details |
+| 양식                 | 세부 정보 |
 |:---                   |:---     |
-| Reactive forms        | Keep the data model pure by providing it as an immutable data structure. Each time a change is triggered on the data model, the `FormControl` instance returns a new data model rather than updating the existing data model. This gives you the ability to track unique changes to the data model through the control's observable. Change detection is more efficient because it only needs to update on unique changes. Because data updates follow reactive patterns, you can integrate with observable operators to transform data. |
-| Template-driven forms | Rely on mutability with two-way data binding to update the data model in the component as changes are made in the template. Because there are no unique changes to track on the data model when using two-way data binding, change detection is less efficient at determining when updates are required.                                                                                                                                                                                                                                 |
+| 반응형 양식         | 데이터를 불변 데이터 구조로 제공하여 데이터 모델을 순수하게 유지합니다. 데이터 모델에서 변경이 촉발될 때마다 `FormControl` 인스턴스는 기존 데이터 모델을 업데이트하는 것이 아니라 새로운 데이터 모델을 반환합니다. 이를 통해 제어의 옵저버블을 통해 데이터 모델에 대한 고유한 변경 사항을 추적할 수 있습니다. 변경 감지는 고유한 변경 사항에서만 업데이트하면 되기 때문에 더 효율적입니다. 데이터 업데이트가 반응형 패턴을 따르기 때문에 옵저버블 연산자를 통합하여 데이터를 변환할 수 있습니다. |
+| 템플릿 기반 양식     | 변경 사항이 템플릿에서 발생할 때 컴포넌트 내에서 데이터 모델을 업데이트하기 위해 양방향 데이터 바인딩을 통해 가변성을 유지합니다. 양방향 데이터 바인딩을 사용할 때 데이터 모델에서 추적할 고유한 변경 사항이 없기 때문에 변경 감지는 업데이트가 필요한 시기를 결정하는 데 덜 효율적입니다.                                                                                                                                                                                                                                 |
 
-The difference is demonstrated in the previous examples that use the favorite-color input element.
+그 차이는 favorite-color 입력 요소를 사용하는 이전 예에서 보여집니다.
 
-* With reactive forms, the **`FormControl` instance** always returns a new value when the control's value is updated
-* With template-driven forms, the **favorite color property** is always modified to its new value
+* 반응형 양식에서는 **`FormControl` 인스턴스**가 제어 값이 업데이트될 때마다 항상 새 값을 반환합니다.
+* 템플릿 기반 양식에서는 **favorite color 속성**이 항상 새 값으로 수정됩니다.
 
-## Form validation
+## 양식 검증
 
-Validation is an integral part of managing any set of forms.
-Whether you're checking for required fields or querying an external API for an existing username, Angular provides a set of built-in validators as well as the ability to create custom validators.
+검증은 모든 양식을 관리하는 데 중요한 부분입니다.
+필수 필드를 확인하든 기존 사용자 이름을 위해 외부 API를 쿼리하든, Angular는 내장된 유효성 검사기 세트와 사용자 정의 유효성 검사기를 만들 수 있는 기능을 제공합니다.
 
-| Forms                 | Details |
+| 양식                 | 세부 정보 |
 |:---                   |:---     |
-| Reactive forms        | Define custom validators as **functions** that receive a control to validate                                 |
-| Template-driven forms | Tied to template **directives**, and must provide custom validator directives that wrap validation functions |
+| 반응형 양식         | 유효성 검사할 제어를 수신하는 **함수**로 사용자 정의 유효성 검사기를 정의합니다.                                 |
+| 템플릿 기반 양식     | 템플릿 **지시문**에 연결되어 있으며, 유효성 검사 함수를 래핑하는 사용자 정의 유효성 검사기 지시문을 제공해야 합니다. |
 
-For more information, see [Form Validation](guide/forms/form-validation#validating-input-in-reactive-forms).
+자세한 내용은 [양식 검증](guide/forms/form-validation#validating-input-in-reactive-forms)을 참고하세요.
 
-## Testing
+## 테스트
 
-Testing plays a large part in complex applications.
-A simpler testing strategy is useful when validating that your forms function correctly.
-Reactive forms and template-driven forms have different levels of reliance on rendering the UI to perform assertions based on form control and form field changes.
-The following examples demonstrate the process of testing forms with reactive and template-driven forms.
+테스트는 복잡한 애플리케이션에서 큰 비중을 차지합니다.
+양식이 올바르게 작동하는지 검증할 때 더 간단한 테스트 전략이 유용합니다.
+반응형 양식과 템플릿 기반 양식은 양식 제어 및 양식 필드 변경에 따라 UI를 렌더링할 의존성이 다릅니다.
+다음 예는 반응형 양식과 템플릿 기반 양식으로 양식을 테스트하는 과정을 시연합니다.
 
-### Testing reactive forms
+### 반응형 양식 테스트
 
-Reactive forms provide a relatively straightforward testing strategy because they provide synchronous access to the form and data models, and they can be tested without rendering the UI.
-In these tests, status and data are queried and manipulated through the control without interacting with the change detection cycle.
+반응형 양식은 양식 및 데이터 모델에 대한 동기 액세스를 제공하고 사용자 인터페이스를 렌더링하지 않고도 테스트할 수 있기 때문에 상대적으로 간단한 테스트 전략을 제공합니다.
+이 테스트에서는 변경 감지 주기와 상호 작용하지 않고 제어를 통해 상태와 데이터를 쿼리하고 조작합니다.
 
-The following tests use the favorite-color components from previous examples to verify the view-to-model and model-to-view data flows for a reactive form.
+다음 테스트는 이전 예에서 favorite-color 구성 요소를 사용하여 반응형 양식의 보기-모델 및 모델-보기 데이터 흐름을 확인합니다.
 
 <!--todo: make consistent with other topics -->
 
-#### Verifying view-to-model data flow
+#### 보기-모델 데이터 흐름 검증
 
-The first example performs the following steps to verify the view-to-model data flow.
+첫 번째 예는 보기-모델 데이터 흐름을 검증하기 위해 다음 단계를 수행합니다.
 
-1. Query the view for the form input element, and create a custom "input" event for the test.
-1. Set the new value for the input to *Red*, and dispatch the "input" event on the form input element.
-1. Assert that the component's `favoriteColorControl` value matches the value from the input.
+1. 양식 입력 요소에 대해 보기를 쿼리하고, 테스트를 위한 사용자 정의 "input" 이벤트를 생성합니다.
+1. 입력의 새 값을 *빨간색*으로 설정하고, 양식 입력 요소에서 "input" 이벤트를 발생시킵니다.
+1. 컴포넌트의 `favoriteColorControl` 값이 입력 값과 일치하는지 확인합니다.
 
 <docs-code header="Favorite color test - view to model" path="adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.spec.ts" visibleRegion="view-to-model"/>
 
-The next example performs the following steps to verify the model-to-view data flow.
+다음 예는 모델-보기 데이터 흐름을 검증하기 위해 다음 단계를 수행합니다.
 
-1. Use the `favoriteColorControl`, a `FormControl` instance, to set the new value.
-1. Query the view for the form input element.
-1. Assert that the new value set on the control matches the value in the input.
+1. `FormControl` 인스턴스인 `favoriteColorControl`을 사용하여 새 값을 설정합니다.
+1. 양식 입력 요소에 대해 보기를 쿼리합니다.
+1. 제어에 설정된 새 값이 입력의 값과 일치하는지 확인합니다.
 
 <docs-code header="Favorite color test - model to view" path="adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.spec.ts" visibleRegion="model-to-view"/>
 
-### Testing template-driven forms
+### 템플릿 기반 양식 테스트
 
-Writing tests with template-driven forms requires a detailed knowledge of the change detection process and an understanding of how directives run on each cycle to ensure that elements are queried, tested, or changed at the correct time.
+템플릿 기반 양식으로 테스트를 작성하려면 변경 감지 프로세스에 대한 상세한 지식과 지시문이 각 사이클에서 어떻게 작동하는지를 이해해야 하며, 요소가 올바른 시간에 쿼리되고 테스트되거나 변경된다는 점을 보장해야 합니다.
 
-The following tests use the favorite color components mentioned earlier to verify the data flows from view to model and model to view for a template-driven form.
+다음 테스트는 이전에 언급된 favorite color 구성 요소를 사용하여 템플릿 기반 양식의 보기에서 모델로 흐르는 데이터와 모델에서 보기로 흐르는 데이터를 검증합니다.
 
-The following test verifies the data flow from view to model.
+다음 테스트는 보기에서 모델로의 데이터 흐름을 검증합니다.
 
 <docs-code header="Favorite color test - view to model" path="adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.spec.ts" visibleRegion="view-to-model"/>
 
-Here are the steps performed in the view to model test.
+여기서는 보기에서 모델 테스트를 수행하는 단계입니다.
 
-1. Query the view for the form input element, and create a custom "input" event for the test.
-1. Set the new value for the input to *Red*, and dispatch the "input" event on the form input element.
-1. Run change detection through the test fixture.
-1. Assert that the component `favoriteColor` property value matches the value from the input.
+1. 양식 입력 요소에 대해 보기를 쿼리하고, 테스트를 위한 사용자 정의 "input" 이벤트를 생성합니다.
+1. 입력의 새 값을 *빨간색*으로 설정하고, 양식 입력 요소에서 "input" 이벤트를 발생시킵니다.
+1. 테스트 장치를 통해 변경 감지를 실행합니다.
+1. 컴포넌트의 `favoriteColor` 속성 값이 입력에서의 값과 일치하는지 확인합니다.
 
-The following test verifies the data flow from model to view.
+다음 테스트는 모델에서 보기로의 데이터 흐름을 검증합니다.
 
 <docs-code header="Favorite color test - model to view" path="adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.spec.ts" visibleRegion="model-to-view"/>
 
-Here are the steps performed in the model to view test.
+여기서는 모델에서 보기 테스트를 수행하는 단계입니다.
 
-1. Use the component instance to set the value of the `favoriteColor` property.
-1. Run change detection through the test fixture.
-1. Use the `tick()` method to simulate the passage of time within the `fakeAsync()` task.
-1. Query the view for the form input element.
-1. Assert that the input value matches the value of the `favoriteColor` property in the component instance.
+1. 컴포넌트 인스턴스를 사용하여 `favoriteColor` 속성의 값을 설정합니다.
+1. 테스트 장치를 통해 변경 감지를 실행합니다.
+1. `fakeAsync()` 작업 내에서 시간 경과를 시뮬레이션하기 위해 `tick()` 메서드를 사용합니다.
+1. 양식 입력 요소에 대해 보기를 쿼리합니다.
+1. 입력 값이 컴포넌트 인스턴스의 `favoriteColor` 속성 값과 일치하는지 확인합니다.
 
-## Next steps
+## 이후 단계
 
-To learn more about reactive forms, see the following guides:
+반응형 양식에 대해 더 알고 싶으시면 다음 가이드를 참조하세요:
 
 <docs-pill-row>
-  <docs-pill href="guide/forms/reactive-forms" title="Reactive forms"/>
-  <docs-pill href="guide/forms/form-validation#validating-input-in-reactive-forms" title="Form validation"/>
-  <docs-pill href="guide/forms/dynamic-forms" title="Dynamic forms"/>
+  <docs-pill href="guide/forms/reactive-forms" title="반응형 양식"/>
+  <docs-pill href="guide/forms/form-validation#validating-input-in-reactive-forms" title="양식 검증"/>
+  <docs-pill href="guide/forms/dynamic-forms" title="동적 양식"/>
 </docs-pill-row>
 
-To learn more about template-driven forms, see the following guides:
+템플릿 기반 양식에 대해 더 알고 싶으시면 다음 가이드를 참조하세요:
 
 <docs-pill-row>
-  <docs-pill href="guide/forms/template-driven-forms" title="Template Driven Forms tutorial" />
-  <docs-pill href="guide/forms/form-validation#validating-input-in-template-driven-forms" title="Form validation" />
-  <docs-pill href="api/forms/NgForm" title="NgForm directive API reference" />
-</docs-pill-row>
+  <docs-pill href="guide/forms/template-driven-forms" title="템플릿 기반 양식 튜토리얼" />
+  <docs-pill href="guide/forms/form-validation#validating-input-in-template-driven-forms" title="양식 검증" />
+  <docs-pill href="api/forms/NgForm" title="NgForm 지시문 API 참조" />
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/guide/forms/reactive-forms.md b/adev/src/content/guide/forms/reactive-forms.md
index 6452e3235d7d..4c64c3893bf7 100644
--- a/adev/src/content/guide/forms/reactive-forms.md
+++ b/adev/src/content/guide/forms/reactive-forms.md
@@ -1,419 +1,389 @@
-# Reactive forms
+# 반응형 폼
 
-Reactive forms provide a model-driven approach to handling form inputs whose values change over time.
-This guide shows you how to create and update a basic form control, progress to using multiple controls in a group, validate form values, and create dynamic forms where you can add or remove controls at run time.
+반응형 폼은 시간이 지나면서 값이 변경되는 폼 입력을 처리하는 데 모델 기반 접근 방식을 제공합니다. 이 가이드에서는 기본 폼 제어를 생성하고 업데이트하는 방법, 그룹 내에서 여러 제어를 사용하고, 폼 값을 검증하며, 런타임에 제어를 추가하거나 제거할 수 있는 동적 폼을 만드는 방법을 보여줍니다.
 
-## Overview of reactive forms
+## 반응형 폼 개요
 
-Reactive forms use an explicit and immutable approach to managing the state of a form at a given point in time.
-Each change to the form state returns a new state, which maintains the integrity of the model between changes.
-Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously.
+반응형 폼은 주어진 시점에서 폼의 상태를 관리하는 명시적이고 불변의 접근 방식을 사용합니다. 폼 상태의 각 변경은 새로운 상태를 반환하며, 이는 변경 간 모델의 무결성을 유지합니다. 반응형 폼은 관찰 가능한 스트림을 기반으로 구축되며, 여기서는 폼 입력 및 값이 스트림의 입력 값으로 제공되어 동기식으로 접근할 수 있습니다.
 
-Reactive forms also provide a straightforward path to testing because you are assured that your data is consistent and predictable when requested.
-Any consumers of the streams have access to manipulate that data safely.
+반응형 폼은 데이터를 요청할 때 데이터의 일관성과 예측 가능성을 보장하므로 테스트에 대한 간단한 경로도 제공합니다. 스트림의 소비자는 해당 데이터를 안전하게 조작할 수 있는 접근 권한을 갖습니다.
 
-Reactive forms differ from [template-driven forms](guide/forms/template-driven-forms) in distinct ways.
-Reactive forms provide synchronous access to the data model, immutability with observable operators, and change tracking through observable streams.
+반응형 폼은 [템플릿 기반 폼](guide/forms/template-driven-forms)과 여러 가지 점에서 다릅니다. 반응형 폼은 데이터 모델에 대한 동기식 접근, 관찰 가능한 연산자를 통한 불변성, 관찰 가능한 스트림을 통한 변경 추적을 제공합니다.
 
-Template-driven forms let direct access modify data in your template, but are less explicit than reactive forms because they rely on directives embedded in the template, along with mutable data to track changes asynchronously.
-See the [Forms Overview](guide/forms) for detailed comparisons between the two paradigms.
+템플릿 기반 폼은 템플릿에서 직접 데이터에 대한 접근을 허용하지만 템플릿에 내장된 지시문과 비가변 데이터를 통해 변경을 비동기적으로 추적하기 때문에 반응형 폼보다 덜 명시적입니다. 두 패러다임의 차이를 자세히 보려면 [폼 개요](guide/forms)를 참조하십시오.
 
-## Adding a basic form control
+## 기본 폼 제어 추가하기
 
-There are three steps to using form controls.
+폼 제어를 사용하려면 세 가지 단계를 따릅니다.
 
-1. Register the reactive forms module in your application.
-    This module declares the reactive-form directives that you need to use reactive forms.
+1. 애플리케이션에 반응형 폼 모듈을 등록합니다. 이 모듈은 반응형 폼을 사용하기 위해 필요한 반응형 폼 지시문을 선언합니다.
+2. 새 컴포넌트를 생성하고 새로운 `FormControl`을 인스턴스화합니다.
+3. 템플릿에서 `FormControl`을 등록합니다.
 
-1. Generate a new component and instantiate a new `FormControl`.
-1. Register the `FormControl` in the template.
+그런 다음 컴포넌트를 템플릿에 추가하여 폼을 표시할 수 있습니다.
 
-You can then display the form by adding the component to the template.
-
-The following examples show how to add a single form control.
-In the example, the user enters their name into an input field, captures that input value, and displays the current value of the form control element.
+다음 예제에서는 단일 폼 제어를 추가하는 방법을 보여줍니다. 이 예제에서는 사용자가 입력 필드에 자신의 이름을 입력하고 해당 입력 값을 캡처하여 폼 제어 요소의 현재 값을 표시합니다.
 
 <docs-workflow>
 
-<docs-step title="Import the ReactiveFormsModule">
-To use reactive form controls, import `ReactiveFormsModule` from the `@angular/forms` package and add it to your NgModule's `imports` array.
+<docs-step title="ReactiveFormsModule 가져오기">
+반응형 폼 제어를 사용하려면 `@angular/forms` 패키지에서 `ReactiveFormsModule`을 가져오고 NgModule의 `imports` 배열에 추가하십시오.
 
-<docs-code header="src/app/app.module.ts (excerpt)" path="adev/src/content/examples/reactive-forms/src/app/app.module.ts" visibleRegion="imports" />
+<docs-code header="src/app/app.module.ts (발췌)" path="adev/src/content/examples/reactive-forms/src/app/app.module.ts" visibleRegion="imports" />
 </docs-step>
 
-<docs-step title="Generate a new component with a FormControl">
-Use the CLI command `ng generate component` to generate a component in your project to host the control.
+<docs-step title="FormControl로 새 컴포넌트 생성하기">
+CLI 명령 `ng generate component`를 사용하여 제어를 호스팅할 컴포넌트를 생성하십시오.
 
 <docs-code header="src/app/name-editor/name-editor.component.ts" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="create-control"/>
 
-Use the constructor of `FormControl` to set its initial value, which in this case is an empty string. By creating these controls in your component class, you get immediate access to listen for, update, and validate the state of the form input.
+`FormControl`의 생성자를 사용하여 초기 값을 설정하세요. 이 경우 빈 문자열입니다. 컴포넌트 클래스에 이러한 제어를 생성함으로써 폼 입력 상태를 듣고 업데이트하며 검증하는 즉각적인 접근을 얻습니다.
 </docs-step>
 
-<docs-step title="Register the control in the template">
-After you create the control in the component class, you must associate it with a form control element in the template. Update the template with the form control using the `formControl` binding provided by `FormControlDirective`, which is also included in the `ReactiveFormsModule`.
+<docs-step title="템플릿에 제어 등록하기">
+컴포넌트 클래스에서 제어를 생성한 후 템플릿의 폼 제어 요소와 연결해야 합니다. `ReactiveFormsModule`에 포함된 `FormControlDirective`에서 제공하는 `formControl` 바인딩을 사용하여 템플릿을 폼 제어로 업데이트합니다.
 
 <docs-code header="src/app/name-editor/name-editor.component.html" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="control-binding" />
 
-Using the template binding syntax, the form control is now registered to the `name` input element in the template. The form control and DOM element communicate with each other: the view reflects changes in the model, and the model reflects changes in the view.
+템플릿 바인딩 구문을 사용하여 폼 제어가 이제 템플릿의 `name` 입력 요소에 등록됩니다. 폼 제어와 DOM 요소는 서로 통신합니다: 뷰는 모델의 변경 사항을 반영하고, 모델은 뷰의 변경 사항을 반영합니다.
 </docs-step>
 
-<docs-step title="Display the component">
-The `FormControl` assigned to the `name` property is displayed when the `<app-name-editor>` component is added to a template.
+<docs-step title="컴포넌트 표시하기">
+`name` 속성에 할당된 `FormControl`은 `<app-name-editor>` 컴포넌트가 템플릿에 추가될 때 표시됩니다.
 
-<docs-code header="src/app/app.component.html (name editor)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" visibleRegion="app-name-editor"/>
+<docs-code header="src/app/app.component.html (이름 편집기)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" visibleRegion="app-name-editor"/>
 </docs-step>
 </docs-workflow>
 
-### Displaying a form control value
+### 폼 제어 값 표시하기
 
-You can display the value in the following ways.
+다음을 통해 값을 표시할 수 있습니다.
 
-* Through the `valueChanges` observable where you can listen for changes in the form's value in the template using `AsyncPipe` or in the component class using the `subscribe()` method
-* With the `value` property, which gives you a snapshot of the current value
+* 템플릿에서 `AsyncPipe`를 사용하거나 컴포넌트 클래스에서 `subscribe()` 메서드를 사용하여 폼의 값이 변경될 때를 들을 수 있는 `valueChanges` 관찰 가능성을 통해
+* 현재 값을 스냅샷으로 제공하는 `value` 속성으로
 
-The following example shows you how to display the current value using interpolation in the template.
+다음 예제는 템플릿에서 보간법을 사용하여 현재 값을 표시하는 방법을 보여줍니다.
 
-<docs-code header="src/app/name-editor/name-editor.component.html (control value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="display-value"/>
+<docs-code header="src/app/name-editor/name-editor.component.html (제어 값)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="display-value"/>
 
-The displayed value changes as you update the form control element.
+표시된 값은 폼 제어 요소를 업데이트함에 따라 변경됩니다.
 
-Reactive forms provide access to information about a given control through properties and methods provided with each instance.
-These properties and methods of the underlying [AbstractControl](api/forms/AbstractControl "API reference") class are used to control form state and determine when to display messages when handling [input validation](#validating-form-input "Learn more about validating form input").
+반응형 폼은 각 인스턴스와 함께 제공되는 속성과 메서드를 통해 특정 제어에 대한 정보를 접근할 수 있습니다. 이러한 속성과 메서드는 기본 [AbstractControl](api/forms/AbstractControl "API 참조") 클래스로 폼 상태를 제어하고 [입력 검증](#validating-form-input "입력 검증에 대해 자세히 알아보기") 처리 시 메시지를 표시하는 시점을 결정하는 데 사용됩니다.
 
-Read about other `FormControl` properties and methods in the [API Reference](api/forms/FormControl "Detailed syntax reference").
+`FormControl` 속성과 메서드에 대한 자세한 내용은 [API 참조](api/forms/FormControl "상세 구문 참조")를 참조하세요.
 
-### Replacing a form control value
+### 폼 제어 값 바꾸기
 
-Reactive forms have methods to change a control's value programmatically, which gives you the flexibility to update the value without user interaction.
-A form control instance provides a `setValue()` method that updates the value of the form control and validates the structure of the value provided against the control's structure.
-For example, when retrieving form data from a backend API or service, use the `setValue()` method to update the control to its new value, replacing the old value entirely.
+반응형 폼은 제어의 값을 프로그래밍 방식으로 변경할 수 있는 메서드를 제공하여 사용자 상호 작용 없이 값을 업데이트할 수 있는 유연성을 제공합니다. 폼 제어 인스턴스는 제어의 값을 업데이트하고 제공된 값의 구조를 제어의 구조와 검증하는 `setValue()` 메서드를 제공합니다. 예를 들어, 백엔드 API 또는 서비스에서 폼 데이터를 가져올 때 `setValue()` 메서드를 사용하여 제어를 새 값으로 업데이트하고 이전 값을 완전히 대체합니다.
 
-The following example adds a method to the component class to update the value of the control to *Nancy* using the `setValue()` method.
+다음 예제는 `setValue()` 메서드를 사용하여 컴포넌트 클래스에 제어 값을 *Nancy*로 업데이트하는 메서드를 추가합니다.
 
-<docs-code header="src/app/name-editor/name-editor.component.ts (update value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="update-value"/>
+<docs-code header="src/app/name-editor/name-editor.component.ts (값 업데이트)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="update-value"/>
 
-Update the template with a button to simulate a name update.
-When you click the **Update Name** button, the value entered in the form control element is reflected as its current value.
+템플릿에 이름 업데이트를 시뮬레이션하는 버튼을 추가합니다. **이름 업데이트** 버튼을 클릭하면 폼 제어 요소에 입력된 값이 현재 값으로 반영됩니다.
 
-<docs-code header="src/app/name-editor/name-editor.component.html (update value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="update-value"/>
+<docs-code header="src/app/name-editor/name-editor.component.html (값 업데이트)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="update-value"/>
 
-The form model is the source of truth for the control, so when you click the button, the value of the input is changed within the component class, overriding its current value.
+폼 모델은 제어의 진실한 원천이므로 버튼을 클릭하면 입력의 값이 컴포넌트 클래스 내에서 변경되어 현재 값을 재정의합니다.
 
-HELPFUL: In this example, you're using a single control.
-When using the `setValue()` method with a [form group](#grouping-form-controls) or [form array](#creating-dynamic-forms) instance, the value needs to match the structure of the group or array.
+HELPFUL: 이 예제에서는 단일 제어를 사용하고 있습니다. [폼 그룹](#grouping-form-controls) 또는 [폼 배열](#creating-dynamic-forms) 인스턴스를 사용하여 `setValue()` 메서드를 사용할 때 값은 그룹 또는 배열 구조와 일치해야 합니다.
 
-## Grouping form controls
+## 폼 제어 그룹화
 
-Forms typically contain several related controls.
-Reactive forms provide two ways of grouping multiple related controls into a single input form.
+폼에는 일반적으로 여러 관련 제어가 포함됩니다. 반응형 폼은 여러 관련 제어를 단일 입력 폼으로 그룹화하는 두 가지 방법을 제공합니다.
 
-| Form groups | Details |
+| 폼 그룹 | 세부 정보 |
 |:---         |:---     |
-| Form group  | Defines a form with a fixed set of controls that you can manage together. Form group basics are discussed in this section. You can also [nest form groups](#creating-nested-form-groups "See more about nesting groups") to create more complex forms.      |
-| Form array  | Defines a dynamic form, where you can add and remove controls at run time. You can also nest form arrays to create more complex forms. For more about this option, see [Creating dynamic forms](#creating-dynamic-forms). |
+| 폼 그룹  | 함께 관리할 수 있는 고정된 제어 세트를 정의합니다. 폼 그룹의 기본 사항은 이 섹션에서 논의됩니다. 또한 [중첩된 폼 그룹 생성하기](#creating-nested-form-groups "중첩된 그룹에 대해 자세히 알아보기")와 같은 더 복잡한 폼을 만들기 위해 폼 그룹을 중첩할 수 있습니다.      |
+| 폼 배열  | 런타임에 제어를 추가 및 제거할 수 있는 동적 폼을 정의합니다. 더 복잡한 폼을 만들기 위해 폼 배열도 중첩할 수 있습니다. 이 옵션에 대한 자세한 내용은 [동적 폼 만들기](#creating-dynamic-forms)를 참조하세요. |
 
-Just as a form control instance gives you control over a single input field, a form group instance tracks the form state of a group of form control instances \(for example, a form\).
-Each control in a form group instance is tracked by name when creating the form group.
-The following example shows how to manage multiple form control instances in a single group.
+폼 제어 인스턴스는 단일 입력 필드에 대한 제어를 제공하는 것처럼, 폼 그룹 인스턴스는 폼 제어 인스턴스 그룹의 폼 상태를 추적합니다(예: 폼). 폼 그룹 인스턴스의 각 제어는 폼 그룹을 생성할 때 이름으로 추적됩니다. 다음 예제는 단일 그룹에서 여러 폼 제어 인스턴스를 관리하는 방법을 보여줍니다.
 
-Generate a `ProfileEditor` component and import the `FormGroup` and `FormControl` classes from the `@angular/forms` package.
+`ProfileEditor` 컴포넌트를 생성하고 `@angular/forms` 패키지에서 `FormGroup` 및 `FormControl` 클래스를 가져옵니다.
 
 <docs-code language="shell">
 ng generate component ProfileEditor
 </docs-code>
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (imports)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="imports"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.ts (가져오기)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="imports"/>
 
-To add a form group to this component, take the following steps.
+이 컴포넌트에 폼 그룹을 추가하려면 다음 단계를 따릅니다.
 
-1. Create a `FormGroup` instance.
-1. Associate the `FormGroup` model and view.
-1. Save the form data.
+1. `FormGroup` 인스턴스를 생성합니다.
+2. `FormGroup` 모델과 뷰를 연결합니다.
+3. 폼 데이터를 저장합니다.
 
 <docs-workflow>
 
-<docs-step title="Create a FormGroup instance">
-Create a property in the component class named `profileForm` and set the property to a new form group instance. To initialize the form group, provide the constructor with an object of named keys mapped to their control.
+<docs-step title="FormGroup 인스턴스 생성하기">
+컴포넌트 클래스에 `profileForm`이라는 속성을 생성하고 이를 새로운 폼 그룹 인스턴스로 설정합니다. 폼 그룹을 초기화하려면 생성자에 제어에 매핑된 명명 키를 포함하는 개체를 제공합니다.
 
-For the profile form, add two form control instances with the names `firstName` and `lastName`
+프로필 폼에 `firstName` 및 `lastName`이라는 이름을 가진 두 개의 폼 제어 인스턴스를 추가합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="formgroup"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.ts (폼 그룹)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="formgroup"/>
 
-The individual form controls are now collected within a group. A `FormGroup` instance provides its model value as an object reduced from the values of each control in the group. A form group instance has the same properties (such as `value` and `untouched`) and methods (such as `setValue()`) as a form control instance.
+이제 개별 폼 제어가 그룹 내에서 수집됩니다. `FormGroup` 인스턴스는 그룹 내 각 제어의 값을 줄여서 얻은 객체로서 모델 값을 제공합니다. 폼 그룹 인스턴스는 폼 제어 인스턴스와 동일한 속성(`value` 및 `untouched` 등)과 메서드(`setValue()` 등)를 가집니다.
 </docs-step>
 
-<docs-step title="Associate the FormGroup model and view">
-A form group tracks the status and changes for each of its controls, so if one of the controls changes, the parent control also emits a new status or value change. The model for the group is maintained from its members. After you define the model, you must update the template to reflect the model in the view.
+<docs-step title="FormGroup 모델과 뷰 연결하기">
+폼 그룹은 각 제어의 상태 및 변경을 추적하므로 제어 중 하나가 변경되면 상위 제어도 새로운 상태 또는 값 변경을 방출합니다. 그룹의 모델은 구성원으로부터 유지됩니다. 모델을 정의한 후, 이는 뷰에서 모델을 반영하도록 템플릿을 업데이트해야 합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (template form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="formgroup"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.html (템플릿 폼 그룹)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="formgroup"/>
 
-Just as a form group contains a group of controls, the *profileForm* `FormGroup` is bound to the `form` element with the `FormGroup` directive, creating a communication layer between the model and the form containing the inputs.  The `formControlName` input provided by the `FormControlName` directive binds each individual input to the form control defined in `FormGroup`. The form controls communicate with their respective elements. They also communicate changes to the form group instance, which provides the source of truth for the model value.
+폼 그룹은 제어 그룹을 포함하는 것처럼, *profileForm* `FormGroup`은 `FormGroup` 지시문을 통해 `form` 요소에 바인딩되어 모델과 입력을 포함하는 폼 간의 통신 계층을 생성합니다. `formControlName` 입력은 `FormControlName` 지시문에 의해 제공되며 각 개별 입력을 `FormGroup`에 정의된 폼 제어에 바인딩합니다. 폼 제어는 각 요소와 통신하며 또한 폼 그룹 인스턴스에 변화를 전달하여 모델 값의 진실한 원천을 제공합니다.
 </docs-step>
 
-<docs-step title="Save form data">
-The `ProfileEditor` component accepts input from the user, but in a real scenario you want to capture the form value and make it available for further processing outside the component. The `FormGroup` directive listens for the `submit` event emitted by the `form` element and emits an `ngSubmit` event that you can bind to a callback function. Add an `ngSubmit` event listener to the `form` tag with the `onSubmit()` callback method.
+<docs-step title="폼 데이터 저장하기">
+`ProfileEditor` 컴포넌트는 사용자로부터 입력을 받지만 실제 시나리오에서는 폼 값을 캡처하고 이를 컴포넌트 외부의 추가 처리에 사용할 수 있도록 해야 합니다. `FormGroup` 지시문은 `form` 요소에서 방출되는 `submit` 이벤트를 듣고 이를 콜백 함수에 바인딩할 수 있는 `ngSubmit` 이벤트를 방출합니다. `form` 태그에 `onSubmit()` 콜백 메서드로 `ngSubmit` 이벤트 리스너를 추가합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (submit event)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="ng-submit"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.html (제출 이벤트)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="ng-submit"/>
 
-The `onSubmit()` method in the `ProfileEditor` component captures the current value of `profileForm`. Use `EventEmitter` to keep the form encapsulated and to provide the form value outside the component. The following example uses `console.warn` to log a message to the browser console.
+`ProfileEditor` 컴포넌트의 `onSubmit()` 메서드는 현재 `profileForm`의 값을 캡처합니다. `EventEmitter`를 사용하여 폼을 캡슐화하고 폼 값을 컴포넌트 외부로 제공할 수 있습니다. 다음 예제는 `console.warn`을 사용하여 브라우저 콘솔에 메시지를 기록합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (submit method)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="on-submit"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.ts (제출 메서드)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="on-submit"/>
 
-The `submit` event is emitted by the `form` tag using the built-in DOM event. You trigger the event by clicking a button with `submit` type. This lets the user press the **Enter** key to submit the completed form.
+`submit` 이벤트는 기본 DOM 이벤트를 사용하여 `form` 태그에서 방출됩니다. `submit` 유형의 버튼을 클릭하여 이벤트를 트리거합니다. 이를 통해 사용자가 **Enter** 키를 눌러 완료된 폼을 제출할 수 있습니다.
 
-Use a `button` element to add a button to the bottom of the form to trigger the form submission.
+폼 제출을 트리거하기 위해 폼 하단에 버튼을 추가하십시오.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (submit button)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="submit-button"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.html (제출 버튼)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="submit-button"/>
 
-The button in the preceding snippet also has a `disabled` binding attached to it to disable the button when `profileForm` is invalid. You aren't performing any validation yet, so the button is always enabled. Basic form validation is covered in the [Validating form input](#validating-form-input) section.
+앞의 코드 조각에서 버튼은 `profileForm`이 유효하지 않을 때 버튼을 비활성화하는 `disabled` 바인딩이 추가되어 있습니다. 아직 유효성을 검사하고 있지 않으므로 버튼은 항상 활성화되어 있습니다. 기본 폼 유효성 검사는 [폼 입력 검증](#validating-form-input) 섹션에서 다루고 있습니다.
 </docs-step>
 
-<docs-step title="Display the component">
-To display the `ProfileEditor` component that contains the form, add it to a component template.
+<docs-step title="컴포넌트 표시하기">
+폼을 포함하는 `ProfileEditor` 컴포넌트를 표시하기 위해 이를 컴포넌트 템플릿에 추가합니다.
 
-<docs-code header="src/app/app.component.html (profile editor)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" visibleRegion="app-profile-editor"/>
+<docs-code header="src/app/app.component.html (프로필 편집기)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" visibleRegion="app-profile-editor"/>
 
-`ProfileEditor` lets you manage the form control instances for the `firstName` and `lastName` controls within the form group instance.
+`ProfileEditor`는 폼 그룹 인스턴스 내에서 `firstName` 및 `lastName` 제어에 대한 폼 제어 인스턴스를 관리할 수 있도록 합니다.
 
-### Creating nested form groups
+### 중첩 폼 그룹 생성하기
 
-Form groups can accept both individual form control instances and other form group instances as children.
-This makes composing complex form models easier to maintain and logically group together.
+폼 그룹은 개별 폼 제어 인스턴스와 다른 폼 그룹 인스턴스를 자식으로 수용할 수 있습니다. 이를 통해 복잡한 폼 모델을 보다 쉽게 유지 관리하고 논리적으로 그룹화할 수 있습니다.
 
-When building complex forms, managing the different areas of information is easier in smaller sections.
-Using a nested form group instance lets you break large forms groups into smaller, more manageable ones.
+복잡한 폼을 구축할 때 다양한 정보 영역을 더 작은 섹션으로 관리하는 것이 더 쉽습니다. 중첩된 폼 그룹 인스턴스를 사용하면 큰 폼 그룹을 더 작고 관리 가능한 그룹으로 나눌 수 있습니다.
 
-To make more complex forms, use the following steps.
+더 복잡한 폼을 만들려면 다음 단계를 따릅니다.
 
-1. Create a nested group.
-1. Group the nested form in the template.
+1. 중첩 그룹을 생성합니다.
+2. 템플릿에서 중첩 폼 그룹을 그룹화합니다.
 
-Some types of information naturally fall into the same group.
-A name and address are typical examples of such nested groups, and are used in the following examples.
+정보의 일부 유형은 자연스럽게 동일한 그룹에 포함됩니다. 이름과 주소는 전형적인 중첩 그룹의 예이며 다음 예제에서 사용됩니다.
 
 <docs-workflow>
-<docs-step title="Create a nested group">
-To create a nested group in `profileForm`, add a nested `address` element to the form group instance.
+<docs-step title="중첩 그룹 생성하기">
+`profileForm`에서 중첩 그룹을 생성하려면 폼 그룹 인스턴스에 중첩된 `address` 요소를 추가합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (nested form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="nested-formgroup"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.ts (중첩 폼 그룹)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="nested-formgroup"/>
 
-In this example, `address group` combines the current `firstName` and `lastName` controls with the new `street`, `city`, `state`, and `zip` controls. Even though the `address` element in the form group is a child of the overall `profileForm` element in the form group, the same rules apply with value and status changes. Changes in status and value from the nested form group propagate to the parent form group, maintaining consistency with the overall model.
+이 예제에서 `address group`은 현재 `firstName` 및 `lastName` 제어를 새로운 `street`, `city`, `state` 및 `zip` 제어와 결합합니다. 폼 그룹의 `address` 요소는 전체 `profileForm` 요소의 자식이지만, 값과 상태 변경에 대한 동일한 규칙이 적용됩니다. 중첩 폼 그룹의 상태 및 값 변경 사항은 부모 폼 그룹으로 전파되어 전체 모델과 일관성을 유지합니다.
 </docs-step>
 
-<docs-step title="Group the nested form in the template">
-After you update the model in the component class, update the template to connect the form group instance and its input elements. Add the `address` form group containing the `street`, `city`, `state`, and `zip` fields to the `ProfileEditor` template.
+<docs-step title="템플릿에서 중첩 폼 그룹 그룹화하기">
+컴포넌트 클래스에서 모델을 업데이트한 후 템플릿을 업데이트하여 폼 그룹 인스턴스 및 입력 요소를 연결합니다. `street`, `city`, `state` 및 `zip` 필드를 포함하는 `address` 폼 그룹을 `ProfileEditor` 템플릿에 추가합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (template nested form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="formgroupname"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.html (템플릿 중첩 폼 그룹)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="formgroupname"/>
 
-The `ProfileEditor` form is displayed as one group, but the model is broken down further to represent the logical grouping areas.
+`ProfileEditor` 폼은 하나의 그룹으로 표시되지만, 모델은 논리적 그룹 영역을 나타내기 위해 더 세분화됩니다.
 
-Display the value for the form group instance in the component template using the `value` property and `JsonPipe`.
+폼 그룹 인스턴스의 값을 컴포넌트 템플릿에서 `value` 속성과 `JsonPipe`를 사용하여 표시합니다.
 </docs-step>
 </docs-workflow>
 
-### Updating parts of the data model
+### 데이터 모델의 일부 업데이트하기
 
-When updating the value for a form group instance that contains multiple controls, you might only want to update parts of the model.
-This section covers how to update specific parts of a form control data model.
+여러 제어가 포함된 폼 그룹 인스턴스의 값을 업데이트할 때 모델의 일부만 업데이트하려고 할 수 있습니다. 이 섹션에서는 특정 폼 제어 데이터 모델의 일부를 업데이트하는 방법을 다룹니다.
 
-There are two ways to update the model value:
+모델 값을 업데이트하는 방법은 두 가지가 있습니다:
 
-| Methods        | Details |
+| 메서드        | 세부 정보 |
 |:---            |:---     |
-| `setValue()`   | Set a new value for an individual control. The `setValue()` method strictly adheres to the structure of the form group and replaces the entire value for the control. |
-| `patchValue()` | Replace any properties defined in the object that have changed in the form model.                                                                                     |
+| `setValue()`   | 개별 제어에 대한 새 값을 설정합니다. `setValue()` 메서드는 폼 그룹의 구조를 엄격히 준수하며, 제어의 전체 값을 대체합니다. |
+| `patchValue()` | 폼 모델에서 변경된 객체의 속성만 교체합니다.                                                                                     |
 
-The strict checks of the `setValue()` method help catch nesting errors in complex forms, while `patchValue()` fails silently on those errors.
+`setValue()` 메서드의 엄격한 검사는 복잡한 폼에서 중첩 오류를 포착하는 데 도움이 되며, `patchValue()`는 이러한 오류에 대해 조용히 실패합니다.
 
-In `ProfileEditorComponent`, use the `updateProfile` method with the following example to update the first name and street address for the user.
+`ProfileEditorComponent`에서 다음 예제를 사용하여 사용자에 대한 이름과 거리 주소를 업데이트하는 `updateProfile` 메서드를 사용하세요.
 
 <docs-code header="src/app/profile-editor/profile-editor.component.ts (patch value)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="patch-value"/>
 
-Simulate an update by adding a button to the template to update the user profile on demand.
+필요에 따라 사용자 프로필을 업데이트하는 버튼을 템플릿에 추가하여 업데이트를 시뮬레이션합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (update value)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="patch-value"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.html (값 업데이트)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="patch-value"/>
 
-When a user clicks the button, the `profileForm` model is updated with new values for `firstName` and `street`. Notice that `street` is provided in an object inside the `address` property.
-This is necessary because the `patchValue()` method applies the update against the model structure.
-`PatchValue()` only updates properties that the form model defines.
+사용자가 버튼을 클릭하면 `profileForm` 모델이 `firstName` 및 `street`의 새 값으로 업데이트됩니다. `street`는 `address` 속성 내 객체에 제공됩니다. 이는 `patchValue()` 메서드가 모델 구조에 대해 업데이트를 적용하기 때문에 필요합니다. `PatchValue()`는 폼 모델이 정의한 속성만 업데이트합니다.
 
-## Using the FormBuilder service to generate controls
+## FormBuilder 서비스를 사용하여 제어 생성하기
 
-Creating form control instances manually can become repetitive when dealing with multiple forms.
-The `FormBuilder` service provides convenient methods for generating controls.
+여러 폼을 처리할 때 수동으로 폼 제어 인스턴스를 생성하는 것은 반복적일 수 있습니다. `FormBuilder` 서비스는 제어 생성을 위한 편리한 메서드를 제공합니다.
 
-Use the following steps to take advantage of this service.
+이 서비스를 활용하기 위해 다음 단계를 진행합니다.
 
-1. Import the `FormBuilder` class.
-1. Inject the `FormBuilder` service.
-1. Generate the form contents.
+1. `FormBuilder` 클래스를 가져옵니다.
+2. `FormBuilder` 서비스를 주입합니다.
+3. 폼 내용을 생성합니다.
 
-The following examples show how to refactor the `ProfileEditor` component to use the form builder service to create form control and form group instances.
+다음 예제에서는 폼 빌더 서비스를 사용하여 `ProfileEditor` 컴포넌트를 리팩토링하여 폼 제어 및 폼 그룹 인스턴스를 생성하는 방법을 보여줍니다.
 
 <docs-workflow>
-<docs-step title="Import the FormBuilder class">
-Import the `FormBuilder` class from the `@angular/forms` package.
+<docs-step title="FormBuilder 클래스 가져오기">
+`@angular/forms` 패키지에서 `FormBuilder` 클래스를 가져오세요.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-builder-imports"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.ts (가져오기)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-builder-imports"/>
 
 </docs-step>
 
-<docs-step title="Inject the FormBuilder service">
-The `FormBuilder` service is an injectable provider from the reactive forms module. Use the `inject()` function to inject this dependency in your component.
+<docs-step title="FormBuilder 서비스 주입하기">
+`FormBuilder` 서비스는 반응형 폼 모듈의 주입 가능한 프로바이더입니다. `inject()` 함수를 사용하여 이 종속성을 컴포넌트에 주입합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (constructor)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="inject-form-builder"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.ts (생성자)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="inject-form-builder"/>
 
 </docs-step>
-<docs-step title="Generate form controls">
-The `FormBuilder` service has three methods: `control()`, `group()`, and `array()`. These are factory methods for generating instances in your component classes including form controls, form groups, and form arrays. Use the `group` method to create the `profileForm` controls.
+<docs-step title="폼 제어 생성하기">
+`FormBuilder` 서비스에는 `control()`, `group()`, `array()`의 세 가지 방법이 있습니다. 이들은 컴포넌트 클래스에서 폼 제어, 폼 그룹 및 폼 배열 인스턴스를 생성하기 위한 팩토리 메서드입니다. `group` 메서드를 사용하여 `profileForm` 제어를 생성합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (form builder)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-builder"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.ts (폼 빌더)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-builder"/>
 
-In the preceding example, you use the `group()` method with the same object to define the properties in the model. The value for each control name is an array containing the initial value as the first item in the array.
+앞의 예제에서는 동일한 개체를 `group()` 메서드와 함께 사용하여 모델의 속성을 정의합니다. 각 제어 이름에 대한 값은 배열의 첫 번째 항목으로서 초기 값을 포함하는 배열입니다.
 
-Tip: You can define the control with just the initial value, but if your controls need sync or async validation, add sync and async validators as the second and third items in the array. Compare using the form builder to creating the instances manually.
+팁: 초기 값만으로 제어를 정의할 수 있지만, 제어에 동기 또는 비동기 유효성이 필요하다면 배열의 두 번째 및 세 번째 항목으로 동기 및 비동기 검증기를 추가하세요. 폼 빌더를 사용하여 인스턴스를 수동으로 생성하는 것과 비교하십시오.
 
   <docs-code-multifile>
-    <docs-code header="src/app/profile-editor/profile-editor.component.ts (instances)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="formgroup-compare"/>
-    <docs-code header="src/app/profile-editor/profile-editor.component.ts (form builder)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="formgroup-compare"/>
+    <docs-code header="src/app/profile-editor/profile-editor.component.ts (인스턴스)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="formgroup-compare"/>
+    <docs-code header="src/app/profile-editor/profile-editor.component.ts (폼 빌더)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="formgroup-compare"/>
   </docs-code-multifile>
 </docs-step>
 
 </docs-workflow>
 
-## Validating form input
+## 폼 입력 검증하기
 
-*Form validation* is used to ensure that user input is complete and correct.
-This section covers adding a single validator to a form control and displaying the overall form status.
-Form validation is covered more extensively in the [Form Validation](guide/forms/form-validation) guide.
+*폼 유효성 검증*은 사용자 입력이 완료되고 올바른지 확인하는 데 사용됩니다. 이 섹션에서는 폼 제어에 단일 검증기를 추가하고 전체 폼 상태를 표시하는 방법을 다룹니다. 폼 유효성 검증은 [폼 유효성 검증](guide/forms/form-validation) 가이드에서 더 자세히 다루어집니다.
 
-Use the following steps to add form validation.
+폼 유효성 검증을 추가하려면 다음 단계를 진행합니다.
 
-1. Import a validator function in your form component.
-1. Add the validator to the field in the form.
-1. Add logic to handle the validation status.
+1. 폼 구성 요소에서 검증기 함수를 가져옵니다.
+2. 필드에 검증기를 추가합니다.
+3. 검증 상태를 처리할 논리를 추가합니다.
 
-The most common validation is making a field required.
-The following example shows how to add a required validation to the `firstName` control and display the result of validation.
+가장 일반적인 유효성 검증은 필드를 필수로 만드는 것입니다. 다음 예제에서는 `firstName` 제어에 필수 유효성 검사를 추가하고 유효성 검사 결과를 표시하는 방법을 보여줍니다.
 
 <docs-workflow>
-<docs-step title="Import a validator function">
-Reactive forms include a set of validator functions for common use cases. These functions receive a control to validate against and return an error object or a null value based on the validation check.
+<docs-step title="검증기 함수 가져오기">
+반응형 폼에는 일반적인 사용 사례를 위한 검증기 함수 세트가 포함됩니다. 이 함수는 검증할 제어를 받아들이고 유효성 검사 확인에 따라 오류 객체 또는 null 값을 반환합니다.
 
-Import the `Validators` class from the `@angular/forms` package.
+`@angular/forms` 패키지에서 `Validators` 클래스를 가져옵니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="validator-imports"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.ts (가져오기)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="validator-imports"/>
 </docs-step>
 
-<docs-step title="Make a field required">
-In the `ProfileEditor` component, add the `Validators.required` static method as the second item in the array for the `firstName` control.
+<docs-step title="필드를 필수로 만들기">
+`ProfileEditor` 컴포넌트에서 `firstName` 제어의 배열의 두 번째 항목으로 `Validators.required` 정적 메서드를 추가합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (required validator)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="required-validator"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.ts (필수 검증기)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="required-validator"/>
 </docs-step>
 
-<docs-step title="Display form status">
-When you add a required field to the form control, its initial status is invalid. This invalid status propagates to the parent form group element, making its status invalid. Access the current status of the form group instance through its `status` property.
+<docs-step title="폼 상태 표시하기">
+폼 제어에 필수 필드를 추가하면 초기 상태가 유효하지 않게 됩니다. 이 유효하지 않은 상태는 상위 폼 그룹 요소에 전파되어 상태를 유효하지 않게 만듭니다. 폼 그룹 인스턴스의 현재 상태를 `status` 속성을 통해 접근할 수 있습니다.
 
-Display the current status of `profileForm` using interpolation.
+보간법을 사용하여 `profileForm`의 현재 상태를 표시합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (display status)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="display-status"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.html (상태 표시)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="display-status"/>
 
-The **Submit** button is disabled because `profileForm` is invalid due to the required `firstName` form control. After you fill out the `firstName` input, the form becomes valid and the **Submit** button is enabled.
+**제출** 버튼은 `firstName` 폼 제어가 필수로 인해 `profileForm`이 유효하지 않으므로 비활성화됩니다. `firstName` 입력을 작성하면 폼이 유효해지고 **제출** 버튼이 활성화됩니다.
 
-For more on form validation, visit the [Form Validation](guide/forms/form-validation) guide.
+폼 유효성 검증에 대해 더 알아보려면 [폼 유효성 검증](guide/forms/form-validation) 가이드를 방문하세요.
 </docs-step>
 </docs-workflow>
 
-## Creating dynamic forms
+## 동적 폼 생성하기
 
-`FormArray` is an alternative to `FormGroup` for managing any number of unnamed controls.
-As with form group instances, you can dynamically insert and remove controls from form array instances, and the form array instance value and validation status is calculated from its child controls.
-However, you don't need to define a key for each control by name, so this is a great option if you don't know the number of child values in advance.
+`FormArray`는 이름이 없는 여러 제어를 관리하기 위해 `FormGroup`의 대안입니다. 폼 그룹 인스턴스와 마찬가지로, 폼 배열 인스턴스에서 제어를 동적으로 삽입하고 제거할 수 있으며, 폼 배열 인스턴스의 값과 유효성 상태는 자식 제어에서 계산됩니다. 그러나 각 제어의 이름별로 키를 정의할 필요가 없으므로 자식 값의 수를 미리 알지 못할 때 좋은 옵션입니다.
 
-To define a dynamic form, take the following steps.
+동적 폼을 정의하려면 다음 단계를 따릅니다.
 
-1. Import the `FormArray` class.
-1. Define a `FormArray` control.
-1. Access the `FormArray` control with a getter method.
-1. Display the form array in a template.
+1. `FormArray` 클래스를 가져옵니다.
+2. `FormArray` 제어를 정의합니다.
+3. getter 메서드를 사용하여 `FormArray` 제어에 접근합니다.
+4. 템플릿에서 폼 배열을 표시합니다.
 
-The following example shows you how to manage an array of *aliases* in `ProfileEditor`.
+다음 예제에서는 `ProfileEditor`에서 *별칭* 배열을 관리하는 방법을 보여줍니다.
 
 <docs-workflow>
-<docs-step title="Import the `FormArray` class">
-Import the `FormArray` class from `@angular/forms` to use for type information. The `FormBuilder` service is ready to create a `FormArray` instance.
+<docs-step title="`FormArray` 클래스 가져오기">
+`@angular/forms`에서 `FormArray` 클래스를 가져와 타입 정보를 사용할 수 있도록 합니다. `FormBuilder` 서비스는 `FormArray` 인스턴스를 생성할 준비가 되어 있습니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-array-imports"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.ts (가져오기)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-array-imports"/>
 </docs-step>
 
-<docs-step title="Define a `FormArray` control">
-You can initialize a form array with any number of controls, from zero to many, by defining them in an array. Add an `aliases` property to the form group instance for `profileForm` to define the form array.
+<docs-step title="`FormArray` 제어 정의하기">
+폼 배열은 0개에서 여러 개의 제어를 정의하여 초기화할 수 있습니다. `profileForm`의 폼 그룹 인스턴스에 `aliases` 속성을 추가하여 폼 배열을 정의합니다.
 
-Use the `FormBuilder.array()` method to define the array, and the `FormBuilder.control()` method to populate the array with an initial control.
+`FormBuilder.array()` 메서드를 사용하여 배열을 정의하고, `FormBuilder.control()` 메서드를 사용하여 배열을 초기 제어로 채웁니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (aliases form array)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="aliases"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.ts (별칭 폼 배열)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="aliases"/>
 
-The aliases control in the form group instance is now populated with a single control until more controls are added dynamically.
+폼 그룹 인스턴스의 별칭 제어는 이제 더 많은 제어가 동적으로 추가될 때까지 단일 제어로 채워집니다.
 </docs-step>
 
-<docs-step title="Access the `FormArray` control">
-A getter provides access to the aliases in the form array instance compared to repeating the `profileForm.get()` method to get each instance. The form array instance represents an undefined number of controls in an array. It's convenient to access a control through a getter, and this approach is straightforward to repeat for additional controls. <br />
+<docs-step title="`FormArray` 제어에 접근하기">
+getter는 별칭 폼 배열 인스턴스에서 접근성을 제공하여 각 인스턴스에 대해 `profileForm.get()` 메서드를 반복적으로 사용하는 것보다 편리합니다. 폼 배열 인스턴스는 배열의 명명이 없는 제어를 나타냅니다. getter를 통해 제어에 접근하는 것이 편리하며, 추가 제어를 위해 반복하기도 간단합니다. <br />
 
-Use the getter syntax to create an `aliases` class property to retrieve the alias's form array control from the parent form group.
+getter 구문을 사용하여 부모 폼 그룹에서 별칭의 폼 배열 제어를 검색하는 `aliases` 클래스 속성을 생성합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (aliases getter)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="aliases-getter"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.ts (별칭 getter)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="aliases-getter"/>
 
-Because the returned control is of the type `AbstractControl`, you need to provide an explicit type to access the method syntax for the form array instance.  Define a method to dynamically insert an alias control into the alias's form array. The `FormArray.push()` method inserts the control as a new item in the array.
+반환된 제어는 `AbstractControl` 유형이므로 메서드 구문에 접근하기 위해 명시적 유형을 제공해야 합니다. 별칭의 폼 배열에 동적으로 별칭 제어를 삽입하는 메서드를 정의합니다. `FormArray.push()` 메서드는 배열에 새 항목으로 제어를 삽입합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (add alias)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="add-alias"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.ts (별칭 추가)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="add-alias"/>
 
-In the template, each control is displayed as a separate input field.
+템플릿에서는 각 제어가 개별 입력 필드로 표시됩니다.
 
 </docs-step>
 
-<docs-step title="Display the form array in the template">
+<docs-step title="템플릿에서 폼 배열 표시하기">
 
-To attach the aliases from your form model, you must add it to the template. Similar to the `formGroupName` input provided by `FormGroupNameDirective`, `formArrayName` binds communication from the form array instance to the template with `FormArrayNameDirective`.
+폼 모델에서 별칭을 연결하려면 템플릿에 추가해야 합니다. `FormGroupNameDirective`에 의해 제공된 `formGroupName` 입력과 유사하게 `formArrayName`은 폼 배열 인스턴스와 템플릿 간의 통신을 `FormArrayNameDirective`를 통해 바인딩합니다.
 
-Add the following template HTML after the `<div>` closing the `formGroupName` element.
+`formGroupName` 요소의 `<div>` 닫는 태그 다음에 다음 템플릿 HTML을 추가합니다.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (aliases form array template)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="formarrayname"/>
+<docs-code header="src/app/profile-editor/profile-editor.component.html (별칭 폼 배열 템플릿)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="formarrayname"/>
 
-The `*ngFor` directive iterates over each form control instance provided by the aliases form array instance. Because form array elements are unnamed, you assign the index to the `i` variable and pass it to each control to bind it to the `formControlName` input.
+`*ngFor` 지시문은 별칭 폼 배열 인스턴스에서 제공된 각 폼 제어 인스턴스를 반복합니다. 폼 배열 요소는 이름이 없으므로 인덱스를 `i` 변수에 할당하고 각 제어에 전달하여 `formControlName` 입력에 바인딩합니다.
 
-Each time a new alias instance is added, the new form array instance is provided its control based on the index. This lets you track each individual control when calculating the status and value of the root control.
+각 새 별칭 인스턴스가 추가될 때마다 인덱스를 기반으로 새 폼 배열 인스턴스가 제공되며, 이를 통해 루트 제어의 상태 및 값을 계산할 때 각 개별 제어를 추적할 수 있습니다.
 
 </docs-step>
 
-<docs-step title="Add an alias">
+<docs-step title="별칭 추가하기">
 
-Initially, the form contains one `Alias` field. To add another field, click the **Add Alias** button. You can also validate the array of aliases reported by the form model displayed by `Form Value` at the bottom of the template.  Instead of a form control instance for each alias, you can compose another form group instance with additional fields. The process of defining a control for each item is the same.
+처음에 폼은 하나의 `Alias` 필드를 포함합니다. 다른 필드를 추가하려면 **Add Alias** 버튼을 클릭하십시오. 또한 템플릿 하단에 `Form Value`로 표시된 폼 모델에서 보고된 별칭 배열을 검증할 수 있습니다. 각 별칭에 대해 폼 제어 인스턴스가 아닌, 추가 필드가 있는 또 다른 폼 그룹 인스턴스를 구성할 수 있습니다. 각 항목에 대한 제어를 정의하는 프로세스는 동일합니다.
 </docs-step>
 
 </docs-workflow>
 
-## Reactive forms API summary
+## 반응형 폼 API 요약
 
-The following table lists the base classes and services used to create and manage reactive form controls.
-For complete syntax details, see the API reference documentation for the [Forms package](api#forms "API reference").
+다음 표는 반응형 폼 제어를 생성하고 관리하는 데 사용되는 기본 클래스와 서비스를 나열합니다. 전체 구문 세부정보는 [Forms 패키지](api#forms "API 참조")에 대한 API 참조 문서를 참조하십시오.
 
-### Classes
+### 클래스
 
-| Class             | Details |
+| 클래스             | 세부 정보 |
 |:---               |:---     |
-| `AbstractControl` | The abstract base class for the concrete form control classes `FormControl`, `FormGroup`, and `FormArray`. It provides their common behaviors and properties.                           |
-| `FormControl`     | Manages the value and validity status of an individual form control. It corresponds to an HTML form control such as `<input>` or `<select>`.                                            |
-| `FormGroup`       | Manages the value and validity state of a group of `AbstractControl` instances. The group's properties include its child controls. The top-level form in your component is `FormGroup`. |
-| `FormArray`       | Manages the value and validity state of a numerically indexed array of `AbstractControl` instances.                                                                                     |
-| `FormBuilder`     | An injectable service that provides factory methods for creating control instances.                                                                                                     |
-| `FormRecord`      | Tracks the value and validity state of a collection of `FormControl` instances, each of which has the same value type.                                                                  |
+| `AbstractControl` | 구체적인 폼 제어 클래스인 `FormControl`, `FormGroup`, 및 `FormArray`의 추상 기본 클래스입니다. 이 클래스는 공통 동작과 속성을 제공합니다.                           |
+| `FormControl`     | 개별 폼 제어의 값과 유효성 상태를 관리합니다. 이는 `<input>` 또는 `<select>`와 같은 HTML 폼 제어에 해당합니다.                                            |
+| `FormGroup`       | `AbstractControl` 인스턴스 그룹의 값과 유효성 상태를 관리합니다. 그룹의 속성은 자식 제어를 포함합니다. 컴포넌트의 최상위 폼은 `FormGroup`입니다. |
+| `FormArray`       | 숫자 인덱스 배열의 `AbstractControl` 인스턴스의 값과 유효성 상태를 관리합니다.                                                                                     |
+| `FormBuilder`     | 제어 인스턴스를 생성하기 위한 팩토리 메서드를 제공하는 주입 가능한 서비스입니다.                                                                                                     |
+| `FormRecord`      | 각 제어 인스턴스의 값과 유효성 상태를 추적하며, 모든 인스턴스는 동일한 값 유형을 가집니다.                                                                  |
 
-### Directives
+### 지시문
 
-| Directive              | Details |
+| 지시문              | 세부 정보 |
 |:---                    |:---     |
-| `FormControlDirective` | Syncs a standalone `FormControl` instance to a form control element.                       |
-| `FormControlName`      | Syncs `FormControl` in an existing `FormGroup` instance to a form control element by name. |
-| `FormGroupDirective`   | Syncs an existing `FormGroup` instance to a DOM element.                                   |
-| `FormGroupName`        | Syncs a nested `FormGroup` instance to a DOM element.                                      |
-| `FormArrayName`        | Syncs a nested `FormArray` instance to a DOM element.                                      |
+| `FormControlDirective` | 독립형 `FormControl` 인스턴스를 폼 제어 요소와 동기화합니다.                       |
+| `FormControlName`      | 기존 `FormGroup` 인스턴스의 `FormControl`을 이름으로 폼 제어 요소와 동기화합니다. |
+| `FormGroupDirective`   | 기존 `FormGroup` 인스턴스를 DOM 요소와 동기화합니다.                                   |
+| `FormGroupName`        | 중첩된 `FormGroup` 인스턴스를 DOM 요소와 동기화합니다.                                      |
+| `FormArrayName`        | 중첩된 `FormArray` 인스턴스를 DOM 요소와 동기화합니다.                                      |
\ No newline at end of file
diff --git a/adev/src/content/guide/forms/template-driven-forms.md b/adev/src/content/guide/forms/template-driven-forms.md
index 4665ed604bba..34cc3dc98c50 100644
--- a/adev/src/content/guide/forms/template-driven-forms.md
+++ b/adev/src/content/guide/forms/template-driven-forms.md
@@ -1,201 +1,200 @@
-# Building a template-driven form
+# 템플릿 기반 폼 만들기
 
-This tutorial shows you how to create a template-driven form. The control elements in the form are bound to data properties that have input validation. The input validation helps maintain data integrity and styling to improve the user experience.
+이 자습서는 템플릿 기반 폼을 만드는 방법을 보여줍니다. 폼의 제어 요소는 입력 검증이 있는 데이터 속성에 바인딩되어 있습니다. 입력 검증은 데이터 무결성을 유지하고 사용자 경험을 개선하기 위해 스타일링에 도움을 줍니다.
 
-Template-driven forms use [two-way data binding](guide/templates/two-way-binding) to update the data model in the component as changes are made in the template and vice versa.
+템플릿 기반 폼은 [양방향 데이터 바인딩](guide/templates/two-way-binding)을 사용하여 템플릿에서 변경 사항이 발생할 때 컴포넌트의 데이터 모델을 업데이트하고 그 반대의 경우에도 마찬가지입니다.
 
-<docs-callout helpful title="Template vs Reactive forms">
-Angular supports two design approaches for interactive forms. Template-driven forms allow you to use form-specific directives in your Angular template. Reactive forms provide a model-driven approach to building forms.
+<docs-callout helpful title="템플릿과 반응형 폼">
+Angular는 상호작용하는 폼을 위한 두 가지 설계 접근 방식을 지원합니다. 템플릿 기반 폼은 Angular 템플릿 내에서 폼 특정 지시어를 사용할 수 있게 합니다. 반응형 폼은 폼 구축을 위한 모델 기반 접근 방식을 제공합니다.
 
-Template-driven forms are a great choice for small or simple forms, while reactive forms are more scalable and suitable for complex forms. For a comparison of the two approaches, see [Choosing an approach](guide/forms#choosing-an-approach)
+템플릿 기반 폼은 소규모 또는 간단한 폼에 적합하며, 반응형 폼은 보다 확장 가능하고 복잡한 폼에 적합합니다. 두 접근 방식의 비교는 [접근 방식 선택하기](guide/forms#choosing-an-approach)를 참조하세요.
 </docs-callout>
 
-You can build almost any kind of form with an Angular template —login forms, contact forms, and pretty much any business form.
-You can lay out the controls creatively and bind them to the data in your object model.
-You can specify validation rules and display validation errors, conditionally allow input from specific controls, trigger built-in visual feedback, and much more.
+Angular 템플릿을 사용하여 거의 모든 종류의 폼을 구축할 수 있습니다. 로그인 폼, 연락처 폼, 그리고 거의 모든 비즈니스 폼을 포함합니다.
+제어 요소를 창의적으로 배치하고 객체 모델의 데이터에 바인딩할 수 있습니다.
+유효성 검사 규칙을 지정하고 유효성 검사 오류를 표시하며, 특정 제어 요소의 입력을 조건부로 허용하고, 내장된 시각적 피드백을 트리거하는 등의 작업도 가능합니다.
 
-## Objectives
+## 목표
 
-This tutorial teaches you how to do the following:
+이 자습서는 다음을 수행하는 방법을 가르쳐 줍니다.
 
-- Build an Angular form with a component and template
-- Use `ngModel` to create two-way data bindings for reading and writing input-control values
-- Provide visual feedback using special CSS classes that track the state of the controls
-- Display validation errors to users and conditionally allow input from form controls based on the form status
-- Share information across HTML elements using [template reference variables](guide/templates/variables#template-reference-variables)
+- 컴포넌트 및 템플릿을 사용하여 Angular 폼 구축하기
+- `ngModel`을 사용하여 입력 제어 값을 읽고 쓰기 위한 양방향 데이터 바인딩 생성하기
+- 제어의 상태를 추적하는 특수 CSS 클래스를 사용하여 시각적 피드백 제공하기
+- 사용자에게 유효성 검사 오류를 표시하고 폼 상태에 따라 폼 제어에서 입력을 조건부로 허용하기
+- [템플릿 참조 변수를](guide/templates/variables#template-reference-variables) 사용하여 HTML 요소 간에 정보 공유하기
 
-## Build a template-driven form
+## 템플릿 기반 폼 구축하기
 
-Template-driven forms rely on directives defined in the `FormsModule`.
+템플릿 기반 폼은 `FormsModule`에 정의된 지시어에 의존합니다.
 
-| Directives     | Details                                                                                                                                                                                                                                                                         |
-| :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `NgModel`      | Reconciles value changes in the attached form element with changes in the data model, allowing you to respond to user input with input validation and error handling.                                                                                                           |
-| `NgForm`       | Creates a top-level `FormGroup` instance and binds it to a `<form>` element to track aggregated form value and validation status. As soon as you import `FormsModule`, this directive becomes active by default on all `<form>` tags. You don't need to add a special selector. |
-| `NgModelGroup` | Creates and binds a `FormGroup` instance to a DOM element.                                                                                                                                                                                                                      |
+| 지시어           | 세부사항                                                                                                                                                                                                                                                                                            |
+| :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `NgModel`        | 부착된 폼 요소의 값 변화를 데이터 모델의 변화와 조화시켜, 입력 검증 및 오류 처리를 통해 사용자 입력에 응답할 수 있게 합니다.                                                                                                                                                            |
+| `NgForm`         | 최상위 `FormGroup` 인스턴스를 생성하고 이를 `<form>` 요소에 바인딩하여 집계된 폼 값과 유효성 검토 상태를 추적합니다. `FormsModule`을 가져오면 이 지시어는 기본적으로 모든 `<form>` 태그에서 활성화됩니다. 특별한 선택기를 추가할 필요는 없습니다.                               |
+| `NgModelGroup`   | DOM 요소에 `FormGroup` 인스턴스를 생성하고 바인딩합니다.                                                                                                                                                                                                                                         |
 
-### Step overview
+### 단계 개요
 
-In the course of this tutorial, you bind a sample form to data and handle user input using the following steps.
+이 자습서의 과정에서 샘플 폼을 데이터에 바인딩하고 사용자 입력을 처리하는 다음 단계들을 수행합니다.
 
-1. Build the basic form.
-   - Define a sample data model
-   - Include required infrastructure such as the `FormsModule`
-1. Bind form controls to data properties using the `ngModel` directive and two-way data-binding syntax.
-   - Examine how `ngModel` reports control states using CSS classes
-   - Name controls to make them accessible to `ngModel`
-1. Track input validity and control status using `ngModel`.
-   - Add custom CSS to provide visual feedback on the status
-   - Show and hide validation-error messages
-1. Respond to a native HTML button-click event by adding to the model data.
-1. Handle form submission using the [`ngSubmit`](api/forms/NgForm#properties) output property of the form.
-   - Disable the **Submit** button until the form is valid
-   - After submit, swap out the finished form for different content on the page
+1. 기본 폼 구축하기.
+   - 샘플 데이터 모델 정의
+   - `FormsModule`과 같은 필수 인프라 포함하기
+2. `ngModel` 지시어와 양방향 데이터 바인딩 문법을 사용하여 폼 제어를 데이터 속성에 바인딩하기.
+   - CSS 클래스를 사용하여 `ngModel`이 제어 상태를 보고하는 방법 검토하기
+   - `ngModel`에 접근 가능하도록 제어에 이름 지정하기
+3. `ngModel`을 사용하여 입력 유효성 및 제어 상태 추적하기.
+   - 상태에 대한 시각적 피드백을 제공하기 위해 사용자 정의 CSS 추가하기
+   - 유효성 검사 오류 메시지를 표시하고 숨기기
+4. 네이티브 HTML 버튼 클릭 이벤트에 응답하여 모델 데이터에 추가하기.
+5. 폼의 [`ngSubmit`](api/forms/NgForm#properties) 출력 속성을 사용하여 폼 제출 처리하기.
+   - 폼이 유효할 때까지 **제출** 버튼 비활성화하기
+   - 제출 후, 완료된 폼을 페이지의 다른 콘텐츠로 바꾸기
 
-## Build the form
+## 폼 만들기
 
 <!-- TODO: link to preview -->
 <!-- <docs-code live/> -->
 
-1. The provided sample application creates the `Actor` class which defines the data model reflected in the form.
+1. 제공된 샘플 애플리케이션은 폼에 반영된 데이터 모델을 정의하는 `Actor` 클래스를 생성합니다.
 
 <docs-code header="src/app/actor.ts" language="typescript" path="adev/src/content/examples/forms/src/app/actor.ts"/>
 
-1. The form layout and details are defined in the `ActorFormComponent` class.
+1. 폼 레이아웃과 세부사항은 `ActorFormComponent` 클래스에 정의되어 있습니다.
 
    <docs-code header="src/app/actor-form/actor-form.component.ts (v1)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="v1"/>
 
-   The component's `selector` value of "app-actor-form" means you can drop this form in a parent template using the `<app-actor-form>` tag.
+   컴포넌트의 `selector` 값은 "app-actor-form"으로, 이를 통해 `<app-actor-form>` 태그를 사용하여 부모 템플릿에 이 폼을 추가할 수 있습니다.
 
-1. The following code creates a new actor instance, so that the initial form can show an example actor.
+1. 다음 코드는 새로운 배우 인스턴스를 생성하여 초기 폼에 예제 배우를 표시할 수 있게 합니다.
 
    <docs-code language="typescript" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" language="typescript" visibleRegion="Marilyn"/>
 
-   This demo uses dummy data for `model` and `skills`.
-   In a real app, you would inject a data service to get and save real data, or expose these properties as inputs and outputs.
+   이 데모는 `model`과 `skills`에 더미 데이터를 사용합니다.
+   실제 앱에서는 데이터 서비스를 주입하여 실제 데이터 가져오기 및 저장하기, 또는 이러한 속성을 입력 및 출력으로 노출할 것입니다.
 
-1. The application enables the Forms feature and registers the created form component.
+1. 애플리케이션은 Forms 기능을 활성화하고 생성된 폼 컴포넌트를 등록합니다.
 
 <docs-code header="src/app/app.module.ts" language="typescript" path="adev/src/content/examples/forms/src/app/app.module.ts"/>
 
-1. The form is displayed in the application layout defined by the root component's template.
+1. 폼은 루트 컴포넌트의 템플릿에 의해 정의된 애플리케이션 레이아웃에 표시됩니다.
 
    <docs-code header="src/app/app.component.html" language="html" path="adev/src/content/examples/forms/src/app/app.component.html"/>
 
-   The initial template defines the layout for a form with two form groups and a submit button.
-   The form groups correspond to two properties of the Actor data model, name and studio.
-   Each group has a label and a box for user input.
+   초기 템플릿은 두 개의 폼 그룹과 제출 버튼이 있는 폼의 레이아웃을 정의합니다.
+   폼 그룹은 배우 데이터 모델의 두 속성, 이름과 스튜디오에 해당합니다.
+   각 그룹은 사용자 입력을 위한 레이블과 상자를 가지고 있습니다.
 
-   - The **Name** `<input>` control element has the HTML5 `required` attribute
-   - The **Studio** `<input>` control element does not because `studio` is optional
+   - **이름** `<input>` 제어 요소는 HTML5 `required` 속성이 있습니다.
+   - **스튜디오** `<input>` 제어 요소는 `studio`가 선택 사항이므로 속성이 없습니다.
 
-   The **Submit** button has some classes on it for styling.
-   At this point, the form layout is all plain HTML5, with no bindings or directives.
+   **제출** 버튼에는 스타일링을 위한 클래스가 일부 있습니다.
+   이 시점에서 폼 레이아웃은 모든 것이 일반 HTML5이므로 바인딩이나 지시어가 없습니다.
 
-1. The sample form uses some style classes from [Twitter Bootstrap](https://getbootstrap.com/css): `container`, `form-group`, `form-control`, and `btn`.
-To use these styles, the application's style sheet imports the library.
+1. 샘플 폼은 [Twitter Bootstrap](https://getbootstrap.com/css)의 일부 스타일 클래스를 사용합니다: `container`, `form-group`, `form-control`, 및 `btn`.
+이 스타일을 사용하기 위해 애플리케이션의 스타일 시트는 라이브러리를 가져옵니다.
 
 <docs-code header="src/styles.css" path="adev/src/content/examples/forms/src/styles.1.css"/>
 
-1. The form requires that an actor's skill is chosen from a predefined list of `skills` maintained internally in `ActorFormComponent`.
-The Angular [NgForOf directive](api/common/NgForOf 'API reference') iterates over the data values to populate the `<select>` element.
+1. 폼은 `ActorFormComponent` 내부에 유지되는 미리 정의된 `skills` 목록에서 배우의 기술을 선택해야 합니다.
+Angular [NgForOf 지시어](api/common/NgForOf 'API reference')는 데이터 값을 반복하여 `<select>` 요소를 채웁니다.
 
 <docs-code header="src/app/actor-form/actor-form.component.html (skills)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="skills"/>
 
-If you run the application right now, you see the list of skills in the selection control.
-The input elements are not yet bound to data values or events, so they are still blank and have no behavior.
+지금 애플리케이션을 실행하면 선택 제어에서 기술 목록이 표시됩니다.
+입력 요소는 아직 데이터 값이나 이벤트에 바인딩되어 있지 않으므로 여전히 비어 있고 동작이 없습니다.
 
-## Bind input controls to data properties
+## 입력 제어를 데이터 속성에 바인딩하기
 
-The next step is to bind the input controls to the corresponding `Actor` properties with two-way data binding, so that they respond to user input by updating the data model, and also respond to programmatic changes in the data by updating the display.
+다음 단계는 입력 제어를 해당 `Actor` 속성에 양방향 데이터 바인딩하여 사용자의 입력에 응답하고 데이터의 프로그래밍 변경에도 표시를 업데이트하는 것입니다.
 
-The `ngModel` directive declared in the `FormsModule` lets you bind controls in your template-driven form to properties in your data model.
-When you include the directive using the syntax for two-way data binding, `[(ngModel)]`, Angular can track the value and user interaction of the control and keep the view synced with the model.
+`FormsModule`에서 선언된 `ngModel` 지시어를 사용하면 템플릿 기반 폼의 제어를 데이터 모델의 속성에 바인딩할 수 있습니다.
+양방향 데이터 바인딩 문법 `[(ngModel)]`을 사용하여 지시어를 포함하면, Angular는 제어의 값과 사용자 상호 작용을 추적하고 모델과 뷰를 동기화할 수 있습니다.
 
-1. Edit the template file `actor-form.component.html`.
-1. Find the `<input>` tag next to the **Name** label.
-1. Add the `ngModel` directive, using two-way data binding syntax `[(ngModel)]="..."`.
+1. 템플릿 파일 `actor-form.component.html`을 편집합니다.
+2. **이름** 레이블 옆에 있는 `<input>` 태그를 찾습니다.
+3. 양방향 데이터 바인딩 문법 `[(ngModel)]="..."`을 사용하여 `ngModel` 지시어를 추가합니다.
 
 <docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngModelName-1"/>
 
-HELPFUL: This example has a temporary diagnostic interpolation after each input tag, `{{model.name}}`, to show the current data value of the corresponding property. The comment reminds you to remove the diagnostic lines when you have finished observing the two-way data binding at work.
+HELPFUL: 이 예제는 각 입력 태그 이후에 임시 진단 보간 `{{model.name}}`을 포함하여 해당 속성의 현재 데이터 값을 표시합니다. 이 주석은 양방향 데이터 바인딩 작동을 관찰한 후 진단 줄을 제거하라는 알림입니다.
 
-### Access the overall form status
+### 전체 폼 상태 접근하기
 
-When you imported the `FormsModule` in your component, Angular automatically created and attached an [NgForm](api/forms/NgForm) directive to the `<form>` tag in the template (because `NgForm` has the selector `form` that matches `<form>` elements).
+컴포넌트에서 `FormsModule`을 가져오면 Angular는 템플릿의 `<form>` 태그에 자동으로 [NgForm](api/forms/NgForm) 지시어 인스턴스를 생성하고 부착합니다(인스턴스의 선택자가 `<form>` 요소와 일치하기 때문입니다).
 
-To get access to the `NgForm` and the overall form status, declare a [template reference variable](guide/templates/variables#template-reference-variables).
+`NgForm`과 전체 폼 상태에 접근하려면 [템플릿 참조 변수](guide/templates/variables#template-reference-variables)를 선언하세요.
 
-1. Edit the template file `actor-form.component.html`.
-1. Update the `<form>` tag with a template reference variable, `#actorForm`, and set its value as follows.
+1. 템플릿 파일 `actor-form.component.html`을 편집합니다.
+2. `<form>` 태그에 템플릿 참조 변수 `#actorForm`을 추가하고 다음과 같이 값을 설정합니다.
 
    <docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="template-variable"/>
 
-   The `actorForm` template variable is now a reference to the `NgForm` directive instance that governs the form as a whole.
+   `actorForm` 템플릿 변수는 이제 폼 전체를 관리하는 `NgForm` 지시어 인스턴스를 참조합니다.
 
-1. Run the app.
-1. Start typing in the **Name** input box.
+3. 앱을 실행합니다.
+4. **이름** 입력 상자에 타이핑하기 시작합니다.
 
-   As you add and delete characters, you can see them appear and disappear from the data model.
+   문자를 추가하고 삭제하면 이들이 데이터 모델에 나타나고 사라지는 것을 볼 수 있습니다.
 
-The diagnostic line that shows interpolated values demonstrates that values are really flowing from the input box to the model and back again.
+진단 줄은 보간된 값이 입력 상자에서 모델로, 그리고 다시 돌아오는 것을 보여줍니다.
 
-### Naming control elements
+### 제어 요소 이름 지정하기
 
-When you use `[(ngModel)]` on an element, you must define a `name` attribute for that element.
-Angular uses the assigned name to register the element with the `NgForm` directive attached to the parent `<form>` element.
+`[(ngModel)]`을 요소에서 사용하면 해당 요소에 대해 `name` 속성을 정의해야 합니다.
+Angular는 할당된 이름을 사용하여 부모 `<form>` 요소에 부착된 `NgForm` 지시어와 함께 요소를 등록합니다.
 
-The example added a `name` attribute to the `<input>` element and set it to "name", which makes sense for the actor's name.
-Any unique value will do, but using a descriptive name is helpful.
+예제에서는 `<input>` 요소에 `name` 속성을 추가하고 이를 "name"으로 설정하여 배우의 이름에 맞게 설정했습니다.
+고유한 값을 사용해도 상관 없지만, 설명적인 이름을 사용하는 것이 유용합니다.
 
-1. Add similar `[(ngModel)]` bindings and `name` attributes to **Studio** and **Skill**.
-1. You can now remove the diagnostic messages that show interpolated values.
-1. To confirm that two-way data binding works for the entire actor model, add a new text binding with the [`json`](api/common/JsonPipe) pipe at the top to the component's template, which serializes the data to a string.
+1. **스튜디오** 및 **기술**에 대해 유사한 `[(ngModel)]` 바인딩과 `name` 속성을 추가합니다.
+2. 이제 보간된 값을 보여주는 진단 메시지를 제거할 수 있습니다.
+3. 전체 배우 모델에 대해 양방향 데이터 바인딩이 작동하는지 확인하기 위해, 상단에[`json`](api/common/JsonPipe) 파이프와 함께 새로운 텍스트 바인딩을 추가하여 데이터를 문자열로 직렬화하세요.
 
-After these revisions, the form template should look like the following:
+이러한 수정 후, 폼 템플릿은 다음과 같이 보여야 합니다:
 
 <docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngModel-2"/>
 
-You'll notice that:
+다음 사항을 알 수 있습니다:
 
-- Each `<input>` element has an `id` property.
-  This is used by the `<label>` element's `for` attribute to match the label to its input control.
-  This is a [standard HTML feature](https://developer.mozilla.org/docs/Web/HTML/Element/label).
+- 각 `<input>` 요소는 `id` 속성을 가지고 있습니다.
+  이는 `<label>` 요소의 `for` 속성이 레이블과 해당 입력 제어를 일치시키는 데 사용됩니다.
+  이는 [표준 HTML 기능](https://developer.mozilla.org/docs/Web/HTML/Element/label)입니다.
 
-- Each `<input>` element also has the required `name` property that Angular uses to register the control with the form.
+- 각 `<input>` 요소는 Angular가 제어를 폼에 등록하는 데 사용하는 필수 `name` 속성도 있습니다.
 
-When you have observed the effects, you can delete the `{{ model | json }}` text binding.
+효과를 관찰한 후, `{{ model | json }}` 텍스트 바인딩을 삭제할 수 있습니다.
 
-## Track form states
+## 폼 상태 추적하기
 
-Angular applies the `ng-submitted` class to `form` elements after the form has been submitted. This class can be used to change the form's style after it has been submitted.
+Angular는 폼이 제출된 후 `form` 요소에 `ng-submitted` 클래스를 적용합니다. 이 클래스는 폼 제출 후 폼의 스타일을 변경하는 데 사용될 수 있습니다.
 
-## Track control states
+## 제어 상태 추적하기
 
-Adding the `NgModel` directive to a control adds class names to the control that describe its state.
-These classes can be used to change a control's style based on its state.
+제어에 `NgModel` 지시어를 추가하면 제어의 상태를 설명하는 클래스 이름이 추가됩니다.
+이 클래스는 제어의 상태에 따라 스타일을 변경하는 데 사용될 수 있습니다.
 
-The following table describes the class names that Angular applies based on the control's state.
+다음 표는 Angular가 제어의 상태에 따라 적용하는 클래스 이름을 설명합니다.
 
-| States                           | Class if true | Class if false |
-| :------------------------------- | :------------ | :------------- |
-| The control has been visited.    | `ng-touched`  | `ng-untouched` |
-| The control's value has changed. | `ng-dirty`    | `ng-pristine`  |
-| The control's value is valid.    | `ng-valid`    | `ng-invalid`   |
+| 상태                             | 참일 경우 클래스  | 거짓일 경우 클래스  |
+| :------------------------------- | :---------------- | :------------------ |
+| 제어가 방문되었습니다.            | `ng-touched`      | `ng-untouched`      |
+| 제어의 값이 변경되었습니다.       | `ng-dirty`        | `ng-pristine`       |
+| 제어의 값이 유효합니다.           | `ng-valid`        | `ng-invalid`        |
 
-Angular also applies the `ng-submitted` class to `form` elements upon submission,
-but not to the controls inside the `form` element.
+Angular는 제출 시 `form` 요소에 `ng-submitted` 클래스도 적용하지만, `form` 요소 내의 제어에는 적용하지 않습니다.
 
-You use these CSS classes to define the styles for your control based on its status.
+이 CSS 클래스는 상태에 따라 제어의 스타일을 정의하는 데 사용됩니다.
 
-### Observe control states
+### 제어 상태 관찰하기
 
-To see how the classes are added and removed by the framework, open the browser's developer tools and inspect the `<input>` element that represents the actor name.
+프레임워크가 클래스를 추가하고 제거하는 방법을 보려면 브라우저의 개발자 도구를 열고 배우 이름을 나타내는 `<input>` 요소를 검사하세요.
 
-1. Using your browser's developer tools, find the `<input>` element that corresponds to the **Name** input box.
-   You can see that the element has multiple CSS classes in addition to "form-control".
+1. 브라우저의 개발자 도구를 사용하여 **이름** 입력 상자에 해당하는 `<input>` 요소를 찾습니다.
+   이 요소는 "form-control" 외에 여러 CSS 클래스를 포함하고 있음을 알 수 있습니다.
 
-1. When you first bring it up, the classes indicate that it has a valid value, that the value has not been changed since initialization or reset, and that the control has not been visited since initialization or reset.
+2. 처음으로 이를 열면, 클래스는 유효한 값을 가지고 있으며, 초기화 또는 재설정 이후 값이 변경되지 않았고, 제어가 초기화 또는 재설정 이후 방문되지 않았음을 나타냅니다.
 
    <docs-code language="html">
 
@@ -203,202 +202,199 @@ To see how the classes are added and removed by the framework, open the browser'
 
    </docs-code>
 
-1. Take the following actions on the **Name** `<input>` box, and observe which classes appear.
+3. **이름** `<input>` 상자에서 다음 작업을 수행하고 어떤 클래스가 나타나는지 관찰합니다.
 
-   - Look but don't touch.
-     The classes indicate that it is untouched, pristine, and valid.
+   - 보지만 만지지 않기.
+     클래스는 이것이 터치되지 않았고, 순수하며, 유효하다고 나타냅니다.
 
-   - Click inside the name box, then click outside it.
-     The control has now been visited, and the element has the `ng-touched` class instead of the `ng-untouched` class.
+   - 이름 상자 안을 클릭한 후 바깥쪽을 클릭합니다.
+     이제 제어가 방문되었으며, 요소는 `ng-untouched` 클래스 대신 `ng-touched` 클래스를 가지고 있습니다.
 
-   - Add slashes to the end of the name.
-     It is now touched and dirty.
+   - 이름의 끝에 슬래시를 추가합니다.
+     이제 터치되었고 더럽혀졌습니다.
 
-   - Erase the name.
-     This makes the value invalid, so the `ng-invalid` class replaces the `ng-valid` class.
+   - 이름을 지웁니다.
+     값이 유효하지 않게 되므로 `ng-valid` 클래스가 `ng-invalid` 클래스로 교체됩니다.
 
-### Create visual feedback for states
+### 상태에 대한 시각적 피드백 생성하기
 
-The `ng-valid`/`ng-invalid` pair is particularly interesting, because you want to send a
-strong visual signal when the values are invalid.
-You also want to mark required fields.
+`ng-valid`/`ng-invalid` 쌍은 특히 흥미롭습니다. 왜냐하면 값이 유효하지 않을 때 강한 시각적 신호를 보내고 싶기 때문입니다.
+필수 필드를 표시하는 것도 원합니다.
 
-You can mark required fields and invalid data at the same time with a colored bar
-on the left of the input box.
+입력 상자의 왼쪽에 색 바를 사용하여 필수 필드와 유효하지 않은 데이터를 동시에 표시할 수 있습니다.
 
-To change the appearance in this way, take the following steps.
+이런 식으로 모양을 바꾸려면 다음 단계를 따르세요.
 
-1. Add definitions for the `ng-*` CSS classes.
-1. Add these class definitions to a new `forms.css` file.
-1. Add the new file to the project as a sibling to `index.html`:
+1. `ng-*` CSS 클래스에 대한 정의 추가하기.
+2. 이러한 클래스 정의를 새로운 `forms.css` 파일에 추가하기.
+3. 새로운 파일을 프로젝트에 `index.html`의 형제로 추가합니다:
 
 <docs-code header="src/assets/forms.css" language="css" path="adev/src/content/examples/forms/src/assets/forms.css"/>
 
-1. In the `index.html` file, update the `<head>` tag to include the new style sheet.
+4. `index.html` 파일에서 `<head>` 태그를 업데이트하여 새로운 스타일 시트를 포함합니다.
 
 <docs-code header="src/index.html (styles)" path="adev/src/content/examples/forms/src/index.html" visibleRegion="styles"/>
 
-### Show and hide validation error messages
+### 유효성 검사 오류 메시지 표시 및 숨기기
 
-The **Name** input box is required and clearing it turns the bar red.
-That indicates that something is wrong, but the user doesn't know what is wrong or what to do about it.
-You can provide a helpful message by checking for and responding to the control's state.
+**이름** 입력 상자는 필수이며, 이를 지우면 막대가 빨간색으로 변합니다.
+이것은 뭔가 잘못되었음을 나타내지만, 사용자는 무엇이 잘못되었는지 또는 무엇을 해야 하는지 모릅니다.
+제어 상태를 확인하고 응답하여 유용한 메시지를 제공할 수 있습니다.
 
-The **Skill** select box is also required, but it doesn't need this kind of error handling because the selection box already constrains the selection to valid values.
+**기술** 선택 상자 또한 필수이지만, 이와 같은 오류 처리가 필요하지 않습니다. 선택 상자는 이미 유효한 값으로 제한되기 때문입니다.
 
-To define and show an error message when appropriate, take the following steps.
+적절할 때 오류 메시지를 정의하고 표시하려면 다음 단계를 따르세요.
 
 <docs-workflow>
-<docs-step title="Add a local reference to the input">
-Extend the `input` tag with a template reference variable that you can use to access the input box's Angular control from within the template. In the example, the variable is `#name="ngModel"`.
+<docs-step title="입력에 로컬 참조 추가하기">
+템플릿 내에서 입력 상자의 Angular 제어를 접근할 수 있도록 할 수 있는 템플릿 참조 변수를 사용하여 `input` 태그를 확장합니다. 예제에서 변수는 `#name="ngModel"`입니다.
 
-The template reference variable (`#name`) is set to `"ngModel"` because that is the value of the [`NgModel.exportAs`](api/core/Directive#exportAs) property. This property tells Angular how to link a reference variable to a directive.
+템플릿 참조 변수(`#name`)는 `NgModel.exportAs` 속성의 값인 `"ngModel"`으로 설정됩니다. 이 속성은 Angular에 참조 변수를 지시어에 연결하는 방법을 알려 줍니다.
 </docs-step>
 
-<docs-step title="Add the error message">
-Add a `<div>` that contains a suitable error message.
+<docs-step title="오류 메시지 추가하기">
+적절한 오류 메시지가 포함된 `<div>`를 추가합니다.
 </docs-step>
 
-<docs-step title="Make the error message conditional">
-Show or hide the error message by binding properties of the `name` control to the message `<div>` element's `hidden` property.
+<docs-step title="오류 메시지를 조건부로 만들기">
+`name` 제어의 속성을 메시지 `<div>` 요소의 `hidden` 속성과 바인딩하여 오류 메시지를 표시하거나 숨깁니다.
 </docs-step>
 
 <docs-code header="src/app/actor-form/actor-form.component.html (hidden-error-msg)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="hidden-error-msg"/>
 
-<docs-step title="Add a conditional error message to name">
-Add a conditional error message to the `name` input box, as in the following example.
+<docs-step title="이름에 조건부 오류 메시지 추가하기">
+다음 예제와 같이 `name` 입력 상자에 조건부 오류 메시지를 추가합니다.
 
 <docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="name-with-error-msg"/>
 </docs-step>
 </docs-workflow>
 
-<docs-callout title='Illustrating the "pristine" state'>
+<docs-callout title='"순수" 상태 설명하기'>
 
-In this example, you hide the message when the control is either valid or _pristine_.
-Pristine means the user hasn't changed the value since it was displayed in this form.
-If you ignore the `pristine` state, you would hide the message only when the value is valid.
-If you arrive in this component with a new, blank actor or an invalid actor, you'll see the error message immediately, before you've done anything.
+이 예제에서는 제어가 유효하거나 _순수한_ 상태일 때 메시지를 숨깁니다.
+순수하다는 것은 사용자가 이 폼에 표시된 이후 값이 변경되지 않았음을 의미합니다.
+`pristine` 상태를 무시하면 값이 유효한 경우에만 메시지를 숨길 수 있게 됩니다.
+새로운 비어 있는 배우나 잘못된 배우와 함께 이 컴포넌트에 도착하면 아무 것도 하지 않기 전에 즉시 오류 메시지가 표시됩니다.
 
-You might want the message to display only when the user makes an invalid change.
-Hiding the message while the control is in the `pristine` state achieves that goal.
-You'll see the significance of this choice when you add a new actor to the form in the next step.
+사용자가 잘못된 변경을 할 때만 메시지가 표시되기를 원할 수 있습니다.
+제어가 `pristine` 상태일 때 메시지를 숨기는 것은 이 목표를 달성합니다.
+다음 단계에서 폼에 새로운 배우를 추가할 때 이 선택의 중요성을 알 수 있습니다.
 
 </docs-callout>
 
-## Add a new actor
+## 새로운 배우 추가하기
 
-This exercise shows how you can respond to a native HTML button-click event by adding to the model data.
-To let form users add a new actor, you will add a **New Actor** button that responds to a click event.
+이 연습은 사용자가 네이티브 HTML 버튼 클릭 이벤트에 응답하여 모델 데이터에 추가하는 방법을 보여줍니다.
+폼 사용자가 새로운 배우를 추가할 수 있도록 **새 배우** 버튼을 추가하여 클릭 이벤트에 응답합니다.
 
-1. In the template, place a "New Actor" `<button>` element at the bottom of the form.
-1. In the component file, add the actor-creation method to the actor data model.
+1. 템플릿의 하단에 "새 배우" `<button>` 요소를 배치합니다.
+2. 컴포넌트 파일에 배우 생성 메서드를 actor 데이터 모델에 추가합니다.
 
 <docs-code header="src/app/actor-form/actor-form.component.ts (New Actor method)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="new-actor"/>
 
-1. Bind the button's click event to an actor-creation method, `newActor()`.
+3. 버튼의 클릭 이벤트를 배우 생성 메서드인 `newActor()`에 바인딩합니다.
 
 <docs-code header="src/app/actor-form/actor-form.component.html (New Actor button)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="new-actor-button-no-reset"/>
 
-1. Run the application again and click the **New Actor** button.
+4. 애플리케이션을 다시 실행하고 **새 배우** 버튼을 클릭합니다.
 
-   The form clears, and the _required_ bars to the left of the input box are red, indicating invalid `name` and `skill` properties.
-   Notice that the error messages are hidden.
-   This is because the form is pristine; you haven't changed anything yet.
+   폼이 지워지고 입력 상자의 왼쪽에 있는 _필수_ 막대가 빨간색으로 변하여 유효하지 않은 `name` 및 `skill` 속성을 나타냅니다.
+   오류 메시지가 숨겨져 있는 점에 유의하세요.
+   이는 폼이 순수했기 때문입니다. 아직 아무 것도 변경하지 않았기 때문입니다.
 
-1. Enter a name and click **New Actor** again.
+5. 이름을 입력하고 다시 **새 배우**를 클릭합니다.
 
-   Now the application displays a `Name is required` error message, because the input box is no longer pristine.
-   The form remembers that you entered a name before clicking **New Actor**.
+   이제 애플리케이션은 입력 상자가 더 이상 순수하지 않기 때문에 `이름은 필수입니다` 오류 메시지를 표시합니다.
+   폼은 사용자가 **새 배우** 버튼을 클릭하기 전에 이름을 입력한 것을 기억합니다.
 
-1. To restore the pristine state of the form controls, clear all of the flags imperatively by calling the form's `reset()` method after calling the `newActor()` method.
+6. 폼 제어의 순수 상태를 복원하기 위해 `newActor()` 메서드를 호출한 후 폼의 `reset()` 메서드를 통해 모든 플래그를 명시적으로 지웁니다.
 
    <docs-code header="src/app/actor-form/actor-form.component.html (Reset the form)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="new-actor-button-form-reset"/>
 
-   Now clicking **New Actor** resets both the form and its control flags.
+   이제 **새 배우**를 클릭하면 폼과 제어 플래그가 모두 초기화됩니다.
 
-## Submit the form with `ngSubmit`
+## `ngSubmit`로 폼 제출하기
 
-The user should be able to submit this form after filling it in.
-The **Submit** button at the bottom of the form does nothing on its own, but it does trigger a form-submit event because of its type (`type="submit"`).
+사용자는 이 폼을 채운 후 제출할 수 있어야 합니다.
+폼 하단의 **제출** 버튼은 단독으로는 아무 것도 하지 않지만, 타입이 `type="submit"`이기 때문에 폼 제출 이벤트를 트리거합니다.
 
-To respond to this event, take the following steps.
+이 이벤트에 응답하기 위해 다음 단계를 수행합니다.
 
 <docs-workflow>
 
-<docs-step title="Listen to ngOnSubmit">
-Bind the form's [`ngSubmit`](api/forms/NgForm#properties) event property to the actor-form component's `onSubmit()` method.
+<docs-step title="ngOnSubmit을 수신 대기하기">
+폼의 [`ngSubmit`](api/forms/NgForm#properties) 이벤트 속성을 배우 폼 컴포넌트의 `onSubmit()` 메서드에 바인딩합니다.
 
 <docs-code header="src/app/actor-form/actor-form.component.html (ngSubmit)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngSubmit"/>
 </docs-step>
 
-<docs-step title="Bind the disabled property">
-Use the template reference variable, `#actorForm` to access the form that contains the **Submit** button and create an event binding.
+<docs-step title="비활성화 속성 바인딩하기">
+템플릿 참조 변수 `#actorForm`을 사용하여 **제출** 버튼이 포함된 폼에 접근하고 이벤트 바인딩을 만듭니다.
 
-You will bind the form property that indicates its overall validity to the **Submit** button's `disabled` property.
+폼의 전체 유효성을 나타내는 폼 속성을 **제출** 버튼의 `disabled` 속성에 바인딩합니다.
 
 <docs-code header="src/app/actor-form/actor-form.component.html (submit-button)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="submit-button"/>
 </docs-step>
 
-<docs-step title="Run the application">
-Notice that the button is enabled —although it doesn't do anything useful yet.
+<docs-step title="애플리케이션 실행하기">
+버튼이 활성화되었음을 알 수 있습니다 —비록 아직 유용한 작업을 수행하지는 않지만요.
 </docs-step>
 
-<docs-step title="Delete the Name value">
-This violates the "required" rule, so it displays the error message —and notice that it also disables the **Submit** button.
+<docs-step title="이름 값을 삭제하기">
+이것은 "필수" 규칙을 위반하므로 오류 메시지를 표시합니다 — 또한 **제출** 버튼을 비활성화합니다.
 
-You didn't have to explicitly wire the button's enabled state to the form's validity.
-The `FormsModule` did this automatically when you defined a template reference variable on the enhanced form element, then referred to that variable in the button control.
+버튼의 활성화 상태를 폼의 유효성과 명시적으로 연결할 필요는 없었습니다.
+`FormsModule`이 이를 자동으로 수행했습니다. 강화된 폼 요소에 템플릿 참조 변수를 정의한 후 버튼 제어에서 해당 변수를 참조했습니다.
 </docs-step>
 </docs-workflow>
 
-### Respond to form submission
+### 폼 제출에 응답하기
 
-To show a response to form submission, you can hide the data entry area and display something else in its place.
+폼 제출에 대한 응답을 보여주기 위해, 데이터 입력 영역을 숨기고 그 자리에 다른 것을 표시할 수 있습니다.
 
 <docs-workflow>
-<docs-step title="Wrap the form">
-Wrap the entire form in a `<div>` and bind its `hidden` property to the `ActorFormComponent.submitted` property.
+<docs-step title="폼 랩핑하기">
+전체 폼을 `<div>`로 래핑하고 이를 `ActorFormComponent.submitted` 속성의 `hidden` 속성에 바인딩합니다.
 
 <docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="edit-div"/>
 
-The main form is visible from the start because the `submitted` property is false until you submit the form, as this fragment from the `ActorFormComponent` shows:
+메인 폼은 `submitted` 속성이 false인 상태이므로 처음부터 보입니다. 폼을 제출할 때까지는 false 상태를 유지하며, 이는 `ActorFormComponent`의 이 부분에서 보여줍니다:
 
 <docs-code header="src/app/actor-form/actor-form.component.ts (submitted)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="submitted"/>
 
-When you click the **Submit** button, the `submitted` flag becomes true and the form disappears.
+**제출** 버튼을 클릭하면, `submitted` 플래그가 true가 되고 폼이 사라집니다.
 </docs-step>
 
-<docs-step title="Add the submitted state">
-To show something else while the form is in the submitted state, add the following HTML below the new `<div>` wrapper.
+<docs-step title="제출 상태 추가하기">
+폼이 제출된 상태일 때 다른 것을 표시하기 위해, 새 `<div>` 래퍼 아래에 다음 HTML을 추가합니다.
 
 <docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="submitted"/>
 
-This `<div>`, which shows a read-only actor with interpolation bindings, appears only while the component is in the submitted state.
+이 `<div>`는 읽기 전용 배우를 보여주며, 보간 바인딩을 포함합니다. 컴포넌트가 제출된 상태일 때만 나타납니다.
 
-The alternative display includes an _Edit_ button whose click event is bound to an expression that clears the `submitted` flag.
+대체 표시에는 `submitted` 플래그를 초기화하는 클릭 이벤트가 바인딩된 _편집_ 버튼이 포함됩니다.
 </docs-step>
 
-<docs-step title="Test the Edit button">
-Click the *Edit* button to switch the display back to the editable form.
+<docs-step title="편집 버튼 테스트하기">
+*편집* 버튼을 클릭하여 표시를 편집 가능한 폼으로 전환하세요.
 </docs-step>
 </docs-workflow>
 
-## Summary
+## 요약
 
-The Angular form discussed in this page takes advantage of the following
-framework features to provide support for data modification, validation, and more.
+이 페이지에서 논의된 Angular 폼은 데이터 수정, 검증 및 기타 기능을 지원하기 위해 다음 프레임워크 기능을 활용합니다.
 
-- An Angular HTML form template
-- A form component class with a `@Component` decorator
-- Handling form submission by binding to the `NgForm.ngSubmit` event property
-- Template-reference variables such as `#actorForm` and `#name`
-- `[(ngModel)]` syntax for two-way data binding
-- The use of `name` attributes for validation and form-element change tracking
-- The reference variable's `valid` property on input controls indicates whether a control is valid or should show error messages
-- Controlling the **Submit** button's enabled state by binding to `NgForm` validity
-- Custom CSS classes that provide visual feedback to users about controls that are not valid
+- Angular HTML 폼 템플릿
+- `@Component` 데코레이터가 있는 폼 컴포넌트 클래스
+- `NgForm.ngSubmit` 이벤트 속성에 바인딩하여 폼 제출 처리하기
+- `#actorForm` 및 `#name`과 같은 템플릿 참조 변수
+- 양방향 데이터 바인딩을 위한 `[(ngModel)]` 문법
+- 검증 및 폼 요소 변경 추적을 위한 `name` 속성의 사용
+- 입력 제어에서 참조 변수의 `valid` 속성을 통해 제어가 유효한지 또는 오류 메시지를 표시해야 하는지 여부를 나타냄
+- `NgForm` 유효성에 바인딩하여 **제출** 버튼의 활성화 상태 제어하기
+- 유효하지 않은 제어에 대한 사용자에게 시각적 피드백을 제공하는 사용자 정의 CSS 클래스
 
-Here's the code for the final version of the application:
+최종 애플리케이션 버전의 코드는 다음과 같습니다:
 
 <docs-code-multifile>
     <docs-code header="actor-form/actor-form.component.ts" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="final"/>
@@ -409,4 +405,4 @@ Here's the code for the final version of the application:
     <docs-code header="app.component.ts" path="adev/src/content/examples/forms/src/app/app.component.ts"/>
     <docs-code header="main.ts" path="adev/src/content/examples/forms/src/main.ts"/>
     <docs-code header="forms.css" path="adev/src/content/examples/forms/src/assets/forms.css"/>
-</docs-code-multifile>
+</docs-code-multifile>
\ No newline at end of file
diff --git a/adev/src/content/guide/forms/typed-forms.md b/adev/src/content/guide/forms/typed-forms.md
index 6b6b5ed9b7ed..b146d93005c9 100644
--- a/adev/src/content/guide/forms/typed-forms.md
+++ b/adev/src/content/guide/forms/typed-forms.md
@@ -1,14 +1,14 @@
-# Typed Forms
+# 타입이 지정된 양식
 
-As of Angular 14, reactive forms are strictly typed by default.
+Angular 14부터 반응형 양식은 기본적으로 엄격하게 타입이 지정됩니다.
 
-As background for this guide, you should already be familiar with [Angular Reactive Forms](guide/forms/reactive-forms).
+이 가이드를 위해, 여러분은 이미 [Angular 반응형 양식](guide/forms/reactive-forms)에 익숙해야 합니다.
 
-## Overview of Typed Forms
+## 타입이 지정된 양식 개요
 
-<docs-video src="https://www.youtube.com/embed/L-odCf4MfJc" alt="Typed Forms in Angular" />
+<docs-video src="https://www.youtube.com/embed/L-odCf4MfJc" alt="Angular의 타입이 지정된 양식" />
 
-With Angular reactive forms, you explicitly specify a *form model*. As a simple example, consider this basic user login form:
+Angular 반응형 양식을 사용하면 *양식 모델*을 명시적으로 지정합니다. 간단한 예로, 이 기본 사용자 로그인 양식을 고려해보세요:
 
 ```ts
 const login = new FormGroup({
@@ -17,23 +17,23 @@ const login = new FormGroup({
 });
 ```
 
-Angular provides many APIs for interacting with this `FormGroup`. For example, you may call `login.value`, `login.controls`, `login.patchValue`, etc. (For a full API reference, see the [API documentation](api/forms/FormGroup).)
+Angular는 이 `FormGroup`과 상호 작용하기 위한 많은 API를 제공합니다. 예를 들어, `login.value`, `login.controls`, `login.patchValue` 등을 호출할 수 있습니다. (전체 API 참조는 [API 문서](api/forms/FormGroup)를 참조하세요.)
 
-In previous Angular versions, most of these APIs included `any` somewhere in their types, and interacting with the structure of the controls, or the values themselves, was not type-safe. For example: you could write the following invalid code:
+이전 Angular 버전에서는 이러한 API의 대부분에 `any`가 포함되어 있거나, 컨트롤 구조 또는 값 자체와의 상호 작용이 타입 안전하지 않았습니다. 예를 들어, 다음과 같은 유효하지 않은 코드를 작성할 수 있었습니다:
 
 ```ts
 const emailDomain = login.value.email.domain;
 ```
 
-With strictly typed reactive forms, the above code does not compile, because there is no `domain` property on `email`.
+엄격하게 타입이 지정된 반응형 양식에서는 위 코드는 컴파일되지 않습니다. 왜냐하면 `email`에는 `domain` 속성이 없기 때문입니다.
 
-In addition to the added safety, the types enable a variety of other improvements, such as better autocomplete in IDEs, and an explicit way to specify form structure.
+추가된 안전성 외에도, 타입은 IDE에서 더 나은 자동 완성을 제공하고 양식 구조를 명시적으로 지정할 수 있는 다양한 개선을 가능하게 합니다.
 
-These improvements currently apply only to *reactive* forms (not [*template-driven* forms](guide/forms/template-driven-forms)).
+이러한 개선 사항은 현재 *반응형* 양식에만 적용됩니다(여기에는 [*템플릿 기반* 양식](guide/forms/template-driven-forms)이 포함되지 않습니다).
 
-## Untyped Forms
+## 타입이 없는 양식
 
-Non-typed forms are still supported, and will continue to work as before. To use them, you must import the `Untyped` symbols from `@angular/forms`:
+비타입 양식은 여전히 지원되며, 이전과 같이 계속 작동합니다. 사용하려면 `@angular/forms`에서 `Untyped` 심볼을 가져와야 합니다:
 
 ```ts
 const login = new UntypedFormGroup({
@@ -42,21 +42,21 @@ const login = new UntypedFormGroup({
 });
 ```
 
-Each `Untyped` symbol has exactly the same semantics as in previous Angular version. By removing the `Untyped` prefixes, you can incrementally enable the types.
+각 `Untyped` 심볼은 이전 Angular 버전과 정확히 동일한 의미를 가집니다. `Untyped` 접두사를 제거하면 점진적으로 타입을 활성화할 수 있습니다.
 
-## `FormControl`: Getting Started
+## `FormControl`: 시작하기
 
-The simplest possible form consists of a single control:
+가장 간단한 양식은 단일 컨트롤로 구성됩니다:
 
 ```ts
 const email = new FormControl('angularrox@gmail.com');
 ```
 
-This control will be automatically inferred to have the type `FormControl<string|null>`. TypeScript will automatically enforce this type throughout the [`FormControl` API](api/forms/FormControl), such as `email.value`, `email.valueChanges`, `email.setValue(...)`, etc.
+이 컨트롤은 자동으로 `FormControl<string|null>` 타입으로 추론됩니다. TypeScript는 `email.value`, `email.valueChanges`, `email.setValue(...)` 등과 같은 [`FormControl` API](api/forms/FormControl) 전반에 걸쳐 이 타입을 자동으로 enforcing합니다.
 
-### Nullability
+### 널 가능성
 
-You might wonder: why does the type of this control include `null`?  This is because the control can become `null` at any time, by calling reset:
+여러분은 왜 이 컨트롤의 타입에 `null`이 포함되어 있는지 궁금할 수 있습니다. 이는 컨트롤이 언제든지 리셋(reset) 호출로 인해 `null`이 될 수 있기 때문입니다:
 
 ```ts
 const email = new FormControl('angularrox@gmail.com');
@@ -64,7 +64,7 @@ email.reset();
 console.log(email.value); // null
 ```
 
-TypeScript will enforce that you always handle the possibility that the control has become `null`. If you want to make this control non-nullable, you may use the `nonNullable` option. This will cause the control to reset to its initial value, instead of `null`:
+TypeScript는 컨트롤이 `null`로 바뀌었을 가능성을 항상 처리하도록 enforcing할 것입니다. 이 컨트롤을 널이 아닐 수 있도록 하려면 `nonNullable` 옵션을 사용할 수 있습니다. 이 옵션은 컨트롤이 `null` 대신 초기값으로 리셋되도록 합니다:
 
 ```ts
 const email = new FormControl('angularrox@gmail.com', {nonNullable: true});
@@ -72,44 +72,44 @@ email.reset();
 console.log(email.value); // angularrox@gmail.com
 ```
 
-To reiterate, this option affects the runtime behavior of your form when `.reset()` is called, and should be flipped with care.
+다시 말씀드리지만, 이 옵션은 `.reset()`이 호출될 때 양식의 런타임 동작에 영향을 미치며 신중하게 조정해야 합니다.
 
-### Specifying an Explicit Type
+### 명시적 타입 지정
 
-It is possible to specify the type, instead of relying on inference. Consider a control that is initialized to `null`. Because the initial value is `null`, TypeScript will infer `FormControl<null>`, which is narrower than we want.
+추론에 의존하는 대신 타입을 명시적으로 지정할 수 있습니다. `null`로 초기화된 컨트롤을 고려해보세요. 초기값이 `null`이기 때문에 TypeScript는 `FormControl<null>`로 추론합니다. 이는 우리가 원하는 것보다 좁은 타입입니다.
 
 ```ts
 const email = new FormControl(null);
-email.setValue('angularrox@gmail.com'); // Error!
+email.setValue('angularrox@gmail.com'); // 오류!
 ```
 
-To prevent this, we explicitly specify the type as `string|null`:
+이를 방지하기 위해, 우리는 타입을 `string|null`로 명시적으로 지정합니다:
 
 ```ts
 const email = new FormControl<string|null>(null);
 email.setValue('angularrox@gmail.com');
 ```
 
-## `FormArray`: Dynamic, Homogenous Collections
+## `FormArray`: 동적이고 동질적인 컬렉션
 
-A `FormArray` contains an open-ended list of controls. The type parameter corresponds to the type of each inner control:
+`FormArray`는 무한한 수의 컨트롤 목록을 포함합니다. 타입 매개변수는 각 내부 컨트롤의 타입에 해당합니다:
 
 ```ts
 const names = new FormArray([new FormControl('Alex')]);
 names.push(new FormControl('Jess'));
 ```
 
-This `FormArray` will have the inner controls type `FormControl<string|null>`.
+이 `FormArray`는 내부 컨트롤 타입이 `FormControl<string|null>`이 됩니다.
 
-If you want to have multiple different element types inside the array, you must use `UntypedFormArray`, because TypeScript cannot infer which element type will occur at which position.
+배열 내에 여러 다른 요소 타입을 포함하려면 `UntypedFormArray`를 사용해야 합니다. TypeScript는 어떤 요소 타입이 어느 위치에 발생할 것인지 추론할 수 없습니다.
 
-## `FormGroup` and `FormRecord`
+## `FormGroup` 및 `FormRecord`
 
-Angular provides the `FormGroup` type for forms with an enumerated set of keys, and a type called `FormRecord`, for open-ended or dynamic groups.
+Angular는 열거된 키 집합이 있는 양식을 위해 `FormGroup` 타입을 제공하고, 열려 있는(동적) 그룹을 위해 `FormRecord`라는 타입을 제공합니다.
 
-### Partial Values
+### 부분 값
 
-Consider again a login form:
+로그인 양식을 다시 고려해보세요:
 
 ```ts
 const login = new FormGroup({
@@ -118,17 +118,17 @@ const login = new FormGroup({
 });
 ```
 
-On any `FormGroup`, it is [possible to disable controls](api/forms/FormGroup). Any disabled control will not appear in the group's value.
+모든 `FormGroup`에 대해 컨트롤을 [비활성화](api/forms/FormGroup)할 수 있습니다. 모든 비활성화된 컨트롤은 그룹의 값에 나타나지 않습니다.
 
-As a consequence, the type of `login.value` is `Partial<{email: string, password: string}>`. The `Partial` in this type means that each member might be undefined.
+결과적으로, `login.value`의 타입은 `Partial<{email: string, password: string}>`입니다. 이 타입의 `Partial`은 각 멤버가 정의되지 않을 수 있음(언디파인드)을 의미합니다.
 
-More specifically, the type of `login.value.email` is `string|undefined`, and TypeScript will enforce that you handle the possibly `undefined` value (if you have `strictNullChecks` enabled).
+더 구체적으로, `login.value.email`의 타입은 `string|undefined`이며, TypeScript는 여러분이 어쩌면 `undefined`일 수 있는 값을 처리하도록 enforcing합니다(만약 `strictNullChecks`가 활성화되어 있다면).
 
-If you want to access the value *including* disabled controls, and thus bypass possible `undefined` fields, you can use `login.getRawValue()`.
+비활성화된 컨트롤의 값을 포함하여 값을 접근하고, 따라서 가능성 있는 `undefined` 필드를 우회하려면 `login.getRawValue()`를 사용할 수 있습니다.
 
-### Optional Controls and Dynamic Groups
+### 선택적 컨트롤 및 동적 그룹
 
-Some forms have controls that may or may not be present, which can be added and removed at runtime. You can represent these controls using *optional fields*:
+일부 양식에는 런타임에 추가되거나 제거될 수 있는 컨트롤이 있을 수 있습니다. 이러한 컨트롤은 *선택적 필드*를 사용하여 표현할 수 있습니다:
 
 ```ts
 interface LoginForm {
@@ -144,32 +144,32 @@ const login = new FormGroup<LoginForm>({
 login.removeControl('password');
 ```
 
-In this form, we explicitly specify the type, which allows us to make the `password` control optional. TypeScript will enforce that only optional controls can be added or removed.
+이 양식에서 우리는 타입을 명시적으로 지정하여 `password` 컨트롤을 선택적으로 만들 수 있습니다. TypeScript는 선택적 컨트롤만 추가하거나 제거할 수 있도록 enforcing합니다.
 
 ### `FormRecord`
 
-Some `FormGroup` usages do not fit the above pattern because the keys are not known ahead of time. The `FormRecord` class is designed for that case:
+일부 `FormGroup` 사용은 키가 미리 알려지지 않아 위의 패턴에 맞지 않습니다. `FormRecord` 클래스는 그런 경우를 위해 설계되었습니다:
 
 ```ts
 const addresses = new FormRecord<FormControl<string|null>>({});
 addresses.addControl('Andrew', new FormControl('2340 Folsom St'));
 ```
 
-Any control of type `string|null` can be added to this `FormRecord`.
+타입이 `string|null`인 모든 컨트롤을 이 `FormRecord`에 추가할 수 있습니다.
 
-If you need a `FormGroup` that is both dynamic (open-ended) and heterogeneous (the controls are different types), no improved type safety is possible, and you should use `UntypedFormGroup`.
+동적(열려 있는)이고 이질적인(컨트롤이 서로 다른 타입) `FormGroup`이 필요한 경우, 개선된 타입 안전성은 가능하지 않으며 `UntypedFormGroup`을 사용해야 합니다.
 
-A `FormRecord` can also be built with the `FormBuilder`:
+`FormRecord`는 `FormBuilder`를 사용하여 구축될 수도 있습니다:
 
 ```ts
 const addresses = fb.record({'Andrew': '2340 Folsom St'});
 ```
 
-## `FormBuilder` and `NonNullableFormBuilder`
+## `FormBuilder` 및 `NonNullableFormBuilder`
 
-The `FormBuilder` class has been upgraded to support the new types as well, in the same manner as the above examples.
+`FormBuilder` 클래스는 위의 예제와 같은 방식으로 새로운 타입을 지원하도록 업그레이드되었습니다.
 
-Additionally, an additional builder is available: `NonNullableFormBuilder`. This type is shorthand for specifying `{nonNullable: true}` on every control, and can eliminate significant boilerplate from large non-nullable forms. You can access it using the `nonNullable` property on a `FormBuilder`:
+추가적으로, `NonNullableFormBuilder`라는 추가 빌더가 제공됩니다. 이 타입은 모든 컨트롤에 대해 `{nonNullable: true}`를 지정하는 축약형이며, 큰 비널러블 양식에서 중복 코드를 크게 줄일 수 있습니다. `FormBuilder`에서 `nonNullable` 속성을 사용하여 액세스할 수 있습니다:
 
 ```ts
 const fb = new FormBuilder();
@@ -179,6 +179,6 @@ const login = fb.nonNullable.group({
 });
 ```
 
-On the above example, both inner controls will be non-nullable (i.e. `nonNullable` will be set).
+위 예제에서, 두 개의 내부 컨트롤은 비널러블이 됩니다(즉, `nonNullable`이 설정됩니다).
 
-You can also inject it using the name `NonNullableFormBuilder`.
+이것을 `NonNullableFormBuilder`라는 이름으로 주입할 수도 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/http/interceptors.md b/adev/src/content/guide/http/interceptors.md
index 5c8bc6fec395..79ab0018cbe1 100644
--- a/adev/src/content/guide/http/interceptors.md
+++ b/adev/src/content/guide/http/interceptors.md
@@ -1,32 +1,32 @@
-# Interceptors
+# 인터셉터
 
-`HttpClient` supports a form of middleware known as _interceptors_.
+`HttpClient`는 _인터셉터_라고 알려진 미들웨어의 형태를 지원합니다.
 
-TLDR: Interceptors are middleware that allows common patterns around retrying, caching, logging, and authentication to be abstracted away from individual requests.
+TLDR: 인터셉터는 재시도, 캐싱, 로깅 및 인증과 같은 일반적인 패턴을 개별 요청에서 추상화할 수 있도록 하는 미들웨어입니다.
 
-`HttpClient` supports two kinds of interceptors: functional and DI-based. Our recommendation is to use functional interceptors because they have more predictable behavior, especially in complex setups. Our examples in this guide use functional interceptors, and we cover [DI-based interceptors](#di-based-interceptors) in their own section at the end.
+`HttpClient`는 기능적 인터셉터와 DI 기반 인터셉터의 두 가지 종류의 인터셉터를 지원합니다. 복잡한 설정에서 더 예측 가능한 동작을 가지기 때문에 기능적 인터셉터를 사용하는 것을 추천합니다. 이 가이드의 예제에서는 기능적 인터셉터를 사용하며, [DI 기반 인터셉터](#di-based-interceptors)는 마지막 섹션에서 별도로 다룹니다.
 
-## Interceptors
+## 인터셉터
 
-Interceptors are generally functions which you can run for each request, and have broad capabilities to affect the contents and overall flow of requests and responses. You can install multiple interceptors, which form an interceptor chain where each interceptor processes the request or response before forwarding it to the next interceptor in the chain.
+인터셉터는 일반적으로 요청마다 실행할 수 있는 함수로, 요청 및 응답의 내용과 전반적인 흐름에 영향을 미칠 수 있는 광범위한 기능을 가지고 있습니다. 여러 개의 인터셉터를 설치할 수 있으며, 이는 인터셉터 체인을 형성하고 각 인터셉터는 요청이나 응답을 처리한 후 체인의 다음 인터셉터로 전달합니다.
 
-You can use interceptors to implement a variety of common patterns, such as:
+다양한 일반적인 패턴을 구현하기 위해 인터셉터를 사용할 수 있습니다, 예를 들어:
 
-* Adding authentication headers to outgoing requests to a particular API.
-* Retrying failed requests with exponential backoff.
-* Caching responses for a period of time, or until invalidated by mutations.
-* Customizing the parsing of responses.
-* Measuring server response times and log them.
-* Driving UI elements such as a loading spinner while network operations are in progress.
-* Collecting and batch requests made within a certain timeframe.
-* Automatically failing requests after a configurable deadline or timeout.
-* Regularly polling the server and refreshing results.
+* 특정 API에 대한 아웃고잉 요청에 인증 헤더 추가.
+* 지수 백오프를 사용하여 실패한 요청 재시도.
+* 일정 기간 동안 응답 캐싱, 또는 변동으로 인해 무효화될 때까지.
+* 응답 파싱 사용자 정의.
+* 서버 응답 시간을 측정하고 이를 로그에 기록.
+* 네트워크 작업이 진행되는 동안 로딩 스피너와 같은 UI 요소 구동.
+* 특정 시간 내에 이루어진 요청 수집 및 배치.
+* 구성 가능한 기한 또는 타임아웃 후 자동으로 요청 실패.
+* 서버를 정기적으로 폴링하고 결과 새로 고침.
 
-## Defining an interceptor
+## 인터셉터 정의하기
 
-The basic form of an interceptor is a function which receives the outgoing `HttpRequest` and a `next` function representing the next processing step in the interceptor chain.
+인터셉터의 기본 형태는 아웃고잉 `HttpRequest`와 인터셉터 체인에서 다음 처리 단계를 나타내는 `next` 함수를 받는 함수입니다.
 
-For example, this `loggingInterceptor` will log the outgoing request URL to `console.log` before forwarding the request:
+예를 들어, 이 `loggingInterceptor`는 요청을 전달하기 전에 아웃고잉 요청 URL을 `console.log`에 기록합니다:
 
 <docs-code language="ts">
 export function loggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
@@ -35,11 +35,11 @@ export function loggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerF
 }
 </docs-code>
 
-In order for this interceptor to actually intercept requests, you must configure `HttpClient` to use it.
+이 인터셉터가 실제로 요청을 가로채기 위해서는 `HttpClient`를 사용하도록 구성해야 합니다.
 
-## Configuring interceptors
+## 인터셉터 구성하기
 
-You declare the set of interceptors to use when configuring `HttpClient` through dependency injection, by using the `withInterceptors` feature:
+`HttpClient`를 DI(의존성 주입)를 통해 구성할 때 사용할 인터셉터 집합을 선언합니다. `withInterceptors` 기능을 사용합니다:
 
 <docs-code language="ts">
 bootstrapApplication(AppComponent, {providers: [
@@ -49,11 +49,11 @@ bootstrapApplication(AppComponent, {providers: [
 ]});
 </docs-code>
 
-The interceptors you configure are chained together in the order that you've listed them in the providers. In the above example, the `loggingInterceptor` would process the request and then forward it to the `cachingInterceptor`.
+구성한 인터셉터들은 providers에 나열한 순서에 따라 연결됩니다. 위의 예시에서 `loggingInterceptor`는 요청을 처리한 다음 `cachingInterceptor`로 전달합니다.
 
-### Intercepting response events
+### 응답 이벤트 가로채기
 
-An interceptor may transform the `Observable` stream of `HttpEvent`s returned by `next` in order to access or manipulate the response. Because this stream includes all response events, inspecting the `.type` of each event may be necessary in order to identify the final response object.
+인터셉터는 `next`가 반환하는 `HttpEvent`의 `Observable` 스트림을 변형하여 응답에 접근하거나 조작할 수 있습니다. 이 스트림은 모든 응답 이벤트를 포함하므로 최종 응답 객체를 식별하기 위해 각 이벤트의 `.type`을 검사할 필요가 있습니다.
 
 <docs-code language="ts">
 export function loggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
@@ -65,13 +65,13 @@ export function loggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerF
 }
 </docs-code>
 
-Tip: Interceptors naturally associate responses with their outgoing requests, because they transform the response stream in a closure that captures the request object.
+팁: 인터셉터는 요청 객체를 캡처하는 클로저에서 응답과 아웃고잉 요청을 자연스럽게 연관시킵니다.
 
-## Modifying requests
+## 요청 수정하기
 
-Most aspects of `HttpRequest` and `HttpResponse` instances are _immutable_, and interceptors cannot directly modify them. Instead, interceptors apply mutations by cloning these objects using the `.clone()` operation, and specifying which properties should be mutated in the new instance. This might involve performing immutable updates on the value itself (like `HttpHeaders` or `HttpParams`).
+대부분의 `HttpRequest` 및 `HttpResponse` 인스턴스의 측면은 _불변_이며, 인터셉터는 그것들을 직접 수정할 수 없습니다. 대신 인터셉터는 이러한 객체를 `.clone()` 연산을 사용하여 복제하고 새로운 인스턴스에서 수정할 속성을 지정하여 수정합니다. 이 과정에서 `HttpHeaders` 또는 `HttpParams`와 같은 값에 대해서도 불변 업데이트를 수행할 수 있습니다.
 
-For example, to add a header to a request:
+예를 들어, 요청에 헤더를 추가하려면:
 
 <docs-code language="ts">
 const reqWithHeader = req.clone({
@@ -79,22 +79,22 @@ const reqWithHeader = req.clone({
 });
 </docs-code>
 
-This immutability allows most interceptors to be idempotent if the same `HttpRequest` is submitted to the interceptor chain multiple times. This can happen for a few reasons, including when a request is retried after failure.
+이 불변성 덕분에 대부분의 인터셉터는 동일한 `HttpRequest`가 인터셉터 체인에 여러 번 제출될 경우에도 항등성이 있습니다. 요청이 실패한 후 재시도될 때 이러한 상황이 발생할 수 있습니다.
 
-CRITICAL: The body of a request or response is **not** protected from deep mutations. If an interceptor must mutate the body, take care to handle running multiple times on the same request.
+중요: 요청 또는 응답의 본체는 **깊은 수정으로부터 보호되지 않습니다**. 인터셉터가 본체를 수정해야 하는 경우, 동일한 요청에 대해 여러 번 실행하는 것을 처리하는 데 주의하십시오.
 
-## Dependency injection in interceptors
+## 인터셉터에서의 의존성 주입
 
-Interceptors are run in the _injection context_ of the injector which registered them, and can use  Angular's `inject` API to retrieve dependencies.
+인터셉터는 이를 등록한 주입기의 _주입 컨텍스트_에서 실행되며, Angular의 `inject` API를 사용하여 의존성을 검색할 수 있습니다.
 
-For example, suppose an application has a service called `AuthService`, which creates authentication tokens for outgoing requests. An interceptor can inject and use this service:
+예를 들어, 애플리케이션에 아웃고잉 요청을 위한 인증 토큰을 생성하는 `AuthService`라는 서비스가 있다고 가정합니다. 인터셉터는 이 서비스를 주입하고 사용할 수 있습니다:
 
 <docs-code language="ts">
 export function authInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn) {
-  // Inject the current `AuthService` and use it to get an authentication token:
+  // 현재 `AuthService`를 주입하고 인증 토큰을 가져옵니다.
   const authToken = inject(AuthService).getAuthToken();
 
-  // Clone the request to add the authentication header.
+  // 인증 헤더를 추가하기 위해 요청을 복제합니다.
   const newReq = req.clone({
     headers: req.headers.append('X-Authentication-Token', authToken),
   });
@@ -102,41 +102,41 @@ export function authInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn)
 }
 </docs-code>
 
-## Request and response metadata
+## 요청 및 응답 메타데이터
 
-Often it's useful to include information in a request that's not sent to the backend, but is specifically meant for interceptors. `HttpRequest`s have a `.context` object which stores this kind of metadata as an instance of `HttpContext`. This object functions as a typed map, with keys of type `HttpContextToken`.
+종종 백엔드로 전송되지 않는 정보가 요청에 포함되는 것이 유용하지만, 특히 인터셉터를 위해 고안된 경우가 있습니다. `HttpRequest`는 이러한 종류의 메타데이터를 `HttpContext`의 인스턴스로 저장하는 `.context` 객체를 가지고 있습니다. 이 객체는 `HttpContextToken` 타입의 키를 가진 타입화된 맵처럼 작동합니다.
 
-To illustrate how this system works, let's use metadata to control whether a caching interceptor is enabled for a given request.
+이 시스템이 어떻게 작동하는지 설명하기 위해, 메타데이터를 사용하여 특정 요청에 대해 캐싱 인터셉터가 활성화되었는지 여부를 제어해 봅시다.
 
-### Defining context tokens
+### 컨텍스트 토큰 정의하기
 
-To store whether the caching interceptor should cache a particular request in that request's `.context` map, define a new `HttpContextToken` to act as a key:
+캐싱 인터셉터가 특정 요청을 캐시해야 하는지 여부를 그 요청의 `.context` 맵에 저장하기 위해 새로운 `HttpContextToken`을 정의하여 키로 사용합니다:
 
 <docs-code language="ts">
 export const CACHING_ENABLED = new HttpContextToken<boolean>(() => true);
 </docs-code>
 
-The provided function creates the default value for the token for requests that haven't explicitly set a value for it. Using a function ensures that if the token's value is an object or array, each request gets its own instance.
+제공된 함수는 해당 요청이 명시적으로 값을 설정하지 않은 경우 토큰의 기본값을 생성합니다. 함수를 사용하면 토큰의 값이 객체나 배열인 경우, 각 요청이 고유한 인스턴스를 갖도록 보장합니다.
 
-### Reading the token in an interceptor
+### 인터셉터에서 토큰 읽기
 
-An interceptor can then read the token and choose to apply caching logic or not based on its value:
+인터셉터는 토큰을 읽고 그 값에 따라 캐싱 논리를 적용할지 여부를 선택할 수 있습니다:
 
 <docs-code language="ts">
 export function cachingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   if (req.context.get(CACHING_ENABLED)) {
-    // apply caching logic
+    // 캐싱 논리 적용
     return ...;
   } else {
-    // caching has been disabled for this request
+    // 이 요청에 대해 캐싱이 비활성화되었습니다.
     return next(req);
   }
 }
 </docs-code>
 
-### Setting context tokens when making a request
+### 요청 시 컨텍스트 토큰 설정하기
 
-When making a request via the `HttpClient` API, you can provide values for `HttpContextToken`s:
+`HttpClient` API를 통해 요청을 만들 때, `HttpContextToken`에 대한 값을 제공할 수 있습니다:
 
 <docs-code language="ts">
 const data$ = http.get('/sensitive/data', {
@@ -144,19 +144,19 @@ const data$ = http.get('/sensitive/data', {
 });
 </docs-code>
 
-Interceptors can read these values from the `HttpContext` of the request.
+인터셉터는 요청의 `HttpContext`에서 이러한 값을 읽을 수 있습니다.
 
-### The request context is mutable
+### 요청 컨텍스트는 변경 가능
 
-Unlike other properties of `HttpRequest`s, the associated `HttpContext` is _mutable_. If an interceptor changes the context of a request that is later retried, the same interceptor will observe the context mutation when it runs again. This is useful for passing state across multiple retries if needed.
+`HttpRequest`의 다른 속성과 달리, 관련된 `HttpContext`는 _변경 가능_합니다. 인터셉터가 나중에 재시도되는 요청의 컨텍스트를 변경하면, 같은 인터셉터가 다시 실행될 때 컨텍스트 변화를 관찰합니다. 이는 필요할 경우 여러 개의 재시도 간에 상태를 전달하는 데 유용합니다.
 
-## Synthetic responses
+## 합성 응답
 
-Most interceptors will simply invoke the `next` handler while transforming either the request or the response, but this is not strictly a requirement. This section discusses several of the ways in which an interceptor may incorporate more advanced behavior.
+대부분의 인터셉터는 요청이나 응답을 변형하면서 `next` 핸들러를 단순히 호출하지만, 이것은 엄격한 요구사항은 아닙니다. 이 섹션에서는 인터셉터가 더 고급 동작을 통합하는 몇 가지 방법에 대해 설명합니다.
 
-Interceptors are not required to invoke `next`. They may instead choose to construct responses through some other mechanism, such as from a cache or by sending the request through an alternate mechanism.
+인터셉터는 `next`를 호출할 필요가 없습니다. 대신 캐시에서 또는 대체 메커니즘을 통해 요청을 보내는 것과 같은 다른 메커니즘을 통해 응답을 구성할 수 있습니다.
 
-Constructing a response is possible using the `HttpResponse` constructor:
+응답을 구성하는 것은 `HttpResponse` 생성자를 사용하는 것으로 가능합니다:
 
 <docs-code language="ts">
 const resp = new HttpResponse({
@@ -164,11 +164,11 @@ const resp = new HttpResponse({
 });
 </docs-code>
 
-## DI-based interceptors
+## DI 기반 인터셉터
 
-`HttpClient` also supports interceptors which are defined as injectable classes and configured through the DI system. The capabilities of DI-based interceptors are identical to those of functional interceptors, but the configuration mechanism is different.
+`HttpClient`는 인젝터블 클래스 형태로 정의된 인터셉터도 지원하며, DI 시스템을 통해 구성됩니다. DI 기반 인터셉터의 기능은 기능적 인터셉터와 동일하지만, 구성 메커니즘이 다릅니다.
 
-A DI-based interceptor is an injectable class which implements the `HttpInterceptor` interface:
+DI 기반 인터셉터는 `HttpInterceptor` 인터페이스를 구현하는 인젝터블 클래스입니다:
 
 <docs-code language="ts">
 @Injectable()
@@ -180,12 +180,12 @@ export class LoggingInterceptor implements HttpInterceptor {
 }
 </docs-code>
 
-DI-based interceptors are configured through a dependency injection multi-provider:
+DI 기반 인터셉터는 의존성 주입 다중 제공자를 통해 구성됩니다:
 
 <docs-code language="ts">
 bootstrapApplication(AppComponent, {providers: [
   provideHttpClient(
-    // DI-based interceptors must be explicitly enabled.
+    // DI 기반 인터셉터는 명시적으로 활성화해야 합니다.
     withInterceptorsFromDi(),
   ),
 
@@ -193,4 +193,4 @@ bootstrapApplication(AppComponent, {providers: [
 ]});
 </docs-code>
 
-DI-based interceptors run in the order that their providers are registered. In an app with an extensive and hierarchical DI configuration, this order can be very hard to predict.
+DI 기반 인터셉터는 제공자가 등록된 순서에 따라 실행됩니다. 광범위하고 계층적인 DI 구성으로 된 앱에서는 이 순서를 예측하기 매우 어려울 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/http/making-requests.md b/adev/src/content/guide/http/making-requests.md
index 8911830e03dc..1834b3ff78c6 100644
--- a/adev/src/content/guide/http/making-requests.md
+++ b/adev/src/content/guide/http/making-requests.md
@@ -1,84 +1,84 @@
-# Making HTTP requests
+# HTTP 요청 만들기
 
-`HttpClient` has methods corresponding to the different HTTP verbs used to make requests, both to load data and to apply mutations on the server. Each method returns an [RxJS `Observable`](https://rxjs.dev/guide/observable) which, when subscribed, sends the request and then emits the results when the server responds.
+`HttpClient`는 데이터를 불러오거나 서버에서 변형을 적용하기 위해 요청을 만드는 데 사용되는 다양한 HTTP 동사에 해당하는 메서드를 가지고 있습니다. 각 메서드는 요청을 보내고 서버가 응답할 때 결과를 방출하는 [RxJS `Observable`](https://rxjs.dev/guide/observable)를 반환합니다.
 
-Note: `Observable`s created by `HttpClient` may be subscribed any number of times and will make a new backend request for each subscription.
+참고: `HttpClient`로 생성된 `Observable`은 몇 번이라도 구독할 수 있으며, 각 구독마다 새 백엔드 요청을 만듭니다.
 
-Through an options object passed to the request method, various properties of the request and the returned response type can be adjusted.
+요청 메서드에 전달된 옵션 객체를 통해 요청의 다양한 속성과 반환된 응답 유형을 조정할 수 있습니다.
 
-## Fetching JSON data
+## JSON 데이터 가져오기
 
-Fetching data from a backend often requires making a GET request using the [`HttpClient.get()`](api/common/http/HttpClient#get) method. This method takes two arguments: the string endpoint URL from which to fetch, and an *optional options* object to configure the request.
+백엔드에서 데이터를 가져올 때는 종종 [`HttpClient.get()`](api/common/http/HttpClient#get) 메서드를 사용하여 GET 요청을 수행해야 합니다. 이 메서드는 두 개의 인수를 취합니다: 데이터를 가져올 문자열 엔드포인트 URL과 요청을 구성하기 위한 *선택적 옵션* 객체입니다.
 
-For example, to fetch configuration data from a hypothetical API using the `HttpClient.get()` method:
+예를 들어, `HttpClient.get()` 메서드를 사용하여 가상의 API에서 구성 데이터를 가져오는 방법은 다음과 같습니다:
 
 <docs-code language="ts">
 http.get<Config>('/api/config').subscribe(config => {
-  // process the configuration.
+  // 구성 처리
 });
 </docs-code>
 
-Note the generic type argument which specifies that the data returned by the server will be of type `Config`. This argument is optional, and if you omit it then the returned data will have type `Object`.
+서버가 반환하는 데이터가 `Config` 유형이 될 것이라고 지정하는 일반 타입 인수를 주의하세요. 이 인수는 선택 사항이며, 생략하면 반환되는 데이터의 유형은 `Object`가 됩니다.
 
-Tip: When dealing with data of uncertain structure and potential `undefined` or `null` values, consider using the `unknown` type instead of `Object` as the response type.
+팁: 구조가 불확실하고 잠재적으로 `undefined` 또는 `null` 값을 처리할 때는 응답 유형으로 `Object` 대신 `unknown` 유형을 사용하는 것을 고려하세요.
 
-CRITICAL: The generic type of request methods is a type **assertion** about the data returned by the server. `HttpClient` does not verify that the actual return data matches this type.
+중요: 요청 메서드의 일반 타입은 서버가 반환하는 데이터에 대한 **단언**입니다. `HttpClient`는 실제 반환 데이터가 이 타입과 일치하는지 확인하지 않습니다.
 
-## Fetching other types of data
+## 다른 유형의 데이터 가져오기
 
-By default, `HttpClient` assumes that servers will return JSON data. When interacting with a non-JSON API, you can tell `HttpClient` what response type to expect and return when making the request. This is done with the `responseType` option.
+기본적으로 `HttpClient`는 서버가 JSON 데이터를 반환할 것이라고 가정합니다. 비-JSON API와 상호작용할 때는 요청 시 예상 및 반환할 응답 유형을 `HttpClient`에 전달할 수 있습니다. 이는 `responseType` 옵션으로 수행됩니다.
 
-| **`responseType` value** | **Returned response type** |
+| **`responseType` 값** | **반환된 응답 유형** |
 | - | - |
-| `'json'` (default) | JSON data of the given generic type |
-| `'text'` | string data |
-| `'arraybuffer'` | [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) containing the raw response bytes |
-| `'blob'` | [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) instance |
+| `'json'` (기본값) | 주어진 일반 유형의 JSON 데이터 |
+| `'text'` | 문자열 데이터 |
+| `'arraybuffer'` | 원시 응답 바이트를 포함하는 [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) |
+| `'blob'` | [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) 인스턴스 |
 
-For example, you can ask `HttpClient` to download the raw bytes of a `.jpeg` image into an `ArrayBuffer`:
+예를 들어, `HttpClient`에 `.jpeg` 이미지의 원시 바이트를 `ArrayBuffer`로 다운로드하도록 요청할 수 있습니다:
 
 <docs-code language="ts">
 http.get('/images/dog.jpg', {responseType: 'arraybuffer'}).subscribe(buffer => {
-  console.log('The image is ' + buffer.byteLength + ' bytes large');
+  console.log('이미지가 ' + buffer.byteLength + ' 바이트 크기입니다');
 });
 </docs-code>
 
-<docs-callout important title="Literal value for `responseType`">
-Because the value of `responseType` affects the type returned by `HttpClient`, it must have a literal type and not a `string` type.
+<docs-callout important title="`responseType`에 대한 리터럴 값">
+`responseType`의 값은 `HttpClient`가 반환하는 타입에 영향을 미치므로, 리터럴 타입이어야 하며 `string` 타입이 되어서는 안 됩니다.
 
-This happens automatically if the options object passed to the request method is a literal object, but if you're extracting the request options out into a variable or helper method you might need to explicitly specify it as a literal, such as `responseType: 'text' as const`.
+이것은 요청 메서드에 전달된 옵션 객체가 리터럴 객체일 경우 자동으로 발생하지만, 요청 옵션을 변수나 헬퍼 메서드로 분리하는 경우 리터럴로 명시해야 할 수 있습니다. 예: `responseType: 'text' as const`.
 </docs-callout>
 
-## Mutating server state
+## 서버 상태 변경
 
-Server APIs which perform mutations often require making POST requests with a request body specifying the new state or the change to be made.
+변형을 수행하는 서버 API는 종종 새로운 상태나 변경사항을 지정하는 요청 본체를 포함하는 POST 요청을 수행해야 합니다.
 
-The [`HttpClient.post()`](api/common/http/HttpClient#post) method behaves similarly to `get()`, and accepts an additional `body` argument before its options:
+[`HttpClient.post()`](api/common/http/HttpClient#post) 메서드는 `get()`와 유사하게 동작하며, 옵션 전에 추가적인 `body` 인수를 수락합니다:
 
 <docs-code language="ts">
 http.post<Config>('/api/config', newConfig).subscribe(config => {
-  console.log('Updated config:', config);
+  console.log('업데이트된 구성:', config);
 });
 </docs-code>
 
-Many different types of values can be provided as the request's `body`, and `HttpClient` will serialize them accordingly:
+요청의 `body`로 제공할 수 있는 다양한 유형의 값이 있으며, `HttpClient`는 그에 따라 직렬화합니다:
 
-| **`body` type** | **Serialized as** |
+| **`body` 유형** | **직렬화된 형태** |
 | - | - |
-| string | Plain text |
-| number, boolean, array, or plain object | JSON |
-| [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) | raw data from the buffer |
-| [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) | raw data with the `Blob`'s content type |
-| [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) | `multipart/form-data` encoded data |
-| [`HttpParams`](api/common/http/HttpParams) or [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams) | `application/x-www-form-urlencoded` formatted string |
+| 문자열 | 일반 텍스트 |
+| 숫자, 불린, 배열, 또는 일반 객체 | JSON |
+| [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) | 버퍼의 원시 데이터 |
+| [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) | `Blob`의 콘텐츠 유형을 가진 원시 데이터 |
+| [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) | `multipart/form-data`로 인코딩된 데이터 |
+| [`HttpParams`](api/common/http/HttpParams) 또는 [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams) | `application/x-www-form-urlencoded` 형식의 문자열 |
 
-IMPORTANT: Remember to `.subscribe()` to mutation request `Observable`s in order to actually fire the request.
+중요: 요청을 실제로 발생시키기 위해 변형 요청 `Observable`에 반드시 `.subscribe()` 해야 합니다.
 
-## Setting URL parameters
+## URL 매개변수 설정
 
-Specify request parameters that should be included in the request URL using the `params` option.
+요청 URL에 포함되어야 할 요청 매개변수를 `params` 옵션을 사용하여 지정합니다.
 
-Passing an object literal is the simplest way of configuring URL parameters:
+객체 리터럴을 전달하는 것이 URL 매개변수를 구성하는 가장 간단한 방법입니다:
 
 <docs-code language="ts">
 http.get('/api/config', {
@@ -88,9 +88,9 @@ http.get('/api/config', {
 });
 </docs-code>
 
-Alternatively, pass an instance of `HttpParams` if you need more control over the construction or serialization of the parameters.
+또는 매개변수의 구성이나 직렬화에 대한 추가적인 제어가 필요하면 `HttpParams` 인스턴스를 전달합니다.
 
-IMPORTANT: Instances of `HttpParams` are _immutable_ and cannot be directly changed. Instead, mutation methods such as `append()` return a new instance of `HttpParams` with the mutation applied.
+중요: `HttpParams`의 인스턴스는 _불변_이며 직접 변경할 수 없습니다. 대신, `append()`와 같은 변형 메서드는 변형이 적용된 새로운 `HttpParams` 인스턴스를 반환합니다.
 
 <docs-code language="ts">
 const baseParams = new HttpParams().set('filter', 'all');
@@ -102,13 +102,13 @@ http.get('/api/config', {
 });
 </docs-code>
 
-You can instantiate `HttpParams` with a custom `HttpParameterCodec` that determines how `HttpClient` will encode the parameters into the URL.
+사용자가 `HttpClient`가 매개변수를 URL에 어떻게 인코딩할지를 결정하는 사용자 정의 `HttpParameterCodec`로 `HttpParams`를 인스턴스화할 수 있습니다.
 
-## Setting request headers
+## 요청 헤더 설정
 
-Specify request headers that should be included in the request using the `headers` option.
+요청에 포함되어야 할 요청 헤더를 `headers` 옵션을 사용하여 지정합니다.
 
-Passing an object literal is the simplest way of configuring request headers:
+객체 리터럴을 전달하는 것이 요청 헤더를 구성하는 가장 간단한 방법입니다:
 
 <docs-code language="ts">
 http.get('/api/config', {
@@ -120,9 +120,9 @@ http.get('/api/config', {
 });
 </docs-code>
 
-Alternatively, pass an instance of `HttpHeaders` if you need more control over the construction of headers
+또는 헤더 구조에 대한 더 많은 제어가 필요하면 `HttpHeaders`의 인스턴스를 전달합니다.
 
-IMPORTANT: Instances of `HttpHeaders` are _immutable_ and cannot be directly changed. Instead, mutation methods such as `append()` return a new instance of `HttpHeaders` with the mutation applied.
+중요: `HttpHeaders`의 인스턴스는 _불변_이며 직접 변경할 수 없습니다. 대신, `append()`와 같은 변형 메서드는 변형이 적용된 새로운 `HttpHeaders` 인스턴스를 반환합니다.
 
 <docs-code language="ts">
 const baseHeaders = new HttpHeaders().set('X-Debug-Level', 'minimal');
@@ -134,34 +134,34 @@ http.get<Config>('/api/config', {
 });
 </docs-code>
 
-## Interacting with the server response events
+## 서버 응답 이벤트와 상호작용
 
-For convenience, `HttpClient` by default returns an `Observable` of the data returned by the server (the response body). Occasionally it's desirable to examine the actual response, for example to retrieve specific response headers.
+편의를 위해, `HttpClient`는 기본적으로 서버가 반환하는 데이터의 `Observable` (응답 본문)을 반환합니다. 때때로 특정 응답 헤더를 검색하는 등의 이유로 실제 응답을 조사하는 것이 바람직합니다.
 
-To access the entire response, set the `observe` option to `'response'`:
+전체 응답에 접근하려면 `observe` 옵션을 `'response'`로 설정합니다:
 
 <docs-code language="ts">
 http.get<Config>('/api/config', {observe: 'response'}).subscribe(res => {
-  console.log('Response status:', res.status);
-  console.log('Body:', res.body);
+  console.log('응답 상태:', res.status);
+  console.log('본문:', res.body);
 });
 </docs-code>
 
-<docs-callout important title="Literal value for `observe`">
-Because the value of `observe` affects the type returned by `HttpClient`, it must have a literal type and not a `string` type.
+<docs-callout important title="`observe`에 대한 리터럴 값">
+`observe`의 값은 `HttpClient`가 반환하는 타입에 영향을 미치므로, 리터럴 타입이어야 하며 `string` 타입이 되어서는 안 됩니다.
 
-This happens automatically if the options object passed to the request method is a literal object, but if you're extracting the request options out into a variable or helper method you might need to explicitly specify it as a literal, such as `observe: 'response' as const`.
+이것은 요청 메서드에 전달된 옵션 객체가 리터럴 객체일 경우 자동으로 발생하지만, 요청 옵션을 변수나 헬퍼 메서드로 분리하는 경우 리터럴로 명시해야 할 수 있습니다. 예: `observe: 'response' as const`.
 </docs-callout>
 
-## Receiving raw progress events
+## 원시 진행 상태 이벤트 수신
 
-In addition to the response body or response object, `HttpClient` can also return a stream of raw _events_ corresponding to specific moments in the request lifecycle. These events include when the request is sent, when the response header is returned, and when the body is complete. These events can also include _progress events_ which report upload and download status for large request or response bodies.
+응답 본문이나 응답 객체 외에도 `HttpClient`는 요청 생명주기의 특정 순간에 해당하는 원시 _이벤트_의 스트림을 반환할 수도 있습니다. 이러한 이벤트에는 요청이 전송되는 시점, 응답 헤더가 반환되는 시점 및 본체가 완료되는 시점이 포함됩니다. 이러한 이벤트는 대규모 요청 또는 응답 본체에 대한 업로드 및 다운로드 상태를 보고하는 _진행 상태 이벤트_를 포함할 수 있습니다.
 
-Progress events are disabled by default (as they have a performance cost) but can be enabled with the `reportProgress` option.
+진행 상태 이벤트는 기본적으로 비활성화되어 있으며(성능 비용이 발생함) `reportProgress` 옵션을 통해 활성화할 수 있습니다.
 
-Note: The optional `fetch` implementation of `HttpClient` does not report _upload_ progress events.
+참고: `HttpClient`의 선택적 `fetch` 구현은 _업로드_ 진행 상태 이벤트를 보고하지 않습니다.
 
-To observe the event stream, set the `observe` option to `'events'`:
+이벤트 스트림을 관찰하려면 `observe` 옵션을 `'events'`로 설정합니다:
 
 <docs-code language="ts">
 http.post('/api/upload', myData, {
@@ -170,66 +170,66 @@ http.post('/api/upload', myData, {
 }).subscribe(event => {
   switch (event.type) {
     case HttpEventType.UploadProgress:
-      console.log('Uploaded ' + event.loaded + ' out of ' + event.total + ' bytes');
+      console.log('업로드된 ' + event.loaded + ' 바이트 중 ' + event.total + ' 바이트');
       break;
     case HttpEventType.Response:
-      console.log('Finished uploading!');
+      console.log('업로드 완료!');
       break;
   }
 });
 </docs-code>
 
-<docs-callout important title="Literal value for `observe`">
-Because the value of `observe` affects the type returned by `HttpClient`, it must have a literal type and not a `string` type.
+<docs-callout important title="`observe`에 대한 리터럴 값">
+`observe`의 값은 `HttpClient`가 반환하는 타입에 영향을 미치므로, 리터럴 타입이어야 하며 `string` 타입이 되어서는 안 됩니다.
 
-This happens automatically if the options object passed to the request method is a literal object, but if you're extracting the request options out into a variable or helper method you might need to explicitly specify it as a literal, such as `observe: 'events' as const`.
+이것은 요청 메서드에 전달된 옵션 객체가 리터럴 객체일 경우 자동으로 발생하지만, 요청 옵션을 변수나 헬퍼 메서드로 분리하는 경우 리터럴로 명시해야 할 수 있습니다. 예: `observe: 'events' as const`.
 </docs-callout>
 
-Each `HttpEvent` reported in the event stream has a `type` which distinguishes what the event represents:
+이벤트 스트림에서 보고된 각 `HttpEvent`는 이벤트가 무엇을 나타내는지를 구별하는 `type`을 가지고 있습니다:
 
-| **`type` value** | **Event meaning** |
+| **`type` 값** | **이벤트 의미** |
 | - | - |
-| `HttpEventType.Sent` | The request has been dispatched to the server |
-| `HttpEventType.UploadProgress` | An `HttpUploadProgressEvent` reporting progress on uploading the request body |
-| `HttpEventType.ResponseHeader` | The head of the response has been received, including status and headers |
-| `HttpEventType.DownloadProgress` | An `HttpDownloadProgressEvent` reporting progress on downloading the response body |
-| `HttpEventType.Response` | The entire response has been received, including the response body |
-| `HttpEventType.User` | A custom event from an Http interceptor.
+| `HttpEventType.Sent` | 요청이 서버에 전송되었습니다 |
+| `HttpEventType.UploadProgress` | 요청 본체 업로드 진행 상황을 보고하는 `HttpUploadProgressEvent` |
+| `HttpEventType.ResponseHeader` | 상태 및 헤더를 포함한 응답의 헤드가 수신되었습니다 |
+| `HttpEventType.DownloadProgress` | 응답 본체 다운로드 진행 상황을 보고하는 `HttpDownloadProgressEvent` |
+| `HttpEventType.Response` | 응답 본체를 포함한 전체 응답이 수신되었습니다 |
+| `HttpEventType.User` | Http 인터셉터에서 전송된 사용자 정의 이벤트입니다.
 
-## Handling request failure
+## 요청 실패 처리
 
-There are two ways an HTTP request can fail:
+HTTP 요청이 실패할 수 있는 두 가지 방식이 있습니다:
 
-* A network or connection error can prevent the request from reaching the backend server.
-* The backend can receive the request but fail to process it, and return an error response.
+* 네트워크 또는 연결 오류가 요청이 백엔드 서버에 도달하는 것을 방지할 수 있습니다.
+* 백엔드는 요청을 수신하지만 처리에 실패하여 오류 응답을 반환할 수 있습니다.
 
-`HttpClient` captures both kinds of errors in an `HttpErrorResponse` which it returns through the `Observable`'s error channel. Network errors have a `status` code of `0` and an `error` which is an instance of [`ProgressEvent`](https://developer.mozilla.org/docs/Web/API/ProgressEvent). Backend errors have the failing `status` code returned by the backend, and the error response as the `error`. Inspect the response to identify the error's cause and the appropriate action to handle the error.
+`HttpClient`는 두 가지 유형의 오류를 `HttpErrorResponse`로 캡처하여 `Observable`의 오류 채널을 통해 반환합니다. 네트워크 오류는 `status` 코드가 `0`이고, `error`는 [`ProgressEvent`](https://developer.mozilla.org/docs/Web/API/ProgressEvent)의 인스턴스입니다. 백엔드 오류는 백엔드에서 반환된 실패하는 `status` 코드 및 오류 응답을 `error`로 가집니다. 응답을 검사하여 오류의 원인과 이를 처리하기 위한 적절한 조치를 식별합니다.
 
-The [RxJS library](https://rxjs.dev/) offers several operators which can be useful for error handling.
+[RxJS 라이브러리](https://rxjs.dev/)는 오류 처리를 위해 유용할 수 있는 여러 연산자를 제공합니다.
 
-You can use the `catchError` operator to transform an error response into a value for the UI. This value can tell the UI to display an error page or value, and capture the error's cause if necessary.
+`catchError` 연산자를 사용하여 오류 응답을 UI용 값으로 변환할 수 있습니다. 이 값은 UI에 오류 페이지나 값을 표시하라고 지시하고, 필요 시 오류의 원인을 캡처할 수 있습니다.
 
-Sometimes transient errors such as network interruptions can cause a request to fail unexpectedly, and simply retrying the request will allow it to succeed. RxJS provides several *retry* operators which automatically re-subscribe to a failed `Observable` under certain conditions. For example, the `retry()` operator will automatically attempt to re-subscribe a specified number of times.
+때때로 네트워크 중단과 같은 일시적인 오류로 인해 요청이 예기치 않게 실패할 수 있으며, 단순히 요청을 다시 시도하면 성공할 수 있습니다. RxJS는 특정 조건에서 실패한 `Observable`을 자동으로 다시 구독하는 여러 *재시도* 연산자를 제공합니다. 예를 들어, `retry()` 연산자는 지정된 횟수만큼 자동으로 다시 구독을 시도합니다.
 
-## Http `Observable`s
+## Http `Observable`
 
-Each request method on `HttpClient` constructs and returns an `Observable` of the requested response type. Understanding how these `Observable`s work is important when using `HttpClient`.
+`HttpClient`의 각 요청 메서드는 요청된 응답 유형의 `Observable`을 구성하고 반환합니다. 이러한 `Observable`이 작동하는 방식을 이해하는 것은 `HttpClient`를 사용할 때 중요합니다.
 
-`HttpClient` produces what RxJS calls "cold" `Observable`s, meaning that no actual request happens until the `Observable` is subscribed. Only then is the request actually dispatched to the server. Subscribing to the same `Observable` multiple times will trigger multiple backend requests. Each subscription is independent.
+`HttpClient`는 RxJS에서 "콜드" `Observable`이라고 부르며, 이는 `Observable`이 구독될 때까지 실제 요청이 발생하지 않는 것을 의미합니다. 구독해야 요청이 실제로 서버에 전송됩니다. 동일한 `Observable`에 여러 번 구독하면 여러 백엔드 요청이 발생합니다. 각 구독은 독립적입니다.
 
-TIP: You can think of `HttpClient` `Observable`s as _blueprints_ for actual server requests.
+팁: `HttpClient`의 `Observable`을 실제 서버 요청에 대한 _청사진_으로 생각할 수 있습니다.
 
-Once subscribed, unsubscribing will abort the in-progress request. This is very useful if the `Observable` is subscribed via the `async` pipe, as it will automatically cancel the request if the user navigates away from the current page. Additionally, if you use the `Observable` with an RxJS combinator like `switchMap`, this cancellation will clean up any stale requests.
+구독한 후 구독 취소는 진행 중인 요청을 중단합니다. 이는 `Observable`이 `async` 파이프를 통해 구독되는 경우 매우 유용하며, 사용자가 현재 페이지에서 탐색할 경우 요청을 자동으로 취소합니다. 또한 RxJS의 조합자 `switchMap`과 함께 `Observable`을 사용할 경우 이 취소는 오래된 요청을 정리합니다.
 
-Once the response returns, `Observable`s from `HttpClient` usually complete (although interceptors can influence this).
+응답이 반환되면 `HttpClient`의 `Observable`은 일반적으로 완료됩니다(인터셉터가 이를 영향을 미칠 수 있음).
 
-Because of the automatic completion, there is usually no risk of memory leaks if `HttpClient` subscriptions are not cleaned up. However, as with any async operation, we strongly recommend that you clean up subscriptions when the component using them is destroyed, as the subscription callback may otherwise run and encounter errors when it attempts to interact with the destroyed component.
+자동 완성 덕분에 `HttpClient` 구독이 정리되지 않더라도 메모리 누수의 위험은 일반적으로 없습니다. 그러나 모든 비동기 작업과 마찬가지로, 사용하는 컴포넌트가 파괴될 때 구독을 정리할 것을 강력히 권장합니다. 그렇지 않으면 구독 콜백이 실행되어 파괴된 컴포넌트와 상호작용하려고 할 때 오류가 발생할 수 있습니다.
 
-TIP: Using the `async` pipe or the `toSignal` operation to subscribe to `Observable`s ensures that subscriptions are disposed properly.
+팁: `Observable`에 구독하기 위해 `async` 파이프나 `toSignal` 연산자를 사용하면 구독이 적절히 해제됩니다.
 
-## Best practices
+## 모범 사례
 
-While `HttpClient` can be injected and used directly from components, generally we recommend you create reusable, injectable services which isolate and encapsulate data access logic. For example, this `UserService` encapsulates the logic to request data for a user by their id:
+`HttpClient`를 컴포넌트에서 직접 주입하고 사용할 수 있지만, 일반적으로 재사용 가능한 주입 가능한 서비스를 생성하여 데이터 접근 로직을 격리하고 캡슐화하는 것을 권장합니다. 예를 들어, 이 `UserService`는 사용자 ID로 데이터를 요청하는 로직을 캡슐화합니다:
 
 <docs-code language="ts">
 @Injectable({providedIn: 'root'})
@@ -242,7 +242,7 @@ export class UserService {
 }
 </docs-code>
 
-Within a component, you can combine `@if` with the `async` pipe to render the UI for the data only after it's finished loading:
+컴포넌트 내에서 `@if`를 `async` 파이프와 결합하여 데이터가 로딩을 마친 후에만 UI를 렌더링할 수 있습니다:
 
 <docs-code language="ts">
 import { AsyncPipe } from '@angular/common';
@@ -250,8 +250,8 @@ import { AsyncPipe } from '@angular/common';
   imports: [AsyncPipe],
   template: `
     @if (user$ | async; as user) {
-      <p>Name: {{ user.name }}</p>
-      <p>Biography: {{ user.biography }}</p>
+      <p>이름: {{ user.name }}</p>
+      <p>전기: {{ user.biography }}</p>
     }
   `,
 })
@@ -265,4 +265,4 @@ export class UserProfileComponent {
     this.user$ = this.userService.getUser(this.userId);
   }
 }
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/guide/http/overview.md b/adev/src/content/guide/http/overview.md
index b9cdfd0a87b8..9ec3a651f4e2 100644
--- a/adev/src/content/guide/http/overview.md
+++ b/adev/src/content/guide/http/overview.md
@@ -1,19 +1,19 @@
-# Understanding communicating with backend services using HTTP
+# 백엔드 서비스와 HTTP를 사용하여 통신 이해하기
 
-Most front-end applications need to communicate with a server over the HTTP protocol, to download or upload data and access other back-end services. Angular provides a client HTTP API for Angular applications, the `HttpClient` service class in `@angular/common/http`.
+대부분의 프론트엔드 애플리케이션은 HTTP 프로토콜을 통해 서버와 통신해야 하며, 데이터를 다운로드하거나 업로드하고 다른 백엔드 서비스에 접근해야 합니다. Angular는 Angular 애플리케이션을 위한 클라이언트 HTTP API인 `@angular/common/http`의 `HttpClient` 서비스 클래스를 제공합니다.
 
-## HTTP client service features
+## HTTP 클라이언트 서비스 기능
 
-The HTTP client service offers the following major features:
+HTTP 클라이언트 서비스는 다음과 같은 주요 기능을 제공합니다:
 
-* The ability to request [typed response values](guide/http/making-requests#fetching-json-data)
-* Streamlined [error handling](guide/http/making-requests#handling-request-failure)
-* Request and response [interception](guide/http/interceptors)
-* Robust [testing utilities](guide/http/testing)
+* [타입이 지정된 응답 값 요청](guide/http/making-requests#fetching-json-data) 기능
+* 간소화된 [오류 처리](guide/http/making-requests#handling-request-failure)
+* 요청 및 응답 [가로채기](guide/http/interceptors)
+* 강력한 [테스트 유틸리티](guide/http/testing)
 
-## What's next
+## 다음 단계
 
 <docs-pill-row>
-  <docs-pill href="guide/http/setup" title="Setting up HttpClient"/>
-  <docs-pill href="guide/http/making-requests" title="Making HTTP requests"/>
-</docs-pill-row>
+  <docs-pill href="guide/http/setup" title="HttpClient 설정하기"/>
+  <docs-pill href="guide/http/making-requests" title="HTTP 요청 만들기"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/guide/http/security.md b/adev/src/content/guide/http/security.md
index 665f575deff9..123c18bea37f 100644
--- a/adev/src/content/guide/http/security.md
+++ b/adev/src/content/guide/http/security.md
@@ -1,42 +1,42 @@
-# `HttpClient` security
+# `HttpClient` 보안
 
-`HttpClient` includes built-in support for two common HTTP security mechanisms: XSSI protection and XSRF/CSRF protection.
+`HttpClient`는 두 가지 일반 HTTP 보안 메커니즘인 XSSI 보호와 XSRF/CSRF 보호에 대한 내장 지원을 포함합니다.
 
-Tip: Also consider adopting a [Content Security Policy](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy) for your APIs.
+팁: API에 대해 [콘텐츠 보안 정책](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy)을 채택하는 것도 고려하세요.
 
-## XSSI protection
+## XSSI 보호
 
-Cross-Site Script Inclusion (XSSI) is a form of [Cross-Site Scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attack where an attacker loads JSON data from your API endpoints as `<script>`s on a page they control. Different JavaScript techniques can then be used to access this data.
+크로스 사이트 스크립트 포함(Cross-Site Script Inclusion, XSSI)은 공격자가 제어하는 페이지에서 `<script>`로 API 엔드포인트의 JSON 데이터를 로드하는 [크로스 사이트 스크립팅](https://en.wikipedia.org/wiki/Cross-site_scripting) 공격의 한 형태입니다. 이후 다양한 JavaScript 기법을 사용하여 이 데이터를 접근할 수 있습니다.
 
-A common technique to prevent XSSI is to serve JSON responses with a "non-executable prefix", commonly `)]}',\n`. This prefix prevents the JSON response from being interpreted as valid executable JavaScript. When the API is loaded as data, the prefix can be stripped before JSON parsing.
+XSSI를 방지하는 일반적인 기법은 "비실행 접두사"와 함께 JSON 응답을 제공하는 것입니다. 일반적으로 `)]}',\n` 이 사용됩니다. 이 접두사는 JSON 응답이 유효한 실행 가능한 JavaScript로 해석되는 것을 방지합니다. API가 데이터로 로드될 때 접두사는 JSON 파싱 전에 제거할 수 있습니다.
 
-`HttpClient` automatically strips this XSSI prefix (if present) when parsing JSON from a response.
+`HttpClient`는 응답에서 JSON을 파싱할 때 이 XSSI 접두사를 자동으로 제거합니다(있는 경우).
 
-## XSRF/CSRF protection
+## XSRF/CSRF 보호
 
-[Cross-Site Request Forgery (XSRF or CSRF)](https://en.wikipedia.org/wiki/Cross-site_request_forgery) is an attack technique by which the attacker can trick an authenticated user into unknowingly executing actions on your website.
+[크로스 사이트 요청 위조(Cross-Site Request Forgery, XSRF 또는 CSRF)](https://en.wikipedia.org/wiki/Cross-site_request_forgery)은 공격자가 인증된 사용자를 속여서 본인의 웹사이트에서 모르게 작업을 수행하게 만드는 공격 기법입니다.
 
-`HttpClient` supports a [common mechanism](https://en.wikipedia.org/wiki/Cross-site_request_forgery#Cookie-to-header_token) used to prevent XSRF attacks. When performing HTTP requests, an interceptor reads a token from a cookie, by default `XSRF-TOKEN`, and sets it as an HTTP header, `X-XSRF-TOKEN`. Because only code that runs on your domain could read the cookie, the backend can be certain that the HTTP request came from your client application and not an attacker.
+`HttpClient`는 XSRF 공격을 방지하기 위해 사용되는 [일반적인 메커니즘](https://en.wikipedia.org/wiki/Cross-site_request_forgery#Cookie-to-header_token)을 지원합니다. HTTP 요청을 수행할 때 인터셉터는 기본적으로 `XSRF-TOKEN`이라는 쿠키에서 토큰을 읽고 이를 HTTP 헤더 `X-XSRF-TOKEN`으로 설정합니다. 쿠키를 읽을 수 있는 코드는 오직 사용자의 도메인에서만 실행될 수 있으므로 백엔드는 HTTP 요청이 공격자가 아닌 클라이언트 애플리케이션에서 온 것임을 확신할 수 있습니다.
 
-By default, an interceptor sends this header on all mutating requests (such as `POST`) to relative URLs, but not on GET/HEAD requests or on requests with an absolute URL.
+기본적으로 인터셉터는 상대 URL에 대한 모든 변형 요청(예: `POST`)에 대해 이 헤더를 전송하지만 GET/HEAD 요청이나 절대 URL이 있는 요청에서는 전송하지 않습니다.
 
-<docs-callout helpful title="Why not protect GET requests?">
-CSRF protection is only needed for requests that can change state on the backend. By their nature, CSRF attacks cross domain boundaries, and the web's [same-origin policy](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy) will prevent an attacking page from retrieving the results of authenticated GET requests.
+<docs-callout helpful title="GET 요청을 보호하지 않는 이유?">
+CSRF 보호는 백엔드에서 상태를 변경할 수 있는 요청에만 필요합니다. 본질적으로 CSRF 공격은 도메인 경계를 넘기 때문에, 웹의 [동일 출처 정책](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy)으로 인해 공격자가 인증된 GET 요청의 결과를 가져오는 것을 방지합니다.
 </docs-callout>
 
-To take advantage of this, your server needs to set a token in a JavaScript readable session cookie called `XSRF-TOKEN` on either the page load or the first GET request. On subsequent requests the server can verify that the cookie matches the `X-XSRF-TOKEN` HTTP header, and therefore be sure that only code running on your domain could have sent the request. The token must be unique for each user and must be verifiable by the server; this prevents the client from making up its own tokens. Set the token to a digest of your site's authentication cookie with a salt for added security.
+이점을 누리기 위해서는 서버가 페이지 로드나 첫 번째 GET 요청 시 JavaScript에서 읽을 수 있는 세션 쿠키 `XSRF-TOKEN`에 토큰을 설정해야 합니다. 이후 요청에서 서버는 쿠키가 `X-XSRF-TOKEN` HTTP 헤더와 일치하는지 확인할 수 있으며, 따라서 오직 사용자 도메인에서 실행되는 코드만이 요청을 보낼 수 있었음을 보장할 수 있습니다. 이 토큰은 각 사용자마다 고유해야 하며, 서버에 의해 검증 가능해야 합니다. 이는 클라이언트가 자신만의 토큰을 만들지 못하도록 방지합니다. 보안을 강화하기 위해 사이트의 인증 쿠키와 소금을 사용하여 토큰을 설정하십시오.
 
-To prevent collisions in environments where multiple Angular apps share the same domain or subdomain, give each application a unique cookie name.
+여러 Angular 앱이 동일한 도메인이나 서브도메인을 공유하는 환경에서 충돌을 방지하려면 각 애플리케이션에 고유한 쿠키 이름을 부여해야 합니다.
 
-<docs-callout important title="HttpClient supports only the client half of the XSRF protection scheme">
-  Your backend service must be configured to set the cookie for your page, and to verify that the header is present on all eligible requests. Failing to do so renders Angular's default protection ineffective.
+<docs-callout important title="HttpClient는 XSRF 보호 체계의 클라이언트 측만 지원합니다">
+  백엔드 서비스는 페이지를 위한 쿠키를 설정하고 모든 적격 요청에서 헤더가 존재하는지 확인하도록 구성되어야 합니다. 이를 수행하지 않을 경우 Angular의 기본 보호가 무효화됩니다.
 </docs-callout>
 
-### Configure custom cookie/header names
+### 사용자 정의 쿠키/헤더 이름 구성
 
-If your backend service uses different names for the XSRF token cookie or header, use `withXsrfConfiguration` to override the defaults.
+백엔드 서비스가 XSRF 토큰 쿠키 또는 헤더에 대해 다른 이름을 사용하는 경우, `withXsrfConfiguration`를 사용하여 기본 설정을 덮어쓸 수 있습니다.
 
-Add it to the `provideHttpClient` call as follows:
+다음과 같이 `provideHttpClient` 호출에 추가하십시오:
 
 <docs-code language="ts">
 export const appConfig: ApplicationConfig = {
@@ -51,9 +51,9 @@ export const appConfig: ApplicationConfig = {
 };
 </docs-code>
 
-### Disabling XSRF protection
+### XSRF 보호 비활성화
 
-If the built-in XSRF protection mechanism doesn't work for your application, you can disable it using the `withNoXsrfProtection` feature:
+내장된 XSRF 보호 메커니즘이 애플리케이션에 작동하지 않는 경우, `withNoXsrfProtection` 기능을 사용하여 이를 비활성화할 수 있습니다:
 
 <docs-code language="ts">
 export const appConfig: ApplicationConfig = {
@@ -63,4 +63,4 @@ export const appConfig: ApplicationConfig = {
     ),
   ]
 };
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/guide/http/setup.md b/adev/src/content/guide/http/setup.md
index c95fe3e1c8af..f58613917a75 100644
--- a/adev/src/content/guide/http/setup.md
+++ b/adev/src/content/guide/http/setup.md
@@ -1,10 +1,10 @@
-# Setting up `HttpClient`
+# `HttpClient` 설정
 
-Before you can use `HttpClient` in your app, you must configure it using [dependency injection](guide/di).
+앱에서 `HttpClient`를 사용하기 전에 [의존성 주입](guide/di)을 사용하여 구성해야 합니다.
 
-## Providing `HttpClient` through dependency injection
+## 의존성 주입을 통한 `HttpClient` 제공
 
-`HttpClient` is provided using the `provideHttpClient` helper function, which most apps include in the application `providers` in `app.config.ts`.
+`HttpClient`는 `app.config.ts`의 애플리케이션 `providers`에 대부분의 앱에서 포함하는 `provideHttpClient` 도우미 함수를 사용하여 제공됩니다.
 
 <docs-code language="ts">
 export const appConfig: ApplicationConfig = {
@@ -14,32 +14,32 @@ export const appConfig: ApplicationConfig = {
 };
 </docs-code>
 
-If your app is using NgModule-based bootstrap instead, you can include `provideHttpClient` in the providers of your app's NgModule:
+앱이 NgModule 기반 부트를 사용하는 경우, 앱의 NgModule의 providers에 `provideHttpClient`를 포함할 수 있습니다:
 
 <docs-code language="ts">
 @NgModule({
   providers: [
     provideHttpClient(),
   ],
-  // ... other application configuration
+  // ... 다른 애플리케이션 구성
 })
 export class AppModule {}
 </docs-code>
 
-You can then inject the `HttpClient` service as a dependency of your components, services, or other classes:
+그런 다음 구성요소, 서비스 또는 기타 클래스의 의존성으로 `HttpClient` 서비스를 주입할 수 있습니다:
 
 <docs-code language="ts">
 @Injectable({providedIn: 'root'})
 export class ConfigService {
   constructor(private http: HttpClient) {
-    // This service can now make HTTP requests via `this.http`.
+    // 이제 이 서비스는 `this.http`를 통해 HTTP 요청을 할 수 있습니다.
   }
 }
 </docs-code>
 
-## Configuring features of `HttpClient`
+## `HttpClient`의 기능 구성
 
-`provideHttpClient` accepts a list of optional feature configurations, to enable or configure the behavior of different aspects of the client. This section details the optional features and their usages.
+`provideHttpClient`는 클라이언트의 다양한 측면의 동작을 활성화하거나 구성하기 위한 선택적 기능 구성 목록을 수용합니다. 이 섹션에서는 선택적 기능과 그 용도를 자세히 설명합니다.
 
 ### `withFetch`
 
@@ -53,57 +53,57 @@ export const appConfig: ApplicationConfig = {
 };
 </docs-code>
 
-By default, `HttpClient` uses the [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest) API to make requests. The `withFetch` feature switches the client to use the [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) API instead.
+기본적으로 `HttpClient`는 [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest) API를 사용하여 요청을 합니다. `withFetch` 기능은 클라이언트를 [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) API를 사용하도록 전환합니다.
 
-`fetch` is a more modern API and is available in a few environments where `XMLHttpRequest` is not supported. It does have a few limitations, such as not producing upload progress events.
+`fetch`는 더 최신의 API이며, `XMLHttpRequest`가 지원되지 않는 몇 가지 환경에서 사용할 수 있습니다. 업로드 진행 상황 이벤트를 생성하지 않는 등 몇 가지 제한사항이 있습니다.
 
 ### `withInterceptors(...)`
 
-`withInterceptors` configures the set of interceptor functions which will process requests made through `HttpClient`. See the [interceptor guide](guide/http/interceptors) for more information.
+`withInterceptors`는 `HttpClient`를 통해 수행된 요청을 처리할 인터셉터 함수 집합을 구성합니다. 자세한 내용은 [인터셉터 가이드](guide/http/interceptors)를 참조하십시오.
 
 ### `withInterceptorsFromDi()`
 
-`withInterceptorsFromDi` includes the older style of class-based interceptors in the `HttpClient` configuration. See the [interceptor guide](guide/http/interceptors) for more information.
+`withInterceptorsFromDi`는 `HttpClient` 구성에서 구식 클래스 기반 인터셉터를 포함합니다. 자세한 내용은 [인터셉터 가이드](guide/http/interceptors)를 참조하십시오.
 
-HELPFUL: Functional interceptors (through `withInterceptors`) have more predictable ordering and we recommend them over DI-based interceptors.
+유용한 팁: 기능적 인터셉터(`withInterceptors`를 통해)는 더 예측 가능한 순서를 가지며, DI 기반 인터셉터보다 추천합니다.
 
 ### `withRequestsMadeViaParent()`
 
-By default, when you configure `HttpClient` using `provideHttpClient` within a given injector, this configuration overrides any configuration for `HttpClient` which may be present in the parent injector.
+기본적으로, `provideHttpClient`를 사용하여 특정 주입기 내에서 `HttpClient`를 구성할 때, 이 구성은 부모 주입기에 존재할 수 있는 `HttpClient`에 대한 구성을 덮어씁니다.
 
-When you add `withRequestsMadeViaParent()`, `HttpClient` is configured to instead pass requests up to the `HttpClient` instance in the parent injector, once they've passed through any configured interceptors at this level. This is useful if you want to _add_ interceptors in a child injector, while still sending the request through the parent injector's interceptors as well.
+`withRequestsMadeViaParent()`를 추가하면, `HttpClient`는 요청을 현재 레벨에서 구성된 인터셉터를 통과한 후 부모 주입기의 `HttpClient` 인스턴스로 요청을 전달하도록 구성됩니다. 이는 요청을 부모 주입기의 인터셉터를 통해 전송하면서 자식 주입기에 인터셉터를 _추가_하려는 경우에 유용합니다.
 
-CRITICAL: You must configure an instance of `HttpClient` above the current injector, or this option is not valid and you'll get a runtime error when you try to use it.
+중요: 현재 주입기 위에 `HttpClient`의 인스턴스를 구성해야 합니다. 그렇지 않으면 이 옵션은 유효하지 않으며, 사용 시 런타임 오류가 발생합니다.
 
 ### `withJsonpSupport()`
 
-Including `withJsonpSupport` enables the `.jsonp()` method on `HttpClient`, which makes a GET request via the [JSONP convention](https://en.wikipedia.org/wiki/JSONP) for cross-domain loading of data.
+`withJsonpSupport`를 포함하면, `HttpClient`에서 `.jsonp()` 메서드를 활성화하여 데이터의 교차 도메인 로드를 위한 [JSONP 규약](https://en.wikipedia.org/wiki/JSONP)을 통해 GET 요청을 수행합니다.
 
-HELPFUL: Prefer using [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) to make cross-domain requests instead of JSONP when possible.
+유용한 팁: 가능할 때 JSONP 대신 [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS)를 사용하여 교차 도메인 요청을 하는 것이 좋습니다.
 
 ### `withXsrfConfiguration(...)`
 
-Including this option allows for customization of `HttpClient`'s built-in XSRF security functionality. See the [security guide](best-practices/security) for more information.
+이 옵션을 포함하면 `HttpClient`의 내장 XSRF 보안 기능을 사용자 정의할 수 있습니다. 자세한 내용은 [보안 가이드](best-practices/security)를 참조하십시오.
 
 ### `withNoXsrfProtection()`
 
-Including this option disables `HttpClient`'s built-in XSRF security functionality. See the [security guide](best-practices/security) for more information.
+이 옵션을 포함하면 `HttpClient`의 내장 XSRF 보안 기능이 비활성화됩니다. 자세한 내용은 [보안 가이드](best-practices/security)를 참조하십시오.
 
-## `HttpClientModule`-based configuration
+## `HttpClientModule` 기반 구성
 
-Some applications may configure `HttpClient` using the older API based on NgModules.
+일부 애플리케이션은 NgModules 기반의 구형 API를 사용하여 `HttpClient`를 구성할 수 있습니다.
 
-This table lists the NgModules available from `@angular/common/http` and how they relate to the provider configuration functions above.
+이 표는 `@angular/common/http`에서 제공되는 NgModules와 그들이 위의 공급자 구성 함수와 어떻게 관련되어 있는지를 보여줍니다.
 
-| **NgModule**                            | `provideHttpClient()` equivalent              |
+| **NgModule**                            | `provideHttpClient()` 동등물              |
 | --------------------------------------- | --------------------------------------------- |
 | `HttpClientModule`                      | `provideHttpClient(withInterceptorsFromDi())` |
 | `HttpClientJsonpModule`                 | `withJsonpSupport()`                          |
 | `HttpClientXsrfModule.withOptions(...)` | `withXsrfConfiguration(...)`                  |
 | `HttpClientXsrfModule.disable()`        | `withNoXsrfProtection()`                      |
 
-<docs-callout important title="Use caution when using HttpClientModule in multiple injectors">
-When `HttpClientModule` is present in multiple injectors, the behavior of interceptors is poorly defined and depends on the exact options and provider/import ordering.
+<docs-callout important title="여러 주입기에서 HttpClientModule을 사용할 때 주의하십시오">
+`HttpClientModule`이 여러 주입기에 존재할 때 인터셉터의 동작은 정의되지 않았으며, 정확한 옵션 및 공급자/가져오기 순서에 따라 달라집니다.
 
-Prefer `provideHttpClient` for multi-injector configurations, as it has more stable behavior. See the `withRequestsMadeViaParent` feature above.
-</docs-callout>
+다중 주입기 구성을 위해 `provideHttpClient`를 선호하십시오. 이 구성은 더 안정적인 동작을 가지고 있습니다. 위에서 설명한 `withRequestsMadeViaParent` 기능을 참조하십시오.
+</docs-callout>
\ No newline at end of file
diff --git a/adev/src/content/guide/http/testing.md b/adev/src/content/guide/http/testing.md
index db38eeea8d12..1a87849ce307 100644
--- a/adev/src/content/guide/http/testing.md
+++ b/adev/src/content/guide/http/testing.md
@@ -1,21 +1,21 @@
-# Test requests
+# 테스트 요청
 
-As for any external dependency, you must mock the HTTP backend so your tests can simulate interaction with a remote server. The `@angular/common/http/testing` library provides tools to capture requests made by the application, make assertions about them, and mock the responses to emulate your backend's behavior.
+외부 의존성과 마찬가지로, HTTP 백엔드를 모킹해야 테스트가 원격 서버와의 상호 작용을 시뮬레이션할 수 있습니다. `@angular/common/http/testing` 라이브러리는 애플리케이션에서 발생하는 요청을 캡처하고, 그것에 대한 assertions를 수행하며, 백엔드의 동작을 모방하기 위한 응답을 모킹하는 도구를 제공합니다.
 
-The testing library is designed for a pattern in which the app executes code and makes requests first. The test then expects that certain requests have or have not been made, performs assertions against those requests, and finally provides responses by "flushing" each expected request.
+테스트 라이브러리는 앱이 코드를 실행하고 먼저 요청을 만드는 패턴을 위해 설계되었습니다. 그런 다음 테스트는 특정 요청이 만들어졌는지 아니면 만들어지지 않았는지를 기대하고, 해당 요청에 대한 assertions를 수행하며, 마지막으로 "flushing"을 통해 각 예상 요청에 대한 응답을 제공합니다.
 
-At the end, tests can verify that the app made no unexpected requests.
+끝으로, 테스트는 앱이 예기치 않은 요청을 하지 않았는지 확인할 수 있습니다.
 
-## Setup for testing
+## 테스트 설정
 
-To begin testing usage of `HttpClient`, configure `TestBed` and include `provideHttpClient()` and `provideHttpClientTesting()` in your test's setup. This configures `HttpClient` to use a test backend instead of the real network. It also provides `HttpTestingController`, which you'll use to interact with the test backend, set expectations about which requests have been made, and flush responses to those requests. `HttpTestingController` can be injected from `TestBed` once configured.
+`HttpClient` 사용을 테스트하려면 `TestBed`를 구성하고 테스트 설정에 `provideHttpClient()` 및 `provideHttpClientTesting()`을 포함해야 합니다. 이렇게 하면 `HttpClient`가 실제 네트워크 대신 테스트 백엔드를 사용하도록 구성됩니다. 또한 테스트 백엔드와 상호 작용하고 어떤 요청이 완료되었는지에 대한 기대를 설정하며, 해당 요청에 대한 응답을 flushing하기 위해 사용할 `HttpTestingController`를 제공합니다. `HttpTestingController`는 구성 후 `TestBed`로부터 주입할 수 있습니다.
 
-Keep in mind to provide `provideHttpClient()` **before** `provideHttpClientTesting()`, as `provideHttpClientTesting()` will overwrite parts of `provideHttpCient()`. Doing it the other way around can potentially break your tests.
+`provideHttpClient()`를 `provideHttpClientTesting()` **전**에 제공해야 합니다. 왜냐하면 `provideHttpClientTesting()`이 `provideHttpClient()`의 일부를 덮어쓰게 되기 때문입니다. 반대로 설정하면 테스트가 깨질 수 있습니다.
 
 <docs-code language="ts">
 TestBed.configureTestingModule({
   providers: [
-    // ... other test providers
+    // ... 다른 테스트 제공자
     provideHttpClient(),
     provideHttpClientTesting(),
   ],
@@ -24,11 +24,11 @@ TestBed.configureTestingModule({
 const httpTesting = TestBed.inject(HttpTestingController);
 </docs-code>
 
-Now when your tests make requests, they will hit the testing backend instead of the normal one. You can use `httpTesting` to make assertions about those requests.
+이제 테스트가 요청을 만들면 정상적인 백엔드 대신 테스트 백엔드에 도달합니다. `httpTesting`을 사용하여 해당 요청에 대한 assertions를 수행할 수 있습니다.
 
-## Expecting and answering requests
+## 요청 예상 및 응답 제공
 
-For example, you can write a test that expects a GET request to occur and provides a mock response:
+예를 들어, 발생할 GET 요청을 예상하고 모킹 응답을 제공하는 테스트를 작성할 수 있습니다:
 
 <docs-code language="ts">
 TestBed.configureTestingModule({
@@ -41,112 +41,111 @@ TestBed.configureTestingModule({
 
 const httpTesting = TestBed.inject(HttpTestingController);
 
-// Load `ConfigService` and request the current configuration.
+// `ConfigService`를 로드하고 현재 구성 요청.
 const service = TestBed.inject(ConfigService);
 const config$ = this.configService.getConfig<Config>();
 
-// `firstValueFrom` subscribes to the `Observable`, which makes the HTTP request,
-// and creates a `Promise` of the response.
+// `firstValueFrom`이 `Observable`에 구독하여 HTTP 요청을 발생시키고,
+// 응답의 `Promise`를 생성합니다.
 const configPromise = firstValueFrom(config$);
 
-// At this point, the request is pending, and we can assert it was made
-// via the `HttpTestingController`:
-const req = httpTesting.expectOne('/api/config', 'Request to load the configuration');
+// 이 시점에서 요청은 대기 중이며, `HttpTestingController`를 통해 요청이 만들어졌음을 assertion할 수 있습니다:
+const req = httpTesting.expectOne('/api/config', '구성을 로드하기 위한 요청');
 
-// We can assert various properties of the request if desired.
+// 원할 경우 요청의 다양한 속성을 assertion할 수 있습니다.
 expect(req.request.method).toBe('GET');
 
-// Flushing the request causes it to complete, delivering the result.
+// 요청을 flushing하면 완료되어 결과가 전달됩니다.
 req.flush(DEFAULT_CONFIG);
 
-// We can then assert that the response was successfully delivered by the `ConfigService`:
+// 그런 다음 `ConfigService`에 의해 응답이 성공적으로 전달되었음을 assertion할 수 있습니다:
 expect(await configPromise).toEqual(DEFAULT_CONFIG);
 
-// Finally, we can assert that no other requests were made.
+// 마지막으로, 다른 요청이 없었음을 assertion할 수 있습니다.
 httpTesting.verify();
 </docs-code>
 
-Note: `expectOne` will fail if the test has made more than one request which matches the given criteria.
+참고: `expectOne`은 테스트가 주어진 기준과 일치하는 요청을 두 개 이상 생성한 경우 실패합니다.
 
-As an alternative to asserting on `req.method`, you could instead use an expanded form of `expectOne` to also match the request method:
+`req.method`에 대한 assertion의 대안으로, 요청 메서드도 일치하도록 `expectOne`의 확장된 형태를 사용할 수 있습니다:
 
 <docs-code language="ts">
 const req = httpTesting.expectOne({
   method: 'GET',
   url: '/api/config',
-}, 'Request to load the configuration');
+}, '구성을 로드하기 위한 요청');
 </docs-code>
 
-HELPFUL: The expectation APIs match against the full URL of requests, including any query parameters.
+유용한 점: expectation API는 쿼리 매개변수를 포함하여 요청의 전체 URL과 일치합니다.
 
-The last step, verifying that no requests remain outstanding, is common enough for you to move it into an `afterEach()` step:
+마지막 단계인 미결 요청이 없음을 확인하는 것은 충분히 일반적이므로 `afterEach()` 단계로 이동할 수 있습니다:
 
 <docs-code language="ts">
 afterEach(() => {
-  // Verify that none of the tests make any extra HTTP requests.
+  // 테스트가 추가 HTTP 요청을 하지 않는지 확인합니다.
   TestBed.inject(HttpTestingController).verify();
 });
 </docs-code>
 
-## Handling more than one request at once
+## 한 번에 여러 요청 처리
 
-If you need to respond to duplicate requests in your test, use the `match()` API instead of `expectOne()`. It takes the same arguments but returns an array of matching requests. Once returned, these requests are removed from future matching and you are responsible for flushing and verifying them.
+테스트에서 중복 요청에 응답해야 하는 경우 `expectOne()` 대신 `match()` API를 사용하세요. 동일한 인수를 사용하지만 일치하는 요청의 배열을 반환합니다. 반환된 후 이러한 요청은 향후 일치에서 제거되며, flushing 및 확인에 대한 책임이 있습니다.
 
 <docs-code language="ts">
 const allGetRequests = httpTesting.match({method: 'GET'});
 for (const req of allGetRequests) {
-  // Handle responding to each request.
+  // 각 요청에 대한 응답을 처리합니다.
 }
 </docs-code>
 
-## Advanced matching
+## 고급 매칭
 
-All matching functions accept a predicate function for custom matching logic:
+모든 매칭 함수는 사용자 정의 매칭 로직을 위한 조건 함수(predicated function)를 수용합니다:
 
 <docs-code language="ts">
-// Look for one request that has a request body.
+// 요청 본문이 있는 요청을 찾습니다.
 const requestsWithBody = httpTesting.expectOne(req => req.body !== null);
 </docs-code>
 
-The `expectNone` function asserts that no requests match the given criteria.
+`expectNone` 함수는 주어진 기준에 맞는 요청이 없음을 assertion합니다.
 
 <docs-code language="ts">
-// Assert that no mutation requests have been issued.
+// 변환 요청이 발행되지 않았음을 assertion합니다.
 httpTesting.expectNone(req => req.method !== 'GET');
 </docs-code>
 
-## Testing error handling
+## 오류 처리 테스트
 
-You should test your app's responses when HTTP requests fail.
+HTTP 요청이 실패할 때 앱의 응답을 테스트해야 합니다.
 
-### Backend errors
+### 백엔드 오류
 
-To test handling of backend errors (when the server returns a non-successful status code), flush requests with an error response that emulates what your backend would return when a request fails.
+백엔드 오류(서버가 비성공적인 상태 코드를 반환하는 경우)를 처리하는 테스트를 위해 요청이 실패할 때 백엔드가 반환할 응답을 모방하는 오류 응답으로 요청을 flushing합니다.
 
 <docs-code language="ts">
 const req = httpTesting.expectOne('/api/config');
-req.flush('Failed!', {status: 500, statusText: 'Internal Server Error'});
+req.flush('실패!', {status: 500, statusText: '내부 서버 오류'});
 
-// Assert that the application successfully handled the backend error.
+// 애플리케이션이 백엔드 오류를 성공적으로 처리했음을 assertion합니다.
 </docs-code>
 
-### Network errors
+### 네트워크 오류
 
-Requests can also fail due to network errors, which surface as `ProgressEvent` errors. These can be delivered with the `error()` method:
+요청은 네트워크 오류로 인해 실패할 수도 있으며, 이러한 오류는 `ProgressEvent` 오류로 나타납니다. 이들은 `error()` 메서드를 사용하여 전달될 수 있습니다:
 
 <docs-code language="ts">
 const req = httpTesting.expectOne('/api/config');
-req.error(new ProgressEvent('network error!'));
+req.error(new ProgressEvent('네트워크 오류!'));
 
-// Assert that the application successfully handled the network error.
+// 애플리케이션이 네트워크 오류를 성공적으로 처리했음을 assertion합니다.
 </docs-code>
 
-## Testing an Interceptor
+## 인터셉터 테스트
 
-You should test that your interceptors work under the desired circumstances.
+인터셉터가 원하는 상황에서 작동하는지 테스트해야 합니다.
 
-For example, an application may be required to add an authentication token generated by a service to each outgoing request.
-This behavior can be enforced with the use of an interceptor:
+예를 들어, 애플리케이션이 각 아웃고잉 요청에 대해 서비스에서 생성된 인증 토큰을 추가해야 할 수 있습니다.
+이 동작은 인터셉터를 사용하여 시행할 수 있습니다:
 
 <docs-code language="ts">
 export function authInterceptor(request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
@@ -159,20 +158,20 @@ export function authInterceptor(request: HttpRequest<unknown>, next: HttpHandler
 }
 </docs-code>
 
-The `TestBed` configuration for this interceptor should rely on the `withInterceptors` feature.
+이 인터셉터의 `TestBed` 구성은 `withInterceptors` 기능에 의존해야 합니다.
 
 <docs-code language="ts">
 TestBed.configureTestingModule({
   providers: [
     AuthService,
-    // Testing one interceptor at a time is recommended.
+    // 한 번에 하나의 인터셉터를 테스트하는 것이 좋습니다.
     provideHttpClient(withInterceptors([authInterceptor])),
     provideHttpClientTesting(),
   ],
 });
 </docs-code>
 
-The `HttpTestingController` can retrieve the request instance which can then be inspected to ensure that the request was modified.
+`HttpTestingController`는 요청 인스턴스를 검색할 수 있으며, 요청이 수정되었는지 확인할 수 있습니다.
 
 <docs-code language="ts">
 const service = TestBed.inject(AuthService);
@@ -181,7 +180,7 @@ const req = httpTesting.expectOne('/api/config');
 expect(req.request.headers.get('X-Authentication-Token')).toEqual(service.getAuthToken());
 </docs-code>
 
-A similar interceptor could be implemented with class based interceptors: 
+유사한 인터셉터는 클래스 기반 인터셉터로 구현할 수 있습니다: 
 
 <docs-code language="ts">
 @Injectable()
@@ -197,7 +196,7 @@ export class AuthInterceptor implements HttpInterceptor {
 }
 </docs-code>
 
-In order to test it, the `TestBed` configuration should instead be:
+테스트할 수 있도록 `TestBed` 구성은 다음과 같아야 합니다:
 
 <docs-code language="ts">
 TestBed.configureTestingModule({
@@ -205,7 +204,7 @@ TestBed.configureTestingModule({
     AuthService,
     provideHttpClient(withInterceptorsFromDi()),
     provideHttpClientTesting(), 
-    // We rely on the HTTP_INTERCEPTORS token to register the AuthInterceptor as an HttpInterceptor
+    // HTTP_INTERCEPTORS 토큰을 사용하여 AuthInterceptor를 HttpInterceptor로 등록합니다.
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
   ],
 });
diff --git a/adev/src/content/guide/hydration.md b/adev/src/content/guide/hydration.md
index b879e361f72f..401a9fd061ea 100644
--- a/adev/src/content/guide/hydration.md
+++ b/adev/src/content/guide/hydration.md
@@ -1,26 +1,26 @@
-# Hydration
+# 하이드레이션
 
-## What is hydration
+## 하이드레이션이란 무엇인가요
 
-Hydration is the process that restores the server-side rendered application on the client. This includes things like reusing the server rendered DOM structures, persisting the application state, transferring application data that was retrieved already by the server, and other processes.
+하이드레이션은 서버 사이드 렌더링된 애플리케이션을 클라이언트에서 복원하는 과정입니다. 여기에는 서버에서 렌더링된 DOM 구조 재사용, 애플리케이션 상태 유지, 이미 서버에서 검색된 애플리케이션 데이터 전송 및 기타 과정이 포함됩니다.
 
-## Why is hydration important?
+## 하이드레이션이 중요한 이유는 무엇인가요?
 
-Hydration improves application performance by avoiding extra work to re-create DOM nodes. Instead, Angular tries to match existing DOM elements to the applications structure at runtime and reuses DOM nodes when possible. This results in a performance improvement that can be measured using [Core Web Vitals (CWV)](https://web.dev/learn-core-web-vitals/) statistics, such as reducing the First Input Delay ([FID](https://web.dev/fid/)) and Largest Contentful Paint ([LCP](https://web.dev/lcp/)), as well as Cumulative Layout Shift ([CLS](https://web.dev/cls/)). Improving these numbers also affects things like SEO performance.
+하이드레이션은 DOM 노드를 재생성하기 위한 추가 작업을 피함으로써 애플리케이션 성능을 향상시킵니다. 대신, Angular는 런타임 중에 기존 DOM 요소와 애플리케이션 구조를 일치시키려고 하고 가능한 경우 DOM 노드를 재사용합니다. 이로 인해 [Core Web Vitals (CWV)](https://web.dev/learn-core-web-vitals/) 통계에서 측정할 수 있는 성능 향상이 발생합니다. 예를 들어, 첫 번째 입력 지연([FID](https://web.dev/fid/))과 가장 큰 콘텐츠 폴 페인트([LCP](https://web.dev/lcp/)), 누적 레이아웃 이동([CLS](https://web.dev/cls/))을 줄입니다. 이러한 수치를 개선하면 SEO 성능에도 영향을 미칩니다.
 
-Without hydration enabled, server-side rendered Angular applications will destroy and re-render the application's DOM, which may result in a visible UI flicker. This re-rendering can negatively impact [Core Web Vitals](https://web.dev/learn-core-web-vitals/) like [LCP](https://web.dev/lcp/) and cause a layout shift. Enabling hydration allows the existing DOM to be re-used and prevents a flicker.
+하이드레이션이 활성화되지 않은 경우, 서버 사이드 렌더링된 Angular 애플리케이션은 애플리케이션의 DOM을 파괴하고 다시 렌더링하여 눈에 띄는 UI 깜박임을 초래할 수 있습니다. 이 다시 렌더링은 [Core Web Vitals](https://web.dev/learn-core-web-vitals/)와 같은 [LCP](https://web.dev/lcp/)에 부정적인 영향을 미치고 레이아웃 이동을 일으킬 수 있습니다. 하이드레이션을 활성화하면 기존 DOM을 재사용할 수 있고 깜박임을 방지할 수 있습니다.
 
-## How do you enable hydration in Angular
+## Angular에서 하이드레이션을 활성화하는 방법
 
-Hydration can be enabled for server-side rendered (SSR) applications only. Follow the [Angular SSR Guide](guide/ssr) to enable server-side rendering first.
+하이드레이션은 서버 사이드 렌더링(SSR) 애플리케이션에 대해서만 활성화할 수 있습니다. 먼저 [Angular SSR 가이드](guide/ssr)를 따라 서버 사이드 렌더링을 활성화하세요.
 
-### Using Angular CLI
+### Angular CLI 사용하기
 
-If you've used Angular CLI to enable SSR (either by enabling it during application creation or later via `ng add @angular/ssr`), the code that enables hydration should already be included into your application.
+Angular CLI를 사용하여 SSR을 활성화한 경우(애플리케이션 생성 중 또는 나중에 `ng add @angular/ssr`를 통해 활성화한 경우), 하이드레이션을 활성화하는 코드는 이미 애플리케이션에 포함되어 있어야 합니다.
 
-### Manual setup
+### 수동 설정
 
-If you have a custom setup and didn't use Angular CLI to enable SSR, you can enable hydration manually by visiting your main application component or module and importing `provideClientHydration` from `@angular/platform-browser`. You'll then add that provider to your app's bootstrapping providers list.
+사용자 지정 설정을 하고 Angular CLI를 사용하여 SSR을 활성화하지 않았다면, 주요 애플리케이션 컴포넌트나 모듈을 방문하고 `@angular/platform-browser`에서 `provideClientHydration`을 가져와 수동으로 하이드레이션을 활성화할 수 있습니다. 그런 다음 해당 프로바이더를 애플리케이션 부트스트랩 프로바이더 목록에 추가합니다.
 
 ```typescript
 import {
@@ -34,7 +34,7 @@ bootstrapApplication(AppComponent, {
 });
 ```
 
-Alternatively if you are using NgModules, you would add `provideClientHydration` to your root app module's provider list.
+또는 NgModules를 사용하는 경우, `provideClientHydration`을 루트 앱 모듈의 프로바이더 목록에 추가합니다.
 
 ```typescript
 import {provideClientHydration} from '@angular/platform-browser';
@@ -49,21 +49,21 @@ import {NgModule} from '@angular/core';
 export class AppModule {}
 ```
 
-IMPORTANT: Make sure that the `provideClientHydration()` call is also included into a set of providers that is used to bootstrap an application on the **server**. In applications with the default project structure (generated by the `ng new` command), adding a call to the root `AppModule` should be sufficient, since this module is imported by the server module. If you use a custom setup, add the `provideClientHydration()` call to the providers list in the server bootstrap configuration.
+중요: `provideClientHydration()` 호출이 애플리케이션을 **서버**에서 부트스트랩하는 데 사용되는 프로바이더 집합에 포함되어 있는지 확인하세요. 기본 프로젝트 구조( `ng new` 명령으로 생성된 구조)에서는 루트 `AppModule`에 대한 호출을 추가하는 것만으로 충분합니다. 사용자 지정 설정을 사용하는 경우, 서버 부트스트랩 구성에서 프로바이더 목록에 `provideClientHydration()` 호출을 추가하세요.
 
-### Verify that hydration is enabled
+### 하이드레이션이 활성화되었는지 확인하기
 
-After you've configured hydration and have started up your server, load your application in the browser.
+하이드레이션을 구성하고 서버를 시작한 후, 브라우저에서 애플리케이션을 로드하세요.
 
-HELPFUL: You will likely need to fix instances of Direct DOM Manipulation before hydration will fully work either by switching to Angular constructs or by using `ngSkipHydration`. See [Constraints](#constraints), [Direct DOM Manipulation](#direct-dom-manipulation), and [How to skip hydration for particular components](#how-to-skip-hydration-for-particular-components) for more details.
+도움말: 하이드레이션이 완전히 작동하기 전에 직접 DOM 조작 인스턴스를 수정해야 할 수도 있습니다. Angular 구조로 전환하거나 `ngSkipHydration`을 사용하여 문제를 해결하세요. 더 많은 세부정보는 [제약 사항](#constraints), [직접 DOM 조작](#direct-dom-manipulation), 및 [특정 컴포넌트에 대한 하이드레이션 건너뛰기 방법](#how-to-skip-hydration-for-particular-components)을 참조하세요.
 
-While running an application in dev mode, you can confirm hydration is enabled by opening the Developer Tools in your browser and viewing the console. You should see a message that includes hydration-related stats, such as the number of components and nodes hydrated. Angular calculates the stats based on all components rendered on a page, including those that come from third-party libraries.
+개발 모드에서 애플리케이션을 실행하는 동안, 브라우저의 개발자 도구를 열고 콘솔을 확인하여 하이드레이션이 활성화되었는지 확인할 수 있습니다. 하이드레이션 관련 통계(하이드레이션된 컴포넌트 및 노드 수 포함)를 포함한 메시지를 볼 수 있어야 합니다. Angular는 페이지에 렌더링된 모든 컴포넌트, 제3자 라이브러리에서 가져온 컴포넌트를 포함하여 통계를 계산합니다.
 
-You can also use [Angular DevTools browser extension](tools/devtools) to see hydration status of components on a page. Angular DevTools also allows to enable an overlay to indicate which parts of the page were hydrated. If there is a hydration mismatch error - DevTools would also highlight a component that caused the error.
+또한 [Angular DevTools 브라우저 확장](tools/devtools)을 사용하여 페이지에서 컴포넌트의 하이드레이션 상태를 확인할 수 있습니다. Angular DevTools는 페이지에서 하이드레이션된 부분을 표시하는 오버레이를 활성화할 수도 있습니다. 하이드레이션 불일치 오류가 있는 경우, DevTools는 오류를 발생시킨 컴포넌트를 강조 표시합니다.
 
-## Capturing and replaying events
+## 이벤트 캡처 및 재생
 
-When an application is rendered on the server, it is visible in a browser as soon as produced HTML loads. Users may assume that they can interact with the page, but event listeners are not attached until hydration completes. Starting from v18, you can enable the Event Replay feature that allows to capture all events that happen before hydration and replay those events once hydration has completed. You can enable it using the `withEventReplay()` function, for example:
+애플리케이션이 서버에서 렌더링되면 생성된 HTML이 로드되는 즉시 브라우저에서 보입니다. 사용자는 페이지와 상호작용할 수 있다고 가정할 수 있지만 하이드레이션이 완료될 때까지 이벤트 리스너가 연결되지 않습니다. v18부터, 하이드레이션이 완료된 후에 이러한 이벤트를 재생할 수 있도록 하이드레이션 완료 이전에 발생한 모든 이벤트를 캡처할 수 있는 이벤트 재생 기능을 활성화할 수 있습니다. 예를 들어 `withEventReplay()` 함수를 사용하여 이를 활성화할 수 있습니다:
 
 ```typescript
 import {provideClientHydration, withEventReplay} from '@angular/platform-browser';
@@ -75,83 +75,83 @@ bootstrapApplication(App, {
 });
 ```
 
-### Event Replay
-Event Replay is a feature that improves user experience by capturing user events triggered before hydration finishes and replaying them afterward.
+### 이벤트 재생
+이벤트 재생은 하이드레이션이 완료되기 전에 발생한 사용자 이벤트를 캡처하고 이후에 재생하여 사용자 경험을 개선하는 기능입니다.
 
-The Event Replay is divided into three main phases:
+이벤트 재생은 세 가지 주요 단계로 나누어집니다:
 
-- **Capturing user interactions**<br>
-Prior to **Hydration**, Event Replay captures and stores all interactions that the user may perform, such as clicks and other browser native events.
+- **사용자 상호작용 캡처**<br>
+**하이드레이션** 이전에 이벤트 재생은 사용자가 수행할 수 있는 모든 상호작용(예: 클릭 및 기타 브라우저 기본 이벤트)을 캡처하고 저장합니다.
 
-- **Storing events**<br>
-The **Event Contract** keeps in memory all the interactions recorded in the previous step, ensuring that they are not lost for later replay.
+- **이벤트 저장**<br>
+**이벤트 계약**은 이전 단계에서 기록된 모든 상호작용을 메모리에 유지하여 나중에 재생할 때 잃어버리지 않도록 합니다.
 
-- **Relaunch of events**<br>
-Once **Hydration** is complete, Angular re-invokes the captured events, ensuring none of those user actions were lost.
+- **이벤트 재실행**<br>
+**하이드레이션**이 완료되면 Angular는 캡처된 이벤트를 다시 호출하여 사용자의 작업 중 잃어버린 것이 없도록 합니다.
 
 ---
 
-This feature ensures a consistent user experience, preventing user actions performed before Hydration from being ignored.
+이 기능은 사용자가 하이드레이션 이전에 수행한 작업이 무시되는 것을 방지하여 일관된 사용자 경험을 보장합니다.
 
-## Constraints
+## 제약 사항
 
-Hydration imposes a few constraints on your application that are not present without hydration enabled. Your application must have the same generated DOM structure on both the server and the client. The process of hydration expects the DOM tree to have the same structure in both places. This also includes whitespaces and comment nodes that Angular produces during the rendering on the server. Those whitespaces and nodes must be present in the HTML generated by the server-side rendering process.
+하이드레이션은 하이드레이션이 활성화되지 않은 경우에는 존재하지 않는 몇 가지 제약을 애플리케이션에 부여합니다. 애플리케이션은 서버와 클라이언트에서 동일한 생성된 DOM 구조를 가져야 합니다. 하이드레이션 프로세스는 두 위치에서 DOM 트리가 동일한 구조를 갖기를 기대합니다. 여기에는 Angular가 서버에서 렌더링하는 동안 생성하는 공백 및 주석 노드도 포함됩니다. 이러한 공백 및 노드는 서버 사이드 렌더링 프로세스에서 생성된 HTML에 존재해야 합니다.
 
-IMPORTANT: The HTML produced by the server side rendering operation **must not** be altered between the server and the client.
+중요: 서버 사이드 렌더링 작업에서 생성된 HTML은 서버와 클라이언트 간에 **변경되지 않아야** 합니다.
 
-If there is a mismatch between server and client DOM tree structures, the hydration process will encounter problems attempting to match up what was expected to what is actually present in the DOM. Components that do direct DOM manipulation using native DOM APIs are the most common culprit.
+서버와 클라이언트의 DOM 트리 구조 간에 불일치가 있을 경우 하이드레이션 프로세스는 예상된 것과 실제 DOM에 존재하는 것과 일치시키는 과정에서 문제가 발생합니다. 네이티브 DOM API를 사용하여 직접 DOM 조작을 수행하는 컴포넌트가 가장 일반적인 원인입니다.
 
-### Direct DOM Manipulation
+### 직접 DOM 조작
 
-If you have components that manipulate the DOM using native DOM APIs or use `innerHTML` or `outerHTML`, the hydration process will encounter errors. Specific cases where DOM manipulation is a problem are situations like accessing the `document`, querying for specific elements, and injecting additional nodes using `appendChild`. Detaching DOM nodes and moving them to other locations will also result in errors.
+네이티브 DOM API를 사용하여 DOM을 조작하는 컴포넌트가 있거나 `innerHTML` 또는 `outerHTML`을 사용하는 경우, 하이드레이션 프로세스는 오류가 발생합니다. DOM 조작이 문제가 되는 특정 사례는 `document`에 접근하거나 특정 요소를 쿼리하거나 `appendChild`를 사용하여 추가 노드를 삽입하는 상황입니다. DOM 노드를 분리하고 다른 위치로 이동시키는 것도 오류를 발생시킵니다.
 
-This is because Angular is unaware of these DOM changes and cannot resolve them during the hydration process. Angular will expect a certain structure, but it will encounter a different structure when attempting to hydrate. This mismatch will result in hydration failure and throw a DOM mismatch error ([see below](#errors)).
+이는 Angular가 이러한 DOM 변경을 인식하지 못하고 하이드레이션 프로세스 중에 이를 해결할 수 없기 때문입니다. Angular는 특정 구조를 기대하지만 하이드레이션할 때 다른 구조를 만나게 됩니다. 이 불일치는 하이드레이션 실패로 이어지며 DOM 불일치 오류를 발생시킵니다 ([아래를 참조](#errors)).
 
-It is best to refactor your component to avoid this sort of DOM manipulation. Try to use Angular APIs to do this work, if you can. If you cannot refactor this behavior, use the `ngSkipHydration` attribute ([described below](#how-to-skip-hydration-for-particular-components)) until you can refactor into a hydration friendly solution.
+이러한 종류의 DOM 조작을 피하도록 컴포넌트를 리팩토링하는 것이 가장 좋습니다. 가능하다면 Angular API를 사용하여 이 작업을 수행하십시오. 이러한 동작을 리팩토링할 수 없다면, 하이드레이션 친화적인 솔루션으로 리팩토링할 수 있을 때까지 `ngSkipHydration` 속성을 사용하세요 ([아래에 설명](#how-to-skip-hydration-for-particular-components)).
 
-### Valid HTML structure
+### 유효한 HTML 구조
 
-There are a few cases where if you have a component template that does not have valid HTML structure, this could result in a DOM mismatch error during hydration.
+유효한 HTML 구조가 없는 컴포넌트 템플릿이 있는 경우, 하이드레이션 중 DOM 불일치 오류가 발생할 수 있는 몇 가지 경우가 있습니다.
 
-As an example, here are some of the most common cases of this issue.
+예를 들어, 이 문제의 가장 일반적인 몇 가지 경우입니다.
 
-- `<table>` without a `<tbody>`
-- `<div>` inside a `<p>`
-- `<a>` inside another `<a>`
+- `<table>` 내부에 `<tbody>`가 없음
+- `<p>` 내부에 `<div>`가 있음
+- 다른 `<a>` 내부에 `<a>`가 있음
 
-If you are uncertain about whether your HTML is valid, you can use a [syntax validator](https://validator.w3.org/) to check it.
+HTML이 유효한지 확신이 없는 경우 [구문 검사기](https://validator.w3.org/)를 사용하여 확인할 수 있습니다.
 
-Note: While the HTML standard does not require the `<tbody>` element inside tables, modern browsers automatically create a `<tbody>` element in tables that do not declare one. Because of this inconsistency, always explicitly declare a `<tbody>` element in tables to avoid hydration errors.
+주의: HTML 표준은 테이블 안에 `<tbody>` 요소를 요구하지 않지만, 현대 브라우저는 `<tbody>`를 선언하지 않은 테이블에서 자동으로 `<tbody>` 요소를 생성합니다. 이러한 불일치로 인해 하이드레이션 오류를 방지하기 위해 항상 테이블에 `<tbody>` 요소를 명시적으로 선언하세요.
 
-### Preserve Whitespaces Configuration
+### 공백 유지 구성
 
-When using the hydration feature, we recommend using the default setting of `false` for `preserveWhitespaces`. If this setting is not in your tsconfig, the value will be `false` and no changes are required. If you choose to enable preserving whitespaces by adding `preserveWhitespaces: true` to your tsconfig, it is possible you may encounter issues with hydration. This is not yet a fully supported configuration.
+하이드레이션 기능을 사용할 때, `preserveWhitespaces`에 대해 기본값 `false`를 사용하는 것을 권장합니다. 이 설정이 tsconfig에 없으면 값은 `false`가 되며 변경이 필요 없습니다. `preserveWhitespaces: true`를 tsconfig에 추가하여 공백을 유지하도록 설정하기로 선택하면, 하이드레이션에 문제가 발생할 수 있습니다. 이는 아직 완전히 지원되는 구성은 아닙니다.
 
-HELPFUL: Make sure that this setting is set **consistently** in `tsconfig.server.json` for your server and `tsconfig.app.json` for your browser builds. A mismatched value will cause hydration to break.
+도움말: 이 설정이 서버에 대한 `tsconfig.server.json`과 브라우저 빌드에 대한 `tsconfig.app.json`에서 **일관되게** 설정되어 있는지 확인하세요. 값이 불일치하면 하이드레이션이 중단됩니다.
 
-If you choose to set this setting in your tsconfig, we recommend to set it only in `tsconfig.app.json` which by default the `tsconfig.server.json` will inherit it from.
+이 설정을 tsconfig에 설정하기로 선택하면, 기본적으로 `tsconfig.server.json`이 이를 상속하므로 `tsconfig.app.json`에서만 설정하는 것이 좋습니다.
 
-### Custom or Noop Zone.js are not yet supported
+### 사용자 지정 또는 Noop Zone.js는 아직 지원되지 않음
 
-Hydration relies on a signal from Zone.js when it becomes stable inside an application, so that Angular can start the serialization process on the server or post-hydration cleanup on the client to remove DOM nodes that remained unclaimed.
+하이드레이션은 Angular가 서버에서 직렬화 프로세스를 시작하거나 클라이언트에서 하이드레이션 이후 정리 작업을 시작할 수 있도록 할 수 있는 신호를 Zone.js로부터 필요로 합니다. 이는 미처 청구되지 않은 DOM 노드를 제거하기 위한 것입니다.
 
-Providing a custom or a "noop" Zone.js implementation may lead to a different timing of the "stable" event, thus triggering the serialization or the cleanup too early or too late. This is not yet a fully supported configuration and you may need to adjust the timing of the `onStable` event in the custom Zone.js implementation.
+사용자 정의 Zone.js 구현이나 "noop" Zone.js 구현을 제공하면 "안정적인" 이벤트의 타이밍이 달라져 직렬화 또는 정리가 너무 일찍 또는 너무 늦게 발생할 수 있습니다. 이는 아직 완전히 지원되는 구성이 아니며, 사용자 지정 Zone.js 구현에서 `onStable` 이벤트의 타이밍을 조정해야 할 수도 있습니다.
 
-## Errors
+## 오류
 
-There are several hydration related errors you may encounter ranging from node mismatches to cases when the `ngSkipHydration` was used on an invalid host node. The most common error case that may occur is due to direct DOM manipulation using native APIs that results in hydration being unable to find or match the expected DOM tree structure on the client that was rendered by the server. The other case you may encounter this type of error was mentioned in the [Valid HTML structure](#valid-html-structure) section earlier. So, make sure the HTML in your templates are using valid structure, and you'll avoid that error case.
+노드 불일치에서부터 유효하지 않은 호스트 노드에서 `ngSkipHydration`을 사용한 경우까지 여러 가지 하이드레이션 관련 오류가 발생할 수 있습니다. 가장 일반적인 오류 사례는 네이티브 API를 사용하여 직접 DOM 조작을 수행하여 클라이언트에서 서버에 의해 렌더링된 예상 DOM 트리 구조를 찾거나 일치시키는 데 실패하여 발생하는 것입니다. 이러한 유형의 오류를 경험할 수 있는 다른 경우는 위에서 언급한 [유효한 HTML 구조](#valid-html-structure) 섹션에서 설명했습니다. 템플릿에 있는 HTML이 유효한 구조를 사용하고 있는지 확인하면 이러한 오류 사례를 피할 수 있습니다.
 
-For a full reference on hydration related errors, visit the [Errors Reference Guide](/errors).
+하이드레이션 관련 오류에 대한 전체 참조는 [오류 참조 가이드](/errors)를 방문하세요.
 
-## How to skip hydration for particular components
+## 특정 컴포넌트에 대한 하이드레이션 건너뛰기 방법
 
-Some components may not work properly with hydration enabled due to some of the aforementioned issues, like [Direct DOM Manipulation](#direct-dom-manipulation). As a workaround, you can add the `ngSkipHydration` attribute to a component's tag in order to skip hydrating the entire component.
+일부 컴포넌트는 이전에 언급한 문제(예: [직접 DOM 조작](#direct-dom-manipulation) 등)로 인해 하이드레이션이 활성화된 경우 제대로 작동하지 않을 수 있습니다. 해결 방법으로, 컴포넌트 태그에 `ngSkipHydration` 속성을 추가하여 전체 컴포넌트의 하이드레이션을 건너뛸 수 있습니다.
 
 ```angular-html
 <app-example ngSkipHydration />
 ```
 
-Alternatively you can set `ngSkipHydration` as a host binding.
+대안으로 `ngSkipHydration`을 호스트 바인딩으로 설정할 수 있습니다.
 
 ```typescript
 @Component({
@@ -161,23 +161,23 @@ Alternatively you can set `ngSkipHydration` as a host binding.
 class ExampleComponent {}
 ```
 
-The `ngSkipHydration` attribute will force Angular to skip hydrating the entire component and its children. Using this attribute means that the component will behave as if hydration is not enabled, meaning it will destroy and re-render itself.
+`ngSkipHydration` 속성은 Angular가 전체 컴포넌트 및 그 자식을 하이드레이션하는 것을 건너뛰도록 강제합니다. 이 속성을 사용하면 컴포넌트가 하이드레이션이 활성화되지 않은 것처럼 동작하므로 스스로를 파괴하고 다시 렌더링합니다.
 
-HELPFUL: This will fix rendering issues, but it means that for this component (and its children), you don't get the benefits of hydration. You will need to adjust your component's implementation to avoid hydration-breaking patterns (i.e. Direct DOM Manipulation) to be able to remove the skip hydration annotation.
+도움말: 이렇게 하면 렌더링 문제가 해결되지만, 이 컴포넌트(및 그 자식들)에 대해 하이드레이션의 이점을 얻지 못하게 됩니다. 하이드레이션을 방해하는 패턴(예: 직접 DOM 조작)을 피하기 위해 컴포넌트의 구현을 조정해야 하며, 그렇게 할 수 있을 때까지 하이드레이션 건너뛰기 주석을 제거할 수 있습니다.
 
-The `ngSkipHydration` attribute can only be used on component host nodes. Angular throws an error if this attribute is added to other nodes.
+`ngSkipHydration` 속성은 컴포넌트 호스트 노드에서만 사용할 수 있습니다. 이 속성을 다른 노드에 추가하면 Angular는 오류를 발생시킵니다.
 
-Keep in mind that adding the `ngSkipHydration` attribute to your root application component would effectively disable hydration for your entire application. Be careful and thoughtful about using this attribute. It is intended as a last resort workaround. Components that break hydration should be considered bugs that need to be fixed.
+루트 애플리케이션 컴포넌트에 `ngSkipHydration` 속성을 추가하면 애플리케이션 전체에 대한 하이드레이션이 실질적으로 비활성화됩니다. 이 속성을 사용할 때는 주의하고 신중하게 고려하세요. 이는 최후의 수단으로 사용될 수 있는 일회성 해결책입니다. 하이드레이션을 방해하는 컴포넌트는 수정해야 할 버그로 간주해야 합니다.
 
-## Hydration Timing and Application Stability
+## 하이드레이션 타이밍 및 애플리케이션 안정성
 
-Application stability is an important part of the hydration process. Hydration and any post-hydration processes only occur once the application has reported stability. There are a number of ways that stability can be delayed. Examples include setting timeouts and intervals, unresolved promises, and pending microtasks. In those cases, you may encounter the [Application remains unstable](errors/NG0506) error, which indicates that your app has not yet reached the stable state after 10 seconds. If you're finding that your application is not hydrating right away, take a look at what is impacting application stability and refactor to avoid causing these delays.
+애플리케이션 안정성은 하이드레이션 프로세스의 중요한 부분입니다. 하이드레이션 및 모든 하이드레이션 후 프로세스는 애플리케이션이 안정성을 보고한 후에만 발생합니다. 안정성이 지연될 수 있는 여러 가지 방법이 있습니다. 여기에는 타임아웃 및 간격 설정, 해결되지 않은 약속 및 보류 중인 마이크로 작업 등이 포함됩니다. 이러한 경우에는 [애플리케이션이 불안정하게 유지됩니다](errors/NG0506) 오류가 발생할 수 있으며, 이는 앱이 10초 후 아직 안정 상태에 도달하지 않았음을 나타냅니다. 애플리케이션이 즉시 하이드레이션되지 않는 경우, 애플리케이션 안정성에 영향을 미치는 요소를 살펴보고 이러한 지연을 유발하지 않도록 리팩토링하세요.
 
 ## I18N
 
-HELPFUL: Support for internationalization with hydration is currently in [developer preview](/reference/releases#developer-preview). By default, Angular will skip hydration for components that use i18n blocks, effectively re-rendering those components from scratch.
+도움말: 하이드레이션과 함께 국제화를 위한 지원이 현재 [개발자 미리보기](/reference/releases#developer-preview) 상태입니다. 기본적으로 Angular는 i18n 블록을 사용하는 컴포넌트의 하이드레이션을 건너뛰어 사실상 해당 컴포넌트를 처음부터 다시 렌더링합니다.
 
-To enable hydration for i18n blocks, you can add [`withI18nSupport`](/api/platform-browser/withI18nSupport) to your `provideClientHydration` call.
+i18n 블록에 대한 하이드레이션을 활성화하려면, `provideClientHydration` 호출에 [`withI18nSupport`](/api/platform-browser/withI18nSupport)를 추가할 수 있습니다.
 
 ```typescript
 import {
@@ -192,17 +192,17 @@ bootstrapApplication(AppComponent, {
 });
 ```
 
-## Consistent rendering across server-side and client-side
-Avoid introducing `@if` blocks and other conditionals that display different content when server-side rendering than client-side rendering, such as using an `@if` block with Angular's `isPlatformBrowser` function. These rendering differences cause layout shifts, negatively impacting end-user experience and core web vitals.
+## 서버 측과 클라이언트 측에서 일관된 렌더링
+서버 사이드 렌더링과 클라이언트 사이드 렌더링이 다른 콘텐츠를 표시하는 `@if` 블록 및 기타 조건문을 도입하지 마세요. 예를 들어 Angular의 `isPlatformBrowser` 함수로 `@if` 블록을 사용하는 경우와 같은 상황입니다. 이러한 렌더링 차이는 레이아웃 이동을 발생시켜 최종 사용자 경험 및 핵심 웹 지표에 부정적인 영향을 미칩니다.
 
-## Third Party Libraries with DOM Manipulation
+## DOM 조작이 있는 타사 라이브러리
 
-There are a number of third party libraries that depend on DOM manipulation to be able to render. D3 charts is a prime example. These libraries worked without hydration, but they may cause DOM mismatch errors when hydration is enabled. For now, if you encounter DOM mismatch errors using one of these libraries, you can add the `ngSkipHydration` attribute to the component that renders using that library.
+DOM 조작에 의존하여 렌더링할 수 있는 여러 타사 라이브러리가 있습니다. D3 차트가 대표적인 예입니다. 이러한 라이브러리는 하이드레이션 없이 작동했으나 하이드레이션이 활성화되면 DOM 불일치 오류를 일으킬 수 있습니다. 지금은 이러한 라이브러리를 사용할 때 DOM 불일치 오류가 발생하면 해당 라이브러리를 사용하는 컴포넌트에 `ngSkipHydration` 속성을 추가할 수 있습니다.
 
-## Third Party Scripts with DOM Manipulation
+## DOM 조작이 있는 타사 스크립트
 
-Many third party scripts, such as ad trackers and analytics, modify the DOM before hydration can occur. These scripts may cause hydration errors because the page no longer matches the structure expected by Angular. Prefer deferring this type of script until after hydration whenever possible. Consider using [`AfterNextRender`](api/core/afterNextRender) to delay the script until post-hydration processes have occured.
+많은 타사 스크립트(예: 광고 추적기 및 분석)는 하이드레이션이 발생하기 전에 DOM을 수정합니다. 이러한 스크립트는 페이지가 더 이상 Angular에서 예상하는 구조와 일치하지 않기 때문에 하이드레이션 오류를 발생시킬 수 있습니다. 가능하다면 하이드레이션 이후 이 유형의 스크립트를 미루는 것이 좋습니다. 후속 프로세스가 발생한 후까지 스크립트를 지연시키기 위해 [`AfterNextRender`](api/core/afterNextRender)를 사용하는 것을 고려하세요.
 
-## Incremental Hydration
+## 점진적 하이드레이션
 
-Incremental hydration is an advanced form of hydration that allows for more granular control over when hydration happens. See the [incremental hydration guide](guide/incremental-hydration) for more information.
+점진적 하이드레이션은 하이드레이션이 발생하는 시점에 대한 더 세분화된 제어를 허용하는 고급 형태의 하이드레이션입니다. 자세한 정보는 [점진적 하이드레이션 가이드](guide/incremental-hydration)를 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/guide/i18n/add-package.md b/adev/src/content/guide/i18n/add-package.md
index 325c565b4aa5..b02f2ab2754d 100644
--- a/adev/src/content/guide/i18n/add-package.md
+++ b/adev/src/content/guide/i18n/add-package.md
@@ -1,35 +1,35 @@
-# Add the localize package
+# 로컬라이즈 패키지 추가
 
-To take advantage of the localization features of Angular, use the [Angular CLI][CliMain] to add the `@angular/localize` package to your project.
+Angular의 로컬라이즈 기능을 활용하기 위해 [Angular CLI][CliMain]를 사용하여 프로젝트에 `@angular/localize` 패키지를 추가하십시오.
 
-To add the `@angular/localize` package, use the following command to update the `package.json` and TypeScript configuration files in your project.
+`@angular/localize` 패키지를 추가하려면, 다음 명령어를 사용하여 프로젝트의 `package.json` 및 TypeScript 구성 파일을 업데이트하십시오.
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/commands.sh" visibleRegion="add-localize"/>
 
-It adds `types: ["@angular/localize"]` in the TypeScript configuration files.
-It also adds line `/// <reference types="@angular/localize" />` at the top of the `main.ts` file which is the reference to the type definition.
+TypeScript 구성 파일에 `types: ["@angular/localize"]`가 추가됩니다.
+또한 `main.ts` 파일의 상단에 `/// <reference types="@angular/localize" />` 줄이 추가되며, 이는 타입 정의에 대한 참조입니다.
 
-HELPFUL: For more information about `package.json` and `tsconfig.json` files, see [Workspace npm dependencies][GuideNpmPackages] and [TypeScript Configuration][GuideTsConfig]. To learn about Triple-slash Directives visit [Typescript Handbook](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-).
+도움말: `package.json` 및 `tsconfig.json` 파일에 대한 자세한 내용은 [작업 공간 npm 종속성][GuideNpmPackages] 및 [TypeScript 구성][GuideTsConfig]를 참조하십시오. 트리플 슬래시 지시문에 대해 배우려면 [TypeScript 핸드북](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-)을 방문하십시오.
 
-If `@angular/localize` is not installed and you try to build a localized version of your project (for example, while using the `i18n` attributes in templates), the [Angular CLI][CliMain] will generate an error, which would contain the steps that you can take to enable i18n for your project.
+`@angular/localize`가 설치되지 않고 지역화된 버전을 빌드하려고 하면(예: 템플릿에서 `i18n` 속성을 사용하는 경우) [Angular CLI][CliMain]가 오류를 생성하며, 이 오류에는 프로젝트에 대한 i18n을 활성화하기 위해 취할 수 있는 단계가 포함됩니다.
 
-## Options
+## 옵션
 
-| OPTION           | DESCRIPTION | VALUE TYPE | DEFAULT VALUE
-|:---              |:---    |:------     |:------
-| `--project`      | The name of the project. | `string` |
-| `--use-at-runtime` | If set, then `$localize` can be used at runtime. Also `@angular/localize` gets included in the `dependencies` section of `package.json`, rather than `devDependencies`, which is the default.  | `boolean` | `false`
+| 옵션              | 설명       | 값 유형   | 기본값
+|:---               |:---       |:------    |:------
+| `--project`      | 프로젝트 이름입니다. | `string` |
+| `--use-at-runtime` | 설정하면 `$localize`를 런타임에 사용할 수 있습니다. 또한 `@angular/localize`가 기본값인 `devDependencies`가 아닌 `package.json`의 `dependencies` 섹션에 포함됩니다.  | `boolean` | `false`
 
-For more available options, see `ng add` in [Angular CLI][CliMain].
+더 많은 사용 가능한 옵션은 [Angular CLI][CliMain]에서 `ng add`를 참조하십시오.
 
-## What's next
+## 다음 단계
 
 <docs-pill-row>
-  <docs-pill href="guide/i18n/locale-id" title="Refer to locales by ID"/>
+  <docs-pill href="guide/i18n/locale-id" title="ID로 로케일 참조"/>
 </docs-pill-row>
 
-[CliMain]: cli "CLI Overview and Command Reference | Angular"
+[CliMain]: cli "CLI 개요 및 명령 참조 | Angular"
 
-[GuideNpmPackages]: reference/configs/npm-packages "Workspace npm dependencies | Angular"
+[GuideNpmPackages]: reference/configs/npm-packages "작업 공간 npm 종속성 | Angular"
 
-[GuideTsConfig]: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html "TypeScript Configuration"
+[GuideTsConfig]: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html "TypeScript 구성"
\ No newline at end of file
diff --git a/adev/src/content/guide/i18n/deploy.md b/adev/src/content/guide/i18n/deploy.md
index 9cb41acdc854..90249cacb961 100644
--- a/adev/src/content/guide/i18n/deploy.md
+++ b/adev/src/content/guide/i18n/deploy.md
@@ -1,42 +1,33 @@
-# Deploy multiple locales
+# 다국어 배포
 
-If `myapp` is the directory that contains the distributable files of your project, you typically make different versions available for different locales in locale directories.
-For example, your French version is located in the `myapp/fr` directory and the Spanish version is located in the `myapp/es` directory.
+`myapp`이 프로젝트의 배포 파일을 포함하는 디렉터리인 경우, 일반적으로 로케일 디렉터리에서 서로 다른 로케일에 대해 다른 버전을 제공합니다. 예를 들어, 프랑스어 버전은 `myapp/fr` 디렉터리에 위치하고 스페인어 버전은 `myapp/es` 디렉터리에 위치합니다.
 
-The HTML `base` tag with the `href` attribute specifies the base URI, or URL, for relative links.
-If you set the `"localize"` option in [`angular.json`][GuideWorkspaceConfig] workspace build configuration file to `true` or to an array of locale IDs, the CLI adjusts the base `href` for each version of the application.
-To adjust the base `href` for each version of the application, the CLI adds the locale to the configured `"subPath"`.
-Specify the `"subPath"` for each locale in your [`angular.json`][GuideWorkspaceConfig] workspace build configuration file.
-The following example displays `"subPath"` set to an empty string.
+HTML `base` 태그의 `href` 속성은 상대 링크에 대한 기본 URI 또는 URL을 지정합니다. [`angular.json`][GuideWorkspaceConfig] 작업 공간 빌드 구성 파일에서 `"localize"` 옵션을 `true`로 설정하거나 로케일 ID 배열로 설정하면 CLI가 각 애플리케이션 버전에 대한 기본 `href`를 조정합니다. 각 애플리케이션 버전에 대한 기본 `href`를 조정하기 위해 CLI는 구성된 `"subPath"`에 로케일을 추가합니다. 각각의 로케일에 대한 `"subPath"`를 [`angular.json`][GuideWorkspaceConfig] 작업 공간 빌드 구성 파일에 지정하십시오. 다음 예제는 `"subPath"`가 빈 문자열로 설정된 모습을 보여줍니다.
 
 <docs-code header="angular.json" path="adev/src/content/examples/i18n/angular.json" visibleRegion="i18n-subPath"/>
 
-## Configure a server
+## 서버 구성
 
-Typical deployment of multiple languages serve each language from a different subdirectory.
-Users are redirected to the preferred language defined in the browser using the `Accept-Language` HTTP header.
-If the user has not defined a preferred language, or if the preferred language is not available, then the server falls back to the default language.
-To change the language, change your current location to another subdirectory.
-The change of subdirectory often occurs using a menu implemented in the application.
+다국어의 일반적인 배포는 각 언어를 서로 다른 하위 디렉터리에서 제공합니다. 사용자는 `Accept-Language` HTTP 헤더를 사용하여 브라우저에서 정의된 기본 언어로 리디렉션됩니다. 사용자가 선호하는 언어를 정의하지 않았거나 선호하는 언어가 사용 불가능한 경우, 서버는 기본 언어로 되돌아 갑니다. 언어를 변경하려면 현재 위치를 다른 하위 디렉터리로 변경하십시오. 하위 디렉터리의 변경은 종종 애플리케이션에 구현된 메뉴를 사용하여 발생합니다.
 
-For more information on how to deploy apps to a remote server, see [Deployment][GuideDeployment].
+원격 서버에 앱을 배포하는 방법에 대한 자세한 정보는 [배포][GuideDeployment]를 참조하십시오.
 
-IMPORTANT: If you are using [Server rendering](guide/ssr) with `outputMode` set to `server`, Angular automatically handles redirection dynamically based on the `Accept-Language` HTTP header. This simplifies deployment by eliminating the need for manual server or configuration adjustments.
+중요: `outputMode`가 `server`로 설정된 [서버 렌더링](guide/ssr)을 사용하는 경우 Angular는 `Accept-Language` HTTP 헤더에 따라 동적으로 리디렉션을 자동으로 처리합니다. 이는 수동 서버 또는 구성 조정이 필요 없으므로 배포를 단순화합니다.
 
-### Nginx example
+### Nginx 예제
 
-The following example displays an Nginx configuration.
+다음 예제는 Nginx 구성 파일을 보여줍니다.
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/nginx.conf" language="nginx"/>
 
-### Apache example
+### Apache 예제
 
-The following example displays an Apache configuration.
+다음 예제는 Apache 구성 파일을 보여줍니다.
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/apache2.conf" language="apache"/>
 
 [CliBuild]: cli/build "ng build | CLI | Angular"
 
-[GuideDeployment]: tools/cli/deployment "Deployment | Angular"
+[GuideDeployment]: tools/cli/deployment "배포 | Angular"
 
-[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular"
+[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular 작업 공간 구성 | Angular"
\ No newline at end of file
diff --git a/adev/src/content/guide/i18n/example.md b/adev/src/content/guide/i18n/example.md
index 1825b49b3c1b..bac5470f2169 100644
--- a/adev/src/content/guide/i18n/example.md
+++ b/adev/src/content/guide/i18n/example.md
@@ -1,18 +1,18 @@
 # Example Angular Internationalization application
 
-<!-- ## Explore the translated example application -->
+<!-- ## 탐색 번역된 예제 애플리케이션 -->
 
-<!-- Explore the sample application with French translations used in the [Angular Internationalization][GuideI18nOverview] guide: -->
-<!-- TODO: link to GitHub -->
+<!-- [Angular Internationalization][GuideI18nOverview] 가이드에서 사용된 프랑스어 번역이 포함된 샘플 애플리케이션을 탐색하십시오: -->
+<!-- TODO: GitHub 링크 -->
 <!-- <docs-code live path="adev/src/content/examples/i18n" title="live example"/> -->
 
-## `fr-CA` and `en-US` example
+## `fr-CA` 및 `en-US` 예제
 
-The following tabs display the example application and the associated translation files.
+다음 탭에서는 예제 애플리케이션과 관련된 번역 파일을 표시합니다.
 
 <docs-code-multifile>
     <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html"/>
     <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/i18n/src/app/app.component.ts"/>
     <docs-code header="src/main.ts" path="adev/src/content/examples/i18n/doc-files/main.1.ts"/>
     <docs-code header="src/locale/messages.fr.xlf" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html"/>
-</docs-code-multifile>
+</docs-code-multifile>
\ No newline at end of file
diff --git a/adev/src/content/guide/i18n/format-data-locale.md b/adev/src/content/guide/i18n/format-data-locale.md
index 016ae5c31411..51a245663630 100644
--- a/adev/src/content/guide/i18n/format-data-locale.md
+++ b/adev/src/content/guide/i18n/format-data-locale.md
@@ -1,18 +1,18 @@
-# Format data based on locale
+# 지역에 따라 데이터 포맷 지정하기
 
-Angular provides the following built-in data transformation [pipes](guide/templates/pipes).
-The data transformation pipes use the [`LOCALE_ID`][ApiCoreLocaleId] token to format data based on rules of each locale.
+Angular는 다음과 같은 내장 데이터 변환 [파이프](guide/templates/pipes)를 제공합니다.  
+데이터 변환 파이프는 [`LOCALE_ID`][ApiCoreLocaleId] 토큰을 사용하여 각 지역의 규칙에 따라 데이터를 포맷합니다.
 
-| Data transformation pipe                   | Details |
-|:---                                        |:---     |
-| [`DatePipe`][ApiCommonDatepipe]         | Formats a date value.                             |
-| [`CurrencyPipe`][ApiCommonCurrencypipe] | Transforms a number into a currency string.       |
-| [`DecimalPipe`][ApiCommonDecimalpipe]   | Transforms a number into a decimal number string. |
-| [`PercentPipe`][ApiCommonPercentpipe]   | Transforms a number into a percentage string.     |
+| 데이터 변환 파이프                       | 세부 사항                                    |
+|:---                                      |:---                                         |
+| [`DatePipe`][ApiCommonDatepipe]       | 날짜 값을 포맷합니다.                          |
+| [`CurrencyPipe`][ApiCommonCurrencypipe] | 숫자를 통화 문자열로 변환합니다.               |
+| [`DecimalPipe`][ApiCommonDecimalpipe] | 숫자를 소수 문자열로 변환합니다.               |
+| [`PercentPipe`][ApiCommonPercentpipe] | 숫자를 백분율 문자열로 변환합니다.             |
 
-## Use DatePipe to display the current date
+## 현재 날짜를 표시하기 위해 DatePipe 사용하기
 
-To display the current date in the format for the current locale, use the following format for the `DatePipe`.
+현재 지역의 포맷으로 현재 날짜를 표시하기 위해 `DatePipe`의 다음 포맷을 사용합니다.
 
 <!--todo: replace with docs-code -->
 
@@ -22,11 +22,11 @@ To display the current date in the format for the current locale, use the follow
 
 </docs-code>
 
-## Override current locale for CurrencyPipe
+## CurrencyPipe에 대한 현재 지역 재정의하기
 
-Add the `locale` parameter to the pipe to override the current value of `LOCALE_ID` token.
+파이프에 `locale` 매개변수를 추가하여 현재 `LOCALE_ID` 토큰의 값을 재정의합니다.
 
-To force the currency to use American English \(`en-US`\), use the following format for the `CurrencyPipe`
+통화를 미국 영어 \(`en-US`\)로 강제 적용하려면 `CurrencyPipe`의 다음 포맷을 사용합니다.
 
 <!--todo: replace with docs-code -->
 
@@ -36,17 +36,17 @@ To force the currency to use American English \(`en-US`\), use the following for
 
 </docs-code>
 
-HELPFUL: The locale specified for the `CurrencyPipe` overrides the global `LOCALE_ID` token of your application.
+도움이 됩니다: `CurrencyPipe`에 지정된 지역은 애플리케이션의 전역 `LOCALE_ID` 토큰을 재정의합니다.
 
-## What's next
+## 다음 단계
 
 <docs-pill-row>
-  <docs-pill href="guide/i18n/prepare" title="Prepare component for translation"/>
+  <docs-pill href="guide/i18n/prepare" title="번역을 위한 컴포넌트 준비하기"/>
 </docs-pill-row>
 
 [ApiCommonCurrencypipe]: api/common/CurrencyPipe "CurrencyPipe | Common - API | Angular"
 
-[ApiCommonDatepipe]: api/common/DatePipe "DatePipe | Common - API | Angular"
-[ApiCommonDecimalpipe]: api/common/DecimalPipe "DecimalPipe | Common - API | Angular"
-[ApiCommonPercentpipe]: api/common/PercentPipe "PercentPipe | Common - API | Angular"
-[ApiCoreLocaleId]: api/core/LOCALE_ID "LOCALE_ID | Core - API | Angular"
+[ApiCommonDatepipe]: api/common/DatePipe "DatePipe | Common - API | Angular"  
+[ApiCommonDecimalpipe]: api/common/DecimalPipe "DecimalPipe | Common - API | Angular"  
+[ApiCommonPercentpipe]: api/common/PercentPipe "PercentPipe | Common - API | Angular"  
+[ApiCoreLocaleId]: api/core/LOCALE_ID "LOCALE_ID | Core - API | Angular"
\ No newline at end of file
diff --git a/adev/src/content/guide/i18n/import-global-variants.md b/adev/src/content/guide/i18n/import-global-variants.md
index e9ad9b24cb0c..5870dc009a63 100644
--- a/adev/src/content/guide/i18n/import-global-variants.md
+++ b/adev/src/content/guide/i18n/import-global-variants.md
@@ -1,6 +1,6 @@
-# Import global variants of the locale data
+# 전역 지역 데이터 가져오기
 
-The [Angular CLI][CliMain] automatically includes locale data if you run the [`ng build`][CliBuild] command with the `--localize` option.
+[Angular CLI][CliMain]는 `--localize` 옵션과 함께 [`ng build`][CliBuild] 명령을 실행하면 자동으로 지역 데이터를 포함합니다.
 
 <!--todo: replace with docs-code -->
 
@@ -10,19 +10,19 @@ ng build --localize
 
 </docs-code>
 
-HELPFUL: The initial installation of Angular already contains locale data for English in the United States \(`en-US`\).
-The [Angular CLI][CliMain] automatically includes the locale data and sets the `LOCALE_ID` value when you use the `--localize` option with [`ng build`][CliBuild] command.
+도움말: Angular의 초기 설치에는 미국 영어에 대한 지역 데이터 \(`en-US`\)가 이미 포함되어 있습니다.
+[Angular CLI][CliMain]는 `--localize` 옵션과 함께 [`ng build`][CliBuild] 명령을 사용할 때 지역 데이터를 자동으로 포함하고 `LOCALE_ID` 값을 설정합니다.
 
-The `@angular/common` package on npm contains the locale data files.
-Global variants of the locale data are available in `@angular/common/locales/global`.
+npm의 `@angular/common` 패키지에는 지역 데이터 파일이 포함되어 있습니다.
+전역 지역 데이터 변형은 `@angular/common/locales/global`에서 사용할 수 있습니다.
 
-## `import` example for French
+## 프랑스어 `import` 예제
 
-For example, you could import the global variants for French \(`fr`\) in `main.ts` where you bootstrap the application.
+예를 들어, 애플리케이션을 부트스트랩하는 `main.ts`에서 프랑스어 \(`fr`\)에 대한 전역 변형을 가져올 수 있습니다.
 
-<docs-code header="src/main.ts (import locale)" path="adev/src/content/examples/i18n/src/main.ts" visibleRegion="global-locale"/>
+<docs-code header="src/main.ts (지역 가져오기)" path="adev/src/content/examples/i18n/src/main.ts" visibleRegion="global-locale"/>
 
-HELPFUL: In an `NgModules` application, you would import it in your `app.module`.
+도움말: `NgModules` 애플리케이션에서는 `app.module`에서 가져옵니다.
 
-[CliMain]: cli "CLI Overview and Command Reference | Angular"
-[CliBuild]: cli/build "ng build | CLI | Angular"
+[CliMain]: cli "CLI 개요 및 명령 참조 | Angular"
+[CliBuild]: cli/build "ng build | CLI | Angular"
\ No newline at end of file
diff --git a/adev/src/content/guide/i18n/locale-id.md b/adev/src/content/guide/i18n/locale-id.md
index 949dd974596a..da723c6dc5af 100644
--- a/adev/src/content/guide/i18n/locale-id.md
+++ b/adev/src/content/guide/i18n/locale-id.md
@@ -1,77 +1,77 @@
-# Refer to locales by ID
+# ID로 로케일 참조
 
-Angular uses the Unicode *locale identifier* \(Unicode locale ID\) to find the correct locale data for internationalization of text strings.
+Angular는 Unicode *로케일 식별자* \(Unicode locale ID\)를 사용하여 텍스트 문자열의 국제화를 위한 올바른 로케일 데이터를 찾습니다.
 
-<docs-callout title="Unicode locale ID">
+<docs-callout title="Unicode 로케일 ID">
 
-* A locale ID conforms to the [Unicode Common Locale Data Repository (CLDR) core specification][UnicodeCldrDevelopmentCoreSpecification].
-    For more information about locale IDs, see [Unicode Language and Locale Identifiers][UnicodeCldrDevelopmentCoreSpecificationLocaleIDs].
+* 로케일 ID는 [Unicode Common Locale Data Repository (CLDR) 코어 사양][UnicodeCldrDevelopmentCoreSpecification]에 부합합니다.
+    로케일 ID에 대한 자세한 내용은 [Unicode 언어 및 로케일 식별자][UnicodeCldrDevelopmentCoreSpecificationLocaleIDs]를 참조하세요.
 
-* CLDR and Angular use [BCP 47 tags][RfcEditorInfoBcp47] as the base for the locale ID
+* CLDR와 Angular는 로케일 ID의 기반으로 [BCP 47 태그][RfcEditorInfoBcp47]를 사용합니다.
 
 </docs-callout>
 
-A locale ID specifies the language, country, and an optional code for further variants or subdivisions.
-A locale ID consists of the language identifier, a hyphen \(`-`\) character, and the locale extension.
+로케일 ID는 언어, 국가 및 추가 변형이나 세분화를 위한 선택적 코드를 지정합니다.
+로케일 ID는 언어 식별자, 하이픈 \(`-`\) 문자, 및 로케일 확장자로 구성됩니다.
 
 <docs-code language="html">
 {language_id}-{locale_extension}
 </docs-code>
 
-HELPFUL: To accurately translate your Angular project, you must decide which languages and locales you are targeting for internationalization.
+유용한 정보: Angular 프로젝트를 정확하게 번역하려면 국제화의 대상이 되는 언어와 로케일을 결정해야 합니다.
 
-Many countries share the same language, but differ in usage.
-The differences include grammar, punctuation, formats for currency, decimal numbers, dates, and so on.
+많은 국가가 같은 언어를 사용하지만 사용법이 다릅니다.
+차이점에는 문법, 구두점, 통화, 소수점 숫자, 날짜 형식 등이 포함됩니다.
 
-For the examples in this guide, use the following languages and locales.
+이 가이드의 예시를 위해 다음 언어 및 로케일을 사용하세요.
 
-| Language | Locale                   | Unicode locale ID |
-|:---      |:---                      |:---               |
-| English  | Canada                   | `en-CA`           |
-| English  | United States of America | `en-US`           |
-| French   | Canada                   | `fr-CA`           |
-| French   | France                   | `fr-FR`           |
+| 언어     | 로케일                       | Unicode 로케일 ID |
+|:---      |:---                          |:---               |
+| 영어     | 캐나다                       | `en-CA`           |
+| 영어     | 미국                         | `en-US`           |
+| 프랑스어  | 캐나다                       | `fr-CA`           |
+| 프랑스어  | 프랑스                       | `fr-FR`           |
 
-The [Angular repository][GithubAngularAngularTreeMasterPackagesCommonLocales] includes common locales.
+[Angular 저장소][GithubAngularAngularTreeMasterPackagesCommonLocales]에는 일반 로케일이 포함되어 있습니다.
 
 <docs-callout>
-For a list of language codes, see [ISO 639-2](https://www.loc.gov/standards/iso639-2).
+언어 코드 목록은 [ISO 639-2](https://www.loc.gov/standards/iso639-2)를 참조하세요.
 </docs-callout>
 
-## Set the source locale ID
+## 소스 로케일 ID 설정
 
-Use the Angular CLI to set the source language in which you are writing the component template and code.
+Angular CLI를 사용하여 컴포넌트 템플릿 및 코드 작성에 사용할 소스 언어를 설정합니다.
 
-By default, Angular uses `en-US` as the source locale of your project.
+기본적으로 Angular는 프로젝트의 소스 로케일로 `en-US`를 사용합니다.
 
-To change the source locale of your project for the build, complete the following actions.
+프로젝트의 빌드를 위한 소스 로케일을 변경하려면 다음 작업을 완료하세요.
 
-1. Open the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file.
-2. Add or modify the `sourceLocale` field inside the `i18n` section:
+1. [`angular.json`][GuideWorkspaceConfig] 작업공간 빌드 구성 파일을 엽니다.
+2. `i18n` 섹션 내에서 `sourceLocale` 필드를 추가하거나 수정합니다:
 ```json
 {
   "projects": {
     "your-project": {
       "i18n": {
-        "sourceLocale": "ca"  // Use your desired locale code
+        "sourceLocale": "ca"  // 원하는 로케일 코드를 사용하세요
       }
     }
   }
 }
 ```
 
-## What's next
+## 다음은 무엇인가요
 
 <docs-pill-row>
-  <docs-pill href="guide/i18n/format-data-locale" title="Format data based on locale"/>
+  <docs-pill href="guide/i18n/format-data-locale" title="로케일에 따라 데이터 형식화하기"/>
 </docs-pill-row>
 
-[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular"
+[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular 작업공간 구성 | Angular"
 
 [GithubAngularAngularTreeMasterPackagesCommonLocales]: <https://github.com/angular/angular/tree/main/packages/common/locales> "angular/packages/common/locales | angular/angular | GitHub"
 
 [RfcEditorInfoBcp47]: https://www.rfc-editor.org/info/bcp47 "BCP 47 | RFC Editor"
 
-[UnicodeCldrDevelopmentCoreSpecification]: https://cldr.unicode.org/index/cldr-spec "Core Specification | Unicode CLDR Project"
+[UnicodeCldrDevelopmentCoreSpecification]: https://cldr.unicode.org/index/cldr-spec "코어 사양 | Unicode CLDR Project"
 
-[UnicodeCldrDevelopmentCoreSpecificationLocaleID]: https://cldr.unicode.org/index/cldr-spec/picking-the-right-language-code "Unicode Language and Locale Identifiers - Core Specification | Unicode CLDR Project"
+[UnicodeCldrDevelopmentCoreSpecificationLocaleID]: https://cldr.unicode.org/index/cldr-spec/picking-the-right-language-code "Unicode 언어 및 로케일 식별자 - 코어 사양 | Unicode CLDR Project"
\ No newline at end of file
diff --git a/adev/src/content/guide/i18n/manage-marked-text.md b/adev/src/content/guide/i18n/manage-marked-text.md
index 69a11047ce3e..2712b34fa655 100644
--- a/adev/src/content/guide/i18n/manage-marked-text.md
+++ b/adev/src/content/guide/i18n/manage-marked-text.md
@@ -1,34 +1,34 @@
-# Manage marked text with custom IDs
+# 관리되는 텍스트에 맞춤 ID 사용하기
 
-The Angular extractor generates a file with a translation unit entry each of the following instances.
+Angular 추출기는 다음 인스턴스 각각에 대해 번역 단위 항목이 포함된 파일을 생성합니다.
 
-* Each `i18n` attribute in a component template
-* Each [`$localize`][ApiLocalizeInitLocalize] tagged message string in component code
+* 구성 요소 템플릿의 각 `i18n` 속성
+* 구성 요소 코드의 각 [`$localize`][ApiLocalizeInitLocalize] 태그 메시지 문자열
 
-As described in [How meanings control text extraction and merges][GuideI18nCommonPrepareHowMeaningsControlTextExtractionAndMerges], Angular assigns each translation unit a unique ID.
+[의미가 텍스트 추출 및 병합을 제어하는 방법][GuideI18nCommonPrepareHowMeaningsControlTextExtractionAndMerges]에서 설명한 바와 같이, Angular는 각 번역 단위에 고유한 ID를 할당합니다.
 
-The following example displays translation units with unique IDs.
+다음 예제는 고유한 ID가 있는 번역 단위를 표시합니다.
 
 <docs-code header="messages.fr.xlf.html" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="generated-id"/>
 
-When you change the translatable text, the extractor generates a new ID for that translation unit.
-In most cases, changes in the source text also require a change to the translation.
-Therefore, using a new ID keeps the text change in sync with translations.
+변환 가능한 텍스트를 변경하면, 추출기는 해당 번역 단위에 대해 새로운 ID를 생성합니다.
+대부분의 경우, 소스 텍스트의 변경은 번역을 변경해야 합니다.
+따라서 새로운 ID를 사용하면 텍스트 변경이 번역과 동기화됩니다.
 
-However, some translation systems require a specific form or syntax for the ID.
-To address the requirement, use a custom ID to mark text.
-Most developers don't need to use a custom ID.
-If you want to use a unique syntax to convey additional metadata, use a custom ID.
-Additional metadata may include the library, component, or area of the application in which the text appears.
+그러나 일부 번역 시스템은 ID에 대해 특정 형식이나 구문을 요구합니다.
+요구 사항을 해결하기 위해 텍스트를 표시할 때 맞춤 ID를 사용하십시오.
+대부분의 개발자는 맞춤 ID를 사용할 필요가 없습니다.
+추가 메타데이터를 전달하기 위해 고유한 구문을 사용하려면 맞춤 ID를 사용하십시오.
+추가 메타데이터에는 텍스트가 나타나는 라이브러리, 구성 요소 또는 애플리케이션의 영역이 포함될 수 있습니다.
 
-To specify a custom ID in the `i18n` attribute or [`$localize`][ApiLocalizeInitLocalize] tagged message string, use the `@@` prefix.
-The following example defines the `introductionHeader` custom ID in a heading element.
+`i18n` 속성 또는 [`$localize`][ApiLocalizeInitLocalize] 태그 메시지 문자열에 맞춤 ID를 지정하려면 `@@` 접두사를 사용하세요.
+다음 예제는 머리글 요소에서 `introductionHeader` 맞춤 ID를 정의합니다.
 
 <docs-code header="app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-solo-id"/>
 
-The following example defines the `introductionHeader` custom ID for a variable.
+다음 예제는 변수를 위한 `introductionHeader` 맞춤 ID를 정의합니다.
 
-<!--todo: replace with code example -->
+<!--todo: 코드 예제로 교체 -->
 
 <docs-code language="typescript">
 
@@ -36,25 +36,25 @@ variableText1 = $localize`:@@introductionHeader:Hello i18n!`;
 
 </docs-code>
 
-When you specify a custom ID, the extractor generates a translation unit with the custom ID.
+맞춤 ID를 지정하면 추출기가 맞춤 ID를 가진 번역 단위를 생성합니다.
 
 <docs-code header="messages.fr.xlf.html" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="custom-id"/>
 
-If you change the text, the extractor does not change the ID.
-As a result, you don't have to take the extra step to update the translation.
-The drawback of using custom IDs is that if you change the text, your translation may be out-of-sync with the newly changed source text.
+텍스트를 변경하면 추출기는 ID를 변경하지 않습니다.
+그 결과, 번역을 업데이트하기 위해 추가 단계를 수행할 필요가 없습니다.
+맞춤 ID를 사용하면 텍스트를 변경하는 경우 번역이 새로 변경된 소스 텍스트와 동기화되지 않을 수 있는 단점이 있습니다.
 
-## Use a custom ID with a description
+## 설명과 함께 맞춤 ID 사용하기
 
-Use a custom ID in combination with a description and a meaning to further help the translator.
+설명과 의미와 함께 맞춤 ID를 사용하여 번역자를 더 돕습니다.
 
-The following example includes a description, followed by the custom ID.
+다음 예제는 설명을 포함하고, 그 뒤에 맞춤 ID가 있습니다.
 
 <docs-code header="app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-id"/>
 
-The following example defines the `introductionHeader` custom ID and description for a variable.
+다음 예제는 변수를 위한 `introductionHeader` 맞춤 ID와 설명을 정의합니다.
 
-<!--todo: replace with code example -->
+<!--todo: 코드 예제로 교체 -->
 
 <docs-code language="typescript">
 
@@ -62,13 +62,13 @@ variableText2 = $localize`:An introduction header for this sample@@introductionH
 
 </docs-code>
 
-The following example adds a meaning.
+다음 예제는 의미를 추가합니다.
 
 <docs-code header="app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-meaning-and-id"/>
 
-The following example defines the `introductionHeader` custom ID for a variable.
+다음 예제는 변수를 위한 `introductionHeader` 맞춤 ID를 정의합니다.
 
-<!--todo: replace with code example -->
+<!--todo: 코드 예제로 교체 -->
 
 <docs-code language="typescript">
 
@@ -76,23 +76,23 @@ variableText3 = $localize`:site header|An introduction header for this sample@@i
 
 </docs-code>
 
-### Define unique custom IDs
+### 고유한 맞춤 ID 정의하기
 
-Be sure to define custom IDs that are unique.
-If you use the same ID for two different text elements, the extraction tool extracts only the first one, and Angular uses the translation in place of both original text elements.
+고유한 맞춤 ID를 정의해야 합니다.
+두 개의 서로 다른 텍스트 요소에 동일한 ID를 사용하면 추출 도구는 첫 번째 것만 추출하며, Angular는 두 원래 텍스트 요소 모두에 대해 번역을 사용합니다.
 
-For example, in the following code snippet the same `myId` custom ID is defined for two different text elements.
+예를 들어, 다음 코드 조각에서는 두 개의 서로 다른 텍스트 요소에 대해 동일한 `myId` 맞춤 ID가 정의되어 있습니다.
 
 <docs-code header="app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-duplicate-custom-id"/>
 
-The following displays the translation in French.
+다음은 프랑스어 번역을 표시합니다.
 
 <docs-code header="src/locale/messages.fr.xlf" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="i18n-duplicate-custom-id"/>
 
-Both elements now use the same translation \(`Bonjour`\), because both were defined with the same custom ID.
+이제 두 요소는 동일한 번역 (`Bonjour`) 을 사용합니다. 두 요소 모두 동일한 맞춤 ID로 정의되었기 때문입니다.
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/rendered-output.html"/>
 
 [ApiLocalizeInitLocalize]: api/localize/init/$localize "$localize | init - localize - API | Angular"
 
-[GuideI18nCommonPrepareHowMeaningsControlTextExtractionAndMerges]: guide/i18n/prepare#h1-example "How meanings control text extraction and merges - Prepare components for translations | Angular"
+[GuideI18nCommonPrepareHowMeaningsControlTextExtractionAndMerges]: guide/i18n/prepare#h1-example "의미가 텍스트 추출 및 병합을 제어하는 방법 - 번역을 위해 구성 요소 준비 | Angular"
\ No newline at end of file
diff --git a/adev/src/content/guide/i18n/merge.md b/adev/src/content/guide/i18n/merge.md
index caf0bdf9dc43..f052d61c95dd 100644
--- a/adev/src/content/guide/i18n/merge.md
+++ b/adev/src/content/guide/i18n/merge.md
@@ -1,156 +1,156 @@
-# Merge translations into the application
+# 애플리케이션에 번역 병합하기
 
-To merge the completed translations into your project, complete the following actions
+완료된 번역을 프로젝트에 병합하려면 다음 작업을 완료하십시오.
 
-1. Use the [Angular CLI][CliMain] to build a copy of the distributable files of your project
-1. Use the `"localize"` option to replace all of the i18n messages with the valid translations and build a localized variant application.
-    A variant application is a complete a copy of the distributable files of your application translated for a single locale.
+1. [Angular CLI][CliMain]를 사용하여 배포 가능한 파일의 복사본을 빌드합니다.
+1. `"localize"` 옵션을 사용하여 모든 i18n 메시지를 유효한 번역으로 교체하고 로컬화된 변형 애플리케이션을 빌드합니다.
+    변형 애플리케이션은 단일 로케일을 위해 번역된 애플리케이션의 배포 가능한 파일의 완전한 복사본입니다.
 
-After you merge the translations, serve each distributable copy of the application using server-side language detection or different subdirectories.
+번역을 병합한 후에는 서버 측 언어 감지 또는 서로 다른 하위 디렉터리를 사용하여 애플리케이션의 각 배포 가능한 복사본을 제공하십시오.
 
-HELPFUL: For more information about how to serve each distributable copy of the application, see [deploying multiple locales](guide/i18n/deploy).
+유용 정보: 애플리케이션의 각 배포 가능한 복사본을 제공하는 방법에 대한 자세한 정보는 [여러 로케일 배포하기](guide/i18n/deploy)를 참조하십시오.
 
-For a compile-time translation of the application, the build process uses ahead-of-time (AOT) compilation to produce a small, fast, ready-to-run application.
+애플리케이션의 컴파일 타임 번역을 위해 빌드 프로세스는 선행 컴파일(AOT)을 사용하여 작고 빠르며 즉시 실행 가능한 애플리케이션을 생성합니다.
 
-HELPFUL: For a detailed explanation of the build process, see [Building and serving Angular apps][GuideBuild].
-The build process works for translation files in the `.xlf` format or in another format that Angular understands, such as `.xtb`.
-For more information about translation file formats used by Angular, see [Change the source language file format][GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat]
+유용 정보: 빌드 프로세스에 대한 자세한 설명은 [Angular 앱 빌드 및 제공하기][GuideBuild]를 참조하십시오.
+빌드 프로세스는 `.xlf` 형식의 번역 파일 또는 Angular가 이해하는 다른 형식(예: `.xtb`)의 번역 파일을 처리합니다.
+Angular에서 사용하는 번역 파일 형식에 대한 자세한 정보는 [소스 언어 파일 형식 변경하기][GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat]를 참조하십시오.
 
-To build a separate distributable copy of the application for each locale, [define the locales in the build configuration][GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration] in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file of your project.
+각 로케일에 대해 애플리케이션의 별도 배포 가능한 복사본을 빌드하려면 [빌드 구성에서 로케일 정의하기][GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration]를 사용하여 프로젝트의 [`angular.json`][GuideWorkspaceConfig] 작업 공간 빌드 구성 파일에서 로케일을 정의하십시오.
 
-This method shortens the build process by removing the requirement to perform a full application build for each locale.
+이 방법은 각 로케일에 대해 전체 애플리케이션 빌드를 수행할 필요성을 제거하여 빌드 프로세스를 단축시킵니다.
 
-To [generate application variants for each locale][GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale], use the `"localize"` option in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file.
-Also, to [build from the command line][GuideI18nCommonMergeBuildFromTheCommandLine], use the [`build`][CliBuild] [Angular CLI][CliMain] command with the `--localize` option.
+각 로케일에 대해 [애플리케이션 변형 생성하기][GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]를 사용하려면 [`angular.json`][GuideWorkspaceConfig] 작업 공간 빌드 구성 파일에서 `"localize"` 옵션을 사용하십시오.
+또한 [명령줄에서 빌드하기][GuideI18nCommonMergeBuildFromTheCommandLine] 위해 [`build`][CliBuild] [Angular CLI][CliMain] 명령을 `--localize` 옵션과 함께 사용하십시오.
 
-HELPFUL: Optionally, [apply specific build options for just one locale][GuideI18nCommonMergeApplySpecificBuildOptionsForJustOneLocale] for a custom locale configuration.
+유용 정보: 특정 로케일 구성에 대해 [단일 로케일에 대해 특정 빌드 옵션 적용하기][GuideI18nCommonMergeApplySpecificBuildOptionsForJustOneLocale]를 선택적으로 적용할 수 있습니다.
 
-## Define locales in the build configuration
+## 빌드 구성에서 로케일 정의하기
 
-Use the `i18n` project option in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file of your project to define locales for a project.
+프로젝트의 [`angular.json`][GuideWorkspaceConfig] 작업 공간 빌드 구성 파일에서 `i18n` 프로젝트 옵션을 사용하여 프로젝트의 로케일을 정의하십시오.
 
-The following sub-options identify the source language and tell the compiler where to find supported translations for the project.
+다음 하위 옵션은 소스 언어를 식별하고 컴파일러에 대해 프로젝트의 지원되는 번역을 찾는 위치를 알려줍니다.
 
-| Suboption      | Details |
-|:---            |:--- |
-| `sourceLocale` | The locale you use within the application source code \(`en-US` by default\) |
-| `locales`      | A map of locale identifiers to translation files                             |
+| 하위 옵션        | 세부사항 |
+|:---              |:--- |
+| `sourceLocale`   | 애플리케이션 소스 코드 내에서 사용하는 로케일 \(`en-US` 기본값\) |
+| `locales`        | 번역 파일에 대한 로케일 식별자의 맵                         |
 
-### `angular.json` for `en-US` and `fr` example
+### `en-US` 및 `fr`의 `angular.json` 예제
 
-For example, the following excerpt of an [`angular.json`][GuideWorkspaceConfig] workspace build configuration file sets the source locale to `en-US` and provides the path to the French \(`fr`\) locale translation file.
+예를 들어, 다음은 [`angular.json`][GuideWorkspaceConfig] 작업 공간 빌드 구성 파일의 발췌로, 소스 로케일을 `en-US`로 설정하고 프랑스어 \(`fr`\) 로케일 번역 파일의 경로를 제공합니다.
 
 <docs-code header="angular.json" path="adev/src/content/examples/i18n/angular.json" visibleRegion="locale-config"/>
 
-## Generate application variants for each locale
+## 각 로케일에 대한 애플리케이션 변형 생성하기
 
-To use your locale definition in the build configuration, use the `"localize"` option in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file to tell the CLI which locales to generate for the build configuration.
+빌드 구성에서 로케일 정의를 사용하려면 [`angular.json`][GuideWorkspaceConfig] 작업 공간 빌드 구성 파일에서 `"localize"` 옵션을 사용하여 CLI에 대해 빌드 구성에서 생성할 로케일을 지정하십시오.
 
-* Set `"localize"` to `true` for all the locales previously defined in the build configuration.
-* Set `"localize"` to an array of a subset of the previously defined locale identifiers to build only those locale versions.
-* Set `"localize"` to `false` to disable localization and not generate any locale-specific versions.
+* `"localize"`를 빌드 구성에서 이전에 정의된 모든 로케일에 대해 `true`로 설정합니다.
+* `"localize"`를 이전에 정의된 로케일 식별자의 하위 집합의 배열로 설정하여 해당 로케일 버전만 빌드합니다.
+* `"localize"`를 `false`로 설정하여 로컬화를 비활성화하고 로케일 별 버전을 생성하지 않습니다.
 
-HELPFUL: Ahead-of-time (AOT) compilation is required to localize component templates.
+유용 정보: 구성 요소 템플릿을 로컬화하려면 선행 컴파일(AOT)이 필요합니다.
 
-If you changed this setting, set `"aot"` to `true` in order to use AOT.
+이 설정을 변경한 경우 AOT를 사용하려면 `"aot"`를 `true`로 설정하십시오.
 
-HELPFUL: Due to the deployment complexities of i18n and the need to minimize rebuild time, the development server only supports localizing a single locale at a time.
-If you set the `"localize"` option to `true`, define more than one locale, and use `ng serve`; then an error occurs.
-If you want to develop against a specific locale, set the `"localize"` option to a specific locale.
-For example, for French \(`fr`\), specify `"localize": ["fr"]`.
+유용 정보: i18n의 배포 복잡성과 리빌드 시간을 최소화해야 하기 때문에 개발 서버는 한 번에 단일 로케일만 로컬화하는 것을 지원합니다.
+`"localize"` 옵션을 `true`로 설정하고 여러 로케일을 정의하며 `ng serve`를 사용하면 오류가 발생합니다.
+특정 로케일에 대해 개발하려면 `"localize"` 옵션을 특정 로케일로 설정하십시오.
+예를 들어, 프랑스어 \(`fr`\)의 경우 `"localize": ["fr"]`를 지정하십시오.
 
-The CLI loads and registers the locale data, places each generated version in a locale-specific directory to keep it separate from other locale versions, and puts the directories within the configured `outputPath` for the project.
-For each application variant the `lang` attribute of the `html` element is set to the locale.
-The CLI also adjusts the HTML base HREF for each version of the application by adding the locale to the configured `baseHref`.
+CLI는 로케일 데이터를 로드하고 등록하며, 서로 다른 로케일 버전을 분리하여 각 생성된 버전을 로케일 특정 디렉터리에 배치하고, 프로젝트에 대해 구성된 `outputPath` 내의 디렉터리에 넣습니다.
+각 애플리케이션 변형에 대해 `html` 요소의 `lang` 속성은 로케일로 설정됩니다.
+CLI는 또한 각 애플리케이션 버전의 HTML 기본 HREF를 조정하여 로케일을 구성된 `baseHref`에 추가합니다.
 
-Set the `"localize"` property as a shared configuration to effectively inherit for all the configurations.
-Also, set the property to override other configurations.
+`"localize"` 속성을 공유 구성으로 설정하여 모든 구성에 대해 효과적으로 상속받을 수 있습니다.
+또한 속성을 설정하여 다른 구성을 재정의할 수 있습니다.
 
-### `angular.json` include all locales from build example
+### 모든 로케일을 포함하는 `angular.json` 빌드 예제
 
-The following example displays the `"localize"` option set to `true` in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file, so that all locales defined in the build configuration are built.
+다음 예제는 [`angular.json`][GuideWorkspaceConfig] 작업 공간 빌드 구성 파일에서 `"localize"` 옵션이 `true`로 설정되어 있어 빌드 구성에 정의된 모든 로케일이 빌드됩니다.
 
 <docs-code header="angular.json" path="adev/src/content/examples/i18n/angular.json" visibleRegion="build-localize-true"/>
 
-## Build from the command line
+## 명령줄에서 빌드하기
 
-Also, use the `--localize` option with the [`ng build`][CliBuild] command and your existing `production` configuration.
-The CLI builds all locales defined in the build configuration.
-If you set the locales in build configuration, it is similar to when you set the `"localize"` option to `true`.
+또한 기존 `production` 구성과 함께 [`ng build`][CliBuild] 명령으로 `--localize` 옵션을 사용하십시오.
+CLI는 빌드 구성에서 정의된 모든 로케일을 빌드합니다.
+빌드 구성에서 로케일을 설정하면 `"localize"` 옵션을 `true`로 설정한 것과 유사합니다.
 
-HELPFUL: For more information about how to set the locales, see [Generate application variants for each locale][GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale].
+유용 정보: 로케일을 설정하는 방법에 대한 자세한 정보는 [각 로케일에 대한 애플리케이션 변형 생성하기][GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]를 참조하십시오.
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/commands.sh" visibleRegion="build-localize"/>
 
-## Apply specific build options for just one locale
+## 단일 로케일에 대해 특정 빌드 옵션 적용하기
 
-To apply specific build options to only one locale, specify a single locale to create a custom locale-specific configuration.
+단일 로케일에 대해 특정 빌드 옵션을 적용하려면 단일 로케일을 지정하여 사용자 정의 로케일 특정 구성을 생성하십시오.
 
-IMPORTANT: Use the [Angular CLI][CliMain] development server \(`ng serve`\) with only a single locale.
+중요: [Angular CLI][CliMain] 개발 서버 \(`ng serve`\)는 단일 로케일에서만 사용하십시오.
 
-### build for French example
+### 프랑스어 빌드 예제
 
-The following example displays a custom locale-specific configuration using a single locale.
+다음 예제는 단일 로케일을 사용하여 사용자 정의 로케일 특정 구성의 예를 보여줍니다.
 
 <docs-code header="angular.json" path="adev/src/content/examples/i18n/angular.json" visibleRegion="build-single-locale"/>
 
-Pass this configuration to the `ng serve` or `ng build` commands.
-The following code example displays how to serve the French language file.
+이 구성을 `ng serve` 또는 `ng build` 명령에 전달하십시오.
+다음 코드 예제는 프랑스어 언어 파일을 제공하는 방법을 보여줍니다.
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/commands.sh" visibleRegion="serve-french"/>
 
-For production builds, use configuration composition to run both configurations.
+프로덕션 빌드의 경우, 두 구성을 실행하기 위한 구성 조합을 사용하십시오.
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/commands.sh" visibleRegion="build-production-french"/>
 
 <docs-code header="angular.json" path="adev/src/content/examples/i18n/angular.json" visibleRegion="build-production-french" />
 
-## Report missing translations
+## 누락된 번역 보고하기
 
-When a translation is missing, the build succeeds but generates a warning such as `Missing translation for message "{translation_text}"`.
-To configure the level of warning that is generated by the Angular compiler, specify one of the following levels.
+번역이 누락된 경우 빌드는 성공하지만 `Missing translation for message "{translation_text}"`와 같은 경고가 생성됩니다.
+Angular 컴파일러가 생성하는 경고의 수준을 구성하려면 다음 수준 중 하나를 지정하십시오.
 
-| Warning level | Details                                              | Output |
-|:---           |:---                                                  |:---    |
-| `error`       | Throw an error and the build fails                   | n/a                                                    |
-| `ignore`      | Do nothing                                           | n/a                                                    |
-| `warning`     | Displays the default warning in the console or shell | `Missing translation for message "{translation_text}"` |
+| 경고 수준     | 세부사항                                             | 출력 |
+|:---           |:---                                                 |:---    |
+| `error`       | 오류를 발생시키고 빌드에 실패                     | n/a                                                    |
+| `ignore`      | 아무 작업도 하지 않음                              | n/a                                                    |
+| `warning`     | 콘솔 또는 셸에 기본 경고 표시                     | `Missing translation for message "{translation_text}"` |
 
-Specify the warning level in the `options` section for the `build` target of your [`angular.json`][GuideWorkspaceConfig] workspace build configuration file.
+`angular.json`[GuideWorkspaceConfig] 작업 공간 빌드 구성 파일의 `build` 대상의 `options` 섹션에서 경고 레벨을 지정하십시오.
 
-### `angular.json` `error` warning example
+### `angular.json` `error` 경고 예제
 
-The following example displays how to set the warning level to `error`.
+다음 예제는 경고 수준을 `error`로 설정하는 방법을 보여줍니다.
 
 <docs-code header="angular.json" path="adev/src/content/examples/i18n/angular.json" visibleRegion="missing-translation-error" />
 
-HELPFUL: When you compile your Angular project into an Angular application, the instances of the `i18n` attribute are replaced with instances of the [`$localize`][ApiLocalizeInitLocalize] tagged message string.
-This means that your Angular application is translated after compilation.
-This also means that you can create localized versions of your Angular application without re-compiling your entire Angular project for each locale.
+유용 정보: Angular 프로젝트를 Angular 애플리케이션으로 컴파일할 때, `i18n` 속성의 인스턴스가 [`$localize`][ApiLocalizeInitLocalize] 태그 메시지 문자열의 인스턴스로 대체됩니다.
+이는 컴파일 후 Angular 애플리케이션이 번역된다는 것을 의미합니다.
+또한 이는 각 로케일에 대해 전체 Angular 프로젝트를 다시 컴파일하지 않고도 Angular 애플리케이션의 로컬화된 버전을 만들 수 있다는 것을 의미합니다.
 
-When you translate your Angular application, the *translation transformation* replaces and reorders the parts \(static strings and expressions\) of the template literal string with strings from a collection of translations.
-For more information, see [`$localize`][ApiLocalizeInitLocalize].
+Angular 애플리케이션을 번역할 때 *번역 변환*은 템플릿 리터럴 문자열의 일부(정적 문자열 및 표현)를 번역 컬렉션의 문자열로 대체하고 재정렬합니다.
+자세한 내용은 [`$localize`][ApiLocalizeInitLocalize]를 참조하십시오.
 
-TLDR: Compile once, then translate for each locale.
+TLDR: 한 번 컴파일한 후 각 로케일에 대해 번역하십시오.
 
-## What's next
+## 다음 단계
 
 <docs-pill-row>
-  <docs-pill href="guide/i18n/deploy" title="Deploy multiple locales"/>
+  <docs-pill href="guide/i18n/deploy" title="여러 로케일 배포하기"/>
 </docs-pill-row>
 
 [ApiLocalizeInitLocalize]: api/localize/init/$localize "$localize | init - localize - API | Angular"
 
-[CliMain]: cli "CLI Overview and Command Reference | Angular"
+[CliMain]: cli "CLI 개요 및 명령 참조 | Angular"
 [CliBuild]: cli/build "ng build | CLI | Angular"
 
-[GuideBuild]: tools/cli/build "Building and serving Angular apps | Angular"
+[GuideBuild]: tools/cli/build "Angular 앱 빌드 및 제공하기 | Angular"
 
-[GuideI18nCommonMergeApplySpecificBuildOptionsForJustOneLocale]: guide/i18n/merge#apply-specific-build-options-for-just-one-locale "Apply specific build options for just one locale - Merge translations into the application | Angular"
-[GuideI18nCommonMergeBuildFromTheCommandLine]: guide/i18n/merge#build-from-the-command-line "Build from the command line - Merge translations into the application | Angular"
-[GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration]: guide/i18n/merge#define-locales-in-the-build-configuration "Define locales in the build configuration - Merge translations into the application | Angular"
-[GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]: guide/i18n/merge#generate-application-variants-for-each-locale "Generate application variants for each locale - Merge translations into the application | Angular"
+[GuideI18nCommonMergeApplySpecificBuildOptionsForJustOneLocale]: guide/i18n/merge#apply-specific-build-options-for-just-one-locale "단일 로케일에 대해 특정 빌드 옵션 적용하기 - 애플리케이션에 번역 병합하기 | Angular"
+[GuideI18nCommonMergeBuildFromTheCommandLine]: guide/i18n/merge#build-from-the-command-line "명령줄에서 빌드하기 - 애플리케이션에 번역 병합하기 | Angular"
+[GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration]: guide/i18n/merge#define-locales-in-the-build-configuration "빌드 구성에서 로케일 정의하기 - 애플리케이션에 번역 병합하기 | Angular"
+[GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]: guide/i18n/merge#generate-application-variants-for-each-locale "각 로케일에 대한 애플리케이션 변형 생성하기 - 애플리케이션에 번역 병합하기 | Angular"
 
-[GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat]: guide/i18n/translation-files#change-the-source-language-file-format "Change the source language file format - Work with translation files | Angular"
+[GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat]: guide/i18n/translation-files#change-the-source-language-file-format "소스 언어 파일 형식 변경하기 - 번역 파일 작업하기 | Angular"
 
-[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular"
+[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular 작업 공간 구성 | Angular"
\ No newline at end of file
diff --git a/adev/src/content/guide/i18n/overview.md b/adev/src/content/guide/i18n/overview.md
index 0ad407604cf3..d0ddf22ddf5b 100644
--- a/adev/src/content/guide/i18n/overview.md
+++ b/adev/src/content/guide/i18n/overview.md
@@ -1,54 +1,54 @@
-# Angular Internationalization
+# Angular 국제화
 
-*Internationalization*, sometimes referenced as i18n, is the process of designing and preparing your project for use in different locales around the world.
-*Localization* is the process of building versions of your project for different locales.
-The localization process includes the following actions.
+*국제화*는 때때로 i18n으로 언급되며, 전 세계의 다양한 지역에서 프로젝트를 사용할 수 있도록 설계하고 준비하는 과정입니다.
+*현지화*는 다양한 지역을 위한 프로젝트 버전을 구축하는 과정입니다.
+현지화 과정에는 다음과 같은 작업이 포함됩니다.
 
-* Extract text for translation into different languages
-* Format data for a specific locale
+* 다른 언어로 번역하기 위한 텍스트 추출
+* 특정 지역에 맞게 데이터 형식화
 
-A *locale* identifies a region in which people speak a particular language or language variant.
-Possible regions include countries and geographical regions.
-A locale determines the formatting and parsing of the following details.
+*로케일*은 사람들이 특정 언어 또는 언어 변형을 사용하는 지역을 식별합니다.
+가능한 지역에는 국가 및 지리적 지역이 포함됩니다.
+로케일은 다음 세부 사항의 형식 지정 및 구문 분석을 결정합니다.
 
-* Measurement units including date and time, numbers, and currencies
-* Translated names including time zones, languages, and countries
+* 날짜 및 시간, 숫자 및 통화를 포함한 측정 단위
+* 시간대, 언어 및 국가를 포함한 번역된 이름
 
-For a quick introduction to localization and internationalization watch this video:
+현지화 및 국제화에 대한 간단한 소개를 보려면 이 비디오를 시청하세요:
 
 <docs-video src="https://www.youtube.com/embed/KNTN-nsbV7M"/>
 
-## Learn about Angular internationalization
+## Angular 국제화에 대해 알아보기
 
 <docs-card-container>
-  <docs-card title="Add the localize package" href="guide/i18n/add-package">
-    Learn how to add the Angular Localize package to your project
+  <docs-card title="로컬라이즈 패키지 추가" href="guide/i18n/add-package">
+    Angular Localize 패키지를 프로젝트에 추가하는 방법 알아보기
   </docs-card>
-  <docs-card title="Refer to locales by ID" href="guide/i18n/locale-id">
-    Learn how to identify and specify a locale identifier for your project
+  <docs-card title="ID로 로케일 참조" href="guide/i18n/locale-id">
+    프로젝트에 대한 로케일 식별자를 식별하고 지정하는 방법 알아보기
   </docs-card>
-  <docs-card title="Format data based on locale" href="guide/i18n/format-data-locale">
-    Learn how to implement localized data pipes and override the locale for your project
+  <docs-card title="로케일 기반 데이터 형식화" href="guide/i18n/format-data-locale">
+    지역화된 데이터 파이프를 구현하고 프로젝트에 대한 로케일을 재정의하는 방법 알아보기
   </docs-card>
-  <docs-card title="Prepare component for translation" href="guide/i18n/prepare">
-    Learn how to specify source text for translation
+  <docs-card title="번역을 위한 구성 요소 준비" href="guide/i18n/prepare">
+    번역을 위한 원본 텍스트를 지정하는 방법 알아보기
   </docs-card>
-  <docs-card title="Work with translation files" href="guide/i18n/translation-files">
-    Learn how to review and process translation text
+  <docs-card title="번역 파일 작업" href="guide/i18n/translation-files">
+    번역 텍스트를 검토하고 처리하는 방법 알아보기
   </docs-card>
-  <docs-card title="Merge translations into the application" href="guide/i18n/merge">
-    Learn how to merge translations and build your translated application
+  <docs-card title="애플리케이션에 번역 병합" href="guide/i18n/merge">
+    번역을 병합하고 번역된 애플리케이션을 빌드하는 방법 알아보기
   </docs-card>
-  <docs-card title="Deploy multiple locales" href="guide/i18n/deploy">
-    Learn how to deploy multiple locales for your application
+  <docs-card title="다양한 로케일 배포" href="guide/i18n/deploy">
+    애플리케이션을 위해 다양한 로케일을 배포하는 방법 알아보기
   </docs-card>
-  <docs-card title="Import global variants of the locale data" href="guide/i18n/import-global-variants">
-    Learn how to import locale data for language variants
+  <docs-card title="로케일 데이터의 전역 변형 가져오기" href="guide/i18n/import-global-variants">
+    언어 변형을 위한 로케일 데이터를 가져오는 방법 알아보기
   </docs-card>
-  <docs-card title="Manage marked text with custom IDs" href="guide/i18n/manage-marked-text">
-    Learn how to implement custom IDs to help you manage your marked text
+  <docs-card title="사용자 지정 ID로 표시된 텍스트 관리" href="guide/i18n/manage-marked-text">
+    표시된 텍스트를 관리하기 위해 사용자 지정 ID를 구현하는 방법 알아보기
   </docs-card>
-  <docs-card title="Internationalization example" href="guide/i18n/example">
-    Review an example of Angular internationalization.
+  <docs-card title="국제화 예제" href="guide/i18n/example">
+    Angular 국제화의 예제를 검토하세요.
   </docs-card>
-</docs-card-container>
+</docs-card-container>
\ No newline at end of file
diff --git a/adev/src/content/guide/i18n/prepare.md b/adev/src/content/guide/i18n/prepare.md
index d17b565665f4..d1123a26a7c9 100644
--- a/adev/src/content/guide/i18n/prepare.md
+++ b/adev/src/content/guide/i18n/prepare.md
@@ -1,66 +1,66 @@
-# Prepare component for translation
+# 번역을 위한 구성 요소 준비
 
-To prepare your project for translation, complete the following actions.
+프로젝트를 번역할 준비를 하려면 다음 작업을 완료하십시오.
 
-- Use the `i18n` attribute to mark text in component templates
-- Use the `i18n-` attribute to mark attribute text strings in component templates
-- Use the `$localize` tagged message string to mark text strings in component code
+- `i18n` 속성을 사용하여 구성 요소 템플릿에서 텍스트를 표시합니다.
+- `i18n-` 속성을 사용하여 구성 요소 템플릿에서 속성 텍스트 문자열을 표시합니다.
+- `$localize` 태그가 있는 메시지 문자열을 사용하여 구성 요소 코드에서 텍스트 문자열을 표시합니다.
 
-## Mark text in component template
+## 구성 요소 템플릿에서 텍스트 표시
 
-In a component template, the i18n metadata is the value of the `i18n` attribute.
+구성 요소 템플릿에서는 i18n 메타데이터가 `i18n` 속성의 값입니다.
 
 <docs-code language="html">
 <element i18n="{i18n_metadata}">{string_to_translate}</element>
 </docs-code>
 
-Use the `i18n` attribute to mark a static text message in your component templates for translation.
-Place it on every element tag that contains fixed text you want to translate.
+구성 요소 템플릿에서 번역을 위한 정적 텍스트 메시지를 표시하기 위해 `i18n` 속성을 사용하십시오. 
+번역하려는 고정 텍스트가 포함된 모든 요소 태그에 배치하십시오.
 
-HELPFUL: The `i18n` attribute is a custom attribute that the Angular tools and compilers recognize.
+도움말: `i18n` 속성은 Angular 도구 및 컴파일러가 인식하는 사용자 지정 속성입니다.
 
-### `i18n` example
+### `i18n` 예시
 
-The following `<h1>` tag displays a simple English language greeting, "Hello i18n!".
+다음 `<h1>` 태그는 간단한 영어 인사말 "Hello i18n!"을 표시합니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="greeting"/>
 
-To mark the greeting for translation, add the `i18n` attribute to the `<h1>` tag.
+인사말을 번역할 수 있도록 하려면 `<h1>` 태그에 `i18n` 속성을 추가하십시오.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute"/>
 
 
-### using conditional statement with `i18n`
+### `i18n`와 조건문 사용
 
-The following `<div>` tag will display translated text as part of `div` and `aria-label` based on toggle status 
+다음 `<div>` 태그는 토글 상태에 따라 `div` 및 `aria-label`의 일부로 번역된 텍스트를 표시합니다.
 
 <docs-code-multifile>
     <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html"  visibleRegion="i18n-conditional"/>
     <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/i18n/src/app/app.component.ts" visibleLines="[[14,21],[33,37]]"/>
 </docs-code-multifile>
 
-### Translate inline text without HTML element
+### HTML 요소 없이 인라인 텍스트 번역
 
-Use the `<ng-container>` element to associate a translation behavior for specific text without changing the way text is displayed.
+특정 텍스트에 대한 번역 동작을 연관시키기 위해 `<ng-container>` 요소를 사용하되, 텍스트 표시 방식을 변경하지 마십시오.
 
-HELPFUL: Each HTML element creates a new DOM element.
-To avoid creating a new DOM element, wrap the text in an `<ng-container>` element.
-The following example shows the `<ng-container>` element transformed into a non-displayed HTML comment.
+도움말: 각 HTML 요소는 새로운 DOM 요소를 생성합니다. 
+새로운 DOM 요소 생성 방지를 위해 `<ng-container>` 요소 안에 텍스트를 감싸세요. 
+다음 예시는 `<ng-container>` 요소가 표시되지 않는 HTML 주석으로 변환된 예를 보여줍니다.
 
 <docs-code path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-ng-container"/>
 
-## Mark element attributes for translations
+## 번역을 위한 요소 속성 표시
 
-In a component template, the i18n metadata is the value of the `i18n-{attribute_name}` attribute.
+구성 요소 템플릿에서는 i18n 메타데이터가 `i18n-{attribute_name}` 속성의 값입니다.
 
 <docs-code language="html">
 <element i18n-{attribute_name}="{i18n_metadata}" {attribute_name}="{attribute_value}" />
 </docs-code>
 
-The attributes of HTML elements include text that should be translated along with the rest of the displayed text in the component template.
+HTML 요소의 속성에는 구성 요소 템플릿에서 표시되는 텍스트와 함께 번역되어야 할 텍스트가 포함됩니다.
 
-Use `i18n-{attribute_name}` with any attribute of any element and replace `{attribute_name}` with the name of the attribute.
-Use the following syntax to assign a meaning, description, and custom ID.
+어떤 요소의 모든 속성과 함께 `i18n-{attribute_name}`을 사용하고 `{attribute_name}`을 속성 이름으로 교체하십시오. 
+의미, 설명 및 사용자 지정 ID를 할당하는 다음 구문을 사용하십시오.
 
 <!--todo: replace with docs-code -->
 
@@ -68,26 +68,26 @@ Use the following syntax to assign a meaning, description, and custom ID.
 i18n-{attribute_name}="{meaning}|{description}@@{id}"
 </docs-code>
 
-### `i18n-title` example
+### `i18n-title` 예시
 
-To translate the title of an image, review this example.
-The following example displays an image with a `title` attribute.
+이미지의 제목을 번역하려면 이 예시를 참고하십시오. 
+다음 예시는 `title` 속성이 있는 이미지를 표시합니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-title"/>
 
-To mark the title attribute for translation, complete the following action.
+제목 속성을 번역을 위해 표시하려면 다음 작업을 수행하십시오.
 
-1. Add the `i18n-title` attribute
+1. `i18n-title` 속성 추가
 
-   The following example displays how to mark the `title` attribute on the `img` tag by adding `i18n-title`.
+   다음 예시는 `i18n-title`을 추가하여 `img` 태그의 `title` 속성을 표시하는 방법을 보여줍니다.
 
    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-title-translate"/>
 
-## Mark text in component code
+## 구성 요소 코드에서 텍스트 표시
 
-In component code, the translation source text and the metadata are surrounded by backtick \(<code>&#96;</code>\) characters.
+구성 요소 코드에서 번역 원본 텍스트와 메타데이터는 백틱 \(<code>&#96;</code>\) 문자로 둘러싸여 있습니다.
 
-Use the [`$localize`][ApiLocalizeInitLocalize] tagged message string to mark a string in your code for translation.
+번역을 위해 코드에서 문자열을 표시하려면 [`$localize`][ApiLocalizeInitLocalize] 태그가 있는 메시지 문자열을 사용하십시오.
 
 <!--todo: replace with docs-code -->
 
@@ -95,7 +95,7 @@ Use the [`$localize`][ApiLocalizeInitLocalize] tagged message string to mark a s
 $localize`string_to_translate`;
 </docs-code>
 
-The i18n metadata is surrounded by colon \(`:`\) characters and prepends the translation source text.
+i18n 메타데이터는 콜론 \(`:`\) 문자로 둘러싸여 있으며 번역 원본 텍스트에 추가됩니다.
 
 <!--todo: replace with docs-code -->
 
@@ -103,9 +103,9 @@ The i18n metadata is surrounded by colon \(`:`\) characters and prepends the tra
 $localize`:{i18n_metadata}:string_to_translate`
 </docs-code>
 
-### Include interpolated text
+### 보간된 텍스트 포함
 
-Include [interpolations](guide/templates/binding#render-dynamic-text-with-text-interpolation) in a [`$localize`][ApiLocalizeInitLocalize] tagged message string.
+[`$localize`][ApiLocalizeInitLocalize] 태그가 있는 메시지 문자열에 [보간](guide/templates/binding#render-dynamic-text-with-text-interpolation)을 포함하십시오.
 
 <!--todo: replace with docs-code -->
 
@@ -113,21 +113,19 @@ Include [interpolations](guide/templates/binding#render-dynamic-text-with-text-i
 $localize`string_to_translate ${variable_name}`;
 </docs-code>
 
-### Name the interpolation placeholder
+### 보간 플레이스홀더 명명
 
 <docs-code language="typescript">
 $localize`string_to_translate ${variable_name}:placeholder_name:`;
 </docs-code>
 
-### Conditional syntax for translations
+### 번역을 위한 조건부 구문
 
 <docs-code language="typescript">
 return this.show ? $localize`Show Tabs` : $localize`Hide tabs`;
 </docs-code>
 
-
-
-## i18n metadata for translation
+## 번역을 위한 i18n 메타데이터
 
 <!--todo: replace with docs-code -->
 
@@ -135,27 +133,27 @@ return this.show ? $localize`Show Tabs` : $localize`Hide tabs`;
 {meaning}|{description}@@{custom_id}
 </docs-code>
 
-The following parameters provide context and additional information to reduce confusion for your translator.
+다음 매개변수는 번역자를 위한 혼란을 줄이기 위해 문맥과 추가 정보를 제공합니다.
 
-| Metadata parameter | Details                                                               |
-| :----------------- | :-------------------------------------------------------------------- |
-| Custom ID          | Provide a custom identifier                                           |
-| Description        | Provide additional information or context                             |
-| Meaning            | Provide the meaning or intent of the text within the specific context |
+| 메타데이터 매개변수 | 세부 사항                                         |
+| :------------------- | :--------------------------------------------------- |
+| 사용자 지정 ID      | 사용자 지정 식별자를 제공합니다.                  |
+| 설명                | 추가 정보 또는 문맥을 제공합니다.                |
+| 의미                | 특정 문맥에서 텍스트의 의미나 의도를 제공합니다. |
 
-For additional information about custom IDs, see [Manage marked text with custom IDs][GuideI18nOptionalManageMarkedText].
+사용자 지정 ID에 대한 추가 정보는 [사용자 지정 ID로 표시된 텍스트 관리][GuideI18nOptionalManageMarkedText]를 참조하십시오.
 
-### Add helpful descriptions and meanings
+### 유용한 설명 및 의미 추가
 
-To translate a text message accurately, provide additional information or context for the translator.
+텍스트 메시지를 정확하게 번역하려면 번역자를 위한 추가 정보 또는 문맥을 제공합니다.
 
-Add a _description_ of the text message as the value of the `i18n` attribute or [`$localize`][ApiLocalizeInitLocalize] tagged message string.
+`i18n` 속성 또는 [`$localize`][ApiLocalizeInitLocalize] 태그가 있는 메시지 문자열의 값으로 텍스트 메시지에 대한 _설명_을 추가합니다.
 
-The following example shows the value of the `i18n` attribute.
+다음 예시는 `i18n` 속성의 값을 보여줍니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-desc"/>
 
-The following example shows the value of the [`$localize`][ApiLocalizeInitLocalize] tagged message string with a description.
+다음 예시는 설명이 있는 [`$localize`][ApiLocalizeInitLocalize] 태그가 있는 메시지 문자열의 값을 보여줍니다.
 
 <!--todo: replace with docs-code -->
 
@@ -165,20 +163,20 @@ $localize`:An introduction header for this sample:Hello i18n!`;
 
 </docs-code>
 
-The translator may also need to know the meaning or intent of the text message within this particular application context, in order to translate it the same way as other text with the same meaning.
-Start the `i18n` attribute value with the _meaning_ and separate it from the _description_ with the `|` character: `{meaning}|{description}`.
+번역자는 또한 특정 애플리케이션 문맥 내에서 텍스트 메시지의 의미 또는 의도를 알아야 할 수 있으며, 따라서 동일한 의미를 가진 다른 텍스트와 동일한 방식으로 번역할 수 있습니다. 
+`i18n` 속성 값을 _의미_로 시작하고 `_설명_`과는 `|` 문자로 구분하십시오: `{meaning}|{description}`.
 
-#### `h1` example
+#### `h1` 예시
 
-For example, you may want to specify that the `<h1>` tag is a site header that you need translated the same way, whether it is used as a header or referenced in another section of text.
+예를 들어, `<h1>` 태그가 사이트 제목이라는 것을 명시하여, 헤더로 사용되든 다른 섹션의 텍스트로 참조되든 동일한 방식으로 번역되도록 하고 싶을 수 있습니다.
 
-The following example shows how to specify that the `<h1>` tag must be translated as a header or referenced elsewhere.
+다음 예시는 `<h1>` 태그가 헤더로 번역되거나 다른 곳에서 참조되어야 함을 명시하는 방법을 보여줍니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-meaning"/>
 
-The result is any text marked with `site header`, as the _meaning_ is translated exactly the same way.
+결과는 `site header`로 표시된 모든 텍스트가 _의미_대로 정확하게 번역됩니다.
 
-The following code example shows the value of the [`$localize`][ApiLocalizeInitLocalize] tagged message string with a meaning and a description.
+다음 코드 예시는 의미와 설명이 있는 [`$localize`][ApiLocalizeInitLocalize] 태그가 있는 메시지 문자열의 값을 보여줍니다.
 
 <!--todo: replace with docs-code -->
 
@@ -188,32 +186,32 @@ $localize`:site header|An introduction header for this sample:Hello i18n!`;
 
 </docs-code>
 
-<docs-callout title="How meanings control text extraction and merges">
+<docs-callout title="의미가 텍스트 추출 및 병합을 제어하는 방법">
 
-The Angular extraction tool generates a translation unit entry for each `i18n` attribute in a template.
-The Angular extraction tool assigns each translation unit a unique ID based on the _meaning_ and _description_.
+Angular 추출 도구는 템플릿의 각 `i18n` 속성에 대한 번역 단위 항목을 생성합니다.
+Angular 추출 도구는 각 번역 단위에 의미 및 설명에 기반하여 고유 ID를 할당합니다.
 
-HELPFUL: For more information about the Angular extraction tool, see [Work with translation files](guide/i18n/translation-files).
+도움말: Angular 추출 도구에 대한 자세한 내용은 [번역 파일 작업하기](guide/i18n/translation-files)를 참조하십시오.
 
-The same text elements with different _meanings_ are extracted with different IDs.
-For example, if the word "right" uses the following two definitions in two different locations, the word is translated differently and merged back into the application as different translation entries.
+서로 다른 _의미_가 있는 동일한 텍스트 요소는 서로 다른 ID로 추출됩니다. 
+예를 들어, "right"라는 단어가 두 개의 다른 위치에서 다음 두 정의를 사용할 경우, 단어는 다르게 번역되며 서로 다른 번역 항목으로 애플리케이션에 병합됩니다.
 
-- `correct` as in "you are right"
-- `direction` as in "turn right"
+- `correct`는 "you are right"에서와 같이 
+- `direction`은 "turn right"에서와 같이 
 
-If the same text elements meet the following conditions, the text elements are extracted only once and use the same ID.
+동일한 텍스트 요소가 다음 조건을 충족하면 텍스트 요소는 한 번만 추출되고 동일한 ID를 사용합니다.
 
-- Same meaning or definition
-- Different descriptions
+- 동일한 의미 또는 정의
+- 다른 설명
 
-That one translation entry is merged back into the application wherever the same text elements appear.
+해당 하나의 번역 항목은 동일한 텍스트 요소가 나타나는 모든 곳에서 애플리케이션에 병합됩니다.
 
 </docs-callout>
 
-## ICU expressions
+## ICU 표현식
 
-ICU expressions help you mark alternate text in component templates to meet conditions.
-An ICU expression includes a component property, an ICU clause, and the case statements surrounded by open curly brace \(`{`\) and close curly brace \(`}`\) characters.
+ICU 표현식은 구성 요소 템플릿에 조건을 충족하는 대체 텍스트를 표시하는 데 도움이 됩니다. 
+ICU 표현식에는 구성 요소 속성, ICU 절 및 열린 중괄호 \(`{`\) 및 닫힌 중괄호 \(`}`\) 문자로 둘러싸인 사례 문이 포함됩니다.
 
 <!--todo: replace with docs-code -->
 
@@ -223,23 +221,22 @@ An ICU expression includes a component property, an ICU clause, and the case sta
 
 </docs-code>
 
-The component property defines the variable
-An ICU clause defines the type of conditional text.
+구성 요소 속성은 변수를 정의하고, ICU 절은 조건부 텍스트 유형을 정의합니다.
 
-| ICU clause                                                           | Details                                                             |
-| :------------------------------------------------------------------- | :------------------------------------------------------------------ |
-| [`plural`][GuideI18nCommonPrepareMarkPlurals]                        | Mark the use of plural numbers                                      |
-| [`select`][GuideI18nCommonPrepareMarkAlternatesAndNestedExpressions] | Mark choices for alternate text based on your defined string values |
+| ICU 절                                                            | 세부 사항                                                    |
+| :---------------------------------------------------------------- | :---------------------------------------------------------- |
+| [`plural`][GuideI18nCommonPrepareMarkPlurals]                   | 복수 숫자의 사용을 표시합니다.                             |
+| [`select`][GuideI18nCommonPrepareMarkAlternatesAndNestedExpressions] | 정의된 문자열 값에 따라 대체 텍스트에 대한 선택을 표시합니다. |
 
-To simplify translation, use International Components for Unicode clauses \(ICU clauses\) with regular expressions.
+번역을 간소화하려면 정규 표현식과 함께 국제화 구성 요소(ICU 절)를 사용하십시오.
 
-HELPFUL: The ICU clauses adhere to the [ICU Message Format][GithubUnicodeOrgIcuUserguideFormatParseMessages] specified in the [CLDR pluralization rules][UnicodeCldrIndexCldrSpecPluralRules].
+도움말: ICU 절은 [CLDR 복수화 규칙][UnicodeCldrIndexCldrSpecPluralRules]에서 규정한 [ICU 메시지 형식][GithubUnicodeOrgIcuUserguideFormatParseMessages]을 준수합니다.
 
-### Mark plurals
+### 복수 표기
 
-Different languages have different pluralization rules that increase the difficulty of translation.
-Because other locales express cardinality differently, you may need to set pluralization categories that do not align with English.
-Use the `plural` clause to mark expressions that may not be meaningful if translated word-for-word.
+다양한 언어는 번역의 어려움을 증가시키는 다른 복수화 규칙을 가지고 있습니다. 
+다른 로케일은 수량을 다르게 표현하므로 영어와 일치하지 않는 복수화 범주를 설정해야 할 수도 있습니다. 
+`plural` 절을 사용하여 단어 그대로 번역할 경우 의미가 없을 수 있는 표현을 표시합니다.
 
 <!--todo: replace with docs-code -->
 
@@ -249,7 +246,7 @@ Use the `plural` clause to mark expressions that may not be meaningful if transl
 
 </docs-code>
 
-After the pluralization category, enter the default text \(English\) surrounded by open curly brace \(`{`\) and close curly brace \(`}`\) characters.
+복수화 범주 뒤에 기본 텍스트(영어)를 열린 중괄호 \(`{`\)와 닫힌 중괄호 \(`}`\) 문자로 둘러싸서 입력하십시오.
 
 <!--todo: replace with docs-code -->
 
@@ -259,18 +256,18 @@ pluralization_category { }
 
 </docs-code>
 
-The following pluralization categories are available for English and may change based on the locale.
+다음 복수화 범주는 영어로 사용 가능하며 로케일에 따라 변경될 수 있습니다.
 
-| Pluralization category | Details                    | Example                    |
-| :--------------------- | :------------------------- | :------------------------- |
-| `zero`                 | Quantity is zero           | `=0 { }` <br /> `zero { }` |
-| `one`                  | Quantity is 1              | `=1 { }` <br /> `one { }`  |
-| `two`                  | Quantity is 2              | `=2 { }` <br /> `two { }`  |
-| `few`                  | Quantity is 2 or more      | `few { }`                  |
-| `many`                 | Quantity is a large number | `many { }`                 |
-| `other`                | The default quantity       | `other { }`                |
+| 복수화 범주 | 세부 사항                      | 예제                      |
+| :----------- | :----------------------------- | :------------------------ |
+| `zero`       | 수량이 0                       | `=0 { }` <br /> `zero { }` |
+| `one`        | 수량이 1                       | `=1 { }` <br /> `one { }`  |
+| `two`        | 수량이 2                       | `=2 { }` <br /> `two { }`  |
+| `few`        | 수량이 2개 이상               | `few { }`                 |
+| `many`       | 수량이 많음                   | `many { }`                |
+| `other`      | 기본 수량                     | `other { }`               |
 
-If none of the pluralization categories match, Angular uses `other` to match the standard fallback for a missing category.
+어떤 복수화 범주도 일치하지 않는 경우, Angular는 `other`을 사용하여 누락된 범주에 대한 표준 폴백을 일치시킵니다.
 
 <!--todo: replace with docs-code -->
 
@@ -280,25 +277,24 @@ other { default_quantity }
 
 </docs-code>
 
-HELPFUL: For more information about pluralization categories, see [Choosing plural category names][UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames] in the [CLDR - Unicode Common Locale Data Repository][UnicodeCldrMain].
+도움말: 복수화 범주에 대한 자세한 내용은 [복수화 범주 이름 선택][UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames]를 CLDR - Unicode 공통 로케일 데이터 리포지토리에서 확인하십시오.
 
-<docs-callout header='Background: Locales may not support some pluralization categories'>
+<docs-callout header='배경: 로케일은 일부 복수화 범주를 지원하지 않을 수 있음'>
 
-Many locales don't support some of the pluralization categories.
-The default locale \(`en-US`\) uses a very simple `plural()` function that doesn't support the `few` pluralization category.
-Another locale with a simple `plural()` function is `es`.
-The following code example shows the [en-US `plural()`][GithubAngularAngularBlobEcffc3557fe1bff9718c01277498e877ca44588dPackagesCoreSrcI18nLocaleEnTsL14L18] function.
+많은 로케일은 일부 복수화 범주를 지원하지 않습니다. 
+기본 로케일(`en-US`)은 `few` 복수화 범주를 지원하지 않는 매우 간단한 `plural()` 함수를 사용합니다. 
+다른 간단한 `plural()` 함수를 사용하는 로케일은 `es`입니다. 
+다음 코드 예시는 [en-US `plural()`][GithubAngularAngularBlobEcffc3557fe1bff9718c01277498e877ca44588dPackagesCoreSrcI18nLocaleEnTsL14L18] 함수입니다.
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/locale_plural_function.ts" class="no-box" hideCopy/>
 
-The `plural()` function only returns 1 \(`one`\) or 5 \(`other`\).
-The `few` category never matches.
+`plural()` 함수는 1(`one`) 또는 5(`other`)만 반환합니다. `few` 범주는 절대 일치하지 않습니다.
 
 </docs-callout>
 
-#### `minutes` example
+#### `minutes` 예시
 
-If you want to display the following phrase in English, where `x` is a number.
+`x`가 숫자인 경우 영어에서 다음 문구를 표시하려고 합니다.
 
 <!--todo: replace output docs-code with screen capture image --->
 
@@ -308,7 +304,7 @@ updated x minutes ago
 
 </docs-code>
 
-And you also want to display the following phrases based on the cardinality of `x`.
+그리고 또한 `x`의 수량에 따라 다음 문구를 표시하려고 합니다.
 
 <!--todo: replace output docs-code with screen capture image --->
 
@@ -326,26 +322,26 @@ updated one minute ago
 
 </docs-code>
 
-Use HTML markup and [interpolations](guide/templates/binding#render-dynamic-text-with-text-interpolation).
-The following code example shows how to use the `plural` clause to express the previous three situations in a `<span>` element.
+HTML 마크업 및 [보간](guide/templates/binding#render-dynamic-text-with-text-interpolation)을 사용합니다. 
+다음 코드 예시는 세 가지 상황을 `<span>` 요소에서 표현하기 위해 `plural` 절을 사용하는 방법을 보여줍니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-plural"/>
 
-Review the following details in the previous code example.
+이전 코드 예시에서 다음 세부 사항을 검토하십시오.
 
-| Parameters                        | Details                                                                                                               |
-| :-------------------------------- | :-------------------------------------------------------------------------------------------------------------------- |
-| `minutes`                         | The first parameter specifies the component property is `minutes` and determines the number of minutes.               |
-| `plural`                          | The second parameter specifies the ICU clause is `plural`.                                                            |
-| `=0 {just now}`                   | For zero minutes, the pluralization category is `=0`. The value is `just now`.                                        |
-| `=1 {one minute}`                 | For one minute, the pluralization category is `=1`. The value is `one minute`.                                        |
-| `other {{{minutes}} minutes ago}` | For any unmatched cardinality, the default pluralization category is `other`. The value is `{{minutes}} minutes ago`. |
+| 매개변수            | 세부 사항                                                                             |
+| :------------------ | :------------------------------------------------------------------------------------ |
+| `minutes`           | 첫 번째 매개변수는 구성 요소 속성이 `minutes`이고 분 수를 결정합니다.                     |
+| `plural`            | 두 번째 매개변수는 ICU 절이 `plural`임을 나타냅니다.                                  |
+| `=0 {just now}`     | 0 분일 경우, 복수화 범주는 `=0`입니다. 값은 `just now`입니다.                           |
+| `=1 {one minute}`   | 1 분일 경우, 복수화 범주는 `=1`입니다. 값은 `one minute`입니다.                         |
+| `other {{{minutes}} minutes ago}` | 일치하지 않는 수량의 경우 기본 복수화 범주는 `other`입니다. 값은 `{{minutes}} minutes ago`입니다. |
 
-`{{minutes}}` is an [interpolation](guide/templates/binding#render-dynamic-text-with-text-interpolation).
+`{{minutes}}`는 [보간](guide/templates/binding#render-dynamic-text-with-text-interpolation)입니다.
 
-### Mark alternates and nested expressions
+### 대체 및 중첩 표현 표시
 
-The `select` clause marks choices for alternate text based on your defined string values.
+`select` 절은 정의된 문자열 값에 따라 대체 텍스트에 대한 선택을 표시합니다.
 
 <!--todo: replace with docs-code -->
 
@@ -355,9 +351,9 @@ The `select` clause marks choices for alternate text based on your defined strin
 
 </docs-code>
 
-Translate all of the alternates to display alternate text based on the value of a variable.
+모든 대체를 번역하여 변수의 값에 따라 대체 텍스트를 표시합니다.
 
-After the selection category, enter the text \(English\) surrounded by open curly brace \(`{`\) and close curly brace \(`}`\) characters.
+선택 범주 뒤에 열린 중괄호 \(`{`\) 및 닫힌 중괄호 \(`}`\) 문자로 둘러싸인 텍스트(영어)를 입력하십시오.
 
 <!--todo: replace with docs-code -->
 
@@ -367,9 +363,9 @@ selection_category { text }
 
 </docs-code>
 
-Different locales have different grammatical constructions that increase the difficulty of translation.
-Use HTML markup.
-If none of the selection categories match, Angular uses `other` to match the standard fallback for a missing category.
+다양한 로케일은 문법 구조가 달라 번역의 어려움을 증가합니다. 
+HTML 마크업을 사용하십시오. 
+일치하는 선택 범주가 없는 경우, Angular는 `other`를 사용하여 누락된 범주에 대한 표준 폴백을 일치시킵니다.
 
 <!--todo: replace with docs-code -->
 
@@ -379,9 +375,9 @@ other { default_value }
 
 </docs-code>
 
-#### `gender` example
+#### `gender` 예시
 
-If you want to display the following phrase in English.
+영어에서 다음 문구를 표시하고 싶습니다.
 
 <!--todo: replace output docs-code with screen capture image --->
 
@@ -391,7 +387,7 @@ The author is other
 
 </docs-code>
 
-And you also want to display the following phrases based on the `gender` property of the component.
+그리고 또한 구성 요소의 `gender` 속성을 기반으로 다음 문구를 표시하고 싶습니다.
 
 <!--todo: replace output docs-code with screen capture image --->
 
@@ -409,40 +405,40 @@ The author is male
 
 </docs-code>
 
-The following code example shows how to bind the `gender` property of the component and use the `select` clause to express the previous three situations in a `<span>` element.
+다음 코드 예시는 구성 요소의 `gender` 속성을 바인딩하고 `select` 절을 사용하여 이전 세 가지 상황을 `<span>` 요소에서 표현하는 방법을 보여줍니다.
 
-The `gender` property binds the outputs to each of following string values.
+`gender` 속성은 각 다음 문자열 값으로 출력을 바인딩합니다.
 
-| Value  | English value |
-| :----- | :------------ |
-| female | `female`      |
-| male   | `male`        |
-| other  | `other`       |
+| 값    | 영어 값      |
+| :----- | :----------------- |
+| female | `female`         |
+| male   | `male`           |
+| other  | `other`          |
 
-The `select` clause maps the values to the appropriate translations.
-The following code example shows `gender` property used with the select clause.
+`select` 절은 값을 적절한 번역에 매핑합니다. 
+다음 코드 예시는 `gender` 속성이 `select` 절과 함께 사용되는 방법을 보여줍니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-select"/>
 
-#### `gender` and `minutes` example
+#### `gender` 및 `minutes` 예시
 
-Combine different clauses together, such as the `plural` and `select` clauses.
-The following code example shows nested clauses based on the `gender` and `minutes` examples.
+`plural` 및 `select` 절과 같은 다양한 절을 함께 결합하십시오. 
+다음 코드 예시는 `gender` 및 `minutes` 예시에 기반하여 중첩 절을 보여줍니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-nested"/>
 
-## What's next
+## 다음 단계
 
 <docs-pill-row>
-  <docs-pill href="guide/i18n/translation-files" title="Work with translation files"/>
+  <docs-pill href="guide/i18n/translation-files" title="번역 파일 작업하기"/>
 </docs-pill-row>
 
 [ApiLocalizeInitLocalize]: api/localize/init/$localize '$localize | init - localize - API  | Angular'
-[GuideI18nCommonPrepareMarkAlternatesAndNestedExpressions]: guide/i18n/prepare#mark-alternates-and-nested-expressions 'Mark alternates and nested expressions - Prepare templates for translation | Angular'
-[GuideI18nCommonPrepareMarkPlurals]: guide/i18n/prepare#mark-plurals 'Mark plurals - Prepare component for translation | Angular'
-[GuideI18nOptionalManageMarkedText]: guide/i18n/manage-marked-text 'Manage marked text with custom IDs | Angular'
-[GithubAngularAngularBlobEcffc3557fe1bff9718c01277498e877ca44588dPackagesCoreSrcI18nLocaleEnTsL14L18]: https://github.com/angular/angular/blob/ecffc3557fe1bff9718c01277498e877ca44588d/packages/core/src/i18n/locale_en.ts#L14-L18 'Line 14 to 18 - angular/packages/core/src/i18n/locale_en.ts | angular/angular | GitHub'
-[GithubUnicodeOrgIcuUserguideFormatParseMessages]: https://unicode-org.github.io/icu/userguide/format_parse/messages 'ICU Message Format - ICU Documentation | Unicode | GitHub'
-[UnicodeCldrMain]: https://cldr.unicode.org 'Unicode CLDR Project'
-[UnicodeCldrIndexCldrSpecPluralRules]: http://cldr.unicode.org/index/cldr-spec/plural-rules 'Plural Rules | CLDR - Unicode Common Locale Data Repository | Unicode'
-[UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames]: http://cldr.unicode.org/index/cldr-spec/plural-rules#TOC-Choosing-Plural-Category-Names 'Choosing Plural Category Names - Plural Rules | CLDR - Unicode Common Locale Data Repository | Unicode'
+[GuideI18nCommonPrepareMarkAlternatesAndNestedExpressions]: guide/i18n/prepare#mark-alternates-and-nested-expressions '대체 및 중첩 표현 표시 - 번역을 위한 구성 요소 준비 | Angular'
+[GuideI18nCommonPrepareMarkPlurals]: guide/i18n/prepare#mark-plurals '복수 표시 - 번역을 위한 구성 요소 준비 | Angular'
+[GuideI18nOptionalManageMarkedText]: guide/i18n/manage-marked-text '사용자 지정 ID로 표시된 텍스트 관리 | Angular'
+[GithubAngularAngularBlobEcffc3557fe1bff9718c01277498e877ca44588dPackagesCoreSrcI18nLocaleEnTsL14L18]: https://github.com/angular/angular/blob/ecffc3557fe1bff9718c01277498e877ca44588d/packages/core/src/i18n/locale_en.ts#L14-L18 '14-18라인 - angular/packages/core/src/i18n/locale_en.ts | angular/angular | GitHub'
+[GithubUnicodeOrgIcuUserguideFormatParseMessages]: https://unicode-org.github.io/icu/userguide/format_parse/messages 'ICU 메시지 형식 - ICU 문서 | Unicode | GitHub'
+[UnicodeCldrMain]: https://cldr.unicode.org 'Unicode CLDR 프로젝트'
+[UnicodeCldrIndexCldrSpecPluralRules]: http://cldr.unicode.org/index/cldr-spec/plural-rules '복수 규칙 | CLDR - Unicode 공통 로케일 데이터 리포지토리 | Unicode'
+[UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames]: http://cldr.unicode.org/index/cldr-spec/plural-rules#TOC-Choosing-Plural-Category-Names '복수화 범주 이름 선택 - 복수 규칙 | CLDR - Unicode 공통 로케일 데이터 리포지토리 | Unicode'
\ No newline at end of file
diff --git a/adev/src/content/guide/i18n/translation-files.md b/adev/src/content/guide/i18n/translation-files.md
index 6ee0a2559a70..4a002867893f 100644
--- a/adev/src/content/guide/i18n/translation-files.md
+++ b/adev/src/content/guide/i18n/translation-files.md
@@ -1,90 +1,90 @@
-# Work with translation files
+# 번역 파일 작업
 
-After you prepare a component for translation, use the [`extract-i18n`][CliExtractI18n] [Angular CLI][CliMain] command to extract the marked text in the component into a *source language* file.
+번역할 구성 요소를 준비한 후, [`extract-i18n`][CliExtractI18n] [Angular CLI][CliMain] 명령을 사용하여 구성 요소에서 표시된 텍스트를 *소스 언어* 파일로 추출합니다.
 
-The marked text includes text marked with `i18n`, attributes marked with `i18n-`*attribute*, and text tagged with `$localize` as described in [Prepare component for translation][GuideI18nCommonPrepare].
+표시된 텍스트에는 `i18n`로 표시된 텍스트, `i18n-`*속성*으로 표시된 속성 및 [번역을 위한 구성 요소 준비][GuideI18nCommonPrepare]에 설명된 대로 `$localize` 태그가 있는 텍스트가 포함됩니다.
 
-Complete the following steps to create and update translation files for your project.
+프로젝트의 번역 파일을 생성하고 업데이트하려면 다음 단계를 완료하십시오.
 
-1. [Extract the source language file][GuideI18nCommonTranslationFilesExtractTheSourceLanguageFile].
-    1. Optionally, change the location, format, and name.
-1. Copy the source language file to [create a translation file for each language][GuideI18nCommonTranslationFilesCreateATranslationFileForEachLanguage].
-1. [Translate each translation file][GuideI18nCommonTranslationFilesTranslateEachTranslationFile].
-1. Translate plurals and alternate expressions separately.
-    1. [Translate plurals][GuideI18nCommonTranslationFilesTranslatePlurals].
-    1. [Translate alternate expressions][GuideI18nCommonTranslationFilesTranslateAlternateExpressions].
-    1. [Translate nested expressions][GuideI18nCommonTranslationFilesTranslateNestedExpressions].
+1. [소스 언어 파일 추출][GuideI18nCommonTranslationFilesExtractTheSourceLanguageFile].
+    1. 선택적으로 위치, 형식 및 이름을 변경합니다.
+1. 각 언어에 대한 번역 파일을 생성하기 위해 소스 언어 파일을 복사합니다. [각 언어에 대한 번역 파일 생성][GuideI18nCommonTranslationFilesCreateATranslationFileForEachLanguage].
+1. [각 번역 파일 번역][GuideI18nCommonTranslationFilesTranslateEachTranslationFile].
+1. 복수 형태와 대체 표현을 별도로 번역합니다.
+    1. [복수 형태 번역][GuideI18nCommonTranslationFilesTranslatePlurals].
+    1. [대체 표현 번역][GuideI18nCommonTranslationFilesTranslateAlternateExpressions].
+    1. [중첩 표현 번역][GuideI18nCommonTranslationFilesTranslateNestedExpressions].
 
-## Extract the source language file
+## 소스 언어 파일 추출
 
-To extract the source language file, complete the following actions.
+소스 언어 파일을 추출하려면 다음 작업을 완료하십시오.
 
-1. Open a terminal window.
-1. Change to the root directory of your project.
-1. Run the following CLI command.
+1. 터미널 창을 엽니다.
+1. 프로젝트의 루트 디렉토리로 변경합니다.
+1. 다음 CLI 명령을 실행합니다.
 
     <docs-code path="adev/src/content/examples/i18n/doc-files/commands.sh" visibleRegion="extract-i18n-default"/>
 
-The `extract-i18n` command creates a source language file named `messages.xlf` in the root directory of your project.
-For more information about the XML Localization Interchange File Format \(XLIFF, version 1.2\), see [XLIFF][WikipediaWikiXliff].
+`extract-i18n` 명령은 프로젝트의 루트 디렉토리에 `messages.xlf`라는 이름의 소스 언어 파일을 생성합니다.
+XML 로컬라이제이션 교환 파일 형식(XLIFF, 버전 1.2)에 대한 자세한 내용은 [XLIFF][WikipediaWikiXliff]를 참조하십시오.
 
-Use the following [`extract-i18n`][CliExtractI18n] command options to change the source language file location, format, and file name.
+소스 언어 파일의 위치, 형식 및 파일 이름을 변경하려면 다음 [`extract-i18n`][CliExtractI18n] 명령 옵션을 사용하십시오.
 
-| Command option  | Details |
-|:---             |:---     |
-| `--format`      | Set the format of the output file    |
-| `--out-file`     | Set the name of the output file      |
-| `--output-path` | Set the path of the output directory |
+| 명령 옵션       | 세부사항                       |
+|:---             |:---                           |
+| `--format`      | 출력 파일의 형식을 설정합니다.      |
+| `--out-file`    | 출력 파일의 이름을 설정합니다.      |
+| `--output-path` | 출력 디렉토리의 경로를 설정합니다. |
 
-### Change the source language file location
+### 소스 언어 파일 위치 변경
 
-To create a file in the `src/locale` directory, specify the output path as an option.
+`src/locale` 디렉토리에 파일을 생성하려면 출력 경로를 옵션으로 지정합니다.
 
-#### `extract-i18n --output-path` example
+#### `extract-i18n --output-path` 예제
 
-The following example specifies the output path as an option.
+다음 예제는 출력 경로를 옵션으로 지정합니다.
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/commands.sh" visibleRegion="extract-i18n-output-path"/>
 
-### Change the source language file format
+### 소스 언어 파일 형식 변경
 
-The `extract-i18n` command creates files in the following translation formats.
+`extract-i18n` 명령은 다음 번역 형식으로 파일을 생성합니다.
 
-| Translation format | Details                                                                                                          | File extension |
-|:---                |:---                                                                                                              |:---            |
-| ARB                | [Application Resource Bundle][GithubGoogleAppResourceBundleWikiApplicationresourcebundlespecification]           | `.arb`            |
-| JSON               | [JavaScript Object Notation][JsonMain]                                                                           | `.json`           |
-| XLIFF 1.2          | [XML Localization Interchange File Format, version 1.2][OasisOpenDocsXliffXliffCoreXliffCoreHtml]                | `.xlf`            |
-| XLIFF 2            | [XML Localization Interchange File Format, version 2][OasisOpenDocsXliffXliffCoreV20Cos01XliffCoreV20Cose01Html] | `.xlf`            |
-| XMB                | [XML Message Bundle][UnicodeCldrDevelopmentDevelopmentProcessDesignProposalsXmb]                                 | `.xmb` \(`.xtb`\) |
+| 번역 형식       | 세부사항                                                                 | 파일 확장자    |
+|:---              |:---                                                                       |:---            |
+| ARB              | [응용 프로그램 리소스 번들][GithubGoogleAppResourceBundleWikiApplicationresourcebundlespecification] | `.arb`         |
+| JSON             | [자바스크립트 객체 표기법][JsonMain]                                       | `.json`        |
+| XLIFF 1.2        | [XML 로컬라이제이션 교환 파일 형식, 버전 1.2][OasisOpenDocsXliffXliffCoreXliffCoreHtml] | `.xlf`         |
+| XLIFF 2          | [XML 로컬라이제이션 교환 파일 형식, 버전 2][OasisOpenDocsXliffXliffCoreV20Cos01XliffCoreV20Cose01Html] | `.xlf`         |
+| XMB              | [XML 메시지 번들][UnicodeCldrDevelopmentDevelopmentProcessDesignProposalsXmb] | `.xmb` \(`.xtb`\) |
 
-Specify the translation format explicitly with the `--format` command option.
+`--format` 명령 옵션으로 번역 형식을 명시적으로 지정하십시오.
 
-HELPFUL: The XMB format generates `.xmb` source language files, but uses`.xtb` translation files.
+도움이 되는 정보: XMB 형식은 `.xmb` 소스 언어 파일을 생성하지만 `.xtb` 번역 파일을 사용합니다.
 
-#### `extract-i18n --format` example
+#### `extract-i18n --format` 예제
 
-The following example demonstrates several translation formats.
+다음 예제는 여러 번역 형식을 보여줍니다.
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/commands.sh" visibleRegion="extract-i18n-formats"/>
 
-### Change the source language file name
+### 소스 언어 파일 이름 변경
 
-To change the name of the source language file generated by the extraction tool, use the `--out-file` command option.
+추출 도구에서 생성된 소스 언어 파일의 이름을 변경하려면 `--out-file` 명령 옵션을 사용하십시오.
 
-#### `extract-i18n --out-file` example
+#### `extract-i18n --out-file` 예제
 
-The following example demonstrates naming the output file.
+다음 예제는 출력 파일의 이름을 보여줍니다.
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/commands.sh" visibleRegion="extract-i18n-out-file"/>
 
-## Create a translation file for each language
+## 각 언어에 대한 번역 파일 생성
 
-To create a translation file for a locale or language, complete the following actions.
+로캘 또는 언어에 대한 번역 파일을 생성하려면 다음 작업을 완료하십시오.
 
-1. [Extract the source language file][GuideI18nCommonTranslationFilesExtractTheSourceLanguageFile].
-1. Make a copy of the source language file to create a *translation* file for each language.
-1. Rename the *translation* file to add the locale.
+1. [소스 언어 파일 추출][GuideI18nCommonTranslationFilesExtractTheSourceLanguageFile].
+1. 각 언어에 대한 *번역* 파일을 생성하기 위해 소스 언어 파일을 복사합니다.
+1. 로캘을 추가하기 위해 *번역* 파일의 이름을 바꿉니다.
 
     <docs-code language="file">
 
@@ -92,7 +92,7 @@ To create a translation file for a locale or language, complete the following ac
 
     </docs-code>
 
-1. Create a new directory at your project root named `locale`.
+1. 프로젝트 루트에 `locale`이라는 새 디렉토리를 생성합니다.
 
     <docs-code language="file">
 
@@ -100,154 +100,154 @@ To create a translation file for a locale or language, complete the following ac
 
     </docs-code>
 
-1. Move the *translation* file to the new directory.
-1. Send the *translation* file to your translator.
-1. Repeat the above steps for each language you want to add to your application.
+1. *번역* 파일을 새 디렉토리로 이동합니다.
+1. *번역* 파일을 번역자에게 보냅니다.
+1. 애플리케이션에 추가할 각 언어에 대해 위 단계를 반복합니다.
 
-### `extract-i18n` example for French
+### 프랑스어에 대한 `extract-i18n` 예제
 
-For example, to create a French translation file, complete the following actions.
+예를 들어 프랑스어 번역 파일을 생성하려면 다음 작업을 완료하십시오.
 
-1. Run the `extract-i18n` command.
-1. Make a copy of the `messages.xlf` source language file.
-1. Rename the copy to `messages.fr.xlf` for the French language \(`fr`\) translation.
-1. Move the `fr` translation file to the `src/locale` directory.
-1. Send the `fr` translation file to the translator.
+1. `extract-i18n` 명령을 실행합니다.
+1. `messages.xlf` 소스 언어 파일을 복사합니다.
+1. 복사본의 이름을 프랑스어 \(`fr`\) 번역을 위해 `messages.fr.xlf`로 변경합니다.
+1. `fr` 번역 파일을 `src/locale` 디렉토리로 이동합니다.
+1. `fr` 번역 파일을 번역자에게 보냅니다.
 
-## Translate each translation file
+## 각 번역 파일 번역
 
-Unless you are fluent in the language and have the time to edit translations, you will likely complete the following steps.
+해당 언어에 능숙하고 번역을 편집할 시간이 없다면 다음 단계를 완료할 가능성이 높습니다.
 
-1. Send each translation file to a translator.
-1. The translator uses an XLIFF file editor to complete the following actions.
-    1. Create the translation.
-    1. Edit the translation.
+1. 각 번역 파일을 번역자에게 보냅니다.
+1. 번역자는 XLIFF 파일 편집기를 사용하여 다음 작업을 완료합니다.
+    1. 번역을 생성합니다.
+    1. 번역을 편집합니다.
 
-### Translation process example for French
+### 프랑스어 번역 프로세스 예제
 
-To demonstrate the process, review the `messages.fr.xlf` file in the [Example Angular Internationalization application][GuideI18nExample].  The [Example Angular Internationalization application][GuideI18nExample] includes a French translation for you to edit without a special XLIFF editor or knowledge of French.
+프로세스를 보여주기 위해, [예제 Angular 국제화 애플리케이션][GuideI18nExample]의 `messages.fr.xlf` 파일을 검토하십시오. [예제 Angular 국제화 애플리케이션][GuideI18nExample]에는 특별한 XLIFF 편집기 없이 수정할 수 있는 프랑스어 번역이 포함되어 있습니다.
 
-The following actions describe the translation process for French.
+다음 작업은 프랑스어 번역 프로세스를 설명합니다.
 
-1. Open `messages.fr.xlf` and find the first `<trans-unit>` element.
-    This is a *translation unit*, also known as a *text node*, that represents the translation of the `<h1>` greeting tag that was previously marked with the `i18n` attribute.
+1. `messages.fr.xlf`를 열고 첫 번째 `<trans-unit>` 요소를 찾습니다.
+    이것은 `i18n` 속성으로 이전에 표시된 `<h1>` 인사 태그의 번역을 나타내는 *번역 단위*입니다.
 
     <docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-hello-before"/>
 
-    The `id="introductionHeader"` is a [custom ID][GuideI18nOptionalManageMarkedText], but without the `@@` prefix required in the source HTML.
+    `id="introductionHeader"`는 [사용자 정의 ID][GuideI18nOptionalManageMarkedText]이며, 소스 HTML에서 필요한 `@@` 접두사가 없습니다.
 
-1. Duplicate the `<source>... </source>` element in the text node, rename it to `target`, and then replace the content with the French text.
+1. 텍스트 노드에서 `<source>... </source>` 요소를 복제하고 `target`으로 이름을 바꾼 다음 내용을 프랑스어 텍스트로 대체합니다.
 
     <docs-code header="src/locale/messages.fr.xlf (<trans-unit>, after translation)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-hello"/>
 
-    In a more complex translation, the information and context in the [description and meaning elements][GuideI18nCommonPrepareAddHelpfulDescriptionsAndMeanings] help you choose the right words for translation.
+    더 복잡한 번역에서는 [설명 및 의미 요소][GuideI18nCommonPrepareAddHelpfulDescriptionsAndMeanings]에 포함된 정보와 맥락이 올바른 단어 선택에 도움을 줍니다.
 
-1. Translate the other text nodes.
-    The following example displays the way to translate.
+1. 다른 텍스트 노드를 번역합니다.
+    다음 예제는 번역 방식에 대한 표시입니다.
 
     <docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-other-nodes"/>
 
-IMPORTANT: Don't change the IDs for translation units.
-Each `id` attribute is generated by Angular and depends on the content of the component text and the assigned meaning.
+중요: 번역 단위의 ID를 변경하지 마십시오.
+각 `id` 속성은 Angular에 의해 생성되며 구성 요소 텍스트의 내용과 할당된 의미에 따라 달라집니다.
 
-If you change either the text or the meaning, then the `id` attribute changes.
-For more about managing text updates and IDs, see [custom IDs][GuideI18nOptionalManageMarkedText].
+텍스트 또는 의미를 변경하면 `id` 속성이 변경됩니다.
+텍스트 업데이트 및 ID 관리를 위한 자세한 내용은 [사용자 정의 ID][GuideI18nOptionalManageMarkedText]를 참조하십시오.
 
-## Translate plurals
+## 복수형 번역
 
-Add or remove plural cases as needed for each language.
+각 언어에 필요에 따라 복수 형태를 추가하거나 제거합니다.
 
-HELPFUL: For language plural rules, see [CLDR plural rules][GithubUnicodeOrgCldrStagingChartsLatestSupplementalLanguagePluralRulesHtml].
+도움이 되는 정보: 언어 복수 규칙에 대한 내용은 [CLDR 복수 규칙][GithubUnicodeOrgCldrStagingChartsLatestSupplementalLanguagePluralRulesHtml]을 참조하십시오.
 
-### `minute` `plural` example
+### `minute` `plural` 예제
 
-To translate a `plural`, translate the ICU format match values.
+`plural`을 번역하려면 ICU 형식의 일치 값을 번역합니다.
 
-* `just now`
-* `one minute ago`
-* `<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago`
+* 지금 막
+* 1분 전
+* `<x id="INTERPOLATION" equiv-text="{{minutes}}"/> 분 전`
 
-The following example displays the way to translate.
+다음 예제는 번역 방식에 대한 표시입니다.
 
 <docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-plural"/>
 
-## Translate alternate expressions
+## 대체 표현 번역
 
-Angular also extracts alternate `select` ICU expressions as separate translation units.
+Angular는 또한 대체 `select` ICU 표현을 별도의 번역 단위로 추출합니다.
 
-### `gender` `select` example
+### `gender` `select` 예제
 
-The following example displays a `select` ICU expression in the component template.
+다음 예제는 구성 요소 템플릿에서 `select` ICU 표현을 보여줍니다.
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-select"/>
 
-In this example, Angular extracts the expression into two translation units.
-The first contains the text outside of the `select` clause, and uses a placeholder for `select` \(`<x id="ICU">`\):
+이 예에서 Angular는 표현을 두 개의 번역 단위로 추출합니다.
+첫 번째 단위에는 `select` 절 외부의 텍스트가 포함되고, `select`에 대한 플레이스홀더가 사용됩니다 \(`<x id="ICU">`\):
 
 <docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-select-1"/>
 
-IMPORTANT: When you translate the text, move the placeholder if necessary, but don't remove it.
-If you remove the placeholder, the ICU expression is removed from your translated application.
+중요: 텍스트를 번역할 때 필요 시 플레이스홀더를 이동하되, 제거하지 마십시오.
+플레이스홀더를 제거하면 ICU 표현이 번역된 애플리케이션에서 제거됩니다.
 
-The following example displays the second translation unit that contains the `select` clause.
+다음 예제는 `select` 절이 포함된 두 번째 번역 단위를 표시합니다.
 
 <docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-select-2"/>
 
-The following example displays both translation units after translation is complete.
+다음 예제는 번역이 완료된 후 두 개의 번역 단위를 모두 표시합니다.
 
 <docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translated-select"/>
 
-## Translate nested expressions
+## 중첩 표현 번역
 
-Angular treats a nested expression in the same manner as an alternate expression.
-Angular extracts the expression into two translation units.
+Angular는 중첩 표현을 대체 표현과 동일하게 처리합니다.
+Angular는 표현을 두 개의 번역 단위로 추출합니다.
 
-### Nested `plural` example
+### 중첩 `plural` 예제
 
-The following example displays the first translation unit that contains the text outside of the nested expression.
+다음 예제는 중첩 표현 외부의 텍스트를 포함하는 첫 번째 번역 단위를 표시합니다.
 
 <docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-nested-1"/>
 
-The following example displays the second translation unit that contains the complete nested expression.
+다음 예제는 전체 중첩 표현을 포함하는 두 번째 번역 단위를 표시합니다.
 
 <docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-nested-2"/>
 
-The following example displays both translation units after translating.
+다음 예제는 번역한 후 두 개의 번역 단위를 모두 표시합니다.
 
 <docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html" visibleRegion="translate-nested"/>
 
-## What's next
+## 다음 단계
 
 <docs-pill-row>
-  <docs-pill href="guide/i18n/merge" title="Merge translations into the app"/>
+  <docs-pill href="guide/i18n/merge" title="앱에 번역 병합"/>
 </docs-pill-row>
 
-[CliMain]: cli "CLI Overview and Command Reference | Angular"
+[CliMain]: cli "CLI 개요 및 명령 참조 | Angular"
 [CliExtractI18n]: cli/extract-i18n "ng extract-i18n | CLI | Angular"
 
-[GuideI18nCommonPrepare]: guide/i18n/prepare "Prepare component for translation | Angular"
-[GuideI18nCommonPrepareAddHelpfulDescriptionsAndMeanings]: guide/i18n/prepare#add-helpful-descriptions-and-meanings "Add helpful descriptions and meanings - Prepare component for translation | Angular"
+[GuideI18nCommonPrepare]: guide/i18n/prepare "번역을 위한 구성 요소 준비 | Angular"
+[GuideI18nCommonPrepareAddHelpfulDescriptionsAndMeanings]: guide/i18n/prepare#add-helpful-descriptions-and-meanings "유용한 설명 및 의미 추가 - 번역을 위한 구성 요소 준비 | Angular"
 
-[GuideI18nCommonTranslationFilesCreateATranslationFileForEachLanguage]: guide/i18n/translation-files#create-a-translation-file-for-each-language "Create a translation file for each language - Work with translation files | Angular"
-[GuideI18nCommonTranslationFilesExtractTheSourceLanguageFile]: guide/i18n/translation-files#extract-the-source-language-file "Extract the source language file - Work with translation files | Angular"
-[GuideI18nCommonTranslationFilesTranslateAlternateExpressions]: guide/i18n/translation-files#translate-alternate-expressions "Translate alternate expressions - Work with translation files | Angular"
-[GuideI18nCommonTranslationFilesTranslateEachTranslationFile]: guide/i18n/translation-files#translate-each-translation-file "Translate each translation file - Work with translation files | Angular"
-[GuideI18nCommonTranslationFilesTranslateNestedExpressions]: guide/i18n/translation-files#translate-nested-expressions "Translate nested expressions - Work with translation files | Angular"
-[GuideI18nCommonTranslationFilesTranslatePlurals]: guide/i18n/translation-files#translate-plurals "Translate plurals - Work with translation files | Angular"
+[GuideI18nCommonTranslationFilesCreateATranslationFileForEachLanguage]: guide/i18n/translation-files#create-a-translation-file-for-each-language "각 언어에 대한 번역 파일 생성 - 번역 파일 작업 | Angular"
+[GuideI18nCommonTranslationFilesExtractTheSourceLanguageFile]: guide/i18n/translation-files#extract-the-source-language-file "소스 언어 파일 추출 - 번역 파일 작업 | Angular"
+[GuideI18nCommonTranslationFilesTranslateAlternateExpressions]: guide/i18n/translation-files#translate-alternate-expressions "대체 표현 번역 - 번역 파일 작업 | Angular"
+[GuideI18nCommonTranslationFilesTranslateEachTranslationFile]: guide/i18n/translation-files#translate-each-translation-file "각 번역 파일 번역 - 번역 파일 작업 | Angular"
+[GuideI18nCommonTranslationFilesTranslateNestedExpressions]: guide/i18n/translation-files#translate-nested-expressions "중첩 표현 번역 - 번역 파일 작업 | Angular"
+[GuideI18nCommonTranslationFilesTranslatePlurals]: guide/i18n/translation-files#translate-plurals "복수형 번역 - 번역 파일 작업 | Angular"
 
-[GuideI18nExample]: guide/i18n/example "Example Angular Internationalization application | Angular"
+[GuideI18nExample]: guide/i18n/example "예제 Angular 국제화 애플리케이션 | Angular"
 
-[GuideI18nOptionalManageMarkedText]: guide/i18n/manage-marked-text "Manage marked text with custom IDs | Angular"
+[GuideI18nOptionalManageMarkedText]: guide/i18n/manage-marked-text "사용자 정의 ID로 표시된 텍스트 관리 | Angular"
 
-[GithubGoogleAppResourceBundleWikiApplicationresourcebundlespecification]: https://github.com/google/app-resource-bundle/wiki/ApplicationResourceBundleSpecification "ApplicationResourceBundleSpecification | google/app-resource-bundle | GitHub"
+[GithubGoogleAppResourceBundleWikiApplicationresourcebundlespecification]: https://github.com/google/app-resource-bundle/wiki/ApplicationResourceBundleSpecification "응용 프로그램 리소스 번들 사양 | google/app-resource-bundle | GitHub"
 
-[GithubUnicodeOrgCldrStagingChartsLatestSupplementalLanguagePluralRulesHtml]: https://cldr.unicode.org/index/cldr-spec/plural-rules "Language Plural Rules - CLDR Charts | Unicode | GitHub"
+[GithubUnicodeOrgCldrStagingChartsLatestSupplementalLanguagePluralRulesHtml]: https://cldr.unicode.org/index/cldr-spec/plural-rules "언어 복수 규칙 - CLDR 차트 | Unicode | GitHub"
 
-[JsonMain]: https://www.json.org "Introducing JSON | JSON"
+[JsonMain]: https://www.json.org "JSON 소개 | JSON"
 
-[OasisOpenDocsXliffXliffCoreXliffCoreHtml]: http://docs.oasis-open.org/xliff/xliff-core/xliff-core.html "XLIFF Version 1.2 Specification | Oasis Open Docs"
-[OasisOpenDocsXliffXliffCoreV20Cos01XliffCoreV20Cose01Html]: http://docs.oasis-open.org/xliff/xliff-core/v2.0/cos01/xliff-core-v2.0-cos01.html "XLIFF Version 2.0 | Oasis Open Docs"
+[OasisOpenDocsXliffXliffCoreXliffCoreHtml]: http://docs.oasis-open.org/xliff/xliff-core/xliff-core.html "XLIFF 버전 1.2 사양 | Oasis Open Docs"
+[OasisOpenDocsXliffXliffCoreV20Cos01XliffCoreV20Cose01Html]: http://docs.oasis-open.org/xliff/xliff-core/v2.0/cos01/xliff-core-v2.0-cos01.html "XLIFF 버전 2.0 | Oasis Open Docs"
 
-[UnicodeCldrDevelopmentDevelopmentProcessDesignProposalsXmb]: http://cldr.unicode.org/development/development-process/design-proposals/xmb "XMB | CLDR - Unicode Common Locale Data Repository | Unicode"
+[UnicodeCldrDevelopmentDevelopmentProcessDesignProposalsXmb]: http://cldr.unicode.org/development/development-process/design-proposals/xmb "XMB | CLDR - Unicode 공통 로캘 데이터 저장소 | Unicode"
 
-[WikipediaWikiXliff]: https://en.wikipedia.org/wiki/XLIFF "XLIFF | Wikipedia"
+[WikipediaWikiXliff]: https://en.wikipedia.org/wiki/XLIFF "XLIFF | Wikipedia"
\ No newline at end of file
diff --git a/adev/src/content/guide/image-optimization.md b/adev/src/content/guide/image-optimization.md
index 2d80daa07775..6f997b01a5ee 100644
--- a/adev/src/content/guide/image-optimization.md
+++ b/adev/src/content/guide/image-optimization.md
@@ -1,31 +1,31 @@
-# Getting started with NgOptimizedImage
+# NgOptimizedImage 시작하기
 
-The `NgOptimizedImage` directive makes it easy to adopt performance best practices for loading images.
+`NgOptimizedImage` 지시자는 이미지 로딩에 대한 성능 최적화 모범 사례를 쉽게 채택할 수 있도록 해줍니다.
 
-The directive ensures that the loading of the [Largest Contentful Paint (LCP)](http://web.dev/lcp) image is prioritized by:
+이 지시자는 [가장 큰 내용 페인트 (LCP)](http://web.dev/lcp) 이미지 로딩의 우선 순위를 설정합니다:
 
-* Automatically setting the `fetchpriority` attribute on the `<img>` tag
-* Lazy loading other images by default
-* Automatically generating a preconnect link tag in the document head
-* Automatically generating a `srcset` attribute
-* Generating a [preload hint](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload) if app is using SSR
+* `<img>` 태그에 자동으로 `fetchpriority` 속성을 설정
+* 기본적으로 다른 이미지를 지연 로딩
+* 문서 헤드에 자동으로 preconnect 링크 태그 생성
+* 자동으로 `srcset` 속성 생성
+* 앱이 SSR을 사용하는 경우 [preload 힌트](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload) 생성
 
-In addition to optimizing the loading of the LCP image, `NgOptimizedImage` enforces a number of image best practices, such as:
+LCP 이미지 로딩 최적화 외에도 `NgOptimizedImage`는 다음과 같은 이미지 모범 사례를 강제로 적용합니다:
 
-* Using [image CDN URLs to apply image optimizations](https://web.dev/image-cdns/#how-image-cdns-use-urls-to-indicate-optimization-options)
-* Preventing layout shift by requiring `width` and `height`
-* Warning if `width` or `height` have been set incorrectly
-* Warning if the image will be visually distorted when rendered
+* [이미지 CDN URL을 사용하여 이미지 최적화적용](https://web.dev/image-cdns/#how-image-cdns-use-urls-to-indicate-optimization-options)
+* `width` 및 `height`를 필수로 하여 레이아웃 이동 방지
+* `width` 또는 `height`가 잘못 설정된 경우 경고
+* 렌더링 시 이미지가 시각적으로 왜곡될 경우 경고
 
-If you're using a background image in CSS, [start here](#how-to-migrate-your-background-image).
+CSS에서 배경 이미지를 사용하는 경우, [여기에서 시작하세요](#how-to-migrate-your-background-image).
 
-**Note: Although the `NgOptimizedImage` directive was made a stable feature in Angular version 15, it has been backported and is available as a stable feature in versions 13.4.0 and 14.3.0 as well.**
+**참고: `NgOptimizedImage` 지시자는 Angular 버전 15에서 안정적인 기능으로 채택되었으나, 13.4.0 및 14.3.0 버전에서도 안정적인 기능으로 제공됩니다.**
 
-## Getting Started
+## 시작하기
 
 <docs-workflow>
-<docs-step title="Import `NgOptimizedImage` directive">
-Import `NgOptimizedImage` directive from `@angular/common`:
+<docs-step title="`NgOptimizedImage` 지시자 가져오기">
+`@angular/common`에서 `NgOptimizedImage` 지시자를 가져옵니다:
 
 <docs-code language="typescript">
 
@@ -33,7 +33,7 @@ import { NgOptimizedImage } from '@angular/common'
 
 </docs-code>
 
-and include it into the `imports` array of a standalone component or an NgModule:
+그리고 독립형 컴포넌트나 NgModule의 `imports` 배열에 포함시킵니다:
 
 <docs-code language="typescript">
 
@@ -44,13 +44,13 @@ imports: [
 
 </docs-code>
 </docs-step>
-<docs-step title="(Optional) Set up a Loader">
-An image loader is not **required** in order to use NgOptimizedImage, but using one with an image CDN enables powerful performance features, including automatic `srcset`s for your images.
+<docs-step title="(선택사항) 로더 설정">
+NgOptimizedImage를 사용하기 위해 이미지 로더는 **필수**는 아니지만, 이미지 CDN과 함께 사용하면 이미지에 대한 자동 `srcset` 등 강력한 성능 기능을 활성화할 수 있습니다.
 
-A brief guide for setting up a loader can be found in the [Configuring an Image Loader](#configuring-an-image-loader-for-ngoptimizedimage) section at the end of this page.
+로더 설정에 대한 간단한 가이드는 이 페이지 끝의 [이미지 로더 구성하기](#configuring-an-image-loader-for-ngoptimizedimage) 섹션에서 확인할 수 있습니다.
 </docs-step>
-<docs-step title="Enable the directive">
-To activate the `NgOptimizedImage` directive, replace your image's `src` attribute with `ngSrc`.
+<docs-step title="지시자 활성화">
+`NgOptimizedImage` 지시자를 활성화하려면 이미지의 `src` 속성을 `ngSrc`로 교체합니다.
 
 <docs-code language="angular-html">
 
@@ -58,10 +58,10 @@ To activate the `NgOptimizedImage` directive, replace your image's `src` attribu
 
 </docs-code>
 
-If you're using a [built-in third-party loader](#built-in-loaders), make sure to omit the base URL path from `src`, as that will be prepended automatically by the loader.
+[내장된 서드파티 로더](#built-in-loaders)를 사용하는 경우, `src`에서 기본 URL 경로를 생략해야 하며, 이는 로더에 의해 자동으로 추가됩니다.
 </docs-step>
-<docs-step title="Mark images as `priority`">
-Always mark the [LCP image](https://web.dev/lcp/#what-elements-are-considered) on your page as `priority` to prioritize its loading.
+<docs-step title="이미지를 `priority`로 표시">
+페이지의 [LCP 이미지](https://web.dev/lcp/#what-elements-are-considered)를 항상 `priority`로 표시하여 로딩의 우선 순위를 높이세요.
 
 <docs-code language="angular-html">
 
@@ -69,16 +69,16 @@ Always mark the [LCP image](https://web.dev/lcp/#what-elements-are-considered) o
 
 </docs-code>
 
-Marking an image as `priority` applies the following optimizations:
+이미지를 `priority`로 표시하면 다음 최적화가 적용됩니다:
 
-* Sets `fetchpriority=high` (read more about priority hints [here](https://web.dev/priority-hints))
-* Sets `loading=eager` (read more about native lazy loading [here](https://web.dev/browser-level-image-lazy-loading))
-* Automatically generates a [preload link element](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload) if [rendering on the server](guide/ssr).
+* `fetchpriority=high` 설정 (우선 순위 힌트에 대한 자세한 내용은 [여기](https://web.dev/priority-hints)에서 읽어주세요)
+* `loading=eager` 설정 (네이티브 지연 로딩에 대한 자세한 내용은 [여기](https://web.dev/browser-level-image-lazy-loading)에서 읽어주세요)
+* [서버에서 렌더링](guide/ssr)하는 경우 자동으로 [preload 링크 요소](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload)를 생성합니다.
 
-Angular displays a warning during development if the LCP element is an image that does not have the `priority` attribute. A page’s LCP element can vary based on a number of factors - such as the dimensions of a user's screen, so a page may have multiple images that should be marked `priority`. See [CSS for Web Vitals](https://web.dev/css-web-vitals/#images-and-largest-contentful-paint-lcp) for more details.
+Angular는 개발 중 LCP 요소가 `priority` 속성이 없는 이미지인 경우 경고를 표시합니다. 페이지의 LCP 요소는 사용자의 화면 크기와 같은 여러 요인에 따라 달라질 수 있으므로, 페이지에는 `priority`로 표시해야 하는 여러 이미지가 있을 수 있습니다. 더 자세한 내용은 [웹 비타일을 위한 CSS](https://web.dev/css-web-vitals/#images-and-largest-contentful-paint-lcp)를 참조하세요.
 </docs-step>
-<docs-step title="Include Width and Height">
-In order to prevent [image-related layout shifts](https://web.dev/css-web-vitals/#images-and-layout-shifts), NgOptimizedImage requires that you specify a height and width for your image, as follows:
+<docs-step title="너비와 높이 포함">
+[이미지와 관련된 레이아웃 이동](https://web.dev/css-web-vitals/#images-and-layout-shifts)을 방지하기 위해 NgOptimizedImage는 다음과 같이 이미지에 대한 높이와 너비를 지정하도록 요구합니다:
 
 <docs-code language="angular-html">
 
@@ -86,19 +86,19 @@ In order to prevent [image-related layout shifts](https://web.dev/css-web-vitals
 
 </docs-code>
 
-For **responsive images** (images which you've styled to grow and shrink relative to the viewport), the `width` and `height` attributes should be the intrinsic size of the image file. For responsive images it's also important to [set a value for `sizes`.](#responsive-images)
+**반응형 이미지** (뷰포트에 따라 크기를 조정하도록 스타일링된 이미지)의 경우, `width` 및 `height` 속성은 이미지 파일의 본래 크기여야 합니다. 반응형 이미지에는 `sizes`에 대한 값을 설정하는 것도 중요합니다. [이곳](#responsive-images)에서 확인하세요.
 
-For **fixed size images**, the `width` and `height` attributes should reflect the desired rendered size of the image. The aspect ratio of these attributes should always match the intrinsic aspect ratio of the image.
+**고정 크기 이미지**의 경우, `width` 및 `height` 속성은 이미지의 원하는 렌더링 크기를 반영해야 합니다. 이 속성의 종횡비는 항상 이미지의 본래 종횡비와 일치해야 합니다.
 
-Note: If you don't know the size of your images, consider using "fill mode" to inherit the size of the parent container, as described below.
+참고: 이미지의 크기를 모르는 경우, 아래 설명된 대로 부모 컨테이너의 크기를 상속받기 위해 "fill 모드"를 사용하는 것을 고려하세요.
 </docs-step>
 </docs-workflow>
 
-## Using `fill` mode
+## `fill` 모드 사용
 
-In cases where you want to have an image fill a containing element, you can use the `fill` attribute. This is often useful when you want to achieve a "background image" behavior. It can also be helpful when you don't know the exact width and height of your image, but you do have a parent container with a known size that you'd like to fit your image into (see "object-fit" below).
+포함 요소를 채우는 이미지를 원할 경우, `fill` 속성을 사용할 수 있습니다. 이는 "배경 이미지" 동작을 달성하려고 할 때 유용합니다. 정확한 너비와 높이를 모를 때도 알아서 맞출 수 있는 부모 컨테이너가 있는 경우에도 유용합니다 (아래 "object-fit" 참조).
 
-When you add the `fill` attribute to your image, you do not need and should not include a `width` and `height`, as in this example:
+이미지에 `fill` 속성을 추가하면 `width` 및 `height`를 포함할 필요가 없으며, 다음과 같이 작성합니다:
 
 <docs-code language="angular-html">
 
@@ -106,32 +106,31 @@ When you add the `fill` attribute to your image, you do not need and should not
 
 </docs-code>
 
-You can use the [object-fit](https://developer.mozilla.org/docs/Web/CSS/object-fit) CSS property to change how the image will fill its container. If you style your image with `object-fit: "contain"`, the image will maintain its aspect ratio and be "letterboxed" to fit the element. If you set `object-fit: "cover"`, the element will retain its aspect ratio, fully fill the element, and some content may be "cropped" off.
+[object-fit](https://developer.mozilla.org/docs/Web/CSS/object-fit) CSS 속성을 사용하여 이미지가 컨테이너를 채우는 방식을 변경할 수 있습니다. `object-fit: "contain"`로 스타일링하면 이미지의 종횡비를 유지하고 요소에 맞게 "레터박스" 처리됩니다. `object-fit: "cover"` 설정 시 요소의 종횡비가 유지되며, 요소를 완전히 채우고 일부 내용이 "잘라질" 수 있습니다.
 
-See visual examples of the above at the [MDN object-fit documentation.](https://developer.mozilla.org/docs/Web/CSS/object-fit)
+위의 시각적 예제는 [MDN object-fit 문서](https://developer.mozilla.org/docs/Web/CSS/object-fit)에서 확인할 수 있습니다.
 
-You can also style your image with the [object-position property](https://developer.mozilla.org/docs/Web/CSS/object-position) to adjust its position within its containing element.
+[object-position 속성](https://developer.mozilla.org/docs/Web/CSS/object-position)을 사용하여 이미지의 위치를 포함 요소 내에서 조정할 수 있습니다.
 
-IMPORTANT: For the "fill" image to render properly, its parent element **must** be styled with `position: "relative"`, `position: "fixed"`, or `position: "absolute"`.
+중요: "fill" 이미지가 제대로 렌더링되기 위해서는 부모 요소에 **반드시** `position: "relative"`, `position: "fixed"`, `position: "absolute"` 스타일이 적용되어야 합니다.
 
-## How to migrate your background image
+## 배경 이미지 마이그레이션 방법
 
-Here's a simple step-by-step process for migrating from `background-image` to `NgOptimizedImage`. For these steps, we'll refer to the element that has an image background as the "containing element":
+`background-image`에서 `NgOptimizedImage`로 마이그레이션하기 위한 간단한 단계별 프로세스는 다음과 같습니다. 이러한 단계에서 이미지 배경이 있는 요소를 "포함 요소"라고 하겠습니다:
 
-1) Remove the `background-image` style from the containing element.
-2) Ensure that the containing element has `position: "relative"`, `position: "fixed"`, or `position: "absolute"`.
-3) Create a new image element as a child of the containing element, using `ngSrc` to enable the `NgOptimizedImage` directive.
-4) Give that element the `fill` attribute. Do not include a `height` and `width`.
-5) If you believe this image might be your [LCP element](https://web.dev/lcp/), add the `priority` attribute to the image element.
+1) 포함 요소에서 `background-image` 스타일을 제거합니다.
+2) 포함 요소에 `position: "relative"`, `position: "fixed"` 또는 `position: "absolute"`가 있는지 확인합니다.
+3) 포함 요소의 자식으로 새 이미지 요소를 생성하고 `ngSrc`를 사용하여 `NgOptimizedImage` 지시자를 활성화합니다.
+4) 해당 요소에 `fill` 속성을 부여합니다. `height` 및 `width`를 포함하지 마세요.
+5) 이 이미지가 [LCP 요소](https://web.dev/lcp/)일 가능성이 있다고 생각된다면 이미지 요소에 `priority` 속성을 추가합니다.
 
-You can adjust how the background image fills the container as described in the [Using fill mode](#using-fill-mode) section.
+배경 이미지가 컨테이너를 채우는 방식을 [fill 모드 사용](#using-fill-mode) 섹션에 설명된 것처럼 조정할 수 있습니다.
 
+## 플레이스홀더 사용하기
 
-## Using placeholders
+### 자동 플레이스홀더
 
-### Automatic placeholders
-
-NgOptimizedImage can display an automatic low-resolution placeholder for your image if you're using a CDN or image host that provides automatic image resizing. Take advantage of this feature by adding the `placeholder` attribute to your image:
+NgOptimizedImage는 CDN 또는 자동 이미지 크기를 제공하는 호스트를 사용하는 경우 이미지의 자동 저해상도 플레이스홀더를 표시할 수 있습니다. 이 기능을 활용하기 위해 이미지에 `placeholder` 속성을 추가하세요:
 
 <docs-code format="typescript" language="angular-html">
 
@@ -139,9 +138,9 @@ NgOptimizedImage can display an automatic low-resolution placeholder for your im
 
 </docs-code>
 
-Adding this attribute automatically requests a second, smaller version of the image using your specified image loader. This small image will be applied as a `background-image` style with a CSS blur while your image loads. If no image loader is provided, no placeholder image can be generated and an error will be thrown.
+이 속성을 추가하면 지정한 이미지 로더를 사용하여 이미지의 작은 버전을 자동으로 요청합니다. 이 작은 이미지는 이미지가 로드되는 동안 CSS 블러 스타일의 `background-image`로 적용됩니다. 이미지 로더가 제공되지 않는 경우 플레이스홀더 이미지를 생성할 수 없으며 오류가 발생합니다.
 
-The default size for generated placeholders is 30px wide. You can change this size by specifying a pixel value in the `IMAGE_CONFIG` provider, as seen below:
+생성된 플레이스홀더의 기본 크기는 30px 넓이입니다. 이 크기는 `IMAGE_CONFIG` 공급자에서 픽셀 값을 지정하여 변경할 수 있습니다:
 
 <docs-code format="typescript" language="typescript">
 providers: [
@@ -154,11 +153,11 @@ providers: [
 ],
 </docs-code>
 
-If you want sharp edges around your blurred placeholder, you can wrap your image in a containing `<div>` with the `overflow: hidden` style. As long as the `<div>` is the same size as the image (such as by using the `width: fit-content` style), the "fuzzy edges" of the placeholder will be hidden.
+블러 처리된 플레이스홀더 주변에 선명한 가장자리를 원한다면, 이미지와 같은 크기의 포함 `<div>`로 이미지를 감싸는 것을 고려하십시오 (`width: fit-content` 스타일을 사용하여).
 
-### Data URL placeholders
+### 데이터 URL 플레이스홀더
 
-You can also specify a placeholder using a base64 [data URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) without an image loader. The data url format is `data:image/[imagetype];[data]`, where `[imagetype]` is the image format, just as `png`, and `[data]` is a base64 encoding of the image. That encoding can be done using the command line or in JavaScript. For specific commands, see [the MDN documentation](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs#encoding_data_into_base64_format). An example of a data URL placeholder with truncated data is shown below:
+이미지 로더 없이 base64 [데이터 URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)을 사용하여 플레이스홀더를 지정할 수도 있습니다. 데이터 URL 형식은 `data:image/[imagetype];[data]`이며, 여기서 `[imagetype]`은 `png`와 같은 이미지 형식이고, `[data]`는 이미지의 base64 인코딩입니다. 인코딩은 명령줄 또는 JavaScript를 사용하여 수행할 수 있습니다. 특정 명령어는 [MDN 문서](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs#encoding_data_into_base64_format)에서 확인하세요. 잘린 데이터와 함께하는 데이터 URL 플레이스홀더의 예는 다음과 같습니다:
 
 <docs-code language="angular-html">
 
@@ -171,11 +170,11 @@ You can also specify a placeholder using a base64 [data URL](https://developer.m
 
 </docs-code>
 
-However, large data URLs  increase the size of your Angular bundles and slow down page load. If you cannot use an image loader, the Angular team recommends keeping base64 placeholder images smaller than 4KB and using them exclusively on critical images. In addition to decreasing placeholder dimensions, consider changing image formats or parameters used when saving images. At very low resolutions, these parameters can have a large effect on file size.
+그러나 대규모 데이터 URL은 Angular 번들의 크기를 증가시키고 페이지 로드를 느리게 합니다. 이미지 로더를 사용할 수 없는 경우, Angular 팀은 base64 플레이스홀더 이미지를 4KB보다 작게 유지하고 주요 이미지에 독점적으로 사용하도록 권장합니다. 플레이스홀더의 크기를 줄이는 것 외에도 이미지 형식 또는 이미지를 저장할 때 사용하는 매개변수를 변경하는 것을 고려하세요. 매우 낮은 해상도에서 이러한 매개변수는 파일 크기에 큰 영향을 미칠 수 있습니다.
 
-### Non-blurred placeholders
+### 비블러 플레이스홀더
 
-By default, NgOptimizedImage applies a CSS blur effect to image placeholders. To render a placeholder without blur, provide a `placeholderConfig` argument with an object that includes the `blur` property, set to false. For example:
+기본적으로 NgOptimizedImage는 이미지 플레이스홀더에 CSS 블러 효과를 적용합니다. 블러 없이 플레이스홀더를 렌더링하려면 `blur` 속성이 false로 설정된 객체와 함께 `placeholderConfig` 인수를 제공하십시오. 예를 들면:
 
 <docs-code language="angular-html">
 
@@ -189,23 +188,23 @@ By default, NgOptimizedImage applies a CSS blur effect to image placeholders. To
 
 </docs-code>
 
-## Adjusting image styling
+## 이미지 스타일 조정
 
-Depending on the image's styling, adding `width` and `height` attributes may cause the image to render differently. `NgOptimizedImage` warns you if your image styling renders the image at a distorted aspect ratio.
+이미지의 스타일링에 따라 `width` 및 `height` 속성을 추가하면 이미지가 다르게 렌더링될 수 있습니다. `NgOptimizedImage`는 이미지 스타일링으로 인해 이미지가 왜곡된 종횡비로 렌더링되는 경우 경고합니다.
 
-You can typically fix this by adding `height: auto` or `width: auto` to your image styles. For more information, see the [web.dev article on the `<img>` tag](https://web.dev/patterns/web-vitals-patterns/images/img-tag).
+보통 `height: auto` 또는 `width: auto`를 이미지 스타일에 추가하여 이 문제를 해결할 수 있습니다. 자세한 내용은 [웹.dev의 `<img>` 태그에 관한 기사](https://web.dev/patterns/web-vitals-patterns/images/img-tag)를 참조하세요.
 
-If the `width` and `height` attribute on the image are preventing you from sizing the image the way you want with CSS, consider using `fill` mode instead, and styling the image's parent element.
+이미지에 대한 `width` 및 `height` 속성이 CSS를 사용하여 이미지를 원하는 크기로 조정하는 것을 방해하는 경우 `fill` 모드를 사용하는 것을 고려하고 이미지의 부모 요소 스타일링을 조정하세요.
 
-## Performance Features
+## 성능 기능
 
-NgOptimizedImage includes a number of features designed to improve loading performance in your app. These features are described in this section.
+NgOptimizedImage는 애플리케이션의 로드 성능을 개선하기 위해 설계된 여러 기능을 포함하고 있습니다. 이 섹션에서는 이 기능에 대해 설명합니다.
 
-### Add resource hints
+### 리소스 힌트 추가
 
-A [`preconnect` resource hint](https://web.dev/preconnect-and-dns-prefetch) for your image origin ensures that the LCP image loads as quickly as possible.
+이미지 출처에 대한 [`preconnect` 리소스 힌트](https://web.dev/preconnect-and-dns-prefetch)는 LCP 이미지가 가능한 한 빨리 로드되도록 보장합니다.
 
-Preconnect links are automatically generated for domains provided as an argument to a [loader](#optional-set-up-a-loader). If an image origin cannot be automatically identified, and no preconnect link is detected for the LCP image, `NgOptimizedImage` will warn during development. In that case, you should manually add a resource hint to `index.html`. Within the `<head>` of the document, add a `link` tag with `rel="preconnect"`, as shown below:
+도메인에 대한 preconnect 링크는 [로더](#optional-set-up-a-loader)에 인수로 제공된 도메인에 대해 자동으로 생성됩니다. 이미지 출처를 자동으로 식별할 수 없고 LCP 이미지에 대한 preconnect 링크가 감지되지 않는 경우 `NgOptimizedImage`는 개발 중 경고합니다. 이 경우 `index.html`에 수동으로 리소스 힌트를 추가해야 합니다. 문서의 `<head>` 내에 `rel="preconnect"`와 함께 `link` 태그를 추가합니다:
 
 <docs-code language="html">
 
@@ -213,8 +212,7 @@ Preconnect links are automatically generated for domains provided as an argument
 
 </docs-code>
 
-
-To disable preconnect warnings, inject the `PRECONNECT_CHECK_BLOCKLIST` token:
+preconnect 경고를 비활성화하려면 `PRECONNECT_CHECK_BLOCKLIST` 토큰을 주입합니다:
 
 <docs-code language="typescript">
 
@@ -224,37 +222,36 @@ providers: [
 
 </docs-code>
 
-See more information on automatic preconnect generation [here](#why-is-a-preconnect-element-not-being-generated-for-my-image-domain).
+자동 preconnect 생성에 대한 자세한 내용은 [여기](#why-is-a-preconnect-element-not-being-generated-for-my-image-domain)에서 확인하세요.
 
+### 자동 `srcset`으로 올바른 크기로 이미지 요청하기
 
-### Request images at the correct size with automatic `srcset`
+[`srcset` 속성](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset)을 정의하면 브라우저가 사용자의 뷰포트에 맞는 크기로 이미지를 요청하므로, 너무 큰 이미지를 다운로드하는 데 시간을 낭비하지 않습니다. `NgOptimizedImage`는 이미지 태그의 [`sizes` 속성](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes)의 존재 및 값에 따라 적절한 `srcset`을 생성합니다.
 
-Defining a [`srcset` attribute](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) ensures that the browser requests an image at the right size for your user's viewport, so it doesn't waste time downloading an image that's too large. `NgOptimizedImage` generates an appropriate `srcset` for the image, based on the presence and value of the [`sizes` attribute](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes) on the image tag.
+#### 고정 크기 이미지
 
-#### Fixed-size images
+이미지가 "고정" 크기여야 하는 경우 (즉, 장치에 따라 크기가 동일하며 [픽셀 밀도](https://web.dev/codelab-density-descriptors/)만 제외됨), `sizes` 속성을 설정할 필요가 없습니다. `srcset`은 이미지의 너비 및 높이 속성에서 자동으로 생성될 수 있으며 추가 입력이 필요하지 않습니다.
 
-If your image should be "fixed" in size  (i.e. the same size across devices, except for [pixel density](https://web.dev/codelab-density-descriptors/)), there is no need to set a `sizes` attribute. A `srcset` can be generated automatically from the image's width and height attributes with no further input required.
-
-Example srcset generated: 
+생성된 srcset 예시:
 ```angular-html
 <img ... srcset="image-400w.jpg 1x, image-800w.jpg 2x">
 ```
 
-#### Responsive images
+#### 반응형 이미지
 
-If your image should be responsive (i.e. grow and shrink according to viewport size), then you will need to define a [`sizes` attribute](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes) to generate the `srcset`.
+이미지가 반응형이어야 하는 경우 (즉, 뷰포트 크기에 따라 크기 조정 가능), `sizes` 속성을 정의해야 `srcset`을 생성할 수 있습니다.
 
-If you haven't used `sizes` before, a good place to start is to set it based on viewport width. For example, if your CSS causes the image to fill 100% of viewport width, set `sizes` to `100vw` and the browser will select the image in the `srcset` that is closest to the viewport width (after accounting for pixel density). If your image is only likely to take up half the screen (ex: in a sidebar), set `sizes` to `50vw` to ensure the browser selects a smaller image. And so on.
+이전에 `sizes`를 사용한 적이 없다면, 일반적으로 뷰포트 너비를 기준으로 설정하는 것이 좋습니다. 예를 들어, CSS로 이미지가 뷰포트 너비의 100%를 차지하게 되는 경우, `sizes`를 `100vw`로 설정하면 브라우저가 픽셀 밀도를 고려한 후 `srcset`에서 뷰포트 너비에 가장 가까운 이미지를 선택합니다. 이미지가 화면의 절반만 차지할 것으로 예상되는 경우(예: 사이드바에서는) `sizes`를 `50vw`로 설정하여 브라우저가 더 작은 이미지를 선택하도록 보장할 수 있습니다. 등을 계속해서 조정할 수 있습니다.
 
-If you find that the above does not cover your desired image behavior, see the documentation on [advanced sizes values](#advanced-sizes-values).
+위의 내용이 원하는 이미지 동작을 다루지 못한다면, [고급 사이즈 값 문서](#advanced-sizes-values)를 참조하세요.
 
-Note that `NgOptimizedImage` automatically prepends `"auto"` to the provided `sizes` value. This is an optimization that increases the accuracy of srcset selection on browsers which support `sizes="auto"`, and is ignored by browsers which do not.
+`NgOptimizedImage`는 제공된 `sizes` 값에 자동으로 `"auto"`를 추가합니다. 이는 `sizes="auto"`를 지원하는 브라우저에서의 srcset 선택 정확도를 높이는 최적화이며, 지원하지 않는 브라우저에서는 무시됩니다.
 
-By default, the responsive breakpoints are:
+기본 반응형 비율은 다음과 같습니다:
 
 `[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]`
 
-If you would like to customize these breakpoints, you can do so using the `IMAGE_CONFIG` provider:
+이 비율을 사용자 정의하고 싶다면 `IMAGE_CONFIG` 공급자를 사용하여 할 수 있습니다:
 
 <docs-code language="typescript">
 providers: [
@@ -267,7 +264,7 @@ providers: [
 ],
 </docs-code>
 
-If you would like to manually define a `srcset` attribute, you can provide your own using the `ngSrcset` attribute:
+`srcset` 속성을 수동으로 정의하고 싶다면, `ngSrcset` 속성을 사용하여 직접 제공할 수 있습니다:
 
 <docs-code language="angular-html">
 
@@ -275,7 +272,7 @@ If you would like to manually define a `srcset` attribute, you can provide your
 
 </docs-code>
 
-If the `ngSrcset` attribute is present, `NgOptimizedImage` generates and sets the `srcset` based on the sizes included. Do not include image file names in `ngSrcset` - the directive infers this information from `ngSrc`. The directive supports both width descriptors (e.g. `100w`) and density descriptors (e.g. `1x`).
+`ngSrcset` 속성이 존재하는 경우, `NgOptimizedImage`는 포함된 크기를 기반으로 `srcset`을 생성하고 설정합니다. `ngSrcset`에 이미지 파일 이름을 포함하지 마세요 - 지시자가 이 정보를 `ngSrc`에서 유추합니다. 이 지시자는 너비 기술자 (예: `100w`)와 밀도 기술자 (예: `1x`)를 모두 지원합니다.
 
 <docs-code language="angular-html">
 
@@ -283,9 +280,9 @@ If the `ngSrcset` attribute is present, `NgOptimizedImage` generates and sets th
 
 </docs-code>
 
-### Disabling automatic srcset generation
+### 자동 srcset 생성 비활성화하기
 
-To disable srcset generation for a single image, you can add the `disableOptimizedSrcset` attribute on the image:
+단일 이미지에 대해 srcset 생성을 비활성화하려면 이미지에 `disableOptimizedSrcset` 속성을 추가할 수 있습니다:
 
 <docs-code language="angular-html">
 
@@ -293,9 +290,9 @@ To disable srcset generation for a single image, you can add the `disableOptimiz
 
 </docs-code>
 
-### Disabling image lazy loading
+### 이미지 지연 로딩 비활성화
 
-By default, `NgOptimizedImage` sets `loading=lazy` for all images that are not marked `priority`. You can disable this behavior for non-priority images by setting the `loading` attribute. This attribute accepts values: `eager`, `auto`, and `lazy`. [See the documentation for the standard image `loading` attribute for details](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/loading#value).
+기본적으로 `NgOptimizedImage`는 `priority`로 표시되지 않은 모든 이미지에 대해 `loading=lazy`를 설정합니다. 비우선 이미지를 위해 이 동작을 비활성화하려면 `loading` 속성을 설정하세요. 이 속성은 `eager`, `auto`, 및 `lazy`의 값을 허용합니다. [표준 이미지 `loading` 속性에 대한 문서](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/loading#value)를 참조하세요.
 
 <docs-code language="angular-html">
 
@@ -303,9 +300,9 @@ By default, `NgOptimizedImage` sets `loading=lazy` for all images that are not m
 
 </docs-code>
 
-### Advanced 'sizes' values
+### 고급 'sizes' 값
 
-You may want to have images displayed at varying widths on differently-sized screens. A common example of this pattern is a grid- or column-based layout that renders a single column on mobile devices, and two columns on larger devices. You can capture this behavior in the `sizes` attribute, using a "media query" syntax, such as the following:
+여러 크기의 화면에 따라 다양한 너비로 이미지를 표시하고 싶을 수 있습니다. 이 패턴의 일반적인 예는 모바일 장치에서 단일 열을 렌더링하고 큰 장치에서는 두 개의 열을 렌더링하는 그리드 또는 열 기반 레이아웃입니다. 이 동작은 `sizes` 속성에서 미디어 쿼리 구문을 사용하여 포착할 수 있습니다. 예를 들어:
 
 <docs-code language="angular-html">
 
@@ -313,37 +310,37 @@ You may want to have images displayed at varying widths on differently-sized scr
 
 </docs-code>
 
-The `sizes` attribute in the above example says "I expect this image to be 100 percent of the screen width on devices under 768px wide. Otherwise, I expect it to be 50 percent of the screen width.
+위의 예에서 `sizes` 속성은 "768px 너비 이하의 장치에서 이 이미지를 화면 너비의 100%로 예상합니다. 그렇지 않으면 화면 너비의 50%로 예상합니다"라고 말합니다.
 
-For additional information about the `sizes` attribute, see [web.dev](https://web.dev/learn/design/responsive-images/#sizes) or [mdn](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes).
+`sizes` 속성에 대한 추가 정보는 [web.dev](https://web.dev/learn/design/responsive-images/#sizes) 또는 [mdn](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes)을 참조하세요.
 
-## Configuring an image loader for `NgOptimizedImage`
+## `NgOptimizedImage`를 위한 이미지 로더 구성
 
-A "loader" is a function that generates an [image transformation URL](https://web.dev/image-cdns/#how-image-cdns-use-urls-to-indicate-optimization-options) for a given image file. When appropriate, `NgOptimizedImage` sets the size, format, and image quality transformations for an image.
+"로더"는 주어진 이미지 파일에 대한 [이미지 변환 URL](https://web.dev/image-cdns/#how-image-cdns-use-urls-to-indicate-optimization-options)을 생성하는 함수입니다. 적절한 경우, `NgOptimizedImage`는 이미지의 크기, 형식 및 이미지 품질 변환을 설정합니다.
 
-`NgOptimizedImage` provides both a generic loader that applies no transformations, as well as loaders for various third-party image services. It also supports writing your own custom loader.
+`NgOptimizedImage`는 변환을 적용하지 않는 일반 로더와 다양한 서드파티 이미지 서비스에 대한 로더를 제공합니다. 또한 사용자 정의 로더를 작성하는 것도 지원합니다.
 
-| Loader type| Behavior |
+| 로더 유형 | 동작 |
 |:--- |:--- |
-| Generic loader | The URL returned by the generic loader will always match the value of `src`. In other words, this loader applies no transformations. Sites that use Angular to serve images are the primary intended use case for this loader.|
-| Loaders for third-party image services | The URL returned by the loaders for third-party image services will follow API conventions used by that particular image service. |
-| Custom loaders | A custom loader's behavior is defined by its developer. You should use a custom loader if your image service isn't supported by the loaders that come preconfigured with `NgOptimizedImage`.|
+| 일반 로더 | 일반 로더가 반환하는 URL은 항상 `src` 값과 일치합니다. 즉, 이 로더는 변환을 적용하지 않습니다. Angular를 사용하여 이미지를 제공하는 사이트가 이 로더의 주요 용도입니다. |
+| 서드파티 이미지 서비스를 위한 로더 | 서드파티 이미지 서비스에 대한 로더가 반환하는 URL은 해당 서비스에서 사용하는 API 규칙을 따릅니다. |
+| 사용자 정의 로더 | 사용자 정의 로더의 동작은 개발자가 정의합니다. 로더가 `NgOptimizedImage`와 함께 미리 구성된 로더에서 지원하지 않는 이미지 서비스인 경우 사용자 정의 로더를 사용해야 합니다. |
 
-Based on the image services commonly used with Angular applications, `NgOptimizedImage` provides loaders preconfigured to work with the following image services:
+Angular 애플리케이션에서 일반적으로 사용되는 이미지 서비스를 기반으로, `NgOptimizedImage`는 다음 이미지 서비스에 맞게 미리 구성된 로더를 제공합니다:
 
-| Image Service | Angular API | Documentation |
+| 이미지 서비스 | Angular API | 문서 |
 |:--- |:--- |:--- |
-| Cloudflare Image Resizing | `provideCloudflareLoader` | [Documentation](https://developers.cloudflare.com/images/image-resizing/) |
-| Cloudinary | `provideCloudinaryLoader` | [Documentation](https://cloudinary.com/documentation/resizing_and_cropping) |
-| ImageKit | `provideImageKitLoader` | [Documentation](https://docs.imagekit.io/) |
-| Imgix | `provideImgixLoader` | [Documentation](https://docs.imgix.com/) |
-| Netlify | `provideNetlifyLoader` | [Documentation](https://docs.netlify.com/image-cdn/overview/) |
+| Cloudflare 이미지 크기 조절 | `provideCloudflareLoader` | [문서](https://developers.cloudflare.com/images/image-resizing/) |
+| Cloudinary | `provideCloudinaryLoader` | [문서](https://cloudinary.com/documentation/resizing_and_cropping) |
+| ImageKit | `provideImageKitLoader` | [문서](https://docs.imagekit.io/) |
+| Imgix | `provideImgixLoader` | [문서](https://docs.imgix.com/) |
+| Netlify | `provideNetlifyLoader` | [문서](https://docs.netlify.com/image-cdn/overview/) |
 
-To use the **generic loader** no additional code changes are necessary. This is the default behavior.
+**일반 로더**를 사용하려면 추가 코드 변경이 필요하지 않습니다. 이는 기본 동작입니다.
 
-### Built-in Loaders
+### 내장 로더
 
-To use an existing loader for a **third-party image service**, add the provider factory for your chosen service to the `providers` array. In the example below, the Imgix loader is used:
+**서드파티 이미지 서비스**에 대한 기존 로더를 사용하려면 선택한 서비스에 대한 프로바이더 팩토리를 `providers` 배열에 추가하십시오. 아래 예는 Imgix 로더가 사용됩니다:
 
 <docs-code language="typescript">
 providers: [
@@ -351,17 +348,17 @@ providers: [
 ],
 </docs-code>
 
-The base URL for your image assets should be passed to the provider factory as an argument. For most sites, this base URL should match one of the following patterns:
+이미지 자산의 기본 URL은 프로바이더 팩토리에 전달되어야합니다. 대부분의 사이트에서 이 기본 URL은 다음 패턴 중 하나와 일치해야 합니다:
 
 * <https://yoursite.yourcdn.com>
 * <https://subdomain.yoursite.com>
 * <https://subdomain.yourcdn.com/yoursite>
 
-You can learn more about the base URL structure in the docs of a corresponding CDN provider.
+해당 CDN 프로바이더의 문서에서 기본 URL 구조에 대해 더 알아보세요.
 
-### Custom Loaders
+### 사용자 정의 로더
 
-To use a **custom loader**, provide your loader function as a value for the `IMAGE_LOADER` DI token. In the example below, the custom loader function returns a URL starting with `https://example.com` that includes `src` and `width` as URL parameters.
+**사용자 정의 로더**를 사용하려면 `IMAGE_LOADER` DI 토큰에 대한 값을 제공하여 로더 함수를 제공해야 합니다. 아래 예제에서 사용자 정의 로더 함수는 URL 매개변수로 `src` 및 `width`를 포함하여 `https://example.com`으로 시작하는 URL을 반환합니다.
 
 <docs-code language="typescript">
 providers: [
@@ -374,19 +371,19 @@ providers: [
 ],
 </docs-code>
 
-A loader function for the `NgOptimizedImage` directive takes an object with the `ImageLoaderConfig` type (from `@angular/common`) as its argument and returns the absolute URL of the image asset. The `ImageLoaderConfig` object contains the `src` property, and optional `width` and `loaderParams` properties.
+`NgOptimizedImage` 지시자에 대한 로더 함수는 `@angular/common`의 `ImageLoaderConfig` 유형 객체를 인수로 받아 이미지 자산의 절대 URL을 반환합니다. `ImageLoaderConfig` 객체는 `src` 속성과 선택적 `width` 및 `loaderParams` 속성을 포함합니다.
 
-Note: even though the `width` property may not always be present, a custom loader must use it to support requesting images at various widths in order for `ngSrcset` to work properly.
+참고: `width` 속성이 항상 존재하지 않을 수 있지만 사용자 정의 로더는 `ngSrcset`이 제대로 작동하도록 다양한 너비의 이미지를 요청하는 데 사용해야 합니다.
 
-### The `loaderParams` Property
+### `loaderParams` 속성
 
-There is an additional attribute supported by the `NgOptimizedImage` directive, called `loaderParams`, which is specifically designed to support the use of custom loaders. The `loaderParams` attribute takes an object with any properties as a value, and does not do anything on its own. The data in `loaderParams` is added to the `ImageLoaderConfig` object passed to your custom loader, and can be used to control the behavior of the loader.
+`NgOptimizedImage` 지시자에 의해 지원되는 추가 속성인 `loaderParams`는 사용자 정의 로더 사용을 지원하도록 특별히 설계되었습니다. `loaderParams` 속성은 값으로 임의의 속성을 가진 객체를 취하고, 스스로는 아무것도 하지 않습니다. `loaderParams`에 데이터가 포함되면 `나의 사용자 정의 로더로 전달되는 ImageLoaderConfig` 객체에 추가됩니다.
 
-A common use for `loaderParams` is controlling advanced image CDN features.
+`loaderParams`의 일반적인 용도는 고급 이미지 CDN 기능을 제어하는 것입니다.
 
-### Example custom loader
+### 예시 사용자 정의 로더
 
-The following shows an example of a custom loader function. This example function concatenates `src` and `width`, and uses `loaderParams` to control a custom CDN feature for rounded corners:
+다음은 사용자 정의 로더 함수의 예제입니다. 이 예제 함수는 `src`와 `width`를 연결하고, 라운드 코너에 대한 사용자 정의 CDN 기능을 제어하기 위해 `loaderParams`를 사용합니다:
 
 <docs-code language="typescript">
 const myCustomLoader = (config: ImageLoaderConfig) => {
@@ -402,7 +399,7 @@ const myCustomLoader = (config: ImageLoaderConfig) => {
 };
 </docs-code>
 
-Note that in the above example, we've invented the 'roundedCorners' property name to control a feature of our custom loader. We could then use this feature when creating an image, as follows:
+위 예제에서는 사용자 정의 로더의 기능을 제어하기 위해 'roundedCorners' 속성 이름을 만들어 사용했습니다. 그런 다음 이미지를 작성할 때 다음과 같이 이 기능을 사용할 수 있습니다:
 
 <docs-code language="angular-html">
 
@@ -410,20 +407,20 @@ Note that in the above example, we've invented the 'roundedCorners' property nam
 
 </docs-code>
 
-## Frequently Asked Questions
+## 자주 묻는 질문
 
-### Does NgOptimizedImage support the `background-image` css property?
+### NgOptimizedImage가 `background-image` CSS 속성을 지원하나요?
 
-The NgOptimizedImage does not directly support the `background-image` css property, but it is designed to easily accommodate the use case of having an image as the background of another element.
+NgOptimizedImage는 `background-image` CSS 속성을 직접 지원하지 않지만, 다른 요소의 배경으로 이미지를 사용하는 사용 사례를 쉽게 수용할 수 있도록 설계되었습니다.
 
-For a step-by-step process for migration from `background-image` to `NgOptimizedImage`, see the [How to migrate your background image](#how-to-migrate-your-background-image) section above. 
+`background-image`에서 `NgOptimizedImage`로 마이그레이션하는 단계별 프로세스는 위의 [배경 이미지 마이그레이션 방법](#how-to-migrate-your-background-image) 섹션을 참조하세요.
 
-### Why can't I use `src` with `NgOptimizedImage`?
+### `NgOptimizedImage`와 함께 `src` 속성을 사용할 수 없는 이유는 무엇인가요?
 
-The `ngSrc` attribute was chosen as the trigger for NgOptimizedImage due to technical considerations around how images are loaded by the browser. NgOptimizedImage makes programmatic changes to the `loading` attribute -- if the browser sees the `src` attribute before those changes are made, it will begin eagerly downloading the image file, and the loading changes will be ignored.
+기술적인 고려사항으로 인해 NgOptimizedImage의 트리거로 `ngSrc` 속성이 선택되었습니다. NgOptimizedImage는 `loading` 속성에 대한 프로그래밍 방식 변경을 수행합니다. 브라우저가 이러한 변경이 이루어지기 전에 `src` 속성을 발견하면, 이미지를 파일을 조기에 다운로드하기 시작하게 되고 로딩 변경은 무시됩니다.
 
-### Why is a preconnect element not being generated for my image domain?
-Preconnect generation is performed based on static analysis of your application. That means that the image domain must be directly included in the loader parameter, as in the following example:
+### 왜 내 이미지 도메인에 대해 preconnect 요소가 생성되지 않나요?
+Preconnect 생성을 수행하기 위해서는 애플리케이션에 대한 정적 분석이 수행됩니다. 이는 이미지 도메인이 로더 매개변수에 직접 포함되어야 함을 의미합니다. 다음 예제를 참조하세요:
 
 <docs-code language="typescript">
 providers: [
@@ -431,35 +428,31 @@ providers: [
 ],
 </docs-code>
 
-If you use a variable to pass the domain string to the loader, or you're not using a loader, the static analysis will not be able to identify the domain, and no preconnect link will be generated. In this case you should manually add a preconnect link to the document head, as [described above](#add-resource-hints).
-
-
-### Can I use two different image domains in the same page?
-
-The [image loaders](#configuring-an-image-loader-for-ngoptimizedimage) provider pattern is designed to be as simple as possible for the common use case of having only a single image CDN used within a component. However, it's still very possible to manage multiple image CDNs using a single provider.
-
-To do this, we recommend writing a [custom image loader](#custom-loaders) which uses the [`loaderParams` property](#the-loaderparams-property) to pass a flag that specifies which image CDN should be used, and then invokes the appropriate loader based on that flag.
+도메인 문자열을 로더에 전달하기 위해 변수를 사용하거나 로더를 사용하지 않는 경우 정적 분석이 도메인을 식별할 수 없어 preconnect 링크가 생성되지 않습니다. 이 경우 문서 헤드에 수동으로 preconnect 링크를 추가해야 하며, [위에서 설명한 대로](#add-resource-hints) 진행하면 됩니다.
 
-### Can you add a new built-in loader for my preferred CDN?
+### 같은 페이지에 두 개의 다른 이미지 도메인을 사용할 수 있나요?
 
-For maintenance reasons, we don't currently plan to support additional built-in loaders in the Angular repository. Instead, we encourage developers to publish any additional image loaders as third-party packages.
+[이미지 로더](#configuring-an-image-loader-for-ngoptimizedimage) 프로바이더 패턴은 컴포넌트 내에서 단일 이미지 CDN만 사용하는 일반적인 사용 사례를 최대한 간단하게 만들기 위해 설계되었습니다. 그러나 여전히 단일 프로바이더를 사용하여 여러 이미지 CDN을 관리할 수 있습니다.
 
-### Can I use this with the `<picture>` tag
+이를 위해 `loaderParams` 속성을 사용하여 사용할 이미지 CDN을 지정하는 플래그를 전달하는 [사용자 정의 이미지 로더](#custom-loaders)를 작성하는 것이 좋습니다. 그런 다음 플래그에 따라 적절한 로더를 호출합니다.
 
-No, but this is on our roadmap, so stay tuned. 
+### 내가 원하는 CDN에 대한 새로운 내장 로더를 추가할 수 있나요?
 
-If you're waiting on this feature, please upvote the Github issue [here](https://github.com/angular/angular/issues/56594).
+유지 관리 이유로 현재 Angular 레포지토리에서 추가 내장 로더를 지원할 계획은 없습니다. 대신, 개발자가 추가 이미지 로더를 제3자 패키지로 게시하도록 권장합니다.
 
-### How do I find my LCP image with Chrome DevTools?
+### `<picture>` 태그와 함께 사용할 수 있나요?
 
-1. Using the performance tab of the Chrome DevTools, click on the "start profiling and reload page" button on the top left. It looks like a page refresh icon.
+아니요, 하지만 이것은 우리의 로드맵에 있으므로 주목해 주세요. 
 
-2. This will trigger a profiling snapshot of your Angular application. 
+이 기능을 기다리고 계신다면 [여기에서 Github 문제에 투표해 주세요](https://github.com/angular/angular/issues/56594).
 
-3. Once the profiling result is available, select "LCP" in the timings section.
+### Chrome DevTools로 내 LCP 이미지를 어떻게 찾나요?
 
-4. A summary entry should appear in the panel at the bottom. You can find the LCP element in the row for "related node".  Clicking on it will reveal the element in the Elements panel. 
+1. Chrome DevTools의 성능 탭을 사용하여 왼쪽 상단의 "프로파일링 시작 및 페이지 새로 고치기" 버튼을 클릭합니다. 페이지 새로 고침 아이콘처럼 생겼습니다.
+2. 이것은 Angular 애플리케이션의 프로파일링 스냅샷을 트리거합니다.
+3. 프로파일링 결과가 제공되면, 타이밍 섹션에서 "LCP"를 선택합니다.
+4. 요약 항목이 하단 패널에 나타날 것입니다. "관련 노드" 행에 LCP 요소가 있습니다. 클릭하면 요소가 요소 패널에서 표시됩니다. 
 
-<img alt="LCP in the Chrome DevTools" src="assets/images/guide/image-optimization/devtools-lcp.png">
+<img alt="Chrome DevTools의 LCP" src="assets/images/guide/image-optimization/devtools-lcp.png">
 
-NOTE: This only identifies the LCP element within the viewport of the page you are testing. It is also recommended to use mobile emulation to identify the LCP element for smaller screens.
+참고: 이것은 테스트하는 페이지의 뷰포트 내에서 LCP 요소만 식별합니다. 작은 화면의 LCP 요소를 식별하기 위해 모바일 에뮬레이션을 사용하는 것이 좋습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/incremental-hydration.md b/adev/src/content/guide/incremental-hydration.md
index a11a7e638e25..19c625a60932 100644
--- a/adev/src/content/guide/incremental-hydration.md
+++ b/adev/src/content/guide/incremental-hydration.md
@@ -1,20 +1,20 @@
-# Incremental Hydration
+# 증분 수분
 
-Tip: Incremental hydration is currently in [developer preview](/reference/releases#developer-preview).
+팁: 증분 수분은 현재 [개발자 미리보기](/reference/releases#developer-preview)에 있습니다.
 
-**Incremental hydration** is an advanced type of [hydration](guide/hydration) that can leave sections of your application dehydrated and _incrementally_ trigger hydration of those sections as they are needed.
+**증분 수분**은 애플리케이션의 일부를 탈수 상태로 두고 필요에 따라 그 섹션의 수분을 _점진적으로_ 트리거할 수 있는 고급 유형의 [수분](guide/hydration)입니다.
 
-## Why use incremental hydration?
+## 왜 증분 수분을 사용해야 하나요?
 
-Incremental hydration is a performance improvement that builds on top of full application hydration. It can produce smaller initial bundles while still providing an end-user experience that is comparable to a full application hydration experience. Smaller bundles improve initial load times, reducing [First Input Delay (FID)](https://web.dev/fid) and [Cumulative Layout Shift (CLS)](https://web.dev/cls).
+증분 수분은 전체 애플리케이션 수분 위에 구축된 성능 향상입니다. 이는 초기 번들을 더 작게 만들 수 있으며 여전히 전체 애플리케이션 수분 경험과 비교할 수 있는 최종 사용자 경험을 제공합니다. 더 작은 번들은 초기 로드 시간을 개선하여 [첫 입력 지연(FID)](https://web.dev/fid) 및 [누적 레이아웃 이동(CLS)](https://web.dev/cls)를 줄입니다.
 
-Incremental hydration also lets you use deferrable views (`@defer`) for content that may not have been deferrable before. Specifically, you can now use deferrable views for content that is above the fold. Prior to incremental hydration, putting a `@defer` block above the fold would result in placeholder content rendering and then being replaced by the `@defer` block's main template content. This would result in a layout shift. Incremental hydration means the main template of the `@defer` block will render with no layout shift on hydration.
+증분 수분은 또한 이전에 지연 가능하지 않았던 콘텐츠에 대해 지연 가능한 뷰(`@defer`)를 사용할 수 있게 해줍니다. 구체적으로, 이제는 폴드 위의 콘텐츠에 대해 지연 가능한 뷰를 사용할 수 있습니다. 증분 수분 이전에는 폴드 위에 `@defer` 블록을 배치하면 자리 표시자 콘텐츠가 렌더링되고 나중에 `@defer` 블록의 기본 템플릿 콘텐츠로 대체되었습니다. 이는 레이아웃 이동을 초래했습니다. 증분 수분은 `@defer` 블록의 기본 템플릿이 수분 시 레이아웃 이동 없이 렌더링됨을 의미합니다.
 
-## How do you enable incremental hydration in Angular?
+## Angular에서 증분 수분을 어떻게 활성화하나요?
 
-You can enable incremental hydration for applications that already use server-side rendering (SSR) with hydration. Follow the [Angular SSR Guide](guide/ssr) to enable server-side rendering and the [Angular Hydration Guide](guide/hydration) to enable hydration first.
+서버 측 렌더링(SSR)과 수분을 이미 사용하는 애플리케이션에 대해 증분 수분을 활성화할 수 있습니다. 서버 측 렌더링을 활성화하려면 [Angular SSR 가이드](guide/ssr)를 따르고 먼저 수분을 활성화하려면 [Angular 수분 가이드](guide/hydration)를 따르세요.
 
-Enable incremental hydration by adding the `withIncrementalHydration()` function to the `provideClientHydration` provider.
+`provideClientHydration` 제공자에 `withIncrementalHydration()` 함수를 추가하여 증분 수분을 활성화하세요.
 
 ```typescript
 import {
@@ -29,164 +29,154 @@ bootstrapApplication(AppComponent, {
 });
 ```
 
-Incremental Hydration depends on and enables event replay automatically. If you already have `withEventReplay()` in your list, you can safely remove it after enabling incremental hydration.
+증분 수분은 이벤트 재상태 재생에 의존하며 자동으로 활성화합니다. 이미 목록에 `withEventReplay()`가 있는 경우, 증분 수분을 활성화한 후 안전하게 제거할 수 있습니다.
 
-## How does incremental hydration work?
+## 증분 수분은 어떻게 작동하나요?
 
-Incremental hydration builds on top of full-application [hydration](guide/hydration), [deferrable views](guide/defer), and [event replay](guide/hydration#capturing-and-replaying-events). With incremental hydration, you can add additional triggers to `@defer` blocks that define incremental hydration boundaries. Adding a `hydrate` trigger to a defer block tells Angular that it should load that defer block's dependencies during server-side rendering and render the main template rather than the `@placeholder`. When client-side rendering, the dependencies are still deferred, and the defer block content stays dehydrated until its `hydrate` trigger fires. That trigger tells the defer block to fetch its dependencies and hydrate the content. Any browser events, specifically those that match listeners registered in your component, that are triggered by the user prior to hydration are queued up and replayed once the hydration process is complete.
+증분 수분은 전체 애플리케이션 [수분](guide/hydration), [지연 가능한 뷰](guide/defer) 및 [이벤트 재생](guide/hydration#capturing-and-replaying-events)에 기반하여 구축됩니다. 증분 수분을 사용하면 `@defer` 블록에 추가 트리거를 추가하여 증분 수분 경계를 정의할 수 있습니다. 지연 블록에 `hydrate` 트리거를 추가하면 Angular는 서버 측 렌더링 동안 해당 지연 블록의 의존성 로드를 수행하고 `@placeholder` 대신 기본 템플릿을 렌더링해야 함을 알립니다. 클라이언트 측 렌더링 시, 의존성은 여전히 지연 상태이며, 지연 블록 콘텐츠는 `hydrate` 트리거가 활성화될 때까지 탈수 상태로 유지됩니다. 이 트리거는 지연 블록에서 의존성을 가져오고 콘텐츠를 수분하라고 지시합니다. 수분 전 사용자에 의해 트리거된 모든 브라우저 이벤트, 즉 구성 요소에 등록된 리스너와 일치하는 이벤트는 큐에 저장되고 수분 프로세스가 완료되면 재생됩니다.
 
-## Controlling hydration of content with triggers
+## 트리거를 사용하여 콘텐츠 수분 제어
 
-You can specify **hydrate triggers** that control when Angular loads and hydrates deferred content. These are additional triggers that can be used alongside regular `@defer` triggers.
+**수분 트리거**를 지정하여 Angular가 지연 콘텐츠를 로드하고 수분할 때를 제어할 수 있습니다. 이는 일반 `@defer` 트리거와 함께 사용할 수 있는 추가 트리거입니다.
 
-Each `@defer` block may have multiple hydrate event triggers, separated with a semicolon (`;`). Angular triggers hydration when _any_ of the triggers fire.
+각 `@defer` 블록은 세미콜론(`;`)으로 구분된 여러 수분 이벤트 트리거를 가질 수 있습니다. Angular는 _어떤_ 트리거가 활성화될 때 수분을 트리거합니다.
 
-There are three types of hydrate triggers: `hydrate on`, `hydrate when`, and `hydrate never`.
+수분 트리거에는 세 가지 유형이 있습니다: `hydrate on`, `hydrate when`, 및 `hydrate never`.
 
 ### `hydrate on`
 
-`hydrate on` specifies a condition for when hydration is triggered for the `@defer` block.
+`hydrate on`은 `@defer` 블록의 수분이 트리거되는 조건을 지정합니다.
 
-The available triggers are as follows:
+사용 가능한 트리거는 다음과 같습니다:
 
-| Trigger                                             | Description                                                            |
-| --------------------------------------------------- | ---------------------------------------------------------------------- |
-| [`hydrate on idle`](#hydrate-on-idle)               | Triggers when the browser is idle.                                     |
-| [`hydrate on viewport`](#hydrate-on-viewport)       | Triggers when specified content enters the viewport                    |
-| [`hydrate on interaction`](#hydrate-on-interaction) | Triggers when the user interacts with specified element                |
-| [`hydrate on hover`](#hydrate-on-hover)             | Triggers when the mouse hovers over specified area                     |
-| [`hydrate on immediate`](#hydrate-on-immediate)     | Triggers immediately after non-deferred content has finished rendering |
-| [`hydrate on timer`](#hydrate-on-timer)             | Triggers after a specific duration                                     |
+| 트리거                                               | 설명                                                                |
+| ----------------------------------------------------- | -------------------------------------------------------------------- |
+| [`hydrate on idle`](#hydrate-on-idle)                 | 브라우저가 유휴 상태일 때 트리거됩니다.                                  |
+| [`hydrate on viewport`](#hydrate-on-viewport)         | 지정된 콘텐츠가 뷰포트에 들어올 때 트리거됩니다.                         |
+| [`hydrate on interaction`](#hydrate-on-interaction)   | 사용자가 지정된 요소와 상호작용할 때 트리거됩니다.                       |
+| [`hydrate on hover`](#hydrate-on-hover)               | 마우스가 지정된 영역 위에 있을 때 트리거됩니다.                          |
+| [`hydrate on immediate`](#hydrate-on-immediate)       | 지연되지 않은 콘텐츠의 렌더링이 완료된 직후 트리거됩니다.                  |
+| [`hydrate on timer`](#hydrate-on-timer)               | 특정 기간 후에 트리거됩니다.                                           |
 
 #### `hydrate on idle`
 
-The `hydrate on idle` trigger loads the deferrable view's dependencies and hydrates the content once the browser has reached an idle state, based on `requestIdleCallback`.
+`hydrate on idle` 트리거는 브라우저가 유휴 상태에 도달하면 지연 가능한 뷰의 의존성을 로드하고 콘텐츠를 수분합니다. 이는 `requestIdleCallback` 기반입니다.
 
 ```angular-html
 @defer (hydrate on idle) {
   <large-cmp />
 } @placeholder {
-  <div>Large component placeholder</div>
+  <div>대형 구성 요소 자리 표시자</div>
 }
 ```
 
 #### `hydrate on viewport`
 
-The `hydrate on viewport` trigger loads the deferrable view's dependencies and hydrates the corresponding page of the app when the specified content enters the viewport using the
-[Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API).
+`hydrate on viewport` 트리거는 지정된 콘텐츠가 뷰포트에 들어올 때 지연 가능한 뷰의 의존성을 로드하고 해당 페이지를 수분합니다. 이는 [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API)를 사용합니다.
 
 ```angular-html
 @defer (hydrate on viewport) {
   <large-cmp />
 } @placeholder {
-  <div>Large component placeholder</div>
+  <div>대형 구성 요소 자리 표시자</div>
 }
 ```
 
 #### `hydrate on interaction`
 
-The `hydrate on interaction` trigger loads the deferrable view's dependencies and hydrates the content when the user interacts with the specified element through
-`click` or `keydown` events.
+`hydrate on interaction` 트리거는 사용자가 클릭이나 키다운 이벤트를 통해 지정된 요소와 상호작용할 때 지연 가능한 뷰의 의존성을 로드하고 콘텐츠를 수분합니다.
 
 ```angular-html
 @defer (hydrate on interaction) {
   <large-cmp />
 } @placeholder {
-  <div>Large component placeholder</div>
+  <div>대형 구성 요소 자리 표시자</div>
 }
 ```
 
 #### `hydrate on hover`
 
-The `hydrate on hover` trigger loads the deferrable view's dependencies and hydrates the content when the mouse has hovered over the triggered area through the
-`mouseover` and `focusin` events.
+`hydrate on hover` 트리거는 마우스가 특정 영역에 호버할 때 지연 가능한 뷰의 의존성을 로드하고 콘텐츠를 수분합니다. 이는 `mouseover` 및 `focusin` 이벤트를 통해 발생합니다.
 
 ```angular-html
 @defer (hydrate on hover) {
   <large-cmp />
 } @placeholder {
-  <div>Large component placeholder</div>
+  <div>대형 구성 요소 자리 표시자</div>
 }
 ```
 
 #### `hydrate on immediate`
 
-The `hydrate on immediate` trigger loads the deferrable view's dependencies and hydrates the content immediately. This means that the deferred block loads as soon
-as all other non-deferred content has finished rendering.
+`hydrate on immediate` 트리거는 지연 가능한 뷰의 의존성을 즉시 로드하고 콘텐츠를 수분합니다. 즉, 지연 블록은 모든 다른 비지연 콘텐츠의 렌더링이 완료되자마자 로드됩니다.
 
 ```angular-html
 @defer (hydrate on immediate) {
   <large-cmp />
 } @placeholder {
-  <div>Large component placeholder</div>
+  <div>대형 구성 요소 자리 표시자</div>
 }
 ```
 
 #### `hydrate on timer`
 
-The `hydrate on timer` trigger loads the deferrable view's dependencies and hydrates the content after a specified duration.
+`hydrate on timer` 트리거는 지정된 기간 후에 지연 가능한 뷰의 의존성을 로드하고 콘텐츠를 수분합니다.
 
 ```angular-html
 @defer (hydrate on timer(500ms)) {
   <large-cmp />
 } @placeholder {
-  <div>Large component placeholder</div>
+  <div>대형 구성 요소 자리 표시자</div>
 }
 ```
 
-The duration parameter must be specified in milliseconds (`ms`) or seconds (`s`).
+기간 매개변수는 밀리초(`ms`) 또는 초(`s`)로 지정해야 합니다.
 
 ### `hydrate when`
 
-The `hydrate when` trigger accepts a custom conditional expression and loads the deferrable view's dependencies and hydrates the content when the
-condition becomes truthy.
+`hydrate when` 트리거는 사용자 지정 조건식을 수용하고 조건이 truthy가 될 때 지연 가능한 뷰의 의존성을 로드하고 콘텐츠를 수분합니다.
 
 ```angular-html
 @defer (hydrate when condition) {
   <large-cmp />
 } @placeholder {
-  <div>Large component placeholder</div>
+  <div>대형 구성 요소 자리 표시자</div>
 }
 ```
 
-Note: `hydrate when` conditions only trigger when they are the top-most dehydrated `@defer` block. The condition provided for the trigger is
-specified in the parent component, which needs to exist before it can be triggered. If the parent block is dehydrated, that expression will not yet
-be resolvable by Angular.
+참고: `hydrate when` 조건은 가장 상단의 탈수된 `@defer` 블록일 때만 트리거됩니다. 트리거에 제공된 조건은 부모 구성 요소에서 지정되어야 하며, 트리거될 수 있도록 존재해야 합니다. 부모 블록이 탈수 상태인 경우 Angular에서 해당 표현식은 아직 해결될 수 없습니다.
 
 ### `hydrate never`
 
-The `hydrate never` allows users to specify that the content in the defer block should remain dehydrated indefinitely, effectively becoming static
-content. Note that this applies to the initial render only. During a subsequent client-side render, a `@defer` block with `hydrate never` would
-still fetch dependencies, as hydration only applies to initial load of server-side rendered content. In the example below, subsequent client-side
-renders would load the `@defer` block dependencies on viewport.
+`hydrate never`는 사용자가 지연 블록의 콘텐츠가 무한히 탈수 상태로 남아 있게 하도록 지정할 수 있게 해줍니다. 이는 콘텐츠가 정적 콘텐츠로 변환됩니다. 이는 초기 렌더링에만 적용된다는 점에 유의하세요. 이후 클라이언트 측 렌더링 기간 동안 `hydrate never`가 있는 `@defer` 블록은 여전히 의존성을 가져올 것입니다. 수분은 서버 측 렌더링된 콘텐츠의 초기 로드에만 적용됩니다. 아래 예제에서는 이후 클라이언트 측 렌더링이 뷰포트에서 `@defer` 블록 의존성을 로드합니다.
 
 ```angular-html
 @defer (on viewport; hydrate never) {
   <large-cmp />
 } @placeholder {
-  <div>Large component placeholder</div>
+  <div>대형 구성 요소 자리 표시자</div>
 }
 ```
 
-Note: Using `hydrate never` prevents hydration of the entire nested subtree of a given `@defer` block. No other `hydrate` triggers fire for content nested underneath that block.
+참고: `hydrate never`를 사용하면 주어진 `@defer` 블록의 전체 중첩 하위 트리가 수분되는 것을 방지합니다. 그 블록 아래에 중첩된 콘텐츠에 대해서는 다른 `hydrate` 트리거가 활성화되지 않습니다.
 
-## Hydrate triggers alongside regular triggers
+## 일반 트리거와 함께하는 수분 트리거
 
-Hydrate triggers are additional triggers that are used alongside regular triggers on a `@defer` block. Hydration is an initial load optimization, and that means hydrate triggers only apply to that initial load. Any subsequent client side render will still use the regular trigger.
+수분 트리거는 `@defer` 블록의 일반 트리거와 함께 사용되는 추가 트리거입니다. 수분은 초기 로드 최적화이며, 이는 수분 트리거가 초기 로드에만 적용됨을 의미합니다. 이후의 클라이언트 측 렌더링은 여전히 일반 트리거를 사용합니다.
 
 ```angular-html
 @defer (on idle; hydrate on interaction) {
   <example-cmp />
-} @placeholder{
-  <div>Example Placeholder</div>
+} @placeholder {
+  <div>예제 자리 표시자</div>
 }
 ```
 
-In this example, on the initial load, the `hydrate on interaction` applies. Hydration will be triggered on interaction with the `<example-cmp />` component. On any subsequent page load that is client-side rendered, for example when a user clicks a routerLink that loads a page with this component, the `on idle` will apply.
+이 예제에서는 초기 로드 시 `hydrate on interaction`이 적용됩니다. `<example-cmp />` 구성 요소와 상호작용하면 수분이 트리거됩니다. 이후 클라이언트 측 렌더링(예: 사용자가 이 구성 요소가 있는 페이지를 로드하는 routerLink를 클릭할 때)에서는 `on idle`이 적용됩니다.
 
-## How does incremental hydration work with nested `@defer` blocks?
+## 중첩된 `@defer` 블록에서 증분 수분은 어떻게 작동하나요?
 
-Angular's component and dependency system is hierarchical, which means hydrating any component requires all of its parents also be hydrated. So if hydration is triggered for a child `@defer` block of a nested set of dehydrated `@defer` blocks, hydration is triggered from the top-most dehydrated `@defer` block down to the triggered child and fire in that order.
+Angular의 구성 요소 및 의존성 시스템은 계층적이며, 이는 어떤 구성 요소의 수분은 모든 부모가 또한 수분되어야 함을 의미합니다. 따라서 중첩된 탈수된 `@defer` 블록 세트의 자식 `@defer` 블록에 대해 수분이 트리거되면, 최상위 탈수된 `@defer` 블록에서 트리거된 자식까지 내려가면서 그 순서대로 수분이 트리거됩니다.
 
 ```angular-html
 @defer (hydrate on interaction) {
@@ -194,19 +184,19 @@ Angular's component and dependency system is hierarchical, which means hydrating
   @defer (hydrate on hover) {
     <child-block-cmp />
   } @placeholder {
-    <div>Child placeholder</div>
+    <div>자식 자리 표시자</div>
   }
-} @placeholder{
-  <div>Parent Placeholder</div>
+} @placeholder {
+  <div>부모 자리 표시자</div>
 }
 ```
 
-In the above example, hovering over the nested `@defer` block triggers hydration. The parent `@defer` block with the `<parent-block-cmp />` hydrates first, then the child `@defer` block with `<child-block-cmp />` hydrates after.
+위 예에서 중첩된 `@defer` 블록에 마우스를 올리면 수분이 트리거됩니다. `<parent-block-cmp />`가 있는 부모 `@defer` 블록이 먼저 수분되고, 그 다음에 `<child-block-cmp />`가 있는 자식 `@defer` 블록이 수분됩니다.
 
-## Constraints
+## 제약 조건
 
-Incremental hydration has the same constraints as full-application hydration, including limits on direct DOM manipulation and requiring valid HTML structure. Visit the [Hydration guide constraints](guide/hydration#constraints) section for more details.
+증분 수분은 전체 애플리케이션 수분과 동일한 제약 조건을 가지며, 여기에는 직접 DOM 조작에 대한 제한 및 유효한 HTML 구조 요구 사항이 포함됩니다. 더 많은 세부정보는 [수분 가이드 제약 조건](guide/hydration#constraints) 섹션을 방문하세요.
 
-## Do I still need to specify `@placeholder` blocks?
+## 여전히 `@placeholder` 블록을 지정해야 하나요?
 
-Yes. `@placeholder` block content is not used for incremental hydration, but a `@placeholder` is still necessary for subsequent client-side rendering cases. If your content was not on the route that was part of the initial load, then any navigation to the route that has your `@defer` block content renders like a regular `@defer` block. So the `@placeholder` is rendered in those client-side rendering cases.
+예. `@placeholder` 블록 콘텐츠는 증분 수분에 사용되지 않지만, 이후 클라이언트 측 렌더링 사례에는 여전히 `@placeholder`가 필요합니다. 콘텐츠가 초기 로드의 일부인 경로에 없었다면, 해당 `@defer` 블록 콘텐츠가 있는 경로로 탐색할 때 일반 `@defer` 블록처럼 렌더링됩니다. 따라서 이러한 클라이언트 측 렌더링 사례에서 `@placeholder`가 렌더링됩니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/ngmodules/overview.md b/adev/src/content/guide/ngmodules/overview.md
index 1e901e7784e2..3c170473786c 100644
--- a/adev/src/content/guide/ngmodules/overview.md
+++ b/adev/src/content/guide/ngmodules/overview.md
@@ -1,38 +1,38 @@
 # NgModules
 
-IMPORTANT: The Angular team recommends using [standalone components](guide/components/anatomy-of-components#-imports-in-the-component-decorator) instead of `NgModule` for all new code. Use this guide to understand existing code built with `@NgModule`.
+중요: Angular 팀은 모든 새로운 코드에 대해 `NgModule` 대신 [독립 구성 요소](guide/components/anatomy-of-components#-imports-in-the-component-decorator)를 사용하는 것을 권장합니다. 이 가이드는 `@NgModule`로 작성된 기존 코드를 이해하는 데 도움이 됩니다.
 
-An NgModule is a class marked by the `@NgModule` decorator. This decorator accepts *metadata* that tells Angular how to compile component templates and configure dependency injection.
+NgModule은 `@NgModule` 데코레이터로 표시된 클래스입니다. 이 데코레이터는 Angular가 구성 요소 템플릿을 컴파일하고 종속성 주입을 구성하는 방법을 알려주는 *메타데이터*를 수락합니다.
 
 ```typescript
 import {NgModule} from '@angular/core';
 
 @NgModule({
-  // Metadata goes here
+  // 메타데이터가 여기에 옵니다
 })
 export class CustomMenuModule { }
 ```
 
-An NgModule has two main responsibilities:
-* Declaring components, directives, and pipes that belong to the NgModule
-* Add providers to the injector for components, directives, and pipes that import the NgModule
+NgModule은 두 가지 주요 책임이 있습니다:
+* NgModule에 속하는 구성 요소, 지시자 및 파이프를 선언하는 것
+* NgModule을 가져오는 구성 요소, 지시자 및 파이프에 대한 공급자를 주입기에 추가하는 것
 
-## Declarations
+## 선언
 
-The `declarations` property of the `@NgModule` metadata declares the components, directives, and pipes that belong to the NgModule.
+`@NgModule` 메타데이터의 `declarations` 속성은 NgModule에 속하는 구성 요소, 지시자 및 파이프를 선언합니다.
 
 ```typescript
 @NgModule({
   /* ... */
-  // CustomMenu and CustomMenuItem are components.
+  // CustomMenu와 CustomMenuItem은 구성 요소입니다.
   declarations: [CustomMenu, CustomMenuItem],
 })
 export class CustomMenuModule { }
 ```
 
-In the example above, the components `CustomMenu` and `CustomMenuItem` belong to `CustomMenuModule`.
+위의 예에서 `CustomMenu`와 `CustomMenuItem` 구성 요소는 `CustomMenuModule`에 속합니다.
 
-The `declarations` property additionally accepts _arrays_ of components, directives, and pipes. These arrays, in turn, may also contain other arrays.
+`declarations` 속성은 또한 구성 요소, 지시자 및 파이프의 _배열_을 수락합니다. 이러한 배열은 다른 배열을 포함할 수도 있습니다.
 
 ```typescript
 const MENU_COMPONENTS = [CustomMenu, CustomMenuItem];
@@ -40,85 +40,85 @@ const WIDGETS = [MENU_COMPONENTS, CustomSlider];
 
 @NgModule({
   /* ... */
-  // This NgModule declares all of CustomMenu, CustomMenuItem,
-  // CustomSlider, and CustomCheckbox.
+  // 이 NgModule은 CustomMenu, CustomMenuItem,
+  // CustomSlider 및 CustomCheckbox를 선언합니다.
   declarations: [WIDGETS, CustomCheckbox],
 })
 export class CustomMenuModule { }
 ```
 
-If Angular discovers any components, directives, or pipes declared in more than one NgModule, it reports an error.
+Angular가 두 개 이상의 NgModule에서 선언된 구성 요소, 지시자 또는 파이프를 발견하면 오류를 보고합니다.
 
-Any components, directives, or pipes must be explicitly marked as `standalone: false` in order to be declared in an NgModule.
+모든 구성 요소, 지시자 또는 파이프는 NgModule에 선언되기 위해 명시적으로 `standalone: false`로 표시되어야 합니다.
 
 ```typescript
 @Component({
-  // Mark this component as `standalone: false` so that it can be declared in an NgModule.
+  // 이 구성 요소를 `standalone: false`로 표시하여 NgModule에 선언할 수 있도록 합니다.
   standalone: false,
   /* ... */
 })
 export class CustomMenu { /* ... */ }
 ```
 
-### imports
+### 가져오기
 
-Components declared in an NgModule may depend on other components, directives, and pipes. Add these dependencies to the `imports` property of the `@NgModule` metadata.
+NgModule에서 선언된 구성 요소는 다른 구성 요소, 지시자 및 파이프에 의존할 수 있습니다. 이러한 의존성을 `@NgModule` 메타데이터의 `imports` 속성에 추가합니다.
 
 ```typescript
 @NgModule({
   /* ... */
-  // CustomMenu and CustomMenuItem depend on the PopupTrigger and SelectorIndicator components.
+  // CustomMenu와 CustomMenuItem은 PopupTrigger 및 SelectorIndicator 구성 요소에 의존합니다.
   imports: [PopupTrigger, SelectionIndicator],
   declarations: [CustomMenu, CustomMenuItem],
 })
 export class CustomMenuModule { }
 ```
 
-The `imports` array accepts other NgModules, as well as standalone components, directives, and pipes.
+`imports` 배열은 다른 NgModule은 물론 독립 구성 요소, 지시자 및 파이프도 수용합니다.
 
-### exports
+### 내보내기
 
-An NgModule can _export_ its declared components, directives, and pipes such that they're available to other components and NgModules.
+NgModule은 선언한 구성 요소, 지시자 및 파이프를 _내보낼_ 수 있어 다른 구성 요소 및 NgModule에서 사용할 수 있게 합니다.
 
  ```typescript
 @NgModule({
   imports: [PopupTrigger, SelectionIndicator],
   declarations: [CustomMenu, CustomMenuItem],
 
-  // Make CustomMenu and CustomMenuItem available to
-  // components and NgModules that import CustomMenuModule.
+  // CustomMenu와 CustomMenuItem을 사용할 수 있게 하여
+  // CustomMenuModule을 가져오는 구성 요소 및 NgModule에서 사용합니다.
   exports: [CustomMenu, CustomMenuItem],
 })
 export class CustomMenuModule { }
 ```
 
-The `exports` property is not limited to declarations, however. An NgModule can also export any other components, directives, pipes, and NgModules that it imports.
+`exports` 속성은 선언에 한정되지 않습니다. NgModule은 또한 가져오는 다른 구성 요소, 지시자, 파이프 및 NgModule을 내보낼 수 있습니다.
 
  ```typescript
 @NgModule({
   imports: [PopupTrigger, SelectionIndicator],
   declarations: [CustomMenu, CustomMenuItem],
 
-  // Also make PopupTrigger available to any component or NgModule that imports CustomMenuModule.
+  // 또한 CustomMenuModule을 가져오는 모든 구성 요소 또는 NgModule에서 PopupTrigger를 사용할 수 있게 합니다.
   exports: [CustomMenu, CustomMenuItem, PopupTrigger],
 })
 export class CustomMenuModule { }
 ```
 
-## `NgModule` providers
+## `NgModule` 공급자
 
-Tip: See the [Dependency Injection guide](guide/di) for information on dependency injection and providers.
+팁: 종속성 주입 및 공급자에 대한 정보는 [종속성 주입 가이드](guide/di)를 참조하세요.
 
-An `NgModule` can specify `providers` for injected dependencies. These providers are available to:
-* Any standalone component, directive, or pipe that imports the NgModule, and
-* The `declarations` and `providers` of any _other_ NgModule that imports the NgModule.
+`NgModule`은 주입된 종속성에 대한 `providers`를 지정할 수 있습니다. 이러한 공급자는 다음에 사용할 수 있습니다:
+* NgModule을 가져오는 모든 독립 구성 요소, 지시자 또는 파이프
+* NgModule을 가져오는 모든 _다른_ NgModule의 `declarations` 및 `providers`
 
 ```typescript
 @NgModule({
   imports: [PopupTrigger, SelectionIndicator],
   declarations: [CustomMenu, CustomMenuItem],
 
-  // Provide the OverlayManager service
+  // OverlayManager 서비스를 제공합니다
   providers: [OverlayManager],
   /* ... */
 })
@@ -132,17 +132,17 @@ export class CustomMenuModule { }
 export class UserProfileModule { }
 ```
 
-In the example above:
-* The `CustomMenuModule` provides `OverlayManager`.
-* The `CustomMenu` and `CustomMenuItem` components can inject `OverlayManager` because they're declared in `CustomMenuModule`.
-* `UserProfile` can inject `OverlayManager` because its NgModule imports `CustomMenuModule`.
-* `UserDataClient` can inject `OverlayManager` because its NgModule imports `CustomMenuModule`.
+위의 예에서:
+* `CustomMenuModule`은 `OverlayManager`를 제공합니다.
+* `CustomMenu` 및 `CustomMenuItem` 구성 요소는 `CustomMenuModule`에 선언되었기 때문에 `OverlayManager`를 주입할 수 있습니다.
+* `UserProfile`은 자신의 NgModule이 `CustomMenuModule`을 가져오기 때문에 `OverlayManager`를 주입할 수 있습니다.
+* `UserDataClient`는 자신의 NgModule이 `CustomMenuModule`을 가져오기 때문에 `OverlayManager`를 주입할 수 있습니다.
 
-### The `forRoot` and `forChild` pattern
+### `forRoot` 및 `forChild` 패턴
 
-Some NgModules define a static `forRoot` method that accepts some configuration and returns an array of providers. The name "`forRoot`" is a convention that indicates that these providers are intended to be added exclusively to the _root_ of your application during bootstrap.
+일부 NgModule은 구성을 수락하고 공급자 배열을 반환하는 정적 `forRoot` 메서드를 정의합니다. "`forRoot`"라는 이름은 이러한 공급자가 부트스트랩 중에 애플리케이션의 _루트_에만 추가되도록 의도되었음을 나타내는 관례입니다.
 
-Any providers included in this way are eagerly loaded, increasing the JavaScript bundle size of your initial page load.
+이 방식으로 포함된 모든 공급자는 즉시 로드되며, 초기 페이지 로드의 JavaScript 번들 크기를 증가시킵니다.
 
 ```typescript
 boorstrapApplication(MyApplicationRoot, {
@@ -152,7 +152,7 @@ boorstrapApplication(MyApplicationRoot, {
 });
 ```
 
-Similarly, some NgModules may define a static `forChild` that indicates the providers are intended to be added to components within your application hierarchy.
+유사하게, 일부 NgModule은 구성 요소 내에서 추가하도록 의도된 공급자를 나타내는 정적 `forChild`를 정의할 수 있습니다.
 
 ```typescript
 @Component({
@@ -164,13 +164,13 @@ Similarly, some NgModules may define a static `forChild` that indicates the prov
 export class UserProfile { /* ... */ }
 ```
 
-## Bootstrapping an application
+## 애플리케이션 부트스트랩
 
-IMPORTANT: The Angular team recommends using [bootstrapApplication](api/platform-browser/bootstrapApplication) instead of `bootstrapModule` for all new code. Use this guide to understand existing applications bootstrapped with `@NgModule`.
+중요: Angular 팀은 모든 새로운 코드를 위해 `bootstrapModule` 대신 [bootstrapApplication](api/platform-browser/bootstrapApplication)을 사용하는 것을 권장합니다. 이 가이드는 `@NgModule`로 부트스트랩된 기존 애플리케이션을 이해하는 데 도움이 됩니다.
 
-The `@NgModule` decorator accepts an optional `bootstrap` array that may contain one or more components.
+`@NgModule` 데코레이터는 하나 이상의 구성 요소를 포함할 수 있는 선택적 `bootstrap` 배열을 수락합니다.
 
-You can use the [`bootstrapModule`](https://angular.dev/api/core/PlatformRef#bootstrapModule) method from either [`platformBrowser`](api/platform-browser/platformBrowser) or [`platformServer`](api/platform-server/platformServer) to start an Angular application. When run, this function locates any elements on the page with a CSS selector that matches the listed componet(s) and renders those components on the page.
+Angular 애플리케이션을 시작하려면 [`platformBrowser`](api/platform-browser/platformBrowser) 또는 [`platformServer`](api/platform-server/platformServer)에서 [`bootstrapModule`](https://angular.dev/api/core/PlatformRef#bootstrapModule) 메서드를 사용할 수 있습니다. 이 함수가 실행되면 페이지에서 나열된 구성 요소의 CSS 선택자와 일치하는 요소를 찾고 해당 구성 요소를 페이지에 렌더링합니다.
 
 ```typescript
 import {platformBrowser} from '@angular/platform-browser';
@@ -183,6 +183,6 @@ export class MyApplicationModule { }
 platformBrowser().bootstrapModule(MyApplicationModule);
 ```
 
-Components listed in `bootstrap` are automatically included in the NgModule's declarations.
+`bootstrap`에 나열된 구성 요소는 NgModule의 선언에 자동으로 포함됩니다.
 
-When you bootstrap an application from an NgModule, the collected `providers` of this module and all of the `providers` of its `imports` are eagerly loaded and available to inject for the entire application.
+NgModule에서 애플리케이션을 부트스트랩할 때 이 모듈의 수집된 `providers`와 모든 `imports`의 `providers`가 즉시 로드되고 애플리케이션 전체에 주입할 수 있게 됩니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/performance/overview.md b/adev/src/content/guide/performance/overview.md
index 9601e01fa49b..fbb435e204a0 100644
--- a/adev/src/content/guide/performance/overview.md
+++ b/adev/src/content/guide/performance/overview.md
@@ -1,11 +1,11 @@
-<docs-decorative-header title="Server-side & hybrid rendering" imgSrc="adev/src/assets/images/overview.svg"> <!-- markdownlint-disable-line -->
-Learn about different ways you can optimize the performance of your application with different rendering strategies.
+<docs-decorative-header title="서버 측 및 하이브리드 렌더링" imgSrc="adev/src/assets/images/overview.svg"> <!-- markdownlint-disable-line -->
+다양한 렌더링 전략을 사용하여 애플리케이션의 성능을 최적화할 수 있는 방법에 대해 알아보세요.
 </docs-decorative-header>
 
-One of the top priorities of any developer is ensuring that their application is as performant as possible. These guides are here to help you follow best practices for building performant applications by taking advantage of different rendering strategies.
+모든 개발자의 최우선 과제 중 하나는 애플리케이션이 가능한 한 성능이 뛰어나도록 하는 것입니다. 이 가이드들은 다양한 렌더링 전략을 활용하여 성능이 뛰어난 애플리케이션을 구축하기 위한 모범 사례를 따르는 데 도움을 주기 위해 마련되었습니다.
 
-| Guides Types                              | Description                                                                                                |
-| :---------------------------------------- | :--------------------------------------------------------------------------------------------------------- |
-| [Server and hybrid rendering](/guide/ssr) | Learn how to leverage rendering pages on the server to improve load times.                                 |
-| [Hydration](/guide/hydration)             | A process to improve application performance by restoring its state after server-side rendering and reusing existing DOM structure as much as possible. |
-| [Incremental Hydration](/guide/incremental-hydration) | Incremental hydration is an advanced type of hydration that can leave sections of your application dehydrated and incrementally trigger hydration of those sections as they are needed. |
+| 가이드 유형                                   | 설명                                                                                                     |
+| :------------------------------------------- | :------------------------------------------------------------------------------------------------------ |
+| [서버 및 하이브리드 렌더링](/guide/ssr)       | 로드 시간을 개선하기 위해 서버에서 페이지를 렌더링하는 방법을 알아보세요.                              |
+| [수화(hydration)](/guide/hydration)          | 서버 측 렌더링 이후 애플리케이션의 상태를 복원하고 가능한 한 기존 DOM 구조를 재사용하여 성능을 향상시키는 프로세스입니다. |
+| [점진적 수화(incremental hydration)](/guide/incremental-hydration) | 점진적 수화는 애플리케이션의 일부 섹션을 탈수 상태로 두고 필요할 때마다 해당 섹션의 수화를 점진적으로 트리거할 수 있는 고급 유형의 수화입니다. |
\ No newline at end of file
diff --git a/adev/src/content/guide/pipes/change-detection.md b/adev/src/content/guide/pipes/change-detection.md
index 6edabceaa033..466e1a139ef9 100644
--- a/adev/src/content/guide/pipes/change-detection.md
+++ b/adev/src/content/guide/pipes/change-detection.md
@@ -1,7 +1,7 @@
-# Change detection with pipes
+# 파이프를 사용한 변경 감지
 
-Pipes are often used with data-bound values that might change based on user actions.
-If the data is a primitive input value, such as `String` or `Number`, or an object reference as input, such as `Date` or `Array`, Angular executes the pipe whenever it detects a change for the value.
+파이프는 사용자 행동에 따라 변경될 수 있는 데이터 바인딩 값과 함께 자주 사용됩니다.
+데이터가 `String`이나 `Number`와 같은 기본 입력 값이거나 `Date`나 `Array`와 같은 객체 참조일 경우, Angular는 값의 변화를 감지할 때마다 파이프를 실행합니다.
 
 <docs-code-multifile path="adev/src/content/examples/pipes/src/app/power-booster.component.ts">
   <docs-code header="src/app/exponential-strength.pipe.ts" path="adev/src/content/examples/pipes/src/app/exponential-strength.pipe.ts"
@@ -9,106 +9,106 @@ If the data is a primitive input value, such as `String` or `Number`, or an obje
   <docs-code header="src/app/power-booster.component.ts" path="adev/src/content/examples/pipes/src/app/power-booster.component.ts"/>
 </docs-code-multifile>
 
-The `exponentialStrength` pipe executes every time the user changes the value or the exponent. See the highlighted line above.
+`exponentialStrength` 파이프는 사용자가 값을 변경하거나 지수를 변경할 때마다 실행됩니다. 위의 강조 표시된 줄을 참조하세요.
 
-Angular detects each change and immediately runs the pipe.
-This is fine for primitive input values.
-However, if you change something *inside* a composite object (such as the month of a date, an element of an array, or an object property), you need to understand how change detection works, and how to use an `impure` pipe.
+Angular는 각 변화를 감지하고 즉시 파이프를 실행합니다.
+이는 기본 입력 값에 대해서는 괜찮습니다.
+하지만 복합 객체(예: 날짜의 월, 배열의 요소 또는 객체 속성) 내부의 무언가를 변경하면, 변경 감지가 어떻게 작동하는지와 `impure` 파이프를 사용하는 방법을 이해해야 합니다.
 
-## How change detection works
+## 변경 감지가 작동하는 방식
 
-Angular looks for changes to data-bound values in a change detection process that runs after every DOM event: every keystroke, mouse move, timer tick, and server response.
-The following example, which doesn't use a pipe, demonstrates how Angular uses its default change detection strategy to monitor and update its display of every hero in the `heroes` array.
-The example tabs show the following:
+Angular는 DOM 이벤트 후에 실행되는 변경 감지 프로세스에서 데이터 바인딩 값의 변화를 찾습니다: 각 키 입력, 마우스 이동, 타이머 틱 및 서버 응답.
+다음 예제는 파이프를 사용하지 않고 Angular가 기본 변경 감지 전략을 사용하여 `heroes` 배열의 모든 영웅을 모니터링하고 업데이트하는 방법을 보여줍니다.
+예제 탭은 다음과 같습니다:
 
-| Files                               | Details |
+| 파일                                | 세부사항 |
 |:---                                 |:---     |
-| `flying-heroes.component.html (v1)` | The `*ngFor` repeater displays the hero names.                     |
-| `flying-heroes.component.ts (v1)`   | Provides heroes, adds heroes into the array, and resets the array. |
+| `flying-heroes.component.html (v1)` | `*ngFor` 반복기가 영웅 이름을 표시합니다.                     |
+| `flying-heroes.component.ts (v1)`   | 영웅을 제공하고, 배열에 영웅을 추가하고, 배열을 재설정합니다. |
 
 <docs-code-multifile>
     <docs-code header="src/app/flying-heroes.component.html (v1)" path="adev/src/content/examples/pipes/src/app/flying-heroes.component.html" visibleRegion="template-1"/>
     <docs-code header="src/app/flying-heroes.component.ts (v1)" path="adev/src/content/examples/pipes/src/app/flying-heroes.component.ts" visibleRegion="v1"/>
 </docs-code-multifile>
 
-Angular updates the display every time the user adds a hero.
-If the user clicks the **Reset** button, Angular replaces `heroes` with a new array of the original heroes and updates the display.
-If you add the ability to remove or change a hero, Angular would detect those changes and update the display as well.
+Angular는 사용자가 영웅을 추가할 때마다 디스플레이를 업데이트합니다.
+사용자가 **Reset** 버튼을 클릭하면 Angular는 `heroes`를 원래 영웅의 새로운 배열로 교체하고 디스플레이를 업데이트합니다.
+영웅을 제거하거나 변경할 능력을 추가하면, Angular는 이러한 변화를 감지하고 디스플레이를 업데이트합니다.
 
-However, executing a pipe to update the display with every change would slow down your application's performance.
-So Angular uses a faster change-detection algorithm for executing a pipe, as described in the next section.
+하지만 매번 변경할 때마다 디스플레이를 업데이트하기 위해 파이프를 실행하면 애플리케이션 성능이 저하됩니다.
+따라서 Angular는 다음 섹션에서 설명한 대로 파이프를 실행하는 데 더 빠른 변경 감지 알고리즘을 사용합니다.
 
-## Detecting pure changes to primitives and object references
+## 원시 값과 객체 참조에 대한 순수 변경 감지
 
-By default, pipes are defined as *pure* so that Angular executes the pipe only when it detects a *pure change* to the input value or parameters.
-A pure change is either a change to a primitive input value \(such as `String`, `Number`, `Boolean`, or `Symbol`\), or a changed object reference \(such as `Date`, `Array`, `Function`, or `Object`\).
+기본적으로, 파이프는 *순수*로 정의되어 있으며, Angular는 입력 값이나 매개변수에 대한 *순수 변경*을 감지할 때만 파이프를 실행합니다.
+순수 변경이란 기본 입력 값(예: `String`, `Number`, `Boolean` 또는 `Symbol`)의 변경이거나 변경된 객체 참조(예: `Date`, `Array`, `Function` 또는 `Object`)입니다.
 
-A pure pipe must use a pure function, which is one that processes inputs and returns values without side effects.
-In other words, given the same input, a pure function should always return the same output.
+순수 파이프는 부작용 없이 입력을 처리하고 값을 반환하는 순수 함수를 사용해야 합니다.
+즉, 동일한 입력이 주어졌을 때, 순수 함수는 항상 동일한 출력을 반환해야 합니다.
 
-With a pure pipe, Angular ignores changes within objects and arrays because checking a primitive value or object reference is much faster than performing a deep check for differences within objects.
-Angular can quickly determine if it can skip executing the pipe and updating the view.
+순수 파이프를 사용하면 Angular는 객체와 배열 내의 변경 사항을 무시합니다. 왜냐하면 기본 값이나 객체 참조를 확인하는 것이 객체 내의 차이를 깊이 검사하는 것보다 훨씬 빠르기 때문입니다.
+Angular는 파이프를 실행하고 뷰를 업데이트하는 것을 건너뛸 수 있는지를 빠르게 결정할 수 있습니다.
 
-However, a pure pipe with an array as input might not work the way you want.
-To demonstrate this issue, change the previous example to filter the list of heroes to just those heroes who can fly.
+그러나 배열을 입력으로 가진 순수 파이프는 원하는 방식으로 작동하지 않을 수 있습니다.
+이 문제를 보여주기 위해, 이전 예제를 변경하여 비행할 수 있는 영웅 목록으로 필터링합니다.
 
-For this, consider we use the `FlyingHeroesPipe` in the `*ngFor` repeater as shown in the following code.
-The tabs for the example show the following:
+이를 위해 다음 코드에서 `*ngFor` 반복기에 `FlyingHeroesPipe`를 사용한다고 가정해보겠습니다.
+예제 탭은 다음과 같습니다:
 
-| Files                          | Details |
-|:---                            |:---     |
-| flying-heroes.component.html   | Template with the new pipe used. |
-| flying-heroes.pipe.ts          | File with custom pipe that filters flying heroes. |
+| 파일                             | 세부사항 |
+|:---                              |:---     |
+| flying-heroes.component.html      | 새 파이프가 사용된 템플릿. |
+| flying-heroes.pipe.ts             | 비행 영웅을 필터링하는 사용자 정의 파이프가 있는 파일. |
 
 <docs-code-multifile>
     <docs-code header="src/app/flying-heroes.component.html" path="adev/src/content/examples/pipes/src/app/flying-heroes.component.html" visibleRegion="template-flying-heroes"/>
     <docs-code header="src/app/flying-heroes.pipe.ts" path="adev/src/content/examples/pipes/src/app/flying-heroes.pipe.ts" visibleRegion="pure"/>
 </docs-code-multifile>
 
-The application now shows unexpected behavior: When the user adds flying heroes, none of them appear under "Heroes who fly."
-This happens because the code that adds a hero does so by pushing it onto the `heroes` array that is used as input for the `flyingHeroes` pipe.
+이제 애플리케이션은 예상치 못한 동작을 보여줍니다: 사용자가 비행 영웅을 추가할 때 "비행하는 영웅들" 아래에 아무것도 나타나지 않습니다.
+이는 영웅을 추가하는 코드가 영웅을 `flyingHeroes` 파이프의 입력으로 사용되는 `heroes` 배열에 푸시하기 때문입니다.
 
 <docs-code header="src/app/flying-heroes.component.ts" path="adev/src/content/examples/pipes/src/app/flying-heroes.component.ts" visibleRegion="push"/>
 
-The change detector ignores changes within elements of an array, so the pipe doesn't run.
-The reason Angular ignores the changed array element is that the *reference* to the array hasn't changed.
-Because the array is the same, Angular does not update the display.
+변경 감지기는 배열의 요소 내의 변경을 무시하므로 파이프가 실행되지 않습니다.
+Angular가 변경된 배열 요소를 무시하는 이유는 배열에 대한 *참조*가 변경되지 않았기 때문입니다.
+배열이 동일하기 때문에 Angular는 디스플레이를 업데이트하지 않습니다.
 
-One way to get the behavior you want is to change the object reference itself.
-Replace the array with a new array containing the newly changed elements, and then input the new array to the pipe.
-In the preceding example, create an array with the new hero appended, and assign that to `heroes`.
-Angular detects the change in the array reference and executes the pipe.
+원하는 동작을 얻는 한 가지 방법은 객체 참조 자체를 변경하는 것입니다.
+배열을 새로 변경된 요소가 포함된 새로운 배열로 교체한 다음, 새 배열을 파이프에 입력합니다.
+이전 예제에서는 새 영웅이 추가된 배열을 만들고 이를 `heroes`에 할당합니다.
+Angular는 배열 참조의 변화를 감지하고 파이프를 실행합니다.
 
-To summarize, if you mutate the input array, the pure pipe doesn't execute.
-If you *replace* the input array, the pipe executes and the display is updated.
-As an alternative, use an *impure* pipe to detect changes within composite objects such as arrays, as described in the next section.
+요약하자면, 입력 배열을 변형하면 순수 파이프가 실행되지 않습니다.
+입력 배열을 *교체*하면, 파이프가 실행되고 디스플레이가 업데이트됩니다.
+대안으로, 다음 섹션에서 설명할 배열과 같은 복합 객체 내의 변경을 감지하려면 *impure* 파이프를 사용하십시오.
 
-## Detecting impure changes within composite objects
+## 복합 객체 내의 불순한 변경 감지
 
-To execute a custom pipe after a change *within* a composite object, such as a change to an element of an array, you need to define your pipe as `impure` to detect impure changes.
-Angular executes an impure pipe every time it detects a change (e.g. every keystroke or mouse event).
+복합 객체 내부의 요소에 대한 변경, 예를 들어 배열의 요소에 대한 변경 후에 사용자 정의 파이프를 실행하려면 불순한 변경을 감지하기 위해 파이프를 `impure`로 정의해야 합니다.
+Angular는 변경이 감지될 때마다 모든 비순수 파이프를 실행합니다(예: 각 키 입력이나 마우스 이벤트).
 
-IMPORTANT: While an impure pipe can be useful, be careful using one.
-A long-running impure pipe could dramatically slow down your application.
+중요: 불순한 파이프는 유용할 수 있지만 주의해서 사용해야 합니다.
+장시간 실행되는 불순한 파이프는 애플리케이션을 극적으로 느리게 할 수 있습니다.
 
-Make a pipe impure by setting its `pure` flag to `false`:
+파이프의 `pure` 플래그를 `false`로 설정하여 파이프를 불순하게 만듭니다:
 
 <docs-code header="src/app/flying-heroes.pipe.ts" path="adev/src/content/examples/pipes/src/app/flying-heroes.pipe.ts"
            visibleRegion="pipe-decorator" highlight="[19]"/>
 
-The following code shows the complete implementation of `FlyingHeroesImpurePipe`, which extends `FlyingHeroesPipe` to inherit its characteristics.
-The example shows that you don't have to change anything else—the only difference is setting the `pure` flag as `false` in the pipe metadata.
+다음 코드는 `FlyingHeroesPipe`의 특성을 상속하는 `FlyingHeroesImpurePipe`의 전체 구현을 보여줍니다.
+예제는 다른 것을 변경할 필요가 없음을 보여줍니다. 유일한 차이는 파이프 메타데이터에서 `pure` 플래그를 `false`로 설정하는 것입니다.
 
 <docs-code-multifile>
     <docs-code header="src/app/flying-heroes.pipe.ts (FlyingHeroesImpurePipe)" path="adev/src/content/examples/pipes/src/app/flying-heroes.pipe.ts" visibleRegion="impure"/>
     <docs-code header="src/app/flying-heroes.pipe.ts (FlyingHeroesPipe)" path="adev/src/content/examples/pipes/src/app/flying-heroes.pipe.ts" visibleRegion="pure"/>
 </docs-code-multifile>
 
-`FlyingHeroesImpurePipe` is a reasonable candidate for an impure pipe because the `transform` function is trivial and fast:
+`FlyingHeroesImpurePipe`는 `transform` 함수가 사소하고 빠르기 때문에 불순한 파이프의 적절한 후보입니다:
 
 <docs-code header="src/app/flying-heroes.pipe.ts (filter)" path="adev/src/content/examples/pipes/src/app/flying-heroes.pipe.ts" visibleRegion="filter"/>
 
-You can derive a `FlyingHeroesImpureComponent` from `FlyingHeroesComponent`.
-As shown in the following code, only the pipe in the template changes.
+`FlyingHeroesComponent`에서 `FlyingHeroesImpureComponent`를 파생할 수 있습니다.
+다음 코드에서 보여주듯이, 템플릿에서 파이프만 변경됩니다.
 
-<docs-code header="src/app/flying-heroes-impure.component.html (excerpt)" path="adev/src/content/examples/pipes/src/app/flying-heroes-impure.component.html" visibleRegion="template-flying-heroes"/>
+<docs-code header="src/app/flying-heroes-impure.component.html (excerpt)" path="adev/src/content/examples/pipes/src/app/flying-heroes-impure.component.html" visibleRegion="template-flying-heroes"/>
\ No newline at end of file
diff --git a/adev/src/content/guide/pipes/overview.md b/adev/src/content/guide/pipes/overview.md
index 60380d7c74eb..13433d8eed46 100644
--- a/adev/src/content/guide/pipes/overview.md
+++ b/adev/src/content/guide/pipes/overview.md
@@ -1,27 +1,27 @@
-# Understanding Pipes
+# 파이프 이해하기
 
-Use pipes to transform strings, currency amounts, dates, and other data for display.
+문자열, 통화 금액, 날짜 및 기타 데이터를 표시하기 위해 파이프를 사용하세요.
 
-## What is a pipe
+## 파이프란 무엇인가
 
-Pipes are simple functions to use in templates to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once.
-For example, you would use a pipe to show a date as **April 15, 1988** rather than the raw string format.
+파이프는 템플릿에서 입력 값을 받고 변환된 값을 반환하는 간단한 함수입니다. 파이프는 애플리케이션 전역에서 사용할 수 있으므로 각 파이프를 한 번만 선언하면 됩니다.
+예를 들어, 날짜를 원시 문자열 형식이 아닌 **1988년 4월 15일**로 표시하기 위해 파이프를 사용할 수 있습니다.
 
-You can create your own custom pipes to expose reusable transformations in templates.
+사용할 수 있는 재사용 가능한 변환을 템플릿에 노출하기 위해 자신만의 사용자 정의 파이프를 만들 수 있습니다.
 
-## Built-in pipes
+## 내장 파이프
 
-Angular provides built-in pipes for typical data transformations, including transformations for internationalization (i18n), which use locale information to format data.
-The following are commonly used built-in pipes for data formatting:
+Angular는 국제화(i18n)를 포함한 일반적인 데이터 변환을 위해 내장 파이프를 제공합니다. 이는 데이터 형식을 지정하는 데 로케일 정보를 사용합니다.
+다음은 데이터 형식 지정에 일반적으로 사용되는 내장 파이프입니다:
 
-- [`DatePipe`](api/common/DatePipe): Formats a date value according to locale rules.
-- [`UpperCasePipe`](api/common/UpperCasePipe): Transforms text to all upper case.
-- [`LowerCasePipe`](api/common/LowerCasePipe): Transforms text to all lower case.
-- [`CurrencyPipe`](api/common/CurrencyPipe): Transforms a number to a currency string, formatted according to locale rules.
-- [`DecimalPipe`](/api/common/DecimalPipe): Transforms a number into a string with a decimal point, formatted according to locale rules.
-- [`PercentPipe`](api/common/PercentPipe): Transforms a number to a percentage string, formatted according to locale rules.
-- [`AsyncPipe`](api/common/AsyncPipe): Subscribe and unsubscribe to an asynchronous source such as an observable.
-- [`JsonPipe`](api/common/JsonPipe): Display a component object property to the screen as JSON for debugging.
+- [`DatePipe`](api/common/DatePipe): 로케일 규칙에 따라 날짜 값을 형식화합니다.
+- [`UpperCasePipe`](api/common/UpperCasePipe): 텍스트를 모두 대문자로 변환합니다.
+- [`LowerCasePipe`](api/common/LowerCasePipe): 텍스트를 모두 소문자로 변환합니다.
+- [`CurrencyPipe`](api/common/CurrencyPipe): 숫자를 로케일 규칙에 따라 형식화된 통화 문자열로 변환합니다.
+- [`DecimalPipe`](/api/common/DecimalPipe): 로케일 규칙에 따라 형식화된 소수점이 있는 문자열로 숫자를 변환합니다.
+- [`PercentPipe`](api/common/PercentPipe): 숫자를 로케일 규칙에 따라 형식화된 백분율 문자열로 변환합니다.
+- [`AsyncPipe`](api/common/AsyncPipe): 옵저버블과 같은 비동기 소스에 구독하고 구독 취소합니다.
+- [`JsonPipe`](api/common/JsonPipe): 디버깅을 위해 컴포넌트 객체 속성을 JSON 형식으로 화면에 표시합니다.
 
-Note: For a complete list of built-in pipes, see the [pipes API documentation](/api?type=pipe "Pipes API reference summary").
-To learn more about using pipes for internationalization (i18n) efforts, see [formatting data based on locale](guide/i18n/format-data-locale).
+참고: 내장 파이프의 전체 목록은 [파이프 API 문서](/api?type=pipe "Pipes API reference summary")를 참조하세요.
+국제화(i18n) 작업을 위해 파이프를 사용하는 방법에 대해 알아보려면 [로케일에 따라 데이터 형식 지정](guide/i18n/format-data-locale)을 참고하세요.
\ No newline at end of file
diff --git a/adev/src/content/guide/pipes/precedence.md b/adev/src/content/guide/pipes/precedence.md
index 4184a36a3b80..5baa860c7a4b 100644
--- a/adev/src/content/guide/pipes/precedence.md
+++ b/adev/src/content/guide/pipes/precedence.md
@@ -1,28 +1,28 @@
-# Pipe precedence in template expressions
+# 템플릿 표현식에서의 파이프 우선 순위
 
-Sometimes you want to choose between two values, based on some condition, before passing the choice to the pipe.
-You could use the JavaScript ternary operator (`?:`) in the template to make that choice.
+가끔 어떤 조건에 따라 두 값 중 하나를 선택한 다음, 선택한 값을 파이프로 전달하고 싶을 때가 있습니다.
+이럴 때 템플릿에서 자바스크립트 삼항 연산자(`?:`)를 사용하여 선택할 수 있습니다.
 
-Beware! The pipe operator has a higher precedence than the JavaScript ternary operator (`?:`).
+주의하세요! 파이프 연산자는 자바스크립트 삼항 연산자(`?:`)보다 높은 우선 순위를 가집니다.
 
-If you simply write the expression as if it were evaluated left-to-right, you might be surprised by the result. For example,
+왼쪽에서 오른쪽으로 평가되는 것처럼 표현식을 단순히 작성하면 결과에 놀랄 수 있습니다. 예를 들어,
 
 ```ts
 condition ? a : b | pipe
 ```
 
-is parsed as
+다음과 같이 파싱됩니다.
 
 ```ts
 condition ? a : (b | pipe)
 ```
 
-The value of `b` passes through `pipe`; the value of `a` *will not*.
+이 경우 `b`의 값이 `pipe`를 통과하지만, `a`의 값은 *통과하지 않습니다*.
 
-If you want the pipe to apply to the result of the ternary expression, wrap the entire expression in parentheses. For example,
+삼항 표현식의 결과에 파이프를 적용하려면 전체 표현식을 괄호로 감싸야 합니다. 예를 들어,
 
 ```ts
 (condition ? a : b) | pipe
 ```
 
-In general, you should always use parentheses to be sure Angular evaluates the expression as you intend.
+일반적으로 Angular가 여러분이 의도한 대로 표현식을 평가하도록 하려면 항상 괄호를 사용하는 것이 좋습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/pipes/template.md b/adev/src/content/guide/pipes/template.md
index 21fe89dbe0ab..c6ee82e70e68 100644
--- a/adev/src/content/guide/pipes/template.md
+++ b/adev/src/content/guide/pipes/template.md
@@ -1,13 +1,13 @@
-# Using a pipe in a template
+# 템플릿에서 파이프 사용하기
 
-To apply a pipe, use the pipe operator (`|`) within a template expression as shown in the following code example.
+파이프를 적용하려면, 다음 코드 예제와 같이 템플릿 표현식 내에서 파이프 연산자(`|`)를 사용합니다.
 
 <docs-code language="angular-html" header="app.component.html">
-<p>The hero's birthday is {{ birthday | date }}</p>
+<p>영웅의 생일은 {{ birthday | date }}</p>
 </docs-code>
 
-The component's `birthday` value flows through the pipe operator (`|`) to the [`DatePipe`](api/common/DatePipe) whose pipe name is `date`.
-The pipe renders the date in the default format like **Apr 07, 2023**.
+컴포넌트의 `birthday` 값은 파이프 연산자(`|`)를 통해 [`DatePipe`](api/common/DatePipe)로 전달되며, 그 파이프 이름은 `date`입니다.
+파이프는 날짜를 기본 형식으로 **2023년 4월 07일**과 같이 렌더링합니다.
 
 <docs-code header="app.component.ts" preview>
 import { Component } from '@angular/core';
@@ -22,33 +22,33 @@ export class AppComponent {
 }
 </docs-code>
 
-## Additional parameters for pipes
+## 파이프에 대한 추가 매개변수
 
-Pipes can take additional parameters that configure the transformation. Parameters can be optional or required.
+파이프는 변환을 구성하는 추가 매개변수를 받을 수 있습니다. 매개변수는 선택적일 수도 있고 필수일 수도 있습니다.
 
-For example, the `date` pipe takes optional parameters that control the date's display format.
-To specify the parameter, follow the pipe name with a colon (`:`) and the parameter value (the format).
+예를 들어, `date` 파이프는 날짜의 표시 형식을 제어하는 선택적 매개변수를 받습니다.
+매개변수를 지정하려면, 파이프 이름 뒤에 콜론(`:`)과 매개변수 값(형식)을 따릅니다.
 
 <docs-code language="angular-html" header="app.component.html">
-<p>The hero's birthday is in {{ birthday | date:'yyyy' }}</p>
+<p>영웅의 생일은 {{ birthday | date:'yyyy' }}</p>
 </docs-code>
 
-Pipes can also take multiple parameters. You can pass multiple parameters by separating these via colons (`:`).
-For example, the `date` pipe accepts a second optional parameter for controlling the timezone.
+파이프는 또한 여러 매개변수를 받을 수 있습니다. 매개변수를 콜론(`:`)으로 구분하여 여러 매개변수를 전달할 수 있습니다.
+예를 들어, `date` 파이프는 시간대를 제어하기 위한 두 번째 선택적 매개변수를 허용합니다.
 
 <docs-code header="app.component.html">
-<p>The current time is: {{ currentTime | date:'hh:mm':'UTC' }}</p>
+<p>현재 시간은: {{ currentTime | date:'hh:mm':'UTC' }}</p>
 </docs-code>
 
-This will display the current time (like `10:53`) in the `UTC` timezone.
+이 코드는 `UTC` 시간대에서 현재 시간(예: `10:53`)을 표시합니다.
 
-## Chaining pipes
+## 파이프 연결하기
 
-You can connect multiple pipes so that the output of one pipe becomes the input to the next.
+여러 파이프를 연결하여 한 파이프의 출력이 다음 파이프의 입력이 되도록 할 수 있습니다.
 
-The following example passes a date to the `DatePipe` and then forwards the result to the [`UpperCasePipe`](api/common/UpperCasePipe 'API reference') pipe.
+다음 예제는 날짜를 `DatePipe`로 전달하고 결과를 [`UpperCasePipe`](api/common/UpperCasePipe 'API reference') 파이프로 전달합니다.
 
 <docs-code language="angular-html" header="app.component.html">
-<p>The hero's birthday is {{ birthday | date }}</p>
-<p>The hero's birthday is in {{ birthday | date:'yyyy' | uppercase }}</p>
-</docs-code>
+<p>영웅의 생일은 {{ birthday | date }}</p>
+<p>영웅의 생일은 {{ birthday | date:'yyyy' | uppercase }}</p>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/guide/pipes/transform-data.md b/adev/src/content/guide/pipes/transform-data.md
index 545275e43e6f..1f73ccd17247 100644
--- a/adev/src/content/guide/pipes/transform-data.md
+++ b/adev/src/content/guide/pipes/transform-data.md
@@ -1,18 +1,18 @@
-# Custom pipes for new transforms
+# 새로운 변환을 위한 커스텀 파이프
 
-Create custom pipes to encapsulate transformations that are not provided with the built-in pipes.
-Then, use your custom pipe in template expressions, the same way you use built-in pipes—to transform input values to output values for display.
+내장 파이프에서 제공되지 않는 변환을 캡슐화하기 위해 커스텀 파이프를 생성합니다.
+그런 다음, 내장 파이프를 사용하는 것과 같은 방식으로 템플릿 표현식에서 커스텀 파이프를 사용하여 입력 값을 화면에 표시할 출력 값으로 변환합니다.
 
-## Marking a class as a pipe
+## 클래스를 파이프로 표시하기
 
-To mark a class as a pipe and supply configuration metadata, apply the `@Pipe` to the class.
+클래스를 파이프로 표시하고 구성 메타데이터를 제공하려면 `@Pipe`를 클래스에 적용합니다.
 
-Use UpperCamelCase (the general convention for class names) for the pipe class name, and camelCase for the corresponding `name` string.
-Do not use hyphens in the `name`.
+파이프 클래스 이름에는 UpperCamelCase(클래스 이름의 일반적인 규칙)를 사용하고, 해당하는 `name` 문자열에는 camelCase를 사용합니다.
+`name`에 하이픈을 사용하지 마십시오.
 
-For details and more examples, see [Pipe names](/style-guide#pipe-names "Pipe names in the Angular coding style guide").
+자세한 내용과 더 많은 예시는 [Pipe names](/style-guide#pipe-names "Angular 코딩 스타일 가이드의 파이프 이름")를 참조하십시오.
 
-Use `name` in template expressions as you would for a built-in pipe.
+내장 파이프에 대해 사용하는 것처럼 템플릿 표현식에서 `name`을 사용합니다.
 
 ```ts
 import { Pipe } from '@angular/core';
@@ -23,11 +23,11 @@ import { Pipe } from '@angular/core';
 export class GreetPipe {}
 ```
 
-## Using the PipeTransform interface
+## PipeTransform 인터페이스 사용하기
 
-Implement the [`PipeTransform`](/api/core/PipeTransform "API reference for PipeTransform") interface in your custom pipe class to perform the transformation.
+변환을 수행하기 위해 커스텀 파이프 클래스에서 [`PipeTransform`](/api/core/PipeTransform "API reference for PipeTransform") 인터페이스를 구현합니다.
 
-Angular invokes the `transform` method with the value of a binding as the first argument, and any parameters as the second argument in list form, and returns the transformed value.
+Angular는 바인딩의 값을 첫 번째 인수로 사용하여 `transform` 메서드를 호출하고, 두 번째 인수는 리스트 형식으로 모든 매개변수를 전달하며, 변환된 값을 반환합니다.
 
 ```ts
 import { Pipe, PipeTransform } from '@angular/core';
@@ -42,20 +42,20 @@ export class GreetPipe implements PipeTransform {
 }
 ```
 
-## Example: Transforming a value exponentially
+## 예: 값을 지수적으로 변환하기
 
-In a game, you might want to implement a transformation that raises a value exponentially to increase a hero's power.
-For example, if the hero's score is 2, boosting the hero's power exponentially by 10 produces a score of 1024 (`2**10`).
-Use a custom pipe for this transformation.
+게임에서 영웅의 힘을 증가시키기 위해 값을 지수적으로 증가시키는 변환을 구현하고 싶을 수 있습니다.
+예를 들어, 영웅의 점수가 2일 때, 영웅의 힘을 10으로 지수적으로 증가시키면 1024의 점수가 생성됩니다(`2**10`).
+이 변환을 위해 커스텀 파이프를 사용하십시오.
 
-The following code example shows two component definitions:
+다음 코드 예시는 두 개의 컴포넌트 정의를 보여줍니다:
 
-| Files                          | Details |
-|:---                            |:---     |
-| `exponential-strength.pipe.ts` | Defines a custom pipe named `exponentialStrength` with the `transform` method that performs the transformation. It defines an argument to the `transform` method \(`exponent`\) for a parameter passed to the pipe. |
-| `power-booster.component.ts`   | Demonstrates how to use the pipe, specifying a value \(`2`\) and the exponent parameter \(`10`\).                                                                                                                   |
+| 파일                           | 세부 사항 |
+|:---                           |:---     |
+| `exponential-strength.pipe.ts` | 변환을 수행하는 `transform` 메서드를 가진 `exponentialStrength`라는 커스텀 파이프를 정의합니다. 파이프에 전달된 매개변수에 대한 인수(`exponent`)를 `transform` 메서드에 정의합니다. |
+| `power-booster.component.ts`   | 값을 지정하고(`2`), 지수 매개변수(`10`)를 지정하여 파이프를 사용하는 방법을 설명합니다. |
 
 <docs-code-multifile>
   <docs-code header="src/app/exponential-strength.pipe.ts" language="ts" path="adev/src/content/examples/pipes/src/app/exponential-strength.pipe.ts"/>
   <docs-code header="src/app/power-booster.component.ts" language="ts" path="adev/src/content/examples/pipes/src/app/power-booster.component.ts"/>
-</docs-code-multifile>
+</docs-code-multifile>
\ No newline at end of file
diff --git a/adev/src/content/guide/pipes/unwrapping-data-observables.md b/adev/src/content/guide/pipes/unwrapping-data-observables.md
index bdb3d802e36d..7163de96f86a 100644
--- a/adev/src/content/guide/pipes/unwrapping-data-observables.md
+++ b/adev/src/content/guide/pipes/unwrapping-data-observables.md
@@ -1,15 +1,15 @@
-# Unwrapping data from an observable
+# Observable에서 데이터 언래핑하기
 
-Observables let you pass messages between parts of your application.
-You can use observables for event handling, asynchronous programming, and handling multiple values.
-Observables can deliver single or multiple values of any type, either synchronously (as a function delivers a value to its caller) or asynchronously on a schedule.
+Observable은 애플리케이션의 여러 부분 간에 메시지를 전달할 수 있게 해줍니다.
+이벤트 처리, 비동기 프로그래밍, 여러 값 처리를 위해 observable을 사용할 수 있습니다.
+Observable은 어떤 유형의 단일 또는 다중 값을 동기적으로(함수가 호출자에게 값을 전달하는 방식으로) 또는 비동기적으로 일정에 따라 제공할 수 있습니다.
 
-Use the built-in [`AsyncPipe`](api/common/AsyncPipe "API description of AsyncPipe") to accept an observable as input and subscribe to the input automatically.
-Without this pipe, your component code would have to subscribe to the observable to consume its values, extract the resolved values, expose them for binding, and unsubscribe when the observable is destroyed in order to prevent memory leaks.
-`AsyncPipe` is a pipe that saves boilerplate code in your component to maintain the subscription and keep delivering values from that observable as they arrive.
+내장된 [`AsyncPipe`](api/common/AsyncPipe "API description of AsyncPipe")를 사용하여 observable을 입력으로 받아들이고 입력을 자동으로 구독하십시오.
+이 파이프가 없으면 구성 요소 코드는 observable의 값을 사용하기 위해 구독하고, 해결된 값을 추출하고, 바인딩을 위해 노출하며, 메모리 누수를 방지하기 위해 observable이 파괴될 때 구독을 취소해야 합니다.
+`AsyncPipe`는 구독을 유지하고 observable에서 값을 도착할 때마다 계속 전달하는 데 필요한 보일러플레이트 코드를 구성 요소에서 저장하는 파이프입니다.
 
-The following code example binds an observable of message strings (`message$`) to a view with the `async` pipe.
+다음 코드 예제는 메시지 문자열의 observable(`message$`)을 `async` 파이프가 있는 뷰에 바인딩합니다.
 
 <!-- TODO: Enable preview if this example does not depend on Zone/ or if we run the example with Zone. -->
 <docs-code header="src/app/hero-async-message.component.ts"
-           path="adev/src/content/examples/pipes/src/app/hero-async-message.component.ts" />
+           path="adev/src/content/examples/pipes/src/app/hero-async-message.component.ts" />
\ No newline at end of file
diff --git a/adev/src/content/guide/routing/common-router-tasks.md b/adev/src/content/guide/routing/common-router-tasks.md
index 57f39c217c56..d7bce2c18b05 100644
--- a/adev/src/content/guide/routing/common-router-tasks.md
+++ b/adev/src/content/guide/routing/common-router-tasks.md
@@ -1,24 +1,24 @@
-# Common Routing Tasks
+# 공통 라우팅 작업
 
-This topic describes how to implement many of the common tasks associated with adding the Angular router to your application.
+이 주제는 Angular 라우터를 애플리케이션에 추가할 때 일반적으로 수행되는 여러 작업을 구현하는 방법을 설명합니다.
 
-## Generate an application with routing enabled
+## 라우팅이 활성화된 애플리케이션 생성
 
-The following command uses the Angular CLI to generate a basic Angular application with application routes. The application name in the following example is `routing-app`.
+다음 명령은 Angular CLI를 사용하여 애플리케이션 경로와 함께 기본 Angular 애플리케이션을 생성합니다. 다음 예제에서 애플리케이션 이름은 `routing-app`입니다.
 
 ```shell
 ng new routing-app
 ```
 
-### Adding components for routing
+### 라우팅을 위한 컴포넌트 추가
 
-To use the Angular router, an application needs to have at least two components so that it can navigate from one to the other. To create a component using the CLI, enter the following at the command line where `first` is the name of your component:
+Angular 라우터를 사용하려면 애플리케이션에 최소 두 개의 컴포넌트가 필요하여 서로 간에 탐색할 수 있습니다. CLI를 사용하여 컴포넌트를 만들려면 `first`가 컴포넌트 이름인 명령 줄에 다음을 입력합니다:
 
 ```shell
 ng generate component first
 ```
 
-Repeat this step for a second component but give it a different name. Here, the new name is `second`.
+두 번째 컴포넌트에 대해서도 이 단계를 반복하지만 다른 이름을 지정하세요. 여기서 새로운 이름은 `second`입니다.
 
 <docs-code language="shell">
 
@@ -26,18 +26,18 @@ ng generate component second
 
 </docs-code>
 
-The CLI automatically appends `Component`, so if you were to write `first-component`, your component would be `FirstComponentComponent`.
+CLI는 자동으로 `Component`를 추가하므로, `first-component`라고 작성하면 컴포넌트는 `FirstComponentComponent`가 됩니다.
 
 <docs-callout title="`base href`">
 
-This guide works with a CLI-generated Angular application. If you are working manually, make sure that you have `<base href="/">` in the `<head>` of your index.html file.
-This assumes that the `app` folder is the application root, and uses `"/"`.
+이 가이드는 CLI에서 생성한 Angular 애플리케이션에서 작동합니다. 수동으로 작업하는 경우 `<head>`의 index.html 파일에 `<base href="/">`가 포함되어 있는지 확인하세요.
+이는 `app` 폴더가 애플리케이션 루트로 가정하고 `"/"`을 사용합니다.
 
 </docs-callout>
 
-### Importing your new components
+### 새 컴포넌트 가져오기
 
-To use your new components, import them into `app.routes.ts` at the top of the file, as follows:
+새 컴포넌트를 사용하려면 파일 최상단의 `app.routes.ts`에 가져옵니다. 다음과 같이:
 
 <docs-code language="ts">
 
@@ -46,11 +46,11 @@ import {SecondComponent} from './second/second.component';
 
 </docs-code>
 
-## Defining a basic route
+## 기본 경로 정의
 
-There are three fundamental building blocks to creating a route.
+경로를 만들기 위한 세 가지 기본 요소가 있습니다.
 
-Import the routes into `app.config.ts` and add it to the `provideRouter` function. The following is the default `ApplicationConfig` using the CLI.
+`app.config.ts`에 경로를 가져오고 `provideRouter` 함수에 추가합니다. 다음은 CLI를 사용한 기본 `ApplicationConfig`입니다.
 
 <docs-code language="ts">
 
@@ -60,13 +60,13 @@ export const appConfig: ApplicationConfig = {
 
 </docs-code>
 
-The Angular CLI performs this step for you. However, if you are creating an application manually or working with an existing, non-CLI application, verify that the imports and configuration are correct.
+Angular CLI는 이 단계를 자동으로 수행합니다. 그러나 애플리케이션을 수동으로 생성하거나 기존 비-CLI 애플리케이션과 작업하는 경우 가져오기 및 구성 설정이 올바른지 확인하세요.
 
 <docs-workflow>
 
-<docs-step title="Set up a `Routes` array for your routes">
+<docs-step title="경로용 `Routes` 배열 설정">
 
-The Angular CLI performs this step automatically.
+Angular CLI는 이 단계를 자동으로 수행합니다.
 
 ```ts
 import { Routes } from '@angular/router';
@@ -76,9 +76,9 @@ export const routes: Routes = [];
 
 </docs-step>
 
-<docs-step title="Define your routes in your `Routes` array">
+<docs-step title="경로 배열에서 경로 정의">
 
-Each route in this array is a JavaScript object that contains two properties. The first property, `path`, defines the URL path for the route. The second property, `component`, defines the component Angular should use for the corresponding path.
+이 배열의 각 경로는 두 개의 속성을 포함하는 JavaScript 객체입니다. 첫 번째 속성인 `path`는 경로의 URL 경로를 정의합니다. 두 번째 속성인 `component`는 Angular가 해당 경로에 사용할 컴포넌트를 정의합니다.
 
 ```ts
 const routes: Routes = [
@@ -89,23 +89,23 @@ const routes: Routes = [
 
 </docs-step>
 
-<docs-step title="Add your routes to your application">
+<docs-step title="애플리케이션에 경로 추가">
 
-Now that you have defined your routes, add them to your application. First, add links to the two components. Assign the anchor tag that you want to add the route to the `routerLink` attribute. Set the value of the attribute to the component to show when a user clicks on each link. Next, update your component template to include `<router-outlet>`. This element informs Angular to update the application view with the component for the selected route.
+이제 경로를 정의했으므로 애플리케이션에 추가합니다. 먼저 두 컴포넌트에 대한 링크를 추가합니다. 라우트를 추가할 앵커 태그를 `routerLink` 속성에 할당하세요. 사용자가 각 링크를 클릭할 때 표시할 컴포넌트로 속성값을 설정하세요. 다음으로, `<router-outlet>`를 포함하도록 컴포넌트 템플릿을 업데이트합니다. 이 요소는 Angular에게 선택된 경로에 대한 컴포넌트로 애플리케이션 뷰를 업데이트하도록 지시합니다.
 
 ```angular-html
 <h1>Angular Router App</h1>
 <nav>
   <ul>
-    <li><a routerLink="/first-component" routerLinkActive="active" ariaCurrentWhenActive="page">First Component</a></li>
-    <li><a routerLink="/second-component" routerLinkActive="active" ariaCurrentWhenActive="page">Second Component</a></li>
+    <li><a routerLink="/first-component" routerLinkActive="active" ariaCurrentWhenActive="page">첫 번째 컴포넌트</a></li>
+    <li><a routerLink="/second-component" routerLinkActive="active" ariaCurrentWhenActive="page">두 번째 컴포넌트</a></li>
   </ul>
 </nav>
-<!-- The routed views render in the <router-outlet>-->
+<!-- 경로의 뷰가 <router-outlet>에 렌더링됩니다 -->
 <router-outlet />
 ```
 
-You also need to add the `RouterLink`, `RouterLinkActive`, and `RouterOutlet` to the `imports` array of `AppComponent`.
+또한 `AppComponent`의 `imports` 배열에 `RouterLink`, `RouterLinkActive`, 및 `RouterOutlet`을 추가해야 합니다.
 
 ```ts
 @Component({
@@ -123,30 +123,30 @@ export class AppComponent {
 
 </docs-workflow>
 
-### Route order
+### 경로 순서
 
-The order of routes is important because the `Router` uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes.
-List routes with a static path first, followed by an empty path route, which matches the default route.
-The [wildcard route](guide/routing/common-router-tasks#setting-up-wildcard-routes) comes last because it matches every URL and the `Router` selects it only if no other routes match first.
+경로의 순서는 중요합니다. 왜냐하면 `Router`가 경로를 일치시킬 때 첫 번째 일치가 우선시되기 때문에 더 특정한 경로는 덜 특정한 경로보다 위에 배치되어야 합니다.
+정적 경로가 있는 경로를 먼저 나열하고, 그 다음은 기본 경로를 자주 사용하는 빈 경로입니다.
+[와일드카드 경로](guide/routing/common-router-tasks#setting-up-wildcard-routes)는 모든 URL과 일치하기 때문에 마지막에 위치합니다. `Router`는 다른 경로가 먼저 일치하지 않으면 이 경로를 선택합니다.
 
-## Getting route information
+## 경로 정보 가져오기
 
-Often, as a user navigates your application, you want to pass information from one component to another.
-For example, consider an application that displays a shopping list of grocery items.
-Each item in the list has a unique `id`.
-To edit an item, users click an Edit button, which opens an `EditGroceryItem` component.
-You want that component to retrieve the `id` for the grocery item so it can display the right information to the user.
+종종 사용자가 애플리케이션을 탐색할 때 한 컴포넌트에서 다른 컴포넌트로 정보를 전달하고 싶을 것입니다.
+예를 들어, 장바구니 항목이 표시되는 애플리케이션을 고려해 보세요.
+목록의 각 항목에는 고유한 `id`가 있습니다.
+항목을 수정하려면 사용자가 수정 버튼을 클릭하여 `EditGroceryItem` 컴포넌트를 열어야 합니다.
+이 컴포넌트가 장바구니 항목의 `id`를 검색하여 사용자에게 올바른 정보를 표시하도록 하길 원합니다.
 
-Use a route to pass this type of information to your application components.
-To do so, you use the [withComponentInputBinding](api/router/withComponentInputBinding) feature with `provideRouter` or the `bindToComponentInputs` option of `RouterModule.forRoot`.
+이러한 유형의 정보를 애플리케이션 컴포넌트에 전달하기 위해 경로를 사용하세요.
+이를 위해 `provideRouter`와 함께 [withComponentInputBinding](api/router/withComponentInputBinding) 기능 또는 `RouterModule.forRoot`의 `bindToComponentInputs` 옵션을 사용합니다.
 
-To get information from a route:
+경로로부터 정보를 얻으려면:
 
 <docs-workflow>
 
-<docs-step title="Add `withComponentInputBinding`">
+<docs-step title="`withComponentInputBinding` 추가">
 
-Add the `withComponentInputBinding` feature to the `provideRouter` method.
+`provideRouter` 메서드에 `withComponentInputBinding` 기능을 추가하세요.
 
 ```ts
 providers: [
@@ -156,9 +156,9 @@ providers: [
 
 </docs-step>
 
-<docs-step title="Add an `Input` to the component">
+<docs-step title="컴포넌트에 `Input` 추가">
 
-Update the component to have an `Input` matching the name of the parameter.
+컴포넌트 업데이트하여 매개변수 이름과 일치하는 `Input`을 추가하세요.
 
 ```ts
 @Input()
@@ -167,21 +167,21 @@ set id(heroId: string) {
 }
 ```
 
-NOTE: You can bind all route data with key, value pairs to component inputs: static or resolved route data, path parameters, matrix parameters, and query parameters.
-If you want to use the parent components route info you will need to set the router `paramsInheritanceStrategy` option:
+참고: 모든 경로 데이터를 키, 값 쌍으로 컴포넌트 입력에 바인딩할 수 있습니다: 정적 또는 해결된 경로 데이터, 경로 매개변수, 행렬 매개변수 및 쿼리 매개변수.
+부모 컴포넌트의 경로 정보를 사용하려면 라우터의 `paramsInheritanceStrategy` 옵션을 설정해야 합니다:
 `withRouterConfig({paramsInheritanceStrategy: 'always'})`
 
 </docs-step>
 
 </docs-workflow>
 
-## Setting up wildcard routes
+## 와일드카드 경로 설정
 
-A well-functioning application should gracefully handle when users attempt to navigate to a part of your application that does not exist.
-To add this functionality to your application, you set up a wildcard route.
-The Angular router selects this route any time the requested URL doesn't match any router paths.
+잘 작동하는 애플리케이션은 사용자가 존재하지 않는 애플리케이션의 일부로 탐색하려 할 때 이를 원활하게 처리해야 합니다.
+이 기능을 애플리케이션에 추가하려면 와일드카드 경로를 설정하세요.
+Angular 라우터는 요청된 URL이 어떤 라우터 경로와도 일치하지 않을 때마다 이 경로를 선택합니다.
 
-To set up a wildcard route, add the following code to your `routes` definition.
+와일드카드 경로를 설정하려면 다음 코드를 `routes` 정의에 추가하세요.
 
 <docs-code>
 
@@ -189,46 +189,46 @@ To set up a wildcard route, add the following code to your `routes` definition.
 
 </docs-code>
 
-The two asterisks, `**`, indicate to Angular that this `routes` definition is a wildcard route.
-For the component property, you can define any component in your application.
-Common choices include an application-specific `PageNotFoundComponent`, which you can define to [display a 404 page](guide/routing/common-router-tasks#displaying-a-404-page) to your users; or a redirect to your application's main component.
-A wildcard route is the last route because it matches any URL.
-For more detail on why order matters for routes, see [Route order](guide/routing/common-router-tasks#route-order).
+두 개의 별표 `**`는 Angular에게 이 `routes` 정의가 와일드카드 경로임을 나타냅니다.
+컴포넌트 속성에서는 애플리케이션의 모든 컴포넌트를 정의할 수 있습니다.
+일반적인 선택으로는 애플리케이션 전용 `PageNotFoundComponent`가 있으며, 이를 정의하여 사용자에게 [404 페이지를 표시](guide/routing/common-router-tasks#displaying-a-404-page)할 수 있습니다; 또는 애플리케이션의 주요 컴포넌트로 리디렉션할 수 있습니다.
+와일드카드 경로는 모든 URL과 일치하기 때문에 마지막 경로입니다.
+경로에 대한 순서의 중요성에 대한 자세한 내용은 [경로 순서](guide/routing/common-router-tasks#route-order)를 참조하세요.
 
-## Displaying a 404 page
+## 404 페이지 표시
 
-To display a 404 page, set up a [wildcard route](guide/routing/common-router-tasks#setting-up-wildcard-routes) with the `component` property set to the component you'd like to use for your 404 page as follows:
+404 페이지를 표시하려면 `component` 속성을 사용하여 원하는 404 페이지 컴포넌트로 설정된 [와일드카드 경로](guide/routing/common-router-tasks#setting-up-wildcard-routes)를 설정하세요.
 
 ```ts
 const routes: Routes = [
   { path: 'first-component', component: FirstComponent },
   { path: 'second-component', component: SecondComponent },
-  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
+  { path: '**', component: PageNotFoundComponent },  // 404 페이지에 대한 와일드카드 경로
 ];
 ```
 
-The last route with the `path` of `**` is a wildcard route.
-The router selects this route if the requested URL doesn't match any of the paths earlier in the list and sends the user to the `PageNotFoundComponent`.
+`path`가 `**`인 마지막 경로는 와일드카드 경로입니다.
+라우터는 요청한 URL이 목록의 이전 경로와 일치하지 않을 때 이 경로를 선택하고 사용자를 `PageNotFoundComponent`로 보냅니다.
 
-## Setting up redirects
+## 리디렉션 설정
 
-To set up a redirect, configure a route with the `path` you want to redirect from, the `component` you want to redirect to, and a `pathMatch` value that tells the router how to match the URL.
+리디렉션을 설정하려면 리디렉션하려는 `path`, 리디렉션할 `component`, 및 URL을 일치시키는 방법을 라우터에 알려주는 `pathMatch` 값을 가진 경로를 구성하세요.
 
 ```ts
 const routes: Routes = [
   { path: 'first-component', component: FirstComponent },
   { path: 'second-component', component: SecondComponent },
-  { path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
-  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
+  { path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // `first-component`로 리디렉션
+  { path: '**', component: PageNotFoundComponent },  // 404 페이지에 대한 와일드카드 경로
 ];
 ```
 
-In this example, the third route is a redirect so that the router defaults to the `first-component` route.
-Notice that this redirect precedes the wildcard route.
-Here, `path: ''` means to use the initial relative URL \(`''`\).
+이 예제에서 세 번째 경로는 리디렉션으로, 라우터가 기본적으로 `first-component` 경로로 설정됩니다.
+이 리디렉션은 와일드카드 경로보다 먼저 옵니다.
+여기서 `path: ''`는 초기 상대 URL를 사용하라는 의미입니다 \(`''`\).
 
-Sometimes a redirect is not a simple, static redirect. The `redirectTo` property can also be a function
-with more complex logic that returns a string or `UrlTree`.
+때때로 리디렉션은 간단한 정적 리디렉션이 아닙니다. `redirectTo` 속성은 더 복잡한 논리가 포함된 함수일 수 있습니다.
+이 함수는 문자열이나 `UrlTree`를 반환합니다.
 
 ```ts
 const routes: Routes = [
@@ -241,7 +241,7 @@ const routes: Routes = [
       if (userIdParam !== undefined) {
         return `/user/${userIdParam}`;
       } else {
-        errorHandler.handleError(new Error('Attempted navigation to user page without user ID.'));
+        errorHandler.handleError(new Error('사용자 ID 없이 사용자 페이지로 전환하려고 시도했습니다.'));
         return `/not-found`;
       }
     },
@@ -250,17 +250,17 @@ const routes: Routes = [
 ];
 ```
 
-## Nesting routes
+## 경로 중첩
 
-As your application grows more complex, you might want to create routes that are relative to a component other than your root component.
-These types of nested routes are called child routes.
-This means you're adding a second `<router-outlet>` to your app, because it is in addition to the `<router-outlet>` in `AppComponent`.
+애플리케이션이 더 복잡해짐에 따라 루트 컴포넌트 외에 다른 컴포넌트에 상대적인 경로를 만들고 싶을 수 있습니다.
+이러한 유형의 중첩 경로를 자식 경로라고 합니다.
+이는 애플리케이션에 두 번째 `<router-outlet>`을 추가하는 것을 의미합니다. `AppComponent`의 `<router-outlet>` 외에도 추가됩니다.
 
-In this example, there are two additional child components, `child-a`, and `child-b`.
-Here, `FirstComponent` has its own `<nav>` and a second `<router-outlet>` in addition to the one in `AppComponent`.
+이 예제에서는 두 개의 추가 자식 컴포넌트가 있습니다: `child-a` 및 `child-b`.
+여기서 `FirstComponent`는 자신의 `<nav>`와 `AppComponent`의 `<router-outlet>` 외에 두 번째 `<router-outlet>`을 가지고 있습니다.
 
 ```angular-html
-<h2>First Component</h2>
+<h2>첫 번째 컴포넌트</h2>
 
 <nav>
   <ul>
@@ -272,49 +272,49 @@ Here, `FirstComponent` has its own `<nav>` and a second `<router-outlet>` in add
 <router-outlet />
 ```
 
-A child route is like any other route, in that it needs both a `path` and a `component`.
-The one difference is that you place child routes in a `children` array within the parent route.
+자식 경로는 다른 경로와 마찬가지로 `path`와 `component`가 필요합니다.
+유일한 차이점은 자식 경로를 부모 경로 내의 `children` 배열에 배치한다는 것입니다.
 
 ```ts
 const routes: Routes = [
   {
     path: 'first-component',
-    component: FirstComponent, // this is the component with the <router-outlet> in the template
+    component: FirstComponent, // 이 템플릿에 <router-outlet>가 있는 컴포넌트입니다.
     children: [
       {
-        path: 'child-a', // child route path
-        component: ChildAComponent, // child route component that the router renders
+        path: 'child-a', // 자식 경로의 경로
+        component: ChildAComponent, // 라우터가 렌더링하는 자식 경로 컴포넌트
       },
       {
         path: 'child-b',
-        component: ChildBComponent, // another child route component that the router renders
+        component: ChildBComponent, // 라우터가 렌더링하는 또 다른 자식 경로 컴포넌트
       },
     ],
   },
 ];
 ```
 
-## Setting the page title
+## 페이지 제목 설정
 
-Each page in your application should have a unique title so that they can be identified in the browser history.
-The `Router` sets the document's title using the `title` property from the `Route` config.
+애플리케이션의 각 페이지는 고유한 제목을 가져야 하며, 이를 통해 브라우저 기록에서 식별할 수 있습니다.
+`Router`는 `Route` 구성의 `title` 속성을 사용하여 문서 제목을 설정합니다.
 
 ```ts
 const routes: Routes = [
   {
     path: 'first-component',
-    title: 'First component',
-    component: FirstComponent,  // this is the component with the <router-outlet> in the template
+    title: '첫 번째 컴포넌트',
+    component: FirstComponent,  // 이 컴포넌트는 템플릿에 <router-outlet>이 있습니다.
     children: [
       {
-        path: 'child-a',  // child route path
+        path: 'child-a',  // 자식 경로의 경로
         title: resolvedChildATitle,
-        component: ChildAComponent,  // child route component that the router renders
+        component: ChildAComponent,  // 라우터가 렌더링하는 자식 경로 컴포넌트
       },
       {
         path: 'child-b',
         title: 'child b',
-        component: ChildBComponent,  // another child route component that the router renders
+        component: ChildBComponent,  // 라우터가 렌더링하는 또 다른 자식 경로 컴포넌트
       },
     ],
   },
@@ -323,9 +323,9 @@ const routes: Routes = [
 const resolvedChildATitle: ResolveFn<string> = () => Promise.resolve('child a');
 ```
 
-HELPFUL: The `title` property follows the same rules as static route `data` and dynamic values that implement `ResolveFn`.
+도움말: `title` 속성은 정적 경로 `data` 및 `ResolveFn`을 구현하는 동적 값과 동일한 규칙을 따릅니다.
 
-You can also provide a custom title strategy by extending the `TitleStrategy`.
+또한 `TitleStrategy`를 확장하여 맞춤 제목 전략을 제공할 수 있습니다.
 
 ```ts
 @Injectable({ providedIn: 'root' })
@@ -337,7 +337,7 @@ export class TemplatePageTitleStrategy extends TitleStrategy {
   override updateTitle(routerState: RouterStateSnapshot) {
     const title = this.buildTitle(routerState);
     if (title !== undefined) {
-      this.title.setTitle(`My Application | ${title}`);
+      this.title.setTitle(`내 애플리케이션 | ${title}`);
     }
   }
 }
@@ -350,33 +350,33 @@ export const appConfig: ApplicationConfig = {
 };
 ```
 
-## Using relative paths
+## 상대 경로 사용
 
-Relative paths let you define paths that are relative to the current URL segment.
-The following example shows a relative route to another component, `second-component`.
-`FirstComponent` and `SecondComponent` are at the same level in the tree, however, the link to `SecondComponent` is situated within the `FirstComponent`, meaning that the router has to go up a level and then into the second directory to find the `SecondComponent`.
-Rather than writing out the whole path to get to `SecondComponent`, use the `../` notation to go up a level.
+상대 경로를 사용하면 현재 URL 세그먼트에 상대적인 경로를 정의할 수 있습니다.
+다음 예제는 다른 컴포넌트인 `second-component`에 대한 상대 경로를 보여줍니다.
+`FirstComponent`와 `SecondComponent`는 트리에서 동일한 수준에 있지만, `SecondComponent`에 대한 링크는 `FirstComponent` 내에 있어 라우터는 한 수준 위로 이동한 후 두 번째 디렉터리로 들어가 `SecondComponent`를 찾아야 합니다.
+`SecondComponent`에 접근하기 위해 전체 경로를 작성하는 대신 `../` 표기를 사용하여 한 수준 위로 이동하세요.
 
 ```angular-html
-<h2>First Component</h2>
+<h2>첫 번째 컴포넌트</h2>
 
 <nav>
   <ul>
-    <li><a routerLink="../second-component">Relative Route to second component</a></li>
+    <li><a routerLink="../second-component">두 번째 컴포넌트로의 상대 경로</a></li>
   </ul>
 </nav>
 <router-outlet />
 ```
 
-In addition to `../`, use `./` or no leading slash to specify the current level.
+`../` 외에도 현재 수준을 지정하려면 `./`를 사용하거나 앞 슬래시 없이 지정할 수 있습니다.
 
-### Specifying a relative route
+### 상대 경로 지정하기
 
-To specify a relative route, use the `NavigationExtras` `relativeTo` property.
-In the component class, import `NavigationExtras` from the `@angular/router`.
+상대 경로를 지정하려면 `NavigationExtras`의 `relativeTo` 속성을 사용하세요.
+컴포넌트 클래스에서 `@angular/router`에서 `NavigationExtras`를 가져옵니다.
 
-Then use `relativeTo` in your navigation method.
-After the link parameters array, which here contains `items`, add an object with the `relativeTo` property set to the `ActivatedRoute`, which is `this.route`.
+그런 다음 내비게이션 메서드에서 `relativeTo`를 사용하세요.
+링크 매개변수 배열 다음, 여기서 `items`가 포함되어 있는 객체를 추가하고 `relativeTo` 속성을 `ActivatedRoute`로 설정합니다. 여기서 `this.route`입니다.
 
 ```ts
 goToItems() {
@@ -384,14 +384,14 @@ goToItems() {
 }
 ```
 
-The `navigate()` arguments configure the router to use the current route as a basis upon which to append `items`.
+`navigate()` 인자는 라우터가 현재 경로를 기준으로 `items`를 추가하도록 구성합니다.
 
-The `goToItems()` method interprets the destination URI as relative to the activated route and navigates to the `items` route.
+`goToItems()` 메서드는 목적지 URI를 활성화된 경로에 상대적으로 해석하고 `items` 경로로 탐색합니다.
 
-## Accessing query parameters and fragments
+## 쿼리 매개변수 및 프래그먼트 접근
 
-Sometimes, a feature of your application requires accessing a part of a route, such as a query parameter or a fragment.
-In this example, the route contains an `id` parameter we can use to target a specific hero page.
+때때로 애플리케이션의 기능이 쿼리 매개변수나 프래그먼트와 같은 경로의 일부에 접근해야 할 수도 있습니다.
+이 예제에서 경로에는 특정 영웅 페이지를 타겟팅하는 데 사용할 수 있는 `id` 매개변수가 포함되어 있습니다.
 
 ```ts
 import { ApplicationConfig } from "@angular/core";
@@ -407,7 +407,7 @@ export const appConfig: ApplicationConfig = {
 };
 ```
 
-First, import the following members in the component you want to navigate from.
+먼저 탐색하려는 컴포넌트에서 다음 멤버를 가져옵니다.
 
 ```ts
 import { inject } from '@angular/core';
@@ -415,14 +415,14 @@ import { ActivatedRoute } from '@angular/router';
 import { Observable, switchMap } from 'rxjs';
 ```
 
-Next inject the activated route service:
+그런 다음 활성화된 경로 서비스를 주입합니다:
 
 ```ts
 private readonly route = inject(ActivatedRoute);
 ```
 
-Configure the class so that you have an observable, `heroes$`, a `selectedId` to hold the `id` number of the hero, and the heroes in the `ngOnInit()`, add the following code to get the `id` of the selected hero.
-This code snippet assumes that you have a heroes list, a hero service, a function to get your heroes, and the HTML to render your list and details, just as in the Tour of Heroes example.
+클래스를 구성하여 `heroes$`라는 옵저버블, 영웅의 `id` 숫자를 보유할 `selectedId`, 및 `ngOnInit()`에 다음 코드를 추가하여 선택된 영웅의 `id`를 가져옵니다.
+이 코드 스니펫은 영웅 목록, 영웅 서비스, 영웅을 가져오는 함수, 목록 및 세부정보를 렌더링하는 HTML이 필요함을 가정합니다. 이는 영웅 투어 예제와 유사합니다.
 
 ```ts
 heroes$: Observable<Hero[]>;
@@ -439,14 +439,14 @@ ngOnInit() {
 }
 ```
 
-Next, in the component that you want to navigate to, import the following members.
+그 다음으로, 탐색하려는 컴포넌트에서 다음 멤버를 가져옵니다.
 
 ```ts
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 import { Observable } from 'rxjs';
 ```
 
-Inject `ActivatedRoute` and `Router` in the constructor of the component class so they are available to this component:
+컴포넌트 클래스의 생성자에 `ActivatedRoute`와 `Router`를 주입하여 이 컴포넌트에서 사용할 수 있게 합니다:
 
 ```ts
 private readonly route = inject(ActivatedRoute);
@@ -461,20 +461,20 @@ ngOnInit() {
 
 gotoItems(hero: Hero) {
   const heroId = hero ? hero.id : null;
-  // Pass along the hero id if available
-  // so that the HeroList component can select that item.
+  // 사용 가능한 경우 영웅 id를 전달합니다.
+  // HeroList 컴포넌트가 해당 항목을 선택할 수 있게 하기 위해서입니다.
   this.router.navigate(['/heroes', { id: heroId }]);
 }
 ```
 
-## Lazy loading
+## 지연 로딩
 
-You can configure your routes to lazy load modules, which means that Angular only loads modules as needed, rather than loading all modules when the application launches.
-Additionally, preload parts of your application in the background to improve the user experience.
+라우트를 지연 로드하도록 구성할 수 있습니다. 이 의미는 Angular가 애플리케이션이 시작될 때 모든 모듈을 로드하는 대신 필요할 때 모듈을 로드하는 것입니다.
+또한 백그라운드에서 애플리케이션의 일부를 미리 로드하여 사용자 경험을 개선할 수 있습니다.
 
-Any route can lazily load its routed, standalone component by using `loadComponent:`
+어떤 라우트도 `loadComponent:`를 사용하여 자신의 라우팅된 독립형 컴포넌트를 지연 로드할 수 있습니다.
 
-<docs-code header="Lazy loading a standalone component" language="typescript">
+<docs-code header="독립형 컴포넌트 지연 로딩" language="typescript">
 
 const routes: Routes = [
   {
@@ -483,15 +483,14 @@ const routes: Routes = [
   }
 ];
 </docs-code>
-This works as long as the loaded component is standalone.
+이는 로드된 컴포넌트가 독립형인 한 작동합니다.
 
+지연 로딩 및 미리 로딩에 대한 더 많은 정보는 전용 가이드 [지연 로딩](guide/ngmodules/lazy-loading)을 참조하세요.
 
-For more information on lazy loading and preloading see the dedicated guide [Lazy loading](guide/ngmodules/lazy-loading).
+## 무단 접근 방지
 
-## Preventing unauthorized access
-
-Use route guards to prevent users from navigating to parts of an application without authorization.
-The following route guards are available in Angular:
+라우트 가드를 사용하여 사용자가 승인 없이 애플리케이션의 특정 부분으로 탐색하지 못하도록 할 수 있습니다.
+Angular에서 사용할 수 있는 다음과 같은 라우트 가드가 있습니다:
 
 <docs-pill-row>
   <docs-pill href="api/router/CanActivateFn" title="`canActivate`"/>
@@ -502,28 +501,28 @@ The following route guards are available in Angular:
   <docs-pill href="api/router/CanLoadFn" title="`canLoad`"/>
 </docs-pill-row>
 
-To use route guards, consider using [component-less routes](api/router/Route#componentless-routes) as this facilitates guarding child routes.
+라우트 가드를 사용하려면 [컴포넌트 없는 경로](api/router/Route#componentless-routes)를 사용하는 것을 고려하세요. 이는 자식 경로를 방어하는 데 유리합니다.
 
-Create a file for your guard:
+가드를 위한 파일을 만드세요:
 
 ```bash
 ng generate guard your-guard
 ```
 
-In your guard file, add the guard functions you want to use.
-The following example uses `canActivateFn` to guard the route.
+가드 파일에 사용하려는 가드 함수를 추가하세요.
+다음 예제는 경로를 방어하기 위해 `canActivateFn`을 사용합니다.
 
 ```ts
 export const yourGuardFunction: CanActivateFn = (
   next: ActivatedRouteSnapshot,
   state: RouterStateSnapshot
 ) => {
-  // your  logic goes here
+  // 여기에 로직을 추가하세요
 }
 ```
 
-In your routing module, use the appropriate property in your `routes` configuration.
-Here, `canActivate` tells the router to mediate navigation to this particular route.
+라우팅 모듈에서는 `routes` 구성에서 적절한 속성을 사용합니다.
+여기서 `canActivate`는 라우터에게 이 특정 경로로의 탐색을 중재하도록 지시합니다.
 
 ```ts
 {
@@ -533,20 +532,20 @@ Here, `canActivate` tells the router to mediate navigation to this particular ro
 }
 ```
 
-## Link parameters array
+## 링크 매개변수 배열
 
-A link parameters array holds the following ingredients for router navigation:
+링크 매개변수 배열은 라우터 탐색을 위한 다음과 같은 요소들을 포함합니다:
 
-- The path of the route to the destination component
-- Required and optional route parameters that go into the route URL
+- 목적지 컴포넌트의 경로
+- 경로 URL에 들어갈 필수 및 선택적 경로 매개변수
 
-Bind the `RouterLink` directive to such an array like this:
+`RouterLink` 지시문을 이러한 배열에 바인딩하세요:
 
 ```angular-html
-<a [routerLink]="['/heroes']">Heroes</a>
+<a [routerLink]="['/heroes']">영웅들</a>
 ```
 
-The following is a two-element array when specifying a route parameter:
+다음은 경로 매개변수를 지정할 때의 두 요소 배열입니다:
 
 ```angular-html
 <a [routerLink]="['/hero', hero.id]">
@@ -554,51 +553,51 @@ The following is a two-element array when specifying a route parameter:
 </a>
 ```
 
-Provide optional route parameters in an object, as in `{ foo: 'foo' }`:
+선택적 경로 매개변수를 객체로 제공하세요, `{ foo: 'foo' }`와 같이:
 
 ```angular-html
-<a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>
+<a [routerLink]="['/crisis-center', { foo: 'foo' }]">위기 센터</a>
 ```
 
-These three examples cover the needs of an application with one level of routing.
-However, with a child router, such as in the crisis center, you create new link array possibilities.
+이 세 가지 예제는 하나의 경로 수준을 가진 애플리케이션의 필요를 충족합니다.
+그러나 위기 센터와 같은 자식 라우터가 있는 경우 새로운 링크 배열 가능성을 만듭니다.
 
-The following minimal `RouterLink` example builds upon a specified default child route for the crisis center.
+다음 최소 `RouterLink` 예제는 위기 센터의 기본 자식 경로를 기반으로 구축됩니다.
 
 ```angular-html
-<a [routerLink]="['/crisis-center']">Crisis Center</a>
+<a [routerLink]="['/crisis-center']">위기 센터</a>
 ```
 
-Review the following:
+다음 내용을 검토하세요:
 
-- The first item in the array identifies the parent route \(`/crisis-center`\)
-- There are no parameters for this parent route
-- There is no default for the child route so you need to pick one
-- You're navigating to the `CrisisListComponent`, whose route path is `/`, but you don't need to explicitly add the slash
+- 배열의 첫 번째 항목은 부모 경로 \(`/crisis-center`\)를 식별합니다.
+- 이 부모 경로에 대한 매개변수가 없습니다.
+- 자식 경로에 대한 기본값이 없으므로 하나를 선택해야 합니다.
+- `CrisisListComponent`로 탐색하고 있으며, 이 경로 경로는 `/`이지만 슬래시를 명시적으로 추가할 필요는 없습니다.
 
-Consider the following router link that navigates from the root of the application down to the Dragon Crisis:
+애플리케이션의 루트에서 드래곤 위기로 내려가는 다음 라우터 링크를 고려하세요:
 
 ```angular-html
-<a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>
+<a [routerLink]="['/crisis-center', 1]">드래곤 위기</a>
 ```
 
-- The first item in the array identifies the parent route \(`/crisis-center`\)
-- There are no parameters for this parent route
-- The second item identifies the child route details about a particular crisis \(`/:id`\)
-- The details child route requires an `id` route parameter
-- You added the `id` of the Dragon Crisis as the second item in the array \(`1`\)
-- The resulting path is `/crisis-center/1`
+- 배열의 첫 번째 항목은 부모 경로 \(`/crisis-center`\)를 식별합니다.
+- 이 부모 경로에 대한 매개변수가 없습니다.
+- 두 번째 항목은 특정 위기에 대한 세부정보 \(`/:id`\)의 자식 경로를 식별합니다.
+- 세부정보 자식 경로는 `id` 경로 매개변수를 요구합니다.
+- 드래곤 위기의 `id`를 배열의 두 번째 항목 \(`1`\)으로 추가합니다.
+- 결과 경로는 `/crisis-center/1`입니다.
 
-You could also redefine the `AppComponent` template with Crisis Center routes exclusively:
+위기 센터의 경로로만 `AppComponent` 템플릿을 다시 정의할 수도 있습니다:
 
 ```angular-ts
 @Component({
   template: `
     <h1 class="title">Angular Router</h1>
     <nav>
-      <a [routerLink]="['/crisis-center']">Crisis Center</a>
-      <a [routerLink]="['/crisis-center/1', { foo: 'foo' }]">Dragon Crisis</a>
-      <a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
+      <a [routerLink]="['/crisis-center']">위기 센터</a>
+      <a [routerLink]="['/crisis-center/1', { foo: 'foo' }]">드래곤 위기</a>
+      <a [routerLink]="['/crisis-center/2']">상어 위기</a>
     </nav>
     <router-outlet />
   `
@@ -606,116 +605,116 @@ You could also redefine the `AppComponent` template with Crisis Center routes ex
 export class AppComponent {}
 ```
 
-In summary, you can write applications with one, two or more levels of routing.
-The link parameters array affords the flexibility to represent any routing depth and any legal sequence of route paths, \(required\) router parameters, and \(optional\) route parameter objects.
+요약하면, 하나, 둘 또는 그 이상의 경로 수준으로 애플리케이션을 작성할 수 있습니다.
+링크 매개변수 배열은 모든 경로 깊이와 모든 합법적인 경로의 순서를 표현할 수 있는 유연성을 제공합니다, \(필수\) 라우터 매개변수와 \(선택적\) 경로 매개변수 객체를 포함하여.
 
-## `LocationStrategy` and browser URL styles
+## `LocationStrategy` 및 브라우저 URL 스타일
 
-When the router navigates to a new component view, it updates the browser's location and history with a URL for that view.
+라우터가 새 컴포넌트 뷰로 탐색할 때 브라우저의 위치와 기록을 해당 뷰의 URL로 업데이트합니다.
 
-Modern HTML5 browsers support [history.pushState](https://developer.mozilla.org/docs/Web/API/History_API/Working_with_the_History_API#adding_and_modifying_history_entries 'HTML5 browser history push-state'), a technique that changes a browser's location and history without triggering a server page request.
-The router can compose a "natural" URL that is indistinguishable from one that would otherwise require a page load.
+현대의 HTML5 브라우저는 [history.pushState](https://developer.mozilla.org/docs/Web/API/History_API/Working_with_the_History_API#adding_and_modifying_history_entries 'HTML5 브라우저 역사 푸시 상태')를 지원합니다. 이 기술은 서버 페이지 요청을 유발하지 않고 브라우저의 위치와 기록을 변경합니다.
+라우터는 페이지 로드를 요구하는 URL과 구별할 수 없는 "자연스러운" URL을 구성할 수 있습니다.
 
-Here's the Crisis Center URL in this "HTML5 pushState" style:
+다음은 이 "HTML5 pushState" 스타일의 위기 센터 URL입니다:
 
 ```text
 localhost:3002/crisis-center
 ```
 
-Older browsers send page requests to the server when the location URL changes unless the change occurs after a "#" \(called the "hash"\).
-Routers can take advantage of this exception by composing in-application route URLs with hashes.
-Here's a "hash URL" that routes to the Crisis Center.
+이전 브라우저들은 위치 URL이 변경될 때 서버에 페이지 요청을 보냅니다. 변화를 "#" \(해시\) 뒤에서 유발한 경우를 제외하고는.
+라우터는 해시가 있는 애플리케이션 내 라우트 URL을 구성함으로써 이 예외를 이용할 수 있습니다.
+다음은 위기 센터로 라우팅되는 "해시 URL"입니다.
 
 ```text
 localhost:3002/src/#/crisis-center
 ```
 
-The router supports both styles with two `LocationStrategy` providers:
+라우터는 두 개의 `LocationStrategy` 제공자로 두 가지 스타일을 모두 지원합니다:
 
-| Providers              | Details                              |
+| 제공자                  | 세부정보                                |
 | :--------------------- | :----------------------------------- |
-| `PathLocationStrategy` | The default "HTML5 pushState" style. |
-| `HashLocationStrategy` | The "hash URL" style.                |
+| `PathLocationStrategy` | 기본 "HTML5 pushState" 스타일입니다.  |
+| `HashLocationStrategy` | "해시 URL" 스타일입니다.               |
 
-The `RouterModule.forRoot()` function sets the `LocationStrategy` to the `PathLocationStrategy`, which makes it the default strategy.
-You also have the option of switching to the `HashLocationStrategy` with an override during the bootstrapping process.
+`RouterModule.forRoot()` 함수는 `LocationStrategy`를 `PathLocationStrategy`로 설정하여 기본 전략으로 만듭니다.
+부트스트랩 과정 중에 오버라이드를 통해 `HashLocationStrategy`로 전환할 옵션도 제공합니다.
 
-HELPFUL: For more information on providers and the bootstrap process, see [Dependency Injection](guide/di/dependency-injection-providers).
+도움말: 제공자 및 부트스트랩 프로세스에 대한 자세한 내용은 [의존성 주입](guide/di/dependency-injection-providers)을 참조하세요.
 
-## Choosing a routing strategy
+## 라우팅 전략 선택
 
-You must choose a routing strategy early in the development of your project because once the application is in production, visitors to your site use and depend on application URL references.
+프로젝트 개발 초기에 라우팅 전략을 선택해야 합니다. 애플리케이션이 프로덕션되면 사이트 방문자는 애플리케이션 URL 참조를 사용하고 의존하게 되기 때문입니다.
 
-Almost all Angular projects should use the default HTML5 style.
-It produces URLs that are easier for users to understand and it preserves the option to do server-side rendering.
+거의 모든 Angular 프로젝트는 기본 HTML5 스타일을 사용하는 것이 좋습니다.
+이는 사용자에게 이해하기 쉬운 URL을 생성하며 서버 측 렌더링 옵션을 보존합니다.
 
-Rendering critical pages on the server is a technique that can greatly improve perceived responsiveness when the application first loads.
-An application that would otherwise take ten or more seconds to start could be rendered on the server and delivered to the user's device in less than a second.
+서버에서 주요 페이지를 렌더링하는 것은 애플리케이션이 처음 로드될 때 인지된 반응성을 크게 개선할 수 있는 기술입니다.
+그렇지 않으면 10초 이상 걸릴 수 있는 애플리케이션을 서버에서 렌더링하고 사용자의 장치에 1초 미만으로 전달할 수 있습니다.
 
-This option is only available if application URLs look like normal web URLs without hash \(`#`\) characters in the middle.
+이 옵션은 애플리케이션 URL이 해시 \(`#`\) 문자가 없는 일반 웹 URL처럼 보일 때만 사용할 수 있습니다.
 
 ## `<base href>`
 
-The router uses the browser's [history.pushState](https://developer.mozilla.org/docs/Web/API/History_API/Working_with_the_History_API#adding_and_modifying_history_entries 'HTML5 browser history push-state') for navigation.
-`pushState` lets you customize in-application URL paths; for example, `localhost:4200/crisis-center`.
-The in-application URLs can be indistinguishable from server URLs.
+라우터는 탐색에 브라우저의 [history.pushState](https://developer.mozilla.org/docs/Web/API/History_API/Working_with_the_History_API#adding_and_modifying_history_entries 'HTML5 브라우저 역사 푸시 상태')를 사용합니다.
+`pushState`를 사용하면 애플리케이션 내 URL 경로를 사용자 정의할 수 있습니다. 예를 들어 `localhost:4200/crisis-center`입니다.
+애플리케이션 내 URL은 서버 URL과 구별되지 않을 수 있습니다.
 
-Modern HTML5 browsers were the first to support `pushState` which is why many people refer to these URLs as "HTML5 style" URLs.
+현대 HTML5 브라우저는 처음으로 `pushState`를 지원하였습니다. 그래서 많은 사람들이 이러한 URL을 "HTML5 스타일" URL이라고 부르는 이유입니다.
 
-HELPFUL: HTML5 style navigation is the router default.
-In the [LocationStrategy and browser URL styles](#locationstrategy-and-browser-url-styles) section, learn why HTML5 style is preferable, how to adjust its behavior, and how to switch to the older hash \(`#`\) style, if necessary.
+도움말: HTML5 스타일 탐색은 라우터의 기본값입니다.
+[LocationStrategy 및 브라우저 URL 스타일](#locationstrategy-and-browser-url-styles) 섹션에서 HTML5 스타일이 바람직한 이유와 그 동작을 조정하는 방법, 그리고 필요 시 이전 해시 \(`#`\) 스타일로 전환하는 방법을 알아보세요.
 
-You must add a [`<base href>` element](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href') to the application's `index.html` for `pushState` routing to work.
-The browser uses the `<base href>` value to prefix relative URLs when referencing CSS files, scripts, and images.
+`pushState` 라우팅이 작동하려면 애플리케이션의 `index.html`에 [`<base href>` 요소](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href')를 추가해야 합니다.
+브라우저는 CSS 파일, 스크립트 및 이미지에 대한 상대 URL을 참조할 때 `<base href>` 값을 사용하여 접두사로 붙입니다.
 
-Add the `<base>` element just after the `<head>` tag.
-If the `app` folder is the application root, as it is for this application, set the `href` value in `index.html` as shown here.
+`<head>` 태그 바로 뒤에 `<base>` 요소를 추가하세요.
+`app` 폴더가 애플리케이션 루트인 경우 이 애플리케이션의 `index.html`에서 `href` 값을 다음과 같이 설정합니다.
 
 <docs-code header="src/index.html (base-href)" path="adev/src/content/examples/router/src/index.html" visibleRegion="base-href"/>
 
-### HTML5 URLs and the `<base href>`
+### HTML5 URL과 `<base href>`
 
-The guidelines that follow will refer to different parts of a URL.
-This diagram outlines what those parts refer to:
+다음 가이드라인은 URL의 다양한 부분을 참조합니다.
+이 다이어그램은 해당 부분이 무엇을 나타내는지 설명합니다:
 
 <docs-code hideCopy language="text">
 foo://example.com:8042/over/there?name=ferret#nose
 \_/   \______________/\_________/ \_________/ \__/
  |           |            |            |        |
-scheme    authority      path        query   fragment
+스킴      권한         경로        쿼리     프래그먼트
 </docs-code>
 
-While the router uses the [HTML5 pushState](https://developer.mozilla.org/docs/Web/API/History_API#Adding_and_modifying_history_entries 'Browser history push-state') style by default, you must configure that strategy with a `<base href>`.
+라우터가 기본적으로 [HTML5 pushState](https://developer.mozilla.org/docs/Web/API/History_API#Adding_and_modifying_history_entries '브라우저 역사 푸시 상태') 스타일을 사용하지만, `<base href>`로 해당 전략을 구성해야 합니다.
 
-The preferred way to configure the strategy is to add a [`<base href>` element](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href') tag in the `<head>` of the `index.html`.
+전략을 구성하는 선호되는 방법은 `index.html`의 `<head>`에 [`<base href>` 요소](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href') 태그를 추가하는 것입니다.
 
 ```angular-html
 <base href="/">
 ```
 
-Without that tag, the browser might not be able to load resources \(images, CSS, scripts\) when "deep linking" into the application.
+이 태그 없이 "딥 링크"를 애플리케이션에 사용 시 브라우저가 리소스 \(이미지, CSS, 스크립트\)를 로드할 수 없게 될 수 있습니다.
 
-Some developers might not be able to add the `<base>` element, perhaps because they don't have access to `<head>` or the `index.html`.
+일부 개발자는 `<head>` 또는 `index.html`에 접근할 수 없기 때문에 `<base>` 요소를 추가하지 못할 수 있습니다.
 
-Those developers can still use HTML5 URLs by taking the following two steps:
+이러한 개발자는 다음 두 단계를 통해 여전히 HTML5 URL을 사용할 수 있습니다:
 
-1. Provide the router with an appropriate `APP_BASE_HREF` value.
-1. Use root URLs \(URLs with an `authority`\) for all web resources: CSS, images, scripts, and template HTML files.
+1. 라우터에 적절한 `APP_BASE_HREF` 값을 제공합니다.
+1. 모든 웹 리소스에 대해 루트 URL \(URL에 `authority`\)를 사용합니다: CSS, 이미지, 스크립트 및 템플릿 HTML 파일.
 
-   - The `<base href>` `path` should end with a "/", as browsers ignore characters in the `path` that follow the right-most "`/`"
-   - If the `<base href>` includes a `query` part, the `query` is only used if the `path` of a link in the page is empty and has no `query`.
-     This means that a `query` in the `<base href>` is only included when using `HashLocationStrategy`.
+   - `<base href>` `path`는 "/"로 끝나야 하며, 브라우저는 오른쪽 끝의 "`/`" 뒤의 문자를 무시합니다.
+   - `<base href>`가 쿼리 부분을 포함하면, 링크의 `path`가 비어있고 쿼리가 없는 경우에만 해당 쿼리가 사용됩니다.
+     이는 `<base href>`의 쿼리는 `HashLocationStrategy`를 사용할 때만 포함됨을 의미합니다.
 
-   - If a link in the page is a root URL \(has an `authority`\), the `<base href>` is not used.
-     In this way, an `APP_BASE_HREF` with an authority will cause all links created by Angular to ignore the `<base href>` value.
+   - 페이지의 링크가 루트 URL \(`authority`\)인 경우, `<base href>`는 사용되지 않습니다.
+     이렇게 하면 권한이 있는 `APP_BASE_HREF`가 모든 Angular에서 생성한 링크가 `<base href>` 값을 무시하게 합니다.
 
-   - A fragment in the `<base href>` is _never_ persisted
+   - `<base href>`의 프래그먼트는 _결코_ 지속되지 않습니다.
 
-For more complete information on how `<base href>` is used to construct target URIs, see the [RFC](https://tools.ietf.org/html/rfc3986#section-5.2.2) section on transforming references.
+목표 URI를 구성하는 데 `<base href>`가 어떻게 사용되는지에 대한 더 완전한 정보는 [RFC](https://tools.ietf.org/html/rfc3986#section-5.2.2) 참조 섹션에서 찾아볼 수 있습니다.
 
 ### `HashLocationStrategy`
 
-Use `HashLocationStrategy` by providing the `useHash: true` in an object as the second argument of the `RouterModule.forRoot()` in the `AppModule`.
+`HashLocationStrategy`를 사용하려면 `AppModule`의 `RouterModule.forRoot()`의 두 번째 인수로 객체의 `useHash: true`를 제공하세요.
 
 ```ts
 providers: [
@@ -723,4 +722,4 @@ providers: [
 ]
 ```
 
-When using `RouterModule.forRoot`, this is configured with the `useHash: true` in the second argument: `RouterModule.forRoot(routes, {useHash: true})`.
+`RouterModule.forRoot`를 사용할 때는 두 번째 인수에 `useHash: true`를 구성합니다: `RouterModule.forRoot(routes, {useHash: true})`.
\ No newline at end of file
diff --git a/adev/src/content/guide/routing/overview.md b/adev/src/content/guide/routing/overview.md
index 9ffc9ca3a3f7..b4a5fa4869d5 100644
--- a/adev/src/content/guide/routing/overview.md
+++ b/adev/src/content/guide/routing/overview.md
@@ -1,27 +1,27 @@
-<docs-decorative-header title="Angular Routing" imgSrc="adev/src/assets/images/routing.svg"> <!-- markdownlint-disable-line -->
-Routing helps you change what the user sees in a single-page app.
+<docs-decorative-header title="Angular 라우팅" imgSrc="adev/src/assets/images/routing.svg"> <!-- markdownlint-disable-line -->
+라우팅은 사용자가 단일 페이지 애플리케이션에서 보는 내용을 변경하는 데 도움을 줍니다.
 </docs-decorative-header>
 
-In a single-page app, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page.
+단일 페이지 애플리케이션에서 사용자가 보는 내용을 변경하려면 특정 구성 요소에 해당하는 디스플레이의 일부를 표시하거나 숨겨서 변경해야 하며, 새로운 페이지를 가져오기 위해 서버로 나가지 않아야 합니다.
 
-As users perform application tasks, they need to move between the different views that you have defined.
+사용자가 애플리케이션 작업을 수행할 때, 정의한 다양한 뷰 간에 이동해야 합니다.
 
-To handle the navigation from one view to the next, you use the Angular **`Router`**.
-The **`Router`** enables navigation by interpreting a browser URL as an instruction to change the view.
+하나의 뷰에서 다음 뷰로의 탐색을 처리하기 위해 Angular **`Router`**를 사용합니다.
+**`Router`**는 브라우저 URL을 해석하여 뷰를 변경하라는 지침으로 해석하여 탐색을 가능하게 합니다.
 
-## Learn about Angular routing
+## Angular 라우팅에 대해 배우기
 
 <docs-card-container>
-  <docs-card title="Common routing tasks" href="guide/routing/common-router-tasks">
-    Learn how to implement many of the common tasks associated with Angular routing.
+  <docs-card title="일반 라우팅 작업" href="guide/routing/common-router-tasks">
+    Angular 라우팅과 관련된 일반 작업을 구현하는 방법을 배우세요.
   </docs-card>
-  <docs-card title="Routing SPA tutorial" href="guide/routing/router-tutorial">
-    A tutorial that covers patterns associated with Angular routing.
+  <docs-card title="라우팅 SPA 튜토리얼" href="guide/routing/router-tutorial">
+    Angular 라우팅과 관련된 패턴을 다루는 튜토리얼입니다.
   </docs-card>
-  <docs-card title="Creating custom route matches tutorial" href="guide/routing/routing-with-urlmatcher">
-    A tutorial that covers how to use custom matching strategy patterns with Angular routing.
+  <docs-card title="커스텀 라우트 매치 생성 튜토리얼" href="guide/routing/routing-with-urlmatcher">
+    Angular 라우팅에서 커스텀 매칭 전략 패턴을 사용하는 방법을 다루는 튜토리얼입니다.
   </docs-card>
-  <docs-card title="Router reference" href="guide/routing/router-reference">
-    Describes some core router API concepts.
+  <docs-card title="라우터 참조" href="guide/routing/router-reference">
+    일부 핵심 라우터 API 개념을 설명합니다.
   </docs-card>
-</docs-card-container>
+</docs-card-container>
\ No newline at end of file
diff --git a/adev/src/content/guide/routing/router-reference.md b/adev/src/content/guide/routing/router-reference.md
index 490be0f96c0e..716d1f34ba86 100644
--- a/adev/src/content/guide/routing/router-reference.md
+++ b/adev/src/content/guide/routing/router-reference.md
@@ -1,27 +1,27 @@
-# Router reference
+# 라우터 참조
 
-The following sections highlight some core router concepts.
+다음 섹션에서는 몇 가지 핵심 라우터 개념을 강조합니다.
 
-## Router imports
+## 라우터 임포트
 
-The Angular Router is an optional service that presents a particular component view for a given URL.
-It isn't part of the Angular core and thus is in its own library package, `@angular/router`.
+Angular Router는 주어진 URL에 대한 특정 컴포넌트 뷰를 제공하는 선택적 서비스입니다.  
+이는 Angular의 핵심 부분이 아니므로 별도의 라이브러리 패키지인 `@angular/router`에 있습니다.
 
-Import what you need from it as you would from any other Angular package.
+다른 Angular 패키지에서와 같이 필요한 것을 가져옵니다.
 
 ```ts
 import { provideRouter } from '@angular/router';
 ```
 
-HELPFUL: For more on browser URL styles, see [`LocationStrategy` and browser URL styles](guide/routing/common-router-tasks#browser-url-styles).
+도움이 됨: 브라우저 URL 스타일에 대한 자세한 내용은 [`LocationStrategy` 및 브라우저 URL 스타일](guide/routing/common-router-tasks#browser-url-styles)을 참조하세요.
 
-## Configuration
+## 구성
 
-A routed Angular application has one singleton instance of the `Router` service.
-When the browser's URL changes, that router looks for a corresponding `Route` from which it can determine the component to display.
+라우팅된 Angular 애플리케이션은 `Router` 서비스의 단일 인스턴스를 가집니다.  
+브라우저의 URL이 변경되면 해당 라우터는 어떤 구성 요소를 표시할지 결정하기 위해 해당하는 `Route`를 찾습니다.
 
-A router has no routes until you configure it.
-The following example creates five route definitions, configures the router via the `provideRouter` method, and adds the result to the `providers` array of the `ApplicationConfig`'.
+라우터는 구성할 때까지 경로가 없습니다.  
+다음 예제는 5개의 경로 정의를 생성하고 `provideRouter` 메서드를 통해 라우터를 구성한 다음 결과를 `ApplicationConfig`의 `providers` 배열에 추가합니다.
 
 ```ts
 const appRoutes: Routes = [
@@ -43,63 +43,63 @@ export const appConfig: ApplicationConfig = {
 }
 ```
 
-The `routes` array of routes describes how to navigate.
-Pass it to the `provideRouter` method in the `ApplicationConfig` `providers` to configure the router.
+`routes` 배열은 탐색 방법을 설명합니다.  
+이를 `ApplicationConfig`의 `providers`에서 `provideRouter` 메서드에 전달하여 라우터를 구성합니다.
 
-Each `Route` maps a URL `path` to a component.
-There are no leading slashes in the path.
-The router parses and builds the final URL for you, which lets you use both relative and absolute paths when navigating between application views.
+각 `Route`는 URL `path`를 구성 요소에 매핑합니다.  
+경로에는 선행 슬래시가 없습니다.  
+라우터는 최종 URL을 파싱하고 빌드해 주므로 애플리케이션 뷰 간 탐색 시 상대 경로와 절대 경로를 모두 사용할 수 있습니다.
 
-The `:id` in the second route is a token for a route parameter.
-In a URL such as `/hero/42`, "42" is the value of the `id` parameter.
-The corresponding `HeroDetailComponent` uses that value to find and present the hero whose `id` is 42.
+두 번째 경로의 `:id`는 경로 매개변수의 토큰입니다.  
+`/hero/42`와 같은 URL에서 "42"는 `id` 매개변수의 값입니다.  
+해당하는 `HeroDetailComponent`는 해당 값을 사용하여 `id`가 42인 영웅을 찾고 표시합니다.
 
-The `data` property in the third route is a place to store arbitrary data associated with this specific route.
-The data property is accessible within each activated route.
-Use it to store items such as page titles, breadcrumb text, and other read-only, static data.
-Use the resolve guard to retrieve dynamic data.
+세 번째 경로의 `data` 속성은 특정 경로와 관련된 임의의 데이터를 저장하는 장소입니다.  
+데이터 속성은 각 활성화된 경로 내에서 접근할 수 있습니다.  
+페이지 제목, 탐색 경로 텍스트 및 기타 읽기 전용 정적 데이터를 저장하는 데 사용합니다.  
+동적 데이터를 검색하려면 액세스 가드를 사용하십시오.
 
-The empty path in the fourth route represents the default path for the application —the place to go when the path in the URL is empty, as it typically is at the start.
-This default route redirects to the route for the `/heroes` URL and, therefore, displays the `HeroesListComponent`.
+네 번째 경로의 빈 경로는 애플리케이션의 기본 경로를 나타냅니다. — URL의 경로가 비어 있을 때 일반적으로 이동하는 장소입니다.  
+이 기본 경로는 `/heroes` URL을 위한 경로로 리디렉션되므로 `HeroesListComponent`가 표시됩니다.
 
-If you need to see what events are happening during the navigation lifecycle, there is the `withDebugTracing` feature.
-This outputs each router event that took place during each navigation lifecycle to the browser console.
-Use `withDebugTracing` only for debugging purposes.
-You set the `withDebugTracing` option in the object passed as the second argument to the `provideRouter` method.
+탐색 생명주기 동안 어떤 이벤트가 발생하는지 보려면 `withDebugTracing` 기능이 있습니다.  
+이 기능은 각 탐색 생명주기 동안 발생한 각 라우터 이벤트를 브라우저 콘솔에 출력합니다.  
+`withDebugTracing`은 디버깅 목적으로만 사용하세요.  
+`provideRouter` 메서드에 두 번째 인수로 전달된 객체에서 `withDebugTracing` 옵션을 설정합니다.
 
-## Router outlet
+## 라우터 아울렛
 
-The `RouterOutlet` is a directive from the router library that is used like a component.
-It acts as a placeholder that marks the spot in the template where the router should display the components for that outlet.
+`RouterOutlet`은 라우터 라이브러리의 지시어로 구성 요소처럼 사용됩니다.  
+라우터가 해당 아울렛에 대한 구성 요소를 표시해야 하는 템플릿의 위치를 표시하는 자리 표시자로 작용합니다.
 
 <docs-code language="html">
 
 <router-outlet></router-outlet>
-<!-- Routed components go here -->
+<!-- 라우팅된 구성 요소가 여기로 갑니다 -->
 
 </docs-code>
 
-Given the preceding configuration, when the browser URL for this application becomes `/heroes`, the router matches that URL to the route path `/heroes` and displays the `HeroListComponent` as a sibling element to the `RouterOutlet` that you've placed in the host component's template.
+이전 구성에 따라 이 애플리케이션의 브라우저 URL이 `/heroes`가 되면 라우터는 그 URL을 경로 `/heroes`와 일치시키고, 호스트 구성 요소의 템플릿에 배치한 `RouterOutlet`의 형제 요소로서 `HeroListComponent`를 표시합니다.
 
-## Router links
+## 라우터 링크
 
-To navigate as a result of some user action such as the click of an anchor tag, use `RouterLink`.
+사용자 행동(예: 앵커 태그 클릭)의 결과로 탐색하려면 `RouterLink`를 사용하십시오.
 
-Consider the following template:
+다음 템플릿을 고려하십시오:
 
 <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router/src/app/app.component.1.html"/>
 
-The `RouterLink` directives on the anchor tags give the router control over those elements.
-The navigation paths are fixed, so you can assign a string as a one-time binding to the `routerLink`.
+앵커 태그의 `RouterLink` 지시어는 해당 요소에 대한 라우터의 제어를 제공합니다.  
+탐색 경로는 고정되어 있으므로 `routerLink`에 문자열을 일회성 바인딩으로 할당할 수 있습니다.
 
-Had the navigation path been more dynamic, you could have bound to a template expression that returned an array of route link parameters; that is, the [link parameters array](guide/routing/common-router-tasks#link-parameters-array).
-The router resolves that array into a complete URL.
+탐색 경로가 더 동적이었다면 배열의 경로 링크 매개변수를 반환하는 템플릿 표현에 바인딩할 수 있었습니다; 즉, [링크 매개변수 배열](guide/routing/common-router-tasks#link-parameters-array)입니다.  
+라우터는 해당 배열을 완전한 URL로 해결합니다.
 
-## Active router links
+## 활성 라우터 링크
 
-The `RouterLinkActive` directive toggles CSS classes for active `RouterLink` bindings based on the current `RouterState`.
+`RouterLinkActive` 지시어는 현재 `RouterState`에 따라 활성 `RouterLink` 바인딩의 CSS 클래스를 전환합니다.
 
-On each anchor tag, you see a [property binding](guide/templates/property-binding) to the `RouterLinkActive` directive that looks like
+각 앵커 태그에서 `RouterLinkActive` 지시어에 대한 [속성 바인딩](guide/templates/property-binding)을 볼 수 있습니다.
 
 <docs-code hideCopy language="html">
 
@@ -107,9 +107,9 @@ routerLinkActive="..."
 
 </docs-code>
 
-The template expression to the right of the equal sign, `=`, contains a space-delimited string of CSS classes that the Router adds when this link is active and removes when the link is inactive.
-You set the `RouterLinkActive` directive to a string of classes such as `routerLinkActive="active fluffy"` or bind it to a component property that returns such a string.
-For example,
+등호 기호(`=`) 오른쪽의 템플릿 표현에는 활성 링크일 때 라우터가 추가하고 비활성 링크일 때 제거하는 CSS 클래스의 공백으로 구분된 문자열이 포함되어 있습니다.  
+`RouterLinkActive` 지시어를 `routerLinkActive="active fluffy"`와 같은 클래스 문자열에 설정하거나 그러한 문자열을 반환하는 구성 요소 속성에 바인딩할 수 있습니다.  
+예를 들어,
 
 <docs-code hideCopy language="typescript">
 
@@ -117,80 +117,80 @@ For example,
 
 </docs-code>
 
-Active route links cascade down through each level of the route tree, so parent and child router links can be active at the same time.
-To override this behavior, bind to the `[routerLinkActiveOptions]` input binding with the `{ exact: true }` expression.
-By using `{ exact: true }`, a given `RouterLink` is only active if its URL is an exact match to the current URL.
-
-`RouterLinkActive` also allows you to easily apply the `aria-current` attribute to the active element, thus providing a more accessible experience for all users. For more information see the Accessibility Best Practices [Active links identification section](/best-practices/a11y#active-links-identification).
-
-## Router state
-
-After the end of each successful navigation lifecycle, the router builds a tree of `ActivatedRoute` objects that make up the current state of the router.
-You can access the current `RouterState` from anywhere in the application using the `Router` service and the `routerState` property.
-
-Each `ActivatedRoute` in the `RouterState` provides methods to traverse up and down the route tree to get information from parent, child, and sibling routes.
-
-## Activated route
-
-The route path and parameters are available through an injected router service called the [ActivatedRoute](api/router/ActivatedRoute).
-It has a great deal of useful information including:
-
-| Property        | Details |
-|:---             |:---     |
-| `url`           | An `Observable` of the route paths, represented as an array of strings for each part of the route path.                                                                                                                                                        |
-| `data`          | An `Observable` that contains the `data` object provided for the route. Also contains any resolved values from the resolve guard.                                                                                     |
-| `params`        | An `Observable` that contains the required and optional parameters specific to the route.                                                                                                                 |
-| `paramMap`      | An `Observable` that contains a [map](api/router/ParamMap) of the required and optional parameters specific to the route. The map supports retrieving single and multiple values from the same parameter. |
-| `queryParamMap` | An `Observable` that contains a [map](api/router/ParamMap) of the query parameters available to all routes. The map supports retrieving single and multiple values from the query parameter.                       |
-| `queryParams`   | An `Observable` that contains the query parameters available to all routes.                                                                                                                                        |
-| `fragment`      | An `Observable` of the URL fragment available to all routes.                                                                                                                                                               |
-| `outlet`        | The name of the `RouterOutlet` used to render the route. For an unnamed outlet, the outlet name is primary.                                                                                                                                                      |
-| `routeConfig`   | The route configuration used for the route that contains the origin path.                                                                                                                                                                                        |
-| `parent`        | The route's parent `ActivatedRoute` when this route is a child route.                                                                                                                                       |
-| `firstChild`    | Contains the first `ActivatedRoute` in the list of this route's child routes.                                                                                                                                                                                    |
-| `children`      | Contains all the child routes activated under the current route.                                                                                                                                            |
-
-## Router events
-
-During each navigation, the `Router` emits navigation events through the `Router.events` property.
-These events are shown in the following table.
-
-| Router event                                              | Details |
-|:---                                                       |:---     |
-| [`NavigationStart`](api/router/NavigationStart)           | Triggered when navigation starts.                                                                                                                                                     |
-| [`RouteConfigLoadStart`](api/router/RouteConfigLoadStart) | Triggered before the `Router` lazy loads a route configuration.                                                                     |
-| [`RouteConfigLoadEnd`](api/router/RouteConfigLoadEnd)     | Triggered after a route has been lazy loaded.                                                                                                                                         |
-| [`RoutesRecognized`](api/router/RoutesRecognized)         | Triggered when the Router parses the URL and the routes are recognized.                                                                                                               |
-| [`GuardsCheckStart`](api/router/GuardsCheckStart)         | Triggered when the Router begins the Guards phase of routing.                                                                                                                         |
-| [`ChildActivationStart`](api/router/ChildActivationStart) | Triggered when the Router begins activating a route's children.                                                                                                                       |
-| [`ActivationStart`](api/router/ActivationStart)           | Triggered when the Router begins activating a route.                                                                                                                                  |
-| [`GuardsCheckEnd`](api/router/GuardsCheckEnd)             | Triggered when the Router finishes the Guards phase of routing successfully.                                                                                                          |
-| [`ResolveStart`](api/router/ResolveStart)                 | Triggered when the Router begins the Resolve phase of routing.                                                                                                                        |
-| [`ResolveEnd`](api/router/ResolveEnd)                     | Triggered when the Router finishes the Resolve phase of routing successfully.                                                                                                          |
-| [`ChildActivationEnd`](api/router/ChildActivationEnd)     | Triggered when the Router finishes activating a route's children.                                                                                                                     |
-| [`ActivationEnd`](api/router/ActivationEnd)               | Triggered when the Router finishes activating a route.                                                                                                                                |
-| [`NavigationEnd`](api/router/NavigationEnd)               | Triggered when navigation ends successfully.                                                                                                                                          |
-| [`NavigationCancel`](api/router/NavigationCancel)         | Triggered when navigation is canceled. This can happen when a Route Guard returns false during navigation, or redirects by returning a `UrlTree` or `RedirectCommand`. |
-| [`NavigationError`](api/router/NavigationError)           | Triggered when navigation fails due to an unexpected error.                                                                                                                           |
-| [`Scroll`](api/router/Scroll)                             | Represents a scrolling event.                                                                                                                                                         |
-
-When you enable the `withDebugTracing` feature, Angular logs these events to the console.
-
-## Router terminology
-
-Here are the key `Router` terms and their meanings:
-
-| Router part           | Details |
-|:---                   |:---     |
-| `Router`              | Displays the application component for the active URL. Manages navigation from one component to the next.                                                                                        |
-| `provideRouter`       | provides the necessary service providers for navigating through application views.                                                                                        |
-| `RouterModule`        | A separate NgModule that provides the necessary service providers and directives for navigating through application views.                                                                       |
-| `Routes`              | Defines an array of Routes, each mapping a URL path to a component.                                                                                                                              |
-| `Route`               | Defines how the router should navigate to a component based on a URL pattern. Most routes consist of a path and a component type.                                                                |
-| `RouterOutlet`        | The directive \(`<router-outlet>`\) that marks where the router displays a view.                                                                                                                 |
-| `RouterLink`          | The directive for binding a clickable HTML element to a route. Clicking an element with a `routerLink` directive that's bound to a *string* or a *link parameters array* triggers a navigation. |
-| `RouterLinkActive`    | The directive for adding/removing classes from an HTML element when an associated `routerLink` contained on or inside the element becomes active/inactive. It can also set the `aria-current` of an active link for better accessibility.                                       |
-| `ActivatedRoute`      | A service that's provided to each route component that contains route specific information such as route parameters, static data, resolve data, global query parameters, and the global fragment.   |
-| `RouterState`         | The current state of the router including a tree of the currently activated routes together with convenience methods for traversing the route tree.                                              |
-| Link parameters array | An array that the router interprets as a routing instruction. You can bind that array to a `RouterLink` or pass the array as an argument to the `Router.navigate` method.                        |
-| Routing component     | An Angular component with a `RouterOutlet` that displays views based on router navigations.                                                                                                      |
+활성 경로 링크는 각 레벨의 경로 트리를 따라 cascades하므로 부모 및 자식 라우터 링크가 동시에 활성화될 수 있습니다.  
+이 동작을 무시하려면 `{ exact: true }` 표현으로 `[routerLinkActiveOptions]` 입력 바인딩에 바인딩하십시오.  
+`{ exact: true }`를 사용하면 특정 `RouterLink`는 URL이 현재 URL과 정확히 일치하는 경우에만 활성화됩니다.
+
+`RouterLinkActive`는 활성 요소에 `aria-current` 속성을 쉽게 적용할 수 있도록 하여 모든 사용자에게 더 접근할 수 있는 경험을 제공합니다. 더 많은 정보는 접근성 모범 사례 [활성 링크 식별 섹션](/best-practices/a11y#active-links-identification)을 참조하십시오.
+
+## 라우터 상태
+
+각 성공적인 탐색 생명주기가 끝난 후 라우터는 현재 상태를 구성하는 `ActivatedRoute` 객체의 트리를 구성합니다.  
+어디에서나 `Router` 서비스 및 `routerState` 속성을 사용하여 현재 `RouterState`에 접근할 수 있습니다.
+
+`RouterState`의 각 `ActivatedRoute`는 부모, 자식 및 형제 경로에서 정보를 가져오기 위해 경로 트리를 위아래로 탐색하는 메서드를 제공합니다.
+
+## 활성화된 경로
+
+경로 경로 및 매개변수는 [ActivatedRoute](api/router/ActivatedRoute)라는 주입된 라우터 서비스를 통해 사용할 수 있습니다.  
+이 서비스는 다음과 같은 유용한 정보를 많이 포함하고 있습니다:
+
+| 속성           | 세부정보 |
+|:---            |:---      |
+| `url`          | 경로 경로의 배열로 표현되는 경로 경로의 `Observable`입니다.                                                                                                                                                        |
+| `data`         | 경로를 위해 제공된 `data` 객체가 포함된 `Observable`입니다. 또한 resolve 가드에서 해결된 값을 포함합니다.                                                                                     |
+| `params`       | 경로에 특정한 필수 및 선택 매개변수를 포함한 `Observable`입니다.                                                                                                                 |
+| `paramMap`     | 경로에 특정한 필수 및 선택 매개변수의 [맵](api/router/ParamMap)을 포함한 `Observable`입니다. 이 맵은 동일한 매개변수에서 단일 및 다중 값을 검색하는 것을 지원합니다. |
+| `queryParamMap`| 모든 경로에서 사용할 수 있는 쿼리 매개변수의 [맵](api/router/ParamMap)을 포함한 `Observable`입니다. 이 맵은 쿼리 매개변수에서 단일 및 다중 값을 검색하는 것을 지원합니다.                       |
+| `queryParams`  | 모든 경로에서 사용할 수 있는 쿼리 매개변수를 포함한 `Observable`입니다.                                                                                                                                        |
+| `fragment`     | 모든 경로에서 사용할 수 있는 URL 프래그먼트의 `Observable`입니다.                                                                                                                                                               |
+| `outlet`       | 경로를 렌더링하는 데 사용되는 `RouterOutlet`의 이름입니다. 이름이 없는 아울렛의 경우 아울렛 이름은 primary입니다.                                                                                                                                                      |
+| `routeConfig`  | 원래 경로를 포함하는 경로에 사용되는 경로 구성입니다.                                                                                                                                                                                        |
+| `parent`       | 본 경로를 자식 경로로 할 때 경로의 부모 `ActivatedRoute`입니다.                                                                                                                                       |
+| `firstChild`   | 이 경로의 자식 경로 목록에서 첫 번째 `ActivatedRoute`를 포함합니다.                                                                                                                                                                                    |
+| `children`     | 현재 경로 아래에서 활성화된 모든 자식 경로를 포함합니다.                                                                                                                                            |
+
+## 라우터 이벤트
+
+각 탐색 중에 `Router`는 `Router.events` 속성을 통해 탐색 이벤트를 방출합니다.  
+이러한 이벤트는 다음 표에 나타납니다.
+
+| 라우터 이벤트                                               | 세부정보 |
+|:---                                                       |:---      |
+| [`NavigationStart`](api/router/NavigationStart)           | 탐색이 시작될 때 트리거됩니다.                                                                                                                                                     |
+| [`RouteConfigLoadStart`](api/router/RouteConfigLoadStart) | 라우터가 경로 구성을 지연 로드하기 전에 트리거됩니다.                                                                     |
+| [`RouteConfigLoadEnd`](api/router/RouteConfigLoadEnd)     | 경로가 지연 로드된 후 트리거됩니다.                                                                                                                                         |
+| [`RoutesRecognized`](api/router/RoutesRecognized)         | 라우터가 URL을 파싱하고 경로를 인식할 때 트리거됩니다.                                                                                                               |
+| [`GuardsCheckStart`](api/router/GuardsCheckStart)         | 라우터가 라우팅의 가드 단계에 들어갈 때 트리거됩니다.                                                                                                                         |
+| [`ChildActivationStart`](api/router/ChildActivationStart) | 라우터가 경로의 자식 활성화를 시작할 때 트리거됩니다.                                                                                                                       |
+| [`ActivationStart`](api/router/ActivationStart)           | 라우터가 경로의 활성화를 시작할 때 트리거됩니다.                                                                                                                                  |
+| [`GuardsCheckEnd`](api/router/GuardsCheckEnd)             | 라우터가 가드 단계의 라우팅을 성공적으로 완료할 때 트리거됩니다.                                                                                                          |
+| [`ResolveStart`](api/router/ResolveStart)                 | 라우터가 라우팅의 해결 단계를 시작할 때 트리거됩니다.                                                                                                                        |
+| [`ResolveEnd`](api/router/ResolveEnd)                     | 라우터가 라우팅의 해결 단계를 성공적으로 완료할 때 트리거됩니다.                                                                                                          |
+| [`ChildActivationEnd`](api/router/ChildActivationEnd)     | 라우터가 경로 자식 활성화를 완료할 때 트리거됩니다.                                                                                                                     |
+| [`ActivationEnd`](api/router/ActivationEnd)               | 라우터가 경로의 활성화를 완료할 때 트리거됩니다.                                                                                                                                |
+| [`NavigationEnd`](api/router/NavigationEnd)               | 탐색이 성공적으로 끝날 때 트리거됩니다.                                                                                                                                          |
+| [`NavigationCancel`](api/router/NavigationCancel)         | 탐색이 취소될 때 트리거됩니다. 이는 경로 가드가 탐색 중에 false를 반환하거나 `UrlTree` 또는 `RedirectCommand`를 반환하여 리디렉션될 때 발생할 수 있습니다. |
+| [`NavigationError`](api/router/NavigationError)           | 예기치 않은 오류로 인해 탐색이 실패할 때 트리거됩니다.                                                                                                                           |
+| [`Scroll`](api/router/Scroll)                             | 스크롤 이벤트를 나타냅니다.                                                                                                                                                         |
+
+`withDebugTracing` 기능을 활성화하면 Angular는 이러한 이벤트를 콘솔에 기록합니다.
+
+## 라우터 용어
+
+다음은 주요 `Router` 용어와 그 의미입니다:
+
+| 라우터 부분           | 세부정보 |
+|:---                   |:---      |
+| `Router`              | 활성 URL에 대한 애플리케이션 구성 요소를 표시합니다. 한 구성 요소에서 다른 구성 요소로의 탐색을 관리합니다.                                                                                        |
+| `provideRouter`       | 애플리케이션 뷰를 탐색하는 데 필요한 서비스 제공자를 제공합니다.                                                                                        |
+| `RouterModule`        | 애플리케이션 뷰를 탐색하는 데 필요한 서비스 제공자와 지시어를 제공하는 별도의 NgModule입니다.                                                                       |
+| `Routes`              | 각 URL 경로를 구성 요소에 매핑하는 Route의 배열을 정의합니다.                                                                                                                              |
+| `Route`               | URL 패턴에 따라 라우터가 구성 요소로 탐색해야 하는 방법을 정의합니다. 대부분의 경로는 경로와 구성 요소 유형으로 구성됩니다.                                                                |
+| `RouterOutlet`        | 라우터가 뷰를 표시할 위치를 표시하는 지시어 (`<router-outlet>`)입니다.                                                                                                                 |
+| `RouterLink`          | 클릭 가능한 HTML 요소를 경로에 바인딩하기 위한 지시어입니다. `routerLink` 지시어에 바인딩된 문자열 또는 링크 매개변수 배열을 가진 요소를 클릭하면 탐색이 트리거됩니다. |
+| `RouterLinkActive`    | 연관된 `routerLink`가 활성화/비활성화될 때 HTML 요소에서 클래스를 추가/제거하기 위한 지시어입니다. 이를 통해 활성 링크에 대해 더 나은 접근성을 위한 `aria-current`를 설정할 수 있습니다.                                       |
+| `ActivatedRoute`      | 각 경로 구성 요소에 제공되는 서비스로, 경로 매개변수, 정적 데이터, 해결 데이터, 전역 쿼리 매개변수 및 전역 프래그먼트와 같은 경로별 정보를 포함합니다.   |
+| `RouterState`         | 현재 활성화된 경로 트리를 포함한 라우터의 현재 상태로, 경로 트리를 탐색하는 편리한 메서드를 제공합니다.                                              |
+| 링크 매개변수 배열 | 라우터가 라우팅 지침으로 해석하는 배열입니다. 이 배열을 `RouterLink`에 바인딩하거나 `Router.navigate` 메서드에 인수로 전달할 수 있습니다.                        |
+| 라우팅 구성 요소     | 라우터 탐색에 따라 뷰를 표시하는 `RouterOutlet`가 있는 Angular 구성 요소입니다.                                                                                                      |
\ No newline at end of file
diff --git a/adev/src/content/guide/routing/router-tutorial.md b/adev/src/content/guide/routing/router-tutorial.md
index 9b0bd462c620..826df0e501e6 100644
--- a/adev/src/content/guide/routing/router-tutorial.md
+++ b/adev/src/content/guide/routing/router-tutorial.md
@@ -1,92 +1,92 @@
-# Using Angular routes in a single-page application
+# Angular 라우트를 사용하여 단일 페이지 애플리케이션 만들기
 
-This tutorial describes how to build a single-page application, SPA that uses multiple Angular routes.
+이 튜토리얼은 여러 Angular 라우트를 사용하는 단일 페이지 애플리케이션(SPA)을 만드는 방법에 대해 설명합니다.
 
-In a Single Page Application \(SPA\), all of your application's functions exist in a single HTML page.
-As users access your application's features, the browser needs to render only the parts that matter to the user, instead of loading a new page.
-This pattern can significantly improve your application's user experience.
+단일 페이지 애플리케이션(SPA)에서는 애플리케이션의 모든 기능이 단일 HTML 페이지에 존재합니다.
+사용자가 애플리케이션의 기능에 접근할 때 브라우저는 새로운 페이지를 로드하는 대신 사용자에게 중요한 부분만 렌더링해야 합니다.
+이 패턴은 애플리케이션의 사용자 경험을 크게 개선할 수 있습니다.
 
-To define how users navigate through your application, you use routes.
-Add routes to define how users navigate from one part of your application to another.
-You can also configure routes to guard against unexpected or unauthorized behavior.
+사용자가 애플리케이션을 탐색하는 방식을 정의하기 위해 라우트를 사용합니다.
+라우트를 추가하여 사용자가 애플리케이션의 한 부분에서 다른 부분으로 어떻게 탐색하는지를 정의합니다.
+예기치 않거나 허가되지 않은 동작을 방지하기 위해 라우트를 구성할 수도 있습니다.
 
-## Objectives
+## 목표
 
-* Organize a sample application's features into modules.
-* Define how to navigate to a component.
-* Pass information to a component using a parameter.
-* Structure routes by nesting several routes.
-* Check whether users can access a route.
-* Control whether the application can discard unsaved changes.
-* Improve performance by pre-fetching route data and lazy loading feature modules.
-* Require specific criteria to load components.
+* 샘플 애플리케이션의 기능을 모듈로 구성합니다.
+* 구성 요소로 이동하는 방법을 정의합니다.
+* 매개변수를 사용하여 구성 요소에 정보를 전달합니다.
+* 여러 라우트를 중첩하여 라우트를 구조화합니다.
+* 사용자가 라우트에 접근할 수 있는지 확인합니다.
+* 애플리케이션이 저장되지 않은 변경 사항을 무시할 수 있는지 제어합니다.
+* 라우트 데이터를 미리 가져오고 기능 모듈을 지연 로드하여 성능을 향상시킵니다.
+* 특정 기준이 충족될 때 구성 요소를 로드하도록 요구합니다.
 
-## Create a sample application
+## 샘플 애플리케이션 만들기
 
-Using the Angular CLI, create a new application, *angular-router-sample*.
-This application will have two components: *crisis-list* and *heroes-list*.
+Angular CLI를 사용하여 새 애플리케이션 *angular-router-sample*을 생성합니다.
+이 애플리케이션에는 두 개의 구성 요소가 있습니다: *crisis-list*와 *heroes-list*입니다.
 
-1. Create a new Angular project, *angular-router-sample*.
+1. 새 Angular 프로젝트인 *angular-router-sample*을 생성합니다.
 
     <docs-code language="shell">
     ng new angular-router-sample
     </docs-code>
 
-    When prompted with `Would you like to add Angular routing?`, select `N`.
+    `Angular 라우팅을 추가하시겠습니까?`라는 메시지가 표시되면 `N`을 선택합니다.
 
-    When prompted with `Which stylesheet format would you like to use?`, select `CSS`.
+    `어떤 스타일 시트 형식을 사용하시겠습니까?`라는 메시지가 표시되면 `CSS`를 선택합니다.
 
-    After a few moments, a new project, `angular-router-sample`, is ready.
+    잠시 후 새 프로젝트인 `angular-router-sample`이 준비됩니다.
 
-1. From your terminal, navigate to the `angular-router-sample` directory.
-1. Create a component, *crisis-list*.
+1. 터미널에서 `angular-router-sample` 디렉토리로 이동합니다.
+1. 구성 요소 *crisis-list*를 생성합니다.
 
     <docs-code language="shell">
     ng generate component crisis-list
     </docs-code>
 
-1. In your code editor, locate the file, `crisis-list.component.html` and replace the placeholder content with the following HTML.
+1. 코드 편집기에서 파일 `crisis-list.component.html`을 찾아서 자리 표시자 내용을 다음 HTML로 교체합니다.
 
     <docs-code header="src/app/crisis-list/crisis-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.html"/>
 
-1. Create a second component, *heroes-list*.
+1. 두 번째 구성 요소인 *heroes-list*를 생성합니다.
 
     <docs-code language="shell">
     ng generate component heroes-list
     </docs-code>
 
-1. In your code editor, locate the file, `heroes-list.component.html` and replace the placeholder content with the following HTML.
+1. 코드 편집기에서 파일 `heroes-list.component.html`을 찾아서 자리 표시자 내용을 다음 HTML로 교체합니다.
 
     <docs-code header="src/app/heroes-list/heroes-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.html"/>
 
-1. In your code editor, open the file, `app.component.html` and replace its contents with the following HTML.
+1. 코드 편집기에서 파일 `app.component.html`을 열고 내용을 다음 HTML로 바꿉니다.
 
     <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="setup"/>
 
-1. Verify that your new application runs as expected by running the `ng serve` command.
+1. `ng serve` 명령을 실행하여 새 애플리케이션이 예상대로 실행되는지 확인합니다.
 
     <docs-code language="shell">
     ng serve
     </docs-code>
 
-1. Open a browser to `http://localhost:4200`.
+1. 브라우저를 열고 `http://localhost:4200`으로 이동합니다.
 
-    You should see a single web page, consisting of a title and the HTML of your two components.
+    제목과 두 구성 요소의 HTML로 구성된 단일 웹 페이지가 표시됩니다.
 
-## Define your routes
+## 라우트 정의하기
 
-In this section, you'll define two routes:
+이 섹션에서는 두 개의 라우트를 정의합니다:
 
-* The route `/crisis-center` opens the `crisis-center` component.
-* The route `/heroes-list` opens the `heroes-list` component.
+* 라우트 `/crisis-center`는 `crisis-center` 구성 요소를 엽니다.
+* 라우트 `/heroes-list`는 `heroes-list` 구성 요소를 엽니다.
 
-A route definition is a JavaScript object.
-Each route typically has two properties.
-The first property, `path`, is a string that specifies the URL path for the route.
-The second property, `component`, is a string that specifies what component your application should display for that path.
+라우트 정의는 JavaScript 객체입니다.
+각 라우트는 일반적으로 두 개의 속성을 가집니다.
+첫 번째 속성인 `path`는 라우트의 URL 경로를 지정하는 문자열입니다.
+두 번째 속성인 `component`는 애플리케이션이 해당 경로에 대해 표시해야 할 구성 요소를 지정하는 문자열입니다.
 
-1. From your code editor, create and open the `app.routes.ts` file.
-1. Create and export a routes list for your application:
+1. 코드 편집기에서 `app.routes.ts` 파일을 생성하고 엽니다.
+1. 애플리케이션의 라우트 목록을 생성하고 내보냅니다:
 
     ```ts
     import {Routes} from '@angular/router';
@@ -94,182 +94,182 @@ The second property, `component`, is a string that specifies what component your
     export const routes = [];
     ```
 
-1. Add two routes for your first two components:
+1. 첫 번째 두 구성 요소에 대한 두 개의 라우트를 추가합니다:
 
     ```ts
     {path: 'crisis-list', component: CrisisListComponent},
     {path: 'heroes-list', component: HeroesListComponent},
     ```
 
-This routes list is an array of JavaScript objects, with each object defining the properties of a route.
+이 라우트 목록은 각 객체가 라우트의 속성을 정의하는 JavaScript 객체의 배열입니다.
 
-## Import `provideRouter` from `@angular/router`
+## `@angular/router`에서 `provideRouter` 가져오기
 
-Routing lets you display specific views of your application depending on the URL path.
-To add this functionality to your sample application, you need to update the `app.config.ts` file to use the router providers function, `provideRouter`.
-You import this provider function from `@angular/router`.
+라우팅을 사용하면 URL 경로에 따라 애플리케이션의 특정 뷰를 표시할 수 있습니다.
+이 기능을 샘플 애플리케이션에 추가하려면 `app.config.ts` 파일을 업데이트하여 라우터 공급자 함수인 `provideRouter`를 사용해야 합니다.
+이 공급자 함수는 `@angular/router`에서 가져옵니다.
 
-1. From your code editor, open the `app.config.ts` file.
-1. Add the following import statements:
+1. 코드 편집기에서 `app.config.ts` 파일을 엽니다.
+1. 다음 가져오기 문을 추가합니다:
 
     ```ts
     import { provideRouter } from '@angular/router';
     import { routes } from './app.routes';
     ```
 
-1. Update the providers in the `appConfig`:
+1. `appConfig`의 제공자를 업데이트합니다:
 
     ```ts
     providers: [provideRouter(routes)]
     ```
 
-For `NgModule` based applications, put the `provideRouter` in the `providers` list of the `AppModule`, or whichever module is passed to `bootstrapModule` in the application.
+`NgModule` 기반 애플리케이션의 경우 `provideRouter`를 `AppModule`의 `providers` 목록에 넣거나 애플리케이션에서 `bootstrapModule`에 전달되는 모듈에 넣습니다.
 
-## Update your component with `router-outlet`
+## `router-outlet`로 구성 요소 업데이트
 
-At this point, you have defined two routes for your application.
-However, your application still has both the `crisis-list` and `heroes-list` components hard-coded in your `app.component.html` template.
-For your routes to work, you need to update your template to dynamically load a component based on the URL path.
+이 시점에서 애플리케이션의 두 개의 라우트를 정의했습니다.
+하지만 애플리케이션은 여전히 `app.component.html` 템플릿에 `crisis-list`와 `heroes-list` 구성 요소가 하드코딩되어 있습니다.
+라우트가 작동하려면 URL 경로에 따라 동적으로 구성 요소를 로드하도록 템플릿을 업데이트해야 합니다.
 
-To implement this functionality, you add the `router-outlet` directive to your template file.
+이 기능을 구현하려면 템플릿 파일에 `router-outlet` 지시어를 추가합니다.
 
-1. From your code editor, open the `app.component.html` file.
-1. Delete the following lines.
+1. 코드 편집기에서 `app.component.html` 파일을 엽니다.
+1. 다음 줄을 삭제합니다.
 
     <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="components"/>
 
-1. Add the `router-outlet` directive.
+1. `router-outlet` 지시어를 추가합니다.
 
     <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="router-outlet"/>
 
-1. Add `RouterOutlet` to the imports of the `AppComponent` in `app.component.ts`
+1. `app.component.ts`의 `AppComponent`의 가져오기 목록에 `RouterOutlet`을 추가합니다.
 
     ```ts
     imports: [RouterOutlet],
     ```
 
-View your updated application in your browser.
-You should see only the application title.
-To view the `crisis-list` component, add `crisis-list` to the end of the path in your browser's address bar.
-For example:
+브라우저에서 업데이트된 애플리케이션을 보십시오.
+애플리케이션 제목만 표시되어야 합니다.
+`crisis-list` 구성 요소를 보려면 브라우저 주소 표시줄에 경로 끝에 `crisis-list`를 추가하십시오.
+예를 들어:
 
 <docs-code language="http">
 http://localhost:4200/crisis-list
 </docs-code>
 
-Notice that the `crisis-list` component displays.
-Angular is using the route you defined to dynamically load the component.
-You can load the `heroes-list` component the same way:
+`crisis-list` 구성 요소가 표시되는 것을 확인하십시오.
+Angular는 정의한 라우트를 사용하여 구성 요소를 동적으로 로드하고 있습니다.
+`heroes-list` 구성 요소를 동일한 방식으로 로드할 수 있습니다:
 
 <docs-code language="http">
 http://localhost:4200/heroes-list
 </docs-code>
 
-## Control navigation with UI elements
+## UI 요소로 탐색 제어하기
 
-Currently, your application supports two routes.
-However, the only way to use those routes is for the user to manually type the path in the browser's address bar.
-In this section, you'll add two links that users can click to navigate between the `heroes-list` and `crisis-list` components.
-You'll also add some CSS styles.
-While these styles are not required, they make it easier to identify the link for the currently-displayed component.
-You'll add that functionality in the next section.
+현재 애플리케이션은 두 개의 라우트를 지원합니다.
+그러나 이러한 라우트를 사용하는 유일한 방법은 사용자가 브라우저 주소 표시줄에 경로를 수동으로 입력하는 것입니다.
+이 섹션에서는 사용자가 `heroes-list`와 `crisis-list` 구성 요소 간에 탐색할 수 있는 두 개의 링크를 추가합니다.
+또한 몇 가지 CSS 스타일을 추가합니다.
+이 스타일은 필수는 아니지만 현재 표시되는 구성 요소의 링크를 식별하기 쉽게 만듭니다.
+다음 섹션에서 이 기능을 추가할 것입니다.
 
-1. Open the `app.component.html` file and add the following HTML below the title.
+1. `app.component.html` 파일을 열고 제목 아래에 다음 HTML을 추가합니다.
 
     <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="nav"/>
 
-    This HTML uses an Angular directive, `routerLink`.
-    This directive connects the routes you defined to your template files.
+    이 HTML은 Angular 지시어 `routerLink`를 사용합니다.
+    이 지시어는 정의한 라우트를 템플릿 파일에 연결합니다.
 
-1. Add the `RouterLink` directive to the imports list of `AppComponent` in `app.component.ts`.
+1. `app.component.ts`의 `AppComponent`의 가져오기 목록에 `RouterLink` 지시어를 추가합니다.
 
-1. Open the `app.component.css` file and add the following styles.
+1. `app.component.css` 파일을 열고 다음 스타일을 추가합니다.
 
     <docs-code header="src/app/app.component.css" path="adev/src/content/examples/router-tutorial/src/app/app.component.css"/>
 
-If you view your application in the browser, you should see these two links.
-When you click on a link, the corresponding component appears.
+브라우저에서 애플리케이션을 보면 이 두 개의 링크가 표시되어야 합니다.
+링크를 클릭하면 해당 구성 요소가 나타납니다.
 
-## Identify the active route
+## 활성 라우트 식별하기
 
-While users can navigate your application using the links you added in the previous section, they don't have a straightforward way to identify what the active route is.
-Add this functionality using Angular's `routerLinkActive` directive.
+사용자가 이전 섹션에서 추가한 링크를 사용하여 애플리케이션을 탐색할 수 있지만 현재 활성 라우트를 식별할 수 있는 간단한 방법이 없습니다.
+Angular의 `routerLinkActive` 지시어를 사용하여 이 기능을 추가합니다.
 
-1. From your code editor, open the `app.component.html` file.
-1. Update the anchor tags to include the `routerLinkActive` directive.
+1. 코드 편집기에서 `app.component.html` 파일을 엽니다.
+1. 앵커 태그를 업데이트하여 `routerLinkActive` 지시어를 포함합니다.
 
     <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="routeractivelink"/>
-1. Add the `RouterLinkActive` directive to the `imports` list of `AppComponent` in `app.component.ts`.
+1. `app.component.ts`의 `AppComponent`의 가져오기 목록에 `RouterLinkActive` 지시어를 추가합니다.
 
-View your application again.
-As you click one of the buttons, the style for that button updates automatically, identifying the active component to the user.
-By adding the `routerLinkActive` directive, you inform your application to apply a specific CSS class to the active route.
-In this tutorial, that CSS class is `activebutton`, but you could use any class that you want.
+다시 애플리케이션을 보기 위해 확인하십시오.
+버튼 중 하나를 클릭하면 해당 버튼의 스타일이 자동으로 업데이트되어 활성 구성 요소를 사용자에게 식별합니다.
+`routerLinkActive` 지시어를 추가하면 활성 라우트에 특정 CSS 클래스를 적용하도록 애플리케이션에 알립니다.
+이 튜토리얼에서 해당 CSS 클래스는 `activebutton`이지만 원하는 모든 클래스를 사용할 수 있습니다.
 
-Note that we are also specifying a value for the `routerLinkActive`'s `ariaCurrentWhenActive`. This makes sure that visually impaired users (which may not perceive the different styling being applied) can also identify the active button. For more information see the Accessibility Best Practices [Active links identification section](/best-practices/a11y#active-links-identification).
+`routerLinkActive`의 `ariaCurrentWhenActive` 값도 지정하고 있다는 점에 주목하십시오. 이렇게 하면 시각적으로 장애가 있는 사용자가(스타일이 달라지는 것을 인식하지 못할 수 있음) 활성 버튼을 식별할 수 있습니다. 자세한 내용은 접근성 모범 사례의 [활성 링크 식별 섹션](/best-practices/a11y#active-links-identification)을 참조하십시오.
 
-## Adding a redirect
+## 리디렉션 추가하기
 
-In this step of the tutorial, you add a route that redirects the user to display the `/heroes-list` component.
+이 튜토리얼의 단계에서 사용자가 `/heroes-list` 구성 요소를 표시하도록 리디렉션하는 라우트를 추가합니다.
 
-1. From your code editor, open the `app.routes.ts` file.
-1. Update the `routes` section as follows.
+1. 코드 편집기에서 `app.routes.ts` 파일을 엽니다.
+1. `routes` 섹션을 다음과 같이 업데이트합니다.
 
     ```ts
     {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
     ```
 
-    Notice that this new route uses an empty string as its path.
-    In addition, it replaces the `component` property with two new ones:
+    이 새 라우트가 경로로 빈 문자열을 사용한다는 점에 유의하십시오.
+    또한 `component` 속성을 두 개의 새로운 속성으로 대체합니다:
 
-    | Properties   | Details |
-    |:---        |:---    |
-    | `redirectTo` | This property instructs Angular to redirect from an empty path to the `heroes-list` path.                                                                                                                                                       |
-    | `pathMatch`  | This property instructs Angular on how much of the URL to match. For this tutorial, you should set this property to `full`. This strategy is recommended when you have an empty string for a path. For more information about this property, see the [Route API documentation](api/router/Route). |
+    | 속성      | 세부정보 |
+    |:---      |:---    |
+    | `redirectTo` | 이 속성은 Angular에게 빈 경로에서 `heroes-list` 경로로 리디렉션하라고 지시합니다.                                                                                                                                                       |
+    | `pathMatch`  | 이 속성은 Angular에게 URL의 얼마나 많은 부분을 일치시킬지를 지시합니다. 이 튜토리얼에서는 이 속성을 `full`로 설정해야 합니다. 이 전략은 경로가 빈 문자열일 때 권장됩니다. 이 속성에 대한 자세한 내용은 [라우트 API 문서](api/router/Route)를 참조하십시오. |
 
-Now when you open your application, it displays the `heroes-list` component by default.
+이제 애플리케이션을 열면 기본적으로 `heroes-list` 구성 요소가 표시됩니다.
 
-## Adding a 404 page
+## 404 페이지 추가하기
 
-It is possible for a user to try to access a route that you have not defined.
-To account for this behavior, the best practice is to display a 404 page.
-In this section, you'll create a 404 page and update your route configuration to show that page for any unspecified routes.
+사용자가 정의하지 않은 라우트에 접근하려고 할 수 있습니다.
+이 행동을 처리하기 위해 모범 사례는 404 페이지를 표시하는 것입니다.
+이 섹션에서는 404 페이지를 만들고 라우트 구성을 업데이트하여 지정되지 않은 모든 라우트에 대해 해당 페이지를 표시합니다.
 
-1. From the terminal, create a new component, `PageNotFound`.
+1. 터미널에서 새 구성 요소 `PageNotFound`를 생성합니다.
 
     <docs-code language="shell">
     ng generate component page-not-found
     </docs-code>
 
-1. From your code editor, open the `page-not-found.component.html` file and replace its contents with the following HTML.
+1. 코드 편집기에서 `page-not-found.component.html` 파일을 열고 내용을 다음 HTML로 교체합니다.
 
     <docs-code header="src/app/page-not-found/page-not-found.component.html" path="adev/src/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.html"/>
 
-1. Open the `app.routes.ts` file and add the following route to the routes list:
+1. `app.routes.ts` 파일을 열고 라우트 목록에 다음 라우트를 추가합니다:
 
     ```ts
     {path: '**', component: PageNotFoundComponent}
     ```
 
-    The new route uses a path, `**`.
-    This path is how Angular identifies a wildcard route.
-    Any route that does not match an existing route in your configuration will use this route.
+    새 라우트는 경로 `**`를 사용합니다.
+    이 경로는 Angular가 와일드카드 라우트를 식별하는 방법입니다.
+    구성에서 정의된 기존 라우트와 일치하지 않는 모든 경로는 이 라우트를 사용합니다.
 
-IMPORTANT: Notice that the wildcard route is placed at the end of the array.
-The order of your routes is important, as Angular applies routes in order and uses the first match it finds.
+중요: 와일드카드 라우트가 배열의 끝에 위치해야 한다는 점에 유의하십시오.
+라우트의 순서는 중요하며 Angular는 순서대로 라우트를 적용하고 처음 일치하는 것을 사용합니다.
 
-Try navigating to a non-existing route on your application, such as `http://localhost:4200/powers`.
-This route doesn't match anything defined in your `app.routes.ts` file.
-However, because you defined a wildcard route, the application automatically displays your `PageNotFound` component.
+애플리케이션에서 존재하지 않는 라우트로 이동해 보십시오, 예를 들어 `http://localhost:4200/powers`.
+이 라우트는 `app.routes.ts` 파일에 정의된 아무것과도 일치하지 않습니다.
+그러나 와일드카드 라우트를 정의했기 때문에 애플리케이션은 자동으로 `PageNotFound` 구성 요소를 표시합니다.
 
-## Next steps
+## 다음 단계
 
-At this point, you have a basic application that uses Angular's routing feature to change what components the user can see based on the URL address.
-You have extended these features to include a redirect, as well as a wildcard route to display a custom 404 page.
+이 시점에서 URL 주소에 따라 사용자가 볼 수 있는 구성 요소를 변경하는 Angular의 라우팅 기능을 사용하는 기본 애플리케이션이 있습니다.
+이 기능을 리디렉션과 함께 확장했으며, 사용자 정의 404 페이지를 표시하기 위한 와일드카드 라우트도 추가했습니다.
 
-For more information about routing, see the following topics:
+라우팅에 대한 자세한 내용은 다음 주제를 참조하십시오:
 
 <docs-pill-row>
-  <docs-pill href="guide/routing/common-router-tasks" title="In-app Routing and Navigation"/>
-  <docs-pill href="api/router/Router" title="Router API"/>
-</docs-pill-row>
+  <docs-pill href="guide/routing/common-router-tasks" title="앱 내 라우팅 및 탐색"/>
+  <docs-pill href="api/router/Router" title="라우터 API"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/guide/routing/routing-with-urlmatcher.md b/adev/src/content/guide/routing/routing-with-urlmatcher.md
index 2368c3f19eb6..93b6d2b6540e 100644
--- a/adev/src/content/guide/routing/routing-with-urlmatcher.md
+++ b/adev/src/content/guide/routing/routing-with-urlmatcher.md
@@ -1,56 +1,56 @@
-# Creating custom route matches
+# 사용자 정의 경로 일치 만들기
 
-The Angular Router supports a powerful matching strategy that you can use to help users navigate your application.
-This matching strategy supports static routes, variable routes with parameters, wildcard routes, and so on.
-Also, build your own custom pattern matching for situations in which the URLs are more complicated.
+Angular Router는 사용자가 애플리케이션을 탐색하는 데 도움을 줄 수 있는 강력한 일치 전략을 지원합니다. 
+이 일치 전략은 정적 경로, 매개변수가 있는 가변 경로, 와일드카드 경로 등을 지원합니다. 
+또한, URL이 더 복잡한 상황을 위해 자신만의 사용자 정의 패턴 일치를 구축할 수 있습니다.
 
-In this tutorial, you'll build a custom route matcher using Angular's `UrlMatcher`.
-This matcher looks for a Twitter handle in the URL.
+이 튜토리얼에서는 Angular의 `UrlMatcher`를 사용하여 사용자 정의 경로 매처를 구축합니다. 
+이 매처는 URL에서 트위터 핸들을 찾습니다.
 
-## Objectives
+## 목표
 
-Implement Angular's `UrlMatcher` to create a custom route matcher.
+Angular의 `UrlMatcher`를 구현하여 사용자 정의 경로 매처를 생성합니다.
 
-## Create a sample application
+## 샘플 애플리케이션 만들기
 
-Using the Angular CLI, create a new application, *angular-custom-route-match*.
-In addition to the default Angular application framework, you will also create a *profile* component.
+Angular CLI를 사용하여 새로운 애플리케이션 *angular-custom-route-match*를 만듭니다. 
+기본 Angular 애플리케이션 프레임워크 외에도 *profile* 구성 요소를 생성합니다.
 
-1. Create a new Angular project, *angular-custom-route-match*.
+1. 새로운 Angular 프로젝트 *angular-custom-route-match*를 만듭니다.
 
     ```shell
     ng new angular-custom-route-match
     ```
 
-    When prompted with `Would you like to add Angular routing?`, select `Y`.
+    `Angular 라우팅을 추가하시겠습니까?`라는 메시지가 나타나면 `Y`를 선택합니다.
 
-    When prompted with `Which stylesheet format would you like to use?`, select `CSS`.
+    `어떤 스타일시트 형식을 사용하시겠습니까?`라는 메시지가 나타나면 `CSS`를 선택합니다.
 
-    After a few moments, a new project, `angular-custom-route-match`, is ready.
+    잠시 후, 새로운 프로젝트 `angular-custom-route-match`가 준비됩니다.
 
-1. From your terminal, navigate to the `angular-custom-route-match` directory.
-1. Create a component, *profile*.
+1. 터미널에서 `angular-custom-route-match` 디렉토리로 이동합니다.
+1. 구성 요소 *profile*을 생성합니다.
 
     ```shell
     ng generate component profile
     ```
 
-1. In your code editor, locate the file, `profile.component.html` and replace the placeholder content with the following HTML.
+1. 코드 편집기에서 `profile.component.html` 파일을 찾아 자리 표시자 콘텐츠를 다음 HTML로 바꿉니다.
 
     <docs-code header="src/app/profile/profile.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.html"/>
 
-1. In your code editor, locate the file, `app.component.html` and replace the placeholder content with the following HTML.
+1. 코드 편집기에서 `app.component.html` 파일을 찾아 자리 표시자 콘텐츠를 다음 HTML로 바꿉니다.
 
     <docs-code header="src/app/app.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.html"/>
 
-## Configure your routes for your application
+## 애플리케이션을 위한 경로 구성
 
-With your application framework in place, you next need to add routing capabilities to the `app.config.ts` file.
-As a part of this process, you will create a custom URL matcher that looks for a Twitter handle in the URL.
-This handle is identified by a preceding `@` symbol.
+애플리케이션 프레임워크가 갖춰졌으므로, 다음으로 `app.config.ts` 파일에 라우팅 기능을 추가해야 합니다. 
+이 과정의 일환으로 URL에서 Twitter 핸들을 찾는 사용자 정의 URL 매처를 생성할 것입니다. 
+이 핸들은 앞에 `@` 기호로 식별됩니다.
 
-1. In your code editor, open your `app.config.ts` file.
-1. Add an `import` statement for Angular's `provideRouter` and `withComponentInputBinding` as well as the application routes.
+1. 코드 편집기에서 `app.config.ts` 파일을 엽니다.
+1. Angular의 `provideRouter` 및 `withComponentInputBinding`에 대한 `import` 문과 애플리케이션 경로를 추가합니다.
 
     ```ts
     import {provideRouter, withComponentInputBinding} from '@angular/router';
@@ -58,59 +58,59 @@ This handle is identified by a preceding `@` symbol.
     import {routes} from './app.routes';
     ```
 
-1. In the providers array, add a `provideRouter(routes, withComponentInputBinding())` statement.
+1. providers 배열에 `provideRouter(routes, withComponentInputBinding())` 문을 추가합니다.
 
-1. Define the custom route matcher by adding the following code to the application routes.
+1. 애플리케이션 경로에 사용자 정의 경로 매처를 정의하기 위해 다음 코드를 추가합니다.
 
     <docs-code header="src/app/app.routes.ts" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.routes.ts" visibleRegion="matcher"/>
 
-This custom matcher is a function that performs the following tasks:
+이 사용자 정의 매처는 다음 작업을 수행하는 함수입니다:
 
-* The matcher verifies that the array contains only one segment
-* The matcher employs a regular expression to ensure that the format of the username is a match
-* If there is a match, the function returns the entire URL, defining a `username` route parameter as a substring of the path
-* If there isn't a match, the function returns null and the router continues to look for other routes that match the URL
+* 매처는 배열이 오직 하나의 세그먼트만 포함하는지 확인합니다.
+* 매처는 정규 표현식을 사용하여 사용자 이름의 형식이 일치하는지 확인합니다.
+* 일치하는 경우, 함수는 전체 URL을 반환하며, 경로의 부분 문자열로서 `username` 경로 매개변수를 정의합니다.
+* 일치하지 않는 경우, 함수는 null을 반환하고 라우터는 URL과 일치하는 다른 경로를 계속 찾습니다.
 
-HELPFUL: A custom URL matcher behaves like any other route definition. Define child routes or lazy loaded routes as you would with any other route.
+도움말: 사용자 정의 URL 매처는 다른 경로 정의와 마찬가지로 동작합니다. 다른 경로와 마찬가지로 자식 경로나 지연 로드 경로를 정의하십시오.
 
-## Reading the route parameters
+## 경로 매개변수 읽기
 
-With the custom matcher in place, you can now bind the route parameter in the `profile` component.
+사용자 정의 매처가 설정되었으므로 이제 `profile` 구성 요소에서 경로 매개변수를 바인딩할 수 있습니다.
 
-In your code editor, open your `profile.component.ts` file and create an `Input` matching the `username` parameter.
-We added the `withComponentInputBinding` feature earlier
-in `provideRouter`. This allows the `Router` to bind information directly to the route components.
+코드 편집기에서 `profile.component.ts` 파일을 열고 `username` 매개변수에 해당하는 `Input`을 만듭니다. 
+우리는 이전에 `provideRouter`에서 `withComponentInputBinding` 기능을 추가했습니다. 
+이것은 `Router`가 정보를 경로 구성 요소에 직접 바인딩할 수 있게 합니다.
 
 ```ts
 @Input() username!: string;
 ```
 
-## Test your custom URL matcher
+## 사용자 정의 URL 매처 테스트 
 
-With your code in place, you can now test your custom URL matcher.
+코드가 준비되었으므로 이제 사용자 정의 URL 매처를 테스트할 수 있습니다.
 
-1. From a terminal window, run the `ng serve` command.
+1. 터미널 창에서 `ng serve` 명령을 실행합니다.
 
     <docs-code language="shell">
     ng serve
     </docs-code>
 
-1. Open a browser to `http://localhost:4200`.
+1. 브라우저를 열어 `http://localhost:4200`로 이동합니다.
 
-    You should see a single web page, consisting of a sentence that reads `Navigate to my profile`.
+    `내 프로필로 이동`이라고 적힌 문장으로 구성된 단일 웹 페이지를 볼 수 있어야 합니다.
 
-1. Click the **my profile** hyperlink.
+1. **내 프로필** 하이퍼링크를 클릭합니다.
 
-    A new sentence, reading `Hello, Angular!` appears on the page.
+    `안녕하세요, Angular!`라는 새로운 문장이 페이지에 나타납니다.
 
-## Next steps
+## 다음 단계
 
-Pattern matching with the Angular Router provides you with a lot of flexibility when you have dynamic URLs in your application.
-To learn more about the Angular Router, see the following topics:
+Angular Router의 패턴 일치는 애플리케이션에 동적 URL이 있을 때 많은 유연성을 제공합니다. 
+Angular Router에 대해 더 알아보려면 다음 주제를 참조하십시오:
 
 <docs-pill-row>
-  <docs-pill href="guide/routing/common-router-tasks" title="In-app Routing and Navigation"/>
-  <docs-pill href="api/router/Router" title="Router API"/>
+  <docs-pill href="guide/routing/common-router-tasks" title="애플리케이션 내 라우팅 및 탐색"/>
+  <docs-pill href="api/router/Router" title="라우터 API"/>
 </docs-pill-row>
 
-HELPFUL: This content is based on [Custom Route Matching with the Angular Router](https://medium.com/@brandontroberts/custom-route-matching-with-the-angular-router-fbdd48665483), by [Brandon Roberts](https://twitter.com/brandontroberts).
+도움말: 이 콘텐츠는 [Angular Router로 사용자 정의 경로 매칭](https://medium.com/@brandontroberts/custom-route-matching-with-the-angular-router-fbdd48665483), [Brandon Roberts](https://twitter.com/brandontroberts) 작성에 기반합니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/security.md b/adev/src/content/guide/security.md
index 6ad5dffac345..00506e5d6509 100644
--- a/adev/src/content/guide/security.md
+++ b/adev/src/content/guide/security.md
@@ -1,111 +1,83 @@
-# Security
+# 보안
 
-This topic describes Angular's built-in protections against common web application vulnerabilities and attacks such as cross-site scripting attacks.
-It doesn't cover application-level security, such as authentication and authorization.
+이 주제에서는 Angular의 웹 애플리케이션에서 발생할 수 있는 일반적인 취약성과 공격, 예를 들어 크로스 사이트 스크립팅 공격에 대한 내장 보호 기능을 설명합니다. 인증 및 권한 부여와 같은 애플리케이션 수준의 보안은 다루지 않습니다.
 
-For more information about the attacks and mitigations described below, see the [Open Web Application Security Project (OWASP) Guide](https://www.owasp.org/index.php/Category:OWASP_Guide_Project).
+아래 설명된 공격 및 완화 조치에 대한 자세한 내용은 [Open Web Application Security Project (OWASP) 가이드](https://www.owasp.org/index.php/Category:OWASP_Guide_Project)를 참조하세요.
 
 <a id="report-issues"></a>
 
-<docs-callout title="Reporting vulnerabilities">
+<docs-callout title="취약점 신고">
 
-Angular is part of Google [Open Source Software Vulnerability Reward Program](https://bughunters.google.com/about/rules/6521337925468160/google-open-source-software-vulnerability-reward-program-rules). For vulnerabilities in Angular, please submit your report at [https://bughunters.google.com](https://bughunters.google.com/report).
+Angular는 Google의 [오픈 소스 소프트웨어 취약점 보상 프로그램](https://bughunters.google.com/about/rules/6521337925468160/google-open-source-software-vulnerability-reward-program-rules)의 일환입니다. Angular의 취약점에 대해서는 [https://bughunters.google.com](https://bughunters.google.com/report)에서 신고해 주세요.
 
-For more information about how Google handles security issues, see [Google's security philosophy](https://www.google.com/about/appsecurity).
+Google이 보안 문제를 처리하는 방법에 대한 자세한 내용은 [Google의 보안 철학](https://www.google.com/about/appsecurity)을 참조하세요.
 
 </docs-callout>
 
-## Best practices
+## 모범 사례
 
-These are some best practices to ensure that your Angular application is secure.
+Angular 애플리케이션이 안전하도록 하기 위해 기억해야 할 몇 가지 모범 사례입니다.
 
-1. **Keep current with the latest Angular library releases** - The Angular libraries get regular updates, and these updates might fix security defects discovered in previous versions. Check the Angular [change log](https://github.com/angular/angular/blob/main/CHANGELOG.md) for security-related updates.
-2. **Don't alter your copy of Angular** - Private, customized versions of Angular tend to fall behind the current version and might not include important security fixes and enhancements. Instead, share your Angular improvements with the community and make a pull request.
-3. **Avoid Angular APIs marked in the documentation as "_Security Risk_"** - For more information, see the [Trusting safe values](#trusting-safe-values) section of this page.
+1. **최신 Angular 라이브러리 릴리스에 유지하기** - Angular 라이브러리는 정기적으로 업데이트되며, 이러한 업데이트는 이전 버전에서 발견된 보안 결함을 수정할 수 있습니다. 보안 관련 업데이트는 Angular [변경 로그](https://github.com/angular/angular/blob/main/CHANGELOG.md)를 확인하세요.
+2. **Angular 사본을 수정하지 않기** - 비공식적인 맞춤형 Angular 버전은 최신 버전에서 뒤처질 수 있으며, 중요한 보안 수정 및 향상이 포함되지 않을 수 있습니다. 대신, 커뮤니티와 Angular 개선 사항을 공유하고 풀 리퀘스트를 작성하세요.
+3. **문서에서 “_보안 위험_”으로 표시된 Angular API를 피하기** - 자세한 내용은 이 페이지의 [안전한 값 신뢰하기](#trusting-safe-values) 섹션을 참조하세요.
 
-## Preventing cross-site scripting (XSS)
+## 크로스 사이트 스크립팅(XSS) 방지
 
-[Cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) enables attackers to inject malicious code into web pages.
-Such code can then, for example, steal user and login data, or perform actions that impersonate the user.
-This is one of the most common attacks on the web.
+[크로스 사이트 스크립팅(XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) 공격자는 웹 페이지에 악성 코드를 주입할 수 있습니다. 그런 코드는 사용자 및 로그인 데이터를 훔치거나 사용자를 가장한 작업을 수행할 수 있습니다. 이는 웹에서 가장 일반적인 공격 중 하나입니다.
 
-To block XSS attacks, you must prevent malicious code from entering the Document Object Model (DOM).
-For example, if attackers can trick you into inserting a `<script>` tag in the DOM, they can run arbitrary code on your website.
-The attack isn't limited to `<script>` tags —many elements and properties in the DOM allow code execution, for example, `<img alt="" onerror="...">` and `<a href="javascript:...">`.
-If attacker-controlled data enters the DOM, expect security vulnerabilities.
+XSS 공격을 차단하려면 악성 코드가 문서 객체 모델(DOM)에 들어오는 것을 방지해야 합니다. 예를 들어, 공격자가 DOM에 `<script>` 태그를 삽입하도록 속일 수 있다면, 그들은 귀하의 웹사이트에서 임의의 코드를 실행할 수 있습니다. 이 공격은 `<script>` 태그에 국한되지 않으며, DOM 내에서 코드를 실행할 수 있는 많은 요소 및 속성이 존재합니다. 예를 들어 `<img alt="" onerror="...">` 및 `<a href="javascript:...">`와 같습니다. 공격자가 제어하는 데이터가 DOM에 들어오면 보안 취약점이 발생할 수 있습니다.
 
-### Angular's cross-site scripting security model
+### Angular의 크로스 사이트 스크립팅 보안 모델
 
-To systematically block XSS bugs, Angular treats all values as untrusted by default.
-When a value is inserted into the DOM from a template binding, or interpolation, Angular sanitizes and escapes untrusted values.
-If a value was already sanitized outside of Angular and is considered safe, communicate this to Angular by marking the [value as trusted](#trusting-safe-values).
+Angular는 XSS 버그를 체계적으로 차단하기 위해 기본적으로 모든 값을 신뢰할 수 없는 것으로 간주합니다. 템플릿 바인딩 또는 보간에서 DOM에 값이 삽입될 때 Angular는 신뢰할 수 없는 값을 청소하고 이스케이프합니다. 만약 값이 Angular 외부에서 이미 청소되고 안전한 것으로 간주된다면, [신뢰된 값으로 마킹](#trusting-safe-values)하여 Angular에 이를 알려주세요.
 
-Unlike values to be used for rendering, Angular templates are considered trusted by default, and should be treated as executable code.
-Never create templates by concatenating user input and template syntax.
-Doing this would enable attackers to [inject arbitrary code](https://en.wikipedia.org/wiki/Code_injection) into your application.
-To prevent these vulnerabilities, always use the default [Ahead-Of-Time (AOT) template compiler](#use-the-aot-template-compiler) in production deployments.
+렌더링에 사용될 값과는 달리 Angular 템플릿은 기본적으로 신뢰할 수 있는 것으로 간주되며 실행 가능한 코드로 처리되어야 합니다. 사용자 입력과 템플릿 구문을 연결하여 템플릿을 만들지 마세요. 이렇게 하면 공격자가 귀하의 애플리케이션에 [임의의 코드](https://en.wikipedia.org/wiki/Code_injection)를 주입할 수 있습니다. 이러한 취약점을 방지하기 위해 항상 프로덕션 배포에서 기본 [사전 컴파일 시간(AOT) 템플릿 컴파일러](#use-the-aot-template-compiler)를 사용하세요.
 
-An extra layer of protection can be provided through the use of Content security policy and Trusted Types.
-These web platform features operate at the DOM level which is the most effective place to prevent XSS issues. Here they can't be bypassed using other, lower-level APIs.
-For this reason, it is strongly encouraged to take advantage of these features. To do this, configure the [content security policy](#content-security-policy) for the application and enable [trusted types enforcement](#enforcing-trusted-types).
+추가적인 보호 레이어는 콘텐츠 보안 정책 및 신뢰할 수 있는 타입을 사용하여 제공될 수 있습니다. 이러한 웹 플랫폼 기능은 DOM 레벨에서 작동하여 XSS 문제를 예방하는 가장 효과적인 장소입니다. 여기서는 다른 낮은 수준의 API를 사용하여 우회할 수 없습니다. 이러한 이유로 이러한 기능을 활용하는 것이 강력히 권장됩니다. 이를 위해 애플리케이션에 대한 [콘텐츠 보안 정책](#content-security-policy)을 구성하고 [신뢰된 타입 시행](#enforcing-trusted-types)을 활성화하세요.
 
-### Sanitization and security contexts
+### 청소 및 보안 컨텍스트
 
-*Sanitization* is the inspection of an untrusted value, turning it into a value that's safe to insert into the DOM.
-In many cases, sanitization doesn't change a value at all.
-Sanitization depends on a context.
-For example, a value that's harmless in CSS is potentially dangerous in a URL.
+*청소*는 신뢰할 수 없는 값을 검사하여 DOM에 삽입할 수 있게 안전한 값으로 바꾸는 것입니다. 많은 경우에 청소는 값을 전혀 변경하지 않습니다. 청소는 컨텍스트에 따라 다릅니다. 예를 들어, CSS에서는 해롭지 않은 값이 URL에서는 잠재적으로 위험할 수 있습니다.
 
-Angular defines the following security contexts:
+Angular는 다음과 같은 보안 컨텍스트를 정의합니다:
 
-| Security contexts | Details                                                                           |
-| :---------------- | :-------------------------------------------------------------------------------- |
-| HTML              | Used when interpreting a value as HTML, for example, when binding to `innerHtml`. |
-| Style             | Used when binding CSS into the `style` property.                                  |
-| URL               | Used for URL properties, such as `<a href>`.                                      |
-| Resource URL      | A URL that is loaded and executed as code, for example, in `<script src>`.        |
+| 보안 컨텍스트      | 세부 사항                                                                          |
+| :----------------- | :--------------------------------------------------------------------------------- |
+| HTML               | 값을 HTML로 해석할 때 사용됩니다. 예를 들어, `innerHtml`에 바인딩할 때입니다.   |
+| 스타일            | `style` 속성에 CSS를 바인딩할 때 사용됩니다.                                     |
+| URL                | `<a href>`와 같은 URL 속성에 사용됩니다.                                        |
+| 리소스 URL         | 코드로 실행되도록 로드되는 URL 예를 들어, `<script src>`에 사용됩니다.          |
 
-Angular sanitizes untrusted values for HTML and URLs. Sanitizing resource URLs isn't possible because they contain arbitrary code.
-In development mode, Angular prints a console warning when it has to change a value during sanitization.
+Angular는 HTML 및 URL에 대한 신뢰할 수 없는 값을 청소합니다. 리소스 URL을 청소하는 것은 불가능합니다. 이에 따라 임의의 코드가 포함될 수 있습니다. 개발 모드에서는 Angular가 청소 중 값을 변경해야 할 때 콘솔 경고를 인쇄합니다.
 
-### Sanitization example
+### 청소 예시
 
-The following template binds the value of `htmlSnippet`. Once by interpolating it into an element's content, and once by binding it to the `innerHTML` property of an element:
+다음 템플릿은 `htmlSnippet`의 값을 바인딩합니다. 한 번은 요소의 콘텐츠에 보간하여, 또 한 번은 요소의 `innerHTML` 속성에 바인딩하여 사용합니다:
 
 <docs-code header="src/app/inner-html-binding.component.html" path="adev/src/content/examples/security/src/app/inner-html-binding.component.html"/>
 
-Interpolated content is always escaped —the HTML isn't interpreted and the browser displays angle brackets in the element's text content.
+보간된 콘텐츠는 항상 이스케이프됩니다 — HTML은 해석되지 않고 브라우저는 요소의 텍스트 콘텐츠에 각괄호(<>)를 표시합니다.
 
-For the HTML to be interpreted, bind it to an HTML property such as `innerHTML`.
-Be aware that binding a value that an attacker might control into `innerHTML` normally causes an XSS vulnerability.
-For example, one could run JavaScript in a following way:
+HTML을 해석하려면 `innerHTML`과 같은 HTML 속성에 바인딩하세요. 공격자가 제어할 수 있는 값을 `innerHTML`에 바인딩하는 것은 일반적으로 XSS 취약점을 초래합니다. 예를 들어, JavaScript를 다음과 같이 실행할 수 있습니다:
 
 <docs-code header="src/app/inner-html-binding.component.ts (class)" path="adev/src/content/examples/security/src/app/inner-html-binding.component.ts" visibleRegion="class"/>
 
-Angular recognizes the value as unsafe and automatically sanitizes it, which removes the `script` element but keeps safe content such as the `<b>` element.
+Angular는 값을 안전하지 않은 것으로 인식하고 자동으로 청소하여 `script` 요소를 제거하고 `<b>` 요소와 같은 안전한 콘텐츠는 유지합니다.
 
-<img alt="A screenshot showing interpolated and bound HTML values" src="assets/images/guide/security/binding-inner-html.png#small">
+<img alt="Interpolated and bound HTML values" src="assets/images/guide/security/binding-inner-html.png#small">
 
-### Direct use of the DOM APIs and explicit sanitization calls
+### DOM API의 직접 사용 및 명시적 청소 호출
 
-Unless you enforce Trusted Types, the built-in browser DOM APIs don't automatically protect you from security vulnerabilities.
-For example, `document`, the node available through `ElementRef`, and many third-party APIs contain unsafe methods.
-Likewise, if you interact with other libraries that manipulate the DOM, you likely won't have the same automatic sanitization as with Angular interpolations.
-Avoid directly interacting with the DOM and instead use Angular templates where possible.
+신뢰할 수 있는 타입을 시행하지 않는 한, 기본 제공 브라우저 DOM API는 보안 취약점으로부터 자동으로 보호해 주지 않습니다. 예를 들어, `document`, `ElementRef`를 통해 사용할 수 있는 노드 및 많은 서드파티 API는 안전하지 않은 메서드를 포함합니다. 마찬가지로 DOM을 조작하는 다른 라이브러리와 상호작용할 경우 Angular 보간과 같은 자동 청소가 없을 수 있습니다. DOM과 직접 상호작용하는 것을 피하고 가능한 경우 Angular 템플릿을 사용하세요.
 
-For cases where this is unavoidable, use the built-in Angular sanitization functions.
-Sanitize untrusted values with the [DomSanitizer.sanitize](api/platform-browser/DomSanitizer#sanitize) method and the appropriate `SecurityContext`.
-That function also accepts values that were marked as trusted using the `bypassSecurityTrust` functions, and does not sanitize them, as [described below](#trusting-safe-values).
+이것이 불가피한 경우, Angular의 내장 청소 함수를 사용하세요. [DomSanitizer.sanitize](api/platform-browser/DomSanitizer#sanitize) 메서드와 적절한 `SecurityContext`를 사용하여 신뢰할 수 없는 값을 청소합니다. 이 함수는 `bypassSecurityTrust` 함수로 신뢰된 것으로 마킹된 값도 수락하며, 이에 대해서는 [신뢰된 값으로 마킹하기](#trusting-safe-values)에서 설명하고 있습니다.
 
-### Trusting safe values
+### 안전한 값 신뢰하기
 
-Sometimes applications genuinely need to include executable code, display an `<iframe>` from some URL, or construct potentially dangerous URLs.
-To prevent automatic sanitization in these situations, tell Angular that you inspected a value, checked how it was created, and made sure it is secure.
-Do _be careful_.
-If you trust a value that might be malicious, you are introducing a security vulnerability into your application.
-If in doubt, find a professional security reviewer.
+때때로 애플리케이션은 실행 가능한 코드를 포함하거나, 특정 URL에서 `<iframe>`을 표시하거나, 잠재적으로 위험한 URL을 구성해야 할 필요가 있습니다. 이러한 상황에서 자동 청소를 방지하려면 Angular에 값을 검사했고, 생성 방법을 확인했으며 안전하다는 것을 알리세요. _주의하세요_. 악성 코드일 수 있는 값을 신뢰하면 애플리케이션에 보안 취약점을 도입하게 됩니다. 의심스러운 경우 경험이 풍부한 보안 검토자를 찾으세요.
 
-To mark a value as trusted, inject `DomSanitizer` and call one of the following methods:
+값을 신뢰된 것으로 마킹하기 위해 `DomSanitizer`를 주입하고 다음 메서드 중 하나를 호출하세요:
 
 * `bypassSecurityTrustHtml`
 * `bypassSecurityTrustScript`
@@ -113,34 +85,27 @@ To mark a value as trusted, inject `DomSanitizer` and call one of the following
 * `bypassSecurityTrustUrl`
 * `bypassSecurityTrustResourceUrl`
 
-Remember, whether a value is safe depends on context, so choose the right context for your intended use of the value.
-Imagine that the following template needs to bind a URL to a `javascript:alert(...)` call:
+값의 안전 여부는 컨텍스트에 따라 다르므로, 의도한 사용에 맞는 올바른 컨텍스트를 선택하세요. 다음 템플릿이 `javascript:alert(...)` 호출에 URL을 바인딩해야 한다고 가정해 보겠습니다:
 
 <docs-code header="src/app/bypass-security.component.html (URL)" path="adev/src/content/examples/security/src/app/bypass-security.component.html" visibleRegion="URL"/>
 
-Normally, Angular automatically sanitizes the URL, disables the dangerous code, and in development mode, logs this action to the console.
-To prevent this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` call:
+보통 Angular는 URL을 자동으로 청소하고 위험한 코드를 비활성화하며, 개발 모드에서는 이 작업을 콘솔에 기록합니다. 이를 방지하려면 `bypassSecurityTrustUrl` 호출을 사용하여 URL 값을 신뢰된 URL로 표시하세요:
 
 <docs-code header="src/app/bypass-security.component.ts (trust-url)" path="adev/src/content/examples/security/src/app/bypass-security.component.ts" visibleRegion="trust-url"/>
 
-<img alt="A screenshot showing an alert box created from a trusted URL" src="assets/images/guide/security/bypass-security-component.png#medium">
+<img alt="신뢰된 URL에서 생성된 알림 상자의 스크린샷" src="assets/images/guide/security/bypass-security-component.png#medium">
 
-If you need to convert user input into a trusted value, use a component method.
-The following template lets users enter a YouTube video ID and load the corresponding video in an `<iframe>`.
-The `<iframe src>` attribute is a resource URL security context, because an untrusted source can, for example, smuggle in file downloads that unsuspecting users could run.
-To prevent this, call a method on the component to construct a trusted video URL, which causes Angular to let binding into `<iframe src>`:
+사용자 입력을 신뢰된 값으로 변환해야 할 경우 컴포넌트 메서드를 사용하세요. 다음 템플릿은 사용자가 YouTube 비디오 ID를 입력하고 해당 비디오를 `<iframe>`에서 로드하도록 허용합니다. `<iframe src>` 속성은 리소스 URL 보안 컨텍스트입니다. 신뢰할 수 없는 소스가 예를 들어, 사용자들이 실행할 수 있는 파일 다운로드를 몰래 숨길 수 있기 때문입니다. 이를 방지하기 위해, 신뢰된 비디오 URL을 구성하는 컴포넌트의 메서드를 호출하여 Angular가 `<iframe src>`에 바인딩할 수 있도록 합니다:
 
 <docs-code header="src/app/bypass-security.component.html (iframe)" path="adev/src/content/examples/security/src/app/bypass-security.component.html" visibleRegion="iframe"/>
 
 <docs-code header="src/app/bypass-security.component.ts (trust-video-url)" path="adev/src/content/examples/security/src/app/bypass-security.component.ts" visibleRegion="trust-video-url"/>
 
-### Content security policy
+### 콘텐츠 보안 정책
 
-Content Security Policy \(CSP\) is a defense-in-depth technique to prevent XSS.
-To enable CSP, configure your web server to return an appropriate `Content-Security-Policy` HTTP header.
-Read more about content security policy at the [Web Fundamentals guide](https://developers.google.com/web/fundamentals/security/csp) on the Google Developers website.
+콘텐츠 보안 정책(CSP)은 XSS를 방지하기 위한 심층 방어 기술입니다. CSP를 활성화하려면 웹 서버를 구성하여 적절한 `Content-Security-Policy` HTTP 헤더를 반환하도록 합니다. Google 개발자 웹사이트의 [웹 기초 가이드](https://developers.google.com/web/fundamentals/security/csp)에서 콘텐츠 보안 정책에 대한 자세한 내용을 읽어보세요.
 
-The minimal policy required for a brand-new Angular application is:
+새로운 Angular 애플리케이션에 필요한 최소 정책은 다음과 같습니다:
 
 <docs-code language="text">
 
@@ -148,12 +113,10 @@ default-src 'self'; style-src 'self' 'nonce-randomNonceGoesHere'; script-src 'se
 
 </docs-code>
 
-When serving your Angular application, the server should include a  randomly-generated nonce in the HTTP header for each request.
-You must provide this nonce to Angular so that the framework can render `<style>` elements.
-You can set the nonce for Angular in one of two ways:
+Angular 애플리케이션을 제공할 때 서버는 각 요청에 대해 무작위로 생성된 nonce를 HTTP 헤더에 포함해야 합니다. 이 nonce를 Angular에 제공해야 `<style>` 요소를 렌더링할 수 있습니다. Angular의 nonce를 설정하는 방법은 두 가지입니다:
 
-1. Set the `ngCspNonce` attribute on the root application element as `<app ngCspNonce="randomNonceGoesHere"></app>`. Use this approach if you have access to server-side templating that can add the nonce both to the header and the `index.html` when constructing the response.
-2. Provide the nonce using the `CSP_NONCE` injection token. Use this approach if you have access to the nonce at runtime and you want to be able to cache the `index.html`.
+1. 루트 애플리케이션 요소에 `ngCspNonce` 속성을 설정합니다: `<app ngCspNonce="randomNonceGoesHere"></app>`. 서버 측 템플릿을 사용하여 응답을 구성할 때 헤더와 `index.html` 모두에 nonce를 추가할 수 있는 경우 이 방법을 사용하세요.
+2. 런타임에 nonce에 접근할 수 있고 `index.html`을 캐시할 수 있게 하려면 `CSP_NONCE` 주입 토큰을 사용하여 nonce를 제공하세요.
 
 <docs-code language="typescript">
 
@@ -169,55 +132,49 @@ bootstrapApplication(AppComponent, {
 
 </docs-code>
 
-<docs-callout title="Unique nonces">
+<docs-callout title="고유 nonce">
 
-Always ensure that the nonces you provide are <strong>unique per request</strong> and that they are not predictable or guessable.
-If an attacker can predict future nonces, they can circumvent the protections offered by CSP.
+제공하는 nonce가 <strong>각 요청마다 고유한지</strong> 확인하고 예측 가능하거나 추측할 수 없도록 하세요. 공격자가 미래의 nonce를 예측할 수 있다면 CSP로 제공되는 보호를 우회할 수 있습니다.
 
 </docs-callout>
 
-If you cannot generate nonces in your project, you can allow inline styles by adding `'unsafe-inline'` to the `style-src` section of the CSP header.
+프로젝트에서 nonce를 생성할 수 없는 경우 CSP 헤더의 `style-src` 섹션에 `'unsafe-inline'`을 추가하여 인라인 스타일을 허용할 수 있습니다.
 
-| Sections                                         | Details                                                                                                                                                                                                         |
-| :----------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `default-src 'self';`                            | Allows the page to load all its required resources from the same origin.                                                                                                                                        |
-| `style-src 'self' 'nonce-randomNonceGoesHere';`  | Allows the page to load global styles from the same origin \(`'self'`\) and styles inserted by Angular with the `nonce-randomNonceGoesHere`.                                                                    |
-| `script-src 'self' 'nonce-randomNonceGoesHere';` | Allows the page to load JavaScript from the same origin \(`'self'`\) and scripts inserted by the Angular CLI with the `nonce-randomNonceGoesHere`. This is only required if you're using critical CSS inlining. |
+| 섹션                                         | 세부 사항                                                                                                                                                                                                          |
+| :------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `default-src 'self';`                        | 페이지가 필요한 모든 리소스를 같은 출처에서 로드할 수 있도록 허용합니다.                                                                                                                                      |
+| `style-src 'self' 'nonce-randomNonceGoesHere';` | 페이지가 같은 출처(`'self'`)의 글로벌 스타일 및 Angular에서 삽입한 스타일을 사용할 수 있도록 허용합니다.                                                                                                          |
+| `script-src 'self' 'nonce-randomNonceGoesHere';` | 페이지가 같은 출처(`'self'`)의 JavaScript와 Angular CLI에서 삽입한 스크립트를 사용할 수 있도록 허용합니다. 이는 크리티컬 CSS 인라인을 사용하는 경우에만 필요합니다.                                |
 
-Angular itself requires only these settings to function correctly.
-As your project grows, you may need to expand your CSP settings to accommodate extra features specific to your application.
+Angular 자체는 올바르게 작동하는 데 필요한 이러한 설정만 요구합니다. 프로젝트가 커짐에 따라 애플리케이션에 특정한 추가 기능을 수용하기 위해 CSP 설정을 확장해야 할 수 있습니다.
 
-### Enforcing Trusted Types
+### 신뢰된 타입 시행
 
-It is recommended that you use [Trusted Types](https://w3c.github.io/trusted-types/dist/spec/) as a way to help secure your applications from cross-site scripting attacks.
-Trusted Types is a [web platform](https://en.wikipedia.org/wiki/Web_platform) feature that can help you prevent cross-site scripting attacks by enforcing safer coding practices.
-Trusted Types can also help simplify the auditing of application code.
+앱이 크로스 사이트 스크립팅 공격으로부터 보호되는 데 도움을 주기 위해 [신뢰된 타입](https://w3c.github.io/trusted-types/dist/spec/)을 사용하는 것이 좋습니다. 신뢰된 타입은 보다 안전한 코딩 관행을 시행하여 XSS 공격을 방지할 수 있는 [웹 플랫폼](https://en.wikipedia.org/wiki/Web_platform) 기능입니다. 신뢰된 타입은 애플리케이션 코드의 감사 작업을 단순화하는 데 도움이 될 수도 있습니다.
 
-<docs-callout title="Trusted types">
+<docs-callout title="신뢰된 타입">
 
-Trusted Types might not yet be available in all browsers your application targets.
-In the case your Trusted-Types-enabled application runs in a browser that doesn't support Trusted Types, the features of the application are preserved. Your application is guarded against XSS by way of Angular's DomSanitizer.
-See [caniuse.com/trusted-types](https://caniuse.com/trusted-types) for the current browser support.
+신뢰된 타입은 귀하의 애플리케이션이 대상하는 모든 브라우저에서 사용할 수 없을 수도 있습니다. 신뢰된 타입을 지원하지 않는 브라우저에서 신뢰된 타입 사용이 가능한 애플리케이션이 실행될 경우 애플리케이션의 기능은 유지됩니다. Angular의 DomSanitizer를 통해 XSS로부터 보호됩니다. 현재 브라우저 지원 상태는 [caniuse.com/trusted-types](https://caniuse.com/trusted-types)를 참조하세요.
 
 </docs-callout>
 
-To enforce Trusted Types for your application, you must configure your application's web server to emit HTTP headers with one of the following Angular policies:
+애플리케이션에 대해 신뢰된 타입을 시행하려면 애플리케이션의 웹 서버를 구성하여 다음 Angular 정책 중 하나를 방출하는 HTTP 헤더를 설정해야 합니다:
 
-| Policies                 | Detail                                                                                                                                                                                                                                                                                     |
-| :----------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `angular`                | This policy is used in security-reviewed code that is internal to Angular, and is required for Angular to function when Trusted Types are enforced. Any inline template values or content sanitized by Angular is treated as safe by this policy.                                          |
-| `angular#bundler`        | This policy is used by the Angular CLI bundler when creating lazy chunk files.                                                                                                                                                                                                             |
-| `angular#unsafe-bypass`  | This policy is used for applications that use any of the methods in Angular's [DomSanitizer](api/platform-browser/DomSanitizer) that bypass security, such as `bypassSecurityTrustHtml`. Any application that uses these methods must enable this policy.                                  |
-| `angular#unsafe-jit`     | This policy is used by the [Just-In-Time (JIT) compiler](api/core/Compiler). You must enable this policy if your application interacts directly with the JIT compiler or is running in JIT mode using the [platform browser dynamic](api/platform-browser-dynamic/platformBrowserDynamic). |
-| `angular#unsafe-upgrade` | This policy is used by the [@angular/upgrade](api/upgrade/static/UpgradeModule) package. You must enable this policy if your application is an AngularJS hybrid. |
+| 정책                     | 세부 사항                                                                                                                                                                                                                                                      |
+| :----------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `angular`                | 신뢰된 타입이 시행될 때 Angular가 작동하기 위해 필요한 보안 검토 코드에 사용되는 정책입니다. Angular로 청소된 인라인 템플릿 값이나 콘텐츠는 이 정책에 의해 안전한 것으로 간주됩니다.                                                                                                      |
+| `angular#bundler`        | 이 정책은 Angular CLI 번들러가 지연 청크 파일을 생성할 때 사용됩니다.                                                                                                                                                                                                 |
+| `angular#unsafe-bypass`  | 이 정책은 `bypassSecurityTrustHtml` 등의 Angular의 보안을 우회하는 메서드를 사용하는 애플리케이션에 사용됩니다. 이러한 메서드를 사용하는 애플리케이션은 이 정책을 활성화해야 합니다.                                                                                |
+| `angular#unsafe-jit`     | 이 정책은 [즉시 컴파일(JIT) 컴파일러](api/core/Compiler)에서 사용됩니다. JIT 컴파일러와 직접 상호작용하거나 [플랫폼 브라우저 동적](api/platform-browser-dynamic/platformBrowserDynamic) 사용 중인 경우 이 정책을 활성화해야 합니다.                           |
+| `angular#unsafe-upgrade` | 이 정책은 [@angular/upgrade](api/upgrade/static/UpgradeModule) 패키지에서 사용됩니다. 응용 프로그램이 AngularJS 하이브리드일 경우 이 정책을 활성화해야 합니다.                                                                                                |
 
-You should configure the HTTP headers for Trusted Types in the following locations:
+신뢰된 타입에 대한 HTTP 헤더를 다음 위치에서 구성해야 합니다:
 
-* Production serving infrastructure
-* Angular CLI \(`ng serve`\), using the `headers` property in the `angular.json` file, for local development and end-to-end testing
-* Karma \(`ng test`\), using the `customHeaders` property in the `karma.config.js` file, for unit testing
+* 생산 제공 인프라
+* Angular CLI(`ng serve`), `angular.json` 파일의 `headers` 속성을 사용하여 로컬 개발 및 종단 간 테스트
+* Karma(`ng test`), `karma.config.js` 파일의 `customHeaders` 속성을 사용하여 단위 테스트
 
-The following is an example of a header specifically configured for Trusted Types and Angular:
+다음은 신뢰된 타입 및 Angular에 대해 특별히 구성된 헤더의 예입니다:
 
 <docs-code language="html">
 
@@ -225,7 +182,7 @@ Content-Security-Policy: trusted-types angular; require-trusted-types-for 'scrip
 
 </docs-code>
 
-An example of a header specifically configured for Trusted Types and Angular applications that use any of Angular's methods in [DomSanitizer](api/platform-browser/DomSanitizer) that bypasses security:
+다음은 신뢰된 타입 및 Angular의 보안 우회를 우회하는 Angular의 메서드를 사용하는 애플리케이션에 대해 특별히 구성된 헤더의 예입니다:
 
 <docs-code language="html">
 
@@ -233,7 +190,7 @@ Content-Security-Policy: trusted-types angular angular#unsafe-bypass; require-tr
 
 </docs-code>
 
-The following is an example of a header specifically configured for Trusted Types and Angular applications using JIT:
+다음은 JIT를 사용하는 신뢰된 타입 및 Angular 애플리케이션에 대해 특별히 구성된 헤더의 예입니다:
 
 <docs-code language="html">
 
@@ -241,7 +198,7 @@ Content-Security-Policy: trusted-types angular angular#unsafe-jit; require-trust
 
 </docs-code>
 
-The following is an example of a header specifically configured for Trusted Types and Angular applications that use lazy loading of modules:
+다음은 지연 로딩 모듈을 사용하는 신뢰된 타입 및 Angular 애플리케이션에 대해 특별히 구성된 헤더의 예입니다:
 
 <docs-code language="html">
 
@@ -249,84 +206,67 @@ Content-Security-Policy: trusted-types angular angular#bundler; require-trusted-
 
 </docs-code>
 
-<docs-callout title="Community contributions">
+<docs-callout title="커뮤니티 기여">
 
-To learn more about troubleshooting Trusted Type configurations, the following resource might be helpful:
+신뢰된 타입 구성 문제를 해결하는 방법에 대해 더 알고 싶다면 다음 자원이 유용할 수 있습니다:
 
-[Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types](https://web.dev/trusted-types/#how-to-use-trusted-types)
+[신뢰된 타입으로 DOM 기반 크로스 사이트 스크립팅 취약점 방지](https://web.dev/trusted-types/#how-to-use-trusted-types)
 
 </docs-callout>
 
-### Use the AOT template compiler
+### AOT 템플릿 컴파일러 사용하기
 
-The AOT template compiler prevents a whole class of vulnerabilities called template injection, and greatly improves application performance.
-The AOT template compiler is the default compiler used by Angular CLI applications, and you should use it in all production deployments.
+AOT 템플릿 컴파일러는 템플릿 주입이라는 전반적인 유형의 취약점을 방지하고 애플리케이션 성능을 크게 개선합니다. AOT 템플릿 컴파일러는 Angular CLI 애플리케이션에서 사용되는 기본 컴파일러이며 모든 프로덕션 배포에서 사용해야 합니다.
 
-An alternative to the AOT compiler is the JIT compiler which compiles templates to executable template code within the browser at runtime.
-Angular trusts template code, so dynamically generating templates and compiling them, in particular templates containing user data, circumvents Angular's built-in protections. This is a security anti-pattern.
-For information about dynamically constructing forms in a safe way, see the [Dynamic Forms](guide/forms/dynamic-forms) guide.
+AOT 컴파일러의 대안은 JIT 컴파일러로, 런타임 시 브라우저 내에서 실행 가능한 템플릿 코드로 템플릿을 컴파일합니다. Angular는 템플릿 코드를 신뢰하므로, 특히 사용자 데이터를 포함한 템플릿을 동적으로 생성하고 컴파일하는 것은 Angular의 내장 방어를 우회하는 보안 안티 패턴입니다. 안전하게 동적으로 폼을 구성하는 방법에 대한 정보는 [동적 폼](guide/forms/dynamic-forms) 가이드를 참고하세요.
 
-### Server-side XSS protection
+### 서버 측 XSS 보호
 
-HTML constructed on the server is vulnerable to injection attacks.
-Injecting template code into an Angular application is the same as injecting executable code into the application:
-It gives the attacker full control over the application.
-To prevent this, use a templating language that automatically escapes values to prevent XSS vulnerabilities on the server.
-Don't create Angular templates on the server side using a templating language. This carries a high risk of introducing template-injection vulnerabilities.
+서버에서 생성된 HTML은 주입 공격에 취약합니다. Angular 애플리케이션에 템플릿 코드를 주입하는 것은 실행 가능한 코드를 애플리케이션에 주입하는 것과 같습니다. 이는 공격자에게 애플리케이션에 대한 완전한 제어권을 부여합니다. 이를 방지하려면 XSS 취약점을 방지하기 위해 값을 자동으로 이스케이프하는 템플릿 언어를 사용하세요. 서버 측에서 템플릿 언어를 사용하여 Angular 템플릿을 생성하지 마세요. 이는 템플릿 주입 취약점이 발생할 가능성이 매우 높습니다.
 
-## HTTP-level vulnerabilities
+## HTTP 수준 취약점
 
-Angular has built-in support to help prevent two common HTTP vulnerabilities, cross-site request forgery \(CSRF or XSRF\) and cross-site script inclusion \(XSSI\).
-Both of these must be mitigated primarily on the server side, but Angular provides helpers to make integration on the client side easier.
+Angular는 크로스 사이트 요청 위조(CSRF 또는 XSRF) 및 크로스 사이트 스크립트 포함(XSSI)이라는 두 가지 일반적인 HTTP 취약점을 방지하기 위한 기본 제공 지원을 제공합니다. 이 두 가지는 주로 서버 측에서 완화해야 하지만, Angular는 클라이언트 측 통합을 쉽게 하도록 도와주는 도우미를 제공합니다.
 
-### Cross-site request forgery
+### 크로스 사이트 요청 위조
 
-In a cross-site request forgery \(CSRF or XSRF\), an attacker tricks the user into visiting a different web page \(such as `evil.com`\) with malignant code. This web page secretly sends a malicious request to the application's web server \(such as `example-bank.com`\).
+크로스 사이트 요청 위조(CSRF 또는 XSRF)에서 공격자는 사용자가 악성 코드가 있는 다른 웹 페이지(예: `evil.com`)를 방문하도록 속입니다. 이 웹 페이지는 애플리케이션의 웹 서버(예: `example-bank.com`)에 악의적인 요청을 비밀리에 전송합니다.
 
-Assume the user is logged into the application at `example-bank.com`.
-The user opens an email and clicks a link to `evil.com`, which opens in a new tab.
+사용자가 `example-bank.com`에 로그인했다고 가정합니다. 사용자는 이메일을 열고 `evil.com` 링크를 클릭하여 새 탭에서 엽니다.
 
-The `evil.com` page immediately sends a malicious request to `example-bank.com`.
-Perhaps it's a request to transfer money from the user's account to the attacker's account.
-The browser automatically sends the `example-bank.com` cookies, including the authentication cookie, with this request.
+`evil.com` 페이지는 즉시 `example-bank.com`에 악의적인 요청을 보냅니다. 아마도 사용자의 계좌에서 공격자의 계좌로 돈을 이체하는 요청일 것입니다. 브라우저는 이러한 요청과 함께 인증 쿠키를 포함하여 `example-bank.com` 쿠키를 자동으로 전송합니다.
 
-If the `example-bank.com` server lacks XSRF protection, it can't tell the difference between a legitimate request from the application and the forged request from `evil.com`.
+`example-bank.com` 서버가 XSRF 보호 기능이 없다면 합법적인 애플리케이션 요청과 `evil.com`의 위조 요청을 구분할 수 없습니다.
 
-To prevent this, the application must ensure that a user request originates from the real application, not from a different site.
-The server and client must cooperate to thwart this attack.
+이를 방지하려면 애플리케이션은 사용자의 요청이 다른 사이트가 아닌 실제 애플리케이션에서 발생했음을 확인해야 합니다. 서버와 클라이언트는 이 공격을 저지하기 위해 협력해야 합니다.
 
-In a common anti-XSRF technique, the application server sends a randomly created authentication token in a cookie.
-The client code reads the cookie and adds a custom request header with the token in all following requests.
-The server compares the received cookie value to the request header value and rejects the request if the values are missing or don't match.
+일반적인 XSRF 방어 기술에서는 애플리케이션 서버가 쿠키에 임의로 생성된 인증 토큰을 전송합니다. 클라이언트 코드는 쿠키를 읽고 모든 후속 요청에 토큰을 담은 커스텀 요청 헤더를 추가합니다. 서버는 수신된 쿠키 값과 요청 헤더 값을 비교하고 값이 누락되었거나 일치하지 않으면 요청을 거부합니다.
 
-This technique is effective because all browsers implement the _same origin policy_.
-Only code from the website on which cookies are set can read the cookies from that site and set custom headers on requests to that site.
-That means only your application can read this cookie token and set the custom header.
-The malicious code on `evil.com` can't.
+이 기술은 모든 브라우저가 _같은 출처 정책_을 구현하기 때문에 효과적입니다. 쿠키가 설정된 사이트의 코드만 해당 사이트에서 쿠키를 읽고 그 사이트에 요청을 보내는 커스텀 헤더를 설정할 수 있습니다. 이는 귀하의 애플리케이션만이 이 쿠키 토큰을 읽고 커스텀 헤더를 설정할 수 있다는 것을 의미합니다. `evil.com`의 악성 코드 것은 할 수 없습니다.
 
-### `HttpClient` XSRF/CSRF security
+### `HttpClient` XSRF/CSRF 보안
 
-`HttpClient` supports a [common mechanism](https://en.wikipedia.org/wiki/Cross-site_request_forgery#Cookie-to-header_token) used to prevent XSRF attacks. When performing HTTP requests, an interceptor reads a token from a cookie, by default `XSRF-TOKEN`, and sets it as an HTTP header, `X-XSRF-TOKEN`. Because only code that runs on your domain could read the cookie, the backend can be certain that the HTTP request came from your client application and not an attacker.
+`HttpClient`는 XSRF 공격을 방지하는 데 사용되는 [일반적인 메커니즘](https://en.wikipedia.org/wiki/Cross-site_request_forgery#Cookie-to-header_token)을 지원합니다. HTTP 요청을 실행할 때 인터셉터는 기본적으로 `XSRF-TOKEN`이라는 쿠키에서 토큰을 읽고 이를 HTTP 헤더 `X-XSRF-TOKEN`으로 설정합니다. 본인의 도메인에서 실행되는 코드만이 쿠키를 읽을 수 있으므로, 백엔드는 HTTP 요청이 귀하의 클라이언트 애플리케이션에서 발생했음을 확신할 수 있습니다.
 
-By default, an interceptor sends this header on all mutating requests (such as `POST`) to relative URLs, but not on GET/HEAD requests or on requests with an absolute URL.
+기본적으로 인터셉터는 상대 URL에 대한 모든 변경 요청(예: `POST`)에서 이 헤더를 전송하지만 GET/HEAD 요청이나 절대 URL 요청에서는 전송하지 않습니다.
 
-<docs-callout helpful title="Why not protect GET requests?">
-CSRF protection is only needed for requests that can change state on the backend. By their nature, CSRF attacks cross domain boundaries, and the web's [same-origin policy](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy) will prevent an attacking page from retrieving the results of authenticated GET requests.
+<docs-callout helpful title="GET 요청을 보호하지 않는 이유?">
+CSRF 방지는 백엔드에서 상태를 변경할 수 있는 요청에만 필요합니다. 본질적으로 CSRF 공격은 도메인 경계를 초과하며 웹의 [같은 출처 정책](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy)은 공격 페이지가 인증된 GET 요청의 결과를 검색하는 것을 방지합니다.
 </docs-callout>
 
-To take advantage of this, your server needs to set a token in a JavaScript readable session cookie called `XSRF-TOKEN` on either the page load or the first GET request. On subsequent requests the server can verify that the cookie matches the `X-XSRF-TOKEN` HTTP header, and therefore be sure that only code running on your domain could have sent the request. The token must be unique for each user and must be verifiable by the server; this prevents the client from making up its own tokens. Set the token to a digest of your site's authentication cookie with a salt for added security.
+이를 활용하기 위해서는 서버가 페이지 로드 또는 첫 번째 GET 요청 시 `XSRF-TOKEN`이라는 JavaScript에서 읽을 수 있는 세션 쿠키에 토큰을 설정해야 합니다. 후속 요청에서 서버는 쿠키가 `X-XSRF-TOKEN` HTTP 헤더와 일치하는지 확인할 수 있으며, 따라서 귀하의 도메인에서 실행되는 코드만 요청을 보낼 수 있었던 것임을 확인합니다. 이 토큰은 각 사용자마다 고유해야 하며, 서버에서 확인 가능해야 합니다. 이렇게 하면 클라이언트가 자체 토큰을 만들지 못하도록 방지합니다. 추가 보안을 위해 사이트의 인증 쿠키를 해시한 값을 salt와 함께 설정하세요.
 
-To prevent collisions in environments where multiple Angular apps share the same domain or subdomain, give each application a unique cookie name.
+여러 Angular 애플리케이션이 같은 도메인이나 하위 도메인을 공유하는 환경에서 충돌을 방지하려면 각 애플리케이션에 고유한 쿠키 이름을 부여하세요.
 
-<docs-callout important title="HttpClient supports only the client half of the XSRF protection scheme">
-  Your backend service must be configured to set the cookie for your page, and to verify that the header is present on all eligible requests. Failing to do so renders Angular's default protection ineffective.
+<docs-callout important title="HttpClient는 XSRF 보호 계획의 클라이언트 절반만 지원합니다.">
+백엔드 서비스는 페이지에 대한 쿠키를 설정하고 모든 적합한 요청에 대해 헤더가 존재하는지 확인하도록 구성되어야 합니다. 그렇지 않으면 Angular의 기본 보호 기능이 효과적이지 않습니다.
 </docs-callout>
 
-### Configure custom cookie/header names
+### 사용자 정의 쿠키/헤더 이름 구성
 
-If your backend service uses different names for the XSRF token cookie or header, use `withXsrfConfiguration` to override the defaults.
+백엔드 서비스에서 XSRF 토큰 쿠키나 헤더의 이름이 다른 경우 `withXsrfConfiguration`을 사용하여 기본값을 재정의하세요.
 
-Add it to the `provideHttpClient` call as follows:
+다음과 같이 `provideHttpClient` 호출에 추가하세요:
 
 <docs-code language="ts">
 export const appConfig: ApplicationConfig = {
@@ -341,9 +281,9 @@ export const appConfig: ApplicationConfig = {
 };
 </docs-code>
 
-### Disabling XSRF protection
+### XSRF 보호 비활성화
 
-If the built-in XSRF protection mechanism doesn't work for your application, you can disable it using the `withNoXsrfProtection` feature:
+내장 XSRF 보호 메커니즘이 애플리케이션에 작동하지 않는 경우 `withNoXsrfProtection` 기능을 사용하여 비활성화할 수 있습니다:
 
 <docs-code language="ts">
 export const appConfig: ApplicationConfig = {
@@ -355,24 +295,20 @@ export const appConfig: ApplicationConfig = {
 };
 </docs-code>
 
-For information about CSRF at the Open Web Application Security Project \(OWASP\), see [Cross-Site Request Forgery (CSRF)](https://owasp.org/www-community/attacks/csrf) and [Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html).
-The Stanford University paper [Robust Defenses for Cross-Site Request Forgery](https://seclab.stanford.edu/websec/csrf/csrf.pdf) is a rich source of detail.
+OWASP에서 CSRF에 대한 정보는 [크로스 사이트 요청 위조(CSRF)](https://owasp.org/www-community/attacks/csrf)와 [크로스 사이트 요청 위조(CSRF) 방지 요약](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)을 참조하세요. 스탠포드 대학교 논문인 [크로스 사이트 요청 위조에 대한 강력한 방어](https://seclab.stanford.edu/websec/csrf/csrf.pdf)는 자세한 정보를 제공하는 출처입니다.
 
-See also Dave Smith's [talk on XSRF at AngularConnect 2016](https://www.youtube.com/watch?v=9inczw6qtpY "Cross Site Request Funkery Securing Your Angular Apps From Evil Doers").
+또한 Dave Smith의 [AngularConnect 2016에서 XSRF에 대한 발표](https://www.youtube.com/watch?v=9inczw6qtpY "Cross Site Request Funkery Securing Your Angular Apps From Evil Doers")도 확인하세요.
 
-### Cross-site script inclusion (XSSI)
+### 크로스 사이트 스크립트 포함(XSSI)
 
-Cross-site script inclusion, also known as JSON vulnerability, can allow an attacker's website to read data from a JSON API.
-The attack works on older browsers by overriding built-in JavaScript object constructors, and then including an API URL using a `<script>` tag.
+크로스 사이트 스크립트 포함은 JSON 취약점이라고도 하며, 공격자의 웹사이트가 JSON API의 데이터를 읽을 수 있게 할 수 있습니다. 이 공격은 내장 JavaScript 객체 생성자를 오버라이드하고 `<script>` 태그를 사용하여 API URL을 포함하여 오래된 브라우저에서 작동합니다.
 
-This attack is only successful if the returned JSON is executable as JavaScript.
-Servers can prevent an attack by prefixing all JSON responses to make them non-executable, by convention, using the well-known string `")]}',\n"`.
+이 공격은 반환된 JSON이 자바스크립트로 실행 가능할 경우에만 성공합니다. 서버는 모든 JSON 응답에 비실행 가능한 접두사를 추가하여 공격을 방지할 수 있으며, 일반적으로 잘 알려진 문자열 `")]}',\n"`을 사용합니다.
 
-Angular's `HttpClient` library recognizes this convention and automatically strips the string `")]}',\n"` from all responses before further parsing.
+Angular의 `HttpClient` 라이브러리는 이러한 규칙을 인식하고 모든 응답에서 문자열 `")]}',\n"`을 자동으로 제거하여 추가 파싱 전에 처리합니다.
 
-For more information, see the XSSI section of this [Google web security blog post](https://security.googleblog.com/2011/05/website-security-for-webmasters.html).
+더 많은 정보는 [Google 웹 보안 블로그 게시물](https://security.googleblog.com/2011/05/website-security-for-webmasters.html)의 XSSI 섹션을 참고하세요.
 
-## Auditing Angular applications
+## Angular 애플리케이션 감사
 
-Angular applications must follow the same security principles as regular web applications, and must be audited as such.
-Angular-specific APIs that should be audited in a security review, such as the [_bypassSecurityTrust_](#trusting-safe-values) methods, are marked in the documentation as security sensitive.
+Angular 애플리케이션은 일반 웹 애플리케이션과 동일한 보안 원칙을 따라야 하며, 따라서 감사 대상이 되어야 합니다. 보안 검토에서 감사해야 하는 Angular 특정 API는 [_bypassSecurityTrust_](#trusting-safe-values) 메서드와 같이 문서에 보안 민감도로 표시되어 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/signals/linked-signal.md b/adev/src/content/guide/signals/linked-signal.md
index 8a3c00e83cef..d23405ec6f63 100644
--- a/adev/src/content/guide/signals/linked-signal.md
+++ b/adev/src/content/guide/signals/linked-signal.md
@@ -1,15 +1,15 @@
-# Dependent state with `linkedSignal`
+# `linkedSignal`을 사용한 종속 상태
 
-IMPORTANT: `linkedSignal` is [developer preview](reference/releases#developer-preview). It's ready for you to try, but it might change before it is stable.
+중요: `linkedSignal`은 [개발자 미리 보기](reference/releases#developer-preview)입니다. 사용해 볼 준비가 되었지만 안정화되기 전까지 변경될 수 있습니다.
 
-You can use the `signal` function to hold some state in your Angular code. Sometimes, this state depends on some _other_ state. For example, imagine a component that lets the user select a shipping method for an order:
+Angular 코드에서 상태를 유지하는 데 `signal` 함수를 사용할 수 있습니다. 때때로 이 상태는 일부 _다른_ 상태에 따라 달라집니다. 예를 들어 사용자가 주문의 배송 방법을 선택하도록 허용하는 구성 요소를 생각해 보십시오:
 
 ```typescript
 @Component({/* ... */})
 export class ShippingMethodPicker {
   shippingOptions: Signal<ShippingMethod[]> = getShippingOptions();
 
-  // Select the first shipping option by default.
+  // 기본적으로 첫 번째 배송 옵션을 선택합니다.
   selectedOption = signal(this.shippingOptions()[0]);
 
   changeShipping(newOptionIndex: number) {
@@ -18,16 +18,16 @@ export class ShippingMethodPicker {
 }
 ```
 
-In this example, the `selectedOption` defaults to the first option, but changes if the user selects another option. But `shippingOptions` is a signal— its value may change! If `shippingOptions` changes, `selectedOption` may contain a value that is no longer a valid option.
+이 예에서 `selectedOption`은 기본적으로 첫 번째 옵션으로 설정되지만 사용자가 다른 옵션을 선택하면 변경됩니다. 그러나 `shippingOptions`는 신호입니다— 그 값은 변경될 수 있습니다! `shippingOptions`가 변경되면 `selectedOption`은 더 이상 유효한 옵션이 아닌 값을 포함할 수 있습니다.
 
-**The `linkedSignal` function lets you create a signal to hold some state that is intrinsically _linked_ to some other state.** Revisiting the example above, `linkedSignal` can replace `signal`:
+**`linkedSignal` 함수는 본질적으로 어떤 다른 상태에 _연결된_ 상태를 유지하는 신호를 생성할 수 있게 해줍니다.** 위의 예를 다시 살펴보면 `linkedSignal`이 `signal`을 대체할 수 있습니다:
 
 ```typescript
 @Component({/* ... */})
 export class ShippingMethodPicker {
   shippingOptions: Signal<ShippingMethod[]> = getShippingOptions();
 
-  // Initialize selectedOption to the first shipping option.
+  // 첫 번째 배송 옵션으로 selectedOption을 초기화합니다.
   selectedOption = linkedSignal(() => this.shippingOptions()[0]);
 
   changeShipping(index: number) {
@@ -36,9 +36,9 @@ export class ShippingMethodPicker {
 }
 ```
 
-`linkedSignal` works similarly to `signal` with one key difference— instead of passing a default value, you pass a _computation function_, just like `computed`. When the value of the computation changes, the value of the `linkedSignal` changes to the computation result. This helps ensure that the `linkedSignal` always has a valid value.
+`linkedSignal`은 `signal`과 유사하게 작동하지만 한 가지 주요 차이가 있습니다— 기본값을 전달하는 대신 _계산 함수_를 전달합니다. 값이 계산이 변경되면 `linkedSignal`의 값이 계산 결과로 변경됩니다. 이는 `linkedSignal`이 항상 유효한 값을 가지도록 보장하는 데 도움이 됩니다.
 
-The following example shows how the value of a `linkedSignal` can change based on its linked state:
+다음 예제는 `linkedSignal`의 값이 연결된 상태에 따라 어떻게 변경될 수 있는지를 보여줍니다:
 
 ```typescript
 const shippingOptions = signal(['Ground', 'Air', 'Sea']);
@@ -52,11 +52,11 @@ shippingOptions.set(['Email', 'Will Call', 'Postal service']);
 console.log(selectedOption()); // 'Email'
 ```
 
-## Accounting for previous state
+## 이전 상태 고려하기
 
-In some cases, the computation for a `linkedSignal` needs to account for the previous value of the `linkedSignal`.
+일부 경우 `linkedSignal`의 계산은 `linkedSignal`의 이전 값을 고려해야 합니다.
 
-In the example above, `selectedOption` always updates back to the first option when `shippingOptions` changes. You may, however, want to preserve the user's selection if their selected option is still somewhere in the list. To accomplish this, you can create a `linkedSignal` with a separate _source_ and _computation_:
+위의 예에서 `selectedOption`은 항상 `shippingOptions`가 변경될 때 첫 번째 옵션으로 업데이트됩니다. 그러나 사용자가 선택한 옵션이 여전히 목록의 어딘가에 있다면 사용자의 선택을 보존하고 싶을 수 있습니다. 이를 수행하기 위해 별도의 _소스_ 및 _계산_과 함께 `linkedSignal`을 생성할 수 있습니다:
 
 ```typescript
 @Component({/* ... */})
@@ -64,11 +64,11 @@ export class ShippingMethodPicker {
   shippingOptions: Signal<ShippingMethod[]> = getShippingOptions();
 
   selectedOption = linkedSignal<ShippingMethod[], ShippingMethod>({
-    // `selectedOption` is set to the `computation` result whenever this `source` changes.
+    // 이 `source`가 변경될 때마다 `selectedOption`은 `computation` 결과로 설정됩니다.
     source: this.shippingOptions,
     computation: (newOptions, previous) => {
-      // If the newOptions contain the previously selected option, preserve that selection.
-      // Otherwise, default to the first option.
+      // 새 옵션에 이전에 선택된 옵션이 포함되어 있으면 해당 선택을 보존합니다.
+      // 그렇지 않으면 첫 번째 옵션으로 기본 설정합니다.
       return newOptions.find(opt => opt.id === previous?.value?.id) ?? newOptions[0];
     }
   });
@@ -79,28 +79,27 @@ export class ShippingMethodPicker {
 }
 ```
 
-When you create a `linkedSignal`, you can pass an object with separate `source` and `computation` properties instead of providing just a computation.
+`linkedSignal`을 생성할 때 계산만 제공하는 대신 별도의 `source` 및 `computation` 속성이 있는 객체를 전달할 수 있습니다.
 
-The `source` can be any signal, such as a `computed` or component `input`. When the value of `source` changes, `linkedSignal` updates its value to the result of the provided `computation`.
+`source`는 `computed` 또는 구성 요소 `input`과 같은 모든 신호가 될 수 있습니다. `source`의 값이 변경되면 `linkedSignal`은 제공된 `computation`의 결과로 값을 업데이트합니다.
 
-The `computation` is a function that receives the new value of `source` and a `previous` object. The `previous` object has two properties— `previous.source` is the previous value of `source`, and `previous.value` is the previous result of the `computation`. You can use these previous values to decide the new result of the computation.
+`computation`은 `source`의 새 값과 `previous` 객체를 받는 함수입니다. `previous` 객체에는 두 개의 속성이 있습니다— `previous.source`는 `source`의 이전 값이고 `previous.value`는 `computation`의 이전 결과입니다. 이러한 이전 값을 사용하여 계산의 새 결과를 결정할 수 있습니다.
 
-## Custom equality comparison
+## 사용자 정의 동등성 비교
 
-`linkedSignal`, as any other signal, can be configured with a custom equality function. This function is used by downstream dependencies to determine if that value of the `linkedSignal` (result of a computation) changed:
+`linkedSignal`은 다른 신호와 마찬가지로 사용자 정의 동등성 함수를 구성할 수 있습니다. 이 함수는 하위 의존성이 해당 `linkedSignal`의 값(계산 결과)이 변경되었는지를 판단하는 데 사용됩니다:
 
 ```typescript
 const activeUser = signal({id: 123, name: 'Morgan', isAdmin: true});
 
 const activeUserEditCopy = linkedSignal(() => activeUser(), {
-  // Consider the user as the same if it's the same `id`.
+  // 동일한 `id`인 경우 사용자를 동일한 것으로 간주합니다.
   equal: (a, b) => a.id === b.id,
 });
 
-// Or, if separating `source` and `computation`
+// 또는, `source`와 `computation`을 분리하는 경우
 const activeUserEditCopy = linkedSignal({
   source: activeUser,
   computation: user => user,
   equal: (a, b) => a.id === b.id,
-});
-```
+});
\ No newline at end of file
diff --git a/adev/src/content/guide/signals/overview.md b/adev/src/content/guide/signals/overview.md
index 99b850b7c8f5..fe749cf8869c 100644
--- a/adev/src/content/guide/signals/overview.md
+++ b/adev/src/content/guide/signals/overview.md
@@ -1,75 +1,75 @@
 <docs-decorative-header title="Angular Signals" imgSrc="adev/src/assets/images/signals.svg"> <!-- markdownlint-disable-line -->
-Angular Signals is a system that granularly tracks how and where your state is used throughout an application, allowing the framework to optimize rendering updates.
+Angular Signals는 애플리케이션 전반에서 상태가 어떻게 그리고 어디에서 사용되는지를 세부적으로 추적하는 시스템으로, 프레임워크가 렌더링 업데이트를 최적화하도록 도와줍니다.
 </docs-decorative-header>
 
-Tip: Check out Angular's [Essentials](essentials/signals) before diving into this comprehensive guide.
+Tip: 이 포괄적인 가이드를 시작하기 전에 Angular의 [Essentials](essentials/signals)를 확인하세요.
 
-## What are signals?
+## 신호란 무엇인가요?
 
-A **signal** is a wrapper around a value that notifies interested consumers when that value changes. Signals can contain any value, from primitives to complex data structures.
+**신호**는 값의 래퍼로, 해당 값이 변경될 때 관심 있는 소비자에게 알리는 역할을 합니다. 신호는 기본형부터 복잡한 데이터 구조까지 모든 값을 포함할 수 있습니다.
 
-You read a signal's value by calling its getter function, which allows Angular to track where the signal is used.
+신호의 값을 읽으려면 getter 함수를 호출해야 하며, 이를 통해 Angular는 신호가 어디에서 사용되는지 추적할 수 있습니다.
 
-Signals may be either _writable_ or _read-only_.
+신호는 _읽기 가능_ 또는 _읽기 전용_일 수 있습니다.
 
-### Writable signals
+### 쓰기 가능한 신호
 
-Writable signals provide an API for updating their values directly. You create writable signals by calling the `signal` function with the signal's initial value:
+쓰기가 가능한 신호는 그 값들을 직접 업데이트할 수 있는 API를 제공합니다. 신호의 초기 값을 사용하여 `signal` 함수를 호출함으로써 쓰기 가능한 신호를 생성할 수 있습니다:
 
 ```ts
 const count = signal(0);
 
-// Signals are getter functions - calling them reads their value.
+// 신호는 getter 함수입니다 - 이를 호출하면 값이 읽힙니다.
 console.log('The count is: ' + count());
 ```
 
-To change the value of a writable signal, either `.set()` it directly:
+쓰기가 가능한 신호의 값을 변경하려면, `.set()`을 사용하여 직접 설정할 수 있습니다:
 
 ```ts
 count.set(3);
 ```
 
-or use the `.update()` operation to compute a new value from the previous one:
+또는 `.update()` 연산을 사용하여 이전 값을 기반으로 새로운 값을 계산할 수 있습니다:
 
 ```ts
-// Increment the count by 1.
+// 값을 1 증가시킵니다.
 count.update(value => value + 1);
 ```
 
-Writable signals have the type `WritableSignal`.
+쓰기가 가능한 신호는 `WritableSignal` 유형입니다.
 
-### Computed signals
+### 계산된 신호
 
-**Computed signal** are read-only signals that derive their value from other signals. You define computed signals using the `computed` function and specifying a derivation:
+**계산된 신호**는 다른 신호에서 값을 파생한 읽기 전용 신호입니다. `computed` 함수를 사용하여 파생 관계를 지정함으로써 계산된 신호를 정의합니다:
 
 ```typescript
 const count: WritableSignal<number> = signal(0);
 const doubleCount: Signal<number> = computed(() => count() * 2);
 ```
 
-The `doubleCount` signal depends on the `count` signal. Whenever `count` updates, Angular knows that `doubleCount` needs to update as well.
+`doubleCount` 신호는 `count` 신호에 의존합니다. `count`가 업데이트될 때마다 Angular는 `doubleCount`도 업데이트해야 함을 인지합니다.
 
-#### Computed signals are both lazily evaluated and memoized
+#### 계산된 신호는 지연 평가 및 메모이제이션을 합니다
 
-`doubleCount`'s derivation function does not run to calculate its value until the first time you read `doubleCount`. The calculated value is then cached, and if you read `doubleCount` again, it will return the cached value without recalculating.
+`doubleCount`의 파생 함수는 처음으로 `doubleCount`를 읽을 때까지 실행되지 않습니다. 계산된 값은 캐시되며, 이후에 `doubleCount`를 다시 읽으면 재계산 없이 캐시된 값을 반환합니다.
 
-If you then change `count`, Angular knows that `doubleCount`'s cached value is no longer valid, and the next time you read `doubleCount` its new value will be calculated.
+그 후 `count`를 변경하면 Angular는 `doubleCount`의 캐시된 값이 더 이상 유효하지 않다고 인식하고, 다음에 `doubleCount`를 읽을 때 새로운 값을 계산합니다.
 
-As a result, you can safely perform computationally expensive derivations in computed signals, such as filtering arrays.
+결과적으로 계산된 신호에서 배열 필터링과 같은 계산적으로 비용이 많이 드는 파생 작업을 안전하게 수행할 수 있습니다.
 
-#### Computed signals are not writable signals
+#### 계산된 신호는 쓰기 가능한 신호가 아닙니다
 
-You cannot directly assign values to a computed signal. That is,
+계산된 신호에 직접 값을 할당할 수 없습니다. 즉,
 
 ```ts
 doubleCount.set(3);
 ```
 
-produces a compilation error, because `doubleCount` is not a `WritableSignal`.
+는 `doubleCount`가 `WritableSignal`이 아니기 때문에 컴파일 오류를 발생시킵니다.
 
-#### Computed signal dependencies are dynamic
+#### 계산된 신호 종속성은 동적입니다
 
-Only the signals actually read during the derivation are tracked. For example, in this `computed` the `count` signal is only read if the `showCount` signal is true:
+파생 중 실제로 읽힌 신호만 추적됩니다. 예를 들어, 이 `computed`에서 `count` 신호는 `showCount` 신호가 true일 때만 읽힙니다:
 
 ```ts
 const showCount = signal(false);
@@ -83,19 +83,19 @@ const conditionalCount = computed(() => {
 });
 ```
 
-When you read `conditionalCount`, if `showCount` is `false` the "Nothing to see here!" message is returned _without_ reading the `count` signal. This means that if you later update `count` it will _not_ result in a recomputation of `conditionalCount`.
+`conditionalCount`를 읽을 때, 만약 `showCount`가 `false`라면 "Nothing to see here!" 메시지가 반환되며, `count` 신호는 읽히지 않습니다. 이는 이후에 `count`를 업데이트해도 `conditionalCount`의 재계산을 초래하지 않음을 의미합니다.
 
-If you set `showCount` to `true` and then read `conditionalCount` again, the derivation will re-execute and take the branch where `showCount` is `true`, returning the message which shows the value of `count`. Changing `count` will then invalidate `conditionalCount`'s cached value.
+`showCount`를 `true`로 설정하고 다시 `conditionalCount`를 읽으면, 파생이 다시 실행되고 `showCount`가 `true`인 경우의 브랜치를 선택하여 `count`의 값을 보여주는 메시지를 반환합니다. `count`를 변경하면 `conditionalCount`의 캐시된 값이 무효화됩니다.
 
-Note that dependencies can be removed during a derivation as well as added. If you later set `showCount` back to `false`, then `count` will no longer be considered a dependency of `conditionalCount`.
+파생 중 종속성을 제거할 수도 있으며 추가할 수도 있다는 점에 유의하세요. 나중에 `showCount`를 다시 `false`로 설정하면 `count`는 더 이상 `conditionalCount`의 종속성으로 간주되지 않습니다.
 
-## Reading signals in `OnPush` components
+## `OnPush` 컴포넌트에서 신호 읽기
 
-When you read a signal within an `OnPush` component's template, Angular tracks the signal as a dependency of that component. When the value of that signal changes, Angular automatically [marks](api/core/ChangeDetectorRef#markforcheck) the component to ensure it gets updated the next time change detection runs. Refer to the [Skipping component subtrees](best-practices/skipping-subtrees) guide for more information about `OnPush` components.
+`OnPush` 컴포넌트의 템플릿 내에서 신호를 읽을 때, Angular는 해당 신호를 컴포넌트의 종속성으로 추적합니다. 해당 신호의 값이 변경되면, Angular는 자동으로 [마크](api/core/ChangeDetectorRef#markforcheck)하여 다음 변경 감지 실행 시 업데이트되도록 합니다. `OnPush` 컴포넌트에 대한 자세한 내용은 [Skipping component subtrees](best-practices/skipping-subtrees) 가이드를 참고하세요.
 
-## Effects
+## 효과
 
-Signals are useful because they notify interested consumers when they change. An **effect** is an operation that runs whenever one or more signal values change. You can create an effect with the `effect` function:
+신호는 변경될 때 관심 있는 소비자에게 알리기 때문에 유용합니다. **효과**는 하나 이상의 신호 값이 변경될 때마다 실행되는 작업입니다. `effect` 함수를 사용하여 효과를 생성할 수 있습니다:
 
 ```ts
 effect(() => {
@@ -103,35 +103,35 @@ effect(() => {
 });
 ```
 
-Effects always run **at least once.** When an effect runs, it tracks any signal value reads. Whenever any of these signal values change, the effect runs again. Similar to computed signals, effects keep track of their dependencies dynamically, and only track signals which were read in the most recent execution.
+효과는 항상 **최소 한 번 이상** 실행됩니다. 효과가 실행될 때, 어떤 신호 값 읽기가 추적됩니다. 이 신호 값 중 하나라도 변경되면 효과는 다시 실행됩니다. 계산된 신호와 유사하게, 효과는 종속성을 동적으로 추적하며, 최근 실행에서 읽힌 신호만 추적합니다.
 
-Effects always execute **asynchronously**, during the change detection process.
+효과는 항상 **비동기적으로** 실행되며, 변경 감지 프로세스 중에 발생합니다.
 
-### Use cases for effects
+### 효과의 사용 사례
 
-Effects are rarely needed in most application code, but may be useful in specific circumstances. Here are some examples of situations where an `effect` might be a good solution:
+효과는 대부분의 애플리케이션 코드에서 거의 필요하지 않지만 특정 상황에서 유용할 수 있습니다. 다음은 `effect`가 좋은 해결책이 될 수 있는 상황의 몇 가지 예입니다:
 
-* Logging data being displayed and when it changes, either for analytics or as a debugging tool.
-* Keeping data in sync with `window.localStorage`.
-* Adding custom DOM behavior that can't be expressed with template syntax.
-* Performing custom rendering to a `<canvas>`, charting library, or other third party UI library.
+* 분석 또는 디버깅 도구로서 표시된 데이터와 변경 시점을 기록하기.
+* `window.localStorage`와 데이터를 동기화 유지하기.
+* 템플릿 문법으로 표현할 수 없는 사용자 정의 DOM 동작 추가하기.
+* `<canvas>`, 차트 라이브러리 또는 기타 서드 파티 UI 라이브러리에 대한 사용자 정의 렌더링 수행하기.
 
-<docs-callout critical title="When not to use effects">
-Avoid using effects for propagation of state changes. This can result in `ExpressionChangedAfterItHasBeenChecked` errors, infinite circular updates, or unnecessary change detection cycles.
+<docs-callout critical title="효과를 사용하지 않아야 할 경우">
+상태 변경 전파를 위해 효과를 사용하는 것은 피하세요. 이는 `ExpressionChangedAfterItHasBeenChecked` 오류, 무한 순환 업데이트 또는 불필요한 변경 감지 주기를 초래할 수 있습니다.
 
-Instead, use `computed` signals to model state that depends on other state.
+대신, 다른 상태에 의존하는 상태 모델링을 위해 `computed` 신호를 사용하세요.
 </docs-callout>
 
-### Injection context
+### 주입 컨텍스트
 
-By default, you can only create an `effect()` within an [injection context](guide/di/dependency-injection-context) (where you have access to the `inject` function). The easiest way to satisfy this requirement is to call `effect` within a component, directive, or service `constructor`:
+기본적으로 [주입 컨텍스트](guide/di/dependency-injection-context) 내에서만 `effect()`를 생성할 수 있습니다(여기서 `inject` 함수에 접근할 수 있습니다). 이 요구 사항을 충족하는 가장 쉬운 방법은 컴포넌트, 지시어 또는 서비스의 `constructor` 내에서 `effect`를 호출하는 것입니다:
 
 ```ts
 @Component({...})
 export class EffectiveCounterComponent {
   readonly count = signal(0);
   constructor() {
-    // Register a new effect.
+    // 새로운 효과를 등록합니다.
     effect(() => {
       console.log(`The count is: ${this.count()}`);
     });
@@ -139,7 +139,7 @@ export class EffectiveCounterComponent {
 }
 ```
 
-Alternatively, you can assign the effect to a field (which also gives it a descriptive name).
+또는 효과를 필드에 할당할 수 있습니다(설명적인 이름도 부여됨).
 
 ```ts
 @Component({...})
@@ -152,7 +152,7 @@ export class EffectiveCounterComponent {
 }
 ```
 
-To create an effect outside the constructor, you can pass an `Injector` to `effect` via its options:
+생성자 외부에서 효과를 생성하려면 `effect`에 `Injector`를 통해 옵션을 전달할 수 있습니다:
 
 ```ts
 @Component({...})
@@ -168,38 +168,38 @@ export class EffectiveCounterComponent {
 }
 ```
 
-### Destroying effects
+### 효과 제거
 
-When you create an effect, it is automatically destroyed when its enclosing context is destroyed. This means that effects created within components are destroyed when the component is destroyed. The same goes for effects within directives, services, etc.
+효과를 생성할 때, 해당 효과가 포함된 컨텍스트가 파괴되면 자동으로 제거됩니다. 즉, 컴포넌트 내에서 생성된 효과는 컴포넌트가 제거될 때 사라집니다. 지시어, 서비스 등에서도 동일합니다.
 
-Effects return an `EffectRef` that you can use to destroy them manually, by calling the `.destroy()` method. You can combine this with the `manualCleanup` option to create an effect that lasts until it is manually destroyed. Be careful to actually clean up such effects when they're no longer required.
+효과는 수동으로 제거할 수 있도록 `EffectRef`를 반환하며, `.destroy()` 메서드를 호출하여 제거합니다. 이를 `manualCleanup` 옵션과 결합하여 수동으로 제거될 때까지 지속되는 효과를 만들 수 있습니다. 이러한 효과가 더 이상 필요 없을 때 실제로 정리하는 것에 유의하세요.
 
-## Advanced topics
+## 고급 주제
 
-### Signal equality functions
+### 신호 동등성 함수
 
-When creating a signal, you can optionally provide an equality function, which will be used to check whether the new value is actually different than the previous one.
+신호를 생성할 때 선택적으로 동등성 함수를 제공할 수 있으며, 이는 새 값이 실제로 이전 값과 다른지 확인하는 데 사용됩니다.
 
 ```ts
 import _ from 'lodash';
 
 const data = signal(['test'], {equal: _.isEqual});
 
-// Even though this is a different array instance, the deep equality
-// function will consider the values to be equal, and the signal won't
-// trigger any updates.
+// 이 서로 다른 배열 인스턴스임에도 불구하고, 깊은 동등성
+// 함수는 값을 동일하게 간주하므로 신호는
+// 어떤 업데이트도 트리거하지 않습니다.
 data.set(['test']);
 ```
 
-Equality functions can be provided to both writable and computed signals.
+동등성 함수는 쓰기 가능한 신호와 계산된 신호 모두에 제공될 수 있습니다.
 
-HELPFUL: By default, signals use referential equality ([`Object.is()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison).
+도움말: 기본적으로 신호는 참조 동등성([`Object.is()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교)를 사용합니다.
 
-### Reading without tracking dependencies
+### 종속성 추적 없이 읽기
 
-Rarely, you may want to execute code which may read signals within a reactive function such as `computed` or `effect` _without_ creating a dependency.
+드물게, 계산된 `computed` 또는 `effect`와 같은 반응형 함수 내에서 신호를 읽으면서 종속성을 생성하지 않고 코드를 실행하고 싶을 수 있습니다.
 
-For example, suppose that when `currentUser` changes, the value of a `counter` should be logged. you could create an `effect` which reads both signals:
+예를 들어, `currentUser`가 변경될 때 `counter`의 값을 기록해야 한다고 가정해 보겠습니다. 두 신호를 읽는 `effect`를 생성할 수 있습니다:
 
 ```ts
 effect(() => {
@@ -207,9 +207,9 @@ effect(() => {
 });
 ```
 
-This example will log a message when _either_ `currentUser` or `counter` changes. However, if the effect should only run when `currentUser` changes, then the read of `counter` is only incidental and changes to `counter` shouldn't log a new message.
+이 예제는 `currentUser` 또는 `counter`가 변경될 때 메시지를 기록합니다. 그러나 효과가 `currentUser` 변경 시에만 실행되어야 하고, `counter`의 읽기는 단순한 부수적 효과여야 하기 때문에 `counter`에 대한 변화가 새로운 메시지를 기록해서는 안 됩니다.
 
-You can prevent a signal read from being tracked by calling its getter with `untracked`:
+신호 읽기가 추적되는 것을 방지하려면 `untracked`로 getter를 호출하면 됩니다:
 
 ```ts
 effect(() => {
@@ -217,22 +217,22 @@ effect(() => {
 });
 ```
 
-`untracked` is also useful when an effect needs to invoke some external code which shouldn't be treated as a dependency:
+`untracked`는 효과가 종속성으로 간주되지 않아야 하는 외부 코드를 호출할 때도 유용합니다:
 
 ```ts
 effect(() => {
   const user = currentUser();
   untracked(() => {
-    // If the `loggingService` reads signals, they won't be counted as
-    // dependencies of this effect.
+    // `loggingService`가 신호를 읽으면, 이는
+    // 이 효과의 종속성으로 간주되지 않습니다.
     this.loggingService.log(`User set to ${user}`);
   });
 });
 ```
 
-### Effect cleanup functions
+### 효과 정리 함수
 
-Effects might start long-running operations, which you should cancel if the effect is destroyed or runs again before the first operation finished. When you create an effect, your function can optionally accept an `onCleanup` function as its first parameter. This `onCleanup` function lets you register a callback that is invoked before the next run of the effect begins, or when the effect is destroyed.
+효과는 장기 실행 작업을 시작할 수 있으며, 효과가 파괴되거나 첫 번째 작업이 완료되기 전에 다시 실행될 경우 취소해야 합니다. 효과를 생성할 때, 함수는 선택적으로 첫 번째 매개변수로 `onCleanup` 함수를 수락할 수 있습니다. 이 `onCleanup` 함수는 효과의 다음 실행이 시작되기 전에 호출되는 콜백을 등록할 수 있게 해줍니다.
 
 ```ts
 effect((onCleanup) => {
@@ -248,6 +248,6 @@ effect((onCleanup) => {
 });
 ```
 
-## Using signals with RxJS
+## RxJS와 함께 신호 사용하기
 
-See [RxJS interop with Angular signals](ecosystem/rxjs-interop) for details on interoperability between signals and RxJS.
+신호와 RxJS 간의 상호 운용성에 대한 자세한 내용은 [RxJS interop with Angular signals](ecosystem/rxjs-interop)를 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/guide/signals/resource.md b/adev/src/content/guide/signals/resource.md
index e06c100c9a74..eef5322f4420 100644
--- a/adev/src/content/guide/signals/resource.md
+++ b/adev/src/content/guide/signals/resource.md
@@ -1,12 +1,12 @@
-# Async reactivity with resources
+# 비동기 반응성 자원
 
-IMPORTANT: `resource` is [experimental](reference/releases#experimental). It's ready for you to try, but it might change before it is stable.
+중요: `resource`는 [실험적](reference/releases#experimental)입니다. 사용해볼 수 있지만, 안정화되기 전에 변경될 수 있습니다.
 
-Most signal APIs are synchronous— `signal`, `computed`, `input`, etc. However, applications often need to deal with data that is available asynchronously. A `Resource` gives you a way to incorporate async data into your application's signal-based code.
+대부분의 신호 API는 동기적입니다 — `signal`, `computed`, `input` 등. 그러나 애플리케이션은 종종 비동기적으로 사용할 수 있는 데이터로 작업해야 합니다. `Resource`는 비동기 데이터를 애플리케이션의 신호 기반 코드에 통합할 수 있는 방법을 제공합니다.
 
-You can use a `Resource` to perform any kind of async operation, but the most common use-case for `Resource` is fetching data from a server. The following example creates a resource to fetch some user data.
+`Resource`를 사용하여 모든 유형의 비동기 작업을 수행할 수 있지만, `Resource`의 가장 일반적인 사용 사례는 서버에서 데이터를 가져오는 것입니다. 다음 예제는 몇 가지 사용자 데이터를 가져오기 위해 리소스를 생성합니다.
 
-The easiest way to create a `Resource` is the `resource` function.
+`Resource`를 생성하는 가장 쉬운 방법은 `resource` 함수입니다.
 
 ```typescript
 import {resource, Signal} from '@angular/core';
@@ -14,47 +14,47 @@ import {resource, Signal} from '@angular/core';
 const userId: Signal<string> = getUserId();
 
 const userResource = resource({
-  // Define a reactive request computation.
-  // The request value recomputes whenever any read signals change.
+  // 반응형 요청 계산을 정의합니다.
+  // 요청 값은 읽기 신호가 변경될 때마다 다시 계산됩니다.
   request: () => ({id: userId()}),
 
-  // Define an async loader that retrieves data.
-  // The resource calls this function every time the `request` value changes.
+  // 데이터를 검색하는 비동기 로더를 정의합니다.
+  // 리소스는 `request` 값이 변경될 때마다 이 함수를 호출합니다.
   loader: ({request}) => fetchUser(request),
 });
 
-// Create a computed signal based on the result of the resource's loader function.
+// 리소스의 로더 함수 결과를 기반으로 계산된 신호를 생성합니다.
 const firstName = computed(() => userResource.value().firstName);
 ```
 
-The `resource` function accepts a `ResourceOptions` object with two main properties: `request` and `loader`.
+`resource` 함수는 `request`와 `loader`의 두 가지 주요 속성을 갖는 `ResourceOptions` 객체를 받아들입니다.
 
-The `request` property defines a reactive computation that produce a request value. Whenever signals read in this computation change, the resource produces a new request value, similar to `computed`.
+`request` 속성은 요청 값을 생성하는 반응형 계산을 정의합니다. 이 계산에서 읽는 신호가 변경될 때마다 리소스는 새 요청 값을 생성합니다. 이는 `computed`와 유사합니다.
 
-The `loader` property defines a `ResourceLoader`— an async function that retrieves some state. The resource calls the loader every time the `request` computation produces a new value, passing that value to the loader. See [Resource loaders](#resource-loaders) below for more details.
+`loader` 속성은 일부 상태를 검색하는 비동기 함수인 `ResourceLoader`를 정의합니다. 리소스는 `request` 계산이 새 값을 생성할 때마다 로더를 호출하고, 해당 값을 로더에 전달합니다. 더 많은 세부정보는 아래의 [Resource loaders](#resource-loaders)를 참조하십시오.
 
-`Resource` has a `value` signal that contains the results of the loader.
+`Resource`에는 로더의 결과를 포함하는 `value` 신호가 있습니다.
 
 ## Resource loaders
 
-When creating a resource, you specify a `ResourceLoader`. This loader is an async function that accepts a single parameter— a `ResourceLoaderParams` object— and returns a value.
+리소스를 생성할 때 `ResourceLoader`를 지정합니다. 이 로더는 단일 매개변수인 `ResourceLoaderParams` 객체를 수락하고 값을 반환하는 비동기 함수입니다.
 
-The `ResourceLoaderParams` object contains three properties: `request`, `previous`, and `abortSignal`.
+`ResourceLoaderParams` 객체는 세 가지 속성을 포함합니다: `request`, `previous`, 및 `abortSignal`.
 
-| Property      | Description                                                                                                                                      |
+| 속성          | 설명                                                                                                                                      |
 | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `request`     | The value of the resource's `request` computation.                                                                                               |
-| `previous`    | An object with a `status` property, containing the previous `ResourceStatus`.                                                                    |
-| `abortSignal` | An [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal). See [Aborting requests](#aborting-requests) below for details. |
+| `request`     | 리소스의 `request` 계산 값입니다.                                                                                               |
+| `previous`    | 이전 `ResourceStatus`를 포함하는 `status` 속성을 가진 객체입니다.                                                                    |
+| `abortSignal` | [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)입니다. 요청 중단에 대한 세부정보는 아래의 [Aborting requests](#aborting-requests)를 참조하십시오. |
 
 
-If the `request` computation returns `undefined`, the loader function does not run and the resource status becomes `Idle`.
+`request` 계산이 `undefined`를 반환하면 로더 함수는 실행되지 않으며 리소스 상태는 `Idle`이 됩니다.
 
-### Aborting requests
+### 요청 중단
 
-A resource aborts an outstanding request if the `request` computation changes while the resource is loading.
+리소스는 로딩 중일 때 `request` 계산이 변경되면 미결 요청을 중단합니다.
 
-You can use the `abortSignal` in `ResourceLoaderParams` to respond to aborted requests. For example, the native `fetch` function accepts an `AbortSignal`:
+`ResourceLoaderParams`의 `abortSignal`을 사용하여 중단된 요청에 응답할 수 있습니다. 예를 들어, 기본 제공 `fetch` 함수는 `AbortSignal`을 수락합니다:
 
 ```typescript
 const userId: Signal<string> = getUserId();
@@ -62,18 +62,18 @@ const userId: Signal<string> = getUserId();
 const userResource = resource({
   request: () => ({id: userId()}),
   loader: ({request, abortSignal}): Promise<User> => {
-    // fetch cancels any outstanding HTTP requests when the given `AbortSignal`
-    // indicates that the request has been aborted.
+    // fetch는 주어진 `AbortSignal`이 요청이 중단되었음을 나타내면
+    // 모든 미결 HTTP 요청을 취소합니다.
     return fetch(`users/${request.id}`, {signal: abortSignal});
   },
 });
 ```
 
-See [`AbortSignal` on MDN](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) for more details on request cancellation with `AbortSignal`.
+요청 취소에 대한 더 많은 세부정보는 [`AbortSignal` on MDN](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)을 참조하십시오.
 
-### Reloading
+### 로딩 다시 시작
 
-You can programmatically trigger a resource's `loader` by calling the `reload` method.
+`reload` 메서드를 호출하여 프로그래밍적으로 자원의 `loader`를 트리거할 수 있습니다.
 
 ```typescript
 const userId: Signal<string> = getUserId();
@@ -88,27 +88,27 @@ const userResource = resource({
 userResource.reload();
 ```
 
-## Resource status
+## 자원 상태
 
-The resource object has several signal properties for reading the status of the asynchronous loader.
+리소스 객체에는 비동기 로더의 상태를 읽기 위한 여러 신호 속성이 있습니다.
 
-| Property    | Description                                                                                                     |
+| 속성        | 설명                                                                                                     |
 | ----------- | --------------------------------------------------------------------------------------------------------------- |
-| `value`     | The most recent value of the resource, or `undefined` if no value has been received.                            |
-| `hasValue`  | Whether the resource has a value.                                                                               |
-| `error`     | The most recent error encountered while running the resource's loader, or `undefined` if no error has occurred. |
-| `isLoading` | Whether the resource loader is currently running.                                                               |
-| `status`    | The resource's specific `ResourceStatus`, as described below.                                                   |
+| `value`     | 리소스의 가장 최근 값, 값이 수신되지 않은 경우 `undefined`입니다.                            |
+| `hasValue`  | 리소스에 값이 있는지 여부입니다.                                                                               |
+| `error`     | 리소스의 로더를 실행하는 동안 발생한 가장 최근의 오류, 오류가 발생하지 않으면 `undefined`입니다. |
+| `isLoading` | 리소스 로더가 현재 실행 중인지 여부입니다.                                                               |
+| `status`    | 아래에 설명된 리소스의 특정 `ResourceStatus`입니다.                                                   |
 
-The `status` signal provides a specific `ResourceStatus` that describes the state of the resource.
+`status` 신호는 리소스의 상태를 설명하는 특정 `ResourceStatus`를 제공합니다.
 
-| Status      | `value()`         | Description                                                                  |
+| 상태        | `value()`         | 설명                                                                  |
 | ----------- | :---------------- | ---------------------------------------------------------------------------- |
-| `Idle`      | `undefined`       | The resource has no valid request and the loader has not run.                |
-| `Error`     | `undefined`       | The loader has encountered an error.                                         |
-| `Loading`   | `undefined`       | The loader is running as a result of the `request` value changing.           |
-| `Reloading` | Previous value    | The loader is running as a result calling of the resource's `reload` method. |
-| `Resolved`  | Resolved value    | The loader has completed.                                                    |
-| `Local`     | Locally set value | The resource's value has been set locally via `.set()` or `.update()`        |
-
-You can use this status information to conditionally display user interface elements, such loading indicators and error messages.
+| `Idle`      | `undefined`       | 리소스에 유효한 요청이 없으며 로더가 실행되지 않았습니다.                |
+| `Error`     | `undefined`       | 로더가 오류를 Encounter했습니다.                                         |
+| `Loading`   | `undefined`       | `request` 값의 변경으로 인해 로더가 실행 중입니다.           |
+| `Reloading` | 이전 값          | 리소스의 `reload` 메서드 호출로 인해 로더가 실행 중입니다. |
+| `Resolved`  | 해결된 값         | 로더가 완료되었습니다.                                                    |
+| `Local`     | 로컬로 설정된 값 | 리소스의 값이 `.set()` 또는 `.update()`를 통해 로컬로 설정되었습니다.        |
+
+이 상태 정보를 사용하여 로딩 표시 및 오류 메시지와 같은 사용자 인터페이스 요소를 조건부로 표시할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/ssr.md b/adev/src/content/guide/ssr.md
index 8ea021c08a90..962b06a4a8a7 100644
--- a/adev/src/content/guide/ssr.md
+++ b/adev/src/content/guide/ssr.md
@@ -1,31 +1,31 @@
-# Server and hybrid rendering
+# 서버 및 하이브리드 렌더링
 
-## What is hybrid rendering?
+## 하이브리드 렌더링이란?
 
-Hybrid rendering combines the benefits of server-side rendering (SSR), pre-rendering (also known as "static site generation" or SSG) and client-side rendering (CSR) to optimize your Angular application. It allows you to render different parts of your application using different strategies, giving you fine-grained control over how your app is delivered to users.
+하이브리드 렌더링은 서버 사이드 렌더링(SSR), 사전 렌더링(정적 사이트 생성 또는 SSG이라고도 함) 및 클라이언트 사이드 렌더링(CSR)의 이점을 결합하여 Angular 애플리케이션을 최적화합니다. 이를 통해 애플리케이션의 서로 다른 부분을 서로 다른 전략을 사용하여 렌더링할 수 있으며, 앱이 사용자에게 제공되는 방식에 대해 세밀한 제어를 제공합니다.
 
-## Setting up hybrid rendering
+## 하이브리드 렌더링 설정
 
-You can create a **new** project with server-side rendering with the Angular CLI:
+Angular CLI를 사용하여 서버 사이드 렌더링이 포함된 **새** 프로젝트를 생성할 수 있습니다:
 
 ```shell
 ng new --ssr
 ```
 
-You can also add server-side rendering to an existing project with the `ng add` command:
+기존 프로젝트에 서버 사이드 렌더링을 추가하려면 `ng add` 명령을 사용할 수 있습니다:
 
 ```shell
 ng add @angular/ssr
 ```
 
-Note: By default, Angular prerenders your entire application and generates a server file. To disable this and create a fully static app, set `outputMode` to `static`. To enable SSR, update the server routes to use `RenderMode.Server`.
-For more details, see [`Server routing`](#server-routing) and [`Generate a fully static application`](#generate-a-fully-static-application).
+참고: 기본적으로 Angular는 전체 애플리케이션을 사전 렌더링하고 서버 파일을 생성합니다. 이를 비활성화하고 완전 정적 앱을 만들려면 `outputMode`를 `static`으로 설정합니다. SSR을 활성화하려면 서버 라우트를 `RenderMode.Server`를 사용하도록 업데이트하십시오.
+자세한 사항은 [`서버 라우팅`](#server-routing) 및 [`완전히 정적 애플리케이션 생성`](#generate-a-fully-static-application)을 참조하세요.
 
-## Server routing
+## 서버 라우팅
 
-### Configuring server routes
+### 서버 라우트 구성
 
-You can create a server route config by declaring an array of [`ServerRoute`](api/ssr/ServerRoute 'API reference') objects. This configuration typically lives in a file named `app.routes.server.ts`.
+`[ServerRoute](api/ssr/ServerRoute 'API reference')` 객체의 배열을 선언하여 서버 라우트 구성을 생성할 수 있습니다. 이 구성은 일반적으로 `app.routes.server.ts`라는 파일에 위치합니다.
 
 ```typescript
 // app.routes.server.ts
@@ -33,25 +33,26 @@ import { RenderMode, ServerRoute } from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
   {
-    path: '', // This renders the "/" route on the client (CSR)
+    path: '', // 이 경로는 클라이언트에서 "/" 라우트를 렌더링합니다 (CSR)
     renderMode: RenderMode.Client,
   },
   {
-    path: 'about', // This page is static, so we prerender it (SSG)
+    path: 'about', // 이 페이지는 정적이므로 사전 렌더링합니다 (SSG)
     renderMode: RenderMode.Prerender,
   },
   {
-    path: 'profile', // This page requires user-specific data, so we use SSR
+    path: 'profile', // 이 페이지는 사용자 특정 데이터를 요구하므로 SSR을 사용합니다
     renderMode: RenderMode.Server,
   },
   {
-    path: '**', // All other routes will be rendered on the server (SSR)
+    path: '**', // 다른 모든 경로는 서버에서 렌더링됩니다 (SSR)
     renderMode: RenderMode.Server,
   },
 ];
 ```
 
-You can add this config to your application with [`provideServerRendering`](api/ssr/provideServerRendering 'API reference') using the [`withRoutes`](api/ssr/withRoutes 'API reference') function:
+[`withRoutes`](api/ssr/withRoutes 'API reference') 함수를 사용하여 [`provideServerRendering`](api/ssr/provideServerRendering 'API reference') 구성을 애플리케이션에 추가할 수 있습니다.
+
 
 ```typescript
 import { provideServerRendering, withRoutes } from '@angular/ssr';
@@ -61,12 +62,12 @@ import { serverRoutes } from './app.routes.server';
 const serverConfig: ApplicationConfig = {
   providers: [
     provideServerRendering(withRoutes(serverRoutes)),
-    // ... other providers ...
+    // ... 기타 공급자 ...
   ]
 };
 ```
 
-When using the [App shell pattern](ecosystem/service-workers/app-shell), you must specify the component to be used as the app shell for client-side rendered routes. To do this, use the [`withAppShell`](api/ssr/withAppShell 'API reference') fetaure:
+[App shell 패턴](ecosystem/service-workers/app-shell)을 사용할 때, 클라이언트 사이드 렌더링 라우트에 사용할 컴포넌트를 지정해야 합니다. 이를 위해 [`withAppShell`](api/ssr/withAppShell 'API reference') 기능을 사용합니다:
 
 ```typescript
 import { provideServerRendering, withRoutes, withAppShell } from '@angular/ssr';
@@ -78,66 +79,66 @@ const serverConfig: ApplicationConfig = {
       withRoutes(serverRoutes),
       withAppShell(AppShellComponent),
     ),
-    // ... other providers ...
+    // ... 기타 공급자 ...
   ]
 };
 ```
 
-### Rendering modes
+### 렌더링 모드
 
-The server routing configuration lets you specify how each route in your application should render by setting a [`RenderMode`](api/ssr/RenderMode 'API reference'):
+서버 라우팅 구성은 각 경로를 어떻게 렌더링할지 [`RenderMode`](api/ssr/RenderMode 'API reference') 설정으로 명시할 수 있습니다:
 
-| Rendering mode      | Description                                                                                                 |
-| ------------------- | ----------------------------------------------------------------------------------------------------------- |
-| **Server (SSR)**    | Renders the application on the server for each request, sending a fully populated HTML page to the browser. |
-| **Client (CSR)**    | Renders the application in the browser. This is the default Angular behavior.                               |
-| **Prerender (SSG)** | Prerenders the application at build time, generating static HTML files for each route.                      |
+| 렌더링 모드      | 설명                                                                                                            |
+| ----------------- | -------------------------------------------------------------------------------------------------------------- |
+| **서버 (SSR)**    | 각 요청에 대해 서버에서 애플리케이션을 렌더링하여 브라우저에 완전히 채워진 HTML 페이지를 보냅니다.             |
+| **클라이언트 (CSR)**| 브라우저에서 애플리케이션을 렌더링합니다. 이는 기본 Angular 동작입니다.                                      |
+| **사전 렌더링 (SSG)**| 빌드 타임에 애플리케이션을 사전 렌더링하여 각 경로에 대한 정적 HTML 파일을 생성합니다.                       |
 
-#### Choosing a rendering mode
+#### 렌더링 모드 선택
 
-Each rendering mode has different benefits and drawbacks. You can choose rendering modes based on the specific needs of your application.
+각 렌더링 모드에는 장단점이 있습니다. 애플리케이션의 특정 요구 사항에 따라 렌더링 모드를 선택할 수 있습니다.
 
-##### Client-side rendering
+##### 클라이언트 사이드 렌더링
 
-Client-side rendering has the simplest development model, as you can write code that assumes it always runs in a web browser. This lets you use a wide range of client-side libraries that also assume they run in a browser.
+클라이언트 사이드 렌더링은 가장 간단한 개발 모델을 가지고 있습니다. 항상 웹 브라우저에서 실행된다고 가정하고 코드를 쓸 수 있습니다. 이렇게 하면 웹 브라우저에서 실행된다고 가정하는 다양한 클라이언트 사이드 라이브러리를 사용할 수 있습니다.
 
-Client-side rendering generally has worse performance than other rendering modes, as it must download, parse, and execute your page's JavaScript before the user can see any rendered content. If your page fetches more data from the server as it renders, users also have to wait for those additional requests before they can view the complete content.
+클라이언트 사이드 렌더링은 다른 렌더링 모드보다 일반적으로 성능이 더 낮습니다. 사용자가 렌더링된 콘텐츠를 보기 전에 페이지의 JavaScript를 다운로드, 파싱 및 실행해야 하기 때문입니다. 페이지가 렌더링되는 동안 서버에서 추가 데이터를 가져온다면, 사용자 또한 전체 콘텐츠를 보기 전에 추가 요청을 기다려야 합니다.
 
-If your page is indexed by search crawlers, client-side rendering may negatively affect search engine optimization (SEO), as search crawlers have limits to how much JavaScript they execute when indexing a page.
+페이지가 검색 크롤러에 의해 인덱싱된다면, 클라이언트 사이드 렌더링은 검색 엔진 최적화(SEO)에 부정적인 영향을 미칠 수 있습니다. 왜냐하면 검색 크롤러는 페이지를 인덱싱할 때 실행하는 JavaScript의 양에 제한이 있기 때문입니다.
 
-When client-side rendering, the server does not need to do any work to render a page beyond serving static JavaScript assets. You may consider this factor if server cost is a concern.
+클라이언트 사이드 렌더링을 할 때, 서버는 정적 JavaScript 자산을 제공하는 것 외에는 페이지를 렌더링할 작업을 할 필요가 없습니다. 서버 비용이 걱정이라면 이 점을 고려할 수 있습니다.
 
-Applications that support installable, offline experiences with [service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) can rely on client-side rendering without needing to communicate with a server.
+[서비스 워커](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)를 통해 설치 가능한 오프라인 경험을 지원하는 애플리케이션은 서버와의 통신 없이 클라이언트 사이드 렌더링에 의존할 수 있습니다.
 
-##### Server-side rendering
+##### 서버 사이드 렌더링
 
-Server-side rendering offers faster page loads than client-side rendering. Instead of waiting for JavaScript to download and run, the server directly renders an HTML document upon receiving a request from the browser. The user experiences only the latency necessary for the server to fetch data and render the requested page. This mode also eliminates the need for additional network requests from the browser, as your code can fetch data during rendering on the server.
+서버 사이드 렌더링은 클라이언트 사이드 렌더링보다 더 빠른 페이지 로드를 제공합니다. JavaScript가 다운로드되고 실행되는 것을 기다리는 대신, 서버는 브라우저의 요청을 받은 즉시 HTML 문서를 직접 렌더링합니다. 사용자는 데이터를 가져오고 요청된 페이지를 렌더링하는 데 필요한 지연 시간만 경험하게 됩니다. 이 모드는 서버에서 렌더링 중 데이터를 가져올 수 있으므로 브라우저에서의 추가 네트워크 요청이 필요하지 않습니다.
 
-Server-side rendering generally has excellent search engine optimization (SEO), as search crawlers receive a fully rendered HTML document.
+서버 사이드 렌더링은 검색 크롤러가 완전히 렌더링된 HTML 문서를 수신하므로 일반적으로 뛰어난 검색 엔진 최적화(SEO)를 제공합니다.
 
-Server-side rendering requires you to author code that does not strictly depend on browser APIs and limits your selection of JavaScript libraries that assume they run in a browser.
+서버 사이드 렌더링은 브라우저 API에 엄격히 의존하지 않는 코드를 작성해야 하며, 브라우저에서 실행될 것이라고 가정하는 JavaScript 라이브러리의 선택을 제한합니다.
 
-When server-side rendering, your server runs Angular to produce an HTML response for every request which may increase server hosting costs.
+서버 사이드 렌더링을 할 때, 서버는 각 요청에 대해 HTML 응답을 생성하기 위해 Angular를 실행하므로 서버 호스팅 비용이 증가할 수 있습니다.
 
-##### Build-time prerendering
+##### 빌드 타임 사전 렌더링
 
-Prerendering offers faster page loads than both client-side rendering and server-side rendering. Because prerendering creates HTML documents at _build-time_, the server can directly respond to requests with the static HTML document without any additional work.
+사전 렌더링은 클라이언트 사이드 렌더링 및 서버 사이드 렌더링보다 더 빠른 페이지 로드를 제공합니다. 빌드 타임에 HTML 문서를 생성하므로, 서버는 추가 작업 없이 정적 HTML 문서로 요청에 직접 응답할 수 있습니다.
 
-Prerendering requires that all information necessary to render a page is available at _build-time_. This means that prerendered pages cannot include any data to the specific user loading the page. Prerendering is primarily useful for pages that are the same for all users of your application.
+사전 렌더링에는 페이지 렌더링에 필요한 모든 정보가 _빌드 타임_에 사용 가능해야 합니다. 이는 사전 렌더링된 페이지가 페이지를 로드하는 특정 사용자에 대한 데이터를 포함할 수 없음을 의미합니다. 사전 렌더링은 애플리케이션의 모든 사용자에게 동일한 페이지에 주로 유용합니다.
 
-Because prerendering occurs at build-time, it may add significant time to your production builds. Using [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') to produce a large number of HTML documents may affect the total file size of your deployments, and thus lead to slower deployments.
+사전 렌더링은 빌드 타임에 발생하므로, 배포를 위한 생산 빌드에 상당한 시간을 추가할 수 있습니다. [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')를 사용하여 대량의 HTML 문서를 생성하면 배포의 총 파일 크기에 영향을 미치고 결과적으로 느린 배포로 이어질 수 있습니다.
 
-Prerendering generally has excellent search engine optimization (SEO), as search crawlers receive a fully rendered HTML document.
+사전 렌더링은 검색 크롤러가 완전히 렌더링된 HTML 문서를 수신하므로 일반적으로 뛰어난 검색 엔진 최적화(SEO)를 제공합니다.
 
-Prerendering requires you to author code that does not strictly depend on browser APIs and limits your selection of JavaScript libraries that assume they run in a browser.
+사전 렌더링은 브라우저 API에 엄격히 의존하지 않는 코드를 작성해야 하며, 브라우저에서 실행될 것이라고 가정하는 JavaScript 라이브러리의 선택을 제한합니다.
 
-Prerendering incurs extremely little overhead per server request, as your server responds with static HTML documents. Static files are also easily cached by Content Delivery Networks (CDNs), browsers, and intermediate caching layers for even faster subsequent page loads. Fully static sites can also be deployed solely through a CDN or static file server, eliminating the need to maintain a custom server runtime for your application. This enhances scalability by offloading work from an application web server, making it particularly beneficial for high-traffic applications.
+사전 렌더링은 서버 요청당 매우 적은 오버헤드가 발생하므로 서버가 정적 HTML 문서로 응답합니다. 정적 파일은 또한 CDN(콘텐츠 배달 네트워크), 브라우저 및 중간 캐싱 계층에 의해 쉽게 캐시되어 후속 페이지 로드를 더욱 빠르게 할 수 있습니다. 완전 정적 사이트는 CDN이나 정적 파일 서버를 통해 배포할 수 있으며, 애플리케이션에 대한 맞춤형 서버 런타임을 유지할 필요가 없습니다. 이를 통해 애플리케이션 웹 서버의 작업을 분산시켜 확장성을 향상시켜 높은 트래픽 애플리케이션에 특히 유리합니다.
 
-Note: When using Angular service worker, the first request is server-rendered, but all subsequent requests are handled by the service worker and rendered client-side.
+참고: Angular 서비스 워커를 사용할 때, 첫 번째 요청은 서버에서 렌더링되지만 모든 후속 요청은 서비스 워커에 의해 처리되며 클라이언트 측에서 렌더링됩니다.
 
-### Setting headers and status codes
+### 헤더 및 상태 코드 설정
 
-You can set custom headers and status codes for individual server routes using the `headers` and `status` properties in the `ServerRoute` configuration.
+`ServerRoute` 구성에서 `headers` 및 `status` 속성을 사용하여 개별 서버 경로에 대한 사용자 정의 헤더 및 상태 코드를 설정할 수 있습니다.
 
 ```typescript
 // app.routes.server.ts
@@ -152,31 +153,31 @@ export const serverRoutes: ServerRoute[] = [
     },
     status: 201,
   },
-  // ... other routes
+  // ... 다른 경로들
 ];
 ```
 
-### Redirects
+### 리디렉션
 
-Angular handles redirects specified by the [`redirectTo`](api/router/Route#redirectTo 'API reference') property in route configurations, differently on the server-side.
+Angular는 서버 사이드에서 라우트 구성을 이용해 [`redirectTo`](api/router/Route#redirectTo 'API reference') 속성으로 지정된 리디렉션을 처리합니다.
 
-**Server-Side Rendering (SSR)**
-Redirects are performed using standard HTTP redirects (e.g., 301, 302) within the server-side rendering process.
+**서버 사이드 렌더링 (SSR)**
+리디렉션은 서버 사이드 렌더링 과정에서 표준 HTTP 리디렉션(예: 301, 302)을 사용하여 수행됩니다.
 
-**Prerendering (SSG)**
-Redirects are implemented as "soft redirects" using [`<meta http-equiv="refresh">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#refresh) tags in the prerendered HTML.
+**사전 렌더링 (SSG)**
+리디렉션은 사전 렌더링된 HTML에서 [`<meta http-equiv="refresh">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#refresh) 태그를 사용하여 "소프트 리디렉션"으로 구현됩니다.
 
-### Customizing build-time prerendering (SSG)
+### 빌드 타임 사전 렌더링 사용자 지정을 (SSG)
 
-When using [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference'), you can specify several configuration options to customize the prerendering and serving process.
+[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference')를 사용할 때, 사전 렌더링 및 제공 프로세스를 사용자 지정하기 위해 여러 구성 옵션을 지정할 수 있습니다.
 
-#### Parameterized routes
+#### 매개변수화된 경로
 
-For each route with [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference'), you can specify a [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') function. This function lets you control which specific parameters produce separate prerendered documents.
+[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference')가 있는 각 경로에 대해 [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') 함수를 지정할 수 있습니다. 이 함수는 어떤 특정 매개변수가 별도의 사전 렌더링 문서를 생성하는지 제어할 수 있게 해줍니다.
 
-The [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') function returns a `Promise` that resolves to an array of objects. Each object is a key-value map of route parameter name to value. For example, if you define a route like `posts/:id`, `getPrerenderParams ` could return the array `[{id: 123}, {id: 456}]`, and thus render separate documents for `posts/123` and `posts/456`.
+[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') 함수는 배열 객체로 해결되는 `Promise`를 반환합니다. 각 객체는 경로 매개변수 이름과 값의 키-값 맵입니다. 예를 들어 `posts/:id`와 같은 경로를 정의하면 `getPrerenderParams`는 배열 `[{id: 123}, {id: 456}]`을 반환하고, 따라서 `posts/123` 및 `posts/456`에 대한 별도의 문서를 렌더링합니다.
 
-The body of [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') can use Angular's [`inject`](api/core/inject 'API reference') function to inject dependencies and perform any work to determine which routes to prerender. This typically includes making requests to fetch data to construct the array of parameter values.
+[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')의 본문은 Angular의 [`inject`](api/core/inject 'API reference') 함수를 사용하여 종속성을 주입하고 어떤 경로를 사전 렌더링할지 결정하는 작업을 수행할 수 있습니다. 이는 일반적으로 매개변수 값의 배열을 구성하기 위해 데이터를 가져오는 요청을 포함합니다.
 
 ```typescript
 // app.routes.server.ts
@@ -188,29 +189,29 @@ export const serverRoutes: ServerRoute[] = [
     renderMode: RenderMode.Prerender,
     async getPrerenderParams() {
       const dataService = inject(PostService);
-      const ids = await dataService.getIds(); // Assuming this returns ['1', '2', '3']
+      const ids = await dataService.getIds(); // 이 반환값은 ['1', '2', '3']이라 가정
 
-      return ids.map(id => ({ id })); // Transforms IDs into an array of objects for prerendering
+      return ids.map(id => ({ id })); // 사전 렌더링을 위한 객체 배열로 ID 변환
 
-      // This will prerender the paths: `/post/1`, `/post/2` and `/post/3`
+      // 이로 인해 다음 경로가 사전 렌더링됩니다: `/post/1`, `/post/2` 및 `/post/3`
     },
   },
 ];
 ```
 
-Because [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') exclusively applies to [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference'), this function always runs at _build-time_. `getPrerenderParams` must not rely on any browser-specific or server-specific APIs for data.
+[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')는 [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference')에만 적용되므로 이 함수는 항상 _빌드 타임_에 실행됩니다. `getPrerenderParams`는 데이터를 위해 어떤 브라우저 특화 또는 서버 특화 API에도 의존해서는 안 됩니다.
 
-IMPORTANT: When using [`inject`](api/core/inject 'API reference') inside `getPrerenderParams`, please remember that `inject` must be used synchronously. It cannot be invoked within asynchronous callbacks or following any `await` statements. For more information, refer to [`runInInjectionContext`](api/core/runInInjectionContext).
+중요: `getPrerenderParams` 내부에서 [`inject`](api/core/inject 'API reference')를 사용할 때는 `inject`가 동기적으로 사용되어야 합니다. 비동기 콜백 내에서 또는 어떤 `await` 문 이후에서 호출할 수 없습니다. 자세한 정보는 [`runInInjectionContext`](api/core/runInInjectionContext)를 참조하십시오.
 
-#### Fallback strategies
+#### 폴백 전략
 
-When using [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference') mode, you can specify a fallback strategy to handle requests for paths that haven't been prerendered.
+[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference') 모드를 사용할 때, 사전 렌더링되지 않은 경로에 대한 요청을 처리하는 폴백 전략을 지정할 수 있습니다.
 
-The available fallback strategies are:
+사용 가능한 폴백 전략은 다음과 같습니다:
 
-- **Server:** Falls back to server-side rendering. This is the **default** behavior if no `fallback` property is specified.
-- **Client:** Falls back to client-side rendering.
-- **None:** No fallback. Angular will not handle requests for paths that are not prerendered.
+- **서버:** 서버 사이드 렌더링으로 폴백합니다. 이는 `fallback` 속성이 지정되지 않은 경우의 **기본** 동작입니다.
+- **클라이언트:** 클라이언트 사이드 렌더링으로 폴백합니다.
+- **없음:** 폴백이 없습니다. Angular는 사전 렌더링되지 않은 경로의 요청을 처리하지 않습니다.
 
 ```typescript
 // app.routes.server.ts
@@ -220,31 +221,31 @@ export const serverRoutes: ServerRoute[] = [
   {
     path: 'post/:id',
     renderMode: RenderMode.Prerender,
-    fallback: PrerenderFallback.Client, // Fallback to CSR if not prerendered
+    fallback: PrerenderFallback.Client, // 사전 렌더링되지 않았을 때 CSR로 폴백
     async getPrerenderParams() {
-      // This function returns an array of objects representing prerendered posts at the paths:
-      // `/post/1`, `/post/2`, and `/post/3`.
-      // The path `/post/4` will utilize the fallback behavior if it's requested.
+      // 이 함수는 다음 경로에서 사전 렌더링된 게시물의 객체 배열을 반환합니다:
+      // `/post/1`, `/post/2`, 및 `/post/3`.
+      // 경로 `/post/4`는 요청 시 폴백 동작을 활용할 것입니다.
       return [{ id: 1 }, { id: 2 }, { id: 3 }];
     },
   },
 ];
 ```
 
-## Accessing Request and Response via DI
+## DI를 통한 요청 및 응답 액세스
 
-The `@angular/core` package provides several tokens for interacting with the server-side rendering environment. These tokens give you access to crucial information and objects within your Angular application during SSR.
+`@angular/core` 패키지는 서버 사이드 렌더링 환경과 상호작용하기 위한 여러 토큰을 제공합니다. 이러한 토큰을 통해 Angular 애플리케이션 내에서 SSR 동안 중요한 정보와 객체에 액세스할 수 있습니다.
 
-- **[`REQUEST`](api/core/REQUEST 'API reference'):** Provides access to the current request object, which is of type [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) from the Web API. This allows you to access headers, cookies, and other request information.
-- **[`RESPONSE_INIT`](api/core/RESPONSE_INIT 'API reference'):** Provides access to the response initialization options, which is of type [`ResponseInit`](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#parameters) from the Web API. This allows you to set headers and the status code for the response dynamically. Use this token to set headers or status codes that need to be determined at runtime.
-- **[`REQUEST_CONTEXT`](api/core/REQUEST_CONTEXT 'API reference'):** Provides access to additional context related to the current request. This context can be passed as the second parameter of the [`handle`](api/ssr/AngularAppEngine#handle 'API reference') function. Typically, this is used to provide additional request-related information that is not part of the standard Web API.
+- **[`REQUEST`](api/core/REQUEST 'API reference'):** 현재 요청 객체에 대한 액세스를 제공합니다. 이는 웹 API의 [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) 유형입니다. 이를 통해 헤더, 쿠키 및 기타 요청 정보를 액세스할 수 있습니다.
+- **[`RESPONSE_INIT`](api/core/RESPONSE_INIT 'API reference'):** 응답 초기화 옵션에 대한 액세스를 제공합니다. 이는 웹 API의 [`ResponseInit`](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#parameters) 유형입니다. 이를 사용하여 응답의 헤더 및 상태 코드를 동적으로 설정할 수 있습니다. 런타임에 결정해야 하는 헤더나 상태 코드를 설정할 때 이 토큰을 사용하십시오.
+- **[`REQUEST_CONTEXT`](api/core/REQUEST_CONTEXT 'API reference'):** 현재 요청과 관련된 추가 컨텍스트에 대한 액세스를 제공합니다. 이 컨텍스트는 [`handle`](api/ssr/AngularAppEngine#handle 'API reference') 함수의 두 번째 매개변수로 전달할 수 있습니다. 일반적으로 이는 표준 웹 API의 일부가 아닌 추가 요청 관련 정보를 제공하는 데 사용됩니다.
 
 ```angular-ts
 import { inject, REQUEST } from '@angular/core';
 
 @Component({
   selector: 'app-my-component',
-  template: `<h1>My Component</h1>`,
+  template: `<h1>내 컴포넌트</h1>`,
 })
 export class MyComponent {
   constructor() {
@@ -254,17 +255,17 @@ export class MyComponent {
 }
 ```
 
-IMPORTANT: The above tokens will be `null` in the following scenarios:
-- During the build processes.
-- When the application is rendered in the browser (CSR).
-- When performing static site generation (SSG).
-- During route extraction in development (at the time of the request).
+중요: 위의 토큰은 다음 시나리오에서 `null`이 됩니다:
+- 빌드 프로세스 중.
+- 애플리케이션이 브라우저에서 렌더링될 때 (CSR).
+- 정적 사이트 생성을 수행할 때 (SSG).
+- 개발 중 경로 추출 시 (요청 시점).
 
-## Configuring a server
+## 서버 구성
 
 ### Node.js
 
-The `@angular/ssr/node` extends `@angular/ssr` specifically for Node.js environments. It provides APIs that make it easier to implement server-side rendering within your Node.js application. For a complete list of functions and usage examples, refer to the [`@angular/ssr/node` API reference](api/ssr/node/AngularNodeAppEngine) API reference.
+`@angular/ssr/node`는 Node.js 환경을 위해 특별히 `@angular/ssr`를 확장합니다. 이는 Node.js 애플리케이션 내에서 서버 사이드 렌더링을 구현하는 데 더 쉽게 만드는 API를 제공합니다. 기능 및 사용 예에 대한 전체 목록은 [`@angular/ssr/node` API 참조](api/ssr/node/AngularNodeAppEngine)에서 참조하십시오.
 
 ```typescript
 // server.ts
@@ -281,21 +282,21 @@ app.use('*', (req, res, next) => {
       if (response) {
         writeResponseToNodeResponse(response, res);
       } else {
-        next(); // Pass control to the next middleware
+        next(); // 다음 미들웨어로 제어를 전달
       }
     })
     .catch(next);
 });
 
 /**
- * The request handler used by the Angular CLI (dev-server and during build).
+ * Angular CLI (dev-server 및 빌드 중)에서 사용하는 요청 핸들러입니다.
  */
 export const reqHandler = createNodeRequestHandler(app);
 ```
 
-### Non-Node.js
+### 비 Node.js
 
-The `@angular/ssr` provides essential APIs for server-side rendering your Angular application on platforms other than Node.js. It leverages the standard [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) objects from the Web API, enabling you to integrate Angular SSR into various server environments. For detailed information and examples, refer to the [`@angular/ssr` API reference](api/ssr/AngularAppEngine).
+`@angular/ssr`는 Node.js 이외의 플랫폼에서 Angular 애플리케이션의 서버 사이드 렌더링을 위한 필수 API를 제공합니다. 이는 웹 API의 표준 [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) 및 [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) 객체를 활용하여 Angular SSR을 다양한 서버 환경에 통합할 수 있습니다. 자세한 정보 및 예제는 [`@angular/ssr` API 참조](api/ssr/AngularAppEngine)를 참조하십시오.
 
 ```typescript
 // server.ts
@@ -304,7 +305,7 @@ import { AngularAppEngine, createRequestHandler } from '@angular/ssr';
 const angularApp = new AngularAppEngine();
 
 /**
- * This is a request handler used by the Angular CLI (dev-server and during build).
+ * Angular CLI (dev-server 및 빌드 중)에 사용되는 요청 핸들러입니다.
  */
 export const reqHandler = createRequestHandler(async (req: Request) => {
   const res: Response|null = await angularApp.render(req);
@@ -313,13 +314,13 @@ export const reqHandler = createRequestHandler(async (req: Request) => {
 });
 ```
 
-## Generate a fully static application
+## 완전 정적 애플리케이션 생성
 
-By default, Angular prerenders your entire application and generates a server file for handling requests. This allows your app to serve pre-rendered content to users. However, if you prefer a fully static site without a server, you can opt out of this behavior by setting the `outputMode` to `static` in your `angular.json` configuration file.
+기본적으로 Angular는 전체 애플리케이션을 사전 렌더링하고 요청을 처리하는 서버 파일을 생성합니다. 이를 통해 앱은 사용자에게 사전 렌더링된 콘텐츠를 제공할 수 있습니다. 그러나 서버 없이 완전 정적 사이트를 선호하는 경우, `angular.json` 구성 파일에서 `outputMode`를 `static`으로 설정하여 이 동작에서 벗어날 수 있습니다.
 
-When `outputMode` is set to `static`, Angular generates pre-rendered HTML files for each route at build time, but it does not generate a server file or require a Node.js server to serve the app. This is useful for deploying to static hosting providers where a backend server is not needed.
+`outputMode`가 `static`으로 설정되면, Angular는 빌드 타임에 각 경로에 대한 사전 렌더링된 HTML 파일을 생성하지만, 서버 파일을 생성하지 않거나 앱을 제공하기 위해 Node.js 서버가 필요하지 않습니다. 이는 백엔드 서버가 필요 없는 정적 호스팅 제공업체에 배포하는 데 유용합니다.
 
-To configure this, update your `angular.json` file as follows:
+이를 구성하려면 `angular.json` 파일을 다음과 같이 업데이트하십시오:
 
 ```json
 {
@@ -337,11 +338,11 @@ To configure this, update your `angular.json` file as follows:
 }
 ```
 
-## Caching data when using HttpClient
+## HttpClient를 사용할 때 데이터 캐싱
 
-[`HttpClient`](api/common/http/HttpClient) cached outgoing network requests when running on the server. This information is serialized and transferred to the browser as part of the initial HTML sent from the server. In the browser, `HttpClient` checks whether it has data in the cache and if so, reuses it instead of making a new HTTP request during initial application rendering. `HttpClient` stops using the cache once an application becomes [stable](api/core/ApplicationRef#isStable) while running in a browser.
+[`HttpClient`](api/common/http/HttpClient)는 서버에서 실행될 때 아웃고잉 네트워크 요청을 캐시합니다. 이 정보는 직렬화되어 서버에서 클라이언트로 전송된 초기 HTML의 일부로 전송됩니다. 브라우저에서 `HttpClient`는 캐시에 데이터가 있는지 확인하고, 그렇다면 초기 애플리케이션 렌더링 중에 새 HTTP 요청을 만들지 않고 이를 재사용합니다. 애플리케이션이 브라우저에서 실행 중일 때 `HttpClient`는 애플리케이션이 안정적이게 되면 캐시 사용을 중단합니다.
 
-By default, `HttpClient` caches all `HEAD` and `GET` requests which don't contain `Authorization` or `Proxy-Authorization` headers. You can override those settings by using [`withHttpTransferCacheOptions`](api/platform-browser/withHttpTransferCacheOptions) when providing hydration.
+기본적으로 `HttpClient`는 `Authorization` 또는 `Proxy-Authorization` 헤더를 포함하지 않는 모든 `HEAD` 및 `GET` 요청을 캐시합니다. hydration을 제공할 때 [`withHttpTransferCacheOptions`](api/platform-browser/withHttpTransferCacheOptions)를 사용하여 이러한 설정을 재정의할 수 있습니다.
 
 ```typescript
 bootstrapApplication(AppComponent, {
@@ -353,11 +354,11 @@ bootstrapApplication(AppComponent, {
 });
 ```
 
-## Authoring server-compatible components
+## 서버 호환 구성 요소 작성하기
 
-Some common browser APIs and capabilities might not be available on the server. Applications cannot make use of browser-specific global objects like `window`, `document`, `navigator`, or `location` as well as certain properties of `HTMLElement`.
+일부 일반적인 브라우저 API 및 기능은 서버에서 사용 가능하지 않을 수 있습니다. 애플리케이션은 `window`, `document`, `navigator`, 또는 `location`과 같은 브라우저 특정 전역 객체를 사용할 수 없습니다. `HTMLElement`의 특정 속성도 마찬가지입니다.
 
-In general, code which relies on browser-specific symbols should only be executed in the browser, not on the server. This can be enforced through the [`afterRender`](api/core/afterRender) and [`afterNextRender`](api/core/afterNextRender) lifecycle hooks. These are only executed on the browser and skipped on the server.
+일반적으로 브라우저 특정 심볼에 의존하는 코드는 서버가 아닌 브라우저에서만 실행되어야 합니다. 이는 [`afterRender`](api/core/afterRender) 및 [`afterNextRender`](api/core/afterNextRender) 생명주기 훅을 통해 강제할 수 있습니다. 이들은 브라우저에서만 실행되며 서버에서는 건너뛰어집니다.
 
 ```angular-ts
 import { Component, ViewChild, afterNextRender } from '@angular/core';
@@ -371,9 +372,8 @@ export class MyComponent {
 
   constructor() {
     afterNextRender(() => {
-      // Safe to check `scrollHeight` because this will only run in the browser, not the server.
-      console.log('content height: ' + this.contentRef.nativeElement.scrollHeight);
+      // `scrollHeight`를 확인하는 것이 안전합니다. 왜냐하면 이 코드는 브라우저에서만 실행되므로 서버에서는 실행되지 않기 때문입니다.
+      console.log('내용 높이: ' + this.contentRef.nativeElement.scrollHeight);
     });
   }
-}
-```
+}
\ No newline at end of file
diff --git a/adev/src/content/guide/templates/binding.md b/adev/src/content/guide/templates/binding.md
index 3a39e48fe3a0..2a88176826a0 100644
--- a/adev/src/content/guide/templates/binding.md
+++ b/adev/src/content/guide/templates/binding.md
@@ -1,10 +1,10 @@
-# Binding dynamic text, properties and attributes
+# 동적 텍스트, 속성 및 특성 바인딩
 
-In Angular, a **binding** creates a dynamic connection between a component's template and its data. This connection ensures that changes to the component's data automatically update the rendered template.
+Angular에서 **바인딩**은 구성 요소의 템플릿과 데이터 간의 동적 연결을 생성합니다. 이 연결은 구성 요소의 데이터에 대한 변경 사항이 자동으로 렌더링된 템플릿을 업데이트하도록 보장합니다.
 
-## Render dynamic text with text interpolation
+## 텍스트 보간을 사용한 동적 텍스트 렌더링
 
-You can bind dynamic text in templates with double curly braces, which tells Angular that it is responsible for the expression inside and ensuring it is updated correctly. This is called **text interpolation**.
+두 개의 중괄호를 사용하여 템플릿에서 동적 텍스트를 바인딩할 수 있으며, 이는 Angular에게 표현식 내부의 업데이트를 책임지도록 알려줍니다. 이를 **텍스트 보간**이라고 합니다.
 
 ```angular-ts
 @Component({
@@ -18,109 +18,109 @@ export class AppComponent {
 }
 ```
 
-In this example, when the snippet is rendered to the page, Angular will replace `{{ theme }}` with `dark`.
+이 예에서 코드 조각이 페이지에 렌더링될 때 Angular는 `{{ theme }}`를 `dark`로 바꿉니다.
 
 ```angular-html
-<!-- Rendered Output -->
+<!-- 렌더링된 출력 -->
 <p>Your color preference is dark.</p>
 ```
 
-In addition to evaluating the expression at first render, Angular also updates the rendered content when the expression's value changes.
+Angular는 처음 렌더링할 때 표현식을 평가하는 것 외에도, 표현식의 값이 변경될 때 렌더링된 콘텐츠를 업데이트합니다.
 
-Continuing the theme example, if a user clicks on a button that changes the value of `theme` to `'light'` after the page loads, the page updates accordingly to:
+테마 예제를 계속하면, 사용자가 페이지 로드 후 `theme` 값을 `'light'`로 변경하는 버튼을 클릭하면 페이지는 다음과 같이 업데이트됩니다:
 
 ```angular-html
-<!-- Rendered Output -->
+<!-- 렌더링된 출력 -->
 <p>Your color preference is light.</p>
 ```
 
-You can use text interpolation anywhere you would normally write text in HTML.
+HTML에서 텍스트를 작성할 때의 모든 위치에서 텍스트 보간을 사용할 수 있습니다.
 
-All expression values are converted to a string. Objects and arrays are converted using the value’s `toString` method.
+모든 표현식 값은 문자열로 변환됩니다. 객체와 배열은 값의 `toString` 메서드를 사용하여 변환됩니다.
 
-## Binding dynamic properties and attributes
+## 동적 속성 및 특성 바인딩
 
-Angular supports binding dynamic values into object properties and HTML attributes with square brackets.
+Angular는 대괄호를 사용하여 객체 속성과 HTML 특성에 동적 값을 바인딩하는 것을 지원합니다.
 
-You can bind to properties on an HTML element's DOM instance, a [component](guide/components) instance, or a [directive](guide/directives) instance.
+HTML 요소의 DOM 인스턴스, [컴포넌트](guide/components) 인스턴스 또는 [디렉티브](guide/directives) 인스턴스의 속성에 바인딩할 수 있습니다.
 
-### Native element properties
+### 기본 요소의 속성
 
-Every HTML element has a corresponding DOM representation. For example, each `<button>` HTML element corresponds to an instance of `HTMLButtonElement` in the DOM. In Angular, you use property bindings to set values directly to the DOM representation of the element.
+모든 HTML 요소는 해당 DOM 표현이 있습니다. 예를 들어 각 `<button>` HTML 요소는 DOM에서 `HTMLButtonElement`의 인스턴스에 해당합니다. Angular에서는 속성 바인딩을 사용하여 요소의 DOM 표현에 직접적으로 값을 설정합니다.
 
 ```angular-html
-<!-- Bind the `disabled` property on the button element's DOM object -->
+<!-- 버튼 요소의 DOM 객체에서 `disabled` 속성 바인딩 -->
 <button [disabled]="isFormValid">Save</button>
 ```
 
-In this example, every time `isFormValid` changes, Angular automatically sets the `disabled` property of the `HTMLButtonElement` instance.
+이 예에서 `isFormValid`가 변경될 때마다 Angular는 자동으로 `HTMLButtonElement` 인스턴스의 `disabled` 속성을 설정합니다.
 
-### Component and directive properties
+### 컴포넌트 및 디렉티브 속성
 
-When an element is an Angular component, you can use property bindings to set component input properties using the same square bracket syntax.
+요소가 Angular 컴포넌트인 경우, 동일한 대괄호 구문을 사용하여 컴포넌트 입력 속성을 설정하기 위해 속성 바인딩을 사용할 수 있습니다.
 
 ```angular-html
-<!-- Bind the `value` property on the `MyListbox` component instance. -->
+<!-- `MyListbox` 컴포넌트 인스턴스의 `value` 속성 바인딩 -->
 <my-listbox [value]="mySelection" />
 ```
 
-In this example, every time `mySelection` changes, Angular automatically sets the `value` property of the `MyListbox` instance.
+이 예에서 `mySelection`이 변경될 때마다 Angular는 자동으로 `MyListbox` 인스턴스의 `value` 속성을 설정합니다.
 
-You can bind to directive properties as well.
+디렉티브 속성에도 바인딩할 수 있습니다.
 
 ```angular-html
-<!-- Bind to the `ngSrc` property of the `NgOptimizedImage` directive  -->
+<!-- `NgOptimizedImage` 디렉티브의 `ngSrc` 속성에 바인딩 -->
 <img [ngSrc]="profilePhotoUrl" alt="The current user's profile photo">
 ```
 
-### Attributes
+### 특성
 
-When you need to set HTML attributes that do not have corresponding DOM properties, such as ARIA attributes or SVG attributes, you can bind attributes to elements in your template with the `attr.` prefix.
+ARIA 특성이나 SVG 특성과 같이 해당 DOM 속성이 없는 HTML 특성을 설정해야 할 때는 `attr.` 접두사를 사용하여 템플릿의 요소에 특성을 바인딩할 수 있습니다.
 
 ```angular-html
-<!-- Bind the `role` attribute on the `<ul>` element to the component's `listRole` property. -->
+<!-- `<ul>` 요소의 `role` 특성을 컴포넌트의 `listRole` 속성에 바인딩 -->
 <ul [attr.role]="listRole">
 ```
 
-In this example, every time `listRole` changes, Angular automatically sets the `role` attribute of the `<ul>` element by calling `setAttribute`.
+이 예에서 `listRole`이 변경될 때마다 Angular는 `setAttribute`를 호출하여 `<ul>` 요소의 `role` 특성을 자동으로 설정합니다.
 
-If the value of an attribute binding is `null`, Angular removes the attribute by calling `removeAttribute`.
+특성 바인딩의 값이 `null`인 경우, Angular는 `removeAttribute`를 호출하여 특성을 제거합니다.
 
-### Text interpolation in properties and attributes
+### 속성 및 특성에서의 텍스트 보간
 
-You can also use text interpolation syntax in properties and attributes by using the double curly brace syntax instead of square braces around the property or attribute name. When using this syntax, Angular treats the assignment as a property binding.
+속성 이름이나 특성 이름 주위에 대괄호 대신 두 개의 중괄호 구문을 사용하여 속성과 특성에서 텍스트 보간 구문을 사용할 수도 있습니다. 이 구문을 사용할 때 Angular는 할당을 속성 바인딩으로 처리합니다.
 
 ```angular-html
-<!-- Binds a value to the `alt` property of the image element's DOM object. -->
+<!-- 이미지 요소의 DOM 객체에 `alt` 속성에 값을 바인딩 -->
 <img src="profile-photo.jpg" alt="Profile photo of {{ firstName }}" >
 ```
 
-To bind to an attribute with the text interpolation syntax, prefix the attribute name with `attr.`
+텍스트 보간 구문을 사용하여 특성에 바인딩하려면 특성 이름 앞에 `attr.`를 추가하십시오.
 
 ```angular-html
 <button attr.aria-label="Save changes to {{ objectType }}">
 ```
 
-## CSS class and style property bindings
+## CSS 클래스 및 스타일 속성 바인딩
 
-Angular supports additional features for binding CSS classes and CSS style properties to elements.
+Angular는 요소에 CSS 클래스 및 CSS 스타일 속성을 바인딩하는 추가 기능을 지원합니다.
 
-### CSS classes
+### CSS 클래스
 
-You can create a CSS class binding to conditionally add or remove a CSS class on an element based on whether the bound value is [truthy or falsy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+바인딩된 값이 [truthy 또는 falsy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)인지에 따라 요소에서 CSS 클래스를 조건부로 추가하거나 제거하기 위해 CSS 클래스 바인딩을 생성할 수 있습니다.
 
 ```angular-html
-<!-- When `isExpanded` is truthy, add the `expanded` CSS class. -->
+<!-- `isExpanded`가 truthy일 때 `expanded` CSS 클래스 추가 -->
 <ul [class.expanded]="isExpanded">
 ```
 
-You can also bind directly to the `class` property. Angular accepts three types of value:
+`class` 속성에 직접 바인딩할 수도 있습니다. Angular는 세 가지 유형의 값을 수용합니다:
 
-| Description of `class` value                                                                                                                                      | TypeScript type       |
-| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
-| A string containing one or more CSS classes separated by spaces                                                                                                   | `string`              |
-| An array of CSS class strings                                                                                                                                     | `string[]`            |
-| An object where each property name is a CSS class name and each corresponding value determines whether that class is applied to the element, based on truthiness. | `Record<string, any>` |
+| `class` 값의 설명                                                                                                                                       | TypeScript 유형       |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
+| 공백으로 구분된 하나 이상의 CSS 클래스를 포함하는 문자열                                                                                              | `string`              |
+| CSS 클래스 문자열의 배열                                                                                                                                | `string[]`            |
+| 각 속성 이름이 CSS 클래스 이름인 객체이며 각 해당 값이 해당 클래스가 요소에 적용되는지 여부를 결정합니다 (truthiness에 따라)                          | `Record<string, any>` |
 
 ```angular-ts
 @Component({
@@ -141,7 +141,7 @@ export class UserProfile {
 }
 ```
 
-The above example renders the following DOM:
+위의 예는 다음 DOM을 렌더링합니다:
 
 ```angular-html
 <ul class="full-width outlined"> ... </ul>
@@ -149,9 +149,9 @@ The above example renders the following DOM:
 <button class="highlighted"> ... </button>
 ```
 
-Angular ignores any string values that are not valid CSS class names.
+Angular는 유효하지 않은 CSS 클래스 이름이 있는 문자열 값은 무시합니다.
 
-When using static CSS classes, directly binding `class`, and binding specific classes, Angular intelligently combines all of the classes in the rendered result.
+정적 CSS 클래스를 사용할 때는 `class`를 직접 바인딩하고 특정 클래스를 바인딩하면 Angular는 렌더링된 결과에서 모든 클래스를 지능적으로 결합합니다.
 
 ```angular-ts
 @Component({
@@ -164,40 +164,40 @@ export class Listbox {
 }
 ```
 
-In the example above, Angular renders the `ul` element with all three CSS classes.
+위의 예에서 Angular는 모든 세 가지 CSS 클래스로 `ul` 요소를 렌더링합니다.
 
 ```angular-html
 <ul class="list box expanded">
 ```
 
-Angular does not guarantee any specific order of CSS classes on rendered elements.
+Angular는 렌더링된 요소의 CSS 클래스에 대한 특정 순서를 보장하지 않습니다.
 
-When binding `class` to an array or an object, Angular compares the previous value to the current value with the triple-equals operator (`===`). You must create a new object or array instance when you modify these values in order for Angular to apply any updates.
+`class`를 배열이나 객체에 바인딩할 때 Angular는 이전 값과 현재 값을 삼중 동등 연산자 (`===`)로 비교합니다. 이러한 값을 수정할 때는 업데이트를 적용할 수 있도록 새 객체 또는 배열 인스턴스를 생성해야 합니다.
 
-If an element has multiple bindings for the same CSS class, Angular resolves collisions by following its style precedence order.
+요소에 동일한 CSS 클래스를 위한 여러 바인딩이 있는 경우, Angular는 스타일 우선 순위 순서를 따라 충돌을 해결합니다.
 
-### CSS style properties
+### CSS 스타일 속성
 
-You can also bind to CSS style properties directly on an element.
+요소의 CSS 스타일 속성에 직접 바인딩할 수도 있습니다.
 
 ```angular-html
-<!-- Set the CSS `display` property based on the `isExpanded` property. -->
+<!-- `isExpanded` 속성에 따라 CSS `display` 속성 설정 -->
 <section [style.display]="isExpanded ? 'block' : 'none'">
 ```
 
-You can further specify units for CSS properties that accept units.
+단위가 필요한 CSS 속성에 대해 단위를 추가로 지정할 수 있습니다.
 
 ```angular-html
-<!-- Set the CSS `height` property to a pixel value based on the `sectionHeightInPixels` property. -->
+<!-- `sectionHeightInPixels` 속성에 따라 CSS `height` 속성을 픽셀 값으로 설정 -->
 <section [style.height.px]="sectionHeightInPixels">
 ```
 
-You can also set multiple style values in one binding. Angular accepts the following types of value:
+하나의 바인딩에서 여러 스타일 값을 설정할 수도 있습니다. Angular는 다음 유형의 값을 수용합니다:
 
-| Description of `style` value                                                                                              | TypeScript type       |
-| ------------------------------------------------------------------------------------------------------------------------- | --------------------- |
-| A string containing zero or more CSS declarations, such as `"display: flex; margin: 8px"`.                                | `string`              |
-| An object where each property name is a CSS property name and each corresponding value is the value of that CSS property. | `Record<string, any>` |
+| `style` 값의 설명                                                                                                     | TypeScript 유형       |
+| -------------------------------------------------------------------------------------------------------------- | --------------------- |
+| `"display: flex; margin: 8px"`와 같은 하나 이상의 CSS 선언을 포함하는 문자열                                              | `string`              |
+| 각 속성 이름이 CSS 속성 이름이고 각 해당 값이 해당 CSS 속성의 값인 객체                                                   | `Record<string, any>` |
 
 ```angular-ts
 @Component({
@@ -216,13 +216,13 @@ export class UserProfile {
 }
 ```
 
-The above example renders the following DOM.
+위의 예는 다음 DOM을 렌더링합니다.
 
 ```angular-html
 <ul style="display: flex; padding: 8px"> ... </ul>
 <section style="border: 1px solid black; font-weight: bold"> ... </section>
 ```
 
-When binding `style` to an object, Angular compares the previous value to the current value with the triple-equals operator (`===`). You must create a new object instance when you modify these values in order to Angular to apply any updates.
+`style`을 객체에 바인딩할 때 Angular는 이전 값과 현재 값을 삼중 동등 연산자 (`===`)로 비교합니다. 이러한 값을 수정할 때는 업데이트를 적용할 수 있도록 새 객체 인스턴스를 만들어야 합니다.
 
-If an element has multiple bindings for the same style property, Angular resolves collisions by following its style precedence order.
+요소에 동일한 스타일 속성에 대한 여러 바인딩이 있는 경우, Angular는 스타일 우선 순위 순서를 따라 충돌을 해결합니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/templates/control-flow.md b/adev/src/content/guide/templates/control-flow.md
index 735b8a31a64c..5f53100b04f8 100644
--- a/adev/src/content/guide/templates/control-flow.md
+++ b/adev/src/content/guide/templates/control-flow.md
@@ -1,34 +1,34 @@
-# Control flow
+# 제어 흐름
 
-Angular templates support control flow blocks that let you conditionally show, hide, and repeat elements.
+Angular 템플릿은 조건에 따라 요소를 표시, 숨기고 반복할 수 있는 제어 흐름 블록을 지원합니다.
 
-Note: This was previously accomplished with the *ngIf, *ngFor, and \*ngSwitch directives.
+참고: 이것은 이전에 *ngIf, *ngFor 및 \*ngSwitch 지시어로 수행되었습니다.
 
-## Conditionally display content with `@if`, `@else-if` and `@else`
+## `@if`, `@else-if` 및 `@else`로 조건부 콘텐츠 표시
 
-The `@if` block conditionally displays its content when its condition expression is truthy:
+`@if` 블록은 그 조건 표현식이 참일 때 내용을 조건부로 표시합니다:
 
 ```angular-html
 @if (a > b) {
-  <p>{{a}} is greater than {{b}}</p>
+  <p>{{a}}는 {{b}}보다 큽니다</p>
 }
 ```
 
-If you want to display alternative content, you can do so by providing any number of `@else if` blocks and a singular `@else` block.
+대체 콘텐츠를 표시하고 싶다면, 임의의 개수의 `@else if` 블록과 단일 `@else` 블록을 제공할 수 있습니다.
 
 ```angular-html
 @if (a > b) {
-  {{a}} is greater than {{b}}
+  {{a}}는 {{b}}보다 큽니다
 } @else if (b > a) {
-  {{a}} is less than {{b}}
+  {{a}}는 {{b}}보다 작습니다
 } @else {
-  {{a}} is equal to {{b}}
+  {{a}}는 {{b}}와 같습니다
 }
 ```
 
-### Referencing the conditional expression's result
+### 조건 표현식 결과 참조하기
 
-The `@if` conditional supports saving the result of the conditional expression into a variable for reuse inside of the block.
+`@if` 조건부는 조건 표현식의 결과를 변수에 저장하여 블록 내에서 재사용할 수 있도록 지원합니다.
 
 ```angular-html
 @if (user.profile.settings.startDate; as startDate) {
@@ -36,13 +36,13 @@ The `@if` conditional supports saving the result of the conditional expression i
 }
 ```
 
-This can be useful for referencing longer expressions that would be easier to read and maintain within the template.
+이는 템플릿 내에서 읽기 쉽고 유지 관리하기 쉬운 긴 표현식을 참조하는 데 유용할 수 있습니다.
 
-## Repeat content with the `@for` block
+## `@for` 블록으로 콘텐츠 반복
 
-The `@for` block loops through a collection and repeatedly renders the content of a block. The collection can be any JavaScript [iterable](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols), but Angular has additional performance optimizations for `Array` values.
+`@for` 블록은 컬렉션을 반복하고 블록의 내용을 반복적으로 렌더링합니다. 컬렉션은 모든 JavaScript [iterable](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols)일 수 있지만, Angular는 `Array` 값에 대한 추가 성능 최적화를 제공합니다.
 
-A typical `@for` loop looks like:
+전형적인 `@for` 루프는 다음과 같습니다:
 
 ```angular-html
 @for (item of items; track item.id) {
@@ -50,58 +50,58 @@ A typical `@for` loop looks like:
 }
 ```
 
-Angular's `@for` block does not support flow-modifying statements like JavaScript's `continue` or `break`.
+Angular의 `@for` 블록은 JavaScript의 `continue` 또는 `break`와 같은 흐름 수정문을 지원하지 않습니다.
 
-### Why is `track` in `@for` blocks important?
+### `@for` 블록의 `track`이 중요한 이유는 무엇인가요?
 
-The `track` expression allows Angular to maintain a relationship between your data and the DOM nodes on the page. This allows Angular to optimize performance by executing the minimum necessary DOM operations when the data changes.
+`track` 표현식은 Angular가 데이터와 페이지의 DOM 노드 간의 관계를 유지하도록 합니다. 이렇게 하면 데이터가 변경될 때 최소한의 DOM 작업을 실행하여 성능을 최적화할 수 있습니다.
 
-Using track effectively can significantly improve your application's rendering performance when looping over data collections.
+트랙을 효과적으로 사용하면 데이터 컬렉션을 반복할 때 애플리케이션의 렌더링 성능을 크게 향상시킬 수 있습니다.
 
-Select a property that uniquely identifies each item in the `track` expression. If your data model includes a uniquely identifying property, commonly `id` or `uuid`, use this value. If your data does not include a field like this, strongly consider adding one.
+`track` 표현식에서 각 항목을 고유하게 식별하는 속성을 선택하세요. 데이터 모델에 일반적으로 `id` 또는 `uuid`와 같은 고유 식별 속성이 포함되어 있다면 이 값을 사용하세요. 데이터에 이러한 필드가 포함되어 있지 않다면 반드시 추가하는 것을 고려하세요.
 
-For static collections that never change, you can use `$index` to tell Angular to track each item by its index in the collection.
+변경되지 않는 정적 컬렉션의 경우 `$index`를 사용하여 Angular가 컬렉션 내에서 각 항목을 인덱스로 추적하도록 할 수 있습니다.
 
-If no other option is available, you can specify `identity`. This tells Angular to track the item by its reference identity using the triple-equals operator (`===`). Avoid this option whenever possible as it can lead to significantly slower rendering updates, as Angular has no way to map which data item corresponds to which DOM nodes.
+다른 옵션이 없으면 `identity`를 지정할 수 있습니다. 이는 Angular가 삼중 등호 연산자(`===`)를 사용하여 항목을 참조 아이덴티티로 추적하도록 지시합니다. 가능한 한 이 옵션은 피하세요. 이 옵션은 Angular가 데이터 항목과 어떤 DOM 노드가 연결되어 있는지 매핑할 수 없기 때문에 렌더링 업데이트가 현저히 느려질 수 있습니다.
 
-### Contextual variables in `@for` blocks
+### `@for` 블록의 컨텍스트 변수
 
-Inside `@for` blocks, several implicit variables are always available:
+`@for` 블록 내에서는 항상 여러 암묵적 변수가 사용 가능합니다:
 
-| Variable | Meaning                                       |
-| -------- | --------------------------------------------- |
-| `$count` | Number of items in a collection iterated over |
-| `$index` | Index of the current row                      |
-| `$first` | Whether the current row is the first row      |
-| `$last`  | Whether the current row is the last row       |
-| `$even`  | Whether the current row index is even         |
-| `$odd`   | Whether the current row index is odd          |
+| 변수     | 의미                                         |
+| -------- | -------------------------------------------- |
+| `$count` | 반복된 컬렉션의 항목 수                   |
+| `$index` | 현재 행의 인덱스                             |
+| `$first` | 현재 행이 첫 번째 행인지 여부                |
+| `$last`  | 현재 행이 마지막 행인지 여부                |
+| `$even`  | 현재 행 인덱스가 짝수인지 여부              |
+| `$odd`   | 현재 행 인덱스가 홀수인지 여부              |
 
-These variables are always available with these names, but can be aliased via a `let` segment:
+이 변수들은 항상 이러한 이름으로 사용 가능하지만 `let` 세그먼트를 통해 별칭을 붙일 수 있습니다:
 
 ```angular-html
 @for (item of items; track item.id; let idx = $index, e = $even) {
-  <p>Item #{{ idx }}: {{ item.name }}</p>
+  <p>항목 #{{ idx }}: {{ item.name }}</p>
 }
 ```
 
-The aliasing is useful when nesting `@for` blocks, letting you read variables from the outer `@for` block from an inner `@for` block.
+별칭은 `@for` 블록을 중첩할 때 유용하며, 내부 `@for` 블록에서 외부 `@for` 블록의 변수를 읽을 수 있도록 합니다.
 
-### Providing a fallback for `@for` blocks with the `@empty` block
+### `@empty` 블록으로 `@for` 블록에 대한 대체 콘텐츠 제공
 
-You can optionally include an `@empty` section immediately after the `@for` block content. The content of the `@empty` block displays when there are no items:
+선택적으로 `@for` 블록 콘텐츠 직후에 `@empty` 섹션을 포함할 수 있습니다. `@empty` 블록의 콘텐츠는 항목이 없을 때 표시됩니다:
 
 ```angular-html
 @for (item of items; track item.name) {
   <li> {{ item.name }}</li>
 } @empty {
-  <li aria-hidden="true"> There are no items. </li>
+  <li aria-hidden="true"> 항목이 없습니다. </li>
 }
 ```
 
-## Conditionally display content with the `@switch` block
+## `@switch` 블록으로 조건부 콘텐츠 표시
 
-While the `@if` block is great for most scenarios, the `@switch` block provides an alternate syntax to conditionally render data. Its syntax closely resembles JavaScript's `switch` statement.
+`@if` 블록이 대부분의 시나리오에 유용하지만, `@switch` 블록은 데이터를 조건부로 렌더링하기 위한 대체 구문을 제공합니다. 그 구문은 JavaScript의 `switch` 문과 유사합니다.
 
 ```angular-html
 @switch (userPermissions) {
@@ -120,10 +120,10 @@ While the `@if` block is great for most scenarios, the `@switch` block provides
 }
 ```
 
-The value of the conditional expression is compared to the case expression using the triple-equals (`===`) operator.
+조건 표현식의 값은 삼중 등호(`===`) 연산자를 사용하여 케이스 표현식과 비교됩니다.
 
-**`@switch` does not have a fallthrough**, so you do not need an equivalent to a `break` or `return` statement in the block.
+**`@switch`는 추적이 없으므로 블록 내에서 `break` 또는 `return` 문과 같은 동등한 항목이 필요하지 않습니다.**
 
-You can optionally include a `@default` block. The content of the `@default` block displays if none of the preceding case expressions match the switch value.
+옵션으로 `@default` 블록을 포함할 수 있습니다. `@default` 블록의 내용은 앞의 케이스 표현식이 스위치 값을 일치시키지 않을 경우 표시됩니다.
 
-If no `@case` matches the expression and there is no `@default` block, nothing is shown.
+어떠한 `@case`도 표현식과 일치하지 않고 `@default` 블록이 없으면, 아무것도 표시되지 않습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/templates/defer.md b/adev/src/content/guide/templates/defer.md
index 6355beda73b6..c379925f4f27 100644
--- a/adev/src/content/guide/templates/defer.md
+++ b/adev/src/content/guide/templates/defer.md
@@ -1,8 +1,8 @@
-# Deferred loading with `@defer`
+# 지연 로딩과 `@defer`
 
-Deferrable views, also known as `@defer` blocks, reduce the initial bundle size of your application by deferring the loading of code that is not strictly necessary for the initial rendering of a page. This often results in a faster initial load and improvement in Core Web Vitals (CWV), primarily Largest Contentful Paint (LCP) and Time to First Byte (TTFB).
+지연 가능한 뷰, 즉 `@defer` 블록은 페이지의 초기 렌더링에 필수적이지 않은 코드의 로딩을 지연시켜 애플리케이션의 초기 번들 크기를 줄입니다. 이로 인해 초기 로드 속도가 빨라지고 Core Web Vitals(CWV), 주로 Largest Contentful Paint(LCP)와 Time to First Byte(TTFB)가 개선되는 경향이 있습니다.
 
-To use this feature, you can declaratively wrap a section of your template in a @defer block:
+이 기능을 사용하려면 템플릿의 섹션을 @defer 블록으로 선언적으로 감쌀 수 있습니다:
 
 ```angular-html
 @defer {
@@ -10,32 +10,32 @@ To use this feature, you can declaratively wrap a section of your template in a
 }
 ```
 
-The code for any components, directives, and pipes inside the `@defer` block is split into a separate JavaScript file and loaded only when necessary, after the rest of the template has been rendered.
+`@defer` 블록 내부의 모든 컴포넌트, 지시문 및 파이프의 코드는 별도의 JavaScript 파일로 분할되어 필요할 때만 로딩되며, 나머지 템플릿이 렌더링된 후 로드됩니다.
 
-Deferrable views support a variety of triggers, prefetching options, and sub-blocks for placeholder, loading, and error state management.
+지연 가능한 뷰는 다양한 트리거, 미리 불러오기 옵션 및 자리 표시자, 로딩 및 오류 상태 관리를 위한 하위 블록을 지원합니다.
 
-## Which dependencies are deferred?
+## 어떤 종속성이 지연됩니까?
 
-Components, directives, pipes, and any component CSS styles can be deferred when loading an application.
+애플리케이션을 로드할 때 컴포넌트, 지시문, 파이프 및 모든 컴포넌트 CSS 스타일을 지연시킬 수 있습니다.
 
-In order for the dependencies within a `@defer` block to be deferred, they need to meet two conditions:
+`@defer` 블록 내의 종속성이 지연되기 위해서는 두 가지 조건을 충족해야 합니다:
 
-1. **They must be standalone.** Non-standalone dependencies cannot be deferred and are still eagerly loaded, even if they are inside of `@defer` blocks.
-1. **They cannot be referenced outside of `@defer` blocks within the same file.** If they are referenced outside the `@defer` block or referenced within ViewChild queries, the dependencies will be eagerly loaded.
+1. **독립적이어야 합니다.** 비독립적인 종속성은 지연될 수 없으며 `@defer` 블록 내부에 있더라도 여전히 즉시 로드됩니다.
+1. **같은 파일 내의 `@defer` 블록 외부에서 참조할 수 없습니다.** `@defer` 블록 외부에서 참조되거나 ViewChild 쿼리 내에서 참조되면 종속성이 즉시 로드됩니다.
 
-The _transitive_ dependencies of the components, directives and pipes used in the `@defer` block do not strictly need to be standalone; transitive dependencies can still be declared in an `NgModule` and participate in deferred loading.
+`@defer` 블록에서 사용되는 컴포넌트, 지시문 및 파이프의 _전이_ 종속성은 엄격하게 독립적일 필요는 없으며, 전이 종속성은 여전히 `NgModule`에 선언되고 지연 로딩에 참여할 수 있습니다.
 
-Angular's compiler produces a [dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) statement for each component, directive, and pipe used in the `@defer` block. The main content of the block renders after all the imports resolve. Angular does not guarantee any particular order for these imports.
+Angular의 컴파일러는 `@defer` 블록에서 사용되는 각 컴포넌트, 지시문 및 파이프에 대해 [동적 import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) 문을 생성합니다. 블록의 주요 내용은 모든 import가 해결된 후 렌더링됩니다. Angular는 이러한 import의 특정 순서를 보장하지 않습니다.
 
-## How to manage different stages of deferred loading
+## 지연 로딩의 다양한 단계를 관리하는 방법
 
-`@defer` blocks have several sub blocks to allow you to gracefully handle different stages in the deferred loading process.
+`@defer` 블록은 지연 로딩 과정의 다양한 단계를 우아하게 처리할 수 있도록 여러 하위 블록을 가지고 있습니다.
 
 ### `@defer`
 
-This is the primary block that defines the section of content that is lazily loaded. It is not rendered initially– deferred content loads and renders once the specified [trigger](/guide/defer#triggers) occurs or the `when` condition is met.
+이 블록은 지연 로드되는 콘텐츠 섹션을 정의하는 기본 블록입니다. 처음에는 렌더링되지 않으며, 지연된 콘텐츠는 지정된 [트리거](/guide/defer#triggers)가 발생하거나 `when` 조건이 충족되면 로드되고 렌더링됩니다.
 
-By default, a @defer block is triggered when the browser state becomes [idle](/guide/defer#idle).
+기본적으로, @defer 블록은 브라우저의 상태가 [idle](/guide/defer#idle) 상태에 있을 때 트리거됩니다.
 
 ```angular-html
 @defer {
@@ -43,11 +43,11 @@ By default, a @defer block is triggered when the browser state becomes [idle](/g
 }
 ```
 
-### Show placeholder content with `@placeholder`
+### `@placeholder`로 자리 표시자 콘텐츠 표시
 
-By default, defer blocks do not render any content before they are triggered.
+기본적으로 지연 블록은 트리거되기 전까지 어떤 콘텐츠도 렌더링하지 않습니다.
 
-The `@placeholder` is an optional block that declares what content to show before the `@defer` block is triggered.
+`@placeholder`는 `@defer` 블록이 트리거되기 전에 표시할 콘텐츠를 선언하는 선택적 블록입니다.
 
 ```angular-html
 @defer {
@@ -57,11 +57,11 @@ The `@placeholder` is an optional block that declares what content to show befor
 }
 ```
 
-While optional, certain triggers may require the presence of either a `@placeholder` or a [template reference variable](/guide/templates/variables#template-reference-variables) to function. See the [Triggers](/guide/defer#triggers) section for more details.
+선택적이지만, 특정 트리거는 기능을 위해 `@placeholder` 또는 [템플릿 참조 변수](/guide/templates/variables#template-reference-variables)의 존재를 요구할 수 있습니다. 자세한 내용은 [Triggers](/guide/defer#triggers) 섹션을 참조하세요.
 
-Angular replaces placeholder content with the main content once loading is complete. You can use any content in the placeholder section including plain HTML, components, directives, and pipes. Keep in mind the _dependencies of the placeholder block are eagerly loaded_.
+Angular는 로딩이 완료되면 자리 표시자 콘텐츠를 주요 콘텐츠로 교체합니다. 자리 표시자 섹션에는 일반 HTML, 컴포넌트, 지시문 및 파이프를 포함한 모든 콘텐츠를 사용할 수 있습니다. 자리 표시자 블록의 _종속성은 즉시 로드됩니다_.
 
-The `@placeholder` block accepts an optional parameter to specify the `minimum` amount of time that this placeholder should be shown after the placeholder content initially renders.
+`@placeholder` 블록은 자리 표시자 콘텐츠가 처음 렌더링된 후 이 자리 표시자가 표시되어야 하는 `minimum` 시간을 지정하는 선택적 매개변수를 허용합니다.
 
 ```angular-html
 @defer {
@@ -71,11 +71,11 @@ The `@placeholder` block accepts an optional parameter to specify the `minimum`
 }
 ```
 
-This `minimum` parameter is specified in time increments of milliseconds (ms) or seconds (s). You can use this parameter to prevent fast flickering of placeholder content in the case that the deferred dependencies are fetched quickly.
+이 `minimum` 매개변수는 밀리초(ms) 또는 초(s) 단위로 지정됩니다. 이 매개변수를 사용하여 지연 종속성이 빠르게 가져오기 될 경우 자리 표시자 콘텐츠가 너무 빠르게 깜박이는 것을 방지할 수 있습니다.
 
-### Show loading content with `@loading`
+### `@loading`으로 로딩 콘텐츠 표시
 
-The `@loading` block is an optional block that allows you to declare content that is shown while deferred dependencies are loading. It replaces the `@placeholder` block once loading is triggered.
+`@loading` 블록은 지연 종속성이 로드되는 동안 표시할 콘텐츠를 선언할 수 있는 선택적 블록입니다. 로딩이 트리거되면 `@placeholder` 블록을 교체합니다.
 
 ```angular-html
 @defer {
@@ -87,12 +87,12 @@ The `@loading` block is an optional block that allows you to declare content tha
 }
 ```
 
-Its dependencies are eagerly loaded (similar to `@placeholder`).
+그 종속성은 즉시 로드됩니다(`@placeholder`와 유사).
 
-The `@loading` block accepts two optional parameters to help prevent fast flickering of content that may occur when deferred dependencies are fetched quickly,:
+`@loading` 블록은 지연 종속성이 빠르게 가져오기 될 때 발생할 수 있는 콘텐츠의 빠른 깜박임을 방지하기 위해 두 개의 선택적 매개변수를 허용합니다:
 
-- `minimum` - the minimum amount of time that this placeholder should be shown
-- `after` - the amount of time to wait after loading begins before showing the loading template
+- `minimum` - 이 자리 표시자가 표시되어야 하는 최소 시간
+- `after` - 로딩 시작 후 로딩 템플릿을 표시하기 전 대기할 시간
 
 ```angular-html
 @defer {
@@ -102,11 +102,11 @@ The `@loading` block accepts two optional parameters to help prevent fast flicke
 }
 ```
 
-Both parameters are specified in time increments of milliseconds (ms) or seconds (s). In addition, the timers for both parameters begin immediately after the loading has been triggered.
+두 매개변수는 밀리초(ms) 또는 초(s) 단위로 지정됩니다. 또한 두 매개변수의 타이머는 로딩이 트리거된 직후에 시작됩니다.
 
-### Show error state when deferred loading fails with `@error`
+### `@error`로 지연 로딩 실패 시 오류 상태 표시
 
-The `@error` block is an optional block that displays if deferred loading fails. Similar to `@placeholder` and `@loading`, the dependencies of the @error block are eagerly loaded.
+`@error` 블록은 지연 로딩이 실패할 경우 표시되는 선택적 블록입니다. `@placeholder` 및 `@loading`과 유사하게, `@error` 블록의 종속성은 즉시 로드됩니다.
 
 ```angular-html
 @defer {
@@ -116,34 +116,34 @@ The `@error` block is an optional block that displays if deferred loading fails.
 }
 ```
 
-## Controlling deferred content loading with triggers
+## 트리거로 지연 콘텐츠 로딩 제어하기
 
-You can specify **triggers** that control when Angular loads and displays deferred content.
+**트리거**를 지정하여 Angular가 지연 콘텐츠를 로드하고 표시하는 시점을 제어할 수 있습니다.
 
-When a `@defer` block is triggered, it replaces placeholder content with lazily loaded content.
+`@defer` 블록이 트리거되면 자리 표시자 콘텐츠가 지연 로드된 콘텐츠로 교체됩니다.
 
-Multiple event triggers can be defined by separating them with a semicolon, `;` and will be evaluated as OR conditions.
+여러 이벤트 트리거는 세미콜론 `;`으로 구분하여 정의할 수 있으며, OR 조건으로 평가됩니다.
 
-There are two types of triggers: `on` and `when`.
+트리거에는 두 가지 유형이 있습니다: `on` 및 `when`.
 
 ### `on`
 
-`on` specifies a condition for when the `@defer` block is triggered.
+`on`은 `@defer` 블록이 트리거되는 조건을 지정합니다.
 
-The available triggers are as follows:
+사용 가능한 트리거는 다음과 같습니다:
 
-| Trigger                       | Description                                                            |
-| ----------------------------- | ---------------------------------------------------------------------- |
-| [`idle`](#idle)               | Triggers when the browser is idle.                                     |
-| [`viewport`](#viewport)       | Triggers when specified content enters the viewport                    |
-| [`interaction`](#interaction) | Triggers when the user interacts with specified element                |
-| [`hover`](#hover)             | Triggers when the mouse hovers over specified area                     |
-| [`immediate`](#immediate)     | Triggers immediately after non-deferred content has finished rendering |
-| [`timer`](#timer)             | Triggers after a specific duration                                     |
+| 트리거                        | 설명                                                               |
+| ----------------------------- | ------------------------------------------------------------------ |
+| [`idle`](#idle)              | 브라우저가 idle 상태일 때 트리거됩니다.                           |
+| [`viewport`](#viewport)      | 지정된 콘텐츠가 뷰포트에 들어올 때 트리거됩니다.                  |
+| [`interaction`](#interaction)| 사용자가 지정된 요소와 상호 작용할 때 트리거됩니다.             |
+| [`hover`](#hover)            | 마우스가 지정된 영역 위에 있을 때 트리거됩니다.                   |
+| [`immediate`](#immediate)    | 비지연 콘텐츠가 렌더링을 완료한 직후에 트리거됩니다.               |
+| [`timer`](#timer)            | 특정 기간이 지난 후 트리거됩니다.                                 |
 
 #### `idle`
 
-The `idle` trigger loads the deferred content once the browser has reached an idle state, based on requestIdleCallback. This is the default behavior with a defer block.
+`idle` 트리거는 브라우저가 idle 상태에 도달했을 때 지연 콘텐츠를 로드합니다. 이는 지연 블록의 기본 동작입니다.
 
 ```angular-html
 <!-- @defer (on idle) -->
@@ -156,9 +156,9 @@ The `idle` trigger loads the deferred content once the browser has reached an id
 
 #### `viewport`
 
-The `viewport` trigger loads the deferred content when the specified content enters the viewport using the [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API). Observed content may be `@placeholder` content or an explicit element reference.
+`viewport` 트리거는 지정된 콘텐츠가 뷰포트에 들어올 때 지연 콘텐츠를 로드합니다. 이는 [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API)를 사용합니다. 관찰된 콘텐츠는 `@placeholder` 콘텐츠 또는 명시적인 요소 참조일 수 있습니다.
 
-By default, the `@defer` watches for the placeholder entering the viewport. Placeholders used this way must have a single root element.
+기본적으로는 `@defer`가 자리 표시자가 뷰포트에 들어오는 것을 감시합니다. 이렇게 사용된 자리 표시자는 단일 루트 요소가 있어야 합니다.
 
 ```angular-html
 @defer (on viewport) {
@@ -168,7 +168,7 @@ By default, the `@defer` watches for the placeholder entering the viewport. Plac
 }
 ```
 
-Alternatively, you can specify a [template reference variable](/guide/templates/variables) in the same template as the `@defer` block as the element that is watched to enter the viewport. This variable is passed in as a parameter on the viewport trigger.
+또는 `@defer` 블록과 같은 템플릿에서 [템플릿 참조 변수](/guide/templates/variables)를 지정하여 뷰포트에 들어오는 요소로 사용할 수 있습니다. 이 변수는 뷰포트 트리거에서 매개변수로 전달됩니다.
 
 ```angular-html
 <div #greeting>Hello!</div>
@@ -179,9 +179,9 @@ Alternatively, you can specify a [template reference variable](/guide/templates/
 
 #### `interaction`
 
-The `interaction` trigger loads the deferred content when the user interacts with the specified element through `click` or `keydown` events.
+`interaction` 트리거는 사용자가 `click` 또는 `keydown` 이벤트를 통해 지정된 요소와 상호 작용할 때 지연 콘텐츠를 로드합니다.
 
-By default, the placeholder acts as the interaction element. Placeholders used this way must have a single root element.
+기본적으로 자리 표시자는 상호 작용 요소로 작용합니다. 이렇게 사용된 자리 표시자는 단일 루트 요소가 있어야 합니다.
 
 ```angular-html
 @defer (on interaction) {
@@ -191,7 +191,7 @@ By default, the placeholder acts as the interaction element. Placeholders used t
 }
 ```
 
-Alternatively, you can specify a [template reference variable](/guide/templates/variables) in the same template as the `@defer` block as the element that is watched to enter the viewport. This variable is passed in as a parameter on the viewport trigger.
+또는 `@defer` 블록과 같은 템플릿에서 [템플릿 참조 변수](/guide/templates/variables)를 지정하여 상호 작용할 요소로 사용할 수 있습니다. 이 변수는 뷰포트 트리거에서 매개변수로 전달됩니다.
 
 ```angular-html
 <div #greeting>Hello!</div>
@@ -202,9 +202,9 @@ Alternatively, you can specify a [template reference variable](/guide/templates/
 
 #### `hover`
 
-The `hover` trigger loads the deferred content when the mouse has hovered over the triggered area through the `mouseover` and `focusin` events.
+`hover` 트리거는 마우스가 트리거된 영역 위에 있을 때 (`mouseover` 및 `focusin` 이벤트)를 통해 지연 콘텐츠를 로드합니다.
 
-By default, the placeholder acts as the interaction element. Placeholders used this way must have a single root element.
+기본적으로 자리 표시자는 상호 작용 요소로 작용합니다. 이렇게 사용된 자리 표시자는 단일 루트 요소가 있어야 합니다.
 
 ```angular-html
 @defer (on hover) {
@@ -214,7 +214,7 @@ By default, the placeholder acts as the interaction element. Placeholders used t
 }
 ```
 
-Alternatively, you can specify a [template reference variable](/guide/templates/variables) in the same template as the `@defer` block as the element that is watched to enter the viewport. This variable is passed in as a parameter on the viewport trigger.
+또는 `@defer` 블록과 같은 템플릿에서 [템플릿 참조 변수](/guide/templates/variables)를 지정하여 뷰포트에 들어오는 요소로 사용할 수 있습니다. 이 변수는 뷰포트 트리거에서 매개변수로 전달됩니다.
 
 ```angular-html
 <div #greeting>Hello!</div>
@@ -225,7 +225,7 @@ Alternatively, you can specify a [template reference variable](/guide/templates/
 
 #### `immediate`
 
-The `immediate` trigger loads the deferred content immediately. This means that the deferred block loads as soon as all other non-deferred content has finished rendering.
+`immediate` 트리거는 지연 콘텐츠를 즉시 로드합니다. 즉, 비지연 블록이 모든 다른 비지연 콘텐츠의 렌더링을 완료한 직후에 지연 블록이 로드됩니다.
 
 ```angular-html
 @defer (on immediate) {
@@ -237,7 +237,7 @@ The `immediate` trigger loads the deferred content immediately. This means that
 
 #### `timer`
 
-The `timer` trigger loads the deferred content after a specified duration.
+`timer` 트리거는 지정된 기간 후에 지연 콘텐츠를 로드합니다.
 
 ```angular-html
 @defer (on timer(500ms)) {
@@ -247,11 +247,11 @@ The `timer` trigger loads the deferred content after a specified duration.
 }
 ```
 
-The duration parameter must be specified in milliseconds (`ms`) or seconds (`s`).
+기간 매개변수는 밀리초(`ms`) 또는 초(`s`) 단위로 지정해야 합니다.
 
 ### `when`
 
-The `when` trigger accepts a custom conditional expression and loads the deferred content when the condition becomes truthy.
+`when` 트리거는 사용자 정의 조건 표현식을 허용하고 조건이 참으로 바뀔 때 지연 콘텐츠를 로드합니다.
 
 ```angular-html
 @defer (when condition) {
@@ -261,17 +261,17 @@ The `when` trigger accepts a custom conditional expression and loads the deferre
 }
 ```
 
-This is a one-time operation– the `@defer` block does not revert back to the placeholder if the condition changes to a falsy value after becoming truthy.
+이것은 일회성 작업입니다. `@defer` 블록은 조건이 참에서 거짓으로 바뀌어도 자리 표시자로 되돌아가지 않습니다.
 
-## Prefetching data with `prefetch`
+## 미리 데이터 불러오기와 `prefetch`
 
-In addition to specifying a condition that determines when deferred content is shown, you can optionally specify a **prefetch trigger**. This trigger lets you load the JavaScript associated with the `@defer` block before the deferred content is shown.
+지연 콘텐츠가 표시되는 시점을 결정하는 조건을 지정하는 것 외에도, 선택적으로 **prefetch 트리거**를 지정할 수 있습니다. 이 트리거를 통해 `@defer` 블록과 관련된 JavaScript를 지연 콘텐츠가 표시되기 전에 로드할 수 있습니다.
 
-Prefetching enables more advanced behaviors, such as letting you start to prefetch resources before a user has actually seen or interacted with a defer block, but might interact with it soon, making the resources available faster.
+미리 불러오기는 사용자가 실제로 지연 블록을 보거나 상호 작용하기 전에 리소스를 미리 불러오기 시작할 수 있게 해주므로, 리소스를 더 빨리 사용할 수 있도록 합니다.
 
-You can specify a prefetch trigger similarly to the block's main trigger, but prefixed with the `prefetch` keyword. The block's main trigger and prefetch trigger are separated with a semi-colon character (`;`).
+`prefetch` 키워드로 구분하여 블록의 메인 트리거와 미리 불러오기 트리거를 지정할 수 있습니다. 블록의 메인 트리거와 미리 불러오기 트리거는 세미콜론(`;`) 문자로 구분됩니다.
 
-In the example below, the prefetching starts when a browser becomes idle and the contents of the block is rendered only once the user interacts with the placeholder.
+아래 예제에서는 브라우저가 idle이 될 때 미리 불러오기가 시작되고, 사용자가 자리 표시자와 상호 작용할 때만 블록의 내용이 렌더링됩니다.
 
 ```angular-html
 @defer (on interaction; prefetch on idle) {
@@ -281,13 +281,13 @@ In the example below, the prefetching starts when a browser becomes idle and the
 }
 ```
 
-## Testing `@defer` blocks
+## `@defer` 블록 테스트하기
 
-Angular provides TestBed APIs to simplify the process of testing `@defer` blocks and triggering different states during testing. By default, `@defer` blocks in tests play through like a defer block would behave in a real application. If you want to manually step through states, you can switch the defer block behavior to `Manual` in the TestBed configuration.
+Angular는 `@defer` 블록을 테스트하고 테스트 중 다양한 상태를 트리거하는 과정을 간소화하기 위해 TestBed API를 제공합니다. 기본적으로 테스트에서 `@defer` 블록은 실제 애플리케이션에서 동작하는 것처럼 작동합니다. 상태를 수동으로 단계별로 진행하고 싶으면 TestBed 구성에서 지연 블록 동작을 `Manual`로 전환할 수 있습니다.
 
 ```angular-ts
 it('should render a defer block in different states', async () => {
-  // configures the defer block behavior to start in "paused" state for manual control.
+  // 수동 제어를 위해 "paused" 상태에서 시작하도록 지연 블록 동작을 구성합니다.
   TestBed.configureTestingModule({deferBlockBehavior: DeferBlockBehavior.Manual});
   @Component({
     // ...
@@ -302,39 +302,39 @@ it('should render a defer block in different states', async () => {
     `
   })
   class ComponentA {}
-  // Create component fixture.
+  // 컴포넌트 픽스처 생성.
   const componentFixture = TestBed.createComponent(ComponentA);
-  // Retrieve the list of all defer block fixtures and get the first block.
+  // 모든 지연 블록 픽스처 목록을 가져오고 첫 번째 블록을 가져옵니다.
   const deferBlockFixture = (await componentFixture.getDeferBlocks())[0];
-  // Renders placeholder state by default.
+  // 기본적으로 자리 표시자 상태를 렌더링합니다.
   expect(componentFixture.nativeElement.innerHTML).toContain('Placeholder');
-  // Render loading state and verify rendered output.
+  // 로딩 상태를 렌더링하고 렌더링된 출력을 확인합니다.
   await deferBlockFixture.render(DeferBlockState.Loading);
   expect(componentFixture.nativeElement.innerHTML).toContain('Loading');
-  // Render final state and verify the output.
+  // 최종 상태를 렌더링하고 출력을 확인합니다.
   await deferBlockFixture.render(DeferBlockState.Complete);
   expect(componentFixture.nativeElement.innerHTML).toContain('large works!');
 });
 ```
 
-## Does `@defer` work with `NgModule`?
+## `@defer`는 `NgModule`와 함께 작동합니까?
 
-`@defer` blocks are compatible with both standalone and NgModule-based components, directives and pipes. However, **only standalone components, directives and pipes can be deferred**. NgModule-based dependencies are not deferred and are included in the eagerly loaded bundle.
+`@defer` 블록은 독립형 및 NgModule 기반의 컴포넌트, 지시문 및 파이프 모두와 호환됩니다. 그러나 **독립형 컴포넌트, 지시문 및 파이프만 지연될 수 있습니다**. NgModule 기반의 종속성은 지연되지 않으며 즉시 로딩되는 번들에 포함됩니다.
 
-## How does `@defer` work with server-side rendering (SSR) and static-site generation (SSG)?
+## `@defer`는 서버 측 렌더링(SSR) 및 정적 사이트 생성(SSG)과 함께 어떻게 작동합니까?
 
-By default, when rendering an application on the server (either using SSR or SSG), defer blocks always render their `@placeholder` (or nothing if a placeholder is not specified) and triggers are not invoked. On the client, the content of the `@placeholder` is hydrated and triggers are activated.
+기본적으로 서버에서 애플리케이션을 렌더링할 때(SSR 또는 SSG 사용 시) 지연 블록은 항상 `@placeholder`(또는 자리 표시자가 지정되지 않은 경우 아무것도 렌더링하지 않음)를 렌더링하며 트리거는 호출되지 않습니다. 클라이언트에서는 `@placeholder`의 내용이 수화되고 트리거가 활성화됩니다.
 
-To render the main content of `@defer` blocks on the server (both SSR and SSG), you can enable [the Incremental Hydration feature](/guide/incremental-hydration) and configure `hydrate` triggers for the necessary blocks.
+서버에서 `@defer` 블록의 주요 콘텐츠를 렌더링하려면(SSR 및 SSG 모두) [증분 수화 기능](/guide/incremental-hydration)을 활성화하고 필요한 블록에 대해 `hydrate` 트리거를 구성할 수 있습니다.
 
-## Best practices for deferring views
+## 뷰 지연을 위한 모범 사례
 
-### Avoid cascading loads with nested `@defer` blocks
+### 중첩 된 `@defer` 블록으로 인한 연쇄 로드를 피하십시오
 
-When you have nested `@defer` blocks, they should have different triggers in order to avoid loading simultaneously, which causes cascading requests and may negatively impact page load performance.
+중첩된 `@defer` 블록이 있는 경우 동시에 로드되지 않도록 서로 다른 트리거를 가져야 합니다. 그렇지 않으면 연쇄 요청이 발생하고 페이지 로드 성능에 부정적인 영향을 줄 수 있습니다.
 
-### Avoid layout shifts
+### 레이아웃Shift 피하기
 
-Avoid deferring components that are visible in the user’s viewport on initial load. Doing this may negatively affect Core Web Vitals by causing an increase in cumulative layout shift (CLS).
+초기 로드에서 사용자의 뷰포트에 보이는 컴포넌트를 지연 로딩하는 것을 피하십시오. 이렇게 하면 누적 레이아웃 이동(CLS)이 증가하여 Core Web Vitals에 부정적인 영향을 미칠 수 있습니다.
 
-In the event this is necessary, avoid `immediate`, `timer`, `viewport`, and custom `when` triggers that cause the content to load during the initial page render.
+이것이 필요하다면 초기 페이지 렌더링 동안 콘텐츠가 로드되도록 하는 `immediate`, `timer`, `viewport` 및 사용자 정의 `when` 트리거를 피하십시오.
\ No newline at end of file
diff --git a/adev/src/content/guide/templates/event-listeners.md b/adev/src/content/guide/templates/event-listeners.md
index 2623dd9f1ce5..18cbda6c7847 100644
--- a/adev/src/content/guide/templates/event-listeners.md
+++ b/adev/src/content/guide/templates/event-listeners.md
@@ -1,10 +1,10 @@
-# Adding event listeners
+# 이벤트 리스너 추가하기
 
-Angular supports defining event listeners on an element in your template by specifying the event name inside parentheses along with a statement that runs every time the event occurs.
+Angular는 템플릿의 요소에 이벤트 리스너를 정의하도록 지원하며, 이벤트 이름을 괄호 안에 지정하고 이벤트가 발생할 때마다 실행되는 문장을 함께 명시합니다.
 
-## Listening to native events
+## 네이티브 이벤트 듣기
 
-When you want to add event listeners to an HTML element, you wrap the event with parentheses, `()`, which allows you to specify a listener statement.
+HTML 요소에 이벤트 리스너를 추가하려면 이벤트를 괄호 `()`로 감싸서 리스너 문장을 지정할 수 있습니다.
 
 ```angular-ts
 @Component({
@@ -15,18 +15,18 @@ When you want to add event listeners to an HTML element, you wrap the event with
 })
 export class AppComponent{
   updateField(): void {
-    console.log('Field is updated!');
+    console.log('필드가 업데이트되었습니다!');
   }
 }
 ```
 
-In this example, Angular calls `updateField` every time the `<input>` element emits a `keyup` event.
+이 예제에서 Angular는 `<input>` 요소가 `keyup` 이벤트를 발생시킬 때마다 `updateField`를 호출합니다.
 
-You can add listeners for any native events, such as: `click`, `keydown`, `mouseover`, etc. To learn more, check out the [all available events on elements on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element#events).
+`click`, `keydown`, `mouseover` 등과 같은 모든 네이티브 이벤트에 대한 리스너를 추가할 수 있습니다. 더 알아보려면 [MDN의 요소에서 사용할 수 있는 모든 이벤트](https://developer.mozilla.org/en-US/docs/Web/API/Element#events)를 확인하세요.
 
-## Accessing the event argument
+## 이벤트 인수 접근하기
 
-In every template event listener, Angular provides a variable named `$event` that contains a reference to the event object.
+모든 템플릿 이벤트 리스너에서 Angular는 이벤트 객체를 참조하는 `$event`라는 변수를 제공합니다.
 
 ```angular-ts
 @Component({
@@ -37,14 +37,14 @@ In every template event listener, Angular provides a variable named `$event` tha
 })
 export class AppComponent {
   updateField(event: KeyboardEvent): void {
-    console.log(`The user pressed: ${event.key}`);
+    console.log(`사용자가 입력한 키: ${event.key}`);
   }
 }
 ```
 
-## Using key modifiers
+## 키 수정자 사용하기
 
-When you want to capture specific keyboard events for a specific key, you might write some code like the following:
+특정 키에 대한 특정 키보드 이벤트를 캡처하고 싶을 때, 다음과 같은 코드를 작성할 수 있습니다.
 
 ```angular-ts
 @Component({
@@ -56,13 +56,13 @@ When you want to capture specific keyboard events for a specific key, you might
 export class AppComponent {
   updateField(event: KeyboardEvent): void {
     if (event.key === 'Enter') {
-      console.log('The user pressed enter in the text field.');
+      console.log('사용자가 텍스트 필드에서 Enter 키를 눌렀습니다.');
     }
   }
 }
 ```
 
-However, since this is a common scenario, Angular lets you filter the events by specifying a specific key using the period (`.`) character. By doing so, code can be simplified to:
+하지만 이는 일반적인 시나리오이기 때문에, Angular는 점(`.`) 문자를 사용하여 특정 키로 이벤트를 필터링할 수 있게 해줍니다. 이렇게 하면 코드를 다음과 같이 간소화할 수 있습니다:
 
 ```angular-ts
 @Component({
@@ -73,27 +73,27 @@ However, since this is a common scenario, Angular lets you filter the events by
 })
 export class AppComponent{
   updateField(event: KeyboardEvent): void {
-    console.log('The user pressed enter in the text field.');
+    console.log('사용자가 텍스트 필드에서 Enter 키를 눌렀습니다.');
   }
 }
 ```
 
-You can also add additional key modifiers:
+추가적인 키 수정자도 추가할 수 있습니다:
 
 ```angular-html
-<!-- Matches shift and enter -->
+<!-- Shift와 Enter에 해당 -->
 <input type="text" (keyup.shift.enter)="updateField($event)" />
 ```
 
-Angular supports the modifiers `alt`, `control`, `meta`, and `shift`.
+Angular는 `alt`, `control`, `meta` 및 `shift` 수정자를 지원합니다.
 
-You can specify the key or code that you would like to bind to keyboard events. The key and code fields are a native part of the browser keyboard event object. By default, event binding assumes you want to use the [Key values for keyboard events](https://developer.mozilla.org/docs/Web/API/UI_Events/Keyboard_event_key_values).
+키보드 이벤트에 바인딩할 키 또는 코드를 지정할 수 있습니다. 키와 코드 필드는 브라우저 키보드 이벤트 객체의 기본적인 부분입니다. 기본적으로 이벤트 바인딩은 [키보드 이벤트에 대한 키 값](https://developer.mozilla.org/docs/Web/API/UI_Events/Keyboard_event_key_values)을 사용하려고 한다고 가정합니다.
 
-Angular also allows you to specify [Code values for keyboard events](https://developer.mozilla.org/docs/Web/API/UI_Events/Keyboard_event_code_values) by providing a built-in `code` suffix.
+Angular는 또한 [키보드 이벤트에 대한 코드 값](https://developer.mozilla.org/docs/Web/API/UI_Events/Keyboard_event_code_values)을 제공하여 내장된 `code` 접미사를 사용할 수 있도록 허용합니다.
 
 ```angular-html
-<!-- Matches alt and left shift -->
+<!-- Alt와 왼쪽 Shift에 해당 -->
 <input type="text" (keydown.code.alt.shiftleft)="updateField($event)" />
 ```
 
-This can be useful for handling keyboard events consistently across different operating systems. For example, when using the Alt key on MacOS devices, the `key` property reports the key based on the character already modified by the Alt key. This means that a combination like Alt + S reports a `key` value of `'ß'`. The `code` property, however, corresponds to the physical or virtual button pressed rather than the character produced.
+이는 다양한 운영 체제에서 키보드 이벤트를 일관되게 처리하는 데 유용할 수 있습니다. 예를 들어, MacOS 장치에서 Alt 키를 사용할 때 `key` 속성은 Alt 키로 이미 수정된 문자를 기반으로 키를 보고합니다. 즉, Alt + S 조합은 `key` 값으로 `'ß'`를 보고합니다. 하지만 `code` 속성은 물리적 또는 가상 버튼이 눌린 것에 해당하며 생성된 문자와는 무관합니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/templates/expression-syntax.md b/adev/src/content/guide/templates/expression-syntax.md
index e21efa675c37..e27065574881 100644
--- a/adev/src/content/guide/templates/expression-syntax.md
+++ b/adev/src/content/guide/templates/expression-syntax.md
@@ -1,116 +1,116 @@
-# Expression Syntax
+# 표현식 구문
 
-Angular expressions are based on JavaScript, but differ in some key ways. This guide walks through the similarities and differences between Angular expressions and standard JavaScript.
+Angular 표현식은 JavaScript를 기반으로 하지만 몇 가지 핵심적인 차이점이 있습니다. 이 가이드는 Angular 표현식과 표준 JavaScript 간의 유사점과 차이점을 설명합니다.
 
-## Value literals
+## 값 리터럴
 
-Angular supports a subset of [literal values](https://developer.mozilla.org/en-US/docs/Glossary/Literal) from JavaScript.
+Angular는 JavaScript의 [리터럴 값](https://developer.mozilla.org/en-US/docs/Glossary/Literal)의 하위 집합을 지원합니다.
 
-### Supported value literals
+### 지원되는 값 리터럴
 
-| Literal type           | Example values                  |
-| ---------------------- | ------------------------------- |
-| String                 | `'Hello'`, `"World"`            |
-| Boolean                | `true`, `false`                 |
-| Number                 | `123`, `3.14`                   |
-| Object                 | `{name: 'Alice'}`               |
-| Array                  | `['Onion', 'Cheese', 'Garlic']` |
-| null                   | `null`                          |
-| Template string        | `` `Hello ${name}` ``           |
-| Tagged template string | `` tag`Hello ${name}` ``        |
+| 리터럴 유형            | 예제 값                       |
+| -------------------- | ---------------------------- |
+| 문자열                  | `'안녕하세요'`, `"세계"`        |
+| 불리언                | `true`, `false`              |
+| 숫자                  | `123`, `3.14`                |
+| 객체                  | `{name: '앨리스'}`            |
+| 배열                  | `['양파', '치즈', '마늘']`     |
+| null                  | `null`                       |
+| 템플릿 문자열           | `` `안녕하세요 ${name}` ``     |
+| 태그가 있는 템플릿 문자열 | `` tag`안녕하세요 ${name}` ``  |
 
-### Unsupported literals
+### 지원되지 않는 리터럴
 
-| Literal type           | Example value            |
-| ---------------------- | ------------------------ |
-| RegExp                 | `/\d+/`                  |
-| Tagged template string | `` tag`Hello ${name}` `` |
+| 리터럴 유형            | 예제 값                  |
+| -------------------- | ----------------------- |
+| 정규 표현식          | `/\d+/`                  |
+| 태그가 있는 템플릿 문자열 | `` tag`안녕하세요 ${name}` `` |
 
-## Globals
+## 전역 변수
 
-Angular expressions support the following [globals](https://developer.mozilla.org/en-US/docs/Glossary/Global_object):
+Angular 표현식은 다음 [전역 변수](https://developer.mozilla.org/en-US/docs/Glossary/Global_object)를 지원합니다:
 
 - [undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)
 - [$any](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any)
 
-No other JavaScript globals are supported. Common JavaScript globals include `Number`, `Boolean`, `NaN`, `Infinity`, `parseInt`, and more.
+기타 JavaScript 전역 변수는 지원되지 않습니다. 일반적인 JavaScript 전역 변수로는 `Number`, `Boolean`, `NaN`, `Infinity`, `parseInt` 등이 있습니다.
 
-## Local variables
+## 지역 변수
 
-Angular automatically makes special local variables available for use in expressions in specific contexts. These special variables always start with the dollar sign character (`$`).
+Angular는 특정 컨텍스트에서 표현식에 사용할 수 있도록 특별한 지역 변수를 자동으로 제공합니다. 이 특별한 변수는 항상 달러 기호(`$`)로 시작합니다.
 
-For example, `@for` blocks make several local variables corresponding to information about the loop, such as `$index`.
+예를 들어, `@for` 블록은 `$index`와 같은 루프에 대한 정보를 나타내는 여러 지역 변수를 만듭니다.
 
-## What operators are supported?
+## 어떤 연산자가 지원되나요?
 
-### Supported operators
+### 지원되는 연산자
 
-Angular supports the following operators from standard JavaScript.
+Angular는 표준 JavaScript에서 다음 연산자를 지원합니다.
 
-| Operator              | Example(s)                               |
-| --------------------- | ---------------------------------------- |
-| Add / Concatenate     | `1 + 2`                                  |
-| Subtract              | `52 - 3`                                 |
-| Multiply              | `41 * 6`                                 |
-| Divide                | `20 / 4`                                 |
-| Remainder (Modulo)    | `17 % 5`                                 |
-| Exponentiation        | `10 ** 3`                                |
-| Parenthesis           | `9 * (8 + 4)`                            |
-| Conditional (Ternary) | `a > b ? true : false`                   |
-| And (Logical)         | `&&`                                     |
-| Or (Logical)          | `\|\|`                                   |
-| Not (Logical)         | `!`                                      |
-| Nullish Coalescing    | `possiblyNullValue ?? 'default'`         |
-| Comparison Operators  | `<`, `<=`, `>`, `>=`, `==`, `===`, `!==` |
-| Unary Negation        | `-x`                                     |
-| Unary Plus            | `+y`                                     |
-| Property Accessor     | `person['name']`                         |
-| typeof                | `typeof 42`                              |
-| void                  | `void 1`                                 |
+| 연산자                  | 예제                             |
+| --------------------- | ------------------------------- |
+| 더하기 / 연결           | `1 + 2`                          |
+| 빼기                  | `52 - 3`                         |
+| 곱하기                  | `41 * 6`                         |
+| 나누기                  | `20 / 4`                         |
+| 나머지 (모듈로)         | `17 % 5`                         |
+| 지수                   | `10 ** 3`                        |
+| 괄호                   | `9 * (8 + 4)`                    |
+| 조건부 (삼항)          | `a > b ? true : false`           |
+| 논리적 그리고           | `&&`                             |
+| 논리적 또는            | `\|\|`                           |
+| 논리적 부정            | `!`                              |
+| nullish 병합           | `possiblyNullValue ?? 'default'` |
+| 비교 연산자            | `<`, `<=`, `>`, `>=`, `==`, `===`, `!==` |
+| 단항 부정              | `-x`                             |
+| 단항 덧셈              | `+y`                             |
+| 속성 접근자             | `person['name']`                |
+| typeof                | `typeof 42`                     |
+| void                  | `void 1`                        |
 
-Angular expressions additionally also support the following non-standard operators:
+Angular 표현식은 또한 다음 비표준 연산자를 추가로 지원합니다:
 
-| Operator                        | Example(s)                     |
-| ------------------------------- | ------------------------------ |
-| [Pipe](/guide/templates/pipes) | `{{ total \| currency }}`      |
-| Optional chaining\*             | `someObj.someProp?.nestedProp` |
-| Non-null assertion (TypeScript) | `someObj!.someProp`            |
+| 연산자                       | 예제                           |
+| ---------------------------- | ------------------------------ |
+| [파이프](/guide/templates/pipes) | `{{ total \| currency }}`      |
+| 선택적 체이닝\*              | `someObj.someProp?.nestedProp` |
+| 널 아닌 단언 (TypeScript)     | `someObj!.someProp`            |
 
-\*Note: Optional chaining behaves differently from the standard JavaScript version in that if the left side of Angular’s optional chaining operator is `null` or `undefined`, it returns `null` instead of `undefined`.
+\*참고: 선택적 체이닝은 Angular의 선택적 체이닝 연산자의 왼쪽이 `null` 또는 `undefined`일 경우 `undefined` 대신 `null`을 반환하는 표준 JavaScript 버전과 다르게 동작합니다.
 
-### Unsupported operators
+### 지원되지 않는 연산자
 
-| Operator              | Example(s)                        |
-| --------------------- | --------------------------------- |
-| All bitwise operators | `&`, `&=`, `~`, `\|=`, `^=`, etc. |
-| Assignment operators  | `=`                               |
-| Object destructuring  | `const { name } = person`         |
-| Array destructuring   | `const [firstItem] = items`       |
-| Comma operator        | `x = (x++, x)`                    |
-| in                    | `'model' in car`                  |
-| instanceof            | `car instanceof Automobile`       |
-| new                   | `new Car()`                       |
+| 연산자                  | 예제                           |
+| --------------------- | ------------------------------- |
+| 모든 비트 연산자      | `&`, `&=`, `~`, `\|=`, `^=`, 등 |
+| 할당 연산자           | `=`                             |
+| 객체 분해              | `const { name } = person`      |
+| 배열 분해              | `const [firstItem] = items`    |
+| 쉼표 연산자           | `x = (x++, x)`                 |
+| in                    | `'model' in car`               |
+| instanceof            | `car instanceof Automobile`     |
+| new                   | `new Car()`                    |
 
-## Lexical context for expressions
+## 표현식의 문맥
 
-Angular expressions are evaluated within the context of the component class as well as any relevant [template variables](/guide/templates/variables), locals, and globals.
+Angular 표현식은 구성 요소 클래스의 문맥과 관련된 [템플릿 변수](/guide/templates/variables), 지역 변수 및 전역 내에서 평가됩니다.
 
-When referring to class members, `this` is always implied.
+클래스 멤버를 참조할 때는 항상 `this`가 암시됩니다.
 
-## Declarations
+## 선언
 
-Generally speaking, declarations are not supported in Angular expressions. This includes, but is not limited to:
+일반적으로 선언은 Angular 표현식에서 지원되지 않습니다. 여기에는 다음이 포함되지만 이에 국한되지는 않습니다:
 
-| Declarations    | Example(s)                                  |
-| --------------- | ------------------------------------------- |
-| Variables       | `let label = 'abc'`, `const item = 'apple'` |
-| Functions       | `function myCustomFunction() { }`           |
-| Arrow Functions | `() => { }`                                 |
-| Classes         | `class Rectangle { }`                       |
+| 선언               | 예제                             |
+| ---------------- | -------------------------------- |
+| 변수              | `let label = 'abc'`, `const item = 'apple'` |
+| 함수              | `function myCustomFunction() { }` |
+| 화살표 함수       | `() => { }`                     |
+| 클래스            | `class Rectangle { }`           |
 
-# Event listener statements
+# 이벤트 리스너 문장
 
-Event handlers are **statements** rather than expressions. While they support all of the same syntax as Angular expressions, the are two key differences:
+이벤트 핸들러는 **표현식**이 아니라 **문장**입니다. Angular 표현식과 동일한 구문을 모두 지원하지만 두 가지 주요 차이점이 있습니다:
 
-1. Statements **do support** assignment operators (but not destructing assignments)
-1. Statements **do not support** pipes
+1. 문장은 **할당 연산자**를 지원합니다(단, 분해 할당은 지원하지 않음).
+2. 문장은 **파이프**를 지원하지 않습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/templates/ng-container.md b/adev/src/content/guide/templates/ng-container.md
index d63d593fa1f0..6ece93030984 100644
--- a/adev/src/content/guide/templates/ng-container.md
+++ b/adev/src/content/guide/templates/ng-container.md
@@ -1,41 +1,41 @@
-# Grouping elements with ng-container
+# 그룹화 요소 ng-container 사용하기
 
-`<ng-container>` is a special element in Angular that groups multiple elements together or marks a location in a template without rendering a real element in the DOM.
+`<ng-container>`는 Angular에서 여러 요소를 함께 그룹화하거나 템플릿 내 위치를 표시하는 특별한 요소로, 실제 요소를 DOM에 렌더링하지 않습니다.
 
 ```angular-html
-<!-- Component template -->
+<!-- 컴포넌트 템플릿 -->
 <section>
   <ng-container>
-    <h3>User bio</h3>
-    <p>Here's some info about the user</p>
+    <h3>사용자 정보</h3>
+    <p>사용자에 대한 정보입니다.</p>
   </ng-container>
 </section>
 ```
 
 ```angular-html
-<!-- Rendered DOM -->
+<!-- 렌더링된 DOM -->
 <section>
-  <h3>User bio</h3>
-  <p>Here's some info about the user</p>
+  <h3>사용자 정보</h3>
+  <p>사용자에 대한 정보입니다.</p>
 </section>
 ```
 
-You can apply directives to `<ng-container>` to add behaviors or configuration to a part of your template.
+`<ng-container>`에 지시어를 적용하여 템플릿의 일부에 동작이나 구성을 추가할 수 있습니다.
 
-Angular ignores all attribute bindings and event listeners applied to `<ng-container>`, including those applied via directive.
+Angular는 `<ng-container>`에 적용된 모든 속성 바인딩 및 이벤트 리스너를 무시하며, 지시어를 통해 적용된 것들도 포함됩니다.
 
-## Using `<ng-container>` to display dynamic contents
+## `<ng-container>`를 사용하여 동적 콘텐츠 표시하기
 
-`<ng-container>` can act as a placeholder for rendering dynamic content.
+`<ng-container>`는 동적 콘텐츠를 렌더링하기 위한 자리 표시자로 작용할 수 있습니다.
 
-### Rendering components
+### 컴포넌트 렌더링하기
 
-You can use Angular's built-in `NgComponentOutlet` directive to dynamically render a component to the location of the `<ng-container>`.
+Angular의 내장 `NgComponentOutlet` 지시어를 사용하여 `<ng-container>`의 위치에 동적으로 컴포넌트를 렌더링할 수 있습니다.
 
 ```angular-ts
 @Component({
   template: `
-    <h2>Your profile</h2>
+    <h2>당신의 프로필</h2>
     <ng-container [ngComponentOutlet]="profileComponent()" />
   `
 })
@@ -45,20 +45,20 @@ export class UserProfile {
 }
 ```
 
-In the example above, the `NgComponentOutlet` directive dynamically renders either `AdminProfile` or `BasicUserProfile` in the location of the `<ng-container>` element.
+위 예제에서 `NgComponentOutlet` 지시어는 `<ng-container>` 요소의 위치에 `AdminProfile` 또는 `BasicUserProfile`을 동적으로 렌더링합니다.
 
-### Rendering template fragments
+### 템플릿 조각 렌더링하기
 
-You can use Angular's built-in `NgTemplateOutlet` directive to dynamically render a template fragment to the location of the `<ng-container>`.
+Angular의 내장 `NgTemplateOutlet` 지시어를 사용하여 `<ng-container>`의 위치에 템플릿 조각을 동적으로 렌더링할 수 있습니다.
 
 ```angular-ts
 @Component({
   template: `
-    <h2>Your profile</h2>
+    <h2>당신의 프로필</h2>
     <ng-container [ngTemplateOutlet]="profileTemplate()" />
 
-    <ng-template #admin>This is the admin profile</ng-template>
-    <ng-template #basic>This is the basic profile</ng-template>
+    <ng-template #admin>관리자 프로필입니다</ng-template>
+    <ng-template #basic>기본 프로필입니다</ng-template>
   `
 })
 export class UserProfile {
@@ -69,17 +69,17 @@ export class UserProfile {
 }
 ```
 
-In the example above, the `ngTemplateOutlet` directive dynamically renders one of two template fragments in the location of the `<ng-container>` element.
+위 예제에서 `ngTemplateOutlet` 지시어는 `<ng-container>` 요소의 위치에 두 개의 템플릿 조각 중 하나를 동적으로 렌더링합니다.
 
-For more information regarding NgTemplateOutlet, see the [NgTemplateOutlets API documentation page](/api/common/NgTemplateOutlet).
+`NgTemplateOutlet`에 대한 자세한 정보는 [NgTemplateOutlets API 문서 페이지](/api/common/NgTemplateOutlet)를 참조하세요.
 
-## Using `<ng-container>` with structural directives
+## `<ng-container>`를 구조적 지시어와 함께 사용하기
 
-You can also apply structural directives to `<ng-container>` elements. Common examples of this include `ngIf`and `ngFor`.
+구조적 지시어를 `<ng-container>` 요소에 적용할 수도 있습니다. 일반적인 예로 `ngIf`와 `ngFor`가 있습니다.
 
 ```angular-html
 <ng-container *ngIf="permissions == 'admin'">
-  <h1>Admin Dashboard</h1>
+  <h1>관리자 대시보드</h1>
   <admin-infographic></admin-infographic>
 </ng-container>
 
@@ -89,18 +89,18 @@ You can also apply structural directives to `<ng-container>` elements. Common ex
 </ng-container>
 ```
 
-## Using `<ng-container>` for injection
+## 주입을 위한 `<ng-container>` 사용하기
 
-See the Dependency Injection guide for more information on Angular's dependency injection system.
+Angular의 의존성 주입 시스템에 대한 자세한 정보는 의존성 주입 가이드를 참조하세요.
 
-When you apply a directive to `<ng-container>`, descendant elements can inject the directive or anything that the directive provides. Use this when you want to declaratively provide a value to a specific part of your template.
+`<ng-container>`에 지시어를 적용하면 자식 요소가 지시어나 지시어가 제공하는 내용을 주입할 수 있습니다. 이는 템플릿의 특정 부분에 값을 선언적으로 제공하려는 경우에 사용합니다.
 
 ```angular-ts
 @Directive({
   selector: '[theme]',
 })
 export class Theme {
-  // Create an input that accepts 'light' or 'dark`, defaulting to 'light'.
+  // 'light' 또는 'dark'를 수용하는 입력을 생성하며, 기본값은 'light'입니다.
   mode = input<'light' | 'dark'>('light');
 }
 ```
@@ -112,4 +112,4 @@ export class Theme {
 </ng-container>
 ```
 
-In the example above, the `ProfilePic` and `UserBio` components can inject the `Theme` directive and apply styles based on its `mode`.
+위 예제에서 `ProfilePic` 및 `UserBio` 컴포넌트는 `Theme` 지시어를 주입하고 해당 `mode`에 따라 스타일을 적용할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/templates/ng-content.md b/adev/src/content/guide/templates/ng-content.md
index 46508c98a8da..5f055abfef58 100644
--- a/adev/src/content/guide/templates/ng-content.md
+++ b/adev/src/content/guide/templates/ng-content.md
@@ -1,8 +1,8 @@
-# Render templates from a parent component with `ng-content`
+# 부모 컴포넌트에서 `ng-content`로 템플릿 렌더링
 
-`<ng-content>` is a special element that accepts markup or a template fragment and controls how components render content. It does not render a real DOM element.
+`<ng-content>`는 마크업이나 템플릿 조각을 수용하고 컴포넌트가 콘텐츠를 렌더링하는 방법을 제어하는 특별한 요소입니다. 실제 DOM 엘리먼트를 렌더링하지 않습니다.
 
-Here is an example of a `BaseButton` component that accepts any markup from its parent.
+다음은 부모로부터 모든 마크업을 수용하는 `BaseButton` 컴포넌트의 예입니다.
 
 ```angular-ts
 // ./base-button/base-button.component.ts
@@ -27,11 +27,11 @@ import { BaseButton } from './base-button/base-button.component.ts';
   imports: [BaseButton],
   template: `
     <button baseButton>
-      Next <span class="icon arrow-right" />
+      다음 <span class="icon arrow-right" />
     </button>
   `,
 })
 export class AppComponent {}
 ```
 
-For more detail, check out the [`<ng-content>` in-depth guide](/guide/components/content-projection) for other ways you can leverage this pattern.
+자세한 내용은 다른 방법으로 이 패턴을 활용할 수 있는 [`<ng-content>` 심층 가이드](/guide/components/content-projection)를 확인하세요.
\ No newline at end of file
diff --git a/adev/src/content/guide/templates/ng-template.md b/adev/src/content/guide/templates/ng-template.md
index e18616b48ee5..38e4d955a528 100644
--- a/adev/src/content/guide/templates/ng-template.md
+++ b/adev/src/content/guide/templates/ng-template.md
@@ -1,75 +1,75 @@
 # Create template fragments with ng-template
 
-Inspired by the [native `<template>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template), the `<ng-template>` element lets you declare a **template fragment** – a section of content that you can dynamically or programmatically render.
+네이티브 `<template>` 요소에서 영감을 받아 [native `<template>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template), `<ng-template>` 요소를 사용하면 **템플릿 조각**을 선언할 수 있습니다. 이는 동적으로 또는 프로그래밍적으로 렌더링할 수 있는 콘텐츠 섹션입니다.
 
 ## Creating a template fragment
 
-You can create a template fragment inside of any component template with the `<ng-template>` element:
+`<ng-template>` 요소로 모든 컴포넌트 템플릿 내에서 템플릿 조각을 생성할 수 있습니다:
 
 ```angular-html
-<p>This is a normal element</p>
+<p>일반 요소입니다</p>
 
 <ng-template>
-  <p>This is a template fragment</p>
+  <p>템플릿 조각입니다</p>
 </ng-template>
 ```
 
-When the above is rendered, the content of the `<ng-template>` element is not rendered on the page. Instead, you can get a reference to the template fragment and write code to dynamically render it.
+위 내용이 렌더링될 때, `<ng-template>` 요소의 콘텐츠는 페이지에 렌더링되지 않습니다. 대신, 템플릿 조각에 대한 참조를 얻고 이를 동적으로 렌더링하는 코드를 작성할 수 있습니다.
 
 ### Binding context for fragments
 
-Template fragments may contain bindings with dynamic expressions:
+템플릿 조각은 동적 표현식과 바인딩을 포함할 수 있습니다:
 
 ```angular-ts
 @Component({
   /* ... */,
-  template: `<ng-template>You've selected {{count}} items.</ng-template>`,
+  template: `<ng-template>선택한 항목 수: {{count}}입니다.</ng-template>`,
 })
 export class ItemCounter {
   count: number = 0;
 }
 ```
 
-Expressions or statements in a template fragment are evaluated against the component in which the fragment is declared, regardless of where the fragment is rendered.
+템플릿 조각 내의 표현식이나 문장은 조각이 선언된 컴포넌트를 기준으로 평가됩니다. 조각이 어디에 렌더링되든지 관계없이 적용됩니다.
 
 ## Getting a reference to a template fragment
 
-You can get a reference to a template fragment in one of three ways:
+템플릿 조각에 대한 참조를 얻는 방법은 세 가지가 있습니다:
 
-- By declaring a [template reference variable](/guide/templates/variables#template-reference-variables) on the `<ng-template>` element
-- By querying for the fragment with [a component or directive query](/guide/components/queries)
-- By injecting the fragment in a directive that's applied directly to an `<ng-template>` element.
+- `<ng-template>` 요소에 [템플릿 참조 변수](/guide/templates/variables#template-reference-variables)를 선언하여
+- [컴포넌트 또는 디렉티브 쿼리](/guide/components/queries)를 통해 조각을 조회하여
+- `<ng-template>` 요소에 직접 적용된 디렉티브에서 조각을 주입하여.
 
-In all three cases, the fragment is represented by a [TemplateRef](/api/core/TemplateRef) object.
+세 가지 경우 모두, 조각은 [TemplateRef](/api/core/TemplateRef) 객체로 표현됩니다.
 
 ### Referencing a template fragment with a template reference variable
 
-You can add a template reference variable to an `<ng-template>` element to reference that template fragment in other parts of the same template file:
+`<ng-template>` 요소에 템플릿 참조 변수를 추가하여 같은 템플릿 파일의 다른 부분에서 해당 템플릿 조각을 참조할 수 있습니다:
 
 ```angular-html
-<p>This is a normal element</p>
+<p>일반 요소입니다</p>
 
 <ng-template #myFragment>
-  <p>This is a template fragment</p>
+  <p>템플릿 조각입니다</p>
 </ng-template>
 ```
 
-You can then reference this fragment anywhere else in the template via the `myFragment` variable.
+이제 `myFragment` 변수를 통해 템플릿의 다른 곳에서 이 조각을 참조할 수 있습니다.
 
 ### Referencing a template fragment with queries
 
-You can get a reference to a template fragment using any [component or directive query API](/guide/components/queries).
+어떠한 [컴포넌트 또는 디렉티브 쿼리 API](/guide/components/queries)를 사용하여 템플릿 조각에 대한 참조를 얻을 수 있습니다.
 
-For example, if your template has exactly one template fragment, you can query directly for the `TemplateRef` object with a `@ViewChild` query:
+예를 들어, 템플릿에 정확히 하나의 템플릿 조각이 있는 경우, `@ViewChild` 쿼리를 사용하여 `TemplateRef` 객체를 직접 조회할 수 있습니다:
 
 ```angular-ts
 @Component({
   /* ... */,
   template: `
-    <p>This is a normal element</p>
+    <p>일반 요소입니다</p>
 
     <ng-template>
-      <p>This is a template fragment</p>
+      <p>템플릿 조각입니다</p>
     </ng-template>
   `,
 })
@@ -78,38 +78,37 @@ export class ComponentWithFragment {
 }
 ```
 
-You can then reference this fragment in your component code or the component's template like any other class member.
+그런 다음, 이 조각을 컴포넌트 코드나 컴포넌트의 템플릿에서 다른 클래스 멤버처럼 참조할 수 있습니다.
 
-If a template contains multiple fragments, you can assign a name to each fragment by adding a template reference variable to each `<ng-template>` element and querying for the fragments based on that name:
+템플릿에 여러 조각이 포함된 경우, 각 `<ng-template>` 요소에 템플릿 참조 변수를 추가하여 이름을 할당하고 해당 이름을 기반으로 조각을 조회할 수 있습니다:
 
 ```angular-ts
 @Component({
   /* ... */,
   template: `
-    <p>This is a normal element</p>
+    <p>일반 요소입니다</p>
 
     <ng-template #fragmentOne>
-      <p>This is one template fragment</p>
+      <p>하나의 템플릿 조각입니다</p>
     </ng-template>
 
     <ng-template #fragmentTwo>
-      <p>This is another template fragment</p>
+      <p>또 다른 템플릿 조각입니다</p>
     </ng-template>
   `,
 })
 export class ComponentWithFragment {
-  // When querying by name, you can use the `read` option to specify that you want to get the
-  // TemplateRef object associated with the element.
+  // 이름으로 조회할 때, 요소와 관련된 TemplateRef 객체를 가져오려면 'read' 옵션을 사용해야 합니다.
   @ViewChild('fragmentOne', {read: TemplateRef}) fragmentOne: TemplateRef<unknown> | undefined;
   @ViewChild('fragmentTwo', {read: TemplateRef}) fragmentTwo: TemplateRef<unknown> | undefined;
 }
 ```
 
-Again, you can then reference these fragments in your component code or the component's template like any other class members.
+다시 말해, 이 조각을 컴포넌트 코드나 컴포넌트 템플릿에서 다른 클래스 멤버처럼 참조할 수 있습니다.
 
 ### Injecting a template fragment
 
-A directive can inject a `TemplateRef` if that directive is applied directly to an `<ng-template>` element:
+디렉티브가 `<ng-template>` 요소에 직접 적용된 경우 `TemplateRef`를 주입할 수 있습니다:
 
 ```angular-ts
 @Directive({
@@ -122,60 +121,60 @@ export class MyDirective {
 
 ```angular-html
 <ng-template myDirective>
-  <p>This is one template fragment</p>
+  <p>하나의 템플릿 조각입니다</p>
 </ng-template>
 ```
 
-You can then reference this fragment in your directive code like any other class member.
+이제 이 조각을 디렉티브 코드에서 다른 클래스 멤버처럼 참조할 수 있습니다.
 
 ## Rendering a template fragment
 
-Once you have a reference to a template fragment's `TemplateRef` object, you can render a fragment in one of two ways: in your template with the `NgTemplateOutlet` directive or in your TypeScript code with `ViewContainerRef`.
+템플릿 조각의 `TemplateRef` 객체에 대한 참조를 얻은 후, 두 가지 방법 중 하나로 조각을 렌더링할 수 있습니다: `NgTemplateOutlet` 디렉티브를 사용하거나 TypeScript 코드에서 `ViewContainerRef`를 사용하는 것입니다.
 
 ### Using `NgTemplateOutlet`
 
-The `NgTemplateOutlet` directive from `@angular/common` accepts a `TemplateRef` and renders the fragment as a **sibling** to the element with the outlet. You should generally use `NgTemplateOutlet` on an [`<ng-container>` element](/guide/templates/ng-container).
+`@angular/common`의 `NgTemplateOutlet` 디렉티브는 `TemplateRef`를 받아들이고 조각을 아울렛이 있는 요소의 **형제**로 렌더링합니다. 일반적으로 이 디렉티브는 [`<ng-container>` 요소](/guide/templates/ng-container)에서 사용해야 합니다.
 
-First, import `NgTemplateOutlet`:
+먼저 `NgTemplateOutlet`을 가져옵니다:
 ```typescript
 import { NgTemplateOutlet } from '@angular/common';
 ```
 
-The following example declares a template fragment and renders that fragment to a `<ng-container>` element with `NgTemplateOutlet`:
+다음 예제는 템플릿 조각을 선언하고 해당 조각을 `NgTemplateOutlet`을 사용하여 `<ng-container>` 요소에 렌더링합니다:
 
 ```angular-html
-<p>This is a normal element</p>
+<p>일반 요소입니다</p>
 
 <ng-template #myFragment>
-  <p>This is a fragment</p>
+  <p>이것은 조각입니다</p>
 </ng-template>
 
 <ng-container *ngTemplateOutlet="myFragment"></ng-container>
 ```
 
-This example produces the following rendered DOM:
+이 예제는 다음과 같이 렌더링된 DOM을 생성합니다:
 
 ```angular-html
-<p>This is a normal element</p>
-<p>This is a fragment</p>
+<p>일반 요소입니다</p>
+<p>이것은 조각입니다</p>
 ```
 
 ### Using `ViewContainerRef`
 
-A **view container** is a node in Angular's component tree that can contain content. Any component or directive can inject `ViewContainerRef` to get a reference to a view container corresponding to that component or directive's location in the DOM.
+**뷰 컨테이너**는 Angular의 컴포넌트 트리 내에서 콘텐츠를 포함할 수 있는 노드입니다. 모든 컴포넌트나 디렉티브는 `ViewContainerRef`를 주입하여 해당 컴포넌트 또는 디렉티브의 DOM 내 위치에 대응하는 뷰 컨테이너에 대한 참조를 얻을 수 있습니다.
 
-You can use the `createEmbeddedView` method on `ViewContainerRef` to dynamically render a template fragment. When you render a fragment with a `ViewContainerRef`, Angular appends it into the DOM as the next sibling of the component or directive that injected the `ViewContainerRef`.
+`ViewContainerRef`의 `createEmbeddedView` 메서드를 사용하여 템플릿 조각을 동적으로 렌더링할 수 있습니다. `ViewContainerRef`를 사용하여 조각을 렌더링하면 Angular는 DOM에 컴포넌트 또는 디렉티브의 다음 형제 요소로 추가합니다.
 
-The following example shows a component that accepts a reference to a template fragment as an input and renders that fragment into the DOM on a button click.
+다음 예제는 템플릿 조각에 대한 참조를 입력으로 받아 해당 조각을 버튼 클릭 시 DOM에 렌더링하는 컴포넌트를 보여줍니다.
 
 ```angular-ts
 @Component({
   /* ... */,
   selector: 'component-with-fragment',
   template: `
-    <h2>Component with a fragment</h2>
+    <h2>조각이 있는 컴포넌트</h2>
     <ng-template #myFragment>
-      <p>This is the fragment</p>
+      <p>이것은 조각입니다</p>
     </ng-template>
     <my-outlet [fragment]="myFragment" />
   `,
@@ -185,7 +184,7 @@ export class ComponentWithFragment { }
 @Component({
   /* ... */,
   selector: 'my-outlet',
-  template: `<button (click)="showFragment()">Show</button>`,
+  template: `<button (click)="showFragment()">보여주기</button>`,
 })
 export class MyOutlet {
   private viewContainer = inject(ViewContainerRef);
@@ -199,85 +198,85 @@ export class MyOutlet {
 }
 ```
 
-In the example above, clicking the "Show" button results in the following output:
+위 예제에서 "보여주기" 버튼을 클릭하면 다음과 같은 출력이 생성됩니다:
 
 ```angular-html
 <component-with-fragment>
-  <h2>Component with a fragment>
+  <h2>조각이 있는 컴포넌트</h2>
   <my-outlet>
-    <button>Show</button>
+    <button>보여주기</button>
   </my-outlet>
-  <p>This is the fragment</p>
+  <p>이것은 조각입니다</p>
 </component-with-fragment>
 ```
 
 ## Passing parameters when rendering a template fragment
 
-When declaring a template fragment with `<ng-template>`, you can additionally declare parameters accepted by the fragment. When you render a fragment, you can optimally pass a `context` object corresponding to these parameters. You can use data from this context object in binding expressions and statements, in addition to referencing data from the component in which the fragment is declared.
+`<ng-template>`로 템플릿 조각을 선언할 때, 추가로 조각이 수용하는 매개변수를 선언할 수 있습니다. 조각을 렌더링할 때, 이러한 매개변서에 해당하는 `context` 객체를 최적으로 전달할 수 있습니다. 이 컨텍스트 객체의 데이터를 바인딩 표현식이나 문장에서 사용할 수 있으며, 조각이 선언된 컴포넌트의 데이터도 참조할 수 있습니다.
 
-Each parameter is written as an attribute prefixed with `let-` with a value matching a property name in the context object:
+각 매개변수는 `let-`으로 시작하는 속성으로 쓰여지며, 값은 컨텍스트 객체의 속성 이름과 일치해야 합니다:
 
 ```angular-html
 <ng-template let-pizzaTopping="topping">
-  <p>You selected: {{pizzaTopping}}</p>
+  <p>선택한 토핑: {{pizzaTopping}}</p>
 </ng-template>
 ```
 
 ### Using `NgTemplateOutlet`
 
-You can bind a context object to the `ngTemplateOutletContext` input:
+`ngTemplateOutletContext` 입력에 컨텍스트 객체를 바인딩할 수 있습니다:
 
 ```angular-html
 <ng-template #myFragment let-pizzaTopping="topping">
-  <p>You selected: {{pizzaTopping}}</p>
+  <p>선택한 토핑: {{pizzaTopping}}</p>
 </ng-template>
 
 <ng-container
   [ngTemplateOutlet]="myFragment"
-  [ngTemplateOutletContext]="{topping: 'onion'}"
+  [ngTemplateOutletContext]="{topping: '양파'}"
 />
 ```
 
 ### Using `ViewContainerRef`
 
-You can pass a context object as the second argument to `createEmbeddedView`:
+컨텍스트 객체를 `createEmbeddedView`의 두 번째 인수로 전달할 수 있습니다:
 
 ```angular-ts
-this.viewContainer.createEmbeddedView(this.myFragment, {topping: 'onion'});
+this.viewContainer.createEmbeddedView(this.myFragment, {topping: '양파'});
 ```
 
 ## Structural directives
 
-A **structural directive** is any directive that:
+**구조적 디렉티브**는 다음의 디렉티브입니다:
 
-- Injects `TemplateRef`
-- Injects `ViewContainerRef` and programmatically renders the injected `TemplateRef`
+- `TemplateRef`를 주입하고
+- `ViewContainerRef`를 주입하여 주입된 `TemplateRef`를 프로그래밍적으로 렌더링합니다.
 
-Angular supports a special convenience syntax for structural directives. If you apply the directive to an element and prefix the directive's selector with an asterisk (`*`) character, Angular interprets the entire element and all of its content as a template fragment:
+Angular는 구조적 디렉티브에 대한 특별한 편의 구문을 지원합니다. 디렉티브를 요소에 적용하고 디렉티브 선택자 앞에 별표(`*`) 문자를 접두사로 붙이면 Angular는 전체 요소와 그 모든 내용을 템플릿 조각으로 해석합니다:
 
 ```angular-html
 <section *myDirective>
-  <p>This is a fragment</p>
+  <p>이것은 조각입니다</p>
 </section>
 ```
 
-This is equivalent to:
+이는 다음과 같습니다:
 
 ```angular-html
 <ng-template myDirective>
   <section>
-    <p>This is a fragment</p>
+    <p>이것은 조각입니다</p>
   </section>
 </ng-template>
 ```
 
-Developers typically use structural directives to conditionally render fragments or render fragments multiple times.
+개발자들은 일반적으로 구조적 디렉티브를 사용하여 조각을 조건부로 렌더링하거나 조각을 여러 번 렌더링합니다.
 
-For more details, see [Structural Directives](/guide/directives/structural-directives).
+자세한 내용은 [구조적 디렉티브](/guide/directives/structural-directives)를 참조하세요.
 
 ## Additional resources
 
-For examples of how `ng-template` is used in other libraries, check out:
+`ng-template`이 다른 라이브러리에서 어떻게 사용되는지에 대한 예시를 보려면 다음을 확인하세요:
 
-- [Tabs from Angular Material](https://material.angular.io/components/tabs/overview) - nothing gets rendered into the DOM until the tab is activated
-- [Table from Angular Material](https://material.angular.io/components/table/overview) - allows developers to define different ways to render data
+- [Angular Material의 탭](https://material.angular.io/components/tabs/overview) - 탭이 활성화될 때까지 DOM에 아무것도 렌더링되지 않습니다.
+- [Angular Material의 테이블](https://material.angular.io/components/table/overview) - 개발자가 데이터를 렌더링하는 다양한 방법을 정의할 수 있게 합니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/templates/overview.md b/adev/src/content/guide/templates/overview.md
index b24f33e7dbb7..65faa07211f6 100644
--- a/adev/src/content/guide/templates/overview.md
+++ b/adev/src/content/guide/templates/overview.md
@@ -1,48 +1,48 @@
-<docs-decorative-header title="Template syntax" imgSrc="adev/src/assets/images/templates.svg"> <!-- markdownlint-disable-line -->
-In Angular, a template is a chunk of HTML.
-Use special syntax within a template to leverage many of Angular's features.
+<docs-decorative-header title="템플릿 구문" imgSrc="adev/src/assets/images/templates.svg"> <!-- markdownlint-disable-line -->
+Angular에서 템플릿은 HTML의 조각입니다.
+템플릿 내에서 특수 구문을 사용하여 Angular의 많은 기능을 활용하세요.
 </docs-decorative-header>
 
-Tip: Check out Angular's [Essentials](essentials/templates) before diving into this comprehensive guide.
+팁: 이 포괄적인 가이드를 살펴보기 전에 Angular의 [필수 사항](essentials/templates)을 확인하세요.
 
-Every Angular component has a **template** that defines the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) that the component renders onto the page. By using templates, Angular is able to automatically keep your page up-to-date as data changes.
+모든 Angular 컴포넌트에는 페이지에 렌더링되는 [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)을 정의하는 **템플릿**이 있습니다. 템플릿을 사용하면 Angular는 데이터가 변경될 때 페이지를 자동으로 최신 상태로 유지할 수 있습니다.
 
-Templates are usually found within either the `template` property of a `*.component.ts` file or the `*.component.html` file. To learn more, check out the [in-depth components guide](/guide/components).
+템플릿은 일반적으로 `*.component.ts` 파일의 `template` 속성 또는 `*.component.html` 파일 내에서 찾을 수 있습니다. 더 배우고 싶다면 [심층 컴포넌트 가이드](/guide/components)를 확인하세요.
 
-## How do templates work?
+## 템플릿은 어떻게 작동합니까?
 
-Templates are based on [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) syntax, with additional features such as built-in template functions, data binding, event listening, variables, and more.
+템플릿은 [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) 구문을 기반으로 하며, 내장 템플릿 함수, 데이터 바인딩, 이벤트 리스닝, 변수 등과 같은 추가 기능이 있습니다.
 
-Angular compiles templates into JavaScript in order to build up an internal understanding of your application. One of the benefits of this are built-in rendering optimizations that Angular applies to your application automatically.
+Angular는 템플릿을 JavaScript로 컴파일하여 애플리케이션에 대한 내부 이해를 구축합니다. 이의 이점 중 하나는 Angular가 애플리케이션에 자동으로 적용하는 내장 렌더링 최적화입니다.
 
-### Differences from standard HTML
+### 표준 HTML과의 차이점
 
-Some differences between templates and standard HTML syntax include:
+템플릿과 표준 HTML 구문 간의 몇 가지 차이점은 다음과 같습니다:
 
-- Comments in the template source code are not included in the rendered output
-- Component and directive elements can be self-closed (e.g., `<UserProfile />`)
-- Attributes with certain characters (i.e., `[]`, `()`, etc.) have special meaning to Angular. See [binding docs](guide/templates/binding) and [adding event listeners docs](guide/templates/event-listeners) for more information.
-- The `@` character has a special meaning to Angular for adding dynamic behavior, such as [control flow](guide/templates/control-flow), to templates. You can include a literal `@` character by escaping it as an HTML entity code (`&commat;` or `&#64;`).
-- Angular ignores and collapses unnecessary whitespace characters. See [whitespace in templates](guide/templates/whitespace) for more details.
-- Angular may add comment nodes to a page as placeholders for dynamic content, but developers can ignore these.
+- 템플릿 소스 코드의 주석은 렌더링된 출력에 포함되지 않습니다.
+- 컴포넌트 및 디렉티브 요소는 자기 닫힘이 가능합니다 (예: `<UserProfile />`).
+- 특정 문자를 포함한 속성(예: `[]`, `()`, 등)은 Angular에 특별한 의미를 갖습니다. 자세한 내용은 [바인딩 문서](guide/templates/binding)와 [이벤트 리스너 추가 문서](guide/templates/event-listeners)를 참조하세요.
+- `@` 문자는 템플릿에 [제어 흐름](guide/templates/control-flow)과 같은 동적 동작을 추가하기 위해 Angular에 특별한 의미가 있습니다. 리터럴 `@` 문자를 포함하려면 HTML 엔터티 코드(`&commat;` 또는 `&#64;`)로 이스케이프하면 됩니다.
+- Angular는 불필요한 공백 문자를 무시하고 축소합니다. 자세한 내용은 [템플릿의 공백](guide/templates/whitespace)을 참조하세요.
+- Angular는 동적 콘텐츠에 대한 자리 표시자 역할을 하는 주석 노드를 페이지에 추가할 수 있지만, 개발자는 이를 무시할 수 있습니다.
 
-In addition, while most HTML syntax is valid template syntax, Angular does not support `<script>` element in templates. For more information, see the [Security](best-practices/security) page.
+또한 대부분의 HTML 구문이 유효한 템플릿 구문이지만, Angular는 템플릿 내에서 `<script>` 요소를 지원하지 않습니다. 자세한 내용은 [보안](best-practices/security) 페이지를 참조하세요.
 
-## What's next?
+## 다음은 무엇입니까?
 
-You might also be interested in the following:
+다음도 관심이 있을 수 있습니다:
 
-| Topics                                                                      | Details                                                                                 |
-| :-------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
-| [Binding dynamic text, properties, and attributes](guide/templates/binding) | Bind dynamic data to text, properties and attributes.                                   |
-| [Adding event listeners](guide/templates/event-listeners)                   | Respond to events in your templates.                                                    |
-| [Two-way binding](guide/templates/two-way-binding)                          | Simultaneously binds a value and propagate changes.                                     |
-| [Control flow](guide/templates/control-flow)                                | Conditionally show, hide and repeat elements.                                           |
-| [Pipes](guide/templates/pipes)                                              | Transform data declaratively.                                                           |
-| [Slotting child content with ng-content](guide/templates/ng-content)        | Control how components render content.                                                  |
-| [Create template fragments with ng-template](guide/templates/ng-template)   | Declare a template fragment.                                                            |
-| [Grouping elements with ng-container](guide/templates/ng-container)         | Group multiple elements together or mark a location for rendering.                      |
-| [Variables in templates](guide/templates/variables)                         | Learn about variable declarations.                                                      |
-| [Deferred loading with @defer](guide/templates/defer)                       | Create deferrable views with `@defer`.                                                  |
-| [Expression syntax](guide/templates/expression-syntax)                      | Learn similarities and differences between Angular expressions and standard JavaScript. |
-| [Whitespace in templates](guide/templates/whitespace)                       | Learn how Angular handles whitespace.                                                   |
+| 주제                                                                        | 세부정보                                                                                  |
+| :-------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------- |
+| [동적 텍스트, 속성 및 속성 바인딩](guide/templates/binding)               | 텍스트, 속성 및 속성에 동적 데이터를 바인딩합니다.                                        |
+| [이벤트 리스너 추가](guide/templates/event-listeners)                      | 템플릿 내에서 이벤트에 응답합니다.                                                        |
+| [양방향 바인딩](guide/templates/two-way-binding)                          | 값을 동시에 바인딩하고 변경 사항을 전파합니다.                                            |
+| [제어 흐름](guide/templates/control-flow)                                   | 요소를 조건부로 보여주거나 숨기고 반복합니다.                                            |
+| [파이프](guide/templates/pipes)                                            | 데이터 변환을 선언적으로 수행합니다.                                                      |
+| [ng-content를 사용한 자식 콘텐츠 슬롯팅](guide/templates/ng-content)       | 컴포넌트가 콘텐츠를 렌더링하는 방식을 제어합니다.                                          |
+| [ng-template로 템플릿 조각 만들기](guide/templates/ng-template)           | 템플릿 조각을 선언합니다.                                                                  |
+| [ng-container로 요소 그룹화](guide/templates/ng-container)                 | 여러 요소를 함께 그룹화하거나 렌더링을 위한 위치를 표시합니다.                            |
+| [템플릿의 변수](guide/templates/variables)                                 | 변수 선언에 대해 배우세요.                                                                |
+| [@defer로 지연 로딩](guide/templates/defer)                                | `@defer`를 사용해 지연 가능 뷰를 생성합니다.                                              |
+| [표현식 구문](guide/templates/expression-syntax)                           | Angular 표현식과 표준 JavaScript 간의 유사점과 차이점을 학습합니다.                       |
+| [템플릿에서의 공백](guide/templates/whitespace)                           | Angular가 공백을 처리하는 방법을 배웁니다.                                               |
\ No newline at end of file
diff --git a/adev/src/content/guide/templates/pipes.md b/adev/src/content/guide/templates/pipes.md
index 0caaa06f7486..619370e3a0f4 100644
--- a/adev/src/content/guide/templates/pipes.md
+++ b/adev/src/content/guide/templates/pipes.md
@@ -1,12 +1,12 @@
-# Pipes
+# 파이프
 
-## Overview
+## 개요
 
-Pipes are a special operator in Angular template expressions that allows you to transform data declaratively in your template. Pipes let you declare a transformation function once and then use that transformation across multiple templates. Angular pipes use the vertical bar character (`|`), inspired by the [Unix pipe](<https://en.wikipedia.org/wiki/Pipeline_(Unix)>).
+파이프는 Angular 템플릿 표현식에서 데이터를 선언적으로 변환할 수 있는 특별한 연산자입니다. 파이프를 사용하면 한 번 변환 함수를 선언하고 이후 여러 템플릿에서 그 변환을 사용할 수 있습니다. Angular 파이프는 수직 바 문자(`|`)를 사용하며, 이는 [Unix 파이프](<https://en.wikipedia.org/wiki/Pipeline_(Unix)>)에서 영감을 받았습니다.
 
-Note: Angular's pipe syntax deviates from standard JavaScript, which uses the vertical bar character for the [bitwise OR operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR). Angular template expressions do not support bitwise operators.
+참고: Angular의 파이프 구문은 비트 연산자([비트 단위 OR 연산자](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR))를 사용하는 표준 JavaScript와는 다릅니다. Angular 템플릿 표현식은 비트 연산자를 지원하지 않습니다.
 
-Here is an example using some built-in pipes that Angular provides:
+다음은 Angular가 제공하는 몇 가지 내장 파이프를 사용하는 예제입니다:
 
 ```angular-ts
 import { Component } from '@angular/core';
@@ -17,12 +17,12 @@ import { CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
   imports: [CurrencyPipe, DatePipe, TitleCasePipe],
   template: `
     <main>
-       <!-- Transform the company name to title-case and
-       transform the purchasedOn date to a locale-formatted string -->
-<h1>Purchases from {{ company | titlecase }} on {{ purchasedOn | date }}</h1>
+       <!-- 회사 이름을 제목 대문자로 변환하고
+       purchasedOn 날짜를 로케일 형식의 문자열로 변환 -->
+<h1>{{ company | titlecase }}의 구매  {{ purchasedOn | date }}</h1>
 
-	    <!-- Transform the amount to a currency-formatted string -->
-      <p>Total: {{ amount | currency }}</p>
+	    <!-- 금액을 통화 형식의 문자열로 변환 -->
+      <p>총액: {{ amount | currency }}</p>
     </main>
   `,
 })
@@ -33,78 +33,78 @@ export class ShoppingCartComponent {
 }
 ```
 
-When Angular renders the component, it will ensure that the appropriate date format and currency is based on the locale of the user. If the user is in the United States, it would render:
+Angular가 컴포넌트를 렌더링하면 사용자의 로케일에 따라 적절한 날짜 형식과 통화가 적용됩니다. 사용자가 미국에 있는 경우 다음과 같이 렌더링됩니다:
 
 ```angular-html
 <main>
-  <h1>Purchases from Acme Corporation on Jul 8, 2024</h1>
-  <p>Total: $123.45</p>
+  <h1>Acme Corporation의 구매 2024년 7월 8일</h1>
+  <p>총액: $123.45</p>
 </main>
 ```
 
-See the [in-depth guide on i18n](/guide/i18n) to learn more about how Angular localizes values.
+Angular가 값을 로컬화하는 방법에 대해 더 배우려면 [i18n에 대한 심층 가이드](/guide/i18n)를 참조하십시오.
 
-### Built-in Pipes
+### 내장 파이프
 
-Angular includes a set of built-in pipes in the `@angular/common` package:
+Angular는 `@angular/common` 패키지에 내장 파이프 집합을 포함하고 있습니다:
 
-| Name                                          | Description                                                                                   |
-| --------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| [`AsyncPipe`](api/common/AsyncPipe)           | Read the value from a `Promise` or an RxJS `Observable`.                                      |
-| [`CurrencyPipe`](api/common/CurrencyPipe)     | Transforms a number to a currency string, formatted according to locale rules.                |
-| [`DatePipe`](api/common/DatePipe)             | Formats a `Date` value according to locale rules.                                             |
-| [`DecimalPipe`](api/common/DecimalPipe)       | Transforms a number into a string with a decimal point, formatted according to locale rules.  |
-| [`I18nPluralPipe`](api/common/I18nPluralPipe) | Maps a value to a string that pluralizes the value according to locale rules.                 |
-| [`I18nSelectPipe`](api/common/I18nSelectPipe) | Maps a key to a custom selector that returns a desired value.                                 |
-| [`JsonPipe`](api/common/JsonPipe)             | Transforms an object to a string representation via `JSON.stringify`, intended for debugging. |
-| [`KeyValuePipe`](api/common/KeyValuePipe)     | Transforms Object or Map into an array of key value pairs.                                    |
-| [`LowerCasePipe`](api/common/LowerCasePipe)   | Transforms text to all lower case.                                                            |
-| [`PercentPipe`](api/common/PercentPipe)       | Transforms a number to a percentage string, formatted according to locale rules.              |
-| [`SlicePipe`](api/common/SlicePipe)           | Creates a new Array or String containing a subset (slice) of the elements.                    |
-| [`TitleCasePipe`](api/common/TitleCasePipe)   | Transforms text to title case.                                                                |
-| [`UpperCasePipe`](api/common/UpperCasePipe)   | Transforms text to all upper case.                                                            |
+| 이름                                            | 설명                                                                                       |
+| ----------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| [`AsyncPipe`](api/common/AsyncPipe)            | `Promise` 또는 RxJS `Observable`의 값을 읽습니다.                                          |
+| [`CurrencyPipe`](api/common/CurrencyPipe)      | 로케일 규칙에 따라 숫자를 통화 문자열로 변환합니다.                                       |
+| [`DatePipe`](api/common/DatePipe)              | 로케일 규칙에 따라 `Date` 값을 형식화합니다.                                             |
+| [`DecimalPipe`](api/common/DecimalPipe)        | 로케일 규칙에 따라 소수점이 있는 문자열로 숫자를 변환합니다.                            |
+| [`I18nPluralPipe`](api/common/I18nPluralPipe) | 로케일 규칙에 따라 값을 복수형 문자열로 매핑합니다.                                       |
+| [`I18nSelectPipe`](api/common/I18nSelectPipe) | 원하는 값을 반환하는 사용자 정의 선택기로 키를 매핑합니다.                               |
+| [`JsonPipe`](api/common/JsonPipe)              | 객체를 `JSON.stringify`를 통해 문자열 표현으로 변환하며, 디버깅을 위해 의도됩니다.     |
+| [`KeyValuePipe`](api/common/KeyValuePipe)      | 객체 또는 맵을 키-값 쌍의 배열로 변환합니다.                                           |
+| [`LowerCasePipe`](api/common/LowerCasePipe)    | 텍스트를 모두 소문자로 변환합니다.                                                      |
+| [`PercentPipe`](api/common/PercentPipe)        | 로케일 규칙에 따라 숫자를 백분율 문자열로 변환합니다.                                   |
+| [`SlicePipe`](api/common/SlicePipe)            | 요소의 하위 집합(슬라이스)을 포함하는 새 배열 또는 문자열을 생성합니다.                 |
+| [`TitleCasePipe`](api/common/TitleCasePipe)    | 텍스트를 제목 대문자로 변환합니다.                                                      |
+| [`UpperCasePipe`](api/common/UpperCasePipe)    | 텍스트를 모두 대문자로 변환합니다.                                                      |
 
-## Using pipes
+## 파이프 사용하기
 
-Angular's pipe operator uses the vertical bar character (`|`), within a template expression. The pipe operator is a binary operator– the left-hand operand is the value passed to the transformation function, and the right side operand is the name of the pipe and any additional arguments (described below).
+Angular의 파이프 연산자는 템플릿 표현식 내에서 수직 바 문자(`|`)를 사용합니다. 파이프 연산자는 이항 연산자로, 왼쪽 피연산자는 변환 함수에 전달되는 값을 의미하고, 오른쪽 피연산자는 파이프의 이름 및 추가 인수입니다(아래 설명 참조).
 
 ```angular-html
-<p>Total: {{ amount | currency }}</p>
+<p>총액: {{ amount | currency }}</p>
 ```
 
-In this example, the value of `amount` is passed into the `CurrencyPipe` where the pipe name is `currency`. It then renders the default currency for the user’s locale.
+이 예제에서 `amount`의 값은 `CurrencyPipe`로 전달되며, 파이프 이름은 `currency`입니다. 그러면 사용자의 로케일에 대한 기본 통화로 렌더링됩니다.
 
-### Combining multiple pipes in the same expression
+### 동일한 표현식에서 여러 파이프 결합하기
 
-You can apply multiple transformations to a value by using multiple pipe operators. Angular runs the pipes from left to right.
+여러 파이프 연산자를 사용하여 하나의 값에 여러 변환을 적용할 수 있습니다. Angular는 왼쪽에서 오른쪽으로 파이프를 실행합니다.
 
-The following example demonstrates a combination of pipes to display a localized date in all uppercase:
+다음 예제는 모든 대문자로 로컬화된 날짜를 표시하기 위해 파이프를 조합하는 방법을 보여줍니다:
 
 ```angular-html
-<p>The event will occur on {{ scheduledOn | date | uppercase }}.</p>
+<p>이벤트는 {{ scheduledOn | date | uppercase }}에 발생합니다.</p>
 ```
 
-### Passing parameters to pipes
+### 파이프에 매개변수 전달하기
 
-Some pipes accept parameters to configure the transformation. To specify a parameter, append the pipe name with a colon (`:`) followed by the parameter value.
+일부 파이프는 변환을 구성하기 위해 매개변수를 수용합니다. 매개변수를 지정하려면 파이프 이름 뒤에 콜론(`:`)과 매개변수 값을 붙입니다.
 
-For example, the `DatePipe` is able to take parameters to format the date in a specific way.
+예를 들어, `DatePipe`는 특정 방식으로 날짜를 형식화하기 위해 매개변수를 수용할 수 있습니다.
 
 ```angular-html
-<p>The event will occur at {{ scheduledOn | date:'hh:mm' }}.</p>
+<p>이벤트는 {{ scheduledOn | date:'hh:mm' }}에 발생합니다.</p>
 ```
 
-Some pipes may accept multiple parameters. You can specify additional parameter values separated by the colon character (`:`).
+일부 파이프는 여러 매개변수를 수용할 수 있습니다. 추가 매개변수 값은 콜론 문자(`:`)로 구분하여 지정할 수 있습니다.
 
-For example, we can also pass a second optional parameter to control the timezone.
+예를 들어, 시간대를 제어하는 두 번째 선택적 매개변수를 전달할 수 있습니다.
 
 ```angular-html
-<p>The event will occur at {{ scheduledOn | date:'hh:mm':'UTC' }}.</p>
+<p>이벤트는 {{ scheduledOn | date:'hh:mm':'UTC' }}에 발생합니다.</p>
 ```
 
-## How pipes work
+## 파이프 작동 방식
 
-Conceptually, pipes are functions that accept an input value and return a transformed value.
+개념적으로, 파이프는 입력 값을 수용하고 변환된 값을 반환하는 함수입니다.
 
 ```angular-ts
 import { Component } from '@angular/core';
@@ -115,7 +115,7 @@ import { CurrencyPipe} from '@angular/common';
   imports: [CurrencyPipe],
   template: `
     <main>
-      <p>Total: {{ amount | currency }}</p>
+      <p>총액: {{ amount | currency }}</p>
     </main>
   `,
 })
@@ -124,57 +124,57 @@ export class AppComponent {
 }
 ```
 
-In this example:
+이 예제에서:
 
-1. `CurrencyPipe` is imported from `@angular/common`
-1. `CurrencyPipe` is added to the `imports` array
-1. The `amount` data is passed to the `currency` pipe
+1. `CurrencyPipe`는 `@angular/common`에서 가져옵니다.
+1. `CurrencyPipe`는 `imports` 배열에 추가됩니다.
+1. `amount` 데이터가 `currency` 파이프에 전달됩니다.
 
-### Pipe operator precedence
+### 파이프 연산자 우선순위
 
-The pipe operator has lower precedence than other binary operators, including `+`, `-`, `*`, `/`, `%`, `&&`, `||`, and `??`.
+파이프 연산자는 `+`, `-`, `*`, `/`, `%`, `&&`, `||`, `??` 등 다른 이항 연산자보다 낮은 우선순위를 가집니다.
 
 ```angular-html
-<!-- firstName and lastName are concatenated before the result is passed to the uppercase pipe -->
+<!-- firstName과 lastName은 대문자 변환 파이프에 전달되기 전에 연결됩니다. -->
 {{ firstName + lastName | uppercase }}
 ```
 
-The pipe operator has higher precedence than the conditional (ternary) operator.
+파이프 연산자는 조건부(삼항) 연산자보다 높은 우선순위를 가집니다.
 
 ```angular-html
 {{ (isAdmin ? 'Access granted' : 'Access denied') | uppercase }}
 ```
 
-If the same expression were written without parentheses:
+같은 표현식이 괄호 없이 작성되면:
 
 ```angular-html
 {{ isAdmin ? 'Access granted' : 'Access denied' | uppercase }}
 ```
 
-It will be parsed instead as:
+대신 다음과 같이 파싱됩니다:
 
 ```angular-html
 {{ isAdmin ? 'Access granted' : ('Access denied' | uppercase) }}
 ```
 
-Always use parentheses in your expressions when operator precedence may be ambiguous.
+연산자 우선순위가 모호할 수 있는 경우 표현식에서 항상 괄호를 사용하십시오.
 
-### Change detection with pipes
+### 파이프와의 변경 감지
 
-By default, all pipes are considered `pure`, which means that it only executes when a primitive input value (such as a `String`, `Number`, `Boolean`, or `Symbol`) or a changed object reference (such as `Array`, `Object`, `Function`, or `Date`). Pure pipes offer a performance advantage because Angular can avoid calling the transformation function if the passed value has not changed.
+기본적으로 모든 파이프는 `순수(pure)`로 간주되며, 이는 기본 입력 값(예: `String`, `Number`, `Boolean`, 또는 `Symbol`) 또는 변경된 객체 참조(예: `Array`, `Object`, `Function`, 또는 `Date`)에 대해서만 실행됨을 의미합니다. 순수 파이프는 성능 이점을 제공합니다. Angular는 전달된 값이 변경되지 않았다면 변환 함수를 호출하지 않을 수 있습니다.
 
-As a result, this means that mutations to object properties or array items are not detected unless the entire object or array reference is replaced with a different instance. If you want this level of change detection, refer to [detecting changes within arrays or objects](#detecting-change-within-arrays-or-objects).
+결과적으로, 객체 속성이나 배열 항목에 대한 변형은 전체 객체나 배열 참조가 다른 인스턴스로 대체되지 않는 한 감지되지 않습니다. 이 수준의 변경 감지를 원한다면 [배열이나 객체 내의 변경 감지](#detecting-change-within-arrays-or-objects)를 참조하십시오.
 
-## Creating custom pipes
+## 사용자 정의 파이프 만들기
 
-You can define a custom pipe by implementing a TypeScript class with the `@Pipe` decorator. A pipe must have two things:
+`@Pipe` 데코레이터가 있는 TypeScript 클래스를 구현하여 사용자 정의 파이프를 정의할 수 있습니다. 파이프는 두 가지가 필요합니다:
 
-- A name, specified in the pipe decorator
-- A method named `transform` that performs the value transformation.
+- 데코레이터에서 지정한 이름
+- 값 변환을 수행하는 `transform`이라는 메서드
 
-The TypeScript class should additionally implement the `PipeTransform` interface to ensure that it satisfies the type signature for a pipe.
+TypeScript 클래스는 파이프에 대한 타입 서명을 만족하도록 `PipeTransform` 인터페이스를 구현해야 합니다.
 
-Here is an example of a custom pipe that transforms strings to kebab case:
+다음은 문자열을 케밥 케이스로 변환하는 사용자 정의 파이프의 예입니다:
 
 ```angular-ts
 // kebab-case.pipe.ts
@@ -190,9 +190,9 @@ export class KebabCasePipe implements PipeTransform {
 }
 ```
 
-### Using the `@Pipe` decorator
+### `@Pipe` 데코레이터 사용하기
 
-When creating a custom pipe, import `Pipe` from the `@angular/core` package and use it as a decorator for the TypeScript class.
+사용자 정의 파이프를 만들 때 `@angular/core` 패키지에서 `Pipe`를 가져와 TypeScript 클래스의 데코레이터로 사용합니다.
 
 ```angular-ts
 import { Pipe } from '@angular/core';
@@ -203,18 +203,18 @@ import { Pipe } from '@angular/core';
 export class MyCustomTransformationPipe {}
 ```
 
-The `@Pipe` decorator requires a `name` that controls how the pipe is used in a template.
+`@Pipe` 데코레이터는 템플릿에서 파이프를 사용하는 방식을 제어하는 `name`이 필요합니다.
 
-### Naming convention for custom pipes
+### 사용자 정의 파이프의 명명 규칙
 
-The naming convention for custom pipes consists of two conventions:
+사용자 정의 파이프의 명명 규칙은 두 가지 규칙으로 구성됩니다:
 
-- `name` - camelCase is recommended. Do not use hyphens.
-- `class name` - PascalCase version of the `name` with `Pipe` appended to the end
+- `name` - 카멜 케이스를 권장합니다. 하이픈을 사용하지 마십시오.
+- `class name` - `name`의 파스칼 케이스 버전이며 끝에 `Pipe`가 추가됩니다.
 
-### Implement the `PipeTransform` interface
+### `PipeTransform` 인터페이스 구현하기
 
-In addition to the `@Pipe` decorator, custom pipes should always implement the `PipeTransform` interface from `@angular/core`.
+`@Pipe` 데코레이터 외에도 사용자 정의 파이프는 항상 `@angular/core`에서 `PipeTransform` 인터페이스를 구현해야 합니다.
 
 ```angular-ts
 import { Pipe, PipeTransform } from '@angular/core';
@@ -225,11 +225,11 @@ import { Pipe, PipeTransform } from '@angular/core';
 export class MyCustomTransformationPipe implements PipeTransform {}
 ```
 
-Implementing this interface ensures that your pipe class has the correct structure.
+이 인터페이스를 구현하면 파이프 클래스가 올바른 구조를 가지도록 보장됩니다.
 
-### Transforming the value of a pipe
+### 파이프의 값 변환하기
 
-Every transformation is invoked by the `transform` method with the first parameter being the value being passed in and the return value being the transformed value.
+모든 변환은 `transform` 메서드에 의해 호출되며, 첫 번째 매개변수는 전달되는 값이고 반환 값은 변환된 값입니다.
 
 ```angular-ts
 import { Pipe, PipeTransform } from '@angular/core';
@@ -239,14 +239,14 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class MyCustomTransformationPipe implements PipeTransform {
   transform(value: string): string {
-    return `My custom transformation of ${value}.`
+    return `제 사용자 정의 변환 ${value}.`
   }
 }
 ```
 
-### Adding parameters to a custom pipe
+### 사용자 정의 파이프에 매개변수 추가하기
 
-You can add parameters to your transformation by adding additional parameters to the `transform` method:
+변환에 매개변수를 추가하려면 `transform` 메서드에 추가 매개변수를 추가할 수 있습니다:
 
 ```angular-ts
 import { Pipe, PipeTransform } from '@angular/core';
@@ -256,7 +256,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class MyCustomTransformationPipe implements PipeTransform {
   transform(value: string, format: string): string {
-    let msg = `My custom transformation of ${value}.`
+    let msg = `제 사용자 정의 변환 ${value}.`
 
     if (format === 'uppercase') {
       return msg.toUpperCase()
@@ -267,11 +267,11 @@ export class MyCustomTransformationPipe implements PipeTransform {
 }
 ```
 
-### Detecting change within arrays or objects
+### 배열이나 객체 내에서의 변경 감지
 
-When you want a pipe to detect changes within arrays or objects, it must be marked as an impure function by passing the `pure` flag with a value of `false`.
+배열이나 객체 내에서 변경을 감지하려면 `pure` 플래그에 `false` 값을 전달하여 비순수 함수로 표시해야 합니다.
 
-Avoid creating impure pipes unless absolutely necessary, as they can incur a significant performance penalty if used without care.
+필요하지 않은 한 비순수 파이프를 생성하는 것은 피하십시오. 사용 시 성능에 상당한 영향을 미칠 수 있습니다.
 
 ```angular-ts
 import { Pipe, PipeTransform } from '@angular/core';
@@ -287,4 +287,4 @@ export class JoinNamesImpurePipe implements PipeTransform {
 }
 ```
 
-Angular developers often adopt the convention of including `Impure` in the pipe `name` and class name to indicate the potential performance pitfall to other developers.
+Angular 개발자들은 종종 다른 개발자에게 잠재적인 성능 문제를 나타내기 위해 파이프의 `name`과 클래스 이름에 `Impure`를 포함하는 관례를 따릅니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/templates/two-way-binding.md b/adev/src/content/guide/templates/two-way-binding.md
index bfc141a4e33c..afc4028bf5a7 100644
--- a/adev/src/content/guide/templates/two-way-binding.md
+++ b/adev/src/content/guide/templates/two-way-binding.md
@@ -1,16 +1,16 @@
-# Two-way binding
+# 양방향 바인딩
 
-**Two way binding** is a shorthand to simultaneously bind a value into an element, while also giving that element the ability to propagate changes back through this binding.
+**양방향 바인딩**은 값을 요소에 동시에 바인딩하고, 해당 요소가 이 바인딩을 통해 변경 사항을 전파할 수 있는 기능을 부여하는 약어입니다.
 
-## Syntax
+## 문법
 
-The syntax for two-way binding is a combination of square brackets and parentheses, `[()]`. It combines the syntax from property binding, `[]`, and the syntax from event binding, `()`. The Angular community informally refers to this syntax as "banana-in-a-box".
+양방향 바인딩의 문법은 대괄호와 괄호의 조합인 `[()]`입니다. 이는 속성 바인딩의 문법인 `[]`와 이벤트 바인딩의 문법인 `()`를 조합한 것입니다. Angular 커뮤니티에서는 이 문법을 비공식적으로 "바나나 인 박스"라고 부릅니다.
 
-## Two-way binding with form controls
+## 양방향 바인딩을 이용한 폼 컨트롤
 
-Developers commonly use two-way binding to keep component data in sync with a form control as a user interacts with the control. For example, when a user fills out a text input, it should update the state in the component.
+개발자들은 일반적으로 사용자가 폼 컨트롤과 상호작용할 때 컴포넌트 데이터를 동기화하기 위해 양방향 바인딩을 사용합니다. 예를 들어, 사용자가 텍스트 입력을 작성하면 컴포넌트의 상태가 업데이트되어야 합니다.
 
-The following example dynamically updates the `firstName` attribute on the page:
+다음 예는 페이지에서 `firstName` 속성을 동적으로 업데이트합니다:
 
 ```angular-ts
 import { Component } from '@angular/core';
@@ -30,21 +30,21 @@ export class AppComponent {
 }
 ```
 
-To use two-way binding with native form controls, you need to:
+네이티브 폼 컨트롤과 함께 양방향 바인딩을 사용하려면 다음이 필요합니다:
 
-1. Import the `FormsModule` from `@angular/forms`
-1. Use the `ngModel` directive with the two-way binding syntax (e.g., `[(ngModel)]`)
-1. Assign it the state that you want it to update (e.g., `firstName`)
+1. `@angular/forms`에서 `FormsModule`을 가져옵니다.
+2. 양방향 바인딩 문법을 사용하여 `ngModel` 지시어를 사용합니다 (예: `[(ngModel)]`).
+3. 업데이트할 상태를 할당합니다 (예: `firstName`).
 
-Once that is set up, Angular will ensure that any updates in the text input will reflect correctly inside of the component state!
+이 설정이 완료되면 Angular는 텍스트 입력의 모든 업데이트가 컴포넌트 상태에 올바르게 반영되도록 보장합니다!
 
-Learn more about [`NgModel`](guide/directives#displaying-and-updating-properties-with-ngmodel) in the official docs.
+공식 문서에서 [`NgModel`](guide/directives#displaying-and-updating-properties-with-ngmodel)에 대해 더 알아보세요.
 
-## Two-way binding between components
+## 컴포넌트 간 양방향 바인딩
 
-Leveraging two-way binding between a parent and child component requires more configuration compared to form elements.
+부모 컴포넌트와 자식 컴포넌트 간의 양방향 바인딩은 폼 요소에 비해 더 많은 구성이 필요합니다.
 
-Here is an example where the `AppComponent` is responsible for setting the initial count state, but the logic for updating and rendering the UI for the counter primarily resides inside its child `CounterComponent`.
+다음 예에서는 `AppComponent`가 초기 카운트 상태를 설정하는 책임이 있지만, 카운터의 UI를 업데이트하고 렌더링하는 로직은 주로 자식 `CounterComponent` 내에 존재합니다.
 
 ```angular-ts
 // ./app.component.ts
@@ -87,19 +87,19 @@ export class CounterComponent {
 }
 ```
 
-### Enabling two-way binding between components
+### 컴포넌트 간 양방향 바인딩 활성화
 
-If we break down the example above to its core, each two-way binding for components requires the following:
+위의 예제를 핵심으로 나누면, 각 컴포넌트에 대한 양방향 바인딩은 다음을 요구합니다:
 
-The child component must contain a `model` property.
+자식 컴포넌트는 `model` 속성을 포함해야 합니다.
 
-Here is a simplified example:
+여기 간단한 예가 있습니다:
 
 ```angular-ts
 // './counter/counter.component.ts';
 import { Component, model } from '@angular/core';
 
-@Component({ // Omitted for brevity })
+@Component({ // 간결함을 위해 생략됨 })
 export class CounterComponent {
   count = model<number>(0);
 
@@ -109,12 +109,12 @@ export class CounterComponent {
 }
 ```
 
-The parent component must:
+부모 컴포넌트는 다음을 수행해야 합니다:
 
-1. Wrap the `model` property name in the two-way binding syntax.
-1. Assign a property or a signal to the `model` property.
+1. 양방향 바인딩 문법으로 `model` 속성 이름을 감쌉니다.
+2. `model` 속성에 속성 또는 신호를 할당합니다.
 
-Here is a simplified example:
+여기 간단한 예가 있습니다:
 
 ```angular-ts
 // ./app.component.ts
@@ -132,5 +132,4 @@ import { CounterComponent } from './counter/counter.component';
 })
 export class AppComponent {
   initialCount = 18;
-}
-```
+}
\ No newline at end of file
diff --git a/adev/src/content/guide/templates/variables.md b/adev/src/content/guide/templates/variables.md
index 8e3d28628019..24cbed7abe8a 100644
--- a/adev/src/content/guide/templates/variables.md
+++ b/adev/src/content/guide/templates/variables.md
@@ -1,14 +1,14 @@
-# Variables in templates
+# 템플릿의 변수
 
-Angular has two types of variable declarations in templates: local template variables and template reference variables.
+Angular는 템플릿에서 두 가지 유형의 변수 선언을 제공합니다: 로컬 템플릿 변수와 템플릿 참조 변수.
 
-## Local template variables with `@let`
+## `@let`을 사용한 로컬 템플릿 변수
 
-Angular's `@let` syntax allows you to define a local variable and re-use it across a template, similar to the [JavaScript `let` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let).
+Angular의 `@let` 구문은 로컬 변수를 정의하고 템플릿 전반에 걸쳐 재사용할 수 있도록 허용하며, 이는 [JavaScript `let` 구문](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)과 유사합니다.
 
-### Using `@let`
+### `@let` 사용하기
 
-Use `@let` to declare a variable whose value is based on the result of a template expression. Angular automatically keeps the variable's value up-to-date with the given expression, similar to [bindings](./bindings).
+`@let`을 사용하여 템플릿 표현식의 결과에 기반한 값을 가지는 변수를 선언합니다. Angular는 주어진 표현식에 따라 변수의 값을 자동으로 최신 상태로 유지합니다, 이는 [바인딩](./bindings)과 유사합니다.
 
 ```angular-html
 @let name = user.name;
@@ -21,11 +21,11 @@ Use `@let` to declare a variable whose value is based on the result of a templat
                       'Ut enim ad minim veniam...';
 ```
 
-Each `@let` block can declare exactly one variable. You cannot declare multiple variables in the same block with a comma.
+각 `@let` 블록은 정확히 하나의 변수를 선언할 수 있습니다. 같은 블록 내에서 여러 변수를 쉼표로 선언할 수는 없습니다.
 
-### Referencing the value of `@let`
+### `@let`의 값 참조하기
 
-Once you've declared a variable with `@let`, you can reuse it in the same template:
+`@let`으로 변수를 선언한 후, 같은 템플릿 내에서 재사용할 수 있습니다:
 
 ```angular-html
 @let user = user$ | async;
@@ -40,26 +40,26 @@ Once you've declared a variable with `@let`, you can reuse it in the same templa
     }
   </ul>
 
-  <button (click)="update(user)">Update profile</button>
+  <button (click)="update(user)">프로필 업데이트</button>
 }
 ```
 
-### Assignability
+### 할당 가능성
 
-A key difference between `@let` and JavaScript's `let` is that `@let` cannot be reassigned after declaration. However, Angular automatically keeps the variable's value up-to-date with the given expression.
+`@let`과 JavaScript의 `let` 간의 주요 차이점은 `@let`은 선언 후 재할당할 수 없다는 것입니다. 그러나 Angular는 주어진 표현식에 따라 변수의 값을 자동으로 최신 상태로 유지합니다.
 
 ```angular-html
 @let value = 1;
 
-<!-- Invalid - This does not work! -->
-<button (click)="value = value + 1">Increment the value</button>
+<!-- 유효하지 않음 - 작동하지 않음! -->
+<button (click)="value = value + 1">값 증가</button>
 ```
 
-### Variable scope
+### 변수 범위
 
-`@let` declarations are scoped to the current view and its descendants. Angular creates a new view at component boundaries and wherever a template might contain dynamic content, such as control flow blocks, `@defer` blocks, or structural directives.
+`@let` 선언은 현재 뷰와 그 하위 요소에 대한 범위를 가집니다. Angular는 컴포넌트 경계에서 새로운 뷰를 생성하며, 템플릿이 동적 콘텐츠를 포함할 수 있는 곳에서도 마찬가지입니다, 예를 들어 제어 흐름 블록, `@defer` 블록, 또는 구조 지시문 등이 있습니다.
 
-Since `@let` declarations are not hoisted, they **cannot** be accessed by parent views or siblings:
+`@let` 선언은 호이스팅되지 않기 때문에, 부모 뷰나 형제 요소에서 **접근할 수 없습니다**:
 
 ```angular-html
 @let topLevel = value;
@@ -68,95 +68,95 @@ Since `@let` declarations are not hoisted, they **cannot** be accessed by parent
   @let insideDiv = value;
 </div>
 
-{{topLevel}} <!-- Valid -->
-{{insideDiv}} <!-- Valid -->
+{{topLevel}} <!-- 유효함 -->
+{{insideDiv}} <!-- 유효함 -->
 
 @if (condition) {
-  {{topLevel + insideDiv}} <!-- Valid -->
+  {{topLevel + insideDiv}} <!-- 유효함 -->
 
   @let nested = value;
 
   @if (condition) {
-    {{topLevel + insideDiv + nested}} <!-- Valid -->
+    {{topLevel + insideDiv + nested}} <!-- 유효함 -->
   }
 }
 
 <div *ngIf="condition">
-  {{topLevel + insideDiv}} <!-- Valid -->
+  {{topLevel + insideDiv}} <!-- 유효함 -->
 
   @let nestedNgIf = value;
 
   <div *ngIf="condition">
-     {{topLevel + insideDiv + nestedNgIf}} <!-- Valid -->
+     {{topLevel + insideDiv + nestedNgIf}} <!-- 유효함 -->
   </div>
 </div>
 
-{{nested}} <!-- Error, not hoisted from @if -->
-{{nestedNgIf}} <!-- Error, not hoisted from *ngIf -->
+{{nested}} <!-- 오류, @if에서 호이스팅되지 않음 -->
+{{nestedNgIf}} <!-- 오류, *ngIf에서 호이스팅되지 않음 -->
 ```
 
-### Full syntax
+### 전체 구문
 
-The `@let` syntax is formally defined as:
+`@let` 구문은 공식적으로 다음과 같이 정의됩니다:
 
-- The `@let` keyword.
-- Followed by one or more whitespaces, not including new lines.
-- Followed by a valid JavaScript name and zero or more whitespaces.
-- Followed by the = symbol and zero or more whitespaces.
-- Followed by an Angular expression which can be multi-line.
-- Terminated by the `;` symbol.
+- `@let` 키워드.
+- 줄 바꿈을 포함하지 않는 하나 이상의 공백으로 이어짐.
+- 유효한 JavaScript 이름과 0개 이상의 공백으로 이어짐.
+- `=` 기호와 0개 이상의 공백으로 이어짐.
+- 다중 줄일 수 있는 Angular 표현식으로 이어짐.
+- `;` 기호로 종료됨.
 
-## Template reference variables
+## 템플릿 참조 변수
 
-Template reference variables give you a way to declare a variable that references a value from an element in your template.
+템플릿 참조 변수는 템플릿 내의 요소에서 값을 참조하는 변수를 선언하는 방법을 제공합니다.
 
-A template reference variable can refer to the following:
+템플릿 참조 변수는 다음을 참조할 수 있습니다:
 
-- a DOM element within a template (including [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements))
-- an Angular component or directive
-- a [TemplateRef](/api/core/TemplateRef) from an [ng-template](/api/core/ng-template)
+- 템플릿 내의 DOM 요소(사용자 정의 요소 포함 [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements))
+- Angular 컴포넌트 또는 지시문
+- [TemplateRef](/api/core/TemplateRef)여서 [ng-template](/api/core/ng-template)에서
 
-You can use template reference variables to read information from one part of the template in another part of the same template.
+템플릿 참조 변수를 사용하여 템플릿의 한 부분에서 다른 부분으로 정보를 읽을 수 있습니다.
 
-### Declaring a template reference variable
+### 템플릿 참조 변수를 선언하기
 
-You can declare a variable on an element in a template by adding an attribute that starts with the hash character (`#`) followed by the variable name.
+해시 문자(`#`)로 시작하는 속성을 추가하여 템플릿의 요소에 변수를 선언할 수 있습니다. 그 뒤에는 변수 이름이 옵니다.
 
 ```angular-html
-<!-- Create a template reference variable named "taskInput", referring to the HTMLInputElement. -->
-<input #taskInput placeholder="Enter task name">
+<!-- "taskInput"이라는 템플릿 참조 변수를 생성하며, HTMLInputElement를 참조합니다. -->
+<input #taskInput placeholder="작업 이름 입력">
 ```
 
-### Assigning values to template reference variables
+### 템플릿 참조 변수에 값 할당하기
 
-Angular assigns a value to template variables based on the element on which the variable is declared.
+Angular는 변수가 선언된 요소를 기준으로 템플릿 변수에 값을 할당합니다.
 
-If you declare the variable on a Angular component, the variable refers to the component instance.
+Angular 컴포넌트에 변수를 선언하면, 해당 변수는 컴포넌트 인스턴스를 참조합니다.
 
 ```angular-html
-<!-- The `startDate` variable is assigned the instance of `MyDatepicker`. -->
+<!-- `startDate` 변수는 `MyDatepicker`의 인스턴스로 할당됩니다. -->
 <my-datepicker #startDate />
 ```
 
-If you declare the variable on an `<ng-template>` element, the variable refers to a TemplateRef instance which represents the template. For more information, see [How Angular uses the asterisk, \*, syntax](/guide/directives/structural-directives#asterisk) in [Structural directives](/guide/directives/structural-directives).
+`<ng-template>` 요소에 변수를 선언하면, 해당 변수는 템플릿을 나타내는 TemplateRef 인스턴스를 참조합니다. 더 많은 정보는 [How Angular uses the asterisk, \*, syntax](/guide/directives/structural-directives#asterisk) in [Structural directives](/guide/directives/structural-directives)에서 확인하십시오.
 
 ```angular-html
-<!-- The `myFragment` variable is assigned the `TemplateRef` instance corresponding to this template fragment. -->
+<!-- `myFragment` 변수는 이 템플릿 조각에 해당하는 `TemplateRef` 인스턴스로 할당됩니다. -->
 <ng-template #myFragment>
-  <p>This is a template fragment</p>
+  <p>이것은 템플릿 조각입니다</p>
 </ng-template>
 ```
 
-If you declare the variable on any other displayed element, the variable refers to the `HTMLElement` instance.
+다른 표시된 요소에 변수를 선언하면, 해당 변수는 HTMLElement 인스턴스를 참조합니다.
 
 ```angular-html
-<!-- The "taskInput" variable refers to the HTMLInputElement instance. -->
-<input #taskInput placeholder="Enter task name">
+<!-- "taskInput" 변수는 HTMLInputElement 인스턴스를 참조합니다. -->
+<input #taskInput placeholder="작업 이름 입력">
 ```
 
-#### Assigning a reference to an Angular directive
+#### Angular 지시문에 참조 할당하기
 
-Angular directives may have an `exportAs` property that defines a name by which the directive can be referenced in a template:
+Angular 지시문은 템플릿 내에서 지시문을 참조할 수 있는 이름을 정의하는 `exportAs` 속성을 가질 수 있습니다:
 
 ```angular-ts
 @Directive({
@@ -166,34 +166,34 @@ Angular directives may have an `exportAs` property that defines a name by which
 export class DropZone { /* ... */ }
 ```
 
-When you declare a template variable on an element, you can assign that variable a directive instance by specifying this `exportAs` name:
+요소에 템플릿 변수를 선언할 때, 이 `exportAs` 이름을 사용하여 지시문 인스턴스를 변수에 할당할 수 있습니다:
 
 ```angular-html
-<!-- The `firstZone` variable refers to the `DropZone` directive instance. -->
+<!-- `firstZone` 변수는 `DropZone` 지시문 인스턴스를 참조합니다. -->
 <section dropZone #firstZone="dropZone"> ... </section>
 ```
 
-You cannot refer to a directive that does not specify an `exportAs` name.
+`exportAs` 이름을 지정하지 않은 지시문을 참조할 수는 없습니다.
 
-### Using template reference variables with queries
+### 쿼리와 함께 템플릿 참조 변수 사용하기
 
-In addition to using template variables to read values from another part of the same template, you can also use this style of variable declaration to "mark" an element for [component and directive queries](/guide/components/queries).
+같은 템플릿의 다른 부분에서 값을 읽기 위해 템플릿 변수를 사용하는 것 외에도, 이 스타일의 변수 선언을 사용하여 요소를 [컴포넌트 및 지시문 쿼리](/guide/components/queries)를 위해 "마킹"할 수 있습니다.
 
-When you want to query for a specific element in a template, you can declare a template variable on that element and then query for the element based on the variable name.
+템플릿에서 특정 요소를 쿼리하려는 경우, 해당 요소에 템플릿 변수를 선언한 후 변수 이름을 기준으로 그 요소를 쿼리할 수 있습니다.
 
 ```angular-html
- <input #description value="Original description">
+ <input #description value="원본 설명">
 ```
 
 ```angular-ts
 @Component({
   /* ... */,
-  template: `<input #description value="Original description">`,
+  template: `<input #description value="원본 설명">`,
 })
 export class AppComponent {
-  // Query for the input element based on the template variable name.
+  // 템플릿 변수 이름을 기준으로 입력 요소를 쿼리합니다.
   @ViewChild('description') input: ElementRef | undefined;
 }
 ```
 
-See [Referencing children with queries](/guide/components/queries) for more information on queries.
+쿼리에 대한 더 많은 정보는 [Referencing children with queries](/guide/components/queries)에서 확인하십시오.
\ No newline at end of file
diff --git a/adev/src/content/guide/templates/whitespace.md b/adev/src/content/guide/templates/whitespace.md
index a0ff607b2a33..94e2b1f36fb5 100644
--- a/adev/src/content/guide/templates/whitespace.md
+++ b/adev/src/content/guide/templates/whitespace.md
@@ -1,64 +1,64 @@
-# Whitespace in templates
+# 템플릿의 공백
 
-By default, Angular templates do not preserve whitespace that the framework considers unnecessary. This commonly occurs in two situations: whitespace between elements, and collapsible whitespace inside of text.
+기본적으로 Angular 템플릿은 프레임워크가 불필요하다고 간주하는 공백을 보존하지 않습니다. 이는 일반적으로 두 가지 상황에서 발생합니다: 요소 사이의 공백과 텍스트 내부의 축소 가능한 공백입니다.
 
-## Whitespace between elements
+## 요소 사이의 공백
 
-Most developers prefer to format their templates with newlines and indentation to make the template readable:
+대부분의 개발자는 템플릿을 읽기 쉽게 만들기 위해 줄 바꿈 및 들여쓰기를 사용하여 형식을 설정하는 것을 선호합니다:
 
 ```angular-html
 <section>
-  <h3>User profile</p>
+  <h3>사용자 프로필</h3>
   <label>
-    User name
+    사용자 이름
     <input>
   </label>
 </section>
 ```
 
-This template contains whitespace between all of the elements. The following snippet shows the same HTML with each whitespace character replaced with the hash (`#`) character to highlight how much whitespace is present:
+이 템플릿에는 모든 요소 사이에 공백이 포함되어 있습니다. 다음 스니펫은 공백 문자를 해시(`#`) 문자로 대체하여 공백이 얼마나 있는지를 강조합니다:
 
 ```angular-html
-<!-- Total Whitespace: 20 -->
-<section>###<h3>User profile</p>###<label>#####User name#####<input>###</label>#</section>
+<!-- 총 공백: 20 -->
+<section>###<h3>사용자 프로필</h3>###<label>#####사용자 이름#####<input>###</label>#</section>
 ```
 
-Preserving the whitespace as written in the template would result in many unnecessary [text nodes](https://developer.mozilla.org/en-US/docs/Web/API/Text) and increase page rendering overhead. By ignoring this whitespace between elements, Angular performs less work when rendering the template on the page, improving overall performance.
+템플릿에 작성된 대로 공백을 보존하면 많은 불필요한 [텍스트 노드](https://developer.mozilla.org/en-US/docs/Web/API/Text)가 생성되고 페이지 렌더링 오버헤드가 증가할 수 있습니다. Angular는 요소 사이의 공백을 무시함으로써 페이지에서 템플릿을 렌더링할 때 덜 작업을 수행하여 전체 성능을 향상시킵니다.
 
-## Collapsible whitespace inside text
+## 텍스트 내부의 축소 가능한 공백
 
-When your web browser renders HTML on a page, it collapses multiple consecutive whitespace characters to a single character:
+웹 브라우저가 페이지에서 HTML을 렌더링할 때 여러 개의 연속적인 공백 문자를 하나의 문자로 축소합니다:
 
 ```angular-html
-<!-- What it looks like in the template -->
-<p>Hello         world</p>
+<!-- 템플릿에서의 보이는 모습 -->
+<p>안녕하세요         세계</p>
 ```
 
-In this example, the browser displays only a single space between "Hello" and "world".
+이 예제에서 브라우저는 "안녕하세요"와 "세계" 사이에 단 하나의 공백만 표시합니다.
 
 ```angular-html
-<!-- What shows up in the browser -->
-<p>Hello world</p>
+<!-- 브라우저에 표시되는 모습 -->
+<p>안녕하세요 세계</p>
 ```
 
-See [How whitespace is handled by HTML, CSS, and in the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace) for more context on how this works.
+이 작동 방식에 대한 더 많은 맥락은 [HTML, CSS, DOM에서 공백 처리 방법](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace)을 참조하세요.
 
-Angular avoids sending these unnecessary whitespace characters to the browser in the first place by collapsing them to a single character when it compiles the template.
+Angular는 템플릿을 컴파일할 때 이러한 불필요한 공백 문자를 일단락하여 브라우저로 보내지 않도록 하여 성능을 높입니다.
 
-## Preserving whitespace
+## 공백 보존
 
-You can tell Angular to preserve whitespace in a template by specifying `preserveWhitespaces: true` in the `@Component` decorator for a template.
+Angular에게 템플릿에서 공백을 보존하도록 지시하려면 `@Component` 데코레이터에서 `preserveWhitespaces: true`를 지정하면 됩니다.
 
 ```angular-ts
 @Component({
   /* ... */,
   preserveWhitespaces: true,
   template: `
-    <p>Hello         world</p>
+    <p>안녕하세요         세계</p>
   `
 })
 ```
 
-Avoid setting this option unless absolutely necessary. Preserving whitespace can cause Angular to produce significantly more nodes while rendering, slowing down your application.
+이 옵션을 설정하는 것은 절대적으로 필요할 때만 피하세요. 공백을 보존하면 Angular가 렌더링 시에 상당히 더 많은 노드를 생성하게 되어 애플리케이션 속도를 저하할 수 있습니다.
 
-You can additionally use a special HTML entity unique to Angular, `&ngsp;`. This entity produces a single space character that's preserved in the compiled output.
+또한 Angular에 고유한 특수 HTML 엔티티 `&ngsp;`를 사용할 수 있습니다. 이 엔티티는 컴파일된 출력에서 보존되는 단일 공백 문자를 생성합니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/testing/attribute-directives.md b/adev/src/content/guide/testing/attribute-directives.md
index f605c75df4bb..55bf6702def7 100644
--- a/adev/src/content/guide/testing/attribute-directives.md
+++ b/adev/src/content/guide/testing/attribute-directives.md
@@ -1,53 +1,52 @@
+# 테스트 속성 지시자
 
-# Testing Attribute Directives
+*속성 지시자*는 요소, 구성 요소 또는 다른 지시자의 동작을 수정합니다. 
+그 이름은 지시자가 적용되는 방식을 반영합니다: 호스트 요소의 속성으로서.
 
-An *attribute directive* modifies the behavior of an element, component or another directive.
-Its name reflects the way the directive is applied: as an attribute on a host element.
+## `HighlightDirective` 테스트
 
-## Testing the `HighlightDirective`
-
-The sample application's `HighlightDirective` sets the background color of an element based on either a data bound color or a default color \(lightgray\).
-It also sets a custom property of the element \(`customProperty`\) to `true` for no reason other than to show that it can.
+샘플 애플리케이션의 `HighlightDirective`는 데이터로 바인딩된 색상 또는 기본 색상(연한 회색)에 따라 요소의 배경 색상을 설정합니다. 
+또한 요소의 사용자 정의 속성(`customProperty`)을 `true`로 설정하여 보여주기 위해 사용합니다.
 
 <docs-code header="app/shared/highlight.directive.ts" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.ts"/>
 
-It's used throughout the application, perhaps most simply in the `AboutComponent`:
+이는 애플리케이션 전역에서 사용되며, 아마도 가장 간단하게는 `AboutComponent`에서 사용됩니다:
 
 <docs-code header="app/about/about.component.ts" path="adev/src/content/examples/testing/src/app/about/about.component.ts"/>
 
-Testing the specific use of the `HighlightDirective` within the `AboutComponent` requires only the techniques explored in the ["Nested component tests"](guide/testing/components-scenarios#nested-component-tests) section of [Component testing scenarios](guide/testing/components-scenarios).
+`AboutComponent` 내에서 `HighlightDirective`의 특정 사용을 테스트하려면 [구성 요소 테스트 시나리오](guide/testing/components-scenarios) 섹션의 ["중첩 구성 요소 테스트"](guide/testing/components-scenarios#nested-component-tests)에서 탐구한 기술 만으로 충분합니다.
 
 <docs-code header="app/about/about.component.spec.ts" path="adev/src/content/examples/testing/src/app/about/about.component.spec.ts" visibleRegion="tests"/>
 
-However, testing a single use case is unlikely to explore the full range of a directive's capabilities.
-Finding and testing all components that use the directive is tedious, brittle, and almost as unlikely to afford full coverage.
+그러나 단일 사용 사례를 테스트하는 것은 지시자의 모든 기능을 탐구할 가능성이 낮습니다. 
+지시자를 사용하는 모든 구성 요소를 찾고 테스트하는 것은 지루하고, 취약하며, 전체 범위를 보장하기 어려운 작업입니다.
 
-*Class-only tests* might be helpful, but attribute directives like this one tend to manipulate the DOM.
-Isolated unit tests don't touch the DOM and, therefore, do not inspire confidence in the directive's efficacy.
+*클래스 전용 테스트*는 유용할 수 있지만, 이러한 속성 지시자는 DOM을 조작하는 경향이 있습니다. 
+격리된 단위 테스트는 DOM을 접촉하지 않으므로, 지시자의 효능에 대한 확신을 주지 않습니다.
 
-A better solution is to create an artificial test component that demonstrates all ways to apply the directive.
+더 나은 해결책은 지시자를 적용하는 모든 방법을 보여주는 인위적인 테스트 구성 요소를 만드는 것입니다.
 
 <docs-code header="app/shared/highlight.directive.spec.ts (TestComponent)" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts" visibleRegion="test-component"/>
 
 <img alt="HighlightDirective spec in action" src="assets/images/guide/testing/highlight-directive-spec.png">
 
-HELPFUL: The `<input>` case binds the `HighlightDirective` to the name of a color value in the input box.
-The initial value is the word "cyan" which should be the background color of the input box.
+도움말: `<input>` 케이스는 `HighlightDirective`를 입력 상자의 색상 값 이름에 바인딩합니다. 
+초기 값은 "cyan"라는 단어로, 이는 입력 상자의 배경 색상이 되어야 합니다.
 
-Here are some tests of this component:
+다음은 이 구성 요소에 대한 몇 가지 테스트입니다:
 
 <docs-code header="app/shared/highlight.directive.spec.ts (selected tests)" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts" visibleRegion="selected-tests"/>
 
-A few techniques are noteworthy:
+몇 가지 기술이 주목할 가치가 있습니다:
 
-* The `By.directive` predicate is a great way to get the elements that have this directive *when their element types are unknown*
-* The [`:not` pseudo-class](https://developer.mozilla.org/docs/Web/CSS/:not) in `By.css('h2:not([highlight])')` helps find `<h2>` elements that *do not* have the directive.
-    `By.css('*:not([highlight])')` finds *any* element that does not have the directive.
+* `By.directive` 조건자는 요소 유형이 알려지지 않았을 때 이 지시자가 있는 요소를 가져오는 좋은 방법입니다.
+* `By.css('h2:not([highlight])')`의 [`:not` 가상 클래스](https://developer.mozilla.org/docs/Web/CSS/:not)는 지시자가 없는 `<h2>` 요소를 찾는 데 도움이 됩니다. 
+    `By.css('*:not([highlight])')`는 지시자가 없는 *모든* 요소를 찾습니다.
 
-* `DebugElement.styles` affords access to element styles even in the absence of a real browser, thanks to the `DebugElement` abstraction.
-    But feel free to exploit the `nativeElement` when that seems easier or more clear than the abstraction.
+* `DebugElement.styles`는 실제 브라우저가 없을 때에도 요소 스타일에 접근할 수 있게 해주며, 이는 `DebugElement` 추상 덕분입니다. 
+    그러나 추상보다 더 쉽거나 명확해 보일 경우 `nativeElement`를 활용해도 좋습니다.
 
-* Angular adds a directive to the injector of the element to which it is applied.
-    The test for the default color uses the injector of the second `<h2>` to get its `HighlightDirective` instance and its `defaultColor`.
+* Angular는 지시자가 적용된 요소의 주입기에 지시자를 추가합니다. 
+    기본 색상을 위한 테스트는 두 번째 `<h2>`의 주입기를 사용하여 해당 `HighlightDirective` 인스턴스와 `defaultColor`를 가져옵니다.
 
-* `DebugElement.properties` affords access to the artificial custom property that is set by the directive
+* `DebugElement.properties`는 지시자에 의해 설정된 인위적인 사용자 정의 속성에 접근할 수 있게 해줍니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/testing/code-coverage.md b/adev/src/content/guide/testing/code-coverage.md
index 2ea638b71131..f23eac565831 100644
--- a/adev/src/content/guide/testing/code-coverage.md
+++ b/adev/src/content/guide/testing/code-coverage.md
@@ -1,19 +1,18 @@
+# 코드 테스트량 확인하기
 
-# Find out how much code you're testing
+Angular CLI는 단위 테스트를 실행하고 코드 커버리지 보고서를 생성할 수 있습니다.
+코드 커버리지 보고서는 단위 테스트가 제대로 테스트하지 않은 코드베이스의 부분을 보여줍니다.
 
-The Angular CLI can run unit tests and create code coverage reports.
-Code coverage reports show you any parts of your code base that might not be properly tested by your unit tests.
-
-To generate a coverage report run the following command in the root of your project.
+커버리지 보고서를 생성하려면 프로젝트 루트에서 다음 명령을 실행합니다.
 
 <docs-code language="shell">
 ng test --no-watch --code-coverage
 </docs-code>
 
-When the tests are complete, the command creates a new `/coverage` directory in the project.
-Open the `index.html` file to see a report with your source code and code coverage values.
+테스트가 완료되면 이 명령은 프로젝트 내에 새 `/coverage` 디렉토리를 생성합니다.
+`index.html` 파일을 열어 소스 코드와 코드 커버리지 값을 포함한 보고서를 확인하세요.
 
-If you want to create code-coverage reports every time you test, set the following option in the Angular CLI configuration file, `angular.json`:
+테스트할 때마다 코드 커버리지 보고서를 생성하려면 Angular CLI 구성 파일인 `angular.json`에 다음 옵션을 설정하세요:
 
 <docs-code language="json">
 "test": {
@@ -23,13 +22,13 @@ If you want to create code-coverage reports every time you test, set the followi
 }
 </docs-code>
 
-## Code coverage enforcement
+## 코드 커버리지 강제 실행
 
-The code coverage percentages let you estimate how much of your code is tested.
-If your team decides on a set minimum amount to be unit tested, enforce this minimum with the Angular CLI.
+코드 커버리지 비율은 테스트된 코드의 양을 추정하는 데 도움이 됩니다.
+팀이 설정한 최소 단위 테스트 양이 있다면, 이 최소값을 Angular CLI로 강제 적용하세요.
 
-For example, suppose you want the code base to have a minimum of 80% code coverage.
-To enable this, open the [Karma](https://karma-runner.github.io) test platform configuration file, `karma.conf.js`, and add the `check` property in the `coverageReporter:` key.
+예를 들어, 코드베이스에 최소 80% 코드 커버리지를 원한다고 가정합시다.
+이를 활성화하려면 [Karma](https://karma-runner.github.io) 테스트 플랫폼 구성 파일인 `karma.conf.js`를 열고 `coverageReporter:` 키에 `check` 속성을 추가하세요.
 
 <docs-code language="javascript">
 coverageReporter: {
@@ -50,8 +49,8 @@ coverageReporter: {
 }
 </docs-code>
 
-HELPFUL: Read more about creating and fine tuning Karma configuration in the [testing guide](guide/testing#configuration).
+도움말: [테스트 가이드](guide/testing#configuration)에서 Karma 구성 생성 및 조정에 대해 더 읽어보세요.
 
-The `check` property causes the tool to enforce a minimum of 80% code coverage when the unit tests are run in the project.
+`check` 속성은 프로젝트에서 단위 테스트가 실행될 때 최소 80% 코드 커버리지를 강제합니다.
 
-Read more on coverage configuration options in the [karma coverage documentation](https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md).
+코드 커버리지 구성 옵션에 대한 자세한 내용은 [karma coverage documentation](https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md)에서 확인하세요.
\ No newline at end of file
diff --git a/adev/src/content/guide/testing/component-harnesses-overview.md b/adev/src/content/guide/testing/component-harnesses-overview.md
index 0887ef536190..52bd02dfd82f 100644
--- a/adev/src/content/guide/testing/component-harnesses-overview.md
+++ b/adev/src/content/guide/testing/component-harnesses-overview.md
@@ -1,30 +1,30 @@
-# Component harnesses overview
+# 컴포넌트 하네스 개요
 
-A <strong>component harness</strong> is a class that allows tests to interact with components the way an end user does via a supported API. You can create test harnesses for any component, ranging from small reusable widgets to full pages.
+<strong>컴포넌트 하네스</strong>는 테스트가 엔드 유저가 지원하는 API를 통해 컴포넌트와 상호작용할 수 있도록 하는 클래스입니다. 작은 재사용 가능한 위젯에서 전체 페이지에 이르기까지 모든 컴포넌트에 대해 테스트 하네스를 생성할 수 있습니다.
 
-Harnesses offer several benefits:
-- They make tests less brittle by insulating themselves against implementation details of a component, such as its DOM structure
-- They make tests become more readable and easier to maintain
-- They can be used across multiple testing environments
+하네스는 여러 가지 이점을 제공합니다:
+- 컴포넌트의 DOM 구조와 같은 구현 세부 사항으로부터 격리되어 테스트를 덜 무르기하게 만듭니다.
+- 테스트가 더 읽기 쉽고 유지보수가 용이해집니다.
+- 여러 테스트 환경에서 사용될 수 있습니다.
 
 <docs-code language="typescript">
-// Example of test with a harness for a component called MyButtonComponent
+// MyButtonComponent용 하네스가 있는 테스트 예제
 it('should load button with exact text', async () => {
   const button = await loader.getHarness(MyButtonComponentHarness);
   expect(await button.getText()).toBe('Confirm');
 });
 </docs-code>
 
-Component harnesses are especially useful for shared UI widgets. Developers often write tests that depend on private implementation details of widgets, such as DOM structure and CSS classes. Those dependencies make tests brittle and hard to maintain. Harnesses offer an alternative— a supported API that interacts with the widget the same way an end-user does. Widget implementation changes now become less likely to break user tests. For example, [Angular Material](https://material.angular.io/components/categories) provides a test harness for each component in the library.
+컴포넌트 하네스는 공유 UI 위젯에 특히 유용합니다. 개발자는 종종 위젯의 DOM 구조 및 CSS 클래스와 같은 비공식적인 구현 세부 사항에 의존하는 테스트를 작성합니다. 이러한 의존성은 테스트를 무르기하고 유지보수를 어렵게 만듭니다. 하네스는 엔드 유저가 하는 것과 동일한 방식으로 위젯과 상호작용하는 지원되는 API를 제공합니다. 이제 위젯 구현 변경이 사용자 테스트를 깨뜨릴 가능성이 줄어듭니다. 예를 들어, [Angular Material](https://material.angular.io/components/categories)은 라이브러리의 각 컴포넌트에 대한 테스트 하네스를 제공합니다.
 
-Component harnesses support multiple testing environments. You can use the same harness implementation in both unit and end-to-end tests. Test authors only need to learn one API and component authors don't have to maintain separate unit and end-to-end test implementations.
+컴포넌트 하네스는 여러 테스트 환경을 지원합니다. 단위 테스트와 엔드 투 엔드 테스트 모두에서 동일한 하네스 구현을 사용할 수 있습니다. 테스트 저자는 하나의 API만 배우면 되고, 컴포넌트 저자는 별도의 단위 및 엔드 투 엔드 테스트 구현을 유지할 필요가 없습니다.
 
-Many developers can be categorized by one of the following developer type categories: test authors, component harness authors, and harness environment authors. Use the table below to find the most relevant section in this guide based on these categories:
+많은 개발자는 다음의 개발자 유형 카테고리 중 하나로 분류할 수 있습니다: 테스트 저자, 컴포넌트 하네스 저자, 그리고 하네스 환경 저자. 아래의 표를 사용하여 이러한 카테고리를 기반으로 이 안내서의 가장 관련성 높은 섹션을 찾으세요:
 
-| Developer Type              | Description           | Relevant Section      |
-|:---                         | :---                  | :---                  |
-| Test Authors                | Developers that use component harnesses written by someone else to test their application. For example, this could be an app developer who uses a third-party menu component and needs to interact with the menu in a unit test. | [Using component harnesses in tests](guide/testing/using-component-harnesses) |
-| Component harness authors   | Developers who maintain some reusable Angular components and want to create a test harness for its users to use in their tests. For example, an author of a third party Angular component library or a developer who maintains a set of common components for a large Angular application. | [Creating component harnesses for your components](guide/testing/creating-component-harnesses ) |
-| Harness environment authors | Developers who want to add support for using component harnesses in additional testing environments. For information on supported testing environments out-of-the-box, see the [test harness environments and loaders](guide/testing/using-component-harnesses#test-harness-environments-and-loaders). | [Adding support for additional testing environments](guide/testing/component-harnesses-testing-environments) |
+| 개발자 유형                | 설명                  | 관련 섹션              |
+|:---                       | :---                 | :---                  |
+| 테스트 저자                | 다른 사람이 작성한 컴포넌트 하네스를 사용하여 애플리케이션을 테스트하는 개발자. 예를 들어, 서드 파티 메뉴 컴포넌트를 사용하는 앱 개발자일 수 있으며, 단위 테스트에서 메뉴와 상호작용할 필요가 있습니다. | [테스트에서 컴포넌트 하네스 사용하기](guide/testing/using-component-harnesses) |
+| 컴포넌트 하네스 저자      | 재사용 가능한 Angular 컴포넌트를 유지 관리하고 테스트에 사용자들이 사용할 수 있는 테스트 하네스를 만들고자 하는 개발자. 예를 들어, 서드 파티 Angular 컴포넌트 라이브러리의 저자나 대규모 Angular 애플리케이션을 위한 공통 컴포넌트 집합을 유지 관리하는 개발자일 수 있습니다. | [컴포넌트를 위한 컴포넌트 하네스 만들기](guide/testing/creating-component-harnesses) |
+| 하네스 환경 저자          | 추가 테스트 환경에서 컴포넌트 하네스를 사용할 수 있도록 지원을 추가하고자 하는 개발자. 기본 제공되는 지원된 테스트 환경에 대한 정보는 [테스트 하네스 환경 및 로더](guide/testing/using-component-harnesses#test-harness-environments-and-loaders)를 참조하세요. | [추가 테스트 환경에 대한 지원 추가](guide/testing/component-harnesses-testing-environments) |
 
-For the full API reference, please see the [Angular CDK's component harness API reference page](https://material.angular.io/cdk/testing/api).
+전체 API 참조는 [Angular CDK의 컴포넌트 하네스 API 참조 페이지](https://material.angular.io/cdk/testing/api)를 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/guide/testing/component-harnesses-testing-environments.md b/adev/src/content/guide/testing/component-harnesses-testing-environments.md
index 9ada0c8eabfa..414fa7d634b7 100644
--- a/adev/src/content/guide/testing/component-harnesses-testing-environments.md
+++ b/adev/src/content/guide/testing/component-harnesses-testing-environments.md
@@ -1,59 +1,59 @@
-# Adding harness support for additional testing environments
+# 추가 테스트 환경에 대한 하네스 지원 추가하기
 
-## Before you start
+## 시작하기 전에
 
-Tip: This guide assumes you've already read the [component harnesses overview guide](guide/testing/component-harnesses-overview). Read that first if you're new to using component harnesses.
+팁: 이 가이드는 이미 [구성 요소 하네스 개요 가이드](guide/testing/component-harnesses-overview)를 읽었다고 가정합니다. 구성 요소 하네스를 사용하는 데 익숙하지 않은 경우 먼저 이를 읽어보세요.
 
-### When does adding support for a test environment make sense?
+### 테스트 환경에 대한 지원을 추가하는 것이 언제 의미가 있나요?
 
-To use component harnesses in the following environments, you can use Angular CDK's two built-in environments:
-- Unit tests
-- WebDriver end-to-end tests
+다음 환경에서 구성 요소 하네스를 사용하려면 Angular CDK의 두 가지 내장 환경을 사용할 수 있습니다:
+- 단위 테스트
+- WebDriver 종단 간 테스트
 
-To use a supported testing environment, read the [Creating harnesses for your components guide](guide/testing/creating-component-harnesses).
+지원되는 테스트 환경을 사용하려면 [소프트웨어 구성 요소 하네스 생성 가이드](guide/testing/creating-component-harnesses)를 읽어보세요.
 
-Otherwise, to add support for other environments, you need to define how to interact with a DOM element and how DOM interactions work in your environment. Continue reading to learn more.
+그렇지 않으면 다른 환경에 대한 지원을 추가하려면 DOM 요소와 상호작용하는 방법과 환경 내에서 DOM 상호작용이 작동하는 방법을 정의해야 합니다. 계속 읽어보아 알아보세요.
 
-### CDK Installation
+### CDK 설치
 
-The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
+[구성 요소 개발 키트 (CDK)](https://material.angular.io/cdk/categories)는 구성 요소를 구축하기 위한 동작 원시 집합입니다. 구성 요소 하네스를 사용하려면 먼저 npm에서 `@angular/cdk`를 설치해야 합니다. Angular CLI를 사용하여 터미널에서 이 작업을 수행할 수 있습니다:
 
 <docs-code language="shell">
   ng add @angular/cdk
 </docs-code>
 
-## Creating a `TestElement` implementation
+## `TestElement` 구현 만들기
 
-Every test environment must define a `TestElement` implementation. The `TestElement` interface serves as an environment-agnostic representation of a DOM element. It enables harnesses to interact with DOM elements regardless of the underlying environment. Because some environments don't support interacting with DOM elements synchronously (e.g. WebDriver), all `TestElement` methods are asynchronous, returning a `Promise` with the result of the operation.
+모든 테스트 환경은 `TestElement` 구현을 정의해야 합니다. `TestElement` 인터페이스는 DOM 요소의 환경 비종속적 표현으로 사용됩니다. 이는 하네스가 기본 환경에 관계없이 DOM 요소와 상호작용할 수 있도록 합니다. 일부 환경은 동기적으로 DOM 요소와 상호작용하는 것을 지원하지 않기 때문에 (예: WebDriver), 모든 `TestElement` 메서드는 비동기적이며 작업의 결과를 가진 `Promise`를 반환합니다.
 
-`TestElement` offers a number of methods to interact with the underlying DOM such as `blur()`, `click()`, `getAttribute()`, and more. See the [TestElement API reference page](https://material.angular.io/cdk/testing/api#TestElement) for the full list of methods.
+`TestElement`는 `blur()`, `click()`, `getAttribute()` 등과 같은 기본 DOM과 상호작용할 수 있는 여러 메서드를 제공합니다. 전체 메서드 목록은 [TestElement API 참조 페이지](https://material.angular.io/cdk/testing/api#TestElement)를 참조하세요.
 
-The `TestElement` interface consists largely of methods that resemble methods available on `HTMLElement`. Similar methods exist in most test environments, which makes implementing the methods fairly straightforward. However, one important difference to note when implementing the `sendKeys` method, is that the key codes in the `TestKey` enum likely differ from the key codes used in the test environment. Environment authors should maintain a mapping from `TestKey` codes to the codes used in the particular testing environment.
+`TestElement` 인터페이스는 주로 `HTMLElement`에서 사용할 수 있는 메서드와 유사한 메서드로 구성됩니다. 대부분의 테스트 환경에 유사한 메서드가 존재하므로 메서드를 구현하는 것은 비교적 간단합니다. 그러나 `sendKeys` 메서드를 구현할 때 주목해야 할 하나의 중요한 차이점은 `TestKey` 열거형의 키 코드가 해당 테스트 환경에서 사용되는 키 코드와 다를 수 있다는 것입니다. 환경 작성자는 `TestKey` 코드와 특정 테스트 환경에서 사용되는 코드 간의 매핑을 유지해야 합니다.
 
-The [UnitTestElement](https://github.com/angular/components/blob/main/src/cdk/testing/testbed/unit-test-element.ts#L33) and [SeleniumWebDriverElement](https://github.com/angular/components/blob/main/src/cdk/testing/selenium-webdriver/selenium-webdriver-keys.ts#L16) implementations in Angular CDK serve as good examples of implementations of this interface.
+Angular CDK의 [UnitTestElement](https://github.com/angular/components/blob/main/src/cdk/testing/testbed/unit-test-element.ts#L33) 및 [SeleniumWebDriverElement](https://github.com/angular/components/blob/main/src/cdk/testing/selenium-webdriver/selenium-webdriver-keys.ts#L16) 구현은 이 인터페이스의 좋은 구현 예시입니다.
 
-## Creating a `HarnessEnvironment` implementation
-Test authors use `HarnessEnvironment` to create component harness instances for use in tests. `HarnessEnvironment` is an abstract class that must be extended to create a concrete subclass for the new environment. When supporting a new test environment, create a `HarnessEnvironment` subclass that adds concrete implementations for all abstract members.
+## `HarnessEnvironment` 구현 만들기
+테스트 작성자는 `HarnessEnvironment`를 사용하여 테스트에서 사용할 구성 요소 하네스 인스턴스를 생성합니다. `HarnessEnvironment`는 새로운 환경에 대한 구체적인 하위 클래스를 만들기 위해 확장해야 하는 추상 클래스입니다. 새로운 테스트 환경을 지원할 때 모든 추상 멤버에 대한 구체적인 구현을 추가하는 `HarnessEnvironment` 하위 클래스를 만듭니다.
 
-`HarnessEnvironment` has a generic type parameter: `HarnessEnvironment<E>`. This parameter, `E`, represents the raw element type of the environment. For example, this parameter is Element for unit test environments.
+`HarnessEnvironment`는 제네릭 유형 매개변수: `HarnessEnvironment<E>`를 가지고 있습니다. 이 매개변수 `E`는 환경의 원시 요소 유형을 나타냅니다. 예를 들어, 이 매개변수는 단위 테스트 환경에는 Element입니다.
 
-The following are the abstract methods that must be implemented:
+다음은 구현해야 할 추상 메서드입니다:
 
-| Method                                                        | Description           |
-|:---                                                           | :---                  |
-| `abstract getDocumentRoot(): E`                               | Gets the root element for the environment (e.g. `document.body`). |
-| `abstract createTestElement(element: E): TestElement`         | Creates a `TestElement` for the given raw element. |
-| `abstract createEnvironment(element: E): HarnessEnvironment`  | Creates a `HarnessEnvironment` rooted at the given raw element. |
-| `abstract getAllRawElements(selector: string): Promise<E[]>`  | Gets all of the raw elements under the root element of the environment matching the given selector. |
-| `abstract forceStabilize(): Promise<void>`                    | Gets a `Promise` that resolves when the `NgZone` is stable. Additionally, if applicable, tells `NgZone` to stabilize (e.g. calling `flush()` in a `fakeAsync` test). |
-| `abstract waitForTasksOutsideAngular(): Promise<void>`        | Gets a `Promise` that resolves when the parent zone of `NgZone` is stable. |
+| 메서드                                                        | 설명               |
+|:---                                                           | :---               |
+| `abstract getDocumentRoot(): E`                               | 환경의 루트 요소를 가져옵니다 (예: `document.body`). |
+| `abstract createTestElement(element: E): TestElement`         | 주어진 원시 요소에 대한 `TestElement`를 생성합니다. |
+| `abstract createEnvironment(element: E): HarnessEnvironment`  | 주어진 원시 요소를 기반으로 한 `HarnessEnvironment`를 생성합니다. |
+| `abstract getAllRawElements(selector: string): Promise<E[]>`  | 주어진 선택자와 일치하는 환경의 루트 요소 아래의 모든 원시 요소를 가져옵니다. |
+| `abstract forceStabilize(): Promise<void>`                    | `NgZone`이 안정적일 때 해결되는 `Promise`를 가져옵니다. 또한, 해당되는 경우 `NgZone`에 안정화하도록 지시합니다 (예: `fakeAsync` 테스트에서 `flush()`를 호출). |
+| `abstract waitForTasksOutsideAngular(): Promise<void>`        | `NgZone`의 상위 영역이 안정적일 때 해결되는 `Promise`를 가져옵니다. |
 
-In addition to implementing the missing methods, this class should provide a way for test authors to get `ComponentHarness` instances. You should define a protected constructor and provide a static method called `loader` that returns a `HarnessLoader` instance. This allows test authors to write code like: `SomeHarnessEnvironment.loader().getHarness(...)`. Depending on the needs of the particular environment, the class may provide several different static methods or require arguments to be passed. (e.g. the `loader` method on `TestbedHarnessEnvironment` takes a `ComponentFixture`, and the class provides additional static methods called `documentRootLoader` and `harnessForFixture`).
+누락된 메서드를 구현하는 것 외에도 이 클래스는 테스트 작성자가 `ComponentHarness` 인스턴스를 얻을 수 있는 방법을 제공해야 합니다. 보호된 생성자를 정의하고 `HarnessLoader` 인스턴스를 반환하는 `loader`라는 정적 메서드를 제공해야 합니다. 이를 통해 테스트 작성자는 `SomeHarnessEnvironment.loader().getHarness(...)`와 같은 코드를 작성할 수 있습니다. 특정 환경의 필요에 따라 클래스는 여러 다른 정적 메서드를 제공하거나 인수를 요구할 수 있습니다. (예: `TestbedHarnessEnvironment`의 `loader` 메서드는 `ComponentFixture`를 받고, 클래스는 `documentRootLoader` 및 `harnessForFixture`라는 추가 정적 메서드를 제공합니다).
 
-The [`TestbedHarnessEnvironment`](https://github.com/angular/components/blob/main/src/cdk/testing/testbed/testbed-harness-environment.ts#L89) and [SeleniumWebDriverHarnessEnvironment](https://github.com/angular/components/blob/main/src/cdk/testing/selenium-webdriver/selenium-web-driver-harness-environment.ts#L71) implementations in Angular CDK serve as good examples of implementations of this interface.
+Angular CDK의 [`TestbedHarnessEnvironment`](https://github.com/angular/components/blob/main/src/cdk/testing/testbed/testbed-harness-environment.ts#L89) 및 [SeleniumWebDriverHarnessEnvironment](https://github.com/angular/components/blob/main/src/cdk/testing/selenium-webdriver/selenium-web-driver-harness-environment.ts#L71) 구현은 이 인터페이스의 좋은 구현 예시입니다.
 
-## Handling auto change detection
-In order to support the `manualChangeDetection` and parallel APIs, your environment should install a handler for the auto change detection status.
+## 자동 변경 감지 처리
+`manualChangeDetection` 및 병렬 API를 지원하기 위해 환경은 자동 변경 감지 상태에 대한 핸들러를 설치해야 합니다.
 
-When your environment wants to start handling the auto change detection status it can call `handleAutoChangeDetectionStatus(handler)`. The handler function will receive a `AutoChangeDetectionStatus` which has two properties `isDisabled` and `onDetectChangesNow()`. See the [AutoChangeDetectionStatus API reference page](https://material.angular.io/cdk/testing/api#AutoChangeDetectionStatus) for more information.
-If your environment wants to stop handling auto change detection status it can call `stopHandlingAutoChangeDetectionStatus()`.
+환경이 자동 변경 감지 상태를 처리하기 시작하고 싶으면 `handleAutoChangeDetectionStatus(handler)`를 호출할 수 있습니다. 핸들러 함수는 `isDisabled` 및 `onDetectChangesNow()`라는 두 가지 속성이 있는 `AutoChangeDetectionStatus`를 받습니다. 더 많은 정보는 [AutoChangeDetectionStatus API 참조 페이지](https://material.angular.io/cdk/testing/api#AutoChangeDetectionStatus)를 참조하세요.
+환경이 자동 변경 감지 상태 처리를 중지하고자 할 경우 `stopHandlingAutoChangeDetectionStatus()`를 호출할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/testing/components-basics.md b/adev/src/content/guide/testing/components-basics.md
index e22f6081aba0..048494dbd6ab 100644
--- a/adev/src/content/guide/testing/components-basics.md
+++ b/adev/src/content/guide/testing/components-basics.md
@@ -1,38 +1,38 @@
-# Basics of testing components
+# 컴포넌트 테스트의 기초
 
-A component, unlike all other parts of an Angular application, combines an HTML template and a TypeScript class.
-The component truly is the template and the class *working together*.
-To adequately test a component, you should test that they work together as intended.
+컴포넌트는 Angular 애플리케이션의 다른 모든 부분과 달리 HTML 템플릿과 TypeScript 클래스를 결합합니다.  
+컴포넌트는 실제로 템플릿과 클래스가 *협력하여* 작동하는 것입니다.  
+컴포넌트를 적절하게 테스트하려면 이들이 의도한 대로 함께 작동하는지를 테스트해야 합니다.
 
-Such tests require creating the component's host element in the browser DOM, as Angular does, and investigating the component class's interaction with the DOM as described by its template.
+이러한 테스트는 Angular가 수행하는 것처럼 브라우저 DOM에서 컴포넌트의 호스트 요소를 생성하고, 템플릿에 의해 설명된 DOM과의 컴포넌트 클래스의 상호작용을 조사해야 합니다.
 
-The Angular `TestBed` facilitates this kind of testing as you'll see in the following sections.
-But in many cases, *testing the component class alone*, without DOM involvement, can validate much of the component's behavior in a straightforward, more obvious way.
+Angular의 `TestBed`는 다음 섹션에서 보게 될 이러한 종류의 테스트를 용이하게 합니다.  
+그러나 많은 경우 *DOM 참여 없이 컴포넌트 클래스를 단독으로 테스트하는 것*이 컴포넌트의 행동을 보다 직관적이고 명확하게 검증할 수 있습니다.
 
-## Component DOM testing
+## 컴포넌트 DOM 테스트
 
-A component is more than just its class.
-A component interacts with the DOM and with other components.
-Classes alone cannot tell you if the component is going to render properly, respond to user input and gestures, or integrate with its parent and child components.
+컴포넌트는 단순히 클래스만이 아닙니다.  
+컴포넌트는 DOM 및 다른 컴포넌트와 상호작용합니다.  
+클래스만으로는 컴포넌트가 제대로 렌더링될지, 사용자 입력 및 제스처에 반응할지, 부모 및 자식 컴포넌트와 통합될지를 알 수 없습니다.
 
-* Is `Lightswitch.clicked()` bound to anything such that the user can invoke it?
-* Is the `Lightswitch.message` displayed?
-* Can the user actually select the hero displayed by `DashboardHeroComponent`?
-* Is the hero name displayed as expected \(such as uppercase\)?
-* Is the welcome message displayed by the template of `WelcomeComponent`?
+* `Lightswitch.clicked()`가 사용자가 호출할 수 있도록 바인딩되어 있습니까?  
+* `Lightswitch.message`가 표시됩니까?  
+* 사용자가 실제로 `DashboardHeroComponent`에서 표시되는 영웅을 선택할 수 있습니까?  
+* 영웅 이름이 예상대로 표시됩니까 (예: 대문자)?  
+* `WelcomeComponent`의 템플릿에서 환영 메시지가 표시됩니까?  
 
-These might not be troubling questions for the preceding simple components illustrated.
-But many components have complex interactions with the DOM elements described in their templates, causing HTML to appear and disappear as the component state changes.
+이 질문들은 이전의 간단한 컴포넌트들에는 큰 문제가 아닐 수 있습니다.  
+그러나 많은 컴포넌트는 상태가 변경됨에 따라 HTML이 나타나고 사라지는 복잡한 DOM 요소와 상호작용합니다.
 
-To answer these kinds of questions, you have to create the DOM elements associated with the components, you must examine the DOM to confirm that component state displays properly at the appropriate times, and you must simulate user interaction with the screen to determine whether those interactions cause the component to behave as expected.
+이러한 질문에 답하기 위해서는 컴포넌트와 연관된 DOM 요소를 생성해야 하고, 컴포넌트 상태가 적절한 시기에 올바르게 표시되는지 확인하기 위해 DOM을 검사해야 하며, 화면과 사용자 상호작용을 시뮬레이션하여 이러한 상호작용이 컴포넌트를 예상한 대로 동작하게 하는지를 확인해야 합니다.
 
-To write these kinds of test, you'll use additional features of the `TestBed` as well as other testing helpers.
+이러한 종류의 테스트를 작성하려면 `TestBed`의 추가 기능과 기타 테스트 도우미를 사용해야 합니다.
 
-### CLI-generated tests
+### CLI로 생성된 테스트
 
-The CLI creates an initial test file for you by default when you ask it to generate a new component.
+CLI는 새로운 컴포넌트를 생성하라고 요청할 때 기본적으로 초기 테스트 파일을 생성합니다.
 
-For example, the following CLI command generates a `BannerComponent` in the `app/banner` folder \(with inline template and styles\):
+예를 들어, 다음 CLI 명령은 `app/banner` 폴더에 `BannerComponent`를 생성합니다(인라인 템플릿 및 스타일 포함):
 
 <docs-code language="shell">
 
@@ -40,142 +40,142 @@ ng generate component banner --inline-template --inline-style --module app
 
 </docs-code>
 
-It also generates an initial test file for the component, `banner-external.component.spec.ts`, that looks like this:
+또한 해당 컴포넌트에 대한 초기 테스트 파일인 `banner-external.component.spec.ts`도 생성되며, 다음과 같습니다:
 
 <docs-code header="app/banner/banner-external.component.spec.ts (initial)" path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v1"/>
 
-HELPFUL: Because `compileComponents` is asynchronous, it uses the [`waitForAsync`](api/core/testing/waitForAsync) utility function imported from `@angular/core/testing`.
+도움말: `compileComponents`는 비동기이므로 `@angular/core/testing`에서 가져온 [`waitForAsync`](api/core/testing/waitForAsync) 유틸리티 함수를 사용합니다.
 
-Refer to the [waitForAsync](guide/testing/components-scenarios#waitForAsync) section for more details.
+자세한 내용은 [waitForAsync](guide/testing/components-scenarios#waitForAsync) 섹션을 참조하십시오.
 
-### Reduce the setup
+### 설정 줄이기
 
-Only the last three lines of this file actually test the component and all they do is assert that Angular can create the component.
+이 파일의 마지막 세 줄만 실제로 컴포넌트를 테스트하며, Angular가 컴포넌트를 생성할 수 있음을 단언하는 것만 합니다.
 
-The rest of the file is boilerplate setup code anticipating more advanced tests that *might* become necessary if the component evolves into something substantial.
+파일의 나머지 부분은 컴포넌트가 본질적으로 발전하게 될 경우 더 고급 테스트를 예상하는 보일러플레이트 설정 코드입니다.
 
-You'll learn about these advanced test features in the following sections.
-For now, you can radically reduce this test file to a more manageable size:
+이러한 고급 테스트 기능에 대해서는 다음 섹션에서 배울 수 있습니다.  
+현재는 이 테스트 파일을 더 관리하기 쉬운 크기로 극적으로 줄일 수 있습니다:
 
 <docs-code header="app/banner/banner-initial.component.spec.ts (minimal)" path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v2"/>
 
-In this example, the metadata object passed to `TestBed.configureTestingModule` simply declares `BannerComponent`, the component to test.
+이 예제에서 `TestBed.configureTestingModule`에 전달된 메타데이터 객체는 단순히 테스트할 컴포넌트인 `BannerComponent`를 선언합니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="configureTestingModule"/>
 
-HELPFUL: There's no need to declare or import anything else.
-The default test module is pre-configured with something like the `BrowserModule` from `@angular/platform-browser`.
+도움말: 다른 항목을 선언하거나 가져올 필요가 없습니다.  
+기본 테스트 모듈은 `@angular/platform-browser`의 `BrowserModule`과 유사하게 사전 구성되어 있습니다.
 
-Later you'll call `TestBed.configureTestingModule()` with imports, providers, and more declarations to suit your testing needs.
-Optional `override` methods can further fine-tune aspects of the configuration.
+이후에는 테스트 요구에 맞게 가져오고 제공자 및 더 많은 선언을 할 수 있도록 `TestBed.configureTestingModule()`을 호출할 것입니다.  
+선택적 `override` 메서드는 구성의 여러 측면을 추가로 세부 조정할 수 있습니다.
 
 ### `createComponent()`
 
-After configuring `TestBed`, you call its `createComponent()` method.
+`TestBed`를 구성한 후, `createComponent()` 메서드를 호출합니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="createComponent"/>
 
-`TestBed.createComponent()` creates an instance of the `BannerComponent`, adds a corresponding element to the test-runner DOM, and returns a [`ComponentFixture`](#componentfixture).
+`TestBed.createComponent()`는 `BannerComponent`의 인스턴스를 생성하고, 테스트 실행기 DOM에 해당 요소를 추가하며, [`ComponentFixture`](#componentfixture)를 반환합니다.
 
-IMPORTANT: Do not re-configure `TestBed` after calling `createComponent`.
+중요: `createComponent`를 호출한 후에는 `TestBed`를 재구성하지 마십시오.
 
-The `createComponent` method freezes the current `TestBed` definition, closing it to further configuration.
+`createComponent` 메서드는 현재 `TestBed` 정의를 동결하여 추가 구성을 종료합니다.
 
-You cannot call any more `TestBed` configuration methods, not `configureTestingModule()`, nor `get()`, nor any of the `override...` methods.
-If you try, `TestBed` throws an error.
+이후 더 이상 `TestBed` 구성 메서드를 호출할 수 없으며 `configureTestingModule()`, `get()` 또는 `override...` 메서드도 호출할 수 없습니다.  
+만약 호출하면 `TestBed`가 오류를 발생시킵니다.
 
 ### `ComponentFixture`
 
-The [ComponentFixture](api/core/testing/ComponentFixture) is a test harness for interacting with the created component and its corresponding element.
+[ComponentFixture](api/core/testing/ComponentFixture)는 생성된 컴포넌트와 해당 요소와 상호작용하기 위한 테스트 하네스입니다.
 
-Access the component instance through the fixture and confirm it exists with a Jasmine expectation:
+픽스처를 통해 컴포넌트 인스턴스에 접근하고 존재하는지 Jasmine 기대값으로 확인합니다:
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="componentInstance"/>
 
 ### `beforeEach()`
 
-You will add more tests as this component evolves.
-Rather than duplicate the `TestBed` configuration for each test, you refactor to pull the setup into a Jasmine `beforeEach()` and some supporting variables:
+이 컴포넌트가 발전함에 따라 더 많은 테스트를 추가할 것입니다.  
+각 테스트에 대해 `TestBed` 구성을 중복하는 대신, Jasmine `beforeEach()`와 몇 가지 지원 변수를 통해 설정을 리팩토링합니다:
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v3"/>
 
-Now add a test that gets the component's element from `fixture.nativeElement` and looks for the expected text.
+이제 `fixture.nativeElement`에서 컴포넌트의 요소를 가져와서 예상되는 텍스트를 찾는 테스트를 추가합니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v4-test-2"/>
 
 ### `nativeElement`
 
-The value of `ComponentFixture.nativeElement` has the `any` type.
-Later you'll encounter the `DebugElement.nativeElement` and it too has the `any` type.
+`ComponentFixture.nativeElement`의 값은 `any` 타입입니다.  
+나중에 `DebugElement.nativeElement`를 접하게 될 것이며, 이것도 `any` 타입입니다.
 
-Angular can't know at compile time what kind of HTML element the `nativeElement` is or if it even is an HTML element.
-The application might be running on a *non-browser platform*, such as the server or a [Web Worker](https://developer.mozilla.org/docs/Web/API/Web_Workers_API), where the element might have a diminished API or not exist at all.
+Angular는 컴파일 타임에 `nativeElement`가 어떤 종류의 HTML 요소인지 또는 HTML 요소인지조차 알 수 없습니다.  
+애플리케이션은 서버나 [Web Worker](https://developer.mozilla.org/docs/Web/API/Web_Workers_API)와 같은 *비브라우저 플랫폼*에서 실행되고 있을 수 있으며, 이곳에서는 요소의 API가 제한되거나 아예 존재하지 않을 수 있습니다.
 
-The tests in this guide are designed to run in a browser so a `nativeElement` value will always be an `HTMLElement` or one of its derived classes.
+이 가이드의 테스트는 브라우저에서 실행되도록 설계되었으므로 `nativeElement` 값은 항상 `HTMLElement` 또는 그 파생 클래스 중 하나입니다.
 
-Knowing that it is an `HTMLElement` of some sort, use the standard HTML `querySelector` to dive deeper into the element tree.
+어떤 종류의 `HTMLElement`인지 알기 때문에, 표준 HTML `querySelector`를 사용하여 요소 트리를 더 깊이 파고들 수 있습니다.
 
-Here's another test that calls `HTMLElement.querySelector` to get the paragraph element and look for the banner text:
+여기에는 `HTMLElement.querySelector`를 호출하여 단락 요소를 가져오고 배너 텍스트를 찾는 또 다른 테스트가 있습니다:
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v4-test-3"/>
 
 ### `DebugElement`
 
-The Angular *fixture* provides the component's element directly through the `fixture.nativeElement`.
+Angular *fixture*는 `fixture.nativeElement`를 통해 컴포넌트의 요소를 직접 제공합니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="nativeElement"/>
 
-This is actually a convenience method, implemented as `fixture.debugElement.nativeElement`.
+이는 실제로 `fixture.debugElement.nativeElement`로 구현된 편의 메서드입니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="debugElement-nativeElement"/>
 
-There's a good reason for this circuitous path to the element.
+이러한 복잡한 경로로 요소에 접근하는 데는 좋은 이유가 있습니다.
 
-The properties of the `nativeElement` depend upon the runtime environment.
-You could be running these tests on a *non-browser* platform that doesn't have a DOM or whose DOM-emulation doesn't support the full `HTMLElement` API.
+`nativeElement`의 속성은 런타임 환경에 따라 달라집니다.  
+이 테스트를 *비브라우저* 플랫폼에서 실행하고 있다면 DOM이 없거나 DOM 에뮬레이션이 전체 `HTMLElement` API를 지원하지 않을 수 있습니다.
 
-Angular relies on the `DebugElement` abstraction to work safely across *all supported platforms*.
-Instead of creating an HTML element tree, Angular creates a `DebugElement` tree that wraps the *native elements* for the runtime platform.
-The `nativeElement` property unwraps the `DebugElement` and returns the platform-specific element object.
+Angular는 모든 지원 플랫폼에서 안전하게 작동하기 위해 `DebugElement` 추상화를 신뢰합니다.  
+HTML 요소 트리를 만드는 대신, Angular는 런타임 플랫폼에 대한 *네이티브 요소*를 래핑하는 `DebugElement` 트리를 생성합니다.  
+`nativeElement` 속성은 `DebugElement`의 래핑을 풀고 플랫폼별 요소 객체를 반환합니다.
 
-Because the sample tests for this guide are designed to run only in a browser, a `nativeElement` in these tests is always an `HTMLElement` whose familiar methods and properties you can explore within a test.
+이 가이드의 샘플 테스트는 브라우저에서만 실행되도록 설계되었기 때문에, 이 테스트의 `nativeElement`는 항상 테스트 내에서 탐색할 수 있는 친숙한 메서드와 속성을 가진 `HTMLElement`입니다.
 
-Here's the previous test, re-implemented with `fixture.debugElement.nativeElement`:
+다음은 `fixture.debugElement.nativeElement`로 다시 구현된 이전 테스트입니다:
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v4-test-4"/>
 
-The `DebugElement` has other methods and properties that are useful in tests, as you'll see elsewhere in this guide.
+`DebugElement`에는 테스트에서 유용한 다른 메서드와 속성도 있으며, 이 가이드의 다른 곳에서 살펴볼 수 있습니다.
 
-You import the `DebugElement` symbol from the Angular core library.
+`DebugElement` 기호를 Angular 핵심 라이브러리에서 가져옵니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="import-debug-element"/>
 
 ### `By.css()`
 
-Although the tests in this guide all run in the browser, some applications might run on a different platform at least some of the time.
+이 가이드의 모든 테스트는 브라우저에서 실행되지만, 일부 애플리케이션은 적어도 일부 시간에 다른 플랫폼에서 실행될 수 있습니다.
 
-For example, the component might render first on the server as part of a strategy to make the application launch faster on poorly connected devices.
-The server-side renderer might not support the full HTML element API.
-If it doesn't support `querySelector`, the previous test could fail.
+예를 들어, 이 컴포넌트는 애플리케이션을 느린 연결 장치에서 더 빠르게 시작할 수 있도록 서버에서 먼저 렌더링될 수 있습니다.  
+서버 측 렌더러는 전체 HTML 요소 API를 지원하지 않을 수 있습니다.  
+만약 `querySelector`를 지원하지 않는다면 이전 테스트는 실패할 수 있습니다.
 
-The `DebugElement` offers query methods that work for all supported platforms.
-These query methods take a *predicate* function that returns `true` when a node in the `DebugElement` tree matches the selection criteria.
+`DebugElement`는 모든 지원 플랫폼에서 작동하는 쿼리 메서드를 제공합니다.  
+이러한 쿼리 메서드는 `DebugElement` 트리에서 노드가 선택 기준과 일치할 때 `true`를 반환하는 *프레디케이트* 함수를 받습니다.
 
-You create a *predicate* with the help of a `By` class imported from a library for the runtime platform.
-Here's the `By` import for the browser platform:
+런타임 플랫폼을 위한 라이브러리에서 가져온 `By` 클래스를 도움으로 *프레디케이트*를 생성합니다.  
+다음은 브라우저 플랫폼에 대한 `By` 가져오기입니다:
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="import-by"/>
 
-The following example re-implements the previous test with `DebugElement.query()` and the browser's `By.css` method.
+다음 예제는 이전 테스트를 `DebugElement.query()`와 브라우저의 `By.css` 메서드로 다시 구현합니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v4-test-5"/>
 
-Some noteworthy observations:
+주목할 만한 점은 다음과 같습니다:
 
-* The `By.css()` static method selects `DebugElement` nodes with a [standard CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors 'CSS selectors').
-* The query returns a `DebugElement` for the paragraph.
-* You must unwrap that result to get the paragraph element.
+* `By.css()` 정적 메서드는 [표준 CSS 선택자](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors 'CSS 선택자')로 `DebugElement` 노드를 선택합니다.  
+* 쿼리는 단락에 대한 `DebugElement`를 반환합니다.  
+* 결과를 풀어내야 단락 요소를 얻을 수 있습니다.
 
-When you're filtering by CSS selector and only testing properties of a browser's *native element*, the `By.css` approach might be overkill.
+CSS 선택자로 필터링하고 브라우저의 *네이티브 요소*의 속성만 테스트하는 경우 `By.css` 접근 방식이 과할 수 있습니다.
 
-It's often more straightforward and clear to filter with a standard `HTMLElement` method such as `querySelector()` or `querySelectorAll()`.
+종종 `querySelector()` 또는 `querySelectorAll()`과 같은 표준 `HTMLElement` 메서드로 필터링하는 것이 명확하고 간단할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/testing/components-scenarios.md b/adev/src/content/guide/testing/components-scenarios.md
index abdcd6d8df59..a29be23304c4 100644
--- a/adev/src/content/guide/testing/components-scenarios.md
+++ b/adev/src/content/guide/testing/components-scenarios.md
@@ -1,33 +1,33 @@
-# Component testing scenarios
+# 컴포넌트 테스트 시나리오
 
-This guide explores common component testing use cases.
+이 가이드는 일반적인 컴포넌트 테스트 사용 사례를 탐구합니다.
 
-## Component binding
+## 컴포넌트 바인딩
 
-In the example application, the `BannerComponent` presents static title text in the HTML template.
+예제 애플리케이션에서 `BannerComponent`는 HTML 템플릿에서 정적 제목 텍스트를 표시합니다.
 
-After a few changes, the `BannerComponent` presents a dynamic title by binding to the component's `title` property like this.
+몇 가지 변경 후, `BannerComponent`는 컴포넌트의 `title` 속성에 바인딩하여 동적 제목을 표시합니다.
 
 <docs-code header="app/banner/banner.component.ts" path="adev/src/content/examples/testing/src/app/banner/banner.component.ts" visibleRegion="component"/>
 
-As minimal as this is, you decide to add a test to confirm that component actually displays the right content where you think it should.
+이것은 최소한으로 보일 수 있지만, 컴포넌트가 실제로 올바른 내용을 표시하는지 확인하기 위해 테스트를 추가하기로 결정합니다.
 
-### Query for the `<h1>`
+### `<h1>` 쿼리
 
-You'll write a sequence of tests that inspect the value of the `<h1>` element that wraps the *title* property interpolation binding.
+여러분은 *title* 속성 보간 바인딩을 감싸는 `<h1>` 요소의 값을 검사하는 테스트 시퀀스를 작성할 것입니다.
 
-You update the `beforeEach` to find that element with a standard HTML `querySelector` and assign it to the `h1` variable.
+`beforeEach`를 업데이트하여 표준 HTML `querySelector`로 해당 요소를 찾고 이를 `h1` 변수에 할당합니다.
 
 <docs-code header="app/banner/banner.component.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="setup"/>
 
-### `createComponent()` does not bind data
+### `createComponent()`는 데이터를 바인딩하지 않음
 
-For your first test you'd like to see that the screen displays the default `title`.
-Your instinct is to write a test that immediately inspects the `<h1>` like this:
+첫 번째 테스트에서 화면에 기본 `title`이 표시되는지 확인하고 싶습니다.
+여러분의 본능은 이렇게 `<h1>`을 즉시 검사하는 테스트를 작성하는 것입니다:
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="expect-h1-default-v1"/>
 
-*That test fails* with the message:
+*해당 테스트는 실패합니다*라는 메시지와 함께:
 
 <docs-code language="javascript">
 
@@ -35,86 +35,83 @@ expected '' to contain 'Test Tour of Heroes'.
 
 </docs-code>
 
-Binding happens when Angular performs **change detection**.
+바인딩은 Angular가 **변경 감지**를 수행할 때 발생합니다.
 
-In production, change detection kicks in automatically when Angular creates a component or the user enters a keystroke, for example.
+프로덕션에서 변경 감지는 Angular가 컴포넌트를 생성하거나 사용자가 키를 입력할 때 자동으로 시작됩니다.
 
-The `TestBed.createComponent` does not trigger change detection by default; a fact confirmed in the revised test:
+`TestBed.createComponent`는 기본적으로 변경 감지를 트리거하지 않습니다; 이는 수정된 테스트에서 확인됩니다:
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="test-w-o-detect-changes"/>
 
 ### `detectChanges()`
 
-You can tell the `TestBed` to perform data binding by calling `fixture.detectChanges()`.
-Only then does the `<h1>` have the expected title.
+`fixture.detectChanges()`를 호출하여 `TestBed`에 데이터 바인딩을 수행하도록 지시할 수 있습니다.
+그때서야 `<h1>`이 예상 제목을 가집니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="expect-h1-default"/>
 
-Delayed change detection is intentional and useful.
-It gives the tester an opportunity to inspect and change the state of the component *before Angular initiates data binding and calls [lifecycle hooks](guide/components/lifecycle)*.
+지연된 변경 감지는 의도적이며 유용합니다.
+테스터에게 Angular가 데이터 바인딩을 시작하고 [생명주기 훅](guide/components/lifecycle)을 호출하기 전에 컴포넌트 상태를 검사하고 변경할 기회를 제공합니다.
 
-Here's another test that changes the component's `title` property *before* calling `fixture.detectChanges()`.
+다음은 `fixture.detectChanges()`를 호출하기 *전에* 컴포넌트의 `title` 속성을 변경하는 또 다른 테스트입니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="after-change"/>
 
-### Automatic change detection
+### 자동 변경 감지
 
-The `BannerComponent` tests frequently call `detectChanges`.
-Many testers prefer that the Angular test environment run change detection automatically like it does in production.
+`BannerComponent` 테스트는 자주 `detectChanges`를 호출합니다.
+많은 테스터는 Angular의 테스트 환경이 프로덕션과 같이 변경 감지를 자동으로 실행하기를 선호합니다.
 
-That's possible by configuring the `TestBed` with the `ComponentFixtureAutoDetect` provider.
-First import it from the testing utility library:
+이를 위해 `TestBed`를 `ComponentFixtureAutoDetect` 제공자와 함께 구성할 수 있습니다.
+먼저 테스트 유틸리티 라이브러리에서 가져옵니다:
 
 <docs-code header="app/banner/banner.component.detect-changes.spec.ts (import)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="import-ComponentFixtureAutoDetect"/>
 
-Then add it to the `providers` array of the testing module configuration:
+그런 다음 테스트 모듈 구성의 `providers` 배열에 추가합니다:
 
 <docs-code header="app/banner/banner.component.detect-changes.spec.ts (AutoDetect)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="auto-detect"/>
 
-HELPFUL: You can also use the `fixture.autoDetectChanges()` function instead if you only want to enable automatic change detection
-after making updates to the state of the fixture's component. In addition, automatic change detection is on by default
-when using `provideExperimentalZonelessChangeDetection` and turning it off is not recommended.
+도움말: 업데이트 후에만 구성 요소의 상태에 대한 자동 변경 감지를 활성화하려는 경우에는 `fixture.autoDetectChanges()` 함수를 사용할 수 있습니다. 더불어, `provideExperimentalZonelessChangeDetection`를 사용할 때 자동 변경 감지가 기본적으로 활성화되며 이를 비활성화하는 것은 권장되지 않습니다.
 
-Here are three tests that illustrate how automatic change detection works.
+자동 변경 감지가 작동하는 방식을 설명하는 세 가지 테스트가 있습니다.
 
 <docs-code header="app/banner/banner.component.detect-changes.spec.ts (AutoDetect Tests)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="auto-detect-tests"/>
 
-The first test shows the benefit of automatic change detection.
+첫 번째 테스트는 자동 변경 감지의 이점을 보여줍니다.
 
-The second and third test reveal an important limitation.
-The Angular testing environment does not run change detection synchronously when updates happen inside the test case that changed the component's `title`.
-The test must call `await fixture.whenStable` to wait for another round of change detection.
+두 번째 및 세 번째 테스트는 중요한 제한점을 드러냅니다.
+Angular 테스트 환경은 컴포넌트의 `title`을 변경한 테스트 케이스 내에서 업데이트가 발생할 때 변경 감지를 동기적으로 실행하지 않습니다.
+테스트는 `await fixture.whenStable`을 호출하여 또 다른 변경 감지 라운드를 기다려야 합니다.
 
-HELPFUL: Angular does not know about direct updates to values that are not signals. The easiest way to ensure that
-change detection will be scheduled is to use signals for values read in the template.
+도움말: Angular는 신호가 아닌 값에 대한 직접 업데이트에 대해 알지 못합니다. 템플릿에서 읽는 값에 대해 변경 감지가 예약되도록 하려면 신호를 사용하는 것이 가장 간단한 방법입니다.
 
-### Change an input value with `dispatchEvent()`
+### `dispatchEvent()`로 입력 값 변경
 
-To simulate user input, find the input element and set its `value` property.
+사용자 입력을 시뮬레이션하려면 입력 요소를 찾아 `value` 속성을 설정합니다.
 
-But there is an essential, intermediate step.
+하지만 중요한 중간 단계가 있습니다.
 
-Angular doesn't know that you set the input element's `value` property.
-It won't read that property until you raise the element's `input` event by calling `dispatchEvent()`.
+Angular는 입력 요소의 `value` 속성을 설정했다는 것을 알지 못합니다.
+`dispatchEvent()`를 호출하여 요소의 `input` 이벤트를 발생시킬 때까지 해당 속성을 읽지 않습니다.
 
-The following example demonstrates the proper sequence.
+다음 예제가 올바른 순서를 보여줍니다.
 
 <docs-code header="app/hero/hero-detail.component.spec.ts (pipe test)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="title-case-pipe"/>
 
-## Component with external files
+## 외부 파일이 있는 컴포넌트
 
-The preceding `BannerComponent` is defined with an *inline template* and *inline css*, specified in the `@Component.template` and `@Component.styles` properties respectively.
+이전의 `BannerComponent`는 `@Component.template` 및 `@Component.styles` 속성에 지정된 *인라인 템플릿* 및 *인라인 CSS*로 정의됩니다.
 
-Many components specify *external templates* and *external css* with the `@Component.templateUrl` and `@Component.styleUrls` properties respectively, as the following variant of `BannerComponent` does.
+많은 컴포넌트는 *외부 템플릿*과 *외부 CSS*를 `@Component.templateUrl` 및 `@Component.styleUrls` 속성을 사용해 지정합니다. 이는 다음과 같은 `BannerComponent`의 변형입니다.
 
 <docs-code header="app/banner/banner-external.component.ts (metadata)" path="adev/src/content/examples/testing/src/app/banner/banner-external.component.ts" visibleRegion="metadata"/>
 
-This syntax tells the Angular compiler to read the external files during component compilation.
+이 구문은 Angular 컴파일러에게 컴포넌트 컴파일 중에 외부 파일을 읽으라고 지시합니다.
 
-That's not a problem when you run the CLI `ng test` command because it *compiles the application before running the tests*.
+CLI `ng test` 명령을 실행할 때는 문제가 발생하지 않는데, 이 명령은 *테스트를 실행하기 전에 애플리케이션을 컴파일하기 때문입니다*.
 
-However, if you run the tests in a **non-CLI environment**, tests of this component might fail.
-For example, if you run the `BannerComponent` tests in a web coding environment such as [plunker](https://plnkr.co), you'll see a message like this one:
+그러나 **비 CLI 환경**에서 테스트를 실행하면 이 컴포넌트의 테스트가 실패할 수 있습니다.
+예를 들어 [plunker](https://plnkr.co)와 같은 웹 코딩 환경에서 `BannerComponent` 테스트를 실행하면 다음과 같은 메시지가 표시됩니다:
 
 <docs-code hideCopy language="shell">
 
@@ -124,126 +121,124 @@ Please call "TestBed.compileComponents" before your test.
 
 </docs-code>
 
-You get this test failure message when the runtime environment compiles the source code *during the tests themselves*.
+이러한 테스트 실행 중에 런타임 환경이 소스 코드를 컴파일할 때 이 오류 메시지가 표시됩니다.
 
-To correct the problem, call `compileComponents()` as explained in the following [Calling compileComponents](#calling-compilecomponents) section.
+문제를 해결하려면 다음 [Calling compileComponents](#calling-compilecomponents) 섹션에 설명된 대로 `compileComponents()`를 호출합니다.
 
-## Component with a dependency
+## 의존성이 있는 컴포넌트
 
-Components often have service dependencies.
+컴포넌트는 종종 서비스 의존성을 가집니다.
 
-The `WelcomeComponent` displays a welcome message to the logged-in user.
-It knows who the user is based on a property of the injected `UserService`:
+`WelcomeComponent`는 로그인한 사용자에게 환영 메시지를 표시합니다.
+이 컴포넌트는 주입된 `UserService`의 속성을 기반으로 누구인지 알고 있습니다:
 
 <docs-code header="app/welcome/welcome.component.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.ts"/>
 
-The `WelcomeComponent` has decision logic that interacts with the service, logic that makes this component worth testing.
+`WelcomeComponent`는 서비스와 상호 작용하는 결정 논리를 가지고 있으며, 이는 이 컴포넌트를 테스트할 가치가 있게 만듭니다.
 
-### Provide service test doubles
+### 서비스 테스트 더블 제공
 
-A *component-under-test* doesn't have to be provided with real services.
+*테스트 중인 컴포넌트*는 실제 서비스를 제공할 필요가 없습니다.
 
-Injecting the real `UserService` could be difficult.
-The real service might ask the user for login credentials and attempt to reach an authentication server.
-These behaviors can be hard to intercept. Be aware that using test doubles makes the test behave differently from production so use them sparingly.
+실제 `UserService`를 주입하는 것은 어려울 수 있습니다.
+실제 서비스는 사용자에게 로그인 자격 증명을 요청하고 인증 서버에 접근하려고 할 수 있습니다.
+이러한 동작은 가로채기가 어려울 수 있습니다. 테스트 더블을 사용하면 테스트가 프로덕션과 다르게 작동하므로 신중하게 사용해야 합니다.
 
-### Get injected services
+### 주입된 서비스 가져오기
 
-The tests need access to the `UserService` injected into the `WelcomeComponent`.
+테스트는 `WelcomeComponent`에 주입된 `UserService`에 접근할 수 있어야 합니다.
 
-Angular has a hierarchical injection system.
-There can be injectors at multiple levels, from the root injector created by the `TestBed` down through the component tree.
+Angular는 계층적 주입 시스템을 가지고 있습니다.
+`TestBed`가 생성한 루트 주입기부터 컴포넌트 트리까지 여러 레벨에서 주입기가 있을 수 있습니다.
 
-The safest way to get the injected service, the way that ***always works***,
-is to **get it from the injector of the *component-under-test***.
-The component injector is a property of the fixture's `DebugElement`.
+주입된 서비스를 가져오는 가장 안전한 방법은 *테스트 중인 컴포넌트의 주입기*에서 가져오는 것입니다.
+컴포넌트 주입기는 고정된 `DebugElement`의 속성 중 하나입니다.
 
 <docs-code header="WelcomeComponent's injector" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="injected-service"/>
 
-HELPFUL: This is _usually_ not necessary. Services are often provided in the root or the TestBed overrides and can be retrieved more easily with `TestBed.inject()` (see below).
+도움말: 일반적으로는 필요하지 않습니다. 서비스는 루트 또는 TestBed 오버라이드에서 제공되며, `TestBed.inject()`를 사용하여 더 쉽게 검색할 수 있습니다 (아래 참조).
 
 ### `TestBed.inject()`
 
-This is easier to remember and less verbose than retrieving a service using the fixture's `DebugElement`.
+이는 고정된 `DebugElement`를 사용하여 서비스를 검색하는 것보다 기억하기 쉽고 덜 장황합니다.
 
-In this test suite, the *only* provider of `UserService` is the root testing module, so it is safe to call `TestBed.inject()` as follows:
+이 테스트 스위트에서 `UserService`의 *유일한* 제공자는 루트 테스트 모듈이므로 다음과 같이 안전하게 `TestBed.inject()`를 호출할 수 있습니다:
 
 <docs-code header="TestBed injector" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="inject-from-testbed" />
 
-HELPFUL: For a use case in which `TestBed.inject()` does not work, see the [*Override component providers*](#override-component-providers) section that explains when and why you must get the service from the component's injector instead.
+도움말: `TestBed.inject()`가 작동하지 않는 사용 사례는 [*Override component providers*](#override-component-providers) 섹션을 참조하십시오. 이 섹션에서는 언제 그리고 왜 컴포넌트의 주입기에서 서비스를 가져와야 하는지 설명합니다.
 
-### Final setup and tests
+### 최종 설정 및 테스트
 
-Here's the complete `beforeEach()`, using `TestBed.inject()`:
+다음은 `TestBed.inject()`를 사용하는 전체 `beforeEach()`입니다:
 
 <docs-code header="app/welcome/welcome.component.spec.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="setup"/>
 
-And here are some tests:
+여기 몇 가지 테스트가 있습니다:
 
 <docs-code header="app/welcome/welcome.component.spec.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="tests"/>
 
-The first is a sanity test; it confirms that the `UserService` is called and working.
+첫 번째는 정상성 테스트이며, `UserService`가 호출되고 작동하고 있음을 확인합니다.
 
-HELPFUL: The withContext function \(for example, `'expected name'`\) is an optional failure label.
-If the expectation fails, Jasmine appends this label to the expectation failure message.
-In a spec with multiple expectations, it can help clarify what went wrong and which expectation failed.
+도움말: withContext 함수 (예: `'expected name'`)는 선택적 실패 레이블입니다.
+기대가 실패하면 Jasmine은 이 레이블을 기대 실패 메시지에 추가합니다.
+여러 기대가 있는 사양에서 무엇이 잘못되었는지, 어떤 기대가 실패했는지를 명확히 하는 데 도움이 될 수 있습니다.
 
-The remaining tests confirm the logic of the component when the service returns different values.
-The second test validates the effect of changing the user name.
-The third test checks that the component displays the proper message when there is no logged-in user.
+나머지 테스트는 서비스가 서로 다른 값을 반환할 때 컴포넌트의 논리를 확인합니다.
+두 번째 테스트는 사용자 이름이 변경되는 효과를 검증합니다.
+세 번째 테스트는 로그인한 사용자가 없을 때 컴포넌트가 적절한 메시지를 표시하는지 확인합니다.
 
-## Component with async service
+## 비동기 서비스가 있는 컴포넌트
 
-In this sample, the `AboutComponent` template hosts a `TwainComponent`.
-The `TwainComponent` displays Mark Twain quotes.
+이 샘플에서 `AboutComponent` 템플릿은 `TwainComponent`를 호스팅합니다.
+`TwainComponent`는 마크 트웨인의 인용구를 표시합니다.
 
 <docs-code header="app/twain/twain.component.ts (template)" path="adev/src/content/examples/testing/src/app/twain/twain.component.ts" visibleRegion="template" />
 
-HELPFUL: The value of the component's `quote` property passes through an `AsyncPipe`.
-That means the property returns either a `Promise` or an `Observable`.
+도움말: 컴포넌트의 `quote` 속성 값은 `AsyncPipe`를 통해 전달됩니다.
+즉, 속성이 `Promise` 또는 `Observable` 중 하나를 반환함을 의미합니다.
 
-In this example, the `TwainComponent.getQuote()` method tells you that the `quote` property returns an `Observable`.
+이 예제에서 `TwainComponent.getQuote()` 메서드는 `quote` 속성이 `Observable`을 반환한다고 알려줍니다.
 
 <docs-code header="app/twain/twain.component.ts (getQuote)" path="adev/src/content/examples/testing/src/app/twain/twain.component.ts" visibleRegion="get-quote"/>
 
-The `TwainComponent` gets quotes from an injected `TwainService`.
-The component starts the returned `Observable` with a placeholder value \(`'...'`\), before the service can return its first quote.
+`TwainComponent`는 주입된 `TwainService`에서 인용구를 가져옵니다.
+이 컴포넌트는 서비스가 첫 번째 인용구를 반환할 수 있기 전에 자리 표시자 값 (`'...'`)으로 반환된 `Observable`을 시작합니다.
 
-The `catchError` intercepts service errors, prepares an error message, and returns the placeholder value on the success channel.
+`catchError`는 서비스 오류를 가로채고 오류 메시지를 준비하며 성공 채널에서 자리 표시자 값을 반환합니다.
 
-These are all features you'll want to test.
+이 모든 기능을 테스트하고자 할 것입니다.
 
-### Testing with a spy
+### 스파이를 사용한 테스트
 
-When testing a component, only the service's public API should matter.
-In general, tests themselves should not make calls to remote servers.
-They should emulate such calls.
-The setup in this `app/twain/twain.component.spec.ts` shows one way to do that:
+컴포넌트를 테스트할 때는 서비스의 공용 API만 고려하면 됩니다.
+일반적으로 테스트는 원격 서버에 대한 호출을 해서는 안 됩니다.
+그렇게 하는 대신 이를 에뮬레이트해야 합니다.
+다음 `app/twain/twain.component.spec.ts`의 설정이 그 방법 중 하나를 보여줍니다:
 
 <docs-code header="app/twain/twain.component.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts" visibleRegion="setup"/>
 
-Focus on the spy.
+스파이에 집중하세요.
 
 <docs-code path="adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts" visibleRegion="spy"/>
 
-The spy is designed such that any call to `getQuote` receives an observable with a test quote.
-Unlike the real `getQuote()` method, this spy bypasses the server and returns a synchronous observable whose value is available immediately.
+이 스파이는 `getQuote`를 호출하는 모든 함수가 테스트 인용구가 포함된 옵저버블을 받도록 설계되었습니다.
+실제 `getQuote()` 메서드와 달리, 이 스파이는 서버를 우회하고 즉시 사용 가능한 값을 가진 동기 옵저버블을 반환합니다.
 
-You can write many useful tests with this spy, even though its `Observable` is synchronous.
+이 스파이를 사용하여 유용한 많은 테스트를 작성할 수 있습니다. 비록 `Observable`이 동기적일지라도 말입니다.
 
-HELPFUL: It is best to limit the usage of spies to only what is necessary for the test. Creating mocks or spies for more than what's necessary can be brittle. As the component and injectable evolves, the unrelated tests can fail because they no longer mock enough behaviors that would otherwise not affect the test.
+도움말: 스파이는 테스트에 필요한 만큼만 사용하는 것이 가장 좋습니다. 필요 이상의 목업이나 스파이를 생성하면 취약해질 수 있습니다. 컴포넌트와 주입 가능한 내용이 발전하면서 관련 없는 테스트가 실패할 수 있습니다. 
 
+### `fakeAsync()`를 사용한 비동기 테스트
 
-### Async test with `fakeAsync()`
+`fakeAsync()` 기능을 사용하려면 테스트 설정 파일에 `zone.js/testing`을 가져와야 합니다.
+Angular CLI로 프로젝트를 생성한 경우, `zone-testing`은 이미 `src/test.ts`에 가져와 있습니다.
 
-To use `fakeAsync()` functionality, you must import `zone.js/testing` in your test setup file.
-If you created your project with the Angular CLI, `zone-testing` is already imported in `src/test.ts`.
-
-The following test confirms the expected behavior when the service returns an `ErrorObservable`.
+다음 테스트는 서비스가 `ErrorObservable`을 반환할 때 예상되는 동작을 확인합니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts" visibleRegion="error-test"/>
 
-HELPFUL: The `it()` function receives an argument of the following form.
+도움말: `it()` 함수는 다음 형식의 인수를 받습니다.
 
 <docs-code language="javascript">
 
@@ -251,59 +246,58 @@ fakeAsync(() => { /*test body*/ })
 
 </docs-code>
 
-The `fakeAsync()` function enables a linear coding style by running the test body in a special `fakeAsync test zone`.
-The test body appears to be synchronous.
-There is no nested syntax \(like a `Promise.then()`\) to disrupt the flow of control.
+`fakeAsync()` 함수는 특별한 `fakeAsync test zone`에서 테스트 본문을 실행하여 선형 코딩 스타일을 가능하게 합니다.
+테스트 본문은 마치 동기적인 것처럼 보입니다.
+제어 흐름을 방해하는 중첩 구문(예: `Promise.then()`)이 없습니다.
 
-HELPFUL: Limitation: The `fakeAsync()` function won't work if the test body makes an `XMLHttpRequest` \(XHR\) call.
-XHR calls within a test are rare, but if you need to call XHR, see the [`waitForAsync()`](#waitForAsync) section.
+도움말: 제한 사항: `fakeAsync()` 함수는 테스트 본문이 `XMLHttpRequest` (XHR) 호출을 수행하는 경우 작동하지 않습니다.
+테스트 내에서 XHR 호출은 드물지만, XHR을 호출해야 하는 경우는 [`waitForAsync()`](#waitForAsync) 섹션을 참조하십시오.
 
-IMPORTANT: Be aware that asynchronous tasks that happen inside the `fakeAsync` zone need to be manually executed with `flush` or `tick`. If you attempt to
-wait for them to complete (i.e. using `fixture.whenStable`) without using the
-`fakeAsync` test helpers to advance time, your test will likely fail. See below for more information.
+중요: `fakeAsync` 영역 내에서 발생하는 비동기 작업은 `flush` 또는 `tick`으로 수동으로 실행해야 합니다. 여러분이 `flush`하지 않고,
+`fixture.whenStable`을 사용하여 완료되기를 기다리려 하면 테스트가 실패할 가능성이 높습니다. 더 많은 정보는 아래를 참조하십시오.
 
-### The `tick()` function
+### `tick()` 함수
 
-You do have to call [tick()](api/core/testing/tick) to advance the virtual clock.
+가상의 시계를 진행시키려면 [tick()](api/core/testing/tick)을 호출해야 합니다.
 
-Calling [tick()](api/core/testing/tick) simulates the passage of time until all pending asynchronous activities finish.
-In this case, it waits for the observable's `setTimeout()`.
+[tick()](api/core/testing/tick)을 호출하는 것은 대기 중인 모든 비동기 활동이 완료될 때까지 시간의 흐름을 시뮬레이션합니다.
+이 경우 옵저버블의 `setTimeout()`을 대기합니다.
 
-The [tick()](api/core/testing/tick) function accepts `millis` and `tickOptions` as parameters. The `millis` parameter specifies how much the virtual clock advances and defaults to `0` if not provided.
-For example, if you have a `setTimeout(fn, 100)` in a `fakeAsync()` test, you need to use `tick(100)` to trigger the fn callback.
-The optional `tickOptions` parameter has a property named `processNewMacroTasksSynchronously`. The `processNewMacroTasksSynchronously` property represents whether to invoke new generated macro tasks when ticking and defaults to `true`.
+[tick()](api/core/testing/tick) 함수는 `millis`와 `tickOptions`를 매개변수로 받습니다. `millis` 매개변수는 가상의 시계가 얼마나 진행되는지를 지정하며, 제공되지 않으면 기본값은 `0`입니다.
+예를 들어, `fakeAsync()` 테스트에 `setTimeout(fn, 100)`이 있는 경우, `tick(100)`을 사용하여 fn 콜백을 트리거해야 합니다.
+선택적 `tickOptions` 매개변수에는 `processNewMacroTasksSynchronously`라는 속성이 있습니다. `processNewMacroTasksSynchronously` 속성은 주기를 진행할 때 새로 생성된 매크로 작업을 호출할지 여부를 나타내며, 기본값은 `true`입니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/async-helper.spec.ts" visibleRegion="fake-async-test-tick"/>
 
-The [tick()](api/core/testing/tick) function is one of the Angular testing utilities that you import with `TestBed`.
-It's a companion to `fakeAsync()` and you can only call it within a `fakeAsync()` body.
+[tick()](api/core/testing/tick) 함수는 `TestBed`와 함께 가져오는 Angular 테스트 유틸리티 중 하나입니다.
+이는 `fakeAsync()`의 동반자이며 `fakeAsync()` 본문 내에서만 호출할 수 있습니다.
 
 ### tickOptions
 
-In this example, you have a new macro task, the nested `setTimeout` function. By default, when the `tick` is setTimeout, `outside` and `nested` will both be triggered.
+이 예에서는 새 매크로 작업인 중첩된 `setTimeout` 함수가 있습니다. 기본적으로 `tick`이 `setTimeout`일 때 `outside`와 `nested`가 모두 트리거됩니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/async-helper.spec.ts" visibleRegion="fake-async-test-tick-new-macro-task-sync"/>
 
-In some case, you don't want to trigger the new macro task when ticking. You can use `tick(millis, {processNewMacroTasksSynchronously: false})` to not invoke a new macro task.
+일부 경우에는 주기를 진행할 때 새 매크로 작업을 트리거하고 싶지 않을 수 있습니다. `tick(millis, {processNewMacroTasksSynchronously: false})`를 사용하여 새 매크로 작업을 호출하지 않도록 할 수 있습니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/async-helper.spec.ts" visibleRegion="fake-async-test-tick-new-macro-task-async"/>
 
-### Comparing dates inside fakeAsync()
+### `fakeAsync()` 내에서 날짜 비교
 
-`fakeAsync()` simulates passage of time, which lets you calculate the difference between dates inside `fakeAsync()`.
+`fakeAsync()`는 시간의 흐름을 시뮬레이션하므로 `fakeAsync()` 내에서 날짜 간의 차이를 계산할 수 있습니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/async-helper.spec.ts" visibleRegion="fake-async-test-date"/>
 
-### jasmine.clock with fakeAsync()
+### `fakeAsync()`와 함께 사용하는 jasmine.clock
 
-Jasmine also provides a `clock` feature to mock dates.
-Angular automatically runs tests that are run after `jasmine.clock().install()` is called inside a `fakeAsync()` method until `jasmine.clock().uninstall()` is called.
-`fakeAsync()` is not needed and throws an error if nested.
+Jasmine은 날짜를 모의하기 위한 `clock` 기능도 제공합니다.
+Angular는 `fakeAsync()` 메서드 내에서 `jasmine.clock().install()`이 호출된 후 실행된 테스트를 자동으로 실행합니다. `jasmine.clock().uninstall()`이 호출될 때까지입니다.
+`fakeAsync()`는 필요하지 않으며 중첩된 경우 오류가 발생합니다.
 
-By default, this feature is disabled.
-To enable it, set a global flag before importing `zone-testing`.
+기본적으로 이 기능은 비활성화되어 있습니다.
+이 기능을 활성화하려면 `zone-testing`을 가져오기 전에 전역 플래그를 설정해야 합니다.
 
-If you use the Angular CLI, configure this flag in `src/test.ts`.
+Angular CLI를 사용하는 경우, 이 플래그를 `src/test.ts`에 설정합니다.
 
 <docs-code language="typescript">
 
@@ -314,15 +308,15 @@ import 'zone.js/testing';
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/async-helper.spec.ts" visibleRegion="fake-async-test-clock"/>
 
-### Using the RxJS scheduler inside fakeAsync()
+### `fakeAsync()` 내에서 RxJS 스케줄러 사용
 
-You can also use RxJS scheduler in `fakeAsync()` just like using `setTimeout()` or `setInterval()`, but you need to import `zone.js/plugins/zone-patch-rxjs-fake-async` to patch RxJS scheduler.
+`setTimeout()`이나 `setInterval()`을 사용하는 것처럼 `fakeAsync()` 내에서도 RxJS 스케줄러를 사용할 수 있지만, RxJS 스케줄러를 패치하려면 `zone.js/plugins/zone-patch-rxjs-fake-async`를 가져와야 합니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/async-helper.spec.ts" visibleRegion="fake-async-test-rxjs"/>
 
-### Support more macroTasks
+### 더 많은 매크로 태스크 지원
 
-By default, `fakeAsync()` supports the following macro tasks.
+기본적으로 `fakeAsync()`는 다음 매크로 태스크를 지원합니다.
 
 * `setTimeout`
 * `setInterval`
@@ -330,413 +324,414 @@ By default, `fakeAsync()` supports the following macro tasks.
 * `webkitRequestAnimationFrame`
 * `mozRequestAnimationFrame`
 
-If you run other macro tasks such as `HTMLCanvasElement.toBlob()`, an *"Unknown macroTask scheduled in fake async test"* error is thrown.
+`HTMLCanvasElement.toBlob()`과 같은 다른 매크로 태스크를 실행하면 *"Unknown macroTask scheduled in fake async test"* 오류가 발생합니다.
 
 <docs-code-multifile>
     <docs-code header="src/app/shared/canvas.component.spec.ts (failing)" path="adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts" visibleRegion="without-toBlob-macrotask"/>
     <docs-code header="src/app/shared/canvas.component.ts" path="adev/src/content/examples/testing/src/app/shared/canvas.component.ts" visibleRegion="main"/>
 </docs-code-multifile>
 
-If you want to support such a case, you need to define the macro task you want to support in `beforeEach()`.
-For example:
+이러한 경우를 지원하려면 `beforeEach()`에서 지원하고자 하는 매크로 작업을 정의해야 합니다.
+예를 들어:
 
 <docs-code header="src/app/shared/canvas.component.spec.ts (excerpt)" path="adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts" visibleRegion="enable-toBlob-macrotask"/>
 
-HELPFUL: In order to make the `<canvas>` element Zone.js-aware in your app, you need to import the `zone-patch-canvas` patch \(either in `polyfills.ts` or in the specific file that uses `<canvas>`\):
+도움말: 애플리케이션의 `<canvas>` 요소를 Zone.js 인식 가능하게 하려면 `zone-patch-canvas` 패치를 가져와야 합니다 ( `polyfills.ts` 또는 `<canvas>`를 사용하는 특정 파일에서).
 
 <docs-code header="src/polyfills.ts or src/app/shared/canvas.component.ts" path="adev/src/content/examples/testing/src/app/shared/canvas.component.ts" visibleRegion="import-canvas-patch"/>
 
-### Async observables
+### 비동기 옵저버블
 
-You might be satisfied with the test coverage of these tests.
+이 테스트에 대한 커버리지에 만족할 수 있습니다.
 
-However, you might be troubled by the fact that the real service doesn't quite behave this way.
-The real service sends requests to a remote server.
-A server takes time to respond and the response certainly won't be available immediately as in the previous two tests.
+하지만 실제 서비스가 정확히 그렇게 작동하지 않는다는 사실에 문제가 있을 수 있습니다.
+실제 서비스는 원격 서버에 요청을 보냅니다.
+서버는 응답하는 데 시간이 걸리며, 응답이 이전 두 테스트처럼 즉시 제공되지 않을 것입니다.
 
-Your tests will reflect the real world more faithfully if you return an *asynchronous* observable from the `getQuote()` spy like this.
+`getQuote()` 스파이에서 *비동기* 옵저버블을 반환하면 여러분의 테스트는 실제 세계를 더 충실하게 반영합니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts" visibleRegion="async-setup"/>
 
-### Async observable helpers
+### 비동기 옵저저블 헬퍼
 
-The async observable was produced by an `asyncData` helper.
-The `asyncData` helper is a utility function that you'll have to write yourself, or copy this one from the sample code.
+비동기 옵저블은 `asyncData` 헬퍼에 의해 생성되었습니다.
+`asyncData` 헬퍼는 여러분이 직접 작성해야 할 유틸리티 함수이거나 샘플 코드에서 이 함수의 내용을 복사하여 사용할 수 있습니다.
 
 <docs-code header="testing/async-observable-helpers.ts" path="adev/src/content/examples/testing/src/testing/async-observable-helpers.ts" visibleRegion="async-data"/>
 
-This helper's observable emits the `data` value in the next turn of the JavaScript engine.
+이 헬퍼의 옵저버블은 JavaScript 엔진의 다음 턴에서 `data` 값을 방출합니다.
 
-The [RxJS `defer()` operator](http://reactivex.io/documentation/operators/defer.html) returns an observable.
-It takes a factory function that returns either a promise or an observable.
-When something subscribes to *defer*'s observable, it adds the subscriber to a new observable created with that factory.
+[RxJS `defer()` 연산자](http://reactivex.io/documentation/operators/defer.html)는 옵저버블을 반환합니다.
+이 함수는 프로미스나 옵저버블을 반환하는 팩토리 함수를 받습니다.
+무언가가 *defer*의 옵저버블에 가입할 때, 그 가입자는 해당 팩토리로 생성된 새 옵저버블에 추가됩니다.
 
-The `defer()` operator transforms the `Promise.resolve()` into a new observable that, like `HttpClient`, emits once and completes.
-Subscribers are unsubscribed after they receive the data value.
+`defer()` 연산자는 `Promise.resolve()`를 새로운 옵저버블로 변환하며, `HttpClient`처럼 단 한 번 방출하고 완료됩니다.
+가입자는 데이터 값을 받은 후 구독이 해제됩니다.
 
-There's a similar helper for producing an async error.
+비동기 오류를 생성하는 유사한 헬퍼가 있습니다.
 
 <docs-code path="adev/src/content/examples/testing/src/testing/async-observable-helpers.ts" visibleRegion="async-error"/>
 
-### More async tests
+### 더 많은 비동기 테스트
 
-Now that the `getQuote()` spy is returning async observables, most of your tests will have to be async as well.
+이제 `getQuote()` 스파이가 비동기 옵저버블을 반환하므로 대부분의 테스트도 비동기여야 합니다.
 
-Here's a `fakeAsync()` test that demonstrates the data flow you'd expect in the real world.
+다음은 실제 세계에서 기대하는 데이터 흐름을 보여주는 `fakeAsync()` 테스트입니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts" visibleRegion="fake-async-test"/>
 
-Notice that the quote element displays the placeholder value \(`'...'`\) after `ngOnInit()`.
-The first quote hasn't arrived yet.
+인용구 요소가 `ngOnInit()` 이후 자리 표시자 값(`'...'`)을 표시하는 데 유의하세요.
+첫 번째 인용구는 아직 도착하지 않았습니다.
 
-To flush the first quote from the observable, you call [tick()](api/core/testing/tick).
-Then call `detectChanges()` to tell Angular to update the screen.
+옵저버블에서 첫 번째 인용구를 플러시하려면 [tick()](api/core/testing/tick)을 호출합니다.
+그런 다음 `detectChanges()`를 호출하여 Angular에게 화면을 업데이트하라고 알립니다.
 
-Then you can assert that the quote element displays the expected text.
+그 후에 인용구 요소가 예상하는 텍스트를 표시하는지 확인할 수 있습니다.
 
-### Async test without `fakeAsync()`
+### `fakeAsync()`이 없는 비동기 테스트
 
-Here's the previous `fakeAsync()` test, re-written with the `async`.
+다음은 `async`로 다시 작성한 이전 `fakeAsync()` 테스트입니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts" visibleRegion="async-test"/>
 
 ### `whenStable`
 
-The test must wait for the `getQuote()` observable to emit the next quote.
-Instead of calling [tick()](api/core/testing/tick), it calls `fixture.whenStable()`.
+테스트는 `getQuote()` 옵저버블이 다음 인용구를 방출할 때까지 기다려야 합니다.
+[tick()](api/core/testing/tick)을 호출하는 대신 `fixture.whenStable()`을 호출합니다.
 
-The `fixture.whenStable()` returns a promise that resolves when the JavaScript engine's task queue becomes empty.
-In this example, the task queue becomes empty when the observable emits the first quote.
+`fixture.whenStable()`은 JavaScript 엔진의 작업 큐가 비어질 때 해결되는 프로미스를 반환합니다.
+이 예에서 작업 큐는 옵저버블이 첫 번째 인용구를 방출할 때 비게 됩니다.
 
 
-## Component with inputs and outputs
+## 입력과 출력을 가진 컴포넌트
 
-A component with inputs and outputs typically appears inside the view template of a host component.
-The host uses a property binding to set the input property and an event binding to listen to events raised by the output property.
+입력과 출력이 있는 컴포넌트는 일반적으로 호스트 컴포넌트의 보기 템플릿 내에 나타납니다.
+호스트는 속성 바인딩을 사용하여 입력 속성을 설정하고, 출력 속성이 발생시키는 이벤트를 수신하기 위해 이벤트 바인딩을 사용합니다.
 
-The testing goal is to verify that such bindings work as expected.
-The tests should set input values and listen for output events.
+테스트 목표는 그런 바인딩이 기대대로 작동하는지 확인하는 것입니다.
+테스트는 입력 값을 설정하고 출력 이벤트를 수신해야 합니다.
 
-The `DashboardHeroComponent` is a tiny example of a component in this role.
-It displays an individual hero provided by the `DashboardComponent`.
-Clicking that hero tells the `DashboardComponent` that the user has selected the hero.
+`DashboardHeroComponent`는 이러한 역할의 컴포넌트의 작은 예입니다.
+이는 `DashboardComponent`가 제공하는 개별 영웅을 표시합니다.
+해당 영웅을 클릭하면 사용자가 영웅을 선택했음을 `DashboardComponent`에 알립니다.
 
-The `DashboardHeroComponent` is embedded in the `DashboardComponent` template like this:
+`DashboardHeroComponent`는 다음과 같이 `DashboardComponent` 템플릿에 내장됩니다:
 
 <docs-code header="app/dashboard/dashboard.component.html (excerpt)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.html" visibleRegion="dashboard-hero"/>
 
-The `DashboardHeroComponent` appears in an `*ngFor` repeater, which sets each component's `hero` input property to the looping value and listens for the component's `selected` event.
+`DashboardHeroComponent`는 `*ngFor` 리피터 내에 나타나며, 각 컴포넌트의 `hero` 입력 속성을 반복 값으로 설정하고 해당 컴포넌트의 `selected` 이벤트를 수신합니다.
 
-Here's the component's full definition:
+컴포넌트의 전체 정의는 다음과 같습니다:
 
 <docs-code header="app/dashboard/dashboard-hero.component.ts (component)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts" visibleRegion="component"/>
 
-While testing a component this simple has little intrinsic value, it's worth knowing how.
-Use one of these approaches:
+이렇게 단순한 컴포넌트를 테스트하는 것은 본질적인 가치가 적지만, 방법을 아는 것은 유용합니다.
+다음 중 하나의 방법을 사용하세요:
 
-* Test it as used by `DashboardComponent`
-* Test it as a standalone component
-* Test it as used by a substitute for `DashboardComponent`
+* `DashboardComponent`에 의해 사용되는 대로 테스트하기
+* 독립형 컴포넌트로 테스트하기
+* `DashboardComponent`의 대체로 사용되는 대로 테스트하기
 
-The immediate goal is to test the `DashboardHeroComponent`, not the `DashboardComponent`, so, try the second and third options.
+즉각적인 목표는 `DashboardHeroComponent`를 테스트하는 것이지 `DashboardComponent`를 테스트하는 것은 아니므로, 두 번째 및 세 번째 옵션을 시도해 보세요.
 
-### Test `DashboardHeroComponent` standalone
+### 독립형 `DashboardHeroComponent` 테스트
 
-Here's the meat of the spec file setup.
+다음은 사양 파일 설정의 핵심 부분입니다.
 
 <docs-code header="app/dashboard/dashboard-hero.component.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="setup"/>
 
-Notice how the setup code assigns a test hero \(`expectedHero`\) to the component's `hero` property, emulating the way the `DashboardComponent` would set it using the property binding in its repeater.
+설정 코드가 테스트 영웅(`expectedHero`)을 컴포넌트의 `hero` 속성에 할당하여, `DashboardComponent`가 반복자에서 사용하는 속성 바인딩을 모방하는 방식에 주목하세요.
 
-The following test verifies that the hero name is propagated to the template using a binding.
+다음 테스트는 영웅 이름이 바인딩을 통해 템플릿에 전파되는지 검증합니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="name-test"/>
 
-Because the [template](#dashboard-hero-component) passes the hero name through the Angular `UpperCasePipe`, the test must match the element value with the upper-cased name.
+[template](#dashboard-hero-component)이 영웅 이름을 Angular `UpperCasePipe`를 통해 전달하므로, 테스트는 요소 값을 대문자 이름과 일치시켜야 합니다.
 
-### Clicking
+### 클릭
 
-Clicking the hero should raise a `selected` event that the host component \(`DashboardComponent` presumably\) can hear:
+영웅을 클릭하면 호스트 컴포넌트(`DashboardComponent`일 가능성이 높음)가 들을 수 있도록 `selected` 이벤트가 발생해야 합니다:
 
 <docs-code path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="click-test"/>
 
-The component's `selected` property returns an `EventEmitter`, which looks like an RxJS synchronous `Observable` to consumers.
-The test subscribes to it *explicitly* just as the host component does *implicitly*.
+컴포넌트의 `selected` 속성은 소비자에게 RxJS 동기 `Observable`처럼 보이는 `EventEmitter`를 반환합니다.
+테스트는 호스트 컴포넌트가 *암묵적으로* 그렇듯이 이를 *명시적으로* 구독합니다.
 
-If the component behaves as expected, clicking the hero's element should tell the component's `selected` property to emit the `hero` object.
+컴포넌트가 기대대로 작동한다면, 영웅의 요소를 클릭하면 해당 컴포넌트의 `selected` 속성이 `hero` 객체를 방출해야 합니다.
 
-The test detects that event through its subscription to `selected`.
+테스트는 `selected`에 대한 구독을 통해 해당 이벤트를 감지합니다.
 
 ### `triggerEventHandler`
 
-The `heroDe` in the previous test is a `DebugElement` that represents the hero `<div>`.
+이전 테스트의 `heroDe`는 영웅 `<div>`를 나타내는 `DebugElement`입니다.
 
-It has Angular properties and methods that abstract interaction with the native element.
-This test calls the `DebugElement.triggerEventHandler` with the "click" event name.
-The "click" event binding responds by calling `DashboardHeroComponent.click()`.
+이는 네이티브 요소와의 상호작용을 추상화하는 Angular 속성과 메소드를 가지고 있습니다.
+이 테스트는 "click" 이벤트 이름으로 `DebugElement.triggerEventHandler`를 호출합니다.
+"click" 이벤트 바인딩은 `DashboardHeroComponent.click()`을 호출합니다.
 
-The Angular `DebugElement.triggerEventHandler` can raise *any data-bound event* by its *event name*.
-The second parameter is the event object passed to the handler.
+Angular의 `DebugElement.triggerEventHandler`는 *이벤트 이름*으로 *모든 데이터 바인딩 이벤트*를 발생시킬 수 있습니다.
+두 번째 매개변수는 핸들러에 전달되는 이벤트 객체입니다.
 
-The test triggered a "click" event.
+테스트가 "click" 이벤트를 트리거했습니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="trigger-event-handler"/>
 
-In this case, the test correctly assumes that the runtime event handler, the component's `click()` method, doesn't care about the event object.
+이 경우, 테스트는 런타임 이벤트 핸들러, 즉 컴포넌트의 `click()` 메서드가 이벤트 객체에 신경 쓰지 않는다고 올바르게 가정합니다.
 
-HELPFUL: Other handlers are less forgiving.
-For example, the `RouterLink` directive expects an object with a `button` property that identifies which mouse button, if any, was pressed during the click.
-The `RouterLink` directive throws an error if the event object is missing.
+도움말: 다른 핸들러는 덜 관대합니다.
+예를 들어, `RouterLink` 지시자는 클릭하는 동안 어떤 마우스 버튼이 눌렸는지를識別하는 `button` 속성이 있는 객체를 기대합니다.
+이벤트 객체가 누락된 경우 `RouterLink` 지시자가 오류를 발생시킵니다.
 
-### Click the element
+### 요소 클릭
 
-The following test alternative calls the native element's own `click()` method, which is perfectly fine for *this component*.
+다음 테스트 대안은 네이티브 요소의 `click()` 메서드를 호출합니다. 이는 *이 컴포넌트*에 대해서는 완벽하게 괜찮습니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="click-test-2"/>
 
-### `click()` helper
+### `click()` 헬퍼
 
-Clicking a button, an anchor, or an arbitrary HTML element is a common test task.
+버튼, 앵커 또는 임의의 HTML 요소를 클릭하는 것은 일반적인 테스트 작업입니다.
 
-Make that consistent and straightforward by encapsulating the *click-triggering* process in a helper such as the following `click()` function:
+클릭 트리거링 프로세스를 다음과 같은 헬퍼 함수인 `click()`로 캡슐화하여 일관되고 간단하게 만드세요:
 
 <docs-code header="testing/index.ts (click helper)" path="adev/src/content/examples/testing/src/testing/index.ts" visibleRegion="click-event"/>
 
-The first parameter is the *element-to-click*.
-If you want, pass a custom event object as the second parameter.
-The default is a partial [left-button mouse event object](https://developer.mozilla.org/docs/Web/API/MouseEvent/button) accepted by many handlers including the `RouterLink` directive.
+첫 번째 매개변수는 *클릭할 요소*입니다.
+원한다면 두 번째 매개변수로 사용자 정의 이벤트 객체를 전달합니다.
+기본값은 `RouterLink` 지시자를 포함한 많은 핸들러에서 수용하는 부분적인 [왼쪽 버튼 마우스 이벤트 객체](https://developer.mozilla.org/docs/Web/API/MouseEvent/button)입니다.
 
-IMPORTANT: The `click()` helper function is **not** one of the Angular testing utilities.
-It's a function defined in *this guide's sample code*.
-All of the sample tests use it.
-If you like it, add it to your own collection of helpers.
+중요: `click()` 헬퍼 함수는 Angular 테스트 유틸리티 중 하나가 아닙니다.
+이 함수는 *이 가이드의 샘플 코드*에서 정의된 것입니다.
+모든 샘플 테스트에서 이를 사용합니다.
+마음에 드셨다면 여러분의 헬퍼 모음에 추가하세요.
 
-Here's the previous test, rewritten using the click helper.
+다음은 클릭 헬퍼를 사용하여 재작성한 이전 테스트입니다.
 
 <docs-code header="app/dashboard/dashboard-hero.component.spec.ts (test with click helper)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="click-test-3"/>
 
-## Component inside a test host
+## 테스트 호스트 내의 컴포넌트
 
-The previous tests played the role of the host `DashboardComponent` themselves.
-But does the `DashboardHeroComponent` work correctly when properly data-bound to a host component?
+이전 테스트는 호스트 `DashboardComponent` 역할을 수행했습니다.
+하지만 `DashboardHeroComponent`가 호스트 컴포넌트에 올바르게 데이터가 바인딩되는 경우 작동할까요?
 
 <docs-code header="app/dashboard/dashboard-hero.component.spec.ts (test host)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host"/>
 
-The test host sets the component's `hero` input property with its test hero.
-It binds the component's `selected` event with its `onSelected` handler, which records the emitted hero in its `selectedHero` property.
+테스트 호스트는 컴포넌트의 `hero` 입력 속성을 테스트 영웅으로 설정합니다.
+또한 컴포넌트의 `selected` 이벤트를 `onSelected` 핸들러와 바인딩하여 발산된 영웅을 `selectedHero` 속성에 기록합니다.
 
-Later, the tests will be able to check `selectedHero` to verify that the `DashboardHeroComponent.selected` event emitted the expected hero.
+이후에, 테스트는 `selectedHero`를 확인하여 `DashboardHeroComponent.selected` 이벤트가 예상하는 영웅을 발산했는지 검증할 수 있습니다.
 
-The setup for the `test-host` tests is similar to the setup for the stand-alone tests:
+`test-host` 테스트의 설정은 독립형 테스트의 설정과 유사합니다:
 
 <docs-code header="app/dashboard/dashboard-hero.component.spec.ts (test host setup)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host-setup"/>
 
-This testing module configuration shows three important differences:
+이 테스트 모듈 구성은 세 가지 중요한 차이점을 보여줍니다:
 
-* It *imports* both the `DashboardHeroComponent` and the `TestHostComponent`
-* It *creates* the `TestHostComponent` instead of the `DashboardHeroComponent`
-* The `TestHostComponent` sets the `DashboardHeroComponent.hero` with a binding
+* `DashboardHeroComponent` 및 `TestHostComponent`를 *가져옵니다*
+* `DashboardHeroComponent` 대신 `TestHostComponent`를 *생성합니다*
+* `TestHostComponent`는 바인딩을 통해 `DashboardHeroComponent.hero`를 설정합니다.
 
-The `createComponent` returns a `fixture` that holds an instance of `TestHostComponent` instead of an instance of `DashboardHeroComponent`.
+`createComponent`는 `DashboardHeroComponent` 대신 `TestHostComponent`의 인스턴스를 보유하는 `fixture`를 반환합니다.
 
-Creating the `TestHostComponent` has the side effect of creating a `DashboardHeroComponent` because the latter appears within the template of the former.
-The query for the hero element \(`heroEl`\) still finds it in the test DOM, albeit at greater depth in the element tree than before.
+`TestHostComponent`를 생성하면 `DashboardHeroComponent`가 생성되는 부차적인 효과가 있습니다. 왜냐하면 후자가 전자의 템플릿 내에 나타나기 때문입니다.
+영웅 요소(`heroEl`)에 대한 쿼리는 여전히 테스트 DOM에서 찾을 수 있지만, 이전보다 요소 트리에서 더 깊은 곳에 있습니다.
 
-The tests themselves are almost identical to the stand-alone version:
+테스트 자체는 독립형 버전과 거의 동일합니다:
 
 <docs-code header="app/dashboard/dashboard-hero.component.spec.ts (test-host)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host-tests"/>
 
-Only the selected event test differs.
-It confirms that the selected `DashboardHeroComponent` hero really does find its way up through the event binding to the host component.
+선택된 이벤트 테스트만 다릅니다.
+이는 선택된 `DashboardHeroComponent` 영웅이 실제로 이벤트 바인딩을 통해 호스트 컴포넌트로 올라간다는 것을 확인합니다.
 
-## Routing component
+## 라우팅 컴포넌트
 
-A *routing component* is a component that tells the `Router` to navigate to another component.
-The `DashboardComponent` is a *routing component* because the user can navigate to the `HeroDetailComponent` by clicking on one of the *hero buttons* on the dashboard.
+*라우팅 컴포넌트*는 `Router`에게 다른 컴포넌트로 내비게이션할 것을 지시하는 컴포넌트입니다.
+`DashboardComponent`는 사용자가 대시보드의 *영웅 버튼* 중 하나를 클릭하여 `HeroDetailComponent`로 탐색할 수 있기 때문에 *라우팅 컴포넌트*입니다.
 
-Angular provides test helpers to reduce boilerplate and more effectively test code which depends on `HttpClient`. The `provideRouter` function can be used directly in the test module as well.
+Angular는 `HttpClient`에 의존하는 코드를 더 효과적으로 테스트할 수 있도록 보일러플레이트를 줄이는 테스트 헬퍼를 제공합니다. `provideRouter` 함수도 테스트 모듈 내에서 직접 사용할 수 있습니다.
 
 <docs-code header="app/dashboard/dashboard.component.spec.ts" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts" visibleRegion="router-harness"/>
 
-The following test clicks the displayed hero and confirms that we navigate to the expected URL.
+다음 테스트는 표시되는 영웅을 클릭하고 예상 URL로 탐색하는 것을 확인합니다.
 
 <docs-code header="app/dashboard/dashboard.component.spec.ts (navigate test)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts" visibleRegion="navigate-test"/>
 
-## Routed components
+## 라우팅된 컴포넌트
 
-A *routed component* is the destination of a `Router` navigation.
-It can be trickier to test, especially when the route to the component *includes parameters*.
-The `HeroDetailComponent` is a *routed component* that is the destination of such a route.
+*라우팅된 컴포넌트*는 `Router` 내비게이션의 목적지입니다.
+라우팅 매개변수가 *포함되는* 경로일 때 테스트하기가 더 까다로울 수 있습니다.
+`HeroDetailComponent`는 그러한 경로의 목적지인 *라우팅된 컴포넌트*입니다.
 
-When a user clicks a *Dashboard* hero, the `DashboardComponent` tells the `Router` to navigate to `heroes/:id`.
-The `:id` is a route parameter whose value is the `id` of the hero to edit.
+사용자가 *대시보드* 영웅을 클릭하면 `DashboardComponent`가 `heroes/:id`로 내비게이션하라고 `Router`에게 지시합니다.
+`:id`는 편집할 영웅의 `id`에 해당하는 경로 매개변수입니다.
 
-The `Router` matches that URL to a route to the `HeroDetailComponent`.
-It creates an `ActivatedRoute` object with the routing information and injects it into a new instance of the `HeroDetailComponent`.
+`Router`는 해당 URL을 `HeroDetailComponent`에 대한 경로와 일치시킵니다.
+라우팅 정보를 담고 있는 `ActivatedRoute` 개체를 생성하고 이를 새로운 `HeroDetailComponent` 인스턴스에 주입합니다.
 
-Here's the `HeroDetailComponent` constructor:
+여기 `HeroDetailComponent` 생성자가 있습니다:
 
 <docs-code header="app/hero/hero-detail.component.ts (constructor)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="ctor"/>
 
-The `HeroDetail` component needs the `id` parameter so it can fetch the corresponding hero using the `HeroDetailService`.
-The component has to get the `id` from the `ActivatedRoute.paramMap` property which is an `Observable`.
+`HeroDetail` 컴포넌트는 해당 영웅을 가져오기 위해 `HeroDetailService`를 사용해야 하므로 `id` 매개변수가 필요합니다.
+이 컴포넌트는 `ActivatedRoute.paramMap` 속성에서 `id`를 가져와야 하며, 이는 `Observable`입니다.
 
-It can't just reference the `id` property of the `ActivatedRoute.paramMap`.
-The component has to *subscribe* to the `ActivatedRoute.paramMap` observable and be prepared for the `id` to change during its lifetime.
+`ActivatedRoute.paramMap`의 `id` 속성을 단순히 참조할 수는 없습니다.
+이 컴포넌트는 `ActivatedRoute.paramMap` 옵저버블을 *구독*해야 하며, `id`가 그 생애 주기 동안 변경될 수 있도록 대비해야 합니다.
 
 <docs-code header="app/hero/hero-detail.component.ts (ngOnInit)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="ng-on-init"/>
 
-Tests can explore how the `HeroDetailComponent` responds to different `id` parameter values by navigating to different routes.
+테스트는 `HeroDetailComponent`가 다양한 `id` 매개변수 값에 대응하는 방식을 탐구할 수 있습니다. 다른 경로로 내비게이션하여 확인하는 것입니다.
 
-### Testing with the `RouterTestingHarness`
+### `RouterTestingHarness`로 테스트하기
 
-Here's a test demonstrating the component's behavior when the observed `id` refers to an existing hero:
+여기 관찰된 `id`가 기존 영웅을 참조할 때 컴포넌트의 동작을 demonstrating하는 테스트가 있습니다:
 
 <docs-code header="app/hero/hero-detail.component.spec.ts (existing id)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="route-good-id"/>
 
-HELPFUL: In the following section, the `createComponent()` method and `page` object are discussed.
-Rely on your intuition for now.
+도움말: 다음 섹션에서는 `createComponent()` 메서드와 `page` 객체에 대해 설명합니다.
+지금은 여러분의 직감을 믿으십시오.
 
-When the `id` cannot be found, the component should re-route to the `HeroListComponent`.
+`id`를 찾을 수 없으면 컴포넌트는 `HeroListComponent`로 재라우팅해야 합니다.
 
-The test suite setup provided the same router harness [described above](#routing-component).
+테스트 스위트 설정은 [위에서 설명한](#routing-component) 동일한 라우터 헌트니스를 제공했습니다.
 
-This test expects the component to try to navigate to the `HeroListComponent`.
+이 테스트는 컴포넌트가 `HeroListComponent`로 내비게이션하려고 시도할 것으로 기대합니다.
 
 <docs-code header="app/hero/hero-detail.component.spec.ts (bad id)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="route-bad-id"/>
 
-## Nested component tests
+## 중첩된 컴포넌트 테스트
 
-Component templates often have nested components, whose templates might contain more components.
+컴포넌트 템플릿은 종종 중첩된 컴포넌트를 가지며, 그 템플릿에는 더 많은 컴포넌트가 포함될 수 있습니다.
 
-The component tree can be very deep and sometimes the nested components play no role in testing the component at the top of the tree.
+컴포넌트 트리는 매우 깊을 수 있으며 때때로 중첩된 컴포넌트는 트리 맨 위의 컴포넌트를 테스트하는 데 아무런 역할을 하지 않을 수 있습니다.
 
-The `AppComponent`, for example, displays a navigation bar with anchors and their `RouterLink` directives.
+예를 들어, `AppComponent`는 앵커와 해당 `RouterLink` 지시자가 있는 탐색 모음을 표시합니다.
 
 <docs-code header="app/app.component.html" path="adev/src/content/examples/testing/src/app/app.component.html"/>
 
-To validate the links but not the navigation, you don't need the `Router` to navigate and you don't need the `<router-outlet>` to mark where the `Router` inserts *routed components*.
+링크를 검증하지만 내비게이션은 검증할 필요가 없으므로 `Router`가 내비게이션할 필요도 없고 `<router-outlet>`가 *라우팅된 컴포넌트*가 삽입될 위치를 표시할 필요도 없습니다.
 
-The `BannerComponent` and `WelcomeComponent` \(indicated by `<app-banner>` and `<app-welcome>`\) are also irrelevant.
+`BannerComponent`와 `WelcomeComponent` (`<app-banner>`와 `<app-welcome>`로 각각 표시됨)도 무관합니다.
 
-Yet any test that creates the `AppComponent` in the DOM also creates instances of these three components and, if you let that happen, you'll have to configure the `TestBed` to create them.
+그럼에도 불구하고 DOM에 `AppComponent`를 생성하는 테스트는 이 세 컴포넌트의 인스턴스를 생성하며, 그렇게 되도록 한다면 `TestBed`를 구성하여 이들을 생성해야 합니다.
 
-If you neglect to declare them, the Angular compiler won't recognize the `<app-banner>`, `<app-welcome>`, and `<router-outlet>` tags in the `AppComponent` template and will throw an error.
+그들을 선언하지 않으면 Angular 컴파일러는 `AppComponent` 템플릿에서 `<app-banner>`, `<app-welcome>`, `<router-outlet>` 태그를 인식하지 못하고 오류를 발생시킵니다.
 
-If you declare the real components, you'll also have to declare *their* nested components and provide for *all* services injected in *any* component in the tree.
+실제 컴포넌트를 선언하면 *그들의* 중첩된 컴포넌트도 선언해야 하며, 트리 내의 *모든* 컴포넌트에서 주입된 모든 서비스에 대한 제공이 필요합니다.
 
-This section describes two techniques for minimizing the setup.
-Use them, alone or in combination, to stay focused on testing the primary component.
+이 섹션에서는 설정 최소화를 위한 두 가지 기술을 설명합니다.
+주요 컴포넌트를 테스트하는 데 집중하려면 이 기술들을 단독으로 또는 조합하여 사용하세요.
 
-### Stubbing unneeded components
+### 불필요한 컴포넌트 스텁
 
-In the first technique, you create and declare stub versions of the components and directive that play little or no role in the tests.
+첫 번째 기술에서는 테스트에서 거의 또는 전혀 역할을 하지 않는 컴포넌트 및 지시자의 스텁 버전을 생성하고 선언합니다.
 
 <docs-code header="app/app.component.spec.ts (stub declaration)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="component-stubs"/>
 
-The stub selectors match the selectors for the corresponding real components.
-But their templates and classes are empty.
+스텁 선택자는 해당 실제 컴포넌트의 선택자와 일치합니다.
+그러나 템플릿과 클래스는 비어 있습니다.
 
-Then declare them in the `TestBed` configuration next to the components, directives, and pipes that need to be real.
+그런 다음 이들을 실제가 필요한 컴포넌트, 지시자 및 파이프와 함께 `TestBed` 구성에서 선언하세요.
 
 <docs-code header="app/app.component.spec.ts (TestBed stubs)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="testbed-stubs"/>
 
-The `AppComponent` is the test subject, so of course you declare the real version.
+`AppComponent`는 테스트 주제이므로 물론 실제 버전을 선언합니다.
 
-The rest are stubs.
+나머지는 스텁입니다.
 
 ### `NO_ERRORS_SCHEMA`
 
-In the second approach, add `NO_ERRORS_SCHEMA` to the `TestBed.schemas` metadata.
+두 번째 접근법은 `NO_ERRORS_SCHEMA`를 `TestBed.schemas` 메타데이터에 추가하는 것입니다.
 
 <docs-code header="app/app.component.spec.ts (NO_ERRORS_SCHEMA)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="no-errors-schema"/>
 
-The `NO_ERRORS_SCHEMA` tells the Angular compiler to ignore unrecognized elements and attributes.
+`NO_ERRORS_SCHEMA`는 Angular 컴파일러에게 인식되지 않은 요소와 속성을 무시하라고 지시합니다.
 
-The compiler recognizes the `<app-root>` element and the `routerLink` attribute because you declared a corresponding `AppComponent` and `RouterLink` in the `TestBed` configuration.
+컴파일러는 `<app-root>` 요소와 `routerLink` 속성을 인식합니다. 왜냐하면 `TestBed` 구성에서 해당 `AppComponent`와 `RouterLink`를 선언했기 때문입니다.
 
-But the compiler won't throw an error when it encounters `<app-banner>`, `<app-welcome>`, or `<router-outlet>`.
-It simply renders them as empty tags and the browser ignores them.
+하지만 `<app-banner>`, `<app-welcome>` 또는 `<router-outlet>`을 만날 때 컴파일러는 오류를 발생시키지 않습니다.
+단순히 빈 태그로 렌더링되고 브라우저는 이를 무시합니다.
 
-You no longer need the stub components.
+이제 더 이상 스텁 컴포넌트가 필요하지 않습니다.
 
-### Use both techniques together
+### 두 기술을 함께 사용하기
 
-These are techniques for *Shallow Component Testing*, so-named because they reduce the visual surface of the component to just those elements in the component's template that matter for tests.
+이들은 *얕은 컴포넌트 테스트*를 위한 기술입니다. 이 이름은 컴포넌트의 시각적 표면을 테스트에 중요한 컴포넌트 템플릿 요소로만 축소하기 때문입니다.
 
-The `NO_ERRORS_SCHEMA` approach is the easier of the two but don't overuse it.
+`NO_ERRORS_SCHEMA` 접근법이 두 개 중 더 쉽지만, 남용하지 않도록 하세요.
 
-The `NO_ERRORS_SCHEMA` also prevents the compiler from telling you about the missing components and attributes that you omitted inadvertently or misspelled.
-You could waste hours chasing phantom bugs that the compiler would have caught in an instant.
+`NO_ERRORS_SCHEMA`는 또한 컴파일러가 여러분이 실수로 생략한 누락된 컴포넌트와 속성에 대해 알려주지 않게 합니다.
+잘못된 철자를 작성한 것들도 포함됩니다.
+여러분은 컴파일러가 즉각적으로 잡을 수 있는 유령 버그를 여러 시간 동안 추적하는 데 시간을 낭비할 수 있습니다.
 
-The *stub component* approach has another advantage.
-While the stubs in *this* example were empty, you could give them stripped-down templates and classes if your tests need to interact with them in some way.
+*스텁 컴포넌트* 접근 방식은 또 다른 장점이 있습니다.
+이 예에서 스텁은 비어 있었지만, 테스트가 이를 어떤 방식으로든 상호작용할 필요가 있다면 축소된 템플릿과 클래스에 이를 제공할 수도 있습니다.
 
-In practice you will combine the two techniques in the same setup, as seen in this example.
+실제에는 동일한 설정에서 두 기술을 결합할 것입니다. 이 예제를 봐 보세요.
 
 <docs-code header="app/app.component.spec.ts (mixed setup)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="mixed-setup"/>
 
-The Angular compiler creates the `BannerStubComponent` for the `<app-banner>` element and applies the `RouterLink` to the anchors with the `routerLink` attribute, but it ignores the `<app-welcome>` and `<router-outlet>` tags.
+Angular 컴파일러는 `<app-banner>` 요소에 대해 `BannerStubComponent`를 생성하고, `routerLink` 속성이 있는 앵커에 `RouterLink`를 적용하지만, `<app-welcome>` 및 `<router-outlet>` 태그는 무시합니다.
 
-### `By.directive` and injected directives
+### `By.directive` 및 주입된 지시자
 
-A little more setup triggers the initial data binding and gets references to the navigation links:
+조금 더 많은 설정이 초기 데이터 바인딩을 트리거하고 탐색 링크에 대한 참조를 가져옵니다:
 
 <docs-code header="app/app.component.spec.ts (test setup)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="test-setup"/>
 
-Three points of special interest:
+세 가지 특별한 관심 포인트:
 
-* Locate the anchor elements with an attached directive using `By.directive`
-* The query returns `DebugElement` wrappers around the matching elements
-* Each `DebugElement` exposes a dependency injector with the specific instance of the directive attached to that element
+* `By.directive`를 사용하여 연결된 지시자가 있는 앵커 요소 찾기
+* 쿼리는 일치하는 요소 주위에 `DebugElement` 래퍼를 반환합니다
+* 각 `DebugElement`는 해당 요소에 연결된 지시자의 특정 인스턴스가 있는 종속성 주입기를 노출합니다
 
-The `AppComponent` links to validate are as follows:
+검증할 `AppComponent` 링크는 다음과 같습니다:
 
 <docs-code header="app/app.component.html (navigation links)" path="adev/src/content/examples/testing/src/app/app.component.html" visibleRegion="links"/>
 
-Here are some tests that confirm those links are wired to the `routerLink` directives as expected:
+여기 이러한 링크가 예상대로 `routerLink` 지시자에 연결되었음을 확인하는 몇 가지 테스트가 있습니다:
 
 <docs-code header="app/app.component.spec.ts (selected tests)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="tests"/>
 
-## Use a `page` object
+## `page` 객체 사용
 
-The `HeroDetailComponent` is a simple view with a title, two hero fields, and two buttons.
+`HeroDetailComponent`는 제목, 두 개의 영웅 필드 및 두 개의 버튼을 가진 간단한 보기입니다.
 
-But there's plenty of template complexity even in this simple form.
+하지만 이 간단한 폼에도 상당한 템플릿 복잡성이 있습니다.
 
 <docs-code
   path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.html" header="app/hero/hero-detail.component.html"/>
 
-Tests that exercise the component need …
+컴포넌트를 실행하는 테스트는 필요합니다...
 
-* To wait until a hero arrives before elements appear in the DOM
-* A reference to the title text
-* A reference to the name input box to inspect and set it
-* References to the two buttons so they can click them
+* 영웅이 도착할 때까지 기다린 후 DOM에 요소가 나타납니다.
+* 제목 텍스트에 대한 참조
+* 검사하고 설정할 이름 입력 상자에 대한 참조
+* 클릭할 수 있도록 두 개의 버튼에 대한 참조
 
-Even a small form such as this one can produce a mess of tortured conditional setup and CSS element selection.
+이러한 작은 폼조차도 얽히고 섥힌 조건부 설정 및 CSS 요소 선택의 혼란을 만들 수 있습니다.
 
-Tame the complexity with a `Page` class that handles access to component properties and encapsulates the logic that sets them.
+`Page` 클래스를 사용하여 컴포넌트 속성에 접근하고 이를 설정하는 로직을 캡슐화하여 복잡성을 제어하세요.
 
-Here is such a `Page` class for the `hero-detail.component.spec.ts`
+여기 `hero-detail.component.spec.ts`의 `Page` 클래스가 있습니다.
 
 <docs-code header="app/hero/hero-detail.component.spec.ts (Page)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="page"/>
 
-Now the important hooks for component manipulation and inspection are neatly organized and accessible from an instance of `Page`.
+이제 컴포넌트 조작 및 검사에 대한 주요 후크가 깔끔하게 정리되어 `Page`의 인스턴스에서 접근할 수 있습니다.
 
-A `createComponent` method creates a `page` object and fills in the blanks once the `hero` arrives.
+`createComponent` 메서드는 `page` 객체를 생성하고 영웅이 도착하면 빈틈을 채웁니다.
 
 <docs-code header="app/hero/hero-detail.component.spec.ts (createComponent)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="create-component"/>
 
-Here are a few more `HeroDetailComponent` tests to reinforce the point.
+여기 몇 가지 추가 `HeroDetailComponent` 테스트가 있으며 이를 강화합니다.
 
 <docs-code header="app/hero/hero-detail.component.spec.ts (selected tests)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="selected-tests"/>
 
-## Calling `compileComponents()`
+## `compileComponents()` 호출
 
-HELPFUL: Ignore this section if you *only* run tests with the CLI `ng test` command because the CLI compiles the application before running the tests.
+도움말: CLI `ng test` 명령으로만 테스트를 실행하는 경우 이 섹션을 무시하세요. CLI가 테스트 실행 전에 애플리케이션을 컴파일하기 때문입니다.
 
-If you run tests in a **non-CLI environment**, the tests might fail with a message like this one:
+**비 CLI 환경**에서 테스트를 실행하면 아래와 같은 메시지가 나타날 수 있습니다.
 
 <docs-code hideCopy language="shell">
 
@@ -746,29 +741,28 @@ Please call "TestBed.compileComponents" before your test.
 
 </docs-code>
 
-The root of the problem is at least one of the components involved in the test specifies an external template or CSS file as the following version of the `BannerComponent` does.
+문제의 근본 원인은 테스트에 포함된 최소한 하나의 컴포넌트가 아래 버전의 `BannerComponent`와 같이 외부 템플릿이나 CSS 파일을 지정하고 있다는 것입니다.
 
 <docs-code header="app/banner/banner-external.component.ts (external template & css)" path="adev/src/content/examples/testing/src/app/banner/banner-external.component.ts"/>
 
-The test fails when the `TestBed` tries to create the component.
+테스트는 `TestBed`가 컴포넌트를 생성하려고 할 때 실패합니다.
 
 <docs-code avoid header="app/banner/banner-external.component.spec.ts (setup that fails)" path="adev/src/content/examples/testing/src/app/banner/banner-external.component.spec.ts" visibleRegion="setup-may-fail"/>
 
-Recall that the application hasn't been compiled.
-So when you call `createComponent()`, the `TestBed` compiles implicitly.
+애플리케이션이 아직 컴파일되지 않았음을 기억하십시오.
+따라서 `createComponent()`를 호출할 때, `TestBed`는 암묵적으로 컴파일을 수행합니다.
 
-That's not a problem when the source code is in memory.
-But the `BannerComponent` requires external files that the compiler must read from the file system, an inherently *asynchronous* operation.
+소스 코드가 메모리에 있을 때에는 문제가 되지 않지만, `BannerComponent`는 컴파일러가 파일 시스템에서 읽어야 하는 외부 파일이 필요하며, 이는 본질적으로 *비동기* 작업입니다.
 
-If the `TestBed` were allowed to continue, the tests would run and fail mysteriously before the compiler could finish.
+`TestBed`가 진행되도록 하면 테스트가 실행되며 컴파일러가 완료되기 전에 신비롭게 실패합니다.
 
-The preemptive error message tells you to compile explicitly with `compileComponents()`.
+사전 오류 메시지는 `compileComponents()`로 명시적으로 컴파일해야 한다고 알려줍니다.
 
-### `compileComponents()` is async
+### `compileComponents()`는 비동기입니다
 
-You must call `compileComponents()` within an asynchronous test function.
+`compileComponents()`는 비동기 테스트 함수 내에서 호출해야 합니다.
 
-CRITICAL: If you neglect to make the test function async (for example, forget to use `waitForAsync()` as described), you'll see this error message
+중요: 테스트 함수가 비동기 함수를 만들지 않으면 (예를 들어, `waitForAsync()`를 사용하는 것을 잊는 것과 같은) 다음 오류 메시지가 표시됩니다.
 
 <docs-code hideCopy language="shell">
 
@@ -776,156 +770,156 @@ Error: ViewDestroyedError: Attempt to use a destroyed view
 
 </docs-code>
 
-A typical approach is to divide the setup logic into two separate `beforeEach()` functions:
+전형적인 접근 방식은 설정 로직을 두 개의 별도 `beforeEach()` 함수로 나누는 것입니다:
 
-| Functions                   | Details                      |
-| :-------------------------- | :--------------------------- |
-| Asynchronous `beforeEach()` | Compiles the components      |
-| Synchronous `beforeEach()`  | Performs the remaining setup |
+| 함수                      | 세부정보                   |
+| :------------------------- | :------------------------- |
+| 비동기 `beforeEach()`     | 컴포넌트를 컴파일합니다     |
+| 동기 `beforeEach()`       | 나머지 설정을 수행합니다    |
 
-### The async `beforeEach`
+### 비동기 `beforeEach`
 
-Write the first async `beforeEach` like this.
+첫 번째 비동기 `beforeEach`를 다음과 같이 작성합니다.
 
 <docs-code header="app/banner/banner-external.component.spec.ts (async beforeEach)" path="adev/src/content/examples/testing/src/app/banner/banner-external.component.spec.ts" visibleRegion="async-before-each"/>
 
-The `TestBed.configureTestingModule()` method returns the `TestBed` class so you can chain calls to other `TestBed` static methods such as `compileComponents()`.
+`TestBed.configureTestingModule()` 메서드는 `TestBed` 클래스를 반환하므로, `compileComponents()`와 같은 다른 `TestBed` 정적 메서드에 대한 호출을 연결할 수 있습니다.
 
-In this example, the `BannerComponent` is the only component to compile.
-Other examples configure the testing module with multiple components and might import application modules that hold yet more components.
-Any of them could require external files.
+이 예에서 `BannerComponent`는 유일하게 컴파일될 컴포넌트입니다.
+다른 예제에서는 여러 컴포넌트로 테스트 모듈을 구성하거나, 더 많은 컴포넌트를 보유하는 애플리케이션 모듈을 가져올 수 있습니다.
+그 중 어떤 것도 외부 파일이 필요할 수 있습니다.
 
-The `TestBed.compileComponents` method asynchronously compiles all components configured in the testing module.
+`TestBed.compileComponents` 메서드는 테스트 모듈에서 구성된 모든 컴포넌트를 비동기적으로 컴파일합니다.
 
-IMPORTANT: Do not re-configure the `TestBed` after calling `compileComponents()`.
+중요: `compileComponents()`를 호출한 후에는 `TestBed`를 다시 구성하지 마십시오.
 
-Calling `compileComponents()` closes the current `TestBed` instance to further configuration.
-You cannot call any more `TestBed` configuration methods, not `configureTestingModule()` nor any of the `override...` methods.
-The `TestBed` throws an error if you try.
+`compileComponents()`는 현재 `TestBed` 인스턴스를 더 이상 구성할 수 없도록 닫습니다.
+`configureTestingModule()`이나 `override...` 메서드를 호출할 수 없습니다.
+이렇게 시도하면 `TestBed`에서 오류를 발생시킵니다.
 
-Make `compileComponents()` the last step before calling `TestBed.createComponent()`.
+`TestBed.createComponent()`를 호출하기 전 마지막 단계로 `compileComponents()`를 호출하세요.
 
-### The synchronous `beforeEach`
+### 동기 `beforeEach`
 
-The second, synchronous `beforeEach()` contains the remaining setup steps, which include creating the component and querying for elements to inspect.
+두 번째 동기 `beforeEach()`는 컴포넌트를 생성하고 검토할 요소를 쿼리하는 등 나머지 설정 단계를 포함합니다.
 
 <docs-code header="app/banner/banner-external.component.spec.ts (synchronous beforeEach)" path="adev/src/content/examples/testing/src/app/banner/banner-external.component.spec.ts" visibleRegion="sync-before-each"/>
 
-Count on the test runner to wait for the first asynchronous `beforeEach` to finish before calling the second.
+테스트 러너는 첫 번째 비동기 `beforeEach`가 완료될 때까지 기다렸다가 두 번째를 호출할 것을 기대합니다.
 
-### Consolidated setup
+### 통합된 설정
 
-You can consolidate the two `beforeEach()` functions into a single, async `beforeEach()`.
+두 개의 `beforeEach()` 함수를 단일 비동기 `beforeEach()`로 통합할 수 있습니다.
 
-The `compileComponents()` method returns a promise so you can perform the synchronous setup tasks *after* compilation by moving the synchronous code after the `await` keyword, where the promise has been resolved.
+`compileComponents()` 메서드는 프로미스를 반환하므로, 비동기 코드가 해결된 후 컴파일이 완료된 후 동기 설정 작업을 수행할 수 있습니다. `await` 키워드 뒤로 동기 코드를 이동하세요.
 
 <docs-code header="app/banner/banner-external.component.spec.ts (one beforeEach)" path="adev/src/content/examples/testing/src/app/banner/banner-external.component.spec.ts" visibleRegion="one-before-each"/>
 
-### `compileComponents()` is harmless
+### `compileComponents()`는 무해합니다
 
-There's no harm in calling `compileComponents()` when it's not required.
+`compileComponents()`를 호출하는 것은 필요하지 않을 때 해가 되지 않습니다.
 
-The component test file generated by the CLI calls `compileComponents()` even though it is never required when running `ng test`.
+CLI에 의해 생성된 컴포넌트 테스트 파일은 `ng test`를 실행할 때 필요하지 않더라도 `compileComponents()`를 호출합니다.
 
-The tests in this guide only call `compileComponents` when necessary.
+이 가이드의 테스트는 필요할 때만 `compileComponents`를 호출합니다.
 
-## Setup with module imports
+## 모듈 가져오기로 설정
 
-Earlier component tests configured the testing module with a few `declarations` like this:
+이전에 컴포넌트 테스트는 다음과 같이 몇 가지 `declarations`로 테스트 모듈을 구성했습니다:
 
 <docs-code header="app/dashboard/dashboard-hero.component.spec.ts (configure TestBed)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="config-testbed"/>
 
-The `DashboardComponent` is simple.
-It needs no help.
-But more complex components often depend on other components, directives, pipes, and providers and these must be added to the testing module too.
+`DashboardComponent`는 간단합니다.
+도움이 필요하지 않습니다.
+하지만 더 복잡한 컴포넌트는 종종 다른 컴포넌트, 지시자, 파이프 및 제공자에 의존하며, 이를 테스트 모듈에 추가해야 합니다.
 
-Fortunately, the `TestBed.configureTestingModule` parameter parallels the metadata passed to the `@NgModule` decorator which means you can also specify `providers` and `imports`.
+다행히도 `TestBed.configureTestingModule` 매개변수는 `@NgModule` 데코레이터에 전달되는 메타데이터와 평행을 이루므로 `providers`와 `imports`도 지정할 수 있습니다.
 
-The `HeroDetailComponent` requires a lot of help despite its small size and simple construction.
-In addition to the support it receives from the default testing module `CommonModule`, it needs:
+`HeroDetailComponent`는 작지만 간단한 구성으로 인해 많은 도움이 필요합니다.
+기본 테스트 모듈 `CommonModule`로부터 제공되는 지원 외에도, 다음이 필요합니다:
 
-* `NgModel` and friends in the `FormsModule` to enable two-way data binding
-* The `TitleCasePipe` from the `shared` folder
-* The Router services
-* The Hero data access services
+* 두 방향 데이터 바인딩을 활성화하기 위한 `FormsModule`의 `NgModel` 및 친구들
+* `shared` 폴더의 `TitleCasePipe`
+* 라우터 서비스
+* 영웅 데이터 접근 서비스
 
-One approach is to configure the testing module from the individual pieces as in this example:
+하나는 다음 예제와 같이 개별 조각에서 테스트 모듈 구성을 다루는 것입니다:
 
 <docs-code header="app/hero/hero-detail.component.spec.ts (FormsModule setup)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="setup-forms-module"/>
 
-HELPFUL: Notice that the `beforeEach()` is asynchronous and calls `TestBed.compileComponents` because the `HeroDetailComponent` has an external template and css file.
+도움말: `HeroDetailComponent`에 외부 템플릿과 CSS 파일이 있기 때문에 `beforeEach()`은 비동기이며 `TestBed.compileComponents`를 호출합니다.
 
-As explained in [Calling `compileComponents()`](#calling-compilecomponents), these tests could be run in a non-CLI environment where Angular would have to compile them in the browser.
+[Calling `compileComponents()`](#calling-compilecomponents)에서 설명된 대로 이러한 테스트는 Angular가 브라우저에서 컴파일해야 하는 비 CLI 환경에서 실행될 수 있습니다.
 
-### Import a shared module
+### 공유 모듈 가져오기
 
-Because many application components need the `FormsModule` and the `TitleCasePipe`, the developer created a `SharedModule` to combine these and other frequently requested parts.
+많은 애플리케이션 컴포넌트가 `FormsModule` 및 `TitleCasePipe`를 필요로 하므로 개발자는 이를 결합한 `SharedModule`을 만들었습니다.
 
-The test configuration can use the `SharedModule` too as seen in this alternative setup:
+테스트 구성은 다음과 같이 `SharedModule`을 사용할 수 있습니다:
 
 <docs-code header="app/hero/hero-detail.component.spec.ts (SharedModule setup)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="setup-shared-module"/>
 
-It's a bit tighter and smaller, with fewer import statements, which are not shown in this example.
+조금 더 간결하고 작으며, 적은 수의 가져오기 문이 포함되어 있습니다. 이 예제에서는 표시되지 않습니다.
 
-### Import a feature module
+### 기능 모듈 가져오기
 
-The `HeroDetailComponent` is part of the `HeroModule` [Feature Module](guide/ngmodules/feature-modules) that aggregates more of the interdependent pieces including the `SharedModule`.
-Try a test configuration that imports the `HeroModule` like this one:
+`HeroDetailComponent`는 `SharedModule` 등 서로 의존하는 조각들을 집합적으로 포함하는 `HeroModule`의 일부입니다.
+다음과 같이 `HeroModule`을 가져오는 테스트 구성을 시도해 보세요:
 
 <docs-code header="app/hero/hero-detail.component.spec.ts (HeroModule setup)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="setup-hero-module"/>
 
-Only the *test doubles* in the `providers` remain.
-Even the `HeroDetailComponent` declaration is gone.
+* 테스트 더블 *는 `providers`에 잔류합니다.
+`HeroDetailComponent` 선언도 사라졌습니다.
 
-In fact, if you try to declare it, Angular will throw an error because `HeroDetailComponent` is declared in both the `HeroModule` and the `DynamicTestModule` created by the `TestBed`.
+사실, 이를 선언하려고 하면 Angular가 `HeroDetailComponent`가 `HeroModule`과 `DynamicTestModule`의 두 곳에 선언되기 때문에 오류를 발생시킵니다.
 
-HELPFUL: Importing the component's feature module can be the best way to configure tests when there are many mutual dependencies within the module and the module is small, as feature modules tend to be.
+도움말: 컴포넌트의 기능 모듈을 가져오는 것은 모듈 내에 서로 많은 의존성이 있을 경우, 테스트를 구성하는 가장 좋은 방법일 수 있으며, 기능 모듈은 작기 때문입니다.
 
-## Override component providers
+## 컴포넌트 제공자 변경
 
-The `HeroDetailComponent` provides its own `HeroDetailService`.
+`HeroDetailComponent`는 자신의 `HeroDetailService`를 제공합니다.
 
 <docs-code header="app/hero/hero-detail.component.ts (prototype)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="prototype"/>
 
-It's not possible to stub the component's `HeroDetailService` in the `providers` of the `TestBed.configureTestingModule`.
-Those are providers for the *testing module*, not the component.
-They prepare the dependency injector at the *fixture level*.
+`TestBed.configureTestingModule`의 `providers`에서 컴포넌트의 `HeroDetailService`를 스텁할 수는 없습니다.
+이는 *테스트 모듈*을 위한 제공자이지 컴포넌트가 아닙니다.
+테스트를 위해서는 주입기를 *Fixture 수준*에서 준비합니다.
 
-Angular creates the component with its *own* injector, which is a *child* of the fixture injector.
-It registers the component's providers \(the `HeroDetailService` in this case\) with the child injector.
+Angular는 *자신의* 주입기와 함께 컴포넌트를 생성하며, 이는 `fixture` 주입기의 *자식*입니다.
+컴포넌트 제공자(`HeroDetailService`인 경우)가 자식 주입기에 등록됩니다.
 
-A test cannot get to child injector services from the fixture injector.
-And `TestBed.configureTestingModule` can't configure them either.
+테스트는 `fixture` 주입기에서 자식 주입기 서비스로 접근할 수 없습니다.
+`TestBed.configureTestingModule`이 이것들을 구성할 수 없습니다.
 
-Angular has created new instances of the real `HeroDetailService` all along!
+Angular는 항상 실제 `HeroDetailService`의 새 인스턴스를 생성해왔습니다!
 
-HELPFUL: These tests could fail or timeout if the `HeroDetailService` made its own XHR calls to a remote server.
-There might not be a remote server to call.
+도움말: 이러한 테스트는 `HeroDetailService`가 원격 서버에 대한 자체 XHR 호출을 하는 경우 실패하거나 타임아웃될 수 있습니다.
+호출할 원격 서버가 없을 수 있습니다.
 
-Fortunately, the `HeroDetailService` delegates responsibility for remote data access to an injected `HeroService`.
+다행히도 `HeroDetailService`는 주입된 `HeroService`에 원격 데이터 접근의 책임을 위임합니다.
 
 <docs-code header="app/hero/hero-detail.service.ts (prototype)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.service.ts" visibleRegion="prototype"/>
 
-The [previous test configuration](#import-a-feature-module) replaces the real `HeroService` with a `TestHeroService` that intercepts server requests and fakes their responses.
+[이전 테스트 구성](#import-a-feature-module)은 실제 `HeroService`를 서버 요청을 가로채고 응답을 가장하는 `TestHeroService`로 대체합니다.
 
-What if you aren't so lucky.
-What if faking the `HeroService` is hard?
-What if `HeroDetailService` makes its own server requests?
+운이 좋지 않다면 어떨까요.
+`HeroService`를 가장하는 것이 어렵다면?
+`HeroDetailService`가 자신의 서버 요청을 한다면?
 
-The `TestBed.overrideComponent` method can replace the component's `providers` with easy-to-manage *test doubles* as seen in the following setup variation:
+`TestBed.overrideComponent` 메서드는 다음 설정 변형과 같이 컴포넌트의 `providers`를 쉽게 관리할 수 있는 *테스트 더블*로 대체할 수 있습니다:
 
 <docs-code header="app/hero/hero-detail.component.spec.ts (Override setup)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="setup-override"/>
 
-Notice that `TestBed.configureTestingModule` no longer provides a fake `HeroService` because it's [not needed](#spy-stub).
+`TestBed.configureTestingModule`가 더 이상 가짜 `HeroService`를 제공하지 않는 점에 유의하세요. 필요하지 않기 때문입니다.
 
-### The `overrideComponent` method
+### `overrideComponent` 메서드
 
-Focus on the `overrideComponent` method.
+`overrideComponent` 메서드에 집중하세요.
 
 <docs-code header="app/hero/hero-detail.component.spec.ts (overrideComponent)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="override-component-method"/>
 
-It takes two arguments: the component type to override \(`HeroDetailComponent`\) and an override metadata object.
-The [override metadata object](guide/testing/utility-apis#metadata-override-object) is a generic defined as follows:
+이것은 두 개의 인수를 받습니다: 대체할 컴포넌트 유형 (`HeroDetailComponent`)과 대체 메타데이터 객체.
+[오버라이드 메타데이터 객체](guide/testing/utility-apis#metadata-override-object)는 다음과 같이 정의된 제네릭입니다.
 
 <docs-code language="javascript">
 
@@ -937,10 +931,10 @@ type MetadataOverride<T> = {
 
 </docs-code>
 
-A metadata override object can either add-and-remove elements in metadata properties or completely reset those properties.
-This example resets the component's `providers` metadata.
+메타데이터 오버라이드 객체는 메타데이터 속성에서 요소를 추가 및 제거하거나 그 속성을 완전히 재설정할 수 있습니다.
+이 예제는 컴포넌트의 `providers` 메타데이터를 재설정합니다.
 
-The type parameter, `T`, is the kind of metadata you'd pass to the `@Component` decorator:
+제네릭 매개변수 `T`는 `@Component` 데코레이터에 전달할 메타데이터의 종류입니다:
 
 <docs-code language="javascript">
 
@@ -952,27 +946,27 @@ providers?: any[];
 
 </docs-code>
 
-### Provide a *spy stub* (`HeroDetailServiceSpy`)
+### *스파이 스텁* 제공 (`HeroDetailServiceSpy`)
 
-This example completely replaces the component's `providers` array with a new array containing a `HeroDetailServiceSpy`.
+이 예제는 컴포넌트의 `providers` 배열을 `HeroDetailServiceSpy`인 새 배열로 완전히 대체합니다.
 
-The `HeroDetailServiceSpy` is a stubbed version of the real `HeroDetailService` that fakes all necessary features of that service.
-It neither injects nor delegates to the lower level `HeroService` so there's no need to provide a test double for that.
+`HeroDetailServiceSpy`는 해당 서비스의 모든 필요한 기능을 가장하는 스텁된 버전입니다.
+이는 하위 수준의 `HeroService`에 의존하지 않으며 이를 주입하거나 위임하지 않으니 해당 테스트 더블을 제공할 필요가 없습니다.
 
-The related `HeroDetailComponent` tests will assert that methods of the `HeroDetailService` were called by spying on the service methods.
-Accordingly, the stub implements its methods as spies:
+관련 `HeroDetailComponent` 테스트는 `HeroDetailService`의 메서드가 호출되었음을 스파이를 사용하여 확인합니다.
+따라서 스텁은 다음과 같이 스파이로 메서드를 구현합니다:
 
 <docs-code header="app/hero/hero-detail.component.spec.ts (HeroDetailServiceSpy)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="hds-spy"/>
 
-### The override tests
+### 오버라이드 테스트
 
-Now the tests can control the component's hero directly by manipulating the spy-stub's `testHero` and confirm that service methods were called.
+이제 테스트는 스파이 스텁의 `testHero`를 조작하여 컴포넌트의 영웅을 직접 제어하고 서비스 메서드가 호출되었음을 확인할 수 있습니다.
 
 <docs-code header="app/hero/hero-detail.component.spec.ts (override tests)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="override-tests"/>
 
-### More overrides
+### 더 많은 오버라이드
 
-The `TestBed.overrideComponent` method can be called multiple times for the same or different components.
-The `TestBed` offers similar `overrideDirective`, `overrideModule`, and `overridePipe` methods for digging into and replacing parts of these other classes.
+`TestBed.overrideComponent` 메서드는 동일한 또는 다른 컴포넌트에 대해 여러 번 호출될 수 있습니다.
+`TestBed`는 이러한 다른 클래스의 일부를 다루고 교체하기 위해 비슷한 `overrideDirective`, `overrideModule`, `overridePipe` 메서드를 제공합니다.
 
-Explore the options and combinations on your own.
+자신의 옵션과 조합을 탐색해 보세요.
\ No newline at end of file
diff --git a/adev/src/content/guide/testing/creating-component-harnesses.md b/adev/src/content/guide/testing/creating-component-harnesses.md
index 692b8d8cd041..8996fd09a27f 100644
--- a/adev/src/content/guide/testing/creating-component-harnesses.md
+++ b/adev/src/content/guide/testing/creating-component-harnesses.md
@@ -1,28 +1,28 @@
-# Creating harnesses for your components
+# 컴포넌트를 위한 하네스 생성하기
 
-## Before you start
+## 시작하기 전에
 
-Tip: This guide assumes you've already read the [component harnesses overview guide](guide/testing/component-harnesses-overview). Read that first if you're new to using component harnesses.
+팁: 이 가이드는 이미 [컴포넌트 하네스 개요 가이드](guide/testing/component-harnesses-overview)를 읽었음을 전제로 합니다. 컴포넌트 하네스를 처음 사용하는 경우 먼저 이 부분을 읽어보세요.
 
-### When does creating a test harness make sense?
+### 테스트 하네스를 만드는 것이 언제 의미가 있나요?
 
-The Angular team recommends creating component test harnesses for shared components that are used in many places and have some user interactivity. This most commonly applies to widget libraries and similar reusable components. Harnesses are valuable for these cases because they provide the consumers of these shared components a well- supported API for interacting with a component. Tests that use harnesses can avoid depending on unreliable implementation details of these shared components, such as DOM structure and specific event listeners.
+Angular 팀은 여러 곳에서 사용되고 사용자 상호작용이 있는 공유 컴포넌트에 대한 컴포넌트 테스트 하네스를 생성할 것을 권장합니다. 이는 일반적으로 위젯 라이브러리 및 유사한 재사용 가능한 컴포넌트에 적용됩니다. 하네스는 이러한 경우에 유용한데, 이는 이러한 공유 컴포넌트의 소비자에게 컴포넌트와 상호작용하기 위한 잘 지원된 API를 제공하기 때문입니다. 하네스를 사용하는 테스트는 DOM 구조 및 특정 이벤트 리스너와 같은 이러한 공유 컴포넌트의 신뢰할 수 없는 구현 세부정보에 의존하는 것을 피할 수 있습니다.
 
-For components that appear in only one place, such as a page in an application, harnesses don't provide as much benefit. In these situations, a component's tests can reasonably depend on the implementation details of this component, as the tests and components are updated at the same time. However, harnesses still provide some value if you would use the harness in both unit and end-to-end tests.
+애플리케이션의 페이지와 같이 한 곳에만 나타나는 컴포넌트의 경우, 하네스는 그리 큰 이점을 제공하지 않습니다. 이러한 상황에서는 컴포넌트의 테스트가 이 컴포넌트의 구현 세부정보에 합리적으로 의존할 수 있습니다. 왜냐하면 테스트와 컴포넌트가 동시에 업데이트되기 때문입니다. 하지만 유닛 테스트와 종단 간 테스트 모두에서 하네스를 사용할 경우 하네스는 여전히 어느 정도 가치를 제공합니다.
 
-### CDK Installation
+### CDK 설치
 
-The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
+[컴포넌트 개발 키트 (CDK)](https://material.angular.io/cdk/categories)는 컴포넌트를 구축하기 위한 행동 원시 집합입니다. 컴포넌트 하네스를 사용하려면 먼저 npm에서 `@angular/cdk`를 설치하세요. Angular CLI를 사용하여 터미널에서 다음과 같이 할 수 있습니다:
 
 <docs-code language="shell">
   ng add @angular/cdk
 </docs-code>
 
-## Extending `ComponentHarness`
+## `ComponentHarness` 확장하기
 
-The abstract `ComponentHarness` class is the base class for all component harnesses. To create a custom component harness, extend `ComponentHarness` and implement the static property `hostSelector`.
+추상 `ComponentHarness` 클래스는 모든 컴포넌트 하네스의 기본 클래스입니다. 사용자 정의 컴포넌트 하네스를 생성하려면 `ComponentHarness`를 확장하고 정적 속성 `hostSelector`를 구현합니다.
 
-The `hostSelector` property identifies elements in the DOM that match this harness subclass. In most cases, the `hostSelector` should be the same as the selector of the corresponding `Component` or `Directive`. For example, consider a simple popup component:
+`hostSelector` 속성은 이 하네스 서브클래스와 일치하는 DOM의 요소를 식별합니다. 대부분의 경우, `hostSelector`는 해당 `Component` 또는 `Directive`의 선택자와 동일해야 합니다. 예를 들어 간단한 팝업 컴포넌트를 고려해보세요:
 
 <docs-code language="typescript">
 @Component({
@@ -45,7 +45,7 @@ class MyPopup {
 }
 </docs-code>
 
-In this case, a minimal harness for the component would look like the following:
+이 경우, 컴포넌트에 대한 최소 하네스는 다음과 같아야 합니다:
 
 <docs-code language="typescript">
 class MyPopupHarness extends ComponentHarness {
@@ -53,39 +53,39 @@ class MyPopupHarness extends ComponentHarness {
 }
 </docs-code>
 
-While `ComponentHarness` subclasses require only the `hostSelector` property, most harnesses should also implement a static `with` method to generate `HarnessPredicate` instances. The [filtering harnesses section](guide/testing/using-component-harnesses#filtering-harnesses) covers this in more detail.
+`ComponentHarness` 서브클래스는 `hostSelector` 속성만 필요하지만 대부분의 하네스는 정적 `with` 메소드를 구현하여 `HarnessPredicate` 인스턴스를 생성해야 합니다. [필터링 하네스 섹션](guide/testing/using-component-harnesses#filtering-harnesses)에서는 이 부분을 더 자세히 다룹니다.
 
-## Finding elements in the component's DOM
+## 컴포넌트 DOM에서 요소 찾기
 
-Each instance of a `ComponentHarness` subclass represents a particular instance of the corresponding component. You can access the component's host element via the `host() `method from the `ComponentHarness` base class.
+각 `ComponentHarness` 서브클래스의 인스턴스는 해당 컴포넌트의 특정 인스턴스를 나타냅니다. `ComponentHarness` 기본 클래스의 `host()` 메서드를 통해 컴포넌트의 호스트 요소에 접근할 수 있습니다.
 
-`ComponentHarness` also offers several methods for locating elements within the component's DOM. These methods are `locatorFor()`, `locatorForOptional()`, and `locatorForAll()`. These methods create functions that find elements, they do not directly find elements. This approach safeguards against caching references to out-of-date elements. For example, when an `ngIf` hides and then shows an element, the result is a new DOM element; using functions ensures that tests always reference the current state of the DOM.
+`ComponentHarness`는 또한 컴포넌트의 DOM 내에서 요소를 찾기 위한 여러 메소드를 제공합니다. 이 메소드들은 `locatorFor()`, `locatorForOptional()`, `locatorForAll()`입니다. 이러한 메소드는 요소를 찾는 함수를 만들지만, 직접적으로 요소를 찾지 않습니다. 이 접근 방식은 구식 요소에 대한 참조를 캐시하는 것을 방지합니다. 예를 들어 `ngIf`가 요소를 숨겼다가 다시 표시할 때 결과는 새로운 DOM 요소입니다. 함수를 사용하면 테스트가 항상 DOM의 현재 상태를 참조할 수 있도록 보장합니다.
 
-See the [ComponentHarness API reference page](https://material.angular.io/cdk/testing/api#ComponentHarness) for the full list details of the different `locatorFor` methods.
+다양한 `locatorFor` 메소드의 전체 목록에 대한 자세한 내용은 [ComponentHarness API 참조 페이지](https://material.angular.io/cdk/testing/api#ComponentHarness)를 참조하세요.
 
-For example, the `MyPopupHarness` example discussed above could provide methods to get the trigger and content elements as follows:
+예를 들어, 위에서 논의된 `MyPopupHarness`는 트리거와 콘텐츠 요소를 얻기 위한 메소드를 다음과 같이 제공할 수 있습니다:
 
 <docs-code language="typescript">
 class MyPopupHarness extends ComponentHarness {
   static hostSelector = 'my-popup';
 
-  /** Gets the trigger element */
+  /** 트리거 요소를 가져옵니다 */
   getTriggerElement = this.locatorFor('button');
 
-  /** Gets the content element. */
+  /** 콘텐츠 요소를 가져옵니다. */
   getContentElement = this.locatorForOptional('.my-popup-content');
 }
 </docs-code>
 
-## Working with `TestElement` instances
+## `TestElement` 인스턴스와 작업하기
 
-`TestElement` is an abstraction designed to work across different test environments (Unit tests, WebDriver, etc). When using harnesses, you should perform all DOM interaction via this interface. Other means of accessing DOM elements, such as `document.querySelector()`, do not work in all test environments.
+`TestElement`는 다른 테스트 환경(유닛 테스트, WebDriver 등)에서 작동하도록 설계된 추상화입니다. 하네스를 사용할 때는 모든 DOM 상호작용을 이 인터페이스를 통해 수행해야 합니다. `document.querySelector()`와 같은 DOM 요소에 접근하는 다른 방법은 모든 테스트 환경에서 작동하지 않습니다.
 
-`TestElement` has a number of methods to interact with the underlying DOM, such as `blur()`, `click()`, `getAttribute()`, and more. See the [TestElement API reference page](https://material.angular.io/cdk/testing/api#TestElement) for the full list of methods.
+`TestElement`는 `blur()`, `click()`, `getAttribute()` 등과 같은 기본 DOM과 상호작용할 수 있는 여러 메소드를 제공합니다. 모든 메소드 목록에 대한 자세한 내용은 [TestElement API 참조 페이지](https://material.angular.io/cdk/testing/api#TestElement)를 참조하세요.
 
-Do not expose `TestElement` instances to harness users unless it's an element the component consumer defines directly, such as the component's host element. Exposing `TestElement` instances for internal elements leads users to depend on a component's internal DOM structure.
+컴포넌트 소비자가 직접 정의하는 요소(예: 컴포넌트의 호스트 요소)가 아닌 한 `TestElement` 인스턴스를 하네스 사용자에게 노출하지 마세요. 내부 요소에 대한 `TestElement` 인스턴스를 노출하면 사용자가 컴포넌트의 내부 DOM 구조에 의존하게 됩니다.
 
-Instead, provide more narrow-focused methods for specific actions the end-user may take or particular state they may observe. For example, `MyPopupHarness` from previous sections could provide methods like `toggle` and `isOpen`:
+대신 최종 사용자가 수행할 수 있는 특정 작업이나 관찰할 수 있는 특정 상태에 대한 더 좁은 집중의 메소드를 제공합니다. 예를 들어, 이전 섹션의 `MyPopupHarness`는 `toggle` 및 `isOpen`과 같은 메소드를 제공할 수 있습니다:
 
 <docs-code language="typescript">
 class MyPopupHarness extends ComponentHarness {
@@ -94,13 +94,13 @@ class MyPopupHarness extends ComponentHarness {
   protected getTriggerElement = this.locatorFor('button');
   protected getContentElement = this.locatorForOptional('.my-popup-content');
 
-  /** Toggles the open state of the popup. */
+  /** 팝업의 열림 상태를 전환합니다. */
   async toggle() {
     const trigger = await this.getTriggerElement();
     return trigger.click();
   }
 
-  /** Checks if the popup us open. */
+  /** 팝업이 열려 있는지 확인합니다. */
   async isOpen() {
     const content = await this.getContentElement();
     return !!content;
@@ -108,13 +108,13 @@ class MyPopupHarness extends ComponentHarness {
 }
 </docs-code>
 
-## Loading harnesses for subcomponents
+## 하위 컴포넌트를 위한 하네스 로딩
 
-Larger components often compose sub-components. You can reflect this structure in a component's harness as well. Each of the `locatorFor` methods on `ComponentHarness` has an alternate signature that can be used for locating sub-harnesses rather than elements.
+더 큰 컴포넌트는 종종 하위 컴포넌트를 구성합니다. 이 구조를 컴포넌트의 하네스에도 반영할 수 있습니다. `ComponentHarness`의 각 `locatorFor` 메소드는 요소가 아닌 하위 하네스를 찾는 데 사용할 수 있는 대체 시그니처가 있습니다.
 
-See the [ComponentHarness API reference page](https://material.angular.io/cdk/testing/api#ComponentHarness) for the full list of the different locatorFor methods.
+다양한 locatorFor 메소드에 대한 전체 목록은 [ComponentHarness API 참조 페이지](https://material.angular.io/cdk/testing/api#ComponentHarness)를 참조하세요.
 
-For example, consider a menu build using the popup from above:
+예를 들어, 위에서 언급한 팝업을 사용하여 빌드한 메뉴를 고려해보세요:
 
 <docs-code language="typescript">
 @Directive({
@@ -137,7 +137,7 @@ class MyMenu {
 }
 </docs-code>
 
-The harness for `MyMenu` can then take advantage of other harnesses for `MyPopup` and `MyMenuItem`:
+그런 다음 `MyMenu`의 하네스는 `MyPopup` 및 `MyMenuItem`에 대한 다른 하네스를 활용할 수 있습니다:
 
 <docs-code language="typescript">
 class MyMenuHarness extends ComponentHarness {
@@ -145,10 +145,10 @@ class MyMenuHarness extends ComponentHarness {
 
   protected getPopupHarness = this.locatorFor(MyPopupHarness);
 
-  /** Gets the currently shown menu items (empty list if menu is closed). */
+  /** 현재 표시된 메뉴 항목을 가져옵니다 (메뉴가 닫히면 빈 목록). */
   getItems = this.locatorForAll(MyMenuItemHarness);
 
-  /** Toggles open state of the menu. */
+  /** 메뉴의 열림 상태를 전환합니다. */
   async toggle() {
     const popupHarness = await this.getPopupHarness();
     return popupHarness.toggle();
@@ -160,30 +160,30 @@ class MyMenuItemHarness extends ComponentHarness {
 }
 </docs-code>
 
-## Filtering harness instances with `HarnessPredicate`
-When a page contains multiple instances of a particular component, you may want to filter based on some property of the component to get a particular component instance. For example, you may want a button with some specific text, or a menu with a specific ID. The `HarnessPredicate` class can capture criteria like this for a `ComponentHarness` subclass. While the test author is able to construct `HarnessPredicate` instances manually, it's easier when the `ComponentHarness` subclass provides a helper method to construct predicates for common filters.
+## `HarnessPredicate`로 하네스 인스턴스 필터링
+페이지에 특정 컴포넌트의 여러 인스턴스가 포함된 경우, 특정 컴포넌트 인스턴스를 얻기 위해 컴포넌트의 일부 속성을 기반으로 필터링할 수 있습니다. 예를 들어, 특정 텍스트가 있는 버튼이나 특정 ID를 가진 메뉴가 있을 수 있습니다. `HarnessPredicate` 클래스는 `ComponentHarness` 서브클래스에 대한 이러한 기준을 캡처할 수 있습니다. 테스트 작성자가 `HarnessPredicate` 인스턴스를 수동으로 구성할 수 있지만, `ComponentHarness` 서브클래스가 일반 필터를 위한 헬퍼 메소드를 제공하면 더 쉽습니다.
 
-You should create a static `with()` method on each `ComponentHarness` subclass that returns a `HarnessPredicate` for that class. This allows test authors to write easily understandable code, e.g. `loader.getHarness(MyMenuHarness.with({selector: '#menu1'}))`. In addition to the standard selector and ancestor options, the `with` method should add any other options that make sense for the particular subclass.
+각 `ComponentHarness` 서브클래스에 대한 `HarnessPredicate`를 반환하는 정적 `with()` 메소드를 생성해야 합니다. 이는 테스트 작성자가 쉽게 이해할 수 있는 코드를 작성할 수 있도록 합니다. 예를 들어, `loader.getHarness(MyMenuHarness.with({selector: '#menu1'}))`와 같이 사용할 수 있습니다. 표준 선택자 및 조상 옵션 외에도, `with` 메소드는 특정 서브클래스에 대해 의미 있는 기타 옵션을 추가해야 합니다.
 
-Harnesses that need to add additional options should extend the `BaseHarnessFilters` interface and additional optional properties as needed. `HarnessPredicate` provides several convenience methods for adding options: `stringMatches()`, `addOption()`, and `add()`. See the [HarnessPredicate API page](https://material.angular.io/cdk/testing/api#HarnessPredicate) for the full description.
+추가 옵션을 추가해야 하는 하네스는 필요에 따라 `BaseHarnessFilters` 인터페이스와 추가 선택적 속성을 확장해야 합니다. `HarnessPredicate`는 옵션을 추가하기 위한 여러 편의 메소드를 제공합니다: `stringMatches()`, `addOption()`, `add()`. 전체 설명은 [HarnessPredicate API 페이지](https://material.angular.io/cdk/testing/api#HarnessPredicate)를 참조하세요.
 
-For example, when working with a menu it is useful to filter based on trigger text and to filter menu items based on their text:
+예를 들어, 메뉴와 작업할 때 트리거 텍스트를 기반으로 필터링하고 메뉴 항목의 텍스트를 기반으로 필터링하는 것이 유용합니다:
 
 <docs-code language="typescript">
 interface MyMenuHarnessFilters extends BaseHarnessFilters {
-  /** Filters based on the trigger text for the menu. */
+  /** 메뉴의 트리거 텍스트에 따라 필터링합니다. */
   triggerText?: string | RegExp;
 }
 
 interface MyMenuItemHarnessFilters extends BaseHarnessFilters {
-  /** Filters based on the text of the menu item. */
+  /** 메뉴 항목의 텍스트에 따라 필터링합니다. */
   text?: string | RegExp;
 }
 
 class MyMenuHarness extends ComponentHarness {
   static hostSelector = 'my-menu';
 
-  /** Creates a `HarnessPredicate` used to locate a particular `MyMenuHarness`. */
+  /** 특정 `MyMenuHarness`를 찾기 위해 사용되는 `HarnessPredicate`를 생성합니다. */
   static with(options: MyMenuHarnessFilters): HarnessPredicate<MyMenuHarness> {
     return new HarnessPredicate(MyMenuHarness, options)
         .addOption('trigger text', options.triggerText,
@@ -192,7 +192,7 @@ class MyMenuHarness extends ComponentHarness {
 
   protected getPopupHarness = this.locatorFor(MyPopupHarness);
 
-  /** Gets the text of the menu trigger. */
+  /** 메뉴 트리거의 텍스트를 가져옵니다. */
   async getTriggerText(): Promise<string> {
     const popupHarness = await this.getPopupHarness();
     return popupHarness.getTriggerText();
@@ -203,14 +203,14 @@ class MyMenuHarness extends ComponentHarness {
 class MyMenuItemHarness extends ComponentHarness {
   static hostSelector = 'my-menu-item';
 
-  /** Creates a `HarnessPredicate` used to locate a particular `MyMenuItemHarness`. */
+  /** 특정 `MyMenuItemHarness`를 찾기 위해 사용되는 `HarnessPredicate`를 생성합니다. */
   static with(options: MyMenuItemHarnessFilters): HarnessPredicate<MyMenuItemHarness> {
     return new HarnessPredicate(MyMenuItemHarness, options)
         .addOption('text', options.text,
             (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
   }
 
-  /** Gets the text of the menu item. */
+  /** 메뉴 항목의 텍스트를 가져옵니다. */
   async getText(): Promise<string> {
     const host = await this.host();
     return host.text();
@@ -218,13 +218,13 @@ class MyMenuItemHarness extends ComponentHarness {
 }
 </docs-code>
 
-You can pass a `HarnessPredicate` instead of a `ComponentHarness` class to any of the APIs on `HarnessLoader`, `LocatorFactory`, or `ComponentHarness`. This allows test authors to easily target a particular component instance when creating a harness instance. It also allows the harness author to leverage the same `HarnessPredicate` to enable more powerful APIs on their harness class. For example, consider the `getItems` method on the `MyMenuHarness` shown above. Adding a filtering API allows users of the harness to search for particular menu items:
+`HarnessPredicate`를 `ComponentHarness` 클래스 대신에 `HarnessLoader`, `LocatorFactory`, 또는 `ComponentHarness`의 어떤 API에든 전달할 수 있습니다. 이는 테스트 작성자가 하네스 인스턴스를 생성할 때 특정 컴포넌트 인스턴스를 쉽게 목표로 할 수 있게 합니다. 또한 하네스 작성자가 같은 `HarnessPredicate`를 활용하여 하네스 클래스에서 더 강력한 API를 활성화할 수 있습니다. 예를 들어, 위의 `MyMenuHarness`에 있는 `getItems` 메소드를 고려하세요. 필터링 API를 추가하면 하네스 사용자가 특정 메뉴 항목을 검색할 수 있습니다:
 
 <docs-code language="typescript">
 class MyMenuHarness extends ComponentHarness {
   static hostSelector = 'my-menu';
 
-  /** Gets a list of items in the menu, optionally filtered based on the given criteria. */
+  /** 메뉴의 항목 목록을 가져옵니다. 주어진 기준에 따라 필터링될 수 있습니다. */
   async getItems(filters: MyMenuItemHarnessFilters = {}): Promise<MyMenuItemHarness[]> {
     const getFilteredItems = this.locatorForAll(MyMenuItemHarness.with(filters));
     return getFilteredItems();
@@ -233,13 +233,13 @@ class MyMenuHarness extends ComponentHarness {
 }
 </docs-code>
 
-## Creating `HarnessLoader` for elements that use content projection
+## 콘텐츠 프로젝션을 사용하는 요소에 대한 `HarnessLoader` 생성
 
-Some components project additional content into the component's template. See the [content projection guide](guide/components/content-projection) for more information.
+일부 컴포넌트는 컴포넌트의 템플릿에 추가 콘텐츠를 프로젝션합니다. 자세한 내용은 [콘텐츠 프로젝션 가이드](guide/components/content-projection)를 참조하세요.
 
-Add a `HarnessLoader` instance scoped to the element containing the `<ng-content>` when you create a harness for a component that uses content projection. This allows the user of the harness to load additional harnesses for whatever components were passed in as content. `ComponentHarness` has several methods that can be used to create HarnessLoader instances for cases like this: `harnessLoaderFor()`, `harnessLoaderForOptional()`, `harnessLoaderForAll()`. See the [HarnessLoader interface API reference page](https://material.angular.io/cdk/testing/api#HarnessLoader) for more details.
+콘텐츠 프로젝션을 사용하는 컴포넌트에 대한 하네스를 생성할 때 `<ng-content>`를 포함하는 요소에 특정된 `HarnessLoader` 인스턴스를 추가하십시오. 이는 하네스 사용자가 콘텐츠로 전달된 어떤 컴포넌트에 대해서도 추가 하네스를 로드할 수 있게 합니다. `ComponentHarness`는 이와 같은 경우에 `harnessLoaderFor()`, `harnessLoaderForOptional()`, `harnessLoaderForAll()`과 같은 하네스 로더 인스턴스를 생성하는 데 사용할 수 있는 여러 메소드를 가지고 있습니다. 더 자세한 내용은 [HarnessLoader 인터페이스 API 참조 페이지](https://material.angular.io/cdk/testing/api#HarnessLoader)를 참조하세요.
 
-For example, the `MyPopupHarness` example from above can extend `ContentContainerComponentHarness` to add support to load harnesses within the `<ng-content>` of the component.
+예를 들어, 위의 `MyPopupHarness` 예는 `<ng-content>` 내에서 하네스를 로드할 수 있는 지원을 추가하기 위해 `ContentContainerComponentHarness`를 확장할 수 있습니다.
 
 <docs-code language="typescript">
 class MyPopupHarness extends ContentContainerComponentHarness<string> {
@@ -247,19 +247,19 @@ class MyPopupHarness extends ContentContainerComponentHarness<string> {
 }
 </docs-code>
 
-## Accessing elements outside of the component's host element
+## 컴포넌트 호스트 요소 외부의 요소에 접근하기
 
-There are times when a component harness might need to access elements outside of its corresponding component's host element. For example, code that displays a floating element or pop-up often attaches DOM elements directly to the document body, such as the `Overlay` service in Angular CDK.
+컴포넌트 하네스가 해당 컴포넌트의 호스트 요소 외부의 요소에 접근해야 할 때가 있습니다. 예를 들어, 떠 있는 요소나 팝업을 표시하는 코드는 종종 DOM 요소를 문서 본체에 직접 첨부합니다. Angular CDK의 `Overlay` 서비스와 같은 예입니다.
 
-In this case, `ComponentHarness` provides a method that can be used to get a `LocatorFactory` for the root element of the document. The `LocatorFactory` supports most of the same APIs as the `ComponentHarness` base class, and can then be used to query relative to the document's root element.
+이 경우 `ComponentHarness`는 문서의 루트 요소에 대한 `LocatorFactory`를 얻는 데 사용할 수 있는 메소드를 제공합니다. `LocatorFactory`는 `ComponentHarness` 기본 클래스와 유사한 대부분의 API를 지원하며, 문서의 루트 요소를 기준으로 쿼리하는 데 사용할 수 있습니다.
 
-Consider if the `MyPopup` component above used the CDK overlay for the popup content, rather than an element in its own template. In this case, `MyPopupHarness` would have to access the content element via `documentRootLocatorFactory()` method that gets a locator factory rooted at the document root.
+위의 `MyPopup` 컴포넌트가 팝업 콘텐츠를 위해 자체 템플릿의 요소 대신 CDK 오버레이를 사용하는 경우를 고려해 보세요. 이 경우, `MyPopupHarness`는 문서 루트에 뿌리를 두고 있는 로케이터 팩토리를 얻는 `documentRootLocatorFactory()` 메서드를 통해 콘텐츠 요소에 접근해야 합니다.
 
 <docs-code language="typescript">
 class MyPopupHarness extends ComponentHarness {
   static hostSelector = 'my-popup';
 
-  /** Gets a `HarnessLoader` whose root element is the popup's content element. */
+  /** 팝업의 콘텐츠 요소를 루트 요소로 하는 `HarnessLoader`를 가져옵니다. */
   async getHarnessLoaderForContent(): Promise<HarnessLoader> {
     const rootLocator = this.documentRootLocatorFactory();
     return rootLocator.harnessLoaderFor('my-popup-content');
@@ -267,10 +267,10 @@ class MyPopupHarness extends ComponentHarness {
 }
 </docs-code>
 
-## Waiting for asynchronous tasks
+## 비동기 작업 기다리기
 
-The methods on `TestElement` automatically trigger Angular's change detection and wait for tasks inside the `NgZone`. In most cases no special effort is required for harness authors to wait on asynchronous tasks. However, there are some edge cases where this may not be sufficient.
+`TestElement`의 메소드는 Angular의 변경 감지를 자동으로 트리거하고 `NgZone` 내부의 작업을 기다립니다. 대부분의 경우, 하네스 작성자가 비동기 작업을 기다리는 데 특별한 노력을 기울일 필요는 없습니다. 그러나 충분하지 않은 일부 엣지 케이스가 있습니다.
 
-Under some circumstances, Angular animations may require a second cycle of change detection and subsequent `NgZone` stabilization before animation events are fully flushed. In cases where this is needed, the `ComponentHarness` offers a `forceStabilize()` method that can be called to do the second round.
+일부 경우, Angular 애니메이션은 애니메이션 이벤트가 완전히 플러시되기 전에 변경 감지와 후속 `NgZone` 안정성을 위해 두 번째 사이클이 필요할 수 있습니다. 이러한 경우에는 `ComponentHarness`에서 두 번째 라운드를 수행하기 위해 호출할 수 있는 `forceStabilize()` 메소드를 제공합니다.
 
-You can use `NgZone.runOutsideAngular()` to schedule tasks outside of NgZone. Call the `waitForTasksOutsideAngular()` method on the corresponding harness if you need to explicitly wait for tasks outside `NgZone` since this does not happen automatically.
+`NgZone.runOutsideAngular()`를 사용하여 NgZone 외부에서 작업을 예약할 수 있습니다. NgZone 외부의 작업을 명시적으로 기다려야 하는 경우, 해당 하네스에서 `waitForTasksOutsideAngular()` 메서드를 호출해야 합니다. 이는 자동으로 발생하지 않기 때문입니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/testing/debugging.md b/adev/src/content/guide/testing/debugging.md
index c5822b453d1d..aa685623074b 100644
--- a/adev/src/content/guide/testing/debugging.md
+++ b/adev/src/content/guide/testing/debugging.md
@@ -1,17 +1,17 @@
-# Debugging tests
+# 디버깅 테스트
 
-If your tests aren't working as you expect them to, you can inspect and debug them in the browser.
+테스트가 예상대로 작동하지 않는 경우, 브라우저에서 검사 및 디버깅할 수 있습니다.
 
-Debug specs in the browser in the same way that you debug an application.
+애플리케이션을 디버깅하는 방식으로 브라우저에서 스펙을 디버깅하십시오.
 
-1. Reveal the Karma browser window.
-    See [Set up testing](guide/testing#set-up-testing) if you need help with this step.
+1. Karma 브라우저 창을 표시합니다.
+    이 단계에 대한 도움이 필요하면 [테스트 설정](guide/testing#set-up-testing)을 참조하세요.
 
-1. Click the **DEBUG** button to open a new browser tab and re-run the tests.
-1. Open the browser's **Developer Tools**. On Windows, press `Ctrl-Shift-I`. On macOS, press `Command-Option-I`.
-1. Pick the **Sources** section.
-1. Press `Control/Command-P`, and then start typing the name of your test file to open it.
-1. Set a breakpoint in the test.
-1. Refresh the browser, and notice how it stops at the breakpoint.
+1. **DEBUG** 버튼을 클릭하여 새 브라우저 탭을 열고 테스트를 다시 실행합니다.
+1. 브라우저의 **개발자 도구**를 엽니다. Windows에서는 `Ctrl-Shift-I`를 누릅니다. macOS에서는 `Command-Option-I`를 누릅니다.
+1. **소스** 섹션을 선택합니다.
+1. `Control/Command-P`를 누른 후 테스트 파일의 이름을 입력하여 엽니다.
+1. 테스트에 중단점을 설정합니다.
+1. 브라우저를 새로 고침하고 중단점에서 중단되는지 확인합니다.
 
-<img alt="Karma debugging" src="assets/images/guide/testing/karma-1st-spec-debug.png">
+<img alt="Karma 디버깅" src="assets/images/guide/testing/karma-1st-spec-debug.png">
\ No newline at end of file
diff --git a/adev/src/content/guide/testing/overview.md b/adev/src/content/guide/testing/overview.md
index 661b3f13ce25..eb912e181137 100644
--- a/adev/src/content/guide/testing/overview.md
+++ b/adev/src/content/guide/testing/overview.md
@@ -1,13 +1,13 @@
-# Testing
+# 테스트
 
-Testing your Angular application helps you check that your application is working as you expect.
+Angular 애플리케이션을 테스트하면 애플리케이션이 기대하는 대로 작동하는지 확인할 수 있습니다.
 
-## Set up testing
+## 테스트 설정
 
-The Angular CLI downloads and installs everything you need to test an Angular application with [Jasmine testing framework](https://jasmine.github.io).
+Angular CLI는 [Jasmine 테스트 프레임워크](https://jasmine.github.io)로 Angular 애플리케이션을 테스트하는 데 필요한 모든 것을 다운로드하고 설치합니다.
 
-The project you create with the CLI is immediately ready to test.
-Just run the [`ng test`](cli/test) CLI command:
+CLI로 생성한 프로젝트는 즉시 테스트할 준비가 되어 있습니다.
+다음 [`ng test`](cli/test) CLI 명령을 실행하세요:
 
 <docs-code language="shell">
 
@@ -15,10 +15,10 @@ ng test
 
 </docs-code>
 
-The `ng test` command builds the application in *watch mode*,
-and launches the [Karma test runner](https://karma-runner.github.io).
+`ng test` 명령은 애플리케이션을 *감시 모드*로 빌드하고,
+[Karma 테스트 러너](https://karma-runner.github.io)를 시작합니다.
 
-The console output looks like below:
+콘솔 출력은 다음과 같습니다:
 
 <docs-code language="shell">
 
@@ -31,24 +31,24 @@ TOTAL: 3 SUCCESS
 
 </docs-code>
 
-The last line of the log shows that Karma ran three tests that all passed.
+로그의 마지막 줄은 Karma가 세 개의 테스트를 실행했으며 모두 통과했음을 보여줍니다.
 
-The test output is displayed in the browser using [Karma Jasmine HTML Reporter](https://github.com/dfederm/karma-jasmine-html-reporter).
+테스트 출력은 [Karma Jasmine HTML Reporter](https://github.com/dfederm/karma-jasmine-html-reporter)를 사용하여 브라우저에서 표시됩니다.
 
-<img alt="Jasmine HTML Reporter in the browser" src="assets/images/guide/testing/initial-jasmine-html-reporter.png">
+<img alt="브라우저의 Jasmine HTML Reporter" src="assets/images/guide/testing/initial-jasmine-html-reporter.png">
 
-Click on a test row to re-run just that test or click on a description to re-run the tests in the selected test group \("test suite"\).
+테스트 행을 클릭하여 해당 테스트만 다시 실행하거나 설명을 클릭하여 선택한 테스트 그룹(“테스트 스위트”)의 테스트를 다시 실행할 수 있습니다.
 
-Meanwhile, the `ng test` command is watching for changes.
+한편, `ng test` 명령은 변경 사항을 감시 중입니다.
 
-To see this in action, make a small change to `app.component.ts` and save.
-The tests run again, the browser refreshes, and the new test results appear.
+이를 실제로 보기 위해 `app.component.ts`에 작은 변경을 하고 저장하세요.
+테스트가 다시 실행되고, 브라우저가 새로 고쳐지며 새로운 테스트 결과가 나타납니다.
 
-## Configuration
+## 설정
 
-The Angular CLI takes care of Jasmine and Karma configuration for you. It constructs the full configuration in memory, based on options specified in the `angular.json` file.
+Angular CLI는 Jasmine 및 Karma 구성을 처리합니다. `angular.json` 파일에 지정된 옵션을 기반으로 메모리 내에서 전체 구성을 구성합니다.
 
-If you want to customize Karma, you can create a `karma.conf.js` by running the following command:
+Karma를 사용자 정의하려는 경우 다음 명령을 실행하여 `karma.conf.js`를 생성할 수 있습니다:
 
 <docs-code language="shell">
 
@@ -56,70 +56,67 @@ ng generate config karma
 
 </docs-code>
 
-HELPFUL: Read more about Karma configuration in the [Karma configuration guide](http://karma-runner.github.io/6.4/config/configuration-file.html).
+도움이 되는 정보: [Karma 구성 가이드](http://karma-runner.github.io/6.4/config/configuration-file.html)에서 Karma 구성에 대해 자세히 알아보세요.
 
-### Other test frameworks
+### 기타 테스트 프레임워크
 
-You can also unit test an Angular application with other testing libraries and test runners.
-Each library and runner has its own distinctive installation procedures, configuration, and syntax.
+다른 테스트 라이브러리 및 테스트 러너를 사용하여 Angular 애플리케이션을 단위 테스트할 수도 있습니다.
+각 라이브러리와 러너는 고유한 설치 절차, 구성 및 구문이 있습니다.
 
-### Test file name and location
+### 테스트 파일 이름 및 위치
 
-Inside the `src/app` folder the Angular CLI generated a test file for the `AppComponent` named `app.component.spec.ts`.
+`src/app` 폴더 내에서 Angular CLI는 `AppComponent`에 대한 테스트 파일인 `app.component.spec.ts`를 생성했습니다.
 
-IMPORTANT: The test file extension **must be `.spec.ts`** so that tooling can identify it as a file with tests \(also known as a *spec* file\).
+중요: 테스트 파일 확장자 **는 `.spec.ts`여야 합니다** 도구가 이것을 테스트가 포함된 파일(일명 *spec* 파일)로 식별할 수 있게 됩니다.
 
-The `app.component.ts` and `app.component.spec.ts` files are siblings in the same folder.
-The root file names \(`app.component`\) are the same for both files.
+`app.component.ts`와 `app.component.spec.ts` 파일은 같은 폴더 내의 형제입니다.
+루트 파일 이름(`app.component`)은 두 파일 모두 동일합니다.
 
-Adopt these two conventions in your own projects for *every kind* of test file.
+자신의 프로젝트에서 *모든 종류*의 테스트 파일에 대해 이 두 가지 규칙을 따르십시오.
 
-#### Place your spec file next to the file it tests
+#### 사양 파일을 그들이 테스트하는 파일 옆에 배치하세요
 
-It's a good idea to put unit test spec files in the same folder
-as the application source code files that they test:
+단위 테스트 사양 파일을 애플리케이션 소스 코드 파일과 동일한 폴더에 두는 것이 좋습니다:
 
-* Such tests are painless to find
-* You see at a glance if a part of your application lacks tests
-* Nearby tests can reveal how a part works in context
-* When you move the source \(inevitable\), you remember to move the test
-* When you rename the source file \(inevitable\), you remember to rename the test file
+* 이러한 테스트를 찾기가 쉽습니다.
+* 애플리케이션의 일부가 테스트가 없는지 즉시 확인할 수 있습니다.
+* 가까운 테스트는 특정 부분이 컨텍스트에서 어떻게 작동하는지 보여줄 수 있습니다.
+* 소스를 이동할 때(불가피하게) 테스트도 함께 이동해야 함을 기억합니다.
+* 소스 파일 이름을 바꿀 때(불가피하게) 테스트 파일 이름도 바꿔야 함을 기억합니다.
 
-#### Place your spec files in a test folder
+#### 사양 파일을 테스트 폴더에 배치하세요
 
-Application integration specs can test the interactions of multiple parts
-spread across folders and modules.
-They don't really belong to any part in particular, so they don't have a
-natural home next to any one file.
+애플리케이션 통합 사양은 여러 부분의 상호 작용을 테스트할 수 있습니다.
+폴더와 모듈에 걸쳐 있습니다.
+그들은 특정 부분에 속하지 않으므로 어떤 파일 옆에 놓기에도 자연스러운 자리가 없습니다.
 
-It's often better to create an appropriate folder for them in the `tests` directory.
+일반적으로 `tests` 디렉토리 내에 적절한 폴더를 만드는 것이 더 좋습니다.
 
-Of course specs that test the test helpers belong in the `test` folder,
-next to their corresponding helper files.
+물론 테스트 도우미를 테스트하는 스펙은 해당 도우미 파일 옆에 있는 `test` 폴더에 있어야 합니다.
 
-## Testing in continuous integration
+## 지속적 통합에서의 테스트
 
-One of the best ways to keep your project bug-free is through a test suite, but you might forget to run tests all the time.
+프로젝트의 버그 없는 상태를 유지하는 가장 좋은 방법 중 하나는 테스트 스위트를 사용하는 것이지만, 항상 테스트를 실행하는 것을 잊을 수 있습니다.
 
-Continuous integration \(CI\) servers let you set up your project repository so that your tests run on every commit and pull request.
+지속적 통합(CI) 서버는 프로젝트 저장소를 설정하여 커밋 및 풀 요청마다 테스트가 실행되도록 합니다.
 
-To test your Angular CLI application in Continuous integration \(CI\) run the following command:
+지속적 통합(CI)에서 Angular CLI 애플리케이션을 테스트하려면 다음 명령을 실행하세요:
 
 <docs-code language="shell">
 ng test --no-watch --no-progress --browsers=ChromeHeadless
 </docs-code>
 
-## More information on testing
+## 테스트에 대한 추가 정보
 
-After you've set up your application for testing, you might find the following testing guides useful.
+애플리케이션을 테스트를 위해 설정한 후 다음 테스트 가이드를 유용하게 사용할 수 있습니다.
 
-|                                                                    | Details |
+|                                                                    | 세부정보 |
 |:---                                                                |:---     |
-| [Code coverage](guide/testing/code-coverage)                       | How much of your app your tests are covering and how to specify required amounts. |
-| [Testing services](guide/testing/services)                         | How to test the services your application uses.                                   |
-| [Basics of testing components](guide/testing/components-basics)    | Basics of testing Angular components.                                             |
-| [Component testing scenarios](guide/testing/components-scenarios)  | Various kinds of component testing scenarios and use cases.                       |
-| [Testing attribute directives](guide/testing/attribute-directives) | How to test your attribute directives.                                            |
-| [Testing pipes](guide/testing/pipes)                               | How to test pipes.                                                                |
-| [Debugging tests](guide/testing/debugging)                            | Common testing bugs.                                                              |
-| [Testing utility APIs](guide/testing/utility-apis)                 | Angular testing features.                                                         |
+| [코드 커버리지](guide/testing/code-coverage)                       | 테스트가 앱의 몇 퍼센트를 커버하고 요구되는 양을 지정하는 방법. |
+| [서비스 테스트](guide/testing/services)                         | 애플리케이션에서 사용하는 서비스를 테스트하는 방법.                                   |
+| [컴포넌트 테스트의 기초](guide/testing/components-basics)    | Angular 컴포넌트를 테스트하는 기초.                                             |
+| [컴포넌트 테스트 시나리오](guide/testing/components-scenarios)  | 다양한 종류의 컴포넌트 테스트 시나리오와 사용 사례.                       |
+| [속성 지시문 테스트](guide/testing/attribute-directives) | 속성 지시문을 테스트하는 방법.                                            |
+| [파이프 테스트](guide/testing/pipes)                               | 파이프를 테스트하는 방법.                                                                |
+| [테스트 디버깅](guide/testing/debugging)                            | 일반적인 테스트 버그.                                                              |
+| [유틸리티 API 테스트](guide/testing/utility-apis)                 | Angular 테스트 기능.                                                         |
\ No newline at end of file
diff --git a/adev/src/content/guide/testing/pipes.md b/adev/src/content/guide/testing/pipes.md
index 260f73a70dda..615be97a638c 100644
--- a/adev/src/content/guide/testing/pipes.md
+++ b/adev/src/content/guide/testing/pipes.md
@@ -1,28 +1,28 @@
-# Testing Pipes
+# 파이프 테스트
 
-You can test [pipes](guide/templates/pipes) without the Angular testing utilities.
+Angular 테스트 유틸리티 없이 [파이프](guide/templates/pipes)를 테스트할 수 있습니다.
 
-## Testing the `TitleCasePipe`
+## `TitleCasePipe` 테스트
 
-A pipe class has one method, `transform`, that manipulates the input value into a transformed output value.
-The `transform` implementation rarely interacts with the DOM.
-Most pipes have no dependence on Angular other than the `@Pipe` metadata and an interface.
+파이프 클래스는 입력 값을 변형된 출력 값으로 변형하는 `transform`이라는 하나의 메서드를 가지고 있습니다.
+`transform` 구현은 DOM과 거의 상호작용하지 않습니다.
+대부분의 파이프는 `@Pipe` 메타데이터와 인터페이스 외에는 Angular에 의존하지 않습니다.
 
-Consider a `TitleCasePipe` that capitalizes the first letter of each word.
-Here's an implementation with a regular expression.
+각 단어의 첫 글자를 대문자로 만드는 `TitleCasePipe`를 고려해 보세요.
+정규 표현식을 사용한 구현 예시는 다음과 같습니다.
 
 <docs-code header="app/shared/title-case.pipe.ts" path="adev/src/content/examples/testing/src/app/shared/title-case.pipe.ts"/>
 
-Anything that uses a regular expression is worth testing thoroughly.
-Use simple Jasmine to explore the expected cases and the edge cases.
+정규 표현식을 사용하는 모든 것은 철저하게 테스트할 가치가 있습니다.
+간단한 Jasmine을 사용하여 예상되는 케이스와 엣지 케이스를 탐색하세요.
 
 <docs-code header="app/shared/title-case.pipe.spec.ts" path="adev/src/content/examples/testing/src/app/shared/title-case.pipe.spec.ts" visibleRegion="excerpt"/>
 
-## Writing DOM tests to support a pipe test
+## 파이프 테스트를 지원하는 DOM 테스트 작성하기
 
-These are tests of the pipe *in isolation*.
-They can't tell if the `TitleCasePipe` is working properly as applied in the application components.
+이것은 *고립된 상태에서* 파이프 테스트입니다.
+애플리케이션 컴포넌트에 적용된 `TitleCasePipe`가 제대로 작동하는지 알 수 없습니다.
 
-Consider adding component tests such as this one:
+다음과 같은 컴포넌트 테스트를 추가하는 것을 고려해 보세요:
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (pipe test)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="title-case-pipe"/>
+<docs-code header="app/hero/hero-detail.component.spec.ts (pipe test)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="title-case-pipe"/>
\ No newline at end of file
diff --git a/adev/src/content/guide/testing/services.md b/adev/src/content/guide/testing/services.md
index 4a7ed5f8cdd0..53cac17280ee 100644
--- a/adev/src/content/guide/testing/services.md
+++ b/adev/src/content/guide/testing/services.md
@@ -1,129 +1,129 @@
-# Testing services
+# 테스트 서비스
 
-To check that your services are working as you intend, you can write tests specifically for them.
+서비스가 의도한 대로 작동하는지 확인하기 위해, 특정 서비스에 대한 테스트를 작성할 수 있습니다.
 
-Services are often the smoothest files to unit test.
-Here are some synchronous and asynchronous unit tests of the `ValueService` written without assistance from Angular testing utilities.
+서비스는 종종 단위 테스트하기 가장 쉬운 파일입니다.  
+다음은 Angular 테스트 유틸리티의 도움 없이 작성된 `ValueService`의 동기 및 비동기 단위 테스트입니다.
 
 <docs-code header="app/demo/demo.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="ValueService"/>
 
-## Services with dependencies
+## 의존성이 있는 서비스
 
-Services often depend on other services that Angular injects into the constructor.
-In many cases, you can create and *inject* these dependencies by hand while calling the service's constructor.
+서비스는 종종 Angular가 생성자에 주입하는 다른 서비스에 의존합니다.  
+많은 경우 서비스의 생성자를 호출할 때 이러한 의존성을 수동으로 *생성하고 주입*할 수 있습니다.
 
-The `MasterService` is a simple example:
+`MasterService`는 간단한 예입니다:
 
 <docs-code header="app/demo/demo.ts" path="adev/src/content/examples/testing/src/app/demo/demo.ts" visibleRegion="MasterService"/>
 
-`MasterService` delegates its only method, `getValue`, to the injected `ValueService`.
+`MasterService`는 주입된 `ValueService`에 있는 유일한 메서드 `getValue`를 위임합니다.
 
-Here are several ways to test it.
+테스트하는 여러 방법이 있습니다.
 
 <docs-code header="app/demo/demo.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="MasterService"/>
 
-The first test creates a `ValueService` with `new` and passes it to the `MasterService` constructor.
+첫 번째 테스트는 `new`를 사용하여 `ValueService`를 생성하고 이를 `MasterService` 생성자에 전달합니다.
 
-However, injecting the real service rarely works well as most dependent services are difficult to create and control.
+그러나 실제 서비스를 주입하면 대부분의 의존 서비스가 생성하고 제어하기 어려운 경우가 많기 때문에 잘 작동하지 않습니다.
 
-Instead, mock the dependency, use a dummy value, or create a [spy](https://jasmine.github.io/tutorials/your_first_suite#section-Spies) on the pertinent service method.
+대신 의존성을 모의(mock)하거나 더미 값을 사용하거나 관련 서비스 메서드에 대한 [스파이](https://jasmine.github.io/tutorials/your_first_suite#section-Spies)를 생성합니다.
 
-HELPFUL: Prefer spies as they are usually the best way to mock services.
+도움말: 서비스 모의(mock)에는 스파이를 사용하는 것이 가장 좋습니다.
 
-These standard testing techniques are great for unit testing services in isolation.
+이러한 표준 테스트 기술은 서비스를 고립된 상태에서 단위 테스트하기에는 매우 유용합니다.
 
-However, you almost always inject services into application classes using Angular dependency injection and you should have tests that reflect that usage pattern.
-Angular testing utilities make it straightforward to investigate how injected services behave.
+그러나 거의 항상 Angular 의존성 주입을 사용하여 서비스가 애플리케이션 클래스에 주입되며 이 사용 패턴을 반영하는 테스트가 필요합니다.  
+Angular 테스트 유틸리티를 사용하면 주입된 서비스의 동작을 조사하는 것이 간단합니다.
 
-## Testing services with the `TestBed`
+## `TestBed`로 서비스 테스트하기
 
-Your application relies on Angular [dependency injection (DI)](guide/di) to create services.
-When a service has a dependent service, DI finds or creates that dependent service.
-And if that dependent service has its own dependencies, DI finds-or-creates them as well.
+응용 프로그램은 Angular [의존성 주입(DI)](guide/di)를 사용하여 서비스를 생성합니다.  
+서비스가 의존 서비스가 있으면 DI는 해당 의존 서비스를 찾거나 생성합니다.  
+그리고 그 의존 서비스가 자체 의존성이 있다면 DI는 그것도 찾거나 생성합니다.
 
-As a service *consumer*, you don't worry about any of this.
-You don't worry about the order of constructor arguments or how they're created.
+서비스 *소비자*로서 이러한 것에 대해 걱정할 필요는 없습니다.  
+생성자 인자의 순서나 생성 방식에 대해 걱정하지 않아도 됩니다.
 
-As a service *tester*, you must at least think about the first level of service dependencies but you *can* let Angular DI do the service creation and deal with constructor argument order when you use the `TestBed` testing utility to provide and create services.
+서비스 *테스터*로서 최소한 서비스 의존성의 첫 번째 수준에 대해 생각해야 하지만, `TestBed` 테스트 유틸리티를 사용할 때 Angular DI가 서비스 생성 및 생성자 인자 순서 문제를 처리하게 할 수 있습니다.
 
 ## Angular `TestBed`
 
-The `TestBed` is the most important of the Angular testing utilities.
-The `TestBed` creates a dynamically-constructed Angular *test* module that emulates an Angular [@NgModule](guide/ngmodules).
+`TestBed`는 Angular 테스트 유틸리티 중 가장 중요합니다.  
+`TestBed`는 Angular [@NgModule](guide/ngmodules)를 에뮬레이트하는 동적으로 구성된 Angular *테스트* 모듈을 생성합니다.
 
-The `TestBed.configureTestingModule()` method takes a metadata object that can have most of the properties of an [@NgModule](guide/ngmodules).
+`TestBed.configureTestingModule()` 메서드는 대부분의 [@NgModule](guide/ngmodules) 속성을 가질 수 있는 메타데이터 객체를 사용합니다.
 
-To test a service, you set the `providers` metadata property with an array of the services that you'll test or mock.
+서비스를 테스트하려면 테스트할(또는 모의할) 서비스의 배열로 `providers` 메타데이터 속성을 설정합니다.
 
-<docs-code header="app/demo/demo.testbed.spec.ts (provide ValueService in beforeEach)" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="value-service-before-each"/>
+<docs-code header="app/demo/demo.testbed.spec.ts (ValueService를 beforeEach에서 제공)" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="value-service-before-each"/>
 
-Then inject it inside a test by calling `TestBed.inject()` with the service class as the argument.
+그런 다음 서비스 클래스를 인자로 하여 `TestBed.inject()`를 호출하여 테스트 안에서 주입합니다.
 
-HELPFUL: `TestBed.get()` was deprecated as of Angular version 9.
-To help minimize breaking changes, Angular introduces a new function called `TestBed.inject()`, which you should use instead.
+도움말: `TestBed.get()`는 Angular 버전 9부터 사용 중지되었습니다.  
+깨지는 변경을 최소화하기 위해 Angular는 대신 사용할 새로운 함수 `TestBed.inject()`를 도입합니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="value-service-inject-it"/>
 
-Or inside the `beforeEach()` if you prefer to inject the service as part of your setup.
+서비스를 설정의 일부로 주입하려는 경우 `beforeEach()` 내부에서 할 수 있습니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="value-service-inject-before-each"> </docs-code>
 
-When testing a service with a dependency, provide the mock in the `providers` array.
+의존성이 있는 서비스를 테스트할 때는 `providers` 배열에 모의(Mock) 서비스를 제공하세요.
 
-In the following example, the mock is a spy object.
+다음 예에서 모의는 스파이 객체입니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="master-service-before-each"/>
 
-The test consumes that spy in the same way it did earlier.
+테스트는 이전과 동일한 방식으로 해당 스파이를 소비합니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="master-service-it"/>
 
-## Testing without `beforeEach()`
+## `beforeEach()` 없이 테스트하기
 
-Most test suites in this guide call `beforeEach()` to set the preconditions for each `it()` test and rely on the `TestBed` to create classes and inject services.
+이 가이드의 대부분의 테스트 스위트는 각 `it()` 테스트에 대한 전제 조건을 설정하기 위해 `beforeEach()`를 호출하고 클래스 생성 및 서비스 주입을 위해 `TestBed`에 의존합니다.
 
-There's another school of testing that never calls `beforeEach()` and prefers to create classes explicitly rather than use the `TestBed`.
+`beforeEach()`를 호출하지 않고 클래스를 명시적으로 생성하는 것을 선호하는 또 다른 테스트 방식이 있습니다.
 
-Here's how you might rewrite one of the `MasterService` tests in that style.
+다음은 이러한 스타일로 `MasterService` 테스트 중 하나를 다시 작성하는 방법입니다.
 
-Begin by putting re-usable, preparatory code in a *setup* function instead of `beforeEach()`.
+재사용 가능한 준비 코드를 `beforeEach()` 대신 *setup* 함수에 배치합니다.
 
 <docs-code header="app/demo/demo.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="no-before-each-setup"/>
 
-The `setup()` function returns an object literal with the variables, such as `masterService`, that a test might reference.
-You don't define *semi-global* variables \(for example, `let masterService: MasterService`\) in the body of the `describe()`.
+`setup()` 함수는 테스트가 참조할 수 있는 변수가 포함된 객체 리터럴을 반환합니다.  
+`describe()` 본문에서 *반전역(semi-global)* 변수를 정의하지 않습니다 \(예: `let masterService: MasterService`\).
 
-Then each test invokes `setup()` in its first line, before continuing with steps that manipulate the test subject and assert expectations.
+그런 다음 각 테스트는 첫 번째 줄에서 `setup()`을 호출하여 테스트 주제를 조작하고 기대 결과를 단언합니다.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="no-before-each-test"/>
 
-Notice how the test uses [*destructuring assignment*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to extract the setup variables that it needs.
+테스트가 필요한 설정 변수를 추출하는 데 [*구조 분해 할당*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 사용하는 방법에 유의하세요.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="no-before-each-setup-call"/>
 
-Many developers feel this approach is cleaner and more explicit than the traditional `beforeEach()` style.
+많은 개발자는 이 접근 방식이 전통적인 `beforeEach()` 스타일보다 더 깔끔하고 명확하다고 느낍니다.
 
-Although this testing guide follows the traditional style and the default [CLI schematics](https://github.com/angular/angular-cli) generate test files with `beforeEach()` and `TestBed`, feel free to adopt *this alternative approach* in your own projects.
+이 테스트 가이드는 전통적인 스타일을 따르며 기본 [CLI 스키마틱](https://github.com/angular/angular-cli)은 `beforeEach()` 및 `TestBed`와 함께 테스트 파일을 생성하지만, 자신의 프로젝트에서는 *이 대안 접근 방식*을 자유롭게 채택할 수 있습니다.
 
-## Testing HTTP services
+## HTTP 서비스 테스트하기
 
-Data services that make HTTP calls to remote servers typically inject and delegate to the Angular [`HttpClient`](guide/http/testing) service for XHR calls.
+원격 서버에 HTTP 호출을 하는 데이터 서비스는 일반적으로 Angular [`HttpClient`](guide/http/testing) 서비스로 주입하고 위임합니다.
 
-You can test a data service with an injected `HttpClient` spy as you would test any service with a dependency.
+주입된 `HttpClient` 스파이를 사용하여 데이터 서비스를 테스트할 수 있으며, 이는 의존성이 있는 서비스에 대한 테스트와 마찬가지입니다.
 
-<docs-code header="app/model/hero.service.spec.ts (tests with spies)" path="adev/src/content/examples/testing/src/app/model/hero.service.spec.ts" visibleRegion="test-with-spies"/>
+<docs-code header="app/model/hero.service.spec.ts (스파이로 테스트)" path="adev/src/content/examples/testing/src/app/model/hero.service.spec.ts" visibleRegion="test-with-spies"/>
 
-IMPORTANT: The `HeroService` methods return `Observables`.
-You must *subscribe* to an observable to \(a\) cause it to execute and \(b\) assert that the method succeeds or fails.
+중요: `HeroService` 메서드는 `Observables`를 반환합니다.  
+함수를 실행시키고 메서드가 성공 또는 실패하는지를 단언하기 위해서는 *구독(subscribe)*해야 합니다.
 
-The `subscribe()` method takes a success \(`next`\) and fail \(`error`\) callback.
-Make sure you provide *both* callbacks so that you capture errors.
-Neglecting to do so produces an asynchronous uncaught observable error that the test runner will likely attribute to a completely different test.
+`subscribe()` 메서드는 성공(`next`)과 실패(`error`) 콜백을 사용합니다.  
+두 개의 콜백을 모두 제공하여 오류를 캡처해야 합니다.  
+이를 소홀히 하면 비동기적으로 처리되지 않은 observable 오류가 발생할 수 있으며, 테스트 실행기가 이를 완전히 다른 테스트에 귀속시킬 가능성이 높습니다.
 
 ## `HttpClientTestingModule`
 
-Extended interactions between a data service and the `HttpClient` can be complex and difficult to mock with spies.
+데이터 서비스와 `HttpClient` 사이의 확장된 상호 작용은 복잡하고 스파이로 모의(mock)하기 어려울 수 있습니다.
 
-The `HttpClientTestingModule` can make these testing scenarios more manageable.
+`HttpClientTestingModule`은 이러한 테스트 시나리오를 관리하기 쉽게 만들어 줍니다.
 
-While the *code sample* accompanying this guide demonstrates `HttpClientTestingModule`, this page defers to the [Http guide](guide/http/testing), which covers testing with the `HttpClientTestingModule` in detail.
+이 가이드와 함께 제공되는 *코드 샘플*은 `HttpClientTestingModule`을 보여주지만, 이 페이지는 [Http 가이드](guide/http/testing)로 위임하여 `HttpClientTestingModule`을 사용한 테스트를 상세히 설명합니다.
\ No newline at end of file
diff --git a/adev/src/content/guide/testing/using-component-harnesses.md b/adev/src/content/guide/testing/using-component-harnesses.md
index 884b33a3335f..85d348b08230 100644
--- a/adev/src/content/guide/testing/using-component-harnesses.md
+++ b/adev/src/content/guide/testing/using-component-harnesses.md
@@ -1,54 +1,53 @@
-# Using component harnesses in tests
+# 테스트에서 컴포넌트 하네스를 사용하는 방법
 
-## Before you start
+## 시작하기 전에
 
-Tip: This guide assumes you've already read the [component harnesses overview guide](guide/testing/component-harnesses-overview). Read that first if you're new to using component harnesses.
+팁: 이 가이드는 당신이 이미 [컴포넌트 하네스 개요 가이드](guide/testing/component-harnesses-overview)를 읽었다고 가정합니다. 컴포넌트 하네스를 처음 사용하는 경우, 먼저 그 내용을 읽어보세요.
 
-### CDK Installation
+### CDK 설치
 
-The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
+[Component Dev Kit (CDK)](https://material.angular.io/cdk/categories)는 컴포넌트를 구축하기 위한 동작 기본 요소 집합입니다. 컴포넌트 하네스를 사용하려면 먼저 npm에서 `@angular/cdk`를 설치하십시오. Angular CLI를 사용하여 터미널에서 이렇게 할 수 있습니다:
 
 <docs-code language="shell">
   ng add @angular/cdk
 </docs-code>
 
-## Test harness environments and loaders
+## 테스트 하네스 환경과 로더
 
-You can use component test harnesses in different test environments. Angular CDK supports two built-in environments:
-- Unit tests with Angular's `TestBed`
-- End-to-end tests with [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
+다양한 테스트 환경에서 컴포넌트 테스트 하네스를 사용할 수 있습니다. Angular CDK는 두 가지 기본 제공 환경을 지원합니다:
+- Angular의 `TestBed`를 이용한 단위 테스트
+- [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)를 이용한 종단 간 테스트
 
+각 환경은 <strong>하네스 로더</strong>를 제공합니다. 로더는 테스트 전반에 걸쳐 사용하는 하네스 인스턴스를 생성합니다. 지원되는 테스트 환경에 대한 보다 구체적인 안내는 아래를 참조하세요.
 
-Each environment provides a <strong>harness loader</strong>. The loader creates the harness instances you use throughout your tests. See below for more specific guidance on supported testing environments.
+추가 테스트 환경은 사용자 정의 바인딩이 필요합니다. 추가 테스트 환경에 대한 하네스 지원 추가 가이드를 참조하여 더 많은 정보를 확인하세요.
 
-Additional testing environments require custom bindings. See the [adding harness support for additional testing environments guide](guide/testing/component-harnesses-testing-environments) for more information.
+### 단위 테스트를 위한 `TestbedHarnessEnvironment`에서 로더 사용하기
 
-### Using the loader from `TestbedHarnessEnvironment` for unit tests
+단위 테스트의 경우, [TestbedHarnessEnvironment](https://material.angular.io/cdk/testing/api#TestbedHarnessEnvironment)로부터 하네스 로더를 생성할 수 있습니다. 이 환경은 Angular의 `TestBed`로 생성된 [컴포넌트 픽스쳐](api/core/testing/ComponentFixture)를 사용합니다.
 
-For unit tests you can create a harness loader from [TestbedHarnessEnvironment](https://material.angular.io/cdk/testing/api#TestbedHarnessEnvironment). This environment uses a [component fixture](api/core/testing/ComponentFixture) created by Angular's `TestBed`.
-
-To create a harness loader rooted at the fixture's root element, use the `loader()` method:
+픽스쳐의 루트 요소에 뿌리내린 하네스 로더를 생성하려면 `loader()` 메서드를 사용하십시오:
 
 <docs-code language="typescript">
 const fixture = TestBed.createComponent(MyComponent);
 
-// Create a harness loader from the fixture
+// 픽스쳐에서 하네스 로더를 생성합니다.
 const loader = TestbedHarnessEnvironment.loader(fixture);
 ...
 
-// Use the loader to get harness instances
+// 로더를 사용하여 하네스 인스턴스를 가져옵니다.
 const myComponentHarness = await loader.getHarness(MyComponent);
 </docs-code>
 
-To create a harness loader for harnesses for elements that fall outside the fixture, use the `documentRootLoader()` method. For example, code that displays a floating element or pop-up often attaches DOM elements directly to the document body, such as the `Overlay` service in Angular CDK.
+픽스쳐 바깥에 위치한 요소의 하네스를 위한 하네스 로더를 생성하려면, `documentRootLoader()` 메서드를 사용하십시오. 예를 들어, 플로팅 요소나 팝업을 표시하는 코드는 자주 DOM 요소를 직접 문서 본문에 첨부하는데, Angular CDK의 `Overlay` 서비스와 같은 경우가 이에 해당합니다.
 
-You can also create a harness loader directly with `harnessForFixture()` for a harness at that fixture's root element directly.
+픽스쳐의 루트 요소에 대해 하네스를 직접 가져와 `harnessForFixture()`로 하네스 로더를 생성할 수도 있습니다.
 
-### Using the loader from `SeleniumWebDriverHarnessEnvironment` for end-to-end tests
+### 종단 간 테스트를 위한 `SeleniumWebDriverHarnessEnvironment`에서 로더 사용하기
 
-For WebDriver-based end-to-end tests you can create a harness loader with `SeleniumWebDriverHarnessEnvironment`.
+WebDriver 기반 종단 간 테스트의 경우, `SeleniumWebDriverHarnessEnvironment`로 하네스 로더를 생성할 수 있습니다.
 
-Use the `loader()` method to get the harness loader instance for the current HTML document, rooted at the document's root element. This environment uses a WebDriver client.
+`loader()` 메서드를 사용하여 현재 HTML 문서에 대한 하네스 로더 인스턴스를 가져오며, 문서의 루트 요소에 뿌리내립니다. 이 환경은 WebDriver 클라이언트를 사용합니다.
 
 <docs-code language="typescript">
 let wd: webdriver.WebDriver = getMyWebDriverClient();
@@ -57,26 +56,26 @@ const loader = SeleniumWebDriverHarnessEnvironment.loader(wd);
 const myComponentHarness = await loader.getHarness(MyComponent);
 </docs-code>
 
-## Using a harness loader
+## 하네스 로더 사용하기
 
-Harness loader instances correspond to a specific DOM element and are used to create component harness instances for elements under that specific element.
+하네스 로더 인스턴스는 특정 DOM 요소와 대응하며, 해당 특정 요소 아래의 컴포넌트 하네스 인스턴스를 생성하는 데 사용됩니다.
 
-To get `ComponentHarness` for the first instance of the element, use the `getHarness()` method. To get all `ComponentHarness` instances, use the `getAllHarnesses()` method.
+요소의 첫 번째 인스턴스를 위한 `ComponentHarness`를 가져오려면 `getHarness()` 메서드를 사용하십시오. 모든 `ComponentHarness` 인스턴스를 가져오려면 `getAllHarnesses()` 메서드를 사용하십시오.
 
 <docs-code language="typescript">
-// Get harness for first instance of the element
+// 요소의 첫 번째 인스턴스에 대한 하네스를 가져옵니다.
 const myComponentHarness = await loader.getHarness(MyComponent);
 
-// Get harnesses for all instances of the element
+// 요소의 모든 인스턴스에 대한 하네스를 가져옵니다.
 const myComponentHarnesses = await loader.getHarnesses(MyComponent);
 </docs-code>
 
-As an example, consider a reusable dialog-button component that opens a dialog on click. It contains the following components, each with a corresponding harness:
-- `MyDialogButton` (composes the `MyButton` and `MyDialog` with a convenient API)
-- `MyButton` (a standard button component)
-- `MyDialog` (a dialog appended to `document.body` by `MyDialogButton` upon click)
+예를 들어, 클릭 시 다이얼로그를 여는 재사용 가능한 대화 상자 버튼 컴포넌트를 고려해 보십시오. 이 컴포넌트는 다음과 같은 구성 요소를 포함하며, 각각에 해당하는 하네스가 있습니다:
+- `MyDialogButton` (편리한 API로 `MyButton`과 `MyDialog`를 조합합니다)
+- `MyButton` (표준 버튼 컴포넌트)
+- `MyDialog` (클릭 시 `MyDialogButton`에 의해 `document.body`에 추가되는 다이얼로그)
 
-The following test loads harnesses for each of these components:
+다음 테스트는 이러한 각 컴포넌트의 하네스를 로드합니다:
 
 <docs-code language="typescript">
 let fixture: ComponentFixture<MyDialogButton>;
@@ -90,70 +89,70 @@ beforeEach(() => {
 });
 
 it('loads harnesses', async () => {
-  // Load a harness for the bootstrapped component with `harnessForFixture`
+  // `harnessForFixture`로 부트스트랩된 컴포넌트를 위한 하네스를 로드합니다.
   dialogButtonHarness =
       await TestbedHarnessEnvironment.harnessForFixture(fixture, MyDialogButtonHarness);
-  // The button element is inside the fixture's root element, so we use `loader`.
+  // 버튼 요소는 픽스쳐 루트 요소 내부에 있으므로 `loader`를 사용합니다.
   const buttonHarness = await loader.getHarness(MyButtonHarness);
-  // Click the button to open the dialog
+  // 다이얼로그를 열기 위해 버튼을 클릭합니다.
   await buttonHarness.click();
-  // The dialog is appended to `document.body`, outside of the fixture's root element,
-  // so we use `rootLoader` in this case.
+  // 다이얼로그는 `document.body`에 추가되며, 픽스쳐 루트 요소 외부에 있으므로,
+  // 이 경우 `rootLoader`를 사용합니다.
   const dialogHarness = await rootLoader.getHarness(MyDialogHarness);
-  // ... make some assertions
+  // ... 몇 가지 단언을 수행합니다.
 });
 </docs-code>
 
-### Harness behavior in different environments
+### 다양한 환경에서의 하네스 동작
 
-Harnesses may not behave exactly the same in all environments. Some differences are unavoidable between the real user interaction versus the simulated events generated in unit tests. Angular CDK makes a best effort to normalize the behavior to the extent possible.
+하네스는 모든 환경에서 동일하게 동작하지 않을 수 있습니다. 일부 차이는 실제 사용자 상호작용과 단위 테스트에서 생성된 시뮬레이션 이벤트 간의 불가피한 차이입니다. Angular CDK는 가능한 한 동작을 정규화하려고 최선을 다합니다.
 
-### Interacting with child elements
+### 자식 요소와 상호작용하기
 
-To interact with elements below the root element of this harness loader, use the `HarnessLoader` instance of a child element. For the first instance of the child element, use the `getChildLoader()` method. For all instances of the child element, use the `getAllChildLoaders()` method.
+이 하네스 로더의 루트 요소 아래에 있는 요소와 상호작용하려면 자식 요소의 `HarnessLoader` 인스턴스를 사용하십시오. 자식 요소의 첫 번째 인스턴스에 대해서는 `getChildLoader()` 메서드를 사용하십시오. 자식 요소의 모든 인스턴스에 대해서는 `getAllChildLoaders()` 메서드를 사용하십시오.
 
 <docs-code language="typescript">
 const myComponentHarness = await loader.getHarness(MyComponent);
 
-// Get loader for first instance of child element with '.child' selector
+// '.child' 선택자로 자식 요소의 첫 번째 인스턴스에 대한 로더를 가져옵니다.
 const childLoader = await myComponentHarness.getLoader('.child');
 
-// Get loaders for all instances of child elements with '.child' selector
+// '.child' 선택자로 자식 요소의 모든 인스턴스에 대한 로더를 가져옵니다.
 const allChildLoaders = await myComponentHarness.getAllChildLoaders('.child');
 </docs-code>
 
-### Filtering harnesses
+### 하네스 필터링
 
-When a page contains multiple instances of a particular component, you may want to filter based on some property of the component to get a particular component instance. You can use a <strong>harness predicate</strong>, a class used to associate a `ComponentHarness` class with predicates functions that can be used to filter component instances, to do so.
+페이지에 특정 컴포넌트의 여러 인스턴스가 포함되어 있을 때, 특정 컴포넌트 인스턴스를 얻기 위해 컴포넌트의 일부 속성에 따라 필터링하고 싶을 수 있습니다. 이를 위해 하네스 프레디케이트를 사용할 수 있으며, 이는 `ComponentHarness` 클래스를 프레디케이트 함수와 연결하는 데 사용됩니다.
 
-When you ask a `HarnessLoader` for a harness, you're actually providing a HarnessQuery. A query can be one of two things:
-- A harness constructor. This just gets that harness
-- A `HarnessPredicate`, which gets harnesses that are filtered based on one or more conditions
+`HarnessLoader`에 하네스를 요청할 때, 실제로는 HarnessQuery를 제공하는 것입니다. 쿼리는 두 가지 중 하나일 수 있습니다:
+- 하네스 생성자입니다. 이것은 해당 하네스를 얻습니다.
+- `HarnessPredicate`로, 하나 이상의 조건에 따라 필터링된 하네스를 얻습니다.
 
-`HarnessPredicate` does support some base filters (selector, ancestor) that work on anything that extends `ComponentHarness`.
+`HarnessPredicate`는 `ComponentHarness`를 확장하는 모든 항목에서 작동하는 일부 기본 필터(선택자, 조상)를 지원합니다.
 
 <docs-code language="typescript">
-// Example of loading a MyButtonComponentHarness with a harness predicate
+// 하네스 프레디케이트를 사용하여 MyButtonComponentHarness를 로드하는 예제
 const disabledButtonPredicate = new HarnessPredicate(MyButtonComponentHarness, {selector: '[disabled]'});
 const disabledButton = await loader.getHarness(disabledButtonPredicate);
 </docs-code>
 
-However it's common for harnesses to implement a static `with()` method that accepts component-specific filtering options and returns a `HarnessPredicate`.
+그러나 하네스는 일반적으로 컴포넌트 특정 필터링 옵션을 수용하는 정적 `with()` 메서드를 구현하여 `HarnessPredicate`를 반환하는 것이 일반적입니다.
 
 <docs-code language="typescript">
-// Example of loading a MyButtonComponentHarness with a specific selector
+// 특정 선택자를 사용하여 MyButtonComponentHarness를 로드하는 예제
 const button = await loader.getHarness(MyButtonComponentHarness.with({selector: 'btn'}))
 </docs-code>
 
-For more details refer to the specific harness documentation since additional filtering options are specific to each harness implementation.
+더 많은 세부정보는 각 하네스 구현에 특정한 추가 필터링 옵션이 있으므로 특정 하네스 문서를 참조하십시오.
 
-## Using test harness APIs
+## 테스트 하네스 API 사용하기
 
-While every harness defines an API specific to its corresponding component, they all share a common base class, [ComponentHarness](https://material.angular.io/cdk/testing/api#ComponentHarness). This base class defines a static property, `hostSelector`, that matches the harness class to instances of the component in the DOM.
+모든 하네스는 해당하는 컴포넌트에 특정한 API를 정의하지만, 모두 공통 기본 클래스를 공유합니다, [ComponentHarness](https://material.angular.io/cdk/testing/api#ComponentHarness). 이 기본 클래스는 하네스 클래스와 DOM에서의 컴포넌트 인스턴스를 일치시키는 정적 속성인 `hostSelector`를 정의합니다.
 
-Beyond that, the API of any given harness is specific to its corresponding component; refer to the component's documentation to learn how to use a specific harness.
+그 이상으로, 특정 하네스의 API는 해당하는 컴포넌트에 특정합니다; 특정 하네스를 사용하는 방법을 알기 위해 컴포넌트의 문서를 참조하세요.
 
-As an example, the following is a test for a component that uses the [Angular Material slider component harness](https://material.angular.io/components/slider/api#MatSliderHarness):
+예를 들어, 다음은 [Angular Material 슬라이더 컴포넌트 하네스](https://material.angular.io/components/slider/api#MatSliderHarness)를 사용하는 컴포넌트에 대한 테스트입니다:
 
 <docs-code language="typescript">
 it('should get value of slider thumb', async () => {
@@ -163,11 +162,11 @@ it('should get value of slider thumb', async () => {
 });
 </docs-code>
 
-## Interop with Angular change detection
+## Angular 변경 감지와의 상호 운용성
 
-By default, test harnesses runs Angular's [change detection](https://angular.dev/best-practices/runtime-performance) before reading the state of a DOM element and after interacting with a DOM element.
+기본적으로, 테스트 하네스는 DOM 요소의 상태를 읽기 전에 Angular의 [변경 감지](https://angular.dev/best-practices/runtime-performance)를 실행하고, DOM 요소와 상호작용한 후에 실행합니다.
 
-There may be times that you need finer-grained control over change detection in your tests. such as checking the state of a component while an async operation is pending. In these cases use the `manualChangeDetection` function to disable automatic handling of change detection for a block of code.
+테스트에서 변경 감지에 대해 더 세밀한 제어가 필요할 때가 있습니다. 예를 들어, 비동기 작업이 대기 중일 때 컴포넌트의 상태를 확인하는 경우입니다. 이러한 경우, 코드 블록에 대한 변경 감지의 자동 처리를 비활성화하기 위해 `manualChangeDetection` 함수를 사용하십시오.
 
 <docs-code language="typescript">
 it('checks state while async action is in progress', async () => {
@@ -175,28 +174,28 @@ it('checks state while async action is in progress', async () => {
   await manualChangeDetection(async () => {
     await buttonHarness.click();
     fixture.detectChanges();
-    // Check expectations while async click operation is in progress.
+    // 비동기 클릭 작업이 진행 중일 때 기대값을 확인합니다.
     expect(isProgressSpinnerVisible()).toBe(true);
     await fixture.whenStable();
-    // Check expectations after async click operation complete.
+    // 비동기 클릭 작업이 완료된 후 기대값을 확인합니다.
     expect(isProgressSpinnerVisible()).toBe(false);
   });
 });
 </docs-code>
 
-Almost all harness methods are asynchronous and return a `Promise` to support the following:
-- Support for unit tests
-- Support for end-to-end tests
-- Insulate tests against changes in asynchronous behavior
+거의 모든 하네스 메서드는 비동기이며 다음을 지원하기 위해 `Promise`를 반환합니다:
+- 단위 테스트 지원
+- 종단 간 테스트 지원
+- 비동기 동작의 변경에 대한 테스트 보호
 
-The Angular team recommends using [await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) to improve the test readability. Calling `await` blocks the execution of your test until the associated `Promise` resolves.
+Angular 팀은 테스트 가독성을 향상시키기 위해 [await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) 사용을 권장합니다. `await`를 호출하면 연결된 `Promise`가 해결될 때까지 테스트 실행이 차단됩니다.
 
-Occasionally, you may want to perform multiple actions simultaneously and wait until they're all done rather than performing each action sequentially. For example, read multiple properties of a single component. In these situations use the `parallel` function to parallelize the operations. The parallel function works similarly to `Promise.all`, while also optimizing change detection checks.
+가끔, 여러 작업을 동시에 수행하고 각 작업을 순차적으로 수행하는 대신 모두 완료될 때까지 기다리길 원할 수 있습니다. 예를 들어, 단일 컴포넌트의 여러 속성을 읽는 경우입니다. 이러한 상황에서는 `parallel` 함수를 사용하여 작업을 병렬화하십시오. 병렬 함수는 `Promise.all`과 유사하게 작동하면서도 변경 감지 확인을 최적화합니다.
 
 <docs-code language="typescript">
 it('reads properties in parallel', async () => {
   const checkboxHarness = loader.getHarness(MyCheckboxHarness);
-  // Read the checked and intermediate properties simultaneously.
+  // 체크된 속성과 중간 속성을 동시에 읽습니다.
   const [checked, indeterminate] = await parallel(() => [
     checkboxHarness.isChecked(),
     checkboxHarness.isIndeterminate()
@@ -204,4 +203,4 @@ it('reads properties in parallel', async () => {
   expect(checked).toBe(false);
   expect(indeterminate).toBe(true);
 });
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/guide/testing/utility-apis.md b/adev/src/content/guide/testing/utility-apis.md
index a76e4a985137..06c88249f323 100644
--- a/adev/src/content/guide/testing/utility-apis.md
+++ b/adev/src/content/guide/testing/utility-apis.md
@@ -1,30 +1,30 @@
-# Testing Utility APIs
+# 테스트 유틸리티 API
 
-This page describes the most useful Angular testing features.
+이 페이지는 가장 유용한 Angular 테스트 기능을 설명합니다.
 
-The Angular testing utilities include the `TestBed`, the `ComponentFixture`, and a handful of functions that control the test environment.
-The [`TestBed`](#testbed-api-summary) and [`ComponentFixture`](#component-fixture-api-summary) classes are covered separately.
+Angular 테스트 유틸리티는 `TestBed`, `ComponentFixture` 및 테스트 환경을 제어하는 여러 기능을 포함합니다.
+[`TestBed`](#testbed-api-summary) 및 [`ComponentFixture`](#component-fixture-api-summary) 클래스는 별도로 다룹니다.
 
-Here's a summary of the stand-alone functions, in order of likely utility:
+가능한 유용성의 순서로 독립적인 함수에 대한 요약은 다음과 같습니다:
 
-| Function                     | Details |
-|:---                          |:---     |
-| `waitForAsync`               | Runs the body of a test \(`it`\) or setup \(`beforeEach`\) function within a special *async test zone*. See [waitForAsync](guide/testing/components-scenarios#waitForAsync).                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `fakeAsync`                  | Runs the body of a test \(`it`\) within a special *fakeAsync test zone*, enabling a linear control flow coding style. See [fakeAsync](guide/testing/components-scenarios#fake-async).                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `tick`                       | Simulates the passage of time and the completion of pending asynchronous activities by flushing both *timer* and *micro-task* queues within the *fakeAsync test zone*.  The curious, dedicated reader might enjoy this lengthy blog post, ["*Tasks, microtasks, queues and schedules*"](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules).  Accepts an optional argument that moves the virtual clock forward by the specified number of milliseconds, clearing asynchronous activities scheduled within that timeframe. See [tick](guide/testing/components-scenarios#tick). |
-| `inject`                     | Injects one or more services from the current `TestBed` injector into a test function. It cannot inject a service provided by the component itself. See discussion of the [debugElement.injector](guide/testing/components-scenarios#get-injected-services).                                                                                                                                                                                                                                                                                                                                                                          |
-| `discardPeriodicTasks`       | When a `fakeAsync()` test ends with pending timer event *tasks* \(queued `setTimeOut` and `setInterval` callbacks\), the test fails with a clear error message. <br /> In general, a test should end with no queued tasks. When pending timer tasks are expected, call `discardPeriodicTasks` to flush the *task* queue and avoid the error.                                                                                                                                                                                                                                                                                          |
-| `flushMicrotasks`            | When a `fakeAsync()` test ends with pending *micro-tasks* such as unresolved promises, the test fails with a clear error message. <br /> In general, a test should wait for micro-tasks to finish. When pending microtasks are expected, call `flushMicrotasks` to flush the  *micro-task* queue and avoid the error.                                                                                                                                                                                                                                                                                                                 |
-| `ComponentFixtureAutoDetect` | A provider token for a service that turns on [automatic change detection](guide/testing/components-scenarios#automatic-change-detection).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `getTestBed`                 | Gets the current instance of the `TestBed`. Usually unnecessary because the static class methods of the `TestBed` class are typically sufficient. The `TestBed` instance exposes a few rarely used members that are not available as static methods.                                                                                                                                                                                                                                                                                                                                                                                  |
+| 함수                          | 세부사항 |
+|:---                           |:---      |
+| `waitForAsync`                | 테스트(`it`) 또는 설정(`beforeEach`) 함수의 본체를 특별한 *비동기 테스트 영역* 내에서 실행합니다. [waitForAsync](guide/testing/components-scenarios#waitForAsync)를 참조하세요.                                                                                                                                                                                                                                                                                                                                                                                               |
+| `fakeAsync`                   | 테스트(`it`)의 본체를 특별한 *fakeAsync 테스트 영역* 내에서 실행하여 선형 제어 흐름 코딩 스타일을 가능하게 합니다. [fakeAsync](guide/testing/components-scenarios#fake-async)를 참조하세요.                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `tick`                        | 시간을 흐르게 하고 *fakeAsync 테스트 영역* 내에서 *타이머* 및 *마이크로 작업* 큐를 플러시하여 보류 중인 비동기 작업의 완료를 시뮬레이션합니다. 호기심 많은 독자라면 ["*작업, 마이크로 작업, 큐 및 일정*"](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules)를 즐겨보실 수 있습니다. 선택적인 인수를 받아 지정된 밀리초 수만큼 가상 시계를 앞으로 이동시키고 해당 시간 프레임 내에 예약된 비동기 작업을 지웁니다. [tick](guide/testing/components-scenarios#tick)을 참조하세요. |
+| `inject`                      | 현재 `TestBed` 주입기에서 하나 이상의 서비스를 테스트 함수에 주입합니다. 컴포넌트 자체에서 제공하는 서비스는 주입할 수 없습니다. [debugElement.injector](guide/testing/components-scenarios#get-injected-services)에 대한 논의 참조.                                                                                                                                                                                                                                                                                                       |
+| `discardPeriodicTasks`        | `fakeAsync()` 테스트가 보류 중인 타이머 이벤트 *작업*(`setTimeout` 및 `setInterval` 콜백 대기열)에 종료될 경우, 테스트는 명확한 오류 메시지와 함께 실패합니다. <br /> 일반적으로 테스트는 대기 중인 작업 없이 종료되어야 합니다. 대기 중인 타이머 작업이 예상될 경우, `discardPeriodicTasks`를 호출하여 *작업* 대기열을 플러시하고 오류를 방지하세요.                                                                                                                                                       |
+| `flushMicrotasks`             | `fakeAsync()` 테스트가 보류 중인 *마이크로 작업*(해결되지 않은 프로미스 등)으로 종료될 경우, 테스트는 명확한 오류 메시지와 함께 실패합니다. <br /> 일반적으로 테스트는 마이크로 작업이 완료될 때까지 기다려야 합니다. 보류 중인 마이크로 작업이 예상될 경우, `flushMicrotasks`를 호출하여 *마이크로 작업* 큐를 플러시하고 오류를 방지하세요.                                                                                                                                                                                                                                          |
+| `ComponentFixtureAutoDetect`  | [자동 변경 감지](guide/testing/components-scenarios#automatic-change-detection)를 활성화하는 서비스에 대한 제공자 토큰입니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `getTestBed`                  | 현재 `TestBed` 인스턴스를 가져옵니다. 일반적으로 필요하지 않으며, `TestBed` 클래스의 정적 메서드가 일반적으로 충분하기 때문입니다. `TestBed` 인스턴스는 정적 메서드로는 사용할 수 없는 몇 가지 드물게 사용되는 멤버를 노출합니다.                                                                                                                                                                                                                                                                                                                                                      |
 
-## `TestBed` class summary
+## `TestBed` 클래스 요약
 
-The `TestBed` class is one of the principal Angular testing utilities.
-Its API is quite large and can be overwhelming until you've explored it, a little at a time.
-Read the early part of this guide first to get the basics before trying to absorb the full API.
+`TestBed` 클래스는 Angular 테스트 유틸리티 중 하나입니다.
+그 API는 상당히 방대하며, 조금씩 탐색해보지 않으면 압도될 수 있습니다.
+전체 API를 흡수하기 전에 먼저 이 가이드의 초기 부분을 읽고 기본 사항을 익히세요.
 
-The module definition passed to `configureTestingModule` is a subset of the `@NgModule` metadata properties.
+`configureTestingModule`에 전달된 모듈 정의는 `@NgModule` 메타데이터 속성의 하위 집합입니다.
 
 <docs-code language="javascript">
 
@@ -37,7 +37,7 @@ type TestModuleMetadata = {
 
 </docs-code>
 
-Each override method takes a `MetadataOverride<T>` where `T` is the kind of metadata appropriate to the method, that is, the parameter of an `@NgModule`, `@Component`, `@Directive`, or `@Pipe`.
+각 오버라이드 메소드는 `MetadataOverride<T>`를 받아들이며, 여기서 `T`는 메소드에 적합한 메타데이터의 종류입니다. 즉, `@NgModule`, `@Component`, `@Directive`, 또는 `@Pipe`의 매개변수입니다.
 
 <docs-code language="javascript">
 
@@ -49,103 +49,101 @@ type MetadataOverride<T> = {
 
 </docs-code>
 
-The `TestBed` API consists of static class methods that either update or reference a *global* instance of the `TestBed`.
+`TestBed` API는 *전역* `TestBed` 인스턴스를 업데이트하거나 참조하는 정적 클래스 메서드로 구성됩니다.
 
-Internally, all static methods cover methods of the current runtime `TestBed` instance, which is also returned by the `getTestBed()` function.
+내부적으로 모든 정적 메서드는 현재 런타임 `TestBed` 인스턴스의 메서드를 다룹니다. 이 인스턴스는 `getTestBed()` 함수에 의해 반환됩니다.
 
-Call `TestBed` methods *within* a `beforeEach()` to ensure a fresh start before each individual test.
+각 개별 테스트 전에 신규 시작을 보장하기 위해 `beforeEach()` 내에서 `TestBed` 메서드를 호출하세요.
 
-Here are the most important static methods, in order of likely utility.
+가능한 유용성의 순서로 가장 중요한 정적 메서드는 다음과 같습니다.
 
-| Methods                                                        | Details |
-|:---                                                            |:---     |
-| `configureTestingModule`                                       | The testing shims \(`karma-test-shim`, `browser-test-shim`\) establish the [initial test environment](guide/testing) and a default testing module. The default testing module is configured with basic declaratives and some Angular service substitutes that every tester needs. <br /> Call `configureTestingModule` to refine the testing module configuration for a particular set of tests by adding and removing imports, declarations \(of components, directives, and pipes\), and providers.                                                                                                                                              |
-| `compileComponents`                                            | Compile the testing module asynchronously after you've finished configuring it. You **must** call this method if *any* of the testing module components have a `templateUrl` or `styleUrls` because fetching component template and style files is necessarily asynchronous. See [compileComponents](guide/testing/components-scenarios#calling-compilecomponents). <br /> After calling `compileComponents`, the `TestBed` configuration is frozen for the duration of the current spec.                                                                                                                                                                 |
-| `createComponent<T>`                                     | Create an instance of a component of type `T` based on the current `TestBed` configuration. After calling `createComponent`, the `TestBed` configuration is frozen for the duration of the current spec.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `overrideModule`                                               | Replace metadata for the given `NgModule`. Recall that modules can import other modules. The `overrideModule` method can reach deeply into the current testing module to modify one of these inner modules.                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `overrideComponent`                                            | Replace metadata for the given component class, which could be nested deeply within an inner module.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `overrideDirective`                                            | Replace metadata for the given directive class, which could be nested deeply within an inner module.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `overridePipe`                                                 | Replace metadata for the given pipe class, which could be nested deeply within an inner module.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-|
- `inject`                           | Retrieve a service from the current `TestBed` injector. The `inject` function is often adequate for this purpose. But `inject` throws an error if it can't provide the service. <br /> What if the service is optional? <br /> The `TestBed.inject()` method takes an optional second parameter, the object to return if Angular can't find the provider \(`null` in this example\): <docs-code header="app/demo/demo.testbed.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="testbed-get-w-null"/> After calling `TestBed.inject`, the `TestBed` configuration is frozen for the duration of the current spec. |
-|
- `initTestEnvironment` | Initialize the testing environment for the entire test run. <br /> The testing shims \(`karma-test-shim`, `browser-test-shim`\) call it for you so there is rarely a reason for you to call it yourself. <br /> Call this method *exactly once*. To change this default in the middle of a test run, call `resetTestEnvironment` first. <br /> Specify the Angular compiler factory, a `PlatformRef`, and a default Angular testing module. Alternatives for non-browser platforms are available in the general form `@angular/platform-<platform_name>/testing/<platform_name>`.                                                                  |
-| `resetTestEnvironment`                                         | Reset the initial test environment, including the default testing module.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| 메서드                                                        | 세부사항 |
+|:---                                                            |:---      |
+| `configureTestingModule`                                       | 테스트 셈 \(`karma-test-shim`, `browser-test-shim`\)이 [초기 테스트 환경](guide/testing)과 기본 테스트 모듈을 설정합니다. 기본 테스트 모듈은 모든 테스터가 필요로 하는 기본 선언과 일부 Angular 서비스 대체물로 구성됩니다. <br /> 특정 테스트 집합을 위한 테스트 모듈 구성을 세분화하려면 `configureTestingModule`을 호출하여 가져오기, 선언(컴포넌트, 디렉티브 및 파이프) 및 제공자를 추가하고 제거하세요.                                                                                                                                                |
+| `compileComponents`                                            | 테스트 모듈 구성이 완료된 후 비동기적으로 테스트 모듈을 컴파일합니다. `templateUrl` 또는 `styleUrls`가 있는 *어떠한* 테스트 모듈 컴포넌트라도 반드시 이 메서드를 호출해야 합니다. 컴포넌트 템플릿과 스타일 파일을 가져오는 것은 본질적으로 비동기이기 때문입니다. [compileComponents](guide/testing/components-scenarios#calling-compilecomponents)를 참조하세요. <br /> `compileComponents`를 호출한 후, 현재 스펙의 지속 시간 동안 `TestBed` 구성은 동결됩니다.                                                                                                                                 |
+| `createComponent<T>`                                      | 현재 `TestBed` 구성에 따라 타입 `T`의 컴포넌트 인스턴스를 생성합니다. `createComponent`를 호출한 후, 현재 스펙의 지속 기간 동안 `TestBed` 구성은 동결됩니다.                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `overrideModule`                                               | 주어진 `NgModule`의 메타데이터를 대체합니다. 모듈이 다른 모듈을 가져올 수 있음을 기억하세요. `overrideModule` 메서드는 현재 테스트 모듈 깊숙이 들어가 이러한 내부 모듈 중 하나를 수정할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `overrideComponent`                                            | 주어진 컴포넌트 클래스의 메타데이터를 대체합니다. 이 컴포넌트는 내부 모듈 내에 깊게 중첩되어 있을 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `overrideDirective`                                            | 주어진 디렉티브 클래스의 메타데이터를 대체합니다. 이 디렉티브는 내부 모듈 내에 깊게 중첩되어 있을 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `overridePipe`                                                 | 주어진 파이프 클래스의 메타데이터를 대체합니다. 이 파이프는 내부 모듈 내에 깊게 중첩되어 있을 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `inject`                           | 현재 `TestBed` 주입기에서 서비스를 검색합니다. `inject` 함수는 이를 위한 경우가 종종 충분합니다. 그러나 `inject`는 서비스를 제공할 수 없는 경우 오류를 발생시킵니다. <br /> 서비스가 선택적인 경우는 어떻게 되나요? <br /> `TestBed.inject()` 메서드는 두 번째 선택적 매개변수를 받아 Angular가 제공자를 찾지 못할 경우 반환할 객체(이 예제에서는 `null`)를 지정할 수 있습니다: <docs-code header="app/demo/demo.testbed.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="testbed-get-w-null"/> `TestBed.inject`를 호출한 후, 현재 스펙의 지속 기간 동안 `TestBed` 구성은 동결됩니다. |
+| `initTestEnvironment` | 전체 테스트 실행을 위한 테스트 환경을 초기화합니다. <br /> 테스트 셈 \(`karma-test-shim`, `browser-test-shim`\)이 이를 위해 호출하므로 자주 스스로 호출할 이유는 거의 없습니다. <br /> 이 메서드를 *정확히 한 번* 호출하세요. 테스트 실행 중간에 이 기본값을 변경하려면 먼저 `resetTestEnvironment`를 호출하세요. <br /> Angular 컴파일러 팩토리, `PlatformRef`, 및 기본 Angular 테스트 모듈을 지정하세요. 비 브라우저 플랫폼을 위한 대체 옵션은 일반 형식 `@angular/platform-<platform_name>/testing/<platform_name>`으로 제공됩니다.  |
+| `resetTestEnvironment`                                         | 기본 테스트 모듈을 포함하여 초기 테스트 환경을 재설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
-A few of the `TestBed` instance methods are not covered by static `TestBed` *class* methods.
-These are rarely needed.
+`TestBed` 인스턴스 메서드 중 일부는 정적 `TestBed` *클래스* 메서드로 다뤄지지 않습니다.
+이들은 드물게 필요합니다.
 
-## The `ComponentFixture`
+## `ComponentFixture`
 
-The `TestBed.createComponent<T>` creates an instance of the component `T` and returns a strongly typed `ComponentFixture` for that component.
+`TestBed.createComponent<T>`는 컴포넌트 `T`의 인스턴스를 생성하고 해당 컴포넌트에 대한 강타입 `ComponentFixture`를 반환합니다.
 
-The `ComponentFixture` properties and methods provide access to the component, its DOM representation, and aspects of its Angular environment.
+`ComponentFixture` 속성과 메서드는 컴포넌트, 그 DOM 표현 및 Angular 환경의 측면에 대한 액세스를 제공합니다.
 
-### `ComponentFixture` properties
+### `ComponentFixture` 속성
 
-Here are the most important properties for testers, in order of likely utility.
+테스터를 위한 가장 중요한 속성은 유용성의 순서로 나열됩니다.
 
-| Properties          | Details |
-|:---                 |:---     |
-| `componentInstance` | The instance of the component class created by `TestBed.createComponent`.                                                                                                                                                                                                                          |
-| `debugElement`      | The `DebugElement` associated with the root element of the component. <br /> The `debugElement` provides insight into the component and its DOM element during test and debugging. It's a critical property for testers. The most interesting members are covered [below](#debug-element-details). |
-| `nativeElement`     | The native DOM element at the root of the component.                                                                                                                                                                                                                                               |
-| `changeDetectorRef` | The `ChangeDetectorRef` for the component. <br /> The `ChangeDetectorRef` is most valuable when testing a component that has the `ChangeDetectionStrategy.OnPush` method or the component's change detection is under your programmatic control.                                                   |
+| 속성                  | 세부사항 |
+|:---                   |:---      |
+| `componentInstance`   | `TestBed.createComponent`에 의해 생성된 컴포넌트 클래스의 인스턴스입니다.                                                                                                                                                                                                                          |
+| `debugElement`        | 컴포넌트의 루트 요소와 관련된 `DebugElement`입니다. <br /> `debugElement`는 테스트 및 디버깅 중에 컴포넌트 및 그 DOM 요소에 대한 통찰력을 제공합니다. 이는 테스터에게 중요한 속성입니다. 가장 흥미로운 멤버는 [아래](#debug-element-details)에서 다룹니다. |
+| `nativeElement`       | 컴포넌트의 루트에 있는 네이티브 DOM 요소입니다.                                                                                                                                                                                                                                        |
+| `changeDetectorRef`   | 컴포넌트의 `ChangeDetectorRef`입니다. <br /> `ChangeDetectorRef`는 `ChangeDetectionStrategy.OnPush` 방법이 있거나 컴포넌트의 변경 감지가 프로그래밍적으로 제어될 때 가장 유용합니다.                                           |
 
-### `ComponentFixture` methods
+### `ComponentFixture` 메서드
 
-The *fixture* methods cause Angular to perform certain tasks on the component tree.
-Call these method to trigger Angular behavior in response to simulated user action.
+*fixture* 메서드는 Angular가 컴포넌트 트리에 대해 특정 작업을 수행하도록 합니다.
+이 메서드를 호출하여 시뮬레이션된 사용자 작업에 대한 Angular 동작을 트리거하세요.
 
-Here are the most useful methods for testers.
+테스터를 위한 가장 유용한 메서드는 다음과 같습니다.
 
-| Methods             | Details |
-|:---                 |:---     |
-| `detectChanges`     | Trigger a change detection cycle for the component. <br /> Call it to initialize the component \(it calls `ngOnInit`\) and after your test code, change the component's data bound property values. Angular can't see that you've changed `personComponent.name` and won't update the `name` binding until you call `detectChanges`. <br /> Runs `checkNoChanges` afterwards to confirm that there are no circular updates unless called as `detectChanges(false)`;                                                                                    |
-| `autoDetectChanges` | Set this to `true` when you want the fixture to detect changes automatically. <br /> When autodetect is `true`, the test fixture calls `detectChanges` immediately after creating the component. Then it listens for pertinent zone events and calls `detectChanges` accordingly. When your test code modifies component property values directly, you probably still have to call `fixture.detectChanges` to trigger data binding updates. <br /> The default is `false`. Testers who prefer fine control over test behavior tend to keep it `false`. |
-| `checkNoChanges`    | Do a change detection run to make sure there are no pending changes. Throws an exceptions if there are.                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `isStable`          | If the fixture is currently *stable*, returns `true`. If there are async tasks that have not completed, returns `false`.                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `whenStable`        | Returns a promise that resolves when the fixture is stable. <br /> To resume testing after completion of asynchronous activity or asynchronous change detection, hook that promise. See [whenStable](guide/testing/components-scenarios#whenstable).                                                                                                                                                                                                                                                                                                  |
-| `destroy`           | Trigger component destruction.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| 메서드               | 세부사항 |
+|:---                  |:---      |
+| `detectChanges`      | 컴포넌트에 대한 변경 감지 주기를 트리거합니다. <br /> 컴포넌트를 초기화하려면 호출하세요 \(이 메서드는 `ngOnInit`을 호출합니다\) 및 테스트 코드 이후에 컴포넌트의 데이터 바인딩 속성 값을 변경하세요. Angular는 `personComponent.name`이 변경되었다는 것을 볼 수 없으며, `name` 바인딩을 업데이트하지 않습니다. `detectChanges`를 호출할 때까지 업데이트되지 않습니다. <br /> 순환 업데이트가 없는지 확인하기 위해 이후 `checkNoChanges`를 실행합니다; `detectChanges(false)`로 호출된 경우를 제외하고.      |
+| `autoDetectChanges` | 자동으로 변경 감지를 수행하려는 경우 `true`로 설정하세요. <br /> 자동 감지가 `true`일 때, 테스트 픽스처는 컴포넌트를 생성한 직후 `detectChanges`를 즉시 호출합니다. 그런 다음 관련 영역 이벤트를 리슨하고 그에 따라 `detectChanges`를 호출합니다. 테스트 코드가 컴포넌트 속성 값을 직접 수정할 경우, 아마도 여전히 데이터 바인딩 업데이트를 트리거하기 위해 `fixture.detectChanges`를 호출해야 할 것입니다. <br /> 기본값은 `false`입니다. 테스트 동작에 대한 세밀한 제어를 선호하는 테스터는 일반적으로 `false`로 유지합니다. |
+| `checkNoChanges`     | 보류 중인 변경 사항이 없는지 확인하기 위해 변경 감지 실행을 수행합니다. 보류 중인 변경 사항이 있을 경우 예외를 발생시킵니다.                                                                                                                                                                                                                                                                                                                                                          |
+| `isStable`           | 픽스처가 현재 *안정적*이면 `true`를 반환합니다. 비동기 작업이 완료되지 않은 경우 `false`를 반환합니다.                                                                                                                                                                                                                                                                                                                                                                                      |
+| `whenStable`         | 픽스처가 안정적일 때 해결되는 프로미스를 반환합니다. <br /> 비동기 작업 또는 비동기 변경 감지가 완료된 후 테스트를 재개하려면 해당 프로미스를 연결하세요. [whenStable](guide/testing/components-scenarios#whenstable)을 참조하세요.                                                                                                                                                                                              |
+| `destroy`            | 컴포넌트 파괴를 트리거합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 
 #### `DebugElement`
 
-The `DebugElement` provides crucial insights into the component's DOM representation.
+`DebugElement`는 컴포넌트의 DOM 표현에 대한 중요한 통찰력을 제공합니다.
 
-From the test root component's `DebugElement` returned by `fixture.debugElement`, you can walk \(and query\) the fixture's entire element and component subtrees.
+테스트 루트 컴포넌트의 `DebugElement`에서 반환된 `fixture.debugElement`를 통해 픽스처의 전체 요소 및 컴포넌트 서브 트리를 탐색하고 쿼리할 수 있습니다.
 
-Here are the most useful `DebugElement` members for testers, in approximate order of utility:
+테스터를 위한 가장 유용한 `DebugElement` 멤버는 유용성의 대략적인 순서로 나열됩니다:
 
-| Members               | Details |
-|:---                   |:---     |
-| `nativeElement`       | The corresponding DOM element in the browser                                                                                                                                                                                                                                                                        |
-| `query`               | Calling `query(predicate: Predicate<DebugElement>)` returns the first `DebugElement` that matches the [predicate](#query-predicate) at any depth in the subtree.                                                                                                                                                                                                                                        |
-| `queryAll`            | Calling `queryAll(predicate: Predicate<DebugElement>)` returns all `DebugElements` that matches the [predicate](#query-predicate) at any depth in subtree.                                                                                                                                                                                                                                              |
-| `injector`            | The host dependency injector. For example, the root element's component instance injector.                                                                                                                                                                                                                                                                                                              |
-| `componentInstance`   | The element's own component instance, if it has one.                                                                                                                                                                                                                                                                                                                                                    |
-| `context`             | An object that provides parent context for this element. Often an ancestor component instance that governs this element. <br /> When an element is repeated within `*ngFor`, the context is an `NgForOf` whose `$implicit` property is the value of the row instance value. For example, the `hero` in `*ngFor="let hero of heroes"`.                                                                   |
-| `children`            | The immediate `DebugElement` children. Walk the tree by descending through `children`.  `DebugElement` also has `childNodes`, a list of `DebugNode` objects. `DebugElement` derives from `DebugNode` objects and there are often more nodes than elements. Testers can usually ignore plain nodes.                                                                  |
-| `parent`              | The `DebugElement` parent. Null if this is the root element.                                                                                                                                                                                                                                                                                                                                            |
-| `name`                | The element tag name, if it is an element.                                                                                                                                                                                                                                                                                                                                                              |
-| `triggerEventHandler` | Triggers the event by its name if there is a corresponding listener in the element's `listeners` collection. The second parameter is the *event object* expected by the handler. See [triggerEventHandler](guide/testing/components-scenarios#trigger-event-handler). <br /> If the event lacks a listener or there's some other problem, consider calling `nativeElement.dispatchEvent(eventObject)`. |
-| `listeners`           | The callbacks attached to the component's `@Output` properties and/or the element's event properties.                                                                                                                                                                                                                                                                                                   |
-| `providerTokens`      | This component's injector lookup tokens. Includes the component itself plus the tokens that the component lists in its `providers` metadata.                                                                                                                                                                                                                                                            |
-| `source`              | Where to find this element in the source component template.                                                                                                                                                                                                                                                                                                                                            |
-| `references`          | Dictionary of objects associated with template local variables \(for example, `#foo`\), keyed by the local variable name.                                                                                                                                                                                                                                                                                        |
+| 멤버                  | 세부사항 |
+|:---                   |:---      |
+| `nativeElement`       | 브라우저의 해당 DOM 요소입니다.                                                                                                                                                                                                                                             |
+| `query`               | `query(predicate: Predicate<DebugElement>)`를 호출하면 서브 트리의 어떤 깊이에서든지 [predicate](#query-predicate)와 일치하는 첫 번째 `DebugElement`를 반환합니다.                                                                                                                                                                                                 |
+| `queryAll`            | `queryAll(predicate: Predicate<DebugElement>)`를 호출하면 서브 트리의 어떤 깊이에서든지 [predicate](#query-predicate)와 일치하는 모든 `DebugElement`를 반환합니다.                                                                                                                                                                                                       |
+| `injector`            | 호스트 의존성 주입기입니다. 예를 들어 루트 요소의 컴포넌트 인스턴스 주입기입니다.                                                                                                                                                                                                                                                                                                              |
+| `componentInstance`   | 해당 요소의 자신의 컴포넌트 인스턴스가 있는 경우, 그렇습니다.                                                                                                                                                                                                                                                                                                                                            |
+| `context`             | 이 요소에 대한 부모 컨텍스트를 제공하는 객체입니다. 종종 이 요소를 지배하는 상위 컴포넌트 인스턴스입니다. <br /> 요소가 `*ngFor` 내에서 반복되면, 컨텍스트는 `$implicit` 속성이 행 인스턴스 값인 `NgForOf`가 됩니다. 예를 들어, `*ngFor="let hero of heroes"`에서 `hero`가 해당됩니다.                                                  |
+| `children`            | 즉각적인 `DebugElement` 자식입니다. `children`을 통해 트리를 하강하여 걷습니다. `DebugElement`는 `DebugNode` 객체 목록인 `childNodes`도 가집니다. `DebugElement`는 `DebugNode` 객체에서 파생되며, 종종 요소보다 더 많은 노드가 있습니다. 테스터는 일반적으로 일반 노드는 무시할 수 있습니다.                                                                |
+| `parent`              | `DebugElement` 부모입니다. 루트 요소인 경우 `null`입니다.                                                                                                                                                                                                                                                                                                                                             |
+| `name`                | 요소가 있는 경우, 요소 태그 이름입니다.                                                                                                                                                                                                                                                                                                                                                             |
+| `triggerEventHandler` | 해당 요소의 `listeners` 컬렉션에 청취자가 있는 경우 해당 이름의 이벤트를 트리거합니다. 두 번째 매개변수는 핸들러가 예상하는 *이벤트 객체*입니다. [triggerEventHandler](guide/testing/components-scenarios#trigger-event-handler)를 참조하세요. <br /> 이벤트에 청취자가 없거나 다른 문제가 있는 경우 `nativeElement.dispatchEvent(eventObject)`를 호출하는 것을 고려하세요.          |
+| `listeners`           | 컴포넌트의 `@Output` 속성 및/또는 요소의 이벤트 속성과 연결된 콜백입니다.                                                                                                                                                                                                                                                                                                                      |
+| `providerTokens`      | 이 컴포넌트의 주입기 조회 토큰입니다. 컴포넌트 자체 및 컴포넌트가 `providers` 메타데이터에 나열하는 토큰을 포함합니다.                                                                                                                                                                                                                         |
+| `source`              | 소스 컴포넌트 템플릿에서 이 요소를 찾는 위치입니다.                                                                                                                                                                                                                                                                                                                                               |
+| `references`          | 템플릿 지역 변수(예: `#foo`)와 연관된 객체의 사전이며, 지역 변수 이름으로 키가 지정됩니다.                                                                                                                                                                                                                                                                                               |
 
-The `DebugElement.query(predicate)` and `DebugElement.queryAll(predicate)` methods take a predicate that filters the source element's subtree for matching `DebugElement`.
+`DebugElement.query(predicate)` 및 `DebugElement.queryAll(predicate)` 메서드는 소스 요소의 서브 트리에서 일치하는 `DebugElement`를 필터링하는 프레디케이트를 사용합니다.
 
-The predicate is any method that takes a `DebugElement` and returns a *truthy* value.
-The following example finds all `DebugElements` with a reference to a template local variable named "content":
+프레디케이트는 `DebugElement`를 인수로 받아 *참 값*을 반환하는 any 메서드입니다.
+다음 예제는 "content"라는 템플릿 지역 변수에 대한 참조가 있는 모든 `DebugElements`를 찾습니다:
 
 <docs-code header="app/demo/demo.testbed.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="custom-predicate"/>
 
-The Angular `By` class has three static methods for common predicates:
+Angular `By` 클래스는 일반적인 프레디케이트에 대한 세 가지 정적 메서드를 제공합니다:
 
-| Static method             | Details |
-|:---                       |:---     |
-| `By.all`                  | Return all elements                                                        |
-| `By.css(selector)`        | Return elements with matching CSS selectors                                |
-| `By.directive(directive)` | Return elements that Angular matched to an instance of the directive class |
+| 정적 메서드             | 세부사항 |
+|:---                     |:---      |
+| `By.all`                | 모든 요소 반환                                                              |
+| `By.css(selector)`      | 일치하는 CSS 선택기가 있는 요소 반환                                        |
+| `By.directive(directive)`| 디렉티브 클래스의 인스턴스에 Angular가 일치하는 요소 반환 |
 
-<docs-code header="app/hero/hero-list.component.spec.ts" path="adev/src/content/examples/testing/src/app/hero/hero-list.component.spec.ts" visibleRegion="by"/>
+<docs-code header="app/hero/hero-list.component.spec.ts" path="adev/src/content/examples/testing/src/app/hero/hero-list.component.spec.ts" visibleRegion="by"/>
\ No newline at end of file
diff --git a/adev/src/content/guide/zoneless.md b/adev/src/content/guide/zoneless.md
index 25cc7d357983..da2094f3bbcc 100644
--- a/adev/src/content/guide/zoneless.md
+++ b/adev/src/content/guide/zoneless.md
@@ -1,26 +1,25 @@
 # Angular without ZoneJS (Zoneless)
 
-## Why use Zoneless?
+## Zoneless를 사용하는 이유는 무엇인가요?
 
-The main advantages to removing ZoneJS as a dependency are:
+ZoneJS를 종속성에서 제거함으로써 얻는 주요 장점은 다음과 같습니다:
 
-- **Improved performance**: ZoneJS uses DOM events and async tasks as indicators of when application state _might_ have updated and subsequently triggers application synchronization to run change detection on the application's views. ZoneJS does not have any insight into whether application state actually changed and so this synchronization is triggered more frequently than necessary.
-- **Improved Core Web Vitals**: ZoneJS brings a fair amount of overhead, both in payload size and in startup time cost.
-- **Improved debugging experience**: ZoneJS makes debugging code more difficult. Stack traces are harder to understand with ZoneJS. It's also difficult to understand when code breaks as a result of being outside the Angular Zone.
-- **Better ecosystem compatibility**: ZoneJS works by patching browser APIs but does not automatically have patches for every new browser API. Some APIs cannot be patched effectively, such as `async`/`await`, and have to be downleveled to work with ZoneJS. Sometimes libraries in the ecosystem are also incompatible with the way ZoneJS patches the native APIs. Removing ZoneJS as a dependency ensures better long-term compatibility by removing a source of complexity, monkey patching, and ongoing maintenance.
+- **성능 개선**: ZoneJS는 DOM 이벤트와 비동기 작업을 애플리케이션 상태가 _업데이트될 수 있는_ 시점의 지표로 사용하며, 이후 애플리케이션을 동기화하여 애플리케이션의 뷰에서 변경 감지를 실행합니다. ZoneJS는 애플리케이션 상태가 실제로 변경되었는지에 대한 통찰력이 없기 때문에 이 동기화는 필요 이상으로 자주 발생합니다.
+- **Core Web Vitals 개선**: ZoneJS는 부하의 크기와 시작 시간 비용 모두에서 꽤 많은 오버헤드를 가져옵니다.
+- **디버깅 경험 개선**: ZoneJS는 코드 디버깅을 더 어렵게 만듭니다. ZoneJS와 함께하는 스택 추적은 이해하기가 더 어렵습니다. 또한 코드는 Angular Zone 밖에 있는 결과로 인해 언제 중단되는지를 이해하기 어렵습니다.
+- **생태계 호환성 개선**: ZoneJS는 브라우저 API를 패치하여 작동하지만, 새로운 브라우저 API에 대한 패치를 자동으로 제공하지 않습니다. `async`/`await`와 같이 효과적으로 패치할 수 없는 일부 API가 있으며, 이를 ZoneJS와 함께 사용하려면 다운레벨해야 합니다. 생태계 내의 라이브러리 또한 ZoneJS가 네이티브 API를 패치하는 방식과 호환되지 않을 수 있습니다. ZoneJS를 종속성에서 제거함으로써 복잡성의 원천인 몽키 패칭과 지속적인 유지 관리를 제거하여 장기적으로 더 나은 호환성을 보장합니다.
 
-## Enabling Zoneless in an application
+## 애플리케이션에서 Zoneless 활성화하기
 
-The API for enabling Zoneless is currently experimental. Neither the shape, nor the underlying behavior is stable and can change
-in patch versions. There are known feature gaps, including the lack of an ergonomic API which prevents the application from serializing too early with Server Side Rendering.
+Zoneless 활성화 API는 현재 실험적입니다. 형태나 기본 동작 모두 안정적이지 않으며 패치 버전에서 변경될 수 있습니다. 알려진 기능 공백이 있으며, 서버 사이드 렌더링과 함께 너무 일찍 직렬화 되는 것을 방지하는 인체공학적인 API가 부족합니다.
 
 ```typescript
-// standalone bootstrap
+// 독립형 부트스트랩
 bootstrapApplication(MyApp, {providers: [
   provideExperimentalZonelessChangeDetection(),
 ]});
 
-// NgModule bootstrap
+// NgModule 부트스트랩
 platformBrowser().bootstrapModule(AppModule);
 @NgModule({
   providers: [provideExperimentalZonelessChangeDetection()]
@@ -28,69 +27,47 @@ platformBrowser().bootstrapModule(AppModule);
 export class AppModule {}
 ```
 
-## Removing ZoneJS
+## ZoneJS 제거하기
 
-Zoneless applications should remove ZoneJS entirely from the build to reduce bundle size. ZoneJS is typically
-loaded via the `polyfills` option in `angular.json`, both in the `build` and `test` targets. Remove `zone.js`
-and `zone.js/testing` from both to remove it from the build. Projects which use an explicit `polyfills.ts` file
-should remove `import 'zone.js';` and `import 'zone.js/testing';` from the file.
+Zoneless 애플리케이션은 번들 크기를 줄이기 위해 ZoneJS를 빌드에서 완전히 제거해야 합니다. ZoneJS는 일반적으로 `angular.json`의 `polyfills` 옵션을 통해 로드되며, `build` 및 `test` 타겟 모두에서 포함됩니다. 빌드에서 제거하기 위해 `zone.js` 및 `zone.js/testing`을 모두 삭제하십시오. 명시적으로 `polyfills.ts` 파일을 사용하는 프로젝트는 파일에서 `import 'zone.js';` 및 `import 'zone.js/testing';`을 삭제해야 합니다.
 
-After removing ZoneJS from the build, there is no longer a need for a `zone.js` dependency either and the
-package can be removed entirely:
+ZoneJS를 빌드에서 제거한 후에는 더 이상 `zone.js` 종속성이 필요하지 않으며 패키지를 완전히 제거할 수 있습니다:
 
 ```shell
 npm uninstall zone.js
 ```
 
-## Requirements for Zoneless compatibility
+## Zoneless 호환성 요구 사항
 
-Angular relies on notifications from core APIs in order to determine when to run change detection and on which views.
-These notifications include:
+Angular는 변경 감지를 실행할 때 및 어떤 뷰에서 실행할지 결정하기 위해 core API의 알림에 의존합니다. 이 알림에는 다음이 포함됩니다:
 
-- `ChangeDetectorRef.markForCheck` (called automatically by `AsyncPipe`)
+- `ChangeDetectorRef.markForCheck` (자동으로 `AsyncPipe`에 의해 호출됨)
 - `ComponentRef.setInput`
-- Updating a signal that's read in a template
-- Bound host or template listeners callbacks
-- Attaching a view that was marked dirty by one of the above
+- 템플릿에서 읽히는 신호 업데이트
+- 바인드된 호스트 또는 템플릿리스너 콜백
+- 위의 것 중 하나에 의해 더러워진 것으로 표시된 뷰 연결
 
-### `OnPush`-compatible components
+### `OnPush` 호환 구성 요소
 
-One way to ensure that a component is using the correct notification mechanisms from above is to
-use [ChangeDetectionStrategy.OnPush](/best-practices/skipping-subtrees#using-onpush).
+구성 요소가 위의 올바른 알림 메커니즘을 사용하고 있는지 확인하는 한 가지 방법은 [ChangeDetectionStrategy.OnPush](/best-practices/skipping-subtrees#using-onpush)를 사용하는 것입니다.
 
-The `OnPush` change detection strategy is not required, but it is a recommended step towards zoneless compatibility for application components. It is not always possible for library components to use `ChangeDetectionStrategy.OnPush`.
-When a library component is a host for user-components which might use `ChangeDetectionStrategy.Default`, it cannot use `OnPush` because that would prevent the child component from being refreshed if it is not `OnPush` compatible and relies on ZoneJS to trigger change detection. Components can use the `Default` strategy as long as they notify Angular when change detection needs to run (calling `markForCheck`, using signals, `AsyncPipe`, etc.).
-Being a host for a user component means using an API such as `ViewContainerRef.createComponent` and not just hosting a portion of a template from a user component (i.e. content projection or a using a template ref input).
+`OnPush` 변경 감지 전략은 필수는 아니지만, 애플리케이션 구성 요소의 Zoneless 호환성을 위한 권장 단계입니다. 라이브러리 구성 요소가 `ChangeDetectionStrategy.OnPush`를 사용하는 것은 항상 가능하지 않습니다. 라이브러리 구성 요소가 `ChangeDetectionStrategy.Default`를 사용할 수 있는 사용자 구성 요소의 호스트인 경우, 이 구성 요소는 `OnPush`를 사용할 수 없습니다. 왜냐하면 그렇게 하면 자식 구성 요소가 최신 상태로 업데이트되지 않아야 하기 때문입니다. 구성 요소는 변경 감지가 실행되어야 할 때 Angular에 알리기만 하면 `Default` 전략을 사용할 수 있습니다(예: `markForCheck` 호출, 신호 사용, `AsyncPipe` 등). 사용자 구성 요소의 호스트가 된다는 것은 `ViewContainerRef.createComponent`와 같은 API를 사용해야 하며, 사용자 구성 요소의 일부 템플릿을 호스팅하는 것만으로는 충분하지 않습니다(즉, 콘텐츠 프로젝션 또는 템플릿 참조 입력 사용).
 
-### Remove `NgZone.onMicrotaskEmpty`, `NgZone.onUnstable`, `NgZone.isStable`, or `NgZone.onStable`
+### `NgZone.onMicrotaskEmpty`, `NgZone.onUnstable`, `NgZone.isStable`, 또는 `NgZone.onStable` 제거
 
-Applications and libraries need to remove uses of `NgZone.onMicrotaskEmpty`, `NgZone.onUnstable` and `NgZone.onStable`.
-These observables will never emit when an Application enables zoneless change detection.
-Similarly, `NgZone.isStable` will always be `true` and should not be used as a condition for code execution.
+애플리케이션과 라이브러리는 `NgZone.onMicrotaskEmpty`, `NgZone.onUnstable` 및 `NgZone.onStable`의 사용을 제거해야 합니다. 이 옵저버블은 애플리케이션이 Zoneless 변경 감지를 활성화하면 결코 방출되지 않습니다. 마찬가지로 `NgZone.isStable`은 항상 `true`가 되며 코드 실행의 조건으로 사용되어서는 안 됩니다.
 
-The `NgZone.onMicrotaskEmpty` and `NgZone.onStable` observables are most often used to wait for Angular to
-complete change detection before performing a task. Instead, these can be replaced by `afterNextRender`
-if they need to wait for a single change detection or `afterRender` if there is some condition that might span
-several change detection rounds. In other cases, these observables were used because they happened to be
-familiar and have similar timing to what was needed. More straightforward or direct DOM APIs can be used instead,
-such as `MutationObserver` when code needs to wait for certain DOM state (rather than waiting for it indirectly
-through Angular's render hooks).
+`NgZone.onMicrotaskEmpty` 및 `NgZone.onStable` 옵저버블은 일반적으로 Angular가 변경 감지를 완료할 때까지 작업을 수행하기 위해 사용됩니다. 대신, 단일 변경 감지를 기다릴 필요가 있다면 `afterNextRender`로 대체할 수 있습니다. 여러 변경 감지 라운드를 거치는 조건이 있다면 `afterRender`를 사용할 수 있습니다. 다른 경우에서 이러한 옵저버블은 친숙하고 필요한 것과 유사한 타이밍으로 인해 사용되었습니다. 더 직관적이거나 직접적인 DOM API를 대신 사용할 수 있습니다. 예를 들어, 코드가 특정 DOM 상태를 기다려야 할 때 `MutationObserver`를 사용할 수 있습니다(Angular의 렌더 훅을 통한 간접적인 방법으로 기다리는 것이 아닙니다).
 
-<docs-callout title="NgZone.run and NgZone.runOutsideAngular are compatible with Zoneless">
-`NgZone.run` and `NgZone.runOutsideAngular` do not need to be removed in order for code to be compatible with
-Zoneless applications. In fact, removing these calls can lead to performance regressions for libraries that
-are used in applications that still rely on ZoneJS.
+<docs-callout title="NgZone.run 및 NgZone.runOutsideAngular는 Zoneless와 호환됩니다">
+`NgZone.run` 및 `NgZone.runOutsideAngular`는 코드가 Zoneless 애플리케이션과 호환되도록 제거할 필요가 없습니다. 사실, 이러한 호출을 제거하면 ZoneJS에 여전히 의존하는 애플리케이션에서 사용되는 라이브러리의 성능 저하로 이어질 수 있습니다.
 </docs-callout>
 
-### `PendingTasks` for Server Side Rendering (SSR)
+### 서버 사이드 렌더링(SSR)을 위한 `PendingTasks`
 
-If you are using SSR with Angular, you may know that it relies on ZoneJS to help determine when the application
-is "stable" and can be serialized. If there are asynchronous tasks that should prevent serialization, an application
-not using ZoneJS must make Angular aware of these with the [PendingTasks](/api/core/PendingTasks) service. Serialization
-will wait for the first moment that all pending tasks have been removed.
+Angular와 함께 SSR을 사용하는 경우, 이 프레임워크가 ZoneJS에 의존하여 애플리케이션이 "안정적"이 되고 직렬화될 수 있는 시점을 결정함을 알 수 있습니다. 직렬화를 방지해야 할 비동기 작업이 발생하는 경우, ZoneJS를 사용하지 않는 애플리케이션은 [PendingTasks](/api/core/PendingTasks) 서비스를 통해 이러한 비동기 작업을 Angular에 알리야 합니다. 직렬화는 모든 대기 작업이 제거된 첫 번째 순간을 기다립니다.
 
-
-The two most straightforward uses of pending tasks are the `run` method:
+대기 작업의 두 가지 간단한 사용 사례는 `run` 메서드입니다:
 
 ```typescript
 const taskService = inject(PendingTasks);
@@ -100,7 +77,7 @@ taskService.run(async () => {
 });
 ```
 
-For more complicated use-cases, you can manuall add and remove a pending tasks:
+더 복잡한 사용 사례의 경우, 대기 작업을 수동으로 추가하고 제거할 수 있습니다:
 
 ```typescript
 const taskService = inject(PendingTasks);
@@ -108,29 +85,25 @@ const taskCleanup = taskService.add();
 try {
   await doSomeWorkThatNeedsToBeRendered();
 } catch {
-  // handle error
+  // 에러 처리
 } finally {
   taskCleanup();
 }
 ```
 
-In addition, the [pendingUntilEvent](/api/core/rxjs-interop/pendingUntilEvent#) helper in `rxjs-interop` ensures
-the application remains unstable until the observable emits, complets, errors, or is unsubscribed.
+또한, `rxjs-interop`의 [pendingUntilEvent](/api/core/rxjs-interop/pendingUntilEvent#) 헬퍼는 옵저버블이 방출되거나 완료되거나 에러가 발생하거나 구독이 취소될 때까지 애플리케이션이 불안정한 상태로 유지되도록 보장합니다.
 
 ```typescript
 readonly myObservableState = someObservable.pipe(pendingUntilEvent());
 ```
 
-The framework uses this service internally as well to prevent serialization until asynchronous tasks are complete. These include, but are not limited to,
-an ongoing Router navigation and an incomplete `HttpClient` request.
+프레임워크는 비동기 작업이 완료될 때까지 직렬화를 방지하기 위해 이 서비스를 내부적으로도 사용합니다. 여기에는ongoing Router 내비게이션 및 미완료된 `HttpClient` 요청이 포함되며, 이에 국한되지 않습니다.
 
-## Testing and Debugging
+## 테스트 및 디버깅
 
-### Using Zoneless in `TestBed`
+### `TestBed`에서 Zoneless 사용하기
 
-The zoneless provider function can also be used with `TestBed` to help
-ensure the components under test are compatible with a Zoneless
-Angular application.
+Zoneless 공급자 함수는 `TestBed`와 함께 사용하여 테스트 중인 구성 요소가 Zoneless Angular 애플리케이션과 호환되는지 확인하는 데 도움을 줄 수 있습니다.
 
 ```typescript
 TestBed.configureTestingModule({
@@ -141,29 +114,10 @@ const fixture = TestBed.createComponent(MyComponent);
 await fixture.whenStable();
 ```
 
-To ensure tests have the most similar behavior to production code,
-avoid using `fixture.detectChanges()` when possible. This forces
-change detection to run when Angular might otherwise have not
-scheduled change detection. Tests should ensure these notifications
-are happening and allow Angular to handle when to synchronize
-state rather than manually forcing it to happen in the test.
-
-For existing test suites, using `fixture.detectChanges()` is a common pattern
-and it is likely not worth the effort of converting these to
-`await fixture.whenStable()`. `TestBed` will still enforce that the
-fixture's component is `OnPush` compatible and throws `ExpressionChangedAfterItHasBeenCheckedError`
-if it finds that template values were updated without a
-change notification (i.e. `fixture.componentInstance.someValue = 'newValue';`).
-If the component is used in production, this issue should be addressed by updating
-the component to use signals for state or call `ChangeDetectorRef.markForCheck()`.
-If the component is only used as a test wrapper and never used in an application,
-it is acceptable to use `fixture.changeDetectorRef.markForCheck()`.
-
-### Debug-mode check to ensure updates are detected
-
-Angular also provides an additional tool to help verify that an application is making
-updates to state in a zoneless-compatible way. `provideExperimentalCheckNoChangesForDebug`
-can be used to periodically check to ensure that no bindings have been updated
-without a notification. Angular throws `ExpressionChangedAfterItHasBeenCheckedError`
-if there is an updated binding that would not have refreshed by the zoneless change
-detection.
+테스트가 프로덕션 코드와 가장 유사한 동작을 가지도록 하려면 가능한 경우 `fixture.detectChanges()`를 사용하는 것을 피하십시오. 이는 Angular가 그렇지 않을 경우 변경 감지를 예약하도록 강제합니다. 테스트는 이러한 알림이 발생하는지 확인하고 Angular가 상태를 동기화할 시점을 처리하도록 허용해야 하며, 테스트에서 수동으로 발생시키는 것을 피해야 합니다.
+
+기존 테스트 스위트에서 `fixture.detectChanges()`를 사용하는 것은 일반적인 패턴이며, 이를 `await fixture.whenStable()`로 변환하는 것은 해당 노력을 들일 가치가 없을 것입니다. `TestBed`는 여전히 고정 장치의 구성 요소가 `OnPush` 호환성을 갖추고 있는지를 강제하며, 변경 알림 없이 템플릿 값을 업데이트한 경우 `ExpressionChangedAfterItHasBeenCheckedError`를 발생시킵니다(예: `fixture.componentInstance.someValue = 'newValue';`). 구성 요소가 프로덕션에서 사용되는 경우, 이 문제는 상태를 위한 신호를 사용하거나 `ChangeDetectorRef.markForCheck()`를 호출하여 업데이트하여 해결되어야 합니다. 구성 요소가 단지 테스트 래퍼로만 사용되고 애플리케이션에서 사용되지 않는다면, `fixture.changeDetectorRef.markForCheck()`를 사용하는 것은 허용됩니다.
+
+### 업데이트가 감지되는지 확인하기 위한 디버그 모드 검사
+
+Angular는 애플리케이션이 Zoneless 호환 방식으로 상태 업데이트를 수행하고 있는지를 검증하는 데 도움을 주는 추가 도구도 제공합니다. `provideExperimentalCheckNoChangesForDebug`를 사용하여 주기적으로 바인딩이 알림 없이 업데이트되지 않았는지 확인할 수 있습니다. 업데이트된 바인딩이 Zoneless 변경 탐지에 의해 새로 고쳐지지 않을 경우 Angular는 `ExpressionChangedAfterItHasBeenCheckedError`를 발생시킵니다.
\ No newline at end of file
diff --git a/adev/src/content/introduction/essentials/components.md b/adev/src/content/introduction/essentials/components.md
index 85ea7cc61ee2..54dc24542368 100644
--- a/adev/src/content/introduction/essentials/components.md
+++ b/adev/src/content/introduction/essentials/components.md
@@ -1,50 +1,50 @@
 <docs-decorative-header title="Components" imgSrc="adev/src/assets/images/components.svg"> <!-- markdownlint-disable-line -->
-The fundamental building block for creating applications in Angular.
+앵귤러에서 애플리케이션을 만들기 위한 기본 빌딩 블록입니다.
 </docs-decorative-header>
 
-Components are the main building blocks of Angular applications. Each component represents a part of a larger web page. Organizing an application into components helps provide structure to your project, clearly separating code into specific parts that are easy to maintain and grow over time.
+컴포넌트는 앵귤러 애플리케이션의 주요 빌딩 블록입니다. 각 컴포넌트는 더 큰 웹 페이지의 일부를 나타냅니다. 애플리케이션을 컴포넌트로 구성하면 프로젝트의 구조를 제공하고, 코드를 명확하게 특정 부분으로 분리하여 유지 관리하고 시간이 지남에 따라 성장하기 쉽게 도와줍니다.
 
-## Defining a component
+## 컴포넌트 정의
 
-Every component has a few main parts:
+모든 컴포넌트는 몇 가지 주요 부분을 가지고 있습니다:
 
-1. A `@Component`[decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) that contains some configuration used by Angular.
-2. An HTML template that controls what renders into the DOM.
-3. A [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors) that defines how the component is used in HTML.
-4. A TypeScript class with behaviors, such as handling user input or making requests to a server.
+1. 앵귤러에서 사용하는 일부 구성 정보를 포함하는 `@Component`[데코레이터](https://www.typescriptlang.org/docs/handbook/decorators.html).
+2. DOM에 렌더링되는 내용을 제어하는 HTML 템플릿.
+3. HTML에서 컴포넌트가 어떻게 사용되는지를 정의하는 [CSS 선택자](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors).
+4. 사용자 입력 처리나 서버에 요청을 하는 등의 동작을 가진 TypeScript 클래스.
 
-Here is a simplified example of a `UserProfile` component.
+여기 `UserProfile` 컴포넌트의 간단한 예가 있습니다.
 
 ```angular-ts
 // user-profile.ts
 @Component({
   selector: 'user-profile',
   template: `
-    <h1>User profile</h1>
-    <p>This is the user profile page</p>
+    <h1>사용자 프로필</h1>
+    <p>이것은 사용자 프로필 페이지입니다</p>
   `,
 })
-export class UserProfile { /* Your component code goes here */ }
+export class UserProfile { /* 여기에 컴포넌트 코드가 들어갑니다 */ }
 ```
 
-The `@Component` decorator also optionally accepts a `styles` property for any CSS you want to apply to your template:
+`@Component` 데코레이터는 템플릿에 적용할 CSS에 대한 `styles` 속성을 선택적으로 수용합니다:
 
 ```angular-ts
 // user-profile.ts
 @Component({
   selector: 'user-profile',
   template: `
-    <h1>User profile</h1>
-    <p>This is the user profile page</p>
+    <h1>사용자 프로필</h1>
+    <p>이것은 사용자 프로필 페이지입니다</p>
   `,
   styles: `h1 { font-size: 3em; } `,
 })
-export class UserProfile { /* Your component code goes here */ }
+export class UserProfile { /* 여기에 컴포넌트 코드가 들어갑니다 */ }
 ```
 
-### Separating HTML and CSS into separate files
+### HTML과 CSS를 별도의 파일로 분리하기
 
-You can define a component's HTML and CSS in separate files using `templateUrl` and `styleUrl`:
+`templateUrl` 및 `styleUrl`을 사용하여 컴포넌트의 HTML 및 CSS를 별도의 파일로 정의할 수 있습니다:
 
 ```angular-ts
 // user-profile.ts
@@ -54,14 +54,14 @@ You can define a component's HTML and CSS in separate files using `templateUrl`
   styleUrl: 'user-profile.css',
 })
 export class UserProfile {
-  // Component behavior is defined in here
+  // 컴포넌트 동작이 여기에 정의됩니다
 }
 ```
 
 ```angular-html
 <!-- user-profile.html -->
-<h1>Use profile</h1>
-<p>This is the user profile page</p>
+<h1>사용자 프로필</h1>
+<p>이것은 사용자 프로필 페이지입니다</p>
 ```
 
 ```css
@@ -71,9 +71,9 @@ h1 {
 }
 ```
 
-## Using components
+## 컴포넌트 사용하기
 
-You build an application by composing multiple components together. For example, if you are building a user profile page, you might break the page up into several components like this:
+여러 컴포넌트를 결합하여 애플리케이션을 빌드합니다. 예를 들어, 사용자 프로필 페이지를 구축하는 경우 페이지를 여러 개의 컴포넌트로 나눌 수 있습니다:
 
 ```mermaid
 flowchart TD
@@ -84,14 +84,14 @@ flowchart TD
     D[UserAddress]
 ```
 
-Here, the `UserProfile` component uses several other components to produce the final page.
+여기서 `UserProfile` 컴포넌트는 여러 다른 컴포넌트를 사용하여 최종 페이지를 생성합니다.
 
-To import and use a component, you need to:
-1. In your component's TypeScript file, add an `import` statement for the component you want to use.
-2. In your `@Component` decorator, add an entry to the `imports` array for the component you want to use.
-3. In your component's template, add an element that matches the selector of the component you want to use.
+컴포넌트를 가져오고 사용하려면 다음이 필요합니다:
+1. 컴포넌트의 TypeScript 파일에서 사용하려는 컴포넌트에 대한 `import` 문을 추가합니다.
+2. `@Component` 데코레이터에서 사용하려는 컴포넌트에 대한 `imports` 배열에 항목을 추가합니다.
+3. 컴포넌트의 템플릿에서 사용하려는 컴포넌트의 선택자와 일치하는 요소를 추가합니다.
 
-Here's an example of a `UserProfile` component importing a `ProfilePhoto` component:
+다음은 `ProfilePhoto` 컴포넌트를 가져오는 `UserProfile` 컴포넌트의 예입니다:
 
 ```angular-ts
 // user-profile.ts
@@ -101,23 +101,23 @@ import {ProfilePhoto} from 'profile-photo.ts';
   selector: 'user-profile',
   imports: [ProfilePhoto],
   template: `
-    <h1>User profile</h1>
+    <h1>사용자 프로필</h1>
     <profile-photo />
-    <p>This is the user profile page</p>
+    <p>이것은 사용자 프로필 페이지입니다</p>
   `,
 })
 export class UserProfile {
-  // Component behavior is defined in here
+  // 컴포넌트 동작이 여기에 정의됩니다
 }
 ```
 
-Tip: Want to know more about Angular components? See the [In-depth Components guide](guide/components) for the full details.
+팁: 앵귤러 컴포넌트에 대해 더 알고 싶나요? 전체 세부 정보를 보려면 [심층 컴포넌트 가이드](guide/components)를 참조하세요.
 
-## Next Step
+## 다음 단계
 
-Now that you know how components work in Angular, it's time to learn how we add and manage dynamic data in our application.
+이제 앵귤러에서 컴포넌트가 어떻게 작동하는지 알았으므로, 애플리케이션에서 동적 데이터를 추가하고 관리하는 방법을 배워야 할 때입니다.
 
 <docs-pill-row>
-  <docs-pill title="Reactivity with signals" href="essentials/signals" />
-  <docs-pill title="In-depth components guide" href="guide/components" />
-</docs-pill-row>
+  <docs-pill title="신호를 통한 반응성" href="essentials/signals" />
+  <docs-pill title="심층 컴포넌트 가이드" href="guide/components" />
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/introduction/essentials/dependency-injection.md b/adev/src/content/introduction/essentials/dependency-injection.md
index 606fb5efbef4..29a7acf81d29 100644
--- a/adev/src/content/introduction/essentials/dependency-injection.md
+++ b/adev/src/content/introduction/essentials/dependency-injection.md
@@ -1,19 +1,19 @@
-<docs-decorative-header title="Dependency Injection" imgSrc="adev/src/assets/images/dependency_injection.svg"> <!-- markdownlint-disable-line -->
-Reuse code and control behaviors across your application and tests.
+<docs-decorative-header title="의존성 주입" imgSrc="adev/src/assets/images/dependency_injection.svg"> <!-- markdownlint-disable-line -->
+코드를 재사용하고 애플리케이션과 테스트 전반에 걸쳐 동작을 제어하십시오.
 </docs-decorative-header>
 
-When you need to share logic between components, Angular leverages the design pattern of [dependency injection](guide/di) that allows you to create a “service” which allows you to inject code into components while managing it from a single source of truth.
+구성 요소 간에 로직을 공유해야 할 때 Angular는 [의존성 주입](guide/di) 디자인 패턴을 활용하여 “서비스”를 생성할 수 있게 하며, 이를 통해 단일 진실의 소스에서 코드를 강조하고 구성 요소에 주입할 수 있습니다.
 
-## What are services?
+## 서비스란 무엇인가요?
 
-Services are reusable pieces of code that can be injected.
+서비스는 주입할 수 있는 재사용 가능한 코드 조각입니다.
 
-Similar to defining a component, services are comprised of the following:
+구성 요소를 정의하는 것과 유사하게, 서비스는 다음으로 구성됩니다:
 
-- A **TypeScript decorator** that declares the class as an Angular service via `@Injectable` and allows you to define what part of the application can access the service via the `providedIn` property (which is typically `'root'`) to allow a service to be accessed anywhere within the application.
-- A **TypeScript class** that defines the desired code that will be accessible when the service is injected
+- `@Injectable`을 사용하여 클래스를 Angular 서비스로 선언하고 `providedIn` 속성을 통해 서비스에 접근할 수 있는 애플리케이션의 부분을 정의할 수 있게 해주는 **TypeScript 데코레이터** (일반적으로 `'root'`입니다).
+- 서비스가 주입될 때 접근할 수 있는 원하는 코드를 정의하는 **TypeScript 클래스** 
 
-Here is an example of a `Calculator` service.
+여기 `Calculator` 서비스의 예가 있습니다.
 
 ```angular-ts
 import {Injectable} from '@angular/core';
@@ -26,14 +26,14 @@ export class Calculator {
 }
 ```
 
-## How to use a service
+## 서비스 사용 방법
 
-When you want to use a service in a component, you need to:
+구성 요소에서 서비스를 사용하려면 다음을 수행해야 합니다:
 
-1. Import the service
-2. Declare a class field where the service is injected. Assign the class field to the result of the call of the built-in function `inject` which creates the service
+1. 서비스를 가져옵니다.
+2. 서비스가 주입될 클래스 필드를 선언합니다. 클래스 필드를 내장 함수 `inject`의 호출 결과로 할당하여 서비스를 생성합니다.
 
-Here’s what it might look like in the `Receipt` component:
+`Receipt` 구성 요소에서 이것이 어떻게 보일 수 있는지 보여줍니다:
 
 ```angular-ts
 import { Component, inject } from '@angular/core';
@@ -41,7 +41,7 @@ import { Calculator } from './calculator';
 
 @Component({
   selector: 'app-receipt',
-  template: `<h1>The total is {{ totalCost }}</h1>`,
+  template: `<h1>총액은 {{ totalCost }}입니다</h1>`,
 })
 
 export class Receipt {
@@ -50,11 +50,11 @@ export class Receipt {
 }
 ```
 
-In this example, the `Calculator` is being used by calling the Angular function `inject` and passing in the service to it.
+이 예제에서는 `Calculator`가 Angular 함수 `inject`를 호출하고 서비스로 전달하여 사용되고 있습니다.
 
-## Next Step
+## 다음 단계
 
 <docs-pill-row>
-  <docs-pill title="Next Steps After Essentials" href="essentials/next-steps" />
-  <docs-pill title="In-depth dependency injection guide" href="guide/di" />
-</docs-pill-row>
+  <docs-pill title="기초 후 다음 단계" href="essentials/next-steps" />
+  <docs-pill title="심층 의존성 주입 가이드" href="guide/di" />
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/introduction/essentials/next-steps.md b/adev/src/content/introduction/essentials/next-steps.md
index b6ab96a14c6d..322832800fdb 100644
--- a/adev/src/content/introduction/essentials/next-steps.md
+++ b/adev/src/content/introduction/essentials/next-steps.md
@@ -1,33 +1,33 @@
-<docs-decorative-header title="Next Steps" imgSrc="adev/src/assets/images/roadmap.svg"> <!-- markdownlint-disable-line -->
+<docs-decorative-header title="다음 단계" imgSrc="adev/src/assets/images/roadmap.svg"> <!-- markdownlint-disable-line -->
 </docs-decorative-header>
 
-Now that you have been introduced to main concepts of Angular - you're ready to put what you learned into practices with our interactive tutorials and learn more with our in-depth guides.
+이제 Angular의 주요 개념에 대한 소개를 받았으므로, 배운 내용을 우리의 대화형 튜토리얼로 실습하고 더 깊이 있는 가이드를 통해 더 많은 것을 배울 준비가 되었습니다.
 
-## Playground
+## 놀이터
 
-Try out Angular in an interactive code editor to further explore the concepts you've learned.
+대화형 코드 편집기에서 Angular를 시도하여 배운 개념을 더 탐색해 보세요.
 
 <docs-pill-row>
-  <docs-pill title="Play with Angular!" href="playground" />
+  <docs-pill title="Angular와 함께 놀아보세요!" href="playground" />
 </docs-pill-row>
 
-## Tutorials
+## 튜토리얼
 
-Put these main concepts into practice with our in-browser tutorial or build your first app locally with the Angular CLI.
+브라우저 내 튜토리얼로 이러한 주요 개념을 실습하거나 Angular CLI를 사용하여 로컬에서 첫 번째 앱을 구축해 보세요.
 
 <docs-pill-row>
-  <docs-pill title="Learn Angular's fundamentals" href="tutorials/learn-angular" />
-  <docs-pill title="Build your first Angular app" href="tutorials/first-app" />
+  <docs-pill title="Angular의 기초 배우기" href="tutorials/learn-angular" />
+  <docs-pill title="첫 번째 Angular 앱 구축하기" href="tutorials/first-app" />
 </docs-pill-row>
 
-## In-depth Guides
+## 심화 가이드
 
-Here are some in-depth guides you might be interested in reading:
+읽어보고 싶을 수 있는 몇 가지 심화 가이드는 다음과 같습니다:
 
 <docs-pill-row>
-  <docs-pill title="Components In-depth Guide" href="guide/components/importing" />
-  <docs-pill title="Template In-depth Guide" href="guide/templates" />
-  <docs-pill title="Forms In-depth Guide" href="/guide/forms" />
+  <docs-pill title="컴포넌트 심화 가이드" href="guide/components/importing" />
+  <docs-pill title="템플릿 심화 가이드" href="guide/templates" />
+  <docs-pill title="폼 심화 가이드" href="/guide/forms" />
 </docs-pill-row>
 
-To see the rest of our in-depth guides, check out the main navigation.
+더 많은 심화 가이드를 보려면 주요 내비게이션을 확인하세요.
\ No newline at end of file
diff --git a/adev/src/content/introduction/essentials/overview.md b/adev/src/content/introduction/essentials/overview.md
index 71ae5543b637..01954377f764 100644
--- a/adev/src/content/introduction/essentials/overview.md
+++ b/adev/src/content/introduction/essentials/overview.md
@@ -1,27 +1,27 @@
-<docs-decorative-header title="Essentials" imgSrc="adev/src/assets/images/what_is_angular.svg"> <!-- markdownlint-disable-line -->
-A short introduction to some of Angular's main concepts.
+<docs-decorative-header title="필수 요소" imgSrc="adev/src/assets/images/what_is_angular.svg"> <!-- markdownlint-disable-line -->
+Angular의 주요 개념에 대한 간단한 소개.
 </docs-decorative-header>
 
-## Interested in Angular?
+## Angular에 관심이 있나요?
 
-Welcome! This _Essentials_ guide explains some of Angular's main concepts, helping you understand what it's like to use the framework. This guide focuses on just a few building blocks as a short introduction. If you're looking for deep, comprehensive documentation, you can navigate to specific _In-depth Guides_ from the [documentation landing page](overview).
+환영합니다! 이 _필수 요소_ 가이드는 Angular의 주요 개념 중 일부를 설명하여 프레임워크를 사용하는 것이 어떤 것인지 이해하는 데 도움을 줍니다. 이 가이드는 짧은 소개를 위해 몇 가지 기본 구성 요소에만 집중합니다. 깊이 있는 종합 문서를 찾고 계신다면 [문서 랜딩 페이지](overview)에서 특정 _심층 가이드_로 이동할 수 있습니다.
 
-If you prefer to immediately start writing some code, you can [skip straight to the hands-on tutorial](tutorials/learn-angular).
+바로 코드를 작성하는 것을 선호하신다면, [실습 튜토리얼로 바로 건너뛰기](tutorials/learn-angular) 하실 수 있습니다.
 
-### Before you start
+### 시작하기 전에
 
-This site expects that you're familiar with HTML, CSS and TypeScript. If you are totally new to web development, you should seek out some more introductory content before coming back here.
+이 사이트는 여러분이 HTML, CSS 및 TypeScript에 익숙하다고 가정합니다. 웹 개발에 전혀 익숙하지 않다면, 여기로 돌아오기 전에 더 많은 소개 콘텐츠를 찾아보아야 합니다.
 
-In particular, you should be familiar with the following concepts:
+특히 다음 개념을 이해하고 있어야 합니다:
 
-- [JavaScript Classes](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes)
-- [TypeScript fundamentals](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
-- [TypeScript Decorators](https://www.typescriptlang.org/docs/handbook/decorators.html)
+- [JavaScript 클래스](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes)
+- [TypeScript 기본 사항](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
+- [TypeScript 데코레이터](https://www.typescriptlang.org/docs/handbook/decorators.html)
 
-## Next Step
+## 다음 단계
 
-Ready to jump in? It's time to learn about components in Angular!
+준비가 되셨나요? 이제 Angular의 컴포넌트에 대해 배울 시간입니다!
 
 <docs-pill-row>
-  <docs-pill title="Composing with Components" href="essentials/components" />
-</docs-pill-row>
+  <docs-pill title="컴포넌트로 구성하기" href="essentials/components" />
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/introduction/essentials/signals.md b/adev/src/content/introduction/essentials/signals.md
index 570d9da6cc66..be8fb4ce3a02 100644
--- a/adev/src/content/introduction/essentials/signals.md
+++ b/adev/src/content/introduction/essentials/signals.md
@@ -1,33 +1,32 @@
-<docs-decorative-header title="Signals" imgSrc="adev/src/assets/images/signals.svg"> <!-- markdownlint-disable-line -->
-Create and manage dynamic data.
+<docs-decorative-header title="신호" imgSrc="adev/src/assets/images/signals.svg"> <!-- markdownlint-disable-line -->
+동적 데이터를 생성하고 관리하세요.
 </docs-decorative-header>
 
-In Angular, you use *signals* to create and manage state. A signal is a lightweight wrapper around a value.
+Angular에서는 *신호*를 사용하여 상태를 생성하고 관리합니다. 신호는 값을 감싸는 경량 래퍼입니다.
 
-Use the `signal` function to create a signal for holding local state:
+`signal` 함수를 사용하여 로컬 상태를 보유할 신호를 생성합니다:
 
 ```typescript
 import {signal} from '@angular/core';
 
-// Create a signal with the `signal` function.
+// `signal` 함수를 사용하여 신호를 생성합니다.
 const firstName = signal('Morgan');
 
-// Read a signal value by calling it— signals are functions.
+// 신호 값을 읽으려면 호출하십시오—신호는 함수입니다.
 console.log(firstName());
 
-// Change the value of this signal by calling its `set` method with a new value.
+// 새로운 값으로 `set` 메서드를 호출하여 이 신호의 값을 변경합니다.
 firstName.set('Jaime');
 
-// You can also use the `update` method to change the value
-// based on the previous value.
-firstName.update(name => name.toUpperCase()); 
+// 이전 값에 따라 값을 변경하기 위해 `update` 메서드도 사용할 수 있습니다.
+firstName.update(name => name.toUpperCase());
 ```
 
-Angular tracks where signals are read and when they're updated. The framework uses this information to do additional work, such as updating the DOM with new state. This ability to respond to changing signal values over time is known as *reactivity*.
+Angular는 신호가 읽히는 위치와 업데이트되는 시기를 추적합니다. 프레임워크는 이 정보를 사용하여 새 상태로 DOM을 업데이트하는 등의 추가 작업을 수행합니다. 시간이 지남에 따라 변경되는 신호 값에 반응하는 이 능력을 *반응성*이라고 합니다.
 
-## Computed expressions
+## 계산된 표현식
 
-A `computed` is a signal that produces its value based on other signals.
+`computed`는 다른 신호를 기반으로 값을 생성하는 신호입니다.
 
 ```typescript
 import {signal, computed} from '@angular/core';
@@ -38,7 +37,7 @@ const firstNameCapitalized = computed(() => firstName().toUpperCase());
 console.log(firstNameCapitalized()); // MORGAN
 ``` 
 
-A `computed` signal is read-only; it does not have a `set` or an `update` method. Instead, the value of the `computed` signal automatically changes when any of the signals it reads change:
+`computed` 신호는 읽기 전용이며, `set` 또는 `update` 메서드가 없습니다. 대신, 읽는 신호가 변경될 때 `computed` 신호의 값은 자동으로 변경됩니다:
 
 ```typescript
 import {signal, computed} from '@angular/core';
@@ -51,9 +50,9 @@ firstName.set('Jaime');
 console.log(firstNameCapitalized()); // JAIME
 ```
 
-## Using signals in components
+## 구성 요소에서 신호 사용하기
 
-Use `signal` and `computed` inside your components to create and manage state:
+너의 구성 요소 안에서 상태를 생성하고 관리하기 위해 `signal`과 `computed`를 사용하세요:
 
 ```typescript
 @Component({/* ... */})
@@ -68,13 +67,13 @@ export class UserProfile {
 }
 ```
 
-Tip: Want to know more about Angular Signals? See the [In-depth Signals guide](guide/signals) for the full details.
+팁: Angular 신호에 대해 더 알고 싶나요? 전체 세부정보는 [심층 신호 가이드](guide/signals)를 참조하세요.
 
-## Next Step
+## 다음 단계
 
-Now that you have learned how to declare and manage dynamic data, it's time to learn how to use that data inside of templates.
+동적 데이터를 선언하고 관리하는 방법을 배웠으니, 이제 템플릿 내에서 그 데이터를 사용하는 방법을 배울 시간입니다.
 
 <docs-pill-row>
-  <docs-pill title="Dynamic interfaces with templates" href="essentials/templates" />
-  <docs-pill title="In-depth signals guide" href="guide/signals" />
-</docs-pill-row>
+  <docs-pill title="템플릿을 사용한 동적 인터페이스" href="essentials/templates" />
+  <docs-pill title="심층 신호 가이드" href="guide/signals" />
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/introduction/essentials/templates.md b/adev/src/content/introduction/essentials/templates.md
index 1ff4e6d9c150..b281f720cbf7 100644
--- a/adev/src/content/introduction/essentials/templates.md
+++ b/adev/src/content/introduction/essentials/templates.md
@@ -1,14 +1,14 @@
-<docs-decorative-header title="Templates" imgSrc="adev/src/assets/images/templates.svg"> <!-- markdownlint-disable-line -->
-Use Angular's template syntax to create dynamic user interfaces.
+<docs-decorative-header title="템플릿" imgSrc="adev/src/assets/images/templates.svg"> <!-- markdownlint-disable-line -->
+Angular의 템플릿 구문을 사용하여 동적 사용자 인터페이스를 만듭니다.
 </docs-decorative-header>
 
-Component templates aren't just static HTML— they can use data from your component class and set up handlers for user interaction.
+컴포넌트 템플릿은 단순한 정적 HTML이 아닙니다. 컴포넌트 클래스의 데이터를 사용하고 사용자 상호작용에 대한 핸들러를 설정할 수 있습니다.
 
-## Showing dynamic text
+## 동적 텍스트 표시
 
-In Angular, a *binding* creates a dynamic connection between a component's template and its data. This connection ensures that changes to the component's data automatically update the rendered template.
+Angular에서 *바인딩*은 컴포넌트의 템플릿과 데이터 간의 동적 연결을 생성합니다. 이 연결은 컴포넌트의 데이터에 대한 변경 사항이 자동으로 렌더링된 템플릿을 업데이트하도록 보장합니다.
 
-You can create a binding to show some dynamic text in a template by using double curly-braces:
+다음과 같이 중괄호 두 개를 사용하여 템플릿에서 동적 텍스트를 표시하기 위한 바인딩을 생성할 수 있습니다.
 
 ```angular-ts
 @Component({
@@ -20,112 +20,111 @@ export class TodoListItem {
 }
 ```
 
-When Angular renders the component, you see:
+Angular가 컴포넌트를 렌더링할 때 다음과 같이 표시됩니다:
 
 ```html
 <h1>Profile for pro_programmer_123</h1>
 ```
 
-Angular automatically keeps the binding up-to-date when the value of the signal changes. Building on
-the example above, if we update the value of the `userName` signal:
+Angular는 signal의 값이 변경될 때 바인딩을 자동으로 최신 상태로 유지합니다. 위의 예를 기반으로, `userName` signal의 값을 업데이트하면:
 
 ```typescript
 this.userName.set('cool_coder_789');
 ```
 
-The rendered page updates to reflect the new value:
+렌더링된 페이지는 새로운 값을 반영하도록 업데이트됩니다:
 
 ```html
 <h1>Profile for cool_coder_789</h1>
 ```
 
-## Setting dynamic properties and attributes
+## 동적 속성 및 특성 설정
 
-Angular supports binding dynamic values into DOM properties with square brackets:
+Angular는 정사각형 괄호를 사용하여 DOM 속성에 동적 값을 바인딩하는 것을 지원합니다:
 
 ```angular-ts
 @Component({
   /*...*/
-  // Set the `disabled` property of the button based on the value of `isValidUserId`.
-  template: `<button [disabled]="isValidUserId()">Save changes</button>`,
+  // `isValidUserId` 값에 따라 버튼의 `disabled` 속성을 설정합니다.
+  template: `<button [disabled]="isValidUserId()">변경 사항 저장</button>`,
 })
 export class UserProfile {
   isValidUserId = signal(false);
 }
 ```
 
-You can also bind to HTML _attributes_ by prefixing the attribute name with `attr.`:
+속성 이름에 `attr.`를 접두사로 추가하여 HTML _속성_에 바인딩할 수도 있습니다:
 
 ```angular-html
-<!-- Bind the `role` attribute on the `<ul>` element to value of `listRole`. -->
+<!-- `<ul>` 요소의 `role` 속성을 `listRole`의 값에 바인딩합니다. -->
 <ul [attr.role]="listRole()">
 ```
 
-Angular automatically updates DOM properties and attribute when the bound value changes.
+Angular는 바인딩된 값이 변경될 때 DOM 속성과 속성을 자동으로 업데이트합니다.
 
-## Handling user interaction
+## 사용자 상호작용 처리
 
-Angular lets you add event listeners to an element in your template with parentheses:
+Angular는 템플릿의 요소에 괄호를 사용하여 이벤트 리스너를 추가할 수 있게 해줍니다:
 
 ```angular-ts
 @Component({
   /*...*/
-  // Add an 'click' event handler that calls the `cancelSubscription` method. 
-  template: `<button (click)="cancelSubscription()">Cancel subscription</button>`,
+  // `cancelSubscription` 메서드를 호출하는 'click' 이벤트 핸들러를 추가합니다.
+  template: `<button (click)="cancelSubscription()">구독 취소</button>`,
 })
 export class UserProfile {
   /* ... */
   
-  cancelSubscription() { /* Your event handling code goes here. */  }
+  cancelSubscription() { /* 여기에 이벤트 처리 코드를 작성하세요. */  }
 }
 ```
 
-If you need to pass the [event](https://developer.mozilla.org/docs/Web/API/Event) object to your listener, you can use Angular's built-in `$event` variable inside the function call:
+이벤트[객체](https://developer.mozilla.org/docs/Web/API/Event)를 리스너에 전달해야 하는 경우 함수 호출 내에서 Angular의 내장 `$event` 변수를 사용할 수 있습니다:
 
 ```angular-ts
 @Component({
   /*...*/
-  // Add an 'click' event handler that calls the `cancelSubscription` method. 
-  template: `<button (click)="cancelSubscription($event)">Cancel subscription</button>`,
+  // `cancelSubscription` 메서드를 호출하는 'click' 이벤트 핸들러를 추가합니다. 
+  template: `<button (click)="cancelSubscription($event)">구독 취소</button>`,
 })
 export class UserProfile {
   /* ... */
   
-  cancelSubscription(event: Event) { /* Your event handling code goes here. */  }
+  cancelSubscription(event: Event) { /* 여기에 이벤트 처리 코드를 작성하세요. */  }
 }
 ```
 
-## Control flow with `@if` and `@for`
+## `@if` 및 `@for`를 사용한 제어 흐름
 
-You can conditionally hide and show parts of a template with Angular's `@if` block:
+Angular의 `@if` 블록을 사용하여 템플릿의 일부를 조건부로 숨기거나 표시할 수 있습니다:
 
 ```angular-html
-<h1>User profile</h1>
+<h1>사용자 프로필</h1>
 
 @if (isAdmin()) {
-  <h2>Admin settings</h2>
+  <h2>관리자 설정</h2>
   <!-- ... -->
 }
 ```
 
-The `@if` block also supports an optional `@else` block:
+`@if` 블록은 선택적 `@else` 블록도 지원합니다:
 
 ```angular-html
-<h1>User profile</h1>
+<h1>사용자 프로필</h1>
 
 @if (isAdmin()) {
-  <h2>Admin settings</h2>
+  <h2>관리자 설정</h2>
   <!-- ... -->
 } @else {
-  <h2>User settings</h2>
+  <h2>사용자 설정</h2>
   <!-- ... -->  
 }
 ```
 
-You can repeat part of a template multiple times with Angular's `@for` block:
+Angular의 `@for` 블록을 사용하여 템플릿의 일부를 여러 번 반복할 수 있습니다:
 
 ```angular-html
-<h1>User profile</h1>
+<h1>사용자 프로필</h1>
 
 <ul class="user-badge-list">
   @for (badge of badges(); track badge.id) {
@@ -134,15 +133,15 @@ You can repeat part of a template multiple times with Angular's `@for` block:
 </ul>
 ```
 
-Angular's uses the `track` keyword, shown in the example above, to associate data with the DOM elements created by `@for`. See [_Why is track in @for blocks important?_](guide/templates/control-flow#why-is-track-in-for-blocks-important) for more info.
+Angular는 위의 예에서 `track` 키워드를 사용하여 `@for`에 의해 생성된 DOM 요소와 데이터를 연관시킵니다. 더 많은 정보는 [_@for 블록의 track이 중요한 이유_](guide/templates/control-flow#why-is-track-in-for-blocks-important)를 참조하세요.
 
-Tip: Want to know more about Angular templates? See the [In-depth Templates guide](guide/templates) for the full details.
+팁: Angular 템플릿에 대해 더 알고 싶으신가요? 전체 세부사항은 [심층 템플릿 가이드](guide/templates)를 참조하세요.
 
-## Next Step
+## 다음 단계
 
-Now that you have dynamic data and templates in the application, it's time to learn how to enhance templates by conditionally hiding or showing certain elements, looping over elements, and more.
+이제 애플리케이션에 동적 데이터와 템플릿이 생겼으니, 특정 요소를 조건부로 숨기거나 표시하고, 요소를 반복하는 방법을 배울 때입니다.
 
 <docs-pill-row>
-  <docs-pill title="Modular design with dependency injection" href="essentials/dependency-injection" />
-  <docs-pill title="In-depth template guide" href="guide/templates" />
-</docs-pill-row>
+  <docs-pill title="종속성 주입이 있는 모듈형 디자인" href="essentials/dependency-injection" />
+  <docs-pill title="심층 템플릿 가이드" href="guide/templates" />
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/introduction/installation.md b/adev/src/content/introduction/installation.md
index f2aed295541d..de5c1514256a 100644
--- a/adev/src/content/introduction/installation.md
+++ b/adev/src/content/introduction/installation.md
@@ -1,36 +1,36 @@
-<docs-decorative-header title="Installation" imgSrc="adev/src/assets/images/what_is_angular.svg"> <!-- markdownlint-disable-line -->
+<docs-decorative-header title="설치" imgSrc="adev/src/assets/images/what_is_angular.svg"> <!-- markdownlint-disable-line -->
 </docs-decorative-header>
 
-Get started with Angular quickly with online starters or locally with your terminal.
+터미널을 사용하거나 온라인 스타터로 Angular를 빠르게 시작하십시오.
 
-## Play Online
+## 온라인에서 놀기
 
-If you just want to play around with Angular in your browser without setting up a project, you can use our online sandbox:
+프로젝트를 설정하지 않고 브라우저에서 Angular를 가지고 놀고 싶다면, 온라인 샌드박스를 사용할 수 있습니다:
 
 <docs-card-container>
-  <docs-card title="" href="/playground" link="Open on Playground">
-  The fastest way to play with an Angular app. No setup required.
+  <docs-card title="" href="/playground" link="Playground에서 열기">
+  Angular 앱을 가지고 노는 가장 빠른 방법입니다. 설정이 필요하지 않습니다.
   </docs-card>
 </docs-card-container>
 
-## Set up a new project locally
+## 로컬에서 새 프로젝트 설정하기
 
-If you're starting a new project, you'll most likely want to create a local project so that you can use tooling such as Git.
+새 프로젝트를 시작한다면, Git과 같은 도구를 사용할 수 있도록 로컬 프로젝트를 만들고 싶을 것입니다.
 
-### Prerequisites
+### 필수 조건
 
-- **Node.js** - v[^18.19.1 or newer](/reference/versions)
-- **Text editor** - We recommend [Visual Studio Code](https://code.visualstudio.com/)
-- **Terminal** - Required for running Angular CLI commands
-- **Development Tool** - To improve your development workflow, we recommend the [Angular Language Service](/tools/language-service)
+- **Node.js** - v[^18.19.1 이상](/reference/versions)
+- **텍스트 편집기** - [Visual Studio Code](https://code.visualstudio.com/)를 추천합니다.
+- **터미널** - Angular CLI 명령 실행을 위해 필요합니다.
+- **개발 도구** - 개발 워크플로를 개선하기 위해 [Angular Language Service](/tools/language-service)를 추천합니다.
 
-### Instructions
+### 지침
 
-The following guide will walk you through setting up a local Angular project.
+다음 가이드는 로컬 Angular 프로젝트 설정을 안내합니다.
 
-#### Install Angular CLI
+#### Angular CLI 설치
 
-Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.com/), you can open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal)) and run the following command:
+터미널을 열고 ([Visual Studio Code](https://code.visualstudio.com/)를 사용하는 경우 [통합 터미널](https://code.visualstudio.com/docs/editor/integrated-terminal)을 열 수 있습니다) 다음 명령을 실행합니다:
 
 <docs-code-multifile>
   <docs-code
@@ -56,11 +56,11 @@ Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.
 
 </docs-code-multifile>
 
-If you are having issues running this command in Windows or Unix, check out the [CLI docs](/tools/cli/setup-local#install-the-angular-cli) for more info.
+Windows나 Unix에서 이 명령 실행에 문제가 있는 경우, [CLI 문서](/tools/cli/setup-local#install-the-angular-cli)를 확인하십시오.
 
-#### Create a new project
+#### 새 프로젝트 만들기
 
-In your terminal, run the CLI command `ng new` with the desired project name. In the following examples, we'll be using the example project name of `my-first-angular-app`.
+터미널에서 원하는 프로젝트 이름으로 `ng new` CLI 명령을 실행합니다. 다음 예제에서는 `my-first-angular-app`라는 예제 프로젝트 이름을 사용합니다.
 
 <docs-code language="shell">
 
@@ -68,22 +68,22 @@ ng new <project-name>
 
 </docs-code>
 
-You will be presented with some configuration options for your project. Use the arrow and enter keys to navigate and select which options you desire.
+프로젝트에 대한 몇 가지 구성 옵션이 제공됩니다. 화살표 및 Enter 키를 사용하여 원하는 옵션을 탐색하고 선택하십시오.
 
-If you don't have any preferences, just hit the enter key to take the default options and continue with the setup.
+선호 사항이 없다면, 기본 옵션을 선택하고 설정을 계속 진행하려면 Enter 키를 누르십시오.
 
-After you select the configuration options and the CLI runs through the setup, you should see the following message:
+구성 옵션을 선택하고 CLI가 설정을 완료하면 다음 메시지를 보게 됩니다:
 
 ```shell
-✔ Packages installed successfully.
-    Successfully initialized git.
+✔ 패키지를 성공적으로 설치하였습니다.
+    git이 성공적으로 초기화되었습니다.
 ```
 
-At this point, you're now ready to run your project locally!
+이제 로컬에서 프로젝트를 실행할 준비가 되었습니다!
 
-#### Running your new project locally
+#### 로컬에서 새 프로젝트 실행하기
 
-In your terminal, switch to your new Angular project.
+터미널에서 새 Angular 프로젝트로 전환합니다.
 
 <docs-code language="shell">
 
@@ -91,7 +91,7 @@ cd my-first-angular-app
 
 </docs-code>
 
-All of your dependencies should be installed at this point (which you can verify by checking for the existent for a `node_modules` folder in your project), so you can start your project by running the command:
+이 시점에서 모든 의존성이 설치되어 있어야 합니다(프로젝트에 `node_modules` 폴더가 존재하는지 확인하여 검증할 수 있습니다), 따라서 다음 명령을 실행하여 프로젝트를 시작할 수 있습니다:
 
 <docs-code language="shell">
 
@@ -99,17 +99,17 @@ npm start
 
 </docs-code>
 
-If everything is successful, you should see a similar confirmation message in your terminal:
+모든 것이 성공적으로 완료되면 터미널에서 비슷한 확인 메시지를 보게 될 것입니다:
 
 ```shell
-Watch mode enabled. Watching for file changes...
-NOTE: Raw file sizes do not reflect development server per-request transformations.
-  ➜  Local:   http://localhost:4200/
-  ➜  press h + enter to show help
+감시 모드가 활성화되었습니다. 파일 변경을 감시하고 있습니다...
+참고: 원본 파일 크기는 개발 서버의 요청별 변환을 반영하지 않습니다.
+  ➜  로컬:   http://localhost:4200/
+  ➜  도움말을 보려면 h + Enter를 누르십시오.
 ```
 
-And now you can visit the path in `Local` (e.g., `http://localhost:4200`) to see your application. Happy coding! 🎉
+이제 `Local`에 있는 경로(예: `http://localhost:4200`)를 방문하여 애플리케이션을 확인할 수 있습니다. 행복한 코딩 되세요! 🎉
 
-## Next steps
+## 다음 단계
 
-Now that you've created your Angular project, you can learn more about Angular in our [Essentials guide](/essentials) or choose a topic in our in-depth guides!
+이제 Angular 프로젝트를 만들었으므로, [Essential 가이드](/essentials)에서 Angular에 대해 더 배우거나 심화 가이드에서 주제를 선택할 수 있습니다!
\ No newline at end of file
diff --git a/adev/src/content/introduction/what-is-angular.md b/adev/src/content/introduction/what-is-angular.md
index bfb75fcf63b5..68d5aec54313 100644
--- a/adev/src/content/introduction/what-is-angular.md
+++ b/adev/src/content/introduction/what-is-angular.md
@@ -1,152 +1,122 @@
-<docs-decorative-header title="What is Angular?" imgSrc="adev/src/assets/images/what_is_angular.svg"> <!-- markdownlint-disable-line -->
+<docs-decorative-header title="Angular은 무엇인가요?" imgSrc="adev/src/assets/images/what_is_angular.svg"> <!-- markdownlint-disable-line -->
 </docs-decorative-header>
 
 <big style="margin-top: 2em">
-Angular is a web framework that empowers developers to build fast, reliable applications.
+Angular는 개발자가 빠르고 신뢰할 수 있는 애플리케이션을 구축할 수 있도록 지원하는 웹 프레임워크입니다.
 </big>
 
-Maintained by a dedicated team at Google, Angular provides a broad suite of tools, APIs, and
-libraries to simplify and streamline your development workflow. Angular gives you
-a solid platform on which to build fast, reliable applications that scale with both the size of
-your team and the size of your codebase.
+Google의 전담 팀에 의해 유지 관리되는 Angular는 개발 작업 흐름을 간소화하고 효율화하기 위한 다양한 도구, API 및 라이브러리 모음을 제공합니다. Angular는 팀의 규모와 코드베이스의 규모 모두에 맞게 확장되는 빠르고 신뢰할 수 있는 애플리케이션을 구축할 수 있는 견고한 플랫폼을 제공합니다.
 
-**Want to see some code?** Jump over to our [Essentials](essentials) for a quick overview of
-what it's like to use Angular, or get started in the [Tutorial](tutorials/learn-angular) if you
-prefer following step-by-step instructions.
+**코드를 보고 싶으신가요?** Angular를 사용하는 것이 어떤 느낌인지 빠르게 알아보려면 [기초](essentials)로 이동하거나 단계별 지침을 따르려면 [튜토리얼](tutorials/learn-angular)을 시작하세요.
 
-## Features that power your development
+## 개발을 지원하는 기능
 
 <docs-card-container>
-  <docs-card title="Keep your codebase organized with an opinionated component model and flexible dependency injection
-system" href="guide/components" link="Get started with Components">
-  Angular components make it easy to split your code into well-encapsulated parts.
+  <docs-card title="의견이 반영된 컴포넌트 모델 및 유연한 의존성 주입 시스템으로 코드베이스를 정리하세요" href="guide/components" link="컴포넌트 시작하기">
+  Angular 컴포넌트를 사용하면 코드를 잘 캡슐화된 부분으로 나누기가 쉽습니다.
 
-  The versatile dependency injection helps you keep your code modular, loosely-coupled, and
-  testable.
+  다용도 의존성 주입을 통해 코드를 모듈화하고 느슨하게 결합되며 테스트 가능하도록 유지할 수 있습니다.
   </docs-card>
-  <docs-card title="Get fast state updates with fine-grained reactivity based on Signals" href="guide/signals" link="Explore Angular Signals">
-  Our fine-grained reactivity model, combined with compile-time optimizations, simplifies development and helps build faster apps by default.
+  <docs-card title="신호를 기반으로 한 세밀한 반응형으로 빠른 상태 업데이트를 얻으세요" href="guide/signals" link="Angular 신호 탐색하기">
+  우리의 세밀한 반응형 모델과 컴파일 시간 최적화를 결합하여 기본적으로 애플리케이션 개발을 단순화하고 더 빠른 앱을 구축할 수 있도록 합니다.
 
-  Granularly track how and where state is used throughout an application, giving the framework the power to render fast updates via highly optimized instructions.
+  애플리케이션 전반에서 상태가 어떻게 사용되고 어디서 사용되는지를 세밀하게 추적하여 프레임워크가 최적화된 지침을 통해 빠른 업데이트를 렌더링할 수 있도록 합니다.
   </docs-card>
-  <docs-card title="Meet your performance targets with SSR, SSG, hydration, and next-generation deferred loading" href="guide/ssr" link="Read about SSR">
-    Angular supports both server-side rendering (SSR) and static site generation (SSG) along
-    with full DOM hydration. `@defer` blocks in templates make it simple to declaratively divide
-    your templates into lazy-loadable parts.
+  <docs-card title="SSR, SSG, 수화, 차세대 지연 로딩으로 성능 목표 달성" href="guide/ssr" link="SSR에 대해 읽기">
+    Angular는 서버 측 렌더링(SSR)과 정적 사이트 생성(SSG) 모두를 지원하며 전체 DOM 수화도 지원합니다. 템플릿의 `@defer` 블록을 사용하면 템플릿을 지연 불러오기 가능한 부분으로 선언적으로 나누기가 간단합니다.
   </docs-card>
-  <docs-card title="Guarantee everything works together with Angular's first-party modules for forms, routing, and
-more">
-  [Angular's router](guide/routing) provides a feature-rich navigation toolkit, including support
-  for route guards, data resolution, lazy-loading, and much more.
+  <docs-card title="폼, 라우팅 등과 함께 Angular의 1차 모듈로 모든 것이 함께 작동하도록 보장합니다">
+  [Angular의 라우터](guide/routing)는 경로 보호자, 데이터 해상도, 지연 로딩 등을 포함한 기능이 풍부한 내비게이션 도구 키트를 제공합니다.
 
-  [Angular's forms module](guide/forms) provides a standardized system for form participation and validation.
+  [Angular의 폼 모듈](guide/forms)은 폼 참여 및 유효성 검사를 위한 표준화된 시스템을 제공합니다.
   </docs-card>
 </docs-card-container>
 
-## Develop applications faster than ever
+## 그 어느 때보다 빠르게 애플리케이션 개발
 
 <docs-card-container>
-  <docs-card title="Effortlessly build, serve, test, deploy with Angular CLI" href="tools/cli" link="Angular CLI">
-  Angular CLI gets your project running in under a minute with the commands you need to
-  grow into a deployed production application.
+  <docs-card title="Angular CLI로 손쉽게 빌드, 서비스, 테스트, 배포하기" href="tools/cli" link="Angular CLI">
+  Angular CLI는 필요한 명령으로 프로젝트를 1분 이내에 실행할 수 있게 해줍니다.
   </docs-card>
-  <docs-card title="Visually debug, analyze, and optimize your code with the Angular DevTools browser extension" href="tools/devtools" link="Angular DevTools">
-  Angular DevTools sits alongside your browser's developer tools. It helps debug and analyze your
-  app, including a component tree inspector, dependency injection tree view,
-  and custom performance profiling flame chart.
+  <docs-card title="Angular DevTools 브라우저 확장으로 시각적으로 코드 디버그, 분석, 최적화하기" href="tools/devtools" link="Angular DevTools">
+  Angular DevTools는 브라우저의 개발자 도구와 함께 사용됩니다. 이 도구는 구성 요소 트리 검사기, 의존성 주입 트리 보기 및 사용자 정의 성능 프로파일링 플레임 차트를 포함하여 앱을 디버그하고 분석하는 데 도움을 줍니다.
   </docs-card>
-  <docs-card title="Never miss a version with ng update" href="cli/update" link="ng update">
-  Angular CLI's `ng update` runs automated code transformations that automatically handle routine
-  breaking changes, dramatically simplifying major version updates. Keeping up with the latest
-  version keeps your app as fast and secure as possible.
+  <docs-card title="ng update로 버전을 놓치지 마세요" href="cli/update" link="ng update">
+  Angular CLI의 `ng update`는 루틴의 주요 버전 업데이트를 자동으로 처리하는 자동화된 코드 변환을 실행합니다. 최신 버전을 유지하면 애플리케이션이 가능한 한 빠르고 안전하게 유지됩니다.
   </docs-card>
-  <docs-card title="Stay productive with IDE integration in your favorite editor" href="tools/language-service" link="Language service">
-  Angular's IDE language services powers code completion, navigation, refactoring, and real-time
-  diagnostics in your favorite editor.
+  <docs-card title="최고의 편집기에서 IDE 통합으로 생산성을 유지하세요" href="tools/language-service" link="언어 서비스">
+  Angular의 IDE 언어 서비스는 최고의 편집기에서 코드 완성, 탐색, 리팩토링 및 실시간 진단을 지원합니다.
   </docs-card>
 </docs-card-container>
 
-## Ship with confidence
+## 자신 있게 배포하세요
 
 <docs-card-container>
-  <docs-card title="Verified commit-by-commit against Google's colossal monorepo" href="https://cacm.acm.org/magazines/2016/7/204032-why-google-stores-billions-of-lines-of-code-in-a-single-repository/fulltext" link="Learn about Google's monorepo">
-  Every Angular commit is checked against _hundreds of thousands_ of tests in Google's internal code
-  repository, representing countless real-world scenarios.
+  <docs-card title="Google의 거대한 모노리포에 대한 커밋별 검증" href="https://cacm.acm.org/magazines/2016/7/204032-why-google-stores-billions-of-lines-of-code-in-a-single-repository/fulltext" link="Google의 모노리포에 대해 알아보기">
+  모든 Angular 커밋은 Google의 내부 코드 리포지토리에 있는 _수십만 개_의 테스트에 대해 확인되며, 이는 수많은 실제 시나리오를 나타냅니다.
 
-  Angular is committed to stability for some of Google’s largest products, including Google Cloud.
-  This commitment ensures changes are well-tested, backwards compatible, and include migration tools
-  whenever possible.
+  Angular는 Google Cloud를 포함한 Google의 가장 큰 제품들에 대해 안정성을 확보하는 데 전념하고 있습니다. 이들 변경사항은 잘 테스트되고 이전 버전과 호환되며 가능한 경우 마이그레이션 도구를 포함하도록 보장합니다.
   </docs-card>
-  <docs-card title="Clear support policies and predictable release schedule" href="reference/releases" link="Versioning & releasing">
-  Angular's predictable, time-based release schedule gives your organization confidence in the
-  stability and backwards compatibility of the framework. Long Term Support (LTS) windows make sure
-  you get critical security fixes when you need them. First-party update tools, guides and automated
-  migration schematics help keep your apps up-to-date with the latest advancements to the framework
-  and the web platform.
+  <docs-card title="명확한 지원 정책 및 예측 가능한 릴리스 일정" href="reference/releases" link="버전 관리 및 릴리스">
+  Angular의 예측 가능한 시간 기반 릴리스 일정은 프레임워크의 안정성과 이전 버전과 호환성에 대한 신뢰를 조직에 제공합니다. 장기 지원(LTS) 윈도우를 통해 필요할 때 중요한 보안 수정을 받을 수 있습니다. 1차 업데이트 도구, 가이드 및 자동화된 마이그레이션 도면은 애플리케이션이 최신의 프레임워크 및 웹 플랫폼 발전에 맞춰 최신 상태를 유지하는 데 도움을 줍니다.
   </docs-card>
 </docs-card-container>
 
-## Works at any scale
+## 모든 규모에서 작동
 
 <docs-card-container>
-  <docs-card title="Reach users everywhere with internationalization support" href="guide/i18n" link="Internationalization">
-  Angular's internationalization features handle message translations and formatting, including
-  support for unicode standard ICU syntax.
+  <docs-card title="국제화 지원으로 사용자에게 도달하세요" href="guide/i18n" link="국제화">
+  Angular의 국제화 기능은 메시지 번역 및 형식을 처리하며, 유니코드 표준 ICU 구문을 지원합니다.
   </docs-card>
-  <docs-card title="Protect your users with security by default" href="best-practices/security" link="Security">
-  In collaboration with Google's world-class security engineers, Angular aims to make development
-  safe by default. Built-in security features, including HTML sanitization and
-  trusted type support, help protect your users from common vulnerabilities like
-  cross-site scripting and cross-site request forgery.
+  <docs-card title="기본적으로 보안으로 사용자를 보호하세요" href="best-practices/security" link="보안">
+  Google의 세계적 수준의 보안 엔지니어와 협력하여 Angular는 기본적으로 안전한 개발을 목표로 하고 있습니다. HTML 정화 및 신뢰할 수 있는 유형 지원을 포함한 내장 보안 기능은 교차 사이트 스크립팅 및 교차 사이트 요청 위조와 같은 일반적인 취약성으로부터 사용자를 보호하는 데 도움을 줍니다.
   </docs-card>
-  <docs-card title="Keep large teams productive with Vite and esbuild" href="tools/cli/build-system-migration" link="ESBuild and Vite">
-  Angular CLI includes a fast, modern build pipeline using Vite and ESBuild. Developers report
-  building projects with hundreds of thousands of lines of code in less than a minute.
+  <docs-card title="Vite와 esbuild로 대규모 팀의 생산성을 유지하세요" href="tools/cli/build-system-migration" link="ESBuild 및 Vite">
+  Angular CLI에는 Vite 및 ESBuild를 사용한 빠르고 현대적인 빌드 파이프라인이 포함되어 있습니다. 개발자는 수십만 줄의 코드로 프로젝트를 1분 이내에 빌드할 수 있다고 보고하고 있습니다.
   </docs-card>
-  <docs-card title="Proven in some of Google's largest web apps">
-  Large Google products build on top of Angular's architecture and help develop new features that
-  further improve Angular's scalability, from [Google Fonts](https://fonts.google.com/) to [Google Cloud](https://console.cloud.google.com).
+  <docs-card title="Google의 주요 웹 앱에서 입증된 성능">
+  대규모 Google 제품은 Angular 아키텍처 위에 구축되며 Angular의 확장성을 더욱 향상시키기 위한 새로운 기능 개발에 도움을 줍니다. [Google Fonts](https://fonts.google.com/)에서 [Google Cloud](https://console.cloud.google.com)까지 다양합니다.
   </docs-card>
 </docs-card-container>
 
-## Open-source first
+## 오픈 소스 우선
 
 <docs-card-container>
-  <docs-card title="Made in the open on GitHub" href="https://github.com/angular/angular" link="Star our GitHub">
-  Curious what we’re working on? Every PR and commit is available on our GitHub. Run into an issue or bug? We triage GitHub issues regularly to ensure we’re responsive and engaged with our community, and solving the real world problems you’re facing.
+  <docs-card title="GitHub에서 공개하여 제작됨" href="https://github.com/angular/angular" link="GitHub 별표 달기">
+  우리가 작업하고 있는 내용이 궁금하신가요? 모든 PR 및 커밋은 우리의 GitHub에서 확인할 수 있습니다. 문제가 발생했거나 버그가 발생했나요? 우리는 정기적으로 GitHub 문제를 분류하여 우리 커뮤니티와의 상호작용을 보장하고 여러분이 직면하는 실제 문제를 해결하고 있습니다.
   </docs-card>
-  <docs-card title="Built with transparency" href="roadmap" link="Read our public roadmap">
-  Our team publishes a public roadmap of our current and future work and values your feedback. We publish Request for Comments (RFCs) to collect feedback on larger feature changes and ensure the community voice is heard while shaping the future direction of Angular.
+  <docs-card title="투명성 있게 구축됨" href="roadmap" link="공식 로드맵 읽기">
+  우리 팀은 현재와 미래의 작업에 대한 공개 로드맵을 게시하고 있으며 귀하의 피드백을 소중히 여깁니다. 우리는 더 큰 기능 변경에 대한 피드백을 수집하기 위해 댓글 요청(RFC)을 게시하여 커뮤니티의 목소리가 Angular의 미래 방향을 형성하는 데 반영되도록 합니다.
   </docs-card>
 </docs-card-container>
 
-## A thriving community
+## 번창하는 커뮤니티
 
 <docs-card-container>
-  <docs-card title="Courses, blogs and resources" href="https://devlibrary.withgoogle.com/products/angular?sort=added" link="Check out DevLibrary">
-  Our community is composed of talented developers, writers, instructors, podcasters, and more. The Google for Developers library is just a sample of the high quality resources available for new and experienced developers to continue developing.
+  <docs-card title="강좌, 블로그 및 리소스" href="https://devlibrary.withgoogle.com/products/angular?sort=added" link="DevLibrary 확인하기">
+  우리 커뮤니티는 재능 있는 개발자, 작가, 강사, 팟캐스터 등으로 구성되어 있습니다. Google for Developers 라이브러리는 새로운 개발자와 경험이 풍부한 개발자가 계속해서 발전할 수 있도록 제공되는 고품질 리소스의 샘플에 불과합니다.
   </docs-card>
-  <docs-card title="Open Source" href="https://github.com/angular/angular/blob/main/CONTRIBUTING.md" link="Contribute to Angular">
-  We are thankful for the open source contributors who make Angular a better framework for everyone. From fixing a typo in the docs, to adding major features, we encourage anyone interested to get started on our GitHub.
+  <docs-card title="오픈 소스" href="https://github.com/angular/angular/blob/main/CONTRIBUTING.md" link="Angular에 기여하기">
+  우리는 Angular를 모든 사람이 더 나은 프레임워크가 되도록 돕는 오픈 소스 기여자에게 감사드립니다. 문서에서 오타를 수정하는 것부터 주요 기능을 추가하는 것까지, 우리 GitHub에서 시작하시기를 권장합니다.
   </docs-card>
-  <docs-card title="Community partnerships" href="https://developers.google.com/community/experts/directory?specialization=angular" link="Meet the Angular GDEs">
-  Our team partners with individuals, educators, and enterprises to ensure we consistently are supporting developers. Angular Google Developer Experts (GDEs) represent community leaders around the world educating, organizing, and developing with Angular. Enterprise partnerships help ensure that Angular scales well for technology industry leaders.
+  <docs-card title="커뮤니티 파트너십" href="https://developers.google.com/community/experts/directory?specialization=angular" link="Angular GDE를 만나다">
+  우리 팀은 지속적으로 개발자를 지원하기 위해 개인, 교육자 및 기업과 협력합니다. Angular Google Developer Experts(GDE)는 전 세계의 커뮤니티 리더를 대표하여 Angular와 함께 교육, 조직 및 개발하고 있습니다. 기업 파트너십은 Angular가 기술 산업 리더에게 원활하게 확장될 수 있도록 보장합니다.
   </docs-card>
-  <docs-card title="Partnering with other Google technologies">
-  Angular partners closely with other Google technologies and teams to improve the web.
+  <docs-card title="다른 Google 기술과의 파트너십">
+  Angular는 웹 개선을 위해 다른 Google 기술 및 팀과 밀접하게 협력하고 있습니다.
 
-  Our ongoing partnership with Chrome’s Aurora actively explores improvements to user experience across the web, developing built-in performance optimizations like NgOptimizedImage and improvements to Angular’s Core Web Vitals.
+  Chrome의 Aurora와의 지속적인 파트너십은 웹 전반에 걸쳐 사용자 경험 개선을 탐색하고 NgOptimizedImage 및 Angular의 Core Web Vitals와 같은 내장 성능 최적화를 개발하고 있습니다.
 
-  We are also working with [Firebase](https://firebase.google.com/), [Tensorflow](https://www.tensorflow.org/), [Flutter](https://flutter.dev/), [Material Design](https://m3.material.io/), and [Google Cloud](https://cloud.google.com/) to ensure we provide meaningful integrations across the developer workflow.
+  우리는 또한 [Firebase](https://firebase.google.com/), [Tensorflow](https://www.tensorflow.org/), [Flutter](https://flutter.dev/), [Material Design](https://m3.material.io/) 및 [Google Cloud](https://cloud.google.com/)와 협력하여 개발자 작업 흐름 전반에 걸쳐 의미 있는 통합을 제공하고 있습니다.
   </docs-card>
 </docs-card-container>
 
-<docs-callout title="Join the momentum!">
+<docs-callout title="운동에 참여하세요!">
   <docs-pill-row>
-    <docs-pill href="roadmap" title="Read Angular's roadmap"/>
-    <docs-pill href="playground" title="Try out our playground"/>
-    <docs-pill href="tutorials" title="Learn with tutorials"/>
-    <docs-pill href="https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF" title="Watch our YouTube course"/>
-    <docs-pill href="api" title="Reference our APIs"/>
+    <docs-pill href="roadmap" title="Angular의 로드맵 읽기"/>
+    <docs-pill href="playground" title="우리의 놀이터 사용해 보기"/>
+    <docs-pill href="tutorials" title="튜토리얼로 배우기"/>
+    <docs-pill href="https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF" title="YouTube 강좌 보기"/>
+    <docs-pill href="api" title="API 참조하기"/>
   </docs-pill-row>
-</docs-callout>
+</docs-callout>
\ No newline at end of file
diff --git a/adev/src/content/kitchen-sink.md b/adev/src/content/kitchen-sink.md
index d9707eea882a..7afa2503d807 100644
--- a/adev/src/content/kitchen-sink.md
+++ b/adev/src/content/kitchen-sink.md
@@ -1,153 +1,153 @@
-<docs-decorative-header title="Kitchen sink" imgSrc="assets/images/components.svg"> <!-- markdownlint-disable-line -->
-This is a visual list of all custom components and styles for Angular.dev.
+<docs-decorative-header title="주방 싱크대" imgSrc="assets/images/components.svg"> <!-- markdownlint-disable-line -->
+이것은 Angular.dev를 위한 모든 사용자 정의 구성 요소 및 스타일의 비주얼 목록입니다.
 </docs-decorative-header>
 
-As a design system, this page contains visual and Markdown authoring guidance for:
+디자인 시스템으로서 이 페이지는 다음에 대한 시각적 및 Markdown 작성 지침을 포함합니다:
 
-* Custom Angular docs elements: [`docs-card`](#cards), [`docs-callout`](#callouts), [`docs-pill`](#pills), and [`docs-steps`](#workflow)
-* Custom text elements: [alerts](#alerts)
-* Code examples: [`docs-code`](#code)
-* Built-in Markdown styled elements: links, lists, [headers](#headers), [horizontal lines](#horizontal-line-divider), [tables](#tables)
-* and more!
+* 사용자 정의 Angular 문서 요소: [`docs-card`](#cards), [`docs-callout`](#callouts), [`docs-pill`](#pills), 및 [`docs-steps`](#workflow)
+* 사용자 정의 텍스트 요소: [알림](#alerts)
+* 코드 예제: [`docs-code`](#code)
+* 내장 Markdown 스타일 요소: 링크, 목록, [헤더](#headers), [수평선](#horizontal-line-divider), [테이블](#tables)
+* 그 외에도 더 많은 것들!
 
-Get ready to:
+준비하세요:
 
-1. Write...
-2. great...
-3. docs!
+1. 작성하기...
+2. 훌륭한...
+3. 문서!
 
-## Headers (h2)
+## 헤더 (h2)
 
-### Smaller headers (h3)
+### 작은 헤더 (h3)
 
-#### Even smaller (h4)
+#### 더 작은 헤더 (h4)
 
-##### Even more smaller (h5)
+##### 더 더 작은 헤더 (h5)
 
-###### The smallest! (h6)
+###### 가장 작은 헤더! (h6)
 
-## Cards
+## 카드
 
 <docs-card-container>
-  <docs-card title="What is Angular?" link="Platform Overview" href="tutorials/first-app">
+  <docs-card title="Angular란 무엇인가?" link="플랫폼 개요" href="tutorials/first-app">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare ligula nisi
   </docs-card>
-  <docs-card title="Second Card" link="Try It Now" href="essentials/what-is-angular">
+  <docs-card title="두 번째 카드" link="지금 시도하기" href="essentials/what-is-angular">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare ligula nisi
   </docs-card>
-    <docs-card title="No Link Card">
+    <docs-card title="링크 없는 카드">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare ligula nisi
   </docs-card>
 </docs-card-container>
 
-### `<docs-card>` Attributes
+### `<docs-card>` 속성
 
-| Attributes               | Details                                           |
-|:---                      |:---                                               |
-| `<docs-card-container>`  | All cards must be nested inside a container       |
-| `title`                  | Card title                                        |
-| card body contents       | Anything between `<docs-card>` and `</docs-card>` |
-| `link`                   | (Optional) Call to Action link text               |
-| `href`                   | (Optional) Call to Action link href               |
+| 속성                     | 세부사항                                        |
+|:---                      |:---                                            |
+| `<docs-card-container>`  | 모든 카드는 컨테이너 내부에 중첩되어야 합니다.   |
+| `title`                  | 카드 제목                                      |
+| 카드 본문 내용          | `<docs-card>`와 `</docs-card>` 사이의 모든 것    |
+| `link`                   | (선택적) 호출 행동 링크 텍스트                |
+| `href`                   | (선택적) 호출 행동 링크 href                  |
 
-## Callouts
+## 호출 알림
 
-<docs-callout title="Title of a callout that is helpful">
+<docs-callout title="도움이 되는 호출 알림 제목">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus metus blandit semper faucibus. Sed blandit diam quis tellus maximus, ac scelerisque ex egestas. Ut euismod lobortis mauris pretium iaculis. Quisque ullamcorper, elit ut lacinia blandit, magna sem finibus urna, vel suscipit tortor dolor id risus.
 </docs-callout>
 
-<docs-callout critical title="Title of a callout that is critical">
+<docs-callout critical title="중요한 호출 알림 제목">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus metus blandit semper faucibus. Sed blandit diam quis tellus maximus, ac scelerisque ex egestas. Ut euismod lobortis mauris pretium iaculis. Quisque ullamcorper, elit ut lacinia blandit, magna sem finibus urna, vel suscipit tortor dolor id risus.
 </docs-callout>
 
-<docs-callout important title="Title of a callout that is important">
+<docs-callout important title="중요한 호출 알림 제목">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus metus blandit semper faucibus. Sed blandit diam quis tellus maximus, ac scelerisque ex egestas. Ut euismod lobortis mauris pretium iaculis. Quisque ullamcorper, elit ut lacinia blandit, magna sem finibus urna, vel suscipit tortor dolor id risus.
 </docs-callout>
 
-### `<docs-callout>` Attributes
+### `<docs-callout>` 속성
 
-| Attributes                                       | Details                                                   |
-|:---                                              |:---                                                       |
-| `title`                                          | Callout title                                             |
-| card body contents                               | Anything between `<docs-callout>` and `</docs-callout>`   |
-| `helpful` (default) \| `critical` \| `important` | (Optional) Adds styling and icons based on severity level |
+| 속성                                       | 세부사항                                                   |
+|:---                                        |:---                                                       |
+| `title`                                    | 호출 알림 제목                                           |
+| 카드 본문 내용                             | `<docs-callout>`와 `</docs-callout>` 사이의 모든 것      |
+| `helpful` (기본값) \| `critical` \| `important` | (선택적) 심각도 수준에 따라 스타일 및 아이콘 추가      |
 
-## Pills
+## 알약
 
-Pill rows are helpful as a sort of navigation with links to helpful resources.
+알약 행은 유용한 리소스에 대한 링크로 내비게이션의 일종으로 유용합니다.
 
 <docs-pill-row>
-  <docs-pill href="#pill-row" title="Link"/>
-  <docs-pill href="#pill-row" title="Link"/>
-  <docs-pill href="#pill-row" title="Link"/>
-  <docs-pill href="#pill-row" title="Link"/>
-  <docs-pill href="#pill-row" title="Link"/>
-  <docs-pill href="#pill-row" title="Link"/>
+  <docs-pill href="#pill-row" title="링크"/>
+  <docs-pill href="#pill-row" title="링크"/>
+  <docs-pill href="#pill-row" title="링크"/>
+  <docs-pill href="#pill-row" title="링크"/>
+  <docs-pill href="#pill-row" title="링크"/>
+  <docs-pill href="#pill-row" title="링크"/>
 </docs-pill-row>
 
-### `<docs-pill>` Attributes
+### `<docs-pill>` 속성
 
-| Attributes               | Details                                      |
-|:---                      |:---                                          |
-| `<docs-pill-row`         | All pills must be nested inside a pill row   |
-| `title`                  | Pill text                                    |
-| `href`                   | Pill href                                    |
+| 속성                     | 세부사항                                     |
+|:---                      |:---                                         |
+| `<docs-pill-row>`        | 모든 알약은 알약 행 내부에 중첩되어야 합니다.|
+| `title`                  | 알약 텍스트                                 |
+| `href`                   | 알약 href                                   |
 
-Pills may also be used inline by themselves, but we haven't built that out yet.
+알약은 혼자서 인라인으로도 사용할 수 있지만, 그 기능은 아직 구축되지 않았습니다.
 
-## Alerts
+## 알림
 
-Alerts are just special paragraphs. They are helpful to call out (not to be confused with call-out) something that's a bit more urgent. They gain font size from context and are available in many levels. Try not to use alerts to render too much content, but rather to enhance and call attention to surrounding content.
+알림은 특별한 문단일 뿐입니다. 긴급한 내용을 강조하기 위해 유용하며, 상황에 따라 글꼴 크기를 조정할 수 있습니다. 너무 많은 내용을 표시하기 위해 알림을 사용하지 않도록 하고, 주변 콘텐츠를 강조하는 데 사용하세요.
 
-Style alerts starting on a new line in Markdown using the format `SEVERITY_LEVEL` + `:` + `ALERT_TEXT`.
+Markdown에서 `SEVERITY_LEVEL` + `:` + `ALERT_TEXT` 형식으로 새 줄에서 알림 스타일을 지정하세요.
 
-Note: Use Note for ancillary/additional information that's not _essential_ to the main text.
+참고: 본문 텍스트에 _필수_가 아닌 보조/추가 정보를 위해 Note를 사용하세요.
 
-Tip: Use Tip to call out a specific task/action users can perform, or a fact that plays directly into a task/action.
+팁: 특정 작업/행동을 호출하거나 작업/행동에 직접 연결되는 사실을 강조하는 데 Tip을 사용하세요.
 
-TODO: Use TODO for incomplete documentation that you plan to expand soon. You can also assign the TODO, e.g. TODO(emmatwersky): Text.
+TODO: 곧 확장할 예정인 미완의 문서에 대해 TODO를 사용하세요. 예: TODO(emmatwersky): 텍스트.
 
-QUESTION: Use Question to pose a question to the reader, kind of like a mini-quiz that they should be able to answer.
+질문: 독자에게 질문을 제기하는 데 Question을 사용하세요. 독자가 답변할 수 있어야 하는 미니 퀴즈처럼요.
 
-Summary: Use Summary to provide a two- or three-sentence synopsis of the page or section content, so readers can figure out whether this is the right place for them.
+요약: 페이지나 섹션 콘텐츠의 2~3문 장 요약을 제공하는 데 Summary를 사용하세요. 독자가 이곳이 적합한지 알아볼 수 있도록 합니다.
 
-TLDR: Use TL;DR (or TLDR) if you can provide the essential information about a page or section in a sentence or two. For example, TLDR: Rhubarb is a cat.
+TLDR: 페이지나 섹션에 대한 필수 정보를 한두 문장으로 제공할 수 있으면 TL;DR(또는 TLDR)을 사용하세요. 예: TLDR: Rhubarb은 고양이입니다.
 
-CRITICAL: Use Critical to call out potential bad stuff or alert the reader they ought to be careful before doing something. For example, Warning: Running `rm` with the `-f` option will delete write-protected files or directories without prompting you.
+CRITICAL: 잠재적인 나쁜 사항을 강조하거나 무언가를 수행하기 전에 조심해야 한다는 것을 독자에게 경고하는 데 Critical을 사용하세요. 예: 경고: `rm`을 `-f` 옵션과 함께 실행하면, 확인 없이 쓰기 보호된 파일이나 디렉터리가 삭제됩니다.
 
-IMPORTANT: Use Important for information that's crucial to comprehending the text or to completing some task.
+IMPORTANT: 텍스트를 이해하거나 일부 작업을 완료하는 데 중요한 정보를 위해 Important를 사용하세요.
 
-HELPFUL: Use Best practice to call out practices that are known to be successful or better than alternatives.
+HELPFUL: 성공적인 것으로 알려지거나 대안보다 더 나은 관행을 호출하기 위해 Best practice를 사용하세요.
 
-Note: Heads up `developers`! Alerts _can_ have a [link](#alerts) and other nested styles (but try to **use this sparingly**)!.
+참고: 개발자 여러분! 알림은 **가능하면 최소한** 사용할 것![링크](#alerts) 및 기타 중첩 스타일을 가질 수 있습니다.
 
-## Code
+## 코드
 
-You can display `code` using the built in triple backtick:
+내장된 트리플 백틱을 사용하여 `code`를 표시할 수 있습니다:
 
 ```ts
-example code
+예제 코드
 ```
 
-Or using the `<docs-code>` element.
+또는 `<docs-code>` 요소를 사용하여 표시할 수 있습니다.
 
-<docs-code header="Your first example" language="ts" linenums>
+<docs-code header="당신의 첫 번째 예제" language="ts" linenums>
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'example-code',
-  template: '<h1>Hello World!</h1>',
+  template: '<h1>안녕하세요!</h1>',
 })
 export class ComponentOverviewComponent {}
 </docs-code>
 
-### Styling the example
+### 예제 스타일 지정
 
-Here's a code example fully styled:
+다음은 완전히 스타일된 코드 예제입니다:
 
 <docs-code
   path="hello-world/src/app/app.component-old.ts"
-  header="A styled code example"
+  header="스타일이 적용된 코드 예제"
   language='ts'
   linenums
   highlight="[[14,19], 27]"
@@ -156,30 +156,30 @@ Here's a code example fully styled:
   visibleLines="[13,28]">
 </docs-code>
 
-We also have styling for the terminal, just set the language as `shell`:
+터미널에 대한 스타일도 있으며, 언어를 `shell`로 설정하세요:
 
 <docs-code language="shell">
   npm install @angular/material --save
 </docs-code>
 
-#### `<docs-code>` Attributes
+#### `<docs-code>` 속성
 
-| Attributes               | Type        | Details                                              |
+| 속성                     | 유형        | 세부사항                                              |
 |:---                      |:---         |:---                                                  |
-| code                     | `string`    | Anything between tags is treated as code             |
-| `path`                   | `string`    | Path to code example (root: `content/examples/`)     |
-| `header`                 | `string`    | Title of the example (default: `file-name`)          |
-| `language`               | `string`    | code language                                        |
-| `linenums`               | `boolean`   | (False) displays line numbers                        |
-| `highlight`              | `string of number[]` | lines highlighted                           |
-| `diff`                   | `string`    | path to changed code                                 |
-| `visibleLines`           | `string of number[]` | range of lines for collapse mode            |
-| `visibleRegion`          | `string`    | **DEPRECATED** FOR `visibleLines`                    |
-| `preview`                | `boolean`   | (False) display preview                              |
+| 코드                     | `string`    | 태그 사이의 모든 것은 코드로 처리됨                 |
+| `path`                   | `string`    | 코드 예제의 경로 (루트: `content/examples/`)         |
+| `header`                 | `string`    | 예제의 제목 (기본값: `file-name`)                   |
+| `language`               | `string`    | 코드 언어                                            |
+| `linenums`               | `boolean`   | (False) 줄 번호 표시                              |
+| `highlight`              | `string of number[]` | 강조된 줄                           |
+| `diff`                   | `string`    | 변경된 코드의 경로                                   |
+| `visibleLines`           | `string of number[]` | 포괄 모드의 줄 범위                     |
+| `visibleRegion`          | `string`    | `visibleLines`의 **폐기된**                         |
+| `preview`                | `boolean`   | (False) 미리보기 표시                                |
 
-### Multifile examples
+### 다중 파일 예제
 
-You can create multifile examples by wrapping the examples inside a `<docs-code-multifile>`.
+예제를 `<docs-code-multifile>` 내에 래핑하여 다중 파일 예제를 만들 수 있습니다.
 
 <docs-code-multifile
   path="hello-world/src/app/app.component.ts"
@@ -197,21 +197,21 @@ You can create multifile examples by wrapping the examples inside a `<docs-code-
     highlight="[2]"/>
 </docs-code-multifile>
 
-#### `<docs-code-multifile>` Attributes
+#### `<docs-code-multifile>` 속성
 
-| Attributes               | Type        | Details                                          |
+| 속성                     | 유형        | 세부사항                                          |
 |:---                      |:---         |:---                                              |
-| body contents            | `string`    | nested tabs of `docs-code` examples              |
-| `path`                   | `string`    | Path to code example for preview and external link |
-| `preview`                | `boolean`   | (False) display preview                          |
+| 본문 내용                | `string`    | 중첩된 `docs-code` 예제의 탭                      |
+| `path`                   | `string`    | 미리보기 및 외부 링크를 위한 코드 예제의 경로      |
+| `preview`                | `boolean`   | (False) 미리보기 표시                            |
 
-### Adding `preview` to your code example
+### 코드 예제에 `preview` 추가하기
 
-Adding the `preview` flag builds a running example of the code below the code snippet. This also automatically adds a button to open the running example in Stackblitz.
+`preview` 플래그를 추가하면 코드 스니펫 아래에 코드의 실행 예제를 빌드합니다. 이렇게 하면 실행 예제를 Stackblitz에서 열 수 있는 버튼도 자동으로 추가됩니다.
 
-Note: `preview` only works with standalone.
+참고: `preview`는 독립 실행형에서만 작동합니다.
 
-#### built-in-template-functions
+#### 내장된 템플릿 함수
 
 <docs-code-multifile
   path="built-in-template-functions/src/app/app.component.ts"
@@ -223,7 +223,7 @@ Note: `preview` only works with standalone.
     linenums/>
 </docs-code-multifile>
 
-#### user-input
+#### 사용자 입력
 
 <docs-code-multifile
   path="user-input/src/app/app.component.ts"
@@ -240,96 +240,96 @@ Note: `preview` only works with standalone.
     path="user-input/src/app/click-me2.component.ts" linenums/>
 </docs-code-multifile>
 
-## Workflow
+## 워크플로우
 
-Style numbered steps using `<docs-step>`. Numbering is created using CSS (handy!).
+`<docs-step>`을 사용하여 번호 매겨진 단계를 스타일링합니다. 번호 매기기는 CSS를 사용하여 생성됩니다(편리합니다!).
 
-### `<docs-workflow>` and `<docs-step>` Attributes
+### `<docs-workflow>` 및 `<docs-step>` 속성
 
-| Attributes               | Details                                           |
-|:---                      |:---                                               |
-| `<docs-workflow>`        | All steps must be nested inside a workflow        |
-| `title`                  | Step title                                        |
-| step body contents       | Anything between `<docs-step>` and `</docs-step>` |
+| 속성                     | 세부사항                                        |
+|:---                      |:---                                            |
+| `<docs-workflow>`        | 모든 단계는 워크플로우 내부에 중첩되어야 합니다.   |
+| `title`                  | 단계 제목                                      |
+| 단계 본문 내용          | `<docs-step>`와 `</docs-step>` 사이의 모든 것    |
 
-Steps must start on a new line, and can contain `docs-code`s and other nested elements and styles.
+단계는 새 줄에서 시작해야 하며, `docs-code` 및 기타 중첩 요소와 스타일을 포함할 수 있습니다.
 
 <docs-workflow>
 
-<docs-step title="Install the Angular CLI">
-  You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
+<docs-step title="Angular CLI 설치">
+  Angular CLI를 사용하여 프로젝트를 생성하고, 애플리케이션 및 라이브러리 코드를 생성하며, 테스트, 번들링 및 배포와 같은 다양한 개발 작업을 수행합니다.
 
-  To install the Angular CLI, open a terminal window and run the following command:
+  Angular CLI를 설치하려면, 터미널 창을 열고 다음 명령어를 실행하세요:
 
   <docs-code language="shell">
     npm install -g @angular/cli
   </docs-code>
 </docs-step>
 
-<docs-step title="Create a workspace and initial application">
-  You develop apps in the context of an Angular workspace.
+<docs-step title="작업 공간 및 초기 애플리케이션 생성">
+  Angular 작업 공간의 컨텍스트 내에서 앱을 개발합니다.
 
-  To create a new workspace and initial starter app:
+  새 작업 공간 및 초기 스타터 앱을 생성하려면:
 
-* Run the CLI command `ng new` and provide the name `my-app`, as shown here:
+* CLI 명령어 `ng new`를 실행하고 이름 `my-app`을 제공해주세요:
     <docs-code language="shell">
       ng new my-app
     </docs-code>
 
-* The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.
+* ng new 명령어는 초기 앱에 포함할 기능에 대한 정보를 요청합니다. Enter 또는 Return 키를 눌러 기본값을 수락하십시오.
 
-  The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.
+  Angular CLI는 필요한 Angular npm 패키지 및 기타 종속성을 설치합니다. 이 과정은 몇 분이 걸릴 수 있습니다.
 
-  The CLI creates a new workspace and a simple Welcome app, ready to run.
+  CLI는 새로운 작업 공간과 간단한 환영 앱을 생성하며, 실행 준비가 완료됩니다.
 </docs-step>
 
-<docs-step title="Run the application">
-  The Angular CLI includes a server, for you to build and serve your app locally.
+<docs-step title="애플리케이션 실행">
+  Angular CLI에는 로컬에서 앱을 빌드하고 제공하는 서버가 포함되어 있습니다.
 
-  1. Navigate to the workspace folder, such as `my-app`.
-  2. Run the following command:
+  1. 작업 공간 폴더로 이동하십시오. 예: `my-app`.
+  2. 다음 명령어를 실행하세요:
     <docs-code language="shell">
       cd my-app
       ng serve --open
     </docs-code>
 
-  The `ng serve` command launches the server, watches your files, and rebuilds the app as you make changes to those files.
+  `ng serve` 명령어는 서버를 시작하고, 파일을 감시하며 파일에 변경 사항이 생길 때 앱을 다시 빌드합니다.
 
-  The `--open` (or just `-o`) option automatically opens your browser to <http://localhost:4200/>.
-  If your installation and setup was successful, you should see a page similar to the following.
+  `--open`(또는 단순히 `-o`) 옵션은 자동으로 브라우저를 <http://localhost:4200/>에 엽니다.
+  설치 및 설정이 성공적이었다면, 아래와 비슷한 페이지를 볼 수 있어야 합니다.
 </docs-step>
 
-<docs-step title="Final step">
-  That's all the docs components! Now:
+<docs-step title="마지막 단계">
+  이제 모든 문서 구성 요소가 준비되었습니다! 이제:
 
   <docs-pill-row>
-    <docs-pill href="#pill-row" title="Go"/>
-    <docs-pill href="#pill-row" title="write"/>
-    <docs-pill href="#pill-row" title="great"/>
-    <docs-pill href="#pill-row" title="docs!"/>
+    <docs-pill href="#pill-row" title="가세요"/>
+    <docs-pill href="#pill-row" title="작성하세요"/>
+    <docs-pill href="#pill-row" title="훌륭한"/>
+    <docs-pill href="#pill-row" title="문서!"/>
   </docs-pill-row>
 </docs-step>
 
 </docs-workflow>
 
-## Images and video
+## 이미지 및 비디오
 
-You can add images using the semantic Markdown image:
+Markdown 이미지로 이미지를 추가할 수 있습니다:
 
-![Rhubarb the cat](./images/kitchen-sink/rhubarb.jpg "Optional title")
+![루바르브 고양이](./images/kitchen-sink/rhubarb.jpg "선택 제목")
 
-### Add `#small` and `#medium` to change the image size
+### 이미지 크기 변경을 위해 `#small` 및 `#medium` 추가
 
-![Rhubarb the small cat](./images/kitchen-sink/rhubarb.jpg#small)
-![Rhubarb the medium cat](./images/kitchen-sink/rhubarb.jpg#medium)
+![작은 루바르브 고양이](./images/kitchen-sink/rhubarb.jpg#small)
+![중간 루바르브 고양이](./images/kitchen-sink/rhubarb.jpg#medium)
 
-Embedded videos are created with `docs-video` and just need a `src` and `alt`:
+임베드된 비디오는 `docs-video`를 사용하여 생성되며 `src`와 `alt`만 필요합니다:
 
 <docs-video src="https://www.youtube.com/embed/O47uUnJjbJc" alt=""/>
 
-## Charts & Graphs
+## 차트 및 그래프
 
-Write diagrams and charts using [Mermaid](http://mermaid.js.org/) by setting the code language to `mermaid`, all theming is built-in.
+[Mermaid](http://mermaid.js.org/)를 사용하여 다이어그램 및 차트를 작성하세요. 코드 언어를 `mermaid`로 설정하면 모든 테마가 내장됩니다.
 
 ```mermaid
     graph TD;
@@ -341,23 +341,23 @@ Write diagrams and charts using [Mermaid](http://mermaid.js.org/) by setting the
 
 ```mermaid
   sequenceDiagram
-      Alice->>+John: Hello John, how are you?
-      Alice->>+John: John, can you hear me?
-      John-->>-Alice: Hi Alice, I can hear you!
-      John-->>-Alice: I feel great!
+      Alice->>+John: 안녕하세요 존, 어떻게 지내세요?
+      Alice->>+John: 존, 제 목소리 들리나요?
+      John-->>-Alice: 안녕하세요 앨리스, 들려요!
+      John-->>-Alice: 기분이 좋아요!
 ```
 
 ```mermaid
-  pie title Pets adopted by volunteers
-      "Dogs" : 386
-      "Cats" : 85
-      "Rats" : 15
+  pie title 자원봉사자가 입양한 반려동물
+      "개" : 386
+      "고양이" : 85
+      "쥐" : 15
 ```
 
-## Horizontal Line Divider
+## 수평선 구분자
 
-This can be used to separate page sections, like we're about to do below.  These styles will be added by default, nothing custom needed.
+페이지 섹션을 분리하는 데 사용할 수 있으며, 아래와 같이 사용할 수 있습니다. 이러한 스타일은 기본적으로 추가됩니다. 추가적인 사용자 지정은 필요하지 않습니다.
 
 <hr/>
 
-The end!
+끝!
\ No newline at end of file
diff --git a/adev/src/content/reference/cli.md b/adev/src/content/reference/cli.md
index 59fcc1a3cf0b..9bfd884629f8 100644
--- a/adev/src/content/reference/cli.md
+++ b/adev/src/content/reference/cli.md
@@ -2,20 +2,20 @@
 
 | Command                           | Alias  | Description                                                       |
 |:---                               |:---    |:---                                                               |
-| [`add`](cli/add)                  |        | Adds support for an external library to your project.             |
-| [`analytics`](cli/analytics)      |        | Configures the gathering of Angular CLI usage metrics.            |
-| [`build`](cli/build)              | `b`      | Compiles an Angular application or library into an output directory named dist/ at the given output path. |
-| [`cache`](cli/cache)              |        | Configure persistent disk cache and retrieve cache statistics.    |
-| [`completion`](cli/completion)    |        | Set up Angular CLI autocompletion for your terminal.              |
-| [`config`](cli/config)            |        | Retrieves or sets Angular configuration values in the angular.json file for the workspace. |
-| [`deploy`](cli/deploy)            |        | Invokes the deploy builder for a specified project or for the default project in the workspace. |
-| [`e2e`](cli/e2e)                  | `e`      | Builds and serves an Angular application, then runs end-to-end tests. |
-| [`extract-i18n`](cli/extract-i18n)|        | Extracts i18n messages from source code.                          |
-| [`generate`](cli/generate)        | `g`      | Generates and/or modifies files based on a schematic.             |
-| [`lint`](cli/lint)                |        | Runs linting tools on Angular application code in a given project folder. |
-| [`new`](cli/new)                  | `n`      | Creates a new Angular workspace. |
-| [`run`](cli/run)                  |        | Runs an Architect target with an optional custom builder configuration defined in your project. |
-| [`serve`](cli/serve)              | `s`, `dev`      | Builds and serves your application, rebuilding on file changes. |
-| [`test`](cli/test)                | `t`      | Runs unit tests in a project. |
-| [`update`](cli/update)            |        | Updates your workspace and its dependencies. See https://angular.dev/update-guide/.             |
-| [`version`](cli/version)          | `v`      | Outputs Angular CLI version. |
+| [`add`](cli/add)                  |        | 외부 라이브러리를 프로젝트에 추가합니다.                              |
+| [`analytics`](cli/analytics)      |        | Angular CLI 사용 메트릭 수집을 구성합니다.                         |
+| [`build`](cli/build)              | `b`      | Angular 애플리케이션 또는 라이브러리를 주어진 출력 경로의 dist/라는 출력 디렉토리에 컴파일합니다. |
+| [`cache`](cli/cache)              |        | 지속적인 디스크 캐시를 구성하고 캐시 통계를 반환합니다.               |
+| [`completion`](cli/completion)    |        | 터미널용 Angular CLI 자동 완성을 설정합니다.                         |
+| [`config`](cli/config)            |        | 작업 공간의 angular.json 파일에서 Angular 구성 값을 가져오거나 설정합니다. |
+| [`deploy`](cli/deploy)            |        | 지정된 프로젝트 또는 작업 공간의 기본 프로젝트를 위한 배포 빌더를 호출합니다. |
+| [`e2e`](cli/e2e)                  | `e`      | Angular 애플리케이션을 빌드 및 제공한 다음, 종단 간 테스트를 실행합니다. |
+| [`extract-i18n`](cli/extract-i18n)|        | 소스 코드에서 i18n 메시지를 추출합니다.                             |
+| [`generate`](cli/generate)        | `g`      | 도면에 따라 파일을 생성 및/또는 수정합니다.                           |
+| [`lint`](cli/lint)                |        | 주어진 프로젝트 폴더에서 Angular 애플리케이션 코드에 대해 린트 도구를 실행합니다. |
+| [`new`](cli/new)                  | `n`      | 새로운 Angular 작업 공간을 생성합니다.                              |
+| [`run`](cli/run)                  |        | 프로젝트에서 정의된 선택적 사용자 지정 빌더 구성으로 Architect 대상을 실행합니다. |
+| [`serve`](cli/serve)              | `s`, `dev`      | 애플리케이션을 빌드하고 제공하며, 파일 변경 시 재빌드합니다.          |
+| [`test`](cli/test)                | `t`      | 프로젝트에서 단위 테스트를 실행합니다.                               |
+| [`update`](cli/update)            |        | 작업 공간 및 그 종속성을 업데이트합니다. 자세한 내용은 https://angular.dev/update-guide/를 참조하세요.      |
+| [`version`](cli/version)          | `v`      | Angular CLI 버전을 출력합니다.                                     |
\ No newline at end of file
diff --git a/adev/src/content/reference/concepts/overview.md b/adev/src/content/reference/concepts/overview.md
index 3dea7294d8e2..b2acd4e80b1c 100644
--- a/adev/src/content/reference/concepts/overview.md
+++ b/adev/src/content/reference/concepts/overview.md
@@ -1,7 +1,7 @@
 # Concepts
 
 <docs-card-container>
-  <docs-card title="NgModules" link="Learn more" href="guide/ngmodules">
-    NgModules is a concept that commonly used in architecture v16 and earlier to help configure the injector and the compiler and help organize related things together.
+  <docs-card title="NgModules" link="자세히 알아보기" href="guide/ngmodules">
+    NgModules는 아키텍처 v16 및 이전 버전에서 주로 사용되어 인젝터와 컴파일러를 구성하고 관련된 것들을 함께 정리하는 데 도움을 주는 개념입니다.
   </docs-card>
-</docs-card-container>
+</docs-card-container>
\ No newline at end of file
diff --git a/adev/src/content/reference/configs/angular-compiler-options.md b/adev/src/content/reference/configs/angular-compiler-options.md
index 09731158a048..ca2de1037e58 100644
--- a/adev/src/content/reference/configs/angular-compiler-options.md
+++ b/adev/src/content/reference/configs/angular-compiler-options.md
@@ -1,234 +1,234 @@
-# Angular compiler options
+# Angular 컴파일러 옵션
 
-When you use [ahead-of-time compilation (AOT)](tools/cli/aot-compiler), you can control how your application is compiled by specifying Angular compiler options in the [TypeScript configuration file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
+[AOT (사전 컴파일)](tools/cli/aot-compiler)을 사용하는 경우, TypeScript 구성 파일에서 Angular 컴파일러 옵션을 지정하여 애플리케이션이 어떻게 컴파일되는지를 제어할 수 있습니다.
 
-The Angular options object, `angularCompilerOptions`, is a sibling to the `compilerOptions` object that supplies standard options to the TypeScript compiler.
+Angular 옵션 객체인 `angularCompilerOptions`는 TypeScript 컴파일러에 표준 옵션을 공급하는 `compilerOptions` 객체의 형제입니다.
 
 <docs-code header="tsconfig.json" path="adev/src/content/examples/angular-compiler-options/tsconfig.json" visibleRegion="angular-compiler-options"/>
 
-## Configuration inheritance with `extends`
+## `extends`를 통한 구성 상속
 
-Like the TypeScript compiler, the Angular AOT compiler also supports `extends` in the `angularCompilerOptions` section of the TypeScript configuration file.
-The `extends` property is at the top level, parallel to `compilerOptions` and `angularCompilerOptions`.
+TypeScript 컴파일러와 마찬가지로 Angular AOT 컴파일러는 TypeScript 구성 파일의 `angularCompilerOptions` 섹션에서 `extends`를 지원합니다.
+`extends` 속성은 최상위 수준에 있으며, `compilerOptions` 및 `angularCompilerOptions`와 나란히 존재합니다.
 
-A TypeScript configuration can inherit settings from another file using the `extends` property.
-The configuration options from the base file are loaded first, then overridden by those in the inheriting configuration file.
+TypeScript 구성은 `extends` 속성을 사용하여 다른 파일에서 설정을 상속받을 수 있습니다.
+기본 파일의 구성 옵션이 먼저 로드되고, 그렇게 하여 상속된 구성 파일의 옵션으로 덮어씌워집니다.
 
-For example:
+예를 들어:
 
 <docs-code header="tsconfig.app.json" path="adev/src/content/examples/angular-compiler-options/tsconfig.app.json" visibleRegion="angular-compiler-options-app"/>
 
-For more information, see the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
+자세한 내용은 [TypeScript 핸드북](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)을 참조하십시오.
 
-## Template options
+## 템플릿 옵션
 
-The following options are available for configuring the Angular AOT compiler.
+다음 옵션들은 Angular AOT 컴파일러를 구성하는 데 사용할 수 있습니다.
 
 ### `annotationsAs`
 
-Modifies how Angular-specific annotations are emitted to improve tree-shaking.
-Non-Angular annotations are not affected.
-One of `static fields` or `decorators`. The default value is `static fields`.
+트리 쉐이킹을 개선하기 위해 Angular 전용 주석이 어떻게 생성되는지를 수정합니다.
+비-Angular 주석에는 영향을 미치지 않습니다.
+`static fields` 또는 `decorators` 중 하나입니다. 기본값은 `static fields`입니다.
 
-* By default, the compiler replaces decorators with a static field in the class, which allows advanced tree-shakers like [Closure compiler](https://github.com/google/closure-compiler) to remove unused classes
-* The `decorators` value leaves the decorators in place, which makes compilation faster.
-    TypeScript emits calls to the `__decorate` helper.
-    Use `--emitDecoratorMetadata` for runtime reflection.
+* 기본적으로, 컴파일러는 데코레이터를 클래스의 정적 필드로 교체하여 [Closure compiler](https://github.com/google/closure-compiler)와 같은 고급 트리 쉐이커가 사용되지 않는 클래스를 제거할 수 있도록 합니다.
+* `decorators` 값은 데코레이터를 그대로 두어 컴파일 속도를 빠르게 합니다.
+    TypeScript는 `__decorate` 헬퍼에 대한 호출을 생성합니다.
+    런타임 반사를 위해 `--emitDecoratorMetadata`를 사용하십시오.
 
-    HELPFUL: That the resulting code cannot tree-shake properly.
+    유용함: 결과 코드가 올바르게 트리 쉐이크할 수 없습니다.
 
 ### `annotateForClosureCompiler`
 
 <!-- vale Angular.Angular_Spelling = NO -->
 
-When `true`, use [Tsickle](https://github.com/angular/tsickle) to annotate the emitted JavaScript with [JSDoc](https://jsdoc.app) comments needed by the [Closure Compiler](https://github.com/google/closure-compiler).
-Default is `false`.
+`true`인 경우, 발생된 JavaScript를 [Closure Compiler](https://github.com/google/closure-compiler)에 필요한 [JSDoc](https://jsdoc.app) 주석으로 주석합니다.
+기본값은 `false`입니다.
 
 <!-- vale Angular.Angular_Spelling = YES -->
 
 ### `compilationMode`
 
-Specifies the compilation mode to use.
-The following modes are available:
+사용할 컴파일 모드를 지정합니다.
+다음 모드를 사용할 수 있습니다:
 
-| Modes       | Details |
-|:---         |:---     |
-| `'full'`    | Generates fully AOT-compiled code according to the version of Angular that is currently being used. |
-| `'partial'` | Generates code in a stable, but intermediate form suitable for a published library.                 |
+| 모드       | 세부 정보 |
+|:---        |:---      |
+| `'full'`   | 현재 사용 중인 Angular 버전에 따라 완전히 AOT 컴파일된 코드를 생성합니다. |
+| `'partial'`| 게시된 라이브러리에 적합한 안정적이지만 중간 형태로 코드를 생성합니다. |
 
-The default value is `'full'`.
+기본값은 `'full'`입니다.
 
-For most applications, `'full'` is the correct compilation mode.
+대부분의 애플리케이션에서는 `'full'`이 올바른 컴파일 모드입니다.
 
-Use `'partial'` for independently published libraries, such as NPM packages.
-`'partial'` compilations output a stable, intermediate format which better supports usage by applications built at different Angular versions from the library.
-Libraries built at "HEAD" alongside their applications and using the same version of Angular such as in a mono-repository can use `'full'` since there is no risk of version skew.
+독립적으로 게시된 라이브러리, 예를 들어 NPM 패키지에는 `'partial'`을 사용하십시오.
+`'partial'` 컴파일은 서로 다른 Angular 버전에서 구축된 응용 프로그램에 의해 사용되기에 더 나은 안정적인 중간 형식을 출력합니다.
+애플리케이션과 함께 "HEAD"에서 구축된 라이브러리들은 `'full'`을 사용할 수 있으며, 이 경우 버전 불일치의 위험이 없습니다.
 
 ### `disableExpressionLowering`
 
-When `true`, the default, transforms code that is or could be used in an annotation, to allow it to be imported from template factory modules.
-See [metadata rewriting](tools/cli/aot-compiler#metadata-rewriting) for more information.
+`true`인 경우, 기본값이며, 주석에서 사용되거나 사용될 수 있는 코드의 변환을 통해 템플릿 팩토리 모듈에서 가져올 수 있도록 합니다.
+자세한 내용은 [메타데이터 재작업](tools/cli/aot-compiler#metadata-rewriting)을 참조하십시오.
 
-When `false`, disables this rewriting, requiring the rewriting to be done manually.
+`false`인 경우, 이 재작업을 비활성화하여 수동으로 재작업이 필요합니다.
 
 ### `disableTypeScriptVersionCheck`
 
-When `true`, the compiler does not look at the TypeScript version and does not report an error when an unsupported version of TypeScript is used.
-Not recommended, as unsupported versions of TypeScript might have undefined behavior.
-Default is `false`.
+`true`인 경우, 컴파일러는 TypeScript 버전을 확인하지 않으며 지원되지 않는 TypeScript 버전이 사용될 때 오류를 보고하지 않습니다.
+지원되지 않는 TypeScript 버전은 정의되지 않은 동작을 일으킬 수 있으므로 권장하지 않습니다.
+기본값은 `false`입니다.
 
 ### `enableI18nLegacyMessageIdFormat`
 
-Instructs the Angular template compiler to create legacy ids for messages that are tagged in templates by the `i18n` attribute.
-See [Mark text for translations][GuideI18nCommonPrepareMarkTextInComponentTemplate] for more information about marking messages for localization.
+Angular 템플릿 컴파일러에 의해 `i18n` 속성으로 태그된 메시지에 대해 레거시 ID를 생성하도록 지시합니다.
+현지화를 위해 메시지를 표시하는 방법에 대한 자세한 내용은 [Mark text for translations][GuideI18nCommonPrepareMarkTextInComponentTemplate]를 참조하십시오.
 
-Set this option to `false` unless your project relies upon translations that were created earlier using legacy IDs.
-Default is `true`.
+레거시 ID를 사용하여 이전에 생성된 번역에 의존하지 않는 한 이 옵션을 `false`로 설정하십시오.
+기본값은 `true`입니다.
 
-The pre-Ivy message extraction tooling created a variety of legacy formats for extracted message IDs.
-These message formats have some issues, such as whitespace handling and reliance upon information inside the original HTML of a template.
+사전 Ivy 메시지 추출 도구는 추출된 메시지 ID에 대해 다양한 레거시 형식을 생성했습니다.
+이 메시지 형식에는 공백 처리 및 템플릿의 원래 HTML 내부 정보 의존과 같은 몇 가지 문제가 있습니다.
 
-The new message format is more resilient to whitespace changes, is the same across all translation file formats, and can be created directly from calls to `$localize`.
-This allows `$localize` messages in application code to use the same ID as identical `i18n` messages in component templates.
+새 메시지 형식은 공백 변경에 대한 저항력이 더 강하며, 모든 번역 파일 형식에서 동일하고, `$localize` 호출에서 직접 생성될 수 있습니다.
+이렇게 하면 애플리케이션 코드의 `$localize` 메시지가 컴포넌트 템플릿에서 동일한 `i18n` 메시지와 동일한 ID를 사용할 수 있습니다.
 
 ### `enableResourceInlining`
 
-When `true`, replaces the `templateUrl` and `styleUrls` properties in all `@Component` decorators with inline content in the `template` and `styles` properties.
+`true`인 경우, 모든 `@Component` 데코레이터의 `templateUrl` 및 `styleUrls` 속성을 `template` 및 `styles` 속성에 인라인 콘텐츠로 교체합니다.
 
-When enabled, the `.js` output of `ngc` does not include any lazy-loaded template or style URLs.
+활성화되면 `ngc`의 `.js` 출력에는 지연 로드된 템플릿이나 스타일 URL이 포함되지 않습니다.
 
-For library projects created with the Angular CLI, the development configuration default is `true`.
+Angular CLI로 생성된 라이브러리 프로젝트에서는 개발 구성 기본값이 `true`입니다.
 
 ### `enableLegacyTemplate`
 
-When `true`, enables the deprecated `<template>` element in place of `<ng-template>`.
-Default is `false`.
-Might be required by some third-party Angular libraries.
+`true`인 경우, `<ng-template>` 대신에 사용 중단된 `<template>` 요소를 활성화합니다.
+기본값은 `false`입니다.
+일부 서드파티 Angular 라이브러리에 의해 필요할 수 있습니다.
 
 ### `flatModuleId`
 
-The module ID to use for importing a flat module \(when `flatModuleOutFile` is `true`\).
-References created by the template compiler use this module name when importing symbols from the flat module.
-Ignored if `flatModuleOutFile` is `false`.
+플랫 모듈 \( `flatModuleOutFile`이 `true`인 경우 \)을 임포트하는 데 사용할 모듈 ID.
+템플릿 컴파일러에서 생성된 참조는 플랫 모듈에서 기호를 임포트할 때 이 모듈 이름을 사용합니다.
+`flatModuleOutFile`이 `false`인 경우 무시됩니다.
 
 ### `flatModuleOutFile`
 
-When `true`, generates a flat module index of the given filename and the corresponding flat module metadata.
-Use to create flat modules that are packaged similarly to `@angular/core` and `@angular/common`.
-When this option is used, the `package.json` for the library should refer to the created flat module index instead of the library index file.
+`true`인 경우, 지정된 파일 이름과 해당하는 플랫 모듈 메타데이터의 평면 모듈 인덱스를 생성합니다.
+`@angular/core` 및 `@angular/common`과 유사하게 패키징된 평면 모듈을 만드는 데 사용됩니다.
+이 옵션을 사용할 때 라이브러리의 `package.json`은 생성된 플랫 모듈 인덱스를 참조해야 하며 라이브러리 인덱스 파일은 참조하지 않아야 합니다.
 
-Produces only one `.metadata.json` file, which contains all the metadata necessary for symbols exported from the library index.
-In the created `.ngfactory.js` files, the flat module index is used to import symbols. Symbols that include both the public API from the library index and shrouded internal symbols.
+모듈 인덱스에서 내보낸 기호에 필요한 모든 메타데이터를 포함하는 `.metadata.json` 파일이 하나만 생성됩니다.
+생성된 `.ngfactory.js` 파일에서는 플랫 모듈 인덱스를 사용하여 기호를 임포트합니다. 기호는 라이브러리 인덱스로부터의 공공 API와 내부 기호를 포함합니다.
 
-By default, the `.ts` file supplied in the `files` field is assumed to be the library index.
-If more than one `.ts` file is specified, `libraryIndex` is used to select the file to use.
-If more than one `.ts` file is supplied without a `libraryIndex`, an error is produced.
+기본적으로 `files` 필드에 제공된 `.ts` 파일이 라이브러리 인덱스로 가정됩니다.
+`.ts` 파일이 둘以上 지정되면 `libraryIndex`가 사용되어 사용할 파일을 선택합니다.
+하나의 `libraryIndex` 없이 여러 개의 `.ts` 파일이 제공되면 오류가 발생합니다.
 
-A flat module index `.d.ts` and `.js` is created with the given `flatModuleOutFile` name in the same location as the library index `.d.ts` file.
+지정된 `flatModuleOutFile` 이름으로 라이브러리 인덱스 `.d.ts` 파일과 동일한 위치에 플랫 모듈 인덱스 `.d.ts` 및 `.js`가 생성됩니다.
 
-For example, if a library uses the `public_api.ts` file as the library index of the module, the `tsconfig.json` `files` field would be `["public_api.ts"]`.
-The `flatModuleOutFile` option could then be set, for example, to `"index.js"`, which produces `index.d.ts` and `index.metadata.json` files.
-The `module` field of the library's `package.json` would be `"index.js"` and the `typings` field would be `"index.d.ts"`.
+예를 들어, 라이브러리가 모듈의 라이브러리 인덱스으로 `public_api.ts` 파일을 사용하는 경우, `tsconfig.json`의 `files` 필드는 `["public_api.ts"]`가 됩니다.
+그런 다음 `flatModuleOutFile` 옵션은 예를 들어 `"index.js"`로 설정할 수 있습니다. 이는 `index.d.ts` 및 `index.metadata.json` 파일을 생성합니다.
+라이브러리의 `package.json`의 `module` 필드는 `"index.js"`가 되고, `typings` 필드는 `"index.d.ts"`가 됩니다.
 
 ### `fullTemplateTypeCheck`
 
-When `true`, the recommended value, enables the [binding expression validation](tools/cli/aot-compiler#binding-expression-validation) phase of the template compiler. This phase uses TypeScript to verify binding expressions.
-For more information, see [Template type checking](tools/cli/template-typecheck).
+`true`인 경우, 추천 값이며, 템플릿 컴파일러의 [바인딩 표현 검증](tools/cli/aot-compiler#binding-expression-validation) 단계를 활성화합니다. 이 단계는 TypeScript를 사용하여 바인딩 표현을 검증합니다.
+자세한 내용은 [템플릿 유형 검사](tools/cli/template-typecheck)를 참조하십시오.
 
-Default is `false`, but when you use the Angular CLI command `ng new --strict`, it is set to `true` in the new project's configuration.
+기본값은 `false`이지만, Angular CLI 명령 `ng new --strict`를 사용할 경우 새로운 프로젝트의 구성에서 `true`로 설정됩니다.
 
-IMPORTANT: The `fullTemplateTypeCheck` option has been deprecated in Angular 13 in favor of the `strictTemplates` family of compiler options.
+중요: `fullTemplateTypeCheck` 옵션은 Angular 13에서 `strictTemplates` 컴파일러 옵션 패밀리로 대체되었습니다.
 
 ### `generateCodeForLibraries`
 
-When `true`, creates factory files \(`.ngfactory.js` and `.ngstyle.js`\) for `.d.ts` files with a corresponding `.metadata.json` file. The default value is `true`.
+`true`인 경우, `.d.ts` 파일에 대해 `.ngfactory.js` 및 `.ngstyle.js` 팩토리 파일을 생성합니다. 기본값은 `true`입니다.
 
-When `false`, factory files are created only for `.ts` files.
-Do this when using factory summaries.
+`false`인 경우, 팩토리 파일은 `.ts` 파일에 대해서만 생성됩니다.
+팩토리 요약을 사용할 때 이렇게 하십시오.
 
 ### `preserveWhitespaces`
 
-When `false`, the default, removes blank text nodes from compiled templates, which results in smaller emitted template factory modules.
-Set to `true` to preserve blank text nodes.
+`false`인 경우, 기본값이며, 컴파일된 템플릿에서 공백 텍스트 노드를 제거하여 생성된 템플릿 팩토리 모듈의 크기를 줄입니다.
+공백 텍스트 노드를 유지하려면 `true`로 설정하십시오.
 
-HELPFUL: When using hydration, it is recommended that you use `preserveWhitespaces: false`, which is the default value. If you choose to enable preserving whitespaces by adding `preserveWhitespaces: true` to your tsconfig, it is possible you may encounter issues with hydration. This is not yet a fully supported configuration. Ensure this is also consistently set between the server and client tsconfig files. See the [hydration guide](guide/hydration#preserve-whitespaces) for more details.
+유용함: 수화(hydration)를 사용하는 경우, 기본값인 `preserveWhitespaces: false`를 사용하는 것이 좋습니다. `preserveWhitespaces: true`를 tsconfig에 추가하여 공백 유지 활성화를 선택하는 경우, 수화에서 문제가 발생할 수 있습니다. 이는 아직 완전히 지원되는 구성이 아닙니다. 서버와 클라이언트 tsconfig 파일 간에도 일관되게 설정되었는지 확인하십시오. 더 자세한 내용은 [수화 가이드](guide/hydration#preserve-whitespaces)를 참조하십시오.
 
 ### `skipMetadataEmit`
 
-When `true`, does not produce `.metadata.json` files.
-Default is `false`.
+`true`인 경우, `.metadata.json` 파일을 생성하지 않습니다.
+기본값은 `false`입니다.
 
-The `.metadata.json` files contain information needed by the template compiler from a `.ts` file that is not included in the `.d.ts` file produced by the TypeScript compiler.
-This information includes, for example, the content of annotations, such as a component's template, which TypeScript emits to the `.js` file but not to the `.d.ts` file.
+`.metadata.json` 파일은 TypeScript 컴파일러가 생성한 `.d.ts` 파일에 포함되지 않은 `.ts` 파일에서 템플릿 컴파일러에 필요한 정보를 포함합니다.
+이 정보에는 예를 들어 컴포넌트의 템플릿과 같은 주석의 내용이 포함되며, TypeScript는 이를 `.js` 파일에는 내보내지만 `.d.ts` 파일에는 내보내지 않습니다.
 
-You can set to `true` when using factory summaries, because the factory summaries include a copy of the information that is in the `.metadata.json` file.
+팩토리 요약을 사용할 때 `true`로 설정할 수 있습니다. 왜냐하면 팩토리 요약에는 `.metadata.json` 파일에 있는 정보의 복사본이 포함되어 있기 때문입니다.
 
-Set to `true` if you are using TypeScript's `--outFile` option, because the metadata files are not valid for this style of TypeScript output.
-The Angular community does not recommend using `--outFile` with Angular.
-Use a bundler, such as [webpack](https://webpack.js.org), instead.
+TypeScript의 `--outFile` 옵션을 사용할 때 `true`로 설정하십시오. 왜냐하면 메타데이터 파일은 이 스타일의 TypeScript 출력에 대해 유효하지 않기 때문입니다.
+Angular 커뮤니티는 Angular와 함께 `--outFile` 사용을 권장하지 않습니다.
+대신, [webpack](https://webpack.js.org)과 같은 번들러를 사용하십시오.
 
 ### `skipTemplateCodegen`
 
-When `true`, does not emit `.ngfactory.js` and `.ngstyle.js` files.
-This turns off most of the template compiler and disables the reporting of template diagnostics.
+`true`인 경우, `.ngfactory.js` 및 `.ngstyle.js` 파일을 생성하지 않습니다.
+이것은 대부분의 템플릿 컴파일러를 비활성화하고 템플릿 진단 보고를 비활성화합니다.
 
-Can be used to instruct the template compiler to produce `.metadata.json` files for distribution with an `npm` package. This avoids the production of `.ngfactory.js` and `.ngstyle.js` files that cannot be distributed to `npm`.
+이것은 템플릿 컴파일러에 `.metadata.json` 파일을 배포하기 위해 생성하도록 지시할 수 있습니다. 이는 `.ngfactory.js` 및 `.ngstyle.js` 파일의 생산을 피합니다.
 
-For library projects created with the Angular CLI, the development configuration default is `true`.
+Angular CLI로 생성된 라이브러리 프로젝트에서는 개발 구성 기본값이 `true`입니다.
 
 ### `strictMetadataEmit`
 
-When `true`, reports an error to the `.metadata.json` file if `"skipMetadataEmit"` is `false`.
-Default is `false`.
-Use only when `"skipMetadataEmit"` is `false` and `"skipTemplateCodegen"` is `true`.
+`true`인 경우, `"skipMetadataEmit"`가 `false`일 때 `.metadata.json` 파일에 오류를 보고합니다.
+기본값은 `false`입니다.
+`"skipMetadataEmit"`가 `false`이고 `"skipTemplateCodegen"`가 `true`인 경우에만 사용하십시오.
 
-This option is intended to verify the `.metadata.json` files emitted for bundling with an `npm` package.
-The validation is strict and can emit errors for metadata that would never produce an error when used by the template compiler.
-You can choose to suppress the error emitted by this option for an exported symbol by including `@dynamic` in the comment documenting the symbol.
+이 옵션은 npm 패키지와 함께 번들할 `.metadata.json` 파일이 내보내는 것을 검증하기 위해 설계되었습니다.
+검증은 엄격하며, 템플릿 컴파일러에서 사용 시 오류가 발생하지 않는 메타데이터의 경우에도 오류를 발생시킬 수 있습니다.
+기호를 문서화하는 주석 내에 `@dynamic`을 포함하여 이 옵션에 의해 발생된 오류를 억제할 수 있습니다.
 
-It is valid for `.metadata.json` files to contain errors.
-The template compiler reports these errors if the metadata is used to determine the contents of an annotation.
-The metadata collector cannot predict the symbols that are designed for use in an annotation. It preemptively includes error nodes in the metadata for the exported symbols.
-The template compiler can then use the error nodes to report an error if these symbols are used.
+`.metadata.json` 파일에 오류가 포함되는 것은 유효합니다.
+템플릿 컴파일러는 주석의 내용을 결정하기 위해 메타데이터가 사용될 경우 이러한 오류를 보고합니다.
+메타데이터 수집기는 주석에서 사용하도록 설계된 기호를 예측할 수 없습니다. 내보내진 기호에 대한 메타데이터에 사전 예방적으로 오류 노드를 포함합니다.
+템플릿 컴파일러는 이러한 기호가 사용될 때 오류를 보고하기 위해 오류 노드를 사용할 수 있습니다.
 
-If the client of a library intends to use a symbol in an annotation, the template compiler does not normally report this. It gets reported after the client actually uses the symbol.
-This option allows detection of these errors during the build phase of the library and is used, for example, in producing Angular libraries themselves.
+라이브러리의 클라이언트가 주석에서 기호를 사용하려는 경우, 템플릿 컴파일러는 일반적으로 이를 보고하지 않습니다. 클라이언트가 실제로 기호를 사용할 때 보고됩니다.
+이 옵션은 라이브러리의 빌드 단계에서 이러한 오류를 감지할 수 있도록 하며, 예를 들어 Angular 라이브러리 자체 생산에 사용됩니다.
 
-For library projects created with the Angular CLI, the development configuration default is `true`.
+Angular CLI로 생성된 라이브러리 프로젝트에서는 개발 구성 기본값이 `true`입니다.
 
 ### `strictInjectionParameters`
 
-When `true`, reports an error for a supplied parameter whose injection type cannot be determined.
-When `false`, constructor parameters of classes marked with `@Injectable` whose type cannot be resolved produce a warning.
-The recommended value is `true`, but the default value is `false`.
+`true`인 경우, 주입 유형을 확인할 수 없는 제공된 매개변수에 대해 오류를 보고합니다.
+`false`일 경우, `@Injectable`로 표시된 클래스의 생성자 매개변수는 유형을 확인할 수 없을 때 경고를 생성합니다.
+권장 값은 `true`이지만 기본값은 `false`입니다.
 
-When you use the Angular CLI command `ng new --strict`, it is set to `true` in the created project's configuration.
+Angular CLI 명령 `ng new --strict`를 사용할 때 생성된 프로젝트의 구성에서 `true`로 설정됩니다.
 
 ### `strictTemplates`
 
-When `true`, enables [strict template type checking](tools/cli/template-typecheck#strict-mode).
+`true`인 경우, [엄격한 템플릿 유형 검사를 활성화합니다](tools/cli/template-typecheck#strict-mode).
 
-The strictness flags that this option enables allow you to turn on and off specific types of strict template type checking.
-See [troubleshooting template errors](tools/cli/template-typecheck#troubleshooting-template-errors).
+이 옵션이 활성화하는 엄격성 플래그를 통해 특정 유형의 엄격한 템플릿 유형 검사를 켜고 끌 수 있습니다.
+[템플릿 오류 문제 해결](tools/cli/template-typecheck#troubleshooting-template-errors)을 참조하십시오.
 
-When you use the Angular CLI command `ng new --strict`, it is set to `true` in the new project's configuration.
+Angular CLI 명령 `ng new --strict`를 사용할 때 새로운 프로젝트의 구성에서 `true`로 설정됩니다.
 
 ### `strictStandalone`
 
-When `true`, reports an error if a component, directive, or pipe is not standalone.
+`true`인 경우, 컴포넌트, 지시어 또는 파이프가 독립적이지 않은 경우 오류를 보고합니다.
 
 ### `trace`
 
-When `true`, prints extra information while compiling templates.
-Default is `false`.
+`true`인 경우, 템플릿 컴파일 중 추가 정보를 출력합니다.
+기본값은 `false`입니다.
 
-## Command line options
+## 명령줄 옵션
 
-Most of the time, you interact with the Angular Compiler indirectly using [Angular CLI](reference/configs/angular-compiler-options). When debugging certain issues, you might find it useful to invoke the Angular Compiler directly.
-You can use the `ngc` command provided by the `@angular/compiler-cli` npm package to call the compiler from the command line.
+대부분의 경우, Angular 컴파일러와 간접적으로 상호 작용하는 [Angular CLI](reference/configs/angular-compiler-options)를 사용합니다. 특정 문제를 디버깅할 때 Angular 컴파일러를 직접 호출하는 것이 유용할 수 있습니다.
+커맨드 라인에서 컴파일러를 호출하기 위해 `@angular/compiler-cli` npm 패키지에서 제공하는 `ngc` 명령을 사용할 수 있습니다.
 
-The `ngc` command is a wrapper around TypeScript's `tsc` compiler command. The Angular Compiler is primarily configured through `tsconfig.json` while Angular CLI is primarily configured through `angular.json`.
+`ngc` 명령은 TypeScript의 `tsc` 컴파일러 명령을 감싸는 래퍼입니다. Angular 컴파일러는 주로 `tsconfig.json`을 통해 구성되며 Angular CLI는 주로 `angular.json`을 통해 구성됩니다.
 
-Besides the configuration file, you can also use [`tsc` command line options](https://www.typescriptlang.org/docs/handbook/compiler-options.html) to configure `ngc`.
+구성 파일 외에도 [`tsc` 명령줄 옵션](https://www.typescriptlang.org/docs/handbook/compiler-options.html)을 사용하여 `ngc`를 구성할 수 있습니다.
 
-[GuideI18nCommonPrepareMarkTextInComponentTemplate]: guide/i18n/prepare#mark-text-in-component-template "Mark text in component template - Prepare component for translation | Angular"
+[GuideI18nCommonPrepareMarkTextInComponentTemplate]: guide/i18n/prepare#mark-text-in-component-template "컴포넌트 템플릿에서 텍스트 표시 - 번역을 위한 구성 요소 준비 | Angular"
\ No newline at end of file
diff --git a/adev/src/content/reference/configs/file-structure.md b/adev/src/content/reference/configs/file-structure.md
index 947e75d9df9e..eed5f795564c 100644
--- a/adev/src/content/reference/configs/file-structure.md
+++ b/adev/src/content/reference/configs/file-structure.md
@@ -1,10 +1,10 @@
-# Workspace and project file structure
+# 작업공간 및 프로젝트 파일 구조
 
-You develop applications in the context of an Angular workspace.
-A workspace contains the files for one or more projects.
-A project is the set of files that comprise an application or a shareable library.
+Angular 작업공간의 맥락에서 애플리케이션을 개발합니다.
+작업공간은 하나 이상의 프로젝트 파일을 포함합니다.
+프로젝트는 애플리케이션 또는 공유 가능한 라이브러리를 구성하는 파일 집합입니다.
 
-The Angular CLI `ng new` command creates a workspace.
+Angular CLI의 `ng new` 명령은 작업공간을 생성합니다.
 
 <docs-code language="shell">
 
@@ -12,98 +12,97 @@ ng new my-project
 
 </docs-code>
 
-When you run this command, the CLI installs the necessary Angular npm packages and other dependencies in a new workspace, with a root-level application named *my-project*.
+이 명령을 실행하면 CLI는 새로운 작업공간에 필요한 Angular npm 패키지와 기타 의존성을 설치하며, *my-project*라는 이름의 루트 수준 애플리케이션을 생성합니다.
 
-By default, `ng new` creates an initial skeleton application at the root level of the workspace, along with its end-to-end tests.
-The skeleton is for a simple welcome application that is ready to run and easy to modify.
-The root-level application has the same name as the workspace, and the source files reside in the `src/` subfolder of the workspace.
+기본적으로 `ng new`는 작업공간의 루트 수준에 초기 스켈레톤 애플리케이션과 해당 엔드 투 엔드 테스트를 생성합니다.
+이 스켈레톤은 실행 준비가 되어 있고 수정하기 쉬운 간단한 환영 애플리케이션을 위한 것입니다.
+루트 수준 애플리케이션은 작업공간과 동일한 이름을 가지며, 소스 파일은 작업공간의 `src/` 하위 폴더에 위치합니다.
 
-This default behavior is suitable for a typical "multi-repo" development style where each application resides in its own workspace.
-Beginners and intermediate users are encouraged to use `ng new` to create a separate workspace for each application.
+이 기본 동작은 각 애플리케이션이 자신의 작업공간에 위치하는 전형적인 "다중 리포" 개발 스타일에 적합합니다.
+초보자와 중급 사용자는 각 애플리케이션에 대해 별도의 작업공간을 만들기 위해 `ng new`를 사용하는 것이 권장됩니다.
 
-Angular also supports workspaces with [multiple projects](#multiple-projects).
-This type of development environment is suitable for advanced users who are developing shareable libraries,
-and for enterprises that use a "monorepo" development style, with a single repository and global configuration for all Angular projects.
+Angular는 또한 [다수의 프로젝트](#multiple-projects)가 있는 작업공간을 지원합니다.
+이러한 개발 환경은 공유 가능한 라이브러리를 개발하고 있는 고급 사용자와 "모노레포" 개발 스타일(단일 리포지토리 및 모든 Angular 프로젝트에 대한 전역 구성)을 사용하는 기업에 적합합니다.
 
-To set up a monorepo workspace, you should skip creating the root application.
-See [Setting up for a multi-project workspace](#multiple-projects) below.
+모노레포 작업공간을 설정하려면 루트 애플리케이션 생성을 건너뛰어야 합니다.
+아래의 [다중 프로젝트 작업공간 설정](#multiple-projects)을 참조하세요.
 
-## Workspace configuration files
+## 작업공간 구성 파일
 
-All projects within a workspace share a [configuration](reference/configs/workspace-config).
-The top level of the workspace contains workspace-wide configuration files, configuration files for the root-level application, and subfolders for the root-level application source and test files.
+작업공간 내의 모든 프로젝트는 [구성](reference/configs/workspace-config)을 공유합니다.
+작업공간의 최상위에는 작업공간 전체 구성 파일, 루트 수준 애플리케이션의 구성 파일 및 루트 수준 애플리케이션 소스 및 테스트 파일을 위한 하위 폴더가 포함됩니다.
 
-| Workspace configuration files | Purpose                                                                                                                                                                                                                                                                                                          |
-|:---                           |:---                                                                                                                                                                                                                                                                                                              |
-| `.editorconfig`               | Configuration for code editors. See [EditorConfig](https://editorconfig.org).                                                                                                                                                                                                                                    |
-| `.gitignore`                  | Specifies intentionally untracked files that [Git](https://git-scm.com) should ignore.                                                                                                                                                                                                                           |
-| `README.md`                   | Documentation for the workspace.                                                                                                                                                                                                                                                                                 |
-| `angular.json`                | CLI configuration for all projects in the workspace, including configuration options for how to build, serve, and test each project. For details, see [Angular Workspace Configuration](reference/configs/workspace-config).                                                                                     |
-| `package.json`                | Configures [npm package dependencies](reference/configs/npm-packages) that are available to all projects in the workspace. See [npm documentation](https://docs.npmjs.com/files/package.json) for the specific format and contents of this file.                                                                 |
-| `package-lock.json`           | Provides version information for all packages installed into `node_modules` by the npm client. See [npm documentation](https://docs.npmjs.com/files/package-lock.json) for details.                                                                                                                              |
-| `src/`                        | Source files for the root-level application project.                                                                                                                                                                                                                                                             |
-| `public/`                     | Contains image and other asset files to be served as static files by the dev server and copied as-is when you build your application.                                                                                             |
-| `node_modules/`               | Installed [npm packages](reference/configs/npm-packages) for the entire workspace. Workspace-wide `node_modules` dependencies are visible to all projects.                                                                                                                                                       |
-| `tsconfig.json`               | The base [TypeScript](https://www.typescriptlang.org) configuration for projects in the workspace. All other configuration files inherit from this base file. For more information, see the [relevant TypeScript documentation](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#tsconfig-bases). |
+| 작업공간 구성 파일          | 목적                                                                                                                                                                                                                         |
+|:---                          |:---                                                                                                                                                                                                                           |
+| `.editorconfig`              | 코드 편집기를 위한 구성. [EditorConfig](https://editorconfig.org)를 참조하세요.                                                                                                                                                  |
+| `.gitignore`                 | [Git](https://git-scm.com)가 무시해야 하는 의도적으로 추적되지 않은 파일을 지정합니다.                                                                                                                                         |
+| `README.md`                  | 작업공간에 대한 문서.                                                                                                                                                                                                          |
+| `angular.json`               | 모든 프로젝트를 위한 CLI 구성으로, 각 프로젝트를 빌드하고 제공하고 테스트하는 방법에 대한 구성 옵션을 포함합니다. 자세한 내용은 [Angular 작업공간 구성](reference/configs/workspace-config)을 참조하세요.                                     |
+| `package.json`               | 작업공간 내의 모든 프로젝트에서 사용할 수 있는 [npm 패키지 의존성](reference/configs/npm-packages)을 구성합니다. 이 파일의 구체적인 형식 및 내용에 대해서는 [npm 문서](https://docs.npmjs.com/files/package.json)를 참조하세요.                           |
+| `package-lock.json`          | npm 클라이언트에 의해 `node_modules`에 설치된 모든 패키지에 대한 버전 정보를 제공합니다. 자세한 내용은 [npm 문서](https://docs.npmjs.com/files/package-lock.json)를 참조하세요.                                                                 |
+| `src/`                       | 루트 수준 애플리케이션 프로젝트의 소스 파일.                                                                                                                                                                                |
+| `public/`                    | 애플리케이션을 빌드할 때 있는 그대로 복사되고 개발 서버에 의해 정적 파일로 제공될 이미지 및 기타 자산 파일을 포함합니다.                                                                                          |
+| `node_modules/`              | 전체 작업공간을 위한 설치된 [npm 패키지](reference/configs/npm-packages). 작업공간 전체의 `node_modules` 의존성은 모든 프로젝트에 표시됩니다.                                                                                                   |
+| `tsconfig.json`              | 작업공간 내 프로젝트에 대한 기본 [TypeScript](https://www.typescriptlang.org) 구성입니다. 모든 다른 구성 파일은 이 기본 파일을 상속합니다. 추가 정보는 [관련 TypeScript 문서](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#tsconfig-bases)를 참조하세요. |
 
-## Application project files
+## 애플리케이션 프로젝트 파일
 
-By default, the CLI command `ng new my-app` creates a workspace folder named "my-app" and generates a new application skeleton in a `src/` folder at the top level of the workspace.
-A newly generated application contains source files for a root module, with a root component and template.
+기본적으로, CLI 명령 `ng new my-app`는 "my-app"이라는 이름의 작업공간 폴더를 생성하고 작업공간의 최상위 `src/` 폴더에 새 애플리케이션 스켈레톤을 생성합니다.
+새로 생성된 애플리케이션은 루트 모듈을 위한 소스 파일과 루트 구성 요소 및 템플릿을 포함합니다.
 
-When the workspace file structure is in place, you can use the `ng generate` command on the command line to add functionality and data to the application.
-This initial root-level application is the *default app* for CLI commands (unless you change the default after creating [additional apps](#multiple-projects)).
+작업공간 파일 구조가 설정되면 명령줄에서 `ng generate` 명령을 사용하여 애플리케이션에 기능과 데이터를 추가할 수 있습니다.
+이 초기 루트 수준 애플리케이션은 CLI 명령의 *기본 애플리케이션*입니다 (추가 애플리케이션을 생성한 후 기본값을 변경하지 않는 한) [다중 프로젝트](#multiple-projects).
 
-For a single-application workspace, the `src` subfolder of the workspace contains the source files (application logic, data, and assets) for the root application.
-For a multi-project workspace, additional projects in the `projects` folder contain a `project-name/src/` subfolder with the same structure.
+단일 애플리케이션 작업공간의 경우, 작업공간의 `src` 하위 폴더는 루트 애플리케이션의 소스 파일(애플리케이션 로직, 데이터 및 자산)을 포함합니다.
+다중 프로젝트 작업공간의 경우, `projects` 폴더 내의 추가 프로젝트는 동일한 구조의 `project-name/src/` 하위 폴더를 포함합니다.
 
-### Application source files
+### 애플리케이션 소스 파일
 
-Files at the top level of `src/` support running your application.
-Subfolders contain the application source and application-specific configuration.
+`src/`의 최상위 파일은 애플리케이션을 실행하는 지원을 제공합니다.
+하위 폴더는 애플리케이션 소스 및 애플리케이션 특정 구성을 포함합니다.
 
-| Application support files | Purpose                                                                                                                                                                                                                           |
-|:---                       |:---                                                                                                                                                                                                                               |
-| `app/`                    | Contains the component files in which your application logic and data are defined. See details [below](#app-src).                                                                                                                 |
-| `favicon.ico`             | An icon to use for this application in the bookmark bar.                                                                                                                                                                          |
-| `index.html`              | The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any `<script>` or`<link>` tags here manually. |
-| `main.ts`                 | The main entry point for your application.                                                                                                                                                                                        |
-| `styles.css`              | Global CSS styles applied to the entire application.                                                                                                                                                                              |
+| 애플리케이션 지원 파일       | 목적                                                                                                                                                                                                                                       |
+|:---                          |:---                                                                                                                                                                                                                                       |
+| `app/`                       | 애플리케이션 로직과 데이터가 정의된 구성 요소 파일을 포함합니다. [아래](#app-src)에서 세부정보를 참조하세요.                                                                                                                          |
+| `favicon.ico`               | 북마크 바에서 이 애플리케이션에 사용할 아이콘입니다.                                                                                                                                                                                    |
+| `index.html`                | 누군가가 귀하의 사이트를 방문할 때 제공되는 주요 HTML 페이지입니다. CLI는 애플리케이션을 빌드할 때 모든 JavaScript 및 CSS 파일을 자동으로 추가하므로, 일반적으로 여기에서 `<script>` 또는 `<link>` 태그를 수동으로 추가할 필요가 없습니다. |
+| `main.ts`                   | 애플리케이션의 주요 진입점입니다.                                                                                                                                                                                                         |
+| `styles.css`                | 전체 애플리케이션에 적용되는 전역 CSS 스타일입니다.                                                                                                                                                                                     |
 
-Inside the `src` folder, the `app` folder contains your project's logic and data.
-Angular components, templates, and styles go here.
+`src` 폴더 안에 `app` 폴더가 프로젝트의 로직과 데이터를 포함하고 있습니다.
+Angular 구성 요소, 템플릿, 스타일이 여기에 들어갑니다.
 
-| `src/app/` files        | Purpose                                                                                                                                                                                                                                                                            |
-|:---                     |:---                                                                                                                                                                                                                                                                                |
-| `app.config.ts`         | Defines the application configuration that tells Angular how to assemble the application. As you add more providers to the app, they should be declared here.<br><br>*Only generated when using the `--standalone` option.*                                                        |
-| `app.component.ts`      | Defines the application's root component, named `AppComponent`. The view associated with this root component becomes the root of the view hierarchy as you add components and services to your application.                                                                        |
-| `app.component.html`    | Defines the HTML template associated with `AppComponent`.                                                                                                                                                                                                                          |
-| `app.component.css`     | Defines the CSS stylesheet for `AppComponent`.                                                                                                                                                                                                                                     |
-| `app.component.spec.ts` | Defines a unit test for `AppComponent`.                                                                                                                                                                                                                                            |
-| `app.module.ts`         | Defines the root module, named `AppModule`, that tells Angular how to assemble the application. Initially declares only the `AppComponent`. As you add more components to the app, they must be declared here.<br><br>*Only generated when using the `--standalone false` option.* |
-| `app.routes.ts`         | Defines the application's routing configuration.                                                                                                                                                                                                                                   |
+| `src/app/` 파일          | 목적                                                                                                                                                                                                                                      |
+|:---                      |:---                                                                                                                                                                                                                                      |
+| `app.config.ts`         | Angular에 애플리케이션을 조합하는 방법을 알려주는 애플리케이션 구성을 정의합니다. 앱에 더 많은 공급자를 추가할 때, 여기에 선언해야 합니다.<br><br>*`--standalone` 옵션을 사용할 때만 생성됩니다.*                                     |
+| `app.component.ts`      | `AppComponent`라는 애플리케이션의 루트 구성 요소를 정의합니다. 이 루트 구성 요소와 관련된 뷰는 구성 요소 및 서비스를 애플리케이션에 추가할 때 뷰 계층의 루트가 됩니다.                                          |
+| `app.component.html`    | `AppComponent`와 관련된 HTML 템플릿을 정의합니다.                                                                                                                                                                                     |
+| `app.component.css`     | `AppComponent`의 CSS 스타일 시트를 정의합니다.                                                                                                                                                                                         |
+| `app.component.spec.ts` | `AppComponent`에 대한 단위 테스트를 정의합니다.                                                                                                                                                                                       |
+| `app.module.ts`         | Angular에 애플리케이션을 조합하는 방법을 알려주는 `AppModule`이라는 루트 모듈을 정의합니다. 처음에는 `AppComponent`만 선언합니다. 애플리케이션에 더 많은 구성 요소를 추가할 때, 여기에 선언해야 합니다.<br><br>*`--standalone false` 옵션을 사용할 때만 생성됩니다.* |
+| `app.routes.ts`         | 애플리케이션의 라우팅 구성을 정의합니다.                                                                                                                                                                                                 |
 
-### Application configuration files
+### 애플리케이션 구성 파일
 
-Application-specific configuration files for the root application reside at the workspace root level.
-For a multi-project workspace, project-specific configuration files are in the project root, under `projects/project-name/`.
+루트 애플리케이션에 대한 애플리케이션 특정 구성 파일은 작업공간 루트 수준에 위치합니다.
+다중 프로젝트 작업공간의 경우, 프로젝트 특정 구성 파일은 `projects/project-name/` 아래의 프로젝트 루트에 위치합니다.
 
-Project-specific [TypeScript](https://www.typescriptlang.org) configuration files inherit from the workspace-wide `tsconfig.json`.
+프로젝트 특정 [TypeScript](https://www.typescriptlang.org) 구성 파일은 작업공간 전체의 `tsconfig.json`을 상속합니다.
 
-| Application-specific configuration files | Purpose                                                                                                                                                                                             |
-|:---                                      |:---                                                                                                                                                                                                 |
-| `tsconfig.app.json`                      | Application-specific [TypeScript configuration](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html), including [Angular compiler options](reference/configs/angular-compiler-options). |
-| `tsconfig.spec.json`                     | [TypeScript configuration](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for application tests.                                                                                  |
+| 애플리케이션 특정 구성 파일         | 목적                                                                                                                                                                                                                         |
+|:---                                 |:---                                                                                                                                                                                                                           |
+| `tsconfig.app.json`                 | 애플리케이션 특정 [TypeScript 구성](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html), 여기에는 [Angular 컴파일러 옵션](reference/configs/angular-compiler-options)이 포함됩니다.                                                   |
+| `tsconfig.spec.json`                | 애플리케이션 테스트를 위한 [TypeScript 구성](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).                                                                                                               |
 
-## Multiple projects
+## 다중 프로젝트
 
-A multi-project workspace is suitable for an organization that uses a single repository and global configuration for multiple Angular projects (the "monorepo" model).
-A multi-project workspace also supports library development.
+다중 프로젝트 작업공간은 여러 Angular 프로젝트에 대한 단일 리포지토리 및 전역 구성을 사용하는 조직에 적합합니다( "모노레포" 모델).
+다중 프로젝트 작업공간은 또한 라이브러리 개발을 지원합니다.
 
-### Setting up for a multi-project workspace
+### 다중 프로젝트 작업공간 설정
 
-If you intend to have multiple projects in a workspace, you can skip the initial application generation when you create the workspace, and give the workspace a unique name.
-The following command creates a workspace with all of the workspace-wide configuration files, but no root-level application.
+작업공간에 여러 프로젝트를 두려는 경우, 작업공간을 생성할 때 초기 애플리케이션 생성을 건너뛰고, 작업공간에 고유한 이름을 부여할 수 있습니다.
+다음 명령은 모든 작업공간 구성 파일이 포함된 작업공간을 생성하지만 루트 수준 애플리케이션은 없습니다.
 
 <docs-code language="shell">
 
@@ -111,7 +110,7 @@ ng new my-workspace --no-create-application
 
 </docs-code>
 
-You can then generate applications and libraries with names that are unique within the workspace.
+이후, 작업공간 내에서 고유한 이름을 가진 애플리케이션과 라이브러리를 생성할 수 있습니다.
 
 <docs-code language="shell">
 
@@ -121,37 +120,37 @@ ng generate library my-lib
 
 </docs-code>
 
-### Multiple project file structure
+### 다중 프로젝트 파일 구조
 
-The first explicitly generated application goes into the `projects` folder along with all other projects in the workspace.
-Newly generated libraries are also added under `projects`.
-When you create projects this way, the file structure of the workspace is entirely consistent with the structure of the [workspace configuration file](reference/configs/workspace-config), `angular.json`.
+첫 번째로 명시적으로 생성된 애플리케이션은 작업공간의 `projects` 폴더에 다른 모든 프로젝트와 함께 위치합니다.
+새롭게 생성된 라이브러리도 `projects` 아래에 추가됩니다.
+이렇게 프로젝트를 생성하면 작업공간의 파일 구조가 [작업공간 구성 파일](reference/configs/workspace-config), `angular.json`의 구조와 완전히 일치합니다.
 
 ```markdown
 my-workspace/
-  ├── …                (workspace-wide configuration files)
-  └── projects/        (applications and libraries)
-      ├── my-app/      (an explicitly generated application)
-      │   └── …        (application-specific code and configuration)
-      └── my-lib/      (a generated library)
-          └── …        (library-specific code and configuration)
+  ├── …                (작업공간 전체의 구성 파일)
+  └── projects/        (애플리케이션과 라이브러리)
+      ├── my-app/      (명시적으로 생성된 애플리케이션)
+      │   └── …        (애플리케이션 특정 코드와 구성)
+      └── my-lib/      (생성된 라이브러리)
+          └── …        (라이브러리 특정 코드와 구성)
 ```
 
-## Library project files
+## 라이브러리 프로젝트 파일
 
-When you generate a library using the CLI (with a command such as `ng generate library my-lib`), the generated files go into the `projects/` folder of the workspace.
-For more information about creating your own libraries, see  [Creating Libraries](tools/libraries/creating-libraries).
+CLI를 사용하여 라이브러리를 생성할 때(예: `ng generate library my-lib` 명령 사용) 생성된 파일은 작업공간의 `projects/` 폴더에 들어갑니다.
+자신의 라이브러리를 만드는 방법에 대한 자세한 정보는 [라이브러리 만들기](tools/libraries/creating-libraries)를 참조하세요.
 
-Unlike an application, a library has its own `package.json` configuration file.
+애플리케이션과 달리, 라이브러리에는 자체 `package.json` 구성 파일이 있습니다.
 
-Under the `projects/` folder, the `my-lib` folder contains your library code.
+`projects/` 폴더 아래의 `my-lib` 폴더는 라이브러리 코드를 포함합니다.
 
-| Library source files     | Purpose                                                                                                                                                                                         |
-|:---                      |:---                                                                                                                                                                                             |
-| `src/lib`                | Contains your library project's logic and data. Like an application project, a library project can contain components, services, modules, directives, and pipes.                                |
-| `src/public-api.ts`      | Specifies all files that are exported from your library.                                                                                                                                        |
-| `ng-package.json`        | Configuration file used by [ng-packagr](https://github.com/ng-packagr/ng-packagr) for building your library.                                                                                    |
-| `package.json`           | Configures [npm package dependencies](reference/configs/npm-packages) that are required for this library.                                                                                       |
-| `tsconfig.lib.json`      | Library-specific [TypeScript Configuration](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html), including [Angular compiler options](reference/configs/angular-compiler-options). |
-| `tsconfig.lib.prod.json` | Library-specific [TypeScript Configuration](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) that is used when building the library in production mode.                         |
-| `tsconfig.spec.json`     | [TypeScript Configuration](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for the library's unit tests.                                                                       |
+| 라이브러리 소스 파일          | 목적                                                                                                                                                                                        |
+|:---                         |:---                                                                                                                                                                                        |
+| `src/lib`                   | 라이브러리 프로젝트의 로직과 데이터를 포함합니다. 애플리케이션 프로젝트와 마찬가지로, 라이브러리 프로젝트는 구성 요소, 서비스, 모듈, 지시자 및 파이프를 포함할 수 있습니다.                      |
+| `src/public-api.ts`         | 라이브러리에서 내보내는 모든 파일을 지정합니다.                                                                                                                                           |
+| `ng-package.json`           | 라이브러리를 빌드하기 위해 [ng-packagr](https://github.com/ng-packagr/ng-packagr)에서 사용하는 구성 파일입니다.                                                                                                                  |
+| `package.json`              | 이 라이브러리에 필요한 [npm 패키지 의존성](reference/configs/npm-packages)을 구성합니다.                                                                                                         |
+| `tsconfig.lib.json`         | 라이브러리 특정 [TypeScript 구성](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html), 여기에는 [Angular 컴파일러 옵션](reference/configs/angular-compiler-options)이 포함됩니다.         |
+| `tsconfig.lib.prod.json`    | 라이브러리를 프로덕션 모드로 빌드할 때 사용되는 라이브러리 특정 [TypeScript 구성](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)입니다.                                  |
+| `tsconfig.spec.json`        | 라이브러리의 단위 테스트를 위한 [TypeScript 구성](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).                                                                           |
\ No newline at end of file
diff --git a/adev/src/content/reference/configs/npm-packages.md b/adev/src/content/reference/configs/npm-packages.md
index 7046bda0fdc3..baf89eba8684 100644
--- a/adev/src/content/reference/configs/npm-packages.md
+++ b/adev/src/content/reference/configs/npm-packages.md
@@ -1,43 +1,43 @@
-# Workspace npm dependencies
+# 워크스페이스 npm 의존성
 
-The Angular Framework, Angular CLI, and components used by Angular applications are packaged as [npm packages](https://docs.npmjs.com/getting-started/what-is-npm "What is npm?") and distributed using the [npm registry](https://docs.npmjs.com).
+Angular 프레임워크, Angular CLI 및 Angular 애플리케이션에서 사용하는 구성 요소는 [npm 패키지](https://docs.npmjs.com/getting-started/what-is-npm "npm이란?")로 패키징되어 [npm 레지스트리](https://docs.npmjs.com)를 통해 배포됩니다.
 
-You can download and install these npm packages by using the [npm CLI client](https://docs.npmjs.com/cli/install).
-By default, Angular CLI uses the npm client.
+[npm CLI 클라이언트](https://docs.npmjs.com/cli/install)를 사용하여 이러한 npm 패키지를 다운로드하고 설치할 수 있습니다.
+기본적으로 Angular CLI는 npm 클라이언트를 사용합니다.
 
-HELPFUL: See [Local Environment Setup](tools/cli/setup-local "Setting up for Local Development") for information about the required versions and installation of `Node.js` and `npm`.
+도움이 되는 정보: `Node.js` 및 `npm`의 필수 버전 및 설치에 대한 정보는 [로컬 환경 설정](tools/cli/setup-local "로컬 개발을 위한 설정")을 참조하세요.
 
-If you already have projects running on your machine that use other versions of Node.js and npm, consider using [nvm](https://github.com/creationix/nvm) to manage the multiple versions of Node.js and npm.
+다른 버전의 Node.js 및 npm을 사용하는 프로젝트가 이미 기계에서 실행 중인 경우 [nvm](https://github.com/creationix/nvm)을 사용하여 여러 버전의 Node.js 및 npm을 관리하는 것을 고려하세요.
 
 ## `package.json`
 
-`npm` installs the packages identified in a [`package.json`](https://docs.npmjs.com/files/package.json) file.
+`npm`은 [`package.json`](https://docs.npmjs.com/files/package.json) 파일에 명시된 패키지를 설치합니다.
 
-The CLI command `ng new` creates a `package.json` file when it creates the new workspace.
-This `package.json` is used by all projects in the workspace, including the initial application project that is created by the CLI when it creates the workspace.
-Libraries created with `ng generate library` will include their own `package.json` file.
+CLI 명령 `ng new`는 새 워크스페이스를 만들 때 `package.json` 파일을 생성합니다.
+이 `package.json`은 워크스페이스의 모든 프로젝트에서 사용되며, CLI가 워크스페이스를 만들 때 생성한 초기 애플리케이션 프로젝트도 포함됩니다.
+`ng generate library`로 생성된 라이브러리는 자체 `package.json` 파일을 포함합니다.
 
-Initially, this `package.json` includes *a starter set of packages*, some of which are required by Angular and others that support common application scenarios.
-You add packages to `package.json` as your application evolves.
+초기에는 이 `package.json`이 Angular에서 필수인 일부 패키지와 일반 애플리케이션 시나리오를 지원하는 다른 패키지를 포함한 *스타터 패키지 세트*를 포함합니다.
+응용 프로그램이 발전함에 따라 `package.json`에 패키지를 추가합니다.
 
-## Default Dependencies
+## 기본 의존성
 
-The following Angular packages are included as dependencies in the default `package.json` file for a new Angular workspace.
-For a complete list of Angular packages, see the [API reference](api).
+다음 Angular 패키지는 새로운 Angular 워크스페이스의 기본 `package.json` 파일에 의존성으로 포함됩니다.
+Angular 패키지의 전체 목록은 [API 참조](api)를 참조하세요.
 
-| Package name                                                              | Details                                                                                                                                                                                        |
+| 패키지 이름                                                              | 세부정보                                                                                                                                                                                        |
 |:---                                                                       |:---                                                                                                                                                                                            |
-| [`@angular/animations`](api#animations)                                   | Angular's animations library makes it easy to define and apply animation effects such as page and list transitions. For more information, see the [Animations guide](guide/animations).        |
-| [`@angular/common`](api#common)                                           | The commonly-needed services, pipes, and directives provided by the Angular team.                                                                                                              |
-| `@angular/compiler`                                                       | Angular's template compiler. It understands Angular templates and can convert them to code that makes the application run.                                                                     |
-| `@angular/compiler-cli`                                                   | Angular's compiler which is invoked by the Angular CLI's `ng build` and `ng serve` commands. It processes Angular templates with `@angular/compiler` inside a standard TypeScript compilation. |
-| [`@angular/core`](api#core)                                               | Critical runtime parts of the framework that are needed by every application. Includes all metadata decorators such as `@Component`, dependency injection, and component lifecycle hooks.      |
-| [`@angular/forms`](api#forms)                                             | Support for both [template-driven](guide/forms) and [reactive forms](guide/forms/reactive-forms). See [Introduction to forms](guide/forms).                                                    |
-| [`@angular/platform-browser`](api#platform-browser)                       | Everything DOM and browser related, especially the pieces that help render into the DOM.                                                                                                       |
-| [`@angular/platform-browser-dynamic`](api#platform-browser-dynamic)       | Includes [providers](api/core/Provider) and methods to compile and run the application on the client using the [JIT compiler](tools/cli/aot-compiler#choosing-a-compiler).                     |
-| [`@angular/router`](api#router)                                           | The router module navigates among your application pages when the browser URL changes. For more information, see [Routing and Navigation](guide/routing).                                       |
-| [`@angular/cli`](https://github.com/angular/angular-cli)                  | Contains the Angular CLI binary for running `ng` commands.                                                                                                                                     |
-| [`@angular-devkit/build-angular`](https://github.com/angular/angular-cli) | Contains default CLI builders for bundling, testing, and serving Angular applications and libraries.                                                                                           |
-| `rxjs`                                                                    | A library for reactive programming using `Observables`.                                                                                                                                        |
-| [`zone.js`](https://github.com/angular/zone.js)                           | Angular relies on `zone.js`` to run Angular's change detection processes when native JavaScript operations raise events.                                                                       |
-| [`typescript`](https://www.npmjs.com/package/typescript)                  | The TypeScript compiler, language server, and built-in type definitions.                                                                                                                       |
+| [`@angular/animations`](api#animations)                                   | Angular의 애니메이션 라이브러리는 페이지 및 목록 전환과 같은 애니메이션 효과를 정의하고 적용하는 것을 쉽게 만듭니다. 더 많은 정보는 [애니메이션 가이드](guide/animations)를 참조하세요.        |
+| [`@angular/common`](api#common)                                           | Angular 팀에서 제공하는 일반적으로 필요한 서비스, 파이프 및 지시문입니다.                                                                                                              |
+| `@angular/compiler`                                                       | Angular의 템플릿 컴파일러. Angular 템플릿을 이해하고 애플리케이션을 실행하는 코드를 변환할 수 있습니다.                                                                     |
+| `@angular/compiler-cli`                                                   | Angular CLI의 `ng build` 및 `ng serve` 명령에 의해 호출되는 Angular의 컴파일러. Angular 템플릿을 `@angular/compiler`로 처리하여 표준 TypeScript 컴파일 내에서 실행합니다. |
+| [`@angular/core`](api#core)                                               | 모든 애플리케이션에 필요한 프레임워크의 중요한 런타임 부분. `@Component`와 같은 모든 메타데이터 장식자, 의존성 주입 및 구성 요소 생명주기 훅을 포함합니다.      |
+| [`@angular/forms`](api#forms)                                             | [템플릿 기반](guide/forms) 및 [반응형 양식](guide/forms/reactive-forms)을 모두 지원합니다. [양식 소개](guide/forms)를 참조하세요.                                                    |
+| [`@angular/platform-browser`](api#platform-browser)                       | DOM 및 브라우저와 관련된 모든 것, 특히 DOM에 렌더링하는 데 도움이 되는 구성 요소들입니다.                                                                                                       |
+| [`@angular/platform-browser-dynamic`](api#platform-browser-dynamic)       | [JIT 컴파일러](tools/cli/aot-compiler#choosing-a-compiler)를 사용하여 클라이언트에서 애플리케이션을 컴파일하고 실행하기 위한 [제공자](api/core/Provider) 및 메서드를 포함합니다.                     |
+| [`@angular/router`](api#router)                                           | 브라우저 URL이 변경될 때 애플리케이션 페이지 간을 탐색하는 라우터 모듈입니다. 더 많은 정보는 [라우팅 및 탐색](guide/routing)을 참조하세요.                                       |
+| [`@angular/cli`](https://github.com/angular/angular-cli)                  | `ng` 명령을 실행하는 Angular CLI 이진 파일이 포함되어 있습니다.                                                                                                                                     |
+| [`@angular-devkit/build-angular`](https://github.com/angular/angular-cli) | Angular 애플리케이션 및 라이브러리를 번들링, 테스트 및 제공하기 위한 기본 CLI 빌더가 포함되어 있습니다.                                                                                           |
+| `rxjs`                                                                    | `Observables`를 사용하는 반응형 프로그래밍을 위한 라이브러리입니다.                                                                                                                                        |
+| [`zone.js`](https://github.com/angular/zone.js)                           | Angular는 네이티브 JavaScript 작업이 이벤트를 발생시킬 때 Angular의 변경 감지 프로세스를 실행하기 위해 `zone.js`에 의존합니다.                                                                       |
+| [`typescript`](https://www.npmjs.com/package/typescript)                  | TypeScript 컴파일러, 언어 서버 및 내장형 타입 정의입니다.                                                                                                                       |
\ No newline at end of file
diff --git a/adev/src/content/reference/configs/workspace-config.md b/adev/src/content/reference/configs/workspace-config.md
index 7eb506d59f6f..aa5f124fa40c 100644
--- a/adev/src/content/reference/configs/workspace-config.md
+++ b/adev/src/content/reference/configs/workspace-config.md
@@ -1,85 +1,81 @@
-# Angular workspace configuration
+# Angular 작업 공간 구성
 
-The `angular.json` file at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults. These are used for build and development tools provided by the Angular CLI.
-Path values given in the configuration are relative to the root workspace directory.
+Angular 작업 공간의 루트 수준에 있는 `angular.json` 파일은 작업 공간 전체 및 프로젝트별 구성 기본값을 제공합니다. 이러한 구성은 Angular CLI에서 제공하는 빌드 및 개발 도구에 사용됩니다. 구성에 제공된 경로 값은 작업 공간 디렉토리의 루트를 기준으로 상대적입니다.
 
-## General JSON structure
+## 일반 JSON 구조
 
-At the top-level of `angular.json`, a few properties configure the workspace and a `projects` section contains the remaining per-project configuration options.
-You can override Angular CLI defaults set at the workspace level through defaults set at the project level.
-You can also override defaults set at the project level using the command line.
+`angular.json`의 최상위에서 몇 가지 속성이 작업 공간을 구성하고 `projects` 섹션은 나머지 프로젝트별 구성 옵션을 포함합니다. 프로젝트 수준에서 설정된 기본값을 통해 작업 공간 수준에서 Angular CLI 기본값을 재정의할 수 있습니다. 명령줄을 사용하여 프로젝트 수준에서 설정된 기본값도 재정의할 수 있습니다.
 
-The following properties, at the top-level of the file, configure the workspace.
+파일의 최상위에서 다음 속성들은 작업 공간을 구성합니다.
 
-| Properties       | Details                                                                                                                                                                                        |
-|:---              |:---                                                                                                                                                                                            |
-| `version`        | The configuration-file version.                                                                                                                                                                |
-| `newProjectRoot` | Path where new projects are created through tools like `ng generate application` or `ng generate library`. Path can be absolute or relative to the workspace directory. Defaults to `projects` |
-| `cli`            | A set of options that customize the [Angular CLI](tools/cli). See [Angular CLI configuration options](#angular-cli-configuration-options) below.                                               |
-| `schematics`     | A set of [schematics](tools/cli/schematics) that customize the `ng generate` sub-command option defaults for this workspace. See [schematics](#schematics) below.                              |
-| `projects`       | Contains a subsection for each application or library in the workspace, with project-specific configuration options.                                                                           |
+| 속성             | 세부정보                                                                                                                                                                          |
+|:---              |:---                                                                                                                                                                              |
+| `version`        | 구성 파일 버전입니다.                                                                                                                                                          |
+| `newProjectRoot` | `ng generate application` 또는 `ng generate library`와 같은 도구를 통해 새로운 프로젝트가 생성되는 경로입니다. 경로는 작업 공간 디렉토리에 대해 절대적이거나 상대적일 수 있습니다. 기본값은 `projects`입니다. |
+| `cli`            | [Angular CLI](tools/cli)를 사용자 정의하는 옵션 세트입니다. 아래의 [Angular CLI 구성 옵션](#angular-cli-configuration-options)을 참조하십시오.                               |
+| `schematics`     | 이 작업 공간에 대한 `ng generate` 하위 명령 옵션 기본값을 사용자 정의하는 [schematics](tools/cli/schematics) 세트입니다. 아래의 [schematics](#schematics)을 참조하십시오.                              |
+| `projects`       | 작업 공간 내의 각 애플리케이션 또는 라이브러리에 대한 하위 섹션을 포함하며, 프로젝트별 구성 옵션을 포함합니다.                                                                 |
 
-The initial application that you create with `ng new app-name` is listed under "projects":
+`ng new app-name`으로 생성하는 초기 애플리케이션은 "projects" 아래에 나열됩니다:
 
-When you create a library project with `ng generate library`, the library project is also added to the `projects` section.
+`ng generate library`로 라이브러리 프로젝트를 만들면, 라이브러리 프로젝트도 `projects` 섹션에 추가됩니다.
 
-HELPFUL: The `projects` section of the configuration file does not correspond exactly to the workspace file structure.
+도움말: 구성 파일의 `projects` 섹션은 작업 공간 파일 구조와 정확히 일치하지 않습니다.
 <!-- markdownlint-disable-next-line MD032 -->
-* The initial application created by `ng new` is at the top level of the workspace file structure.
-* Other applications and libraries are under the `projects` directory by default.
+* `ng new`로 생성된 초기 애플리케이션은 작업 공간 파일 구조의 최상위에 있습니다.
+* 다른 애플리케이션과 라이브러리는 기본적으로 `projects` 디렉토리 아래에 있습니다.
 
-For more information, see [Workspace and project file structure](reference/configs/file-structure).
+자세한 정보는 [작업 공간 및 프로젝트 파일 구조](reference/configs/file-structure)를 참조하시기 바랍니다.
 
-## Angular CLI configuration options
+## Angular CLI 구성 옵션
 
-The following properties are a set of options that customize the Angular CLI.
+다음 속성은 Angular CLI를 사용자 정의하는 옵션 세트입니다.
 
-| Property              | Details                                                                                                                                                                    | Value type                            | Default value |
-|:---                   |:---                                                                                                                                                                        |:---                                   |:---           |
-| `analytics`           | Share anonymous usage data with the Angular Team. A boolean value indicates whether or not to share data, while a UUID string shares data using a pseudonymous identifier. | `boolean` \| `string`                 | `false`       |
-| `cache`               | Control [persistent disk cache](cli/cache) used by [Angular CLI Builders](tools/cli/cli-builder).                                                                          | [Cache options](#cache-options)       | `{}`          |
-| `schematicCollections`| List schematics collections to use in `ng generate`.                                                                                                                       | `string[]`                            | `[]`          |
-| `packageManager`      | The preferred package manager tool to use.                                                                                                                                 | `npm` \| `cnpm` \| `pnpm` \| `yarn`   | `npm`         |
-| `warnings`            | Control Angular CLI specific console warnings.                                                                                                                             | [Warnings options](#warnings-options) | `{}`          |
+| 속성                 | 세부정보                                                                                                                                    | 값 유형                        | 기본값   |
+|:---                  |:---                                                                                                                                         |:---                           |:---      |
+| `analytics`          | Angular 팀과 익명 사용 데이터를 공유합니다. 부울 값은 데이터를 공유할지 여부를 나타내며, UUID 문자열은 가명 식별자를 사용해 데이터를 공유합니다. | `boolean` \| `string`         | `false`  |
+| `cache`              | [Angular CLI Builders](tools/cli/cli-builder)에서 사용하는 [영구 디스크 캐시](cli/cache)를 제어합니다.                                           | [캐시 옵션](#cache-options)   | `{}`     |
+| `schematicCollections`| `ng generate`에서 사용할 schematics 컬렉션 목록입니다.                                                                                          | `string[]`                    | `[]`     |
+| `packageManager`     | 사용하려는 기본 패키지 관리자 도구입니다.                                                                                                | `npm` \| `cnpm` \| `pnpm` \| `yarn` | `npm`    |
+| `warnings`           | Angular CLI 특정 콘솔 경고를 제어합니다.                                                                                                   | [경고 옵션](#warnings-options) | `{}`     |
 
-### Cache options
+### 캐시 옵션
 
-| Property      | Details                                                                                                                                                                                                                                      | Value type               | Default value    |
-|:---           |:---                                                                                                                                                                                                                                          |:---                      |:---              |
-| `enabled`     | Configure whether disk caching is enabled for builds.                                                                                                                                                                                        | `boolean`                | `true`           |
-| `environment` | Configure in which environment disk cache is enabled.<br><br>* `ci` enables caching only in continuous integration (CI) environments.<br>* `local` enables caching only *outside* of CI environments.<br>* `all` enables caching everywhere. | `local` \| `ci` \| `all` | `local`          |
-| `path`        | The directory used to stored cache results.                                                                                                                                                                                                  | `string`                 | `.angular/cache` |
+| 속성           | 세부정보                                                                                                                                                                                                                                       | 값 유형               | 기본값     |
+|:---            |:---                                                                                                                                                                                                                                           |:---                   |:---        |
+| `enabled`      | 빌드에 대해 디스크 캐싱이 활성화되어 있는지 구성합니다.                                                                                                                                                                                   | `boolean`             | `true`     |
+| `environment`  | 디스크 캐시가 활성화되는 환경을 구성합니다.<br><br>* `ci`는 지속적인 통합(CI) 환경에서만 캐싱을 활성화합니다.<br>* `local`은 CI 환경 외부에서만 캐싱을 활성화합니다.<br>* `all`은 모든 곳에서 캐싱을 활성화합니다. | `local` \| `ci` \| `all` | `local`    |
+| `path`         | 캐시 결과를 저장하는 데 사용되는 디렉토리입니다.                                                                                                                                                                                              | `string`              | `.angular/cache` |
 
-### Warnings options
+### 경고 옵션
 
-| Property          | Details                                                                         | Value type | Default value |
-|:---               |:---                                                                             |:---        |:---           |
-| `versionMismatch` | Show a warning when the global Angular CLI version is newer than the local one. | `boolean`  | `true`        |
+| 속성               | 세부정보                                                                | 값 유형 | 기본값   |
+|:---                |:---                                                                    |:---      |:---      |
+| `versionMismatch`  | 전역 Angular CLI 버전이 로컬 버전보다 최신일 때 경고를 보여줍니다.   | `boolean` | `true`   |
 
-## Project configuration options
+## 프로젝트 구성 옵션
 
-The following top-level configuration properties are available for each project, under `projects['project-name']`.
+다음 최상위 구성 속성은 `projects['project-name']` 아래에서 각 프로젝트에 사용할 수 있습니다.
 
-| Property      | Details                                                                                                                                                                              | Value type                                                      | Default value   |
-|:---           |:---                                                                                                                                                                                  |:---                                                             |:---             |
-| `root`        | The root directory for this project's files, relative to the workspace directory. Empty for the initial application, which resides at the top level of the workspace.                | `string`                                                        | None (required) |
-| `projectType` | One of "application" or "library" An application can run independently in a browser, while a library cannot.                                                                         | `application` \| `library`                                      | None (required) |
-| `sourceRoot`  | The root directory for this project's source files.                                                                                                                                  | `string`                                                        | `''`            |
-| `prefix`      | A string that Angular prepends to selectors when generating new components, directives, and pipes using `ng generate`. Can be customized to identify an application or feature area. | `string`                                                        | `'app'`         |
-| `schematics`  | A set of schematics that customize the `ng generate` sub-command option defaults for this project. See the [Generation schematics](#schematics) section.                             | See [schematics](#schematics)                                   | `{}`            |
-| `architect`   | Configuration defaults for Architect builder targets for this project.                                                                                                               | See [Configuring builder targets](#configuring-builder-targets) | `{}`            |
+| 속성            | 세부정보                                                                                                                | 값 유형                                   | 기본값          |
+|:---             |:---                                                                                                                    |:---                                        |:---             |
+| `root`          | 작업 공간 디렉토리에 상대하여 이 프로젝트 파일의 루트 디렉토리입니다. 초기 애플리케이션의 경우 비어 있으며, 작업 공간의 최상위에 있습니다. | `string`                                   | 없음(필수)      |
+| `projectType`   | "application" 또는 "library" 중 하나입니다. 애플리케이션은 브라우저에서 독립적으로 실행될 수 있지만, 라이브러리는 그럴 수 없습니다.     | `application` \| `library`                | 없음(필수)      |
+| `sourceRoot`    | 이 프로젝트의 소스 파일 루트 디렉토리입니다.                                                                        | `string`                                   | `''`            |
+| `prefix`        | Angular가 새로운 구성 요소, 디렉티브 및 파이프를 생성할 때 선택자에 추가하는 문자열입니다. 애플리케이션 또는 기능 영역을 식별하도록 사용자 정의할 수 있습니다. | `string`                                   | `'app'`         |
+| `schematics`    | 이 프로젝트에 대한 `ng generate` 하위 명령 옵션 기본값을 사용자 정의하는 schematics 세트입니다. [생성 schematics](#schematics) 섹션을 참조하십시오. | [schematics](#schematics)를 참조하십시오. | `{}`            |
+| `architect`     | 이 프로젝트의 Architect 빌더 타겟에 대한 구성 기본값입니다.                                                             | [빌더 타겟 구성](#configuring-builder-targets)를 참조하십시오. | `{}`            |
 
 ## Schematics
 
-[Angular schematics](tools/cli/schematics) are instructions for modifying a project by adding new files or modifying existing files.
-These can be configured by mapping the schematic name to a set of default options.
+[Angular schematics](tools/cli/schematics)는 새로운 파일을 추가하거나 기존 파일을 수정하여 프로젝트를 수정하는 지침입니다. 이러한 지침은 schematic 이름을 기본 옵션 세트에 매핑하여 구성할 수 있습니다.
 
-The "name" of a schematic is in the format: `<schematic-package>:<schematic-name>`.
-Schematics for the default Angular CLI `ng generate` sub-commands are collected in the package [`@schematics/angular`](https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/application/schema.json).
-For example, the schematic for generating a component with `ng generate component` is `@schematics/angular:component`.
+schematic의 "name"은 다음 형식입니다: `<schematic-package>:<schematic-name>`.  
+기본 Angular CLI `ng generate` 하위 명령에 대한 schematics는 [`@schematics/angular`](https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/application/schema.json) 패키지에 수집되어 있습니다.  
+예를 들어, `ng generate component`로 구성 요소를 생성하는 schematic은 `@schematics/angular:component`입니다.
 
-The fields given in the schematic's schema correspond to the allowed command-line argument values and defaults for the Angular CLI sub-command options.
-You can update your workspace schema file to set a different default for a sub-command option. For example, to disable `standalone` in `ng generate component` by default:
+제공된 schematic의 스키마 필드는 Angular CLI 하위 명령 옵션에 대한 허용된 명령줄 인수 값 및 기본값에 해당합니다.  
+다른 기본값을 설정하려면 작업 공간 스키마 파일을 업데이트할 수 있습니다. 예를 들어, 기본적으로 `ng generate component`의 `standalone`을 비활성화하려면:
 
 <docs-code language="json">
 
@@ -97,51 +93,51 @@ You can update your workspace schema file to set a different default for a sub-c
 
 </docs-code>
 
-## Configuring CLI builders
+## CLI 빌더 구성
 
-Architect is the tool that the Angular CLI uses to perform complex tasks, such as compilation and test running.
-Architect is a shell that runs a specified builder to perform a given task, according to a target configuration.
-You can define and configure new builders and targets to extend the Angular CLI.
-See [Angular CLI Builders](tools/cli/cli-builder).
+Architect는 Angular CLI가 컴파일 및 테스트 실행과 같은 복잡한 작업을 수행하는 데 사용하는 도구입니다.  
+Architect는 특정 빌더를 실행하여 주어진 작업을 수행하는 쉘입니다.  
+새 빌더와 타겟을 정의하고 구성하여 Angular CLI를 확장할 수 있습니다.  
+[Angular CLI Builders](tools/cli/cli-builder)를 참조하십시오.
 
-### Default Architect builders and targets
+### 기본 Architect 빌더 및 타겟
 
-Angular defines default builders for use with specific commands, or with the general `ng run` command.
-The JSON schemas that define the options and defaults for each of these builders are collected in the [`@angular-devkit/build-angular`](https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/builders.json) package.
-The schemas configure options for the following builders.
+Angular는 특정 명령 또는 일반 `ng run` 명령과 함께 사용할 기본 빌더를 정의합니다.  
+각 빌더의 옵션과 기본값을 정의하는 JSON 스키마는 [`@angular-devkit/build-angular`](https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/builders.json) 패키지에 수집되어 있습니다.  
+스키마는 다음 빌더에 대한 옵션을 구성합니다.
 
-### Configuring builder targets
+### 빌더 타겟 구성
 
-The `architect` section of `angular.json` contains a set of Architect targets.
-Many of the targets correspond to the Angular CLI commands that run them.
-Other targets can be executed using the `ng run` command, and you can define your own targets.
+`angular.json`의 `architect` 섹션에는 일련의 Architect 타겟이 포함되어 있습니다.  
+많은 타겟이 Angular CLI 명령과 일치합니다.  
+기타 타겟은 `ng run` 명령을 사용하여 실행할 수 있으며, 사용자 정의 타겟을 정의할 수 있습니다.
 
-Each target object specifies the `builder` for that target, which is the npm package for the tool that Architect runs.
-Each target also has an `options` section that configures default options for the target, and a `configurations` section that names and specifies alternative configurations for the target.
-See the example in [Build target](#build-target) below.
+각 타겟 객체는 해당 타겟에 대한 `builder`를 지정하며, 이는 Architect가 실행하는 도구의 npm 패키지입니다.  
+각 타겟은 기본 옵션을 구성하는 `options` 섹션과 타겟에 대한 대체 구성을 지정하는 `configurations` 섹션도 가집니다.  
+아래 [빌드 타겟](#build-target) 예제를 참조하십시오.
 
-| Property       | Details                                                                                                                                                                                              |
-|:---            |:---                                                                                                                                                                                                  |
-| `build`        | Configures defaults for options of the `ng build` command. See the [Build target](#build-target) section for more information.                                                                       |
-| `serve`        | Overrides build defaults and supplies extra serve defaults for the `ng serve` command. Besides the options available for the `ng build` command, it adds options related to serving the application. |
-| `e2e`          | Overrides build defaults for building end-to-end testing applications using the `ng e2e` command.                                                                                                    |
-| `test`         | Overrides build defaults for test builds and supplies extra test-running defaults for the `ng test` command.                                                                                         |
-| `lint`         | Configures defaults for options of the `ng lint` command, which performs static code analysis on project source files.                                                                               |
-| `extract-i18n` | Configures defaults for options of the `ng extract-i18n` command, which extracts localized message strings from source code and outputs translation files for internationalization.                  |
+| 속성         | 세부정보                                                                                                                                                                                               |
+|:---          |:---                                                                                                                                                                                                   |
+| `build`      | `ng build` 명령의 옵션 기본값을 구성합니다. 더 많은 정보는 [빌드 타겟](#build-target) 섹션을 참조하십시오.                                                                                               |
+| `serve`      | 빌드 기본값을 재정의하고 `ng serve` 명령을 위한 추가 제공 기본값을 제공합니다. `ng build` 명령에 사용할 수 있는 옵션 외에 애플리케이션 제공과 관련된 옵션이 추가됩니다.                      |
+| `e2e`        | `ng e2e` 명령을 사용하여 끝까지 테스트 응용 프로그램 빌드를 위한 빌드 기본값을 재정의합니다.                                                                                                     |
+| `test`       | 테스트 빌드를 위한 빌드 기본값을 재정의하고 `ng test` 명령을 위한 추가 테스트 실행 기본값을 제공합니다.                                                                                           |
+| `lint`       | 프로젝트 소스 파일에 대한 정적 코드 분석을 수행하는 `ng lint` 명령의 옵션 기본값을 구성합니다.                                                                                                   |
+| `extract-i18n` | 소스 코드에서 지역화된 메시지 문자열을 추출하고 국제화를 위한 번역 파일을 출력하는 `ng extract-i18n` 명령의 옵션 기본값을 구성합니다.                                                                 |
 
-HELPFUL: All options in the configuration file must use `camelCase`, rather than `dash-case` as used on the command line.
+도움말: 구성 파일의 모든 옵션은 명령줄에서 사용하는 `dash-case`가 아닌 `camelCase`를 사용해야 합니다.
 
-## Build target
+## 빌드 타겟
 
-Each target under `architect` has the following properties:
+`architect` 아래 각 타겟은 다음 속성들을 가집니다:
 
-| Property        | Details                                                                                                                                                                                                                                                |
-|:---             |:---                                                                                                                                                                                                                                                    |
-| `builder`       | The CLI builder used to create this target in the form of `<package-name>:<builder-name>`.                                                                                                                                                             |
-| `options`       | Build target default options.                                                                                                                                                                                                                          |
-| `configurations`| Alternative configurations for executing the target. Each configuration sets the default options for that intended environment, overriding the associated value under `options`. See [Alternate build configurations](#alternate-build-configurations) below. |
+| 속성          | 세부정보                                                                                                                                                                                                                                             |
+|:---           |:---                                                                                                                                                                                                                                                 |
+| `builder`     | `<package-name>:<builder-name>` 형식으로 이 타겟을 생성하는 데 사용되는 CLI 빌더입니다.                                                                                                                                                              |
+| `options`     | 빌드 타겟 기본 옵션입니다.                                                                                                                                                                                                                            |
+| `configurations`| 타겟을 실행하기 위한 대체 구성입니다. 각 구성은 의도된 환경에 대한 기본 옵션을 설정하고, `options` 아래의 값을 재정의합니다. [대체 빌드 구성](#alternate-build-configurations) 아래를 참조하십시오.                                 |
 
-For example, to configure a build with optimizations disabled:
+예를 들어, 최적화가 비활성화된 빌드를 구성하려면:
 
 <docs-code language="json">
 
@@ -162,20 +158,20 @@ For example, to configure a build with optimizations disabled:
 
 </docs-code>
 
-### Alternate build configurations
+### 대체 빌드 구성
 
-Angular CLI comes with two build configurations: `production` and `development`.
-By default, the `ng build` command uses the `production` configuration, which applies several build optimizations, including:
+Angular CLI에는 두 개의 빌트 구성인 `production`과 `development`가 함께 제공됩니다.  
+기본적으로 `ng build` 명령은 여러 빌드 최적화를 적용하는 `production` 구성을 사용합니다. 최적화의 예시는 다음과 같습니다:
 
-* Bundling files
-* Minimizing excess whitespace
-* Removing comments and dead code
-* Minifying code to use short, mangled names
+* 파일 번들링
+* 과도한 공백 최소화
+* 주석 및 죽은 코드 제거
+* 코드를 짧고 혼란스러운 이름으로 축소
 
-You can define and name extra alternate configurations (such as `staging`, for instance) appropriate to your development process.
-You can select an alternate configuration by passing its name to the `--configuration` command line flag.
+개발 프로세스에 적합한 추가 대체 구성을 정의하고 이름을 지정할 수 있습니다 (예: `staging`).  
+`--configuration` 명령줄 플래그에 이름을 전달하여 대체 구성을 선택할 수 있습니다.
 
-For example, to configure a build where optimization is enabled only for production builds (`ng build --configuration production`):
+예를 들어, 최적화를 생산 빌드에만 활성화하도록 빌드를 구성하려면 (`ng build --configuration production`):
 
 <docs-code language="json">
 
@@ -201,53 +197,53 @@ For example, to configure a build where optimization is enabled only for product
 
 </docs-code>
 
-You can also pass in more than one configuration name as a comma-separated list.
-For example, to apply both `staging` and `french` build configurations, use the command `ng build --configuration staging,french`.
-In this case, the command parses the named configurations from left to right.
-If multiple configurations change the same setting, the last-set value is the final one.
-In this example, if both `staging` and `french` configurations set the output path, the value in `french` would get used.
+쉼표로 구분된 목록으로 두 개 이상의 구성 이름을 전달할 수도 있습니다.  
+예를 들어, `staging` 및 `french` 빌드 구성을 모두 적용하려면 명령어 `ng build --configuration staging,french`를 사용하십시오.  
+이 경우 명령은 왼쪽에서 오른쪽으로 설정된 구성을 분석합니다.  
+여러 구성에서 동일한 설정을 변경하는 경우 마지막에 설정된 값이 최종값이 됩니다.  
+이 예제에서 `staging` 및 `french` 구성이 모두 출력 경로를 설정하면, `french`의 값이 사용됩니다.
 
-### Extra build and test options
+### 추가 빌드 및 테스트 옵션
 
-The configurable options for a default or targeted build generally correspond to the options available for the [`ng build`](cli/build), [`ng serve`](cli/serve), and [`ng test`](cli/test) commands.
-For details of those options and their possible values, see the [Angular CLI Reference](cli).
+기본 또는 대상 빌드에 대한 구성 가능한 옵션은 일반적으로 [`ng build`](cli/build), [`ng serve`](cli/serve) 및 [`ng test`](cli/test) 명령에 사용할 수 있는 옵션과 일치합니다.  
+이 옵션 및 가능한 값에 대한 자세한 내용은 [Angular CLI 참조](cli)를 참조하시기 바랍니다.
 
-| Options properties         | Details                                                                                                                                                                                                                                                                |
-|:---                        |:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `assets`                   | An object containing paths to static assets to serve with the application. The default paths point to the project's `public` directory. See more in the [Assets configuration](#assets-configuration) section.                                       |
-| `styles`                   | An array of CSS files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.                                    |
-| `stylePreprocessorOptions` | An object containing option-value pairs to pass to style preprocessors. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.                                                                                                 |
-| `scripts`                  | An object containing JavaScript files to add to the application. The scripts are loaded exactly as if you had added them in a `<script>` tag inside `index.html`. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.       |
-| `budgets`                  | Default size-budget type and thresholds for all or parts of your application. You can configure the builder to report a warning or an error when the output reaches or exceeds a threshold size. See [Configure size budgets](tools/cli/build#configure-size-budgets). |
-| `fileReplacements`         | An object containing files and their compile-time replacements. See more in [Configure target-specific file replacements](tools/cli/build#configure-target-specific-file-replacements).                                                                                |
-| `index`                    | A base HTML document which loads the application. See more in [Index configuration](#index-configuration).                                                                                                                                                                    |
+| 옵션 속성                | 세부정보                                                                                                                                                                                                                                                   |
+|:---                       |:---                                                                                                                                                                                                                                                           |
+| `assets`                  | 응용 프로그램과 함께 제공할 정적 자산에 대한 경로를 포함하는 개체입니다. 기본 경로는 프로젝트의 `public` 디렉터리를 가리킵니다. [자산 구성](#assets-configuration) 섹션을 참조하십시오.                                              |
+| `styles`                  | 프로젝트의 글로벌 컨텍스트에 추가할 CSS 파일의 배열입니다. Angular CLI는 CSS 가져오기 및 모든 주요 CSS 전처리기를 지원합니다. [스타일 및 스크립트 구성](#styles-and-scripts-configuration) 섹션을 참조하십시오.                        |
+| `stylePreprocessorOptions`| 스타일 전처리기에 전달할 옵션-값 쌍을 포함하는 개체입니다. [스타일 및 스크립트 구성](#styles-and-scripts-configuration) 섹션을 참조하십시오.                                                                                                     |
+| `scripts`                 | 응용 프로그램에 추가할 JavaScript 파일을 포함하는 개체입니다. 스크립트는 `index.html` 내에서 `<script>` 태그를 추가한 것처럼 로드됩니다. [스타일 및 스크립트 구성](#styles-and-scripts-configuration) 섹션을 참조하십시오. |
+| `budgets`                 | 애플리케이션의 전체 또는 일부에 대한 기본 크기 예산 유형 및 임계값입니다. 출력이 임계값 크기에 도달하거나 초과할 때 경고 또는 오류를 보고하도록 빌더를 구성할 수 있습니다. [크기 예산 구성](tools/cli/build#configure-size-budgets)를 참조하십시오.     |
+| `fileReplacements`        | 파일 및 해당 컴파일 시간 대체를 포함하는 개체입니다. [대상 특정 파일 대체 구성](tools/cli/build#configure-target-specific-file-replacements) 섹션을 참조하십시오.                                                                |
+| `index`                   | 응용 프로그램을 로드하는 기본 HTML 문서입니다. [인덱스 구성](#index-configuration) 섹션을 참조하십시오.                                                                                                                                              |
 
-## Complex configuration values
+## 복잡한 구성 값
 
-The `assets`, `index`, `outputPath`, `styles`, and `scripts` options can have either simple path string values, or object values with specific fields.
-The `sourceMap` and `optimization` options can be set to a simple boolean value. They can also be given a complex value using the configuration file.
+`assets`, `index`, `outputPath`, `styles`, 및 `scripts` 옵션은 간단한 경로 문자열 값 또는 특정 필드를 가진 개체 값을 가질 수 있습니다.  
+`sourceMap` 및 `optimization` 옵션은 간단한 부울 값으로 설정할 수 있습니다. 구성 파일을 사용하여 복잡한 값을 제공할 수도 있습니다.
 
-The following sections provide more details of how these complex values are used in each case.
+다음 섹션에서는 이러한 복잡한 값이 각 경우에 어떻게 사용되는지에 대한 자세한 정보를 제공합니다.
 
-### Assets configuration
+### 자산 구성
 
-Each `build` target configuration can include an `assets` array that lists files or folders you want to copy as-is when building your project.
-By default, the contents of the `public/` directory are copied over.
+각 `build` 타겟 구성은 프로젝트를 빌드할 때 기존 파일을 그대로 복사할 파일 또는 폴더 목록을 나열하는 `assets` 배열을 포함할 수 있습니다.  
+기본적으로 `public/` 디렉토리의 내용이 복사됩니다.
 
-To exclude an asset, you can remove it from the assets configuration.
+자산을 제외하려면 자산 구성에서 제거할 수 있습니다.
 
-You can further configure assets to be copied by specifying assets as objects, rather than as simple paths relative to the workspace root.
-An asset specification object can have the following fields.
+자산을 복사하도록 추가로 구성하려면 자산을 작업 공간 루트에 상대적인 간단한 경로가 아닌 개체로 지정할 수 있습니다.  
+자산 사양 개체는 다음 필드를 가질 수 있습니다.
 
-| Fields           | Details                                                                                                                                   |
-|:---              |:---                                                                                                                                       |
-| `glob`           | A [node-glob](https://github.com/isaacs/node-glob/blob/master/README.md) using `input` as base directory.                                 |
-| `input`          | A path relative to the workspace root.                                                                                                    |
-| `output`         | A path relative to `outDir`. Because of the security implications, the Angular CLI never writes files outside of the project output path. |
-| `ignore`         | A list of globs to exclude.                                                                                                               |
-| `followSymlinks` | Allow glob patterns to follow symlink directories. This allows subdirectories of the symlink to be searched. Defaults to `false`.         |
+| 필드                | 세부정보                                                                                                                                    |
+|:---                 |:---                                                                                                                                         |
+| `glob`              | `input`을 기준 디렉토리로 사용하는 [node-glob](https://github.com/isaacs/node-glob/blob/master/README.md)입니다.                                   |
+| `input`             | 작업 공간 루트에 상대적인 경로입니다.                                                                                                    |
+| `output`            | `outDir`에 상대적인 경로입니다. 보안 때문에 Angular CLI는 프로젝트 출력 경로 외부에 파일을 작성하지 않습니다.                           |
+| `ignore`            | 제외할 glob 목록입니다.                                                                                                                 |
+| `followSymlinks`    | glob 패턴이 심볼릭 링크 디렉토리를 따르도록 허용합니다. 이로 인해 심볼릭 링크의 하위 디렉토리를 검색할 수 있습니다. 기본값은 `false`입니다.   |
 
-For example, the default asset paths can be represented in more detail using the following objects.
+예를 들어, 기본 자산 경로는 다음 개체를 사용하여 더 자세하게 표현할 수 있습니다.
 
 <docs-code language="json">
 
@@ -279,7 +275,7 @@ For example, the default asset paths can be represented in more detail using the
 
 </docs-code>
 
-The following example uses the `ignore` field to exclude certain files in the assets directory from being copied into the build:
+다음 예제는 `ignore` 필드를 사용하여 자산 디렉토리에서 특정 파일을 빌드에 복사하지 않도록 합니다:
 
 <docs-code language="json">
 
@@ -307,14 +303,14 @@ The following example uses the `ignore` field to exclude certain files in the as
 
 </docs-code>
 
-### Styles and scripts configuration
+### 스타일 및 스크립트 구성
 
-An array entry for the `styles` and `scripts` options can be a simple path string, or an object that points to an extra entry-point file.
-The associated builder loads that file and its dependencies as a separate bundle during the build.
-With a configuration object, you have the option of naming the bundle for the entry point, using a `bundleName` field.
+`styles` 및 `scripts` 옵션의 배열 항목은 간단한 경로 문자열일 수도 있고, 추가 엔트리 포인트 파일을 가리키는 개체일 수도 있습니다.  
+연관된 빌더는 빌드 중에 별도로 해당 파일 및 종속성을 로드합니다.  
+구성 개체를 사용하면 `bundleName` 필드를 사용하여 엔트리 포인트의 번들을 명명하는 옵션이 제공됩니다.
 
-The bundle is injected by default, but you can set `inject` to `false` to exclude the bundle from injection.
-For example, the following object values create and name a bundle that contains styles and scripts, and excludes it from injection:
+번들은 기본적으로 삽입되지만, 삽입에서 번들을 제외하려면 `inject`를 `false`로 설정할 수 있습니다.  
+예를 들어, 다음 개체 값은 스타일 및 스크립트를 포함하고 있는 번들을 생성하고, 삽입에서 제외합니다:
 
 <docs-code language="json">
 
@@ -348,11 +344,11 @@ For example, the following object values create and name a bundle that contains
 
 </docs-code>
 
-#### Style preprocessor options
+#### 스타일 전처리기 옵션
 
-In Sass, you can make use of the `includePaths` feature for both component and global styles. This allows you to add extra base paths that are checked for imports.
+Sass에서는 구성 요소 및 전역 스타일 모두에 대해 `includePaths` 기능을 사용할 수 있습니다. 이를 통해 가져오기를 위해 추가 기본 경로를 추가할 수 있습니다.
 
-To add paths, use the `stylePreprocessorOptions` option:
+경로를 추가하려면 `stylePreprocessorOptions` 옵션을 사용하십시오:
 
 <docs-code language="json">
 
@@ -377,56 +373,56 @@ To add paths, use the `stylePreprocessorOptions` option:
 
 </docs-code>
 
-Files in that directory, such as `src/style-paths/_variables.scss`, can be imported from anywhere in your project without the need for a relative path:
+해당 디렉토리의 파일(예: `src/style-paths/_variables.scss`)을 프로젝트의 어느 곳에서나 상대 경로 없이 가져올 수 있습니다:
 
 <docs-code language="scss">
 
 // src/app/app.component.scss
-// A relative path works
+// 상대 경로가 작동합니다
 @import '../style-paths/variables';
 
-// But now this works as well
+// 그러나 이제 이것도 작동합니다
 @import 'variables';
 
 </docs-code>
 
-HELPFUL: You also need to add any styles or scripts to the `test` builder if you need them for unit tests.
-See also [Using runtime-global libraries inside your application](tools/libraries/using-libraries#using-runtime-global-libraries-inside-your-app).
+도움말: 단위 테스트에 필요한 경우 `test` 빌더에도 모든 스타일 또는 스크립트를 추가해야 합니다.  
+[애플리케이션 내에서 런타임 글로벌 라이브러리 사용](tools/libraries/using-libraries#using-runtime-global-libraries-inside-your-app)도 참조하십시오.
 
-### Optimization configuration
+### 최적화 구성
 
-The `optimization` option can be either a boolean or an object for more fine-tune configuration.
-This option enables various optimizations of the build output, including:
+`optimization` 옵션은 부울 또는 더 세밀한 구성 옵션을 위한 객체일 수 있습니다.  
+이 옵션은 빌드 출력의 다양한 최적화를 활성화합니다. 예를 들어:
 
-* Minification of scripts and styles
-* Tree-shaking
-* Dead-code elimination
-* Inlining of critical CSS
-* Fonts inlining
+* 스크립트 및 스타일 최소화
+* 트리 흔들기
+* 죽은 코드 제거
+* 중요한 CSS 인라인
+* 폰트 인라인
 
-Several options can be used to fine-tune the optimization of an application.
+여러 옵션을 사용하여 애플리케이션의 최적화를 세밀하게 조정할 수 있습니다.
 
-| Options   | Details                                                        | Value type                                                                     | Default value |
-|:---       |:---                                                            |:---                                                                            |:---           |
-| `scripts` | Enables optimization of the scripts output.                    | `boolean`                                                                      | `true`        |
-| `styles`  | Enables optimization of the styles output.                     | `boolean` \| [Styles optimization options](#styles-optimization-options) | `true`        |
-| `fonts`   | Enables optimization for fonts. This requires internet access. | `boolean` \| [Fonts optimization options](#fonts-optimization-options)   | `true`        |
+| 옵션      | 세부정보                                                    | 값 유형                                                                      | 기본값   |
+|:---       |:---                                                        |:---                                                                         |:---      |
+| `scripts` | 스크립트 출력을 최적화합니다.                              | `boolean`                                                                   | `true`   |
+| `styles`  | 스타일 출력을 최적화합니다.                               | `boolean` \| [스타일 최적화 옵션](#styles-optimization-options) | `true`   |
+| `fonts`   | 폰트 최적화를 활성화합니다. 이 작업은 인터넷 액세스가 필요합니다. | `boolean` \| [폰트 최적화 옵션](#fonts-optimization-options)   | `true`   |
 
-#### Styles optimization options
+#### 스타일 최적화 옵션
 
-| Options          | Details                                                                                                                  | Value type | Default value |
-|:---              |:---                                                                                                                      |:---        |:---           |
-| `minify`         | Minify CSS definitions by removing extraneous whitespace and comments, merging identifiers, and minimizing values.       | `boolean`  | `true`        |
-| `inlineCritical` | Extract and inline critical CSS definitions to improve [First Contentful Paint](https://web.dev/first-contentful-paint). | `boolean`  | `true`        |
-| `removeSpecialComments` | Remove comments in global CSS that contains `@license` or `@preserve` or that starts with `//!` or `/*!`.         | `boolean`  | `true`        |
+| 옵션                | 세부정보                                                                                                                  | 값 유형 | 기본값   |
+|:---                 |:---                                                                                                                      |:---      |:---      |
+| `minify`            | 불필요한 공백 및 주석을 제거하고, 식별자를 병합하며, 값을 최소화하여 CSS 정의를 최소화합니다.                            | `boolean` | `true`   |
+| `inlineCritical`    | [First Contentful Paint](https://web.dev/first-contentful-paint)를 개선하기 위해 중요한 CSS 정의를 추출하고 인라인으로 삽입합니다. | `boolean` | `true`   |
+| `removeSpecialComments` | `@license` 또는 `@preserve`가 포함된 CSS의 전역 주석 또는 `//!` 또는 `/*!`로 시작하는 주석을 제거합니다.                    | `boolean` | `true`   |
 
-#### Fonts optimization options
+#### 폰트 최적화 옵션
 
-| Options  | Details                                                                                                                                                                                                             | Value type | Default value |
-|:---      |:---                                                                                                                                                                                                                 |:---        |:---           |
-| `inline` | Reduce [render blocking requests](https://web.dev/render-blocking-resources) by inlining external Google Fonts and Adobe Fonts CSS definitions in the application's HTML index file. This requires internet access. | `boolean`  | `true`        |
+| 옵션     | 세부정보                                                                                                                                                                                                    | 값 유형 | 기본값   |
+|:---      |:---                                                                                                                                                                                                        |:---      |:---      |
+| `inline` | 외부 Google Fonts 및 Adobe Fonts CSS 정의를 애플리케이션의 HTML 인덱스 파일에 인라인화하여 [렌더 차단 요청](https://web.dev/render-blocking-resources)을 줄입니다. 이 작업은 인터넷 액세스가 필요합니다. | `boolean` | `true`   |
 
-You can supply a value such as the following to apply optimization to one or the other:
+다음과 같은 값을 제공하여 하나 또는 다른 것에 대한 최적화를 적용할 수 있습니다:
 
 <docs-code language="json">
 
@@ -454,18 +450,18 @@ You can supply a value such as the following to apply optimization to one or the
 
 </docs-code>
 
-### Source map configuration
+### 소스 맵 구성
 
-The `sourceMap` builder option can be either a boolean or an object for more fine-tune configuration to control the source maps of an application.
+`sourceMap` 빌더 옵션은 부울 또는 애플리케이션의 소스 맵을 제어하기 위한 더 세밀한 구성 옵션일 수 있습니다.
 
-| Options   | Details                                             | Value type | Default value |
-|:---       |:---                                                 |:---        |:---           |
-| `scripts` | Output source maps for all scripts.                 | `boolean`  | `true`        |
-| `styles`  | Output source maps for all styles.                  | `boolean`  | `true`        |
-| `vendor`  | Resolve vendor packages source maps.                | `boolean`  | `false`       |
-| `hidden`  | Omit link to sourcemaps from the output JavaScript. | `boolean`  | `false`       |
+| 옵션     | 세부정보                                        | 값 유형 | 기본값   |
+|:---      |:---                                            |:---      |:---      |
+| `scripts` | 모든 스크립트에 대한 소스 맵을 출력합니다.      | `boolean` | `true`   |
+| `styles`  | 모든 스타일에 대한 소스 맵을 출력합니다.       | `boolean` | `true`   |
+| `vendor`  | 공급업체 패키지 소스 맵을 확인합니다.          | `boolean` | `false`  |
+| `hidden`  | 출력 JavaScript에서 소스 맵에 대한 링크를 생략합니다. | `boolean` | `false`  |
 
-The example below shows how to toggle one or more values to configure the source map outputs:
+아래의 예제는 하나 이상의 값을 토글하여 소스 맵 출력을 구성하는 방법을 보여줍니다:
 
 <docs-code language="json">
 
@@ -491,34 +487,34 @@ The example below shows how to toggle one or more values to configure the source
 
 </docs-code>
 
-HELPFUL: When using hidden source maps, source maps are not referenced in the bundle.
-These are useful if you only want source maps to map stack traces in error reporting tools without showing up in browser developer tools.
-Note that even though `hidden` prevents the source map from being linked in the output bundle, your deployment process must take care not to serve the generated sourcemaps in production, or else the information is still leaked.
+도움말: 숨겨진 소스 맵을 사용할 때, 소스 맵이 번들에 참조되지 않습니다.  
+이러한 소스 맵은 브라우저 개발자 도구에 표시되지 않고, 오류 보고 도구의 스택 추적을 매핑하는 데 유용합니다.  
+숨겨진 소스 맵이 출력 번들에 연결되지 않도록 해도, 배포 프로세스는 생성된 소스 맵을 프로덕션에서 제공하지 않도록 주의해야 하며, 그렇지 않으면 정보가 여전히 유출될 수 있습니다.
 
-### Index configuration
+### 인덱스 구성
 
-Configures generation of the application's HTML index.
+응용 프로그램의 HTML 인덱스 생성을 구성합니다.
 
-The `index` option can be either a string or an object for more fine-tune configuration.
+`index` 옵션은 문자열 또는 더 세밀한 구성 옵션을 위한 객체일 수 있습니다.
 
-When supplying the value as a string the filename of the specified path will be used for the generated file and will be created in the root of the application's configured output path.
+문자열로 값을 제공할 때 지정된 경로의 파일 이름이 생성 파일에 사용되며, 애플리케이션의 구성된 출력 경로의 루트에 생성됩니다.
 
-#### Index options
+#### 인덱스 옵션
 
-| Options  | Details                                                                                                                                                                          | Value type | Default value   |
-|:---      |:---                                                                                                                                                                              |:---        |:---             |
-| `input`  | The path of a file to use for the application's generated HTML index.                                                                                                            | `string`   | None (required) |
-| `output` | The output path of the application's generated HTML index file. The full provided path will be used and will be considered relative to the application's configured output path. | `string`   | `index.html`    |
+| 옵션     | 세부정보                                                                                                                                                | 값 유형 | 기본값         |
+|:---      |:---                                                                                                                                                        |:---      |:---            |
+| `input`  | 애플리케이션의 생성된 HTML 인덱스에 사용할 파일의 경로입니다.                                                                                                | `string` | 없음(필수)     |
+| `output` | 애플리케이션의 생성된 HTML 인덱스 파일의 출력 경로입니다. 제공된 전체 경로가 사용되며, 애플리케이션의 구성된 출력 경로에 상대적입니다.                     | `string` | `index.html`    |
 
-### Output path configuration
+### 출력 경로 구성
 
-The `outputPath` option can be either a String which will be used as the `base` value or an Object for more fine-tune configuration.
+`outputPath` 옵션은 문자열일 수 있으며, `base` 값을 사용하거나 더 세밀한 구성을 위한 객체일 수 있습니다.
 
-Several options can be used to fine-tune the output structure of an application.
+여러 옵션을 사용하여 애플리케이션의 출력 구조를 세밀하게 조정할 수 있습니다.
 
-| Options   | Details                                                                            | Value type | Default value |
-|:---       |:---                                                                                |:---        |:---           |
-| `base`    | Specify the output path relative to workspace root.                                | `string`   |               |
-| `browser` | The output directory name for your browser build is within the base output path. This can be safely served to users.       | `string`   | `browser`     |
-| `server`  | The output directory name of your server build within the output path base.        | `string`   | `server`      |
-| `media`   | The output directory name for your media files located within the output browser directory. These media files are commonly referred to as resources in CSS files. | `string`   | `media`       |
+| 옵션         | 세부정보                                                                                      | 값 유형 | 기본값     |
+|:---          |:---                                                                                          |:---      |:---        |
+| `base`       | 작업 공간 루트에 대해 출력 경로를 지정합니다.                                               | `string` |            |
+| `browser`    | 브라우저 빌드의 출력 디렉토리 이름이 기본 출력 경로 내에 있습니다. 사용자에게 안전하게 제공할 수 있습니다.       | `string` | `browser`  |
+| `server`     | 출력 경로 기본 내의 서버 빌드의 출력 디렉토리 이름입니다.                                   | `string` | `server`   |
+| `media`      | 출력 브라우저 디렉토리 내에 위치한 미디어 파일의 출력 디렉토리 이름입니다. 이러한 미디어 파일은 CSS 파일에서 리소스로 일반적으로 언급됩니다. | `string` | `media`    |
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0100.md b/adev/src/content/reference/errors/NG0100.md
index 7ec50c020a52..0351eb29eb0c 100644
--- a/adev/src/content/reference/errors/NG0100.md
+++ b/adev/src/content/reference/errors/NG0100.md
@@ -2,18 +2,18 @@
 
 <docs-video src="https://www.youtube.com/embed/O47uUnJjbJc"/>
 
-Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed. Angular only throws this error in development mode.
+Angular은 변경 감지가 완료된 후 표현식 값이 변경되면 `ExpressionChangedAfterItHasBeenCheckedError`를 발생시킵니다. Angular은 개발 모드에서만 이 오류를 발생시킵니다.
 
-In development mode, Angular performs an additional check after each change detection run, to ensure the bindings haven't changed. This catches errors where the view is left in an inconsistent state. This can occur, for example, if a method or getter returns a different value each time it is called, or if a child component changes values on its parent. If either of these occurs, this is a sign that change detection is not stabilized. Angular throws the error to ensure data is always reflected correctly in the view, which prevents erratic UI behavior or a possible infinite loop.
+개발 모드에서 Angular은 각 변경 감지 실행 후 추가 검사를 수행하여 바인딩이 변경되지 않았는지 확인합니다. 이는 뷰가 일관성이 없는 상태로 남아 있는 오류를 잡아냅니다. 이는 메소드나 게터가 호출될 때마다 다른 값을 반환하거나, 자식 컴포넌트가 부모의 값을 변경할 경우와 같은 상황에서 발생할 수 있습니다. 이러한 상황이 발생하면 변경 감지가 안정화되지 않고 있다는 신호입니다. Angular은 뷰에서 데이터가 항상 올바르게 반영되도록 이 오류를 발생시켜 UI 동작의 불규칙성이나 무한 루프를 방지합니다.
 
-This error commonly occurs when you've added template expressions or have begun to implement lifecycle hooks like `ngAfterViewInit` or `ngOnChanges`. It is also common when dealing with loading status and asynchronous operations, or when a child component changes its parent bindings.
+이 오류는 템플릿 표현식을 추가했거나 `ngAfterViewInit`, `ngOnChanges`와 같은 라이프사이클 훅을 구현하기 시작했을 때 일반적으로 발생합니다. 또한 로딩 상태 및 비동기 작업을 처리할 때, 또는 자식 컴포넌트가 부모의 바인딩을 변경할 때도 흔히 발생합니다.
 
-## Debugging the error
+## 오류 디버깅
 
-The [source maps](https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map) generated by the CLI are very useful when debugging. Navigate up the call stack until you find a template expression where the value displayed in the error has changed.
+CLI에서 생성한 [소스 맵](https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map)은 디버깅할 때 매우 유용합니다. 호출 스택을 위로 탐색하여 오류에 표시된 값이 변경된 템플릿 표현식을 찾습니다.
 
-Ensure that there are no changes to the bindings in the template after change detection is run. This often means refactoring to use the correct component lifecycle hook for your use case. If the issue exists within `ngAfterViewInit`, the recommended solution is to use a constructor or `ngOnInit` to set initial values, or use `ngAfterContentInit` for other value bindings.
+변경 감지가 실행된 후 템플릿의 바인딩에 변경 사항이 없도록 해야 합니다. 이는 종종 사용 사례에 맞는 올바른 컴포넌트 라이프사이클 훅을 사용하도록 리팩토링하는 것을 의미합니다. `ngAfterViewInit` 내에서 문제가 발생하면, 초기 값을 설정하기 위해 생성자 또는 `ngOnInit`를 사용하거나, 다른 값 바인딩을 위해 `ngAfterContentInit`을 사용하는 것이 권장되는 해결책입니다.
 
-If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template.
+뷰에서 메소드에 바인딩하고 있는 경우, 호출이 템플릿의 다른 바인딩을 업데이트하지 않도록 확인해야 합니다.
 
-Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://angularindepth.com/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error) and why this is useful at ['Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'](https://blog.angular-university.io/angular-debugging).
+어떤 해결책이 당신에게 맞는지에 대한 자세한 내용은 ['ExpressionChangedAfterItHasBeenCheckedError' 오류에 대해 알아야 할 모든 것](https://angularindepth.com/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error)을 읽어보시고, 이것이 유용한 이유는 ['Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'](https://blog.angular-university.io/angular-debugging)를 확인하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG01101.md b/adev/src/content/reference/errors/NG01101.md
index cfef2128a885..e55bbff8f910 100644
--- a/adev/src/content/reference/errors/NG01101.md
+++ b/adev/src/content/reference/errors/NG01101.md
@@ -1,20 +1,20 @@
-# Wrong Async Validator Return Type
+# 잘못된 비동기 유효성 검사기 반환 유형
 
-Async validators must return a promise or an observable, and emit/resolve them whether the validation fails or succeeds. In particular, they must implement the [AsyncValidatorFn API](api/forms/AsyncValidator)
+비동기 유효성 검사기는 약속이나 관찰 가능성을 반환해야 하며, 유효성 검사가 실패하든 성공하든 이를 방출/해결해야 합니다. 특히, [AsyncValidatorFn API](api/forms/AsyncValidator)를 구현해야 합니다.
 
 ```typescript
 export function isTenAsync(control: AbstractControl): 
   Observable<ValidationErrors | null> {
     const v: number = control.value;
     if (v !== 10) {
-    // Emit an object with a validation error.
+    // 유효성 검사 오류가 있는 객체를 방출합니다.
       return of({ 'notTen': true, 'requiredValue': 10 });
     }
-    // Emit null, to indicate no error occurred.
+    // 오류가 발생하지 않았음을 나타내기 위해 null을 방출합니다.
     return of(null);
   }
 ```
 
-## Debugging the error
+## 오류 디버깅
 
-Did you mistakenly use a synchronous validator instead of an async validator?
+비동기 유효성 검사기 대신 동기 유효성 검사기를 실수로 사용한 것인가요?
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG01203.md b/adev/src/content/reference/errors/NG01203.md
index 7aa92fe124ad..4d36c5a566be 100644
--- a/adev/src/content/reference/errors/NG01203.md
+++ b/adev/src/content/reference/errors/NG01203.md
@@ -1,8 +1,8 @@
-# Missing value accessor
+# 누락된 값 접근자
 
-For all custom form controls, you must register a value accessor.
+모든 사용자 정의 양식 제어에 대해 값 접근자를 등록해야 합니다.
 
-Here's an example of how to provide one:
+다음은 값 접근자를 제공하는 방법의 예입니다:
 
 ```typescript
 providers: [
@@ -14,13 +14,13 @@ providers: [
 ]
 ```
 
-## Debugging the error
+## 오류 디버깅
 
-As described above, your control was expected to have a value accessor, but was missing one. However, there are many different reasons this can happen in practice. Here's a listing of some known problems leading to this error.
+위에서 설명한 바와 같이, 귀하의 제어는 값 접근자를 가져야 하는 것으로 기대되었으나 누락되었습니다. 그러나 실제로 이런 일이 발생할 수 있는 다양한 이유가 있습니다. 이 오류로 이어질 수 있는 몇 가지 알려진 문제를 나열합니다.
 
-1. If you **defined** a custom form control, did you remember to provide a value accessor?
-1. Did you put `ngModel` on an element with no value, or an **invalid element** (e.g. `<div [(ngModel)]="foo">`)?
-1. Are you using a custom form control declared inside an `NgModule`? if so, make sure you are **importing** the `NgModule`.
-1. Are you using `ngModel` with a third-party custom form control? Check whether that control provides a value accessor. If not, use **`ngDefaultControl`** on the control's element.
-1. Are you **testing** a custom form control? Be sure to configure your testbed to know about the control. You can do so with `Testbed.configureTestingModule`.
-1. Are you using **Nx and Module Federation** with webpack? Your `webpack.config.js` may require [extra configuration](https://github.com/angular/angular/issues/43821#issuecomment-1054845431) to ensure the forms package is shared.
+1. 사용자 정의 양식 제어를 **정의**했다면, 값 접근자를 제공하는 것을 잊지 않으셨나요?
+1. 값이 없는 요소나 **잘못된 요소**(예: `<div [(ngModel)]="foo">`)에 `ngModel`을 넣으셨나요?
+1. `NgModule` 내에 선언된 사용자 정의 양식 제어를 사용하고 있나요? 그렇다면 `NgModule`을 **가져오고 있는지** 확인하세요.
+1. 타사 사용자 정의 양식 제어와 함께 `ngModel`을 사용하고 있나요? 해당 제어가 값 접근자를 제공하는지 확인하세요. 그렇지 않다면 제어 요소에 **`ngDefaultControl`**을 사용하세요.
+1. 사용자 정의 양식 제어를 **테스트**하고 있나요? 테스트베드가 제어에 대해 인식하도록 구성되어 있는지 확인하세요. `Testbed.configureTestingModule`으로 설정할 수 있습니다.
+1. webpack과 함께 **Nx 및 모듈 연합**을 사용하고 있나요? 양식 패키지를 공유하기 위해 `webpack.config.js`에 [추가 구성](https://github.com/angular/angular/issues/43821#issuecomment-1054845431)이 필요할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0200.md b/adev/src/content/reference/errors/NG0200.md
index 0b5f0c407a04..dfb54116be75 100644
--- a/adev/src/content/reference/errors/NG0200.md
+++ b/adev/src/content/reference/errors/NG0200.md
@@ -2,11 +2,11 @@
 
 <docs-video src="https://www.youtube.com/embed/CpLOm4o_FzM"/>
 
-A cyclic dependency exists when a [dependency of a service](guide/di/hierarchical-dependency-injection) directly or indirectly depends on the service itself. For example, if `UserService` depends on `EmployeeService`, which also depends on `UserService`. Angular will have to instantiate `EmployeeService` to create `UserService`, which depends on `UserService`, itself.
+순환 의존성이 존재한다는 것은 [서비스의 의존성](guide/di/hierarchical-dependency-injection)이 직접적이거나 간접적으로 해당 서비스 자체에 의존할 때를 의미합니다. 예를 들어, `UserService`가 `EmployeeService`에 의존하고, `EmployeeService`가 다시 `UserService`에 의존하는 경우입니다. Angular는 `UserService`에 의존하는 `EmployeeService`를 생성하기 위해 `EmployeeService`를 인스턴스화해야 합니다.
 
-## Debugging the error
+## 오류 디버깅하기
 
-Use the call stack to determine where the cyclical dependency exists.
-You will be able to see if any child dependencies rely on the original file by [mapping out](guide/di/di-in-action) the component, module, or service's dependencies, and identifying the loop causing the problem.
+호출 스택을 사용하여 순환 의존성이 존재하는 곳을 확인하십시오.
+구성 요소, 모듈 또는 서비스의 의존성을 [매핑하여](guide/di/di-in-action) 원래 파일에 어떤 자식 의존성이 의존하는지 확인하고 문제를 일으키는 루프를 식별할 수 있습니다.
 
-Break this loop \(or circle\) of dependency to resolve this error. This most commonly means removing or refactoring the dependencies to not be reliant on one another.
+이 오류를 해결하기 위해 이 의존성의 루프(또는 원)를 끊으십시오. 가장 일반적으로 이는 의존성이 서로에게 의존하지 않도록 제거하거나 리팩토링하는 것을 의미합니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0201.md b/adev/src/content/reference/errors/NG0201.md
index 0369bfc9c416..8e815ff33f0f 100644
--- a/adev/src/content/reference/errors/NG0201.md
+++ b/adev/src/content/reference/errors/NG0201.md
@@ -2,18 +2,18 @@
 
 <docs-video src="https://www.youtube.com/embed/lAlOryf1-WU"/>
 
-You see this error when you try to inject a service but have not declared a corresponding provider. A provider is a mapping that supplies a value that you can inject into the constructor of a class in your application.
+서비스를 주입하려고 하지만 해당 제공자를 선언하지 않은 경우 이 오류가 발생합니다. 제공자는 애플리케이션 내의 클래스 생성자에 주입할 수 있는 값을 제공하는 매핑입니다.
 
-Read more on providers in our [Dependency Injection guide](guide/di).
+우리의 [종속성 주입 가이드](guide/di)에서 제공자에 대해 더 알아보세요.
 
-## Debugging the error
+## 오류 디버깅
 
-Work backwards from the object where the error states that a provider is missing: `No provider for ${this}!`. This is commonly thrown in services, which require non-existing providers.
+오류가 제공자가 누락되었다고 명시하는 객체에서 뒤로 작업하세요: `No provider for ${this}!`. 이는 일반적으로 존재하지 않는 제공자를 요구하는 서비스에서 발생합니다.
 
-To fix the error ensure that your service is registered in the list of providers of an `NgModule` or has the `@Injectable` decorator with a `providedIn` property at top.
+오류를 수정하려면 서비스가 `NgModule`의 제공자 목록에 등록되어 있거나 `providedIn` 속성을 가진 `@Injectable` 데코레이터가 상단에 있어야 합니다.
 
-The most common solution is to add a provider in `@Injectable` using `providedIn`:
+가장 일반적인 솔루션은 `providedIn`을 사용하여 `@Injectable`에 제공자를 추가하는 것입니다:
 
 <docs-code language="typescript">
 @Injectable({ providedIn: 'app' })
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0203.md b/adev/src/content/reference/errors/NG0203.md
index 72829bc533e2..e32aa0f2c752 100644
--- a/adev/src/content/reference/errors/NG0203.md
+++ b/adev/src/content/reference/errors/NG0203.md
@@ -1,60 +1,58 @@
-# `inject()` must be called from an injection context
+# `inject()`는 주입 컨텍스트에서 호출해야 합니다
 
-You see this error when you try to use the [`inject`](api/core/inject) function outside of the allowed [injection context](guide/di/dependency-injection-context). The injection context is available during the class creation and initialization. It is also available to functions
-used with `runInInjectionContext`.
+허용된 [주입 컨텍스트](guide/di/dependency-injection-context) 외부에서 [`inject`](api/core/inject) 함수를 사용하려고 할 때 이 오류가 발생합니다. 주입 컨텍스트는 클래스 생성 및 초기화 중에 사용 가능합니다. 또한 `runInInjectionContext`와 함께 사용되는 함수에서도 사용할 수 있습니다.
 
-In practice the `inject()` calls are allowed in a constructor, a constructor parameter and a field initializer:
+실제로 `inject()` 호출은 생성자, 생성자 매개변수 및 필드 초기화자에서 허용됩니다:
 
 ```typescript
 @Injectable({providedIn: 'root'})
 export class Car {
   radio: Radio|undefined;
 
-  // OK: field initializer
+  // OK: 필드 초기화자
   spareTyre = inject(Tyre);
   
   constructor() {
-    // OK: constructor body
+    // OK: 생성자 본문
     this.radio = inject(Radio);
   }
 }
 ```
 
-It is also legal to call [`inject`](api/core/inject) from a provider's factory:
+제공자의 팩토리에서 [`inject`](api/core/inject)를 호출하는 것도 합법입니다:
 
 ```typescript
 providers: [
   {provide: Car, useFactory: () => {
-    // OK: a class factory
+    // OK: 클래스 팩토리
     const engine = inject(Engine);
     return new Car(engine);
   }}
 ]
 ```
 
-Calls to the [`inject`](api/core/inject) function outside of the class creation or `runInInjectionContext` will result in error. Most notably, calls to `inject()` are disallowed after a class instance was created, in methods (including lifecycle hooks):
+클래스 생성 또는 `runInInjectionContext` 외부에서 [`inject`](api/core/inject) 함수를 호출하면 오류가 발생합니다. 특히, 클래스 인스턴스가 생성된 후 메서드(라이프사이클 후크 포함)에서 `inject()`를 호출하는 것은 금지됩니다:
 
 ```typescript
 @Component({ ... })
 export class CarComponent {
   ngOnInit() {
-    // ERROR: too late, the component instance was already created
+    // 오류: 너무 늦었습니다. 컴포넌트 인스턴스는 이미 생성되었습니다
     const engine = inject(Engine);
     engine.start();
   }
 }
 ```
 
-## Debugging the error
+## 오류 디버깅
 
-Work backwards from the stack trace of the error to identify a place where the disallowed call to `inject()` is located.
+오류의 스택 추적에서 거꾸로 작업하여 허용되지 않는 `inject()` 호출이 있는 위치를 식별합니다.
 
-To fix the error move the [`inject`](api/core/inject) call to an allowed place (usually a class constructor or a field initializer).
+오류를 수정하려면 [`inject`](api/core/inject) 호출을 허용된 위치(대개 클래스 생성자 또는 필드 초기화자)로 이동합니다.
 
-**Note:** If you are running in a test context, `TestBed.runInInjectionContext` will enable `inject()` to succeed.
+**참고:** 테스트 컨텍스트에서 실행 중인 경우, `TestBed.runInInjectionContext`를 사용하면 `inject()`가 성공합니다.
 
 ```typescript
 TestBed.runInInjectionContext(() => {
    // ...
-});
-```
+});
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0209.md b/adev/src/content/reference/errors/NG0209.md
index 5a9b8615d2f9..1b84edf36cb3 100644
--- a/adev/src/content/reference/errors/NG0209.md
+++ b/adev/src/content/reference/errors/NG0209.md
@@ -1,5 +1,3 @@
 # Invalid multi provider
 
-The Angular runtime will throw this error when it injects a token intended to be used with `multi: true` but
-a non-Array was found instead. For example, `ENVIRONMENT_INITIALIZER` should be provided
-like `{provide: ENVIRONMENT_INITIALIZER, multi: true, useValue: () => {...}}`.
+Angular 런타임은 `multi: true`와 함께 사용하기 위해 의도된 토큰을 주입할 때 이 오류를 발생시킵니다. 하지만 대신 비배열이 발견된 경우입니다. 예를 들어, `ENVIRONMENT_INITIALIZER`는 `{provide: ENVIRONMENT_INITIALIZER, multi: true, useValue: () => {...}}`와 같이 제공되어야 합니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG02200.md b/adev/src/content/reference/errors/NG02200.md
index 79d98667ee11..f97c3f52ce2d 100644
--- a/adev/src/content/reference/errors/NG02200.md
+++ b/adev/src/content/reference/errors/NG02200.md
@@ -1,8 +1,8 @@
 # Missing Iterable Differ
 
-`NgFor` could not find an iterable differ for the value passed in. Make sure it's an iterable, like an `Array`.
+`NgFor`는 전달된 값에 대한 iterable differ를 찾을 수 없습니다. iterable이 있는지 확인하세요, 예를 들어 `Array`와 같은 것입니다.
 
-## Debugging the error
+## 오류 디버깅
 
-When using ngFor in a template, you must use some type of Iterable, like `Array`, `Set`, `Map`, etc.
-If you're trying to iterate over the keys in an object, you should look at the [KeyValue pipe](/api/common/KeyValuePipe) instead.
+템플릿에서 ngFor를 사용할 때는 `Array`, `Set`, `Map` 등과 같은 일부 유형의 Iterable을 사용해야 합니다.
+객체의 키를 반복하려는 경우 [KeyValue pipe](/api/common/KeyValuePipe)를 참조해야 합니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG02800.md b/adev/src/content/reference/errors/NG02800.md
index eb1ce5e09308..a6e7d2e1a98a 100644
--- a/adev/src/content/reference/errors/NG02800.md
+++ b/adev/src/content/reference/errors/NG02800.md
@@ -1,8 +1,10 @@
-# JSONP support in HttpClient configuration
+# JSONP 지원을 위한 HttpClient 구성
 
-Angular produces this error when you attempt a `JSONP` request without providing the necessary support for it in the `HttpClient` configuration.
-To enable `JSONP` support, you can do one of the following:
+Angular는 `HttpClient` 구성에서 필요한 지원을 제공하지 않고 `JSONP` 요청을 시도할 때 이 오류를 발생시킵니다.  
+`JSONP` 지원을 활성화하려면 다음 중 하나를 수행할 수 있습니다:
 
-- add the `withJsonpSupport()` as an argument during the `provideHttpClient` function call (e.g. `provideHttpClient(withJsonpSupport())`) when `bootstrapApplication` is used
-- import the `HttpClientJsonpModule` in your root AppModule, when NgModule-based bootstrap is used.## Debugging the error
-Make sure that the JSONP support is added into your application either by calling the `withJsonpSupport` function (when `provideHttpClient` is used) or importing the `HttpClientJsonpModule` module as described above.
+- `bootstrapApplication`을 사용할 때 `provideHttpClient` 함수 호출 시 인수로 `withJsonpSupport()`를 추가합니다 (예: `provideHttpClient(withJsonpSupport())`)
+- NgModule 기반 부트스트랩을 사용할 때 루트 AppModule에서 `HttpClientJsonpModule`을 가져옵니다.
+
+## 오류 디버깅  
+`provideHttpClient`가 사용될 때 `withJsonpSupport` 함수를 호출하거나 위에서 설명한 대로 `HttpClientJsonpModule` 모듈을 가져와서 애플리케이션에 JSONP 지원이 추가되었는지 확인하십시오.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0300.md b/adev/src/content/reference/errors/NG0300.md
index 86ed0d205f41..546d529202aa 100644
--- a/adev/src/content/reference/errors/NG0300.md
+++ b/adev/src/content/reference/errors/NG0300.md
@@ -1,10 +1,10 @@
-# Selector Collision
+# 선택자 충돌
 
 <docs-video src="https://www.youtube.com/embed/z_3Z5mOm59I"/>
 
-Two or more [components](guide/components) use the same element selector. Because there can only be a single component associated with an element, selectors must be unique strings to prevent ambiguity for Angular.
+두 개 이상의 [컴포넌트](guide/components)가 동일한 요소 선택자를 사용합니다. 한 요소와 연결될 수 있는 컴포넌트는 하나만 존재할 수 있기 때문에, 선택자는 Angular의 모호성을 방지하기 위해 고유한 문자열이어야 합니다.
 
-This error occurs at runtime when you apply two selectors to a single node, each of which matches a different component, or when you apply a single selector to a node and it matches more than one component.
+이 오류는 두 개의 선택자를 단일 노드에 적용할 때 발생하며, 각각은 서로 다른 컴포넌트에 일치하거나, 단일 선택자를 노드에 적용했을 때 두 개 이상의 컴포넌트와 일치할 경우 발생합니다.
 
 <docs-code language="typescript">
 
@@ -26,7 +26,7 @@ export class RaisedBtnComponent {}
 @Component({
   selector: 'app-root',
   template: `
-  <!-- This node has 2 selectors: stroked-button and raised-button, and both match a different component: StrokedBtnComponent, and RaisedBtnComponent , so NG0300 will be raised  -->
+  <!-- 이 노드는 2개의 선택자: stroked-button과 raised-button을 가지고 있으며, 각각 StrokedBtnComponent와 RaisedBtnComponent라는 서로 다른 컴포넌트에 일치하므로 NG0300 오류가 발생할 것입니다. -->
   <button stroked-button  raised-button></button>
   `,
 })
@@ -34,9 +34,9 @@ export class AppComponent {}
 
 </docs-code>
 
-## Debugging the error
+## 오류 디버깅
 
-Use the element name from the error message to search for places where you're using the same selector declaration in your codebase:
+오류 메시지에서 요소 이름을 사용하여 코드베이스에서 동일한 선택자 선언을 사용하는 곳을 검색합니다:
 
 <docs-code language="typescript">
 
@@ -47,6 +47,6 @@ Use the element name from the error message to search for places where you're us
 
 </docs-code>
 
-Ensure that each component has a unique CSS selector. This will guarantee that Angular renders the component you expect.
+각 컴포넌트가 고유한 CSS 선택자를 갖도록 하십시오. 이렇게 하면 Angular가 예상하는 컴포넌트를 렌더링하도록 보장됩니다.
 
-If you're having trouble finding multiple components with this selector tag name, check for components from imported component libraries, such as Angular Material. Make sure you're following the [best practices](style-guide#component-selectors) for your selectors to prevent collisions.
+이 선택자 태그 이름을 가진 여러 컴포넌트를 찾는데 어려움이 있는 경우, Angular Material과 같은 가져온 컴포넌트 라이브러리에서 컴포넌트를 확인하세요. 선택자 간의 충돌을 방지하기 위해 [최고의 관행](style-guide#component-selectors)을 따르고 있는지 확인하십시오.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0301.md b/adev/src/content/reference/errors/NG0301.md
index a08b31f19ae6..d2abdff41c0c 100644
--- a/adev/src/content/reference/errors/NG0301.md
+++ b/adev/src/content/reference/errors/NG0301.md
@@ -2,15 +2,15 @@
 
 <docs-video src="https://www.youtube.com/embed/fUSAg4kp2WQ"/>
 
-Angular can't find a directive with `{{ PLACEHOLDER }}` export name. The export name is specified in the `exportAs` property of the directive decorator. This is common when using FormsModule or Material modules in templates and you've forgotten to import the corresponding modules.
+Angular은 `{{ PLACEHOLDER }}` export 이름을 가진 지시자를 찾을 수 없습니다. export 이름은 지시자 데코레이터의 `exportAs` 속성에 지정되어 있습니다. 이는 FormsModule 또는 Material 모듈을 템플릿에서 사용할 때 흔히 발생하며, 해당 모듈을 가져오는 것을 잊은 경우입니다.
 
-HELPFUL: This is the runtime equivalent of a common compiler error [NG8003: No directive found with export](errors/NG8003).
+도움이 됩니다: 이는 일반적인 컴파일러 오류인 [NG8003: No directive found with export](errors/NG8003)의 런타임 동등물입니다.
 
-## Debugging the error
+## 오류 디버깅
 
-Use the export name to trace the templates or modules using this export.
+export 이름을 사용해 이 export를 사용하는 템플릿이나 모듈을 추적하세요.
 
-Ensure that all dependencies are properly imported and declared in your NgModules. For example, if the export not found is `ngForm`, we need to import `FormsModule` and declare it in the list of imports in `*.module.ts` to resolve the error.
+모든 의존성이 제대로 가져오고 선언되었는지 확인하세요. 예를 들어, 찾을 수 없는 export가 `ngForm`인 경우, 우리는 `FormsModule`을 가져오고 `*.module.ts`의 import 목록에 선언해야 이 오류를 해결할 수 있습니다.
 
 <docs-code language="typescript">
 
@@ -24,4 +24,4 @@ import { FormsModule } from '@angular/forms';
 
 </docs-code>
 
-If you recently added an import, you may need to restart your server to see these changes.
+최근에 import를 추가했다면, 이러한 변경 사항을 보려면 서버를 다시 시작해야 할 수도 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0302.md b/adev/src/content/reference/errors/NG0302.md
index 451b2b64bf9e..b6ae3b773e55 100644
--- a/adev/src/content/reference/errors/NG0302.md
+++ b/adev/src/content/reference/errors/NG0302.md
@@ -1,23 +1,23 @@
-# Pipe Not Found
+# 파이프를 찾을 수 없음
 
 <docs-video src="https://www.youtube.com/embed/maI2u6Sxk9M"/>
 
-Angular can't find a pipe with this name.
+Angular는 이 이름을 가진 파이프를 찾을 수 없습니다.
 
-The [pipe](guide/templates/pipes) referenced in the template has not been named or declared properly.
+템플릿에서 참조된 [파이프](guide/templates/pipes)는 제대로 이름이 지정되거나 선언되지 않았습니다.
 
-To use the pipe:
+파이프를 사용하려면:
 
-- Ensure the name used in a template matches the name defined in the pipe decorator.
-- Add the pipe to your component's `imports` array or, if the pipe sets `standalone: false`, add the `NgModule` to which the pipe belongs.
+- 템플릿에서 사용된 이름이 파이프 데코레이터에 정의된 이름과 일치하는지 확인하십시오.
+- 컴포넌트의 `imports` 배열에 파이프를 추가하거나, 만약 파이프가 `standalone: false`로 설정되어 있다면, 파이프가 포함된 `NgModule`을 추가하십시오.
 
-## Debugging the error
+## 오류 디버깅
 
-Use the pipe name to trace where the pipe is declared and used.
+파이프 이름을 사용하여 파이프가 선언되고 사용되는 위치를 추적하십시오.
 
-To resolve this error:
+이 오류를 해결하려면:
 
-- If the pipe is local to the `NgModule`, give it a unique name in the pipe's decorator and declared it in the `NgModule`.
-- If the pipe is standalone or is declared in another `NgModule`, add it to the `imports` field of the standalone component or the current `NgModule`.
+- 파이프가 `NgModule`에 로컬인 경우, 파이프의 데코레이터에서 고유한 이름을 부여하고 `NgModule`에서 선언하십시오.
+- 파이프가 독립형이거나 다른 `NgModule`에서 선언된 경우, 독립형 컴포넌트 또는 현재 `NgModule`의 `imports` 필드에 추가하십시오.
 
-If you recently added an import or declaration, you may need to restart your server to see these changes.
+최근에 가져오거나 선언한 내용을 추가한 경우, 이러한 변경 사항을 보려면 서버를 재시작해야 할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0403.md b/adev/src/content/reference/errors/NG0403.md
index a78c1d99ceae..95fcf9daf515 100644
--- a/adev/src/content/reference/errors/NG0403.md
+++ b/adev/src/content/reference/errors/NG0403.md
@@ -1,12 +1,12 @@
-# Bootstrapped NgModule doesn't specify which component to initialize
+# 부트스트랩된 NgModule이 초기화할 구성 요소를 지정하지 않음
 
-This error means that an NgModule that was used for bootstrapping an application is missing key information for Angular to proceed with the bootstrap process.
+이 오류는 애플리케이션을 부트스트랩하는 데 사용된 NgModule이 Angular가 부트스트랩 프로세스를 진행하는 데 필요한 핵심 정보가 누락되었음을 의미합니다.
 
-The error happens when the NgModule `bootstrap` property is missing (or is an empty array) in the `@NgModule` annotation and there is no `ngDoBootstrap` lifecycle hook defined on that NgModule class.
+이 오류는 `@NgModule` 주석에서 NgModule의 `bootstrap` 속성이 누락되었거나 (또는 빈 배열일 때) 해당 NgModule 클래스에 정의된 `ngDoBootstrap` 생명 주기 훅이 없을 때 발생합니다.
 
-More information about the bootstrapping process can be found in [this guide](guide/ngmodules/bootstrapping).
+부트스트랩 프로세스에 대한 자세한 내용은 [이 가이드](guide/ngmodules/bootstrapping)에서 확인할 수 있습니다.
 
-The following examples will trigger the error.
+다음 예제는 오류를 발생시킵니다.
 
 ```typescript
 @NgModule({
@@ -16,7 +16,7 @@ The following examples will trigger the error.
 })
 export class AppModule {}
 
-// The `AppModule` is used for bootstrapping, but the `@NgModule.bootstrap` field is missing.
+// `AppModule`은 부트스트랩에 사용되지만, `@NgModule.bootstrap` 필드가 누락되었습니다.
 platformBrowser().bootstrapModule(AppModule);
 ```
 
@@ -29,13 +29,13 @@ platformBrowser().bootstrapModule(AppModule);
 })
 export class AppModule {}
 
-// The `AppModule` is used for bootstrapping, but the `@NgModule.bootstrap` field contains an empty array.
+// `AppModule`은 부트스트랩에 사용되지만, `@NgModule.bootstrap` 필드가 빈 배열입니다.
 platformBrowser().bootstrapModule(AppModule);
 ```
 
-## Debugging the error
+## 오류 디버깅
+  
+부트스트랩에 사용되는 NgModule이 올바르게 설정되었는지 확인하시기 바랍니다:
 
-Please make sure that the NgModule that is used for bootstrapping is set up correctly:
-
-- either the `bootstrap` property exists (and contains a non-empty array) in the `@NgModule` annotation
-- or the `ngDoBootstrap` method exists on the NgModule class
+- `bootstrap` 속성이 존재하고 (비어 있지 않은 배열을 포함) `@NgModule` 주석에 포함되어야 합니다.
+- 또는 NgModule 클래스에 `ngDoBootstrap` 메서드가 존재해야 합니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0500.md b/adev/src/content/reference/errors/NG0500.md
index 3c5d6b012216..387ef4e1e78b 100644
--- a/adev/src/content/reference/errors/NG0500.md
+++ b/adev/src/content/reference/errors/NG0500.md
@@ -1,12 +1,12 @@
-# Hydration Node Mismatch
+# 수분 공급 노드 불일치
 
-This error means that during the hydration process, Angular expected a DOM structure as rendered and annotated during server-side rendering. However, on the client, the DOM tree was different than the server rendered DOM tree.
+이 오류는 수분 공급 과정에서 Angular가 서버 측 렌더링 중에 렌더링되고 주석이 달린 DOM 구조를 예상했음을 의미합니다. 그러나 클라이언트에서 DOM 트리는 서버 렌더링된 DOM 트리와 달랐습니다.
 
-This error typically happens due to direct DOM manipulation using native browser APIs that alter the DOM structure outside of what Angular produced. It will also occur if you use `innerHTML` or `outerHTML` to set HTML content, which similarly alters the DOM structure outside of what Angular produced. You can resolve this by refactoring the component to use native Angular APIs instead of native APIs. If that's not possible, you can add the `ngSkipHydration` attribute to your component's host node, which will disable hydration for the component and its children. `ngSkipHydration` should only be used as a last resort and should be considered a bug that needs to be fixed.
+이 오류는 일반적으로 Angular가 생성한 것 외부에서 DOM 구조를 변경하는 기본 브라우저 API를 사용한 직접 DOM 조작으로 인해 발생합니다. 또한 HTML 콘텐츠를 설정하기 위해 `innerHTML` 또는 `outerHTML`을 사용하는 경우에도 발생합니다. 이는 유사하게 Angular가 생성한 것 외부에서 DOM 구조를 변경합니다. 이를 해결하기 위해 기본 API 대신 기본 Angular API를 사용하도록 구성 요소를 리팩토링할 수 있습니다. 그렇게 할 수 없다면, 구성 요소의 호스트 노드에 `ngSkipHydration` 속성을 추가하여 구성 요소와 그 자식의 수분 공급을 비활성화할 수 있습니다. `ngSkipHydration`은 마지막 수단으로만 사용해야 하며 수정이 필요한 버그로 간주되어야 합니다.
 
-More information about hydration can be found in [this guide](guide/hydration).
+수분 공급에 대한 추가 정보는 [이 가이드](guide/hydration)에서 확인할 수 있습니다.
 
-The following example will trigger the error.
+다음 예는 오류를 발생시킵니다.
 
 ```typescript
 @Component({
@@ -17,25 +17,25 @@ export class ExampleComponent {
   hostElement = inject(ElementRef).nativeElement;
 
   ngOnInit() {
-    // Create a new <p> element with the `Hello` text inside
+    // `Hello` 텍스트가 포함된 새로운 <p> 요소 생성
     const newNode = document.createElement('p');
     newNode.innerHTML = 'Hello';
 
-    // Insert the <p> before the first element. Since Angular has no information
-   // about the <p> element, it will be looking for the <div> element at the first
-   // element position instead. As a result, a hydration mismatch error would be
-   // thrown. Instead, update component's template to create the <p> element.
-   this.hostElement.insertBefore(newNode, this.hostElement.firstChild);
+    // 첫 번째 요소 이전에 <p> 삽입. Angular는 <p> 요소에 대한 정보가 없으므로 
+    // 첫 번째 요소 위치에서 대신 <div> 요소를 찾고 있습니다.
+    // 결과적으로 수분 공급 불일치 오류가 발생합니다.
+    // 대신 구성 요소의 템플릿을 업데이트하여 <p> 요소를 생성해야 합니다.
+    this.hostElement.insertBefore(newNode, this.hostElement.firstChild);
  }
 }
 ```
 
-## Debugging the error
+## 오류 디버깅
 
-The error message in the developer console should contain information on a specific part of the application's DOM structure that is causing the problem. Review that part of the application for hydration-related errors, such as direct DOM manipulation using native APIs.
+개발자 콘솔의 오류 메시지는 문제를 일으키는 애플리케이션의 DOM 구조의 특정 부분에 대한 정보를 포함해야 합니다. 기본 API를 사용한 직접 DOM 조작과 같은 수분 공급 관련 오류에 대해 애플리케이션의 해당 부분을 검토하십시오.
 
-Check that your template has valid HTML structure. See more information in the [hydration guide](guide/hydration#valid-html-structure).
+템플릿에 유효한 HTML 구조가 있는지 확인하십시오. [수분 공급 가이드](guide/hydration#valid-html-structure)에서 추가 정보를 확인하세요.
 
-You can add the `ngSkipHydration` attribute to your component host node as a possible workaround.
+구성 요소 호스트 노드에 `ngSkipHydration` 속성을 추가할 수 있는 임시 해결책입니다.
 
-If your application works in development environment, but you see hydration errors in production builds, make sure that the generated HTML that is delivered to a browser contains comment nodes produced by Angular during the rendering on the server. Those comment nodes are used by Angular runtime as anchors for view containers (with and without hydration) and hydration process expects them to be present at their original locations. If you have a custom logic to remove comment nodes from the HTML generated by the server-side rendering or you've configured your CDN to remove them before serving the content - disable the comment nodes removal and check if hydration errors are gone.
+개발 환경에서 애플리케이션이 작동하지만 프로덕션 빌드에서 수분 공급 오류가 표시되는 경우, 브라우저에 제공되는 생성된 HTML이 서버의 렌더링 중 Angular가 생성한 주석 노드를 포함하는지 확인하십시오. 이러한 주석 노드는 Angular 런타임에서 뷰 컨테이너(수분 공급 여부와 관계없이)의 앵커로 사용되며, 수분 공급 과정은 원래 위치에 존재할 것으로 예상합니다. 서버 측 렌더링에서 생성된 HTML에서 주석 노드를 제거하는 사용자 정의 논리가 있는 경우 또는 CDN이 콘텐츠를 제공하기 전에 이를 제거하도록 구성된 경우 - 주석 노드 제거를 비활성화하고 수분 공급 오류가 사라졌는지 확인하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG05000.md b/adev/src/content/reference/errors/NG05000.md
index 6e7f135b5479..ed721d2b83ed 100644
--- a/adev/src/content/reference/errors/NG05000.md
+++ b/adev/src/content/reference/errors/NG05000.md
@@ -1,11 +1,11 @@
 # Hydration with unsupported Zone.js instance
 
-This warning means that the hydration was enabled for an application that was configured to use an unsupported version of Zone.js: either a custom or a "noop" one (see more info [here](api/core/BootstrapOptions#ngZone)).
+이 경고는 잘못된 버전의 Zone.js(커스텀 버전 또는 "noop" 버전)를 사용하도록 구성된 애플리케이션에 대해 Hydration이 활성화되었다는 것을 의미합니다(자세한 내용은 [여기](api/core/BootstrapOptions#ngZone)에서 확인하세요).
 
-Hydration relies on a signal from Zone.js when it becomes stable inside an application, so that Angular can start the serialization process on the server or post-hydration cleanup on the client (to remove DOM nodes that remained unclaimed).
+Hydration은 애플리케이션 내부에서 안정적이 되었을 때 Zone.js 신호에 의존하므로, Angular는 서버에서 직렬화 프로세스를 시작하거나 클라이언트에서 포스트 Hydration 정리를 시작할 수 있습니다(미청구된 DOM 노드를 제거하기 위해).
 
-Providing a custom or a "noop" Zone.js implementation may lead to a different timing of the "stable" event, thus triggering the serialization or the cleanup too early or too late. This is not yet a fully supported configuration.
+커스텀 또는 "noop" Zone.js 구현을 제공하면 "안정적" 이벤트의 타이밍이 달라질 수 있으며, 이는 직렬화 또는 정리가 너무 이르거나 늦게 발생하도록 할 수 있습니다. 이는 아직 완전히 지원되는 구성은 아닙니다.
 
-If you use a custom Zone.js implementation, make sure that the "onStable" event is emitted at the right time and does not result in incorrect application behavior with hydration.
+커스텀 Zone.js 구현을 사용하는 경우, "onStable" 이벤트가 올바른 시간에 방출되며 Hydration으로 인한 애플리케이션 행동의 오류를 유발하지 않도록 하십시오.
 
-More information about hydration can be found in the [hydration guide](guide/hydration).
+Hydration에 대한 자세한 내용은 [Hydration 가이드](guide/hydration)를 참조하십시오.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0501.md b/adev/src/content/reference/errors/NG0501.md
index d4904663f34c..f870e3a1eb68 100644
--- a/adev/src/content/reference/errors/NG0501.md
+++ b/adev/src/content/reference/errors/NG0501.md
@@ -1,7 +1,7 @@
 # Hydration Missing Siblings
 
-This error is similar to the [error NG0500](errors/NG0500), but it indicates that Angular hydration process expected more siblings present in the DOM structure at a particular location. Please refer to the [error NG0500](errors/NG0500) page for additional information.
+이 오류는 [오류 NG0500](errors/NG0500)와 유사하지만, Angular 수화 과정이 특정 위치의 DOM 구조에 더 많은 형제 요소가 존재하기를 기대했다는 것을 나타냅니다. 추가 정보는 [오류 NG0500](errors/NG0500) 페이지를 참조하시기 바랍니다.
 
-## Debugging the error
+## 오류 디버깅
 
-See the [error NG0500](errors/NG0500) for more information on how to debug this error.
+이 오류를 디버깅하는 방법에 대한 자세한 정보는 [오류 NG0500](errors/NG0500)을 참조하십시오.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0502.md b/adev/src/content/reference/errors/NG0502.md
index a0ba1df9a5a9..98161ef14759 100644
--- a/adev/src/content/reference/errors/NG0502.md
+++ b/adev/src/content/reference/errors/NG0502.md
@@ -1,7 +1,7 @@
 # Hydration Missing Node
 
-This error is similar to the [error NG0500](errors/NG0500), but it indicates that Angular hydration process expected a node to be present in the DOM structure at a particular location and none was found. Please refer to the [error NG0500](errors/NG0500) page for additional information.
+이 오류는 [오류 NG0500](errors/NG0500)와 유사하지만, Angular 수화 과정이 특정 위치에 DOM 구조에 노드가 존재할 것으로 예상했으나 아무것도 발견되지 않았음을 나타냅니다. 추가 정보는 [오류 NG0500](errors/NG0500) 페이지를 참조하십시오.
 
-## Debugging the error
+## 오류 디버깅
 
-See the [error NG0500](errors/NG0500) for more information on how to debug this error.
+이 오류를 디버깅하는 방법에 대한 자세한 내용은 [오류 NG0500](errors/NG0500)을 참조하십시오.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0503.md b/adev/src/content/reference/errors/NG0503.md
index 950821aeb997..3983d87a5cf9 100644
--- a/adev/src/content/reference/errors/NG0503.md
+++ b/adev/src/content/reference/errors/NG0503.md
@@ -1,10 +1,10 @@
 # Hydration Unsupported Projection of DOM Nodes
 
-This error means that during the server-side serialization process, Angular encountered nodes that were created outside of Angular's context (i.e. using native DOM APIs) and found those nodes were provided as projectable nodes. They were likely provided using `ViewContainerRef.createComponent` or `createComponent` APIs. Angular hydration does not support this use case.
+이 오류는 서버 측 직렬화 프로세스 중에 Angular가 Angular의 컨텍스트 외부에서 생성된 노드(즉, 네이티브 DOM API를 사용하여)를 발견하고 이러한 노드가 프로젝터블 노드로 제공되었다는 것을 의미합니다. 이들은 아마도 `ViewContainerRef.createComponent` 또는 `createComponent` API를 사용하여 제공되었을 것입니다. Angular 수분화는 이 사용 사례를 지원하지 않습니다.
 
-More information about hydration can be found in [this guide](guide/hydration).
+수분화에 대한 추가 정보는 [이 가이드](guide/hydration)에서 찾을 수 있습니다.
 
-The following examples will trigger the error.
+다음 예제는 오류를 발생시킵니다.
 
 ```typescript
 @Component({
@@ -27,9 +27,9 @@ class SimpleComponent {
   ngAfterViewInit() {
     const div = document.createElement('div');
     const p = document.createElement('p');
-    // In this test we create DOM nodes outside of Angular context
-    // (i.e. not using Angular APIs) and try to content-project them.
-    // This is an unsupported pattern and an exception will be thrown.
+    // 이 테스트에서는 Angular 컨텍스트 외부에서 DOM 노드를 생성합니다
+    // (즉, Angular API를 사용하지 않음) 및 이를 콘텐츠 프로젝트하려고 합니다.
+    // 이는 지원되지 않는 패턴이며 예외가 발생합니다.
     const compRef = createComponent(DynamicComponent, {
       environmentInjector: this.envInjector,
       projectableNodes: [[div, p]]
@@ -38,8 +38,8 @@ class SimpleComponent {
 }
 ```
 
-## Debugging the error
+## 오류 디버깅
 
-The error message in the developer console should contain information on a specific part of the application's DOM structure that is causing the problem. Review that part of the application for hydration-related errors, such as direct DOM manipulation using native APIs.
+개발자 콘솔의 오류 메시지는 문제를 일으키는 애플리케이션 DOM 구조의 특정 부분에 대한 정보를 포함해야 합니다. 네이티브 API를 사용한 직접 DOM 조작과 같은 수분화 관련 오류가 있는지 애플리케이션의 해당 부분을 검토하세요.
 
-You can add the `ngSkipHydration` attribute to your component host node as a possible workaround.
+가능한 해결 방법으로 컴포넌트 호스트 노드에 `ngSkipHydration` 속성을 추가할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0504.md b/adev/src/content/reference/errors/NG0504.md
index b45b1c334379..16f74781668f 100644
--- a/adev/src/content/reference/errors/NG0504.md
+++ b/adev/src/content/reference/errors/NG0504.md
@@ -1,14 +1,14 @@
-# Skip hydration flag is applied to an invalid node
+# 잘못된 노드에 skip hydration 플래그가 적용됨
 
-This error occurs when the `ngSkipHydration` attribute was added to an inappropriate DOM node. The `ngSkipHydration` attribute can only be applied to component host nodes either directly in the template or via a host binding. It cannot be applied to other DOM nodes and will have no effect if done so other than causing this error.
+이 오류는 `ngSkipHydration` 속성이 부적절한 DOM 노드에 추가되었을 때 발생합니다. `ngSkipHydration` 속성은 컴포넌트 호스트 노드에만 직접적으로 템플릿에서 또는 호스트 바인딩을 통해 적용할 수 있습니다. 다른 DOM 노드에 적용할 수 없으며, 그렇게 하면 이 오류를 발생시키는 것 외에는 아무런 효과가 없습니다.
 
-More information about hydration can be found in [this guide](guide/hydration).
+수화에 대한 추가 정보는 [이 가이드](guide/hydration)에서 확인할 수 있습니다.
 
-The following examples will trigger the error.
+다음 예제는 오류를 발생시킵니다.
 
-## Example 1
+## 예제 1
 
-In this example, the `ngSkipHydration` attribute is applied to a `<div>` using host bindings of a directive. Since the `<div>` doesn't act as a component host node, Angular will throw an error.
+이 예제에서는 `ngSkipHydration` 속성이 지시문의 호스트 바인딩을 사용하여 `<div>`에 적용됩니다. `<div>`가 컴포넌트 호스트 노드로 작동하지 않기 때문에 Angular는 오류를 발생시킵니다.
 
 ```typescript
 @Directive({
@@ -29,10 +29,10 @@ class SimpleComponent {
 }
 ```
 
-## Example 2
+## 예제 2
 
-In this example, the `ngSkipHydration` is applied to a `<div>` as an attribute via a template.
-Since the `<div>` doesn't act as a component host node, Angular will throw an error.
+이 예제에서는 `ngSkipHydration` 속성이 템플릿을 통해 속성으로 `<div>`에 적용됩니다.
+`<div>`가 컴포넌트 호스트 노드로 작동하지 않기 때문에 Angular는 오류를 발생시킵니다.
 
 ```typescript
 @Component({
@@ -45,6 +45,6 @@ class SimpleComponent {
 }
 ```
 
-## Debugging the error
+## 오류 디버깅
 
-Remove the `ngSkipHydration` attribute from any invalid DOM nodes. Alternatively, move the `ngSkipHydration` attribute to the component host node either in a template or via a host binding.
+유효하지 않은 DOM 노드에서 `ngSkipHydration` 속성을 제거하십시오. 또는 템플릿에서 또는 호스트 바인딩을 통해 컴포넌트 호스트 노드로 `ngSkipHydration` 속성을 이동하십시오.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0505.md b/adev/src/content/reference/errors/NG0505.md
index c8a645a33489..07e6b15a702a 100644
--- a/adev/src/content/reference/errors/NG0505.md
+++ b/adev/src/content/reference/errors/NG0505.md
@@ -1,24 +1,15 @@
-# No hydration info in server response
+# 서버 응답에 하이드레이션 정보가 없음
 
-This error occurs when hydration is enabled on the client, but the server response
-doesn't contain special serialized information about the application that hydration
-logic relies on.
+이 오류는 클라이언트에서 하이드레이션이 활성화되어 있지만 서버 응답에 하이드레이션 로직이 의존하는 애플리케이션에 대한 특별한 직렬화된 정보가 포함되어 있지 않을 때 발생합니다.
 
-This can happen when the `provideClientHydration()` function is included in the client
-part of the application configuration, but is missing in the server part of the configuration.
+이 문제는 `provideClientHydration()` 함수가 애플리케이션 구성의 클라이언트 부분에 포함되어 있지만 서버 부분의 구성에는 누락될 때 발생할 수 있습니다.
 
-In applications with the default project structure (generated by the `ng new`),
-the `provideClientHydration()` call is added either into the `providers` array of
-the main `AppModule` (which is imported into the server module) or into a set of
-providers that are included into both client and server configurations.
+기본 프로젝트 구조( `ng new`로 생성됨)의 애플리케이션에서, `provideClientHydration()` 호출은 주 `AppModule`의 `providers` 배열에 추가되거나 클라이언트와 서버 구성 모두에 포함되는 프로바이더 집합에 추가됩니다.
 
-If you have a custom setup where client and server configuration are independent
-and do not share common set of providers, make sure that the `provideClientHydration()`
-is also included into the set of providers used to bootstrap an application on the server.
+클라이언트와 서버 구성 간에 독립적인 사용자 지정 설정이 있는 경우 공통 제공자 집합을 공유하지 않도록 하십시오. `provideClientHydration()`도 서버에서 애플리케이션을 부트스트랩하는 데 사용되는 프로바이더 집합에 포함되어야 합니다.
 
-More information about hydration can be found in [this guide](guide/hydration).
+하이드레이션에 대한 더 많은 정보는 [이 가이드](guide/hydration)에서 확인할 수 있습니다.
 
-## Debugging the error
+## 오류 디버깅
 
-Verify that the `provideClientHydration()` call is included into a set of providers
-that is used to bootstrap an application on the server.
+서버에서 애플리케이션을 부트스트랩하는 데 사용되는 프로바이더 집합에 `provideClientHydration()` 호출이 포함되어 있는지 확인하십시오.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0506.md b/adev/src/content/reference/errors/NG0506.md
index 9c3760c680fa..09e427f60016 100644
--- a/adev/src/content/reference/errors/NG0506.md
+++ b/adev/src/content/reference/errors/NG0506.md
@@ -1,24 +1,23 @@
-# Application remains unstable
+# 애플리케이션이 불안정합니다
 
-This warning only appears in the browser during the hydration process when it's enabled on the client but the application remains unstable for an extended period of time (over 10 seconds).
+이 경고는 클라이언트에서 활성화될 때 수화 과정에서 브라우저에만 나타나며, 애플리케이션이 오랜 시간(10초 이상) 불안정하게 유지될 때 나타납니다.
 
-Typically that happens when there are some pending microtasks or macrotasks on a page.
+일반적으로 이는 페이지에 보류 중인 마이크로 작업이나 매크로 작업이 있을 때 발생합니다.
 
-Angular Hydration relies on a signal from `ApplicationRef.isStable` when it becomes stable inside an application:
+Angular 수화는 애플리케이션 내부에서 안정된 상태가 될 때 `ApplicationRef.isStable`의 신호에 의존합니다:
 
-- during the server-side rendering (SSR) to start the serialization process
-- in a browser this signal is used to start the post-hydration cleanup to remove DOM nodes that remained unclaimed
+- 서버 사이드 렌더링(SSR) 중 직렬화 프로세스를 시작하기 위해
+- 브라우저에서 이 신호는 청구되지 않은 DOM 노드를 제거하는 수화 후 정리를 시작하는 데 사용됩니다
 
-This warning is displayed when `ApplicationRef.isStable` does not emit `true` within 10 seconds. If this behavior is intentional and your application stabilizes later, you could choose to ignore this warning.
+이 경고는 `ApplicationRef.isStable`이 10초 이내에 `true`를 방출하지 않을 때 표시됩니다. 이 동작이 의도적이고 애플리케이션이 나중에 안정화된다면, 이 경고를 무시할 수 있습니다.
 
-## Applications that use zone.js
+## zone.js를 사용하는 애플리케이션
 
-Applications that use zone.js may have various factors contributing to delays in stability. These may include pending HTTP requests, timers (`setInterval`, `setTimeout`) or some logic that continuously invokes `requestAnimationFrame`.
+zone.js를 사용하는 애플리케이션은 안정성 지연에 기여하는 다양한 요인이 있을 수 있습니다. 여기에는 보류 중인 HTTP 요청, 타이머(`setInterval`, `setTimeout`) 또는 계속해서 `requestAnimationFrame`을 호출하는 일부 로직이 포함될 수 있습니다.
 
-### Macrotasks
+### 매크로 작업
 
-Macrotasks include functions like `setInterval`, `setTimeout`, `requestAnimationFrame`, etc.
-If one of these functions is called during the initialization phase of the application or in bootstrapped components, it may delay the moment when the application becomes stable.
+매크로 작업에는 `setInterval`, `setTimeout`, `requestAnimationFrame` 등의 함수가 포함됩니다. 이러한 함수 중 하나가 애플리케이션 초기화 단계 또는 부트스트랩된 컴포넌트에서 호출되면 애플리케이션이 안정적이 되는 시점을 지연시킬 수 있습니다.
 
 ```typescript
 @Component({
@@ -29,14 +28,14 @@ class SimpleComponent {
   constructor() {
     setInterval(() => { ... }, 1000)
 
-    // or
+    // 또는
 
     setTimeout(() => { ... }, 10_000)
   }
 }
 ```
 
-If these functions must be called during the initialization phase, invoking them outside the Angular zone resolves the problem:
+이러한 함수가 초기화 단계에서 호출되어야 한다면, Angular 존 외부에서 호출하면 문제를 해결할 수 있습니다:
 
 ```typescript
 class SimpleComponent {
@@ -50,13 +49,13 @@ class SimpleComponent {
 }
 ```
 
-### Third-party libraries
+### 서드파티 라이브러리
 
-Some third-party libraries can also produce long-running asynchronous tasks, which may delay application stability. The recommendation is to invoke relevant library code outside of the zone as described above.
+일부 서드파티 라이브러리 또한 애플리케이션 안정성을 지연시킬 수 있는 장기 실행 비동기 작업을 생성할 수 있습니다. 관련 라이브러리 코드를 위에서 설명한 대로 존 외부에서 호출하는 것이 권장됩니다.
 
-### Running code after an application becomes stable
+### 애플리케이션이 안정적이 된 후 코드 실행
 
-You can run a code that sets up asynchronous tasks once an application becomes stable:
+애플리케이션이 안정적으로 변한 이후에 비동기 작업을 설정하는 코드를 실행할 수 있습니다:
 
 ```typescript
 class SimpleComponent {
@@ -64,17 +63,17 @@ class SimpleComponent {
     const applicationRef = inject(ApplicationRef);
 
     applicationRef.isStable.pipe( first((isStable) => isStable) ).subscribe(() => {
-      // Note that we don't need to use `runOutsideAngular` because `isStable`
-      // emits events outside of the Angular zone when it's truthy (falsy values
-      // are emitted inside the Angular zone).
+      // `isStable`은 truthy일 때 Angular 존 외부에서 이벤트를 방출하므로
+      // `runOutsideAngular`를 사용할 필요가 없습니다 (falsy 값은
+      // Angular 존 내부에서 방출됩니다).
       setTimeout(() => { ... });
     });
   }
 }
 ```
 
-## Zoneless applications
+## 존 없는 애플리케이션
 
-In zoneless scenarios, stability might be delayed by an application code inside of an `effect` running in an infinite loop (potentially because signals used in effect functions keep changing) or a pending HTTP request.
+존 없는 시나리오에서 안정성은 무한 루프에서 실행 중인 애플리케이션 코드(효과 함수에서 사용되는 신호가 계속 변화할 수 있음) 또는 보류 중인 HTTP 요청으로 인해 지연될 수 있습니다.
 
-Developers may also explicitly contribute to indicating the application's stability by using the [`PendingTasks`](/api/core/PendingTasks) service. If you use the mentioned APIs in your application, make sure you invoke a function to mark the task as completed.
+개발자는 [`PendingTasks`](/api/core/PendingTasks) 서비스를 사용하여 애플리케이션의 안정성을 나타내도록 명시적으로 기여할 수도 있습니다. 애플리케이션에서 언급된 API를 사용하는 경우, 작업을 완료로 표시하는 함수를 호출하는 것을 잊지 말아야 합니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0507.md b/adev/src/content/reference/errors/NG0507.md
index 6ee4fc18a07b..f58c2c1fb69b 100644
--- a/adev/src/content/reference/errors/NG0507.md
+++ b/adev/src/content/reference/errors/NG0507.md
@@ -1,10 +1,10 @@
 # HTML content was altered after server-side rendering
 
-Angular throws this error when it detects that the content generated by server-side rendering (SSR) was altered after the rendering. The process of hydration relies on the content to be untouched after SSR, which also includes whitespaces and comment nodes. Those whitespaces and comment nodes must be retained in the HTML generated by the SSR process. Learn more in the Hydration guide.
+Angular은 서버 측 렌더링(SSR)으로 생성된 콘텐츠가 렌더링 후 변경되었음을 감지할 때 이 오류를 발생시킵니다. 수명주기와 관련된 프로세스는 SSR 후에 콘텐츠가 변경되지 않는 것에 의존하며, 여기에는 공백 및 주석 노드도 포함됩니다. 이러한 공백 및 주석 노드는 SSR 프로세스에 의해 생성된 HTML에서 유지되어야 합니다. Hydration 가이드에서 자세히 알아보세요.
 
-## Debugging the error
+## 오류 디버깅
 
-Typically this happens in the following cases:
+일반적으로 이 오류는 다음과 같은 경우에 발생합니다:
 
-Some CDN providers have a built-in feature to remove whitespaces and comment nodes from HTML as an optimization. Please verify if there is such an option in CDN configuration and turn it off.
-If you use custom post-processing of HTML generated by SSR (as a build step), make sure that this process doesn't remove whitespaces and comment nodes.
+일부 CDN 제공자는 최적화를 위해 HTML에서 공백 및 주석 노드를 제거하는 기능이 내장되어 있습니다. CDN 구성에 그런 옵션이 있는지 확인하고 끄세요.
+SSR로 생성된 HTML을 사용자 정의 후처리(빌드 단계로서)에 사용하는 경우, 이 프로세스가 공백 및 주석 노드를 제거하지 않도록 확인하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG05104.md b/adev/src/content/reference/errors/NG05104.md
index c67ab0337539..889ce6229cde 100644
--- a/adev/src/content/reference/errors/NG05104.md
+++ b/adev/src/content/reference/errors/NG05104.md
@@ -1,12 +1,12 @@
 # Root element was not found
 
-Bootstrapped components are defined in the `bootstrap` property of an `@NgModule` decorator or as the first parameter of `bootstrapApplication` for standalone components.
+부트스트랩된 컴포넌트는 `@NgModule` 데코레이터의 `bootstrap` 속성에 정의되거나 독립형 컴포넌트의 경우 `bootstrapApplication`의 첫 번째 매개변수로 정의됩니다.
 
-This error happens when Angular tries to bootstrap one of these components but cannot find its corresponding node in the DOM.
+이 오류는 Angular가 이러한 컴포넌트 중 하나를 부트스트랩하려고 할 때 해당 DOM에서 일치하는 노드를 찾지 못할 때 발생합니다.
 
-## Debugging the error
+## 오류 디버깅
 
-This issue occurs when the selector mismatches the tag
+이 문제는 셀렉터가 태그와 일치하지 않을 때 발생합니다.
 
 ```typescript
 @Component({
@@ -18,14 +18,13 @@ class AppComponent {}
 
 ```angular-html
 <html>
-    <app-root></app-root> <!-- Doesn't match the selector -->
+    <app-root></app-root> <!-- 셀렉터와 일치하지 않음 -->
 </html>
 ```
 
-Replace the tag with the correct one:
+태그를 올바른 것으로 교체하십시오:
 
 ```angular-html
 <html>
     <my-app></my-app> <!-- OK -->
-</html>
-```
+</html>
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0602.md b/adev/src/content/reference/errors/NG0602.md
index 38a92d47c3c6..9bfd48919491 100644
--- a/adev/src/content/reference/errors/NG0602.md
+++ b/adev/src/content/reference/errors/NG0602.md
@@ -1,36 +1,29 @@
-# Disallowed function call inside reactive context
+# 반응형 컨텍스트 내에서 허용되지 않은 함수 호출
 
-A function that is not allowed to run inside a reactive context was called from within a reactive context.
+반응형 컨텍스트 내에서 실행이 허용되지 않은 함수가 반응형 컨텍스트 내에서 호출되었습니다.
 
-For example, an `effect` cannot be scheduled from within a `computed` or an actively executing effect.
-Avoid calling functions like `effect` as part of template expressions, as those execute in their own reactive context.
+예를 들어, `computed` 또는 활성 실행 효과 내에서 `effect`를 예약할 수 없습니다. 템플릿 표현식의 일부분으로 `effect`와 같은 함수를 호출하는 것을 피하십시오. 이러한 함수는 자신의 반응형 컨텍스트 내에서 실행됩니다.
 
-Computed expressions are expected to be pure.
-Pure means that expression do not trigger any side effects.
-Side effects are operations like scheduling `afterRender`, creating a new `effect`, or subscribing to observables.
+계산된 표현식은 순수한 것으로 기대됩니다. 순수하다는 것은 표현식이 부작용을 발생시키지 않음을 의미합니다. 부작용은 `afterRender` 예약, 새로운 `effect` 생성 또는 관측 가능 항목에 구독하는 것과 같은 작업입니다.
 
-Some operations are explicitly banned inside reactive contexts in order to avoid common pitfalls.
-As an example, using `afterRender` inside a `computed` will schedule new render hooks every time the computed expression evaluates.
-This is likely not intended and could degrade application performance.
+일부 작업은 일반적인 함정에 빠지지 않도록 반응형 컨텍스트 내에서 명시적으로 금지됩니다. 예를 들어, `computed` 내에서 `afterRender`를 사용하면 계산된 표현식이 평가될 때마다 새로운 렌더 후크가 예약됩니다. 이는 의도되지 않았을 가능성이 크며 애플리케이션 성능을 저하시킬 수 있습니다.
 
-### Fixing the error
+### 오류 수정
 
-This error guide is non-exhaustive.
-It captures a few common scenarios and how to address the error.
+이 오류 가이드는 포괄적이지 않습니다. 몇 가지 일반적인 시나리오와 오류를 해결하는 방법을 포함합니다.
 
 #### `afterRender`
-Move the call for `afterRender` outside of the reactive context.
+`afterRender` 호출을 반응형 컨텍스트 밖으로 이동하십시오.
 
-A good place to schedule the after render hook is in the component's class constructor.
-Alternatively, use `untracked` to leave the reactive context and explicitly opt-out of this error.
+렌더 후크를 예약하는 좋은 장소는 컴포넌트의 클래스 생성자입니다. 또는 `untracked`를 사용하여 반응형 컨텍스트를 떠나고 이 오류에서 명시적으로 벗어날 수 있습니다.
 
 #### `effect`
-Move the call for `effect` outside of the reactive context.
+`effect` 호출을 반응형 컨텍스트 밖으로 이동하십시오.
 
-A good place to schedule an effect is in a `@Component`'s class constructor.
+효과를 예약하는 좋은 장소는 `@Component`의 클래스 생성자입니다.
 
 #### `toSignal`
-Move the call for `toSignal` outside of the reactive context.
+`toSignal` 호출을 반응형 컨텍스트 밖으로 이동하십시오.
 
 ```typescript
 result = computed(() => {
@@ -39,21 +32,19 @@ result = computed(() => {
 });
 ```
 
-can be refactored into:
+다음과 같이 리팩토링할 수 있습니다:
 
 ```typescript
 dataSignal = toSignal(dataObservable$);
 result = computed(() => doSomething(dataSignal()));
 ```
 
-Alternatively, if this is not possible, consider manually subscribing to the observable.
+또는, 이것이 불가능하다면 관측 가능 항목에 수동으로 구독하는 것을 고려하십시오.
 
-As a last resort, use `untracked` to leave the reactive context.
-Be careful as leaving the reactive context can result in signal reads to be ignored inside `untracked`.
+마지막 수단으로 `untracked`를 사용하여 반응형 컨텍스트를 떠나십시오. 반응형 컨텍스트를 떠나면 `untracked` 내부에서 신호 읽기가 무시될 수 있으므로 주의하십시오.
 
-@debugging
+@디버깅
 
-The error message mentions the function that was unexpectedly called.
-Look for this function call in your application code.
+오류 메시지는 예상치 못하게 호출된 함수를 언급합니다. 애플리케이션 코드에서 이 함수 호출을 찾으십시오.
 
-Alternatively, the stack trace in your browser will show where the function was invoked and where it's located.
+또는 브라우저의 스택 추적에서 함수가 호출된 위치와 위치를 확인할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0750.md b/adev/src/content/reference/errors/NG0750.md
index 0fff3453249b..46d354652edf 100644
--- a/adev/src/content/reference/errors/NG0750.md
+++ b/adev/src/content/reference/errors/NG0750.md
@@ -1,6 +1,6 @@
 # @defer dependencies failed to load
 
-This error occurs when loading dependencies for a `@defer` block fails (typically due to poor network conditions) and no `@error` block has been configured to handle the failure state. Having no `@error` block in this scenario may create a poor user experience.
+이 오류는 `@defer` 블록의 종속성을 로드하는 데 실패했을 때 발생합니다(일반적으로 네트워크 조건이 좋지 않기 때문에) 그리고 실패 상태를 처리하기 위해 구성된 `@error` 블록이 없을 때 발생합니다. 이 경우 `@error` 블록이 없으면 사용자 경험이 저하될 수 있습니다.
 
-## Debugging the error
-Verify that you added `@error` blocks to your `@defer` blocks to handle failure states.
\ No newline at end of file
+## 오류 디버깅
+실패 상태를 처리하기 위해 `@defer` 블록에 `@error` 블록을 추가했는지 확인하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0910.md b/adev/src/content/reference/errors/NG0910.md
index 393a4fd2719c..53aba9d0a1ef 100644
--- a/adev/src/content/reference/errors/NG0910.md
+++ b/adev/src/content/reference/errors/NG0910.md
@@ -1,6 +1,6 @@
-# Unsafe bindings on an iframe element
+# iframe 요소의 안전하지 않은 바인딩
 
-You see this error when Angular detects an attribute binding or a property binding on an `<iframe>` element using the following property names:
+Angular가 다음 속성 이름을 사용하는 `<iframe>` 요소에서 속성 바인딩 또는 프로퍼티 바인딩을 감지하면 이 오류가 발생합니다:
 
 * sandbox
 * allow
@@ -9,25 +9,21 @@ You see this error when Angular detects an attribute binding or a property bindi
 * csp
 * fetchPriority
 
-The mentioned attributes affect the security model setup for `<iframe>`s
-and it's important to apply them before setting the `src` or `srcdoc` attributes.
-To enforce that, Angular requires these attributes to be set on `<iframe>`s as
-static attributes, so the values are set at the element creation time and they
-remain the same throughout the lifetime of an `<iframe>` instance.
+언급된 속성은 `<iframe>`의 보안 모델 설정에 영향을 미치므로 `src` 또는 `srcdoc` 속성을 설정하기 전에 적용하는 것이 중요합니다. 이를 강제하기 위해 Angular는 이러한 속성이 `<iframe>`에서 정적 속성으로 설정되도록 요구합니다. 따라서 값은 요소 생성 시 설정되고 `<iframe>` 인스턴스의 수명 동안 동일하게 유지됩니다.
 
-The error is thrown when a property binding with one of the mentioned attribute names is used:
+언급된 속성 이름 중 하나로 프로퍼티 바인딩이 사용될 때 오류가 발생합니다:
 
 ```angular-html
 <iframe [sandbox]="'allow-scripts'" src="..."></iframe>
 ```
 
-or when it's an attribute bindings:
+또는 속성 바인딩일 경우:
 
 ```angular-html
 <iframe [attr.sandbox]="'allow-scripts'" src="..."></iframe>
 ```
 
-Also, the error is thrown when a similar pattern is used in Directive's host bindings:
+또한 Directive의 호스트 바인딩에서 유사한 패턴이 사용될 때 오류가 발생합니다:
 
 ```typescript
 @Directive({
@@ -40,22 +36,19 @@ Also, the error is thrown when a similar pattern is used in Directive's host bin
 class IframeDirective {}
 ```
 
-## Debugging the error
+## 오류 디버깅
 
-The error message includes the name of the component with the template where
-an `<iframe>` element with unsafe bindings is located.
+오류 메시지에는 안전하지 않은 바인딩이 있는 `<iframe>` 요소가 위치한 템플릿의 컴포넌트 이름이 포함됩니다.
 
-The recommended solution is to use the mentioned attributes as static ones, for example:
+권장 해결 방법은 언급된 속성을 정적으로 사용하는 것입니다. 예를 들어:
 
 ```angular-html
 <iframe sandbox="allow-scripts" src="..."></iframe>
 ```
 
-If you need to have different values for these attributes (depending on various conditions),
-you can use an `*ngIf` or an `*ngSwitch` on an `<iframe>` element:
+이러한 속성에 대해 다른 값을 가져야 할 경우(다양한 조건에 따라) `<iframe>` 요소에서 `*ngIf` 또는 `*ngSwitch`를 사용할 수 있습니다:
 
 ```angular-html
 <iframe *ngIf="someConditionA" sandbox="allow-scripts" src="..."></iframe>
 <iframe *ngIf="someConditionB" sandbox="allow-forms" src="..."></iframe>
-<iframe *ngIf="someConditionC" sandbox="allow-popups" src="..."></iframe>
-```
+<iframe *ngIf="someConditionC" sandbox="allow-popups" src="..."></iframe>
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0912.md b/adev/src/content/reference/errors/NG0912.md
index 91ecb4fa6bb4..e4047ddd81da 100644
--- a/adev/src/content/reference/errors/NG0912.md
+++ b/adev/src/content/reference/errors/NG0912.md
@@ -1,15 +1,15 @@
-# Component ID generation collision
+# 컴포넌트 ID 생성 충돌
 
-When creating components, Angular generates a unique component ID for each component. This is generated using the Angular component metadata, including but not limited:  selectors, the number of host bindings, class property names, view and content queries. When two components metadata are identical (often times sharing the same selector), an ID generation collision will occur.
+컴포넌트를 생성할 때, Angular는 각 컴포넌트에 대해 고유한 컴포넌트 ID를 생성합니다. 이는 선택자, 호스트 바인딩 수, 클래스 속성 이름, 뷰 및 콘텐츠 쿼리 등 Angular 컴포넌트 메타데이터를 사용하여 생성됩니다. 두 컴포넌트 메타데이터가 동일할 경우(종종 같은 선택자를 공유함) ID 생성 충돌이 발생합니다.
 
-Component IDs are used in Angular internally:
+컴포넌트 ID는 Angular 내부에서 다음과 같이 사용됩니다:
 
-- for extra annotations of DOM nodes for style encapsulation
-- during [hydration](guide/hydration) to restore an application state after [server-side rendering](guide/ssr).
+- 스타일 캡슐화를 위한 DOM 노드의 추가 주석
+- [서버 측 렌더링](guide/ssr) 후 애플리케이션 상태를 복원하기 위한 [하이드레이션](guide/hydration) 중.
 
-To avoid issues that might be caused by the component ID collision, it's recommended to resolve them as described below.
+컴포넌트 ID 충돌로 인해 발생할 수 있는 문제를 피하기 위해 아래에 설명된 대로 해결하는 것이 좋습니다.
 
-## Example of a Component ID collision
+## 컴포넌트 ID 충돌의 예
 
 ```typescript
 @Component({
@@ -25,15 +25,15 @@ class SomeComponent {}
 class SomeMockedComponent {}
 ```
 
-Having these two components defined will trigger an ID generation collision and during development a warning will be displayed.
+이 두 개의 컴포넌트가 정의되면 ID 생성 충돌이 발생하고 개발 중 경고 메시지가 표시됩니다.
 
-## Debugging the error
+## 오류 디버깅
 
-The warning message includes the class name of the two components whose IDs are colliding.
+경고 메시지에는 ID가 충돌하는 두 컴포넌트의 클래스 이름이 포함됩니다.
 
-The problem can be resolved using one of the solutions below:
+문제를 다음의 해결책 중 하나를 사용하여 해결할 수 있습니다:
 
-1. Change the selector of one of the two components. For example by using a pseudo-selector with no effect like `:not()` and a different tag name.
+1. 두 컴포넌트 중 하나의 선택자를 변경합니다. 예를 들어, 효과가 없는 가상 선택자 `:not()`와 다른 태그 이름을 사용할 수 있습니다.
 
 ```typescript
 @Component({
@@ -43,7 +43,7 @@ The problem can be resolved using one of the solutions below:
 class SomeMockedComponent {}
 ```
 
-1. Add an extra host attribute to one of the components.
+2. 두 컴포넌트 중 하나에 추가 호스트 속성을 추가합니다.
 
 ```typescript
 @Component({
@@ -51,5 +51,4 @@ class SomeMockedComponent {}
   template: 'complex-template',
   host: {'some-binding': 'some-value'},
 })
-class SomeComponent {}
-```
+class SomeComponent {}
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0913.md b/adev/src/content/reference/errors/NG0913.md
index 7100277a49d0..736a66eb76d3 100644
--- a/adev/src/content/reference/errors/NG0913.md
+++ b/adev/src/content/reference/errors/NG0913.md
@@ -1,24 +1,24 @@
-# Runtime Performance Warnings
+# 런타임 성능 경고
 
-### Oversized images
-When images are loaded, the **intrinsic size** of the downloaded file is checked against the actual size of the image on the page. The actual size is calculated using the **rendered size** of the image with CSS applied, multiplied by the [pixel device ratio](https://web.dev/codelab-density-descriptors/#pixel-density). If the downloaded image is much larger (more than 1200px too large in either dimension), this warning is triggered. Downloading oversized images can slow down page loading and have a negative effect on [Core Web Vitals](https://web.dev/vitals/).
+### 과도하게 큰 이미지
+이미지가 로드될 때, 다운로드된 파일의 **고유 크기**가 페이지의 이미지 실제 크기와 비교됩니다. 실제 크기는 CSS가 적용된 이미지의 **렌더링 크기**에 [픽셀 장치 비율](https://web.dev/codelab-density-descriptors/#pixel-density)을 곱하여 계산됩니다. 다운로드된 이미지가 훨씬 크면(어떤 치수에서든 1200px 이상) 이 경고가 발생합니다. 과도하게 큰 이미지를 다운로드하면 페이지 로딩 속도가 느려지고 [코어 웹 바이탈](https://web.dev/vitals/)에 부정적인 영향을 미칠 수 있습니다.
 
-### Lazy-loaded LCP element
-The largest contentful element on a page during load is considered the "LCP Element", which relates to [Largest Contentful Paint](https://web.dev/lcp/), one of the Core Web Vitals. Lazy loading an LCP element will have a strong negative effect on page performance. With this strategy, the browser has to complete layout calculations to determine whether the element is in the viewport before starting the image download. As a result, a warning is triggered when Angular detects that the LCP element has been given the `loading="lazy"` attribute.
+### 지연 로드된 LCP 요소
+로드 중 페이지에서 가장 큰 콘텐츠 요소는 "LCP 요소"로 간주되며, 이는 코어 웹 바이탈 중 하나인 [가장 큰 콘텐츠 페인트](https://web.dev/lcp/)와 관련이 있습니다. LCP 요소를 지연 로드하면 페이지 성능에 강한 부정적 영향을 미칩니다. 이러한 전략에서는 브라우저가 요소가 뷰포트 안에 있는지를 결정하기 위해 레이아웃 계산을 완료한 후 이미지 다운로드를 시작해야 합니다. 결과적으로 Angular가 LCP 요소에 `loading="lazy"` 속성이 부여된 것을 감지할 때 경고가 발생합니다.
 
-@debugging
-Use the image URL provided in the console warning to find the `<img>` element in question. 
-### Ways to fix oversized images
-* Use a smaller source image
-* Add a [`srcset`](https://web.dev/learn/design/responsive-images/#responsive-images-with-srcset) if multiple sizes are needed for different layouts. 
-* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage)), which generates [srcsets automatically](https://angular.io/guide/image-directive#request-images-at-the-correct-size-with-automatic-srcset).
-### Ways to fix lazy-loaded LCP element
+@디버깅
+콘솔 경고에 제공된 이미지 URL을 사용하여 문제의 `<img>` 요소를 찾으십시오.
+### 과도하게 큰 이미지를 수정하는 방법
+* 더 작은 소스 이미지를 사용합니다.
+* 서로 다른 레이아웃에 필요한 경우 [`srcset`](https://web.dev/learn/design/responsive-images/#responsive-images-with-srcset)을 추가합니다.
+* Angular의 내장 이미지 지시어([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage))를 사용하여 [srcset을 자동으로 생성](https://angular.io/guide/image-directive#request-images-at-the-correct-size-with-automatic-srcset)합니다.
+### 지연 로드된 LCP 요소를 수정하는 방법
  
-* Change the `loading` attribute to a different value such as `"eager"`.
-* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage)), which allows for easily [prioritizing LCP images](https://angular.io/guide/image-directive#step-4-mark-images-as-priority).
+* `loading` 속성을 `"eager"`와 같은 다른 값으로 변경합니다.
+* Angular의 내장 이미지 지시어([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage))를 사용하여 [LCP 이미지를 쉽게 우선시하기](https://angular.io/guide/image-directive#step-4-mark-images-as-priority)합니다.
 
-### Disabling Image Performance Warnings
-Both warnings can be disabled individually, site-wide, using a provider at the root of your application:
+### 이미지 성능 경고 비활성화
+두 경고는 각각 비활성화할 수 있으며, 애플리케이션의 루트에서 제공자를 사용하여 사이트 전체에서 비활성화할 수 있습니다:
 
 ```typescript
 providers: [
@@ -29,5 +29,4 @@ providers: [
       disableImageLazyLoadWarning: true
     }
   },
-],
-```
\ No newline at end of file
+],
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0950.md b/adev/src/content/reference/errors/NG0950.md
index fb8a7eff373f..5bf7b32905ae 100644
--- a/adev/src/content/reference/errors/NG0950.md
+++ b/adev/src/content/reference/errors/NG0950.md
@@ -1,15 +1,15 @@
-# Required input is accessed before a value is set.
+# 필수 입력이 값이 설정되기 전에 접근되었습니다.
 
-A required input was accessed but no value was bound.
+필수 입력이 접근되었지만 바인딩된 값이 없습니다.
 
-This can happen when a required input is accessed too early in your directive or component.
-This is commonly happening when the input is read as part of class construction.
+이것은 필수 입력이 지시문이나 구성 요소에서 너무 이른 시점에 접근될 때 발생할 수 있습니다.
+이는 클래스 생성의 일환으로 입력이 읽힐 때 일반적으로 발생합니다.
 
-Inputs are guaranteed to be available in the `ngOnInit` lifecycle hook and afterwards.
+입력은 `ngOnInit` 생명주기 훅 및 이후에 사용할 수 있도록 보장됩니다.
 
-## Fixing the error
+## 오류 수정
 
-Access the required input in reactive contexts.
-For example, in the template itself, inside a `computed`, or inside an effect.
+반응형 컨텍스트에서 필수 입력에 접근하세요.
+예를 들어, 템플릿 자체, `computed` 내부 또는 효과 내부에서입니다.
 
-Alternatively, access the input inside the `ngOnInit` lifecycle hook, or later.
+또는 `ngOnInit` 생명주기 훅 내부 또는 그 이후에 입력에 접근하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0951.md b/adev/src/content/reference/errors/NG0951.md
index 3e088a851dcc..bc3d0c6204d1 100644
--- a/adev/src/content/reference/errors/NG0951.md
+++ b/adev/src/content/reference/errors/NG0951.md
@@ -1,20 +1,20 @@
-# Child query result is required but no value is available.
+# 자식 쿼리 결과가 필요하지만 사용할 수 있는 값이 없습니다.
 
-Required child query (`contentChild.required` or `viewChild.required`) result was accessed before query results were calculated or query has no matches.
+필요한 자식 쿼리(`contentChild.required` 또는 `viewChild.required`) 결과가 쿼리 결과가 계산되기 전에 접근되었거나 쿼리에 매치되는 항목이 없습니다.
 
-This can happen in two distinct situations:
-* query results were accessed before a given query could collect results;
-* a query was executed but didn't match any nodes and has no results as a consequence.
+이는 두 가지 상황에서 발생할 수 있습니다:
+* 특정 쿼리가 결과를 수집하기 전에 쿼리 결과에 접근되었습니다;
+* 쿼리가 실행되었지만 어떤 노드와도 일치하지 않아서 결과가 없습니다.
 
-Content queries and view queries each calculate their results at different points in time:
-* `contentChild` results are available after a _host_ view (template where a directive declaring a query is used) is created;
-* `viewChild` results are available after a template of a component declaring a query is created.
+컨텐츠 쿼리와 뷰 쿼리는 각각 다른 시점에 결과를 계산합니다:
+* `contentChild` 결과는 _호스트_ 뷰(쿼리를 선언하는 지시어가 사용되는 템플릿)가 생성된 후에 사용할 수 있습니다;
+* `viewChild` 결과는 쿼리를 선언하는 컴포넌트의 템플릿이 생성된 후에 사용할 수 있습니다.
 
-Accessing query results before they're available results in the error described on this page. Most notably, query results are _never_ available in a constructor of the component or directive declaring a query.
+결과가 사용 가능하기 전에 쿼리 결과에 접근하면 이 페이지에 설명된 오류가 발생합니다. 특히, 쿼리를 선언하는 컴포넌트 또는 지시어의 생성자에서는 쿼리 결과가 _결코_ 사용 가능하지 않습니다.
 
-## Fixing the error
+## 오류 수정
 
-`contentChild` query results can be accessed in the `AfterContentChecked` lifecycle hook, or later.
-`viewChild` query results can be accessed in the `AfterViewChecked` lifecycle hook, or later.
+`contentChild` 쿼리 결과는 `AfterContentChecked` 라이프사이클 훅이나 그 이후에 접근할 수 있습니다.
+`viewChild` 쿼리 결과는 `AfterViewChecked` 라이프사이클 훅이나 그 이후에 접근할 수 있습니다.
 
-Make sure that a required query matches at least one node and has results at all. You can verify this by accessing query results in the lifecycle hooks listed above.
+필요한 쿼리가 최소한 하나의 노드와 매치되고 결과가 있는지 반드시 확인하십시오. 위에 나열된 라이프사이클 훅에서 쿼리 결과에 접근하여 이를 검증할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0955.md b/adev/src/content/reference/errors/NG0955.md
index 936c24c88259..032364bf70f9 100644
--- a/adev/src/content/reference/errors/NG0955.md
+++ b/adev/src/content/reference/errors/NG0955.md
@@ -1,6 +1,6 @@
-# Track expression resulted in duplicated keys for a given collection.
+# 트랙 표현식이 주어진 컬렉션에 대해 중복 키를 생성했습니다.
 
-A track expression specified in the `@for` loop evaluated to duplicated keys for a given collection, ex.:
+`@for` 루프에서 지정된 트랙 표현식이 주어진 컬렉션에 대해 중복 키로 평가되었습니다. 예를 들어:
 
 ```typescript
 @Component({
@@ -11,15 +11,15 @@ class TestComponent {
 }
 ```
 
-In the provided example the `item.key` tracking expression will find two duplicate keys `a` (at index 0 and 2). 
+제공된 예제에서 `item.key` 추적 표현식은 두 개의 중복 키 `a` (인덱스 0과 2)를 찾습니다.
 
-Duplicate keys are problematic from the correctness point of view: since the `@for` loop can't uniquely identify items it might choose DOM nodes corresponding to _another_ item (with the same key) when performing DOM moves or destroy.
+중복 키는 정확성 측면에서 문제가 됩니다. `@for` 루프가 항목을 고유하게 식별할 수 없기 때문에 DOM 이동이나 삭제를 수행할 때 _다른_ 항목(같은 키를 가진)의 DOM 노드를 선택할 수 있습니다.
 
-There is also performance penalty associated with duplicated keys - internally Angular must use more sophisticated and slower data structures while repeating over collections with duplicated keys.
+중복 키와 관련된 성능 저하도 있습니다. 내부적으로 Angular는 중복 키가 있는 컬렉션을 반복할 때 더 복잡하고 느린 데이터 구조를 사용해야 합니다.
 
-## Fixing the error
+## 오류 수정
 
-Change the tracking expression such that it uniquely identifies an item in a collection. In the discussed example the correct track expression would use the unique `key` property (`item.key`):
+추적 표현식을 변경하여 컬렉션에서 항목을 고유하게 식별합니다. 논의된 예제를 통해 올바른 트랙 표현식은 고유한 `key` 속성(`item.key`)을 사용해야 합니다:
 
 ```typescript
 @Component({
@@ -27,5 +27,4 @@ Change the tracking expression such that it uniquely identifies an item in a col
 })
 class TestComponent {
     items = [{key: 1, value: 'a'}, {key: 2, value: 'b'}, {key: 3, value: 'a'}];
-}
-```
+}
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG0956.md b/adev/src/content/reference/errors/NG0956.md
index d57179df53fe..7db40d9ce542 100644
--- a/adev/src/content/reference/errors/NG0956.md
+++ b/adev/src/content/reference/errors/NG0956.md
@@ -1,11 +1,11 @@
-# Tracking expression caused re-creation of the DOM structure.
+# 추적 표현식이 DOM 구조의 재생성을 야기함
 
-The identity track expression specified in the `@for` loop caused re-creation of the DOM corresponding to _all_ items. This is a very expensive operation that commonly occurs when working with immutable data structures. For example:
+`@for` 루프에서 지정된 동일성 추적 표현식은 _모든_ 항목에 해당하는 DOM의 재생성을 유발했습니다. 이는 불변 데이터 구조를 다룰 때 일반적으로 발생하는 매우 비용이 많이 드는 작업입니다. 예를 들어:
 
 ```typescript
 @Component({
   template: `
-    <button (click)="toggleAllDone()">All done!</button>
+    <button (click)="toggleAllDone()">모두 완료!</button>
     <ul>
     @for (todo of todos; track todo) {
       <li>{{todo.task}}</li>
@@ -15,8 +15,8 @@ The identity track expression specified in the `@for` loop caused re-creation of
 })
 export class App {
   todos = [
-    { id: 0, task: 'understand trackBy', done: false },
-    { id: 1, task: 'use proper tracking expression', done: false },
+    { id: 0, task: 'trackBy 이해하기', done: false },
+    { id: 1, task: '적절한 추적 표현식 사용하기', done: false },
   ];
 
   toggleAllDone() {
@@ -25,18 +25,18 @@ export class App {
 }
 ```
 
-In the provided example, the entire list with all the views (DOM nodes, Angular directives, components, queries, etc.) are re-created (!) after toggling the "done" status of items. Here, a relatively inexpensive binding update to the `done` property would suffice. 
+제공된 예제에서 모든 보기(DOM 노드, Angular 지시문, 구성 요소, 쿼리 등)가 "완료" 상태를 전환한 후 재생성됩니다(!). 여기에서는 `done` 속성에 대한 상대적으로 저렴한 바인딩 업데이트로 충분합니다.
 
-Apart from having a high performance penalty, re-creating the DOM tree results in loss of state in the DOM elements (ex.: focus, text selection, sites loaded in an iframe, etc.).
+높은 성능 패널티를 초래할 뿐만 아니라, DOM 트리의 재생성은 DOM 요소의 상태 손실을 초래합니다(예: 포커스, 텍스트 선택, iframe에 로드된 사이트 등).
 
-## Fixing the error
+## 오류 수정
 
-Change the tracking expression such that it uniquely identifies an item in a collection, regardless of its object identity. In the discussed example, the correct track expression would use the unique `id` property (`item.id`):
+추적 표현식을 변경하여 개체 신원에 관계없이 컬렉션의 항목을 고유하게 식별하도록 해야 합니다. 논의된 예제에서 올바른 추적 표현식은 고유한 `id` 속성(`item.id`)을 사용해야 합니다:
 
 ```typescript
 @Component({
   template: `
-    <button (click)="toggleAllDone()">All done!</button>
+    <button (click)="toggleAllDone()">모두 완료!</button>
     <ul>
     @for (todo of todos; track todo.id) {
       <li>{{todo.task}}</li>
@@ -46,12 +46,11 @@ Change the tracking expression such that it uniquely identifies an item in a col
 })
 export class App {
   todos = [
-    { id: 0, task: 'understand trackBy', done: false },
-    { id: 1, task: 'use proper tracking expression', done: false },
+    { id: 0, task: 'trackBy 이해하기', done: false },
+    { id: 1, task: '적절한 추적 표현식 사용하기', done: false },
   ];
 
   toggleAllDone() {
     this.todos = this.todos.map(todo => ({ ...todo, done: true }));
   }
-}
-```
+}
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG1001.md b/adev/src/content/reference/errors/NG1001.md
index 000138cfbbbf..ff5b1080b8cc 100644
--- a/adev/src/content/reference/errors/NG1001.md
+++ b/adev/src/content/reference/errors/NG1001.md
@@ -1,13 +1,12 @@
 # Argument Not Literal
 
-To make the metadata extraction in the Angular compiler faster, the decorators `@NgModule`, `@Pipe`, `@Component`, `@Directive`, and `@Injectable` accept only object literals as arguments.
+메타데이터 추출을 Angular 컴파일러에서 더 빠르게 하기 위해, 데코레이터 `@NgModule`, `@Pipe`, `@Component`, `@Directive`, 및 `@Injectable`는 오직 객체 리터럴만 인수로 허용합니다.
 
-This is an [intentional change in Ivy](https://github.com/angular/angular/issues/30840#issuecomment-498869540), which enforces stricter argument requirements for decorators than View Engine.
-Ivy requires this approach because it compiles decorators by moving the expressions into other locations in the class output.
+이것은 [Ivy에서 의도된 변경](https://github.com/angular/angular/issues/30840#issuecomment-498869540)으로, View Engine보다 데코레이터에 대해 더 엄격한 인수 요구사항을 적용합니다. Ivy는 이 접근 방식을 요구하는데, 이는 데코레이터를 컴파일할 때 표현식을 클래스 출력의 다른 위치로 이동하기 때문입니다.
 
-## Debugging the error
+## 오류 디버깅
 
-Move all declarations:
+모든 선언을 이동하십시오:
 
 <docs-code language="typescript">
 
@@ -20,7 +19,7 @@ export class AppModule {
 
 </docs-code>
 
-into the decorator:
+데코레이터 안으로:
 
 <docs-code language="typescript">
 
@@ -29,4 +28,4 @@ export class AppModule {
     constructor() {}
 }
 
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG2003.md b/adev/src/content/reference/errors/NG2003.md
index 5feda3cadddf..0f9adddf3f2c 100644
--- a/adev/src/content/reference/errors/NG2003.md
+++ b/adev/src/content/reference/errors/NG2003.md
@@ -1,10 +1,9 @@
 # Missing Token
 
-There is no injection token for a constructor parameter at compile time. [InjectionTokens](api/core/InjectionToken) are tokens that can be used in a Dependency Injection Provider.
+컴파일 시간에 생성자 매개변수에 대한 주입 토큰이 없습니다. [InjectionTokens](api/core/InjectionToken)는 의존성 주입 제공자에서 사용할 수 있는 토큰입니다.
 
-## Debugging the error
+## 오류 디버깅
 
-Look at the parameter that throws the error, and all uses of the class.
-This error is commonly thrown when a constructor defines parameters with primitive types such as `string`, `number`, `boolean`, and `Object`.
+오류를 발생시키는 매개변수와 클래스의 모든 사용을 살펴보세요. 이 오류는 생성자가 `string`, `number`, `boolean`, 및 `Object`와 같은 기본 유형의 매개변수를 정의할 때 일반적으로 발생합니다.
 
-Use the `@Injectable` method or `@Inject` decorator from `@angular/core` to ensure that the type you are injecting is reified \(has a runtime representation\). Make sure to add a provider to this decorator so that you do not throw [NG0201: No Provider Found](errors/NG0201).
+`@angular/core`에서 `@Injectable` 메서드나 `@Inject` 데코레이터를 사용하여 주입하고 있는 유형이 구체화되었는지 \(런타임 표현이 있는지\) 확인하세요. 이 데코레이터에 공급자를 추가하여 [NG0201: No Provider Found](errors/NG0201) 오류가 발생하지 않도록 하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG2009.md b/adev/src/content/reference/errors/NG2009.md
index 85f754588673..012d71a02295 100644
--- a/adev/src/content/reference/errors/NG2009.md
+++ b/adev/src/content/reference/errors/NG2009.md
@@ -1,18 +1,18 @@
-# Invalid Shadow DOM selector
+# 유효하지 않은 Shadow DOM 선택자
 
-The selector of a component using `ViewEncapsulation.ShadowDom` doesn't match the custom element tag name requirements.
+`ViewEncapsulation.ShadowDom`을 사용하는 구성 요소의 선택자가 사용자 정의 요소 태그 이름 요구 사항과 일치하지 않습니다.
 
-In order for a tag name to be considered a valid custom element name, it has to:
+태그 이름이 유효한 사용자 정의 요소 이름으로 간주되기 위해서는 다음을 충족해야 합니다:
 
-* Be in lower case.
-* Contain a hyphen.
-* Start with a letter \(a-z\).
+* 소문자로 되어 있어야 합니다.
+* 하이픈을 포함해야 합니다.
+* 글자 \(a-z\)로 시작해야 합니다.
 
-## Debugging the error
+## 오류 디버깅
 
-Rename your component's selector so that it matches the requirements.
+구성 요소의 선택자를 요구 사항에 맞게 이름을 바꿉니다.
 
-**Before:**
+**이전:**
 
 <docs-code language="typescript">
 
@@ -24,7 +24,7 @@ Rename your component's selector so that it matches the requirements.
 
 </docs-code>
 
-**After:**
+**이후:**
 
 <docs-code language="typescript">
 
@@ -34,4 +34,4 @@ Rename your component's selector so that it matches the requirements.
   …
 })
 
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG3003.md b/adev/src/content/reference/errors/NG3003.md
index cbbde347500d..01e15e12b1ba 100644
--- a/adev/src/content/reference/errors/NG3003.md
+++ b/adev/src/content/reference/errors/NG3003.md
@@ -1,17 +1,17 @@
 # Import Cycle Detected
 
-A component, directive, or pipe that is referenced by this component would require the compiler to add an import that would lead to a cycle of imports.
-For example, consider a scenario where a `ParentComponent` references a `ChildComponent` in its template:
+이 컴포넌트에서 참조되는 컴포넌트, 디렉티브 또는 파이프는 컴파일러가 가져오기를 추가해야 하며, 이는 가져오기 순환을 초래합니다.  
+예를 들어, `ParentComponent`가 템플릿에서 `ChildComponent`를 참조하는 시나리오를 고려해 보세요:
 
 <docs-code header="parent.component.ts" path="adev/src/content/examples/errors/cyclic-imports/parent.component.ts"/>
 
 <docs-code header="child.component.ts" path="adev/src/content/examples/errors/cyclic-imports/child.component.ts"/>
 
-There is already an import from `child.component.ts` to `parent.component.ts` since the `ChildComponent` references the `ParentComponent` in its constructor.
+`ChildComponent`가 생성자에서 `ParentComponent`를 참조하므로 이미 `child.component.ts`에서 `parent.component.ts`로의 가져오기가 존재합니다.
 
-HELPFUL: The parent component's template contains `<child></child>`.
-The generated code for this template must therefore contain a reference to the `ChildComponent` class.
-In order to make this reference, the compiler would have to add an import from `parent.component.ts` to `child.component.ts`, which would cause an import cycle:
+도움이 됩니다: 상위 컴포넌트의 템플릿에는 `<child></child>`가 포함되어 있습니다.  
+따라서 이 템플릿에 대한 생성된 코드는 `ChildComponent` 클래스에 대한 참조를 포함해야 합니다.  
+이 참조를 만들기 위해 컴파일러는 `parent.component.ts`에서 `child.component.ts`로의 가져오기를 추가해야 하며, 이는 가져오기 순환을 초래합니다:
 
 <docs-code language="text">
 
@@ -21,31 +21,30 @@ parent.component.ts -> child.component.ts -> parent.component.ts
 
 ## Remote Scoping
 
-If you are using NgModules, to avoid adding imports that create cycles, additional code is added to the `NgModule` class where the component that wires up the dependencies is declared.
-
-This is known as "remote scoping".
+NgModules를 사용하는 경우, 순환을 생성하는 가져오기를 피하기 위해 종속성을 연결하는 컴포넌트가 선언된 `NgModule` 클래스에 추가 코드가 추가됩니다.  
+이것을 "원격 스코핑"이라고 합니다.
 
 ## Libraries
 
-Unfortunately, "remote scoping" code is side-effectful —which prevents tree shaking— and cannot be used in libraries.
-So when building libraries using the `"compilationMode": "partial"` setting, any component that would require a cyclic import will cause this `NG3003` compiler error to be raised.
+불행히도, "원격 스코핑" 코드는 부작용이 있으며 —트리 쉐이킹을 방지합니다— 라이브러리에서 사용할 수 없습니다.  
+따라서 `"compilationMode": "partial"` 설정을 사용하여 라이브러리를 빌드할 때, 순환 가져오기가 필요한 모든 컴포넌트는 이 `NG3003` 컴파일러 오류를 초래합니다.
 
 ## Debugging the error
 
-The cycle that would be generated is shown as part of the error message.
-For example:
+생성될 순환은 오류 메시지의 일부분으로 표시됩니다.  
+예를 들어:
 
 <docs-code hideCopy="true">
 
-The component ChildComponent is used in the template but importing it would create a cycle:
+템플릿에서 ChildComponent가 사용되지만 가져오면 순환이 생성됩니다:
 /parent.component.ts -> /child.component.ts -> /parent.component.ts
 
 </docs-code>
 
-Use this to identify how the referenced component, pipe, or directive has a dependency back to the component being compiled.
-Here are some ideas for fixing the problem:
+이 정보를 사용하여 참조된 컴포넌트, 파이프 또는 디렉티브가 컴파일되는 컴포넌트에 대한 의존성을 어떻게 가지는지 식별하세요.  
+문제를 해결하기 위한 몇 가지 아이디어는 다음과 같습니다:
 
-* Try to rearrange your dependencies to avoid the cycle.
-  For example, using an intermediate interface that is stored in an independent file that can be imported to both dependent files without causing an import cycle.
-* Move the classes that reference each other into the same file, to avoid any imports between them.
-* Convert import statements to type-only imports \(using `import type` syntax\) if the imported declarations are only used as types, as type-only imports do not contribute to cycles.
+* 순환을 피하기 위해 종속성을 재배치해 보세요.  
+  예를 들어, 두 종속 파일에 가져오기를 방지할 수 있는 독립적인 파일에 저장된 중간 인터페이스를 사용하는 것입니다.
+* 서로 참조하는 클래스를 동일한 파일로 이동하여 이들 사이의 가져오기를 피하세요.
+* 가져온 선언이 타입으로만 사용될 경우 가져오기 문을 타입 전용 가져오기 ( `import type` 문법 사용)로 변환하세요. 타입 전용 가져오는 순환에 기여하지 않습니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG6100.md b/adev/src/content/reference/errors/NG6100.md
index 5d97685a74ab..88bf7f218761 100644
--- a/adev/src/content/reference/errors/NG6100.md
+++ b/adev/src/content/reference/errors/NG6100.md
@@ -1,8 +1,8 @@
-# NgModule.id Set to module.id anti-pattern
+# NgModule.id를 module.id로 설정하는 안티 패턴
 
-Using `module.id` as an NgModule `id` is a common anti-pattern and is likely not serving a useful purpose in your code.
+NgModule의 `id`로 `module.id`를 사용하는 것은 일반적인 안티 패턴이며, 코드에서 유용한 목적을 제공하지 않을 가능성이 높습니다.
 
-NgModules can be declared with an `id`:
+NgModules는 `id`로 선언될 수 있습니다:
 
 ```typescript
 @NgModule({
@@ -11,14 +11,14 @@ NgModules can be declared with an `id`:
 export class MyModule {}
 ```
 
-Declaring an `id` makes the NgModule available for lookup via the `getNgModuleById()` operation. This functionality is rarely used, mainly in very specific bundling scenarios when lazily loading NgModules without obtaining direct references to them. In most Angular code, ES dynamic `import()` (`import('./path/to/module')`) should be used instead, as this provides a direct reference to the NgModule being loaded without the need for a global registration side effect.
+`id`를 선언하면 `getNgModuleById()` 작업을 통해 NgModule을 조회할 수 있게 됩니다. 이 기능은 일반적으로 사용되지 않으며, 주로 NgModules의 직접 참조를 얻지 않고 지연 로딩할 때 매우 특정한 번들링 시나리오에서만 사용됩니다. 대부분의 Angular 코드에서는 ES 동적 `import()` (`import('./path/to/module')`)를 대신 사용해야 하며, 이는 전역 등록 부작용 없이 로드되는 NgModule에 대한 직접 참조를 제공합니다.
 
-If you are not using `getNgModuleById`, you do not need to provide `id`s for your NgModules. Providing one has a significant drawback: it makes the NgModule non-tree-shakable, which can have an impact on your bundle size.
+`getNgModuleById`를 사용하지 않는 경우, NgModules에 대해 `id`를 제공할 필요가 없습니다. 하나를 제공하는 것은 상당한 단점이 있습니다. 이는 NgModule을 비트리 셰이커로 만들며, 이는 번들 크기에 영향을 미칠 수 있습니다.
 
-In particular, the pattern of specifying `id: module.id` results from a misunderstanding of `@NgModule.id`. In earlier versions of Angular, it was sometimes necessary to include the property `moduleId: module.id` in `@Component` metadata.
+특히, `id: module.id`를 지정하는 패턴은 `@NgModule.id`에 대한 오해에서 비롯된 것입니다. 이전 버전의 Angular에서는 때때로 `@Component` 메타데이터에 `moduleId: module.id` 속성을 포함하는 것이 필요했습니다.
 
-Using `module.id` for `@NgModule.id` likely results from confusion between `@Component.moduleId` and `@NgModule.id`. `module.id` would not typically be useful for `getNgModuleById()` operations as the `id` needs to be a well-known string, and `module.id` is usually opaque to consumers.
+`@NgModule.id`에 대해 `module.id`를 사용하는 것은 `@Component.moduleId`와 `@NgModule.id` 사이의 혼동에서 비롯된 것으로 보입니다. `module.id`는 일반적으로 `getNgModuleById()` 작업에 유용하지 않으며, `id`는 잘 알려진 문자열이어야 하고, `module.id`는 소비자에게 일반적으로 불투명합니다.
 
-## Debugging the error
+## 오류 디버깅
 
-You can remove the `id: module.id` declaration from your NgModules. The compiler ignores this declaration and issues this warning instead.
+NgModules에서 `id: module.id` 선언을 제거할 수 있습니다. 컴파일러는 이 선언을 무시하고 대신 이 경고를 발행합니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG8001.md b/adev/src/content/reference/errors/NG8001.md
index e35bce8207c4..c638f373dd53 100644
--- a/adev/src/content/reference/errors/NG8001.md
+++ b/adev/src/content/reference/errors/NG8001.md
@@ -1,17 +1,17 @@
-# Invalid Element
+# 잘못된 요소
 
-One or more elements cannot be resolved during compilation because the element is not defined by the HTML spec, or there is no component or directive with such element selector.
+하나 이상의 요소가 컴파일 중에 해결될 수 없습니다. 이는 요소가 HTML 사양에 정의되어 있지 않거나, 그러한 요소 선택자가 있는 구성 요소나 지시문이 없기 때문입니다.
 
-HELPFUL: This is the compiler equivalent of a common runtime error `NG0304: '${tagName}' is not a known element: ...`.
+도움됨: 이는 일반적인 런타임 오류 `NG0304: '${tagName}'는 알려진 요소가 아닙니다: ...`의 컴파일러에 해당합니다.
 
-## Debugging the error
+## 오류 디버깅
 
-Use the element name in the error to find the file(s) where the element is being used.
+오류에서 요소 이름을 사용하여 해당 요소가 사용되고 있는 파일을 찾으십시오.
 
-Check that the name and selector are correct.
+이름과 선택자가 올바른지 확인하십시오.
 
-Make sure that the component is correctly imported inside your NgModule or standalone component, by checking its presence in the `imports` field. If the component is declared in an NgModule (meaning that it is not standalone) make sure that it is exported correctly from it, by checking its presence in the `exports` field.
+구성 요소가 NgModule 또는 독립형 구성 요소 내에서 올바르게 가져와졌는지 확인하려면 `imports` 필드에서 그 존재를 확인하십시오. 구성 요소가 NgModule에 선언된 경우(즉, 독립형이 아님) `exports` 필드에서 그 존재를 확인하여 올바르게 내보내졌는지 확인하십시오.
 
-When using custom elements or web components, ensure that you add [`CUSTOM_ELEMENTS_SCHEMA`](api/core/CUSTOM_ELEMENTS_SCHEMA) to the application module.
+사용자 정의 요소나 웹 구성 요소를 사용할 때는 [`CUSTOM_ELEMENTS_SCHEMA`](api/core/CUSTOM_ELEMENTS_SCHEMA)를 애플리케이션 모듈에 추가했는지 확인하십시오.
 
-If this does not resolve the error, check the imported libraries for any recent changes to the exports and properties you are using, and restart your server.
+이로 인해 오류가 해결되지 않으면 가져온 라이브러리의 내보내기 및 사용하고 있는 속성에 대한 최근 변경 사항을 확인하고 서버를 재시작하십시오.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG8002.md b/adev/src/content/reference/errors/NG8002.md
index 5687d7107939..966bd69862c7 100644
--- a/adev/src/content/reference/errors/NG8002.md
+++ b/adev/src/content/reference/errors/NG8002.md
@@ -1,18 +1,18 @@
-# Invalid Attribute
+# 잘못된 속성
 
 <docs-video src="https://www.youtube.com/embed/wfLkB3RsSJM"/>
 
-An attribute or property cannot be resolved during compilation.
+속성 또는 속성을 컴파일하는 동안 해결할 수 없습니다.
 
-This error arises when attempting to bind to a property that does not exist.
-Any property binding must correspond to either:
+이 오류는 존재하지 않는 속성에 바인딩하려고 할 때 발생합니다.  
+모든 속성 바인딩은 다음 중 하나에 해당해야 합니다:
 
-* A native property on the HTML element, or
-* An `@Input()` property of a component or directive applied to the element.
+* HTML 요소의 네이티브 속성, 또는
+* 요소에 적용된 컴포넌트 또는 지시자의 `@Input()` 속성.
 
-The runtime error for this is `NG0304: '${tagName}' is not a known element: …'`.
+이와 관련된 런타임 오류는 `NG0304: '${tagName}'는(은) 알려진 요소가 아닙니다: …'`입니다.
 
-## Debugging the error
+## 오류 디버깅
 
-Look at documentation for the specific [binding syntax](guide/templates) used. This is usually a typo or incorrect import.
-There may also be a missing direction with property selector 'name' or missing input.
+사용된 특정 [바인딩 구문](guide/templates)에 대한 문서를 확인하세요. 이는 일반적으로 오타 또는 잘못된 가져오기입니다.  
+또한 'name' 속성 선택기와 함께 누락된 방향이나 누락된 입력이 있을 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/NG8003.md b/adev/src/content/reference/errors/NG8003.md
index 5cf79cffeab1..67dbab39b2ee 100644
--- a/adev/src/content/reference/errors/NG8003.md
+++ b/adev/src/content/reference/errors/NG8003.md
@@ -2,17 +2,17 @@
 
 <docs-video src="https://www.youtube.com/embed/fUSAg4kp2WQ"/>
 
-Angular can't find a directive with `{{ PLACEHOLDER }}` export name.
-This is common with a missing import or a missing [`exportAs`](api/core/Directive#exportAs) on a directive.
+Angular은 `{{ PLACEHOLDER }}` 내보내기 이름으로 지시문을 찾을 수 없습니다.
+이는 일반적으로 누락된 import나 지시문에 대한 [`exportAs`](api/core/Directive#exportAs) 누락과 관련이 있습니다.
 
-HELPFUL: This is the compiler equivalent of a common runtime error [NG0301: Export Not Found](errors/NG0301).
+HELPFUL: 이는 일반적인 런타임 오류인 [NG0301: Export Not Found](errors/NG0301)의 컴파일러에 해당합니다.
 
-## Debugging the error
+## 디버깅 오류
 
-Use the string name of the export not found to trace the templates or modules using this export.
+내보내기를 찾을 수 없을 때 문자열 이름을 사용하여 이 내보내기를 사용하는 템플릿이나 모듈을 추적하십시오.
 
-Ensure that all dependencies are properly imported and declared in our Modules.
-For example, if the export not found is `ngForm`, we will need to import `FormsModule` and declare it in our list of imports in `*.module.ts` to resolve the missing export error.
+모든 종속성이 우리 모듈에 적절히 import 및 선언되었는지 확인하십시오.
+예를 들어, 찾을 수 없는 내보내기가 `ngForm`인 경우 `FormsModule`을 import하고 `*.module.ts`의 import 목록에 선언해야 누락된 내보내기 오류를 해결할 수 있습니다.
 
 <docs-code language="typescript">
 
@@ -26,4 +26,4 @@ import { FormsModule } from '@angular/forms';
 
 </docs-code>
 
-If you recently added an import, you will need to restart your server to see these changes.
+최근에 import를 추가한 경우 이러한 변경 사항을 보려면 서버를 다시 시작해야 합니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/errors/overview.md b/adev/src/content/reference/errors/overview.md
index 05c41bbaf1a7..210b6c647c98 100644
--- a/adev/src/content/reference/errors/overview.md
+++ b/adev/src/content/reference/errors/overview.md
@@ -1,47 +1,47 @@
-# Error Encyclopedia
+# 오류 백과사전
 
-## Runtime errors
+## 런타임 오류
 
-| Code      | Name                                                                                 |
+| 코드      | 이름                                                                                 |
 | :-------- | :----------------------------------------------------------------------------------- |
-| `NG0100`  | [Expression Changed After Checked](errors/NG0100)                                    |
-| `NG0200`  | [Circular Dependency in DI](errors/NG0200)                                           |
-| `NG0201`  | [No Provider Found](errors/NG0201)                                                   |
-| `NG0203`  | [`inject()` must be called from an injection context](errors/NG0203)                 |
-| `NG0209`  | [Invalid multi provider](errors/NG0209)                                              |
-| `NG0300`  | [Selector Collision](errors/NG0300)                                                  |
-| `NG0301`  | [Export Not Found](errors/NG0301)                                                    |
-| `NG0302`  | [Pipe Not Found](errors/NG0302)                                                      |
-| `NG0403`  | [Bootstrapped NgModule doesn't specify which component to initialize](errors/NG0403) |
-| `NG0500`  | [Hydration Node Mismatch](errors/NG0500)                                             |
-| `NG0501`  | [Hydration Missing Siblings](errors/NG0501)                                          |
-| `NG0502`  | [Hydration Missing Node](errors/NG0502)                                              |
-| `NG0503`  | [Hydration Unsupported Projection of DOM Nodes](errors/NG0503)                       |
-| `NG0504`  | [Skip hydration flag is applied to an invalid node](errors/NG0504)                   |
-| `NG0505`  | [No hydration info in server response](errors/NG0505)                                |
-| `NG0506`  | [NgZone remains unstable](errors/NG0506)                                             |
-| `NG0507`  | [HTML content was altered after SSR](errors/NG0507)                                  |
-| `NG0750`  | [@defer dependencies failed to load](errors/NG0750)                                  |
-| `NG0910`  | [Unsafe bindings on an iframe element](errors/NG0910)                                |
-| `NG0912`  | [Component ID generation collision](errors/NG0912)                                   |
-| `NG0955`  | [Track expression resulted in duplicated keys for a given collection](errors/NG0955) |
-| `NG0956`  | [Tracking expression caused re-creation of the DOM structure](errors/NG0956)         |
-| `NG01101` | [Wrong Async Validator Return Type](errors/NG01101)                                  |
-| `NG01203` | [Missing value accessor](errors/NG01203)                                             |
-| `NG02200` | [Missing Iterable Differ](errors/NG02200)                                            |
-| `NG02800` | [JSONP support in HttpClient configuration](errors/NG02800)                          |
-| `NG05000` | [Hydration with unsupported Zone.js instance.](errors/NG05000)                       |
-| `NG05104` | [Root element was not found.](errors/NG05104)                                        |
+| `NG0100`  | [체크 후 표현식이 변경됨](errors/NG0100)                                            |
+| `NG0200`  | [DI의 순환 의존성](errors/NG0200)                                                  |
+| `NG0201`  | [제공자를 찾을 수 없음](errors/NG0201)                                             |
+| `NG0203`  | [`inject()`는 주입 컨텍스트에서 호출해야 함](errors/NG0203)                        |
+| `NG0209`  | [유효하지 않은 다중 제공자](errors/NG0209)                                         |
+| `NG0300`  | [선택자 충돌](errors/NG0300)                                                        |
+| `NG0301`  | [내보내기 찾을 수 없음](errors/NG0301)                                            |
+| `NG0302`  | [파이프를 찾을 수 없음](errors/NG0302)                                             |
+| `NG0403`  | [부트스트랩된 NgModule가 초기화할 구성 요소를 지정하지 않음](errors/NG0403)       |
+| `NG0500`  | [하이드레이션 노드 불일치](errors/NG0500)                                          |
+| `NG0501`  | [하이드레이션에서 누락된 형제](errors/NG0501)                                     |
+| `NG0502`  | [하이드레이션에서 누락된 노드](errors/NG0502)                                     |
+| `NG0503`  | [하이드레이션에서 지원되지 않는 DOM 노드 투영](errors/NG0503)                    |
+| `NG0504`  | [유효하지 않은 노드에 적용된 하이드레이션 건너뛰기 플래그](errors/NG0504)          |
+| `NG0505`  | [서버 응답에 하이드레이션 정보가 없음](errors/NG0505)                             |
+| `NG0506`  | [NgZone이 불안정함](errors/NG0506)                                                  |
+| `NG0507`  | [SSR 후 HTML 콘텐츠가 변경됨](errors/NG0507)                                       |
+| `NG0750`  | [@defer 의존성을 로드하지 못함](errors/NG0750)                                     |
+| `NG0910`  | [iframe 요소에서 안전하지 않은 바인딩](errors/NG0910)                             |
+| `NG0912`  | [구성 요소 ID 생성 충돌](errors/NG0912)                                           |
+| `NG0955`  | [추적 표현식이 주어진 컬렉션의 중복 키를 초래함](errors/NG0955)                   |
+| `NG0956`  | [추적 표현식이 DOM 구조의 재생성을 초래함](errors/NG0956)                        |
+| `NG01101` | [잘못된 비동기 검증기 반환 유형](errors/NG01101)                                   |
+| `NG01203` | [값 접근자가 누락됨](errors/NG01203)                                               |
+| `NG02200` | [누락된 반복 가능한 차별자](errors/NG02200)                                        |
+| `NG02800` | [HttpClient 구성에서 JSONP 지원](errors/NG02800)                                   |
+| `NG05000` | [지원되지 않는 Zone.js 인스턴스와 함께 하는 하이드레이션](errors/NG05000)       |
+| `NG05104` | [루트 요소를 찾을 수 없음](errors/NG05104)                                         |
 
-## Compiler errors
+## 컴파일러 오류
 
-| Code     | Name                                                       |
+| 코드     | 이름                                                       |
 | :------- | :--------------------------------------------------------- |
-| `NG1001` | [Argument Not Literal](errors/NG1001)                      |
-| `NG2003` | [Missing Token](errors/NG2003)                             |
-| `NG2009` | [Invalid Shadow DOM selector](errors/NG2009)               |
-| `NG3003` | [Import Cycle Detected](errors/NG3003)                     |
-| `NG6100` | [NgModule.id Set to module.id anti-pattern](errors/NG6100) |
-| `NG8001` | [Invalid Element](errors/NG8001)                           |
-| `NG8002` | [Invalid Attribute](errors/NG8002)                         |
-| `NG8003` | [Missing Reference Target](errors/NG8003)                  |
+| `NG1001` | [인수가 리터럴이 아님](errors/NG1001)                      |
+| `NG2003` | [토큰이 누락됨](errors/NG2003)                             |
+| `NG2009` | [유효하지 않은 Shadow DOM 선택자](errors/NG2009)          |
+| `NG3003` | [가져오기 사이클 감지됨](errors/NG3003)                     |
+| `NG6100` | [NgModule.id가 module.id 반패턴으로 설정됨](errors/NG6100) |
+| `NG8001` | [유효하지 않은 요소](errors/NG8001)                        |
+| `NG8002` | [유효하지 않은 속성](errors/NG8002)                       |
+| `NG8003` | [참조 대상 누락](errors/NG8003)                            |
\ No newline at end of file
diff --git a/adev/src/content/reference/extended-diagnostics/NG8101.md b/adev/src/content/reference/extended-diagnostics/NG8101.md
index fdeb062ec811..34b5dc1dfe77 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8101.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8101.md
@@ -1,6 +1,6 @@
 # Invalid Banana-in-Box
 
-This diagnostic detects a backwards "banana-in-box" syntax for [two-way bindings](guide/templates/two-way-binding).
+이 진단은 [양방향 바인딩](guide/templates/two-way-binding)에 대해 역방향 "바나나-박스" 구문을 감지합니다.
 
 <docs-code language="html">
 
@@ -8,16 +8,16 @@ This diagnostic detects a backwards "banana-in-box" syntax for [two-way bindings
 
 </docs-code>
 
-## What's wrong with that?
+## 무엇이 잘못되었나요?
 
-As it stands, `([var])` is actually an [event binding](guide/templates/event-listeners) with the name `[var]`.
-The author likely intended this as a two-way binding to a variable named `var` but, as written, this binding has no effect.
+현재 상태에서 `([var])`는 사실 [이벤트 바인딩](guide/templates/event-listeners)으로, 이름은 `[var]`입니다.
+저자는 아마도 이것을 `var`라는 이름의 변수에 대한 양방향 바인딩으로 의도했겠지만, 이렇게 작성된 경우 이 바인딩은 아무런 효과가 없습니다.
 
-## What should I do instead?
+## 대신 무엇을 해야 하나요?
 
-Fix the typo.
-As the name suggests, the banana `(` should go _inside_ the box `[]`.
-In this case:
+오타를 수정하세요.
+이름에서 알 수 있듯이 바나나 `(`는 박스 `[]` 안으로 들어가야 합니다.
+이 경우:
 
 <docs-code language="html">
 
@@ -25,14 +25,14 @@ In this case:
 
 </docs-code>
 
-## Configuration requirements
+## 구성 요구 사항
 
-[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit.
-`invalidBananaInBox` has no additional requirements beyond `strictTemplates`.
+[`strictTemplates`](tools/cli/template-typecheck#strict-mode)는 모든 확대 진단이 발생하도록 활성화해야 합니다.
+`invalidBananaInBox`는 `strictTemplates` 외에 추가 요구 사항이 없습니다.
 
-## What if I can't avoid this?
+## 이 문제를 피할 수 없다면?
 
-This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+이 진단은 프로젝트의 `tsconfig.json` 파일을 편집하여 비활성화할 수 있습니다:
 
 <docs-code language="json">
 {
@@ -46,4 +46,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 }
 </docs-code>
 
-See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
+자세한 정보는 [확대 진단 구성](extended-diagnostics#configuration)을 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/extended-diagnostics/NG8102.md b/adev/src/content/reference/extended-diagnostics/NG8102.md
index 8b6e34e06316..4a3c4deb518e 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8102.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8102.md
@@ -1,38 +1,36 @@
 # Nullish coalescing not nullable
 
-This diagnostic detects a useless nullish coalescing operator \(`??`\) characters in Angular templates.
-Specifically, it looks for operations where the input is not "nullable", meaning its type does not include `null` or `undefined`.
-For such values, the right side of the `??` will never be used.
+이 진단은 Angular 템플릿에서 쓸모없는 nullish coalescing 연산자 \(`??`\) 문자를 감지합니다.
+특히, 입력이 "nullable"이 아닌 작업을 찾습니다. 즉, 그 타입이 `null`이나 `undefined`를 포함하지 않습니다.
+이러한 값에 대해 `??`의 오른쪽은 절대 사용되지 않습니다.
 
 <docs-code language="typescript">
 
 import {Component} from '@angular/core';
 
 @Component({
-  // Template displays `username` if present, falls back to 'root' if it is
-  // `null` or `undefined`.
+  // 템플릿은 `username`이 존재하면 표시하고, `null` 또는 `undefined`일 경우 'root'로 대체합니다.
   template: `<div>{{ username ?? 'root' }}</div>`,
 })
 class MyComponent {
-  // `username` is declared as a `string` which *cannot* be `null` or
-  // `undefined`.
+  // `username`은 `null`이나 `undefined`가 될 수 없는 `string`으로 선언되었습니다.
   username: string = 'Angelino';
 }
 
 </docs-code>
 
-## What's wrong with that?
+## 그게 왜 문제인가요?
 
-Using the nullish coalescing operator with a non-nullable input has no effect and is indicative of a discrepancy between the allowed type of a value and how it is presented in the template.
-A developer might reasonably assume that the right side of the nullish coalescing operator is displayed in some case, but it will never actually be displayed.
-This can lead to confusion about the expected output of the program.
+nullish coalescing 연산자를 non-nullable 입력과 함께 사용하는 것은 효과가 없으며, 값의 허용 타입과 템플릿에서 어떻게 표시되는지의 불일치를 나타냅니다.
+개발자는 합리적으로 nullish coalescing 연산자의 오른쪽이 어떤 경우에 표시된다고 가정할 수 있지만, 실제로는 절대 표시되지 않습니다.
+이로 인해 프로그램의 예상 출력에 대한 혼란이 생길 수 있습니다.
 
-## What should I do instead?
+## 대신 무엇을 해야 하나요?
 
-Update the template and declared type to be in sync.
-Double-check the type of the input and confirm whether it is actually expected to be nullable.
+템플릿과 선언된 타입을 동기화하도록 업데이트하십시오.
+입원의 타입을 다시 확인하고 실제로 nullable로 기대되는지 확인하십시오.
 
-If the input should be nullable, add `null` or `undefined` to its type to indicate this.
+입원이 nullable이어야 하는 경우, 이를 나타내기 위해 타입에 `null` 또는 `undefined`를 추가하십시오.
 
 <docs-code language="typescript">
 
@@ -42,22 +40,20 @@ import {Component} from '@angular/core';
   template: `<div>{{ username ?? 'root' }}</div>`,
 })
 class MyComponent {
-  // `username` is now nullable. If it is ever set to `null`, 'root' will be
-  // displayed.
+  // 이제 `username`은 nullable입니다. 만약 `null`로 설정되면 'root'가 표시됩니다.
   username: string | null = 'Angelino';
 }
 
 </docs-code>
 
-If the input should *not* be nullable, delete the `??` operator and its right operand, since the value is guaranteed by TypeScript to always be non-nullable.
+입원이 *nullable*이 아니어야 하는 경우, `??` 연산자와 그 오른쪽 피연산자를 삭제하십시오. 그 값은 TypeScript에 의해 항상 non-nullable로 보장되기 때문입니다.
 
 <docs-code language="typescript">
 
 import {Component} from '@angular/core';
 
 @Component({
-  // Template always displays `username`, which is guaranteed to never be `null`
-  // or `undefined`.
+  // 템플릿은 항상 `username`을 표시하며, 이는 절대 `null`이나 `undefined`가 아닙니다.
   template: `<div>{{ username }}</div>`,
 })
 class MyComponent {
@@ -66,14 +62,14 @@ class MyComponent {
 
 </docs-code>
 
-## Configuration requirements
+## 구성 요구 사항
 
-[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit.
-[`strictNullChecks`](tools/cli/template-typecheck#strict-null-checks) must also be enabled to emit `nullishCoalescingNotNullable` diagnostics.
+[`strictTemplates`](tools/cli/template-typecheck#strict-mode)가 활성화되어 있어야 모든 확장 진단이 표시됩니다.
+[`strictNullChecks`](tools/cli/template-typecheck#strict-null-checks)도 활성화되어야 `nullishCoalescingNotNullable` 진단을 방출할 수 있습니다.
 
-## What if I can't avoid this?
+## 만약 피할 수 없다면 어떻게 해야 하나요?
 
-This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+이 진단은 프로젝트의 `tsconfig.json` 파일을 편집하여 비활성화할 수 있습니다:
 
 <docs-code language="json">
 {
@@ -87,4 +83,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 }
 </docs-code>
 
-See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
+자세한 내용은 [확장 진단 구성](extended-diagnostics#configuration)을 참조하십시오.
\ No newline at end of file
diff --git a/adev/src/content/reference/extended-diagnostics/NG8103.md b/adev/src/content/reference/extended-diagnostics/NG8103.md
index 0d2a96bfb584..d1c8eff71754 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8103.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8103.md
@@ -1,15 +1,13 @@
-# Missing control flow directive
+# 누락된 제어 흐름 지시문
 
-This diagnostics ensures that a standalone component which uses known control flow directives
-(such as `*ngIf`, `*ngFor`, or `*ngSwitch`) in a template, also imports those directives either
-individually or by importing the `CommonModule`.
+이 진단은 템플릿에서 알려진 제어 흐름 지시문(`*ngIf`, `*ngFor`, `*ngSwitch` 등)을 사용하는 독립형 구성 요소가 해당 지시문을 개별적으로 또는 `CommonModule`을 가져오는 방법으로 가져오는지 확인합니다.
 
 <docs-code language="typescript">
 
 import {Component} from '@angular/core';
 
 @Component({
-  // Template uses `*ngIf`, but no corresponding directive imported.
+  // 템플릿이 `*ngIf`를 사용하지만 해당 지시문이 가져와지지 않았습니다.
   imports: [],
   template: `<div *ngIf="visible">Hi</div>`,
 })
@@ -17,15 +15,15 @@ class MyComponent {}
 
 </docs-code>
 
-## What's wrong with that?
+## 그게 잘못된 이유는 무엇인가요?
 
-Using a control flow directive without importing it will fail at runtime, as Angular attempts to bind to an `ngIf` property of the HTML element, which does not exist.
+지시문을 가져오지 않고 제어 흐름 지시문을 사용하면 Angular가 존재하지 않는 HTML 요소의 `ngIf` 속성에 바인딩을 시도하면서 런타임에서 실패하게 됩니다.
 
-## What should I do instead?
+## 대신 무엇을 해야 하나요?
 
-Make sure that a corresponding control flow directive is imported.
+상응하는 제어 흐름 지시문이 가져와졌는지 확인하세요.
 
-A directive can be imported individually:
+지시문은 개별적으로 가져올 수 있습니다:
 
 <docs-code language="typescript">
 
@@ -40,7 +38,7 @@ class MyComponent {}
 
 </docs-code>
 
-or you could import the entire `CommonModule`, which contains all control flow directives:
+또는 모든 제어 흐름 지시문이 포함된 전체 `CommonModule`을 가져올 수 있습니다:
 
 <docs-code language="typescript">
 
@@ -55,14 +53,13 @@ class MyComponent {}
 
 </docs-code>
 
-## Configuration requirements
+## 구성 요구 사항
 
-[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit.
-`missingControlFlowDirective` has no additional requirements beyond `strictTemplates`.
+[`strictTemplates`](tools/cli/template-typecheck#strict-mode)는 모든 확장된 진단이 발생할 수 있도록 활성화되어야 합니다. `missingControlFlowDirective`는 `strictTemplates`를 초과하는 추가 요구 사항이 없습니다.
 
-## What if I can't avoid this?
+## 만약 이 문제를 피할 수 없다면?
 
-This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+이 진단은 프로젝트의 `tsconfig.json` 파일을 편집하여 비활성화할 수 있습니다:
 
 <docs-code language="json">
 {
@@ -76,4 +73,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 }
 </docs-code>
 
-See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
+자세한 내용은 [확장된 진단 구성](extended-diagnostics#configuration)을 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/extended-diagnostics/NG8104.md b/adev/src/content/reference/extended-diagnostics/NG8104.md
index f06c21dd7a5c..b6336b84964b 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8104.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8104.md
@@ -1,7 +1,6 @@
-# Text attribute not binding
+# 텍스트 속성 바인딩 안 됨
 
-This diagnostic ensures that attributes which have the "special" Angular binding prefix (`attr.`, `style.`, and
-`class.`) are interpreted as bindings.
+이 진단은 "특수" Angular 바인딩 접두사(`attr.`, `style.`, 및 `class.`)를 가진 속성이 바인딩으로 해석되는지 확인합니다.
 
 <docs-code language="html">
 
@@ -9,15 +8,13 @@ This diagnostic ensures that attributes which have the "special" Angular binding
 
 </docs-code>
 
-## What's wrong with that?
+## 문제가 무엇인가요?
 
-In this example, `attr.id` is interpreted as a regular attribute and will appear
-as-is in the final HTML (`<div attr.id="my-id"></div>`). This is likely not the intent of the developer.
-Instead, the intent is likely to set the `id` attribute (`<div id="my-id"></div>`).
+이 예제에서 `attr.id`는 일반 속성으로 해석되며 최종 HTML에 그대로 나타납니다 (`<div attr.id="my-id"></div>`). 이는 개발자의 의도가 아닐 가능성이 높습니다. 대신, 개발자의 의도는 `id` 속성을 설정하는 것일 가능성이 높습니다 (`<div id="my-id"></div>`).
 
-## What should I do instead?
+## 대신 무엇을 해야 하나요?
 
-When binding to `attr.`, `class.`, or `style.`, ensure you use the Angular template binding syntax (`[]`).
+`attr.`, `class.`, 또는 `style.`에 바인딩할 때, Angular 템플릿 바인딩 문법(`[]`)을 사용해야 합니다.
 
 <docs-code language="html">
 
@@ -27,14 +24,13 @@ When binding to `attr.`, `class.`, or `style.`, ensure you use the Angular templ
 
 </docs-code>
 
-## Configuration requirements
+## 구성 요건
 
-[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit.
-`textAttributeNotBinding` has no additional requirements beyond `strictTemplates`.
+[`strictTemplates`](tools/cli/template-typecheck#strict-mode) 옵션이 활성화되어 있어야 모든 확장 진단이 발생할 수 있습니다. `textAttributeNotBinding`은 `strictTemplates` 외에 추가적인 요구 사항이 없습니다.
 
-## What if I can't avoid this?
+## 피할 수 없다면 어떻게 해야 하나요?
 
-This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+이 진단은 프로젝트의 `tsconfig.json` 파일을 편집하여 비활성화할 수 있습니다:
 
 <docs-code language="json">
 
@@ -50,4 +46,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
 </docs-code>
 
-See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
+더 많은 정보는 [확장 진단 구성](extended-diagnostics#configuration)을 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/extended-diagnostics/NG8105.md b/adev/src/content/reference/extended-diagnostics/NG8105.md
index 9635ba685f4b..9b7f05ad2ab2 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8105.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8105.md
@@ -1,13 +1,13 @@
-# Missing `let` keyword in an `*ngFor` expression
+# `*ngFor` 표현식에 `let` 키워드가 누락됨
 
-This diagnostic is emitted when an expression used in `*ngFor` is missing the `let` keyword.
+이 진단은 `*ngFor`에서 사용된 표현식에 `let` 키워드가 누락되었을 때 발생합니다.
 
 <docs-code language="typescript">
 
 import {Component} from '@angular/core';
 
 @Component({
-  // The `let` keyword is missing in the `*ngFor` expression.
+  // `*ngFor` 표현식에 `let` 키워드가 누락되었습니다.
   template: `<div *ngFor="item of items">{{ item }}</div>`,
 })
 class MyComponent {
@@ -16,21 +16,21 @@ class MyComponent {
 
 </docs-code>
 
-## What's wrong with that?
+## 무엇이 잘못되었나요?
 
-A missing `let` is indicative of a syntax error in the `*ngFor` string. It also means that `item` will not be properly pulled into scope and `{{ item }}` will not resolve correctly.
+`let`이 누락되면 `*ngFor` 문자열에 구문 오류가 있음을 나타냅니다. 이는 `item`이 올바르게 스코프로 가져오지 않으며 `{{ item }}`이 제대로 해결되지 않음을 의미합니다.
 
-## What should I do instead?
+## 대신 어떻게 해야 하나요?
 
-Add the missing `let` keyword.
+누락된 `let` 키워드를 추가하십시오.
 
 <docs-code language="typescript">
 
 import {Component} from '@angular/core';
 
 @Component({
-  // The `let` keyword is now present in the `*ngFor` expression,
-  // no diagnostic messages are emitted in this case.
+  // 이제 `*ngFor` 표현식에 `let` 키워드가 존재합니다,
+  // 이 경우 진단 메시지가 발생하지 않습니다.
   template: `<div *ngFor="let item of items">{{ item }}</div>`,
 })
 class MyComponent {
@@ -39,14 +39,13 @@ class MyComponent {
 
 </docs-code>
 
-## Configuration requirements
+## 구성 요구 사항
 
-[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit.
-`missingNgForOfLet` has no additional requirements beyond `strictTemplates`.
+[`strictTemplates`](tools/cli/template-typecheck#strict-mode)를 활성화해야 확장 진단이 발생합니다. `missingNgForOfLet`은 `strictTemplates` 외에 추가 요구 사항이 없습니다.
 
-## What if I can't avoid this?
+## 만약 이 문제를 피할 수 없다면?
 
-This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+이 진단은 프로젝트의 `tsconfig.json` 파일을 수정하여 비활성화할 수 있습니다:
 
 <docs-code language="json">
 {
@@ -60,4 +59,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 }
 </docs-code>
 
-See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
+자세한 내용은 [확장 진단 구성](extended-diagnostics#configuration)을 참조하십시오.
\ No newline at end of file
diff --git a/adev/src/content/reference/extended-diagnostics/NG8106.md b/adev/src/content/reference/extended-diagnostics/NG8106.md
index f8f3ec209768..ce4c9fe458ba 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8106.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8106.md
@@ -1,7 +1,6 @@
-# Suffix not supported
+# 접미사 지원되지 않음
 
-This diagnostic detects when the `.px`, `.%`, and `.em` suffixes are used with an attribute
-binding.
+이 진단은 `.px`, `.%`, 및 `.em` 접미사가 속성 바인딩과 함께 사용될 때 감지합니다.
 
 <docs-code language="html">
 
@@ -9,14 +8,13 @@ binding.
 
 </docs-code>
 
-## What's wrong with that?
+## 문제점은 무엇인가요?
 
-These suffixes are only available for style bindings. They do not have any meaning when binding to an attribute.
+이 접미사는 스타일 바인딩에만 사용할 수 있습니다. 속성에 바인딩할 때는 의미가 없습니다.
 
-## What should I do instead?
+## 대신 무엇을 해야 하나요?
 
-Rather than using the `.px`, `.%`, or `.em` suffixes that are only supported in style bindings,
-move this to the value assignment of the binding.
+스타일 바인딩에서만 지원되는 `.px`, `.%`, 또는 `.em` 접미사를 사용하는 대신, 이를 바인딩의 값 할당으로 이동합니다.
 
 <docs-code language="html">
 
@@ -24,14 +22,14 @@ move this to the value assignment of the binding.
 
 </docs-code>
 
-## Configuration requirements
+## 구성 요구 사항
 
-[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit.
-`suffixNotSupported` has no additional requirements beyond `strictTemplates`.
+[`strictTemplates`](tools/cli/template-typecheck#strict-mode)는 확장된 진단이 발생하도록 활성화해야 합니다.
+`suffixNotSupported`는 `strictTemplates` 외에 추가 요구 사항이 없습니다.
 
-## What if I can't avoid this?
+## 이 문제를 피할 수 없다면?
 
-This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+이 진단은 프로젝트의 `tsconfig.json` 파일을 편집하여 비활성화할 수 있습니다:
 
 <docs-code language="json">
 {
@@ -45,4 +43,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 }
 </docs-code>
 
-See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
+자세한 내용은 [확장 진단 구성](extended-diagnostics#configuration)을 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/extended-diagnostics/NG8107.md b/adev/src/content/reference/extended-diagnostics/NG8107.md
index 26f49dac8794..f39fbe6ff0c1 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8107.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8107.md
@@ -1,42 +1,42 @@
-# Optional chain not nullable
+# 선택적 체인이 널이 아님
 
-This diagnostic detects when the left side of an optional chain operation (`.?`) does not include `null` or `undefined` in its type in Angular templates.
+이 진단은 선택적 체인 연산(`.?`)의 왼쪽 측면이 Angular 템플릿에서 `null` 또는 `undefined`를 포함하지 않은 경우를 감지합니다.
 
 <docs-code language="typescript">
 
 import {Component} from '@angular/core';
 
 @Component({
-  // Print the user's name safely, even if `user` is `null` or `undefined`.
+  // 사용자의 이름을 안전하게 출력합니다. `user`가 `null` 또는 `undefined`일 때도 마찬가지입니다.
   template: `<div>User name: {{ user?.name }}</div>`,
 })
 class MyComponent {
-  // `user` is declared as an object which *cannot* be `null` or `undefined`.
+  // `user`는 `null` 또는 `undefined`가 될 수 없는 객체로 선언되었습니다.
   user: { name: string } = { name: 'Angelino' };
 }
 
 </docs-code>
 
-## What's wrong with that?
+## 무엇이 잘못되었나요?
 
-Using the optional chain operator with a non-nullable input has no effect and is indicative of a discrepancy between the allowed type of a value and how it is presented in the template.
-A developer might reasonably assume that the output of the optional chain operator is could be `null` or `undefined`, but it will never actually be either of those values.
-This can lead to confusion about the expected output of the program.
+널이 아님 입력과 함께 선택적 체인 연산자를 사용하는 것은 효과가 없으며, 값의 허용되는 타입과 템플릿에서 표현되는 방식 간의 불일치를 나타냅니다.
+개발자는 선택적 체인 연산자의 출력이 `null` 또는 `undefined`일 수 있다고 합리적으로 추정할 수 있지만, 실제로는 결코 그런 값이 되지 않습니다.
+이는 프로그램의 예상 출력에 대한 혼란을 초래할 수 있습니다.
 
-## What should I do instead?
+## 대신 무엇을 해야 하나요?
 
-Update the template and declared type to be in sync.
-Double-check the type of the input and confirm whether it is actually expected to be nullable.
+템플릿과 선언된 타입을 동기화합니다.
+입력의 타입을 다시 확인하고 실제로 널이 되는 것이 예상되는지 확인합니다.
 
-If the input should be nullable, add `null` or `undefined` to its type to indicate this.
+입력이 널이 되어야 하는 경우, 이를 나타내기 위해 `null` 또는 `undefined`를 타입에 추가합니다.
 
 <docs-code language="typescript">
 
 import {Component} from '@angular/core';
 
 @Component({
-  // If `user` is nullish, `name` won't be evaluated and the expression will
-  // return the nullish value (`null` or `undefined`).
+  // `user`가 널리시블(nullish)한 경우, `name`은 평가되지 않으며 표현식이
+  // 널리시블 값(`null` 또는 `undefined`)을 반환합니다.
   template: `<div>{{ user?.name }}</div>`,
 })
 class MyComponent {
@@ -45,15 +45,14 @@ class MyComponent {
 
 </docs-code>
 
-If the input should not be nullable, delete the `?` operator.
+입력이 널이 되어서는 안 되는 경우, `?` 연산자를 삭제합니다.
 
 <docs-code language="typescript">
 
 import {Component} from '@angular/core';
 
 @Component({
-  // Template always displays `name` as `user` is guaranteed to never be `null`
-  // or `undefined`.
+  // 템플릿은 항상 `user`가 절대 `null` 또는 `undefined`가 아닐 것이 보장되므로 `name`을 표시합니다.
   template: `<div>{{ foo.bar }}</div>`,
 })
 class MyComponent {
@@ -62,14 +61,14 @@ class MyComponent {
 
 </docs-code>
 
-## Configuration requirements
+## 구성 요구 사항
 
-[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit.
-[`strictNullChecks`](tools/cli/template-typecheck#strict-null-checks) must also be enabled to emit `optionalChainNotNullable` diagnostics.
+[`strictTemplates`](tools/cli/template-typecheck#strict-mode)는 모든 확장된 진단이 발생하도록 활성화되어야 합니다.
+[`strictNullChecks`](tools/cli/template-typecheck#strict-null-checks) 또한 `optionalChainNotNullable` 진단을 발생시킬 수 있도록 활성화되어야 합니다.
 
-## What if I can't avoid this?
+## 이를 피할 수 없다면?
 
-This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+이 진단은 프로젝트의 `tsconfig.json` 파일을 편집하여 비활성화할 수 있습니다:
 
 <docs-code language="json">
 {
@@ -83,4 +82,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 }
 </docs-code>
 
-See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
+자세한 정보는 [확장된 진단 구성](extended-diagnostics#configuration)을 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/extended-diagnostics/NG8108.md b/adev/src/content/reference/extended-diagnostics/NG8108.md
index 1fa11e139c1c..9de61536661a 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8108.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8108.md
@@ -1,7 +1,6 @@
-# `ngSkipHydration` should be a static attribute
+# `ngSkipHydration`는 정적 속성이어야 합니다
 
-`ngSkipHydration` is a special attribute which indicates to Angular that a particular component should be opted-out of [hydration](guide/hydration).
-This diagnostic ensures that this attribute `ngSkipHydration` is set statically and the value is either set to `"true"` or an empty value.
+`ngSkipHydration`는 특정 컴포넌트가 [수화](guide/hydration)에서 제외되어야 한다는 것을 Angular에 나타내는 특별한 속성입니다. 이 진단은 이 속성 `ngSkipHydration`이 정적으로 설정되고 값이 `"true"` 또는 빈 값으로 설정되어 있는지 확인합니다.
 
 <docs-code language="typescript">
 
@@ -16,13 +15,13 @@ class MyComponent {
 
 </docs-code>
 
-## What's wrong with that?
+## 무엇이 문제인가요?
 
-As a special attribute implemented by Angular, `ngSkipHydration` needs to be statically analyzable so Angular knows at compile-time whether or not hydration is needed for a component.
+Angular에 의해 구현된 특별한 속성으로써, `ngSkipHydration`는 정적 분석이 가능해야 하므로 Angular는 컴포넌트에 대해 수화가 필요한지 여부를 컴파일 시간에 알 수 있습니다.
 
-## What should I do instead?
+## 대신 무엇을 해야 하나요?
 
-When using the `ngSkipHydration`, ensure that it's set as a static attribute (i.e. you do not use the Angular template binding syntax).
+`ngSkipHydration`를 사용할 때, 그것이 정적 속성으로 설정되어 있는지 확인하세요 (즉, Angular 템플릿 바인딩 구문을 사용하지 마세요).
 
 <docs-code language="typescript">
 
@@ -38,7 +37,7 @@ class MyComponent {}
 
 </docs-code>
 
-If a conditional is necessary, you can wrap the component in an `*ngIf`.
+조건이 필요하다면, 컴포넌트를 `*ngIf`로 감쌀 수 있습니다.
 
 <docs-code language="html">
 
@@ -59,14 +58,13 @@ class MyComponent {}
 
 </docs-code>
 
-## Configuration requirements
+## 구성 요구 사항
 
-[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit.
-`skipHydrationNotStatic` has no additional requirements beyond `strictTemplates`.
+[`strictTemplates`](tools/cli/template-typecheck#strict-mode)가 활성화되어야 확장 진단이 생성됩니다. `skipHydrationNotStatic`는 `strictTemplates` 이외에 추가 요구 사항이 없습니다.
 
-## What if I can't avoid this?
+## 이 문제를 피할 수 없다면 어떻게 하나요?
 
-This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+이 진단은 프로젝트의 `tsconfig.json` 파일을 수정하여 비활성화할 수 있습니다:
 
 <docs-code language="json">
 {
@@ -80,4 +78,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 }
 </docs-code>
 
-See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
+자세한 내용은 [확장 진단 구성](extended-diagnostics#configuration)을 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/extended-diagnostics/NG8109.md b/adev/src/content/reference/extended-diagnostics/NG8109.md
index 2f7cd126c918..95e1b4d4e5e6 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8109.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8109.md
@@ -1,6 +1,6 @@
-# Signals must be invoked in template interpolations. 
+# 신호는 템플릿 보간에서 호출되어야 합니다.
 
-This diagnostic detects uninvoked signals in template interpolations.
+이 진단은 템플릿 보간에서 호출되지 않은 신호를 감지합니다.
 
 <docs-code language="typescript">
 
@@ -15,14 +15,14 @@ class MyComponent {
 
 </docs-code>
 
-## What's wrong with that?
+## 그게 뭐가 잘못되었죠?
 
-Angular Signals are zero-argument functions (`() => T`). When executed, they return the current value of the signal.
-This means they are meant to be invoked when used in template interpolations to render their value.
+Angular 신호는 제로 인수 함수(`() => T`)입니다. 실행 시 신호의 현재 값을 반환합니다.  
+즉, 신호는 값 렌더링을 위해 템플릿 보간에서 사용될 때 호출되어야 합니다.
 
-## What should I do instead?
+## 대신 무엇을 해야 하나요?
 
-Ensure to invoke the signal when you use it within a template interpolation to render its value.
+템플릿 보간 내에서 신호를 사용하는 경우 신호를 호출하여 값을 렌더링하도록 하세요.
 
 <docs-code language="typescript">
 
@@ -37,14 +37,14 @@ class MyComponent {
 
 </docs-code>
 
-## Configuration requirements
+## 구성 요구 사항
 
-[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit.
-`interpolatedSignalNotInvoked` has no additional requirements beyond `strictTemplates`.
+[`strictTemplates`](tools/cli/template-typecheck#strict-mode)를 활성화해야 모든 확장 진단이 발생할 수 있습니다.  
+`interpolatedSignalNotInvoked`는 `strictTemplates` 외에 추가 요구 사항이 없습니다.
 
-## What if I can't avoid this?
+## 이 문제를 피할 수 없다면?
 
-This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+이 진단은 프로젝트의 `tsconfig.json` 파일을 수정하여 비활성화할 수 있습니다:
 
 <docs-code language="json">
 {
@@ -58,4 +58,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 }
 </docs-code>
 
-See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
+더 많은 정보는 [확장 진단 구성](extended-diagnostics#configuration)을 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/extended-diagnostics/NG8111.md b/adev/src/content/reference/extended-diagnostics/NG8111.md
index 16abd97595bc..6e272a7e1d1a 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8111.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8111.md
@@ -1,54 +1,54 @@
-# Functions should be invoked in event bindings. 
+# 이벤트 바인딩에서 함수가 호출되어야 합니다.
 
-This diagnostic detects uninvoked functions in event bindings.
+이 진단은 이벤트 바인딩에서 호출되지 않은 함수를 감지합니다.
 
 <docs-code language="typescript">
 
 import {Component, signal, Signal} from '@angular/core';
 
 @Component({
-  template: `<button (click)="onClick">Click me</button>`,
+  template: `<button (click)="onClick">클릭하세요</button>`,
 })
 class MyComponent {
   onClick() {
-    console.log('clicked');
+    console.log('클릭됨');
   }
 }
 
 </docs-code>
 
-## What's wrong with that?
+## 문제점은 무엇인가요?
 
-Functions in event bindings should be invoked when the event is triggered. 
-If the function is not invoked, it will not execute when the event is triggered.
+이벤트 바인딩에서의 함수는 이벤트가 트리거될 때 호출되어야 합니다.  
+함수가 호출되지 않으면 이벤트가 트리거될 때 실행되지 않습니다.
 
-## What should I do instead?
+## 대신 무엇을 해야 하나요?
 
-Ensure to invoke the function when you use it in an event binding to execute the function when the event is triggered.
+이벤트 바인딩에서 사용할 때 함수를 호출하여 이벤트가 트리거될 때 함수를 실행하도록 해야 합니다.
 
 <docs-code language="typescript">
 
 import {Component} from '@angular/core';
 
 @Component({
-  template: `<button (click)="onClick()">Click me</button>`,
+  template: `<button (click)="onClick()">클릭하세요</button>`,
 })
 class MyComponent {
   onClick() {
-    console.log('clicked');
+    console.log('클릭됨');
   }
 }
 
 </docs-code>
 
-## Configuration requirements
+## 구성 요구사항
 
-[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit.
-`uninvokedFunctionInEventBinding` has no additional requirements beyond `strictTemplates`.
+[`strictTemplates`](tools/cli/template-typecheck#strict-mode)는 확장 진단이 발생하기 위해 활성화되어야 합니다.  
+`uninvokedFunctionInEventBinding`은 `strictTemplates` 외에 추가 요구 사항이 없습니다.
 
-## What if I can't avoid this?
+## 이 문제를 피할 수 없다면?
 
-This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+이 진단은 프로젝트의 `tsconfig.json` 파일을 편집하여 비활성화할 수 있습니다:
 
 <docs-code language="json">
 {
@@ -62,4 +62,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 }
 </docs-code>
 
-See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
+자세한 내용은 [확장 진단 구성](extended-diagnostics#configuration)을 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/extended-diagnostics/NG8113.md b/adev/src/content/reference/extended-diagnostics/NG8113.md
index 92a50a251cd8..09d5ba084729 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8113.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8113.md
@@ -1,7 +1,6 @@
-# Unused Standalone Imports
+# 사용되지 않는 독립형 가져오기
 
-This diagnostic detects cases where the `imports` array of a `@Component` contains symbols that
-aren't used within the template.
+이 진단은 `@Component`의 `imports` 배열에 템플릿 내에서 사용되지 않는 기호가 포함된 경우를 감지합니다.
 
 <docs-code language="typescript">
 
@@ -12,13 +11,13 @@ class AwesomeCheckbox {}
 
 </docs-code>
 
-## What's wrong with that?
+## 문제는 무엇인가요?
 
-The unused imports add unnecessary noise to your code and can increase your compilation time.
+사용하지 않는 가져오는 코드에 불필요한 소음을 추가하며, 컴파일 시간을 증가시킬 수 있습니다.
 
-## What should I do instead?
+## 대신 무엇을 해야 하나요?
 
-Delete the unused import.
+사용하지 않는 가져오기를 삭제하세요.
 
 <docs-code language="typescript">
 
@@ -29,9 +28,9 @@ class AwesomeCheckbox {}
 
 </docs-code>
 
-## What if I can't avoid this?
+## 이 문제를 피할 수 없다면 어떻게 하나요?
 
-This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+이 진단은 프로젝트의 `tsconfig.json` 파일을 수정하여 비활성화할 수 있습니다:
 
 <docs-code language="json">
 {
@@ -45,4 +44,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 }
 </docs-code>
 
-See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
+추가 정보는 [확장 진단 구성](extended-diagnostics#configuration)을 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/extended-diagnostics/NG8114.md b/adev/src/content/reference/extended-diagnostics/NG8114.md
index b6a594b169db..c729452029c5 100644
--- a/adev/src/content/reference/extended-diagnostics/NG8114.md
+++ b/adev/src/content/reference/extended-diagnostics/NG8114.md
@@ -1,7 +1,6 @@
-# Unparenthesized Nullish Coalescing
+# 괄호 없는 널 병합 연산자
 
-This diagnostic detects cases where the nullish coalescing operator (`??`) is mixed with the logical
-or (`||`) or logical and (`&&`) operators without parentheses to disambiguate precedence.
+이 진단은 널 병합 연산자(`??`)가 괄호 없이 논리적 또는(`||`) 또는 논리적 그리고(`&&`) 연산자와 혼합된 경우를 감지합니다. 이는 우선 순위를 명확하게 구분하지 못하게 합니다.
 
 <docs-code language="typescript">
 
@@ -10,7 +9,7 @@ import {Component, signal, Signal} from '@angular/core';
 @Component({
   template: `
     <button [disabled]="hasPermission() && task()?.disabled ?? true">
-      Run
+      실행
     </button>
   `,
 })
@@ -21,17 +20,13 @@ class MyComponent {
 
 </docs-code>
 
-## What's wrong with that?
+## 그게 뭐가 잘못됐나요?
 
-Without disambiguating parentheses, its difficult to understand whether the `??` or `||`/`&&` is
-evaluated first. This is considered an error in TypeScript and JavaScript, but has historically been
-allowed in Angular templates.
+우선 순위를 명확히 구분하는 괄호가 없으면 `??` 또는 `||`/`&&`가 먼저 평가되는지 이해하기 어렵습니다. 이는 TypeScript와 JavaScript에서 오류로 간주되지만, 역사적으로 Angular 템플릿에서 허용되었습니다.
 
-## What should I do instead?
+## 대신 무엇을 해야 하나요?
 
-Always use parentheses to disambiguate in theses situations. If you're unsure what the original
-intent of the code was but want to keep the behavior the same, place the parentheses around the `??`
-operator.
+이러한 상황에서는 항상 괄호를 사용하여 명확히 구분하세요. 원래 코드의 의도가 무엇인지 확실하지 않지만 동일한 동작을 유지하고 싶다면 `??` 연산자 주위에 괄호를 추가하세요.
 
 <docs-code language="typescript">
 
@@ -40,7 +35,7 @@ import {Component, signal, Signal} from '@angular/core';
 @Component({
   template: `
     <button [disabled]="hasPermission() && (task()?.disabled ?? true)">
-      Run
+      실행
     </button>
   `,
 })
diff --git a/adev/src/content/reference/extended-diagnostics/overview.md b/adev/src/content/reference/extended-diagnostics/overview.md
index a4d8f8bcfc44..6fc059568030 100644
--- a/adev/src/content/reference/extended-diagnostics/overview.md
+++ b/adev/src/content/reference/extended-diagnostics/overview.md
@@ -1,14 +1,14 @@
-# Extended Diagnostics
+# 확장 진단
 
-There are many coding patterns that are technically valid to the compiler or runtime, but which may have complex nuances or caveats.
-These patterns may not have the intended effect expected by a developer, which often leads to bugs.
-The Angular compiler includes "extended diagnostics" which identify many of these patterns, in order to warn developers about the potential issues and enforce common best practices within a codebase.
+컴파일러나 런타임에 기술적으로 유효하지만 복잡한 뉘앙스나 주의 사항이 있는 많은 코딩 패턴이 있습니다.  
+이러한 패턴은 개발자가 기대하는 의도된 효과를 내지 못할 수 있으며, 이로 인해 버그가 발생하는 경우가 많습니다.  
+Angular 컴파일러는 이러한 패턴의 많은 부분을 식별하여 개발자에게 잠재적인 문제를 경고하고 코드베이스 내에서 일반적인 모범 사례를 강제하기 위해 "확장 진단"을 포함하고 있습니다.
 
-## Diagnostics
+## 진단
 
-Currently, Angular supports the following extended diagnostics:
+현재 Angular는 다음과 같은 확장 진단을 지원합니다:
 
-| Code     | Name                                                              |
+| 코드     | 이름                                                              |
 | :------- | :---------------------------------------------------------------- |
 | `NG8101` | [`invalidBananaInBox`](extended-diagnostics/NG8101)               |
 | `NG8102` | [`nullishCoalescingNotNullable`](extended-diagnostics/NG8102)     |
@@ -23,68 +23,66 @@ Currently, Angular supports the following extended diagnostics:
 | `NG8113` | [`unusedStandaloneImports`](extended-diagnostics/NG8113)          |
 | `NG8114` | [`unparenthesizedNullishCoalescing`](extended-diagnostics/NG8114) |
 
-## Configuration
+## 구성
 
-Extended diagnostics are warnings by default and do not block compilation.
-Each diagnostic can be configured as either:
+확장 진단은 기본적으로 경고이며 컴파일을 차단하지 않습니다.  
+각 진단은 다음 중 하나로 구성할 수 있습니다:
 
-| Error category | Effect                                                                                                                                                                   |
+| 오류 카테고리 | 효과                                                                                                                                                                    |
 | :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `warning`      | Default - The compiler emits the diagnostic as a warning but does not block compilation. The compiler will still exist with status code 0, even if warnings are emitted. |
-| `error`        | The compiler emits the diagnostic as an error and fails the compilation. The compiler will exit with a non-zero status code if one or more errors are emitted.           |
-| `suppress`     | The compiler does _not_ emit the diagnostic at all.                                                                                                                      |
+| `warning`      | 기본값 - 컴파일러는 진단을 경고로 출력하지만 컴파일을 차단하지 않습니다. 경고가 발생하더라도 컴파일러는 여전히 상태 코드 0으로 존재합니다.                                   |
+| `error`        | 컴파일러는 진단을 오류로 출력하고 컴파일에 실패합니다. 하나 이상의 오류가 발생하면 컴파일러는 비제로 상태 코드로 종료됩니다.                                    |
+| `suppress`     | 컴파일러는 진단을 전혀 출력하지 않습니다.                                                                                                                              |
 
-Check severity can be configured as an [Angular compiler option](reference/configs/angular-compiler-options):
+점검의 심각도는 [Angular 컴파일러 옵션](reference/configs/angular-compiler-options)으로 구성할 수 있습니다:
 
 <docs-code language="json">
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
-      // The categories to use for specific diagnostics.
+      // 특정 진단에 사용할 카테고리입니다.
       "checks": {
-        // Maps check name to its category.
+        // 점검 이름을 해당 카테고리에 매핑합니다.
         "invalidBananaInBox": "suppress"
       },
 
-      // The category to use for any diagnostics not listed in `checks` above.
+      // 위의 `checks`에 나열되지 않은 진단에 사용할 카테고리입니다.
       "defaultCategory": "error"
     }
-
-}
+  }
 }
 </docs-code>
 
-The `checks` field maps the name of individual diagnostics to their associated category.
-See [Diagnostics](#diagnostics) for a complete list of extended diagnostics and the name to use for configuring them.
+`checks` 필드는 개별 진단의 이름을 해당 카테고리에 매핑합니다.  
+자세한 확장 진단 및 구성에 사용할 이름의 전체 목록은 [진단](#진단)을 참조하십시오.
 
-The `defaultCategory` field is used for any diagnostics that are not explicitly listed under `checks`.
-If not set, such diagnostics will be treated as `warning`.
+`defaultCategory` 필드는 `checks` 아래에 명시적으로 나열되지 않은 진단에 사용됩니다.  
+설정되지 않은 경우, 이러한 진단은 `warning`으로 간주됩니다.
 
-Extended diagnostics will emit when [`strictTemplates`](tools/cli/template-typecheck#strict-mode) is enabled.
-This is required to allow the compiler to better understand Angular template types and provide accurate and meaningful diagnostics.
+확장 진단은 [`strictTemplates`](tools/cli/template-typecheck#strict-mode)가 활성화되면 발생합니다.  
+이는 컴파일러가 Angular 템플릿 유형을 더 잘 이해하고 정확하고 의미 있는 진단을 제공하기 위해 필요합니다.
 
-## Semantic Versioning
+## 의미 있는 버전 관리
 
-The Angular team intends to add or enable new extended diagnostics in **minor** versions of Angular (see [semver](https://docs.npmjs.com/about-semantic-versioning)).
-This means that upgrading Angular may show new warnings in your existing codebase.
-This enables the team to deliver features more quickly and to make extended diagnostics more accessible to developers.
+Angular 팀은 Angular의 **마이너** 버전에 새 확장 진단을 추가하거나 활성화할 계획입니다 (자세한 내용은 [semver](https://docs.npmjs.com/about-semantic-versioning) 참조).  
+이는 Angular를 업그레이드하면 기존 코드베이스에 새로운 경고가 표시될 수 있음을 의미합니다.  
+이는 팀이 기능을 더 빠르게 제공하고 확장 진단을 개발자에게 더 쉽게 접근할 수 있도록 만듭니다.
 
-However, setting `"defaultCategory": "error"` will promote such warnings to hard errors.
-This can cause a minor version upgrade to introduce compilation errors, which may be seen as a semver non-compliant breaking change.
-Any new diagnostics can be suppressed or demoted to warnings via the above [configuration](#configuration), so the impact of a new diagnostic should be minimal to
-projects that treat extended diagnostics as errors by default.
-Defaulting to error is a very powerful tool; just be aware of this semver caveat when deciding if `error` is the right default for your project.
+그러나 `"defaultCategory": "error"`로 설정하면 이러한 경고가 심각한 오류로 승격됩니다.  
+이로 인해 마이너 버전 업그레이드가 컴파일 오류를 도입할 수 있으며, 이는 semver 비준수의 브레이킹 변경으로 간주될 수 있습니다.  
+새로운 진단은 위의 [구성](#구성)을 통해 숨기거나 경고로 낮출 수 있으므로 새로운 진단의 영향은 기본적으로 확장 진단을 오류로 처리하는 프로젝트에는 최소한이 될 것입니다.  
+기본값을 오류로 설정하는 것은 매우 강력한 도구입니다. `error`가 귀하의 프로젝트에 적합한 기본값인지 결정할 때 이 semver 경고 사항을 인식하십시오.
 
-## New Diagnostics
+## 새로운 진단
 
-The Angular team is always open to suggestions about new diagnostics that could be added.
-Extended diagnostics should generally:
+Angular 팀은 추가할 수 있는 새로운 진단에 대한 제안을 항상 열어두고 있습니다.  
+확장 진단은 일반적으로 다음을 수행해야 합니다:
 
-- Detect a common, non-obvious developer mistake with Angular templates
-- Clearly articulate why this pattern can lead to bugs or unintended behavior
-- Suggest one or more clear solutions
-- Have a low, preferably zero, false-positive rate
-- Apply to the vast majority of Angular applications (not specific to an unofficial library)
-- Improve program correctness or performance (not style, that responsibility falls to a linter)
+- Angular 템플릿에서 흔히 발생하는 비직관적인 개발자 실수를 감지합니다.
+- 이 패턴이 버그나 원치 않는 동작으로 이어질 수 있는 이유를 명확하게 설명합니다.
+- 하나 이상의 명확한 해결책을 제안합니다.
+- 낮거나 바람직하게는 제로의 오탐률을 가집니다.
+- 대부분의 Angular 애플리케이션에 적용됩니다 (비공식 라이브러리에 특정하지 않음).
+- 프로그램의 정확성이나 성능을 향상시킵니다 (스타일이 아니라, 그 책임은 린터에게 있습니다).
 
-If you have an idea for an extended diagnostic which fits these criteria, consider filing a [feature request](https://github.com/angular/angular/issues/new?template=2-feature-request.yaml).
+이 기준에 맞는 확장 진단에 대한 아이디어가 있다면 [기능 요청](https://github.com/angular/angular/issues/new?template=2-feature-request.yaml)을 제출하는 것을 고려해 보십시오.
\ No newline at end of file
diff --git a/adev/src/content/reference/license.md b/adev/src/content/reference/license.md
index 9fb02a48c528..cfe7c212661a 100644
--- a/adev/src/content/reference/license.md
+++ b/adev/src/content/reference/license.md
@@ -1,9 +1,9 @@
-# The MIT License
+# MIT 라이선스
 
-Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
+저작권 (c) 2010-2025 Google LLC. https://angular.dev/license
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+본 소프트웨어와 관련 문서 파일(이하 "소프트웨어")의 복사본을 얻는 모든 개인에게 제한 없이 소프트웨어를 사용할 수 있는 권한을 무료로 부여합니다. 여기에는 소프트웨어를 사용하고, 복사하고, 수정하고, 병합하고, 출판하고, 배포하고, 서브 라이센스를 부여하고, 판매할 수 있는 권한이 포함되며, 소프트웨어를 제공받은 개인이 그렇게 할 수 있도록 허용합니다. 단, 다음 조건을 준수해야 합니다:
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+위 저작권 고지와 이 허가 고지는 소프트웨어의 모든 복사본 또는 중요 부분에 포함되어야 합니다.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+소프트웨어는 "있는 그대로" 제공되며, 어떠한 종류의 보증도 없으며, 명시적이거나 암시적이지 않습니다. 여기에는 상업성, 특정 목적에 대한 적합성 및 비침해에 대한 보증이 포함되지만 이에 국한되지 않습니다. 어떤 경우에도 저자나 저작권자는 소프트웨어와 관련하여 또는 소프트웨어의 사용 또는 기타 거래에서 발생하는 계약, 불법행위 또는 기타 상황에 대한 어떠한 청구, 손해 또는 기타 책임에 대해 책임을 지지 않습니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/migrations/cleanup-unused-imports.md b/adev/src/content/reference/migrations/cleanup-unused-imports.md
index 3191acaf2a09..2c6007ccbb76 100644
--- a/adev/src/content/reference/migrations/cleanup-unused-imports.md
+++ b/adev/src/content/reference/migrations/cleanup-unused-imports.md
@@ -1,10 +1,10 @@
-# Clean up unused imports
+# 사용하지 않는 임포트 정리
 
-As of version 19, Angular reports when a component's `imports` array contains symbols that aren't used in its template.
+버전 19부터 Angular는 컴포넌트의 `imports` 배열에 템플릿에서 사용되지 않는 기호가 포함되어 있을 때 경고합니다.
 
-Running this schematic will clean up all unused imports within the project.
+이 스키마를 실행하면 프로젝트 내의 모든 사용하지 않는 임포트를 정리합니다.
 
-Run the schematic using the following command:
+다음 명령어를 사용하여 스키마를 실행하세요:
 
 <docs-code language="shell">
 
@@ -12,7 +12,7 @@ ng generate @angular/core:cleanup-unused-imports
 
 </docs-code>
 
-#### Before
+#### 이전
 
 <docs-code language="typescript">
 import { Component } from '@angular/core';
@@ -25,7 +25,7 @@ import { UnusedDirective } from './unused';
 export class MyComp {}
 </docs-code>
 
-#### After
+#### 이후
 
 <docs-code language="typescript">
 import { Component } from '@angular/core';
@@ -35,4 +35,4 @@ import { Component } from '@angular/core';
   imports: [],
 })
 export class MyComp {}
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/reference/migrations/control-flow.md b/adev/src/content/reference/migrations/control-flow.md
index d1622fbefbf1..f5d7738ea935 100644
--- a/adev/src/content/reference/migrations/control-flow.md
+++ b/adev/src/content/reference/migrations/control-flow.md
@@ -1,13 +1,13 @@
-# Migration to Control Flow syntax
+# 흐름 제어 구문으로의 마이그레이션
 
-[Control flow syntax](guide/templates/control-flow) is available from Angular v17. The new syntax is baked into the template, so you don't need to import `CommonModule` anymore.
+[흐름 제어 구문](guide/templates/control-flow)은 Angular v17부터 사용할 수 있습니다. 새로운 구문은 템플릿에 내장되어 있으므로 더 이상 `CommonModule`을 임포트할 필요가 없습니다.
 
-This schematic migrates all existing code in your application to use new Control Flow Syntax.
+이 스키마틱은 애플리케이션의 모든 기존 코드를 새로운 흐름 제어 구문을 사용하도록 마이그레이션합니다.
 
-Run the schematic using the following command:
+다음 명령어를 사용하여 스키마틱을 실행하세요:
 
 <docs-code language="shell">
 
 ng generate @angular/core:control-flow
 
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/reference/migrations/inject-function.md b/adev/src/content/reference/migrations/inject-function.md
index f504339b4dd3..cf5d155aa890 100644
--- a/adev/src/content/reference/migrations/inject-function.md
+++ b/adev/src/content/reference/migrations/inject-function.md
@@ -1,10 +1,10 @@
-# Migration to the `inject` function
+# `inject` 함수로의 마이그레이션
 
-Angular's `inject` function offers more accurate types and better compatibility with standard decorators, compared to constructor-based injection.
+Angular의 `inject` 함수는 생성자 기반 주입에 비해 보다 정확한 타입과 표준 데코레이터와의 호환성을 제공합니다.
 
-This schematic converts constructor-based injection in your classes to use the `inject` function instead.
+이 스키마는 클래스의 생성자 기반 주입을 대신하여 `inject` 함수를 사용하도록 변환합니다.
 
-Run the schematic using the following command:
+다음 명령어를 사용하여 스키마를 실행하십시오:
 
 <docs-code language="shell">
 
@@ -12,7 +12,7 @@ ng generate @angular/core:inject
 
 </docs-code>
 
-#### Before
+#### 이전
 
 <docs-code language="typescript">
 import { Component, Inject, Optional } from '@angular/core';
@@ -27,7 +27,7 @@ export class MyComp {
 }
 </docs-code>
 
-#### After
+#### 이후
 
 <docs-code language="typescript">
 import { Component, inject } from '@angular/core';
@@ -41,31 +41,23 @@ export class MyComp {
 }
 </docs-code>
 
-## Migration options
+## 마이그레이션 옵션
 
-The migration includes several options to customize its output.
+마이그레이션에는 출력 결과를 사용자화할 수 있는 여러 옵션이 포함되어 있습니다.
 
 ### `path`
 
-Determines which sub-path in your project should be migrated. Pass in `.` or leave it blank to
-migrate the entire directory.
+프로젝트에서 어떤 하위 경로를 마이그레이션할지를 결정합니다. 전체 디렉터리를 마이그레이션하려면 `.`를 전달하거나 비워 두십시오.
 
 ### `migrateAbstractClasses`
 
-Angular doesn't validate that parameters of abstract classes are injectable. This means that the
-migration can't reliably migrate them to `inject` without risking breakages which is why they're
-disabled by default. Enable this option if you want abstract classes to be migrated, but note
-that you may have to **fix some breakages manually**.
+Angular는 추상 클래스의 매개변수가 주입 가능한지 검증하지 않습니다. 이는 마이그레이션이 손상이 발생할 위험 없이 `inject`로 신뢰성 있게 마이그레이션할 수 없음을 의미합니다. 따라서 기본적으로 비활성화됩니다. 추상 클래스가 마이그레이션되기를 원하면 이 옵션을 활성화하십시오. 그러나 **일부 손상을 수동으로 수정해야 할 수도 있습니다**.
 
 ### `backwardsCompatibleConstructors`
 
-By default the migration tries to clean up the code as much as it can, which includes deleting
-parameters from the constructor, or even the entire constructor if it doesn't include any code.
-In some cases this can lead to compilation errors when classes with Angular decorators inherit from
-other classes with Angular decorators. If you enable this option, the migration will generate an
-additional constructor signature to keep it backwards compatible, at the expense of more code.
+기본적으로 마이그레이션은 가능한 한 코드를 정리하려고 시도하며, 여기에는 생성자에서 매개변수를 삭제하거나 코드가 포함되지 않은 경우 전체 생성자를 삭제하는 것이 포함됩니다. 일부 경우 Angular 데코레이터가 포함된 클래스가 다른 Angular 데코레이터가 포함된 클래스를 상속할 때 컴파일 오류가 발생할 수 있습니다. 이 옵션을 활성화하면 마이그레이션이 이전 호환성을 유지하기 위해 추가 생성자 서명을 생성하지만, 그 대가로 더 많은 코드가 발생합니다.
 
-#### Before
+#### 이전
 
 <docs-code language="typescript">
 import { Component } from '@angular/core';
@@ -77,7 +69,7 @@ export class MyComp {
 }
 </docs-code>
 
-#### After
+#### 이후
 
 <docs-code language="typescript">
 import { Component } from '@angular/core';
@@ -87,7 +79,7 @@ import { MyService } from './service';
 export class MyComp {
   private service = inject(MyService);
 
-  /** Inserted by Angular inject() migration for backwards compatibility */
+  /** 이전 호환성을 위한 Angular inject() 마이그레이션에 의해 삽입됨 */
   constructor(...args: unknown[]);
 
   constructor() {}
@@ -96,17 +88,11 @@ export class MyComp {
 
 ### `nonNullableOptional`
 
-If injection fails for a parameter with the `@Optional` decorator, Angular returns `null` which
-means that the real type of any `@Optional` parameter will be `| null`. However, because decorators
-cannot influence their types, there is a lot of existing code whose type is incorrect. The type is
-fixed in `inject()` which can cause new compilation errors to show up. If you enable this option,
-the migration will produce a non-null assertion after the `inject()` call to match the old type,
-at the expense of potentially hiding type errors.
+`@Optional` 데코레이터가 있는 매개변수의 주입이 실패하면 Angular는 `null`을 반환합니다. 이는 모든 `@Optional` 매개변수의 실제 타입이 `| null`이 됨을 의미합니다. 그러나 데코레이터는 자신의 타입에 영향을 미칠 수 없으므로, 타입이 올바르지 않은 기존 코드가 많이 있습니다. 이 타입은 `inject()`에서 수정되며, 새로운 컴파일 오류가 발생할 수 있습니다. 이 옵션을 활성화하면 마이그레이션은 이전 타입과 일치시키기 위해 `inject()` 호출 후에 null이 아님을 단언하는 것을 생성하지만, 그로 인해 잠재적으로 타입 오류를 숨길 수 있습니다.
 
-**Note:** non-null assertions won't be added to parameters that are already typed to be nullable,
-because the code that depends on them likely already accounts for their nullability.
+**참고:** nullable로 타입이 지정된 매개변수에는 null이 아님을 단언하는 문이 추가되지 않습니다. 왜냐하면 이들에 의존하는 코드는 이미 null 가능성을 고려하고 있을 가능성이 높기 때문입니다.
 
-#### Before
+#### 이전
 
 <docs-code language="typescript">
 import { Component, Inject, Optional } from '@angular/core';
@@ -120,7 +106,7 @@ export class MyComp {
 }
 </docs-code>
 
-#### After
+#### 이후
 
 <docs-code language="typescript">
 import { Component, inject } from '@angular/core';
@@ -128,10 +114,10 @@ import { TOKEN_ONE, TOKEN_TWO } from './token';
 
 @Component()
 export class MyComp {
-  // Note the `!` at the end.
+  // 끝에 `!`를 주목하십시오.
   private tokenOne = inject(TOKEN_ONE, { optional: true })!;
 
-  // Does not have `!` at the end, because the type was already nullable.
+  // 끝에 `!`가 없는 이유는 타입이 이미 nullable이기 때문입니다.
   private tokenTwo = inject(TOKEN_TWO, { optional: true });
 }
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/reference/migrations/outputs.md b/adev/src/content/reference/migrations/outputs.md
index bc662f8ad015..ded773986c3e 100644
--- a/adev/src/content/reference/migrations/outputs.md
+++ b/adev/src/content/reference/migrations/outputs.md
@@ -1,25 +1,22 @@
 # Migration to output function
 
-Angular introduced an improved API for outputs in v17.3 that is considered
-production ready as of v19. This API mimics the `input()` API but is not based on Signals.
-Read more about custom events output function and its benefits in the [dedicated guide](guide/components/outputs).
+Angular은 v17.3에서 출력에 대한 개선된 API를 도입하였으며, v19 시점에서 프로덕션 준비 완료로 간주됩니다. 이 API는 `input()` API를 모방하지만 Signals에 기반하지 않습니다. [전문 가이드](guide/components/outputs)에서 사용자 정의 이벤트 출력 기능 및 이점에 대해 더 자세히 읽어보십시오.
 
-To support existing projects that would like to use output function, the Angular team
-provides an automated migration that converts `@Output` custom events to the new `output()` API.
+출력 기능을 사용하려는 기존 프로젝트를 지원하기 위해 Angular 팀은 `@Output` 사용자 정의 이벤트를 새로운 `output()` API로 변환하는 자동 마이그레이션을 제공합니다.
 
-Run the schematic using the following command:
+다음 명령어를 사용하여 스키매틱을 실행하십시오:
 
 ```bash
 ng generate @angular/core:output-migration
 ```
 
-## What does the migration change?
+## 마이그레이션 변경 사항은 무엇인가요?
 
-1. `@Output()` class members are updated to their `output()` equivalent.
-2. Imports in the file of components or directives, at Typescript module level, are updated as well.
-3. Migrates the APIs functions like `event.next()`, which use is not recommended, to `event.emit()` and removes `event.complete()` calls.
+1. `@Output()` 클래스 멤버가 해당 `output()`으로 업데이트 됩니다.
+2. 컴포넌트 또는 지시자의 파일에서 Imports가 Typescript 모듈 수준으로 업데이트 됩니다.
+3. 사용이 권장되지 않는 `event.next()`와 같은 API 함수가 `event.emit()`으로 마이그레이션되며 `event.complete()` 호출은 제거됩니다.
 
-**Before**
+**이전**
 
 ```typescript
 import {Component, Output} from '@angular/core';
@@ -36,7 +33,7 @@ export class MyComponent {
 }
 ```
 
-**After**
+**이후**
 
 ```typescript
 import {Component, output} from '@angular/core';
@@ -53,35 +50,29 @@ export class MyComponent {
 }
 ```
 
-## Configuration options
+## 구성 옵션
 
-The migration supports a few options for fine tuning the migration to your specific needs.
+마이그레이션은 특정 요구 사항에 맞게 마이그레이션을 미세 조정하기 위한 몇 가지 옵션을 지원합니다.
 
 ### `--path`
 
-If not specified, the migration will ask you for a path and update your whole Angular CLI workspace.
-You can limit the migration to a specific sub-directory using this option.
+지정하지 않은 경우, 마이그레이션은 경로를 요청하고 전체 Angular CLI 작업 공간을 업데이트합니다. 이 옵션을 사용하여 특정 하위 디렉토리로 마이그레이션을 제한할 수 있습니다.
 
 ### `--analysis-dir`
 
-In large projects you may use this option to reduce the amount of files being analyzed.
-By default, the migration analyzes the whole workspace, regardless of the `--path` option, in
-order to update all references affected by an `@Output()` migration.
+대규모 프로젝트에서는 이 옵션을 사용하여 분석되는 파일 수를 줄일 수 있습니다. 기본적으로 마이그레이션은 `@Output()` 마이그레이션의 영향을 받는 모든 참조를 업데이트하기 위해 `--path` 옵션과 관계없이 전체 작업 공간을 분석합니다.
 
-With this option, you can limit analysis to a sub-folder. Note that this means that any
-references outside this directory are silently skipped, potentially breaking your build.
+이 옵션을 사용하면 분석을 하위 폴더로 제한할 수 있습니다. 즉, 이 디렉토리 외부의 모든 참조는 조용히 스킵되며, 이로 인해 빌드가 중단될 수 있습니다.
 
-Use these options as shown below:
+아래와 같이 이 옵션을 사용하십시오:
 
 ```bash
 ng generate @angular/core:output-migration --path src/app/sub-folder
 ```
 
-## Exceptions
+## 예외
 
-In some cases, the migration will not touch the code.
-One of these exceptions is the case where the event is used with a `pipe()` method.
-The following code won't be migrated:
+일부 경우에 마이그레이션은 코드를 건드리지 않습니다. 이러한 예외 중 하나는 이벤트가 `pipe()` 메서드와 함께 사용되는 경우입니다. 다음 코드는 마이그레이션되지 않습니다:
 
 ```typescript
 export class MyDialogComponent {
@@ -92,5 +83,4 @@ export class MyDialogComponent {
   otherThing(): void {
     this.close.pipe();
   }
-}
-```
+}
\ No newline at end of file
diff --git a/adev/src/content/reference/migrations/overview.md b/adev/src/content/reference/migrations/overview.md
index 847cc99d6b4a..f72302e03c17 100644
--- a/adev/src/content/reference/migrations/overview.md
+++ b/adev/src/content/reference/migrations/overview.md
@@ -1,33 +1,33 @@
 # Migrations
 
-Learn about how you can migrate your existing angular project to the latest features incrementally.
+기존 Angular 프로젝트를 최신 기능으로 점진적으로 마이그레이션하는 방법에 대해 알아보세요.
 
 <docs-card-container>
   <docs-card title="Standalone" link="Migrate now" href="reference/migrations/standalone">
-    Standalone components provide a simplified way to build Angular applications. Standalone components specify their dependencies directly instead of getting them through NgModules.
+    독립형 컴포넌트는 Angular 애플리케이션을 구축하는 단순화된 방법을 제공합니다. 독립형 컴포넌트는 NgModules를 통해 가져오는 대신 자신의 종속성을 직접 지정합니다.
   </docs-card>
   <docs-card title="Control Flow Syntax" link="Migrate now" href="reference/migrations/control-flow">
-    Built-in Control Flow Syntax allows you to use more ergonomic syntax which is close to JavaScript and has better type checking. It replaces the need to import `CommonModule` to use functionality like `*ngFor`, `*ngIf` and `*ngSwitch`.
+    내장된 제어 흐름 구문은 더 인체공학적인 문법을 사용할 수 있게 하며, 이는 JavaScript와 가깝고 더 나은 타입 검사를 제공합니다. 이는 `*ngFor`, `*ngIf` 및 `*ngSwitch`와 같은 기능을 사용하기 위해 `CommonModule`을 가져올 필요를 대체합니다.
   </docs-card>
   <docs-card title="inject() Function" link="Migrate now" href="reference/migrations/inject-function">
-    Angular's `inject` function offers more accurate types and better compatibility with standard decorators, compared to constructor-based injection.
+    Angular의 `inject` 함수는 생성자 기반 주입에 비해 더 정확한 타입과 표준 데코레이터와의 더 나은 호환성을 제공합니다.
   </docs-card>
   <docs-card title="Lazy-loaded routes" link="Migrate now" href="reference/migrations/route-lazy-loading">
-    Convert eagerly loaded component routes to lazy loaded ones. This allows the build process to split production bundles into smaller chunks, to load less JavaScript at initial page load.
+    즉시 로드되는 컴포넌트 경로를 지연 로드되는 경로로 변환합니다. 이를 통해 빌드 프로세스는 프로덕션 번들을 더 작은 청크로 나눠 초기 페이지 로드 시 더 적은 JavaScript를 로드할 수 있습니다.
   </docs-card>
   <docs-card title="New `input()` API" link="Migrate now" href="reference/migrations/signal-inputs">
-    Convert existing `@Input` fields to the new signal input API that is now production ready.
+    기존 `@Input` 필드를 이제 프로덕션 준비가 된 새로운 신호 입력 API로 변환합니다.
   </docs-card>
   <docs-card title="New `output()` function" link="Migrate now" href="reference/migrations/outputs">
-    Convert existing `@Output` custom events to the new output function that is now production ready.
+    기존 `@Output` 사용자 정의 이벤트를 이제 프로덕션 준비가 된 새로운 출력 함수로 변환합니다.
   </docs-card>
   <docs-card title="Queries as signal" link="Migrate now" href="reference/migrations/signal-queries">
-    Convert existing decorator query fields to the improved signal queries API. The API is now production ready.
+    기존 데코레이터 쿼리 필드를 개선된 신호 쿼리 API로 변환합니다. 이 API는 이제 프로덕션 준비가 되어 있습니다.
   </docs-card>
   <docs-card title="Cleanup unused imports" link="Try it now" href="reference/migrations/cleanup-unused-imports">
-    Clean up unused imports in your project.
+    프로젝트에서 사용하지 않는 가져오기를 정리합니다.
   </docs-card>
   <docs-card title="Self-closing tags" link="Migrate now" href="reference/migrations/self-closing-tags">
-    Convert component templates to use self-closing tags where possible.
+    가능한 경우 컴포넌트 템플릿을 사용하여 자기 닫는 태그로 변환합니다.
   </docs-card>
-</docs-card-container>
+</docs-card-container>
\ No newline at end of file
diff --git a/adev/src/content/reference/migrations/route-lazy-loading.md b/adev/src/content/reference/migrations/route-lazy-loading.md
index 7c084df3f609..cea376c12caf 100644
--- a/adev/src/content/reference/migrations/route-lazy-loading.md
+++ b/adev/src/content/reference/migrations/route-lazy-loading.md
@@ -1,8 +1,8 @@
-# Migration to lazy-loaded routes
+# 지연 로딩 경로로의 마이그레이션
 
-This schematic helps developers to convert eagerly loaded component routes to lazy loaded routes. This allows the build process to split the production bundle into smaller chunks, to avoid big JS bundle that includes all routes, which negatively affects initial page load of an application.
+이 스키마틱은 개발자가 즉시 로딩된 구성 요소 경로를 지연 로딩된 경로로 변환하는 데 도움을 줍니다. 이를 통해 빌드 프로세스는 프로덕션 번들을 더 작은 청크로 나눌 수 있으며, 모든 경로를 포함하는 큰 JS 번들을 피할 수 있어 애플리케이션의 초기 페이지 로드에 부정적인 영향을 미칩니다.
 
-Run the schematic using the following command:
+다음 명령어를 사용하여 스키마틱을 실행하세요:
 
 <docs-code language="shell">
 
@@ -10,9 +10,9 @@ ng generate @angular/core:route-lazy-loading
 
 </docs-code>
 
-### `path` config option
+### `path` 구성 옵션
 
-By default, migration will go over the entire application. If you want to apply this migration to a subset of the files, you can pass the path argument as shown below:
+기본적으로 마이그레이션은 전체 애플리케이션을 진행합니다. 특정 파일 집합에 이 마이그레이션을 적용하려면 아래와 같이 path 인수를 전달할 수 있습니다:
 
 <docs-code language="shell">
 
@@ -20,21 +20,21 @@ ng generate @angular/core:route-lazy-loading --path src/app/sub-component
 
 </docs-code>
 
-The value of the path parameter is a relative path within the project.
+path 매개변수의 값은 프로젝트 내의 상대 경로입니다.
 
-### How does it work?
+### 어떻게 작동하나요?
 
-The schematic will attempt to find all the places where the application routes as defined:
+스키마틱은 애플리케이션 경로가 정의된 모든 위치를 찾으려고 시도합니다:
 
-- `RouterModule.forRoot` and `RouterModule.forChild`
+- `RouterModule.forRoot` 및 `RouterModule.forChild`
 - `Router.resetConfig`
 - `provideRouter`
 - `provideRoutes`
-- variables of type `Routes` or `Route[]` (e.g. `const routes: Routes = [{...}]`)
+- `Routes` 또는 `Route[]` 타입의 변수 (예: `const routes: Routes = [{...}]`)
 
-The migration will check all the components in the routes, check if they are standalone and eagerly loaded, and if so, it will convert them to lazy loaded routes.
+마이그레이션은 경로의 모든 구성 요소를 확인하고, 그들이 독립적이며 즉시 로딩되었는지 확인한 후, 그렇다면 이를 지연 로딩된 경로로 변환합니다.
 
-#### Before
+#### 이전
 
 <docs-code language="typescript">
 // app.module.ts
@@ -45,7 +45,7 @@ import { HomeComponent } from './home/home.component';
     RouterModule.forRoot([
       {
         path: 'home',
-        // HomeComponent is standalone and eagerly loaded
+        // HomeComponent는 독립적이며 즉시 로딩됨
         component: HomeComponent,
       },
     ]),
@@ -54,7 +54,7 @@ import { HomeComponent } from './home/home.component';
 export class AppModule {}
 </docs-code>
 
-#### After
+#### 이후
 
 <docs-code language="typescript">
 // app.module.ts
@@ -63,7 +63,7 @@ export class AppModule {}
     RouterModule.forRoot([
       {
         path: 'home',
-        // ↓ HomeComponent is now lazy loaded
+        // ↓ HomeComponent는 이제 지연 로딩됨
         loadComponent: () => import('./home/home.component').then(m => m.HomeComponent),
       },
     ]),
@@ -72,4 +72,4 @@ export class AppModule {}
 export class AppModule {}
 </docs-code>
 
-This migration will also collect information about all the components declared in NgModules and output the list of routes that use them (including corresponding location of the file). Consider making those components standalone and run this migration again. You can use an existing migration (see https://angular.dev/reference/migrations/standalone) to convert those components to standalone.
+이 마이그레이션은 또한 NgModules에서 선언된 모든 구성 요소에 대한 정보를 수집하고 이를 사용하는 경로의 목록을 출력합니다 (해당 파일의 위치 포함). 이러한 구성 요소를 독립적으로 만들고 이 마이그레이션을 다시 실행하는 것을 고려하세요. 기존의 마이그레이션을 사용하여 (https://angular.dev/reference/migrations/standalone 참조) 이러한 구성 요소를 독립적으로 변환할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/migrations/self-closing-tags.md b/adev/src/content/reference/migrations/self-closing-tags.md
index d8a103007380..0084647115a7 100644
--- a/adev/src/content/reference/migrations/self-closing-tags.md
+++ b/adev/src/content/reference/migrations/self-closing-tags.md
@@ -1,10 +1,10 @@
-# Migration to self-closing tags
+# Self-closing Tags로의 마이그레이션
 
-Self-closing tags are supported in Angular templates since [v16](https://blog.angular.dev/angular-v16-is-here-4d7a28ec680d#7065). .
+Self-closing tags는 [v16](https://blog.angular.dev/angular-v16-is-here-4d7a28ec680d#7065) 이후 Angular 템플릿에서 지원됩니다.
 
-This schematic migrates the templates in your application to use self-closing tags.
+이 스키매틱은 애플리케이션의 템플릿을 Self-closing tags를 사용하도록 마이그레이션합니다.
 
-Run the schematic using the following command:
+다음 명령어를 사용하여 스키매틱을 실행하십시오:
 
 <docs-code language="shell">
 
@@ -13,14 +13,14 @@ ng generate @angular/core:self-closing-tag
 </docs-code>
 
 
-#### Before
+#### 이전
 
 <docs-code language="angular-html">
 
-<!-- Before -->
+<!-- 이전 -->
 <hello-world></hello-world>
 
-<!-- After -->
+<!-- 이후 -->
 <hello-world />
 
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/reference/migrations/signal-inputs.md b/adev/src/content/reference/migrations/signal-inputs.md
index f94d24afb924..0860dac092f2 100644
--- a/adev/src/content/reference/migrations/signal-inputs.md
+++ b/adev/src/content/reference/migrations/signal-inputs.md
@@ -1,29 +1,27 @@
-# Migration to signal inputs
+# 신호 입력으로의 마이그레이션
 
-Angular introduced an improved API for inputs that is considered
-production ready as of v19.
-Read more about signal inputs and their benefits in the [dedicated guide](guide/signals/inputs).
+Angular는 v19부터 프로덕션 준비가 완료된 것으로 간주되는 개선된 입력 API를 도입했습니다.
+신호 입력 및 그 이점에 대한 자세한 내용은 [전문 가이드](guide/signals/inputs)를 참조하세요.
 
-To support existing teams that would like to use signal inputs, the Angular team
-provides an automated migration that converts `@Input` fields to the new `input()` API.
+신호 입력을 사용하고 싶어하는 기존 팀을 지원하기 위해, Angular 팀은 `@Input` 필드를 새로운 `input()` API로 변환하는 자동 마이그레이션을 제공합니다.
 
-Run the schematic using the following command:
+다음 명령어를 사용하여 스키매틱을 실행하세요:
 
 ```bash
 ng generate @angular/core:signal-input-migration
 ```
 
-Alternatively, the migration is available as a [code refactor action](https://code.visualstudio.com/docs/typescript/typescript-refactoring#_refactoring) in VSCode.
-Install the latest version of the VSCode extension and click on an `@Input` field.
-See more details in the section [below](#vscode-extension).
+또는 마이그레이션은 VSCode에서 [코드 리팩토링 액션](https://code.visualstudio.com/docs/typescript/typescript-refactoring#_refactoring)으로도 사용할 수 있습니다.
+최신 버전의 VSCode 확장을 설치하고 `@Input` 필드를 클릭하세요.
+자세한 내용은 [아래](#vscode-extension) 섹션을 참조하세요.
 
-## What does the migration change?
+## 마이그레이션에서 변경되는 사항은 무엇인가요?
 
-1. `@Input()` class members are updated to their signal `input()` equivalent.
-2. References to migrated inputs are updated to call the signal.
-   - This includes references in templates, host bindings or TypeScript code.
+1. `@Input()` 클래스 멤버가 신호 `input()`에 해당하는 것으로 업데이트됩니다.
+2. 마이그레이션된 입력에 대한 참조가 신호를 호출하도록 업데이트됩니다.
+   - 여기에는 템플릿, 호스트 바인딩 또는 TypeScript 코드의 참조가 포함됩니다.
 
-**Before**
+**이전**
 
 ```typescript
 import {Component, Input} from '@angular/core';
@@ -43,7 +41,7 @@ export class MyComponent {
 }
 ```
 
-**After**
+**후**
 
 <docs-code language="angular-ts" highlight="[[4],[7], [10,12]]">
 import {Component, input} from '@angular/core';
@@ -64,53 +62,50 @@ export class MyComponent {
 }
 </docs-code>
 
-## Configuration options
+## 구성 옵션
 
-The migration supports a few options for fine tuning the migration to your specific needs.
+마이그레이션은 특정 요구 사항에 맞게 조정할 수 있는 몇 가지 옵션을 지원합니다.
 
 ### `--path`
 
-By default, the migration will update your whole Angular CLI workspace.
-You can limit the migration to a specific sub-directory using this option.
+기본적으로 마이그레이션은 전체 Angular CLI 작업 영역을 업데이트합니다.
+이 옵션을 사용하여 마이그레이션을 특정 하위 디렉토리로 제한할 수 있습니다.
 
 ### `--best-effort-mode`
 
-By default, the migration skips inputs that cannot be safely migrated.
-The migration tries to refactor code as safely as possible.
+기본적으로 마이그레이션은 안전하게 마이그레이션할 수 없는 입력을 건너뛰습니다.
+마이그레이션은 가능한 한 안전하게 코드를 리팩토링하려고 합니다.
 
-When the `--best-effort-mode` flag is enabled, the migration eagerly
-tries to migrate as much as possible, even if it could break your build.
+`--best-effort-mode` 플래그가 활성화되면, 마이그레이션은 빌드를 깨뜨릴 수 있음에도 불구하고 가능한 한 많이 마이그레이션하려고 시도합니다.
 
 ### `--insert-todos`
 
-When enabled, the migration will add TODOs to inputs that couldn't be migrated.
-The TODOs will include reasoning on why inputs were skipped. E.g.
+활성화되면, 마이그레이션은 마이그레이션할 수 없는 입력에 TODO를 추가합니다.
+TODO에는 입력이 건너뛴 이유가 포함됩니다. 예를 들어:
 
 ```ts
-// TODO: Skipped for migration because:
-//  Your application code writes to the input. This prevents migration.
+// TODO: 마이그레이션을 건너뜀 이유:
+//  당신의 애플리케이션 코드가 입력에 쓰기 때문에. 이는 마이그레이션을 방해합니다.
 @Input() myInput = false;
 ```
 
 ### `--analysis-dir`
 
-In large projects you may use this option to reduce the amount of files being analyzed.
-By default, the migration analyzes the whole workspace, regardless of the `--path` option, in
-order to update all references affected by an `@Input()` migration.
+대규모 프로젝트에서는 이 옵션을 사용하여 분석되는 파일 수를 줄일 수 있습니다.
+기본적으로 마이그레이션은 `--path` 옵션에 관계없이 전체 작업 영역을 분석하여 `@Input()` 마이그레이션에 영향을 받는 모든 참조를 업데이트합니다.
 
-With this option, you can limit analysis to a sub-folder. Note that this means that any
-references outside this directory are silently skipped, potentially breaking your build.
+이 옵션을 사용하면 분석을 하위 폴더로 제한할 수 있습니다. 이는 이 디렉토리 외부의 모든 참조가 조용히 건너뛰어지며, 이는 빌드를 파손할 수 있음을 의미합니다.
 
-## VSCode extension
+## VSCode 확장
 
-![Screenshot of the VSCode extension and clicking on an `@Input` field](assets/images/migrations/signal-inputs-vscode.png "Screenshot of the VSCode extension and clicking on an `@Input` field.")
+![`@Input` 필드를 클릭하는 VSCode 확장의 스크린샷](assets/images/migrations/signal-inputs-vscode.png "`@Input` 필드를 클릭하는 VSCode 확장의 스크린샷.")
 
-The migration is available as a [code refactor action](https://code.visualstudio.com/docs/typescript/typescript-refactoring#_refactoring) in VSCode.
+마이그레이션은 VSCode에서 [코드 리팩토링 액션](https://code.visualstudio.com/docs/typescript/typescript-refactoring#_refactoring)으로 제공됩니다.
 
-To make use of the migration via VSCode, install the latest version of the VSCode extension and either click:
+VSCode를 통한 마이그레이션을 사용하려면, 최신 버전의 VSCode 확장을 설치하고 다음 중 하나를 클릭하세요:
 
-- on a `@Input` field.
-- or, on a directive/component
+- `@Input` 필드를 클릭합니다.
+- 또는, 지시어/컴포넌트를 클릭합니다.
 
-Then, wait for the yellow lightbulb VSCode refactoring button to appear.
-Via this button you can then select the signal input migration.
+그런 다음, 노란색 전구 VSCode 리팩토링 버튼이 나타날 때까지 기다립니다.
+이 버튼을 통해 신호 입력 마이그레이션을 선택할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/migrations/signal-queries.md b/adev/src/content/reference/migrations/signal-queries.md
index 8b9484c2d58d..fb821a246a62 100644
--- a/adev/src/content/reference/migrations/signal-queries.md
+++ b/adev/src/content/reference/migrations/signal-queries.md
@@ -1,30 +1,29 @@
-# Migration to signal queries
+# 신호 쿼리를 위한 마이그레이션
 
-Angular introduced improved APIs for queries that are considered
-production ready as of v19.
-Read more about signal queries and their benefits in the [dedicated guide](guide/signals/queries).
+Angular는 v19 기준으로 프로덕션 준비가 완료된 것으로 간주되는 쿼리에 대한 개선된 API를 도입했습니다.
+신호 쿼리와 그 장점에 대해 더 많은 정보를 보려면 [전용 가이드](guide/signals/queries)를 읽어보세요.
 
-To support existing teams that would like to use signal queries, the Angular team
-provides an automated migration that converts existing decorator query fields to the new API.
+신호 쿼리를 사용하고자 하는 기존 팀을 지원하기 위해 Angular 팀은 
+기존 장식자 쿼리 필드를 새로운 API로 변환하는 자동화된 마이그레이션을 제공합니다.
 
-Run the schematic using the following command:
+다음 명령어를 사용하여 스케매틱을 실행하세요:
 
 ```bash
 ng generate @angular/core:signal-queries-migration
 ```
 
-Alternatively, the migration is available as a [code refactor action](https://code.visualstudio.com/docs/typescript/typescript-refactoring#_refactoring) in VSCode.
-Install the latest version of the VSCode extension and click onto e.g. a `@ViewChild` field.
-See more details in the section [below](#vscode-extension).
+또는 마이그레이션은 VSCode의 [코드 리팩터링 작업](https://code.visualstudio.com/docs/typescript/typescript-refactoring#_refactoring)으로도 제공됩니다.
+최신 버전의 VSCode 확장을 설치하고, 예를 들어 `@ViewChild` 필드에 클릭하세요.
+자세한 내용은 [아래 섹션](#vscode-extension)을 참조하세요.
 
-## What does the migration change?
+## 마이그레이션은 무엇을 변경하나요?
 
-1. `@ViewChild()`, `@ViewChildren`, `@ContentChild` and `@ContentChildren` class members
-   are updated to their signal equivalents.
-2. References in your application to migrated queries are updated to call the signal.
-   - This includes references in templates, host bindings or TypeScript code.
+1. `@ViewChild()`, `@ViewChildren`, `@ContentChild` 및 `@ContentChildren` 클래스 멤버가
+   신호 동등물로 업데이트됩니다.
+2. 마이그레이션된 쿼리에 대한 애플리케이션의 참조가 업데이트되어 신호를 호출합니다.
+   - 여기에는 템플릿, 호스트 바인딩 또는 TypeScript 코드에서의 참조가 포함됩니다.
 
-**Before**
+**이전**
 
 ```typescript
 import {Component, ContentChild} from '@angular/core';
@@ -43,7 +42,7 @@ export class MyComponent {
 }
 ```
 
-**After**
+**이후**
 
 ```typescript
 import {Component, contentChild} from '@angular/core';
@@ -63,53 +62,53 @@ export class MyComponent {
 }
 ```
 
-## Configuration options
+## 구성 옵션
 
-The migration supports a few options for fine tuning the migration to your specific needs.
+마이그레이션은 특정 요구 사항에 맞게 마이그레이션을 미세 조정하기 위한 몇 가지 옵션을 지원합니다.
 
 ### `--path`
 
-By default, the migration will update your whole Angular CLI workspace.
-You can limit the migration to a specific sub-directory using this option.
+기본적으로 마이그레이션은 전체 Angular CLI 작업 공간을 업데이트합니다.
+이 옵션을 사용하여 특정 하위 디렉토리로 마이그레이션을 제한할 수 있습니다.
 
 ### `--best-effort-mode`
 
-By default, the migration skips queries that cannot be safely migrated.
-The migration tries to refactor code as safely as possible.
+기본적으로 마이그레이션은 안전하게 마이그레이션할 수 없는 쿼리를 건너뜁니다.
+마이그레이션은 가능한 한 안전하게 코드를 리팩터링하려고 합니다.
 
-When the `--best-effort-mode` flag is enabled, the migration eagerly
-tries to migrate as much as possible, even if it could break your build.
+`--best-effort-mode` 플래그가 활성화되면, 마이그레이션은 
+빌드를 깨뜨릴 수 있는 경우에도 가능한 한 많은 마이그레이션을 시도합니다.
 
 ### `--insert-todos`
 
-When enabled, the migration will add TODOs to queries that couldn't be migrated.
-The TODOs will include reasoning on why queries were skipped. E.g.
+활성화되면 마이그레이션은 마이그레이션할 수 없는 쿼리에 TODO를 추가합니다.
+TODO는 쿼리가 건너뛴 이유를 포함합니다. 예를 들어:
 
 ```ts
-// TODO: Skipped for migration because:
-//  Your application code writes to the query. This prevents migration.
+// TODO: Migration으로 건너뜀 이유:
+//  애플리케이션 코드가 쿼리에 기록됩니다. 이로 인해 마이그레이션이 불가능합니다.
 @ViewChild('ref') ref?: ElementRef;
 ```
 
 ### `--analysis-dir`
 
-In large projects you may use this option to reduce the amount of files being analyzed.
-By default, the migration analyzes the whole workspace, regardless of the `--path` option, in
-order to update all references affected by a query declaration being migrated.
+대규모 프로젝트에서는 이 옵션을 사용하여 분석되는 파일 수를 줄일 수 있습니다.
+기본적으로 마이그레이션은 `--path` 옵션과 관계없이 전체 작업 공간을 분석하여
+마이그레이션되는 쿼리 선언의 영향을 받는 모든 참조를 업데이트합니다.
 
-With this option, you can limit analysis to a sub-folder. Note that this means that any
-references outside this directory are silently skipped, potentially breaking your build.
+이 옵션을 사용하면 분석을 하위 폴더로 제한할 수 있습니다. 이 경우 이 디렉터리 외부의 모든 
+참조는 조용히 건너뛰어지며, 이로 인해 빌드에 문제가 생길 수 있습니다.
 
-## VSCode extension
+## VSCode 확장
 
-![Screenshot of the VSCode extension and clicking on an `@ViewChild` field](assets/images/migrations/signal-queries-vscode.png "Screenshot of the VSCode extension and clicking on an `@ViewChild` field.")
+![`@ViewChild` 필드에 클릭하는 VSCode 확장 스크린샷](assets/images/migrations/signal-queries-vscode.png "VSCode 확장과 `@ViewChild` 필드에 클릭하는 스크린샷.")
 
-The migration is available as a [code refactor action](https://code.visualstudio.com/docs/typescript/typescript-refactoring#_refactoring) in VSCode.
+마이그레이션은 VSCode의 [코드 리팩터링 작업](https://code.visualstudio.com/docs/typescript/typescript-refactoring#_refactoring)으로 제공됩니다.
 
-To make use of the migration via VSCode, install the latest version of the VSCode extension and either click:
+VSCode를 통해 마이그레이션을 사용하려면 최신 버전의 VSCode 확장을 설치하고 다음 중 하나를 클릭하세요:
 
-- on a `@ViewChild`, `@ViewChildren`, `@ContentChild`, or `@ContentChildren` field.
-- on a directive/component
+- `@ViewChild`, `@ViewChildren`, `@ContentChild`, 또는 `@ContentChildren` 필드에서
+- 지시어/컴포넌트에서
 
-Then, wait for the yellow lightbulb VSCode refactoring button to appear.
-Via this button you can then select the signal queries migration.
+그런 다음 노란색 전구 VSCode 리팩터링 버튼이 나타날 때까지 기다리세요.
+이 버튼을 통해 신호 쿼리 마이그레이션을 선택할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/migrations/standalone.md b/adev/src/content/reference/migrations/standalone.md
index 587d36dc824a..c68b8d9418de 100644
--- a/adev/src/content/reference/migrations/standalone.md
+++ b/adev/src/content/reference/migrations/standalone.md
@@ -1,12 +1,12 @@
-# Migrate an existing Angular project to standalone
+# 기존 Angular 프로젝트를 독립형으로 마이그레이션하기
 
-**Standalone components** provide a simplified way to build Angular applications. Standalone components, directives, and pipes aim to streamline the authoring experience by reducing the need for `NgModule`s. Existing applications can optionally and incrementally adopt the new standalone style without any breaking changes.
+**독립형 컴포넌트**는 Angular 애플리케이션을 구축하는 간소화된 방법을 제공합니다. 독립형 컴포넌트, 지시어 및 파이프는 `NgModule`의 필요성을 줄임으로써 작성 경험을 간소화하는 것을 목표로 합니다. 기존 애플리케이션은 선택적으로 점진적으로 새로운 독립형 스타일을 도입할 수 있으며, 이 과정에서 파괴적인 변경이 없습니다.
 
-<docs-video src="https://www.youtube.com/embed/x5PZwb4XurU" title="Getting started with standalone components"/>
+<docs-video src="https://www.youtube.com/embed/x5PZwb4XurU" title="독립형 컴포넌트 시작하기"/>
 
-This schematic helps to transform components, directive and pipes in existing projects to become standalone. The schematic aims to transform as much code as possible automatically, but it may require some manual fixes by the project author.
+이 스키매틱은 기존 프로젝트의 컴포넌트, 지시어 및 파이프를 독립형으로 변환하는 데 도움을 줍니다. 스키매틱은 가능한 많은 코드를 자동으로 변환하는 것을 목표로 하지만, 프로젝트 작성자가 수동으로 수정해야 할 수도 있습니다.
 
-Run the schematic using the following command:
+다음 명령어를 사용하여 스키매틱을 실행하십시오:
 
 <docs-code language="shell">
 
@@ -14,60 +14,59 @@ ng generate @angular/core:standalone
 
 </docs-code>
 
-## Before updating
+## 업데이트 전
 
-Before using the schematic, please ensure that the project:
+스키매틱을 사용하기 전에 프로젝트가 다음 조건을 충족하는지 확인하십시오:
 
-1. Is using Angular 15.2.0 or later.
-2. Builds without any compilation errors.
-3. Is on a clean Git branch and all work is saved.
+1. Angular 15.2.0 이상을 사용하고 있습니다.
+2. 컴파일 오류 없이 빌드됩니다.
+3. 깨끗한 Git 브랜치에 있으며 모든 작업이 저장되었습니다.
 
-## Schematic options
+## 스키매틱 옵션
 
-| Option              | Details                                                    |
-|:---                 |:---                                                        |
-| `mode`              | The transformation to perform. See [Migration modes](#migration-modes) below for details on the available options. |
-| `path`              | The path to migrate, relative to the project root. You can use this option to migrate sections of your project incrementally. |
+| 옵션               | 세부사항                                                            |
+|:---                |:---                                                                |
+| `mode`             | 수행할 변환. 사용 가능한 옵션에 대한 세부정보는 아래의 [Migration modes](#migration-modes)를 참조하십시오. |
+| `path`             | 프로젝트 루트에 상대적인 마이그레이트할 경로. 이 옵션을 사용하여 프로젝트의 일부를 점진적으로 마이그레이트할 수 있습니다. |
 
-## Migrations steps
+## 마이그레이션 단계
 
-The migration process is composed of three steps. You'll have to run it multiple times and check manually that the project builds and behaves as expected.
+마이그레이션 프로세스는 세 단계로 구성됩니다. 여러 번 실행해야 하며 각 단계를 수행한 후 프로젝트가 예상대로 빌드되고 작동하는지 수동으로 확인해야 합니다.
 
-Note: While the schematic can automatically update most code, some edge cases require developer intervention.
-You should plan to apply manual fixes after each step of the migration. Additionally, the new code generated by the schematic may not match your code's formatting rules.
+주의: 스키매틱이 대부분의 코드를 자동으로 업데이트 할 수 있지만, 일부 엣지 케이스는 개발자의 개입이 필요합니다. 각 마이그레이션 단계 후에 수동 수정을 계획해야 합니다. 또한, 스키매틱에 의해 생성된 새로운 코드가 기존 코드의 포맷팅 규칙과 일치하지 않을 수 있습니다.
 
-Run the migration in the order listed below, verifying that your code builds and runs between each step:
+아래 나열된 순서대로 마이그레이션을 실행하고 각 단계 간에 코드가 빌드되고 실행되는지 확인하십시오:
 
-1. Run `ng g @angular/core:standalone` and select "Convert all components, directives and pipes to standalone"
-2. Run `ng g @angular/core:standalone` and select "Remove unnecessary NgModule classes"
-3. Run `ng g @angular/core:standalone` and select "Bootstrap the project using standalone APIs"
-4. Run any linting and formatting checks, fix any failures, and commit the result
+1. `ng g @angular/core:standalone`를 실행하고 "모든 컴포넌트, 지시어 및 파이프를 독립형으로 변환"을 선택합니다.
+2. `ng g @angular/core:standalone`를 실행하고 "불필요한 NgModule 클래스 제거"를 선택합니다.
+3. `ng g @angular/core:standalone`를 실행하고 "독립형 API를 사용하여 프로젝트 부트스트랩"을 선택합니다.
+4. 모든 린팅 및 포맷팅 검사를 실행하고, 모든 실패를 수정한 후 결과를 커밋합니다.
 
-## After the migration
+## 마이그레이션 후
 
-Congratulations, your application has been converted to standalone 🎉. These are some optional follow-up steps you may want to take now:
+축하합니다. 귀하의 애플리케이션이 독립형으로 변환되었습니다 🎉. 이제 수행하고 싶은 일부 선택적 후속 단계는 다음과 같습니다:
 
-* Find and remove any remaining `NgModule` declarations: since the ["Remove unnecessary NgModules" step](#remove-unnecessary-ngmodules) cannot remove all modules automatically, you may have to remove the remaining declarations manually.
-* Run the project's unit tests and fix any failures.
-* Run any code formatters, if the project uses automatic formatting.
-* Run any linters in your project and fix new warnings. Some linters support a `--fix` flag that may resolve some of your warnings automatically.
+* 남아 있는 `NgModule` 선언을 찾아서 제거하십시오: ["불필요한 NgModules 제거" 단계](#remove-unnecessary-ngmodules)가 모든 모듈을 자동으로 제거할 수 없기 때문에 남아 있는 선언을 수동으로 제거해야 할 수 있습니다.
+* 프로젝트의 단위 테스트를 실행하고 모든 실패를 수정하십시오.
+* 프로젝트가 자동 형식을 사용하는 경우 모든 코드 포맷터를 실행하십시오.
+* 프로젝트 내에서 모든 린터를 실행하고 새로운 경고를 수정하십시오. 일부 린터는 경고를 자동으로 해결할 수 있는 `--fix` 플래그를 지원합니다.
 
-## Migration modes
+## 마이그레이션 모드
 
-The migration has the following modes:
+마이그레이션에는 다음과 같은 모드가 있습니다:
 
-1. Convert declarations to standalone.
-2. Remove unnecessary NgModules.
-3. Switch to standalone bootstrapping API.
-You should run these migrations in the order given.
+1. 선언을 독립형으로 변환합니다.
+2. 불필요한 NgModules를 제거합니다.
+3. 독립형 부트스트래핑 API로 전환합니다.
+이러한 마이그레이션을 주어진 순서로 실행해야 합니다.
 
-### Convert declarations to standalone
+### 선언을 독립형으로 변환하기
 
-In this mode, the migration converts all components, directives and pipes to standalone by removing `standalone: false` and adding dependencies to their `imports` array.
+이 모드에서 마이그레이션은 모든 컴포넌트, 지시어 및 파이프를 `standalone: false`를 제거하고 해당 `imports` 배열에 의존성을 추가하여 독립형으로 변환합니다.
 
-HELPFUL: The schematic ignores NgModules which bootstrap a component during this step because they are likely root modules used by `bootstrapModule` rather than the standalone-compatible `bootstrapApplication`. The schematic converts these declarations automatically as a part of the ["Switch to standalone bootstrapping API"](#switch-to-standalone-bootstrapping-api) step.
+도움이 되는 점: 스키매틱은 이 단계에서 컴포넌트를 부트스트랩하는 NgModule을 무시합니다. 왜냐하면 이러한 NgModule은 `bootstrapModule`에 의해 사용되는 루트 모듈일 가능성이 높고, 독립형 호환 `bootstrapApplication`이 아니기 때문입니다. 스키매틱은 이러한 선언을 ["독립형 부트스트래핑 API로 전환하기"](#switch-to-standalone-bootstrapping-api) 단계의 일환으로 자동으로 변환합니다.
 
-**Before:**
+**이전:**
 
 ```typescript
 // shared.module.ts
@@ -91,7 +90,7 @@ export class GreeterComponent {
 }
 ```
 
-**After:**
+**이후:**
 
 ```typescript
 // shared.module.ts
@@ -114,23 +113,23 @@ export class GreeterComponent {
 }
 ```
 
-### Remove unnecessary NgModules
+### 불필요한 NgModules 제거하기
 
-After converting all declarations to standalone, many NgModules can be safely removed. This step deletes such module declarations and as many corresponding references as possible. If the migration cannot delete a reference automatically, it leaves the following TODO comment so that you can delete the NgModule manually:
+모든 선언을 독립형으로 변환한 후, 많은 NgModule을 안전하게 제거할 수 있습니다. 이 단계는 그러한 모듈 선언과 가능한 많은 해당 참조를 삭제합니다. 마이그레이션이 자동으로 참조를 삭제할 수 없는 경우, 개발자가 NgModule을 수동으로 삭제할 수 있도록 TODO 주석이 남겨집니다:
 
 ```typescript
-/* TODO(standalone-migration): clean up removed NgModule reference manually */
+/* TODO(standalone-migration): 수동으로 제거된 NgModule 참조 정리 */
 ```
 
-The migration considers a module safe to remove if that module:
+마이그레이션은 다음 조건을 충족하면 모듈을 안전하게 제거할 수 있다고 간주합니다:
 
-* Has no `declarations`.
-* Has no `providers`.
-* Has no `bootstrap` components.
-* Has no `imports` that reference a `ModuleWithProviders` symbol or a module that can't be removed.
-* Has no class members. Empty constructors are ignored.
+* `declarations`가 없습니다.
+* `providers`가 없습니다.
+* `bootstrap` 컴포넌트가 없습니다.
+* `ModuleWithProviders` 기호를 참조하거나 제거할 수 없는 모듈을 참조하는 `imports`가 없습니다.
+* 클래스 멤버가 없습니다. 비어 있는 생성자는 무시됩니다.
 
-**Before:**
+**이전:**
 
 ```typescript
 // importer.module.ts
@@ -141,18 +140,18 @@ The migration considers a module safe to remove if that module:
 export class ImporterModule {}
 ```
 
-**After:**
+**이후:**
 
 ```typescript
 // importer.module.ts
-// Does not exist!
+// 존재하지 않음!
 ```
 
-### Switch to standalone bootstrapping API
+### 독립형 부트스트래핑 API로 전환하기
 
-This step converts any usages of  `bootstrapModule` to the new, standalone-based `bootstrapApplication`. It also removes `standalone: false` from the root component and deletes the root NgModule. If the root module has any `providers` or `imports`, the migration attempts to copy as much of this configuration as possible into the new bootstrap call.
+이 단계는 `bootstrapModule`의 모든 사용을 새로운 독립형 기반의 `bootstrapApplication`으로 변환합니다. 또한 루트 컴포넌트에서 `standalone: false`를 제거하고 루트 NgModule을 삭제합니다. 루트 모듈에 `providers` 또는 `imports`가 있는 경우, 마이그레이션은 이 구성의 가능한 많은 부분을 새로운 부트스트랩 호출로 복사하려고 시도합니다.
 
-**Before:**
+**이전:**
 
 ```typescript
 // ./app/app.module.ts
@@ -184,11 +183,11 @@ import { AppModule } from './app/app.module';
 platformBrowser().bootstrapModule(AppModule).catch(e => console.error(e));
 ```
 
-**After:**
+**이후:**
 
 ```typescript
 // ./app/app.module.ts
-// Does not exist!
+// 존재하지 않음!
 ```
 
 ```typescript
@@ -208,17 +207,17 @@ import { AppComponent } from './app/app.component';
 bootstrapApplication(AppComponent).catch(e => console.error(e));
 ```
 
-## Common problems
+## 일반적인 문제
 
-Some common problems that may prevent the schematic from working correctly include:
+스키매틱이 올바르게 작동하지 않을 수 있는 몇 가지 일반적인 문제는 다음과 같습니다:
 
-* Compilation errors - if the project has compilation errors, Angular cannot analyze and migrate it correctly.
-* Files not included in a tsconfig - the schematic determines which files to migrate by analyzing your project's `tsconfig.json` files. The schematic excludes any files not captured by a tsconfig.
-* Code that cannot be statically analyzed - the schematic uses static analysis to understand your code and determine where to make changes. The migration may skip any classes with metadata that cannot be statically analyzed at build time.
+* 컴파일 오류 - 프로젝트에 컴파일 오류가 있는 경우, Angular는 이를 올바르게 분석하고 마이그레이션할 수 없습니다.
+* tsconfig에 포함되지 않은 파일 - 스키매틱은 프로젝트의 `tsconfig.json` 파일을 분석하여 마이그레이트할 파일을 결정합니다. 스키매틱은 tsconfig에 의해 포함되지 않은 파일은 제외합니다.
+* 정적으로 분석할 수 없는 코드 - 스키매틱은 정적 분석을 사용하여 코드를 이해하고 변경할 위치를 결정합니다. 마이그레이션은 빌드 시간에 정적으로 분석할 수 없는 메타데이터가 포함된 클래스를 건너뛸 수 있습니다.
 
-## Limitations
+## 제한 사항
 
-Due to the size and complexity of the migration, there are some cases that the schematic cannot handle:
+마이그레이션의 크기와 복잡성으로 인해 스키매틱이 처리할 수 없는 경우가 몇 가지 있습니다:
 
-* Because unit tests are not ahead-of-time (AoT) compiled, `imports` added to components in unit tests might not be entirely correct.
-* The schematic relies on direct calls to Angular APIs. The schematic cannot recognize custom wrappers around Angular APIs. For example, if there you define a custom `customConfigureTestModule` function that wraps `TestBed.configureTestingModule`, components it declares may not be recognized.
+* 단위 테스트가 사전 컴파일(AoT)되지 않기 때문에, 단위 테스트에 추가된 `imports`가 완전히 올바르지 않을 수 있습니다.
+* 스키매틱은 Angular API에 대한 직접 호출에 의존합니다. 스키매틱은 Angular API를 감싸는 사용자 지정 래퍼를 인식할 수 없습니다. 예를 들어, `TestBed.configureTestingModule`을 감싸는 사용자 지정 `customConfigureTestModule` 함수를 정의하는 경우, 여기에 선언된 컴포넌트는 인식되지 않을 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/press-kit.md b/adev/src/content/reference/press-kit.md
index 17107f99266d..c3a86f508e1f 100644
--- a/adev/src/content/reference/press-kit.md
+++ b/adev/src/content/reference/press-kit.md
@@ -1,67 +1,67 @@
-# Angular Press Kit
+# Angular 프레스 키트
 
-The logo graphics available for download on this page are provided under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/).
+이 페이지에서 다운로드할 수 있는 로고 그래픽은 [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)에 따라 제공됩니다.
 
 <docs-card-container>
-  <docs-card title="Angular logos" href="https://drive.google.com/drive/folders/1IgcAwLDVZUz8ycnFa7T4_H6B4V4LhYUQ?usp=sharing" link="Download from Google Drive">
-    ![Angular wordmark gradient logo](assets/images/press-kit/angular_wordmark_gradient.png "Angular wordmark gradient logo")
-    ![Angular wordmark white logo](assets/images/press-kit/angular_wordmark_white.png "Angular wordmark white logo")
-    ![Angular wordmark black logo](assets/images/press-kit/angular_wordmark_black.png "Angular wordmark black logo")
-    Black and white are the default color variations and should be used in most circumstances. A gradient version of the icon and lockup is available in both static and animated formats and can be used in cases where a color icon is required.
+  <docs-card title="Angular 로고" href="https://drive.google.com/drive/folders/1IgcAwLDVZUz8ycnFa7T4_H6B4V4LhYUQ?usp=sharing" link="Google Drive에서 다운로드">
+    ![Angular 워드마크 그라디언트 로고](assets/images/press-kit/angular_wordmark_gradient.png "Angular 워드마크 그라디언트 로고")
+    ![Angular 워드마크 화이트 로고](assets/images/press-kit/angular_wordmark_white.png "Angular 워드마크 화이트 로고")
+    ![Angular 워드마크 블랙 로고](assets/images/press-kit/angular_wordmark_black.png "Angular 워드마크 블랙 로고")
+    블랙과 화이트는 기본 색상 변형이며 대부분의 경우에 사용해야 합니다. 아이콘과 잠금 화면의 그라디언트 버전이 정적 및 애니메이션 형식으로 제공되며 색상 아이콘이 필요한 경우에 사용될 수 있습니다.
   </docs-card>
-  <docs-card title="Brand guidelines" href="https://drive.google.com/drive/folders/1gD5-kamfribnib6TH4-aqVZxjYaDZlCg?usp=drive_link" link="Download from Google Drive">
-    ![Angular animated gradient logo](assets/images/press-kit/angular_icon_gradient.gif "Angular animated gradient logo")
-    Our brand guidelines folders contain the design files, guidance and community examples for how the brand can be adapted.
-    Read more about adapting the logo in the section below.
+  <docs-card title="브랜드 가이드라인" href="https://drive.google.com/drive/folders/1gD5-kamfribnib6TH4-aqVZxjYaDZlCg?usp=drive_link" link="Google Drive에서 다운로드">
+    ![Angular 애니메이션 그라디언트 로고](assets/images/press-kit/angular_icon_gradient.gif "Angular 애니메이션 그라디언트 로고")
+    우리의 브랜드 가이드라인 폴더에는 디자인 파일, 지침 및 브랜드를 어떻게 조정할 수 있는지에 대한 커뮤니티 예제가 포함되어 있습니다.
+    아래 섹션에서 로고 조정에 대한 자세한 내용을 읽어보세요.
   </docs-card>
 </docs-card-container>
 
-## Press and Media
+## 언론 및 미디어
 
-For inquiries regarding press and media please contact us at press@angular.io. For developer inquiries contact devrel@angular.io.
+언론 및 미디어에 대한 문의는 press@angular.io로 연락해 주세요. 개발자 문의는 devrel@angular.io로 연락해 주세요.
 
-## Adapting the logo
+## 로고 조정하기
 
-Angular’s success is deeply connected to our community. We know many communities, meetups, conferences, blogs, websites, YouTube channels and developers have built their brand on top of ours. This logo is for us and our community, and it’s important that you can join us in updating your brand as well.
+Angular의 성공은 우리 커뮤니티와 깊은 연관이 있습니다. 많은 커뮤니티, 모임, 회의, 블로그, 웹사이트, YouTube 채널 및 개발자들이 우리의 브랜드를 기반으로 자신들의 브랜드를 구축해 왔음을 알고 있습니다. 이 로고는 우리와 우리 커뮤니티를 위한 것이며, 귀하가 브랜드를 업데이트하는 데 함께할 수 있는 것이 중요합니다.
 
-Angular has long valued creative expression through customized shield icons. The new Angular icon allows customization in several ways. The icon shape can be used as a container for simple colors and patterns. Alternatively, a custom backplate can be used for more intricate designs. We recommend keeping your compositions simple and clear, since busy and complex patterns can be difficult to read. We appreciate your cooperation in keeping our community a safe and welcoming space. Please keep designs respectful and be mindful of our community guidelines when creating your icons.
+Angular는 오랫동안 맞춤형 쉴드 아이콘을 통한 창의적 표현을 소중히 여겨왔습니다. 새로운 Angular 아이콘은 여러 방법으로 맞춤 설정할 수 있습니다. 아이콘 모양은 단순 색상 및 패턴의 컨테이너로 사용할 수 있습니다. 또는 더 복잡한 디자인을 위해 맞춤형 백플레이트를 사용할 수 있습니다. 복잡하고 바쁜 패턴은 읽기 어려울 수 있으므로 구성 요소를 간단하고 명확하게 유지하는 것을 권장합니다. 우리 커뮤니티를 안전하고 환영하는 공간으로 유지하는 데 협력해 주셔서 감사합니다. 아이콘을 만들 때 디자인이 존중받고 커뮤니티 가이드라인을 염두에 두시기 바랍니다.
 
-We have provided a template to get you started.
+시작하기 위한 템플릿을 제공해 드렸습니다.
 
-If you have any questions on adapting the new logo, or updating your own, please email devrel@angular.io for additional help – we can’t wait to see what you create!
+새 로고 조정 또는 귀하의 로고 업데이트에 대한 질문이 있는 경우 devrel@angular.io로 이메일을 보내 추가 지원을 요청해 주세요. 여러분이 만들 내용을 빨리 보고 싶습니다!
 
 <docs-workflow>
 
-<docs-step title="Adapt the logo colors as your own">
-Lean into the shape of Angular’s new logo by changing the logo colors to match your brand colors, flag, cause, etc.
+<docs-step title="로고 색상을 자신만의 색상으로 조정하기">
+Angular의 새로운 로고 형태를 적극 활용하여 로고 색상을 브랜드 색상, 깃발, 이념 등과 일치시켜 변경하세요.
 
-In this example, we’ve adapted the colors to create an Angular Pride logo variation:
-![Angular pride logo](assets/images/press-kit/angular_pride.png#small "Angular pride logo")
+이 예제에서는 색상을 조정하여 Angular Pride 로고 변형을 만들었습니다:
+![Angular 프라이드 로고](assets/images/press-kit/angular_pride.png#small "Angular 프라이드 로고")
 </docs-step>
 
-<docs-step title="Adapt the logo shape as your own">
-Lean into the shape of Angular’s new logo by adapting the shield to match your own brand.
+<docs-step title="로고 형태를 자신만의 형태로 조정하기">
+Angular의 새로운 로고 형태를 적극 활용하여 쉴드를 자신의 브랜드에 맞게 조정하세요.
 
-In this example, we’ve adapted the shield to create an Angular Signals logo variation:
-![Angular Signals logo](assets/images/press-kit/angular_signals.png#medium "Angular Signals logo")
+이 예제에서는 쉴드를 조정하여 Angular Signals 로고 변형을 만들었습니다:
+![Angular Signals 로고](assets/images/press-kit/angular_signals.png#medium "Angular Signals 로고")
 </docs-step>
 
-<docs-step title="Do’s and don’ts of using Angular's brand">
-If you are creating your own logo, we encourage differentiating your logo from ours to not cause confusion. When adapting the logo, you are free to change and adapt the colors and shape to make it your own.
+<docs-step title="Angular 브랜드 사용의 주의사항">
+자신만의 로고를 만들 때, 혼란을 초래하지 않도록 우리의 로고와 차별화하길 권장합니다. 로고를 조정할 때, 색상과 형태를 변경하고 조정하여 자신만의 로고를 만드세요.
   
-When representing Angular with the original logo, please follow these guidelines:
-![Rhubarb the small cat](assets/images/press-kit/do_and_dont.png "Rhubarb the small cat")
+원래 로고로 Angular를 나타낼 때는 다음 가이드라인을 따르십시오:
+![작은 고양이 루바브](assets/images/press-kit/do_and_dont.png "작은 고양이 루바브")
 </docs-step>
 
 </docs-workflow>
 
-## Deprecated logos
+## 사용 중단된 로고
 
 ### 2016 Angular (v3-v16)
 
-In 2023 , we announced a modernized logo with v17. We advise against using the former Angular logo to prevent confusion. You can view the old press kit on our [old docs site](https://angular.io/presskit).
+2023년에 우리는 v17과 함께 현대화된 로고를 발표했습니다. 혼란을 방지하기 위해 이전 Angular 로고의 사용을 권장하지 않습니다. 이전 프레스 키트는 [구버전 문서 사이트](https://angular.io/presskit)에서 확인할 수 있습니다.
 
 ### AngularJS
 
-AngularJS is the v1.x predecessor of modern Angular. We advise against using this logo to prevent confusion.
-Read more about the discontinued LTS (Long Term Support) for AngularJS on our [blog](https://blog.angular.dev/discontinued-long-term-support-for-angularjs-cc066b82e65a).
+AngularJS는 현대 Angular의 v1.x 전신입니다. 혼란을 방지하기 위해 이 로고의 사용을 권장하지 않습니다.
+AngularJS에 대한 종료된 LTS(장기 지원)에 대한 자세한 내용은 [블로그](https://blog.angular.dev/discontinued-long-term-support-for-angularjs-cc066b82e65a)에서 확인하세요.
\ No newline at end of file
diff --git a/adev/src/content/reference/releases.md b/adev/src/content/reference/releases.md
index 562afa462c61..0d1b0adb055c 100644
--- a/adev/src/content/reference/releases.md
+++ b/adev/src/content/reference/releases.md
@@ -1,172 +1,169 @@
-# Angular versioning and releases
+# Angular 버전 관리 및 출시
 
-We recognize that you need stability from the Angular framework.
-Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly.
-Stability is essential for the ecosystem around Angular to thrive.
+우리는 Angular 프레임워크에서 안정성이 필요하다는 것을 인식하고 있습니다.
+안정성은 재사용 가능한 구성 요소 및 라이브러리, 자습서, 도구 및 학습된 관행이 예기치 않게 쓸모없게 되지 않도록 보장합니다.
+안정성은 Angular 주위의 생태계가 번창하는 데 필수적입니다.
 
-We also share with you the need for Angular to keep evolving.
-We strive to ensure that the foundation on top of which you are building is continuously improving and enabling you to stay up-to-date with the rest of the web ecosystem and your user needs.
+우리는 또한 Angular가 계속 진화해야 할 필요성을 공유합니다.
+우리는 여러분이 구축하고 있는 기반이 지속적으로 개선되고 있으며, 웹 생태계와 사용자 요구에 맞게 최신 상태를 유지할 수 있도록 보장하기 위해 노력합니다.
 
-This document contains the practices that we follow to provide you with a leading-edge application development platform, balanced with stability.
-We strive to ensure that future changes are always introduced in a predictable way.
-We want everyone who depends on Angular to know when and how new features are added, and to be well-prepared when obsolete ones are removed.
+이 문서에는 최첨단 응용 프로그램 개발 플랫폼을 안정성과 균형을 맞추어 제공하기 위해 우리가 따르는 관행이 포함되어 있습니다.
+우리는 미래의 변경 사항이 항상 예측 가능한 방식으로 도입되도록 보장하기 위해 노력합니다.
+Angular에 의존하는 모든 사람들이 새로운 기능이 언제 어떻게 추가되는지 알고 있으며, 쓸모없게 된 기능이 제거될 때 잘 준비되기를 바랍니다.
 
-Sometimes *breaking changes*, such as the removal of APIs or features, are necessary to innovate and stay current with evolving best practices, changing dependencies, or shifts in the web platform. These breaking changes go through a deprecation process explained in our [deprecation policy](#deprecation-policy).
+API 또는 기능의 제거와 같은 *브레이킹 변화*가 필요할 때가 있습니다. 이는 혁신하고 진화하는 모범 사례, 변화하는 종속성 또는 웹 플랫폼의 변화에 대응하기 위함입니다. 이러한 브레이킹 변화는 [사용 중단 정책](#deprecation-policy)에서 설명한 사용 중단 프로세스를 거칩니다.
 
-To make these transitions as straightforward as possible, the Angular team makes these commitments:
+이러한 전환을 가능한 한 간단하게 만들기 위해 Angular 팀은 다음과 같은 약속을 합니다:
 
-* We work hard to minimize the number of breaking changes and to provide migration tools when possible
-* We follow the deprecation policy described here, so you have time to update your applications to the latest APIs and best practices
+* 우리는 브레이킹 변화의 수를 최소화하고 가능할 때 마이그레이션 도구를 제공합니다.
+* 우리는 여기서 설명한 사용 중단 정책을 준수하므로, 최신 API 및 모범 사례로 애플리케이션을 업데이트할 시간을 확보할 수 있습니다.
 
-HELPFUL: The practices described in this document apply to Angular 2.0 and later.
-If you are currently using AngularJS, see [Upgrading from AngularJS](https://angular.io/guide/upgrade "Upgrading from Angular JS").
-*AngularJS* is the name for all v1.x versions of Angular.
+도움이 되는 정보: 이 문서에 설명된 관행은 Angular 2.0 이상에 적용됩니다.
+현재 AngularJS를 사용 중인 경우 [AngularJS에서 업그레이드](https://angular.io/guide/upgrade "Angular JS에서 업그레이드")를 참조하십시오.
+*AngularJS*는 Angular의 모든 v1.x 버전의 이름입니다.
 
-## Angular versioning
+## Angular 버전 관리
 
-Angular version numbers indicate the level of changes that are introduced by the release.
-This use of [semantic versioning](https://semver.org/ "Semantic Versioning Specification") helps you understand the potential impact of updating to a new version.
+Angular 버전 번호는 출시로 인해 도입된 변경 수준을 나타냅니다.
+[의미론적 버전 관리](https://semver.org/ "의미론적 버전 관리 규격")의 사용은 새로운 버전으로 업데이트할 때의 잠재적 영향을 이해하는 데 도움이 됩니다.
 
-Angular version numbers have three parts: `major.minor.patch`.
-For example, version 7.2.11 indicates major version 7, minor version 2, and patch level 11.
+Angular 버전 번호는 세 부분으로 구성됩니다: `major.minor.patch`.
+예를 들어, 버전 7.2.11은 주요 버전 7, 부 버전 2 및 패치 수준 11을 나타냅니다.
 
-The version number is incremented based on the level of change included in the release.
+버전 번호는 출시 내용의 변경 수준에 따라 증가합니다.
 
-| Level of change | Details |
-|:---             |:---     |
-| Major release   | Contains significant new features, some but minimal developer assistance is expected during the update. When updating to a new major release, you might need to run update scripts, refactor code, run additional tests, and learn new APIs.                                                                                                                                                                                      |
-| Minor release   | Contains new smaller features. Minor releases are fully backward-compatible; no developer assistance is expected during update, but you can optionally modify your applications and libraries to begin using new APIs, features, and capabilities that were added in the release. We update peer dependencies in minor versions by expanding the supported versions, but we do not require projects to update these dependencies. |
-| Patch release   | Low risk, bug fix release. No developer assistance is expected during update.                                                                                                                                                                                                                                                                                                                                                     |
-
-HELPFUL: As of Angular version 7, the major versions of Angular core and the CLI are aligned.
-This means that in order to use the CLI as you develop an Angular app, the version of `@angular/core` and the CLI need to be the same.
-
-### Preview releases
+| 변경 수준         | 세부사항 |
+|:---               |:---     |
+| 주요 릴리스       | 중요한 새로운 기능을 포함하고 있으며, 업데이트 중 최소한의 개발자 지원이 예상됩니다. 새로운 주요 릴리스로 업데이트할 때는 업데이트 스크립트를 실행하고, 코드를 리팩토링하고, 추가 테스트를 수행하며, 새로운 API를 배워야 할 수 있습니다. |
+| 부 릴리스         | 새로운 소규모 기능을 포함합니다. 부 릴리스는 완전히 이전 버전과 호환되며, 업데이트 중에 개발자 지원이 필요하지 않지만, 선택적으로 애플리케이션 및 라이브러리를 수정하여 출시된 새로운 API, 기능 및 능력을 사용하기 시작할 수 있습니다. 우리는 부 버전에서 지원되는 버전을 확장하여 동료 종속성을 업데이트하지만, 프로젝트가 이러한 종속성을 업데이트하도록 요구하지는 않습니다. |
+| 패치 릴리스       | 위험이 낮은 버그 수정 릴리스입니다. 업데이트 중에 개발자 지원이 필요하지 않습니다. |
 
-We let you preview what's coming by providing "Next" and Release Candidates \(`rc`\) pre-releases for each major and minor release:
+도움이 되는 정보: Angular 버전 7부터 Angular 핵심 및 CLI의 주요 버전이 일치합니다.
+즉, Angular 앱을 개발할 때 CLI를 사용하려면 `@angular/core`와 CLI의 버전이 동일해야 합니다.
 
-| Pre-release type  | Details |
-|:---               |:---     |
-| Next              | The release that is under active development and testing. The next release is indicated by a release tag appended with the `-next` identifier, such as  `8.1.0-next.0`.      |
-| Release candidate | A release that is feature complete and in final testing. A release candidate is indicated by a release tag appended with the `-rc` identifier, such as version `8.1.0-rc.0`. |
+### 미리보기 릴리스
 
-The latest `next` or `rc` pre-release version of the documentation is available at [next.angular.dev](https://next.angular.dev).
+우리는 주요 및 부 릴리스마다 "다음" 및 릴리스 후보(`rc`) 미리보기를 제공함으로써 여러분에게 다가오는 내용을 미리 볼 수 있게 합니다:
 
-## Release frequency
+| 미리보기 릴리스 유형 | 세부사항 |
+|:---                 |:---     |
+| 다음                | 현재 활성 개발 및 테스트 중인 릴리스입니다. 다음 릴리스는 `-next` 식별자가 붙은 릴리스 태그로 표시되며, 예를 들어 `8.1.0-next.0`과 같습니다.      |
+| 릴리스 후보        | 기능이 완전하고 최종 테스트 중인 릴리스입니다. 릴리스 후보는 `-rc` 식별자가 붙은 릴리스 태그로 표시되며, 예를 들어 버전 `8.1.0-rc.0`과 같습니다. |
 
-We work toward a regular schedule of releases, so that you can plan and coordinate your updates with the continuing evolution of Angular.
+문서의 최신 `next` 또는 `rc` 미리보기 버전은 [next.angular.dev](https://next.angular.dev)에서 확인할 수 있습니다.
 
-HELPFUL: Dates are offered as general guidance and are subject to change.
+## 릴리스 주기
 
-In general, expect the following release cycle:
+우리는 정기적인 릴리스 일정을 지향하여 여러분이 Angular의 지속적인 발전에 맞춰 업데이트를 계획하고 조율할 수 있도록 합니다.
 
-* A major release every 6 months
-* 1-3 minor releases for each major release
-* A patch release and pre-release \(`next` or `rc`\) build almost every week
+도움이 되는 정보: 날짜는 일반적인 가이드라인으로 제공되며 변경될 수 있습니다.
 
-This cadence of releases gives eager developers access to new features as soon as they are fully developed and pass through our code review and integration testing processes, while maintaining the stability and reliability of the platform for production users that prefer to receive features after they have been validated by Google and other developers that use the pre-release builds.
+일반적으로 다음 릴리스 주기를 예상하십시오:
 
-## Support policy and schedule
+* 매 6개월마다 주요 릴리스
+* 각 주요 릴리스에 대해 1-3개의 부 릴리스
+* 거의 매주 패치 릴리스 및 미리보기(`next` 또는 `rc`) 빌드
 
-HELPFUL: Approximate dates are offered as general guidance and are subject to change.
+이러한 릴리스 주기는 열정적인 개발자들이 새로운 기능을 완전히 개발하고 코드 검토 및 통합 테스트 프로세스를 통과한 즉시 사용할 수 있도록 하면서도, 기능이 Google 및 기타 개발자에 의해 검증된 후 제공되기를 선호하는 프로덕션 사용자에게 플랫폼의 안정성과 신뢰성을 유지합니다.
 
-### Release schedule
+## 지원 정책 및 일정
 
-| Version | Date               |
-|:--------|:-------------------|
-| v19.1   | Week of 2025-01-13 |
-| v19.2   | Week of 2025-02-24 |
-| v20.0   | Week of 2025-05-26 |
+도움이 되는 정보: 근사 날짜는 일반적인 가이드라인으로 제공되며 변경될 수 있습니다.
 
-### Support window
+### 릴리스 일정
 
-All major releases are typically supported for 18 months.
+| 버전   | 날짜                 |
+|:------|:---------------------|
+| v19.1 | 2025-01-13 주       |
+| v19.2 | 2025-02-24 주       |
+| v20.0 | 2025-05-26 주       |
 
-| Support stage     | Support Timing | Details |
-|:---               |:---            |:---     |
-| Active            | 6 months       | Regularly-scheduled updates and patches are released                |
-| Long-term \(LTS\) | 12 months      | Only [critical fixes and security patches](#lts-fixes) are released |
+### 지원 기간
 
-### Actively supported versions
+모든 주요 릴리스는 일반적으로 18개월 동안 지원됩니다.
 
-The following table provides the status for Angular versions under support.
+| 지원 단계       | 지원 기간  | 세부사항 |
+|:---             |:---        |:---     |
+| 활성            | 6개월      | 정기적으로 예약된 업데이트 및 패치가 릴리스됩니다. |
+| 장기 지원(LTS)  | 12개월     | [중요 수정 및 보안 패치](#lts-fixes)만 릴리스됩니다. |
 
-| Version | Status | Released   | Active ends | LTS ends   |
-|:--------|:-------|:-----------|:------------|:-----------|
-| ^19.0.0 | Active | 2024-11-19 | 2025-05-19  | 2026-05-19 |
-| ^18.0.0 | LTS    | 2024-05-22 | 2024-11-19  | 2025-11-19 |
-| ^17.0.0 | LTS    | 2023-11-08 | 2024-05-08  | 2025-05-15 |
+### 적극적으로 지원되는 버전
 
-Angular versions v2 to v16 are no longer supported.
+다음 표는 지원 중인 Angular 버전의 상태를 제공합니다.
 
-### LTS fixes
+| 버전      | 상태    | 릴리스 날짜  | 활성 종료  | LTS 종료   |
+|:---------|:--------|:-----------|:-----------|:-----------|
+| ^19.0.0  | 활성    | 2024-11-19 | 2025-05-19 | 2026-05-19 |
+| ^18.0.0  | LTS     | 2024-05-22 | 2024-11-19 | 2025-11-19 |
+| ^17.0.0  | LTS     | 2023-11-08 | 2024-05-08 | 2025-05-15 |
 
-As a general rule, a fix is considered for an LTS version if it resolves one of:
+Angular 버전 v2에서 v16까지는 더 이상 지원되지 않습니다.
 
-* A newly identified security vulnerability,
-* A regression, since the start of LTS, caused by a 3rd party change, such as a new browser version.
+### LTS 수정
 
-## Deprecation policy
+일반 규칙으로, 수정은 다음 중 하나를 해결하는 경우 LTS 버전에 고려됩니다:
 
-When the Angular team intends to remove an API or feature, it will be marked as *deprecated*. This occurs when an API is obsolete, superseded by another API, or otherwise discontinued. Deprecated API remain available through their deprecated phase, which lasts a minimum two major versions (approximately one year).
+* 새롭게 식별된 보안 취약점,
+* LTS 시작 이후 제3자 변경(예: 새 브라우저 버전)으로 인한 회귀.
 
-To help ensure that you have sufficient time and a clear path to update, this is our deprecation policy:
+## 사용 중단 정책
 
-| Deprecation stages | Details |
-|:---                |:---     |
-| Announcement       | We announce deprecated APIs and features in the [change log](https://github.com/angular/angular/blob/main/CHANGELOG.md "Angular change log"). Deprecated APIs appear in the [documentation](api?status=deprecated) with ~~strikethrough~~. When we announce a deprecation, we also announce a recommended update path. Additionally, all deprecated APIs are annotated with `@deprecated` in the corresponding documentation, which enables text editors and IDEs to provide hints if your project depends on them.                            |
-| Deprecation period | When an API or a feature is deprecated, it is still present in at least the next two major releases (period of at least 12 months). After that, deprecated APIs and features are candidates for removal. A deprecation can be announced in any release, but the removal of a deprecated API or feature happens only in major release. Until a deprecated API or feature is removed, it is maintained according to the LTS support policy, meaning that only critical and security issues are fixed. |
-| npm dependencies   | We only make npm dependency updates that require changes to your applications in a major release. In minor releases, we update peer dependencies by expanding the supported versions, but we do not require projects to update these dependencies until a future major version. This means that during minor Angular releases, npm dependency updates within Angular applications and libraries are optional.                                               |
+Angular 팀이 API 또는 기능을 제거하려고 할 때, 그것은 *사용 중단*으로 표시됩니다. 이는 API가 쓸모없어지거나 다른 API로 대체되거나 다른 이유로 중단될 때 발생합니다. 사용 중단된 API는 최소 두 개의 주요 버전(약 1년) 동안 사용 중단 단계에서 사용할 수 있습니다.
 
-## Compatibility policy
+여러분이 충분한 시간과 명확한 경로로 업데이트할 수 있도록 돕기 위해, 우리의 사용 중단 정책은 다음과 같습니다:
 
-Angular is a collection of many packages, subprojects, and tools.
-To prevent accidental use of private APIs and so that you can clearly understand what is covered by the practices described here — we document what is and is not considered our public API surface.
-For details, see [Supported Public API Surface of Angular](https://github.com/angular/angular/blob/main/contributing-docs/public-api-surface.md "Supported Public API Surface of Angular").
+| 사용 중단 단계 | 세부사항 |
+|:---            |:---     |
+| 발표           | 우리는 [변경 로그](https://github.com/angular/angular/blob/main/CHANGELOG.md "Angular 변경 로그")에서 사용 중단된 API 및 기능을 발표합니다. 사용 중단된 API는 [문서](api?status=deprecated)에서 ~~취소선~~으로 표시됩니다. 사용 중단을 발표할 때, 권장 업데이트 경로도 함께 발표합니다. 또한 모든 사용 중단된 API는 해당 문서에서 `@deprecated`로 주석이 달려 있어, 여러분의 프로젝트에서 이를 의존하는지 여부에 따라 텍스트 편집기와 IDE가 힌트를 제공할 수 있습니다. |
+| 사용 중단 기간 | API 또는 기능이 사용 중단될 때, 다음 두 개의 주요 릴리스(최소 12개월) 동안 여전히 존재합니다. 그 후, 사용 중단된 API 및 기능은 제거 후보가 됩니다. 사용 중단은 모든 릴리스에서 발표될 수 있지만, 사용 중단된 API 또는 기능의 제거는 주요 릴리스에서만 발생합니다. 사용 중단된 API 또는 기능이 제거될 때까지, LTS 지원 정책에 따라 유지 관리되며, 이는 오직 중요한 문제와 보안 문제만 수정된다는 것을 의미합니다. |
+| npm 종속성  | 우리는 주요 릴리스에서 애플리케이션 변경이 필요한 npm 종속성 업데이트만 수행합니다. 부 릴리스에서 지원되는 버전을 확대하여 동료 종속성을 업데이트하지만, 향후 주요 버전까지 이러한 종속성 업데이트를 요구하지 않습니다. 이는 부 Angular 릴리스 중에 Angular 애플리케이션 및 라이브러리 내에서 npm 종속성 업데이트가 선택적임을 의미합니다. |
 
-To guarantee backward compatibility of Angular we run a series of checks before we merge any change:
+## 호환성 정책
 
-* Unit tests and integration tests
-* Comparing the type definitions of the public API surface before and after the change
-* Running the tests of all the applications at Google that depend on Angular
+Angular는 많은 패키지, 하위 프로젝트 및 도구의 모음입니다.
+우리는 개인 API의 우발적인 사용을 방지하고 여러분이 이곳에 설명된 관행에 의해 무엇이 포함되는지 명확하게 이해하도록 돕기 위해 — 무엇이 우리의 공공 API 표면에 포함되고 포함되지 않는지를 문서화합니다.
+자세한 내용은 [Angular의 지원되는 공공 API 표면](https://github.com/angular/angular/blob/main/contributing-docs/public-api-surface.md "Angular의 지원되는 공공 API 표면")을 참조하십시오.
 
-Any changes to the public API surface are made in accordance with the versioning, support, and depreciation policies previously described. In exceptional cases, such as critical security patches, fixes may introduce backwards incompatible changes. Such exceptional cases are accompanied by explicit notice on the framework's official communication channels.
+Angular의 이전 호환성을 보장하기 위해 우리는 어떤 변경사항도 병합하기 전에 일련의 검사를 수행합니다:
 
-## Breaking change policy and update paths
+* 단위 테스트 및 통합 테스트
+* 변경 전후의 공공 API 표면의 유형 정의 비교
+* Angular에 의존하는 Google의 모든 애플리케이션 테스트 실행
 
-Breaking change requires you to do work because the state after it is not backward compatible with the state before it. You can find the rare exceptions from this rule in the [Compatibility policy](#compatibility-policy). Examples of breaking changes are the removal of public APIs or other changes of the type definition of Angular, changing the timing of calls, or updating to a new version of a dependency of Angular, which includes breaking changes itself.
+공공 API 표면에 대한 모든 변경 사항은 이전에 설명된 버전 관리, 지원 및 사용 중단 정책에 따라 이루어집니다. 예외적인 경우(예: 중요한 보안 패치)에는 수정이 이전과 호환되지 않는 변경을 도입할 수 있습니다. 이러한 예외적인 경우에는 프레임워크의 공식 커뮤니케이션 채널에서 명확한 통지가 수반됩니다.
 
-To support you in case of breaking changes in Angular:
+## 브레이킹 변경 정책 및 업데이트 경로
 
-* We follow our [deprecation policy](#deprecation-policy) before we remove a public API
-* Support update automation via the `ng update` command. It provides code transformations which we often have tested ahead of time over hundreds of thousands of projects at Google
-* Step by step instructions how to update from one major version to another at the ["Angular Update Guide"](update-guide)
+브레이킹 변경은 작업이 필요합니다. 이는 상태가 이전 상태와 호환되지 않기 때문입니다. 이 규칙의 드문 예외는 [호환성 정책](#compatibility-policy)에서 찾을 수 있습니다. 브레이킹 변경의 예로는 공공 API의 제거 또는 Angular의 타입 정의 변경, 호출 타이밍 변경 또는 브레이킹 변경이 포함된 Angular의 종속성 버전 업데이트 등이 있습니다.
 
-You can `ng update` to any version of Angular, provided that the following criteria are met:
+Angular에서 브레이킹 변경 발생 시 여러분을 지원하기 위해:
 
-* The version you want to update *to* is supported.
-* The version you want to update *from* is within one major version of the version you want to
-    upgrade to.
+* 우리는 공공 API 제거 전에 [사용 중단 정책](#deprecation-policy)을 따릅니다.
+* `ng update` 명령어를 통한 업데이트 자동화를 지원합니다. 이 명령어는 Google에서 수십만 개의 프로젝트를 사전 테스트한 코드 변환을 제공합니다.
+* 한 주요 버전에서 다른 주요 버전으로 업데이트하는 단계별 지침을 ["Angular 업데이트 가이드"](update-guide)에서 제공합니다.
 
-For example, you can update from version 11 to version 12, provided that version 12 is still supported.
-If you want to update across multiple major versions, perform each update one major version at a time.
-For example, to update from version 10 to version 12:
+여러분은 다음 기준이 충족되면 Angular의 모든 버전으로 `ng update`를 수행할 수 있습니다:
 
-1. Update from version 10 to version 11.
-1. Update from version 11 to version 12.
+* 업데이트할 버전이 지원됩니다.
+* 업데이트할 버전이 업그레이드하려는 버전의 한 주요 버전 내에 있어야 합니다.
 
-## Developer Preview
+예를 들어, 버전 12가 여전히 지원되는 경우 버전 11에서 버전 12로 업데이트할 수 있습니다.
+여러 주요 버전 간에 업데이트하려면, 각 업데이트를 한 주요 버전씩 수행하십시오.
+예를 들어, 버전 10에서 버전 12로 업데이트하려면:
 
-Occasionally we introduce new APIs under the label of "Developer Preview". These are APIs that are fully functional and polished, but that we are not ready to stabilize under our normal deprecation policy.
+1. 버전 10에서 버전 11로 업데이트합니다.
+2. 버전 11에서 버전 12로 업데이트합니다.
 
-This may be because we want to gather feedback from real applications before stabilization, or because the associated documentation or migration tooling is not fully complete. Feedback can be provided via a [GitHub issue](https://github.com/angular/angular/issues), where developers can share their experiences, report bugs, or suggest improvements to help refine the feature.
+## 개발자 미리보기
 
-The policies and practices that are described in this document do not apply to APIs marked as Developer Preview. Such APIs can change at any time, even in new patch versions of the framework. Teams should decide for themselves whether the benefits of using Developer Preview APIs are worth the risk of breaking changes outside of our normal use of semantic versioning.
+때때로 우리는 "개발자 미리보기"라는 레이블로 새로운 API를 소개합니다. 이러한 API는 완전히 작동하고 다듬어져 있지만, 우리의 일반적인 사용 중단 정책에 따라 안정화할 준비가 되어 있지 않습니다.
 
+이는 안정화 전에 실제 애플리케이션으로부터 피드백을 수집하고자 하거나, 관련 문서나 마이그레이션 도구가 완전히 준비되지 않았기 때문일 수 있습니다. 피드백은 [GitHub 문제](https://github.com/angular/angular/issues)를 통해 제공될 수 있으며, 개발자들은 그들의 경험을 공유하고 버그를 보고하거나 기능을 개선할 수 있는 제안을 할 수 있습니다.
 
+이 문서에 설명된 정책 및 관행은 개발자 미리보기로 표시된 API에 적용되지 않습니다. 이러한 API는 언제든지 변경될 수 있으며, 심지어 프레임워크의 새로운 패치 버전에서도 변경 가능합니다. 팀은 개발자 미리보기 API를 사용하는 이점과 일반적인 의미론적 버전 관리 사용 외에 브레이킹 변경의 위험이 가치가 있는지를 스스로 판단해야 합니다.
 
-## Experimental
+## 실험적
 
-These APIs might not become stable at all or have significant changes before becoming stable.
+이러한 API는 아예 안정화되지 않거나 안정화되기 전에 상당한 변경이 발생할 수 있습니다.
 
-The policies and practices that are described in this document do not apply to APIs marked as experimental. Such APIs can change at any time, even in new patch versions of the framework. Teams should decide for themselves whether the benefits of using experimental APIs are worth the risk of breaking changes outside of our normal use of semantic versioning.
+이 문서에 설명된 정책 및 관행은 실험적으로 표시된 API에 적용되지 않습니다. 이러한 API는 언제든지 변경될 수 있으며, 심지어 프레임워크의 새로운 패치 버전에서도 변경될 수 있습니다. 팀은 실험적 API를 사용하는 이점과 일반적인 의미론적 버전 관리 사용 외에 브레이킹 변경의 위험이 가치가 있는지를 스스로 판단해야 합니다.
\ No newline at end of file
diff --git a/adev/src/content/reference/roadmap.md b/adev/src/content/reference/roadmap.md
index 70bc6cd8aeec..c0a30ea860d7 100644
--- a/adev/src/content/reference/roadmap.md
+++ b/adev/src/content/reference/roadmap.md
@@ -1,302 +1,302 @@
-<docs-decorative-header title="Angular Roadmap" imgSrc="adev/src/assets/images/roadmap.svg"> <!-- markdownlint-disable-line -->
-Learn how the Angular team is building momentum on the web.
+<docs-decorative-header title="Angular 로드맵" imgSrc="adev/src/assets/images/roadmap.svg"> <!-- markdownlint-disable-line -->
+Angular 팀이 웹에서 어떻게 동력을 구축하고 있는지 알아보세요.
 </docs-decorative-header>
 
-As an open source project, Angular’s daily commits, PRs and momentum is all trackable on GitHub. To increase transparency into how this daily work connects to the framework’s future, our roadmap brings together the team’s current and future planned vision.
+오픈 소스 프로젝트로서, Angular의 일일 커밋, PR 및 동향은 모두 GitHub에서 추적 가능합니다. 매일의 작업이 프레임워크의 미래와 어떻게 연결되는지를 보다 투명하게 하기 위해, 우리의 로드맵은 팀의 현재 및 미래 계획된 비전을 집약합니다.
 
-The following projects are not associated with a particular Angular version. We will release them on completion, and they will be part of a specific version based on our release schedule, following semantic versioning. For example, we release features in the next minor after completion or the next major if they include breaking changes.
+다음 프로젝트는 특정 Angular 버전과 관련이 없습니다. 우리는 이들을 완료 후에 릴리스할 것이며, 이는 우리의 릴리스 일정에 따라 특정 버전의 일부가 될 것입니다. 예를 들어, 완료 후 다음 마이너에서 기능을 릴리스하거나, 파괴적 변경사항이 포함된 경우 다음 주요 버전에서 릴리스합니다.
 
-Currently, Angular has two goals for the framework:
+현재 Angular는 프레임워크에 대해 두 가지 목표를 가지고 있습니다:
 
-1. Improve the [Angular developer experience](#improving-the-angular-developer-experience) and
-2. Improve the [framework’s performance](#fast-by-default).
+1. [Angular 개발자 경험 개선하기](#improving-the-angular-developer-experience) 및
+2. [프레임워크 성능 개선하기](#fast-by-default).
 
-Continue reading to learn how we plan to deliver these objectives with specific project work.
+특정 프로젝트 작업을 통해 이러한 목표를 달성하기 위한 계획에 대해 계속 읽어보세요.
 
-## Explore modern Angular
+## 현대 Angular 탐색하기
 
-Start developing with the latest Angular features from our roadmap. This list represents the current status of new features from our roadmap:
+로드맵의 최신 Angular 기능으로 개발을 시작하세요. 이 목록은 우리의 로드맵에서 새 기능의 현재 상태를 나타냅니다:
 
-### Available to experiment with
+### 실험해보기 가능
 
-* [Incremental hydration](/guide/incremental-hydration)
-* [Zoneless change detection](/guide/experimental/zoneless)
-* [Hydration support for i18n blocks](/api/platform-browser/withI18nSupport)
-* [Resource API](/guide/signals/resource)
-* [Effect API](/api/core/effect)
-* [Linked Signal API](/guide/signals/linked-signal)
+* [증분 수화](/guide/incremental-hydration)
+* [존 없는 변화 감지](/guide/experimental/zoneless)
+* [i18n 블록에 대한 수화 지원](/api/platform-browser/withI18nSupport)
+* [리소스 API](/guide/signals/resource)
+* [이펙트 API](/api/core/effect)
+* [연결된 신호 API](/guide/signals/linked-signal)
 
-### Production ready
+### 프로덕션 준비 완료
 
-* [Explore Angular Signals](/guide/signals)
-* [Event replay with SSR](/api/platform-browser/withEventReplay)
-* [Deferrable views](/guide/defer)
-* [Built-in control flow](/guide/templates/control-flow)
-* [Local variable declaration](/guide/templates/variables)
-* [Signal inputs](/guide/signals/inputs)
-* [Model inputs](/guide/signals/model)
-* [Signal queries](/guide/signals/queries)
-* [Function-based outputs](/guide/components/outputs)
-* [Route-level render mode](/guide/ssr)
+* [Angular 신호 탐색하기](/guide/signals)
+* [SSR을 통한 이벤트 재생](/api/platform-browser/withEventReplay)
+* [지연 가능한 뷰](/guide/defer)
+* [내장 제어 흐름](/guide/templates/control-flow)
+* [로컬 변수 선언](/guide/templates/variables)
+* [신호 입력](/guide/signals/inputs)
+* [모델 입력](/guide/signals/model)
+* [신호 쿼리](/guide/signals/queries)
+* [함수 기반 출력](/guide/components/outputs)
+* [라우트 수준 렌더 모드](/guide/ssr)
 
-## Improving the Angular developer experience
+## Angular 개발자 경험 개선하기
 
-### Developer velocity
+### 개발자 속도
 
 <docs-card-container>
-  <docs-card title="Deliver Angular Signals" href="https://github.com/angular/angular/discussions/49685">
-  This project rethinks the Angular reactivity model by introducing Signals as a reactivity primitive. The initial planning resulted in hundreds of discussions, conversations with developers, feedback sessions, user experience studies, and a series of RFCs, which received over 1,000 comments.
+  <docs-card title="Angular 신호 제공하기" href="https://github.com/angular/angular/discussions/49685">
+  이 프로젝트는 신호를 반응성 기본 요소로 도입하여 Angular 반응성 모델을 재고합니다. 초기 계획은 수백 개의 토론, 개발자와의 대화, 피드백 세션, 사용자 경험 연구 및 일련의 RFC를 초래하였으며, 이는 1,000개 이상의 댓글을 받았습니다.
 
-  As part of the v17 release, we graduated the Angular Signals library from developer preview. In v19 we moved signal-based queries, inputs, and model inputs to stable. Next, we'll need to finalize effects before we complete this project.
+  v17 릴리스의 일환으로 Angular 신호 라이브러리를 개발자 미리보기에서 졸업했습니다. v19에서는 신호 기반 쿼리, 입력 및 모델 입력을 안정적 상태로 이동했습니다. 다음으로, 이 프로젝트를 완료하기 전에 효과를 최종화해야 합니다.
   </docs-card>
-  <docs-card title="Zoneless Angular" href="">
-  In v18 we shipped experimental zoneless support in Angular. It enables developers to use the framework without including zone.js in their bundle, which improves performance, debugging experience, and interoperability. As part of the initial release we also introduced zoneless support to the Angular CDK and Angular Material.
+  <docs-card title="존 없는 Angular" href="">
+  v18에서는 Angular에 실험적 존 없는 지원을 추가했습니다. 이는 개발자가 번들에 zone.js를 포함하지 않고도 프레임워크를 사용할 수 있게 하여 성능, 디버깅 경험 및 상호 운영성을 개선합니다. 초기 릴리스의 일환으로 Angular CDK 및 Angular Material에도 존 없는 지원을 도입했습니다.
 
-  In v19 we introduced zoneless support in server-side rendering, addressed some edge cases, and created a schematic to scaffold zoneless projects. We transitioned <a href="https://fonts.google.com/">Google Fonts</a> to zoneless which improved performance, developer experience, and allowed us to identify gaps that we need to address before moving this feature to developer preview. Stay tuned for more updates in the next months.
+  v19에서는 서버 사이드 렌더링에 존 없는 지원을 도입하고, 일부 엣지 케이스를 다루었으며, 존 없는 프로젝트를 스캐폴드할 수 있는 스키매틱을 만들었습니다. 우리는 <a href="https://fonts.google.com/">Google Fonts</a>를 존 없는 것으로 전환하여 성능, 개발자 경험을 개선하고 이 기능을 개발자 미리보기로 전환하기 전에 해결해야 할 격차를 식별할 수 있었습니다. 다음 몇 달 동안 더 많은 업데이트를 기대해 주세요.
   </docs-card>
-  <docs-card title="Signal integrations" href="">
-  We're working towards improving the integration of fundamental Angular packages, such as forms, HTTP, and router, with Signals. As part of this project, we'll seek opportunities to introduce convenient signal-based APIs or wrappers to improve the holistic developer experience.
+  <docs-card title="신호 통합" href="">
+  우리는 신호와 함께 폼, HTTP 및 라우터와 같은 기본 Angular 패키지의 통합 개선 작업을 하고 있습니다. 이 프로젝트의 일환으로, 전반적인 개발자 경험을 향상시키는 편리한 신호 기반 API 또는 래퍼를 도입할 기회를 모색할 것입니다.
   </docs-card>
-  <docs-card title="Signal debugging in Angular DevTools" href="">
-  With the evolution of Signals in Angular, we are working on a better tooling for debugging them. High on the priority list is a UI for inspecting and debugging signals.
+  <docs-card title="Angular DevTools에서 신호 디버깅" href="">
+  Angular의 신호 진화와 함께, 우리는 이들을 디버깅하기 위한 더 나은 도구를 개발하고 있습니다. 우선적으로 신호를 검사하고 디버깅할 UI가 필요합니다.
   </docs-card>
-  <docs-card title="Improve HMR (Hot Module Reload)" href="https://github.com/angular/angular/issues/39367#issuecomment-1439537306">
-  We're working towards faster edit/refresh cycle by enabling hot module replacement.
+  <docs-card title="HMR(핫 모듈 리로드) 개선" href="https://github.com/angular/angular/issues/39367#issuecomment-1439537306">
+  우리는 핫 모듈 교체를 통해 더 빠른 편집/새로 고침 주기를 만들기 위해 노력하고 있습니다.
 
-  In Angular v19 we shipped initial support for CSS and template HMR. We'll continue collecting feedback to make sure we're addressing developers' needs before we mark this project as complete.
+  Angular v19에서는 CSS 및 템플릿 HMR에 대한 초기 지원을 출시했습니다. 이 프로젝트를 완료하기 전에 개발자의 요구를 충족하는지 피드백을 계속 수집할 것입니다.
   </docs-card>
 </docs-card-container>
 
-### Improve Angular Material and the CDK
+### Angular Material 및 CDK 개선하기
 
 <docs-card-container>
-  <docs-card title="New CDK primitives" href="">
-  We are working on new CDK primitives to facilitate creating custom components based on the WAI-ARIA design patterns for [Combobox](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox). Angular v14 introduced stable [menu and dialog primitives](https://material.angular.io/cdk/categories) as part of this project, and in v15 Listbox.
+  <docs-card title="새 CDK 기본 요소" href="">
+  우리는 [Combobox](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox)와 같은 WAI-ARIA 디자인 패턴에 기반하여 사용자 정의 컴포넌트를 만드는 데 도움이 되는 새로운 CDK 기본 요소를 작업하고 있습니다. Angular v14에서는 이 프로젝트의 일환으로 안정적인 [메뉴 및 대화 상자 기본 요소](https://material.angular.io/cdk/categories)를 도입했으며, v15에서는 리스트박스를 도입했습니다.
   </docs-card>
-  <docs-card title="Angular component accessibility" href="">
-  We are evaluating components in Angular Material against accessibility standards such as WCAG and working to fix any issues that arise from this process.
+  <docs-card title="Angular 컴포넌트 접근성" href="">
+  우리는 접근성 기준인 WCAG에 대해 Angular Material에서 컴포넌트를 평가하고 이 과정에서 발생하는 문제를 해결하기 위해 작업하고 있습니다.
   </docs-card>
 </docs-card-container>
 
-### Improve tooling
+### 도구 개선하기
 
 <docs-card-container>
-  <docs-card title="Modernize unit testing tooling with ng test" href="">
-  In v12, we revisited the Angular end-to-end testing experience by replacing Protractor with modern alternatives such as Cypress, Nightwatch, Puppeteer, Playwright, and Webdriver.io. Next, we'd like to tackle `ng test` to modernize Angular's unit testing experience.
+  <docs-card title="ng test로 단위 테스트 도구 현대화하기" href="">
+  v12에서는 Protractor를 Cypress, Nightwatch, Puppeteer, Playwright 및 Webdriver.io와 같은 현대적인 대안으로 대체하여 Angular 엔드 투 엔드 테스트 경험을 재검토했습니다. 우리는 다음으로 `ng test`를 다루어 Angular의 단위 테스트 경험을 현대화하고자 합니다.
 
-  We're currently evaluating Web Test Runner, Vitest, and Jest as candidates for a new test runner for Angular projects while preserving Jasmine as assertion library to not break existing tests.
+  현재 Web Test Runner, Vitest 및 Jest를 Angular 프로젝트에 대한 새로운 테스트 실행기의 후보로 평가하고 있으며, 기존 테스트가 깨지지 않도록 Jasmine을 단언 라이브러리로 유지할 계획입니다.
   </docs-card>
-  <docs-card title="Evaluating Nitro support in the Angular CLI" href="https://nitro.unjs.io/">
-  We're excited about the set of features that Nitro offers such as more deployment options, improved compatibility of server-side rendering with different runtimes and file-based routing. In 2025 we'll evaluate how it fits in the Angular server-side rendering model.
+  <docs-card title="Angular CLI에서 Nitro 지원 평가하기" href="https://nitro.unjs.io/">
+  우리는 더 많은 배포 옵션, 다양한 런타임과 파일 기반 라우팅과의 향상된 서버 사이드 렌더링 호환성 등 Nitro에서 제공하는 기능 세트에 대해 흥미롭게 생각하고 있습니다. 2025년에 우리는 Angular 서버 사이드 렌더링 모델에서 Nitro가 어떻게 잘 맞는지를 평가할 것입니다.
 
-  We'll share updates as we make progress in this investigation.
+  조사 진행 사항에 따라 업데이트를 공유할 예정입니다.
   </docs-card>
 </docs-card-container>
 
-## Fast by default
+## 기본적으로 빠르다
 
 <docs-card-container>
-  <docs-card title="Enable incremental hydration" href="">
-  In v17 we graduated hydration from developer preview and we've been consistently observing 40-50% improvements in LCP. Since then we started prototyping incremental hydration and shared a demo on stage at ng-conf.
+  <docs-card title="증분 수화 활성화하기" href="">
+  v17에서는 수화를 개발자 미리보기에서 졸업하였으며 LCP에서 40-50% 향상이 지속적으로 관찰되고 있습니다. 그 이후로 우리는 증분 수화를 프로토타입으로 제작하였고 ng-conf에서 데모를 공유했습니다.
 
-  In v19 we shipped the incremental hydration in developer preview mode, powered by `@defer` blocks. Give it a try and <a href="https://github.com/angular/angular/issues">share your feedback</a> with us!
+  v19에서는 `@defer` 블록을 기반으로 개발자 미리보기 모드에서 증분 수화를 출시했습니다. 사용해보고 <a href="https://github.com/angular/angular/issues">피드백을 공유해 주세요</a>!
   </docs-card>
-  <docs-card title="Server route configuration" href="">
-  We're working towards enabling a more ergonomic route configuration on the server. We want to make it trivial to declare which routes should be server-side rendered, prerendered or client-side rendered.
+  <docs-card title="서버 라우트 구성" href="">
+  우리는 서버에서 더 인체공학적인 라우트 구성을 가능하게 하기 위해 작업하고 있습니다. 어떤 라우트를 서버 사이드 렌더링, 미리 렌더링 또는 클라이언트 사이드 렌더링해야 하는지를 선언하는 것이 손쉬워지기를 원합니다.
 
-  In Angular v19 we shipped developer preview of route-level render mode which allows you to granularly configure which routes you want Angular to prerender, server-side render or client-side render.
+  Angular v19에서는 Angular가 미리 렌더링, 서버 사이드 렌더링 또는 클라이언트 사이드 렌더링할 라우트를 세분화하여 구성할 수 있는 라우트 수준 렌더 모드의 개발자 미리보기를 출시했습니다.
   </docs-card>
 </docs-card-container>
 
-## Future work, explorations, and prototyping
+## 미래 작업, 탐색 및 프로토타이핑
 
-This section represents explorations and prototyping of potential future projects. A reasonable outcome is to decide that our current solutions are the best options. Other projects may result in RFCs, graduating to in-progress projects, or being deprioritized as the web continues to innovate along with our framework.
+이 섹션은 잠재적인 미래 프로젝트의 탐색 및 프로토타이핑을 나타냅니다. 합리적인 결과는 현재 솔루션이 최선의 옵션이라는 결론에 도달하는 것입니다. 다른 프로젝트는 RFC로 이어지거나 진행 중인 프로젝트로 졸업하거나, 우리의 프레임워크와 함께 웹이 계속 혁신함에 따라 우선순위가 낮아질 수 있습니다.
 
 <docs-card-container>
-  <docs-card title="Signal Forms" href="">
-  We plan to analyze existing feedback about Angular forms and design a solution which addresses developers' requirements and uses Signals for management of reactive state.
+  <docs-card title="신호 양식" href="">
+  우리는 Angular 양식에 대한 기존 피드백을 분석하고 개발자의 요구를 충족하며 반응 상태 관리에 신호를 사용하는 솔루션을 설계할 계획입니다.
   </docs-card>
-  <docs-card title="Selectorless" href="">
-  To reduce boilerplate and improve the ergonomics of standalone components we are now designing a solution that will make selectors optional. To use a component or directive you'll be able to import it and directly use it in a component's template.
+  <docs-card title="선택자 없는" href="">
+  보일러플레이트를 줄이고 독립형 컴포넌트의 인체공학성을 개선하기 위해 선택자를 선택 사항으로 만들 수 있는 솔루션을 설계하고 있습니다. 컴포넌트나 지시어를 사용하려면 이를 가져오고 컴포넌트의 템플릿에서 직접 사용할 수 있습니다.
 
-  We're still in early stages of planning selectorless. We'll share a request for comments when we have an early design and we're ready for next steps.
+  우리는 아직 선택자 없는 계획의 초기 단계에 있습니다. 초기 디자인을 가지고 준비가 되었을 때 요청 사항을 공유할 것입니다.
   </docs-card>
-  <docs-card title="Exploration of streamed server-side rendering" href="">
-  Over the past few releases we've been working on making Angular's server-side rendering story more robust. On our priority list is to explore streamed server-side rendering for zoneless application.
+  <docs-card title="스트리밍 서버 사이드 렌더링 탐색" href="">
+  최근 몇 개 릴리스 동안, Angular의 서버 사이드 렌더링 스토리를 더욱 견고하게 만들기 위해 작업해왔습니다. 우리의 우선 순위 목록에는 존이 없는 애플리케이션을 위한 스트리밍 서버 사이드 렌더링 탐색이 포함되어 있습니다.
   </docs-card>
-  <docs-card title="Investigation for authoring format improvements" href="">
-  Based on our developer surveys' results we saw there are opportunities for improving the ergonomics of the component authoring format. The first step of the process will be to gather requirements and understand the problem space in advanced to an RFC. We'll share updates as we make progress. High priority in the future work will be backward compatibility and interoperability.
+  <docs-card title="작성 형식 개선 조사" href="">
+  우리의 개발자 설문 조사 결과를 바탕으로, 컴포넌트 작성 형식의 인체공학성을 개선할 기회가 있다고 보았습니다. 이 과정의 첫 번째 단계는 요구 사항을 수집하고 문제 영역을 이해하여 RFC로 발전하는 것입니다. 우리는 진행 상황에 따라 업데이트를 공유할 것입니다. 미래 작업의 높은 우선 순위는 하위 호환성 및 상호 운용성입니다.
   </docs-card>
-  <docs-card title="Improve TestBed" href="">
-  Based on feedback over the years and the recent updates in Angular's runtime, we'll evaluate TestBed to identify opportunities to improve developer experience and reduce boilerplate when developing unit tests.
+  <docs-card title="TestBed 개선" href="">
+  수년간의 피드백 및 최근 Angular 런타임의 업데이트를 바탕으로, 우리는 TestBed를 평가하여 단위 테스트를 개발할 때 개발자 경험을 개선하고 보일러플레이트를 줄일 기회를 식별할 것입니다.
   </docs-card>
-  <docs-card title="Incremental adoption" href="">
-  Angular has been lacking the tools and the flexibility to add interactivity to a multi-page app or embed an Angular component inside of an existing app built with a different framework.
+  <docs-card title="점진적 채택" href="">
+  Angular는 다중 페이지 앱에 상호작용성을 추가하거나 다른 프레임워크로 구축된 기존 애플리케이션 내에 Angular 구성 요소를 삽입하는 도구와 유연성이 부족합니다.
 
-  As part of this project, we'll explore the requirement space of cross framework interop and our build tooling offering to make this use case possible.
+  이 프로젝트의 일환으로, 우리는 교차 프레임워크 상호 운용성 및 이 사용 사례를 가능하게 하기 위한 빌드 도구 제공의 요구 사항 공간을 탐색할 것입니다.
   </docs-card>
 </docs-card-container>
 
-## Completed projects
+## 완료된 프로젝트
 
 <docs-card-container>
-  <docs-card title="Support two-dimensional drag-and-drop" link="Completed in Q2 2024" href="https://github.com/angular/components/issues/13372">
-  As part of this project, we implemented mixed orientation support for the Angular CDK drag and drop. This is one of the repository's most highly requested features.
+  <docs-card title="2차원 드래그 앤 드롭 지원" link="2024년 2분기에 완료됨" href="https://github.com/angular/components/issues/13372">
+  이 프로젝트의 일환으로, Angular CDK 드래그 앤 드롭에 대한 혼합 방향 지원을 구현했습니다. 이는 저장소에서 가장 많은 요청을 받은 기능 중 하나입니다.
   </docs-card>
-  <docs-card title="Event replay with SSR and prerendering" link="Completed in Q4 2024" href="https://angular.dev/api/platform-browser/withEventReplay">
-  In v18 we introduced an event replay functionality when using server-side rendering or prerendering. For this feature we depend on the event dispatch primitive (previously known as jsaction) that is running on Google.com.
+  <docs-card title="SSR 및 미리 렌더링을 통한 이벤트 재생" link="2024년 4분기에 완료됨" href="https://angular.dev/api/platform-browser/withEventReplay">
+  v18에서 서버 사이드 렌더링 또는 미리 렌더링을 사용할 때 이벤트 재생 기능을 도입했습니다. 이 기능을 위해 Google.com에서 실행되는 이벤트 배치 기본 요소(이전에는 jsaction으로 알려짐)에 의존합니다.
 
-  In Angular v19 we graduated event replay to stable and enabled it by default for all new projects.
+  Angular v19에서 우리는 이벤트 재생을 안정적 상태로 졸업하고 모든 새로운 프로젝트에 대해 기본적으로 활성화했습니다.
   </docs-card>
-  <docs-card title="Integrate Angular Language Service with Schematics" link="Completed in Q4 2024" href="">
-  To make it easier for developers to use modern Angular APIs, we enabled integration between the Angular language service and schematics which allows you to refactor your app with a single click.
+  <docs-card title="Angular 언어 서비스와 스키매틱 통합" link="2024년 4분기에 완료됨" href="">
+  현대 Angular API를 더 쉽게 사용할 수 있도록 Angular 언어 서비스와 스키매틱 간의 통합을 활성화하여 단일 클릭으로 애플리케이션을 리팩토링할 수 있습니다.
   </docs-card>
-  <docs-card title="Streamline standalone imports with Language Service" link="Completed in Q4 2024" href="">
-  As part of this initiative, the language service automatically imports components and pipes in standalone and NgModule-based apps. Additionally, we've added a template diagnostic to highlight unused imports in standalone components, which should help make application bundles smaller.
+  <docs-card title="언어 서비스와 함께 독립형 가져오기 간소화" link="2024년 4분기에 완료됨" href="">
+  이 이니셔티브의 일환으로, 언어 서비스는 독립형 및 NgModule 기반 애플리케이션에서 자동으로 구성 요소 및 파이프를 가져옵니다. 또한, 우리는 독립형 구성 요소 내에서 사용하지 않는 가져오기를 강조하는 템플릿 진단을 추가하여 애플리케이션 번들을 더 작게 만드는 데 도움을 줄 것입니다.
   </docs-card>
-  <docs-card title="Local template variables" link="Completed in Q3 2024">
-  We've released the support for local template variables in Angular, see [`@let` docs](https://angular.dev/api/core/@let) for additional information.
+  <docs-card title="로컬 템플릿 변수" link="2024년 3분기에 완료됨">
+  Angular의 로컬 템플릿 변수 지원을 출시했습니다. 추가 정보는 [`@let` 문서](https://angular.dev/api/core/@let)를 참조하세요.
   </docs-card>
-  <docs-card title="Expand the customizability of Angular Material" link="Completed in Q2 2024" href="https://material.angular.io/guide/theming">
-  To provide better customization of our Angular Material components and enable Material 3 capabilities, we'll be collaborating with Google's Material Design team on defining token-based theming APIs.
+  <docs-card title="Angular Material의 사용자 정의 가능성 확장" link="2024년 2분기에 완료됨" href="https://material.angular.io/guide/theming">
+  Angular Material 구성 요소의 더 나은 사용자 정의를 제공하고 Material 3 기능을 가능하게 하기 위해 Google의 Material Design 팀과 협력하여 토큰 기반 테마 API를 정의할 것입니다.
 
-  In v17.2 we shared experimental support for Angular Material 3 and in v18 we graduated it to stable.
+  v17.2에서는 Angular Material 3에 대한 실험적 지원을 공유하였고, v18에서는 이를 안정적으로 졸업했습니다.
   </docs-card>
-  <docs-card title="Introduce deferred loading" link="Completed in Q2 2024" href="https://next.angular.dev/guide/defer">
-  In v17 we shipped deferrable views in developer preview, which provide an ergonomic API for deferred code loading. In v18 we enabled deferrable views for library developers and graduated the API to stable.
+  <docs-card title="지연 로딩 도입" link="2024년 2분기에 완료됨" href="https://next.angular.dev/guide/defer">
+  v17에서는 개발자 미리보기에서 지연 가능한 뷰를 출시하였으며, 이는 지연된 코드 로딩을 위한 인체공학적 API를 제공합니다. v18에서는 라이브러리 개발자를 위해 지연 가능한 뷰를 활성화하고 API를 안정적으로 전환했습니다.
   </docs-card>
-  <docs-card title="iframe support in Angular DevTools" link="Completed in Q2 2024" href="">
-  We enabled debugging and profiling of Angular apps embedded within an iframe on the page.
+  <docs-card title="Angular DevTools에서 iframe 지원" link="2024년 2분기에 완료됨" href="">
+  페이지 내에 iframe으로 포함된 Angular 애플리케이션의 디버깅 및 프로파일링을 활성화했습니다.
   </docs-card>
-  <docs-card title="Automation for transition of existing hybrid rendering projects to esbuild and vite" link="Completed in Q2 2024" href="tools/cli/build-system-migration">
-  In v17 we shipped a vite and esbuild-based application builder and enabled it for new projects by default. It improves build time for projects using hybrid rendering with up to 87%. As part of v18 we shipped schematics and a guide that migrate existing projects using hybrid rendering to the new build pipeline.
+  <docs-card title="기존 하이브리드 렌더링 프로젝트를 esbuild 및 vite로 전환하는 자동화" link="2024년 2분기에 완료됨" href="tools/cli/build-system-migration">
+  v17에서는 vite 및 esbuild 기반의 애플리케이션 빌더를 출시하고, 기본적으로 새로운 프로젝트에 대해 활성화했습니다. 하이브리드 렌더링을 사용하는 프로젝트의 빌드 시간을 최대 87% 향상시킵니다. v18의 일환으로 기존 하이브리드 렌더링 프로젝트를 새로운 빌드 파이프라인으로 мигрировать하기 위한 스키매틱과 가이드를 제공했습니다.
   </docs-card>
-  <docs-card title="Make Angular.dev the official home for Angular developers" link="Completed in Q2 2024" href="https://goo.gle/angular-dot-dev">
-  Angular.dev is the new site, domain and home for Angular development. The new site contains updated documentation, tutorials and guidance that will help developers build with Angular’s latest features.
+  <docs-card title="Angular 개발자를 위한 공식 홈페이지로 Angular.dev 만들기" link="2024년 2분기에 완료됨" href="https://goo.gle/angular-dot-dev">
+  Angular.dev는 Angular 개발을 위한 새 사이트, 도메인 및 홈입니다. 이 새 사이트는 Angular의 최신 기능으로 개발자가 빌드하는 데 도움이 되는 업데이트된 문서, 튜토리얼 및 지침을 포함하고 있습니다.
   </docs-card>
-  <docs-card title="Introduce built-in control flow" link="Completed in Q2 2024" href="https://next.angular.dev/essentials/conditionals-and-loops">
-  In v17 we shipped a developer preview version of a new control flow. It brings significant performance improvements and better ergonomics for template authoring. We also provided a migration of existing `*ngIf`, `*ngFor`, and `*ngSwitch` which you can run to move your project to the new implementation. As of v18 the built-in control flow is now stable.
+  <docs-card title="내장 제어 흐름 도입" link="2024년 2분기에 완료됨" href="https://next.angular.dev/essentials/conditionals-and-loops">
+  v17에서는 새로운 제어 흐름의 개발자 미리보기 버전을 출시했습니다. 이는 성능 개선과 템플릿 작성의 인체공학성을 크게 향상시킵니다. 또한 기존 `*ngIf`, `*ngFor`, 및 `*ngSwitch`의 마이그레이션을 제공하여 프로젝트를 새로운 구현으로 이동할 수 있도록 했습니다. v18부터 내장 제어 흐름은 이제 안정적입니다.
   </docs-card>
-  <docs-card title="Modernize getting started tutorial" link="Completed Q4 2023" href="">
-  Over the past two quarters, we developed a new [video](https://www.youtube.com/watch?v=xAT0lHYhHMY&list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF) and [textual](https://angular.dev/tutorials/learn-angular) tutorial based on standalone components.
+  <docs-card title="시작하기 튜토리얼 현대화" link="2023년 4분기에 완료됨" href="">
+  지난 두 분기 동안 우리는 독립형 구성 요소를 기반으로 하는 새로운 [비디오](https://www.youtube.com/watch?v=xAT0lHYhHMY&list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF)와 [텍스트](https://angular.dev/tutorials/learn-angular) 튜토리얼을 개발했습니다.
   </docs-card>
-  <docs-card title="Investigate modern bundlers" link="Completed Q4 2023" href="guide/hydration">
-  In Angular v16, we released a developer preview of an esbuild-based builder with support for `ng build` and `ng serve`. The `ng serve` development server uses Vite and a multi-file compilation by esbuild and the Angular compiler. In v17 we graduated the build tooling from developer preview and enabled it by default for new projects.
+  <docs-card title="현대 번들러 조사" link="2023년 4분기에 완료됨" href="guide/hydration">
+  Angular v16에서는 `ng build` 및 `ng serve`를 지원하는 esbuild 기반 빌더의 개발자 미리보기를 출시했습니다. `ng serve` 개발 서버는 Vite와 esbuild 및 Angular 컴파일러의 다중 파일 컴파일을 사용합니다. v17에서는 이 빌드 도구를 개발자 미리보기에서 졸업하고 기본적으로 새로운 프로젝트에 대해 활성화했습니다.
   </docs-card>
-  <docs-card title="Introduce dependency injection debugging APIs" link="Completed Q4 2023" href="tools/devtools">
-  To improve the debugging utilities of Angular and Angular DevTools, we'll work on APIs that provide access to the dependency injection runtime. As part of the project, we'll expose debugging methods that allow us to explore the injector hierarchy and the dependencies across their associated providers. As of v17, we shipped a feature that enables us to plug into the dependency injection life-cycle. We also launched a visualization of the injector tree and inspection of the providers declared inside each individual node,
+  <docs-card title="의존성 주입 디버깅 API 도입" link="2023년 4분기에 완료됨" href="tools/devtools">
+  Angular 및 Angular DevTools의 디버깅 유틸리티를 개선하기 위해 의존성 주입 런타임에 대한 액세스를 제공하는 API를 개발할 것입니다. 이 프로젝트의 일환으로, 우리는 인젝터 계층 구조와 해당 공급자와의 의존성을 탐색할 수 있는 디버깅 메서드를 노출합니다. v17부터 우리는 의존성 주입 생명주기에 참여할 수 있는 기능을 출시했습니다. 우리는 또한 각 개별 노드에 선언된 공급자를 검사하는 인젝터 트리 시각화를 시작했습니다.
   </docs-card>
-  <docs-card title="Improve documentation and schematics for standalone components" link="Completed Q4 2023" href="components">
-  We released a developer preview of the `ng new --standalone` schematics collection, allowing you to create apps free of NgModules. In v17 we switched the new application authoring format to standalone APIs and changed the documentation to reflect the recommendation. Additionally, we shipped schematics which support updating existing applications to standalone components, directives, and pipes. Even though NgModules will stick around for foreseeable future, we recommend you to explore the benefits of the new APIs to improve developer experience and benefit from the new features we build for them.
+  <docs-card title="독립형 구성 요소에 대한 문서 및 스키매틱 개선" link="2023년 4분기에 완료됨" href="components">
+  우리는 `ng new --standalone` 스키매틱 컬렉션의 개발자 미리보기를 출시하여 NgModules가 없는 앱을 생성할 수 있도록 했습니다. v17에서는 새로운 애플리케이션 작성 형식을 독립형 API로 전환하고 문서를 해당 권장 사항을 반영하도록 변경했습니다. 또한, 기존 애플리케이션을 독립형 구성 요소, 지시어 및 파이프로 업데이트하는 것을 지원하는 스키매틱을 출시했습니다. NgModules는 당분간 남아 있겠지만, 새로운 API의 이점을 탐색하여 개발자 경험을 개선하고 우리가 그들을 위해 구축하는 새로운 기능의 혜택을 누리는 것을 권장합니다.
   </docs-card>
-  <docs-card title="Explore hydration and server-side rendering improvements" link="Completed Q4 2023">
-  In v16, we released a developer preview of non-destructive full hydration, see the [hydration guide](guide/hydration) and the [blog post](https://blog.angular.dev/whats-next-for-server-side-rendering-in-angular-2a6f27662b67) for additional information. We're already seeing significant improvements to Core Web Vitals, including [LCP](https://web.dev/lcp) and [CLS](https://web.dev/cls). In lab tests, we consistently observed 45% better LCP of a real-world app.
+  <docs-card title="수화 및 서버 사이드 렌더링 개선 탐색" link="2023년 4분기에 완료됨">
+  v16에서는 비파괴 전체 수화의 개발자 미리보기를 출시했습니다. 추가 정보는 [수화 가이드](guide/hydration) 및 [블로그 게시물](https://blog.angular.dev/whats-next-for-server-side-rendering-in-angular-2a6f27662b67)을 참조하세요. 우리는 Core Web Vitals, 특히 [LCP](https://web.dev/lcp) 및 [CLS](https://web.dev/cls)에서 상당한 향상을 보고 있습니다. 연구실 테스트에서, 우리는 실제 애플리케이션의 LCP가 45% 더 나은 것을 지속적으로 관찰했습니다.
 
-  In v17 we launched hydration outside developer preview and did a series of improvements in the server-side rendering story, including: route discovery at runtime for SSG, up to 87% faster build times for hybrid rendered applications, prompt that enables hybrid rendering for new projects.
+  v17에서는 개발자 미리보기 외부에서 수화를 출시하고, 서버 사이드 렌더링 스토리에서 일련의 개선을 수행했습니다. 여기에는 SSG를 위한 런타임 라우트 발견, 하이브리드 렌더링 애플리케이션의 최대 87% 더 빠른 빌드 시간, 새로운 프로젝트를 위한 하이브리드 렌더링을 활성화하는 프롬프트가 포함됩니다.
   </docs-card>
-  <docs-card title="Non-destructive full app hydration" link="Completed Q1 2023" href="guide/hydration">
-  In v16, we released a developer preview of non-destructive full hydration, which allows Angular to reuse existing DOM nodes on a server-side rendered page, instead of re-creating an app from scratch. See additional information in the hydration guide.
+  <docs-card title="비파괴 전체 애플리케이션 수화" link="2023년 1분기에 완료됨" href="guide/hydration">
+  v16에서는 서버 사이드 렌더링된 페이지에서 기존 DOM 노드를 재사용할 수 있는 비파괴 전체 수화의 개발자 미리보기를 출시했습니다. 이는 애플리케이션을 처음부터 다시 생성하는 대신 기존 DOM 노드를 재사용할 수 있게 합니다. 추가 정보는 수화 가이드를 참조하세요.
   </docs-card>
-  <docs-card title="Improvements in the image directive" link="Completed Q1 2023" href="guide/image-optimization">
-  We released the Angular image directive as stable in v15. We introduced a new fill mode feature that enables images to fit within their parent container rather than having explicit dimensions. Over the past two months, the Chrome Aurora team backported the directive to v12 and newer.
+  <docs-card title="이미지 지시어 개선" link="2023년 1분기에 완료됨" href="guide/image-optimization">
+  우리는 v15에서 Angular 이미지 지시어를 안정적으로 출시했습니다. 우리는 이미지가 명시적인 치수 대신 부모 컨테이너에 맞게 조정할 수 있는 새로운 채우기 모드 기능을 도입했습니다. 지난 두 달 동안 Chrome Aurora 팀이 이 지시어를 v12 및 이후 버전으로 백포트했습니다.
   </docs-card>
-  <docs-card title="Documentation refactoring" link="Completed Q1 2023" href="https://angular.io">
-  Ensure all existing documentation fits into a consistent set of content types. Update excessive use of tutorial-style documentation into independent topics. We want to ensure the content outside the main tutorials is self-sufficient without being tightly coupled to a series of guides. In Q2 2022, we refactored the template content and dependency injection. In Q1 2023, we improved the HTTP guides, and with this, we're putting the documentation refactoring project on hold.
+  <docs-card title="문서 리팩토링" link="2023년 1분기에 완료됨" href="https://angular.io">
+  모든 기존 문서가 일관된 콘텐츠 유형 세트에 맞도록 보장합니다. 지나치게 사용된 튜토리얼 스타일의 문서를 독립적인 주제로 업데이트합니다. 우리는 주요 튜토리얼 외부의 콘텐츠가 일련의 가이드에 긴밀하게 연결되지 않고도 자급자족을 보장하기를 원합니다. 2022년 2분기에는 템플릿 콘텐츠 및 의존성 주입을 리팩토링했습니다. 2023년 1분기에는 HTTP 가이드를 개선하였으며, 이로써 문서 리팩토링 프로젝트를 보류합니다.
   </docs-card>
-  <docs-card title="Improve image performance" link="Completed Q4 2022" href="guide/image-optimization">
-  The Aurora and the Angular teams are working on the implementation of an image directive that aims to improve Core Web Vitals. We shipped a stable version of the image directive in v15.
+  <docs-card title="이미지 성능 개선" link="2022년 4분기에 완료됨" href="guide/image-optimization">
+  Aurora 및 Angular 팀은 Core Web Vitals를 개선하기 위한 이미지 지시어 구현 작업을 진행하고 있습니다. 우리는 v15에서 이미지 지시어의 안정적인 버전을 출시했습니다.
   </docs-card>
-  <docs-card title="Modern CSS" link="Completed Q4 2022" href="https://blog.angular.dev/modern-css-in-angular-layouts-4a259dca9127">
-  The Web ecosystem evolves constantly and we want to reflect the latest modern standards in Angular. In this project we aim to provide guidelines on using modern CSS features in Angular to ensure developers follow best practices for layout, styling, etc. We shared official guidelines for layout and as part of the initiative stopped publishing flex layout.
+  <docs-card title="현대 CSS" link="2022년 4분기에 완료됨" href="https://blog.angular.dev/modern-css-in-angular-layouts-4a259dca9127">
+  웹 생태계는 지속적으로 발전하고 있으며, 우리는 Angular에서 최신 현대 표준을 반영하고자 합니다. 이 프로젝트의 목적은 Angular에서 현대 CSS 기능을 사용하는 것에 대한 가이드라인을 제공하여 개발자가 레이아웃, 스타일링 등에서 모범 사례를 따르도록 하는 것입니다. 우리는 레이아웃에 대한 공식 가이드라인을 공유하고, 이 이니셔티브의 일환으로 플렉스 레이아웃의 출판을 중단했습니다.
   </docs-card>
-  <docs-card title="Support adding directives to host elements" link="Completed Q4 2022" href="guide/directives/directive-composition-api">
-  A long-standing feature request is to add the ability to add directives to host elements. The feature lets developers augment their own components with additional behaviors without using inheritance. In v15 we shipped our directive composition API, which enables enhancing host elements with directives.
+  <docs-card title="호스트 요소에 지시어 추가 지원" link="2022년 4분기에 완료됨" href="guide/directives/directive-composition-api">
+  오래된 기능 요청 중 하나는 호스트 요소에 지시어를 추가하는 능력을 부여하는 것입니다. 이 기능은 개발자가 상속을 사용하지 않고도 추가 행동으로 자신의 구성 요소를 보강할 수 있도록 합니다. v15에서는 지시어와 함께 호스트 요소를 강화할 수 있는 지시어 조합 API를 출시했습니다.
   </docs-card>
-  <docs-card title="Better stack traces" link="Completed Q4 2022" href="https://developer.chrome.com/blog/devtools-better-angular-debugging/">
-  The Angular and the Chrome DevTools are working together to enable more readable stack traces for error messages. In v15 we released improved relevant and linked stack traces. As a lower priority initiative, we'll be exploring how to make the stack traces friendlier by providing more accurate call frame names for templates.
+  <docs-card title="더 나은 스택 트레이스" link="2022년 4분기에 완료됨" href="https://developer.chrome.com/blog/devtools-better-angular-debugging/">
+  Angular 및 Chrome DevTools는 오류 메시지에 대한 보다 읽기 쉬운 스택 트레이스를 제공하기 위해 협력하고 있습니다. v15에서는 보다 관련성 있고 연결된 스택 트레이스를 개선했습니다. 낮은 우선 순위의 이니셔티브로서, 우리는 템플릿에 대한 보다 정확한 호출 프레임 이름을 제공하여 스택 트레이스를 더 친근하게 만드는 방법을 탐색할 것입니다.
   </docs-card>
-  <docs-card title="Enhanced Angular Material components by integrating MDC Web" link="Completed Q4 2022" href="https://material.angular.io/guide/mdc-migration">
-  MDC Web is a library created by the Google Material Design team that provides reusable primitives for building Material Design components. The Angular team is incorporating these primitives into Angular Material. Using MDC Web aligns Angular Material more closely with the Material Design specification, expands accessibility, improves component quality, and improves the velocity of our team.
+  <docs-card title="MDC Web을 통합하여 Angular Material 구성 요소 향상" link="2022년 4분기에 완료됨" href="https://material.angular.io/guide/mdc-migration">
+  MDC Web은 Google Material Design 팀에서 만든 라이브러리로, Material Design 구성 요소를 구축하기 위한 재사용 가능한 기본 요소를 제공합니다. Angular 팀은 이러한 기본 요소를 Angular Material에 통합하고 있습니다. MDC Web을 사용하면 Angular Material이 Material Design 사양에 더 가깝게 정렬됨에 따라 접근성이 확장되고 구성 요소 품질이 개선되며 팀의 속도가 개선됩니다.
   </docs-card>
-  <docs-card title="Implement APIs for optional NgModules" link="Completed Q4 2022" href="https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8">
-  In the process of making Angular simpler, we are working on introducing APIs that allow developers to initialize apps, instantiate components, and use the router without NgModules. Angular v14 introduces developer preview of the APIs for standalone components, directives, and pipes. In the next few quarters we'll collect feedback from developers and finalize the project making the APIs stable. As the next step we will work on improving use cases such as TestBed, Angular elements, etc.
+  <docs-card title="선택적 NgModules용 API 구현" link="2022년 4분기에 완료됨" href="https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8">
+  Angular를 단순화하는 과정에서, 우리는 개발자가 NgModules 없이 앱을 초기화하고, 구성 요소를 인스턴스화하며, 라우터를 사용할 수 있도록 허용하는 API를 도입하는 작업을 진행하고 있습니다. Angular v14는 독립형 구성 요소, 지시어 및 파이프를 위한 API의 개발자 미리보기를 도입합니다. 향후 몇 분기 동안 우리는 개발자로부터 피드백을 수집하고 프로젝트를 마무리하여 API를 안정적으로 만들 것입니다. 다음 단계로 TestBed, Angular 요소 등과 같은 사용 사례를 개선하는 작업을 진행할 것입니다.
   </docs-card>
-  <docs-card title="Allow binding to protected fields in templates" link="Completed Q2 2022" href="guide/templates/binding">
-  To improve the encapsulation of Angular components we enabled binding to protected members of the component instance. This way you'll no longer have to expose a field or a method as public to use it inside your templates.
+  <docs-card title="템플릿에서 보호된 필드에 바인딩하기 허용" link="2022년 2분기에 완료됨" href="guide/templates/binding">
+  Angular 구성 요소의 캡슐화를 개선하기 위해 구성 요소 인스턴스의 보호된 멤버에 대한 바인딩을 활성화했습니다. 이를 통해 템플릿 내에서 사용하기 위해 필드나 메서드를 공용으로 노출할 필요가 없습니다.
   </docs-card>
-  <docs-card title="Publish guides on advanced concepts" link="Completed Q2 2022" href="https://angular.io/guide/change-detection">
-  Develop and publish an in-depth guide on change detection. Develop content for performance profiling of Angular apps. Cover how change detection interacts with Zone.js and explain when it gets triggered, how to profile its duration, as well as common practices for performance optimization.
+  <docs-card title="고급 개념에 대한 가이드 게시" link="2022년 2분기에 완료됨" href="https://angular.io/guide/change-detection">
+  변화 감지에 대한 심도 있는 가이드를 개발하고 게시합니다. Angular 앱의 성능 프로파일링을 위한 콘텐츠를 개발합니다. 변화 감지가 Zone.js와 어떻게 상호작용하는지, 언제 트리거되는지, 지속 시간을 프로파일링하는 방법, 성능 최적화를 위한 일반적인 관행을 설명합니다.
   </docs-card>
-  <docs-card title="Rollout strict typings for @angular/forms" link="Completed Q2 2022" href="guide/forms/typed-forms">
-  In Q4 2021 we designed a solution for introducing strict typings for forms and in Q1 2022 we concluded the corresponding request for comments. Currently, we are implementing a rollout strategy with an automated migration step that will enable the improvements for existing projects. We are first testing the solution with more than 2,500 projects at Google to ensure a smooth migration path for the external community.
+  <docs-card title="전달 엄격한 타입 지정하기 위해 @angular/forms에 대한 철저한 타입 지정 롤아웃" link="2022년 2분기에 완료됨" href="guide/forms/typed-forms">
+  2021년 4분기에는 형태에 대한 엄격한 타입 지정을 도입하기 위한 솔루션을 설계하고, 2022년 1분기에는 해당 요청서에 대한 논의를 마무리했습니다. 현재, 우리는 기존 프로젝트의 향상을 가능하게 할 자동 마이그레이션 단계를 포함하여 출시 전략을 구현하고 있습니다. 우리는 먼저 Google 내 2,500개 이상의 프로젝트에서 이 솔루션을 테스트하여 외부 커뮤니티에 대한 매끄러운 마이그레이션 경로를 확실히 하고자 합니다.
   </docs-card>
-  <docs-card title="Remove legacy View Engine" link="Completed Q1 2022" href="https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8">
-  After the transition of all our internal tooling to Ivy is completed, we will remove the legacy View Engine for reduced Angular conceptual overhead, smaller package size, lower maintenance cost, and lower codebase complexity.
+  <docs-card title="구식 View Engine 제거" link="2022년 1분기에 완료됨" href="https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8">
+  모든 내부 도구를 Ivy로 전환한 후, Angular의 개념적 오버헤드를 줄이고, 패키지 크기를 줄이며, 유지 관리 비용을 줄이고, 코드베이스 복잡성을 낮추기 위해 구식 View Engine을 제거할 것입니다.
   </docs-card>
-  <docs-card title="Simplified Angular mental model with optional NgModules" link="Completed Q1 2022" href="https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8">
-  To simplify the Angular mental model and learning journey, we will be working on making NgModules optional. This work lets developers develop standalone components and implement an alternative API for declaring the compilation scope of the component. We kicked this project off with high-level design discussions that we captured in an RFC.
+  <docs-card title="선택적 NgModules로 Angular 정신 모델 간소화" link="2022년 1분기에 완료됨" href="https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8">
+  Angular 정신 모델 및 학습 여정을 간소화하기 위해, NgModules를 선택 사항으로 만드는 작업을 진행하고 있습니다. 이 작업은 개발자가 독립형 구성 요소를 개발하고 구성 요소의 컴파일 범위를 선언하기 위한 대안 API를 구현할 수 있게 합니다. 우리는 이 프로젝트를 고급 설계 토론으로 시작했으며, 이를 RFC로 기록했습니다.
   </docs-card>
-  <docs-card title="Design strict typing for @angular/forms" link="Completed Q1 2022" href="guide/forms/typed-forms">
-  We will work on finding a way to implement stricter type checking for reactive forms with minimal backward incompatible implications. This way, we let developers catch more issues during development time, enable better text editor and IDE support, and improve the type checking for reactive forms.
+  <docs-card title="@angular/forms에 대한 엄격한 타입 지정 설계" link="2022년 1분기에 완료됨" href="guide/forms/typed-forms">
+  우리는 최소한의 하위 호환성을 유지하면서 반응형 양식에 대한 더 엄격한 타입 검사를 구현할 방법을 찾기 위해 작업하고 있습니다. 이를 통해 개발자가 개발 시간에 더 많은 문제를 발견할 수 있고 텍스트 편집기 및 IDE 지원을 개선하며 반응형 양식에 대한 타입 검사를 개선할 수 있습니다.
   </docs-card>
-  <docs-card title="Improve integration of Angular DevTools with framework" link="Completed Q1 2022" href="tools/devtools">
-  To improve the integration of Angular DevTools with the framework, we are working on moving the codebase to the angular/angular monorepository. This includes transitioning Angular DevTools to Bazel and integrating it into the existing processes and CI pipeline.
+  <docs-card title="프레임워크와의 Angular DevTools 통합 개선" link="2022년 1분기에 완료됨" href="tools/devtools">
+  Angular DevTools와 프레임워크의 통합을 개선하기 위해, 우리는 코드베이스를 angular/angular 모노 레포지토리로 이동하는 작업을 진행하고 있습니다. 여기에는 Angular DevTools를 Bazel로 전환하고 기존 프로세스 및 CI 파이프라인에 통합하는 것이 포함됩니다.
   </docs-card>
-  <docs-card title="Launch advanced compiler diagnostics" link="Completed Q1 2022" href="reference/extended-diagnostics">
-  Extend the diagnostics of the Angular compiler outside type checking. Introduce other correctness and conformance checks to further guarantee correctness and best practices.
+  <docs-card title="고급 컴파일러 진단 발표" link="2022년 1분기에 완료됨" href="reference/extended-diagnostics">
+  Angular 컴파일러의 진단을 타입 검사 외부로 확장합니다. 정확성과 적합성 검사를 추가하여 정확성을 보장하고 최선의 관행을 보장합니다.
   </docs-card>
-  <docs-card title="Update our e2e testing strategy" link="Completed Q3 2021" href="guide/testing">
-  To ensure we provide a future-proof e2e testing strategy, we want to evaluate the state of Protractor, community innovations, e2e best practices, and explore novel opportunities. As first steps of the effort, we shared an RFC and worked with partners to ensure smooth integration between the Angular CLI and state-of-the-art tooling for e2e testing. As the next step, we need to finalize the recommendations and compile a list of resources for the transition.
+  <docs-card title="e2e 테스트 전략 업데이트" link="2021년 3분기에 완료됨" href="guide/testing">
+  우리는 미래를 염두에 두고 e2e 테스트 전략을 제공할 수 있도록 Protractor, 커뮤니티 혁신, e2e 모범 사례의 상태를 평가하고 새로운 기회를 탐색하고자 합니다. 이 노력의 첫 단계로 우리는 RFC를 공유하고 Angular CLI와 최첨단 e2e 테스트 도구 사이의 원활한 통합을 보장하기 위해 파트너와 작업했습니다. 다음 단계로 우리는 추천 사항을 최종화하고 전환을 위한 자원 목록을 컴파일할 필요가 있습니다.
   </docs-card>
-  <docs-card title="Angular libraries use Ivy" link="Completed Q3 2021" href="tools/libraries">
-  Earlier in 2020, we shared an RFC for Ivy library distribution. After invaluable feedback from the community, we developed a design of the project. We are now investing in the development of Ivy library distribution, including an update of the library package format to use Ivy compilation, unblock the deprecation of the View Engine library format, and ngcc.
+  <docs-card title="Angular 라이브러리에서 Ivy 사용" link="2021년 3분기에 완료됨" href="tools/libraries">
+  2020년 초, 우리는 Ivy 라이브러리 배포에 대한 RFC를 공유했습니다. 커뮤니티의 귀중한 피드백 후, 우리는 프로젝트 설계를 개발했습니다. 이제 우리는 Ivy 라이브러리 배포, Ivy 컴파일을 사용하여 라이브러리 패키지 형식을 업데이트하고 View Engine 라이브러리 형식의 사용 중단을 차단하고 ngcc 개선 작업에 투자하고 있습니다.
   </docs-card>
-  <docs-card title="Improve test times and debugging with automatic test environment tear down" link="Completed Q3 2021" href="guide/testing">
-  To improve test time and create better isolation across tests, we want to change TestBed to automatically clean up and tear down the test environment after each test run.
+  <docs-card title="자동 테스트 환경 정리로 테스트 시간 및 디버깅 개선" link="2021년 3분기에 완료됨" href="guide/testing">
+  테스트 시간 및 테스트 간 격리를 개선하기 위해 TestBed가 각 테스트 실행 후 테스트 환경을 자동으로 정리하도록 변경하고자 합니다.
   </docs-card>
-  <docs-card title="Deprecate and remove IE11 support" link="Completed Q3 2021" href="https://github.com/angular/angular/issues/41840">
-  Internet Explorer 11 (IE11) has been preventing Angular from taking advantage of some of the modern features of the Web platform. As part of this project we are going to deprecate and remove IE11 support to open the path for modern features that evergreen browsers provide. We ran an RFC to collect feedback from the community and decide on next steps to move forward.
+  <docs-card title="IE11 지원 중단 및 제거" link="2021년 3분기에 완료됨" href="https://github.com/angular/angular/issues/41840">
+  Internet Explorer 11 (IE11)은 Angular가 웹 플랫폼의 일부 최신 기능을 활용하는 것을 방해해왔습니다. 이번 프로젝트의 일환으로 우리는 IE11 지원을 중단 및 제거하여 최신 기능을 제공하는 에버그린 브라우저를 위한 길을 열 것입니다. 우리는 커뮤니티의 피드백을 수집하기 위해 RFC를 진행하여 다음 단계로 나아갈 수 있도록 결정했습니다.
   </docs-card>
-  <docs-card title="Leverage ES2017+ as the default output language" link="Completed Q3 2021" href="https://www.typescriptlang.org/docs/handbook/tsconfig-json.html">
-  Supporting modern browsers lets us take advantage of the more compact, expressive, and performant new syntax of JavaScript. As part of this project we will investigate what the blockers are to moving forward with this effort, and take the steps to enable it.
+  <docs-card title="ES2017+를 기본 출력 언어로 활용" link="2021년 3분기에 완료됨" href="https://www.typescriptlang.org/docs/handbook/tsconfig-json.html">
+  최신 브라우저를 지원함으로써 더 간결하고 표현력이 풍부하며 성능이 향상된 JavaScript의 새로운 구문을 활용할 수 있습니다. 본 프로젝트의 일환으로 우리는 이 작업을 진행하기 위한 차단 요인이 무엇인지 조사하고 단계를 밟아 이를 가능하게 할 것입니다.
   </docs-card>
-  <docs-card title="Accelerated debugging and performance profiling with Angular DevTools" link="Completed Q2 2021" href="tools/devtools">
-  We are working on development tooling for Angular that provides utilities for debugging and performance profiling. This project aims to help developers understand the component structure and the change detection in an Angular app.
+  <docs-card title="Angular DevTools로 디버깅 및 성능 프로파일링 가속" link="2021년 2분기에 완료됨" href="tools/devtools">
+  우리는 Angular에 대한 디버깅 및 성능 프로파일링 유틸리티를 제공하는 개발 도구를 작업하고 있습니다. 이 프로젝트는 개발자가 Angular 애플리케이션의 구성 요소 구조 및 변화 감지를 이해하는 데 도움을 주는 것을 목표로 하고 있습니다.
   </docs-card>
-  <docs-card title="Streamline releases with consolidated Angular versioning & branching" link="Completed Q2 2021" href="reference/releases">
-  We want to consolidate release management tooling between the multiple GitHub repositories for Angular (angular/angular, angular/angular-cli, and angular/components). This effort lets us reuse infrastructure, unify and simplify processes, and improve the reliability of our release process.
+  <docs-card title="Angular 버전 관리 및 분기 통합으로 릴리스 간소화" link="2021년 2분기에 완료됨" href="reference/releases">
+  우리는 Angular의 여러 GitHub 리포지토리(angular/angular, angular/angular-cli, angular/components) 간 릴리스 관리 도구를 통합하고자 합니다. 이 작업은 인프라를 재사용하고 프로세스를 통합 및 단순화하며 릴리스 과정의 신뢰성을 향상시키는 것을 가능하게 합니다.
   </docs-card>
-  <docs-card title="Higher developer consistency with commit message standardization" link="Completed Q2 2021" href="https://github.com/angular/angular">
-  We want to unify commit message requirements and conformance across Angular repositories (angular/angular, angular/components, and angular/angular-cli) to bring consistency to our development process and reuse infrastructure tooling.
+  <docs-card title="커밋 메시지 표준화로 개발자 일관성 증가" link="2021년 2분기에 완료됨" href="https://github.com/angular/angular">
+  우리는 Angular 리포지토리(angular/angular, angular/components, angular/angular-cli) 간 커밋 메시지 요구 사항 및 적합성 통합을 통한 개발 프로세스의 일관성을 높이고 인프라 도구를 재사용하고자 합니다.
   </docs-card>
-  <docs-card title="Transition the Angular language service to Ivy" link="Completed Q2 2021" href="tools/language-service">
-  The goal of this project is to improve the experience and remove legacy dependency by transitioning the language service to Ivy. Today the language service still uses the View Engine compiler and type checking, even for Ivy apps. We want to use the Ivy template parser and improved type checking for the Angular Language service to match app behavior. This migration is also a step towards unblocking the removal of View Engine, which will simplify Angular, reduce the npm package size, and improve the maintainability of the framework.
+  <docs-card title="Angular 언어 서비스를 Ivy로 전환" link="2021년 2분기에 완료됨" href="tools/language-service">
+  이 프로젝트의 목표는 경험을 개선하고 언어 서비스를 Ivy로 전환하여 구식 의존성을 제거하는 것입니다. 현재 언어 서비스는 여전히 Ivy 앱조차도 View Engine 컴파일러 및 타입 검사를 사용합니다. Angular 언어 서비스에 Ivy 템플릿 파서를 사용하고 앱 동작과 일치하도록 향상된 타입 검사를 사용하고 싶습니다. 이 마이그레이션은 View Engine 제거를 위한 길을 여는 한 단계이기도 하며, 이는 Angular를 단순화하고 npm 패키지 크기를 줄이며 프레임워크의 유지 관리성을 개선할 것입니다.
   </docs-card>
-  <docs-card title="Increased security with native Trusted Types in Angular" link="Completed Q2 2021" href="best-practices/security">
-  In collaboration with the Google security team, we are adding support for the new Trusted Types API. This web platform API helps developers build more secure web apps.
+  <docs-card title="Angular에서 네이티브 Trusted Types로 보안 강화" link="2021년 2분기에 완료됨" href="best-practices/security">
+  Google 보안 팀과 협력하여 새로운 Trusted Types API를 지원합니다. 이 웹 플랫폼 API는 개발자가 더 안전한 웹 애플리케이션을 구축하는 데 도움을 줍니다.
   </docs-card>
-  <docs-card title="Optimized build speed and bundle sizes with Angular CLI webpack 5" link="Completed Q2 2021" href="tools/cli/build">
-  As part of the v11 release, we introduced an opt-in preview of webpack 5 in the Angular CLI. To ensure stability, we will continue iterating on the implementation to enable build speed and bundle size improvements.
+  <docs-card title="Angular CLI webpack 5로 빌드 속도 및 번들 크기 최적화" link="2021년 2분기에 완료됨" href="tools/cli/build">
+  v11 릴리스의 일환으로 Angular CLI에서 webpack 5의 선택적 미리보기를 도입했습니다. 안정성을 보장하기 위해 빌드 속도 및 번들 크기 향상을 위한 구현을 계속 반복할 것입니다.
   </docs-card>
-  <docs-card title="Faster apps by inlining critical styles in Universal apps" link="Completed Q1 2021" href="guide/ssr">
-  Loading external stylesheets is a blocking operation, which means that the browser cannot start rendering your app until it loads all the referenced CSS. Having render-blocking resources in the header of a page can significantly impact its load performance, for example, its first contentful paint. To make apps faster, we have been collaborating with the Google Chrome team on inlining critical CSS and loading the rest of the styles asynchronously.
+  <docs-card title="Universal 앱에서 중요한 스타일을 인라인하여 더 빠른 앱 제공" link="2021년 1분기에 완료됨" href="guide/ssr">
+  외부 스타일시트 로드는 차단 작업으로, 이는 브라우저가 참조된 CSS를 모두 로드할 때까지 애플리케이션 렌더링을 시작할 수 없음을 의미합니다. 페이지 헤더에 렌더 차단 리소스가 있으면 로드 성능, 예를 들어 최초 콘텐츠 페인트에 크게 영향을 미칠 수 있습니다. 앱을 더 빠르게 만드는 방법으로, 우리는 Google Chrome 팀과 협력하여 중요한 CSS를 인라인으로 삽입하고 나머지 스타일을 비동기적으로 로드하고 있습니다.
   </docs-card>
-  <docs-card title="Improve debugging with better Angular error messages" link="Completed Q1 2021" href="reference/errors">
-  Error messages often bring limited actionable information to help developers resolve them. We have been working on making error messages more discoverable by adding associated codes, developing guides, and other materials to ensure a smoother debugging experience.
+  <docs-card title="향상된 Angular 오류 메시지로 디버깅 개선" link="2021년 1분기에 완료됨" href="reference/errors">
+  오류 메시지는 종종 개발자가 문제를 해결하는 데 도움이 되는 제한된 실행 정보를 제공합니다. 우리는 오류 메시지를 더 쉽게 발견할 수 있도록 관련 코드를 추가하고 가이드 및 기타 자료를 개발하여 더 매끄러운 디버깅 경험을 보장하기 위해 노력해왔습니다.
   </docs-card>
-  <docs-card title="Improved developer onboarding with refreshed introductory documentation" link="Completed Q1 2021" href="tutorials">
-  We will redefine the user learning journeys and refresh the introductory documentation. We will clearly state the benefits of Angular, how to explore its capabilities and provide guidance so developers can become proficient with the framework in as little time as possible.
+  <docs-card title="새로운 소개 문서로 개선된 개발자 온보딩" link="2021년 1분기에 완료됨" href="tutorials">
+  우리는 사용자 학습 여정을 재정의하고 소개 문서를 새롭게 할 것입니다. Angular의 이점, 기능을 탐색하는 방법을 명확히 하고, 개발자가 최대한 빨리 프레임워크에 능숙해질 수 있도록 가이드를 제공합니다.
   </docs-card>
-  <docs-card title="Expand component harnesses best practices" link="Completed Q1 2021" href="https://material.angular.io/guide/using-component-harnesses">
-  Angular CDK introduced the concept of component test harnesses to Angular in version 9. Test harnesses let component authors create supported APIs for testing component interactions. We are continuing to improve this harness infrastructure and clarifying the best practices around using harnesses. We are also working to drive more harness adoption inside of Google.
+  <docs-card title="구성 요소 하네스의 모범 사례 확장" link="2021년 1분기에 완료됨" href="https://material.angular.io/guide/using-component-harnesses">
+  Angular CDK는 버전 9에서 Angular에 구성 요소 테스트 하네스 개념을 도입했습니다. 테스트 하네스는 구성 요소 작성자가 구성 요소 상호 작용을 테스트하기 위한 지원 API를 생성할 수 있게 합니다. 우리는 이 하네스 인프라를 지속적으로 개선하고 있으며, 하네스를 사용하는 것에 대한 모범 사례를 명확히 하기 위해 작업하고 있습니다. 또한 Google 내에서 더 많은 하네스 채택을 촉진하기 위해 작업하고 있습니다.
   </docs-card>
-  <docs-card title="Author a guide for content projection" link="Completed Q2 2021" href="https://angular.io/docs">
-  Content projection is a core Angular concept that does not have the presence it deserves in the documentation. As part of this project we want to identify the core use cases and concepts for content projection and document them.
+  <docs-card title="내용 투사에 대한 가이드 작성" link="2021년 2분기에 완료됨" href="https://angular.io/docs">
+  내용 투사는 Angular의 핵심 개념으로, 문서에 적절한 존재감을 가지지 못하고 있습니다. 이 프로젝트의 일환으로, 우리는 내용 투사에 대한 핵심 사용 사례 및 개념을 확인하고 문서화하고자 합니다.
   </docs-card>
-  <docs-card title="Migrate to ESLint" link="Completed Q4 2020" href="tools/cli">
-  With the deprecation of TSLint we will be moving to ESLint. As part of the process, we will work on ensuring backward compatibility with our current recommended TSLint configuration, implement a migration strategy for existing Angular apps and introduce new tooling to the Angular CLI toolchain.
+  <docs-card title="ESLint로 마이그레이션" link="2020년 4분기에 완료됨" href="tools/cli">
+  TSLint의 사용 중단으로 인해 우리는 ESLint로 전환하고 있습니다. 이 과정의 일환으로 현재 권장하는 TSLint 구성을 기존과 일치시키고, 기존 Angular 앱에 대한 마이그레이션 전략을 구현하고, Angular CLI 툴 체인에 새로운 도구를 도입하기 위해 작업하고 있습니다.
   </docs-card>
-  <docs-card title="Operation Bye Bye Backlog (also known as Operation Byelog)" link="Completed Q4 2020" href="https://github.com/angular/angular/issues">
-  We are actively investing up to 50% of our engineering capacity on triaging issues and PRs until we have a clear understanding of broader community needs. After that, we will commit up to 20% of our engineering capacity to keep up with new submissions promptly.
+  <docs-card title="작전 바이 바이 백로그(작전 바이엘로그로도 알려짐)" link="2020년 4분기에 완료됨" href="https://github.com/angular/angular/issues">
+  우리는 더 넓은 커뮤니티의 필요를 명확히 이해할 때까지 문제와 PR을 분류하는 데 엔지니어링 능력의 최대 50%를 적극적으로 투자하고 있습니다. 그 후, 우리는 새로운 제출을 신속하게 따라잡기 위해 엔지니어링 능력의 최대 20%를 약속할 것입니다.
   </docs-card>
-</docs-card-container>
+</docs-card-container>
\ No newline at end of file
diff --git a/adev/src/content/reference/versions.md b/adev/src/content/reference/versions.md
index eaf60db85a6f..66d405b69c97 100644
--- a/adev/src/content/reference/versions.md
+++ b/adev/src/content/reference/versions.md
@@ -1,11 +1,10 @@
-# Version compatibility
+# 버전 호환성
 
-The following tables describe the versions of Node.js, TypeScript, and RxJS that each version of
-Angular requires.
+다음 표는 각 Angular 버전이 요구하는 Node.js, TypeScript 및 RxJS의 버전을 설명합니다.
 
-## Actively supported versions
+## 적극적으로 지원되는 버전
 
-This table covers [Angular versions under active support](reference/releases#actively-supported-versions).
+이 표는 [적극적으로 지원되는 Angular 버전](reference/releases#actively-supported-versions)을 포함합니다.
 
 | Angular            | Node.js                              | TypeScript     | RxJS               |
 | ------------------ | ------------------------------------ | -------------- | ------------------ |
@@ -18,11 +17,9 @@ This table covers [Angular versions under active support](reference/releases#act
 | 17.1.x \|\| 17.2.x | ^18.13.0 \|\| ^20.9.0                | >=5.2.0 <5.4.0 | ^6.5.3 \|\| ^7.4.0 |
 | 17.0.x             | ^18.13.0 \|\| ^20.9.0                | >=5.2.0 <5.3.0 | ^6.5.3 \|\| ^7.4.0 |
 
-## Unsupported Angular versions
+## 지원되지 않는 Angular 버전
 
-This table covers Angular versions that are no longer under long-term support (LTS). This
-information was correct when each version went out of LTS and is provided without any further
-guarantees. It is listed here for historical reference.
+이 표는 더 이상 장기 지원(LTS)을 받지 않는 Angular 버전을 포함합니다. 각 버전이 LTS를 종료했을 때 이 정보가 정확하며, 추가적인 보장을 제공하지 않습니다. 역사적 참조를 위해 여기에 나열됩니다.
 
 | Angular            | Node.js                              | TypeScript     | RxJS               |
 | ------------------ | ------------------------------------ | -------------- | ------------------ |
@@ -47,9 +44,9 @@ guarantees. It is listed here for historical reference.
 | 9.1.x              | ^10.13.0 \|\| ^12.11.0               | >=3.6.0 <3.9.0 | ^6.5.3             |
 | 9.0.x              | ^10.13.0 \|\| ^12.11.0               | >=3.6.0 <3.8.0 | ^6.5.3             |
 
-### Before v9
+### v9 이전
 
-Until Angular v9, Angular and Angular CLI versions were not synced.
+Angular v9까지, Angular 및 Angular CLI 버전은 동기화되지 않았습니다.
 
 | Angular                     | Angular CLI                 | Node.js             | TypeScript     | RxJS   |
 | --------------------------- | --------------------------- | ------------------- | -------------- | ------ |
@@ -66,43 +63,43 @@ Until Angular v9, Angular and Angular CLI versions were not synced.
 | 4.0.x \|\| 4.1.x            | 1.0.x \|\| 1.1.x \|\| 1.2.x | ^6.9.0              | >=2.1.6 <2.4.0 | ^5.0.1 |
 | 2.x                         | -                           | ^6.9.0              | >=1.8.0 <2.2.0 | ^5.0.1 |
 
-## Browser support
+## 브라우저 지원
 
-Angular supports most recent browsers.
-This includes the following specific versions:
+Angular는 최신 브라우저를 대부분 지원합니다. 
+여기에는 다음 특정 버전이 포함됩니다:
 
-| Browser | Supported versions                          |
+| 브라우저 | 지원되는 버전                          |
 | :------ | :------------------------------------------ |
-| Chrome  | 2 most recent versions                      |
-| Firefox | latest and extended support release \(ESR\) |
-| Edge    | 2 most recent major versions                |
-| Safari  | 2 most recent major versions                |
-| iOS     | 2 most recent major versions                |
-| Android | 2 most recent major versions                |
+| Chrome  | 2개의 최신 버전                      |
+| Firefox | 최신 및 확장 지원 릴리스 \(ESR\) |
+| Edge    | 2개의 최신 주요 버전                |
+| Safari  | 2개의 최신 주요 버전                |
+| iOS     | 2개의 최신 주요 버전                |
+| Android | 2개의 최신 주요 버전                |
 
-HELPFUL: Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request, using [Sauce Labs](https://saucelabs.com).
+도움: Angular의 지속적인 통합 프로세스는 이러한 브라우저에서 모든 풀 리퀘스트에 대해 프레임워크의 단위 테스트를 실행합니다. [Sauce Labs](https://saucelabs.com)를 사용합니다.
 
-## Polyfills
+## 폴리필
 
-Angular is built on the latest standards of the web platform.
-Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers.
-You compensate by loading polyfill scripts \("polyfills"\) for the browsers that you must support.
-See instructions on how to include polyfills into your project below.
+Angular는 웹 플랫폼의 최신 표준을 기반으로 구축되었습니다. 
+이처럼 다양한 브라우저를 목표로 하는 것은 도전적이며, 모든 현대 브라우저의 기능을 지원하지 않습니다. 
+지원해야 하는 브라우저를 위해 폴리필 스크립트(“폴리필”)를 로드하여 보완합니다. 
+아래에서 프로젝트에 폴리필을 포함하는 방법에 대한 지침을 참조하십시오.
 
-IMPORTANT: The suggested polyfills are the ones that run full Angular applications.
-You might need additional polyfills to support features not covered by this list.
+중요: 제안된 폴리필은 전체 Angular 애플리케이션을 실행하는 것들입니다. 
+이 목록에 포함되지 않은 기능을 지원하기 위해 추가 폴리필이 필요할 수 있습니다.
 
-HELPFUL: Polyfills cannot magically transform an old, slow browser into a modern, fast one.
+도움: 폴리필은 오래되고 느린 브라우저를 현대적이고 빠른 브라우저로 마법처럼 변환할 수는 없습니다.
 
-## Enabling polyfills with CLI projects
+## CLI 프로젝트로 폴리필 활성화
 
-The [Angular CLI](tools/cli) provides support for polyfills.
-If you are not using the CLI to create your projects, see [Polyfill instructions for non-CLI users](#polyfills-for-non-cli-users).
+[Angular CLI](tools/cli)는 폴리필에 대한 지원을 제공합니다. 
+프로젝트를 생성할 때 CLI를 사용하지 않는 경우, [비 CLI 사용자에 대한 폴리필 지침](#polyfills-for-non-cli-users)을 참조하십시오.
 
-The `polyfills` options of the [browser and test builder](tools/cli/cli-builder) can be a full path for a file \(Example: `src/polyfills.ts`\) or,
-relative to the current workspace or module specifier \(Example: `zone.js`\).
+[브라우저 및 테스트 빌더](tools/cli/cli-builder)의 `polyfills` 옵션은 파일의 전체 경로(예: `src/polyfills.ts`)가 될 수 있으며,
+현재 작업 공간 또는 모듈 지정자(예: `zone.js`)에 상대적인 경로일 수 있습니다.
 
-If you create a TypeScript file, make sure to include it in the `files` property of your `tsconfig` file.
+TypeScript 파일을 생성한 경우, `tsconfig` 파일의 `files` 속성에 포함되도록 하십시오.
 
 <docs-code language="json">
 {
@@ -118,31 +115,31 @@ If you create a TypeScript file, make sure to include it in the `files` property
 }
 </docs-code>
 
-## Polyfills for non-CLI users
+## 비 CLI 사용자에 대한 폴리필
 
-If you are not using the CLI, add your polyfill scripts directly to the host web page \(`index.html`\).
+CLI를 사용하지 않는 경우, 폴리필 스크립트를 호스트 웹 페이지(`index.html`)에 직접 추가하십시오.
 
-For example:
+예를 들어:
 
 <docs-code header="src/index.html" language="html">
-<!-- pre-zone polyfills -->
+<!-- pre-zone 폴리필 -->
 <script src="node_modules/core-js/client/shim.min.js"></script>
 <script>
   /**
-   * you can configure some zone flags which can disable zone interception for some
-   * asynchronous activities to improve startup performance - use these options only
-   * if you know what you are doing as it could result in hard to trace down bugs.
+   * 일부 비동기 활동에 대한 영역 간섭을 비활성화하는 지점 플래그를 설정할 수 있으며, 
+   * 시작 성능을 개선할 수 있습니다 - 이러한 옵션은 반드시 필요한 경우에만 사용하십시오. 
+   * 이로 인해 추적하기 어려운 버그가 발생할 수 있습니다.
    */
-  // &lowbar;&lowbar;Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
-  // &lowbar;&lowbar;Zone_disable_on_property = true; // disable patch onProperty such as onclick
-  // &lowbar;&lowbar;zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+  // &lowbar;&lowbar;Zone_disable_requestAnimationFrame = true; // requestAnimationFrame 패치 비활성화
+  // &lowbar;&lowbar;Zone_disable_on_property = true; // onclick과 같은 onProperty 패치 비활성화
+  // &lowbar;&lowbar;zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // 특정 eventNames 패치 비활성화
   /*
-   * in Edge developer tools, the addEventListener will also be wrapped by zone.js
-   * with the following flag, it will bypass `zone.js` patch for Edge.
+   * Edge 개발자 도구에서 addEventListener는 zone.js에 의해 래핑됩니다.
+   * 다음 플래그를 추가하면 Edge에 대한 `zone.js` 패치를 우회하게 됩니다.
    */
   // &lowbar;&lowbar;Zone_enable_cross_context_check = true;
 </script>
-<!-- zone.js required by Angular -->
+<!-- Angular에 필요한 zone.js -->
 <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
-<!-- application polyfills -->
-</docs-code>
+<!-- 애플리케이션 폴리필 -->
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/aot-compiler.md b/adev/src/content/tools/cli/aot-compiler.md
index cda07153b8b7..848b481223e9 100644
--- a/adev/src/content/tools/cli/aot-compiler.md
+++ b/adev/src/content/tools/cli/aot-compiler.md
@@ -1,46 +1,46 @@
-# Ahead-of-time (AOT) compilation
+# 사전 컴파일(AOT) 
 
-An Angular application consists mainly of components and their HTML templates.
-Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.
+Angular 애플리케이션은 주로 구성 요소와 해당 HTML 템플릿으로 구성됩니다.  
+Angular가 제공하는 구성 요소와 템플릿은 브라우저가 직접 이해할 수 없기 때문에, Angular 애플리케이션은 브라우저에서 실행되기 전에 컴파일 프로세스가 필요합니다. 
 
-The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase *before* the browser downloads and runs that code.
-Compiling your application during the build process provides a faster rendering in the browser.
+Angular 사전 컴파일(AOT) 컴파일러는 Angular HTML 및 TypeScript 코드를 빌드 단계에서 브라우저가 코드 다운로드 및 실행하기 전에 효율적인 JavaScript 코드로 변환합니다.  
+애플리케이션을 빌드 프로세스 중에 컴파일하면 브라우저에서 더 빠른 렌더링을 제공합니다. 
 
-This guide explains how to specify metadata and apply available compiler options to compile your applications efficiently using the AOT compiler.
+이 가이드는 메타데이터를 지정하고 사용 가능한 컴파일러 옵션을 적용하여 AOT 컴파일러를 사용하여 애플리케이션을 효율적으로 컴파일하는 방법을 설명합니다. 
 
-HELPFUL: [Watch Alex Rickabaugh explain the Angular compiler](https://www.youtube.com/watch?v=anphffaCZrQ) at AngularConnect 2019.
+도움이 됨: [Alex Rickabaugh의 Angular 컴파일러 설명 보기](https://www.youtube.com/watch?v=anphffaCZrQ) (AngularConnect 2019에서) 
 
-Here are some reasons you might want to use AOT.
+AOT를 사용하려는 몇 가지 이유는 다음과 같습니다. 
 
-| Reasons                                 | Details |
-|:---                                     |:---     |
-| Faster rendering                        | With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the application first.                                       |
-| Fewer asynchronous requests             | The compiler *inlines* external HTML templates and CSS style sheets within the application JavaScript, eliminating separate ajax requests for those source files.                                                                                  |
-| Smaller Angular framework download size | There's no need to download the Angular compiler if the application is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.                                              |
-| Detect template errors earlier          | The AOT compiler detects and reports template binding errors during the build step before users can see them.                                                                                                                                      |
-| Better security                         | AOT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks. |
+| 이유                                   | 세부사항 |
+|:---                                   |:---     |
+| 더 빠른 렌더링                       | AOT를 사용하면 브라우저가 애플리케이션의 사전 컴파일 버전을 다운로드합니다. 브라우저는 즉시 애플리케이션을 렌더링할 수 있도록 실행 가능한 코드를 로드하므로 애플리케이션을 먼저 컴파일할 때까지 기다릴 필요가 없습니다.                                       |
+| 더 적은 비동기 요청                   | 컴파일러는 외부 HTML 템플릿과 CSS 스타일 시트를 애플리케이션 JavaScript 내에서 *인라인*하여 해당 소스 파일에 대한 별도의 ajax 요청을 제거합니다.                                                                                  |
+| 더 작은 Angular 프레임워크 다운로드 크기 | 애플리케이션이 이미 컴파일되어 있다면 Angular 컴파일러를 다운로드할 필요가 없습니다. 컴파일러는 Angular 자체의 대략 절반 크기이므로 이를 생략하면 애플리케이션 페이로드가 크게 줄어듭니다.                                              |
+| 템플릿 오류를 더 일찍 감지           | AOT 컴파일러는 사용자가 이를 볼 수 있기 전에 빌드 단계에서 템플릿 바인딩 오류를 감지하고 보고합니다.                                                                                                                                      |
+| 더 나은 보안                          | AOT는 HTML 템플릿과 구성 요소를 클라이언트에 제공되기 훨씬 전에 JavaScript 파일로 컴파일합니다. 읽을 수 있는 템플릿이 없고 위험한 클라이언트 측 HTML 또는 JavaScript 평가가 없으므로 주입 공격의 가능성이 줄어듭니다. |
 
-## Choosing a compiler
+## 컴파일러 선택하기 
 
-Angular offers two ways to compile your application:
+Angular는 애플리케이션을 컴파일하는 두 가지 방법을 제공합니다: 
 
-| Angular compile       | Details |
-|:---                   |:---     |
-| Just-in-Time \(JIT\)  | Compiles your application in the browser at runtime. This was the default until Angular 8.        |
-| Ahead-of-Time \(AOT\) | Compiles your application and libraries at build time. This is the default starting in Angular 9. |
+| Angular 컴파일                | 세부사항 |
+|:---                          |:---     |
+| Just-in-Time \(JIT\)        | 런타임에 브라우저에서 애플리케이션을 컴파일합니다. 이는 Angular 8까지 기본값이었습니다.        |
+| Ahead-of-Time \(AOT\)       | 빌드 시간에 애플리케이션 및 라이브러리를 컴파일합니다. Angular 9부터 기본값입니다. |
 
-When you run the [`ng build`](cli/build) \(build only\) or [`ng serve`](cli/serve) \(build and serve locally\) CLI commands, the type of compilation \(JIT or AOT\) depends on the value of the `aot` property in your build configuration specified in `angular.json`.
-By default, `aot` is set to `true` for new CLI applications.
+[`ng build`](cli/build) \(오직 빌드\) 또는 [`ng serve`](cli/serve) \(빌드 및 로컬 제공\) CLI 명령을 실행할 때, 컴파일 유형 \(JIT 또는 AOT\)은 `angular.json`에 지정된 빌드 구성의 `aot` 속성 값에 따라 달라집니다.  
+기본적으로 새 CLI 애플리케이션에 대해 `aot`는 `true`로 설정되어 있습니다.
 
-See the [CLI command reference](cli) and [Building and serving Angular apps](tools/cli/build) for more information.
+자세한 내용은 [CLI 명령 참조](cli)와 [Angular 앱 빌드 및 제공](tools/cli/build)을 참조하세요.
 
-## How AOT works
+## AOT 작동 원리 
 
-The Angular AOT compiler extracts **metadata** to interpret the parts of the application that Angular is supposed to manage.
-You can specify the metadata explicitly in **decorators** such as `@Component()` and `@Input()`, or implicitly in the constructor declarations of the decorated classes.
-The metadata tells Angular how to construct instances of your application classes and interact with them at runtime.
+Angular AOT 컴파일러는 Angular가 관리해야 하는 애플리케이션 부분을 해석하기 위해 **메타데이터**를 추출합니다.  
+메타데이터는 `@Component()` 및 `@Input()`와 같은 **데코레이터**에서 명시적으로 지정하거나, 장식된 클래스의 생성자 선언에서 암시적으로 지정할 수 있습니다.  
+메타데이터는 Angular에 애플리케이션 클래스의 인스턴스를 구성하고 런타임에 상호 작용하는 방법을 알려줍니다. 
 
-In the following example, the `@Component()` metadata object and the class constructor tell Angular how to create and display an instance of `TypicalComponent`.
+다음 예에서 `@Component()` 메타데이터 객체와 클래스 생성자는 Angular에 `TypicalComponent` 인스턴스를 생성하고 표시하는 방법을 알려줍니다. 
 
 <docs-code language="typescript">
 
@@ -55,75 +55,75 @@ export class TypicalComponent {
 
 </docs-code>
 
-The Angular compiler extracts the metadata *once* and generates a *factory* for `TypicalComponent`.
-When it needs to create a `TypicalComponent` instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency.
+Angular 컴파일러는 메타데이터를 *한 번* 추출하고 `TypicalComponent`를 위한 *팩토리*를 생성합니다.  
+`TypicalComponent` 인스턴스를 생성해야 할 때, Angular는 팩토리를 호출하여 주입된 종속성을 가진 새로운 구성 요소 클래스의 새로운 인스턴스에 바인딩된 새로운 시각적 요소를 생성합니다. 
 
-### Compilation phases
+### 컴파일 단계 
 
-There are three phases of AOT compilation.
+AOT 컴파일에는 세 가지 단계가 있습니다. 
 
-|     | Phase                  | Details                                                                                                                                                                                                                                                                                                        |
-|:--- |:---                    |:---                                                                                                                                                                                                                                                                                                            |
-| 1   | code analysis          | In this phase, the TypeScript compiler and *AOT collector* create a representation of the source. The collector does not attempt to interpret the metadata it collects. It represents the metadata as best it can and records errors when it detects a metadata syntax violation.                              |
-| 2   | code generation        | In this phase, the compiler's `StaticReflector` interprets the metadata collected in phase 1, performs additional validation of the metadata, and throws an error if it detects a metadata restriction violation.                                                                                              |
-| 3   | template type checking | In this optional phase, the Angular *template compiler* uses the TypeScript compiler to validate the binding expressions in templates. You can enable this phase explicitly by setting the `strictTemplates` configuration option; see [Angular compiler options](reference/configs/angular-compiler-options). |
+|     | 단계                    | 세부사항                                                                                                                                                                                                                                                                                                        |
+|:--- |:---                     |:---                                                                                                                                                                                                                                                                                                            |
+| 1   | 코드 분석               | 이 단계에서 TypeScript 컴파일러와 *AOT 수집기*는 소스의 표현을 생성합니다. 수집기는 수집한 메타데이터를 해석할 수 없습니다. 메타데이터를 가능한 한 잘 표현하고 메타데이터 구문 위반을 감지하면 오류를 기록합니다.                              |
+| 2   | 코드 생성               | 이 단계에서 컴파일러의 `StaticReflector`는 1단계에서 수집한 메타데이터를 해석하고, 메타데이터에 대한 추가 유효성 검사를 수행하며, 메타데이터 제한 위반이 감지되면 오류를 발생시킵니다.                                                                                              |
+| 3   | 템플릿 타입 검사       | 이 선택적 단계에서 Angular *템플릿 컴파일러*는 TypeScript 컴파일러를 사용하여 템플릿의 바인딩 표현식을 검증합니다. 이 단계를 명시적으로 활성화하려면 `strictTemplates` 구성 옵션을 설정하세요. [Angular 컴파일러 옵션](reference/configs/angular-compiler-options)을 참조하세요. |
 
-### Metadata restrictions
+### 메타데이터 제한 사항 
 
-You write metadata in a *subset* of TypeScript that must conform to the following general constraints:
+당신은 다음 일반 제약을 준수하는 *부분* TypeScript로 메타데이터를 작성해야 합니다: 
 
-* Limit [expression syntax](#expression-syntax-limitations) to the supported subset of JavaScript
-* Only reference exported symbols after [code folding](#code-folding)
-* Only call [functions supported](#supported-classes-and-functions) by the compiler
-* Input/Outputs and data-bound class members must be public or protected.For additional guidelines and instructions on preparing an application for AOT compilation, see [Angular: Writing AOT-friendly applications](https://medium.com/sparkles-blog/angular-writing-aot-friendly-applications-7b64c8afbe3f).
+* 지원되는 JavaScript의 하위 집합에 [표현 구문](#expression-syntax-limitations)을 제한합니다. 
+* [코드 접기](#code-folding) 이후에만 내보내는 기호를 참조합니다. 
+* 컴파일러에 의해 [지원되는 함수](#supported-classes-and-functions)만 호출합니다. 
+* Input/Output 및 데이터 바인딩된 클래스 멤버는 public 또는 protected 여야 합니다. AOT 컴파일 준비에 대한 추가 지침 및 지침은 [Angular: AOT 지원 애플리케이션 작성](https://medium.com/sparkles-blog/angular-writing-aot-friendly-applications-7b64c8afbe3f)을 참조하세요. 
 
-HELPFUL: Errors in AOT compilation commonly occur because of metadata that does not conform to the compiler's requirements \(as described more fully below\).
-For help in understanding and resolving these problems, see [AOT Metadata Errors](tools/cli/aot-metadata-errors).
+도움이 됨: AOT 컴파일러의 오류는 일반적으로 메타데이터가 컴파일러의 요구 사항에 부합하지 않을 때 발생합니다 \(아래에서 더 자세히 설명됨\).  
+이러한 문제를 이해하고 해결하는 데 도움이 필요하면 [AOT 메타데이터 오류](tools/cli/aot-metadata-errors)를 참조하세요. 
 
-### Configuring AOT compilation
+### AOT 컴파일 구성 
 
-You can provide options in the [TypeScript configuration file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) that controls the compilation process.
-See [Angular compiler options](reference/configs/angular-compiler-options) for a complete list of available options.
+컴파일 프로세스를 제어하는 [TypeScript 구성 파일](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)에서 옵션을 제공할 수 있습니다.  
+사용 가능한 옵션의 전체 목록은 [Angular 컴파일러 옵션](reference/configs/angular-compiler-options)을 참조하세요. 
 
-## Phase 1: Code analysis
+## 1단계: 코드 분석 
 
-The TypeScript compiler does some of the analytic work of the first phase.
-It emits the `.d.ts` *type definition files* with type information that the AOT compiler needs to generate application code.
-At the same time, the AOT **collector** analyzes the metadata recorded in the Angular decorators and outputs metadata information in **`.metadata.json`** files, one per `.d.ts` file.
+TypeScript 컴파일러는 첫 번째 단계의 분석 작업 중 일부를 수행합니다.  
+그것은 AOT 컴파일러가 애플리케이션 코드를 생성하는 데 필요한 타입 정보를 포함한 `.d.ts` *타입 정의 파일*을 발생합니다.  
+동시에 AOT **수집기**는 Angular 데코레이터에 기록된 메타데이터를 분석하고 **`.metadata.json`** 파일에 메타데이터 정보를 출력합니다. 이를 각 `.d.ts` 파일마다 하나씩 생성합니다. 
 
-You can think of `.metadata.json` as a diagram of the overall structure of a decorator's metadata, represented as an [abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree).
+`.metadata.json`은 데코레이터의 메타데이터 전체 구조의 다이어그램으로 생각할 수 있으며, [추상 구문 트리 (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree)로 표현됩니다. 
 
-HELPFUL: Angular's [schema.ts](https://github.com/angular/angular/blob/main/packages/compiler-cli/src/metadata/schema.ts) describes the JSON format as a collection of TypeScript interfaces.
+도움이 됨: Angular의 [schema.ts](https://github.com/angular/angular/blob/main/packages/compiler-cli/src/metadata/schema.ts)는 JSON 형식을 TypeScript 인터페이스 모음으로 설명합니다. 
 
-### Expression syntax limitations
+### 표현 구문 제한 사항 
 
-The AOT collector only understands a subset of JavaScript.
-Define metadata objects with the following limited syntax:
+AOT 수집기는 JavaScript의 하위 집합만 이해합니다.  
+다음 제한된 구문으로 메타데이터 객체를 정의합니다: 
 
-| Syntax                    | Example |
-|:---                       |:---     |
-| Literal object            | `{cherry: true, apple: true, mincemeat: false}`                        |
-| Literal array             | `['cherries', 'flour', 'sugar']`                                       |
-| Spread in literal array   | `['apples', 'flour', …]`                                               |
-| Calls                     | `bake(ingredients)`                                                    |
-| New                       | `new Oven()`                                                           |
-| Property access           | `pie.slice`                                                            |
-| Array index               | `ingredients[0]`                                                       |
-| Identity reference        | `Component`                                                            |
-| A template string         | <code>`pie is ${multiplier} times better than cake`</code> |
-| Literal string            | `'pi'`                                                                 |
-| Literal number            | `3.14153265`                                                           |
-| Literal boolean           | `true`                                                                 |
-| Literal null              | `null`                                                                 |
-| Supported prefix operator | `!cake`                                                                |
-| Supported binary operator | `a+b`                                                                  |
-| Conditional operator      | `a ? b : c`                                                            |
-| Parentheses               | `(a+b)`                                                                |
+| 구문                          | 예      |
+|:---                           |:---     |
+| 리터럴 객체                   | `{cherry: true, apple: true, mincemeat: false}`                        |
+| 리터럴 배열                   | `['cherries', 'flour', 'sugar']`                                       |
+| 리터럴 배열의 전개           | `['apples', 'flour', …]`                                               |
+| 호출                          | `bake(ingredients)`                                                    |
+| 생성                          | `new Oven()`                                                           |
+| 속성 접근                     | `pie.slice`                                                            |
+| 배열 인덱스                   | `ingredients[0]`                                                       |
+| 아이덴티티 참조               | `Component`                                                            |
+| 템플릿 문자열                 | <code>`pie is ${multiplier} times better than cake`</code> |
+| 리터럴 문자열                 | `'pi'`                                                                 |
+| 리터럴 숫자                   | `3.14153265`                                                           |
+| 리터럴 불리언                | `true`                                                                 |
+| 리터럴 null                   | `null`                                                                 |
+| 지원되는 접두사 연산자       | `!cake`                                                                |
+| 지원되는 이진 연산자         | `a+b`                                                                  |
+| 조건부 연산자                 | `a ? b : c`                                                            |
+| 괄호                          | `(a+b)`                                                                |
 
-If an expression uses unsupported syntax, the collector writes an error node to the `.metadata.json` file.
-The compiler later reports the error if it needs that piece of metadata to generate the application code.
+표현식이 지원되지 않는 구문을 사용하는 경우, 수집기는 `.metadata.json` 파일에 오류 노드를 기록합니다.  
+컴파일러는 나중에 애플리케이션 코드를 생성하기 위해 해당 메타데이터 조각이 필요할 경우 오류를 보고합니다. 
 
-HELPFUL: If you want `ngc` to report syntax errors immediately rather than produce a `.metadata.json` file with errors, set the `strictMetadataEmit` option in the TypeScript configuration file.
+도움이 됨: `ngc`가 구문 오류를 즉시 보고하도록 하려면 TypeScript 구성 파일에서 `strictMetadataEmit` 옵션을 설정하세요. 
 
 <docs-code language="json">
 
@@ -134,14 +134,13 @@ HELPFUL: If you want `ngc` to report syntax errors immediately rather than produ
 
 </docs-code>
 
-Angular libraries have this option to ensure that all Angular `.metadata.json` files are clean and it is a best practice to do the same when building your own libraries.
+Angular 라이브러리는 모든 Angular `.metadata.json` 파일이 깨끗한지 확인하는 이 옵션을 가지고 있으며, 자신의 라이브러리를 구축할 때도 동일하게 하는 것이 모범 사례입니다. 
 
-### No arrow functions
+### 화살표 함수 없음 
 
-The AOT compiler does not support [function expressions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/function)
-and [arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), also called *lambda* functions.
+AOT 컴파일러는 [함수 표현식](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/function) 및 [화살표 함수](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)(가끔 *람다* 함수라고도 함)을 지원하지 않습니다. 
 
-Consider the following component decorator:
+다음 구성 요소 데코레이터를 고려하세요: 
 
 <docs-code language="typescript">
 
@@ -152,11 +151,11 @@ Consider the following component decorator:
 
 </docs-code>
 
-The AOT collector does not support the arrow function, `() => new Server()`, in a metadata expression.
-It generates an error node in place of the function.
-When the compiler later interprets this node, it reports an error that invites you to turn the arrow function into an *exported function*.
+AOT 수집기는 메타데이터 표현식에서 화살표 함수 `() => new Server()`를 지원하지 않습니다.  
+대신 함수 위치에 오류 노드를 생성합니다.  
+나중에 컴파일러가 이 노드를 해석하면 화살표 함수를 *내보내는 함수*로 변환하라는 오류를 보고합니다. 
 
-You can fix the error by converting to this:
+다음과 같이 변환하여 오류를 수정할 수 있습니다: 
 
 <docs-code language="typescript">
 
@@ -171,21 +170,21 @@ export function serverFactory() {
 
 </docs-code>
 
-In version 5 and later, the compiler automatically performs this rewriting while emitting the `.js` file.
+버전 5 이상에서는 컴파일러가 `.js` 파일을 발생하는 동안 이 rewriting을 자동으로 수행합니다. 
 
-### Code folding
+### 코드 접기 
 
-The compiler can only resolve references to ***exported*** symbols.
-The collector, however, can evaluate an expression during collection and record the result in the `.metadata.json`, rather than the original expression.
-This allows you to make limited use of non-exported symbols within expressions.
+컴파일러는 ***내보내는*** 기호에 대한 참조만 해결할 수 있습니다.  
+그러나 수집기는 수집 중에 표현식을 평가하고 결과를 원래 표현식 대신 `.metadata.json`에 기록할 수 있습니다.  
+이렇게 하면 표현식 내에서 비내보내 기호를 제한적으로 사용할 수 있습니다. 
 
-For example, the collector can evaluate the expression `1 + 2 + 3 + 4` and replace it with the result, `10`.
-This process is called *folding*.
-An expression that can be reduced in this manner is *foldable*.
+예를 들어, 수집기는 표현식 `1 + 2 + 3 + 4`를 평가하고 그 결과 `10`으로 대체할 수 있습니다.  
+이 과정을 *접기*라고 합니다.  
+이와 같은 방식으로 축소될 수 있는 표현식을 *접을 수 있는* 표현식이라고 합니다. 
 
-The collector can evaluate references to module-local `const` declarations and initialized `var` and `let` declarations, effectively removing them from the `.metadata.json` file.
+수집기는 모듈-로컬 `const` 선언과 초기화된 `var` 및 `let` 선언에 대한 참조를 평가하여 이를 `.metadata.json` 파일에서 효과적으로 제거할 수 있습니다. 
 
-Consider the following component definition:
+다음 구성 요소 정의를 고려하세요: 
 
 <docs-code language="typescript">
 
@@ -201,9 +200,9 @@ export class HeroComponent {
 
 </docs-code>
 
-The compiler could not refer to the `template` constant because it isn't exported.
-The collector, however, can fold the `template` constant into the metadata definition by in-lining its contents.
-The effect is the same as if you had written:
+컴파일러는 `template` 상수를 참조할 수 없습니다. 이는 내보내지 않기 때문입니다.  
+그러나 수집기는 `template` 상수를 인라인하여 메타데이터 정의에 접을 수 있습니다.  
+이렇게 하면 다음과 같이 작성하는 것과 동일한 효과가 있습니다: 
 
 <docs-code language="typescript">
 
@@ -217,9 +216,9 @@ export class HeroComponent {
 
 </docs-code>
 
-There is no longer a reference to `template` and, therefore, nothing to trouble the compiler when it later interprets the *collector's* output in `.metadata.json`.
+이제 `template`에 대한 참조가 더 이상 없으며 따라서 나중에 컴파일러가 `.metadata.json`에서 *수집기*의 출력을 해석할 때 문제가 발생하지 않습니다. 
 
-You can take this example a step further by including the `template` constant in another expression:
+다음과 같이 `template` 상수를 다른 표현식에 포함시켜 이 예제를 한 단계 더 나아가게 할 수 있습니다: 
 
 <docs-code language="typescript">
 
@@ -235,7 +234,7 @@ export class HeroComponent {
 
 </docs-code>
 
-The collector reduces this expression to its equivalent *folded* string:
+수집기는 이 표현식을 그것과 동등한 *접힌* 문자열로 줄여줍니다: 
 
 <docs-code language="typescript">
 
@@ -243,69 +242,69 @@ The collector reduces this expression to its equivalent *folded* string:
 
 </docs-code>
 
-#### Foldable syntax
+#### 접을 수 있는 구문 
 
-The following table describes which expressions the collector can and cannot fold:
+다음 표는 수집기가 접을 수 있는 표현식과 접을 수 없는 표현식을 설명합니다: 
 
-| Syntax                           | Foldable |
-|:---                              |:---      |
-| Literal object                   | yes                                      |
-| Literal array                    | yes                                      |
-| Spread in literal array          | no                                       |
-| Calls                            | no                                       |
-| New                              | no                                       |
-| Property access                  | yes, if target is foldable               |
-| Array index                      | yes, if target and index are foldable    |
-| Identity reference               | yes, if it is a reference to a local     |
-| A template with no substitutions | yes                                      |
-| A template with substitutions    | yes, if the substitutions are foldable   |
-| Literal string                   | yes                                      |
-| Literal number                   | yes                                      |
-| Literal boolean                  | yes                                      |
-| Literal null                     | yes                                      |
-| Supported prefix operator        | yes, if operand is foldable              |
-| Supported binary operator        | yes, if both left and right are foldable |
-| Conditional operator             | yes, if condition is foldable            |
-| Parentheses                      | yes, if the expression is foldable       |
+| 구문                             | 접을 수 있음 |
+|:---                             |:---          |
+| 리터럴 객체                      | 예                         |
+| 리터럴 배열                      | 예                         |
+| 리터럴 배열의 전개              | 아니요                      |
+| 호출                             | 아니요                      |
+| 생성                             | 아니요                      |
+| 속성 접근                        | 예, 대상이 접을 수 있는 경우  |
+| 배열 인덱스                     | 예, 대상과 인덱스가 접을 수 있는 경우 |
+| 아이덴티티 참조                 | 예, 로컬 참조인 경우       |
+| 대체가 없는 템플릿              | 예                         |
+| 대체가 있는 템플릿              | 예, 대체가 접을 수 있는 경우  |
+| 리터럴 문자열                   | 예                         |
+| 리터럴 숫자                     | 예                         |
+| 리터럴 불리언                   | 예                         |
+| 리터럴 null                      | 예                         |
+| 지원되는 접두사 연산자          | 예, 피연산자가 접을 수 있는 경우 |
+| 지원되는 이진 연산자            | 예, 왼쪽과 오른쪽이 모두 접을 수 있는 경우 |
+| 조건부 연산자                   | 예, 조건이 접을 수 있는 경우   |
+| 괄호                            | 예, 표현식이 접을 수 있는 경우 |
 
-If an expression is not foldable, the collector writes it to `.metadata.json` as an [AST](https://en.wikipedia.org/wiki/Abstract*syntax*tree) for the compiler to resolve.
+표현식이 접을 수 없는 경우, 수집기는 이를 `.metadata.json` 파일에 저장하여 컴파일러가 해결할 수 있도록 [AST](https://en.wikipedia.org/wiki/Abstract*syntax*tree)로 남깁니다. 
 
-## Phase 2: code generation
+## 2단계: 코드 생성 
 
-The collector makes no attempt to understand the metadata that it collects and outputs to `.metadata.json`.
-It represents the metadata as best it can and records errors when it detects a metadata syntax violation.
-It's the compiler's job to interpret the `.metadata.json` in the code generation phase.
+수집기는 수집하는 메타데이터를 해석하기 위한 시도를 하지 않으며, 이를 `.metadata.json`에 출력합니다.  
+수집기는 메타데이터를 가능한 한 잘 표현하고 메타데이터 구문 위반을 감지하면 오류를 기록합니다.  
+코드 생성 단계에서 `.metadata.json`을 해석하는 것은 컴파일러의 작업입니다. 
 
-The compiler understands all syntax forms that the collector supports, but it may reject *syntactically* correct metadata if the *semantics* violate compiler rules.
+컴파일러는 수집기가 지원하는 모든 구문 형태를 이해하지만, 수집기의 *의미*가 컴파일러 규칙을 위반할 경우 *문법적으로* 올바른 메타데이터를 거부할 수 있습니다. 
 
-### Public or protected symbols
+### 공개 또는 보호된 기호 
 
-The compiler can only reference *exported symbols*.
+컴파일러는 *내보내는 기호*만 참조할 수 있습니다. 
 
-* Decorated component class members must be public or protected.
-    You cannot make an `@Input()` property private.
+* 장식된 구성 요소 클래스 멤버는 public 또는 protected여야 합니다.  
+  `@Input()` 속성을 private으로 만들 수 없습니다. 
 
-* Data bound properties must also be public or protected
+* 데이터 바인딩된 속성도 public 또는 protected 여야 합니다. 
 
-### Supported classes and functions
+### 지원되는 클래스 및 함수 
 
-The collector can represent a function call or object creation with `new` as long as the syntax is valid.
-The compiler, however, can later refuse to generate a call to a *particular* function or creation of a *particular* object.
+수집기는 유효한 구문인 한 함수 호출 또는 `new`로 객체 생성을 나타낼 수 있습니다.  
+그러나 컴파일러는 나중에 *특정* 함수에 대한 호출이나 *특정* 객체 생성을 생성하는 것을 거부할 수 있습니다. 
 
-The compiler can only create instances of certain classes, supports only core decorators, and only supports calls to macros \(functions or static methods\) that return expressions.
+컴파일러는 특정 클래스의 인스턴스만 생성할 수 있으며 핵심 데코레이터만 지원하며, 표현식을 반환하는 매크로 \(함수 또는 정적 메서드\)에 대한 호출만 지원합니다. 
 
-| Compiler action      | Details |
-|:---                  |:---     |
-| New instances        | The compiler only allows metadata that create instances of the class `InjectionToken` from `@angular/core`.                                            |
-| Supported decorators | The compiler only supports metadata for the [Angular decorators in the `@angular/core` module](api/core#decorators).                                   |
-| Function calls       | Factory functions must be exported, named functions. The AOT compiler does not support lambda expressions \("arrow functions"\) for factory functions. |
+| 컴파일러 작업       | 세부사항 |
+|:---                |:---     |
+| 새 인스턴스        | 컴파일러는 `@angular/core`에서 `InjectionToken` 클래스의 인스턴스를 생성하는 메타데이터만 허용합니다.                                            |
+| 지원되는 데코레이터 | 컴파일러는 [Angular 데코레이터를 위한 메타데이터만 지원합니다](api/core#decorators).                                   |
+| 함수 호출          | 팩토리 함수는 내보내는, 이름이 있는 함수여야 합니다. AOT 컴파일러는 팩토리 함수에 화살표 표현식 \(“람다 함수”\)를 지원하지 않습니다. |
 
-### Functions and static method calls
+### 함수 및 정적 메서드 호출 
 
-The collector accepts any function or static method that contains a single `return` statement.
-The compiler, however, only supports macros in the form of functions or static methods that return an *expression*.
+수집기는 단일 `return` 문을 포함하는 모든 함수 또는 정적 메서드를 수락합니다.  
+그러나 컴파일러는 *표현식*을 반환하는 함수 또는 정적 메서드 형태의 매크로만 지원합니다. 
 
-For example, consider the following function:
+다음 함수 예를 고려하세요: 
 
 <docs-code language="typescript">
 
@@ -315,9 +314,9 @@ export function wrapInArray<T>(value: T): T[] {
 
 </docs-code>
 
-You can call the `wrapInArray` in a metadata definition because it returns the value of an expression that conforms to the compiler's restrictive JavaScript subset.
+다음과 같은 메타데이터 정의에서 `wrapInArray`를 호출할 수 있습니다. 이는 컴파일러의 제한적인 JavaScript 하위 집합을 준수하는 표현식의 값을 반환합니다. 
 
-You might use  `wrapInArray()` like this:
+다음과 같은 방식으로 `wrapInArray()`를 사용할 수 있습니다: 
 
 <docs-code language="typescript">
 
@@ -328,7 +327,7 @@ export class TypicalModule {}
 
 </docs-code>
 
-The compiler treats this usage as if you had written:
+컴파일러는 이 사용을 당신이 다음과 같이 작성한 것과 동일하게 처리합니다: 
 
 <docs-code language="typescript">
 
@@ -339,17 +338,16 @@ export class TypicalModule {}
 
 </docs-code>
 
-The Angular [`RouterModule`](api/router/RouterModule) exports two macro static methods, `forRoot` and `forChild`, to help declare root and child routes.
-Review the [source code](https://github.com/angular/angular/blob/main/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code")
-for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodules).
+Angular [`RouterModule`](api/router/RouterModule)는 루트 및 자식 경로를 선언하는 데 도움을 주기 위해 두 개의 매크로 정적 메서드인 `forRoot`와 `forChild`를 내보냅니다.  
+복잡한 [NgModules](guide/ngmodules) 구성을 단순화할 수 있는 방법을 보려면 [소스 코드](https://github.com/angular/angular/blob/main/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code")를 확인하세요. 
 
-### Metadata rewriting
+### 메타데이터 재작성 
 
-The compiler treats object literals containing the fields `useClass`, `useValue`, `useFactory`, and `data` specially, converting the expression initializing one of these fields into an exported variable that replaces the expression.
-This process of rewriting these expressions removes all the restrictions on what can be in them because
-the compiler doesn't need to know the expression's value — it just needs to be able to generate a reference to the value.
+컴파일러는 `useClass`, `useValue`, `useFactory`, 및 `data` 필드를 포함하는 객체 리터럴을 특별하게 처리하며, 이러한 필드 중 하나를 초기화하는 표현식을 내보내는 변수로 변환합니다.  
+이러한 표현식을 재작성하는 과정에서 필드 내에서 포함될 수 있는 것에 대한 모든 제약이 제거됩니다. 
+컴파일러는 표현식의 값을 알 필요는 없으며 단지 해당 값에 대한 참조를 생성할 수 있어야 합니다. 
 
-You might write something like:
+다음과 같은 방식으로 작성할 수 있습니다: 
 
 <docs-code language="typescript">
 
@@ -364,8 +362,8 @@ export class TypicalModule {}
 
 </docs-code>
 
-Without rewriting, this would be invalid because lambdas are not supported and `TypicalServer` is not exported.
-To allow this, the compiler automatically rewrites this to something like:
+재작성 없이 이것은 유효하지 않으며, 람다를 지원하지 않고 `TypicalServer`가 내보내지 않기 때문입니다.  
+이를 허용하기 위해 컴파일러는 이를 다음과 같은 형식으로 자동으로 재작성합니다: 
 
 <docs-code language="typescript">
 
@@ -382,25 +380,24 @@ export class TypicalModule {}
 
 </docs-code>
 
-This allows the compiler to generate a reference to `θ0` in the factory without having to know what the value of `θ0` contains.
+이렇게 하면 컴파일러가 `θ0`의 값을 알 필요 없이 팩토리의 `θ0`에 대한 참조를 생성할 수 있습니다. 
 
-The compiler does the rewriting during the emit of the `.js` file.
-It does not, however, rewrite the `.d.ts` file, so TypeScript doesn't recognize it as being an export.
-And it does not interfere with the ES module's exported API.
+컴파일러는 `.js` 파일을 내보낼 때 재작업을 수행합니다.  
+그러나 `.d.ts` 파일은 재작성하지 않으므로 TypeScript는 이를 내보내기(export)로 인식하지 않습니다.  
+또한 ES 모듈의 내보낸 API에는 영향을 미치지 않습니다. 
 
-## Phase 3: Template type checking
+## 3단계: 템플릿 타입 검사 
 
-One of the Angular compiler's most helpful features is the ability to type-check expressions within templates, and catch any errors before they cause crashes at runtime.
-In the template type-checking phase, the Angular template compiler uses the TypeScript compiler to validate the binding expressions in templates.
+Angular 컴파일러의 가장 유용한 기능 중 하나는 템플릿 내에서 표현식의 유형을 검사하고, 이러한 잘못된 사용이 런타임에 충돌을 일으키기 전에 잡는 것입니다.  
+템플릿 타입 검사 단계에서 Angular 템플릿 컴파일러는 TypeScript 컴파일러를 사용하여 템플릿의 바인딩 표현식을 검증합니다. 
 
-Enable this phase explicitly by adding the compiler option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's TypeScript configuration file
-(see [Angular Compiler Options](reference/configs/angular-compiler-options)).
+프로젝트의 TypeScript 구성 파일의 `"angularCompilerOptions"`에 `"fullTemplateTypeCheck"` 컴파일러 옵션을 추가하여 이 단계를 명시적으로 활성화하세요.  
+(자세한 정보는 [Angular 컴파일러 옵션](reference/configs/angular-compiler-options)을 참조하세요). 
 
-Template validation produces error messages when a type error is detected in a template binding
-expression, similar to how type errors are reported by the TypeScript compiler against code in a `.ts`
-file.
+템플릿 검증은 템플릿 바인딩 표현식에서 타입 오류가 감지될 때 오류 메시지를 생성합니다.  
+이러한 오류 메시지는 `.ts` 파일의 코드에 대해 TypeScript 컴파일러가 오류를 보고하는 방식과 유사합니다. 
 
-For example, consider the following component:
+예를 들어, 다음 구성 요소를 고려하세요: 
 
 <docs-code language="typescript">
 
@@ -414,7 +411,7 @@ class MyComponent {
 
 </docs-code>
 
-This produces the following error:
+이것은 다음과 같은 오류를 생성합니다: 
 
 <docs-code hideCopy language="shell">
 
@@ -422,18 +419,16 @@ my.component.ts.MyComponent.html(1,1): : Property 'addresss' does not exist on t
 
 </docs-code>
 
-The file name reported in the error message, `my.component.ts.MyComponent.html`, is a synthetic file
-generated by the template compiler that holds contents of the `MyComponent` class template.
-The compiler never writes this file to disk.
-The line and column numbers are relative to the template string in the `@Component` annotation of the class, `MyComponent` in this case.
-If a component uses `templateUrl` instead of `template`, the errors are reported in the HTML file referenced by the `templateUrl` instead of a synthetic file.
+오류 메시지에 보고된 파일 이름인 `my.component.ts.MyComponent.html`은 템플릿 컴파일러에 의해 생성된 합성 파일로서, `MyComponent` 클래스 템플릿의 내용을 포함합니다.  
+컴파일러는 이 파일을 디스크에 작성하지 않습니다.  
+줄 및 열 번호는 이 경우 `MyComponent` 클래스의 `@Component` 주석에서 템플릿 문자열에 상대적입니다.  
+구성 요소가 `template` 대신 `templateUrl`을 사용하는 경우 오류는 합성 파일 대신 `templateUrl`로 참조된 HTML 파일에서 보고됩니다. 
 
-The error location is the beginning of the text node that contains the interpolation expression with the error.
-If the error is in an attribute binding such as `[value]="person.address.street"`, the error
-location is the location of the attribute that contains the error.
+오류 위치는 오류가 포함된 보간 표현식이 있는 텍스트 노드의 시작입니다.  
+`[value]="person.address.street"`와 같은 속성 바인딩에 오류가 있는 경우, 오류 위치는 오류가 포함된 속성의 위치입니다. 
 
-The validation uses the TypeScript type checker and the options supplied to the TypeScript compiler to control how detailed the type validation is.
-For example, if the `strictTypeChecks` is specified, the error
+유효성 검사는 TypeScript 타입 검사기와 TypeScript 컴파일러에 제공된 옵션을 사용하여 타입 검사의 세부 사항을 제어합니다.  
+예를 들어, `strictTypeChecks`가 지정되면 다음 오류가 보고됩니다. 
 
 <docs-code hideCopy language="shell">
 
@@ -441,13 +436,10 @@ my.component.ts.MyComponent.html(1,1): : Object is possibly 'undefined'
 
 </docs-code>
 
-is reported as well as the above error message.
+### 타입 축소 
 
-### Type narrowing
-
-The expression used in an `ngIf` directive is used to narrow type unions in the Angular
-template compiler, the same way the `if` expression does in TypeScript.
-For example, to avoid `Object is possibly 'undefined'` error in the template above, modify it to only emit the interpolation if the value of `person` is initialized as shown below:
+`ngIf` 지시문에 사용된 표현식은 Angular 템플릿 컴파일러 내에서 타입 유니온을 축소하는 데 사용되며, 이는 TypeScript에서 `if` 표현식이 작동하는 방식과 동일합니다.  
+예를 들어, 위 템플릿에서 `Object is possibly 'undefined'` 오류를 피하려면 `person`의 값이 초기화되어 있을 때만 보간을 발생시키도록 수정합니다: 
 
 <docs-code language="typescript">
 
@@ -461,16 +453,16 @@ class MyComponent {
 
 </docs-code>
 
-Using `*ngIf` allows the TypeScript compiler to infer that the `person` used in the binding expression will never be `undefined`.
+`*ngIf`를 사용하면 TypeScript 컴파일러는 바인딩 표현식에서 사용된 `person`이 절대 `undefined`가 아님을 유추할 수 있습니다. 
 
-For more information about input type narrowing, see [Improving template type checking for custom directives](guide/directives/structural-directives#directive-type-checks).
+입력 타입 축소에 대한 자세한 내용은 [커스텀 지시문에 대한 템플릿 타입 검사 개선](guide/directives/structural-directives#directive-type-checks)을 참조하세요. 
 
-### Non-null type assertion operator
+### 널이 아님 타입 단언 연산자 
 
-Use the non-null type assertion operator to suppress the `Object is possibly 'undefined'` error when it is inconvenient to use `*ngIf` or when some constraint in the component ensures that the expression is always non-null when the binding expression is interpolated.
+`*ngIf`를 사용하는 것이 불편할 때나 컴포넌트에서 일부 제약 조건이 표현식이 바인딩 표현식이 있는 동안 항상 널이 아님을 보장할 때 `Object is possibly 'undefined'` 오류를 억제하기 위해 널이 아님 타입 단언 연산자를 사용하세요. 
 
-In the following example, the `person` and `address` properties are always set together, implying that `address` is always non-null if `person` is non-null.
-There is no convenient way to describe this constraint to TypeScript and the template compiler, but the error is suppressed in the example by using `address!.street`.
+다음 예에서 `person`과 `address` 속성은 항상 함께 설정되므로 `person`이 널이 아닐 경우 `address`도 항상 널이 아님을 암시합니다.  
+이 제약 조건을 TypeScript와 템플릿 컴파일러에 편리하게 설명할 수는 없지만, 예에서는 `address!.street`를 사용하여 오류를 억제하고 있습니다: 
 
 <docs-code language="typescript">
 
@@ -490,15 +482,15 @@ class MyComponent {
 
 </docs-code>
 
-The non-null assertion operator should be used sparingly as refactoring of the component might break this constraint.
+널이 아님 어설션 연산자는 신중하게 사용해야 합니다. 컴포넌트를 리팩토링하면 이 제약 조건이 문제가 될 수 있습니다. 
 
-In this example it is recommended to include the checking of `address` in the `*ngIf` as shown below:
+이 예제에서는 `*ngIf` 안에 `address`를 추가로 확인하는 것이 좋습니다: 
 
 <docs-code language="typescript">
 
 @Component({
   selector: 'my-component',
-  template: '<span *ngIf="person &amp;&amp; address"> {{person.name}} lives on {{address.street}} </span>'
+  template: '<span *ngIf="person && address"> {{person.name}} lives on {{address.street}} </span>'
 })
 class MyComponent {
   person?: Person;
@@ -510,4 +502,4 @@ class MyComponent {
   }
 }
 
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/aot-metadata-errors.md b/adev/src/content/tools/cli/aot-metadata-errors.md
index 3d9e31a96da6..2f43cf1486b5 100644
--- a/adev/src/content/tools/cli/aot-metadata-errors.md
+++ b/adev/src/content/tools/cli/aot-metadata-errors.md
@@ -1,44 +1,41 @@
-# AOT metadata errors
+# AOT 메타데이터 오류
 
-The following are metadata errors you may encounter, with explanations and suggested corrections.
+다음은 발생할 수 있는 메타데이터 오류와 그 설명, 수정 제안입니다.
 
-## Expression form not supported
+## 지원되지 않는 표현 형식
 
-HELPFUL: The compiler encountered an expression it didn't understand while evaluating Angular metadata.
+유용함: 컴파일러가 Angular 메타데이터를 평가하는 동안 이해할 수 없는 표현을 만났습니다.
 
-Language features outside of the compiler's [restricted expression syntax](tools/cli/aot-compiler#expression-syntax)
-can produce this error, as seen in the following example:
+컴파일러의 [제한된 표현 구문](tools/cli/aot-compiler#expression-syntax) 외부의 언어 기능이 이 오류를 발생시킬 수 있으며, 다음 예에서 볼 수 있습니다:
 
 <docs-code language="typescript">
-// ERROR
+// 오류
 export class Fooish { … }
 …
-const prop = typeof Fooish; // typeof is not valid in metadata
+const prop = typeof Fooish; // typeof는 메타데이터에서 유효하지 않음
   …
-  // bracket notation is not valid in metadata
+  // 대괄호 표기법은 메타데이터에서 유효하지 않음
   { provide: 'token', useValue: { [prop]: 'value' } };
   …
 </docs-code>
 
-You can use `typeof` and bracket notation in normal application code.
-You just can't use those features within expressions that define Angular metadata.
+정상적인 애플리케이션 코드에서는 `typeof`와 대괄호 표기법을 사용할 수 있습니다.
+하지만 Angular 메타데이터를 정의하는 표현 내에서는 이러한 기능을 사용할 수 없습니다.
 
-Avoid this error by sticking to the compiler's [restricted expression syntax](tools/cli/aot-compiler#expression-syntax)
-when writing Angular metadata
-and be wary of new or unusual TypeScript features.
+Angular 메타데이터를 작성할 때 컴파일러의 [제한된 표현 구문](tools/cli/aot-compiler#expression-syntax)을 고수하여 이 오류를 피하고, 새로운 또는 특이한 TypeScript 기능에 주의하세요.
 
-## Reference to a local (non-exported) symbol
+## 로컬(비수출) 심볼에 대한 참조
 
-HELPFUL: Reference to a local \(non-exported\) symbol 'symbol name'. Consider exporting the symbol.
+유용함: 로컬(비수출) 심볼 'symbol name'에 대한 참조. 심볼을 수출하는 것을 고려하십시오.
 
-The compiler encountered a reference to a locally defined symbol that either wasn't exported or wasn't initialized.
+컴파일러가 수출되지 않거나 초기화되지 않은 로컬로 정의된 심볼에 대한 참조를 만났습니다.
 
-Here's a `provider` example of the problem.
+문제의 `provider` 예는 다음과 같습니다.
 
 <docs-code language="typescript">
 
-// ERROR
-let foo: number; // neither exported nor initialized
+// 오류
+let foo: number; // 수출되지도 초기화되지도 않음
 
 @Component({
   selector: 'my-component',
@@ -51,15 +48,15 @@ export class MyComponent {}
 
 </docs-code>
 
-The compiler generates the component factory, which includes the `useValue` provider code, in a separate module. *That* factory module can't reach back to *this* source module to access the local \(non-exported\) `foo` variable.
+컴파일러는 `useValue` 제공자 코드를 포함한 구성 요소 팩토리를 별도의 모듈에서 생성합니다. *그* 팩토리 모듈은 로컬(비수출) `foo` 변수를 접근하기 위해 *이* 소스 모듈로 다시 돌아갈 수 없습니다.
 
-You could fix the problem by initializing `foo`.
+문제를 해결하려면 `foo`를 초기화하면 됩니다.
 
 <docs-code language="typescript">
-let foo = 42; // initialized
+let foo = 42; // 초기화됨
 </docs-code>
 
-The compiler will [fold](tools/cli/aot-compiler#code-folding) the expression into the provider as if you had written this.
+컴파일러는 표현을 제공자에 [접기](tools/cli/aot-compiler#code-folding)하여 마치 다음과 같이 작성한 것처럼 처리합니다.
 
 <docs-code language="typescript">
 providers: [
@@ -67,11 +64,11 @@ providers: [
 ]
 </docs-code>
 
-Alternatively, you can fix it by exporting `foo` with the expectation that `foo` will be assigned at runtime when you actually know its value.
+또는 `foo`를 수출하여 런타임에서 `foo`가 실제 값을 알 때 할당될 것이라고 기대하여 문제를 해결할 수 있습니다.
 
 <docs-code language="typescript">
-// CORRECTED
-export let foo: number; // exported
+// 수정됨
+export let foo: number; // 수출됨
 
 @Component({
   selector: 'my-component',
@@ -83,16 +80,15 @@ export let foo: number; // exported
 export class MyComponent {}
 </docs-code>
 
-Adding `export` often works for variables referenced in metadata such as `providers` and `animations` because the compiler can generate *references* to the exported variables in these expressions. It doesn't need the *values* of those variables.
+`export`를 추가하면 종종 `providers` 및 `animations`와 같은 메타데이터에 참조된 변수에 대해 작동합니다. 이는 컴파일러가 이러한 표현에서 수출된 변수에 대한 *참조*를 생성할 수 있기 때문입니다. 변수의 *값*이 필요하지 않습니다.
 
-Adding `export` doesn't work when the compiler needs the *actual value*
-in order to generate code.
-For example, it doesn't work for the `template` property.
+하지만 컴파일러가 코드를 생성하기 위해 *실제 값*이 필요할 경우 `export` 추가는 효과가 없습니다.
+예를 들어, `template` 속성에는 효과가 없습니다.
 
 <docs-code language="typescript">
 
-// ERROR
-export let someTemplate: string; // exported but not initialized
+// 오류
+export let someTemplate: string; // 수출되었지만 초기화되지 않음
 
 @Component({
   selector: 'my-component',
@@ -102,22 +98,22 @@ export class MyComponent {}
 
 </docs-code>
 
-The compiler needs the value of the `template` property *right now* to generate the component factory.
-The variable reference alone is insufficient.
-Prefixing the declaration with `export` merely produces a new error, "[`Only initialized variables and constants can be referenced`](#only-initialized-variables)".
+컴파일러는 구성 요소 팩토리를 생성하기 위해 현재 `template` 속성의 값을 필요로 합니다.
+변수 참조만으로는 충분하지 않습니다.
+선언 앞에 `export`를 접두어로 추가하면 새 오류 "[`Only initialized variables and constants can be referenced`](#only-initialized-variables)"가 발생합니다.
 
-## Only initialized variables and constants
+## 초기화된 변수 및 상수만 참조 가능
 
-HELPFUL: *Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler.*
+유용함: *초기화된 변수와 상수만 참조할 수 있습니다. 템플릿 컴파일러에서 이 변수의 값이 필요하기 때문입니다.*
 
-The compiler found a reference to an exported variable or static field that wasn't initialized.
-It needs the value of that variable to generate code.
+컴파일러가 초기화되지 않은 수출된 변수 또는 정적 필드에 대한 참조를 발견했습니다.
+코드를 생성하기 위해 해당 변수의 값이 필요합니다.
 
-The following example tries to set the component's `template` property to the value of the exported `someTemplate` variable which is declared but *unassigned*.
+다음 예제는 구성 요소의 `template` 속성을 수출된 `someTemplate` 변수의 값으로 설정하려고 시도하지만, 그 변수는 선언되었으나 *할당되지 않았습니다*.
 
 <docs-code language="typescript">
 
-// ERROR
+// 오류
 export let someTemplate: string;
 
 @Component({
@@ -128,11 +124,11 @@ export class MyComponent {}
 
 </docs-code>
 
-You'd also get this error if you imported `someTemplate` from some other module and neglected to initialize it there.
+다른 모듈에서 `someTemplate`를 가져오고 거기에서 초기화하지 않으면 이 오류가 발생합니다.
 
 <docs-code language="typescript">
 
-// ERROR - not initialized there either
+// 오류 - 거기서도 초기화되지 않음
 import { someTemplate } from './config';
 
 @Component({
@@ -143,15 +139,15 @@ export class MyComponent {}
 
 </docs-code>
 
-The compiler cannot wait until runtime to get the template information.
-It must statically derive the value of the `someTemplate` variable from the source code so that it can generate the component factory, which includes instructions for building the element based on the template.
+컴파일러는 템플릿 정보를 런타임까지 기다릴 수 없습니다.
+소스 코드에서 `someTemplate` 변수의 값을 정적으로 유도해야 컴포넌트 팩토리를 생성할 수 있으며, 여기에는 템플릿 기반 요소를 빌드하기 위한 지침이 포함됩니다.
 
-To correct this error, provide the initial value of the variable in an initializer clause *on the same line*.
+이 오류를 수정하려면 초기화 구문에서 변수를 같은 줄에 초기값을 제공하십시오.
 
 <docs-code language="typescript">
 
-// CORRECTED
-export let someTemplate = '<h1>Greetings from Angular</h1>';
+// 수정됨
+export let someTemplate = '<h1>Angular로부터 인사드립니다</h1>';
 
 @Component({
   selector: 'my-component',
@@ -161,18 +157,18 @@ export class MyComponent {}
 
 </docs-code>
 
-## Reference to a non-exported class
+## 비수출 클래스에 대한 참조
 
-HELPFUL: *Reference to a non-exported class `<class name>`.*
-*Consider exporting the class.*
+유용함: *비수출 클래스 `<class name>`에 대한 참조.*
+*클래스를 수출하는 것을 고려하십시오.*
 
-Metadata referenced a class that wasn't exported.
+메타데이터가 수출되지 않은 클래스를 참조했습니다.
 
-For example, you may have defined a class and used it as an injection token in a providers array but neglected to export that class.
+예를 들어, 클래스를 정의하고 제공자 배열에서 주입 토큰으로 사용했지만 해당 클래스를 수출하는 것을 잊었을 수 있습니다.
 
 <docs-code language="typescript">
 
-// ERROR
+// 오류
 abstract class MyStrategy { }
 
   …
@@ -183,12 +179,12 @@ abstract class MyStrategy { }
 
 </docs-code>
 
-Angular generates a class factory in a separate module and that factory [can only access exported classes](tools/cli/aot-compiler#exported-symbols).
-To correct this error, export the referenced class.
+Angular는 별도의 모듈에서 클래스 팩토리를 생성하며, 해당 팩토리는 [수출된 클래스에만 접근할 수 있습니다](tools/cli/aot-compiler#exported-symbols).
+이 오류를 수정하려면 참조된 클래스를 수출하십시오.
 
 <docs-code language="typescript">
 
-// CORRECTED
+// 수정됨
 export abstract class MyStrategy { }
 
   …
@@ -199,15 +195,15 @@ export abstract class MyStrategy { }
 
 </docs-code>
 
-## Reference to a non-exported function
+## 비수출 함수에 대한 참조
 
-HELPFUL: *Metadata referenced a function that wasn't exported.*
+유용함: *메타데이터가 수출되지 않은 함수를 참조했습니다.*
 
-For example, you may have set a providers `useFactory` property to a locally defined function that you neglected to export.
+예를 들어, 제공자 `useFactory` 속성을 수출하지 않은 로컬로 정의된 함수에 설정했을 수 있습니다.
 
 <docs-code language="typescript">
 
-// ERROR
+// 오류
 function myStrategy() { … }
 
   …
@@ -218,12 +214,12 @@ function myStrategy() { … }
 
 </docs-code>
 
-Angular generates a class factory in a separate module and that factory [can only access exported functions](tools/cli/aot-compiler#exported-symbols).
-To correct this error, export the function.
+Angular는 별도의 모듈에서 클래스 팩토리를 생성하며, 해당 팩토리는 [수출된 함수에만 접근할 수 있습니다](tools/cli/aot-compiler#exported-symbols).
+이 오류를 수정하려면 함수를 수출하십시오.
 
 <docs-code language="typescript">
 
-// CORRECTED
+// 수정됨
 export function myStrategy() { … }
 
   …
@@ -234,16 +230,16 @@ export function myStrategy() { … }
 
 </docs-code>
 
-## Function calls are not supported
+## 함수 호출은 지원되지 않음
 
-HELPFUL: *Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function.*
+유용함: *함수 호출은 지원되지 않습니다. 수출된 함수에 대한 참조로 함수를 또는 람다를 대체하는 것을 고려하십시오.*
 
-The compiler does not currently support [function expressions or lambda functions](tools/cli/aot-compiler#function-expression).
-For example, you cannot set a provider's `useFactory` to an anonymous function or arrow function like this.
+현재 컴파일러는 [함수 표현식 또는 람다 함수](tools/cli/aot-compiler#function-expression)를 지원하지 않습니다.
+예를 들어, 익명 함수나 화살표 함수를 다음과 같이 제공자의 `useFactory`로 설정할 수 없습니다.
 
 <docs-code language="typescript">
 
-// ERROR
+// 오류
   …
   providers: [
     { provide: MyStrategy, useFactory: function() { … } },
@@ -253,11 +249,11 @@ For example, you cannot set a provider's `useFactory` to an anonymous function o
 
 </docs-code>
 
-You also get this error if you call a function or method in a provider's `useValue`.
+제공자의 `useValue`에서 함수나 메서드를 호출하면 이 오류가 발생합니다.
 
 <docs-code language="typescript">
 
-// ERROR
+// 오류
 import { calculateValue } from './utilities';
 
   …
@@ -268,11 +264,11 @@ import { calculateValue } from './utilities';
 
 </docs-code>
 
-To correct this error, export a function from the module and refer to the function in a `useFactory` provider instead.
+이 오류를 수정하려면 모듈에서 함수를 수출하고 대신 `useFactory` 제공자에서 그 함수를 참조하십시오.
 
 <docs-code language="typescript">
 
-// CORRECTED
+// 수정됨
 import { calculateValue } from './utilities';
 
 export function myStrategy() { … }
@@ -290,20 +286,20 @@ export function someValueFactory() {
 
 </docs-code>
 
-## Destructured variable or constant not supported
+## 구조 분해된 변수 또는 상수는 지원되지 않음
 
-HELPFUL: *Referencing an exported destructured variable or constant is not supported by the template compiler. Consider simplifying this to avoid destructuring.*
+유용함: *수출된 구조 분해된 변수 또는 상수를 참조하는 것은 템플릿 컴파일러에서 지원되지 않습니다. 구조 분해를 피하기 위해 이를 단순화하는 것을 고려하십시오.*
 
-The compiler does not support references to variables assigned by [destructuring](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring).
+컴파일러는 [구조 분해](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring)로 할당된 변수에 대한 참조를 지원하지 않습니다.
 
-For example, you cannot write something like this:
+예를 들어, 다음과 같이 쓸 수는 없습니다:
 
 <docs-code language="typescript">
 
-// ERROR
+// 오류
 import { configuration } from './configuration';
 
-// destructured assignment to foo and bar
+// foo와 bar에 대한 구조 분해 할당
 const {foo, bar} = configuration;
   …
   providers: [
@@ -314,11 +310,11 @@ const {foo, bar} = configuration;
 
 </docs-code>
 
-To correct this error, refer to non-destructured values.
+이 오류를 수정하려면 비구조 분해된 값을 참조하십시오.
 
 <docs-code language="typescript">
 
-// CORRECTED
+// 수정됨
 import { configuration } from './configuration';
   …
   providers: [
@@ -329,18 +325,18 @@ import { configuration } from './configuration';
 
 </docs-code>
 
-## Could not resolve type
+## 유형을 해결할 수 없음
 
-HELPFUL: *The compiler encountered a type and can't determine which module exports that type.*
+유용함: *컴파일러가 유형을 발견하고 해당 유형을 내보내는 모듈을 결정할 수 없습니다.*
 
-This can happen if you refer to an ambient type.
-For example, the `Window` type is an ambient type declared in the global `.d.ts` file.
+이러한 문제는 환경 유형을 참조하는 경우 발생할 수 있습니다.
+예를 들어, `Window` 유형은 전역 `.d.ts` 파일에 선언된 환경 유형입니다.
 
-You'll get an error if you reference it in the component constructor, which the compiler must statically analyze.
+구성 요소 생성자에서 이를 참조하면 오류가 발생합니다. 컴파일러는 이를 정적으로 분석해야 합니다.
 
 <docs-code language="typescript">
 
-// ERROR
+// 오류
 @Component({ })
 export class MyComponent {
   constructor (private win: Window) { … }
@@ -348,26 +344,26 @@ export class MyComponent {
 
 </docs-code>
 
-TypeScript understands ambient types so you don't import them.
-The Angular compiler does not understand a type that you neglect to export or import.
+TypeScript는 환경 유형을 이해하므로 이를 가져오지 않습니다.
+Angular 컴파일러는 수출되거나 가져와야 할 유형을 이해하지 못합니다.
 
-In this case, the compiler doesn't understand how to inject something with the `Window` token.
+이 경우 컴파일러는 `Window` 토큰으로 무언가를 주입하는 방법을 이해하지 못합니다.
 
-Do not refer to ambient types in metadata expressions.
+메타데이터 표현에서 환경 유형을 참조하지 마십시오.
 
-If you must inject an instance of an ambient type,
-you can finesse the problem in four steps:
+환경 유형의 인스턴스를 주입해야 한다면,
+다음 4단계를 통해 문제를 해결할 수 있습니다:
 
-1. Create an injection token for an instance of the ambient type.
-1. Create a factory function that returns that instance.
-1. Add a `useFactory` provider with that factory function.
-1. Use `@Inject` to inject the instance.
+1. 환경 유형의 인스턴스에 대한 주입 토큰을 생성합니다.
+1. 해당 인스턴스를 반환하는 팩토리 함수를 생성합니다.
+1. 해당 팩토리 함수로 `useFactory` 제공자를 추가합니다.
+1. `@Inject`를 사용하여 인스턴스를 주입합니다.
 
-Here's an illustrative example.
+다음은 설명적인 예입니다.
 
 <docs-code language="typescript">
 
-// CORRECTED
+// 수정됨
 import { Inject } from '@angular/core';
 
 export const WINDOW = new InjectionToken('Window');
@@ -385,10 +381,9 @@ export class MyComponent {
 
 </docs-code>
 
-The `Window` type in the constructor is no longer a problem for the compiler because it
-uses the `@Inject(WINDOW)` to generate the injection code.
+생성자에서 `Window` 유형은 컴파일러에 더 이상 문제가 되지 않습니다. 왜냐하면 `@Inject(WINDOW)`를 사용하여 주입 코드를 생성하기 때문입니다.
 
-Angular does something similar with the `DOCUMENT` token so you can inject the browser's `document` object \(or an abstraction of it, depending upon the platform in which the application runs\).
+Angular는 `DOCUMENT` 토큰에서 비슷한 작업을 수행하므로 브라우저의 `document` 객체(또는 애플리케이션이 실행되는 플랫폼에 따라 그 추상화)를 주입할 수 있습니다.
 
 <docs-code language="typescript">
 
@@ -402,64 +397,64 @@ export class MyComponent {
 
 </docs-code>
 
-## Name expected
+## 이름이 예상됨
 
-HELPFUL: *The compiler expected a name in an expression it was evaluating.*
+유용함: *컴파일러가 평가 중인 표현에서 이름을 예상했습니다.*
 
-This can happen if you use a number as a property name as in the following example.
+다음 예와 같이 숫자를 속성 이름으로 사용할 경우 이 문제가 발생할 수 있습니다.
 
 <docs-code language="typescript">
 
-// ERROR
+// 오류
 provider: [{ provide: Foo, useValue: { 0: 'test' } }]
 
 </docs-code>
 
-Change the name of the property to something non-numeric.
+속성의 이름을 비숫자 값으로 변경하십시오.
 
 <docs-code language="typescript">
 
-// CORRECTED
+// 수정됨
 provider: [{ provide: Foo, useValue: { '0': 'test' } }]
 
 </docs-code>
 
-## Unsupported enum member name
+## 지원되지 않는 열거형 멤버 이름
 
-HELPFUL: *Angular couldn't determine the value of the [enum member](https://www.typescriptlang.org/docs/handbook/enums.html) that you referenced in metadata.*
+유용함: *Angular가 메타데이터에서 참조한 [열거형 멤버](https://www.typescriptlang.org/docs/handbook/enums.html)의 값을 결정할 수 없었습니다.*
 
-The compiler can understand simple enum values but not complex values such as those derived from computed properties.
+컴파일러는 간단한 열거형 값을 이해할 수 있지만, 계산된 속성과 같은 복잡한 값은 이해할 수 없습니다.
 
 <docs-code language="typescript">
 
-// ERROR
+// 오류
 enum Colors {
   Red = 1,
   White,
-  Blue = "Blue".length // computed
+  Blue = "Blue".length // 계산됨
 }
 
   …
   providers: [
-    { provide: BaseColor,   useValue: Colors.White } // ok
-    { provide: DangerColor, useValue: Colors.Red }   // ok
-    { provide: StrongColor, useValue: Colors.Blue }  // bad
+    { provide: BaseColor,   useValue: Colors.White } // 괜찮음
+    { provide: DangerColor, useValue: Colors.Red }   // 괜찮음
+    { provide: StrongColor, useValue: Colors.Blue }  // 나쁨
   ]
   …
 
 </docs-code>
 
-Avoid referring to enums with complicated initializers or computed properties.
+복잡한 초기값이나 계산된 속성을 가진 열거형은 참조하지 마십시오.
 
-## Tagged template expressions are not supported
+## 태그가 있는 템플릿 표현은 지원되지 않음
 
-HELPFUL: *Tagged template expressions are not supported in metadata.*
+유용함: *메타데이터에서 태그가 있는 템플릿 표현은 지원되지 않습니다.*
 
-The compiler encountered a JavaScript ES2015 [tagged template expression](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) such as the following.
+컴파일러가 JavaScript ES2015 [태그가 있는 템플릿 표현](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals)인 다음과 같은 것을 만났습니다.
 
 <docs-code language="typescript">
 
-// ERROR
+// 오류
 const expression = 'funky';
 const raw = String.raw`A tagged template ${expression} string`;
  …
@@ -468,14 +463,12 @@ const raw = String.raw`A tagged template ${expression} string`;
 
 </docs-code>
 
-[`String.raw()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/raw) is a *tag function* native to JavaScript ES2015.
+[`String.raw()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/raw)는 JavaScript ES2015의 *태그 함수*입니다.
 
-The AOT compiler does not support tagged template expressions; avoid them in metadata expressions.
+AOT 컴파일러는 태그가 있는 템플릿 표현을 지원하지 않으므로 메타데이터 표현에서 이를 피해야 합니다.
 
-## Symbol reference expected
+## 기호 참조 예상됨
 
-HELPFUL: *The compiler expected a reference to a symbol at the location specified in the error message.*
+유용함: *컴파일러가 오류 메시지에 지정된 위치에서 심볼에 대한 참조를 예상했습니다.*
 
-This error can occur if you use an expression in the `extends` clause of a class.
-
-<!--todo: Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](https://github.com/angular/angular/pull/17712#discussion_r132025495). -->
\ No newline at end of file
+이 오류는 클래스의 `extends` 절에서 표현식을 사용할 경우 발생할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/build-system-migration.md b/adev/src/content/tools/cli/build-system-migration.md
index f8f53e2fef82..430320f191ab 100644
--- a/adev/src/content/tools/cli/build-system-migration.md
+++ b/adev/src/content/tools/cli/build-system-migration.md
@@ -1,40 +1,30 @@
-# Angular application build system
+# Angular 애플리케이션 빌드 시스템
 
-In v17 and higher, the new build system provides an improved way to build Angular applications. This new build system includes:
+v17 이상에서는 새로운 빌드 시스템이 Angular 애플리케이션을 빌드하는 개선된 방법을 제공합니다. 이 새로운 빌드 시스템에는 다음이 포함됩니다:
 
-- A modern output format using ESM, with dynamic import expressions to support lazy module loading.
-- Faster build-time performance for both initial builds and incremental rebuilds.
-- Newer JavaScript ecosystem tools such as [esbuild](https://esbuild.github.io/) and [Vite](https://vitejs.dev/).
-- Integrated SSR and prerendering capabilities.
-- Automatic global and component stylesheet hot replacement.
+- 동적 import 표현식을 사용한 ESM을 사용하는 현대적인 출력 형식으로, 지연 모듈 로딩을 지원합니다.
+- 초기 빌드 및 증분 재빌드 모두에 대해 더 빠른 빌드 시간 성능을 제공합니다.
+- [esbuild](https://esbuild.github.io/) 및 [Vite](https://vitejs.dev/)와 같은 최신 JavaScript 생태계 도구를 포함합니다.
+- 통합된 SSR 및 사전 렌더링 기능을 제공합니다.
+- 자동 글로벌 및 컴포넌트 스타일시트 핫 교체를 지원합니다.
 
-This new build system is stable and fully supported for use with Angular applications.
-You can migrate to the new build system with applications that use the `browser` builder.
-If using a custom builder, please refer to the documentation for that builder on possible migration options.
+이 새로운 빌드 시스템은 안정적이며 Angular 애플리케이션에서 사용할 수 있도록 완전히 지원됩니다. `browser` 빌더를 사용하는 애플리케이션에서 새로운 빌드 시스템으로 마이그레이션할 수 있습니다. 사용자 정의 빌더를 사용하는 경우, 가능한 마이그레이션 옵션에 대한 해당 빌더의 문서를 참조하십시오.
 
-IMPORTANT: The existing webpack-based build system is still considered stable and fully supported.
-Applications can continue to use the `browser` builder and projects can opt-out of migrating during an update.
+중요: 기존 webpack 기반 빌드 시스템은 여전히 안정적이고 완전히 지원된다고 간주됩니다. 애플리케이션은 계속해서 `browser` 빌더를 사용할 수 있으며 프로젝트는 업데이트 중에 마이그레이션을 선택하지 않을 수 있습니다.
 
-## For new applications
+## 새로운 애플리케이션의 경우
 
-New applications will use this new build system by default via the `application` builder.
+새로운 애플리케이션은 기본적으로 `application` 빌더를 통해 이 새로운 빌드 시스템을 사용합니다.
 
-## For existing applications
+## 기존 애플리케이션의 경우
 
-Both automated and manual procedures are available depending on the requirements of the project.
-Starting with v18, the update process will ask if you would like to migrate existing applications to use the new build system via the automated migration.
-Prior to migrating, please consider reviewing the [Known Issues](#known-issues) section as it may contain relevant information for your project.
+프로젝트의 요구 사항에 따라 자동화된 절차와 수동 절차가 모두 사용할 수 있습니다. v18부터는 업데이트 과정에서 기존 애플리케이션을 새 빌드 시스템으로 마이그레이션할 것인지 질문할 것입니다. 마이그레이션 전에 [알려진 문제](#known-issues) 섹션을 검토하는 것이 좋습니다. 이 섹션에는 프로젝트에 대한 관련 정보가 포함될 수 있습니다.
 
-HELPFUL: Remember to remove any CommonJS assumptions in the application server code if using SSR such as `require`, `__filename`, `__dirname`, or other constructs from the [CommonJS module scope](https://nodejs.org/api/modules.html#the-module-scope). All application code should be ESM compatible. This does not apply to third-party dependencies.
+도움말: SSR을 사용하는 경우 애플리케이션 서버 코드에서 `require`, `__filename`, `__dirname` 또는 [CommonJS 모듈 범위](https://nodejs.org/api/modules.html#the-module-scope)에서 유래된 기타 구성 요소와 같은 모든 CommonJS 가정을 제거하는 것을 기억하세요. 모든 애플리케이션 코드는 ESM 호환 가능해야 합니다. 이는 서드파티 종속성에는 적용되지 않습니다.
 
-### Automated migration (Recommended)
+### 자동 마이그레이션 (권장)
 
-The automated migration will adjust both the application configuration within `angular.json` as well as code and stylesheets to remove previous webpack-specific feature usage.
-While many changes can be automated and most applications will not require any further changes, each application is unique and there may be some manual changes required.
-After the migration, please attempt a build of the application as there could be new errors that will require adjustments within the code.
-The errors will attempt to provide solutions to the problem when possible and the later sections of this guide describe some of the more common situations that you may encounter.
-When updating to Angular v18 via `ng update`, you will be asked to execute the migration.
-This migration is entirely optional for v18 and can also be run manually at anytime after an update via the following command:
+자동 마이그레이션은 이전의 webpack 특정 기능 사용을 제거하기 위해 `angular.json` 내의 애플리케이션 구성 및 코드와 스타일시트를 조정합니다. 많은 변경 사항을 자동화할 수 있으며 대부분의 애플리케이션은 추가 변경이 필요하지 않지만 각 애플리케이션은 고유하므로 몇 가지 수동 변경이 필요할 수 있습니다. 마이그레이션 후에는 애플리케이션을 빌드해 보십시오. 코드 내에서 조정이 필요한 새로운 오류가 발생할 수 있습니다. 오류는 가능한 경우 문제에 대한 해결책을 제공하려고 시도하며 이 가이드의 후속 섹션에서는 여러분이 만날 수 있는 더 일반적인 상황을 설명합니다. `ng update`를 통해 Angular v18로 업데이트할 때 마이그레이션을 실행하라는 요청을 받게 됩니다. v18에 대한 이 마이그레이션은 완전히 선택 사항이며 업데이트 후 언제든지 다음 명령으로 수동으로 실행할 수 있습니다:
 
 <docs-code language="shell">
 
@@ -42,41 +32,32 @@ ng update @angular/cli --name use-application-builder
 
 </docs-code>
 
-The migration does the following:
+마이그레이션은 다음을 수행합니다:
 
-* Converts existing `browser` or `browser-esbuild` target to `application`
-* Removes any previous SSR builders (because `application` does that now).
-* Updates configuration accordingly.
-* Merges `tsconfig.server.json` with `tsconfig.app.json` and adds the TypeScript option `"esModuleInterop": true` to ensure `express` imports are [ESM compliant](#esm-default-imports-vs-namespace-imports).
-* Updates application server code to use new bootstrapping and output directory structure.
-* Removes any webpack-specific builder stylesheet usage such as the tilde or caret in `@import`/`url()` and updates the configuration to provide equivalent behavior
-* Converts to use the new lower dependency `@angular/build` Node.js package if no other `@angular-devkit/build-angular` usage is found.
+* 기존의 `browser` 또는 `browser-esbuild` 대상을 `application`으로 변환합니다.
+* 이전 SSR 빌더를 제거합니다 (이제 `application`이 이를 수행합니다).
+* 구성에 따라 업데이트합니다.
+* `tsconfig.server.json`을 `tsconfig.app.json`과 병합하고 TypeScript 옵션 `"esModuleInterop": true`를 추가하여 `express` 가져오기가 [ESM 준수](#esm-default-imports-vs-namespace-imports)를 보장합니다.
+* 애플리케이션 서버 코드를 새로운 부트스트랩 및 출력 디렉터리 구조를 사용하도록 업데이트합니다.
+* `@import`/`url()`에서 물결 또는 캐릿과 같은 webpack 특정 빌더 스타일시트 사용을 제거하고 엇비슷한 동작을 제공하기 위해 구성을 업데이트합니다.
+* 다른 `@angular-devkit/build-angular` 사용이 발견되지 않으면 새로운 낮은 의존성의 `@angular/build` Node.js 패키지를 사용하도록 변환합니다.
 
-### Manual migration
+### 수동 마이그레이션
 
-Additionally for existing projects, you can manually opt-in to use the new builder on a per-application basis with two different options.
-Both options are considered stable and fully supported by the Angular team.
-The choice of which option to use is a factor of how many changes you will need to make to migrate and what new features you would like to use in the project.
+기존 프로젝트의 경우, 두 가지 다른 옵션으로 애플리케이션 단위로 새로운 빌더를 수동으로 선택할 수 있습니다. 두 가지 옵션 모두 Angular 팀에서 안정적이고 완전히 지원됩니다. 어떤 옵션을 사용할지는 마이그레이션에 얼마나 많은 변경을 해야 하는지와 프로젝트에서 사용하고 싶은 새로운 기능에 따라 다릅니다.
 
-- The `browser-esbuild` builder builds only the client-side bundle of an application designed to be compatible with the existing `browser` builder that provides the preexisting build system.
-This builder provides equivalent build options, and in many cases, it serves as a drop-in replacement for existing `browser` applications.
-- The `application` builder covers an entire application, such as the client-side bundle, as well as optionally building a server for server-side rendering and performing build-time prerendering of static pages.
+- `browser-esbuild` 빌더는 기존 `browser` 빌더와 호환되도록 설계된 애플리케이션의 클라이언트 측 번들만 빌드합니다. 이 빌더는 동등한 빌드 옵션을 제공하며, 많은 경우 기존 `browser` 애플리케이션에 대한 드롭인 교체 역할을 합니다.
+- `application` 빌더는 클라이언트 측 번들뿐만 아니라 서버 측 렌더링을 위한 서버를 선택적으로 빌드하고 정적 페이지의 빌드 시간 사전 렌더링을 수행하는 등 전체 애플리케이션을 포함합니다.
 
-The `application` builder is generally preferred as it improves server-side rendered (SSR) builds, and makes it easier for client-side rendered projects to adopt SSR in the future.
-However it requires a little more migration effort, particularly for existing SSR applications if performed manually.
-If the `application` builder is difficult for your project to adopt, `browser-esbuild` can be an easier solution which gives most of the build performance benefits with fewer breaking changes.
+`application` 빌더가 일반적으로 권장됩니다. 이는 서버 측 렌더링(SSR) 빌드를 개선하고 클라이언트 측 렌더링 프로젝트가 향후 SSR을 채택하기 쉽게 만듭니다. 그러나 기존 SSR 애플리케이션에 대해 수동으로 수행할 경우 마이그레이션 작업이 조금 더 필요합니다. `application` 빌더가 프로젝트에 적용하기 어려운 경우, `browser-esbuild`가 더 적은 충돌 변화로 대부분의 빌드 성능 이점을 제공하는 더 쉬운 해결책이 될 수 있습니다.
 
-#### Manual migration to the compatibility builder
+#### 호환성 빌더로의 수동 마이그레이션
 
-A builder named `browser-esbuild` is available within the `@angular-devkit/build-angular` package that is present in an Angular CLI generated application.
-You can try out the new build system for applications that use the `browser` builder.
-If using a custom builder, please refer to the documentation for that builder on possible migration options.
+`browser-esbuild`라는 빌더는 Angular CLI로 생성된 애플리케이션의 `@angular-devkit/build-angular` 패키지 내에서 사용할 수 있습니다. `browser` 빌더를 사용하는 애플리케이션의 경우 새로운 빌드 시스템을 사용해 볼 수 있습니다. 사용자 정의 빌더를 사용하는 경우, 해당 빌더의 가능한 마이그레이션 옵션에 대한 문서를 참조하십시오.
 
-The compatibility option was implemented to minimize the amount of changes necessary to initially migrate your applications.
-This is provided via an alternate builder (`browser-esbuild`).
-You can update the `build` target for any application target to migrate to the new build system.
+호환성 옵션은 애플리케이션을 처음 마이그레이션하는 데 필요한 변경 사항의 양을 최소화하기 위해 구현되었습니다. 이는 대체 빌더(`browser-esbuild`)를 통해 제공됩니다. 모든 애플리케이션 대상에 대해 `build` 대상을 업데이트하여 새로운 빌드 시스템으로 마이그레이션할 수 있습니다.
 
-The following is what you would typically find in `angular.json` for an application:
+다음은 애플리케이션의 `angular.json`에서 일반적으로 발견되는 내용입니다:
 
 <docs-code language="json">
 ...
@@ -86,7 +67,7 @@ The following is what you would typically find in `angular.json` for an applicat
 ...
 </docs-code>
 
-Changing the `builder` field is the only change you will need to make.
+`builder` 필드를 변경하는 것이 필요하 기초로 하여 요구할 변화의 유일한 부분입니다.
 
 <docs-code language="json">
 ...
@@ -96,12 +77,11 @@ Changing the `builder` field is the only change you will need to make.
 ...
 </docs-code>
 
-#### Manual migration to the new `application` builder
+#### 새로운 `application` 빌더로의 수동 마이그레이션
 
-A builder named `application` is also available within the `@angular-devkit/build-angular` package that is present in an Angular CLI generated application.
-This builder is the default for all new applications created via `ng new`.
+`application`이라는 빌더는 Angular CLI로 생성된 애플리케이션의 `@angular-devkit/build-angular` 패키지 내에서도 사용할 수 있습니다. 이 빌더는 `ng new`를 통해 생성된 모든 새로운 애플리케이션의 기본값입니다.
 
-The following is what you would typically find in `angular.json` for an application:
+다음은 애플리케이션의 `angular.json`에서 일반적으로 발견되는 내용입니다:
 
 <docs-code language="json">
 ...
@@ -111,7 +91,7 @@ The following is what you would typically find in `angular.json` for an applicat
 ...
 </docs-code>
 
-Changing the `builder` field is the first change you will need to make.
+`builder` 필드를 변경하는 것이 첫 번째 변경이 필요합니다.
 
 <docs-code language="json">
 ...
@@ -121,44 +101,33 @@ Changing the `builder` field is the first change you will need to make.
 ...
 </docs-code>
 
-Once the builder name has been changed, options within the `build` target will need to be updated.
-The following list discusses all the `browser` builder options that will need to be adjusted.
+빌더 이름이 변경되면 `build` 대상 내의 옵션도 업데이트해야 합니다. 다음 목록은 조정이 필요한 모든 `browser` 빌더 옵션을 설명합니다.
 
-- `main` should be renamed to `browser`.
-- `polyfills` should be an array, rather than a single file.
-- `buildOptimizer` should be removed, as this is covered by the `optimization` option.
-- `resourcesOutputPath` should be removed, this is now always `media`.
-- `vendorChunk` should be removed, as this was a performance optimization which is no longer needed.
-- `commonChunk` should be removed, as this was a performance optimization which is no longer needed.
-- `deployUrl` should be removed and is not supported. Prefer [`<base href>`](guide/routing/common-router-tasks) instead. See [deployment documentation](tools/cli/deployment#--deploy-url) for more information.
-- `ngswConfigPath` should be renamed to `serviceWorker`.
+- `main`은 `browser`로 이름을 변경해야 합니다.
+- `polyfills`는 단일 파일이 아닌 배열이어야 합니다.
+- `buildOptimizer`는 제거해야 하며, 이는 `optimization` 옵션으로 다룹니다.
+- `resourcesOutputPath`는 제거해야 하며, 이제 항상 `media`입니다.
+- `vendorChunk`는 제거해야 하며, 이는 더 이상 필요하지 않은 성능 최적화입니다.
+- `commonChunk`는 제거해야 하며, 이는 더 이상 필요하지 않은 성능 최적화입니다.
+- `deployUrl`는 제거되어 지원되지 않습니다. 대신 [`<base href>`](guide/routing/common-router-tasks)를 사용하세요. 자세한 내용은 [배포 문서](tools/cli/deployment#--deploy-url)를 참조하십시오.
+- `ngswConfigPath`는 `serviceWorker`로 이름이 변경되어야 합니다.
 
-If the application is not using SSR currently, this should be the final step to allow `ng build` to function.
-After executing `ng build` for the first time, there may be new warnings or errors based on behavioral differences or application usage of webpack-specific features.
-Many of the warnings will provide suggestions on how to remedy that problem.
-If it appears that a warning is incorrect or the solution is not apparent, please open an issue on [GitHub](https://github.com/angular/angular-cli/issues).
-Also, the later sections of this guide provide additional information on several specific cases as well as current known issues.
+애플리케이션이 현재 SSR을 사용하지 않는 경우, 이는 `ng build`가 작동할 수 있도록 하는 최종 단계가 되어야 합니다. 처음 `ng build`를 실행한 후에는 동작의 차이 또는 webpack 특정 기능 사용에 따라 새로운 경고 또는 오류가 발생할 수 있습니다. 많은 경고가 문제를 해결하는 방법에 대한 제안을 제공합니다. 경고가 잘못되었거나 해결 방법이 명확하지 않은 경우 [GitHub](https://github.com/angular/angular-cli/issues)에서 이슈를 열어주시기 바랍니다. 또한 이 가이드의 후속 섹션에서는 여러 특정 사례 및 현재 알려진 문제에 대한 추가 정보를 제공합니다.
 
-For applications new to SSR, the [Angular SSR Guide](guide/ssr) provides additional information regarding the setup process for adding SSR to an application.
+SSR에 새로 진입하는 애플리케이션의 경우, [Angular SSR 가이드](guide/ssr)는 애플리케이션에 SSR을 추가하는 설정 프로세스에 대한 추가 정보를 제공합니다.
 
-For applications that are already using SSR, additional adjustments will be needed to update the application server to support the new integrated SSR capabilities.
-The `application` builder now provides the integrated functionality for all of the following preexisting builders:
+이미 SSR을 사용하는 애플리케이션의 경우, 애플리케이션 서버를 업데이트하여 새로운 통합 SSR 기능을 지원하기 위한 추가 조정이 필요합니다. `application` 빌더는 이제 다음 기존 빌더에 대해 통합된 기능을 제공합니다:
 
 - `app-shell`
 - `prerender`
 - `server`
 - `ssr-dev-server`
 
-The `ng update` process will automatically remove usages of the `@nguniversal` scope packages where some of these builders were previously located.
-The new `@angular/ssr` package will also be automatically added and used with configuration and code being adjusted during the update.
-The `@angular/ssr` package supports the `browser` builder as well as the `application` builder.
+`ng update` 프로세스는 일부 기존 빌더에서 이전의 `@nguniversal` 범위 패키지의 사용을 자동으로 제거합니다. 새로운 `@angular/ssr` 패키지도 자동으로 추가되고 업데이트 중에 구성 및 코드가 조정됩니다. `@angular/ssr` 패키지는 `browser` 빌더와 `application` 빌더를 지원합니다.
 
-## Executing a build
+## 빌드 실행
 
-Once you have updated the application configuration, builds can be performed using `ng build` as was previously done.
-Depending on the choice of builder migration, some of the command line options may be different.
-If the build command is contained in any `npm` or other scripts, ensure they are reviewed and updated.
-For applications that have migrated to the `application` builder and that use SSR and/or prererending, you also may be able to remove extra `ng run` commands from scripts now that `ng build` has integrated SSR support.
+애플리케이션 구성업데이트를 완료한 후, 이전과 같이 `ng build`를 사용하여 빌드를 수행할 수 있습니다. 빌더 마이그레이션 선택에 따라 일부 명령 줄 옵션이 다를 수 있습니다. 빌드 명령이 `npm` 또는 기타 스크립트에 포함되어 있는 경우, 해당 스크립트가 검토되고 업데이트되었는지 확인하십시오. `application` 빌더로 마이그레이션된 애플리케이션 및 SSR과/또는 사전 렌더링을 사용하는 애플리케이션의 경우, 이제 `ng build`가 SSR 지원을 통합했기 때문에 추가 `ng run` 명령을 스크립트에서 제거할 수 있을 수 있습니다.
 
 <docs-code language="shell">
 
@@ -166,10 +135,9 @@ ng build
 
 </docs-code>
 
-## Starting the development server
+## 개발 서버 시작
 
-The development server will automatically detect the new build system and use it to build the application.
-To start the development server no changes are necessary to the `dev-server` builder configuration or command line.
+개발 서버는 새로운 빌드 시스템을 자동으로 감지하고 이를 사용하여 애플리케이션을 빌드합니다. 개발 서버를 시작하는 데 `dev-server` 빌더 구성이나 명령 줄에 대한 변경이 필요하지 않습니다.
 
 <docs-code language="shell">
 
@@ -177,27 +145,20 @@ ng serve
 
 </docs-code>
 
-You can continue to use the [command line options](/cli/serve) you have used in the past with the development server.
+개발 서버에서 과거에 사용했던 [명령 줄 옵션](/cli/serve)을 계속해서 사용할 수 있습니다.
 
-HELPFUL: With the development server, you may see a small Flash of Unstyled Content (FOUC) on startup as the server initializes.
-The development server attempts to defer processing of stylesheets until first use to improve rebuild times.
-This will not occur in builds outside the development server.
+도움말: 개발 서버를 사용할 때 서버가 초기화되는 동안 스타일이 적용되지 않은 콘텐츠(FOUC)가 잠시 나타날 수 있습니다. 개발 서버는 스타일시트의 처리를 최초 사용 전으로 연기하여 재빌드 시간을 향상시키려고 시도합니다. 이는 개발 서버 외부의 빌드에서는 발생하지 않습니다.
 
-### Hot module replacement
+### 핫 모듈 교체
 
-Hot Module Replacement (HMR) is a technique used by development servers to avoid reloading the entire page when only part of an application is changed.
-The changes in many cases can be immediately shown in the browser which allows for an improved edit/refresh cycle while developing an application.
-While general JavaScript-based hot module replacement (HMR) is currently not supported, several more specific forms of HMR are available:
-- **global stylesheet** (`styles` build option)
-- **component stylesheet** (inline and file-based)
-- **component template** (inline and file-based)
+핫 모듈 교체(HMR)는 개발 서버가 애플리케이션의 일부만 변경되었을 때 전체 페이지를 다시 로드하지 않도록 해주는 기술입니다. 많은 경우 변경 사항이 브라우저에서 즉시 표시될 수 있어 애플리케이션을 개발할 때 개선된 편집/새로 고침 주기를 제공합니다. 일반 JavaScript 기반 핫 모듈 교체(HMR)는 현재 지원되지 않지만 몇 가지 더 구체적인 형태의 HMR이 사용할 수 있습니다:
+- **전역 스타일시트** (`styles` 빌드 옵션)
+- **컴포넌트 스타일시트** (인라인 및 파일 기반)
+- **컴포넌트 템플릿** (인라인 및 파일 기반)
 
-The HMR capabilities are automatically enabled and require no code or configuration changes to use.
-Angular provides HMR support for both file-based (`templateUrl`/`styleUrl`/`styleUrls`) and inline (`template`/`styles`) component styles and templates.
-The build system will attempt to compile and process the minimal amount of application code when it detects a stylesheet only change.
+HMR 기능은 자동으로 활성화되며 사용하기 위해 코드나 구성 변경이 필요하지 않습니다. Angular는 파일 기반(`templateUrl`/`styleUrl`/`styleUrls`) 및 인라인(`template`/`styles`) 컴포넌트 스타일 및 템플릿에 대해 HMR 지원을 제공합니다. 빌드 시스템은 스타일시트만 변경된 것을 감지할 때 최소한의 애플리케이션 코드 컴파일 및 처리를 시도합니다.
 
-If preferred, the HMR capabilities can be disabled by setting the `hmr` development server option to `false`.
-This can also be changed on the command line via:
+원하는 경우 `hmr` 개발 서버 옵션을 `false`로 설정하여 HMR 기능을 비활성화할 수 있습니다. 이는 명령 줄에서도 다음과 같이 변경할 수 있습니다:
 
 <docs-code language="shell">
 
@@ -205,25 +166,20 @@ ng serve --no-hmr
 
 </docs-code>
 
-### Vite as a development server
+### Vite를 개발 서버로 사용하기
 
-The usage of Vite in the Angular CLI is currently within a _development server capacity only_. Even without using the underlying Vite build system, Vite provides a full-featured development server with client side support that has been bundled into a low dependency npm package. This makes it an ideal candidate to provide comprehensive development server functionality. The current development server process uses the new build system to generate a development build of the application in memory and passes the results to Vite to serve the application. The usage of Vite, much like the Webpack-based development server, is encapsulated within the Angular CLI `dev-server` builder and currently cannot be directly configured.
+Angular CLI에서 Vite의 사용은 현재 _개발 서버 기능만_ 포함됩니다. 기본 Vite 빌드 시스템을 사용하지 않더라도 Vite는 클라이언트 측 지원이 포함된 풀 기능 개발 서버를 제공합니다. 이로 인해 Vite는 포괄적인 개발 서버 기능을 제공하는 이상적인 후보입니다. 현재 개발 서버 프로세스는 새로운 빌드 시스템을 사용하여 메모리 내에서 애플리케이션의 개발 빌드를 생성하고 결과를 Vite에 전달하여 애플리케이션을 제공합니다. Vite의 사용은 Webpack 기반 개발 서버와 마찬가지로 Angular CLI의 `dev-server` 빌더 내에서 캡슐화되어 있으며 현재 직접 구성할 수 없습니다.
 
-### Prebundling
+### 사전 번들링
 
-Prebundling provides improved build and rebuild times when using the development server.
-Vite provides [prebundling capabilities](https://vite.dev/guide/dep-pre-bundling) that are enabled by default when using the Angular CLI.
-The prebundling process analyzes all the third-party project dependencies within a project and processes them the first time the development server is executed.
-This process removes the need to rebuild and bundle the project's dependencies each time a rebuild occurs or the development server is executed.
+사전 번들은 개발 서버를 사용할 때 개선된 빌드 및 재빌드 시간을 제공합니다. Vite는 Angular CLI를 사용할 때 기본적으로 활성화되는 [사전 번들링 기능](https://vite.dev/guide/dep-pre-bundling)을 제공합니다. 사전 번들링 프로세스는 개발 서버가 실행될 때 프로젝트 내의 모든 서드파티 프로젝트 의존성을 분석하고 이를 처리합니다. 이 프로세스는 재빌드가 발생할 때마다 또는 개발 서버가 실행될 때마다 프로젝트의 의존성을 다시 빌드하고 번들링할 필요를 제거합니다.
 
-In most cases, no additional customization is required. However, some situations where it may be needed include:
-- Customizing loader behavior for imports within the dependency such as the [`loader` option](#file-extension-loader-customization)
-- Symlinking a dependency to local code for development such as [`npm link`](https://docs.npmjs.com/cli/v10/commands/npm-link)
-- Working around an error encountered during prebundling of a dependency
+대부분의 경우 추가 커스터마이징이 필요하지 않습니다. 그러나 필요할 수 있는 몇 가지 상황은 다음과 같습니다:
+- 의존성 내의 가져오기용 로더 동작을 사용자 정의하는 경우 [`loader` 옵션](#file-extension-loader-customization)
+- 개발용으로 로컬 코드에 대한 의존성을 심볼링하는 경우 [`npm link`](https://docs.npmjs.com/cli/v10/commands/npm-link)
+- 의존성의 사전 번들링 중에 발생한 오류를 해결하는 경우
 
-The prebundling process can be fully disabled or individual dependencies can be excluded if needed by a project.
-The `dev-server` builder's `prebundle` option can be used for these customizations.
-To exclude specific dependencies, the `prebundle.exclude` option is available:
+사전 번들링 프로세스는 프로젝트에서 필요에 따라 완전히 비활성화하거나 개별 의존성을 제외할 수 있습니다. `dev-server` 빌더의 `prebundle` 옵션을 사용해 이러한 커스터마이징을 할 수 있습니다. 특정 의존성을 제외하려면 `prebundle.exclude` 옵션을 사용할 수 있습니다:
 
 <docs-code language="json">
     "serve": {
@@ -235,8 +191,7 @@ To exclude specific dependencies, the `prebundle.exclude` option is available:
       },
 </docs-code>
 
-By default, `prebundle` is set to `true` but can be set to `false` to fully disable prebundling.
-However, excluding specific dependencies is recommended instead since rebuild times will increase with prebundling disabled.
+기본적으로 `prebundle`은 `true`로 설정되어 있지만, `false`로 설정하여 사전 번들링을 완전히 비활성화하는 것이 가능합니다. 그러나 특정 의존성을 제외하는 것이 권장됩니다. 사전 번들링 비활성화 시 재빌드 시간이 증가합니다.
 
 <docs-code language="json">
     "serve": {
@@ -246,26 +201,17 @@ However, excluding specific dependencies is recommended instead since rebuild ti
       },
 </docs-code>
 
-## New features
+## 새로운 기능
 
-One of the main benefits of the application build system is the improved build and rebuild speed.
-However, the new application build system also provides additional features not present in the `browser` builder.
+애플리케이션 빌드 시스템의 주요 이점 중 하나는 개선된 빌드 및 재빌드 속도입니다. 그러나 새로운 애플리케이션 빌드 시스템은 `browser` 빌더에 없는 추가 기능도 제공합니다.
 
-IMPORTANT: The new features of the `application` builder described here are incompatible with the `karma` test builder by default because it is using the `browser` builder internally.
-Users can opt-in to use the `application` builder by setting the `builderMode` option to `application` for the `karma` builder.
-This option is currently in developer preview.
-If you notice any issues, please report them [here](https://github.com/angular/angular-cli/issues).
+중요: 여기에 설명된 `application` 빌더의 새로운 기능은 기본적으로 `karma` 테스트 빌더와 호환되지 않습니다. `karma` 빌더는 내부적으로 `browser` 빌더를 사용하고 있습니다. 사용자는 `karma` 빌더에 대해 `builderMode` 옵션을 `application`으로 설정하여 새 빌더를 사용하도록 선택할 수 있습니다. 이 옵션은 현재 개발 미리보기 상태입니다. 문제가 발생하면 [여기](https://github.com/angular/angular-cli/issues)에 보고해 주십시오.
 
-### Build-time value replacement (define)
+### 빌드 시간 값 대체 (define)
 
-The `define` option allows identifiers present in the code to be replaced with another value at build time.
-This is similar to the behavior of Webpack's `DefinePlugin` which was previously used with some custom Webpack configurations that used third-party builders.
-The option can either be used within the `angular.json` configuration file or on the command line.
-Configuring `define` within `angular.json` is useful for cases where the values are constant and able to be checked in to source control.
+`define` 옵션은 코드에 존재하는 식별자를 빌드 시간에 다른 값으로 대체할 수 있도록 해줍니다. 이는 이전에 서드파티 빌더를 사용하는 몇몇 맞춤형 Webpack 구성으로 사용된 Webpack의 `DefinePlugin` 동작과 유사합니다. 이 옵션은 `angular.json` 구성 파일 내에서 사용하거나 명령 줄에서 사용할 수 있습니다. `angular.json` 내에서 `define`을 구성하는 것은 값이 상수이고 소스 제어에 체크인할 수 있는 경우에 유용합니다.
 
-Within the configuration file, the option is in the form of an object.
-The keys of the object represent the identifier to replace and the values of the object represent the corresponding replacement value for the identifier.
-An example is as follows:
+구성 파일 내에서 이 옵션은 객체 형식으로 제공됩니다. 객체의 키는 대체할 식별자를 나타내며, 객체의 값은 식별자에 대한 해당 대체 값을 나타냅니다. 예시는 다음과 같습니다:
 
 <docs-code language="json">
   "build": {
@@ -281,22 +227,15 @@ An example is as follows:
   }
 </docs-code>
 
-HELPFUL: All replacement values are defined as strings within the configuration file.
-If the replacement is intended to be an actual string literal, it should be enclosed in single quote marks.
-This allows the flexibility of using any valid JSON type as well as a different identifier as a replacement.
+도움말: 모든 대체 값은 구성 파일 내에서 문자열로 정의됩니다. 대체가 실제 문자열 리터럴일 경우, 이는 작은 따옴표로 묶어야 합니다. 이는 어떤 유효한 JSON 유형 및 다른 식별자를 대체 용도로 사용하는 유연성을 허용합니다.
 
-The command line usage is preferred for values that may change per build execution such as the git commit hash or an environment variable.
-The CLI will merge `--define` values from the command line with `define` values from `angular.json`, including both in a build.
-Command line usage takes precedence if the same identifier is present for both.
-For command line usage, the `--define` option uses the format of `IDENTIFIER=VALUE`.
+명령 줄 사용은 빌드 실행에 따라 변경될 수 있는 값, 예를 들어 git 커밋 해시나 환경 변수에 대해 선호됩니다. CLI는 명령 줄의 `--define` 값과 `angular.json`에서의 `define` 값을 함께 병합하여 빌드에 포함합니다. 동일한 식별자가 모두 존재하는 경우 명령 줄 사용이 우선됩니다. 명령 줄 사용에 대해 `--define` 옵션은 `IDENTIFIER=VALUE` 형태를 사용합니다.
 
 <docs-code language="shell">
 ng build --define SOME_NUMBER=5 --define "ANOTHER='these will overwrite existing'"
 </docs-code>
 
-Environment variables can also be selectively included in a build.
-For non-Windows shells, the quotes around the hash literal can be escaped directly if preferred.
-This example assumes a bash-like shell but similar behavior is available for other shells as well.
+환경 변수를 빌드에 선택적으로 포함할 수도 있습니다. 비윈도우 셸의 경우, 해시 리터럴 주위의 따옴표를 직접 이스케이프할 수 있습니다. 이 예시는 bash와 유사한 셸을 가정하지만 다른 셸에서도 비슷한 동작이 가능합니다.
 
 <docs-code language="shell">
 export MY_APP_API_HOST="http://example.com"
@@ -304,8 +243,7 @@ export API_RETRY=3
 ng build --define API_HOST=\'$MY_APP_API_HOST\' --define API_RETRY=$API_RETRY
 </docs-code>
 
-For either usage, TypeScript needs to be aware of the types for the identifiers to prevent type-checking errors during the build.
-This can be accomplished with an additional type definition file within the application source code (`src/types.d.ts`, for example) with similar content:
+어떤 사용이든 TypeScript는 빌드 중에 타입 검사 오류를 방지하기 위해 식별자의 타입을 인식해야 합니다. 이는 애플리케이션 소스 코드 내의 추가 타입 정의 파일(`src/types.d.ts` 등)로 비슷한 내용으로 추가하여 달성할 수 있습니다:
 
 ```ts
 declare const SOME_NUMBER: number;
@@ -315,32 +253,25 @@ declare const API_HOST: string;
 declare const API_RETRY: number;
 ```
 
-The default project configuration is already setup to use any type definition files present in the project source directories.
-If the TypeScript configuration for the project has been altered, it may need to be adjusted to reference this newly added type definition file.
+기본 프로젝트 구성은 이미 프로젝트 소스 디렉터리에 있는 모든 타입 정의 파일을 사용하도록 설정되어 있습니다. 프로젝트의 TypeScript 구성이 변경된 경우, 이 새로 추가된 타입 정의 파일을 참조하도록 조정해야 할 수 있습니다.
 
-IMPORTANT: This option will not replace identifiers contained within Angular metadata such as a Component or Directive decorator.
+중요: 이 옵션은 컴포넌트나 디렉티브 장식자와 같은 Angular 메타데이터에 포함된 식별자를 대체하지 않습니다.
 
-### File extension loader customization
+### 파일 확장자 로더 사용자 정의
 
-IMPORTANT: This feature is only available with the `application` builder.
+중요: 이 기능은 `application` 빌더와 함께 사용할 수 있습니다.
 
-Some projects may need to control how all files with a specific file extension are loaded and bundled into an application.
-When using the `application` builder, the `loader` option can be used to handle these cases.
-The option allows a project to define the type of loader to use with a specified file extension.
-A file with the defined extension can then be used within the application code via an import statement or dynamic import expression.
-The available loaders that can be used are:
-* `text` - inlines the content as a `string` available as the default export
-* `binary` - inlines the content as a `Uint8Array` available as the default export
-* `file` - emits the file at the application output path and provides the runtime location of the file as the default export
-* `empty` - considers the content to be empty and will not include it in bundles
+일부 프로젝트는 특정 파일 확장자를 가진 모든 파일이 로드 및 애플리케이션에 번들링되는 방식을 제어할 필요가 있을 수 있습니다. `application` 빌더를 사용할 때, `loader` 옵션을 사용해 이러한 경우를 처리할 수 있습니다. 이 옵션은 프로젝트가 특정 파일 확장자에 사용할 로더 유형을 정의할 수 있게 합니다. 정의된 확장자를 가진 파일은 import 문 또는 동적 import 표현식을 통해 애플리케이션 코드 내에서 사용할 수 있습니다. 사용할 수 있는 로더는 다음과 같습니다:
+* `text` - 콘텐츠를 문자열로 인라인하여 기본 내보내기로 제공합니다.
+* `binary` - 콘텐츠를 Uint8Array로 인라인하여 기본 내보내기로 제공합니다.
+* `file` - 애플리케이션 출력 경로에 파일을 방출하고 파일의 런타임 위치를 기본 내보내기로 제공합니다.
+* `empty` - 콘텐츠를 비어 있다고 간주하고 번들에 포함하지 않습니다.
 
-The `empty` value, while less common, can be useful for compatibility of third-party libraries that may contain bundler-specific import usage that needs to be removed.
-One case for this is side-effect imports (`import 'my.css';`) of CSS files which has no effect in a browser.
-Instead, the project can use `empty` and then the CSS files can be added to the `styles` build option or use some other injection method.
+`empty` 값은 덜 일반적이지만, 제거할 필요가 있는 번들러 특정 가져오기 사용을 포함하는 서드파티 라이브러리의 호환성에 유용할 수 있습니다. 한 사례는 CSS 파일에서 사이드 이펙트 가져오기(`import 'my.css';`)로, 브라우저에서는 효과가 없습니다. 대신 프로젝트는 `empty`를 사용하고 CSS 파일을 `styles` 빌드 옵션에 추가하거나 다른 주입 방법을 사용할 수 있습니다.
 
-The loader option is an object-based option with the keys used to define the file extension and the values used to define the loader type.
+로더 옵션은 객체 기반 옵션으로, 키를 사용해 파일 확장자를 정의하고 값을 사용해 로더 유형을 정의합니다.
 
-An example of the build option usage to inline the content of SVG files into the bundled application would be as follows:
+SVG 파일의 콘텐츠를 번들링된 애플리케이션에 인라인하기 위한 빌드 옵션 사용의 예시는 다음과 같습니다:
 
 <docs-code language="json">
   "build": {
@@ -354,14 +285,14 @@ An example of the build option usage to inline the content of SVG files into the
   }
 </docs-code>
 
-An SVG file can then be imported:
+그런 다음 SVG 파일을 가져올 수 있습니다:
 ```ts
 import contents from './some-file.svg';
 
 console.log(contents); // <svg>...</svg>
 ```
 
-Additionally, TypeScript needs to be aware of the module type for the import to prevent type-checking errors during the build. This can be accomplished with an additional type definition file within the application source code (`src/types.d.ts`, for example) with the following or similar content:
+또한 TypeScript는 빌드 중 타입 검사 오류를 방지하기 위해 import의 모듈 유형을 인식해야 합니다. 이는 애플리케이션 소스 코드 내의 추가 타입 정의 파일(`src/types.d.ts` 등)로 다음 또는 유사한 내용을 추가하여 달성할 수 있습니다:
 ```ts
 declare module "*.svg" {
   const content: string;
@@ -369,73 +300,60 @@ declare module "*.svg" {
 }
 ```
 
-The default project configuration is already setup to use any type definition files (`.d.ts` files) present in the project source directories. If the TypeScript configuration for the project has been altered, the tsconfig may need to be adjusted to reference this newly added type definition file.
+기본 프로젝트 구성은 이미 프로젝트 소스 디렉터리에 있는 모든 타입 정의 파일(`.d.ts` 파일)을 사용하도록 설정되어 있습니다. 프로젝트의 TypeScript 구성이 변경된 경우, tsconfig는 이 새로 추가된 타입 정의 파일을 참조하도록 조정해야 할 수 있습니다.
 
-### Import attribute loader customization
+### import 속성 로더 사용자 정의
 
-For cases where only certain files should be loaded in a specific way, per file control over loading behavior is available.
-This is accomplished with a `loader` [import attribute](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with) that can be used with both import statements and expressions.
-The presence of the import attribute takes precedence over all other loading behavior including JS/TS and any `loader` build option values.
-For general loading for all files of an otherwise unsupported file type, the [`loader`](#file-extension-loader-customization) build option is recommended.
+특정 파일을 특정 방식으로 로드해야 하는 경우, 개별 파일에 대한 로드 동작 제어를 사용할 수 있습니다. 이는 모든 import 문 및 표현식과 함께 사용할 수 있는 `loader` [import 속성](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with)으로 구현됩니다. import 속성의 존재는 JS/TS 포함 여타 모든 로드 동작 및 `loader` 빌드 옵션 값을 초과합니다. 일반적으로 지원되지 않는 파일 유형의 모든 파일에 대한 로드에는 [`loader`](#file-extension-loader-customization) 빌드 옵션을 권장합니다.
 
-For the import attribute, the following loader values are supported:
-* `text` - inlines the content as a `string` available as the default export
-* `binary` - inlines the content as a `Uint8Array` available as the default export
-* `file` - emits the file at the application output path and provides the runtime location of the file as the default export
+import 속성에 대해 지원되는 로더 값은 다음과 같습니다:
+* `text` - 콘텐츠를 문자열로 인라인하여 기본 내보내기로 제공합니다.
+* `binary` - 콘텐츠를 Uint8Array로 인라인하여 기본 내보내기로 제공합니다.
+* `file` - 애플리케이션 출력 경로에 파일을 방출하고 파일의 런타임 위치를 기본 내보내기로 제공합니다.
 
-An additional requirement to use import attributes is that the TypeScript `module` option must be set to `esnext` to allow TypeScript to successfully build the application code.
-Once `ES2025` is available within TypeScript, this change will no longer be needed.
+import 속성을 사용하려면 TypeScript의 `module` 옵션을 `esnext`로 설정해야 하며, 그래야 TypeScript가 애플리케이션 코드를 성공적으로 빌드할 수 있습니다. TypeScript에서 `ES2025`가 사용 가능해지면 이 변경은 더 이상 필요하지 않습니다.
 
-At this time, TypeScript does not support type definitions that are based on import attribute values.
-The use of `@ts-expect-error`/`@ts-ignore` or the use of individual type definition files (assuming the file is only imported with the same loader attribute) is currently required.
-As an example, an SVG file can be imported as text via:
+현재 TypeScript는 import 속성 값에 기반한 타입 정의를 지원하지 않습니다. `@ts-expect-error`/`@ts-ignore` 또는 개별 타입 정의 파일의 사용(가정: 동일한 로더 속성으로만 가져옵니다)이 현재 필요합니다. 예를 들어, SVG 파일은 다음과 같이 텍스트로 가져올 수 있습니다:
 ```ts
-// @ts-expect-error TypeScript cannot provide types based on attributes yet
+// @ts-expect-error TypeScript는 속성을 기반으로 타입을 제공할 수 없습니다.
 import contents from './some-file.svg' with { loader: 'text' };
 ```
 
-The same can be accomplished with an import expression inside an async function.
+이는 비동기 함수 안의 import 표현식으로 동일하게 수행할 수 있습니다.
 ```ts
 async function loadSvg(): Promise<string> {
-  // @ts-expect-error TypeScript cannot provide types based on attributes yet
+  // @ts-expect-error TypeScript는 속성을 기반으로 타입을 제공할 수 없습니다.
   return import('./some-file.svg', { with: { loader: 'text' } }).then((m) => m.default);
 }
 ```
-For the import expression, the `loader` value must be a string literal to be statically analyzed.
-A warning will be issued if the value is not a string literal.
+import 표현식에 대해 `loader` 값은 정적 분석을 위해 문자열 리터럴이어야 합니다. 값이 문자열 리터럴이 아닌 경우 경고가 발행됩니다.
 
-The `file` loader is useful when a file will be loaded at runtime through either a `fetch()`, setting to an image elements `src`, or other similar method.
+`file` 로더는 파일이 런타임에 `fetch()`를 통해 로드되거나 이미지 요소의 `src`에 설정되거나 기타 유사한 방식으로 로드될 때 유용합니다.
 ```ts
-// @ts-expect-error TypeScript cannot provide types based on attributes yet
+// @ts-expect-error TypeScript는 속성을 기반으로 타입을 제공할 수 없습니다.
 import imagePath from './image.webp' with { loader: 'file' };
 
 console.log(imagePath); // media/image-ULK2SIIB.webp
 ```
-For production builds as shown in the code comment above, hashing will be automatically added to the path for long-term caching.
+위의 코드 주석에서 보여 준 생산 빌드의 경우, 경로에 해싱이 자동으로 추가되어 장기 캐싱을 지원합니다.
 
-HELPFUL: When using the development server and using a `loader` attribute to import a file from a Node.js package, that package must be excluded from prebundling via the development server `prebundle` option.
+도움말: 개발 서버를 사용할 때 Node.js 패키지에서 파일을 가져오기 위해 `loader` 속성을 사용할 경우, 해당 패키지는 개발 서버의 `prebundle` 옵션을 통해 사전 번들링에서 제외해야 합니다.
 
-### Import/export conditions
+### import/export 조건
 
-Projects may need to map certain import paths to different files based on the type of build.
-This can be particularly useful for cases such as `ng serve` needing to use debug/development specific code but `ng build` needing to use code without any development features/information.
-Several import/export [conditions](https://nodejs.org/api/packages.html#community-conditions-definitions) are automatically applied to support these project needs:
-* For optimized builds, the `production` condition is enabled.
-* For non-optimized builds, the `development` condition is enabled.
-* For browser output code, the `browser` condition is enabled.
+프로젝트에서는 특정 import 경로를 빌드 유형에 따라 다른 파일로 매핑해야 할 필요가 있을 수 있습니다. 이는 `ng serve`가 디버그/개발 특정 코드를 필요로 하지만 `ng build`는 개발 기능/정보가 없는 코드를 필요로 하는 경우와 같은 상황에 특히 유용할 수 있습니다. 몇 가지 import/export [조건](https://nodejs.org/api/packages.html#community-conditions-definitions)이 이러한 프로젝트 요구를 지원하기 위해 자동으로 적용됩니다:
+* 최적화된 빌드의 경우, `production` 조건이 활성화됩니다.
+* 비최적화된 빌드의 경우, `development` 조건이 활성화됩니다.
+* 브라우저 출력 코드의 경우, `browser` 조건이 활성화됩니다.
 
-An optimized build is determined by the value of the `optimization` option.
-When `optimization` is set to `true` or more specifically if `optimization.scripts` is set to `true`, then the build is considered optimized.
-This classification applies to both `ng build` and `ng serve`.
-In a new project, `ng build` defaults to optimized and `ng serve` defaults to non-optimized.
+최적화된 빌드는 `optimization` 옵션의 값에 따라 결정됩니다. `optimization`이 `true`로 설정되거나 더 구체적으로 `optimization.scripts`가 `true`로 설정되면 빌드는 최적화된 것으로 간주됩니다. 이 분류는 `ng build` 및 `ng serve` 모두에 적용됩니다. 새로운 프로젝트에서는 `ng build`가 기본적으로 최적화되며 `ng serve`는 기본적으로 비최적화됩니다.
 
-A useful method to leverage these conditions within application code is to combine them with [subpath imports](https://nodejs.org/api/packages.html#subpath-imports).
-By using the following import statement:
+응용 프로그램 코드 내에서 이러한 조건을 활용하는 유용한 방법은 [서브경로 임포트](https://nodejs.org/api/packages.html#subpath-imports)와 결합하는 것입니다. 다음과 같은 import 문을 사용하여:
 ```ts
 import {verboseLogging} from '#logger';
 ```
 
-The file can be switched in the `imports` field in `package.json`:
+파일은 `package.json`의 `imports` 필드에서 전환될 수 있습니다:
 
 <docs-code language="json">
 {
@@ -449,8 +367,7 @@ The file can be switched in the `imports` field in `package.json`:
 }
 </docs-code>
 
-For applications that are also using SSR, browser and server code can be switched by using the `browser` condition:
-
+SSR을 사용하는 애플리케이션에서도 브라우저 및 서버 코드를 전환할 수 있습니다:
 <docs-code language="json">
 {
   ...
@@ -463,31 +380,23 @@ For applications that are also using SSR, browser and server code can be switche
 }
 </docs-code>
 
-These conditions also apply to Node.js packages and any defined [`exports`](https://nodejs.org/api/packages.html#conditional-exports) within the packages.
+이러한 조건은 Node.js 패키지 및 패키지 내에서 정의된 [`exports`](https://nodejs.org/api/packages.html#conditional-exports)에도 적용됩니다.
 
-HELPFUL: If currently using the `fileReplacements` build option, this feature may be able to replace its usage.
+도움말: 현재 `fileReplacements` 빌드 옵션을 사용하고 있는 경우, 이 기능이 해당 사용을 대체할 수 있습니다.
 
-## Known Issues
+## 알려진 문제
 
-There are currently several known issues that you may encounter when trying the new build system. This list will be updated to stay current. If any of these issues are currently blocking you from trying out the new build system, please check back in the future as it may have been solved.
+새로운 빌드 시스템을 시도할 때 발생할 수 있는 여러 알려진 문제가 현재 있습니다. 이 목록은 최신 상태를 유지하기 위해 업데이트됩니다. 이러한 문제 중 일부가 새로운 빌드 시스템을 시험해보는 데 방해가 되면, 추후 이 문제가 해결되었는지 확인하시기 바랍니다.
 
-### Type-checking of Web Worker code and processing of nested Web Workers
+### 웹 워커 코드의 타입 검사 및 중첩 웹 워커 처리
 
-Web Workers can be used within application code using the same syntax (`new Worker(new URL('<workerfile>', import.meta.url))`) that is supported with the `browser` builder.
-However, the code within the Worker will not currently be type-checked by the TypeScript compiler. TypeScript code is supported just not type-checked.
-Additionally, any nested workers will not be processed by the build system. A nested worker is a Worker instantiation within another Worker file.
+웹 워커는 `browser` 빌더와 지원되는 같은 구문(`new Worker(new URL('<workerfile>', import.meta.url))`)을 사용하여 애플리케이션 코드 내에서 사용할 수 있습니다. 그러나 현재 Worker 내의 코드는 TypeScript 컴파일러에 의해 타입 검사를 받지 않습니다. TypeScript 코드가 지원되긴 하지만 타입 검사를 받지 않습니다. 추가적으로, 중첩된 워커는 빌드 시스템에서 처리되지 않습니다. 중첩 워커란 다른 워커 파일 내에서의 워커 인스턴화입니다.
 
-### ESM default imports vs. namespace imports
+### ESM 기본 임포트와 네임스페이스 임포트
 
-TypeScript by default allows default exports to be imported as namespace imports and then used in call expressions.
-This is unfortunately a divergence from the ECMAScript specification.
-The underlying bundler (`esbuild`) within the new build system expects ESM code that conforms to the specification.
-The build system will now generate a warning if your application uses an incorrect type of import of a package.
-However, to allow TypeScript to accept the correct usage, a TypeScript option must be enabled within the application's `tsconfig` file.
-When enabled, the [`esModuleInterop`](https://www.typescriptlang.org/tsconfig#esModuleInterop) option provides better alignment with the ECMAScript specification and is also recommended by the TypeScript team.
-Once enabled, you can update package imports where applicable to an ECMAScript conformant form.
+TypeScript는 기본적으로 기본 내보내기가 네임스페이스 임포트로 임포트되고 호출 표현식에서 사용될 수 있도록 허용합니다. 이는 불행히도 ECMAScript 사양과의 불일치입니다. 새로운 빌드 시스템 내의 기본 번들러(`esbuild`)는 사양에 부합하는 ESM 코드를 기대합니다. 애플리케이션이 패키지의 잘못된 유형의 임포트를 사용할 경우, 빌드 시스템은 이제 경고를 생성합니다. 그러나 TypeScript가 올바른 사용을 허용하도록 하려면, 애플리케이션의 `tsconfig` 파일 내에서 TypeScript 옵션이 활성화되어야 합니다. 활성화되면 [`esModuleInterop`](https://www.typescriptlang.org/tsconfig#esModuleInterop) 옵션은 ECMAScript 사양과의 더 나은 일치를 제공합니다. 이는 TypeScript 팀에서도 권장됩니다. 활성화되면 적용 가능한 곳에 패키지 임포트를 ECMAScript 준수 형식으로 업데이트할 수 있습니다.
 
-Using the [`moment`](https://npmjs.com/package/moment) package as an example, the following application code will cause runtime errors:
+예를 들어 [`moment`](https://npmjs.com/package/moment) 패키지를 사용하면 다음 애플리케이션 코드는 런타임 오류를 유발합니다:
 
 ```ts
 import * as moment from 'moment';
@@ -495,16 +404,16 @@ import * as moment from 'moment';
 console.log(moment().format());
 ```
 
-The build will generate a warning to notify you that there is a potential problem. The warning will be similar to:
+빌드는 문제의 가능성을 알리는 경고를 생성합니다. 경고는 다음과 유사할 것입니다:
 
 <docs-code language="text">
-▲ [WARNING] Calling "moment" will crash at run-time because it's an import namespace object, not a function [call-import-namespace]
+▲ [경고] "moment"를 호출하면 런타임에 충돌합니다. 이는 함수가 아니라 가져오기 네임스페이스 객체입니다 [call-import-namespace]
 
     src/main.ts:2:12:
       2 │ console.log(moment().format());
         ╵             ~~~~~~
 
-Consider changing "moment" to a default import instead:
+"moment"를 기본 임포트로 변경하는 것을 고려하십시오:
 
     src/main.ts:1:7:
       1 │ import * as moment from 'moment';
@@ -513,7 +422,7 @@ Consider changing "moment" to a default import instead:
 
 </docs-code>
 
-However, you can avoid the runtime errors and the warning by enabling the `esModuleInterop` TypeScript option for the application and changing the import to the following:
+하지만 애플리케이션에 대해 `esModuleInterop` TypeScript 옵션을 활성화하고 가져오기를 다음과 같이 변경하여 런타임 오류 및 경고를 피할 수 있습니다:
 
 ```ts
 import moment from 'moment';
@@ -521,16 +430,14 @@ import moment from 'moment';
 console.log(moment().format());
 ```
 
-### Order-dependent side-effectful imports in lazy modules
+### 느린 모듈에서 순서 의존적인 부수 효과가 있는 가져오기
 
-Import statements that are dependent on a specific ordering and are also used in multiple lazy modules can cause top-level statements to be executed out of order.
-This is not common as it depends on the usage of side-effectful modules and does not apply to the `polyfills` option.
-This is caused by a [defect](https://github.com/evanw/esbuild/issues/399) in the underlying bundler but will be addressed in a future update.
+특정 순서에 의존하고 여러 지연 모듈에서 사용되는 가져오기 문은 최상위 문이 순서에 맞지 않게 실행되게 만들 수 있습니다. 이는 일반적이지 않으며 부수 효과가 있는 모듈 사용에 의존하며 `polyfills` 옵션에는 적용되지 않습니다. 이는 기본 번들러의 [결함](https://github.com/evanw/esbuild/issues/399)으로 인해 발생하지만 향후 업데이트에서 해결될 것입니다.
 
-IMPORTANT: Avoiding the use of modules with non-local side effects (outside of polyfills) is recommended whenever possible regardless of the build system being used and avoids this particular issue. Modules with non-local side effects can have a negative effect on both application size and runtime performance as well.
+중요: 부수 효과가 없는 모듈(폴리필 제외)의 사용을 피하는 것이 가능한 경우 추천됩니다. 이는 특정 문제를 피합니다. 부수 효과가 없는 모듈은 애플리케이션 크기 및 런타임 성능에 부정적인 영향을 미칠 수 있습니다.
 
-## Bug reports
+## 버그 보고서
 
-Report issues and feature requests on [GitHub](https://github.com/angular/angular-cli/issues).
+문제 및 기능 요청은 [GitHub](https://github.com/angular/angular-cli/issues)에 보고하십시오.
 
-Please provide a minimal reproduction where possible to aid the team in addressing issues.
\ No newline at end of file
+이슈를 해결하는 데 도움이 되도록 가능한 경우 최소한의 재현을 제공해 주십시오.
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/build.md b/adev/src/content/tools/cli/build.md
index 41eb4b2c7eff..1ab9a10d12e3 100644
--- a/adev/src/content/tools/cli/build.md
+++ b/adev/src/content/tools/cli/build.md
@@ -1,22 +1,19 @@
-# Building Angular apps
+# 앵귤러 앱 빌드하기
 
-You can build your Angular CLI application or library with the `ng build` command.
-This will compile your TypeScript code to JavaScript, as well as optimize, bundle, and minify the output as appropriate.
+`ng build` 명령어를 사용하여 앵귤러 CLI 애플리케이션 또는 라이브러리를 빌드할 수 있습니다. 이렇게 하면 TypeScript 코드를 JavaScript로 컴파일하고, 출력 결과를 최적화하고, 번들링하고, 필요에 따라 축소합니다.
 
-`ng build` only executes the builder for the `build` target in the default project as specified in `angular.json`.
-Angular CLI includes four builders typically used as `build` targets:
+`ng build`는 `angular.json`에 지정된 기본 프로젝트의 `build` 대상에 대한 빌더만 실행합니다. 앵귤러 CLI에는 일반적으로 `build` 대상으로 사용되는 네 가지 빌더가 포함되어 있습니다:
 
-| Builder                                         | Purpose                                                                                                                                                                           |
-| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@angular-devkit/build-angular:application`     | Builds an application with a client-side bundle, a Node server, and build-time prerendered routes with [esbuild](https://esbuild.github.io/).                                     |
-| `@angular-devkit/build-angular:browser-esbuild` | Bundles a client-side application for use in a browser with [esbuild](https://esbuild.github.io/). See [`browser-esbuild` documentation](tools/cli/build-system-migration#manual-migration-to-the-compatibility-builder) for more information. |
-| `@angular-devkit/build-angular:browser`         | Bundles a client-side application for use in a browser with [webpack](https://webpack.js.org/).                                                                                   |
-| `@angular-devkit/build-angular:ng-packagr`      | Builds an Angular library adhering to [Angular Package Format](tools/libraries/angular-package-format).                                                                           |
+| 빌더                                           | 목적                                                                                                                                                                           |
+| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@angular-devkit/build-angular:application`     | 클라이언트 측 번들과 Node 서버, [esbuild](https://esbuild.github.io/)로 빌드 시 미리 렌더링된 경로를 포함하여 애플리케이션을 빌드합니다.                                     |
+| `@angular-devkit/build-angular:browser-esbuild` | [esbuild](https://esbuild.github.io/)를 사용하여 브라우저에서 사용할 클라이언트 측 애플리케이션을 번들링합니다. 추가 정보는 [`browser-esbuild` 문서](tools/cli/build-system-migration#manual-migration-to-the-compatibility-builder)를 참조하십시오. |
+| `@angular-devkit/build-angular:browser`         | [webpack](https://webpack.js.org/)를 사용하여 브라우저에서 사용할 클라이언트 측 애플리케이션을 번들링합니다.                                                                                   |
+| `@angular-devkit/build-angular:ng-packagr`      | [Angular 패키지 포맷](tools/libraries/angular-package-format)을 준수하는 앵귤러 라이브러리를 빌드합니다.                                                                           |
 
-Applications generated by `ng new` use `@angular-devkit/build-angular:application` by default.
-Libraries generated by `ng generate library` use `@angular-devkit/build-angular:ng-packagr` by default.
+`ng new`로 생성된 애플리케이션은 기본적으로 `@angular-devkit/build-angular:application`을 사용합니다. `ng generate library`로 생성된 라이브러리는 기본적으로 `@angular-devkit/build-angular:ng-packagr`을 사용합니다.
 
-You can determine which builder is being used for a particular project by looking up the `build` target for that project.
+특정 프로젝트에 사용되는 빌더를 확인하려면 해당 프로젝트의 `build` 대상을 조회하면 됩니다.
 
 <docs-code language="json">
 
@@ -24,7 +21,7 @@ You can determine which builder is being used for a particular project by lookin
   "projects": {
     "my-app": {
       "architect": {
-        // `ng build` invokes the Architect target named `build`.
+        // `ng build`는 `build`라는 이름의 Architect 대상을 호출합니다.
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           …
@@ -39,18 +36,17 @@ You can determine which builder is being used for a particular project by lookin
 
 </docs-code>
 
-This page discusses usage and options of `@angular-devkit/build-angular:application`.
+이 페이지는 `@angular-devkit/build-angular:application`의 사용법과 옵션에 대해 설명합니다.
 
-## Output directory
+## 출력 디렉토리
 
-The result of this build process is output to a directory (`dist/${PROJECT_NAME}` by default).
+이 빌드 프로세스의 결과는 디렉토리(`dist/${PROJECT_NAME}`가 기본값)로 출력됩니다.
 
-## Configuring size budgets
+## 크기 예산 구성
 
-As applications grow in functionality, they also grow in size.
-The CLI lets you set size thresholds in your configuration to ensure that parts of your application stay within size boundaries that you define.
+애플리케이션이 기능적으로 성장함에 따라 크기도 함께 증가합니다. CLI를 사용하면 구성에서 크기 임계값을 설정하여 애플리케이션의 일부가 정의한 크기 경계 내에 유지되도록 할 수 있습니다.
 
-Define your size boundaries in the CLI configuration file, `angular.json`, in a `budgets` section for each [configured environment](tools/cli/environments).
+크기 경계를 CLI 구성 파일인 `angular.json`의 `budgets` 섹션에 정의합니다. 이는 각 [구성된 환경](tools/cli/environments)마다 가능합니다.
 
 <docs-code language="json">
 
@@ -72,45 +68,38 @@ Define your size boundaries in the CLI configuration file, `angular.json`, in a
 
 </docs-code>
 
-You can specify size budgets for the entire app, and for particular parts.
-Each budget entry configures a budget of a given type.
-Specify size values in the following formats:
+전체 앱 및 특정 부분에 대한 크기 예산을 지정할 수 있습니다. 각 예산 항목은 특정 유형의 예산을 구성합니다. 다음 형식으로 크기 값을 지정합니다:
 
-| Size value      | Details                                                                     |
-| :-------------- | :-------------------------------------------------------------------------- |
-| `123` or `123b` | Size in bytes.                                                              |
-| `123kb`         | Size in kilobytes.                                                          |
-| `123mb`         | Size in megabytes.                                                          |
-| `12%`           | Percentage of size relative to baseline. \(Not valid for baseline values.\) |
+| 크기 값        | 세부정보                                                                     |
+| :------------- | :-------------------------------------------------------------------------- |
+| `123` 또는 `123b` | 바이트 단위의 크기입니다.                                                              |
+| `123kb`         | 킬로바이트 단위의 크기입니다.                                                          |
+| `123mb`         | 메가바이트 단위의 크기입니다.                                                          |
+| `12%`           | 기준선에 대한 크기의 백분율입니다. \(기준선 값에는 유효하지 않습니다.\) |
 
-When you configure a budget, the builder warns or reports an error when a given part of the application reaches or exceeds a boundary size that you set.
+예산을 구성하면 설정한 경계 크기에 도달하거나 초과할 때, 빌더는 경고를 하거나 오류를 보고합니다.
 
-Each budget entry is a JSON object with the following properties:
+각 예산 항목은 다음 속성이 있는 JSON 객체입니다:
 
-| Property       | Value                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| type           | The type of budget. One of: <table> <thead> <tr> <th> Value </th> <th> Details </th> </tr> </thead> <tbody> <tr> <td> <code>bundle</code> </td> <td> The size of a specific bundle. </td> </tr> <tr> <td> <code>initial</code> </td> <td> The size of JavaScript and CSS needed for bootstrapping the application. Defaults to warning at 500kb and erroring at 1mb. </td> </tr> <tr> <td> <code>allScript</code> </td> <td> The size of all scripts. </td> </tr> <tr> <td> <code>all</code> </td> <td> The size of the entire application. </td> </tr> <tr> <td> <code>anyComponentStyle</code> </td> <td> This size of any one component stylesheet. Defaults to warning at 2kb and erroring at 4kb. </td> </tr> <tr> <td> <code>anyScript</code> </td> <td> The size of any one script. </td> </tr> <tr> <td> <code>any</code> </td> <td> The size of any file. </td> </tr> </tbody> </table> |
-| name           | The name of the bundle (for `type=bundle`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| baseline       | The baseline size for comparison.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| maximumWarning | The maximum threshold for warning relative to the baseline.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| maximumError   | The maximum threshold for error relative to the baseline.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| minimumWarning | The minimum threshold for warning relative to the baseline.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| minimumError   | The minimum threshold for error relative to the baseline.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| warning        | The threshold for warning relative to the baseline (min & max).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| error          | The threshold for error relative to the baseline (min & max).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| 속성          | 값                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| :------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| type          | 예산의 유형. 다음 중 하나: <table> <thead> <tr> <th> 값 </th> <th> 세부정보 </th> </tr> </thead> <tbody> <tr> <td> <code>bundle</code> </td> <td> 특정 번들의 크기. </td> </tr> <tr> <td> <code>initial</code> </td> <td> 애플리케이션 부트스트랩에 필요한 JavaScript 및 CSS의 크기. 기본적으로 500kb에서 경고하고 1mb에서 오류를 발생시킵니다. </td> </tr> <tr> <td> <code>allScript</code> </td> <td> 모든 스크립트의 크기. </td> </tr> <tr> <td> <code>all</code> </td> <td> 전체 애플리케이션의 크기. </td> </tr> <tr> <td> <code>anyComponentStyle</code> </td> <td> 어떤 구성 요소 스타일시트의 크기. 기본적으로 2kb에서 경고하고 4kb에서 오류를 발생시킵니다. </td> </tr> <tr> <td> <code>anyScript</code> </td> <td> 어떤 하나의 스크립트의 크기. </td> </tr> <tr> <td> <code>any</code> </td> <td> 어떤 파일의 크기. </td> </tr> </tbody> </table> |
+| name          | 번들의 이름 (type=bundle에 대해).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| baseline      | 비교를 위한 기준 크기.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| maximumWarning| 기준선에 대해 경고의 최대 임계값.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| maximumError  | 기준선에 대해 오류의 최대 임계값.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| minimumWarning| 기준선에 대해 경고의 최소 임계값.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| minimumError  | 기준선에 대해 오류의 최소 임계값.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| warning       | 기준선에 대한 경고의 임계값 (최소 및 최대).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| error         | 기준선에 대한 오류의 임계값 (최소 및 최대).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 
-## Configuring CommonJS dependencies
+## CommonJS 의존성 구성
 
-Always prefer native [ECMAScript modules](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) (ESM) throughout your application and its dependencies.
-ESM is a fully specified web standard and JavaScript language feature with strong static analysis support. This makes bundle optimizations more powerful than other module formats.
+애플리케이션과 그 의존성 전체에서 항상 네이티브 [ECMAScript 모듈](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) (ESM)을 추구하십시오. ESM은 완전한 명세의 웹 표준 및 강력한 정적 분석 지원을 갖춘 JavaScript 언어 기능입니다. 이 때문에 번들 최적화가 다른 모듈 형식보다 더 강력해집니다.
 
-Angular CLI also supports importing [CommonJS](https://nodejs.org/api/modules.html) dependencies into your project and will bundle these dependencies automatically.
-However, CommonJS modules can prevent bundlers and minifiers from optimizing those modules effectively, which results in larger bundle sizes.
-For more information, see [How CommonJS is making your bundles larger](https://web.dev/commonjs-larger-bundles).
+앵귤러 CLI는 또한 프로젝트에 [CommonJS](https://nodejs.org/api/modules.html) 의존성을 가져오고 이러한 의존성을 자동으로 번들링하는 것을 지원합니다. 그러나 CommonJS 모듈은 번들러와 축소기가 이러한 모듈을 효과적으로 최적화하는 것을 방해하여 더 큰 번들 크기를 초래할 수 있습니다. 추가 정보는 [CommonJS가 번들을 더 크게 만드는 방법](https://web.dev/commonjs-larger-bundles)을 참조하십시오.
 
-Angular CLI outputs warnings if it detects that your browser application depends on CommonJS modules.
-When you encounter a CommonJS dependency, consider asking the maintainer to support ECMAScript modules, contributing that support yourself, or using an alternative dependency which meets your needs.
-If the best option is to use a CommonJS dependency, you can disable these warnings by adding the CommonJS module name to `allowedCommonJsDependencies` option in the `build` options located in `angular.json`.
+앵귤러 CLI는 애플리케이션이 CommonJS 모듈에 의존하고 있음을 감지하면 경고를 출력합니다. CommonJS 의존성이 발생하면 유지관리자에게 ECMAScript 모듈을 지원하도록 요청하거나 지원을 직접 추가하거나 필요를 충족하는 대체 의존성을 사용해보십시오. 최선의 선택이 CommonJS 의존성을 사용하는 경우 `angular.json`의 `build` 옵션에 있는 `allowedCommonJsDependencies` 옵션에 CommonJS 모듈 이름을 추가하여 이러한 경고를 비활성화할 수 있습니다.
 
 <docs-code language="json">
 
@@ -127,12 +116,11 @@ If the best option is to use a CommonJS dependency, you can disable these warnin
 
 </docs-code>
 
-## Configuring browser compatibility
+## 브라우저 호환성 구성
 
-The Angular CLI uses [Browserslist](https://github.com/browserslist/browserslist) to ensure compatibility with different browser versions.
-Depending on supported browsers, Angular will automatically transform certain JavaScript and CSS features to ensure the built application does not use a feature which has not been implemented by a supported browser. However, the Angular CLI will not automatically add polyfills to supplement missing Web APIs. Use the `polyfills` option in `angular.json` to add polyfills.
+앵귤러 CLI는 [Browserslist](https://github.com/browserslist/browserslist)를 사용하여 다양한 브라우저 버전과의 호환성을 보장합니다. 지원되는 브라우저에 따라 앵귤러는 특정 JavaScript 및 CSS 기능을 자동으로 변환하여 빌드된 애플리케이션이 지원되는 브라우저에 의해 구현되지 않은 기능을 사용하지 않도록 합니다. 그러나 앵귤러 CLI는 누락된 웹 API를 보완하기 위해 자동으로 폴리Fill을 추가하지 않습니다. `angular.json`에서 `polyfills` 옵션을 사용하여 폴리Fill을 추가하십시오.
 
-Internally, the Angular CLI uses the below default `browserslist` configuration which matches the [browsers that are supported](reference/versions#browser-support) by Angular.
+내부적으로 앵귤러 CLI는 앵귤러에 의해 [지원되는 브라우저](reference/versions#browser-support)와 일치하는 기본 `browserslist` 구성을 사용합니다.
 
 <docs-code language="text">
 
@@ -146,16 +134,14 @@ Firefox ESR
 
 </docs-code>
 
-To override the internal configuration, run [`ng generate config browserslist`](cli/generate/config), which generates a `.browserslistrc` configuration file in the project directory.
+내부 구성을 덮어쓰려면 [`ng generate config browserslist`](cli/generate/config)를 실행하여 프로젝트 디렉토리에 `.browserslistrc` 구성 파일을 생성합니다.
 
-See the [browserslist repository](https://github.com/browserslist/browserslist) for more examples of how to target specific browsers and versions.
-Avoid expanding this list to more browsers. Even if your application code more broadly compatible, Angular itself might not be.
-You should only ever _reduce_ the set of browsers or versions in this list.
+특정 브라우저 및 버전을 대상으로 하는 방법에 대한 더 많은 예제를 보려면 [browserslist 리포지토리](https://github.com/browserslist/browserslist)를 참조하십시오. 이 목록을 더 많은 브라우저로 확장하는 것을 피하십시오. 애플리케이션 코드가 더 넓게 호환 가능하더라도 앵귤러 자체는 그럴 수도 있습니다. 이 목록에서 브라우저 또는 버전 집합을 _줄이는_ 것이 좋습니다.
 
-HELPFUL: Use [browsersl.ist](https://browsersl.ist) to display compatible browsers for a `browserslist` query.
+도움됨: [browsersl.ist](https://browsersl.ist)를 사용하여 `browserslist` 쿼리에 대해 호환 가능한 브라우저를 표시할 수 있습니다.
 
-## Configuring Tailwind
+## Tailwind 구성
 
-Angular supports [Tailwind](https://tailwindcss.com/), a utility-first CSS framework.
+앵귤러는 유틸리티 우선 CSS 프레임워크인 [Tailwind](https://tailwindcss.com/)를 지원합니다.
 
-Follow the [Tailwind documentation](https://tailwindcss.com/docs/installation/framework-guides/angular) for integrating with Angular CLI.
+앵귤러 CLI와 통합하려면 [Tailwind 문서](https://tailwindcss.com/docs/installation/framework-guides/angular)를 따르십시오.
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/cli-builder.md b/adev/src/content/tools/cli/cli-builder.md
index 33e18ef02197..dfe4518b1ea2 100644
--- a/adev/src/content/tools/cli/cli-builder.md
+++ b/adev/src/content/tools/cli/cli-builder.md
@@ -1,108 +1,108 @@
 # Angular CLI builders
 
-A number of Angular CLI commands run a complex process on your code, such as building, testing, or serving your application.
-The commands use an internal tool called Architect to run *CLI builders*, which invoke another tool (bundler, test runner, server) to accomplish the desired task.
-Custom builders can perform an entirely new task, or to change which third-party tool is used by an existing command.
+다수의 Angular CLI 명령어는 애플리케이션을 빌드, 테스트 또는 제공하는 것과 같은 복잡한 프로세스를 코드에서 실행합니다.
+이 명령어는 *CLI builders*를 실행하기 위해 Architect라는 내부 도구를 사용하며, 이 도구는 원하는 작업을 수행하기 위해 다른 도구(번들러, 테스트 실행기, 서버)를 호출합니다.
+사용자 정의 빌더는 전혀 새로운 작업을 수행하거나 기존 명령어에서 사용되는 서드파티 도구를 변경할 수 있습니다.
 
-This document explains how CLI builders integrate with the workspace configuration file, and shows how you can create your own builder.
+이 문서는 CLI 빌더가 작업 공간 구성 파일과 통합되는 방법을 설명하고, 사용자 빌더를 만들어 보는 방법을 보여줍니다.
 
-HELPFUL: Find the code from the examples used here in this [GitHub repository](https://github.com/mgechev/cli-builders-demo).
+도움이 되는 정보: 여기서 사용된 예제의 코드는 이 [GitHub 리포지토리](https://github.com/mgechev/cli-builders-demo)에서 확인할 수 있습니다.
 
 ## CLI builders
 
-The internal Architect tool delegates work to handler functions called *builders*.
-A builder handler function receives two arguments:
+내부 Architect 도구는 *builders*라고 불리는 핸들러 함수에 작업을 위임합니다.
+빌더 핸들러 함수는 두 개의 인수를 받습니다:
 
-| Argument  | Type             |
-|:---       |:---              |
-| `options` | `JSONObject`     |
-| `context` | `BuilderContext` |
+| 인수      | 타입               |
+|:---       |:---                |
+| `options` | `JSONObject`       |
+| `context` | `BuilderContext`   |
 
-The separation of concerns here is the same as with [schematics](tools/cli/schematics-authoring), which are used for other CLI commands that touch your code (such as `ng generate`).
+여기서 관심사의 분리는 코드에 접근하는 다른 CLI 명령어에 사용되는 [schematics](tools/cli/schematics-authoring)와 동일합니다 (예: `ng generate`).
 
-* The `options` object is provided by the CLI user's options and configuration, while the `context` object is provided by the CLI Builder API automatically.
-* In addition to the contextual information, the `context` object also provides access to a scheduling method, `context.scheduleTarget()`.
-    The scheduler executes the builder handler function with a given target configuration.
+* `options` 객체는 CLI 사용자의 옵션 및 구성에 의해 제공되며, `context` 객체는 CLI Builder API에 의해 자동으로 제공됩니다.
+* 문맥 정보 외에도 `context` 객체는 `context.scheduleTarget()`라는 스케줄링 메소드에 대한 접근을 제공합니다.
+    스케줄러는 주어진 대상 구성으로 빌더 핸들러 함수를 실행합니다.
 
-The builder handler function can be synchronous (return a value), asynchronous (return a `Promise`), or watch and return multiple values (return an `Observable`).
-The return values must always be of type `BuilderOutput`.
-This object contains a Boolean `success` field and an optional `error` field that can contain an error message.
+빌더 핸들러 함수는 동기적(값을 반환), 비동기적(‘Promise’를 반환) 또는 여러 값을 반환하는 감시 가능(‘Observable’을 반환)일 수 있습니다.
+반환값은 항상 `BuilderOutput` 타입이어야 합니다.
+이 객체는 Boolean `success` 필드와 선택적인 `error` 필드를 포함하여 에러 메시지를 담을 수 있습니다.
 
-Angular provides some builders that are used by the CLI for commands such as `ng build` and `ng test`.
-Default target configurations for these and other built-in CLI builders can be found and configured in the "architect" section of the [workspace configuration file](reference/configs/workspace-config), `angular.json`.
-Also, extend and customize Angular by creating your own builders, which you can run directly using the [`ng run` CLI command](cli/run).
+Angular는 `ng build` 및 `ng test`와 같은 명령어에 의해 사용되는 빌더를 제공합니다.
+이들 및 다른 내장 CLI 빌더에 대한 기본 대상 구성은 [워크스페이스 구성 파일](reference/configs/workspace-config)인 `angular.json`의 "architect" 섹션에서 찾고 구성할 수 있습니다.
+또한, [`ng run` CLI 명령어](cli/run)를 사용하여 직접 실행할 수 있는 사용자 빌더를 만들어 Angular를 확장하고 사용자 정의할 수 있습니다.
 
 ### Builder project structure
 
-A builder resides in a "project" folder that is similar in structure to an Angular workspace, with global configuration files at the top level, and more specific configuration in a source folder with the code files that define the behavior.
-For example, your `myBuilder` folder could contain the following files.
+빌더는 Angular 작업 공간과 유사한 구조를 가진 "project" 폴더에 위치하며, 상위 수준에는 전역 구성 파일이 있고, 코드 파일이 있는 소스 폴더에 보다 구체적인 구성이 있습니다.
+예를 들어, `myBuilder` 폴더에는 다음 파일이 포함될 수 있습니다.
 
-| Files                    | Purpose                                                                                                   |
+| 파일                     | 용도                                                                                                   |
 |:---                      | :---                                                                                                      |
-| `src/my-builder.ts`      | Main source file for the builder definition.                                                              |
-| `src/my-builder.spec.ts` | Source file for tests.                                                                                    |
-| `src/schema.json`        | Definition of builder input options.                                                                      |
-| `builders.json`          | Builders definition.                                                                                      |
-| `package.json`           | Dependencies. See [https://docs.npmjs.com/files/package.json](https://docs.npmjs.com/files/package.json). |
-| `tsconfig.json`          | [TypeScript configuration](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).              |
+| `src/my-builder.ts`      | 빌더 정의를 위한 주요 소스 파일.                                                              |
+| `src/my-builder.spec.ts` | 테스트를 위한 소스 파일.                                                                                    |
+| `src/schema.json`        | 빌더 입력 옵션의 정의.                                                                      |
+| `builders.json`          | 빌더 정의.                                                                                      |
+| `package.json`           | 의존성. [https://docs.npmjs.com/files/package.json](https://docs.npmjs.com/files/package.json)을 참조하세요. |
+| `tsconfig.json`          | [TypeScript 구성](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).              |
 
-Builders can be published to `npm`, see [Publishing your Library](tools/libraries/creating-libraries).
+빌더는 `npm`에 게시될 수 있으며, [라이브러리 게시](tools/libraries/creating-libraries) 참조.
 
 ## Creating a builder
 
-As an example, create a builder that copies a file to a new location.
-To create a builder, use the `createBuilder()` CLI Builder function, and return a `Promise<BuilderOutput>` object.
+예를 들어, 파일을 새 위치로 복사하는 빌더를 생성하겠습니다.
+빌더를 생성하려면 `createBuilder()` CLI Builder 함수를 사용하고, `Promise<BuilderOutput>` 객체를 반환합니다.
 
 <docs-code header="src/my-builder.ts (builder skeleton)" path="adev/src/content/examples/cli-builder/src/my-builder.ts" visibleRegion="builder-skeleton"/>
 
-Now let's add some logic to it.
-The following code retrieves the source and destination file paths from user options and copies the file from the source to the destination \(using the [Promise version of the built-in NodeJS `copyFile()` function](https://nodejs.org/api/fs.html#fs_fspromises_copyfile_src_dest_mode)\).
-If the copy operation fails, it returns an error with a message about the underlying problem.
+이제 여기에 일부 로직을 추가합시다.
+다음 코드는 사용자 옵션에서 소스 및 대상 파일 경로를 가져오고 소스에서 대상으로 파일을 복사합니다 \(내장 NodeJS `copyFile()` 함수의 [Promise 버전](https://nodejs.org/api/fs.html#fs_fspromises_copyfile_src_dest_mode)을 사용\).
+복사 작업에 실패하면 기저 문제에 대한 메시지와 함께 오류를 반환합니다.
 
 <docs-code header="src/my-builder.ts (builder)" path="adev/src/content/examples/cli-builder/src/my-builder.ts" visibleRegion="builder"/>
 
 ### Handling output
 
-By default, `copyFile()` does not print anything to the process standard output or error.
-If an error occurs, it might be difficult to understand exactly what the builder was trying to do when the problem occurred.
-Add some additional context by logging additional information using the `Logger` API.
-This also lets the builder itself be executed in a separate process, even if the standard output and error are deactivated.
+기본적으로 `copyFile()`은 프로세스의 표준 출력 또는 오류에 아무것도 출력하지 않습니다.
+오류가 발생하면 문제가 발생했을 때 빌더가 정확히 무엇을 하려고 했는지 이해하기 어려울 수 있습니다.
+`Logger` API를 사용하여 추가 정보를 로깅함으로써 추가 문맥을 추가합니다.
+이렇게 하면 표준 출력 및 오류가 비활성화되어도 빌더 자체가 별도의 프로세스에서 실행될 수 있습니다.
 
-You can retrieve a `Logger` instance from the context.
+`context`에서 `Logger` 인스턴스를 검색할 수 있습니다.
 
 <docs-code header="src/my-builder.ts (handling output)" path="adev/src/content/examples/cli-builder/src/my-builder.ts" visibleRegion="handling-output"/>
 
 ### Progress and status reporting
 
-The CLI Builder API includes progress and status reporting tools, which can provide hints for certain functions and interfaces.
+CLI Builder API는 특정 함수 및 인터페이스에 대한 힌트를 제공할 수 있는 진행 상황 및 상태 보고 도구를 포함합니다.
 
-To report progress, use the `context.reportProgress()` method, which takes a current value, optional total, and status string as arguments.
-The total can be any number. For example, if you know how many files you have to process, the total could be the number of files, and current should be the number processed so far.
-The status string is unmodified unless you pass in a new string value.
+진행 상황을 보고하려면 현재 값, 선택적 총계 및 상태 문자열을 인수로 사용하는 `context.reportProgress()` 메소드를 사용하십시오.
+총계는 어떤 숫자일 수 있습니다. 예를 들어 처리해야 할 파일 수를 알고 있다면, 총계는 파일 수일 수 있으며 현재 처리된 파일 수는 현재 값으로 전달합니다.
+상태 문자열은 새 문자열 값을 전달하지 않는 한 수정되지 않습니다.
 
-In our example, the copy operation either finishes or is still executing, so there's no need for a progress report, but you can report status so that a parent builder that called our builder would know what's going on.
-Use the `context.reportStatus()` method to generate a status string of any length.
+우리의 예에서 복사 작업은 완료되거나 여전히 실행 중이므로 진행 보고가 필요하지 않지만, 부모 빌더가 우리 빌더를 호출했을 때 어떤 일이 진행되고 있는지 알 수 있도록 상태를 보고할 수 있습니다.
+어떤 길이의 상태 문자열을 생성하기 위해 `context.reportStatus()` 메소드를 사용하십시오.
 
-HELPFUL: There's no guarantee that a long string will be shown entirely; it could be cut to fit the UI that displays it.
+도움이 되는 정보: 긴 문자열이 전체적으로 표시된다는 보장은 없으며; UI에 맞게 잘릴 수 있습니다.
 
-Pass an empty string to remove the status.
+상태를 제거하려면 빈 문자열을 전달하십시오.
 
 <docs-code header="src/my-builder.ts (progress reporting)" path="adev/src/content/examples/cli-builder/src/my-builder.ts" visibleRegion="progress-reporting"/>
 
 ## Builder input
 
-You can invoke a builder indirectly through a CLI command such as `ng build`, or directly with the Angular CLI `ng run` command.
-In either case, you must provide required inputs, but can let other inputs default to values that are pre-configured for a specific *target*, specified by a [configuration](tools/cli/environments), or set on the command line.
+빌더는 `ng build`와 같은 CLI 명령어를 통해 간접적으로 호출하거나, Angular CLI `ng run` 명령어로 직접 호출할 수 있습니다.
+어느 쪽이든 필수 입력을 제공해야 하지만 특정 *대상*에 대해 미리 구성된 값으로 기본값을 설정할 수 있습니다. 이는 [구성](tools/cli/environments) 또는 명령줄에서 설정할 수 있습니다.
 
 ### Input validation
 
-You define builder inputs in a JSON schema associated with that builder.
-Similar to schematics, the Architect tool collects the resolved input values into an `options` object, and validates their types against the schema before passing them to the builder function.
+빌더 입력은 해당 빌더와 연결된 JSON 스키마에서 정의됩니다.
+Schematics와 유사하게 Architect 도구는 해결된 입력 값을 `options` 객체에 수집하고, 이를 빌더 함수에 전달하기 전에 스키마에 대해 유형을 검증합니다.
 
-For our example builder, `options` should be a `JsonObject` with two keys:
-a `source` and a `destination`, each of which are a string.
+우리 예제 빌더의 경우 `options`는 두 개의 키를 가진 `JsonObject`여야 합니다:
+`source`와 `destination`, 각각 문자열이어야 합니다.
 
-You can provide the following schema for type validation of these values.
+다음 스키마를 제공하여 이러한 값의 유형 검증을 할 수 있습니다.
 
 <docs-code header="src/schema.json" language="json">
 
@@ -121,12 +121,12 @@ You can provide the following schema for type validation of these values.
 
 </docs-code>
 
-HELPFUL: This is a minimal example, but the use of a schema for validation can be very powerful.
-For more information, see the [JSON schemas website](http://json-schema.org).
+도움이 되는 정보: 이것은 최소한의 예제이지만, 검증을 위한 스키마 사용은 매우 강력할 수 있습니다.
+자세한 정보는 [JSON 스키마 웹사이트](http://json-schema.org)를 참조하십시오.
 
-To link our builder implementation with its schema and name, you need to create a *builder definition* file, which you can point to in `package.json`.
+빌더 구현을 스키마와 이름에 연결하려면 `package.json`에서 참조할 수 있는 *빌더 정의* 파일을 생성해야 합니다.
 
-Create a file named `builders.json` that looks like this:
+`builders.json`이라는 파일을 다음과 같이 만드십시오:
 
 <docs-code header="builders.json" language="json">
 
@@ -142,7 +142,7 @@ Create a file named `builders.json` that looks like this:
 
 </docs-code>
 
-In the `package.json` file, add a `builders` key that tells the Architect tool where to find our builder definition file.
+`package.json` 파일에 다음과 같이 우리 빌더 정의 파일을 찾는 `builders` 키를 추가합니다.
 
 <docs-code header="package.json" language="json">
 
@@ -159,23 +159,23 @@ In the `package.json` file, add a `builders` key that tells the Architect tool w
 
 </docs-code>
 
-The official name of our builder is now `@example/copy-file:copy`.
-The first part of this is the package name and the second part is the builder name as specified in the `builders.json` file.
+우리 빌더의 공식 이름은 이제 `@example/copy-file:copy`입니다.
+이의 첫 번째 부분은 패키지 이름이며, 두 번째 부분은 `builders.json` 파일에 지정된 빌더 이름입니다.
 
-These values are accessed on `options.source` and `options.destination`.
+이 값들은 `options.source` 및 `options.destination`에서 접근할 수 있습니다.
 
 <docs-code header="src/my-builder.ts (report status)" path="adev/src/content/examples/cli-builder/src/my-builder.ts" visibleRegion="report-status"/>
 
 ### Target configuration
 
-A builder must have a defined target that associates it with a specific input configuration and project.
+빌더는 특정 입력 구성 및 프로젝트와 연결되는 정의된 대상을 가져야 합니다.
 
-Targets are defined in the `angular.json` [CLI configuration file](reference/configs/workspace-config).
-A target specifies the builder to use, its default options configuration, and named alternative configurations.
-Architect in the Angular CLI uses the target definition to resolve input options for a given run.
+대상은 `angular.json` [CLI 구성 파일](reference/configs/workspace-config)에서 정의됩니다.
+대상은 사용할 빌더, 기본 옵션 구성 및 이름이 지정된 대체 구성을 지정합니다.
+Angular CLI의 Architect는 주어진 실행에 대한 입력 옵션을 해결하기 위해 대상 정의를 사용합니다.
 
-The `angular.json` file has a section for each project, and the "architect" section of each project configures targets for builders used by CLI commands such as 'build', 'test', and 'serve'.
-By default, for example, the `ng build` command runs the builder `@angular-devkit/build-angular:browser` to perform the build task, and passes in default option values as specified for the `build` target in `angular.json`.
+`angular.json` 파일은 각 프로젝트에 대한 섹션이 있으며 각 프로젝트의 "architect" 섹션은 'build', 'test' 및 'serve'와 같이 CLI 명령어에 의해 사용되는 빌더의 대상을 구성합니다.
+예를 들어 `ng build` 명령어는 빌더 `@angular-devkit/build-angular:browser`를 실행하여 빌드 작업을 수행하고, `angular.json`에서 `build` 대상에 대해 지정된 기본 옵션 값을 전달합니다.
 
 <docs-code header="angular.json" language="json">
 
@@ -213,13 +213,13 @@ By default, for example, the `ng build` command runs the builder `@angular-devki
 
 </docs-code>
 
-The command passes the builder the set of default options specified in the "options" section.
-If you pass the `--configuration=production` flag, it uses the override values specified in the `production` configuration.
-Specify further option overrides individually on the command line.
+명령어는 "options" 섹션에 지정된 기본 옵션 집합을 빌더에 전달합니다.
+`--configuration=production` 플래그를 전달하면 `production` 구성에 지정된 재정의 값을 사용합니다.
+추가 옵션 재정의를 명령줄에서 개별적으로 지정합니다.
 
 #### Target strings
 
-The generic `ng run` CLI command takes as its first argument a target string of the following form.
+일반적인 `ng run` CLI 명령어는 다음 형식의 대상 문자열을 첫 번째 인수로 사용합니다.
 
 <docs-code language="shell">
 
@@ -227,41 +227,41 @@ project:target[:configuration]
 
 </docs-code>
 
-|               | Details |
+|               | 세부정보 |
 |:---           |:---     |
-| project       | The name of the Angular CLI project that the target is associated with.                                               |
-| target        | A named builder configuration from the `architect` section of the `angular.json` file.                                |
-| configuration | (optional) The name of a specific configuration override for the given target, as defined in the `angular.json` file. |
+| project       | 대상과 연결된 Angular CLI 프로젝트의 이름입니다.                                               |
+| target        | `angular.json` 파일의 `architect` 섹션에서 지정된 이름 있는 빌더 구성입니다.                                |
+| configuration | (선택 사항) 주어진 대상에 대한 특정 구성 재정의의 이름으로, `angular.json` 파일에서 정의됩니다. |
 
-If your builder calls another builder, it might need to read a passed target string.
-Parse this string into an object by using the `targetFromTargetString()` utility function from `@angular-devkit/architect`.
+빌더가 또 다른 빌더를 호출하면 전달된 대상 문자열을 읽어야 할 수도 있습니다.
+이 문자열을 객체로 구문 분석하려면 `@angular-devkit/architect`의 `targetFromTargetString()` 유틸리티 함수를 사용하십시오.
 
 ## Schedule and run
 
-Architect runs builders asynchronously.
-To invoke a builder, you schedule a task to be run when all configuration resolution is complete.
+Architect는 빌더를 비동기적으로 실행합니다.
+빌더를 호출하려면 모든 구성 해결이 완료될 때 실행될 작업을 예약해야 합니다.
 
-The builder function is not executed until the scheduler returns a `BuilderRun` control object.
-The CLI typically schedules tasks by calling the `context.scheduleTarget()` function, and then resolves input options using the target definition in the `angular.json` file.
+빌더 함수는 스케줄러가 `BuilderRun` 제어 객체를 반환할 때까지 실행되지 않습니다.
+CLI는 일반적으로 `context.scheduleTarget()` 함수를 호출하여 작업을 예약하고, 그런 다음 `angular.json` 파일의 대상 정의를 사용하여 입력 옵션을 해결합니다.
 
-Architect resolves input options for a given target by taking the default options object, then overwriting values from the configuration, then further overwriting values from the overrides object passed to `context.scheduleTarget()`.
-For the Angular CLI, the overrides object is built from command line arguments.
+Architect는 기본 옵션 객체를 가져온 다음 구성에서 값들을 덮어쓰고, 그 다음 `context.scheduleTarget()`에 전달된 재정의 객체에서 추가로 값을 덮어쓰기하여 주어진 대상에 대한 입력 옵션을 해결합니다.
+Angular CLI의 경우, 재정의 객체는 명령줄 인수에서 빌드됩니다.
 
-Architect validates the resulting options values against the schema of the builder.
-If inputs are valid, Architect creates the context and executes the builder.
+Architect는 결과 옵션 값이 빌더의 스키마에 대해 유효한지 검증합니다.
+입력이 유효하면 Architect는 컨텍스트를 생성하고 빌더를 실행합니다.
 
-For more information see [Workspace Configuration](reference/configs/workspace-config).
+자세한 정보는 [워크스페이스 구성](reference/configs/workspace-config)을 참조하십시오.
 
-HELPFUL: You can also invoke a builder directly from another builder or test by calling `context.scheduleBuilder()`.
-You pass an `options` object directly to the method, and those option values are validated against the schema of the builder without further adjustment.
+도움이 되는 정보: 다른 빌더나 테스트에서 `context.scheduleBuilder()`를 호출하여 빌더를 직접 호출할 수도 있습니다.
+인수를 메소드를 통해 직접 전달하며, 이러한 옵션 값은 추가 조정 없이 빌더의 스키마에 대해 검증됩니다.
 
-Only the  `context.scheduleTarget()` method resolves the configuration and overrides through the `angular.json` file.
+오직 `context.scheduleTarget()` 메소드만이 `angular.json` 파일을 통해 구성을 해결하고 재정의를 적용합니다.
 
 ### Default architect configuration
 
-Let's create a simple `angular.json` file that puts target configurations into context.
+대상 구성을 컨텍스트에 넣는 간단한 `angular.json` 파일을 생성합시다.
 
-You can publish the builder to npm (see [Publishing your Library](tools/libraries/creating-libraries#publishing-your-library)), and install it using the following command:
+빌더를 npm에 게시할 수 있습니다 (자세한 정보는 [라이브러리 게시](tools/libraries/creating-libraries#publishing-your-library)를 참조) 및 다음 명령어를 사용하여 설치할 수 있습니다:
 
 <docs-code language="shell">
 
@@ -269,7 +269,7 @@ npm install @example/copy-file
 
 </docs-code>
 
-If you create a new project with `ng new builder-test`, the generated `angular.json` file looks something like this, with only default builder configurations.
+`ng new builder-test`로 새 프로젝트를 생성하면 생성된 `angular.json` 파일은 다음과 같이 기본 빌더 구성만 포함됩니다.
 
 <docs-code header="angular.json" language="json">
 
@@ -280,7 +280,7 @@ If you create a new project with `ng new builder-test`, the generated `angular.j
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            // more options...
+            // 더 많은 옵션...
             "outputPath": "dist/builder-test",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -289,7 +289,7 @@ If you create a new project with `ng new builder-test`, the generated `angular.j
           },
           "configurations": {
             "production": {
-              // more options...
+              // 더 많은 옵션...
               "optimization": true,
               "aot": true,
               "buildOptimizer": true
@@ -305,14 +305,14 @@ If you create a new project with `ng new builder-test`, the generated `angular.j
 
 ### Adding a target
 
-Add a new target that will run our builder to copy a file.
-This target tells the builder to copy the `package.json` file.
+파일을 복사하기 위해 우리의 빌더를 실행할 새 대상을 추가합니다.
+이 대상은 빌더에게 `package.json` 파일을 복사하도록 지시합니다.
 
-* We will add a new target section to the `architect` object for our project
-* The target named `copy-package` uses our builder, which you published to `@example/copy-file`.
-* The options object provides default values for the two inputs that you defined.
-  * `source` - The existing file you are copying.
-  * `destination` - The path you want to copy to.
+* 프로젝트의 `architect` 객체에 새로운 대상 섹션을 추가합니다.
+* `copy-package`라는 이름의 대상은 `@example/copy-file`로 게시된 우리 빌더를 사용합니다.
+* 옵션 객체는 정의한 두 개의 입력에 대한 기본값을 제공합니다.
+  * `source` - 복사할 기존 파일입니다.
+  * `destination` - 복사할 경로입니다.
 
 <docs-code header="angular.json" language="json">
 
@@ -328,7 +328,7 @@ This target tells the builder to copy the `package.json` file.
           }
         },
 
-        // Existing targets...
+        // 기존 대targets...
       }
     }
   }
@@ -338,7 +338,7 @@ This target tells the builder to copy the `package.json` file.
 
 ### Running the builder
 
-To run our builder with the new target's default configuration, use the following CLI command.
+새 대상의 기본 구성을 가진 빌더를 실행하려면 다음 CLI 명령어를 사용하십시오.
 
 <docs-code language="shell">
 
@@ -346,10 +346,10 @@ ng run builder-test:copy-package
 
 </docs-code>
 
-This copies the `package.json` file to `package-copy.json`.
+이 명령어는 `package.json` 파일을 `package-copy.json`으로 복사합니다.
 
-Use command-line arguments to override the configured defaults.
-For example, to run with a different `destination` value, use the following CLI command.
+명령줄 인수를 사용하여 구성된 기본값을 재정의할 수 있습니다.
+예를 들어, 다른 `destination` 값을 사용하려면 다음 CLI 명령어를 사용하십시오.
 
 <docs-code language="shell">
 
@@ -357,51 +357,50 @@ ng run builder-test:copy-package --destination=package-other.json
 
 </docs-code>
 
-This copies the file to `package-other.json` instead of `package-copy.json`.
-Because you did not override the *source* option, it will still copy from the default `package.json` file.
+이 명령어는 파일을 `package-other.json`으로 복사하며, 기본 `package.json` 파일에서 복사할 것입니다.
 
 ## Testing a builder
 
-Use integration testing for your builder, so that you can use the Architect scheduler to create a context, as in this [example](https://github.com/mgechev/cli-builders-demo).
-In the builder source directory, create a new test file `my-builder.spec.ts`. The test creates new instances of `JsonSchemaRegistry` (for schema validation), `TestingArchitectHost` (an in-memory implementation of `ArchitectHost`), and `Architect`.
+빌더에 대한 통합 테스트를 사용하여 Architect 스케줄러를 사용하여 컨텍스트를 생성할 수 있습니다. 이는 이 [예제](https://github.com/mgechev/cli-builders-demo)에서 볼 수 있습니다.
+빌더 소스 디렉토리에서 새로운 테스트 파일 `my-builder.spec.ts`을 생성합니다. 테스트는 `JsonSchemaRegistry`(스키마 검증용), `TestingArchitectHost`(인메모리 구현체 `ArchitectHost`), 및 `Architect`의 새로운 인스턴스를 생성합니다.
 
-Here's an example of a test that runs the copy file builder.
-The test uses the builder to copy the `package.json` file and validates that the copied file's contents are the same as the source.
+다음은 복사 파일 빌더를 실행하는 테스트의 예입니다.
+이 테스트는 빌더를 사용하여 `package.json` 파일을 복사하고 복사된 파일의 내용이 원본과 같음을 검증합니다.
 
 <docs-code header="src/my-builder.spec.ts" path="adev/src/content/examples/cli-builder/src/my-builder.spec.ts"/>
 
-HELPFUL: When running this test in your repo, you need the [`ts-node`](https://github.com/TypeStrong/ts-node) package.
-You can avoid this by renaming `my-builder.spec.ts` to `my-builder.spec.js`.
+도움이 되는 정보: 리포지토리에서 이 테스트를 실행할 때는 [`ts-node`](https://github.com/TypeStrong/ts-node) 패키지가 필요합니다.
+`my-builder.spec.ts`를 `my-builder.spec.js`로 이름을 변경하면 이 패키지를 피할 수 있습니다.
 
 ### Watch mode
 
-Most builders to run once and return. However, this behavior is not entirely compatible with a builder that watches for changes (like a devserver, for example).
-Architect can support watch mode, but there are some things to look out for.
+대부분의 빌더는 한 번 실행되고 반환되지만, 이러한 동작은 변경 사항을 감시하는 빌더와 완전히 호환되지는 않습니다(예: 개발 서버).
+Architect는 감시 모드를 지원할 수 있지만 몇 가지 주의할 사항이 있습니다.
 
-* To be used with watch mode, a builder handler function should return an `Observable`.
-    Architect subscribes to the `Observable` until it completes and might reuse it if the builder is scheduled again with the same arguments.
+* 감시 모드에서 사용하려면 빌더 핸들러 함수가 `Observable`을 반환해야 합니다.
+    Architect는 `Observable`이 완료될 때까지 구독하며, 동일한 인수로 빌더가 다시 스케줄될 경우 재사용할 수 있습니다.
 
-* The builder should always emit a `BuilderOutput` object after each execution.
-    Once it's been executed, it can enter a watch mode, to be triggered by an external event.
-    If an event triggers it to restart, the builder should execute the `context.reportRunning()` function to tell Architect that it is running again.
-    This prevents Architect from stopping the builder if another run is scheduled.
+* 빌더는 각 실행 후 항상 `BuilderOutput` 객체를 방출해야 합니다.
+    실행된 후 외부 이벤트로 트리거될 때 감시 모드에 들어갈 수 있습니다.
+    외부 이벤트가 이를 다시 시작하도록 트리거하면 빌더는 `context.reportRunning()` 함수를 실행하여 Architect에 다시 실행 중임을 알려야 합니다.
+    이렇게 하면 다른 실행이 예약된 경우 Architect가 빌더를 останов하지 않게 됩니다.
 
-When your builder calls `BuilderRun.stop()` to exit watch mode, Architect unsubscribes from the builder's `Observable` and calls the builder's teardown logic to clean up.
-This behavior also allows for long-running builds to be stopped and cleaned up.
+빌더가 감시 모드에서 종료하려고 `BuilderRun.stop()`을 호출하면 Architect는 빌더의 `Observable`에서 구독을 취소하고 빌더의 테어다운 로직을 호출하여 정리합니다.
+이 동작은 장시간 실행되는 빌드를 중단하고 정리할 수 있도록 허용합니다.
 
-In general, if your builder is watching an external event, you should separate your run into three phases.
+일반적으로 빌더가 외부 이벤트를 감시하고 있다면 실행을 세 가지 단계로 나누어야 합니다.
 
-| Phases     | Details |
-|:---        |:---     |
-| Running    | The task being performed, such as invoking a compiler. This ends when the compiler finishes and your builder emits a `BuilderOutput` object.                                                                                                  |
-| Watching   | Between two runs, watch an external event stream. For example, watch the file system for any changes. This ends when the compiler restarts, and `context.reportRunning()` is called.                                                          |
-| Completion | Either the task is fully completed, such as a compiler which needs to run a number of times, or the builder run was stopped (using `BuilderRun.stop()`). Architect executes teardown logic and unsubscribes from your builder's `Observable`. |
+| 단계      | 세부정보 |
+|:---       |:---     |
+| 실행      | 수행 중인 작업, 예를 들어 컴파일러를 호출하는 것입니다. 이는 컴파일러가 완료되고 빌더가 `BuilderOutput` 객체를 방출할 때 종료됩니다.                                                                                                  |
+| 감시      | 두 실행 사이에 외부 이벤트 스트림을 감시합니다. 예를 들어 파일 시스템에서 변경 사항을 감시하는 것입니다. 이는 컴파일러가 다시 시작될 때 종료되며, `context.reportRunning()`이 호출됩니다.                                                          |
+| 완료      | 작업이 완전히 완료되었거나 컴파일러가 여러 번 실행해야 하는 상황이거나 빌더 실행이 중단된 경우( `BuilderRun.stop()` 사용)입니다. Architect는 테어다운 로직을 실행하고 빌더의 `Observable`에서 구독을 취소합니다. |
 
 ## Summary
 
-The CLI Builder API provides a means of changing the behavior of the Angular CLI by using builders to execute custom logic.
+CLI 빌더 API는 빌더를 사용하여 Angular CLI의 동작을 변경하는 수단을 제공합니다.
 
-* Builders can be synchronous or asynchronous, execute once or watch for external events, and can schedule other builders or targets.
-* Builders have option defaults specified in the `angular.json` configuration file, which can be overwritten by an alternate configuration for the target, and further overwritten by command line flags
-* The Angular team recommends that you use integration tests to test Architect builders. Use unit tests to validate the logic that the builder executes.
-* If your builder returns an `Observable`, it should clean up the builder in the teardown logic of that `Observable`.
+* 빌더는 동기적 또는 비동기적일 수 있으며 한 번 실행하거나 외부 이벤트를 감시할 수 있으며 다른 빌더나 대상을 예약할 수 있습니다.
+* 빌더는 `angular.json` 구성 파일에 지정된 옵션 기본값을 가지며, 대체 구성에 대한 값을 덮어쓸 수 있고, 명령줄 플래그로 추가로 재정의할 수 있습니다.
+* Angular 팀은 Architect 빌더를 테스트하기 위해 통합 테스트를 사용하도록 권장합니다. 유닛 테스트는 빌더가 실행하는 로직을 검증하는 데 사용하십시오.
+* 빌더가 `Observable`을 반환하는 경우 해당 `Observable`의 테어다운 로직에서 빌더를 정리해야 합니다.
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/deployment.md b/adev/src/content/tools/cli/deployment.md
index d69b3e1b8e96..a0804f0fdd90 100644
--- a/adev/src/content/tools/cli/deployment.md
+++ b/adev/src/content/tools/cli/deployment.md
@@ -1,17 +1,17 @@
-# Deployment
+# 배포
 
-When you are ready to deploy your Angular application to a remote server, you have various options.
+Angular 애플리케이션을 원격 서버에 배포할 준비가 되면 여러 가지 옵션이 있습니다.
 
-## Automatic deployment with the CLI
+## CLI를 사용한 자동 배포
 
-The Angular CLI command `ng deploy` executes the `deploy` [CLI builder](tools/cli/cli-builder) associated with your project.
-A number of third-party builders implement deployment capabilities to different platforms.
-You can add any of them to your project with `ng add`.
+Angular CLI 명령 `ng deploy`는 프로젝트와 연결된 `deploy` [CLI 빌더](tools/cli/cli-builder)를 실행합니다.
+여러 타사 빌더가 다양한 플랫폼에 대한 배포 기능을 구현합니다.
+이들 중 아무거나 `ng add`를 사용하여 프로젝트에 추가할 수 있습니다.
 
-When you add a package with deployment capability, it will automatically update your workspace configuration (`angular.json` file) with a `deploy` section for the selected project.
-You can then use the `ng deploy` command to deploy that project.
+배포 기능이 있는 패키지를 추가하면 선택한 프로젝트에 대한 `배포` 섹션으로 작업 공간 구성(`angular.json` 파일)이 자동으로 업데이트됩니다.
+그런 다음 `ng deploy` 명령을 사용하여 해당 프로젝트를 배포할 수 있습니다.
 
-For example, the following command automatically deploys a project to [Firebase](https://firebase.google.com/).
+예를 들어, 다음 명령은 프로젝트를 [Firebase](https://firebase.google.com/)에 자동으로 배포합니다.
 
 <docs-code language="shell">
 
@@ -20,107 +20,104 @@ ng deploy
 
 </docs-code>
 
-The command is interactive.
-In this case, you must have or create a Firebase account and authenticate using it.
-The command prompts you to select a Firebase project for deployment before building your application and uploading the production assets to Firebase.
+명령은 인터랙티브합니다.
+이 경우 Firebase 계정이 있거나 만들어야 하며, 이를 사용하여 인증해야 합니다.
+명령은 애플리케이션을 빌드하고 프로덕션 자산을 Firebase에 업로드하기 전에 배포할 Firebase 프로젝트를 선택하도록 요청합니다.
 
-The table below lists tools which implement deployment functionality to different platforms.
-The `deploy` command for each package may require different command line options.
-You can read more by following the links associated with the package names below:
+아래 표는 다양한 플랫폼에 배포 기능을 구현하는 도구를 나열합니다.
+각 패키지에 대한 `deploy` 명령은 서로 다른 명령줄 옵션이 필요할 수 있습니다.
+아래 패키지 이름과 관련된 링크를 따라 추가 정보를 읽을 수 있습니다:
 
-| Deployment to                                                     | Setup Command                                                                              |
-|:---                                                               |:---                                                                                  |
-| [Firebase hosting](https://firebase.google.com/docs/hosting)      | [`ng add @angular/fire`](https://npmjs.org/package/@angular/fire)                           |
-| [Vercel](https://vercel.com/solutions/angular)                    | [`vercel init angular`](https://github.com/vercel/vercel/tree/main/examples/angular) |
-| [Netlify](https://www.netlify.com)                                | [`ng add @netlify-builder/deploy`](https://npmjs.org/package/@netlify-builder/deploy)       |
-| [GitHub pages](https://pages.github.com)                          | [`ng add angular-cli-ghpages`](https://npmjs.org/package/angular-cli-ghpages)               |
+| 배포 대상                                                      | 설정 명령                                                                              |
+|:---                                                          |:---                                                                                  |
+| [Firebase 호스팅](https://firebase.google.com/docs/hosting)      | [`ng add @angular/fire`](https://npmjs.org/package/@angular/fire)                           |
+| [Vercel](https://vercel.com/solutions/angular)                     | [`vercel init angular`](https://github.com/vercel/vercel/tree/main/examples/angular) |
+| [Netlify](https://www.netlify.com)                                 | [`ng add @netlify-builder/deploy`](https://npmjs.org/package/@netlify-builder/deploy)       |
+| [GitHub 페이지](https://pages.github.com)                          | [`ng add angular-cli-ghpages`](https://npmjs.org/package/angular-cli-ghpages)               |
 | [Amazon Cloud S3](https://aws.amazon.com/s3/?nc2=h_ql_prod_st_s3) | [`ng add @jefiozie/ngx-aws-deploy`](https://www.npmjs.com/package/@jefiozie/ngx-aws-deploy) |
 
-If you're deploying to a self-managed server or there's no builder for your favorite cloud platform, you can either [create a builder](tools/cli/cli-builder) that allows you to use the `ng deploy` command, or read through this guide to learn how to manually deploy your application.
+자체 관리 서버에 배포하거나 좋아하는 클라우드 플랫폼에 대한 빌더가 없는 경우, `ng deploy` 명령을 사용할 수 있는 빌더를 [생성](tools/cli/cli-builder)하거나 이 가이드를 읽고 애플리케이션을 수동으로 배포하는 방법을 배울 수 있습니다.
 
-## Manual deployment to a remote server
+## 원격 서버에 수동 배포
 
-To manually deploy your application, create a production build and copy the output directory to a web server or content delivery network (CDN).
-By default, `ng build` uses the `production` configuration.
-If you have customized your build configurations, you may want to confirm [production optimizations](tools/cli/deployment#production-optimizations) are being applied before deploying.
+애플리케이션을 수동으로 배포하려면 프로덕션 빌드를 생성하고 출력 디렉토리를 웹 서버 또는 콘텐츠 전송 네트워크(CDN)에 복사합니다.
+기본적으로 `ng build`는 `production` 구성을 사용합니다.
+빌드 구성을 사용자 정의한 경우, 배포하기 전에 [프로덕션 최적화](tools/cli/deployment#production-optimizations)가 적용되고 있는지 확인하는 것이 좋습니다.
 
-`ng build` outputs the built artifacts to `dist/my-app/` by default, however this path can be configured with the `outputPath` option in the `@angular-devkit/build-angular:browser` builder.
-Copy this directory to the server and configure it to serve the directory.
+`ng build`는 기본적으로 빌드된 산출물을 `dist/my-app/`에 출력하지만, 이 경로는 `@angular-devkit/build-angular:browser` 빌더의 `outputPath` 옵션으로 설정할 수 있습니다.
+이 디렉토리를 서버에 복사하고 디렉토리를 제공하도록 구성합니다.
 
-While this is a minimal deployment solution, there are a few requirements for the server to serve your Angular application correctly.
+이것은 최소한의 배포 솔루션이지만, 서버가 Angular 애플리케이션을 올바르게 제공하기 위한 몇 가지 요구 사항이 있습니다.
 
-## Server configuration
+## 서버 구성
 
-This section covers changes you may need to configure on the server to run your Angular application.
+이 섹션에서는 Angular 애플리케이션을 실행하기 위해 서버에서 구성해야 할 수 있는 변경 사항을 다룹니다.
 
-### Routed apps must fall back to `index.html`
+### 라우팅된 앱은 `index.html`로 다시 돌아가야 합니다
 
-Client-side rendered Angular applications are perfect candidates for serving with a static HTML server because all the content is static and generated at build time.
+클라이언트 측에서 렌더링된 Angular 애플리케이션은 모든 콘텐츠가 정적이고 빌드 시 생성되기 때문에 정적 HTML 서버와 함께 제공하기에 적합한 후보입니다.
 
-If the application uses the Angular router, you must configure the server to return the application's host page (`index.html`) when asked for a file that it does not have.
+애플리케이션이 Angular 라우터를 사용하는 경우, 서버에 파일이 없을 때 애플리케이션의 호스트 페이지(`index.html`)를 반환하도록 구성해야 합니다.
 
-A routed application should support "deep links".
-A *deep link* is a URL that specifies a path to a component inside the application.
-For example, `http://my-app.test/users/42` is a *deep link* to the user detail page that displays the user with `id` 42.
+라우팅된 애플리케이션은 "딥 링크"를 지원해야 합니다.
+*딥 링크*는 애플리케이션 내부의 구성요소에 대한 경로를 지정하는 URL입니다.
+예를 들어, `http://my-app.test/users/42`는 `id`가 42인 사용자를 표시하는 사용자 세부정보 페이지에 대한 *딥 링크*입니다.
 
-There is no issue when the user initially loads the index page and then navigates to that URL from within a running client.
-The Angular router performs the navigation *client-side* and does not request a new HTML page.
+사용자가 처음으로 인덱스 페이지를 로드한 후 실행 중인 클라이언트 내에서 해당 URL로 탐색할 때는 문제가 없습니다.
+Angular 라우터는 탐색을 *클라이언트 측*에서 수행하며 새 HTML 페이지를 요청하지 않습니다.
 
-But clicking a deep link in an email, entering it in the browser address bar, or even refreshing the browser while already on the deep linked page will all be handled by the browser itself, *outside* the running application.
-The browser makes a direct request to the server for `/users/42`, bypassing Angular's router.
+그러나 이메일에서 딥 링크를 클릭하거나 브라우저 주소 표시줄에 입력하거나 이미 딥 링크된 페이지에서 브라우저를 새로 고치는 경우 모두 애플리케이션이 실행되고 있는 *외부*에서 브라우저에 의해 처리됩니다.
+브라우저는 Angular의 라우터를 우회하여 `/users/42`에 대한 직접 요청을 서버에 보냅니다.
 
-A static server routinely returns `index.html` when it receives a request for `http://my-app.test/`.
-But most servers by default will reject `http://my-app.test/users/42` and returns a `404 - Not Found` error *unless* it is configured to return `index.html` instead.
-Configure the fallback route or 404 page to `index.html` for your server, so Angular is served for deep links and can display the correct route.
-Some servers call this fallback behavior "Single-Page Application" (SPA) mode.
+정적 서버는 `http://my-app.test/`에 대한 요청을 받을 때마다 `index.html`을 반환하는 것이 일반적입니다.
+하지만 대부분의 서버는 기본적으로 `http://my-app.test/users/42`를 거부하고 `404 - Not Found` 오류를 반환합니다 *단, `index.html`을 대신 반환하도록 구성되지 않은 경우*.
+딥 링크에 대해 Angular가 제공되고 올바른 경로를 표시할 수 있도록 서버의 폴백 경로나 404 페이지를 `index.html`로 구성하세요.
+일부 서버는 이 폴백 동작을 "단일 페이지 애플리케이션"(SPA) 모드라고 부릅니다.
 
-Once the browser loads the application, Angular router will read the URL to determine which page it is on and display `/users/42` correctly.
+브라우저가 애플리케이션을 로드하면 Angular 라우터는 URL을 읽고 현재 페이지를 결정하며 `/users/42`를 올바르게 표시합니다.
 
-For "real" 404 pages such as `http://my-app.test/does-not-exist`, the server does not require any additional configuration.
-[404 pages implemented in the Angular router](guide/routing/common-router-tasks#displaying-a-404-page) will be displayed correctly.
+`http://my-app.test/does-not-exist`와 같은 "진짜" 404 페이지의 경우, 서버는 추가 구성이 필요하지 않습니다.
+[Angular 라우터에서 구현된 404 페이지](guide/routing/common-router-tasks#displaying-a-404-page)는 올바르게 표시됩니다.
 
-### Requesting data from a different server (CORS)
+### 다른 서버에서 데이터 요청하기 (CORS)
 
-Web developers may encounter a [*cross-origin resource sharing*](https://developer.mozilla.org/docs/Web/HTTP/CORS "Cross-origin resource sharing") error when making a network request to a server other than the application's own host server.
-Browsers forbid such requests unless the server explicitly permits them.
+웹 개발자는 애플리케이션의 호스트 서버 이외의 서버에 네트워크 요청을 할 때 [*교차 출처 리소스 공유*](https://developer.mozilla.org/docs/Web/HTTP/CORS "교차 출처 리소스 공유") 오류에 직면할 수 있습니다.
+브라우저는 서버가 명시적으로 허용하지 않는 한 이러한 요청을 금지합니다.
 
-There isn't anything Angular or the client application can do about these errors.
-The _server_ must be configured to accept the application's requests.
-Read about how to enable CORS for specific servers at [enable-cors.org](https://enable-cors.org/server.html "Enabling CORS server").
+이 오류에 대해 Angular 또는 클라이언트 애플리케이션에서 할 수 있는 것은 없습니다.
+서버는 애플리케이션의 요청을 수락하도록 구성되어야 합니다.
+특정 서버에 대해 CORS를 활성화하는 방법에 대한 자세한 내용은 [enable-cors.org](https://enable-cors.org/server.html "CORS 서버 활성화")를 참조하세요.
 
-## Production optimizations
+## 프로덕션 최적화
 
-`ng build` uses the `production` configuration unless configured otherwise. This configuration enables the following build optimization features.
+`ng build`는 다른 구성이 없으면 `production` 구성을 사용합니다. 이 구성은 다음 빌드 최적화 기능을 활성화합니다.
 
-| Features                                                           | Details                                                                                       |
-|:---                                                                |:---                                                                                           |
-| [Ahead-of-Time (AOT) Compilation](tools/cli/aot-compiler)          | Pre-compiles Angular component templates.                                                     |
-| [Production mode](tools/cli/deployment#development-only-features) | Optimizes the application for the best runtime performance                                    |
-| Bundling                                                           | Concatenates your many application and library files into a minimum number of deployed files. |
-| Minification                                                       | Removes excess whitespace, comments, and optional tokens.                                     |
-| Mangling                                                           | Renames functions, classes, and variables to use shorter, arbitrary identifiers.              |
-| Dead code elimination                                              | Removes unreferenced modules and unused code.                                                 |
+| 기능                                                            | 세부 사항                                                                                        |
+|:---                                                           |:---                                                                                            |
+| [선행 컴파일(AOT)](tools/cli/aot-compiler)                     | Angular 구성 요소 템플릿을 미리 컴파일합니다.                                                       |
+| [프로덕션 모드](tools/cli/deployment#development-only-features) | 애플리케이션을 최상의 런타임 성능을 위해 최적화합니다.                                                   |
+| 번들링                                                       | 여러 애플리케이션 및 라이브러리 파일을 최소한의 배포 파일 수로 연결합니다.                               |
+| 축소                                                         | 과도한 공백, 주석 및 선택적 토큰을 제거합니다.                                                      |
+| 변수명 변경                                                  | 함수, 클래스 및 변수를 더 짧고 임의의 식별자로 이름을 변경합니다.                                     |
+| 사용되지 않는 코드 제거                                        | 참조되지 않는 모듈 및 사용하지 않는 코드를 제거합니다.                                                |
 
-See [`ng build`](cli/build) for more about CLI build options and their effects.
+CLI 빌드 옵션과 그 효과에 대한 자세한 내용은 [`ng build`](cli/build)를 참조하세요.
 
-### Development-only features
+### 개발 전용 기능
 
-When you run an application locally using `ng serve`, Angular uses the development configuration
-at runtime which enables:
+`ng serve`를 사용하여 애플리케이션을 로컬에서 실행할 때 Angular는 런타임에 개발 구성을 사용하여 다음과 같은 기능을 활성화합니다:
 
-* Extra safety checks such as [`expression-changed-after-checked`](errors/NG0100) detection.
-* More detailed error messages.
-* Additional debugging utilities such as the global `ng` variable with [debugging functions](api#core-global) and [Angular DevTools](tools/devtools) support.
+* [`expression-changed-after-checked`](errors/NG0100) 감지와 같은 추가 안전성 검사.
+* 보다 상세한 오류 메시지.
+* 전역 `ng` 변수와 [디버깅 함수](api#core-global) 및 [Angular DevTools](tools/devtools) 지원과 같은 추가 디버깅 유틸리티.
 
-These features are helpful during development, but they require extra code in the app, which is
-undesirable in production. To ensure these features do not negatively impact bundle size for end users, Angular CLI
-removes development-only code from the bundle when building for production.
+이러한 기능은 개발하는 동안 유용하지만, 애플리케이션에 추가 코드를 요구하므로 프로덕션에서는 바람직하지 않습니다. 이러한 기능이 최종 사용자에게 번들 크기에 부정적인 영향을 미치지 않도록 Angular CLI는 프로덕션용 빌드 시 번들에서 개발 전용 코드를 제거합니다.
 
-Building your application with `ng build` by default uses the `production` configuration which removes these features from the output for optimal bundle size.
+애플리케이션을 기본적으로 `ng build`로 빌드하면 `production` 구성을 사용하여 최적의 번들 크기를 위해 이러한 기능을 출력에서 제거합니다.
 
 ## `--deploy-url`
 
-`--deploy-url` is a command line option used to specify the base path for resolving relative URLs for assets such as images, scripts, and style sheets at *compile* time.
+`--deploy-url`은 자산(이미지, 스크립트 및 스타일 시트와 같은)의 상대 URL을 *컴파일* 시 해결하기 위한 기본 경로를 지정하는 데 사용되는 명령줄 옵션입니다.
 
 <docs-code language="shell">
 
@@ -128,7 +125,7 @@ ng build --deploy-url /my/assets
 
 </docs-code>
 
-The effect and purpose of `--deploy-url` overlaps with [`<base href>`](guide/routing/common-router-tasks). Both can be used for initial scripts, stylesheets, lazy scripts, and css resources.
+`--deploy-url`의 효과와 목적은 [`<base href>`](guide/routing/common-router-tasks)와 중복됩니다. 두 가지 모두 초기 스크립트, 스타일시트, 지연 스크립트 및 CSS 리소스에 사용할 수 있습니다.
 
-Unlike `<base href>` which can be defined in a single place at runtime, the `--deploy-url` needs to be hard-coded into an application at build time.
-Prefer `<base href>` where possible.
+실행 시 단일 위치에서 정의할 수 있는 `<base href>`와 달리, `--deploy-url`은 빌드 시간에 애플리케이션에 하드 코딩되어야 합니다.
+가능한 경우 `<base href>`를 선호하십시오.
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/end-to-end.md b/adev/src/content/tools/cli/end-to-end.md
index c1f888b49788..e4dc34a860a1 100644
--- a/adev/src/content/tools/cli/end-to-end.md
+++ b/adev/src/content/tools/cli/end-to-end.md
@@ -1,10 +1,10 @@
-# End to End Testing
+# 엔드 투 엔드 테스트
 
-End-to-end or (E2E) testing is a form of testing used to assert your entire application works as expected from start to finish or _"end-to-end"_. E2E testing differs from unit testing in that it is completely decoupled from the underlying implementation details of your code. It is typically used to validate an application in a way that mimics the way a user would interact with it. This page serves as a guide to getting started with end-to-end testing in Angular using the Angular CLI.
+엔드 투 엔드(E2E) 테스트는 전체 애플리케이션이 처음부터 끝까지 예상대로 작동하는지 확인하기 위해 사용되는 테스트의 형태입니다. E2E 테스트는 코드의 기본 구현 세부 사항과는 완전히 분리되어 있다는 점에서 단위 테스트와 다릅니다. 일반적으로 사용자가 애플리케이션과 상호 작용하는 방식을 모방하여 애플리케이션을 검증하는 데 사용됩니다. 이 페이지는 Angular CLI를 사용하여 Angular에서 엔드 투 엔드 테스트를 시작하는 방법에 대한 가이드 역할을 합니다.
 
-## Set Up E2E Testing
+## E2E 테스트 설정
 
-The Angular CLI downloads and installs everything you need to run end-to-end tests for your Angular application.
+Angular CLI는 Angular 애플리케이션에 대한 엔드 투 엔드 테스트를 실행하는 데 필요한 모든 것을 다운로드하고 설치합니다.
 
 <docs-code language="shell">
 
@@ -12,22 +12,22 @@ ng e2e
 
 </docs-code>
 
-The `ng e2e` command will first check your project for the "e2e" target. If it can't locate it, the CLI will then prompt you which e2e package you would like to use and walk you through the setup.
+`ng e2e` 명령은 먼저 프로젝트에서 "e2e" 대상을 확인합니다. 이를 찾을 수 없는 경우, CLI는 사용하려는 e2e 패키지를 묻고 설정 과정을 안내합니다.
 
 <docs-code language="shell">
 
-Cannot find "e2e" target for the specified project.
-You can add a package that implements these capabilities.
+지정된 프로젝트에 대한 "e2e" 대상을 찾을 수 없습니다.
+이러한 기능을 구현하는 패키지를 추가할 수 있습니다.
 
-For example:
+예를 들어:
 Cypress: ng add @cypress/schematic
 Nightwatch: ng add @nightwatch/schematics
 WebdriverIO: ng add @wdio/schematics
 Playwright: ng add playwright-ng-schematics
 Puppeteer: ng add @puppeteer/ng-schematics
 
-Would you like to add a package with "e2e" capabilities now?
-No
+지금 "e2e" 기능이 있는 패키지를 추가하시겠습니까?
+아니요
 ❯ Cypress
 Nightwatch
 WebdriverIO
@@ -36,11 +36,11 @@ Puppeteer
 
 </docs-code>
 
-If you don't find the test runner you would like to use from the list above, you can manually add a package using `ng add`.
+위 목록에서 사용하려는 테스트 러너를 찾지 못한 경우 `ng add`를 사용하여 패키지를 수동으로 추가할 수 있습니다.
 
-## Running E2E Tests
+## E2E 테스트 실행
 
-Now that your application is configured for end-to-end testing we can now run the same command to execute your tests.
+이제 애플리케이션이 엔드 투 엔드 테스트에 맞게 구성되었으므로 동일한 명령을 실행하여 테스트를 실행할 수 있습니다.
 
 <docs-code language="shell">
 
@@ -48,14 +48,14 @@ ng e2e
 
 </docs-code>
 
-Note, their isn't anything "special" about running your tests with any of the integrated e2e packages. The `ng e2e` command is really just running the `e2e` builder under the hood. You can always [create your own custom builder](tools/cli/cli-builder#creating-a-builder) named `e2e` and run it using `ng e2e`.
+특히 통합된 e2e 패키지를 사용하여 테스트를 실행하는 것에 대해 "특별한" 점은 없습니다. `ng e2e` 명령은 기본적으로 `e2e` 빌더를 실행하고 있습니다. 항상 [자신만의 커스텀 빌더](tools/cli/cli-builder#creating-a-builder)인 `e2e`를 생성하고 이를 사용하여 `ng e2e`로 실행할 수 있습니다.
 
-## More information on end-to-end testing tools
+## 엔드 투 엔드 테스트 도구에 대한 추가 정보
 
-| Testing Tool | Details                                                                                                              |
+| 테스트 도구   | 세부 정보                                                                                                            |
 | :----------- | :------------------------------------------------------------------------------------------------------------------- |
-| Cypress      | [Getting started with Cypress](https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test) |
-| Nightwatch   | [Getting started with Nightwatch](https://nightwatchjs.org/guide/writing-tests/introduction.html)                    |
-| WebdriverIO  | [Getting started with Webdriver.io](https://webdriver.io/docs/gettingstarted)                                        |
-| Playwright   | [Getting started with Playwright](https://playwright.dev/docs/writing-tests)                                         |
-| Puppeteer    | [Getting started with Puppeteer](https://pptr.dev)                                                                   |
+| Cypress      | [Cypress 시작하기](https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test)          |
+| Nightwatch   | [Nightwatch 시작하기](https://nightwatchjs.org/guide/writing-tests/introduction.html)                              |
+| WebdriverIO  | [Webdriver.io 시작하기](https://webdriver.io/docs/gettingstarted)                                                 |
+| Playwright   | [Playwright 시작하기](https://playwright.dev/docs/writing-tests)                                                   |
+| Puppeteer    | [Puppeteer 시작하기](https://pptr.dev)                                                                             |
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/environments.md b/adev/src/content/tools/cli/environments.md
index a9a667acd770..a4b5d44c0e96 100644
--- a/adev/src/content/tools/cli/environments.md
+++ b/adev/src/content/tools/cli/environments.md
@@ -1,13 +1,13 @@
-# Configuring application environments
+# 애플리케이션 환경 구성하기
 
-You can define different named build configurations for your project, such as `development` and `staging`, with different defaults.
+프로젝트에 대해 `development`와 `staging`과 같은 다른 이름의 빌드 구성을 정의할 수 있으며, 각각의 기본값이 다를 수 있습니다.
 
-Each named configuration can have defaults for any of the options that apply to the various builder targets, such as `build`, `serve`, and `test`.
-The [Angular CLI](tools/cli) `build`, `serve`, and `test` commands can then replace files with appropriate versions for your intended target environment.
+각 이름 구성은 `build`, `serve` 및 `test`와 같은 다양한 빌더 대상에 적용되는 모든 옵션에 대한 기본값을 가질 수 있습니다.
+[Angular CLI](tools/cli) `build`, `serve` 및 `test` 명령은 이후 대상 환경에 맞는 적절한 버전으로 파일을 교체할 수 있습니다.
 
-## Angular CLI configurations
+## Angular CLI 구성
 
-Angular CLI builders support a `configurations` object, which allows overwriting specific options for a builder based on the configuration provided on the command line.
+Angular CLI 빌더는 명령줄에 제공된 구성에 따라 빌더에 대한 특정 옵션을 덮어쓰는 `configurations` 객체를 지원합니다.
 
 <docs-code language="json">
 
@@ -18,11 +18,11 @@ Angular CLI builders support a `configurations` object, which allows overwriting
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            // By default, disable source map generation.
+            // 기본적으로 소스 맵 생성을 비활성화합니다.
             "sourceMap": false
           },
           "configurations": {
-            // For the `debug` configuration, enable source maps.
+            // `debug` 구성에 대해 소스 맵을 활성화합니다.
             "debug": {
               "sourceMap": true
             }
@@ -36,7 +36,7 @@ Angular CLI builders support a `configurations` object, which allows overwriting
 
 </docs-code>
 
-You can choose which configuration to use with the `--configuration` option.
+`--configuration` 옵션을 사용하여 사용할 구성을 선택할 수 있습니다.
 
 <docs-code language="shell">
 
@@ -44,7 +44,7 @@ ng build --configuration debug
 
 </docs-code>
 
-Configurations can be applied to any Angular CLI builder. Multiple configurations can be specified with a comma separator. The configurations are applied in order, with conflicting options using the value from the last configuration.
+구성은 모든 Angular CLI 빌더에 적용될 수 있습니다. 여러 구성을 쉼표로 구분하여 지정할 수 있습니다. 구성은 순서대로 적용되며, 충돌하는 옵션은 마지막 구성에서 값을 사용합니다.
 
 <docs-code language="shell">
 
@@ -52,12 +52,12 @@ ng build --configuration debug,production,customer-facing
 
 </docs-code>
 
-## Configure environment-specific defaults
+## 환경별 기본값 구성
 
-`@angular-devkit/build-angular:browser` supports file replacements, an option for substituting source files before executing a build.
-Using this in combination with `--configuration` provides a mechanism for configuring environment-specific data in your application.
+`@angular-devkit/build-angular:browser`는 빌드를 실행 전에 소스 파일을 대체할 수 있는 파일 교체 옵션을 지원합니다.
+이를 `--configuration`와 결합하여 애플리케이션에서 환경별 데이터를 구성하는 메커니즘을 제공합니다.
 
-Start by [generating environments](cli/generate/environments) to create the `src/environments/` directory and configure the project to use file replacements.
+먼저 [환경 생성하기](cli/generate/environments)를 통해 `src/environments/` 디렉토리를 만들고 프로젝트를 파일 교체를 사용하도록 구성합니다.
 
 <docs-code language="shell">
 
@@ -65,10 +65,10 @@ ng generate environments
 
 </docs-code>
 
-The project's `src/environments/` directory contains the base configuration file, `environment.ts`, which provides the default configuration for production.
-You can override default values for additional environments, such as `development` and `staging`, in target-specific configuration files.
+프로젝트의 `src/environments/` 디렉토리에는 생산에 대한 기본 구성을 제공하는 기본 구성 파일 `environment.ts`가 포함되어 있습니다.
+대상별 구성 파일에서 `development` 및 `staging`과 같은 추가 환경에 대한 기본값을 덮어쓸 수 있습니다.
 
-For example:
+예를 들어:
 
 <docs-code language="text">
 
@@ -79,8 +79,8 @@ my-app/src/environments
 
 </docs-code>
 
-The base file `environment.ts`, contains the default environment settings.
-For example:
+기본 파일 `environment.ts`는 기본 환경 설정을 포함합니다.
+예를 들어:
 
 <docs-code language="typescript">
 
@@ -90,9 +90,9 @@ export const environment = {
 
 </docs-code>
 
-The `build` command uses this as the build target when no environment is specified.
-You can add further variables, either as additional properties on the environment object, or as separate objects.
-For example, the following adds a default for a variable to the default environment:
+`build` 명령은 환경이 지정되지 않았을 때 이 설정을 빌드 대상으로 사용합니다.
+환경 객체에 추가 속성으로 추가 변수를 추가하거나 별도의 객체로 추가할 수 있습니다.
+예를 들어, 다음은 기본 환경에 대한 변수의 기본값을 추가합니다:
 
 <docs-code language="typescript">
 
@@ -103,8 +103,8 @@ export const environment = {
 
 </docs-code>
 
-You can add target-specific configuration files, such as `environment.development.ts`.
-The following content sets default values for the development build target:
+대상별 구성 파일을 추가할 수 있습니다. 예를 들어 `environment.development.ts`.
+다음 내용은 개발 빌드 대상을 위한 기본값을 설정합니다:
 
 <docs-code language="typescript">
 
@@ -115,9 +115,9 @@ export const environment = {
 
 </docs-code>
 
-## Using environment-specific variables in your app
+## 애플리케이션에서 환경별 변수 사용하기
 
-To use the environment configurations you have defined, your components must import the original environments file:
+정의한 환경 구성을 사용하려면, 컴포넌트가 원래의 환경 파일을 import해야 합니다:
 
 <docs-code language="typescript">
 
@@ -125,24 +125,24 @@ import { environment } from './environments/environment';
 
 </docs-code>
 
-This ensures that the build and serve commands can find the configurations for specific build targets.
+이렇게 하면 빌드 및 서브 명령이 특정 빌드 대상을 위한 구성을 찾을 수 있습니다.
 
-The following code in the component file (`app.component.ts`) uses an environment variable defined in the configuration files.
+컴포넌트 파일(`app.component.ts`)의 다음 코드는 구성 파일에 정의된 환경 변수를 사용합니다.
 
 <docs-code language="typescript">
 
 import { environment } from './../environments/environment';
 
-// Fetches from `http://my-prod-url` in production, `http://my-dev-url` in development.
+// 프로덕션에서는 `http://my-prod-url`, 개발에서는 `http://my-dev-url`에서 가져옵니다.
 fetch(environment.apiUrl);
 
 </docs-code>
 
-The main CLI configuration file, `angular.json`, contains a `fileReplacements` section in the configuration for each build target, which lets you replace any file in the TypeScript program with a target-specific version of that file.
-This is useful for including target-specific code or variables in a build that targets a specific environment, such as production or staging.
+주요 CLI 구성 파일인 `angular.json`에는 각 빌드 대상의 구성을 위한 `fileReplacements` 섹션이 포함되어 있어 TypeScript 프로그램의 파일을 대상별 버전으로 교체할 수 있습니다.
+이는 특정 환경, 예를 들어 생산 또는 스테이징을 목표로 하는 빌드에 대상별 코드나 변수를 포함하는 데 유용합니다.
 
-By default no files are replaced, however `ng generate environments` sets up this configuration automatically.
-You can change or add file replacements for specific build targets by editing the `angular.json` configuration directly.
+기본적으로 파일은 교체되지 않지만 `ng generate environments`는 이 구성을 자동으로 설정합니다.
+특정 빌드 대상을 위해 파일 교체를 변경하거나 추가할 수 있으며, `angular.json` 구성을 직접 편집하여 할 수 있습니다.
 
 <docs-code language="json">
 
@@ -158,9 +158,9 @@ You can change or add file replacements for specific build targets by editing th
 
 </docs-code>
 
-This means that when you build your development configuration with `ng build --configuration development`, the `src/environments/environment.ts` file is replaced with the target-specific version of the file, `src/environments/environment.development.ts`.
+이는 개발 구성을 `ng build --configuration development`로 빌드할 때 `src/environments/environment.ts` 파일이 대상별 파일인 `src/environments/environment.development.ts`로 교체됨을 의미합니다.
 
-To add a staging environment, create a copy of `src/environments/environment.ts` called `src/environments/environment.staging.ts`, then add a `staging` configuration to `angular.json`:
+스테이징 환경을 추가하려면 `src/environments/environment.ts`의 복사본을 만들어 `src/environments/environment.staging.ts`라고 이름을 지정한 다음, `angular.json`에 `staging` 구성을 추가합니다:
 
 <docs-code language="json">
 
@@ -179,10 +179,10 @@ To add a staging environment, create a copy of `src/environments/environment.ts`
 
 </docs-code>
 
-You can add more configuration options to this target environment as well.
-Any option that your build supports can be overridden in a build target configuration.
+이 대상 환경에 대해 더 많은 구성 옵션을 추가할 수 있습니다.
+빌드에서 지원하는 모든 옵션은 빌드 대상 구성에서 덮어쓸 수 있습니다.
 
-To build using the staging configuration, run the following command:
+스테이징 구성으로 빌드하려면 다음 명령을 실행합니다:
 
 <docs-code language="shell">
 
@@ -190,8 +190,8 @@ ng build --configuration staging
 
 </docs-code>
 
-By default, the `build` target includes `production` and `development` configurations and `ng serve` uses the development build of the application.
-You can also configure `ng serve` to use the targeted build configuration if you set the `buildTarget` option:
+기본적으로 `build` 대상은 `production` 및 `development` 구성을 포함하고, `ng serve`는 애플리케이션의 개발 빌드를 사용합니다.
+`buildTarget` 옵션을 설정하면 `ng serve`가 대상 빌드 구성을 사용하도록 구성할 수도 있습니다:
 
 <docs-code language="json">
 
@@ -200,11 +200,11 @@ You can also configure `ng serve` to use the targeted build configuration if you
     "options": { … },
     "configurations": {
       "development": {
-        // Use the `development` configuration of the `build` target.
+        // `build` 대상의 `development` 구성을 사용합니다.
         "buildTarget": "my-app:build:development"
       },
       "production": {
-        // Use the `production` configuration of the `build` target.
+        // `build` 대상의 `production` 구성을 사용합니다.
         "buildTarget": "my-app:build:production"
       }
     },
@@ -213,5 +213,5 @@ You can also configure `ng serve` to use the targeted build configuration if you
 
 </docs-code>
 
-The `defaultConfiguration` option specifies which configuration is used by default.
-When `defaultConfiguration` is not set, `options` are used directly without modification.
+`defaultConfiguration` 옵션은 기본적으로 사용되는 구성을 지정합니다.
+`defaultConfiguration`이 설정되지 않으면 `options`는 수정 없이 직접 사용됩니다.
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/overview.md b/adev/src/content/tools/cli/overview.md
index 13090475d0ad..d9e40b2b3921 100644
--- a/adev/src/content/tools/cli/overview.md
+++ b/adev/src/content/tools/cli/overview.md
@@ -1,52 +1,51 @@
-# The Angular CLI
+# Angular CLI
 
-The Angular CLI is a command-line interface tool which allows you to scaffold, develop, test, deploy, and maintain Angular applications directly from a command shell.
+Angular CLI는 명령줄 인터페이스 도구로, 명령 셸에서 직접 Angular 애플리케이션을 스캐폴드하고 개발, 테스트, 배포 및 유지 관리할 수 있게 해줍니다.
 
-Angular CLI is published on npm as the `@angular/cli` package and includes a binary named `ng`. Commands invoking `ng` are using the Angular CLI.
+Angular CLI는 npm에서 `@angular/cli` 패키지로 게시되며, `ng`라는 이진 파일을 포함합니다. `ng`를 호출하는 명령은 Angular CLI를 사용하는 것입니다.
 
-<docs-callout title="Try Angular without local setup">
+<docs-callout title="로컬 설정 없이 Angular 사용해보기">
 
-If you are new to Angular, you might want to start with [Try it now!](tutorials/learn-angular), which introduces the essentials of Angular in the context of a ready-made basic online store app for you to examine and modify.
-This standalone tutorial takes advantage of the interactive [StackBlitz](https://stackblitz.com) environment for online development.
-You don't need to set up your local environment until you're ready.
+Angular에 처음이신가요? [지금 시도해보세요!](tutorials/learn-angular)를 시작해보는 것이 좋습니다. 이 튜토리얼은 수정하고 살펴볼 수 있는 기본 온라인 상점 앱의 맥락에서 Angular의 필수 요소를 소개합니다.
+이 독립형 튜토리얼은 온라인 개발을 위한 대화형 [StackBlitz](https://stackblitz.com) 환경을 활용합니다.
+준비가 될 때까지 로컬 환경을 설정할 필요가 없습니다.
 
 </docs-callout>
 
 <docs-card-container>
-  <docs-card title="Getting Started" link="Get Started" href="tools/cli/setup-local">
-    Install Angular CLI to create and build your first app.
+  <docs-card title="시작하기" link="시작하기" href="tools/cli/setup-local">
+    Angular CLI를 설치하여 첫 번째 앱을 생성하고 빌드합니다.
   </docs-card>
-  <docs-card title="Command Reference" link="Learn More" href="cli">
-    Discover CLI commands to make you more productive with Angular.
+  <docs-card title="명령 참조" link="더 알아보기" href="cli">
+    Angular로 생산성을 높이기 위한 CLI 명령을 알아보세요.
   </docs-card>
-  <docs-card title="Schematics" link="Learn More" href="tools/cli/schematics">
-    Create and run schematics to generate and modify source files in your application automatically.
+  <docs-card title="스키매틱" link="더 알아보기" href="tools/cli/schematics">
+    애플리케이션의 소스 파일을 자동으로 생성하고 수정하는 스키매틱을 생성하고 실행합니다.
   </docs-card>
-  <docs-card title="Builders" link="Learn More" href="tools/cli/cli-builder">
-    Create and run builders to perform complex transformations from your source code to generated build outputs.
+  <docs-card title="빌더" link="더 알아보기" href="tools/cli/cli-builder">
+    소스 코드에서 생성된 빌드 출력으로 복잡한 변환을 수행하는 빌더를 생성하고 실행합니다.
   </docs-card>
 </docs-card-container>
 
-## CLI command-language syntax
+## CLI 명령-언어 문법
 
-Angular CLI roughly follows Unix/POSIX conventions for option syntax.
+Angular CLI는 대략적으로 옵션 문법에 대한 Unix/POSIX 규칙을 따릅니다.
 
-### Boolean options
+### 불리언 옵션
 
-Boolean options have two forms: `--this-option` sets the flag to `true`, `--no-this-option` sets it to `false`.
-You can also use `--this-option=false` or `--this-option=true`.
-If neither option is supplied, the flag remains in its default state, as listed in the reference documentation.
+불리언 옵션은 두 가지 형태가 있습니다: `--this-option`은 플래그를 `true`로 설정하고, `--no-this-option`은 `false`로 설정합니다.
+`--this-option=false` 또는 `--this-option=true`를 사용할 수도 있습니다.
+어느 옵션도 제공되지 않으면 플래그는 참조 문서에 나열된 기본 상태를 유지합니다.
 
-### Array options
+### 배열 옵션
 
-Array options can be provided in two forms: `--option value1 value2` or `--option value1 --option value2`.
+배열 옵션은 두 가지 형태로 제공될 수 있습니다: `--option value1 value2` 또는 `--option value1 --option value2`입니다.
 
-### Key/value options
+### 키/값 옵션
 
-Some options like `--define` expect an array of `key=value` pairs as their values.
-Just like array options, key/value options can be provided in two forms:
-`--define 'KEY_1="value1"' KEY_2=true` or `--define 'KEY_1="value1"' --define KEY_2=true`.
+`--define`과 같은 일부 옵션은 배열의 `key=value` 쌍을 값으로 기대합니다.
+배열 옵션처럼, 키/값 옵션은 두 가지 형태로 제공될 수 있습니다: `--define 'KEY_1="value1"' KEY_2=true` 또는 `--define 'KEY_1="value1"' --define KEY_2=true`입니다.
 
-### Relative paths
+### 상대 경로
 
-Options that specify files can be given as absolute paths, or as paths relative to the current working directory, which is generally either the workspace or project root.
+파일을 지정하는 옵션은 절대 경로로 제공할 수 있으며, 현재 작업 디렉토리(일반적으로 작업 공간 또는 프로젝트 루트)에 상대적인 경로로도 제공할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/schematics-authoring.md b/adev/src/content/tools/cli/schematics-authoring.md
index 06f0295fc323..8eb83774f9b2 100644
--- a/adev/src/content/tools/cli/schematics-authoring.md
+++ b/adev/src/content/tools/cli/schematics-authoring.md
@@ -1,47 +1,47 @@
-# Authoring schematics
+# 스키마 작성
 
-You can create your own schematics to operate on Angular projects.
-Library developers typically package schematics with their libraries to integrate them with the Angular CLI.
-You can also create stand-alone schematics to manipulate the files and constructs in Angular applications as a way of customizing them for your development environment and making them conform to your standards and constraints.
-Schematics can be chained, running other schematics to perform complex operations.
+Angular 프로젝트에서 작동하는 자체 스키마를 만들 수 있습니다.  
+라이브러리 개발자는 일반적으로 스키마를 라이브러리와 함께 패키징하여 Angular CLI와 통합합니다.  
+또한 Angular 애플리케이션의 파일과 구성 요소를 조작할 수 있는 독립적인 스키마를 만들어 개발 환경에 맞게 사용자화하고 표준과 제약 조건에 맞출 수 있습니다.  
+스키마는 체이닝할 수 있으며, 복잡한 작업을 수행하기 위해 다른 스키마를 실행합니다.
 
-Manipulating the code in an application has the potential to be both very powerful and correspondingly dangerous.
-For example, creating a file that already exists would be an error, and if it was applied immediately, it would discard all the other changes applied so far.
-The Angular Schematics tooling guards against side effects and errors by creating a virtual file system.
-A schematic describes a pipeline of transformations that can be applied to the virtual file system.
-When a schematic runs, the transformations are recorded in memory, and only applied in the real file system once they're confirmed to be valid.
+애플리케이션의 코드를 조작하는 것은 매우 강력할 수 있지만 그에 상응하는 위험도 따릅니다.  
+예를 들어, 이미 존재하는 파일을 생성하는 것은 오류를 발생시키며, 즉시 적용되면 지금까지 적용된 모든 다른 변경 사항이 폐기됩니다.  
+Angular 스키마 툴은 가상 파일 시스템을 생성하여 부작용과 오류로부터 보호합니다.  
+스키마는 가상 파일 시스템에 적용할 수 있는 변환의 파이프라인을 설명합니다.  
+스키마가 실행되면 변환이 메모리에 기록되고, 유효성이 확인되면 실제 파일 시스템에 적용됩니다.
 
-## Schematics concepts
+## 스키마 개념
 
-The public API for schematics defines classes that represent the basic concepts.
+스키마의 공개 API는 기본 개념을 나타내는 클래스를 정의합니다.
 
-* The virtual file system is represented by a `Tree`.
-    The `Tree` data structure contains a *base* \(a set of files that already exists\) and a *staging area* \(a list of changes to be applied to the base\).
-    When making modifications, you don't actually change the base, but add those modifications to the staging area.
+* 가상 파일 시스템은 `Tree`로 나타납니다.  
+  `Tree` 데이터 구조는 *기본* \(이미 존재하는 파일 집합\)과 *스테이징 영역* \(기본에 적용할 변경 목록\)을 포함합니다.  
+  수정할 때는 실제로 기본을 변경하지 않고 그 수정 사항을 스테이징 영역에 추가합니다.
 
-* A `Rule` object defines a function that takes a `Tree`, applies transformations, and returns a new `Tree`.
-    The main file for a schematic, `index.ts`, defines a set of rules that implement the schematic's logic.
+* `Rule` 객체는 `Tree`를 받아 변환을 적용하고 새로운 `Tree`를 반환하는 함수를 정의합니다.  
+  스키마에 대한 주 파일인 `index.ts`는 스키마의 논리를 구현하는 규칙 세트를 정의합니다.
 
-* A transformation is represented by an `Action`.
-    There are four action types: `Create`, `Rename`, `Overwrite`, and `Delete`.
+* 변환은 `Action`으로 나타납니다.  
+  네 가지 액션 유형이 있습니다: `Create`, `Rename`, `Overwrite`, 및 `Delete`.
 
-* Each schematic runs in a context, represented by a `SchematicContext` object.
+* 각 스키마는 `SchematicContext` 객체로 표현되는 컨텍스트에서 실행됩니다.
 
-The context object passed into a rule provides access to utility functions and metadata that the schematic might need to work with, including a logging API to help with debugging.
-The context also defines a *merge strategy* that determines how changes are merged from the staged tree into the base tree.
-A change can be accepted or ignored, or throw an exception.
+규칙에 전달된 컨텍스트 객체는 스키마가 작업하는 데 필요할 수 있는 유틸리티 함수 및 메타데이터에 대한 접근을 제공합니다. 여기에는 디버깅을 도와주는 로깅 API도 포함됩니다.  
+컨텍스트는 또한 변화가 스테이징 트리에서 기본 트리로 어떻게 병합될지를 결정하는 *병합 전략*을 정의합니다.  
+변화는 수용하거나 무시할 수 있으며, 예외를 던질 수도 있습니다.
 
-### Defining rules and actions
+### 규칙 및 행동 정의
 
-When you create a new blank schematic with the [Schematics CLI](#schematics-cli), the generated entry function is a *rule factory*.
-A `RuleFactory` object defines a higher-order function that creates a `Rule`.
+[스키마 CLI](#schematics-cli)를 사용하여 새로운 빈 스키마를 생성할 때, 생성된 진입 함수는 *규칙 팩토리*입니다.  
+`RuleFactory` 객체는 `Rule`을 생성하는 고차 함수입니다.
 
 <docs-code header="index.ts" language="typescript">
 
 import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 
-// You don't have to export the function as default.
-// You can also have more than one rule factory per file.
+// 함수를 기본적으로 내보낼 필요는 없습니다.
+// 파일당 하나 이상의 규칙 팩토리를 가질 수도 있습니다.
 export function helloWorld(_options: any): Rule {
  return (tree: Tree,_context: SchematicContext) => {
    return tree;
@@ -50,11 +50,11 @@ export function helloWorld(_options: any): Rule {
 
 </docs-code>
 
-Your rules can make changes to your projects by calling external tools and implementing logic.
-You need a rule, for example, to define how a template in the schematic is to be merged into the hosting project.
+규칙은 외부 도구를 호출하고 논리를 구현하여 프로젝트를 변경할 수 있습니다.  
+예를 들어, 스키마의 템플릿이 호스팅 프로젝트에 어떻게 병합되는지를 정의하는 규칙이 필요합니다.
 
-Rules can make use of utilities provided with the `@schematics/angular` package.
-Look for helper functions for working with modules, dependencies, TypeScript, AST, JSON, Angular CLI workspaces and projects, and more.
+규칙은 `@schematics/angular` 패키지와 함께 제공되는 유틸리티를 사용할 수 있습니다.  
+모듈, 종속성, TypeScript, AST, JSON, Angular CLI 작업공간 및 프로젝트와 함께 작업할 수 있는 헬퍼 함수를 찾아보세요.
 
 <docs-code header="index.ts" language="typescript">
 
@@ -70,14 +70,14 @@ import {
 
 </docs-code>
 
-### Defining input options with a schema and interfaces
+### 스키마 및 인터페이스로 입력 옵션 정의
 
-Rules can collect option values from the caller and inject them into templates.
-The options available to your rules, with their allowed values and defaults, are defined in the schematic's JSON schema file, `<schematic>/schema.json`.
-Define variable or enumerated data types for the schema using TypeScript interfaces.
+규칙은 호출자로부터 옵션 값을 수집하고 이를 템플릿에 주입할 수 있습니다.  
+규칙에서 사용할 수 있는 옵션과 해당 허용 값 및 기본값은 스키마의 JSON 스키마 파일 `<schematic>/schema.json`에서 정의됩니다.  
+TypeScript 인터페이스를 사용하여 스키마의 변수를 정의하십시오.
 
-The schema defines the types and default values of variables used in the schematic.
-For example, the hypothetical "Hello World" schematic might have the following schema.
+스키마는 스키마에서 사용되는 변수의 유형과 기본값을 정의합니다.  
+예를 들어, 가상 "Hello World" 스키마는 다음과 같은 스키마를 가질 수 있습니다.
 
 <docs-code header="src/hello-world/schema.json" language="json">
 
@@ -95,20 +95,20 @@ For example, the hypothetical "Hello World" schematic might have the following s
 }
 </docs-code>
 
-See examples of schema files for the Angular CLI command schematics in [`@schematics/angular`](https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/application/schema.json).
+Angular CLI 명령 스키마에 대한 스키마 파일 예시는 [`@schematics/angular`](https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/application/schema.json)에서 확인할 수 있습니다.
 
-### Schematic prompts
+### 스키마 프롬프트
 
-Schematic *prompts* introduce user interaction into schematic execution.
-Configure schematic options to display a customizable question to the user.
-The prompts are displayed before the execution of the schematic, which then uses the response as the value for the option.
-This lets users direct the operation of the schematic without requiring in-depth knowledge of the full spectrum of available options.
+스키마 *프롬프트*는 스키마 실행에 사용자 상호작용을 도입합니다.  
+스키마 옵션을 구성하여 사용자에게 맞춤형 질문을 표시할 수 있습니다.  
+프롬프트는 스키마 실행 전에 표시되며, 그 다음 응답을 옵션의 값으로 사용합니다.  
+이를 통해 사용자는 사용할 수 있는 모든 옵션의 전체 범위에 대한 깊은 지식 없이도 스키마의 동작을 안내할 수 있습니다.
 
-The "Hello World" schematic might, for example, ask the user for their name, and display that name in place of the default name "world".
-To define such a prompt, add an `x-prompt` property to the schema for the `name` variable.
+예를 들어, "Hello World" 스키마는 사용자에게 이름을 묻고, 그 이름을 기본 이름 "world" 대신 표시할 수 있습니다.  
+이런 프롬프트를 정의하려면 `name` 변수의 스키마에 `x-prompt` 속성을 추가하십시오.
 
-Similarly, you can add a prompt to let the user decide whether the schematic uses color when executing its hello action.
-The schema with both prompts would be as follows.
+유사하게, 스키마가 hello 작업을 실행할 때 색상을 사용할지 여부를 결정하도록 사용자가 선택할 수 있도록 하는 프롬프트를 추가할 수 있습니다.  
+두 프롬프트가 모두 포함된 스키마는 다음과 같습니다.
 
 <docs-code header="src/hello-world/schema.json" language="json">
 
@@ -118,50 +118,50 @@ The schema with both prompts would be as follows.
             "type": "string",
             "minLength": 1,
             "default": "world",
-            "x-prompt": "What is your name?"
+            "x-prompt": "당신의 이름은 무엇입니까?"
         },
         "useColor": {
             "type": "boolean",
-            "x-prompt": "Would you like the response in color?"
+            "x-prompt": "응답을 색상으로 표시하시겠습니까?"
         }
     }
 }
 </docs-code>
 
-#### Prompt short-form syntax
+#### 프롬프트 단축 형식 구문
 
-These examples use a shorthand form of the prompt syntax, supplying only the text of the question.
-In most cases, this is all that is required.
-Notice however, that the two prompts expect different types of input.
-When using the shorthand form, the most appropriate type is automatically selected based on the property's schema.
-In the example, the `name` prompt uses the `input` type because it is a string property.
-The `useColor` prompt uses a `confirmation` type because it is a Boolean property.
-In this case, "yes" corresponds to `true` and "no" corresponds to `false`.
+이 예제는 질문의 텍스트만 제공하는 프롬프트 구문의 단축 형식을 사용합니다.  
+대부분의 경우, 이게 필요한 전부입니다.  
+그러나 두 프롬프트는 서로 다른 유형의 입력을 기대한다는 점에 유의하세요.  
+단축 형식을 사용할 때, 해당 속성의 스키마에 따라 가장 적합한 유형이 자동으로 선택됩니다.  
+예제에서는 `name` 프롬프트가 문자열 속성이므로 `input` 유형을 사용합니다.  
+`useColor` 프롬프트는 불리언 속성이므로 `confirmation` 유형을 사용합니다.  
+이 경우 "yes"는 `true`에 해당하고 "no"는 `false`에 해당합니다.
 
-There are three supported input types.
+지원되는 입력 유형은 세 가지입니다.
 
-| Input type   | Details |
+| 입력 유형   | 세부사항 |
 |:---          |:----    |
-| confirmation | A yes or no question; ideal for Boolean options.   |
-| input        | Textual input; ideal for string or number options. |
-| list         | A predefined set of allowed values.                |
+| confirmation | 예 또는 아니오 질문; 불리언 옵션에 가장 적합합니다.   |
+| input        | 텍스트 입력; 문자열 또는 숫자 옵션에 가장 적합합니다. |
+| list         | 허용된 값의 미리 정의된 집합입니다.                |
 
-In the short form, the type is inferred from the property's type and constraints.
+단축 형식에서는 유형이 속성의 유형과 제약 조건에서 유추됩니다.
 
-| Property schema | Prompt type |
+| 속성 스키마 | 프롬프트 유형 |
 |:---             |:---         |
 | "type": "boolean"  | confirmation \("yes"=`true`, "no"=`false`\)  |
 | "type": "string"   | input                                        |
-| "type": "number"   | input \(only valid numbers accepted\)        |
-| "type": "integer"  | input \(only valid numbers accepted\)        |
-| "enum": […] | list \(enum members become list selections\) |
+| "type": "number"   | input \(유효한 숫자만 수용\)        |
+| "type": "integer"  | input \(유효한 숫자만 수용\)        |
+| "enum": […] | list \(enum 구성 요소는 목록 선택이 됨\) |
 
-In the following example, the property takes an enumerated value, so the schematic automatically chooses the list type, and creates a menu from the possible values.
+다음 예제에서는 속성이 열거형 값을 취하므로, 스키마는 자동으로 목록 유형을 선택하고 가능한 값에서 메뉴를 생성합니다.
 
 <docs-code header="schema.json" language="json">
 
 "style": {
-  "description": "The file extension or preprocessor to use for style files.",
+  "description": "스타일 파일에 사용할 파일 확장자 또는 전처리기.",
   "type": "string",
   "default": "css",
   "enum": [
@@ -171,34 +171,34 @@ In the following example, the property takes an enumerated value, so the schemat
     "less",
     "styl"
   ],
-  "x-prompt": "Which stylesheet format would you like to use?"
+  "x-prompt": "어떤 스타일시트 형식을 사용하시겠습니까?"
 }
 
 </docs-code>
 
-The prompt runtime automatically validates the provided response against the constraints provided in the JSON schema.
-If the value is not acceptable, the user is prompted for a new value.
-This ensures that any values passed to the schematic meet the expectations of the schematic's implementation, so that you do not need to add additional checks within the schematic's code.
+프롬프트 런타임은 JSON 스키마에 제공된 제약 조건에 따라 제공된 응답을 자동으로 검증합니다.  
+값이 허용되지 않으면 사용자는 새로운 값을 다시 요청받습니다.  
+이렇게 하면 스키마에 전달된 모든 값이 스키마의 구현 기대사항을 충족하여 추가적인 검사 없이 스키마 코드 내에서 작업할 수 있습니다.
 
-#### Prompt long-form syntax
+#### 프롬프트 장황 형태 구문
 
-The `x-prompt` field syntax supports a long form for cases where you require additional customization and control over the prompt.
-In this form, the `x-prompt` field value is a JSON object with subfields that customize the behavior of the prompt.
+`x-prompt` 필드 구문은 프롬프트의 사용자 맞춤형 정의 및 동작 제어가 추가로 필요한 경우 더 긴 형식을 지원합니다.  
+이 형식에서는 `x-prompt` 필드 값이 프롬프트의 동작을 사용자 정의하는 하위 필드를 가진 JSON 객체입니다.
 
-| Field   | Data value |
+| 필드   | 데이터 값 |
 |:---     |:---        |
-| type    | `confirmation`, `input`, or `list` \(selected automatically in short form\) |
-| message | string \(required\)                                                         |
-| items   | string and/or label/value object pair \(only valid with type `list`\)       |
+| type    | `confirmation`, `input`, 또는 `list` \(단축 형식에서 자동 선택\) |
+| message | 문자열 \(필수\)                                                         |
+| items   | 문자열 및/또는 레이블/값 쌍 객체 \(유형 `list`에서만 유효\)       |
 
-The following example of the long form is from the JSON schema for the schematic that the CLI uses to [generate applications](https://github.com/angular/angular-cli/blob/ba8a6ea59983bb52a6f1e66d105c5a77517f062e/packages/schematics/angular/application/schema.json#L56).
-It defines the prompt that lets users choose which style preprocessor they want to use for the application being created.
-By using the long form, the schematic can provide more explicit formatting of the menu choices.
+장황형식의 다음 예제는 CLI가 응용 프로그램을 생성하는 데 사용하는 스키마의 JSON 스키마에서 가져온 것입니다.  
+응용 프로그램을 생성할 때 사용자가 원하는 스타일 전처리기를 선택하는 프롬프트를 정의합니다.  
+장황형식을 사용하면 스키마는 메뉴 선택의 형식을 더 명확하게 제공할 수 있습니다.
 
 <docs-code header="package/schematics/angular/application/schema.json" language="json">
 
 "style": {
-  "description": "The file extension or preprocessor to use for style files.",
+  "description": "스타일 파일에 사용할 파일 확장자 또는 전처리기.",
   "type": "string",
   "default": "css",
   "enum": [
@@ -208,7 +208,7 @@ By using the long form, the schematic can provide more explicit formatting of th
     "less"
   ],
   "x-prompt": {
-    "message": "Which stylesheet format would you like to use?",
+    "message": "어떤 스타일시트 형식을 사용하시겠습니까?",
     "type": "list",
     "items": [
       { "value": "css",  "label": "CSS" },
@@ -221,11 +221,11 @@ By using the long form, the schematic can provide more explicit formatting of th
 
 </docs-code>
 
-#### x-prompt schema
+#### x-prompt 스키마
 
-The JSON schema that defines a schematic's options supports extensions to allow the declarative definition of prompts and their respective behavior.
-No additional logic or changes are required to the code of a schematic to support the prompts.
-The following JSON schema is a complete description of the long-form syntax for the `x-prompt` field.
+스키마의 옵션을 정의하는 JSON 스키마는 프롬프트의 선언적 정의 및 각기 다른 동작을 허용하는 확장을 지원합니다.  
+프롬프트를 지원하기 위해 스키마의 코드에 추가적인 논리나 변경이 필요하지 않습니다.  
+다음 JSON 스키마는 `x-prompt` 필드의 장황형식 구문에 대한 완벽한 설명입니다.
 
 <docs-code header="x-prompt schema" language="json">
 
@@ -261,10 +261,10 @@ The following JSON schema is a complete description of the long-form syntax for
 
 </docs-code>
 
-## Schematics CLI
+## 스키마 CLI
 
-Schematics come with their own command-line tool.
-Using Node 6.9 or later, install the Schematics command line tool globally:
+스키마에는 자체 명령줄 도구가 있습니다.  
+Node 6.9 이상을 사용하여 전역적으로 스키마 명령줄 도구를 설치하십시오:
 
 <docs-code language="shell">
 
@@ -272,17 +272,17 @@ npm install -g @angular-devkit/schematics-cli
 
 </docs-code>
 
-This installs the `schematics` executable, which you can use to create a new schematics collection in its own project folder, add a new schematic to an existing collection, or extend an existing schematic.
+이 명령은 새로운 스키마 컬렉션을 생성할 수 있는 `schematics` 실행 파일을 설치합니다.  
+이 실행 파일은 고유 프로젝트 폴더를 생성하거나 기존 컬렉션에 새 스키마를 추가하거나 기존 스키마를 확장하는 데 사용할 수 있습니다.
 
-In the following sections, you will create a new schematics collection using the CLI to introduce the files and file structure, and some of the basic concepts.
+다음 섹션에서는 CLI를 사용하여 새로운 스키마 컬렉션을 생성하여 파일 및 파일 구조 및 기본 개념을 소개합니다.  
+그러나 스키마의 가장 일반적인 사용법은 Angular 라이브러리를 Angular CLI와 통합하는 것입니다.  
+스키마 CLI를 사용하지 않고 Angular 작업 공간의 라이브러리 프로젝트 내에서 스키마 파일을 직접 생성하여 작업을 수행합니다.  
+[라이브러리를 위한 스키마](tools/cli/schematics-for-libraries)를 참조하십시오.
 
-The most common use of schematics, however, is to integrate an Angular library with the Angular CLI.
-Do this by creating the schematic files directly within the library project in an Angular workspace, without using the Schematics CLI.
-See [Schematics for Libraries](tools/cli/schematics-for-libraries).
+### 스키마 컬렉션 생성
 
-### Creating a schematics collection
-
-The following command creates a new schematic named `hello-world` in a new project folder of the same name.
+다음 명령을 사용하여 새로운 프로젝트 폴더에 `hello-world`라는 이름의 새로운 스키마를 생성합니다.
 
 <docs-code language="shell">
 
@@ -290,11 +290,11 @@ schematics blank --name=hello-world
 
 </docs-code>
 
-The `blank` schematic is provided by the Schematics CLI.
-The command creates a new project folder \(the root folder for the collection\) and an initial named schematic in the collection.
+`blank` 스키마는 스키마 CLI에서 제공됩니다.  
+이 명령은 새 프로젝트 폴더 \(컬렉션의 루트 폴더\)와 컬렉션 내의 초기 이름 스키마를 생성합니다.
 
-Go to the collection folder, install your npm dependencies, and open your new collection in your favorite editor to see the generated files.
-For example, if you are using VS Code:
+컬렉션 폴더로 이동하고, npm 종속성을 설치한 후 새 컬렉션을 좋아하는 편집기로 열어 생성된 파일을 확인하십시오.  
+예를 들어, VS Code를 사용하는 경우:
 
 <docs-code language="shell">
 
@@ -305,14 +305,14 @@ code .
 
 </docs-code>
 
-The initial schematic gets the same name as the project folder, and is generated in `src/hello-world`.
-Add related schematics to this collection, and modify the generated skeleton code to define your schematic's functionality.
-Each schematic name must be unique within the collection.
+초기 스키마는 프로젝트 폴더와 동일한 이름을 가지며 `src/hello-world`에 생성됩니다.  
+이 컬렉션에 관련 스키마를 추가하고 생성된 골격 코드를 수정하여 스키마의 기능을 정의하십시오.  
+각 스키마 이름은 컬렉션 내에서 고유해야 합니다.
 
-### Running a schematic
+### 스키마 실행
 
-Use the `schematics` command to run a named schematic.
-Provide the path to the project folder, the schematic name, and any mandatory options, in the following format.
+`schematics` 명령을 사용하여 이름이 지정된 스키마를 실행하십시오.  
+프로젝트 폴더의 경로, 스키마 이름 및 필수 옵션을 제공해야 합니다. 다음 형식으로 작성하세요.
 
 <docs-code language="shell">
 
@@ -320,8 +320,8 @@ schematics <path-to-schematics-project>:<schematics-name> --<required-option>=<v
 
 </docs-code>
 
-The path can be absolute or relative to the current working directory where the command is executed.
-For example, to run the schematic you just generated \(which has no required options\), use the following command.
+경로는 현재 작업 디렉토리에 대해 절대 경로일 수도 있고 상대 경로일 수도 있습니다.  
+예를 들어, 방금 생성된 스키마를 실행하려면 \(필수 옵션이 없는 경우\) 다음 명령을 사용하십시오.
 
 <docs-code language="shell">
 
@@ -329,9 +329,9 @@ schematics .:hello-world
 
 </docs-code>
 
-### Adding a schematic to a collection
+### 컬렉션에 스키마 추가
 
-To add a schematic to an existing collection, use the same command you use to start a new schematics project, but run the command inside the project folder.
+기존 컬렉션에 스키마를 추가하려면 새 스키마 프로젝트를 시작하는 데 사용하는 것과 동일한 명령을 사용하되 프로젝트 폴더 내에서 명령을 실행합니다.
 
 <docs-code language="shell">
 
@@ -340,14 +340,14 @@ schematics blank --name=goodbye-world
 
 </docs-code>
 
-The command generates the new named schematic inside your collection, with a main `index.ts` file and its associated test spec.
-It also adds the name, description, and factory function for the new schematic to the collection's schema in the `collection.json` file.
+이 명령은 컬렉션 내에 새로운 이름의 스키마를 생성하며, 기본 `index.ts` 파일과 관련된 테스트 사양 파일을 추가합니다.  
+또한 새 스키마의 이름, 설명 및 팩토리 함수를 컬렉션의 스키마인 `collection.json` 파일에 추가합니다.
 
-## Collection contents
+## 컬렉션 내용
 
-The top level of the root project folder for a collection contains configuration files, a `node_modules` folder, and a `src/` folder.
-The `src/` folder contains subfolders for named schematics in the collection, and a schema, `collection.json`, which describes the collected schematics.
-Each schematic is created with a name, description, and factory function.
+컬렉션의 루트 프로젝트 폴더 최상위에는 구성 파일, `node_modules` 폴더 및 `src/` 폴더가 있습니다.  
+`src/` 폴더는 컬렉션 내의 이름이 지정된 스키마에 대한 하위 폴더와 스키마를 설명하는 `collection.json`을 포함합니다.  
+각 스키마는 이름, 설명 및 팩토리 함수와 함께 생성됩니다.
 
 <docs-code language="json">
 
@@ -356,7 +356,7 @@ Each schematic is created with a name, description, and factory function.
      "../node_modules/@angular-devkit/schematics/collection-schema.json",
   "schematics": {
     "hello-world": {
-      "description": "A blank schematic.",
+      "description": "빈 스키마입니다.",
       "factory": "./hello-world/index#helloWorld"
     }
   }
@@ -364,36 +364,36 @@ Each schematic is created with a name, description, and factory function.
 
 </docs-code>
 
-* The `$schema` property specifies the schema that the CLI uses for validation.
-* The `schematics` property lists named schematics that belong to this collection.
-    Each schematic has a plain-text description, and points to the generated entry function in the main file.
+* `$schema` 속성은 CLI가 검증을 위해 사용하는 스키마를 지정합니다.  
+* `schematics` 속성은 이 컬렉션에 속하는 이름이 지정된 스키마를 나열합니다.  
+  각 스키마는 간단한 텍스트 설명을 가지고 있으며 주 파일 내에서 생성된 진입 함수로 포인터를 설정합니다.
 
-* The `factory` property points to the generated entry function.
-    In this example, you invoke the `hello-world` schematic by calling the `helloWorld()` factory function.
+* `factory` 속성은 생성된 진입 함수를 가리킵니다.  
+  이 예에서는 `hello-world` 스키마를 `helloWorld()` 팩토리 함수를 호출하여 사용할 수 있습니다.
 
-* The optional  `schema` property points to a JSON schema file that defines the command-line options available to the schematic.
-* The optional `aliases` array specifies one or more strings that can be used to invoke the schematic.
-    For example, the schematic for the Angular CLI "generate" command has an alias "g", that lets you use the command `ng g`.
+* 선택적 `schema` 속성은 스키마에 사용할 수 있는 명령줄 옵션을 정의하는 JSON 스키마 파일을 가리킵니다.  
+* 선택적 `aliases` 배열은 스키마를 호출할 수 있는 하나 이상의 문자열을 지정합니다.  
+  예를 들어, Angular CLI "generate" 명령에 대한 스키마는 "g"라는 별칭을 가지고 있어 사용자가 `ng g` 명령을 사용할 수 있게 합니다.
 
-### Named schematics
+### 이름이 지정된 스키마
 
-When you use the Schematics CLI to create a blank schematics project, the new blank schematic is the first member of the collection, and has the same name as the collection.
-When you add a new named schematic to this collection, it is automatically added to the  `collection.json`  schema.
+스키마 CLI를 사용하여 빈 스키마 프로젝트를 생성할 때 새로운 빈 스키마는 컬렉션의 첫 번째 구성원이자 컬렉션과 동일한 이름을 가집니다.  
+이 컬렉션에 새로운 이름의 스키마를 추가하면 자동으로 `collection.json` 스키마에 추가됩니다.
 
-In addition to the name and description, each schematic has a `factory` property that identifies the schematic's entry point.
-In the example, you invoke the schematic's defined functionality by calling the `helloWorld()` function in the main file,  `hello-world/index.ts`.
+이름, 설명 외에도 각 스키마에는 스키마의 진입점을 식별하는 `factory` 속성이 있습니다.  
+예제를 통해 스키마의 정의된 기능을 `hello-world/index.ts`의 `helloWorld()` 함수를 호출하여 사용할 수 있습니다.
 
 <img alt="overview" src="assets/images/guide/schematics/collection-files.gif">
 
-Each named schematic in the collection has the following main parts.
+컬렉션 내의 각 이름이 지정된 스키마는 다음과 같은 주요 부분으로 구성됩니다.
 
-| Parts          | Details |
+| 구성 요소          | 세부 정보 |
 |:---            |:---     |
-| `index.ts`     | Code that defines the transformation logic for a named schematic.  |
-| `schema.json`  | Schematic variable definition.                                     |
-| `schema.d.ts`  | Schematic variables.                                               |
-| `files/`       | Optional component/template files to replicate.                    |
-
-It is possible for a schematic to provide all of its logic in the `index.ts` file, without additional templates.
-You can create dynamic schematics for Angular, however, by providing components and templates in the `files` folder, like those in standalone Angular projects.
-The logic in the index file configures these templates by defining rules that inject data and modify variables.
+| `index.ts`     | 이름이 지정된 스키마의 변환 논리를 정의하는 코드입니다.  |
+| `schema.json`  | 스키마 변수 정의입니다.                                     |
+| `schema.d.ts`  | 스키마 변수입니다.                                               |
+| `files/`       | 복제할 선택적 구성 요소/템플릿 파일입니다.                    |
+
+스키마는 추가적인 템플릿 없이 `index.ts` 파일에 모든 논리를 제공할 수 있습니다.  
+그러나 Angular용 동적 스키마를 생성할 수 있으며, 이를 위해 `files` 폴더에 구성 요소와 템플릿을 제공하여 독립형 Angular 프로젝트의 예와 같이 만들 수 있습니다.  
+인덱스 파일의 논리는 이러한 템플릿을 데이터 주입 및 변수 수정을 정의하는 규칙을 통해 구성합니다.
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/schematics-for-libraries.md b/adev/src/content/tools/cli/schematics-for-libraries.md
index 79fac147818b..5b33f3cafdab 100644
--- a/adev/src/content/tools/cli/schematics-for-libraries.md
+++ b/adev/src/content/tools/cli/schematics-for-libraries.md
@@ -1,99 +1,100 @@
-# Schematics for libraries
+# 라이브러리 스키매틱
 
-When you create an Angular library, you can provide and package it with schematics that integrate it with the Angular CLI.
-With your schematics, your users can use `ng add` to install an initial version of your library,
-`ng generate` to create artifacts defined in your library, and `ng update` to adjust their project for a new version of your library that introduces breaking changes.
+Angular 라이브러리를 만들 때, Angular CLI와 통합되는 스키매틱을 제공하고 패키징할 수 있습니다. 
+당신의 스키매틱을 사용하면 사용자가 `ng add`를 통해 라이브러리의 초기 버전을 설치하고,
+`ng generate`를 통해 라이브러리에 정의된 아티팩트를 생성하며, `ng update`를 사용하여 프로젝트를 새 버전의 라이브러리에 맞게 조정할 수 있습니다. 
+이 과정에서 라이브러리가 파괴적인 변경사항을 도입합니다.
 
-All three types of schematics can be part of a collection that you package with your library.
+세 가지 유형의 스키매틱은 모두 라이브러리와 함께 패키징되는 컬렉션의 일부가 될 수 있습니다.
 
-## Creating a schematics collection
+## 스키매틱 컬렉션 만들기
 
-To start a collection, you need to create the schematic files.
-The following steps show you how to add initial support without modifying any project files.
+컬렉션을 시작하려면, 스키매틱 파일을 생성해야 합니다. 
+다음 단계를 통해 프로젝트 파일을 수정하지 않고 초기 지원을 추가하는 방법을 보여줍니다.
 
-1. In your library's root folder, create a `schematics` folder.
-1. In the `schematics/` folder, create an `ng-add` folder for your first schematic.
-1. At the root level of the `schematics` folder, create a `collection.json` file.
-1. Edit the `collection.json` file to define the initial schema for your collection.
+1. 라이브러리의 루트 폴더에서 `schematics` 폴더를 생성합니다.
+1. `schematics/` 폴더 내에 첫 번째 스키매틱을 위한 `ng-add` 폴더를 생성합니다.
+1. `schematics` 폴더의 루트 수준에서 `collection.json` 파일을 생성합니다.
+1. `collection.json` 파일을 편집하여 컬렉션의 초기 스키마를 정의합니다.
 
-    <docs-code header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.1.json"/>
+    <docs-code header="projects/my-lib/schematics/collection.json (스키매틱 컬렉션)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.1.json"/>
 
-    * The `$schema` path is relative to the Angular Devkit collection schema.
-    * The `schematics` object describes the named schematics that are part of this collection.
-    * The first entry is for a schematic named `ng-add`.
-        It contains the description, and points to the factory function that is called when your schematic is executed.
+    * `$schema` 경로는 Angular Devkit 컬렉션 스키마에 상대적입니다.
+    * `schematics` 객체는 이 컬렉션의 일부인 명명된 스키매틱을 설명합니다.
+    * 첫 번째 항목은 `ng-add`라는 이름의 스키매틱에 대한 것입니다. 
+        이 스키매틱은 설명을 포함하고, 스키매틱이 실행될 때 호출되는 공장 함수에 대한 포인터를 포함합니다.
 
-1. In your library project's `package.json` file, add a "schematics" entry with the path to your schema file.
-    The Angular CLI uses this entry to find named schematics in your collection when it runs commands.
+1. 라이브러리 프로젝트의 `package.json` 파일에 스키마 파일의 경로를 가진 "schematics" 항목을 추가합니다.
+    Angular CLI는 이 항목을 사용하여 명명된 스키매틱을 찾습니다.
 
-    <docs-code header="projects/my-lib/package.json (Schematics Collection Reference)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json" visibleRegion="collection"/>
+    <docs-code header="projects/my-lib/package.json (스키매틱 컬렉션 참조)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json" visibleRegion="collection"/>
 
-The initial schema that you have created tells the CLI where to find the schematic that supports the `ng add` command.
-Now you are ready to create that schematic.
+당신이 생성한 초기 스키마는 CLI가 `ng add` 명령을 지원하는 스키매틱을 찾는 위치를 알려줍니다.
+이제 그 스키매틱을 생성할 준비가 되었습니다.
 
-## Providing installation support
+## 설치 지원 제공
 
-A schematic for the `ng add` command can enhance the initial installation process for your users.
-The following steps define this type of schematic.
+`ng add` 명령에 대한 스키매틱은 사용자의 초기 설치 프로세스를 향상시킬 수 있습니다.
+다음 단계는 이 유형의 스키매틱을 정의합니다.
 
-1. Go to the `<lib-root>/schematics/ng-add` folder.
-1. Create the main file, `index.ts`.
-1. Open `index.ts` and add the source code for your schematic factory function.
+1. `<lib-root>/schematics/ng-add` 폴더로 이동합니다.
+1. 주요 파일인 `index.ts`를 생성합니다.
+1. `index.ts`를 열고 스키매틱 공장 함수의 소스 코드를 추가합니다.
 
-    <docs-code header="projects/my-lib/schematics/ng-add/index.ts (ng-add Rule Factory)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts"/>
+    <docs-code header="projects/my-lib/schematics/ng-add/index.ts (ng-add 규칙 공장)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts"/>
 
-The Angular CLI will install the latest version of the library automatically, and this example is taking it a step further by adding the `MyLibModule` to the root of the application. The `addRootImport` function accepts a callback that needs to return a code block. You can write any code inside of the string tagged with the `code` function and any external symbol have to be wrapped with the `external` function to ensure that the appropriate import statements are generated.
+Angular CLI는 라이브러리의 최신 버전을 자동으로 설치하며, 이 예시는 애플리케이션의 루트에 `MyLibModule`을 추가하는 한 단계 더 나아갑니다. `addRootImport` 함수는 코드 블록을 반환해야 하는 콜백을 받아들입니다. `code` 함수로 태그가 지정된 문자열 내부에 어떤 코드든 작성할 수 있으며, 외부 기호는 적절한 import 문이 생성되도록 `external` 함수로 감싸야 합니다.
 
-### Define dependency type
+### 종속성 유형 정의
 
-Use the `save` option of `ng-add` to configure if the library should be added to the `dependencies`, the `devDependencies`, or not saved at all in the project's `package.json` configuration file.
+`ng-add`의 `save` 옵션을 사용하여 라이브러리가 `dependencies`, `devDependencies`에 추가되거나 전혀 저장되지 않도록 구성합니다.
 
-<docs-code header="projects/my-lib/package.json (ng-add Reference)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json" visibleRegion="ng-add"/>
+<docs-code header="projects/my-lib/package.json (ng-add 참조)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json" visibleRegion="ng-add"/>
 
-Possible values are:
+가능한 값은 다음과 같습니다:
 
-| Values              | Details |
-|:---                 |:---     |
-| `false`             | Don't add the package to `package.json` |
-| `true`              | Add the package to the dependencies     |
-| `"dependencies"`    | Add the package to the dependencies     |
-| `"devDependencies"` | Add the package to the devDependencies  |
+| 값                  | 세부사항 |
+|:---                 |:---      |
+| `false`             | `package.json`에 패키지를 추가하지 않음 |
+| `true`              | 패키지를 종속성에 추가 |
+| `"dependencies"`    | 패키지를 종속성에 추가 |
+| `"devDependencies"` | 패키지를 devDependencies에 추가 |
 
-## Building your schematics
+## 스키매틱 빌드
 
-To bundle your schematics together with your library, you must configure the library to build the schematics separately, then add them to the bundle.
-You must build your schematics *after* you build your library, so they are placed in the correct directory.
+스키매틱을 라이브러리와 함께 번들로 묶으려면, 라이브러리가 스키매틱을 별도로 빌드하도록 구성한 다음, 이를 번들에 추가해야 합니다.
+라이브러리를 빌드한 후에 스키매틱을 빌드해야 하므로 올바른 디렉토리에 배치됩니다.
 
-* Your library needs a custom Typescript configuration file with instructions on how to compile your schematics into your distributed library
-* To add the schematics to the library bundle, add scripts to the library's `package.json` file
+* 라이브러리에는 스키매틱을 배포 라이브러리로 컴파일하는 방법에 대한 지침이 포함된 사용자 지정 Typescript 구성 파일이 필요합니다.
+* 스키매틱을 라이브러리 번들에 추가하려면, 라이브러리의 `package.json` 파일에 스크립트를 추가합니다.
 
-Assume you have a library project `my-lib` in your Angular workspace.
-To tell the library how to build the schematics, add a `tsconfig.schematics.json` file next to the generated `tsconfig.lib.json` file that configures the library build.
+Angular 작업 공간에 `my-lib`라는 라이브러리 프로젝트가 있다고 가정해 봅시다.
+스키매틱을 빌드하는 방법을 라이브러리에 알리려면, 자동 생성된 `tsconfig.lib.json` 파일 옆에 `tsconfig.schematics.json` 파일을 추가하여 라이브러리 빌드를 구성합니다.
 
-1. Edit the `tsconfig.schematics.json` file to add the following content.
+1. `tsconfig.schematics.json` 파일을 편집하여 다음 내용을 추가합니다.
 
-    <docs-code header="projects/my-lib/tsconfig.schematics.json (TypeScript Config)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/tsconfig.schematics.json"/>
+    <docs-code header="projects/my-lib/tsconfig.schematics.json (TypeScript 구성)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/tsconfig.schematics.json"/>
 
-    | Options | Details |
-    |:---     |:---     |
-    | `rootDir` | Specifies that your `schematics` folder contains the input files to be compiled.                                 |
-    | `outDir`  | Maps to the library's output folder. By default, this is the `dist/my-lib` folder at the root of your workspace. |
+    | 옵션      | 세부사항 |
+    |:---       |:---      |
+    | `rootDir` | `schematics` 폴더가 컴파일할 입력 파일을 포함하고 있음을 지정합니다.                                 |
+    | `outDir`  | 라이브러리의 출력 폴더에 매핑됩니다. 기본적으로 이 경로는 작업 공간의 루트에 있는 `dist/my-lib` 폴더입니다. |
 
-1. To make sure your schematics source files get compiled into the library bundle, add the following scripts to the `package.json` file in your library project's root folder \(`projects/my-lib`\).
+1. 스키매틱 원본 파일이 라이브러리 번들에 컴파일되도록 하려면, 라이브러리 프로젝트의 루트 폴더 ( `projects/my-lib` )의 `package.json` 파일에 다음 스크립트를 추가합니다.
 
-    <docs-code header="projects/my-lib/package.json (Build Scripts)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json"/>
+    <docs-code header="projects/my-lib/package.json (빌드 스크립트)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json"/>
 
-    * The `build` script compiles your schematic using the custom `tsconfig.schematics.json` file
-    * The `postbuild` script copies the schematic files after the `build` script completes
-    * Both the `build` and the `postbuild` scripts require the `copyfiles` and `typescript` dependencies.
-        To install the dependencies, navigate to the path defined in `devDependencies` and run `npm install` before you run the scripts.
+    * `build` 스크립트는 사용자 지정 `tsconfig.schematics.json` 파일을 사용하여 당신의 스키매틱을 컴파일합니다.
+    * `postbuild` 스크립트는 `build` 스크립트가 완료된 후 스키매틱 파일을 복사합니다.
+    * `build` 및 `postbuild` 스크립트는 `copyfiles`와 `typescript` 의존성을 요구합니다.
+        의존성을 설치하려면 `devDependencies`에 정의된 경로로 이동하여 `npm install`을 실행한 후 스크립트를 실행하십시오.
 
-## Providing generation support
+## 생성 지원 제공
 
-You can add a named schematic to your collection that lets your users use the `ng generate` command to create an artifact that is defined in your library.
+사용자가 `ng generate` 명령을 사용하여 라이브러리에 정의된 아티팩트를 생성할 수 있도록 하는 명명된 스키매틱을 컬렉션에 추가할 수 있습니다.
 
-We'll assume that your library defines a service, `my-service`, that requires some setup.
-You want your users to be able to generate it using the following CLI command.
+당신의 라이브러리가 일부 설정이 필요한 `my-service`라는 서비스를 정의한다고 가정하겠습니다.
+사용자가 다음 CLI 명령을 사용하여 이를 생성할 수 있기를 원합니다.
 
 <docs-code language="shell">
 
@@ -101,51 +102,51 @@ ng generate my-lib:my-service
 
 </docs-code>
 
-To begin, create a new subfolder, `my-service`, in the `schematics` folder.
+시작하려면, `schematics` 폴더 내에 새로운 하위 폴더 `my-service`를 만듭니다.
 
-### Configure the new schematic
+### 새로운 스키매틱 구성
 
-When you add a schematic to the collection, you have to point to it in the collection's schema, and provide configuration files to define options that a user can pass to the command.
+컬렉션에 스키매틱을 추가할 때, 컬렉션의 스키마에서 이를 가리키고 사용자가 명령에 전달할 수 있는 옵션을 정의하는 구성 파일을 제공해야 합니다.
 
-1. Edit the `schematics/collection.json` file to point to the new schematic subfolder, and include a pointer to a schema file that specifies inputs for the new schematic.
+1. `schematics/collection.json` 파일을 편집하여 새로운 스키매틱 하위 폴더를 가리키고, 새로운 스키매틱에 대한 입력을 지정하는 스키마 파일을 포함시킵니다.
 
-    <docs-code header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.json"/>
+    <docs-code header="projects/my-lib/schematics/collection.json (스키매틱 컬렉션)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.json"/>
 
-1. Go to the `<lib-root>/schematics/my-service` folder.
-1. Create a `schema.json` file and define the available options for the schematic.
+1. `<lib-root>/schematics/my-service` 폴더로 이동합니다.
+1. `schema.json` 파일을 생성하고 스키매틱에 대한 사용 가능한 옵션을 정의합니다.
 
-    <docs-code header="projects/my-lib/schematics/my-service/schema.json (Schematic JSON Schema)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.json"/>
+    <docs-code header="projects/my-lib/schematics/my-service/schema.json (스키매틱 JSON 스키마)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.json"/>
 
-    * *id*: A unique ID for the schema in the collection.
-    * *title*: A human-readable description of the schema.
-    * *type*: A descriptor for the type provided by the properties.
-    * *properties*: An object that defines the available options for the schematic.
+    * *id*: 컬렉션의 스키마에 대한 고유 ID.
+    * *title*: 스키마에 대한 사람이 읽을 수 있는 설명.
+    * *type*: 속성으로 제공되는 유형을 설명하는 설명자.
+    * *properties*: 스키매틱에 대한 사용 가능한 옵션을 정의하는 객체.
 
-    Each option associates key with a type, description, and optional alias.
-    The type defines the shape of the value you expect, and the description is displayed when the user requests usage help for your schematic.
+    각 옵션은 키와 유형, 설명 및 선택적 별칭을 연결합니다. 
+    유형은 예상되는 값의 모양을 정의하고 설명은 사용자가 스키매틱의 사용 도움말을 요청할 때 표시됩니다.
 
-    See the workspace schema for additional customizations for schematic options.
+    스키매틱 옵션에 대한 추가 사용자 정의는 작업 공간 스키마를 참조하십시오.
 
-1. Create a `schema.ts` file and define an interface that stores the values of the options defined in the `schema.json` file.
+1. `schema.ts` 파일을 생성하고 `schema.json` 파일에 정의된 옵션의 값을 저장하는 인터페이스를 정의합니다.
 
-    <docs-code header="projects/my-lib/schematics/my-service/schema.ts (Schematic Interface)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.ts"/>
+    <docs-code header="projects/my-lib/schematics/my-service/schema.ts (스키매틱 인터페이스)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.ts"/>
 
-    | Options | Details |
-    |:---     |:---     |
-    | name    | The name you want to provide for the created service.                                                                                       |
-    | path    | Overrides the path provided to the schematic. The default path value is based on the current working directory.                             |
-    | project | Provides a specific project to run the schematic on. In the schematic, you can provide a default if the option is not provided by the user. |
+    | 옵션     | 세부사항 |
+    |:---      |:---      |
+    | name     | 생성된 서비스에 제공할 이름.                                                                                       |
+    | path     | 스키매틱에 제공된 경로를 오버라이드합니다. 기본 경로 값은 현재 작업 디렉토리를 기반으로 합니다.                             |
+    | project  | 스키매틱을 실행할 특정 프로젝트를 제공합니다. 스키매틱에서 사용자가 옵션을 제공하지 않으면 기본값을 제공할 수 있습니다. |
 
-### Add template files
+### 템플릿 파일 추가
 
-To add artifacts to a project, your schematic needs its own template files.
-Schematic templates support special syntax to execute code and variable substitution.
+아티팩트를 프로젝트에 추가하기 위해 스키매틱은 고유한 템플릿 파일이 필요합니다. 
+스키매틱 템플릿은 코드 실행 및 변수 치환을 위한 특별 문법을 지원합니다.
 
-1. Create a `files/` folder inside the `schematics/my-service/` folder.
-1. Create a file named `__name@dasherize__.service.ts.template` that defines a template to use for generating files.
-    This template will generate a service that already has Angular's `HttpClient` injected into its constructor.
+1. `schematics/my-service/` 폴더 내에 `files/` 폴더를 생성합니다.
+1. 파일 생성 시 사용할 템플릿을 정의하는 `__name@dasherize__.service.ts.template`이라는 파일을 생성합니다. 
+    이 템플릿은 Angular의 `HttpClient`가 생성자의 주입되어 있는 서비스를 생성합니다.
 
-    <docs-code lang="typescript" header="projects/my-lib/schematics/my-service/files/__name@dasherize__.service.ts.template (Schematic Template)">
+    <docs-code lang="typescript" header="projects/my-lib/schematics/my-service/files/__name@dasherize__.service.ts.template (스키매틱 템플릿)">
 
     import { Injectable } from '@angular/core';
     import { HttpClient } from '@angular/common/http';
@@ -159,111 +160,108 @@ Schematic templates support special syntax to execute code and variable substitu
 
     </docs-code>
 
-    * The `classify` and `dasherize` methods are utility functions that your schematic uses to transform your source template and filename.
+    * `classify`와 `dasherize` 메서드는 스키매틱이 소스 템플릿 및 파일 이름을 변환하는 데 사용하는 유틸리티 함수입니다.
+    * `name`은 공장 함수에서 제공되는 속성으로, 스키마에서 정의한 동일한 `name`입니다.
 
-    * The `name` is provided as a property from your factory function.
-        It is the same `name` you defined in the schema.
+### 공장 함수 추가
 
-### Add the factory function
+이제 인프라가 마련되었으므로, 사용자의 프로젝트에서 필요한 수정을 수행하는 주요 함수를 정의할 수 있습니다.
 
-Now that you have the infrastructure in place, you can define the main function that performs the modifications you need in the user's project.
+스키매틱 프레임워크는 파일 템플릿 시스템을 제공하며, 이는 경로 및 콘텐츠 템플릿 모두를 지원합니다. 
+이 시스템은 입력 `Tree`에 로드된 파일 또는 경로 내 정의된 자리 표시자에 대해 작동하며, `Rule`로 전달된 값을 사용하여 채웁니다.
 
-The Schematics framework provides a file templating system, which supports both path and content templates.
-The system operates on placeholders defined inside files or paths that loaded in the input `Tree`.
-It fills these in using values passed into the `Rule`.
+이러한 데이터 구조 및 문법에 대한 자세한 내용은 [스키매틱 README](https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/schematics/README.md)를 참조하십시오.
 
-For details of these data structures and syntax, see the [Schematics README](https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/schematics/README.md).
+1. 주요 파일 `index.ts`를 생성하고 스키매틱 공장 함수의 소스 코드를 추가합니다.
+1. 먼저, 필요한 스키매틱 정의를 가져옵니다. 
+    스키매틱 프레임워크는 스키매틱을 실행할 때 규칙을 생성하고 사용하는 데 사용할 수 있는 많은 유틸리티 함수를 제공합니다.
 
-1. Create the main file `index.ts` and add the source code for your schematic factory function.
-1. First, import the schematics definitions you will need.
-    The Schematics framework offers many utility functions to create and use rules when running a schematic.
+    <docs-code header="projects/my-lib/schematics/my-service/index.ts (가져오기)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="schematics-imports"/>
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Imports)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="schematics-imports"/>
+1. 스키매틱 옵션에 대한 유형 정보를 제공하는 정의된 스키마 인터페이스를 가져옵니다.
 
-1. Import the defined schema interface that provides the type information for your schematic's options.
+    <docs-code header="projects/my-lib/schematics/my-service/index.ts (스키마 가져오기)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="schema-imports"/>
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="schema-imports"/>
+1. 생성 스키매틱을 구축하려면 빈 규칙 공장으로 시작합니다.
 
-1. To build up the generation schematic, start with an empty rule factory.
+    <docs-code header="projects/my-lib/schematics/my-service/index.ts (초기 규칙)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts" visibleRegion="factory"/>
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Initial Rule)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts" visibleRegion="factory"/>
+이 규칙 공장은 수정 없이 나무를 반환합니다. 
+옵션은 `ng generate` 명령으로 전달된 옵션 값입니다.
 
-This rule factory returns the tree without modification.
-The options are the option values passed through from the `ng generate` command.
+## 생성 규칙 정의
 
-## Define a generation rule
+이제 사용자의 애플리케이션을 수정하여 라이브러리에 정의된 서비스에 대한 설정을 준비하는 코드를 생성하는 기본 틀이 마련되었습니다.
 
-You now have the framework in place for creating the code that actually modifies the user's application to set it up for the service defined in your library.
+사용자가 라이브러리를 설치한 Angular 작업 공간에는 여러 프로젝트(애플리케이션과 라이브러리)가 포함되어 있습니다. 
+사용자는 커맨드 라인에서 프로젝트를 지정하거나 기본값으로 설정할 수 있습니다. 
+두 경우 모두, 당신의 코드는 이 스키매틱이 적용되는 특정 프로젝트를 식별해야 하므로, 프로젝트 구성에서 정보를 검색할 수 있습니다.
 
-The Angular workspace where the user installed your library contains multiple projects \(applications and libraries\).
-The user can specify the project on the command line, or let it default.
-In either case, your code needs to identify the specific project to which this schematic is being applied, so that you can retrieve information from the project configuration.
+이 작업은 공장 함수에 전달된 `Tree` 객체를 사용하여 수행됩니다. 
+`Tree` 메소드는 작업 공간의 전체 파일 트리에 접근할 수 있도록 해주어 스키매틱이 실행되는 동안 파일을 읽고 쓸 수 있습니다.
 
-Do this using the `Tree` object that is passed in to the factory function.
-The `Tree` methods give you access to the complete file tree in your workspace, letting you read and write files during the execution of the schematic.
+### 프로젝트 구성 가져오기
 
-### Get the project configuration
+1. 대상 프로젝트를 결정하기 위해 `workspaces.readWorkspace` 메소드를 사용하여 작업 공간 구성 파일인 `angular.json`의 내용을 읽습니다.
+    `workspaces.readWorkspace`를 사용하려면, `Tree`로부터 `workspaces.WorkspaceHost`를 생성해야 합니다.
+    다음 코드를 공장 함수에 추가합니다.
 
-1. To determine the destination project, use the `workspaces.readWorkspace` method to read the contents of the workspace configuration file, `angular.json`.
-    To use `workspaces.readWorkspace` you need to create a `workspaces.WorkspaceHost` from the `Tree`.
-    Add the following code to your factory function.
+    <docs-code header="projects/my-lib/schematics/my-service/index.ts (스키마 가져오기)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="workspace"/>
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="workspace"/>
+    컨텍스트가 존재하는지 확인하고 적절한 오류를 발생시킵니다.
 
-    Be sure to check that the context exists and throw the appropriate error.
+1. 이제 프로젝트 이름이 생겼으므로, 이를 사용하여 프로젝트별 구성 정보를 검색합니다.
 
-1. Now that you have the project name, use it to retrieve the project-specific configuration information.
+    <docs-code header="projects/my-lib/schematics/my-service/index.ts (프로젝트)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="project-info"/>
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Project)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="project-info"/>
+    `workspace.projects` 객체는 모든 프로젝트별 구성 정보를 포함합니다.
 
-    The `workspace.projects` object contains all the project-specific configuration information.
+1. `options.path`는 스키매틱이 적용된 후 스키매틱 템플릿 파일이 이동할 위치를 결정합니다.
 
-1. The `options.path` determines where the schematic template files are moved to once the schematic is applied.
+    스키매틱 스키마의 `path` 옵션은 기본적으로 현재 작업 디렉토리로 대체됩니다. 
+    `path`가 정의되지 않았으면 프로젝트 구성의 `sourceRoot`와 `projectType`을 사용하십시오.
 
-    The `path` option in the schematic's schema is substituted by default with the current working directory.
-    If the `path` is not defined, use the `sourceRoot` from the project configuration along with the `projectType`.
+    <docs-code header="projects/my-lib/schematics/my-service/index.ts (프로젝트 정보)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="path"/>
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Project Info)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="path"/>
+### 규칙 정의
 
-### Define the rule
+`Rule`은 외부 템플릿 파일을 사용할 수 있으며, 이를 변환하고 변환된 템플릿으로 다른 `Rule` 객체를 반환할 수 있습니다. 
+이제 템플릿을 사용하여 스키매틱에 필요한 사용자 정의 파일을 생성합니다.
 
-A `Rule` can use external template files, transform them, and return another `Rule` object with the transformed template.
-Use the templating to generate any custom files required for your schematic.
+1. 공장 함수에 다음 코드를 추가합니다.
 
-1. Add the following code to your factory function.
+    <docs-code header="projects/my-lib/schematics/my-service/index.ts (템플릿 변환)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="template"/>
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Template transform)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="template"/>
+    | 메소드            | 세부사항 |
+    |:---               |:---      |
+    | `apply()`         | 소스에 여러 규칙을 적용하고 변환된 소스를 반환합니다. 두 개의 인수, 하나의 소스와 규칙의 배열을 받습니다.                                                                                                                     |
+    | `url()`           | 스키매틱에 상대적인 파일 시스템에서 원본 파일을 읽습니다.                                                                                                                                                                              |
+    | `applyTemplates()` | 스키매틱 템플릿과 스키매틱 파일 이름에 적용할 메소드와 속성의 인수를 수신합니다. `Rule`을 반환합니다. 여기서 `classify()` 및 `dasherize()` 메소드와 `name` 속성을 정의합니다. |
+    | `classify()`      | 값을 받아 제목 케이스로 반환합니다. 예를 들어, 제공된 이름이 `my service`일 경우, `MyService`로 반환됩니다.                                                                                                             |
+    | `dasherize()`     | 값을 받아 하이픈 및 소문자로 반환합니다. 예를 들어, 제공된 이름이 `MyService`일 경우, `my-service`로 반환됩니다.                                                                                                     |
+    | `move()`          | 스키매틱이 적용될 때 제공된 원본 파일을 대상 위치로 이동합니다.                                                                                                                                                              |
 
-    | Methods            | Details |
-    |:---                |:---     |
-    | `apply()`          | Applies multiple rules to a source and returns the transformed source. It takes 2 arguments, a source and an array of rules.                                                                                                                     |
-    | `url()`            | Reads source files from your filesystem, relative to the schematic.                                                                                                                                                                              |
-    | `applyTemplates()` | Receives an argument of methods and properties you want make available to the schematic template and the schematic filenames. It returns a `Rule`. This is where you define the `classify()` and `dasherize()` methods, and the `name` property. |
-    | `classify()`       | Takes a value and returns the value in title case. For example, if the provided name is `my service`, it is returned as `MyService`.                                                                                                             |
-    | `dasherize()`      | Takes a value and returns the value in dashed and lowercase. For example, if the provided name is MyService, it is returned as `my-service`.                                                                                                     |
-    | `move()`           | Moves the provided source files to their destination when the schematic is applied.                                                                                                                                                              |
+1. 마지막으로, 규칙 공장은 규칙을 반환해야 합니다.
 
-1. Finally, the rule factory must return a rule.
+    <docs-code header="projects/my-lib/schematics/my-service/index.ts (연결 규칙)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="chain"/>
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Chain Rule)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="chain"/>
+    `chain()` 메소드는 여러 규칙을 단일 규칙으로 결합할 수 있도록 하여 단일 스키매틱에서 여러 작업을 수행할 수 있게 합니다. 
+    여기서는 템플릿 규칙과 스키매틱에 의해 실행되는 코드를 결합하고 있습니다.
 
-    The `chain()` method lets you combine multiple rules into a single rule, so that you can perform multiple operations in a single schematic.
-    Here you are only merging the template rules with any code executed by the schematic.
-
-See a complete example of the following schematic rule function.
+다음 스키매틱 규칙 함수의 완전한 예제를 참조하십시오.
 
 <docs-code header="projects/my-lib/schematics/my-service/index.ts" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts"/>
 
-For more information about rules and utility methods, see [Provided Rules](https://github.com/angular/angular-cli/tree/main/packages/angular_devkit/schematics#provided-rules).
+규칙 및 유틸리티 메서드에 대한 자세한 내용은 [제공된 규칙](https://github.com/angular/angular-cli/tree/main/packages/angular_devkit/schematics#provided-rules)을 참조하십시오.
 
-## Running your library schematic
+## 라이브러리 스키매틱 실행
 
-After you build your library and schematics, you can install the schematics collection to run against your project.
-The following steps show you how to generate a service using the schematic you created earlier.
+라이브러리와 스키매틱을 빌드한 후, 스키매틱 컬렉션을 설치하여 프로젝트에 적용할 수 있습니다. 
+다음 단계는 이전에 생성한 스키매틱을 사용하여 서비스를 생성하는 방법을 보여줍니다.
 
-### Build your library and schematics
+### 라이브러리와 스키매틱 빌드
 
-From the root of your workspace, run the `ng build` command for your library.
+작업 공간의 루트에서 라이브러리에 대해 `ng build` 명령을 실행합니다.
 
 <docs-code language="shell">
 
@@ -271,7 +269,7 @@ ng build my-lib
 
 </docs-code>
 
-Then, you change into your library directory to build the schematic
+그런 다음 스키매틱을 빌드하기 위해 라이브러리 디렉토리로 변경합니다.
 
 <docs-code language="shell">
 
@@ -280,11 +278,11 @@ npm run build
 
 </docs-code>
 
-### Link the library
+### 라이브러리 링크
 
-Your library and schematics are packaged and placed in the `dist/my-lib` folder at the root of your workspace.
-For running the schematic, you need to link the library into your `node_modules` folder.
-From the root of your workspace, run the `npm link` command with the path to your distributable library.
+라이브러리와 스키매틱은 패키징되어 작업 공간의 루트에 있는 `dist/my-lib` 폴더에 배치됩니다. 
+스키매틱을 실행하기 위해 라이브러리를 `node_modules` 폴더에 링크해야 합니다. 
+작업 공간의 루트에서 배포 가능한 라이브러리의 경로와 함께 `npm link` 명령을 실행합니다.
 
 <docs-code language="shell">
 
@@ -292,9 +290,9 @@ npm link dist/my-lib
 
 </docs-code>
 
-### Run the schematic
+### 스키매틱 실행
 
-Now that your library is installed, run the schematic using the `ng generate` command.
+이제 라이브러리가 설치되었으므로, `ng generate` 명령을 사용하여 스키매틱을 실행합니다.
 
 <docs-code language="shell">
 
@@ -302,10 +300,10 @@ ng generate my-lib:my-service --name my-data
 
 </docs-code>
 
-In the console, you see that the schematic was run and the `my-data.service.ts` file was created in your application folder.
+콘솔에서 스키매틱이 실행되었고, `my-data.service.ts` 파일이 애플리케이션 폴더에 생성되었음을 확인할 수 있습니다.
 
 <docs-code language="shell" hideCopy>
 
 CREATE src/app/my-data.service.ts (208 bytes)
 
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/schematics.md b/adev/src/content/tools/cli/schematics.md
index a4242f6a59ff..59cfa6aa4a11 100644
--- a/adev/src/content/tools/cli/schematics.md
+++ b/adev/src/content/tools/cli/schematics.md
@@ -1,23 +1,23 @@
-# Generating code using schematics
+# 스케매틱을 사용한 코드 생성
 
-A schematic is a template-based code generator that supports complex logic.
-It is a set of instructions for transforming a software project by generating or modifying code.
-Schematics are packaged into collections and installed with npm.
+스케매틱은 복잡한 논리를 지원하는 템플릿 기반 코드 생성기입니다.
+코드를 생성하거나 수정하여 소프트웨어 프로젝트를 변환하기 위한 일련의 지침입니다.
+스케매틱은 컬렉션으로 패키징되어 npm으로 설치됩니다.
 
-The schematic collection can be a powerful tool for creating, modifying, and maintaining any software project, but is particularly useful for customizing Angular projects to suit the particular needs of your own organization.
-You might use schematics, for example, to generate commonly-used UI patterns or specific components, using predefined templates or layouts.
-Use schematics to enforce architectural rules and conventions, making your projects consistent and interoperative.
+스케매틱 컬렉션은 소프트웨어 프로젝트를 생성, 수정 및 유지관리하는 데 강력한 도구가 될 수 있으며, 특히 Angular 프로젝트를 귀하의 조직의 특정 요구 사항에 맞게 사용자 지정하는 데 유용합니다.
+예를 들어, 미리 정의된 템플릿이나 레이아웃을 사용하여 일반적으로 사용되는 UI 패턴이나 특정 구성 요소를 생성하는 데 스케매틱을 사용할 수 있습니다.
+스케매틱을 사용하여 아키텍처 규칙과 관습을 강화하여 프로젝트의 일관성과 상호 운용성을 유지합니다.
 
-## Schematics for the Angular CLI
+## Angular CLI를 위한 스케매틱
 
-Schematics are part of the Angular ecosystem.
-The Angular CLI  uses schematics to apply transforms to a web-app project.
-You can modify these schematics, and define new ones to do things like update your code to fix breaking changes in a dependency, for example, or to add a new configuration option or framework to an existing project.
+스케매틱은 Angular 생태계의 일부입니다.
+Angular CLI는 스케매틱을 사용하여 웹 앱 프로젝트에 변환을 적용합니다.
+이 스케매틱을 수정하거나 코드를 업데이트하여 의존성의 중단 변경을 수정하거나, 기존 프로젝트에 새로운 구성 옵션이나 프레임워크를 추가하는 것과 같이 새로운 스케매틱을 정의할 수 있습니다.
 
-Schematics that are included in the `@schematics/angular` collection are run by default by the commands `ng generate` and `ng add`.
-The package contains named schematics that configure the options that are available to the CLI for `ng generate` sub-commands, such as `ng generate component` and `ng generate service`.
-The sub-commands for `ng generate` are shorthand for the corresponding schematic.
-To specify and generate a particular schematic, or a collection of schematics, using the long form:
+`@schematics/angular` 컬렉션에 포함된 스케매틱은 기본적으로 `ng generate` 및 `ng add` 명령어에 의해 실행됩니다.
+패키지에는 `ng generate` 하위 명령어에 대한 CLI에서 사용 가능한 옵션을 구성하는 이름이 지정된 스케매틱이 포함되어 있으며, 예를 들어 `ng generate component` 및 `ng generate service`가 있습니다.
+`ng generate`의 하위 명령어는 해당 스케매틱에 대한 약어입니다.
+특정 스케매틱 또는 스케매틱 컬렉션을 지정하고 생성하려면 긴 형식을 사용하여:
 
 <docs-code language="shell">
 
@@ -25,7 +25,7 @@ ng generate my-schematic-collection:my-schematic-name
 
 </docs-code>
 
-or
+또는
 
 <docs-code language="shell">
 
@@ -33,51 +33,51 @@ ng generate my-schematic-name --collection collection-name
 
 </docs-code>
 
-### Configuring CLI schematics
+### CLI 스케매틱 구성
 
-A JSON schema associated with a schematic tells the Angular CLI what options are available to commands and sub-commands, and determines the defaults.
-These defaults can be overridden by providing a different value for an option on the command line.
-See [Workspace Configuration](reference/configs/workspace-config) for information about how to change the generation option defaults for your workspace.
+스케매틱과 연결된 JSON 스키마는 Angular CLI에 명령어 및 하위 명령어에 사용할 수 있는 옵션과 기본값을 정의합니다.
+이러한 기본값은 명령줄에서 옵션에 대해 다른 값을 제공하여 덮어쓸 수 있습니다.
+작업 공간의 생성 옵션 기본값을 변경하는 방법에 대한 정보는 [작업 공간 구성](reference/configs/workspace-config)을 참조하십시오.
 
-The JSON schemas for the default schematics used by the CLI to generate projects and parts of projects are collected in the package [`@schematics/angular`](https://github.com/angular/angular-cli/tree/main/packages/schematics/angular).
-The schema describes the options available to the CLI for each of the `ng generate` sub-commands, as shown in the `--help` output.
+CLI에서 프로젝트 및 프로젝트의 일부를 생성하는 데 사용하는 기본 스케매틱의 JSON 스키마는 패키지 [`@schematics/angular`](https://github.com/angular/angular-cli/tree/main/packages/schematics/angular)에 수집되어 있습니다.
+스키마는 `ng generate` 하위 명령어에 대한 CLI에서 사용 가능한 옵션을 설명합니다.
 
-## Developing schematics for libraries
+## 라이브러리를 위한 스케매틱 개발
 
-As a library developer, you can create your own collections of custom schematics to integrate your library with the Angular CLI.
+라이브러리 개발자로서 Angular CLI와 통합할 맞춤형 스케매틱 컬렉션을 생성할 수 있습니다.
 
-* An *add schematic* lets developers install your library in an Angular workspace using `ng add`
-* *Generation schematics* can tell the `ng generate` sub-commands how to modify projects, add configurations and scripts, and scaffold artifacts that are defined in your library
-* An *update schematic* can tell the `ng update` command how to update your library's dependencies and adjust for breaking changes when you release a new version
+* *추가 스케매틱*은 개발자들이 `ng add`를 사용하여 Angular 작업 공간에 라이브러리를 설치할 수 있게 합니다.
+* *생성 스케매틱*은 `ng generate` 하위 명령어가 프로젝트를 수정하고, 구성 및 스크립트를 추가하고, 라이브러리에 정의된 아티팩트를 스캐폴딩하는 방법을 알릴 수 있습니다.
+* *업데이트 스케매틱*은 `ng update` 명령어가 라이브러리의 의존성을 업데이트하고 새 버전을 출시할 때 중단 변경점에 조정하는 방법을 알려줄 수 있습니다.
 
-For more details of what these look like and how to create them, see:
+이들이 어떻게 생겼고 어떻게 생성하는지에 대한 자세한 내용은 다음을 참조하십시오:
 
 <docs-pill-row>
-  <docs-pill href="tools/cli/schematics-authoring" title="Authoring Schematics"/>
-  <docs-pill href="tools/cli/schematics-for-libraries" title="Schematics for Libraries"/>
+  <docs-pill href="tools/cli/schematics-authoring" title="스케매틱 작성"/>
+  <docs-pill href="tools/cli/schematics-for-libraries" title="라이브러리를 위한 스케매틱"/>
 </docs-pill-row>
 
-### Add schematics
+### 추가 스케매틱
 
-An *add schematic* is typically supplied with a library, so that the library can be added to an existing project with `ng add`.
-The `add` command uses your package manager to download new dependencies, and invokes an installation script that is implemented as a schematic.
+*추가 스케매틱*은 일반적으로 라이브러리와 함께 제공되어, 라이브러리를 기존 프로젝트에 `ng add`로 추가할 수 있게 합니다.
+`add` 명령은 패키지 관리자를 사용하여 새로운 의존성을 다운로드하고, 스케매틱으로 구현된 설치 스크립트를 호출합니다.
 
-For example, the [`@angular/material`](https://material.angular.io/guide/schematics) schematic tells the `add` command to install and set up Angular Material and theming, and register new starter components that can be created with `ng generate`.
-Look at this one as an example and model for your own add schematic.
+예를 들어, [`@angular/material`](https://material.angular.io/guide/schematics) 스케매틱은 `add` 명령에게 Angular Material 및 테마를 설치 및 설정하고, `ng generate`로 생성할 수 있는 새로운 시작 구성 요소를 등록하도록 지시합니다.
+이를 예로 삼아 여러분의 추가 스케매틱을 모델링하십시오.
 
-Partner and third party libraries also support the Angular CLI with add schematics.
-For example, `@ng-bootstrap/schematics` adds [ng-bootstrap](https://ng-bootstrap.github.io)  to an app, and  `@clr/angular` installs and sets up [Clarity from VMWare](https://clarity.design/documentation/get-started).
+파트너 및 제3자 라이브러리도 추가 스케매틱을 통해 Angular CLI를 지원합니다.
+예를 들어, `@ng-bootstrap/schematics`는 앱에 [ng-bootstrap](https://ng-bootstrap.github.io)을 추가하고, `@clr/angular`는 [VMWare의 Clarity](https://clarity.design/documentation/get-started)를 설치하고 설정합니다.
 
-An *add schematic* can also update a project with configuration changes, add additional dependencies \(such as polyfills\), or scaffold package-specific initialization code.
-For example, the `@angular/pwa` schematic turns your application into a PWA by adding an application manifest and service worker.
+*추가 스케매틱*은 구성 변경으로 프로젝트를 업데이트하거나, 추가적인 의존성(예: 폴리필)을 추가하거나, 패키지 별 초기화 코드를 스캐폴딩할 수도 있습니다.
+예를 들어, `@angular/pwa` 스케매틱은 애플리케이션 매니페스트 및 서비스 워커를 추가하여 애플리케이션을 PWA로 변환합니다.
 
-### Generation schematics
+### 생성 스케매틱
 
-Generation schematics are instructions for the `ng generate` command.
-The documented sub-commands use the default Angular generation schematics, but you can specify a different schematic \(in place of a sub-command\) to generate an artifact defined in your library.
+생성 스케매틱은 `ng generate` 명령어의 지침입니다.
+문서화된 하위 명령어는 기본 Angular 생성 스케매틱을 사용하지만, 라이브러리에 정의된 아티팩트를 생성하기 위해 다른 스케매틱(하위 명령 대신)을 지정할 수 있습니다.
 
-Angular Material, for example, supplies generation schematics for the UI components that it defines.
-The following command uses one of these schematics to render an Angular Material `<mat-table>` that is pre-configured with a datasource for sorting and pagination.
+예를 들어, Angular Material은 정의된 UI 구성 요소에 대한 생성 스케매틱을 제공합니다.
+다음 명령어는 정렬 및 페이지 매김을 위한 데이터 소스로 사전 구성된 Angular Material `<mat-table>`을 렌더링하기 위해 이러한 스케매틱 중 하나를 사용합니다.
 
 <docs-code language="shell">
 
@@ -85,17 +85,17 @@ ng generate @angular/material:table <component-name>
 
 </docs-code>
 
-### Update schematics
+### 업데이트 스케매틱
 
- The `ng update` command can be used to update your workspace's library dependencies.
- If you supply no options or use the help option, the command examines your workspace and suggests libraries to update.
+`ng update` 명령어를 사용하여 작업 공간의 라이브러리 의존성을 업데이트할 수 있습니다.
+옵션을 제공하지 않거나 도움말 옵션을 사용하면, 명령어는 작업 공간을 검사하고 업데이트할 라이브러리를 제안합니다.
 
 <docs-code language="shell">
 
 ng update
-We analyzed your package.json, there are some packages to update:
+우리는 당신의 package.json을 분석했습니다. 업데이트할 패키지가 있습니다:
 
-    Name                                      Version                     Command to update
+    이름                                      버전                     업데이트할 명령
     &hyphen;-------------------------------------------------------------------------------
     @angular/cdk                       7.2.2 -> 7.3.1           ng update @angular/cdk
     @angular/cli                       7.2.3 -> 7.3.0           ng update @angular/cli
@@ -105,22 +105,22 @@ We analyzed your package.json, there are some packages to update:
 
 </docs-code>
 
-If you pass the command a set of libraries to update, it updates those libraries, their peer dependencies, and the peer dependencies that depend on them.
+명령어에 업데이트할 라이브러리 집합을 전달하면, 해당 라이브러리와 그 피어 의존성 및 해당 라이브러리에 의존하는 피어 의존성이 업데이트됩니다.
 
-HELPFUL: If there are inconsistencies \(for example, if peer dependencies cannot be matched by a simple [semver](https://semver.io) range\), the command generates an error and does not change anything in the workspace.
+도움말: 일관성이 없을 경우(예: 피어 의존성을 단순한 [semver](https://semver.io) 범위로 매칭할 수 없는 경우) 명령어는 오류를 생성하고 작업 공간에서 아무것도 변경하지 않습니다.
 
-We recommend that you do not force an update of all dependencies by default.
-Try updating specific dependencies first.
+기본적으로 모든 의존성의 업데이트를 강제로 수행하지 않는 것이 좋습니다.
+특정 의존성을 먼저 업데이트해 보십시오.
 
-For more about how the `ng update` command works, see [Update Command](https://github.com/angular/angular-cli/blob/main/docs/specifications/update.md).
+`ng update` 명령어가 작동하는 방식에 대한 자세한 내용은 [업데이트 명령어](https://github.com/angular/angular-cli/blob/main/docs/specifications/update.md)를 참조하십시오.
 
-If you create a new version of your library that introduces potential breaking changes, you can provide an *update schematic* to enable the `ng update` command to automatically resolve any such changes in the project being updated.
+기존 버전에서 새 버전으로 마이그레이션을 커버하는 업데이트 스케매틱을 제공할 수 있는 잠재적인 중단 변경을 도입하는 새 버전의 라이브러리를 만든 경우, `ng update` 명령어가 프로젝트에서 이러한 변경 사항을 자동으로 해결할 수 있도록 하는 *업데이트 스케매틱*을 제공할 수 있습니다.
 
-For example, suppose you want to update the Angular Material library.
+예를 들어, Angular Material 라이브러리를 업데이트하려고 한다고 가정해 보겠습니다.
 
 <docs-code language="shell">
 ng update @angular/material
 </docs-code>
 
-This command updates both `@angular/material` and its dependency `@angular/cdk` in your workspace's `package.json`.
-If either package contains an update schematic that covers migration from the existing version to a new version, the command runs that schematic on your workspace.
+이 명령어는 작업 공간의 `package.json`에서 `@angular/material`과 그 의존성인 `@angular/cdk`를 모두 업데이트합니다.
+어떤 패키지든지 기존 버전에서 새 버전으로 마이그레이션을 다루는 업데이트 스케매틱이 포함되어 있다면, 명령어는 작업 공간에서 해당 스케매틱을 실행합니다.
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/serve.md b/adev/src/content/tools/cli/serve.md
index 448b952e1508..1e5bcdecad0b 100644
--- a/adev/src/content/tools/cli/serve.md
+++ b/adev/src/content/tools/cli/serve.md
@@ -1,13 +1,13 @@
-# Serving Angular apps for development
+# Angular 애플리케이션 개발을 위한 제공
 
-You can serve your Angular CLI application with the `ng serve` command.
-This will compile your application, skip unnecessary optimizations, start a devserver, and automatically rebuild and live reload any subsequent changes.
-You can stop the server by pressing `Ctrl+C`.
+`ng serve` 명령어로 Angular CLI 애플리케이션을 제공할 수 있습니다.
+이 명령어는 애플리케이션을 컴파일하고, 불필요한 최적화를 건너뛰며, 개발 서버를 시작하고, 이후 변경사항을 자동으로 다시 빌드하고 라이브 리로드합니다.
+서버를 중지하려면 `Ctrl+C`를 누르십시오.
 
-`ng serve` only executes the builder for the `serve` target in the default project as specified in `angular.json`.
-While any builder can be used here, the most common (and default) builder is `@angular-devkit/build-angular:dev-server`.
+`ng serve`는 `angular.json`에서 지정된 기본 프로젝트의 `serve` 타겟에 대한 빌더만 실행합니다.
+여기에서 어떤 빌더라도 사용할 수 있지만, 가장 일반적이고 기본적인 빌더는 `@angular-devkit/build-angular:dev-server`입니다.
 
-You can determine which builder is being used for a particular project by looking up the `serve` target for that project.
+특정 프로젝트에 어떤 빌더가 사용되고 있는지 알아보려면 해당 프로젝트의 `serve` 타겟을 확인하십시오.
 
 <docs-code language="json">
 
@@ -15,7 +15,7 @@ You can determine which builder is being used for a particular project by lookin
   "projects": {
     "my-app": {
       "architect": {
-        // `ng serve` invokes the Architect target named `serve`.
+        // `ng serve`는 `serve`라는 이름의 Architect 타겟을 호출합니다.
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           // ...
@@ -29,15 +29,15 @@ You can determine which builder is being used for a particular project by lookin
 
 </docs-code>
 
-This page discusses usage and options of `@angular-devkit/build-angular:dev-server`.
+이 페이지는 `@angular-devkit/build-angular:dev-server`의 사용 및 옵션에 대해 설명합니다.
 
-## Proxying to a backend server
+## 백엔드 서버로 프록시
 
-Use [proxying support](https://webpack.js.org/configuration/dev-server/#devserverproxy) to divert certain URLs to a backend server, by passing a file to the `--proxy-config` build option.
-For example, to divert all calls for `http://localhost:4200/api` to a server running on `http://localhost:3000/api`, take the following steps.
+[프록시 지원](https://webpack.js.org/configuration/dev-server/#devserverproxy)을 사용하여 특정 URL을 백엔드 서버로 전환하려면 `--proxy-config` 빌드 옵션에 파일을 전달하십시오.
+예를 들어, `http://localhost:4200/api`에 대한 모든 호출을 `http://localhost:3000/api`에서 실행 중인 서버로 전환하려면 다음 단계를 따르십시오.
 
-1. Create a file `proxy.conf.json` in your project's `src/` folder.
-1. Add the following content to the new proxy file:
+1. 프로젝트의 `src/` 폴더에 `proxy.conf.json` 파일을 생성합니다.
+1. 새 프록시 파일에 다음 내용을 추가합니다:
 
     <docs-code language="json">
 
@@ -50,7 +50,7 @@ For example, to divert all calls for `http://localhost:4200/api` to a server run
 
     </docs-code>
 
-1. In the CLI configuration file, `angular.json`, add the `proxyConfig` option to the `serve` target:
+1. CLI 구성 파일인 `angular.json`에서 `serve` 타겟에 `proxyConfig` 옵션을 추가합니다:
 
     <docs-code language="json">
 
@@ -71,20 +71,18 @@ For example, to divert all calls for `http://localhost:4200/api` to a server run
 
     </docs-code>
 
-1. To run the development server with this proxy configuration, call `ng serve`.
+1. 이 프록시 구성으로 개발 서버를 실행하려면 `ng serve`를 호출하십시오.
 
-Edit the proxy configuration file to add configuration options; following are some examples.
-For a detailed description of all options, refer to the [webpack DevServer documentation](https://webpack.js.org/configuration/dev-server/#devserverproxy) when using `@angular-devkit/build-angular:browser`, or the [Vite DevServer documentation](https://vite.dev/config/server-options#server-proxy) when using `@angular-devkit/build-angular:browser-esbuild` or `@angular-devkit/build-angular:application`.
+프록시 구성 파일을 편집하여 구성 옵션을 추가하십시오. 다음은 몇 가지 예입니다.
+모든 옵션에 대한 자세한 설명은 `@angular-devkit/build-angular:browser`를 사용할 때 [webpack DevServer 문서](https://webpack.js.org/configuration/dev-server/#devserverproxy)를 참조하거나, `@angular-devkit/build-angular:browser-esbuild` 또는 `@angular-devkit/build-angular:application`을 사용할 때는 [Vite DevServer 문서](https://vite.dev/config/server-options#server-proxy)를 참조하십시오.
 
-NOTE: If you edit the proxy configuration file, you must relaunch the `ng serve` process to make your changes effective.
+참고: 프록시 구성 파일을 편집한 경우 변경 사항을 적용하려면 `ng serve` 프로세스를 다시 시작해야 합니다.
 
-## `localhost` resolution
+## `localhost` 해상도
 
-As of Node version 17, Node will _not_ always resolve `http://localhost:<port>` to `http://127.0.0.1:<port>`
-depending on each machine's configuration.
+Node 버전 17부터는 각 머신의 구성에 따라 Node가 `http://localhost:<port>`를 항상 `http://127.0.0.1:<port>`로 해소하지 않습니다.
 
-If you get an `ECONNREFUSED` error using a proxy targeting a `localhost` URL,
-you can fix this issue by updating the target from `http://localhost:<port>` to `http://127.0.0.1:<port>`.
+프록시가 `localhost` URL을 대상으로 할 때 `ECONNREFUSED` 오류가 발생하는 경우,
+대상을 `http://localhost:<port>`에서 `http://127.0.0.1:<port>`로 업데이트하여 이 문제를 해결할 수 있습니다.
 
-See [the `http-proxy-middleware` documentation](https://github.com/chimurai/http-proxy-middleware#nodejs-17-econnrefused-issue-with-ipv6-and-localhost-705)
-for more information.
+자세한 내용은 [http-proxy-middleware 문서](https://github.com/chimurai/http-proxy-middleware#nodejs-17-econnrefused-issue-with-ipv6-and-localhost-705)를 참조하십시오.
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/setup-local.md b/adev/src/content/tools/cli/setup-local.md
index 87a87af9f5dd..1e18fb8370d9 100644
--- a/adev/src/content/tools/cli/setup-local.md
+++ b/adev/src/content/tools/cli/setup-local.md
@@ -1,19 +1,19 @@
-# Setting up the local environment and workspace
+# 로컬 환경 및 작업 공간 설정
 
-This guide explains how to set up your environment for Angular development using the [Angular CLI](cli "CLI command reference").
-It includes information about installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup.
+이 가이드는 [Angular CLI](cli "CLI 명령어 참조")를 사용하여 Angular 개발을 위한 환경을 설정하는 방법을 설명합니다.
+이 가이드는 CLI 설치, 초기 작업 공간 및 시작 앱 생성, 앱을 로컬에서 실행하여 설정을 확인하는 방법에 대한 정보를 포함합니다.
 
-<docs-callout title="Try Angular without local setup">
+<docs-callout title="로컬 설정 없이 Angular 사용해 보기">
 
-If you are new to Angular, you might want to start with [Try it now!](tutorials/learn-angular), which introduces the essentials of Angular in your browser.
-This standalone tutorial takes advantage of the interactive [StackBlitz](https://stackblitz.com) environment for online development.
-You don't need to set up your local environment until you're ready.
+Angular가 처음이라면, 브라우저에서 Angular의 필수 요소를 소개하는 [지금 시도해 보기!](tutorials/learn-angular)로 시작하는 것이 좋습니다.
+이 독립형 튜토리얼은 온라인 개발을 위한 대화형 [StackBlitz](https://stackblitz.com) 환경을 활용합니다.
+준비가 될 때까지 로컬 환경을 설정할 필요가 없습니다.
 
 </docs-callout>
 
-## Before you start
+## 시작하기 전에
 
-To use Angular CLI, you should be familiar with the following:
+Angular CLI를 사용하려면 다음 사항에 익숙해야 합니다:
 
 <docs-pill-row>
   <docs-pill href="https://developer.mozilla.org/docs/Web/JavaScript/A_re-introduction_to_JavaScript" title="JavaScript"/>
@@ -21,21 +21,21 @@ To use Angular CLI, you should be familiar with the following:
   <docs-pill href="https://developer.mozilla.org/docs/Learn/CSS/First_steps" title="CSS"/>
 </docs-pill-row>
 
-You should also be familiar with usage of command line interface (CLI) tools and have a general understanding of command shells.
-Knowledge of [TypeScript](https://www.typescriptlang.org) is helpful, but not required.
+또한 명령줄 인터페이스(CLI) 도구의 사용에 익숙하고 명령 셸에 대한 일반적인 이해가 있어야 합니다.
+[TypeScript](https://www.typescriptlang.org)에 대한 지식이 있으면 도움이 되지만 필수는 아닙니다.
 
-## Dependencies
+## 의존성
 
-To install Angular CLI on your local system, you need to install [Node.js](https://nodejs.org/).
-Angular CLI uses Node and its associated package manager, npm, to install and run JavaScript tools outside the browser.
+로컬 시스템에 Angular CLI를 설치하려면 [Node.js](https://nodejs.org/)를 설치해야 합니다.
+Angular CLI는 Node와 그에 연결된 패키지 관리자 npm을 사용하여 브라우저 외부에서 JavaScript 도구를 설치하고 실행합니다.
 
-[Download and install Node.js](https://nodejs.org/en/download), which will include the `npm` CLI as well.
-Angular requires an [active LTS or maintenance LTS](https://nodejs.org/en/about/previous-releases) version of Node.js.
-See [Angular's version compatibility](reference/versions) guide for more information.
+[Node.js 다운로드 및 설치](https://nodejs.org/en/download)하면 `npm` CLI도 포함됩니다.
+Angular는 [활성 LTS 또는 유지 관리 LTS](https://nodejs.org/en/about/previous-releases) 버전의 Node.js를 요구합니다.
+자세한 내용은 [Angular 버전 호환성](reference/versions) 가이드를 참조하세요.
 
-## Install the Angular CLI
+## Angular CLI 설치
 
-To install the Angular CLI, open a terminal window and run the following command:
+Angular CLI를 설치하려면 터미널 창을 열고 다음 명령어를 실행하세요:
 
 <docs-code-multifile>
    <docs-code
@@ -61,10 +61,10 @@ To install the Angular CLI, open a terminal window and run the following command
 
  </docs-code-multifile>
 
-### Powershell execution policy
+### PowerShell 실행 정책
 
-On Windows client computers, the execution of PowerShell scripts is disabled by default, so the above command may fail with an error.
-To allow the execution of PowerShell scripts, which is needed for npm global binaries, you must set the following <a href="https://docs.microsoft.com/powershell/module/microsoft.powershell.core/about/about_execution_policies">execution policy</a>:
+Windows 클라이언트 컴퓨터에서는 기본적으로 PowerShell 스크립트 실행이 비활성화되어 있으므로 위 명령어가 오류와 함께 실패할 수 있습니다.
+npm 글로벌 바이너리 실행에 필요한 PowerShell 스크립트 실행을 허용하려면 다음 <a href="https://docs.microsoft.com/powershell/module/microsoft.powershell.core/about/about_execution_policies">실행 정책</a>을 설정해야 합니다:
 
 <docs-code language="sh">
 
@@ -72,12 +72,12 @@ Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
 
 </docs-code>
 
-Carefully read the message displayed after executing the command and follow the instructions. Make sure you understand the implications of setting an execution policy.
+명령어 실행 후 표시된 메시지를 주의 깊게 읽고 지시에 따르세요. 실행 정책 설정의 의미를 이해하는 것이 중요합니다.
 
-### Unix permissions
+### Unix 권한
 
-On some Unix-like setups, global  scripts may be owned by the root user, so to the above command may fail with a permission error.
-Run with `sudo` to execute the command as the root user and enter your password when prompted:
+일부 유닉스와 유사한 설정에서는 글로벌 스크립스가 루트 사용자에 의해 소유될 수 있으므로 위 명령어가 권한 오류로 실패할 수 있습니다.
+`sudo`를 사용하여 루트 사용자로 명령어를 실행하고 요청 시 비밀번호를 입력하세요:
 
 <docs-code-multifile>
    <docs-code
@@ -103,13 +103,13 @@ Run with `sudo` to execute the command as the root user and enter your password
 
  </docs-code-multifile>
 
-Make sure you understand the implications of running commands as root.
+루트 사용자로 명령을 실행하는 것의 의미를 이해하는 것이 중요합니다.
 
-## Create a workspace and initial application
+## 작업 공간 및 초기 애플리케이션 생성
 
-You develop apps in the context of an Angular **workspace**.
+Angular **작업 공간**의 맥락에서 앱을 개발합니다.
 
-To create a new workspace and initial starter app, run the CLI command `ng new` and provide the name `my-app`, as shown here, then answer prompts about features to include:
+새 작업 공간과 초기 시작 앱을 만들려면 CLI 명령 `ng new`를 실행하고 `my-app`이라는 이름을 제공하면 됩니다. 다음과 같이 입력한 후 포함할 기능에 대한 프롬프트에 답하세요:
 
 <docs-code language="shell">
 
@@ -117,11 +117,11 @@ ng new my-app
 
 </docs-code>
 
-The Angular CLI installs the necessary Angular npm packages and other dependencies.
-This can take a few minutes.
+Angular CLI는 필요한 Angular npm 패키지 및 기타 의존성을 설치합니다.
+이 작업은 몇 분 정도 걸릴 수 있습니다.
 
-The CLI creates a new workspace and a small welcome app in a new directory with the same name as the workspace, ready to run.
-Navigate to the new directory so subsequent commands use this workspace.
+CLI는 새 작업 공간을 만들고 동일한 이름의 새 디렉토리에 소규모 환영 앱을 생성하여 실행할 준비를 합니다.
+새 디렉토리로 이동하여 이후 명령이 이 작업 공간을 사용하도록 합니다.
 
 <docs-code language="shell">
 
@@ -129,9 +129,9 @@ cd my-app
 
 </docs-code>
 
-## Run the application
+## 애플리케이션 실행
 
-The Angular CLI includes a development server, for you to build and serve your app locally. Run the following command:
+Angular CLI에는 애플리케이션을 로컬에서 빌드하고 제공하기 위한 개발 서버가 포함되어 있습니다. 다음 명령어를 실행하세요:
 
 <docs-code language="shell">
 
@@ -139,33 +139,32 @@ ng serve --open
 
 </docs-code>
 
-The `ng serve` command launches the server, watches your files, as well as rebuilds the app and reloads the browser as you make changes to those files.
+`ng serve` 명령어는 서버를 시작하고 파일을 감시하며, 파일에 변경 사항이 있을 때 앱을 다시 빌드하고 브라우저를 다시 로드합니다.
 
-The `--open` (or just `-o`) option automatically opens your browser to `http://localhost:4200/` to view the generated application.
+`--open` (또는 `-o`) 옵션은 브라우저를 `http://localhost:4200/`로 자동으로 열어 생성된 애플리케이션을 볼 수 있게 합니다.
 
-## Workspaces and project files
+## 작업 공간 및 프로젝트 파일
 
-The [`ng new`](cli/new) command creates an [Angular workspace](reference/configs/workspace-config) folder and generates a new application inside it.
-A workspace can contain multiple applications and libraries.
-The initial application created by the [`ng new`](cli/new) command is at the root directory of the workspace.
-When you generate an additional application or library in an existing workspace, it goes into a `projects/` subfolder by default.
+[`ng new`](cli/new) 명령어는 [Angular 작업 공간](reference/configs/workspace-config) 폴더를 생성하고 그 안에 새로운 애플리케이션을 생성합니다.
+작업 공간은 여러 개의 애플리케이션과 라이브러리를 포함할 수 있습니다.
+[`ng new`](cli/new) 명령어로 생성된 초기 애플리케이션은 작업 공간의 루트 디렉토리에 있습니다.
+기존 작업 공간에서 추가 애플리케이션이나 라이브러리를 생성하면 기본적으로 `projects/` 하위 폴더에 들어갑니다.
 
-A newly generated application contains the source files for a root component and template.
-Each application has a `src` folder that contains its components, data, and assets.
+새로 생성된 애플리케이션에는 루트 컴포넌트와 템플릿의 소스 파일이 포함됩니다.
+각 애플리케이션에는 구성 요소, 데이터 및 자산이 포함된 `src` 폴더가 있습니다.
 
-You can edit the generated files directly, or add to and modify them using CLI commands.
-Use the [`ng generate`](cli/generate) command to add new files for additional components, directives, pipes, services, and more.
-Commands such as [`ng add`](cli/add) and [`ng generate`](cli/generate), which create or operate on applications and libraries, must be executed
-from within a workspace. By contrast, commands such as `ng new` must be executed *outside* a workspace because they will create a new one.
+생성된 파일을 직접 수정하거나 CLI 명령어를 사용하여 추가 및 수정할 수 있습니다.
+[`ng generate`](cli/generate) 명령어를 사용하여 추가 구성 요소, 지시자, 파이프, 서비스 등을 위한 새로운 파일을 추가하세요.
+[`ng add`](cli/add) 및 [`ng generate`](cli/generate)와 같은 명령어는 애플리케이션과 라이브러리를 생성하거나 조작하며, 작업 공간 내에서 실행되어야 합니다. 반대로, `ng new`와 같은 명령어는 새로운 작업 공간을 생성하므로 작업 공간 외부에서 실행되어야 합니다.
 
-## Next steps
+## 다음 단계
 
-* Learn more about the [file structure](reference/configs/file-structure) and [configuration](reference/configs/workspace-config) of the generated workspace.
+* 생성된 작업 공간의 [파일 구조](reference/configs/file-structure) 및 [구성](reference/configs/workspace-config)에 대해 자세히 알아보세요.
 
-* Test your new application with [`ng test`](cli/test).
+* [`ng test`](cli/test)로 새로운 애플리케이션을 테스트하세요.
 
-* Generate boilerplate like components, directives, and pipes with [`ng generate`](cli/generate).
+* [`ng generate`](cli/generate)로 구성 요소, 지시자, 파이프와 같은 보일러플레이트를 생성하세요.
 
-* Deploy your new application and make it available to real users with [`ng deploy`](cli/deploy).
+* [`ng deploy`](cli/deploy)로 새로운 애플리케이션을 배포하고 실제 사용자에게 제공하세요.
 
-* Set up and run end-to-end tests of your application with [`ng e2e`](cli/e2e).
+* [`ng e2e`](cli/e2e)로 애플리케이션의 엔드투엔드 테스트를 설정하고 실행하세요.
\ No newline at end of file
diff --git a/adev/src/content/tools/cli/template-typecheck.md b/adev/src/content/tools/cli/template-typecheck.md
index 4fbd75ddb239..6abf31f9d9ed 100644
--- a/adev/src/content/tools/cli/template-typecheck.md
+++ b/adev/src/content/tools/cli/template-typecheck.md
@@ -1,68 +1,68 @@
-# Template type checking
+# 템플릿 타입 검사
 
-## Overview of template type checking
+## 템플릿 타입 검사 개요
 
-Just as TypeScript catches type errors in your code, Angular checks the expressions and bindings within the templates of your application and can report any type errors it finds.
-Angular currently has three modes of doing this, depending on the value of the `fullTemplateTypeCheck` and `strictTemplates` flags in [Angular's compiler options](reference/configs/angular-compiler-options).
+TypeScript가 코드에서 타입 오류를 잡는 것처럼 Angular는 애플리케이션의 템플릿 내 표현식과 바인딩을 검사하고 발견한 타입 오류를 보고할 수 있습니다.
+Angular는 현재 `fullTemplateTypeCheck` 및 `strictTemplates` 플래그의 값에 따라 이 작업을 수행하는 세 가지 모드를 가지고 있습니다. [Angular의 컴파일러 옵션](reference/configs/angular-compiler-options).
 
-### Basic mode
+### 기본 모드
 
-In the most basic type-checking mode, with the `fullTemplateTypeCheck` flag set to `false`, Angular validates only top-level expressions in a template.
+가장 기본적인 타입 검사 모드에서 `fullTemplateTypeCheck` 플래그가 `false`로 설정된 경우, Angular는 템플릿 내 최상위 표현식만 검증합니다.
 
-If you write `<map [city]="user.address.city">`, the compiler verifies the following:
+`<map [city]="user.address.city">`를 작성하면 컴파일러는 다음을 확인합니다:
 
-* `user` is a property on the component class
-* `user` is an object with an address property
-* `user.address` is an object with a city property
+* `user`는 컴포넌트 클래스의 속성입니다.
+* `user`는 주소 속성을 가진 객체입니다.
+* `user.address`는 도시 속성을 가진 객체입니다.
 
-The compiler does not verify that the value of `user.address.city` is assignable to the city input of the `<map>` component.
+컴파일러는 `user.address.city`의 값이 `<map>` 컴포넌트의 city 입력에 할당 가능한지 여부를 검증하지 않습니다.
 
-The compiler also has some major limitations in this mode:
+또한 이 모드에서 컴파일러는 몇 가지 주요 제한 사항이 있습니다:
 
-* Importantly, it doesn't check embedded views, such as `*ngIf`, `*ngFor`, other `<ng-template>` embedded view.
-* It doesn't figure out the types of `#refs`, the results of pipes, or the type of `$event` in event bindings.
+* 중요한 점은, `*ngIf`, `*ngFor`, 기타 `<ng-template>` 내장 뷰와 같은 내장 뷰를 체크하지 않습니다.
+* `#refs`의 타입, 파이프의 결과, 이벤트 바인딩에서 `$event`의 타입을 파악하지 않습니다.
 
-In many cases, these things end up as type `any`, which can cause subsequent parts of the expression to go unchecked.
+많은 경우 이러한 것들은 타입 `any`로 남아 결과적으로 표현식의 후속 부분이 체크되지 않을 수 있습니다.
 
-### Full mode
+### 전체 모드
 
-If the `fullTemplateTypeCheck` flag is set to `true`, Angular is more aggressive in its type-checking within templates.
-In particular:
+`fullTemplateTypeCheck` 플래그가 `true`로 설정된 경우, Angular는 템플릿 내 타입 검사에서 더 적극적입니다.
+특히:
 
-* Embedded views \(such as those within an `*ngIf` or `*ngFor`\) are checked
-* Pipes have the correct return type
-* Local references to directives and pipes have the correct type \(except for any generic parameters, which will be `any`\)
+* 내장 뷰(`*ngIf` 또는 `*ngFor`내의 것)가 검사됩니다.
+* 파이프는 올바른 반환 타입을 가집니다.
+* 지시문 및 파이프에 대한 로컬 참조는 올바른 타입을 가집니다(일반 매개변수는 `any`가 됩니다).
 
-The following still have type `any`.
+다음은 여전히 타입 `any`입니다.
 
-* Local references to DOM elements
-* The `$event` object
-* Safe navigation expressions
+* DOM 요소에 대한 로컬 참조
+* `$event` 객체
+* 안전 탐색 표현식
 
-IMPORTANT: The `fullTemplateTypeCheck` flag has been deprecated in Angular 13.
-The `strictTemplates` family of compiler options should be used instead.
+중요: `fullTemplateTypeCheck` 플래그는 Angular 13에서 사용 중단되었습니다.
+대신 `strictTemplates` 컴파일러 옵션을 사용해야 합니다.
 
-### Strict mode
+### 엄격 모드
 
-Angular maintains the behavior of the `fullTemplateTypeCheck` flag, and introduces a third "strict mode".
-Strict mode is a superset of full mode, and is accessed by setting the `strictTemplates` flag to true.
-This flag supersedes the `fullTemplateTypeCheck` flag.
+Angular는 `fullTemplateTypeCheck` 플래그의 동작을 유지하며 세 번째 "엄격 모드"를 도입합니다.
+엄격 모드는 전체 모드의 상위 집합이며 `strictTemplates` 플래그를 `true`로 설정하여 접근할 수 있습니다.
+이 플래그는 `fullTemplateTypeCheck` 플래그를 대체합니다.
 
-In addition to the full mode behavior, Angular does the following:
+전체 모드의 동작 외에도 Angular는 다음과 같은 작업을 수행합니다:
 
-* Verifies that component/directive bindings are assignable to their `@Input()`s
-* Obeys TypeScript's `strictNullChecks` flag when validating the preceding mode
-* Infers the correct type of components/directives, including generics
-* Infers template context types where configured \(for example, allowing correct type-checking of `NgFor`\)
-* Infers the correct type of `$event` in component/directive, DOM, and animation event bindings
-* Infers the correct type of local references to DOM elements, based on the tag name \(for example, the type that `document.createElement` would return for that tag\)
+* 컴포넌트/지시문 바인딩이 해당 `@Input()`에 할당 가능함을 검증합니다.
+* 이전 모드를 검증할 때 TypeScript의 `strictNullChecks` 플래그를 준수합니다.
+* 컴포넌트/지시문의 올바른 타입을 추론하며 일반 매개변수를 포함합니다.
+* 구성된 경우 템플릿 컨텍스트 타입을 추론합니다(예: `NgFor`의 올바른 타입 검사 허용).
+* 컴포넌트/지시문, DOM 및 애니메이션 이벤트 바인딩에서 `$event`의 올바른 타입을 추론합니다.
+* 태그 이름에 따라 DOM 요소에 대한 로컬 참조의 올바른 타입을 추론합니다(예: `document.createElement`가 이 태그에 대해 반환할 타입).
 
-## Checking of `*ngFor`
+## `*ngFor`의 검사
 
-The three modes of type-checking treat embedded views differently.
-Consider the following example.
+세 가지 타입 검사 모드는 내장 뷰를 다르게 처리합니다.
+다음 예시를 고려하세요.
 
-<docs-code language="typescript" header="User interface">
+<docs-code language="typescript" header="사용자 인터페이스">
 
 interface User {
   name: string;
@@ -78,64 +78,64 @@ interface User {
 
 <div *ngFor="let user of users">
   <h2>{{config.title}}</h2>
-  <span>City: {{user.address.city}}</span>
+  <span>도시: {{user.address.city}}</span>
 </div>
 
 </docs-code>
 
-The `<h2>` and the `<span>` are in the `*ngFor` embedded view.
-In basic mode, Angular doesn't check either of them.
-However, in full mode, Angular checks that `config` and `user` exist and assumes a type of `any`.
-In strict mode, Angular knows that the `user` in the `<span>` has a type of `User`, and that `address` is an object with a `city` property of type `string`.
+`<h2>`와 `<span>`는 `*ngFor` 내장 뷰에 있습니다.
+기본 모드에서는 Angular가 둘 다 검증하지 않습니다.
+그러나 전체 모드에서는 Angular가 `config`와 `user`가 존재하는지 확인하고 타입을 `any`로 간주합니다.
+엄격 모드에서는 Angular가 `<span>`의 `user`가 `User` 타입이며 `address`가 `string` 타입의 `city` 속성을 가진 객체임을 알게 됩니다.
 
-## Troubleshooting template errors
+## 템플릿 오류 문제 해결
 
-With strict mode, you might encounter template errors that didn't arise in either of the previous modes.
-These errors often represent genuine type mismatches in the templates that were not caught by the previous tooling.
-If this is the case, the error message should make it clear where in the template the problem occurs.
+엄격 모드에서는 이전 두 모드에서 발생하지 않은 템플릿 오류가 발생할 수 있습니다.
+이 오류는 종종 이전 도구에서 잡히지 않은 템플릿의 실제 타입 불일치를 나타냅니다.
+이 경우 오류 메시지는 템플릿의 어느 부분에서 문제가 발생했는지 명확하게 알려줍니다.
 
-There can also be false positives when the typings of an Angular library are either incomplete or incorrect, or when the typings don't quite line up with expectations as in the following cases.
+Angular 라이브러리의 타이핑이 불완전하거나 부정확하거나 타이핑이 기대에 부합하지 않는 경우에도 잘못된 긍정이 발생할 수 있습니다. 다음과 같은 경우입니다.
 
-* When a library's typings are wrong or incomplete \(for example, missing `null | undefined` if the library was not written with `strictNullChecks` in mind\)
-* When a library's input types are too narrow and the library hasn't added appropriate metadata for Angular to figure this out.
-    This usually occurs with disabled or other common Boolean inputs used as attributes, for example, `<input disabled>`.
+* 라이브러리의 타이핑이 잘못되었거나 불완전한 경우(예: `strictNullChecks`를 염두에 두지 않고 작성된 경우 `null | undefined` 누락).
+* 라이브러리의 입력 타입이 너무 좁고 Angular가 이 사실을 파악할 수 있도록 적절한 메타데이터를 추가하지 않은 경우.
+    이는 일반적인 불리언 입력을 속성으로 사용할 때, 예를 들어 `<input disabled>`와 같이 비활성화된 경우에 자주 발생합니다.
 
-* When using `$event.target` for DOM events \(because of the possibility of event bubbling, `$event.target` in the DOM typings doesn't have the type you might expect\)
+* DOM 이벤트에 대해 `$event.target`을 사용할 때(이벤트 버블링 가능성 때문에 `$event.target`이 DOM 타이핑에서 기대하는 타입을 가지지 않음).
 
-In case of a false positive like these, there are a few options:
+이와 같은 잘못된 긍정의 경우 몇 가지 옵션이 있습니다:
 
-* Use the `$any()` type-cast function in certain contexts to opt out of type-checking for a part of the expression
-* Disable strict checks entirely by setting `strictTemplates: false` in the application's TypeScript configuration file, `tsconfig.json`
-* Disable certain type-checking operations individually, while maintaining strictness in other aspects, by setting a *strictness flag* to `false`
-* If you want to use `strictTemplates` and `strictNullChecks` together, opt out of strict null type checking specifically for input bindings using `strictNullInputTypes`
+* 특정 컨텍스트에서 `$any()` 타입 캐스트 함수를 사용하여 표현식의 일부에 대한 타입 검사를 제외합니다.
+* 애플리케이션의 TypeScript 구성 파일인 `tsconfig.json`에서 `strictTemplates: false`로 설정하여 엄격 검사를 완전히 비활성화합니다.
+* 다른 측면의 엄격성을 유지하면서 일부 타입 검사 작업을 개별적으로 비활성화하기 위해 *엄격성 플래그*를 `false`로 설정합니다.
+* `strictTemplates`와 `strictNullChecks`를 함께 사용하려면 `strictNullInputTypes`를 사용하여 입력 바인딩에 대한 엄격한 널 타입 검사를 제외합니다.
 
-Unless otherwise commented, each following option is set to the value for `strictTemplates` \(`true` when `strictTemplates` is `true` and conversely, the other way around\).
+주석이 달리지 않는 한, 다음 각 옵션은 `strictTemplates`에 대한 값으로 설정됩니다(`strictTemplates`가 `true`인 경우는 `true`, 그 반대의 경우는 그 반대).
 
-| Strictness flag              | Effect |
-|:---                          |:---    |
-| `strictInputTypes`           | Whether the assignability of a binding expression to the `@Input()` field is checked. Also affects the inference of directive generic types.                                                                                                                                                                                                                                                                                                |
-| `strictInputAccessModifiers` | Whether access modifiers such as `private`/`protected`/`readonly` are honored when assigning a binding expression to an `@Input()`. If disabled, the access modifiers of the `@Input` are ignored; only the type is checked. This option is `false` by default, even with `strictTemplates` set to `true`.                                                                                                                                  |
-| `strictNullInputTypes`       | Whether `strictNullChecks` is honored when checking `@Input()` bindings \(per `strictInputTypes`\). Turning this off can be useful when using a library that was not built with `strictNullChecks` in mind.                                                                                                                                                                                                                                 |
-| `strictAttributeTypes`       | Whether to check `@Input()` bindings that are made using text attributes. For example, `<input matInput disabled="true">` \(setting the `disabled` property to the string `'true'`\) vs `<input matInput [disabled]="true">` \(setting the `disabled` property to the boolean `true`\). |
-| `strictSafeNavigationTypes`  | Whether the return type of safe navigation operations \(for example, `user?.name` will be correctly inferred based on the type of `user`\). If disabled, `user?.name` will be of type `any`.                                                                                                                                                                                                                                                |
-| `strictDomLocalRefTypes`     | Whether local references to DOM elements will have the correct type. If disabled `ref` will be of type `any` for `<input #ref>`.                                                                                                                                                                                                                                                                                                            |
-| `strictOutputEventTypes`     | Whether `$event` will have the correct type for event bindings to component/directive an `@Output()`, or to animation events. If disabled, it will be `any`.                                                                                                                                                                                                                                                                                |
-| `strictDomEventTypes`        | Whether `$event` will have the correct type for event bindings to DOM events. If disabled, it will be `any`.                                                                                                                                                                                                                                                                                                                                |
-| `strictContextGenerics`      | Whether the type parameters of generic components will be inferred correctly \(including any generic bounds\). If disabled, any type parameters will be `any`.                                                                                                                                                                                                                                                                              |
-| `strictLiteralTypes`         | Whether object and array literals declared in the template will have their type inferred. If disabled, the type of such literals will be `any`. This flag is `true` when *either* `fullTemplateTypeCheck` or `strictTemplates` is set to `true`.                                                                                                                                                                                            |
+| 엄격성 플래그               | 효과 |
+|:---                         |:---   |
+| `strictInputTypes`         | 바인딩 표현식이 `@Input()` 필드에 할당 가능한지 여부를 검사합니다. 또한 지시문의 일반 타입 추론에 영향을 미칩니다.                                                                                                                                                                                                                                                                                             |
+| `strictInputAccessModifiers` | 바인딩 표현식을 `@Input()`에 할당할 때 `private` / `protected` / `readonly`와 같은 접근 제어자를 준수할지 여부를 결정합니다. 비활성화하면 `@Input`의 접근 제어자가 무시되며, 타입만 검사됩니다. 이 옵션은 기본적으로 `false`이며, `strictTemplates`가 `true`로 설정되더라도 마찬가지입니다.                                                                                                                                                                 |
+| `strictNullInputTypes`       | `@Input()` 바인딩을 검사할 때 `strictNullChecks`를 준수할지 여부입니다(`strictInputTypes`에 따라). 이를 끄면 `strictNullChecks`를 염두에 두지 않고 작성된 라이브러리를 사용할 때 유용할 수 있습니다.                                                                                                                                                                                                                       |
+| `strictAttributeTypes`       | 텍스트 속성을 이용하여 이루어진 `@Input()` 바인딩을 검사할지 여부입니다. 예를 들어, `<input matInput disabled="true">`(속성에 문자열 `'true'`가 설정됨)와 `<input matInput [disabled]="true">`(속성에 불리언 `true`가 설정됨)입니다. |
+| `strictSafeNavigationTypes`  | 안전 탐색 작업의 반환 타입을 제대로 추론할지 여부입니다(예: `user?.name`은 `user` 타입에 따라 정확하게 추론됩니다). 비활성화하면 `user?.name`은 타입이 `any`가 됩니다.                                                                                                                                                                                                                                                |
+| `strictDomLocalRefTypes`     | DOM 요소에 대한 로컬 참조가 올바른 타입을 가질지 여부입니다. 비활성화되면 `<input #ref>`의 `ref`는 타입이 `any`가 됩니다.                                                                                                                                                                                                                                                                              |
+| `strictOutputEventTypes`     | `$event`가 컴포넌트/지시문에서의 이벤트 바인딩이나 애니메이션 이벤트에 대한 올바른 타입을 가질지 여부입니다. 비활성화되면 타입은 `any`가 됩니다.                                                                                                                                                                                                                                                                         |
+| `strictDomEventTypes`        | `$event`가 DOM 이벤트에 대한 이벤트 바인딩에서 올바른 타입을 가질지 여부입니다. 비활성화되면 타입은 `any`가 됩니다.                                                                                                                                                                                                                                                                                                      |
+| `strictContextGenerics`      | 일반 컴포넌트의 타입 매개변수들이 제대로 추론될지 여부(모든 일반 제한 포함)입니다. 비활성화되면 모든 타입 매개변수는 `any`가 됩니다.                                                                                                                                                                                                                                                               |
+| `strictLiteralTypes`         | 템플릿에서 선언된 객체 및 배열 리터럴의 타입이 추론되는지 여부입니다. 비활성화되면 이러한 리터럴의 타입은 `any`가 됩니다. 이 플래그는 *either* `fullTemplateTypeCheck`나 `strictTemplates`가 `true`로 설정될 때 `true`입니다.                                                                                                                                                                |
 
-If you still have issues after troubleshooting with these flags, fall back to full mode by disabling `strictTemplates`.
+이 플래그들로 문제 해결을 한 후에도 여전히 문제가 발생하면 `strictTemplates`를 비활성화하여 전체 모드로 되돌린다.
 
-If that doesn't work, an option of last resort is to turn off full mode entirely with `fullTemplateTypeCheck: false`.
+이것이 효과가 없다면, 마지막 수단으로 `fullTemplateTypeCheck: false`를 설정하여 전체 모드를 완전히 끌 수 있습니다.
 
-A type-checking error that you cannot resolve with any of the recommended methods can be the result of a bug in the template type-checker itself.
-If you get errors that require falling back to basic mode, it is likely to be such a bug.
-If this happens, [file an issue](https://github.com/angular/angular/issues) so the team can address it.
+추천된 방법으로 해결할 수 없는 타입 검사 오류는 템플릿 타입 검사기 자체의 버그로 인해 발생할 수 있습니다.
+기본 모드로 되돌아가야 하는 오류가 발생하면 고장일 가능성이 높습니다.
+이런 일이 발생하면, [문제를 제기](https://github.com/angular/angular/issues)하여 팀이 문제를 해결할 수 있도록 하세요.
 
-## Inputs and type-checking
+## 입력 및 타입 검사
 
-The template type checker checks whether a binding expression's type is compatible with that of the corresponding directive input.
-As an example, consider the following component:
+템플릿 타입 검사기는 바인딩 표현식의 타입이 해당 지시문 입력과 호환되는지 여부를 확인합니다.
+예를 들어, 다음 컴포넌트를 고려하십시오:
 
 <docs-code language="typescript">
 
@@ -153,7 +153,7 @@ export class UserDetailComponent {
 
 </docs-code>
 
-The `AppComponent` template uses this component as follows:
+`AppComponent` 템플릿은 이 컴포넌트를 다음과 같이 사용합니다:
 
 <docs-code language="typescript">
 
@@ -167,34 +167,34 @@ export class AppComponent {
 
 </docs-code>
 
-Here, during type checking of the template for `AppComponent`, the `[user]="selectedUser"` binding corresponds with the `UserDetailComponent.user` input.
-Therefore, Angular assigns the `selectedUser` property to `UserDetailComponent.user`, which would result in an error if their types were incompatible.
-TypeScript checks the assignment according to its type system, obeying flags such as `strictNullChecks` as they are configured in the application.
+여기서 `AppComponent`의 템플릿 타입 검사는 `[user]="selectedUser"` 바인딩이 `UserDetailComponent.user` 입력에 상응함을 확인합니다.
+따라서 Angular는 `selectedUser` 속성을 `UserDetailComponent.user`에 할당하는데, 그 타입이 호환되지 않으면 오류가 발생합니다.
+TypeScript는 그 타입 시스템에 따라 할당을 검사하며, 애플리케이션에 구성된 `strictNullChecks`와 같은 플래그를 준수합니다.
 
-Avoid run-time type errors by providing more specific in-template type requirements to the template type checker.
-Make the input type requirements for your own directives as specific as possible by providing template-guard functions in the directive definition.
-See [Improving template type checking for custom directives](guide/directives/structural-directives#directive-type-checks) in this guide.
+템플릿 타입 검사기에 더 구체적인 타입 요구 사항을 제공하여 런타임 타입 오류를 피하도록 하세요.
+지시문에 대한 입력 타입 요구 사항을 문서화 함수로 제공하여 가능한 한 구체적으로 설정하세요.
+이 가이드의 [사용자 정의 지시문을 위한 템플릿 타입 검사 개선](guide/directives/structural-directives#directive-type-checks)에서 참조하세요.
 
-### Strict null checks
+### 엄격 널 검사
 
-When you enable `strictTemplates` and the TypeScript flag `strictNullChecks`, typecheck errors might occur for certain situations that might not easily be avoided.
-For example:
+`strictTemplates`와 TypeScript 플래그 `strictNullChecks`를 활성화하면 피할 수 없는 특정 상황에 대해 타입 검사 오류가 발생할 수 있습니다.
+예를 들어:
 
-* A nullable value that is bound to a directive from a library which did not have `strictNullChecks` enabled.
+* `strictNullChecks`가 활성화되지 않은 라이브러리의 지시문에 바인딩된 nullable 값입니다.
 
-    For a library compiled without `strictNullChecks`, its declaration files will not indicate whether a field can be `null` or not.
-    For situations where the library handles `null` correctly, this is problematic, as the compiler will check a nullable value against the declaration files which omit the `null` type.
-    As such, the compiler produces a type-check error because it adheres to `strictNullChecks`.
+    `strictNullChecks` 없이 컴파일된 라이브러리의 선언 파일은 필드가 `null`일 수 있는지 여부를 나타내지 않습니다.
+    라이브러리가 `null`을 올바르게 처리하는 상황에서는 문제가 되며, 컴파일러는 nullable 값을 `null` 타입이 생략된 선언 파일과 검사합니다.
+    따라서 컴파일러는 `strictNullChecks`를 준수하기 때문에 타입 검사 오류를 발생시킵니다.
 
-* Using the `async` pipe with an Observable which you know will emit synchronously.
+* 비동기적으로 발행될 것으로 알고 있는 Observable에 `async` 파이프를 사용할 때입니다.
 
-    The `async` pipe currently assumes that the Observable it subscribes to can be asynchronous, which means that it's possible that there is no value available yet.
-    In that case, it still has to return something —which is `null`.
-    In other words, the return type of the `async` pipe includes `null`, which might result in errors in situations where the Observable is known to emit a non-nullable value synchronously.
+    현재 `async` 파이프는 구독하는 Observable이 비동기적일 수 있다고 가정하므로, 아직 값이 제공되지 않을 가능성이 있습니다.
+    이 경우에도 무언가를 반환해야 하는데, 이는 `null`입니다.
+    즉, `async` 파이프의 반환 타입에는 `null`이 포함되어 있으므로 Observable이 비null 값으로 동기적으로 발행되는 상황에서는 오류가 발생할 수 있습니다.
 
-There are two potential workarounds to the preceding issues:
+다음 두 가지 대안이 있습니다:
 
-* In the template, include the non-null assertion operator `!` at the end of a nullable expression, such as
+* 템플릿에서 nullable 표현식 끝에 non-null 단언 연산자 `!`를 포함하세요, 예를 들어
 
     <docs-code hideCopy language="html">
 
@@ -202,8 +202,8 @@ There are two potential workarounds to the preceding issues:
 
     </docs-code>
 
-    In this example, the compiler disregards type incompatibilities in nullability, just as in TypeScript code.
-    In the case of the `async` pipe, notice that the expression needs to be wrapped in parentheses, as in
+    이 경우, 컴파일러는 TypeScript 코드와 같이 nullability의 타입 불일치를 무시합니다.
+    `async` 파이프의 경우, 표현식을 괄호로 감싸야 합니다. 예를 들어
 
     <docs-code hideCopy language="html">
 
@@ -211,25 +211,25 @@ There are two potential workarounds to the preceding issues:
 
     </docs-code>
 
-* Disable strict null checks in Angular templates completely.
+* Angular 템플릿 내에서 엄격 널 검사를 완전히 비활성화합니다.
 
-    When `strictTemplates` is enabled, it is still possible to disable certain aspects of type checking.
-    Setting the option `strictNullInputTypes` to `false` disables strict null checks within Angular templates.
-    This flag applies for all components that are part of the application.
+    `strictTemplates`가 활성화된 경우에도 타입 검사의 특정 측면을 비활성화할 수 있습니다.
+    `strictNullInputTypes` 옵션을 `false`로 설정하면 Angular 템플릿 내 엄격한 널 검사를 비활성화할 수 있습니다.
+    이 플래그는 애플리케이션의 모든 컴포넌트에 적용됩니다.
 
-### Advice for library authors
+### 라이브러리 저자를 위한 조언
 
-As a library author, you can take several measures to provide an optimal experience for your users.
-First, enabling `strictNullChecks` and including `null` in an input's type, as appropriate, communicates to your consumers whether they can provide a nullable value or not.
-Additionally, it is possible to provide type hints that are specific to the template type checker.
-See [Improving template type checking for custom directives](guide/directives/structural-directives#directive-type-checks), and [Input setter coercion](#input-setter-coercion).
+라이브러리 저자로서 사용자에게 최적의 경험을 제공하기 위해 여러 조치를 취할 수 있습니다.
+첫째, 필요할 경우 `strictNullChecks`를 활성화하고 입력의 타입에 `null`을 포함하면 사용자가 nullable 값을 제공할 수 있는지 여부를 명확하게 할 수 있습니다.
+또한 템플릿 타입 검사기에 구체적인 타입 힌트를 제공할 수 있습니다.
+이 가이드의 [사용자 정의 지시문을 위한 템플릿 타입 검사 개선](guide/directives/structural-directives#directive-type-checks), 및 [입력 설정자 변환](#input-setter-coercion)을 참조하세요.
 
-## Input setter coercion
+## 입력 설정자 변환
 
-Occasionally it is desirable for the `@Input()` of a directive or component to alter the value bound to it, typically using a getter/setter pair for the input.
-As an example, consider this custom button component:
+때때로 지시문이나 컴포넌트의 `@Input()`이 바인딩된 값을 변경해야 할 필요가 있으며, 일반적으로 입력에 대해 getter/setter 쌍을 사용합니다.
+예를 들어, 다음의 사용자 정의 버튼 컴포넌트를 고려하세요:
 
-Consider the following directive:
+다음 지시문을 고려하세요:
 
 <docs-code language="typescript">
 
@@ -237,7 +237,7 @@ Consider the following directive:
   selector: 'submit-button',
   template: `
     <div class="wrapper">
-      <button [disabled]="disabled">Submit</button>
+      <button [disabled]="disabled">제출</button>
     </div>
   `,
 })
@@ -256,9 +256,9 @@ class SubmitButton {
 
 </docs-code>
 
-Here, the `disabled` input of the component is being passed on to the `<button>` in the template.
-All of this works as expected, as long as a `boolean` value is bound to the input.
-But, suppose a consumer uses this input in the template as an attribute:
+여기서 컴포넌트의 `disabled` 입력은 템플릿의 `<button>`으로 전달됩니다.
+모두 예상대로 작동하지만, 불리언 값이 입력에 바인딩될 때만 그렇습니다.
+하지만 소비자가 템플릿에서 이 입력을 속성으로 사용할 경우:
 
 <docs-code language="html">
 
@@ -266,7 +266,7 @@ But, suppose a consumer uses this input in the template as an attribute:
 
 </docs-code>
 
-This has the same effect as the binding:
+사실상 바인딩과 동일한 효과를 가집니다:
 
 <docs-code language="html">
 
@@ -274,8 +274,8 @@ This has the same effect as the binding:
 
 </docs-code>
 
-At runtime, the input will be set to the empty string, which is not a `boolean` value.
-Angular component libraries that deal with this problem often "coerce" the value into the right type in the setter:
+런타임에서는 입력이 빈 문자열로 설정되어 불리언 값이 아닙니다.
+이 문제를 처리하는 Angular 컴포넌트 라이브러리는 종종 설정자에서 값을 올바른 타입으로 "변환"합니다:
 
 <docs-code language="typescript">
 
@@ -285,13 +285,13 @@ set disabled(value: boolean) {
 
 </docs-code>
 
-It would be ideal to change the type of `value` here, from `boolean` to `boolean|''`, to match the set of values which are actually accepted by the setter.
-TypeScript prior to version 4.3 requires that both the getter and setter have the same type, so if the getter should return a `boolean` then the setter is stuck with the narrower type.
+이 경우 `value`의 타입을 `boolean`에서 `boolean|''`로 변경하는 것이 이상적입니다.
+TypeScript 4.3 이전 버전은 getter와 setter 모두 동일한 타입이 있어야 하므로, getter가 `boolean`을 반환하면 setter는 좁은 타입을 가지게 됩니다.
 
-If the consumer has Angular's strictest type checking for templates enabled, this creates a problem: the empty string \(`''`\) is not actually assignable to the `disabled` field, which creates a type error when the attribute form is used.
+소비자가 Angular의 템플릿에 대한 가장 엄격한 타입 검사를 활성화하면 문제가 발생합니다: 빈 문자열(`''`)은 실질적으로 `disabled` 필드에 할당할 수 없으므로 속성 형태를 사용할 때 타입 오류가 발생하게 됩니다.
 
-As a workaround for this problem, Angular supports checking a wider, more permissive type for `@Input()` than is declared for the input field itself.
-Enable this by adding a static property with the `ngAcceptInputType_` prefix to the component class:
+이 문제의 해결 방법으로, Angular는 `@Input()`에 대해 입력 필드에 선언된 것보다 더 넓고 관대하게 타입을 검사하는 것을 지원합니다.
+이를 위해 컴포넌트 클래스에 `ngAcceptInputType_` 접두사가 있는 정적 속성을 추가하십시오:
 
 <docs-code language="typescript">
 
@@ -312,21 +312,21 @@ class SubmitButton {
 
 </docs-code>
 
-Since TypeScript 4.3, the setter could have been declared to accept `boolean|''` as type, making the input setter coercion field obsolete.
-As such, input setters coercion fields have been deprecated.
+TypeScript 4.3 이후에는 setter가 `boolean|''`를 타입으로 수용할 수 있도록 선언할 수 있었으므로 입력 설정자 변환 필드가 불필요하게 되었습니다.
+따라서 입력 설정자 변환 필드는 사용 중단되었습니다.
 
-This field does not need to have a value.
-Its existence communicates to the Angular type checker that the `disabled` input should be considered as accepting bindings that match the type `boolean|''`.
-The suffix should be the `@Input` *field* name.
+이 필드는 값이 필요하지 않습니다.
+그 존재는 Angular 타입 검사기에 `disabled` 입력이 `boolean|''` 타입과 일치하는 바인딩을 허용해야 함을 전달합니다.
+접미사는 `@Input` *필드* 이름이어야 합니다.
 
-Care should be taken that if an `ngAcceptInputType_` override is present for a given input, then the setter should be able to handle any values of the overridden type.
+주어진 입력에 대해 `ngAcceptInputType_` 재정의가 있는 경우, 설정자는 재정의된 타입의 모든 값을 처리할 수 있어야 합니다.
 
-## Disabling type checking using `$any()`
+## `$any()`를 사용한 타입 검사 비활성화
 
-Disable checking of a binding expression by surrounding the expression in a call to the `$any()` cast pseudo-function.
-The compiler treats it as a cast to the `any` type just like in TypeScript when a `<any>` or `as any` cast is used.
+바인딩 표현식의 검사를 비활성화하려면 표현식을 `$any()` 캐스트 가상의 함수 호출로 감싸십시오.
+컴파일러는 TypeScript에서 `<any>` 또는 `as any` 캐스트를 사용할 때처럼 이를 `any` 타입으로 캐스트로 처리합니다.
 
-In the following example, casting `person` to the `any` type suppresses the error `Property address does not exist`.
+다음 예시에서는 `person`을 `any` 타입으로 캐스트하여 `Property address does not exist` 오류를 억제합니다.
 
 <docs-code language="typescript">
 
@@ -338,4 +338,4 @@ class MyComponent {
   person?: Person;
 }
 
-</docs-code>
+</docs-code>
\ No newline at end of file
diff --git a/adev/src/content/tools/devtools.md b/adev/src/content/tools/devtools.md
index 6c7b8160e380..2cd13e13b3a4 100644
--- a/adev/src/content/tools/devtools.md
+++ b/adev/src/content/tools/devtools.md
@@ -1,196 +1,196 @@
-# DevTools Overview
+# DevTools 개요
 
-Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications.
+Angular DevTools는 Angular 애플리케이션을 위한 디버깅 및 프로파일링 기능을 제공하는 브라우저 확장입니다.
 
 <docs-video src="https://www.youtube.com/embed/bavWOHZM6zE"/>
 
-Install Angular DevTools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh) or from [Firefox Addons](https://addons.mozilla.org/firefox/addon/angular-devtools/).
+[Chrome 웹 스토어](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh) 또는 [Firefox 부가 기능](https://addons.mozilla.org/firefox/addon/angular-devtools/)에서 Angular DevTools를 설치하세요.
 
-You can open Chrome or Firefox DevTools on any web page by pressing <kbd>F12</kbd> or <kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd></kbd> (Windows or Linux) and <kbd><kbd>Fn</kbd>+<kbd>F12</kbd></kbd> or <kbd><kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>I</kbd></kbd> (Mac).
-Once browser DevTools is open and Angular DevTools is installed, you can find it under the "Angular" tab.
+Chrome 또는 Firefox DevTools를 열려면 모든 웹 페이지에서 <kbd>F12</kbd> 또는 <kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd></kbd> (Windows 또는 Linux), <kbd><kbd>Fn</kbd>+<kbd>F12</kbd></kbd> 또는 <kbd><kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>I</kbd></kbd> (Mac)을 누르세요.
+브라우저 DevTools가 열리고 Angular DevTools가 설치되면 "Angular" 탭 아래에서 찾을 수 있습니다.
 
-HELPFUL: Chrome's new tab page does not run installed extensions, so the Angular tab will not appear in DevTools. Visit any other page to see it.
+도움말: Chrome의 새 탭 페이지에서는 설치된 확장이 실행되지 않으므로 Angular 탭은 DevTools에 나타나지 않습니다. 다른 페이지를 방문하여 확인하세요.
 
-<img src="assets/images/guide/devtools/devtools.png" alt="An overview of Angular DevTools showing a tree of components for an application.">
+<img src="assets/images/guide/devtools/devtools.png" alt="애플리케이션을 위한 구성 요소 트리를 보여주는 Angular DevTools 개요.">
 
-## Open your application
+## 애플리케이션 열기
 
-When you open the extension, you'll see two additional tabs:
+확장을 열면 추가적인 두 개의 탭이 표시됩니다:
 
-| Tabs                                     | Details |
-|:---                                      |:---     |
-| [Components](tools/devtools#debug-your-application) | Lets you explore the components and directives in your application and preview or edit their state.                    |
-| [Profiler](tools/devtools#profile-your-application)     | Lets you profile your application and understand what the performance bottleneck is during change detection execution. |
+| 탭                                   | 세부사항 |
+|:---                                  |:---      |
+| [Components](tools/devtools#debug-your-application) | 애플리케이션의 구성 요소 및 지시어를 탐색하고 그 상태를 미리 보거나 편집할 수 있습니다.                    |
+| [Profiler](tools/devtools#profile-your-application)  | 애플리케이션의 프로파일을 생성하고 변경 감지 실행 중 성능 병목 지점을 이해할 수 있습니다. |
 
-<img src="assets/images/guide/devtools/devtools-tabs.png" alt="A screenshot of the top of Angular DevTools illustrating two tabs in the upper-left corner, one labeled 'Components' and another labeled 'Profiler'.">
+<img src="assets/images/guide/devtools/devtools-tabs.png" alt="왼쪽 상단에 'Components'라는 레이블이 붙은 탭 하나와 'Profiler'라는 레이블이 붙은 두 번째 탭이 있는 Angular DevTools 상단의 스크린샷.">
 
-In the top-right corner of Angular DevTools you'll find which version of Angular is running on the page as well as the latest commit hash for the extension.
+Angular DevTools의 오른쪽 상단 모서리에서는 페이지에서 실행 중인 Angular 버전과 확장에 대한 최신 커밋 해시를 찾을 수 있습니다.
 
-### Angular application not detected
+### Angular 애플리케이션이 감지되지 않음
 
-If you see an error message "Angular application not detected" when opening Angular DevTools, this means it is not able to communicate with an Angular app on the page.
-The most common reason for this is because the web page you are inspecting does not contain an Angular application.
-Double check that you are inspecting the right web page and that the Angular app is running.
+Angular DevTools를 열 때 "Angular 애플리케이션이 감지되지 않음"이라는 오류 메시지가 나타나면, 이는 페이지에서 Angular 앱과 통신할 수 없음을 의미합니다.
+가장 일반적인 이유는 검사 중인 웹 페이지에 Angular 애플리케이션이 포함되어 있지 않기 때문입니다.
+올바른 웹 페이지를 검사하고 Angular 앱이 실행 중인지 다시 확인하세요.
 
-### We detected an application built with production configuration
+### 프로덕션 구성으로 구축된 애플리케이션이 감지됨
 
-If you see an error message "We detected an application built with production configuration. Angular DevTools only supports development builds.", this means that an Angular application was found on the page, but it was compiled with production optimizations.
-When compiling for production, Angular CLI removes various debug features to minimize the amount of the JavaScript on the page to improve performance. This includes features needed to communicate with DevTools.
+"프로덕션 구성으로 구축된 애플리케이션이 감지되었습니다. Angular DevTools는 개발 빌드만 지원합니다."라는 오류 메시지가 나타나면, 이는 페이지에서 Angular 애플리케이션이 발견되었지만 프로덕션 최적화로 컴파일되었음을 의미합니다.
+프로덕션을 위해 컴파일할 때 Angular CLI는 성능 향상을 위해 페이지의 JavaScript 양을 최소화하기 위해 다양한 디버그 기능을 제거합니다. 여기에는 DevTools와의 통신에 필요한 기능이 포함됩니다.
 
-To run DevTools, you need to compile your application with optimizations disabled. `ng serve` does this by default.
-If you need to debug a deployed application, disable optimizations in your build with the [`optimization` configuration option](reference/configs/workspace-config#optimization-configuration) (`{"optimization": false}`).
+DevTools를 실행하려면 최적화를 비활성화하고 애플리케이션을 컴파일해야 합니다. `ng serve`는 기본적으로 이를 수행합니다.
+배포된 애플리케이션을 디버깅해야 하는 경우 [`optimization` 구성 옵션](reference/configs/workspace-config#optimization-configuration)으로 빌드에서 최적화를 비활성화하세요 (`{"optimization": false}`).
 
-## Debug your application
+## 애플리케이션 디버그
 
-The **Components** tab lets you explore the structure of your application.
-You can visualize the component and directive instances in the DOM and inspect or modify their state.
+**Components** 탭을 통해 애플리케이션의 구조를 탐색할 수 있습니다.
+DOM에서 구성 요소 및 지시어 인스턴스를 시각화하고 그 상태를 검사하거나 수정할 수 있습니다.
 
-### Explore the application structure
+### 애플리케이션 구조 탐색
 
-The component tree displays a hierarchical relationship of the *components and directives* within your application.
+구성 요소 트리는 애플리케이션 내의 *구성 요소 및 지시어* 간의 계층 관계를 표시합니다.
 
-<img src="assets/images/guide/devtools/component-explorer.png" alt="A screenshot of the 'Components' tab showing a tree of Angular components and directives starting the root of the application.">
+<img src="assets/images/guide/devtools/component-explorer.png" alt="애플리케이션의 루트에서 시작하는 Angular 구성 요소 및 지시어의 트리를 보여주는 'Components' 탭의 스크린샷.">
 
-Click the individual components or directives in the component explorer to select them and preview their properties.
-Angular DevTools displays properties and metadata on the right side of the component tree.
+구성 요소 탐색기에서 개별 구성 요소 또는 지시어를 클릭하여 선택하고 속성을 미리 볼 수 있습니다.
+Angular DevTools는 구성 요소 트리의 오른쪽에 속성과 메타데이터를 표시합니다.
 
-To look up a component or directive by name use the search box above the component tree.
+이름으로 구성 요소나 지시어를 찾으려면 구성 요소 트리 위의 검색 상자를 사용하세요.
 
-<img src="assets/images/guide/devtools/search.png" alt="A screenshot of the 'Components' tab. The filter bar immediately underneath the tab is searching for 'todo' and all components with 'todo' in the name are highlighted in the tree. `app-todos` is currently selected and a sidebar to the right displays information about the component's properties. This includes a section of `@Output` fields and another section for other properties.">
+<img src="assets/images/guide/devtools/search.png" alt="Components 탭의 스크린샷. 탭 아래에 있는 필터 바가 'todo'를 검색하고 있으며, 이름에 'todo'가 포함된 모든 구성 요소가 트리에서 강조 표시됩니다. 현재 선택되어 있는 것은 `app-todos`이며, 오른쪽 사이드바에는 구성 요소 속성에 대한 정보가 표시됩니다. 여기에는 `@Output` 필드 섹션과 다른 속성 섹션이 포함됩니다.">
 
-### Navigate to the host node
+### 호스트 노드로 이동
 
-To go to the host element of a particular component or directive, double-click it in the component explorer.
-Angular DevTools will open the Elements tab in Chrome or the Inspector tab in Firefox, and select the associated DOM node.
+특정 구성 요소 또는 지시어의 호스트 요소로 이동하려면 구성 요소 탐색기에서 두 번 클릭하세요.
+Angular DevTools는 Chrome의 Elements 탭 또는 Firefox의 Inspector 탭을 열고 관련 DOM 노드를 선택합니다.
 
-### Navigate to source
+### 소스로 이동
 
-For components, Angular DevTools lets you navigate to the component definition in the Sources tab (Chrome) and Debugger tab (Firefox).
-After you select a particular component, click the icon at the top-right of the properties view:
+구성 요소의 경우 Angular DevTools는 Sources 탭(Chrome) 및 Debugger 탭(Firefox)에서 구성 요소 정의로 이동할 수 있습니다.
+특정 구성 요소를 선택한 후 속성 보기의 오른쪽 상단에 있는 아이콘을 클릭하세요:
 
-<img src="assets/images/guide/devtools/navigate-source.png" alt="A screenshot of the 'Components' tab. The properties view on the right is visible for a component and the mouse rests in the upper right corner of that view on top of a `<>` icon. An adjacent tooltip reads 'Open component source'.">
+<img src="assets/images/guide/devtools/navigate-source.png" alt="Components 탭의 스크린샷. 오른쪽에서 속성 보기가 나타나고, 마우스가 해당 뷰의 오른쪽 상단에 있는 `<>` 아이콘 위에 놓여 있습니다. 인접한 툴팁에는 '구성 요소 소스 열기'라고 적혀 있습니다.">
 
-### Update property value
+### 속성 값 업데이트
 
-Like browsers' DevTools, the properties view lets you edit the value of an input, output, or other properties.
-Right-click on the property value and if edit functionality is available for this value type, a text input will appear.
-Type the new value and press `Enter` to apply this value to the property.
+브라우저의 DevTools와 마찬가지로 속성 보기에서는 입력, 출력 또는 기타 속성의 값을 편집할 수 있습니다.
+속성 값을 마우스 오른쪽 버튼으로 클릭하면 이 값 유형에 대해 편집 기능이 가능한 경우 텍스트 입력란이 나타납니다.
+새 값을 입력하고 `Enter`를 눌러 이 값을 속성에 적용하세요.
 
-<img src="assets/images/guide/devtools/update-property.png" alt="A screenshot of the 'Components' tab with the properties view open for a component. An `@Input` named `todo` contains a `label` property which is currently selected and has been manually updated to the value 'Buy milk'.">
+<img src="assets/images/guide/devtools/update-property.png" alt="구성 요소에 대한 속성 보기의 스크린샷을 open. `@Input` 이름이 `todo`인 속성이 선택되었으며, 현재 '우유 사기' 값으로 수동 업데이트되었습니다.">
 
-### Access selected component or directive in console
+### 콘솔에서 선택한 구성 요소 또는 지시어에 액세스
 
-As a shortcut in the console, Angular DevTools provides access to instances of recently selected components or directives.
-Type `$ng0` to get a reference to the instance of the currently selected component or directive, and type `$ng1` for the previously selected instance, `$ng2` for the instance selected before that, and so on.
+콘솔의 바로 가기로 Angular DevTools는 최근 선택된 구성 요소 또는 지시어의 인스턴스에 대한 액세스를 제공합니다.
+현재 선택된 구성 요소나 지시어의 인스턴스에 대한 참조를 얻으려면 `$ng0`를 입력하고, 이전에 선택된 인스턴스에 대해서는 `$ng1`, 그 전 인스턴스에 대해서는 `$ng2`와 같이 입력하세요.
 
-<img src="assets/images/guide/devtools/access-console.png" alt="A screenshot of the 'Components' tab with the browser console underneath. In the console, the user has typed three commands, `$ng0`, `$ng1`, and `$ng2` to view the three most recently selected elements. After each statement, the console prints a different component reference.">
+<img src="assets/images/guide/devtools/access-console.png" alt="브라우저 콘솔 아래의 'Components' 탭의 스크린샷. 콘솔에 사용자가 `$ng0`, `$ng1`, `$ng2` 세 개의 명령을 입력하여 최근에 선택된 세 개의 요소를 확인하고 있습니다. 각 명령 후에 콘솔은 다른 구성 요소 참조를 출력합니다.">
 
-### Select a directive or component
+### 지시어 또는 구성 요소 선택
 
-Similar to browsers' DevTools, you can inspect the page to select a particular component or directive.
-Click the ***Inspect element*** icon in the top left corner within Angular DevTools and hover over a DOM element on the page.
-The extension recognizes the associated directives and/or components and lets you select the corresponding element in the Component tree.
+브라우저의 DevTools와 유사하게 페이지를 검사하여 특정 구성 요소나 지시어를 선택할 수 있습니다.
+Angular DevTools의 왼쪽 상단에 있는 ***Inspect element*** 아이콘을 클릭하고 페이지의 DOM 요소 위에 마우스를 올려놓으세요.
+확장 프로그램은 관련된 지시어 및/또는 구성 요소를 인식하고 구성 요소 트리에서 해당 요소를 선택할 수 있게 합니다.
 
-<img src="assets/images/guide/devtools/inspect-element.png" alt="A screenshot of the 'Components' tab with an Angular todo application visible. In the very top-left corner of Angular DevTools, an icon of a screen with a mouse icon inside it is selected. The mouse rests on a todo element in the Angular application UI. The element is highlighted with a `<TodoComponent>` label displayed in an adjacent tooltip.">
+<img src="assets/images/guide/devtools/inspect-element.png" alt="Angular todo 애플리케이션이 표시된 'Components' 탭의 스크린샷. Angular DevTools의 왼쪽 상단 모서리에서 아이콘이 선택되어 있으며 마우스가 Angular 애플리케이션 UI의 todo 요소 위에 있습니다. 요소는 `<TodoComponent>`라는 레이블이 있는 툴팁과 함께 강조 표시됩니다.">
 
-## Profile your application
+## 애플리케이션 프로파일링
 
-The **Profiler** tab lets you visualize the execution of Angular's change detection.
-This is useful for determining when and how change detection impacts your application's performance.
+**Profiler** 탭은 Angular의 변경 감지 실행을 시각화할 수 있게 해줍니다.
+이는 변경 감지가 애플리케이션의 성능에 어떻게 영향을 미치는지를 이해하는 데 유용합니다.
 
-<img src="assets/images/guide/devtools/profiler.png" alt="A screenshot of the 'Profiler' tab which reads 'Click the play button to start a new recording, or upload a json file containing profiler data.' Next to this is a record button to being recording a new profile as well as a file picker to select an existing profile.">
+<img src="assets/images/guide/devtools/profiler.png" alt="새로 녹음 시작 버튼을 클릭하거나 프로파일러 데이터를 포함하는 json 파일을 업로드하라는 메시지가 있는 'Profiler' 탭의 스크린샷. 그 옆에는 새로운 프로파일을 기록하기 시작하는 녹음 버튼과 기존 프로파일을 선택하는 파일 선택기가 있습니다.">
 
-The Profiler tab lets you start profiling the current application or import an existing profile from a previous run.
-To start profiling your application, hover over the circle in the top-left corner within the **Profiler** tab and click **Start recording**.
+Profiler 탭에서는 현재 애플리케이션의 프로파일링을 시작하거나 이전 실행에서 기존 프로파일을 가져올 수 있습니다.
+애플리케이션 프로파일링을 시작하려면 **Profiler** 탭의 왼쪽 상단 모서리에 있는 원 위로 마우스를 옮기고 **Start recording**을 클릭하세요.
 
-During profiling, Angular DevTools captures execution events, such as change detection and lifecycle hook execution.
-Interact with your application to trigger change detection and generate data Angular DevTools can use.
-To finish recording, click the circle again to **Stop recording**.
+프로파일링 중 Angular DevTools는 변경 감지 및 생명 주기 훅 실행과 같은 실행 이벤트를 캡처합니다.
+변경 감지를 트리거하고 Angular DevTools가 사용할 수 있는 데이터를 생성하려면 애플리케이션과 상호작용하세요.
+기록을 마치려면 원을 다시 클릭하여 **Stop recording**하세요.
 
-You can also import an existing recording.
-Read more about this feature in the [Import recording](tools/devtools#import-and-export-recordings) section.
+기존 기록을 가져올 수도 있습니다.
+이 기능에 대해 더 알아보려면 [Import recording](tools/devtools#import-and-export-recordings) 섹션을 참조하세요.
 
-### Understand your application's execution
+### 애플리케이션 실행 이해하기
 
-After recording or importing a profile, Angular DevTools displays a visualization of change detection cycles.
+프로파일을 기록하거나 가져온 후 Angular DevTools는 변경 감지 주기의 시각화를 표시합니다.
 
-<img src="assets/images/guide/devtools/default-profiler-view.png" alt="A screenshot of the 'Profiler' tab after a profile has been recorded or uploaded. It displays a bar chart illustrating various change detection cycles with some text which reads 'Select a bar to preview a particular change detection cycle'.">
+<img src="assets/images/guide/devtools/default-profiler-view.png" alt="프로파일이 기록되거나 업로드된 후 'Profiler' 탭의 스크린샷. 다양한 변경 감지 주기를 보여주는 막대 차트를 나타내며 '특정 변경 감지 주기를 미리 보려면 막대를 선택하세요'라는 텍스트가 있습니다.">
 
-Each bar in the sequence represents a change detection cycle in your app.
-The taller a bar is, the longer the application spent running change detection in this cycle.
-When you select a bar, DevTools displays useful information about it including:
+순서의 각 막대는 애플리케이션의 변경 감지 주기를 나타냅니다.
+막대가 높을수록 이 주기에서 변경 감지를 실행하는 데 더 많은 시간이 소요되었음을 의미합니다.
+막대를 선택하면 DevTools는 다음과 같은 유용한 정보를 표시합니다:
 
-* A bar chart with all the components and directives that it captured during this cycle
-* How much time Angular spent running change detection in this cycle.
-* An estimated frame rate as experienced by the user.
-* The source which triggered change detection.
+* 이 주기에서 캡처된 모든 구성 요소 및 지시어가 포함된 막대 차트
+* 이 주기에서 Angular가 변경 감지를 실행하는 데 소요된 시간.
+* 사용자 경험에 따른 추정 프레임 속도.
+* 변경 감지를 트리거한 소스.
 
-<img src="assets/images/guide/devtools/profiler-selected-bar.png" alt="A screenshot of the 'Profiler' tab. A single bar has been selected by the user and a nearby dropdown menu displays 'Bar chart`, showing a second bar chart underneath it. The new chart has two bars which take up the majority of the space, one labeled `TodosComponent` and the other labeled `NgForOf`. The other bars are small enough to be negligible in comparison.">
+<img src="assets/images/guide/devtools/profiler-selected-bar.png" alt="선택된 사용자가 하나의 막대를 선택한 'Profiler' 탭의 스크린샷. 인접한 드롭다운 메뉴에는 'Bar chart'가 표시되어 있으며 아래에는 두 번째 막대 차트가 있습니다. 새로운 차트에는 `TodosComponent` 및 `NgForOf`라는 두 개의 막대가 있으며, 다른 막대는 무시할 수 있을 만큼 작습니다.">
 
-### Understand component execution
+### 구성 요소 실행 이해하기
 
-The bar chart displayed after clicking on a change detection cycle displays a detailed view about how much time your application spent running change detection in that particular component or directive.
+변경 감지 주기를 클릭한 후 표시되는 막대 차트는 애플리케이션이 특정 구성 요소나 지시어에서 변경 감지를 실행하는 데 소요된 시간에 대한 자세한 정보를 표시합니다.
 
-This example shows the total time spent by the `NgForOf` directive and which method was called on it.
+이 예제에서는 `NgForOf` 지시어가 소비한 총 시간을 보여줍니다.
 
-<img src="assets/images/guide/devtools/directive-details.png" alt="A screenshot of the 'Profiler' tab where the `NgForOf` bar is selected. A detailed view of `NgForOf` is visible to the right where it lists 'Total time spent: 1.76 ms'. It includes a with exactly one row, listing `NgForOf` as a directives with an `ngDoCheck` method which took 1.76 ms. It also includes a list labeled 'Parent Hierarchy' containing the parent components of this directive.">
+<img src="assets/images/guide/devtools/directive-details.png" alt="선택된 `NgForOf` 막대가 보이는 'Profiler' 탭의 스크린샷. 오른쪽에 '소요 시간: 1.76 ms'라고 나와 있습니다. 여기에는 1.76 ms 걸린 `ngDoCheck` 메소드를 포함한 `NgForOf`라는 지시어가 있는 한 개의 행이 포함되어 있습니다. 이 지시어의 상위 계층을 포함하여 'Parent Hierarchy'로 레이블이 붙은 목록도 표시됩니다.">
 
-### Hierarchical views
+### 계층적 보기
 
-<img src="assets/images/guide/devtools/flame-graph-view.png" alt="A screenshot of the 'Profiler' tab. A single bar has been selected by the user and a nearby dropdown menu now displays 'Flame graph', showing a flame graph underneath it. The flame graph starts with a row called 'Entire application' and another row called 'AppComponent'. Beneath those, the rows start to break up into multiple items, starting with `[RouterOutlet]` and `DemoAppComponent` on the third row. A few layers deep, one cell is highlighted red.">
+<img src="assets/images/guide/devtools/flame-graph-view.png" alt="사용자가 선택한 단일 막대가 표시된 'Profiler' 탭의 스크린샷. 근처의 드롭다운 메뉴는 이제 'Flame graph'의 수준을 보여주고, 그 아래에 불꽃 그래프가 표시됩니다. 불꽃 그래프는 '전체 애플리케이션' 및 'AppComponent'라는 두 개의 행으로 시작합니다. 그 아래 행은 여러 항목으로 분리되며, `[RouterOutlet]`와 `DemoAppComponent`가 세 번째 행에 표시됩니다. 몇 단계 깊이의 한 셀은 빨간색으로 강조 표시됩니다.">
 
-You can also visualize the change detection execution in a flame graph-like view.
+변경 감지 실행을 불꽃 그래프와 같은 보기로 시각화할 수도 있습니다.
 
-Each tile in the graph represents an element on the screen at a specific position in the render tree.
-For example, consider a change detection cycle where a `LoggedOutUserComponent` is removed and in its place Angular rendered a `LoggedInUserComponent`. In this scenario both components will be displayed in the same tile.
+그래프의 각 타일은 렌더 트리의 특정 위치에서 화면의 요소를 나타냅니다.
+예를 들어, 변경 감지 주기에서 `LoggedOutUserComponent`가 제거되고 대신 Angular가 `LoggedInUserComponent`를 렌더링하는 경우 두 구성 요소가 동일한 타일에 표시됩니다.
 
-The x-axis represents the full time it took to render this change detection cycle.
-The y-axis represents the element hierarchy. Running change detection for an element requires render its directives and child components.
-Together, this graph visualizes which components are taking the longest time to render and where that time is going.
+x축은 변경 감지 주기를 렌더링하는 데 소요된 총 시간을 나타냅니다.
+y축은 요소 계층을 나타냅니다. 요소에 대한 변경 감지를 실행하려면 해당 지시어 및 하위 구성 요소를 렌더링해야 합니다.
+이 그래프는 어떤 구성 요소가 렌더링하는 데 가장 오랜 시간이 걸리는지, 그 시간이 어디에 쓰이는지를 시각적으로 나타냅니다.
 
-Each tile is colored depending on how much time Angular spent there.
-Angular DevTools determines the intensity of the color by the time spent relative to the tile where rendering took the most time.
+각 타일은 Angular가 그곳에서 얼마나 오랜 시간을 보냈는지에 따라 색이 지정됩니다.
+Angular DevTools는 가장 오랜 시간이 소요된 타일에 대해 소요된 시간을 기준으로 색의 강도를 결정합니다.
 
-When you click on a certain tile, you'll see details about it in the panel on the right.
-Double-clicking the tile zooms it in so you can more easily view its nested children.
+특정 타일을 클릭하면 오른쪽 패널에서 해당 타일에 대한 세부 정보를 확인할 수 있습니다.
+타일을 두 번 클릭하면 확대되어 중첩 자식 구성 요소를 더 쉽게 볼 수 있습니다.
 
-### Debug change detection and `OnPush` components
+### 변경 감지 및 `OnPush` 구성 요소 디버깅
 
-Normally, the graph visualizes the time it takes to *render* an application, for any given change detection frame. However some components such as `OnPush` components will only re-render if their input properties change. It can be useful to visualize the flame graph without these components for particular frames.
+정상적으로 그래프는 주어진 변경 감지 프레임에서 애플리케이션을 *렌더링*하는 데 소요된 시간을 시각화합니다. 그러나 `OnPush` 구성 요소와 같은 일부 구성 요소는 입력 속성이 변경될 때만 다시 렌더링됩니다. 특정 프레임에 대해 이러한 구성 요소 없이 불꽃 그래프를 시각화하는 것이 유용할 수 있습니다.
 
-To visualize only the components in a change detection frame that went through the change detection process, select the **Change detection** checkbox at the top, above the flame graph.
+변경 감지 프로세스를 거친 구성 요소만을 변경 감지 프레임에서 시각화하려면 불꽃 그래프 위에 있는 **Change detection** 체크박스를 선택하세요.
 
-This view highlights all the components that went through change detection and displays those that did not in gray, such as `OnPush` components that did not re-render.
+이 보기는 변경 감지 과정을 거친 모든 구성 요소를 강조 표시하고 다시 렌더링되지 않은 구성 요소(예: `OnPush` 구성 요소)를 회색으로 표시합니다.
 
-<img src="assets/images/guide/devtools/debugging-onpush.png" alt="A screenshot of the 'Profiler' tab displaying a flame chart visualization of a change detection cycle. A checkbox labeled 'Show only change detection' is now checked. The flame graph looks very similar to before, however the color of components has changed from orange to blue. Several tiles labeled `[RouterOutlet]` are no longer highlighted with any color.">
+<img src="assets/images/guide/devtools/debugging-onpush.png" alt="변경 감지 주기의 불꽃 차트 시각화를 보여주는 'Profiler' 탭의 스크린샷. 'Show only change detection'이라는 레이블이 붙은 체크박스가 이제 선택됨. 불꽃 그래프가 이전과 매우 유사하게 보이지만, 구성 요소의 색상이 주황색에서 파란색으로 변경되었습니다. `[RouterOutlet]`로 레이블이 붙은 여러 개의 타일은 더 이상 색으로 강조 표시되지 않습니다.">
 
-### Import and export recordings
+### 기록 가져오기 및 내보내기
 
-Click the **Save Profile** button at the top-right of a recorded profiling session to export it as a JSON file and save it to the disk.
-Later, import the file in the initial view of the profiler by clicking the **Choose file** input.
+기록된 프로파일 세션의 오른쪽 상단에서 **Save Profile** 버튼을 클릭하여 JSON 파일로 내보내기하고 디스크에 저장하세요.
+이후 처음 보기에 파일을 가져오려면 **Choose file** 입력을 클릭하세요.
 
-<img src="assets/images/guide/devtools/save-profile.png" alt="A screenshot of the 'Profiler' tab displaying change detection cycles. On the right side a 'Save Profile' button is visible.">
+<img src="assets/images/guide/devtools/save-profile.png" alt="변경 감지 주기를 보여주는 'Profiler' 탭의 스크린샷. 오른쪽에 'Save Profile' 버튼이 표시됩니다.">
 
- ## Inspect your injectors
+ ## 인젝터 검사
 
- Note: The Injector Tree is available for Angular Applications built with version 17 or higher.
+ 참고: 인젝터 트리는 버전 17 이상으로 구축된 Angular 애플리케이션에서 사용할 수 있습니다.
 
-### View the injector hierarchy of your application
+### 애플리케이션의 인젝터 계층 보기
 
- The **Injector Tree** tab lets you explore the structure of the Injectors configured in your application. Here you will see two trees representing the [injector hierarchy](guide/di/hierarchical-dependency-injection) of your application. One tree is your environment hierarchy, the other is your element hierarchy.
+**Injector Tree** 탭은 애플리케이션에서 구성된 인젝터의 구조를 탐색할 수 있게 해줍니다. 여기에는 애플리케이션의 [인젝터 계층](guide/di/hierarchical-dependency-injection)을 나타내는 두 개의 트리가 표시됩니다. 하나의 트리는 환경 계층이고, 다른 하나는 요소 계층입니다.
 
-<img src="assets/images/guide/devtools/di-injector-tree.png" alt="A screenshot of the 'Profiler' tab displaying the injector tree tab in Angular Devtools visualizing the injector graph for an example application.">
+<img src="assets/images/guide/devtools/di-injector-tree.png" alt="예제 애플리케이션의 인젝터 그래프를 시각화하는 Angular Devtools의 인젝터 트리 탭을 보여주는 'Profiler' 탭의 스크린샷.">
 
- ### Visualize resolution paths
+ ### 해상도 경로 시각화
 
- When a specific injector is selected, the path that Angular's dependency injection algorithm traverses from that injector to the root is highlighted. For element injectors, this includes highlighting the environment injectors that the dependency injection algorithm jumps to when a dependency cannot be resolved in the element hierarchy.
+특정 인젝터가 선택되면 Angular의 종속성 주입 알고리즘이 해당 인젝터에서 루트까지 거치는 경로가 강조 표시됩니다. 요소 인젝터의 경우, 이는 종속성 주입 알고리즘이 요소 계층에서 종속성을 해결할 수 없는 경우 점프하는 환경 인젝터도 강조 표시합니다.
 
-See [resolution rules](guide/di/hierarchical-dependency-injection#resolution-rules) for more details about how Angular resolves resolution paths. 
+Angular가 해상도 경로를 해결하는 방법에 대한 자세한 내용은 [해상도 규칙](guide/di/hierarchical-dependency-injection#resolution-rules)을 참조하세요.
 
-<img src="assets/images/guide/devtools/di-injector-tree-selected.png" alt="A screenshot of the 'Profiler' tab displaying how the injector tree visualize highlights resolution paths when an injector is selected.">
+<img src="assets/images/guide/devtools/di-injector-tree-selected.png" alt="선택한 인젝터의 경로가 하이라이트된 인젝터 트리를 시각화하는 'Profiler' 탭의 스크린샷.">
 
- ### View injector providers
+ ### 인젝터 제공자 보기
 
- Clicking an injector that has configured providers will display those providers in a list on the right of the injector tree view. Here you can view the provided token and it's type.
+구성된 제공자가 있는 인젝터를 클릭하면 인젝터 트리 보기의 오른쪽에 있는 제공자 목록이 표시됩니다. 여기서 제공된 토큰과 그 유형을 볼 수 있습니다.
 
-<img src="assets/images/guide/devtools/di-injector-tree-providers.png" alt="A screenshot of the 'Profiler' tab displaying how providers are made visible when an injector is selected.">
+<img src="assets/images/guide/devtools/di-injector-tree-providers.png" alt="선택된 인젝터가 제공자를 표시하는 'Profiler' 탭의 스크린샷.">
\ No newline at end of file
diff --git a/adev/src/content/tools/language-service.md b/adev/src/content/tools/language-service.md
index 5b99eb5b2983..87b802b217d6 100644
--- a/adev/src/content/tools/language-service.md
+++ b/adev/src/content/tools/language-service.md
@@ -1,11 +1,11 @@
-# Angular Language Service
+# Angular 언어 서비스
 
-The Angular Language Service provides code editors with a way to get completions, errors, hints, and navigation inside Angular templates.
-It works with external templates in separate HTML files, and also with in-line templates.
+Angular 언어 서비스는 코드 편집기가 Angular 템플릿 내에서 완성, 오류, 힌트 및 탐색을 얻는 방법을 제공합니다. 
+이는 별도의 HTML 파일로 된 외부 템플릿과 인라인 템플릿 모두에서 작동합니다.
 
-## Configuring compiler options for the Angular Language Service
+## Angular 언어 서비스의 컴파일러 옵션 구성
 
-To enable the latest Language Service features, set the `strictTemplates` option in `tsconfig.json` by setting `strictTemplates` to `true`, as shown in the following example:
+최신 언어 서비스 기능을 활성화하려면 `tsconfig.json`에서 `strictTemplates` 옵션을 `true`로 설정하여 다음 예와 같이 설정하십시오:
 
 <docs-code language="json">
 
@@ -15,81 +15,81 @@ To enable the latest Language Service features, set the `strictTemplates` option
 
 </docs-code>
 
-For more information, see the [Angular compiler options](reference/configs/angular-compiler-options) guide.
+자세한 내용은 [Angular 컴파일러 옵션](reference/configs/angular-compiler-options) 가이드를 참조하십시오.
 
-## Features
+## 기능
 
-Your editor autodetects that you are opening an Angular file.
-It then uses the Angular Language Service to read your `tsconfig.json` file, find all the templates you have in your application, and then provide language services for any templates that you open.
+편집기는 Angular 파일을 열고 있는 것을 자동으로 인식합니다.
+그 후 Angular 언어 서비스를 사용하여 `tsconfig.json` 파일을 읽고, 애플리케이션에 있는 모든 템플릿을 찾고, 열어본 모든 템플릿에 대해 언어 서비스를 제공합니다.
 
-Language services include:
+언어 서비스에는 다음이 포함됩니다:
 
-* Completions lists
-* AOT Diagnostic messages
-* Quick info
-* Go to definition
+* 완성 목록
+* AOT 진단 메시지
+* 빠른 정보
+* 정의로 이동
 
-### Autocompletion
+### 자동 완성
 
-Autocompletion can speed up your development time by providing you with contextual possibilities and hints as you type.
-This example shows autocomplete in an interpolation.
-As you type it out, you can press tab to complete.
+자동 완성은 입력하는 동안 상황에 맞는 가능성과 힌트를 제공하여 개발 시간을 단축할 수 있습니다.
+이 예제는 보간에서 자동 완성을 보여줍니다.
+이것을 입력하면서 탭을 눌러 완료할 수 있습니다.
 
-<img alt="autocompletion" src="assets/images/guide/language-service/language-completion.gif">
+<img alt="자동 완성" src="assets/images/guide/language-service/language-completion.gif">
 
-There are also completions within elements.
-Any elements you have as a component selector will show up in the completion list.
+요소 내에서도 완성이 가능합니다.
+컴포넌트 선택기로 가지고 있는 모든 요소가 완성 목록에 표시됩니다.
 
-### Error checking
+### 오류 검사
 
-The Angular Language Service can forewarn you of mistakes in your code.
-In this example, Angular doesn't know what `orders` is or where it comes from.
+Angular 언어 서비스는 코드의 오류를 미리 경고할 수 있습니다.
+이 예제에서 Angular는 `orders`가 무엇인지 또는 어디에서 왔는지 모릅니다.
 
-<img alt="error checking" src="assets/images/guide/language-service/language-error.gif">
+<img alt="오류 검사" src="assets/images/guide/language-service/language-error.gif">
 
-### Quick info and navigation
+### 빠른 정보 및 탐색
 
-The quick-info feature lets you hover to see where components, directives, and modules come from.
-You can then click "Go to definition" or press F12 to go directly to the definition.
+빠른 정보 기능을 통해 컴포넌트, 지시자, 모듈의 출처를 확인할 수 있도록 마우스를 올릴 수 있습니다.
+그런 다음 "정의로 이동"을 클릭하거나 F12를 눌러 정의로 직접 이동할 수 있습니다.
 
-<img alt="navigation" src="assets/images/guide/language-service/language-navigation.gif">
+<img alt="탐색" src="assets/images/guide/language-service/language-navigation.gif">
 
-## Angular Language Service in your editor
+## 편집기에서 Angular 언어 서비스 사용하기
 
-Angular Language Service is currently available as an extension for [Visual Studio Code](https://code.visualstudio.com), [WebStorm](https://www.jetbrains.com/webstorm), [Sublime Text](https://www.sublimetext.com) and [Eclipse IDE](https://www.eclipse.org/eclipseide).
+Angular 언어 서비스는 현재 [Visual Studio Code](https://code.visualstudio.com), [WebStorm](https://www.jetbrains.com/webstorm), [Sublime Text](https://www.sublimetext.com) 및 [Eclipse IDE](https://www.eclipse.org/eclipseide)의 확장으로 제공됩니다.
 
 ### Visual Studio Code
 
-In [Visual Studio Code](https://code.visualstudio.com), install the extension from the [Extensions: Marketplace](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template).
-Open the marketplace from the editor using the Extensions icon on the left menu pane, or use VS Quick Open \(⌘+P on Mac, CTRL+P on Windows\) and type "? ext".
-In the marketplace, search for Angular Language Service extension, and click the **Install** button.
+[Visual Studio Code](https://code.visualstudio.com)에서 [Extensions: Marketplace](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)에서 확장을 설치하십시오.
+편집기에서 왼쪽 메뉴 창의 Extensions 아이콘을 사용하여 마켓플레이스를 열거나 VS Quick Open \(⌘+P on Mac, CTRL+P on Windows\)를 사용하고 "? ext"를 입력하십시오.
+마켓플레이스에서 Angular 언어 서비스 확장을 검색하고 **설치** 버튼을 클릭하십시오.
 
-The Visual Studio Code integration with the Angular language service is maintained and distributed by the Angular team.
+Visual Studio Code와 Angular 언어 서비스 간의 통합은 Angular 팀에 의해 유지 관리되고 배포됩니다.
 
 ### Visual Studio
 
-In [Visual Studio](https://visualstudio.microsoft.com), install the extension from the [Extensions: Marketplace](https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.AngularLanguageService).
-Open the marketplace from the editor selecting Extensions on the top menu pane, and then selecting Manage Extensions.
-In the marketplace, search for Angular Language Service extension, and click the **Install** button.
+[Visual Studio](https://visualstudio.microsoft.com)에서 [Extensions: Marketplace](https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.AngularLanguageService)에서 확장을 설치하십시오.
+편집기에서 상단 메뉴 창의 Extensions를 선택한 후 Manage Extensions를 선택하여 마켓플레이스를 엽니다.
+마켓플레이스에서 Angular 언어 서비스 확장을 검색하고 **설치** 버튼을 클릭하십시오.
 
-The Visual Studio integration with the Angular language service is maintained and distributed by Microsoft with help from the Angular team.
-Check out the project [here](https://github.com/microsoft/vs-ng-language-service).
+Visual Studio와 Angular 언어 서비스의 통합은 Microsoft가 Angular 팀의 도움을 받아 유지 관리하고 배포합니다.
+프로젝트를 [여기](https://github.com/microsoft/vs-ng-language-service)에서 확인하십시오.
 
 ### WebStorm
 
-In [WebStorm](https://www.jetbrains.com/webstorm), enable the plugin [Angular and AngularJS](https://plugins.jetbrains.com/plugin/6971-angular-and-angularjs).
+[WebStorm](https://www.jetbrains.com/webstorm)에서 [Angular 및 AngularJS](https://plugins.jetbrains.com/plugin/6971-angular-and-angularjs) 플러그인을 활성화하십시오.
 
-Since WebStorm 2019.1, the `@angular/language-service` is not required anymore and should be removed from your `package.json`.
+WebStorm 2019.1 이후로 `@angular/language-service`는 더 이상 필요하지 않으며 `package.json`에서 제거해야 합니다.
 
 ### Sublime Text
 
-In [Sublime Text](https://www.sublimetext.com), the Language Service supports only in-line templates when installed as a plug-in.
-You need a custom Sublime plug-in \(or modifications to the current plug-in\) for completions in HTML files.
+[Sublime Text](https://www.sublimetext.com)에서 언어 서비스는 플러그인으로 설치된 경우에만 인라인 템플릿을 지원합니다.
+HTML 파일의 완성을 위해서는 사용자 지정 Sublime 플러그인 \(또는 현재 플러그인 수정\)이 필요합니다.
 
-To use the Language Service for in-line templates, you must first add an extension to allow TypeScript, then install the Angular Language Service plug-in.
-Starting with TypeScript 2.3, TypeScript has a plug-in model that the language service can use.
+인라인 템플릿에 대해 언어 서비스를 사용하려면 먼저 TypeScript를 허용하는 확장을 추가한 후 Angular 언어 서비스 플러그인을 설치해야 합니다.
+TypeScript 2.3부터 TypeScript는 언어 서비스에서 사용할 수 있는 플러그인 모델을 가지고 있습니다.
 
-1. Install the latest version of TypeScript in a local `node_modules` directory:
+1. 로컬 `node_modules` 디렉터리에 TypeScript의 최신 버전을 설치합니다:
 
     <docs-code language="shell">
 
@@ -97,7 +97,7 @@ Starting with TypeScript 2.3, TypeScript has a plug-in model that the language s
 
     </docs-code>
 
-1. Install the Angular Language Service package in the same location:
+2. 같은 위치에 Angular 언어 서비스 패키지를 설치합니다:
 
     <docs-code language="shell">
 
@@ -105,7 +105,7 @@ Starting with TypeScript 2.3, TypeScript has a plug-in model that the language s
 
     </docs-code>
 
-1. Once the package is installed,  add the following to the `"compilerOptions"` section of your project's `tsconfig.json`.
+3. 패키지가 설치되면 프로젝트의 `tsconfig.json`의 `"compilerOptions"` 섹션에 다음을 추가합니다.
 
     <docs-code header="tsconfig.json" language="json">
 
@@ -115,44 +115,44 @@ Starting with TypeScript 2.3, TypeScript has a plug-in model that the language s
 
     </docs-code>
 
-1. In your editor's user preferences \(`Cmd+,` or `Ctrl+,`\), add the following:
+4. 편집기의 사용자 기본 설정 \(`Cmd+,` 또는 `Ctrl+,`\)에서 다음을 추가합니다:
 
-    <docs-code header="Sublime Text user preferences" language="json">
+    <docs-code header="Sublime Text 사용자 기본 설정" language="json">
 
     "typescript-tsdk": "<path to your folder>/node_modules/typescript/lib"
 
     </docs-code>
 
-This lets the Angular Language Service provide diagnostics and completions in `.ts` files.
+이렇게 하면 Angular 언어 서비스가 `.ts` 파일에서 진단 및 완성을 제공합니다.
 
 ### Eclipse IDE
 
-Either directly install the "Eclipse IDE for Web and JavaScript developers" package which comes with the Angular Language Server included, or from other Eclipse IDE packages, use Help > Eclipse Marketplace to find and install [Eclipse Wild Web Developer](https://marketplace.eclipse.org/content/wild-web-developer-html-css-javascript-typescript-nodejs-angular-json-yaml-kubernetes-xml).
+"웹 및 자바스크립트 개발자를 위한 Eclipse IDE" 패키지를 직접 설치하거나 다른 Eclipse IDE 패키지에서 도움 > Eclipse Marketplace를 사용하여 [Eclipse Wild Web Developer](https://marketplace.eclipse.org/content/wild-web-developer-html-css-javascript-typescript-nodejs-angular-json-yaml-kubernetes-xml)를 찾아 설치합니다.
 
 ### Neovim
 
-Angular language service can be used with Neovim by using the [nvim-lspconfig](https://github.com/neovim/nvim-lspconfig) plugin.
+Angular 언어 서비스는 [nvim-lspconfig](https://github.com/neovim/nvim-lspconfig) 플러그인을 사용하여 Neovim과 함께 사용할 수 있습니다.
 
-1. [Install nvim-lspconfig](https://github.com/neovim/nvim-lspconfig?tab=readme-ov-file#install)
+1. [nvim-lspconfig 설치하기](https://github.com/neovim/nvim-lspconfig?tab=readme-ov-file#install)
 
-2. [Configure angularls for nvim-lspconfig](https://github.com/neovim/nvim-lspconfig/blob/master/doc/configs.md#angularls)
+2. [nvim-lspconfig에 angularls 구성하기](https://github.com/neovim/nvim-lspconfig/blob/master/doc/configs.md#angularls)
 
-## How the Language Service works
+## 언어 서비스 작동 방식
 
-When you use an editor with a language service, the editor starts a separate language-service process and communicates with it through an [RPC](https://en.wikipedia.org/wiki/Remote_procedure_call), using the [Language Server Protocol](https://microsoft.github.io/language-server-protocol).
-When you type into the editor, the editor sends information to the language-service process to track the state of your project.
+언어 서비스가 있는 편집기를 사용할 때, 편집기는 별도의 언어 서비스 프로세스를 시작하고 [RPC](https://en.wikipedia.org/wiki/Remote_procedure_call)를 통해 [언어 서버 프로토콜](https://microsoft.github.io/language-server-protocol)을 사용하여 통신합니다. 
+편집기에 입력할 때, 편집기는 프로젝트의 상태를 추적하기 위해 언어 서비스 프로세스에 정보를 보냅니다.
 
-When you trigger a completion list within a template, the editor first parses the template into an HTML [abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree).
-The Angular compiler interprets that tree to determine the context: which module the template is part of, the current scope, the component selector, and where your cursor is in the template AST.
-It can then determine the symbols that could potentially be at that position.
+템플릿 내에서 완성 목록을 트리거하면, 편집기는 먼저 템플릿을 HTML [추상 구문 트리 (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree)로 구문 분석합니다. 
+Angular 컴파일러는 해당 트리를 해석하여 컨텍스트를 결정합니다: 템플릿이 어떤 모듈의 일부인지, 현재 범위, 컴포넌트 선택기, 그리고 템플릿 AST에서 커서가 있는 위치를 결정합니다. 
+그런 다음 해당 위치에 있을 수 있는 기호를 결정할 수 있습니다.
 
-It's a little more involved if you are in an interpolation.
-If you have an interpolation of `{{data.---}}` inside a `div` and need the completion list after `data.---`, the compiler can't use the HTML AST to find the answer.
-The HTML AST can only tell the compiler that there is some text with the characters "`{{data.---}}`".
-That's when the template parser produces an expression AST, which resides within the template AST.
-The Angular Language Services then looks at `data.---` within its context, asks the TypeScript Language Service what the members of `data` are, and returns the list of possibilities.
+보간에 있는 경우는 조금 더 복잡합니다.
+`div` 내부에 `{{data.---}}`의 보간이 있고 `data.---` 다음에 완성 목록이 필요하면, 컴파일러는 HTML AST를 사용하여 답변을 찾을 수 없습니다. 
+HTML AST는 컴파일러에게 "`{{data.---}}`"라는 문자가 있는 일부 텍스트가 있다는 것만 알릴 수 있습니다. 
+이때 템플릿 파서는 표현식 AST를 생성하여 템플릿 AST 내에 위치시킵니다. 
+그 후 Angular 언어 서비스는 컨텍스트 내에서 `data.---`를 살펴보고 TypeScript 언어 서비스에 `data`의 구성원이 무엇인지 물어본 후 가능성 목록을 반환합니다.
 
-## More information
+## 추가 정보
 
-* For more in-depth information on the implementation, see the [Angular Language Service source](https://github.com/angular/angular/blob/main/packages/language-service/src)
-* For more on the design considerations and intentions, see [design documentation here](https://github.com/angular/vscode-ng-language-service/wiki/Design)
\ No newline at end of file
+* 구현에 대한 더 심도 있는 정보는 [Angular 언어 서비스 소스](https://github.com/angular/angular/blob/main/packages/language-service/src)를 참조하십시오.
+* 디자인 고려 사항 및 의도에 대한 자세한 내용은 [여기 디자인 문서](https://github.com/angular/vscode-ng-language-service/wiki/Design)를 참조하십시오.
\ No newline at end of file
diff --git a/adev/src/content/tools/libraries/angular-package-format.md b/adev/src/content/tools/libraries/angular-package-format.md
index 82d12825d8fa..c20900e9a25e 100644
--- a/adev/src/content/tools/libraries/angular-package-format.md
+++ b/adev/src/content/tools/libraries/angular-package-format.md
@@ -1,28 +1,28 @@
-# Angular package format
+# Angular 패키지 형식
 
-This document describes the Angular Package Format \(APF\).
-APF is an Angular specific specification for the structure and format of npm packages that is used by all first-party Angular packages \(`@angular/core`, `@angular/material`, etc.\) and most third-party Angular libraries.
+이 문서는 Angular 패키지 형식 \(APF\)에 대해 설명합니다.  
+APF는 모든 1차 Angular 패키지 \(`@angular/core`, `@angular/material` 등\) 및 대부분의 3자 Angular 라이브러리에서 사용되는 npm 패키지의 구조와 형식에 대한 Angular 특정 사양입니다.
 
-APF enables a package to work seamlessly under most common scenarios that use Angular.
-Packages that use APF are compatible with the tooling offered by the Angular team as well as wider JavaScript ecosystem.
-It is recommended that third-party library developers follow the same npm package format.
+APF는 패키지가 Angular를 사용하는 대부분의 일반적인 시나리오에서 원활하게 작동하도록 합니다.  
+APF를 사용하는 패키지는 Angular 팀에서 제공하는 도구 및 더 넓은 JavaScript 생태계와 호환됩니다.  
+3자 라이브러리 개발자는 동일한 npm 패키지 형식을 따르는 것이 권장됩니다.
 
-HELPFUL: APF is versioned along with the rest of Angular, and every major version improves the package format.
-You can find the versions of the specification prior to v13 in this [google doc](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview).
+도움말: APF는 Angular의 나머지와 함께 버전 관리되며, 모든 주요 버전이 패키지 형식을 개선합니다.  
+버전 13 이전의 사양 버전은 이 [google 문서](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview)에서 찾을 수 있습니다.
 
-## Why specify a package format?
+## 패키지 형식을 명시하는 이유는 무엇입니까?
 
-In today's JavaScript landscape, developers consume packages in many different ways, using many different toolchains \(webpack, Rollup, esbuild, etc.\).
-These tools may understand and require different inputs - some tools may be able to process the latest ES language version, while others may benefit from directly consuming an older ES version.
+오늘날 JavaScript 환경에서 개발자는 다양한 방법으로 많은 패키지를 사용하며, 다양한 도구 체인 \(webpack, Rollup, esbuild 등\)을 사용합니다.  
+이 도구들은 서로 다른 입력을 이해하고 요구할 수 있습니다 - 일부 도구는 최신 ES 언어 버전을 처리할 수 있는 반면, 다른 도구는 구식 ES 버전을 직접 소비하는 것으로 이익을 볼 수 있습니다.
 
-The Angular distribution format supports all of the commonly used development tools and workflows, and adds emphasis on optimizations that result either in smaller application payload size or faster development iteration cycle \(build time\).
+Angular 배포 형식은 일반적으로 사용되는 모든 개발 도구 및 워크플로를 지원하며, 애플리케이션 페이로드 크기가 작거나 더 빠른 개발 반복 주기 \(빌드 시간\)로 이어지는 최적화에 중점을 둡니다.
 
-Developers can rely on Angular CLI and [ng-packagr](https://github.com/ng-packagr/ng-packagr) \(a build tool Angular CLI uses\) to produce packages in the Angular package format.
-See the [Creating Libraries](tools/libraries/creating-libraries) guide for more details.
+개발자는 Angular 패키지 형식으로 패키지를 생성하기 위해 Angular CLI 및 [ng-packagr](https://github.com/ng-packagr/ng-packagr) \(Angular CLI가 사용하는 빌드 도구\)를 사용할 수 있습니다.  
+더 많은 세부정보는 [라이브러리 생성](tools/libraries/creating-libraries) 가이드를 참조하십시오.
 
-## File layout
+## 파일 레이아웃
 
-The following example shows a simplified version of the `@angular/core` package's file layout, with an explanation for each file in the package.
+다음 예시는 `@angular/core` 패키지의 파일 레이아웃의 단순화된 버전을 보여주며, 패키지의 각 파일에 대한 설명이 포함되어 있습니다.
 
 ```markdown
 node_modules/@angular/core
@@ -38,31 +38,30 @@ node_modules/@angular/core
     └── index.d.ts
 ```
 
-This table describes the file layout under `node_modules/@angular/core` annotated to describe the purpose of files and directories:
+이 표는 `node_modules/@angular/core` 아래의 파일 레이아웃을 설명하며, 파일 및 디렉토리의 목적을 설명합니다:
 
-| Files                                                                                                                                                     | Purpose |
+| 파일                                                                                                                                                       | 목적 |
 |:---                                                                                                                                                       |:---     |
-| `README.md`                                                                                                                                               | Package README, used by npmjs web UI.                                                                                                                                                                          |
-| `package.json`                                                                                                                                            | Primary `package.json`, describing the package itself as well as all available entrypoints and code formats. This file contains the "exports" mapping used by runtimes and tools to perform module resolution. |
-| `index.d.ts`                                                                                                                                               | Bundled `.d.ts` for the primary entrypoint `@angular/core`.                                                                                                                                                    |
-| `fesm2022/` <br /> &nbsp;&nbsp;─ `core.mjs` <br /> &nbsp;&nbsp;─ `core.mjs.map` <br /> &nbsp;&nbsp;─ `testing.mjs` <br /> &nbsp;&nbsp;─ `testing.mjs.map` | Code for all entrypoints in flattened \(FESM\) ES2022 format, along with source maps.                                                                                                                           |
-| `testing/`                                                                                                                                                | Directory representing the "testing" entrypoint.                                                                                                                                                               |
-| `testing/index.d.ts`                                                                                                                                    | Bundled `.d.ts` for the `@angular/core/testing` entrypoint.                                                                                                                                                     |
+| `README.md`                                                                                                                                               | 패키지 README, npmjs 웹 UI에서 사용됨.                                                                                                                                                                          |
+| `package.json`                                                                                                                                            | 기본 `package.json`, 패키지 자신 및 모든 사용 가능한 진입점 및 코드 형식을 설명합니다. 이 파일에는 런타임 및 도구가 모듈 해상도를 수행하는 데 사용하는 "exports" 매핑이 포함되어 있습니다. |
+| `index.d.ts`                                                                                                                                               | 기본 진입점 `@angular/core`에 대한 번들된 `.d.ts` 파일.                                                                                                                                                    |
+| `fesm2022/` <br /> &nbsp;&nbsp;─ `core.mjs` <br /> &nbsp;&nbsp;─ `core.mjs.map` <br /> &nbsp;&nbsp;─ `testing.mjs` <br /> &nbsp;&nbsp;─ `testing.mjs.map` | 모든 진입점의 코드를 평면화된 \(FESM\) ES2022 형식으로 소스 맵과 함께 제공합니다.                                                                                                                           |
+| `testing/`                                                                                                                                                | "testing" 진입점을 나타내는 디렉토리.                                                                                                                                                               |
+| `testing/index.d.ts`                                                                                                                                    | `@angular/core/testing` 진입점에 대한 번들된 `.d.ts`.                                                                                                                                                     |
 
 ## `package.json`
 
-The primary `package.json` contains important package metadata, including the following:
+기본 `package.json`은 다음을 포함하는 중요한 패키지 메타데이터를 포함합니다:
 
-* It [declares](#esm-declaration) the package to be in EcmaScript Module \(ESM\) format
-* It contains an [`"exports"` field](#exports) which defines the available source code formats of all entrypoints
-* It contains [keys](#legacy-resolution-keys) which define the available source code formats of the primary `@angular/core` entrypoint, for tools which do not understand `"exports"`.
-    These keys are considered deprecated, and could be removed as the support for `"exports"` rolls out across the ecosystem.
+* 패키지가 EcmaScript Module \(ESM\) 형식이라고 [선언합니다](#esm-declaration)
+* 모든 진입점의 사용 가능한 소스 코드 형식을 정의하는 [`"exports"` 필드](#exports)가 포함됩니다.
+* `"exports"`를 이해하지 못하는 도구를 위한 기본 `@angular/core` 진입점의 사용 가능한 소스 코드 형식을 정의하는 [키](#legacy-resolution-keys)가 포함됩니다.  
+  이러한 키는 더 이상 사용되지 않는 것으로 간주되며, `"exports"`에 대한 지원이 생태계 전반에 걸쳐 늘어남에 따라 제거될 수 있습니다.
+* 패키지가 [부작용](#side-effects)을 포함하는지를 선언합니다.
 
-* It declares whether the package contains [side effects](#side-effects)
+### ESM 선언
 
-### ESM declaration
-
-The top-level `package.json` contains the key:
+최상위 `package.json`에는 다음 키가 포함되어 있습니다:
 
 <docs-code language="javascript">
 
@@ -72,11 +71,11 @@ The top-level `package.json` contains the key:
 
 </docs-code>
 
-This informs resolvers that code within the package is using EcmaScript Modules as opposed to CommonJS modules.
+이는 해결자에게 패키지 내 코드가 CommonJS 모듈이 아닌 EcmaScript 모듈을 사용하고 있음을 알립니다.
 
 ### `"exports"`
 
-The `"exports"` field has the following structure:
+`"exports"` 필드는 다음 구조를 가집니다:
 
 <docs-code language="javascript">
 
@@ -99,24 +98,24 @@ The `"exports"` field has the following structure:
 
 </docs-code>
 
-Of primary interest are the `"."` and the `"./testing"` keys, which define the available code formats for the `@angular/core` primary entrypoint and the `@angular/core/testing` secondary entrypoint, respectively.
-For each entrypoint, the available formats are:
+주요 관심사는 `"."` 및 `"./testing"` 키로, 이는 각각 `@angular/core` 기본 진입점과 `@angular/core/testing` 보조 진입점의 사용 가능한 코드 형식을 정의합니다.  
+각 진입점에 대해 사용 가능한 형식은 다음과 같습니다:
 
-| Formats                   | Details |
+| 형식                   | 세부정보 |
 |:---                       |:---     |
-| Typings \(`.d.ts` files\) | `.d.ts` files are used by TypeScript when depending on a given package.                                                                                                           |
-| `default`               | ES2022 code flattened into a single source.
+| 타입 정의 \(`.d.ts` 파일\) | `.d.ts` 파일은 주어진 패키지에 의존할 때 TypeScript에서 사용됩니다.                                                                                                           |
+| `default`               | 단일 소스로 평면화된 ES2022 코드입니다.
 
-Tooling that is aware of these keys may preferentially select a desirable code format from `"exports"`.
+이러한 키를 인식하는 도구는 `"exports"`에서 바람직한 코드 형식을 선택할 수 있습니다.
 
-Libraries may want to expose additional static files which are not captured by the exports of the JavaScript-based entry-points such as Sass mixins or pre-compiled CSS.
+라이브러리는 Sass 믹스인 또는 미리 컴파일된 CSS와 같은 JavaScript 기반 진입점 내에서 캡처되지 않은 추가 정적 파일을 노출하고 싶을 수 있습니다.
 
-For more information, see [Managing assets in a library](tools/libraries/creating-libraries#managing-assets-in-a-library).
+자세한 정보는 [라이브러리에서 자산 관리하기](tools/libraries/creating-libraries#managing-assets-in-a-library)를 참조하십시오.
 
-### Legacy resolution keys
+### 레거시 해상도 키
 
-In addition to `"exports"`, the top-level `package.json` also defines legacy module resolution keys for resolvers that don't support `"exports"`.
-For `@angular/core` these are:
+`"exports"` 외에도 최상위 `package.json`은 `"exports"`를 지원하지 않는 해석기를 위해 레거시 모듈 해상도 키도 정의합니다.  
+`@angular/core`의 경우 이러한 키는 다음과 같습니다:
 
 <docs-code language="javascript">
 
@@ -127,11 +126,11 @@ For `@angular/core` these are:
 
 </docs-code>
 
-As shown in the preceding code snippet, a module resolver can use these keys to load a specific code format.
+앞의 코드 조각에 표시된 대로, 모듈 해석기는 이러한 키를 사용하여 특정 코드 형식을 로드할 수 있습니다.
 
-### Side effects
+### 부작용
 
-The last function of `package.json` is to declare whether the package has [side effects](#sideeffects-flag).
+`package.json`의 마지막 기능은 패키지가 [부작용](#sideeffects-flag)을 가지고 있는지를 선언하는 것입니다.
 
 <docs-code language="javascript">
 
@@ -141,60 +140,61 @@ The last function of `package.json` is to declare whether the package has [side
 
 </docs-code>
 
-Most Angular packages should not depend on top-level side effects, and thus should include this declaration.
+대부분의 Angular 패키지는 최상위 부작용에 의존하지 않아야 하므로 이 선언을 포함해야 합니다.
 
-## Entrypoints and code splitting
+## 진입점 및 코드 분할
 
-Packages in the Angular Package Format contain one primary entrypoint and zero or more secondary entrypoints \(for example, `@angular/common/http`\).
-Entrypoints serve several functions.
+Angular 패키지 형식의 패키지는 하나의 기본 진입점과 0개 이상의 보조 진입점을 포함합니다 \(예: `@angular/common/http`\).  
+진입점은 여러 기능을 수행합니다.
 
-1. They define the module specifiers from which users import code \(for example, `@angular/core` and `@angular/core/testing`\).
+1. 사용자가 코드 \(예: `@angular/core` 및 `@angular/core/testing`\)를 가져오는 모듈 식별자를 정의합니다.
 
-    Users typically perceive these entrypoints as distinct groups of symbols, with different purposes or capability.
+    사용자는 일반적으로 이러한 진입점을 기호의 다양한 목적 또는 기능을 가진 개별 그룹으로 인식합니다.
 
-    Specific entrypoints might only be used for special purposes, such as testing.
-    Such APIs can be separated out from the primary entrypoint to reduce the chance of them being used accidentally or incorrectly.
+    특정 진입점은 테스트와 같은 특별한 목적에만 사용될 수 있습니다.  
+    이러한 API는 기본 진입점에서 분리되어 우연히 또는 잘못 사용될 가능성을 줄입니다.
 
-1. They define the granularity at which code can be lazily loaded.
+2. 코드가 지연 로드될 수 있는 세분성을 정의합니다.
 
-    Many modern build tools are only capable of "code splitting" \(aka lazy loading\) at the ES Module level.
-    The Angular Package Format uses primarily a single "flat" ES Module per entry point. This means that most build tooling is not able to split code with a single entry point into multiple output chunks.
+    많은 현대 빌드 도구는 ES 모듈 레벨에서만 "코드 분할" \(즉, 지연 로드\)을 수행할 수 있습니다.  
+    Angular 패키지 형식은 주로 각 진입점당 하나의 "평면" ES 모듈을 사용합니다. 즉, 대부분의 빌드 도구는 단일 진입점을 사용하여 코드를 여러 출력 청크로 분할할 수 없습니다.
 
-The general rule for APF packages is to use entrypoints for the smallest sets of logically connected code possible.
-For example, the Angular Material package publishes each logical component or set of components as a separate entrypoint - one for Button, one for Tabs, etc.
-This allows each Material component to be lazily loaded separately, if desired.
+APF 패키지에 대한 일반 규칙은 가능한 최소의 논리적으로 연결된 코드 세트를 위해 진입점을 사용하는 것입니다.  
+예를 들어, Angular Material 패키지는 각 논리적 구성 요소 또는 구성 요소 집합을 별도의 진입점으로 게시합니다 - 버튼용 하나, 탭용 하나 등.  
+이렇게 하면 각 Material 구성 요소를 선택적으로 지연 로드할 수 있습니다.
 
-Not all libraries require such granularity.
-Most libraries with a single logical purpose should be published as a single entrypoint.
-`@angular/core` for example uses a single entrypoint for the runtime, because the Angular runtime is generally used as a single entity.
+모든 라이브러리가 이러한 세분성을 요구하는 것은 아닙니다.  
+단일 논리적 목적을 가진 대부분의 라이브러리는 단일 진입점으로 게시해야 합니다.  
+예를 들어 `@angular/core`는 런타임에 대해 단일 진입점을 사용합니다. 이는 Angular 런타임이 일반적으로 단일 엔터티로 사용되기 때문입니다.
 
-### Resolution of secondary entry points
+### 보조 진입점의 해상도
 
-Secondary entrypoints can be resolved via the `"exports"` field of the `package.json` for the package.
+보조 진입점은 패키지의 `package.json`의 `"exports"` 필드를 통해 해석할 수 있습니다.
 
 ## README.md
 
-The README file in the Markdown format that is used to display description of a package on npm and GitHub.
+README 파일은 npm 및 GitHub에서 패키지의 설명을 표시하는 데 사용되는 Markdown 형식입니다.
 
-Example README content of @angular/core package:
+`@angular/core` 패키지의 예시 README 내용:
 
 <docs-code language="html">
 
 Angular
 &equals;&equals;&equals;&equals;&equals;&equals;&equals;
 
-The sources for this package are in the main [Angular](https://github.com/angular/angular) repo.Please file issues and pull requests against that repo.
+이 패키지의 소스는 주요 [Angular](https://github.com/angular/angular) 레포지토리에 있습니다.  
+문제 및 풀 리퀘스트는 해당 레포지토리에 제출해 주세요.
 
-License: MIT
+라이센스: MIT
 
 </docs-code>
 
-## Partial compilation
+## 부분 컴파일
 
-Libraries in the Angular Package Format must be published in "partial compilation" mode.
-This is a compilation mode for `ngc` which produces compiled Angular code that is not tied to a specific Angular runtime version, in contrast to the full compilation used for applications, where the Angular compiler and runtime versions must match exactly.
+Angular 패키지 형식의 라이브러리는 "부분 컴파일" 모드로 게시해야 합니다.  
+이는 특정 Angular 런타임 버전과 연결되지 않는 컴파일된 Angular 코드를 생성하는 `ngc`의 컴파일 모드로, 애플리케이션에 사용되는 전체 컴파일과는 대조됩니다.
 
-To partially compile Angular code, use the `compilationMode` flag in the `angularCompilerOptions` property of your `tsconfig.json`:
+Angular 코드를 부분적으로 컴파일하려면 `tsconfig.json`의 `angularCompilerOptions` 속성에 `compilationMode` 플래그를 사용하십시오:
 
 <docs-code language="javascript">
 
@@ -207,28 +207,28 @@ To partially compile Angular code, use the `compilationMode` flag in the `angula
 
 </docs-code>
 
-Partially compiled library code is then converted to fully compiled code during the application build process by the Angular CLI.
+부분적으로 컴파일된 라이브러리 코드는 Angular CLI에 의해 애플리케이션 빌드 과정에서 완전한 컴파일된 코드로 변환됩니다.
 
-If your build pipeline does not use the Angular CLI then refer to the [Consuming partial ivy code outside the Angular CLI](tools/libraries/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli) guide.
+귀하의 빌드 파이프라인이 Angular CLI를 사용하지 않는 경우, [Angular CLI 외부에서 부분 ivy 코드 소비하기](tools/libraries/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli) 가이드를 참조하십시오.
 
-## Optimizations
+## 최적화
 
-### Flattening of ES modules
+### ES 모듈 평면화
 
-The Angular Package Format specifies that code be published in "flattened" ES module format.
-This significantly reduces the build time of Angular applications as well as download and parse time of the final application bundle.
-Please check out the excellent post ["The cost of small modules"](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules) by Nolan Lawson.
+Angular 패키지 형식은 코드가 "평면화된" ES 모듈 형식으로 게시되도록 지정합니다.  
+이는 Angular 애플리케이션의 빌드 시간뿐만 아니라 최종 애플리케이션 번들의 다운로드 및 구문 분석 시간을 상당히 줄입니다.  
+Nolan Lawson의 훌륭한 포스트 ["The cost of small modules"](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules)를 확인해 주세요.
 
-The Angular compiler can generate index ES module files. Tools like Rollup can use these files to generate flattened modules in a *Flattened ES Module* (FESM) file format.
+Angular 컴파일러는 인덱스 ES 모듈 파일을 생성할 수 있습니다. Rollup와 같은 도구는 이러한 파일을 사용하여 평면화된 모듈을 *Flattened ES Module* \(FESM\) 파일 형식으로 생성할 수 있습니다.
 
-FESM is a file format created by flattening all ES Modules accessible from an entrypoint into a single ES Module.
-It's formed by following all imports from a package and copying that code into a single file while preserving all public ES exports and removing all private imports.
+FESM은 진입점에서 접근 가능한 모든 ES 모듈을 단일 ES 모듈로 평면화하여 생성된 파일 형식입니다.  
+이는 패키지에서 모든 가져오기 경로를 따라 해당 코드를 단일 파일로 복사하면서 모든 공개 ES 내보내기를 보존하고 모든 비공식 가져입을 제거하여 형성됩니다.
 
-The abbreviated name, FESM, pronounced *phe-som*, can be followed by a number such as FESM2020.
-The number refers to the language level of the JavaScript inside the module.
-Accordingly a FESM2022 file would be ESM+ES2022 and include import/export statements and ES2022 source code.
+약어 이름인 FESM, 발음은 *phe-som*,은 FESM2020과 같은 숫자가 뒤따를 수 있습니다.  
+숫자는 모듈 내 JavaScript의 언어 수준을 나타냅니다.  
+따라서 FESM2022 파일은 ESM+ES2022가 되며 가져오기/내보내기 선언 및 ES2022 소스 코드를 포함합니다.
 
-To generate a flattened ES Module index file, use the following configuration options in your tsconfig.json file:
+평면화된 ES 모듈 인덱스 파일을 생성하려면 `tsconfig.json` 파일에서 다음 구성 옵션을 사용하십시오:
 
 <docs-code language="javascript">
 
@@ -248,138 +248,138 @@ To generate a flattened ES Module index file, use the following configuration op
 
 </docs-code>
 
-Once the index file \(for example, `my-ui-lib.js`\) is generated by ngc, bundlers and optimizers like Rollup can be used to produce the flattened ESM file.
+인덱스 파일 \(예: `my-ui-lib.js`\)이 ngc에 의해 생성된 후에는 Rollup과 같은 번들러 및 최적화 도구를 사용하여 평면화된 ESM 파일을 생성할 수 있습니다.
 
-### "sideEffects" flag
+### "sideEffects" 플래그
 
-By default, EcmaScript Modules are side-effectful: importing from a module ensures that any code at the top level of that module should run.
-This is often undesirable, as most side-effectful code in typical modules is not truly side-effectful, but instead only affects specific symbols.
-If those symbols are not imported and used, it's often desirable to remove them in an optimization process known as tree-shaking, and the side-effectful code can prevent this.
+기본적으로, EcmaScript 모듈은 부작용이 있습니다: 모듈에서 가져오면 해당 모듈의 최상위 코드가 실행됩니다.  
+이는 종종 바람직하지 않으며, 일반적인 모듈에서 대부분의 부작용 코드가 실제로 부작용이 아니고 특정 기호에만 영향을 미치기 때문입니다.  
+이러한 기호가 임포트되고 사용되지 않는 경우, 나무 흔들기(tree-shaking)라는 최적화 과정에서 이를 제거하는 것이 바람직하며, 부작용 코드는 이를 방해할 수 있습니다.
 
-Build tools such as webpack support a flag which allows packages to declare that they do not depend on side-effectful code at the top level of their modules, giving the tools more freedom to tree-shake code from the package.
-The end result of these optimizations should be smaller bundle size and better code distribution in bundle chunks after code-splitting.
-This optimization can break your code if it contains non-local side-effects - this is however not common in Angular applications and it's usually a sign of bad design.
-The recommendation is for all packages to claim the side-effect free status by setting the `sideEffects` property to `false`, and that developers follow the [Angular Style Guide](/style-guide) which naturally results in code without non-local side-effects.
+webpack과 같은 빌드 도구는 패키지가 모듈의 최상위에서 부작용 코드에 의존하지 않음을 선언할 수 있는 플래그를 지원하여, 도구가 패키지에서 코드를 나무 흔들 수 있는 더 많은 자유를 줍니다.  
+이러한 최적화의 최종 결과는 코드 분할 후 번들 청크에서 더 작은 번들 크기와 더 나은 코드 분포입니다.  
+이 최적화는 비지역적 부작용이 포함된 코드를 손상시킬 수 있으나 - 이는 Angular 애플리케이션에서 일반적이지 않으며, 보통 나쁜 설계의 징후입니다.  
+모든 패키지가 `sideEffects` 속성을 `false`로 설정하여 부작용 없는 상태를 주장하는 것이 권장되며, 개발자는 자연스럽게 비지역적 부작용이 없는 코드를 생성하는 [Angular 스타일 가이드](/style-guide)를 따라야 합니다.
 
-More info: [webpack docs on side effects](https://github.com/webpack/webpack/tree/master/examples/side-effects)
+자세한 정보: [부작용에 대한 webpack 문서](https://github.com/webpack/webpack/tree/master/examples/side-effects)
 
-### ES2022 language level
+### ES2022 언어 수준
 
-ES2022 Language level is now the default language level that is consumed by Angular CLI and other tooling.
-The Angular CLI down-levels the bundle to a language level that is supported by all targeted browsers at application build time.
+ES2022 언어 수준은 이제 Angular CLI 및 기타 도구에서 소비되는 기본 언어 수준입니다.  
+Angular CLI는 애플리케이션 빌드 시간에 모든 대상 브라우저에서 지원되는 언어 수준으로 번들을 다운 레벨합니다.
 
-### d.ts bundling / type definition flattening
+### d.ts 번들링 / 타입 정의 평면화
 
-As of APF v8, it is recommended to bundle TypeScript definitions.
-Bundling of type definitions can significantly speed up compilations for users, especially if there are many individual `.ts` source files in your library.
+APF v8부터는 TypeScript 정의를 번들링하는 것이 권장됩니다.  
+타입 정의의 번들링은 특히 라이브러리에 많은 개별 `.ts` 소스 파일이 있는 경우 사용자에게 컴파일 속도를 크게 높일 수 있습니다.
 
-Angular uses [`rollup-plugin-dts`](https://github.com/Swatinem/rollup-plugin-dts) to flatten `.d.ts` files (using `rollup`, similar to how FESM files are created).
+Angular는 [`rollup-plugin-dts`](https://github.com/Swatinem/rollup-plugin-dts)를 사용하여 `.d.ts` 파일을 평면화합니다 \(FESM 파일이 생성되는 방식과 유사하게\).
 
-Using rollup for `.d.ts` bundling is beneficial as it supports code splitting between entry-points.
-For example, consider you have multiple entrypoints relying on the same shared type, a shared `.d.ts` file would be created along with the larger flattened `.d.ts` files.
-This is desirable and avoids duplication of types.
+`.d.ts` 번들링을 위해 Rollup을 사용하는 것은 진입점 간 코드 분할을 지원하므로 유리합니다.  
+예를 들어, 여러 진입점이 동일한 공유 타입에 의존하는 경우, 공유 `.d.ts` 파일과 함께 더 큰 평면화된 `.d.ts` 파일이 생성됩니다.  
+이는 바람직하며 유형 중복을 피할 수 있습니다.
 
 ### Tslib
 
-As of APF v10, it is recommended to add tslib as a direct dependency of your primary entry-point.
-This is because the tslib version is tied to the TypeScript version used to compile your library.
+APF v10부터는 기본 진입점의 직접적인 종속성으로 tslib를 추가하는 것이 권장됩니다.  
+이는 tslib 버전이 라이브러리를 컴파일하는 데 사용된 TypeScript 버전과 연결되어 있기 때문입니다.
 
-## Examples
+## 예제
 
 <docs-pill-row>
-  <docs-pill href="https://unpkg.com/browse/@angular/core@17.0.0/" title="@angular/core package"/>
-  <docs-pill href="https://unpkg.com/browse/@angular/material@17.0.0/" title="@angular/material package"/>
+  <docs-pill href="https://unpkg.com/browse/@angular/core@17.0.0/" title="@angular/core 패키지"/>
+  <docs-pill href="https://unpkg.com/browse/@angular/material@17.0.0/" title="@angular/material 패키지"/>
 </docs-pill-row>
 
-## Definition of terms
+## 용어 정의
 
-The following terms are used throughout this document intentionally.
-In this section are the definitions of all of them to provide additional clarity.
+이 문서 전체에서 의도적으로 사용되는 다음 용어들이 있습니다.  
+이 섹션에서는 모두에 대한 정의를 제공하여 추가적인 명확성을 부여합니다.
 
-### Package
+### 패키지
 
-The smallest set of files that are published to NPM and installed together, for example `@angular/core`.
-This package includes a manifest called package.json, compiled source code, typescript definition files, source maps, metadata, etc.
-The package is installed with `npm install @angular/core`.
+NPM에 게시되고 함께 설치되는 가장 작은 파일 세트입니다. 예를 들어 `@angular/core`.  
+이 패키지에는 package.json이라는 매니페스트, 컴파일된 소스 코드, TypeScript 정의 파일, 소스 맵, 메타데이터 등이 포함됩니다.  
+패키지는 `npm install @angular/core`를 사용하여 설치됩니다.
 
-### Symbol
+### 기호
 
-A class, function, constant, or variable contained in a module and optionally made visible to the external world via a module export.
+모듈에 포함된 클래스, 함수, 상수 또는 변수를 의미하며, 모듈 내보내기를 통해 외부 세계에 선택적으로 표시될 수 있습니다.
 
-### Module
+### 모듈
 
-Short for ECMAScript Modules.
-A file containing statements that import and export symbols.
-This is identical to the definition of modules in the ECMAScript spec.
+ECMAScript 모듈의 약자입니다.  
+기호를 가져오고 내보내는 명령어가 포함된 파일입니다.  
+이는 ECMAScript 사양의 모듈 정의와 동일합니다.
 
 ### ESM
 
-Short for ECMAScript Modules \(see above\).
+ECMAScript 모듈의 약자입니다 \(위 참조\).
 
 ### FESM
 
-Short for Flattened ES Modules and consists of a file format created by flattening all ES Modules accessible from an entry point into a single ES Module.
+평면화된 ES 모듈의 약자이며, 진입점에서 접근 가능한 모든 ES 모듈을 단일 ES 모듈로 평면화하여 생성된 파일 형식을 가진 것입니다.
 
-### Module ID
+### 모듈 ID
 
-The identifier of a module used in the import statements \(for example, `@angular/core`\).
-The ID often maps directly to a path on the filesystem, but this is not always the case due to various module resolution strategies.
+가져오기 명령문에서 사용하는 모듈의 식별자입니다 \(예: `@angular/core`\).  
+이 ID는 종종 파일 시스템의 경로와 직접적으로 매핑되지만, 여러 모듈 해상도 전략으로 인해 항상 그런 것은 아닙니다.
 
-### Module specifier
+### 모듈 식별자
 
-A module identifier \(see above\).
+모듈 식별자 \(위 참조\).
 
-### Module resolution strategy
+### 모듈 해상도 전략
 
-Algorithm used to convert Module IDs to paths on the filesystem.
-Node.js has one that is well specified and widely used, TypeScript supports several module resolution strategies, [Closure Compiler](https://developers.google.com/closure/compiler) has yet another strategy.
+모듈 ID를 파일 시스템 경로로 변환하는 데 사용되는 알고리즘입니다.  
+Node.js는 잘 정의되고 널리 사용되는 모듈 해상도 전략을 가지고 있으며, TypeScript는 여러 모듈 해상도 전략을 지원하고, [Closure Compiler](https://developers.google.com/closure/compiler)에는 또 다른 전략이 있습니다.
 
-### Module format
+### 모듈 형식
 
-Specification of the module syntax that covers at minimum the syntax for the importing and exporting from a file.
-Common module formats are CommonJS \(CJS, typically used for Node.js applications\) or ECMAScript Modules \(ESM\).
-The module format indicates only the packaging of the individual modules, but not the JavaScript language features used to make up the module content.
-Because of this, the Angular team often uses the language level specifier as a suffix to the module format, \(for example, ESM+ES2022 specifies that the module is in ESM format and contains ES2022 code\).
+파일에서의 가져오기 및 내보내기를 위한 구문을 최소한으로 포함하는 모듈 구문의 사양입니다.  
+일반적인 모듈 형식은 CommonJS \(CJS, 일반적으로 Node.js 애플리케이션에 사용됨\) 또는 ECMAScript 모듈 \(ESM\)입니다.  
+모듈 형식은 개별 모듈의 패키징만 나타내며 모듈 내용을 구성하는 데 사용되는 JavaScript 언어 기능은 나타내지 않습니다.  
+이 때문에 Angular 팀은 종종 언어 수준 지정자를 모듈 형식의 접미사로 사용합니다 \(예: ESM+ES2022는 모듈이 ESM 형식이며 ES2022 코드를 포함한다고 명시합니다\).
 
-### Bundle
+### 번들
 
-An artifact in the form of a single JS file, produced by a build tool \(for example, [webpack](https://webpack.js.org) or [Rollup](https://rollupjs.org)\) that contains symbols originating in one or more modules.
-Bundles are a browser-specific workaround that reduce network strain that would be caused if browsers were to start downloading hundreds if not tens of thousands of files.
-Node.js typically doesn't use bundles.
-Common bundle formats are UMD and System.register.
+하나 이상의 모듈에서 기원한 기호를 포함하는 단일 JS 파일 형태의 산출물이며, 빌드 도구 \(예: [webpack](https://webpack.js.org) 또는 [Rollup](https://rollupjs.org)\)에 의해 생성됩니다.  
+번들은 수백 개, 수천 개의 파일을 다운로드하기 시작할 경우 브라우저에 의해 발생할 네트워크 부담을 줄이는 브라우저 특정 우회 방법입니다.  
+Node.js는 일반적으로 번들을 사용하지 않습니다.  
+일반적인 번들 형식은 UMD 및 System.register입니다.
 
-### Language level
+### 언어 수준
 
-The language of the code \(ES2022\).
-Independent of the module format.
+코드의 언어 \(ES2022\).  
+모듈 형식과는 무관합니다.
 
-### Entry point
+### 진입점
 
-A module intended to be imported by the user.
-It is referenced by a unique module ID and exports the public API referenced by that module ID.
-An example is `@angular/core` or `@angular/core/testing`.
-Both entry points exist in the `@angular/core` package, but they export different symbols.
-A package can have many entry points.
+사용자가 가져오도록 의도된 모듈입니다.  
+고유한 모듈 ID로 참조되며, 해당 모듈 ID에서 참조되는 공개 API를 내보냅니다.  
+예시는 `@angular/core` 또는 `@angular/core/testing`입니다.  
+두 진입점은 `@angular/core` 패키지에 존재하지만 서로 다른 기호를 내보냅니다.  
+패키지는 여러 진입점을 가질 수 있습니다.
 
-### Deep import
+### 딥 임포트
 
-A process of retrieving symbols from modules that are not Entry Points.
-These module IDs are usually considered to be private APIs that can change over the lifetime of the project or while the bundle for the given package is being created.
+진입점이 아닌 모듈에서 기호를 검색하는 과정을 의미합니다.  
+이러한 모듈 ID는 일반적으로 프로젝트의 생애 주기 동안 변경될 수 있는 비공식 API로 간주됩니다.
 
-### Top-Level import
+### 최상위 임포트
 
-An import coming from an entry point.
-The available top-level imports are what define the public API and are exposed in "@angular/name" modules, such as `@angular/core` or `@angular/common`.
+진입점에서 오는 임포트입니다.  
+사용 가능한 최상위 임포트는 공개 API를 정의하며 "@angular/name" 모듈에서 노출됩니다. 예를 들어 `@angular/core` 또는 `@angular/common`입니다.
 
-### Tree-shaking
+### 나무 흔들기
 
-The process of identifying and removing code not used by an application - also known as dead code elimination.
-This is a global optimization performed at the application level using tools like [Rollup](https://rollupjs.org), [Closure Compiler](https://developers.google.com/closure/compiler), or [Terser](https://github.com/terser/terser).
+응용 프로그램에서 사용되지 않는 코드를 식별하고 제거하는 과정입니다 - 즉, 죽은 코드 제거로도 알려져 있습니다.  
+이는 [Rollup](https://rollupjs.org), [Closure Compiler](https://developers.google.com/closure/compiler), 또는 [Terser](https://github.com/terser/terser)와 같은 도구를 사용하여 수행되는 글로벌 최적화입니다.
 
-### AOT compiler
+### AOT 컴파일러
 
-The Ahead of Time Compiler for Angular.
+Angular의 Ahead of Time 컴파일러입니다.
 
-### Flattened type definitions
+### 평면화된 타입 정의
 
-The bundled TypeScript definitions generated from [API Extractor](https://api-extractor.com).
+[API Extractor](https://api-extractor.com)에서 생성된 번들 타입스크립트 정의입니다.
\ No newline at end of file
diff --git a/adev/src/content/tools/libraries/creating-libraries.md b/adev/src/content/tools/libraries/creating-libraries.md
index ca79a6e8b67f..51e9eade3a37 100644
--- a/adev/src/content/tools/libraries/creating-libraries.md
+++ b/adev/src/content/tools/libraries/creating-libraries.md
@@ -1,13 +1,13 @@
-# Creating libraries
+# 라이브러리 만들기
 
-This page provides a conceptual overview of how to create and publish new libraries to extend Angular functionality.
+이 페이지는 Angular 기능을 확장하기 위해 새 라이브러리를 생성하고 게시하는 방법에 대한 개념적 개요를 제공합니다.
 
-If you find that you need to solve the same problem in more than one application \(or want to share your solution with other developers\), you have a candidate for a library.
-A simple example might be a button that sends users to your company website, that would be included in all applications that your company builds.
+여러 애플리케이션에서 동일한 문제를 해결해야 한다고 느끼거나(또는 다른 개발자와 솔루션을 공유하고 싶다면), 라이브러리의 후보가 될 수 있습니다.
+간단한 예로는 사용자를 회사 웹사이트로 보내는 버튼이 있을 수 있으며, 이는 귀사에서 구축하는 모든 애플리케이션에 포함될 수 있습니다.
 
-## Getting started
+## 시작하기
 
-Use the Angular CLI to generate a new library skeleton in a new workspace with the following commands.
+다음 명령어를 사용하여 새로운 작업공간에 새 라이브러리 골격을 생성하려면 Angular CLI를 사용합니다.
 
 <docs-code language="shell">
 
@@ -17,26 +17,26 @@ ng generate library my-lib
 
 </docs-code>
 
-<docs-callout title="Naming your library">
+<docs-callout title="라이브러리 이름 지정">
 
-You should be very careful when choosing the name of your library if you want to publish it later in a public package registry such as npm.
-See [Publishing your library](tools/libraries/creating-libraries#publishing-your-library).
+공개 패키지 레지스트리(예: npm)에 나중에 배포하려면 라이브러리 이름을 선택할 때 매우 주의해야 합니다.
+[라이브러리 게시하기](tools/libraries/creating-libraries#publishing-your-library)를 참조하십시오.
 
-Avoid using a name that is prefixed with `ng-`, such as `ng-library`.
-The `ng-` prefix is a reserved keyword used from the Angular framework and its libraries.
-The `ngx-` prefix is preferred as a convention used to denote that the library is suitable for use with Angular.
-It is also an excellent indication to consumers of the registry to differentiate between libraries of different JavaScript frameworks.
+`ng-`로 접두사가 붙은 이름(예: `ng-library`)을 사용하지 않도록 하십시오.
+`ng-` 접두사는 Angular 프레임워크와 그 라이브러리에서 사용되는 예약어입니다.
+라이브러리가 Angular와 함께 사용하기에 적합하다는 것을 나타내기 위해 `ngx-` 접두사가 선호됩니다.
+또한, 이는 레지스트리 소비자에게 다른 JavaScript 프레임워크의 라이브러리와 구별할 수 있는 훌륭한 표시입니다.
 
 </docs-callout>
 
-The `ng generate` command creates the `projects/my-lib` folder in your workspace, which contains a component and a service inside an NgModule.
+`ng generate` 명령은 작업 공간 내에 `projects/my-lib` 폴더를 생성합니다. 이 폴더에는 NgModule 내에 구성 요소와 서비스가 포함됩니다.
 
-HELPFUL: For more details on how a library project is structured, refer to the [Library project files](reference/configs/file-structure#library-project-files) section of the [Project File Structure guide](reference/configs/file-structure).
+도움말: 라이브러리 프로젝트의 구조에 대한 자세한 내용은 [라이브러리 프로젝트 파일](reference/configs/file-structure#library-project-files) 섹션의 [프로젝트 파일 구조 가이드](reference/configs/file-structure)를 참조하십시오.
 
-Use the monorepo model to use the same workspace for multiple projects.
-See [Setting up for a multi-project workspace](reference/configs/file-structure#multiple-projects).
+단일 작업 공간에서 여러 프로젝트를 사용하려면 모노레포 모델을 사용하십시오.
+[다중 프로젝트 작업 공간 설정](reference/configs/file-structure#multiple-projects)을 참조하십시오.
 
-When you generate a new library, the workspace configuration file, `angular.json`, is updated with a project of type `library`.
+새로운 라이브러리를 생성하면 작업 공간 구성 파일인 `angular.json`이 `library` 유형의 프로젝트로 업데이트됩니다.
 
 <docs-code language="json">
 
@@ -54,7 +54,7 @@ When you generate a new library, the workspace configuration file, `angular.json
 
 </docs-code>
 
-Build, test, and lint the project with CLI commands:
+CLI 명령으로 프로젝트를 빌드, 테스트 및 린트합니다.
 
 <docs-code language="shell">
 
@@ -64,81 +64,80 @@ ng lint my-lib
 
 </docs-code>
 
-Notice that the configured builder for the project is different from the default builder for application projects.
-This builder, among other things, ensures that the library is always built with the [AOT compiler](tools/cli/aot-compiler).
+프로젝트에 구성된 빌더가 애플리케이션 프로젝트의 기본 빌더와 다르다는 점을 주목하십시오.
+이 빌더는 여러 가지 외에도 라이브러리가 항상 [AOT 컴파일러](tools/cli/aot-compiler)로 빌드되도록 보장합니다.
 
-To make library code reusable you must define a public API for it.
-This "user layer" defines what is available to consumers of your library.
-A user of your library should be able to access public functionality \(such as NgModules, service providers and general utility functions\) through a single import path.
+라이브러리 코드를 재사용 가능하게 만들려면 공개 API를 정의해야 합니다.
+이 "사용자 레이어"는 라이브러리 소비자에게 어떤 기능이 제공되는지를 정의합니다.
+라이브러리 사용자들은 단일 import 경로를 통해 NgModules, 서비스 제공자 및 일반 유틸리티 함수와 같은 공개 기능에 접근할 수 있어야 합니다.
 
-The public API for your library is maintained in the `public-api.ts` file in your library folder.
-Anything exported from this file is made public when your library is imported into an application.
-Use an NgModule to expose services and components.
+라이브러리에 대한 공개 API는 라이브러리 폴더의 `public-api.ts` 파일에 유지됩니다.
+이 파일에서 내보낸 모든 것은 라이브러리가 애플리케이션에 임포트되었을 때 공개됩니다.
+서비스와 구성 요소를 노출하려면 NgModule을 사용하십시오.
 
-Your library should supply documentation \(typically a README file\) for installation and maintenance.
+귀하의 라이브러리는 설치 및 유지 관리를 위한 문서(일반적으로 README 파일)를 제공해야 합니다.
 
-## Refactoring parts of an application into a library
+## 애플리케이션의 일부를 라이브러리로 리팩토링하기
 
-To make your solution reusable, you need to adjust it so that it does not depend on application-specific code.
-Here are some things to consider in migrating application functionality to a library.
+해결책을 재사용 가능하게 만들기 위해 애플리케이션 특정 코드에 의존하지 않도록 조정해야 합니다.
+여기 애플리케이션 기능을 라이브러리로 마이그레이션할 때 고려해야 할 사항이 있습니다.
 
-* Declarations such as components and pipes should be designed as stateless, meaning they don't rely on or alter external variables.
-    If you do rely on state, you need to evaluate every case and decide whether it is application state or state that the library would manage.
+* 구성 요소 및 파이프와 같은 선언은 상태가 없도록 설계되어야 하며, 즉 외부 변수에 의존하거나 이를 변경하지 않아야 합니다.
+    상태에 의존하는 경우, 모든 사례를 평가하고 이것이 애플리케이션 상태인지 라이브러리가 관리할 상태인지 결정해야 합니다.
 
-* Any observables that the components subscribe to internally should be cleaned up and disposed of during the lifecycle of those components
-* Components should expose their interactions through inputs for providing context, and outputs for communicating events to other components
+* 구성 요소가 내부적으로 구독하는 모든 observables는 해당 구성 요소의 생애 주기 동안 정리되고 처리되어야 합니다.
+* 구성 요소는 입력을 통해 컨텍스트를 제공하고 출력으로 다른 구성 요소에 이벤트를 전달하여 상호작용을 노출해야 합니다.
 
-* Check all internal dependencies.
-  * For custom classes or interfaces used in components or service, check whether they depend on additional classes or interfaces that also need to be migrated
-  * Similarly, if your library code depends on a service, that service needs to be migrated
-  * If your library code or its templates depend on other libraries \(such as Angular Material, for instance\), you must configure your library with those dependencies
+* 모든 내부 의존성을 확인하십시오.
+  * 구성 요소나 서비스에서 사용되는 사용자 정의 클래스 또는 인터페이스의 경우 추가 클래스나 인터페이스에 의존하는지 확인하십시오. 이들도 마이그레이션해야 합니다.
+  * 유사하게, 라이브러리 코드가 서비스에 의존하는 경우 해당 서비스도 마이그레이션해야 합니다.
+  * 라이브러리 코드나 템플릿이 다른 라이브러리(예: Angular Material)에 의존하는 경우, 해당 종속성으로 라이브러리를 구성해야 합니다.
 
-* Consider how you provide services to client applications.
+* 클라이언트 애플리케이션에 서비스를 제공하는 방법을 고려하십시오.
 
-  * Services should declare their own providers, rather than declaring providers in the NgModule or a component.
-        Declaring a provider makes that service *tree-shakable*.
-        This practice lets the compiler leave the service out of the bundle if it never gets injected into the application that imports the library.
-        For more about this, see [Tree-shakable providers](guide/di/lightweight-injection-tokens).
+  * 서비스는 NgModule이나 구성 요소에서 제공자를 선언하는 대신 자체 제공자를 선언해야 합니다.
+        제공자를 선언하면 해당 서비스가 *트리 쉐이커블*이 됩니다.
+        이 관행은 컴파일러가 라이브러리를 가져오는 애플리케이션에 주입되지 않는 경우 번들에서 해당 서비스를 제외할 수 있도록 합니다.
+        이에 대한 자세한 내용은 [트리 쉐이커블 제공자](guide/di/lightweight-injection-tokens)를 참조하십시오.
 
-  * If you register global service providers or share providers across multiple NgModules, use the [`forRoot()` and `forChild()` design patterns](guide/ngmodules/singleton-services) provided by the [RouterModule](api/router/RouterModule)
-  * If your library provides optional services that might not be used by all client applications, support proper tree-shaking for that case by using the [lightweight token design pattern](guide/di/lightweight-injection-tokens)
+  * 전역 서비스 제공자를 등록하거나 여러 NgModule 간에 제공자를 공유하는 경우, [RouterModule](api/router/RouterModule)에서 제공하는 [`forRoot()` 및 `forChild()` 디자인 패턴을] (guide/ngmodules/singleton-services) 사용하십시오.
+  * 라이브러리가 모든 클라이언트 애플리케이션에서 사용되지 않을 수도 있는 선택적 서비스를 제공하는 경우, [경량 토큰 디자인 패턴](guide/di/lightweight-injection-tokens)을 사용하여 그 경우에 대한 적절한 트리 쉐이킹을 지원하십시오.
 
-## Integrating with the CLI using code-generation schematics
+## 코드 생성 스키마를 사용하여 CLI와 통합하기
 
-A library typically includes *reusable code* that defines components, services, and other Angular artifacts \(pipes, directives\) that you import into a project.
-A library is packaged into an npm package for publishing and sharing.
-This package can also include schematics that provide instructions for generating or transforming code directly in your project, in the same way that the CLI creates a generic new component with `ng generate component`.
-A schematic that is packaged with a library can, for example, provide the Angular CLI with the information it needs to generate a component that configures and uses a particular feature, or set of features, defined in that library.
-One example of this is [Angular Material's navigation schematic](https://material.angular.io/guide/schematics#navigation-schematic) which configures the CDK's [BreakpointObserver](https://material.angular.io/cdk/layout/overview#breakpointobserver) and uses it with Material's [MatSideNav](https://material.angular.io/components/sidenav/overview) and [MatToolbar](https://material.angular.io/components/toolbar/overview) components.
+라이브러리는 일반적으로 구성 요소, 서비스 및 프로젝트에 가져오는 기타 Angular 유물(파이프, 지시문)을 정의하는 *재사용 가능한 코드*를 포함합니다.
+라이브러리는 게시 및 공유를 위해 npm 패키지로 포장됩니다.
+이 패키지에는 프로젝트 내에서 직접 코드를 생성하거나 변환하는 지침을 제공하는 스키마를 포함할 수 있습니다. 이는 CLI가 `ng generate component`로 일반적인 새 구성 요소를 생성하는 것과 동일합니다.
+라이브러리와 함께 패키지된 스키마는 예를 들어 Angular CLI에 필요한 정보(특정 기능 또는 라이브러리에서 정의된 기능의 집합을 구성하고 사용하는 구성 요소 생성)를 제공할 수 있습니다.
+이의 예로는 CDK의 [BreakpointObserver](https://material.angular.io/cdk/layout/overview#breakpointobserver)를 구성하고 Material의 [MatSideNav](https://material.angular.io/components/sidenav/overview) 및 [MatToolbar](https://material.angular.io/components/toolbar/overview) 구성 요소와 함께 사용하는 [Angular Material의 내비게이션 스키마틱](https://material.angular.io/guide/schematics#navigation-schematic)이 있습니다.
 
-Create and include the following kinds of schematics:
+다음과 같은 종류의 스키마를 생성하고 포함하십시오:
 
-* Include an installation schematic so that `ng add` can add your library to a project
-* Include generation schematics in your library so that `ng generate` can scaffold your defined artifacts \(components, services, tests\) in a project
-* Include an update schematic so that `ng update` can update your library's dependencies and provide migrations for breaking changes in new releases
+* `ng add`가 프로젝트에 라이브러리를 추가할 수 있도록 설치 스키마를 포함하십시오.
+* `ng generate`가 프로젝트에 정의된 아티팩트(구성 요소, 서비스, 테스트)를 생성할 수 있도록 라이브러리에 생성 스키마를 포함하십시오.
+* `ng update`가 라이브러리의 종속성을 업데이트하고 새로운 릴리스의 중단 변경 사항에 대한 마이그레이션을 제공할 수 있도록 업데이트 스키마를 포함하십시오.
 
-What you include in your library depends on your task.
-For example, you could define a schematic to create a dropdown that is pre-populated with canned data to show how to add it to an application.
-If you want a dropdown that would contain different passed-in values each time, your library could define a schematic to create it with a given configuration.
-Developers could then use `ng generate` to configure an instance for their own application.
+라이브러리에 포함할 내용은 귀하의 작업에 따라 달라집니다.
+예를 들어, 애플리케이션에 추가하는 방법을 보여주기 위해 미리 데이터가 채워진 드롭다운을 생성하는 스키마를 정의할 수 있습니다.
+각각 다른 전달 값을 포함하는 드롭다운이 필요할 경우, 라이브러리는 주어진 구성으로 생성하는 스키마를 정의할 수 있습니다.
+그 후 개발자는 자신의 애플리케이션 인스턴스를 구성하기 위해 `ng generate`를 사용할 수 있습니다.
 
-Suppose you want to read a configuration file and then generate a form based on that configuration.
-If that form needs additional customization by the developer who is using your library, it might work best as a schematic.
-However, if the form will always be the same and not need much customization by developers, then you could create a dynamic component that takes the configuration and generates the form.
-In general, the more complex the customization, the more useful the schematic approach.
+구성 파일을 읽은 다음 해당 구성에 따라 양식을 생성하려고 한다고 가정합니다.
+그 양식이 라이브러리를 사용하는 개발자에 의해 추가적인 사용자 정의가 필요하다면, 스키마로 만드는 것이 가장 좋습니다.
+그러나 양식이 항상 동일하고 개발자가 많은 사용자 정의를 필요로 하지 않는다면, 구성과 함께 양식을 생성하는 동적 구성 요소를 만들 수 있습니다.
+일반적으로 사용자 정의가 복잡할수록 스키마 접근 방식이 더 유용합니다.
 
-For more information, see [Schematics Overview](tools/cli/schematics) and [Schematics for Libraries](tools/cli/schematics-for-libraries).
+자세한 내용은 [스키마틱 개요](tools/cli/schematics) 및 [라이브러리를 위한 스키마틱](tools/cli/schematics-for-libraries)을 참조하십시오.
 
-## Publishing your library
+## 라이브러리 게시하기
 
-Use the Angular CLI and the npm package manager to build and publish your library as an npm package.
+Angular CLI와 npm 패키지 관리자를 사용하여 라이브러리를 npm 패키지로 빌드하고 게시합니다.
 
-Angular CLI uses a tool called [ng-packagr](https://github.com/ng-packagr/ng-packagr/blob/master/README.md) to create packages from your compiled code that can be published to npm.
-See [Building libraries with Ivy](tools/libraries/creating-libraries#publishing-libraries) for information on the distribution formats supported by `ng-packagr` and guidance on how
-to choose the right format for your library.
+Angular CLI는 npm에 게시할 수 있는 컴파일된 코드에서 패키지를 생성하는 도구인 [ng-packagr](https://github.com/ng-packagr/ng-packagr/blob/master/README.md)를 사용합니다.
+`ng-packagr`가 지원하는 배포 형식에 대한 정보와 라이브러리에 적합한 형식 선택 방법에 대한 안내는 [아이비를 사용하여 라이브러리 빌드하기](tools/libraries/creating-libraries#publishing-libraries)를 참조하십시오.
 
-You should always build libraries for distribution using the `production` configuration.
-This ensures that generated output uses the appropriate optimizations and the correct package format for npm.
+라이브러리를 배포할 때는 항상 `production` 구성을 사용하여 빌드해야 합니다.
+이렇게 하면 생성된 출력이 적절한 최적화 및 npm에 대한 올바른 패키지 형식을 사용하도록 보장됩니다.
 
 <docs-code language="shell">
 
@@ -148,15 +147,15 @@ npm publish
 
 </docs-code>
 
-## Managing assets in a library
+## 라이브러리에서 자산 관리하기
 
-In your Angular library, the distributable can include additional assets like theming files, Sass mixins, or documentation \(like a changelog\).
-For more information [copy assets into your library as part of the build](https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md) and [embed assets in component styles](https://github.com/ng-packagr/ng-packagr/blob/master/docs/embed-assets-css.md).
+Angular 라이브러리에서는 배포 가능한 파일에 테마 파일, Sass 믹스인 또는 문서(예: 변경 로그)와 같은 추가 자산을 포함할 수 있습니다.
+자세한 내용은 [빌드의 일부로 자산 복사하기](https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md) 및 [구성 요소 스타일에 자산 삽입하기](https://github.com/ng-packagr/ng-packagr/blob/master/docs/embed-assets-css.md)를 참조하십시오.
 
-IMPORTANT: When including additional assets like Sass mixins or pre-compiled CSS.
-You need to add these manually to the conditional ["exports"](tools/libraries/angular-package-format#quotexportsquot) in the `package.json` of the primary entrypoint.
+중요: Sass 믹스인 또는 미리 컴파일된 CSS와 같은 추가 자산을 포함할 때
+이들을 `package.json`의 기본 진입점의 조건부 ["exports"](tools/libraries/angular-package-format#quotexportsquot)에 수동으로 추가해야 합니다.
 
-`ng-packagr` will merge handwritten `"exports"` with the auto-generated ones, allowing for library authors to configure additional export subpaths, or custom conditions.
+`ng-packagr`는 수동으로 작성한 `"exports"`와 자동으로 생성된 `"exports"`를 병합하여 라이브러리 작성자가 추가적인 내보내기 하위 경로 또는 사용자 지정 조건을 구성할 수 있도록 합니다.
 
 <docs-code language="json">
 
@@ -174,22 +173,22 @@ You need to add these manually to the conditional ["exports"](tools/libraries/an
 
 </docs-code>
 
-The above is an extract from the [@angular/material](https://unpkg.com/browse/@angular/material/package.json) distributable.
+위 내용은 [@angular/material](https://unpkg.com/browse/@angular/material/package.json) 배포물에서 발췌한 것입니다.
 
-## Peer dependencies
+## 피어 종속성
 
-Angular libraries should list any `@angular/*` dependencies the library depends on as peer dependencies.
-This ensures that when modules ask for Angular, they all get the exact same module.
-If a library lists `@angular/core` in `dependencies` instead of `peerDependencies`, it might get a different Angular module instead, which would cause your application to break.
+Angular 라이브러리는 라이브러리가 의존하는 모든 `@angular/*` 의존성을 피어 종속성으로 나열해야 합니다.
+이는 모듈이 Angular를 요청할 때 모두 정확히 동일한 모듈을 받도록 보장합니다.
+라이브러리가 `dependencies`에서 `@angular/core`를 나열하면 `peerDependencies` 대신 다른 Angular 모듈이 수신될 수 있으며, 이로 인해 애플리케이션이 실패할 수 있습니다.
 
-## Using your own library in applications
+## 애플리케이션에서 나만의 라이브러리 사용하기
 
-You don't have to publish your library to the npm package manager to use it in the same workspace, but you do have to build it first.
+같은 작업공간에서 사용하는 경우에 라이브러리를 npm 패키지 관리자로 게시할 필요는 없지만, 먼저 빌드해야 합니다.
 
-To use your own library in an application:
+자신의 라이브러리를 애플리케이션에서 사용하려면:
 
-* Build the library.
-    You cannot use a library before it is built.
+* 라이브러리를 빌드합니다.
+    라이브러리는 빌드되기 전에는 사용할 수 없습니다.
 
     <docs-code language="shell">
 
@@ -197,7 +196,7 @@ To use your own library in an application:
 
     </docs-code>
 
-* In your applications, import from the library by name:
+* 애플리케이션에서 이름으로 라이브러리에서 가져옵니다:
 
     <docs-code language="typescript">
 
@@ -205,28 +204,28 @@ To use your own library in an application:
 
     </docs-code>
 
-### Building and rebuilding your library
+### 라이브러리 빌드 및 재빌드하기
 
-The build step is important if you haven't published your library as an npm package and then installed the package back into your application from npm.
-For instance, if you clone your git repository and run `npm install`, your editor shows the `my-lib` imports as missing if you haven't yet built your library.
+빌드 단계는 라이브러리를 npm 패키지로 게시하지 않고, 그러고 나서 npm에서 애플리케이션으로 패키지를 다시 설치한 경우 중요합니다.
+예를 들어, git 리포지토리를 클론하고 `npm install`을 실행하면, 라이브러리를 아직 빌드하지 않았다면 편집기에서 `my-lib` 임포트를 찾지 못하게 표시됩니다.
 
-HELPFUL: When you import something from a library in an Angular application, Angular looks for a mapping between the library name and a location on disk.
-When you install a library package, the mapping is in the `node_modules` folder.
-When you build your own library, it has to find the mapping in your `tsconfig` paths.
+도움말: Angular 애플리케이션에서 라이브러리에서 무언가를 가져오면 Angular는 라이브러리 이름과 디스크의 위치 간의 매핑을 찾습니다.
+라이브러리 패키지를 설치하면 매핑이 `node_modules` 폴더에 있습니다.
+자신의 라이브러리를 빌드하면 `tsconfig` 경로에서 매핑을 찾아야 합니다.
 
-Generating a library with the Angular CLI automatically adds its path to the `tsconfig` file.
-The Angular CLI uses the `tsconfig` paths to tell the build system where to find the library.
+Angular CLI로 라이브러리를 생성하면 자동으로 그 경로가 `tsconfig` 파일에 추가됩니다.
+Angular CLI는 빌드 시스템에 라이브러리를 찾기 위해 `tsconfig` 경로를 사용합니다.
 
-For more information, see [Path mapping overview](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping).
+자세한 내용은 [경로 매핑 개요](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping)를 참조하십시오.
 
-If you find that changes to your library are not reflected in your application, your application is probably using an old build of the library.
+라이브러리에 대한 변경 사항이 애플리케이션에 반영되지 않는 것을 발견하면, 애플리케이션은 아마도 라이브러리의 오래된 빌드를 사용하고 있을 것입니다.
 
-You can rebuild your library whenever you make changes to it, but this extra step takes time.
-*Incremental builds* functionality improves the library-development experience.
-Every time a file is changed a partial build is performed that emits the amended files.
+라이브러리에 변경할 때마다 재빌드할 수 있지만, 이 추가 단계는 시간이 걸립니다.
+*증분 빌드* 기능은 라이브러리 개발 경험을 향상시킵니다.
+파일이 변경될 때마다 부분 빌드가 수행되어 수정된 파일을 생성합니다.
 
-Incremental builds can be run as a background process in your development environment.
-To take advantage of this feature add the `--watch` flag to the build command:
+증분 빌드는 개발 환경에서 백그라운드 프로세스로 실행될 수 있습니다.
+이 기능을 활용하려면 빌드 명령에 `--watch` 플래그를 추가하십시오:
 
 <docs-code language="shell">
 
@@ -234,59 +233,59 @@ ng build my-lib --watch
 
 </docs-code>
 
-IMPORTANT: The CLI `build` command uses a different builder and invokes a different build tool for libraries than it does for applications.
+중요: CLI `build` 명령은 애플리케이션보다 라이브러리에 대해 다른 빌더를 사용하고 다른 빌드 도구를 호출합니다.
 
-* The build system for applications, `@angular-devkit/build-angular`, is based on `webpack`, and is included in all new Angular CLI projects
-* The build system for libraries is based on `ng-packagr`.
-    It is only added to your dependencies when you add a library using `ng generate library my-lib`.
+* 애플리케이션 빌드 시스템인 `@angular-devkit/build-angular`는 `webpack`을 기반으로 하며, 모든 새로운 Angular CLI 프로젝트에 포함되어 있습니다.
+* 라이브러리를 위한 빌드 시스템은 `ng-packagr`을 기반으로 합니다.
+    라이브러리를 `ng generate library my-lib`를 사용하여 추가할 때만 종속성에 추가됩니다.
 
-The two build systems support different things, and even where they support the same things, they do those things differently.
-This means that the TypeScript source can result in different JavaScript code in a built library than it would in a built application.
+두 빌드 시스템은 서로 다른 사항을 지원하며, 동일한 사항을 지원하는 경우에도 그 방식이 다릅니다.
+이는 TypeScript 소스가 빌드된 라이브러리에서 있는 JavaScript 코드와 빌드된 애플리케이션에서 생성된 JavaScript 코드가 다를 수 있음을 의미합니다.
 
-For this reason, an application that depends on a library should only use TypeScript path mappings that point to the *built library*.
-TypeScript path mappings should *not* point to the library source `.ts` files.
+그렇기 때문에 라이브러리에 의존하는 애플리케이션은 *빌드된 라이브러리*를 가리키는 TypeScript 경로 매핑을 사용해야 합니다.
+TypeScript 경로 매핑은 라이브러리 소스 `.ts` 파일을 가리키지 않아야 합니다.
 
-## Publishing libraries
+## 라이브러리 게시하기
 
-There are two distribution formats to use when publishing a library:
+라이브러리를 게시할 때 사용할 수 있는 두 가지 배포 형식이 있습니다:
 
-| Distribution formats        | Details |
-|:---                         |:---     |
-| Partial-Ivy \(recommended\) | Contains portable code that can be consumed by Ivy applications built with any version of Angular from v12 onwards. |
-| Full-Ivy                    | Contains private Angular Ivy instructions, which are not guaranteed to work across different versions of Angular. This format requires that the library and application are built with the *exact* same version of Angular. This format is useful for environments where all library and application code is built directly from source. |
+| 배포 형식                | 상세 내용 |
+|:---                       |:---       |
+| 부분-아이비(권장)       | 모든 버전의 Angular v12 이상으로 빌드된 아이비 애플리케이션에서 소비할 수 있는 휴대 가능한 코드를 포함합니다. |
+| 전체-아이비              | 서로 다른 Angular 버전에서 작동하지 않도록 보장되지 않는 비공식 Angular 아이비 지침을 포함합니다. 이 형식은 라이브러리와 애플리케이션이 *정확히* 동일한 Angular 버전으로 빌드되어야 합니다. 이 형식은 모든 라이브러리와 애플리케이션 코드가 소스에서 직접 빌드되는 환경에서 유용합니다. |
 
-For publishing to npm use the partial-Ivy format as it is stable between patch versions of Angular.
+npm에 게시할 때는 Angular의 패치 버전 간에 안정적이기 때문에 부분-아이비 형식을 사용하십시오.
 
-Avoid compiling libraries with full-Ivy code if you are publishing to npm because the generated Ivy instructions are not part of Angular's public API, and so might change between patch versions.
+npm에 게시할 경우 전체-아이비 코드를 컴파일하는 것은 피하십시오. 생성된 아이비 지침은 Angular의 공개 API에 포함되지 않으므로 패치 버전 간에 변경될 수 있습니다.
 
-## Ensuring library version compatibility
+## 라이브러리 버전 호환성 보장하기
 
-The Angular version used to build an application should always be the same or greater than the Angular versions used to build any of its dependent libraries.
-For example, if you had a library using Angular version 13, the application that depends on that library should use Angular version 13 or later.
-Angular does not support using an earlier version for the application.
+애플리케이션을 빌드하는 데 사용되는 Angular 버전은 항상 해당 라이브러리가 사용하는 Angular 버전과 같거나 커야 합니다.
+예를 들어 Angular 버전 13을 사용하는 라이브러리가 있다면 해당 라이브러리에 의존하는 애플리케이션은 Angular 버전 13 이상을 사용해야 합니다.
+Angular는 애플리케이션에 대해 이전 버전을 사용하는 것을 지원하지 않습니다.
 
-If you intend to publish your library to npm, compile with partial-Ivy code by setting `"compilationMode": "partial"` in `tsconfig.prod.json`.
-This partial format is stable between different versions of Angular, so is safe to publish to npm.
-Code with this format is processed during the application build using the same version of the Angular compiler, ensuring that the application and all of its libraries use a single version of Angular.
+npm에 라이브러리를 게시하려는 경우 `tsconfig.prod.json`에서 `"compilationMode": "partial"`로 설정하여 부분-아이비 코드로 컴파일하십시오.
+이 부분 형식은 Angular의 다양한 버전 간에 안정적이므로 npm에 게시하는 것이 안전합니다.
+이 형식의 코드는 Angular 컴파일러의 동일한 버전을 사용하여 애플리케이션 빌드 중에 처리되어 애플리케이션과 모든 라이브러리가 단일 버전의 Angular를 사용합니다.
 
-Avoid compiling libraries with full-Ivy code if you are publishing to npm because the generated Ivy instructions are not part of Angular's public API, and so might change between patch versions.
+npm에 게시할 경우 전체-아이비 코드를 컴파일하는 것을 피하십시오. 생성된 아이비 지침은 Angular의 공개 API에 포함되지 않으므로 패치 버전 간에 변경될 수 있습니다.
 
-If you've never published a package in npm before, you must create a user account.
-Read more in [Publishing npm Packages](https://docs.npmjs.com/getting-started/publishing-npm-packages).
+npm에서 패키지를 게시한 적이 없다면 사용자 계정을 생성해야 합니다.
+자세한 내용은 [npm 패키지 게시하기](https://docs.npmjs.com/getting-started/publishing-npm-packages)를 참조하십시오.
 
-## Consuming partial-Ivy code outside the Angular CLI
+## Angular CLI 외부에서 부분-아이비 코드 사용하기
 
-An application installs many Angular libraries from npm into its `node_modules` directory.
-However, the code in these libraries cannot be bundled directly along with the built application as it is not fully compiled.
-To finish compilation, use the Angular linker.
+애플리케이션은 `node_modules` 디렉토리에 npm으로부터 다수의 Angular 라이브러리를 설치합니다.
+그러나 이러한 라이브러리의 코드는 전체 컴파일되지 않았기 때문에 빌드된 애플리케이션과 직접 번들화될 수 없습니다.
+컴파일을 마치려면 Angular 링커를 사용하십시오.
 
-For applications that don't use the Angular CLI, the linker is available as a [Babel](https://babeljs.io) plugin.
-The plugin is to be imported from `@angular/compiler-cli/linker/babel`.
+Angular CLI를 사용하지 않는 애플리케이션의 경우 링커는 [바벨](https://babeljs.io) 플러그인으로 사용할 수 있습니다.
+플러그인은 `@angular/compiler-cli/linker/babel`에서 가져와야 합니다.
 
-The Angular linker Babel plugin supports build caching, meaning that libraries only need to be processed by the linker a single time, regardless of other npm operations.
+Angular 링커 바벨 플러그인은 빌드 캐싱을 지원하므로, 라이브러리는 추가 npm 작업에 관계없이 링커에서 단 한번만 처리하면 됩니다.
 
-Example of integrating the plugin into a custom [webpack](https://webpack.js.org) build by registering the linker as a [Babel](https://babeljs.io) plugin using [babel-loader](https://webpack.js.org/loaders/babel-loader/#options).
+플러그인을 사용자 지정 [webpack](https://webpack.js.org) 빌드에 등록하여 통합하는 예입니다. 바벨 플러그인으로 링커를 사용합니다 [바벨 로더](https://webpack.js.org/loaders/babel-loader/#options).
 
 <docs-code header="webpack.config.mjs" path="adev/src/content/examples/angular-linker-plugin/webpack.config.mjs" visibleRegion="webpack-config"/>
 
-HELPFUL: The Angular CLI integrates the linker plugin automatically, so if consumers of your library are using the CLI, they can install Ivy-native libraries from npm without any additional configuration.
+도움말: Angular CLI는 링커 플러그인을 자동으로 통합하므로 라이브러리 소비자가 CLI를 사용하는 경우 추가 구성 없이 npm에서 아이비 네이티브 라이브러리를 설치할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/tools/libraries/overview.md b/adev/src/content/tools/libraries/overview.md
index 68a9016f193a..7850eeeb9cd5 100644
--- a/adev/src/content/tools/libraries/overview.md
+++ b/adev/src/content/tools/libraries/overview.md
@@ -1,34 +1,34 @@
-# Overview of Angular libraries
+# Angular 라이브러리 개요
 
-Many applications need to solve the same general problems, such as presenting a unified user interface, presenting data, and allowing data entry.
-Developers can create general solutions for particular domains that can be adapted for re-use in different applications.
-Such a solution can be built as Angular *libraries* and these libraries can be published and shared as *npm packages*.
+많은 애플리케이션은 통합된 사용자 인터페이스 제공, 데이터 표시 및 데이터 입력 허용과 같은 같은 일반적인 문제를 해결해야 합니다.
+개발자는 특정 도메인에 대한 일반적인 솔루션을 만들어 다양한 애플리케이션에서 재사용할 수 있도록 조정할 수 있습니다.
+이러한 솔루션은 Angular *라이브러리*로 구축할 수 있으며, 이러한 라이브러리는 *npm 패키지*로 게시되고 공유될 수 있습니다.
 
-An Angular library is an Angular project that differs from an application in that it cannot run on its own.
-A library must be imported and used in an application.
+Angular 라이브러리는 애플리케이션과 다른 Angular 프로젝트로, 독립적으로 실행될 수 없습니다.
+라이브러리는 애플리케이션에서 가져와 사용해야 합니다.
 
-Libraries extend Angular's base features.
-For example, to add [reactive forms](guide/forms/reactive-forms) to an application, add the library package using `ng add @angular/forms`, then import the `ReactiveFormsModule` from the `@angular/forms` library in your application code.
-Similarly, adding the [service worker](ecosystem/service-workers) library to an Angular application is one of the steps for turning an application into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps) \(PWA\).
-[Angular Material](https://material.angular.io) is an example of a large, general-purpose library that provides sophisticated, reusable, and adaptable UI components.
+라이브러리는 Angular의 기본 기능을 확장합니다.
+예를 들어, 애플리케이션에 [반응형 양식](guide/forms/reactive-forms)을 추가하려면 `ng add @angular/forms` 명령어를 사용하여 라이브러리 패키지를 추가한 다음, 애플리케이션 코드에서 `@angular/forms` 라이브러리의 `ReactiveFormsModule`을 가져옵니다.
+마찬가지로, Angular 애플리케이션에 [서비스 워커](ecosystem/service-workers) 라이브러리를 추가하는 것은 애플리케이션을 [진보된 웹 애플리케이션](https://developers.google.com/web/progressive-web-apps) (PWA)으로 전환하기 위한 단계 중 하나입니다.
+[Angular Material](https://material.angular.io)은 정교하고 재사용 가능하며 적응 가능한 UI 구성 요소를 제공하는 대규모 일반 목적 라이브러리의 예입니다.
 
-Any application developer can use these and other libraries that have been published as npm packages by the Angular team or by third parties.
-See [Using Published Libraries](tools/libraries/using-libraries).
+모든 애플리케이션 개발자는 Angular 팀 또는 제3자가 npm 패키지로 게시한 이러한 라이브러리 및 기타 라이브러리를 사용할 수 있습니다.
+[게시된 라이브러리 사용하기](tools/libraries/using-libraries)를 참조하세요.
 
-HELPFUL: Libraries are intended to be used by Angular applications. To add Angular features to non-Angular web applications, use [Angular custom elements](guide/elements).
+도움말: 라이브러리는 Angular 애플리케이션에서 사용되도록 설계되었습니다. 비-Angular 웹 애플리케이션에 Angular 기능을 추가하려면 [Angular 사용자 정의 요소](guide/elements)를 사용하세요.
 
-## Creating libraries
+## 라이브러리 생성
 
-If you have developed features that are suitable for reuse, you can create your own libraries.
-These libraries can be used locally in your workspace, or you can publish them as [npm packages](reference/configs/npm-packages) to share with other projects or other Angular developers.
-These packages can be published to the npm registry, a private npm Enterprise registry, or a private package management system that supports npm packages.
-See [Creating Libraries](tools/libraries/creating-libraries).
+재사용에 적합한 기능을 개발했다면, 자체 라이브러리를 생성할 수 있습니다.
+이러한 라이브러리는 작업공간에서 로컬로 사용할 수 있으며, 다른 프로젝트나 다른 Angular 개발자들과 공유하기 위해 [npm 패키지](reference/configs/npm-packages)로 게시할 수 있습니다.
+이러한 패키지는 npm 레지스트리, 개인 npm 엔터프라이즈 레지스트리 또는 npm 패키지를 지원하는 개인 패키지 관리 시스템에 게시될 수 있습니다.
+[라이브러리 생성하기](tools/libraries/creating-libraries)를 참조하세요.
 
-Deciding to package features as a library is an architectural decision. It is comparable to deciding whether a feature is a component or a service, or deciding on the scope of a component.
+기능을 라이브러리로 패키징하기로 결정하는 것은 아키텍처적 결정입니다. 이는 기능이 구성 요소인지 서비스인지를 결정하거나 구성 요소의 범위를 결정하는 것과 비교할 수 있습니다.
 
-Packaging features as a library forces the artifacts in the library to be decoupled from the application's business logic.
-This can help to avoid various bad practices or architecture mistakes that can make it difficult to decouple and reuse code in the future.
+기능을 라이브러리로 패키징하면 라이브러리의 아티팩트가 애플리케이션의 비즈니스 로직과 분리되도록 강요합니다.
+이는 미래에 코드를 분리하고 재사용하기 어렵게 만드는 다양한 나쁜 관행이나 아키텍처 실수를 피하는 데 도움이 될 수 있습니다.
 
-Putting code into a separate library is more complex than simply putting everything in one application.
-It requires more of an investment in time and thought for managing, maintaining, and updating the library.
-This complexity can pay off when the library is being used in multiple applications.
+코드를 별도의 라이브러리에 넣는 것은 모든 것을 하나의 애플리케이션에 넣는 것보다 더 복잡합니다.
+이는 라이브러리를 관리, 유지 및 업데이트하는 데 더 많은 시간과 사유의 투자가 필요합니다.
+이러한 복잡성은 라이브러리가 여러 애플리케이션에서 사용될 때 보상을 받을 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/tools/libraries/using-libraries.md b/adev/src/content/tools/libraries/using-libraries.md
index b82fdad56cd4..fc2a738ea584 100644
--- a/adev/src/content/tools/libraries/using-libraries.md
+++ b/adev/src/content/tools/libraries/using-libraries.md
@@ -1,27 +1,27 @@
-# Usage of Angular libraries published to npm
+# npm에 게시된 Angular 라이브러리 사용법
 
-When you build your Angular application, take advantage of sophisticated first-party libraries, as well as a rich ecosystem of third-party libraries.
-[Angular Material][AngularMaterialMain] is an example of a sophisticated first-party library.
+Angular 애플리케이션을 빌드할 때 정교한 첫 번째 라이브러리와 풍부한 생태계의 타사 라이브러리를 활용하세요. 
+[Angular Material][AngularMaterialMain]은 정교한 첫 번째 라이브러리의 예입니다.
 
-## Install libraries
+## 라이브러리 설치
 
-Libraries are published as [npm packages][GuideNpmPackages], usually together with schematics that integrate them with the Angular CLI.
-To integrate reusable library code into an application, you need to install the package and import the provided functionality in the location you use it.
-For most published Angular libraries, use the `ng add <lib_name>` Angular CLI command.
+라이브러리는 [npm 패키지][GuideNpmPackages]로 게시되며, 일반적으로 Angular CLI와 통합하는 스키마와 함께 제공됩니다.
+재사용 가능한 라이브러리 코드를 애플리케이션에 통합하려면 패키지를 설치하고 사용하려는 위치에서 제공된 기능을 가져와야 합니다.
+게시된 대부분의 Angular 라이브러리에 대해 `ng add <lib_name>` Angular CLI 명령을 사용하세요.
 
-The `ng add` Angular CLI command uses a package manager to install the library package and invokes schematics that are included in the package to other scaffolding within the project code.
-Examples of package managers include [npm][NpmjsMain] or [yarn][YarnpkgMain].
-Additional scaffolding within the project code includes import statements, fonts, and themes.
+`ng add` Angular CLI 명령은 패키지 관리자를 사용하여 라이브러리 패키지를 설치하고, 프로젝트 코드 내의 다른 스캐폴딩을 위해 패키지에 포함된 스키마를 호출합니다.
+패키지 관리자에는 [npm][NpmjsMain] 또는 [yarn][YarnpkgMain]이 포함됩니다.
+프로젝트 코드 내의 추가 스캐폴딩에는 가져오기 문, 글꼴 및 테마가 포함됩니다.
 
-A published library typically provides a `README` file or other documentation on how to add that library to your application.
-For an example, see the [Angular Material][AngularMaterialMain] documentation.
+게시된 라이브러리는 일반적으로 해당 라이브러리를 애플리케이션에 추가하는 방법에 대한 `README` 파일 또는 기타 문서를 제공합니다.
+예를 보려면 [Angular Material][AngularMaterialMain] 문서를 참조하세요.
 
-### Library typings
+### 라이브러리 타입 정의
 
-Typically, library packages include typings in `.d.ts` files; see examples in `node_modules/@angular/material`.
-If the package of your library does not include typings and your IDE complains, you might need to install the `@types/<lib_name>` package with the library.
+일반적으로 라이브러리 패키지는 `.d.ts` 파일에 타입 정의를 포함합니다; 예시는 `node_modules/@angular/material`에서 확인할 수 있습니다.
+라이브러리 패키지에 타입 정의가 포함되어 있지 않고 IDE에서 불만이 제기되는 경우, 라이브러리와 함께 `@types/<lib_name>` 패키지를 설치해야 할 수 있습니다.
 
-For example, suppose you have a library named `d3`:
+예를 들어, `d3`라는 이름의 라이브러리가 있다고 가정해 보겠습니다:
 
 <docs-code language="shell">
 
@@ -30,16 +30,16 @@ npm install @types/d3 --save-dev
 
 </docs-code>
 
-Types defined in a `@types/` package for a library installed into the workspace are automatically added to the TypeScript configuration for the project that uses that library.
-TypeScript looks for types in the `node_modules/@types` directory by default, so you do not have to add each type package individually.
+워크스페이스에 설치된 라이브러리에 대한 `@types/` 패키지에 정의된 타입은 자동으로 해당 라이브러리를 사용하는 프로젝트의 TypeScript 구성에 추가됩니다.
+TypeScript는 기본적으로 `node_modules/@types` 디렉터리에서 타입을 찾기 때문에 각 타입 패키지를 개별적으로 추가할 필요가 없습니다.
 
-If a library does not have typings available at `@types/`, you may use it by manually adding typings for it.
-To do this:
+라이브러리에 대한 `@types/`에서 사용할 수 있는 타입 정의가 없는 경우, 수동으로 타입 정의를 추가하여 사용할 수 있습니다.
+이렇게 하려면:
 
-1. Create a `typings.d.ts` file in your `src/` directory.
-    This file is automatically included as global type definition.
+1. `src/` 디렉터리에 `typings.d.ts` 파일을 만듭니다.
+    이 파일은 자동으로 전역 타입 정의로 포함됩니다.
 
-1. Add the following code in `src/typings.d.ts`:
+1. `src/typings.d.ts`에 다음 코드를 추가합니다:
 
     <docs-code language="typescript">
 
@@ -54,7 +54,7 @@ To do this:
 
     </docs-code>
 
-1. In the component or file that uses the library, add the following code:
+1. 라이브러리를 사용하는 구성 요소 또는 파일에서 다음 코드를 추가합니다:
 
     <docs-code language="typescript">
 
@@ -64,28 +64,28 @@ To do this:
 
     </docs-code>
 
-Define more typings as needed.
+필요에 따라 더 많은 타입 정의를 추가합니다.
 
-## Updating libraries
+## 라이브러리 업데이트
 
-A library is able to be updated by the publisher, and also has individual dependencies which need to be kept current.
-To check for updates to your installed libraries, use the [`ng update`][CliUpdate] Angular CLI command.
+라이브러리는 게시자에 의해 업데이트될 수 있으며, 또한 최신 상태로 유지해야 하는 개별 종속성이 있습니다.
+설치된 라이브러리에 대한 업데이트를 확인하려면 [`ng update`][CliUpdate] Angular CLI 명령을 사용하세요.
 
-Use `ng update <lib_name>` Angular CLI command to update individual library versions.
-The Angular CLI checks the latest published release of the library, and if the latest version is newer than your installed version, downloads it and updates your `package.json` to match the latest version.
+개별 라이브러리 버전을 업데이트하려면 `ng update <lib_name>` Angular CLI 명령을 사용하세요.
+Angular CLI는 라이브러리의 최신 게시 릴리스를 검사하고, 최신 버전이 설치된 버전보다 새로우면 해당 버전을 다운로드하고 `package.json`을 최신 버전으로 업데이트합니다.
 
-When you update Angular to a new version, you need to make sure that any libraries you are using are current.
-If libraries have interdependencies, you might have to update them in a particular order.
-See the [Angular Update Guide][AngularUpdateMain] for help.
+Angular를 새 버전으로 업데이트할 때 사용 중인 라이브러리가 최신 상태인지 확인해야 합니다.
+라이브러리에 상호 의존성이 있는 경우, 특정 순서로 업데이트해야 할 수 있습니다.
+도움이 필요하면 [Angular 업데이트 가이드][AngularUpdateMain]를 참조하세요.
 
-## Adding a library to the runtime global scope
+## 라이브러리를 런타임 전역 범위에 추가하기
 
-If a legacy JavaScript library is not imported into an application, you may add it to the runtime global scope and load it as if it was added in a script tag.
-Configure the Angular CLI to do this at build time using the `scripts` and `styles` options of the build target in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file.
+레거시 JavaScript 라이브러리가 애플리케이션에 가져오지 않았다면, 이를 런타임 전역 범위에 추가하고 스크립트 태그와 같이 로드할 수 있습니다.
+`angular.json`[GuideWorkspaceConfig] 작업 공간 빌드 구성 파일의 빌드 대상의 `scripts` 및 `styles` 옵션을 사용하여 Angular CLI를 구성합니다.
 
-For example, to use the [Bootstrap 4][GetbootstrapDocs40GettingStartedIntroduction] library
+예를 들어, [Bootstrap 4][GetbootstrapDocs40GettingStartedIntroduction] 라이브러리를 사용하려면
 
-1. Install the library and the associated dependencies using the npm package manager:
+1. npm 패키지 관리자를 사용하여 라이브러리와 관련 종속성을 설치합니다:
 
     <docs-code language="shell">
 
@@ -95,7 +95,7 @@ For example, to use the [Bootstrap 4][GetbootstrapDocs40GettingStartedIntroducti
 
     </docs-code>
 
-1. In the `angular.json` configuration file, add the associated script files to the `scripts` array:
+1. `angular.json` 구성 파일에서 관련 스크립트 파일을 `scripts` 배열에 추가합니다:
 
     <docs-code language="json">
 
@@ -107,7 +107,7 @@ For example, to use the [Bootstrap 4][GetbootstrapDocs40GettingStartedIntroducti
 
     </docs-code>
 
-1. Add the `bootstrap.css` CSS file to the `styles` array:
+1. `styles` 배열에 `bootstrap.css` CSS 파일을 추가합니다:
 
     <docs-code language="css">
 
@@ -118,12 +118,12 @@ For example, to use the [Bootstrap 4][GetbootstrapDocs40GettingStartedIntroducti
 
     </docs-code>
 
-1. Run or restart the `ng serve` Angular CLI command to see Bootstrap 4 work in your application.
+1. `ng serve` Angular CLI 명령을 실행하거나 재시작하여 Bootstrap 4가 애플리케이션에서 작동하는지 확인합니다.
 
-### Using runtime-global libraries inside your app
+### 애플리케이션 내에서 런타임 전역 라이브러리 사용하기
 
-After you import a library using the "scripts" array, do **not** import it using an import statement in your TypeScript code.
-The following code snippet is an example import statement.
+"scripts" 배열을 사용하여 라이브러리를 가져온 후, TypeScript 코드에서 가져오기 문을 사용하여 그 라이브러리를 **가져오지 마세요**.
+다음 코드 조각은 가져오기 문 예시입니다.
 
 <docs-code language="typescript">
 
@@ -131,17 +131,17 @@ import * as $ from 'jquery';
 
 </docs-code>
 
-If you import it using import statements, you have two different copies of the library: one imported as a global library, and one imported as a module.
-This is especially bad for libraries with plugins, like JQuery, because each copy includes different plugins.
+가져오기 문을 사용하여 가져오면, 라이브러리에 두 개의 다른 복사본이 생깁니다: 하나는 전역 라이브러리로 가져온 것이고, 다른 하나는 모듈로 가져온 것입니다.
+이것은 특히 JQuery와 같은 플러그인을 가진 라이브러리에서 나쁜데, 각 복사본에는 다른 플러그인이 포함되기 때문입니다.
 
-Instead, run the `npm install @types/jquery` Angular CLI command to download typings for your library and then follow the library installation steps.
-This gives you access to the global variables exposed by that library.
+대신, `npm install @types/jquery` Angular CLI 명령을 실행하여 라이브러리에 대한 타입을 다운로드한 다음 라이브러리 설치 단계를 따르세요.
+이렇게 하면 해당 라이브러리에 의해 노출된 전역 변수에 접근할 수 있습니다.
 
-### Defining typings for runtime-global libraries
+### 런타임 전역 라이브러리에 대한 타입 정의
 
-If the global library you need to use does not have global typings, you can declare them manually as `any` in `src/typings.d.ts`.
+사용해야 하는 전역 라이브러리에 전역 타입 정의가 없는 경우, `src/typings.d.ts`에서 수동으로 `any`로 선언할 수 있습니다.
 
-For example:
+예를 들어:
 
 <docs-code language="typescript">
 
@@ -149,7 +149,7 @@ declare var libraryName: any;
 
 </docs-code>
 
-Some scripts extend other libraries; for instance with JQuery plugins:
+일부 스크립트는 다른 라이브러리를 확장합니다; 예를 들면 JQuery 플러그인과 같은 경우:
 
 <docs-code language="typescript">
 
@@ -157,8 +157,8 @@ $('.test').myPlugin();
 
 </docs-code>
 
-In this case, the installed `@types/jquery` does not include `myPlugin`, so you need to add an interface in `src/typings.d.ts`.
-For example:
+이 경우, 설치된 `@types/jquery`는 `myPlugin`을 포함하지 않으므로, `src/typings.d.ts`에서 인터페이스를 추가해야 합니다.
+예를 들면:
 
 <docs-code language="typescript">
 
@@ -168,7 +168,7 @@ interface JQuery {
 
 </docs-code>
 
-If you do not add the interface for the script-defined extension, your IDE shows an error:
+스크립트 정의 확장에 대한 인터페이스를 추가하지 않으면, IDE에서 오류를 표시합니다:
 
 <docs-code language="text">
 
@@ -192,4 +192,4 @@ If you do not add the interface for the script-defined extension, your IDE shows
 
 [NpmjsMain]: https://www.npmjs.com "npm"
 
-[YarnpkgMain]: https://yarnpkg.com " Yarn"
+[YarnpkgMain]: https://yarnpkg.com " Yarn"
\ No newline at end of file
diff --git a/adev/src/content/tutorials/README.md b/adev/src/content/tutorials/README.md
index 154ed2f0a6d4..824bc5ce59ff 100644
--- a/adev/src/content/tutorials/README.md
+++ b/adev/src/content/tutorials/README.md
@@ -1,101 +1,99 @@
-# Angular embedded docs tutorial
+# Angular 임베디드 문서 자습서
 
-- [Tutorial files](#tutorial-files)
-- [Tutorials directory structure](#tutorials-directory-structure)
-- [Reserved tutorials directories](#reserved-tutorials-directories)
+- [자습서 파일](#자습서-파일)
+- [자습서 디렉토리 구조](#자습서-디렉토리-구조)
+- [예약된 자습서 디렉토리](#예약된-자습서-디렉토리)
 
-## Tutorial files
+## 자습서 파일
 
-The tutorials content consists of the tutorial content, source code and configuration.
+자습서 내용은 자습서 내용, 소스 코드 및 구성으로 구성됩니다.
 
-### Content: `README.md`
+### 내용: `README.md`
 
-The tutorial content must be located in a `README.md` file in the tutorial directory.
+자습서 내용은 자습서 디렉토리에 있는 `README.md` 파일에 위치해야 합니다.
 
-Taking the `learn-angular` tutorial as an example, see: [`src/content/tutorials/learn-angular/intro/README.md`](/src/content/tutorials/learn-angular/intro/README.md)
+`learn-angular` 자습서를 예로 들면: [`src/content/tutorials/learn-angular/intro/README.md`](/src/content/tutorials/learn-angular/intro/README.md)
 
-### Configuration: `config.json`
+### 구성: `config.json`
 
-Each tutorial is defined by a `config.json`, which can have the following options:
+각 자습서는 다음 옵션을 가질 수 있는 `config.json`으로 정의됩니다:
 
-- `title`: defines the tutorial title used in the tutorial nav
-- `nextTutorial`: the path of the next tutorial (only in `intro/` step)
-- `src`: the relative path to an external directory, which defines the tutorial source code used in the embedded editor
-- `answerSrc`: the relative path to an external directory, which defines the tutorial answer used in the embedded editor
-- `openFiles`: an array of files to be open in the editor
-- `type`: the type denotes how the tutorial will be presented and which components are necessary for that tutorial
-  - `cli`: a tutorial with a `cli` type will contain only the content and an interactive terminal with the Angular CLI
-  - `editor`: used for the complete embedded editor, containing the code editor, the preview, an interactive terminal and the console with outputs from the dev server
-  - `local`: disables the embedded editor and shows only the content
-  - `editor-only`: a special config used for the tutorial playground and the homepage playground, which disables the content and shows only the embedded editor
+- `title`: 자습서 탐색에서 사용되는 자습서 제목 정의
+- `nextTutorial`: 다음 자습서의 경로(오직 `intro/` 단계에서만)
+- `src`: 임베디드 에디터에서 사용되는 자습서 소스 코드를 정의하는 외부 디렉토리에 대한 상대 경로
+- `answerSrc`: 임베디드 에디터에서 사용되는 자습서 답변을 정의하는 외부 디렉토리에 대한 상대 경로
+- `openFiles`: 에디터에서 열릴 파일의 배열
+- `type`: 자습서가 어떻게 표시될 것인지와 그 자습서에 필요한 구성 요소를 나타내는 유형
+  - `cli`: `cli` 유형의 자습서는 내용과 Angular CLI가 포함된 대화형 터미널만 포함합니다
+  - `editor`: 코드 에디터, 미리보기, 대화형 터미널 및 개발 서버의 출력이 포함된 콘솔을 포함하는 전체 임베디드 에디터에 사용됩니다
+  - `local`: 임베디드 에디터를 비활성화하고 내용만 표시합니다
+  - `editor-only`: 내용은 비활성화하고 단지 임베디드 에디터만 표시하는 자습서 놀이터 및 홈페이지 놀이터에 사용되는 특별한 구성
 
-### Source code
+### 소스 코드
 
-The tutorial source code includes every file in the tutorial directory, except `README.md` and `config.json`.
+자습서 소스 코드는 `README.md` 및 `config.json`을 제외한 자습서 디렉토리의 모든 파일을 포함합니다.
 
-The tutorial source code has precedence over the [`common`](#common) project file, so if a file exists in both [`common`](#common) and in the tutorial directory, containing the same relative path, the tutorial file will override the [`common`](#common) file.
+자습서 소스 코드는 [`common`](#common) 프로젝트 파일보다 우선합니다. 따라서 같은 상대 경로를 가진 파일이 [`common`](#common)과 자습서 디렉토리에 모두 존재하는 경우, 자습서 파일이 [`common`](#common) 파일을 덮어씌웁니다.
 
-## Tutorials directory structure
+## 자습서 디렉토리 구조
 
-A tutorial is composed of an introduction and steps. Both the intro and each step contains its own content, config and source code.
+자습서는 소개 및 단계로 구성됩니다. 소개 및 각 단계는 각각의 내용, 구성 및 소스 코드를 포함합니다.
 
-Taking the `learn-angular` tutorial as an example:
+`learn-angular` 자습서를 예로 들면:
 
-### Introduction
+### 소개
 
 [`src/content/tutorials/learn-angular/intro`](/src/content/tutorials/learn-angular/intro)
 
-is the introduction of the tutorial, which will live in the `/tutorials/learn-angular` route.
+자습서의 소개로, `/tutorials/learn-angular` 경로에 위치합니다.
 
-### Steps
+### 단계
 
-[`src/content/tutorials/learn-angular/steps`](/src/content/tutorials/learn-angular/steps) is the directory that contains the tutorial steps.
+[`src/content/tutorials/learn-angular/steps`](/src/content/tutorials/learn-angular/steps)는 자습서 단계를 포함하는 디렉토리입니다.
 
-These are some examples from the `learn-angular` tutorial:
+다음은 `learn-angular` 자습서의 몇 가지 예입니다:
 
-- [`learn-angular/steps/1-components-in-angular`](/src/content/tutorials/learn-angular/steps/1-components-in-angular): The route will be `/tutorials/learn-angular/components-in-angular`
-- [`learn-angular/steps/2-updating-the-component-class`](/src/content/tutorials/learn-angular/steps/2-updating-the-component-class): The route will be `/tutorials/learn-angular/updating-the-component-class`
+- [`learn-angular/steps/1-components-in-angular`](/src/content/tutorials/learn-angular/steps/1-components-in-angular): 경로는 `/tutorials/learn-angular/components-in-angular`가 됩니다
+- [`learn-angular/steps/2-updating-the-component-class`](/src/content/tutorials/learn-angular/steps/2-updating-the-component-class): 경로는 `/tutorials/learn-angular/updating-the-component-class`가 됩니다
 
-Each step directory must start with a number followed by a hyphen, then followed by the step pathname.
+각 단계 디렉토리는 하이픈 뒤에 숫자로 시작해야 하며, 그 다음에 단계 경로가 옵니다.
 
-- The number denotes the step, defining which will be the previous and next step within a tutorial.
-- The hyphen is a delimiter :).
-- The pathname taken from the directory name defines the step URL.
+- 숫자는 단계, 즉 자습서 내에서 이전 단계와 다음 단계를 정의합니다.
+- 하이픈은 구분자입니다 :).
+- 디렉토리 이름에서 가져온 경로는 단계 URL을 정의합니다.
 
-## Reserved tutorials directories
+## 예약된 자습서 디렉토리
 
 ### `common`
 
-The common project is a complete Angular project that is reused by all tutorials. It contains all
-dependencies(`package.json`, `package-lock.json`), project configuration(`tsconfig.json`, `angular.json`) and main files to bootstrap the application(`index.html`, `main.ts`, `app.module.ts`).
+공통 프로젝트는 모든 자습서에서 재사용되는 완전한 Angular 프로젝트입니다. 여기에는 모든
+종속성(`package.json`, `package-lock.json`), 프로젝트 구성(`tsconfig.json`, `angular.json`) 및 애플리케이션을 부트스트랩하는 주요 파일(`index.html`, `main.ts`, `app.module.ts`)이 포함됩니다.
 
-A common project is used for a variety of reasons:
+공통 프로젝트는 다양한 이유로 사용됩니다:
 
-- Avoid duplication of files in tutorials.
-- Optimize in-app performance by requesting the common project files and dependencies only once, benefiting from the
-  browser cache on subsequent requests.
-- Require a single `npm install` for all tutorials, therefore reducing the time to interactive with the tutorial
-  when navigating different tutorials and steps.
-- Provide a consistent environment for all tutorials.
-- Allow each tutorial to focus on the specific source code for what's being taught and not on the project setup.
+- 자습서의 파일 중복을 피합니다.
+- 공통 프로젝트 파일 및 종속성을 한 번만 요청하여 앱 성능을 최적화하고, 이후 요청에서 브라우저 캐시의 이점을 누립니다.
+- 모든 자습서에 대해 단일 `npm install`이 필요하므로, 다양한 자습서와 단계 간 탐색 시 자습서와의 대화 시간이 줄어듭니다.
+- 모든 자습서에 대해 일관된 환경을 제공합니다.
+- 각 자습서가 가르치는 내용에 대한 특정 소스 코드에 집중하고 프로젝트 설정에 집중하지 않도록 합니다.
 
-See [`src/content/tutorials/common`](/src/content/tutorials/common)
+[`src/content/tutorials/common`](/src/content/tutorials/common)을 참조하십시오.
 
 ### `playground`
 
-The playground contains the source code for the tutorials playground at `/playground`. It should not contain any content.
+플레이그라운드는 `/playground`에서 자습서 플레이그라운드의 소스 코드를 포함합니다. 내용은 포함하지 않아야 합니다.
 
-See [`src/content/tutorials/playground`](/src/content/tutorials/playground)
+[`src/content/tutorials/playground`](/src/content/tutorials/playground)을 참조하십시오.
 
 ### `homepage`
 
-The homepage contains the source code for the homepage playground. It should not contain any content.
+홈페이지는 홈페이지 플레이그라운드의 소스 코드를 포함합니다. 내용은 포함하지 않아야 합니다.
 
-See [`src/content/tutorials/homepage`](/src/content/tutorials/homepage)
+[`src/content/tutorials/homepage`](/src/content/tutorials/homepage)을 참조하십시오.
 
-## Update dependencies 
+## 종속성 업데이트 
 
-To update the dependencies  of all tutorials you can run the following script
+모든 자습서의 종속성을 업데이트하려면 다음 스크립트를 실행할 수 있습니다.
 
 ```bash 
 rm ./adev/src/content/tutorials/homepage/package-lock.json  ./adev/src/content/tutorials/first-app/common/package-lock.json ./adev/src/content/tutorials/learn-angular/common/package-lock.json ./adev/src/content/tutorials/playground/common/package-lock.json 
@@ -103,5 +101,4 @@ rm ./adev/src/content/tutorials/homepage/package-lock.json  ./adev/src/content/t
 npm i --package-lock-only --prefix ./adev/src/content/tutorials/homepage
 npm i --package-lock-only --prefix ./adev/src/content/tutorials/first-app/common
 npm i --package-lock-only --prefix ./adev/src/content/tutorials/learn-angular/common               
-npm i --package-lock-only --prefix ./adev/src/content/tutorials/playground/common
-```
\ No newline at end of file
+npm i --package-lock-only --prefix ./adev/src/content/tutorials/playground/common
\ No newline at end of file
diff --git a/adev/src/content/tutorials/deferrable-views/intro/README.md b/adev/src/content/tutorials/deferrable-views/intro/README.md
index 87fbf0db1be4..3b58a48e41f4 100644
--- a/adev/src/content/tutorials/deferrable-views/intro/README.md
+++ b/adev/src/content/tutorials/deferrable-views/intro/README.md
@@ -1,11 +1,11 @@
-# Deferrable views tutorial
+# 지연 가능한 뷰 튜토리얼
 
-This interactive tutorial consists of lessons that introduce the Angular deferrable views concepts.
+이 대화형 튜토리얼은 Angular 지연 가능한 뷰 개념을 소개하는 강의로 구성되어 있습니다.
 
-## How to use this tutorial
+## 이 튜토리얼을 사용하는 방법
 
-Each step represents a concept in Angular deferrable views. You can do one, or all of them.
+각 단계는 Angular 지연 가능한 뷰의 개념을 나타냅니다. 하나 또는 모두 수행할 수 있습니다.
 
-If you get stuck, click "Reveal answer" at the top.
+문제가 발생하면 상단의 "정답 보기"를 클릭하세요.
 
-Alright, let's [get started](/tutorials/deferrable-views/1-what-are-deferrable-views).
+좋습니다, [시작해 보겠습니다](/tutorials/deferrable-views/1-what-are-deferrable-views).
\ No newline at end of file
diff --git a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md
index 6a58ecd67882..89f3031ea7a9 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md
+++ b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md
@@ -1,16 +1,15 @@
-# What are deferrable views?
+# 지연 가능한 뷰란 무엇인가요?
 
-A fully rendered Angular page may contain many different components, directives, and pipes. While certain parts of the page should be shown to the user immediately, there may be portions that can wait to display until later.
-Angular's *deferrable views*, using the `@defer` syntax, can help you speed up your application by telling Angular to wait to download the JavaScript for the parts of the page that don't need to be shown right away.
+완전히 렌더링된 Angular 페이지는 다양한 구성 요소, 지시어 및 파이프를 포함할 수 있습니다. 페이지의 특정 부분은 사용자가 즉시 볼 수 있어야 하지만, 나중에 표시될 수 있는 부분도 있을 수 있습니다. Angular의 *지연 가능한 뷰*는 `@defer` 문법을 사용하여 즉시 표시할 필요가 없는 페이지의 부분을 다운로드하는 데 Angular가 기다리도록 지시하여 애플리케이션 속도를 높일 수 있도록 도와줍니다.
 
-In this activity, you'll learn how to use deferrable views to defer load a section of your component template.
+이 활동에서는 지연 가능한 뷰를 사용하여 구성 요소 템플릿의 섹션을 지연 로드하는 방법을 배웁니다.
 
 <hr>
 
 <docs-workflow>
 
-<docs-step title="Add a `@defer` block to a section of a template">
-In your `app.component.ts`, wrap the `article-comments` component with a `@defer` block to defer load it.
+<docs-step title="템플릿의 섹션에 `@defer` 블록 추가">
+`app.component.ts`에서 `article-comments` 구성 요소를 `@defer` 블록으로 래핑하여 지연 로드하도록 설정하세요.
 
 <docs-code language="angular-html">
 @defer {
@@ -18,21 +17,20 @@ In your `app.component.ts`, wrap the `article-comments` component with a `@defer
 }
 </docs-code>
 
-By default, `@defer` loads the `article-comments` component when the browser is idle.
+기본적으로 `@defer`는 브라우저가 유휴 상태일 때 `article-comments` 구성 요소를 로드합니다.
 
-In your browser's developer console, you can see that the `article-comments-component` lazy chunk file is loaded separately (The specific file names may change from run to run):
+브라우저의 개발자 콘솔에서 `article-comments-component` 지연 청크 파일이 별도로 로드되는 것을 볼 수 있습니다(특정 파일 이름은 실행마다 변경될 수 있습니다):
 
 <docs-code language="markdown">
-Initial chunk files | Names                      |  Raw size
-chunk-NNSQHFIE.js   | -                          | 769.00 kB | 
-main.js             | main                       | 229.25 kB | 
+초기 청크 파일  | 이름                       |  원본 크기
+chunk-NNSQHFIE.js | -                         | 769.00 kB | 
+main.js            | main                      | 229.25 kB | 
 
-Lazy chunk files    | Names                      |  Raw size
-chunk-T5UYXUSI.js   | article-comments-component |   1.84 kB |
+지연 청크 파일    | 이름                       |  원본 크기
+chunk-T5UYXUSI.js  | article-comments-component |   1.84 kB |
 </docs-code>
 
 </docs-step>
 </docs-workflow>
 
-
-Great work! You’ve learned the basics of deferrable views.
+훌륭한 작업입니다! 지연 가능한 뷰의 기본을 배웠습니다.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
index d9eb46829ee2..463d4b6d353d 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
+++ b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
@@ -1,106 +1,106 @@
-# @loading, @error and @placeholder blocks
+# @loading, @error 및 @placeholder 블록
 
-Deferrable views let you define content to be shown in different loading states.
+Deferrable views를 사용하면 다양한 로딩 상태에서 보여줄 내용을 정의할 수 있습니다.
 
 <div class="docs-table docs-scroll-track-transparent">
   <table>
     <tr>
       <td><code>@placeholder</code></td>
       <td>
-        By default, defer blocks do not render any content before they are triggered. The <code>@placeholder</code> is an optional block that declares content to show before the deferred content loads. Angular replaces the placeholder with the deferred content after loading completes. While this block is optional, the Angular team recommends always including a placeholder.
+        기본적으로 defer 블록은 트리거되기 전까지 아무 콘텐츠도 렌더링하지 않습니다. <code>@placeholder</code>는 지연된 콘텐츠가 로드되기 전에 보여줄 콘텐츠를 선언하는 선택적 블록입니다. Angular는 로딩이 완료된 후 자리 표시자를 지연된 콘텐츠로 교체합니다. 이 블록은 선택적이지만 Angular 팀에서는 항상 자리 표시자를 포함할 것을 권장합니다.
         <a href="https://angular.dev/guide/defer#triggers" target="_blank">
-          Learn more in the full deferrable views documentation
+          전체 deferable views 문서에서 자세히 알아보기
         </a>
       </td>
     </tr>
     <tr>
       <td><code>@loading</code></td>
       <td>
-        This optional block allows you to declare content to be shown during the loading of any deferred dependencies.
+        이 선택적 블록은 지연된 종속성이 로드되는 동안 보여줄 콘텐츠를 선언할 수 있습니다.
       </td>
     </tr>
     <tr>
       <td><code>@error</code></td>
       <td>
-        This block allows you to declare content which is shown if deferred loading fails.
+        이 블록은 지연 로딩이 실패했을 때 보여줄 콘텐츠를 선언할 수 있습니다.
       </td>
     </tr>
   </table>
 </div>
 
-The contents of all the above sub-blocks are eagerly loaded. Additionally, some features require a `@placeholder` block.
+위의 모든 하위 블록의 내용은 즉시 로드됩니다. 또한 일부 기능은 `@placeholder` 블록이 필요합니다.
 
-In this activity, you'll learn how to use the `@loading`, `@error` and `@placeholder` blocks to manage the states of deferrable views.
+이 활동에서는 `@loading`, `@error` 및 `@placeholder` 블록을 사용하여 deferrable views의 상태를 관리하는 방법을 배울 것입니다.
 
 <hr>
 
 <docs-workflow>
 
 <docs-step title="Add `@placeholder` block">
-In your `app.component.ts`, add a `@placeholder` block to the `@defer` block.
+`app.component.ts`에서 `@defer` 블록에 `@placeholder` 블록을 추가합니다.
 
 <docs-code language="angular-html" highlight="[3,4,5]">
 @defer {
   <article-comments />
 } @placeholder {
-  <p>Placeholder for comments</p>
+  <p>코멘트를 위한 자리 표시자</p>
 }
 </docs-code>
 </docs-step>
 
 <docs-step title="Configure the `@placeholder` block">
-The `@placeholder` block accepts an optional parameter to specify the `minimum` amount of time that this placeholder should be shown. This `minimum` parameter is specified in time increments of milliseconds (ms) or seconds (s). This parameter exists to prevent fast flickering of placeholder content in the case that the deferred dependencies are fetched quickly.
+`@placeholder` 블록은 이 자리 표시자가 보여져야 하는 `minimum` 시간을 지정하는 선택적 매개변수를 허용합니다. 이 `minimum` 매개변수는 밀리초(ms) 또는 초(s) 단위로 지정됩니다. 이 매개변수는 지연된 종속성이 빠르게 가져올 경우 자리 표시자 콘텐츠의 빠른 깜박임을 방지하기 위해 존재합니다.
 
 <docs-code language="angular-html" highlight="[3,4,5]">
 @defer {
   <article-comments />
 } @placeholder (minimum 1s) {
-  <p>Placeholder for comments</p>
+  <p>코멘트를 위한 자리 표시자</p>
 }
 </docs-code>
 </docs-step>
 
 <docs-step title="Add `@loading` block">
-Next add a `@loading` block to the component template.
+다음으로 컴포넌트 템플릿에 `@loading` 블록을 추가합니다.
 
-The `@loading` block accepts two optional parameters:
+`@loading` 블록은 두 개의 선택적 매개변수를 허용합니다:
 
-* `minimum`: the amount of time that this block should be shown
-* `after`: the amount of time to wait after loading begins before showing the loading template
+* `minimum`: 이 블록이 보여져야 하는 시간
+* `after`: 로딩이 시작된 후 로딩 템플릿을 보여주기 전에 기다릴 시간
 
-Both parameters are specified in time increments of milliseconds (ms) or seconds (s).
+두 매개변수는 밀리초(ms) 또는 초(s) 단위로 지정됩니다.
 
-Update `app.component.ts` to include a `@loading` block with a minimum parameter of `1s` as well as an after parameter with the value 500ms  to the @loading block.
+`app.component.ts`를 업데이트하여 `@loading` 블록에 최소 매개변수로 `1s` 및 후 매개변수로 `500ms` 값을 추가합니다.
 
 <docs-code language="angular-html" highlight="[5,6,7]">
 @defer {
   <article-comments />
 } @placeholder (minimum 1s) {
-  <p>Placeholder for comments</p>
+  <p>코멘트를 위한 자리 표시자</p>
 } @loading (minimum 1s; after 500ms) {
-  <p>Loading comments...</p>
+  <p>로딩 중인 코멘트...</p>
 }
 </docs-code>
 
-Note: this example uses two parameters, separated by the ; character.
+참고: 이 예제는 ; 문자로 구분된 두 개의 매개변수를 사용합니다.
 
 </docs-step>
 
 <docs-step title="Add `@error` block">
-Finally, add an `@error` block to the `@defer` block.
+마지막으로 `@defer` 블록에 `@error` 블록을 추가합니다.
 
 <docs-code language="angular-html" highlight="[7,8,9]">
 @defer {
   <article-comments />
 } @placeholder (minimum 1s) {
-  <p>Placeholder for comments</p>
+  <p>코멘트를 위한 자리 표시자</p>
 } @loading (minimum 1s; after 500ms) {
-  <p>Loading comments...</p>
+  <p>로딩 중인 코멘트...</p>
 } @error {
-  <p>Failed to load comments</p>
+  <p>코멘트를 로드하는 데 실패했습니다.</p>
 }
 </docs-code>
 </docs-step>
 </docs-workflow>
 
-Congratulations! At this point, you have a good understanding about deferrable views. Keep up the great work and let's learn about triggers next.
+축하합니다! 현재 여러분은 deferrable views에 대해 잘 이해하고 있습니다. 훌륭한 작업을 계속하고 다음에 트리거에 대해 배워봅시다.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
index 379e00ffa89a..e32271418210 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
+++ b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
@@ -1,106 +1,106 @@
-# Defer triggers
+# 지연 트리거
 
-While the default options for `@defer` offer great options for lazy loading parts of your components it may still be desirable to further customize the deferred loading experience.
+`@defer`의 기본 옵션은 구성 요소의 일부를 지연 로드하는 데 유용하지만, 지연 로드 경험을 더욱 사용자 정의하는 것이 바람직할 수 있습니다.
 
-By default, deferred content loads when the browser is idle. You can, however, customize when this loading occurs by specifying a **trigger**. This lets you pick the loading behavior best suited to your component.
+기본적으로 지연된 콘텐츠는 브라우저가 유휴 상태일 때 로드됩니다. 그러나 **트리거**를 지정하여 이 로드 시점을 사용자 정의할 수 있습니다. 이렇게 하면 구성 요소에 가장 적합한 로드 동작을 선택할 수 있습니다.
 
-Deferrable views offer two types of loading trigger:
+지연 가능한 뷰는 두 가지 유형의 로드 트리거를 제공합니다:
 
 <div class="docs-table docs-scroll-track-transparent">
   <table>
     <tr>
       <td><code>on</code></td>
       <td>
-        A trigger condition using a trigger from the list of built-in triggers.<br/>
-        For example: <code>@defer (on viewport)</code>
+        내장 트리거 목록에서 트리거를 사용하는 트리거 조건입니다.<br/>
+        예: <code>@defer (on viewport)</code>
       </td>
     </tr>
     <tr>
       <td><code>when</code></td>
       <td>
-        A condition as an expression which is evaluated for truthiness. When the expression is truthy, the placeholder is swapped with the lazily loaded content.<br/>
-        For example: <code>@defer (when customizedCondition)</code>
+        진리값을 평가하는 표현식으로서의 조건입니다. 표현식이 참일 때 플레이스홀더는 지연 로드된 콘텐츠로 교체됩니다.<br/>
+        예: <code>@defer (when customizedCondition)</code>
       </td>
     </tr>
   </table>
 </div>
 
-If the `when` condition evaluates to `false`, the `defer` block is not reverted back to the placeholder. The swap is a one-time operation.
+`when` 조건이 `false`로 평가되면 `defer` 블록은 플레이스홀더로 되돌아가지 않습니다. 교체는 일회성 작업입니다.
 
-You can define multiple event triggers at once, these triggers will be evaluated as OR conditions.
+한 번에 여러 이벤트 트리거를 정의할 수 있으며, 이러한 트리거는 OR 조건으로 평가됩니다.
 
-* Ex: `@defer (on viewport; on timer(2s))`
-* Ex: `@defer (on viewport; when customizedCondition)`
+* 예: `@defer (on viewport; on timer(2s))`
+* 예: `@defer (on viewport; when customizedCondition)`
 
-In this activity, you'll learn how to use triggers to specify the condition to load the deferrable views.
+이번 활동에서는 트리거를 사용하여 지연 가능한 뷰를 로드할 조건을 지정하는 방법을 배웁니다.
 
 <hr>
 
 <docs-workflow>
 
-<docs-step title="Add `on hover` trigger">
-In your `app.component.ts`,  add an `on hover` trigger to the `@defer` block.
+<docs-step title="‘on hover’ 트리거 추가">
+`app.component.ts`에서 `@defer` 블록에 `on hover` 트리거를 추가합니다.
 
 <docs-code language="angular-html" hightlight="[1]">
 @defer (on hover) {
   <article-comments />
 } @placeholder (minimum 1s) {
-  <p>Placeholder for comments</p>
+  <p>댓글 플레이스홀더</p>
 } @loading (minimum 1s; after 500ms) {
-  <p>Loading comments...</p>
+  <p>댓글 로딩 중...</p>
 } @error {
-  <p>Failed to load comments</p>
+  <p>댓글 로드 실패</p>
 }
 </docs-code>
 
-Now, the page will not render the comments section until you hover its placeholder.
+이제 페이지는 플레이스홀더에 마우스를 올릴 때까지 댓글 섹션을 렌더링하지 않습니다.
 </docs-step>
 
-<docs-step title="Add a 'Show all comments' button">
-Next, update the template to include a button with the label "Show all comments". Include a template variable called `#showComments` with the button.
+<docs-step title="‘모든 댓글 보기’ 버튼 추가">
+다음으로, "모든 댓글 보기"라는 레이블이 있는 버튼을 포함하도록 템플릿을 업데이트합니다. 버튼과 함께 `#showComments`라는 템플릿 변수를 포함합니다.
 
 <docs-code language="angular-html" hightlight="[1]">
-<button type="button" #showComments>Show all comments</button>
+<button type="button" #showComments>모든 댓글 보기</button>
 
 @defer (on hover) {
   <article-comments />
 } @placeholder (minimum 1s) {
-  <p>Placeholder for comments</p>
+  <p>댓글 플레이스홀더</p>
 } @loading (minimum 1s; after 500ms) {
-  <p>Loading comments...</p>
+  <p>댓글 로딩 중...</p>
 } @error {
-  <p>Failed to load comments</p>
+  <p>댓글 로드 실패</p>
 }
 </docs-code>
 
-Note: for more information on [template variables check the documentation](https://angular.dev/guide/templates/reference-variables#).
+참고: [템플릿 변수에 대한 더 많은 정보는 문서를 확인하세요](https://angular.dev/guide/templates/reference-variables#).
 
 </docs-step>
 
-<docs-step title="Add `on interaction` trigger">
-Update the `@defer` block in the template to use the `on interaction` trigger. Provide the `showComments` template variable as the parameter to `interaction`.
+<docs-step title="‘on interaction’ 트리거 추가">
+템플릿의 `@defer` 블록을 업데이트하여 `on interaction` 트리거를 사용합니다. `interaction`에 대한 매개변수로 `showComments` 템플릿 변수를 제공합니다.
 
 <docs-code language="angular-html" hightlight="[3]">
-<button type="button" #showComments>Show all comments</button>
+<button type="button" #showComments>모든 댓글 보기</button>
 
 @defer (on hover; on interaction(showComments)) {
   <article-comments />
 } @placeholder (minimum 1s) {
-  <p>Placeholder for comments</p>
+  <p>댓글 플레이스홀더</p>
 } @loading (minimum 1s; after 500ms) {
-  <p>Loading comments...</p>
+  <p>댓글 로딩 중...</p>
 } @error {
-  <p>Failed to load comments</p>
+  <p>댓글 로드 실패</p>
 }
 </docs-code>
 
-With these changes, the page will wait for one of the following conditions before rendering the comments section:
-* User hovers the comments section’s placeholder
-* User clicks on the “Show all comments" button
+이러한 변경 사항으로 인해 페이지는 댓글 섹션을 렌더링하기 전에 다음 조건 중 하나를 기다립니다:
+* 사용자가 댓글 섹션의 플레이스홀더에 마우스를 올림
+* 사용자가 "모든 댓글 보기" 버튼을 클릭함
 
-You can reload the page to try out different triggers to render the comments section.
+페이지를 새로 고쳐서 댓글 섹션을 렌더링하기 위한 다양한 트리거를 시도해 볼 수 있습니다.
 </docs-step>
 </docs-workflow>
 
-If you would like to learn more, check out the documentation for [Deferrable View](https://angular.dev/guide/defer).
-Keep learning to unlock more of Angular's great features.
+더 알아보려면 [지연 가능한 뷰](https://angular.dev/guide/defer)에 대한 문서를 확인하세요.
+Angular의 훌륭한 기능을 더 많이 잠금 해제하려면 계속 배우세요.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/intro/README.md b/adev/src/content/tutorials/first-app/intro/README.md
index 5db4d662b078..b89838e98dc5 100644
--- a/adev/src/content/tutorials/first-app/intro/README.md
+++ b/adev/src/content/tutorials/first-app/intro/README.md
@@ -1,80 +1,80 @@
-# Build your first Angular app
+# 첫 번째 Angular 앱 만들기
 
-This tutorial consists of lessons that introduce the Angular concepts you need to know to start coding in Angular.
+이 튜토리얼은 Angular에서 코딩을 시작하는 데 필요한 Angular 개념을 소개하는 수업으로 구성되어 있습니다.
 
-You can do as many or as few as you would like and you can do them in any order.
+원하는 만큼 많이 또는 적게 할 수 있으며, 원하는 순서로 진행할 수 있습니다.
 
-HELPFUL: Prefer video? We also have a full [YouTube course](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7) for this tutorial!
+도움이 되는 정보: 비디오를 선호하시나요? 이 튜토리얼을 위한 전체 [YouTube 과정](https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&si=1q9889ulHp8VZ0e7)도 있습니다!
 
 <docs-video src="https://www.youtube.com/embed/xAT0lHYhHMY?si=cKUW_MGn3MesFT7o"/>
 
-## Before you start
+## 시작하기 전에
 
-For the best experience with this tutorial, review these requirements to make sure you have what you need to be successful.
+이 튜토리얼을 가장 잘 활용하기 위해, 성공적으로 진행하는 데 필요한 요구 사항을 검토하세요.
 
-### Your experience
+### 귀하의 경험
 
-The lessons in this tutorial assume that you have experience with the following:
+이 튜토리얼의 수업은 다음에 대한 경험이 있다고 가정합니다:
 
-1. Created an HTML web page by editing the HTML directly.
-1. Programmed web site content in JavaScript.
-1. Read Cascading Style Sheet (CSS) content and understand how selectors are used.
-1. Used command-line instructions to perform tasks on your computer.
+1. HTML을 직접 편집하여 HTML 웹 페이지를 만든 경험
+1. JavaScript로 웹 사이트 콘텐츠를 프로그래밍한 경험
+1. Cascading Style Sheet (CSS) 콘텐츠를 읽고 선택자가 어떻게 사용되는지 이해한 경험
+1. 명령 줄 지침을 사용하여 컴퓨터에서 작업을 수행한 경험
 
-### Your equipment
+### 귀하의 장비
 
-These lessons can be completed using a local installation of the Angular tools or in our embedded editor. Local Angular development can be completed on Windows, MacOS or Linux based systems.
+이 수업은 Angular 도구의 로컬 설치 또는 내장 편집기를 사용하여 완료할 수 있습니다. 로컬 Angular 개발은 Windows, MacOS 또는 Linux 기반 시스템에서 완료할 수 있습니다.
 
-Note: Look for alerts like this one, which call out steps that may only be for your local editor.
+참고: 로컬 편집자 전용 단계를 강조하는 알림을 살펴보세요.
 
-## Conceptual preview of your first Angular app
+## 첫 번째 Angular 앱에 대한 개념 미리보기
 
-The lessons in this tutorial create an Angular app that lists houses for rent and shows the details of individual houses.
-This app uses features that are common to many Angular apps.
+이 튜토리얼의 수업은 임대할 집 목록과 개별 집의 세부 정보를 표시하는 Angular 앱을 만듭니다.
+이 앱은 많은 Angular 앱에서 공통적으로 사용되는 기능을 활용합니다.
 
 <img alt="Output of homes landing page" src="assets/images/tutorials/first-app/homes-app-landing-page.png">
 
-## Local development environment
+## 로컬 개발 환경
 
-Note: This step is only for your local environment!
+참고: 이 단계는 로컬 환경 전용입니다!
 
-Perform these steps in a command-line tool on the computer you want to use for this tutorial.
+이 튜토리얼을 위해 사용하고자 하는 컴퓨터의 명령 줄 도구에서 다음 단계를 수행하세요.
 
 <docs-workflow>
 
-<docs-step title="Identify the version of `node.js` that Angular requires">
-Angular requires an active LTS or maintenance LTS version of Node. Let's confirm your version of `node.js`. For information about specific version requirements, see the engines property in the [package.json file](https://unpkg.com/browse/@angular/core@15.1.5/package.json).
+<docs-step title="Angular에 필요한 `node.js` 버전 확인">
+Angular는 활성 LTS 또는 유지 관리 LTS 버전의 Node가 필요합니다. `node.js` 버전을 확인해 봅시다. 특정 버전 요구 사항에 대한 정보는 [package.json 파일](https://unpkg.com/browse/@angular/core@15.1.5/package.json)의 engines 속성을 참조하세요.
 
-From a **Terminal** window:
+**터미널** 창에서:
 
-1. Run the following command: `node --version`
-1. Confirm that the version number displayed meets the requirements.
+1. 다음 명령을 실행하세요: `node --version`
+1. 표시된 버전 번호가 요구 사항을 충족하는지 확인하세요.
 </docs-step>
 
-<docs-step title="Install the correct version of `node.js` for Angular">
-If you do not have a version of `node.js` installed, please follow the [directions for installation on nodejs.org](https://nodejs.org/en/download/)
+<docs-step title="Angular에 맞는 올바른 `node.js` 버전 설치">
+`node.js` 버전이 설치되어 있지 않은 경우, [nodejs.org에서 설치 지침을 따르세요](https://nodejs.org/en/download/)
 </docs-step>
 
-<docs-step title="Install the latest version of Angular">
-With `node.js` and `npm` installed, the next step is to install the [Angular CLI](tools/cli) which provides tooling for effective Angular development.
+<docs-step title="최신 버전의 Angular 설치">
+`node.js`와 `npm`이 설치된 후, 다음 단계는 효과적인 Angular 개발을 위한 도구를 제공하는 [Angular CLI](tools/cli)를 설치하는 것입니다.
 
-From a **Terminal** window run the following command: `npm install -g @angular/cli`.
+**터미널** 창에서 다음 명령을 실행하세요: `npm install -g @angular/cli`.
 </docs-step>
 
-<docs-step title="Install integrated development environment (IDE)">
-You are free to use any tool you prefer to build apps with Angular. We recommend the following:
+<docs-step title="통합 개발 환경(IDE) 설치">
+Angular로 앱을 제작하기 위해 원하는 도구를 자유롭게 사용할 수 있습니다. 다음을 추천합니다:
 
 1. [Visual Studio Code](https://code.visualstudio.com/)
-2. As an optional, but recommended step you can further improve your developer experience by installing the [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
+2. 선택 사항이지만 권장되는 단계로, [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)를 설치하여 개발자 경험을 더욱 향상시킬 수 있습니다.
 3. [WebStorm](https://www.jetbrains.com/webstorm/)
 </docs-step>
 
 </docs-workflow>
 
-For more information about the topics covered in this lesson, visit:
+이 수업에서 다룰 주제에 대한 자세한 내용을 원하시면 방문하세요:
 
 <docs-pill-row>
-  <docs-pill href="/overview" title="What is Angular"/>
-  <docs-pill href="/tools/cli/setup-local" title="Setting up the local environment and workspace"/>
-  <docs-pill href="/cli" title="Angular CLI Reference"/>
-</docs-pill-row>
+  <docs-pill href="/overview" title="Angular란 무엇인가"/>
+  <docs-pill href="/tools/cli/setup-local" title="로컬 환경 및 작업 공간 설정"/>
+  <docs-pill href="/cli" title="Angular CLI 참조"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/01-hello-world/README.md b/adev/src/content/tutorials/first-app/steps/01-hello-world/README.md
index 462a6185ab07..6681045e9a6f 100644
--- a/adev/src/content/tutorials/first-app/steps/01-hello-world/README.md
+++ b/adev/src/content/tutorials/first-app/steps/01-hello-world/README.md
@@ -1,120 +1,120 @@
-# Hello world
+# 헬로 월드
 
-This first lesson serves as the starting point from which each lesson in this tutorial adds new features to build a complete Angular app. In this lesson, we'll update the application to display the famous text, "Hello World".
+이 첫 번째 수업은 이 튜토리얼의 각 수업이 완전한 Angular 앱을 구축하기 위해 새로운 기능을 추가하는 출발점 역할을 합니다. 이 수업에서는 유명한 텍스트인 "Hello World"를 표시하도록 애플리케이션을 업데이트합니다.
 
 <docs-video src="https://www.youtube.com/embed/UnOwDuliqZA?si=uML-cDRbrxmYdD_9"/>
 
-## What you'll learn
+## 당신이 배울 것
 
-The updated app you have after this lesson confirms that you and your IDE are ready to begin creating an Angular app.
+이 수업 이후에 여러분이 가지게 될 업데이트된 앱은 여러분과 여러분의 IDE가 Angular 앱을 생성할 준비가 되었음을 확인합니다.
 
-Note: If you are working with the embedded editor, skip to [step three](#create-%60hello-world%60).
-When working in the browser playground, you do not need to `ng serve` to run the app. Other commands like `ng generate` can be done in the console window to your right.
+참고: 임베디드 편집기를 사용하고 있다면 [3단계](#create-%60hello-world%60)로 건너뛰세요.
+브라우저 플레이그라운드에서 작업할 때는 앱을 실행하기 위해 `ng serve`를 실행할 필요가 없습니다. `ng generate`와 같은 다른 명령은 오른쪽의 콘솔 창에서 수행할 수 있습니다.
 
 <docs-workflow>
 
-<docs-step title="Download the default app">
-Start by clicking the "Download" icon in the top right pan of the code editor. This will download a `.zip` file containing the source code for this tutorial. Open this in your local Terminal and IDE then move on to testing the default app.
+<docs-step title="기본 앱 다운로드">
+코드 편집기 오른쪽 상단의 "다운로드" 아이콘을 클릭하여 시작하세요. 이렇게 하면 이 튜토리얼의 소스 코드가 포함된 `.zip` 파일이 다운로드됩니다. 이 파일을 로컬 터미널과 IDE에서 열고 기본 앱 테스트로 진행합니다.
 
-At any step in the tutorial, you can click this icon to download the step's source code and start from there.
+튜토리얼의 어떤 단계에서도 이 아이콘을 클릭하여 단계의 소스 코드를 다운로드하고 거기에서 시작할 수 있습니다.
 </docs-step>
 
-<docs-step title="Test the default app">
-In this step, after you download the default starting app, you build the default Angular app.
-This confirms that your development environment has what you need to continue the tutorial.
+<docs-step title="기본 앱 테스트">
+이 단계에서는 기본 시작 앱을 다운로드 한 후 기본 Angular 앱을 구축합니다.
+이것은 여러분의 개발 환경이 튜토리얼을 계속하기 위해 필요한 것들을 갖추었다는 것을 확인합니다.
 
-In the **Terminal** pane of your IDE:
+여러분의 IDE의 **터미널** 창에서:
 
-1. In your project directory, navigate to the `first-app` directory.
-1. Run this command to install the dependencies needed to run the app.
+1. 프로젝트 디렉터리에서 `first-app` 디렉터리로 이동합니다.
+1. 앱을 실행하는 데 필요한 종속성을 설치하기 위해 이 명령을 실행합니다.
 
     <docs-code language="shell">
     npm install
     </docs-code>
 
-1. Run this command to build and serve the default app.
+1. 기본 앱을 구축하고 제공하기 위해 이 명령을 실행합니다.
 
     <docs-code language="shell">
     ng serve
     </docs-code>
 
-    The app should build without errors.
+    앱은 오류 없이 빌드되어야 합니다.
 
-1. In a web browser on your development computer, open `http://localhost:4200`.
-1. Confirm that the default web site appears in the browser.
-1. You can leave `ng serve` running as you complete the next steps.
+1. 개발 컴퓨터의 웹 브라우저에서 `http://localhost:4200`을 엽니다.
+1. 브라우저에 기본 웹사이트가 표시되는지 확인합니다.
+1. 다음 단계를 완료하는 동안 `ng serve`를 계속 실행 상태로 둘 수 있습니다.
 </docs-step>
 
-<docs-step title="Review the files in the project">
-In this step, you get to know the files that make up a default Angular app.
-
-In the **Explorer** pane of your IDE:
-
-1. In your project directory, navigate to the `first-app` directory.
-1. Open the `src` directory to see these files.
-    1. In the file explorer, find the Angular app files (`/src`).
-        1. `index.html` is the app's top level HTML template.
-        1. `styles.css` is the app's top level style sheet.
-        1. `main.ts` is where the app starts running.
-        1. `favicon.ico` is the app's icon, just as you would find in any web site.
-    1. In the file explorer, find the Angular app's component files (`/app`).
-        1. `app.component.ts` is the source file that describes the `app-root` component.
-            This is the top-level Angular component in the app. A component is the basic building block of an Angular application.
-            The component description includes the component's code, HTML template, and styles, which can be described in this file, or in separate files.
-
-            In this app, the styles are in a separate file while the component's code and HTML template are in this file.
-        1. `app.component.css` is the style sheet for this component.
-        1. New components are added to this directory.
-    1. In the file explorer, find the image directory (`/assets`) that contains images used by the app.
-    1. In the file explorer, find the files and directories that an Angular app needs to build and run, but they are not files that you normally interact with.
-        1. `.angular` has files required to build the Angular app.
-        1. `.e2e` has files used to test the app.
-        1. `.node_modules` has the node.js packages that the app uses.
-        1. `angular.json` describes the Angular app to the app building tools.
-        1. `package.json` is used by `npm` (the node package manager) to run the finished app.
-        1. `tsconfig.*` are the files that describe the app's configuration to the TypeScript compiler.
-
-After you have reviewed the files that make up an Angular app project, continue to the next step.
+<docs-step title="프로젝트의 파일 검토">
+이 단계에서는 기본 Angular 앱을 구성하는 파일을 알아봅니다.
+
+여러분의 IDE의 **탐색기** 창에서:
+
+1. 프로젝트 디렉터리에서 `first-app` 디렉터리로 이동합니다.
+1. 이러한 파일을 보려면 `src` 디렉터리를 엽니다.
+    1. 파일 탐색기에서 Angular 앱 파일(`/src`)을 찾습니다.
+        1. `index.html`은 앱의 최상위 HTML 템플릿입니다.
+        1. `styles.css`는 앱의 최상위 스타일 시트입니다.
+        1. `main.ts`는 앱이 실행되는 곳입니다.
+        1. `favicon.ico`는 웹사이트에서 볼 수 있는 앱의 아이콘입니다.
+    1. 파일 탐색기에서 Angular 앱의 컴포넌트 파일(`/app`)을 찾습니다.
+        1. `app.component.ts`는 `app-root` 컴포넌트를 설명하는 소스 파일입니다.
+            이는 앱의 최상위 Angular 컴포넌트입니다. 컴포넌트는 Angular 애플리케이션의 기본 구성 요소입니다.
+            컴포넌트 설명에는 컴포넌트의 코드, HTML 템플릿, 스타일이 포함되며, 이는 이 파일 또는 별도의 파일에 설명될 수 있습니다.
+
+            이 앱에서는 스타일이 별도의 파일에 있으며, 컴포넌트의 코드와 HTML 템플릿은 이 파일에 있습니다.
+        1. `app.component.css`는 이 컴포넌트의 스타일 시트입니다.
+        1. 새로운 컴포넌트는 이 디렉터리에 추가됩니다.
+    1. 파일 탐색기에서 앱에서 사용하는 이미지가 포함된 이미지 디렉터리(`/assets`)를 찾습니다.
+    1. 파일 탐색기에서 Angular 앱이 빌드되고 실행되는 데 필요한 파일과 디렉터리를 찾지만, 일반적으로 상호작용하지 않는 파일입니다.
+        1. `.angular`는 Angular 앱을 빌드하는 데 필요한 파일을 포함하고 있습니다.
+        1. `.e2e`는 앱 테스트에 사용되는 파일을 포함하고 있습니다.
+        1. `.node_modules`는 앱에서 사용하는 node.js 패키지를 포함하고 있습니다.
+        1. `angular.json`은 앱 빌드 도구에 Angular 앱을 설명합니다.
+        1. `package.json`은 완료된 앱을 실행하기 위해 `npm`(node 패키지 관리자)에서 사용됩니다.
+        1. `tsconfig.*`는 TypeScript 컴파일러에게 앱의 구성을 설명하는 파일입니다.
+
+Angular 앱 프로젝트를 구성하는 파일을 검토한 후, 다음 단계로 진행하세요.
 </docs-step>
 
-<docs-step title="Create `Hello World`">
-In this step, you update the Angular project files to change the displayed content.
+<docs-step title="`Hello World` 만들기">
+이 단계에서는 표시할 내용을 변경하기 위해 Angular 프로젝트 파일을 업데이트합니다.
 
-In your IDE:
+여러분의 IDE에서:
 
-1. Open `first-app/src/index.html`.
-    Note: This step and the next are only for your local environment!
+1. `first-app/src/index.html`을 엽니다.
+    참고: 이 단계와 다음 단계는 여러분의 로컬 환경에만 해당됩니다!
 
-1. In `index.html`, replace the `<title>` element with this code to update the title of the app.
+1. `index.html`에서 `<title>` 요소를 아래 코드로 바꿉니다.
 
-    <docs-code header="Replace in src/index.html" path="adev/src/content/tutorials/first-app/steps/02-HomeComponent/src/index.html" visibleLines="[5]"/>
+    <docs-code header="src/index.html에서 교체" path="adev/src/content/tutorials/first-app/steps/02-HomeComponent/src/index.html" visibleLines="[5]"/>
 
-    Then, save the changes you just made to `index.html`.
+    그런 다음 `index.html`에서 방금 변경한 내용을 저장합니다.
 
-1. Next, open  `first-app/src/app/app.component.ts`.
-1. In `app.component.ts`, in the `@Component` definition, replace the `template` line with this code to change the text in the app component.
+1. 다음으로 `first-app/src/app/app.component.ts`를 엽니다.
+1. `app.component.ts`의 `@Component` 정의에서 `template` 줄을 아래 코드로 교체하여 앱 컴포넌트의 텍스트를 변경합니다.
 
-    <docs-code header="Replace in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/02-HomeComponent/src/app/app.component.ts" visibleLines="[7,9]"/>
+    <docs-code header="src/app/app.component.ts에서 교체" path="adev/src/content/tutorials/first-app/steps/02-HomeComponent/src/app/app.component.ts" visibleLines="[7,9]"/>
 
-1. In `app.component.ts`, in the `AppComponent` class definition, replace the `title` line with this code to change the component title.
+1. `app.component.ts`의 `AppComponent` 클래스 정의에서 `title` 줄을 아래 코드로 교체하여 컴포넌트 제목을 변경합니다.
 
-    <docs-code header="Replace in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/02-HomeComponent/src/app/app.component.ts" visibleLines="[12,14]"/>
+    <docs-code header="src/app/app.component.ts에서 교체" path="adev/src/content/tutorials/first-app/steps/02-HomeComponent/src/app/app.component.ts" visibleLines="[12,14]"/>
 
-    Then, save the changes you made to `app.component.ts`.
+    그런 다음 `app.component.ts`에서 변경한 내용을 저장합니다.
 
-1. If you stopped the `ng serve` command from step 1, in the **Terminal** window of your IDE, run `ng serve` again.
-1. Open your browser and navigate to `localhost:4200` and confirm that the app builds without error and displays *Hello world* in the title and body of your app:
-    <img alt="browser frame of page displaying the text 'Hello World'" src="assets/images/tutorials/first-app/homes-app-lesson-01-browser.png">
+1. 1단계에서 `ng serve` 명령을 중지한 경우, 여러분의 IDE의 **터미널** 창에서 `ng serve`를 다시 실행합니다.
+1. 브라우저를 열고 `localhost:4200`으로 이동하여 앱이 오류 없이 빌드되고 앱의 제목과 본문에서 *Hello world*를 표시하는지 확인합니다:
+    <img alt="텍스트 'Hello World'를 표시하는 페이지의 브라우저 프레임" src="assets/images/tutorials/first-app/homes-app-lesson-01-browser.png">
 </docs-step>
 
 </docs-workflow>
 
-Summary: In this lesson, you updated a default Angular app to display *Hello world*.
-In the process, you learned about the `ng serve` command to serve your app locally for testing.
+요약: 이 수업에서는 기본 Angular 앱을 업데이트하여 *Hello world*를 표시했습니다.
+이 과정에서 앱을 로컬에서 테스트하기 위해 `ng serve` 명령에 대해 배웠습니다.
 
-For more information about the topics covered in this lesson, visit:
+이 수업에서 다룬 주제에 대한 자세한 내용은 다음을 방문하세요:
 
 <docs-pill-row>
-  <docs-pill href="guide/components" title="Angular Components"/>
-  <docs-pill href="tools/cli" title="Creating applications with the Angular CLI"/>
-</docs-pill-row>
+  <docs-pill href="guide/components" title="Angular 컴포넌트"/>
+  <docs-pill href="tools/cli" title="Angular CLI로 애플리케이션 만들기"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/02-HomeComponent/README.md b/adev/src/content/tutorials/first-app/steps/02-HomeComponent/README.md
index cf80ad5ac661..54ed41075cb8 100644
--- a/adev/src/content/tutorials/first-app/steps/02-HomeComponent/README.md
+++ b/adev/src/content/tutorials/first-app/steps/02-HomeComponent/README.md
@@ -1,128 +1,128 @@
-# Create Home component
+# 홈 컴포넌트 만들기
 
-This tutorial lesson demonstrates how to create a new [component](guide/components) for your Angular app.
+이 튜토리얼 수업에서는 Angular 앱을 위한 새로운 [컴포넌트](guide/components)를 만드는 방법을 보여줍니다.
 
 <docs-video src="https://www.youtube.com/embed/R0nRX8jD2D0?si=OMVaw71EIa44yIOJ"/>
 
-## What you'll learn
+## 당신이 배울 내용
 
-Your app has a new component: `HomeComponent`.
+당신의 앱에는 새로운 컴포넌트인 `HomeComponent`가 포함됩니다.
 
-## Conceptual preview of Angular components
+## Angular 컴포넌트의 개념적 미리보기
 
-Angular apps are built around components, which are Angular's building blocks.
-Components contain the code, HTML layout, and CSS style information that provide the function and appearance of an element in the app.
-In Angular, components can contain other components. An app's functions and appearance can be divided and partitioned into components.
+Angular 앱은 컴포넌트를 중심으로 구축되며, 이는 Angular의 구성 요소입니다.
+컴포넌트는 앱 내 요소의 기능과 외관을 제공하는 코드, HTML 레이아웃 및 CSS 스타일 정보를 포함합니다.
+Angular에서는 컴포넌트가 다른 컴포넌트를 포함할 수 있습니다. 앱의 기능과 외관은 컴포넌트로 나누어지고 구분될 수 있습니다.
 
-In Angular, components have metadata that define its properties.
-When you create your `HomeComponent`, you use these properties:
+Angular에서 컴포넌트는 속성을 정의하는 메타데이터를 가집니다.
+`HomeComponent`를 만들 때 이러한 속성을 사용합니다:
 
-* `selector`: to describe how Angular refers to the component in templates.
-* `standalone`: to describe whether the component requires a `NgModule`.
-* `imports`: to describe the component's dependencies.
-* `template`: to describe the component's HTML markup and layout.
-* `styleUrls`: to list the URLs of the CSS files that the component uses in an array.
+* `selector`: Angular가 템플릿에서 컴포넌트를 참조하는 방법을 설명합니다.
+* `standalone`: 컴포넌트가 `NgModule`을 필요로 하는지 여부를 설명합니다.
+* `imports`: 컴포넌트의 종속성을 설명합니다.
+* `template`: 컴포넌트의 HTML 마크업 및 레이아웃을 설명합니다.
+* `styleUrls`: 컴포넌트가 사용하는 CSS 파일의 URL을 배열로 나열합니다.
 
 <docs-pill-row>
-  <docs-pill href="api/core/Component" title="Learn more about Components"/>
+  <docs-pill href="api/core/Component" title="컴포넌트에 대해 더 알아보세요"/>
 </docs-pill-row>
 
 <docs-workflow>
 
-<docs-step title="Create the `HomeComponent`">
-In this step, you create a new component for your app.
+<docs-step title="`HomeComponent` 만들기">
+이 단계에서는 앱을 위한 새로운 컴포넌트를 생성합니다.
 
-In the **Terminal** pane of your IDE:
+**터미널** 패널에서:
 
-1. In your project directory, navigate to the `first-app` directory.
-1. Run this command to create a new `HomeComponent`
+1. 프로젝트 디렉토리에서 `first-app` 디렉토리로 이동합니다.
+1. 새로운 `HomeComponent`를 만들기 위해 이 명령어를 실행합니다.
 
     <docs-code language="shell">
     ng generate component home
     </docs-code>
 
-1. Run this command to build and serve your app.
+1. 앱을 빌드하고 제공합니다.
 
-    Note: This step is only for your local environment!
+    주의: 이 단계는 로컬 환경에서만 해당됩니다!
 
     <docs-code language="shell">
     ng serve
     </docs-code>
 
-1. Open a browser and navigate to `http://localhost:4200` to find the application.
+1. 브라우저를 열고 `http://localhost:4200`으로 이동하여 애플리케이션을 찾아보세요.
 
-1. Confirm that the app builds without error.
+1. 앱이 오류 없이 빌드되는지 확인합니다.
 
-    HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet.
+    도움이 되는 정보: 새 컴포넌트를 추가했지만 아직 앱의 템플릿에 포함하지 않았기 때문에 이전 수업에서와 동일하게 렌더링되어야 합니다.
 
-1. Leave `ng serve` running as you complete the next steps.
+1. 다음 단계를 완료하는 동안 `ng serve`가 계속 실행되도록 합니다.
 </docs-step>
 
-<docs-step title="Add the new component to your app's layout">
-In this step, you add the new component, `HomeComponent` to your app's root component, `AppComponent`, so that it displays in your app's layout.
+<docs-step title="앱 레이아웃에 새로운 컴포넌트 추가하기">
+이 단계에서는 앱의 루트 컴포넌트인 `AppComponent`에 새로운 컴포넌트인 `HomeComponent`를 추가하여 앱의 레이아웃에 표시합니다.
 
-In the **Edit** pane of your IDE:
+**편집** 패널에서:
 
-1. Open `app.component.ts` in the editor.
-1. In `app.component.ts`, import `HomeComponent` by adding this line to the file level imports.
+1. `app.component.ts`를 편집기에서 엽니다.
+1. `app.component.ts`에서 파일 수준의 import에 이 줄을 추가하여 `HomeComponent`를 가져옵니다.
 
-    <docs-code header="Import HomeComponent in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.component.ts" visibleLines="[2]"/>
+    <docs-code header="src/app/app.component.ts에서 HomeComponent 가져오기" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.component.ts" visibleLines="[2]"/>
 
-1. In `app.component.ts`, in `@Component`, update the `imports` array property and add `HomeComponent`.
+1. `app.component.ts` 내의 `@Component`에서 `imports` 배열 속성을 업데이트하고 `HomeComponent`를 추가합니다.
 
-    <docs-code header="Replace in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.component.ts" visibleLines="[7]"/>
+    <docs-code header="src/app/app.component.ts에서 교체하기" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.component.ts" visibleLines="[7]"/>
 
-1. In `app.component.ts`, in `@Component`, update the `template` property to include the following HTML code.
+1. `app.component.ts` 내의 `@Component`에서 `template` 속성을 업데이트하여 다음 HTML 코드를 포함합니다.
 
-    <docs-code header="Replace in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.component.ts" visibleLines="[8,17]"/>
+    <docs-code header="src/app/app.component.ts에서 교체하기" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.component.ts" visibleLines="[8,17]"/>
 
-1. Save your changes to  `app.component.ts`.
-1. If `ng serve` is running, the app should update.
-    If `ng serve` is not running, start it again.
-    *Hello world* in your app should change to *home works!* from the `HomeComponent`.
-1. Check the running app in the browser and confirm that the app has been updated.
+1. `app.component.ts`의 변경 사항을 저장합니다.
+1. `ng serve`가 실행 중이면 앱이 업데이트되어야 합니다.
+    만약 `ng serve`가 실행 중이 아니라면 다시 시작합니다.
+    당신의 앱 내의 *Hello world*는 `HomeComponent`에서 *home works!*로 변경되어야 합니다.
+1. 브라우저에서 실행 중인 앱을 확인하고 앱이 업데이트되었는지 확인합니다.
 
-    <img alt="browser frame of page displaying the text 'home works!'" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-2.png">
+    <img alt="페이지에 'home works!'라는 텍스트가 표시된 브라우저 프레임" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-2.png">
 
 </docs-step>
 
-<docs-step title="Add features to `HomeComponent`">
+<docs-step title="`HomeComponent`에 기능 추가하기">
 
-In this step you add features to `HomeComponent`.
+이 단계에서는 `HomeComponent`에 기능을 추가합니다.
 
-In the previous step, you added the default `HomeComponent` to your app's template so its default HTML appeared in the app.
-In this step, you add a search filter and button that is used in a later lesson.
-For now, that's all that `HomeComponent` has.
-Note that, this step just adds the search elements to the layout without any functionality, yet.
+이전 단계에서는 기본 `HomeComponent`를 앱의 템플릿에 추가하여 기본 HTML이 앱에 나타나게 했습니다.
+이번 단계에서는 이후 수업에서 사용될 검색 필터 및 버튼을 추가합니다.
+현재로서는 `HomeComponent`가 가진 모든 내용입니다.
+이 단계에서는 기능 없이 레이아웃에 검색 요소만 추가됩니다.
 
-In the **Edit** pane of your IDE:
+**편집** 패널에서:
 
-1. In the `first-app` directory, open `home.component.ts` in the editor.
-1. In `home.component.ts`, in `@Component`, update the `template` property with this code.
+1. `first-app` 디렉토리에서 `home.component.ts`를 편집기에서 엽니다.
+1. `home.component.ts`의 `@Component` 내에서 `template` 속성을 다음 코드로 업데이트합니다.
 
-    <docs-code header="Replace in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.component.ts" visibleLines="[8,15]"/>
+    <docs-code header="src/app/home/home.component.ts에서 교체하기" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.component.ts" visibleLines="[8,15]"/>
 
-1. Next, open `home.component.css` in the editor and update the content with these styles.
+1. 다음으로 `home.component.css`를 편집기에서 열고 이 스타일로 내용을 업데이트합니다.
 
-    Note: In the browser, these can go in `src/app/home/home.component.ts` in the `styles` array.
+    주의: 브라우저에서 이들은 `src/app/home/home.component.ts`의 `styles` 배열에 포함될 수 있습니다.
 
-    <docs-code header="Replace in src/app/home/home.component.css" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.component.css"/>
+    <docs-code header="src/app/home/home.component.css에서 교체하기" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.component.css"/>
 
-1. Confirm that the app builds without error.
-    You should find the filter query box and button in your app and they should be styled.
-    Correct any errors before you continue to the next step.
+1. 앱이 오류 없이 빌드되는지 확인합니다.
+    앱 내에서 필터 쿼리 박스와 버튼을 찾아야 하며 스타일이 적용되어 있어야 합니다.
+    다음 단계로 진행하기 전에 오류를 수정합니다.
 
-    <img alt="browser frame of homes-app displaying logo, filter text input box and search button" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-3.png">
-    </docs-step>
+    <img alt="로고, 필터 텍스트 입력 박스 및 검색 버튼이 표시된 homes-app의 브라우저 프레임" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-3.png">
+</docs-step>
 
 </docs-workflow>
 
-Summary: In this lesson, you created a new component for your app and gave it a filter edit control and button.
+요약: 이 수업에서는 앱을 위한 새로운 컴포넌트를 만들고 필터 편집 제어 및 버튼을 추가했습니다.
 
-For more information about the topics covered in this lesson, visit:
+이 수업에서 다룬 주제에 대한 자세한 내용은 다음을 방문하세요:
 
 <docs-pill-row>
   <docs-pill href="cli/generate/component" title="`ng generate component`"/>
-  <docs-pill href="api/core/Component" title="`Component` reference"/>
-  <docs-pill href="guide/components" title="Angular components overview"/>
-</docs-pill-row>
+  <docs-pill href="api/core/Component" title="`Component` 참조"/>
+  <docs-pill href="guide/components" title="Angular 컴포넌트 개요"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/03-HousingLocation/README.md b/adev/src/content/tutorials/first-app/steps/03-HousingLocation/README.md
index e43e884e7cb2..121aaef11d64 100644
--- a/adev/src/content/tutorials/first-app/steps/03-HousingLocation/README.md
+++ b/adev/src/content/tutorials/first-app/steps/03-HousingLocation/README.md
@@ -1,79 +1,79 @@
-# Create the application’s HousingLocation component
+# 애플리케이션의 HousingLocation 컴포넌트 만들기
 
-This tutorial lesson demonstrates how to add the `HousingLocation` component to your Angular app.
+이 튜토리얼 수업에서는 `HousingLocation` 컴포넌트를 Angular 앱에 추가하는 방법을 보여줍니다.
 
 <docs-video src="https://www.youtube.com/embed/R0nRX8jD2D0?si=U4ONEbPvtptdUHTt&amp;start=440"/>
 
-## What you'll learn
+## 배울 내용
 
-* Your app has a new component: `HousingLocationComponent` and it displays a message confirming that the component was added to your application.
+* 앱에 새로운 컴포넌트인 `HousingLocationComponent`가 추가되며, 이 컴포넌트가 애플리케이션에 추가되었음을 확인하는 메시지를 표시합니다.
 
 <docs-workflow>
 
-<docs-step title="Create the `HousingLocationComponent`">
-In this step, you create a new component for your app.
+<docs-step title="`HousingLocationComponent` 만들기">
+이 단계에서는 앱용으로 새로운 컴포넌트를 생성합니다.
 
-In the **Terminal** pane of your IDE:
+**터미널** 창에서 IDE:
 
-1. In your project directory, navigate to the `first-app` directory.
+1. 프로젝트 디렉토리에서 `first-app` 디렉토리로 이동하세요.
 
-1. Run this command to create a new `HousingLocationComponent`
+1. 새로운 `HousingLocationComponent`를 생성하기 위해 다음 명령어를 실행합니다.
 
     <docs-code language="shell">
     ng generate component housingLocation
     </docs-code>
 
-1. Run this command to build and serve your app.
+1. 앱을 빌드하고 제공하기 위해 다음 명령어를 실행하세요.
 
     <docs-code language="shell">
     ng serve
     </docs-code>
 
-    Note: This step is only for your local environment!
+    주의: 이 단계는 로컬 환경에서만 해당됩니다!
 
-1. Open a browser and navigate to `http://localhost:4200` to find the application.
-1. Confirm that the app builds without error.
+1. 브라우저를 열고 `http://localhost:4200`으로 이동하여 애플리케이션을 찾습니다.
+1. 앱이 오류 없이 빌드되었는지 확인합니다.
 
-    HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet.
+    도움이 됩니다: 새로운 컴포넌트를 추가했지만 앱의 템플릿에는 아직 포함되지 않았기 때문에 이전 수업과 동일하게 렌더링되어야 합니다.
 
-1. Leave `ng serve` running as you complete the next steps.
+1. 다음 단계를 완료하는 동안 `ng serve`를 계속 실행합니다.
 </docs-step>
 
-<docs-step title="Add the new component to your app's layout">
-In this step, you add the new component, `HousingLocationComponent` to your app's `HomeComponent`, so that it displays in your app's layout.
+<docs-step title="새 컴포넌트를 앱의 레이아웃에 추가하기">
+이 단계에서는 새 컴포넌트인 `HousingLocationComponent`를 앱의 `HomeComponent`에 추가하여 앱의 레이아웃에 표시되도록 합니다.
 
-In the **Edit** pane of your IDE:
+**편집** 창에서 IDE:
 
-1. Open `home.component.ts` in the editor.
-1. In `home.component.ts`, import `HousingLocationComponent` by adding this line to the file level imports.
+1. 편집기에서 `home.component.ts`를 엽니다.
+1. `home.component.ts`에서 다음 줄을 파일 레벨의 import에 추가하여 `HousingLocationComponent`를 가져옵니다.
 
-    <docs-code header="Import HousingLocationComponent in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.component.ts" visibleLines="[3]"/>
+    <docs-code header="src/app/home/home.component.ts에서 HousingLocationComponent 가져오기" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.component.ts" visibleLines="[3]"/>
 
-1. Next update the `imports` property of the `@Component` metadata by adding `HousingLocationComponent` to the array.
+1. 다음으로, `@Component` 메타데이터의 `imports` 속성을 업데이트하고 `HousingLocationComponent`를 배열에 추가합니다.
 
-    <docs-code header="Add HousingLocationComponent to imports array in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.component.ts" visibleLines="[7]"/>
+    <docs-code header="src/app/home/home.component.ts의 imports 배열에 HousingLocationComponent 추가" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.component.ts" visibleLines="[7]"/>
 
-1. Now the component is ready for use in the template for the `HomeComponent`. Update the `template` property of the `@Component` metadata to include a reference to the `<app-housing-location>` tag.
+1. 이제 컴포넌트는 `HomeComponent`의 템플릿에서 사용할 준비가 되었습니다. `@Component` 메타데이터의 `template` 속성을 업데이트하여 `<app-housing-location>` 태그에 대한 참조를 포함합니다.
 
-    <docs-code header="Add housing location to the component template in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.component.ts" visibleLines="[8,18]"/>
+    <docs-code header="src/app/home/home.component.ts의 컴포넌트 템플릿에 주택 위치 추가" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.component.ts" visibleLines="[8,18]"/>
 
 </docs-step>
 
-<docs-step title="Add the styles for the component">
-In this step, you will copy over the pre-written styles for the `HousingLocationComponent` to your app so that the app renders properly.
+<docs-step title="컴포넌트 스타일 추가하기">
+이 단계에서는 앱이 제대로 렌더링되도록 하기 위해 `HousingLocationComponent`에 대한 미리 작성된 스타일을 앱에 복사합니다.
 
-1. Open `src/app/housing-location/housing-location.component.css`, and paste the styles below into the file:
+1. `src/app/housing-location/housing-location.component.css`를 열고 아래 스타일을 파일에 붙여넣습니다:
 
-    Note: In the browser, these can go in `src/app/housing-location/housing-location.component.ts` in the `styles` array.
+    주의: 브라우저에서는 이것이 `src/app/housing-location/housing-location.component.ts`의 `styles` 배열에 포함될 수 있습니다.
 
-    <docs-code header="Add CSS styles to housing location to the component in src/app/housing-location/housing-location.component.css" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/housing-location/housing-location.component.css"/>
+    <docs-code header="src/app/housing-location/housing-location.component.css에서 주택 위치에 CSS 스타일 추가" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/housing-location/housing-location.component.css"/>
 
-1. Save your code, return to the browser and confirm that the app builds without error. You should find the message "housing-location works!" rendered to the screen.Correct any errors before you continue to the next step.
+1. 코드를 저장하고 브라우저로 돌아가서 앱이 오류 없이 빌드되는지 확인합니다. "housing-location works!"라는 메시지가 화면에 렌더링되어야 합니다. 다음 단계로 진행하기 전에 모든 오류를 수정하세요.
 
-    <img alt="browser frame of homes-app displaying logo, filter text input box and search button and the message 'housing-location works!" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png">
+    <img alt="로고, 필터 텍스트 입력 상자, 검색 버튼 및 'housing-location works!'라는 메시지를 표시하는 homes-app의 브라우저 프레임" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png">
 
 </docs-step>
 
 </docs-workflow>
 
-Summary: In this lesson, you created a new component for your app and added it to the app's layout.
+요약: 이 수업에서는 앱을 위한 새로운 컴포넌트를 생성하고 이를 앱의 레이아웃에 추가했습니다.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/04-interfaces/README.md b/adev/src/content/tutorials/first-app/steps/04-interfaces/README.md
index 46a6774093ab..1776d7897931 100644
--- a/adev/src/content/tutorials/first-app/steps/04-interfaces/README.md
+++ b/adev/src/content/tutorials/first-app/steps/04-interfaces/README.md
@@ -1,33 +1,33 @@
-# Creating an interface
+# 인터페이스 만들기
 
-This tutorial lesson demonstrates how to create an interface and include it in a component of your app.
+이 튜토리얼 수업은 인터페이스를 생성하고 이를 앱의 구성 요소에 포함시키는 방법을 보여줍니다.
 
 <docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=YkFSeUeV8Ixtz8pm"/>
 
-## What you'll learn
+## 배울 내용
 
-* Your app has a new interface that it can use as a data type.
-* Your app has an instance of the new interface with sample data.
+* 당신의 앱은 데이터 유형으로 사용할 수 있는 새로운 인터페이스를 갖습니다.
+* 당신의 앱은 샘플 데이터가 있는 새로운 인터페이스의 인스턴스를 갖습니다.
 
-## Conceptual preview of interfaces
+## 인터페이스의 개념적 미리보기
 
-[Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html) are custom data types for your app.
+[인터페이스](https://www.typescriptlang.org/docs/handbook/interfaces.html)는 당신의 앱을 위한 사용자 정의 데이터 유형입니다.
 
-Angular uses TypeScript to take advantage of working in a strongly typed programming environment.
-Strong type checking reduces the likelihood of one element in your app sending incorrectly formatted data to another.
-Such type-mismatch errors are caught by the TypeScript compiler and many such errors can also be caught in your IDE.
+앵귤러는 TypeScript를 사용하여 강력하게 타입이 지정된 프로그래밍 환경에서 작업하는 이점을 활용합니다.
+강력한 타입 검사로 인해 앱 내의 한 요소가 잘못된 형식의 데이터를 다른 요소에 전송할 가능성이 줄어듭니다.
+이러한 타입 불일치 오류는 TypeScript 컴파일러에 의해 포착되며, 많은 오류는 IDE에서도 확인할 수 있습니다.
 
-In this lesson, you'll create an interface to define properties that represent data about a single housing location.
+이 수업에서는 단일 주거 위치에 대한 데이터를 나타내는 속성을 정의하는 인터페이스를 생성할 것입니다.
 
 <docs-workflow>
 
-<docs-step title="Create a new Angular interface">
-This step creates a new interface in your app.
+<docs-step title="새 Angular 인터페이스 생성">
+이 단계는 앱에서 새로운 인터페이스를 생성합니다.
 
-In the **Terminal** pane of your IDE:
+**터미널** 패널에서:
 
-1. In your project directory, navigate to the `first-app` directory.
-1. In the `first-app` directory, run this command to create the new interface.
+1. 프로젝트 디렉토리에서 `first-app` 디렉토리로 이동합니다.
+1. `first-app` 디렉토리에서 새로운 인터페이스를 생성하기 위해 다음 명령을 실행합니다.
 
     <docs-code language="shell">
 
@@ -35,65 +35,65 @@ In the **Terminal** pane of your IDE:
 
     </docs-code>
 
-1. Run `ng serve` to build the app and serve it to `http://localhost:4200`.
-1. In a browser, open `http://localhost:4200` to see your app.
-1. Confirm that the app builds without error.
-    Correct any errors before you continue to the next step.
+1. `ng serve`를 실행하여 앱을 빌드하고 `http://localhost:4200`에서 제공됩니다.
+1. 브라우저에서 `http://localhost:4200`을 열어 앱을 확인합니다.
+1. 앱이 오류 없이 빌드되는지 확인합니다.
+   오류가 발생하면 다음 단계로 진행하기 전에 수정해야 합니다.
 </docs-step>
 
-<docs-step title="Add properties to the new interface">
-This step adds the properties to the interface that your app needs to represent a housing location.
+<docs-step title="새 인터페이스에 속성 추가">
+이 단계에서는 앱에서 주거 위치를 나타내기 위해 인터페이스에 속성을 추가합니다.
 
-1. In the **Terminal** pane of your IDE, start the `ng serve` command, if it isn't already running, to build the app and serve it to `http://localhost:4200`.
-1. In the **Edit** pane of your IDE, open the `src/app/housinglocation.ts` file.
-1. In `housinglocation.ts`, replace the default content with the following code to make your new interface to match this example.
+1. **터미널** 패널에서 `ng serve` 명령을 실행하여 앱을 빌드하고 `http://localhost:4200`에서 제공됩니다. 
+1. **편집** 패널에서 `src/app/housinglocation.ts` 파일을 엽니다.
+1. `housinglocation.ts`에서 기본 내용을 다음 코드로 교체하여 새로운 인터페이스가 이 예제와 일치하도록 합니다.
 
-    <docs-code header="Update src/app/housinglocation.ts to match this code" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housinglocation.ts" visibleLines="[1,10]" />
+    <docs-code header="src/app/housinglocation.ts 업데이트" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housinglocation.ts" visibleLines="[1,10]" />
 
-1. Save your changes and confirm the app does not display any errors. Correct any errors before you continue to the next step.
+1. 변경 사항을 저장하고 앱에 오류가 표시되지 않는지 확인합니다. 오류가 발생하면 다음 단계로 진행하기 전에 수정해야 합니다.
 
-At this point, you've defined an interface that represents data about a housing location including an `id`, `name`, and location information.
+이 시점에서, `id`, `name`, 및 위치 정보를 포함하여 주거 위치에 대한 데이터를 나타내는 인터페이스를 정의했습니다.
 </docs-step>
 
-<docs-step title="Create a test house for your app">
-You have an interface, but you aren't using it yet.
+<docs-step title="앱을 위한 테스트 주택 생성">
+인터페이스는 있지만, 아직 사용하지 않고 있습니다.
 
-In this step, you create an instance of the interface and assign some sample data to it.
-You won't see this sample data appear in your app yet.
-There are a few more lessons to complete before that happens.
+이 단계에서는 인터페이스의 인스턴스를 생성하고 샘플 데이터를 할당합니다.
+이 샘플 데이터는 아직 앱에 나타나지 않을 것입니다.
+그 일이 일어나기 전에 완료해야 할 수업이 몇 가지 더 있습니다.
 
-1. In the **Terminal** pane of your IDE, run the `ng serve` command, if it isn't already running, to build the app and serve your app to `http://localhost:4200`.
-1. In the **Edit** pane of your IDE, open `src/app/home/home.component.ts`.
-1. In `src/app/home/home.component.ts`, add this import statement after the existing `import` statements so that `HomeComponent` can use the new interface.
+1. **터미널** 패널에서 `ng serve` 명령을 실행하여 앱을 빌드하고 `http://localhost:4200`에서 제공됩니다.
+1. **편집** 패널에서 `src/app/home/home.component.ts` 파일을 엽니다.
+1. `src/app/home/home.component.ts`에서 기존의 `import` 문 뒤에 이 import 문을 추가하여 `HomeComponent`가 새로운 인터페이스를 사용할 수 있도록 합니다.
 
-    <docs-code header="Import HomeComponent in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.component.ts" visibleLines="[4]"/>
+    <docs-code header="src/app/home/home.component.ts에 HomeComponent 가져오기" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.component.ts" visibleLines="[4]"/>
 
-1. In `src/app/home/home.component.ts`, replace the empty `export class HomeComponent {}` definition with this code to create a single instance of the new interface in the component.
+1. `src/app/home/home.component.ts`에서 빈 `export class HomeComponent {}` 정의를 다음 코드로 교체하여 구성 요소 내에 새로운 인터페이스의 단일 인스턴스를 생성합니다.
 
-    <docs-code header="Add sample data to src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.component.ts" visibleLines="[23,36]"/>
+    <docs-code header="src/app/home/home.component.ts에 샘플 데이터 추가" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.component.ts" visibleLines="[23,36]"/>
 
-1. Confirm that your `home.component.ts` file matches like this example.
+1. `home.component.ts` 파일이 이 예제와 일치하는지 확인합니다.
 
     <docs-code header="src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.component.ts" visibleLines="[1,36]" />
 
-    By adding the `housingLocation` property of type `HousingLocation` to the `HomeComponent` class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors.
+    `HomeComponent` 클래스에 `HousingLocation` 유형의 `housingLocation` 속성을 추가함으로써 데이터가 인터페이스의 설명과 일치함을 확인할 수 있습니다. 데이터가 인터페이스의 설명을 만족하지 않으면, IDE에는 유용한 오류를 제공할 수 있는 충분한 정보가 있습니다.
 
-1. Save your changes and confirm the app does not have any errors. Open the browser and confirm that your application still displays the message "housing-location works!"
+1. 변경 사항을 저장하고 앱에 오류가 없는지 확인합니다. 브라우저를 열고 애플리케이션이 여전히 "housing-location works!" 메시지를 표시하는지 확인합니다.
 
-    <img alt="browser frame of homes-app displaying logo, filter text input box and search button and the message 'housing-location works!'" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png">
+    <img alt="로고, 필터 텍스트 입력 상자 및 검색 버튼과 'housing-location works!'라는 메시지를 표시하는 homes-app의 브라우저 프레임" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png">
 
-1. Correct any errors before you continue to the next step.
+1. 다음 단계로 진행하기 전에 오류를 수정합니다.
 </docs-step>
 
 </docs-workflow>
 
-Summary: In this lesson, you created an interface that created a new data type for your app.
-This new data type makes it possible for you to specify where `HousingLocation` data is required.
-This new data type also makes it possible for your IDE and the TypeScript compiler can ensure that `HousingLocation` data is used where it's required.
+요약: 이번 수업에서 당신은 앱을 위한 새로운 데이터 유형을 생성하는 인터페이스를 만들었습니다.
+이 새로운 데이터 유형은 `HousingLocation` 데이터가 필요한 위치를 지정할 수 있게 해줍니다.
+이 새로운 데이터 유형은 IDE와 TypeScript 컴파일러가 `HousingLocation` 데이터가 필요한 곳에서 사용되는지 보장할 수 있게 합니다.
 
-For more information about the topics covered in this lesson, visit:
+이번 수업에서 다룬 주제에 대한 추가 정보는 다음 링크를 방문하십시오:
 
 <docs-pill-row>
   <docs-pill href="cli/generate/interface" title="ng generate interface"/>
   <docs-pill href="cli/generate" title="ng generate"/>
-</docs-pill-row>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/05-inputs/README.md b/adev/src/content/tutorials/first-app/steps/05-inputs/README.md
index 9cc8ec4d7b24..d76078fcaed1 100644
--- a/adev/src/content/tutorials/first-app/steps/05-inputs/README.md
+++ b/adev/src/content/tutorials/first-app/steps/05-inputs/README.md
@@ -1,52 +1,52 @@
-# Add an input parameter to the component
+# 컴포넌트에 입력 매개변수 추가하기
 
-This tutorial lesson demonstrates how to create a component `@Input()` and use it to pass data to a component for customization.
+이번 튜토리얼 수업에서는 `@Input()` 컴포넌트를 생성하고 이를 사용하여 구성 요소에 데이터를 전달하는 방법을 설명합니다.
 
 <docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=WvRGFSkW_7_zDIFD&amp;start=241"/>
 
-## What you'll learn
+## 배울 내용
 
-Your app's `HousingLocationComponent` template has a `HousingLocation` property to receive input.
+앱의 `HousingLocationComponent` 템플릿에는 입력을 받을 `HousingLocation` 속성이 있습니다.
 
-## Conceptual preview of Inputs
+## 입력의 개념적 미리보기
 
-[Inputs](api/core/Input) allow components to share data. The direction of the data sharing is from parent component to child component.
+[입력](api/core/Input)은 컴포넌트가 데이터를 공유할 수 있게 합니다. 데이터 공유의 방향은 부모 컴포넌트에서 자식 컴포넌트로 향합니다.
 
-In this lesson, you'll define `@Input()` properties in the `HousingLocationComponent` component which will enable you to customize the data displayed in the component.
+이 강의에서는 `HousingLocationComponent` 컴포넌트에서 `@Input()` 속성을 정의하여 컴포넌트에 표시될 데이터를 사용자 정의할 수 있도록 합니다.
 
-Learn more in the [Accepting data with input properties](guide/components/inputs) and [Custom events with outputs](guide/components/outputs) guides.
+자세한 내용은 [입력 속성으로 데이터 수신하기](guide/components/inputs) 및 [출력을 통한 사용자 정의 이벤트](guide/components/outputs) 가이드를 참조하세요.
 
 <docs-workflow>
 
-<docs-step title="Import the Input decorator">
-This step imports the `Input` decorator into the class.
+<docs-step title="Input 데코레이터 가져오기">
+이 단계에서는 클래스에 `Input` 데코레이터를 가져옵니다.
 
-In the code editor:
+코드 편집기에서:
 
-1. Navigate to `src/app/housing-location/housing-location.component.ts`
-1. Update the file imports to include `Input` and `HousingLocation`:
+1. `src/app/housing-location/housing-location.component.ts`로 이동합니다.
+1. 파일 import를 `Input` 및 `HousingLocation`을 포함하도록 업데이트합니다:
 
-    <docs-code header="Import HousingLocationComponent and Input in src/app/housing-location/housing-location.component.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.component.ts" visibleLines="[1,3]"/>
+    <docs-code header="src/app/housing-location/housing-location.component.ts에서 HousingLocationComponent와 Input 가져오기" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.component.ts" visibleLines="[1,3]"/>
 
 </docs-step>
 
-<docs-step title="Add the Input property">
-1.  In the same file, add a property called `housingLocation` of type `HousingLocation` to the `HousingLocationComponent` class. Add an `!` after the property name and prefix it with the `@Input()` decorator:
+<docs-step title="Input 속성 추가하기">
+1. 같은 파일에서 `HousingLocationComponent` 클래스에 `HousingLocation` 타입의 `housingLocation`이라는 속성을 추가합니다. 속성 이름 뒤에 `!`를 추가하고 `@Input()` 데코레이터로 접두사를 붙입니다:
 
-    <docs-code header="Import HousingLocationComponent and Input in src/app/housing-location/housing-location.component.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.component.ts" visibleLines="[13,15]"/>
+    <docs-code header="src/app/housing-location/housing-location.component.ts에서 HousingLocationComponent와 Input 가져오기" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.component.ts" visibleLines="[13,15]"/>
 
-    You have to add the `!` because the input is expecting the value to be passed. In this case, there is no default value. In our example application case we know that the value will be passed in - this is by design. The exclamation point is called the non-null assertion operator and it tells the TypeScript compiler that the value of this property won't be null or undefined.
+    입력은 값이 전달될 것으로 예상하므로 `!`를 추가해야 합니다. 이 경우 기본값이 없습니다. 예제 애플리케이션에서는 값이 전달된다는 것을 알고 있습니다 - 이는 설계상 결정입니다. 느낌표는 넌-null 단정 연산자(non-null assertion operator)라고 하며, 이 속성의 값이 null 또는 undefined가 아님을 TypeScript 컴파일러에 알려줍니다.
 
-1. Save your changes and confirm the app does not have any errors.
+1. 변경 사항을 저장하고 앱에 오류가 없는지 확인합니다.
 
-1. Correct any errors before you continue to the next step.
+1. 다음 단계로 진행하기 전에 오류를 수정합니다.
 </docs-step>
 
 </docs-workflow>
 
-Summary: In this lesson, you created a new property decorated with the `@Input()` decorator. You also used the non-null assertion operator to notify the compiler that the value of the new property won't be `null` or `undefined`.
+요약: 이번 강의에서는 `@Input()` 데코레이터로 장식된 새로운 속성을 생성했습니다. 또한 넌-null 단정 연산자를 사용하여 새 속성의 값이 `null`이나 `undefined`가 아님을 컴파일러에 알렸습니다.
 
 <docs-pill-row>
-  <docs-pill href="guide/components/inputs" title="Accepting data with input properties"/>
-  <docs-pill href="guide/components/outputs" title="Custom events with outputs"/>
-</docs-pill-row>
+  <docs-pill href="guide/components/inputs" title="입력 속성으로 데이터 수신하기"/>
+  <docs-pill href="guide/components/outputs" title="출력을 통한 사용자 정의 이벤트"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/06-property-binding/README.md b/adev/src/content/tutorials/first-app/steps/06-property-binding/README.md
index 37daef87ccaa..6bcfa205d7b3 100644
--- a/adev/src/content/tutorials/first-app/steps/06-property-binding/README.md
+++ b/adev/src/content/tutorials/first-app/steps/06-property-binding/README.md
@@ -1,49 +1,49 @@
-# Add a property binding to a component’s template
+# 구성 요소 템플릿에 속성 바인딩 추가하기
 
-This tutorial lesson demonstrates how to add property binding to a template and use it to pass dynamic data to components.
+이 튜토리얼에서는 템플릿에 속성 바인딩을 추가하고 이를 사용하여 구성 요소에 동적 데이터를 전달하는 방법을 설명합니다.
 
 <docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=AsiczpWnMz5HhJqB&amp;start=599"/>
 
-## What you'll learn
+## 배울 내용
 
-* Your app has data bindings in the `HomeComponent` template.
-* Your app sends data from the `HomeComponent` to the `HousingLocationComponent`.
+* 귀하의 앱은 `HomeComponent` 템플릿에서 데이터 바인딩을 가지고 있습니다.
+* 귀하의 앱은 `HomeComponent`에서 `HousingLocationComponent`로 데이터를 전송합니다.
 
-## Conceptual preview of Inputs
+## 입력의 개념 미리보기
 
-In this lesson, you'll continue the process of sharing data from the parent component to the child component by binding data to those properties in the template using property binding.
+이 수업에서는 부모 구성 요소에서 자식 구성 요소로 데이터를 공유하는 과정을 계속 진행하며, 속성 바인딩을 사용하여 템플릿의 해당 속성에 데이터를 바인딩합니다.
 
-Property binding enables you to connect a variable to an `Input` in an Angular template. The data is then dynamically bound to the `Input`.
+속성 바인딩은 Angular 템플릿의 `Input`에 변수를 연결할 수 있게 해줍니다. 그런 다음 데이터는 `Input`에 동적으로 바인딩됩니다.
 
-For a more in depth explanation, please refer to the [Property binding](guide/templates/property-binding) guide.
+더 깊이 있는 설명을 보려면 [속성 바인딩](guide/templates/property-binding) 가이드를 참조하세요.
 
 <docs-workflow>
 
-<docs-step title="Update the `HomeComponent` template">
-This step adds property binding to the `<app-housing-location>` tag.
+<docs-step title="`HomeComponent` 템플릿 업데이트하기">
+이 단계에서는 `<app-housing-location>` 태그에 속성 바인딩을 추가합니다.
 
-In the code editor:
+코드 편집기에서:
 
-1. Navigate to `src/app/home/home.component.ts`
-1. In the template property of the `@Component` decorator, update the code to match the code below:
-    <docs-code header="Add housingLocation property binding" path="adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.component.ts" visibleLines="[17,19]"/>
+1. `src/app/home/home.component.ts`로 이동합니다.
+1. `@Component` 데코레이터의 템플릿 속성에서 코드를 아래의 코드와 일치하도록 업데이트합니다:
+    <docs-code header="housingLocation 속성 바인딩 추가" path="adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.component.ts" visibleLines="[17,19]"/>
 
-    When adding a property binding to a component tag, we use the `[attribute] = "value"` syntax to notify Angular that the assigned value should be treated as a property from the component class and not a string value.
+    구성 요소 태그에 속성 바인딩을 추가할 때는 `[attribute] = "value"` 구문을 사용하여 Angular에게 할당된 값을 구성 요소 클래스의 속성으로 처리해야 한다는 것을 알립니다. 문자열 값이 아닙니다.
 
-    The value on the right-hand side is the name of the property from the `HomeComponent`.
+    오른쪽에 있는 값은 `HomeComponent`의 속성 이름입니다.
 </docs-step>
 
-<docs-step title="Confirm the code still works">
-1.  Save your changes and confirm the app does not have any errors.
-1.  Correct any errors before you continue to the next step.
+<docs-step title="코드가 여전히 작동하는지 확인하기">
+1. 변경 사항을 저장하고 앱에 오류가 없는지 확인합니다.
+1. 다음 단계로 진행하기 전에 오류를 수정합니다.
 </docs-step>
 
 </docs-workflow>
 
-Summary: In this lesson, you added a new property binding and passed in a reference to a class property. Now, the `HousingLocationComponent` has access to data that it can use to customize the component's display.
+요약: 이번 수업에서는 새로운 속성 바인딩을 추가하고 클래스 속성에 대한 참조를 전달했습니다. 이제 `HousingLocationComponent`는 구성 요소의 디스플레이를 사용자 지정하는 데 사용할 수 있는 데이터에 액세스할 수 있습니다.
 
-For more information about the topics covered in this lesson, visit:
+이번 수업에서 다룬 주제에 대한 더 많은 정보는 다음을 방문하세요:
 
 <docs-pill-row>
-  <docs-pill href="/guide/templates/property-binding" title="Property binding"/>
-</docs-pill-row>
+  <docs-pill href="/guide/templates/property-binding" title="속성 바인딩"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md b/adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md
index 9c19a1e66bd7..d8a5c00ebb68 100644
--- a/adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md
+++ b/adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md
@@ -1,60 +1,60 @@
-# Add an interpolation to a component’s template
+# 컴포넌트 템플릿에 인터폴레이션 추가하기
 
-This tutorial lesson demonstrates how to add interpolation to Angular templates in order to display dynamic data in a template.
+이 튜토리얼 수업에서는 Angular 템플릿에 인터폴레이션을 추가하여 템플릿에서 동적 데이터를 표시하는 방법을 보여줍니다.
 
 <docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=IFAly3Ss8dwqFx8N&amp;start=338"/>
 
-## What you'll learn
+## 배울 내용
 
-- Your app will display interpolated values in the `HousingLocationComponent` template.
-- Your app will render a housing location data to the browser.
+- `HousingLocationComponent` 템플릿에서 인터폴레이션된 값을 표시할 수 있습니다.
+- 앱이 브라우저에 주택 위치 데이터를 렌더링합니다.
 
-## Conceptual preview of interpolation
+## 인터폴레이션의 개념적 미리보기
 
-In this step you will display values (properties and `Input` values) in a template using interpolation.
+이 단계에서는 인터폴레이션을 사용하여 템플릿에 값(속성 및 `Input` 값)을 표시합니다.
 
-Using the `{{ expression }}` in Angular templates, you can render values from properties, `Inputs` and valid JavaScript expressions.
+Angular 템플릿에서 `{{ expression }}`을 사용하여 속성, `Inputs` 및 유효한 JavaScript 표현식에서 값을 렌더링할 수 있습니다.
 
-For a more in depth explanation, please refer to the [Displaying values with interpolation](guide/templates/binding#render-dynamic-text-with-text-interpolation) guide.
+더 깊이 있는 설명은 [인터폴레이션으로 값 표시](guide/templates/binding#render-dynamic-text-with-text-interpolation) 가이드를 참조하세요.
 
 <docs-workflow>
 
-<docs-step title="Update `HousingLocationComponent` template to include interpolated values">
-This step adds new HTML structure and interpolated values in the `HousingLocationComponent` template.
+<docs-step title="인터폴레이션된 값을 포함하도록 `HousingLocationComponent` 템플릿 업데이트">
+이 단계에서는 `HousingLocationComponent` 템플릿에 새로운 HTML 구조와 인터폴레이션된 값을 추가합니다.
 
-In the code editor:
+코드 편집기에서:
 
-1.  Navigate to `src/app/housing-location/housing-location.component.ts`
-1.  In the template property of the `@Component` decorator, replace the existing HTML markup with the following code:
+1. `src/app/housing-location/housing-location.component.ts`로 이동합니다.
+1. `@Component` 데코레이터의 템플릿 속성에서 기존 HTML 마크업을 다음 코드로 교체합니다:
 
-<docs-code header="Update HousingLocationComponent template" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.component.ts" visibleLines="[9,20]"/>
+<docs-code header="HousingLocationComponent 템플릿 업데이트" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.component.ts" visibleLines="[9,20]"/>
 
-  In this updated template code you have used property binding to bind the `housingLocation.photo` to the `src` attribute. The `alt` attribute uses interpolation to give more context to the alt text of the image.
+  이 업데이트된 템플릿 코드에서는 `housingLocation.photo`를 `src` 속성에 바인딩하기 위해 속성 바인딩을 사용했습니다. `alt` 속성에는 이미지의 대체 텍스트에 대한 더 많은 컨텍스트를 제공하기 위해 인터폴레이션을 사용합니다.
 
-  You use interpolation to include the values for `name`, `city` and `state` of the `housingLocation` property.
+  인터폴레이션을 사용하여 `housingLocation` 속성의 `name`, `city` 및 `state`에 대한 값을 포함합니다.
 
 </docs-step>
 
-<docs-step title="Confirm the changes render in the browser">
-1.  Save all changes.
-1.  Open the browser and confirm that the app renders the photo, city and state sample data.
-    <img alt="browser frame of homes-app displaying logo, filter text input box, search button and the same housing location UI card" src="assets/images/tutorials/first-app/homes-app-lesson-07-step-2.png">
+<docs-step title="변경 사항이 브라우저에서 렌더링되는지 확인">
+1. 모든 변경 사항을 저장합니다.
+1. 브라우저를 열고 앱이 사진, 도시 및 주 샘플 데이터를 렌더링하는지 확인합니다.
+    <img alt="로고, 필터 텍스트 입력 상자, 검색 버튼 및 동일한 주택 위치 UI 카드가 표시된 homes-app의 브라우저 프레임" src="assets/images/tutorials/first-app/homes-app-lesson-07-step-2.png">
 </docs-step>
 
 </docs-workflow>
 
-Summary: In this lesson, you added a new HTML structure and used Angular template syntax to render values in the `HousingLocation` template.
+요약: 이 수업에서는 새로운 HTML 구조를 추가하고 Angular 템플릿 구문을 사용하여 `HousingLocation` 템플릿에 값을 렌더링했습니다.
 
-Now, you have two important skills:
+이제 두 가지 중요한 기술을 습득했습니다:
 
-- passing data to components
-- Interpolating values into a template
+- 컴포넌트에 데이터 전달
+- 템플릿에 값 인터폴레이션
 
-With these skills, your app can now share data and display dynamic values in the browser. Great work so far.
+이 기술로 이제 앱이 데이터를 공유하고 브라우저에서 동적 값을 표시할 수 있습니다. 지금까지 잘 하고 있습니다.
 
-For more information about the topics covered in this lesson, visit:
+이번 수업에서 다룬 주제에 대한 자세한 정보는 다음을 방문하세요:
 
 <docs-pill-row>
-  <docs-pill href="guide/templates" title="Template syntax"/>
-  <docs-pill href="guide/templates/binding#render-dynamic-text-with-text-interpolation" title="Displaying values with interpolation"/>
-</docs-pill-row>
+  <docs-pill href="guide/templates" title="템플릿 구문"/>
+  <docs-pill href="guide/templates/binding#render-dynamic-text-with-text-interpolation" title="인터폴레이션으로 값 표시"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/08-ngFor/README.md b/adev/src/content/tutorials/first-app/steps/08-ngFor/README.md
index c711d4aaf715..347bee111104 100644
--- a/adev/src/content/tutorials/first-app/steps/08-ngFor/README.md
+++ b/adev/src/content/tutorials/first-app/steps/08-ngFor/README.md
@@ -1,64 +1,64 @@
-# Use *ngFor to list objects in component
+# *ngFor를 사용하여 컴포넌트에서 객체 나열하기
 
-This tutorial lesson demonstrates how to use `ngFor` directive in Angular templates in order to display dynamically repeated data in a template.
+이 튜토리얼 수업에서는 Angular 템플릿에서 `ngFor` 지시자를 사용하는 방법을 보여주며, 템플릿에서 동적으로 반복되는 데이터를 표시합니다.
 
 <docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=MIl5NcRxvcLjYt5f&amp;start=477"/>
 
-## What you'll learn
+## 배울 내용
 
-* You will have added a data set to the app
-* Your app will display a list of elements from the new data set using `ngFor`
+* 앱에 데이터 세트를 추가했습니다.
+* 앱이 `ngFor`를 사용하여 새 데이터 세트의 요소 목록을 표시합니다.
 
-## Conceptual preview of ngFor
+## ngFor 개념 미리 보기
 
-In Angular, `ngFor` is a specific type of [directive](guide/directives) used to dynamically repeat data in a template. In plain JavaScript you would use a for loop - ngFor provides similar functionality for Angular templates.
+Angular에서 `ngFor`는 템플릿에서 데이터를 동적으로 반복하기 위해 사용되는 특정 유형의 [지시자](guide/directives)입니다. 일반 JavaScript에서는 for 루프를 사용할 수 있으며, ngFor은 Angular 템플릿에 유사한 기능을 제공합니다.
 
-You can utilize `ngFor` to iterate over arrays and even asynchronous values. In this lesson, you'll add a new array of data to iterate over.
+`ngFor`를 사용하여 배열 및 비동기 값에 대해 반복할 수 있습니다. 이 수업에서는 반복할 새 데이터 배열을 추가합니다.
 
-For a more in depth explanation, please refer to the [Built-in directives](guide/directives#ngFor) guide.
+자세한 설명은 [내장 지시자](guide/directives#ngFor) 가이드를 참조하세요.
 
 <docs-workflow>
 
-<docs-step title="Add housing data to the `HomeComponent`">
+<docs-step title="HomeComponent에 주택 데이터 추가하기">
 
-In the `HomeComponent` there is only a single housing location. In this step, you will add an array of `HousingLocation` entries.
+`HomeComponent`에는 단일 주택 위치만 있습니다. 이 단계에서는 `HousingLocation` 항목의 배열을 추가합니다.
 
-1. In `src/app/home/home.component.ts`, remove the `housingLocation` property from the `HomeComponent` class.
-1. Update the `HomeComponent` class to have a property called `housingLocationList`. Update your code to match the following code:
-    <docs-code header="Add housingLocationList property" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.component.ts" visibleLines="26-131"/>
+1. `src/app/home/home.component.ts`에서 `HomeComponent` 클래스에서 `housingLocation` 속성을 제거합니다.
+1. `HomeComponent` 클래스에 `housingLocationList`라는 속성을 추가합니다. 다음의 코드와 일치하도록 코드를 업데이트하세요:
+    <docs-code header="housingLocationList 속성 추가" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.component.ts" visibleLines="26-131"/>
 
-    IMPORTANT: Do not remove the `@Component` decorator, you will update that code in an upcoming step.
+    중요: `@Component` 데코레이터를 제거하지 마세요. 이 코드는 다음 단계에서 업데이트합니다.
 
 </docs-step>
 
-<docs-step title="Update the `HomeComponent` template to use `ngFor`">
-Now the app has a dataset that you can use to display the entries in the browser using the `ngFor` directive.
+<docs-step title="HomeComponent 템플릿을 ngFor 사용하도록 업데이트하기">
+이제 앱에는 브라우저에서 항목을 `ngFor` 지시자를 사용하여 표시할 수 있는 데이터 세트가 있습니다.
 
-1. Update the `<app-housing-location>` tag in the template code to this:
-    <docs-code header="Add ngFor to HomeComponent template" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.component.ts" visibleLines="[17,22]"/>
+1. 템플릿 코드에서 `<app-housing-location>` 태그를 다음과 같이 업데이트하세요:
+    <docs-code header="HomeComponent 템플릿에 ngFor 추가" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.component.ts" visibleLines="[17,22]"/>
 
-    Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `ngFor` directive. Before this change, it referred to the property on the `HomeComponent` class.
+    코드 `[housingLocation] = "housingLocation"`에서 `housingLocation` 값은 이제 `ngFor` 지시자에서 사용되는 변수를 참조합니다. 이 변경 전에는 `HomeComponent` 클래스의 속성을 참조했습니다.
 
-1. Save all changes.
+1. 모든 변경 사항을 저장합니다.
 
-1. Refresh the browser and confirm that the app now renders a grid of housing locations.
+1. 브라우저를 새로 고치고 앱이 이제 주택 위치의 그리드를 렌더링하는지 확인합니다.
 
     <section class="lightbox">
-    <img alt="browser frame of homes-app displaying logo, filter text input box, search button and a grid of housing location cards" src="assets/images/tutorials/first-app/homes-app-lesson-08-step-2.png">
+    <img alt="로고, 필터 텍스트 입력 상자, 검색 버튼 및 주택 위치 카드의 그리드를 표시하는 homes-app의 브라우저 프레임" src="assets/images/tutorials/first-app/homes-app-lesson-08-step-2.png">
     </section>
 
 </docs-step>
 
 </docs-workflow>
 
-Summary: In this lesson, you used the `ngFor` directive to repeat data dynamically in Angular templates. You also added a new array of data to be used in the Angular app. The application now dynamically renders a list of housing locations in the browser.
+요약: 이 수업에서는 `ngFor` 지시자를 사용하여 Angular 템플릿에서 데이터를 동적으로 반복했습니다. 또한 Angular 앱에서 사용할 새 데이터 배열을 추가했습니다. 이제 애플리케이션은 브라우저에서 주택 위치 목록을 동적으로 렌더링합니다.
 
-The app is taking shape, great job.
+앱이 형태를 갖추고 있습니다. 잘 하셨습니다.
 
-For more information about the topics covered in this lesson, visit:
+이 수업에서 다룬 주제에 대한 더 많은 정보를 보려면 방문하세요:
 
 <docs-pill-row>
-  <docs-pill href="guide/directives/structural-directives" title="Structural Directives"/>
-  <docs-pill href="guide/directives#ngFor" title="ngFor guide"/>
+  <docs-pill href="guide/directives/structural-directives" title="구조적 지시자"/>
+  <docs-pill href="guide/directives#ngFor" title="ngFor 가이드"/>
   <docs-pill href="api/common/NgFor" title="ngFor"/>
-</docs-pill-row>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/09-services/README.md b/adev/src/content/tutorials/first-app/steps/09-services/README.md
index 08480fcb62b1..e4f94823696a 100644
--- a/adev/src/content/tutorials/first-app/steps/09-services/README.md
+++ b/adev/src/content/tutorials/first-app/steps/09-services/README.md
@@ -1,110 +1,110 @@
-# Angular services
+# Angular 서비스
 
-This tutorial lesson demonstrates how to create an Angular service and use dependency injection to include it in your app.
+이 튜토리얼 수업에서는 Angular 서비스를 생성하고 종속성 주입을 사용하여 앱에 포함하는 방법을 보여줍니다.
 
 <docs-video src="https://www.youtube.com/embed/-jRxG84AzCI?si=rieGfJawp9xJ00Sz"/>
 
-## What you'll learn
+## 배울 내용
 
-Your app has a service to serve the data to your app.
-At the end of this lesson, the service reads data from local, static data.
-In a later lesson, you'll update the service to get data from a web service.
+귀하의 앱은 데이터를 제공하는 서비스를 가지고 있습니다.
+이 수업의 끝에서 서비스는 로컬의 정적 데이터를 읽습니다.
+나중의 수업에서는 웹 서비스에서 데이터를 가져오도록 서비스를 업데이트할 것입니다.
 
-## Conceptual preview of services
+## 서비스에 대한 개념적 미리보기
 
-This tutorial introduces Angular services and dependency injection.
+이 튜토리얼은 Angular 서비스와 종속성 주입을 소개합니다.
 
-### Angular services
+### Angular 서비스
 
-*Angular services* provide a way for you to separate Angular app data and functions that can be used by multiple components in your app.
-To be used by multiple components, a service must be made *injectable*.
-Services that are injectable and used by a component become dependencies of that component.
-The component depends on those services and can't function without them.
+*Angular 서비스*는 여러 구성 요소에서 사용할 수 있는 Angular 앱 데이터 및 함수를 분리하는 방법을 제공합니다.
+여러 구성 요소에서 사용되기 위해서는 서비스가 *주입 가능*해야 합니다.
+주입 가능하고 구성 요소에서 사용되는 서비스는 해당 구성 요소의 종속성이 됩니다.
+구성 요소는 이러한 서비스에 의존하며, 서비스 없이는 기능을 수행할 수 없습니다.
 
-### Dependency injection
+### 종속성 주입
 
-*Dependency injection* is the mechanism that manages the dependencies of an app's components and the services that other components can use.
+*종속성 주입*은 앱의 구성 요소 및 다른 구성 요소에서 사용할 수 있는 서비스의 종속성을 관리하는 메커니즘입니다.
 
 <docs-workflow>
 
-<docs-step title="Create a new service for your app">
-This step creates an injectable service for your app.
+<docs-step title="앱을 위한 새로운 서비스 생성">
+이 단계에서는 앱을 위한 주입 가능한 서비스를 생성합니다.
 
-In the **Terminal** pane of your IDE:
+**Terminal** 창에서:
 
-1. In your project directory, navigate to the `first-app` directory.
-1. In the `first-app` directory, run this command to create the new service.
+1. 프로젝트 디렉토리에서 `first-app` 디렉토리로 이동합니다.
+1. `first-app` 디렉토리에서 다음 명령을 실행하여 새로운 서비스를 생성합니다.
 
     <docs-code language="shell">
     ng generate service housing --skip-tests
     </docs-code>
 
-1. Run `ng serve` to build the app and serve it to `http://localhost:4200`.
-1. Confirm that the app builds without error.
-    Correct any errors before you continue to the next step.
+1. `ng serve`를 실행하여 앱을 빌드하고 `http://localhost:4200`에서 제공합니다.
+1. 앱이 오류 없이 빌드되는지 확인합니다.
+    다음 단계로 넘어가기 전에 모든 오류를 수정하세요.
 </docs-step>
 
-<docs-step title="Add static data to the new service">
-This step adds some sample data to your new service.
-In a later lesson, you'll replace the static data with a web interface to get data as you might in a real app.
-For now, your app's new service uses the data that has, so far, been created locally in `HomeComponent`.
+<docs-step title="새 서비스에 정적 데이터 추가">
+이 단계에서는 새 서비스에 샘플 데이터를 추가합니다.
+나중의 수업에서 정적 데이터를 실제 앱이 가져오는 것처럼 웹 인터페이스로 교체할 것입니다.
+현재 앱의 새 서비스는 이제까지 `HomeComponent`에서 로컬로 생성된 데이터를 사용합니다.
 
-In the **Edit** pane of your IDE:
+**Edit** 창에서:
 
-1. In `src/app/home/home.component.ts`, from `HomeComponent`, copy the `housingLocationList` variable and its array value.
-1. In `src/app/housing.service.ts`:
-    1. Inside the `HousingService` class, paste the variable that you copied from `HomeComponent` in the previous step.
-    1. Inside the `HousingService` class, paste these functions after the data you just copied.
-        These functions allow dependencies to access the service's data.
+1. `src/app/home/home.component.ts`에서 `HomeComponent`의 `housingLocationList` 변수를 복사하고 그 배열 값을 복사합니다.
+1. `src/app/housing.service.ts`에서:
+    1. `HousingService` 클래스 내부에, 이전 단계에서 `HomeComponent`에서 복사한 변수를 붙여넣습니다.
+    1. `HousingService` 클래스 내부에, 방금 복사한 데이터 이후에 이러한 함수를 붙여넣습니다.
+        이러한 함수는 종속성이 서비스의 데이터에 접근할 수 있도록 합니다.
 
-        <docs-code header="Service functions in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[112,118]"/>
+        <docs-code header="src/app/housing.service.ts의 서비스 함수" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[112,118]"/>
 
-        You will need these functions in a future lesson. For now, it is enough to understand that these functions return either a specific `HousingLocation` by id or the entire list.
+        향후 수업에서 이러한 함수가 필요할 것입니다. 현재로서는 이 함수들이 특정 `HousingLocation`을 id로 반환하거나 전체 목록을 반환한다는 것을 이해하면 충분합니다.
 
-    1. Add a file level import for the `HousingLocation`.
+    1. `HousingLocation`에 대한 파일 수준 임포트를 추가합니다.
 
-        <docs-code header="Import HousingLocation type in  src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[2]"/>
+        <docs-code header="src/app/housing.service.ts에서 HousingLocation 타입 가져오기" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[2]"/>
 
-1. Confirm that the app builds without error.
-    Correct any errors before you continue to the next step.
+1. 앱이 오류 없이 빌드되는지 확인합니다.
+    다음 단계로 넘어가기 전에 모든 오류를 수정하세요.
 </docs-step>
 
-<docs-step title="Inject the new service into `HomeComponent`">
-This step injects the new service into your app's `HomeComponent` so that it can read the app's data from a service.
-In a later lesson, you'll replace the static data with a live data source to get data as you might in a real app.
+<docs-step title="새 서비스를 `HomeComponent`에 주입">
+이 단계에서는 새 서비스를 앱의 `HomeComponent`에 주입하여 앱 데이터에 서비스를 통해 접근할 수 있도록 합니다.
+나중의 수업에서 정적 데이터를 실제 앱처럼 라이브 데이터 소스로 교체할 것입니다.
 
-In the **Edit** pane of your IDE, in `src/app/home/home.component.ts`:
+**Edit** 창에서, `src/app/home/home.component.ts`에서:
 
-1. At the top of `src/app/home/home.component.ts`, add the `inject` to the items imported from `@angular/core`. This will import the `inject` function into the `HomeComponent` class.
+1. `src/app/home/home.component.ts`의 맨 위에, `@angular/core`에서 가져온 항목에 `inject`를 추가합니다. 이것은 `HomeComponent` 클래스에 `inject` 함수를 가져옵니다.
 
-    <docs-code header="Update to src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.component.ts" visibleLines="[1]"/>
+    <docs-code header="src/app/home/home.component.ts 업데이트" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.component.ts" visibleLines="[1]"/>
 
-1. Add a new file level import for the `HousingService`:
+1. `HousingService`에 대한 새로운 파일 수준 임포트를 추가합니다:
 
-    <docs-code header="Add import to src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.component.ts" visibleLines="[5]"/>
+    <docs-code header="src/app/home/home.component.ts에 임포트 추가" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.component.ts" visibleLines="[5]"/>
 
-1. From `HomeComponent`, delete the `housingLocationList` array entries and assign `housingLocationList` the value of empty array (`[]`). In a few steps you will update the code to pull the data from the `HousingService`.
+1. `HomeComponent`에서 `housingLocationList` 배열 항목을 삭제하고 `housingLocationList`에 빈 배열(`[]`) 값을 할당합니다. 몇 단계 후에 코드를 업데이트하여 `HousingService`에서 데이터를 가져올 것입니다.
 
-1. In `HomeComponent`, add the following code to inject the new service and initialize the data for the app. The `constructor` is the first function that runs when this component is created. The code in the `constructor` will assign the `housingLocationList` the value returned from the call to `getAllHousingLocations`.
+1. `HomeComponent`에서 아래 코드를 추가하여 새 서비스를 주입하고 앱의 데이터를 초기화합니다. `constructor`는 이 구성 요소가 생성될 때 실행되는 첫 번째 함수입니다. `constructor`의 코드는 `getAllHousingLocations` 호출에서 반환된 값으로 `housingLocationList`를 할당합니다.
 
-    <docs-code header="Initialize data from service in src/app/home/home.component.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.component.ts" visibleLines="[28,32]"/>
+    <docs-code header="src/app/home/home.component.ts에서 서비스로부터 데이터 초기화" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.component.ts" visibleLines="[28,32]"/>
 
-1. Save the changes to `src/app/home/home.component.ts` and confirm your app builds without error.
-    Correct any errors before you continue to the next step.
+1. `src/app/home/home.component.ts`에 대한 변경 사항을 저장하고 앱이 오류 없이 빌드되는지 확인합니다.
+    다음 단계로 넘어가기 전에 모든 오류를 수정하세요.
 </docs-step>
 
 </docs-workflow>
 
-Summary: In this lesson, you added an Angular service to your app and injected it into the `HomeComponent` class.
-This compartmentalizes how your app gets its data.
-For now, the new service gets its data from a static array of data.
-In a later lesson, you'll refactor the service to get its data from an API endpoint.
+요약: 이 수업에서는 Angular 서비스를 앱에 추가하고 `HomeComponent` 클래스에 주입했습니다.
+이것은 앱이 데이터를 얻는 방식을 구분합니다.
+현재 새로운 서비스는 정적 데이터 배열에서 데이터를 가져옵니다.
+나중의 수업에서는 API 엔드포인트에서 데이터를 가져오도록 서비스를 리팩토링할 것입니다.
 
-For more information about the topics covered in this lesson, visit:
+이 수업에서 다룬 주제에 대한 자세한 정보는 다음을 방문하세요:
 
 <docs-pill-row>
-  <docs-pill href="guide/di/creating-injectable-service" title="Creating an injectable service"/>
-  <docs-pill href="guide/di" title="Dependency injection in Angular"/>
+  <docs-pill href="guide/di/creating-injectable-service" title="주입 가능한 서비스 생성"/>
+  <docs-pill href="guide/di" title="Angular의 종속성 주입"/>
   <docs-pill href="cli/generate/service" title="ng generate service"/>
   <docs-pill href="cli/generate" title="ng generate"/>
-</docs-pill-row>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/10-routing/README.md b/adev/src/content/tutorials/first-app/steps/10-routing/README.md
index 2bdd6cea7a9f..e294284bfbfa 100644
--- a/adev/src/content/tutorials/first-app/steps/10-routing/README.md
+++ b/adev/src/content/tutorials/first-app/steps/10-routing/README.md
@@ -1,87 +1,87 @@
-# Add routes to the application
+# 애플리케이션에 라우트를 추가하세요
 
-This tutorial lesson demonstrates how to add routes to your app.
+이 튜토리얼 레슨에서는 앱에 라우트를 추가하는 방법을 보여줍니다.
 
 <docs-video src="https://www.youtube.com/embed/r5DEBMuStPw?si=H6Bx6nLJoMLaMxkx" />
 
-IMPORTANT: We recommend using your local environment to learn routing.
+중요: 라우팅을 배우기 위해 로컬 환경을 사용하는 것이 좋습니다.
 
-## What you'll learn
+## 배울 내용
 
-At the end of this lesson your application will have support for routing.
+이 레슨이 끝나면 애플리케이션에서 라우팅을 지원하게 됩니다.
 
-## Conceptual preview of routing
+## 라우팅 개념 미리보기
 
-This tutorial introduces routing in Angular. Routing is the ability to navigate from one component in the application to another. In [Single Page Applications (SPA)](guide/routing), only parts of the page are updated to represent the requested view for the user.
+이 튜토리얼은 Angular에서의 라우팅을 소개합니다. 라우팅은 애플리케이션의 한 구성 요소에서 다른 구성 요소로 이동할 수 있는 기능입니다. [Single Page Applications (SPA)](guide/routing)에서는 요청된 사용자 뷰를 나타내기 위해 페이지의 일부만 업데이트됩니다.
 
-The [Angular Router](guide/routing) enables users to declare routes and specify which component should be displayed on the screen if that route is requested by the application.
+[Angular Router](guide/routing)를 사용하면 사용자가 라우트를 선언하고 애플리케이션에서 해당 라우트가 요청될 경우 어떤 구성 요소를 화면에 표시해야 할지를 지정할 수 있습니다.
 
-In this lesson, you will enable routing in your application to navigate to the details page.
+이번 레슨에서는 애플리케이션에서 라우팅을 활성화하여 세부 정보 페이지로 이동할 수 있도록 합니다.
 
 <docs-workflow>
 
-<docs-step title="Create a default details component ">
-1. From the terminal, enter the following command to create the `DetailsComponent`:
+<docs-step title="기본 세부정보 구성 요소 만들기">
+1. 터미널에서 다음 명령어를 입력하여 `DetailsComponent`를 생성합니다:
 
     <docs-code language="shell">
     ng generate component details
     </docs-code>
 
-    This component will represent the details page that provides more information on a given housing location.
+    이 구성 요소는 주어진 주거 위치에 대한 추가 정보를 제공하는 세부 정보 페이지를 나타냅니다.
 </docs-step>
 
-<docs-step title="Add routing to the application">
-1.  In the `src/app` directory, create a file called `routes.ts`. This file is where we will define the routes in the application.
+<docs-step title="애플리케이션에 라우팅 추가하기">
+1. `src/app` 디렉토리에서 `routes.ts`라는 파일을 만듭니다. 이 파일에서 애플리케이션의 라우트를 정의할 것입니다.
 
-1. In `main.ts`, make the following updates to enable routing in the application:
-    1. Import the routes file and the `provideRouter` function:
+1. `main.ts`에서 애플리케이션에서 라우팅을 활성화하기 위해 다음 업데이트를 수행합니다:
+    1. 라우트 파일과 `provideRouter` 함수를 가져옵니다:
 
-        <docs-code header="Import routing details in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[7,8]"/>
+        <docs-code header="src/main.ts에서 라우팅 세부정보 가져오기" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[7,8]"/>
 
-    1. Update the call to `bootstrapApplication` to include the routing configuration:
+    1. 라우팅 구성을 포함하도록 `bootstrapApplication` 호출을 업데이트합니다:
 
-        <docs-code header="Add router configuration in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[10,17]"/>
+        <docs-code header="src/main.ts에 라우터 구성 추가하기" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[10,17]"/>
 
-1. In `src/app/app.component.ts`, update the component to use routing:
-    1. Add a file level import for `RoutingModule`:
+1. `src/app/app.component.ts`에서 라우팅을 사용하도록 구성 요소를 업데이트합니다:
+    1. `RoutingModule`에 대한 파일 수준 가져오기를 추가합니다:
 
-        <docs-code header="Import RouterModule in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.component.ts" visibleLines="[3]"/>
+        <docs-code header="src/app/app.component.ts에서 RouterModule 가져오기" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.component.ts" visibleLines="[3]"/>
 
-    1. Add `RouterModule` to the `@Component` metadata imports
+    1. `@Component` 메타데이터 가져오기에 `RouterModule`을 추가합니다:
 
-        <docs-code header="Import RouterModule in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.component.ts" visibleLines="[7]"/>
+        <docs-code header="src/app/app.component.ts에서 RouterModule 가져오기" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.component.ts" visibleLines="[7]"/>
 
-    1. In the `template` property, replace the `<app-home></app-home>` tag with the `<router-outlet>` directive and add a link back to the home page. Your code should match this code:
+    1. `template` 속성에서 `<app-home></app-home>` 태그를 `<router-outlet>` 지시문으로 교체하고 홈페이지로 돌아가는 링크를 추가합니다. 귀하의 코드는 다음 코드와 일치해야 합니다:
 
-        <docs-code header="Add router-outlet in src/app/app.component.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.component.ts" visibleLines="[8,18]"/>
+        <docs-code header="src/app/app.component.ts에 router-outlet 추가하기" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.component.ts" visibleLines="[8,18]"/>
 
 </docs-step>
 
-<docs-step title="Add route to new component">
-In the previous step you removed the reference to the `<app-home>` component in the template. In this step, you will add a new route to that component.
+<docs-step title="새 구성 요소에 라우트 추가하기">
+이전 단계에서는 템플릿에서 `<app-home>` 구성 요소에 대한 참조를 제거했습니다. 이번 단계에서는 해당 구성 요소에 새 라우트를 추가합니다.
 
-1. In `routes.ts`, perform the following updates to create a route.
-    1. Add a file level imports for the `HomeComponent`, `DetailsComponent` and the `Routes` type that you'll use in the route definitions.
+1. `routes.ts`에서 라우트를 생성하기 위해 다음 업데이트를 수행합니다.
+    1. 라우트 정의에 사용할 `HomeComponent`, `DetailsComponent` 및 `Routes` 유형에 대한 파일 수준 가져오기를 추가합니다.
 
-        <docs-code header="Import components and Routes" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[1,3]"/>
+        <docs-code header="구성 요소 및 Routes 가져오기" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[1,3]"/>
 
-    1. Define a variable called `routeConfig` of type `Routes` and define two  routes for the app:
-        <docs-code header="Add routes to the app" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[5,18]"/>
+    1. `Routes` 유형의 `routeConfig`라는 변수를 정의하고 앱을 위한 두 개의 라우트를 정의합니다:
+        <docs-code header="앱에 라우트 추가하기" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[5,18]"/>
 
-        The entries in the `routeConfig` array represent the routes in the application. The first entry navigates to the `HomeComponent` whenever the url matches `''`. The second entry uses some special formatting that will be revisited in a future lesson.
+        `routeConfig` 배열의 항목은 애플리케이션의 라우트를 나타냅니다. 첫 번째 항목은 URL이 `''`에 일치할 때마다 `HomeComponent`로 이동합니다. 두 번째 항목은 향후 레슨에서 다시 다룰 특별한 형식을 사용합니다.
 
-1. Save all changes and confirm that the application works in the browser. The application should still display the list of housing locations.
+1. 모든 변경 사항을 저장하고 애플리케이션이 브라우저에서 작동하는지 확인합니다. 애플리케이션은 여전히 주거 위치 목록을 표시해야 합니다.
 </docs-step>
 
 </docs-workflow>
 
-Summary: In this lesson, you enabled routing in your app as well as defined new routes. Now your app can support navigation between views. In the next lesson, you will learn to navigate to the "details" page for a given housing location.
+요약: 이번 레슨에서는 애플리케이션에서 라우팅을 활성화하고 새로운 라우트를 정의했습니다. 이제 귀하의 앱은 뷰 간 탐색을 지원할 수 있습니다. 다음 레슨에서는 주어진 주거 위치에 대한 "세부정보" 페이지로 이동하는 방법을 배웁니다.
 
-You are making great progress with your app, well done.
+귀하의 앱에서 큰 진전을 이루고 있습니다. 잘하고 계십니다.
 
-For more information about the topics covered in this lesson, visit:
+이번 레슨에서 다룬 주제에 대한 자세한 정보를 보려면 방문하세요:
 
 <docs-pill-row>
-  <docs-pill href="guide/routing" title="Routing in Angular Overview"/>
-  <docs-pill href="guide/routing/common-router-tasks" title="Common Routing Tasks"/>
-</docs-pill-row>
+  <docs-pill href="guide/routing" title="Angular에서의 라우팅 개요"/>
+  <docs-pill href="guide/routing/common-router-tasks" title="일반 라우팅 작업"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/11-details-page/README.md b/adev/src/content/tutorials/first-app/steps/11-details-page/README.md
index be84c8be009c..2ffbf8d5297b 100644
--- a/adev/src/content/tutorials/first-app/steps/11-details-page/README.md
+++ b/adev/src/content/tutorials/first-app/steps/11-details-page/README.md
@@ -1,59 +1,59 @@
-# Integrate details page into application
+# 애플리케이션에 세부 정보 페이지 통합하기
 
-This tutorial lesson demonstrates how to connect the details page to your app.
+이 튜토리얼 수업에서는 세부 정보 페이지를 앱에 연결하는 방법을 보여줍니다.
 
 <docs-video src="https://www.youtube.com/embed/-jRxG84AzCI?si=CbqIpmRpwp5ZZDnu&amp;start=345"/>
 
-IMPORTANT: We recommend using your local environment to learn routing.
+중요: 라우팅을 배우기 위해 로컬 환경을 사용하는 것을 권장합니다.
 
-## What you'll learn
+## 배울 내용
 
-At the end of this lesson your application will have support for routing to the details page.
+이 수업의 끝에서 귀하의 애플리케이션은 세부 정보 페이지로의 라우팅 지원을 갖게 됩니다.
 
-## Conceptual preview of routing with route parameters
+## 경로 매개변수를 사용한 라우팅 개념 미리보기
 
-Each housing location has specific details that should be displayed when a user navigates to the details page for that item. To accomplish this goal, you will need to use route parameters.
+각 주택 위치에는 사용자가 해당 항목의 세부 정보 페이지로 탐색할 때 표시해야 할 특정 세부 정보가 있습니다. 이 목표를 달성하기 위해 경로 매개변수를 사용해야 합니다.
 
-Route parameters enable you to include dynamic information as a part of your route URL. To identify which housing location a user has clicked on you will use the `id` property of the `HousingLocation` type.
+경로 매개변수는 경로 URL의 일부로 동적 정보를 포함할 수 있게 해줍니다. 사용자가 클릭한 주택 위치를 식별하기 위해 `HousingLocation` 유형의 `id` 속성을 사용합니다.
 
 <docs-workflow>
 
-<docs-step title="Using `routerLink` for dynamic navigation">
-In lesson 10, you added a second route to `src/app/routes.ts` which includes a special segment that identifies the route parameter, `id`:
+<docs-step title="동적 탐색을 위한 `routerLink` 사용">
+10번째 수업에서 `src/app/routes.ts`에 라우트 매개변수인 `id`를 식별하는 특별한 세그먼트를 포함한 두 번째 경로를 추가했습니다:
 
 <docs-code language="javascript">
 'details/:id'
 </docs-code>
 
-In this case, `:id` is dynamic and will change based on how the route is requested by the code.
+이 경우 `:id`는 동적이며 코드가 요청된 방식에 따라 변경됩니다.
 
-1. In `src/app/housing-location/housing-location.component.ts`, add an anchor tag to the `section` element and include the `routerLink` directive:
+1. `src/app/housing-location/housing-location.component.ts`에 앵커 태그를 `section` 요소에 추가하고 `routerLink` 지시어를 포함합니다:
 
-    <docs-code header="Add anchor with a routerLink directive to housing-location.component.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/housing-location/housing-location.component.ts" visibleLines="[20]"/>
+    <docs-code header="housing-location.component.ts에 routerLink 지시어가 있는 앵커 추가" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/housing-location/housing-location.component.ts" visibleLines="[20]"/>
 
-    The `routerLink` directive enables Angular's router to create dynamic links in the application. The value assigned to the `routerLink` is an array with two entries: the static portion of the path and the dynamic data.
+    `routerLink` 지시어는 Angular의 라우터가 애플리케이션 내에서 동적 링크를 생성할 수 있게 해줍니다. `routerLink`에 할당된 값은 경로의 정적 부분과 동적 데이터가 있는 두 개의 항목으로 구성된 배열입니다.
 
-    For the `routerLink` to work in the template, add a file level import of `RouterLink` and `RouterOutlet` from '@angular/router', then update the component `imports` array to include both `RouterLink` and `RouterOutlet`.
-1. At this point you can confirm that the routing is working in your app. In the browser, refresh the home page and click the "Learn More" button for a housing location.
+    템플릿에서 `routerLink`가 작동하려면 '@angular/router'에서 `RouterLink` 및 `RouterOutlet`의 파일 수준 가져오기를 추가하고, 구성 요소의 `imports` 배열에 `RouterLink`와 `RouterOutlet`을 포함합니다.
+1. 이 시점에서 라우팅이 앱에서 작동하는지 확인할 수 있습니다. 브라우저에서 홈 페이지를 새로 고치고 주택 위치의 "자세히 알아보기" 버튼을 클릭합니다.
 
-    <img alt="details page displaying the text 'details works!'" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-1.png">
+    <img alt="세부 정보 페이지에 'details works!' 텍스트가 표시됨" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-1.png">
 
 </docs-step>
 
-<docs-step title="Get route parameters">
-In this step, you will get the route parameter in the `DetailsComponent`. Currently, the app displays `details works!`. Next you'll update the code to display the `id` value passed using the route parameters.
+<docs-step title="경로 매개변수 가져오기">
+이 단계에서는 `DetailsComponent`에서 경로 매개변수를 가져옵니다. 현재 앱은 `details works!`를 표시합니다. 다음에 코드를 업데이트하여 경로 매개변수를 사용하여 전달된 `id` 값을 표시합니다.
 
-1. In `src/app/details/details.component.ts` update the template to import the functions, classes and services that you'll need to use in the `DetailsComponent`:
+1. `src/app/details/details.component.ts`에서 템플릿을 업데이트하여 `DetailsComponent`에서 사용할 함수, 클래스 및 서비스를 가져옵니다:
 
-    <docs-code header="Update file level imports" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.component.ts" visibleLines="[1,5]"/>
+    <docs-code header="파일 수준 가져오기 업데이트" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.component.ts" visibleLines="[1,5]"/>
 
-1. Update the `template` property of the `@Component` decorator to display the value `housingLocationId`:
+1. `@Component` 데코레이터의 `template` 속성을 업데이트하여 `housingLocationId` 값을 표시합니다:
 
     <docs-code language="javascript">
       template: `<p>details works! {{ housingLocationId }}</p>`,
     </docs-code>
 
-1. Update the body of the `DetailsComponent` class with the following code:
+1. `DetailsComponent` 클래스의 본문을 다음 코드로 업데이트합니다:
 
     <docs-code language="javascript">
         export class DetailsComponent {
@@ -65,69 +65,69 @@ In this step, you will get the route parameter in the `DetailsComponent`. Curren
         }
     </docs-code>
 
-    This code gives the `DetailsComponent` access to the `ActivatedRoute` router feature that enables you to have access to the data about the current route. In the `constructor`, the code converts the `id` parameter acquired from the route from a string to a number.
+    이 코드는 `DetailsComponent`에 현재 라우트에 대한 데이터에 접근할 수 있는 `ActivatedRoute` 라우터 기능을 제공합니다. `constructor`에서 이 코드는 라우트에서 획득한 `id` 매개변수를 문자열에서 숫자로 변환합니다.
 
-1. Save all changes.
+1. 모든 변경 사항을 저장합니다.
 
-1. In the browser, click on one of the housing location's "Learn More" links and confirm that the numeric value displayed on the page matches the `id` property for that location in the data.
+1. 브라우저에서 주택 위치의 "Learn More" 링크 중 하나를 클릭하고 페이지에 표시된 숫자 값이 해당 위치의 데이터에서 `id` 속성과 일치하는지 확인합니다.
 </docs-step>
 
-<docs-step title="Customize the `DetailComponent`">
-Now that routing is working properly in the application this is a great time to update the template of the `DetailsComponent` to display the specific data represented by the housing location for the route parameter.
+<docs-step title="`DetailComponent` 사용자 정의">
+현재 애플리케이션에서 라우팅이 제대로 작동하고 있으므로 경로 매개변수에 대한 주택 위치가 나타내는 특정 데이터를 표시하는 `DetailsComponent`의 템플릿을 업데이트할 좋은 시기입니다.
 
-To access the data you will add a call to the `HousingService`.
+데이터에 접근하기 위해 `HousingService`를 호출할 것입니다.
 
-1. Update the template code to match the following code:
+1. 템플릿 코드를 다음 코드에 맞게 업데이트합니다:
 
-    <docs-code header="Update the DetailsComponent template in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.component.ts" visibleLines="[11,32]"/>
+    <docs-code header="src/app/details/details.component.ts에서 DetailsComponent 템플릿 업데이트" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.component.ts" visibleLines="[11,32]"/>
 
-    Notice that the `housingLocation` properties are being accessed with the optional chaining operator `?`. This ensures that if the `housingLocation` value is null or undefined the application doesn't crash.
+    `housingLocation` 속성이 선택적 체이닝 연산자 `?`로 액세스되고 있음을 주목하세요. 이는 `housingLocation` 값이 null이거나 정의되지 않은 경우 애플리케이션이 중단되지 않도록 보장합니다.
 
-1. Update the body of the `DetailsComponent` class to match the following code:
+1. `DetailsComponent` 클래스의 본문을 다음 코드에 맞게 업데이트합니다:
 
-    <docs-code header="Update the DetailsComponent class in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.component.ts" visibleLines="[35,44]"/>
+    <docs-code header="src/app/details/details.component.ts에서 DetailsComponent 클래스 업데이트" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.component.ts" visibleLines="[35,44]"/>
 
-    Now the component has the code to display the correct information based on the selected housing location. The `constructor` now includes a call to the `HousingService` to pass the route parameter as an argument to the `getHousingLocationById` service function.
+    이제 구성 요소는 선택한 주택 위치에 따라 올바른 정보를 표시할 수 있는 코드를 가집니다. `constructor`에는 이제 라우트 매개변수를 `getHousingLocationById` 서비스 함수에 인수로 전달하기 위해 `HousingService`를 호출하는 코드가 포함되어 있습니다.
 
-1. Copy the following styles into the `src/app/details/details.component.css` file:
+1. 다음 스타일을 `src/app/details/details.component.css` 파일에 복사합니다:
 
-    <docs-code header="Add styles for the DetailsComponent" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.component.css" visibleLines="[1,71]"/>
+    <docs-code header="DetailsComponent에 대한 스타일 추가" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.component.css" visibleLines="[1,71]"/>
 
-1. Save your changes.
+1. 변경 사항을 저장합니다.
 
-1. In the browser refresh the page and confirm that when you click on the "Learn More" link for a given housing location the details page displays the correct information based on the data for that selected item.
+1. 브라우저에서 페이지를 새로 고치고 특정 주택 위치의 "Learn More" 링크를 클릭했을 때 세부 정보 페이지가 해당 선택된 항목의 데이터에 따라 올바른 정보를 표시하는지 확인합니다.
 
-    <img alt="Details page listing home info" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-3.png">
+    <img alt="홈 정보 나열이 있는 세부 정보 페이지" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-3.png">
 
 </docs-step>
 
-<docs-step title="Add navigation to the `HomeComponent`">
-In a previous lesson you updated the `AppComponent` template to include a `routerLink`. Adding that code updated your app to enable navigation back to the `HomeComponent` whenever the logo is clicked.
+<docs-step title="`HomeComponent`에 탐색 추가">
+이전 수업에서는 `AppComponent` 템플릿을 업데이트하여 `routerLink`를 포함했습니다. 해당 코드를 추가하면 로고를 클릭할 때마다 앱에서 `HomeComponent`로 돌아갈 수 있게 됩니다.
 
-1. Confirm that your code matches the following:
+1. 코드가 다음과 일치하는지 확인합니다:
 
-    <docs-code header="Add routerLink to AppComponent" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/app.component.ts" visibleLines="[8,20]"/>
+    <docs-code header="AppComponent에 routerLink 추가" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/app.component.ts" visibleLines="[8,20]"/>
 
-    Your code may already be up-to-date but confirm to be sure.
+    귀하의 코드는 이미 최신일 수 있지만 확인해 보세요.
 </docs-step>
 
 </docs-workflow>
 
-Summary: In this lesson you added routing to show details pages.
+요약: 이 수업에서는 세부 정보 페이지를 표시하기 위해 라우팅을 추가했습니다.
 
-You now know how to:
+이제 다음을 할 수 있습니다:
 
-* use route parameters to pass data to a route
-* use the `routerLink` directive to use dynamic data to create a route
-* use route parameter to retrieve data from the `HousingService` to display specific housing location information.
+* 경로 매개변수를 사용하여 경로에 데이터를 전달하기
+* 동적 데이터를 사용하여 경로를 생성하기 위해 `routerLink` 지시어 사용하기
+* `HousingService`에서 데이터를 검색하여 특정 주택 위치 정보를 표시하기 위한 경로 매개변수 사용하기.
 
-Really great work so far.
+지금까지 정말 훌륭한 작업입니다.
 
-For more information about the topics covered in this lesson, visit:
+이 수업에서 다룬 주제에 대한 자세한 정보는 다음을 방문하세요:
 
 <docs-pill-row>
-  <docs-pill href="guide/routing/common-router-tasks#accessing-query-parameters-and-fragments" title="Route Parameters"/>
-  <docs-pill href="guide/routing" title="Routing in Angular Overview"/>
-  <docs-pill href="guide/routing/common-router-tasks" title="Common Routing Tasks"/>
-  <docs-pill href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Optional_chaining" title="Optional Chaining Operator"/>
-</docs-pill-row>
+  <docs-pill href="guide/routing/common-router-tasks#accessing-query-parameters-and-fragments" title="경로 매개변수"/>
+  <docs-pill href="guide/routing" title="Angular에서의 라우팅 개요"/>
+  <docs-pill href="guide/routing/common-router-tasks" title="공통 라우팅 작업"/>
+  <docs-pill href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Optional_chaining" title="선택적 체이닝 연산자"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/12-forms/README.md b/adev/src/content/tutorials/first-app/steps/12-forms/README.md
index 1b97b20960ab..466d9f839810 100644
--- a/adev/src/content/tutorials/first-app/steps/12-forms/README.md
+++ b/adev/src/content/tutorials/first-app/steps/12-forms/README.md
@@ -1,106 +1,103 @@
-# Adding a form to your Angular app
+# Angular 앱에 양식 추가하기
 
-This tutorial lesson demonstrates how to add a form that collects user data to an Angular app.
-This lesson starts with a functional Angular app and shows how to add a form to it.
+이 튜토리얼 레슨에서는 사용자 데이터를 수집하는 양식을 Angular 앱에 추가하는 방법을 보여줍니다. 이 레슨은 기능적인 Angular 앱으로 시작하며, 양식을 추가하는 방법을 보여줍니다.
 
-The data that the form collects is sent only to the app's service, which writes it to the browser's console.
-Using a REST API to send and receive the form's data is not covered in this lesson.
+양식이 수집하는 데이터는 앱의 서비스로만 전송되며, 브라우저의 콘솔에 기록됩니다. 양식의 데이터를 보내고 받기 위한 REST API 사용은 이 레슨에서 다루지 않습니다.
 
 <docs-video src="https://www.youtube.com/embed/kWbk-dOJaNQ?si=FYMXGdUiT-qh321h"/>
 
-IMPORTANT: We recommend using your local environment for this step of the tutorial.
+중요: 이 튜토리얼 단계에서는 로컬 환경을 사용하는 것을 권장합니다.
 
-## What you'll learn
+## 배울 내용
 
-- Your app has a form into which users can enter data that is sent to your app's service.
-- The service writes the data from the form to the browser's console log.
+- 사용자가 데이터를 입력할 수 있는 양식이 앱에 추가되며, 이 데이터는 앱의 서비스로 전송됩니다.
+- 서비스는 양식에서 수집된 데이터를 브라우저의 콘솔 로그에 기록합니다.
 
 <docs-workflow>
 
-<docs-step title="Add a method to send form data">
-This step adds a method to your app's service that receives the form data to send to the data's destination.
-In this example, the method writes the data from the form to the browser's console log.
+<docs-step title="양식 데이터를 전송하는 메서드 추가하기">
+이 단계에서는 양식 데이터를 수신하여 데이터의 목적지로 전송하는 앱의 서비스에 메서드를 추가합니다. 이 예제에서는 메서드가 양식의 데이터를 브라우저의 콘솔 로그에 기록합니다.
 
-In the **Edit** pane of your IDE:
+**편집** 창에서 IDE의:
 
-1. In `src/app/housing.service.ts`, inside the `HousingService` class, paste this method at the bottom of the class definition.
+1. `src/app/housing.service.ts`에서 `HousingService` 클래스 안에, 클래스 정의 하단에 다음 메서드를 붙여넣습니다.
 
-<docs-code header="Submit method in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/housing.service.ts" visibleLines="[120,124]"/>
+<docs-code header="src/app/housing.service.ts의 제출 메서드" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/housing.service.ts" visibleLines="[120,124]"/>
 
-1. Confirm that the app builds without error.
-   Correct any errors before you continue to the next step.
+1. 앱이 오류 없이 빌드되는지 확인합니다.
+   다음 단계로 진행하기 전에 오류를 수정합니다.
    </docs-step>
 
-<docs-step title="Add the form functions to the details page">
-This step adds the code to the details page that handles the form's interactions.
+<docs-step title="상세 페이지에 양식 기능 추가하기">
+이 단계에서는 양식의 상호작용을 처리하는 코드가 상세 페이지에 추가됩니다.
 
-In the **Edit** pane of your IDE, in `src/app/details/details.component.ts`:
+**편집** 창에서 IDE의 `src/app/details/details.component.ts`에서:
 
-1. After the `import` statements at the top of the file, add the following code to import the Angular form classes.
+1. 파일 상단의 `import` 문 이후에 Angular 양식 클래스를 가져오는 다음 코드를 추가합니다.
 
-<docs-code header="Forms imports in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[6]"/>
+<docs-code header="src/app/details/details.component.ts의 양식 가져오기" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[6]"/>
 
-1. In the `DetailsComponent` decorator metadata, update the `imports` property with the following code:
+1. `DetailsComponent` 데코레이터 메타데이터에서 `imports` 속성을 다음 코드로 업데이트합니다.
 
-<docs-code header="imports directive in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[10]"/>
+<docs-code header="src/app/details/details.component.ts의 imports 지시문" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[10]"/>
 
-1. In the `DetailsComponent` class, before the `constructor()` method, add the following code to create the form object.
+1. `DetailsComponent` 클래스에서 `constructor()` 메서드 전에 양식 객체를 생성하는 다음 코드를 추가합니다.
 
-   <docs-code header="template directive in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[53,57]"/>
+   <docs-code header="src/app/details/details.component.ts의 템플릿 지시문" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[53,57]"/>
 
-   In Angular, `FormGroup` and `FormControl` are types that enable you to build forms. The `FormControl` type can provide a default value and shape the form data. In this example `firstName` is a `string` and the default value is empty string.
+   Angular에서 `FormGroup`과 `FormControl`은 양식을 생성할 수 있게 해주는 타입입니다. `FormControl` 타입은 기본 값을 제공하고 양식 데이터를 형성할 수 있습니다. 이 예제에서는 `firstName`이 `string`이며 기본 값은 빈 문자열입니다.
 
-1. In the `DetailsComponent` class, after the `constructor()` method, add the following code to handle the **Apply now** click.
+1. `DetailsComponent` 클래스에서 `constructor()` 메서드 이후에 **지금 신청하기** 클릭을 처리하는 다음 코드를 추가합니다.
 
-   <docs-code header="template directive in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[63,69]"/>
+   <docs-code header="src/app/details/details.component.ts의 템플릿 지시문" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[63,69]"/>
 
-   This button does not exist yet - you will add it in the next step. In the above code, the `FormControl`s may return `null`. This code uses the nullish coalescing operator to default to empty string if the value is `null`.
+   이 버튼은 아직 존재하지 않습니다 - 다음 단계에서 추가할 것입니다. 위 코드에서 `FormControl`은 `null`을 반환할 수 있습니다. 이 코드는 값이 `null`일 경우 빈 문자열로 기본값을 설정하기 위해 nullish 병합 연산자를 사용합니다.
 
-1. Confirm that the app builds without error.
-   Correct any errors before you continue to the next step.
+1. 앱이 오류 없이 빌드되는지 확인합니다.
+   다음 단계로 진행하기 전에 오류를 수정합니다.
    </docs-step>
 
-<docs-step title="Add the form's markup to the details page">
-This step adds the markup to the details page that displays the form.
+<docs-step title="상세 페이지에 양식의 마크업 추가하기">
+이 단계에서는 양식의 마크업을 상세 페이지에 추가하여 양식을 표시합니다.
 
-In the **Edit** pane of your IDE, in `src/app/details/details.component.ts`:
+**편집** 창에서 IDE의 `src/app/details/details.component.ts`에서:
 
-1. In the `DetailsComponent` decorator metadata, update the `template` HTML to match the following code to add the form's markup.
+1. `DetailsComponent` 데코레이터 메타데이터에서 다음 코드와 일치하도록 `template` HTML을 업데이트하여 양식의 마크업을 추가합니다.
 
-   <docs-code header="template directive in src/app/details/details.component.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[11,46]"/>
+   <docs-code header="src/app/details/details.component.ts의 템플릿 지시문" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.component.ts" visibleLines="[11,46]"/>
 
-   The template now includes an event handler `(submit)="submitApplication()"`. Angular uses parentheses syntax around the event name to define events in the template code. The code on the right hand side of the equals sign is the code that should be executed when this event is triggered. You can bind to browser events and custom events.
+   이제 템플릿에는 이벤트 핸들러 `(submit)="submitApplication()"`가 포함되어 있습니다. Angular는 템플릿 코드에서 이벤트를 정의하기 위해 이벤트 이름 주위에 괄호 구문을 사용합니다. 등호 오른쪽의 코드는 이 이벤트가 발생할 때 실행되어야 하는 코드입니다. 브라우저 이벤트와 사용자 정의 이벤트에 바인딩할 수 있습니다.
 
-1. Confirm that the app builds without error.
-Correct any errors before you continue to the next step.
+1. 앱이 오류 없이 빌드되는지 확인합니다.
+   다음 단계로 진행하기 전에 오류를 수정합니다.
 
-<img alt="details page with a form for applying to live at this location" src="assets/images/tutorials/first-app/homes-app-lesson-12-step-3.png">
+<img alt="이 위치에 살기 위한 신청 양식이 있는 상세 페이지" src="assets/images/tutorials/first-app/homes-app-lesson-12-step-3.png">
 
 </docs-step>
 
-<docs-step title="Test your app's new form">
-This step tests the new form to see that when the form data is submitted to the app, the form data appears in the console log.
-
-1. In the **Terminal** pane of your IDE, run `ng serve`, if it isn't already running.
-1. In your browser, open your app at `http://localhost:4200`.
-1. Right click on the app in the browser and from the context menu, choose **Inspect**.
-1. In the developer tools window, choose the **Console** tab.
-   Make sure that the developer tools window is visible for the next steps
-1. In your app:
-   1. Select a housing location and click **Learn more**, to see details about the house.
-   1. In the house's details page, scroll to the bottom to find the new form.
-   1. Enter data into the form's fields - any data is fine.
-   1. Choose **Apply now** to submit the data.
-1. In the developer tools window, review the log output to find your form data.
+<docs-step title="앱의 새로운 양식 테스트하기">
+이 단계에서는 양식 데이터가 앱에 제출될 때 콘솔 로그에 양식 데이터가 표시되는지 확인하기 위해 새로운 양식을 테스트합니다.
+
+1. IDE의 **터미널** 창에서 `ng serve`를 실행합니다. 이미 실행 중이 아닌 경우.
+1. 브라우저에서 `http://localhost:4200`에서 앱을 엽니다.
+1. 브라우저에서 앱을 오른쪽 클릭하고 컨텍스트 메뉴에서 **검사**를 선택합니다.
+1. 개발자 도구 창에서 **콘솔** 탭을 선택합니다.
+   다음 단계에 대비해 개발자 도구 창이 표시되는지 확인하세요.
+1. 앱에서:
+   1. 주택 위치를 선택하고 **자세히 알아보기**를 클릭하여 주택 세부정보를 봅니다.
+   1. 주택 세부정보 페이지에서 하단으로 스크롤하여 새 양식을 찾습니다.
+   1. 양식 필드에 데이터를 입력합니다 - 아무 데이터나 괜찮습니다.
+   1. **지금 신청하기**를 선택하여 데이터를 제출합니다.
+1. 개발자 도구 창에서 로그 출력을 검토하여 양식 데이터를 찾습니다.
    </docs-step>
 
 </docs-workflow>
 
-Summary: In this lesson, you updated your app to add a form using Angular's forms feature, and connect the data captured in the form to a component using an event handler.
+요약: 이 레슨에서는 Angular의 양식 기능을 사용하여 양식을 추가하고, 양식에서 캡처된 데이터를 이벤트 핸들러를 사용하여 구성 요소에 연결하는 방법을 업데이트했습니다.
 
-For more information about the topics covered in this lesson, visit:
+이 레슨에서 다룬 주제에 대한 자세한 내용은 다음을 방문하세요:
 
 <docs-pill-row>
-  <docs-pill href="guide/forms" title="Angular Forms"/>
-  <docs-pill href="guide/templates/event-listeners" title="Event Handling"/>
-</docs-pill-row>
+  <docs-pill href="guide/forms" title="Angular 양식"/>
+  <docs-pill href="guide/templates/event-listeners" title="이벤트 처리"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/13-search/README.md b/adev/src/content/tutorials/first-app/steps/13-search/README.md
index 9a1ab317ff5c..f5698c732bf9 100644
--- a/adev/src/content/tutorials/first-app/steps/13-search/README.md
+++ b/adev/src/content/tutorials/first-app/steps/13-search/README.md
@@ -1,85 +1,85 @@
-# Add the search feature to your app
+# 앱에 검색 기능 추가하기
 
-This tutorial lesson demonstrates how to add a search functionality to your Angular app.
+이번 튜토리얼 수업에서는 Angular 앱에 검색 기능을 추가하는 방법을 보여줍니다.
 
-The app will enable users to search through the data provided by your app and display only the results that match the entered term.
+이 앱은 사용자가 앱에서 제공하는 데이터를 검색하고 입력한 용어와 일치하는 결과만 표시할 수 있도록 합니다.
 
 <docs-video src="https://www.youtube.com/embed/5K10oYJ5Y-E?si=TiuNKx_teR9baO7k&amp;start=457"/>
 
-IMPORTANT: We recommend using your local environment for this step of the tutorial.
+중요: 이 튜토리얼 단계에서는 로컬 환경을 사용하는 것을 권장합니다.
 
-## What you'll learn
+## 배울 내용
 
-- Your app will use data from a form to search for matching housing locations
-- Your app will display only the matching housing locations
+- 앱은 양식의 데이터를 사용하여 일치하는 주택 위치를 검색합니다.
+- 앱은 일치하는 주택 위치만 표시합니다.
 
 <docs-workflow>
 
-<docs-step title="Update the home component properties">
-In this step, you'll update the `HomeComponent` class to store data in a new array property that you will use for filtering.
+<docs-step title="홈 컴포넌트 속성 업데이트">
+이 단계에서는 `HomeComponent` 클래스를 업데이트하여 필터링에 사용할 새 배열 속성에 데이터를 저장합니다.
 
-1. In `src/app/home/home.component.ts`, add new property to the class called `filteredLocationList`.
+1. `src/app/home/home.component.ts`에서 클래스에 `filteredLocationList`라는 새 속성을 추가합니다.
 
-   <docs-code header="Add the filtered results property" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts" visibleLines="[30]"/>
+   <docs-code header="필터된 결과 속성 추가" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts" visibleLines="[30]"/>
 
-   The `filteredLocationList` hold the values that match the search criteria entered by the user.
+   `filteredLocationList`는 사용자가 입력한 검색 기준과 일치하는 값을 보관합니다.
 
-1. The `filteredLocationList` should contain the total set of housing locations values by default when the page loads. Update the `constructor` for the `HomeComponent` to set the value.
+1. 페이지가 로드될 때 기본적으로 전체 주택 위치 값 세트를 포함해야 합니다. `HomeComponent`의 `constructor`를 업데이트하여 값을 설정합니다.
 
-<docs-code header="Set the value of filteredLocationList" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts" visibleLines="[31,34]"/>
+<docs-code header="filteredLocationList의 값 설정" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts" visibleLines="[31,34]"/>
 
 </docs-step>
 
-<docs-step title="Update the home component template">
-The `HomeComponent` already contains an input field that you will use to capture input from the user. That string text will be used to filter the results.
+<docs-step title="홈 컴포넌트 템플릿 업데이트">
+`HomeComponent`는 이미 사용자의 입력을 캡처하기 위해 사용할 입력 필드를 포함하고 있습니다. 이 문자열 텍스트는 결과를 필터링하는 데 사용됩니다.
 
-1. Update the `HomeComponent` template to include a template variable in the `input` element called `#filter`.
+1. `HomeComponent` 템플릿을 업데이트하여 `input` 요소에 `#filter`라는 템플릿 변수를 포함합니다.
 
-   <docs-code header="Add a template variable to HomeComponent's template" language="html">
-       <input type="text" placeholder="Filter by city" #filter>
+   <docs-code header="HomeComponent의 템플릿에 템플릿 변수 추가" language="html">
+       <input type="text" placeholder="도시별 필터링" #filter>
    </docs-code>
 
-   This example uses a [template reference variable](guide/templates) to get access to the `input` element as its value.
+   이 예제는 [템플릿 참조 변수](guide/templates)를 사용하여 해당 값의 `input` 요소에 접근합니다.
 
-1. Next, update the component template to attach an event handler to the "Search" button.
+1. 다음으로, "검색" 버튼에 이벤트 핸들러를 연결하도록 컴포넌트 템플릿을 업데이트합니다.
 
-   <docs-code header="Bind the click event" language="html">
-       <button class="primary" type="button" (click)="filterResults(filter.value)">Search</button>
+   <docs-code header="클릭 이벤트 바인딩" language="html">
+       <button class="primary" type="button" (click)="filterResults(filter.value)">검색</button>
    </docs-code>
 
-   By binding to the `click` event on the `button` element, you are able to call the `filterResults` function. The argument to the function is the `value` property of the `filter` template variable. Specifically, the `.value` property from the `input` HTML element.
+   `button` 요소의 `click` 이벤트에 바인딩함으로써 `filterResults` 함수를 호출할 수 있습니다. 함수의 인수는 `filter` 템플릿 변수의 `value` 속성입니다. 구체적으로, `input` HTML 요소의 `.value` 속성입니다.
 
-1. The last template update is to the `ngFor` directive. Update the `ngFor` value to iterate over values from the `filteredLocationList` array.
+1. 마지막 템플릿 업데이트는 `ngFor` 지시어입니다. `ngFor` 값을 `filteredLocationList` 배열의 값을 반복하도록 업데이트합니다.
 
-<docs-code header="Update the ngFor directive value" language="html">
+<docs-code header="ngFor 지시어 값 업데이트" language="html">
     <app-housing-location *ngFor="let housingLocation of filteredLocationList" [housingLocation]="housingLocation"></app-housing-location>
 </docs-code>
 
 </docs-step>
 
-<docs-step title="Implement the event handler function">
-The template has been updated to bind the `filterResults` function to the `click` event. Next, your task is to implement the `filterResults` function in the `HomeComponent` class.
+<docs-step title="이벤트 핸들러 함수 구현">
+템플릿은 `filterResults` 함수를 `click` 이벤트에 바인딩하도록 업데이트되었습니다. 다음으로, `HomeComponent` 클래스에서 `filterResults` 함수를 구현하는 작업을 수행합니다.
 
-1. Update the `HomeComponent` class to include the implementation of the `filterResults` function.
+1. `HomeComponent` 클래스를 업데이트하여 `filterResults` 함수 구현을 추가합니다.
 
-   <docs-code header="Add the filterResults function implementation" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts" visibleLines="[35,44]"/>
+   <docs-code header="filterResults 함수 구현 추가" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts" visibleLines="[35,44]"/>
 
-   This function uses the `String` `filter` function to compare the value of the `text` parameter against the `housingLocation.city` property. You can update this function to match against any property or multiple properties for a fun exercise.
+   이 함수는 `String` `filter` 함수를 사용하여 `text` 매개변수의 값을 `housingLocation.city` 속성과 비교합니다. 재미있는 연습을 위해 이 함수를 수정하여 모든 속성 또는 여러 속성과 일치하도록 할 수 있습니다.
 
-1. Save your code.
+1. 코드를 저장합니다.
 
-1. Refresh the browser and confirm that you can search the housing location data by city when you click the "Search" button after entering text.
+1. 브라우저를 새로 고치고 텍스트를 입력한 후 "검색" 버튼을 클릭하여 도시별로 주택 위치 데이터를 검색할 수 있는지 확인합니다.
 
-<img alt="filtered search results based on user input" src="assets/images/tutorials/first-app/homes-app-lesson-13-step-3.png">
+<img alt="사용자 입력에 따라 필터링된 검색 결과" src="assets/images/tutorials/first-app/homes-app-lesson-13-step-3.png">
 </docs-step>
 
 </docs-workflow>
 
-Summary: In this lesson, you updated your app to use template variables to interact with template values, and add search functionality using event binding and array functions.
+요약: 이번 수업에서는 앱을 업데이트하여 템플릿 변수로 템플릿 값과 상호작용하고, 이벤트 바인딩 및 배열 함수를 사용하여 검색 기능을 추가했습니다.
 
-For more information about the topics covered in this lesson, visit:
+이번 수업에서 다룬 주제에 대한 자세한 정보를 보려면 다음을 방문하십시오:
 
 <docs-pill-row>
-  <docs-pill href="guide/templates" title="Template Variables"/>
-  <docs-pill href="guide/templates/event-listeners" title="Event Handling"/>
-</docs-pill-row>
+  <docs-pill href="guide/templates" title="템플릿 변수"/>
+  <docs-pill href="guide/templates/event-listeners" title="이벤트 처리"/>
+</docs-pill-row>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/first-app/steps/14-http/README.md b/adev/src/content/tutorials/first-app/steps/14-http/README.md
index 6a4a58fe3557..f43474304f33 100644
--- a/adev/src/content/tutorials/first-app/steps/14-http/README.md
+++ b/adev/src/content/tutorials/first-app/steps/14-http/README.md
@@ -1,30 +1,30 @@
-# Add HTTP communication to your app
+# 애플리케이션에 HTTP 통신 추가하기
 
-This tutorial demonstrates how to integrate HTTP and an API into your app.
+이 튜토리얼은 애플리케이션에 HTTP와 API를 통합하는 방법을 보여줍니다.
 
-Up until this point your app has read data from a static array in an Angular service. The next step is to use a JSON server that your app will communicate with over HTTP. The HTTP request will simulate the experience of working with data from a server.
+지금까지 애플리케이션은 Angular 서비스의 정적 배열에서 데이터를 읽어왔습니다. 다음 단계는 애플리케이션이 HTTP를 통해 통신할 JSON 서버를 사용하는 것입니다. HTTP 요청은 서버의 데이터 작업을 시뮬레이션합니다.
 
 <docs-video src="https://www.youtube.com/embed/5K10oYJ5Y-E?si=TiuNKx_teR9baO7k"/>
 
-IMPORTANT: We recommend using your local environment for this step of the tutorial.
+중요: 이 튜토리얼의 이 단계에서는 로컬 환경을 사용하는 것을 권장합니다.
 
-## What you'll learn
+## 배울 내용
 
-Your app will use data from a JSON server
+애플리케이션은 JSON 서버의 데이터를 사용합니다.
 
 <docs-workflow>
 
-<docs-step title="Configure the JSON server">
-JSON Server is an open source tool used to create mock REST APIs. You'll use it to serve the housing location data that is currently stored in the housing service.
+<docs-step title="JSON 서버 구성하기">
+JSON 서버는 모의 REST API를 생성하는 데 사용되는 오픈 소스 도구입니다. 현재 주택 서비스에 저장된 주택 위치 데이터를 제공하는 데 사용할 것입니다.
 
-1. Install `json-server` from npm by using the following command.
+1. 다음 명령어를 사용하여 npm에서 `json-server`를 설치합니다.
     <docs-code language="bash">
         npm install -g json-server
     </docs-code>
 
-1. In the root directory of your project, create a file called `db.json`. This is where you will store the data for the `json-server`.
+1. 프로젝트의 루트 디렉토리에 `db.json`이라는 파일을 만듭니다. 여기서 `json-server`의 데이터를 저장합니다.
 
-1. Open `db.json` and copy the following code into the file
+1. `db.json`을 열고 다음 코드를 파일에 복사합니다.
     <docs-code language="json">
         {
             "locations": [
@@ -132,74 +132,74 @@ JSON Server is an open source tool used to create mock REST APIs. You'll use it
         }
     </docs-code>
 
-1. Save this file.
+1. 이 파일을 저장합니다.
 
-1. Time to test your configuration. From the command line, at the root of your project run the following commands.
+1. 구성을 테스트할 시간입니다. 명령줄에서 프로젝트의 루트에서 다음 명령어를 실행합니다.
 
     <docs-code language="bash">
         json-server --watch db.json
     </docs-code>
 
-1. In your web browser, navigate to the `http://localhost:3000/locations` and confirm that the response includes the data stored in `db.json`.
+1. 웹 브라우저에서 `http://localhost:3000/locations`로 이동하여 응답에 `db.json`에 저장된 데이터가 포함되어 있는지 확인합니다.
 
-If you have any trouble with your configuration, you can find more details in the [official documentation](https://www.npmjs.com/package/json-server).
+구성에 문제가 있는 경우 [공식 문서](https://www.npmjs.com/package/json-server)에서 더 많은 정보를 찾을 수 있습니다.
 </docs-step>
 
-<docs-step title="Update service to use web server instead of local array">
-The data source has been configured, the next step is to update your web app to connect to it use the data.
+<docs-step title="로컬 배열 대신 웹 서버를 사용하도록 서비스 업데이트하기">
+데이터 출처가 구성되었으므로 다음 단계는 웹 애플리케이션을 업데이트하여 이를 연결하는 것입니다.
 
-1. In `src/app/housing.service.ts`, make the following changes:
+1. `src/app/housing.service.ts`에서 다음과 같은 변경을 합니다:
 
-    1. Update the code to remove `housingLocationList` property and the array containing the data.
+    1. `housingLocationList` 속성과 데이터를 포함하는 배열을 제거하도록 코드를 업데이트합니다.
 
-    1. Add a string property called `url` and set its value to `'http://localhost:3000/locations'`
+    1. `url`이라는 문자열 속성을 추가하고 그 값을 `'http://localhost:3000/locations'`으로 설정합니다.
 
         <docs-code language="javascript">
         url = 'http://localhost:3000/locations';
         </docs-code>
 
-        This code will result in errors in the rest of the file because it depends on the `housingLocationList` property. We're going to update the service methods next.
+        이 코드는 나머지 파일에서 `housingLocationList` 속성에 의존하기 때문에 오류를 발생시킵니다. 이제 서비스 메서드를 업데이트할 것입니다.
 
-    1. Update the `getAllHousingLocations` function to make a call to the web server you configured.
+    1. `getAllHousingLocations` 함수를 업데이트하여 구성한 웹 서버에 호출하도록 합니다.
 
         <docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[10,13]"/>
 
-        The code now uses asynchronous code to make a **GET** request over HTTP.
+        이제 이 코드는 HTTP를 통해 **GET** 요청을 수행하기 위해 비동기 코드를 사용합니다.
 
-        HELPFUL: For this example, the code uses `fetch`. For more advanced use cases consider using `HttpClient` provided by Angular.
+        도움이 되는 정보: 이 예제에서는 `fetch`를 사용합니다. 더 고급 사용 사례의 경우 Angular에서 제공하는 `HttpClient`를 사용하는 것을 고려하십시오.
 
-    1. Update the `getHousingLocationsById` function to make a call to the web server you configured.
+    1. `getHousingLocationsById` 함수를 업데이트하여 구성한 웹 서버에 호출하도록 합니다.
 
         <docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[15,18]"/>
 
-    1. Once all the updates are complete, your updated service should match the following code.
+    1. 모든 업데이트가 완료되면 업데이트된 서비스는 다음 코드와 일치해야 합니다.
 
-        <docs-code header="Final version of housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[1,24]" />
+        <docs-code header="housing.service.ts의 최종 버전" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[1,24]" />
 
 </docs-step>
 
-<docs-step title="Update the components to use asynchronous calls to the housing service">
-The server is now reading data from the HTTP request but the components that rely on the service now have errors because they were programmed to use the synchronous version of the service.
+<docs-step title="주택 서비스에 비동기 호출을 사용하도록 구성 요소 업데이트하기">
+서버는 이제 HTTP 요청에서 데이터를 읽고 있지만, 서비스에 의존하는 구성 요소는 동기 버전을 사용하도록 프로그래밍되어 있었기 때문에 오류가 발생합니다.
 
-1. In `src/app/home/home.component.ts`, update the `constructor` to use the new asynchronous version of the `getAllHousingLocations` method.
+1. `src/app/home/home.component.ts`에서 `constructor`를 업데이트하여 새로운 비동기 버전의 `getAllHousingLocations` 메서드를 사용하도록 합니다.
 
     <docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.component.ts" visibleLines="[32,37]"/>
 
-1. In `src/app/details/details.component.ts`, update the `constructor` to use the new asynchronous version of the `getHousingLocationById` method.
+1. `src/app/details/details.component.ts`에서 `constructor`를 업데이트하여 새로운 비동기 버전의 `getHousingLocationById` 메서드를 사용하도록 합니다.
 
     <docs-code header="" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/details/details.component.ts" visibleLines="[61,66]"/>
 
-1. Save your code.
+1. 코드를 저장합니다.
 
-1. Open the application in the browser and confirm that it runs without any errors.
+1. 브라우저에서 애플리케이션을 열고 오류 없이 실행되는지 확인합니다.
 </docs-step>
 
 </docs-workflow>
 
-Note: This lesson relies on the `fetch` browser API. For the support of interceptors, please refer to the [Http Client documentation](/guide/http)
+참고: 이 강의는 `fetch` 브라우저 API에 의존합니다. 인터셉터 지원에 대한 자세한 내용은 [Http Client 문서](/guide/http)를 참조하십시오.
 
-Summary: In this lesson, you updated your app to use a local web server (`json-server`), and use asynchronous service methods to retrieve data.
+요약: 이 강의에서는 로컬 웹 서버(`json-server`)를 사용하도록 애플리케이션을 업데이트하고 비동기 서비스 메서드를 사용하여 데이터를 검색하도록 했습니다.
 
-Congratulations! You've successfully completed this tutorial and are ready to continue your journey with building even more complex Angular Apps.
+축하합니다! 이 튜토리얼을 성공적으로 완료했으며, 더 복잡한 Angular Apps를 구축하는 여정을 계속할 준비가 되었습니다.
 
-If you would like to learn more, please consider completing some of Angular's other developer [tutorials](tutorials) and [guides](overview).
+더 배우고 싶다면 Angular의 다른 개발자 [튜토리얼](tutorials)과 [가이드](overview)을 완료하는 것을 고려해 보세요.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/home.md b/adev/src/content/tutorials/home.md
index 0b4c2b250185..13fcbc6dabe4 100644
--- a/adev/src/content/tutorials/home.md
+++ b/adev/src/content/tutorials/home.md
@@ -1,15 +1,15 @@
-# Tutorials
+# 튜토리얼
 
-Welcome to the Angular tutorials! These tutorials will guide you through the core concepts of the framework, and get you started building performant, scalable apps.
+Angular 튜토리얼에 오신 것을 환영합니다! 이 튜토리얼은 프레임워크의 핵심 개념을 안내하고, 성능이 뛰어나고 확장 가능한 앱을 구축하는 방법을 시작하도록 도와줍니다.
 
 <docs-card-container>
-  <docs-card title="Learn Angular in your browser" link="Start coding" href="tutorials/learn-angular" imgSrc="adev/src/assets/images/learn-angular-browser.svg">
-    via the Playground
+  <docs-card title="브라우저에서 Angular 배우기" link="코딩 시작" href="tutorials/learn-angular" imgSrc="adev/src/assets/images/learn-angular-browser.svg">
+    Playground를 통해
   </docs-card>
-  <docs-card title="Build your first Angular app locally" link="Start coding" href="tutorials/first-app" imgSrc="adev/src/assets/images/learn-angular-local.svg">
-    via npm
+  <docs-card title="로컬에서 첫 번째 Angular 앱 구축" link="코딩 시작" href="tutorials/first-app" imgSrc="adev/src/assets/images/learn-angular-local.svg">
+    npm을 통해
   </docs-card>
-  <docs-card title="Deferrable views" link="Start coding" href="tutorials/deferrable-views" imgSrc="adev/src/assets/images/ang_illustrations-04.svg">
-    via the Playground
+  <docs-card title="지연 가능한 뷰" link="코딩 시작" href="tutorials/deferrable-views" imgSrc="adev/src/assets/images/ang_illustrations-04.svg">
+    Playground를 통해
   </docs-card>
-</docs-card-container>
+</docs-card-container>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/intro/README.md b/adev/src/content/tutorials/learn-angular/intro/README.md
index 799277135f8e..faa526447bdb 100644
--- a/adev/src/content/tutorials/learn-angular/intro/README.md
+++ b/adev/src/content/tutorials/learn-angular/intro/README.md
@@ -1,13 +1,13 @@
-# Welcome to the Angular tutorial
+# Angular 튜토리얼에 오신 것을 환영합니다
 
-This interactive tutorial will teach you the basic building blocks to start building great apps with Angular.
+이 인터랙티브 튜토리얼은 Angular로 훌륭한 앱을 만들기 시작하는 데 필요한 기본 구성 요소를 가르쳐 줍니다.
 
-## How to use this tutorial
+## 이 튜토리얼을 사용하는 방법
 
-You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Angular.
+Angular를 이해하기 위해서는 HTML, CSS 및 JavaScript에 대한 기본적인 친숙함이 필요합니다.
 
-Each step represents a concept in Angular. You can do one, or all of them.
+각 단계는 Angular의 개념을 나타냅니다. 하나 또는 모두 수행할 수 있습니다.
 
-If you get stuck, click "Reveal answer" at the top.
+막히면 상단의 "정답 보기"를 클릭하세요.
 
-Alright, let's [get started](/tutorials/learn-angular/1-components-in-angular).
+좋습니다, [시작하겠습니다](/tutorials/learn-angular/1-components-in-angular).
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.md b/adev/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.md
index e29a796943d2..96ff08aa3c15 100644
--- a/adev/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.md
@@ -1,21 +1,21 @@
-# Components in Angular
+# Angular의 구성 요소
 
-Components are the foundational building blocks for any Angular application. Each component has three parts:
+구성 요소는 모든 Angular 애플리케이션의 기본 빌딩 블록입니다. 각 구성 요소는 세 부분으로 나뉩니다:
 
-* TypeScript class
-* HTML template
-* CSS styles
+* TypeScript 클래스
+* HTML 템플릿
+* CSS 스타일
 
-In this activity, you'll learn how to update the template and styles of a component.
+이 활동에서는 구성 요소의 템플릿과 스타일을 업데이트하는 방법을 배웁니다.
 
 <hr />
 
-This is a great opportunity for you to get started with Angular.
+Angular를 시작할 수 있는 좋은 기회입니다.
 
 <docs-workflow>
 
-<docs-step title="Update the component template">
-Update the `template` property to read `Hello Universe`
+<docs-step title="구성 요소 템플릿 업데이트">
+`template` 속성을 `Hello Universe`로 읽도록 업데이트합니다.
 
 ```ts
 template: `
@@ -23,11 +23,11 @@ template: `
 `,
 ```
 
-When you changed the HTML template, the preview updated with your message. Let's go one step further: change the color of the text.
+HTML 템플릿을 변경했을 때, 미리보기가 여러분의 메시지로 업데이트되었습니다. 한 단계 더 나아가 보겠습니다: 텍스트의 색상을 변경합니다.
 </docs-step>
 
-<docs-step title="Update the component styles">
-Update the styles value and change the `color` property from `blue` to `#a144eb`.
+<docs-step title="구성 요소 스타일 업데이트">
+스타일 값을 업데이트하고 `color` 속성을 `blue`에서 `#a144eb`로 변경합니다.
 
 ```ts
 styles: `
@@ -37,9 +37,9 @@ styles: `
 `,
 ```
 
-When you check the preview, you'll find that the text color will be changed.
+미리보기를 확인하면 텍스트 색상이 변경된 것을 발견할 수 있습니다.
 </docs-step>
 
 </docs-workflow>
 
-In Angular, you can use all the browser supported CSS and HTML that's available. If you'd like, you can store your template and styles in separate files.
+Angular에서는 사용할 수 있는 모든 브라우저 지원 CSS 및 HTML을 사용할 수 있습니다. 원하시면, 템플릿과 스타일을 별도의 파일에 저장할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md
index d63b8a5b9eaa..bc414e52e4c1 100644
--- a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md
@@ -1,20 +1,20 @@
-# Deferrable Views
+# 지연 가능한 뷰
 
-Sometimes in app development, you end up with a lot of components that you need to reference in your app, but some of those don't need to be loaded right away for various reasons.
+앱 개발 중에는 앱에서 참조해야 하는 많은 구성 요소가 있지만, 그 중 일부는 여러 가지 이유로 즉시 로드할 필요가 없을 때가 있습니다.
 
-Maybe they are below the visible fold or are heavy components that aren't interacted with until later. In that case, we can load some of those resources later with deferrable views.
+아마도 그것들은 시각적으로 보이지 않는 영역 아래에 있거나 나중에 사용되지 않는 무거운 구성 요소일 수 있습니다. 이러한 경우, 지연 가능한 뷰를 사용하여 이러한 리소스의 일부를 나중에 로드할 수 있습니다.
 
-In this activity, you'll learn how to use deferrable views to defer load a section of your component template.
+이번 활동에서는 구성 요소 템플릿의 일부를 지연 로드하기 위해 지연 가능한 뷰를 사용하는 방법을 배우게 됩니다.
 
 <hr>
 
 <docs-workflow>
 
-<docs-step title="Add a `@defer` block around the comments component">
+<docs-step title="댓글 구성 요소 주위에 `@defer` 블록 추가">
 
-In your app, the blog post page has a comment component after the post details.
+앱에서 블로그 게시물 페이지는 게시물 세부 사항 뒤에 댓글 구성 요소가 있습니다.
 
-Wrap the comment component with a `@defer` block to defer load it.
+댓글 구성 요소를 감싸는 `@defer` 블록을 추가하여 로드를 지연시킵니다.
 
 ```angular-html
 @defer {
@@ -22,59 +22,59 @@ Wrap the comment component with a `@defer` block to defer load it.
 }
 ```
 
-The code above is an example of how to use a basic `@defer` block. By default `@defer` will load the `comments` component when the browser is idle.
+위 코드는 기본 `@defer` 블록을 사용하는 방법의 예입니다. 기본적으로 `@defer`는 브라우저가 유휴 상태일 때 `comments` 구성 요소를 로드합니다.
 
 </docs-step>
 
-<docs-step title="Add a placeholder">
+<docs-step title="플레이스홀더 추가">
 
-Add a `@placeholder` block to the `@defer` block. The `@placeholder` block is where you put html that will show before the deferred loading starts. The content in `@placeholder` blocks is eagerly loaded.
+`@defer` 블록에 `@placeholder` 블록을 추가합니다. `@placeholder` 블록은 지연 로딩이 시작되기 전에 표시될 HTML을 넣는 곳입니다. `@placeholder` 블록의 내용은 즉시 로드됩니다.
 
 <docs-code language="angular-html" highlight="[3,4,5]">
 @defer {
   <comments />
 } @placeholder {
-  <p>Future comments</p>
+  <p>미래 댓글</p>
 }
 </docs-code>
 
 </docs-step>
 
-<docs-step title="Add a loading block">
+<docs-step title="로딩 블록 추가">
 
-Add a `@loading` block to the `@defer` block. The `@loading` block is where you put html that will show _while_ the deferred content is actively being fetched, but hasn't finished yet. The content in `@loading` blocks is eagerly loaded.
+`@defer` 블록에 `@loading` 블록을 추가합니다. `@loading` 블록은 지연된 콘텐츠가 현재 가져오는 동안 표시될 HTML을 넣는 장소입니다. 아직 완료되지 않은 상태입니다. `@loading` 블록의 내용은 즉시 로드됩니다.
 
 <docs-code language="angular-html" highlight="[5,6,7]">
 @defer {
   <comments />
 } @placeholder {
-  <p>Future comments</p>
+  <p>미래 댓글</p>
 } @loading {
-  <p>Loading comments...</p>
+  <p>댓글 로딩 중...</p>
 }
 </docs-code>
 
 </docs-step>
 
-<docs-step title="Add a minimum duration">
+<docs-step title="최소 지속 시간 추가">
 
-Both `@placeholder` and `@loading` sections have optional parameters to prevent flickering from occurring when loading happens quickly. `@placeholder` has `minimum` and `@loading` has `minimum` and `after`. Add a `minimum` duration to the `@loading` block so it will be rendered for at least 2 seconds.
+`@placeholder` 및 `@loading` 섹션 모두 로딩이 빠르게 이루어질 때 깜박임이 발생하지 않도록 방지하는 선택적 매개변수가 있습니다. `@placeholder`는 `minimum`을 가지고 있으며, `@loading`은 `minimum`과 `after`를 가집니다. `@loading` 블록에 최소 지속 시간을 추가하여 최소 2초 동안 렌더링되도록 합니다.
 
 <docs-code language="angular-html" highlight="[5]">
 @defer {
   <comments />
 } @placeholder {
-  <p>Future comments</p>
+  <p>미래 댓글</p>
 } @loading (minimum 2s) {
-  <p>Loading comments...</p>
+  <p>댓글 로딩 중...</p>
 }
 </docs-code>
 
 </docs-step>
 
-<docs-step title="Add a viewport trigger">
+<docs-step title="뷰포트 트리거 추가">
 
-Deferrable views have a number of trigger options. Add a viewport trigger so the content will defer load once it enters the viewport.
+지연 가능한 뷰에는 여러 트리거 옵션이 있습니다. 콘텐츠가 뷰포트에 들어가면 로드를 지연할 수 있도록 뷰포트 트리거를 추가합니다.
 
 <docs-code language="angular-html" highlight="[1]">
 @defer (on viewport) {
@@ -84,29 +84,29 @@ Deferrable views have a number of trigger options. Add a viewport trigger so the
 
 </docs-step>
 
-<docs-step title="Add content">
+<docs-step title="콘텐츠 추가">
 
-A viewport trigger is best used when you're deferring content that's far enough down the page that it needs to be scrolled to see. So let's add some content to our blog post. You can either write your own, or you can copy the content below and put it inside the `<article>` element.
+뷰포트 트리거는 페이지 아래쪽에 있으며 스크롤해야만 볼 수 있는 콘텐츠를 지연할 때 가장 잘 사용됩니다. 블로그 게시물에 콘텐츠를 추가해 보겠습니다. 본인이 직접 작성하거나 아래의 내용을 복사하여 `<article>` 요소 안에 넣을 수 있습니다.
 
 <docs-code language="html" highlight="[1]">
 <article>
-  <p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p>
-  <p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted. In fact, I think I'll say these exact same things again a few times.</p>
-  <p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p>
-  <p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted. In fact, I think I'll say these exact same things again a few times.</p>
-  <p>Angular is my favorite framework, and this is why. Angular has the coolest deferrable view feature that makes defer loading content the easiest and most ergonomic it could possibly be. The Angular community is also filled with amazing contributors and experts that create excellent content. The community is welcoming and friendly, and it really is the best community out there.</p>
-  <p>I can't express enough how much I enjoy working with Angular. It offers the best developer experience I've ever had. I love that the Angular team puts their developers first and takes care to make us very happy. They genuinely want Angular to be the best framework it can be, and they're doing such an amazing job at it, too. This statement comes from my heart and is not at all copied and pasted.</p>
+  <p>Angular는 내가 가장 좋아하는 프레임워크이며, 그 이유는 이렇습니다. Angular는 콘텐츠를 지연 로드할 때 가장 쉽고 인체공학적으로 만들 수 있는 최고의 지연 가능한 뷰 기능을 가지고 있습니다. Angular 커뮤니티는 훌륭한 기여자와 전문가로 가득 차 있으며, 훌륭한 콘텐츠를 만듭니다. 이 커뮤니티는 환영하고 친근하며 정말 최고의 커뮤니티입니다.</p>
+  <p>Angular로 작업하는 것이 얼마나 즐거운지 충분히 표현할 수 없습니다. 그동안 경험한 최고의 개발자 경험을 제공합니다. Angular 팀이 개발자를 최우선으로 여기고 우리를 매우 행복하게 하려는 배려가 마음에 듭니다. 그들은 진정으로 Angular가 최상의 프레임워크가 되기를 원하며, 그 일을 정말 잘 해내고 있습니다. 이 말은 제 마음에서 우러나온 것이며, 결코 복사&붙여넣기가 아닙니다. 사실, 나는 같은 말을 몇 번 더 할 것 같습니다.</p>
+  <p>Angular는 내가 가장 좋아하는 프레임워크이며, 그 이유는 이렇습니다. Angular는 콘텐츠를 지연 로드할 때 가장 쉽고 인체공학적으로 만들 수 있는 최고의 지연 가능한 뷰 기능을 가지고 있습니다. Angular 커뮤니티는 훌륭한 기여자와 전문가로 가득 차 있으며, 훌륭한 콘텐츠를 만듭니다. 이 커뮤니티는 환영하고 친근하며 정말 최고의 커뮤니티입니다.</p>
+  <p>Angular로 작업하는 것이 얼마나 즐거운지 충분히 표현할 수 없습니다. 그동안 경험한 최고의 개발자 경험을 제공합니다. Angular 팀이 개발자를 최우선으로 여기고 우리를 매우 행복하게 하려는 배려가 마음에 듭니다. 그들은 진정으로 Angular가 최상의 프레임워크가 되기를 원하며, 그 일을 정말 잘 해내고 있습니다. 이 말은 제 마음에서 우러나온 것이며, 결코 복사&붙여넣기가 아닙니다. 사실, 나는 같은 말을 몇 번 더 할 것 같습니다.</p>
+  <p>Angular는 내가 가장 좋아하는 프레임워크이며, 그 이유는 이렇습니다. Angular는 콘텐츠를 지연 로드할 때 가장 쉽고 인체공학적으로 만들 수 있는 최고의 지연 가능한 뷰 기능을 가지고 있습니다. Angular 커뮤니티는 훌륭한 기여자와 전문가로 가득 차 있으며, 훌륭한 콘텐츠를 만듭니다. 이 커뮤니티는 환영하고 친근하며 정말 최고의 커뮤니티입니다.</p>
+  <p>Angular로 작업하는 것이 얼마나 즐거운지 충분히 표현할 수 없습니다. 그동안 경험한 최고의 개발자 경험을 제공합니다. Angular 팀이 개발자를 최우선으로 여기고 우리를 매우 행복하게 하려는 배려가 마음에 듭니다. 그들은 진정으로 Angular가 최상의 프레임워크가 되기를 원하며, 그 일을 정말 잘 해내고 있습니다. 이 말은 제 마음에서 우러나온 것이며, 결코 복사&붙여넣기가 아닙니다.</p>
 </article>
 </docs-code>
 
-Once you've added this code, now scroll down to see the deferred content load once you scroll it into the viewport.
+이 코드를 추가한 후, 이제 스크롤하여 뷰포트에 들어올 때 지연된 콘텐츠가 로드되는 것을 확인하세요.
 
 </docs-step>
 
 </docs-workflow>
 
-In the activity, you've learned how to use deferrable views in your applications. Great work. 🙌
+이번 활동에서는 애플리케이션에서 지연 가능한 뷰를 사용하는 방법을 배웠습니다. 훌륭한 작업입니다. 🙌
 
-There's even more you can do with them, like different triggers, prefetching, and `@error` blocks.
+그들과 함께 사용할 수 있는 다양한 트리거, 프리패칭 및 `@error` 블록 등 더 많은 기능이 있습니다.
 
-If you would like to learn more, check out the [documentation for Deferrable views](guide/defer).
+자세히 알고 싶다면 [지연 가능한 뷰에 대한 문서](guide/defer)를 확인하세요.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md
index 526fb8b993f0..3fd7e552d284 100644
--- a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md
@@ -1,16 +1,16 @@
-# Optimizing images
+# 이미지 최적화
 
-Images are a big part of many applications, and can be a major contributor to application performance problems, including low [Core Web Vitals](https://web.dev/explore/learn-core-web-vitals) scores.
+이미지는 많은 애플리케이션에서 중요한 부분을 차지하며, 낮은 [Core Web Vitals](https://web.dev/explore/learn-core-web-vitals) 점수를 포함하여 애플리케이션 성능 문제에 주요한 기여자가 될 수 있습니다.
 
-Image optimization can be a complex topic, but Angular handles most of it for you, with the `NgOptimizedImage` directive. In this activity, you'll learn how to use `NgOptimizedImage` to ensure your images are loaded efficiently.
+이미지 최적화는 복잡한 주제가 될 수 있지만, Angular는 `NgOptimizedImage` 지시어를 사용하여 대부분의 작업을 처리합니다. 이 활동에서는 `NgOptimizedImage`를 사용하여 이미지를 효율적으로 로드하는 방법을 배웁니다.
 
 <hr>
 
 <docs-workflow>
 
-<docs-step title="Import the NgOptimizedImage directive">
+<docs-step title="NgOptimizedImage 지시어 가져오기">
 
-In order to leverage the `NgOptimizedImage` directive, first import it from the `@angular/common` library and add it to the component `imports` array.
+`NgOptimizedImage` 지시어를 활용하기 위해서는 먼저 `@angular/common` 라이브러리에서 가져오고 컴포넌트의 `imports` 배열에 추가해야 합니다.
 
 ```ts
 import { NgOptimizedImage } from '@angular/common';
@@ -23,9 +23,9 @@ import { NgOptimizedImage } from '@angular/common';
 
 </docs-step>
 
-<docs-step title="Update the src attribute to be ngSrc">
+<docs-step title="src 속성을 ngSrc로 업데이트">
 
-To enable the `NgOptimizedImage` directive, swap out the `src` attribute for `ngSrc`. This applies for both static image sources (i.e., `src`) and dynamic image sources (i.e., `[src]`).
+`NgOptimizedImage` 지시어를 사용하려면 `src` 속성을 `ngSrc`로 바꿔야 합니다. 이는 정적 이미지 소스(즉, `src`)와 동적 이미지 소스(즉, `[src]`) 모두에 해당합니다.
 
 <docs-code language="angular-ts" highlight="[[9], [13]]">
 import { NgOptimizedImage } from '@angular/common';
@@ -34,11 +34,11 @@ import { NgOptimizedImage } from '@angular/common';
   template: `
     ...
     <li>
-      Static Image:
+      정적 이미지:
       <img ngSrc="/assets/logo.svg" alt="Angular logo" width="32" height="32" />
     </li>
     <li>
-      Dynamic Image:
+      동적 이미지:
       <img [ngSrc]="logoUrl" [alt]="logoAlt" width="32" height="32" />
     </li>
     ...
@@ -49,11 +49,11 @@ import { NgOptimizedImage } from '@angular/common';
 
 </docs-step>
 
-<docs-step title="Add width and height attributes">
+<docs-step title="width와 height 속성 추가">
 
-Note that in the above code example, each image has both `width` and `height` attributes. In order to prevent [layout shift](https://web.dev/articles/cls), the `NgOptimizedImage` directive requires both size attributes on each image.
+위 코드 예제에서 각 이미지에는 `width`와 `height` 속성이 모두 있어야 합니다. [레이아웃 이동](https://web.dev/articles/cls)을 방지하기 위해 `NgOptimizedImage` 지시어는 각 이미지에 대해 두 개의 크기 속성이 필요합니다.
 
-In situations where you can't or don't want to specify a static `height` and `width` for images, you can use [the `fill` attribute](https://web.dev/articles/cls) to tell the image to act like a "background image", filling its containing element:
+정적 `height`와 `width`를 정의할 수 없거나 원하지 않는 경우, 이미지를 "배경 이미지"처럼 작동하도록 요청하는 [`fill` 속성](https://web.dev/articles/cls)을 사용할 수 있습니다:
 
 ```angular-html
 <div class="image-container"> //Container div has 'position: "relative"'
@@ -61,13 +61,13 @@ In situations where you can't or don't want to specify a static `height` and `wi
 </div>
 ```
 
-Note: For the `fill` image to render properly, its parent element must be styled with `position: "relative"`, `position: "fixed"`, or `position: "absolute"`.
+참고: `fill` 이미지가 올바르게 렌더링되려면 부모 요소에 `position: "relative"`, `position: "fixed"`, 또는 `position: "absolute"` 스타일이 적용되어야 합니다.
 
 </docs-step>
 
-<docs-step title="Prioritize important images">
+<docs-step title="중요한 이미지 우선 순위 지정">
 
-One of the most important optimizations for loading performance is to prioritize any image which might be the ["LCP element"](https://web.dev/articles/optimize-lcp), which is the largest on-screen graphical element when the page loads. To optimize your loading times, make sure to add the `priority` attribute to your "hero image" or any other images that you think could be an LCP element.
+로딩 성능을 위한 가장 중요한 최적화 중 하나는 페이지가 로드될 때 가장 큰 화면 그래픽 요소인 ["LCP 요소"](https://web.dev/articles/optimize-lcp)로 간주될 수 있는 이미지를 우선적으로 처리하는 것입니다. 로딩 시간을 최적화하려면 "히어로 이미지" 또는 LCP 요소일 수 있다고 생각되는 이미지에 `priority` 속성을 추가해야 합니다.
 
 ```ts
 <img ngSrc="www.example.com/image.png" height="600" width="800" priority />
@@ -75,9 +75,9 @@ One of the most important optimizations for loading performance is to prioritize
 
 </docs-step>
 
-<docs-step title="Optional: Use an image loader">
+<docs-step title="선택 사항: 이미지 로더 사용">
 
-`NgOptimizedImage` allows you to specify an [image loader](guide/image-optimization#configuring-an-image-loader-for-ngoptimizedimage), which tells the directive how to format URLs for your images. Using a loader allows you to define your images with short, relative URLs:
+`NgOptimizedImage`는 지시어에 이미지의 URL 형식을 지정하는 [이미지 로더](guide/image-optimization#configuring-an-image-loader-for-ngoptimizedimage)를 정의할 수 있게 해줍니다. 로더를 사용하면 짧고 상대적인 URL로 이미지를 정의할 수 있습니다:
 
 ```ts
 providers: [
@@ -85,17 +85,17 @@ providers: [
 ]
 ```
 
-Final URL will be 'https://my.base.url/image.png'
+최종 URL은 'https://my.base.url/image.png'가 됩니다.
 ```angular-html
 <img ngSrc="image.png" height="600" width="800" />
 ```
 
-Image loaders are for more than just convenience--they allow you to use the full capabilities of `NgOptimizedImage`. Learn more about these optimizations and the built-in loaders for popular CDNs [here](guide/image-optimization#configuring-an-image-loader-for-ngoptimizedimage).
+이미지 로더는 편의성을 넘어서 `NgOptimizedImage`의 모든 기능을 활용할 수 있습니다. 이러한 최적화 및 인기 있는 CDN의 내장 로더에 대한 자세한 내용은 [여기](guide/image-optimization#configuring-an-image-loader-for-ngoptimizedimage)를 참조하세요.
 
 </docs-step>
 
 </docs-workflow>
 
-By adding this directive to your workflow, your images are now loading using best practices with the help of Angular 🎉
+이 지시어를 워크플로우에 추가함으로써 Angular의 도움으로 이제 최적의 방식으로 이미지를 로드하고 있습니다 🎉
 
-If you would like to learn more, check out the [documentation for `NgOptimizedImage`](guide/image-optimization). Keep up the great work and let's learn about routing next.
+더 배우고 싶다면 [NgOptimizedImage에 대한 문서](guide/image-optimization)를 확인하세요. 훌륭한 작업을 계속하고 다음에 라우팅에 대해 배우겠습니다.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md b/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md
index 4464975e2a15..8eb59221f17e 100644
--- a/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md
@@ -1,19 +1,19 @@
-# Routing Overview
+# 라우팅 개요
 
-For most apps, there comes a point where the app requires more than a single page. When that time inevitably comes, routing becomes a big part of the performance story for users.
+대부분의 애플리케이션에서는 앱이 단일 페이지 이상이 필요해지는 시점이 있습니다. 그 시점이 불가피하게 오면, 라우팅은 사용자에게 성능 이야기의 큰 부분이 됩니다.
 
-In this activity, you'll learn how to set up and configure your app to use Angular Router.
+이 활동에서는 Angular Router를 사용하도록 앱을 설정하고 구성하는 방법을 배웁니다.
 
 <hr>
 
 <docs-workflow>
 
-<docs-step title="Create an app.routes.ts file">
+<docs-step title="app.routes.ts 파일 만들기">
 
-Inside `app.routes.ts`, make the following changes:
+`app.routes.ts` 안에서 다음 변경 사항을 수행합니다:
 
-1. Import `Routes` from the `@angular/router` package.
-1. Export a constant called `routes` of type `Routes`, assign it `[]` as the value.
+1. `@angular/router` 패키지에서 `Routes`를 임포트합니다.
+1. `Routes` 타입의 `routes`라는 상수를 내보내고 값으로 `[]`를 할당합니다.
 
 ```ts
 import {Routes} from '@angular/router';
@@ -23,13 +23,13 @@ export const routes: Routes = [];
 
 </docs-step>
 
-<docs-step title="Add routing to provider">
+<docs-step title="공급자에 라우팅 추가">
 
-In `app.config.ts`, configure the app to Angular Router with the following steps:
+`app.config.ts`에서 Angular Router로 앱을 구성하는 다음 단계를 수행합니다:
 
-1. Import the `provideRouter` function from `@angular/router`.
-1. Import `routes` from the `./app.routes.ts`.
-1. Call the `provideRouter` function with `routes` passed in as an argument in the `providers` array.
+1. `@angular/router`에서 `provideRouter` 함수를 임포트합니다.
+1. `./app.routes.ts`에서 `routes`를 임포트합니다.
+1. `providers` 배열에서 매개변수로 `routes`를 전달하여 `provideRouter` 함수를 호출합니다.
 
 <docs-code language="ts" highlight="[2,3,6]">
 import {ApplicationConfig} from '@angular/core';
@@ -43,11 +43,11 @@ export const appConfig: ApplicationConfig = {
 
 </docs-step>
 
-<docs-step title="Import `RouterOutlet` in the component">
+<docs-step title="컴포넌트에 `RouterOutlet` 임포트">
 
-Finally, to make sure your app is ready to use the Angular Router, you need to tell the app where you expect the router to display the desired content. Accomplish that by using the `RouterOutlet` directive from `@angular/router`.
+마지막으로, Angular Router를 사용하려면 앱에 라우터가 원하는 콘텐츠를 표시할 위치를 알려야 합니다. 이를 위해 `@angular/router`에서 제공하는 `RouterOutlet` 지시문을 사용합니다.
 
-Update the template for `AppComponent` by adding `<router-outlet />`
+`AppComponent`의 템플릿을 업데이트하여 `<router-outlet />`를 추가합니다.
 
 <docs-code language="angular-ts" highlight="[11]">
 import {RouterOutlet} from '@angular/router';
@@ -56,9 +56,9 @@ import {RouterOutlet} from '@angular/router';
   ...
   template: `
     <nav>
-      <a href="/">Home</a>
+      <a href="/">홈</a>
       |
-      <a href="/user">User</a>
+      <a href="/user">사용자</a>
     </nav>
     <router-outlet />
   `,
@@ -71,6 +71,6 @@ export class AppComponent {}
 
 </docs-workflow>
 
-Your app is now set up to use Angular Router. Nice work! 🙌
+이제 앱이 Angular Router를 사용하도록 설정되었습니다. 잘 했어요! 🙌
 
-Keep the momentum going to learn the next step of defining the routes for our app.
+다음 단계로 나아가 앱의 라우트를 정의하는 방법을 배워보세요.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
index 74024bf69b13..561002b12196 100644
--- a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
@@ -1,21 +1,21 @@
-# Define a Route
+# 경로 정의하기
 
-Now that you've set up the app to use Angular Router, you need to define the routes.
+이제 앱이 Angular Router를 사용하도록 설정했으므로, 경로를 정의해야 합니다.
 
-In this activity, you'll learn how to add and configure routes with your app.
+이 활동에서는 앱과 함께 경로를 추가하고 구성하는 방법을 배웁니다.
 
 <hr>
 
 <docs-workflow>
 
-<docs-step title="Define a route in `app.routes.ts`">
+<docs-step title="`app.routes.ts`에서 경로 정의하기">
 
-In your app, there are two pages to display: (1) Home Page and (2) User Page.
+앱에는 표시할 두 개의 페이지가 있습니다: (1) 홈 페이지 및 (2) 사용자 페이지.
 
-To define a route, add a route object to the `routes` array in `app.routes.ts` that contains:
+경로를 정의하려면 `app.routes.ts`의 `routes` 배열에 경로 객체를 추가합니다. 이 객체는 다음을 포함합니다:
 
-- The `path` of the route (which automatically starts at the root path (i.e., `/`))
-- The `component` that you want the route to display
+- 경로의 `path` (자동으로 루트 경로에서 시작됨 (즉, `/`))
+- 경로에 표시할 `component`
 
 ```ts
 import {Routes} from '@angular/router';
@@ -30,17 +30,17 @@ export const routes: Routes = [
 ];
 ```
 
-The code above is an example of how `HomeComponent` can be added as a route. Now go ahead and implement this along with the `UserComponent` in the playground.
+위의 코드는 `HomeComponent`를 경로로 추가하는 방법의 예입니다. 이제 플레이그라운드에서 `UserComponent`와 함께 이를 구현하세요.
 
-Use `'user'` for the path of `UserComponent`.
+`UserComponent`의 경로에는 `'user'`를 사용하세요.
 
 </docs-step>
 
-<docs-step title="Add title to route definition">
+<docs-step title="경로 정의에 제목 추가하기">
 
-In addition to defining the routes correctly, Angular Router also enables you to set the page title whenever users are navigating by adding the `title` property to each route.
+경로를 올바르게 정의하는 것 외에도, Angular Router는 사용자가 탐색할 때마다 각 경로에 `title` 속성을 추가하여 페이지 제목을 설정할 수 있게 해줍니다.
 
-In `app.routes.ts`, add the `title` property to the default route (`path: ''`) and the `user` route. Here's an example:
+`app.routes.ts`에서 기본 경로(`path: ''`)와 사용자 경로에 `title` 속성을 추가하세요. 예를 들면 다음과 같습니다:
 
 <docs-code language="ts" highlight="[8]">
 import {Routes} from '@angular/router';
@@ -50,7 +50,7 @@ import {HomeComponent} from './home/home.component';
 export const routes: Routes = [
   {
     path: '',
-    title: 'App Home Page',
+    title: '앱 홈 페이지',
     component: HomeComponent,
   },
 ];
@@ -60,6 +60,6 @@ export const routes: Routes = [
 
 </docs-workflow>
 
-In the activity, you've learned how to define and configure routes in your Angular app. Nice work. 🙌
+이 활동에서 Angular 앱에서 경로를 정의하고 구성하는 방법을 배웠습니다. 훌륭한 작업입니다. 🙌
 
-The journey to fully enabling routing in your app is almost complete, keep going.
+앱에서 라우팅을 완전히 활성화하는 여정은 거의 완료되었습니다. 계속 진행하세요.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/README.md b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/README.md
index f01ad405ecab..a6dc03b7663d 100644
--- a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/README.md
@@ -1,8 +1,8 @@
 # Use RouterLink for Navigation
 
-In the app's current state, the entire page refreshes when we click on an internal link that exists within the app. While this may not seem significant with a small app, this can have performance implications for larger pages with more content where users have to redownload assets and run calculations again.
+앱의 현재 상태에서는 앱 내의 내부 링크를 클릭할 때마다 전체 페이지가 새로 고쳐집니다. 이것은 작은 앱에서는 큰 문제가 아닌 것처럼 보일 수 있지만, 더 큰 페이지와 더 많은 콘텐츠가 있을 경우 성능에 영향을 미칠 수 있습니다. 사용자들은 자산을 다시 다운로드하고 계산을 다시 수행해야 합니다.
 
-In this activity, you'll learn how to leverage the `RouterLink` directive to make the most use of Angular Router.
+이 활동에서는 Angular Router를 최대한 활용하기 위해 `RouterLink` 지시어를 사용하는 방법을 배울 것입니다.
 
 <hr>
 
@@ -10,7 +10,7 @@ In this activity, you'll learn how to leverage the `RouterLink` directive to mak
 
 <docs-step title="Import `RouterLink` directive">
 
-In `app.component.ts` add the `RouterLink` directive import to the existing import statement from `@angular/router` and add it to the `imports` array of your component decorator.
+`app.component.ts`에서 기존의 `@angular/router`에서 `RouterLink` 지시어를 가져오는 구문을 추가하고, 컴포넌트 데코레이터의 `imports` 배열에 추가합니다.
 
 ```ts
 ...
@@ -26,7 +26,7 @@ import { RouterLink, RouterOutlet } from '@angular/router';
 
 <docs-step title="Add a `routerLink` to template">
 
-To use the `RouterLink` directive, replace the `href` attributes with `routerLink`. Update the template with this change.
+`RouterLink` 지시어를 사용하려면 `href` 속성을 `routerLink`로 교체합니다. 이 변경사항으로 템플릿을 업데이트합니다.
 
 ```angular-ts
 import { RouterLink, RouterOutlet } from '@angular/router';
@@ -47,6 +47,6 @@ import { RouterLink, RouterOutlet } from '@angular/router';
 
 </docs-workflow>
 
-When you click on the links in the navigation now, you should not see any blinking and only the content of the page itself (i.e., `router-outlet`) being changed 🎉
+이제 내비게이션의 링크를 클릭하면 깜빡임이 없고 오직 페이지 자체의 내용(즉, `router-outlet`)만 변경되는 것을 볼 수 있어야 합니다 🎉
 
-Great job learning about routing with Angular. This is just the surface of the `Router` API, to learn more check out the [Angular Router Documentation](guide/routing).
+Angular로 라우팅에 대해 배우신 것 정말 잘했습니다. 이것은 `Router` API의 표면에 불과하며, 더 많은 내용을 배우려면 [Angular Router Documentation](guide/routing)를 확인하세요.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/15-forms/README.md b/adev/src/content/tutorials/learn-angular/steps/15-forms/README.md
index 47483325a5be..e4f5f1f9e454 100644
--- a/adev/src/content/tutorials/learn-angular/steps/15-forms/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/15-forms/README.md
@@ -1,33 +1,33 @@
-# Forms Overview
+# 양식 개요
 
-Forms are a big part of many apps because they enable your app to accept user input. Let's learn about how forms are handled in Angular.
+양식은 사용자 입력을 수락할 수 있게 해주기 때문에 많은 앱의 큰 부분입니다. Angular에서 양식이 어떻게 처리되는지 배워봅시다.
 
-In Angular, there are two types of forms: template-driven and reactive. You'll learn about both over the next few activities.
+Angular에는 템플릿 기반과 반응형의 두 가지 유형의 양식이 있습니다. 다음 몇 가지 활동을 통해 두 가지 모두를 배울 것입니다.
 
-In this activity, you'll learn how to set up a form using a template-driven approach.
+이 활동에서는 템플릿 기반 접근 방식을 사용해 양식을 설정하는 방법을 배울 것입니다.
 
 <hr>
 
 <docs-workflow>
 
-<docs-step title="Create an input field">
+<docs-step title="입력 필드 만들기">
 
-In `user.component.ts`, update the template by adding a text input with the `id` set to `framework`, type set to `text`.
+`user.component.ts`에서 `id`를 `framework`로 설정하고, 타입을 `text`로 설정하여 텍스트 입력을 추가하여 템플릿을 업데이트합니다.
 
 ```angular-html
 <label for="framework">
-  Favorite Framework:
+  좋아하는 프레임워크:
   <input id="framework" type="text" />
 </label>
 ```
 
 </docs-step>
 
-<docs-step title="Import `FormsModule`">
+<docs-step title="`FormsModule` 가져오기">
 
-For this form to use Angular features that enable data binding to forms, you'll need to import the `FormsModule`.
+이 양식이 데이터 바인딩 기능을 사용하도록 하려면 `FormsModule`을 가져와야 합니다.
 
-Import the `FormsModule` from `@angular/forms` and add it to the `imports` array of the `UserComponent`.
+`@angular/forms`에서 `FormsModule`을 가져오고 `UserComponent`의 `imports` 배열에 추가합니다.
 
 <docs-code language="ts" highlight="[2, 7]">
 import {Component} from '@angular/core';
@@ -42,27 +42,27 @@ export class UserComponent {}
 
 </docs-step>
 
-<docs-step title="Add binding to the value of the input">
+<docs-step title="입력 값에 바인딩 추가 하기">
 
-The `FormsModule` has a directive called `ngModel` that binds the value of the input to a property in your class.
+`FormsModule`에는 입력 값과 클래스의 속성을 바인딩하는 `ngModel`이라는 지시어가 있습니다.
 
-Update the input to use the `ngModel` directive, specifically with the following syntax `[(ngModel)]="favoriteFramework"` to bind to the `favoriteFramework` property.
+입력을 업데이트하여 `ngModel` 지시어를 사용하고, 다음 구문 `[(ngModel)]="favoriteFramework"`로 `favoriteFramework` 속성과 바인딩합니다.
 
 <docs-code language="html" highlight="[3]">
 <label for="framework">
-  Favorite Framework:
+  좋아하는 프레임워크:
   <input id="framework" type="text" [(ngModel)]="favoriteFramework" />
 </label>
 </docs-code>
 
-After you've made changes, try entering a value in the input field. Notice how it updates on the screen (yes, very cool).
+변경을 완료한 후 입력 필드에 값을 입력해 보세요. 화면에서 어떻게 업데이트되는지 주목하세요 (네, 정말 멋집니다).
 
-Note: The syntax `[()]` is known as "banana in a box" but it represents two-way binding: property binding and event binding. Learn more in the [Angular docs about two-way data binding](guide/templates/two-way-binding).
+참고: 구문 `[()]`은 "상자 속의 바나나"라고 알려져 있지만, 양방향 바인딩: 속성 바인딩과 이벤트 바인딩을 나타냅니다. [양방향 데이터 바인딩에 대한 Angular 문서](guide/templates/two-way-binding)에서 더 많은 정보를 알아보세요.
 
 </docs-step>
 
 </docs-workflow>
 
-You've now taken an important first step towards building forms with Angular.
+이제 Angular로 양식을 구축하는 중요한 첫 단계를 밟았습니다.
 
-Nice work. Let's keep the momentum going!
+잘했어요. 이 momentum을 계속 유지해봅시다!
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md
index f1e673d37576..b8411431c9bf 100644
--- a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md
@@ -1,25 +1,25 @@
-# Getting form control value
+# 폼 제어 값 가져오기
 
-Now that your forms are set up with Angular, the next step is to access the values from the form controls.
+Angular로 폼을 설정했으니 다음 단계는 폼 컨트롤에서 값을 가져오는 것입니다.
 
-In this activity, you'll learn how to get the value from your form input.
+이번 활동에서는 폼 입력값을 가져오는 방법을 배우게 됩니다.
 
 <hr>
 
 <docs-workflow>
 
-<docs-step title="Show the value of the input field in the template">
+<docs-step title="템플릿에서 입력 필드의 값을 표시하기">
 
-To display the input value in a template, you can use the interpolation syntax `{{}}` just like any other class property of the component:
+템플릿에서 입력 값을 표시하려면, 컴포넌트의 다른 클래스 속성과 마찬가지로 보간법 구문 `{{}}`을 사용할 수 있습니다:
 
 <docs-code language="angular-ts" highlight="[5]">
 @Component({
   selector: 'app-user',
   template: `
     ...
-    <p>Framework: {{ favoriteFramework }}</p>
+    <p>프레임워크: {{ favoriteFramework }}</p>
     <label for="framework">
-      Favorite Framework:
+      좋아하는 프레임워크:
       <input id="framework" type="text" [(ngModel)]="favoriteFramework" />
     </label>
   `,
@@ -31,9 +31,9 @@ export class UserComponent {
 
 </docs-step>
 
-<docs-step title="Retrieve the value of an input field">
+<docs-step title="입력 필드의 값을 가져오기">
 
-When you need to reference the input field value in the component class, you can do so by accessing the class property with the `this` syntax.
+컴포넌트 클래스에서 입력 필드 값을 참조해야 할 때, `this` 구문으로 클래스 속성에 접근하여 수행할 수 있습니다.
 
 <docs-code language="angular-ts" highlight="[15]">
 ...
@@ -41,7 +41,7 @@ When you need to reference the input field value in the component class, you can
   selector: 'app-user',
   template: `
     ...
-    <button (click)="showFramework()">Show Framework</button>
+    <button (click)="showFramework()">프레임워크 표시</button>
   `,
   ...
 })
@@ -59,6 +59,6 @@ export class UserComponent {
 
 </docs-workflow>
 
-Great job learning how to display the input values in your template and access them programmatically.
+템플릿에서 입력 값을 표시하고 프로그래밍적으로 접근하는 방법을 배우신 것을 축하합니다.
 
-Time to progress onto the next way of managing forms with Angular: reactive forms. If you'd like to learn more about template-driven forms, please refer to the [Angular forms documentation](guide/forms/template-driven-forms).
+이제 Angular로 폼을 관리하는 다음 방법인 반응형 폼으로 넘어갈 시간입니다. 템플릿 기반 폼에 대해 더 알고 싶으시면 [Angular 폼 문서](guide/forms/template-driven-forms)를 참조하시기 바랍니다.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md b/adev/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md
index bfc4b213c6e6..432b6da602d4 100644
--- a/adev/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md
@@ -1,16 +1,16 @@
-# Reactive Forms
+# 반응형 폼
 
-When you want to manage your forms programmatically instead of relying purely on the template, reactive forms are the answer.
+템플릿에만 의존하는 대신 프로그램적으로 폼을 관리하고 싶을 때, 반응형 폼이 해결책입니다.
 
-In this activity, you'll learn how to set up reactive forms.
+이 활동에서는 반응형 폼을 설정하는 방법을 배우게 됩니다.
 
 <hr>
 
 <docs-workflow>
 
-<docs-step title="Import `ReactiveForms` module">
+<docs-step title="`ReactiveForms` 모듈 가져오기">
 
-In `app.component.ts`, import `ReactiveFormsModule` from `@angular/forms` and add it to the `imports` array of the component.
+`app.component.ts`에서 `@angular/forms`에서 `ReactiveFormsModule`을 가져오고 컴포넌트의 `imports` 배열에 추가합니다.
 
 ```angular-ts
 import { ReactiveFormsModule } from '@angular/forms';
@@ -25,7 +25,7 @@ import { ReactiveFormsModule } from '@angular/forms';
       <label>Email
         <input type="email" />
       </label>
-      <button type="submit">Submit</button>
+      <button type="submit">제출</button>
     </form>
   `,
   imports: [ReactiveFormsModule],
@@ -34,11 +34,11 @@ import { ReactiveFormsModule } from '@angular/forms';
 
 </docs-step>
 
-<docs-step title="Create the `FormGroup` object with FormControls">
+<docs-step title="FormControls로 `FormGroup` 객체 생성">
 
-Reactive forms use the `FormControl` class to represent the form controls (e.g., inputs). Angular provides the `FormGroup` class to serve as a grouping of form controls into a helpful object that makes handling large forms more convenient for developers.
+반응형 폼은 폼 컨트롤(예: 입력)을 나타내기 위해 `FormControl` 클래스를 사용합니다. Angular는 개발자가 큰 폼을 더 쉽게 처리할 수 있도록 돕는 폼 컨트롤의 그룹화를 위한 `FormGroup` 클래스를 제공합니다.
 
-Add `FormControl` and `FormGroup` to the import from `@angular/forms` so that you can create a FormGroup for each form, with the properties `name` and `email` as FormControls.
+각 폼에 대해 `name`과 `email` 속성을 가진 FormControls로 FormGroup을 생성할 수 있도록 `@angular/forms`에서 `FormControl`과 `FormGroup`을 가져옵니다.
 
 ```ts
 import {ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
@@ -53,11 +53,11 @@ export class AppComponent {
 
 </docs-step>
 
-<docs-step title="Link the FormGroup and FormControls to the form">
+<docs-step title="폼에 FormGroup과 FormControls 연결">
 
-Each `FormGroup` should be attached to a form using the `[formGroup]` directive.
+각 `FormGroup`은 `[formGroup]` 지시어를 사용하여 폼에 연결해야 합니다.
 
-In addition, each `FormControl` can be attached with the `formControlName` directive and assigned to the corresponding property. Update the template with the following form code:
+또한, 각 `FormControl`은 `formControlName` 지시어로 연결되어 해당 속성에 할당될 수 있습니다. 다음 폼 코드로 템플릿을 업데이트하세요:
 
 ```angular-html
 <form [formGroup]="profileForm">
@@ -69,30 +69,30 @@ In addition, each `FormControl` can be attached with the `formControlName` direc
     Email
     <input type="email" formControlName="email" />
   </label>
-  <button type="submit">Submit</button>
+  <button type="submit">제출</button>
 </form>
 ```
 
 </docs-step>
 
-<docs-step title="Handle update to the form">
+<docs-step title="폼 업데이트 처리">
 
-When you want to access data from the `FormGroup`, it can be done by accessing the value of the `FormGroup`. Update the `template` to display the form values:
+`FormGroup`의 데이터에 접근하려면 `FormGroup`의 값을 통해 접근할 수 있습니다. 폼 값을 표시하기 위해 `template`을 업데이트하세요:
 
 ```angular-html
 ...
-<h2>Profile Form</h2>
+<h2>프로필 폼</h2>
 <p>Name: {{ profileForm.value.name }}</p>
 <p>Email: {{ profileForm.value.email }}</p>
 ```
 
 </docs-step>
 
-<docs-step title="Access FormGroup values">
-Add a new method to the component class called `handleSubmit` that you'll later use to handle the form submission.
-This method will display values from the form, you can access the values from the FormGroup.
+<docs-step title="FormGroup 값 접근">
+컴포넌트 클래스에 `handleSubmit`이라는 새 메서드를 추가하여 나중에 폼 제출을 처리하는 데 사용할 것입니다.
+이 메서드는 폼의 값을 표시할 것이며, FormGroup에서 값을 접근할 수 있습니다.
 
-In the component class, add the `handleSubmit()` method to handle the form submission.
+컴포넌트 클래스에서 폼 제출을 처리하기 위해 `handleSubmit()` 메서드를 추가하세요.
 
 <docs-code language="ts">
 handleSubmit() {
@@ -103,9 +103,9 @@ handleSubmit() {
 </docs-code>
 </docs-step>
 
-<docs-step title="Add `ngSubmit` to the form">
-You have access to the form values, now it is time to handle the submission event and use the `handleSubmit` method.
-Angular has an event handler for this specific purpose called `ngSubmit`. Update the form element to call the `handleSubmit` method when the form is submitted.
+<docs-step title="폼에 `ngSubmit` 추가">
+폼 값을 접근할 수 있게 되었습니다. 이제 제출 이벤트를 처리하고 `handleSubmit` 메서드를 사용할 때입니다.
+Angular는 이 특정 목적을 위한 이벤트 핸들러인 `ngSubmit`을 가지고 있습니다. 폼이 제출될 때 `handleSubmit` 메서드를 호출하도록 폼 요소를 업데이트하세요.
 
 <docs-code language="angular-html" highlight="[3]">
 <form
@@ -117,6 +117,6 @@ Angular has an event handler for this specific purpose called `ngSubmit`. Update
 
 </docs-workflow>
 
-And just like that, you know how to work with reactive forms in Angular.
+이렇게 해서 Angular에서 반응형 폼을 다루는 방법을 알게 되었습니다.
 
-Fantastic job with this activity. Keep going to learn about form validation.
+이 활동에 대해 훌륭한 작업을 수행했습니다. 계속 진행하여 폼 유효성 검사에 대해 학습하세요.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/18-forms-validation/README.md b/adev/src/content/tutorials/learn-angular/steps/18-forms-validation/README.md
index 0eb6c53c643c..91f2382c8723 100644
--- a/adev/src/content/tutorials/learn-angular/steps/18-forms-validation/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/18-forms-validation/README.md
@@ -1,16 +1,16 @@
-# Validating forms
+# 폼 검증
 
-Another common scenario when working with forms is the need to validate the inputs to ensure the correct data is submitted.
+폼 작업 시 흔히 발생하는 또 다른 시나리오는 올바른 데이터가 제출되도록 입력을 검증해야 하는 경우입니다.
 
-In this activity, you'll learn how to validate forms with reactive forms.
+이번 활동에서는 반응형 폼으로 폼을 검증하는 방법을 배웁니다.
 
 <hr>
 
 <docs-workflow>
 
-<docs-step title="Import Validators">
+<docs-step title="유효성 검사기 가져오기">
 
-Angular provides a set of validation tools. To use them, first update the component to import `Validators` from `@angular/forms`.
+Angular는 일련의 유효성 검사 도구를 제공합니다. 이를 사용하려면 먼저 `@angular/forms`로부터 `Validators`를 가져오도록 구성 요소를 업데이트합니다.
 
 <docs-code language="ts" highlight="[1]">
 import {ReactiveFormsModule, Validators} from '@angular/forms';
@@ -21,11 +21,11 @@ export class AppComponent {}
 
 </docs-step>
 
-<docs-step title="Add validation to form">
+<docs-step title="폼에 유효성 검사 추가하기">
 
-Every `FormControl` can be passed the `Validators` you want to use for validating the `FormControl` values. For example, if you want to make the `name` field in `profileForm` required then use `Validators.required`.
-For the `email` field in our Angular form, we want to ensure it's not left empty and follows a valid email address structure. We can achieve this by combining the `Validators.required` and `Validators.email` validators in an array.
-Update the `name` and `email` `FormControl`:
+모든 `FormControl`은 원하는 유효성 검사기를 전달하여 `FormControl` 값을 검증할 수 있습니다. 예를 들어, `profileForm`의 `name` 필드를 필수로 만들고 싶다면 `Validators.required`를 사용합니다.
+우리 Angular 폼의 `email` 필드에서는 비어 있지 않도록 하고 유효한 이메일 주소 구조를 따르도록 하고 싶습니다. 이를 위해 `Validators.required`와 `Validators.email` 유효성 검사기를 배열로 결합할 수 있습니다.
+`name`과 `email` `FormControl`을 업데이트합니다:
 
 ```ts
 profileForm = new FormGroup({
@@ -36,19 +36,19 @@ profileForm = new FormGroup({
 
 </docs-step>
 
-<docs-step title="Check form validation in template">
+<docs-step title="템플릿에서 폼 유효성 검사 확인하기">
 
-To determine if a form is valid, the `FormGroup` class has a `valid` property.
-You can use this property to dynamically bind attributes. Update the submit `button` to be enabled based on the validity of the form.
+폼이 유효한지 판단하기 위해 `FormGroup` 클래스에는 `valid` 속성이 있습니다.
+이 속성을 사용하여 동적으로 속성을 바인딩할 수 있습니다. 폼의 유효성에 따라 제출 `button`을 활성화하도록 업데이트합니다.
 
 ```angular-html
-<button type="submit" [disabled]="!profileForm.valid">Submit</button>
+<button type="submit" [disabled]="!profileForm.valid">제출</button>
 ```
 
 </docs-step>
 
 </docs-workflow>
 
-You now know the basics around how validation works with reactive forms.
+이제 반응형 폼에서 유효성 검증이 어떻게 작동하는지 기본을 알게 되었습니다.
 
-Great job learning these core concepts of working with forms in Angular. If you want to learn more, be sure to refer to the [Angular forms documentation](guide/forms/form-validation).
+Angular에서 폼 작업의 이러한 핵심 개념을 배우는 훌륭한 작업을 해냈습니다. 더 배우고 싶다면 [Angular 폼 문서](guide/forms/form-validation)를 참조하세요.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md b/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md
index 32dd274e285d..65bfec44e66c 100644
--- a/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md
@@ -1,45 +1,45 @@
-# Creating an injectable service
+# 주입 가능한 서비스 만들기
 
-Dependency injection (DI) in Angular is one of the framework's most powerful features. Consider dependency injection to be the ability for Angular to _provide_ resources you need for your application at runtime. A dependency could be a service or some other resources.
+Angular의 의존성 주입(DI)은 프레임워크의 가장 강력한 기능 중 하나입니다. 의존성 주입을 Angular가 애플리케이션을 실행하는 동안 필요한 자원을 _제공_하는 능력으로 생각하세요. 의존성은 서비스나 다른 자원일 수 있습니다.
 
-You can learn more about [dependency injection in the Angular docs](guide/di). For now, you will get practice creating `injectable` resources.
+[Angular 문서에서 의존성 주입에 대해 더 알아보세요](guide/di). 지금은 `injectable` 자원을 만드는 연습을 하게 됩니다.
 
-In this activity, you'll learn how to create an injectable service.
+이번 활동에서는 주입 가능한 서비스를 만드는 방법을 배울 것입니다.
 
 <hr>
 
-One way to use a service is to act as a way to interact with data and APIs. To make a service reusable you should keep the logic in the service and share it throughout the application when it is needed.
+서비스를 사용하는 한 가지 방법은 데이터 및 API와 상호 작용하는 방법으로 작동하는 것입니다. 서비스를 재사용 가능하게 만들기 위해서는 서비스 내의 논리를 유지하고 필요할 때 애플리케이션 전반에 걸쳐 공유해야 합니다.
 
-To make a service eligible to be injected by the DI system use the `@Injectable` decorator. For example:
+서비스가 DI 시스템에 의해 주입되도록 하려면 `@Injectable` 데코레이터를 사용하세요. 예를 들면:
 
 <docs-code language="ts" highlight="[1, 2, 3]">
 @Injectable({
     providedIn: 'root'
 })
 class UserService {
-    // methods to retrieve and return data
+    // 데이터를 검색하고 반환하는 메서드
 }
 </docs-code>
 
-The `@Injectable` decorator notifies the DI system that the `UserService` is available to be requested in a class. `providedIn` sets the scope in which this resource is available. For now, it is good enough to understand that `providedIn: 'root'` means that the `UserService` is available to the entire application.
+`@Injectable` 데코레이터는 DI 시스템에 `UserService`가 클래스에서 요청될 준비가 되어 있음을 알립니다. `providedIn`은 이 자원이 사용 가능한 범위를 설정합니다. 현재로서는 `providedIn: 'root'`가 `UserService`가 전체 애플리케이션에서 사용 가능하다는 것을 이해하는 것으로 충분합니다.
 
-Alright, you try:
+좋습니다, 당신이 해보세요:
 
 <docs-workflow>
 
 <docs-step title="Add the `@Injectable` decorator">
-Update the code in `car.service.ts` by adding the `@Injectable` decorator.
+`car.service.ts`의 코드를 업데이트하여 `@Injectable` 데코레이터를 추가하세요.
 </docs-step>
 
 <docs-step title="Configure the decorator">
-The values in the object passed to the decorator are considered to be the configuration for the decorator.
+데코레이터에 전달된 객체의 값은 데코레이터의 구성으로 간주됩니다.
 <br>
-Update the `@Injectable` decorator in `car.service.ts` to include the configuration for `providedIn: 'root'`.
+`car.service.ts`의 `@Injectable` 데코레이터를 업데이트하여 `providedIn: 'root'`에 대한 구성을 포함하세요.
 
-Tip: Use the above example to find the correct syntax.
+팁: 위의 예제를 사용하여 올바른 구문을 찾으세요.
 
 </docs-step>
 
 </docs-workflow>
 
-Well, done 👍 that service is now `injectable` and can participate in the fun. Now that the service is `injectable`, let's try injecting it into a component 👉
+잘했습니다 👍 이제 그 서비스는 `injectable`이 되어 재미에 참여할 수 있습니다. 이제 서비스가 `injectable`이 되었으니 컴포넌트에 주입해 보겠습니다 👉
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.md b/adev/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.md
index 2c49ac1ea84f..7dc269b4e122 100644
--- a/adev/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.md
@@ -1,15 +1,15 @@
-# Updating the Component Class
+# 구성 요소 클래스 업데이트
 
-In Angular, the component's logic and behavior are defined in the component's TypeScript class.
+Angular에서 구성 요소의 로직과 동작은 구성 요소의 TypeScript 클래스에 정의됩니다.
 
-In this activity, you'll learn how to update the component class and how to use [interpolation](/guide/templates/binding#render-dynamic-text-with-text-interpolation).
+이 활동에서는 구성 요소 클래스를 업데이트하는 방법과 [보간법](/guide/templates/binding#render-dynamic-text-with-text-interpolation)을 사용하는 방법을 배우게 됩니다.
 
 <hr />
 
 <docs-workflow>
 
-<docs-step title="Add a property called `city`">
-Update the component class by adding a property called `city` to the `AppComponent` class.
+<docs-step title="`city`라는 속성 추가">
+`AppComponent` 클래스에 `city`라는 속성을 추가하여 구성 요소 클래스를 업데이트합니다.
 
 ```ts
 export class AppComponent {
@@ -17,33 +17,33 @@ export class AppComponent {
 }
 ```
 
-The `city` property is of type `string` but you can omit the type because of [type inference in TypeScript](https://www.typescriptlang.org/docs/handbook/type-inference.html). The `city` property can be used in the `AppComponent` class and can be referenced in the component template.
+`city` 속성은 `string` 유형이지만 [TypeScript의 유형 추론](https://www.typescriptlang.org/docs/handbook/type-inference.html) 덕분에 유형을 생략할 수 있습니다. `city` 속성은 `AppComponent` 클래스에서 사용될 수 있으며 구성 요소 템플릿에서도 참조할 수 있습니다.
 
 <br>
 
-To use a class property in a template, you have to use the `{{ }}` syntax.
+템플릿에서 클래스 속성을 사용하려면 `{{ }}` 구문을 사용해야 합니다.
 </docs-step>
 
-<docs-step title="Update the component template">
-Update the `template` property to match the following HTML:
+<docs-step title="구성 요소 템플릿 업데이트">
+다음 HTML에 맞게 `template` 속성을 업데이트합니다:
 
 ```ts
 template: `Hello {{ city }}`,
 ```
 
-This is an example of interpolation and is a part of Angular template syntax. It enables you to do much more than put dynamic text in a template. You can also use this syntax to call functions, write expressions and more.
+이는 보간법의 예이며 Angular 템플릿 구문에 포함됩니다. 이를 통해 템플릿에 동적 텍스트 외에도 훨씬 더 많은 작업을 수행할 수 있습니다. 이 구문을 사용하여 함수 호출, 표현식 작성 등을 할 수도 있습니다.
 </docs-step>
 
-<docs-step title="More practice with interpolation">
-Try this - add another set of `{{ }}` with the contents being `1 + 1`:
+<docs-step title="보간법에 대한 추가 연습">
+다음과 같이 `1 + 1`이라는 내용을 가진 또 다른 세트의 `{{ }}`를 추가해 보십시오:
 
 ```ts
 template: `Hello {{ city }}, {{ 1 + 1 }}`,
 ```
 
-Angular evaluates the contents of the `{{ }}` and renders the output in the template.
+Angular는 `{{ }}`의 내용을 평가하고 템플릿에 출력 결과를 렌더링합니다.
 </docs-step>
 
 </docs-workflow>
 
-This is just the beginning of what's possible with Angular templates, keep on learning to find out more.
+이것은 Angular 템플릿으로 가능한 것의 시작에 불과합니다. 계속 학습하여 더 많은 내용을 발견하세요.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md b/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md
index 2c6947989922..c79698e8083c 100644
--- a/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md
@@ -1,14 +1,14 @@
-# Inject-based dependency injection
+# 주입 기반 의존성 주입
 
-Creating an injectable service is the first part of the dependency injection (DI) system in Angular. How do you inject a service into a component? Angular has a convenient function called `inject()` that can be used in the proper context.
+주입 가능한 서비스를 만드는 것은 Angular의 의존성 주입(DI) 시스템의 첫 번째 부분입니다. 서비스를 구성 요소에 어떻게 주입합니까? Angular에는 적절한 컨텍스트에서 사용할 수 있는 `inject()`라는 편리한 기능이 있습니다.
 
-Note: Injection contexts are beyond the scope of this tutorial, but you can find more information in the [Angular Docs](guide/di/dependency-injection-context) if you would like to learn more.
+참고: 주입 컨텍스트는 이 튜토리얼의 범위를 넘어가지만, 더 알고 싶으시면 [Angular Docs](guide/di/dependency-injection-context)에서 추가 정보를 찾을 수 있습니다.
 
-In this activity, you'll learn how to inject a service and use it in a component.
+이 활동에서는 서비스를 주입하고 구성 요소에서 사용하는 방법을 배웁니다.
 
 <hr>
 
-It is often helpful to initialize class properties with values provided by the DI system. Here's an example:
+DI 시스템에서 제공하는 값으로 클래스 속성을 초기화하는 것이 종종 유용합니다. 예를 들어:
 
 <docs-code language="ts" highlight="[3]">
 @Component({...})
@@ -19,19 +19,19 @@ class PetCareDashboardComponent {
 
 <docs-workflow>
 
-<docs-step title="Inject the `CarService`">
+<docs-step title="`CarService` 주입하기">
 
-In `app.component.ts`, using the `inject()` function inject the `CarService` and assign it to a property called `carService`
+`app.component.ts`에서 `inject()` 함수를 사용하여 `CarService`를 주입하고 이를 `carService`라는 속성에 할당하세요.
 
-Note: Notice the difference between the property `carService` and the class `CarService`.
+참고: `carService` 속성과 `CarService` 클래스 간의 차이를 주목하세요.
 
 </docs-step>
 
-<docs-step title="Use the `carService` instance">
+<docs-step title="`carService` 인스턴스 사용하기">
 
-Calling `inject(CarService)` gave you an instance of the `CarService` that you can use in your application, stored in the `carService` property.
+`inject(CarService)`를 호출하면 애플리케이션에서 사용할 수 있는 `CarService` 인스턴스가 `carService` 속성에 저장됩니다.
 
-In the `constructor` function of the `AppComponent`, add the following implementation:
+`AppComponent`의 `constructor` 함수에 다음 구현을 추가하세요:
 
 ```ts
 constructor() {
@@ -41,9 +41,9 @@ constructor() {
 
 </docs-step>
 
-<docs-step title="Update the `AppComponent` template">
+<docs-step title="`AppComponent` 템플릿 업데이트">
 
-Update the component template in `app.component.ts` with the following code:
+`app.component.ts`에서 구성 요소 템플릿을 다음 코드로 업데이트하세요:
 
 ```ts
 template: `<p>Car Listing: {{ display }}</p>`,
@@ -53,4 +53,4 @@ template: `<p>Car Listing: {{ display }}</p>`,
 
 </docs-workflow>
 
-You've just injected your first service into a component - fantastic effort. Before you finish this section on DI, you'll learn an alternative syntax to inject resources into your components.
+여러분은 방금 구성 요소에 첫 번째 서비스를 주입했습니다 - 멋진 노력입니다. DI에 대한 이 섹션을 마치기 전에, 구성 요소에 리소스를 주입하는 대체 구문에 대해 배울 것입니다.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md b/adev/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md
index d3cf9d1fff7c..15b98bb245b8 100644
--- a/adev/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md
@@ -1,14 +1,14 @@
-# Constructor-based dependency injection
+# 생성자 기반 의존성 주입
 
-In previous activities you used the `inject()` function to make resources available, "providing" them to your components. The `inject()` function is one pattern and it is useful to know that there is another pattern for injecting resources called constructor-based dependency injection.
+이전 활동에서는 `inject()` 함수를 사용하여 리소스를 사용할 수 있도록 하여 그것들을 구성요소에 "제공"했습니다. `inject()` 함수는 하나의 패턴이며, 생성자 기반 의존성 주입이라는 리소스를 주입하는 다른 패턴이 있다는 것을 아는 것이 유용합니다.
 
-You specify the resources as parameters to the `constructor` function of a component. Angular will make those resources available to your component.
+구성 요소의 `constructor` 함수에 리소스를 매개변수로 지정합니다. Angular는 이 리소스를 구성 요소에서 사용할 수 있도록 만듭니다.
 <br><br>
-In this activity, you will learn how to use constructor-based dependency injection.
+이번 활동에서는 생성자 기반 의존성 주입을 사용하는 방법을 배웁니다.
 
 <hr>
 
-To inject a service or some other injectable resource into your component use the following syntax:
+서비스나 기타 주입 가능한 리소스를 구성 요소에 주입하려면 다음 구문을 사용하세요:
 
 <docs-code language="ts" highlight="[3]">
 @Component({...})
@@ -19,21 +19,21 @@ class PetCarDashboardComponent {
 }
 </docs-code>
 
-There are a few things to notice here:
+여기서 주목할 몇 가지 사항이 있습니다:
 
-- Use the `private` keyword
-- The `petCareService` becomes a property you can use in your class
-- The `PetCareService` class is the injected class
+- `private` 키워드를 사용합니다.
+- `petCareService`는 클래스에서 사용할 수 있는 속성이 됩니다.
+- `PetCareService` 클래스는 주입된 클래스입니다.
 
-Alright, now you give this a try:
+좋습니다, 이제 이걸 시도해 보세요:
 
 <docs-workflow>
 
-<docs-step title="Update the code to use constructor-based DI">
+<docs-step title="코드를 생성자 기반 DI를 사용하도록 업데이트하기">
 
-In `app.component.ts`, update the constructor code to match the code below:
+`app.component.ts`에서 생성자 코드를 아래 코드를 맞추도록 업데이트하세요:
 
-Tip: Remember, if you get stuck refer to the example on this activity page.
+팁: 막히면 이 활동 페이지의 예제를 참조하세요.
 
 ```ts
 constructor(private carService: CarService) {
@@ -45,8 +45,8 @@ constructor(private carService: CarService) {
 
 </docs-workflow>
 
-Congratulations on completing this activity. The example code works the same as with using the `inject` function. While these two approaches are largely the same, there are some small differences that are beyond the scope of this tutorial.
+이 활동을 완료한 것을 축하합니다. 예제 코드는 `inject` 함수를 사용할 때와 동일하게 작동합니다. 이 두 접근 방식은 대체로 비슷하지만 이 튜토리얼의 범위를 넘는 몇 가지 작은 차이점이 있습니다.
 
 <br>
 
-You can find out more information about dependency injection in the [Angular Documentation](guide/di).
+의존성 주입에 대한 더 많은 정보는 [Angular 문서](guide/di)에서 확인할 수 있습니다.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/22-pipes/README.md b/adev/src/content/tutorials/learn-angular/steps/22-pipes/README.md
index 9395409c3fd5..17d6bafb4521 100644
--- a/adev/src/content/tutorials/learn-angular/steps/22-pipes/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/22-pipes/README.md
@@ -1,12 +1,12 @@
-# Pipes
+# 파이프
 
-Pipes are functions that are used to transform data in templates. In general, pipes are "pure" functions that don't cause side effects. Angular has a number of helpful built-in pipes you can import and use in your components. You can also create a custom pipe.
+파이프는 템플릿에서 데이터를 변환하는 데 사용되는 함수입니다. 일반적으로 파이프는 부작용을 일으키지 않는 "순수한" 함수입니다. Angular에는 구성 요소에서 가져와 사용할 수 있는 유용한 내장 파이프가 여러 가지 있습니다. 또한 사용자 정의 파이프를 생성할 수도 있습니다.
 
-In this activity, you will import a pipe and use it in the template.
+이 활동에서는 파이프를 가져와 템플릿에서 사용할 것입니다.
 
 <hr>
 
-To use a pipe in a template include it in an interpolated expression. Check out this example:
+템플릿에서 파이프를 사용하려면 보간식에 포함하십시오. 다음 예제를 확인해 보세요:
 
 <docs-code language="angular-ts" highlight="[1,5,6]">
 import {UpperCasePipe} from '@angular/common';
@@ -21,12 +21,12 @@ class AppComponent {
 }
 </docs-code>
 
-Now, it's your turn to give this a try:
+이제 여러분의 차례입니다:
 
 <docs-workflow>
 
-<docs-step title="Import the `LowerCase` pipe">
-First, update `app.component.ts` by adding the file level import for `LowerCasePipe` from `@angular/common`.
+<docs-step title="LowerCase 파이프 가져오기">
+먼저 `@angular/common`에서 `LowerCasePipe`에 대한 파일 수준 가져오기를 추가하여 `app.component.ts`를 업데이트합니다.
 
 ```ts
 import { LowerCasePipe } from '@angular/common';
@@ -34,8 +34,8 @@ import { LowerCasePipe } from '@angular/common';
 
 </docs-step>
 
-<docs-step title="Add the pipe to the template imports">
-Next, update `@Component()` decorator `imports` to include a reference to `LowerCasePipe`
+<docs-step title="파이프를 템플릿 가져오기에 추가하기">
+다음으로 `@Component()` 데코레이터의 `imports`를 업데이트하여 `LowerCasePipe`에 대한 참조를 포함합니다.
 
 <docs-code language="ts" highlight="[3]">
 @Component({
@@ -46,8 +46,8 @@ Next, update `@Component()` decorator `imports` to include a reference to `Lower
 
 </docs-step>
 
-<docs-step title="Add the pipe to the template">
-Finally, in `app.component.ts` update the template to include the `lowercase` pipe:
+<docs-step title="템플릿에 파이프 추가하기">
+마지막으로 `app.component.ts`에서 템플릿을 업데이트하여 `lowercase` 파이프를 포함합니다:
 
 ```ts
 template: `{{username | lowercase }}`
@@ -57,6 +57,6 @@ template: `{{username | lowercase }}`
 
 </docs-workflow>
 
-Pipes can also accept parameters which can be used to configure their output. Find out more in the next activity.
+파이프는 또한 출력 구성을 위해 매개변수를 받을 수 있습니다. 다음 활동에서 자세히 알아보세요.
 
-P.S. you are doing great ⭐️
+P.S. 여러분은 잘하고 있습니다 ⭐️
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md b/adev/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md
index 9a960c64654b..bab881e57f77 100644
--- a/adev/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md
@@ -1,72 +1,72 @@
-# Formatting data with pipes
+# 파이프로 데이터 포매팅하기
 
-You can take your use of pipes even further by configuring them. Pipes can be configured by passing options to them.
+파이프를 구성하여 활용할 수 있는 방법을 더욱 발전시킬 수 있습니다. 파이프는 옵션을 전달하여 구성할 수 있습니다.
 
-In this activity, you will work with some pipes and pipe parameters.
+이번 활동에서는 몇 가지 파이프와 파이프 매개변수를 사용하게 됩니다.
 
 <hr>
 
-To pass parameters to a pipe, use the `:` syntax followed by the parameter value. Here's an example:
+파이프에 매개변수를 전달하려면 `:` 구문을 사용하고 그 뒤에 매개변수 값을 적습니다. 예를 들어:
 
 ```ts
 template: `{{ date | date:'medium' }}`;
 ```
 
-The output is `Jun 15, 2015, 9:43:11 PM`.
+출력값은 `2015년 6월 15일 오후 9:43:11` 입니다.
 
-Time to customize some pipe output:
+이제 일부 파이프 출력을 사용자 정의해보겠습니다:
 
 <docs-workflow>
 
-<docs-step title="Format a number with `DecimalPipe`">
+<docs-step title="DecimalPipe로 숫자 포맷하기">
 
-In `app.component.ts`, update the template to include parameter for the `decimal` pipe.
+`app.component.ts`에서 `decimal` 파이프에 대한 매개변수를 포함하도록 템플릿을 업데이트합니다.
 
 <docs-code language="ts" highlight="[3]">
 template: `
     ...
-    <li>Number with "decimal" {{ num | number:"3.2-2" }}</li>
+    <li>Decimal로 포맷된 숫자 {{ num | number:"3.2-2" }}</li>
 `
 </docs-code>
 
-Note: What's that format? The parameter for the `DecimalPipe` is called `digitsInfo`, this parameter uses the format: `{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}`
+참고: 그 포맷은 무엇인가요? `DecimalPipe`의 매개변수는 `digitsInfo`라고 불리며, 이 매개변수는 다음 형식을 사용합니다: `{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}`
 
 </docs-step>
 
-<docs-step title="Format a date with `DatePipe`">
+<docs-step title="DatePipe로 날짜 포맷하기">
 
-Now, update the template to use the `date` pipe.
+이제 템플릿을 업데이트하여 `date` 파이프를 사용합니다.
 
 <docs-code language="ts" highlight="[3]">
 template: `
     ...
-    <li>Date with "date" {{ birthday | date: 'medium' }}</li>
+    <li>Date로 포맷된 날짜 {{ birthday | date: 'medium' }}</li>
 `
 </docs-code>
 
-For extra fun, try some different parameters for `date`. More information can be found in the [Angular docs](guide/templates/pipes).
+추가 재미를 위해 `date`에 대한 다양한 매개변수를 시도해보세요. 더 많은 정보는 [Angular 문서](guide/templates/pipes)에서 찾을 수 있습니다.
 
 </docs-step>
 
-<docs-step title="Format a currency with `CurrencyPipe`">
+<docs-step title="CurrencyPipe로 통화 포맷하기">
 
-For your last task, update the template to use the `currency` pipe.
+마지막 작업으로, 템플릿을 업데이트하여 `currency` 파이프를 사용합니다.
 
 <docs-code language="ts" highlight="[3]">
 template: `
     ...
-    <li>Currency with "currency" {{ cost | currency }}</li>
+    <li>Currency로 포맷된 통화 {{ cost | currency }}</li>
 `
 </docs-code>
 
-You can also try different parameters for `currency`. More information can be found in the [Angular docs](guide/templates/pipes).
+`currency`에 대한 다양한 매개변수를 시도해볼 수도 있습니다. 더 많은 정보는 [Angular 문서](guide/templates/pipes)에서 찾을 수 있습니다.
 
 </docs-step>
 
 </docs-workflow>
 
-Great work with pipes. You've made some great progress so far.
+파이프 작업을 잘 해주셨습니다. 지금까지 훌륭한 진전을 이루었습니다.
 
-There are even more built-in pipes that you can use in your applications. You can find the list in the [Angular documentation](guide/templates/pipes).
+응용 프로그램에서 사용할 수 있는 더 많은 내장 파이프가 있습니다. 목록은 [Angular 문서](guide/templates/pipes)에서 찾을 수 있습니다.
 
-In the case that the built-in pipes don't cover your needs, you can also create a custom pipe. Check out the next lesson to find out more.
+내장 파이프가 필요를 충족하지 않는 경우, 사용자 정의 파이프를 생성할 수도 있습니다. 다음 레슨에서 더 많은 정보를 확인해보세요.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md b/adev/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md
index 601f6460b6a2..a443ba77b180 100644
--- a/adev/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md
@@ -1,12 +1,12 @@
-# Create a custom pipe
+# 사용자 정의 파이프 만들기
 
-You can create custom pipes in Angular to fit your data transformation needs.
+Angular에서 데이터 변환 요구 사항에 맞게 사용자 정의 파이프를 만들 수 있습니다.
 
-In this activity, you will create a custom pipe and use it in your template.
+이번 활동에서는 사용자 정의 파이프를 생성하고 템플릿에서 사용하는 방법을 배웁니다.
 
 <hr>
 
-A pipe is a TypeScript class with a `@Pipe` decorator. Here's an example:
+파이프는 `@Pipe` 데코레이터가 있는 TypeScript 클래스입니다. 다음은 예제입니다:
 
 ```ts
 import {Pipe, PipeTransform} from '@angular/core';
@@ -21,18 +21,18 @@ export class StarPipe implements PipeTransform {
 }
 ```
 
-The `StarPipe` accepts a string value and returns that string with stars around it. Take note that:
+`StarPipe`는 문자열 값을 받고 해당 문자열 주위에 별을 추가하여 반환합니다. 다음 사항에 유의하세요:
 
-- the name in the `@Pipe` decorator configuration is what will be used in the template
-- the `transform` function is where you put your logic
+- `@Pipe` 데코레이터 구성에서의 이름은 템플릿에서 사용될 이름입니다.
+- `transform` 함수는 로직을 작성하는 곳입니다.
 
-Alright, it's your turn to give this a try — you'll create the `ReversePipe`:
+좋습니다, 이제 당신의 차례입니다 — `ReversePipe`를 생성해 보세요:
 
 <docs-workflow>
 
 <docs-step title="Create the `ReversePipe`">
 
-In `reverse.pipe.ts` add the `@Pipe` decorator to the `ReversePipe` class and provide the following configuration:
+`reverse.pipe.ts` 파일에서 `ReversePipe` 클래스에 `@Pipe` 데코레이터를 추가하고 다음 구성을 제공하세요:
 
 ```ts
 @Pipe({
@@ -44,7 +44,7 @@ In `reverse.pipe.ts` add the `@Pipe` decorator to the `ReversePipe` class and pr
 
 <docs-step title="Implement the `transform` function">
 
-Now the `ReversePipe` class is a pipe. Update the `transform` function to add the reversing logic:
+이제 `ReversePipe` 클래스는 파이프입니다. `transform` 함수를 업데이트하여 역전 로직을 추가하세요:
 
 <docs-code language="ts" highlight="[3,4,5,6,7,8,9]">
 export class ReversePipe implements PipeTransform {
@@ -64,16 +64,16 @@ export class ReversePipe implements PipeTransform {
 </docs-step>
 
 <docs-step title="Use the `ReversePipe` in the template"></docs-step>
-With the pipe logic implemented, the final step is to use it in the template. In `app.component.ts` include the pipe in the template and add it to the component imports:
+파이프 로직을 구현한 후 마지막 단계는 템플릿에서 사용하는 것입니다. `app.component.ts`에서 템플릿에 파이프를 포함하고 구성 요소 가져오기에 추가하세요:
 
 <docs-code language="angular-ts" highlight="[3,4]">
 @Component({
     ...
-    template: `Reverse Machine: {{ word | reverse }}`
+    template: `역방향 기계: {{ word | reverse }}`
     imports: [ReversePipe]
 })
 </docs-code>
 
 </docs-workflow>
 
-And with that you've done it. Congratulations on completing this activity. You now know how to use pipes and even how to implement your own custom pipes.
+이로써 작업을 완료했습니다. 이 활동을 마친 것을 축하합니다. 이제 파이프 사용법과 자신만의 사용자 정의 파이프를 구현하는 방법을 알게 되었습니다.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/25-next-steps/README.md b/adev/src/content/tutorials/learn-angular/steps/25-next-steps/README.md
index f7a6fb5abecf..c72b80026295 100644
--- a/adev/src/content/tutorials/learn-angular/steps/25-next-steps/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/25-next-steps/README.md
@@ -1,18 +1,18 @@
-# Ready to explore more of Angular?
+# Angular에 대해 더 알아볼 준비가 되셨나요?
 
-You can also learn more in our [guides](overview) and [reference](api), or `ng new`.
+우리의 [가이드](overview) 및 [참조](api)에서 더 많은 것을 배울 수 있으며, `ng new`를 사용할 수도 있습니다.
 
 <docs-card-container>
-  <docs-card title="What is Angular?" href="overview">
-  Angular is the web development framework for building modern apps!
+  <docs-card title="Angular란 무엇인가요?" href="overview">
+  Angular는 현대 앱을 구축하기 위한 웹 개발 프레임워크입니다!
   </docs-card>
-  <docs-card title="Angular's Roadmap" href="roadmap">
-  Read about Angular's open source roadmap including current, future and accomplished projects.
+  <docs-card title="Angular의 로드맵" href="roadmap">
+  현재, 미래 및 완료된 프로젝트를 포함한 Angular의 오픈 소스 로드맵에 대해 읽어보세요.
   </docs-card>
-  <docs-card title="Playground" href="playground" link="Start playing">
-  Play with Angular in your browser!
+  <docs-card title="플레이그라운드" href="playground" link="게임 시작하기">
+  브라우저에서 Angular와 함께 놀아보세요!
   </docs-card>
-  <docs-card title="Angular YouTube Course" href="https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF" link="Start learning">
-  Check out the official Angular YouTube channel for videos, courses and more!
+  <docs-card title="Angular YouTube 강좌" href="https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF" link="학습 시작하기">
+  비디오, 강좌 및 그 외 더 많은 내용을 위해 공식 Angular YouTube 채널을 확인하세요!
   </docs-card>
-</docs-card-container>
+</docs-card-container>
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md b/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md
index d7f92b4935a8..256360edbdf8 100644
--- a/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md
@@ -1,30 +1,30 @@
-# Composing Components
+# 컴포넌트 구성
 
-You've learned to update the component template, component logic, and component styles, but how do you use a component in your application?
+당신은 컴포넌트 템플릿, 컴포넌트 로직, 그리고 컴포넌트 스타일을 업데이트하는 법을 배웠지만, 애플리케이션에서 컴포넌트를 어떻게 사용할 수 있을까요?
 
-The `selector` property of the component configuration gives you a name to use when referencing the component in another template. You use the `selector` like an HTML tag, for example `app-user` would be `<app-user />` in the template.
+컴포넌트 구성의 `selector` 속성은 다른 템플릿에서 컴포넌트를 참조할 때 사용할 이름을 제공합니다. `selector`는 HTML 태그처럼 사용하며, 예를 들어 `app-user`는 템플릿에서 `<app-user />`로 사용됩니다.
 
-In this activity, you'll learn how to compose components.
+이 활동에서는 컴포넌트를 구성하는 방법을 배울 것입니다.
 
 <hr/>
 
-In this example, there are two components `UserComponent` and `AppComponent`.
+이 예제에서는 두 개의 컴포넌트인 `UserComponent`와 `AppComponent`가 있습니다.
 
 <docs-workflow>
 
 <docs-step title="Add a reference to `UserComponent`">
-Update the `AppComponent` template to include a reference to the `UserComponent` which uses the selector `app-user`. Be sure to add `UserComponent` to the imports array of `AppComponent`, this makes it available for use in the `AppComponent` template.
+`UserComponent`에 대한 참조를 포함하도록 `AppComponent` 템플릿을 업데이트합니다. 이때 `app-user` 선택자를 사용합니다. `UserComponent`를 `AppComponent`의 imports 배열에 추가해야 하며, 이는 `AppComponent` 템플릿에서 사용할 수 있게 합니다.
 
 ```ts
 template: `<app-user />`,
 imports: [UserComponent]
 ```
 
-The component now displays the message `Username: youngTech`. You can update the template code to include more markup.
+이제 컴포넌트는 `Username: youngTech`라는 메시지를 표시합니다. 더 많은 마크업을 포함하도록 템플릿 코드를 업데이트할 수 있습니다.
 </docs-step>
 
 <docs-step title="Add more markup">
-Because you can use any HTML markup that you want in a template, try updating the template for `AppComponent` to also include more HTML elements. This example will add a `<section>` element as the parent of the `<app-user>` element.
+템플릿에는 원하는 HTML 마크업을 사용할 수 있으므로 `AppComponent`의 템플릿을 업데이트하여 더 많은 HTML 요소를 포함하도록 해보세요. 이 예제에서는 `<app-user>` 요소의 부모로 `<section>` 요소를 추가합니다.
 
 ```ts
 template: `<section><app-user /></section>`,
@@ -33,6 +33,6 @@ template: `<section><app-user /></section>`,
 </docs-step>
 
 </docs-workflow>
-You can use as much HTML markup and as many components as you need to bring your app idea to reality. You can even have multiple copies of your component on the same page.
+애플리케이션 아이디어를 현실로 가져오기 위해 필요한 만큼 많은 HTML 마크업과 많은 컴포넌트를 사용할 수 있습니다. 심지어 같은 페이지에 컴포넌트를 여러 번 복사하여 사용할 수도 있습니다.
 
-That's a great segue, how would you conditionally show a component based on data? Head to the next section to find out.
+그렇다면 데이터를 기반으로 컴포넌트를 조건부로 표시하려면 어떻게 해야 할까요? 다음 섹션으로 가서 알아보세요.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md b/adev/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md
index 9767fc201bd3..b2b726be419a 100644
--- a/adev/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md
@@ -1,16 +1,16 @@
-# Control Flow in Components - `@if`
+# 컴포넌트의 제어 흐름 - `@if`
 
-Deciding what to display on the screen for a user is a common task in application development. Many times, the decision is made programmatically using conditions.
+사용자에게 화면에 무엇을 표시할지를 결정하는 것은 애플리케이션 개발에서 일반적인 작업입니다. 종종 이 결정을 조건을 사용하여 프로그래밍적으로 수행합니다.
 
-To express conditional displays in templates, Angular uses the `@if` template syntax.
+템플릿에서 조건부 표시를 표현하기 위해 Angular는 `@if` 템플릿 구문을 사용합니다.
 
-In this activity, you'll learn how to use conditionals in templates.
+이 활동에서는 템플릿에서 조건문을 사용하는 방법을 배웁니다.
 
 <hr/>
 
-The syntax that enables the conditional display of elements in a template is `@if`.
+템플릿에서 요소의 조건부 디스플레이를 가능하게 하는 구문은 `@if`입니다.
 
-Here's an example of how to use the `@if` syntax in a component:
+다음은 컴포넌트에서 `@if` 구문을 사용하는 방법의 예입니다:
 
 ```angular-ts
 @Component({
@@ -26,26 +26,26 @@ class AppComponent {
 }
 ```
 
-Two things to take note of:
+주의해야 할 두 가지 사항:
 
-- There is an `@` prefix for the `if` because it is a special type of syntax called [Angular template syntax](guide/templates)
-- For applications using v16 and older please refer to the [Angular documentation for NgIf](guide/directives/structural-directives) for more information.
+- `if` 앞에 `@` 접두사가 있습니다. 이는 특수한 유형의 구문인 [Angular 템플릿 구문](guide/templates)입니다.
+- v16 및 이전 버전을 사용하는 애플리케이션의 경우 [NgIf에 대한 Angular 문서](guide/directives/structural-directives)를 참조하여 더 많은 정보를 확인하십시오.
 
 <docs-workflow>
 
-<docs-step title="Create a property called `isServerRunning`">
-In the `AppComponent` class, add a `boolean` property called `isServerRunning`, set the initial value to `true`.
+<docs-step title="isServerRunning이라는 속성을 생성합니다">
+`AppComponent` 클래스에 `isServerRunning`이라는 `boolean` 속성을 추가하고 초기 값을 `true`로 설정합니다.
 </docs-step>
 
-<docs-step title="Use `@if` in the template">
-Update the template to display the message `Yes, the server is running` if the value of `isServerRunning` is `true`.
+<docs-step title="템플릿에서 `@if` 사용">
+`isServerRunning`의 값이 `true`일 경우 메시지 `Yes, the server is running`을 표시하도록 템플릿을 업데이트합니다.
 
 </docs-step>
 
-<docs-step title="Use `@else` in the template">
-Now Angular supports native template syntax for defining the else case with the `@else` syntax. Update the template to display the message `No, the server is not running` as the else case.
+<docs-step title="템플릿에서 `@else` 사용">
+이제 Angular는 `@else` 구문으로 else 케이스를 정의하는 기본 템플릿 구문을 지원합니다. 템플릿을 업데이트하여 else 케이스로 메시지 `No, the server is not running`을 표시합니다.
 
-Here's an example:
+다음은 그 예입니다:
 
 ```angular-ts
 template: `
@@ -54,10 +54,10 @@ template: `
 `;
 ```
 
-Add your code to fill in the missing markup.
+누락된 마크업을 채우기 위해 코드를 추가하세요.
 
 </docs-step>
 
 </docs-workflow>
 
-This type of functionality is called conditional control flow. Next you'll learn how to repeat items in a template.
+이러한 유형의 기능은 조건부 제어 흐름이라고 합니다. 다음으로 템플릿에서 항목을 반복하는 방법을 배우게 됩니다.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.md b/adev/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.md
index 5e450e12e89e..653877665c6d 100644
--- a/adev/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.md
@@ -1,13 +1,13 @@
-# Control Flow in Components - `@for`
+# 컴포넌트에서의 제어 흐름 - `@for`
 
-Often when building web applications, you need to repeat some code a specific number of times - for example, given an array of names, you may want to display each name in a `<p>` tag.
+웹 애플리케이션을 구축할 때, 코드를 특정한 횟수만큼 반복해야 할 때가 많습니다. 예를 들어, 이름 배열이 주어지면 각 이름을 `<p>` 태그에 표시하고 싶을 수 있습니다.
 
-In this activity, you'll learn how to use `@for` to repeat elements in a template.
+이 활동에서는 템플릿에서 `@for`를 사용하여 요소를 반복하는 방법을 배웁니다.
 <hr/>
 
-The syntax that enables repeating elements in a template is `@for`.
+템플릿에서 요소를 반복할 수 있게 해주는 구문은 `@for`입니다.
 
-Here's an example of how to use the `@for` syntax in a component:
+다음은 컴포넌트에서 `@for` 구문을 사용하는 방법의 예입니다:
 
 ```angular-ts
 @Component({
@@ -23,15 +23,15 @@ export class AppComponent {
 }
 ```
 
-Two things to take note of:
+두 가지 유의해야 할 사항:
 
-* There is an `@` prefix for the `for` because it is a special syntax called [Angular template syntax](guide/templates)
-* For applications using v16 and older please refer to the [Angular documentation for NgFor](guide/directives/structural-directives)
+* `for` 앞에 `@` 접두사가 붙어 있습니다. 이는 [Angular 템플릿 구문](guide/templates)이라고 불리는 특별한 구문입니다.
+* v16 및 이전 버전을 사용하는 애플리케이션의 경우 [NgFor에 대한 Angular 문서](guide/directives/structural-directives)를 참조하세요.
 
 <docs-workflow>
 
-<docs-step title="Add the `users` property">
-In the `AppComponent` class, add a property called `users` that contains users and their names.
+<docs-step title="`users` 속성 추가">
+`AppComponent` 클래스에서 사용자와 그들의 이름을 포함하는 `users`라는 속성을 추가합니다.
 
 ```ts
 [{id: 0, name: 'Sarah'}, {id: 1, name: 'Amy'}, {id: 2, name: 'Rachel'}, {id: 3, name: 'Jessica'}, {id: 4, name: 'Poornima'}]
@@ -39,8 +39,8 @@ In the `AppComponent` class, add a property called `users` that contains users a
 
 </docs-step>
 
-<docs-step title="Update the template">
-Update the template to display each user name in a `p` element using the `@for` template syntax.
+<docs-step title="템플릿 업데이트">
+템플릿을 업데이트하여 `@for` 템플릿 구문을 사용하여 각 사용자 이름을 `p` 요소에 표시합니다.
 
 ```angular-html
 @for (user of users; track user.id) {
@@ -48,10 +48,10 @@ Update the template to display each user name in a `p` element using the `@for`
 }
 ```
 
-Note: the use of `track` is required, you may use the `id` or some other unique identifier.
+참고: `track`의 사용은 필수이며, `id` 또는 다른 고유 식별자를 사용할 수 있습니다.
 
 </docs-step>
 
 </docs-workflow>
 
-This type of functionality is called control flow. Next, you'll learn to customize and communicate with components - by the way, you're doing a great job so far.
+이러한 유형의 기능을 제어 흐름이라고 합니다. 다음에는 컴포넌트를 사용자 정의하고 통신하는 방법을 배웁니다. 그나저나, 지금까지 잘 하고 계십니다.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/6-property-binding/README.md b/adev/src/content/tutorials/learn-angular/steps/6-property-binding/README.md
index f00b852fac6f..05fb12711748 100644
--- a/adev/src/content/tutorials/learn-angular/steps/6-property-binding/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/6-property-binding/README.md
@@ -1,25 +1,25 @@
-# Property Binding in Angular
+# Angular에서의 속성 바인딩
 
-Property binding in Angular enables you to set values for properties of HTML elements, Angular components and more.
+Angular에서의 속성 바인딩은 HTML 요소, Angular 컴포넌트 등의 속성 값 설정을 가능하게 합니다.
 
-Use property binding to dynamically set values for properties and attributes. You can do things such as toggle button features, set image paths programmatically, and share values between components.
+속성 바인딩을 사용하여 속성과 속성 값들을 동적으로 설정할 수 있습니다. 버튼 기능 전환, 이미지 경로 프로그램적으로 설정, 컴포넌트 간 값 공유와 같은 작업을 할 수 있습니다.
 
-In this activity, you'll learn how to use property binding in templates.
+이 활동에서는 템플릿에서 속성 바인딩을 사용하는 방법을 배웁니다.
 
 <hr />
 
-To bind to an element's attribute, wrap the attribute name in square brackets. Here's an example:
+요소의 속성에 바인딩하려면 속성 이름을 대괄호로 감싸세요. 다음은 예시입니다:
 
 ```angular-html
 <img alt="photo" [src]="imageURL">
 ```
 
-In this example, the value of the `src` attribute will be bound to the class property `imageURL`. Whatever value `imageURL` has will be set as the `src` attribute of the `img` tag.
+이 예시에서 `src` 속성의 값은 `imageURL` 클래스 속성에 바인딩됩니다. `imageURL`이 가진 값이 `img` 태그의 `src` 속성으로 설정됩니다.
 
 <docs-workflow>
 
-<docs-step title="Add a property called `isEditable`" header="app.component.ts" language="ts">
-Update the code in `app.component.ts` by adding a property to the `AppComponent` class called `isEditable` with the initial value set to `true`.
+<docs-step title="`isEditable`이라는 속성 추가하기" header="app.component.ts" language="ts">
+`app.component.ts`의 코드를 업데이트하여 `AppComponent` 클래스에 `isEditable`이라는 속성을 추가하고 초기 값을 `true`로 설정합니다.
 
 <docs-code highlight="[2]">
 export class AppComponent {
@@ -28,8 +28,8 @@ export class AppComponent {
 </docs-code>
 </docs-step>
 
-<docs-step title="Bind to `contentEditable`" header="app.component.ts" language="ts">
-Next, bind the `contentEditable` attribute of the `div` to the `isEditable` property by using the <code aria-label="square brackets">[]</code> syntax.
+<docs-step title="`contentEditable`에 바인딩하기" header="app.component.ts" language="ts">
+다음으로, `<code aria-label="square brackets">[]</code>` 구문을 사용하여 `div`의 `contentEditable` 속성을 `isEditable` 속성에 바인딩합니다.
 
 <docs-code highlight="[3]" language="angular-ts">
 @Component({
@@ -41,6 +41,6 @@ Next, bind the `contentEditable` attribute of the `div` to the `isEditable` prop
 
 </docs-workflow>
 
-The div is now editable. Nice work 👍
+이제 div는 편집 가능합니다. 잘 했어요 👍
 
-Property binding is one of Angular's many powerful features. If you'd like to learn more checkout [the Angular documentation](guide/templates/property-binding).
+속성 바인딩은 Angular의 많은 강력한 기능 중 하나입니다. 더 알고 싶다면 [Angular 문서](guide/templates/property-binding)를 확인하세요.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/7-event-handling/README.md b/adev/src/content/tutorials/learn-angular/steps/7-event-handling/README.md
index a98d3b9179a6..3577bf49d862 100644
--- a/adev/src/content/tutorials/learn-angular/steps/7-event-handling/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/7-event-handling/README.md
@@ -1,12 +1,12 @@
-# Event handling
+# 이벤트 처리
 
-Event handling enables interactive features on web apps. It gives you the ability as a developer to respond to user actions like button presses, form submissions and more.
+이벤트 처리는 웹 앱에서 인터랙티브한 기능을 활성화합니다. 개발자로서 버튼 클릭, 양식 제출 등의 사용자 작업에 반응할 수 있는 기능을 제공합니다.
 
-In this activity, you'll learn how to add an event handler.
+이번 활동에서는 이벤트 핸들러를 추가하는 방법을 배웁니다.
 
 <hr />
 
-In Angular you bind to events with the parentheses syntax `()`. On a given element, wrap the event you want to bind to with parentheses and set an event handler. Consider this `button` example:
+Angular에서는 괄호 문법 `()`를 사용하여 이벤트에 바인딩합니다. 특정 요소에서 바인딩하려는 이벤트를 괄호로 감싸고 이벤트 핸들러를 설정합니다. 다음 `button` 예제를 고려해 보세요:
 
 ```angular-ts
 @Component({
@@ -20,14 +20,14 @@ class AppComponent {
 }
 ```
 
-In this example, the `greet()` function will run every time the button is clicked. Take note that the `greet()` syntax includes the trailing parenthesis.
+이 예제에서 `greet()` 함수는 버튼이 클릭될 때마다 실행됩니다. `greet()` 문법에는 닫는 괄호가 포함되어 있다는 점에 유의하세요.
 
-Alright, your turn to give this a try:
+자, 이제 여러분 차례입니다. 도전해 보세요:
 
 <docs-workflow>
 
-<docs-step title="Add an event handler">
-Add the `onMouseOver` event handler function in the `AppComponent` class. Use the following code as the implementation:
+<docs-step title="이벤트 핸들러 추가">
+`AppComponent` 클래스에 `onMouseOver` 이벤트 핸들러 함수를 추가하세요. 아래 코드를 구현으로 사용하세요:
 
 ```ts
 onMouseOver() {
@@ -37,8 +37,8 @@ onMouseOver() {
 
 </docs-step>
 
-<docs-step title="Bind to the template event">
-Update the template code in `app.component.ts` to bind to the `mouseover` event of the `section` element.
+<docs-step title="템플릿 이벤트에 바인딩">
+`app.component.ts`의 템플릿 코드를 업데이트하여 `section` 요소의 `mouseover` 이벤트에 바인딩하세요.
 
 ```angular-html
 <section (mouseover)="onMouseOver()">
@@ -48,4 +48,4 @@ Update the template code in `app.component.ts` to bind to the `mouseover` event
 
 </docs-workflow>
 
-And with a few steps in the code you've created your first event handler in Angular. Seems like you are getting pretty good at this, keep up the good work.
+코드에서 몇 단계만으로 Angular에서 첫 번째 이벤트 핸들러를 만들었습니다. 점점 더 잘하고 있는 것 같네요, 계속해서 좋은 작업 유지하세요.
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/8-input/README.md b/adev/src/content/tutorials/learn-angular/steps/8-input/README.md
index 44807ee5cff7..dc172c94751f 100644
--- a/adev/src/content/tutorials/learn-angular/steps/8-input/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/8-input/README.md
@@ -1,14 +1,14 @@
 # Component Communication with `@Input`
 
-Sometimes app development requires you to send data into a component. This data can be used to customize a component or perhaps send information from a parent component to a child component.
+가끔 앱 개발에서는 데이터를 컴포넌트로 전달해야 할 필요가 있습니다. 이 데이터는 컴포넌트를 사용자 정의하거나 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달하는 데 사용될 수 있습니다.
 
-Angular uses a concept called `Input`. This is similar to `props` in other frameworks. To create an `Input` property, use the `@Input` decorator.
+Angular는 `Input`이라는 개념을 사용합니다. 이는 다른 프레임워크의 `props`와 유사합니다. `Input` 속성을 만들려면 `@Input` 데코레이터를 사용하십시오.
 
-In this activity, you'll learn how to use the `@Input` decorator to send information to components.
+이번 활동에서는 `@Input` 데코레이터를 사용하여 컴포넌트에 정보를 전달하는 방법을 배우게 됩니다.
 
 <hr>
 
-To create an `Input` property, add the `@Input` decorator to a property of a component class:
+`Input` 속성을 생성하려면 컴포넌트 클래스의 속성에 `@Input` 데코레이터를 추가하십시오:
 
 <docs-code header="user.component.ts" language="ts">
 class UserComponent {
@@ -16,7 +16,7 @@ class UserComponent {
 }
 </docs-code>
 
-When you are ready to pass in a value through an `Input`, values can be set in templates using the attribute syntax. Here's an example:
+`Input`을 통해 값을 전달할 준비가 되었을 때, 템플릿에서 속성 구문을 사용하여 값을 설정할 수 있습니다. 예를 들면 다음과 같습니다:
 
 <docs-code header="app.component.ts" language="angular-ts" highlight="[3]">
 @Component({
@@ -26,30 +26,30 @@ When you are ready to pass in a value through an `Input`, values can be set in t
 class AppComponent {}
 </docs-code>
 
-Make sure you bind the property `occupation` in your `UserComponent`.
+`UserComponent`에서 `occupation` 속성을 바인딩해야 합니다.
 
 <docs-code header="user.component.ts" language="angular-ts">
 @Component({
   ...
-  template: `<p>The user's occupation is {{occupation}}</p>`
+  template: `<p>사용자의 직업은 {{occupation}}입니다.</p>`
 })
 </docs-code>
 
 <docs-workflow>
 
 <docs-step title="Define an `@Input` property">
-Update the code in `user.component.ts` to define an `Input` property on the `UserComponent` called `name`. For now, set the initial value to `empty string`. Be sure to update the template to interpolate the `name` property at the end of the sentence.
+`user.component.ts`의 코드를 업데이트하여 `UserComponent`에서 `name`이라는 `Input` 속성을 정의하십시오. 현재로서는 초기 값을 `empty string`으로 설정하십시오. 문장의 끝에 `name` 속성을 보간하도록 템플릿을 업데이트하는 것을 잊지 마세요.
 </docs-step>
 
 <docs-step title="Pass a value to the `@Input` property">
-Update the code in `app.component.ts` to send in the `name` property with a value of `"Simran"`.
+`app.component.ts`의 코드를 업데이트하여 `"Simran"` 값을 가진 `name` 속성을 전달하십시오.
 <br>
 
-When the code has been successfully updated, the app will display `The user's name is Simran`.
+코드가 성공적으로 업데이트되면 앱은 `사용자의 이름은 Simran입니다.`를 표시합니다.
 </docs-step>
 
 </docs-workflow>
 
-While this is great, it is only one direction of the component communication. What if you want to send information and data to a parent component from a child component? Check out the next lesson to find out.
+이것은 훌륭하지만, 컴포넌트 통신의 한 방향일 뿐입니다. 만약 자식 컴포넌트에서 부모 컴포넌트로 정보를 전달하고 싶다면 어떻게 해야 할까요? 다음 레슨에서 확인해 보세요.
 
-P.S. you are doing great - keep going 🎉
+P.S. 잘하고 있어요 - 계속 진행하세요 🎉
\ No newline at end of file
diff --git a/adev/src/content/tutorials/learn-angular/steps/9-output/README.md b/adev/src/content/tutorials/learn-angular/steps/9-output/README.md
index 94a21207a47b..aa3a44397841 100644
--- a/adev/src/content/tutorials/learn-angular/steps/9-output/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/9-output/README.md
@@ -1,14 +1,14 @@
-# Component Communication with `@Output`
+# 컴포넌트 통신을 위한 `@Output`
 
-When working with components it may be required to notify other components that something has happened. Perhaps a button has been clicked, an item has been added/removed from a list or some other important update has occurred. In this scenario components need to communicate with parent components.
+컴포넌트 작업 시 다른 컴포넌트에게 무언가 일이 발생했음을 알릴 필요가 있을 수 있습니다. 예를 들어 버튼이 클릭되었거나, 목록에서 항목이 추가/제거되었거나, 기타 중요한 업데이트가 발생했을 수 있습니다. 이러한 시나리오에서 컴포넌트는 부모 컴포넌트와 통신할 필요가 있습니다.
 
-Angular uses the `@Output` decorator to enable this type of behavior.
+Angular는 이러한 유형의 동작을 가능하게 하기 위해 `@Output` 데코레이터를 사용합니다.
 
-In this activity, you'll learn how to use the `@Output` decorator and `EventEmitter` to communicate with components.
+이번 활동에서는 `@Output` 데코레이터와 `EventEmitter`를 사용하여 컴포넌트와 통신하는 방법을 배울 것입니다.
 
 <hr />
 
-To create the communication path from child to parent components, use the `@Output` decorator on a class property and assign it a value of type `EventEmitter`:
+자식 컴포넌트에서 부모 컴포넌트로의 통신 경로를 만들기 위해, 클래스 속성에 `@Output` 데코레이터를 사용하고 그것에 `EventEmitter` 유형의 값을 할당합니다:
 
 <docs-code header="child.component.ts" language="ts">
 @Component({...})
@@ -17,7 +17,7 @@ class ChildComponent {
 }
 </docs-code>
 
-Now the component can generate events that can be listened to by the parent component. Trigger events by calling the `emit` method:
+이제 컴포넌트는 부모 컴포넌트에서 수신할 수 있는 이벤트를 생성할 수 있습니다. `emit` 메서드를 호출하여 이벤트를 트리거합니다:
 
 <docs-code header="child.component.ts" language="ts">
 class ChildComponent {
@@ -31,18 +31,18 @@ class ChildComponent {
 }
 </docs-code>
 
-The emit function will generate an event with the same type as the `EventEmitter` instance.
+emit 함수는 `EventEmitter` 인스턴스와 동일한 유형의 이벤트를 생성합니다.
 
-Alright, your turn to give this a try. Complete the code by following these tasks:
+좋습니다. 이제 여러분의 차례입니다. 다음 작업을 수행하여 코드를 완성해 보십시오:
 
 <docs-workflow>
 
 <docs-step title="Add an `@Output` property">
-Update `child.component.ts` by adding an output property called `addItemEvent`, be sure to set the EventEmitter type to be `string`.
+`child.component.ts`를 업데이트하여 `addItemEvent`라는 출력 속성을 추가하고 EventEmitter 유형을 `string`으로 설정해야 합니다.
 </docs-step>
 
 <docs-step title="Complete `addItem` method">
-In `child.component.ts` update the `addItem` method; use the following code as the logic:
+`child.component.ts`에서 `addItem` 메서드를 업데이트하고, 다음 코드를 논리로 사용합니다:
 
 <docs-code header="child.component.ts" highlight="[2]" language="ts">
 addItem() {
@@ -53,18 +53,18 @@ addItem() {
 </docs-step>
 
 <docs-step title="Update the `AppComponent` template">
-In `app.component.ts` update the template to listen to the emitted event by adding the following code:
+`app.component.ts`에서 템플릿을 업데이트하여 다음 코드를 추가하여 방출된 이벤트를 수신합니다:
 
 ```angular-html
 <app-child (addItemEvent)="addItem($event)" />
 ```
 
-Now, the "Add Item" button adds a new item to the list every time the button is clicked.
+이제 "Add Item" 버튼을 클릭할 때마다 목록에 새로운 아이템이 추가됩니다.
 
 </docs-step>
 
 </docs-workflow>
 
-Wow, at this point you've completed the component fundamentals - impressive 👏
+우와, 이 시점에서 여러분은 컴포넌트 기초를 완료했습니다 - 인상적입니다 👏
 
-Keep learning to unlock more of Angular's great features.
+Angular의 훌륭한 기능을 더 많이 잠금 해제하려면 계속 배우십시오.
\ No newline at end of file
diff --git a/adev/src/index.html b/adev/src/index.html
index 4b15ccb87c80..aba5c45e6df0 100644
--- a/adev/src/index.html
+++ b/adev/src/index.html
@@ -46,9 +46,9 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <!-- Primary Meta Tags -->
+    <!-- 주요 메타 태그 -->
     <meta name="title" content="Angular" />
-    <meta name="description" content="The web development framework for building modern apps." />
+    <meta name="description" content="현대적인 앱을 구축하기 위한 웹 개발 프레임워크." />
 
     <!-- Favicons -->
     <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png" />
@@ -70,10 +70,7 @@
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://angular.dev/" />
     <meta property="og:title" content="Angular" />
-    <meta
-      property="og:description"
-      content="The web development framework for building modern apps."
-    />
+    <meta property="og:description" content="현대적인 앱을 구축하기 위한 웹 개발 프레임워크" />
     <meta property="og:image" content="https://angular.dev/assets/images/ng-image.jpg" />
 
     <!-- Twitter -->
@@ -82,7 +79,7 @@
     <meta property="twitter:title" content="Angular" />
     <meta
       property="twitter:description"
-      content="The web development framework for building modern apps."
+      content="현대적인 앱을 구축하기 위한 웹 개발 프레임워크."
     />
     <meta property="twitter:image" content="https://angular.dev/assets/images/ng-image.jpg" />
 
diff --git a/firebase.json b/firebase.json
new file mode 100644
index 000000000000..5475d1896fcd
--- /dev/null
+++ b/firebase.json
@@ -0,0 +1,74 @@
+{
+  "hosting": {
+    "public": "dist/bin/adev/build/browser",
+    "ignore": [
+      "**/.*"
+    ],
+    "trailingSlash": false,
+    "headers": [
+      {
+        "source": "assets/images/tutorials/common/*.jpg",
+        "headers": [
+          {
+            "key": "Cross-Origin-Resource-Policy",
+            "value": "cross-origin"
+          },
+          {
+            "key": "Access-Control-Allow-Origin",
+            "value": "*"
+          }
+        ]
+      },
+      {
+        "source": "/**/*-[0-9A-Z][0-9A-Z][0-9A-Z][0-9A-Z][0-9A-Z][0-9A-Z][0-9A-Z][0-9A-Z].*",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "public,max-age=31536000,immutable"
+          },
+          {
+            "key": "Access-Control-Allow-Origin",
+            "value": "*"
+          }
+        ]
+      },
+      {
+        "source": "/[0-9a-f][0-9a-f][0-9a-f].[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].js",
+        "headers": [
+          {
+            "key": "Cross-Origin-Embedder-Policy",
+            "value": "require-corp"
+          }
+        ]
+      },
+      {
+        "source": "/@(ngsw-worker.js|ngsw.json)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-cache"
+          }
+        ]
+      },
+      {
+        "source": "/**",
+        "headers": [
+          {
+            "key": "Cross-Origin-Opener-Policy",
+            "value": "same-origin"
+          },
+          {
+            "key": "Cross-Origin-Embedder-Policy",
+            "value": "require-corp"
+          }
+        ]
+      }
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.csr.html"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 7555bf3d951d..312e03d92157 100644
--- a/package.json
+++ b/package.json
@@ -234,5 +234,6 @@
   "resolutions": {
     "**/https-proxy-agent": "7.0.6",
     "**/saucelabs": "9.0.2"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }