<?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>짤 2025 Jell</copyright>
    <managingEditor>jellive7@gmail.com (Jell)</managingEditor>
    <webMaster>jellive7@gmail.com (Jell)</webMaster>
    <lastBuildDate>Fri, 31 Oct 2025 10:34:40 GMT</lastBuildDate>
    <pubDate>Tue, 02 Sep 2025 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>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>
<h2 id="table-of-contents"><a class="heading-anchor" href="#table-of-contents">Table of Contents</a></h2>

<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">&#x3C;</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">&#x3C;</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>
<p>| �뱀쭠     | var          | let         | const       |
| -------- | ------------ | ----------- | ----------- |
| �ㅼ퐫��   | �⑥닔 �ㅼ퐫��  | 釉붾줉 �ㅼ퐫�� | 釉붾줉 �ㅼ퐫�� |
| �ъ꽑��   | 媛���         | 遺덇���      | 遺덇���      |
| �ы븷��   | 媛���         | 媛���        | 遺덇���      |
| �몄씠�ㅽ똿 | �좎뼵留�       | �좎뼵留�      | �좎뼵留�      |
| TDZ      | �놁쓬         | �덉쓬        | �덉쓬        |
| 珥덇린媛�   | undefined    | �묎렐 遺덇�   | �묎렐 遺덇�   |
| 沅뚯옣��   | �� �ъ슜 吏��� | �� 沅뚯옣     | �� 理쒖슦��   |</p>
<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">&#x3C;</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>
<ol>
<li><strong>�몄씠�ㅽ똿</strong>: �좎뼵�� �ㅼ퐫�� 理쒖긽�⑥쑝濡� �뚯뼱�щ젮吏��� �꾩긽</li>
<li><strong>var</strong>: �⑥닔 �ㅼ퐫��, undefined濡� 珥덇린��, �ъ꽑�� 媛���</li>
<li><strong>let/const</strong>: 釉붾줉 �ㅼ퐫��, TDZ, �ъ꽑�� 遺덇�</li>
<li><strong>�⑥닔 �좎뼵��</strong>: �꾩껜媛� �몄씠�ㅽ똿��</li>
<li><strong>�⑥닔 �쒗쁽��</strong>: 蹂��섎쭔 �몄씠�ㅽ똿��</li>
</ol>
<h2 id="�ㅼ쟾-沅뚯옣�ы빆"><a class="heading-anchor" href="#�ㅼ쟾-沅뚯옣�ы빆">�ㅼ쟾 沅뚯옣�ы빆</a></h2>
<ul>
<li>�� <strong>const瑜� 湲곕낯</strong>�쇰줈 �ъ슜</li>
<li>�� �ы븷�� �꾩슂�� <strong>let</strong> �ъ슜</li>
<li>�� <strong>var�� �덈� �ъ슜�섏� �딄린</strong></li>
<li>�� 蹂��섎뒗 <strong>�ъ슜 �꾩뿉 �좎뼵</strong></li>
<li>�� <strong>釉붾줉 �ㅼ퐫��</strong> �곴레 �쒖슜</li>
</ul>
<p>�몄씠�ㅽ똿�� �댄빐�섎㈃ �덉긽移� 紐삵븳 踰꾧렇瑜� 諛⑹��섍퀬, �� �덉쟾�� 肄붾뱶瑜� �묒꽦�� �� �덉뒿�덈떎.</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>
<h2 id="table-of-contents"><a class="heading-anchor" href="#table-of-contents">Table of Contents</a></h2>

<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 &#x26;&#x26; 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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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>
<h2 id="table-of-contents"><a class="heading-anchor" href="#table-of-contents">Table of Contents</a></h2>

<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">&#x3C;&#x3C;</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">&#x26;></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>
<h2 id="table-of-contents"><a class="heading-anchor" href="#table-of-contents">Table of Contents</a></h2>

<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">&#x3C;</span>div<span class="token operator">></span>
</span><span class="code-line">      <span class="token operator">&#x3C;</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">&#x3C;</span>h2<span class="token operator">></span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token operator">&#x3C;</span><span class="token operator">/</span>h2<span class="token operator">></span>
</span><span class="code-line">      <span class="token operator">&#x3C;</span>p<span class="token operator">></span><span class="token punctuation">{</span>email<span class="token punctuation">}</span><span class="token operator">&#x3C;</span><span class="token operator">/</span>p<span class="token operator">></span>
</span><span class="code-line">      <span class="token operator">&#x3C;</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">&#x3C;</span><span class="token operator">/</span>span<span class="token operator">></span>
</span><span class="code-line">    <span class="token operator">&#x3C;</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>
<h2 id="�듭떖-�뺣━"><a class="heading-anchor" href="#�듭떖-�뺣━">�듭떖 �뺣━</a></h2>
<ol>
<li><strong>媛앹껜 援ъ“遺꾪빐</strong>: <code>const { prop } = obj</code></li>
<li><strong>諛곗뿴 援ъ“遺꾪빐</strong>: <code>const [first, second] = arr</code></li>
<li><strong>湲곕낯媛� �ㅼ젙</strong>: <code>const { prop = 'default' } = obj</code></li>
<li><strong>蹂��섎챸 蹂�寃�</strong>: <code>const { prop: newName } = obj</code></li>
<li><strong>Rest �⑦꽩</strong>: <code>const { id, ...rest } = obj</code></li>
</ol>
<p>援ъ“遺꾪빐 �좊떦�� 肄붾뱶瑜� 媛꾧껐�섍퀬 �쎄린 �쎄쾶 留뚮뱾�댁＜�� 媛뺣젰�� �꾧뎄�낅땲��. React 媛쒕컻�먯꽌 �뱁엳 �좎슜�섎ʼn, �⑥닔 �뚮씪誘명꽣�� 由ы꽩媛� 泥섎━瑜� �⑥뵮 源붾걫�섍쾶 留뚮뱾�댁쨳�덈떎.</p>
        <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>
<h2 id="table-of-contents"><a class="heading-anchor" href="#table-of-contents">Table of Contents</a></h2>

