refactor: create front-matter date-created date-updated (#95)

src/posts/docs/2558.md

@@ -3,6 +3,9 @@ title: '2558번: A+B - 2'
 description: 'C 및 Cpp 언어로 풀이한 백준 2558번 문제.'
 tags:
   - 'baekjoon'
+date:
+  created: '2023-01-16'
+  updated: '2024-06-28'
 ---
 
 6개월만에 코딩공부를 다시 시작했더니 C언어 문법을 많이 잊어버렸다. 백준 티어도 올릴겸, 코딩 공부도 다시 시작할겸 가장 기초적인 문제들부터 풀어나가고자 한다. 예전에 1000번 문제를 풀어버려서, 2558번 문제부터 풀기 시작하였다.

src/posts/docs/classic-branch-protection-rules.md

@@ -3,6 +3,9 @@ title: "GitHub's classic branch protection rules"
 description: 'Branch 보호 규칙은 GitHub에서 협업 시 혼란을 방지하기 위해 특정 Branch에 대한 접근과 변경 사항을 관리하는 필수 규칙으로, PR 요구, 승인, 상태 체크 등 다양한 설정을 통해 코드 품질과 협업 효율성을 높인다.'
 tags:
   - 'git'
+date:
+  created: '2024-06-31'
+  updated: '2024-06-31'
 ---
 
 Branch 보호 규칙(Branch Protection Rules)을 설정하는 것은 중요한 일이다. 협업에 규칙이 없다면, 각자 자신의 방식대로 일을 진행하기에 프로젝트는 엉망이 될 것이다. 인원이 적다면 큰 문제는 아니겠지만, 실무에서 적게는 2명 많게는 수십 수백명이 하나의 저장소를 관리하기에 규칙은 필수적이다. 특히 Git의 Branch는 협업을 위한 기본 토대이기에, 규칙을 정해야만 협업 시의 혼란을 방지할 수 있다.

src/posts/docs/composition-of-javascript.md

@@ -3,6 +3,9 @@ title: '자바스크립트(***JavaScript***)의 구성'
 description: '웹 브라우저에서의 JavaScript는 `window` 객체를 중심으로, ECMAScript(코어), DOM, BOM 세 가지 하위 요소로 구성되며, 각각 웹 페이지의 내용과 브라우저 기능을 제어한다.'
 tags:
   - 'javascript'
+date:
+  created: '2024-05-08'
+  updated: '2024-06-12'
 ---
 
 웹 브라우저(클라이언트) 환경에서의 ***JavaScript***는, `window`***<sup>1</sup>*** 란 최상위 객체와, ***코어(JavaScript, ECMAScript)<sup>2</sup>***, ***문서 객체 모델(Document Object Model, DOM)<sup>3</sup>***, ***브라우저 객체 모델(Browser Object Model)<sup>4</sup>*** 이란 3가지 하위 객체 요소들로 구성된다.

src/posts/docs/convention-of-git-commit-message.md

@@ -4,6 +4,9 @@ description: 'Commit Message는 명령문 형태로 작성하며, Header, Body,
 tags:
   - 'convention'
   - 'git'
+date:
+  created: '2024-05-29'
+  updated: '2024-06-11'
 ---
 
 팀원과의 소통, 편리한 과거 기록의 추적을 위해 규칙에 맞는 Commit Message를 작성하는 것이 중요하다.

src/posts/docs/difference-between-b-i-tag-and-strong-em-tag.md

@@ -3,6 +3,9 @@ title: '`<b>` `<i>` ***Tag***와 `<strong>` `<em>` ***Tag***의 차이점'
 description: '`<b>`와 `<i>`는 시각적 스타일만 제공하는 물리적 태그인 반면, `<strong>`과 `<em>`은 의미를 전달하는 논리적(시멘틱) 태그로 웹 접근성에 중요한 역할을 한다.'
 tags:
   - 'html'
+date:
+  created: '2024-05-22'
+  updated: '2024-05-26'
 ---
 
 <!-- markdownlint-disable MD033 -->

src/posts/docs/difference-between-console-log-and-console-dir.md

@@ -3,6 +3,9 @@ title: '`console.log()`와 `console.dir()`의 차이점'
 description: '`console.log()`는 주로 디버깅을 위해 정보를 콘솔에 출력하는 함수로, 트리 구조의 HTML 요소를 출력하며, `console.dir()`은 객체의 속성과 트리 구조를 자세히 표시하는 함수로, JSON과 유사한 객체 표현을 제공한다.'
 tags:
   - 'javascript'
+date:
+  created: '2024-04-02'
+  updated: '2024-05-26'
 ---
 
 ## 1. `console.log()`

src/posts/docs/difference-between-framework-and-library.md

@@ -3,6 +3,9 @@ title: '프레임워크와 라이브러리의 차이점'
 description: '프레임워크는 제어의 역전 개념에 따라 전체 애플리케이션 흐름을 관리하며, 라이브러리는 사용자가 필요에 따라 호출하여 사용하는 코드 집합으로, 이 둘은 제어 권한의 위치와 코드 구조에서 차이를 가진다.'
 tags:
   - 'cs'
+date:
+  created: '2024-05-06'
+  updated: '2024-05-08'
 ---
 
 프레임워크(Framework)와 라이브러리(Library)의 차이점은 무엇일까? 많은 사람들이 이 둘을 혼동하며, 심지어 같은 의미로 사용하기도 한다. 둘 다 미리 만들어 놓은 재사용 가능한 코드 집합이라는 공통점이 있지만, 둘 사이에는 분명한 차이점이 존재한다. 프레임워크는 단지 미리 만들어 둔 반제품이나 확장 가능한 추상 라이브러리 집합이 아니다. 프레임워크가 무엇인지 이해하려면 라이브러리와 어떻게 다른지 그 차이를 알아야 한다. 먼저 프레임워크와 라이브러리의 개념에 대해 살펴보자.

src/posts/docs/difference-between-raw-githubusercontent-and-cdn-jsdelivr.md

@@ -3,6 +3,9 @@ title: '`raw.githubusercontent.com`과 `cdn.jsdelivr.net`의 차이점'
 description: '`raw.githubusercontent.com`은 GitHub의 파일을 원본 그대로 제공하는 반면, `cdn.jsdelivr.net`은 최적화된 콘텐츠를 빠르고 안정적으로 제공하는 CDN 서비스로, 각각의 목적과 기능이 다르다.'
 tags:
   - 'git'
+date:
+  created: '2024-08-02'
+  updated: '2024-08-02'
 ---
 
 GitHub에서 제공하는 `raw.githubusercontent.com`과 대표적인 GitHub CDN(Content Delivery Network) 서비스인 `cdn.jsdelivr.net`의 차이점은 그들의 목적, 동작, 그리고 제공하는 서비스의 방식에서 비롯된다.

src/posts/docs/difference-between-vscode-and-visual-studio.md

@@ -3,6 +3,9 @@ title: '***VScode***와 ***Visual Studio***의 차이점'
 description: '***VScode***는 경량 코드 편집기로 확장성을 제공하며, ***Visual Studio***는 모든 기능을 갖춘 통합 개발 환경(IDE)으로 무겁고 속도가 느리지만 ***.NET*** 및 ***C*** 계열 언어 개발에 최적화되어 있어 사용 목적에 따라 선택이 필요하다.'
 tags:
   - 'vscode'
+date:
+  created: '2024-05-26'
+  updated: '2024-05-26'
 ---
 
 ***VScode***(Visual Studio Code)와 ***Visual Studio***의 차이점을 알아보자.

src/posts/docs/everything-about-markdown.md

@@ -3,6 +3,9 @@ title: '마크다운(***Markdown***)의 모든 것'
 description: '마크다운(Markdown) 및 GFM(GitHub Flavored Markdown)에 대한 개념, 문법, 사용법, 활용법 총 정리.'
 tags:
   - 'markdown'
+date:
+  created: '2024-05-25'
+  updated: '2024-07-27'
 ---
 
 <!-- markdownlint-disable MD003 MD004 MD024 MD029 MD033 MD035 MD046 MD049 MD050 MD055-->

src/posts/docs/git-repository-naming-convention.md

@@ -4,6 +4,9 @@ description: 'Git Repository 이름은 소문자와 대시(`-`)를 사용하여
 tags:
   - 'convention'
   - 'git'
+date:
+  created: '2024-07-21'
+  updated: '2024-07-21'
 ---
 
 일관성 및 가독성 있는 Repository 관리를 위해, 자주 사용되는 Git Repository 이름 규칙을 알아보자.

src/posts/docs/global-variables-and-objects-in-nodejs.md

@@ -3,6 +3,9 @@ title: 'Node.js의 전역 변수와 전역 객체'
 description: 'Node.js는 브라우저의 `window` 객체 대신, 전역 변수(`__filename`, `__dirname`)와 전역 객체(`global`, `process`, `exports`)를 제공하여 시스템 정보, 프로세스 제어, 모듈화를 지원한다.'
 tags:
   - 'nodejs'
+date:
+  created: '2024-04-02'
+  updated: '2024-04-02'
 ---
 
 웹 브라우저에서 동작하는 JavaScript의 최상위 객체는 `window` 객체이다. 하지만, Node.js는 브라우저에서 동작하는 것이 아니므로 `window` 객체가 없는 대신, 전역 변수와 전역 함수를 가지고 있다.

src/posts/docs/how-to-handle-spaces-in-html.md

@@ -3,6 +3,9 @@ title: 'HTML에서 공백을 다루는 방법: ` `, ` `, ` `'
 description: '` `, ` `, ` `는 각각 1칸, 2칸, 3칸 정도 너비의 공백을 생성한다.'
 tags:
   - 'html'
+date:
+  created: '2024-07-16'
+  updated: '2024-07-16'
 ---
 
 HTML의 경우 연속된 공백을 하나의 공백으로 처리하는 성질이 있기에, 공백 특수문자, 정확히는 [HTML 엔터티(Entity)](https://developer.mozilla.org/ko/docs/Glossary/Entity)를 이용하여 연속된 공백을 처리할 수 있다.

src/posts/docs/how-to-separate-case-in-git.md

@@ -3,6 +3,9 @@ title: 'Git에서 파일 혹은 디렉토리의 대ㆍ소문자를 구분하는
 description: 'Git은 대소문자 구분을 기본적으로 하지 않아 대소문자 변경 시 정상 추적되지 않으며, `git mv` 명령어를 사용해 임시 이름을 거쳐 변경해야 올바르게 반영된다.'
 tags:
   - 'git'
+date:
+  created: '2024-08-09'
+  updated: '2024-08-09'
 ---
 
 파일 `myComponent.jsx`를 `MyComponent.jsx`로 변경하는 경우, 디렉토리 `Src`를 `src`로 변경하는 경우 등, '대ㆍ소문자만 변경된 파일 혹은 디렉토리'가 정상 추적되지 않는 경우가 존재한다.

src/posts/docs/identifier-naming-convention.md

@@ -3,6 +3,9 @@ title: '식별자(변수) 이름 명명 규칙: Camel, Pascal, Snake, Kebab'
 description: '프로그래밍에서 식별자 이름 규칙으로 camelCase, PascalCase, snake_case, kebab-case등이 있으며, 각각 코드 가독성과 일관성을 위해 사용된다.'
 tags:
   - 'convention'
+date:
+  created: '2024-07-18'
+  updated: '2024-07-18'
 ---
 
 개발을 하다보면, 프로그래밍 언어마다 식별자 이름 규칙이 서로 다르다는 것을 알 수 있다. 변수, 함수, 클래스 등의 식별자 이름을 지을 때 사용하는 이름 명명 규칙(Naming Convention)을 알아보자.

src/posts/docs/module-path.md

@@ -3,6 +3,9 @@ title: '`path` 모듈'
 description: 'Node.js의 `path` 모듈은 파일과 폴더의 경로 작업을 위한 다양한 메서드(`normalize`, `join`, `resolve`, `dirname`, `basename`, `extname`, `parse`)를 제공한다.'
 tags:
   - 'nodejs'
+date:
+  created: '2024-04-02'
+  updated: '2024-10-08'
 ---
 
 `path`란, Node.js의 기본 내장 모듈이다.
@@ -17,7 +20,7 @@ tags:
 const path = require("path");
 ```
 
-## 2. Method
+## 2. Methods
 
 ### 2-1. `path.normalize()`
 

src/posts/docs/npm-concepts-and-frequently-used-cli-commands.md

@@ -3,6 +3,9 @@ title: '`npm` 개념 및 자주 사용하는 CLI 명령어 모음'
 description: '`npm`은 Node.js의 패키지 관리 도구로, 패키지 설치, 초기화, 업데이트 및 삭제를 지원하며, 다양한 플래그를 통해 의존성과 개발 의존성을 효율적으로 관리할 수 있게 해준다.'
 tags:
   - 'npm'
+date:
+  created: '2024-08-01'
+  updated: '2024-08-01'
 ---
 
 Package(Module)는 프로그램의 구성요소 중 특정 기능을 수행할 수 있는 코드 집합을 의미한다. 유명 플랫폼들은 저마다의 Package Manager를 가지고 있다.

src/posts/docs/npm-package-babel.md

@@ -3,6 +3,9 @@ title: 'NPM Package Babel: `@babel/core`, `@babel/cli`, `@babel/preset-env`, `@b
 description: 'Babel은 최신 자바스크립트 문법을 구버전 문법으로 변환하여 다양한 실행 환경에서 호환성을 제공하는 트랜스파일러로, ES6+ 코드뿐만 아니라 TypeScript와 JSX도 지원하며, 개발의존성으로 설치하여 사용할 수 있다.'
 tags:
   - 'npm'
+date:
+  created: '2024-04-03'
+  updated: '2024-08-04'
 ---
 
 개발자들이 실행 환경에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 유용한 도구인 바벨(Babel)에 대해 알아보자. 아래 내용들은 Babel 7 기반의 설명들이다.

src/posts/docs/npm-package-dotenv.md

@@ -3,6 +3,9 @@ title: 'NPM Package Dotenv: `dotenv`, `dotenv-webpack`'
 description: '`dotenv` 라이브러리를 사용하면 Node.js 프로젝트에서 환경 변수를 `.env` 파일로 관리하고 쉽게 접근할 수 있으며, 이를 통해 개발 환경에 따라 다른 설정을 안전하게 사용할 수 있다.'
 tags:
   - 'npm'
+date:
+  created: '2024-04-04'
+  updated: '2024-04-05'
 ---
 
 `dotenv`를 통해 환경 변수를 `.env` 파일로 관리하는 방법에 대해 알아보자.

src/posts/docs/npm-package-react.md

@@ -3,6 +3,9 @@ title: 'NPM Package React: `react`, `react-dom`'
 description: '`react`는 UI 컴포넌트를 생성하는 핵심 라이브러리이고, `react-dom`은 이를 웹 브라우저의 DOM에 렌더링하는 역할을 하며 두 라이브러리는 함께 사용된다.'
 tags:
   - 'npm'
+date:
+  created: '2024-04-05'
+  updated: '2024-07-11'
 ---
 
 React 개발의 필수 요소인 `react`, `react-dom`에 대해 알아보자.

src/posts/docs/overview-of-javascript.md

@@ -3,6 +3,9 @@ title: '자바스크립트(***JavaScript***)의 개요'
 description: '자바스크립트는 처음에 클라이언트 측 스크립트 언어로 시작했지만, ECMAScript 표준을 기반으로 브라우저와 서버 측에서 다양한 상호작용과 복잡한 프로그래밍을 수행하는 강력한 언어로 발전했다.'
 tags:
   - 'javascript'
+date:
+  created: '2024-05-08'
+  updated: '2024-07-12'
 ---
 
 자바스크립트(***JavaScript***)가 처음 등장했을 때는 웹 브라우저(클라이언트)측에서 데이터 유효성 검사 등을 담당하는 스크립트 언어에 불과했다.

src/posts/docs/require-and-import.md

@@ -3,6 +3,9 @@ title: '자바스크립트 CommonJS 및 ES 모듈 내보내기/불러오기 (`re
 description: 'Node.js에서 모듈을 불러오는 방법으로 `require`(CommonJS)와 `import`(ES6)가 있으며, 각각의 사용법과 장단점이 있다. CommonJS는 하위 호환성을 유지하며, `exports`와 `module.exports`를 통해 객체를 내보내고 불러온다. 반면, ES6 모듈은 가독성이 높고 성능이 우수하며, `export`와 `default export`를 사용해 더 명확하게 모듈을 관리한다. ES 모듈을 사용할 때는 `.js` 확장자를 붙여야 한다.'
 tags:
   - 'nodejs'
+date:
+  created: '2024-04-02'
+  updated: '2024-07-22'
 ---
 
 자바스크립트 개발을 하다보면 `require`나 `import` 키워드를 통해 외부 라이브러리를 불러오는 코드를 자주 보게 된다. `require`는 Node.js에서 예전부터 사용되고 있는 CommonJS의 키워드이고, `import`는 ES6(ES2015)에서 새롭게 도입되어 현재 자바스크립트 생태계에서 표준이 되어가고 있는 키워드이다. 두 개의 키워드 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있지만, 비슷한듯 약간씩 다른 문법 때문에 개발자들을 혼란스럽게 하기도 한다.

src/posts/docs/software-developer-types.md

@@ -3,6 +3,9 @@ title: '소프트웨어 개발자 직군을 구분하는 기준'
 description: '소프트웨어 개발자는 플랫폼(윈도우, 웹, 앱, 시스템, 게임)과 업무 환경(네트워크, 데이터베이스, 솔루션, 공통업무, AI, 블록체인, SAP ABAP) 등 여러 기준에 따라 구분되며, 각 직군마다 익혀야 할 기술과 요구 사항이 다르다.'
 tags:
   - 'cs'
+date:
+  created: '2024-03-06'
+  updated: '2024-03-06'
 ---
 
 소프트웨어 개발자 직군을 구분하는 기준에 대해 알아보자.

src/posts/docs/what-is-github-issues.md

@@ -3,6 +3,9 @@ title: '***Github Issues***란 무엇인가?'
 description: 'GitHub의 **Issues**는 버그 수정, 일정, 아이디어 등을 관리할 수 있는 도구로, **Projects**와 통합되어 시각화 및 자동화 기능을 제공하며, **Commit**과 연동하여 이슈를 추적할 수 있도록 돕는다.'
 tags:
   - 'git'
+date:
+  created: '2024-03-21'
+  updated: '2024-07-21'
 ---
 
 ***Issues***란, ***Issues Tracking***을 할 수 있도록 ***Github***에서 제공하는 도구이다. 자체 기능인 ***Issues***, ***Projects***, ***Insights*** 등의 다양한 시각화 도구들을 함께 제공한다.

src/posts/docs/what-is-nvm-and-nvmrc.md

@@ -3,6 +3,9 @@ title: '`nvm`과 `.nvmrc`란 무엇인가?'
 description: '`nvm`은 Node.js 버전 관리 도구로, `.nvmrc` 파일을 사용해 프로젝트에 필요한 Node.js 버전을 기록하고 쉽게 설치하거나 변경할 수 있도록 돕는다.'
 tags:
   - 'nodejs'
+date:
+  created: '2024-07-20'
+  updated: '2024-07-22'
 ---
 
 Node.js 작업 간, 원활한 협업을 위해 사용하는 `nvm`과 `.nvmrc`에 대해 알아보자.

src/posts/docs/when-loading-files-in-a-server-component-should-i-use-process-cwd-or-dirname.md

@@ -3,6 +3,9 @@ title: '서버 컴포넌트에서 파일을 불러올 때, `process.cwd()`와 `_
 description: 'Next.js에서는 번들링 후 경로가 변경될 수 있는 `__dirname`보다, 항상 프로젝트 루트 디렉토리를 가리키는 `process.cwd()`를 사용하는 것이 파일 경로 관리에 더 안정적이다.'
 tags:
   - 'nextjs'
+date:
+  created: '2024-09-14'
+  updated: '2024-09-14'
 ---
 
 **Vercel**(**Next.js**)의 공식 가이드 [How to Load Data from a File in Next.js](https://vercel.com/guides/loading-static-file-nextjs-api-route)를 읽다 문득 궁금한 점이 생겼다.

src/posts/docs/when-using-file-based-metadata-the-favicon-is-not-displayed-correctly.md

@@ -3,6 +3,9 @@ title: 'Next.js에서 File-based Metadata를 이용할 때, Favicon이 정상적
 description: 'Favicon이 Next.js의 App Router에서 변경되지 않는 문제는 브라우저의 캐싱 때문일 수 있으며, 개발자 도구를 통해 캐시 비우기 및 강력 새로고침을 수행하면 해결될 가능성이 높다.'
 tags:
   - 'nextjs'
+date:
+  created: '2024-09-18'
+  updated: '2024-09-18'
 ---
 
 Next.js의 App Router에서는 [File-based Metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata#file-based-metadata)를 이용하여, Favicon을 설정할 수 있다. 하지만, `app` 혹은 `src/app` 등 공식 문서에서 언급된 정상 경로에 Favicon 파일을 두었음에도, 해당 Favicon으로 변경되지 않는 문제가 발생한다.