chore: migrate prev post

.backup/apps/website/devlogs/frontend/2018/01-10-js-array.mdx → apps/doc/blog/frontend/2018/01-10-js-array.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] Array'
-slug: js-array
 tags: ['JavaScript', 'array', 'sort', 'example']
 date: 2018-01-10T10:00
 ---

.backup/apps/website/devlogs/frontend/2018/02-16-scss-usage.mdx → apps/doc/blog/frontend/2018/02-16-scss-usage.mdx

@@ -1,6 +1,6 @@
 ---
 title: '(SCSS) 사용법 정리'
-tags: ['scss', 'example']
+tags: ['css', 'scss', 'example']
 date: '2018-02-16T15:28'
 ---
 

.backup/apps/website/devlogs/frontend/2018/03-04-js-image-base64.mdx → apps/doc/blog/frontend/2018/03-04-js-image-base64.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] 이미지 파일 base64 인코딩/디코딩'
-slug: js-base64-image
 tags: ['JavaScript', 'base64', 'image', 'example']
 date: '2018-03-04T16:35'
 ---

.backup/apps/website/devlogs/frontend/2018/03-06-js-jszip.mdx → apps/doc/blog/frontend/2018/03-06-js-jszip.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] jsZip - 파일 압축하기'
-slug: js-file-zip
 tags: ['JavaScript', 'file', 'zip', 'example']
 date: 2018-03-06T14:35
 ---

.backup/apps/website/devlogs/frontend/2018/03-06-js-promise.mdx → apps/doc/blog/frontend/2018/03-06-js-promise.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] Promise Pattern Example'
-slug: js-promise-retry-example
 tags: ['JavaScript', 'promise', 'example']
 date: '2018-03-06T14:35'
 ---

.backup/apps/website/devlogs/frontend/2018/03-13-js-image-info.mdx → apps/doc/blog/frontend/2018/03-13-js-image-info.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] 이미지 파일 크기 구하기'
-slug: js-image-file-size
 tags: ['JavaScript', 'base64', 'image', 'file', 'example']
 date: '2018-03-13T13:35'
 ---

.backup/apps/website/devlogs/frontend/2018/03-16-js-base64-to-file.mdx → apps/doc/blog/frontend/2018/03-16-js-base64-to-file.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] base64로 인코딩된 이미지를 file object로 변환하기'
-slug: js-base64-image-to-file
 tags: ['JavaScript', 'base64', 'image', 'file', 'example']
 date: '2018-03-16T13:35'
 ---

.backup/apps/website/devlogs/frontend/2018/10-10-ts-overview.mdx → apps/doc/blog/frontend/2018/10-10-ts-overview.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[TypeScript] Overview'
-slug: ts-overview
 tags: ['TypeScript']
 date: '2018-10-10T18:35'
 ---

.backup/apps/website/devlogs/frontend/2018/10-16-js-load-files.mdx → apps/doc/blog/frontend/2018/10-16-js-load-files.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] 모듈 동적 로딩'
-slug: js-dynamic-loading
 tags: ['JavaScript', 'dynamic-loading', 'example']
 date: '2018-10-16T14:35'
 ---

.backup/apps/website/devlogs/frontend/2018/10-22-js-performance.mdx → apps/doc/blog/frontend/2018/10-22-js-performance.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] 성능 최적화를 위한 코드 스타일'
-slug: js-code-style-for-performance
 tags: ['JavaScript', 'performance', 'codeStyle']
 date: '2018-10-22T09:35'
 ---

.backup/apps/website/devlogs/frontend/2018/10-24-js-closure.mdx → apps/doc/blog/frontend/2018/10-24-js-closure.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] Closure(클로저)'
-slug: js-closure
 tags: ['JavaScript', 'closure']
 date: '2018-10-24T21:35'
 ---

.backup/apps/website/devlogs/frontend/2018/10-24-js-excution-time.mdx → apps/doc/blog/frontend/2018/10-24-js-excution-time.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] 실행 시간 측정하기'
-slug: js-excution-time
 tags: ['JavaScript', 'console', 'date', 'example']
 date: '2018-10-24T14:35'
 ---
