create post

content/post/javascript/array-initialization.md

@@ -0,0 +1,61 @@
++++
+title = '배열 초기화'
+date = 2024-02-28T16:54:26+09:00
+draft = false
+author = 'Sehyun'
+comments = true
+readingTime = true
++++
+
+# 배열 초기화 (이중배열)
+
+배열을 초기화할 때 쓸 수 있는 두 가지 방법:
+
+- `Array.prototype.fill()`
+- `Array.from()`
+
+## `Array.prototype.fill()`
+
+배열을 채울 값으로 객체를 받을 경우 그 **참조만 복사**해서 배열을 채운다.
+
+```
+function solution(n, arr1, arr2) {
+    const map = new Array(n).fill(new Array(n).fill("*"));
+    map[1][2] = "H";
+    return map;
+}
+
+solution(5)
+```
+
+위 코드의 결과가
+
+```
+['*', '*', '*', '*', '*'],
+['*', '*', 'H', '*', '*'],
+['*', '*', '*', '*', '*'],
+['*', '*', '*', '*', '*'],
+['*', '*', '*', '*', '*']
+```
+
+이게 아니라
+
+```
+['*', '*', 'H', '*', '*'],
+['*', '*', 'H', '*', '*'],
+['*', '*', 'H', '*', '*'],
+['*', '*', 'H', '*', '*'],
+['*', '*', 'H', '*', '*']
+```
+
+이렇게 나온다는 뜻이다! (이렇게 배열을 초기화하면 배열 속의 모든 배열이 똑같은 참조값을 가지게 되어버리기 때문)
+
+그래서 의도대로 `map[1][2] = "H`를 했을 때 `map[1][2]` 자리의 아이템만 `H`로 바꾸고 싶다면 `Array.prototype.fill()`이 아닌 `Array.from()`을 사용해 배열을 초기화해야 한다.
+
+```
+function solution(n, arr1, arr2) {
+    const map = Array.from({ length: n }, () => Array(n).fill("*"));
+    map[1][2] = "H";
+    return map;
+}
+```

public/404.html

@@ -10,7 +10,7 @@
 <meta property='og:description' content='consistency'>
 <meta property='og:url' content='https://e6d1fe.github.io/e6d1fe-blog/404.html'>
 <meta property='og:site_name' content='e6d1fe'>
-<meta property='og:type' content='website'>
+<meta property='og:type' content='website'><meta property='og:updated_time' content=' 2024-02-28T16:54:26&#43;09:00 '/>
 <meta name="twitter:title" content="404 Page not found">
 <meta name="twitter:description" content="consistency">
     </head>

public/categories/index.html

@@ -10,7 +10,7 @@
 <meta property='og:description' content='consistency'>
 <meta property='og:url' content='https://e6d1fe.github.io/e6d1fe-blog/categories/'>
 <meta property='og:site_name' content='e6d1fe'>
-<meta property='og:type' content='website'>
+<meta property='og:type' content='website'><meta property='og:updated_time' content=' 2024-02-28T16:54:26&#43;09:00 '/>
 <meta name="twitter:title" content="Categories">
 <meta name="twitter:description" content="consistency"><link rel="alternate" type="application/rss&#43;xml" href="https://e6d1fe.github.io/e6d1fe-blog/categories/index.xml">
     </head>

public/index.html

@@ -11,7 +11,7 @@
 <meta property='og:description' content='consistency'>
 <meta property='og:url' content='https://e6d1fe.github.io/e6d1fe-blog/'>
 <meta property='og:site_name' content='e6d1fe'>
-<meta property='og:type' content='website'>
+<meta property='og:type' content='website'><meta property='og:updated_time' content=' 2024-02-28T16:54:26&#43;09:00 '/>
 <meta name="twitter:title" content="e6d1fe">
 <meta name="twitter:description" content="consistency"><link rel="alternate" type="application/rss&#43;xml" href="https://e6d1fe.github.io/e6d1fe-blog/index.xml">
     </head>
@@ -145,6 +145,136 @@ <h2 class="site-description">consistency</h2>
 
     <section class="article-list">
 
