publishing to gh-pages (2024-08-06)

wacilpong · Aug 6, 2024 · 10d2896 · 10d2896
1 parent 3891a67
commit 10d2896
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 18 deletions.
diff --git a/index.xml b/index.xml
@@ -53,7 +53,7 @@
       <pubDate>Mon, 01 Jan 2024 00:00:00 +0000</pubDate>
 
       <guid>https://wacilpong.github.io/blog/learned/what-i-learned-2024/</guid>
-      <description>2024-07-03 providers 배열에 useClass를 사용하여 서비스를 토큰으로 등록한 경우? 해당 서비스를 컴포넌트로 주입(DI)할 때는 등록한 토큰 이름으로 가져와야 한다. AP</description>
+      <description>2024-08-06 샌드박스 환경에서만 실제로 수정하지 않은 요소의 css가 깨지는 현상이 발생했다. 젠킨스 workspace가 꼬였을지도 모르니 모두 지우고 다시 빌드해봤지</description>
     </item>
 
     <item>

diff --git a/learned/index.xml b/learned/index.xml
@@ -17,7 +17,7 @@
       <pubDate>Mon, 01 Jan 2024 00:00:00 +0000</pubDate>
 
       <guid>https://wacilpong.github.io/blog/learned/what-i-learned-2024/</guid>
-      <description>2024-07-03 providers 배열에 useClass를 사용하여 서비스를 토큰으로 등록한 경우? 해당 서비스를 컴포넌트로 주입(DI)할 때는 등록한 토큰 이름으로 가져와야 한다. AP</description>
+      <description>2024-08-06 샌드박스 환경에서만 실제로 수정하지 않은 요소의 css가 깨지는 현상이 발생했다. 젠킨스 workspace가 꼬였을지도 모르니 모두 지우고 다시 빌드해봤지</description>
     </item>
 
     <item>

diff --git a/learned/what-i-learned-2023/index.html b/learned/what-i-learned-2023/index.html
@@ -156,18 +156,29 @@ <h5>About what I learned at 2023</h5>
 
     <div align="start" class="content"><h2 id="2023-05-14"><strong>2023-05-14</strong></h2>
 <ul>
-<li>js의 <code>exec()</code> 메서드는 주어진 문자열에서 일치하는지 여부를 배열 혹은 null로 반환해준다.
+<li>
+<p>js의 <code>exec()</code> 메서드는 주어진 문자열에서 일치하는지 여부를 배열 혹은 null로 반환해준다.</p>
 <ul>
-<li>이때 exec()에 플래그를 설정(/foo/g, /foo/y 등)하면 이전 일치의 인덱스를 저장하게 된다.</li>
-<li>문서에 따르면 아래와 같다.
+<li>
+<p>이때 exec()에 플래그를 설정(/foo/g, /foo/y 등)하면 이전 일치의 인덱스를 저장하게 된다.</p>
+</li>
+<li>
+<p>문서에 따르면 아래와 같다.</p>
 <blockquote>
 <p>Each call to <code>exec()</code> will update its lastIndex property, so that the next call to exec() will start at the next character.</p>
 </blockquote>
 </li>
-<li>즉, exec()를 호출할 때마다 lastIndex 속성이 업데이트 된다.</li>
-<li>그러면 다음 exec()가 호출되면 다음 문자에서 시작되므로 주의해야 한다.</li>
-<li>더 이상 맞는 것을 찾지 못하면 null을 반환한다.</li>
-<li>아래처럼 null이 반환되고, 또 다시 호출하면 다시 처음부터 실행한다.
+<li>
+<p>즉, exec()를 호출할 때마다 lastIndex 속성이 업데이트 된다.</p>
+</li>
+<li>
+<p>그러면 다음 exec()가 호출되면 다음 문자에서 시작되므로 주의해야 한다.</p>
+</li>
+<li>
+<p>더 이상 맞는 것을 찾지 못하면 null을 반환한다.</p>
+</li>
+<li>
+<p>아래처럼 null이 반환되고, 또 다시 호출하면 다시 처음부터 실행한다.</p>
 <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#75715e">// 예시
 </span><span style="color:#75715e"></span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">str</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;Helloworld!&#34;</span>;
 <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">pattern</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">/([A-Za-z]+)|([ !])/g</span>;