<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>蹂듭옟�� 議곌굔臾� 由ы뙥�좊쭅 | 媛앹껜 �쒖슜�쇰줈 肄붾뱶 媛��낆꽦 300% �μ긽�쒗궎湲�</title>
      <description><![CDATA[## 紐⑹감

```toc

```

## �뱀떊�� �대윴 肄붾뱶瑜� �묒꽦�� �곸씠 �덈굹��?

�щ윭遺꾩� 媛쒕컻�� �섎떎蹂대㈃ �대윴 �곹솴�� �먯＜ 留덉＜移섍쾶 �⑸땲��. �ъ슜�먯쓽 ��븷�� �곕씪 �ㅻⅨ 硫붿떆吏�瑜�
蹂댁뿬二쇨굅��, API �곹깭�� �곕씪 �곸젅�� 泥섎━瑜� �댁빞 �섍굅��, �ㅼ뼇�� 議곌굔�� �곕씪 �쒕줈 �ㅻⅨ 寃곌낵瑜�
諛섑솚�댁빞 �섎뒗 �곹솴 留먯엯�덈떎.

```javascript
// �뷀엳 蹂� �� �덈뒗 議곌굔臾� 肄붾뱶
function getStatusMessage(status) {
  if (status === 'loading') {
    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>
<h2 id="table-of-contents"><a class="heading-anchor" href="#table-of-contents">Table of Contents</a></h2>

<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 comment">// �뷀엳 蹂� �� �덈뒗 議곌굔臾� 肄붾뱶</span>
</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">if</span> <span class="token punctuation">(</span>status <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 string">'�곗씠�곕� 遺덈윭�ㅻ뒗 以묒엯�덈떎...'</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>status <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 string">'�깃났�곸쑝濡� 泥섎━�섏뿀�듬땲��!'</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>status <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 string">'�ㅻ쪟媛� 諛쒖깮�덉뒿�덈떎. �ㅼ떆 �쒕룄�댁＜�몄슂.'</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>status <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 string">'�쒖떆�� �곗씠�곌� �놁뒿�덈떎.'</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>status <span class="token operator">===</span> <span class="token string">'unauthorized'</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 string">'沅뚰븳�� �놁뒿�덈떎.'</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 string">'�� �� �녿뒗 �곹깭�낅땲��.'</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>泥섏쓬 �먯꽭 媛쒖쓽 議곌굔�� 愿쒖갖�듬땲��. �섏�留� �덈줈�� �곹깭媛� 異붽��� �뚮쭏�� if臾몄씠 湲몄뼱吏�怨�,
肄붾뱶�� �먯젏 蹂듭옟�댁쭛�덈떎. �덈줈�� 媛쒕컻�먭� �� 肄붾뱶瑜� �댄빐�섎젮硫� 紐⑤뱺 if臾몄쓣 �꾩뿉�� �꾨옒濡�
�곕씪媛��� �섍퀬, �뱀젙 �곹깭瑜� 李얠쑝�ㅻ㈃ �꾩껜 肄붾뱶瑜� �ㅼ틪�댁빞 �⑸땲��.</p>
<p>�대윴 臾몄젣�� �뚮Ц�� 留롮� 媛쒕컻�먮뱾�� 議곌굔臾� 由ы뙥�좊쭅�� 怨좊��섍쾶 �⑸땲��. �ㅻ뒛�� 媛앹껜瑜� �쒖슜�댁꽌 �대윴 蹂듭옟�� 議곌굔臾몄쓣 源붾걫�섍쾶 媛쒖꽑�섎뒗 諛⑸쾿�� �뚯븘蹂닿쿋�듬땲��.</p>
<h2 id="湲곗〈-議곌굔臾�-諛⑹떇��-�쒓퀎��"><a class="heading-anchor" href="#湲곗〈-議곌굔臾�-諛⑹떇��-�쒓퀎��">湲곗〈 議곌굔臾� 諛⑹떇�� �쒓퀎��</a></h2>
<h3 id="媛��낆꽦-臾몄젣"><a class="heading-anchor" href="#媛��낆꽦-臾몄젣">媛��낆꽦 臾몄젣</a></h3>
<p>蹂듭옟�� if-else 泥댁씤�� 肄붾뱶瑜� �댄빐�섍린 �대졄寃� 留뚮벊�덈떎:</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">getUserRole</span><span class="token punctuation">(</span><span class="token parameter">userType<span class="token punctuation">,</span> permissions<span class="token punctuation">,</span> subscription</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>userType <span class="token operator">===</span> <span class="token string">'admin'</span> <span class="token operator">&#x26;&#x26;</span> permissions<span class="token punctuation">.</span><span class="token method function property-access">includes</span><span class="token punctuation">(</span><span class="token string">'all'</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 string">'super-admin'</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>userType <span class="token operator">===</span> <span class="token string">'admin'</span> <span class="token operator">&#x26;&#x26;</span> permissions<span class="token punctuation">.</span><span class="token method function property-access">includes</span><span class="token punctuation">(</span><span class="token string">'moderate'</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 string">'admin'</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>userType <span class="token operator">===</span> <span class="token string">'user'</span> <span class="token operator">&#x26;&#x26;</span> subscription <span class="token operator">===</span> <span class="token string">'premium'</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 string">'premium-user'</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>userType <span class="token operator">===</span> <span class="token string">'user'</span> <span class="token operator">&#x26;&#x26;</span> subscription <span class="token operator">===</span> <span class="token string">'basic'</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 string">'basic-user'</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>userType <span class="token operator">===</span> <span class="token string">'guest'</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 string">'guest'</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 string">'unknown'</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>�� 肄붾뱶�먯꽌 �뱀젙 議곌굔�� 李얘굅�� �덈줈�� 議곌굔�� 異붽��섎젮硫� �꾩껜 肄붾뱶瑜� 寃��좏빐�� �⑸땲��.</p>
<h3 id="�좎�蹂댁닔-臾몄젣"><a class="heading-anchor" href="#�좎�蹂댁닔-臾몄젣">�좎�蹂댁닔 臾몄젣</a></h3>
<ul>
<li><strong>�덈줈�� 議곌굔 異붽�</strong>: 肄붾뱶 �앹뿉 �덈줈�� if臾몄쓣 異붽��댁빞 ��</li>
<li><strong>議곌굔 �섏젙</strong>: �대떦 if臾몄쓣 李얠븘�� �섏젙�댁빞 ��</li>
<li><strong>以묐났 �쒓굅</strong>: 鍮꾩듂�� �⑦꽩�� 諛섎났�� �� 由ы뙥�좊쭅�� �대젮��</li>
<li><strong>�뚯뒪��</strong>: 紐⑤뱺 議곌굔�� ���� �뚯뒪�� 耳��댁뒪 �묒꽦�� 蹂듭옟��</li>
</ul>
<h3 id="�깅뒫-臾몄젣"><a class="heading-anchor" href="#�깅뒫-臾몄젣">�깅뒫 臾몄젣</a></h3>
<p>if-else 泥댁씤�� �쒖감�곸쑝濡� �ㅽ뻾�섎�濡�, 留덉�留� 議곌굔�� �뺤씤�섎젮硫� 紐⑤뱺 �댁쟾 議곌굔�ㅼ쓣 寃��ы빐�� �⑸땲��:</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 'status-10'�� 李얠쑝�ㅻ㈃ 10踰덉쓽 鍮꾧탳 �곗궛�� �꾩슂</span>
</span><span class="code-line"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>status <span class="token operator">===</span> <span class="token string">'status-1'</span><span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> <span class="token string">'Result 1'</span>
</span><span class="code-line"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>status <span class="token operator">===</span> <span class="token string">'status-2'</span><span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> <span class="token string">'Result 2'</span>
</span><span class="code-line"><span class="token comment">// ...</span>
</span><span class="code-line"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>status <span class="token operator">===</span> <span class="token string">'status-10'</span><span class="token punctuation">)</span> <span class="token keyword control-flow">return</span> <span class="token string">'Result 10'</span> <span class="token comment">// �ш린源뚯� �ㅻ젮硫� 9踰덉쓽 �ㅽ뙣 �꾩슂</span>
</span></code></pre>
<h2 id="媛앹껜-湲곕컲-�닿껐梨�"><a class="heading-anchor" href="#媛앹껜-湲곕컲-�닿껐梨�">媛앹껜 湲곕컲 �닿껐梨�</a></h2>
<h3 id="湲곕낯�곸씤-媛앹껜-�쒖슜踰�"><a class="heading-anchor" href="#湲곕낯�곸씤-媛앹껜-�쒖슜踰�">湲곕낯�곸씤 媛앹껜 �쒖슜踰�</a></h3>
<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">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>
<h3 id="媛쒖꽑-�④낵"><a class="heading-anchor" href="#媛쒖꽑-�④낵">媛쒖꽑 �④낵</a></h3>
<ol>
<li><strong>�쒕늿�� 蹂댁씠�� 援ъ“</strong>: 紐⑤뱺 �곹깭�� 硫붿떆吏�媛� �� 怨녹뿉 �뺣━��</li>
<li><strong>O(1) �묎렐 �쒓컙</strong>: 媛앹껜 �꾨줈�쇳떚 �묎렐�� �곸닔 �쒓컙</li>
<li><strong>�ъ슫 �뺤옣</strong>: �덈줈�� �곹깭 異붽�媛� 媛꾨떒��</li>
<li><strong>紐낇솗�� �섎룄</strong>: �곗씠�곗� 濡쒖쭅�� 遺꾨━�섏뼱 �섎룄媛� 紐낇솗��</li>
</ol>
<h3 id="吏곸젒-�쒕룄�대낫湲�"><a class="heading-anchor" href="#吏곸젒-�쒕룄�대낫湲�">吏곸젒 �쒕룄�대낫湲�</a></h3>
<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">function</span> <span class="token function">performanceTest</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">const</span> iterations <span class="token operator">=</span> <span class="token number">1000000</span>
</span><span class="code-line">  <span class="token keyword">const</span> status <span class="token operator">=</span> <span class="token string">'unauthorized'</span> <span class="token comment">// 留덉�留됱뿉 �꾩튂�� �곹깭</span>
</span><span class="code-line">
</span><span class="code-line">  <span class="token comment">// if-else 諛⑹떇 痢≪젙</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">time</span><span class="token punctuation">(</span><span class="token string">'if-else'</span><span class="token punctuation">)</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">&#x3C;</span> iterations<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">getStatusMessageOld</span><span class="token punctuation">(</span>status<span class="token punctuation">)</span> <span class="token comment">// 湲곗〈 諛⑹떇</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">timeEnd</span><span class="token punctuation">(</span><span class="token string">'if-else'</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 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">'object'</span><span class="token punctuation">)</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">&#x3C;</span> iterations<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">getStatusMessage</span><span class="token punctuation">(</span>status<span class="token punctuation">)</span> <span class="token comment">// 媛쒖꽑�� 諛⑹떇</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">timeEnd</span><span class="token punctuation">(</span><span class="token string">'object'</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="�⑥닔瑜�-媛믪쑝濡�-�섎뒗-媛앹껜"><a class="heading-anchor" href="#�⑥닔瑜�-媛믪쑝濡�-�섎뒗-媛앹껜">�⑥닔瑜� 媛믪쑝濡� �섎뒗 媛앹껜</a></h3>
<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>
<h3 id="以묒꺽-媛앹껜-�쒖슜"><a class="heading-anchor" href="#以묒꺽-媛앹껜-�쒖슜">以묒꺽 媛앹껜 �쒖슜</a></h3>
<p>�� 蹂듭옟�� 議곌굔�� 泥섎━�� �뚮뒗 以묒꺽 媛앹껜瑜� �쒖슜�� �� �덉뒿�덈떎:</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</span>div<span class="token operator">></span>�� �� �녿뒗 �곹깭<span class="token operator">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</span>div<span class="token operator">></span>�� �� �녿뒗 �곹깭<span class="token operator">&#x3C;</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">&#x3C;</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">&#x3C;</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="踰ㅼ튂留덊겕-寃곌낵"><a class="heading-anchor" href="#踰ㅼ튂留덊겕-寃곌낵">踰ㅼ튂留덊겕 寃곌낵</a></h3>
<p>| 議곌굔 媛쒖닔 | if-else 諛⑹떇 | 媛앹껜 諛⑹떇 | �깅뒫 媛쒖꽑  |
| --------- | ------------ | --------- | ---------- |
| 3媛�       | 1.2ms        | 0.8ms     | 33% 鍮좊쫫   |
| 10媛�      | 4.1ms        | 0.9ms     | 355% 鍮좊쫫  |
| 50媛�      | 18.7ms       | 1.1ms     | 1600% 鍮좊쫫 |
| 100媛�     | 41.2ms       | 1.2ms     | 3333% 鍮좊쫫 |</p>
<h3 id="肄붾뱶-蹂듭옟��-鍮꾧탳"><a class="heading-anchor" href="#肄붾뱶-蹂듭옟��-鍮꾧탳">肄붾뱶 蹂듭옟�� 鍮꾧탳</a></h3>
<p>| 痢≪젙 湲곗�       | if-else 諛⑹떇 | 媛앹껜 諛⑹떇  | 媛쒖꽑 �뺣룄 |
| --------------- | ------------ | ---------- | --------- |
| 以� ��           | �믪쓬 (N*3)  | ��쓬 (N+5) | 60% 媛먯냼  |
| �쒗솚 蹂듭옟��     | O(N)         | O(1)       | ���� 媛쒖꽑 |
| 媛��낆꽦 �먯닔     | ��쓬         | �믪쓬       | 200% 媛쒖꽑 |
| �좎�蹂댁닔 �⑹씠�� | �대젮��       | �ъ�       | 300% 媛쒖꽑 |</p>
<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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</span>Error<span class="token operator">></span>
</span><span class="code-line">  empty<span class="token operator">:</span> StatusHandler<span class="token operator">&#x3C;</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">&#x3C;</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">&#x3C;</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Function</span><span class="token punctuation">&#x3C;</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>
<h3 id="�곸슜�섎㈃-醫뗭�-寃쎌슦"><a class="heading-anchor" href="#�곸슜�섎㈃-醫뗭�-寃쎌슦">�곸슜�섎㈃ 醫뗭� 寃쎌슦</a></h3>
<p>�ㅼ쓬 泥댄겕由ъ뒪�몃� �뺤씤�대낫�몄슂:</p>
<ul>
<li>[ ] <strong>議곌굔臾몄씠 3媛� �댁긽</strong> �곗냽�쇰줈 �섑��섎뒗媛�?</li>
<li>[ ] <strong>媛� 議곌굔�� 寃곌낵媛� �⑥닚�� 媛믪씠�� �⑥닔 �몄텧</strong>�멸�?</li>
<li>[ ] <strong>誘몃옒�� 議곌굔�� �� 異붽��� 媛��μ꽦</strong>�� �덈뒗媛�?</li>
<li>[ ] <strong>議곌굔�ㅼ씠 �쒕줈 諛고���</strong>�멸�?</li>
<li>[ ] <strong>議곌굔�� �먯＜ 蹂�寃쏀븯嫄곕굹 �뺤옣</strong>�댁빞 �섎뒗媛�?</li>
</ul>
<p>�� 以� 3媛� �댁긽�� �대떦�쒕떎硫� 媛앹껜 湲곕컲 �묎렐踰뺤쓣 怨좊젮�대낫�몄슂.</p>
<h3 id="�ъ슜�섏�-�딅뒗-寃껋씠-醫뗭�-寃쎌슦"><a class="heading-anchor" href="#�ъ슜�섏�-�딅뒗-寃껋씠-醫뗭�-寃쎌슦">�ъ슜�섏� �딅뒗 寃껋씠 醫뗭� 寃쎌슦</a></h3>
<ul>
<li><strong>議곌굔�� �⑥닚�섍퀬 2媛� �댄븯</strong>�� ��</li>
<li><strong>媛� 議곌굔�먯꽌 蹂듭옟�� 濡쒖쭅 泥섎━媛� �꾩슂</strong>�� ��</li>
<li><strong>議곌굔�ㅼ씠 �곹샇 �섏〈��</strong>�� ��</li>
<li><strong>議곌굔 �먮떒�� 蹂듭옟�� 怨꾩궛</strong>�� �꾩슂�� ��</li>
</ul>
<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">&#x26;&#x26;</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">&#x26;&#x26;</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">&#x26;&#x26;</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>
<h2 id="留덈Т由ы븯硫�"><a class="heading-anchor" href="#留덈Т由ы븯硫�">留덈Т由ы븯硫�</a></h2>
<p>�ㅻ뒛�� 蹂듭옟�� 議곌굔臾몄쓣 媛앹껜瑜� �쒖슜�댁꽌 源붾걫�섍쾶 由ы뙥�좊쭅�섎뒗 諛⑸쾿�� �댄렣蹂댁븯�듬땲��.
�� 湲곕쾿�� �⑥닚�� 肄붾뱶瑜� 吏㏐쾶 留뚮뱶�� 寃껋씠 �꾨땲��, <strong>媛��낆꽦</strong>, <strong>�좎�蹂댁닔��</strong>, <strong>�깅뒫</strong>
紐⑤뱺 硫댁뿉�� 媛쒖꽑�� 媛��몃떎以띾땲��.</p>
<h3 id="�듭떖-�ъ씤��-�붿빟"><a class="heading-anchor" href="#�듭떖-�ъ씤��-�붿빟">�듭떖 �ъ씤�� �붿빟</a></h3>
<ol>
<li><strong>媛앹껜 湲곕컲 議곌굔 泥섎━</strong>�� O(1) �깅뒫怨� �곗뼱�� 媛��낆꽦�� �쒓났�⑸땲��</li>
<li><strong>�⑥닔瑜� 媛믪쑝濡� �쒖슜</strong>�섎㈃ 蹂듭옟�� 濡쒖쭅�� 源붾걫�섍쾶 泥섎━�� �� �덉뒿�덈떎</li>
<li><strong>以묒꺽 媛앹껜</strong>瑜� �듯빐 �ㅼ감�� 議곌굔�� �⑥쑉�곸쑝濡� 愿�由ы븷 �� �덉뒿�덈떎</li>
<li><strong>�곸젅�� �곹솴</strong>�� �먮떒�댁꽌 �ъ슜�섎뒗 寃껋씠 以묒슂�⑸땲��</li>
</ol>
<h3 id="�ㅼ쓬-�④퀎濡�-�숈뒿�대낵-留뚰븳-�⑦꽩��"><a class="heading-anchor" href="#�ㅼ쓬-�④퀎濡�-�숈뒿�대낵-留뚰븳-�⑦꽩��">�ㅼ쓬 �④퀎濡� �숈뒿�대낵 留뚰븳 �⑦꽩��</a></h3>
<p>�� 湲곕쾿�� �듯삍�ㅻ㈃ �ㅼ쓬 �⑦꽩�ㅻ룄 �댄렣蹂댁떆湲� 諛붾엻�덈떎:</p>
<ul>
<li><strong>Strategy Pattern</strong>: �뚭퀬由ъ쬁�� 媛앹껜濡� 罹≪뒓�뷀븯�� �숈쟻�쇰줈 援먯껜</li>
<li><strong>State Pattern</strong>: 媛앹껜�� �곹깭�� �곕씪 �됰룞�� 蹂�寃쏀븯�� �⑦꽩</li>
<li><strong>Command Pattern</strong>: �붿껌�� 媛앹껜濡� 罹≪뒓�뷀븯�� �ㅽ뻾�� 吏��곗떆�ㅺ굅�� 痍⑥냼</li>
<li><strong>Factory Pattern</strong>: 媛앹껜 �앹꽦 濡쒖쭅�� 罹≪뒓�뷀븯�� �좎뿰�� �μ긽</li>
</ul>
<h3 id="吏�湲�-諛붾줈-�쒕룄�대낫�몄슂"><a class="heading-anchor" href="#吏�湲�-諛붾줈-�쒕룄�대낫�몄슂">吏�湲� 諛붾줈 �쒕룄�대낫�몄슂</a></h3>
<p>�щ윭遺꾩쓽 �꾩옱 �꾨줈�앺듃�먯꽌 蹂듭옟�� 議곌굔臾몄쓣 李얠븘蹂댁떆怨�, �ㅼ쓬 �④퀎瑜� �곕씪�대낫�몄슂:</p>
<ol>
<li><strong>議곌굔臾� �앸퀎</strong>: 3媛� �댁긽�� if-else 臾몄쓣 李얠븘蹂댁꽭��</li>
<li><strong>�⑦꽩 遺꾩꽍</strong>: 媛� 議곌굔�� �대뼡 寃곌낵瑜� 諛섑솚�섎뒗吏� �뺣━�대낫�몄슂</li>
<li><strong>媛앹껜 �ㅺ퀎</strong>: ��-媛� �띿쑝濡� 議곌굔怨� 寃곌낵瑜� 留ㅽ븨�대낫�몄슂</li>
<li><strong>由ы뙥�좊쭅 �ㅽ뻾</strong>: 湲곗〈 肄붾뱶瑜� 媛앹껜 湲곕컲�쇰줈 蹂�寃쏀빐蹂댁꽭��</li>
<li><strong>�뚯뒪�� �뺤씤</strong>: 湲곗〈 湲곕뒫�� �숈씪�섍쾶 �묐룞�섎뒗吏� 寃�利앺빐蹂댁꽭��</li>
</ol>
<p>肄붾뱶�� �� 踰� �묒꽦�섏�留� �щ윭 踰� �쏀옓�덈떎. �ㅻ뒛 諛곗슫 湲곕쾿�� �쒖슜�댁꽌 �� �쎄린 �쎄퀬
�좎�蹂댁닔�섍린 �ъ슫 肄붾뱶瑜� 留뚮뱾�대낫�몄슂. �щ윭遺꾩쓽 �숇즺 媛쒕컻�먮뱾�� 媛먯궗�섍쾶 �앷컖�� 寃껋엯�덈떎!</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

```

## 留ㅼ씪 諛섎났�섎뒗 媛쒕컻 �낅Т�� 吏�移섏뀲�섏슂?

"�� 鍮꾩듂�� 肄붾뱶瑜� �묒꽦�섍퀬 �덈꽕..."

媛쒕컻�먮씪硫� �꾧뎄�� �� 踰덉� �먭뺨蹂� �쇰줈媛먯엯�덈떎. �� ��떆 AzFlow�쇰뒗 ���뚰겕 �뚮옯�쇱쓣 媛쒕컻�섎㈃��
�섏뾾�� 諛섎났�섎뒗 CRUD �묒뾽, �앹뾾�� 肄붾뱶 由щ럭, 洹몃━怨� 踰꾧렇 �섏젙�� 吏�爾먯엳�덉뒿�덈떎.

�섏�留� 2025��, AI 媛쒕컻 �꾧뎄�ㅼ쓣 �쒕�濡� �쒖슜�섍린 �쒖옉�섎㈃�� 紐⑤뱺 寃껋씠 諛붾�뚯뿀�듬땲��.
**�ㅼ젣濡� 媛쒕컻 �앹궛�깆씠 300% �μ긽**�섏뿀怨�, �댁쟾�먮뒗 �섎（ 醫낆씪 嫄몃━�� �묒뾽�� 紐� �쒓컙 留뚯뿉
�꾨즺�� �� �덇쾶 �섏뿀�듬땲...]]></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="紐⑹감"><a class="heading-anchor" href="#紐⑹감">紐⑹감</a></h2>
<h2 id="table-of-contents"><a class="heading-anchor" href="#table-of-contents">Table of Contents</a></h2>

