docs(object-type): 설명 보충

_posts/js/object-type/docs.mdx

@@ -49,7 +49,7 @@ type StringHint = 'foo' | 'bar' | (string & {}) // foo, bar 힌트가 보이면
 
 ## string & \{}
 
-`string & {}`는 `string`과 `{}`의 교집합이다. <u>`{}`는 모든 타입의 상위 타입이므로(후술)</u>, `string`과 교집합을 구하면 결국 `string` 타입과 동일하게 된다.
+`string & {}`는 `string`과 `{}`의 교집합이다. <u>`{}`는 객체의 최상위 타입이므로(후술)</u>, `string`과 교집합을 구하면 결국 `string` 타입과 동일하게 된다.
 
 그런데 문자열 리터럴(`"foo", "bar"`)은 `string`의 서브셋이지 `string & {}`의 서브셋이 아니다(!!).
 
@@ -111,7 +111,7 @@ goC(bb); // OK. c 프로퍼티가 추가되어도 a, b가 있으므로 "구조
 
 ## Object vs object vs \{}
 
-앞에서 "`{}`는 모든 타입의 상위 타입"이라고 했다. 그렇다면 최상위 타입인 `Object`, `object`, `{}`는 어떤 차이가 있을까?
+앞에서 "`{}`는 객체의 최상위 타입"이라고 했다. 그렇다면 객체의 최상위 타입인 `Object`, `object`, `{}`는 어떤 차이가 있을까?
 
 이를 자세히 알기 위해선 자바스크립트의 타입을 이해해야 한다.
 