@@ -182,6 +193,7 @@ <h5>About what I learned at 2023</h5>
 </li>
 </ul>
 <p><br /></p>
+<hr />
 <h2 id="2023-04-05"><strong>2023-04-05</strong></h2>
 <ul>
 <li><code>하이드레이션(hydration)</code>
@@ -194,6 +206,7 @@ <h2 id="2023-04-05"><strong>2023-04-05</strong></h2>
 </li>
 </ul>
 <p><br /></p>
+<hr />
 <h2 id="2023-04-05-1"><strong>2023-04-05</strong></h2>
 <ul>
 <li>web API의 <code>stopPropagation()</code> 메서드는 같은 이벤트일 때만 상위 요소로의 전파를 막는 메서드이다.

diff --git a/learned/what-i-learned-2024/index.html b/learned/what-i-learned-2024/index.html
@@ -154,26 +154,78 @@ <h5>About what I learned at 2024</h5>
 
     </div>
 
-    <div align="start" class="content"><h2 id="2024-07-03"><strong>2024-07-03</strong></h2>
+    <div align="start" class="content"><h2 id="2024-08-06"><strong>2024-08-06</strong></h2>
 <ul>
-<li>providers 배열에 useClass를 사용하여 서비스를 토큰으로 등록한 경우?
+<li>샌드박스 환경에서만 실제로 수정하지 않은 요소의 css가 깨지는 현상이 발생했다.</li>
+<li>젠킨스 workspace가 꼬였을지도 모르니 모두 지우고 다시 빌드해봤지만 여전히 발생했다.</li>
+<li>깨지는 css 내용을 각 phase마다 비교해보았지만 똑같았다.</li>
+<li>빌드된 css가 제대로 매핑되어 있는지 <code>&lt;head&gt;</code>태그를 확인한 순간,
+<ul>
+<li><code>!DOCTYPE</code> 위에 <code>&lt;script&gt;</code> 태그가 있는 것을 발견했다.</li>
+<li>(서버에서 페이지 html문서를 서빙해줄 때 태그를 바깥에 그려서 주고 있었음)</li>
+</ul>
+</li>
+</ul>
+<h3 id="1-doctype-html은-어디까지-영향을-주는-것인가">(1) <code>&lt;!DOCTYPE html&gt;</code>은 어디까지 영향을 주는 것인가?</h3>
+<pre><code>A DOCTYPE is a required preamble.
+
+DOCTYPE은 필수 (맨앞)서문이다.
+</code></pre><pre><code>DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.
+
+DOCTYPE은 기존 호환성 이유로 인해 필요하다. **이걸 생략하면 브라우저는 일부 사양과 호환되지 않은 다른 렌더링 모드를 사용할 수도 있다. DOCTYPE을 선언해야만 브라우저가 관련 사양을 따르기 위해 최적의 방식으로 동작한다.
+</code></pre><p>by <a href="https://html.spec.whatwg.org/multipage/syntax.html#the-doctype">HTML공식 스펙문서</a></p>
+<p>즉, 이를 선언하지 않거나 html문서 맨 앞에 쓰지 않으면 문서 전체 렌더링에 영향을 준다!!!</p>
+<h3 id="2-렌더링-모드란">(2) 렌더링 모드란?</h3>
+<pre><code>DOCTYPE은 브라우저가 문서를 렌더링 할 때 [quirks mode](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)로 바뀌지 않도록하는 것이 유일한 목적입니다.
+</code></pre><p>by <a href="https://developer.mozilla.org/ko/docs/Glossary/Doctype">MDN문서</a></p>
+<ul>
+<li><strong>Standard mode</strong>
+<ul>
+<li>W3C 표준에 따라 렌더링</li>
+<li><strong>DOCTYPE을 선언하면 이 모드로 실행됨</strong></li>
+<li>브라우저가 출력하려는 하는 문서가 최신이라고 판단하면 이 모드로 렌더링</li>
+</ul>
+</li>
+<li><strong>Quirks mode</strong>
+<ul>
+<li>오래된 브라우저의 행동을 모방하여 렌더링</li>
+<li>브라우저가 출력하려는 하는 문서가 예전 문서라고 판단하면 이 모드로 렌더링</li>
+<li>오래된 웹 페이지들이 최신 버전 브라우저에서 깨져 보이지 않으려는 것이 목적인 모드</li>
+</ul>
+</li>
+<li><strong>Almost Standard mode</strong>
+<ul>
+<li>table cell에서 Quirks mode로 실행하는 것 외에는 Standard mode와 동일</li>
+<li>ex) 사파리, 오페라, Gecko 기반의 모든 브라우저 (Firefox 1.0.1 + IE8)</li>
+</ul>
+</li>
+</ul>
+<h3 id="3-어떤-모드로-렌더링되었는지-어떻게-알-수-있을까">(3) 어떤 모드로 렌더링되었는지 어떻게 알 수 있을까?</h3>
+<ul>
+<li><code>document.compatMode</code></li>
+<li>위 값이 <code>BackCompat</code>라면 쿼크모드이고, 그 외에는 <code>CSS1Compat</code> 이다.</li>
+</ul>
+<p><br /></p>
+<hr />
+<h2 id="2024-07-03"><strong>2024-07-03</strong></h2>
+<ul>
+<li>
+<p>providers 배열에 useClass를 사용하여 서비스를 토큰으로 등록한 경우?</p>
 <ul>
 <li>해당 서비스를 컴포넌트로 주입(DI)할 때는 등록한 토큰 이름으로 가져와야 한다.</li>
 <li><code>APP_TOKEN</code>으로 <code>ServiceA</code>를 provider로 등록했다면, <code>inject(APP_TOKEN)</code>으로 주입해야 한다.</li>
 </ul>
