https://kelly-chui.github.io/tags/javascript/Recent content in JavaScript on Kelly DevHugoen-usSun, 12 Jul 2026 21:21:18 +0900https://kelly-chui.github.io/til/2026/til-2026-07-12/Sun, 12 Jul 2026 21:21:18 +0900https://kelly-chui.github.io/til/2026/til-2026-07-12/<h2 id="오늘-한-내용">오늘 한 내용</h2> <ul> <li>Hugo 블로그에서 Mermaid를 외부 CDN 없이 렌더링하도록 변경</li> <li>Mermaid가 필요한 페이지에서만 스크립트를 로드하도록 최적화</li> <li><code>hugo --minify</code>로 빌드 검증</li> </ul> <h2 id="배운-내용">배운 내용</h2> <p>Mermaid 코드 블록은 <code>layouts/_markup/render-codeblock-mermaid.html</code>에서 <code>&lt;pre class=&quot;mermaid&quot;&gt;</code>로 변환하고, <code>layouts/_partials/extend_footer.html</code>에서 Mermaid가 포함된 페이지에만 스크립트를 삽입하도록 구성했다.</p> <p>처음에는 ESM 파일 하나만 <code>static/</code>에 복사했지만, 해당 파일이 내부 chunk를 추가로 참조하는 구조라 렌더링이 깨졌다. 브라우저가 다이어그램을 SVG로 바꾸지 못하고 원문 텍스트처럼 보여서, 의존성이 단순한 <code>mermaid.min.js</code>로 교체했다.</p> <p>외부 CDN을 제거하는 작업도 단순히 파일을 내려받는 것으로 끝나지 않았다. 번들 파일의 의존성과 실행 방식까지 확인해야 실제 정적 사이트에서 안정적으로 동작한다는 것을 배웠다.</p>https://kelly-chui.github.io/posts/node-nodejs-introduction/Sun, 05 Oct 2025 00:00:00 +0000https://kelly-chui.github.io/posts/node-nodejs-introduction/<p>Node.js는 브라우저 밖에서도 JavaScript를 실행할 수 있게 해주는 런타임이다.</p> <h2 id="구조">구조</h2> <p>Node.js를 설치하면 JavaScript 런타임 하나만 설치되는 것이 아닌, 프로젝트 관리, 외부 라이브러리, 개발 도구를 실행하기 위한 여러 구성 요소가 함께 설치된다.</p> <h3 id="node">Node</h3> <p>JavaScript 실행 환경이다. 브라우저 외부에서 JS를 실행할 수 있게 해준다.</p> <p>간단한 파일은 다음처럼 직접 실행할 수도 있다. (다른 언어들과 비슷하다.)</p> <div class="code-theme-github"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-zsh" data-lang="zsh"><span class="line"><span class="cl">node &lt;FILE-NAME&gt;.js</span></span></code></pre></div></div> <h3 id="npmnode-package-manager">npm(Node Package Manager)</h3> <p>Node 프로젝트의 패키지 관리자이다. 외부 라이브러리를 설치하고, 제거하고, 프로젝트의 의존성을 관리한다.</p> <p>외부 라이브러리를 설치할 때는 다음 명령을 사용한다.</p>