+
+<article class="">
+    <header class="article-header">
+
+    <div class="article-details">
+
+
+    <div class="article-title-wrapper">
+        <h2 class="article-title">
+            <a href="/e6d1fe-blog/post/javascript/array-initialization/">배열 초기화</a>
+        </h2>
+
+
+    </div>
+
+
+
+
+
+    <footer class="article-time">
+
+            <div>
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" width="56" height="56" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"/>
+  <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" />
+  <circle cx="18" cy="18" r="4" />
+  <path d="M15 3v4" />
+  <path d="M7 3v4" />
+  <path d="M3 11h16" />
+  <path d="M18 16.496v1.504l1 1" />
+</svg>
+                <time class="article-time--published">Feb 28, 2024</time>
+            </div>
+
+
+
+            <div>
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"/>
+  <circle cx="12" cy="12" r="9" />
+  <polyline points="12 7 12 12 15 15" />
+</svg>
+
+
+
+                <time class="article-time--reading">
+                    1 minute read
+                </time>
+            </div>
+
+    </footer>
+
+
+
+</div>
+
+</header>
+</article>
+
+
+<article class="has-image">
+    <header class="article-header">
+        <div class="article-image">
+            <a href="/e6d1fe-blog/post/about/">
+                <img src="/e6d1fe-blog/post/about/cover_hue930238c74df5cb99104f8eb704cf588_87584_800x0_resize_q75_box.jpeg"
+                        srcset="/e6d1fe-blog/post/about/cover_hue930238c74df5cb99104f8eb704cf588_87584_800x0_resize_q75_box.jpeg 800w, /e6d1fe-blog/post/about/cover_hue930238c74df5cb99104f8eb704cf588_87584_1600x0_resize_q75_box.jpeg 1600w"
+                        width="800" 
+                        height="539" 
+                        loading="lazy"
+                        alt="Featured image of post About this blog" />
+
+            </a>
+        </div>
+
+
+    <div class="article-details">
+
+
+    <div class="article-title-wrapper">
+        <h2 class="article-title">
+            <a href="/e6d1fe-blog/post/about/">About this blog</a>
+        </h2>
+
+
+    </div>
+
+
+
+
+
+    <footer class="article-time">
+
+            <div>
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" width="56" height="56" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"/>
+  <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" />
+  <circle cx="18" cy="18" r="4" />
+  <path d="M15 3v4" />
+  <path d="M7 3v4" />
+  <path d="M3 11h16" />
+  <path d="M18 16.496v1.504l1 1" />
+</svg>
+                <time class="article-time--published">Feb 27, 2024</time>
+            </div>
+
+
+
+            <div>
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"/>
+  <circle cx="12" cy="12" r="9" />
+  <polyline points="12 7 12 12 15 15" />
+</svg>
+
+
+
+                <time class="article-time--reading">
+                    1 minute read
+                </time>
+            </div>
+
+    </footer>
+
+
+
+</div>
+
+</header>
+</article>
+
     </section>
 <footer class="site-footer">
     <section class="copyright">

public/index.xml

@@ -5,13 +5,56 @@
         <link>https://e6d1fe.github.io/e6d1fe-blog/</link>
         <description>Recent content on e6d1fe</description>
         <generator>Hugo -- gohugo.io</generator>