-<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">NgModule</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;@angular/core&#39;</span>;
+<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">NgModule</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;@angular/core&#34;</span>;
 
 <span style="color:#66d9ef">@NgModule</span>({
-  <span style="color:#a6e22e">providers</span><span style="color:#f92672">:</span> [
-    { <span style="color:#a6e22e">provide</span>: <span style="color:#66d9ef">APP_TOKEN</span>, <span style="color:#a6e22e">useClass</span>: <span style="color:#66d9ef">ServiceA</span> }
-  ]
+  <span style="color:#a6e22e">providers</span><span style="color:#f92672">:</span> [{<span style="color:#a6e22e">provide</span>: <span style="color:#66d9ef">APP_TOKEN</span>, <span style="color:#a6e22e">useClass</span>: <span style="color:#66d9ef">ServiceA</span>}],
 })
 <span style="color:#66d9ef">export</span> <span style="color:#66d9ef">class</span> <span style="color:#a6e22e">AppModule</span> {}
-</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">Component</span>, <span style="color:#a6e22e">Inject</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;@angular/core&#39;</span>;
+</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ts" data-lang="ts"><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">Component</span>, <span style="color:#a6e22e">Inject</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;@angular/core&#34;</span>;
 
 <span style="color:#66d9ef">@Component</span>({
-  <span style="color:#a6e22e">selector</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;app-root&#39;</span>,
-  <span style="color:#a6e22e">template</span><span style="color:#f92672">:</span> <span style="color:#e6db74">`Value: {{ value }}`</span>
+  <span style="color:#a6e22e">selector</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;app-root&#34;</span>,
+  <span style="color:#a6e22e">template</span><span style="color:#f92672">:</span> <span style="color:#e6db74">`Value: {{ value }}`</span>,
 })
 <span style="color:#66d9ef">export</span> <span style="color:#66d9ef">class</span> <span style="color:#a6e22e">AppComponent</span> {
   <span style="color:#a6e22e">value</span>: <span style="color:#66d9ef">string</span>;
@@ -185,6 +237,7 @@ <h5>About what I learned at 2024</h5>
 </code></pre></div></li>
 </ul>
 <p><br /></p>
+<hr />
 <h2 id="2024-03-15"><strong>2024-03-15</strong></h2>
 <ul>
 <li>Not Allowed Attribute Filtered 이슈를 만났다!
@@ -199,6 +252,7 @@ <h2 id="2024-03-15"><strong>2024-03-15</strong></h2>
 </li>
 </ul>
 <p><br /></p>
+<hr />
 <h2 id="2024-02-27"><strong>2024-02-27</strong></h2>
 <ul>
 <li>position: relative &gt; position: absolute에 right:0도 없는데 맨 뒤에 붙는다면?