@@ -225,7 +225,7 @@ const obj7: {} = []; // OK.
 
 > 타입스크립트 공식 FAQ - [#Primitives are \{}, and \{} Doesn't Mean object](https://github.com/microsoft/TypeScript/wiki/FAQ#primitives-are---and---doesnt-mean-object).
 >
-> 해당 FAQ를 보면 [원시 타입](/posts/implicit-coercion#%EB%93%A4%EC%96%B4%EA%B0%80%EA%B8%B0-%EC%A0%84%EC%97%90)은 `{}`이며 `{}`는 객체를 의미하지 않는다고 한다.
+> 해당 FAQ를 보면 [원시 타입](/posts/implicit-coercion#%EB%93%A4%EC%96%B4%EA%B0%80%EA%B8%B0-%EC%A0%84%EC%97%90)은 `{}`이며 `{}`는 객체 타입만을 의미하지 않는다고 한다.
 
 ```ts
 const obj1: {} = { a: 1 };
@@ -280,3 +280,5 @@ type AAA = 'A' | 'B' | (string & object);
 
 - https://stackoverflow.com/questions/18961203/any-vs-object
 - https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript
+- [알랑말랑 암묵적 형변환 말랑말랑 이해하기](/posts/implicit-coercion)
+

e2e/__snapshots__/post/dom.spec.ts/desktop/object-type.html

@@ -24,7 +24,7 @@ <h2 id="의문" class="font-semibold leading-snug pb-0.5 pt-6 mb-2 group text-3x
 </ul>
 <p class="mt-4 mb-4">그렇다면 두 번째의 <code>string &amp; {}</code>는 무엇일까?</p>
 <h2 id="string--" class="font-semibold leading-snug pb-0.5 pt-6 mb-2 group text-3xl mt-12 border-b border-[hsl(210deg_18%_87%_/100%)]"><a aria-hidden="true" tabindex="-1" href="#string--"><span class="icon icon-link opacity-0 group-hover:opacity-100 ease-in-out transition-opacity duration-300 before:absolute before:w-[40px] before:left-[-25px] before:content-[&quot;⧉&quot;] before:text-[#61768f] before:mr-2"></span></a>string &amp; {}</h2>
-<p class="mt-4 mb-4"><code>string &amp; {}</code>는 <code>string</code>과 <code>{}</code>의 교집합이다. <u><code>{}</code>는 모든 타입의 상위 타입이므로(후술)</u>, <code>string</code>과 교집합을 구하면 결국 <code>string</code> 타입과 동일하게 된다.</p>
+<p class="mt-4 mb-4"><code>string &amp; {}</code>는 <code>string</code>과 <code>{}</code>의 교집합이다. <u><code>{}</code>는 객체의 최상위 타입이므로(후술)</u>, <code>string</code>과 교집합을 구하면 결국 <code>string</code> 타입과 동일하게 된다.</p>
 <p class="mt-4 mb-4">그런데 문자열 리터럴(<code>"foo", "bar"</code>)은 <code>string</code>의 서브셋이지 <code>string &amp; {}</code>의 서브셋이 아니다(!!).</p>
 <p class="mt-4 mb-4">즉, 타입스크립트 컴파일러는 <code>string &amp; {}</code>를 <u>더 구체적인 타입으로 간주</u>하여 문자열 리터럴(<code>"foo", "bar"</code>)과 <code>string &amp; {}</code>를 <code>string</code>으로 합치지 않고 구분하여 유니온 타입으로 표현하게 된다.</p>
 <p class="mt-4 mb-4">이러한 특성 때문에 우리는 문자열 리터럴을 사용하면서 문자열을 확장할 수 있게 된다.</p>
@@ -65,7 +65,7 @@ <h3 id="구체적인-타입" class="font-semibold leading-snug pb-0.5 pt-6 mb-2
 <p class="mt-4 mb-4">이는 <code>string</code>과는 다른 타입이므로 문자열 리터럴과 유니온 타입을 지정할 때 <code>string</code>으로 잡아먹히지 않게 된다.</p>
 <p class="mt-4 mb-4">관련 내용이 더 궁금하다면 <a href="https://www.typescriptlang.org/docs/handbook/2/narrowing.html" class="underline-highlight-fade" target="_blank" rel="noreferrer noopener">Type Narrowing</a>을 참고.</p>
 <h2 id="object-vs-object-vs-" class="font-semibold leading-snug pb-0.5 pt-6 mb-2 group text-3xl mt-12 border-b border-[hsl(210deg_18%_87%_/100%)]"><a aria-hidden="true" tabindex="-1" href="#object-vs-object-vs-"><span class="icon icon-link opacity-0 group-hover:opacity-100 ease-in-out transition-opacity duration-300 before:absolute before:w-[40px] before:left-[-25px] before:content-[&quot;⧉&quot;] before:text-[#61768f] before:mr-2"></span></a>Object vs object vs {}</h2>
-<p class="mt-4 mb-4">앞에서 "<code>{}</code>는 모든 타입의 상위 타입"이라고 했다. 그렇다면 최상위 타입인 <code>Object</code>, <code>object</code>, <code>{}</code>는 어떤 차이가 있을까?</p>
+<p class="mt-4 mb-4">앞에서 "<code>{}</code>는 객체의 최상위 타입"이라고 했다. 그렇다면 객체의 최상위 타입인 <code>Object</code>, <code>object</code>, <code>{}</code>는 어떤 차이가 있을까?</p>
 <p class="mt-4 mb-4">이를 자세히 알기 위해선 자바스크립트의 타입을 이해해야 한다.</p>
 <h3 id="자바스크립트의-타입" class="font-semibold leading-snug pb-0.5 pt-6 mb-2 group text-2xl mt-8"><a aria-hidden="true" tabindex="-1" href="#자바스크립트의-타입"><span class="icon icon-link opacity-0 group-hover:opacity-100 ease-in-out transition-opacity duration-300 before:absolute before:w-[40px] before:left-[-25px] before:content-[&quot;⧉&quot;] before:text-[#61768f] before:mr-2"></span></a>자바스크립트의 타입</h3>
 <figure data-rehype-pretty-code-figure=""><pre tabindex="0" data-language="shell" data-theme="material-theme-palenight"><code data-language="shell" data-theme="material-theme-palenight" style="display:grid"><span data-line=""><span style="color:#89DDFF">[</span><span style="color:#BABED8">모든 값</span><span style="color:#89DDFF">]</span></span>
@@ -139,7 +139,7 @@ <h3 id="-타입" class="font-semibold leading-snug pb-0.5 pt-6 mb-2 group text-2
 <p class="mt-4 mb-4">이 뜻은 <code>Object</code>, <code>object</code>와는 다르게 <code>{}</code>는 객체 타입만을 의미하지 않는다는 것이다. 이는 곧 객체만 가지고 있는 <code>hasOwnProperty</code> 메서드를 포함하지 않는다는 의미이다.</p>
 <blockquote class="pl-4 text-[#8b949e] border-l-[0.25rem] border-[#425061]">
 <p class="mt-4 mb-4">타입스크립트 공식 FAQ - <a href="https://github.com/microsoft/TypeScript/wiki/FAQ#primitives-are---and---doesnt-mean-object" class="underline-highlight-fade" target="_blank" rel="noreferrer noopener">#Primitives are {}, and {} Doesn't Mean object</a>.</p>
-<p class="mt-4 mb-4">해당 FAQ를 보면 <a href="/posts/implicit-coercion#%EB%93%A4%EC%96%B4%EA%B0%80%EA%B8%B0-%EC%A0%84%EC%97%90" class="underline-highlight-fade" target="_blank" rel="noreferrer noopener">원시 타입</a>은 <code>{}</code>이며 <code>{}</code>는 객체를 의미하지 않는다고 한다.</p>
+<p class="mt-4 mb-4">해당 FAQ를 보면 <a href="/posts/implicit-coercion#%EB%93%A4%EC%96%B4%EA%B0%80%EA%B8%B0-%EC%A0%84%EC%97%90" class="underline-highlight-fade" target="_blank" rel="noreferrer noopener">원시 타입</a>은 <code>{}</code>이며 <code>{}</code>는 객체 타입만을 의미하지 않는다고 한다.</p>
 </blockquote>
 <figure data-rehype-pretty-code-figure=""><pre tabindex="0" data-language="ts" data-theme="material-theme-palenight"><code data-language="ts" data-theme="material-theme-palenight" style="display:grid"><span data-line=""><span style="color:#C792EA">const</span><span style="color:#BABED8"> obj1</span><span style="color:#89DDFF">:</span><span style="color:#89DDFF"> {}</span><span style="color:#89DDFF"> =</span><span style="color:#89DDFF"> {</span><span style="color:#F07178"> a</span><span style="color:#89DDFF">:</span><span style="color:#F78C6C"> 1</span><span style="color:#89DDFF"> };</span></span>
 <span data-line=""><span style="color:#C792EA">const</span><span style="color:#BABED8"> obj2</span><span style="color:#89DDFF">:</span><span style="color:#FFCB6B"> Object</span><span style="color:#89DDFF"> =</span><span style="color:#89DDFF"> '</span><span style="color:#C3E88D">hello</span><span style="color:#89DDFF">'</span><span style="color:#89DDFF">;</span></span></code></pre></figure>
@@ -188,4 +188,5 @@ <h2 id="참고" class="font-semibold leading-snug pb-0.5 pt-6 mb-2 group text-3x
 <ul class="min-[790px]:ml-6 ml-4 list-disc">
 <li><a href="https://stackoverflow.com/questions/18961203/any-vs-object" class="underline-highlight-fade" target="_blank" rel="noreferrer noopener">https://stackoverflow.com/questions/18961203/any-vs-object</a></li>
 <li><a href="https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript" class="underline-highlight-fade" target="_blank" rel="noreferrer noopener">https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript</a></li>
+<li><a href="/posts/implicit-coercion" class="underline-highlight-fade" target="_blank" rel="noreferrer noopener">알랑말랑 암묵적 형변환 말랑말랑 이해하기</a></li>
 </ul></div><aside class="absolute top-0 inline-block h-full break-words left-full max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li id="tldr" class="pt-0.5 text-base select-none cursor-pointer mb-0.5 hover:text-sub-blue">TL;DR</li><li id="의문" class="pt-0.5 text-base select-none cursor-pointer mb-0.5 hover:text-sub-blue">의문</li><li id="string--" class="pt-0.5 text-base select-none cursor-pointer mb-0.5 hover:text-sub-blue">string &amp; {}</li><li id="구체적인-타입" class="pt-0.5 text-base select-none cursor-pointer before:content-['-'] before:mr-1 ml-2.5 mb-1.5 hover:text-sub-blue">구체적인 타입</li><li id="object-vs-object-vs-" class="pt-0.5 text-base select-none cursor-pointer mb-0.5 hover:text-sub-blue">Object vs object vs {}</li><li id="자바스크립트의-타입" class="pt-0.5 text-base select-none cursor-pointer before:content-['-'] before:mr-1 ml-2.5 hover:text-sub-blue">자바스크립트의 타입</li><li id="원시-타입과-객체-타입" class="pt-0.5 text-base select-none cursor-pointer before:content-['-'] before:mr-1 ml-2.5 hover:text-sub-blue">원시 타입과 객체 타입</li><li id="object-타입" class="pt-0.5 text-base select-none cursor-pointer before:content-['-'] before:mr-1 ml-2.5 hover:text-sub-blue">Object 타입</li><li id="object-타입-1" class="pt-0.5 text-base select-none cursor-pointer before:content-['-'] before:mr-1 ml-2.5 hover:text-sub-blue">object 타입</li><li id="-타입" class="pt-0.5 text-base select-none cursor-pointer before:content-['-'] before:mr-1 ml-2.5 hover:text-sub-blue">{} 타입</li><li id="정리" class="pt-0.5 text-base select-none cursor-pointer before:content-['-'] before:mr-1 ml-2.5 mb-1.5 hover:text-sub-blue">정리</li><li id="마치며" class="pt-0.5 text-base select-none cursor-pointer mb-0.5 hover:text-sub-blue">마치며</li><li id="참고" class="pt-0.5 text-base select-none cursor-pointer mb-0.5 hover:text-sub-blue">참고</li></ul></aside></section><a class="inline-block text-[#30ffcb] leading-[1.1] after:transition-[width] after:duration-500 ease-in-out hover:after:w-[100%] after:w-0 after:block after:h-[1px] print:text-black print:underline after:bg-[#30ffcb] after:content-[&quot;&quot;] mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Object%20vs%20object%20vs%20%7B%7D&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>