@@ -22,7 +21,7 @@ let endTime = new Date().getTime();
 
 console.log(endTime - startTime); // 단위는 밀리세컨드
 /*
-	34 
+	34
 */
 ```
 

.backup/apps/website/devlogs/frontend/2018/10-24-js-scope.mdx → apps/doc/blog/frontend/2018/10-24-js-scope.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] 개념정리 - Scope(스코프)'
-slug: js-scope
 tags: ['JavaScript', 'scope']
 date: '2018-10-24T13:35'
 ---
@@ -179,7 +178,7 @@ function hoistingExam() {
   console.log('hoisting_val =' + hoisting_val);
 }
 /*
-hoisting_val =10  
+hoisting_val =10
 */
 ```
 

.backup/apps/website/devlogs/frontend/2018/10-25-js-onload.mdx → apps/doc/blog/frontend/2018/10-25-js-onload.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] 문서가 로딩되는 시점'
-slug: js-document
 tags: ['JavaScript']
 date: '2018-10-25T00:15'
 ---

.backup/apps/website/devlogs/frontend/2018/10-29-js-this.mdx → apps/doc/blog/frontend/2018/10-29-js-this.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] this'
-slug: js-this
 tags: ['JavaScript']
 date: '2018-10-29T23:15'
 ---

.backup/apps/website/devlogs/frontend/2018/10-31-js-engine.mdx → apps/doc/blog/frontend/2018/10-31-js-engine.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] 자바스크립트 엔진'
-slug: js-engine
 tags: ['JavaScript', 'engine']
 date: '2018-10-31T19:15'
 ---

.backup/apps/website/devlogs/frontend/2018/11-19-js-fp.mdx → apps/doc/blog/frontend/2018/11-19-js-fp.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] 자바스크립트 함수형 프로그래밍'
-slug: js-functional-programming
 tags: ['JavaScript', 'functional']
 date: '2018-11-19T12:15'
 ---
@@ -65,7 +64,7 @@ function parseAge(age) {
 
 ###### 기존 함수를 다른 함수에 제공해서 더 복잡한 추상화를 만든다.
 
-위의 두가지는 클로저를 활용하여 함수를 추상화한다는 뜻인듯.....  
+위의 두가지는 클로저를 활용하여 함수를 추상화한다는 뜻인듯.....
 그리고 **반복을 위한 재귀함수 구현, 고차함수**를 이해하고 구현하기 위해서는 클로저의 개념 이해가 필요하다.
 
 #### 함수형 프로그래밍의 장점

.backup/apps/website/devlogs/frontend/2018/11-21-js-own-property.mdx → apps/doc/blog/frontend/2018/11-21-js-own-property.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] 객체 속성 존재여부 확인하기'
-slug: js-obj-check
 tags: ['JavaScript', 'object']
 date: '2018-11-21T15:15'
 ---

.backup/apps/website/devlogs/frontend/2018/11-27-js-gis.mdx → apps/doc/blog/frontend/2018/11-27-js-gis.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] Map 연동하기(OSM)'
-slug: js-map-gis
 tags: ['JavaScript', 'gis', 'example']
 date: '2018-11-27T15:15'
 ---

.backup/apps/website/devlogs/frontend/2018/12-04-js-test.mdx → apps/doc/blog/frontend/2018/12-04-js-test.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] 테스트 케이스 작성하기'
-slug: js-write-test-code
 tags: ['JavaScript', 'test', 'example']
 date: '2018-12-04T15:15'
 ---

.backup/apps/website/devlogs/frontend/2018/12-05-js-lint.mdx → apps/doc/blog/frontend/2018/12-05-js-lint.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] Lint 설정하기'
-slug: js-lint-configuration
 tags: ['JavaScript', 'lint', 'configuration', 'test', 'codeStyle']
 date: '2018-12-05T10:15'
 ---

.backup/apps/website/devlogs/frontend/2018/12-06-js-babel.mdx → apps/doc/blog/frontend/2018/12-06-js-babel.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] Babel 설정하기'
-slug: js-babel-basic
 tags: ['JavaScript', 'babel', 'configuration', 'transpiler']
 date: '2018-12-06T10:40'
 ---

.backup/apps/website/devlogs/frontend/2018/12-18-js-performance-with-selectbox.mdx → apps/doc/blog/frontend/2018/12-18-js-performance-with-selectbox.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] 대량 데이타 처리를 위한 selectbox'
-slug: js-selectbox-big-data
 tags: ['JavaScript', 'selectbox', 'example']
 date: '2018-12-18T15:35'
 ---

.backup/apps/website/devlogs/frontend/2018/12-18-js-primitive.mdx → apps/doc/blog/frontend/2018/12-18-js-primitive.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] Primitive'
-slug: js-primitive
 tags: ['JavaScript', 'structure']
 date: '2018-12-18T10:35'
 ---