-        <language>en-us</language><atom:link href="https://e6d1fe.github.io/e6d1fe-blog/index.xml" rel="self" type="application/rss+xml" /><item>
+        <language>en-us</language>
+        <lastBuildDate>Wed, 28 Feb 2024 16:54:26 +0900</lastBuildDate><atom:link href="https://e6d1fe.github.io/e6d1fe-blog/index.xml" rel="self" type="application/rss+xml" /><item>
+        <title>배열 초기화</title>
+        <link>https://e6d1fe.github.io/e6d1fe-blog/post/javascript/array-initialization/</link>
+        <pubDate>Wed, 28 Feb 2024 16:54:26 +0900</pubDate>
+
+        <guid>https://e6d1fe.github.io/e6d1fe-blog/post/javascript/array-initialization/</guid>
+        <description>&lt;h1 id=&#34;배열-초기화-이중배열&#34;&gt;배열 초기화 (이중배열)&lt;/h1&gt;
+&lt;p&gt;배열을 초기화할 때 쓸 수 있는 두 가지 방법:&lt;/p&gt;
+&lt;ul&gt;
+&lt;li&gt;&lt;code&gt;Array.prototype.fill()&lt;/code&gt;&lt;/li&gt;
+&lt;li&gt;&lt;code&gt;Array.from()&lt;/code&gt;&lt;/li&gt;
+&lt;/ul&gt;
+&lt;h2 id=&#34;arrayprototypefill&#34;&gt;&lt;code&gt;Array.prototype.fill()&lt;/code&gt;&lt;/h2&gt;
+&lt;p&gt;배열을 채울 값으로 객체를 받을 경우 그 &lt;strong&gt;참조만 복사&lt;/strong&gt;해서 배열을 채운다.&lt;/p&gt;
+&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;function solution(n, arr1, arr2) {
+    const map = new Array(n).fill(new Array(n).fill(&amp;#34;*&amp;#34;));
+    map[1][2] = &amp;#34;H&amp;#34;;
+    return map;
+}
+
+solution(5)
+&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;위 코드의 결과가&lt;/p&gt;
+&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;[&amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;],
+[&amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;H&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;],
+[&amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;],
+[&amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;],
+[&amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;]
+&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;이게 아니라&lt;/p&gt;
+&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;[&amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;H&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;],
+[&amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;H&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;],
+[&amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;H&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;],
+[&amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;H&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;],
+[&amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;H&amp;#39;, &amp;#39;*&amp;#39;, &amp;#39;*&amp;#39;]
+&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;이렇게 나온다는 뜻이다! (이렇게 배열을 초기화하면 배열 속의 모든 배열이 똑같은 참조값을 가지게 되어버리기 때문)&lt;/p&gt;
+&lt;p&gt;그래서 의도대로 &lt;code&gt;map[1][2] = &amp;quot;H&lt;/code&gt;를 했을 때 &lt;code&gt;map[1][2]&lt;/code&gt; 자리의 아이템만 &lt;code&gt;H&lt;/code&gt;로 바꾸고 싶다면 &lt;code&gt;Array.prototype.fill()&lt;/code&gt;이 아닌 &lt;code&gt;Array.from()&lt;/code&gt;을 사용해 배열을 초기화해야 한다.&lt;/p&gt;
+&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;function solution(n, arr1, arr2) {
+    const map = Array.from({ length: n }, () =&amp;gt; Array(n).fill(&amp;#34;*&amp;#34;));
+    map[1][2] = &amp;#34;H&amp;#34;;
+    return map;
+}
+&lt;/code&gt;&lt;/pre&gt;</description>
+        </item>
+        <item>
         <title>About this blog</title>
-        <link>https://e6d1fe.github.io/e6d1fe-blog/about/</link>
+        <link>https://e6d1fe.github.io/e6d1fe-blog/post/about/</link>
         <pubDate>Tue, 27 Feb 2024 16:54:26 +0900</pubDate>
 
-        <guid>https://e6d1fe.github.io/e6d1fe-blog/about/</guid>
-        <description>&lt;h3 id=&#34;hi-my-name-is-sehyun&#34;&gt;Hi! My name is Sehyun.&lt;/h3&gt;
+        <guid>https://e6d1fe.github.io/e6d1fe-blog/post/about/</guid>
+        <description>&lt;img src="https://e6d1fe.github.io/e6d1fe-blog/post/about/cover.jpeg" alt="Featured image of post About this blog" /&gt;&lt;h3 id=&#34;hi-my-name-is-sehyun&#34;&gt;Hi! My name is Sehyun.&lt;/h3&gt;
 &lt;p&gt;I&amp;rsquo;m an undergrad student at Yonsei University in Seoul, South Korea.&lt;br&gt;
 I&amp;rsquo;m a CTM (Creative Technology Management) major, which is a combination of IT and management studies.&lt;/p&gt;
 &lt;p&gt;I mainly study frontend web development, and I&amp;rsquo;m interested in the following topics:&lt;/p&gt;