{"id":5400,"date":"2025-12-21T09:23:34","date_gmt":"2025-12-21T00:23:34","guid":{"rendered":"https:\/\/secondlife.lol\/?p=5400"},"modified":"2025-12-21T15:45:20","modified_gmt":"2025-12-21T06:45:20","slug":"opencode-nextjs-tutorial","status":"publish","type":"post","link":"https:\/\/secondlife.lol\/en\/opencode-nextjs-tutorial\/","title":{"rendered":"OpenCode\uc640 Next.js\ub85c \ud504\ub860\ud2b8\uc5d4\ub4dc UI \ube60\ub974\uac8c \ub9cc\ub4e4\uae30"},"content":{"rendered":"<style>.kb-image5400_c22312-57 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5400_c22312-57\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"600\" height=\"488\" src=\"https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-4-600x488.jpg\" alt=\"OpenCode-Next.js post image\" class=\"kb-img wp-image-5665\" srcset=\"https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-4-600x488.jpg 600w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-4-300x244.jpg 300w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-4-768x625.jpg 768w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-4-15x12.jpg 15w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-4.jpg 988w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc740 \ucd08\uae09\uc790\uc5d0\uac8c \ub9e4\ub825\uc801\uc774\uc9c0\ub9cc, \ub3d9\uc2dc\uc5d0 \ub9e4\uc6b0 \ubcf5\uc7a1\ud558\uac8c \ub290\uaef4\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>\ud2b9\ud788 <a href=\"https:\/\/nextjs.org\/\" target=\"_blank\" rel=\"noopener\">Next.js<\/a>\uc5d0\uc11c\ub294 \ud3f4\ub354 \uad6c\uc870, \ub77c\uc6b0\ud305 \ubc29\uc2dd, \uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8\/\ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ubd84 \ub4f1<br>\ucc98\uc74c \uc811\ud558\uba74 \ubc14\ub85c \ub9c9\ud788\ub294 \ubd80\ubd84\uc774 \ub9ce\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud558\uc9c0\ub9cc <strong><a href=\"https:\/\/secondlife.lol\/ai-ide-opencode-intro\/\" data-type=\"post\" data-id=\"5350\">OpenCode<\/a><\/strong>\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud558\uba74 \uc0c1\ud669\uc774 \ud06c\uac8c \ub2ec\ub77c\uc9d1\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ucef4\ud3ec\ub10c\ud2b8 \uc790\ub3d9 \uc0dd\uc131<\/li>\n\n\n\n<li>\ud398\uc774\uc9c0 \ud750\ub984\ub3c4 \uc124\uba85<\/li>\n\n\n\n<li>CSS\/\uc2a4\ud0c0\uc77c\ub9c1 \uc81c\uc548<\/li>\n\n\n\n<li>\uc0c1\ud0dc \uad00\ub9ac \ubc29\uc2dd \ucd94\ucc9c<\/li>\n\n\n\n<li>\ub3d9\uc801 \ub77c\uc6b0\ud305 \uad6c\uc870 \uc548\ub0b4<\/li>\n\n\n\n<li>\ud2b9\ud788 \u201cAI coding agent\u201d \uc911 <strong>@frontend-ui-ux-engineer<\/strong> \uc5d0\uc774\uc804\ud2b8\ub294 UI\/UX \uc124\uacc4\uc5d0 \ud2b9\ud654\ub418\uc5b4 \uc788\uc5b4<\/li>\n\n\n\n<li>\ucd08\uae09 \uac1c\ubc1c\uc790\uc5d0\uac8c \ub9e4\uc6b0 \ub192\uc740 \uc0dd\uc0b0\uc131\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ubc88 \uae00\uc5d0\uc11c\ub294<br><strong>Next.js \uc0c8 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 \u2192 \uae30\ubcf8 \ud398\uc774\uc9c0 \uad6c\uc131 \u2192 \ucef4\ud3ec\ub10c\ud2b8 \uc790\ub3d9 \uc0dd\uc131 \u2192 UI \uac1c\uc120 \u2192 \uc0c1\ud0dc \uad00\ub9ac<\/strong><br>\uae4c\uc9c0 \uc2e4\uc81c \uc608\uc81c\ub97c \ud1b5\ud574 \ub2e4\ub904\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id83_5f28a6-34 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);border-top:3px solid var(--global-palette2, #2B6CB0);border-right:3px solid var(--global-palette2, #2B6CB0);border-bottom:3px solid var(--global-palette2, #2B6CB0);border-left:3px solid var(--global-palette2, #2B6CB0);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0px 0px 14px 0px rgba(0, 0, 0, 0.2);}.kb-table-of-content-nav.kb-table-of-content-id83_5f28a6-34 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id83_5f28a6-34 .kb-table-of-contents-title-wrap{color:var(--global-palette2, #2B6CB0);}.kb-table-of-content-nav.kb-table-of-content-id83_5f28a6-34 .kb-table-of-contents-title{color:var(--global-palette2, #2B6CB0);font-size:28px;font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id83_5f28a6-34 .kb-table-of-content-wrap .kb-table-of-content-list{color:var(--global-palette1, #3182CE);line-height:2em;font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id83_5f28a6-34 .kb-table-of-content-wrap .kb-table-of-content-list .kb-table-of-contents__entry:hover{color:var(--global-palette6, #718096);}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id83_5f28a6-34 .kb-table-of-content-wrap{border-top:3px solid var(--global-palette2, #2B6CB0);border-right:3px solid var(--global-palette2, #2B6CB0);border-bottom:3px solid var(--global-palette2, #2B6CB0);border-left:3px solid var(--global-palette2, #2B6CB0);}}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id83_5f28a6-34 .kb-table-of-contents-title{font-size:28px;}}@media all and (max-width: 767px){.kb-table-of-content-nav.kb-table-of-content-id83_5f28a6-34 .kb-table-of-content-wrap{border-top:3px solid var(--global-palette2, #2B6CB0);border-right:3px solid var(--global-palette2, #2B6CB0);border-bottom:3px solid var(--global-palette2, #2B6CB0);border-left:3px solid var(--global-palette2, #2B6CB0);}.kb-table-of-content-nav.kb-table-of-content-id83_5f28a6-34 .kb-table-of-contents-title{font-size:28px;}}<\/style>\n\n\n<h1 class=\"wp-block-heading\">1. Next.js \uc0c8 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131\ud558\uae30<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\uba3c\uc800 Next.js \ud504\ub85c\uc81d\ud2b8\ubd80\ud130 \ub9cc\ub4ed\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-next-app@latest my-next-app\ncd my-next-app<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc635\uc158\ub4e4\uc740 \uae30\ubcf8\uac12\uc744 \uc0ac\uc6a9\ud574\ub3c4 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uc81c \uc791\uc5c5 \ud3f4\ub354\uc5d0\uc11c OpenCode\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>opencode<\/code><\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">2. OpenCode\uc5d0\uac8c Next.js \uae30\ubcf8 \uad6c\uc870 \uc124\uba85\ubc1b\uae30<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">TUI\uc5d0\uc11c \ub2e4\uc74c\ucc98\ub7fc \uc694\uccad\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/ask Next.js 14 \ubc84\uc804 \uae30\uc900 \ud3f4\ub354 \uad6c\uc870\ub97c \ucd08\uae09\uc790 \uc785\uc7a5\uc5d0\uc11c \uc124\uba85\ud574\uc918. app router \uc911\uc2ec\uc73c\ub85c, \uc5b4\ub5a4 \ud30c\uc77c\uc774 \uc5b4\ub5a4 \uc5ed\ud560\uc778\uc9c0 10\uc904 \uc774\ub0b4\ub85c \uc54c\ub824\uc918.<\/code><\/pre>\n\n\n<style>.kb-image5400_c7c5b6-c5 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image5400_c7c5b6-c5\"><figure class=\"aligncenter size-medium_large\"><img decoding=\"async\" width=\"768\" height=\"436\" src=\"https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-31-768x436.png\" alt=\"OpenCode-Next.js \uc124\uba85 \uc774\ubbf8\uc9c0\" class=\"kb-img wp-image-5660\" srcset=\"https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-31-768x436.png 768w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-31-300x170.png 300w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-31-600x341.png 600w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-31-18x10.png 18w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-31.png 1200w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \uc694\uccad\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \ud6a8\uacfc\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>app\/page.tsx\uc758 \uc758\ubbf8 \uc774\ud574<\/li>\n\n\n\n<li>\ub808\uc774\uc544\uc6c3 \ud30c\uc77c(layout.tsx) \uc5ed\ud560 \ud30c\uc545<\/li>\n\n\n\n<li>\uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8\/\ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 \ucc28\uc774 \uc774\ud574<\/li>\n\n\n\n<li>\ub77c\uc6b0\ud305\uc774 \uc5b4\ub5bb\uac8c \uc774\ub8e8\uc5b4\uc9c0\ub294\uc9c0 \ube60\ub974\uac8c \uac10 \uc7a1\uae30<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ucd08\uae09\uc790\uac00 \uac00\uc7a5 \ub9ce\uc774 \ub9c9\ud788\ub294 \ubd80\ubd84\uc744 \ubc14\ub85c \ud574\uacb0\ud574 \uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">3. \uccab \ubc88\uc9f8 \ud398\uc774\uc9c0 \uc0dd\uc131 \u2014 \ub300\ud654 \uae30\ubc18 \uac1c\ubc1c \ud750\ub984<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\uc81c\ub85c \u201c\uba54\ubaa8 \ub9ac\uc2a4\ud2b8 \ud398\uc774\uc9c0\u201d\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">TUI\uc5d0 \uc785\ub825<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@frontend-ui-ux-engineer \n\uba54\ubaa8 \ubaa9\ub85d\uc744 \ubcf4\uc5ec\uc8fc\ub294 \/memo \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uc5b4\uc918.\n\uce74\ub4dc \uc2a4\ud0c0\uc77c\ub85c \uc791\uc131\ud558\uace0, \ub354\ubbf8 \ub370\uc774\ud130 3\uac1c\ub97c \ud45c\uc2dc\ud574\uc918.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7ec\uba74 \ub2e4\uc74c\uc774 \uc790\ub3d9 \uc0dd\uc131\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>app\/memo\/page.tsx<\/code><\/li>\n\n\n\n<li>\uce74\ub4dc \uc2a4\ud0c0\uc77c \ucef4\ud3ec\ub10c\ud2b8<\/li>\n\n\n\n<li>\uac04\ub2e8\ud55c UI \uad6c\uc131(Layout \ud3ec\ud568)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\uc6d0\ud558\ub294 \uc2a4\ud0c0\uc77c\uc744 \ucd94\uac00\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\uc880 \ub354 \ubaa8\ub358\ud55c \uc2a4\ud0c0\uc77c\ub85c \ubc14\uafd4\uc918.\nTailwind \uae30\ubc18\uc73c\ub85c padding\uacfc shadow\ub97c \uc870\uc808\ud574\uc918.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ucd08\uae09\uc790\uc5d0\uac8c \uc5b4\ub824\uc6b4 CSS \uac10\ub3c4 \ubc14\ub85c \ud574\uacb0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc704\ub97c \ubc18\uc601\ud55c \uacb0\uacfc\uc785\ub2c8\ub2e4.<\/p>\n\n\n<style>.kb-image5400_e90a74-1c .kb-image-has-overlay:after{opacity:0.3;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;}.kb-image5400_e90a74-1c img.kb-img, .kb-image5400_e90a74-1c .kb-img img{border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0px 0px 14px 0px rgba(0, 0, 0, 0.2);}<\/style>\n<div class=\"wp-block-kadence-image kb-image5400_e90a74-1c\"><figure class=\"aligncenter size-medium_large\"><img decoding=\"async\" width=\"768\" height=\"385\" src=\"https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-1-768x385.jpg\" alt=\"memo react app image\" class=\"kb-img wp-image-5661\" srcset=\"https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-1-768x385.jpg 768w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-1-300x150.jpg 300w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-1-600x301.jpg 600w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-1-18x9.jpg 18w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-1.jpg 1200w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<h1 class=\"wp-block-heading\">4. \ucef4\ud3ec\ub10c\ud2b8 \uc790\ub3d9 \uc0dd\uc131 \u2014 \ubc18\ubcf5 \uc791\uc5c5 \uc81c\uac70<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uc81c \uba54\ubaa8 \ud398\uc774\uc9c0\uc5d0\uc11c \uc0ac\uc6a9\ud560 \ub9ac\uc2a4\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@frontend-ui-ux-engineer \nMemoCard\ub77c\ub294 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud574\uc918.\nprops: title, content, createdAt.\n\ud504\ub860\ud2b8\uc5d4\ub4dc \ucd08\ubcf4\uc790\uac00 \uc774\ud574\ud558\uae30 \uc26c\uc6b4 \uc8fc\uc11d\uc744 \ucd94\uac00\ud574\uc918.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7ec\uba74 \ub2e4\uc74c \ud30c\uc77c\uc774 \uc0dd\uc131\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>components\/MemoCard.tsx<\/code><\/pre>\n\n\n<style>.kb-image5400_9dc29c-e6 .kb-image-has-overlay:after{opacity:0.3;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;}.kb-image5400_9dc29c-e6 img.kb-img, .kb-image5400_9dc29c-e6 .kb-img img{border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0px 0px 14px 0px rgba(0, 0, 0, 0.2);}<\/style>\n<div class=\"wp-block-kadence-image kb-image5400_9dc29c-e6\"><figure class=\"aligncenter size-medium_large\"><img decoding=\"async\" width=\"768\" height=\"488\" src=\"https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-2-768x488.jpg\" alt=\"MemoCard.tsx image\" class=\"kb-img wp-image-5662\" srcset=\"https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-2-768x488.jpg 768w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-2-300x191.jpg 300w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-2-600x382.jpg 600w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-2-18x12.jpg 18w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-2.jpg 1200w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\ub0b4\uc6a9 \uc608<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"use client\";\n\nexport default function MemoCard({ title, content, createdAt }) {\n  return (\n    &lt;div className=\"p-4 rounded-xl shadow-sm bg-white\">\n      &lt;h2 className=\"text-lg font-semibold\">{title}&lt;\/h2>\n      &lt;p className=\"text-gray-700 mt-2\">{content}&lt;\/p>\n      &lt;p className=\"text-xs text-gray-500 mt-4\">{createdAt}&lt;\/p>\n    &lt;\/div>\n  );\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\uc774\uc5b4\uc9c0\ub294 \uc790\ub3d9\ud654 \uc694\uccad<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\uc774 \ucef4\ud3ec\ub10c\ud2b8\ub97c app\/memo\/page.tsx\uc5d0\uc11c import \ud574\uc11c \uc0ac\uc6a9\ud558\ub3c4\ub85d \uc218\uc815\ud574\uc918.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub7f0 \uc2dd\uc73c\ub85c \ub300\ud654 \uae30\ubc18 \ud750\ub984\uc73c\ub85c \uac1c\ubc1c\uc744 \uc9c4\ud589\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">5. API \uc5f0\ub3d9 \u2014 \uae30\ubcf8 fetch \ud568\uc218 \uc790\ub3d9 \uc0dd\uc131<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\uc81c\ub85c<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/ask Next.js\uc5d0\uc11c \uba54\ubaa8 \ub370\uc774\ud130\ub97c \ubd88\ub7ec\uc624\ub294 fetch \ud568\uc218 \uc608\uc2dc\ub97c \ub9cc\ub4e4\uc5b4\uc918.\napp router \uae30\uc900\uc73c\ub85c \ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud560 \ubc84\uc804\uc73c\ub85c \uc791\uc131\ud574\uc918.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7ec\uba74 AI\ub294<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>fetch \ucf54\ub4dc<\/li>\n\n\n\n<li>error \ucc98\ub9ac<\/li>\n\n\n\n<li>loading \uc0c1\ud0dc<\/li>\n\n\n\n<li>\ub370\uc774\ud130 \ud0c0\uc785 \uc815\uc758<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ub4f1\uc744 \ubaa8\ub450 \ud3ec\ud568\ud574 \uc81c\uc548\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">6. \ud398\uc774\uc9c0 \ub124\ube44\uac8c\uc774\uc158 &amp; \ub3d9\uc801 \ub77c\uc6b0\ud305 \uc790\ub3d9 \uc0dd\uc131<\/h1>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5400_9aaa1b-a1, .wp-block-kadence-advancedheading.kt-adv-heading5400_9aaa1b-a1[data-kb-block=\"kb-adv-heading5400_9aaa1b-a1\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5400_9aaa1b-a1 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5400_9aaa1b-a1[data-kb-block=\"kb-adv-heading5400_9aaa1b-a1\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5400_9aaa1b-a1 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5400_9aaa1b-a1[data-kb-block=\"kb-adv-heading5400_9aaa1b-a1\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading5400_9aaa1b-a1 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading5400_9aaa1b-a1\">Next.js\uc5d0\uc11c \ub3d9\uc801 \ub77c\uc6b0\ud305\uc740 \ucd08\ubcf4\uc790\uc5d0\uac8c \uac00\uc7a5 \uc5b4\ub835\uc2b5\ub2c8\ub2e4.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\uc74c\ucc98\ub7fc \uc694\uccad\ud574\ubcf4\uc138\uc694.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@frontend-ui-ux-engineer \n\/memo\/&#91;id] \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uc5b4\uc918.\nid\ub85c \uba54\ubaa8 \uc0c1\uc138 \ub0b4\uc6a9\uc744 \ud45c\uc2dc\ud558\ub294 \uae30\ubcf8 UI\ub97c \ucd94\uac00\ud574\uc918.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7ec\uba74<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud3f4\ub354 \uc0dd\uc131: <code>app\/memo\/[id]\/page.tsx<\/code><\/li>\n\n\n\n<li>params \ucc98\ub9ac \ucf54\ub4dc<\/li>\n\n\n\n<li>\ub354\ubbf8 \ub370\uc774\ud130 \ud639\uc740 fetch \uad6c\uc870<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ub97c \uc790\ub3d9 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">7. UI \uac1c\uc120 &amp; UX \uc81c\uc548 \u2014 \ucd08\uae09\uc790\uac00 \uc5bb\uae30 \ud798\ub4e0 \uc2dc\uac01\uc801 \ud53c\ub4dc\ubc31<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">OpenCode\ub294 \ub2e8\uc21c\ud55c \ucf54\ub4dc \uc0dd\uc131\uae30\uac00 \uc544\ub2c8\ub77c \u201c\ub514\uc790\uc778 \uc870\ub825\uc790\u201d \uc5ed\ud560\ub3c4 \uc218\ud589\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\ud604\uc7ac memo \ubaa9\ub85d UI\ub97c \uc870\uae08 \ub354 \ud604\ub300\uc801\uc778 \ub290\ub08c\uc73c\ub85c \ub2e4\ub4ec\uc5b4\uc918.\n\uc5ec\ubc31, \uadf8\ub9bc\uc790, \ud3f0\ud2b8 \uacc4\uce35\uc744 \ub354 \uc815\uad50\ud558\uac8c \uc870\uc808\ud574\uc918.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub610\ub294<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\ubaa8\ubc14\uc77c \ud654\uba74 \uae30\uc900\uc73c\ub85c \ubc18\uc751\ud615 \uc2a4\ud0c0\uc77c\uc744 \uac1c\uc120\ud574\uc918.<\/code><\/pre>\n\n\n<style>.kb-image5400_266b08-da .kb-image-has-overlay:after{opacity:0.3;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;}.kb-image5400_266b08-da img.kb-img, .kb-image5400_266b08-da .kb-img img{border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0px 0px 14px 0px rgba(0, 0, 0, 0.2);}<\/style>\n<div class=\"wp-block-kadence-image kb-image5400_266b08-da\"><figure class=\"aligncenter size-medium_large\"><img decoding=\"async\" width=\"768\" height=\"434\" src=\"https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-3-768x434.jpg\" alt=\"memo app image2\" class=\"kb-img wp-image-5663\" srcset=\"https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-3-768x434.jpg 768w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-3-300x170.jpg 300w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-3-600x339.jpg 600w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-3-18x10.jpg 18w, https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-3.jpg 1200w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\uc704 \ud398\uc774\uc9c0 \ucea1\uccd0\ud654\uba74\uc744 \ubcf4\uba74 \uc774\uc804\ubcf4\ub2e4 \ud655\uc2e4\ud558\uac8c \ub098\uc544\uc84c\ub124\uc694. \uc5ec\uae30\uc11c OpenCode\ub294 \ub2e4\uc74c\uc744 \uc81c\uc548\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tailwind spacing \uc870\uc815<\/li>\n\n\n\n<li>\ubc18\uc751\ud615 grid \uc801\uc6a9<\/li>\n\n\n\n<li>hover \ud6a8\uacfc \ucd94\uac00<\/li>\n\n\n\n<li>card \ucef4\ud3ec\ub10c\ud2b8 \uac1c\uc120<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ucd08\uae09\uc790\ub3c4 <strong>\u201c\uc798 \ub9cc\ub4e0 UI\u201d\uc758 \uae30\uc900\uc744 \uc790\uc5f0\uc2a4\ub7fd\uac8c \uccb4\ub4dd<\/strong>\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">8. \uc0c1\ud0dc \uad00\ub9ac(State) \ud1b5\ud569 \uc694\uccad\ud558\uae30<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Next.js \uc0c1\ud0dc \uad00\ub9ac\uac00 \uc5b4\ub835\ub2e4\uba74 OpenCode\uc5d0\uac8c \ub2e4\uc74c\ucc98\ub7fc \uc694\uccad\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\uac04\ub2e8\ud55c \uba54\ubaa8 \uc0c1\ud0dc\ub97c zustand\ub85c \uad00\ub9ac\ud558\ub3c4\ub85d \uad6c\uc870\ub97c \ub9cc\ub4e4\uc5b4\uc918.\nstore \ud30c\uc77c\uacfc \uc0ac\uc6a9\ubc95\ub3c4 \ud568\uaed8 \uc54c\ub824\uc918.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub610\ub294 Redux\ub97c \uc6d0\ud55c\ub2e4\uba74<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Redux Toolkit\uc744 \uc0ac\uc6a9\ud574\uc11c memo \uc0c1\ud0dc slice\ub97c \uc0dd\uc131\ud574\uc918.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc790\ub3d9 \uc0dd\uc131\ub418\ub294 \uac83\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>store.ts<\/li>\n\n\n\n<li>slice.ts<\/li>\n\n\n\n<li>Provider \uc801\uc6a9(\ud544\uc694 \uc2dc layout.tsx\uc5d0 \uc790\ub3d9 \uc0bd\uc785)<\/li>\n\n\n\n<li>\uae30\ubcf8 CRUD reducer<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ucd08\uae09\uc790\uc5d0\uac8c \ub9e4\uc6b0 \ub09c\uc774\ub3c4\uac00 \ub192\uc558\ub358 \ubd80\ubd84\uc774 AI\uc758 \ub3c4\uc6c0\uc73c\ub85c \ubd80\ub4dc\ub7fd\uac8c \ud574\uacb0\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">9. \u201c\ud53c\ub4dc\ubc31 \uc911\uc2ec \uac1c\ubc1c\u201d \u2014 \uc218\uc815 \uc694\uccad\uc73c\ub85c UI \uc644\uc131\ub3c4 \ub192\uc774\uae30<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uc81c UI\uac00 \uc644\uc131\ub418\uba74 OpenCode\uc5d0\uac8c \ub2e4\uc74c\ucc98\ub7fc \ubb3b\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\uc9c0\uae08\uae4c\uc9c0 \ub9cc\ub4e0 UI\uc5d0\uc11c \uac1c\uc120\ud560 \ubd80\ubd84\uc774 \uc788\ub294\uc9c0 5\uac1c\ub9cc \uc81c\uc548\ud574\uc918.\n\ucd08\uae09 \uac1c\ubc1c\uc790 \uae30\uc900\uc73c\ub85c \uc124\uba85\ud574\uc918.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\uc0c1\ub418\ub294 \uac1c\uc120 \ud3ec\uc778\ud2b8\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>component split<\/li>\n\n\n\n<li>props type \uc815\uc758 \uac15\ud654<\/li>\n\n\n\n<li>\ub808\uc774\uc544\uc6c3 \uad6c\uc870 \uac1c\uc120<\/li>\n\n\n\n<li>mobile-first \uc870\uc815<\/li>\n\n\n\n<li>\uc811\uadfc\uc131 \uac1c\uc120<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\uc911 \ud558\ub098 \uace8\ub77c\uc11c \ubc18\uc601\ud558\uace0 \uc2f6\uc73c\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \uc694\uad6c\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>3\ubc88 \uac1c\uc120\uc548\uc744 \uc2e4\uc81c \ucf54\ub4dc\ub85c \ubc18\uc601\ud574\uc918.<\/code><\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">\uc815\ub9ac\ud558\uae30<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ubc88 \uae00\uc5d0\uc11c\ub294 <strong>OpenCode + Next.js<\/strong> \ud658\uacbd\uc5d0\uc11c<br>\ud504\ub860\ud2b8\uc5d4\ub4dc UI\/UX\ub97c \uc790\ub3d9\uc73c\ub85c \uc0dd\uc131\ud558\uace0 \uac1c\uc120\ud558\ub294 \ubc29\ubc95\uc744 \ucd08\uae09\uc790 \uc911\uc2ec\uc73c\ub85c \uc18c\uac1c\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud575\uc2ec \ud3ec\uc778\ud2b8\ub294<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>OpenCode\ub294 Next.js \ud3f4\ub354 \uad6c\uc870 \uc774\ud574\ub97c \ube60\ub974\uac8c \ub3c4\uc640\uc900\ub2e4.<\/li>\n\n\n\n<li>UI \ucef4\ud3ec\ub10c\ud2b8 \uc790\ub3d9 \uc0dd\uc131\uc73c\ub85c \uac1c\ubc1c \uc18d\ub3c4\uac00 \ud06c\uac8c \uc0c1\uc2b9\ud55c\ub2e4.<\/li>\n\n\n\n<li>@frontend-ui-ux-engineer \uc5d0\uc774\uc804\ud2b8\ub294 \ucd08\uae09 \uac1c\ubc1c\uc790\uac00 \uc5b4\ub824\uc6cc\ud558\ub294 \uc2a4\ud0c0\uc77c\ub9c1\uc744 \ub9e4\uc6b0 \uc27d\uac8c \ud574\uacb0\ud55c\ub2e4.<\/li>\n\n\n\n<li>fetch, \ub3d9\uc801 \ub77c\uc6b0\ud305, \uc0c1\ud0dc \uad00\ub9ac\uae4c\uc9c0 \uc790\uc5f0\uc2a4\ub7ec\uc6b4 \ub300\ud654\ub85c \ud574\uacb0 \uac00\ub2a5\ud558\ub2e4.<\/li>\n\n\n\n<li>\ub300\ud654 \uae30\ubc18 \uac1c\ubc1c \ubc29\uc2dd\uc740 \ucd08\ubcf4\uc790\uc758 \u201c\uc2e4\uc804 \uac10\uac01\u201d\uc744 \ube60\ub974\uac8c \ub04c\uc5b4\uc62c\ub9b0\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\uc74c \uae00(9\ud3b8)\uc5d0\uc11c\ub294<br><strong>\ubb38\uc11c \uc790\ub3d9\ud654: README \/ API \ubb38\uc11c \/ \uc124\uacc4 \ubb38\uc11c\ub97c OpenCode\ub85c \ub9cc\ub4dc\ub294 \ubc29\ubc95<\/strong><br>\uc744 \ub2e4\ub8f9\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc740 \ucd08\uae09\uc790\uc5d0\uac8c \ub9e4\ub825\uc801\uc774\uc9c0\ub9cc, \ub3d9\uc2dc\uc5d0 \ub9e4\uc6b0 \ubcf5\uc7a1\ud558\uac8c \ub290\uaef4\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\ud2b9\ud788&#8230;<\/p>","protected":false},"author":3,"featured_media":5665,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[7],"tags":[1043,1147,1041,1046,1146,1148,1145],"class_list":["post-5400","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai-coding","tag-ai-coding-agent","tag-next-js-tutorial","tag-opencode","tag-terminal-ai-ide","tag-ui-","tag-1148","tag-1145"],"taxonomy_info":{"category":[{"value":7,"label":"\uc778\uacf5\uc9c0\ub2a5(AI)"}],"post_tag":[{"value":1043,"label":"AI coding agent"},{"value":1147,"label":"Next.js tutorial"},{"value":1041,"label":"OpenCode"},{"value":1046,"label":"terminal AI IDE"},{"value":1146,"label":"UI \uac1c\ubc1c"},{"value":1148,"label":"\ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc131"},{"value":1145,"label":"\ud504\ub860\ud2b8\uc5d4\ub4dc \uc790\ub3d9\ud654"}]},"featured_image_src_large":["https:\/\/secondlife.lol\/wp-content\/uploads\/2025\/12\/image-32-4-600x488.jpg",600,488,true],"author_info":{"display_name":"TERE","author_link":"https:\/\/secondlife.lol\/en\/author\/tere\/"},"comment_info":0,"category_info":[{"term_id":7,"name":"\uc778\uacf5\uc9c0\ub2a5(AI)","slug":"ai-coding","term_group":0,"term_taxonomy_id":7,"taxonomy":"category","description":"","parent":20,"count":74,"filter":"raw","cat_ID":7,"category_count":74,"category_description":"","cat_name":"\uc778\uacf5\uc9c0\ub2a5(AI)","category_nicename":"ai-coding","category_parent":20}],"tag_info":[{"term_id":1043,"name":"AI coding agent","slug":"ai-coding-agent","term_group":0,"term_taxonomy_id":1043,"taxonomy":"post_tag","description":"","parent":0,"count":10,"filter":"raw"},{"term_id":1147,"name":"Next.js tutorial","slug":"next-js-tutorial","term_group":0,"term_taxonomy_id":1147,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":1041,"name":"OpenCode","slug":"opencode","term_group":0,"term_taxonomy_id":1041,"taxonomy":"post_tag","description":"","parent":0,"count":10,"filter":"raw"},{"term_id":1046,"name":"terminal AI IDE","slug":"terminal-ai-ide","term_group":0,"term_taxonomy_id":1046,"taxonomy":"post_tag","description":"","parent":0,"count":9,"filter":"raw"},{"term_id":1146,"name":"UI \uac1c\ubc1c","slug":"ui-%ea%b0%9c%eb%b0%9c","term_group":0,"term_taxonomy_id":1146,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":1148,"name":"\ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc131","slug":"%ec%bb%b4%ed%8f%ac%eb%84%8c%ed%8a%b8-%ec%83%9d%ec%84%b1","term_group":0,"term_taxonomy_id":1148,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":1145,"name":"\ud504\ub860\ud2b8\uc5d4\ub4dc \uc790\ub3d9\ud654","slug":"%ed%94%84%eb%a1%a0%ed%8a%b8%ec%97%94%eb%93%9c-%ec%9e%90%eb%8f%99%ed%99%94","term_group":0,"term_taxonomy_id":1145,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"}],"_links":{"self":[{"href":"https:\/\/secondlife.lol\/en\/wp-json\/wp\/v2\/posts\/5400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/secondlife.lol\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/secondlife.lol\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/secondlife.lol\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/secondlife.lol\/en\/wp-json\/wp\/v2\/comments?post=5400"}],"version-history":[{"count":5,"href":"https:\/\/secondlife.lol\/en\/wp-json\/wp\/v2\/posts\/5400\/revisions"}],"predecessor-version":[{"id":5668,"href":"https:\/\/secondlife.lol\/en\/wp-json\/wp\/v2\/posts\/5400\/revisions\/5668"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/secondlife.lol\/en\/wp-json\/wp\/v2\/media\/5665"}],"wp:attachment":[{"href":"https:\/\/secondlife.lol\/en\/wp-json\/wp\/v2\/media?parent=5400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/secondlife.lol\/en\/wp-json\/wp\/v2\/categories?post=5400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/secondlife.lol\/en\/wp-json\/wp\/v2\/tags?post=5400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}