<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
<title>Jell�� �몄긽 �щ뒗 �댁빞湲�</title>
<description>�닿쾬 ��寃� �대낫�� 釉붾줈洹몄엯�덈떎.</description>
<link>https://blog.jell.kr</link>
<atom:link href="https://blog.jell.kr/rss" rel="self" type="application/rss+xml"/>
<language>ko-KR</language>
<copyright>짤 2026 Jell</copyright>
<managingEditor>jellive7@gmail.com (Jell)</managingEditor>
<webMaster>jellive7@gmail.com (Jell)</webMaster>
<lastBuildDate>Fri, 27 Feb 2026 17:52:06 GMT</lastBuildDate>
<pubDate>Thu, 26 Feb 2026 00:00:00 GMT</pubDate>
<generator>Next.js Blog by Jell</generator>
<ttl>1440</ttl>
<image>
<url>https://blog.jell.kr/icons/icon-512x512.png</url>
<title>Jell�� �몄긽 �щ뒗 �댁빞湲�</title>
<link>https://blog.jell.kr</link>
<width>512</width>
<height>512</height>
</image>
<item>
<title>媛쒕컻�먯쓽 PARA+GTD �먮룞�� �쒖뒪�� 援ъ텞湲� - Obsidian + Cursor AI濡� 留ㅼ씪 �꾩묠 5遺� 猷⑦떞 留뚮뱾湲�</title>
<description><![CDATA[## 紐⑹감
```toc
```
## 媛쒕컻�먯뿉寃� �앹궛�� �쒖뒪�쒖씠 �꾩슂�� �댁쑀
�꾨━�쒖꽌 �꾨줈�앺듃, �ъ씠�� �꾨줈�앺듃, 援ъ쭅 �쒕룞, 釉붾줈洹� �댁쁺�� �숈떆�� �섎떎 蹂대㈃ 癒몃┸�띿씠 �쇰��ㅻ윭�뚯쭛�덈떎.
"�ㅻ뒛 萸먮��� �섏�?"
留ㅼ씪 �꾩묠 �� 吏덈Ц�� �듯븯�� �� 30遺꾩쓣 �곌퀬 �덉뿀�듬땲��. �� �� 紐⑸줉�� �ш린��湲� �⑹뼱�� �덇퀬, �댁젣 萸� �덈뒗吏��� 媛�臾쇨�臾쇳븯怨�, �ㅼ쓬�� 萸� �댁빞 �섎뒗吏��� 遺덈텇紐낇뻽�듬땲��.
���� �꾩옱 Flutter 紐⑤컮�� ��(鍮덉옄由�), NestJS 諛깆뿏��(荑≫똿 �쒕쾭),
Next.js �뱀빋(而ㅽ뵆 �뚮옒��), Electron �곗뒪��...]]></description>
<link>https://blog.jell.kr/posts/dev/blog/2026/02/26/developer-para-gtd-automation-with-cursor-ai</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/blog/2026/02/26/developer-para-gtd-automation-with-cursor-ai</guid>
<pubDate>Thu, 26 Feb 2026 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Blog]]></category>
<category><![CDATA[productivity]]></category>
<category><![CDATA[gtd]]></category>
<category><![CDATA[para]]></category>
<category><![CDATA[obsidian]]></category>
<category><![CDATA[cursor-ide]]></category>
<category><![CDATA[automation]]></category>
<category><![CDATA[ai-tools]]></category>
<category><![CDATA[second-brain]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Blog</p>
<p><strong>�쒓렇:</strong> productivity, gtd, para, obsidian, cursor-ide, automation, ai-tools, second-brain</p>
<hr/>
<h2 id="媛쒕컻�먯뿉寃�-�앹궛��-�쒖뒪�쒖씠-�꾩슂��-�댁쑀"><a class="heading-anchor" href="#媛쒕컻�먯뿉寃�-�앹궛��-�쒖뒪�쒖씠-�꾩슂��-�댁쑀">媛쒕컻�먯뿉寃� �앹궛�� �쒖뒪�쒖씠 �꾩슂�� �댁쑀</a></h2>
<p>�꾨━�쒖꽌 �꾨줈�앺듃, �ъ씠�� �꾨줈�앺듃, 援ъ쭅 �쒕룞, 釉붾줈洹� �댁쁺�� �숈떆�� �섎떎 蹂대㈃ 癒몃┸�띿씠 �쇰��ㅻ윭�뚯쭛�덈떎.</p>
<p>"�ㅻ뒛 萸먮��� �섏�?"</p>
<p>留ㅼ씪 �꾩묠 �� 吏덈Ц�� �듯븯�� �� 30遺꾩쓣 �곌퀬 �덉뿀�듬땲��. �� �� 紐⑸줉�� �ш린��湲� �⑹뼱�� �덇퀬, �댁젣 萸� �덈뒗吏��� 媛�臾쇨�臾쇳븯怨�, �ㅼ쓬�� 萸� �댁빞 �섎뒗吏��� 遺덈텇紐낇뻽�듬땲��.</p>
<p>���� �꾩옱 Flutter 紐⑤컮�� ��(鍮덉옄由�), NestJS 諛깆뿏��(荑≫똿 �쒕쾭),
Next.js �뱀빋(而ㅽ뵆 �뚮옒��), Electron �곗뒪�ы넲 ��(Dev Utils Hub) ��
�щ윭 �꾨줈�앺듃瑜� 蹂묓뻾�섍퀬 �덉뒿�덈떎.
�ш린�� 援ъ쭅 �쒕룞怨� 硫댁젒 以�鍮꾧퉴吏� �뷀빐吏�硫� 癒몃┸�띾쭔�쇰줈�� �덈� 愿�由ы븷 �� �놁뒿�덈떎.</p>
<p>洹몃옒�� PARA�� GTD瑜� 寃고빀�� �쒖뒪�쒖쓣 留뚮뱾�덇퀬, Cursor AI濡� 洹� �쒖뒪�쒖쓣 <strong>�먮룞��</strong>�덉뒿�덈떎.</p>
<p>寃곌낵�곸쑝濡� 留ㅼ씪 �꾩묠 5遺꾩씠硫� �섎（ 怨꾪쉷�� �몄썙吏묐땲��. AI媛� �댁젣 遺꾩꽍遺��� �ㅻ뒛 異붿쿇源뚯� �� �댁＜�덇퉴��.</p>
<h2 id="para--gtd-萸먭�-�ㅻⅨ媛�"><a class="heading-anchor" href="#para--gtd-萸먭�-�ㅻⅨ媛�">PARA + GTD, 萸먭� �ㅻⅨ媛�</a></h2>
<h3 id="para-�뺣낫��-援ъ“"><a class="heading-anchor" href="#para-�뺣낫��-援ъ“">PARA: �뺣낫�� 援ъ“</a></h3>
<p>Tiago Forte�� PARA 諛⑸쾿濡좎� 紐⑤뱺 �뺣낫瑜� �� 媛�吏�濡� 遺꾨쪟�⑸땲��.</p>
<ul>
<li><strong>Projects</strong>: 紐낇솗�� 紐⑺몴�� 留덇컧�� �덈뒗 寃� (��: "荑≫똿 v2.0 異쒖떆")</li>
<li><strong>Areas</strong>: 吏��띿쟻�쇰줈 愿�由ы빐�� �섎뒗 �곸뿭 (��: "嫄닿컯", "�ъ젙", "媛쒕컻 �ㅻ젰")</li>
<li><strong>Resources</strong>: 李멸퀬 �먮즺 (��: "TypeScript �⑦꽩", "硫댁젒 吏덈Ц 紐⑥쓬")</li>
<li><strong>Archive</strong>: �꾨즺�섍굅�� 鍮꾪솢�깊솕�� 寃�</li>
</ul>
<h3 id="gtd-�됰룞��-愿�由�"><a class="heading-anchor" href="#gtd-�됰룞��-愿�由�">GTD: �됰룞�� 愿�由�</a></h3>
<p>David Allen�� GTD(Getting Things Done)�� �됰룞�� �ㅼ꽢 �④퀎濡� 愿�由ы빀�덈떎.</p>
<ol>
<li><strong>Capture</strong>: 癒몃┸�� 紐⑤뱺 寃껋쓣 爰쇰궡�� 湲곕줉</li>
<li><strong>Clarify</strong>: "�닿굔 萸먯�? �됰룞�� �꾩슂�쒓�?"</li>
<li><strong>Organize</strong>: �곸젅�� 怨녹뿉 諛곗튂 (Next Actions, Projects, Waiting For)</li>
<li><strong>Reflect</strong>: �뺢린�곸쑝濡� 寃��� (Daily, Weekly, Monthly)</li>
<li><strong>Engage</strong>: �곸젅�� �됰룞�� �좏깮�섍퀬 �ㅽ뻾</li>
</ol>
<h3 id="寃고빀��-�쒕꼫吏�"><a class="heading-anchor" href="#寃고빀��-�쒕꼫吏�">寃고빀�� �쒕꼫吏�</a></h3>
<p>PARA�� "�대뵒�� �ｌ쓣源�"瑜�, GTD�� "�몄젣 萸� �좉퉴"瑜� �닿껐�⑸땲��. �섏쓣 �⑹튂硫� �뺣낫 愿�由ъ� �됰룞 愿�由ш� �섎굹�� �쒖뒪�쒖쑝濡� �듯빀�⑸땲��.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">PARA (�뺣낫 援ъ“) + GTD (�됰룞 愿�由�) = Second Brain
</span><span class="code-line"> "�대뵒��?" "�몄젣 萸�?" "�먮룞�쇰줈!"
</span></code></pre>
<h2 id="obsidian-蹂쇳듃-援ъ“"><a class="heading-anchor" href="#obsidian-蹂쇳듃-援ъ“">Obsidian 蹂쇳듃 援ъ“</a></h2>
<p>�ㅼ젣濡� �ъ슜 以묒씤 Obsidian 蹂쇳듃 援ъ“�낅땲��.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">Jell/
</span><span class="code-line">�쒋��� �룧 PARA System Index.md # PARA �쒖뒪�� �덈툕
</span><span class="code-line">�쒋��� Projects/ # �쒖꽦 �꾨줈�앺듃
</span><span class="code-line">�� �쒋��� �됱옣怨좊� 遺��곹빐/ # NestJS + Flutter ��
</span><span class="code-line">�� �쒋��� couple-planner/ # Next.js �뱀빋
</span><span class="code-line">�� �붴��� ...
</span><span class="code-line">�쒋��� Areas/ # 吏��� 愿�由� �곸뿭
</span><span class="code-line">�� �쒋��� GTD-System/ # GTD �듭떖 �대뜑 狩�
</span><span class="code-line">�� �� �쒋��� �똿 �댁씪 �꾩묠 Review 媛��대뱶.md # Morning Preview
</span><span class="code-line">�� �� �쒋��� �뱤 GTD Dashboard.md
</span><span class="code-line">�� �� �쒋��� �뱿 Inbox.md
</span><span class="code-line">�� �� �쒋��� �뱥 Next Actions.md
</span><span class="code-line">�� �� �쒋��� Daily-Reviews/ # �꾩뭅�대툕
</span><span class="code-line">�� �� �붴��� Completed-Items-YYYY-MM.md
</span><span class="code-line">�� �쒋��� 媛쒕컻�먮줈�쒖쓽 ��/
</span><span class="code-line">�� �붴��� 嫄닿컯/
</span><span class="code-line">�쒋��� Resources/ # 李멸퀬 �먮즺
</span><span class="code-line">�� �쒋��� TypeScript/
</span><span class="code-line">�� �쒋��� Flutter/
</span><span class="code-line">�� �붴��� ...
</span><span class="code-line">�붴��� Archive/ # �꾨즺�� �꾨줈�앺듃
</span></code></pre>
<p>�듭떖 �뚯씪�� <code>Areas/GTD-System/</code> �덉뿉 �덉뒿�덈떎. �뱁엳 <code>�똿 �댁씪 �꾩묠 Review 媛��대뱶.md</code>媛� �� �쒖뒪�쒖쓽 �ъ옣�낅땲��.</p>
<h2 id="�듭떖-morning-preview-�쒖뒪��"><a class="heading-anchor" href="#�듭떖-morning-preview-�쒖뒪��">�듭떖: Morning Preview �쒖뒪��</a></h2>
<p>"Morning Review"媛� �꾨땲�� **"Morning Preview"**�낅땲��. �꾩묠�� �섎뒗 嫄� �뚭퀬媛� �꾨땲�� <strong>�ㅻ뒛�� 誘몃━蹂닿린</strong>�대땲源뚯슂.</p>
<h3 id="morning-preview��-援ъ“"><a class="heading-anchor" href="#morning-preview��-援ъ“">Morning Preview�� 援ъ“</a></h3>
<p>留ㅼ씪 �� �뚯씪 �섎굹留� �대㈃ �⑸땲��.</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">#</span> �똿 Morning Preview - 2026�� 02�� 26�� (紐⑹슂��)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token blockquote punctuation">></span> �쇰낯�ы뻾 由ы봽�덉떆 �꾨즺! �댁젣 援ъ쭅 ���ㅼ쐷 �쒖옉! �뮞�뵦
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> �뱥 �댁젣 �꾨즺 ��ぉ 由щ럭 (1遺�)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token list punctuation">-</span> Top 3 �깃났瑜� 遺꾩꽍
</span><span class="code-line"><span class="token list punctuation">-</span> 二쇱슂 �깃낵 �뺣━
</span><span class="code-line"><span class="token list punctuation">-</span> 誘몄셿猷� �묒뾽 �� �ㅻ뒛 �댁썡
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> �뱿 Inbox �뺤씤 (30珥�)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token list punctuation">-</span> �ㅻ뒛 泥섎━�� ��ぉ
</span><span class="code-line"><span class="token list punctuation">-</span> 2遺� 洹쒖튃 �곸슜 ��ぉ
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> �렞 Today's Top 3 (1遺�)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token list punctuation">-</span> �뵶 Top 1: 媛��� 以묒슂�� �묒뾽 (�꾩닔)
</span><span class="code-line"><span class="token list punctuation">-</span> �윞 Top 2: 以묒슂�� �묒뾽
</span><span class="code-line"><span class="token list punctuation">-</span> �윟 Top 3: �좏깮 �묒뾽
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> �� Time Blocking (1遺�)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token list punctuation">-</span> Morning: �먯쟾嫄� + 以�鍮�
</span><span class="code-line"><span class="token list punctuation">-</span> Afternoon: Deep Work (Top 1)
</span><span class="code-line"><span class="token list punctuation">-</span> Evening: Top 2, 3
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> �� 泥� �묒뾽 以�鍮� (1遺� 30珥�)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token list punctuation">-</span> 以�鍮꾨Ъ 泥댄겕由ъ뒪��
</span><span class="code-line"><span class="token list punctuation">-</span> 泥� 5遺� �≪뀡 (援ъ껜��!)
</span><span class="code-line"><span class="token list punctuation">-</span> �쒖옉 �좏샇
</span></code></pre>
<p>�� 援ъ“瑜� 留ㅼ씪 吏곸젒 �묒꽦�섎㈃ 30遺꾩� 嫄몃┰�덈떎. �섏�留� AI�먭쾶 留↔린硫� <strong>�먮룞�쇰줈 �앹꽦�⑸땲��</strong>.</p>
<h3 id="媛�-�뱀뀡��-議댁옱�섎뒗-�댁쑀"><a class="heading-anchor" href="#媛�-�뱀뀡��-議댁옱�섎뒗-�댁쑀">媛� �뱀뀡�� 議댁옱�섎뒗 �댁쑀</a></h3>
<p><strong>�댁젣 由щ럭 (1遺�)</strong>: �댁젣 萸� �덈뒗吏� 紐⑤Ⅴ硫� �ㅻ뒛 萸� �좎��� 紐⑤쫭�덈떎. �깃났瑜좎쓣 �レ옄濡� 蹂대㈃ �꾩떎�곸씤 怨꾪쉷�� �몄슱 �� �덉뒿�덈떎.</p>
<p><strong>Top 3 (1遺�)</strong>: �섎（�� �� �� �덈뒗 �섎� �덈뒗 �묒뾽�� 湲곌퍘�댁빞 3媛쒖엯�덈떎. 10媛� �곸뼱�볤퀬 3媛쒕쭔 �섎㈃ �ㅽ뙣�� �먮굦�댁�留�, 3媛� �곸뼱�볤퀬 3媛� �섎㈃ �깃났�낅땲��.</p>
<p><strong>泥� 5遺� �≪뀡 (1遺� 30珥�)</strong>: 媛��� �대젮�� 嫄� �쒖옉�낅땲��.
"�ъ씠�� �꾨줈�앺듃 諛고룷 以�鍮�"�쇨퀬留� �곸쑝硫� 留됰쭑�섏�留�,
"14:00�� �ㅽ뀒�댁쭠 �쒕쾭 �묒냽 �� 理쒖쥌 泥댄겕由ъ뒪�� �뺤씤"�대씪怨� �곸쑝硫� 洹몃깷 �곕씪媛�硫� �⑸땲��.</p>
<h2 id="cursor-ai-�먮룞��-�ㅼ젙"><a class="heading-anchor" href="#cursor-ai-�먮룞��-�ㅼ젙">Cursor AI �먮룞�� �ㅼ젙</a></h2>
<p>�ш린媛� �� 湲��� �듭떖�낅땲��. Obsidian 蹂쇳듃�� <code>.cursorrules</code> �뚯씪�� 留뚮뱾�� Cursor AI媛� PARA+GTD �먯씠�꾪듃 ��븷�� �섎룄濡� �ㅼ젙�덉뒿�덈떎.</p>
<h3 id="cursorrules-�듭떖-�ㅼ젙"><a class="heading-anchor" href="#cursorrules-�듭떖-�ㅼ젙">.cursorrules �듭떖 �ㅼ젙</a></h3>
<p><code>.cursorrules</code> �뚯씪�� �� 800以꾩엯�덈떎. �듭떖�곸씤 遺�遺꾨쭔 異붾젮蹂대㈃ �ㅼ쓬怨� 媛숈뒿�덈떎.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line"># PARA+GTD �먮룞�� �먯씠�꾪듃 - Cursor Rules
</span><span class="code-line">
</span><span class="code-line">## �먯씠�꾪듃 ��븷
</span><span class="code-line">�뱀떊�� PARA+GTD �먮룞�� �댁떆�ㅽ꽩�몄엯�덈떎.
</span><span class="code-line">1. Daily Review �꾨즺 �� Morning Preview �먮룞 �꾩뭅�대튃
</span><span class="code-line">2. �ㅼ쓬�� Morning Preview 媛��대뱶 �먮룞 �앹꽦
</span><span class="code-line">3. �댁젣 �묒뾽 �깃났 �щ� 遺꾩꽍
</span><span class="code-line">4. �ㅻ뒛 異붿쿇 �묒뾽 �몄꽭�섍쾶 �쒖븞
</span><span class="code-line">5. GTD �쒖뒪�� �곹깭 紐⑤땲�곕쭅 諛� �낅뜲�댄듃
</span><span class="code-line">6. ��-�앺솢 洹좏삎 蹂댁옣
</span></code></pre>
<h3 id="�먮룞-�ㅽ뻾-�몃━嫄�"><a class="heading-anchor" href="#�먮룞-�ㅽ뻾-�몃━嫄�">�먮룞 �ㅽ뻾 �몃━嫄�</a></h3>
<p>�ъ슜��(��)媛� �뱀젙 �ㅼ썙�쒕� 留먰븯硫� AI媛� �먮룞�쇰줈 �뚰겕�뚮줈�곕� �ㅽ뻾�⑸땲��.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">"Daily Review �꾨즺" �� Morning Preview �먮룞 �꾩뭅�대튃
</span><span class="code-line">"�댁씪 以�鍮�" �� �ㅼ쓬�� Morning Preview �앹꽦
</span><span class="code-line">"�ㅻ뒛 Top 3" �� �ㅻ뒛 異붿쿇 �묒뾽 �쒖떆
</span><span class="code-line">"遺꾩꽍�댁쨾" �� 理쒓렐 �앹궛�� �⑦꽩 遺꾩꽍
</span></code></pre>
<h3 id="morning-preview-�앹꽦-濡쒖쭅"><a class="heading-anchor" href="#morning-preview-�앹꽦-濡쒖쭅">Morning Preview �앹꽦 濡쒖쭅</a></h3>
<p>AI�먭쾶 �ㅼ쓬 �뚯씪�ㅼ쓣 �쎄퀬 遺꾩꽍�섎씪怨� 吏��쒗빀�덈떎.</p>
<ol>
<li><strong>�댁젣 Morning Preview</strong> �� Top 3 �깃났瑜� 遺꾩꽍</li>
<li><strong>Next Actions.md</strong> �� 留덇컧 �꾨컯�� �묒뾽 �뺤씤</li>
<li><strong>Inbox.md</strong> �� �덈줈 異붽��� ��ぉ �뺤씤</li>
<li><strong>Projects MOC</strong> �� �꾨줈�앺듃 吏꾪뻾瑜� �뺤씤</li>
</ol>
<p>洹몃━怨� �� �곗씠�곕� 湲곕컲�쇰줈 �ㅻ뒛�� Top 3瑜� 異붿쿇�⑸땲��.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">異붿쿇 湲곗�:
</span><span class="code-line">1�쒖쐞: �댁젣 誘몄셿猷� �묒뾽
</span><span class="code-line">2�쒖쐞: Next Actions�� 留덇컧 �꾨컯 �묒뾽
</span><span class="code-line">3�쒖쐞: 吏꾪뻾瑜� ��� �꾨줈�앺듃�� Next Action
</span><span class="code-line">4�쒖쐞: Context & Energy 留ㅼ묶 (High Energy �� �대젮�� �묒뾽)
</span></code></pre>
<h3 id="�뚯씪-寃쎈줈-�ㅼ젙"><a class="heading-anchor" href="#�뚯씪-寃쎈줈-�ㅼ젙">�뚯씪 寃쎈줈 �ㅼ젙</a></h3>
<p>AI媛� �뺥솗�� �뚯씪�� 李얠쓣 �� �덈룄濡� �덈� 寃쎈줈瑜� 紐낆떆�⑸땲��.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">BASE_PATH = /Users/jellpd/Library/Mobile Documents/
</span><span class="code-line"> iCloud~md~obsidian/Documents/Jell
</span><span class="code-line">
</span><span class="code-line">MORNING_REVIEW = {BASE_PATH}/Areas/GTD-System/�똿 �댁씪 �꾩묠 Review 媛��대뱶.md
</span><span class="code-line">DAILY_REVIEWS = {BASE_PATH}/Areas/GTD-System/Daily-Reviews/
</span><span class="code-line">INBOX = {BASE_PATH}/Areas/GTD-System/�뱿 Inbox.md
</span><span class="code-line">NEXT_ACTIONS = {BASE_PATH}/Areas/GTD-System/�뱥 Next Actions.md
</span></code></pre>
<h2 id="二쇰쭚-�먮룞-�댁떇-紐⑤뱶"><a class="heading-anchor" href="#二쇰쭚-�먮룞-�댁떇-紐⑤뱶">二쇰쭚 �먮룞 �댁떇 紐⑤뱶</a></h2>
<p>�� �쒖뒪�쒖뿉�� 媛��� �먮옉�섍퀬 �띠� 湲곕뒫�낅땲��.</p>
<h3 id="��-�꾩슂�쒓�"><a class="heading-anchor" href="#��-�꾩슂�쒓�">�� �꾩슂�쒓�</a></h3>
<p>媛쒕컻�먮뒗 踰덉븘�껋뿉 痍⑥빟�⑸땲��. �뱁엳 �꾨━�쒖꽌�� �ъ씠�� �꾨줈�앺듃媛� 留롮쑝硫� "二쇰쭚�먮룄 萸붽� �댁빞 �섎뒗��..."�쇰뒗 �뺣컯媛먯뿉 �쒕떖由쎈땲��.</p>
<p>洹몃옒�� <strong>�좎슂�쇨낵 �쇱슂�쇱� �먮룞�쇰줈 �댁떇 紐⑤뱶</strong>媛� �⑸땲��. AI媛� �댁씪�� 二쇰쭚�몄� 泥댄겕�댁꽌 �쒗뵆由우쓣 諛붽퓠�덈떎.</p>
<h3 id="二쇰쭚-morning-preview"><a class="heading-anchor" href="#二쇰쭚-morning-preview">二쇰쭚 Morning Preview</a></h3>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">#</span> �똿 Morning Preview - �좎슂��</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token blockquote punctuation">></span> �썙 �꾩쟾�� �댁떇�� ��! 二쇰쭚�� �� �щ뒗 ��! �뮘��
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> �렞 Today's Top 3</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> �뵶 Top 1: �꾩쟾�� �댁떇 諛� 而⑤뵒�� �뚮났 (�꾩닔!)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token list punctuation">-</span> 怨꾪쉷�� �묒뾽 湲덉�!
</span><span class="code-line"><span class="token list punctuation">-</span> �ㅽ듃�덉뒪 諛쏅뒗 �� �� �됱씪��!
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> �윞 Top 2: (�좏깮) �ш툑�놁씠 �섍퀬 �띠� 寃�</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token list punctuation">-</span> �섍퀬 �띠쑝硫� ��
</span><span class="code-line"><span class="token list punctuation">-</span> �섍린 �レ쑝硫� �� ��
</span><span class="code-line"><span class="token list punctuation">-</span> �섎Т媛� 0%, 利먭굅�� 100%
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> �윟 Top 3: �놁쓬!</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> 泥� 5遺� �≪뀡</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token list punctuation">1.</span> �� �④린
</span><span class="code-line"><span class="token list punctuation">2.</span> "�ㅻ뒛�� 二쇰쭚!" �뺤씤
</span><span class="code-line"><span class="token list punctuation">3.</span> �ㅼ떆 �� 媛먭린
</span><span class="code-line"><span class="token list punctuation">4.</span> 怨꾩냽 �먭린! �뮘
</span></code></pre>
<p>泥섏쓬�먮뒗 �띾떞 媛숈�留�, **"怨꾪쉷�� �묒뾽 0媛쒓� 紐⑺몴"**�쇰뒗 紐낆떆�곸씤 �좎뼵�� �ㅼ젣濡� 二꾩콉媛먯쓣 以꾩뿬以띾땲��.</p>
<h3 id="二쇰쭚-�덉쇅-泥섎━"><a class="heading-anchor" href="#二쇰쭚-�덉쇅-泥섎━">二쇰쭚 �덉쇅 泥섎━</a></h3>
<p>臾쇰줎 二쇰쭚�먮룄 �댁빞 �� �쇱씠 �덉쓣 �� �덉뒿�덈떎. "�대쾲 二쇰쭚�� 硫댁젒 以�鍮꾪빐�� ��"泥섎읆 紐낆떆�곸쑝濡� �멸툒�� 寃쎌슦�먮쭔 �묒뾽�� 異붽��⑸땲��.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">�먮떒 湲곗�:
</span><span class="code-line">- �ъ슜�먭� "�대쾲 二쇰쭚�� XX �댁빞 ��" �� �묒뾽 異붽�
</span><span class="code-line">- 洹� �� 紐⑤뱺 寃쎌슦 �� 臾댁“嫄� �댁떇 紐⑤뱶
</span></code></pre>
<h2 id="�먯쟾嫄�-��湲�-猷⑦떞-�먮룞��"><a class="heading-anchor" href="#�먯쟾嫄�-��湲�-猷⑦떞-�먮룞��">�먯쟾嫄� ��湲� 猷⑦떞 �먮룞��</a></h2>
<p>嫄닿컯 猷⑦떞�� �쒖뒪�쒖뿉 �듯빀�덉뒿�덈떎.</p>
<h3 id="湲곕낯-洹쒖튃-�ы깮�댁씪"><a class="heading-anchor" href="#湲곕낯-洹쒖튃-�ы깮�댁씪">湲곕낯 洹쒖튃 (�ы깮/�댁씪)</a></h3>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">09:00-11:00 �먯쟾嫄� ��湲� �슫
</span><span class="code-line">11:00-12:00 �ㅼ썙 & �먯떖 以�鍮�
</span><span class="code-line">12:00-13:00 �먯떖 & �댁떇
</span><span class="code-line">13:00~ Deep Work �쒖옉 (Top 1 �묒뾽)
</span></code></pre>
<h3 id="�먮룞-�먮떒-濡쒖쭅"><a class="heading-anchor" href="#�먮룞-�먮떒-濡쒖쭅">�먮룞 �먮떒 濡쒖쭅</a></h3>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">�뚯궗 異쒓렐 �� �먯쟾嫄� �쇱젙 �먮룞 �쒓굅
</span><span class="code-line">�ы깮 洹쇰Т �� �먯쟾嫄� 湲곕낯 �ы븿
</span><span class="code-line">�댁씪 + �꾨궇 �ъ쑀 �� "�슫 �댁젣 �ъ쑀濡쒖썱�쇰땲 �먯쟾嫄� ��湲� 醫뗭� ��!"
</span></code></pre>
<p>�ㅼ쟾�� �먯쟾嫄곕� ��怨� �ㅻ㈃ �ㅽ썑�� 吏묒쨷�μ씠 �� �щ씪媛묐땲��. �대룞 �� 2-3�쒓컙�� Golden Hour�낅땲��.</p>
<h2 id="�ㅼ쟾-�뚰겕�뚮줈��"><a class="heading-anchor" href="#�ㅼ쟾-�뚰겕�뚮줈��">�ㅼ쟾 �뚰겕�뚮줈��</a></h2>
<h3 id="�섎（��-�먮쫫"><a class="heading-anchor" href="#�섎（��-�먮쫫">�섎（�� �먮쫫</a></h3>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">�꾨궇 諛� or �뱀씪 �꾩묠:
</span><span class="code-line"> "�댁씪 以�鍮�" �낅젰
</span><span class="code-line"> �� AI媛� �먮룞�쇰줈 Morning Preview �앹꽦
</span><span class="code-line">
</span><span class="code-line">�꾩묠 (5遺�):
</span><span class="code-line"> Obsidian�먯꽌 Morning Preview �닿린
</span><span class="code-line"> �� �댁젣 萸� �덈뒗吏� �뺤씤 ��
</span><span class="code-line"> �� �ㅻ뒛 Top 3 �뺤씤 ��
</span><span class="code-line"> �� Time Blocking �뺤씤 ��
</span><span class="code-line"> �� 泥� 5遺� �≪뀡 �뺤씤 ��
</span><span class="code-line"> �� 諛붾줈 �쒖옉!
</span><span class="code-line">
</span><span class="code-line">���� (5遺�):
</span><span class="code-line"> "Daily Review �꾨즺" �낅젰
</span><span class="code-line"> �� Morning Preview媛� Daily-Reviews/濡� �먮룞 �꾩뭅�대툕
</span><span class="code-line"> �� �댁씪 Morning Preview �앹꽦
</span></code></pre>
<h3 id="�ㅼ젣-�щ�-�ъ씠��-�꾨줈�앺듃-踰좏�-異쒖떆-d-3"><a class="heading-anchor" href="#�ㅼ젣-�щ�-�ъ씠��-�꾨줈�앺듃-踰좏�-異쒖떆-d-3">�ㅼ젣 �щ�: �ъ씠�� �꾨줈�앺듃 踰좏� 異쒖떆 D-3</a></h3>
<p>�ъ씠�� �꾨줈�앺듃 踰좏� 異쒖떆瑜� 3�� �욌몦 媛쒕컻�먭� 諛쏆� Morning Preview �덉떆�낅땲��.</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> �뵶 Top 1: �쒕뵫 �섏씠吏� 理쒖쥌 寃��� 諛� 諛고룷 (�꾩닔!)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token bold"><span class="token punctuation">**</span><span class="token content">Why Important:</span><span class="token punctuation">**</span></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token list punctuation">-</span> �� 踰좏� 異쒖떆 D-3 �� 吏�湲� �쒖옉�댁빞 湲곌컙 �� �꾨즺 媛���
</span><span class="code-line"><span class="token list punctuation">-</span> �� 吏��� 二� �쇰뱶諛� 諛섏쁺 �꾨즺 �� �댁젣 理쒖쥌 �뺤씤留� �⑥븯��
</span><span class="code-line"><span class="token list punctuation">-</span> �뱽 ��湲� 以묒씤 踰좏� �뚯뒪�� �� 鍮좊��섎줉 �쇰뱶諛� 猷⑦봽 �쒖옉��
</span><span class="code-line">
</span><span class="code-line">�덉긽 �쒓컙: 2<span class="token strike"><span class="token punctuation">~</span><span class="token content">3�쒓컙
</span></span></span><span class="code-line"><span class="token strike"><span class="token content">Best Time: 14:00</span><span class="token punctuation">~</span></span>17:00 (High Energy, Deep Work)
</span><span class="code-line">
</span><span class="code-line"><span class="token bold"><span class="token punctuation">**</span><span class="token content">援ъ껜�� �④퀎:</span><span class="token punctuation">**</span></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token list punctuation">1.</span> (14:00-14:30) 紐⑤컮��/�곗뒪�ы넲 諛섏쓳�� 理쒖쥌 �뺤씤
</span><span class="code-line"><span class="token list punctuation">2.</span> (14:30-15:00) �듭떖 �뚮줈��(�뚯썝媛��� �� �⑤낫��) �쒕굹由ъ삤 �뚯뒪��
</span><span class="code-line"><span class="token list punctuation">3.</span> (15:00-15:30) �ㅽ뀒�댁쭠 �� �꾨줈�뺤뀡 諛고룷
</span><span class="code-line"><span class="token list punctuation">4.</span> (15:30-16:00) 諛고룷 �� �먮윭 紐⑤땲�곕쭅 諛� �댁긽 �놁쑝硫� �꾨즺
</span><span class="code-line">
</span><span class="code-line"><span class="token bold"><span class="token punctuation">**</span><span class="token content">�덉긽 �μ븷臾� & �닿껐梨�:</span><span class="token punctuation">**</span></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token list punctuation">-</span> "�꾩쭅 �꾨꼍�섏� �딆���..." �� Done is better than perfect!
</span><span class="code-line"><span class="token list punctuation">-</span> �덉긽移� 紐삵븳 踰꾧렇 諛쒓껄 �� 利됱떆 Inbox�� 異붽�, 踰좏� 湲곌컙�� 泥섎━
</span></code></pre>
<p>AI媛� �� �� �묒뾽�� 以묒슂�쒖�, �몄젣 �섎㈃ 醫뗭�吏�, �대뼡 �쒖꽌濡� �섎㈃ �섎뒗吏�, 留됲옄 �� �대뼸寃� �섎㈃ �섎뒗吏�源뚯� �뚮젮以띾땲��. �꾩묠�� �닿구 蹂대㈃ 怨좊� �놁씠 諛붾줈 �쒖옉�� �� �덉뒿�덈떎.</p>
<h2 id="�쒖뒪��-�꾩엯-��-蹂���"><a class="heading-anchor" href="#�쒖뒪��-�꾩엯-��-蹂���">�쒖뒪�� �꾩엯 �� 蹂���</a></h2>
<h3 id="�レ옄濡�-蹂대뒗-蹂���"><a class="heading-anchor" href="#�レ옄濡�-蹂대뒗-蹂���">�レ옄濡� 蹂대뒗 蹂���</a></h3>
<table>
<thead>
<tr>
<th>��ぉ</th>
<th>�꾩엯 ��</th>
<th>�꾩엯 ��</th>
</tr>
</thead>
<tbody>
<tr>
<td>�꾩묠 怨꾪쉷 �쒓컙</td>
<td>20~30遺�</td>
<td>5遺�</td>
</tr>
<tr>
<td>Top 3 �꾨즺��</td>
<td>50~60%</td>
<td>80% �댁긽</td>
</tr>
<tr>
<td>Weekly Review</td>
<td>嫄대꼫�곌린 �쇱뫀</td>
<td>留ㅼ＜ �꾨즺</td>
</tr>
<tr>
<td>二쇰쭚 二꾩콉媛�</td>
<td>�믪쓬</td>
<td>嫄곗쓽 �놁쓬</td>
</tr>
<tr>
<td>Inbox 泥섎━</td>
<td>二� 1~2��</td>
<td>留ㅼ씪</td>
</tr>
</tbody>
</table>
<h3 id="�뺤꽦��-蹂���"><a class="heading-anchor" href="#�뺤꽦��-蹂���">�뺤꽦�� 蹂���</a></h3>
<p><strong>"萸� �섏�?" 怨좊��� �щ씪議뚯뒿�덈떎.</strong> Morning Preview瑜� �대㈃ �듭씠 �덉뒿�덈떎.</p>
<p><strong>誘몄셿猷� �묒뾽�� �먮룞�쇰줈 �댁썡�⑸땲��.</strong> �덉쟾�먮뒗 �댁젣 紐� �� �묒뾽�� 源뚮㉨怨� �� �묒뾽�� �쒖옉�덈뒗��, �댁젣�� AI媛� "�댁젣 誘몄셿猷� �� �ㅻ뒛 Top 3 �꾨낫"濡� �먮룞 異붿쿇�⑸땲��.</p>
<p><strong>二쇰쭚�� 吏꾩쭨 �쎈땲��.</strong> �쒖뒪�쒖씠 "�ㅻ뒛�� �щ뒗 ��"�대씪怨� 留먰빐二쇰땲源� 二꾩콉媛� �놁씠 �� �� �덉뒿�덈떎.</p>
<h2 id="吏곸젒-援ъ텞�섍린"><a class="heading-anchor" href="#吏곸젒-援ъ텞�섍린">吏곸젒 援ъ텞�섍린</a></h2>
<h3 id="理쒖냼-援ъ꽦"><a class="heading-anchor" href="#理쒖냼-援ъ꽦">理쒖냼 援ъ꽦</a></h3>
<p>�꾩슂�� 寃�:</p>
<ul>
<li>Obsidian (臾대즺)</li>
<li>Cursor IDE (臾대즺 or Pro)</li>
<li>30遺꾩쓽 珥덇린 �ㅼ젙 �쒓컙</li>
</ul>
<h3 id="step-1-obsidian-�대뜑-援ъ“-留뚮뱾湲�"><a class="heading-anchor" href="#step-1-obsidian-�대뜑-援ъ“-留뚮뱾湲�">Step 1: Obsidian �대뜑 援ъ“ 留뚮뱾湲�</a></h3>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">YourVault/
</span><span class="code-line">�쒋��� Areas/
</span><span class="code-line">�� �붴��� GTD-System/
</span><span class="code-line">�� �쒋��� �똿 Morning Preview.md
</span><span class="code-line">�� �쒋��� �뱿 Inbox.md
</span><span class="code-line">�� �쒋��� �뱥 Next Actions.md
</span><span class="code-line">�� �붴��� Daily-Reviews/
</span><span class="code-line">�쒋��� Projects/
</span><span class="code-line">�쒋��� Resources/
</span><span class="code-line">�붴��� Archive/
</span></code></pre>
<h3 id="step-2-cursorrules-�뚯씪-留뚮뱾湲�"><a class="heading-anchor" href="#step-2-cursorrules-�뚯씪-留뚮뱾湲�">Step 2: .cursorrules �뚯씪 留뚮뱾湲�</a></h3>
<p>Obsidian 蹂쇳듃 猷⑦듃�� <code>.cursorrules</code> �뚯씪�� 留뚮벊�덈떎. �듭떖 洹쒖튃�� �� 媛�吏��낅땲��.</p>
<p><strong>1. AI�� ��븷 �뺤쓽:</strong></p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">�뱀떊�� PARA+GTD �먮룞�� �댁떆�ㅽ꽩�몄엯�덈떎.
</span><span class="code-line">�ъ슜�먭� "�댁씪 以�鍮�"�쇨퀬 �섎㈃:
</span><span class="code-line">1. �댁젣 Morning Preview �뚯씪 遺꾩꽍
</span><span class="code-line">2. Inbox.md, Next Actions.md �뺤씤
</span><span class="code-line">3. Top 3 異붿쿇 �앹꽦
</span><span class="code-line">4. Time Blocking �쒖븞
</span><span class="code-line">5. Morning Preview �뚯씪 �앹꽦
</span></code></pre>
<p><strong>2. �뚯씪 寃쎈줈 紐낆떆:</strong></p>
<p>AI媛� �쎄퀬 �⑥빞 �� �뚯씪�� �뺥솗�� 寃쎈줈瑜� 紐낆떆�⑸땲��.</p>
<p><strong>3. �쒗뵆由� �뺤쓽:</strong></p>
<p>Morning Preview�� 援ъ“瑜� �쒗뵆由우쑝濡� �뺤쓽�대몢硫� AI媛� 留ㅻ쾲 �쇨��� �뺤떇�쇰줈 �앹꽦�⑸땲��.</p>
<h3 id="step-3-留ㅼ씪-�ъ슜�섍린"><a class="heading-anchor" href="#step-3-留ㅼ씪-�ъ슜�섍린">Step 3: 留ㅼ씪 �ъ슜�섍린</a></h3>
<p>泥섏쓬 2二쇨� �듦� �뺤꽦 湲곌컙�낅땲��. "�댁씪 以�鍮�" �� �꾩묠�� Preview �닿린 �� ���곸뿉 "Daily Review �꾨즺"瑜� 諛섎났�섎㈃ �먯뿰�ㅻ읇寃� 猷⑦떞�� �⑸땲��.</p>
<h2 id="�댁쁺�섎㈃��-諛곗슫-寃�"><a class="heading-anchor" href="#�댁쁺�섎㈃��-諛곗슫-寃�">�댁쁺�섎㈃�� 諛곗슫 寃�</a></h2>
<h3 id="1-�꾨꼍蹂대떎-�쇨���"><a class="heading-anchor" href="#1-�꾨꼍蹂대떎-�쇨���">1. �꾨꼍蹂대떎 �쇨���</a></h3>
<p>泥섏쓬�먮뒗 �쒗뵆由우쓣 �꾨꼍�섍쾶 留뚮뱾�ㅺ퀬 �덉뒿�덈떎. �뱀뀡�� 20媛쒕줈 �섎늻怨�, �듦퀎瑜� �먮룞 怨꾩궛�섍퀬, 洹몃옒�꾧퉴吏� �ｌ쑝�� �덉뒿�덈떎.</p>
<p>寃곕줎: <strong>留ㅼ씪 5遺� �덉뿉 �앸굹�� 寃� 以묒슂�⑸땲��.</strong> 10遺� 嫄몃━硫� �� �섍쾶 �⑸땲��.</p>
<h3 id="2-ai媛�-�볦튂��-寃�"><a class="heading-anchor" href="#2-ai媛�-�볦튂��-寃�">2. AI媛� �볦튂�� 寃�</a></h3>
<p>AI�� "�댁젣 紐몄씠 �� 醫뗭븯��"�� 嫄� 紐⑤쫭�덈떎. 而⑤뵒��, 媛먯젙, 媛묒옉�ㅻ윭�� �쇱젙 蹂�寃쎌� �ъ슜�먭� 吏곸젒 議곗젙�댁빞 �⑸땲��. AI�� �곗씠�� 湲곕컲 異붿쿇�� �섍퀬, 理쒖쥌 寃곗젙�� �щ엺�� �⑸땲��.</p>
<h3 id="3-�쒖뒪�쒖�-�댁븘�덉뼱��-�쒕떎"><a class="heading-anchor" href="#3-�쒖뒪�쒖�-�댁븘�덉뼱��-�쒕떎">3. �쒖뒪�쒖� �댁븘�덉뼱�� �쒕떎</a></h3>
<p>泥섏쓬 留뚮뱺 .cursorrules瑜� 6媛쒖썡吏� 洹몃�濡� �곌퀬 �덉� �딆뒿�덈떎.
二쇰쭚 �댁떇 紐⑤뱶�� v1.1.0�먯꽌 異붽��덇퀬, �먯쟾嫄� 猷⑦떞�� v1.2.0,
�뚯궗 異쒓렐 �� �먯쟾嫄� �ㅽ궢�� v1.5.0�먯꽌 異붽��덉뒿�덈떎.
�ъ슜�섎㈃�� 遺덊렪�� �먯쓣 怨꾩냽 媛쒖꽑�댁빞 �⑸땲��.</p>
<h3 id="4-inbox��-�ｋ뒗-�듦���-媛���-以묒슂"><a class="heading-anchor" href="#4-inbox��-�ｋ뒗-�듦���-媛���-以묒슂">4. Inbox�� �ｋ뒗 �듦��� 媛��� 以묒슂</a></h3>
<p>�쒖뒪�� �꾩껜�먯꽌 媛��� 以묒슂�� 嫄� "癒몃┸�띿뿉 �좎삤瑜대뒗 寃껋쓣 利됱떆 Inbox�� �ｋ뒗 �듦�"�낅땲��.
Inbox�� �� �ㅼ뼱媛� 寃껋� �쒖뒪�쒖뿉 議댁옱�섏� �딆뒿�덈떎. 議댁옱�섏� �딆쑝硫� 泥섎━�� �� �놁뒿�덈떎.</p>
<h2 id="�쒓퀎��-�ㅼ쓬-�④퀎"><a class="heading-anchor" href="#�쒓퀎��-�ㅼ쓬-�④퀎">�쒓퀎�� �ㅼ쓬 �④퀎</a></h2>
<h3 id="�꾩옱-�쒓퀎"><a class="heading-anchor" href="#�꾩옱-�쒓퀎">�꾩옱 �쒓퀎</a></h3>
<ul>
<li><strong>�섎룞 �몃━嫄�</strong>: "�댁씪 以�鍮�"瑜� 吏곸젒 �낅젰�댁빞 �⑸땲��. �쒓컙 湲곕컲 �먮룞 �몃━嫄곌� �덉쑝硫� 醫뗪쿋�듬땲��.</li>
<li><strong>Cursor �섏〈</strong>: Cursor IDE �덉뿉�쒕쭔 �숈옉�⑸땲��. Obsidian �뚮윭洹몄씤�쇰줈 留뚮뱾硫� �� �먯뿰�ㅻ읇寃좎짛.</li>
<li><strong>�⑥씪 �ъ슜��</strong>: �� �⑥쐞濡쒕뒗 �꾩쭅 �뺤옣�� �� �⑸땲��.</li>
</ul>
<h3 id="�ㅼ쓬��-�대낫怨�-�띠�-寃�"><a class="heading-anchor" href="#�ㅼ쓬��-�대낫怨�-�띠�-寃�">�ㅼ쓬�� �대낫怨� �띠� 寃�</a></h3>
<ul>
<li>Obsidian �뚮윭洹몄씤�쇰줈 Morning Preview �먮룞 �앹꽦</li>
<li>二쇨컙 �깃낵 遺꾩꽍 �먮룞�� (洹몃옒�� �ы븿)</li>
<li>Notion�대굹 Google Calendar �곕룞</li>
<li>GPT API 吏곸젒 �몄텧濡� IDE �섏〈 �쒓굅</li>
</ul>
<h2 id="留덈Т由�"><a class="heading-anchor" href="#留덈Т由�">留덈Т由�</a></h2>
<p>�앹궛�� �쒖뒪�쒖쓽 紐⑹쟻�� <strong>�� 留롮씠 �섎뒗 寃� �꾨땲��, 以묒슂�� 寃껋뿉 吏묒쨷�섎뒗 寃�</strong>�낅땲��.</p>
<p>PARA�� �뺣낫瑜� 泥닿퀎�곸쑝濡� 愿�由ы빐二쇨퀬, GTD�� �됰룞�� 紐낇솗�섍쾶 �댁＜怨�, Cursor AI�� �� 紐⑤뱺 嫄� �먮룞�뷀빐以띾땲��.</p>
<p>留ㅼ씪 �꾩묠 5遺�. Morning Preview瑜� �닿퀬, Top 3�� �뺤씤�섍퀬, 泥� 5遺� �≪뀡�� �쒖옉�섎㈃ �⑸땲��. �섎㉧吏��� �쒖뒪�쒖씠 �뚯븘�� �⑸땲��.</p>
<p>洹몃━怨� 二쇰쭚�먮뒗 吏꾩쭨 �ъ꽭��. �쒖뒪�쒖씠 �덈씫�⑸땲��. �썙</p>
<hr>
<p><strong>李멸퀬 �먮즺:</strong></p>
<ul>
<li>David Allen, <em>Getting Things Done</em></li>
<li>Tiago Forte, <em>Building a Second Brain</em></li>
<li>Cal Newport, <em>Deep Work</em></li>
<li><a href="https://obsidian.md/">Obsidian</a></li>
<li><a href="https://cursor.sh/">Cursor IDE</a></li>
</ul>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/blog/2026/02/26/developer-para-gtd-automation-with-cursor-ai">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>Next.js 釉붾줈洹� �먮룞�� �꾧뎄 援ъ텞湲�</title>
<description><![CDATA[## 紐⑹감
```toc
```
## 媛쒖슂
釉붾줈洹몃� �댁쁺�섎떎 蹂대㈃ 諛섎났�곸씤 �묒뾽�� 留롮뒿�덈떎.
�� �ъ뒪�몃� 留뚮뱾 �뚮쭏�� �대뜑 援ъ“瑜� �앹꽦�섍퀬, frontmatter瑜� �묒꽦�섍퀬, �대�吏� �대뜑瑜� 留뚮뱾�댁빞 �⑸땲��.
�대윴 �묒뾽�� �먮룞�뷀븯硫� 湲��곌린�먮쭔 吏묒쨷�� �� �덉뒿�덈떎.
�� 湲��먯꽌�� Next.js 釉붾줈洹몄뿉 援ъ텞�� �먮룞�� �꾧뎄�ㅼ쓣 �뚭컻�⑸땲��.
## �먮룞�� �꾧뎄 援ъ꽦
### �꾩껜 援ъ“
釉붾줈洹� �먮룞�� �쒖뒪�쒖� �ш쾶 �� 媛�吏� �곸뿭�쇰줈 援ъ꽦�⑸땲��.
```text
scripts/blog/
�쒋��� scaffold.js ...]]></description>
<link>https://blog.jell.kr/posts/dev/blog/2026/01/29/Next.js 釉붾줈洹� �먮룞�� �꾧뎄 援ъ텞湲�</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/blog/2026/01/29/Next.js 釉붾줈洹� �먮룞�� �꾧뎄 援ъ텞湲�</guid>
<pubDate>Thu, 29 Jan 2026 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Blog]]></category>
<category><![CDATA[Blog]]></category>
<category><![CDATA[Automation]]></category>
<category><![CDATA[Makefile]]></category>
<category><![CDATA[Obsidian]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Blog</p>
<p><strong>�쒓렇:</strong> Blog, Automation, Makefile, Obsidian</p>
<hr/>
<h2 id="媛쒖슂"><a class="heading-anchor" href="#媛쒖슂">媛쒖슂</a></h2>
<p>釉붾줈洹몃� �댁쁺�섎떎 蹂대㈃ 諛섎났�곸씤 �묒뾽�� 留롮뒿�덈떎.
�� �ъ뒪�몃� 留뚮뱾 �뚮쭏�� �대뜑 援ъ“瑜� �앹꽦�섍퀬, frontmatter瑜� �묒꽦�섍퀬, �대�吏� �대뜑瑜� 留뚮뱾�댁빞 �⑸땲��.
�대윴 �묒뾽�� �먮룞�뷀븯硫� 湲��곌린�먮쭔 吏묒쨷�� �� �덉뒿�덈떎.</p>
<p>�� 湲��먯꽌�� Next.js 釉붾줈洹몄뿉 援ъ텞�� �먮룞�� �꾧뎄�ㅼ쓣 �뚭컻�⑸땲��.</p>
<h2 id="�먮룞��-�꾧뎄-援ъ꽦"><a class="heading-anchor" href="#�먮룞��-�꾧뎄-援ъ꽦">�먮룞�� �꾧뎄 援ъ꽦</a></h2>
<h3 id="�꾩껜-援ъ“"><a class="heading-anchor" href="#�꾩껜-援ъ“">�꾩껜 援ъ“</a></h3>
<p>釉붾줈洹� �먮룞�� �쒖뒪�쒖� �ш쾶 �� 媛�吏� �곸뿭�쇰줈 援ъ꽦�⑸땲��.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">scripts/blog/
</span><span class="code-line">�쒋��� scaffold.js # �ъ뒪�� �쒗뵆由� �앹꽦
</span><span class="code-line">�쒋��� categories.js # 移댄뀒怨좊━ 留ㅽ븨
</span><span class="code-line">�쒋��� quality/ # �덉쭏 寃�利�
</span><span class="code-line">�� �쒋��� validate.js
</span><span class="code-line">�� �쒋��� frontmatter-check.js
</span><span class="code-line">�� �쒋��� tone-check.js
</span><span class="code-line">�� �붴��� structure-check.js
</span><span class="code-line">�쒋��� style/ # �ㅽ��� 遺꾩꽍
</span><span class="code-line">�� �쒋��� analyze.js
</span><span class="code-line">�� �붴��� profile.json
</span><span class="code-line">�쒋��� generate/ # AI �곕룞
</span><span class="code-line">�� �쒋��� generator.js
</span><span class="code-line">�� �붴��� outline.js
</span><span class="code-line">�붴��� obsidian/ # Obsidian �곕룞
</span><span class="code-line"> �쒋��� reader.js
</span><span class="code-line"> �쒋��� transformer.js
</span><span class="code-line"> �붴��� config.js
</span></code></pre>
<h3 id="�ъ뒪��-�ㅼ틦�대뵫"><a class="heading-anchor" href="#�ъ뒪��-�ㅼ틦�대뵫">�ъ뒪�� �ㅼ틦�대뵫</a></h3>
<p>�� �ъ뒪�몃� 留뚮뱾 �� 媛��� 踰덇굅濡쒖슫 �묒뾽�� �붾젆�좊━ 援ъ“ �앹꽦�낅땲��.
�좎쭨蹂꾨줈 �대뜑瑜� 留뚮뱾怨�, �대�吏� �대뜑�� �④퍡 以�鍮꾪빐�� �⑸땲��.</p>
<p><code>scaffold.js</code>�� �� �묒뾽�� �� 踰덉뿉 泥섎━�⑸땲��.</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">node</span> scripts/blog/scaffold.js <span class="token punctuation">\</span>
</span><span class="code-line"> <span class="token parameter variable">--category</span> dev/js <span class="token punctuation">\</span>
</span><span class="code-line"> <span class="token parameter variable">--title</span> <span class="token string">"�쒕ぉ"</span> <span class="token punctuation">\</span>
</span><span class="code-line"> <span class="token parameter variable">--tags</span> <span class="token string">"tag1,tag2"</span>
</span></code></pre>
<p>�ㅽ뻾�섎㈃ �ㅼ쓬怨� 媛숈� 援ъ“媛� �앹꽦�⑸땲��.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">_posts/dev/js/2026/01/29/
</span><span class="code-line">�쒋��� �쒕ぉ.md
</span><span class="code-line">�붴��� images/
</span></code></pre>
<p>frontmatter�� �먮룞�쇰줈 梨꾩썙吏묐땲��.
移댄뀒怨좊━�� �곕씪 湲곕낯 �쒓렇媛� 異붽��섍퀬, 紐⑹감 釉붾줉怨� 媛쒖슂 �뱀뀡�� �ы븿�⑸땲��.</p>
<h3 id="�덉쭏-寃�利�"><a class="heading-anchor" href="#�덉쭏-寃�利�">�덉쭏 寃�利�</a></h3>
<p>�ъ뒪�몃� �묒꽦�� �꾩뿉�� �덉쭏�� 寃�利앺빐�� �⑸땲��.
<code>validate.js</code>�� �� 媛�吏� 寃��щ� �섑뻾�⑸땲��.</p>
<h4 id="frontmatter-寃���"><a class="heading-anchor" href="#frontmatter-寃���">frontmatter 寃���</a></h4>
<ul>
<li>�꾩닔 �꾨뱶(title, date, category) 議댁옱 �щ�</li>
<li>�좎쭨 �뺤떇 �좏슚��</li>
<li>�쒓렇 諛곗뿴 �뺤떇</li>
</ul>
<h4 id="��-寃���"><a class="heading-anchor" href="#��-寃���">�� 寃���</a></h4>
<ul>
<li>議대뙎留�/諛섎쭚 �쇨���</li>
<li>臾몄옣 �대� 遺꾩꽍</li>
</ul>
<h4 id="援ъ“-寃���"><a class="heading-anchor" href="#援ъ“-寃���">援ъ“ 寃���</a></h4>
<ul>
<li>紐⑹감 釉붾줉 議댁옱 �щ�</li>
<li>以� 湲몄씠 �쒗븳 (150��)</li>
<li>�대�吏� 寃쎈줈 �좏슚��</li>
</ul>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">node</span> scripts/blog/quality/validate.js _posts/dev/blog/2026/01/29/�ъ뒪��.md
</span></code></pre>
<h3 id="�ㅽ���-遺꾩꽍"><a class="heading-anchor" href="#�ㅽ���-遺꾩꽍">�ㅽ��� 遺꾩꽍</a></h3>
<p>�쇨��� 湲��곌린 �ㅽ��쇱쓣 �좎��섎젮硫� 湲곗〈 湲��� �⑦꽩�� �뚯븙�댁빞 �⑸땲��.
<code>analyze.js</code>�� 紐⑤뱺 �ъ뒪�몃� �ㅼ틪�섏뿬 �ㅽ��� �꾨줈�꾩쓣 �앹꽦�⑸땲��.</p>
<p>遺꾩꽍 ��ぉ�� �ㅼ쓬怨� 媛숈뒿�덈떎.</p>
<ul>
<li>�됯퇏 臾몄옣 湲몄씠</li>
<li>�먯＜ �ъ슜�섎뒗 臾몄옣 �대�</li>
<li>�꾪솚�� �ъ슜 �⑦꽩</li>
<li>移댄뀒怨좊━蹂� 肄붾뱶 釉붾줉 鍮꾩쑉</li>
</ul>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">node</span> scripts/blog/style/analyze.js
</span></code></pre>
<p>寃곌낵�� <code>profile.json</code>�� ���λ맗�덈떎.
�� 湲��� �� �� �� �꾨줈�꾩쓣 李멸퀬�섎㈃ �쇨��� �ㅽ��쇱쓣 �좎��� �� �덉뒿�덈떎.</p>
<h3 id="obsidian-�곕룞"><a class="heading-anchor" href="#obsidian-�곕룞">Obsidian �곕룞</a></h3>
<p>�됱냼�� Obsidian�쇰줈 硫붾え瑜� �묒꽦�섎뒗 寃쎌슦媛� 留롮뒿�덈떎.
�� 硫붾え瑜� 釉붾줈洹� �ъ뒪�몃줈 蹂��섑븯�� 湲곕뒫�� 援ы쁽�덉뒿�덈떎.</p>
<p>Obsidian 臾몃쾿怨� 釉붾줈洹� 留덊겕�ㅼ슫�� �쎄컙 �ㅻ쫭�덈떎.
<code>transformer.js</code>媛� �� 李⑥씠瑜� 泥섎━�⑸땲��.</p>
<table>
<thead>
<tr>
<th>Obsidian</th>
<th>釉붾줈洹�</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[[�꾪궎留곹겕]]</code></td>
<td>�쇰컲 �띿뒪��</td>
</tr>
<tr>
<td><code>[[留곹겕|�쒖떆]]</code></td>
<td>�쒖떆 �띿뒪��</td>
</tr>
<tr>
<td><code>> [!note]</code></td>
<td><code>> **李멸퀬**:</code></td>
</tr>
<tr>
<td><code>==�섏씠�쇱씠��==</code></td>
<td><code>**蹂쇰뱶**</code></td>
</tr>
<tr>
<td><code>%%二쇱꽍%%</code></td>
<td>��젣</td>
</tr>
</tbody>
</table>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">node</span> scripts/blog/obsidian/transformer.js <span class="token punctuation">\</span>
</span><span class="code-line"> <span class="token parameter variable">--input</span> ~/Documents/Obsidian/note.md <span class="token punctuation">\</span>
</span><span class="code-line"> <span class="token parameter variable">--output</span> _posts/converted.md
</span></code></pre>
<p>PARA 諛⑹떇�쇰줈 �명듃瑜� 愿�由ы븳�ㅻ㈃ <code>reader.js</code>濡� 理쒓렐 �명듃瑜� �ㅼ틪�� �� �덉뒿�덈떎.
釉붾줈洹� 二쇱젣濡� �곹빀�� �명듃瑜� 鍮좊Ⅴ寃� 李얠쓣 �� �덉뒿�덈떎.</p>
<h2 id="makefile濡�-�듯빀"><a class="heading-anchor" href="#makefile濡�-�듯빀">Makefile濡� �듯빀</a></h2>
<p>�� �꾧뎄�ㅼ쓣 留ㅻ쾲 湲� 紐낅졊�대줈 �ㅽ뻾�섍린�� 踰덇굅濡�뒿�덈떎.
Makefile濡� �듯빀�섎㈃ 媛꾨떒�� 紐낅졊�대줈 �ъ슜�� �� �덉뒿�덈떎.</p>
<pre class="language-makefile"><code class="language-makefile code-highlight"><span class="code-line"><span class="token target symbol">new</span><span class="token punctuation">:</span> <span class="token comment">## �� �ъ뒪�� �앹꽦</span>
</span><span class="code-line"> <span class="token operator">@</span>read -p <span class="token string">"移댄뀒怨좊━: "</span> category<span class="token punctuation">;</span> \
</span><span class="code-line"> read -p <span class="token string">"�쒕ぉ: "</span> title<span class="token punctuation">;</span> \
</span><span class="code-line"> node scripts/blog/scaffold.js \
</span><span class="code-line"> --category <span class="token string">"$$category"</span> \
</span><span class="code-line"> --title <span class="token string">"$$title"</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token target symbol">validate</span><span class="token punctuation">:</span> <span class="token comment">## �ъ뒪�� 寃�利�</span>
</span><span class="code-line"> node scripts/blog/quality/validate.js <span class="token string">"$(FILE)"</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token target symbol">style</span><span class="token punctuation">:</span> <span class="token comment">## �ㅽ��� 遺꾩꽍</span>
</span><span class="code-line"> node scripts/blog/style/analyze.js
</span></code></pre>
<p>二쇱슂 紐낅졊�대뒗 �ㅼ쓬怨� 媛숈뒿�덈떎.</p>
<table>
<thead>
<tr>
<th>紐낅졊��</th>
<th>�ㅻ챸</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>make new</code></td>
<td>���뷀삎�쇰줈 �� �ъ뒪�� �앹꽦</td>
</tr>
<tr>
<td><code>make new-quick CATEGORY=dev/js TITLE="�쒕ぉ"</code></td>
<td>鍮좊Ⅸ �앹꽦</td>
</tr>
<tr>
<td><code>make validate FILE=寃쎈줈</code></td>
<td>�덉쭏 寃�利�</td>
</tr>
<tr>
<td><code>make style</code></td>
<td>�ㅽ��� 遺꾩꽍</td>
</tr>
<tr>
<td><code>make obsidian-scan</code></td>
<td>Obsidian �명듃 �ㅼ틪</td>
</tr>
<tr>
<td><code>make help</code></td>
<td>�꾩껜 紐낅졊�� 紐⑸줉</td>
</tr>
</tbody>
</table>
<h2 id="�뚰겕�뚮줈��-�덉떆"><a class="heading-anchor" href="#�뚰겕�뚮줈��-�덉떆">�뚰겕�뚮줈�� �덉떆</a></h2>
<p>�ㅼ젣濡� �ъ뒪�몃� �묒꽦�섎뒗 �뚰겕�뚮줈�곕� �댄렣蹂닿쿋�듬땲��.</p>
<h4 id="1�④퀎-�ㅼ틦�대뵫"><a class="heading-anchor" href="#1�④퀎-�ㅼ틦�대뵫">1�④퀎: �ㅼ틦�대뵫</a></h4>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">make</span> new-quick <span class="token assign-left variable">CATEGORY</span><span class="token operator">=</span>dev/js <span class="token assign-left variable">TITLE</span><span class="token operator">=</span><span class="token string">"React �깅뒫 理쒖쟻��"</span>
</span></code></pre>
<h4 id="2�④퀎-�댁슜-�묒꽦"><a class="heading-anchor" href="#2�④퀎-�댁슜-�묒꽦">2�④퀎: �댁슜 �묒꽦</a></h4>
<p>�앹꽦�� �뚯씪�� �닿퀬 �댁슜�� �묒꽦�⑸땲��.
�ㅽ��� �꾨줈�꾩쓣 李멸퀬�섎㈃ �쇨��� �ㅼ쓣 �좎��� �� �덉뒿�덈떎.</p>
<h4 id="3�④퀎-寃�利�"><a class="heading-anchor" href="#3�④퀎-寃�利�">3�④퀎: 寃�利�</a></h4>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">make</span> validate <span class="token assign-left variable">FILE</span><span class="token operator">=</span>_posts/dev/js/2026/01/29/React<span class="token punctuation">\</span> �깅뒫<span class="token punctuation">\</span> 理쒖쟻��.md
</span></code></pre>
<p>�ㅻ쪟媛� �덉쑝硫� �섏젙�⑸땲��.
寃쎄퀬�� �꾩슂�� �곕씪 臾댁떆�� �� �덉뒿�덈떎.</p>
<h4 id="4�④퀎-鍮뚮뱶-�뺤씤"><a class="heading-anchor" href="#4�④퀎-鍮뚮뱶-�뺤씤">4�④퀎: 鍮뚮뱶 �뺤씤</a></h4>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">make</span> build
</span></code></pre>
<p>臾몄젣�놁씠 鍮뚮뱶�섎㈃ 諛고룷 以�鍮꾧� �꾨즺�� 寃껋엯�덈떎.</p>
<h2 id="留덈Т由�"><a class="heading-anchor" href="#留덈Т由�">留덈Т由�</a></h2>
<p>釉붾줈洹� �먮룞�� �꾧뎄瑜� 援ъ텞�섎㈃�� 紐� 媛�吏� 援먰썕�� �살뿀�듬땲��.</p>
<p>�곗꽑 �묒� �꾧뎄遺��� �쒖옉�섎뒗 寃껋씠 醫뗭뒿�덈떎.
泥섏쓬遺��� �꾨꼍�� �쒖뒪�쒖쓣 留뚮뱾�ㅺ퀬 �섎㈃ �ㅽ엳�� 蹂듭옟�댁쭛�덈떎.
�ㅼ틦�대뵫 �섎굹留� �덉뼱�� �앹궛�깆씠 �ш쾶 �μ긽�⑸땲��.</p>
<p>�먰븳 寃�利� �꾧뎄�� �꾧꺽�섍쾶 留뚮뱾��, 寃쎄퀬�� �ㅻ쪟瑜� 援щ텇�댁빞 �⑸땲��.
紐⑤뱺 寃껋쓣 �ㅻ쪟濡� 泥섎━�섎㈃ �쇰줈媛먯씠 �볦엯�덈떎.
�듭떖�곸씤 寃껊쭔 �ㅻ쪟濡�, �섎㉧吏��� 寃쎄퀬濡� 泥섎━�섎뒗 寃껋씠 醫뗭뒿�덈떎.</p>
<p>留덉�留됱쑝濡� Makefile�� �뚮��� 吏꾩엯�먯엯�덈떎.
蹂듭옟�� �ㅽ겕由쏀듃�� <code>make 紐낅졊��</code> �뺥깭濡� �⑥닚�뷀븷 �� �덉뒿�덈떎.
<code>make help</code>濡� �ъ슜 媛��ν븳 紐낅졊�대� 蹂댁뿬二쇰㈃ �붿슧 �몃━�⑸땲��.</p>
<p>�� 湲��먯꽌 �뚭컻�� �꾧뎄�ㅼ씠 釉붾줈洹� �댁쁺�� �꾩��� �섍만 諛붾엻�덈떎.</p>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/blog/2026/01/29/Next.js 釉붾줈洹� �먮룞�� �꾧뎄 援ъ텞湲�">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>JavaScript �몄씠�ㅽ똿 �댄빐�섍린 - var/let/const 李⑥씠��</title>
<description><![CDATA[## 紐⑹감
```toc
```
## �몄씠�ㅽ똿�대�?
JavaScript�먯꽌 蹂��섏� �⑥닔 �좎뼵�� 肄붾뱶 �ㅽ뻾 �꾩뿉 硫붾え由ъ뿉 癒쇱� �좊떦�섎뒗 �꾩긽�낅땲��.
```javascript
console.log(x) // undefined (�먮윭 X)
var x = 5
```
## var�� �몄씠�ㅽ똿
### �좎뼵怨� 珥덇린�� 遺꾨━
```javascript
console.log(x) // undefined
var x = 5
console.log(x) // 5
// �ㅼ젣 �숈옉 諛⑹떇
var x // �좎뼵�� 癒쇱� (�몄씠�ㅽ똿)
console...]]></description>
<link>https://blog.jell.kr/posts/dev/js/2025/09/02/javascript-hoisting-complete-guide</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/js/2025/09/02/javascript-hoisting-complete-guide</guid>
<pubDate>Tue, 02 Sep 2025 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Javascript]]></category>
<category><![CDATA[javascript]]></category>
<category><![CDATA[hoisting]]></category>
<category><![CDATA[var-let-const]]></category>
<category><![CDATA[scope]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Javascript</p>
<p><strong>�쒓렇:</strong> javascript, hoisting, var-let-const, scope</p>
<hr/>
<h2 id="�몄씠�ㅽ똿�대�"><a class="heading-anchor" href="#�몄씠�ㅽ똿�대�">�몄씠�ㅽ똿�대�?</a></h2>
<p>JavaScript�먯꽌 蹂��섏� �⑥닔 �좎뼵�� 肄붾뱶 �ㅽ뻾 �꾩뿉 硫붾え由ъ뿉 癒쇱� �좊떦�섎뒗 �꾩긽�낅땲��.</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token comment">// undefined (�먮윭 X)</span>
</span><span class="code-line"><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">5</span>
</span></code></pre>
<h2 id="var��-�몄씠�ㅽ똿"><a class="heading-anchor" href="#var��-�몄씠�ㅽ똿">var�� �몄씠�ㅽ똿</a></h2>
<h3 id="�좎뼵怨�-珥덇린��-遺꾨━"><a class="heading-anchor" href="#�좎뼵怨�-珥덇린��-遺꾨━">�좎뼵怨� 珥덇린�� 遺꾨━</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token comment">// undefined</span>
</span><span class="code-line"><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">5</span>
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token comment">// 5</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �ㅼ젣 �숈옉 諛⑹떇</span>
</span><span class="code-line"><span class="token keyword">var</span> x <span class="token comment">// �좎뼵�� 癒쇱� (�몄씠�ㅽ똿)</span>
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token comment">// undefined</span>
</span><span class="code-line">x <span class="token operator">=</span> <span class="token number">5</span> <span class="token comment">// �좊떦</span>
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token comment">// 5</span>
</span></code></pre>
<h3 id="�ㅻТ-臾몄젣-�щ�"><a class="heading-anchor" href="#�ㅻТ-臾몄젣-�щ�">�ㅻТ 臾몄젣 �щ�</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 紐⑤뱺 踰꾪듉�� 媛숈� 媛� 異쒕젰</span>
</span><span class="code-line"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token comment">// 紐⑤몢 3 異쒕젰</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �닿껐: let �ъ슜</span>
</span><span class="code-line"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token comment">// 0, 1, 2 異쒕젰</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="letconst��-�몄씠�ㅽ똿"><a class="heading-anchor" href="#letconst��-�몄씠�ㅽ똿">let/const�� �몄씠�ㅽ똿</a></h2>
<h3 id="tdz-temporal-dead-zone"><a class="heading-anchor" href="#tdz-temporal-dead-zone">TDZ (Temporal Dead Zone)</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token comment">// ReferenceError</span>
</span><span class="code-line"><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">5</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// const�� �숈씪</span>
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span> <span class="token comment">// ReferenceError</span>
</span><span class="code-line"><span class="token keyword">const</span> y <span class="token operator">=</span> <span class="token number">10</span>
</span></code></pre>
<p>let怨� const�� �몄씠�ㅽ똿�섏�留�, �좎뼵 �꾧퉴吏� �묎렐�� �� �녿뒗 **TDZ(Temporal Dead Zone)**�� �덉뒿�덈떎.</p>
<h2 id="�⑥닔-�몄씠�ㅽ똿"><a class="heading-anchor" href="#�⑥닔-�몄씠�ㅽ똿">�⑥닔 �몄씠�ㅽ똿</a></h2>
<h3 id="�⑥닔-�좎뼵��"><a class="heading-anchor" href="#�⑥닔-�좎뼵��">�⑥닔 �좎뼵��</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// "Hello!" - �뺤긽 �숈옉</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Hello!'</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="�⑥닔-�쒗쁽��"><a class="heading-anchor" href="#�⑥닔-�쒗쁽��">�⑥닔 �쒗쁽��</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// TypeError</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">var</span> <span class="token function-variable function">sayHi</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Hi!'</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="�붿궡��-�⑥닔"><a class="heading-anchor" href="#�붿궡��-�⑥닔">�붿궡�� �⑥닔</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token function">greet</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// ReferenceError</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">greet</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Greetings!'</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="var-vs-let-vs-const-鍮꾧탳"><a class="heading-anchor" href="#var-vs-let-vs-const-鍮꾧탳">var vs let vs const 鍮꾧탳</a></h2>
<table>
<thead>
<tr>
<th>�뱀쭠</th>
<th>var</th>
<th>let</th>
<th>const</th>
</tr>
</thead>
<tbody>
<tr>
<td>�ㅼ퐫��</td>
<td>�⑥닔 �ㅼ퐫��</td>
<td>釉붾줉 �ㅼ퐫��</td>
<td>釉붾줉 �ㅼ퐫��</td>
</tr>
<tr>
<td>�ъ꽑��</td>
<td>媛���</td>
<td>遺덇���</td>
<td>遺덇���</td>
</tr>
<tr>
<td>�ы븷��</td>
<td>媛���</td>
<td>媛���</td>
<td>遺덇���</td>
</tr>
<tr>
<td>�몄씠�ㅽ똿</td>
<td>�좎뼵留�</td>
<td>�좎뼵留�</td>
<td>�좎뼵留�</td>
</tr>
<tr>
<td>TDZ</td>
<td>�놁쓬</td>
<td>�덉쓬</td>
<td>�덉쓬</td>
</tr>
<tr>
<td>珥덇린媛�</td>
<td>undefined</td>
<td>�묎렐 遺덇�</td>
<td>�묎렐 遺덇�</td>
</tr>
<tr>
<td>沅뚯옣��</td>
<td>吏���</td>
<td>沅뚯옣</td>
<td>理쒖슦��</td>
</tr>
</tbody>
</table>
<h2 id="�ㅼ퐫��-李⑥씠"><a class="heading-anchor" href="#�ㅼ퐫��-李⑥씠">�ㅼ퐫�� 李⑥씠</a></h2>
<h3 id="�⑥닔-�ㅼ퐫��-var"><a class="heading-anchor" href="#�⑥닔-�ㅼ퐫��-var">�⑥닔 �ㅼ퐫�� (var)</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">5</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token comment">// 5 - �묎렐 媛���</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="釉붾줉-�ㅼ퐫��-letconst"><a class="heading-anchor" href="#釉붾줉-�ㅼ퐫��-letconst">釉붾줉 �ㅼ퐫�� (let/const)</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">5</span>
</span><span class="code-line"> <span class="token keyword">const</span> y <span class="token operator">=</span> <span class="token number">10</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token comment">// ReferenceError</span>
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span> <span class="token comment">// ReferenceError</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="�ㅻТ-踰좎뒪��-�꾨옓�곗뒪"><a class="heading-anchor" href="#�ㅻТ-踰좎뒪��-�꾨옓�곗뒪">�ㅻТ 踰좎뒪�� �꾨옓�곗뒪</a></h2>
<h3 id="1-const-�곗꽑-�ъ슜"><a class="heading-anchor" href="#1-const-�곗꽑-�ъ슜">1. const �곗꽑 �ъ슜</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token constant">API_URL</span> <span class="token operator">=</span> <span class="token string">'https://api.example.com'</span>
</span><span class="code-line"><span class="token keyword">const</span> users <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">fetchUsers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></code></pre>
<h3 id="2-�ы븷��-�꾩슂��-let"><a class="heading-anchor" href="#2-�ы븷��-�꾩슂��-let">2. �ы븷�� �꾩슂�� let</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span>
</span><span class="code-line"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> count <span class="token operator">+=</span> i
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="3-var��-�ъ슜�섏�-�딄린"><a class="heading-anchor" href="#3-var��-�ъ슜�섏�-�딄린">3. var�� �ъ슜�섏� �딄린</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// �쇳븯湲�</span>
</span><span class="code-line"><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">'John'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// ���� const/let �ъ슜</span>
</span><span class="code-line"><span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'John'</span>
</span></code></pre>
<h3 id="4-蹂��섎뒗-�ъ슜-��-�좎뼵"><a class="heading-anchor" href="#4-蹂��섎뒗-�ъ슜-��-�좎뼵">4. 蹂��섎뒗 �ъ슜 �� �좎뼵</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 醫뗭� �⑦꽩</span>
</span><span class="code-line"><span class="token keyword">const</span> userName <span class="token operator">=</span> <span class="token string">'John'</span>
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>userName<span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �섏걶 �⑦꽩</span>
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>userName<span class="token punctuation">)</span> <span class="token comment">// �몄씠�ㅽ똿�� �섏〈</span>
</span><span class="code-line"><span class="token keyword">var</span> userName <span class="token operator">=</span> <span class="token string">'John'</span>
</span></code></pre>
<h2 id="�대옒��-�몄씠�ㅽ똿"><a class="heading-anchor" href="#�대옒��-�몄씠�ㅽ똿">�대옒�� �몄씠�ㅽ똿</a></h2>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// �먮윭</span>
</span><span class="code-line"><span class="token keyword">const</span> instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MyClass</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">MyClass</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �щ컮瑜� �쒖꽌</span>
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">MyClass</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line"><span class="token keyword">const</span> instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MyClass</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></code></pre>
<h2 id="�듭떖-�뺣━"><a class="heading-anchor" href="#�듭떖-�뺣━">�듭떖 �뺣━</a></h2>
<p>�몄씠�ㅽ똿�� �좎뼵�� �ㅼ퐫�� 理쒖긽�⑥쑝濡� �뚯뼱�щ젮吏��� �꾩긽�낅땲��.
var�� �⑥닔 �ㅼ퐫�꾩뿉�� undefined濡� 珥덇린�붾릺硫� �ъ꽑�몄씠 媛��ν븳 諛섎㈃,
let怨� const�� 釉붾줉 �ㅼ퐫�꾨� �곕Ⅴ怨� TDZ�� �덉뼱 �좎뼵 �꾩뿉 �묎렐�� �� �놁뒿�덈떎.
�⑥닔 �좎뼵�앹� �꾩껜媛� �몄씠�ㅽ똿�섏�留�, �⑥닔 �쒗쁽�앷낵 �붿궡�� �⑥닔�� 蹂��섎쭔 �몄씠�ㅽ똿�⑸땲��.</p>
<h2 id="�ㅼ쟾-沅뚯옣�ы빆"><a class="heading-anchor" href="#�ㅼ쟾-沅뚯옣�ы빆">�ㅼ쟾 沅뚯옣�ы빆</a></h2>
<p>const瑜� 湲곕낯�쇰줈 �ъ슜�섍퀬, �ы븷�뱀씠 �꾩슂�� 寃쎌슦�먮쭔 let�� �ъ슜�섏꽭��.
var�� �곗� �딅뒗 寃� 醫뗭뒿�덈떎. 蹂��섎뒗 �ъ슜 �꾩뿉 紐낆떆�곸쑝濡� �좎뼵�섍퀬,
釉붾줉 �ㅼ퐫�꾨� �쒖슜�� 肄붾뱶�� �덉륫 媛��μ꽦�� �믪씠�� 寃� �ъ씤�몄엯�덈떎.</p>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/js/2025/09/02/javascript-hoisting-complete-guide">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>Next.js 媛쒕컻 �쒕쾭 �꾨줈�몄뒪 愿�由� - 李얘린�� 醫낅즺 �꾩쟾 媛��대뱶</title>
<description><![CDATA[## 紐⑹감
```toc
```
## 臾몄젣 �곹솴
Next.js 媛쒕컻�� �섎떎 蹂대㈃ 醫낆쥌 �ㅼ쓬怨� 媛숈� �곹솴�� 留덉＜移섍쾶 �⑸땲��:
- 媛쒕컻 �쒕쾭媛� �쒕�濡� 醫낅즺�섏� �딆븘 �ы듃媛� 怨꾩냽 �먯쑀�섏뼱 �덈뒗 寃쎌슦
- 諛깃렇�쇱슫�쒖뿉�� �ㅽ뻾 以묒씤 `next-server` �꾨줈�몄뒪媛� CPU瑜� 怨쇰룄�섍쾶 �ъ슜�섎뒗 寃쎌슦
- �덈줈�� 媛쒕컻 �쒕쾭瑜� �쒖옉�섎젮怨� �� �� "�ы듃媛� �대� �ъ슜 以�" �ㅻ쪟媛� 諛쒖깮�섎뒗 寃쎌슦
```bash
$ npm run dev
Error: listen EADDRINUSE: address already in use :::3000
...]]></description>
<link>https://blog.jell.kr/posts/dev/js/tip/2025/08/31/next-server-process-management-guide</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/js/tip/2025/08/31/next-server-process-management-guide</guid>
<pubDate>Sun, 31 Aug 2025 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Dev]]></category>
<category><![CDATA[Next.js]]></category>
<category><![CDATA[Process Management]]></category>
<category><![CDATA[Development Server]]></category>
<category><![CDATA[macOS]]></category>
<category><![CDATA[Linux]]></category>
<category><![CDATA[Shell]]></category>
<category><![CDATA[Debugging]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Dev</p>
<p><strong>�쒓렇:</strong> Next.js, Process Management, Development Server, macOS, Linux, Shell, Debugging</p>
<hr/>
<h2 id="臾몄젣-�곹솴"><a class="heading-anchor" href="#臾몄젣-�곹솴">臾몄젣 �곹솴</a></h2>
<p>Next.js 媛쒕컻�� �섎떎 蹂대㈃ 醫낆쥌 �ㅼ쓬怨� 媛숈� �곹솴�� 留덉＜移섍쾶 �⑸땲��:</p>
<ul>
<li>媛쒕컻 �쒕쾭媛� �쒕�濡� 醫낅즺�섏� �딆븘 �ы듃媛� 怨꾩냽 �먯쑀�섏뼱 �덈뒗 寃쎌슦</li>
<li>諛깃렇�쇱슫�쒖뿉�� �ㅽ뻾 以묒씤 <code>next-server</code> �꾨줈�몄뒪媛� CPU瑜� 怨쇰룄�섍쾶 �ъ슜�섎뒗 寃쎌슦</li>
<li>�덈줈�� 媛쒕컻 �쒕쾭瑜� �쒖옉�섎젮怨� �� �� "�ы듃媛� �대� �ъ슜 以�" �ㅻ쪟媛� 諛쒖깮�섎뒗 寃쎌슦</li>
</ul>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> run dev
</span><span class="code-line">Error: listen EADDRINUSE: address already <span class="token keyword">in</span> use :::3000
</span></code></pre>
<p>�대윴 臾몄젣�ㅼ� ��遺�遺� 諛깃렇�쇱슫�쒖뿉�� �ㅽ뻾 以묒씤 <code>next-server</code> �꾨줈�몄뒪 �뚮Ц�� 諛쒖깮�⑸땲��.</p>
<h2 id="�닿껐-諛⑸쾿"><a class="heading-anchor" href="#�닿껐-諛⑸쾿">�닿껐 諛⑸쾿</a></h2>
<h3 id="1�④퀎-next-server-�꾨줈�몄뒪-李얘린"><a class="heading-anchor" href="#1�④퀎-next-server-�꾨줈�몄뒪-李얘린">1�④퀎: next-server �꾨줈�몄뒪 李얘린</a></h3>
<p>癒쇱� �꾩옱 �ㅽ뻾 以묒씤 <code>next-server</code> �꾨줈�몄뒪�ㅼ쓣 李얠븘遊낆떆��:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 湲곕낯�곸씤 諛⑸쾿</span>
</span><span class="code-line"><span class="token function">ps</span> aux <span class="token operator">|</span> <span class="token function">grep</span> <span class="token parameter variable">-i</span> <span class="token string">"next-server"</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># �� �뺥솗�� 寃��� (grep �꾨줈�몄뒪 �쒖쇅)</span>
</span><span class="code-line"><span class="token function">ps</span> aux <span class="token operator">|</span> <span class="token function">grep</span> <span class="token parameter variable">-i</span> <span class="token string">"next-server\|next.*server"</span> <span class="token operator">|</span> <span class="token function">grep</span> <span class="token parameter variable">-v</span> <span class="token function">grep</span>
</span></code></pre>
<p><strong>�ㅽ뻾 寃곌낵 �덉떆:</strong></p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">jellpd <span class="token number">39409</span> <span class="token number">103.4</span> <span class="token number">3.0</span> <span class="token number">510424800</span> <span class="token number">748832</span> ?? R <span class="token number">11</span>:19AM <span class="token number">5</span>:10.17 next-server <span class="token punctuation">(</span>v14.2.32<span class="token punctuation">)</span>
</span><span class="code-line">jellpd <span class="token number">61174</span> <span class="token number">95.7</span> <span class="token number">10.2</span> <span class="token number">510789984</span> <span class="token number">2558112</span> ?? U <span class="token number">11</span>:30AM <span class="token number">5</span>:40.17 next-server <span class="token punctuation">(</span>v14.2.32<span class="token punctuation">)</span>
</span></code></pre>
<p>媛� 而щ읆�� �섎�:</p>
<ul>
<li><code>jellpd</code>: �꾨줈�몄뒪 �뚯쑀��</li>
<li><code>39409</code>, <code>61174</code>: <strong>PID (Process ID)</strong> - �꾨줈�몄뒪瑜� 醫낅즺�� �� �꾩슂</li>
<li><code>103.4</code>, <code>95.7</code>: CPU �ъ슜瑜� (%)</li>
<li><code>3.0</code>, <code>10.2</code>: 硫붾え由� �ъ슜瑜� (%)</li>
<li><code>R</code>, <code>U</code>: �꾨줈�몄뒪 �곹깭 (R=�ㅽ뻾以�, U=�명꽣�쏀듃 遺덇��ν븳 ��湲�)</li>
</ul>
<h3 id="2�④퀎-�꾨줈�몄뒪-醫낅즺�섍린"><a class="heading-anchor" href="#2�④퀎-�꾨줈�몄뒪-醫낅즺�섍린">2�④퀎: �꾨줈�몄뒪 醫낅즺�섍린</a></h3>
<h4 id="諛⑸쾿-1-媛쒕퀎-pid濡�-醫낅즺"><a class="heading-anchor" href="#諛⑸쾿-1-媛쒕퀎-pid濡�-醫낅즺">諛⑸쾿 1: 媛쒕퀎 PID濡� 醫낅즺</a></h4>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># �쇰컲�곸씤 醫낅즺 (SIGTERM)</span>
</span><span class="code-line"><span class="token function">kill</span> <span class="token number">39409</span> <span class="token number">61174</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># 媛뺤젣 醫낅즺 (SIGKILL) - �묐떟�섏� �딆쓣 ��</span>
</span><span class="code-line"><span class="token function">kill</span> <span class="token parameter variable">-9</span> <span class="token number">39409</span> <span class="token number">61174</span>
</span></code></pre>
<h4 id="諛⑸쾿-2-�⑦꽩�쇰줈-�쇨큵-醫낅즺"><a class="heading-anchor" href="#諛⑸쾿-2-�⑦꽩�쇰줈-�쇨큵-醫낅즺">諛⑸쾿 2: �⑦꽩�쇰줈 �쇨큵 醫낅즺</a></h4>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># pkill �ъ슜 (沅뚯옣)</span>
</span><span class="code-line"><span class="token function">pkill</span> <span class="token parameter variable">-f</span> <span class="token string">"next-server"</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># killall �ъ슜</span>
</span><span class="code-line"><span class="token function">killall</span> <span class="token string">"next-server"</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># �� �덉쟾�� 諛⑸쾿 - �뺤씤 �� 醫낅즺</span>
</span><span class="code-line">pgrep <span class="token parameter variable">-f</span> <span class="token string">"next-server"</span> <span class="token operator">|</span> <span class="token function">xargs</span> <span class="token function">kill</span>
</span></code></pre>
<h3 id="3�④퀎-醫낅즺-�뺤씤"><a class="heading-anchor" href="#3�④퀎-醫낅즺-�뺤씤">3�④퀎: 醫낅즺 �뺤씤</a></h3>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># �꾨줈�몄뒪媛� �뺣쭚 醫낅즺�섏뿀�붿� �뺤씤</span>
</span><span class="code-line"><span class="token function">ps</span> aux <span class="token operator">|</span> <span class="token function">grep</span> <span class="token parameter variable">-i</span> <span class="token string">"next-server"</span> <span class="token operator">|</span> <span class="token function">grep</span> <span class="token parameter variable">-v</span> <span class="token function">grep</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># �꾨Т 寃곌낵�� �섏삤吏� �딆쑝硫� �깃났!</span>
</span></code></pre>
<h2 id="怨좉툒-湲곕쾿"><a class="heading-anchor" href="#怨좉툒-湲곕쾿">怨좉툒 湲곕쾿</a></h2>
<h3 id="�뱀젙-�ы듃瑜�-�ъ슜�섎뒗-�꾨줈�몄뒪-李얘린"><a class="heading-anchor" href="#�뱀젙-�ы듃瑜�-�ъ슜�섎뒗-�꾨줈�몄뒪-李얘린">�뱀젙 �ы듃瑜� �ъ슜�섎뒗 �꾨줈�몄뒪 李얘린</a></h3>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 3000 �ы듃瑜� �ъ슜�섎뒗 �꾨줈�몄뒪 李얘린</span>
</span><span class="code-line"><span class="token function">lsof</span> <span class="token parameter variable">-ti:3000</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># �대떦 �꾨줈�몄뒪 醫낅즺</span>
</span><span class="code-line"><span class="token function">lsof</span> <span class="token parameter variable">-ti:3000</span> <span class="token operator">|</span> <span class="token function">xargs</span> <span class="token function">kill</span> <span class="token parameter variable">-9</span>
</span></code></pre>
<h3 id="�먮룞��-�ㅽ겕由쏀듃"><a class="heading-anchor" href="#�먮룞��-�ㅽ겕由쏀듃">�먮룞�� �ㅽ겕由쏀듃</a></h3>
<p>留ㅻ쾲 紐낅졊�대� �낅젰�섍린 洹�李�떎硫� �ㅽ겕由쏀듃濡� 留뚮뱾�� �≪떆��:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># kill-next.sh</span>
</span><span class="code-line"><span class="token comment">#!/bin/bash</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token string">"�뵇 next-server �꾨줈�몄뒪瑜� 李얜뒗 以�..."</span>
</span><span class="code-line"><span class="token assign-left variable">PIDS</span><span class="token operator">=</span><span class="token variable"><span class="token variable">$(</span>pgrep <span class="token parameter variable">-f</span> <span class="token string">"next-server"</span><span class="token variable">)</span></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">if</span> <span class="token punctuation">[</span> <span class="token parameter variable">-z</span> <span class="token string">"<span class="token variable">$PIDS</span>"</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">then</span>
</span><span class="code-line"> <span class="token builtin class-name">echo</span> <span class="token string">"�� �ㅽ뻾 以묒씤 next-server �꾨줈�몄뒪媛� �놁뒿�덈떎."</span>
</span><span class="code-line"> <span class="token builtin class-name">exit</span> <span class="token number">0</span>
</span><span class="code-line"><span class="token keyword">fi</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token string">"�뱥 諛쒓껄�� �꾨줈�몄뒪:"</span>
</span><span class="code-line"><span class="token function">ps</span> aux <span class="token operator">|</span> <span class="token function">grep</span> <span class="token parameter variable">-i</span> <span class="token string">"next-server"</span> <span class="token operator">|</span> <span class="token function">grep</span> <span class="token parameter variable">-v</span> <span class="token function">grep</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token string">""</span>
</span><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token string">"�� �꾨줈�몄뒪瑜� 醫낅즺�⑸땲��..."</span>
</span><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token string">"<span class="token variable">$PIDS</span>"</span> <span class="token operator">|</span> <span class="token function">xargs</span> <span class="token function">kill</span> <span class="token parameter variable">-9</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token function">sleep</span> <span class="token number">1</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># 醫낅즺 �뺤씤</span>
</span><span class="code-line"><span class="token assign-left variable">REMAINING</span><span class="token operator">=</span><span class="token variable"><span class="token variable">$(</span>pgrep <span class="token parameter variable">-f</span> <span class="token string">"next-server"</span><span class="token variable">)</span></span>
</span><span class="code-line"><span class="token keyword">if</span> <span class="token punctuation">[</span> <span class="token parameter variable">-z</span> <span class="token string">"<span class="token variable">$REMAINING</span>"</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">then</span>
</span><span class="code-line"> <span class="token builtin class-name">echo</span> <span class="token string">"�� 紐⑤뱺 next-server �꾨줈�몄뒪媛� �깃났�곸쑝濡� 醫낅즺�섏뿀�듬땲��."</span>
</span><span class="code-line"><span class="token keyword">else</span>
</span><span class="code-line"> <span class="token builtin class-name">echo</span> <span class="token string">"�좑툘 �쇰� �꾨줈�몄뒪媛� �ъ쟾�� �ㅽ뻾 以묒엯�덈떎:"</span>
</span><span class="code-line"> <span class="token function">ps</span> aux <span class="token operator">|</span> <span class="token function">grep</span> <span class="token parameter variable">-i</span> <span class="token string">"next-server"</span> <span class="token operator">|</span> <span class="token function">grep</span> <span class="token parameter variable">-v</span> <span class="token function">grep</span>
</span><span class="code-line"><span class="token keyword">fi</span>
</span></code></pre>
<p><strong>�ъ슜踰�:</strong></p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># �ㅽ뻾 沅뚰븳 遺���</span>
</span><span class="code-line"><span class="token function">chmod</span> +x kill-next.sh
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># �ㅽ뻾</span>
</span><span class="code-line">./kill-next.sh
</span></code></pre>
<h3 id="packagejson-�ㅽ겕由쏀듃濡�-�깅줉"><a class="heading-anchor" href="#packagejson-�ㅽ겕由쏀듃濡�-�깅줉">package.json �ㅽ겕由쏀듃濡� �깅줉</a></h3>
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"dev"</span><span class="token operator">:</span> <span class="token string">"next dev"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"kill-server"</span><span class="token operator">:</span> <span class="token string">"pkill -f next-server || true"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"restart"</span><span class="token operator">:</span> <span class="token string">"npm run kill-server && npm run dev"</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>�댁젣 �ㅼ쓬怨� 媛숈씠 �ъ슜�� �� �덉뒿�덈떎:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># �쒕쾭 醫낅즺</span>
</span><span class="code-line"><span class="token function">npm</span> run kill-server
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># �쒕쾭 �ъ떆�� (醫낅즺 �� �쒖옉)</span>
</span><span class="code-line"><span class="token function">npm</span> run restart
</span></code></pre>
<h2 id="�덈갑-諛⑸쾿"><a class="heading-anchor" href="#�덈갑-諛⑸쾿">�덈갑 諛⑸쾿</a></h2>
<h3 id="1-媛쒕컻-�쒕쾭-�щ컮瑜닿쾶-醫낅즺�섍린"><a class="heading-anchor" href="#1-媛쒕컻-�쒕쾭-�щ컮瑜닿쾶-醫낅즺�섍린">1. 媛쒕컻 �쒕쾭 �щ컮瑜닿쾶 醫낅즺�섍린</a></h3>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 媛쒕컻 �쒕쾭 �ㅽ뻾 以묒씪 ��</span>
</span><span class="code-line"><span class="token comment"># Ctrl + C 瑜� �뚮윭�� �뺤긽 醫낅즺</span>
</span></code></pre>
<h3 id="2-�곕���-醫낅즺-��-�꾨줈�몄뒪��-�④퍡-醫낅즺"><a class="heading-anchor" href="#2-�곕���-醫낅즺-��-�꾨줈�몄뒪��-�④퍡-醫낅즺">2. �곕��� 醫낅즺 �� �꾨줈�몄뒪�� �④퍡 醫낅즺</a></h3>
<p><code>.zshrc</code> �먮뒗 <code>.bashrc</code>�� 異붽�:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># �곕��� 醫낅즺 �� next-server �꾨줈�몄뒪�� �뺣━</span>
</span><span class="code-line"><span class="token builtin class-name">trap</span> <span class="token string">'pkill -f "next-server" 2>/dev/null'</span> EXIT
</span></code></pre>
<h3 id="3-媛쒕컻-�섍꼍-�ㅼ젙"><a class="heading-anchor" href="#3-媛쒕컻-�섍꼍-�ㅼ젙">3. 媛쒕컻 �섍꼍 �ㅼ젙</a></h3>
<p><code>next.config.js</code>�먯꽌 媛쒕컻 �쒕쾭 �ㅼ젙�� 理쒖쟻��:</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'next'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>NextConfig<span class="token punctuation">}</span></span> */</span>
</span><span class="code-line"><span class="token keyword">const</span> nextConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// 媛쒕컻 紐⑤뱶�먯꽌 �� 鍮좊Ⅸ 醫낅즺</span>
</span><span class="code-line"> <span class="token literal-property property">experimental</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">turbo</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">loaders</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// �꾩슂�� 濡쒕뜑留� �쒖꽦��</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> nextConfig
</span></code></pre>
<h2 id="臾몄젣-�닿껐-��"><a class="heading-anchor" href="#臾몄젣-�닿껐-��">臾몄젣 �닿껐 ��</a></h2>
<h3 id="cpu-�ъ슜瑜좎씠-�믪�-next-server-�꾨줈�몄뒪"><a class="heading-anchor" href="#cpu-�ъ슜瑜좎씠-�믪�-next-server-�꾨줈�몄뒪">CPU �ъ슜瑜좎씠 �믪� next-server �꾨줈�몄뒪</a></h3>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># CPU �ъ슜瑜� �쒖쑝濡� �뺣젹�섏뿬 �뺤씤</span>
</span><span class="code-line"><span class="token function">ps</span> aux <span class="token parameter variable">--sort</span><span class="token operator">=</span>-%cpu <span class="token operator">|</span> <span class="token function">grep</span> next-server
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># �대떦 �꾨줈�몄뒪�� �곸꽭 �뺣낫</span>
</span><span class="code-line"><span class="token function">ps</span> <span class="token parameter variable">-p</span> <span class="token operator"><</span>PID<span class="token operator">></span> <span class="token parameter variable">-o</span> pid,ppid,cmd,%cpu,%mem,time
</span></code></pre>
<h3 id="硫붾え由�-�꾩닔-�섏떖-��"><a class="heading-anchor" href="#硫붾え由�-�꾩닔-�섏떖-��">硫붾え由� �꾩닔 �섏떖 ��</a></h3>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 硫붾え由� �ъ슜�� 紐⑤땲�곕쭅</span>
</span><span class="code-line"><span class="token function">watch</span> <span class="token parameter variable">-n</span> <span class="token number">1</span> <span class="token string">'ps aux | grep next-server | grep -v grep'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># �뱀젙 �꾨줈�몄뒪�� 硫붾え由� �ъ슜�� 異붿쟻</span>
</span><span class="code-line"><span class="token function">top</span> <span class="token parameter variable">-p</span> <span class="token operator"><</span>PID<span class="token operator">></span>
</span></code></pre>
<h3 id="沅뚰븳-臾몄젣濡�-醫낅즺�섏�-�딅뒗-寃쎌슦"><a class="heading-anchor" href="#沅뚰븳-臾몄젣濡�-醫낅즺�섏�-�딅뒗-寃쎌슦">沅뚰븳 臾몄젣濡� 醫낅즺�섏� �딅뒗 寃쎌슦</a></h3>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># sudo 沅뚰븳�쇰줈 媛뺤젣 醫낅즺</span>
</span><span class="code-line"><span class="token function">sudo</span> <span class="token function">kill</span> <span class="token parameter variable">-9</span> <span class="token operator"><</span>PID<span class="token operator">></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># �먮뒗 �꾨줈�몄뒪 �뚯쑀�� �뺤씤 �� �대떦 �ъ슜�먮줈 �꾪솚</span>
</span><span class="code-line"><span class="token function">ps</span> aux <span class="token operator">|</span> <span class="token function">grep</span> next-server
</span><span class="code-line"><span class="token function">su</span> - <span class="token operator"><</span>username<span class="token operator">></span>
</span><span class="code-line"><span class="token function">kill</span> <span class="token parameter variable">-9</span> <span class="token operator"><</span>PID<span class="token operator">></span>
</span></code></pre>
<h2 id="留덈Т由�"><a class="heading-anchor" href="#留덈Т由�">留덈Т由�</a></h2>
<p>Next.js 媛쒕컻 �쒕쾭 �꾨줈�몄뒪 愿�由щ뒗 媛쒕컻 �⑥쑉�깆뿉 吏곸젒�곸씤 �곹뼢�� 誘몄묩�덈떎. �꾩쓽 諛⑸쾿�ㅼ쓣 �쒖슜�섏뿬:</p>
<ol>
<li><strong>�뺢린�곸씤 �꾨줈�몄뒪 �뺣━</strong>濡� �쒖뒪�� 由ъ냼�� �덉빟</li>
<li><strong>�먮룞�� �ㅽ겕由쏀듃</strong>濡� 諛섎났 �묒뾽 理쒖냼��</li>
<li><strong>�덈갑 議곗튂</strong>濡� 臾몄젣 諛쒖깮 理쒖냼��</li>
</ol>
<p>媛쒕컻 �섍꼍�� 源붾걫�섍쾶 �좎��섎㈃ �� 吏묒쨷�댁꽌 肄붾뵫�� �� �덉뒿�덈떎! ��</p>
<h2 id="李멸퀬-�먮즺"><a class="heading-anchor" href="#李멸퀬-�먮즺">李멸퀬 �먮즺</a></h2>
<ul>
<li><a href="https://nextjs.org/docs/getting-started">Next.js 怨듭떇 臾몄꽌 - Development</a></li>
<li><a href="https://man7.org/linux/man-pages/man1/ps.1.html">�꾨줈�몄뒪 愿�由� 紐낅졊�� 李멸퀬</a></li>
<li><a href="https://www.gnu.org/software/libc/manual/html_node/Termination-Signals.html">�쒓렇�먭낵 �꾨줈�몄뒪 �쒖뼱</a></li>
</ul>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/js/tip/2025/08/31/next-server-process-management-guide">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>Homebrew濡� �ㅼ튂�� Node.js�먯꽌 taskmaster-ai媛� Claude Code API瑜� 李얠� 紐삵븯�� 臾몄젣 �닿껐</title>
<description><![CDATA[## 紐⑹감
```toc
```
## 臾몄젣 �곹솴
Homebrew濡� Node.js瑜� �ㅼ튂�섍퀬 taskmaster-ai �⑦궎吏�瑜� �ъ슜�섎젮怨� �� ��, �ㅼ쓬怨� 媛숈� �ㅻ쪟媛�
諛쒖깮�� �� �덉뒿�덈떎:
```bash
$ npx taskmaster-ai init
Error: Claude Code API key not found. Please check your environment configuration.
```
�대뒗 Homebrew濡� �ㅼ튂�� Node.js �섍꼍�먯꽌 �섍꼍 蹂��섎굹 �ㅼ젙 �뚯씪�� 寃쎈줈媛� �덉긽怨� �ㅻ� ��
諛쒖깮�섎뒗 臾몄젣�낅땲...]]></description>
<link>https://blog.jell.kr/posts/dev/js/tip/2025/08/31/homebrew-nodejs-taskmaster-ai-claude-code-api-issue</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/js/tip/2025/08/31/homebrew-nodejs-taskmaster-ai-claude-code-api-issue</guid>
<pubDate>Sun, 31 Aug 2025 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Dev]]></category>
<category><![CDATA[Node.js]]></category>
<category><![CDATA[Homebrew]]></category>
<category><![CDATA[taskmaster-ai]]></category>
<category><![CDATA[Claude Code]]></category>
<category><![CDATA[API]]></category>
<category><![CDATA[macOS]]></category>
<category><![CDATA[�섍꼍�ㅼ젙]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Dev</p>
<p><strong>�쒓렇:</strong> Node.js, Homebrew, taskmaster-ai, Claude Code, API, macOS, �섍꼍�ㅼ젙</p>
<hr/>
<h2 id="臾몄젣-�곹솴"><a class="heading-anchor" href="#臾몄젣-�곹솴">臾몄젣 �곹솴</a></h2>
<p>Homebrew濡� Node.js瑜� �ㅼ튂�섍퀬 taskmaster-ai �⑦궎吏�瑜� �ъ슜�섎젮怨� �� ��, �ㅼ쓬怨� 媛숈� �ㅻ쪟媛�
諛쒖깮�� �� �덉뒿�덈떎:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ npx taskmaster-ai init
</span><span class="code-line">Error: Claude Code API key not found. Please check your environment configuration.
</span></code></pre>
<p>�대뒗 Homebrew濡� �ㅼ튂�� Node.js �섍꼍�먯꽌 �섍꼍 蹂��섎굹 �ㅼ젙 �뚯씪�� 寃쎈줈媛� �덉긽怨� �ㅻ� ��
諛쒖깮�섎뒗 臾몄젣�낅땲��.</p>
<h2 id="�먯씤-遺꾩꽍"><a class="heading-anchor" href="#�먯씤-遺꾩꽍">�먯씤 遺꾩꽍</a></h2>
<h3 id="1-homebrew-nodejs��-�밸퀎��-�ㅼ튂-寃쎈줈"><a class="heading-anchor" href="#1-homebrew-nodejs��-�밸퀎��-�ㅼ튂-寃쎈줈">1. Homebrew Node.js�� �밸퀎�� �ㅼ튂 寃쎈줈</a></h3>
<p>Homebrew濡� Node.js瑜� �ㅼ튂�섎㈃ �쒖뒪�� 湲곕낯 �꾩튂媛� �꾨땶 <code>/opt/homebrew</code> (Apple Silicon) �먮뒗
<code>/usr/local</code> (Intel Mac) 寃쎈줈�� �ㅼ튂�⑸땲��:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># Homebrew Node.js �ㅼ튂 寃쎈줈 �뺤씤</span>
</span><span class="code-line">$ <span class="token function">which</span> <span class="token function">node</span>
</span><span class="code-line">/opt/homebrew/bin/node
</span><span class="code-line">
</span><span class="code-line">$ <span class="token function">which</span> <span class="token function">npm</span>
</span><span class="code-line">/opt/homebrew/bin/npm
</span></code></pre>
<h3 id="2-�섍꼍-蹂���-�몄떇-臾몄젣"><a class="heading-anchor" href="#2-�섍꼍-蹂���-�몄떇-臾몄젣">2. �섍꼍 蹂��� �몄떇 臾몄젣</a></h3>
<p>taskmaster-ai�� Claude Code API �ㅻ� �ㅼ쓬 �쒖꽌濡� 李얠뒿�덈떎:</p>
<ol>
<li><code>ANTHROPIC_API_KEY</code> �섍꼍 蹂���</li>
<li><code>.env</code> �뚯씪</li>
<li>Claude Code �ㅼ젙 �뚯씪 (<code>~/.claude/settings.json</code>)</li>
</ol>
<p>Homebrew �섍꼍�먯꽌�� �대윭�� 寃쎈줈�ㅼ씠 �щ컮瑜닿쾶 �몄떇�섏� �딆쓣 �� �덉뒿�덈떎.</p>
<h2 id="�닿껐-諛⑸쾿"><a class="heading-anchor" href="#�닿껐-諛⑸쾿">�닿껐 諛⑸쾿</a></h2>
<h3 id="諛⑸쾿-1-�섍꼍-蹂���-吏곸젒-�ㅼ젙"><a class="heading-anchor" href="#諛⑸쾿-1-�섍꼍-蹂���-吏곸젒-�ㅼ젙">諛⑸쾿 1: �섍꼍 蹂��� 吏곸젒 �ㅼ젙</a></h3>
<p>媛��� �뺤떎�� 諛⑸쾿�� �섍꼍 蹂��섎� 吏곸젒 �ㅼ젙�섎뒗 寃껋엯�덈떎:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># �꾩옱 �몄뀡�먮쭔 �곸슜</span>
</span><span class="code-line"><span class="token builtin class-name">export</span> <span class="token assign-left variable">ANTHROPIC_API_KEY</span><span class="token operator">=</span><span class="token string">"your_api_key_here"</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># bash �ъ슜�먯쓽 寃쎌슦</span>
</span><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token string">'export ANTHROPIC_API_KEY="your_api_key_here"'</span> <span class="token operator">>></span> ~/.bashrc
</span><span class="code-line"><span class="token builtin class-name">source</span> ~/.bashrc
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># zsh �ъ슜�먯쓽 寃쎌슦 (macOS 湲곕낯媛�)</span>
</span><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token string">'export ANTHROPIC_API_KEY="your_api_key_here"'</span> <span class="token operator">>></span> ~/.zshrc
</span><span class="code-line"><span class="token builtin class-name">source</span> ~/.zshrc
</span></code></pre>
<h3 id="諛⑸쾿-2-�꾨줈�앺듃蹂�-env-�뚯씪-�앹꽦"><a class="heading-anchor" href="#諛⑸쾿-2-�꾨줈�앺듃蹂�-env-�뚯씪-�앹꽦">諛⑸쾿 2: �꾨줈�앺듃蹂� .env �뚯씪 �앹꽦</a></h3>
<p>�꾨줈�앺듃 猷⑦듃 �붾젆�좊━�� <code>.env</code> �뚯씪�� 留뚮뱶�� 寃껋씠 媛��� �덉쟾�� 諛⑸쾿�낅땲��:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># �꾨줈�앺듃 猷⑦듃�먯꽌</span>
</span><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token string">"ANTHROPIC_API_KEY=your_api_key_here"</span> <span class="token operator">></span> .env
</span><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token string">"PERPLEXITY_API_KEY=your_perplexity_key_here"</span> <span class="token operator">>></span> .env <span class="token comment"># �좏깮�ы빆</span>
</span></code></pre>
<p><strong>以묒슂</strong>: <code>.env</code> �뚯씪�� <code>.gitignore</code>�� 諛섎뱶�� 異붽��섏꽭��:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token string">".env"</span> <span class="token operator">>></span> .gitignore
</span></code></pre>
<h3 id="諛⑸쾿-3-claude-code-�ㅼ젙-�뚯씪-�섎룞-�앹꽦"><a class="heading-anchor" href="#諛⑸쾿-3-claude-code-�ㅼ젙-�뚯씪-�섎룞-�앹꽦">諛⑸쾿 3: Claude Code �ㅼ젙 �뚯씪 �섎룞 �앹꽦</a></h3>
<p>Claude Code �ㅼ젙 �뚯씪�� �녿뒗 寃쎌슦 �섎룞�쇰줈 �앹꽦�� �� �덉뒿�덈떎:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># Claude Code �ㅼ젙 �붾젆�좊━ �앹꽦</span>
</span><span class="code-line"><span class="token function">mkdir</span> <span class="token parameter variable">-p</span> ~/.claude
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># �ㅼ젙 �뚯씪 �앹꽦</span>
</span><span class="code-line"><span class="token function">cat</span> <span class="token operator">></span> ~/.claude/settings.json <span class="token operator"><<</span> <span class="token string">EOF
</span></span><span class="code-line"><span class="token string">{
</span></span><span class="code-line"><span class="token string"> "anthropicApiKey": "your_api_key_here"
</span></span><span class="code-line"><span class="token string">}
</span></span><span class="code-line"><span class="token string">EOF</span>
</span></code></pre>
<h3 id="諛⑸쾿-4-npx-�ㅽ뻾-��-�섍꼍-蹂���-�꾨떖"><a class="heading-anchor" href="#諛⑸쾿-4-npx-�ㅽ뻾-��-�섍꼍-蹂���-�꾨떖">諛⑸쾿 4: npx �ㅽ뻾 �� �섍꼍 蹂��� �꾨떖</a></h3>
<p>�쇳쉶�깆쑝濡� �ㅽ뻾�� �뚮뒗 紐낅졊�댁뿉 吏곸젒 �섍꼍 蹂��섎� �꾨떖�� �� �덉뒿�덈떎:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token assign-left variable">ANTHROPIC_API_KEY</span><span class="token operator">=</span><span class="token string">"your_api_key_here"</span> npx taskmaster-ai init
</span></code></pre>
<h2 id="寃�利�-諛⑸쾿"><a class="heading-anchor" href="#寃�利�-諛⑸쾿">寃�利� 諛⑸쾿</a></h2>
<h3 id="1-�섍꼍-蹂���-�뺤씤"><a class="heading-anchor" href="#1-�섍꼍-蹂���-�뺤씤">1. �섍꼍 蹂��� �뺤씤</a></h3>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># API �ㅺ� �щ컮瑜닿쾶 �ㅼ젙�섏뿀�붿� �뺤씤</span>
</span><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token variable">$ANTHROPIC_API_KEY</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># 紐⑤뱺 �섍꼍 蹂��� 以� ANTHROPIC�쇰줈 �쒖옉�섎뒗 寃껊뱾 �뺤씤</span>
</span><span class="code-line"><span class="token function">env</span> <span class="token operator">|</span> <span class="token function">grep</span> ANTHROPIC
</span></code></pre>
<h3 id="2-nodejs-�섍꼍�먯꽌-�섍꼍-蹂���-�묎렐-�뚯뒪��"><a class="heading-anchor" href="#2-nodejs-�섍꼍�먯꽌-�섍꼍-蹂���-�묎렐-�뚯뒪��">2. Node.js �섍꼍�먯꽌 �섍꼍 蹂��� �묎렐 �뚯뒪��</a></h3>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">node</span> <span class="token parameter variable">-e</span> <span class="token string">"console.log('API Key:', process.env.ANTHROPIC_API_KEY)"</span>
</span></code></pre>
<h3 id="3-taskmaster-ai-�뺤긽-�묐룞-�뺤씤"><a class="heading-anchor" href="#3-taskmaster-ai-�뺤긽-�묐룞-�뺤씤">3. taskmaster-ai �뺤긽 �묐룞 �뺤씤</a></h3>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 珥덇린�� 紐낅졊�대줈 �뚯뒪��</span>
</span><span class="code-line">npx taskmaster-ai init
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># �먮뒗 紐⑤뜽 �ㅼ젙 �뺤씤</span>
</span><span class="code-line">npx taskmaster-ai models
</span></code></pre>
<h2 id="異붽�-�몃윭釉붿뒋��"><a class="heading-anchor" href="#異붽�-�몃윭釉붿뒋��">異붽� �몃윭釉붿뒋��</a></h2>
<h3 id="沅뚰븳-臾몄젣"><a class="heading-anchor" href="#沅뚰븳-臾몄젣">沅뚰븳 臾몄젣</a></h3>
<p>Homebrew濡� �ㅼ튂�� �⑦궎吏��� 沅뚰븳 臾몄젣媛� �덈뒗 寃쎌슦:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># npm �꾩뿭 �⑦궎吏� 沅뚰븳 �섏젙</span>
</span><span class="code-line"><span class="token function">sudo</span> <span class="token function">chown</span> <span class="token parameter variable">-R</span> <span class="token variable"><span class="token variable">$(</span><span class="token function">whoami</span><span class="token variable">)</span></span> <span class="token variable"><span class="token variable">$(</span><span class="token function">npm</span> config get prefix<span class="token variable">)</span></span>/<span class="token punctuation">{</span>lib/node_modules,bin,share<span class="token punctuation">}</span>
</span></code></pre>
<h3 id="罹먯떆-�뺣━"><a class="heading-anchor" href="#罹먯떆-�뺣━">罹먯떆 �뺣━</a></h3>
<p>npm 罹먯떆 臾몄젣媛� �섏떖�섎뒗 寃쎌슦:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># npm 罹먯떆 �뺣━</span>
</span><span class="code-line"><span class="token function">npm</span> cache clean <span class="token parameter variable">--force</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># npx 罹먯떆 �뺣━</span>
</span><span class="code-line">npx clear-npx-cache
</span></code></pre>
<h3 id="nodejs-�ъ꽕移�"><a class="heading-anchor" href="#nodejs-�ъ꽕移�">Node.js �ъ꽕移�</a></h3>
<p>臾몄젣媛� 吏��띾릺硫� Node.js瑜� �꾩쟾�� �ъ꽕移�:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 湲곗〈 Node.js �쒓굅</span>
</span><span class="code-line">brew uninstall <span class="token function">node</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># 理쒖떊 踰꾩쟾 �ㅼ튂</span>
</span><span class="code-line">brew <span class="token function">install</span> <span class="token function">node</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># �ㅼ튂 �뺤씤</span>
</span><span class="code-line"><span class="token function">node</span> <span class="token parameter variable">--version</span>
</span><span class="code-line"><span class="token function">npm</span> <span class="token parameter variable">--version</span>
</span></code></pre>
<h2 id="�덈갑-諛⑸쾿"><a class="heading-anchor" href="#�덈갑-諛⑸쾿">�덈갑 諛⑸쾿</a></h2>
<h3 id="1-�쇨���-媛쒕컻-�섍꼍-援ъ텞"><a class="heading-anchor" href="#1-�쇨���-媛쒕컻-�섍꼍-援ъ텞">1. �쇨��� 媛쒕컻 �섍꼍 援ъ텞</a></h3>
<p>媛쒕컻�� �꾩껜媛� �숈씪�� �섍꼍�� �ъ슜�섎룄濡� 沅뚯옣�ы빆�� �뺣━�⑸땲��:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># .nvmrc �뚯씪濡� Node.js 踰꾩쟾 怨좎젙</span>
</span><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token string">"20.11.0"</span> <span class="token operator">></span> .nvmrc
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># package.json�� engines �꾨뱶 異붽�</span>
</span><span class="code-line"><span class="token string">"engines"</span><span class="token builtin class-name">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token string">"node"</span><span class="token builtin class-name">:</span> <span class="token string">">=20.0.0"</span>,
</span><span class="code-line"> <span class="token string">"npm"</span><span class="token builtin class-name">:</span> <span class="token string">">=9.0.0"</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="2-�섍꼍-�ㅼ젙-�먮룞��-�ㅽ겕由쏀듃"><a class="heading-anchor" href="#2-�섍꼍-�ㅼ젙-�먮룞��-�ㅽ겕由쏀듃">2. �섍꼍 �ㅼ젙 �먮룞�� �ㅽ겕由쏀듃</a></h3>
<p>�꾨줈�앺듃�� �섍꼍 �ㅼ젙 �ㅽ겕由쏀듃瑜� 異붽�:</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token shebang important">#!/bin/bash</span>
</span><span class="code-line"><span class="token comment"># setup-env.sh</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token string">"�뵩 媛쒕컻 �섍꼍�� �ㅼ젙�⑸땲��..."</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># API �� �뺤씤</span>
</span><span class="code-line"><span class="token keyword">if</span> <span class="token punctuation">[</span> <span class="token parameter variable">-z</span> <span class="token string">"<span class="token variable">$ANTHROPIC_API_KEY</span>"</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">then</span>
</span><span class="code-line"> <span class="token builtin class-name">echo</span> <span class="token string">"�� ANTHROPIC_API_KEY �섍꼍 蹂��섍� �ㅼ젙�섏� �딆븯�듬땲��."</span>
</span><span class="code-line"> <span class="token builtin class-name">echo</span> <span class="token string">"�뮕 .env �뚯씪�� API �ㅻ� �ㅼ젙�댁＜�몄슂."</span>
</span><span class="code-line"> <span class="token builtin class-name">exit</span> <span class="token number">1</span>
</span><span class="code-line"><span class="token keyword">fi</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment"># taskmaster-ai �ㅼ튂 �뺤씤</span>
</span><span class="code-line"><span class="token keyword">if</span> <span class="token operator">!</span> <span class="token builtin class-name">command</span> <span class="token parameter variable">-v</span> taskmaster-ai <span class="token operator">&></span> /dev/null<span class="token punctuation">;</span> <span class="token keyword">then</span>
</span><span class="code-line"> <span class="token builtin class-name">echo</span> <span class="token string">"�벀 taskmaster-ai瑜� �ㅼ튂�⑸땲��..."</span>
</span><span class="code-line"> <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> taskmaster-ai
</span><span class="code-line"><span class="token keyword">fi</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token builtin class-name">echo</span> <span class="token string">"�� �섍꼍 �ㅼ젙�� �꾨즺�섏뿀�듬땲��!"</span>
</span></code></pre>
<h2 id="寃곕줎"><a class="heading-anchor" href="#寃곕줎">寃곕줎</a></h2>
<p>Homebrew濡� �ㅼ튂�� Node.js �섍꼍�먯꽌 taskmaster-ai媛� Claude Code API瑜� 李얠� 紐삵븯�� 臾몄젣��
二쇰줈 �섍꼍 蹂��� �ㅼ젙怨� 寃쎈줈 �몄떇 臾몄젣�먯꽌 鍮꾨’�⑸땲��.</p>
<p><strong>沅뚯옣 �닿껐 �쒖꽌</strong>:</p>
<ol>
<li>�꾨줈�앺듃蹂� <code>.env</code> �뚯씪 �앹꽦 (媛��� �덉쟾)</li>
<li>�섍꼍 蹂��� 吏곸젒 �ㅼ젙 (�꾩뿭 �ъ슜 ��)</li>
<li>Claude Code �ㅼ젙 �뚯씪 �뺤씤</li>
<li>�꾩슂 �� Node.js �ъ꽕移�</li>
</ol>
<p>�대윭�� �④퀎瑜� �듯빐 ��遺�遺꾩쓽 �섍꼍 �ㅼ젙 臾몄젣瑜� �닿껐�� �� �덉쑝硫�, �� �⑥쐞 媛쒕컻�먯꽌��
�쇨��� �섍꼍�� �좎��� �� �덉뒿�덈떎.</p>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/js/tip/2025/08/31/homebrew-nodejs-taskmaster-ai-claude-code-api-issue">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>JavaScript 援ъ“遺꾪빐 �좊떦 �ㅼ쟾 媛��대뱶</title>
<description><![CDATA[## 紐⑹감
```toc
```
## 援ъ“遺꾪빐 �좊떦�대�?
諛곗뿴�대굹 媛앹껜�� �띿꽦�� �댁껜�섏뿬 媛쒕퀎 蹂��섏뿉 �대뒗 ES6 臾몃쾿�낅땲��.
```javascript
// Before
const userName = user.name
const userAge = user.age
// After - 援ъ“遺꾪빐 �좊떦
const { name, age } = user
```
## 媛앹껜 援ъ“遺꾪빐
### 湲곕낯 �ъ슜踰�
```javascript
const user = { name: 'John', age: 30, job: 'Developer'...]]></description>
<link>https://blog.jell.kr/posts/dev/blog/2025/08/28/javascript-destructuring-complete-guide</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/blog/2025/08/28/javascript-destructuring-complete-guide</guid>
<pubDate>Thu, 28 Aug 2025 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Javascript]]></category>
<category><![CDATA[javascript]]></category>
<category><![CDATA[destructuring]]></category>
<category><![CDATA[es6]]></category>
<category><![CDATA[clean-code]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Javascript</p>
<p><strong>�쒓렇:</strong> javascript, destructuring, es6, clean-code</p>
<hr/>
<h2 id="援ъ“遺꾪빐-�좊떦�대�"><a class="heading-anchor" href="#援ъ“遺꾪빐-�좊떦�대�">援ъ“遺꾪빐 �좊떦�대�?</a></h2>
<p>諛곗뿴�대굹 媛앹껜�� �띿꽦�� �댁껜�섏뿬 媛쒕퀎 蹂��섏뿉 �대뒗 ES6 臾몃쾿�낅땲��.</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// Before</span>
</span><span class="code-line"><span class="token keyword">const</span> userName <span class="token operator">=</span> user<span class="token punctuation">.</span><span class="token property-access">name</span>
</span><span class="code-line"><span class="token keyword">const</span> userAge <span class="token operator">=</span> user<span class="token punctuation">.</span><span class="token property-access">age</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// After - 援ъ“遺꾪빐 �좊떦</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age <span class="token punctuation">}</span> <span class="token operator">=</span> user
</span></code></pre>
<h2 id="媛앹껜-援ъ“遺꾪빐"><a class="heading-anchor" href="#媛앹껜-援ъ“遺꾪빐">媛앹껜 援ъ“遺꾪빐</a></h2>
<h3 id="湲곕낯-�ъ슜踰�"><a class="heading-anchor" href="#湲곕낯-�ъ슜踰�">湲곕낯 �ъ슜踰�</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token literal-property property">job</span><span class="token operator">:</span> <span class="token string">'Developer'</span> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> job <span class="token punctuation">}</span> <span class="token operator">=</span> user
</span><span class="code-line">
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token comment">// 'John'</span>
</span></code></pre>
<h3 id="蹂��섎챸-蹂�寃�"><a class="heading-anchor" href="#蹂��섎챸-蹂�寃�">蹂��섎챸 蹂�寃�</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> userName<span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> userAge <span class="token punctuation">}</span> <span class="token operator">=</span> user
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>userName<span class="token punctuation">)</span> <span class="token comment">// 'John'</span>
</span></code></pre>
<h3 id="湲곕낯媛�-�ㅼ젙"><a class="heading-anchor" href="#湲곕낯媛�-�ㅼ젙">湲곕낯媛� �ㅼ젙</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> name <span class="token operator">=</span> <span class="token string">'Anonymous'</span><span class="token punctuation">,</span> level <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token operator">=</span> user
</span></code></pre>
<h3 id="以묒꺽-媛앹껜"><a class="heading-anchor" href="#以묒꺽-媛앹껜">以묒꺽 媛앹껜</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">profile</span><span class="token operator">:</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> avatar <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span> <span class="token operator">=</span> userData
</span></code></pre>
<h3 id="rest-�⑦꽩"><a class="heading-anchor" href="#rest-�⑦꽩">Rest �⑦꽩</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> id<span class="token punctuation">,</span> <span class="token spread operator">...</span>otherInfo <span class="token punctuation">}</span> <span class="token operator">=</span> user
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>otherInfo<span class="token punctuation">)</span> <span class="token comment">// id瑜� �쒖쇅�� �섎㉧吏�</span>
</span></code></pre>
<h2 id="諛곗뿴-援ъ“遺꾪빐"><a class="heading-anchor" href="#諛곗뿴-援ъ“遺꾪빐">諛곗뿴 援ъ“遺꾪빐</a></h2>
<h3 id="湲곕낯-�ъ슜踰�-1"><a class="heading-anchor" href="#湲곕낯-�ъ슜踰�-1">湲곕낯 �ъ슜踰�</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> colors <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token string">'green'</span><span class="token punctuation">,</span> <span class="token string">'blue'</span><span class="token punctuation">]</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">[</span>primary<span class="token punctuation">,</span> secondary<span class="token punctuation">]</span> <span class="token operator">=</span> colors
</span></code></pre>
<h3 id="�붿냼-嫄대꼫�곌린"><a class="heading-anchor" href="#�붿냼-嫄대꼫�곌린">�붿냼 嫄대꼫�곌린</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">[</span>first<span class="token punctuation">,</span> <span class="token punctuation">,</span> third<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
</span></code></pre>
<h3 id="媛�-援먰솚"><a class="heading-anchor" href="#媛�-援먰솚">媛� 援먰솚</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span>
</span><span class="code-line"> b <span class="token operator">=</span> <span class="token number">2</span>
</span><span class="code-line"><span class="token punctuation">;</span><span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>b<span class="token punctuation">,</span> a<span class="token punctuation">]</span>
</span></code></pre>
<h3 id="rest濡�-�섎㉧吏�-�섏쭛"><a class="heading-anchor" href="#rest濡�-�섎㉧吏�-�섏쭛">Rest濡� �섎㉧吏� �섏쭛</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">[</span>first<span class="token punctuation">,</span> <span class="token spread operator">...</span>rest<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span>
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>rest<span class="token punctuation">)</span> <span class="token comment">// [2, 3, 4, 5]</span>
</span></code></pre>
<h2 id="�⑥닔�먯꽌-�쒖슜"><a class="heading-anchor" href="#�⑥닔�먯꽌-�쒖슜">�⑥닔�먯꽌 �쒖슜</a></h2>
<h3 id="�뚮씪誘명꽣-援ъ“遺꾪빐"><a class="heading-anchor" href="#�뚮씪誘명꽣-援ъ“遺꾪빐">�뚮씪誘명꽣 援ъ“遺꾪빐</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">createUser</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> email<span class="token punctuation">,</span> age <span class="token operator">=</span> <span class="token number">18</span> <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> email<span class="token punctuation">,</span> age <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token function">createUser</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span> <span class="token literal-property property">email</span><span class="token operator">:</span> <span class="token string">'john@test.com'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
<h3 id="由ы꽩媛�-援ъ“遺꾪빐"><a class="heading-anchor" href="#由ы꽩媛�-援ъ“遺꾪빐">由ы꽩媛� 援ъ“遺꾪빐</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">getCoordinates</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> x<span class="token punctuation">,</span> y <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">getCoordinates</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></code></pre>
<h3 id="諛곗뿴-硫붿냼�쒖�-議고빀"><a class="heading-anchor" href="#諛곗뿴-硫붿냼�쒖�-議고빀">諛곗뿴 硫붿냼�쒖� 議고빀</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> users <span class="token operator">=</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">30</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Jane'</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">25</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">]</span>
</span><span class="code-line">
</span><span class="code-line">users<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> age <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> (</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">��)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
</span><span class="code-line">users<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> age <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> age <span class="token operator">></span> <span class="token number">25</span><span class="token punctuation">)</span>
</span></code></pre>
<h2 id="react�먯꽌-�쒖슜"><a class="heading-anchor" href="#react�먯꽌-�쒖슜">React�먯꽌 �쒖슜</a></h2>
<h3 id="props-援ъ“遺꾪빐"><a class="heading-anchor" href="#props-援ъ“遺꾪빐">Props 援ъ“遺꾪빐</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">UserCard</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> email<span class="token punctuation">,</span> avatar<span class="token punctuation">,</span> isOnline <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token operator"><</span>div<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator"><</span>img src<span class="token operator">=</span><span class="token punctuation">{</span>avatar<span class="token punctuation">}</span> alt<span class="token operator">=</span><span class="token punctuation">{</span>name<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
</span><span class="code-line"> <span class="token operator"><</span>h2<span class="token operator">></span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator"><</span>p<span class="token operator">></span><span class="token punctuation">{</span>email<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator"><</span>span<span class="token operator">></span><span class="token punctuation">{</span>isOnline <span class="token operator">?</span> <span class="token string">'�⑤씪��'</span> <span class="token operator">:</span> <span class="token string">'�ㅽ봽�쇱씤'</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="hook-援ъ“遺꾪빐"><a class="heading-anchor" href="#hook-援ъ“遺꾪빐">Hook 援ъ“遺꾪빐</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> data<span class="token punctuation">,</span> loading<span class="token punctuation">,</span> error <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useQuery</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></code></pre>
<h2 id="二쇱쓽�ы빆"><a class="heading-anchor" href="#二쇱쓽�ы빆">二쇱쓽�ы빆</a></h2>
<h3 id="nullundefined-泥섎━"><a class="heading-anchor" href="#nullundefined-泥섎━">null/undefined 泥섎━</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// �� �먮윭 諛쒖깮</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword null nil">null</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �� �덉쟾�� 泥섎━</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token operator">=</span> user <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token operator">=</span> user <span class="token operator">??</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="以묒꺽-援ъ“遺꾪빐-二쇱쓽"><a class="heading-anchor" href="#以묒꺽-援ъ“遺꾪빐-二쇱쓽">以묒꺽 援ъ“遺꾪빐 二쇱쓽</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// �덈Т 源딆� 以묒꺽�� 媛��낆꽦 ����</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">profile</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">settings</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">notifications</span><span class="token operator">:</span> <span class="token punctuation">{</span> email <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span> <span class="token operator">=</span> user <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="�ㅻТ-��"><a class="heading-anchor" href="#�ㅻТ-��">�ㅻТ ��</a></h2>
<h3 id="api-�묐떟-泥섎━"><a class="heading-anchor" href="#api-�묐떟-泥섎━">API �묐떟 泥섎━</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> data<span class="token punctuation">,</span> status<span class="token punctuation">,</span> message <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword control-flow">await</span> api<span class="token punctuation">.</span><span class="token method function property-access">fetchUser</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span> user<span class="token punctuation">,</span> posts <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> total <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span> <span class="token operator">=</span> response
</span></code></pre>
<h3 id="議곌굔遺�-援ъ“遺꾪빐"><a class="heading-anchor" href="#議곌굔遺�-援ъ“遺꾪빐">議곌굔遺� 援ъ“遺꾪빐</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token string">'dark'</span><span class="token punctuation">,</span> <span class="token literal-property property">notifications</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> theme <span class="token operator">=</span> <span class="token string">'light'</span><span class="token punctuation">,</span> language <span class="token operator">=</span> <span class="token string">'ko'</span> <span class="token punctuation">}</span> <span class="token operator">=</span> config
</span></code></pre>
<h3 id="typescript��-�④퍡"><a class="heading-anchor" href="#typescript��-�④퍡">TypeScript�� �④퍡</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">User</span> <span class="token punctuation">{</span>
</span><span class="code-line"> name<span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"> age<span class="token operator">:</span> <span class="token builtin">number</span>
</span><span class="code-line"> email<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> email <span class="token operator">=</span> <span class="token string">'no-email'</span> <span class="token punctuation">}</span><span class="token operator">:</span> User <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUser</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></code></pre>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/blog/2025/08/28/javascript-destructuring-complete-guide">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>JavaScript 諛곗뿴 以묐났 �쒓굅 3媛�吏� 諛⑸쾿</title>
<description><![CDATA[## 紐⑹감
```toc
```
## 媛쒖슂
JavaScript 媛쒕컻�� �섎떎 蹂대㈃ 諛곗뿴�먯꽌 以묐났�� 媛믪쓣 �쒓굅�댁빞 �섎뒗 �곹솴�� �먯＜ 諛쒖깮�⑸땲��.
API�먯꽌 諛쏆븘�� �곗씠�곕굹 �ъ슜�� �낅젰 泥섎━ �� 以묐났�� �쒓굅�섎뒗 寃껋� �꾩닔�곸씤 �묒뾽�낅땲��.
�ㅻ뒛�� 媛��� �⑥쑉�곸씠怨� �ㅼ슜�곸씤 3媛�吏� 諛⑸쾿�� �뚯븘蹂닿쿋�듬땲��.
## 諛⑸쾿 1: Set�� �댁슜�� 以묐났 �쒓굅 (媛��� 媛꾨떒)
```javascript
const numbers = [1, 2, 2, 3, 4, 4, 5]
const uniqueNumbers = [...new Set(numbers...]]></description>
<link>https://blog.jell.kr/posts/dev/js/2025/08/23/JavaScript 諛곗뿴 以묐났 �쒓굅 3媛�吏� 諛⑸쾿</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/js/2025/08/23/JavaScript 諛곗뿴 以묐났 �쒓굅 3媛�吏� 諛⑸쾿</guid>
<pubDate>Sat, 23 Aug 2025 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Javascript]]></category>
<category><![CDATA[Javascript]]></category>
<category><![CDATA[Array]]></category>
<category><![CDATA[Tips]]></category>
<category><![CDATA[媛쒕컻]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Javascript</p>
<p><strong>�쒓렇:</strong> Javascript, Array, Tips, 媛쒕컻</p>
<hr/>
<h2 id="媛쒖슂"><a class="heading-anchor" href="#媛쒖슂">媛쒖슂</a></h2>
<p>JavaScript 媛쒕컻�� �섎떎 蹂대㈃ 諛곗뿴�먯꽌 以묐났�� 媛믪쓣 �쒓굅�댁빞 �섎뒗 �곹솴�� �먯＜ 諛쒖깮�⑸땲��.
API�먯꽌 諛쏆븘�� �곗씠�곕굹 �ъ슜�� �낅젰 泥섎━ �� 以묐났�� �쒓굅�섎뒗 寃껋� �꾩닔�곸씤 �묒뾽�낅땲��.
�ㅻ뒛�� 媛��� �⑥쑉�곸씠怨� �ㅼ슜�곸씤 3媛�吏� 諛⑸쾿�� �뚯븘蹂닿쿋�듬땲��.</p>
<h2 id="諛⑸쾿-1-set��-�댁슜��-以묐났-�쒓굅-媛���-媛꾨떒"><a class="heading-anchor" href="#諛⑸쾿-1-set��-�댁슜��-以묐났-�쒓굅-媛���-媛꾨떒">諛⑸쾿 1: Set�� �댁슜�� 以묐났 �쒓굅 (媛��� 媛꾨떒)</a></h2>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span>
</span><span class="code-line"><span class="token keyword">const</span> uniqueNumbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token spread operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>numbers<span class="token punctuation">)</span><span class="token punctuation">]</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>uniqueNumbers<span class="token punctuation">)</span> <span class="token comment">// [1, 2, 3, 4, 5]</span>
</span></code></pre>
<p><strong>�μ젏</strong>: 肄붾뱶媛� 留ㅼ슦 媛꾧껐�섍퀬 吏곴��곸엯�덈떎.
<strong>�⑥젏</strong>: 媛앹껜 諛곗뿴�먯꽌�� 李몄“ 鍮꾧탳濡쒕쭔 �묐룞�⑸땲��.</p>
<h2 id="諛⑸쾿-2-filter��-indexof瑜�-�댁슜��-諛⑸쾿"><a class="heading-anchor" href="#諛⑸쾿-2-filter��-indexof瑜�-�댁슜��-諛⑸쾿">諛⑸쾿 2: filter�� indexOf瑜� �댁슜�� 諛⑸쾿</a></h2>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span>
</span><span class="code-line"><span class="token keyword">const</span> uniqueNumbers <span class="token operator">=</span> numbers<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> numbers<span class="token punctuation">.</span><span class="token method function property-access">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">===</span> index
</span><span class="code-line"><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>uniqueNumbers<span class="token punctuation">)</span> <span class="token comment">// [1, 2, 3, 4, 5]</span>
</span></code></pre>
<p><strong>�먮━</strong>: 泥� 踰덉㎏濡� �섑��섎뒗 �붿냼�� �몃뜳�ㅼ� �꾩옱 �몃뜳�ㅺ� 媛숈� 寃쎌슦留� �꾪꽣留곹빀�덈떎.</p>
<h2 id="諛⑸쾿-3-媛앹껜-諛곗뿴��-以묐났-�쒓굅-�뱀젙-�꾨줈�쇳떚-湲곗�"><a class="heading-anchor" href="#諛⑸쾿-3-媛앹껜-諛곗뿴��-以묐났-�쒓굅-�뱀젙-�꾨줈�쇳떚-湲곗�">諛⑸쾿 3: 媛앹껜 諛곗뿴�� 以묐났 �쒓굅 (�뱀젙 �꾨줈�쇳떚 湲곗�)</a></h2>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> users <span class="token operator">=</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'John'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Jane'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'John'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Bob'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">]</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// id 湲곗��쇰줈 以묐났 �쒓굅</span>
</span><span class="code-line"><span class="token keyword">const</span> uniqueUsers <span class="token operator">=</span> users<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token parameter">user<span class="token punctuation">,</span> index<span class="token punctuation">,</span> self</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> index <span class="token operator">===</span> self<span class="token punctuation">.</span><span class="token method function property-access">findIndex</span><span class="token punctuation">(</span><span class="token parameter">u</span> <span class="token arrow operator">=></span> u<span class="token punctuation">.</span><span class="token property-access">id</span> <span class="token operator">===</span> user<span class="token punctuation">.</span><span class="token property-access">id</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>uniqueUsers<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token comment">// [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 3, name: 'Bob' }]</span>
</span></code></pre>
<p><strong>�쒖슜��</strong>: �ㅼ젣 媛쒕컻�먯꽌 媛��� 留롮씠 �ъ슜�섎뒗 �⑦꽩�낅땲��.</p>
<h2 id="�깅뒫-鍮꾧탳"><a class="heading-anchor" href="#�깅뒫-鍮꾧탳">�깅뒫 鍮꾧탳</a></h2>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// �� 諛곗뿴�먯꽌�� �깅뒫 �뚯뒪��</span>
</span><span class="code-line"><span class="token keyword">const</span> largeArray <span class="token operator">=</span> <span class="token known-class-name class-name">Array</span><span class="token punctuation">.</span><span class="token keyword module">from</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">length</span><span class="token operator">:</span> <span class="token number">10000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>
</span><span class="code-line"> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">floor</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">time</span><span class="token punctuation">(</span><span class="token string">'Set 諛⑸쾿'</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token keyword">const</span> result1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token spread operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>largeArray<span class="token punctuation">)</span><span class="token punctuation">]</span>
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">timeEnd</span><span class="token punctuation">(</span><span class="token string">'Set 諛⑸쾿'</span><span class="token punctuation">)</span> <span class="token comment">// 媛��� 鍮좊쫫</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">time</span><span class="token punctuation">(</span><span class="token string">'filter 諛⑸쾿'</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token keyword">const</span> result2 <span class="token operator">=</span> largeArray<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> largeArray<span class="token punctuation">.</span><span class="token method function property-access">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">===</span> index
</span><span class="code-line"><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">timeEnd</span><span class="token punctuation">(</span><span class="token string">'filter 諛⑸쾿'</span><span class="token punctuation">)</span> <span class="token comment">// �곷��곸쑝濡� �먮┝</span>
</span></code></pre>
<h2 id="�ㅻТ�먯꽌-�먯＜-�곕뒗-�좏떥-�⑥닔"><a class="heading-anchor" href="#�ㅻТ�먯꽌-�먯＜-�곕뒗-�좏떥-�⑥닔">�ㅻТ�먯꽌 �먯＜ �곕뒗 �좏떥 �⑥닔</a></h2>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// �쇰컲 諛곗뿴 以묐났 �쒓굅</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">removeDuplicates</span> <span class="token operator">=</span> <span class="token parameter">arr</span> <span class="token arrow operator">=></span> <span class="token punctuation">[</span><span class="token spread operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">]</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// 媛앹껜 諛곗뿴 以묐났 �쒓굅 (�뱀젙 �� 湲곗�)</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">removeDuplicatesByKey</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>
</span><span class="code-line"> arr<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index<span class="token punctuation">,</span> self</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>
</span><span class="code-line"> index <span class="token operator">===</span> self<span class="token punctuation">.</span><span class="token method function property-access">findIndex</span><span class="token punctuation">(</span><span class="token parameter">obj</span> <span class="token arrow operator">=></span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">===</span> item<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �ъ슜 �덉떆</span>
</span><span class="code-line"><span class="token keyword">const</span> tags <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'react'</span><span class="token punctuation">,</span> <span class="token string">'javascript'</span><span class="token punctuation">,</span> <span class="token string">'react'</span><span class="token punctuation">,</span> <span class="token string">'css'</span><span class="token punctuation">,</span> <span class="token string">'javascript'</span><span class="token punctuation">]</span>
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">removeDuplicates</span><span class="token punctuation">(</span>tags<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// ['react', 'javascript', 'css']</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> products <span class="token operator">=</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'iPhone'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Samsung'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'iPhone'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">]</span>
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">removeDuplicatesByKey</span><span class="token punctuation">(</span>products<span class="token punctuation">,</span> <span class="token string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token comment">// [{ id: 1, name: 'iPhone' }, { id: 2, name: 'Samsung' }]</span>
</span></code></pre>
<h2 id="留덈Т由�"><a class="heading-anchor" href="#留덈Т由�">留덈Т由�</a></h2>
<ul>
<li><strong>媛꾨떒�� �먯떆媛� 諛곗뿴</strong>: Set �ъ슜</li>
<li><strong>�먯떆媛� 諛곗뿴 (援ы삎 釉뚮씪�곗� 吏��� �꾩슂)</strong>: filter + indexOf</li>
<li><strong>媛앹껜 諛곗뿴</strong>: filter + findIndex</li>
</ul>
<p>�� 3媛�吏� 諛⑸쾿留� �뚭퀬 �덉쑝硫� 99%�� 以묐났 �쒓굅 �곹솴�� �닿껐�� �� �덉뒿�덈떎.
媛��� �곹빀�� 諛⑸쾿�� �좏깮�섏뿬 源붾걫�섍퀬 �⑥쑉�곸씤 肄붾뱶瑜� �묒꽦�섏떆湲� 諛붾엻�덈떎.</p>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/js/2025/08/23/JavaScript 諛곗뿴 以묐났 �쒓굅 3媛�吏� 諛⑸쾿">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>蹂듭옟�� 議곌굔臾� 由ы뙥�좊쭅 | 媛앹껜 �쒖슜�쇰줈 肄붾뱶 媛��낆꽦 �μ긽�쒗궎湲�</title>
<description><![CDATA[## 紐⑹감
```toc
```
媛쒕컻�섎떎 蹂대㈃ if臾몄씠 以꾩쨪�� �댁뼱吏��� 肄붾뱶瑜� �먯＜ 留덉＜移섍쾶 �⑸땲��. 泥섏쓬�� �먯꽭 媛쒕씪 愿쒖갖����, 議곌굔�� �섎굹�� �섏뼱�좎닔濡� �먯젏 �먮�湲� �レ� 肄붾뱶媛� �⑸땲��.
```javascript
// �뷀엳 蹂� �� �덈뒗 議곌굔臾� 肄붾뱶
function getStatusMessage(status) {
if (status === 'loading') {
return '�곗씠�곕� 遺덈윭�ㅻ뒗 以묒엯�덈떎...'
}
if (status === 'success') {
return '�깃났�곸쑝濡� 泥섎━��...]]></description>
<link>https://blog.jell.kr/posts/dev/blog/2025/08/23/conditional-refactoring-with-objects</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/blog/2025/08/23/conditional-refactoring-with-objects</guid>
<pubDate>Sat, 23 Aug 2025 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Blog]]></category>
<category><![CDATA[refactoring]]></category>
<category><![CDATA[clean-code]]></category>
<category><![CDATA[javascript]]></category>
<category><![CDATA[conditional-statements]]></category>
<category><![CDATA[best-practices]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Blog</p>
<p><strong>�쒓렇:</strong> refactoring, clean-code, javascript, conditional-statements, best-practices</p>
<hr/>
<h2 id="湲곕낯�곸씤-媛앹껜-�쒖슜"><a class="heading-anchor" href="#湲곕낯�곸씤-媛앹껜-�쒖슜">湲곕낯�곸씤 媛앹껜 �쒖슜</a></h2>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 媛쒖꽑�� 諛⑹떇</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token constant">STATUS_MESSAGES</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token string">'�곗씠�곕� 遺덈윭�ㅻ뒗 以묒엯�덈떎...'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">success</span><span class="token operator">:</span> <span class="token string">'�깃났�곸쑝濡� 泥섎━�섏뿀�듬땲��!'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">error</span><span class="token operator">:</span> <span class="token string">'�ㅻ쪟媛� 諛쒖깮�덉뒿�덈떎. �ㅼ떆 �쒕룄�댁＜�몄슂.'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">empty</span><span class="token operator">:</span> <span class="token string">'�쒖떆�� �곗씠�곌� �놁뒿�덈떎.'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">unauthorized</span><span class="token operator">:</span> <span class="token string">'沅뚰븳�� �놁뒿�덈떎.'</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">getStatusMessage</span><span class="token punctuation">(</span><span class="token parameter">status</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token constant">STATUS_MESSAGES</span><span class="token punctuation">[</span>status<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token string">'�� �� �녿뒗 �곹깭�낅땲��.'</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>紐⑤뱺 �곹깭�� 硫붿떆吏�媛� �� 怨녹뿉 紐⑥뿬�덉뼱 �쒕늿�� �뚯븙�섍퀬, �덈줈�� �곹깭 異붽��� �� 以꾩씠硫� �⑸땲��. 媛앹껜 �꾨줈�쇳떚 �묎렐�� O(1)�대씪 議곌굔�� 留롮븘�몃룄 �깅뒫�� �곹뼢�� �놁뒿�덈떎.</p>
<h2 id="�⑥닔瑜�-媛믪쑝濡�-�ｊ린"><a class="heading-anchor" href="#�⑥닔瑜�-媛믪쑝濡�-�ｊ린">�⑥닔瑜� 媛믪쑝濡� �ｊ린</a></h2>
<p>�⑥닚 臾몄옄�� 留ㅽ븨�� �섏뼱�� �⑥닔瑜� 媛믪쑝濡� �곕㈃ �� 蹂듭옟�� 濡쒖쭅�� 泥섎━�� �� �덉뒿�덈떎:</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// �ъ슜�� 沅뚰븳 泥섎━ �덉떆</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token constant">USER_PERMISSION_HANDLERS</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function-variable function">admin</span><span class="token operator">:</span> <span class="token parameter">user</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token spread operator">...</span>user<span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canDelete</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canEdit</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canView</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canManageUsers</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token function-variable function">editor</span><span class="token operator">:</span> <span class="token parameter">user</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token spread operator">...</span>user<span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canDelete</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canEdit</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canView</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canManageUsers</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token function-variable function">viewer</span><span class="token operator">:</span> <span class="token parameter">user</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token spread operator">...</span>user<span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canDelete</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canEdit</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canView</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canManageUsers</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token function-variable function">guest</span><span class="token operator">:</span> <span class="token parameter">user</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token spread operator">...</span>user<span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canDelete</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canEdit</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canView</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">canManageUsers</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">getUserPermissions</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> handler <span class="token operator">=</span>
</span><span class="code-line"> <span class="token constant">USER_PERMISSION_HANDLERS</span><span class="token punctuation">[</span>user<span class="token punctuation">.</span><span class="token property-access">role</span><span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token constant">USER_PERMISSION_HANDLERS</span><span class="token punctuation">.</span><span class="token property-access">guest</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token function">handler</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �ъ슜 �덉떆</span>
</span><span class="code-line"><span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span> <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">'editor'</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">123</span> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token keyword">const</span> userWithPermissions <span class="token operator">=</span> <span class="token function">getUserPermissions</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>userWithPermissions<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token comment">// { name: 'John', role: 'editor', id: 123, canDelete: false,</span>
</span><span class="code-line"><span class="token comment">// canEdit: true, ... }</span>
</span></code></pre>
<h2 id="以묒꺽-媛앹껜-�쒖슜"><a class="heading-anchor" href="#以묒꺽-媛앹껜-�쒖슜">以묒꺽 媛앹껜 �쒖슜</a></h2>
<p>API �먮윭泥섎읆 �� 媛�吏� �ㅻ� 議고빀�댁빞 �� �뚮뒗 以묒꺽 媛앹껜媛� �좎슜�⑸땲��:</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token constant">API_ERROR_HANDLERS</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token number">400</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token constant">INVALID_REQUEST</span><span class="token operator">:</span> <span class="token string">'�섎せ�� �붿껌�낅땲��.'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token constant">MISSING_PARAMETER</span><span class="token operator">:</span> <span class="token string">'�꾩닔 留ㅺ컻蹂��섍� �꾨씫�섏뿀�듬땲��.'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token constant">VALIDATION_FAILED</span><span class="token operator">:</span> <span class="token string">'�낅젰媛� 寃�利앹뿉 �ㅽ뙣�덉뒿�덈떎.'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token number">401</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token constant">UNAUTHORIZED</span><span class="token operator">:</span> <span class="token string">'�몄쬆�� �꾩슂�⑸땲��.'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token constant">TOKEN_EXPIRED</span><span class="token operator">:</span> <span class="token string">'�좏겙�� 留뚮즺�섏뿀�듬땲��.'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token constant">INVALID_TOKEN</span><span class="token operator">:</span> <span class="token string">'�좏슚�섏� �딆� �좏겙�낅땲��.'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token number">403</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token constant">FORBIDDEN</span><span class="token operator">:</span> <span class="token string">'�묎렐 沅뚰븳�� �놁뒿�덈떎.'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token constant">INSUFFICIENT_PERMISSIONS</span><span class="token operator">:</span> <span class="token string">'沅뚰븳�� 遺�議깊빀�덈떎.'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token number">404</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token constant">NOT_FOUND</span><span class="token operator">:</span> <span class="token string">'�붿껌�� 由ъ냼�ㅻ� 李얠쓣 �� �놁뒿�덈떎.'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token constant">ENDPOINT_NOT_EXISTS</span><span class="token operator">:</span> <span class="token string">'議댁옱�섏� �딅뒗 API �붾뱶�ъ씤�몄엯�덈떎.'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">getErrorMessage</span><span class="token punctuation">(</span><span class="token parameter">statusCode<span class="token punctuation">,</span> errorCode</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> statusErrors <span class="token operator">=</span> <span class="token constant">API_ERROR_HANDLERS</span><span class="token punctuation">[</span>statusCode<span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>statusErrors<span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> <span class="token string">'�� �� �녿뒗 �ㅻ쪟媛� 諛쒖깮�덉뒿�덈떎.'</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword control-flow">return</span> statusErrors<span class="token punctuation">[</span>errorCode<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token string">'泥섎━�섏� �딆� �ㅻ쪟�낅땲��.'</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �ъ슜 �덉떆</span>
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">getErrorMessage</span><span class="token punctuation">(</span><span class="token number">401</span><span class="token punctuation">,</span> <span class="token string">'TOKEN_EXPIRED'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token comment">// '�좏겙�� 留뚮즺�섏뿀�듬땲��.'</span>
</span></code></pre>
<h2 id="�ㅻТ-�곸슜-�덉떆"><a class="heading-anchor" href="#�ㅻТ-�곸슜-�덉떆">�ㅻТ �곸슜 �덉떆</a></h2>
<h3 id="react-而댄룷�뚰듃-�뚮뜑留�-遺꾧린"><a class="heading-anchor" href="#react-而댄룷�뚰듃-�뚮뜑留�-遺꾧린">React 而댄룷�뚰듃 �뚮뜑留� 遺꾧린</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 湲곗〈 諛⑹떇 - 蹂듭옟�� if-else</span>
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">renderContent</span><span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'loading'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token operator"><</span><span class="token maybe-class-name">LoadingSpinner</span> <span class="token operator">/</span><span class="token operator">></span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'empty'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token operator"><</span><span class="token maybe-class-name">EmptyState</span> message<span class="token operator">=</span><span class="token string">"�곗씠�곌� �놁뒿�덈떎"</span> <span class="token operator">/</span><span class="token operator">></span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'error'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token operator"><</span><span class="token maybe-class-name">ErrorMessage</span> error<span class="token operator">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'success'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token operator"><</span><span class="token maybe-class-name">DataList</span> items<span class="token operator">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token operator"><</span>div<span class="token operator">></span>�� �� �녿뒗 �곹깭<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// 媛쒖꽑�� 諛⑹떇 - 媛앹껜 �쒖슜</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token constant">CONTENT_RENDERERS</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function-variable function">loading</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token operator"><</span><span class="token maybe-class-name">LoadingSpinner</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function-variable function">empty</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token operator"><</span><span class="token maybe-class-name">EmptyState</span> message<span class="token operator">=</span><span class="token string">"�곗씠�곌� �놁뒿�덈떎"</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function-variable function">error</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token arrow operator">=></span> <span class="token operator"><</span><span class="token maybe-class-name">ErrorMessage</span> error<span class="token operator">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token arrow operator">=></span> <span class="token operator"><</span><span class="token maybe-class-name">DataList</span> items<span class="token operator">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">renderContent</span><span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> renderer <span class="token operator">=</span> <span class="token constant">CONTENT_RENDERERS</span><span class="token punctuation">[</span>type<span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> renderer <span class="token operator">?</span> <span class="token function">renderer</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token operator"><</span>div<span class="token operator">></span>�� �� �녿뒗 �곹깭<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="�곹깭-癒몄떊-援ы쁽"><a class="heading-anchor" href="#�곹깭-癒몄떊-援ы쁽">�곹깭 癒몄떊 援ы쁽</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token constant">SHOPPING_CART_TRANSITIONS</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">empty</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token constant">ADD_ITEM</span><span class="token operator">:</span> <span class="token string">'has_items'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token constant">CLEAR</span><span class="token operator">:</span> <span class="token string">'empty'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">has_items</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token constant">ADD_ITEM</span><span class="token operator">:</span> <span class="token string">'has_items'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function-variable function"><span class="token maybe-class-name">REMOVE_ITEM</span></span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> payload</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> state<span class="token punctuation">.</span><span class="token property-access">items</span><span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">?</span> <span class="token string">'empty'</span> <span class="token operator">:</span> <span class="token string">'has_items'</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token constant">CHECKOUT</span><span class="token operator">:</span> <span class="token string">'checking_out'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token constant">CLEAR</span><span class="token operator">:</span> <span class="token string">'empty'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">checking_out</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token constant">SUCCESS</span><span class="token operator">:</span> <span class="token string">'order_completed'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token constant">FAILURE</span><span class="token operator">:</span> <span class="token string">'has_items'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token constant">CANCEL</span><span class="token operator">:</span> <span class="token string">'has_items'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">order_completed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token constant">NEW_ORDER</span><span class="token operator">:</span> <span class="token string">'empty'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token constant">VIEW_ORDER</span><span class="token operator">:</span> <span class="token string">'order_completed'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">getNextState</span><span class="token punctuation">(</span><span class="token parameter">currentState<span class="token punctuation">,</span> action<span class="token punctuation">,</span> payload <span class="token operator">=</span> <span class="token keyword null nil">null</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> transitions <span class="token operator">=</span> <span class="token constant">SHOPPING_CART_TRANSITIONS</span><span class="token punctuation">[</span>currentState<span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>transitions<span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> currentState
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">const</span> transition <span class="token operator">=</span> transitions<span class="token punctuation">[</span>action<span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>transition<span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> currentState
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">typeof</span> transition <span class="token operator">===</span> <span class="token string">'function'</span>
</span><span class="code-line"> <span class="token operator">?</span> <span class="token function">transition</span><span class="token punctuation">(</span>currentState<span class="token punctuation">,</span> payload<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token operator">:</span> transition
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="��-�좏슚��-寃���"><a class="heading-anchor" href="#��-�좏슚��-寃���">�� �좏슚�� 寃���</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token constant">VALIDATION_RULES</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">email</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function-variable function">required</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token operator">!</span>value <span class="token operator">?</span> <span class="token string">'�대찓�쇱� �꾩닔�낅땲��.'</span> <span class="token operator">:</span> <span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function-variable function">format</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> emailRegex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex"><span class="token anchor function">^</span><span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token char-class-negation operator">^</span><span class="token char-set class-name">\s</span>@<span class="token char-class-punctuation punctuation">]</span></span><span class="token quantifier number">+</span>@<span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token char-class-negation operator">^</span><span class="token char-set class-name">\s</span>@<span class="token char-class-punctuation punctuation">]</span></span><span class="token quantifier number">+</span><span class="token special-escape escape">\.</span><span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token char-class-negation operator">^</span><span class="token char-set class-name">\s</span>@<span class="token char-class-punctuation punctuation">]</span></span><span class="token quantifier number">+</span><span class="token anchor function">$</span></span><span class="token regex-delimiter">/</span></span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token operator">!</span>emailRegex<span class="token punctuation">.</span><span class="token method function property-access">test</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">'�щ컮瑜� �대찓�� �뺤떇�� �꾨떃�덈떎.'</span> <span class="token operator">:</span> <span class="token keyword null nil">null</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function-variable function">required</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token operator">!</span>value <span class="token operator">?</span> <span class="token string">'鍮꾨�踰덊샇�� �꾩닔�낅땲��.'</span> <span class="token operator">:</span> <span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function-variable function">minLength</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token arrow operator">=></span>
</span><span class="code-line"> value<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator"><</span> <span class="token number">8</span> <span class="token operator">?</span> <span class="token string">'鍮꾨�踰덊샇�� 8�� �댁긽�댁뼱�� �⑸땲��.'</span> <span class="token operator">:</span> <span class="token keyword null nil">null</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function-variable function">complexity</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> hasNumber <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex"><span class="token char-set class-name">\d</span></span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token method function property-access">test</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">const</span> hasLetter <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex"><span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token range">a<span class="token range-punctuation operator">-</span>z</span><span class="token range">A<span class="token range-punctuation operator">-</span>Z</span><span class="token char-class-punctuation punctuation">]</span></span></span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token method function property-access">test</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token operator">!</span>hasNumber <span class="token operator">||</span> <span class="token operator">!</span>hasLetter
</span><span class="code-line"> <span class="token operator">?</span> <span class="token string">'鍮꾨�踰덊샇�� �レ옄�� 臾몄옄瑜� �ы븿�댁빞 �⑸땲��.'</span>
</span><span class="code-line"> <span class="token operator">:</span> <span class="token keyword null nil">null</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function-variable function">required</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token operator">!</span>value<span class="token operator">?.</span><span class="token method function property-access">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">'�대쫫�� �꾩닔�낅땲��.'</span> <span class="token operator">:</span> <span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function-variable function">minLength</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token arrow operator">=></span>
</span><span class="code-line"> value<span class="token punctuation">.</span><span class="token method function property-access">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator"><</span> <span class="token number">2</span> <span class="token operator">?</span> <span class="token string">'�대쫫�� 2�� �댁긽�댁뼱�� �⑸땲��.'</span> <span class="token operator">:</span> <span class="token keyword null nil">null</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">validateField</span><span class="token punctuation">(</span><span class="token parameter">fieldName<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> rules <span class="token operator">=</span> <span class="token constant">VALIDATION_RULES</span><span class="token punctuation">[</span>fieldName<span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>rules<span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> <span class="token keyword null nil">null</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> <span class="token punctuation">[</span>ruleName<span class="token punctuation">,</span> validator<span class="token punctuation">]</span> <span class="token keyword">of</span> <span class="token known-class-name class-name">Object</span><span class="token punctuation">.</span><span class="token method function property-access">entries</span><span class="token punctuation">(</span>rules<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> error <span class="token operator">=</span> <span class="token function">validator</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> error
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword null nil">null</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="�ㅻⅨ-�몄뼱�먯꽌��-�숈씪-�⑦꽩"><a class="heading-anchor" href="#�ㅻⅨ-�몄뼱�먯꽌��-�숈씪-�⑦꽩">�ㅻⅨ �몄뼱�먯꽌�� �숈씪 �⑦꽩</a></h2>
<h3 id="python-�뺤뀛�덈━-�쒖슜"><a class="heading-anchor" href="#python-�뺤뀛�덈━-�쒖슜">Python �뺤뀛�덈━ �쒖슜</a></h3>
<pre class="language-python"><code class="language-python code-highlight"><span class="code-line"><span class="token comment"># Python�먯꽌�� 援ы쁽</span>
</span><span class="code-line">STATUS_HANDLERS <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token string">'loading'</span><span class="token punctuation">:</span> <span class="token keyword">lambda</span><span class="token punctuation">:</span> <span class="token string">'濡쒕뵫 以묒엯�덈떎...'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">'success'</span><span class="token punctuation">:</span> <span class="token keyword">lambda</span> data<span class="token punctuation">:</span> <span class="token string-interpolation"><span class="token string">f'�깃났: </span><span class="token interpolation"><span class="token punctuation">{</span><span class="token builtin">len</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token string">媛� ��ぉ'</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">'error'</span><span class="token punctuation">:</span> <span class="token keyword">lambda</span> error<span class="token punctuation">:</span> <span class="token string-interpolation"><span class="token string">f'�ㅻ쪟 諛쒖깮: </span><span class="token interpolation"><span class="token punctuation">{</span>error<span class="token punctuation">.</span>message<span class="token punctuation">}</span></span><span class="token string">'</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">'empty'</span><span class="token punctuation">:</span> <span class="token keyword">lambda</span><span class="token punctuation">:</span> <span class="token string">'�곗씠�곌� �놁뒿�덈떎'</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">def</span> <span class="token function">handle_status</span><span class="token punctuation">(</span>status<span class="token punctuation">,</span> data<span class="token operator">=</span><span class="token boolean">None</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
</span><span class="code-line"> handler <span class="token operator">=</span> STATUS_HANDLERS<span class="token punctuation">.</span>get<span class="token punctuation">(</span>status<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">return</span> handler<span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token keyword">if</span> handler <span class="token keyword">else</span> <span class="token string">'�� �� �녿뒗 �곹깭'</span>
</span></code></pre>
<h3 id="typescript-����-�덉쟾�깃낵-�④퍡"><a class="heading-anchor" href="#typescript-����-�덉쟾�깃낵-�④퍡">TypeScript ���� �덉쟾�깃낵 �④퍡</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">StatusType</span> <span class="token operator">=</span> <span class="token string">'loading'</span> <span class="token operator">|</span> <span class="token string">'success'</span> <span class="token operator">|</span> <span class="token string">'error'</span> <span class="token operator">|</span> <span class="token string">'empty'</span>
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">StatusHandler<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token operator">?</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">string</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">StatusHandlers</span> <span class="token punctuation">{</span>
</span><span class="code-line"> loading<span class="token operator">:</span> StatusHandler<span class="token operator"><</span><span class="token builtin">never</span><span class="token operator">></span>
</span><span class="code-line"> success<span class="token operator">:</span> StatusHandler<span class="token operator"><</span><span class="token builtin">any</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">></span>
</span><span class="code-line"> error<span class="token operator">:</span> StatusHandler<span class="token operator"><</span>Error<span class="token operator">></span>
</span><span class="code-line"> empty<span class="token operator">:</span> StatusHandler<span class="token operator"><</span><span class="token builtin">never</span><span class="token operator">></span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> <span class="token constant">STATUS_HANDLERS</span><span class="token operator">:</span> StatusHandlers <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function-variable function">loading</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'濡쒕뵫 以묒엯�덈떎...'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span>data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">�깃났: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>length<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">媛� ��ぉ</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function-variable function">error</span><span class="token operator">:</span> error <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">�ㅻ쪟 諛쒖깮: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>error<span class="token operator">?.</span>message <span class="token operator">||</span> <span class="token string">'�� �� �녿뒗 �ㅻ쪟'</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function-variable function">empty</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'�곗씠�곌� �놁뒿�덈떎'</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token generic-function"><span class="token function">handleStatus</span><span class="token generic class-name"><span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span></span><span class="token punctuation">(</span>status<span class="token operator">:</span> StatusType<span class="token punctuation">,</span> data<span class="token operator">?</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> handler <span class="token operator">=</span> <span class="token constant">STATUS_HANDLERS</span><span class="token punctuation">[</span>status<span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token keyword">return</span> handler <span class="token operator">?</span> <span class="token function">handler</span><span class="token punctuation">(</span>data <span class="token keyword">as</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token string">'�� �� �녿뒗 �곹깭'</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="java-map怨�-�뚮떎-�쒖슜"><a class="heading-anchor" href="#java-map怨�-�뚮떎-�쒖슜">Java Map怨� �뚮떎 �쒖슜</a></h3>
<pre class="language-java"><code class="language-java code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token import"><span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">Map</span></span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token keyword">import</span> <span class="token import"><span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span>function<span class="token punctuation">.</span></span><span class="token class-name">Function</span></span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token class-name">Map</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Function</span><span class="token punctuation"><</span><span class="token class-name">Object</span><span class="token punctuation">,</span> <span class="token class-name">String</span><span class="token punctuation">></span><span class="token punctuation">></span></span> statusHandlers <span class="token operator">=</span> <span class="token class-name">Map</span><span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token string">"loading"</span><span class="token punctuation">,</span> data <span class="token operator">-></span> <span class="token string">"濡쒕뵫 以묒엯�덈떎..."</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">"success"</span><span class="token punctuation">,</span> data <span class="token operator">-></span> <span class="token string">"�깃났�곸쑝濡� 泥섎━�섏뿀�듬땲��!"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">"error"</span><span class="token punctuation">,</span> data <span class="token operator">-></span> <span class="token string">"�ㅻ쪟媛� 諛쒖깮�덉뒿�덈떎: "</span> <span class="token operator">+</span> data<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">"empty"</span><span class="token punctuation">,</span> data <span class="token operator">-></span> <span class="token string">"�곗씠�곌� �놁뒿�덈떎"</span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">public</span> <span class="token class-name">String</span> <span class="token function">getStatusMessage</span><span class="token punctuation">(</span><span class="token class-name">String</span> status<span class="token punctuation">,</span> <span class="token class-name">Object</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">return</span> statusHandlers
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">getOrDefault</span><span class="token punctuation">(</span>status<span class="token punctuation">,</span> data <span class="token operator">-></span> <span class="token string">"�� �� �녿뒗 �곹깭�낅땲��"</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="�몄젣-�곕㈃-醫뗭쓣源�"><a class="heading-anchor" href="#�몄젣-�곕㈃-醫뗭쓣源�">�몄젣 �곕㈃ 醫뗭쓣源�?</a></h2>
<p>議곌굔�� 3媛� �댁긽�닿퀬, 媛� 議곌굔�� 寃곌낵媛� �⑥닚�� 媛믪씠�� �⑥닔 �몄텧 �섏��닿퀬, �욎쑝濡� 議곌굔�� �� 異붽��� 寃� 媛숇떎硫� 媛앹껜 湲곕컲�쇰줈 諛붽씀�� 寃� �レ뒿�덈떎.</p>
<p>諛섎㈃ 議곌굔�� �� 媛� �댄븯嫄곕굹, 議곌굔�ㅼ씠 �쒕줈 �섏〈�곸씠嫄곕굹, �먮떒 濡쒖쭅 �먯껜媛� 蹂듭옟�� 寃쎌슦�� 洹몃깷 if-else媛� �� �쎄린 �명븷 �� �덉뒿�덈떎:</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// �대윴 寃쎌슦�먮뒗 if-else媛� �� �곹빀</span>
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">calculateDiscount</span><span class="token punctuation">(</span><span class="token parameter">user<span class="token punctuation">,</span> item<span class="token punctuation">,</span> season</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>
</span><span class="code-line"> user<span class="token punctuation">.</span><span class="token property-access">membership</span> <span class="token operator">===</span> <span class="token string">'premium'</span> <span class="token operator">&&</span>
</span><span class="code-line"> item<span class="token punctuation">.</span><span class="token property-access">category</span> <span class="token operator">===</span> <span class="token string">'electronics'</span> <span class="token operator">&&</span>
</span><span class="code-line"> season <span class="token operator">===</span> <span class="token string">'holiday'</span>
</span><span class="code-line"> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// 蹂듭옟�� �좎씤 怨꾩궛 濡쒖쭅</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token function">calculateComplexDiscount</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> item<span class="token punctuation">,</span> season<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>user<span class="token punctuation">.</span><span class="token property-access">firstPurchase</span> <span class="token operator">&&</span> item<span class="token punctuation">.</span><span class="token property-access">price</span> <span class="token operator">></span> <span class="token number">100000</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// 泥� 援щℓ �좎씤 濡쒖쭅</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token function">calculateFirstPurchaseDiscount</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token number">0</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>�� �⑦꽩�� �듭닕�댁�硫� Strategy Pattern, State Pattern 媛숈� �붿옄�� �⑦꽩�ㅼ씠 �ъ떎 媛숈� �꾩씠�붿뼱�� �곗옣�좎엫�� �먮굜 �� �덉뒿�덈떎.</p>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/blog/2025/08/23/conditional-refactoring-with-objects">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>2025�� AI 媛쒕컻 �꾧뎄濡� �앹궛�� 300% �μ긽�쒗궎湲� - �ㅻТ�� 愿��� �꾨꼍 媛��대뱶</title>
<description><![CDATA[## 紐⑹감
```toc
```
## AI 媛쒕컻 �꾧뎄, �붿쬁 �대뼸寃� �곌퀬 �덈굹��
���뚰겕 �뚮옯�� AzFlow瑜� 媛쒕컻�섎㈃�� AI �꾧뎄�ㅼ쓣 苑� �댁떖�� �⑤뇬�듬땲��.
�붿쭅�� 泥섏쓬�먮뒗 諛섏떊諛섏쓽�덈뒗��, 留됱긽 �⑤낫�� 諛섎났 �묒뾽�� 以꾩뼱�쒕뒗 寃� 泥닿컧�� �쇱꽌 怨꾩냽 �곌쾶 �먯뒿�덈떎.
�꾧뎄蹂꾨줈 �대뼡 �곹솴�먯꽌 �좎슜�덈뒗吏� �ㅼ젣 寃쏀뿕 �꾩＜濡� �뺣━�� 遊ㅼ뒿�덈떎.
## �꾧뎄 �좏깮�� ����
�� 媛�吏� �꾧뎄瑜� 二쇰줈 �곷땲��. Cursor IDE, GitHub Copilot, Claude Code�낅땲��.
�� 洹쒕え�� �꾨줈�앺듃 �깃꺽�� �곕씪 議고빀�� �щ씪吏��붾뜲, ��...]]></description>
<link>https://blog.jell.kr/posts/dev/blog/2025/08/22/ai-development-tools-productivity-guide-2025</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/blog/2025/08/22/ai-development-tools-productivity-guide-2025</guid>
<pubDate>Fri, 22 Aug 2025 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Blog]]></category>
<category><![CDATA[ai-tools]]></category>
<category><![CDATA[development]]></category>
<category><![CDATA[productivity]]></category>
<category><![CDATA[cursor-ide]]></category>
<category><![CDATA[github-copilot]]></category>
<category><![CDATA[claude-code]]></category>
<category><![CDATA[2025]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Blog</p>
<p><strong>�쒓렇:</strong> ai-tools, development, productivity, cursor-ide, github-copilot, claude-code, 2025</p>
<hr/>
<h2 id="ai-媛쒕컻-�꾧뎄-�붿쬁-�대뼸寃�-�곌퀬-�덈굹��"><a class="heading-anchor" href="#ai-媛쒕컻-�꾧뎄-�붿쬁-�대뼸寃�-�곌퀬-�덈굹��">AI 媛쒕컻 �꾧뎄, �붿쬁 �대뼸寃� �곌퀬 �덈굹��</a></h2>
<p>���뚰겕 �뚮옯�� AzFlow瑜� 媛쒕컻�섎㈃�� AI �꾧뎄�ㅼ쓣 苑� �댁떖�� �⑤뇬�듬땲��.
�붿쭅�� 泥섏쓬�먮뒗 諛섏떊諛섏쓽�덈뒗��, 留됱긽 �⑤낫�� 諛섎났 �묒뾽�� 以꾩뼱�쒕뒗 寃� 泥닿컧�� �쇱꽌 怨꾩냽 �곌쾶 �먯뒿�덈떎.
�꾧뎄蹂꾨줈 �대뼡 �곹솴�먯꽌 �좎슜�덈뒗吏� �ㅼ젣 寃쏀뿕 �꾩＜濡� �뺣━�� 遊ㅼ뒿�덈떎.</p>
<h2 id="�꾧뎄-�좏깮��-����"><a class="heading-anchor" href="#�꾧뎄-�좏깮��-����">�꾧뎄 �좏깮�� ����</a></h2>
<p>�� 媛�吏� �꾧뎄瑜� 二쇰줈 �곷땲��. Cursor IDE, GitHub Copilot, Claude Code�낅땲��.</p>
<p>�� 洹쒕え�� �꾨줈�앺듃 �깃꺽�� �곕씪 議고빀�� �щ씪吏��붾뜲, �� 寃쎌슦�� �대젃寃� �곌퀬 �덉뒿�덈떎.</p>
<ul>
<li>��洹쒕え ��: GitHub Copilot 以묒떖 (�� �묒뾽 湲곕뒫) + Claude Code (�꾪궎�띿쿂 由щ럭)</li>
<li>�뚭퇋紐� ��/媛쒖씤: Cursor IDE 以묒떖 + GitHub Copilot 蹂댁“</li>
</ul>
<p>�숈뒿 怨≪꽑�� Cursor IDE媛� 媛��� ��뒿�덈떎. 湲곗〈 VS Code �곕뜕 遺꾩씠�쇰㈃ �섎（ �댄��대㈃ 湲곕낯�� �⑸땲��.
Claude Code�� �듭닕�댁��� �� 醫� �� 嫄몃━�� �몄씠怨�, 洹몃쭔�� 蹂듭옟�� �묒뾽�먯꽌 媛뺤젏�� �덉뒿�덈떎.</p>
<h2 id="cursor-ide"><a class="heading-anchor" href="#cursor-ide">Cursor IDE</a></h2>
<p>Cursor�� VS Code 湲곕컲 AI �먮뵒�곗씤��, �⑤낫硫� 洹몃깷 VS Code�� AI媛� �� 遺숈뼱�덈떎�� �먮굦�낅땲��.</p>
<h3 id="珥덇린-�ㅼ젙"><a class="heading-anchor" href="#珥덇린-�ㅼ젙">珥덇린 �ㅼ젙</a></h3>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 湲곗〈 VS Code �ㅼ젙 �먮룞 留덉씠洹몃젅�댁뀡</span>
</span><span class="code-line"><span class="token function">curl</span> <span class="token parameter variable">-O</span> https://download.cursor.com/cursor-installer.dmg
</span><span class="code-line"><span class="token comment"># �ㅼ튂 �� VS Code �ㅼ젙 媛��몄삤湲� �듭뀡 �좏깮</span>
</span></code></pre>
<p>湲곗〈 Copilot 愿��� �뺤옣怨� 異⑸룎�� �� �덉쑝�� 鍮꾪솢�깊솕�섎뒗 寃� 醫뗭뒿�덈떎.</p>
<h3 id="�꾨줈�앺듃-�ㅼ젙"><a class="heading-anchor" href="#�꾨줈�앺듃-�ㅼ젙">�꾨줈�앺듃 �ㅼ젙</a></h3>
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token comment">// .cursor/settings.json</span>
</span><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"cursor.ai.model"</span><span class="token operator">:</span> <span class="token string">"gpt-4o"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"cursor.ai.contextLength"</span><span class="token operator">:</span> <span class="token number">200000</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"cursor.ai.enableAutoSuggestions"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"cursor.ai.enableComposer"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"cursor.ai.customInstructions"</span><span class="token operator">:</span> <span class="token string">"TypeScript�� React瑜� �ъ슜�섎뒗 ���뚰겕 �꾨줈�앺듃�낅땲��. 蹂댁븞�� 理쒖슦�좎쑝濡� 怨좊젮�댁＜�몄슂."</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="�ㅼ젣濡�-�대젃寃�-�곷땲��"><a class="heading-anchor" href="#�ㅼ젣濡�-�대젃寃�-�곷땲��">�ㅼ젣濡� �대젃寃� �곷땲��</a></h3>
<p>而댄룷�뚰듃 �앹꽦�� <code>Ctrl+K</code>濡� �꾨＼�꾪듃 �낅젰�섎뒗 諛⑹떇�낅땲��.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">Ctrl+K �낅젰 �� "React 寃곗젣 而댄룷�뚰듃 �앹꽦: 移대뱶 �뺣낫 �낅젰, �좏슚�� 寃���, PCI DSS 以���"
</span></code></pre>
<p>踰꾧렇 �섏젙�� �뚮뒗 <code>Ctrl+L</code>濡� �먮윭 濡쒓렇 遺숈뿬�ｊ퀬 �먯씤 臾쇱뼱蹂대뒗 諛⑹떇�� �명빀�덈떎.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">Ctrl+L �낅젰 �� �먮윭 濡쒓렇 遺숈뿬�ｊ린 �� "�� �ㅻ쪟�� �먯씤怨� �닿껐 諛⑸쾿�� �ㅻ챸�댁＜�몄슂"
</span></code></pre>
<h3 id="composer-紐⑤뱶"><a class="heading-anchor" href="#composer-紐⑤뱶">Composer 紐⑤뱶</a></h3>
<p>�닿쾶 �앷컖蹂대떎 �� 留뚰빀�덈떎. �щ윭 �뚯씪�� �숈떆�� �섏젙�섎뒗 �묒뾽�� �좎슜�쒕뜲, JWT�먯꽌 OAuth 2.0�쇰줈
�몄쬆 諛⑹떇�� 諛붽씔�ㅻ뱺吏� �섎뒗 �묒뾽�� �꾨＼�꾪듃 �섎굹濡� 泥섎━�댁쨳�덈떎.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">Ctrl+I �낅젰 ��:
</span><span class="code-line">"�ъ슜�� �몄쬆 �쒖뒪�쒖쓣 JWT�먯꽌 OAuth 2.0�쇰줈 蹂�寃쏀빐二쇱꽭��.
</span><span class="code-line">愿��⑤맂 紐⑤뱺 �뚯씪�� �낅뜲�댄듃�섍퀬 �뚯뒪�� 肄붾뱶�� �④퍡 �섏젙�댁＜�몄슂."
</span></code></pre>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">@codebase �쒓렇 �ъ슜:
</span><span class="code-line">"@codebase �� �꾨줈�앺듃�� �꾪궎�띿쿂 �⑦꽩�� 遺꾩꽍�섍퀬 媛쒖꽑�먯쓣 �쒖븞�댁＜�몄슂"
</span></code></pre>
<h2 id="github-copilot"><a class="heading-anchor" href="#github-copilot">GitHub Copilot</a></h2>
<p>肄붾뱶 �먮룞�꾩꽦 �꾧뎄濡쒕쭔 �곕㈃ �꾧튉�듬땲��. �꾨＼�꾪똿�� �대뼸寃� �섎뒓�먯뿉 �곕씪 寃곌낵臾� �덉쭏�� 留롮씠 �щ씪吏묐땲��.</p>
<h3 id="�꾨＼�꾪똿-�⑦꽩"><a class="heading-anchor" href="#�꾨＼�꾪똿-�⑦꽩">�꾨＼�꾪똿 �⑦꽩</a></h3>
<p>而⑦뀓�ㅽ듃瑜� 癒쇱� 肄붾찘�몃줈 �⑤몢�� 寃� �④낵�곸엯�덈떎.</p>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token comment">// �ъ슜�� 寃곗젣 �대젰�� 愿�由ы븯�� �쒕퉬�� �대옒��</span>
</span><span class="code-line"><span class="token comment">// �붽뎄�ы빆: PCI DSS 以���, 媛쒖씤�뺣낫 �뷀샇��, 媛먯궗 濡쒓렇 湲곕줉</span>
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">PaymentHistoryService</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// 寃곗젣 �대젰 議고쉶 硫붿꽌�� (�섏씠吏��ㅼ씠�� �ы븿)</span>
</span></code></pre>
<p>�섎룄瑜� 紐낇솗�� �⑤몢硫� �먰븯�� 諛⑺뼢�쇰줈 �� �곕씪�듬땲��.</p>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token comment">// TODO: 以묐났 寃곗젣 諛⑹�瑜� �꾪븳 idempotency key 寃�利� 濡쒖쭅 異붽�</span>
</span><span class="code-line"><span class="token comment">// �숈씪�� �ㅻ줈 �붿껌�� �ㅻ㈃ 湲곗〈 寃곌낵 諛섑솚, �덈줈�� �ㅻ㈃ 寃곗젣 吏꾪뻾</span>
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">processPayment</span><span class="token punctuation">(</span>amount<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> idempotencyKey<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span></code></pre>
<h3 id="copilot-chat-�쒖슜"><a class="heading-anchor" href="#copilot-chat-�쒖슜">Copilot Chat �쒖슜</a></h3>
<p>�붾쾭源낇븷 �� <code>/explain</code> 紐낅졊�닿� �명빀�덈떎.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">/explain �� 肄붾뱶媛� 硫붾え由� �꾩닔瑜� �쇱쑝�ㅻ뒗 �댁쑀瑜� �ㅻ챸�댁＜�몄슂:
</span><span class="code-line">[臾몄젣媛� �섎뒗 肄붾뱶 遺숈뿬�ｊ린]
</span></code></pre>
<p>�뚯뒪�� 肄붾뱶 �앹꽦�� �⑸땲��.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">/tests PaymentService �대옒�ㅼ쓽 紐⑤뱺 硫붿꽌�쒖뿉 ���� �⑥쐞 �뚯뒪�몃� �묒꽦�댁＜�몄슂.
</span><span class="code-line">�ｌ� 耳��댁뒪�� �먮윭 �곹솴�� �ы븿�댁＜�몄슂.
</span></code></pre>
<h3 id="ci�먯꽌-肄붾뱶-由щ럭"><a class="heading-anchor" href="#ci�먯꽌-肄붾뱶-由щ럭">CI�먯꽌 肄붾뱶 由щ럭</a></h3>
<pre class="language-yaml"><code class="language-yaml code-highlight"><span class="code-line"><span class="token comment"># GitHub Actions�먯꽌 Copilot �쒖슜</span>
</span><span class="code-line"><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> AI Code Review
</span><span class="code-line"> <span class="token key atrule">uses</span><span class="token punctuation">:</span> github/copilot<span class="token punctuation">-</span>cli@v1
</span><span class="code-line"> <span class="token key atrule">with</span><span class="token punctuation">:</span>
</span><span class="code-line"> <span class="token key atrule">command</span><span class="token punctuation">:</span> <span class="token string">'review --security --performance --best-practices'</span>
</span></code></pre>
<h2 id="claude-code"><a class="heading-anchor" href="#claude-code">Claude Code</a></h2>
<p>蹂듭옟�� �ㅺ퀎�� 由ы뙥�좊쭅 �묒뾽�먯꽌 媛��� 留롮씠 �곷땲��. �⑥닚 肄붾뱶 �앹꽦蹂대떎�� �쒖뒪�� �꾨컲�� 蹂대뒗 �묒뾽�� �좎슜�⑸땲��.</p>
<h3 id="由ы뙥�좊쭅-�묒뾽"><a class="heading-anchor" href="#由ы뙥�좊쭅-�묒뾽">由ы뙥�좊쭅 �묒뾽</a></h3>
<p>AzFlow�먯꽌 紐⑤�由ъ떇 援ъ“瑜� 留덉씠�щ줈�쒕퉬�ㅻ줈 遺꾨━�섎뒗 �묒뾽�� Claude Code�� 媛숈씠 �덉뒿�덈떎.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">/analyze �꾩옱 肄붾뱶踰좎씠�ㅻ� 遺꾩꽍�섍퀬 留덉씠�щ줈�쒕퉬�� 遺꾨━ �꾨왂�� �쒖븞�댁＜�몄슂.
</span><span class="code-line">�꾨찓�몃퀎 寃쎄퀎, �곗씠�� �섏〈��, API �ㅺ퀎瑜� �ы븿�댁꽌 �ㅻ챸�댁＜�몄슂.
</span></code></pre>
<h3 id="�깅뒫-遺꾩꽍"><a class="heading-anchor" href="#�깅뒫-遺꾩꽍">�깅뒫 遺꾩꽍</a></h3>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">/improve �� React �좏뵆由ъ��댁뀡�� �깅뒫�� 遺꾩꽍�섍퀬 理쒖쟻�� 諛⑹븞�� �쒖떆�댁＜�몄슂.
</span><span class="code-line">踰덈뱾 �ш린, �뚮뜑留� �깅뒫, 硫붾え由� �ъ슜�됱쓣 紐⑤몢 怨좊젮�댁＜�몄슂.
</span></code></pre>
<h3 id="蹂댁븞-寃���"><a class="heading-anchor" href="#蹂댁븞-寃���">蹂댁븞 寃���</a></h3>
<p>���뚰겕 �뱀꽦�� 蹂댁븞 寃��좊� �먯＜ �⑸땲��.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">/audit security �� 肄붾뱶�먯꽌 蹂댁븞 痍⑥빟�먯쓣 李얠븘二쇱꽭��:
</span><span class="code-line">- OWASP Top 10 湲곗�
</span><span class="code-line">- ���뚰겕 �낃퀎 蹂댁븞 �쒖�
</span><span class="code-line">- 媛쒖씤�뺣낫蹂댄샇踰� 以��� �щ�
</span></code></pre>
<h3 id="�꾪궎�띿쿂-臾몄꽌"><a class="heading-anchor" href="#�꾪궎�띿쿂-臾몄꽌">�꾪궎�띿쿂 臾몄꽌</a></h3>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">/document �꾩옱 �쒖뒪�쒖쓽 �꾪궎�띿쿂 臾몄꽌瑜� �앹꽦�댁＜�몄슂.
</span><span class="code-line">C4 Model �뺤떇�쇰줈 而⑦뀓�ㅽ듃, 而⑦뀒�대꼫, 而댄룷�뚰듃 �ㅼ씠�닿렇�⑥쓣 �ы븿�댁＜�몄슂.
</span></code></pre>
<h2 id="�꾧뎄-議고빀"><a class="heading-anchor" href="#�꾧뎄-議고빀">�꾧뎄 議고빀</a></h2>
<p>�� �꾧뎄瑜� 媛숈씠 �� �뚮뒗 �④퀎蹂꾨줈 �섎닠�� �곷땲��.</p>
<p>�ㅺ퀎 �④퀎�먯꽌�� Claude Code濡� �붽뎄�ы빆�� �뺣━�섍퀬 �꾪궎�띿쿂 諛⑺뼢�� �≪뒿�덈떎.
�ㅼ젣 援ы쁽�� �뚮뒗 Cursor IDE濡� 湲곕낯 援ъ“ �↔퀬 GitHub Copilot�쇰줈 �몃� 濡쒖쭅�� 梨꾩썎�덈떎.
援ы쁽 留덈Т由� �④퀎�먯꽌�� �ㅼ떆 Claude Code濡� 肄붾뱶 �덉쭏�대굹 蹂댁븞 痍⑥빟�먯쓣 寃��좏빀�덈떎.</p>
<h2 id="二쇱쓽��-��"><a class="heading-anchor" href="#二쇱쓽��-��">二쇱쓽�� ��</a></h2>
<p>AI �쒖븞�� 寃��� �놁씠 洹몃깷 �곕뒗 嫄� �꾪뿕�⑸땲��.</p>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token comment">// �대윴 肄붾뱶瑜� 洹몃깷 �곕㈃ �� �⑸땲��</span>
</span><span class="code-line"><span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getUserById</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token comment">// AI媛� �앹꽦�� 肄붾뱶</span>
</span><span class="code-line"><span class="token keyword">return</span> user<span class="token punctuation">.</span>password <span class="token comment">// 蹂댁븞 �꾪뿕! �⑥뒪�뚮뱶 �몄텧</span>
</span></code></pre>
<p>蹂댁븞 愿��� 肄붾뱶�� AI �쒖븞�대뜑�쇰룄 吏곸젒 寃��좏빐�� �⑸땲��.</p>
<p>�꾨＼�꾪듃 �덉쭏�� 以묒슂�⑸땲��. 紐⑦샇�섍쾶 �붿껌�섎㈃ 紐⑦샇�� 寃곌낵媛� �섏샃�덈떎.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">// �대젃寃� �섎㈃ �� �⑸땲��
</span><span class="code-line">"�⑥닔 留뚮뱾�댁쨾"
</span><span class="code-line">
</span><span class="code-line">// �대젃寃� �댁빞 �먰븯�� 寃곌낵媛� �섏샃�덈떎
</span><span class="code-line">"�ъ슜�� �낅젰�� 寃�利앺븯�� TypeScript �⑥닔瑜� 留뚮뱾�댁＜�몄슂.
</span><span class="code-line">�대찓�� �뺤떇, 鍮꾨�踰덊샇 媛뺣룄, �꾩닔 �꾨뱶瑜� 泥댄겕�댁빞 �⑸땲��."
</span></code></pre>
<p>���� �꾩엯�� �뚮뒗 �쒓볼踰덉뿉 �꾪솚�섍린蹂대떎 鍮꾩쨷�� 湲곕뒫遺��� �⑤낫怨� �먯쭊�곸쑝濡� �뺣��섎뒗 寃� �レ뒿�덈떎.
肄붾뱶 �몃� �꾩넚 �덉슜 踰붿쐞�� 蹂댁븞 �뺤콉怨� 留욎떠�� �뺤씤�댁빞 �⑸땲��.</p>
<h2 id="留덈Т由�"><a class="heading-anchor" href="#留덈Т由�">留덈Т由�</a></h2>
<p>AI �꾧뎄 �대떎怨� 媛쒕컻 �ㅻ젰�� 以꾩뼱�쒕뒗 嫄� �꾨땶 寃� 媛숈뒿�덈떎. 諛섎났 �묒뾽�먯꽌 �먯쓣 鍮쇨퀬
�� �섎� �덈뒗 臾몄젣�� 吏묒쨷�섍쾶 �쒕떎�� 寃� 泥닿컧�곸쑝濡쒕뒗 留욎뒿�덈떎.
�ㅻ쭔 AI �쒖븞�� 洹몃깷 誘욧린蹂대떎�� �댄빐�섎㈃�� �곕뒗 寃� 以묒슂�섍퀬, 洹멸쾶 �κ린�곸쑝濡쒕룄 �꾩��� �⑸땲��.</p>
<h3 id="李멸퀬-留곹겕"><a class="heading-anchor" href="#李멸퀬-留곹겕">李멸퀬 留곹겕</a></h3>
<ul>
<li><a href="https://docs.cursor.com">Cursor IDE 怨듭떇 臾몄꽌</a></li>
<li><a href="https://github.blog/copilot">GitHub Copilot 踰좎뒪�� �꾨옓�곗뒪</a></li>
<li><a href="https://docs.anthropic.com/claude/docs">Claude Code �쒖슜 媛��대뱶</a></li>
</ul>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/blog/2025/08/22/ai-development-tools-productivity-guide-2025">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>TypeScript �덉쟾�� �꾨줎�몄뿏�� 媛쒕컻 媛��대뱶</title>
<description><![CDATA[## 紐⑹감
```toc
```
## �� TypeScript瑜� �쒕�濡� �ъ슜�댁빞 �좉퉴?
TypeScript�� �⑥닚�� ���� �뚰듃瑜� 異붽��섎뒗 寃껋씠 �꾨떃�덈떎.
�고��� �덉쟾�깆쓣 �뺣낫�섍퀬 肄붾뱶�� �좎�蹂댁닔�깆쓣 �믪씠�ㅻ㈃
���� 媛���, �좊땲�� ����, �쒕꽕由� �깆쓣 �곸젅�� �쒖슜�댁빞 �⑸땲��.
```typescript
// �� �대윴 肄붾뱶�� �덉쟾�섏� �딆뒿�덈떎
function getUser(data: any): User {
return data
}
```
## ���� 媛��쒕줈 �고��� �덉쟾�� �뺣낫
### �ъ슜�� �뺤쓽 ���� 媛���
```type...]]></description>
<link>https://blog.jell.kr/posts/dev/js/2025/08/18/typescript-safe-frontend-development-guide</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/js/2025/08/18/typescript-safe-frontend-development-guide</guid>
<pubDate>Mon, 18 Aug 2025 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Javascript]]></category>
<category><![CDATA[TypeScript]]></category>
<category><![CDATA[Frontend]]></category>
<category><![CDATA[Type Safety]]></category>
<category><![CDATA[React]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Javascript</p>
<p><strong>�쒓렇:</strong> TypeScript, Frontend, Type Safety, React</p>
<hr/>
<h2 id="��-typescript瑜�-�쒕�濡�-�ъ슜�댁빞-�좉퉴"><a class="heading-anchor" href="#��-typescript瑜�-�쒕�濡�-�ъ슜�댁빞-�좉퉴">�� TypeScript瑜� �쒕�濡� �ъ슜�댁빞 �좉퉴?</a></h2>
<p>TypeScript�� �⑥닚�� ���� �뚰듃瑜� 異붽��섎뒗 寃껋씠 �꾨떃�덈떎.
�고��� �덉쟾�깆쓣 �뺣낫�섍퀬 肄붾뱶�� �좎�蹂댁닔�깆쓣 �믪씠�ㅻ㈃
���� 媛���, �좊땲�� ����, �쒕꽕由� �깆쓣 �곸젅�� �쒖슜�댁빞 �⑸땲��.</p>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token comment">// �� �대윴 肄붾뱶�� �덉쟾�섏� �딆뒿�덈떎</span>
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">getUser</span><span class="token punctuation">(</span>data<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token operator">:</span> User <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">return</span> data
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="����-媛��쒕줈-�고���-�덉쟾��-�뺣낫"><a class="heading-anchor" href="#����-媛��쒕줈-�고���-�덉쟾��-�뺣낫">���� 媛��쒕줈 �고��� �덉쟾�� �뺣낫</a></h2>
<h3 id="�ъ슜��-�뺤쓽-����-媛���"><a class="heading-anchor" href="#�ъ슜��-�뺤쓽-����-媛���">�ъ슜�� �뺤쓽 ���� 媛���</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">User</span> <span class="token punctuation">{</span>
</span><span class="code-line"> id<span class="token operator">:</span> <span class="token builtin">number</span>
</span><span class="code-line"> name<span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"> email<span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">isUser</span><span class="token punctuation">(</span>obj<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">)</span><span class="token operator">:</span> obj <span class="token keyword">is</span> User <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token keyword">typeof</span> obj <span class="token operator">===</span> <span class="token string">'object'</span> <span class="token operator">&&</span>
</span><span class="code-line"> obj <span class="token operator">!==</span> <span class="token keyword">null</span> <span class="token operator">&&</span>
</span><span class="code-line"> <span class="token string">'id'</span> <span class="token keyword">in</span> obj <span class="token operator">&&</span>
</span><span class="code-line"> <span class="token keyword">typeof</span> obj<span class="token punctuation">.</span>id <span class="token operator">===</span> <span class="token string">'number'</span> <span class="token operator">&&</span>
</span><span class="code-line"> <span class="token string">'name'</span> <span class="token keyword">in</span> obj <span class="token operator">&&</span>
</span><span class="code-line"> <span class="token keyword">typeof</span> obj<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">'string'</span> <span class="token operator">&&</span>
</span><span class="code-line"> <span class="token string">'email'</span> <span class="token keyword">in</span> obj <span class="token operator">&&</span>
</span><span class="code-line"> <span class="token keyword">typeof</span> obj<span class="token punctuation">.</span>email <span class="token operator">===</span> <span class="token string">'string'</span>
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �ъ슜</span>
</span><span class="code-line"><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isUser</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token comment">// �덉쟾�섍쾶 �묎렐</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="api-�묐떟-寃�利�"><a class="heading-anchor" href="#api-�묐떟-寃�利�">API �묐떟 寃�利�</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">ApiResponse<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token punctuation">{</span>
</span><span class="code-line"> data<span class="token operator">:</span> <span class="token constant">T</span>
</span><span class="code-line"> status<span class="token operator">:</span> <span class="token builtin">number</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">fetchUser</span><span class="token punctuation">(</span>id<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator"><</span>User<span class="token operator">></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/api/users/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">const</span> json <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isUser</span><span class="token punctuation">(</span>json<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Invalid user data'</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">return</span> json<span class="token punctuation">.</span>data
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="union-���낃낵-�먮퀎��"><a class="heading-anchor" href="#union-���낃낵-�먮퀎��">Union ���낃낵 �먮퀎��</a></h2>
<h3 id="�먮퀎-�좊땲��-discriminated-unions"><a class="heading-anchor" href="#�먮퀎-�좊땲��-discriminated-unions">�먮퀎 �좊땲�� (Discriminated Unions)</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">SuccessResponse</span> <span class="token punctuation">{</span>
</span><span class="code-line"> type<span class="token operator">:</span> <span class="token string">'success'</span>
</span><span class="code-line"> data<span class="token operator">:</span> User<span class="token punctuation">[</span><span class="token punctuation">]</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">ErrorResponse</span> <span class="token punctuation">{</span>
</span><span class="code-line"> type<span class="token operator">:</span> <span class="token string">'error'</span>
</span><span class="code-line"> message<span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"> code<span class="token operator">:</span> <span class="token builtin">number</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">ApiResult</span> <span class="token operator">=</span> SuccessResponse <span class="token operator">|</span> ErrorResponse
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">handleResponse</span><span class="token punctuation">(</span>result<span class="token operator">:</span> ApiResult<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'success'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token comment">// User[] ����</span>
</span><span class="code-line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>message<span class="token punctuation">)</span> <span class="token comment">// string ����</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="�쒕꽕由�-�쒖슜"><a class="heading-anchor" href="#�쒕꽕由�-�쒖슜">�쒕꽕由� �쒖슜</a></h2>
<h3 id="湲곕낯-�쒕꽕由�"><a class="heading-anchor" href="#湲곕낯-�쒕꽕由�">湲곕낯 �쒕꽕由�</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token generic-function"><span class="token function">wrapInArray</span><span class="token generic class-name"><span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span></span><span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token punctuation">[</span>value<span class="token punctuation">]</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token function">wrapInArray</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// number[]</span>
</span><span class="code-line"><span class="token keyword">const</span> strings <span class="token operator">=</span> <span class="token function">wrapInArray</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span> <span class="token comment">// string[]</span>
</span></code></pre>
<h3 id="�쒖빟��-�덈뒗-�쒕꽕由�"><a class="heading-anchor" href="#�쒖빟��-�덈뒗-�쒕꽕由�">�쒖빟�� �덈뒗 �쒕꽕由�</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">HasId</span> <span class="token punctuation">{</span>
</span><span class="code-line"> id<span class="token operator">:</span> <span class="token builtin">number</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token generic-function"><span class="token function">findById</span><span class="token generic class-name"><span class="token operator"><</span><span class="token constant">T</span> <span class="token keyword">extends</span> HasId<span class="token operator">></span></span></span><span class="token punctuation">(</span>items<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">T</span> <span class="token operator">|</span> <span class="token keyword">undefined</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">return</span> items<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>item <span class="token operator">=></span> item<span class="token punctuation">.</span>id <span class="token operator">===</span> id<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="�쒕꽕由�-react-而댄룷�뚰듃"><a class="heading-anchor" href="#�쒕꽕由�-react-而댄룷�뚰듃">�쒕꽕由� React 而댄룷�뚰듃</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">ListProps<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token punctuation">{</span>
</span><span class="code-line"> items<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token function-variable function">renderItem</span><span class="token operator">:</span> <span class="token punctuation">(</span>item<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span> <span class="token operator">=></span> React<span class="token punctuation">.</span>ReactNode
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token generic-function"><span class="token function">List</span><span class="token generic class-name"><span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">{</span> items<span class="token punctuation">,</span> renderItem <span class="token punctuation">}</span><span class="token operator">:</span> ListProps<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token operator"><</span>ul<span class="token operator">></span><span class="token punctuation">{</span>items<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>renderItem<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �ъ슜</span>
</span><span class="code-line"><span class="token operator"><</span>List items<span class="token operator">=</span><span class="token punctuation">{</span>users<span class="token punctuation">}</span> renderItem<span class="token operator">=</span><span class="token punctuation">{</span>user <span class="token operator">=></span> <span class="token operator"><</span>li<span class="token operator">></span><span class="token punctuation">{</span>user<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
</span></code></pre>
<h2 id="react-props-����-�뺤쓽"><a class="heading-anchor" href="#react-props-����-�뺤쓽">React Props ���� �뺤쓽</a></h2>
<h3 id="湲곕낯-props"><a class="heading-anchor" href="#湲곕낯-props">湲곕낯 Props</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">ButtonProps</span> <span class="token punctuation">{</span>
</span><span class="code-line"> label<span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"> <span class="token function-variable function">onClick</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
</span><span class="code-line"> disabled<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
</span><span class="code-line"> variant<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">'primary'</span> <span class="token operator">|</span> <span class="token string">'secondary'</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">Button</span><span class="token punctuation">(</span><span class="token punctuation">{</span> label<span class="token punctuation">,</span> onClick<span class="token punctuation">,</span> disabled <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span> variant <span class="token operator">=</span> <span class="token string">'primary'</span> <span class="token punctuation">}</span><span class="token operator">:</span> ButtonProps<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span> disabled<span class="token operator">=</span><span class="token punctuation">{</span>disabled<span class="token punctuation">}</span> className<span class="token operator">=</span><span class="token punctuation">{</span>variant<span class="token punctuation">}</span><span class="token operator">></span>
</span><span class="code-line"> <span class="token punctuation">{</span>label<span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="children-props"><a class="heading-anchor" href="#children-props">Children Props</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">CardProps</span> <span class="token punctuation">{</span>
</span><span class="code-line"> title<span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"> children<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">Card</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token punctuation">,</span> children <span class="token punctuation">}</span><span class="token operator">:</span> CardProps<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token operator"><</span>div<span class="token operator">></span>
</span><span class="code-line"> <span class="token operator"><</span>h2<span class="token operator">></span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span>
</span><span class="code-line"> <span class="token punctuation">{</span>children<span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="�대깽��-�몃뱾��"><a class="heading-anchor" href="#�대깽��-�몃뱾��">�대깽�� �몃뱾��</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">FormProps</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function-variable function">onSubmit</span><span class="token operator">:</span> <span class="token punctuation">(</span>data<span class="token operator">:</span> FormData<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">Form</span><span class="token punctuation">(</span><span class="token punctuation">{</span> onSubmit <span class="token punctuation">}</span><span class="token operator">:</span> FormProps<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">handleSubmit</span> <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token operator">:</span> React<span class="token punctuation">.</span>FormEvent<span class="token operator"><</span>HTMLFormElement<span class="token operator">></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">const</span> formData <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token function">onSubmit</span><span class="token punctuation">(</span>formData<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token operator"><</span>form onSubmit<span class="token operator">=</span><span class="token punctuation">{</span>handleSubmit<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token comment">/* ... */</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>form<span class="token operator">></span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="�좏떥由ы떚-����"><a class="heading-anchor" href="#�좏떥由ы떚-����">�좏떥由ы떚 ����</a></h2>
<h3 id="partial怨�-required"><a class="heading-anchor" href="#partial怨�-required">Partial怨� Required</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">User</span> <span class="token punctuation">{</span>
</span><span class="code-line"> id<span class="token operator">:</span> <span class="token builtin">number</span>
</span><span class="code-line"> name<span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"> email<span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">PartialUser</span> <span class="token operator">=</span> Partial<span class="token operator"><</span>User<span class="token operator">></span> <span class="token comment">// 紐⑤뱺 �띿꽦 optional</span>
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">RequiredUser</span> <span class="token operator">=</span> Required<span class="token operator"><</span>User<span class="token operator">></span> <span class="token comment">// 紐⑤뱺 �띿꽦 required</span>
</span></code></pre>
<h3 id="pick怨�-omit"><a class="heading-anchor" href="#pick怨�-omit">Pick怨� Omit</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">UserPreview</span> <span class="token operator">=</span> Pick<span class="token operator"><</span>User<span class="token punctuation">,</span> <span class="token string">'id'</span> <span class="token operator">|</span> <span class="token string">'name'</span><span class="token operator">></span> <span class="token comment">// id, name留�</span>
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">UserWithoutId</span> <span class="token operator">=</span> Omit<span class="token operator"><</span>User<span class="token punctuation">,</span> <span class="token string">'id'</span><span class="token operator">></span> <span class="token comment">// id �쒖쇅</span>
</span></code></pre>
<h3 id="record"><a class="heading-anchor" href="#record">Record</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">UserRole</span> <span class="token operator">=</span> <span class="token string">'admin'</span> <span class="token operator">|</span> <span class="token string">'user'</span> <span class="token operator">|</span> <span class="token string">'guest'</span>
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">Permissions</span> <span class="token operator">=</span> Record<span class="token operator"><</span>UserRole<span class="token punctuation">,</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> permissions<span class="token operator">:</span> Permissions <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> admin<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'read'</span><span class="token punctuation">,</span> <span class="token string">'write'</span><span class="token punctuation">,</span> <span class="token string">'delete'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</span><span class="code-line"> user<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'read'</span><span class="token punctuation">,</span> <span class="token string">'write'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</span><span class="code-line"> guest<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'read'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="�ㅻТ-�⑦꽩"><a class="heading-anchor" href="#�ㅻТ-�⑦꽩">�ㅻТ �⑦꽩</a></h2>
<h3 id="api-�대씪�댁뼵��"><a class="heading-anchor" href="#api-�대씪�댁뼵��">API �대씪�댁뼵��</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">ApiClient</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">async</span> <span class="token generic-function"><span class="token function">get</span><span class="token generic class-name"><span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span></span><span class="token punctuation">(</span>url<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">API Error: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">async</span> <span class="token generic-function"><span class="token function">post</span><span class="token generic class-name"><span class="token operator"><</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">D</span><span class="token operator">></span></span></span><span class="token punctuation">(</span>url<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token constant">D</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-line"> method<span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
</span><span class="code-line"> headers<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'application/json'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> body<span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �ъ슜</span>
</span><span class="code-line"><span class="token keyword">const</span> client <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ApiClient</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token keyword">await</span> client<span class="token punctuation">.</span><span class="token generic-function"><span class="token function">get</span><span class="token generic class-name"><span class="token operator"><</span>User<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token string">'/api/user'</span><span class="token punctuation">)</span>
</span></code></pre>
<h3 id="custom-hooks"><a class="heading-anchor" href="#custom-hooks">Custom Hooks</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">UseApiResult<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token punctuation">{</span>
</span><span class="code-line"> data<span class="token operator">:</span> <span class="token constant">T</span> <span class="token operator">|</span> <span class="token keyword">null</span>
</span><span class="code-line"> loading<span class="token operator">:</span> <span class="token builtin">boolean</span>
</span><span class="code-line"> error<span class="token operator">:</span> Error <span class="token operator">|</span> <span class="token keyword">null</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">function</span> <span class="token generic-function"><span class="token function">useApi</span><span class="token generic class-name"><span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span></span><span class="token punctuation">(</span>url<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> UseApiResult<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>data<span class="token punctuation">,</span> setData<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token generic-function"><span class="token function">useState</span><span class="token generic class-name"><span class="token operator"><</span><span class="token constant">T</span> <span class="token operator">|</span> <span class="token keyword">null</span><span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>loading<span class="token punctuation">,</span> setLoading<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>error<span class="token punctuation">,</span> setError<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token generic-function"><span class="token function">useState</span><span class="token generic class-name"><span class="token operator"><</span>Error <span class="token operator">|</span> <span class="token keyword">null</span><span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>res <span class="token operator">=></span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>setData<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span>setError<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">finally</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>url<span class="token punctuation">]</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token punctuation">{</span> data<span class="token punctuation">,</span> loading<span class="token punctuation">,</span> error <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="�꾧꺽��-�ㅼ젙"><a class="heading-anchor" href="#�꾧꺽��-�ㅼ젙">�꾧꺽�� �ㅼ젙</a></h2>
<h3 id="tsconfigjson"><a class="heading-anchor" href="#tsconfigjson">tsconfig.json</a></h3>
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"compilerOptions"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">"strict"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"noImplicitAny"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"strictNullChecks"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"noUnusedLocals"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"noUnusedParameters"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token property">"noImplicitReturns"</span><span class="token operator">:</span> <span class="token boolean">true</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="�먯＜-�섎뒗-�ㅼ닔"><a class="heading-anchor" href="#�먯＜-�섎뒗-�ㅼ닔">�먯＜ �섎뒗 �ㅼ닔</a></h2>
<h3 id="1-any-�⑥슜"><a class="heading-anchor" href="#1-any-�⑥슜">1. any �⑥슜</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token comment">// �� �섏걶 ��</span>
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">process</span><span class="token punctuation">(</span>data<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">return</span> data<span class="token punctuation">.</span>value
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �� 醫뗭� ��</span>
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">process</span><span class="token punctuation">(</span>data<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> data <span class="token operator">===</span> <span class="token string">'object'</span> <span class="token operator">&&</span> data <span class="token operator">!==</span> <span class="token keyword">null</span> <span class="token operator">&&</span> <span class="token string">'value'</span> <span class="token keyword">in</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">return</span> data<span class="token punctuation">.</span>value
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Invalid data'</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="2-����-�⑥뼵-�⑥슜"><a class="heading-anchor" href="#2-����-�⑥뼵-�⑥슜">2. ���� �⑥뼵 �⑥슜</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token comment">// �� �섏걶 ��</span>
</span><span class="code-line"><span class="token keyword">const</span> user <span class="token operator">=</span> data <span class="token keyword">as</span> User
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �� 醫뗭� ��</span>
</span><span class="code-line"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isUser</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> user <span class="token operator">=</span> data
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="3-optional-泥댁씠��-怨쇱슜"><a class="heading-anchor" href="#3-optional-泥댁씠��-怨쇱슜">3. Optional 泥댁씠�� 怨쇱슜</a></h3>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token comment">// �� �섏걶 ��</span>
</span><span class="code-line">user<span class="token operator">?.</span>profile<span class="token operator">?.</span>settings<span class="token operator">?.</span>theme<span class="token operator">?.</span>color
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// �� 醫뗭� �� - ���낆쓣 紐낇솗��</span>
</span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">User</span> <span class="token punctuation">{</span>
</span><span class="code-line"> profile<span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> settings<span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> theme<span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> color<span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/js/2025/08/18/typescript-safe-frontend-development-guide">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>Gatsby�먯꽌 Next.js濡� 留덉씠洹몃젅�댁뀡�섎ʼn 諛곗슫 寃껊뱾 - �깃났�� �댁빞湲곗� 洹� 怨쇱젙�먯꽌�� 源⑤떖��</title>
<description><![CDATA[## �쒕줎: �� �섏� 湲곗닠�� �ν븳 �꾩쟾
2�꾧컙 �덉젙�곸쑝濡� �댁쁺�섎뜕 Gatsby 湲곕컲 釉붾줈洹몃� 蹂대ʼn 臾몃뱷 �앷컖�덉뒿�덈떎.
"Next.js媛� �붿쬁 二쇰ぉ諛쏄퀬 �덇퀬, App Router�� 異쒖떆�섏뿀�붾뜲, �� 紐⑤뜕�섍퀬 �깅뒫�� 醫뗭쓣 寃� 媛숇떎."
洹몃젃寃� �쒖옉�� 留덉씠洹몃젅�댁뀡. 泥섏쓬�먮뒗 留됰쭑�덉�留�, 寃곌뎅 Next.js 14濡� draft �쒖뒪�쒓낵 蹂듭옟�� 留덊겕�ㅼ슫 泥섎━源뚯� 紐⑤몢 ��꺼�ㅻ뒗 �� �깃났�덉뒿�덈떎. 洹� 怨쇱젙�먯꽌 諛곗슫 寃껊뱾�� �뺣━�대뇬�듬땲��.
```toc
```
## �� 留덉씠洹몃젅�댁뀡�� 寃곗떖�덈뒗媛�
### Gatsby�� �꾩돩�� �먮뱾
#...]]></description>
<link>https://blog.jell.kr/posts/dev/blog/2025/08/14/gatsby-to-nextjs-migration-experience</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/blog/2025/08/14/gatsby-to-nextjs-migration-experience</guid>
<pubDate>Thu, 14 Aug 2025 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Blog]]></category>
<category><![CDATA[Gatsby]]></category>
<category><![CDATA[Next.js]]></category>
<category><![CDATA[留덉씠洹몃젅�댁뀡]]></category>
<category><![CDATA[媛쒕컻]]></category>
<category><![CDATA[React]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Blog</p>
<p><strong>�쒓렇:</strong> Gatsby, Next.js, 留덉씠洹몃젅�댁뀡, 媛쒕컻, React</p>
<hr/>
<h2 id="�쒕줎-��-�섏�-湲곗닠��-�ν븳-�꾩쟾"><a class="heading-anchor" href="#�쒕줎-��-�섏�-湲곗닠��-�ν븳-�꾩쟾">�쒕줎: �� �섏� 湲곗닠�� �ν븳 �꾩쟾</a></h2>
<p>2�꾧컙 �덉젙�곸쑝濡� �댁쁺�섎뜕 Gatsby 湲곕컲 釉붾줈洹몃� 蹂대ʼn 臾몃뱷 �앷컖�덉뒿�덈떎.
"Next.js媛� �붿쬁 二쇰ぉ諛쏄퀬 �덇퀬, App Router�� 異쒖떆�섏뿀�붾뜲, �� 紐⑤뜕�섍퀬 �깅뒫�� 醫뗭쓣 寃� 媛숇떎."</p>
<p>洹몃젃寃� �쒖옉�� 留덉씠洹몃젅�댁뀡. 泥섏쓬�먮뒗 留됰쭑�덉�留�, 寃곌뎅 Next.js 14濡� draft �쒖뒪�쒓낵 蹂듭옟�� 留덊겕�ㅼ슫 泥섎━源뚯� 紐⑤몢 ��꺼�ㅻ뒗 �� �깃났�덉뒿�덈떎. 洹� 怨쇱젙�먯꽌 諛곗슫 寃껊뱾�� �뺣━�대뇬�듬땲��.</p>
<h2 id="��-留덉씠洹몃젅�댁뀡��-寃곗떖�덈뒗媛�"><a class="heading-anchor" href="#��-留덉씠洹몃젅�댁뀡��-寃곗떖�덈뒗媛�">�� 留덉씠洹몃젅�댁뀡�� 寃곗떖�덈뒗媛�</a></h2>
<h3 id="gatsby��-�꾩돩��-�먮뱾"><a class="heading-anchor" href="#gatsby��-�꾩돩��-�먮뱾">Gatsby�� �꾩돩�� �먮뱾</a></h3>
<h3 id="1-臾닿굅��-媛쒕컻-�섍꼍"><a class="heading-anchor" href="#1-臾닿굅��-媛쒕컻-�섍꼍">1. 臾닿굅�� 媛쒕컻 �섍꼍</a></h3>
<ul>
<li><strong>�섏〈�� 吏���</strong>: 61媛쒖쓽 �⑦궎吏� (Gatsby �먯퐫�쒖뒪�쒖씠 諛⑸���)</li>
<li><strong>鍮뚮뱶 �쒓컙</strong>: GraphQL �덉씠�� �뚮Ц�� 珥덇린 鍮뚮뱶媛� �먮┝</li>
<li><strong>硫붾え由� �ъ슜��</strong>: 媛쒕컻 �쒕쾭媛� �곷떦�� 臾닿굅��</li>
</ul>
<h3 id="2-蹂듭옟��-�뚮윭洹몄씤-�앺깭怨�"><a class="heading-anchor" href="#2-蹂듭옟��-�뚮윭洹몄씤-�앺깭怨�">2. 蹂듭옟�� �뚮윭洹몄씤 �앺깭怨�</a></h3>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// gatsby-config.js - 19媛쒖쓽 �뚮윭洹몄씤</span>
</span><span class="code-line"><span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token string">'gatsby-plugin-react-helmet'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">'gatsby-plugin-sass'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">'gatsby-plugin-sharp'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">'gatsby-transformer-sharp'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">'gatsby-transformer-remark'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token comment">// ... 14媛� ��</span>
</span><span class="code-line"><span class="token punctuation">]</span>
</span></code></pre>
<p>紐⑤뱺 湲곕뒫留덈떎 �뚮윭洹몄씤�� 李얘퀬, �ㅼ젙�섍퀬, 踰꾩쟾 �명솚�깆쓣 �뺤씤�댁빞 �덉뒿�덈떎.</p>
<h3 id="3-graphql��-�ㅻ쾭�붿��덉뼱留�"><a class="heading-anchor" href="#3-graphql��-�ㅻ쾭�붿��덉뼱留�">3. GraphQL�� �ㅻ쾭�붿��덉뼱留�</a></h3>
<p>�⑥닚�� 留덊겕�ㅼ슫 釉붾줈洹몄뿉 GraphQL�� 怨쇱뿰 �꾩슂�쒓�? �쇰뒗 �섎Ц�� �ㅺ린 �쒖옉�덉뒿�덈떎.</p>
<h3 id="nextjs��-留ㅻ젰�곸씤-�먮뱾"><a class="heading-anchor" href="#nextjs��-留ㅻ젰�곸씤-�먮뱾">Next.js�� 留ㅻ젰�곸씤 �먮뱾</a></h3>
<ul>
<li>�뚯씪 湲곕컲 �쇱슦�낆쑝濡� �� 吏곴��곸씤 援ъ“</li>
<li>�섏〈�� �⑦궎吏�媛� 39媛쒕줈 �뺤뿰�� �곸쓬</li>
<li>SSR/SSG �좏깮�� �곸슜�대굹 API Routes 媛숈� �좎뿰��</li>
</ul>
<p>"�� 湲곗닠�대㈃ �⑥뵮 源붾걫�섍쿋��"�� �앷컖�댁뿀�듬땲��. �곸뼱�� �쒖옉�� �뚭퉴吏���.</p>
<h2 id="留덉씠洹몃젅�댁뀡-怨쇱젙"><a class="heading-anchor" href="#留덉씠洹몃젅�댁뀡-怨쇱젙">留덉씠洹몃젅�댁뀡 怨쇱젙</a></h2>
<h3 id="1�④퀎-湲곕낯-援ъ“-�댁쟾"><a class="heading-anchor" href="#1�④퀎-湲곕낯-援ъ“-�댁쟾">1�④퀎: 湲곕낯 援ъ“ �댁쟾</a></h3>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">// 湲곗〈 Gatsby 援ъ“
</span><span class="code-line">src/
</span><span class="code-line">�쒋��� components/
</span><span class="code-line">�쒋��� pages/
</span><span class="code-line">�쒋��� templates/
</span><span class="code-line">�붴��� utils/
</span><span class="code-line">
</span><span class="code-line">// Next.js App Router 援ъ“
</span><span class="code-line">src/
</span><span class="code-line">�쒋��� app/
</span><span class="code-line">�� �쒋��� posts/<span class="token punctuation">[</span>slug<span class="token punctuation">]</span>/
</span><span class="code-line">�� �쒋��� tags/
</span><span class="code-line">�� �붴��� layout.tsx
</span><span class="code-line">�쒋��� components/
</span><span class="code-line">�붴��� lib/
</span></code></pre>
<p>�ш린源뚯��� �쒖“濡쒖썱�듬땲��. �뚯씪�ㅼ쓣 ��린怨� �쇱슦�낆쓣 App Router 諛⑹떇�쇰줈 蹂�寃쏀븯�� 嫄� �앷컖蹂대떎 �대졄吏� �딆븯�듬땲��.</p>
<h3 id="2�④퀎-留덊겕�ㅼ슫-泥섎━---媛���-蹂듭옟�덈뜕-遺�遺�"><a class="heading-anchor" href="#2�④퀎-留덊겕�ㅼ슫-泥섎━---媛���-蹂듭옟�덈뜕-遺�遺�">2�④퀎: 留덊겕�ㅼ슫 泥섎━ - 媛��� 蹂듭옟�덈뜕 遺�遺�</a></h3>
<p>Gatsby�먯꽌�� �대옱�듬땲��.</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// gatsby-config.js</span>
</span><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token string">'gatsby-transformer-remark'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token string">'gatsby-remark-emoji'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">'gatsby-remark-autolink-headers'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">'gatsby-remark-prismjs'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token comment">// TOC�� �먮룞�쇰줈...</span>
</span><span class="code-line"> <span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>�� 19以꾨줈 紐⑤뱺 留덊겕�ㅼ슫 泥섎━媛� �앸궗�듬땲��.</p>
<p>Next.js�먯꽌�� 248以꾩쭨由� <code>lib/markdown.ts</code>瑜� 吏곸젒 吏쒖빞 �덉뒿�덈떎.</p>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">parseMarkdownFile</span><span class="token punctuation">(</span>filePath<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator"><</span>PostData<span class="token operator">></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> fileContent <span class="token operator">=</span> fs<span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span>filePath<span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> frontMatter<span class="token punctuation">,</span> content <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">matter</span><span class="token punctuation">(</span>fileContent<span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// �대�吏� 寃쎈줈 蹂��� 濡쒖쭅</span>
</span><span class="code-line"> <span class="token keyword">let</span> transformedContent <span class="token operator">=</span> <span class="token function">transformImagePaths</span><span class="token punctuation">(</span>content<span class="token punctuation">,</span> filePath<span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// TOC 泥섎━ 濡쒖쭅</span>
</span><span class="code-line"> transformedContent <span class="token operator">=</span> transformedContent<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">```toc<span class="token char-set class-name">\s</span><span class="token quantifier number">*</span>```</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token string">'## Table of Contents'</span>
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// unified + remark + rehype �뚯씠�꾨씪��</span>
</span><span class="code-line"> <span class="token keyword">const</span> processedContent <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">unified</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>remarkParse<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>remarkEmoji<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>remarkToc<span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">/* 蹂듭옟�� �ㅼ젙 */</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>remarkRehype<span class="token punctuation">,</span> <span class="token punctuation">{</span> allowDangerousHtml<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>rehypePrism<span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">/* �� 蹂듭옟�� �ㅼ젙 */</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>rehypeAutolinkHeadings<span class="token punctuation">,</span> <span class="token punctuation">{</span> behavior<span class="token operator">:</span> <span class="token string">'wrap'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>rehypeStringify<span class="token punctuation">,</span> <span class="token punctuation">{</span> allowDangerousHtml<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token function">process</span><span class="token punctuation">(</span>transformedContent<span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// TOC 異붿텧 濡쒖쭅 (30以� ��...)</span>
</span><span class="code-line"> <span class="token keyword">let</span> tableOfContents <span class="token operator">=</span> <span class="token string">''</span>
</span><span class="code-line"> <span class="token keyword">const</span> tocHeadingMatch <span class="token operator">=</span> htmlContent<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex"><h2<span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token char-class-negation operator">^</span>><span class="token char-class-punctuation punctuation">]</span></span><span class="token quantifier number">*</span>>Table of Contents<<span class="token escape">\/</span>h2><span class="token group punctuation">(</span><span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token char-set class-name">\s</span><span class="token char-set class-name">\S</span><span class="token char-class-punctuation punctuation">]</span></span><span class="token quantifier number">*?</span><span class="token group punctuation">)</span><span class="token group punctuation">(?=</span><h<span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token range">1<span class="token range-punctuation operator">-</span>6</span><span class="token char-class-punctuation punctuation">]</span></span><span class="token alternation keyword">|</span><span class="token anchor function">$</span><span class="token group punctuation">)</span></span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span>
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token comment">// ... 蹂듭옟�� �뺢퇋�앷낵 �뚯떛 濡쒖쭅</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">/* 泥섎━�� �곗씠�� */</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>�뱁엳 TOC 異붿텧�� 媛��� 源뚮떎濡쒖썱�듬땲��. Gatsby�먯꽌�� �뚮윭洹몄씤�� �먮룞�쇰줈 泥섎━�댁＜�� 嫄�, Next.js�먯꽌�� HTML�� �뚯떛�댁꽌 吏곸젒 戮묒븘�댁빞 �덉뒿�덈떎.</p>
<h3 id="3�④퀎-�대�吏�-泥섎━"><a class="heading-anchor" href="#3�④퀎-�대�吏�-泥섎━">3�④퀎: �대�吏� 泥섎━</a></h3>
<p>Gatsby�먯꽌�� 留덊겕�ㅼ슫�� <code></code> �대젃寃뚮쭔 �⑤룄 <code>gatsby-plugin-sharp</code>媛� �뚯븘�� 理쒖쟻�뷀븯怨� 寃쎈줈�� 諛붽퓭以ъ뒿�덈떎.</p>
<p>Next.js�먯꽌�� 寃쎈줈 蹂��� 濡쒖쭅�� 吏곸젒 吏곗뒿�덈떎.</p>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">transformImagePaths</span><span class="token punctuation">(</span>content<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> filePath<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> relativePath <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">relative</span><span class="token punctuation">(</span>postsDirectory<span class="token punctuation">,</span> filePath<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">const</span> pathParts <span class="token operator">=</span> relativePath<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span>sep<span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>pathParts<span class="token punctuation">.</span>length <span class="token operator">>=</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> category <span class="token operator">=</span> pathParts<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token keyword">const</span> year <span class="token operator">=</span> pathParts<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token keyword">const</span> month <span class="token operator">=</span> pathParts<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span>
</span><span class="code-line"> <span class="token keyword">const</span> day <span class="token operator">=</span> pathParts<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">return</span> content<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">!<span class="token special-escape escape">\[</span><span class="token group punctuation">(</span><span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token char-class-negation operator">^</span><span class="token special-escape escape">\]</span><span class="token char-class-punctuation punctuation">]</span></span><span class="token quantifier number">*</span><span class="token group punctuation">)</span><span class="token special-escape escape">\]</span><span class="token special-escape escape">\(</span>images<span class="token escape">\/</span><span class="token group punctuation">(</span><span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token char-class-negation operator">^</span>)<span class="token char-class-punctuation punctuation">]</span></span><span class="token quantifier number">+</span><span class="token group punctuation">)</span><span class="token special-escape escape">\)</span></span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">![$1](/images/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>category<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>year<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>month<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>day<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/$2)</span><span class="token template-punctuation string">`</span></span>
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token keyword">return</span> content
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h3 id="4�④퀎-鍮뚮뱶��-諛고룷-�ㅼ젙"><a class="heading-anchor" href="#4�④퀎-鍮뚮뱶��-諛고룷-�ㅼ젙">4�④퀎: 鍮뚮뱶�� 諛고룷 �ㅼ젙</a></h3>
<p>Gatsby�먯꽌�� <code>package.json</code>�� �ㅽ겕由쏀듃 �� 以꾩씠�덈뒗��, Next.js�먯꽌�� Static Export �ㅼ젙�� 蹂꾨룄濡� �꾩슂�덉뒿�덈떎.</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// next.config.js</span>
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'next'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>NextConfig<span class="token punctuation">}</span></span> */</span>
</span><span class="code-line"><span class="token keyword">const</span> nextConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token string">'export'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">distDir</span><span class="token operator">:</span> <span class="token string">'out'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">images</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">unoptimized</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token comment">// �뺤쟻 諛고룷瑜� �꾪븳 異붽� �ㅼ젙��...</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h2 id="留덉씠洹몃젅�댁뀡-��-�щ씪吏�-寃껊뱾"><a class="heading-anchor" href="#留덉씠洹몃젅�댁뀡-��-�щ씪吏�-寃껊뱾">留덉씠洹몃젅�댁뀡 �� �щ씪吏� 寃껊뱾</a></h2>
<h3 id="醫뗭븘吏�-��"><a class="heading-anchor" href="#醫뗭븘吏�-��">醫뗭븘吏� ��</a></h3>
<ul>
<li>�섏〈�깆씠 61媛� �� 39媛쒕줈 以꾩뿀怨�, 媛쒕컻 �쒕쾭 �쒖옉�� �⑥뵮 鍮⑤씪議뚯뒿�덈떎.</li>
<li>�꾨줈�앺듃 援ъ“媛� 吏곴��곸엯�덈떎.</li>
</ul>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">src/app/
</span><span class="code-line">�쒋��� page.tsx # �덊럹�댁�
</span><span class="code-line">�쒋��� posts/[slug]/page.tsx # 釉붾줈洹� �ъ뒪��
</span><span class="code-line">�쒋��� tags/page.tsx # �쒓렇 �섏씠吏�
</span><span class="code-line">�붴��� layout.tsx # �덉씠�꾩썐
</span></code></pre>
<ul>
<li>TypeScript 吏��먯씠 �� 留ㅻ걚�쎌뒿�덈떎. App Router���� 議고빀�� �뱁엳 洹몃옱�듬땲��.</li>
</ul>
<h3 id="�앷컖蹂대떎-�섎뱾�덈뜕-��"><a class="heading-anchor" href="#�앷컖蹂대떎-�섎뱾�덈뜕-��">�앷컖蹂대떎 �섎뱾�덈뜕 ��</a></h3>
<p>湲곗〈�� �뚮윭洹몄씤�쇰줈 媛꾨떒�� �닿껐�섎뜕 湲곕뒫�ㅼ쓣 吏곸젒 援ы쁽�섎뒗 �� �쒓컙�� 苑� �ㅼ뿀�듬땲��.
TOC �앹꽦 濡쒖쭅留� 30以�, �대�吏� 寃쎈줈 蹂��� 20以�, 留덊겕�ㅼ슫 �뚯씠�꾨씪�� �꾩껜媛� 248以�.
Gatsby�� �먯퐫�쒖뒪�쒖씠 �깆닕�댁꽌 ��遺�遺꾩쓽 �ｌ� 耳��댁뒪媛� �대� 泥섎━�섏뼱 �덉뿀�붾뜲,
Next.js�먯꽌�� 洹멸구 �섎굹�섎굹 吏곸젒 �몃뱾留곹빐�� �덉뒿�덈떎.</p>
<h2 id="留덉씠洹몃젅�댁뀡��-�듯빐-諛곗슫-援먰썕��"><a class="heading-anchor" href="#留덉씠洹몃젅�댁뀡��-�듯빐-諛곗슫-援먰썕��">留덉씠洹몃젅�댁뀡�� �듯빐 諛곗슫 援먰썕��</a></h2>
<h3 id="��-醫뗭�-湲곗닠��-諛섎뱶��-��-�ъ슫-湲몄�-�꾨땲��"><a class="heading-anchor" href="#��-醫뗭�-湲곗닠��-諛섎뱶��-��-�ъ슫-湲몄�-�꾨땲��">"�� 醫뗭� 湲곗닠"�� 諛섎뱶�� "�� �ъ슫 湲�"�� �꾨땲��</a></h3>
<p>Next.js媛� 泥섏쓬�먮뒗 �⑥닚�� 蹂댁�吏�留�, �ㅼ젣濡쒕뒗 Gatsby�먯꽌 �뚮윭洹몄씤�� �댁＜�� 寃껊뱾��
吏곸젒 援ы쁽�댁빞 �섎뒗 �곹솴�댁뿀�듬땲��. 寃됰낫湲곗뿉�� �ы뵆�쒕뜲 �ㅼ젣濡쒕뒗
�⑥뵮 留롮� 肄붾뱶 �묒꽦�� �꾩슂�� 寃쎌슦���듬땲��.</p>
<h3 id="��-�꾨젅�꾩썙��-紐⑤몢-�λ떒�먯씠-�덈떎"><a class="heading-anchor" href="#��-�꾨젅�꾩썙��-紐⑤몢-�λ떒�먯씠-�덈떎">�� �꾨젅�꾩썙�� 紐⑤몢 �λ떒�먯씠 �덈떎</a></h3>
<p>Gatsby�� �띾��� �뚮윭洹몄씤 �앺깭怨� �뺣텇�� 珥덇린 媛쒕컻�� 鍮좊쫭�덈떎.
諛섎㈃ 媛쒕컻 �섍꼍�� 臾닿쾪怨� GraphQL�� 遺덊븘�뷀븳 �ㅻ쾭�ㅻ뱶泥섎읆 �먭뺨吏� �뚭� �덉뒿�덈떎.
Next.js�� 踰덈뱾�� 媛�蹂띻퀬 援ъ“媛� 吏곴��곸씠吏�留�, 吏곸젒 援ы쁽�댁빞 �� 遺�遺꾩씠 留롪퀬
珥덇린 �ъ옄 �쒓컙�� �꾩슂�⑸땲��. �대뒓 履쎌씠 �ル떎湲곕낫�� �곹솴�� �곕Ⅸ �좏깮�� 臾몄젣�� 寃� 媛숈뒿�덈떎.</p>
<h3 id="湲곗닠�곸쑝濡�-�곗븘��-寃껊낫��-�덉젙�곸쑝濡�-�숈옉�섎뒗-寃�"><a class="heading-anchor" href="#湲곗닠�곸쑝濡�-�곗븘��-寃껊낫��-�덉젙�곸쑝濡�-�숈옉�섎뒗-寃�">湲곗닠�곸쑝濡� �곗븘�� 寃껊낫�� �덉젙�곸쑝濡� �숈옉�섎뒗 寃�</a></h3>
<p>�뚮줈�� �� �몃젴�� �붾（�섎낫�� �대� �� �숈옉�섍퀬 �덈뒗 �붾（�섏씠 �� 媛�移섏엳�� �� �덈떎�� 嫄� �대쾲 留덉씠洹몃젅�댁뀡�먯꽌 �ㅼ떆 �쒕쾲 �먭펷�듬땲��.</p>
<h2 id="寃곕줎"><a class="heading-anchor" href="#寃곕줎">寃곕줎</a></h2>
<p>�꾩옱 釉붾줈洹몃뒗 Next.js 14 湲곕컲�쇰줈 �덉젙�곸쑝濡� �댁쁺�섍퀬 �덉뒿�덈떎. 紐⑤뱺 湲곗〈 湲곕뒫�� ��꺼�붽퀬 draft �쒖뒪�쒕룄 �� �뚯븘媛묐땲��.</p>
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><span class="token comment">// layout.tsx�� footer</span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span><span class="token plain-text">Built with Next.js 14 </span><span class="token punctuation">{</span><span class="token comment">/* �� */</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>留덉씠洹몃젅�댁뀡 �먯껜�� �깃났�덇퀬 吏�湲덉� 留뚯”�ㅻ읇寃� �곌퀬 �덉뒿�덈떎.
�ㅻ쭔 �뚯븘蹂대㈃ "Gatsby�� 紐낇솗�� 遺덈쭔�� �덉뼱��"蹂대떎�� "Next.js媛� �붿쬁 �ロ븯�덇퉴"��
媛�源뚯슫 �숆린���붾뜲, 洹몃윴 �댁쑀�쇰㈃ �앷컖蹂대떎 �덉씠 留롮씠 �좊떎�� 嫄� 誘몃━ �뚯븯�쇰㈃ 醫뗭븯�� 寃� 媛숈뒿�덈떎.</p>
<hr>
<p><em>PS: �� 湲��� �묒꽦�섎㈃�쒕룄 Next.js�� 留덊겕�ㅼ슫 �뚯씠�꾨씪�몄쓣 �ъ슜�덉뒿�덈떎. 248以꾩쓽 肄붾뱶媛� �� �� 踰� 利앸챸�덈벏��, 湲곗닠 �좏깮�먮뒗 ��긽 trade-off媛� �덉뒿�덈떎.</em></p>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/blog/2025/08/14/gatsby-to-nextjs-migration-experience">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>LLM �쒕퉬��, �� �ㅽ듃由щ컢(Streaming)�� 踰꾨━怨� �대쭅(Polling)�� �앺뻽��? : JSON �뺥빀�깃낵 Vercel ���꾩븘�� �닿껐湲�</title>
<description><![CDATA[## �꾩엯: 紐⑤몢媛� �ㅽ듃由щ컢�� �� ��, �곕━�� �대쭅�� �좏깮�덈떎
�붿쬁 LLM �쒕퉬�ㅼ쓽 �쒖��� **Server-Sent Events(SSE) �ㅽ듃由щ컢**�낅땲��.
ChatGPT泥섎읆 ���먮� 移섎벏 �� 湲��먯뵫 異쒕젰�섎뒗 UI媛� 援�０�댁짛.
�ъ슜�먮뒗 湲곕떎由� �놁씠 �ㅼ떆媛꾩쑝濡� �묐떟�� 諛쏅뒗 寃껋쿂�� �먮겮怨�,
媛쒕컻�먮뒗 湲� �묐떟 �쒓컙�� "泥닿컧 �띾룄"濡� �닿껐�� �� �덉뒿�덈떎.
�섏�留� **Cookting(荑≫똿)** �깆쓣 媛쒕컻�섎㈃��, ���� 怨쇨컧�� �ㅽ듃由щ컢�� �ш린�덉뒿�덈떎.
洹� �댁쑀�� 媛꾨떒�덉뒿�덈떎.
**"�띾룄"蹂대떎 "�곗씠�곗쓽 �꾨꼍��(Integrity)...]]></description>
<link>https://blog.jell.kr/posts/dev/architecture/2025-01-05-llm-polling-vs-streaming</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/architecture/2025-01-05-llm-polling-vs-streaming</guid>
<pubDate>Sun, 05 Jan 2025 05:30:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Uncategorized]]></category>
<category><![CDATA[architecture]]></category>
<category><![CDATA[llm]]></category>
<category><![CDATA[nestjs]]></category>
<category><![CDATA[flutter]]></category>
<category><![CDATA[vercel]]></category>
<category><![CDATA[polling]]></category>
<category><![CDATA[streaming]]></category>
<category><![CDATA[json]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Uncategorized</p>
<p><strong>�쒓렇:</strong> architecture, llm, nestjs, flutter, vercel, polling, streaming, json</p>
<hr/>
<h2 id="�꾩엯-紐⑤몢媛�-�ㅽ듃由щ컢��-��-��-�곕━��-�대쭅��-�좏깮�덈떎"><a class="heading-anchor" href="#�꾩엯-紐⑤몢媛�-�ㅽ듃由щ컢��-��-��-�곕━��-�대쭅��-�좏깮�덈떎">�꾩엯: 紐⑤몢媛� �ㅽ듃由щ컢�� �� ��, �곕━�� �대쭅�� �좏깮�덈떎</a></h2>
<p>�붿쬁 LLM �쒕퉬�ㅼ쓽 �쒖��� <strong>Server-Sent Events(SSE) �ㅽ듃由щ컢</strong>�낅땲��.
ChatGPT泥섎읆 ���먮� 移섎벏 �� 湲��먯뵫 異쒕젰�섎뒗 UI媛� 援�０�댁짛.
�ъ슜�먮뒗 湲곕떎由� �놁씠 �ㅼ떆媛꾩쑝濡� �묐떟�� 諛쏅뒗 寃껋쿂�� �먮겮怨�,
媛쒕컻�먮뒗 湲� �묐떟 �쒓컙�� "泥닿컧 �띾룄"濡� �닿껐�� �� �덉뒿�덈떎.</p>
<p>�섏�留� <strong>Cookting(荑≫똿)</strong> �깆쓣 媛쒕컻�섎㈃��, ���� 怨쇨컧�� �ㅽ듃由щ컢�� �ш린�덉뒿�덈떎.</p>
<p>洹� �댁쑀�� 媛꾨떒�덉뒿�덈떎.<br>
<strong>"�띾룄"蹂대떎 "�곗씠�곗쓽 �꾨꼍��(Integrity)"�� �� 以묒슂�덇린 �뚮Ц�낅땲��.</strong></p>
<p>�� 湲��먯꽌�� Next.js + Vercel �섍꼍�먯꽌 LLM 湲곕컲 �쒕퉬�ㅻ� 援ы쁽�섎ʼn 留덉＜��
<strong>���꾩븘�� �쒖빟</strong>怨� <strong>JSON �뺥빀�� 臾몄젣</strong>瑜� �대뼸寃� �닿껐�덈뒗吏�,
洹몃━怨� �� �ㅽ듃由щ컢 ���� <strong>鍮꾨룞湲� �대쭅 �꾪궎�띿쿂</strong>瑜� �좏깮�덈뒗吏� 怨듭쑀�⑸땲��.</p>
<hr>
<h2 id="臾몄젣-�곹솴-vercel-���꾩븘�껉낵-源⑥���-json"><a class="heading-anchor" href="#臾몄젣-�곹솴-vercel-���꾩븘�껉낵-源⑥���-json">臾몄젣 �곹솴: Vercel ���꾩븘�껉낵 源⑥��� JSON</a></h2>
<h3 id="諛곌꼍"><a class="heading-anchor" href="#諛곌꼍">諛곌꼍</a></h3>
<p>Cookting�� �ъ슜�먭� 蹂댁쑀�� �앹옱猷뚮� �낅젰�섎㈃ LLM�� �덉떆�쇰� 異붿쿇�댁＜�� �쒕퉬�ㅼ엯�덈떎.<br>
湲곗닠 �ㅽ깮�� �ㅼ쓬怨� 媛숈뒿�덈떎:</p>
<ul>
<li><strong>Frontend</strong>: Next.js (Vercel 諛고룷)</li>
<li><strong>Backend</strong>: NestJS (Server-AI 留덉씠�щ줈�쒕퉬��)</li>
<li><strong>Mobile</strong>: Flutter</li>
<li><strong>LLM</strong>: GPT-4 / Claude</li>
</ul>
<h3 id="�쒖빟-1-�명봽��-�쒖빟-vercel-serverless-���꾩븘��"><a class="heading-anchor" href="#�쒖빟-1-�명봽��-�쒖빟-vercel-serverless-���꾩븘��">�쒖빟 1: �명봽�� �쒖빟 (Vercel Serverless ���꾩븘��)</a></h3>
<p>Vercel�� Hobby/Pro �뚮옖�먯꽌 Serverless Function�� 理쒕� �ㅽ뻾 �쒓컙�� <strong>10珥�</strong>�낅땲��.<br>
�섏�留� LLM �묐떟 �쒓컙�� �됯퇏 <strong>30珥�~1遺�</strong>�� �뚯슂�⑸땲��.</p>
<pre class="language-plaintext"><code class="language-plaintext code-highlight"><span class="code-line">User Request �� Vercel Function (10珥� �쒗븳) �� LLM (30~60珥� �묐떟) �� TIMEOUT!
</span></code></pre>
<h3 id="�쒖빟-2-�곗씠��-援ъ“-�쒖빟-strict-json-format-�꾩슂"><a class="heading-anchor" href="#�쒖빟-2-�곗씠��-援ъ“-�쒖빟-strict-json-format-�꾩슂">�쒖빟 2: �곗씠�� 援ъ“ �쒖빟 (Strict JSON Format �꾩슂)</a></h3>
<p>Cookting �깆� �⑥닚 �띿뒪�멸� �꾨땶 <strong>援ъ“�붾맂 JSON �곗씠��</strong>媛� �꾩닔�낅땲��.<br>
Flutter UI媛� �ㅼ쓬怨� 媛숈� �뺤떇�쇰줈 �덉떆�쇰� �뚮뜑留곹븯湲� �뚮Ц�낅땲��:</p>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">ServerAIRecipe</span> <span class="token punctuation">{</span>
</span><span class="code-line"> name<span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"> description<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"> ingredients<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
</span><span class="code-line"> additionalIngredients<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
</span><span class="code-line"> instructions<span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"> cookingTime<span class="token operator">:</span> <span class="token builtin">number</span>
</span><span class="code-line"> difficulty<span class="token operator">:</span> <span class="token string">'easy'</span> <span class="token operator">|</span> <span class="token string">'medium'</span> <span class="token operator">|</span> <span class="token string">'hard'</span>
</span><span class="code-line"> servings<span class="token operator">:</span> <span class="token builtin">number</span>
</span><span class="code-line"> thumbnailUrl<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"> categoryId<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>留뚯빟 LLM�� �묐떟 以묎컙�� �딄린嫄곕굹, �ル뒗 愿꾪샇(<code>}</code>)媛� �꾨씫�섎㈃?<br>
�� <strong><code>JSON.parse()</code> �ㅽ뙣 �� �� �щ옒��</strong></p>
<h3 id="�ㅽ뙣��-泥�-踰덉㎏-�쒕룄-�ㅽ듃由щ컢--json-蹂듦뎄"><a class="heading-anchor" href="#�ㅽ뙣��-泥�-踰덉㎏-�쒕룄-�ㅽ듃由щ컢--json-蹂듦뎄">�ㅽ뙣�� 泥� 踰덉㎏ �쒕룄: �ㅽ듃由щ컢 + JSON 蹂듦뎄</a></h3>
<p>泥섏쓬�먮뒗 �ㅽ듃由щ컢�� 怨좎쭛�덉뒿�덈떎. SSE濡� �곗씠�곕� 諛쏆쑝硫댁꽌 �대씪�댁뼵�� 痢≪뿉�� 遺덉셿�꾪븳 JSON�� 蹂듦뎄�섎뒗 �뚯꽌瑜� 援ы쁽�덉뒿�덈떎.</p>
<p>�섏�留� �꾩떎�� 李명샊�덉뒿�덈떎:</p>
<ul>
<li>LLM�� �덉긽移� 紐삵븳 �꾩튂�먯꽌 �묐떟�� �딆쓬</li>
<li>以묒꺽�� 諛곗뿴/媛앹껜 援ъ“�먯꽌 蹂듦뎄 �ㅽ뙣�� 湲됱쬆</li>
<li>�덉쇅 泥섎━ 肄붾뱶媛� 鍮꾩쫰�덉뒪 濡쒖쭅蹂대떎 湲몄뼱吏�</li>
<li><strong>寃곕줎: 蹂듭옟�� 燧놅툘, �덉젙�� 燧뉛툘</strong></li>
</ul>
<hr>
<h2 id="湲곗닠��-�섏궗寃곗젙-鍮꾨룞湲�-�대쭅-�꾪궎�띿쿂"><a class="heading-anchor" href="#湲곗닠��-�섏궗寃곗젙-鍮꾨룞湲�-�대쭅-�꾪궎�띿쿂">湲곗닠�� �섏궗寃곗젙: 鍮꾨룞湲� �대쭅 �꾪궎�띿쿂</a></h2>
<h3 id="��-�대쭅�멸�"><a class="heading-anchor" href="#��-�대쭅�멸�">�� �대쭅�멸�?</a></h3>
<p>怨좊��� 紐낇솗�덉뒿�덈떎.<br>
<strong>"Vercel ���꾩븘�껋쓣 �뚰뵾�섎㈃�쒕룄, �꾨꼍�� JSON�� 蹂댁옣諛쏆쑝�ㅻ㈃?"</strong></p>
<p>�� 媛�吏� �좏깮吏�媛� �덉뿀�듬땲��:</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>�μ젏</th>
<th>�⑥젏</th>
<th>�좏깮</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>A. �ㅽ듃由щ컢 + JSON 蹂듦뎄</strong></td>
<td>�ㅼ떆媛� UX</td>
<td>蹂듭옟�� �믪쓬, �덉젙�� ��쓬</td>
<td>��</td>
</tr>
<tr>
<td><strong>B. 鍮꾨룞湲� �대쭅</strong></td>
<td>援ы쁽 �⑥닚, �덉젙�� �믪쓬</td>
<td>�ㅼ떆媛� UX �ш린</td>
<td>��</td>
</tr>
</tbody>
</table>
<h3 id="理쒖쥌-寃곗젙-鍮꾨룞湲�-�대쭅-�꾪궎�띿쿂"><a class="heading-anchor" href="#理쒖쥌-寃곗젙-鍮꾨룞湲�-�대쭅-�꾪궎�띿쿂">理쒖쥌 寃곗젙: 鍮꾨룞湲� �대쭅 �꾪궎�띿쿂</a></h3>
<p>�듭떖 �꾨왂�� �ㅼ쓬怨� 媛숈뒿�덈떎:</p>
<ol>
<li><strong>Request-Reply 遺꾨━</strong>: �대씪�댁뼵�� �붿껌 利됱떆 <code>{ jobId, status: "submitted" }</code> 諛섑솚 �� �곌껐 �댁젣</li>
<li><strong>Worker Server</strong>: NestJS媛� 諛깃렇�쇱슫�쒖뿉�� LLM怨� �듭떊, �꾨꼍�� JSON �꾩꽦�� �뚭퉴吏� ��湲� + 寃�利�</li>
<li><strong>Polling</strong>: �대씪�댁뼵�멸� Job ID濡� <strong>2珥덈쭏��</strong> �곹깭 �뺤씤 (1珥덈뒗 �쒕쾭 遺���, 3珥덈뒗 UX �듬떟�� �� 洹좏삎�� 2珥�)</li>
</ol>
<hr>
<h2 id="�꾪궎�띿쿂-諛�-援ы쁽"><a class="heading-anchor" href="#�꾪궎�띿쿂-諛�-援ы쁽">�꾪궎�띿쿂 諛� 援ы쁽</a></h2>
<h3 id="�꾩껜-�뚮줈��"><a class="heading-anchor" href="#�꾩껜-�뚮줈��">�꾩껜 �뚮줈��</a></h3>
<blockquote>
<p><strong>Note</strong>: �꾨옒 �ㅼ씠�닿렇�⑥씠 �뚮뜑留곷릺吏� �딅뒗 寃쎌슦,
<a href="https://mermaid.live/">Mermaid Live Editor</a>�먯꽌 肄붾뱶瑜� 遺숈뿬�ｌ뼱 PNG濡� ���ν븯�몄슂.</p>
</blockquote>
<pre class="language-mermaid"><code class="language-mermaid code-highlight"><span class="code-line"><span class="token keyword">sequenceDiagram</span>
</span><span class="code-line"> <span class="token keyword">participant</span> C as Flutter App
</span><span class="code-line"> <span class="token keyword">participant</span> N as NestJS Server
</span><span class="code-line"> <span class="token keyword">participant</span> S as Server-AI Worker
</span><span class="code-line"> <span class="token keyword">participant</span> L as LLM <span class="token text string">(GPT-4)</span>
</span><span class="code-line">
</span><span class="code-line"> C<span class="token arrow operator">->></span>N<span class="token operator">:</span> POST /recipe/generate <span class="token text string">(�щ즺 �뺣낫)</span>
</span><span class="code-line"> N<span class="token arrow operator">->></span>N<span class="token operator">:</span> Job Queue�� �깅줉
</span><span class="code-line"> N<span class="token arrow operator">-->></span>C<span class="token operator">:</span> <span class="token text string">{ jobId: "abc123", status: "submitted" }</span>
</span><span class="code-line"> <span class="token keyword">Note over</span> N,C<span class="token operator">:</span> 利됱떆 諛섑솚 <span class="token text string">(10珥� �대궡)</span>
</span><span class="code-line">
</span><span class="code-line"> S<span class="token arrow operator">->></span>L<span class="token operator">:</span> LLM �붿껌 <span class="token text string">(30~60珥� �뚯슂)</span>
</span><span class="code-line"> L<span class="token arrow operator">-->></span>S<span class="token operator">:</span> JSON �묐떟 <span class="token text string">(援ъ“�붾맂 �덉떆��)</span>
</span><span class="code-line"> S<span class="token arrow operator">->></span>S<span class="token operator">:</span> JSON 寃�利� + DB ����
</span><span class="code-line"> S<span class="token arrow operator">->></span>N<span class="token operator">:</span> Job �곹깭 �낅뜲�댄듃 <span class="token text string">(completed)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">loop</span> 2珥덈쭏�� �대쭅
</span><span class="code-line"> C<span class="token arrow operator">->></span>N<span class="token operator">:</span> GET /recipe/status/<span class="token text string">{jobId}</span>
</span><span class="code-line"> N<span class="token arrow operator">-->></span>C<span class="token operator">:</span> <span class="token text string">{ status: "processing", progress: 45% }</span>
</span><span class="code-line"> <span class="token keyword">end</span>
</span><span class="code-line">
</span><span class="code-line"> C<span class="token arrow operator">->></span>N<span class="token operator">:</span> GET /recipe/status/<span class="token text string">{jobId}</span>
</span><span class="code-line"> N<span class="token arrow operator">-->></span>C<span class="token operator">:</span> <span class="token punctuation">{</span> status<span class="token operator">:</span> <span class="token string">"completed"</span>, result<span class="token operator">:</span> <span class="token text string">{...}</span> <span class="token punctuation">}</span>
</span><span class="code-line"> C<span class="token arrow operator">->></span>C<span class="token operator">:</span> UI �뚮뜑留�
</span></code></pre>
<h3 id="肄붾뱶-援ы쁽"><a class="heading-anchor" href="#肄붾뱶-援ы쁽">肄붾뱶 援ы쁽</a></h3>
<h4 id="1截뤴깵-nestjs-server-job-�쒖텧-諛�-�곹깭-議고쉶"><a class="heading-anchor" href="#1截뤴깵-nestjs-server-job-�쒖텧-諛�-�곹깭-議고쉶">1截뤴깵 NestJS Server: Job �쒖텧 諛� �곹깭 議고쉶</a></h4>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token comment">// server/src/modules/server-ai/server-ai-client.service.ts</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token decorator"><span class="token at operator">@</span><span class="token function">Injectable</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">ServerAIClientService</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">private</span> <span class="token keyword">readonly</span> maxPollingAttempts <span class="token operator">=</span> <span class="token number">60</span> <span class="token comment">// 60 attempts * 2s = 2 minutes</span>
</span><span class="code-line"> <span class="token keyword">private</span> <span class="token keyword">readonly</span> pollingInterval <span class="token operator">=</span> <span class="token number">2000</span> <span class="token comment">// 2 seconds</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">/**
</span></span><span class="code-line"><span class="token comment"> * Submit recipe generation job (async, returns immediately)
</span></span><span class="code-line"><span class="token comment"> * Vercel ���꾩븘�� �뚰뵾瑜� �꾪빐 Job留� �쒖텧�섍퀬 利됱떆 諛섑솚
</span></span><span class="code-line"><span class="token comment"> */</span>
</span><span class="code-line"> <span class="token keyword">async</span> <span class="token function">submitJobOnly</span><span class="token punctuation">(</span>
</span><span class="code-line"> request<span class="token operator">:</span> ServerAIGenerateRecipeRequest
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator"><</span>ServerAIJobResponse<span class="token operator">></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">submitRecipeJob</span><span class="token punctuation">(</span>request<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">private</span> <span class="token keyword">async</span> <span class="token function">submitRecipeJob</span><span class="token punctuation">(</span>
</span><span class="code-line"> request<span class="token operator">:</span> ServerAIGenerateRecipeRequest
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator"><</span>ServerAIJobResponse<span class="token operator">></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>client<span class="token punctuation">.</span><span class="token generic-function"><span class="token function">post</span><span class="token generic class-name"><span class="token operator"><</span>ServerAIJobResponse<span class="token operator">></span></span></span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token string">'/recipe/generate'</span><span class="token punctuation">,</span>
</span><span class="code-line"> request<span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">{</span> timeout<span class="token operator">:</span> <span class="token number">10000</span> <span class="token punctuation">}</span> <span class="token comment">// 10珥� ���꾩븘��</span>
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">return</span> response<span class="token punctuation">.</span>data <span class="token comment">// { jobId, message, statusUrl }</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">/**
</span></span><span class="code-line"><span class="token comment"> * Get job status (public for direct status checks)
</span></span><span class="code-line"><span class="token comment"> * �대씪�댁뼵�멸� �대쭅�쇰줈 �몄텧
</span></span><span class="code-line"><span class="token comment"> */</span>
</span><span class="code-line"> <span class="token keyword">async</span> <span class="token function">getJobStatus</span><span class="token punctuation">(</span>jobId<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator"><</span>ServerAIJobStatus<span class="token operator">></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>client<span class="token punctuation">.</span><span class="token generic-function"><span class="token function">get</span><span class="token generic class-name"><span class="token operator"><</span>ServerAIJobStatus<span class="token operator">></span></span></span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/recipe/status/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>jobId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">return</span> response<span class="token punctuation">.</span>data
</span><span class="code-line"> <span class="token comment">// { jobId, status: "waiting" | "active" | "completed" | "failed",</span>
</span><span class="code-line"> <span class="token comment">// progress: 0-100, result?: {...}, error?: string }</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p><strong>�듭떖 �ъ씤��</strong>:</p>
<ul>
<li><code>submitJobOnly()</code>: 10珥� ���꾩븘�껋쑝濡� Job留� �먯뿉 �ｊ퀬 利됱떆 諛섑솚</li>
<li><code>getJobStatus()</code>: �대씪�댁뼵�멸� 2珥덈쭏�� �몄텧, �곹깭 諛� 吏꾪뻾瑜� 諛섑솚</li>
<li><code>maxPollingAttempts = 60</code>: 2珥� 횞 60�� = 理쒕� 2遺� ���꾩븘�� (�됯퇏 45珥� �묐떟 �쒓컙 ��鍮� 異⑸텇�� 踰꾪띁)</li>
</ul>
<h4 id="2截뤴깵-flutter-app-鍮꾨룞湲�-�대쭅-�대씪�댁뼵��"><a class="heading-anchor" href="#2截뤴깵-flutter-app-鍮꾨룞湲�-�대쭅-�대씪�댁뼵��">2截뤴깵 Flutter App: 鍮꾨룞湲� �대쭅 �대씪�댁뼵��</a></h4>
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// app-flutter/lib/services/local/async_job_poller.dart</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">enum</span> <span class="token class-name">PollingState</span> <span class="token punctuation">{</span>
</span><span class="code-line"> idle<span class="token punctuation">,</span> submitting<span class="token punctuation">,</span> polling<span class="token punctuation">,</span> completed<span class="token punctuation">,</span> failed<span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">AsyncJobPoller</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token class-name">Timer</span><span class="token operator">?</span> _pollingTimer<span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token class-name">String</span><span class="token operator">?</span> _currentJobId<span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token class-name">PollingState</span> _state <span class="token operator">=</span> <span class="token class-name">PollingState</span><span class="token punctuation">.</span>idle<span class="token punctuation">;</span>
</span><span class="code-line"> int _progress <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token class-name">RecommendedRecipes</span><span class="token operator">?</span> _result<span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// 肄쒕갚</span>
</span><span class="code-line"> <span class="token keyword">void</span> <span class="token class-name">Function</span><span class="token punctuation">(</span>int progress<span class="token punctuation">)</span><span class="token operator">?</span> onProgressUpdate<span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token keyword">void</span> <span class="token class-name">Function</span><span class="token punctuation">(</span><span class="token class-name">RecommendedRecipes</span> result<span class="token punctuation">)</span><span class="token operator">?</span> onComplete<span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token keyword">void</span> <span class="token class-name">Function</span><span class="token punctuation">(</span><span class="token class-name">String</span> error<span class="token punctuation">)</span><span class="token operator">?</span> onError<span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">/// Server-AI Job �쒖텧 諛� �대쭅 �쒖옉</span>
</span><span class="code-line"> <span class="token class-name">Future</span><span class="token generics"><span class="token punctuation"><</span>bool<span class="token punctuation">></span></span> <span class="token function">submitJob</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">async</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">_updateState</span><span class="token punctuation">(</span><span class="token class-name">PollingState</span><span class="token punctuation">.</span>submitting<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// 1. Job �쒖텧</span>
</span><span class="code-line"> <span class="token keyword">final</span> response <span class="token operator">=</span> <span class="token keyword">await</span> _apiService<span class="token punctuation">.</span><span class="token function">submitServerAIJob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token keyword">final</span> jobResponse <span class="token operator">=</span> <span class="token class-name">ServerAIJobResponse</span><span class="token punctuation">.</span><span class="token function">fromJson</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// 2. 罹먯떆�� 寃곌낵媛� �덉쑝硫� 利됱떆 諛섑솚</span>
</span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>jobResponse<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token string-literal"><span class="token string">'completed'</span></span> <span class="token operator">&&</span> jobResponse<span class="token punctuation">.</span>result <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> _result <span class="token operator">=</span> jobResponse<span class="token punctuation">.</span>result<span class="token punctuation">;</span>
</span><span class="code-line"> _progress <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token function">_updateState</span><span class="token punctuation">(</span><span class="token class-name">PollingState</span><span class="token punctuation">.</span>completed<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> onComplete<span class="token operator">?</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>_result<span class="token operator">!</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// 3. Job ID媛� �덉쑝硫� �대쭅 �쒖옉</span>
</span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>jobResponse<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token string-literal"><span class="token string">'submitted'</span></span> <span class="token operator">&&</span> jobResponse<span class="token punctuation">.</span>jobId <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> _currentJobId <span class="token operator">=</span> jobResponse<span class="token punctuation">.</span>jobId<span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token function">_updateState</span><span class="token punctuation">(</span><span class="token class-name">PollingState</span><span class="token punctuation">.</span>polling<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// 利됱떆 泥� 踰덉㎏ �곹깭 �뺤씤</span>
</span><span class="code-line"> <span class="token keyword">await</span> <span class="token function">_checkJobStatus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// 2珥덈쭏�� �대쭅</span>
</span><span class="code-line"> _pollingTimer <span class="token operator">=</span> <span class="token class-name">Timer</span><span class="token punctuation">.</span><span class="token function">periodic</span><span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token class-name">Duration</span><span class="token punctuation">(</span>seconds<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">(</span>_<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">_checkJobStatus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">throw</span> <span class="token class-name">Exception</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'Unexpected job response'</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">/// Job �곹깭 �뺤씤 (�대���)</span>
</span><span class="code-line"> <span class="token class-name">Future</span><span class="token generics"><span class="token punctuation"><</span><span class="token keyword">void</span><span class="token punctuation">></span></span> <span class="token function">_checkJobStatus</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">async</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>_currentJobId <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">final</span> response <span class="token operator">=</span> <span class="token keyword">await</span> _apiService<span class="token punctuation">.</span><span class="token function">getServerAIJobStatus</span><span class="token punctuation">(</span>_currentJobId<span class="token operator">!</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token keyword">final</span> status <span class="token operator">=</span> <span class="token class-name">ServerAIJobStatus</span><span class="token punctuation">.</span><span class="token function">fromJson</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// 吏꾪뻾瑜� �낅뜲�댄듃</span>
</span><span class="code-line"> _progress <span class="token operator">=</span> status<span class="token punctuation">.</span>progress<span class="token punctuation">;</span>
</span><span class="code-line"> onProgressUpdate<span class="token operator">?</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>_progress<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// �꾨즺��</span>
</span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>status<span class="token punctuation">.</span>isCompleted <span class="token operator">&&</span> status<span class="token punctuation">.</span>result <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> _result <span class="token operator">=</span> status<span class="token punctuation">.</span>result<span class="token punctuation">;</span>
</span><span class="code-line"> _progress <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token function">_stopPolling</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token function">_updateState</span><span class="token punctuation">(</span><span class="token class-name">PollingState</span><span class="token punctuation">.</span>completed<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> onComplete<span class="token operator">?</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>_result<span class="token operator">!</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token keyword">return</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// �ㅽ뙣��</span>
</span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>status<span class="token punctuation">.</span>isFailed<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> _error <span class="token operator">=</span> status<span class="token punctuation">.</span>error <span class="token operator">?</span><span class="token operator">?</span> <span class="token string-literal"><span class="token string">'AI �덉떆�� �앹꽦 以� �ㅻ쪟媛� 諛쒖깮�덉뒿�덈떎'</span></span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token function">_stopPolling</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token function">_updateState</span><span class="token punctuation">(</span><span class="token class-name">PollingState</span><span class="token punctuation">.</span>failed<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> onError<span class="token operator">?</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>_error<span class="token operator">!</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token keyword">return</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// 怨꾩냽 �대쭅</span>
</span><span class="code-line"> <span class="token function">print</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'�봽 Job 吏꾪뻾 以� - progress: </span><span class="token interpolation"><span class="token punctuation">${</span><span class="token expression">status<span class="token punctuation">.</span>progress</span><span class="token punctuation">}</span></span><span class="token string">%'</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">void</span> <span class="token function">_stopPolling</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> _pollingTimer<span class="token operator">?</span><span class="token punctuation">.</span><span class="token function">cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"> _pollingTimer <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p><strong>�듭떖 �ъ씤��</strong>:</p>
<ul>
<li><strong>2珥� 媛꾧꺽 �대쭅</strong>: Timer.periodic�쇰줈 �먮룞 諛섎났 (1珥덈㈃ �쒕쾭 遺��� �곕젮, 3珥덈㈃ �좎�媛� "硫덉톬��?"�섎뒗 �щ━�� �꾧퀎��)</li>
<li><strong>Progress 肄쒕갚</strong>: �쒕쾭�먯꽌 諛쏆� 吏꾪뻾瑜�(0-100)�� UI�� �꾨떖</li>
<li><strong>罹먯떆 理쒖쟻��</strong>: �대� �꾨즺�� Job�� 利됱떆 諛섑솚 (�ъ슂泥� �� �대쭅 �ㅽ궢)</li>
</ul>
<h4 id="3截뤴깵-db-schema-job-�곹깭-愿�由�"><a class="heading-anchor" href="#3截뤴깵-db-schema-job-�곹깭-愿�由�">3截뤴깵 DB Schema: Job �곹깭 愿�由�</a></h4>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token comment">// server/src/db/schema/ai-recipe-jobs.ts</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> aiRecipeJobStatusEnum <span class="token operator">=</span> <span class="token function">pgEnum</span><span class="token punctuation">(</span><span class="token string">'ai_recipe_job_status'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>
</span><span class="code-line"> <span class="token string">'pending'</span><span class="token punctuation">,</span> <span class="token comment">// �먯뿉 ��湲� 以�</span>
</span><span class="code-line"> <span class="token string">'processing'</span><span class="token punctuation">,</span> <span class="token comment">// LLM 泥섎━ 以�</span>
</span><span class="code-line"> <span class="token string">'completed'</span><span class="token punctuation">,</span> <span class="token comment">// �꾨즺 (JSON 寃�利� �꾨즺)</span>
</span><span class="code-line"> <span class="token string">'failed'</span><span class="token punctuation">,</span> <span class="token comment">// �ㅽ뙣</span>
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> aiRecipeJobs <span class="token operator">=</span> <span class="token function">pgTable</span><span class="token punctuation">(</span><span class="token string">'ai_recipe_jobs'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-line"> id<span class="token operator">:</span> <span class="token function">uuid</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">primaryKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">defaultRandom</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> userId<span class="token operator">:</span> <span class="token function">uuid</span><span class="token punctuation">(</span><span class="token string">'user_id'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">notNull</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> jobId<span class="token operator">:</span> <span class="token function">varchar</span><span class="token punctuation">(</span><span class="token string">'job_id'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> length<span class="token operator">:</span> <span class="token number">255</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">notNull</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">unique</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> status<span class="token operator">:</span> <span class="token function">aiRecipeJobStatusEnum</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">default</span><span class="token punctuation">(</span><span class="token string">'pending'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">notNull</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> requestData<span class="token operator">:</span> <span class="token function">jsonb</span><span class="token punctuation">(</span><span class="token string">'request_data'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// �붿껌 �곗씠��</span>
</span><span class="code-line"> resultData<span class="token operator">:</span> <span class="token function">jsonb</span><span class="token punctuation">(</span><span class="token string">'result_data'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// �꾩꽦�� JSON 寃곌낵</span>
</span><span class="code-line"> errorMessage<span class="token operator">:</span> <span class="token function">text</span><span class="token punctuation">(</span><span class="token string">'error_message'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> createdAt<span class="token operator">:</span> <span class="token function">timestamp</span><span class="token punctuation">(</span><span class="token string">'created_at'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">defaultNow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">notNull</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"> completedAt<span class="token operator">:</span> <span class="token function">timestamp</span><span class="token punctuation">(</span><span class="token string">'completed_at'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
<h3 id="ux-媛쒖꽑-異붿젙-吏꾪뻾瑜좊줈-�좎�-�좊ː-�뺣낫"><a class="heading-anchor" href="#ux-媛쒖꽑-異붿젙-吏꾪뻾瑜좊줈-�좎�-�좊ː-�뺣낫">UX 媛쒖꽑: 異붿젙 吏꾪뻾瑜좊줈 �좎� �좊ː �뺣낫</a></h3>
<p>留롮� �깆씠 臾댄븳 濡쒕뵫 �ㅽ뵾�덈쭔 �뚮┰�덈떎. �섏�留� Cookting�� **�됯퇏 �묐떟 �쒓컙 湲곕컲 異붿젙 吏꾪뻾瑜�(Estimated Progress)**�� �쒓났�⑸땲��.</p>
<h4 id="�쒕쾭-痢�-�쒓컙-湲곕컲-吏꾪뻾瑜�-怨꾩궛"><a class="heading-anchor" href="#�쒕쾭-痢�-�쒓컙-湲곕컲-吏꾪뻾瑜�-怨꾩궛">�쒕쾭 痢�: �쒓컙 湲곕컲 吏꾪뻾瑜� 怨꾩궛</a></h4>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token comment">// server-ai/src/modules/recipe/recipe.controller.ts</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">let</span> currentProgress <span class="token operator">=</span> <span class="token number">10</span>
</span><span class="code-line"><span class="token keyword">const</span> progressInterval <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>currentProgress <span class="token operator"><</span> <span class="token number">95</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// 1珥덈쭏�� 1-2% 利앷� (�됯퇏 45珥� �묐떟 �쒓컙 湲곕컲)</span>
</span><span class="code-line"> <span class="token keyword">const</span> increment <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span>
</span><span class="code-line"> currentProgress <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span>currentProgress <span class="token operator">+</span> increment<span class="token punctuation">,</span> <span class="token number">95</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// 1. �щ즺 遺꾩꽍 以� (10-50%)</span>
</span><span class="code-line"> <span class="token comment">// 2. �덉떆�� �앹꽦 以� (50-95%)</span>
</span><span class="code-line"> <span class="token keyword">const</span> message <span class="token operator">=</span>
</span><span class="code-line"> currentProgress <span class="token operator"><=</span> <span class="token number">50</span> <span class="token operator">?</span> <span class="token string">'�щ즺 遺꾩꽍 以�...'</span> <span class="token operator">:</span> <span class="token string">'�덉떆�� �앹꽦 以�...'</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token comment">// Job �곹깭 DB �낅뜲�댄듃</span>
</span><span class="code-line"> <span class="token keyword">await</span> <span class="token function">updateJobProgress</span><span class="token punctuation">(</span>jobId<span class="token punctuation">,</span> currentProgress<span class="token punctuation">,</span> message<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// LLM �묐떟 �꾨즺 ��</span>
</span><span class="code-line"><span class="token function">clearInterval</span><span class="token punctuation">(</span>progressInterval<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token keyword">await</span> <span class="token function">updateJobProgress</span><span class="token punctuation">(</span>jobId<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token string">'�꾨즺'</span><span class="token punctuation">)</span>
</span></code></pre>
<h4 id="�대씪�댁뼵��-痢�-吏꾪뻾瑜�-ui-諛붿씤��"><a class="heading-anchor" href="#�대씪�댁뼵��-痢�-吏꾪뻾瑜�-ui-諛붿씤��">�대씪�댁뼵�� 痢�: 吏꾪뻾瑜� UI 諛붿씤��</a></h4>
<pre class="language-dart"><code class="language-dart code-highlight"><span class="code-line"><span class="token comment">// Flutter UI�먯꽌 �쒕쾭 吏꾪뻾瑜� �쒖떆</span>
</span><span class="code-line">onProgressUpdate<span class="token punctuation">:</span> <span class="token punctuation">(</span>progress<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> _loadingProgress <span class="token operator">=</span> progress <span class="token operator">/</span> <span class="token number">100.0</span><span class="token punctuation">;</span> <span class="token comment">// 0.0 ~ 1.0</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// LinearProgressIndicator�� �ㅼ젣 媛� 諛붿씤��</span>
</span><span class="code-line"><span class="token class-name">LinearProgressIndicator</span><span class="token punctuation">(</span>
</span><span class="code-line"> value<span class="token punctuation">:</span> _loadingProgress<span class="token punctuation">,</span> <span class="token comment">// null�대㈃ 臾댄븳 濡쒕뵫, 媛믪씠 �덉쑝硫� 異붿젙 吏꾪뻾瑜�</span>
</span><span class="code-line"> backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
</span><span class="code-line"> valueColor<span class="token punctuation">:</span> <span class="token class-name">AlwaysStoppedAnimation</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">Color</span><span class="token punctuation">></span></span><span class="token punctuation">(</span>primaryColor<span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">)</span>
</span></code></pre>
<p><strong>�� "�뺥솗�� 吏꾪뻾瑜�"�� �꾨땶 "異붿젙"�멸�?</strong></p>
<p>LLM�� Inference 怨쇱젙�� 釉붾옓諛뺤뒪�낅땲��. GPT-4媛� "45% �앹꽦 �꾨즺"�쇰뒗 �뺣낫瑜� �쒓났�섏� �딆뒿�덈떎.<br>
���� <strong>"�됯퇏 45珥� �묐떟 �쒓컙"</strong> �곗씠�곕� 湲곕컲�쇰줈 �쒓컙 �먮쫫�� �곕씪 異붿젙移섎� 怨꾩궛�⑸땲��.</p>
<p><strong>�섏�留� �좎� �낆옣�먯꽌��</strong>:</p>
<ul>
<li>�� "�쇰쭏�� 湲곕떎�ㅼ빞 �섎뒗吏�" 泥닿컧 媛���</li>
<li>�� 吏꾪뻾瑜좎씠 硫덉텛硫� �� 臾몄젣 諛쒖깮 �좏샇 (媛쒕컻�� �뚮┝ �몃━嫄�)</li>
<li>�� 臾댄븳 濡쒕뵫蹂대떎 �щ━�� �덉젙媛� ��</li>
</ul>
<blockquote>
<p><strong>Engineering Honesty</strong>: "�꾨꼍�� 吏꾪뻾瑜�"�� �쎌냽�섏� �딅릺, **"�덉륫 媛��ν븳 ��湲� 寃쏀뿕"**�� �쒓났�섎뒗 寃껋씠 紐⑺몴���듬땲��.</p>
</blockquote>
<hr>
<h2 id="寃곌낵-諛�-�깃낵"><a class="heading-anchor" href="#寃곌낵-諛�-�깃낵">寃곌낵 諛� �깃낵</a></h2>
<h3 id="-�덉젙��"><a class="heading-anchor" href="#-�덉젙��">�� �덉젙��</a></h3>
<ul>
<li><strong>�섎せ�� JSON�쇰줈 �명븳 �� �щ옒��: 0嫄�</strong></li>
<li>LLM �묐떟�� 100% �꾩꽦�� �꾩뿉留� �대씪�댁뼵�몄뿉 �꾨떖</li>
<li>JSON �ㅽ궎留� 寃�利� 濡쒖쭅�� �쒕쾭�먯꽌 �쇨큵 愿�由�</li>
</ul>
<h3 id="-�명봽��"><a class="heading-anchor" href="#-�명봽��">�� �명봽��</a></h3>
<ul>
<li><strong>Vercel ���꾩븘�� �댁뒋: �꾨꼍 �닿껐</strong></li>
<li>�대씪�댁뼵�� �붿껌�� ��긽 10珥� �대궡 諛섑솚</li>
<li>湲� LLM 泥섎━�� 蹂꾨룄 Worker �쒕쾭�먯꽌 泥섎━</li>
</ul>
<h3 id="-ux"><a class="heading-anchor" href="#-ux">�� UX</a></h3>
<ul>
<li>�ㅼ떆媛� ���댄븨 �④낵�� �놁�留�, <strong>"�꾨꼍�섍쾶 �뚮뜑留곷맂 寃곌낵臾�"</strong> �� 踰덉뿉 �쒖떆</li>
<li>�쒓컙 湲곕컲 異붿젙 吏꾪뻾瑜좊줈 �좎� �좊ː �뺣낫 (臾댄븳 濡쒕뵫 ��鍮� �댄깉瑜� 30% 媛먯냼)</li>
<li>罹먯떆 硫붿빱�덉쬁�쇰줈 �숈씪 �붿껌 �� 利됱떆 �묐떟</li>
</ul>
<h3 id="-吏���-production-3媛쒖썡-湲곗�"><a class="heading-anchor" href="#-吏���-production-3媛쒖썡-湲곗�">�뱤 吏��� (Production 3媛쒖썡 湲곗�)</a></h3>
<table>
<thead>
<tr>
<th>吏���</th>
<th>�ㅽ듃由щ컢 (援ы쁽 �ㅽ뙣)</th>
<th>�대쭅 (�꾩옱)</th>
</tr>
</thead>
<tbody>
<tr>
<td>JSON �뚯떛 �ㅽ뙣��</td>
<td>~15%</td>
<td><strong>0%</strong></td>
</tr>
<tr>
<td>�됯퇏 �묐떟 �쒓컙</td>
<td>45珥� (泥닿컧)</td>
<td>40珥� (�ㅼ젣)</td>
</tr>
<tr>
<td>�� �щ옒�쒖쑉</td>
<td>�믪쓬</td>
<td><strong>0%</strong></td>
</tr>
<tr>
<td>肄붾뱶 蹂듭옟��</td>
<td>�믪쓬 (1,200 LOC)</td>
<td>��쓬 (450 LOC)</td>
</tr>
<tr>
<td>Vercel ���꾩븘��</td>
<td>諛쒖깮</td>
<td><strong>�놁쓬</strong></td>
</tr>
<tr>
<td>�� �대쭅 �붿껌 ��</td>
<td>-</td>
<td>~180留� 嫄� (�됯퇏 �덉씠�댁떆 85ms)</td>
</tr>
<tr>
<td>�좎� �댄깉瑜�</td>
<td>N/A</td>
<td>臾댄븳 濡쒕뵫 ��鍮� 30% 媛먯냼</td>
</tr>
</tbody>
</table>
<hr>
<h2 id="trade-off��-�쒓퀎"><a class="heading-anchor" href="#trade-off��-�쒓퀎">Trade-off�� �쒓퀎</a></h2>
<h3 id="�ш린��-寃�"><a class="heading-anchor" href="#�ш린��-寃�">�ш린�� 寃�</a></h3>
<ul>
<li><strong>�ㅼ떆媛� �ㅽ듃由щ컢 UX</strong>: ���먯튂�� �섏삤�� �띿뒪�� �④낵</li>
<li><strong>利됯컖�곸씤 �쇰뱶諛�</strong>: 泥� �묐떟源뚯� �됯퇏 5~10珥� ��湲�</li>
</ul>
<h3 id="�살�-寃�"><a class="heading-anchor" href="#�살�-寃�">�살� 寃�</a></h3>
<ul>
<li><strong>�곗씠�� 臾닿껐��</strong>: 100% 寃�利앸맂 JSON留� �꾨떖</li>
<li><strong>�쒖뒪�� �덉젙��</strong>: �덉쇅 泥섎━ 濡쒖쭅 理쒖냼��</li>
<li><strong>�명봽�� 鍮꾩슜 �덇컧</strong>: Vercel Enterprise �뚮옖 遺덊븘��</li>
</ul>
<h3 id="誘몃옒-媛쒖꽑-諛⑺뼢"><a class="heading-anchor" href="#誘몃옒-媛쒖꽑-諛⑺뼢">誘몃옒 媛쒖꽑 諛⑺뼢</a></h3>
<h3 id="1-redisvalkey-湲곕컲-遺꾩궛-罹먯떛"><a class="heading-anchor" href="#1-redisvalkey-湲곕컲-遺꾩궛-罹먯떛">1. Redis(Valkey) 湲곕컲 遺꾩궛 罹먯떛</a></h3>
<ul>
<li>�꾩옱: PostgreSQL�� Job �곹깭 ���� (~85ms �덉씠�댁떆)</li>
<li>媛쒖꽑: Redis濡� �대쭅 �깅뒫 理쒖쟻�� (�덉긽 ~15ms, 5諛� 媛쒖꽑)</li>
<li>TTL 1�쒓컙 �ㅼ젙�쇰줈 硫붾え由� �⑥쑉 �뺣낫</li>
</ul>
<h3 id="2-websocket-�섏씠釉뚮━��-polling-fallback"><a class="heading-anchor" href="#2-websocket-�섏씠釉뚮━��-polling-fallback">2. WebSocket �섏씠釉뚮━�� (Polling Fallback)</a></h3>
<ul>
<li>�대쭅 ���� Job �꾨즺 �� �쒕쾭�먯꽌 Push �뚮┝</li>
<li>��, JSON 寃�利앹� �쒕쾭�먯꽌 �꾨즺 �� �꾩넚 (�듭떖 �먯튃 �좎�)</li>
<li>WebSocket �곌껐 �ㅽ뙣 �� �먮룞 �대쭅 �꾪솚 (Progressive Enhancement)</li>
</ul>
<h3 id="3-�ㅻ쭏��-�대쭅-媛꾧꺽-議곗젙"><a class="heading-anchor" href="#3-�ㅻ쭏��-�대쭅-媛꾧꺽-議곗젙">3. �ㅻ쭏�� �대쭅 媛꾧꺽 議곗젙</a></h3>
<ul>
<li>珥덇린 10珥덇컙: 1珥� 媛꾧꺽 (Job �� ��湲� �쒓컙)</li>
<li>�댄썑: 2珥� 媛꾧꺽 (LLM 泥섎━ �쒓컙)</li>
<li>95% �댁긽: 0.5珥� 媛꾧꺽 (�꾨즺 �꾨컯 �� 鍮좊Ⅸ �쇰뱶諛�)</li>
</ul>
<hr>
<h2 id="留븐쓬留�-理쒖떊-湲곗닠��-��긽-�뺣떟��-�꾨땲��"><a class="heading-anchor" href="#留븐쓬留�-理쒖떊-湲곗닠��-��긽-�뺣떟��-�꾨땲��">留븐쓬留�: 理쒖떊 湲곗닠�� ��긽 �뺣떟�� �꾨땲��</a></h2>
<p>ChatGPT�� �깃났 �댄썑, �ㅽ듃由щ컢�� LLM �쒕퉬�ㅼ쓽 "�뱀뿰�� �좏깮"泥섎읆 �ш꺼議뚯뒿�덈떎.<br>
�섏�留� <strong>�쒕퉬�ㅼ쓽 紐⑹쟻</strong>�� �ㅻⅤ硫�, <strong>�꾪궎�띿쿂�� �щ씪�� �⑸땲��</strong>.</p>
<p>Cookting�먯꽌 以묒슂�� 寃껋�:</p>
<ul>
<li>�� 鍮좊Ⅸ 泥� �묐떟�� �꾨땲��</li>
<li>�� <strong>�뺥솗�� �덉떆�� �곗씠�� 援ъ“</strong></li>
</ul>
<p>LLM�� �앹꽦�� JSON�� �� �섎굹�� 愿꾪샇�쇰룄 �꾨씫�섎㈃, �깆씠 �щ옒�쒕맗�덈떎.<br>
洹� 由ъ뒪�щ� �좎��먭쾶 �꾧��� �� �놁뿀�듬땲��.</p>
<p><strong>�대쭅 �꾪궎�띿쿂�� "�ㅻ옒�� 湲곗닠"�� �꾨땲��, "臾몄젣�� 留욌뒗 湲곗닠"�댁뿀�듬땲��.</strong></p>
<hr>
<h3 id="李멸퀬-�먮즺"><a class="heading-anchor" href="#李멸퀬-�먮즺">李멸퀬 �먮즺</a></h3>
<ul>
<li><a href="https://vercel.com/docs/concepts/limits/overview">Vercel Serverless Functions Limits</a></li>
<li><a href="https://platform.openai.com/docs/api-reference/streaming">OpenAI Streaming API</a></li>
<li><a href="https://github.com/OptimalBits/bull">Bull Queue (Node.js Job Queue)</a></li>
</ul>
<hr>
<p><strong>�쒕━利� �덇퀬</strong><br>
�ㅼ쓬 湲��먯꽌�� Cookting�� **"LLM 鍮꾩슜 理쒖쟻�� �꾨왂"**�� �ㅻ０ �덉젙�낅땲��.<br>
�꾨＼�꾪듃 罹먯떛, �좏겙 �뺤텞, �섏씠釉뚮━�� 紐⑤뜽 �꾨왂 �깆쓣 怨듭쑀�섍쿋�듬땲��.</p>
<hr>
<p><em>�� 湲��� �꾩��� �섏뀲�ㅻ㈃, �꾨옒 �볤�濡� �щ윭遺꾩쓽 寃쏀뿕�� 怨듭쑀�댁＜�몄슂!<br>
"�ㅽ듃由щ컢 vs �대쭅" 以� �대뼡 �좏깮�� �섏뀲�섏슂?</em></p>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/architecture/2025-01-05-llm-polling-vs-streaming">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>yarn�� npm�쇰줈 �꾩뿭�ㅼ튂 �덉쓣 �� �낅뜲�댄듃 �섎뒗 諛⑸쾿</title>
<description><
npm update -g yarn
留뚯빟 �낃렇�덉씠�� �� �먮윭媛� �섏삩�ㅻ㈃, package.json�� 'packageManager'瑜� 吏��뺥빐二쇰㈃ �쒕떎.
]]></description>
<link>https://blog.jell.kr/posts/dev/js/tip/2024/08/06/yarn�� npm�쇰줈 �꾩뿭�ㅼ튂 �덉쓣 �� �낅뜲�댄듃 �섎뒗 諛⑸쾿</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/js/tip/2024/08/06/yarn�� npm�쇰줈 �꾩뿭�ㅼ튂 �덉쓣 �� �낅뜲�댄듃 �섎뒗 諛⑸쾿</guid>
<pubDate>Tue, 06 Aug 2024 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Dev]]></category>
<category><![CDATA[npm]]></category>
<category><![CDATA[Yarn]]></category>
<category><![CDATA[package.json]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Dev</p>
<p><strong>�쒓렇:</strong> npm, Yarn, package.json</p>
<hr/>
<h2 id="��-�묒꽦�섍쾶-�섏뿀�붽�"><a class="heading-anchor" href="#��-�묒꽦�섍쾶-�섏뿀�붽�">�� �묒꽦�섍쾶 �섏뿀�붽�</a></h2>
<p><img src="/images/dev/js/tip/2024/images/previous-version.png" alt="�댁쟾踰꾩쟾">
<img src="/images/dev/js/tip/2024/images/current-version.png" alt="理쒖떊踰꾩쟾">
npm update -g yarn</p>
<p>留뚯빟 �낃렇�덉씠�� �� �먮윭媛� �섏삩�ㅻ㈃, package.json�� 'packageManager'瑜� 吏��뺥빐二쇰㈃ �쒕떎.
<img src="/images/dev/js/tip/2024/images/package-manager.png" alt="package.json�� 'packageManager'"></p>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/js/tip/2024/08/06/yarn�� npm�쇰줈 �꾩뿭�ㅼ튂 �덉쓣 �� �낅뜲�댄듃 �섎뒗 諛⑸쾿">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>Gatsby瑜� v5濡� �낃렇�덉씠�� �� �� �섑��섎뒗 �먮윭</title>
<description><]]></description>
<link>https://blog.jell.kr/posts/dev/blog/2024/08/06/Gatsby瑜� v4�먯꽌 v5濡� �낃렇�덉씠�� �� ��</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/blog/2024/08/06/Gatsby瑜� v4�먯꽌 v5濡� �낃렇�덉씠�� �� ��</guid>
<pubDate>Tue, 06 Aug 2024 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Blog]]></category>
<category><![CDATA[Javascript]]></category>
<category><![CDATA[package.json]]></category>
<category><![CDATA[Gatsby]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Blog</p>
<p><strong>�쒓렇:</strong> Javascript, package.json, Gatsby</p>
<hr/>
<h2 id="��-�묒꽦�섍쾶-�섏뿀�붽�"><a class="heading-anchor" href="#��-�묒꽦�섍쾶-�섏뿀�붽�">�� �묒꽦�섍쾶 �섏뿀�붽�</a></h2>
<p>package.json�� �덈뒗 resolution怨� �ㅼ튂 踰꾩쟾�� 留욎떠�� �쒕떎.<br>
<a href="https://github.com/gatsbyjs/gatsby/issues/13278">Gatsby Issue #13278</a></p>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/blog/2024/08/06/Gatsby瑜� v4�먯꽌 v5濡� �낃렇�덉씠�� �� ��">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>UIViewController瑜� SwiftUI preview濡� 蹂댁뿬二쇨린</title>
<description><![CDATA[## �� �묒꽦�섍쾶 �섏뿀�붽�
洹몃룞�� �꾩뾽�쇰줈留� Swift瑜� �⑥삤硫댁꽌 紐곕옄�� �ㅼ썙�쒕� 怨듬��대낫湲� �꾪빐 �щ윭 媛뺤쓽瑜� 蹂닿퀬 �덉뒿�덈떎.
洹� 以묒뿉 SwiftUI�� �쒖씪 �� �뱀쭠 以� �섎굹�� preview瑜� UIKit�쇰줈 留뚮뱺 UIViewController�먯꽌�� 蹂댁뿬以� �� �덈떎�� 嫄� �뚭쾶 �섏뼱 肄붾뱶瑜� �묒꽦�⑸땲��.
```swift
// SwiftUI preview with UIKIt
@available(iOS 13.0.0, *)
struct ViewController_preview: PreviewProvider {
stat...]]></description>
<link>https://blog.jell.kr/posts/dev/ios/2024/01/11/UIViewController瑜� SwiftUI preview濡� 蹂댁뿬二쇨린</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/ios/2024/01/11/UIViewController瑜� SwiftUI preview濡� 蹂댁뿬二쇨린</guid>
<pubDate>Wed, 10 Jan 2024 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[iOS]]></category>
<category><![CDATA[iOS]]></category>
<category><![CDATA[UIKit]]></category>
<category><![CDATA[SwiftUI]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> iOS</p>
<p><strong>�쒓렇:</strong> iOS, UIKit, SwiftUI</p>
<hr/>
<h2 id="��-�묒꽦�섍쾶-�섏뿀�붽�"><a class="heading-anchor" href="#��-�묒꽦�섍쾶-�섏뿀�붽�">�� �묒꽦�섍쾶 �섏뿀�붽�</a></h2>
<p>洹몃룞�� �꾩뾽�쇰줈留� Swift瑜� �⑥삤硫댁꽌 紐곕옄�� �ㅼ썙�쒕� 怨듬��대낫湲� �꾪빐 �щ윭 媛뺤쓽瑜� 蹂닿퀬 �덉뒿�덈떎.<br>
洹� 以묒뿉 SwiftUI�� �쒖씪 �� �뱀쭠 以� �섎굹�� preview瑜� UIKit�쇰줈 留뚮뱺 UIViewController�먯꽌�� 蹂댁뿬以� �� �덈떎�� 嫄� �뚭쾶 �섏뼱 肄붾뱶瑜� �묒꽦�⑸땲��.</p>
<pre class="language-swift"><code class="language-swift code-highlight"><span class="code-line"><span class="token comment">// SwiftUI preview with UIKIt</span>
</span><span class="code-line"><span class="token attribute atrule">@available</span><span class="token punctuation">(</span>iOS <span class="token number">13.0</span><span class="token punctuation">.</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">*</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token keyword">struct</span> <span class="token class-name">ViewController_preview</span><span class="token punctuation">:</span> <span class="token class-name">PreviewProvider</span> <span class="token punctuation">{</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">static</span> <span class="token keyword">var</span> previews<span class="token punctuation">:</span> <span class="token keyword">some</span> <span class="token class-name">View</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token class-name">Container</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// macro with XCode 15(swift 5.9)</span>
</span><span class="code-line"><span class="token comment">// #Preview {</span>
</span><span class="code-line"><span class="token comment">// Container()</span>
</span><span class="code-line"><span class="token comment">// }</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">struct</span> <span class="token class-name">Container</span><span class="token punctuation">:</span> <span class="token class-name">UIViewControllerRepresentable</span> <span class="token punctuation">{</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">func</span> <span class="token function-definition function">makeUIViewController</span><span class="token punctuation">(</span>context<span class="token punctuation">:</span> <span class="token class-name">Context</span><span class="token punctuation">)</span> <span class="token operator">-></span> <span class="token class-name">UIViewController</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword">let</span> vc <span class="token operator">=</span> <span class="token class-name">ViewController</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token class-name">UINavigationController</span><span class="token punctuation">(</span>rootViewController<span class="token punctuation">:</span> vc<span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">func</span> <span class="token function-definition function">updateUIViewController</span><span class="token punctuation">(</span><span class="token omit keyword">_</span> uiViewController<span class="token punctuation">:</span> <span class="token class-name">UIViewController</span><span class="token punctuation">,</span> context<span class="token punctuation">:</span> <span class="token class-name">Context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"> <span class="token keyword">typealias</span> <span class="token class-name">UIViewControllerType</span> <span class="token operator">=</span> <span class="token class-name">UIViewController</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/ios/2024/01/11/UIViewController瑜� SwiftUI preview濡� 蹂댁뿬二쇨린">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>Docker-compose濡� mariadb �ㅼ튂�섍린</title>
<description><)
爰쇱졇�덈뜕 而댄벂�곕� �ㅻ옖留뚯뿉 怨꾩냽 耳쒕㈃�� Docker瑜� 蹂멸꺽�곸쑝濡� 怨듬��대킄�쇨쿋�ㅻ뒗 ��...]]></description>
<link>https://blog.jell.kr/posts/dev/docker/2023/03/30/docker-compose濡� mariadb �ㅼ튂湲�</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/docker/2023/03/30/docker-compose濡� mariadb �ㅼ튂湲�</guid>
<pubDate>Thu, 30 Mar 2023 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Docker]]></category>
<category><![CDATA[Ubuntu]]></category>
<category><![CDATA[linux]]></category>
<category><![CDATA[docker]]></category>
<category><![CDATA[docker-compose]]></category>
<category><![CDATA[Jell]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Docker</p>
<p><strong>�쒓렇:</strong> Ubuntu, linux, docker, docker-compose, Jell</p>
<hr/>
<h2 id="��-�곕뒗媛�"><a class="heading-anchor" href="#��-�곕뒗媛�">�� �곕뒗媛�</a></h2>
<p>�섎뱶�붿뒪�щ� 援먯껜�섍퀬
(<a href="https://blog.jell.kr/dev/linux/2023/02/27/%EC%9A%B0%EB%B6%84%ED%88%AC%2022.04%EB%A1%9C%20%EC%97%85%EA%B7%B8%EB%A0%88%EC%9D%B4%EB%93%9C%20%ED%95%98%EB%8D%98%20%EC%A4%91%20%EB%B0%9C%EC%83%9D%ED%95%9C%20%EC%9D%B4%EC%8A%88/">#</a>)
爰쇱졇�덈뜕 而댄벂�곕� �ㅻ옖留뚯뿉 怨꾩냽 耳쒕㈃�� Docker瑜� 蹂멸꺽�곸쑝濡� 怨듬��대킄�쇨쿋�ㅻ뒗 �앷컖�� �덉뒿�덈떎.
洹� 泥ル쾲吏몃줈, mariaDB瑜� docker-compose�� �ㅼ튂�섎뒗 �쒓컙�� 媛��몃큶�쒕떎.</p>
<h2 id="��-mariadb吏�"><a class="heading-anchor" href="#��-mariadb吏�">�� mariaDB吏�</a></h2>
<p>�붿쬁�� �댁쟾蹂대떎 DB�� ���� �좏깮�� 留롮븘�몄꽌, PostgreSQL�대굹 mongoDB瑜� �낅Т�먯꽌 �ъ슜�섎뒗 寃쎌슦瑜� �뷀엳 蹂� �� �덉뒿�덈떎.<br>
�섏�留� 留롮씠 �ъ슜�섎뒗嫄� �ъ쟾�� Oracle怨� MySQL�꾩쓣 �� �� �덉뒿�덈떎. (<a href="https://db-engines.com/en/ranking">李멸퀬</a>)<br>
Oracle�� �쇰쭏�좎� 臾대즺濡� �ъ슜�� �� �덉�留�, �꾩떎�곸쑝濡� �ъ슜�� �� �덈뒗 RBDMS�� MySQL怨� 洹� pork�� MariaDB�쇨퀬 �앷컖�⑸땲��.<br>
洹� 以�, 媛쒖씤�곸씤 �뺤떖�쇰줈(?) MariaDB瑜� �좏깮�섍쾶 �섏뿀�듬땲��.</p>
<h2 id="docker-composeyml-�ㅼ젙"><a class="heading-anchor" href="#docker-composeyml-�ㅼ젙">docker-compose.yml �ㅼ젙</a></h2>
<p>docker-compose.yml�� �몄쭛�대큶�쒕떎.</p>
<pre class="language-yaml"><code class="language-yaml code-highlight"><span class="code-line"> <span class="token key atrule">mariadb</span><span class="token punctuation">:</span>
</span><span class="code-line"> <span class="token key atrule">container_name</span><span class="token punctuation">:</span> <span class="token string">"mariadb"</span>
</span><span class="code-line"> <span class="token key atrule">image</span><span class="token punctuation">:</span> mariadb<span class="token punctuation">:</span><span class="token number">10</span>
</span><span class="code-line"> <span class="token key atrule">restart</span><span class="token punctuation">:</span> always
</span><span class="code-line"> <span class="token key atrule">ports</span><span class="token punctuation">:</span>
</span><span class="code-line"> <span class="token punctuation">-</span> 3306<span class="token punctuation">:</span><span class="token number">3306</span>
</span><span class="code-line"> <span class="token key atrule">volumes</span><span class="token punctuation">:</span>
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token string">"./mariadb/conf.d:/etc/mysql/conf.d"</span>
</span><span class="code-line"> <span class="token punctuation">-</span> <span class="token string">"./mariadb/data:/var/lib/mysql"</span>
</span><span class="code-line"> <span class="token key atrule">environment</span><span class="token punctuation">:</span>
</span><span class="code-line"> <span class="token key atrule">MARIADB_DATABASE</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>�ъ슜�� DB<span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token key atrule">MARIADB_USER</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>�ъ슜�� ID<span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token key atrule">MARIADB_PASSWORD</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>�ъ슜�� 鍮꾨�踰덊샇<span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token key atrule">MARIADB_ROOT_PASSWORD</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>留덈━�껪B 猷⑦듃�좎��� 鍮꾨�踰덊샇<span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token key atrule">restart</span><span class="token punctuation">:</span> always
</span></code></pre>
<p>docker-compose.yml�먮뒗 �대젃寃� �낅젰�섎㈃ �⑸땲��.<br>
�섏�留�..</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">��? db�� �� 留뚮뱾�덇퀬 ID�� 鍮꾨�踰덊샇�� �붾뜑�� �녿뒗�곗슂?
</span></code></pre>
<p>洹몃젃湲� �꾪빐 �곕━�� docker�� �덈뒗 mariaDB 而⑦뀒�대꼫�� 吏곸젒 �묒냽�� �꾩슂媛� �덉뒿�덈떎.<br>
�곗꽑 �� �곹깭濡� �먯떆怨�, �ㅼ튂瑜� 吏꾪뻾�섏떆硫� �⑸땲��.</p>
<h2 id="mariadb-而⑦뀒�대꼫-�ㅼ젙"><a class="heading-anchor" href="#mariadb-而⑦뀒�대꼫-�ㅼ젙">mariaDB 而⑦뀒�대꼫 �ㅼ젙</a></h2>
<p>��! �댁젣 mariaDB�� 而⑦뀒�대꼫濡� �묒냽�대큶�쒕떎.</p>
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line"><span class="token function">docker</span> <span class="token function">ps</span>
</span></code></pre>
<p><img src="/images/dev/docker/2023/03/images/docker-ps-mariadb.png" alt="mariaDB in docker">
mariaDB�� Container ID瑜� �뺤씤 ��</p>
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line"><span class="token function">docker</span> <span class="token builtin class-name">exec</span> <span class="token parameter variable">-it</span> 415f01c42344 <span class="token function">bash</span> // ID媛� 415f01c42344�� 而⑦뀒�대꼫瑜� bash濡� �묒냽�쒕떎.
</span></code></pre>
<p>Container ID瑜� �낅젰�� �� �욎씠 援щ퀎�� �뺣룄源뚯�留� �낅젰�섎㈃ �⑸땲��.<br>
��媛숈� 寃쎌슦�� �뗭㎏�먮━(�� 寃쎌슦 '415')源뚯�留� �낅젰�섎뒗 �몄엯�덈떎.<br>
�ы븯�� �묒냽�� �섍쾶 �섎㈃...</p>
<p><img src="/images/dev/docker/2023/03/images/docker-exec-mariadb.png" alt="mariaDB exec docker"></p>
<p>吏�! �묒냽�� �섍쾶 �⑸땲��.</p>
<p>�ш린�쒕��곕뒗 湲곗〈 Linux�먯꽌 mariaDB�� �ㅼ젙踰뺣�濡� 吏꾪뻾�댁＜�쒕㈃ �⑸땲��.<br>
異뷀썑 mariaDB(MySQL)�� �ㅼ젙踰뺣룄 �곸뼱蹂대룄濡� �섍쿋�듬땲�� :)</p>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/docker/2023/03/30/docker-compose濡� mariadb �ㅼ튂湲�">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>�곕텇�� 22.04濡� �낃렇�덉씠�� �섎뜕 以� 諛쒖깮�� �댁뒋</title>
<description><
媛� �섏솕�듬땲��.
## You are in emergency mode
�뺥솗�섍쾶��
```text
1. 22.04濡� �낃렇�덉씠�� �섍린 �꾪빐 �ㅼ튂瑜� 吏꾪뻾�덈뜕 �묒뾽怨�
2. ...]]></description>
<link>https://blog.jell.kr/posts/dev/linux/2023/02/27/�곕텇�� 22.04濡� �낃렇�덉씠�� �섎뜕 以� 諛쒖깮�� �댁뒋</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/linux/2023/02/27/�곕텇�� 22.04濡� �낃렇�덉씠�� �섎뜕 以� 諛쒖깮�� �댁뒋</guid>
<pubDate>Mon, 27 Feb 2023 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Dev]]></category>
<category><![CDATA[Ubuntu]]></category>
<category><![CDATA[linux]]></category>
<category><![CDATA[Jell]]></category>
<category><![CDATA[22.04]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Dev</p>
<p><strong>�쒓렇:</strong> Ubuntu, linux, Jell, 22.04</p>
<hr/>
<h2 id="��-�곕뒗媛�"><a class="heading-anchor" href="#��-�곕뒗媛�">�� �곕뒗媛�</a></h2>
<p>媛쒖씤�곸쑝濡� �ъ슜�쒖� �� 7�� �� HGST�� 8�뚮씪 �섎뱶媛� �ъ뒳 湲곷뒗 �뚮━媛� �섏꽌<br>
湲됲븯寃� 猿먮떎媛� ��泥댄뭹�� 援щℓ�댁꽌 ��린�ㅺ퀬 蹂대땲 �곕텇�� 22.04 LTS濡� �낃렇�덉씠�쒕� 沅뚯쑀�섍만��<br>
吏꾪뻾�섎떎 硫덉떠�� 由ъ뀑�� �섍퀬 蹂대땲</p>
<p><img src="/images/dev/linux/2023/02/images/you_are_in_emergency_mode.jpeg" alt="You are in emergency mode"></p>
<p>媛� �섏솕�듬땲��.</p>
<h2 id="you-are-in-emergency-mode"><a class="heading-anchor" href="#you-are-in-emergency-mode">You are in emergency mode</a></h2>
<p>�뺥솗�섍쾶��</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">1. 22.04濡� �낃렇�덉씠�� �섍린 �꾪빐 �ㅼ튂瑜� 吏꾪뻾�덈뜕 �묒뾽怨�
</span><span class="code-line">2. �섎뱶 �붿뒪�щ� ��린湲� �꾪빐 �쒓컻瑜� ��泥댄븯怨� �먮룞 留덉슫�� �ㅼ젙�� �쒓굅�섏� �딆븯�� �꾩긽
</span></code></pre>
<p>�� 寃뱀낀�� 嫄대뜲��.<br>
�닿껐 諛⑸쾿��</p>
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line"><span class="token function">sudo</span> <span class="token function">vi</span> /etc/fstab
</span></code></pre>
<p>濡� �먮룞留덉슫�몃� 愿��ν븯�� �뚯씪�� �댁뼱 �대떦 �쒕씪�대툕��<br>
�먮룞 留덉슫�몃� #�쇰줈 二쇱꽍泥섎━瑜� 癒쇱� �섎㈃ emergency mode�� �댁젣媛� �⑸땲��. (<a href="https://bsssss.tistory.com/485">異쒖쿂</a>)
洹몃━怨� 濡쒓렇�� 李쎌쓣 湲곕��� �쒓� 留덉＜ �� 寃껋�....</p>
<h2 id="oh-no-something-has-gone-wrong"><a class="heading-anchor" href="#oh-no-something-has-gone-wrong">Oh no! Something has gone wrong</a></h2>
<p><img src="/images/dev/linux/2023/02/images/oh_no_something_has_gone_wrong.png" alt="Oh no! Something has gone wrong">
...<br>
�쇱슂�� �볥컮�뚮��� 臾댁뒯 臾몄젣媛� �덈뒗吏�..
�닿껐 諛⑸쾿�� �ㅼ쓬怨� 媛숈뒿�덈떎.</p>
<p>�곗꽑 �대떦 �붾㈃�� 異쒕젰�섍퀬 �덈뒗 �곹깭�먯꽌 Ctrl + Alt + F3�� �꾨Ⅴ硫� CLI濡� �섏뼱媛�寃� �섎뒗�곗슂.<br>
�ㅼ쓬 紐낅졊�대� �낅젰�댁쨳�덈떎.</p>
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line"><span class="token function">sudo</span> <span class="token function">apt-get</span> update <span class="token operator">&&</span> <span class="token function">sudo</span> <span class="token function">apt-get</span> dist-upgrade
</span></code></pre>
<p>��</p>
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line"><span class="token function">sudo</span> <span class="token function">apt-get</span> clean <span class="token operator">&&</span> <span class="token function">sudo</span> <span class="token function">apt-get</span> autoremove <span class="token operator">&&</span> <span class="token function">sudo</span> <span class="token function">reboot</span>
</span></code></pre>
<p>(<a href="https://askubuntu.com/questions/1239025/after-upgrade-to-ubuntu-20-04-oh-no-something-went-wrong">異쒖쿂</a>)</p>
<p>�댄썑 由щ��몃� �섎㈃ �먮옒��濡� �뚯븘�ㅺ쾶 �⑸땲��.</p>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/linux/2023/02/27/�곕텇�� 22.04濡� �낃렇�덉씠�� �섎뜕 以� 諛쒖깮�� �댁뒋">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>Gatsby �낅뜲�댄듃 以묒�</title>
<description><![CDATA[紐� �� �숈븞 �낅줈�쒓� �놁뿀二�?
二꾩넚�⑸땲��(\_\_)
�쇰룄 �덉뿀怨�, �쒓� �낅줈�� �� �뱀떆�� Gatsby V3�� React 16, node 14�먯꽌
吏�湲덉� Gatsby V5, React 18, node 18�� �섏솕�붾씪援ъ슂?
�먯옉�먮텇�� �낅뜲�댄듃瑜� 洹몃쭔 �먯떊 �� �섍퀬..
�낅뜲�댄듃瑜� �쒕룄�섎떎媛�, 議곌툑 �� �뚯븘蹂닿퀬 �낅뜲�댄듃瑜� �섎뒗寃� �リ쿋�� �띠뼱�� 紐⑤몢 濡ㅻ갚�덉뒿�덈떎.
�낅뜲�댄듃�� 遺�遺꾩�, ARM �꾪궎�띿퀜 (M1, M2)瑜� �ъ슜�섎뒗 留λ턿�� �꾪빐 node-sass�먯꽌 sass濡� �꾪솚�� �뺣룄�낅땲��.
�먰븳 鍮뚮뱶�� nod...]]></description>
<link>https://blog.jell.kr/posts/notice/2022/11/09/Gatsby �낅뜲�댄듃 以묒�</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/notice/2022/11/09/Gatsby �낅뜲�댄듃 以묒�</guid>
<pubDate>Wed, 09 Nov 2022 00:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Notice]]></category>
<category><![CDATA[怨듭�]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Notice</p>
<p><strong>�쒓렇:</strong> 怨듭�</p>
<hr/>
<p>紐� �� �숈븞 �낅줈�쒓� �놁뿀二�?<br>
二꾩넚�⑸땲��(__)<br>
�쇰룄 �덉뿀怨�, �쒓� �낅줈�� �� �뱀떆�� Gatsby V3�� React 16, node 14�먯꽌<br>
吏�湲덉� Gatsby V5, React 18, node 18�� �섏솕�붾씪援ъ슂?<br>
�먯옉�먮텇�� �낅뜲�댄듃瑜� 洹몃쭔 �먯떊 �� �섍퀬..<br>
�낅뜲�댄듃瑜� �쒕룄�섎떎媛�, 議곌툑 �� �뚯븘蹂닿퀬 �낅뜲�댄듃瑜� �섎뒗寃� �リ쿋�� �띠뼱�� 紐⑤몢 濡ㅻ갚�덉뒿�덈떎.<br>
�낅뜲�댄듃�� 遺�遺꾩�, ARM �꾪궎�띿퀜 (M1, M2)瑜� �ъ슜�섎뒗 留λ턿�� �꾪빐 node-sass�먯꽌 sass濡� �꾪솚�� �뺣룄�낅땲��.<br>
�먰븳 鍮뚮뱶�� node 16�쇰줈 �섏떆�� 嫄� 沅뚯옣�쒕┰�덈떎.<br>
NVM�쇰줈 �ъ슜 �ㅼ젙�섏떆怨�, docker�깆쓣 �ъ슜�쒕떎硫� NODE_VERSION�� 16 留덉�留됱씤 16.18.0�쇰줈 怨좎젙�쒗궎�� 嫄� 沅뚯옣�쒕┰�덈떎.<br>
洹몃읆, �� 逾숆쿋�듬땲�� :)</p>
<p>異붽�濡�, gatsby-transformer-sharp瑜� �ъ슜�덈떎硫� node_modules/sharp �붾젆�좊━瑜� ��젣�섍퀬 吏꾪뻾�섏떆硫� �⑸땲�� :)</p>
<hr/>
<p><a href="https://blog.jell.kr/posts/notice/2022/11/09/Gatsby �낅뜲�댄듃 以묒�">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>2022�� �덊빐 蹂� 留롮씠 諛쏆쑝�몄슂!</title>
<description><![CDATA[2021�꾩� 肄붾줈�섍� �앸궇 以� �뚯븯�붾뜲 �꾩쭅�� 留덉뒪�щ� �곕뒗 寃� �댁깋�섎꽕��.
�� �� �대뒗 肄붾줈�섎룄 �앸굹怨� �섏떆�� �쇰룄 紐⑤몢 �� �� �섏떆湲� 鍮뺣땲��.]]></description>
<link>https://blog.jell.kr/posts/chat/2022/01/02/2022�� �덊빐 蹂� 留롮씠 諛쏆쑝�몄슂</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/chat/2022/01/02/2022�� �덊빐 蹂� 留롮씠 諛쏆쑝�몄슂</guid>
<pubDate>Sun, 02 Jan 2022 15:19:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Chat]]></category>
<category><![CDATA[Chat]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Chat</p>
<p><strong>�쒓렇:</strong> Chat</p>
<hr/>
<p>2021�꾩� 肄붾줈�섍� �앸궇 以� �뚯븯�붾뜲 �꾩쭅�� 留덉뒪�щ� �곕뒗 寃� �댁깋�섎꽕��.<br>
�� �� �대뒗 肄붾줈�섎룄 �앸굹怨� �섏떆�� �쇰룄 紐⑤몢 �� �� �섏떆湲� 鍮뺣땲��.</p>
<hr/>
<p><a href="https://blog.jell.kr/posts/chat/2022/01/02/2022�� �덊빐 蹂� 留롮씠 諛쏆쑝�몄슂">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
<item>
<title>Cocoapods 1.9.4 �댄썑 RxRealm�� �먮윭 �닿껐諛⑸쾿</title>
<description><�먯꽌
�섑��щ뜕 �먮윭�� �닿껐諛⑸쾿�낅땲��.
湲곗〈 �먮윭�� �ㅼ쓬怨� 媛숈뒿�덈떎.
```text
Undefined symbols for architecture arm64:
"_OBJC_CLASS_$_RLMNot...]]></description>
<link>https://blog.jell.kr/posts/dev/ios/2021/05/14/Cocoapods 1.9.4 �댄썑 RxRealm�� �먮윭 �닿껐諛⑸쾿</link>
<guid isPermaLink="true">https://blog.jell.kr/posts/dev/ios/2021/05/14/Cocoapods 1.9.4 �댄썑 RxRealm�� �먮윭 �닿껐諛⑸쾿</guid>
<pubDate>Fri, 14 May 2021 16:00:00 GMT</pubDate>
<dc:creator><![CDATA[Jell]]></dc:creator>
<category><![CDATA[Dev]]></category>
<category><![CDATA[媛쒕컻]]></category>
<category><![CDATA[iOS]]></category>
<category><![CDATA[Cocoapods]]></category>
<category><![CDATA[XCode]]></category>
<content:encoded><![CDATA[
<p><strong>移댄뀒怨좊━:</strong> Dev</p>
<p><strong>�쒓렇:</strong> 媛쒕컻, iOS, Cocoapods, XCode</p>
<hr/>
<p><a href="/dev/ios/2020/10/03/Cocoapods%201.9.4%EC%97%90%20%ED%98%84%EC%9E%AC%20%EB%B2%84%EA%B7%B8%EA%B0%80%20%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4/">�댁쟾 湲�</a>�먯꽌
�섑��щ뜕 �먮윭�� �닿껐諛⑸쾿�낅땲��.</p>
<p>湲곗〈 �먮윭�� �ㅼ쓬怨� 媛숈뒿�덈떎.<br>
<img src="/images/dev/ios/2021/05/images/screenshot1.png" alt="利앹긽 �ㅽ겕由곗꺑"></p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">Undefined symbols for architecture arm64:
</span><span class="code-line"> "_OBJC_CLASS_$_RLMNotificationToken", recerenced from:
</span><span class="code-line"> objc-class-ref in RxRealm.o
</span><span class="code-line">ld: symbol(s) not found for architecture arm64
</span></code></pre>
<p>�ш린�� Pods �꾨줈�앺듃�� 'RxRealm.framework'�� �뺣낫瑜� 蹂댁떆硫�
<img src="/images/dev/ios/2021/05/images/screenshot2.png" alt="RxRealm �댁쟾 �ㅽ겕由곗꺑">
�대젃寃� �� 媛�吏��� framework媛� �ы븿�섏뼱 �덉쓬�� �� �� �덉뒿�덈떎.</p>
<p>臾몄젣�� �ш린�� �쒖씪 以묒슂�� 'Realm'�� 李몄“媛� 鍮좎졇�덈떎�� 嫄대뜲��.
Realm.framework瑜� 異붽��� 以띾땲��.
<img src="/images/dev/ios/2021/05/images/screenshot3.png" alt="Realm �좏깮 �ㅽ겕由곗꺑">
<img src="/images/dev/ios/2021/05/images/screenshot4.png" alt="RxRealm �댄썑 �ㅽ겕由곗꺑"></p>
<p>�댄썑 �대┛ 諛� 鍮뚮뱶瑜� 吏꾪뻾�섏떆硫� �깃났�섎뒗 嫄� 蹂� �� �덉뒿�덈떎.</p>
<hr/>
<p><a href="https://blog.jell.kr/posts/dev/ios/2021/05/14/Cocoapods 1.9.4 �댄썑 RxRealm�� �먮윭 �닿껐諛⑸쾿">�먮Ц 蹂닿린</a></p>
]]></content:encoded>
</item>
</channel>
</rss>