.backup/apps/website/devlogs/frontend/2019/01-09-js-passportjs.mdx → apps/doc/blog/frontend/2019/01-09-js-passportjs.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] Passport.js'
-slug: js-passport
 tags: ['JavaScript', 'oauth']
 date: '2019-01-09T10:35'
 ---

.backup/apps/website/devlogs/frontend/2019/02-19-vuejs-test.mdx → apps/doc/blog/frontend/2019/02-19-vuejs-test.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[VueJS] 테스트케이스 작성하기'
-slug: vuejs-write-test
 tags: ['VueJS', 'test', 'jest']
 date: '2019-02-19T14:35'
 ---

.backup/apps/website/devlogs/frontend/2019/03-28-js-es6-to-es10.mdx → apps/doc/blog/frontend/2019/03-28-js-es6-to-es10.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] ECMAScript 정리하기'
-slug: js-es6-to-es9
 tags: ['JavaScript', 'ecma']
 date: '2019-01-09T10:35'
 ---

.backup/apps/website/devlogs/frontend/2021/01-18-custom-eslint-rule.mdx → apps/doc/blog/frontend/2021/01-18-custom-eslint-rule.mdx

@@ -1,6 +1,5 @@
 ---
 title: '[JavaScript] Custom Eslint 만들어 배포하기'
-slug: js-custom-eslint
 tags: ['JavaScript', 'eslint', 'configuration']
 date: '2021-01-17T22:31'
 ---

.backup/apps/website/devlogs/_todo/react/realword/20210631-react-app-with-realword-prepare.mdx → apps/doc/blog/side-project/realword/20210631-react-app-with-realword-prepare.mdx

@@ -1,15 +1,14 @@
 ---
-category: 'Javascript'
-tags: ['react', 'realword', 'TypeScript']
 title: 'realworld를 이용하여 react app 만들기 - Step1: Installation'
-date: '2021-06-31 14:37:00'
+tags: ['react', 'realword', 'TypeScript']
+date: 2021-06-31
 ---
 