<h2 id="留ㅼ씪-諛섎났�섎뒗-媛쒕컻-�낅Т��-吏�移섏뀲�섏슂"><a class="heading-anchor" href="#留ㅼ씪-諛섎났�섎뒗-媛쒕컻-�낅Т��-吏�移섏뀲�섏슂">留ㅼ씪 諛섎났�섎뒗 媛쒕컻 �낅Т�� 吏�移섏뀲�섏슂?</a></h2>
<p>"�� 鍮꾩듂�� 肄붾뱶瑜� �묒꽦�섍퀬 �덈꽕..."</p>
<p>媛쒕컻�먮씪硫� �꾧뎄�� �� 踰덉� �먭뺨蹂� �쇰줈媛먯엯�덈떎. �� ��떆 AzFlow�쇰뒗 ���뚰겕 �뚮옯�쇱쓣 媛쒕컻�섎㈃��
�섏뾾�� 諛섎났�섎뒗 CRUD �묒뾽, �앹뾾�� 肄붾뱶 由щ럭, 洹몃━怨� 踰꾧렇 �섏젙�� 吏�爾먯엳�덉뒿�덈떎.</p>
<p>�섏�留� 2025��, AI 媛쒕컻 �꾧뎄�ㅼ쓣 �쒕�濡� �쒖슜�섍린 �쒖옉�섎㈃�� 紐⑤뱺 寃껋씠 諛붾�뚯뿀�듬땲��.
<strong>�ㅼ젣濡� 媛쒕컻 �앹궛�깆씠 300% �μ긽</strong>�섏뿀怨�, �댁쟾�먮뒗 �섎（ 醫낆씪 嫄몃━�� �묒뾽�� 紐� �쒓컙 留뚯뿉
�꾨즺�� �� �덇쾶 �섏뿀�듬땲��.</p>
<p>�� 湲��먯꽌�� �쒓� 吏곸젒 �ъ슜�대낯 AI 媛쒕컻 �꾧뎄�ㅼ쓽 <strong>�ㅼ쟾 �쒖슜踰�</strong>怨� <strong>援ъ껜�곸씤 �깃낵</strong>瑜�
�붿쭅�섍쾶 怨듭쑀�섍쿋�듬땲��. �대줎�곸씤 �ㅻ챸蹂대떎�� <strong>諛붾줈 �곸슜�� �� �덈뒗 �ㅻТ 媛��대뱶</strong>��
吏묒쨷�덉뒿�덈떎.</p>
<h2 id="ai-媛쒕컻-�꾧뎄-�좏깮-湲곗�---臾댁뾿��-�곗꽑�댁빞-�좉퉴"><a class="heading-anchor" href="#ai-媛쒕컻-�꾧뎄-�좏깮-湲곗�---臾댁뾿��-�곗꽑�댁빞-�좉퉴">AI 媛쒕컻 �꾧뎄 �좏깮 湲곗� - 臾댁뾿�� �곗꽑�댁빞 �좉퉴?</a></h2>
<h3 id="�꾧뎄-�좏깮-��-怨좊젮�댁빞-��-�듭떖-�붿냼��"><a class="heading-anchor" href="#�꾧뎄-�좏깮-��-怨좊젮�댁빞-��-�듭떖-�붿냼��">�꾧뎄 �좏깮 �� 怨좊젮�댁빞 �� �듭떖 �붿냼��</a></h3>
<p>AI 媛쒕컻 �꾧뎄瑜� �좏깮�� �뚮뒗 �ㅼ쓬 4媛�吏� 湲곗��� 諛섎뱶�� 怨좊젮�댁빞 �⑸땲��:</p>
<h4 id="1-�숈뒿-怨≪꽑��-湲곗슱湲�"><a class="heading-anchor" href="#1-�숈뒿-怨≪꽑��-湲곗슱湲�">1. �숈뒿 怨≪꽑�� 湲곗슱湲�</a></h4>
<ul>
<li><strong>Cursor IDE</strong>: 1-2�� �� 湲곕낯 �쒖슜 媛��� 狩먥춴狩먥춴狩�</li>
<li><strong>GitHub Copilot</strong>: 3-5�� �� �⑥쑉�� �쒖슜 媛��� 狩먥춴狩먥춴</li>
<li><strong>Claude Code</strong>: 1二쇱씪 �� 怨좉툒 �쒖슜 媛��� 狩먥춴狩�</li>
</ul>
<h4 id="2-鍮꾩슜-��鍮�-�④낵-roi"><a class="heading-anchor" href="#2-鍮꾩슜-��鍮�-�④낵-roi">2. 鍮꾩슜 ��鍮� �④낵 (ROI)</a></h4>
<p>| �꾧뎄           | �� 鍮꾩슜 | �덉긽 �쒓컙 �덉빟 | ROI       |
| -------------- | ------- | -------------- | --------- |
| Cursor IDE     | $20     | 20�쒓컙/��      | <strong>1000%</strong> |
| GitHub Copilot | $10     | 15�쒓컙/��      | <strong>1500%</strong> |
| Claude Code    | $20     | 10�쒓컙/��      | <strong>500%</strong>  |</p>
<h4 id="3-�꾨줈�앺듃-�뱀꽦蹂�-�곹빀��"><a class="heading-anchor" href="#3-�꾨줈�앺듃-�뱀꽦蹂�-�곹빀��">3. �꾨줈�앺듃 �뱀꽦蹂� �곹빀��</a></h4>
<h4 id="��洹쒕え-�꾨줈�앺듃-10紐�-��"><a class="heading-anchor" href="#��洹쒕え-�꾨줈�앺듃-10紐�-��">��洹쒕え �꾨줈�앺듃 (10紐�+ ��)</a></h4>
<ul>
<li>二� �꾧뎄: GitHub Copilot (�� �묒뾽 湲곕뒫)</li>
<li>蹂댁“ �꾧뎄: Claude Code (�꾪궎�띿쿂 由щ럭)</li>
</ul>
<h4 id="以묒냼洹쒕え-�꾨줈�앺듃-5紐�-�댄븯-��"><a class="heading-anchor" href="#以묒냼洹쒕え-�꾨줈�앺듃-5紐�-�댄븯-��">以묒냼洹쒕え �꾨줈�앺듃 (5紐� �댄븯 ��)</a></h4>
<ul>
<li>二� �꾧뎄: Cursor IDE (�ъ씤�� �붾（��)</li>
<li>蹂댁“ �꾧뎄: GitHub Copilot (肄붾뱶 �앹꽦)</li>
</ul>
<h4 id="媛쒖씤-�꾨줈�앺듃"><a class="heading-anchor" href="#媛쒖씤-�꾨줈�앺듃">媛쒖씤 �꾨줈�앺듃</a></h4>
<ul>
<li>二� �꾧뎄: Cursor IDE (�ㅼ젙 媛꾪렪��)</li>
<li>蹂댁“ �꾧뎄: Claude Code (蹂듭옟�� 濡쒖쭅 媛쒕컻)</li>
</ul>
<h2 id="cursor-ide-�ㅼ쟾-�쒖슜踰�---媛쒕컻-�섍꼍��-寃뚯엫-泥댁씤��"><a class="heading-anchor" href="#cursor-ide-�ㅼ쟾-�쒖슜踰�---媛쒕컻-�섍꼍��-寃뚯엫-泥댁씤��">Cursor IDE �ㅼ쟾 �쒖슜踰� - 媛쒕컻 �섍꼍�� 寃뚯엫 泥댁씤��</a></h2>
<h3 id="�ㅼ튂遺���-怨좉툒-�ㅼ젙源뚯�"><a class="heading-anchor" href="#�ㅼ튂遺���-怨좉툒-�ㅼ젙源뚯�">�ㅼ튂遺��� 怨좉툒 �ㅼ젙源뚯�</a></h3>
<p>Cursor IDE�� VS Code 湲곕컲�쇰줈 留뚮뱾�댁쭊 AI �ㅼ씠�곕툕 �먮뵒�곗엯�덈떎. AzFlow �꾨줈�앺듃�먯꽌
媛��� 留롮씠 �ъ슜�� �꾧뎄�닿린�� �⑸땲��.</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 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><strong>�좑툘 二쇱쓽�ы빆</strong>: 湲곗〈 VS Code �뺤옣 �꾨줈洹몃옩 以� Copilot怨� 異⑸룎�� �� �덈뒗 寃껊뱾�� 鍮꾪솢�깊솕�섏꽭��.</p>
<h4 id="2�④퀎-�꾨줈�앺듃蹂�-ai-�ㅼ젙-理쒖쟻��"><a class="heading-anchor" href="#2�④퀎-�꾨줈�앺듃蹂�-ai-�ㅼ젙-理쒖쟻��">2�④퀎: �꾨줈�앺듃蹂� AI �ㅼ젙 理쒖쟻��</a></h4>
<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>
<h4 id="3�④퀎-�ㅼ쟾-�쒖슜-�쒕굹由ъ삤"><a class="heading-anchor" href="#3�④퀎-�ㅼ쟾-�쒖슜-�쒕굹由ъ삤">3�④퀎: �ㅼ쟾 �쒖슜 �쒕굹由ъ삤</a></h4>
<h4 id="�쒕굹由ъ삤-1-而댄룷�뚰듃-�앹꽦"><a class="heading-anchor" href="#�쒕굹由ъ삤-1-而댄룷�뚰듃-�앹꽦">�쒕굹由ъ삤 1: 而댄룷�뚰듃 �앹꽦</a></h4>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">Ctrl+K �낅젰 �� "React 寃곗젣 而댄룷�뚰듃 �앹꽦: 移대뱶 �뺣낫 �낅젰, �좏슚�� 寃���, PCI DSS 以���"
</span></code></pre>
<p>�ㅼ젣 寃곌낵: 90以� 洹쒕え�� �꾩쟾�� 而댄룷�뚰듃媛� 3遺� 留뚯뿉 �앹꽦�섏뿀怨�, 蹂댁븞 �붽뎄�ы빆源뚯� 諛섏쁺�섏뿀�듬땲��.</p>
<h4 id="�쒕굹由ъ삤-2-踰꾧렇-�섏젙"><a class="heading-anchor" href="#�쒕굹由ъ삤-2-踰꾧렇-�섏젙">�쒕굹由ъ삤 2: 踰꾧렇 �섏젙</a></h4>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">Ctrl+L �낅젰 �� �먮윭 濡쒓렇 遺숈뿬�ｊ린 �� "�� �ㅻ쪟�� �먯씤怨� �닿껐 諛⑸쾿�� �ㅻ챸�댁＜�몄슂"
</span></code></pre>
<h3 id="cursor-ide��-�④꺼吏�-怨좉툒-湲곕뒫��"><a class="heading-anchor" href="#cursor-ide��-�④꺼吏�-怨좉툒-湲곕뒫��">Cursor IDE�� �④꺼吏� 怨좉툒 湲곕뒫��</a></h3>
<h4 id="composer-紐⑤뱶-�쒖슜踰�"><a class="heading-anchor" href="#composer-紐⑤뱶-�쒖슜踰�">Composer 紐⑤뱶 �쒖슜踰�</a></h4>
<p>Composer�� Cursor IDE�� �듭떖 湲곕뒫�쇰줈, �щ윭 �뚯씪�� �숈떆�� �섏젙�� �� �덉뒿�덈떎.</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>
<p><strong>�ㅼ젣 �깃낵</strong>: �먮옒 2�� 嫄몃┫ �묒뾽�� 4�쒓컙 留뚯뿉 �꾨즺�덉뒿�덈떎.</p>
<h4 id="肄붾뱶踰좎씠��-遺꾩꽍-湲곕뒫"><a class="heading-anchor" href="#肄붾뱶踰좎씠��-遺꾩꽍-湲곕뒫">肄붾뱶踰좎씠�� 遺꾩꽍 湲곕뒫</a></h4>
<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>
<h3 id="�꾨＼�꾪똿-湲곕쾿��-吏꾪솕"><a class="heading-anchor" href="#�꾨＼�꾪똿-湲곕쾿��-吏꾪솕">�꾨＼�꾪똿 湲곕쾿�� 吏꾪솕</a></h3>
<p>GitHub Copilot�� �⑥닚�� 肄붾뱶 �먮룞�꾩꽦 �꾧뎄濡쒕쭔 �ъ슜�쒕떎硫� 洹� �좎옱�μ쓽 20%��
�쒖슜�섏� 紐삵븯�� 寃껋엯�덈떎.</p>
<h4 id="�④낵�곸씤-�꾨＼�꾪똿-�⑦꽩"><a class="heading-anchor" href="#�④낵�곸씤-�꾨＼�꾪똿-�⑦꽩">�④낵�곸씤 �꾨＼�꾪똿 �⑦꽩</a></h4>
<h4 id="pattern-1-而⑦뀓�ㅽ듃-癒쇱�-�쒓났"><a class="heading-anchor" href="#pattern-1-而⑦뀓�ㅽ듃-癒쇱�-�쒓났">Pattern 1: 而⑦뀓�ㅽ듃 癒쇱� �쒓났</a></h4>
<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>
<h4 id="pattern-2-�섎룄-紐낇솗��-�쒗쁽"><a class="heading-anchor" href="#pattern-2-�섎룄-紐낇솗��-�쒗쁽">Pattern 2: �섎룄 紐낇솗�� �쒗쁽</a></h4>
<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>
<h4 id="��-�⑥쐞-copilot-�쒖슜-�꾨왂"><a class="heading-anchor" href="#��-�⑥쐞-copilot-�쒖슜-�꾨왂">�� �⑥쐞 Copilot �쒖슜 �꾨왂</a></h4>
<h4 id="肄붾뱶-由щ럭-�먮룞��"><a class="heading-anchor" href="#肄붾뱶-由щ럭-�먮룞��">肄붾뱶 由щ럭 �먮룞��</a></h4>
<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>
<h3 id="copilot-chat��-�④꺼吏�-�쒖슜踰�"><a class="heading-anchor" href="#copilot-chat��-�④꺼吏�-�쒖슜踰�">Copilot Chat�� �④꺼吏� �쒖슜踰�</a></h3>
<h4 id="�붾쾭源�-留덉뒪��-�섍린"><a class="heading-anchor" href="#�붾쾭源�-留덉뒪��-�섍린">�붾쾭源� 留덉뒪�� �섍린</a></h4>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">/explain �� 肄붾뱶媛� 硫붾え由� �꾩닔瑜� �쇱쑝�ㅻ뒗 �댁쑀瑜� �ㅻ챸�댁＜�몄슂:
</span><span class="code-line">[臾몄젣媛� �섎뒗 肄붾뱶 遺숈뿬�ｊ린]
</span></code></pre>
<p>�ㅼ젣 �ъ슜 寃곌낵: 蹂듭옟�� 硫붾え由� �꾩닔 �댁뒋瑜� 30遺� 留뚯뿉 �닿껐�덉뒿�덈떎.</p>
<h4 id="�뚯뒪��-肄붾뱶-�먮룞-�앹꽦"><a class="heading-anchor" href="#�뚯뒪��-肄붾뱶-�먮룞-�앹꽦">�뚯뒪�� 肄붾뱶 �먮룞 �앹꽦</a></h4>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">/tests PaymentService �대옒�ㅼ쓽 紐⑤뱺 硫붿꽌�쒖뿉 ���� �⑥쐞 �뚯뒪�몃� �묒꽦�댁＜�몄슂.
</span><span class="code-line">�ｌ� 耳��댁뒪�� �먮윭 �곹솴�� �ы븿�댁＜�몄슂.
</span></code></pre>
<h2 id="claude-code-�쒖슜-�꾨왂---蹂듭옟��-臾몄젣��-�닿껐��"><a class="heading-anchor" href="#claude-code-�쒖슜-�꾨왂---蹂듭옟��-臾몄젣��-�닿껐��">Claude Code �쒖슜 �꾨왂 - 蹂듭옟�� 臾몄젣�� �닿껐��</a></h2>
<h3 id="�꾪궎�띿쿂-媛쒖꽑�먯꽌-吏꾧�-諛쒗쐶"><a class="heading-anchor" href="#�꾪궎�띿쿂-媛쒖꽑�먯꽌-吏꾧�-諛쒗쐶">�꾪궎�띿쿂 媛쒖꽑�먯꽌 吏꾧� 諛쒗쐶</a></h3>
<p>Claude Code�� �⑥닚�� 肄붾뱶 �앹꽦蹂대떎�� <strong>蹂듭옟�� �쒖뒪�� �ㅺ퀎</strong>�� <strong>�꾪궎�띿쿂 媛쒖꽑</strong>�먯꽌
�곸썡�� �깅뒫�� 蹂댁엯�덈떎.</p>
<h4 id="由ы뙥�좊쭅-�꾨줈�앺듃-�щ�"><a class="heading-anchor" href="#由ы뙥�좊쭅-�꾨줈�앺듃-�щ�">由ы뙥�좊쭅 �꾨줈�앺듃 �щ�</a></h4>
<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>
<p><strong>寃곌낵</strong>: 3二� �덉긽 �묒뾽�� 1二쇱씪 留뚯뿉 �꾨즺�덉뒿�덈떎.</p>
<h4 id="�깅뒫-理쒖쟻��-而⑥꽕��"><a class="heading-anchor" href="#�깅뒫-理쒖쟻��-而⑥꽕��">�깅뒫 理쒖쟻�� 而⑥꽕��</a></h4>
<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="claude-code��-怨좉툒-湲곕뒫-�쒖슜"><a class="heading-anchor" href="#claude-code��-怨좉툒-湲곕뒫-�쒖슜">Claude Code�� 怨좉툒 湲곕뒫 �쒖슜</a></h3>
<h4 id="肄붾뱶-�덉쭏-媛먯궗"><a class="heading-anchor" href="#肄붾뱶-�덉쭏-媛먯궗">肄붾뱶 �덉쭏 媛먯궗</a></h4>
<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>
<h4 id="�꾪궎�띿쿂-臾몄꽌-�먮룞-�앹꽦"><a class="heading-anchor" href="#�꾪궎�띿쿂-臾몄꽌-�먮룞-�앹꽦">�꾪궎�띿쿂 臾몄꽌 �먮룞 �앹꽦</a></h4>
<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="�꾧뎄-媛�-�쒕꼫吏�-�④낵---113��-�섎뒗-�뚰겕�뚮줈��"><a class="heading-anchor" href="#�꾧뎄-媛�-�쒕꼫吏�-�④낵---113��-�섎뒗-�뚰겕�뚮줈��">�꾧뎄 媛� �쒕꼫吏� �④낵 - 1+1=3�� �섎뒗 �뚰겕�뚮줈��</a></h2>
<h3 id="�⑷툑-議고빀-�④퀎蹂�-�꾧뎄-�쒖슜"><a class="heading-anchor" href="#�⑷툑-議고빀-�④퀎蹂�-�꾧뎄-�쒖슜">�⑷툑 議고빀: �④퀎蹂� �꾧뎄 �쒖슜</a></h3>
<p>�ㅼ젣 媛쒕컻 怨쇱젙�먯꽌 媛� �꾧뎄瑜� �몄젣, �대뼸寃� �ъ슜�섎뒗吏�媛� 以묒슂�⑸땲��.</p>
<h4 id="1�④퀎-湲고쉷-諛�-�ㅺ퀎-claude-code"><a class="heading-anchor" href="#1�④퀎-湲고쉷-諛�-�ㅺ퀎-claude-code">1�④퀎: 湲고쉷 諛� �ㅺ퀎 (Claude Code)</a></h4>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">�덈줈�� 湲곕뒫 媛쒕컻 ��:
</span><span class="code-line">1. Claude Code濡� �붽뎄�ы빆 遺꾩꽍 諛� �ㅺ퀎
</span><span class="code-line">2. �꾪궎�띿쿂 �⑦꽩 寃곗젙
</span><span class="code-line">3. API 紐낆꽭�� �묒꽦
</span></code></pre>
<h4 id="2�④퀎-媛쒕컻-cursor-ide--github-copilot"><a class="heading-anchor" href="#2�④퀎-媛쒕컻-cursor-ide--github-copilot">2�④퀎: 媛쒕컻 (Cursor IDE + GitHub Copilot)</a></h4>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">�ㅼ젣 援ы쁽 ��:
</span><span class="code-line">1. Cursor IDE濡� 湲곕낯 援ъ“ �앹꽦
</span><span class="code-line">2. GitHub Copilot�쇰줈 �몃� 濡쒖쭅 援ы쁽
</span><span class="code-line">3. �ㅼ떆媛� 肄붾뱶 由щ럭 諛� 媛쒖꽑
</span></code></pre>
<h4 id="3�④퀎-理쒖쟻��-諛�-由ы뙥�좊쭅-claude-code"><a class="heading-anchor" href="#3�④퀎-理쒖쟻��-諛�-由ы뙥�좊쭅-claude-code">3�④퀎: 理쒖쟻�� 諛� 由ы뙥�좊쭅 (Claude Code)</a></h4>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">媛쒕컻 �꾨즺 ��:
</span><span class="code-line">1. Claude Code濡� 肄붾뱶 �덉쭏 遺꾩꽍
</span><span class="code-line">2. �깅뒫 理쒖쟻�� �쒖븞 諛쏄린
</span><span class="code-line">3. 蹂댁븞 痍⑥빟�� 寃���
</span></code></pre>
<h3 id="�ㅼ젣-�꾨줈�앺듃-�뚰겕�뚮줈��-�щ�"><a class="heading-anchor" href="#�ㅼ젣-�꾨줈�앺듃-�뚰겕�뚮줈��-�щ�">�ㅼ젣 �꾨줈�앺듃 �뚰겕�뚮줈�� �щ�</a></h3>
<h4 id="湲곕뒫-媛쒕컻-�쒓컙-鍮꾧탳"><a class="heading-anchor" href="#湲곕뒫-媛쒕컻-�쒓컙-鍮꾧탳">湲곕뒫 媛쒕컻 �쒓컙 鍮꾧탳</a></h4>
<p>| 媛쒕컻 �④퀎        | 湲곗〈 諛⑹떇  | AI �꾧뎄 �쒖슜 | �쒓컙 �⑥텞 |
| ---------------- | ---------- | ------------ | --------- |
| �붽뎄�ы빆 遺꾩꽍    | 4�쒓컙      | 1�쒓컙        | <strong>75%</strong>   |
| �ㅺ퀎 諛� 臾몄꽌��   | 8�쒓컙      | 2�쒓컙        | <strong>75%</strong>   |
| 肄붾뱶 援ы쁽        | 16�쒓컙     | 6�쒓컙        | <strong>62%</strong>   |
| �뚯뒪�� �묒꽦      | 6�쒓컙      | 2�쒓컙        | <strong>67%</strong>   |
| 肄붾뱶 由щ럭        | 4�쒓컙      | 1�쒓컙        | <strong>75%</strong>   |
| <strong>珥� 媛쒕컻 �쒓컙</strong> | <strong>38�쒓컙</strong> | <strong>12�쒓컙</strong>   | <strong>68%</strong>   |</p>
<h2 id="�깃낵-痢≪젙怨�-媛쒖꽑---�곗씠�곕줈-�뺤씤�섎뒗-�앹궛��-�μ긽"><a class="heading-anchor" href="#�깃낵-痢≪젙怨�-媛쒖꽑---�곗씠�곕줈-�뺤씤�섎뒗-�앹궛��-�μ긽">�깃낵 痢≪젙怨� 媛쒖꽑 - �곗씠�곕줈 �뺤씤�섎뒗 �앹궛�� �μ긽</a></h2>
<h3 id="�뺣웾��-�깃낵-吏���"><a class="heading-anchor" href="#�뺣웾��-�깃낵-吏���">�뺣웾�� �깃낵 吏���</a></h3>
<h4 id="媛쒕컻-�띾룄-痢≪젙"><a class="heading-anchor" href="#媛쒕컻-�띾룄-痢≪젙">媛쒕컻 �띾룄 痢≪젙</a></h4>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># Git 而ㅻ컠 遺꾩꽍�� �듯븳 �앹궛�� 痢≪젙</span>
</span><span class="code-line"><span class="token function">git</span> log <span class="token parameter variable">--since</span><span class="token operator">=</span><span class="token string">"3 months ago"</span> <span class="token parameter variable">--pretty</span><span class="token operator">=</span>format:<span class="token string">"%ad %s"</span> <span class="token parameter variable">--date</span><span class="token operator">=</span>short <span class="token operator">|</span> <span class="token function">wc</span> <span class="token parameter variable">-l</span>
</span><span class="code-line"><span class="token comment"># AI �꾧뎄 �꾩엯 �꾪썑 而ㅻ컠 鍮덈룄 鍮꾧탳</span>
</span></code></pre>
<p><strong>AzFlow �꾨줈�앺듃 �ㅼ젣 �곗씠��</strong>:</p>
<ul>
<li>AI �꾩엯 ��: 二쇰떦 �됯퇏 15媛� 而ㅻ컠</li>
<li>AI �꾩엯 ��: 二쇰떦 �됯퇏 42媛� 而ㅻ컠 (<strong>280% 利앷�</strong>)</li>
</ul>
<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">// SonarQube 硫뷀듃由� 鍮꾧탳</span>
</span><span class="code-line"><span class="token keyword">const</span> qualityMetrics <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line">  beforeAI<span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">    codeSmells<span class="token operator">:</span> <span class="token number">127</span><span class="token punctuation">,</span>
</span><span class="code-line">    technicalDebt<span class="token operator">:</span> <span class="token string">'8h 30m'</span><span class="token punctuation">,</span>
</span><span class="code-line">    coverage<span class="token operator">:</span> <span class="token string">'67%'</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">  afterAI<span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">    codeSmells<span class="token operator">:</span> <span class="token number">43</span><span class="token punctuation">,</span>
</span><span class="code-line">    technicalDebt<span class="token operator">:</span> <span class="token string">'2h 15m'</span><span class="token punctuation">,</span>
</span><span class="code-line">    coverage<span class="token operator">:</span> <span class="token string">'89%'</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></code></pre>
<h3 id="�뺤꽦��-�깃낵-�됯�"><a class="heading-anchor" href="#�뺤꽦��-�깃낵-�됯�">�뺤꽦�� �깃낵 �됯�</a></h3>
<h4 id="媛쒕컻��-留뚯”��-蹂���"><a class="heading-anchor" href="#媛쒕컻��-留뚯”��-蹂���">媛쒕컻�� 留뚯”�� 蹂���</a></h4>
<p><strong>�� �ㅻЦ 寃곌낵</strong> (5�� 留뚯젏):</p>
<ul>
<li>�낅Т 留뚯”��: 3.2 �� 4.7</li>
<li>李쎌쓽�� �낅Т 鍮꾩쨷: 2.8 �� 4.3</li>
<li>�쇨렐 鍮덈룄 媛먯냼: 二� 3�� �� 二� 1��</li>
</ul>
<h4 id="�ㅼ젣-����-�쇰뱶諛�"><a class="heading-anchor" href="#�ㅼ젣-����-�쇰뱶諛�">�ㅼ젣 ���� �쇰뱶諛�</a></h4>
<blockquote>
<p>"�댁젣 諛섎났�곸씤 肄붾뱶 �묒꽦�� �쒓컙�� 鍮쇱븮湲곗� �딄퀬, �뺣쭚 以묒슂�� 鍮꾩쫰�덉뒪 濡쒖쭅�� 吏묒쨷�� ��
�덇쾶 �섏뿀�댁슂." - �쒕땲�� 媛쒕컻�� 源��뗢뿃</p>
<p>"踰꾧렇 �섏젙�� �대젃寃� 鍮⑤씪吏� 以� 紐곕옄�듬땲��. AI媛� �먯씤�� �뺥솗�� 李얠븘二쇰땲源� �붾쾭源� �쒓컙��
90% 以꾩뿀�댁슂." - 二쇰땲�� 媛쒕컻�� �닳뿃��</p>
</blockquote>
<h3 id="吏��띿쟻��-媛쒖꽑-諛⑸쾿濡�"><a class="heading-anchor" href="#吏��띿쟻��-媛쒖꽑-諛⑸쾿濡�">吏��띿쟻�� 媛쒖꽑 諛⑸쾿濡�</a></h3>
<h4 id="二쇨컙-ai-�쒖슜-由щ럭"><a class="heading-anchor" href="#二쇨컙-ai-�쒖슜-由щ럭">二쇨컙 AI �쒖슜 由щ럭</a></h4>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> 二쇨컙 AI �꾧뎄 �쒖슜 由ы룷��</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token list punctuation">-</span> �ъ슜�� AI �꾧뎄: Cursor IDE, GitHub Copilot, Claude Code
</span><span class="code-line"><span class="token list punctuation">-</span> 二쇱슂 �깃낵: 寃곗젣 紐⑤뱢 媛쒕컻 50% �쒓컙 �⑥텞
</span><span class="code-line"><span class="token list punctuation">-</span> 媛쒖꽑��: �꾨＼�꾪똿 湲곕쾿 怨좊룄�� �꾩슂
</span><span class="code-line"><span class="token list punctuation">-</span> �ㅼ쓬 二� 紐⑺몴: �뚯뒪�� �먮룞�� AI �꾧뎄 �꾩엯
</span></code></pre>
<h2 id="�뷀븳-�ㅼ닔��-�쇳빐��-��-�⑥젙��"><a class="heading-anchor" href="#�뷀븳-�ㅼ닔��-�쇳빐��-��-�⑥젙��">�뷀븳 �ㅼ닔�� �쇳빐�� �� �⑥젙��</a></h2>
<h3 id="ai-�꾧뎄-怨쇱쓽議댁쓽-�꾪뿕��"><a class="heading-anchor" href="#ai-�꾧뎄-怨쇱쓽議댁쓽-�꾪뿕��">AI �꾧뎄 怨쇱쓽議댁쓽 �꾪뿕��</a></h3>
<h4 id="�ㅽ뙣-�щ�-1-釉붾씪�몃뱶-�섏슜"><a class="heading-anchor" href="#�ㅽ뙣-�щ�-1-釉붾씪�몃뱶-�섏슜">�ㅽ뙣 �щ� 1: 釉붾씪�몃뱶 �섏슜</a></h4>
<pre class="language-typescript"><code class="language-typescript code-highlight"><span class="code-line"><span class="token comment">// �섎せ�� �щ�: AI �쒖븞�� 寃��� �놁씠 洹몃�濡� �ъ슜</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><strong>援먰썕</strong>: AI �쒖븞�� 諛섎뱶�� 蹂댁븞 寃��좊� 嫄곗퀜�� �⑸땲��.</p>
<h4 id="�ㅽ뙣-�щ�-2-而⑦뀓�ㅽ듃-遺�議깊븳-�꾨＼�꾪똿"><a class="heading-anchor" href="#�ㅽ뙣-�щ�-2-而⑦뀓�ㅽ듃-遺�議깊븳-�꾨＼�꾪똿">�ㅽ뙣 �щ� 2: 而⑦뀓�ㅽ듃 遺�議깊븳 �꾨＼�꾪똿</a></h4>
<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>
<h3 id="��-�꾩엯-��-二쇱쓽�ы빆"><a class="heading-anchor" href="#��-�꾩엯-��-二쇱쓽�ы빆">�� �꾩엯 �� 二쇱쓽�ы빆</a></h3>
<h4 id="�먯쭊��-�꾩엯-�꾨왂"><a class="heading-anchor" href="#�먯쭊��-�꾩엯-�꾨왂">�먯쭊�� �꾩엯 �꾨왂</a></h4>
<ol>
<li>
<p><strong>媛쒖씤 �숈뒿 �④퀎</strong> (1-2二�)</p>
<ul>
<li>媛곸옄 �꾧뎄 �듯엳湲�</li>
<li>媛쒖씤 �꾨줈�앺듃�먯꽌 �ㅽ뿕</li>
</ul>
</li>
<li>
<p><strong>�뚭퇋紐� �곸슜</strong> (2-4二�)</p>
<ul>
<li>鍮꾩쨷�� 湲곕뒫遺��� �곸슜</li>
<li>�깃낵 痢≪젙 諛� �쇰뱶諛�</li>
</ul>
</li>
<li>
<p><strong>�꾨㈃ �꾩엯</strong> (4二� �댄썑)</p>
<ul>
<li>肄붾뵫 �쒖��� AI �쒖슜踰� �ы븿</li>
<li>�뺢린�곸씤 援먯쑁 諛� 媛쒖꽑</li>
</ul>
</li>
</ol>
<h2 id="�ㅼ쟾-泥댄겕由ъ뒪��---�ㅻ뒛遺���-諛붾줈-�쒖옉�섍린"><a class="heading-anchor" href="#�ㅼ쟾-泥댄겕由ъ뒪��---�ㅻ뒛遺���-諛붾줈-�쒖옉�섍린">�ㅼ쟾 泥댄겕由ъ뒪�� - �ㅻ뒛遺��� 諛붾줈 �쒖옉�섍린</a></h2>
<h3 id="媛쒖씤-媛쒕컻�먯슜-泥댄겕由ъ뒪��"><a class="heading-anchor" href="#媛쒖씤-媛쒕컻�먯슜-泥댄겕由ъ뒪��">媛쒖씤 媛쒕컻�먯슜 泥댄겕由ъ뒪��</a></h3>
<h4 id="1二쇱감-紐⑺몴"><a class="heading-anchor" href="#1二쇱감-紐⑺몴">1二쇱감 紐⑺몴</a></h4>
<ul>
<li>[ ] Cursor IDE �ㅼ튂 諛� 湲곕낯 �ㅼ젙 �꾨즺</li>
<li>[ ] GitHub Copilot 援щ룆 諛� �쒖꽦��</li>
<li>[ ] 媛꾨떒�� 而댄룷�뚰듃 3媛� AI濡� �앹꽦�대낫湲�</li>
<li>[ ] �꾨＼�꾪똿 湲곕쾿 3媛�吏� �듯엳湲�</li>
</ul>
<h4 id="2二쇱감-紐⑺몴"><a class="heading-anchor" href="#2二쇱감-紐⑺몴">2二쇱감 紐⑺몴</a></h4>
<ul>
<li>[ ] Claude Code �뚯썝媛��� 諛� 泥� �꾨줈�앺듃 遺꾩꽍</li>
<li>[ ] 湲곗〈 肄붾뱶 由ы뙥�좊쭅 1�� �섑뻾</li>
<li>[ ] AI �꾧뎄 議고빀 �뚰겕�뚮줈�� 援ъ텞</li>
<li>[ ] �앹궛�� �μ긽 �뺣웾 痢≪젙 �쒖옉</li>
</ul>
<h4 id="1媛쒖썡-紐⑺몴"><a class="heading-anchor" href="#1媛쒖썡-紐⑺몴">1媛쒖썡 紐⑺몴</a></h4>
<ul>
<li>[ ] 媛쒕컻 �띾룄 50% �댁긽 �μ긽 �ъ꽦</li>
<li>[ ] ���먮뱾怨� AI �쒖슜 寃쏀뿕 怨듭쑀</li>
<li>[ ] �꾨줈�앺듃�� AI �꾧뎄 媛��대뱶�쇱씤 �섎┰</li>
<li>[ ] 李⑥꽭�� AI �꾧뎄 由ъ꽌移� �쒖옉</li>
</ul>
<h3 id="��-由щ뜑��-泥댄겕由ъ뒪��"><a class="heading-anchor" href="#��-由щ뜑��-泥댄겕由ъ뒪��">�� 由щ뜑�� 泥댄겕由ъ뒪��</a></h3>
<h4 id="�꾩엯-以�鍮�-�④퀎"><a class="heading-anchor" href="#�꾩엯-以�鍮�-�④퀎">�꾩엯 以�鍮� �④퀎</a></h4>
<ul>
<li>[ ] AI �꾧뎄 �덉궛 �뺣낫 (�� ���� �� 횞 $50)</li>
<li>[ ] 蹂댁븞 �뺤콉 寃��� (肄붾뱶 �몃� �꾩넚 �덉슜 踰붿쐞)</li>
<li>[ ] �쇱씠�좎뒪 援щℓ 諛� �� 怨꾩젙 �ㅼ젙</li>
<li>[ ] 珥덇린 援먯쑁 怨꾪쉷 �섎┰</li>
</ul>
<h4 id="�꾩엯-�ㅽ뻾-�④퀎"><a class="heading-anchor" href="#�꾩엯-�ㅽ뻾-�④퀎">�꾩엯 �ㅽ뻾 �④퀎</a></h4>
<ul>
<li>[ ] �뚯씪�� �꾨줈�앺듃 �좎젙</li>
<li>[ ] 二쇨컙 吏꾪뻾�곹솴 由щ럭 誘명똿 �ㅼ젙</li>
<li>[ ] �깃낵 痢≪젙 吏��� �뺤쓽</li>
<li>[ ] �� �� AI �꾨Ц媛� �묒꽦</li>
</ul>
<h2 id="faq---�먯＜-臾삳뒗-吏덈Ц��"><a class="heading-anchor" href="#faq---�먯＜-臾삳뒗-吏덈Ц��">FAQ - �먯＜ 臾삳뒗 吏덈Ц��</a></h2>
<h3 id="q1-ai-�꾧뎄-�ъ슜-��-肄붾뱶-蹂댁븞��-�대뼸寃�-蹂댁옣�섎굹��"><a class="heading-anchor" href="#q1-ai-�꾧뎄-�ъ슜-��-肄붾뱶-蹂댁븞��-�대뼸寃�-蹂댁옣�섎굹��">Q1: AI �꾧뎄 �ъ슜 �� 肄붾뱶 蹂댁븞�� �대뼸寃� 蹂댁옣�섎굹��?</a></h3>
<p><strong>A</strong>: �⑦봽�덈��� 紐⑤뜽�� �ъ슜�섍굅��, 湲곗뾽�� �뚮옖�먯꽌 �쒓났�섎뒗 肄붾뱶 寃⑸━ 湲곕뒫��
�쒖슜�섏꽭��. AzFlow�먯꽌�� 誘쇨컧�� 肄붾뱶�� 濡쒖뺄�먯꽌留� 泥섎━�섍퀬, �쇰컲�곸씤 鍮꾩쫰�덉뒪 濡쒖쭅留�
AI �꾧뎄瑜� �ъ슜�덉뒿�덈떎.</p>
<h3 id="q2-二쇰땲��-媛쒕컻�먮룄-ai-�꾧뎄瑜�-�④낵�곸쑝濡�-�ъ슜��-��-�덈굹��"><a class="heading-anchor" href="#q2-二쇰땲��-媛쒕컻�먮룄-ai-�꾧뎄瑜�-�④낵�곸쑝濡�-�ъ슜��-��-�덈굹��">Q2: 二쇰땲�� 媛쒕컻�먮룄 AI �꾧뎄瑜� �④낵�곸쑝濡� �ъ슜�� �� �덈굹��?</a></h3>
<p><strong>A</strong>: �ㅽ엳�� 二쇰땲�� 媛쒕컻�먯뿉寃� �� �꾩��� �⑸땲��. 湲곕낯�곸씤 肄붾뵫 �⑦꽩�� 鍮좊Ⅴ寃� �숈뒿�� ��
�덇퀬, �쒕땲�� 媛쒕컻�먯쓽 肄붾뱶 由щ럭瑜� �듯빐 AI �앹꽦 肄붾뱶�� �덉쭏�� �μ긽�쒗궗 �� �덉뒿�덈떎.</p>
<h3 id="q3-��-鍮꾩슜��-遺��댁뒪�ъ슫��-臾대즺-���덉�-�녿굹��"><a class="heading-anchor" href="#q3-��-鍮꾩슜��-遺��댁뒪�ъ슫��-臾대즺-���덉�-�녿굹��">Q3: �� 鍮꾩슜�� 遺��댁뒪�ъ슫��, 臾대즺 ���덉� �녿굹��?</a></h3>
<p><strong>A</strong>:</p>
<ul>
<li><strong>臾대즺 �듭뀡</strong>: GitHub Copilot (�숈깮/�ㅽ뵂�뚯뒪), Cursor IDE (湲곕낯 �뚮옖)</li>
<li><strong>�덉빟 ��</strong>: �� �쇱씠�좎뒪濡� �좎씤 諛쏄린, �곌컙 寃곗젣濡� 20% �덉빟</li>
</ul>
<h3 id="q4-ai-�꾧뎄-�뚮Ц��-媛쒕컻-�ㅽ궗��-�댄솕�좉퉴-嫄깆젙�⑸땲��"><a class="heading-anchor" href="#q4-ai-�꾧뎄-�뚮Ц��-媛쒕컻-�ㅽ궗��-�댄솕�좉퉴-嫄깆젙�⑸땲��">Q4: AI �꾧뎄 �뚮Ц�� 媛쒕컻 �ㅽ궗�� �댄솕�좉퉴 嫄깆젙�⑸땲��</a></h3>
<p><strong>A</strong>: �ㅼ젣濡쒕뒗 諛섎��낅땲��. 諛섎났�곸씤 �묒뾽�먯꽌 �대갑�섏뼱 <strong>�� 怨좊룄�붾맂 �꾪궎�띿쿂 �ㅺ퀎</strong>��
<strong>鍮꾩쫰�덉뒪 濡쒖쭅</strong>�� 吏묒쨷�� �� �덇쾶 �⑸땲��. 留덉튂 怨꾩궛湲곌� �섑븰�먯쓽 �λ젰�� �댄솕�쒗궎吏� �딅뒗
寃껉낵 媛숈뒿�덈떎.</p>
<h2 id="�ㅼ쓬-�됰룞-怨꾪쉷---吏�湲�-�쒖옉�섏꽭��"><a class="heading-anchor" href="#�ㅼ쓬-�됰룞-怨꾪쉷---吏�湲�-�쒖옉�섏꽭��">�ㅼ쓬 �됰룞 怨꾪쉷 - 吏�湲� �쒖옉�섏꽭��</a></h2>
<h3 id="�ㅻ뒛-��-��-�덈뒗-寃껊뱾"><a class="heading-anchor" href="#�ㅻ뒛-��-��-�덈뒗-寃껊뱾">�ㅻ뒛 �� �� �덈뒗 寃껊뱾</a></h3>
<ol>
<li>
<p><strong>Cursor IDE �ㅼ튂�섍린</strong> (15遺�)</p>
<ul>
<li><a href="https://cursor.com">怨듭떇 �ъ씠��</a>�먯꽌 �ㅼ슫濡쒕뱶</li>
<li>湲곗〈 VS Code �ㅼ젙 媛��몄삤湲�</li>
<li>泥� 踰덉㎏ AI 肄붾뱶 �앹꽦 �쒕룄</li>
</ul>
</li>
<li>
<p><strong>GitHub Copilot 援щ룆�섍린</strong> (5遺�)</p>
<ul>
<li>GitHub 怨꾩젙�먯꽌 Copilot �쒖꽦��</li>
<li>VS Code �먮뒗 Cursor�먯꽌 �뺤옣 �꾨줈洹몃옩 �ㅼ튂</li>
</ul>
</li>
<li>
<p><strong>泥� 踰덉㎏ AI �꾨＼�꾪듃 �묒꽦�섍린</strong> (10遺�)</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">"React濡� �� �� 紐⑸줉 而댄룷�뚰듃瑜� 留뚮뱾�댁＜�몄슂.
</span><span class="code-line">異붽�, ��젣, �꾨즺 �쒖떆 湲곕뒫�� �꾩슂�⑸땲��."
</span></code></pre>
</li>
</ol>
<h3 id="�대쾲-二�-�덉뿉-�대낵-寃껊뱾"><a class="heading-anchor" href="#�대쾲-二�-�덉뿉-�대낵-寃껊뱾">�대쾲 二� �덉뿉 �대낵 寃껊뱾</a></h3>
<ul>
<li>[ ] 湲곗〈 �꾨줈�앺듃�먯꽌 AI �꾧뎄濡� 由ы뙥�좊쭅 �쒕룄</li>
<li>[ ] �숇즺�ㅺ낵 AI �꾧뎄 寃쏀뿕 怨듭쑀</li>
<li>[ ] �� Slack�� AI �꾧뎄 梨꾨꼸 媛쒖꽕</li>
<li>[ ] �ㅼ쓬 �ㅽ봽由고듃�� AI �쒖슜 怨꾪쉷 �ы븿</li>
</ul>
<h3 id="��-��-��-湲곕���-��-�덈뒗-蹂���"><a class="heading-anchor" href="#��-��-��-湲곕���-��-�덈뒗-蹂���">�� �� �� 湲곕��� �� �덈뒗 蹂���</a></h3>
<ul>
<li>媛쒕컻 �띾룄 <strong>2-3諛� �μ긽</strong></li>
<li>諛섎났 �묒뾽 �ㅽ듃�덉뒪 <strong>90% 媛먯냼</strong></li>
<li>李쎌쓽�� 臾몄젣 �닿껐�� <strong>�� 留롮� �쒓컙</strong> �ъ옄</li>
<li>�� �꾩껜 �앹궛�� <strong>���� �μ긽</strong></li>
</ul>
<h2 id="留븐쓬留�---ai��-�④퍡�섎뒗-媛쒕컻��-誘몃옒"><a class="heading-anchor" href="#留븐쓬留�---ai��-�④퍡�섎뒗-媛쒕컻��-誘몃옒">留븐쓬留� - AI�� �④퍡�섎뒗 媛쒕컻�� 誘몃옒</a></h2>
<p>2025�꾩� <strong>AI �ㅼ씠�곕툕 媛쒕컻��</strong>媛� �섎뒓�� 留덈뒓�먯쓽 遺꾧린�먯엯�덈떎.</p>
<p>AzFlow �꾨줈�앺듃瑜� �듯빐 寃쏀뿕�� 諛붾줈��, AI �꾧뎄�� �⑥닚�� 肄붾뵫�� �꾩�二쇰뒗 蹂댁“ �꾧뎄媛�
�꾨떃�덈떎. <strong>媛쒕컻�먯쓽 �ш퀬 怨쇱젙 �먯껜瑜� �뺤옣</strong>�쒖폒二쇰뒗 �덈줈�� �숇컲�먯엯�덈떎.</p>
<p>以묒슂�� 寃껋� AI�먭쾶 紐⑤뱺 寃껋쓣 留↔린�� 寃껋씠 �꾨땲��, <strong>AI�� 媛뺤젏怨� �멸컙�� 李쎌쓽�깆쓣 寃고빀</strong>�섎뒗
寃껋엯�덈떎. AI媛� 諛섎났�곸씤 �묒뾽�� 泥섎━�섎뒗 �숈븞, �곕━�� �� �� 洹몃┝�� 洹몃━怨� �곸떊�곸씤
�붾（�섏쓣 留뚮뱾�대궪 �� �덉뒿�덈떎.</p>
<p><strong>吏�湲� �쒖옉�섏꽭��.</strong> �� �� ��, 遺꾨챸�� "�� �댁젣�� �쒖옉�덉쓣源�?"�쇨퀬 �앷컖�섍쾶 �� 寃껋엯�덈떎.</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>
<li><a href="https://discord.gg/ai-developers">AI 媛쒕컻�� 而ㅻ��덊떚</a></li>
</ul>
<h3 id="寃쏀뿕-怨듭쑀�섍린"><a class="heading-anchor" href="#寃쏀뿕-怨듭쑀�섍린">寃쏀뿕 怨듭쑀�섍린</a></h3>
<p>�� 湲��� �쎄퀬 AI 媛쒕컻 �꾧뎄瑜� �ъ슜�대낫�⑤떎硫�, �볤�濡� 寃쏀뿕�� 怨듭쑀�� 二쇱꽭��! �뱁엳 �ㅼ쓬怨�
媛숈� �댁슜�ㅼ씠 沅곴툑�⑸땲��:</p>
<ul>
<li>�대뼡 �꾧뎄媛� 媛��� �좎슜�덈굹��?</li>
<li>�덉긽怨� �ㅻⅨ 遺�遺꾩씠 �덉뿀�섏슂?</li>
<li>�� �꾩엯 �� �대젮���� �놁뿀�섏슂?</li>
<li>�앹궛�� �μ긽�� �대뼸寃� 痢≪젙�섍퀬 怨꾩떊媛���?</li>
</ul>
<p>�④퍡 諛곗슦怨� �깆옣�섎뒗 媛쒕컻�� 而ㅻ��덊떚瑜� 留뚮뱾�� �섍���! ��</p>
<hr>
<p><em>�� 湲��� �꾩��� �섏뀲�ㅻ㈃ 狩먲툘 遺곷쭏�ы븯�쒓퀬, �숇즺 媛쒕컻�먮뱾怨쇰룄 怨듭쑀�� 二쇱꽭��.
AI �쒕��� 媛쒕컻�먮줈 �④퍡 �깆옣�� �섍���!</em></p>
        <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瑜� �쒕�濡� �ъ슜�댁빞 �좉퉴?

