<\/p>\n
\n\uc138\uacc4\uc758 \uac1c\ubc1c\uc790 \uc911 74%\uac00 \ubb38\uc11c\ud654 \ub3c4\uad6c\ub85c \uba38\uba54\uc774\ub4dc\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4<\/strong>. \ucf54\ub4dc \uae30\ubc18 \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc73c\ub85c \ud611\uc5c5 \ud6a8\uc728\uc131\uc744 \ud601\uc2e0\ud558\ub294 \uc774 \ub3c4\uad6c\uc758 \ubaa8\ub4e0 \ucc28\ud2b8 \uc720\ud615\uc744 \ud30c\ud5e4\uccd0\ubcf4\uc138\uc694!<\/p>\n<\/blockquote>\n
\n\ud83e\udddc\u2640\ufe0f \uc11c\ub860: \ud14d\uc2a4\ud2b8\uac00 \uc2dc\uac01\uc801 \ub9c8\ubc95\uc73c\ub85c \ubcc0\uc2e0\ud558\ub294 \uc21c\uac04<\/h3>\n
\uba38\uba54\uc774\ub4dc(Mermaid)\ub294 \uac04\ub2e8\ud55c \ud14d\uc2a4\ud2b8 \uad6c\ubb38\uc73c\ub85c \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \uc0dd\uc131\ud558\ub294 \uc624\ud508\uc18c\uc2a4 \ub3c4\uad6c<\/strong>\uc785\ub2c8\ub2e4. \uac1c\ubc1c\uc790, \ud14c\ud06c\ub2c8\uceec \ub77c\uc774\ud130, \ud504\ub85c\uc81d\ud2b8 \uad00\ub9ac\uc790\uc5d0\uac8c "\ucf54\ub4dc\ub85c \uadf8\ub9bc \uadf8\ub9ac\uae30"\uc758 \ud601\uc2e0\uc744 \uac00\uc838\uc654\uc8e0. \ubcf5\uc7a1\ud55c GUI \ub3c4\uad6c \uc5c6\uc774 Markdown \ud30c\uc77c\uc5d0 \ubc14\ub85c \uc0bd\uc785 \uac00\ub2a5\ud574 GitHub, Notion, VS Code \ub4f1\uc5d0\uc11c \ud3ed\ubc1c\uc801\uc73c\ub85c \ud655\uc0b0 \uc911\uc774\uba70, \ubc84\uc804 \uad00\ub9ac\uc640 \ud611\uc5c5 \ud6a8\uc728\uc131<\/strong>\uc5d0\uc11c \uae30\uc874 \uc2dc\uac01\ud654 \ub3c4\uad6c\ub97c \uc555\ub3c4\ud569\ub2c8\ub2e4. \uc774\uc81c \uba38\uba54\uc774\ub4dc\uac00 \uc81c\uacf5\ud558\ub294 10\uac00\uc9c0 \ud575\uc2ec \ucc28\ud2b8 \uc885\ub958\uc640 \uadf8 \ud65c\uc6a9 \ube44\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\n\ud83d\udcca \ubcf8\ubb38: \uba38\uba54\uc774\ub4dc\uc758 \ud575\uc2ec \ucc28\ud2b8 10\uac00\uc9c0 \uc640 \uc2e4\uc804 \uc608\uc81c<\/h3>\n
1\ufe0f\u20e3 \ud750\ub984\ub3c4(Flowchart) – \ud504\ub85c\uc138\uc2a4 \uc2dc\uac01\ud654\uc758 \ud575\uc2ec<\/h4>\n
MERMAID_PLACEHOLDER_0<\/strong><\/p>\n
\n
- \ubaa9\uc801<\/strong>: \uc791\uc5c5 \ud750\ub984, \uc758\uc0ac\uacb0\uc815 \ud504\ub85c\uc138\uc2a4, \uc2dc\uc2a4\ud15c \uc544\ud0a4\ud14d\ucc98 \ud45c\ud604<\/li>\n
- \ud575\uc2ec \uc694\uc18c<\/strong>:\n
\n
- \ub178\ub4dc(
[\uc0ac\uac01\ud615]<\/code>,{\ub9c8\ub984\ubaa8}<\/code>,((\uc6d0\ud615)<\/code>)<\/li>\n- \ud654\uc0b4\ud45c(
--><\/code>,---<\/code>,-.-><\/code>)<\/li>\n<\/ul>\n<\/li>\n- \uc2e4\uc6a9\uc801 \ud301<\/strong>:
subgraph<\/code>\ub85c \uc139\uc158 \uadf8\ub8f9\ud654 \u25b6\ufe0f \ubcf5\uc7a1\ub3c4 \uc81c\uc5b4
\n\uc608\uc2dc:subgraph \uacb0\uc81c\uc2dc\uc2a4\ud15c [\uacb0\uc81c \ud504\ub85c\uc138\uc2a4]<\/code><\/em><\/li>\n<\/ul>\n2\ufe0f\u20e3 \uc2dc\ud000\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8(Sequence Diagram) – \uac1d\uccb4 \uac04 \uc0c1\ud638\uc791\uc6a9 \ucd94\uc801<\/h4>\n
MERMAID_PLACEHOLDER_1<\/strong><\/p>\n
\n
- \uc2e4\uc0ac\uc6a9 \uc0ac\ub840<\/strong>: \ub9c8\uc774\ud06c\ub85c\uc11c\ube44\uc2a4 \ud1b5\uc2e0 \ubd84\uc11d, API \ud638\ucd9c \uc2dc\ub098\ub9ac\uc624 \ub514\ubc84\uae45<\/li>\n
- \ud0a4\uc6cc\ub4dc<\/strong>:\n
\n
participant<\/code> (\uc561\ud130 \uc815\uc758)<\/li>\nactivate<\/code>\/deactivate<\/code> (\ud65c\uc131\ud654 \uad6c\uac04 \ud45c\uc2dc)<\/li>\nloop<\/code> (\ubc18\ubcf5 \uad6c\ubb38 \uc2dc\uac01\ud654)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n3\ufe0f\u20e3 \uac04\ud2b8 \ucc28\ud2b8(Gantt Chart) – \ud504\ub85c\uc81d\ud2b8 \uc77c\uc815 \uad00\ub9ac\uc758 \ud544\uc218 \ub3c4\uad6c<\/h4>\n
MERMAID_PLACEHOLDER_2<\/strong><\/p>\n
\n
- \ud575\uc2ec \uc635\uc158<\/strong>:\n
\n
crit<\/code>: \ud06c\ub9ac\ud2f0\uceec \ud328\uc2a4 \uac15\uc870<\/li>\nactive<\/code>: \uc9c4\ud589 \uc911 \ud0dc\uc2a4\ud06c \ud45c\uc2dc<\/li>\nprogress<\/code>: \uc644\ub8cc\uc728 \uc790\ub3d9 \uacc4\uc0b0<\/li>\n<\/ul>\n<\/li>\n- \uc7a5\uc810<\/strong>: \ub9ac\uc18c\uc2a4 \ud560\ub2f9 \uc2dc\uac01\ud654, \ub9c8\uc77c\uc2a4\ud1a4(
milestone<\/code>) \uc124\uc815 \uac00\ub2a5<\/li>\n<\/ul>\n4\ufe0f\u20e3 \ud074\ub798\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8(Class Diagram) – OOP \uad6c\uc870 \uba85\uc2dc\ud654<\/h4>\n
MERMAID_PLACEHOLDER_3<\/strong><\/p>\n
\n
- \uad6c\ubb38 \ud2b9\uc9d5<\/strong>:\n
\n
+<\/code>(public),-<\/code>(private) \ub4f1 \uc811\uadfc \uc81c\ud55c\uc790 \ud45c\uae30<\/li>\n- \uad00\uacc4\ud45c\ud604:
--><\/code> (\uc5f0\uad00),<|--<\/code> (\uc0c1\uc18d),o--<\/code> (Aggregation)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n5\ufe0f\u20e3 \uc0c1\ud0dc \ub2e4\uc774\uc5b4\uadf8\ub7a8(State Diagram) – \uc0dd\uba85\uc8fc\uae30 \ubaa8\ub378\ub9c1<\/h4>\n
MERMAID_PLACEHOLDER_4<\/strong><\/p>\n
\n
- \uc8fc\uc694 \uc6a9\ub3c4<\/strong>: \uc11c\ube44\uc2a4 \uc0c1\ud0dc \uc804\uc774(\uc608: \uc8fc\ubb38 \ucc98\ub9ac), IoT \ub514\ubc14\uc774\uc2a4 \ub3d9\uc791 \ud750\ub984<\/li>\n
stateDiagram-v2<\/code> \uc0ac\uc6a9 \uad8c\uc7a5 \u25b6\ufe0f \uc774\uc804 \ubc84\uc804\ubcf4\ub2e4 \uc2dc\ub9e8\ud2f1 \ud5a5\uc0c1<\/li>\n<\/ul>\n6\ufe0f\u20e3 \ud30c\uc774 \ucc28\ud2b8(Pie Chart) – \ub370\uc774\ud130 \ube44\uc728 \uc9c1\uad00\uc801 \ud3ec\ud604<\/h4>\n
MERMAID_PLACEHOLDER_5<\/strong><\/p>\n
\n
- \ub2e8\uc810 \ubcf4\uc644\ubc95<\/strong>: \ubcf5\uc7a1\ud55c \ub370\uc774\ud130\ub294
showData<\/code> \uc635\uc158 \ucd94\uac00
\n\uc608:pie showData<\/code><\/em><\/li>\n<\/ul>\n7\ufe0f\u20e3 \uc5d4\ud2f0\ud2f0 \uad00\uacc4\ub3c4(ER Diagram) – \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc124\uacc4<\/h4>\n
MERMAID_PLACEHOLDER_6<\/strong><\/p>\n
\n
- \uae30\ud638 \uc758\ubbf8<\/strong>:\n
\n
||<\/code> (One),{}<\/code> (Many)<\/li>\n|o<\/code> (Optional),}<\/code> (One-to-Many)<\/li>\n<\/ul>\n<\/li>\n- \uc7a5\uc810<\/strong>: \ubb3c\ub9ac\uc801\/\ub17c\ub9ac\uc801 DB \ubaa8\ub378\ub9c1 \ub3d9\uc2dc \uc9c0\uc6d0<\/li>\n<\/ul>\n
8\ufe0f\u20e3 \uae43 \uadf8\ub798\ud504(Git Graph) – \ube0c\ub79c\uce58 \uc804\ub7b5 \uc2dc\uac01\ud654<\/h4>\n
MERMAID_PLACEHOLDER_7<\/strong><\/p>\n
\n
- \uc2e4\ubb34 \uc801\uc6a9<\/strong>: PR \uba38\uc9c0 \uc804\ub7b5 \uac80\uc99d, \ube0c\ub79c\uce58 \uc758\uc874\uc131 \ubd84\uc11d<\/li>\n
- \uc9c4\ud654 \uc911\uc778 \uae30\ub2a5<\/strong>: \ud0dc\uadf8(
tag<\/code>), \uccb4\ub9ac\ud53d(cherry-pick<\/code>) \ud45c\ud604 \ucd94\uac00 \uc608\uc815<\/li>\n<\/ul>\n9\ufe0f\u20e3 \uc0ac\uc6a9\uc790 \uc5ec\uc815\ub3c4(User Journey Map) – CX \ucd5c\uc801\ud654 \ub3c4\uad6c<\/h4>\n
MERMAID_PLACEHOLDER_8<\/strong><\/p>\n
\n
- \ucc38\uc870\uc8fc\uccb4 \uba85\uc2dc\ubc95<\/strong>:
: \uc0ac\uc6a9\uc790<\/code>\ucc98\ub7fc append \uac00\ub2a5<\/li>\n- UX \uac1c\uc120\uc810 \ub3c4\ucd9c<\/strong>: \uac01 \ub2e8\uacc4\ubcc4 \uc18c\uc694 \uc2dc\uac04 \ubd84\uc11d\uc5d0 \ud65c\uc6a9<\/li>\n<\/ul>\n
\ud83d\udd1f \ucffc\ub4dc\ub7f0\ud2b8 \ucc28\ud2b8(Quadrant Chart) – \uc804\ub7b5\uc801 \ud504\ub808\uc784\uc6cc\ud06c \u2605 \ucd5c\uc2e0 \uae30\ub2a5<\/h4>\n
(\uba38\uba54\uc774\ub4dc 9.2.0 \uc774\uc0c1 \uc9c0\uc6d0)<\/em>
\nMERMAID_PLACEHOLDER_9<\/strong><\/p>\n\n
- \uc801\uc6a9 \ubd84\uc57c<\/strong>: \uc81c\ud488 \ud3ec\ud2b8\ud3f4\ub9ac\uc624 \ubd84\uc11d, \ub9c8\ucf00\ud305 \uc804\ub7b5 \ub9e4\ud2b8\ub9ad\uc2a4<\/li>\n
x-axis<\/code>,y-axis<\/code> \ucd95 \uc815\uc758\uac00 \uc131\uacf5 \ud575\uc2ec<\/li>\n<\/ul>\n
\n\u2705 \uacb0\ub860: \ub2f9\uc2e0\uc758 \ubb38\uc11c\ub825\uc774 \uc5c5\uadf8\ub808\uc774\ub4dc\ub418\ub294 \uc21c\uac04<\/h3>\n
\uba38\uba54\uc774\ub4dc \ucc28\ud2b8\ub294 \uc124\uacc4 \ubb38\uc11c\uc758 \uba85\ud655\uc131\uacfc \ud611\uc5c5 \uc18d\ub3c4<\/strong>\ub97c \ub3d9\uc2dc\uc5d0 \ud574\uacb0\ud569\ub2c8\ub2e4. \uc624\ub298 \ubc30\uc6b4 10\uac00\uc9c0 \ucc28\ud2b8 \uc911 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc989\uc2dc \ud65c\uc6a9\ud560 3\uac00\uc9c0\ub294:<\/p>\n
\n
- \uc720\uc2a4\ucf00\uc774\uc2a4 \uc2a4\ud399 \uc791\uc131 \uc2dc<\/strong> \u2192 \uc2dc\ud000\uc2a4 \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc73c\ub85c \uc0c1\ud638\uc791\uc6a9 \uba85\uc2dc\ud654<\/li>\n
- \uc2a4\ud504\ub9b0\ud2b8 \uc77c\uc815 \uad00\ub9ac<\/strong> \u2192 \uac04\ud2b8 \ucc28\ud2b8\ub85c \uc791\uc5c5\ub7c9 \uac00\uc2dc\ud654<\/li>\n
- \uc2dc\uc2a4\ud15c \uacb0\ud568 \uc9c4\ub2e8<\/strong> \u2192 \uc0c1\ud0dc \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc73c\ub85c \uc804\uc774 \uc624\ub958 \ud3ec\ucc29<\/li>\n<\/ol>\n
\n\u2728 \uc9c0\uae08 \uc2dc\uc791\ud574\ubcf4\uc138\uc694!<\/strong>
\nVS Code\uc5d0 Mermaid Preview Extension<\/a>\uc744 \uc124\uce58\ud558\uac70\ub098 [Mermaid Live Editor](https:\/\/mermaid.live<\/a><\/p>\n<\/blockquote>\n<\/p>\n
import mermaid from ‘https:\/\/cdn.jsdelivr.net\/npm\/mermaid@10\/dist\/mermaid.esm.min.mjs’;<\/p>\n
mermaid.initialize({
\n startOnLoad: true,
\n theme: ‘default’,
\n securityLevel: ‘strict’,
\n fontFamily: ‘Arial, sans-serif’,
\n flowchart: {
\n useMaxWidth: true,
\n htmlLabels: true,
\n curve: ‘basis’,
\n },
\n });<\/p>\n\/\/ \ud398\uc774\uc9c0 \ub85c\ub4dc \ud6c4 \ub80c\ub354\ub9c1
\n if (document.readyState === ‘loading’) {
\n document.addEventListener(‘DOMContentLoaded’, () => {
\n mermaid.run();
\n });
\n } else {
\n mermaid.run();
\n }<\/p>\n","protected":false},"excerpt":{"rendered":"\uba38\uba54\uc774\ub4dc \ucc28\ud2b8 \uc644\ubcbd \uac00\uc774\ub4dc: \uc885\ub958\uc640 \ud65c\uc6a9\ubc95 \ucd1d\uc815\ub9ac \uc138\uacc4\uc758 \uac1c\ubc1c\uc790 \uc911 74%\uac00 \ubb38\uc11c\ud654 \ub3c4\uad6c\ub85c \uba38\uba54\uc774\ub4dc\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ucf54\ub4dc \uae30\ubc18 \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc73c\ub85c \ud611\uc5c5 \ud6a8\uc728\uc131\uc744 \ud601\uc2e0\ud558\ub294 \uc774 \ub3c4\uad6c\uc758 \ubaa8\ub4e0 \ucc28\ud2b8 \uc720\ud615\uc744 \ud30c\ud5e4\uccd0\ubcf4\uc138\uc694! \ud83e\udddc\u2640\ufe0f \uc11c\ub860: \ud14d\uc2a4\ud2b8\uac00 \uc2dc\uac01\uc801 \ub9c8\ubc95\uc73c\ub85c \ubcc0\uc2e0\ud558\ub294 \uc21c\uac04 \uba38\uba54\uc774\ub4dc(Mermaid)\ub294 \uac04\ub2e8\ud55c \ud14d\uc2a4\ud2b8 \uad6c\ubb38\uc73c\ub85c \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc744 \uc0dd\uc131\ud558\ub294 \uc624\ud508\uc18c\uc2a4 \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uac1c\ubc1c\uc790, \ud14c\ud06c\ub2c8\uceec \ub77c\uc774\ud130, \ud504\ub85c\uc81d\ud2b8 \uad00\ub9ac\uc790\uc5d0\uac8c "\ucf54\ub4dc\ub85c \uadf8\ub9bc \uadf8\ub9ac\uae30"\uc758 \ud601\uc2e0\uc744 \uac00\uc838\uc654\uc8e0. \ubcf5\uc7a1\ud55c GUI \ub3c4\uad6c… <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[52],"tags":[],"class_list":["post-5409","post","type-post","status-publish","format-standard","hentry","category-blog-tips"],"jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts\/5409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5409"}],"version-history":[{"count":0,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=\/wp\/v2\/posts\/5409\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ggonggong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}