-> 해당 글은 개인적으로 기록을 위해 작성한 부분이므로 잘못되거나 부족한 부분이 있을 수 있습니다.
-
 [realworld](https://gothinkster.github.io/realworld/docs/intro)와 다음과 같은 기술 스텍을 이용해 react app을 만들고,
 해당 서비스를 배포해가는 과정을 기록하기 위한 글이다.
 
+<!--truncate-->
+
 - yarn2
 - TypeScript v4.3.x
 - react-scripts v4.x.x
@@ -38,14 +37,14 @@ npx create-react-app my-app --template typescript
 
 eslint와 prettier 설정을 위해 아래와 같은 패키지를 설치한다.
 
-```bash
-yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier prettier
+```bash npm2yarn
+npm install -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier prettier
 ```
 
 아래의 패키지들은 각자 프로젝트에 정의하는 규칙에 따라 달라질 수 있다.
 
-```bash
-yarn add -D eslint-config-react eslint-import-resolver-babel-module eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks
+```bash npm2yarn
+npm install -D eslint-config-react eslint-import-resolver-babel-module eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks
 ```
 
 - .eslint.rc : https://gist.github.com/gloriaJun/fd5dd389cf727faba1ad66a3cb7427ee#file-eslint-rc
@@ -65,15 +64,15 @@ git stage에 올라간 파일에 대해 git hook을 이용해 lint를 수행하
 
 1. 패키지를 설치한다.
 
-```bash
-yarn add husky lint-staged --dev
+```bash npm2yarn
+npm install husky lint-staged --dev
 ```
 
 2. `.lintstagedrc.js` 파일을 생성하고 https://gist.github.com/gloriaJun/fd5dd389cf727faba1ad66a3cb7427ee#file-lintstagedrc-js 와 같이 정의한다.
 3. husky hook을 생성한다.
 
 ```bash
-yarn husky install
+npx husky install
 ```
 
 4. commit 이전에 lint를 수행하기 위해 `.husky/pre-commit` 파일을 다음과 같이 정의한다.
@@ -96,15 +95,15 @@ yarn lint-staged
 
 1. 패키지를 설치한다.
 
-```bash
-yarn add -D @commitlint/cli @commitlint/config-conventional
+```bash npm2yarn
+npm install -D @commitlint/cli @commitlint/config-conventional
 ```
 
 2. `.commitlintrc.js` 파일을 생성하고 https://gist.github.com/gloriaJun/fd5dd389cf727faba1ad66a3cb7427ee#file-commitlintrc-js와 같이 정의한다.
 3. `.husky/commit-msg` 파일을 생성하고 아래와 같이 정의한다.
 
 ```bash
-yarn commitlint --edit $1
+npx commitlint --edit $1
 ```
 
 ### Configure storybook
@@ -134,9 +133,9 @@ npx sb init
 
 스토리북이 정상적으로 설치가 완료되고, 아래와 같이 실행하여 스토리북 서비스가 기동이 잘 되는 지 확인해볼 수 있다.
 
-```bash
+```bash npm2yarn
 # Starts Storybook in development mode
-yarn storybook
+npm run storybook
 ```
 
 해당 과정까지 문제없이 수행이 되었다면, react-app 생성은 완료된 것이다.
@@ -175,8 +174,8 @@ Ancestor breaking the chain: @storybook/preset-create-react-app@virtual:ddccc941
 
 다음과 같은 패키지를 설치 후, 다시 기동하여 확인한다.
 
-```bash
-yarn add -D  webpack-hot-middleware
+```bash npm2yarn
+npm install -D  webpack-hot-middleware
 ```
 
 ### lint Error

.backup/apps/website/devlogs/_todo/react/realword/20211007-react-app-with-realword-route.mdx → apps/doc/blog/side-project/realword/20211007-react-app-with-realword-route.mdx

@@ -1,15 +1,13 @@
 ---
-category: 'Javascript'
-tags: ['react', 'realword', 'TypeScript']
 title: 'realworld를 이용하여 react app 만들기 - Step2: Route'
-date: '2021-10-07 09:37:00'
+tags: ['react', 'realword', 'TypeScript']
+date: 2021-10-07
 ---
 
-> 해당 글은 개인적으로 기록을 위해 작성한 부분이므로 잘못되거나 부족한 부분이 있을 수 있습니다.
-
-[이전 글](/devLogs/javascript/react/realword/20210631-react-app-with-realword)에서 기본적인 프로젝트 셋팅을 마무리하였고,
 이번에는 realword API 문서에서 [Frontend Specs > Routing Guidelines](https://gothinkster.github.io/realworld/docs/specs/frontend-specs/routing)에 따라서 기본적인 라우팅 정의를 하여 dummy page를 만들어 보려고 한다.
 
+<!--truncate-->
+
 해당 문서를 보면 아래와 같은 라우팅을 생성하도록 가이드 하고 있다.
 
 - Home page (URL: /#/ )
@@ -34,8 +32,8 @@ date: '2021-10-07 09:37:00'
 
 [react-router](https://reactrouter.com/web/guides/quick-start)를 설치한다.
 
-```bash
-yarn add react-router-dom
+```bash npm2yarn
+npm install react-router-dom
 ```
 
 나는 react-router 6를 사용해보기 위해 **react-router-dom@next** 로 설치를 진행하였다.

.backup/apps/website/devlogs/_todo/vanillajs/spa-webpack5/20220504-vanillajs-spa-prepare.mdx → apps/doc/blog/side-project/spa-webpack5/2022-05-04-vanillajs-spa-prepare.mdx

@@ -1,15 +1,13 @@
 ---
-category: 'Javascript'
-tags: ['javascript', 'vanillajs', 'spa', 'yarn3', 'express']
 title: 'VanillaJS로 SPA 환경 구축하기 - Step1: Prepare'
-date: '2022-05-04 19:37:00'
+tags: ['javascript', 'vanillajs', 'yarn3', 'express']
+date: 2022-05-04
 ---
 
-- 관련 글
-  - [VanillaJS로 SPA 환경 구축하기 - Step2: TypeScript](/devLogs/javascript/vanillajs/spa-webpack5/20220506-vanillajs-spa-typescript)
-  - [VanillaJS로 SPA 환경 구축하기 - Step3: Webpack5](https://gtilog.netlify.app/devLogs/javascript/vanillajs/spa-webpack5/20220512-vanillajs-spa-webpack5)
-
 React, VueJs 등과 같은 별도의 프레임워크를 이용하지 않고 온전히 자바스크립트만을 이용하여 Step by Step으로 SPA(Single Page Application)을 구현하기 위한 과정이다.
+
+<!--truncate-->
+
 해당 환경 구성을 위한 과정에서는 아래와 같은 기술들을 사용하여 적용할 예정이다.
 
 - webpack3