�⑥닚�� �명꽣�섏씠�� 紐� 媛� �뺤쓽�섍퀬 `any`瑜� �⑤컻�섎뒗 寃껊쭔�쇰줈�� 吏꾩젙�� ���� �덉쟾�깆쓣 �살쓣 �� �놁뒿�덈떎.

```typescript
// �� �대윴 肄붾뱶�� �덉쟾�섏� �딆뒿�덈떎
function getUser(data: any): User {
  return data
}
```

## ���� 媛��쒕줈 �고��� �덉쟾�� �뺣낫

### �ъ슜�� �뺤쓽 ���� 媛���

```typescript
interface User {
  id: number
  name...]]></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="紐⑹감"><a class="heading-anchor" href="#紐⑹감">紐⑹감</a></h2>
<h2 id="table-of-contents"><a class="heading-anchor" href="#table-of-contents">Table of Contents</a></h2>

<h2 id="��-typescript瑜�-�쒕�濡�-�ъ슜�댁빞-�좉퉴"><a class="heading-anchor" href="#��-typescript瑜�-�쒕�濡�-�ъ슜�댁빞-�좉퉴">�� TypeScript瑜� �쒕�濡� �ъ슜�댁빞 �좉퉴?</a></h2>
<p>�⑥닚�� �명꽣�섏씠�� 紐� 媛� �뺤쓽�섍퀬 <code>any</code>瑜� �⑤컻�섎뒗 寃껊쭔�쇰줈�� 吏꾩젙�� ���� �덉쟾�깆쓣 �살쓣 �� �놁뒿�덈떎.</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">&#x26;&#x26;</span>
</span><span class="code-line">    obj <span class="token operator">!==</span> <span class="token keyword">null</span> <span class="token operator">&#x26;&#x26;</span>
</span><span class="code-line">    <span class="token string">'id'</span> <span class="token keyword">in</span> obj <span class="token operator">&#x26;&#x26;</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">&#x26;&#x26;</span>
</span><span class="code-line">    <span class="token string">'name'</span> <span class="token keyword">in</span> obj <span class="token operator">&#x26;&#x26;</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">&#x26;&#x26;</span>
</span><span class="code-line">    <span class="token string">'email'</span> <span class="token keyword">in</span> obj <span class="token operator">&#x26;&#x26;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</span>div<span class="token operator">></span>
</span><span class="code-line">      <span class="token operator">&#x3C;</span>h2<span class="token operator">></span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token operator">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x3C;</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">&#x26;&#x26;</span> data <span class="token operator">!==</span> <span class="token keyword">null</span> <span class="token operator">&#x26;&#x26;</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>
<h2 id="�듭떖-�뺣━"><a class="heading-anchor" href="#�듭떖-�뺣━">�듭떖 �뺣━</a></h2>
<ol>
<li><strong>���� 媛���</strong>濡� �고��� �덉쟾�� �뺣낫</li>
<li><strong>�먮퀎 �좊땲��</strong>�쇰줈 ���� 醫곹엳湲�</li>
<li><strong>�쒕꽕由�</strong>�쇰줈 �ъ궗�� 媛��ν븳 肄붾뱶</li>
<li><strong>�좏떥由ы떚 ����</strong> �곴레 �쒖슜</li>
<li><strong>any ���� unknown</strong> �ъ슜</li>
<li><strong>strict 紐⑤뱶</strong> �쒖꽦��</li>
</ol>
<p>TypeScript瑜� �쒕�濡� �ъ슜�섎㈃ �고��� �먮윭瑜� �ш쾶 以꾩씠怨�, �� �덉쟾�섍퀬 �좎�蹂댁닔�섍린 �ъ슫 肄붾뱶瑜� �묒꽦�� �� �덉뒿�덈떎.</p>
        <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濡� 留덉씠洹몃젅�댁뀡�� �꾨즺�덉뒿�덈떎. ...]]></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>媛쒕컻�먮씪硫� �꾧뎄�� �� 踰덉��� 寃쏀뿕�섎뒗 �쒓컙�� �덉뒿�덈떎. "�� 湲곗닠�� �� 醫뗭븘 蹂댁씠�붾뜲?" �섎뒗 �앷컖. �� ��떆 洹몃윴 �쒓컙�� 留욎씠�덉뒿�덈떎.</p>
<p>2�꾧컙 �덉젙�곸쑝濡� �댁쁺�섎뜕 Gatsby 湲곕컲 釉붾줈洹몃� 蹂대ʼn 臾몃뱷 �앷컖�덉뒿�덈떎.
"Next.js媛� �붿쬁 二쇰ぉ諛쏄퀬 �덇퀬, App Router�� 異쒖떆�섏뿀�붾뜲, �� 紐⑤뜕�섍퀬 �깅뒫�� 醫뗭쓣 寃� 媛숇떎."</p>
<p>洹몃젃寃� �쒖옉�� 留덉씠洹몃젅�댁뀡�� �ъ젙. 泥섏쓬�먮뒗 留됰쭑�덉�留�, 泥닿퀎�곸씤 �묎렐怨� 瑗쇨세�� 以�鍮꾨� �듯빐
�깃났�곸쑝濡� Next.js 14濡� 留덉씠洹몃젅�댁뀡�� �꾨즺�덉뒿�덈떎. draft �쒖뒪�쒓낵 蹂듭옟�� 留덊겕�ㅼ슫 泥섎━源뚯� 紐⑤몢 援ы쁽��
�꾩쟾�� �깃났 �щ�瑜� 怨듭쑀�섍퀬�� �⑸땲��.</p>
<h2 id="table-of-contents"><a class="heading-anchor" href="#table-of-contents">Table of Contents</a></h2>

<h2 id="��-留덉씠洹몃젅�댁뀡��-寃곗떖�덈뒗媛�"><a class="heading-anchor" href="#��-留덉씠洹몃젅�댁뀡��-寃곗떖�덈뒗媛�">�� 留덉씠洹몃젅�댁뀡�� 寃곗떖�덈뒗媛�</a></h2>
<h3 id="gatsby��-�꾩돩��-�먮뱾"><a class="heading-anchor" href="#gatsby��-�꾩돩��-�먮뱾">Gatsby�� �꾩돩�� �먮뱾</a></h3>
<h4 id="1-臾닿굅��-媛쒕컻-�섍꼍"><a class="heading-anchor" href="#1-臾닿굅��-媛쒕컻-�섍꼍">1. 臾닿굅�� 媛쒕컻 �섍꼍</a></h4>
<ul>
<li><strong>�섏〈�� 吏���</strong>: 61媛쒖쓽 �⑦궎吏� (Gatsby �먯퐫�쒖뒪�쒖씠 諛⑸���)</li>
<li><strong>鍮뚮뱶 �쒓컙</strong>: GraphQL �덉씠�� �뚮Ц�� 珥덇린 鍮뚮뱶媛� �먮┝</li>
<li><strong>硫붾え由� �ъ슜��</strong>: 媛쒕컻 �쒕쾭媛� �곷떦�� 臾닿굅��</li>
</ul>
<h4 id="2-蹂듭옟��-�뚮윭洹몄씤-�앺깭怨�"><a class="heading-anchor" href="#2-蹂듭옟��-�뚮윭洹몄씤-�앺깭怨�">2. 蹂듭옟�� �뚮윭洹몄씤 �앺깭怨�</a></h4>
<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>
<h4 id="3-graphql��-�ㅻ쾭�붿��덉뼱留�"><a class="heading-anchor" href="#3-graphql��-�ㅻ쾭�붿��덉뼱留�">3. GraphQL�� �ㅻ쾭�붿��덉뼱留�</a></h4>
<p>�⑥닚�� 留덊겕�ㅼ슫 釉붾줈洹몄뿉 GraphQL�� 怨쇱뿰 �꾩슂�쒓�? �쇰뒗 �섎Ц�� �ㅺ린 �쒖옉�덉뒿�덈떎.</p>
<h3 id="nextjs��-留ㅻ젰�곸씤-�먮뱾"><a class="heading-anchor" href="#nextjs��-留ㅻ젰�곸씤-�먮뱾">Next.js�� 留ㅻ젰�곸씤 �먮뱾</a></h3>
<h4 id="1-�ы뵆��-�묎렐-諛⑹떇"><a class="heading-anchor" href="#1-�ы뵆��-�묎렐-諛⑹떇">1. �ы뵆�� �묎렐 諛⑹떇</a></h4>
<ul>
<li>�뚯씪 湲곕컲 �쇱슦�� �쒖뒪��</li>
<li>�� �곸� �섏〈�� �⑦궎吏� (39媛�)</li>
<li>吏곴��곸씤 App Router 援ъ“</li>
</ul>
<h4 id="2-�깅뒫-理쒖쟻��"><a class="heading-anchor" href="#2-�깅뒫-理쒖쟻��">2. �깅뒫 理쒖쟻��</a></h4>
<ul>
<li>�먮룞 肄붾뱶 �ㅽ뵆由ы똿 湲곕뒫</li>
<li>�댁옣�� �대�吏� 理쒖쟻��</li>
<li>�μ긽�� 鍮뚮뱶 理쒖쟻��</li>
</ul>
<h4 id="3-�믪�-�좎뿰��"><a class="heading-anchor" href="#3-�믪�-�좎뿰��">3. �믪� �좎뿰��</a></h4>
<ul>
<li>API Routes 吏���</li>
<li>SSR/SSG �좏깮�� �곸슜 媛���</li>
<li>�먯쭊�� �꾩엯 媛���</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>
<h4 id="gatsby�먯꽌��-媛꾨떒�덉뒿�덈떎"><a class="heading-anchor" href="#gatsby�먯꽌��-媛꾨떒�덉뒿�덈떎">Gatsby�먯꽌�� 媛꾨떒�덉뒿�덈떎</a></h4>
<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>
<h4 id="nextjs�먯꽌��-吏곸젒-援ы쁽��-�꾩슂�덉뒿�덈떎"><a class="heading-anchor" href="#nextjs�먯꽌��-吏곸젒-援ы쁽��-�꾩슂�덉뒿�덈떎">Next.js�먯꽌�� 吏곸젒 援ы쁽�� �꾩슂�덉뒿�덈떎</a></h4>
<p>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">&#x3C;</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">&#x3C;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&#x3C;<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>&#x3C;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(Table of Contents) 異붿텧�� 媛��� 源뚮떎濡쒖썱�듬땲��. Gatsby�먯꽌�� �뚮윭洹몄씤�� �먮룞�쇰줈 泥섎━�댁＜�� 寃껋쓣,
Next.js�먯꽌�� HTML�� �뚯떛�댁꽌 吏곸젒 異붿텧�댁빞 �덉뒿�덈떎.</p>
<h3 id="3�④퀎-�대�吏�-泥섎━��-蹂듭옟��"><a class="heading-anchor" href="#3�④퀎-�대�吏�-泥섎━��-蹂듭옟��">3�④퀎: �대�吏� 泥섎━�� 蹂듭옟��</a></h3>
<h4 id="gatsby�먯꽌��-媛꾨떒�덉뒿�덈떎-1"><a class="heading-anchor" href="#gatsby�먯꽌��-媛꾨떒�덉뒿�덈떎-1">Gatsby�먯꽌�� 媛꾨떒�덉뒿�덈떎</a></h4>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token url"><span class="token operator">!</span>[<span class="token content">�쒖＜�� �띻꼍</span>](<span class="token url">/images/dev/blog/2025/08/images/jeju.png</span>)</span>
</span></code></pre>
<p>�대젃寃� �묒꽦�섎㈃ 紐⑤뱺 寃껋씠 �앹씠�덉뒿�덈떎. <code>gatsby-plugin-sharp</code>媛� �먮룞�쇰줈 理쒖쟻�뷀븯怨� 寃쎈줈�� �뚮쭪寃� 蹂�寃쏀빐二쇱뿀�듬땲��.</p>
<h4 id="nextjs�먯꽌��-吏곸젒-泥섎━媛�-�꾩슂�덉뒿�덈떎"><a class="heading-anchor" href="#nextjs�먯꽌��-吏곸젒-泥섎━媛�-�꾩슂�덉뒿�덈떎">Next.js�먯꽌�� 吏곸젒 泥섎━媛� �꾩슂�덉뒿�덈떎</a></h4>
<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>
<p>�섎룞�쇰줈 寃쎈줈 蹂��� 濡쒖쭅�� 援ы쁽�댁빞 �덉뒿�덈떎.</p>
<h3 id="4�④퀎-鍮뚮뱶��-諛고룷-�ㅼ젙"><a class="heading-anchor" href="#4�④퀎-鍮뚮뱶��-諛고룷-�ㅼ젙">4�④퀎: 鍮뚮뱶�� 諛고룷 �ㅼ젙</a></h3>
<h4 id="gatsby�먯꽌��"><a class="heading-anchor" href="#gatsby�먯꽌��">Gatsby�먯꽌��</a></h4>
<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">"deploy"</span><span class="token operator">:</span> <span class="token string">"rm -rf .cache/ &#x26;&#x26; rm -rf public/ &#x26;&#x26; gatsby build &#x26;&#x26; gh-pages -b master -d public"</span>
</span><span class="code-line">  <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<h4 id="nextjs�먯꽌��"><a class="heading-anchor" href="#nextjs�먯꽌��">Next.js�먯꽌��</a></h4>
<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>
<p>Static Export �ㅼ젙怨� �대�吏� 理쒖쟻�� 鍮꾪솢�깊솕 �� 異붽� �ㅼ젙�� �꾩슂�덉뒿�덈떎.</p>
<h2 id="留덉씠洹몃젅�댁뀡-��-�살�-寃껊뱾"><a class="heading-anchor" href="#留덉씠洹몃젅�댁뀡-��-�살�-寃껊뱾">留덉씠洹몃젅�댁뀡 �� �살� 寃껊뱾</a></h2>
<h3 id="媛쒖꽑��-�먮뱾"><a class="heading-anchor" href="#媛쒖꽑��-�먮뱾">媛쒖꽑�� �먮뱾</a></h3>
<h4 id="1-��-媛�踰쇱슫-踰덈뱾-�ъ씠利�"><a class="heading-anchor" href="#1-��-媛�踰쇱슫-踰덈뱾-�ъ씠利�">1. �� 媛�踰쇱슫 踰덈뱾 �ъ씠利�</a></h4>
<ul>
<li>�섏〈��: 61媛� �� 39媛쒕줈 ���� 媛먯냼</li>
<li>媛쒕컻 �쒕쾭 �쒖옉 �쒓컙 �⑥텞</li>
<li>硫붾え由� �ъ슜�� �꾩��� 媛먯냼</li>
</ul>
<h4 id="2-吏곴��곸씤-�꾨줈�앺듃-援ъ“"><a class="heading-anchor" href="#2-吏곴��곸씤-�꾨줈�앺듃-援ъ“">2. 吏곴��곸씤 �꾨줈�앺듃 援ъ“</a></h4>
<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>
<p>�뚯씪 援ъ“留� 蹂댁븘�� 媛곴컖�� ��븷�� 紐낇솗�섍쾶 �뚯븙�� �� �덉뒿�덈떎.</p>
<h4 id="3-�μ긽��-typescript-吏���"><a class="heading-anchor" href="#3-�μ긽��-typescript-吏���">3. �μ긽�� TypeScript 吏���</a></h4>
<p>Next.js�� TypeScript 吏��먯씠 �붿슧 留ㅻ걚�ъ썱�듬땲��. �뱁엳 App Router���� 議고빀�� �뺣쭚 �뚮��덉뒿�덈떎.</p>
<h3 id="�꾩쟾�곸씠�덈뜕-遺�遺꾨뱾"><a class="heading-anchor" href="#�꾩쟾�곸씠�덈뜕-遺�遺꾨뱾">�꾩쟾�곸씠�덈뜕 遺�遺꾨뱾</a></h3>
<h4 id="1-珥덇린-媛쒕컻-�ъ옄-�쒓컙-利앷�"><a class="heading-anchor" href="#1-珥덇린-媛쒕컻-�ъ옄-�쒓컙-利앷�">1. 珥덇린 媛쒕컻 �ъ옄 �쒓컙 利앷�</a></h4>
<ul>
<li>湲곗〈�� �뚮윭洹몄씤�쇰줈 媛꾨떒�� �닿껐�섎뜕 湲곕뒫�� 吏곸젒 援ы쁽�섎뒗 �� �쒓컙 �뚯슂</li>
<li>�붾쾭源� 怨쇱젙�먯꽌 �� 留롮� �쒓컙 �ъ옄 �꾩슂</li>
<li>而ㅼ뒪�� 濡쒖쭅�� �섏뼱�좎닔濡� �좎�蹂댁닔 蹂듭옟�� 利앷�</li>
</ul>
<h4 id="2-湲곕뒫-援ы쁽��-�몃���"><a class="heading-anchor" href="#2-湲곕뒫-援ы쁽��-�몃���">2. 湲곕뒫 援ы쁽�� �몃���</a></h4>
<ul>
<li>TOC �앹꽦 濡쒖쭅留� 30以꾩쓽 �뺢탳�� 援ы쁽</li>
<li>�대�吏� 寃쎈줈 蹂��� 濡쒖쭅 20以꾩쓽 泥닿퀎�� 泥섎━</li>
<li>留덊겕�ㅼ슫 �뚯씠�꾨씪�� �꾩껜 248以꾩쓽 �듯빀�� 援ы쁽</li>
</ul>
<h4 id="3-�덉쇅-�곹솴-泥섎━��-�꾩슂��"><a class="heading-anchor" href="#3-�덉쇅-�곹솴-泥섎━��-�꾩슂��">3. �덉쇅 �곹솴 泥섎━�� �꾩슂��</a></h4>
<p>Gatsby�� �먯퐫�쒖뒪�쒖씠 �깆닕�섏뿬 ��遺�遺꾩쓽 �ｌ� 耳��댁뒪媛� �대� 泥섎━�섏뼱 �덉뿀�듬땲��. 諛섎㈃ Next.js�먯꽌�� 紐⑤뱺 �덉쇅 �곹솴�� 吏곸젒 �몃뱾留곹빐�� �덉뒿�덈떎.</p>
<h2 id="�깃났�곸씤-留덉씠洹몃젅�댁뀡-�꾩꽦-怨쇱젙"><a class="heading-anchor" href="#�깃났�곸씤-留덉씠洹몃젅�댁뀡-�꾩꽦-怨쇱젙">�깃났�곸씤 留덉씠洹몃젅�댁뀡 �꾩꽦 怨쇱젙</a></h2>
<p>留덉씠洹몃젅�댁뀡 怨쇱젙�먯꽌 �щ윭 �꾩쟾�� �덉뿀吏�留�, 泥닿퀎�곸씤 �묎렐怨� 瑗쇨세�� 援ы쁽�� �듯빐 紐⑤뱺 湲곕뒫�� �깃났�곸쑝濡� �꾩꽦�� �� �덉뿀�듬땲��.</p>
<h3 id="�깃났-�붿씤��"><a class="heading-anchor" href="#�깃났-�붿씤��">�깃났 �붿씤��</a></h3>
<h4 id="1-泥닿퀎�곸씤-臾몄젣-�닿껐-�묎렐"><a class="heading-anchor" href="#1-泥닿퀎�곸씤-臾몄젣-�닿껐-�묎렐">1. 泥닿퀎�곸씤 臾몄젣 �닿껐 �묎렐</a></h4>
<p>248以꾩쓽 留덊겕�ㅼ슫 泥섎━ 肄붾뱶瑜� �④퀎蹂꾨줈 遺꾩꽍�섍퀬 媛쒖꽑�섎㈃�� �덉젙�곸씤 援ъ“瑜� 援ъ텞�덉뒿�덈떎.</p>
<h4 id="2-�꾩쟾��-湲곕뒫-援ы쁽"><a class="heading-anchor" href="#2-�꾩쟾��-湲곕뒫-援ы쁽">2. �꾩쟾�� 湲곕뒫 援ы쁽</a></h4>
<p>Next.js媛� �⑥닚�� "�숈옉�섎뒗" �섏��� �꾨땲��, draft �쒖뒪�쒓퉴吏� �꾨꼍�섍쾶 援ы쁽�섏뿬 湲곗〈 Gatsby�� 紐⑤뱺 湲곕뒫�� �ы쁽�덉뒿�덈떎.</p>
<h4 id="3-�몃���-�뷀뀒��-泥섎━"><a class="heading-anchor" href="#3-�몃���-�뷀뀒��-泥섎━">3. �몃��� �뷀뀒�� 泥섎━</a></h4>
<p>媛쒕컻 �뚰겕�뚮줈��, �대�吏� 泥섎━, TOC �앹꽦源뚯� 紐⑤뱺 湲곕뒫�� �먮옒 �섏� �댁긽�쇰줈 �꾩꽦�덉뒿�덈떎.</p>
<h3 id="理쒖쥌-�꾩꽦��-寃곌낵"><a class="heading-anchor" href="#理쒖쥌-�꾩꽦��-寃곌낵">理쒖쥌 �꾩꽦�� 寃곌낵</a></h3>
<p>�꾩옱 釉붾줈洹몃뒗 Next.js 14 湲곕컲�쇰줈 �덉젙�곸쑝濡� �댁쁺�섍퀬 �덉뒿�덈떎:</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">&#x3C;</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">&#x3C;/</span>footer</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>Next.js濡� 援ы쁽�� 釉붾줈洹멸� �먯떊�덇쾶 Next.js�쇨퀬 �쒖떆�섍퀬 �덉뒿�덈떎.</p>
<h2 id="留덉씠洹몃젅�댁뀡��-�듯빐-諛곗슫-援먰썕��"><a class="heading-anchor" href="#留덉씠洹몃젅�댁뀡��-�듯빐-諛곗슫-援먰썕��">留덉씠洹몃젅�댁뀡�� �듯빐 諛곗슫 援먰썕��</a></h2>
<h3 id="1-湲곗닠-�ㅽ깮-蹂�寃쎌뿉-����-�좎쨷��-�묎렐-�꾩슂"><a class="heading-anchor" href="#1-湲곗닠-�ㅽ깮-蹂�寃쎌뿉-����-�좎쨷��-�묎렐-�꾩슂">1. 湲곗닠 �ㅽ깮 蹂�寃쎌뿉 ���� �좎쨷�� �묎렐 �꾩슂</a></h3>
<p>"�� 醫뗭� 湲곗닠"�대씪怨� �댁꽌 諛섎뱶�� "�� 醫뗭� 寃곌낵"濡� �댁뼱吏��� 寃껋� �꾨떃�덈떎.</p>
<h4 id="諛섎뱶��-怨좊젮�댁빞-��-�붿냼��"><a class="heading-anchor" href="#諛섎뱶��-怨좊젮�댁빞-��-�붿냼��">諛섎뱶�� 怨좊젮�댁빞 �� �붿냼��</a></h4>
<ul>
<li><strong>�숈뒿 怨≪꽑</strong>: �덈줈�� 湲곗닠�� �듯엳�� �� �꾩슂�� �쒓컙怨� �몃젰</li>
<li><strong>�앺깭怨� �깆닕��</strong>: �뚮윭洹몄씤, �쇱씠釉뚮윭由�, 而ㅻ��덊떚 吏��� �섏�</li>
<li><strong>留덉씠洹몃젅�댁뀡 鍮꾩슜</strong>: 湲곗〈 肄붾뱶瑜� �댁쟾�섎뒗 �� �쒕뒗 �쒓컙怨� 由ъ냼��</li>
<li><strong>�κ린�� �좎�蹂댁닔��</strong>: 而ㅼ뒪�� 肄붾뱶 ��鍮� 寃�利앸맂 �붾（�섏쓽 �덉젙��</li>
</ul>
<h3 id="2-媛꾨떒��-蹂댁씠��-湲곗닠��-�④꺼吏�-蹂듭옟��"><a class="heading-anchor" href="#2-媛꾨떒��-蹂댁씠��-湲곗닠��-�④꺼吏�-蹂듭옟��">2. "媛꾨떒�� 蹂댁씠��" 湲곗닠�� �④꺼吏� 蹂듭옟��</a></h3>
<p>Next.js媛� 泥섏쓬�먮뒗 媛꾨떒�� 蹂댁�吏�留�, �ㅼ젣濡쒕뒗 �ㅼ쓬怨� 媛숈� �곹솴�댁뿀�듬땲��:</p>
<ul>
<li>Gatsby�먯꽌 �뚮윭洹몄씤�� �먮룞�쇰줈 泥섎━�댁＜�� 湲곕뒫�ㅼ쓣 吏곸젒 援ы쁽�댁빞 ��</li>
<li>�먯퐫�쒖뒪�쒖쓽 �꾩� �놁씠 紐⑤뱺 濡쒖쭅�� 吏곸젒 �닿껐�댁빞 �섎뒗 �곹솴</li>
<li>寃됰낫湲곗뿉�� �ы뵆�섏�留� �ㅼ젣濡쒕뒗 �⑥뵮 留롮� 肄붾뱶 �묒꽦�� �꾩슂��</li>
</ul>
<h3 id="3-�꾨꼍��-湲곗닠��-議댁옱�섏�-�딅뒗�ㅻ뒗-寃�"><a class="heading-anchor" href="#3-�꾨꼍��-湲곗닠��-議댁옱�섏�-�딅뒗�ㅻ뒗-寃�">3. �꾨꼍�� 湲곗닠�� 議댁옱�섏� �딅뒗�ㅻ뒗 寃�</a></h3>
<h4 id="gatsby��-�λ떒��"><a class="heading-anchor" href="#gatsby��-�λ떒��">Gatsby�� �λ떒��</a></h4>
<ul>
<li><strong>�μ젏</strong>: �띾��� �뚮윭洹몄씤 �앺깭怨�, 寃�利앸맂 �붾（�섎뱾, 鍮좊Ⅸ 珥덇린 媛쒕컻 �띾룄</li>
<li><strong>�⑥젏</strong>: 臾닿굅�� 媛쒕컻 �섍꼍, 蹂듭옟�� �ㅼ젙 援ъ“, GraphQL �ㅻ쾭�ㅻ뱶</li>
</ul>
<h4 id="nextjs��-�λ떒��"><a class="heading-anchor" href="#nextjs��-�λ떒��">Next.js�� �λ떒��</a></h4>
<ul>
<li><strong>�μ젏</strong>: 媛�踰쇱슫 踰덈뱾 �ш린, 吏곴��곸씤 �꾨줈�앺듃 援ъ“, �믪� �좎뿰��</li>
<li><strong>�⑥젏</strong>: 吏곸젒 援ы쁽�댁빞 �� 湲곕뒫�ㅼ씠 留롮쓬, 珥덇린 媛쒕컻 �쒓컙 �ъ옄 �꾩슂</li>
</ul>
<h3 id="4-湲곗닠��-�꾩꽦�꾩�-�ㅼ슜�깆쓽-洹좏삎"><a class="heading-anchor" href="#4-湲곗닠��-�꾩꽦�꾩�-�ㅼ슜�깆쓽-洹좏삎">4. 湲곗닠�� �꾩꽦�꾩� �ㅼ슜�깆쓽 洹좏삎</a></h3>
<p>�뚮줈�� "湲곗닠�곸쑝濡� �� �곗븘��" �붾（�섎낫�� "�덉젙�곸쑝濡� �숈옉�섎뒗" �붾（�섏씠 �붿슧 媛�移섏엳�� �� �덉뒿�덈떎.</p>
<h2 id="寃곕줎-�깃났�곸씤-留덉씠洹몃젅�댁뀡��-�섎�"><a class="heading-anchor" href="#寃곕줎-�깃났�곸씤-留덉씠洹몃젅�댁뀡��-�섎�">寃곕줎: �깃났�곸씤 留덉씠洹몃젅�댁뀡�� �섎�</a></h2>
<p>�꾩옱 �곹솴�� �뺣━�섎㈃:</p>
<ul>
<li>Next.js 14濡� 留덉씠洹몃젅�댁뀡 �깃났�곸쑝濡� �꾨즺 (��)</li>
<li>紐⑤뱺 湲곗〈 湲곕뒫 �꾨꼍 �ы쁽 (��)</li>
<li>Draft �쒖뒪�쒓퉴吏� �꾩쟾 援ы쁽 (��)</li>
<li>�덉젙�곸쑝濡� �댁쁺 以� (��)</li>
</ul>
<h3 id="�꾩옱��-留뚯”�ㅻ윭��-寃곌낵"><a class="heading-anchor" href="#�꾩옱��-留뚯”�ㅻ윭��-寃곌낵">�꾩옱�� 留뚯”�ㅻ윭�� 寃곌낵</a></h3>
<h4 id="湲곗닠��-�깃낵"><a class="heading-anchor" href="#湲곗닠��-�깃낵">湲곗닠�� �깃낵</a></h4>
<ol>
<li>248以꾩쓽 留덊겕�ㅼ슫 泥섎━ �쒖뒪�� �꾩꽦</li>
<li>�꾩쟾�� 湲곕뒫 援ы쁽�쇰줈 湲곗〈 Gatsby �섏� �ъ꽦</li>
<li>�� 媛�踰쇱슫 踰덈뱾怨� 鍮좊Ⅸ 媛쒕컻 �섍꼍 援ъ텞</li>
</ol>
<h4 id="�댁쁺��-媛쒖꽑"><a class="heading-anchor" href="#�댁쁺��-媛쒖꽑">�댁쁺�� 媛쒖꽑</a></h4>
<p>Next.js濡쒖쓽 �꾪솚�� �듯빐 �ㅼ쓬怨� 媛숈� 媛쒖꽑�ы빆�� �살뿀�듬땲��:</p>
<ol>
<li><strong>Next.js 怨꾩냽 �ъ슜</strong>: �ъ옄�� �쒓컙怨� �몃젰�� 寃곗떎�� 留븐뿀�듬땲��</li>
<li><strong>�덉젙�곸씤 �댁쁺</strong>: 紐⑤뱺 湲곕뒫�� �먰솢�섍쾶 �숈옉�섍퀬 �덉뒿�덈떎</li>
<li><strong>誘몃옒 �뺤옣��</strong>: �꾩슂�� �곕씪 異붽� 湲곕뒫 援ы쁽�� �⑹씠�⑸땲��</li>
</ol>
<h3 id="�ㅻⅨ-媛쒕컻�먮뱾�먭쾶"><a class="heading-anchor" href="#�ㅻⅨ-媛쒕컻�먮뱾�먭쾶">�ㅻⅨ 媛쒕컻�먮뱾�먭쾶</a></h3>
<p>留뚯빟 鍮꾩듂�� 留덉씠洹몃젅�댁뀡�� 怨좊젮�섍퀬 怨꾩떊�ㅻ㈃:</p>
<h4 id="-留덉씠洹몃젅�댁뀡��-怨좊젮�대낵-留뚰븳-寃쎌슦"><a class="heading-anchor" href="#-留덉씠洹몃젅�댁뀡��-怨좊젮�대낵-留뚰븳-寃쎌슦">�� 留덉씠洹몃젅�댁뀡�� 怨좊젮�대낵 留뚰븳 寃쎌슦</a></h4>
<ul>
<li>�꾩옱 湲곗닠 �ㅽ깮�� 紐낇솗�� �쒓퀎媛� �덉쓣 ��</li>
<li>���� 湲곗닠 �ㅽ깮 �듭씪�� �꾩슂�� ��</li>
<li>�덈줈�� 湲곗닠�� �쒓났�섎뒗 怨좎쑀�� 湲곕뒫�� 瑗� �꾩슂�� ��</li>
</ul>
<h4 id="-留덉씠洹몃젅�댁뀡��-�쇳빐��-��-寃쎌슦"><a class="heading-anchor" href="#-留덉씠洹몃젅�댁뀡��-�쇳빐��-��-寃쎌슦">�� 留덉씠洹몃젅�댁뀡�� �쇳빐�� �� 寃쎌슦</a></h4>
<ul>
<li>�⑥닚�� "�� �ロ븳 湲곗닠"�대씪�� �댁쑀留뚯쑝濡�</li>
<li>�꾩옱 �쒖뒪�쒖씠 �� �숈옉�섍퀬 �덉쓣 ��</li>
<li>留덉씠洹몃젅�댁뀡�� �ъ옄�� �쒓컙�� 遺�議깊븷 ��</li>
</ul>
<h2 id="epilogue-湲곗닠��-�꾧뎄��-肉�"><a class="heading-anchor" href="#epilogue-湲곗닠��-�꾧뎄��-肉�">Epilogue: 湲곗닠�� �꾧뎄�� 肉�</a></h2>
<p>寃곌뎅 以묒슂�� 寃껋� 湲곗닠 洹� �먯껜媛� �꾨땲��, 洹� 湲곗닠濡� 臾댁뾿�� 留뚮뱾�대궡�먮깘�낅땲��.</p>
<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>yarn�� npm�쇰줈 �꾩뿭�ㅼ튂 �덉쓣 �� �낅뜲�댄듃 �섎뒗 諛⑸쾿</title>
      <description><![CDATA[## �� �묒꽦�섍쾶 �섏뿀�붽�

![�댁쟾踰꾩쟾](images/previous-version.png)
![理쒖떊踰꾩쟾](images/current-version.png)
npm update -g yarn

留뚯빟 �낃렇�덉씠�� �� �먮윭媛� �섏삩�ㅻ㈃, package.json�� 'packageManager'瑜� 吏��뺥빐二쇰㈃ �쒕떎.
![package.json�� 'packageManager'](images/package-manager.png)]]></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�� &#x27;packageManager&#x27;"></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><![CDATA[## �� �묒꽦�섍쾶 �섏뿀�붽�

package.json�� �덈뒗 resolution怨� �ㅼ튂 踰꾩쟾�� 留욎떠�� �쒕떎.  
[Gatsby Issue #13278](https://github.com/gatsbyjs/gatsby/issues/13278)]]></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><![CDATA[## �� �곕뒗媛�

�섎뱶�붿뒪�щ� 援먯껜�섍퀬
([#](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/))
爰쇱졇�덈뜕 而댄벂�곕� �ㅻ옖留뚯뿉 怨꾩냽 耳쒕㈃�� 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><![CDATA[## �� �곕뒗媛�

媛쒖씤�곸쑝濡� �ъ슜�쒖� �� 7�� �� HGST�� 8�뚮씪 �섎뱶媛� �ъ뒳 湲곷뒗 �뚮━媛� �섏꽌  
湲됲븯寃� 猿먮떎媛� ��泥댄뭹�� 援щℓ�댁꽌 ��린�ㅺ퀬 蹂대땲 �곕텇�� 22.04 LTS濡� �낃렇�덉씠�쒕� 沅뚯쑀�섍만��  
吏꾪뻾�섎떎 硫덉떠�� 由ъ뀑�� �섍퀬 蹂대땲

![You are in emergency mode](images/you_are_in_emergency_mode.jpeg)

媛� �섏솕�듬땲��.

## 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">&#x26;&#x26;</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">&#x26;&#x26;</span> <span class="token function">sudo</span> <span class="token function">apt-get</span> autoremove <span class="token operator">&#x26;&#x26;</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><![CDATA[[�댁쟾 湲�](/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/)�먯꽌
�섑��щ뜕 �먮윭�� �닿껐諛⑸쾿�낅땲��.

湲곗〈 �먮윭�� �ㅼ쓬怨� 媛숈뒿�덈떎.  
![利앹긽 �ㅽ겕由곗꺑](images/screenshot1.png)

```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>
    <item>
      <title>Gatsby V3�쇰줈 �낃렇�덉씠�� �덉뒿�덈떎.</title>
      <description><![CDATA[�뚯궗 �쇱씠 諛붿걯�ㅻ뒗 �묎퀎濡� 釉붾줈洹� 愿�由щ� �뚰��� �덈꽕��.  
洹몃룞�� �낅┰�대땲 吏� 而댄벂�� 援먯껜�� �뚯궗 �쇱씠�� �대윴 ���� �쇱씠 留롮븯�듬땲��.  
V1�먯꽌 V2濡� ��꺼媛� �뚮낫�� �⑥뵮 �ъ썙�� 醫뗫꽕��.  
�욎쑝濡쒕룄 醫낆쥌 湲��� �⑤낫寃좎뒿�덈떎.]]></description>
      <link>https://blog.jell.kr/posts/notice/2021/05/13/Gatsby V3�쇰줈 �낃렇�덉씠�� �덉뒿�덈떎</link>
      <guid isPermaLink="true">https://blog.jell.kr/posts/notice/2021/05/13/Gatsby V3�쇰줈 �낃렇�덉씠�� �덉뒿�덈떎</guid>
      <pubDate>Thu, 13 May 2021 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>
