From f1f48a8ef63a3f3deda21090e5f14f27343c88ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Tue, 22 Oct 2024 14:41:36 +0900 Subject: [PATCH 01/11] chore: add `mark`, `ruby`, `rp` and `rt` to `.markdownlint.json` --- .markdownlint.json | 6 +++++- README.md | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/.markdownlint.json b/.markdownlint.json index 1fbf48a..365ee2c 100644 --- a/.markdownlint.json +++ b/.markdownlint.json @@ -23,7 +23,11 @@ "summary", "image", "code", - "kbd" + "kbd", + "mark", + "ruby", + "rp", + "rt" ] }, "hr-style": { diff --git a/README.md b/README.md index cc613c2..c5dbce0 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ # blog.lumir.page -루밀LuMir의 블로그.📖 +LuMir's blog. 루밀의 블로그.📖 From 5825cba9ce1dbed33290c635e34015f835587369 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Tue, 22 Oct 2024 14:58:24 +0900 Subject: [PATCH 02/11] chore: create `.vscode/extensions.json` --- .github/sync-client.yml | 2 ++ .vscode/extensions.json | 9 +++++++++ 2 files changed, 11 insertions(+) create mode 100644 .vscode/extensions.json diff --git a/.github/sync-client.yml b/.github/sync-client.yml index 0f67ffe..1d53861 100644 --- a/.github/sync-client.yml +++ b/.github/sync-client.yml @@ -34,6 +34,8 @@ lumirlumir/lumirlumir-configs: - source: ./.husky/pre-commit dest: ./configs/.husky/pre-commit # ./.vscode + - source: ./.vscode/extensions.json + dest: ./configs/.vscode/web-extensions.json - source: ./.vscode/settings.json dest: ./configs/.vscode/settings.json # ./ diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..5de777f --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,9 @@ +{ + "recommendations": [ + "dbaeumer.vscode-eslint", + "stylelint.vscode-stylelint", + "esbenp.prettier-vscode", + "editorconfig.editorconfig", + "davidanson.vscode-markdownlint" + ] +} From a7f47ad7bcfa1847ed4de17bdc6678ae4f33a3ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Tue, 22 Oct 2024 15:34:32 +0900 Subject: [PATCH 03/11] refactor: restructure `public/images` directory and fix markdown files accordingly --- .../composition-of-javascript/1.png | Bin .../composition-of-javascript/2.png | Bin .../composition-of-javascript/3.png | Bin .../composition-of-javascript/4.png | Bin .../composition-of-javascript/5.png | Bin .../composition-of-javascript/6.png | Bin .../composition-of-javascript/7.png | Bin .../composition-of-javascript/8.png | Bin .../convention-of-git-commit-message/1.png | Bin .../convention-of-git-commit-message/2.png | Bin .../1.png | Bin .../2.png | Bin .../3.png | Bin .../4.png | Bin .../5.png | Bin .../1.png | Bin .../2.png | Bin .../3.png | Bin .../everything-about-markdown/1.png | Bin .../everything-about-markdown/10.png | Bin .../everything-about-markdown/2.png | Bin .../everything-about-markdown/3.png | Bin .../everything-about-markdown/4.png | Bin .../everything-about-markdown/5.png | Bin .../everything-about-markdown/6.png | Bin .../everything-about-markdown/7.png | Bin .../everything-about-markdown/8.png | Bin .../everything-about-markdown/9.png | Bin .../npm => posts}/npm-package-react/1.png | Bin .../git => posts}/what-is-github-issues/1.png | Bin .../git => posts}/what-is-github-issues/2.png | Bin .../1.png | Bin .../2.png | Bin .../3.png | Bin src/posts/docs/composition-of-javascript.md | 16 ++++----- .../docs/convention-of-git-commit-message.md | 4 +-- ...nce-between-console-log-and-console-dir.md | 10 +++--- ...ifference-between-framework-and-library.md | 6 ++-- src/posts/docs/everything-about-markdown.md | 32 +++++++++--------- src/posts/docs/npm-package-react.md | 2 +- src/posts/docs/what-is-github-issues.md | 4 +-- ...-the-favicon-is-not-displayed-correctly.md | 6 ++-- 42 files changed, 40 insertions(+), 40 deletions(-) rename public/images/{languages/javascript => posts}/composition-of-javascript/1.png (100%) rename public/images/{languages/javascript => posts}/composition-of-javascript/2.png (100%) rename public/images/{languages/javascript => posts}/composition-of-javascript/3.png (100%) rename public/images/{languages/javascript => posts}/composition-of-javascript/4.png (100%) rename public/images/{languages/javascript => posts}/composition-of-javascript/5.png (100%) rename public/images/{languages/javascript => posts}/composition-of-javascript/6.png (100%) rename public/images/{languages/javascript => posts}/composition-of-javascript/7.png (100%) rename public/images/{languages/javascript => posts}/composition-of-javascript/8.png (100%) rename public/images/{conventions/git => posts}/convention-of-git-commit-message/1.png (100%) rename public/images/{conventions/git => posts}/convention-of-git-commit-message/2.png (100%) rename public/images/{languages/javascript => posts}/difference-between-console-log-and-console-dir/1.png (100%) rename public/images/{languages/javascript => posts}/difference-between-console-log-and-console-dir/2.png (100%) rename public/images/{languages/javascript => posts}/difference-between-console-log-and-console-dir/3.png (100%) rename public/images/{languages/javascript => posts}/difference-between-console-log-and-console-dir/4.png (100%) rename public/images/{languages/javascript => posts}/difference-between-console-log-and-console-dir/5.png (100%) rename public/images/{misc => posts}/difference-between-framework-and-library/1.png (100%) rename public/images/{misc => posts}/difference-between-framework-and-library/2.png (100%) rename public/images/{misc => posts}/difference-between-framework-and-library/3.png (100%) rename public/images/{languages/markdown => posts}/everything-about-markdown/1.png (100%) rename public/images/{languages/markdown => posts}/everything-about-markdown/10.png (100%) rename public/images/{languages/markdown => posts}/everything-about-markdown/2.png (100%) rename public/images/{languages/markdown => posts}/everything-about-markdown/3.png (100%) rename public/images/{languages/markdown => posts}/everything-about-markdown/4.png (100%) rename public/images/{languages/markdown => posts}/everything-about-markdown/5.png (100%) rename public/images/{languages/markdown => posts}/everything-about-markdown/6.png (100%) rename public/images/{languages/markdown => posts}/everything-about-markdown/7.png (100%) rename public/images/{languages/markdown => posts}/everything-about-markdown/8.png (100%) rename public/images/{languages/markdown => posts}/everything-about-markdown/9.png (100%) rename public/images/{languages/npm => posts}/npm-package-react/1.png (100%) rename public/images/{tools/git => posts}/what-is-github-issues/1.png (100%) rename public/images/{tools/git => posts}/what-is-github-issues/2.png (100%) rename public/images/{languages/nextjs => posts}/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/1.png (100%) rename public/images/{languages/nextjs => posts}/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/2.png (100%) rename public/images/{languages/nextjs => posts}/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/3.png (100%) diff --git a/public/images/languages/javascript/composition-of-javascript/1.png b/public/images/posts/composition-of-javascript/1.png similarity index 100% rename from public/images/languages/javascript/composition-of-javascript/1.png rename to public/images/posts/composition-of-javascript/1.png diff --git a/public/images/languages/javascript/composition-of-javascript/2.png b/public/images/posts/composition-of-javascript/2.png similarity index 100% rename from public/images/languages/javascript/composition-of-javascript/2.png rename to public/images/posts/composition-of-javascript/2.png diff --git a/public/images/languages/javascript/composition-of-javascript/3.png b/public/images/posts/composition-of-javascript/3.png similarity index 100% rename from public/images/languages/javascript/composition-of-javascript/3.png rename to public/images/posts/composition-of-javascript/3.png diff --git a/public/images/languages/javascript/composition-of-javascript/4.png b/public/images/posts/composition-of-javascript/4.png similarity index 100% rename from public/images/languages/javascript/composition-of-javascript/4.png rename to public/images/posts/composition-of-javascript/4.png diff --git a/public/images/languages/javascript/composition-of-javascript/5.png b/public/images/posts/composition-of-javascript/5.png similarity index 100% rename from public/images/languages/javascript/composition-of-javascript/5.png rename to public/images/posts/composition-of-javascript/5.png diff --git a/public/images/languages/javascript/composition-of-javascript/6.png b/public/images/posts/composition-of-javascript/6.png similarity index 100% rename from public/images/languages/javascript/composition-of-javascript/6.png rename to public/images/posts/composition-of-javascript/6.png diff --git a/public/images/languages/javascript/composition-of-javascript/7.png b/public/images/posts/composition-of-javascript/7.png similarity index 100% rename from public/images/languages/javascript/composition-of-javascript/7.png rename to public/images/posts/composition-of-javascript/7.png diff --git a/public/images/languages/javascript/composition-of-javascript/8.png b/public/images/posts/composition-of-javascript/8.png similarity index 100% rename from public/images/languages/javascript/composition-of-javascript/8.png rename to public/images/posts/composition-of-javascript/8.png diff --git a/public/images/conventions/git/convention-of-git-commit-message/1.png b/public/images/posts/convention-of-git-commit-message/1.png similarity index 100% rename from public/images/conventions/git/convention-of-git-commit-message/1.png rename to public/images/posts/convention-of-git-commit-message/1.png diff --git a/public/images/conventions/git/convention-of-git-commit-message/2.png b/public/images/posts/convention-of-git-commit-message/2.png similarity index 100% rename from public/images/conventions/git/convention-of-git-commit-message/2.png rename to public/images/posts/convention-of-git-commit-message/2.png diff --git a/public/images/languages/javascript/difference-between-console-log-and-console-dir/1.png b/public/images/posts/difference-between-console-log-and-console-dir/1.png similarity index 100% rename from public/images/languages/javascript/difference-between-console-log-and-console-dir/1.png rename to public/images/posts/difference-between-console-log-and-console-dir/1.png diff --git a/public/images/languages/javascript/difference-between-console-log-and-console-dir/2.png b/public/images/posts/difference-between-console-log-and-console-dir/2.png similarity index 100% rename from public/images/languages/javascript/difference-between-console-log-and-console-dir/2.png rename to public/images/posts/difference-between-console-log-and-console-dir/2.png diff --git a/public/images/languages/javascript/difference-between-console-log-and-console-dir/3.png b/public/images/posts/difference-between-console-log-and-console-dir/3.png similarity index 100% rename from public/images/languages/javascript/difference-between-console-log-and-console-dir/3.png rename to public/images/posts/difference-between-console-log-and-console-dir/3.png diff --git a/public/images/languages/javascript/difference-between-console-log-and-console-dir/4.png b/public/images/posts/difference-between-console-log-and-console-dir/4.png similarity index 100% rename from public/images/languages/javascript/difference-between-console-log-and-console-dir/4.png rename to public/images/posts/difference-between-console-log-and-console-dir/4.png diff --git a/public/images/languages/javascript/difference-between-console-log-and-console-dir/5.png b/public/images/posts/difference-between-console-log-and-console-dir/5.png similarity index 100% rename from public/images/languages/javascript/difference-between-console-log-and-console-dir/5.png rename to public/images/posts/difference-between-console-log-and-console-dir/5.png diff --git a/public/images/misc/difference-between-framework-and-library/1.png b/public/images/posts/difference-between-framework-and-library/1.png similarity index 100% rename from public/images/misc/difference-between-framework-and-library/1.png rename to public/images/posts/difference-between-framework-and-library/1.png diff --git a/public/images/misc/difference-between-framework-and-library/2.png b/public/images/posts/difference-between-framework-and-library/2.png similarity index 100% rename from public/images/misc/difference-between-framework-and-library/2.png rename to public/images/posts/difference-between-framework-and-library/2.png diff --git a/public/images/misc/difference-between-framework-and-library/3.png b/public/images/posts/difference-between-framework-and-library/3.png similarity index 100% rename from public/images/misc/difference-between-framework-and-library/3.png rename to public/images/posts/difference-between-framework-and-library/3.png diff --git a/public/images/languages/markdown/everything-about-markdown/1.png b/public/images/posts/everything-about-markdown/1.png similarity index 100% rename from public/images/languages/markdown/everything-about-markdown/1.png rename to public/images/posts/everything-about-markdown/1.png diff --git a/public/images/languages/markdown/everything-about-markdown/10.png b/public/images/posts/everything-about-markdown/10.png similarity index 100% rename from public/images/languages/markdown/everything-about-markdown/10.png rename to public/images/posts/everything-about-markdown/10.png diff --git a/public/images/languages/markdown/everything-about-markdown/2.png b/public/images/posts/everything-about-markdown/2.png similarity index 100% rename from public/images/languages/markdown/everything-about-markdown/2.png rename to public/images/posts/everything-about-markdown/2.png diff --git a/public/images/languages/markdown/everything-about-markdown/3.png b/public/images/posts/everything-about-markdown/3.png similarity index 100% rename from public/images/languages/markdown/everything-about-markdown/3.png rename to public/images/posts/everything-about-markdown/3.png diff --git a/public/images/languages/markdown/everything-about-markdown/4.png b/public/images/posts/everything-about-markdown/4.png similarity index 100% rename from public/images/languages/markdown/everything-about-markdown/4.png rename to public/images/posts/everything-about-markdown/4.png diff --git a/public/images/languages/markdown/everything-about-markdown/5.png b/public/images/posts/everything-about-markdown/5.png similarity index 100% rename from public/images/languages/markdown/everything-about-markdown/5.png rename to public/images/posts/everything-about-markdown/5.png diff --git a/public/images/languages/markdown/everything-about-markdown/6.png b/public/images/posts/everything-about-markdown/6.png similarity index 100% rename from public/images/languages/markdown/everything-about-markdown/6.png rename to public/images/posts/everything-about-markdown/6.png diff --git a/public/images/languages/markdown/everything-about-markdown/7.png b/public/images/posts/everything-about-markdown/7.png similarity index 100% rename from public/images/languages/markdown/everything-about-markdown/7.png rename to public/images/posts/everything-about-markdown/7.png diff --git a/public/images/languages/markdown/everything-about-markdown/8.png b/public/images/posts/everything-about-markdown/8.png similarity index 100% rename from public/images/languages/markdown/everything-about-markdown/8.png rename to public/images/posts/everything-about-markdown/8.png diff --git a/public/images/languages/markdown/everything-about-markdown/9.png b/public/images/posts/everything-about-markdown/9.png similarity index 100% rename from public/images/languages/markdown/everything-about-markdown/9.png rename to public/images/posts/everything-about-markdown/9.png diff --git a/public/images/languages/npm/npm-package-react/1.png b/public/images/posts/npm-package-react/1.png similarity index 100% rename from public/images/languages/npm/npm-package-react/1.png rename to public/images/posts/npm-package-react/1.png diff --git a/public/images/tools/git/what-is-github-issues/1.png b/public/images/posts/what-is-github-issues/1.png similarity index 100% rename from public/images/tools/git/what-is-github-issues/1.png rename to public/images/posts/what-is-github-issues/1.png diff --git a/public/images/tools/git/what-is-github-issues/2.png b/public/images/posts/what-is-github-issues/2.png similarity index 100% rename from public/images/tools/git/what-is-github-issues/2.png rename to public/images/posts/what-is-github-issues/2.png diff --git a/public/images/languages/nextjs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/1.png b/public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/1.png similarity index 100% rename from public/images/languages/nextjs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/1.png rename to public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/1.png diff --git a/public/images/languages/nextjs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/2.png b/public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/2.png similarity index 100% rename from public/images/languages/nextjs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/2.png rename to public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/2.png diff --git a/public/images/languages/nextjs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/3.png b/public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/3.png similarity index 100% rename from public/images/languages/nextjs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/3.png rename to public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/3.png diff --git a/src/posts/docs/composition-of-javascript.md b/src/posts/docs/composition-of-javascript.md index 7c0f036..4511264 100644 --- a/src/posts/docs/composition-of-javascript.md +++ b/src/posts/docs/composition-of-javascript.md @@ -19,13 +19,13 @@ tags: 아래 그림은 호스트 환경이 웹 브라우저(클라이언트)일 때 사용할 수 있는 기능을 개괄적으로 보여준다. -![window, JavaScript, DOM, BOM](/public/images/languages/javascript/composition-of-javascript/1.png?raw=true) +![window, JavaScript, DOM, BOM](/public/images/posts/composition-of-javascript/1.png?raw=true) ## 1. `window` 객체 ***JavaScript***의 최상위(루트) 객체이자, 모든 객체가 소속된 전역(***Global***) 객체이다. 어디서든 접근이 가능하다고 하여 전역 객체라 불리며, 객체화된 수많은 구성 요소들로 이루어져 있다. -![window object](/public/images/languages/javascript/composition-of-javascript/2.png?raw=true) +![window object](/public/images/posts/composition-of-javascript/2.png?raw=true) ### 1-1. 역할 @@ -85,11 +85,11 @@ console.log(window.a.id); // 1 ***DOM***은 전체페이지를 노드 계층(Node Tree) 구조의 객체들로 변환하며, ***HTML*** 페이지의 각 부분을 각기 다른 데이터를 포함하는 다양한 타입의 노드로 표현한다. -![Document Object](/public/images/languages/javascript/composition-of-javascript/3.png?raw=true) +![Document Object](/public/images/posts/composition-of-javascript/3.png?raw=true) ### 3-1. ***DOM***의 구조 (The ***HTML*** ***DOM*** tree of objects) -![The HTML DOM tree of objects](/public/images/languages/javascript/composition-of-javascript/4.png?raw=true) +![The HTML DOM tree of objects](/public/images/posts/composition-of-javascript/4.png?raw=true) 노드 종류 | 역할 :--- | :--- @@ -111,19 +111,19 @@ Comment Node | ***HTML*** 문서의 ***Comment***(주석) `navigator` 객체는 브라우저와 운영체제에 대한 정보를 제공한다. 객체에는 다양한 ***Property***가 있는데, 가장 잘 알려진 ***Property***는 현재 사용 중인 브라우저 정보를 알려주는 `navigator.userAgent`와 브라우저가 실행 중인 운영체제(***Windows***, ***Linux***, ***Mac*** 등) 정보를 알려주는 `navigator.platform`이다. 이는 주로 호환성 문제를 해결하기 위해 사용된다. -![navigator object](/public/images/languages/javascript/composition-of-javascript/5.png?raw=true) +![navigator object](/public/images/posts/composition-of-javascript/5.png?raw=true) ### 4-2. `screen` `screen` 객체는 화면에 대한 정보를 알려준다. 너비(`width`), 높이(`height`), 픽셀(`pixelDepth`), 컬러(`colorDepth`), 화면 방향(`orientation`), 작업표시줄을 제외한 너비와 높이(`availWidth`, `availHeight`) 등이 있다. 화면 크기에 따라 다른 동작을 하고 싶을 때 사용한다. -![screen object](/public/images/languages/javascript/composition-of-javascript/6.png?raw=true) +![screen object](/public/images/posts/composition-of-javascript/6.png?raw=true) ### 4-3. `location` `location` 객체는 ***URL*** 주소에 대한 정보를 제공하여, 현재 ***URL***을 읽을 수 있게 해주고 새로운 ***URL***로 변경(redirect)할 수 있게 해준다. -![location object](/public/images/languages/javascript/composition-of-javascript/7.png?raw=true) +![location object](/public/images/posts/composition-of-javascript/7.png?raw=true) ### 4-4. `frames` @@ -135,7 +135,7 @@ Returns the `window` itself, which is an ***array-like object***, listing the di `history` 객체는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공한다. -![history object](/public/images/languages/javascript/composition-of-javascript/8.png?raw=true) +![history object](/public/images/posts/composition-of-javascript/8.png?raw=true) ### 4-6. `XMLHttpRequest` diff --git a/src/posts/docs/convention-of-git-commit-message.md b/src/posts/docs/convention-of-git-commit-message.md index 8b4ad1e..c514a4f 100644 --- a/src/posts/docs/convention-of-git-commit-message.md +++ b/src/posts/docs/convention-of-git-commit-message.md @@ -107,8 +107,8 @@ $ git commit -m "fix: Safari에서 모달을 띄웠을 때 스크롤 이슈 수 > Resolves: #1137" ``` -![Ailbaba Fusion commit](/public/images/conventions/git/convention-of-git-commit-message/1.png?raw=true "Ailbaba Fusion commit") -![NHN tui.calendar commit](/public/images/conventions/git/convention-of-git-commit-message/2.png?raw=true "NHN tui.calendar commit") +![Ailbaba Fusion commit](/public/images/posts/convention-of-git-commit-message/1.png?raw=true "Ailbaba Fusion commit") +![NHN tui.calendar commit](/public/images/posts/convention-of-git-commit-message/2.png?raw=true "NHN tui.calendar commit") ## Reference diff --git a/src/posts/docs/difference-between-console-log-and-console-dir.md b/src/posts/docs/difference-between-console-log-and-console-dir.md index d779bd5..66ae646 100644 --- a/src/posts/docs/difference-between-console-log-and-console-dir.md +++ b/src/posts/docs/difference-between-console-log-and-console-dir.md @@ -68,28 +68,28 @@ tags: - `console.log()`: ***HTML*** 형태의 트리구조 출력. - ![console.log()](/public/images/languages/javascript/difference-between-console-log-and-console-dir/1.png?raw=true) + ![console.log()](/public/images/posts/difference-between-console-log-and-console-dir/1.png?raw=true) - `console.dir()`: ***JSON*** 형태의 트리구조 출력. - ![console.dir()](/public/images/languages/javascript/difference-between-console-log-and-console-dir/2.png?raw=true) + ![console.dir()](/public/images/posts/difference-between-console-log-and-console-dir/2.png?raw=true) ### 4-2. `document.body` 출력 - `console.log()`: 해당 ``의 요소 출력. - ![console.log()](/public/images/languages/javascript/difference-between-console-log-and-console-dir/3.png?raw=true) + ![console.log()](/public/images/posts/difference-between-console-log-and-console-dir/3.png?raw=true) - `console.dir()`: 전체 요소 출력. - ![console.dir()](/public/images/languages/javascript/difference-between-console-log-and-console-dir/4.png?raw=true) + ![console.dir()](/public/images/posts/difference-between-console-log-and-console-dir/4.png?raw=true) ### 4-3. 함수 `a()` 출력 - 함수(객체)도 마찬가지로 출력된다. - 만약, `console.log(a());` 및 `console.dir(a());`를 사용할 경우, `()`로 인해 함수를 실행하는 것이 되므로, 둘 다 `true`가 출력된다. - ![console.log() vs console.dir()](/public/images/languages/javascript/difference-between-console-log-and-console-dir/5.png?raw=true) + ![console.log() vs console.dir()](/public/images/posts/difference-between-console-log-and-console-dir/5.png?raw=true) ## Reference diff --git a/src/posts/docs/difference-between-framework-and-library.md b/src/posts/docs/difference-between-framework-and-library.md index 47e9fe1..2e0d6a3 100644 --- a/src/posts/docs/difference-between-framework-and-library.md +++ b/src/posts/docs/difference-between-framework-and-library.md @@ -61,7 +61,7 @@ tags: ### 2-2. ***React.js***는 프레임워크가 아닌가? -![React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리](/public/images/misc/difference-between-framework-and-library/1.png?raw=true) +![React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리](/public/images/posts/difference-between-framework-and-library/1.png?raw=true) ***React***는 프론트엔드 라이브러리이며 프레임워크가 아니다. 하지만, 많은 개발자들이 프레임워크인 것처럼 언급하고 비교한다. 프레임워크의 중요한 특징 중 하나는 바로 '제어의 역전'이다. @@ -77,7 +77,7 @@ tags: ### 2-3. 그럼 ***Express.js***는? -![Express Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크](/public/images/misc/difference-between-framework-and-library/2.png?raw=true) +![Express Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크](/public/images/posts/difference-between-framework-and-library/2.png?raw=true) 홈페이지에 명시된 바와 같이 ***Express.js***는 웹 프레임워크이다. ***Node.js***의 견고한 비동기 통신 지원의 장점을 활용하여 가볍고 빠르며, 쉽게 적용 가능한 웹 앱과 REST API를 쓸 수 있다. @@ -105,7 +105,7 @@ tags: ### 3-2. 요약 -![alt text](/public/images/misc/difference-between-framework-and-library/3.png?raw=true) +![alt text](/public/images/posts/difference-between-framework-and-library/3.png?raw=true) Library | Framework :--- | :--- diff --git a/src/posts/docs/everything-about-markdown.md b/src/posts/docs/everything-about-markdown.md index 5dfc044..a2283aa 100644 --- a/src/posts/docs/everything-about-markdown.md +++ b/src/posts/docs/everything-about-markdown.md @@ -755,8 +755,8 @@ tags: - 출력 - ![석촌호수 러버덕](/public/images/languages/markdown/everything-about-markdown/1.png?raw=true) - ![석촌호수 러버덕](/public/images/languages/markdown/everything-about-markdown/1.png?raw=true "RubberDuck") + ![석촌호수 러버덕](/public/images/posts/everything-about-markdown/1.png?raw=true) + ![석촌호수 러버덕](/public/images/posts/everything-about-markdown/1.png?raw=true "RubberDuck") ##### 2-9-1-2. 참조 이미지 @@ -786,8 +786,8 @@ tags: ![석촌호수 러버덕][Ref1] ![석촌호수 러버덕][Ref2] - [Ref1]: /public/images/languages/markdown/everything-about-markdown/1.png?raw=true - [Ref2]: /public/images/languages/markdown/everything-about-markdown/1.png?raw=true "RubberDuck" + [Ref1]: /public/images/posts/everything-about-markdown/1.png?raw=true + [Ref2]: /public/images/posts/everything-about-markdown/1.png?raw=true "RubberDuck" ##### 2-9-1-3. 이미지에 링크 추가 @@ -800,7 +800,7 @@ tags: ``` - 출력 - [![석촌호수 러버덕](/public/images/languages/markdown/everything-about-markdown/1.png?raw=true "RubberDuck Wiki")](https://en.wikipedia.org/wiki/Rubber_duck) + [![석촌호수 러버덕](/public/images/posts/everything-about-markdown/1.png?raw=true "RubberDuck Wiki")](https://en.wikipedia.org/wiki/Rubber_duck) #### 2-9-2. HTML style @@ -815,8 +815,8 @@ tags: - 출력 - RubberDuck
- RubberDuck + RubberDuck
+ RubberDuck ### 2-10. 코드(Codes) @@ -1184,7 +1184,7 @@ tags: - 출력 - ![참고, 팁, 중요, 경고, 주의가 서로 다른 색의 텍스트와 아이콘으로 렌더링되는 방식을 보여 주는 렌더링된 Markdown 경고의 스크린샷.](/public/images/languages/markdown/everything-about-markdown/2.png?raw=true) + ![참고, 팁, 중요, 경고, 주의가 서로 다른 색의 텍스트와 아이콘으로 렌더링되는 방식을 보여 주는 렌더링된 Markdown 경고의 스크린샷.](/public/images/posts/everything-about-markdown/2.png?raw=true) ### 3-4. 요약 및 접기 기능 @@ -1222,7 +1222,7 @@ tags: - 출력 - ![+1 및 shipit에 대한 이모지 코드가 이모지로 시각적으로 렌더링되는 방법을 보여 주는 렌더링된 GitHub Markdown의 스크린샷.](/public/images/languages/markdown/everything-about-markdown/3.png?raw=true) + ![+1 및 shipit에 대한 이모지 코드가 이모지로 시각적으로 렌더링되는 방법을 보여 주는 렌더링된 GitHub Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/3.png?raw=true) ### 3-6. 지원되는 색 모델 @@ -1232,9 +1232,9 @@ tags: Color|구문|예시|출력 :---:|:---:|:---:|:---: -HEX|`#RRGGBB`|`#0969DA`|![HEX 값 #0969DA 파란색 원으로 표시되는 방법을 보여 주는 렌더링된 Github Markdown의 스크린샷.](/public/images/languages/markdown/everything-about-markdown/4.png?raw=true) -RGB|`rgb(R,G,B)`|`rgb(9, 105, 218)`|![RGB 값 9, 105, 218이 파란색 원으로 표시되는 방법을 보여 주는 렌더링된 Github Markdown의 스크린샷.](/public/images/languages/markdown/everything-about-markdown/5.png?raw=true) -HSL|`hsl(H,S,L)`|`hsl(212, 92%, 45%)`|![HSL 값 212, 92%, 45%가 파란색 원으로 표시되는 방법을 보여 주는 렌더링된 Github Markdown의 스크린샷.](/public/images/languages/markdown/everything-about-markdown/6.png?raw=true) +HEX|`#RRGGBB`|`#0969DA`|![HEX 값 #0969DA 파란색 원으로 표시되는 방법을 보여 주는 렌더링된 Github Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/4.png?raw=true) +RGB|`rgb(R,G,B)`|`rgb(9, 105, 218)`|![RGB 값 9, 105, 218이 파란색 원으로 표시되는 방법을 보여 주는 렌더링된 Github Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/5.png?raw=true) +HSL|`hsl(H,S,L)`|`hsl(212, 92%, 45%)`|![HSL 값 212, 92%, 45%가 파란색 원으로 표시되는 방법을 보여 주는 렌더링된 Github Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/6.png?raw=true) - 입력 @@ -1244,7 +1244,7 @@ HSL|`hsl(H,S,L)`|`hsl(212, 92%, 45%)`|![HSL 값 212, 92%, 45%가 파란색 원 - 출력 - ![output](/public/images/languages/markdown/everything-about-markdown/7.png?raw=true) + ![output](/public/images/posts/everything-about-markdown/7.png?raw=true) > [!NOTE] > @@ -1273,7 +1273,7 @@ HSL|`hsl(H,S,L)`|`hsl(212, 92%, 45%)`|![HSL 값 212, 92%, 45%가 파란색 원 - 출력 - ![팀 멘션 "@Github/support"을(를) 굵고 클릭 가능한 텍스트로 렌더링하는 방법을 보여 주는 렌더링된 Github Markdown의 스크린샷.](/public/images/languages/markdown/everything-about-markdown/8.png?raw=true) + ![팀 멘션 "@Github/support"을(를) 굵고 클릭 가능한 텍스트로 렌더링하는 방법을 보여 주는 렌더링된 Github Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/8.png?raw=true) ### 3-8. 이슈 및 끌어오기 요청 참조 @@ -1305,7 +1305,7 @@ HSL|`hsl(H,S,L)`|`hsl(212, 92%, 45%)`|![HSL 값 212, 92%, 45%가 파란색 원 - 출력 - ![각주를 나타내는 데 사용되는 위 첨자 번호와 메모 내의 선택적 줄 바꿈을 보여 주는 렌더링된 Markdown의 스크린샷.](/public/images/languages/markdown/everything-about-markdown/9.png?raw=true) + ![각주를 나타내는 데 사용되는 위 첨자 번호와 메모 내의 선택적 줄 바꿈을 보여 주는 렌더링된 Markdown의 스크린샷.](/public/images/posts/everything-about-markdown/9.png?raw=true) > [!NOTE] > @@ -1317,7 +1317,7 @@ HSL|`hsl(H,S,L)`|`hsl(212, 92%, 45%)`|![HSL 값 212, 92%, 45%가 파란색 원 섹션 제목을 마우스로 가리켜 렌더링된 파일의 섹션에 직접 연결할 수 있다. -![section link](/public/images/languages/markdown/everything-about-markdown/10.png?raw=true) +![section link](/public/images/posts/everything-about-markdown/10.png?raw=true) ### 3-11. 상대 링크 diff --git a/src/posts/docs/npm-package-react.md b/src/posts/docs/npm-package-react.md index 2194fbd..658ed9b 100644 --- a/src/posts/docs/npm-package-react.md +++ b/src/posts/docs/npm-package-react.md @@ -33,7 +33,7 @@ DOM에서 `react`를 사용하기 위한 라이브러리이다. 웹 인터페이 ## 4. 정리 -![react react-dom](/public/images/languages/npm/npm-package-react/1.png?raw=true) +![react react-dom](/public/images/posts/npm-package-react/1.png?raw=true) ## Reference diff --git a/src/posts/docs/what-is-github-issues.md b/src/posts/docs/what-is-github-issues.md index d408705..0fb35f3 100644 --- a/src/posts/docs/what-is-github-issues.md +++ b/src/posts/docs/what-is-github-issues.md @@ -79,9 +79,9 @@ tags: 대신, ***Github Markdown***의 `- []` 체크리스트 기능만을 이용하여 세부 태스크를 관리하는 것은 가능하다. 제목 바로 아래쪽에서 몇개의 태스크를 진행했는지 상세 진행내역을 확인할 수 있다. -![6 tasks done](/public/images/tools/git/what-is-github-issues/1.png?raw=true) +![6 tasks done](/public/images/posts/what-is-github-issues/1.png?raw=true) -![tasklist](/public/images/tools/git/what-is-github-issues/2.png?raw=true) +![tasklist](/public/images/posts/what-is-github-issues/2.png?raw=true) ## 4. ***Projects Classic*** diff --git a/src/posts/docs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly.md b/src/posts/docs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly.md index a559326..095492f 100644 --- a/src/posts/docs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly.md +++ b/src/posts/docs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly.md @@ -22,15 +22,15 @@ Favicon은 브라우저가 강하게 캐싱하는 대표적인 파일이기에, - 개발자 도구를 켜지 않은 경우의 툴팁. - ![alt text](/public/images/languages/nextjs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/1.png) + ![alt text](/public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/1.png) - 개발자 도구를 켠 경우의 툴팁. - ![alt text](/public/images/languages/nextjs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/2.png) + ![alt text](/public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/2.png) - 개발자 도구를 켠 상태로, 마우스 좌측 버튼을 길게 누르고 있는 경우. - ![alt text](/public/images/languages/nextjs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/3.png) + ![alt text](/public/images/posts/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly/3.png) ## Reference From 889484c9246651265d1b08d6cf132f613a76cdeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Tue, 22 Oct 2024 17:21:16 +0900 Subject: [PATCH 04/11] refactor: update `MARKDOWN_DOCUMENT_DATA_TAG_META` and update `types/index.d.ts` accordingly. --- src/data/index.jsx | 114 ++++++++++++++++++++++++++++++++++++++----- src/types/index.d.ts | 14 +++++- 2 files changed, 115 insertions(+), 13 deletions(-) diff --git a/src/data/index.jsx b/src/data/index.jsx index 867daa1..b061dc5 100644 --- a/src/data/index.jsx +++ b/src/data/index.jsx @@ -1,7 +1,16 @@ import { LuHeading1 } from 'react-icons/lu'; import { RiJavascriptFill } from 'react-icons/ri'; import { TbBrandNextjs } from 'react-icons/tb'; -import { SiVisualstudiocode } from 'react-icons/si'; +import { MdDataObject } from 'react-icons/md'; +import { GiHummingbird } from 'react-icons/gi'; +import { LuNetwork } from 'react-icons/lu'; +import { + SiCplusplus, + SiVisualstudiocode, + SiOpenai, + SiThealgorithms, + SiSynology, +} from 'react-icons/si'; import { FaBook, FaTag, @@ -13,10 +22,13 @@ import { FaNodeJs, FaNpm, FaReact, + FaLinux, + FaDatabase, FaGithub, FaCode, FaScrewdriverWrench, FaLaptopCode, + FaBookOpen, } from 'react-icons/fa6'; /** @@ -99,13 +111,21 @@ export const MARKDOWN_DOCUMENT_DATA_TAG_META = Object.freeze({ reactIcons: , order: 3, }, + cpp: { + name: { + en: 'C/C++', + ko: 'C/C++', + }, + reactIcons: , + order: 4, + }, javascript: { name: { en: 'JavaScript', ko: '자바스크립트', }, reactIcons: , - order: 4, + order: 5, }, nodejs: { name: { @@ -113,7 +133,7 @@ export const MARKDOWN_DOCUMENT_DATA_TAG_META = Object.freeze({ ko: '노드JS', }, reactIcons: , - order: 5, + order: 6, }, npm: { name: { @@ -121,7 +141,7 @@ export const MARKDOWN_DOCUMENT_DATA_TAG_META = Object.freeze({ ko: '노드JS 패키지 매니저', }, reactIcons: , - order: 6, + order: 7, }, react: { name: { @@ -129,7 +149,7 @@ export const MARKDOWN_DOCUMENT_DATA_TAG_META = Object.freeze({ ko: '리액트', }, reactIcons: , - order: 7, + order: 8, }, nextjs: { name: { @@ -137,7 +157,31 @@ export const MARKDOWN_DOCUMENT_DATA_TAG_META = Object.freeze({ ko: '넥스트JS', }, reactIcons: , - order: 8, + order: 9, + }, + linux: { + name: { + en: 'Linux', + ko: '리눅스', + }, + reactIcons: , + order: 10, + }, + data: { + name: { + en: 'Data Format', + ko: '데이터 포맷', + }, + reactIcons: , + order: 11, + }, + database: { + name: { + en: 'Database', + ko: '데이터베이스', + }, + reactIcons: , + order: 12, }, git: { name: { @@ -145,7 +189,7 @@ export const MARKDOWN_DOCUMENT_DATA_TAG_META = Object.freeze({ ko: '깃/깃허브', }, reactIcons: , - order: 9, + order: 13, }, vscode: { name: { @@ -153,7 +197,15 @@ export const MARKDOWN_DOCUMENT_DATA_TAG_META = Object.freeze({ ko: '비주얼 스튜디오 코드', }, reactIcons: , - order: 10, + order: 14, + }, + openai: { + name: { + en: 'OpenAI', + ko: '오픈AI', + }, + reactIcons: , + order: 15, }, baekjoon: { name: { @@ -161,7 +213,31 @@ export const MARKDOWN_DOCUMENT_DATA_TAG_META = Object.freeze({ ko: '백준', }, reactIcons: , - order: 11, + order: 16, + }, + programmers: { + name: { + en: 'Programmers', + ko: '프로그래머스', + }, + reactIcons: , + order: 17, + }, + algorithm: { + name: { + en: 'Algorithm', + ko: '알고리즘', + }, + reactIcons: , + order: 18, + }, + network: { + name: { + en: 'Network', + ko: '네트워크', + }, + reactIcons: , + order: 19, }, convention: { name: { @@ -169,7 +245,7 @@ export const MARKDOWN_DOCUMENT_DATA_TAG_META = Object.freeze({ ko: '코딩 컨벤션', }, reactIcons: , - order: 12, + order: 20, }, cs: { name: { @@ -177,6 +253,22 @@ export const MARKDOWN_DOCUMENT_DATA_TAG_META = Object.freeze({ ko: '컴퓨터 과학', }, reactIcons: , - order: 13, + order: 21, + }, + synology: { + name: { + en: 'Synology Nas', + ko: '시놀로지 나스', + }, + reactIcons: , + order: 22, + }, + essay: { + name: { + en: 'Essay', + ko: '에세이', + }, + reactIcons: , + order: 23, }, }); diff --git a/src/types/index.d.ts b/src/types/index.d.ts index fd841a5..a60b268 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -39,16 +39,26 @@ export type MarkdownDocumentDataTag = | 'html' | 'markdown' | 'css' + | 'cpp' | 'javascript' | 'nodejs' | 'npm' | 'react' | 'nextjs' - | 'convention' + | 'linux' + | 'data' + | 'database' | 'git' | 'vscode' + | 'openai' | 'baekjoon' - | 'cs'; + | 'programmers' + | 'algorithm' + | 'network' + | 'convention' + | 'cs' + | 'synology' + | 'essay'; /** * Metadata for `MarkdownDocument`'s `data`'s `tags`. From 64f76ba711f6716920aab4b93329f187de2cc318 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Tue, 22 Oct 2024 18:42:33 +0900 Subject: [PATCH 05/11] refactor: create `ThemeScript` component --- src/app/layout.jsx | 20 +++--------------- .../common/ThemeScript/ThemeScript.jsx | 21 +++++++++++++++++++ src/components/common/ThemeScript/index.js | 3 +++ 3 files changed, 27 insertions(+), 17 deletions(-) create mode 100644 src/components/common/ThemeScript/ThemeScript.jsx create mode 100644 src/components/common/ThemeScript/index.js diff --git a/src/app/layout.jsx b/src/app/layout.jsx index c59f91b..eece1d9 100644 --- a/src/app/layout.jsx +++ b/src/app/layout.jsx @@ -2,6 +2,7 @@ import { Analytics } from '@vercel/analytics/react'; import { SpeedInsights } from '@vercel/speed-insights/next'; import ThemeProvider from '@/components/common/ThemeProvider'; +import ThemeScript from '@/components/common/ThemeScript'; import Aside from '@/components/layouts/Aside'; import Body from '@/components/layouts/Body'; @@ -19,18 +20,6 @@ import { GITHUB_USER_NAME, GITHUB_USER_BIO } from '@/constants'; import '@/styles/global.scss'; -const themeScript = ` -function getTheme() { - const themeLocalStorage = localStorage.getItem('data-theme'); - - if(themeLocalStorage) return themeLocalStorage; - - return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'; -}; - -document.documentElement.setAttribute('data-theme', getTheme()); -`; - export const metadata = { title: { template: `%s | ${GITHUB_USER_NAME}`, @@ -44,11 +33,8 @@ export default function RootLayout({ children }) { -