JavaScript

오늘 한 내용 Hugo 블로그에서 Mermaid를 외부 CDN 없이 렌더링하도록 변경 Mermaid가 필요한 페이지에서만 스크립트를 로드하도록 최적화 hugo --minify로 빌드 검증 배운 내용 Mermaid 코드 블록은 layouts/_markup/render-codeblock-mermaid.html에서 <pre class="mermaid">로 변환하고, layouts/_partials/extend_footer.html에서 Mermaid가 포함된 페이지에만 스크립트를 삽입하도록 구성했다. 처음에는 ESM 파일 하나만 static/에 복사했지만, 해당 파일이 내부 chunk를 추가로 참조하는 구조라 렌더링이 깨졌다. 브라우저가 다이어그램을 SVG로 바꾸지 못하고 원문 텍스트처럼 보여서, 의존성이 단순한 mermaid.min.js로 교체했다. 외부 CDN을 제거하는 작업도 단순히 파일을 내려받는 것으로 끝나지 않았다. 번들 파일의 의존성과 실행 방식까지 확인해야 실제 정적 사이트에서 안정적으로 동작한다는 것을 배웠다. ...

Node.js는 브라우저 밖에서도 JavaScript를 실행할 수 있게 해주는 런타임이다. 구조 Node.js를 설치하면 JavaScript 런타임 하나만 설치되는 것이 아닌, 프로젝트 관리, 외부 라이브러리, 개발 도구를 실행하기 위한 여러 구성 요소가 함께 설치된다. Node JavaScript 실행 환경이다. 브라우저 외부에서 JS를 실행할 수 있게 해준다. 간단한 파일은 다음처럼 직접 실행할 수도 있다. (다른 언어들과 비슷하다.) node <FILE-NAME>.js npm(Node Package Manager) Node 프로젝트의 패키지 관리자이다. 외부 라이브러리를 설치하고, 제거하고, 프로젝트의 의존성을 관리한다. 외부 라이브러리를 설치할 때는 다음 명령을 사용한다. ...