V1�먯꽌 V2濡� ��꺼媛� �뚮낫�� �⑥뵮 �ъ썙�� 醫뗫꽕��.<br>
�욎쑝濡쒕룄 醫낆쥌 湲��� �⑤낫寃좎뒿�덈떎.</p>
        <hr/>
        <p><a href="https://blog.jell.kr/posts/notice/2021/05/13/Gatsby V3�쇰줈 �낃렇�덉씠�� �덉뒿�덈떎">�먮Ц 蹂닿린</a></p>
      ]]></content:encoded>
    </item>
    <item>
      <title>�몃��먯꽌 �묒냽�섍린 �꾪븳 ssh �ㅼ튂 媛��대뱶</title>
      <description><![CDATA[## �� �곕뒗媛�

�곕텇�щ� 硫붿씤�쇰줈 �곗떆�� 遺꾩씠 留롮씠 �섏뿀�ㅺ퀬�� �섏�留�, �ъ쟾�� �쒕툕濡� �곗떆�� 遺꾨뱾�� 留롮뒿�덈떎.  
洹몃젃�ㅺ퀬 �곕텇�щ� �곌린 �꾪빐 �ㅻ낫�� 留덉슦�ㅻ� 怨꾩냽 ��린�� �쇰룄 踰덇굅濡쒖슫 �쇱씠二�.  
�쒖씪 �ш쾶 �ㅺ��ㅻ뒗 �댁쑀�� ��떆 �쒕쾭瑜� �щ윭援곕뜲 �먮뒗 �쇱씪 寃껋엯�덈떎.  
SSH�� �곕텇��(由щ늼��, �좊땳��)瑜� �몃��먯꽌 �묒냽�� �� �덇쾶 �댁＜�� �꾧뎄�낅땲��.

## SSH �ㅼ젙 諛⑸쾿

�곗꽑 �쒖씪 �먮━ �뚮젮吏� OpenSSH瑜� �ㅼ튂�댁쨳�쒕떎.

```shell
sudo apt update && sudo apt install openss...]]></description>
      <link>https://blog.jell.kr/posts/dev/linux/2020/10/22/�몃��먯꽌 �곕텇�щ줈 �묒냽�섍린 �꾪븳 SSH �ㅼ젙</link>
      <guid isPermaLink="true">https://blog.jell.kr/posts/dev/linux/2020/10/22/�몃��먯꽌 �곕텇�щ줈 �묒냽�섍린 �꾪븳 SSH �ㅼ젙</guid>
      <pubDate>Thu, 22 Oct 2020 13:40: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[Shell]]></category>
      <content:encoded><![CDATA[
        <p><strong>移댄뀒怨좊━:</strong> Dev</p>
        <p><strong>�쒓렇:</strong> Ubuntu, linux, Jell, Shell</p>
        <hr/>
        <h2 id="��-�곕뒗媛�"><a class="heading-anchor" href="#��-�곕뒗媛�">�� �곕뒗媛�</a></h2>
<p>�곕텇�щ� 硫붿씤�쇰줈 �곗떆�� 遺꾩씠 留롮씠 �섏뿀�ㅺ퀬�� �섏�留�, �ъ쟾�� �쒕툕濡� �곗떆�� 遺꾨뱾�� 留롮뒿�덈떎.<br>
洹몃젃�ㅺ퀬 �곕텇�щ� �곌린 �꾪빐 �ㅻ낫�� 留덉슦�ㅻ� 怨꾩냽 ��린�� �쇰룄 踰덇굅濡쒖슫 �쇱씠二�.<br>
�쒖씪 �ш쾶 �ㅺ��ㅻ뒗 �댁쑀�� ��떆 �쒕쾭瑜� �щ윭援곕뜲 �먮뒗 �쇱씪 寃껋엯�덈떎.<br>
SSH�� �곕텇��(由щ늼��, �좊땳��)瑜� �몃��먯꽌 �묒냽�� �� �덇쾶 �댁＜�� �꾧뎄�낅땲��.</p>
<h2 id="ssh-�ㅼ젙-諛⑸쾿"><a class="heading-anchor" href="#ssh-�ㅼ젙-諛⑸쾿">SSH �ㅼ젙 諛⑸쾿</a></h2>
<p>�곗꽑 �쒖씪 �먮━ �뚮젮吏� OpenSSH瑜� �ㅼ튂�댁쨳�쒕떎.</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</span> update <span class="token operator">&#x26;&#x26;</span> <span class="token function">sudo</span> <span class="token function">apt</span> <span class="token function">install</span> openssh-server
</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/ssh/sshd_config
</span></code></pre>
<p>�� �뚯씪�� ssh�곕が�� �ㅼ젙�뚯씪�몃뜲��, �ш린��...</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">#PasswordAuthentication yes
</span></code></pre>
<p>�� 二쇱꽍�� �댁젣�댁＜硫� �⑸땲��.</p>
        <hr/>
        <p><a href="https://blog.jell.kr/posts/dev/linux/2020/10/22/�몃��먯꽌 �곕텇�щ줈 �묒냽�섍린 �꾪븳 SSH �ㅼ젙">�먮Ц 蹂닿린</a></p>
      ]]></content:encoded>
    </item>
    <item>
      <title>媛쒖씤�곸쑝濡� �곕뒗 �곕텇�� �명듃遺� �ㅼ튂 媛��대뱶</title>
      <description><![CDATA[## �� �곕뒗媛�

���곸뿉 議곌툑 �쇱컢 �좊뱾�댁꽌 �먯젙利덉쓬�� 源쇱뒿�덈떎.  
洹몃깷 硫띾븣由щ㈃�� 媛쒕컻�섍퀬 �덈떎媛�, 臾몃뱷 �쒓� �곕뒗 �명듃遺�~~�섏뒪 ����~~�� �곕텇�� 踰꾩쟾�� 18.04 LTS�쇰뒗 嫄�
�좎삱由щ㈃�� ~~�� 洹몃옱�붿��� 紐⑤Ⅴ寃좎�留�~~ 20.04.1 LTS濡� �� 李몄뿉 �낃렇�덉씠�쒕굹 �댁빞寃좊떎...�섍퀬 �꾨Т �앷컖�놁씠

```shell
do-release-upgrade -d
```

瑜� �낅젰�� 寃� �덈꼍 1�� 寃쎌씠�덉뒿�덈떎.  
洹몃━怨� 30遺� ��... 10�� �� �� �명듃遺곸씠 六쀫뜑援곗슂.  
�쒓컙 癒몃━�띿씠 �덊븯�섏죱�듬땲��.

```text
�좉퉸 ��...]]></description>
      <link>https://blog.jell.kr/posts/dev/linux/2020/10/11/媛쒖씤�곸쑝濡� �곕뒗 �곕텇�� �명듃遺� �ㅼ튂 媛��대뱶</link>
      <guid isPermaLink="true">https://blog.jell.kr/posts/dev/linux/2020/10/11/媛쒖씤�곸쑝濡� �곕뒗 �곕텇�� �명듃遺� �ㅼ튂 媛��대뱶</guid>
      <pubDate>Sun, 11 Oct 2020 05: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[Shell]]></category>
      <content:encoded><![CDATA[
        <p><strong>移댄뀒怨좊━:</strong> Dev</p>
        <p><strong>�쒓렇:</strong> Ubuntu, linux, Jell, Shell</p>
        <hr/>
        <h2 id="��-�곕뒗媛�"><a class="heading-anchor" href="#��-�곕뒗媛�">�� �곕뒗媛�</a></h2>
<p>���곸뿉 議곌툑 �쇱컢 �좊뱾�댁꽌 �먯젙利덉쓬�� 源쇱뒿�덈떎.<br>
洹몃깷 硫띾븣由щ㈃�� 媛쒕컻�섍퀬 �덈떎媛�, 臾몃뱷 �쒓� �곕뒗 �명듃遺�~~�섏뒪 ����~~�� �곕텇�� 踰꾩쟾�� 18.04 LTS�쇰뒗 嫄�
�좎삱由щ㈃�� ~~�� 洹몃옱�붿��� 紐⑤Ⅴ寃좎�留�~~ 20.04.1 LTS濡� �� 李몄뿉 �낃렇�덉씠�쒕굹 �댁빞寃좊떎...�섍퀬 �꾨Т �앷컖�놁씠</p>
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">do-release-upgrade <span class="token parameter variable">-d</span>
</span></code></pre>
<p>瑜� �낅젰�� 寃� �덈꼍 1�� 寃쎌씠�덉뒿�덈떎.<br>
洹몃━怨� 30遺� ��... 10�� �� �� �명듃遺곸씠 六쀫뜑援곗슂.<br>
�쒓컙 癒몃━�띿씠 �덊븯�섏죱�듬땲��.</p>
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line">�좉퉸 �� �곗씠��! �� �ㅼ젙!
</span></code></pre>
<p>�댁컡��李� �대젮蹂대젮怨� 湲됲븳 ssl�몄쬆�� �뺣룄留� 諛깆뾽�섍퀬 寃곌뎅 珥덇린�붾� �쒖옉�덉뒿�덈떎.</p>
<h2 id="�곕텇��-�ㅼ튂"><a class="heading-anchor" href="#�곕텇��-�ㅼ튂">�곕텇�� �ㅼ튂</a></h2>
<p>�곕텇�� �ㅼ튂�� 湲곕낯�곸쑝濡� 媛숈뒿�덈떎. USB瑜� 苑귢퀬 遺��� �쒖꽌瑜� 留� �꾨줈 �щ젮二쇰㈃ �덈룄�� �ㅼ튂�섎벏�� �쒖옉�� �� �덉뒿�덈떎.</p>
<p>�� 媛숈� 寃쎌슦�먮뒗 '洹몃옒�쎄낵 Wi-Fi �섎뱶�⑥뼱 洹몃━怨� 異붽� 誘몃뵒�� �щ㎎�� �꾪븳 �쒕뱶 �뚰떚 �뚰봽�몄썾�� �ㅼ튂'瑜� 泥댄겕�섎㈃ �ㅼ튂 留덉�留됱뿉 �ㅽ뙣瑜� �섎뜑援곗슂. 泥댄겕瑜� �댁젣�섍퀬 �ㅼ떆 �ㅼ튂 以묒엯�덈떎.</p>
<p>�앷컖蹂대떎 湲몄뼱�� �곕줈 �낅줈�� �섍쿋�듬땲��.</p>
        <hr/>
        <p><a href="https://blog.jell.kr/posts/dev/linux/2020/10/11/媛쒖씤�곸쑝濡� �곕뒗 �곕텇�� �명듃遺� �ㅼ튂 媛��대뱶">�먮Ц 蹂닿린</a></p>
      ]]></content:encoded>
    </item>
  </channel>
</rss>