Next 버전 업데이트 및 Velite 마이그레이션

.eslintIgnore

@@ -0,0 +1,2 @@
+next.config.mjs
+tailwind.config.js

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 *.contentlayer
+*.velite
 *.git
 *.next
 *.webpack
@@ -18,3 +19,4 @@ next-env.d.ts
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+node_modules

.prettierrc.json

@@ -1,5 +1,12 @@
 {
-  "plugins": ["prettier-plugin-tailwindcss"],
+  "plugins": [
+    "prettier-plugin-tailwindcss",
+    "@trivago/prettier-plugin-sort-imports"
+  ],
+  "importOrder": ["^#styles(.*)$", "<THIRD_PARTY_MODULES>", "^#(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "importOrderGroupNamespaceSpecifiers": true,
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": false,

public/blog/2023/2023_10/2023_10_08.mdx → content/posts/2023/2023_10/2023_10_08.mdx

@@ -2,7 +2,7 @@
 title: Next.js 블로그 제작기 (1)
 description: 블로그 제작 도구 선정
 date: 2023-10-08
-thumbnail: /blogImages/image00.webp
+thumbnail: /images/image00.webp
 category:
   - TypeScript
   - Next.js
@@ -31,13 +31,13 @@ series: 블로그 제작기
 
 ### Gatsby
 
-![GatsbyThumbnail](</blogImages/2023/2023_10/2023_10_08/2023_10_08_(1).webp>)
+![GatsbyThumbnail](</images/2023/2023_10/2023_10_08/2023_10_08_(1).webp>)
 첫 번째로는 **Gatsby**가 있습니다. react 기반의 정적 사이트 생성 프레임워크 입니다.
 **Gatsby**는 서버 없이 오로지 정적 사이트를 생성하기 위해 사용합니다.
 
 ### Next.js
 
-![NextJsThumbnail](</blogImages/2023/2023_10/2023_10_08/2023_10_08_(2).webp>)
+![NextJsThumbnail](</images/2023/2023_10/2023_10_08/2023_10_08_(2).webp>)
 두 번째로는 **Next.js**가 있습니다. react 기반 풀스택 프레임워크이고, 기본적으로 SSR을 지원하지만,
 사용자의 선택하에 CSR 또한 가능합니다.
 
@@ -47,7 +47,7 @@ series: 블로그 제작기
 이번 블로그 생성의 목적은 물론 제가 사용하기 위한 블로그를 만들자는 이유도 있었지만,
 필드에서 사용하는 실전적인 도구를 사용해보고자 하는 목적도 있었기 때문이었습니다.
 
-![GatsbyVersusNextJs](</blogImages/2023/2023_10/2023_10_08/2023_10_08_(3).webp>)
+![GatsbyVersusNextJs](</images/2023/2023_10/2023_10_08/2023_10_08_(3).webp>)
 
 npm trends를 통해 보아도, gatsby보다 next의 사용량이 월등히 많기도 합니다.
 

public/blog/2023/2023_10/2023_10_09.mdx → content/posts/2023/2023_10/2023_10_09.mdx

@@ -2,7 +2,7 @@
 title: Next.js 블로그 제작기 (2)
 description: MD 파일 파싱하여 렌더링하기
 date: 2023-10-09
-thumbnail: /blogImages/image00.webp
+thumbnail: /images/image00.webp
 category:
   - TypeScript
   - Next.js
@@ -18,12 +18,12 @@ series: 블로그 제작기
 
 ### Markdown(.md)
 
-![MarkdownThumbnail](</blogImages/2023/2023_10/2023_10_09/2023_10_09_(1).webp>)
+![MarkdownThumbnail](</images/2023/2023_10/2023_10_09/2023_10_09_(1).webp>)
 기존에 알고있던 마크다운입니다. 텍스트 기반의 마크업 언어입니다.
 
 ### Markdown + JSX(.mdx)
 
-![MdxThumbnail](</blogImages/2023/2023_10/2023_10_09/2023_10_09_(2).webp>)
+![MdxThumbnail](</images/2023/2023_10/2023_10_09/2023_10_09_(2).webp>)
 기존에 존재하던 마크다운에 + JSX 컴포넌트를 사용할 수 있게 만든 마크업 언어입니다.
 React / Next를 공부하고 있는 저로써는 JSX를 마다할 필요가 없었습니다.. 만
 

public/blog/2023/2023_10/2023_10_21.mdx → content/posts/2023/2023_10/2023_10_21.mdx

@@ -2,7 +2,7 @@
 title: Next.js 블로그 제작기 (3)
 description: MDX 파일 파싱하여 렌더링하기
 date: 2023-10-21
-thumbnail: /blogImages/image00.webp
+thumbnail: /images/image00.webp
 category:
   - TypeScript
   - Next.js
@@ -21,7 +21,7 @@ series: 블로그 제작기
 
 ### STEP 1. Contentlayer 소개
 
-![Contentlayer](</blogImages/2023/2023_10/2023_10_21/2023_10_21_(1).webp>)
+![Contentlayer](</images/2023/2023_10/2023_10_21/2023_10_21_(1).webp>)
 
 저는 **Contentlayer**라는 도구를 사용하여 mdx 파일을 파싱 할 겁니다.
 **Contentlayer**는 정적 콘텐츠 관리 도구 인데요, 현재까지는 **Next.js**에서만 사용합니다. (**Remix**나 **SvelteKit**은 지원 고려중이라고 합니다.)
@@ -124,7 +124,7 @@ export const Post = defineDocumentType(() => ({
 title: Next.js 블로그 제작기 (3)
 description: Next.js로 나만의 블로그를..
 date: 2023-10-21
-thumbnail: /blogImages/image02.jpg
+thumbnail: /images/image02.jpg
 category:
   - TypeScript
   - Next.js

public/blog/2023/2023_10/2023_10_27.mdx → content/posts/2023/2023_10/2023_10_27.mdx

@@ -2,7 +2,7 @@
 title: 우테코 프리코스 6기 1주차 회고
 description: 우테코 프리코스 6기 1주차
 date: 2023-10-27
-thumbnail: /blogImages/2023/2023_10/2023_10_27/2023_10_27_(1).webp
+thumbnail: /images/2023/2023_10/2023_10_27/2023_10_27_(1).webp
 category:
   - Chat
 series: 우테코 프리코스 6기

public/blog/2023/2023_11/2023_11_02.mdx → content/posts/2023/2023_11/2023_11_02.mdx

@@ -2,7 +2,7 @@
 title: 우테코 프리코스 6기 2주차 회고
 description: 우테코 프리코스 6기 2주차
 date: 2023-11-02
-thumbnail: /blogImages/2023/2023_10/2023_10_27/2023_10_27_(1).webp
+thumbnail: /images/2023/2023_10/2023_10_27/2023_10_27_(1).webp
 category:
   - Chat
 series: 우테코 프리코스 6기

public/blog/2023/2023_11/2023_11_12.mdx → content/posts/2023/2023_11/2023_11_12.mdx

@@ -2,7 +2,7 @@
 title: JSDocs로 TS처럼 JS 사용해보기
 description: JSDocs로 사용자에게 정보 제공하기
 date: 2023-11-12
-thumbnail: /blogImages/2023/2023_11/2023_11_12/2023_11_12_(1).webp
+thumbnail: /images/2023/2023_11/2023_11_12/2023_11_12_(1).webp
 category:
   - JavaScript
 ---
@@ -16,7 +16,7 @@ category:
 
 ## JSDocs가 뭔데?
 
-![jsdocs](</blogImages/2023/2023_11/2023_11_12/2023_11_12_(4).webp>)
+![jsdocs](</images/2023/2023_11/2023_11_12/2023_11_12_(4).webp>)
 
 **JSDocs**는 JS 소스코드 파일에 주석을 달기 위해서 사용되는 마크업 언어입니다!
 해당 요소에 대해서 간략하게 설명을 해준다는 것이 일반 주석과도 다를 것이 없어보이나, **JSDocs**는 일반 주석과는 다르게 추가적인 기능을 가지고있습니다.
@@ -49,11 +49,11 @@ function something(parameter) {
 
 JSDocs를 사용하면 다음과 같은 장점을 얻을 수 있습니다.
 
-![jsdocs1](</blogImages/2023/2023_11/2023_11_12/2023_11_12_(2).webp>)
+![jsdocs1](</images/2023/2023_11/2023_11_12/2023_11_12_(2).webp>)
 
 - 자바스크립트의 불확실한 타입에 대한 힌트 제공 (디버깅의 난이도 하락)
 
-![jsdocs2](</blogImages/2023/2023_11/2023_11_12/2023_11_12_(3).webp>)
+![jsdocs2](</images/2023/2023_11/2023_11_12/2023_11_12_(3).webp>)
 
 - 인텔리센스 활용 가능
 

public/blog/2023/2023_11/2023_11_18.mdx → content/posts/2023/2023_11/2023_11_18.mdx

@@ -2,7 +2,7 @@
 title: 우테코 프리코스 6기 3주차 회고
 description: 우테코 프리코스 6기 3주차
 date: 2023-11-18
-thumbnail: /blogImages/2023/2023_10/2023_10_27/2023_10_27_(1).webp
+thumbnail: /images/2023/2023_10/2023_10_27/2023_10_27_(1).webp
 category:
   - Chat
 series: 우테코 프리코스 6기
@@ -25,7 +25,7 @@ series: 우테코 프리코스 6기
 
 ### 유효성 검증은 도메인의 몫이다
 
-![validation](</blogImages/2023/2023_11/2023_11_18/2023_11_18_(1).webp>)
+![validation](</images/2023/2023_11/2023_11_18/2023_11_18_(1).webp>)
 
 이전에도 작성했던 내용이었던 것 같은데요, 저는 view단에서 유효성 검증을 하고 controller에 넘기는 방식으로 로직을 작성했었습니다.
 하지만 이번에는 앞서 말했듯이 도메인에서 유효성 검사를 진행해야합니다. (테스트 코드를 분석해보면 디테일하게 접근할 수 있습니다.)

public/blog/2023/2023_11/2023_11_19.mdx → content/posts/2023/2023_11/2023_11_19.mdx

@@ -2,7 +2,7 @@
 title: 우테코 프리코스 6기 4주차 회고
 description: 우테코 프리코스 6기 4주차
 date: 2023-11-19
-thumbnail: /blogImages/2023/2023_10/2023_10_27/2023_10_27_(1).webp
+thumbnail: /images/2023/2023_10/2023_10_27/2023_10_27_(1).webp
 category:
   - Chat
 series: 우테코 프리코스 6기

public/blog/2023/2023_11/2023_11_21.mdx → content/posts/2023/2023_11/2023_11_21.mdx

@@ -2,7 +2,7 @@
 title: 우테코 프리코스 6기 결산
 description: 우테코 프리코스 6기 총 결산
 date: 2023-11-21
-thumbnail: /blogImages/2023/2023_10/2023_10_27/2023_10_27_(1).webp
+thumbnail: /images/2023/2023_10/2023_10_27/2023_10_27_(1).webp
 category:
   - Chat
 series: 우테코 프리코스 6기
@@ -16,7 +16,7 @@ series: 우테코 프리코스 6기
 저는 이번이 2번째 프리코스입니다. 작년에 군대를 갓 제대해서 5기 프리코스를 했었는데 그 때 생각이 새록새록 납니다, 그 땐 진짜 아무것도 몰랐거든요
 운 좋게도 들어갔던 피어리뷰 스터디에서 스터디원분들의 리뷰를 한가득 받아가며 모르는걸 허겁지겁 주워담기 바빴던 기억이 나네요
 
-![허겁지겁](</blogImages/2023/2023_11/2023_11_21/2023_11_21_(1).webp>)
+![허겁지겁](</images/2023/2023_11/2023_11_21/2023_11_21_(1).webp>)
 
 (그때 피드백 받은거 찾아보려고했는데 잘 안찾아지네요)
 
@@ -27,7 +27,7 @@ series: 우테코 프리코스 6기
 
 ### 전반적인 자바스크립트 개념에 대한 학습
 
-![기본이 중요하다](</blogImages/2023/2023_11/2023_11_21/2023_11_21_(2).webp>)
+![기본이 중요하다](</images/2023/2023_11/2023_11_21/2023_11_21_(2).webp>)
 
 저는 자바스크립트를 야매로 배웠다고 할 수 있습니다. 저는 스스로 기본기라는게 별로 존재하지 않는 사람이라고 생각해요.
 자바스크립트 자체의 공부는 사실상 얼마 하지 않았습니다. 제 기본기는 모던 자바스크립트 딥다이브 1회독 수준의 기본기입니다 (군대에서 읽었습니다)
@@ -50,7 +50,7 @@ series: 우테코 프리코스 6기
 
 ### 디자인 패턴에 대한 학습
 
-![젠장](</blogImages/2023/2023_11/2023_11_21/2023_11_21_(3).webp>)
+![젠장](</images/2023/2023_11/2023_11_21/2023_11_21_(3).webp>)
 
 저는 싱글톤, MVC.. 저는 전부 프리코스에서 처음 써봤습니다. 디자인 패턴이라 뭔가 어려워 보이잖아요?
 자바스크립트에서 MVC 디자인패턴을 곧이 곧대로 적용하기에는 일정부분 안맞는 부분도 분명 있다고 생각합니다만.. 뭐 이건 중요하지 않죠!
@@ -69,7 +69,7 @@ series: 우테코 프리코스 6기
 
 ### 다양한 시각에서의 코드 접근
 
-![뭔소리지](</blogImages/2023/2023_11/2023_11_21/2023_11_21_(4).webp>)
+![뭔소리지](</images/2023/2023_11/2023_11_21/2023_11_21_(4).webp>)
 
 혼자서 공부를 하다보면 무한의 깊이에 빠진 DFS마냥 더이상 빠져나올 수 없을 때가 있습니다.
 네비게이션이 있다면 좋겠지만, 이 코딩바닥에서 모든 길을 안내받을 수는 없는 법입니다. 그럴때는 주위를 둘러보면 되구요

public/blog/2023/2023_12/2023_12_03.mdx → content/posts/2023/2023_12/2023_12_03.mdx

@@ -2,7 +2,7 @@
 title: Next.js 블로그 제작기 (4)
 description: 서치콘솔 등록하기
 date: 2023-12-03
-thumbnail: /blogImages/image00.webp
+thumbnail: /images/image00.webp
 category:
   - TypeScript
   - Next.js
@@ -26,7 +26,7 @@ series: 블로그 제작기
 
 각각의 플랫폼에서는 이렇게 서치 콘솔을 제공하고 있습니다! 그럼 어떻게 등록하냐구요?
 
-![naver_search_advisor](</blogImages/2023/2023_12/2023_12_03/2023_12_03_(1).webp>)
+![naver_search_advisor](</images/2023/2023_12/2023_12_03/2023_12_03_(1).webp>)
 
 이런식으로 등록하고 싶은 URL을 넣어 줍니다! 넣고 다음 과정으로 가면 **HTML 태그**를 하나 줍니다.
 이 태그를 복사해서 Nextjs 13 app router 기준으로 **layout.tsx** 에 head 태그를 하나 만들어 그 사이에 넣어주면 됩니다!
@@ -65,7 +65,7 @@ Allow:/
 사이트맵은 웹 사이트 내에 모든 페이지 목록을 나열한 페이지입니다. 당장 제 블로그에도 경로 뒤에 **.sitemap.xml** 을 입력하신다면 블로그의 사이트맵을 확인할 수 있습니다.
 사이트맵을 서치 콘솔에 제출하면, 크롤링 과정에서 쉽게 나타나지 않는 페이지도 색인 할 수 있도록 도와줍니다.
 
-![sitemap](</blogImages/2023/2023_12/2023_12_03/2023_12_03_(2).webp>)
+![sitemap](</images/2023/2023_12/2023_12_03/2023_12_03_(2).webp>)
 
 사이트맵은 위와 같이 구성되어있습니다. 그럼 이제 어떻게 만들 수 있을까요?
 

public/blog/2023/2023_12/2023_12_10.mdx → content/posts/2023/2023_12/2023_12_10.mdx

@@ -2,7 +2,7 @@
 title: 자바스크립트와 This 바인딩
 description: 자바스크립트의 this에 대해서 알아봐요
 date: 2023-12-10
-thumbnail: /blogImages/2023/2023_12/2023_12_10/2023_12_10_(1).webp
+thumbnail: /images/2023/2023_12/2023_12_10/2023_12_10_(1).webp
 category:
   - JavaScript
 ---

public/blog/2023/2023_12/2023_12_16.mdx → content/posts/2023/2023_12/2023_12_16.mdx

@@ -2,7 +2,7 @@
 title: 2023년을 마무리하며 (1)
 description: 한것들, 그리고 하고싶은 것들
 date: 2023-12-16
-thumbnail: /blogImages/2023/2023_12/2023_12_16/2023_12_16_(1).webp
+thumbnail: /images/2023/2023_12/2023_12_16/2023_12_16_(1).webp
 category:
   - Chat
 ---

public/blog/2023/2023_12/2023_12_20.mdx → content/posts/2023/2023_12/2023_12_20.mdx

@@ -2,7 +2,7 @@
 title: 2023년을 마무리하며 (2)
 description: 한것들, 그리고 하고싶은 것들
 date: 2023-12-20
-thumbnail: /blogImages/2023/2023_12/2023_12_16/2023_12_16_(1).webp
+thumbnail: /images/2023/2023_12/2023_12_16/2023_12_16_(1).webp
 category:
   - Chat
 ---

public/blog/2023/2023_12/2023_12_31.mdx → content/posts/2023/2023_12/2023_12_31.mdx

@@ -2,7 +2,7 @@
 title: v0으로 빠르게 웹 디자인 만들어보기
 description: Vercel v0을 사용하여 웹 디자인을 만들어봐요
 date: 2023-12-31
-thumbnail: /blogImages/2023/2023_12/2023_12_31/2023_12_31_(2).webp
+thumbnail: /images/2023/2023_12/2023_12_31/2023_12_31_(2).webp
 category:
   - React
   - Next.js
@@ -18,7 +18,7 @@ category:
 
 ## v0
 
-![v0](</blogImages/2023/2023_12/2023_12_31/2023_12_31_(1).webp>)
+![v0](</images/2023/2023_12/2023_12_31/2023_12_31_(1).webp>)
 
 - [v0.dev](https://v0.dev/)
 
@@ -29,7 +29,7 @@ category:
 
 ### 사용해보기
 
-![design](</blogImages/2023/2023_12/2023_12_31/2023_12_31_(3).webp>)
+![design](</images/2023/2023_12/2023_12_31/2023_12_31_(3).webp>)
 
 저는 테스트용 주제로 **Personal Tech blog** 라는 키워드를 넣었습니다!
 
@@ -38,7 +38,7 @@ category:
 
 ### 빠르고 간단한 적용
 
-![design code](</blogImages/2023/2023_12/2023_12_31/2023_12_31_(4).webp>)
+![design code](</images/2023/2023_12/2023_12_31/2023_12_31_(4).webp>)
 
 가장 큰 장점이라고 생각하는 부분입니다. 빠르고 간단하게 해당 디자인 코드를 복사 / 설치할 수 있습니다.
 명령어를 통해 프로젝트에 적용할 수 있는 부분은 사용자의 편의성까지 고려해준 부분이라 매우 좋네요!

public/blog/2024/2024_01/2024_01_07.mdx → content/posts/2024/2024_01/2024_01_07.mdx

@@ -2,7 +2,7 @@
 title: 브라우저의 렌더링 과정
 description: html의 렌더링은 어떤식으로 일어날까요
 date: 2024-01-07
-thumbnail: /blogImages/2023/2023_12/2023_12_10/2023_12_10_(1).webp
+thumbnail: /images/2023/2023_12/2023_12_10/2023_12_10_(1).webp
 category:
   - Web
 ---
@@ -32,7 +32,7 @@ IP 주소를 알고난 이후에 브라우저는 서버와 **TCP Handshake** 를
 
 ### DOM 트리
 
-![DomTree](</blogImages/2024/2024_01/2024_01_07/2024_01_07_(1).webp>)
+![DomTree](</images/2024/2024_01/2024_01_07/2024_01_07_(1).webp>)
 
 해당 DOM 트리를 만들기 위해서 4가지의 과정이 필요합니다.
 
@@ -45,17 +45,17 @@ IP 주소를 알고난 이후에 브라우저는 서버와 **TCP Handshake** 를
 
 ### CSSOM 트리
 
-![CSSOMTree](</blogImages/2024/2024_01/2024_01_07/2024_01_07_(2).webp>)
+![CSSOMTree](</images/2024/2024_01/2024_01_07/2024_01_07_(2).webp>)
 
 DOM과 동일한 과정으로 트리를 생성합니다. HTML과 마찬가지로 CSS도 브라우저가 이해하고 처리할 수 있는 형식으로 변환해야 합니다.
 
-![CSSOMTree](</blogImages/2024/2024_01/2024_01_07/2024_01_07_(3).webp>)
+![CSSOMTree](</images/2024/2024_01/2024_01_07/2024_01_07_(3).webp>)
 
 해당 과정을 거치면 CSSOM 트리 구조가 생성됩니다.
 
 ### 렌더링 트리
 
-![RenderingTree](</blogImages/2024/2024_01/2024_01_07/2024_01_07_(4).webp>)
+![RenderingTree](</images/2024/2024_01/2024_01_07/2024_01_07_(4).webp>)
 
 DOM 트리와 CSSOM 트리를 결합한 트리를 렌더링 트리라고 합니다. 이 렌더링 트리에는 페이지 렌더링을 위해 필요한 노드만 포함됩니다.