-
-
+
);
diff --git a/src/app/blog/series/[series_slug]/_component/SeriesNotFound.tsx b/src/app/blog/series/[series_slug]/_component/SeriesNotFound.tsx
new file mode 100644
index 0000000..f581b94
--- /dev/null
+++ b/src/app/blog/series/[series_slug]/_component/SeriesNotFound.tsx
@@ -0,0 +1,31 @@
+import Link from "next/link";
+
+const SeriesNotFound = () => {
+ return (
+
+
+ 시리즈를 찾을 수 없습니다 😢
+
+
+ 요청하신 시리즈가 존재하지 않거나 삭제되었습니다.
+ 주소가 올바른지 다시 한번 확인해 주세요.
+
+
+ 블로그 홈으로 돌아가기
+
+
+ );
+};
+
+export default SeriesNotFound;
diff --git a/src/app/blog/series/[series_slug]/page.tsx b/src/app/blog/series/[series_slug]/page.tsx
new file mode 100644
index 0000000..3e8b707
--- /dev/null
+++ b/src/app/blog/series/[series_slug]/page.tsx
@@ -0,0 +1,68 @@
+import { getPostMeta, getSeriesList } from "@/lib/postService";
+import ArrowHeadSVG from "@/svg/ArrowHeadSVG";
+import Link from "next/link";
+import { getSeriesBySlug } from "../../../../lib/postService";
+import PostSection from "../../_components/PostSection";
+import SeriesNotFound from "./_component/SeriesNotFound";
+
+export const generateStaticParams = () => {
+ const seriesGroups = getSeriesList();
+
+ return seriesGroups.map((group) => ({
+ series_slug: group.series,
+ }));
+};
+
+interface SeriesPageProps {
+ params: Promise<{ series_slug: string }>;
+}
+
+const SeriesPage = async ({ params }: SeriesPageProps) => {
+ const { series_slug } = await params;
+ const currentSeriesInfo = getSeriesBySlug(series_slug);
+
+ if (!currentSeriesInfo) {
+ return
;
+ }
+
+ const categorys = currentSeriesInfo.categories;
+ const posts = (currentSeriesInfo?.postRefs || []).map((ref) => {
+ return getPostMeta(ref.category, ref.slug);
+ });
+
+ return (
+
+
+
+
+ 블로그 홈
+
+
+ {currentSeriesInfo?.seriesName}
+
+
+
+
+ );
+};
+
+export default SeriesPage;
diff --git a/src/app/fonts.ts b/src/app/fonts.ts
new file mode 100644
index 0000000..d72d794
--- /dev/null
+++ b/src/app/fonts.ts
@@ -0,0 +1,53 @@
+import localFont from "next/font/local";
+
+export const pretendard = localFont({
+ src: [
+ {
+ path: "../assets/fonts/pretendard/Pretendard-Thin.woff2",
+ weight: "100",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-ExtraLight.woff2",
+ weight: "200",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-Light.woff2",
+ weight: "300",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-Regular.woff2",
+ weight: "400",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-Medium.woff2",
+ weight: "500",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-SemiBold.woff2",
+ weight: "600",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-Bold.woff2",
+ weight: "700",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-ExtraBold.woff2",
+ weight: "800",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-Black.woff2",
+ weight: "900",
+ style: "normal",
+ },
+ ],
+ display: "swap",
+ variable: "--font-pretendard",
+});
diff --git a/src/app/globals.css b/src/app/globals.css
index 885e456..d40c080 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,164 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 900;
- font-display: swap;
- src:
- local("Pretendard Black"),
- url("/fonts/pretendard/static/Pretendard-Black.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-Black.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 800;
- font-display: swap;
- src:
- local("Pretendard ExtraBold"),
- url("/fonts/pretendard/static/Pretendard-ExtraBold.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-ExtraBold.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 700;
- font-display: swap;
- src:
- local("Pretendard Bold"),
- url("/fonts/pretendard/static/Pretendard-Bold.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-Bold.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 600;
- font-display: swap;
- src:
- local("Pretendard SemiBold"),
- url("/fonts/pretendard/static/Pretendard-SemiBold.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-SemiBold.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 500;
- font-display: swap;
- src:
- local("Pretendard Medium"),
- url("/fonts/pretendard/static/Pretendard-Medium.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-Medium.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 400;
- font-display: swap;
- src:
- local("Pretendard Regular"),
- url("/fonts/pretendard/static/Pretendard-Regular.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-Regular.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 300;
- font-display: swap;
- src:
- local("Pretendard Light"),
- url("/fonts/pretendard/static/Pretendard-Light.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-Light.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 200;
- font-display: swap;
- src:
- local("Pretendard ExtraLight"),
- url("/fonts/pretendard/static/Pretendard-ExtraLight.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-ExtraLight.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 100;
- font-display: swap;
- src:
- local("Pretendard Thin"),
- url("/fonts/pretendard/static/Pretendard-Thin.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-Thin.woff") format("woff");
-}
-
-@layer base {
- html {
- font-family: "Pretendard", sans-serif !important;
- @apply text-sm md:text-base;
- }
-
- :root {
- --eaeaea: #eaeaea;
- --header-size: 121px;
- }
-
- body {
- margin: 0;
- background-color: #ffff;
- color: #1a1a1a;
- letter-spacing: -1px;
- }
-
- ul,
- li {
- text-decoration: none;
- padding-left: 0px;
- margin: 0;
- }
-
- h2,
- p {
- margin: 0;
- font-weight: 600;
- }
-
- h3 {
- font-weight: 500;
- font-size: 1.2rem;
- }
-
- p {
- font-weight: 400;
- font-size: 1rem;
- }
-
- a {
- text-decoration: none;
- color: #242424;
- }
-
- input {
- cursor: text;
- }
-
- [type="checkbox"]:checked {
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
- }
-
- .dark [type="checkbox"]:checked {
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
- }
-
- [type="checkbox"] {
- border: solid 1px black;
- }
-
- [type="checkbox"]:checked {
- border-color: transparent;
- background-color: currentColor;
- background-size: 100% 100%;
- background-position: 50%;
- background-repeat: no-repeat;
- }
-}
+@import "tailwindcss";
+
+@import "../styles/typography.css";
+@import "../styles/prose.css";
+@import "../styles/codeblock.css";
+
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b21360a..c1095fb 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import { GoogleAnalytics } from "@next/third-parties/google";
import type { Metadata } from "next";
import Footer from "./_components/common/Footer";
import ThemeScript from "./_components/ThemeScript";
+import { pretendard } from "./fonts";
import "./globals.css";
const GA_ID = process.env.NEXT_PUBLIC_GA_ID;
@@ -22,16 +23,19 @@ const RootLayout = ({
children: React.ReactNode;
}>) => {
return (
-
+
-
+
{/* Google Analytics Script */}
{GA_ID &&
}
- {children}
+ {children}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 7302aa9..84a8a55 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,6 +1,5 @@
"use client";
import { useRouter } from "next/navigation";
-import { TfiBackLeft } from "react-icons/tfi";
const NotFound = () => {
const router = useRouter();
@@ -14,8 +13,8 @@ const NotFound = () => {
};
return (
404 ERROR
@@ -23,12 +22,10 @@ const NotFound = () => {
);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 958024b..7f268af 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,3 @@
-import "@/styles/home.css";
import HistorySection from "./_components/HistorySection";
import InterviewSection from "./_components/InterviewSection";
import LendingSection from "./_components/LendingSection";
@@ -8,9 +7,12 @@ import SkillSection from "./_components/SkillSection";
const Home = () => {
return (
<>
-
+
-
+
diff --git a/public/fonts/pretendard/static/Pretendard-Black.woff2 b/src/assets/fonts/pretendard/Pretendard-Black.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-Black.woff2
rename to src/assets/fonts/pretendard/Pretendard-Black.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-Bold.woff2 b/src/assets/fonts/pretendard/Pretendard-Bold.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-Bold.woff2
rename to src/assets/fonts/pretendard/Pretendard-Bold.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-ExtraBold.woff2 b/src/assets/fonts/pretendard/Pretendard-ExtraBold.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-ExtraBold.woff2
rename to src/assets/fonts/pretendard/Pretendard-ExtraBold.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-ExtraLight.woff2 b/src/assets/fonts/pretendard/Pretendard-ExtraLight.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-ExtraLight.woff2
rename to src/assets/fonts/pretendard/Pretendard-ExtraLight.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-Light.woff2 b/src/assets/fonts/pretendard/Pretendard-Light.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-Light.woff2
rename to src/assets/fonts/pretendard/Pretendard-Light.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-Medium.woff2 b/src/assets/fonts/pretendard/Pretendard-Medium.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-Medium.woff2
rename to src/assets/fonts/pretendard/Pretendard-Medium.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-Regular.woff2 b/src/assets/fonts/pretendard/Pretendard-Regular.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-Regular.woff2
rename to src/assets/fonts/pretendard/Pretendard-Regular.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-SemiBold.woff2 b/src/assets/fonts/pretendard/Pretendard-SemiBold.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-SemiBold.woff2
rename to src/assets/fonts/pretendard/Pretendard-SemiBold.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-Thin.woff2 b/src/assets/fonts/pretendard/Pretendard-Thin.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-Thin.woff2
rename to src/assets/fonts/pretendard/Pretendard-Thin.woff2
diff --git a/src/assets/svg/ActiveOffSvg.tsx b/src/assets/svg/ActiveOffSvg.tsx
new file mode 100644
index 0000000..3d9bfd9
--- /dev/null
+++ b/src/assets/svg/ActiveOffSvg.tsx
@@ -0,0 +1,25 @@
+import { SVGAttributes } from "react";
+
+interface ActiveOffSvgProps extends SVGAttributes
{
+ size?: number;
+}
+
+const ActiveOffSvg = ({ size = 24, ...props }: ActiveOffSvgProps) => {
+ return (
+
+ );
+};
+
+export default ActiveOffSvg;
diff --git a/src/assets/svg/ActiveOnSvg.tsx b/src/assets/svg/ActiveOnSvg.tsx
new file mode 100644
index 0000000..0a30ace
--- /dev/null
+++ b/src/assets/svg/ActiveOnSvg.tsx
@@ -0,0 +1,25 @@
+import { SVGAttributes } from "react";
+
+interface ActiveOnSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const ActiveOnSvg = ({ size = 24, ...props }: ActiveOnSvgProps) => {
+ return (
+
+ );
+};
+
+export default ActiveOnSvg;
diff --git a/src/assets/svg/AlertBellSvg.tsx b/src/assets/svg/AlertBellSvg.tsx
new file mode 100644
index 0000000..7cc83e8
--- /dev/null
+++ b/src/assets/svg/AlertBellSvg.tsx
@@ -0,0 +1,39 @@
+interface AlertBellSvgProps {
+ size?: number;
+ activeColor?: string;
+ className?: string;
+}
+
+const AlertBellSvg = ({
+ size = 24,
+ activeColor = "#FF2727",
+ className,
+}: AlertBellSvgProps) => {
+ return (
+
+ );
+};
+
+export default AlertBellSvg;
diff --git a/src/assets/svg/AltArrowLeftSvg.tsx b/src/assets/svg/AltArrowLeftSvg.tsx
new file mode 100644
index 0000000..76094e0
--- /dev/null
+++ b/src/assets/svg/AltArrowLeftSvg.tsx
@@ -0,0 +1,25 @@
+import { SVGAttributes } from "react";
+
+interface AltArrowLeftSvg extends SVGAttributes {
+ size?: number;
+}
+
+const AltArrowLeftSvg = ({ size = 24, ...props }: AltArrowLeftSvg) => {
+ return (
+
+ );
+};
+
+export default AltArrowLeftSvg;
diff --git a/src/assets/svg/AltArrowRightSvg.tsx b/src/assets/svg/AltArrowRightSvg.tsx
new file mode 100644
index 0000000..f6a6575
--- /dev/null
+++ b/src/assets/svg/AltArrowRightSvg.tsx
@@ -0,0 +1,25 @@
+import { SVGAttributes } from "react";
+
+interface AltArrowRightSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const AltArrowRightSvg = ({ size = 24, ...props }: AltArrowRightSvgProps) => {
+ return (
+
+ );
+};
+
+export default AltArrowRightSvg;
diff --git a/src/assets/svg/BusSvg.tsx b/src/assets/svg/BusSvg.tsx
new file mode 100644
index 0000000..ed6b9b2
--- /dev/null
+++ b/src/assets/svg/BusSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const BusSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default BusSvg;
diff --git a/src/assets/svg/CalenderSvg.tsx b/src/assets/svg/CalenderSvg.tsx
new file mode 100644
index 0000000..5e065a6
--- /dev/null
+++ b/src/assets/svg/CalenderSvg.tsx
@@ -0,0 +1,28 @@
+interface CalenderSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const CalenderSvg = ({ size = 24, className }: CalenderSvgProps) => {
+ return (
+
+ );
+};
+
+export default CalenderSvg;
diff --git a/src/assets/svg/DeleteSvg.tsx b/src/assets/svg/DeleteSvg.tsx
new file mode 100644
index 0000000..a895583
--- /dev/null
+++ b/src/assets/svg/DeleteSvg.tsx
@@ -0,0 +1,28 @@
+interface DeleteSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const DeleteSvg = ({ size = 24, className }: DeleteSvgProps) => {
+ return (
+
+ );
+};
+
+export default DeleteSvg;
diff --git a/src/assets/svg/DropdownArrowSvg.tsx b/src/assets/svg/DropdownArrowSvg.tsx
new file mode 100644
index 0000000..3b67a2a
--- /dev/null
+++ b/src/assets/svg/DropdownArrowSvg.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const DropdownArrowSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default DropdownArrowSvg;
diff --git a/src/assets/svg/EditSvg.tsx b/src/assets/svg/EditSvg.tsx
new file mode 100644
index 0000000..9ecd75b
--- /dev/null
+++ b/src/assets/svg/EditSvg.tsx
@@ -0,0 +1,24 @@
+interface EditSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const EditSvg = ({ size = 24, className }: EditSvgProps) => {
+ return (
+
+ );
+};
+
+export default EditSvg;
diff --git a/src/assets/svg/FacebookSvg.tsx b/src/assets/svg/FacebookSvg.tsx
new file mode 100644
index 0000000..0263cbe
--- /dev/null
+++ b/src/assets/svg/FacebookSvg.tsx
@@ -0,0 +1,20 @@
+const FacebookSvg = () => {
+ return (
+
+ );
+};
+
+export default FacebookSvg;
diff --git a/src/assets/svg/FoodSvg.tsx b/src/assets/svg/FoodSvg.tsx
new file mode 100644
index 0000000..b067fc1
--- /dev/null
+++ b/src/assets/svg/FoodSvg.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const FoodSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default FoodSvg;
diff --git a/src/assets/svg/ImageAddSvg.tsx b/src/assets/svg/ImageAddSvg.tsx
new file mode 100644
index 0000000..1e66b5f
--- /dev/null
+++ b/src/assets/svg/ImageAddSvg.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const ImageAddSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default ImageAddSvg;
diff --git a/src/assets/svg/ImageFullSvg.tsx b/src/assets/svg/ImageFullSvg.tsx
new file mode 100644
index 0000000..d94b658
--- /dev/null
+++ b/src/assets/svg/ImageFullSvg.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const ImageFullSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default ImageFullSvg;
diff --git a/src/assets/svg/InstagramSvg.tsx b/src/assets/svg/InstagramSvg.tsx
new file mode 100644
index 0000000..b72e295
--- /dev/null
+++ b/src/assets/svg/InstagramSvg.tsx
@@ -0,0 +1,22 @@
+const InstagramSvg = () => {
+ return (
+
+ );
+};
+
+export default InstagramSvg;
diff --git a/src/assets/svg/KebabMenuSvg.tsx b/src/assets/svg/KebabMenuSvg.tsx
new file mode 100644
index 0000000..ec853d0
--- /dev/null
+++ b/src/assets/svg/KebabMenuSvg.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+const KebabMenuSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default KebabMenuSvg;
diff --git a/src/assets/svg/ListSvg.tsx b/src/assets/svg/ListSvg.tsx
new file mode 100644
index 0000000..47e486a
--- /dev/null
+++ b/src/assets/svg/ListSvg.tsx
@@ -0,0 +1,24 @@
+interface ListSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const ListSvg = ({ size = 24, className }: ListSvgProps) => {
+ return (
+
+ );
+};
+
+export default ListSvg;
diff --git a/src/assets/svg/LogOutSvg.tsx b/src/assets/svg/LogOutSvg.tsx
new file mode 100644
index 0000000..a18780b
--- /dev/null
+++ b/src/assets/svg/LogOutSvg.tsx
@@ -0,0 +1,28 @@
+interface EditSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const LogOutSvg = ({ size = 24, className }: EditSvgProps) => {
+ return (
+
+ );
+};
+
+export default LogOutSvg;
diff --git a/src/assets/svg/MapSvg.tsx b/src/assets/svg/MapSvg.tsx
new file mode 100644
index 0000000..1254a06
--- /dev/null
+++ b/src/assets/svg/MapSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const MapSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default MapSvg;
diff --git a/src/assets/svg/MinusSvg.tsx b/src/assets/svg/MinusSvg.tsx
new file mode 100644
index 0000000..e40f7e6
--- /dev/null
+++ b/src/assets/svg/MinusSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const MinusSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default MinusSvg;
diff --git a/src/assets/svg/MusicSvg.tsx b/src/assets/svg/MusicSvg.tsx
new file mode 100644
index 0000000..2546558
--- /dev/null
+++ b/src/assets/svg/MusicSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const MusicSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default MusicSvg;
diff --git a/src/assets/svg/PaginationNext.tsx b/src/assets/svg/PaginationNext.tsx
new file mode 100644
index 0000000..b15d0a6
--- /dev/null
+++ b/src/assets/svg/PaginationNext.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const PaginationNext = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default PaginationNext;
diff --git a/src/assets/svg/PaginationPrev.tsx b/src/assets/svg/PaginationPrev.tsx
new file mode 100644
index 0000000..6f249e9
--- /dev/null
+++ b/src/assets/svg/PaginationPrev.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const PaginationPrev = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default PaginationPrev;
diff --git a/src/assets/svg/PlusSvg.tsx b/src/assets/svg/PlusSvg.tsx
new file mode 100644
index 0000000..bf28d6a
--- /dev/null
+++ b/src/assets/svg/PlusSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const PlusSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default PlusSvg;
diff --git a/src/assets/svg/SearchSvg.tsx b/src/assets/svg/SearchSvg.tsx
new file mode 100644
index 0000000..e958fbb
--- /dev/null
+++ b/src/assets/svg/SearchSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const SearchSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default SearchSvg;
diff --git a/src/assets/svg/SettingSvg.tsx b/src/assets/svg/SettingSvg.tsx
new file mode 100644
index 0000000..1b1586a
--- /dev/null
+++ b/src/assets/svg/SettingSvg.tsx
@@ -0,0 +1,24 @@
+interface SettingSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const SettingSvg = ({ size = 24, className }: SettingSvgProps) => {
+ return (
+
+ );
+};
+
+export default SettingSvg;
diff --git a/src/assets/svg/SportsSvg.tsx b/src/assets/svg/SportsSvg.tsx
new file mode 100644
index 0000000..adf8735
--- /dev/null
+++ b/src/assets/svg/SportsSvg.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const SportsSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default SportsSvg;
diff --git a/src/assets/svg/StarSvg.tsx b/src/assets/svg/StarSvg.tsx
new file mode 100644
index 0000000..3b39c80
--- /dev/null
+++ b/src/assets/svg/StarSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const StarSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default StarSvg;
diff --git a/src/assets/svg/SwiperNextSvg.tsx b/src/assets/svg/SwiperNextSvg.tsx
new file mode 100644
index 0000000..e4272ee
--- /dev/null
+++ b/src/assets/svg/SwiperNextSvg.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const SwiperNextSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default SwiperNextSvg;
diff --git a/src/assets/svg/SwiperPrevSvg.tsx b/src/assets/svg/SwiperPrevSvg.tsx
new file mode 100644
index 0000000..a4ef4e5
--- /dev/null
+++ b/src/assets/svg/SwiperPrevSvg.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const SwiperPrevSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default SwiperPrevSvg;
diff --git a/src/assets/svg/TourSvg.tsx b/src/assets/svg/TourSvg.tsx
new file mode 100644
index 0000000..c46b023
--- /dev/null
+++ b/src/assets/svg/TourSvg.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const TourSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default TourSvg;
diff --git a/src/assets/svg/UserSvg.tsx b/src/assets/svg/UserSvg.tsx
new file mode 100644
index 0000000..3f79116
--- /dev/null
+++ b/src/assets/svg/UserSvg.tsx
@@ -0,0 +1,24 @@
+interface UserSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const UserSvg = ({ size = 24, className }: UserSvgProps) => {
+ return (
+
+ );
+};
+
+export default UserSvg;
diff --git a/src/assets/svg/WarningSvg.tsx b/src/assets/svg/WarningSvg.tsx
new file mode 100644
index 0000000..ff77195
--- /dev/null
+++ b/src/assets/svg/WarningSvg.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+
+const WarningSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default WarningSvg;
diff --git a/src/assets/svg/WellbeingSvg.tsx b/src/assets/svg/WellbeingSvg.tsx
new file mode 100644
index 0000000..5d65822
--- /dev/null
+++ b/src/assets/svg/WellbeingSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const WellbeingSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default WellbeingSvg;
diff --git a/src/assets/svg/XSvg.tsx b/src/assets/svg/XSvg.tsx
new file mode 100644
index 0000000..99a2d7b
--- /dev/null
+++ b/src/assets/svg/XSvg.tsx
@@ -0,0 +1,18 @@
+const XSvg = () => {
+ return (
+
+ );
+};
+
+export default XSvg;
diff --git a/src/assets/svg/YoutubeSvg.tsx b/src/assets/svg/YoutubeSvg.tsx
new file mode 100644
index 0000000..5e4fe7a
--- /dev/null
+++ b/src/assets/svg/YoutubeSvg.tsx
@@ -0,0 +1,17 @@
+const YoutubeSvg = () => {
+ return (
+
+ );
+};
+export default YoutubeSvg;
diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
new file mode 100644
index 0000000..89b8b59
--- /dev/null
+++ b/src/components/CopyButton.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { cn } from "@/utils/cn";
+import { Copy, CopyCheck } from "lucide-react";
+import { useState } from "react";
+
+interface CopyButtonProps {
+ textToCopy: string;
+ className?: string;
+}
+
+const CopyButton = ({ textToCopy, className }: CopyButtonProps) => {
+ const [isCopied, setIsCopied] = useState(false);
+
+ const handleCopy = () => {
+ if (isCopied) return;
+
+ navigator.clipboard.writeText(textToCopy).then(() => {
+ setIsCopied(true);
+
+ setTimeout(() => {
+ setIsCopied(false);
+ }, 2000);
+ });
+ };
+
+ return (
+
+ );
+};
+
+export default CopyButton;
diff --git a/src/components/HighlightCode.tsx b/src/components/HighlightCode.tsx
deleted file mode 100644
index 2766f59..0000000
--- a/src/components/HighlightCode.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-
-import "@/styles/github.css";
-import "@/styles/highlight.css";
-import "@/styles/post.css";
-import type { PostMetaData } from "@/types/posts.types";
-import { useEffect } from "react";
-import Highlight from "react-highlight";
-
-interface HighlightedCodeProps {
- contentHtml: string;
- metadata: PostMetaData;
-}
-
-const CopySvg = ``;
-const CheckSvg = ``;
-
-const HighlightCode = ({ metadata, contentHtml }: HighlightedCodeProps) => {
- useEffect(() => {
- const codeBlocks = document.querySelectorAll("pre");
-
- codeBlocks.forEach((block) => {
- if (block.querySelector(".copy-button")) return;
-
- const button = document.createElement("button");
- button.innerHTML = CopySvg;
- button.className = "copy-button"; // CSS 클래스 이름 추가
-
- // 복사 이벤트 핸들러
- button.addEventListener("click", () => {
- console.log(button);
- const code = block.querySelector("code")?.textContent || "";
- navigator.clipboard.writeText(code).then(() => {
- button.innerHTML = CheckSvg;
- button.classList.add("check-button"); // check-button 클래스 추가
- button.classList.remove("copy-button");
-
- // 2초 후에 check-button 클래스를 제거
- setTimeout(() => {
- button.innerHTML = CopySvg;
- button.classList.remove("check-button");
- button.classList.add("copy-button");
- }, 2000);
- });
- });
-
- block.style.position = "relative";
- block.appendChild(button);
- });
- }, [contentHtml]);
-
- return (
-
-
-
- {metadata.title}
-
-
-
- {metadata.tags.map((tag: string) => (
-
# {tag}
- ))}
-
-
- 작성일 : {metadata.date}
-
-
-
-
{contentHtml}
-
-
-
-
-
- {img.alt}
-
-
-
-
- {isOpen &&
- modalRoot &&
- createPortal(
-
- ![
- "onClick",
- "onChange",
- "onInput",
- "onKeyDown",
- "onFocus",
- "onBlur",
- "ref", // ref는 내부에서 관리
- "className", // className은 아래에서 병합
- "style", // style은 병합 가능하지만 여기선 단순화
- ].includes(k),
- ),
- )}
- className={
- "absolute flex gap-1 flex-col right-0 top-10 p-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 shadow-lg rounded-lg z-[1000] " +
- (containerProps?.className ?? "")
- }
- >
- {children}
-
,
- modalRoot,
- )}
-
+
+
+ {isOpen &&
+ modalRoot &&
+ createPortal(
+
+ ![
+ "onClick",
+ "onChange",
+ "onInput",
+ "onKeyDown",
+ "onFocus",
+ "onBlur",
+ "ref", // ref는 내부에서 관리
+ "className", // className은 아래에서 병합
+ "style", // style은 병합 가능하지만 여기선 단순화
+ ].includes(k)
+ )
+ )}
+ className={
+ `absolute top-10 right-0 z-1000 flex flex-col gap-1 rounded-lg
+ border border-neutral-300 bg-white p-2 shadow-lg
+ dark:border-neutral-700 dark:bg-neutral-900 ` +
+ (containerProps?.className ?? "")
+ }
+ >
+ {children}
+
,
+ modalRoot
+ )}
+
+
+
+ {langName}
+
+
+
+
+ {domToReact(domNode.children as DOMNode[], parseOptions)}
+
+
+ {parse(contentHtml, parseOptions)}
+
+
+ );
+};
+
+export default PostArticle;
diff --git a/src/components/ScrolltoTopButton.tsx b/src/components/ScrolltoTopButton.tsx
index edc7fb3..4b28b6d 100644
--- a/src/components/ScrolltoTopButton.tsx
+++ b/src/components/ScrolltoTopButton.tsx
@@ -26,15 +26,16 @@ const ScrollToTopButton = () => {
return (
diff --git a/src/components/ThemeToggleButton.tsx b/src/components/ThemeToggleButton.tsx
index 0b3e486..5e57716 100644
--- a/src/components/ThemeToggleButton.tsx
+++ b/src/components/ThemeToggleButton.tsx
@@ -1,187 +1,143 @@
-"use client";
-
-import { Theme, useTheme } from "@/contexts/ThemeContext";
-
-import { ReactNode, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
-interface ThemeItemProps {
- onClickEvent: (theme: Theme) => void;
- currentTarget: boolean;
- children: ReactNode;
- theme: Theme;
-}
-
-const ThemeItem = ({
- onClickEvent,
- currentTarget,
- children,
- theme,
-}: ThemeItemProps) => {
- return (
-
- );
-};
-
-const ThemeToggleButton = () => {
- const { theme, setTheme, resolvedTheme } = useTheme();
- const [isOpen, setIsOpen] = useState(false);
- const [modalRoot, setModalRoot] = useState(null);
- const buttonRef = useRef(null);
- const modalRef = useRef(null);
-
- useEffect(() => {
- setModalRoot(document.getElementById("theme-modal-root"));
- }, []);
-
- useEffect(() => {
- const handleClickOutside = (e: MouseEvent) => {
- if (
- modalRef.current &&
- !modalRef.current.contains(e.target as Node) &&
- !buttonRef.current?.contains(e.target as Node)
- ) {
- setIsOpen(false);
- }
- };
-
- if (isOpen) document.addEventListener("mousedown", handleClickOutside);
- return () => document.removeEventListener("mousedown", handleClickOutside);
- }, [isOpen]);
-
- const onClickEventHendler = (theme: Theme) => {
- setTheme(theme);
- setIsOpen(false);
- };
-
- const icon =
- resolvedTheme === "dark" ? (
-
- ) : (
-
- );
-
- return (
- <>
- {" "}
-
- {isOpen &&
- modalRoot &&
- createPortal(
-
-
-
- Light
-
-
- {" "}
- Dark
-
-
- {" "}
- System
-
-
+
+
+
+ {isOpen &&
+ modalRoot &&
+ createPortal(
+
+
+
+ Light
+
+
+
+
+ Dark
+
+
+
+
+ System
+
+
,
+ modalRoot
+ )}
+
-```
-
-### 커스텀 breakpoint
-tailwind.config 에서 직접 breakpoint를 설정할 수 있습니다.
-```js
-// tailwind.config.js
-
-module.exports = {
- theme: {
- screens: {
- 'sm': '500px',
- // => @media (min-width: 640px) { ... }
-
- 'md': '1000px',
- // => @media (min-width: 1024px) { ... }
-
- 'lg': '1500px',
- // => @media (min-width: 1280px) { ... }
- },
- }
-}
-```
-min, max의 범위를 지정해 설정할 수 도 있습니다.
-```js
-// tailwind.config.js
-
-module.exports = {
- theme: {
- screens: {
- sm: { min: "390px", max: "819px" },
- md: { min: "820px", max: "1023px" },
- lg: { min: "1080px" },
- },
- }
-}
-```
-
-## 추가로
+---
+title: Tailwind CSS 반응형 레이아웃 만들기
+tags: [css]
+date: "2024.12.21"
+---
+이전에 메이플 헬퍼 서비스에 Tailwind CSS를 이용해 반응형 레이아웃을 적용한 과정을 공유하려 합니다.
+
+## Tailwind CSS의 반응형 레이아웃
+유틸리티를 사용해 CSS의 media query처럼 반응형 작업이 가능합니다.
+
+
+
+```html
+
+
+
+```
+
+### 커스텀 breakpoint
+tailwind.config 에서 직접 breakpoint를 설정할 수 있습니다.
+```js
+// tailwind.config.js
+
+module.exports = {
+ theme: {
+ screens: {
+ 'sm': '500px',
+ // => @media (min-width: 640px) { ... }
+
+ 'md': '1000px',
+ // => @media (min-width: 1024px) { ... }
+
+ 'lg': '1500px',
+ // => @media (min-width: 1280px) { ... }
+ },
+ }
+}
+```
+min, max의 범위를 지정해 설정할 수 도 있습니다.
+```js
+// tailwind.config.js
+
+module.exports = {
+ theme: {
+ screens: {
+ sm: { min: "390px", max: "819px" },
+ md: { min: "820px", max: "1023px" },
+ lg: { min: "1080px" },
+ },
+ }
+}
+```
+
+## 추가로
기존에 있는 서비스에 모바일 레이아웃을 적용하면서 느낀점은 반응형 디자인 작업을 할 때면 작은 화면부터 큰 화면으로 작업을 하는게 좋을 것 같다는 생각이 들었습니다.
\ No newline at end of file
diff --git a/src/content/posts/css/DisplayGridLearn.md b/src/content/posts/css/DisplayGridLearn.md
index 016e031..f6352d2 100644
--- a/src/content/posts/css/DisplayGridLearn.md
+++ b/src/content/posts/css/DisplayGridLearn.md
@@ -1,58 +1,58 @@
----
-title: display Grid를 배워보자
-tags: [css]
-date: "2023.02.11"
----
-gird는 행과 열이 있는 레이아웃 시스템을 제공한다. 1차원 레이아웃을 지원하는 flex와 다르게 좀 더 복잡한 레이아웃을 위해 grid를 사용할 수 있다.
-
-## Grid Properties
-
-gird는 flex와 같이 Container와 Item이라는 두가지 개념으로 구분되어 있는데 Container는 Item을 감싸는 부모 요소이며 그 안에 Item을 배치 할 수 있다.
-
-## Grid Container Properties
-
-Container를 위한 속성은 아래와 같다.
-
-| 속성 | 의미 | 예시 |
-| --- | --- | --- |
-| display | 그리드 컨테이너(Container)를 정의 | display : grid |
-| grid-template-rows | 명시적 행(Track)의 크기를 정의 | grid-template-rows: 20px 20px ... grid-template-rows: repeat(3, 20px) |
-| grid-template-columns | 명시적 열(Track)의 크기를 정의 | grid-template-rows: 20px 20px ... grid-template-rows: repeat(3, 20px) |
-| grid-template-areas | 영역(Area) 이름을 참조해 템플릿 생성 | grid-template: grid-template-rows / grid-template-columns grid-template: grid-template-areas grid-template-areas: "header header header" "main main aside" "footer footer footer" |
-| grid-template | grid-template-rows, columns, areas의 단축 속성 | grid-template: "header header header" 80px "main main aside" 350px "footer footer footer" 130px / 2fr 100px 1fr; |
-| row-gap(grid-row-gap) | 행과 행 사이의 간격(Line)을 정의 | row-gap: 100px (크기) |
-| column-gap(grid-column-gap) | 열과 열 사이의 간격(Line)을 정의 | column-gap: 100px (크기) |
-| gap(grid-gap) | 행과 행, 열과 열 사이의 간격을 정의 | gap: grid-row-gap grid-column-gap |
-| grid-auto-rows | 암시적인 행(Track)의 크기를 정의 | grid-auto-rows: 100px |
-| grid-auto-columns | 암시적인 열(Track)의 크기를 정의 | grid-auto-columns: 100px |
-| grid-auto-flow | 자동 배치 알고리즘 방식을 정의 | grid-auto-flow: row 또는 row dense 또는 dense grid-auto-flow: column 또는 column dense |
-| grid | grid-template-xxx과 grid-auto-xxx의 단축 속성 | grid: grid-template grid: grid-template-rows / grid-auto-flow grid-auto-columns grid: grid-auto-flow grid-auto-rows / grid-template-columns |
-| align-content | 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬 | align-content: align-content |
-| justify-content | 그리드 콘텐츠를 수평(행 축) 정렬 | justify-content: justify-content |
-| place-content | align-content와 justify-content의 단축 속성 | place-content: align-content justify-content |
-| align-items | 그리드 아이템(Items)들을 수직(열 축) 정렬 | align-items: align-items |
-| justify-items | 그리드 아이템들을 수평(행 축) 정렬 | justify-items: justify-items |
-| place-items | align-items와 justify-items의 단축 속성 | place-items: align-items justify-items |
-## Grid Item Properties
-
-Item을 위한 속성들은 아래와 같다.
-
-| 속성 | 의미 | 예시 |
-| --- | --- | --- |
-| grid-row-start | 그리드 아이템의 행 시작 위치 지정 | grid-row-start: 1 |
-| grid-row-end | 그리드 아이템의 행 끝 위치 지정 | grid-row-end: 3 |
-| grid-column-start | 그리드 아이템의 열 시작 위치 지정 | grid-column-start: 2 |
-| grid-column-end | 그리드 아이템의 열 끝 위치 지정 | grid-column-end: 3 |
-| grid-row | grid-row-xxx의 단축 속성(행 시작/끝 위치) | grid-row: grid-row-start / grid-row-end |
-| grid-column | grid-column-xxx의 단축 속성(열 시작/끝 위치) | grid-column: grid-column-start / grid-column-end |
-| grid-area | 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성 | grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end |
-| align-self | 단일 그리드 아이템을 수직(열 축) 정렬 | .item:nth-child(1) .item:nth-child(2) .item:nth-child(3) .item:nth-child(4) |
-| justify-self | 단일 그리드 아이템을 수평(행 축) 정렬 | .item:nth-child(1) .item:nth-child(2) .item:nth-child(3) .item:nth-child(4) |
-| place-self | align-self와 justify-self의 단축 속성 | place-self: align-self justify-self |
-| order | 그리드 아이템의 배치 순서를 지정 | .item:nth-child(1) .item:nth-child(3) .item:nth-child(5) |
-| z-index | 그리드 아이템의 쌓이는 순서를 지정 | .item:nth-child(2) grid-area: 1 / 2 / 3 / 3; z-index: 1; |
-[https://www.w3schools.com/css/css_grid.asp](https://www.w3schools.com/css/css_grid.asp)
-
-[https://studiomeal.com/archives/533](https://studiomeal.com/archives/533)
-
-[https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
+---
+title: display Grid를 배워보자
+tags: [css]
+date: "2023.02.11"
+---
+gird는 행과 열이 있는 레이아웃 시스템을 제공한다. 1차원 레이아웃을 지원하는 flex와 다르게 좀 더 복잡한 레이아웃을 위해 grid를 사용할 수 있다.
+
+## Grid Properties
+
+gird는 flex와 같이 Container와 Item이라는 두가지 개념으로 구분되어 있는데 Container는 Item을 감싸는 부모 요소이며 그 안에 Item을 배치 할 수 있다.
+
+## Grid Container Properties
+
+Container를 위한 속성은 아래와 같다.
+
+| 속성 | 의미 | 예시 |
+| --- | --- | --- |
+| display | 그리드 컨테이너(Container)를 정의 | display : grid |
+| grid-template-rows | 명시적 행(Track)의 크기를 정의 | grid-template-rows: 20px 20px ... grid-template-rows: repeat(3, 20px) |
+| grid-template-columns | 명시적 열(Track)의 크기를 정의 | grid-template-rows: 20px 20px ... grid-template-rows: repeat(3, 20px) |
+| grid-template-areas | 영역(Area) 이름을 참조해 템플릿 생성 | grid-template: grid-template-rows / grid-template-columns grid-template: grid-template-areas grid-template-areas: "header header header" "main main aside" "footer footer footer" |
+| grid-template | grid-template-rows, columns, areas의 단축 속성 | grid-template: "header header header" 80px "main main aside" 350px "footer footer footer" 130px / 2fr 100px 1fr; |
+| row-gap(grid-row-gap) | 행과 행 사이의 간격(Line)을 정의 | row-gap: 100px (크기) |
+| column-gap(grid-column-gap) | 열과 열 사이의 간격(Line)을 정의 | column-gap: 100px (크기) |
+| gap(grid-gap) | 행과 행, 열과 열 사이의 간격을 정의 | gap: grid-row-gap grid-column-gap |
+| grid-auto-rows | 암시적인 행(Track)의 크기를 정의 | grid-auto-rows: 100px |
+| grid-auto-columns | 암시적인 열(Track)의 크기를 정의 | grid-auto-columns: 100px |
+| grid-auto-flow | 자동 배치 알고리즘 방식을 정의 | grid-auto-flow: row 또는 row dense 또는 dense grid-auto-flow: column 또는 column dense |
+| grid | grid-template-xxx과 grid-auto-xxx의 단축 속성 | grid: grid-template grid: grid-template-rows / grid-auto-flow grid-auto-columns grid: grid-auto-flow grid-auto-rows / grid-template-columns |
+| align-content | 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬 | align-content: align-content |
+| justify-content | 그리드 콘텐츠를 수평(행 축) 정렬 | justify-content: justify-content |
+| place-content | align-content와 justify-content의 단축 속성 | place-content: align-content justify-content |
+| align-items | 그리드 아이템(Items)들을 수직(열 축) 정렬 | align-items: align-items |
+| justify-items | 그리드 아이템들을 수평(행 축) 정렬 | justify-items: justify-items |
+| place-items | align-items와 justify-items의 단축 속성 | place-items: align-items justify-items |
+## Grid Item Properties
+
+Item을 위한 속성들은 아래와 같다.
+
+| 속성 | 의미 | 예시 |
+| --- | --- | --- |
+| grid-row-start | 그리드 아이템의 행 시작 위치 지정 | grid-row-start: 1 |
+| grid-row-end | 그리드 아이템의 행 끝 위치 지정 | grid-row-end: 3 |
+| grid-column-start | 그리드 아이템의 열 시작 위치 지정 | grid-column-start: 2 |
+| grid-column-end | 그리드 아이템의 열 끝 위치 지정 | grid-column-end: 3 |
+| grid-row | grid-row-xxx의 단축 속성(행 시작/끝 위치) | grid-row: grid-row-start / grid-row-end |
+| grid-column | grid-column-xxx의 단축 속성(열 시작/끝 위치) | grid-column: grid-column-start / grid-column-end |
+| grid-area | 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성 | grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end |
+| align-self | 단일 그리드 아이템을 수직(열 축) 정렬 | .item:nth-child(1) .item:nth-child(2) .item:nth-child(3) .item:nth-child(4) |
+| justify-self | 단일 그리드 아이템을 수평(행 축) 정렬 | .item:nth-child(1) .item:nth-child(2) .item:nth-child(3) .item:nth-child(4) |
+| place-self | align-self와 justify-self의 단축 속성 | place-self: align-self justify-self |
+| order | 그리드 아이템의 배치 순서를 지정 | .item:nth-child(1) .item:nth-child(3) .item:nth-child(5) |
+| z-index | 그리드 아이템의 쌓이는 순서를 지정 | .item:nth-child(2) grid-area: 1 / 2 / 3 / 3; z-index: 1; |
+[https://www.w3schools.com/css/css_grid.asp](https://www.w3schools.com/css/css_grid.asp)
+
+[https://studiomeal.com/archives/533](https://studiomeal.com/archives/533)
+
+[https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
diff --git a/src/content/posts/css/Px-rem-em-vh-vw-Whats-the-Difference-in-CSS.md b/src/content/posts/css/Px-rem-em-vh-vw-Whats-the-Difference-in-CSS.md
index 8c5d453..67adf88 100644
--- a/src/content/posts/css/Px-rem-em-vh-vw-Whats-the-Difference-in-CSS.md
+++ b/src/content/posts/css/Px-rem-em-vh-vw-Whats-the-Difference-in-CSS.md
@@ -1,35 +1,35 @@
----
-title: CSS 사이즈 단위 정리
-tags: [css]
-date: "2025.09.04"
----
-이번에는 CSS에서 자주 사용되는 **사이즈 단위**를 정리해 보았다. 개발하면서 px, %, em, rem 같은 단위들을 계속 접하지만 정확히 어떤 기준으로 크기가 정해지는지 헷갈릴 때가 많았다. 이번 기회에 확실히 짚고 넘어가려고 한다.
-
-## px
-
-`px`은 **픽셀 단위**로, 화면 크기와 상관없이 고정된 절대적인 크기를 가진다. 그래서 브라우저 크기나 기기 해상도가 달라져도 변하지 않는다. 가장 기본적이고 직관적인 단위라고 할 수 있다.
-
-## %
-
-`%`는 **부모 요소를 기준**으로 크기가 결정된다. 예를 들어 부모 요소의 width가 500px인데 자식 요소의 width를 50%로 주면 자식 요소의 실제 크기는 250px이 된다. 레이아웃을 유동적으로 조정할 때 유용하다.
-
-## em
-
-`em`은 **부모 요소의 글자 크기(font-size)**를 기준으로 계산되는 상대 단위다. 예를 들어 부모의 글자 크기가 16px이라면 2em은 32px이 된다. 하지만 부모 요소 크기에 따라 계속 값이 달라질 수 있어 상황에 따라 주의가 필요하다.
-
-## rem
-
-`rem`에서 `r`은 **root(루트)**를 의미한다. 즉, HTML의 기본 글자 크기를 기준으로 하는 상대 단위다. 보통 브라우저의 기본 폰트 크기인 16px을 기준으로 계산된다. 접근성을 고려해 글자 크기를 키우거나 줄일 때 특히 유용하다.
-
-## vh, vw
-
-`vh`와 `vw`에서 `v`는 **viewport(뷰포트)**를 의미한다.
-
-- `vw`는 화면 너비를 100등분한 단위
-- `vh`는 화면 높이를 100등분한 단위
-
-예를 들어, `width: 50vw`라고 하면 화면 너비의 절반 크기가 된다. 이 단위들은 브라우저 창 크기에 따라 유동적으로 변하기 때문에 **반응형 디자인**에 자주 활용된다.
-
----
-
+---
+title: CSS 사이즈 단위 정리
+tags: [css]
+date: "2025.09.04"
+---
+이번에는 CSS에서 자주 사용되는 **사이즈 단위**를 정리해 보았다. 개발하면서 px, %, em, rem 같은 단위들을 계속 접하지만 정확히 어떤 기준으로 크기가 정해지는지 헷갈릴 때가 많았다. 이번 기회에 확실히 짚고 넘어가려고 한다.
+
+## px
+
+`px`은 **픽셀 단위**로, 화면 크기와 상관없이 고정된 절대적인 크기를 가진다. 그래서 브라우저 크기나 기기 해상도가 달라져도 변하지 않는다. 가장 기본적이고 직관적인 단위라고 할 수 있다.
+
+## %
+
+`%`는 **부모 요소를 기준**으로 크기가 결정된다. 예를 들어 부모 요소의 width가 500px인데 자식 요소의 width를 50%로 주면 자식 요소의 실제 크기는 250px이 된다. 레이아웃을 유동적으로 조정할 때 유용하다.
+
+## em
+
+`em`은 **부모 요소의 글자 크기(font-size)**를 기준으로 계산되는 상대 단위다. 예를 들어 부모의 글자 크기가 16px이라면 2em은 32px이 된다. 하지만 부모 요소 크기에 따라 계속 값이 달라질 수 있어 상황에 따라 주의가 필요하다.
+
+## rem
+
+`rem`에서 `r`은 **root(루트)**를 의미한다. 즉, HTML의 기본 글자 크기를 기준으로 하는 상대 단위다. 보통 브라우저의 기본 폰트 크기인 16px을 기준으로 계산된다. 접근성을 고려해 글자 크기를 키우거나 줄일 때 특히 유용하다.
+
+## vh, vw
+
+`vh`와 `vw`에서 `v`는 **viewport(뷰포트)**를 의미한다.
+
+- `vw`는 화면 너비를 100등분한 단위
+- `vh`는 화면 높이를 100등분한 단위
+
+예를 들어, `width: 50vw`라고 하면 화면 너비의 절반 크기가 된다. 이 단위들은 브라우저 창 크기에 따라 유동적으로 변하기 때문에 **반응형 디자인**에 자주 활용된다.
+
+---
+
이렇게 정리하고 보니 어떤 상황에서 어떤 단위를 쓰면 좋을지 더 명확해졌다. 앞으로 반응형 디자인을 구현할 때는 px 대신 %, em, rem, vh, vw 같은 단위를 더 적극적으로 활용해 보아야겠다.
\ No newline at end of file
diff --git a/src/content/posts/etc/2025-10-27-migrate-sprint1-4-to-react.md b/src/content/posts/etc/2025-10-27-migrate-sprint1-4-to-react.md
index a02d7d4..7cdc3be 100644
--- a/src/content/posts/etc/2025-10-27-migrate-sprint1-4-to-react.md
+++ b/src/content/posts/etc/2025-10-27-migrate-sprint1-4-to-react.md
@@ -1,6 +1,6 @@
---
title: 데이터 주도 구조로 페이지를 단순화한 React 마이그레이션
-series: 스프린트 부트캠프
+series: sprint-bootcamp
tags: ["React", "마이그레이션", "리팩토링", "폼 설계", "아키텍처"]
date: "2025.10.27"
---
diff --git a/src/content/posts/etc/2025-10-29-netlify-spa-refresh-404.md b/src/content/posts/etc/2025-10-29-netlify-spa-refresh-404.md
index ab1fb39..b09f11b 100644
--- a/src/content/posts/etc/2025-10-29-netlify-spa-refresh-404.md
+++ b/src/content/posts/etc/2025-10-29-netlify-spa-refresh-404.md
@@ -1,6 +1,6 @@
---
title: Netlify 배포에서 새로고침 시 404(Page not found) 해결
-series: 스프린트 부트캠프
+series: sprint-bootcamp
tags: ["Netlify", "배포", "React", "SPA", "Redirects"]
date: "2025.10.29"
---
diff --git a/src/content/posts/etc/2025-11-18-sprint-basic-project-retrospective.md b/src/content/posts/etc/2025-11-18-sprint-basic-project-retrospective.md
index 2af0567..efec021 100644
--- a/src/content/posts/etc/2025-11-18-sprint-basic-project-retrospective.md
+++ b/src/content/posts/etc/2025-11-18-sprint-basic-project-retrospective.md
@@ -1,6 +1,6 @@
---
title: 기초 프로젝트 회고
-series: 팬덤케이
+series: fandom-k
tags: ["회고", "팀프로젝트", "컨벤션", "프로젝트관리"]
date: "2025.11.18"
---
diff --git a/src/content/posts/etc/2025-12-02-maple-helper-v2-refactoring-plan.md b/src/content/posts/etc/2025-12-02-maple-helper-v2-refactoring-plan.md
index 4678ff4..5ee1458 100644
--- a/src/content/posts/etc/2025-12-02-maple-helper-v2-refactoring-plan.md
+++ b/src/content/posts/etc/2025-12-02-maple-helper-v2-refactoring-plan.md
@@ -1,6 +1,6 @@
---
title: 메이플 헬퍼 v2 리팩토링 계획
-series: 메이플 헬퍼
+series: maple-helper
tags: ["리팩토링", "프로젝트", "폴더 구조", "컨벤션", "API 설계"]
date: "2025-12-02"
---
diff --git a/src/content/posts/etc/2025-12-19-intermediate-sprint-decision-log.md b/src/content/posts/etc/2025-12-19-intermediate-sprint-decision-log.md
index 755a762..25133f1 100644
--- a/src/content/posts/etc/2025-12-19-intermediate-sprint-decision-log.md
+++ b/src/content/posts/etc/2025-12-19-intermediate-sprint-decision-log.md
@@ -1,6 +1,6 @@
---
title: 더 줄게 - 제한된 리소스 프로젝트 의사 결정 기록
-series: 더 줄게
+series: the-julge
tags: ["프로젝트 관리", "의사결정", "협업", "회고"]
date: "2025.12.19"
---
diff --git a/src/content/posts/etc/2025-12-26-maple-helper-layout-change-for-adsense.md b/src/content/posts/etc/2025-12-26-maple-helper-layout-change-for-adsense.md
index 032b6ed..12140ac 100644
--- a/src/content/posts/etc/2025-12-26-maple-helper-layout-change-for-adsense.md
+++ b/src/content/posts/etc/2025-12-26-maple-helper-layout-change-for-adsense.md
@@ -1,6 +1,6 @@
---
title: 구글 애드센스 수익화를 위한 레이아웃 전면 개편
-series: 메이플 헬퍼
+series: maple-helper
tags: ["frontEnd", "UI/UX", "트러블슈팅"]
date: "2025-12-26"
---
diff --git a/src/content/posts/etc/2025-12-30-the-julge-sprint-mid-retrospective.md b/src/content/posts/etc/2025-12-30-the-julge-sprint-mid-retrospective.md
index 2af3ec1..209b6ae 100644
--- a/src/content/posts/etc/2025-12-30-the-julge-sprint-mid-retrospective.md
+++ b/src/content/posts/etc/2025-12-30-the-julge-sprint-mid-retrospective.md
@@ -1,6 +1,6 @@
---
title: 더 줄게 팀 프로젝트 중간 회고
-series: 더 줄게
+series: the-julge
tags: ["frontEnd", "회고", "협업", "트러블슈팅"]
date: "2025.12.30"
---
diff --git a/src/content/posts/etc/2025-9-24-blog-renewal-v2-planning.md b/src/content/posts/etc/2025-9-24-blog-renewal-v2-planning.md
index f7e619f..dbf5ca5 100644
--- a/src/content/posts/etc/2025-9-24-blog-renewal-v2-planning.md
+++ b/src/content/posts/etc/2025-9-24-blog-renewal-v2-planning.md
@@ -1,6 +1,6 @@
---
title: 블로그 리뉴얼 V2 기획 개인 브랜딩
-series: 블로그
+series: blog
tags: ["블로그", "리뉴얼", "정보구조", "검색", "시리즈"]
date: "2026-02-27"
---
diff --git a/src/content/posts/etc/2026-01-02-maple-helper-midterm-retrospective.md b/src/content/posts/etc/2026-01-02-maple-helper-midterm-retrospective.md
index 31c6240..3301c06 100644
--- a/src/content/posts/etc/2026-01-02-maple-helper-midterm-retrospective.md
+++ b/src/content/posts/etc/2026-01-02-maple-helper-midterm-retrospective.md
@@ -1,6 +1,6 @@
---
title: 메이플 헬퍼 중간 회고 리팩토링의 늪과 현실적인 타협점
-series: 메이플 헬퍼
+series: maple-helper
tags: ["회고", "AAR", "리팩토링", "트레이드오프", "애드센스"]
date: "2026.01.02"
---
diff --git a/src/content/posts/etc/2026-01-16-the-julge-final-retrospective.md b/src/content/posts/etc/2026-01-16-the-julge-final-retrospective.md
index c0db9ef..2f20add 100644
--- a/src/content/posts/etc/2026-01-16-the-julge-final-retrospective.md
+++ b/src/content/posts/etc/2026-01-16-the-julge-final-retrospective.md
@@ -1,6 +1,6 @@
---
title: 더 줄게 프로젝트 최종 회고 현실적인 타협과 트레이드오프
-series: 더 줄게
+series: the-julge
tags: ["회고", "START 기법", "트레이드오프", "프로젝트 관리", "협업"]
date: "2026.01.16"
---
diff --git a/src/content/posts/etc/2026-02-26-global-nomad-retrospective-start.md b/src/content/posts/etc/2026-02-26-global-nomad-retrospective-start.md
index 0073ead..fba500f 100644
--- a/src/content/posts/etc/2026-02-26-global-nomad-retrospective-start.md
+++ b/src/content/posts/etc/2026-02-26-global-nomad-retrospective-start.md
@@ -1,6 +1,6 @@
---
title: 글로벌 노마드 프로젝트 회고
-series: 글로벌 노마드
+series: global-nomad
tags: ["Next.js", "회고", "START", "UX", "인증", "Middleware"]
date: "2026.02.26"
---
diff --git a/src/content/posts/etc/CreateDiscordBotFive.md b/src/content/posts/etc/CreateDiscordBotFive.md
index 92cf8a1..6e0bd64 100644
--- a/src/content/posts/etc/CreateDiscordBotFive.md
+++ b/src/content/posts/etc/CreateDiscordBotFive.md
@@ -1,41 +1,41 @@
----
-title: discord.js로 봇을 만들어보자 - 5
-series: 디스코드 봇 만들기
-tags: [etc, 디스코드 봇 만들기]
-date: "2024.02.19"
----
-## CSR 웹 사이트 크롤링
-
-서버에서 페이지가 완성된 후 전달되는 SSR과는 다르게 클라이언트 측에서 렌더링 되는 CSR은 axios를 통해 크롤링 할 수 없다 하지만 Selenuim를 이용하면 브라우저를 생성해 렌더링이 된 후 내용을 얻을 수 있어 CSR에서도 이용할 수 있다 Selenuim은 다양한 브라우저로 사이트를 동작하고 테스트하기 위해 만들어진 도구이다.
-
-## Selenuim 사용법
-
-```javascript
-
- const { Builder, By, Key, until } = require('selenium-webdriver');
-
- // WebDriver 인스턴스를 생성합니다.
- async function example() {
- // 브라우저를 시작합니다.
- let driver = await new Builder().forBrowser('chrome').build();
-
- try {
- // Google 홈페이지를 엽니다.
- await driver.get('https://www.google.com');
-
- // 검색창을 찾고 "Selenium"을 입력합니다.
- await driver.findElement(By.name('q')).sendKeys('Selenium', Key.RETURN);
-
- // 검색 결과를 기다립니다.
- await driver.wait(until.titleContains('Selenium'), 1000);
-
- // 검색 결과 출력
- console.log("Page title is: " + await driver.getTitle());
- } finally {
- // 브라우저를 종료합니다.
- await driver.quit();
- }
- }
-
-```
-Selenuim은 cheerio처럼 DOM에서 특정 요소를 식별해 낼 수 있다. 이와 같은 기능들을 이용해 원하는 데이터를 크롤링 해와 기능을 만들었지만 환산스텟을 만드는 팀에서 공지가 나왔다. 현재 크롤링을 과도하게 요청하는 사람들이 많아 서버에 부하가 많이 걸려 크롤링을 하는 대신에 파라미터로 검색을 지원하고 있으니 크롤링 대신에 링크를 넣어달다는 요청이였다. 사실 만든 기능이 아깝긴 했지만 공부를 위해 만든 기능이였으니 해당 부분은 크롤링 대신 URL형태로 구현 했다.
+---
+title: discord.js로 봇을 만들어보자 - 5
+series: discord-bot
+tags: [etc, 디스코드 봇 만들기]
+date: "2024.02.19"
+---
+## CSR 웹 사이트 크롤링
+
+서버에서 페이지가 완성된 후 전달되는 SSR과는 다르게 클라이언트 측에서 렌더링 되는 CSR은 axios를 통해 크롤링 할 수 없다 하지만 Selenuim를 이용하면 브라우저를 생성해 렌더링이 된 후 내용을 얻을 수 있어 CSR에서도 이용할 수 있다 Selenuim은 다양한 브라우저로 사이트를 동작하고 테스트하기 위해 만들어진 도구이다.
+
+## Selenuim 사용법
+
+```javascript
+
+ const { Builder, By, Key, until } = require('selenium-webdriver');
+
+ // WebDriver 인스턴스를 생성합니다.
+ async function example() {
+ // 브라우저를 시작합니다.
+ let driver = await new Builder().forBrowser('chrome').build();
+
+ try {
+ // Google 홈페이지를 엽니다.
+ await driver.get('https://www.google.com');
+
+ // 검색창을 찾고 "Selenium"을 입력합니다.
+ await driver.findElement(By.name('q')).sendKeys('Selenium', Key.RETURN);
+
+ // 검색 결과를 기다립니다.
+ await driver.wait(until.titleContains('Selenium'), 1000);
+
+ // 검색 결과 출력
+ console.log("Page title is: " + await driver.getTitle());
+ } finally {
+ // 브라우저를 종료합니다.
+ await driver.quit();
+ }
+ }
+
+```
+Selenuim은 cheerio처럼 DOM에서 특정 요소를 식별해 낼 수 있다. 이와 같은 기능들을 이용해 원하는 데이터를 크롤링 해와 기능을 만들었지만 환산스텟을 만드는 팀에서 공지가 나왔다. 현재 크롤링을 과도하게 요청하는 사람들이 많아 서버에 부하가 많이 걸려 크롤링을 하는 대신에 파라미터로 검색을 지원하고 있으니 크롤링 대신에 링크를 넣어달다는 요청이였다. 사실 만든 기능이 아깝긴 했지만 공부를 위해 만든 기능이였으니 해당 부분은 크롤링 대신 URL형태로 구현 했다.
diff --git a/src/content/posts/etc/CreateDiscordBotFour.md b/src/content/posts/etc/CreateDiscordBotFour.md
index 187b50b..4491abe 100644
--- a/src/content/posts/etc/CreateDiscordBotFour.md
+++ b/src/content/posts/etc/CreateDiscordBotFour.md
@@ -1,48 +1,48 @@
----
-title: discord.js로 봇을 만들어보자 - 4
-series: 디스코드 봇 만들기
-tags: [etc, 디스코드 봇 만들기]
-date: "2024.02.15"
----
-얼마전에 메이플 공식 api가 업데이트 됐다고 해서 디스코드 봇을 업데이트하기로 했다. 그래서 메이플 공식 api사용법과 이번에 추가한 내용을 블로그에 담으려 한다.
-
-##
-
-[https://openapi.nexon.com/](https://openapi.nexon.com/)
-
-
-여기 공식 api 주소에 들어가 로그인을 한 뒤 어플리케이션 등록을 진행하면 된다.
-
-여기에서 서비스 단계인지 출시 단계인지 선택하는 항목이 있는데 그 둘의 차이점은 초당 최대 허용량과 일일 최대 허용량으로 나뉜다. 개발 api key는 초당 5건과 일일 최대 1,000건을 허용하고 서비스 api key는 초당 500건과 일일 최대 20,000,000건을 허용한다.
-
-## 사용법
-
-발급 받은 키를 가지고 캐릭터 정보 조회를 하고 싶으면 우선 캐릭터 식별자 조회를 해야한다.
-
-```javascript
-
- const API_KEY = "발급 받은 API Key";
- const characterName = "캐릭터명";
- const urlString = "https://open.api.nexon.com/heroes/v1/id?character_name=" + characterName;
-
- const answer = async (name) => {
- try {
- const data = await axios.get(
- urlString,
- {
- headers: {
- "x-nxopen-api-key": API_KEY
- }
- }
- );
- return data.data;
- } catch (error) {
- return error;
- }
- };
-
-
-```
-여기서 받은 캐릭터 식별자를 가지고 여러 정보를 조회 할 수 있게 됐다.
-
-하지만 나는 기존에 크롤링을 이용해 캐릭터에 대한 기본적인 정보들을 이미 만들어 놨는데 다시 공식 api를 이용해서 만들고 싶지는 않아서 새로운 기능을 추가하기로 했다. 그건 바로 메이플 환산 사이트를 크롤링해 정보를 보여주는 기능이다. 하지만 메이플 환산 사이트는 일반 유저들이 만든 사이트로 메이플 홈페이지와 다르게 로 이루어져 있어 axios를 이용한 크롤링이 불가능 했다. 이 부분의 해결과정과 결과는 다음 포스트에 적어보려한다.
+---
+title: discord.js로 봇을 만들어보자 - 4
+series: discord-bot
+tags: [etc, 디스코드 봇 만들기]
+date: "2024.02.15"
+---
+얼마전에 메이플 공식 api가 업데이트 됐다고 해서 디스코드 봇을 업데이트하기로 했다. 그래서 메이플 공식 api사용법과 이번에 추가한 내용을 블로그에 담으려 한다.
+
+##
+
+[https://openapi.nexon.com/](https://openapi.nexon.com/)
+
+
+여기 공식 api 주소에 들어가 로그인을 한 뒤 어플리케이션 등록을 진행하면 된다.
+
+여기에서 서비스 단계인지 출시 단계인지 선택하는 항목이 있는데 그 둘의 차이점은 초당 최대 허용량과 일일 최대 허용량으로 나뉜다. 개발 api key는 초당 5건과 일일 최대 1,000건을 허용하고 서비스 api key는 초당 500건과 일일 최대 20,000,000건을 허용한다.
+
+## 사용법
+
+발급 받은 키를 가지고 캐릭터 정보 조회를 하고 싶으면 우선 캐릭터 식별자 조회를 해야한다.
+
+```javascript
+
+ const API_KEY = "발급 받은 API Key";
+ const characterName = "캐릭터명";
+ const urlString = "https://open.api.nexon.com/heroes/v1/id?character_name=" + characterName;
+
+ const answer = async (name) => {
+ try {
+ const data = await axios.get(
+ urlString,
+ {
+ headers: {
+ "x-nxopen-api-key": API_KEY
+ }
+ }
+ );
+ return data.data;
+ } catch (error) {
+ return error;
+ }
+ };
+
+
+```
+여기서 받은 캐릭터 식별자를 가지고 여러 정보를 조회 할 수 있게 됐다.
+
+하지만 나는 기존에 크롤링을 이용해 캐릭터에 대한 기본적인 정보들을 이미 만들어 놨는데 다시 공식 api를 이용해서 만들고 싶지는 않아서 새로운 기능을 추가하기로 했다. 그건 바로 메이플 환산 사이트를 크롤링해 정보를 보여주는 기능이다. 하지만 메이플 환산 사이트는 일반 유저들이 만든 사이트로 메이플 홈페이지와 다르게 로 이루어져 있어 axios를 이용한 크롤링이 불가능 했다. 이 부분의 해결과정과 결과는 다음 포스트에 적어보려한다.
diff --git a/src/content/posts/etc/CreateDiscordBotOne.md b/src/content/posts/etc/CreateDiscordBotOne.md
index 77334f0..bb6073e 100644
--- a/src/content/posts/etc/CreateDiscordBotOne.md
+++ b/src/content/posts/etc/CreateDiscordBotOne.md
@@ -1,30 +1,30 @@
----
-title: discord.js로 봇을 만들어보자
-series: 디스코드 봇 만들기
-tags: [etc, 디스코드 봇 만들기]
-date: "2023.09.08"
----
-
-## 프로젝트 소개
-
-메이플스토리라는 게임을 하다가 디스코드로 내 캐릭터에 대한 정보를 볼 수 있으면 편하겠다는 생각이 들었고, 친구와 이야기 하다 너무 재미있을 것 같아 당장 만들어보았다. discord.js가 너무 잘 만들어져 있어 생각보다 간단하게 만들 수 있었다.
-
-## 프로젝트
-
-axios를 이용해 HTTP 요청으로 웹에 대한 정보를 가져와 cheerio를 이용해 웹에 대한 데이터를 쉽게 가공해 원하는 정보를 가져올 수 있도록 했다.
-
-개발을 하기 이전에 우선 봇을 생성해주어야 하는데 방법은 에 아주 친절하게 적혀 있으니 가이드 대로 생성하면 손쉽게 만들 수 있다.
-
-[https://discord.com/developers/docs/getting-started](https://discord.com/developers/docs/getting-started)
-
-원하는 데이터를 크롤링을 통해 가져와지는 것 을 확인 했으면 다음으로는 봇과 소통할 수 있도록 해야한다.
-
-
-발급 밭은 토큰을 이용해 봇에 로그인 할 수 있다.
-
-
-
-처럼 작성해 준 뒤 node app.js 를 이용하면 아래와 같이 동작하는 것 을 확인 할 수 있다.
-
-
-
+---
+title: discord.js로 봇을 만들어보자
+series: discord-bot
+tags: [etc, 디스코드 봇 만들기]
+date: "2023.09.08"
+---
+
+## 프로젝트 소개
+
+메이플스토리라는 게임을 하다가 디스코드로 내 캐릭터에 대한 정보를 볼 수 있으면 편하겠다는 생각이 들었고, 친구와 이야기 하다 너무 재미있을 것 같아 당장 만들어보았다. discord.js가 너무 잘 만들어져 있어 생각보다 간단하게 만들 수 있었다.
+
+## 프로젝트
+
+axios를 이용해 HTTP 요청으로 웹에 대한 정보를 가져와 cheerio를 이용해 웹에 대한 데이터를 쉽게 가공해 원하는 정보를 가져올 수 있도록 했다.
+
+개발을 하기 이전에 우선 봇을 생성해주어야 하는데 방법은 에 아주 친절하게 적혀 있으니 가이드 대로 생성하면 손쉽게 만들 수 있다.
+
+[https://discord.com/developers/docs/getting-started](https://discord.com/developers/docs/getting-started)
+
+원하는 데이터를 크롤링을 통해 가져와지는 것 을 확인 했으면 다음으로는 봇과 소통할 수 있도록 해야한다.
+
+
+발급 밭은 토큰을 이용해 봇에 로그인 할 수 있다.
+
+
+
+처럼 작성해 준 뒤 node app.js 를 이용하면 아래와 같이 동작하는 것 을 확인 할 수 있다.
+
+
+
diff --git a/src/content/posts/etc/CreateDiscordBotThree.md b/src/content/posts/etc/CreateDiscordBotThree.md
index 48a8134..9591833 100644
--- a/src/content/posts/etc/CreateDiscordBotThree.md
+++ b/src/content/posts/etc/CreateDiscordBotThree.md
@@ -1,46 +1,46 @@
----
-title: discord.js로 봇을 만들어보자 - 3
-tags: [etc, 디스코드 봇 만들기]
-series: 디스코드 봇 만들기
-date: "2023.10.25"
----
-## 디스코드 봇 호스팅하기
-
-이번엔 만들었던 디스코드 봇을 aws에 호스팅 해보도록 하겠다.
-
-## 시작
-
-1. 우선 아마존 aws에 계정을 만들고 카드 등록까지 해준다
-
-2. 인스턴스 시작 버튼을 눌러 인스턴스를 생성해준다.
-
-
-2. EC2 인스턴스 이름을 적고 OS를 선택해준다. (나는 Ubuntu를 선택했다.)
-
-
-
-3. 그리고 가장 중요한 키를 생성해준다. 이건 잃어버리면 안 되니 백업을 해준 후 인스턴스 시작을 해준다.
-
-
-4. 생성이 완료 되었다면 서버에 로그인을 하기 위해 이전에 생성해주었던 키를 PuTTK key Generator을 통해 변환해줘야 한다.
-
-
-5. 그런 후 아래와 같이 작성해준다.
-
-
-6. winSCP를 켜서 로그인을 해주면 되는데 호스트 이름으로는 (퍼블릭 IPv4 DNS) 사용자 이름으로는 ubuntu 그리고 비밀번호는 고급으로 들어가 SSH / 인증 에서 개인키 파일에 아까 변환 한 파일을 넣어주면 된다.
-
-
-7. 로그인을 성공적으로 마쳤다면 만든 파일을 전부 넣어주면 된다.
-
-
-8. 파일들이 성공적으로 넘어가 있는게 확인이 되었다면 npm, nodejs 를 설치 해 주면 된다.
-
-
-9. 그 이후 무중단 관리도구인 forever를 설치해 forever start [js script] 를 실행시켜 주면 된다.
-
-[https://www.npmjs.com/package/forever](https://www.npmjs.com/package/forever)
-
-10. 그러면 따로 실행시켜주지 않아도 디스코드 봇이 실행되는 것을 볼 수 있다.
-
+---
+title: discord.js로 봇을 만들어보자 - 3
+tags: [etc, 디스코드 봇 만들기]
+series: discord-bot
+date: "2023.10.25"
+---
+## 디스코드 봇 호스팅하기
+
+이번엔 만들었던 디스코드 봇을 aws에 호스팅 해보도록 하겠다.
+
+## 시작
+
+1. 우선 아마존 aws에 계정을 만들고 카드 등록까지 해준다
+
+2. 인스턴스 시작 버튼을 눌러 인스턴스를 생성해준다.
+
+
+2. EC2 인스턴스 이름을 적고 OS를 선택해준다. (나는 Ubuntu를 선택했다.)
+
+
+
+3. 그리고 가장 중요한 키를 생성해준다. 이건 잃어버리면 안 되니 백업을 해준 후 인스턴스 시작을 해준다.
+
+
+4. 생성이 완료 되었다면 서버에 로그인을 하기 위해 이전에 생성해주었던 키를 PuTTK key Generator을 통해 변환해줘야 한다.
+
+
+5. 그런 후 아래와 같이 작성해준다.
+
+
+6. winSCP를 켜서 로그인을 해주면 되는데 호스트 이름으로는 (퍼블릭 IPv4 DNS) 사용자 이름으로는 ubuntu 그리고 비밀번호는 고급으로 들어가 SSH / 인증 에서 개인키 파일에 아까 변환 한 파일을 넣어주면 된다.
+
+
+7. 로그인을 성공적으로 마쳤다면 만든 파일을 전부 넣어주면 된다.
+
+
+8. 파일들이 성공적으로 넘어가 있는게 확인이 되었다면 npm, nodejs 를 설치 해 주면 된다.
+
+
+9. 그 이후 무중단 관리도구인 forever를 설치해 forever start [js script] 를 실행시켜 주면 된다.
+
+[https://www.npmjs.com/package/forever](https://www.npmjs.com/package/forever)
+
+10. 그러면 따로 실행시켜주지 않아도 디스코드 봇이 실행되는 것을 볼 수 있다.
+
\ No newline at end of file
diff --git a/src/content/posts/etc/CreateDiscordBotTwo.md b/src/content/posts/etc/CreateDiscordBotTwo.md
index 59e99b0..e653312 100644
--- a/src/content/posts/etc/CreateDiscordBotTwo.md
+++ b/src/content/posts/etc/CreateDiscordBotTwo.md
@@ -1,51 +1,51 @@
----
-title: discord.js로 봇을 만들어보자 - 2
-series: 디스코드 봇 만들기
-tags: [etc, 디스코드 봇 만들기]
-date: "2023.10.05"
----
-## 봇 개발
-
-
-여기에는 문제점이 있었는데 크롤링을 인기도 랭킹에서 하다보니 인기도가 0인 캐릭터들은 검색이 되지 않는 문제가 있었다. 이 문제를 해결하기 위해선 종합랭킹 에서 크롤링을 해와야하는데 여기는 일반월드와 리부트월드가 나눠져 있어서 조건문을 통해 일반월드 검색 결과가 없다면 리부트월드를 검색 하도록 변경했다.
-
-
-
-## Embeds 적용
-
-이렇게 가져온 데이터를 이전보다 더 잘 보여주고 싶어서 찾아보니 Embeds라는 기능이 있었다. Embeds를 사용하면 이미지를 추가 할 수 있고 여러자기 속성등을 사용할 수 있게 된다.
-
-[https://discordjs.guide/popular-topics/embeds.html#embed-preview](https://discordjs.guide/popular-topics/embeds.html#embed-preview)
-
-
-## 경험치로직 추가
-
-경험치가 %로 나타나는게 아니라 보기 너무 불편하니 %로 바꿔주기로 했다. 우선 %로 보여주기 위해선 레벨별 필요 경험치가 필요했는데 나무위키에 레벨별 필요 경험치에 대한 정보가 있어서 크롤링을 통해 손쉽게 가져올 수 있었다.
-
-
-## 결과
-
-
-그런데 서버 로고만 보여지고 캐릭터 이미지가 로드 되지 않는다.
-
-## 문제 해결
-
-크롤링이 잘못 된 건가 싶어 콘솔을 찍어 확인해 보니 이미지 주소는 유효한걸 확인 할 수 있었다.
-
-
-또 지켜야할 이미지 규격이 있나 공식 문서를 확인해 보니 첨부파일 또는 http(s)만을 지원한다는 설명 외에는 없었다. 그래서 다른 이미지 url을 넣어보니 잘 출력되는걸 확인 할 수 있었다.
-
-
-그래서 나와 같은 문제를 겪고 있는 사람들이 있나 확인을 위해 스텍오버플로우와 깃허브 이슈 채널을 확인하다 같은 문제를 겪고 있는 사람을 찾을 수 있었다.
-
-[https://github.com/discordjs/discord.js/issues/6940](https://github.com/discordjs/discord.js/issues/6940)
-
-내용을 요약하자면 discord.js의 문제가 아니라 discord 자체적인 문제이니 discord에 문의 하라고 한다. 이 문제를 해결하기 위해 하루종일 찾아봤지만 뭔가 허무한 결과가 나와버렸다... 하지만 이대로 문제를 놔둘 순 없어서 크롤링한 이미지를 서버에 저장한 후 보여주기로 했다.
-
-이미지 저장 로직을 작성해 준 후 일치하는 이름이 없을 경우 예외 처리를 해줘 봇이 다운되는 일을 막아줬다.
-
-
-
-이제 이미지가 성공적으로 출력되는걸 확인 할 수 있었다.
-
+---
+title: discord.js로 봇을 만들어보자 - 2
+series: discord-bot
+tags: [etc, 디스코드 봇 만들기]
+date: "2023.10.05"
+---
+## 봇 개발
+
+
+여기에는 문제점이 있었는데 크롤링을 인기도 랭킹에서 하다보니 인기도가 0인 캐릭터들은 검색이 되지 않는 문제가 있었다. 이 문제를 해결하기 위해선 종합랭킹 에서 크롤링을 해와야하는데 여기는 일반월드와 리부트월드가 나눠져 있어서 조건문을 통해 일반월드 검색 결과가 없다면 리부트월드를 검색 하도록 변경했다.
+
+
+
+## Embeds 적용
+
+이렇게 가져온 데이터를 이전보다 더 잘 보여주고 싶어서 찾아보니 Embeds라는 기능이 있었다. Embeds를 사용하면 이미지를 추가 할 수 있고 여러자기 속성등을 사용할 수 있게 된다.
+
+[https://discordjs.guide/popular-topics/embeds.html#embed-preview](https://discordjs.guide/popular-topics/embeds.html#embed-preview)
+
+
+## 경험치로직 추가
+
+경험치가 %로 나타나는게 아니라 보기 너무 불편하니 %로 바꿔주기로 했다. 우선 %로 보여주기 위해선 레벨별 필요 경험치가 필요했는데 나무위키에 레벨별 필요 경험치에 대한 정보가 있어서 크롤링을 통해 손쉽게 가져올 수 있었다.
+
+
+## 결과
+
+
+그런데 서버 로고만 보여지고 캐릭터 이미지가 로드 되지 않는다.
+
+## 문제 해결
+
+크롤링이 잘못 된 건가 싶어 콘솔을 찍어 확인해 보니 이미지 주소는 유효한걸 확인 할 수 있었다.
+
+
+또 지켜야할 이미지 규격이 있나 공식 문서를 확인해 보니 첨부파일 또는 http(s)만을 지원한다는 설명 외에는 없었다. 그래서 다른 이미지 url을 넣어보니 잘 출력되는걸 확인 할 수 있었다.
+
+
+그래서 나와 같은 문제를 겪고 있는 사람들이 있나 확인을 위해 스텍오버플로우와 깃허브 이슈 채널을 확인하다 같은 문제를 겪고 있는 사람을 찾을 수 있었다.
+
+[https://github.com/discordjs/discord.js/issues/6940](https://github.com/discordjs/discord.js/issues/6940)
+
+내용을 요약하자면 discord.js의 문제가 아니라 discord 자체적인 문제이니 discord에 문의 하라고 한다. 이 문제를 해결하기 위해 하루종일 찾아봤지만 뭔가 허무한 결과가 나와버렸다... 하지만 이대로 문제를 놔둘 순 없어서 크롤링한 이미지를 서버에 저장한 후 보여주기로 했다.
+
+이미지 저장 로직을 작성해 준 후 일치하는 이름이 없을 경우 예외 처리를 해줘 봇이 다운되는 일을 막아줬다.
+
+
+
+이제 이미지가 성공적으로 출력되는걸 확인 할 수 있었다.
+
\ No newline at end of file
diff --git a/src/content/posts/etc/Design-lecture-summary.md b/src/content/posts/etc/Design-lecture-summary.md
index 2e0559b..4f292dd 100644
--- a/src/content/posts/etc/Design-lecture-summary.md
+++ b/src/content/posts/etc/Design-lecture-summary.md
@@ -1,61 +1,61 @@
----
-title: 디자인 강의 정리
-tags: [etc]
-date: "2025.09.16"
----
-스프린트 부트캠프를 시작하면 부트캠프 강의뿐만 아니라 코드잇에서 제공하는 모든 강의를 들을 수 있다. 그래서 평소 1인 개발을 하면서 궁금했던 **디자인 강의**를 들어 보았고, 그 내용을 정리해 보았다.
-
-
-## 디자인의 기본 원칙
-
-1. **일관성 지키기**
-2. **중요도에 따라 구분하기**
-3. **기능에 따라 영역 나누기**
-
-## 레이아웃
-
-레이아웃에서 중요한 기술은 세 가지다.
-
-- 여백
-- 정렬
-- 크기
-
-기기별 권장 기준 해상도는 다음과 같다.
-
-- 데스크톱: 1440px
-- 태블릿: 978px
-- 모바일: 375px
-
-실제로는 다음 범위를 커버할 수 있으면 된다.
-
-- 데스크톱: 1280px ~ 1920px
-- 태블릿: 768px ~ 1279px
-- 모바일: 320px ~ 767px
-
-즉, 페이지를 만들 때는 화면을 크게 영역별로 나누고, 기기 해상도에 맞는 기준을 잡아 주는 것이 중요하다.
-
-## 폰트
-
-- 색상 대비는 **배경과 4.5 : 1 이상** 확보해야 한다.
-- 여러 줄일 때는 **행간 150% ~ 180%** 정도가 적당하다.
-- 자간도 함께 고려해야 가독성이 좋아진다.
-
-## 요소 크기 기준
-
-1. **텍스트**
- - 본문: 16px (14px ~ 16px)
- - 약한 본문: 14px (본문 -2px)
- - 제목: 20px ~ 80px (커질수록 변화 폭 확대)
-2. **아이콘**
- - 비율: 1:1
- - 크기: 함께 사용하는 텍스트와 비슷한 크기
-3. **버튼**
- - 내부 텍스트: 16px 또는 18px
- - 위아래 여백: 텍스트 크기의 1/2 ~ 1배 (8~16px)
- - 좌우 여백: 위아래 여백의 1 ~ 2배 (16~32px)
-4. **기타**
- - 상단 네비게이션 바 높이: 72px (50~90px 사이)
-
-## 정리하며
-
+---
+title: 디자인 강의 정리
+tags: [etc]
+date: "2025.09.16"
+---
+스프린트 부트캠프를 시작하면 부트캠프 강의뿐만 아니라 코드잇에서 제공하는 모든 강의를 들을 수 있다. 그래서 평소 1인 개발을 하면서 궁금했던 **디자인 강의**를 들어 보았고, 그 내용을 정리해 보았다.
+
+
+## 디자인의 기본 원칙
+
+1. **일관성 지키기**
+2. **중요도에 따라 구분하기**
+3. **기능에 따라 영역 나누기**
+
+## 레이아웃
+
+레이아웃에서 중요한 기술은 세 가지다.
+
+- 여백
+- 정렬
+- 크기
+
+기기별 권장 기준 해상도는 다음과 같다.
+
+- 데스크톱: 1440px
+- 태블릿: 978px
+- 모바일: 375px
+
+실제로는 다음 범위를 커버할 수 있으면 된다.
+
+- 데스크톱: 1280px ~ 1920px
+- 태블릿: 768px ~ 1279px
+- 모바일: 320px ~ 767px
+
+즉, 페이지를 만들 때는 화면을 크게 영역별로 나누고, 기기 해상도에 맞는 기준을 잡아 주는 것이 중요하다.
+
+## 폰트
+
+- 색상 대비는 **배경과 4.5 : 1 이상** 확보해야 한다.
+- 여러 줄일 때는 **행간 150% ~ 180%** 정도가 적당하다.
+- 자간도 함께 고려해야 가독성이 좋아진다.
+
+## 요소 크기 기준
+
+1. **텍스트**
+ - 본문: 16px (14px ~ 16px)
+ - 약한 본문: 14px (본문 -2px)
+ - 제목: 20px ~ 80px (커질수록 변화 폭 확대)
+2. **아이콘**
+ - 비율: 1:1
+ - 크기: 함께 사용하는 텍스트와 비슷한 크기
+3. **버튼**
+ - 내부 텍스트: 16px 또는 18px
+ - 위아래 여백: 텍스트 크기의 1/2 ~ 1배 (8~16px)
+ - 좌우 여백: 위아래 여백의 1 ~ 2배 (16~32px)
+4. **기타**
+ - 상단 네비게이션 바 높이: 72px (50~90px 사이)
+
+## 정리하며
+
디자인 강의를 들으면서, 평소에 그냥 감으로 맞추던 부분들이 실제로는 기준과 원칙을 갖고 있다는 걸 알게 되었다. 앞으로 화면을 만들 때는 단순히 "보기 좋아 보인다"에 그치지 않고, **일관성, 중요도, 영역 구분**을 항상 염두에 두고 적용해야겠다.
\ No newline at end of file
diff --git a/src/content/posts/etc/How-to-Use-Figma.md b/src/content/posts/etc/How-to-Use-Figma.md
index 7c864fb..cd2f8ed 100644
--- a/src/content/posts/etc/How-to-Use-Figma.md
+++ b/src/content/posts/etc/How-to-Use-Figma.md
@@ -1,69 +1,69 @@
----
-title: 피그마 사용법
-tags: [figma, etc]
-date: "2024.09.14"
----
-그동안 팀 프로젝트를 진행하며 디자인 협업 툴로 피그마를 많이 사용했습니다.
-피그마를 사용하면서 느낀 점은 정말 편리하고 다루기 쉽다는 생각이 많이 들었고 앞으로 개발을 하며
-이런 디자인 툴 하나 정도는 다룰 줄 아는 게 큰 도움이 될 거 같다는 생각이 들어 피그마의
-간단한 단축키와 사용 방법을 정리해 보았습니다.
-
-## 단축키
-피그마를 사용하며 주로 사용한 단축키 정도만 소개하려 합니다.
-
-**`T` 텍스트 도구**
-**`R` 사각형 그리기**
-**`O` 원 그리기**
-**`L` 선 그리기**
-**`F` 프레임 생성**
-
-**`Space + 드래그` 화면 이동**
-**`Ctrl + Shift + 4 Cmd + Shift + 4` 그리드 표시/숨기기**
-
-**`Alt` 객체간 간격 확인**
-**`Ctrl +R` 레이어 이름 변경**
-**`Tab` 선택 객체 바꾸기**
-**`Ctrl + D` 객체 복제**
-
-**`방향키` 1px 이동**
-**`Shift +방향키` 설정한 픽셀만큼 이동**
-
-**`Ctrl + G` 그룹화**
-**`Ctrl + Shift + G` 그룹 해제**
-
-**`Ctrl + [` 뒤로 보내기**
-**`Ctrl + ]` 앞으로 가져오기**
-**`Ctrl + Shift + [` 맨뒤로 보내기**
-**`Ctrl + Shift + ]` 맨앞으로 가져오기**
-
-## 사용 방법
-
-### 디자인 스타일
-아무것도 선택하지 않은 상태에서 오른쪽에 있는 Inspect를 보면 기본 디자인 설정을 확인할 수 있습니다.
-
-
-### 개발자 모드
-개발자 모드를 활성화 하면 우측 메뉴바에서 해당 디자인의 CSS 속성을 확인할 수 있습니다.
-
-
-
-### 이미지 다운로드
-SVG나 이미지선택해 오른쪽 메뉴바 Inspect 하단에 Export를 이용해 다운받을 수 있습니다.
-
-
-
-### 레이어 보기
-이미지가 너무 많아져 원하는 정보를 찾기 힘들땐 왼쪽에 있는 메뉴바에서 찾으면 편리하게 찾을 수 있습니다.
-
-
-
-### 코멘트 추가
-`C` 디자이너에게 질문이나 피드백을 남길 때 아주 유용하게 사용됩니다.
-
-
-
-## 마치며
-개인 프로젝트에서 Auto Layout기능이 어려웠지만 [개발자를 위한 피그마 튜토리얼](https://www.figma.com/community/file/1314105663439944154) 이 튜토리얼을 보며
-사용법을 익힐 수 있었고 컴포넌트와 Layout기능을 이용해 효율적으로 구현할 수 있었습니다.
-
+---
+title: 피그마 사용법
+tags: [figma, etc]
+date: "2024.09.14"
+---
+그동안 팀 프로젝트를 진행하며 디자인 협업 툴로 피그마를 많이 사용했습니다.
+피그마를 사용하면서 느낀 점은 정말 편리하고 다루기 쉽다는 생각이 많이 들었고 앞으로 개발을 하며
+이런 디자인 툴 하나 정도는 다룰 줄 아는 게 큰 도움이 될 거 같다는 생각이 들어 피그마의
+간단한 단축키와 사용 방법을 정리해 보았습니다.
+
+## 단축키
+피그마를 사용하며 주로 사용한 단축키 정도만 소개하려 합니다.
+
+**`T` 텍스트 도구**
+**`R` 사각형 그리기**
+**`O` 원 그리기**
+**`L` 선 그리기**
+**`F` 프레임 생성**
+
+**`Space + 드래그` 화면 이동**
+**`Ctrl + Shift + 4 Cmd + Shift + 4` 그리드 표시/숨기기**
+
+**`Alt` 객체간 간격 확인**
+**`Ctrl +R` 레이어 이름 변경**
+**`Tab` 선택 객체 바꾸기**
+**`Ctrl + D` 객체 복제**
+
+**`방향키` 1px 이동**
+**`Shift +방향키` 설정한 픽셀만큼 이동**
+
+**`Ctrl + G` 그룹화**
+**`Ctrl + Shift + G` 그룹 해제**
+
+**`Ctrl + [` 뒤로 보내기**
+**`Ctrl + ]` 앞으로 가져오기**
+**`Ctrl + Shift + [` 맨뒤로 보내기**
+**`Ctrl + Shift + ]` 맨앞으로 가져오기**
+
+## 사용 방법
+
+### 디자인 스타일
+아무것도 선택하지 않은 상태에서 오른쪽에 있는 Inspect를 보면 기본 디자인 설정을 확인할 수 있습니다.
+
+
+### 개발자 모드
+개발자 모드를 활성화 하면 우측 메뉴바에서 해당 디자인의 CSS 속성을 확인할 수 있습니다.
+
+
+
+### 이미지 다운로드
+SVG나 이미지선택해 오른쪽 메뉴바 Inspect 하단에 Export를 이용해 다운받을 수 있습니다.
+
+
+
+### 레이어 보기
+이미지가 너무 많아져 원하는 정보를 찾기 힘들땐 왼쪽에 있는 메뉴바에서 찾으면 편리하게 찾을 수 있습니다.
+
+
+
+### 코멘트 추가
+`C` 디자이너에게 질문이나 피드백을 남길 때 아주 유용하게 사용됩니다.
+
+
+
+## 마치며
+개인 프로젝트에서 Auto Layout기능이 어려웠지만 [개발자를 위한 피그마 튜토리얼](https://www.figma.com/community/file/1314105663439944154) 이 튜토리얼을 보며
+사용법을 익힐 수 있었고 컴포넌트와 Layout기능을 이용해 효율적으로 구현할 수 있었습니다.
+
확실히 피그마 사용법을 알게 되면 간단한 디자인을 할 때나 다른 사람과 협업할 때 큰 도움이 되는 것 같습니다.
\ No newline at end of file
diff --git a/src/content/posts/etc/Maple-helper-plan-1.md b/src/content/posts/etc/Maple-helper-plan-1.md
index a27325b..b246f29 100644
--- a/src/content/posts/etc/Maple-helper-plan-1.md
+++ b/src/content/posts/etc/Maple-helper-plan-1.md
@@ -1,33 +1,33 @@
----
-title: 메이플 헬퍼 기획 - 1
-tags: [etc, 메이플 헬퍼]
-series: 메이플 헬퍼
-date: "2024.09.28"
----
-저는 평소에 메이플스토리 라는 게임을 즐겨하는데 이 게임은 유저들이 만든 Nexon Open API 기반의
-유틸리티 서비스들이 있습니다.
-
-## 메이플 헬퍼, 왜 기획하게 되었나?
-메이플스토리는 RPG 게임으로 주간마다 잡을 수 있는 보스가 있습니다. 이 보스를 잡고 얻은 전리품으로
-캐릭터를 더욱 강하게 만들 수 있는데요 기존에 있는 서비스는 캐릭터를 수동으로 등록해야하고 잡을 수
-있는 보스를 직접 입력해줘야 한다는 점이 불편했습니다.
-
-그래서 저는 Nexon Open API를 이용해 캐릭터를 일괄 등록하고 캐릭터의 정보를 바탕으로 잡을 수 있는 보스를
-자동으로 등록 해주는 서비스를 만들려고 합니다.
-
-## 서비스에 필요한 핵심 기능
-
-### 주간 보스 수익 계산기(주보 계산기)
-**기능 설명**
-- Nexon Open API를 통해 캐릭터 정보를 자동으로 불러와 주간 보스 수익을 계산.
-- 수동 입력도 가능해 API 키가 없는 유저도 사용할 수 있도록 유연성 제공.
-
-**세부 기능**
-- `캐릭터 등록` : 캐릭터의 이름이나 API 키를 입력해 계정 내 모든 캐릭터 정보를 자동으로 등록
-- `보스 수익 자동 계산` : 캐릭터의 레벨, 능력치에 따라 잡을 수 있는 보스 목록 제공
-- `월드별 수익 비교` : 서버별 수익을 별로로 계산해 제공합니다.
-
-## 앞으로의 계획
-**API 연동 테스트** -> **웹 MVP 개발**
-
+---
+title: 메이플 헬퍼 기획 - 1
+tags: [etc, 메이플 헬퍼]
+series: maple-helper
+date: "2024.09.28"
+---
+저는 평소에 메이플스토리 라는 게임을 즐겨하는데 이 게임은 유저들이 만든 Nexon Open API 기반의
+유틸리티 서비스들이 있습니다.
+
+## 메이플 헬퍼, 왜 기획하게 되었나?
+메이플스토리는 RPG 게임으로 주간마다 잡을 수 있는 보스가 있습니다. 이 보스를 잡고 얻은 전리품으로
+캐릭터를 더욱 강하게 만들 수 있는데요 기존에 있는 서비스는 캐릭터를 수동으로 등록해야하고 잡을 수
+있는 보스를 직접 입력해줘야 한다는 점이 불편했습니다.
+
+그래서 저는 Nexon Open API를 이용해 캐릭터를 일괄 등록하고 캐릭터의 정보를 바탕으로 잡을 수 있는 보스를
+자동으로 등록 해주는 서비스를 만들려고 합니다.
+
+## 서비스에 필요한 핵심 기능
+
+### 주간 보스 수익 계산기(주보 계산기)
+**기능 설명**
+- Nexon Open API를 통해 캐릭터 정보를 자동으로 불러와 주간 보스 수익을 계산.
+- 수동 입력도 가능해 API 키가 없는 유저도 사용할 수 있도록 유연성 제공.
+
+**세부 기능**
+- `캐릭터 등록` : 캐릭터의 이름이나 API 키를 입력해 계정 내 모든 캐릭터 정보를 자동으로 등록
+- `보스 수익 자동 계산` : 캐릭터의 레벨, 능력치에 따라 잡을 수 있는 보스 목록 제공
+- `월드별 수익 비교` : 서버별 수익을 별로로 계산해 제공합니다.
+
+## 앞으로의 계획
+**API 연동 테스트** -> **웹 MVP 개발**
+
서비스 배포 이후 유저들의 의견을 받아 개발하거나 필요하다 싶은 기능을 추가적으로 개발해 나가려 합니다.
\ No newline at end of file
diff --git a/src/content/posts/etc/Maple-helper-plan-2.md b/src/content/posts/etc/Maple-helper-plan-2.md
index 42b642b..2820777 100644
--- a/src/content/posts/etc/Maple-helper-plan-2.md
+++ b/src/content/posts/etc/Maple-helper-plan-2.md
@@ -1,66 +1,66 @@
----
-title: 메이플 헬퍼 기획 - 2
-tags: [etc, 메이플 헬퍼]
-series: 메이플 헬퍼
-date: "2024.10.12"
----
-
-## 기술 스택 및 아키텍처 설계
-### 기술 스택
-- **Next.js**: 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 React 프레임워크.
-- **React**: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리.
-- **TypeScript**: JavaScript에 타입 안정성을 추가해 개발 생산성 향상.
-- **Axios**: HTTP 요청을 간편하게 처리하는 라이브러리.
-- **Tailwind CSS**: 유틸리티 기반의 CSS 프레임워크로 빠르게 스타일링 가능.
-- **Vercel**: Next.js 애플리케이션을 배포하기 위한 플랫폼.
-
-클라이언트에서 직접 Nexon Open API에 요청을 보내면 개발자 API KEY가 노출될 위험이 있기 때문에
-Next.js의 API 라우트를 활용하여 API KEY를 안전하게 보호하려고 합니다.
-
-Axios 인스턴스를 생성해 기본 URL, 헤더, 에러 처리 등을 일괄적으로 관리하려고 합니다.
-
-tailwind를 이용해 빠른 웹 개발을 하려 합니다.
-
-### 아키텍쳐
-**폴더 구조**
-```
-/src
-|-- /commonComponents # 공통 컴포넌트 모음
-|-- /components # 개별적인 UI 컴포넌트
-|-- /context # React Context API 관련 파일
-|-- /data # 데이터 관련 유틸 (예: 더미 데이터, JSON 파일 등)
-|-- /fetch # API 요청을 위한 함수 모음
-|-- /hooks # 커스텀 훅 정의
-|-- /icons # 아이콘 관련 파일
-|-- /lib # 유틸리티 및 공통 함수
-|-- /pages # Next.js 페이지 라우팅
-| |-- /api # API 라우트 (서버 사이드)
-| |-- /fonts # 웹 폰트 관리
-| |-- /gem # 특정 기능 관련 페이지
-| |-- /genesis # 추가적인 페이지 폴더
-| |-- _app.tsx # Next.js의 App 컴포넌트
-| |-- _document.tsx # Next.js의 Document 설정
-| `-- index.tsx # 메인 페이지
-|-- /styles # 스타일 및 Tailwind 설정
-|-- /type # TypeScript 타입 정의
-|-- /utils # 공통 유틸리티 함수
-|
-|-- .env # 환경 변수 설정 파일
-|-- .eslintrc.json # ESLint 설정 파일
-|-- .gitignore # Git에서 제외할 파일 목록
-|-- .prettierrc # Prettier 코드 스타일 설정
-|-- next-env.d.ts # Next.js 관련 타입 정의
-|-- next.config.mjs # Next.js 설정 파일
-|-- package.json # 프로젝트 의존성 관리
-|-- postcss.config.mjs # PostCSS 설정 파
-|-- README.md # 프로젝트 설명 문서
-|-- tailwind.config.ts # Tailwind CSS 설정 파일
-|-- tsconfig.json # TypeScript 설정 파일
-`-- yarn.lock # Yarn 패키지 종속성 관리 파일
-```
-
-next.js는 page 라우팅 방식과 최근에 나온 app 라우팅 방법이 있는데
-팀프로젝트에서 사용해본 경험이 있는 page 라우팅을 선택했습니다.
-
-**데이터 흐름**
+---
+title: 메이플 헬퍼 기획 - 2
+tags: [etc, 메이플 헬퍼]
+series: maple-helper
+date: "2024.10.12"
+---
+
+## 기술 스택 및 아키텍처 설계
+### 기술 스택
+- **Next.js**: 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 React 프레임워크.
+- **React**: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리.
+- **TypeScript**: JavaScript에 타입 안정성을 추가해 개발 생산성 향상.
+- **Axios**: HTTP 요청을 간편하게 처리하는 라이브러리.
+- **Tailwind CSS**: 유틸리티 기반의 CSS 프레임워크로 빠르게 스타일링 가능.
+- **Vercel**: Next.js 애플리케이션을 배포하기 위한 플랫폼.
+
+클라이언트에서 직접 Nexon Open API에 요청을 보내면 개발자 API KEY가 노출될 위험이 있기 때문에
+Next.js의 API 라우트를 활용하여 API KEY를 안전하게 보호하려고 합니다.
+
+Axios 인스턴스를 생성해 기본 URL, 헤더, 에러 처리 등을 일괄적으로 관리하려고 합니다.
+
+tailwind를 이용해 빠른 웹 개발을 하려 합니다.
+
+### 아키텍쳐
+**폴더 구조**
+```
+/src
+|-- /commonComponents # 공통 컴포넌트 모음
+|-- /components # 개별적인 UI 컴포넌트
+|-- /context # React Context API 관련 파일
+|-- /data # 데이터 관련 유틸 (예: 더미 데이터, JSON 파일 등)
+|-- /fetch # API 요청을 위한 함수 모음
+|-- /hooks # 커스텀 훅 정의
+|-- /icons # 아이콘 관련 파일
+|-- /lib # 유틸리티 및 공통 함수
+|-- /pages # Next.js 페이지 라우팅
+| |-- /api # API 라우트 (서버 사이드)
+| |-- /fonts # 웹 폰트 관리
+| |-- /gem # 특정 기능 관련 페이지
+| |-- /genesis # 추가적인 페이지 폴더
+| |-- _app.tsx # Next.js의 App 컴포넌트
+| |-- _document.tsx # Next.js의 Document 설정
+| `-- index.tsx # 메인 페이지
+|-- /styles # 스타일 및 Tailwind 설정
+|-- /type # TypeScript 타입 정의
+|-- /utils # 공통 유틸리티 함수
+|
+|-- .env # 환경 변수 설정 파일
+|-- .eslintrc.json # ESLint 설정 파일
+|-- .gitignore # Git에서 제외할 파일 목록
+|-- .prettierrc # Prettier 코드 스타일 설정
+|-- next-env.d.ts # Next.js 관련 타입 정의
+|-- next.config.mjs # Next.js 설정 파일
+|-- package.json # 프로젝트 의존성 관리
+|-- postcss.config.mjs # PostCSS 설정 파
+|-- README.md # 프로젝트 설명 문서
+|-- tailwind.config.ts # Tailwind CSS 설정 파일
+|-- tsconfig.json # TypeScript 설정 파일
+`-- yarn.lock # Yarn 패키지 종속성 관리 파일
+```
+
+next.js는 page 라우팅 방식과 최근에 나온 app 라우팅 방법이 있는데
+팀프로젝트에서 사용해본 경험이 있는 page 라우팅을 선택했습니다.
+
+**데이터 흐름**
\ No newline at end of file
diff --git a/src/content/posts/etc/Maple-helper-plan-3.md b/src/content/posts/etc/Maple-helper-plan-3.md
index f5915f4..f398334 100644
--- a/src/content/posts/etc/Maple-helper-plan-3.md
+++ b/src/content/posts/etc/Maple-helper-plan-3.md
@@ -1,108 +1,108 @@
----
-title: 메이플 헬퍼 - 3
-tags: [etc, 메이플 헬퍼]
-series: 메이플 헬퍼
-date: "2024.12.08"
----
-메이플에는 제네시스 무기 해방이라는 엔드 컨텐츠가 있습니다.
-이번 겨울 쇼케이스 이후에 제네시스 무기 해방 퀘스트의 방법이 바뀌어 이를 계산해주는 계산기를 만들기로 했습니다.
-
-## 해방퀘 조건
-해방퀘스트는 255레벨 부터 시작할 수 있고 하위 보스를 잡고 필요한 어둠의 흔적을 모두 채우면 다음 퀘스트를 진행할 수 있습니다.
-
-| 퀘스트 | 필요한 어둠의 흔적 |
-|----------------------|-----------------|
-| 사자왕 반 레온 | 500 |
-| 시간의 대신관 아카이럼 | 500 |
-| 폭군 매그너스 | 500 |
-| 윙 마스터 스우 | 1000 |
-| 파멸의 검 데미안 | 1000 |
-| 거미의 왕 윌 | 1000 |
-| 악몽의 주인 루시드 | 1000 |
-| 붉은 마녀 진 힐라 | 1000 |
-
-어둠의 흔적은 검은 마법사의 수하 보스들을 잡아 채울 수 있습니다.
-이때 **검은 마법사는 월 1회 다른 보스들은 주 1회** 잡을 수 있는데
-목요일마다 보스가 초기화되어 다시 잡을 수 있습니다.
-
-추가로 이 보스들은 여려 명이서 잡게되면 1/n로 보상이 분배됩니다.
-
-| 보스이름 | 난이도 | 보상 |
-|---------------|----------|-------|
-| 스우 | 노멀 | 10 |
-| | 하드 | 50 |
-| | 익스트림 | 50 |
-| 데미안 | 노멀 | 10 |
-| | 하드 | 50 |
-| 루시드 | 이지 | 15 |
-| | 노멀 | 20 |
-| | 하드 | 65 |
-| 더스크 | 노멀 | 20 |
-| | 카오스 | 65 |
-| 윌 | 이지 | 15 |
-| | 노멀 | 25 |
-| | 하드 | 75 |
-| 듄켈 | 노멀 | 25 |
-| | 하드 | 75 |
-| 진 힐라 | 노멀 | 45 |
-| | 하드 | 90 |
-| 검은 마법사 | 하드 | 600 |
-| | 익스트림 | 600 |
-
-## 필요한 로직
-제게 필요한 정보는 다음이 있습니다.
-- 현재 진행중인 퀘스트
-- 현재 보유한 어듬의 흔적
-- 1주에 획득할 수 있는 어둠의 흔적
-- 월에 획득하는 어둠의 흔적
-- 보스를 잡는 날짜
-
-### 진행도 계산
-진행중인 퀘스트를 선택한 후 보유중인 어둠의 흔적을 입력하면
-퀘스트의 진행도를 알려줍니다.
-
-```ts
-const progress = currentBoss?.required_darkness
- ? (currentQuest.gauge / currentBoss.required_darkness) * 100
- : 0 // 퍼센트 계산, required_darkness가 없으면 0%
-```
-
-### 선택한 보스 계산
-보스는 난이도와 상관없이 주에 1회 잡을 수 있기 때문에 `input`태그를 이용해 하나의 난이도만 선택할 수 있도록 해주고 몇명이서 보스를 잡았는지 선택할 수 있게 합니다.
-
-그리고 선택한 보스의 보상 합계를 합산해 1주에 획득할 수 있는 보상으로 기록하고 소수점은 제거 합니다.
-
-이때 주에 획득할 수 있는 보상과 월에 획득할 수 있는 보상을 분리합니다.
-
-
-### 완료 날짜 계산
-사용자가 계산기를 사용한 날짜를 기준으로 계산해 현재 날짜에서 `1주에 획득하는 어둠의 흔적 / 모든 총 필요한 어둠의 흔적`으로 계산해 완료 예상 날짜를 제공합니다.
-
-```ts
-// 계산 로직 함수
-const result = {
- need_darkness: 0,
- bossReward: 0,
- blackMageReward: 0,
- totalReward: 0,
- date: 0,
-}
-// 주마다 보상을 누적해 계산
-export const calculateRewards = (result: RewardResult): RewardResult => {
- const reward = { ...result }
-
- while (reward.totalReward < reward.need_darkness) {
- reward.totalReward += reward.bossReward
- if (reward.date % 4 === 0 || reward.date > 0) {
- reward.totalReward += reward.blackMageReward
- }
- reward.date += 1
- }
- return reward
-}
-```
-
-
-
-## 마치며
-이번에 해방퀘의 조건이 바뀌면서 빠르게 이 기능을 추가하면 좋은 반응이 있겠단 생각이 들어 바로 반영 하게 되었습니다. 역시 만들고 난 후 여러 사람들이 이용해주는 데이터를 확인할 수 있었습니다.
+---
+title: 메이플 헬퍼 - 3
+tags: [etc, 메이플 헬퍼]
+series: maple-helper
+date: "2024.12.08"
+---
+메이플에는 제네시스 무기 해방이라는 엔드 컨텐츠가 있습니다.
+이번 겨울 쇼케이스 이후에 제네시스 무기 해방 퀘스트의 방법이 바뀌어 이를 계산해주는 계산기를 만들기로 했습니다.
+
+## 해방퀘 조건
+해방퀘스트는 255레벨 부터 시작할 수 있고 하위 보스를 잡고 필요한 어둠의 흔적을 모두 채우면 다음 퀘스트를 진행할 수 있습니다.
+
+| 퀘스트 | 필요한 어둠의 흔적 |
+|----------------------|-----------------|
+| 사자왕 반 레온 | 500 |
+| 시간의 대신관 아카이럼 | 500 |
+| 폭군 매그너스 | 500 |
+| 윙 마스터 스우 | 1000 |
+| 파멸의 검 데미안 | 1000 |
+| 거미의 왕 윌 | 1000 |
+| 악몽의 주인 루시드 | 1000 |
+| 붉은 마녀 진 힐라 | 1000 |
+
+어둠의 흔적은 검은 마법사의 수하 보스들을 잡아 채울 수 있습니다.
+이때 **검은 마법사는 월 1회 다른 보스들은 주 1회** 잡을 수 있는데
+목요일마다 보스가 초기화되어 다시 잡을 수 있습니다.
+
+추가로 이 보스들은 여려 명이서 잡게되면 1/n로 보상이 분배됩니다.
+
+| 보스이름 | 난이도 | 보상 |
+|---------------|----------|-------|
+| 스우 | 노멀 | 10 |
+| | 하드 | 50 |
+| | 익스트림 | 50 |
+| 데미안 | 노멀 | 10 |
+| | 하드 | 50 |
+| 루시드 | 이지 | 15 |
+| | 노멀 | 20 |
+| | 하드 | 65 |
+| 더스크 | 노멀 | 20 |
+| | 카오스 | 65 |
+| 윌 | 이지 | 15 |
+| | 노멀 | 25 |
+| | 하드 | 75 |
+| 듄켈 | 노멀 | 25 |
+| | 하드 | 75 |
+| 진 힐라 | 노멀 | 45 |
+| | 하드 | 90 |
+| 검은 마법사 | 하드 | 600 |
+| | 익스트림 | 600 |
+
+## 필요한 로직
+제게 필요한 정보는 다음이 있습니다.
+- 현재 진행중인 퀘스트
+- 현재 보유한 어듬의 흔적
+- 1주에 획득할 수 있는 어둠의 흔적
+- 월에 획득하는 어둠의 흔적
+- 보스를 잡는 날짜
+
+### 진행도 계산
+진행중인 퀘스트를 선택한 후 보유중인 어둠의 흔적을 입력하면
+퀘스트의 진행도를 알려줍니다.
+
+```ts
+const progress = currentBoss?.required_darkness
+ ? (currentQuest.gauge / currentBoss.required_darkness) * 100
+ : 0 // 퍼센트 계산, required_darkness가 없으면 0%
+```
+
+### 선택한 보스 계산
+보스는 난이도와 상관없이 주에 1회 잡을 수 있기 때문에 `input`태그를 이용해 하나의 난이도만 선택할 수 있도록 해주고 몇명이서 보스를 잡았는지 선택할 수 있게 합니다.
+
+그리고 선택한 보스의 보상 합계를 합산해 1주에 획득할 수 있는 보상으로 기록하고 소수점은 제거 합니다.
+
+이때 주에 획득할 수 있는 보상과 월에 획득할 수 있는 보상을 분리합니다.
+
+
+### 완료 날짜 계산
+사용자가 계산기를 사용한 날짜를 기준으로 계산해 현재 날짜에서 `1주에 획득하는 어둠의 흔적 / 모든 총 필요한 어둠의 흔적`으로 계산해 완료 예상 날짜를 제공합니다.
+
+```ts
+// 계산 로직 함수
+const result = {
+ need_darkness: 0,
+ bossReward: 0,
+ blackMageReward: 0,
+ totalReward: 0,
+ date: 0,
+}
+// 주마다 보상을 누적해 계산
+export const calculateRewards = (result: RewardResult): RewardResult => {
+ const reward = { ...result }
+
+ while (reward.totalReward < reward.need_darkness) {
+ reward.totalReward += reward.bossReward
+ if (reward.date % 4 === 0 || reward.date > 0) {
+ reward.totalReward += reward.blackMageReward
+ }
+ reward.date += 1
+ }
+ return reward
+}
+```
+
+
+
+## 마치며
+이번에 해방퀘의 조건이 바뀌면서 빠르게 이 기능을 추가하면 좋은 반응이 있겠단 생각이 들어 바로 반영 하게 되었습니다. 역시 만들고 난 후 여러 사람들이 이용해주는 데이터를 확인할 수 있었습니다.
diff --git a/src/content/posts/etc/Maple-helper-plan-4.md b/src/content/posts/etc/Maple-helper-plan-4.md
index d449f83..01ec4a9 100644
--- a/src/content/posts/etc/Maple-helper-plan-4.md
+++ b/src/content/posts/etc/Maple-helper-plan-4.md
@@ -1,57 +1,57 @@
----
-title: 메이플 헬퍼 배포 회고
-tags: [etc, 메이플 헬퍼]
-series: 메이플 헬퍼
-date: "2024.12.17"
----
-안녕하세요 저는 이번에 메이플 헬퍼라는 웹 서비스를 배포하게 되었습니다.
-이번 포스트에서는 프로젝트 진행 과정과 배포 과정 그리고 구현했던 주요 기능들을 되짚어보며
-느낀 점과 배운 점들을 공유하고자 합니다.
-
-## 서비스 소개
-**사용 언어 및 개발 환경** : `Vercel` `Nexon Open API` `Next.js` `React` `TypeScript` `Axios` `Tailwind CSS`
-
-메이플 헬퍼는 메이플스토리 사용자를 위한 편의 기능을 제공하는 웹 서비스로
-
-- **주간 보스 수익 계산기**
-- **해방 퀘스트 일정 계산기**
-
- 등의 기능을 포함하고 있습니다.
-
-## 배포 과정
-**Vercel을 통한 프론트엔드 배포** : Vercel의 간편한 배포 환경 덕분에 프론트엔드 배포가 매우 수월했습니다. Git 연동과 자동 배포 기능을 적극 활용하여 코드 변경 사항이 실시간으로 반영되는 점이 특히 마음에 들었습니다.
-
-## 주요 기능 개발
-### 보스 주간 수익 계산기 개발
-- 사용자 경험 향상을 위해 API로 받아온 캐릭터 정보를 전역 상태로 관리하고 재방문 시 편의성을 위해 로컬 스토리지에 저장하고 있습니다.
-- API 키를 입력받을 시 계정의 모든 캐릭터 정보를 가져오게 되는데 특정 조건을 만족하는 캐릭터만 등록 하는 로직을 구현했습니다.
-- 주간 보스로 얻은 수익을 `,` 또는 `억, 천, 만`표기로 사용자가 선호하는 포맷팅 방식으로 선택할 수 있습니다.
-### 해방 퀘스트 일정 계산기 개발
-- 사용자가 입력한 날짜를 기준으로 해방 퀘스트의 남을 일수를 계산해줍니다.
-- 남은 일수를 단순 나누기로 계산하면 정확하지 않아 1주씩 더해 필요한 어둠의 기운까지의 일정을 계산 했습니다.
-
-### axios 인스턴스 활용
-- API KEY를 숨기기 위해 클라이언트와 Nexon API 사이에 Next.js API 두어 중요 데이터를 은닉할 수 있었습니다.
- - **클라이언트 -> Next.js API -> Nexon API 호출**
-- `axios`의 인터페이스를 활용해 공통 설정을 관리 하고 인터셉터를 이용해 에러 처리 및 데이터 요청을 로깅했습니다.
-
-### 겪었던 문제
-
-#### 보스 이미지 404 에러
-해방 퀘스트 서비스 배포 이후 특정 이미지들이 로드 되지 않았던 이슈가 있었습니다.
-
-Vercel의 오류 메세지를 확인했고 공식문서를 찾아본 결과 무료 서비스의 이미지 최적화 기능 사용이 최대 1000회 라는 점을 알게 되었습니다. 사용자가 등록한 캐릭터 이미지와 같이 동적인 이미지에 대한 최적화 옵션을 제거하여 문제를 해결할 수 있었습니다.
-
-## 검색엔진 최적화(SEO) & 반응형 디자인
-### 반응형 디자인
-- 서비스 배포 이후 사용자 기기 분석 결과 모바일 사용자의 비중이 50% 가 넘어가는 부분을 확인했고 빠르게 반응형 디자인을 적용해 대응했습니다.
-
-### 검색엔진 노출도 증가
-- Meta Tag, 구글 서치 콘솔, sitemap.xml 를 활용해 웹 사이트의 SEO를 개선했고 실제 검색 엔진에서의 노출 빈도가 증가하는 효과가 있었습니다.
-
-## 회고 및 느낀 점
-기능들을 개발하면서 점점 필요한 기능들이 등장해 개발 기간이 길어지는 상황이 있었습니다. 서비스에 필요한 스팩에 대해 상세하게 설정할 필요성이 있다는 점을 알게 되었습니다.
-
-게임 속에서 발견한 불편함 기능들을 지속적으로 추가하며 서비스가 성장함에 따라 유지보수와 확장이 용이하도록 탄탄한 코드 구조를 위해 고민하고 있습니다.
-
+---
+title: 메이플 헬퍼 배포 회고
+tags: [etc, 메이플 헬퍼]
+series: maple-helper
+date: "2024.12.17"
+---
+안녕하세요 저는 이번에 메이플 헬퍼라는 웹 서비스를 배포하게 되었습니다.
+이번 포스트에서는 프로젝트 진행 과정과 배포 과정 그리고 구현했던 주요 기능들을 되짚어보며
+느낀 점과 배운 점들을 공유하고자 합니다.
+
+## 서비스 소개
+**사용 언어 및 개발 환경** : `Vercel` `Nexon Open API` `Next.js` `React` `TypeScript` `Axios` `Tailwind CSS`
+
+메이플 헬퍼는 메이플스토리 사용자를 위한 편의 기능을 제공하는 웹 서비스로
+
+- **주간 보스 수익 계산기**
+- **해방 퀘스트 일정 계산기**
+
+ 등의 기능을 포함하고 있습니다.
+
+## 배포 과정
+**Vercel을 통한 프론트엔드 배포** : Vercel의 간편한 배포 환경 덕분에 프론트엔드 배포가 매우 수월했습니다. Git 연동과 자동 배포 기능을 적극 활용하여 코드 변경 사항이 실시간으로 반영되는 점이 특히 마음에 들었습니다.
+
+## 주요 기능 개발
+### 보스 주간 수익 계산기 개발
+- 사용자 경험 향상을 위해 API로 받아온 캐릭터 정보를 전역 상태로 관리하고 재방문 시 편의성을 위해 로컬 스토리지에 저장하고 있습니다.
+- API 키를 입력받을 시 계정의 모든 캐릭터 정보를 가져오게 되는데 특정 조건을 만족하는 캐릭터만 등록 하는 로직을 구현했습니다.
+- 주간 보스로 얻은 수익을 `,` 또는 `억, 천, 만`표기로 사용자가 선호하는 포맷팅 방식으로 선택할 수 있습니다.
+### 해방 퀘스트 일정 계산기 개발
+- 사용자가 입력한 날짜를 기준으로 해방 퀘스트의 남을 일수를 계산해줍니다.
+- 남은 일수를 단순 나누기로 계산하면 정확하지 않아 1주씩 더해 필요한 어둠의 기운까지의 일정을 계산 했습니다.
+
+### axios 인스턴스 활용
+- API KEY를 숨기기 위해 클라이언트와 Nexon API 사이에 Next.js API 두어 중요 데이터를 은닉할 수 있었습니다.
+ - **클라이언트 -> Next.js API -> Nexon API 호출**
+- `axios`의 인터페이스를 활용해 공통 설정을 관리 하고 인터셉터를 이용해 에러 처리 및 데이터 요청을 로깅했습니다.
+
+### 겪었던 문제
+
+#### 보스 이미지 404 에러
+해방 퀘스트 서비스 배포 이후 특정 이미지들이 로드 되지 않았던 이슈가 있었습니다.
+
+Vercel의 오류 메세지를 확인했고 공식문서를 찾아본 결과 무료 서비스의 이미지 최적화 기능 사용이 최대 1000회 라는 점을 알게 되었습니다. 사용자가 등록한 캐릭터 이미지와 같이 동적인 이미지에 대한 최적화 옵션을 제거하여 문제를 해결할 수 있었습니다.
+
+## 검색엔진 최적화(SEO) & 반응형 디자인
+### 반응형 디자인
+- 서비스 배포 이후 사용자 기기 분석 결과 모바일 사용자의 비중이 50% 가 넘어가는 부분을 확인했고 빠르게 반응형 디자인을 적용해 대응했습니다.
+
+### 검색엔진 노출도 증가
+- Meta Tag, 구글 서치 콘솔, sitemap.xml 를 활용해 웹 사이트의 SEO를 개선했고 실제 검색 엔진에서의 노출 빈도가 증가하는 효과가 있었습니다.
+
+## 회고 및 느낀 점
+기능들을 개발하면서 점점 필요한 기능들이 등장해 개발 기간이 길어지는 상황이 있었습니다. 서비스에 필요한 스팩에 대해 상세하게 설정할 필요성이 있다는 점을 알게 되었습니다.
+
+게임 속에서 발견한 불편함 기능들을 지속적으로 추가하며 서비스가 성장함에 따라 유지보수와 확장이 용이하도록 탄탄한 코드 구조를 위해 고민하고 있습니다.
+
[서비스 바로가기](https://www.maple-helper.com/)
\ No newline at end of file
diff --git a/src/content/posts/etc/Maple-helper-plan-5.md b/src/content/posts/etc/Maple-helper-plan-5.md
index 1b87569..33350ee 100644
--- a/src/content/posts/etc/Maple-helper-plan-5.md
+++ b/src/content/posts/etc/Maple-helper-plan-5.md
@@ -1,29 +1,29 @@
----
-title: 메이플 헬퍼 기능 기획
-tags: [etc, 메이플 헬퍼]
-series: 메이플 헬퍼
-date: "2025.02.08"
----
-오늘은 메이플 헬퍼에 추가하려는 기능들을 기록하면서 다시 한 번 정리하는 시간을 가져보려 합니다.
-
-기존 메이플 유틸리티 서비스들은 **정보 제공**에만 집중해
-실제 유저들이 일상 속에서 겪는 사소한 불편함을 해소해 주는 서비스는 찾아보기 힘듭니다.
-
-저는 메이플 헬퍼를 이런 부분을 파고들어 유저들이 생각하지 못했던 서비스들을 제공하려 합니다.
-
-그래서 제가 생각한 기능은 가계부 입니다.
-
-실제 유저들이 엑셀을 이용해 일주일의 수익이 어떻게 되는지 내가 구매한 아이템 내역들을 수기로 기록하고 있습니다.
-그래서 저는 어디서든 가능한 웹의 장점을 이용해 가계부 기능을 만들려 합니다.
-
-메이플 헬퍼에서 제공하고 있는 주보 계산기를 활용해 좋은 서비스를 제공할 수 있겠단 생각이 들었습니다.
-그래서 이 가계부에 필요한 기능들을 나열해보면 아래와 같은 내역이 있습니다.
-
-- 주보 수익 (MVP)
-- 사냥 수익 (MVP)
-- 아이템 매매 내역 (MVP)
-- 월간 수익 (MVP)
-- 기존 수익을 바탕으로 예상 수익 계산
-- 엑셀 파일로 내보내기 기능
-
+---
+title: 메이플 헬퍼 기능 기획
+tags: [etc, 메이플 헬퍼]
+series: maple-helper
+date: "2025.02.08"
+---
+오늘은 메이플 헬퍼에 추가하려는 기능들을 기록하면서 다시 한 번 정리하는 시간을 가져보려 합니다.
+
+기존 메이플 유틸리티 서비스들은 **정보 제공**에만 집중해
+실제 유저들이 일상 속에서 겪는 사소한 불편함을 해소해 주는 서비스는 찾아보기 힘듭니다.
+
+저는 메이플 헬퍼를 이런 부분을 파고들어 유저들이 생각하지 못했던 서비스들을 제공하려 합니다.
+
+그래서 제가 생각한 기능은 가계부 입니다.
+
+실제 유저들이 엑셀을 이용해 일주일의 수익이 어떻게 되는지 내가 구매한 아이템 내역들을 수기로 기록하고 있습니다.
+그래서 저는 어디서든 가능한 웹의 장점을 이용해 가계부 기능을 만들려 합니다.
+
+메이플 헬퍼에서 제공하고 있는 주보 계산기를 활용해 좋은 서비스를 제공할 수 있겠단 생각이 들었습니다.
+그래서 이 가계부에 필요한 기능들을 나열해보면 아래와 같은 내역이 있습니다.
+
+- 주보 수익 (MVP)
+- 사냥 수익 (MVP)
+- 아이템 매매 내역 (MVP)
+- 월간 수익 (MVP)
+- 기존 수익을 바탕으로 예상 수익 계산
+- 엑셀 파일로 내보내기 기능
+
우선 가계부에 핵심이 되는 MVP 기능을 우선적으로 만들어 배포한 이후 사용자 피드백을 반영하며 추가적인 기능들을 순차적으로 도입할 계획입니다.
\ No newline at end of file
diff --git a/src/content/posts/etc/MarkdownLanguage.md b/src/content/posts/etc/MarkdownLanguage.md
index 74f4552..b00ab6b 100644
--- a/src/content/posts/etc/MarkdownLanguage.md
+++ b/src/content/posts/etc/MarkdownLanguage.md
@@ -1,139 +1,139 @@
----
-title: 마크다운 문법을 알아보자
-tags: [etc]
-date: "2024.06.15"
----
-
-최근 디스코드 봇에 대해 가시성을 개선해달라는 문의가 들어와 개선한 내용에 대한 글을 써보려 합니다.
-디스코드 봇은 마크다운 문법을 지원해 이를 이용해서 스타일링이 가능합니다. 그래서 오늘은 마크다운 문법에 대해 적어보겠습니다.
-
-## 문법
-
-### 헤더 (Headers)
-
-h1, h2, h3, h4, h5, h6 태그를 # 기호를 사용하여 헤더의 크기를 지정합니다.
->h1, h2는 `=`, `-` 기호도 사용 가능합니다.
-
-```markdown
-# 제목 1
-## 제목 2
-### 제목 3
-#### 제목 4
-##### 제목 5
-###### 제목 6
-
-제목 1
-======
-
-제목 2
-------
-```
-
-### 굵게 (Bold), 기울임 (Italic), 취소선 (Strikethrough)
-텍스트 앞뒤에 ** 또는 __를 추가해 텍스트를 강조할 수 있습니다.
-
-```markdown
-**굵은 텍스트**
-__굵은 텍스트__
-```
-
-기울임꼴로 텍스트를 만들려면 * 또는 _를 사용합니다.
-
-```markdown
-*기울임 텍스트*
-_기울임 텍스트_
-```
-
-취소선을 추가하려면 ~~를 텍스트 앞뒤에 붙입니다.
-
-```markdown
-~~취소선 텍스트~~
-```
-### 인라인 코드 (Inline Code)
-한 줄 내에서 코드를 강조하려면 텍스트 양옆에 백틱(`)을 하나 추가합니다.
-
-```markdown
-`코드 예시`
-```
-### 블록 코드 (Code Block)
-(```)을 세 번 사용해 코드 블록으로 만들 수 있습니다.
->(```) 뒤에 언어 이름을 적을 수 있습니다.
-
-```markdown
-```언어이름
-내용
-```
-
-### 목록 (Lists)
-
-순서 없는 목록
-- -, *, + 기호로 항목을 구분합니다.
-
-순서 있는 목록
-- 숫자와 점을 사용하여 항목을 순서대로 나열합니다.
-
-```markdown
-- 항목 1
-- 항목 2
-- 항목 3
-```
-
-```markdown
-1. 첫 번째 항목
-2. 두 번째 항목
-3. 세 번째 항목
-```
-### 링크 (Links)
-링크를 추가하려면 `[텍스트](URL)` 형식을 사용합니다.
-
-```markdown
-[구글](https://www.google.com)
-```
-
-### 이미지 (Images)
-이미지 삽입은 링크와 비슷하지만 앞에 !을 추가하면 됩니다.
-
-```markdown
-
-```
-
-### 인용문 (Blockquotes)
-인용문을 작성하려면 > 기호를 사용합니다.
-
-```markdown
-> 이것은 인용문입니다.
-```
-
-### 수평선 (Horizontal Rule)
-수평선을 만들려면 ---, ***, 또는 ___을 세 번 이상 입력합니다.
-
-```markdown
----
-```
-### 테이블 (Tables)
-테이블을 작성하려면 | 기호로 열을 구분하고 -로 행을 구분합니다.
-```markdown
-| 이름 | 나이 | 직업 |
-|-------|------|-------|
-| 민수 | 25 | 개발자 |
-| 영희 | 28 | 디자이너 |
-```
-### 체크리스트 (Task Lists)
-체크리스트 항목을 작성하려면 - [ ] 또는 - [x] 형식을 사용합니다.
-```markdown
-- [ ] 해야 할 일 1
-- [x] 완료한 일 1
-- [ ] 해야 할 일 2
-```
-### 하이퍼링크
-URL을 그냥 입력하면 하이퍼링크로 인식됩니다.
-
-```markdown
-https://www.example.com
-```
-
-## 마치며
-마크다운 문법은 노션이나 슬랙, 깃허브와 같은 서비스에서 사용할 수 있어 익힌다면 도움이 많이되는 문법입니다.
-
-[링크](https://www.markdownguide.org/cheat-sheet/)
-이 사이트에서 마크다운에 관한 가이드 잘 정리되어 있습니다.
+---
+title: 마크다운 문법을 알아보자
+tags: [etc]
+date: "2024.06.15"
+---
+
+최근 디스코드 봇에 대해 가시성을 개선해달라는 문의가 들어와 개선한 내용에 대한 글을 써보려 합니다.
+디스코드 봇은 마크다운 문법을 지원해 이를 이용해서 스타일링이 가능합니다. 그래서 오늘은 마크다운 문법에 대해 적어보겠습니다.
+
+## 문법
+
+### 헤더 (Headers)
+
+h1, h2, h3, h4, h5, h6 태그를 # 기호를 사용하여 헤더의 크기를 지정합니다.
+>h1, h2는 `=`, `-` 기호도 사용 가능합니다.
+
+```markdown
+# 제목 1
+## 제목 2
+### 제목 3
+#### 제목 4
+##### 제목 5
+###### 제목 6
+
+제목 1
+======
+
+제목 2
+------
+```
+
+### 굵게 (Bold), 기울임 (Italic), 취소선 (Strikethrough)
+텍스트 앞뒤에 ** 또는 __를 추가해 텍스트를 강조할 수 있습니다.
+
+```markdown
+**굵은 텍스트**
+__굵은 텍스트__
+```
+
+기울임꼴로 텍스트를 만들려면 * 또는 _를 사용합니다.
+
+```markdown
+*기울임 텍스트*
+_기울임 텍스트_
+```
+
+취소선을 추가하려면 ~~를 텍스트 앞뒤에 붙입니다.
+
+```markdown
+~~취소선 텍스트~~
+```
+### 인라인 코드 (Inline Code)
+한 줄 내에서 코드를 강조하려면 텍스트 양옆에 백틱(`)을 하나 추가합니다.
+
+```markdown
+`코드 예시`
+```
+### 블록 코드 (Code Block)
+(```)을 세 번 사용해 코드 블록으로 만들 수 있습니다.
+>(```) 뒤에 언어 이름을 적을 수 있습니다.
+
+```markdown
+```언어이름
+내용
+```
+
+### 목록 (Lists)
+
+순서 없는 목록
+- -, *, + 기호로 항목을 구분합니다.
+
+순서 있는 목록
+- 숫자와 점을 사용하여 항목을 순서대로 나열합니다.
+
+```markdown
+- 항목 1
+- 항목 2
+- 항목 3
+```
+
+```markdown
+1. 첫 번째 항목
+2. 두 번째 항목
+3. 세 번째 항목
+```
+### 링크 (Links)
+링크를 추가하려면 `[텍스트](URL)` 형식을 사용합니다.
+
+```markdown
+[구글](https://www.google.com)
+```
+
+### 이미지 (Images)
+이미지 삽입은 링크와 비슷하지만 앞에 !을 추가하면 됩니다.
+
+```markdown
+
+```
+
+### 인용문 (Blockquotes)
+인용문을 작성하려면 > 기호를 사용합니다.
+
+```markdown
+> 이것은 인용문입니다.
+```
+
+### 수평선 (Horizontal Rule)
+수평선을 만들려면 ---, ***, 또는 ___을 세 번 이상 입력합니다.
+
+```markdown
+---
+```
+### 테이블 (Tables)
+테이블을 작성하려면 | 기호로 열을 구분하고 -로 행을 구분합니다.
+```markdown
+| 이름 | 나이 | 직업 |
+|-------|------|-------|
+| 민수 | 25 | 개발자 |
+| 영희 | 28 | 디자이너 |
+```
+### 체크리스트 (Task Lists)
+체크리스트 항목을 작성하려면 - [ ] 또는 - [x] 형식을 사용합니다.
+```markdown
+- [ ] 해야 할 일 1
+- [x] 완료한 일 1
+- [ ] 해야 할 일 2
+```
+### 하이퍼링크
+URL을 그냥 입력하면 하이퍼링크로 인식됩니다.
+
+```markdown
+https://www.example.com
+```
+
+## 마치며
+마크다운 문법은 노션이나 슬랙, 깃허브와 같은 서비스에서 사용할 수 있어 익힌다면 도움이 많이되는 문법입니다.
+
+[링크](https://www.markdownguide.org/cheat-sheet/)
+이 사이트에서 마크다운에 관한 가이드 잘 정리되어 있습니다.
diff --git a/src/content/posts/etc/Prompt-engineering-summary.md b/src/content/posts/etc/Prompt-engineering-summary.md
index dd480d6..162889f 100644
--- a/src/content/posts/etc/Prompt-engineering-summary.md
+++ b/src/content/posts/etc/Prompt-engineering-summary.md
@@ -1,109 +1,109 @@
----
-title: 프롬프트 엔지니어링 정리
-tags: [etc]
-date: "2025.09.17"
----
-오늘 프롬프트 엔지니어링 강의를 수강하고 핵심만 정리했다.
-
-## 1) 구체적으로 묻기
-
-- 목표, 산출물, 제약을 명확히 쓴다.
-- **요청하지 않은 내용은 답하지 말 것**을 조건으로 건다.
-
- > 예) “아래 요구사항만 충족해 답변하고, 불필요한 배경 설명은 하지 마세요.”
- >
-
-## 2) 맥락 제공하기
-
-- 단순 “방법 알려줘”가 아니라 **현재 상황·목표·제약**을 1~3문장으로 붙인다.
-
- > 예) “Next.js 15, App Router를 사용 중이고 배포는 Vercel입니다. 다크 모드 지원이 필요합니다.”
- >
-
-## 3) 형식 지정하기
-
-- 출력 형식을 미리 고지하면 정확도가 올라간다. 표/리스트/코드블록/요약 길이 등.
-
- > 예) “표로 답하세요. 열: 문제, 접근, 예시코드. 10줄 이내.”
- >
-
-## 4) 요청과 데이터 분리하기
-
-- **명령**과 **재료(데이터)**를 분리해 전달한다.
-
- > 예) “따옴표 안 텍스트를 한국어로 자연스럽게 번역해 주세요.
- >
- >
- > 텍스트: `"...your text..."`”
- >
-
-## 5) 역할 부여하기
-
-- 기대하는 시각을 명시한다. 면접관, 시니어 FE, 성능 컨설턴트 등.
-
- > 예) “당신은 시니어 프론트엔드 면접관입니다. 코드 리뷰 관점에서 피드백하세요.”
- >
-
-## 6) 예시 제공하기
-
-- **좋은 예/나쁜 예**를 1개씩 주면 톤과 범위를 맞추기 쉽다.
-
- > 예) “좋은 답안 예시는 이런 구조입니다: … / 이런 식의 장황한 서론은 피하세요.”
- >
-
-## 7) 핵심 요구 반복·고정하기
-
-- 프롬프트가 길어지면 조건이 누락되기 쉽다. 마지막에 **체크리스트**로 다시 고정.
-
- > 예) “반드시 지킬 것: ① 코드만 ② TypeScript ③ 주석 금지”
- >
-
-## 8) 할루시네이션 방지
-
-- 모를 때의 태도를 명시한다.
-
- > 예) “불확실하면 ‘해당 내용은 확실하게 답변하기 어렵습니다’라고 말하고, 이유와 필요한 추가 정보 목록을 제시하세요.”
- >
-
-## 9) 복잡한 작업은 단계화
-
-- 한 번에 완성 요구 X → **단계별**로 나눠 요청.
-
- > 예) “1) 요구사항 목록화 → 2) 설계 초안 → 3) 코드 초안 → 4) 테스트 케이스”
- >
-
-## 내가 써볼 프롬프트 템플릿
-
-```
-[역할] 당신은 {역할/전문가}입니다.
-
-[상황] {현재 스택/버전/환경}이며, 목표는 {목표}입니다.
-제약은 {성능/접근성/시간/호환성 등}입니다.
-
-[요청] 아래 작업을 수행하세요: {구체 작업}
-- 출력 형식: {표/리스트/코드블록 등}, 분량: {n줄/항목 수}
-- 불확실하면: “확실히 답변하기 어렵습니다”라고 말하고 이유와 추가로 필요한 정보를 제시하세요.
-- 하지 말 것: {불필요한 서론/추가 제안 등}
-
-[데이터]
-"""
-{데이터 원문/코드/로그}
-"""
-
-[체크리스트]
-- {필수 조건 1}
-- {필수 조건 2}
-- {필수 조건 3}
-
-```
-
----
-
-## 정리
-
-- **맥락 + 형식 + 제약**을 먼저 못 박고,
-- **예시와 역할**로 답변의 톤을 고정한 뒤,
-- **체크리스트**로 핵심 요구를 다시 잠근다.
-- 모르면 모른다고 하게 만들고, 복잡한 일은 **단계별**로 쪼갠다.
-
+---
+title: 프롬프트 엔지니어링 정리
+tags: [etc]
+date: "2025.09.17"
+---
+오늘 프롬프트 엔지니어링 강의를 수강하고 핵심만 정리했다.
+
+## 1) 구체적으로 묻기
+
+- 목표, 산출물, 제약을 명확히 쓴다.
+- **요청하지 않은 내용은 답하지 말 것**을 조건으로 건다.
+
+ > 예) “아래 요구사항만 충족해 답변하고, 불필요한 배경 설명은 하지 마세요.”
+ >
+
+## 2) 맥락 제공하기
+
+- 단순 “방법 알려줘”가 아니라 **현재 상황·목표·제약**을 1~3문장으로 붙인다.
+
+ > 예) “Next.js 15, App Router를 사용 중이고 배포는 Vercel입니다. 다크 모드 지원이 필요합니다.”
+ >
+
+## 3) 형식 지정하기
+
+- 출력 형식을 미리 고지하면 정확도가 올라간다. 표/리스트/코드블록/요약 길이 등.
+
+ > 예) “표로 답하세요. 열: 문제, 접근, 예시코드. 10줄 이내.”
+ >
+
+## 4) 요청과 데이터 분리하기
+
+- **명령**과 **재료(데이터)**를 분리해 전달한다.
+
+ > 예) “따옴표 안 텍스트를 한국어로 자연스럽게 번역해 주세요.
+ >
+ >
+ > 텍스트: `"...your text..."`”
+ >
+
+## 5) 역할 부여하기
+
+- 기대하는 시각을 명시한다. 면접관, 시니어 FE, 성능 컨설턴트 등.
+
+ > 예) “당신은 시니어 프론트엔드 면접관입니다. 코드 리뷰 관점에서 피드백하세요.”
+ >
+
+## 6) 예시 제공하기
+
+- **좋은 예/나쁜 예**를 1개씩 주면 톤과 범위를 맞추기 쉽다.
+
+ > 예) “좋은 답안 예시는 이런 구조입니다: … / 이런 식의 장황한 서론은 피하세요.”
+ >
+
+## 7) 핵심 요구 반복·고정하기
+
+- 프롬프트가 길어지면 조건이 누락되기 쉽다. 마지막에 **체크리스트**로 다시 고정.
+
+ > 예) “반드시 지킬 것: ① 코드만 ② TypeScript ③ 주석 금지”
+ >
+
+## 8) 할루시네이션 방지
+
+- 모를 때의 태도를 명시한다.
+
+ > 예) “불확실하면 ‘해당 내용은 확실하게 답변하기 어렵습니다’라고 말하고, 이유와 필요한 추가 정보 목록을 제시하세요.”
+ >
+
+## 9) 복잡한 작업은 단계화
+
+- 한 번에 완성 요구 X → **단계별**로 나눠 요청.
+
+ > 예) “1) 요구사항 목록화 → 2) 설계 초안 → 3) 코드 초안 → 4) 테스트 케이스”
+ >
+
+## 내가 써볼 프롬프트 템플릿
+
+```
+[역할] 당신은 {역할/전문가}입니다.
+
+[상황] {현재 스택/버전/환경}이며, 목표는 {목표}입니다.
+제약은 {성능/접근성/시간/호환성 등}입니다.
+
+[요청] 아래 작업을 수행하세요: {구체 작업}
+- 출력 형식: {표/리스트/코드블록 등}, 분량: {n줄/항목 수}
+- 불확실하면: “확실히 답변하기 어렵습니다”라고 말하고 이유와 추가로 필요한 정보를 제시하세요.
+- 하지 말 것: {불필요한 서론/추가 제안 등}
+
+[데이터]
+"""
+{데이터 원문/코드/로그}
+"""
+
+[체크리스트]
+- {필수 조건 1}
+- {필수 조건 2}
+- {필수 조건 3}
+
+```
+
+---
+
+## 정리
+
+- **맥락 + 형식 + 제약**을 먼저 못 박고,
+- **예시와 역할**로 답변의 톤을 고정한 뒤,
+- **체크리스트**로 핵심 요구를 다시 잠근다.
+- 모르면 모른다고 하게 만들고, 복잡한 일은 **단계별**로 쪼갠다.
+
필요하면 위 템플릿을 블로그 글 하단에 복붙용으로 두고 상황/요구/체크리스트만 교체해서 쓰면 된다.
\ No newline at end of file
diff --git a/src/content/posts/etc/Refactoring-Blog-Retrospective.md b/src/content/posts/etc/Refactoring-Blog-Retrospective.md
index 20e46a5..97509b7 100644
--- a/src/content/posts/etc/Refactoring-Blog-Retrospective.md
+++ b/src/content/posts/etc/Refactoring-Blog-Retrospective.md
@@ -1,66 +1,67 @@
----
-title: 2025년 블로그 리펙토링 회고록
-tags: [etc]
-date: "2025.01.18"
----
-## 목표
-이번에 리펙토링을 계획하게 된 이유들 입니다.
-1. 게시글을 `tsx`파일로 관리하고 있어 관리가 힘들고 글을 작성할 때 접근성이 떨어짐
-2. 블로그 SEO 개선 필요
-
-이런 문제를 해결하기 위해 어떤 방법을 사용하면 좋을까 생각하다 Next.js의 app라우터를 이용해
-관리하기 쉬운 폴더구조를 만들고 서버사이드 렌더링을 이용해 SEO를 개선하면 되겠다라는 생각이 들어
-기존 React기반의 블로그에서 Next.js로 마이그레이션을 진행했습니다.
-
-## 프로젝트 구조, 개선 사항
-모든 게시글은 `content` 폴더 내부에 `.md`파일을 생성해 작성 합니다.
-
-```
-/public
-|-- /fonts
-|-- /img
-| |-- file.svg
-| |-- globe.svg
-| |-- next.svg
-| |-- vercel.svg
-| |-- window.svg
-| `-- x.svg
-|
-/src
-|-- /app
-|-- /components
-|-- /content # 게시글 폴더
-| |-- /backEnd
-| |-- /cs
-| |-- /css
-| |-- /etc
-| |-- /frontEnd
-| |-- /html
-| |-- /javascript
-| |-- /network
-| |-- /next
-| |-- /node
-| |-- /react
-| |-- /server
-| `-- /typescript
-|
-/lib
-```
-기존 React기반의 블로그에 작성한 글들은 `tsx`파일로 관리되고 있어 `.md`파일로 변환하는 작업이 필요 했는데 해당 작업에 대한 정보는 [여기](https://www.spde3289.dev/posts/javascript/html-to-readme-guide)에서 확인하실 수 있습니다.
-
-Next.js의 서버 컴포넌트 클라이언트 컴포넌트 덕분에 클라이언트 로직과 서버의 로직을 분리할 수 있었고 서버에서 `fs` 모듈을 이용해 폴더 내부에 있는 파일을 읽어서 `remark`라이브러리를 이용해 HTML로 변환해 제공합니다.
-
-`generateStaticParams`를 이용해 모든 게시글을 정적으로 빌드해 사용자에게 제공하고 있습니다.
-
-또한 기존의 게시글을 관리할 때 게시글 검색 기능이나 카테고리 정렬, 페이지네이션과 같은 기능이 뒤로 가기를 눌렀을 때 초기상태로 돌아간다는 문제가 있었지만 쿼리 스트링을 이용해 이런 문제를 해결했습니다.
-
-spde3289.dev 도메인을 구매해 Vercel을 이용해 배포했습니다.
-
-## 마치며
-이번에 블로그를 리펙토링하면서 느낀 점은 개발하는 방식이 많이 변했습니다.
-이전에만 해도 번역된 글이나 사람들이 이미 사용것을 기록한 개발 블로그들을 보며 새로운 기술이나 기능들을 보며 따라했다면 지금은 공식 문서룰 우선 살펴보게 되었습니다.
-항상 그런 것은 아니지만 공식 문서만큼 정확도도 높고 정리가 잘 되어있는 곳이 없다는 걸 알게 되었습니다.
-
-무작정 개발하는 사람이 아니라 동작하는 원리, 적절한 용도를 알고 응용할 수 있는 좋은 개발자가 되고 싶습니다.
-
+---
+title: 2025년 블로그 리펙토링 회고록
+series: blog
+tags: [etc]
+date: "2025.01.18"
+---
+## 목표
+이번에 리펙토링을 계획하게 된 이유들 입니다.
+1. 게시글을 `tsx`파일로 관리하고 있어 관리가 힘들고 글을 작성할 때 접근성이 떨어짐
+2. 블로그 SEO 개선 필요
+
+이런 문제를 해결하기 위해 어떤 방법을 사용하면 좋을까 생각하다 Next.js의 app라우터를 이용해
+관리하기 쉬운 폴더구조를 만들고 서버사이드 렌더링을 이용해 SEO를 개선하면 되겠다라는 생각이 들어
+기존 React기반의 블로그에서 Next.js로 마이그레이션을 진행했습니다.
+
+## 프로젝트 구조, 개선 사항
+모든 게시글은 `content` 폴더 내부에 `.md`파일을 생성해 작성 합니다.
+
+```
+/public
+|-- /fonts
+|-- /img
+| |-- file.svg
+| |-- globe.svg
+| |-- next.svg
+| |-- vercel.svg
+| |-- window.svg
+| `-- x.svg
+|
+/src
+|-- /app
+|-- /components
+|-- /content # 게시글 폴더
+| |-- /backEnd
+| |-- /cs
+| |-- /css
+| |-- /etc
+| |-- /frontEnd
+| |-- /html
+| |-- /javascript
+| |-- /network
+| |-- /next
+| |-- /node
+| |-- /react
+| |-- /server
+| `-- /typescript
+|
+/lib
+```
+기존 React기반의 블로그에 작성한 글들은 `tsx`파일로 관리되고 있어 `.md`파일로 변환하는 작업이 필요 했는데 해당 작업에 대한 정보는 [여기](https://www.spde3289.dev/posts/javascript/html-to-readme-guide)에서 확인하실 수 있습니다.
+
+Next.js의 서버 컴포넌트 클라이언트 컴포넌트 덕분에 클라이언트 로직과 서버의 로직을 분리할 수 있었고 서버에서 `fs` 모듈을 이용해 폴더 내부에 있는 파일을 읽어서 `remark`라이브러리를 이용해 HTML로 변환해 제공합니다.
+
+`generateStaticParams`를 이용해 모든 게시글을 정적으로 빌드해 사용자에게 제공하고 있습니다.
+
+또한 기존의 게시글을 관리할 때 게시글 검색 기능이나 카테고리 정렬, 페이지네이션과 같은 기능이 뒤로 가기를 눌렀을 때 초기상태로 돌아간다는 문제가 있었지만 쿼리 스트링을 이용해 이런 문제를 해결했습니다.
+
+spde3289.dev 도메인을 구매해 Vercel을 이용해 배포했습니다.
+
+## 마치며
+이번에 블로그를 리펙토링하면서 느낀 점은 개발하는 방식이 많이 변했습니다.
+이전에만 해도 번역된 글이나 사람들이 이미 사용것을 기록한 개발 블로그들을 보며 새로운 기술이나 기능들을 보며 따라했다면 지금은 공식 문서룰 우선 살펴보게 되었습니다.
+항상 그런 것은 아니지만 공식 문서만큼 정확도도 높고 정리가 잘 되어있는 곳이 없다는 걸 알게 되었습니다.
+
+무작정 개발하는 사람이 아니라 동작하는 원리, 적절한 용도를 알고 응용할 수 있는 좋은 개발자가 되고 싶습니다.
+
지금 당장 어렵더라도 차근차근 하나씩 익혀가다 보면 언젠가는 훌륭한 개발자가 될 수 있으리라 믿으며 노력하겠습니다!
\ No newline at end of file
diff --git a/src/content/posts/etc/Sprint-Week-1.md b/src/content/posts/etc/Sprint-Week-1.md
index 525717b..4a39ab5 100644
--- a/src/content/posts/etc/Sprint-Week-1.md
+++ b/src/content/posts/etc/Sprint-Week-1.md
@@ -1,30 +1,30 @@
----
-title: 스프린트 부트캠프 1 주차 후기
-tags: [etc, 스프린트 부트캠프]
-series: 스프린트 부트캠프
-date: "2025.09.06"
----
-
-
-## 시작하기에 앞서
-
-면접에서 계속 떨어지고 기술 면접을 볼수록 내가 CS 지식과 기본기가 부족하다는 걸 많이 느꼈다. 그래서 기본기를 다지고 다양한 협업 기회를 얻기 위해 스트린트 부트캠프에 합류했다.
-우선 후기를 작성하기 이전에 부트캠프에서 내가 가져가야 하는 부분과 마음가짐에 대해서 스스로 질문해 보는 시간을 가져보았다
-
-**Q1. 이 부트캠프를 수료하고 얻어가야할 부분이 무엇일까?**
-
-A. 거만하다고 보일 수는 있겠지만 커리큘럼을 보았을 때 과제의 기능 구현 난이도만 놓고 보면 어렵지 않게 할 수 있어 보인다. 실제로 내가 이미 해보았던 구현이었고 경험해 본 일이기 때문이다. 그래서 나에게 구현보다 더 중요한 것은 내 코드를 다른 사람에게 설명하고 내 생각을 말로 전달하는 역량이라고 생각한다. 따라서 단순 기능 구현이 아니라 글로 적고 말로 설명하는 연습을 중점적으로 하려고 한다.
-
-## 1주차 후기
-
-9월 1일 간단한 OT를 시작으로 9월 2일 첫 수업을 시작하게 되었다. 수업은 인터넷 강의와 비슷한 형태로 진행되었고 궁금한 점이 있으면 디스코드 DM으로 강사님께 바로 물어볼 수 있었다.
-
-아직 1주차라서 아주 기본적인 HTML, CSS에 대해서 배우는 시간을 가졌는데 확실히 개발 공부를 하다 합류해서 그런가 학습 난이도는 쉽게 느껴졌다.
-
-그리고 아주 마음에 드는 부분이 있었는데 바로 매일 팀 미팅을 진행하는 부분이다. 매일 팀 미팅에서는 학습 진도와 어려웠던 부분을 공유하고, 돌아가며 퀴즈를 내고 맞추는 시간을 가진다. 기록하고 말하기 연습이 필요한 나에게 큰 도움이 될 것 같다.
-
-여담으로 내가 팀장을 맡게 되었는데 앞으로는 팀원들과 함께 열심히 하는 분위기를 만들고 원하는 목표를 꼭 이루고 싶다.
-
-## 마치며
-
+---
+title: 스프린트 부트캠프 1 주차 후기
+tags: [etc, 스프린트 부트캠프]
+series: sprint-bootcamp
+date: "2025.09.06"
+---
+
+
+## 시작하기에 앞서
+
+면접에서 계속 떨어지고 기술 면접을 볼수록 내가 CS 지식과 기본기가 부족하다는 걸 많이 느꼈다. 그래서 기본기를 다지고 다양한 협업 기회를 얻기 위해 스트린트 부트캠프에 합류했다.
+우선 후기를 작성하기 이전에 부트캠프에서 내가 가져가야 하는 부분과 마음가짐에 대해서 스스로 질문해 보는 시간을 가져보았다
+
+**Q1. 이 부트캠프를 수료하고 얻어가야할 부분이 무엇일까?**
+
+A. 거만하다고 보일 수는 있겠지만 커리큘럼을 보았을 때 과제의 기능 구현 난이도만 놓고 보면 어렵지 않게 할 수 있어 보인다. 실제로 내가 이미 해보았던 구현이었고 경험해 본 일이기 때문이다. 그래서 나에게 구현보다 더 중요한 것은 내 코드를 다른 사람에게 설명하고 내 생각을 말로 전달하는 역량이라고 생각한다. 따라서 단순 기능 구현이 아니라 글로 적고 말로 설명하는 연습을 중점적으로 하려고 한다.
+
+## 1주차 후기
+
+9월 1일 간단한 OT를 시작으로 9월 2일 첫 수업을 시작하게 되었다. 수업은 인터넷 강의와 비슷한 형태로 진행되었고 궁금한 점이 있으면 디스코드 DM으로 강사님께 바로 물어볼 수 있었다.
+
+아직 1주차라서 아주 기본적인 HTML, CSS에 대해서 배우는 시간을 가졌는데 확실히 개발 공부를 하다 합류해서 그런가 학습 난이도는 쉽게 느껴졌다.
+
+그리고 아주 마음에 드는 부분이 있었는데 바로 매일 팀 미팅을 진행하는 부분이다. 매일 팀 미팅에서는 학습 진도와 어려웠던 부분을 공유하고, 돌아가며 퀴즈를 내고 맞추는 시간을 가진다. 기록하고 말하기 연습이 필요한 나에게 큰 도움이 될 것 같다.
+
+여담으로 내가 팀장을 맡게 되었는데 앞으로는 팀원들과 함께 열심히 하는 분위기를 만들고 원하는 목표를 꼭 이루고 싶다.
+
+## 마치며
+
앞으로 블로그에 강의에서 배운 내용을 다른 사람에게 설명하듯 올리는 글들을 많이 올리려고 한다. 짧더라도 하루에 한 편씩 글을 올리는 것을 목표로 이 글을 마무리하려 한다.
\ No newline at end of file
diff --git a/src/content/posts/etc/Sprint-Week-2.md b/src/content/posts/etc/Sprint-Week-2.md
index fa00688..b8c8405 100644
--- a/src/content/posts/etc/Sprint-Week-2.md
+++ b/src/content/posts/etc/Sprint-Week-2.md
@@ -1,44 +1,44 @@
----
-title: 스프린트 부트캠프 2 주차 후기
-tags: [etc, 스프린트 부트캠프]
-series: 스프린트 부트캠프
-date: "2025.09.13"
----
-
-2주차의 핵심은 **스프린트 미션 진행**과 **유닉스 커맨드, Git 학습**이었다.
-
-## 유닉스 커맨드와 Git 학습
-
-2주차에는 실용적인 유닉스 커맨드와 Git을 배웠다. 개인적으로 1주차보다 더 의미 있는 시간이었다. 그동안 Git을 사용해 왔지만, 사실상 `pull`, `push`, `merge` 정도만 알고 있었기 때문이다.
-
-유닉스 커맨드 학습에서는 폴더 구조와 파일 경로, CLI(Command-Line Interface) 환경에서 파일을 관리하는 방법, 기본 명령어, 그리고 `vim` 사용법까지 다뤘다. 또, **Ubuntu**에 대한 설명도 들을 수 있었는데, 그동안 AWS에 서비스를 호스팅하면서도 Ubuntu 명령어를 잘 알지 못했던 나에게는 뜻깊은 시간이었다. 이번 기회에 어떤 명령어가 있고, 그 명령어가 어떤 의미를 가지는지 체계적으로 이해할 수 있었다.
-
-Git은 특히 기대하던 학습 주제였다. 그동안 독학으로 공부하며 겉핥기식으로만 알고 있었는데, 이번에는 확실히 정리하고 싶었다. 공부하다가 가장 부끄러웠던 순간은 그동안 내가 Git과 GitHub를 혼동하고 있었다는 사실을 깨달았을 때였다.
-
-Git은 버전 관리 시스템이고, GitHub는 단지 그 버전을 **온라인에서 저장하고 공유할 수 있는 클라우드 서비스**라는 점을 이번에야 명확히 알게 되었다.
-
-이 과정을 통해 내 개발 지식이 아직은 모래 위에 세운 탑과 같다는 사실을 실감했다. 하지만 이런 깨달음 덕분에 "프론트엔드 심화 과정"이 아닌 지금의 **부트캠프 과정에 지원하길 잘했다**는 확신도 들었다.
-
-## 스프린트 미션과 코드 리뷰
-
-스프린트 미션은 그동안 배운 지식을 바탕으로 요구된 스펙을 구현하고, 강사님에게 코드 리뷰를 받는 것이 핵심이었다.
-
-이번 주 미션은 **라이브러리나 UI 컴포넌트 없이 HTML과 CSS만으로 레이아웃을 구현하는 것**이었다. 솔직히 과제 자체는 어렵지 않았고 빠르게 스펙을 충족할 수 있었다. 하지만 코드 리뷰를 받으면서 많은 개선점을 발견했다.
-
-예를 들어,
-
-- 이미지 네이밍 규칙을 지키지 않은 점
-- 필요 없는 공백이 남아 있는 점
-- 태그 들여쓰기가 일정하지 않아 가독성이 떨어지는 점
-- 동일하지 않은 규칙으로 코드를 작성한 점
-
-이처럼 개발 습관과 관련된 피드백이 많았다. 순간 부끄럽기도 했지만, "3년 동안 개발을 해오면서도 습관 하나 고치지 못했구나"라는 반성의 기회가 되었다.
-
-Prettier로 자동 포맷팅을 적용하고 있었지만, **커밋 전에 내가 직접 마지막으로 코드를 확인하는 습관**을 반드시 가져야겠다고 다짐했다.
-
-
-## 마치며
-
-이렇게 2주차가 마무리되었다. 유독 정신없이 지나간 한 주였다. 팀장 역할을 처음 맡아 팀을 주도적으로 이끌어가는 것도 쉽지 않았고, 매일 강의를 듣고 복습한 뒤 남은 시간에 개인 프로젝트까지 진행하다 보니 시간이 더 빨리 흘러간 것 같다.
-
+---
+title: 스프린트 부트캠프 2 주차 후기
+tags: [etc, 스프린트 부트캠프]
+series: sprint-bootcamp
+date: "2025.09.13"
+---
+
+2주차의 핵심은 **스프린트 미션 진행**과 **유닉스 커맨드, Git 학습**이었다.
+
+## 유닉스 커맨드와 Git 학습
+
+2주차에는 실용적인 유닉스 커맨드와 Git을 배웠다. 개인적으로 1주차보다 더 의미 있는 시간이었다. 그동안 Git을 사용해 왔지만, 사실상 `pull`, `push`, `merge` 정도만 알고 있었기 때문이다.
+
+유닉스 커맨드 학습에서는 폴더 구조와 파일 경로, CLI(Command-Line Interface) 환경에서 파일을 관리하는 방법, 기본 명령어, 그리고 `vim` 사용법까지 다뤘다. 또, **Ubuntu**에 대한 설명도 들을 수 있었는데, 그동안 AWS에 서비스를 호스팅하면서도 Ubuntu 명령어를 잘 알지 못했던 나에게는 뜻깊은 시간이었다. 이번 기회에 어떤 명령어가 있고, 그 명령어가 어떤 의미를 가지는지 체계적으로 이해할 수 있었다.
+
+Git은 특히 기대하던 학습 주제였다. 그동안 독학으로 공부하며 겉핥기식으로만 알고 있었는데, 이번에는 확실히 정리하고 싶었다. 공부하다가 가장 부끄러웠던 순간은 그동안 내가 Git과 GitHub를 혼동하고 있었다는 사실을 깨달았을 때였다.
+
+Git은 버전 관리 시스템이고, GitHub는 단지 그 버전을 **온라인에서 저장하고 공유할 수 있는 클라우드 서비스**라는 점을 이번에야 명확히 알게 되었다.
+
+이 과정을 통해 내 개발 지식이 아직은 모래 위에 세운 탑과 같다는 사실을 실감했다. 하지만 이런 깨달음 덕분에 "프론트엔드 심화 과정"이 아닌 지금의 **부트캠프 과정에 지원하길 잘했다**는 확신도 들었다.
+
+## 스프린트 미션과 코드 리뷰
+
+스프린트 미션은 그동안 배운 지식을 바탕으로 요구된 스펙을 구현하고, 강사님에게 코드 리뷰를 받는 것이 핵심이었다.
+
+이번 주 미션은 **라이브러리나 UI 컴포넌트 없이 HTML과 CSS만으로 레이아웃을 구현하는 것**이었다. 솔직히 과제 자체는 어렵지 않았고 빠르게 스펙을 충족할 수 있었다. 하지만 코드 리뷰를 받으면서 많은 개선점을 발견했다.
+
+예를 들어,
+
+- 이미지 네이밍 규칙을 지키지 않은 점
+- 필요 없는 공백이 남아 있는 점
+- 태그 들여쓰기가 일정하지 않아 가독성이 떨어지는 점
+- 동일하지 않은 규칙으로 코드를 작성한 점
+
+이처럼 개발 습관과 관련된 피드백이 많았다. 순간 부끄럽기도 했지만, "3년 동안 개발을 해오면서도 습관 하나 고치지 못했구나"라는 반성의 기회가 되었다.
+
+Prettier로 자동 포맷팅을 적용하고 있었지만, **커밋 전에 내가 직접 마지막으로 코드를 확인하는 습관**을 반드시 가져야겠다고 다짐했다.
+
+
+## 마치며
+
+이렇게 2주차가 마무리되었다. 유독 정신없이 지나간 한 주였다. 팀장 역할을 처음 맡아 팀을 주도적으로 이끌어가는 것도 쉽지 않았고, 매일 강의를 듣고 복습한 뒤 남은 시간에 개인 프로젝트까지 진행하다 보니 시간이 더 빨리 흘러간 것 같다.
+
다음 주부터는 **JavaScript 강의**가 시작된다. 이번에는 기초를 튼튼히 다져 앞으로의 학습에 든든한 기반이 될 수 있기를 바란다.
\ No newline at end of file
diff --git a/src/content/posts/etc/Sprint-Week-3.md b/src/content/posts/etc/Sprint-Week-3.md
index 539b673..adf834a 100644
--- a/src/content/posts/etc/Sprint-Week-3.md
+++ b/src/content/posts/etc/Sprint-Week-3.md
@@ -1,28 +1,28 @@
----
-title: 스프린트 부트캠프 3 주차 후기
-tags: [etc, 스프린트 부트캠프]
-series: 스프린트 부트캠프
-date: "2025.09.20"
----
-이번 주는 **자바스크립트 기초**를 다뤘다. 변수, `return`문, 반복문, 조건문 등 기본적인 내용을 중심으로 다시 정리하는 느낌이었다.
-
-## 스프린트 미션 2, 코드 리뷰
-
-지난 미션에서 개발 습관과 컨벤션 관련 피드백을 받았기 때문에 이번에는 커밋 전에 검수를 꼼꼼히 했다. 다행히 같은 지적은 받지 않았다. 대신 중복 스타일 관리에 대해 질문했고 기준을 세우는 방법을 배울 수 있었다.
-
-## 멘토링
-
-멘토링 시간에는 주로 멘토님의 개인적인 생각을 물어보는 편인데, 인상 깊었던 말씀들을 정리해 보았다.
-
-- **개발에는 정답이 없다. 자신만의 논리 구조를 만들어 나가기**
- - 내가 중요하게 생각하는 기준들이 코드에 드러나야 하고 그것을 남들에게 설명할 수 있어야 한다.
- - 예를 들어 나는 추상화보다 재사용성과 가독성을 더 중요하게 생각하는데 그 이유는 추상화보다 현실적이고 협업에 도움이 되기 때문이다.
-- **뇌 빼고 개발하지 말자**
- - 아무 생각 없이 개발하다 보면 자신만의 논리 구조를 세우기 힘들다.
- - 혼자 개발하더라도 컨벤션을 지키며 코드를 작성해야 한다.
-
-## 마치며
-
-멘토링과 코드 리뷰 같은 기회에서 내가 얻을 수 있는 부분이 무엇일지 고민해 보았다. 그중 가장 큰 도움이 되는 것은 강사님과 멘토님의 개인적인 의견을 들을 수 있다는 점이라고 생각한다. 과제를 진행하다 막히면 스스로 찾아보며 해결할 수 있어야 하지만 이런 기회가 아니면 다른 사람들의 시각을 접하기 어렵기 때문이다.
-
+---
+title: 스프린트 부트캠프 3 주차 후기
+tags: [etc, 스프린트 부트캠프]
+series: sprint-bootcamp
+date: "2025.09.20"
+---
+이번 주는 **자바스크립트 기초**를 다뤘다. 변수, `return`문, 반복문, 조건문 등 기본적인 내용을 중심으로 다시 정리하는 느낌이었다.
+
+## 스프린트 미션 2, 코드 리뷰
+
+지난 미션에서 개발 습관과 컨벤션 관련 피드백을 받았기 때문에 이번에는 커밋 전에 검수를 꼼꼼히 했다. 다행히 같은 지적은 받지 않았다. 대신 중복 스타일 관리에 대해 질문했고 기준을 세우는 방법을 배울 수 있었다.
+
+## 멘토링
+
+멘토링 시간에는 주로 멘토님의 개인적인 생각을 물어보는 편인데, 인상 깊었던 말씀들을 정리해 보았다.
+
+- **개발에는 정답이 없다. 자신만의 논리 구조를 만들어 나가기**
+ - 내가 중요하게 생각하는 기준들이 코드에 드러나야 하고 그것을 남들에게 설명할 수 있어야 한다.
+ - 예를 들어 나는 추상화보다 재사용성과 가독성을 더 중요하게 생각하는데 그 이유는 추상화보다 현실적이고 협업에 도움이 되기 때문이다.
+- **뇌 빼고 개발하지 말자**
+ - 아무 생각 없이 개발하다 보면 자신만의 논리 구조를 세우기 힘들다.
+ - 혼자 개발하더라도 컨벤션을 지키며 코드를 작성해야 한다.
+
+## 마치며
+
+멘토링과 코드 리뷰 같은 기회에서 내가 얻을 수 있는 부분이 무엇일지 고민해 보았다. 그중 가장 큰 도움이 되는 것은 강사님과 멘토님의 개인적인 의견을 들을 수 있다는 점이라고 생각한다. 과제를 진행하다 막히면 스스로 찾아보며 해결할 수 있어야 하지만 이런 기회가 아니면 다른 사람들의 시각을 접하기 어렵기 때문이다.
+
앞으로 기획, 디자인, 개발을 할 때도 나만의 논리 구조를 명확히 세우고 그것을 코드와 설명으로 잘 드러낼 수 있도록 꾸준히 연습해야겠다.
\ No newline at end of file
diff --git a/src/content/posts/etc/Sprint-mission-3.md b/src/content/posts/etc/Sprint-mission-3.md
index ab43976..39afb86 100644
--- a/src/content/posts/etc/Sprint-mission-3.md
+++ b/src/content/posts/etc/Sprint-mission-3.md
@@ -1,25 +1,25 @@
----
-title: 스프린트 미션 - 3
-tags: [etc, 스프린트 부트캠프]
-series: 스프린트 부트캠프
-date: "2025.09.24"
----
-## 스프린트 미션
-
-오늘은 스프린트 미션 3을 진행했다. 블로그에는 따로 적지 않았지만, 미션 1과 미션 2는 스타일 라이브러리 없이 순수 HTML과 CSS로 레이아웃과 디자인을 구현하는 과제였다. 이번 미션은 그 페이지에 `media query`를 적용해 **반응형 디자인**을 만드는 것이었다.
-
-이번에는 내 작업 속도를 확인해 보고 싶어서 목표 시간을 2시간으로 잡고 시작했다. 평소에도 반응형 작업을 해왔던 터라 크게 어렵지 않을 거라 생각했는데, 예상보다 실수도 많았고 속도도 잘 나오지 않아 결국 3시간 정도 걸려 완성할 수 있었다. 앞으로는 작업 속도를 높이기 위해 타자 연습 같은 기본기도 함께 신경 써야겠다는 생각이 들었다.
-
-## 심화 미션
-
-스프린트 미션에는 항상 **기본 미션**과 **심화 미션**이 나뉘어 있는데, 이번 심화 미션은 **SNS 공유 시 미리보기 기능을 제공하기 위해 메타데이터를 추가하는 것**이었다.
-
-이 작업은 예전에 메이플 헬퍼를 만들 때 해봤던 경험이 있어서 어렵지 않게 할 수 있었다. 그런데 또다시 문제가 된 건 디스코드였다. 디스코드에 링크를 공유했을 때 이미지가 제대로 로드되지 않았던 것이다.
-
-처음에는 디렉토리 내부 경로를 그대로 쓰면 될 거라고 단순하게 생각했는데, 디스코드는 `https://`로 접근 가능한 경로여야 했다는 부분이 기억났고 결국 배포한 주소를 이용해 이미지 경로를 수정했고, 테스트 배포 후 미리보기 이미지가 정상적으로 표시되는 것을 확인했다. 덕분에 미션도 무사히 제출할 수 있었다.
-
-## 마치며
-
-처음에는 이미 해봤던 작업이라 만만하게 봤지만, 막상 해보니 실수도 있었고 생각보다 시간이 더 걸렸다. 역시 방심은 금물이라는 걸 다시 느꼈다.
-
+---
+title: 스프린트 미션 - 3
+tags: [etc, 스프린트 부트캠프]
+series: sprint-bootcamp
+date: "2025.09.24"
+---
+## 스프린트 미션
+
+오늘은 스프린트 미션 3을 진행했다. 블로그에는 따로 적지 않았지만, 미션 1과 미션 2는 스타일 라이브러리 없이 순수 HTML과 CSS로 레이아웃과 디자인을 구현하는 과제였다. 이번 미션은 그 페이지에 `media query`를 적용해 **반응형 디자인**을 만드는 것이었다.
+
+이번에는 내 작업 속도를 확인해 보고 싶어서 목표 시간을 2시간으로 잡고 시작했다. 평소에도 반응형 작업을 해왔던 터라 크게 어렵지 않을 거라 생각했는데, 예상보다 실수도 많았고 속도도 잘 나오지 않아 결국 3시간 정도 걸려 완성할 수 있었다. 앞으로는 작업 속도를 높이기 위해 타자 연습 같은 기본기도 함께 신경 써야겠다는 생각이 들었다.
+
+## 심화 미션
+
+스프린트 미션에는 항상 **기본 미션**과 **심화 미션**이 나뉘어 있는데, 이번 심화 미션은 **SNS 공유 시 미리보기 기능을 제공하기 위해 메타데이터를 추가하는 것**이었다.
+
+이 작업은 예전에 메이플 헬퍼를 만들 때 해봤던 경험이 있어서 어렵지 않게 할 수 있었다. 그런데 또다시 문제가 된 건 디스코드였다. 디스코드에 링크를 공유했을 때 이미지가 제대로 로드되지 않았던 것이다.
+
+처음에는 디렉토리 내부 경로를 그대로 쓰면 될 거라고 단순하게 생각했는데, 디스코드는 `https://`로 접근 가능한 경로여야 했다는 부분이 기억났고 결국 배포한 주소를 이용해 이미지 경로를 수정했고, 테스트 배포 후 미리보기 이미지가 정상적으로 표시되는 것을 확인했다. 덕분에 미션도 무사히 제출할 수 있었다.
+
+## 마치며
+
+처음에는 이미 해봤던 작업이라 만만하게 봤지만, 막상 해보니 실수도 있었고 생각보다 시간이 더 걸렸다. 역시 방심은 금물이라는 걸 다시 느꼈다.
+
앞으로도 12번까지 미션이 남아 있는데, 그 과정에서 인상 깊었던 이슈나 배움이 생기면 블로그에 계속 기록해 두려고 한다.
\ No newline at end of file
diff --git a/src/content/posts/etc/ThemProjectChimOne.md b/src/content/posts/etc/ThemProjectChimOne.md
index 96ef758..e64afc2 100644
--- a/src/content/posts/etc/ThemProjectChimOne.md
+++ b/src/content/posts/etc/ThemProjectChimOne.md
@@ -1,24 +1,25 @@
----
-title: 팀프로젝트 기록 - 1
-tags: [etc]
-date: "2023.03.06"
----
-## 시작 계기
-
-그동안 클론코딩을 하면서 기본적인 html, css, js 익혔고 이번에는 팀프로젝트에 참여해서 협업을 하는 경험을 하고 싶었다. 그래서 동아리같이 팀 단위로 개발하는 곳 을 알아보던 와중 왁물원이라는 네이버 카페에서 카페회원들 끼리 자체적으로 카페 내부 서비스를 만들어 보고 싶다는 글이 올라와 얼른 신청을 했다. 왁물원은 우왁굳이라는 스트리머가 운영하는 카페인데 카페 회원들끼리 컨탠츠등을 만들어서 스트리머에게 조공하는 일이 종종 있다. 이러한 일이 자주 생기다보니 따로 "왁물원 인력사무소"라는 게시판이 만들어 질 정도인데 문제는 구인 구직에 대한 양식이 없다보니 내가 원하는 분야의 구인 구직글을 따로 모아 보기힘들 뿐더러 이미 마감이 된 게시글과 구인중인 게시글이 섞여있어 불편함을 느낄 수 있다. 그래서 인력사무소 게시글을 모아서 정렬해주는 사이트를 만들어보자는 내용이였다.
-
-## 첫 회의 2.20(화)
-
- 우선 MVP를 완성한 후 유저의 요청사항이나 반응에 따라 추가로 기능들을 만들어나가기로 했다 MVP: 왁물원 인력사무소 게시글 스크랩/분류 기능 구현, 관리자 페이지(회원 기능 없으므로 url로) 구현 관리자 페이지 내에서 자동으로 분류되지 못한 부분들 추가로 수정 가능하도록 구현 디자인에 대한 레퍼런스는 원티드를 참고하기로 했다. 빠르면 02.21일 오후까지 메인페이지와 구인페이지에 대한 와이어프레임을 우선으로 작성하기로 했다. 크롤링 : 카페의 게시글을 크롤링 해와서 나름의 기준대로 마감여부와 카테고리를 구분해 보여줘야 하는데 카페에 게시글이 등록될 때 마다 크롤링을 하게 되면 횟수 제한에 걸릴 뿐더러 서버에도 부담을 줄 수 있어 특정 시간마다 크롤링이 가능하게 해야한다. 관리자 페이지 : 크롤링한 데이터를 자동으로 카테고리를 분류를 해준후 분류가 되지 않은 데이터를 관리자 페이지에서 수정할 수 있도록 한다. 공고글 : 공고글에 사진이 있는 경우 게시글 내용과 같이 보여줄 수 있는지 확인필요 카테고리 : 카테고리 하위에 태그가 있는 형태로 수평적으로 분류하기로 했다 (원티드 참고) 프론트 회의 : 프론트 회의에서는 어떤 기술을 사용할지에 대해 정했다. react, react-router, styled-components, jest, recoil, axios, react-query를 사용하기로 했다 기능 구현분배에 대해선 디자인이 나온 후에 정하기로 했다.
-
-## 두번째 회의 02.25(토)
-
- 백엔드 : 공고글에 이미지가 있을 경우 URL형태로 이미지를 보여줄 수 있음을 확인했다. 게시글을 태그정보만 분류해 DB에 저장해두고 유저가 요청할 때 마다 보여주기로 했다. 프론트 : 디자인이 나온 후 역활 분담을 다 했고 다음주 회의 까지 클라이언트 페이지를 만들기로 했다. 디자인 : 클라이언트쪽 디자인은 완료됐고 관리자페이지 디자인 예정이다. 내가 할 일 : 디자인이 나온 후 내가 게시글에 대한 상세페이지와 구인페이지를 담당하기로 했다.
-
-## 세번째 회의 03.04(토)
-
- 백엔드 : 네이버에서 데이터를 가져와 태그를 분류해줘야 하는데 모든 데이터를 가져올 때 마다 분류 작업을 하기엔 분류 작업이 오래 걸려 대략 3주간의 데이터만 가져오기로 했다. 프론트 : 클라이언트 페이지는 거의 진행 되었다. 앞으로 관리자 페이지를 진행 할 예정 디자인 : 관리자 페이지 디자인 90%정도 완료, 완료 후 태블릿 버젼 디자인 작업 예정
-
-## 소감
-
-처음 하는 프로젝트라 팀원에게 피해가 갈까 걱정 됐지만 걱정하던 일은 일어나지 않았다. 앞으로 진행 과정을 정리해 올리려 한다.
+---
+title: 팀프로젝트 기록 - 1
+series: chim-planet
+tags: [etc]
+date: "2023.03.06"
+---
+## 시작 계기
+
+그동안 클론코딩을 하면서 기본적인 html, css, js 익혔고 이번에는 팀프로젝트에 참여해서 협업을 하는 경험을 하고 싶었다. 그래서 동아리같이 팀 단위로 개발하는 곳 을 알아보던 와중 왁물원이라는 네이버 카페에서 카페회원들 끼리 자체적으로 카페 내부 서비스를 만들어 보고 싶다는 글이 올라와 얼른 신청을 했다. 왁물원은 우왁굳이라는 스트리머가 운영하는 카페인데 카페 회원들끼리 컨탠츠등을 만들어서 스트리머에게 조공하는 일이 종종 있다. 이러한 일이 자주 생기다보니 따로 "왁물원 인력사무소"라는 게시판이 만들어 질 정도인데 문제는 구인 구직에 대한 양식이 없다보니 내가 원하는 분야의 구인 구직글을 따로 모아 보기힘들 뿐더러 이미 마감이 된 게시글과 구인중인 게시글이 섞여있어 불편함을 느낄 수 있다. 그래서 인력사무소 게시글을 모아서 정렬해주는 사이트를 만들어보자는 내용이였다.
+
+## 첫 회의 2.20(화)
+
+ 우선 MVP를 완성한 후 유저의 요청사항이나 반응에 따라 추가로 기능들을 만들어나가기로 했다 MVP: 왁물원 인력사무소 게시글 스크랩/분류 기능 구현, 관리자 페이지(회원 기능 없으므로 url로) 구현 관리자 페이지 내에서 자동으로 분류되지 못한 부분들 추가로 수정 가능하도록 구현 디자인에 대한 레퍼런스는 원티드를 참고하기로 했다. 빠르면 02.21일 오후까지 메인페이지와 구인페이지에 대한 와이어프레임을 우선으로 작성하기로 했다. 크롤링 : 카페의 게시글을 크롤링 해와서 나름의 기준대로 마감여부와 카테고리를 구분해 보여줘야 하는데 카페에 게시글이 등록될 때 마다 크롤링을 하게 되면 횟수 제한에 걸릴 뿐더러 서버에도 부담을 줄 수 있어 특정 시간마다 크롤링이 가능하게 해야한다. 관리자 페이지 : 크롤링한 데이터를 자동으로 카테고리를 분류를 해준후 분류가 되지 않은 데이터를 관리자 페이지에서 수정할 수 있도록 한다. 공고글 : 공고글에 사진이 있는 경우 게시글 내용과 같이 보여줄 수 있는지 확인필요 카테고리 : 카테고리 하위에 태그가 있는 형태로 수평적으로 분류하기로 했다 (원티드 참고) 프론트 회의 : 프론트 회의에서는 어떤 기술을 사용할지에 대해 정했다. react, react-router, styled-components, jest, recoil, axios, react-query를 사용하기로 했다 기능 구현분배에 대해선 디자인이 나온 후에 정하기로 했다.
+
+## 두번째 회의 02.25(토)
+
+ 백엔드 : 공고글에 이미지가 있을 경우 URL형태로 이미지를 보여줄 수 있음을 확인했다. 게시글을 태그정보만 분류해 DB에 저장해두고 유저가 요청할 때 마다 보여주기로 했다. 프론트 : 디자인이 나온 후 역활 분담을 다 했고 다음주 회의 까지 클라이언트 페이지를 만들기로 했다. 디자인 : 클라이언트쪽 디자인은 완료됐고 관리자페이지 디자인 예정이다. 내가 할 일 : 디자인이 나온 후 내가 게시글에 대한 상세페이지와 구인페이지를 담당하기로 했다.
+
+## 세번째 회의 03.04(토)
+
+ 백엔드 : 네이버에서 데이터를 가져와 태그를 분류해줘야 하는데 모든 데이터를 가져올 때 마다 분류 작업을 하기엔 분류 작업이 오래 걸려 대략 3주간의 데이터만 가져오기로 했다. 프론트 : 클라이언트 페이지는 거의 진행 되었다. 앞으로 관리자 페이지를 진행 할 예정 디자인 : 관리자 페이지 디자인 90%정도 완료, 완료 후 태블릿 버젼 디자인 작업 예정
+
+## 소감
+
+처음 하는 프로젝트라 팀원에게 피해가 갈까 걱정 됐지만 걱정하던 일은 일어나지 않았다. 앞으로 진행 과정을 정리해 올리려 한다.
diff --git a/src/content/posts/etc/ThemProjectChimTwo.md b/src/content/posts/etc/ThemProjectChimTwo.md
index 8279626..82af431 100644
--- a/src/content/posts/etc/ThemProjectChimTwo.md
+++ b/src/content/posts/etc/ThemProjectChimTwo.md
@@ -1,43 +1,44 @@
----
-title: 침플레닛 회고록
-tags: [etc]
-date: "2023.08.25"
----
-## 팀프로젝트 회고록
-
-최근 침플래닛 이라는 팀프로젝트가 성공적으로 마무리 되어 처음으로 회고록을 작성해 보려 한다. 이번 프로젝트를 진행하면서 개인적으로 많은 성장을 이뤄냈다고 생각해 정리해보도록 하겠다.
-
-## 프로젝트 진행과정
-
-내가 프로젝트에 합류 했던 당시 이미 모든 팀원이 구해져 있던 상황이였다 기획 : 1명 백엔드 : 3명 프론트 : 2명 기획 : 1명 일러스트 : 1명 웹 디자이너 : 1명 그래픽 디자이너 : 1명 으로 이루어졌다. 합류한후에 인수인계 겸 회의를 진행 했는데 내 걱정과는 다르게 자유롭고 재미있는 분위기에서 진행되는 회의였다. 다들 아이디어를 말하는데 거리낌 없었고 아이디어가 나오면 기능적으로 무엇이 필요하고 어떤 점이 추가되야 하는지에 대해 이야기했다. 두어번의 기획 회의를 마치고 프로젝트 개발에 들어갔다. 백엔드는 크롤링한 데이터를 어떻게 하면 효율적으로 뷴류하고 저장하는지에 대해 프론트는 웹 디자인이 나오는 대로 빠르게 일정에 맞춰 기능들을 구현하는지에 대해 초점을 맞춰 프로젝트를 진행해 나갔다. 매주 주말마다 모여 서로 있었던 이슈와 진행상황을 보고하는 시간을 가졌고 우선 MVP를 우선으로 배포한 후 추후 유저 반응을 살펴 기능들을 추가하기로 했다.
-
-## 서비스 아키텍쳐
-
-프로젝트의 전체적인 틀은 네이버 팬카페 왁물원의 인력사무소 게시글들을 스크랩해 분류해주는 기능을 제공하고 제대로 분류되지 않은 게시글들은 관리자 페이지에서 추가로 수정해주기로 했다.
-
-
-## 내가 담당한 부분
-
-## 무한 스크롤
-
-분류한 게시들을 보여줄 때 페이지 네이션 VS 무한 스크롤 VS 더보기 버튼 을 고민하다가 모바일 환경 지원을 생각해 무한 스크롤으로 구현하기로 했다. 무한 스크롤을 구현 할 수 있는 여러가지 방법이 있는데 나는 Intersection Observer API 을 선택했다. 그 이유는 스크롤 이벤트를 사용했을 때 이벤트가 실행 될 때 마다 함수가 호출되면 브라우저 성능에 비 효율적이라는 판단이 들었고 다양한 모바일 유저들의 디바이스 성능들을 생각해서 성능저하가 유발될 만한 것을은 빼기로 했다. 그에 비해 Intersection Observer API는 요소가 뷰 포트에 포함이 되는지를 관찰하는데 비동기적으로 실행되며 렌더링 성능이나 이벤트 연속 호출 문제가 나타나지 않다는 장점이 있다. 그러나 생각 한 것 처럼 기능을 구현하는건 쉽지 않았다. 요소를 관측 했을 때 다음 데이터를 가져와야 하는데 자꾸 중복된 데이터가 호출되는 문제가 있었다. 이 부분을 호출한 데이터의 마지막 게시글 Article_Id를 파라미터로 보내줘 다음 데이터를 보내주도록 했다.
-
-## 어드민 페이지
-
-크롤링한 데이터를 분류할 때 잘 못 분류된 경우 수정을 해주어야 하는데 그 때 마다 코드를 수정해 배포를 할 수 는 없어서 어드민 페이지를 만들기로 했다.
-
-침플래닛 서비스에서는 다음과 같이 게시글을 분류해준다 구인 마감 여부와 게시글들을 태그 분류해 원하는 분야의 구인글들만 볼 수 있다. 그러나 구인이 마감 됐으나 구인중이라고 뜬다거나 디자이너를 구인하고 있는데 디자이너 태그가 붙지 않는등 분류가 안된 게시글들이 보이는데 이를 수동으로 분류해주는 것 이다. 처음 이 부분을 담당 했을 때 단순한 CRUD라고 생각해 어렵지 않겠다고 생각을 했지만 생각보다 쉽지 않았다. 이유는 이를 관리해주는건 개발자가 아니라 일반인 관리자였기 때문에 각종 오류와 유지보수가 쉽게 만들어야 했기 때문이다. 예를 들어 구인중 과 구인 마감이 동시에 선택 할 수 없게 하는 것 이였는데 이 부분은 체크 박스를 이용해 하나의 체크 박스를 선택하면 나머지 하나는 체크가 해제되도록 만들었다. 태그를 분류 할 때 최 상단에 카테고리가 있고 그 하위에 각종 디테일한 태그들이 붙는다 예를 들어 개발 이라는 카테고리에 디자이너 라는 태그를 부여할 수 없는 로직을 만드는게 쉽지 않았는데 이 부분은 태그를 추가하면 그 태그를 포함하고 있는 상위 카테고리를 찾아 자동으로 선택 되도록 만들어 오류를 방지할 수 있었다.
-
-왁물원에서 주로 구인하는 직군들을 모아 임의로 카테고리화 해 태그로 분류하는 작업을 가졌다. 하지만 각 분야에 대해 잘 모르다 보니 잘못 분류한 카테고리나 추가하지 못 한 태그에 대한 관리가 필요하다는 의견이 나와 카테고리 추가와 각 카테고리에 태그 추가 및 삭제 기능을 만들었다. 하지만 기능을 다 만들고 나니 카테고리와 태그를 추가하게 되도 서버에서 이를 분류하는 로직이 없으면 껍대기만 있는 기능이라 추가만 해두고 사용하지 않기로 했다.
-
-## 이슈
-
-프로젝트를 진행하면서 가장 많이 나왔던 이슈는 바로 서버비용이였다. 우리는 AWS를 이용해 백엔드와 프론트 서버를 분류해 각각 올렸는데 서비스를 시작하고나서 트레픽이 몰리면 비용을 어떻게 부담해야 하는지에 대해 큰 고민에 빠졌는데 하지만 얼마 안 가 AWS에 메일을 보내 1000크래딧을 받아와 당장 급한 문제는 해결 할 수 있었다. 서버비용에 대한 문제가 해결되고 나니 두번째로 나온 이슈는 서버가 트래픽을 감당할 수 있는가 였다. 그때 당시만 해도 개발을 하다보면 서버가 갑자기 죽어버리는 이슈가 있었다. 그래서 우리는 이 이슈에 대한 원인을 찾다 서버에서 크롤링을 해와 태그정보별로 분류를 할 때 서버에 일시적으로 부하가 걸려 다운되는게 아닌가 라는 결과에 달했는데 이 부분을 안정화를 진행했다 하지만 로직 최적화를 진행 했음에도 자꾸 다운되는 이슈가 있어 살펴보니 CI/CD가 원인였고 CI/CD를 다시 구축해 문제를 해결할 수 있었다.
-
-## 어려웠던 점
-
-프로젝트를 진행하면서 가장 애를 먹었던 부분은 팀원이 작성한 코드를 읽고 이해하는 부분이였다. 다른 사람과의 협업을 해본 경험이 없고 Git을 이용한 Workflow 경험이 없는 나는 문제가 발생 했을 때 적지 않게 당황을 했다 하지만 이 부분은 지속적인 코드리뷰와 커뮤니케이션을 통해 해결 할 수 있었다.(이 부분은 4년간의 직장생활이 도움이 됐다) 팀 프로젝트를 진행하면서 느낀점은 지금 까지 클론 코딩을 해오면서 쌓아온 지식들이 전부 모래로 쌓아 올린 성 같다는 느낌이 들었다. 분명히 들어본적 있고 해본적 있지만 막상 말로는 잘 설명 할 수 없는 순간이 많았고 이 때문에 문제를 해결할 때 문제를 정의하기 어려웠다. 이제 부터는 기존에 습득 했던 지식들을 정리하고 응용해보며 탄탄히 기초부터 쌓아 올리기로 했다. 기초를 잘 다져 놓는 다면 문제를 해결함에 있어 더욱 수월하게 문제를 정의 할 수 있을 것 같다.
-
-## 개선사항
-
-우선 빠른 구현을 위해 JS로 작성했던 코드를 전부 TS로 변경하기로 했다. 이유는 생각보다 유저 반응이 좋았고 계속 유지보수를 위해서 TS로 변경하기로 했다 서버데이터 관리를 위해 react-query를 선택했다 하지만 react-query의 캐싱을 제외한 다른 기능들은 거의 사용하지 않기 때문에 성능 개선을 위해 swr로 변경하기로 했다.
+---
+title: 침플레닛 회고록
+series: chim-planet
+tags: [etc]
+date: "2023.08.25"
+---
+## 팀프로젝트 회고록
+
+최근 침플래닛 이라는 팀프로젝트가 성공적으로 마무리 되어 처음으로 회고록을 작성해 보려 한다. 이번 프로젝트를 진행하면서 개인적으로 많은 성장을 이뤄냈다고 생각해 정리해보도록 하겠다.
+
+## 프로젝트 진행과정
+
+내가 프로젝트에 합류 했던 당시 이미 모든 팀원이 구해져 있던 상황이였다 기획 : 1명 백엔드 : 3명 프론트 : 2명 기획 : 1명 일러스트 : 1명 웹 디자이너 : 1명 그래픽 디자이너 : 1명 으로 이루어졌다. 합류한후에 인수인계 겸 회의를 진행 했는데 내 걱정과는 다르게 자유롭고 재미있는 분위기에서 진행되는 회의였다. 다들 아이디어를 말하는데 거리낌 없었고 아이디어가 나오면 기능적으로 무엇이 필요하고 어떤 점이 추가되야 하는지에 대해 이야기했다. 두어번의 기획 회의를 마치고 프로젝트 개발에 들어갔다. 백엔드는 크롤링한 데이터를 어떻게 하면 효율적으로 뷴류하고 저장하는지에 대해 프론트는 웹 디자인이 나오는 대로 빠르게 일정에 맞춰 기능들을 구현하는지에 대해 초점을 맞춰 프로젝트를 진행해 나갔다. 매주 주말마다 모여 서로 있었던 이슈와 진행상황을 보고하는 시간을 가졌고 우선 MVP를 우선으로 배포한 후 추후 유저 반응을 살펴 기능들을 추가하기로 했다.
+
+## 서비스 아키텍쳐
+
+프로젝트의 전체적인 틀은 네이버 팬카페 왁물원의 인력사무소 게시글들을 스크랩해 분류해주는 기능을 제공하고 제대로 분류되지 않은 게시글들은 관리자 페이지에서 추가로 수정해주기로 했다.
+
+
+## 내가 담당한 부분
+
+## 무한 스크롤
+
+분류한 게시들을 보여줄 때 페이지 네이션 VS 무한 스크롤 VS 더보기 버튼 을 고민하다가 모바일 환경 지원을 생각해 무한 스크롤으로 구현하기로 했다. 무한 스크롤을 구현 할 수 있는 여러가지 방법이 있는데 나는 Intersection Observer API 을 선택했다. 그 이유는 스크롤 이벤트를 사용했을 때 이벤트가 실행 될 때 마다 함수가 호출되면 브라우저 성능에 비 효율적이라는 판단이 들었고 다양한 모바일 유저들의 디바이스 성능들을 생각해서 성능저하가 유발될 만한 것을은 빼기로 했다. 그에 비해 Intersection Observer API는 요소가 뷰 포트에 포함이 되는지를 관찰하는데 비동기적으로 실행되며 렌더링 성능이나 이벤트 연속 호출 문제가 나타나지 않다는 장점이 있다. 그러나 생각 한 것 처럼 기능을 구현하는건 쉽지 않았다. 요소를 관측 했을 때 다음 데이터를 가져와야 하는데 자꾸 중복된 데이터가 호출되는 문제가 있었다. 이 부분을 호출한 데이터의 마지막 게시글 Article_Id를 파라미터로 보내줘 다음 데이터를 보내주도록 했다.
+
+## 어드민 페이지
+
+크롤링한 데이터를 분류할 때 잘 못 분류된 경우 수정을 해주어야 하는데 그 때 마다 코드를 수정해 배포를 할 수 는 없어서 어드민 페이지를 만들기로 했다.
+
+침플래닛 서비스에서는 다음과 같이 게시글을 분류해준다 구인 마감 여부와 게시글들을 태그 분류해 원하는 분야의 구인글들만 볼 수 있다. 그러나 구인이 마감 됐으나 구인중이라고 뜬다거나 디자이너를 구인하고 있는데 디자이너 태그가 붙지 않는등 분류가 안된 게시글들이 보이는데 이를 수동으로 분류해주는 것 이다. 처음 이 부분을 담당 했을 때 단순한 CRUD라고 생각해 어렵지 않겠다고 생각을 했지만 생각보다 쉽지 않았다. 이유는 이를 관리해주는건 개발자가 아니라 일반인 관리자였기 때문에 각종 오류와 유지보수가 쉽게 만들어야 했기 때문이다. 예를 들어 구인중 과 구인 마감이 동시에 선택 할 수 없게 하는 것 이였는데 이 부분은 체크 박스를 이용해 하나의 체크 박스를 선택하면 나머지 하나는 체크가 해제되도록 만들었다. 태그를 분류 할 때 최 상단에 카테고리가 있고 그 하위에 각종 디테일한 태그들이 붙는다 예를 들어 개발 이라는 카테고리에 디자이너 라는 태그를 부여할 수 없는 로직을 만드는게 쉽지 않았는데 이 부분은 태그를 추가하면 그 태그를 포함하고 있는 상위 카테고리를 찾아 자동으로 선택 되도록 만들어 오류를 방지할 수 있었다.
+
+왁물원에서 주로 구인하는 직군들을 모아 임의로 카테고리화 해 태그로 분류하는 작업을 가졌다. 하지만 각 분야에 대해 잘 모르다 보니 잘못 분류한 카테고리나 추가하지 못 한 태그에 대한 관리가 필요하다는 의견이 나와 카테고리 추가와 각 카테고리에 태그 추가 및 삭제 기능을 만들었다. 하지만 기능을 다 만들고 나니 카테고리와 태그를 추가하게 되도 서버에서 이를 분류하는 로직이 없으면 껍대기만 있는 기능이라 추가만 해두고 사용하지 않기로 했다.
+
+## 이슈
+
+프로젝트를 진행하면서 가장 많이 나왔던 이슈는 바로 서버비용이였다. 우리는 AWS를 이용해 백엔드와 프론트 서버를 분류해 각각 올렸는데 서비스를 시작하고나서 트레픽이 몰리면 비용을 어떻게 부담해야 하는지에 대해 큰 고민에 빠졌는데 하지만 얼마 안 가 AWS에 메일을 보내 1000크래딧을 받아와 당장 급한 문제는 해결 할 수 있었다. 서버비용에 대한 문제가 해결되고 나니 두번째로 나온 이슈는 서버가 트래픽을 감당할 수 있는가 였다. 그때 당시만 해도 개발을 하다보면 서버가 갑자기 죽어버리는 이슈가 있었다. 그래서 우리는 이 이슈에 대한 원인을 찾다 서버에서 크롤링을 해와 태그정보별로 분류를 할 때 서버에 일시적으로 부하가 걸려 다운되는게 아닌가 라는 결과에 달했는데 이 부분을 안정화를 진행했다 하지만 로직 최적화를 진행 했음에도 자꾸 다운되는 이슈가 있어 살펴보니 CI/CD가 원인였고 CI/CD를 다시 구축해 문제를 해결할 수 있었다.
+
+## 어려웠던 점
+
+프로젝트를 진행하면서 가장 애를 먹었던 부분은 팀원이 작성한 코드를 읽고 이해하는 부분이였다. 다른 사람과의 협업을 해본 경험이 없고 Git을 이용한 Workflow 경험이 없는 나는 문제가 발생 했을 때 적지 않게 당황을 했다 하지만 이 부분은 지속적인 코드리뷰와 커뮤니케이션을 통해 해결 할 수 있었다.(이 부분은 4년간의 직장생활이 도움이 됐다) 팀 프로젝트를 진행하면서 느낀점은 지금 까지 클론 코딩을 해오면서 쌓아온 지식들이 전부 모래로 쌓아 올린 성 같다는 느낌이 들었다. 분명히 들어본적 있고 해본적 있지만 막상 말로는 잘 설명 할 수 없는 순간이 많았고 이 때문에 문제를 해결할 때 문제를 정의하기 어려웠다. 이제 부터는 기존에 습득 했던 지식들을 정리하고 응용해보며 탄탄히 기초부터 쌓아 올리기로 했다. 기초를 잘 다져 놓는 다면 문제를 해결함에 있어 더욱 수월하게 문제를 정의 할 수 있을 것 같다.
+
+## 개선사항
+
+우선 빠른 구현을 위해 JS로 작성했던 코드를 전부 TS로 변경하기로 했다. 이유는 생각보다 유저 반응이 좋았고 계속 유지보수를 위해서 TS로 변경하기로 했다 서버데이터 관리를 위해 react-query를 선택했다 하지만 react-query의 캐싱을 제외한 다른 기능들은 거의 사용하지 않기 때문에 성능 개선을 위해 swr로 변경하기로 했다.
diff --git a/src/content/posts/etc/YamlFileGrammar.md b/src/content/posts/etc/YamlFileGrammar.md
index 5d7db84..a4525da 100644
--- a/src/content/posts/etc/YamlFileGrammar.md
+++ b/src/content/posts/etc/YamlFileGrammar.md
@@ -1,65 +1,65 @@
----
-title: yaml파일 문법
-tags: [etc]
-date: "2023.04.24"
----
-## yaml이란?
-
-yaml은 YAML ain’t markup language의 약어로 마크업 언어가 아닌 데이터에 특화됨 을 보여주는 말이다. json 파일의 상위 버젼이라고 생각할 수 도 있다. 주석을 달 수 없고 json의 중괄호와 대괄호 남발로 코드길이가 질어지게 된다는 단점을 보안하고자 해서 나온 방식이다. 또한 문법을 보면 Python과 매우 유사함을 알 수 있다.
-
-## 기본 문법
-
-기본적으로 json과 같이 "key: value"와 같이 표기되고 ":" 다음에는 공백 한칸이 필요하다.
-
-```javascript
-
- key: value
-
- name: yaml
- age: 30
-
-
-```
-그리고 int, string, boolean 을 지원한다
-
-```javascript
-
- int: 1
- string: "string"
- boolean: true
-
-
-```
-오브젝트와 배열의 표현 또한 가능하다.
-
-```javascript
-
- #오브젝트
- key:
- key: value
- key: value
-
- # 또는
-
- key: {
- key: value,
- key: value
- }
-
-
- # 배열
- key:
- - item
- - item
-
- # 또는
-
- key: [
- item, item
- ]
-
-
-```
-[https://subicura.com/k8s/prepare/yaml.html](https://subicura.com/k8s/prepare/yaml.html)
-
-[https://subicura.com/k8s/prepare/yaml.html](https://subicura.com/k8s/prepare/yaml.html)
+---
+title: yaml파일 문법
+tags: [etc]
+date: "2023.04.24"
+---
+## yaml이란?
+
+yaml은 YAML ain’t markup language의 약어로 마크업 언어가 아닌 데이터에 특화됨 을 보여주는 말이다. json 파일의 상위 버젼이라고 생각할 수 도 있다. 주석을 달 수 없고 json의 중괄호와 대괄호 남발로 코드길이가 질어지게 된다는 단점을 보안하고자 해서 나온 방식이다. 또한 문법을 보면 Python과 매우 유사함을 알 수 있다.
+
+## 기본 문법
+
+기본적으로 json과 같이 "key: value"와 같이 표기되고 ":" 다음에는 공백 한칸이 필요하다.
+
+```javascript
+
+ key: value
+
+ name: yaml
+ age: 30
+
+
+```
+그리고 int, string, boolean 을 지원한다
+
+```javascript
+
+ int: 1
+ string: "string"
+ boolean: true
+
+
+```
+오브젝트와 배열의 표현 또한 가능하다.
+
+```javascript
+
+ #오브젝트
+ key:
+ key: value
+ key: value
+
+ # 또는
+
+ key: {
+ key: value,
+ key: value
+ }
+
+
+ # 배열
+ key:
+ - item
+ - item
+
+ # 또는
+
+ key: [
+ item, item
+ ]
+
+
+```
+[https://subicura.com/k8s/prepare/yaml.html](https://subicura.com/k8s/prepare/yaml.html)
+
+[https://subicura.com/k8s/prepare/yaml.html](https://subicura.com/k8s/prepare/yaml.html)
diff --git a/src/content/posts/frontEnd/2025-11-16-dependency-standardization.md b/src/content/posts/frontEnd/2025-11-16-dependency-standardization.md
index 800b2e4..71dceb4 100644
--- a/src/content/posts/frontEnd/2025-11-16-dependency-standardization.md
+++ b/src/content/posts/frontEnd/2025-11-16-dependency-standardization.md
@@ -1,6 +1,6 @@
---
title: 팀 프로젝트 디펜던시 표준화로 개발 생산성 올린 방법
-series: 팬덤케이
+series: fandom-k
tags: ["팀프로젝트", "Node.js", "Husky", "lint-staged", "ESLint", "Stylelint"]
date: "2025.11.16"
---
diff --git a/src/content/posts/frontEnd/2025-12-10-maple-helper-localstorage-schema-refactor.md b/src/content/posts/frontEnd/2025-12-10-maple-helper-localstorage-schema-refactor.md
index d6c90d1..babb6e4 100644
--- a/src/content/posts/frontEnd/2025-12-10-maple-helper-localstorage-schema-refactor.md
+++ b/src/content/posts/frontEnd/2025-12-10-maple-helper-localstorage-schema-refactor.md
@@ -1,6 +1,6 @@
---
title: 정규화로 데이터 결합도 낮추기
-series: 메이플 헬퍼
+series: maple-helper
tags: ["localStorage", "schema"]
date: "2025.12.10"
---
diff --git a/src/content/posts/frontEnd/2026-01-01-fix-vscode-ts-intellisense-delay.md b/src/content/posts/frontEnd/2026-01-01-fix-vscode-ts-intellisense-delay.md
index b9616b2..b416873 100644
--- a/src/content/posts/frontEnd/2026-01-01-fix-vscode-ts-intellisense-delay.md
+++ b/src/content/posts/frontEnd/2026-01-01-fix-vscode-ts-intellisense-delay.md
@@ -1,6 +1,6 @@
---
title: VSCode TypeScript 자동완성 지연 현상 해결
-series: 더 줄게
+series: the-julge
tags: ["VSCode", "TypeScript", "IntelliSense", "최적화", "트러블슈팅"]
date: "2026.01.01"
---
diff --git a/src/content/posts/frontEnd/2026-01-07-fix-application-cancel-bug.md b/src/content/posts/frontEnd/2026-01-07-fix-application-cancel-bug.md
index 3af534a..7fc0a72 100644
--- a/src/content/posts/frontEnd/2026-01-07-fix-application-cancel-bug.md
+++ b/src/content/posts/frontEnd/2026-01-07-fix-application-cancel-bug.md
@@ -1,6 +1,6 @@
---
title: 더 줄게 공고 신청 취소 버그 분석 기록
-series: 더 줄게
+series: the-julge
tags: ["트러블슈팅", "버그", "API", "교차검증"]
date: "2026.01.07"
---
diff --git a/src/content/posts/frontEnd/2026-02-02-tailwind-merge-cn-utility.md b/src/content/posts/frontEnd/2026-02-02-tailwind-merge-cn-utility.md
index 30b1a22..1694d70 100644
--- a/src/content/posts/frontEnd/2026-02-02-tailwind-merge-cn-utility.md
+++ b/src/content/posts/frontEnd/2026-02-02-tailwind-merge-cn-utility.md
@@ -1,6 +1,6 @@
---
title: Tailwind CSS 조건부 스타일링과 클래스 충돌 해결 - cn 유틸리티 도입
-series: 글로벌 노마드
+series: global-nomad
tags: ["tailwind-css", "clsx", "tailwind-merge", "utility"]
date: "2026.02.02"
---
diff --git a/src/content/posts/frontEnd/2026-02-18-modal-filter-ux-improvement.md b/src/content/posts/frontEnd/2026-02-18-modal-filter-ux-improvement.md
index cb9a4a2..42ab457 100644
--- a/src/content/posts/frontEnd/2026-02-18-modal-filter-ux-improvement.md
+++ b/src/content/posts/frontEnd/2026-02-18-modal-filter-ux-improvement.md
@@ -1,6 +1,6 @@
---
title: 체험 신청 모달 UI 개선 데이터 종속성에 따른 필터 재배치
-series: 글로벌 노마드
+series: global-nomad
tags: ["UI/UX", "Frontend", "UX 개선", "컴포넌트 설계"]
date: "2026.02.18"
---
diff --git a/src/content/posts/frontEnd/AxoisLearn.md b/src/content/posts/frontEnd/AxoisLearn.md
index 24f678e..c7906d9 100644
--- a/src/content/posts/frontEnd/AxoisLearn.md
+++ b/src/content/posts/frontEnd/AxoisLearn.md
@@ -1,145 +1,145 @@
----
-title: Axios를 배워보자
-tags: [frontEnd]
-date: "2023.02.21"
----
-## Axios란?
-
-Axios는 Promiss기반 HTTP 클라이언트이다. 간단하게 백엔드랑 통신을 쉽게 해주는 라이브러리이다. 특징으로는 HTTP요청과 응답을 JSON형태로 할 수 있다는 점이다.
-
-## 사용방법
-
-axios로 백엔드와 통신을 할 때는 get(조회), post(등록및 전송), put(수정), delete(삭제) 이렇게 4가지의 HTTP 메서드를 이용하여 통신할 수 있다.
-
-```javascript
-
- //GET
- axios.get(url, [config])
-
- //POST
- axios.post(url[, data[, config]])
-
- //PUT
- axios.put(url[, data[, config]])
-
- //DELETE
- axios.delete(url[, config])
-
-
-```
-## 응답 데이터
-
-```javascript
-
- axios.get('/user/12345')
- .then(function (response) {
- console.log(response.data); // data는 서버가 제공하는 응답이다.
- console.log(response.status); // status는 HTTP 상태 코드이다.
- console.log(response.statusText); // statusText는 HTTP 상태 메시지이다.
- console.log(response.headers); // // headers 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공한다
- console.log(response.config); config는 요청을 위해 Axios가 제공하는 구성이다.
- });
-
-
-```
-## axios GET
-
-get 메서드를 사용하는 상황은 이러하다. 단순한 데이터(게시글 목록, 사용자 목록), 파라미터 데이터를 포함시키는 경우
-
-```javascript
-
- // user에게 할당된 id 값과 함께 요청을 합니다.
- axios.get('/user?ID=12345')
- .then(function (response) {
- // 성공했을 때
- })
- .catch(function (error) {
- // 에러가 났을 때
- })
- .finally(function () {
- // 항상 실행되는 함수
- });
-
- // 위와는 같지만, 옵션을 주고자 할 때는 이렇게 요청을 합니다.
- axios.get('/user', {
- params: {
- ID: 12345
- }
- })
- .then(function (response) {
- // 성공했을 때
- })
- .catch(function (error) {
- // 에러가 났을 때
- })
- .finally(function () {
- // 항상 실행되는 함수
- });
-
- // async/await 를 쓰고 싶다면 async 함수/메소드를 만듭니다.
- async function getUser() {
- try {
- const response = await axios.get('/user?ID=12345');
- console.log(response);
- } catch (error) {
- console.error(error);
- }
- }
-
-
-```
-## axios POST
-
-새로운 리소스를 생성하여 서버에 제출할 때 사용된다. 회원가입, 게시글 작성 등의 작업에서 사용할 수 있다.
-
-```javascript
-
- axios.post("url", {
- firstName: 'Fred',
- lastName: 'Flintstone'
- })
- .then(function (response) {
- // response
- }).catch(function (error) {
- // 오류발생시 실행
- })
-
-
-```
-## axios DELETE
-
-서버에서 리소스를 삭제할 때 사용한다. 게시글 삭제, 사용자 삭제 등의 작업에서 사용할 수 있다
-
-```javascript
-
- axios.delete('/user?ID=12345')
- .then(function (response) {
- // handle success
- })
- .catch(function (error) {
- // handle error
- })
-
-
-```
-## axios PUT
-
-서버에서 리소스를 업데이트 또는 교체할 떄 사용한다. 게시글 수정, 사용자 정보 업데이트 등의 작업에서 사용된다.
-
-```javascript
-
- axios.put("url", {
- username: "",
- password: ""
- })
- .then(function (response) {
- // response
- }).catch(function (error) {
- // 오류발생시 실행
- })
-
-
-```
-[https://axios-http.com/](https://axios-http.com/)
-
-[https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9](https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9)
+---
+title: Axios를 배워보자
+tags: [frontEnd]
+date: "2023.02.21"
+---
+## Axios란?
+
+Axios는 Promiss기반 HTTP 클라이언트이다. 간단하게 백엔드랑 통신을 쉽게 해주는 라이브러리이다. 특징으로는 HTTP요청과 응답을 JSON형태로 할 수 있다는 점이다.
+
+## 사용방법
+
+axios로 백엔드와 통신을 할 때는 get(조회), post(등록및 전송), put(수정), delete(삭제) 이렇게 4가지의 HTTP 메서드를 이용하여 통신할 수 있다.
+
+```javascript
+
+ //GET
+ axios.get(url, [config])
+
+ //POST
+ axios.post(url[, data[, config]])
+
+ //PUT
+ axios.put(url[, data[, config]])
+
+ //DELETE
+ axios.delete(url[, config])
+
+
+```
+## 응답 데이터
+
+```javascript
+
+ axios.get('/user/12345')
+ .then(function (response) {
+ console.log(response.data); // data는 서버가 제공하는 응답이다.
+ console.log(response.status); // status는 HTTP 상태 코드이다.
+ console.log(response.statusText); // statusText는 HTTP 상태 메시지이다.
+ console.log(response.headers); // // headers 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공한다
+ console.log(response.config); config는 요청을 위해 Axios가 제공하는 구성이다.
+ });
+
+
+```
+## axios GET
+
+get 메서드를 사용하는 상황은 이러하다. 단순한 데이터(게시글 목록, 사용자 목록), 파라미터 데이터를 포함시키는 경우
+
+```javascript
+
+ // user에게 할당된 id 값과 함께 요청을 합니다.
+ axios.get('/user?ID=12345')
+ .then(function (response) {
+ // 성공했을 때
+ })
+ .catch(function (error) {
+ // 에러가 났을 때
+ })
+ .finally(function () {
+ // 항상 실행되는 함수
+ });
+
+ // 위와는 같지만, 옵션을 주고자 할 때는 이렇게 요청을 합니다.
+ axios.get('/user', {
+ params: {
+ ID: 12345
+ }
+ })
+ .then(function (response) {
+ // 성공했을 때
+ })
+ .catch(function (error) {
+ // 에러가 났을 때
+ })
+ .finally(function () {
+ // 항상 실행되는 함수
+ });
+
+ // async/await 를 쓰고 싶다면 async 함수/메소드를 만듭니다.
+ async function getUser() {
+ try {
+ const response = await axios.get('/user?ID=12345');
+ console.log(response);
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+
+```
+## axios POST
+
+새로운 리소스를 생성하여 서버에 제출할 때 사용된다. 회원가입, 게시글 작성 등의 작업에서 사용할 수 있다.
+
+```javascript
+
+ axios.post("url", {
+ firstName: 'Fred',
+ lastName: 'Flintstone'
+ })
+ .then(function (response) {
+ // response
+ }).catch(function (error) {
+ // 오류발생시 실행
+ })
+
+
+```
+## axios DELETE
+
+서버에서 리소스를 삭제할 때 사용한다. 게시글 삭제, 사용자 삭제 등의 작업에서 사용할 수 있다
+
+```javascript
+
+ axios.delete('/user?ID=12345')
+ .then(function (response) {
+ // handle success
+ })
+ .catch(function (error) {
+ // handle error
+ })
+
+
+```
+## axios PUT
+
+서버에서 리소스를 업데이트 또는 교체할 떄 사용한다. 게시글 수정, 사용자 정보 업데이트 등의 작업에서 사용된다.
+
+```javascript
+
+ axios.put("url", {
+ username: "",
+ password: ""
+ })
+ .then(function (response) {
+ // response
+ }).catch(function (error) {
+ // 오류발생시 실행
+ })
+
+
+```
+[https://axios-http.com/](https://axios-http.com/)
+
+[https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9](https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9)
diff --git a/src/content/posts/frontEnd/CiCdLearn.md b/src/content/posts/frontEnd/CiCdLearn.md
index 0be0add..e3f310d 100644
--- a/src/content/posts/frontEnd/CiCdLearn.md
+++ b/src/content/posts/frontEnd/CiCdLearn.md
@@ -1,26 +1,26 @@
----
-title: ci/cd에 대해 알아보자
-tags: [frontEnd]
-date: "2023.03.16"
----
-## ci/cd에 대해 알아보자
-
-ci/cd는 지속적인 통합, 지속적인 배포라는 뜻을 가지고 있다. 그럼 왜 지속적인 통합과 배포가 필요한가라고 하면 서비스를 배포할 때 마다. 개발자들이 직접 수정, 빌드, 테스트, 배포를 하게 된다면 상당히 많은 시간이 소요된다. 이때 ci/cd를 맞게 작성한다면 빌드, 테스트, 배포를 하는 시간을 크게 줄일 수 있어 일의 효율성이 올라간다.
-
-## ci란?
-
-ci(Continuous Integration)는 지속적 통합이라는 뜻을 가지고 있다. 지속적 통합이라는 뜻은 새로운 코드 변경과 정기적으로 빌드, 테스트 및 공유 저장소에 병합됨을 의미한다. 여러명의 개발자가 동시에 어플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있습니다.
-
-## cd란?
-
-cd(Continuous Delivery 또는 Continuous Depolyment)는 지속적은 배포라는 뜻을 가지고 있습니다. 지속적인 배포라는 뜻은 빌드, 테스트 및 배포 단계의 자동화를 뜻하는데 지속적인 배포를 채택하면 품질 저하 없이 최대한 빨리 사용자에게 새로운 기능을 제공할 수 있습니다.
-
-## ci/cd의 종류
-
-Github Actions Jenkins 등이 있다.
-
-[https://www.redhat.com/en/topics/devops/what-is-ci-cd?cicd=32h281b](https://www.redhat.com/en/topics/devops/what-is-ci-cd?cicd=32h281b)
-
-[https://seosh817.tistory.com/104](https://seosh817.tistory.com/104)
-
-[https://artist-developer.tistory.com/24](https://artist-developer.tistory.com/24)
+---
+title: ci/cd에 대해 알아보자
+tags: [frontEnd]
+date: "2023.03.16"
+---
+## ci/cd에 대해 알아보자
+
+ci/cd는 지속적인 통합, 지속적인 배포라는 뜻을 가지고 있다. 그럼 왜 지속적인 통합과 배포가 필요한가라고 하면 서비스를 배포할 때 마다. 개발자들이 직접 수정, 빌드, 테스트, 배포를 하게 된다면 상당히 많은 시간이 소요된다. 이때 ci/cd를 맞게 작성한다면 빌드, 테스트, 배포를 하는 시간을 크게 줄일 수 있어 일의 효율성이 올라간다.
+
+## ci란?
+
+ci(Continuous Integration)는 지속적 통합이라는 뜻을 가지고 있다. 지속적 통합이라는 뜻은 새로운 코드 변경과 정기적으로 빌드, 테스트 및 공유 저장소에 병합됨을 의미한다. 여러명의 개발자가 동시에 어플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있습니다.
+
+## cd란?
+
+cd(Continuous Delivery 또는 Continuous Depolyment)는 지속적은 배포라는 뜻을 가지고 있습니다. 지속적인 배포라는 뜻은 빌드, 테스트 및 배포 단계의 자동화를 뜻하는데 지속적인 배포를 채택하면 품질 저하 없이 최대한 빨리 사용자에게 새로운 기능을 제공할 수 있습니다.
+
+## ci/cd의 종류
+
+Github Actions Jenkins 등이 있다.
+
+[https://www.redhat.com/en/topics/devops/what-is-ci-cd?cicd=32h281b](https://www.redhat.com/en/topics/devops/what-is-ci-cd?cicd=32h281b)
+
+[https://seosh817.tistory.com/104](https://seosh817.tistory.com/104)
+
+[https://artist-developer.tistory.com/24](https://artist-developer.tistory.com/24)
diff --git a/src/content/posts/frontEnd/ClipBoardCopy.md b/src/content/posts/frontEnd/ClipBoardCopy.md
index 7a02cc6..ac00617 100644
--- a/src/content/posts/frontEnd/ClipBoardCopy.md
+++ b/src/content/posts/frontEnd/ClipBoardCopy.md
@@ -1,36 +1,36 @@
----
-title: 클립보드를 이용하여 텍스트를 복사하기
-tags: [frontEnd]
-date: "2023.02.01"
----
-텍스트를 복사하는 기능을 만들고 싶을 때 클립보드 기능을 이용하면 쉽게 만들 수 있다
-
-```javascript
-
- const handleCopyClipBoard = async (text) => {
- navigator.clipboard.writeText()
- };
-
-
-```
-이렇게 클립보드API를 이용하면 간단하게 클립보드를 이용한 복사기능을 만들 수 있다. 이때 주의사항이 있는데 클립보드에 엑세스 하면 암호나 신용카드 번호와 같이 중요한 정보에 엑세스 할 수 있는 문제가 생긴다 이와 같은 이유 때문에 http가 없는 임시 서버에서 실험을 할 경우 동작하지 않을 수 있다.
-
-[https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API](https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API)
-
-클립보드를 사용 할 수 없는 상황이라면 document.execCommand 기능을 이용하면 된다.
-
-```javascript
-
- const handleCopyClipBoard = (text) => {
- const input = document.createElement('input');
- input.value = text;
- document.body.appendChild(input);
- input.select();
- document.execCommand('copy');
- document.body.removeChild(input);
- alert('링크가 복사되었습니다.');
- };
-
-
-```
-[https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)
+---
+title: 클립보드를 이용하여 텍스트를 복사하기
+tags: [frontEnd]
+date: "2023.02.01"
+---
+텍스트를 복사하는 기능을 만들고 싶을 때 클립보드 기능을 이용하면 쉽게 만들 수 있다
+
+```javascript
+
+ const handleCopyClipBoard = async (text) => {
+ navigator.clipboard.writeText()
+ };
+
+
+```
+이렇게 클립보드API를 이용하면 간단하게 클립보드를 이용한 복사기능을 만들 수 있다. 이때 주의사항이 있는데 클립보드에 엑세스 하면 암호나 신용카드 번호와 같이 중요한 정보에 엑세스 할 수 있는 문제가 생긴다 이와 같은 이유 때문에 http가 없는 임시 서버에서 실험을 할 경우 동작하지 않을 수 있다.
+
+[https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API](https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API)
+
+클립보드를 사용 할 수 없는 상황이라면 document.execCommand 기능을 이용하면 된다.
+
+```javascript
+
+ const handleCopyClipBoard = (text) => {
+ const input = document.createElement('input');
+ input.value = text;
+ document.body.appendChild(input);
+ input.select();
+ document.execCommand('copy');
+ document.body.removeChild(input);
+ alert('링크가 복사되었습니다.');
+ };
+
+
+```
+[https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)
diff --git a/src/content/posts/frontEnd/Code-highlighting-with-highlight.md b/src/content/posts/frontEnd/Code-highlighting-with-highlight.md
index 0a83467..30f23d7 100644
--- a/src/content/posts/frontEnd/Code-highlighting-with-highlight.md
+++ b/src/content/posts/frontEnd/Code-highlighting-with-highlight.md
@@ -1,90 +1,91 @@
----
-title: 코드 하이라이팅 highlight.js 적용하기
-tags: [frontEnd]
-date: "2024.12.01"
----
-블로그 글을 작성하다 보면 코드 블록을 사용할 때가 있는데 코드 하이라이팅이 되는
-이미지를 사용하면 복사를 할 수 없고 `` 태그를 이용하면 코드 가독성이 떨어
-진다는 단점이 있습니다.
-하지만 이 부분을 해결해주는 라이브러리인 `highlight.js`를 소개하려 합니다.
-
-## 코드 하이라이팅 라이브러리
-코드 하이라이팅을 제공하는 라이브러리는 `highlight.js`뿐 아니라 `prism`도 동일하게 하이라이팅 기능을 제공합니다.
-
-`highlight.js`의 특징으로는 다양한 테마와 언어를 지원하고 컴포넌트 형태로 하이라이팅을 제공할 수 있습니다.
-
-`prism`의 특징은 번들 크기가 최적화 되어 있고 컴포넌트 기반 API로 React와 잘 어울린다는 장점이 있습니다.
-
-저는 react를 사용하는 블로그지만 다양한 테마를 제공해주고 사용하기에 간편한 `highlight.js`를 선택했습니다.
-
-## highlight.js 사용 방법
-
-### highlight.js 설치
-```bash
-npm install highlight.js
-```
-
-### 스타일 적용
-`hljs.registerLanguage`를 이용하면 특정 언어만 하이라이팅 할 수 있습니다.
-```js
-import hljs from 'highlight.js';
-import javascript from 'highlight.js/lib/languages/javascript';
-
-hljs.registerLanguage('javascript', javascript);
-export default hljs;
-```
-
-`hljs.highlightAll()`를 이용해 컴포넌트로 만들 수 있습니다
-```js
-import { useEffect } from 'react';
-import hljs from 'highlight.js';
-
-const CodeBlock = ({ code }) => {
- useEffect(() => {
- hljs.highlightAll();
- }, []);
-
- return (
-
- {code}
-
- );
-};
-```
-
-
-
-### 테마 적용
-highlight.js에서 제공하는 다양한 테마는 [여기](https://highlightjs.org/demo)에서 미리 확인할 수 있습니다.
-
-```js
-import "highlight.js/styles/a11y-dark.css";
-```
-
-### 커스텀 스타일 적용
-css파일을 생성해 스타일링을 커스텀할 수 있습니다.
-```css
-/* 커스텀 테마 예시 */
-.hljs {
- background: #1a1a1a;
- color: #f8f8f2;
- border-radius: 8px;
- padding: 1.5rem !important;
-}
-
-.hljs-keyword {
- color: #ff79c6;
- font-weight: 600;
-}
-
-.hljs-string {
- color: #50fa7b;
-}
-
-.hljs-title {
- color: #8be9fd;
-}
-```
-
-### 공식문서
-https://github.com/highlightjs/highlight.js#getting-started
+---
+title: 코드 하이라이팅 highlight.js 적용하기
+series: blog
+tags: [frontEnd]
+date: "2024.12.01"
+---
+블로그 글을 작성하다 보면 코드 블록을 사용할 때가 있는데 코드 하이라이팅이 되는
+이미지를 사용하면 복사를 할 수 없고 `` 태그를 이용하면 코드 가독성이 떨어
+진다는 단점이 있습니다.
+하지만 이 부분을 해결해주는 라이브러리인 `highlight.js`를 소개하려 합니다.
+
+## 코드 하이라이팅 라이브러리
+코드 하이라이팅을 제공하는 라이브러리는 `highlight.js`뿐 아니라 `prism`도 동일하게 하이라이팅 기능을 제공합니다.
+
+`highlight.js`의 특징으로는 다양한 테마와 언어를 지원하고 컴포넌트 형태로 하이라이팅을 제공할 수 있습니다.
+
+`prism`의 특징은 번들 크기가 최적화 되어 있고 컴포넌트 기반 API로 React와 잘 어울린다는 장점이 있습니다.
+
+저는 react를 사용하는 블로그지만 다양한 테마를 제공해주고 사용하기에 간편한 `highlight.js`를 선택했습니다.
+
+## highlight.js 사용 방법
+
+### highlight.js 설치
+```bash
+npm install highlight.js
+```
+
+### 스타일 적용
+`hljs.registerLanguage`를 이용하면 특정 언어만 하이라이팅 할 수 있습니다.
+```js
+import hljs from 'highlight.js';
+import javascript from 'highlight.js/lib/languages/javascript';
+
+hljs.registerLanguage('javascript', javascript);
+export default hljs;
+```
+
+`hljs.highlightAll()`를 이용해 컴포넌트로 만들 수 있습니다
+```js
+import { useEffect } from 'react';
+import hljs from 'highlight.js';
+
+const CodeBlock = ({ code }) => {
+ useEffect(() => {
+ hljs.highlightAll();
+ }, []);
+
+ return (
+
+ {code}
+
+ );
+};
+```
+
+
+
+### 테마 적용
+highlight.js에서 제공하는 다양한 테마는 [여기](https://highlightjs.org/demo)에서 미리 확인할 수 있습니다.
+
+```js
+import "highlight.js/styles/a11y-dark.css";
+```
+
+### 커스텀 스타일 적용
+css파일을 생성해 스타일링을 커스텀할 수 있습니다.
+```css
+/* 커스텀 테마 예시 */
+.hljs {
+ background: #1a1a1a;
+ color: #f8f8f2;
+ border-radius: 8px;
+ padding: 1.5rem !important;
+}
+
+.hljs-keyword {
+ color: #ff79c6;
+ font-weight: 600;
+}
+
+.hljs-string {
+ color: #50fa7b;
+}
+
+.hljs-title {
+ color: #8be9fd;
+}
+```
+
+### 공식문서
+https://github.com/highlightjs/highlight.js#getting-started
diff --git a/src/content/posts/frontEnd/CodePrettier.md b/src/content/posts/frontEnd/CodePrettier.md
index f12859e..245f201 100644
--- a/src/content/posts/frontEnd/CodePrettier.md
+++ b/src/content/posts/frontEnd/CodePrettier.md
@@ -1,46 +1,46 @@
----
-title: 코드 포멧팅 prettier
-tags: [frontEnd]
-date: "2023.07.27"
----
-## 코드 포멧터 Prettier
-
-여러 사람들과 개발을 하게되면 각자 개발 습관에 따라 세미콜론(;), 줄간격, 행 등이 각각이 달라 코드가 뒤죽박죽이 되는 상황이 생기게 됩니다. 이때 Prettier를 사용하게 되면 정해진 규칙에 따라 모맷팅 해주기 때문에 수고 없이 코드를 짜기만 하면 됩니다.
-
-## 사용방법
-
-```javascript
-
- yarn add prettier
-
- npm i prettier
-
-
-```
-설치가 끝났다면 .prettierrc.json 파일을 만들어 관리해줄 수 있다.
-
-```javascript
-
- {
- "tabWidth": 2, // 탭 간격
- "useTabs": false, // 탭 대신 스페이스를 사용여부
- "singleQuote": false, // 작은따옴표(')를 사용할지 큰 따옴표를 사용할지(") true일시 (')
- "semi": true, // 세미콜론 사용여부
- "jsxSingleQuote": true, // JSX에서 작은 따옴표를 사용여부
- "trailingComma": "es5", // 객체나 배열의 마지막 요소에 쉼표를 붙일지 여부
- "printWidth": 100 // 한 줄의 최대길이를 지정한다.
- }
-
-
-```
-package.json파일 scripts에 prettier --write . 를 추가해주면 간단한 명령어를 실행할 때 마다 코드 포맷팅이 실행된다.
-
-설정에서 Default Formatter 를 검색해주고 Default Formatter 부분에 Prettier - Code Fromatter 를 지정해주고 Settings에서 Text Editor를 클릭한 후 Formatting를 다시 클릭해준다
-
-Format On Paste : 사용자가 코드를 붙여넣기 했을 때, 자동으로 코드를 정렬 Format On Save : 사용자가 코드를 저장 했을 때, 자동으로 코드를 정렬 Format On Type : 사용자가 코드를 입력할 때, 자동으로 코드를 정렬
-
-설정하면 명령어를 실행하지 않아도 자동으로 포맷팅이 된다.
-
-[https://github.com/prettier/prettier-vscode](https://github.com/prettier/prettier-vscode)
-
-[https://ux.stories.pe.kr/150](https://ux.stories.pe.kr/150)
+---
+title: 코드 포멧팅 prettier
+tags: [frontEnd]
+date: "2023.07.27"
+---
+## 코드 포멧터 Prettier
+
+여러 사람들과 개발을 하게되면 각자 개발 습관에 따라 세미콜론(;), 줄간격, 행 등이 각각이 달라 코드가 뒤죽박죽이 되는 상황이 생기게 됩니다. 이때 Prettier를 사용하게 되면 정해진 규칙에 따라 모맷팅 해주기 때문에 수고 없이 코드를 짜기만 하면 됩니다.
+
+## 사용방법
+
+```javascript
+
+ yarn add prettier
+
+ npm i prettier
+
+
+```
+설치가 끝났다면 .prettierrc.json 파일을 만들어 관리해줄 수 있다.
+
+```javascript
+
+ {
+ "tabWidth": 2, // 탭 간격
+ "useTabs": false, // 탭 대신 스페이스를 사용여부
+ "singleQuote": false, // 작은따옴표(')를 사용할지 큰 따옴표를 사용할지(") true일시 (')
+ "semi": true, // 세미콜론 사용여부
+ "jsxSingleQuote": true, // JSX에서 작은 따옴표를 사용여부
+ "trailingComma": "es5", // 객체나 배열의 마지막 요소에 쉼표를 붙일지 여부
+ "printWidth": 100 // 한 줄의 최대길이를 지정한다.
+ }
+
+
+```
+package.json파일 scripts에 prettier --write . 를 추가해주면 간단한 명령어를 실행할 때 마다 코드 포맷팅이 실행된다.
+
+설정에서 Default Formatter 를 검색해주고 Default Formatter 부분에 Prettier - Code Fromatter 를 지정해주고 Settings에서 Text Editor를 클릭한 후 Formatting를 다시 클릭해준다
+
+Format On Paste : 사용자가 코드를 붙여넣기 했을 때, 자동으로 코드를 정렬 Format On Save : 사용자가 코드를 저장 했을 때, 자동으로 코드를 정렬 Format On Type : 사용자가 코드를 입력할 때, 자동으로 코드를 정렬
+
+설정하면 명령어를 실행하지 않아도 자동으로 포맷팅이 된다.
+
+[https://github.com/prettier/prettier-vscode](https://github.com/prettier/prettier-vscode)
+
+[https://ux.stories.pe.kr/150](https://ux.stories.pe.kr/150)
diff --git a/src/content/posts/frontEnd/ErrEdgesOut.md b/src/content/posts/frontEnd/ErrEdgesOut.md
index ee2424a..d3543d7 100644
--- a/src/content/posts/frontEnd/ErrEdgesOut.md
+++ b/src/content/posts/frontEnd/ErrEdgesOut.md
@@ -1,16 +1,16 @@
----
-title: npm ERR! Cannot read properties of null (reading 'edgesOut')
-tags: [frontEnd]
-date: "2023.07.13"
----
-최근 배포를 하던 와중에 npm ERR! Cannot properties of null (reading) 이런 에러가 발생했다.
-
-## 문제는?
-
-최신버젼의 styled-components에서 npm i styled-components를 수행하는 동안 생기는 문제였다.
-
-## 해결방법
-
-V5 사용, npm install styled-components@5.3.10 원사 사용, yarn install styled-components 베타 버전을 사용하려면,npm install styled-components@latest 나의 경우에는 npm install styled-components@latest 를 사용해 해결했다.
-
-[https://stackoverflow.com/questions/70810819/npm-err-cannot-read-properties-of-null-reading-edgesout](https://stackoverflow.com/questions/70810819/npm-err-cannot-read-properties-of-null-reading-edgesout)
+---
+title: npm ERR! Cannot read properties of null (reading 'edgesOut')
+tags: [frontEnd]
+date: "2023.07.13"
+---
+최근 배포를 하던 와중에 npm ERR! Cannot properties of null (reading) 이런 에러가 발생했다.
+
+## 문제는?
+
+최신버젼의 styled-components에서 npm i styled-components를 수행하는 동안 생기는 문제였다.
+
+## 해결방법
+
+V5 사용, npm install styled-components@5.3.10 원사 사용, yarn install styled-components 베타 버전을 사용하려면,npm install styled-components@latest 나의 경우에는 npm install styled-components@latest 를 사용해 해결했다.
+
+[https://stackoverflow.com/questions/70810819/npm-err-cannot-read-properties-of-null-reading-edgesout](https://stackoverflow.com/questions/70810819/npm-err-cannot-read-properties-of-null-reading-edgesout)
diff --git a/src/content/posts/frontEnd/Fixing-Duplicate-Highlighting-Issue.md b/src/content/posts/frontEnd/Fixing-Duplicate-Highlighting-Issue.md
index 80b54fa..ca11006 100644
--- a/src/content/posts/frontEnd/Fixing-Duplicate-Highlighting-Issue.md
+++ b/src/content/posts/frontEnd/Fixing-Duplicate-Highlighting-Issue.md
@@ -1,49 +1,49 @@
----
-title: Element previously highlighted
-tags: [frontEnd]
-date: "2025.02.01"
----
-이번에 블로그를 Next.js로 마이그레이션 하면서 코드 하이라이팅에 문제가 생겼습니다.
-
-## 문제 해결
-코드 하이라이팅이 중복으로 적용돼 에러 메세지가 출력됬고 코드가 변경될 때 마다 이전의 하이라이팅을 제거하고 다시 하이라이팅을 적용해주어야 합니다.
-
-하지만 저는 `react-highlight`를 이용해 간단하게 해결 했습니다.
-
-`react-highlight`는 React 방식으로 래핑한 라이브러리로 리셋하고 다시 하이라이팅하는 처리를 하지 않아도 됩니다.
-
-## 기능 추가
-문제를 해결한 김에 코드블록에 복사할 수 있는 버튼을 추가하고 싶어졌고 이렇게 애니메이션 까지 적용해
-기능을 개선 했습니다.
-```js
-useEffect(() => {
- const codeBlocks = document.querySelectorAll("pre");
- codeBlocks.forEach((block) => {
- if (block.querySelector(".copy-button")) return;
-
- const button = document.createElement("button");
- button.innerHTML = CopySvg;
- button.className = "copy-button"; // CSS 클래스 이름 추가
-
- // 복사 이벤트 핸들러
- button.addEventListener("click", () => {
- const code = block.querySelector("code")?.textContent || "";
- navigator.clipboard.writeText(code).then(() => {
- button.innerHTML = CheckSvg;
- button.classList.add("check-button"); // check-button 클래스 추가
- button.classList.remove("copy-button");
-
- // 2초 후에 check-button 클래스를 제거
- setTimeout(() => {
- button.innerHTML = CopySvg;
- button.classList.remove("check-button");
- button.classList.add("copy-button");
- }, 2000);
- });
- });
-
- block.style.position = "relative";
- block.appendChild(button);
- });
-}, [contentHtml]);
+---
+title: Element previously highlighted
+tags: [frontEnd]
+date: "2025.02.01"
+---
+이번에 블로그를 Next.js로 마이그레이션 하면서 코드 하이라이팅에 문제가 생겼습니다.
+
+## 문제 해결
+코드 하이라이팅이 중복으로 적용돼 에러 메세지가 출력됬고 코드가 변경될 때 마다 이전의 하이라이팅을 제거하고 다시 하이라이팅을 적용해주어야 합니다.
+
+하지만 저는 `react-highlight`를 이용해 간단하게 해결 했습니다.
+
+`react-highlight`는 React 방식으로 래핑한 라이브러리로 리셋하고 다시 하이라이팅하는 처리를 하지 않아도 됩니다.
+
+## 기능 추가
+문제를 해결한 김에 코드블록에 복사할 수 있는 버튼을 추가하고 싶어졌고 이렇게 애니메이션 까지 적용해
+기능을 개선 했습니다.
+```js
+useEffect(() => {
+ const codeBlocks = document.querySelectorAll("pre");
+ codeBlocks.forEach((block) => {
+ if (block.querySelector(".copy-button")) return;
+
+ const button = document.createElement("button");
+ button.innerHTML = CopySvg;
+ button.className = "copy-button"; // CSS 클래스 이름 추가
+
+ // 복사 이벤트 핸들러
+ button.addEventListener("click", () => {
+ const code = block.querySelector("code")?.textContent || "";
+ navigator.clipboard.writeText(code).then(() => {
+ button.innerHTML = CheckSvg;
+ button.classList.add("check-button"); // check-button 클래스 추가
+ button.classList.remove("copy-button");
+
+ // 2초 후에 check-button 클래스를 제거
+ setTimeout(() => {
+ button.innerHTML = CopySvg;
+ button.classList.remove("check-button");
+ button.classList.add("copy-button");
+ }, 2000);
+ });
+ });
+
+ block.style.position = "relative";
+ block.appendChild(button);
+ });
+}, [contentHtml]);
```
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/FontOptimization.md b/src/content/posts/frontEnd/FontOptimization.md
index bc38706..c0d2d46 100644
--- a/src/content/posts/frontEnd/FontOptimization.md
+++ b/src/content/posts/frontEnd/FontOptimization.md
@@ -1,53 +1,53 @@
----
-title: 웹폰트 최적화
-tags: [frontEnd]
-date: "2024.03.06"
----
-## 웹 폰트가 동작하는 방법
-
-우선 최적화를 진행하기 전에 웹 폰트가 어떻게 동작하는지 알아보도록 하겠다. 아래의 사진은 브라우저가 렌더링 하는 과정이다.
-
-
-[https://web.dev/articles/optimize-webfont-loading?hl=ko](https://web.dev/articles/optimize-webfont-loading?hl=ko)
-
-1. 브라우저가 HTML 문서을 요청한다. 2. 브라우저가 HTML 응답을 파싱하고 DOM을 구성하기 시작한다. 3. 브라우저가 CSS, JS 및 기타 리소스를 발견하고 요청을 전달한다. 4. 브라우저는 모든 CSS 콘텐츠가 수신된 후 CSSOM을 생성하고 이를 DOM트리와 결합하여 렌더링 트리를 구성한다. - 렌더링 트리가 페이지에 지정된 텍스트를 렝더링 하는데 필요한 글꼴 버전을 표기하면 글꼴 요청이 전달 된다. 5. 브라우저는 레이아웃을 실행하고 콘텐츠를 화면에 페인팅한다. - 글꼴을 아직 사용할 수 없는 경우는 텍스트 픽셀을 렌더링 할 수 없다. - 글꼴을 사용할 수 있게 되면 브라우저가 텍스트 픽셀을 페인팅한다.
-
-이때 WebFonts를 미리 로드하고 font-display를 사용해 사용할 수 없는 글꼴이 있을 때 브라우저 작동 방식을 제어하면 빈 페이지 및 레이아웃 변경을 방지할 수 있다.
-
-## 웹 폰트 최적화 방법
-
-폰트의 리소스 요청은 다른 리소스 요청보다 늦게 시작하는데 이 요청을 앞당길 수 있는 방법이 있다.
-
-```javascript
-
-
-
-```
-위와 같이 preload를 사용하면 CSSOM이 생성될 때 까지 기다릴 필요 없이 폰트 리소스 요청을 할 수 있다.
-
-서브셋 폰트란 폰트에서 불필요한 글자를 제거한 폰트 파일을 말하는데 예를 들어 (뿪, 깖) 같이 사용하지 않는 조합을 제거한 파일을 말한다. 서브셋 폰트를 사용하기 위해선 서브셋 폰트를 만들어주는 사이트를 이용하거나 unicode-range를 사용하면 된다. unicode-range는 유니코드의 필요한 범위만 다운 받을 수 있는 방법이다.
-
-```javascript
-
- @font-face {
- font-family: 'Awesome Font';
- font-style: normal;
- font-weight: 400;
- font-display: auto;
- src: local('Awesome Font'),
- url('/fonts/awesome-l.woff2') format('woff2'),
- url('/fonts/awesome-l.woff') format('woff'),
- url('/fonts/awesome-l.ttf') format('truetype'),
- url('/fonts/awesome-l.eot') format('embedded-opentype');
- unicode-range: U+000-5FF; // 사용할 범위 지정
- }
-
-```
-폰트에도 다양한 형식이 있는데 압축률이 잘 되어있는 형식을 사용하는 방법이다. 일반적으로 WOFF, WOFF2가 압축률이 좋아 로드 속도가 매우 빠르다. WOFF2의 경우 WOFF를 30% ~ 50% 정도 압축했지만 IE11를 지원하지 않기 때문에 잘 고려해보는 것이 좋다. 아래의 사진은 글꼴 형식을 지원하는 브라우저이다.
-
-
-[https://www.w3schools.com/Css/css3_fonts.asp](https://www.w3schools.com/Css/css3_fonts.asp)
-
-## 마치며
-
-이처럼 최적화를 위해서 정말 다양한 방법을 이용해 적절한 폰트의 선택과 로딩과정을 신경 써야 한다는 점을 알게 되었다.
+---
+title: 웹폰트 최적화
+tags: [frontEnd]
+date: "2024.03.06"
+---
+## 웹 폰트가 동작하는 방법
+
+우선 최적화를 진행하기 전에 웹 폰트가 어떻게 동작하는지 알아보도록 하겠다. 아래의 사진은 브라우저가 렌더링 하는 과정이다.
+
+
+[https://web.dev/articles/optimize-webfont-loading?hl=ko](https://web.dev/articles/optimize-webfont-loading?hl=ko)
+
+1. 브라우저가 HTML 문서을 요청한다. 2. 브라우저가 HTML 응답을 파싱하고 DOM을 구성하기 시작한다. 3. 브라우저가 CSS, JS 및 기타 리소스를 발견하고 요청을 전달한다. 4. 브라우저는 모든 CSS 콘텐츠가 수신된 후 CSSOM을 생성하고 이를 DOM트리와 결합하여 렌더링 트리를 구성한다. - 렌더링 트리가 페이지에 지정된 텍스트를 렝더링 하는데 필요한 글꼴 버전을 표기하면 글꼴 요청이 전달 된다. 5. 브라우저는 레이아웃을 실행하고 콘텐츠를 화면에 페인팅한다. - 글꼴을 아직 사용할 수 없는 경우는 텍스트 픽셀을 렌더링 할 수 없다. - 글꼴을 사용할 수 있게 되면 브라우저가 텍스트 픽셀을 페인팅한다.
+
+이때 WebFonts를 미리 로드하고 font-display를 사용해 사용할 수 없는 글꼴이 있을 때 브라우저 작동 방식을 제어하면 빈 페이지 및 레이아웃 변경을 방지할 수 있다.
+
+## 웹 폰트 최적화 방법
+
+폰트의 리소스 요청은 다른 리소스 요청보다 늦게 시작하는데 이 요청을 앞당길 수 있는 방법이 있다.
+
+```javascript
+
+
+
+```
+위와 같이 preload를 사용하면 CSSOM이 생성될 때 까지 기다릴 필요 없이 폰트 리소스 요청을 할 수 있다.
+
+서브셋 폰트란 폰트에서 불필요한 글자를 제거한 폰트 파일을 말하는데 예를 들어 (뿪, 깖) 같이 사용하지 않는 조합을 제거한 파일을 말한다. 서브셋 폰트를 사용하기 위해선 서브셋 폰트를 만들어주는 사이트를 이용하거나 unicode-range를 사용하면 된다. unicode-range는 유니코드의 필요한 범위만 다운 받을 수 있는 방법이다.
+
+```javascript
+
+ @font-face {
+ font-family: 'Awesome Font';
+ font-style: normal;
+ font-weight: 400;
+ font-display: auto;
+ src: local('Awesome Font'),
+ url('/fonts/awesome-l.woff2') format('woff2'),
+ url('/fonts/awesome-l.woff') format('woff'),
+ url('/fonts/awesome-l.ttf') format('truetype'),
+ url('/fonts/awesome-l.eot') format('embedded-opentype');
+ unicode-range: U+000-5FF; // 사용할 범위 지정
+ }
+
+```
+폰트에도 다양한 형식이 있는데 압축률이 잘 되어있는 형식을 사용하는 방법이다. 일반적으로 WOFF, WOFF2가 압축률이 좋아 로드 속도가 매우 빠르다. WOFF2의 경우 WOFF를 30% ~ 50% 정도 압축했지만 IE11를 지원하지 않기 때문에 잘 고려해보는 것이 좋다. 아래의 사진은 글꼴 형식을 지원하는 브라우저이다.
+
+
+[https://www.w3schools.com/Css/css3_fonts.asp](https://www.w3schools.com/Css/css3_fonts.asp)
+
+## 마치며
+
+이처럼 최적화를 위해서 정말 다양한 방법을 이용해 적절한 폰트의 선택과 로딩과정을 신경 써야 한다는 점을 알게 되었다.
diff --git a/src/content/posts/frontEnd/Front-End-Features-in-2025.md b/src/content/posts/frontEnd/Front-End-Features-in-2025.md
index 215dea6..a01bef3 100644
--- a/src/content/posts/frontEnd/Front-End-Features-in-2025.md
+++ b/src/content/posts/frontEnd/Front-End-Features-in-2025.md
@@ -1,114 +1,114 @@
----
-title: 2025년 추가된 HTML, CSS 기능
-tags: [frontEnd]
-date: "2025.01.12"
----
-2025년이 되어 HTML과 CSS에 새로운 기능들을 소개하며 활용할 방법들을 고민하도록 하겠습니다.
-
-직접 정보를 보고싶은 분은 [여기](https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025/)에서 확인할 수 있습니다.
-
-## 1. CSS Layers (@layer)
-https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
-
-CSS에 우선 순위를 설정할 수 있습니다.
-Layer는 아래와 같이 선언해 사용할 수 있으며 나중에 선언한 Layer가 스타일 우선 순위를 가집니다.
-```CSS
-@layer {
- ...
-}
-```
-
-상단부에 미리 순서를 정의해 우선순위를 결정할 수 있습니다.
-- `reset` >`components`
-```css
-@layer components, reset;
-@layer reset { /* 우선순위가 됨 */
- * {
- margin: 0;
- padding: 0;
- }
-}
-@layer components {
- .button {
- background-color: blue;
- }
-}
-```
-
-## 2. Scope At-rules (@scope)
-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
-
-container query는 viewport기준이 아니라 요소의 크기에 따라 반응형으로 스타일링이 가능합니다.
-
-`@container <컨테이너 이름>`형식으로 쓰이고 미디어 쿼리처럼 사용할 수 있습니다.
-```
-.card h2 {
- font-size: 1em;
-}
-
-@container (min-width: 700px) {
- .card h2 {
- font-size: 2em;
- }
-}
-```
-
-## 3. Scope At-rules
-https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
-
-`@scope`를 스타일을 적용할 수 있는 범위를 제한할 수 있습니다.
-
-```html
-
-
-
-```
-```css
-li {
- color: green;
-}
-
-@scope (.name) {
- :scope {
- background: skyblue;
- padding: 0.5rem;
- }
-
- li {
- color: blue;
- }
-}
-
-@scope (.age) {
- & {
- background: pink;
- padding: 0.5rem;
- }
-
- & li {
- color: red;
- }
-}
-```
-
-## 4. text‑wrap: balance
-https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
-
-요소 내부에 텍스트를 균형있게 정렬해주는 기능입니다.
-
-## 5. scroll-snap 속성
-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap
-https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
-
-scroll-snap 속성을 이용하면 자바스크립트 없이 요소가 스크롤 되는 위치에 자동으로
-스냅되도록 하는 CSS속성 입니다.
-
-## 마치며
-이 외에도 [여기](https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025/)에서 다른 변경사항들을 확인할 수 있습니다.
+---
+title: 2025년 추가된 HTML, CSS 기능
+tags: [frontEnd]
+date: "2025.01.12"
+---
+2025년이 되어 HTML과 CSS에 새로운 기능들을 소개하며 활용할 방법들을 고민하도록 하겠습니다.
+
+직접 정보를 보고싶은 분은 [여기](https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025/)에서 확인할 수 있습니다.
+
+## 1. CSS Layers (@layer)
+https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
+
+CSS에 우선 순위를 설정할 수 있습니다.
+Layer는 아래와 같이 선언해 사용할 수 있으며 나중에 선언한 Layer가 스타일 우선 순위를 가집니다.
+```CSS
+@layer {
+ ...
+}
+```
+
+상단부에 미리 순서를 정의해 우선순위를 결정할 수 있습니다.
+- `reset` >`components`
+```css
+@layer components, reset;
+@layer reset { /* 우선순위가 됨 */
+ * {
+ margin: 0;
+ padding: 0;
+ }
+}
+@layer components {
+ .button {
+ background-color: blue;
+ }
+}
+```
+
+## 2. Scope At-rules (@scope)
+https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
+
+container query는 viewport기준이 아니라 요소의 크기에 따라 반응형으로 스타일링이 가능합니다.
+
+`@container <컨테이너 이름>`형식으로 쓰이고 미디어 쿼리처럼 사용할 수 있습니다.
+```
+.card h2 {
+ font-size: 1em;
+}
+
+@container (min-width: 700px) {
+ .card h2 {
+ font-size: 2em;
+ }
+}
+```
+
+## 3. Scope At-rules
+https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
+
+`@scope`를 스타일을 적용할 수 있는 범위를 제한할 수 있습니다.
+
+```html
+
+
+
+```
+```css
+li {
+ color: green;
+}
+
+@scope (.name) {
+ :scope {
+ background: skyblue;
+ padding: 0.5rem;
+ }
+
+ li {
+ color: blue;
+ }
+}
+
+@scope (.age) {
+ & {
+ background: pink;
+ padding: 0.5rem;
+ }
+
+ & li {
+ color: red;
+ }
+}
+```
+
+## 4. text‑wrap: balance
+https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
+
+요소 내부에 텍스트를 균형있게 정렬해주는 기능입니다.
+
+## 5. scroll-snap 속성
+https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap
+https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
+
+scroll-snap 속성을 이용하면 자바스크립트 없이 요소가 스크롤 되는 위치에 자동으로
+스냅되도록 하는 CSS속성 입니다.
+
+## 마치며
+이 외에도 [여기](https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025/)에서 다른 변경사항들을 확인할 수 있습니다.
저는 scroll-snap 속성이 가장 신기했고 진행하고 있는 프로젝트에 적용해 더 좋은 사용자 경험을 제공할 수 있을거 같단 생각이 듭니다.
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/How-to-Use-Tailwind-CSS.md b/src/content/posts/frontEnd/How-to-Use-Tailwind-CSS.md
index d3ec9c6..d869afb 100644
--- a/src/content/posts/frontEnd/How-to-Use-Tailwind-CSS.md
+++ b/src/content/posts/frontEnd/How-to-Use-Tailwind-CSS.md
@@ -1,173 +1,173 @@
----
-title: Tailwind CSS 사용법
-tags: [frontEnd]
-date: "2024.08.10"
----
-
-
-이번에 next.js로 프로젝트를 구성하면서 Tailwind CSS를 사용하기로 해서
-자세하게 알고 넘어가보려 합니다.
-
-## Tailwind CSS
-Tailwind CSS는 유틸리티-퍼스트(Utility-first) 접근 방식을 기반으로 하는 CSS 프레임워크로,
-클래스 기반 스타일링을 통해 빠르고 효율적인 UI 개발이 가능합니다.
-
-### Tailwind CSS 설치
-```bash
-npm install -D tailwindcss
-
-yarn add -D tailwindcss
-```
-
-### 템플릿 경로 구성
-tailwind.config 파일에서 테일윈드의 구성요소를 설정할 수 있습니다.
-```javascript
-/** @type {import('tailwindcss').Config} */
-module.exports = {
- content: ["./src/**/*.{html,js}"],
- theme: {
- extend: {}, // 커스텀 스타일을 설정할 수 있습니다.
- },
- plugins: [],
-}
-```
-
-### Tailwind CSS 스타일 추가하기
-
-메인 CSS파일에서 Tailwind CSS 스타일을 추가할 수 있습니다.
-
-```css
-@tailwind base;
-/* 테일윈드의 기본 스타일을 삽입합니다. */
-
-@tailwind components;
-/* 테일윈드에서 제공하는 컴포넌트 스타일을 삽입합니다. */
-
-@tailwind utilities;
-/* 테일윈드에서 제공하는 유틸리티 클래스를 정의합니다. */
-
-@tailwind variants
-```
-
-자바스크립트 파일에서 직접 임포트해 스타일을 적용할 수 있습니다.
-그리고 `@apply`를 이용해 Tailwind 유틸리티 클래스를 사용할 수 있습니다.
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.container {
- @apply max-w-7xl mx-auto px-4;
-}
-
-.text-xl {
- @apply text-xl font-semibold text-gray-800;
-}
-```
-
-`@tailwind base`는 기본 스타일을 초기화 하거나 Tailwind CSS에서 제공하는
-일관된 스타일을 정의할 수 있습니다.
-
-
-```css
-@tailwind base;
-
-@layer base{
- *, ::before, ::after {
- box-sizing: border-box;
- border-width: 0;
- border-style: solid;
- border-color: currentColor;
- }
- body {
- margin: 0;
- font-family: inherit;
- line-height: inherit;
- }
-}
-```
-
-`@tailwind components`는 Tailwind CSS에서 제공하는 `container`와 같은 컴포넌트
-스타일이나 커스텀 컴포넌트 스타일을 정의 합니다.
-
-```css
-@tailwind components;
-
-@layer components{
- .container {
- width: 100%;
- margin-left: auto;
- margin-right: auto;
- padding-left: 1rem; /* 16px */
- padding-right: 1rem; /* 16px */
- }
-
- .btn {
- @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-700;
- }
-
- @media (min-width: 640px) {
- .container {
- max-width: 640px;
- }
- }
-}
-```
-
-`@tailwind utilities`는 Tailwind CSS에서 제공하는 `mt-10`과 같은 새로운
-유틸리티 클래스를 정의할 수 있습니다.
-
-```css
-@tailwind utilities;
-
-@layer utilities{
- .mt-15 {
- margin-top: 3.75rem; /* 사용자 정의 마진 값 */
- }
-}
-```
-`@tailwind variants`는 `hover`, `focus`, `active`같은 상태를 다룰 때 사용됩니다.
-
-```css
-@tailwind variants;
-
-@variants hover {
- .btn {
- @apply bg-blue-500;
- }
-}
-```
-
-### 모듈화
-
-`@apply`를 사용해 모듈화 하면 `.module.css` 스타일의 일관성을 유지하면서
-컴포넌트 기반의 스타일을 관리할 수 있습니다.
-
-```css
-/* Button.module.css */
-.button {
- @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
-}
-```
-
-### `tailwind.config.js` 커스텀
-
-Tailwind 구성파일에 테마, 색상, 글꼴, 간격 등 다양한 기본 값을 커스텀할 수 있습니다.
-
-```
-module.exports = {
- theme: {
- extend: {
- colors: {
- customColor: '#ff5733',
- },
- },
- },
-}
-```
-### 플러그인
-
-Tailwind CSS IntelliSense 플러그인을 사용해 자동완성이나 클래스 이름,
-CSS 함수 및 지시문 에 대한 제안을 받을 수 있습니다.
-
+---
+title: Tailwind CSS 사용법
+tags: [frontEnd]
+date: "2024.08.10"
+---
+
+
+이번에 next.js로 프로젝트를 구성하면서 Tailwind CSS를 사용하기로 해서
+자세하게 알고 넘어가보려 합니다.
+
+## Tailwind CSS
+Tailwind CSS는 유틸리티-퍼스트(Utility-first) 접근 방식을 기반으로 하는 CSS 프레임워크로,
+클래스 기반 스타일링을 통해 빠르고 효율적인 UI 개발이 가능합니다.
+
+### Tailwind CSS 설치
+```bash
+npm install -D tailwindcss
+
+yarn add -D tailwindcss
+```
+
+### 템플릿 경로 구성
+tailwind.config 파일에서 테일윈드의 구성요소를 설정할 수 있습니다.
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./src/**/*.{html,js}"],
+ theme: {
+ extend: {}, // 커스텀 스타일을 설정할 수 있습니다.
+ },
+ plugins: [],
+}
+```
+
+### Tailwind CSS 스타일 추가하기
+
+메인 CSS파일에서 Tailwind CSS 스타일을 추가할 수 있습니다.
+
+```css
+@tailwind base;
+/* 테일윈드의 기본 스타일을 삽입합니다. */
+
+@tailwind components;
+/* 테일윈드에서 제공하는 컴포넌트 스타일을 삽입합니다. */
+
+@tailwind utilities;
+/* 테일윈드에서 제공하는 유틸리티 클래스를 정의합니다. */
+
+@tailwind variants
+```
+
+자바스크립트 파일에서 직접 임포트해 스타일을 적용할 수 있습니다.
+그리고 `@apply`를 이용해 Tailwind 유틸리티 클래스를 사용할 수 있습니다.
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.container {
+ @apply max-w-7xl mx-auto px-4;
+}
+
+.text-xl {
+ @apply text-xl font-semibold text-gray-800;
+}
+```
+
+`@tailwind base`는 기본 스타일을 초기화 하거나 Tailwind CSS에서 제공하는
+일관된 스타일을 정의할 수 있습니다.
+
+
+```css
+@tailwind base;
+
+@layer base{
+ *, ::before, ::after {
+ box-sizing: border-box;
+ border-width: 0;
+ border-style: solid;
+ border-color: currentColor;
+ }
+ body {
+ margin: 0;
+ font-family: inherit;
+ line-height: inherit;
+ }
+}
+```
+
+`@tailwind components`는 Tailwind CSS에서 제공하는 `container`와 같은 컴포넌트
+스타일이나 커스텀 컴포넌트 스타일을 정의 합니다.
+
+```css
+@tailwind components;
+
+@layer components{
+ .container {
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 1rem; /* 16px */
+ padding-right: 1rem; /* 16px */
+ }
+
+ .btn {
+ @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-700;
+ }
+
+ @media (min-width: 640px) {
+ .container {
+ max-width: 640px;
+ }
+ }
+}
+```
+
+`@tailwind utilities`는 Tailwind CSS에서 제공하는 `mt-10`과 같은 새로운
+유틸리티 클래스를 정의할 수 있습니다.
+
+```css
+@tailwind utilities;
+
+@layer utilities{
+ .mt-15 {
+ margin-top: 3.75rem; /* 사용자 정의 마진 값 */
+ }
+}
+```
+`@tailwind variants`는 `hover`, `focus`, `active`같은 상태를 다룰 때 사용됩니다.
+
+```css
+@tailwind variants;
+
+@variants hover {
+ .btn {
+ @apply bg-blue-500;
+ }
+}
+```
+
+### 모듈화
+
+`@apply`를 사용해 모듈화 하면 `.module.css` 스타일의 일관성을 유지하면서
+컴포넌트 기반의 스타일을 관리할 수 있습니다.
+
+```css
+/* Button.module.css */
+.button {
+ @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
+}
+```
+
+### `tailwind.config.js` 커스텀
+
+Tailwind 구성파일에 테마, 색상, 글꼴, 간격 등 다양한 기본 값을 커스텀할 수 있습니다.
+
+```
+module.exports = {
+ theme: {
+ extend: {
+ colors: {
+ customColor: '#ff5733',
+ },
+ },
+ },
+}
+```
+### 플러그인
+
+Tailwind CSS IntelliSense 플러그인을 사용해 자동완성이나 클래스 이름,
+CSS 함수 및 지시문 에 대한 제안을 받을 수 있습니다.
+
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/Html-to-readme-guide.md b/src/content/posts/frontEnd/Html-to-readme-guide.md
index 4cf2df6..3cd69f8 100644
--- a/src/content/posts/frontEnd/Html-to-readme-guide.md
+++ b/src/content/posts/frontEnd/Html-to-readme-guide.md
@@ -1,291 +1,292 @@
----
-title: tsx파일을 리드미파일로 바꾸기
-tags: [frontEnd]
-date: "2025.01.04"
----
-오늘은 개발 블로그를 리뉴얼 하는 과정에서 tsx파일을 리드미파일로 변환했던 작업이 있어 이 경험을 공유하려고 합니다.
-
-우선 저의 개발 블로그는 react기반의 프로젝트로 tsx 파일을 생성해 블로그 글을 작성하고 있었습니다.
-하지만 이 방법은 접근성이 너무 떨어지고 유지보수가 너무 힘들다는 단점이 있어 불편함을 많이 느꼈고
-이번 기회에 next로 마이그레이션하는 작업을 진행하기로 했습니다.
-
-이번 블로그는 `.md`파일로 블로그 글을 관리하고 싶었고 이를 위해 기존에 작성했던 블로그 글을 모두 .md 파일로 변환해야 했습니다.
-
-## 리드미파일로 변환하기
-모든 블로그 글을 수작업으로 변환하기엔 너무 양이 많아 스크립트를 작성해 변환하기로 했습니다.
-
-변환하기 위해 필요한 작업은 다음 순서로 나열할 수 있습니다.
-- 게시글 파일을 순서대로 모두 읽기
-- 게시글을 파싱해 `.md`문법으로 변환하기
-- 새로운 폴더를 생성해 파싱한 파일을 카테고리별로 생성
-
-여기서 가장 중요한 부분은 `게시글을 파싱해 .md문법으로 변환하기` 작업이기 때문에
-게시글을 순서대로 폴더 구조대로 읽고 새로운 폴더를 생성해 생성하는 과정 부터 만들었습니다.
-
-```
-/post
- ├─ /backEnd
- ├─ /cs
- ├─ /css
- ├─ /etc
- ├─ /frontEnd
- ├─ /html
- ├─ /javascript
- ├─ /network
- ├─ /next
- ├─ /node
- ├─ /react
- ├─ /sever
- └─ /typescript
-```
-
-### 폴더 구조대로 파일 읽기
-이런 폴더 구조로 게시글이 관리되고 있어서 해당 폴더를 읽고 해당 폴더에 하위 폴더가 있다면 재귀적으로 다시 폴더를 읽습니다.
-
-만약 읽은 파일이 `tsx`파일일 경우 tsx 파일일 경우 파일을 파싱하는 로직을 추가한 후 파일을 저장하는 로직을 생성해주면 됩니다.
-```js
-const convertAllTsxFilesToMarkdown = (tsxDir, outputDir) => {
- const files = fs.readdirSync(tsxDir);
-
- files.forEach((file) => {
- const filePath = path.join(tsxDir, file);
- if (fs.statSync(filePath).isDirectory()) {
- // 하위 디렉토리 처리
- convertAllTsxFilesToMarkdown(filePath, outputDir);
- } else if (path.extname(file) === ".tsx") {
- // tsx 파일일 경우 파일을 파싱하는 로직
- }
- });
-};
-
-// 실행 예시
-const tsxDir = path.join(__dirname, "post"); // tsx 파일들이 있는 폴더
-const outputDir = path.join(__dirname, "dist"); // 마크다운 파일을 저장할 폴더
-convertAllTsxFilesToMarkdown(tsxDir, outputDir);
-```
-
-### 폴더 구조대로 파일 생성하기
-**tsx 파일일 경우 파일을 파싱하는 로직**에 파일을 생성하는 함수를 추가합니다.
-
-`filePath(파일 경로)`와 `outputDir(파일을 생성할 위치)`을 함수 인자로 받습니다."
-그런 후 `extractContent`함수를 이용해 마크다운 문법으로 변환한 후에
-출력 폴더를 생성해 완료합니다.
-```js
-const convertTsxToMarkdownFile = (tsxFilePath, outputDir) => {
- const tsxContent = fs.readFileSync(tsxFilePath, "utf-8");
- if (!tsxContent) return;
-
- const markdownContent = extractContent(
- tsxContent,
- path.relative(__dirname, tsxFilePath)
- );
-
- if (!markdownContent) {
- return;
- }
-
- const outputFilePath = path.join(
- outputDir,
- path.relative(__dirname, tsxFilePath).replace(".tsx", ".md")
- );
- const outputFolder = path.dirname(outputFilePath);
-
- // 출력 폴더가 없다면 생성
- if (!fs.existsSync(outputFolder)) {
- fs.mkdirSync(outputFolder, { recursive: true });
- }
- console.log(outputFilePath);
- fs.writeFileSync(outputFilePath, markdownContent, "utf-8");
-};
-```
-
-### 리드미파일 변환 로직
-파일을 읽고 쓰는 과정은 다른 프로젝트를 진행하며 경험했기 때문에 그렇게 어렵지 않았지만 tsx문법을 마크다운 문법으로 변환하는 과정에서 저는 큰 함정에 빠지고 말았습니다.
-
-이 작업을 시작할 때 리드미파일로 변환하기 위해선 tsx파일을 파싱해 변환해야만 한다고 생각한 나머지 `babel`을 사용하고 맙니다.
-~~이 선택만 아니였어도 하루를 버리진 않았을거 같은 생각이...~~
-
-로직이 너무 어지러워 함수를 호출했을 때 일어나는 일에 대해서 설명하겠습니다.
-
-- `extractContent`함수에서 tsx파일을 파싱해 jsx파일로 만들어 `ast`변수에 할당합니다.
-- `ast`변수를 순회하며 `processJSXElement`함수를 호출합니다.
-- `processJSXElement`함수 에서는 `switch`를 이용해 태그에 이름에 따라 Markdown 문법으로 매핑해줍니다.
-
-```js
-const getJSXTextFromChildren = (children) => {
- let text = "";
- children.forEach((child) => {
- if (t.isJSXText(child)) {
- text += child.value;
- } else if (
- t.isJSXExpressionContainer(child) &&
- child.expression &&
- typeof child.expression.value === "string"
- ) {
- text += child.expression.value;
- } else if (t.isJSXElement(child)) {
- text += processJSXElement(child);
- }
- });
- return text.trim();
-}
-
-const processJSXElement = (node) => {
- // 엘리먼트의 태그 이름 추출
- const tagName = node.openingElement.name.name;
- let result = "";
-
- // 태그 이름에 따라 Markdown으로 매핑
- switch (tagName) {
- case "PostHeader": {
- let title = "";
- let tagProp = "";
- let date = "";
- node.openingElement.attributes.forEach((attr) => {
- if (attr.name && attr.name.name === "title") {
- title = attr.value.value;
- }
- if (attr.name && attr.name.name === "tagName") {
- tagProp = attr.value.value;
- }
- if (attr.name && attr.name.name === "date") {
- date = attr.value.value;
- }
- });
- result += `---\n**title:** ${title}\n`;
- if (tagProp) result += `**Tag:** ${tagProp}\n`;
- if (date) result += `**Date:** ${date} \n---`;
- result += "\n";
- break;
- }
- case "SubTitle": {
- const text = getJSXTextFromChildren(node.children);
- result += `## ${text}\n\n`;
- break;
- }
- case "TextBox": {
- const text = getJSXTextFromChildren(node.children);
- result += `${text}\n\n`;
- break;
- }
- case "ReferenceLink": {
- let href = "";
- node.openingElement.attributes.forEach((attr) => {
- if (attr.name && attr.name.name === "href") {
- href = attr.value.value;
- }
- });
- const linkText = getJSXTextFromChildren(node.children);
- result += `[${linkText}](${href})\n\n`;
- break;
- }
- case "ImgContainer": {
- node.children.forEach((child) => {
- if (t.isJSXElement(child) && child.openingElement.name.name === "img") {
- let alt = "";
- let src = "";
- child.openingElement.attributes.forEach((attr) => {
- if (attr.name && attr.name.name === "alt") {
- alt = attr.value.value;
- }
- if (attr.name && attr.name.name === "src") {
- if (attr.value.type === "StringLiteral") {
- src = attr.value.value;
- } else {
- src = `{${attr.value.expression.name}}`;
- }
- }
- });
- result += `\![\${alt}] (\${src})\n\n`;
- }
- });
- break;
- }
- default:
-
- break;
- }
-
- // 만약 위에서 처리하지 않은 컨테이너 태그라면 자식 노드들을 재귀적으로 처리
- node.children.forEach((child) => {
- if (t.isJSXElement(child)) {
- result += processJSXElement(child);
- } else if (t.isJSXText(child)) {
- result += child.value;
- } else if (t.isJSXExpressionContainer(child)) {
- if (child.expression && child.expression.value) {
- result += child.expression.value;
- }
- }
- });
- return result;
-}
-
-
-const extractContent = (tsxContent, local) => {
- // TSX 내용을 파싱하여 AST 생성 (TypeScript, JSX 플러그인 활성화)
- const ast = parser.parse(tsxContent, {
- sourceType: "module",
- plugins: ["typescript", "jsx"]
- });
-
- let markdown = "";
- // AST를 순회하며 return문 안의 JSX 엘리먼트를 찾아 변환 수행
- traverse(ast, {
- ReturnStatement(path) {
- if (t.isJSXElement(path.node.argument)) {
- markdown = processJSXElement(path.node.argument);
- }
- }
- });
-
- return markdown;
-};
-```
-
-이 로직을 만들어 md 파일로 변환을 성공한 후에 이렇게 하는게 맞는지에 대한 의문이 들었고 이제서야 여러 단점들이 보이기 시작했습니다.
-
-우선 이 로직의 문제점은
-1. 유지보수하기 매우 힘들다는 점
-2. 다른 용도로 활용할 수 없다는 점
-3. 파싱한 데이터를 들여다보며 작업하기 때문에 시간이 아주 많이 든다는 점
-4. `babel`은 이런 용도로 사용되는 도구가 아니라는 점 이였습니다.
-
-## 해결 방법
-다시 처음으로 돌아와 문제를 해결하기 위한 방법을 생각해보니 결국 제게 필요한 행동은 성능상의 이유로 파일을 빌드하거나 호환 가능하도록 변환하는 작업이 아닌 단순하게 텍스트를 변환하는 과정이였습니다.
-
-자바스크립트에서 텍스트를 다른 텍스트로 바꾸는 것은 어려운 작업이 아닐 뿐더러 정규식이라는 훌륭한 도구만 있으면 될거 같다는 생각이 들어 간단한 로직을 만들어 테스트 해보았습니다.
-
-`extractContent`함수에 정규식을 활용해 `PostHeader`태그의 제목, 태그, 날짜 추출해 빌드해 보니 성공적 변환이 되는 점을 확인했습니다.
-```js
-const extractContent = (tsxCode, filePath) => {
- let markdownContent = `# ${path.basename(filePath, ".tsx")}\n\n`;
-
- const headerMatch = tsxCode.match(
- //
- );
- if (headerMatch) {
- const [, title, tagName, date] = headerMatch;
- markdownContent += `**${title}**\n\n`;
- markdownContent += `- 태그: ${tagName}\n`;
- markdownContent += `- 날짜: ${date}\n\n`;
- }
-
- return markdownContent;
-};
-```
-
-```md
-# React-Fragment
-
-**Fragment를 알아보자**
-
-- 태그: React
-- 날짜: 2022.01.02
-```
-
-## 마치며
-단순하게 `tsx` 파일을 `.md`으로 변환하는 것이 아니라 **내가 추출 해야하는 데이터**를 먼저 분석하고 이를 위해 **어떤 방법을 사용할지 결정하는 과정**이 중요하단 생각이 들었습니다.
-
-### 오늘의 한마디
+---
+title: tsx파일을 리드미파일로 바꾸기
+series: blog
+tags: [frontEnd]
+date: "2025.01.04"
+---
+오늘은 개발 블로그를 리뉴얼 하는 과정에서 tsx파일을 리드미파일로 변환했던 작업이 있어 이 경험을 공유하려고 합니다.
+
+우선 저의 개발 블로그는 react기반의 프로젝트로 tsx 파일을 생성해 블로그 글을 작성하고 있었습니다.
+하지만 이 방법은 접근성이 너무 떨어지고 유지보수가 너무 힘들다는 단점이 있어 불편함을 많이 느꼈고
+이번 기회에 next로 마이그레이션하는 작업을 진행하기로 했습니다.
+
+이번 블로그는 `.md`파일로 블로그 글을 관리하고 싶었고 이를 위해 기존에 작성했던 블로그 글을 모두 .md 파일로 변환해야 했습니다.
+
+## 리드미파일로 변환하기
+모든 블로그 글을 수작업으로 변환하기엔 너무 양이 많아 스크립트를 작성해 변환하기로 했습니다.
+
+변환하기 위해 필요한 작업은 다음 순서로 나열할 수 있습니다.
+- 게시글 파일을 순서대로 모두 읽기
+- 게시글을 파싱해 `.md`문법으로 변환하기
+- 새로운 폴더를 생성해 파싱한 파일을 카테고리별로 생성
+
+여기서 가장 중요한 부분은 `게시글을 파싱해 .md문법으로 변환하기` 작업이기 때문에
+게시글을 순서대로 폴더 구조대로 읽고 새로운 폴더를 생성해 생성하는 과정 부터 만들었습니다.
+
+```
+/post
+ ├─ /backEnd
+ ├─ /cs
+ ├─ /css
+ ├─ /etc
+ ├─ /frontEnd
+ ├─ /html
+ ├─ /javascript
+ ├─ /network
+ ├─ /next
+ ├─ /node
+ ├─ /react
+ ├─ /sever
+ └─ /typescript
+```
+
+### 폴더 구조대로 파일 읽기
+이런 폴더 구조로 게시글이 관리되고 있어서 해당 폴더를 읽고 해당 폴더에 하위 폴더가 있다면 재귀적으로 다시 폴더를 읽습니다.
+
+만약 읽은 파일이 `tsx`파일일 경우 tsx 파일일 경우 파일을 파싱하는 로직을 추가한 후 파일을 저장하는 로직을 생성해주면 됩니다.
+```js
+const convertAllTsxFilesToMarkdown = (tsxDir, outputDir) => {
+ const files = fs.readdirSync(tsxDir);
+
+ files.forEach((file) => {
+ const filePath = path.join(tsxDir, file);
+ if (fs.statSync(filePath).isDirectory()) {
+ // 하위 디렉토리 처리
+ convertAllTsxFilesToMarkdown(filePath, outputDir);
+ } else if (path.extname(file) === ".tsx") {
+ // tsx 파일일 경우 파일을 파싱하는 로직
+ }
+ });
+};
+
+// 실행 예시
+const tsxDir = path.join(__dirname, "post"); // tsx 파일들이 있는 폴더
+const outputDir = path.join(__dirname, "dist"); // 마크다운 파일을 저장할 폴더
+convertAllTsxFilesToMarkdown(tsxDir, outputDir);
+```
+
+### 폴더 구조대로 파일 생성하기
+**tsx 파일일 경우 파일을 파싱하는 로직**에 파일을 생성하는 함수를 추가합니다.
+
+`filePath(파일 경로)`와 `outputDir(파일을 생성할 위치)`을 함수 인자로 받습니다."
+그런 후 `extractContent`함수를 이용해 마크다운 문법으로 변환한 후에
+출력 폴더를 생성해 완료합니다.
+```js
+const convertTsxToMarkdownFile = (tsxFilePath, outputDir) => {
+ const tsxContent = fs.readFileSync(tsxFilePath, "utf-8");
+ if (!tsxContent) return;
+
+ const markdownContent = extractContent(
+ tsxContent,
+ path.relative(__dirname, tsxFilePath)
+ );
+
+ if (!markdownContent) {
+ return;
+ }
+
+ const outputFilePath = path.join(
+ outputDir,
+ path.relative(__dirname, tsxFilePath).replace(".tsx", ".md")
+ );
+ const outputFolder = path.dirname(outputFilePath);
+
+ // 출력 폴더가 없다면 생성
+ if (!fs.existsSync(outputFolder)) {
+ fs.mkdirSync(outputFolder, { recursive: true });
+ }
+ console.log(outputFilePath);
+ fs.writeFileSync(outputFilePath, markdownContent, "utf-8");
+};
+```
+
+### 리드미파일 변환 로직
+파일을 읽고 쓰는 과정은 다른 프로젝트를 진행하며 경험했기 때문에 그렇게 어렵지 않았지만 tsx문법을 마크다운 문법으로 변환하는 과정에서 저는 큰 함정에 빠지고 말았습니다.
+
+이 작업을 시작할 때 리드미파일로 변환하기 위해선 tsx파일을 파싱해 변환해야만 한다고 생각한 나머지 `babel`을 사용하고 맙니다.
+~~이 선택만 아니였어도 하루를 버리진 않았을거 같은 생각이...~~
+
+로직이 너무 어지러워 함수를 호출했을 때 일어나는 일에 대해서 설명하겠습니다.
+
+- `extractContent`함수에서 tsx파일을 파싱해 jsx파일로 만들어 `ast`변수에 할당합니다.
+- `ast`변수를 순회하며 `processJSXElement`함수를 호출합니다.
+- `processJSXElement`함수 에서는 `switch`를 이용해 태그에 이름에 따라 Markdown 문법으로 매핑해줍니다.
+
+```js
+const getJSXTextFromChildren = (children) => {
+ let text = "";
+ children.forEach((child) => {
+ if (t.isJSXText(child)) {
+ text += child.value;
+ } else if (
+ t.isJSXExpressionContainer(child) &&
+ child.expression &&
+ typeof child.expression.value === "string"
+ ) {
+ text += child.expression.value;
+ } else if (t.isJSXElement(child)) {
+ text += processJSXElement(child);
+ }
+ });
+ return text.trim();
+}
+
+const processJSXElement = (node) => {
+ // 엘리먼트의 태그 이름 추출
+ const tagName = node.openingElement.name.name;
+ let result = "";
+
+ // 태그 이름에 따라 Markdown으로 매핑
+ switch (tagName) {
+ case "PostHeader": {
+ let title = "";
+ let tagProp = "";
+ let date = "";
+ node.openingElement.attributes.forEach((attr) => {
+ if (attr.name && attr.name.name === "title") {
+ title = attr.value.value;
+ }
+ if (attr.name && attr.name.name === "tagName") {
+ tagProp = attr.value.value;
+ }
+ if (attr.name && attr.name.name === "date") {
+ date = attr.value.value;
+ }
+ });
+ result += `---\n**title:** ${title}\n`;
+ if (tagProp) result += `**Tag:** ${tagProp}\n`;
+ if (date) result += `**Date:** ${date} \n---`;
+ result += "\n";
+ break;
+ }
+ case "SubTitle": {
+ const text = getJSXTextFromChildren(node.children);
+ result += `## ${text}\n\n`;
+ break;
+ }
+ case "TextBox": {
+ const text = getJSXTextFromChildren(node.children);
+ result += `${text}\n\n`;
+ break;
+ }
+ case "ReferenceLink": {
+ let href = "";
+ node.openingElement.attributes.forEach((attr) => {
+ if (attr.name && attr.name.name === "href") {
+ href = attr.value.value;
+ }
+ });
+ const linkText = getJSXTextFromChildren(node.children);
+ result += `[${linkText}](${href})\n\n`;
+ break;
+ }
+ case "ImgContainer": {
+ node.children.forEach((child) => {
+ if (t.isJSXElement(child) && child.openingElement.name.name === "img") {
+ let alt = "";
+ let src = "";
+ child.openingElement.attributes.forEach((attr) => {
+ if (attr.name && attr.name.name === "alt") {
+ alt = attr.value.value;
+ }
+ if (attr.name && attr.name.name === "src") {
+ if (attr.value.type === "StringLiteral") {
+ src = attr.value.value;
+ } else {
+ src = `{${attr.value.expression.name}}`;
+ }
+ }
+ });
+ result += `\![\${alt}] (\${src})\n\n`;
+ }
+ });
+ break;
+ }
+ default:
+
+ break;
+ }
+
+ // 만약 위에서 처리하지 않은 컨테이너 태그라면 자식 노드들을 재귀적으로 처리
+ node.children.forEach((child) => {
+ if (t.isJSXElement(child)) {
+ result += processJSXElement(child);
+ } else if (t.isJSXText(child)) {
+ result += child.value;
+ } else if (t.isJSXExpressionContainer(child)) {
+ if (child.expression && child.expression.value) {
+ result += child.expression.value;
+ }
+ }
+ });
+ return result;
+}
+
+
+const extractContent = (tsxContent, local) => {
+ // TSX 내용을 파싱하여 AST 생성 (TypeScript, JSX 플러그인 활성화)
+ const ast = parser.parse(tsxContent, {
+ sourceType: "module",
+ plugins: ["typescript", "jsx"]
+ });
+
+ let markdown = "";
+ // AST를 순회하며 return문 안의 JSX 엘리먼트를 찾아 변환 수행
+ traverse(ast, {
+ ReturnStatement(path) {
+ if (t.isJSXElement(path.node.argument)) {
+ markdown = processJSXElement(path.node.argument);
+ }
+ }
+ });
+
+ return markdown;
+};
+```
+
+이 로직을 만들어 md 파일로 변환을 성공한 후에 이렇게 하는게 맞는지에 대한 의문이 들었고 이제서야 여러 단점들이 보이기 시작했습니다.
+
+우선 이 로직의 문제점은
+1. 유지보수하기 매우 힘들다는 점
+2. 다른 용도로 활용할 수 없다는 점
+3. 파싱한 데이터를 들여다보며 작업하기 때문에 시간이 아주 많이 든다는 점
+4. `babel`은 이런 용도로 사용되는 도구가 아니라는 점 이였습니다.
+
+## 해결 방법
+다시 처음으로 돌아와 문제를 해결하기 위한 방법을 생각해보니 결국 제게 필요한 행동은 성능상의 이유로 파일을 빌드하거나 호환 가능하도록 변환하는 작업이 아닌 단순하게 텍스트를 변환하는 과정이였습니다.
+
+자바스크립트에서 텍스트를 다른 텍스트로 바꾸는 것은 어려운 작업이 아닐 뿐더러 정규식이라는 훌륭한 도구만 있으면 될거 같다는 생각이 들어 간단한 로직을 만들어 테스트 해보았습니다.
+
+`extractContent`함수에 정규식을 활용해 `PostHeader`태그의 제목, 태그, 날짜 추출해 빌드해 보니 성공적 변환이 되는 점을 확인했습니다.
+```js
+const extractContent = (tsxCode, filePath) => {
+ let markdownContent = `# ${path.basename(filePath, ".tsx")}\n\n`;
+
+ const headerMatch = tsxCode.match(
+ //
+ );
+ if (headerMatch) {
+ const [, title, tagName, date] = headerMatch;
+ markdownContent += `**${title}**\n\n`;
+ markdownContent += `- 태그: ${tagName}\n`;
+ markdownContent += `- 날짜: ${date}\n\n`;
+ }
+
+ return markdownContent;
+};
+```
+
+```md
+# React-Fragment
+
+**Fragment를 알아보자**
+
+- 태그: React
+- 날짜: 2022.01.02
+```
+
+## 마치며
+단순하게 `tsx` 파일을 `.md`으로 변환하는 것이 아니라 **내가 추출 해야하는 데이터**를 먼저 분석하고 이를 위해 **어떤 방법을 사용할지 결정하는 과정**이 중요하단 생각이 들었습니다.
+
+### 오늘의 한마디
**너무 생각을 복잡하게 하다 주화입마에 걸리지 말자!**
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/InfiniteScroll.md b/src/content/posts/frontEnd/InfiniteScroll.md
index 0028cb9..0d974dc 100644
--- a/src/content/posts/frontEnd/InfiniteScroll.md
+++ b/src/content/posts/frontEnd/InfiniteScroll.md
@@ -1,55 +1,56 @@
----
-title: 무한 스크롤 구현하기 (Intersection observer API)
-tags: [frontEnd]
-date: "2023.05.01"
----
-팀프로젝트를 진행하면서 무한스크롤을 이용해서 게시글들을 보여주기로 했다. 페이지네이션이 아닌 무한 스크롤을 선택한 이유는 모바일 환경 지원이 이유이기도 하다. 무한 스크롤을 만들어 본 적이 없어 어떻게 만들어야 하나 찾아보던 중 세 가지 방법으로 만들 수 있다고 했다. 첫번째는 스크롤 이벤트 헨들러를 이용한 방법이고 두번째는 Debounce 와 Throttle를 이용한 방법 마지막으로 Intersection Observer API를 이용하는 방법이다. 각각의 방법마다 장단점이 존재하지만 나는 Intersection Observer API를 이용해 구현하는 방법을 선택했다. 그 이유와 사용방법에 대해 기술하려 한다.
-
-## Intersection Observer API이란?
-
-Intersection Observer API는 뷰표트와 요소의 교차를 관찰하는 API이다. 이 API를 이용하면 요소가 뷰포트에 들어오거나 나가나는등 이벤트를 감지하고 처리할 수 있게된다. 또한 이 기능은 비동기적으로 실행되어 스크롤 이벤트에서 발생하는 성능 저하 같은 문제없이 사용 할 수 있다.
-
-## 사용방법
-
-```javascript
-
- let options = {
- root: null, // 뷰포트 설정
- rootMargin: '0px', // root가 가진 마진을 나타낸다.
- threshold: 1.0 //
- };
-
- const callback = (entries, observer) => {
- entries.forEach((entry) => {
- if (entry.isIntersecting) { // 요소가 관측이 되면 실행된다.
- // 실행할 코드
- }
- });
- };
-
- // 인스턴트 생성
- let observer = new IntersectionObserver(callback, options);
- // 타겟 요소 관찰 시작
- observer.observe(target.current);
-
-
-```
-new IntersectionObserver()를 이용해 인스턴스를 생성해준다. callback은 관찰 대상이 보이면 실행되는 함수이다. options은 관찰이 시작되는 상황에 대해 설정할 수 있다. observer.observe()은 관찰 대상을 시작한다는 말이다. 대상 element가 관찰이 되면 위에 있는 callback. 함수가 실행된다. callback은 (entries, observer)를 인수로 가지게 된다. entriess 는 IntersectionObserverEntry의 배열인데 이 배열은 읽기 전영으로 다음과 같은 속성을 가지고 있다.
-
-- boundingClientRect: 관찰 대상의 사각형 정보를 나타낸다.
-- intersectionRatio: 관찰 대상의 교차한 영역 정보를 나타낸다.
-- intersectionRect: 관찰 대상 요소와 뷰포트의 교차 영역 정보를 나타내는 정보이다.
-- isIntersecting: 관찰 대상 요소가 뷰포트와 교차하는지 여부를 나타내는 부울 값이다.
-- rootBounds: 뷰포트의 경계 사각형 정보를 나타내는 DOMRectReadOnly 객체이다.
-- target: 관찰 대상 요소에 대한 참조이다. 이를 통해 어떤 요소가 이벤트를 발생시키는지 알 수 있다.
-IntersectionObserver 가 가지고 있는 메소드로는 다음이 있다.
-
-- IntersectionObserver.observe() : 타켓에 대한 관찰을 시작한다.
-- IntersectionObserver.unobserve() : 타겟에 대한 관찰을 중지한다.
-- IntersectionObserver.disconnect() : 타겟 요소들에 대한 모든 관찰을 중지한다.
-- IntersectionObserver.takeRecords() : 관찰된 모든 대상에 대한 개체 배열을 반환한다 .
-Intersection Observer API를 잘 이용하면 무한스크롤 뿐만이 아니라 컨텐츠나 이미지의 레이즈 로딩, 스크롤마다 변하는 애니메이션 수행등 다양한 방법으로 활용이 가능하다.
-
-[https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API](https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API)
-
-[https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC%A0%90%EC%9D%84-%EA%B3%81%EB%93%A4%EC%9D%B8-Intersection-Observer-API-%EC%A0%95%EB%A6%AC](https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC%A0%90%EC%9D%84-%EA%B3%81%EB%93%A4%EC%9D%B8-Intersection-Observer-API-%EC%A0%95%EB%A6%AC)
+---
+title: 무한 스크롤 구현하기 (Intersection observer API)
+series: chim-planet
+tags: [frontEnd]
+date: "2023.05.01"
+---
+팀프로젝트를 진행하면서 무한스크롤을 이용해서 게시글들을 보여주기로 했다. 페이지네이션이 아닌 무한 스크롤을 선택한 이유는 모바일 환경 지원이 이유이기도 하다. 무한 스크롤을 만들어 본 적이 없어 어떻게 만들어야 하나 찾아보던 중 세 가지 방법으로 만들 수 있다고 했다. 첫번째는 스크롤 이벤트 헨들러를 이용한 방법이고 두번째는 Debounce 와 Throttle를 이용한 방법 마지막으로 Intersection Observer API를 이용하는 방법이다. 각각의 방법마다 장단점이 존재하지만 나는 Intersection Observer API를 이용해 구현하는 방법을 선택했다. 그 이유와 사용방법에 대해 기술하려 한다.
+
+## Intersection Observer API이란?
+
+Intersection Observer API는 뷰표트와 요소의 교차를 관찰하는 API이다. 이 API를 이용하면 요소가 뷰포트에 들어오거나 나가나는등 이벤트를 감지하고 처리할 수 있게된다. 또한 이 기능은 비동기적으로 실행되어 스크롤 이벤트에서 발생하는 성능 저하 같은 문제없이 사용 할 수 있다.
+
+## 사용방법
+
+```javascript
+
+ let options = {
+ root: null, // 뷰포트 설정
+ rootMargin: '0px', // root가 가진 마진을 나타낸다.
+ threshold: 1.0 //
+ };
+
+ const callback = (entries, observer) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) { // 요소가 관측이 되면 실행된다.
+ // 실행할 코드
+ }
+ });
+ };
+
+ // 인스턴트 생성
+ let observer = new IntersectionObserver(callback, options);
+ // 타겟 요소 관찰 시작
+ observer.observe(target.current);
+
+
+```
+new IntersectionObserver()를 이용해 인스턴스를 생성해준다. callback은 관찰 대상이 보이면 실행되는 함수이다. options은 관찰이 시작되는 상황에 대해 설정할 수 있다. observer.observe()은 관찰 대상을 시작한다는 말이다. 대상 element가 관찰이 되면 위에 있는 callback. 함수가 실행된다. callback은 (entries, observer)를 인수로 가지게 된다. entriess 는 IntersectionObserverEntry의 배열인데 이 배열은 읽기 전영으로 다음과 같은 속성을 가지고 있다.
+
+- boundingClientRect: 관찰 대상의 사각형 정보를 나타낸다.
+- intersectionRatio: 관찰 대상의 교차한 영역 정보를 나타낸다.
+- intersectionRect: 관찰 대상 요소와 뷰포트의 교차 영역 정보를 나타내는 정보이다.
+- isIntersecting: 관찰 대상 요소가 뷰포트와 교차하는지 여부를 나타내는 부울 값이다.
+- rootBounds: 뷰포트의 경계 사각형 정보를 나타내는 DOMRectReadOnly 객체이다.
+- target: 관찰 대상 요소에 대한 참조이다. 이를 통해 어떤 요소가 이벤트를 발생시키는지 알 수 있다.
+IntersectionObserver 가 가지고 있는 메소드로는 다음이 있다.
+
+- IntersectionObserver.observe() : 타켓에 대한 관찰을 시작한다.
+- IntersectionObserver.unobserve() : 타겟에 대한 관찰을 중지한다.
+- IntersectionObserver.disconnect() : 타겟 요소들에 대한 모든 관찰을 중지한다.
+- IntersectionObserver.takeRecords() : 관찰된 모든 대상에 대한 개체 배열을 반환한다 .
+Intersection Observer API를 잘 이용하면 무한스크롤 뿐만이 아니라 컨텐츠나 이미지의 레이즈 로딩, 스크롤마다 변하는 애니메이션 수행등 다양한 방법으로 활용이 가능하다.
+
+[https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API](https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API)
+
+[https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC%A0%90%EC%9D%84-%EA%B3%81%EB%93%A4%EC%9D%B8-Intersection-Observer-API-%EC%A0%95%EB%A6%AC](https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC%A0%90%EC%9D%84-%EA%B3%81%EB%93%A4%EC%9D%B8-Intersection-Observer-API-%EC%A0%95%EB%A6%AC)
diff --git a/src/content/posts/frontEnd/Interface-Interceptor-Handling.md b/src/content/posts/frontEnd/Interface-Interceptor-Handling.md
index 35bd757..fdabf35 100644
--- a/src/content/posts/frontEnd/Interface-Interceptor-Handling.md
+++ b/src/content/posts/frontEnd/Interface-Interceptor-Handling.md
@@ -1,217 +1,217 @@
----
-title: 인터페이스와 인터셉터를 이용한 공통된 에러, 헤더 URL 처리
-tags: [frontEnd]
-date: "2024.10.19"
----
-메이플스토리 API를 활용한 웹 서비스 개발 중 API 키 노출 방지와 중복 코드 최소화를 위해
-Next.js API 라우트와 Axios 인터셉터를 결합한 경험을 공유합니다. 특히 TypeScript의 Generic을
-활용해 타입 안정성을 강화한 과정을 중점적으로 설명드리겠습니다.
-
-## 문제 상황
-클라이언트에서 바로 Nexon API를 호출하게 되면 API KEY가 노출되는 문제와
-API 호출에 헤더 및 URL설정 등이 반복되어 필요한 상황이 있었습니다.
-
-## 해결 방법
-### Next.js API 라우트
-우선 프록시 서버 역할로 API KEY를 보호할 수 있도록 Next.js API 라우트를 이용하기로 했습니다.
-
-**클라이언트 -> Next.js API -> Nexon API 호출**
-
-### Axios 인스턴스 생성, Axios 인터셉터 적용
-Axios 인터셉터를 활용하면 API 호출의 공통 설정을 관리할 수 있어 유지보수성을 높일 수 있습니다
-
-## 구현 방법
-우선 APIKEY를 숨기기 위해 환경설정 파일에 API KEY와 요청을 보낼 Base URL을 등록해줍니다.
-```.env
-NEXT_PUBLIC_MAPLEAPI_KEY="발급받은 API KEY"
-NEXT_PUBLIC_URL=https://open.api.nexon.com/maplestory
-```
-
-저는 클라이언트와 Next.js API 라우트에서 모두 요청을 보내야 하니
-클라이언트와 Next.js API 라우트에 필요한 인터페이스를 각각 생성해줍니다.
-
-```ts
-/* 클라이언트 */
-
-// Base URL
-export const getClientBase = () => process.env.NEXT_PUBLIC_BACKEND_URL
-
-const client = axios.create({
- timeout: 5000,
- baseURL: getClientBase(),
- headers: {
- 'Access-Control-Allow-Origin': '*',
- 'Content-Type': 'application/json',
- },
-})
-```
-```ts
-/* Next.js API 라우트 */
-
-// Base URL
-export const getBackEndBase = () => process.env.NEXT_PUBLIC_URL
-// 메이플 api 키
-export const getMapleKey = () => process.env.NEXT_PUBLIC_MAPLEAPI_KEY
-
-const backend = axios.create({
- timeout: 5000,
- baseURL: getBackEndBase(),
- headers: {
- 'Content-Type': 'application/json',
- 'Access-Control-Allow-Origin': '*',
- 'x-nxopen-api-key': getMapleKey(),
- },
-})
-```
-
-이러면 클라이언트에선 `client` 변수를 이용해 Next.js API 라우트 에선 `backend`변수를 이용해 데이터 요청을 보낼 수 있습니다.
-
-하지만 `GET`, `POST`, `PUT`, `Patch`, `Delete` 요청을 제너틱 타입을 이용해 응답 타입의 강제화와 메소드 통일성을 확보합니다.
-
-```typescript
-export const Get = async (
- url: string,
- config?: AxiosRequestConfig,
-): Promise> => {
- const response = await backend.get(url, config)
- return response
-}
-
-export const Post = async (
- url: string,
- data?: any,
- config?: AxiosRequestConfig,
-): Promise> => {
- const response = await backend.post(url, data, config)
-
- return response
-}
-
-export const Put = async (
- url: string,
- data?: any,
- config?: AxiosRequestConfig,
-): Promise> => {
- const response = await backend.put(url, data, config)
- return response
-}
-
-export const Patch = async (
- url: string,
- data?: any,
- config?: AxiosRequestConfig,
-): Promise> => {
- const response = await backend.patch(url, data, config)
-
- return response
-}
-
-export const Delete = async (
- url: string,
- data?: any,
- config?: AxiosRequestConfig,
-): Promise> => {
- const response = await backend.delete(url, {
- ...config,
- data,
- })
-
- return response
-}
-```
-`backend.interceptors.request.use()`와 `backend.interceptors.response.use()` 를 이용해 `request`와 `response`의 요청을 중간에 처리할 수 있습니다.
-
-저는 `request`요청에는 성공잘 보냈나 확인하기 위해 Next.js API 라우트에는 `console.log`를 이용해 확인했고 클라이언트 `response`요청은 에러를 공통으로 처리하기 위해 Nexon OPEN API 에서 제공하는 에러 코드 케이스테 따라 처리하도록 했습니다.
-```typescript
-// Next.js API 라우트 request
-backend.interceptors.request.use(
- (config: InternalAxiosRequestConfig) => {
- const { method, url } = config
- console.log(`[API - REQUEST] ${method?.toUpperCase()} ${url}`)
- return config
- },
- (error: any) => {
- return Promise.reject(error)
- },
-)
-
-// 클라이언트
-client.interceptors.response.use((res: AxiosResponse): AxiosResponse => {
- // 응답을 받은 후 처리할 작업
- return res
-}, onError)
-
-const onError = (error: AxiosError | Error): Promise => {
- if (axios.isAxiosError(error)) {
- if (error.response) {
- const name = error.response.data.name || '' // 기본값을 빈 문자열로 설정
- switch (name) {
- case 'OPENAPI00001':
- alert('500: 서버 내부 오류')
- break
- case 'OPENAPI00002':
- alert('403: 권한이 없는 경우')
- break
- case 'OPENAPI00003':
- alert('400: 유효하지 않은 식별자')
- break
- case 'OPENAPI00004':
- alert('400: 파라미터 누락 또는 유효하지 않음')
- break
- case 'OPENAPI00005':
- alert('400: 유효하지 않은 API KEY')
- break
- case 'OPENAPI00006':
- alert('400: 유효하지 않은 게임 또는 API PATH')
- break
- case 'OPENAPI00007':
- alert('429: API 호출량 초과')
- break
- case 'OPENAPI00009':
- alert('400: 데이터 준비 중')
- break
- case 'OPENAPI00010':
- alert('400: 게임 점검 중')
- break
- case 'OPENAPI00011':
- alert('503: API 점검 중')
- break
- default:
- alert('알 수 없는 오류')
- }
- }
- }
-
- return Promise.reject(error)
-}
-```
-
-요청을 보낼 때 특정 요청만을 보내는 함수를 만들어 요청을 보내기면 하면 됩니다.
-```ts
-// 캐릭터 정보를 가져오는 함수
-export const getCharInfo = async (
- characterName: string,
-): Promise> => {
- try {
- const characterResponse = await Get<
- ResponseDataType
- >(Paths.character, {
- params: {
- character_name: characterName,
- },
- })
- return characterResponse.data
- } catch (error) {
- console.error(error)
- throw new Error('Failed to get Char')
- }
-}
-```
-
-### 마치며
-Axios 인터셉터를 활용해 공통 에러 처리 및 로깅을 적용하고 각 HTTP요청을 함수화 해 타입 안정성을 확보하는 과정에서 많은 시행착오를 겪었습니다.
-특히 타입 안정성을 강화하는데 있어서 TypeScript를 활용한 명시적인 타입 설계와 안전한 코드 작성하는 방법을 이해할 수 있었습니다.
-
-또 예외 처리를 구현하면서 다양한 케이스의 에러를 고려해야 했고 이를 통해 더 견고한 API요청 방식을 고민할 수 있었습니다.
-
+---
+title: 인터페이스와 인터셉터를 이용한 공통된 에러, 헤더 URL 처리
+tags: [frontEnd]
+date: "2024.10.19"
+---
+메이플스토리 API를 활용한 웹 서비스 개발 중 API 키 노출 방지와 중복 코드 최소화를 위해
+Next.js API 라우트와 Axios 인터셉터를 결합한 경험을 공유합니다. 특히 TypeScript의 Generic을
+활용해 타입 안정성을 강화한 과정을 중점적으로 설명드리겠습니다.
+
+## 문제 상황
+클라이언트에서 바로 Nexon API를 호출하게 되면 API KEY가 노출되는 문제와
+API 호출에 헤더 및 URL설정 등이 반복되어 필요한 상황이 있었습니다.
+
+## 해결 방법
+### Next.js API 라우트
+우선 프록시 서버 역할로 API KEY를 보호할 수 있도록 Next.js API 라우트를 이용하기로 했습니다.
+
+**클라이언트 -> Next.js API -> Nexon API 호출**
+
+### Axios 인스턴스 생성, Axios 인터셉터 적용
+Axios 인터셉터를 활용하면 API 호출의 공통 설정을 관리할 수 있어 유지보수성을 높일 수 있습니다
+
+## 구현 방법
+우선 APIKEY를 숨기기 위해 환경설정 파일에 API KEY와 요청을 보낼 Base URL을 등록해줍니다.
+```.env
+NEXT_PUBLIC_MAPLEAPI_KEY="발급받은 API KEY"
+NEXT_PUBLIC_URL=https://open.api.nexon.com/maplestory
+```
+
+저는 클라이언트와 Next.js API 라우트에서 모두 요청을 보내야 하니
+클라이언트와 Next.js API 라우트에 필요한 인터페이스를 각각 생성해줍니다.
+
+```ts
+/* 클라이언트 */
+
+// Base URL
+export const getClientBase = () => process.env.NEXT_PUBLIC_BACKEND_URL
+
+const client = axios.create({
+ timeout: 5000,
+ baseURL: getClientBase(),
+ headers: {
+ 'Access-Control-Allow-Origin': '*',
+ 'Content-Type': 'application/json',
+ },
+})
+```
+```ts
+/* Next.js API 라우트 */
+
+// Base URL
+export const getBackEndBase = () => process.env.NEXT_PUBLIC_URL
+// 메이플 api 키
+export const getMapleKey = () => process.env.NEXT_PUBLIC_MAPLEAPI_KEY
+
+const backend = axios.create({
+ timeout: 5000,
+ baseURL: getBackEndBase(),
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Access-Control-Allow-Origin': '*',
+ 'x-nxopen-api-key': getMapleKey(),
+ },
+})
+```
+
+이러면 클라이언트에선 `client` 변수를 이용해 Next.js API 라우트 에선 `backend`변수를 이용해 데이터 요청을 보낼 수 있습니다.
+
+하지만 `GET`, `POST`, `PUT`, `Patch`, `Delete` 요청을 제너틱 타입을 이용해 응답 타입의 강제화와 메소드 통일성을 확보합니다.
+
+```typescript
+export const Get = async (
+ url: string,
+ config?: AxiosRequestConfig,
+): Promise> => {
+ const response = await backend.get(url, config)
+ return response
+}
+
+export const Post = async (
+ url: string,
+ data?: any,
+ config?: AxiosRequestConfig,
+): Promise> => {
+ const response = await backend.post(url, data, config)
+
+ return response
+}
+
+export const Put = async (
+ url: string,
+ data?: any,
+ config?: AxiosRequestConfig,
+): Promise> => {
+ const response = await backend.put(url, data, config)
+ return response
+}
+
+export const Patch = async (
+ url: string,
+ data?: any,
+ config?: AxiosRequestConfig,
+): Promise> => {
+ const response = await backend.patch(url, data, config)
+
+ return response
+}
+
+export const Delete = async (
+ url: string,
+ data?: any,
+ config?: AxiosRequestConfig,
+): Promise> => {
+ const response = await backend.delete(url, {
+ ...config,
+ data,
+ })
+
+ return response
+}
+```
+`backend.interceptors.request.use()`와 `backend.interceptors.response.use()` 를 이용해 `request`와 `response`의 요청을 중간에 처리할 수 있습니다.
+
+저는 `request`요청에는 성공잘 보냈나 확인하기 위해 Next.js API 라우트에는 `console.log`를 이용해 확인했고 클라이언트 `response`요청은 에러를 공통으로 처리하기 위해 Nexon OPEN API 에서 제공하는 에러 코드 케이스테 따라 처리하도록 했습니다.
+```typescript
+// Next.js API 라우트 request
+backend.interceptors.request.use(
+ (config: InternalAxiosRequestConfig) => {
+ const { method, url } = config
+ console.log(`[API - REQUEST] ${method?.toUpperCase()} ${url}`)
+ return config
+ },
+ (error: any) => {
+ return Promise.reject(error)
+ },
+)
+
+// 클라이언트
+client.interceptors.response.use((res: AxiosResponse): AxiosResponse => {
+ // 응답을 받은 후 처리할 작업
+ return res
+}, onError)
+
+const onError = (error: AxiosError | Error): Promise => {
+ if (axios.isAxiosError(error)) {
+ if (error.response) {
+ const name = error.response.data.name || '' // 기본값을 빈 문자열로 설정
+ switch (name) {
+ case 'OPENAPI00001':
+ alert('500: 서버 내부 오류')
+ break
+ case 'OPENAPI00002':
+ alert('403: 권한이 없는 경우')
+ break
+ case 'OPENAPI00003':
+ alert('400: 유효하지 않은 식별자')
+ break
+ case 'OPENAPI00004':
+ alert('400: 파라미터 누락 또는 유효하지 않음')
+ break
+ case 'OPENAPI00005':
+ alert('400: 유효하지 않은 API KEY')
+ break
+ case 'OPENAPI00006':
+ alert('400: 유효하지 않은 게임 또는 API PATH')
+ break
+ case 'OPENAPI00007':
+ alert('429: API 호출량 초과')
+ break
+ case 'OPENAPI00009':
+ alert('400: 데이터 준비 중')
+ break
+ case 'OPENAPI00010':
+ alert('400: 게임 점검 중')
+ break
+ case 'OPENAPI00011':
+ alert('503: API 점검 중')
+ break
+ default:
+ alert('알 수 없는 오류')
+ }
+ }
+ }
+
+ return Promise.reject(error)
+}
+```
+
+요청을 보낼 때 특정 요청만을 보내는 함수를 만들어 요청을 보내기면 하면 됩니다.
+```ts
+// 캐릭터 정보를 가져오는 함수
+export const getCharInfo = async (
+ characterName: string,
+): Promise> => {
+ try {
+ const characterResponse = await Get<
+ ResponseDataType
+ >(Paths.character, {
+ params: {
+ character_name: characterName,
+ },
+ })
+ return characterResponse.data
+ } catch (error) {
+ console.error(error)
+ throw new Error('Failed to get Char')
+ }
+}
+```
+
+### 마치며
+Axios 인터셉터를 활용해 공통 에러 처리 및 로깅을 적용하고 각 HTTP요청을 함수화 해 타입 안정성을 확보하는 과정에서 많은 시행착오를 겪었습니다.
+특히 타입 안정성을 강화하는데 있어서 TypeScript를 활용한 명시적인 타입 설계와 안전한 코드 작성하는 방법을 이해할 수 있었습니다.
+
+또 예외 처리를 구현하면서 다양한 케이스의 에러를 고려해야 했고 이를 통해 더 견고한 API요청 방식을 고민할 수 있었습니다.
+
[axios 문서](https://axios-http.com/docs/intro)
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/Maple-Helper-SEO-Improvement.md b/src/content/posts/frontEnd/Maple-Helper-SEO-Improvement.md
index 045564c..5137fe1 100644
--- a/src/content/posts/frontEnd/Maple-Helper-SEO-Improvement.md
+++ b/src/content/posts/frontEnd/Maple-Helper-SEO-Improvement.md
@@ -1,74 +1,74 @@
----
-title: 메이플 헬퍼 SEO 개선하기
-tags: [frontEnd, 메이플 헬퍼]
-series: 메이플 헬퍼
-date: "2024.12.27"
----
-서비스를 배포한 이후 검색 결과 상단에 노출되지 않았지만 SEO를 개선해 노출도를 향상시켰던 내용을 기록하려 합니다.
-
-## SEO 개선 3가지 방법
-### 메타태그 최적화
-적절한 메타태그 사용은 검색 엔진과 사용자에게 페이지의 핵심 정보를 전달할 수 있는
-중요한 포인트 입니다.
-
-저의 경우는 `HeadMeta`컴포넌트를 만들어 활용했습니다.
-
-```js
-const HeadMeta = ({ title, description, Keywords }: HeadMetaProps) => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- {title || Meta.title}
-
- )
-}
-```
-
-
-### 구글 서치 콘솔 등록
-구글 서치 콘솔은 웹사이트의 검색 노출 성능을 분석하고 관리하는 무료 도구입니다.
-
-구글 서치 콘솔을 이용하면 어떤 키워드로 검색에 노출되는지 확인할 수 있고 직접 색인 요청을 보내
-특정 페이지가 구글의 색인에 반영되도록 할 수 있습니다.
-
-### 사이트맵 제출
-사이트맵은 검색엔진들이 정보를 더 효율적으로 크롤링할 수 있도록 돕는 역할을 합니다.
-
-Next.js를 이용하는 경우 `getServerSideProps`를 사용해 필요한 URL데이터를 불러와 XML 컨텐츠를 생성할 수 있지만
-저는 next-sitemap 라이브러리를 이용해 설정 파일만 작성하고 빌드 시 자동으로 정적 사이트맵과 robots.txt를 생성했습니다.
-
-#### 설정 파일
-```js
-/** @type {import('next-sitemap').IConfig} */
-module.exports = {
- siteUrl: 'https://www.maple-helper.com/', // 배포된 사이트의 URL로 변경
- generateRobotsTxt: true, // robots.txt 생성 여부
- // 추가 설정 가능
-}
-
-```
-
-## 개선 후 변화
-
-
-
-개선을 한 후에 유의미한 검색어 노출이 된 점을 확인할 수 있었습니다.
-
-검색엔진 최적화에 대한 자세한 정보를 알고 싶으시면 [여기](https://developers.google.com/search/docs?hl=ko)를
+---
+title: 메이플 헬퍼 SEO 개선하기
+tags: [frontEnd, 메이플 헬퍼]
+series: maple-helper
+date: "2024.12.27"
+---
+서비스를 배포한 이후 검색 결과 상단에 노출되지 않았지만 SEO를 개선해 노출도를 향상시켰던 내용을 기록하려 합니다.
+
+## SEO 개선 3가지 방법
+### 메타태그 최적화
+적절한 메타태그 사용은 검색 엔진과 사용자에게 페이지의 핵심 정보를 전달할 수 있는
+중요한 포인트 입니다.
+
+저의 경우는 `HeadMeta`컴포넌트를 만들어 활용했습니다.
+
+```js
+const HeadMeta = ({ title, description, Keywords }: HeadMetaProps) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {title || Meta.title}
+
+ )
+}
+```
+
+
+### 구글 서치 콘솔 등록
+구글 서치 콘솔은 웹사이트의 검색 노출 성능을 분석하고 관리하는 무료 도구입니다.
+
+구글 서치 콘솔을 이용하면 어떤 키워드로 검색에 노출되는지 확인할 수 있고 직접 색인 요청을 보내
+특정 페이지가 구글의 색인에 반영되도록 할 수 있습니다.
+
+### 사이트맵 제출
+사이트맵은 검색엔진들이 정보를 더 효율적으로 크롤링할 수 있도록 돕는 역할을 합니다.
+
+Next.js를 이용하는 경우 `getServerSideProps`를 사용해 필요한 URL데이터를 불러와 XML 컨텐츠를 생성할 수 있지만
+저는 next-sitemap 라이브러리를 이용해 설정 파일만 작성하고 빌드 시 자동으로 정적 사이트맵과 robots.txt를 생성했습니다.
+
+#### 설정 파일
+```js
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+ siteUrl: 'https://www.maple-helper.com/', // 배포된 사이트의 URL로 변경
+ generateRobotsTxt: true, // robots.txt 생성 여부
+ // 추가 설정 가능
+}
+
+```
+
+## 개선 후 변화
+
+
+
+개선을 한 후에 유의미한 검색어 노출이 된 점을 확인할 수 있었습니다.
+
+검색엔진 최적화에 대한 자세한 정보를 알고 싶으시면 [여기](https://developers.google.com/search/docs?hl=ko)를
참고하시면 됩니다.
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/PerformanceTest.md b/src/content/posts/frontEnd/PerformanceTest.md
index 91dcf12..e93750f 100644
--- a/src/content/posts/frontEnd/PerformanceTest.md
+++ b/src/content/posts/frontEnd/PerformanceTest.md
@@ -1,35 +1,35 @@
----
-title: 프론트엔드 성능 측정
-tags: [frontEnd]
-date: "2024.03.05"
----
-## 웹 성능이란
-
-웹 성능은 페이지의 로딩 시간, 렌더링 속도, 사용자 경험등을 나타내는 말이다. 따라서 웹 성능 측정은 아주 중요한 과정이며 오늘은 웹 성능 측정 도구중 하나인 Lighthouse에 대해서 기록하도록 하겠다.
-
-##
-
-[https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=ko#metrics](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=ko#metrics)
-
-Lighthouse는 구글에서 개발한 웹 페이지 성능 측정 도구로 크롬 브라우저에 내장되어 있어 개발자도구에서 Lighthouse 탭을 이용해 사용할 수 있다.
-
-## 성능 지표
-
-
-Lighthouse는 다음과 같은 지표를 보여준다 1. Performance 웹 페이지의 로딩속도를 측정해 지표로 보여준다. 2. Accessibility 웹 사이트의 접근성을 얼마나 잘 지켰나 검사한다. 3. Best Practices 웹 페이지가 웹 표준을 잘 지키고 있는지 검사한다. 4. SEO 웹 페이지가 검색 엔진에 대해 최적화가 잘 되었는지를 검사한다. 5. Progressive Web App 웹 페이지가 웹과 앱이 유사한 사용자 경험을 제공하는지 검사한다.
-
-## 진단
-
-
-
-1. First Contentful Paint는 브라우저가 첫 번째 DOM 컨텐츠를 렌더링하는데 걸리는 시간을 나타낸다. 2. Largest Contentful Paint는 뷰포트에서 가장 큰 컨텐츠 요소가 화면에 렌더링 될 때 걸리는 시간을 타나낸다. 3. Total Blocking Time는 웹 페이지 로딩이 차단된 시간을 나타낸다 주로 과정에서 CSS 및 JS파일의 다운로드 및 파싱, 렌더링을 차단하는 JavaScript코드의 실행이 원인이 된다. 4. Cumulative Layout Shift는 사용자가 불편함을 유발 할 수 있는 요소를 측정하는 지표이다. 5. Speed Index는 웹 페이지를 불러올 때 컨텐츠가 시각적으로 표시될 때 까지 걸리는 시간을 나타낸다.
-
-## 성능 최적화 기대 효과
-
-이렇게 Lighthouse를 이용해 성능 최적화를 진행하면 보다 빠른 웹 서비스를 제공할 수 있고 이 점은 유저 이탈률을 줄일 수 있다. 실제로 유저들은 3초 이내에 페이지가 로딩되지 않으면 뒤로가기 버튼을 누른다는 구글의 조사 자료가 있다. 또한 빠른 페이지 로딩으로 서버 및 네트워크 리소스 낭비를 줄여 비용을 절감 할 수 있다.
-
-## 추가로
-
-그동안 나는 개발에만 관심이 있었지 성능 최적화 같이 비지니스나 서비스 운영 쪽으로는 생각하지 못 했었다. 하지만 여러 구직 활동을 진행하면서 서비스 최적화에 대해 알게 되었고 직접 공부해보니 개발이외에도 고려해야 할 부분이 참 많다는걸 느꼈다.
-
-[https://devocean.sk.com/blog/techBoardDetail.do?ID=165395&boardType=techBlog](https://devocean.sk.com/blog/techBoardDetail.do?ID=165395&boardType=techBlog)
+---
+title: 프론트엔드 성능 측정
+tags: [frontEnd]
+date: "2024.03.05"
+---
+## 웹 성능이란
+
+웹 성능은 페이지의 로딩 시간, 렌더링 속도, 사용자 경험등을 나타내는 말이다. 따라서 웹 성능 측정은 아주 중요한 과정이며 오늘은 웹 성능 측정 도구중 하나인 Lighthouse에 대해서 기록하도록 하겠다.
+
+##
+
+[https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=ko#metrics](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=ko#metrics)
+
+Lighthouse는 구글에서 개발한 웹 페이지 성능 측정 도구로 크롬 브라우저에 내장되어 있어 개발자도구에서 Lighthouse 탭을 이용해 사용할 수 있다.
+
+## 성능 지표
+
+
+Lighthouse는 다음과 같은 지표를 보여준다 1. Performance 웹 페이지의 로딩속도를 측정해 지표로 보여준다. 2. Accessibility 웹 사이트의 접근성을 얼마나 잘 지켰나 검사한다. 3. Best Practices 웹 페이지가 웹 표준을 잘 지키고 있는지 검사한다. 4. SEO 웹 페이지가 검색 엔진에 대해 최적화가 잘 되었는지를 검사한다. 5. Progressive Web App 웹 페이지가 웹과 앱이 유사한 사용자 경험을 제공하는지 검사한다.
+
+## 진단
+
+
+
+1. First Contentful Paint는 브라우저가 첫 번째 DOM 컨텐츠를 렌더링하는데 걸리는 시간을 나타낸다. 2. Largest Contentful Paint는 뷰포트에서 가장 큰 컨텐츠 요소가 화면에 렌더링 될 때 걸리는 시간을 타나낸다. 3. Total Blocking Time는 웹 페이지 로딩이 차단된 시간을 나타낸다 주로 과정에서 CSS 및 JS파일의 다운로드 및 파싱, 렌더링을 차단하는 JavaScript코드의 실행이 원인이 된다. 4. Cumulative Layout Shift는 사용자가 불편함을 유발 할 수 있는 요소를 측정하는 지표이다. 5. Speed Index는 웹 페이지를 불러올 때 컨텐츠가 시각적으로 표시될 때 까지 걸리는 시간을 나타낸다.
+
+## 성능 최적화 기대 효과
+
+이렇게 Lighthouse를 이용해 성능 최적화를 진행하면 보다 빠른 웹 서비스를 제공할 수 있고 이 점은 유저 이탈률을 줄일 수 있다. 실제로 유저들은 3초 이내에 페이지가 로딩되지 않으면 뒤로가기 버튼을 누른다는 구글의 조사 자료가 있다. 또한 빠른 페이지 로딩으로 서버 및 네트워크 리소스 낭비를 줄여 비용을 절감 할 수 있다.
+
+## 추가로
+
+그동안 나는 개발에만 관심이 있었지 성능 최적화 같이 비지니스나 서비스 운영 쪽으로는 생각하지 못 했었다. 하지만 여러 구직 활동을 진행하면서 서비스 최적화에 대해 알게 되었고 직접 공부해보니 개발이외에도 고려해야 할 부분이 참 많다는걸 느꼈다.
+
+[https://devocean.sk.com/blog/techBoardDetail.do?ID=165395&boardType=techBlog](https://devocean.sk.com/blog/techBoardDetail.do?ID=165395&boardType=techBlog)
diff --git a/src/content/posts/frontEnd/ReChartNPM.md b/src/content/posts/frontEnd/ReChartNPM.md
index f975bd1..3d86347 100644
--- a/src/content/posts/frontEnd/ReChartNPM.md
+++ b/src/content/posts/frontEnd/ReChartNPM.md
@@ -1,97 +1,97 @@
----
-title: 데이터 시각화 차트 라이브러리 사용하기
-tags: [froentEnd]
-date: "2024.05.25"
----
-라이브 채팅을 배포한 후 이를 관리하기 위한 백오피스를 만들고 있는중 운영중인 다양한 서비스의 시각화 데이터를 얻고 싶어 차트 라이브러리에 대해 알아보았습니다. 대표적인 차트 라이브러리로는 Chart.js, D3.js, Recharts등이 있지만 전 React와 호환성이 좋은 Recharts라이브러리를 사용하기로 했습니다.
-
-## Recharts
-
-Recharts는 복잡한 설정 없이 React 컴포넌트로서 쉽게 차트를 만들 수 있고 React의 상태 관리와 잘 알맞는 다는 장점이 있습니다. 또한 공식 문서의 친절한 가이드와 예제코드를 보며 동작 시켜볼 수 있습니다.
-
-## Recharts 설치 및 사용법
-
- npm이나 yarn을 이용해 설치해줍니다.
-
-```javascript
-npm install recharts
-
-yarn add recharts
-
-```
-Recharts는 Examples에서 다양한 차트를 선택해 예제 코드를 수정하며 사용해볼 수 있습니다.
-
-
-아래의 코드는 SimpleLineChart를 임의로 커스텀한 코드입니다. Line 컴포넌트를 이용해 별도의 선을 추가했고 CartesianGrid 컴포넌트를 제거해 배경에 보이는 표시선을 제거 했습니다. 컴포넌트가 아주 직관적이여서 학습하는데 어렵지 않고 API가이드를 보면 컴포넌트의 여러 속성이 친절하게 설명되어 있습니다.
-
-```javascript
-import React from 'react';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
-
-const data = [
- {
- name: '1일차',
- "경기도": 4000,
- "강원도": 2400,
- "충청도": 1700,
- },
- {
- name: '2일차',
- "경기도": 3000,
- "강원도": 1398,
- "충청도": 2210,
- },
- {
- name: '3일차',
- "경기도": 3000,
- "강원도": 498,
- "충청도": 2210,
- },
- {
- name: '4일차',
- "경기도": 300,
- "강원도": 1398,
- "충청도": 2310,
- },
-];
-
-const Example = () => {
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- );
-
-}
-
-export default Example
-
-```
-
-아래의 사진처럼 차트위에 마우스를 호버했을때 보여지는 툴팁이나 다른 스타일도 사용자가 원하는대로 커스텀 할 수 있고 API가이드를 보면 아주 친철하게 설명되어 있어 커스텀을 하는데 있어 어려움이 적었습니다.
-
-
-
-
-
+---
+title: 데이터 시각화 차트 라이브러리 사용하기
+tags: [froentEnd]
+date: "2024.05.25"
+---
+라이브 채팅을 배포한 후 이를 관리하기 위한 백오피스를 만들고 있는중 운영중인 다양한 서비스의 시각화 데이터를 얻고 싶어 차트 라이브러리에 대해 알아보았습니다. 대표적인 차트 라이브러리로는 Chart.js, D3.js, Recharts등이 있지만 전 React와 호환성이 좋은 Recharts라이브러리를 사용하기로 했습니다.
+
+## Recharts
+
+Recharts는 복잡한 설정 없이 React 컴포넌트로서 쉽게 차트를 만들 수 있고 React의 상태 관리와 잘 알맞는 다는 장점이 있습니다. 또한 공식 문서의 친절한 가이드와 예제코드를 보며 동작 시켜볼 수 있습니다.
+
+## Recharts 설치 및 사용법
+
+ npm이나 yarn을 이용해 설치해줍니다.
+
+```javascript
+npm install recharts
+
+yarn add recharts
+
+```
+Recharts는 Examples에서 다양한 차트를 선택해 예제 코드를 수정하며 사용해볼 수 있습니다.
+
+
+아래의 코드는 SimpleLineChart를 임의로 커스텀한 코드입니다. Line 컴포넌트를 이용해 별도의 선을 추가했고 CartesianGrid 컴포넌트를 제거해 배경에 보이는 표시선을 제거 했습니다. 컴포넌트가 아주 직관적이여서 학습하는데 어렵지 않고 API가이드를 보면 컴포넌트의 여러 속성이 친절하게 설명되어 있습니다.
+
+```javascript
+import React from 'react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+
+const data = [
+ {
+ name: '1일차',
+ "경기도": 4000,
+ "강원도": 2400,
+ "충청도": 1700,
+ },
+ {
+ name: '2일차',
+ "경기도": 3000,
+ "강원도": 1398,
+ "충청도": 2210,
+ },
+ {
+ name: '3일차',
+ "경기도": 3000,
+ "강원도": 498,
+ "충청도": 2210,
+ },
+ {
+ name: '4일차',
+ "경기도": 300,
+ "강원도": 1398,
+ "충청도": 2310,
+ },
+];
+
+const Example = () => {
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+}
+
+export default Example
+
+```
+
+아래의 사진처럼 차트위에 마우스를 호버했을때 보여지는 툴팁이나 다른 스타일도 사용자가 원하는대로 커스텀 할 수 있고 API가이드를 보면 아주 친철하게 설명되어 있어 커스텀을 하는데 있어 어려움이 적었습니다.
+
+
+
+
+
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/RecoilLearn.md b/src/content/posts/frontEnd/RecoilLearn.md
index 298a89f..fd40cf8 100644
--- a/src/content/posts/frontEnd/RecoilLearn.md
+++ b/src/content/posts/frontEnd/RecoilLearn.md
@@ -1,83 +1,83 @@
----
-title: Recoil에 대해 알아보자
-tags: [frontEnd]
-date: "2023.03.20"
----
-개발을 하다보면 전역 상태 관리라는 말을 한번쯤은 들어봤을거다. 프로젝트의 규모가 커져감에 따라 수많은 state와 props가 점점 복잡해져 이러한 상태를 관리해주는 라이브러리들이 생겼다. 그 후 react에서 Context API라는게 나오긴 했지만 여전히 상태관리 라이브러리를 사용 하고 있다.
-
-## Recoil란?
-
-Recoil은 hook을 사용하고 있는 사람이라면 익숙하게 사용 할 수 있는 장점이 있다.
-
-## Recoil 사용방법
-
-Recoil에는 Atom이라는 가장 작은 단위의 상태인데 state라고 생각하면 된다. Atom이 업데이트 되면 각 구독 구성 요소는 다시 렌더링이 된다.
-
-```javascript
-
- const fontSizeState = atom({
- key: 'fontSizeState',
- default: 14,
- });
-
-
-```
-Atom을 읽기 위해서는 useRecoilState이라는 훅이 필요합니다. 사용방법은 React의 useState와 비슷하다.
-
-```javascript
-
- function FontButton() {
- const [fontSize, setFontSize] = useRecoilState(fontSizeState);
- return (
-
- );
- };
-
-
-```
-selector은 atom의 값을 변환하고 결합하여 사용할 수 있는데 간단하게 풀어 말해서 selector이 가져다 쓴 atom의 값이 변하지 않고 새로운 형태의 값을 반환한다. 위에 있는 useRecoilState와의 차이점은 atom의 값이 변하지 않는 다는점이 차이점이다.
-
-```javascript
-
-const fontSizeLabelState = selector({
- key: 'fontSizeLabelState',
- get: ({get}) => {
- const fontSize = get(fontSizeState);
- const unit = 'px';
-
- return fontSizeunit;
- },
- });
-
-
-```
-useRecoilValue는 atom의 값을 읽기만 가능한 훅이다. 상태를 업데이트 할 필요가 없을때 사용하는 훅이다.
-
-```javascript
-
- function FontButton() {
- const [fontSize, setFontSize] = useRecoilState(fontSizeState);
- const fontSizeLabel = useRecoilValue(fontSizeLabelState);
-
- return (
- <>
- Current font size: {fontSizeLabel}
-
-
-
- );
- };
-
-
-```
-## 마무리
-
-Recoil를 사용하면서 느낀점은 다른 상태관리 라이브러리에 비해서 간단하게 전역상태관리를 할 수 있다는점이 매우 매력적으로 느껴졌다.
-
-[https://recoiljs.org/](https://recoiljs.org/)
-
-[https://ui.toast.com/weekly-pick/ko_20200616](https://ui.toast.com/weekly-pick/ko_20200616)
+---
+title: Recoil에 대해 알아보자
+tags: [frontEnd]
+date: "2023.03.20"
+---
+개발을 하다보면 전역 상태 관리라는 말을 한번쯤은 들어봤을거다. 프로젝트의 규모가 커져감에 따라 수많은 state와 props가 점점 복잡해져 이러한 상태를 관리해주는 라이브러리들이 생겼다. 그 후 react에서 Context API라는게 나오긴 했지만 여전히 상태관리 라이브러리를 사용 하고 있다.
+
+## Recoil란?
+
+Recoil은 hook을 사용하고 있는 사람이라면 익숙하게 사용 할 수 있는 장점이 있다.
+
+## Recoil 사용방법
+
+Recoil에는 Atom이라는 가장 작은 단위의 상태인데 state라고 생각하면 된다. Atom이 업데이트 되면 각 구독 구성 요소는 다시 렌더링이 된다.
+
+```javascript
+
+ const fontSizeState = atom({
+ key: 'fontSizeState',
+ default: 14,
+ });
+
+
+```
+Atom을 읽기 위해서는 useRecoilState이라는 훅이 필요합니다. 사용방법은 React의 useState와 비슷하다.
+
+```javascript
+
+ function FontButton() {
+ const [fontSize, setFontSize] = useRecoilState(fontSizeState);
+ return (
+
+ );
+ };
+
+
+```
+selector은 atom의 값을 변환하고 결합하여 사용할 수 있는데 간단하게 풀어 말해서 selector이 가져다 쓴 atom의 값이 변하지 않고 새로운 형태의 값을 반환한다. 위에 있는 useRecoilState와의 차이점은 atom의 값이 변하지 않는 다는점이 차이점이다.
+
+```javascript
+
+const fontSizeLabelState = selector({
+ key: 'fontSizeLabelState',
+ get: ({get}) => {
+ const fontSize = get(fontSizeState);
+ const unit = 'px';
+
+ return fontSizeunit;
+ },
+ });
+
+
+```
+useRecoilValue는 atom의 값을 읽기만 가능한 훅이다. 상태를 업데이트 할 필요가 없을때 사용하는 훅이다.
+
+```javascript
+
+ function FontButton() {
+ const [fontSize, setFontSize] = useRecoilState(fontSizeState);
+ const fontSizeLabel = useRecoilValue(fontSizeLabelState);
+
+ return (
+ <>
+ Current font size: {fontSizeLabel}
+
+
+
+ );
+ };
+
+
+```
+## 마무리
+
+Recoil를 사용하면서 느낀점은 다른 상태관리 라이브러리에 비해서 간단하게 전역상태관리를 할 수 있다는점이 매우 매력적으로 느껴졌다.
+
+[https://recoiljs.org/](https://recoiljs.org/)
+
+[https://ui.toast.com/weekly-pick/ko_20200616](https://ui.toast.com/weekly-pick/ko_20200616)
diff --git a/src/content/posts/frontEnd/Router404.md b/src/content/posts/frontEnd/Router404.md
index 98a4b4b..c436b6d 100644
--- a/src/content/posts/frontEnd/Router404.md
+++ b/src/content/posts/frontEnd/Router404.md
@@ -1,41 +1,42 @@
----
-title: React-router 404 not found
-tags: [frontEnd]
-date: "2022.11.10"
----
-## 문제발생
-
-블로그에 댓글 기능을 추가하고 싶어 Giscus을 알아보고 바로 블로그에 적용을 한 후 잘 동작하나 확인을 하던 와중 갑자기 404NotFound가 떠버리는 상황이 발생했다.
-
-## 이유
-
-우선 깃허브 페이지는 SPA를 지원하지 않는다. 하지만 나는 React에서 SPA를 구현하기 위해 React Router를 사용했고 깃허브 페이지는 ( https://spde3289.github.io/posts ) 와 같은 새로운 경로의 URL을 인식하지 못 하고 새로고침시에 404를 반환하는 것 이다.
-
-## 해결방법
-
-## HashRouter
-
-일단 HashRouter 를 사용하는 방법이 있다. BrowserRourer를 HashRouter로 변경을 해주면 될 정도로 간단한 방법인데 단점으로는 못생긴 url과 검색 엔진 최적화(SEO)가 안 된 다는 것 이다.
-
-
-이와 같이 사용방법은 아주 간단한데 공식문서에서도 나와 있듯이 추천하는 방법은 아니다.
-
-
-
-[https://reactrouter.com/en/main/router-components/hash-router](https://reactrouter.com/en/main/router-components/hash-router)
-
-## index.html 리다이렉션 - 깃허브
-
-
-
-[https://github.com/sujinleeme/spa-github-pages-ko](https://github.com/sujinleeme/spa-github-pages-ko)
-
-이 방법은 위에 있는 방법보다는 나은 방법이다. 우선 퍼플릭 폴더에 404.html파일을 만든 후에
-
-
-이 코드를 작성해주면 된다. 그리고 index.html파일에서 아래와 같은 코드를 작성해주면 된다.
-
-
-## 마치며
-
-처음 이 문제가 발생하고나서 해결까지 상당한 시간이 걸렸는데 막상 해결하고나니 어려운문제가 아니였다고 생각이 든다. 내가 이 문제를 어렵다고 생각한 이유는 지금까지 개발하면서 외부적인 요인으로 문제가 생긴적은 처음이라 해결 방향을 잘 못잡은게 아닌가라는 생각이 든다. 구글링을 하며 여러 해결방법들을 프로젝트에 적용을 해보기도 하고 발생한 문제를 여러 단계로 나눠 해결하고자도 해보았지만 가장 중요한건 문제에 대한 타인에게 설명 할 수 있을 정도의 이해와 관련 API 참조문서를 찾아보고 연역적인 사고를 통해 추론해내는 방법이 중요하다 생각이 들었다. 나는 앞으로도 많은 문제들을 마주하게 될 것 이고 그때마다 해결방법이 나올 때 까지 구글링을 반복하는 것 은 비효율적일뿐더러 성장에 있어서도 안 좋은 방향이다. 이 문제의 가장 큰 성과는 문제를 해결함이 아니라 앞으로 내가 어떤 방법으로 문제를 해결해 나가면 될지를 배웠다고 생각이 든다.
+---
+title: React-router 404 not found
+series: blog
+tags: [frontEnd]
+date: "2022.11.10"
+---
+## 문제발생
+
+블로그에 댓글 기능을 추가하고 싶어 Giscus을 알아보고 바로 블로그에 적용을 한 후 잘 동작하나 확인을 하던 와중 갑자기 404NotFound가 떠버리는 상황이 발생했다.
+
+## 이유
+
+우선 깃허브 페이지는 SPA를 지원하지 않는다. 하지만 나는 React에서 SPA를 구현하기 위해 React Router를 사용했고 깃허브 페이지는 ( https://spde3289.github.io/posts ) 와 같은 새로운 경로의 URL을 인식하지 못 하고 새로고침시에 404를 반환하는 것 이다.
+
+## 해결방법
+
+## HashRouter
+
+일단 HashRouter 를 사용하는 방법이 있다. BrowserRourer를 HashRouter로 변경을 해주면 될 정도로 간단한 방법인데 단점으로는 못생긴 url과 검색 엔진 최적화(SEO)가 안 된 다는 것 이다.
+
+
+이와 같이 사용방법은 아주 간단한데 공식문서에서도 나와 있듯이 추천하는 방법은 아니다.
+
+
+
+[https://reactrouter.com/en/main/router-components/hash-router](https://reactrouter.com/en/main/router-components/hash-router)
+
+## index.html 리다이렉션 - 깃허브
+
+
+
+[https://github.com/sujinleeme/spa-github-pages-ko](https://github.com/sujinleeme/spa-github-pages-ko)
+
+이 방법은 위에 있는 방법보다는 나은 방법이다. 우선 퍼플릭 폴더에 404.html파일을 만든 후에
+
+
+이 코드를 작성해주면 된다. 그리고 index.html파일에서 아래와 같은 코드를 작성해주면 된다.
+
+
+## 마치며
+
+처음 이 문제가 발생하고나서 해결까지 상당한 시간이 걸렸는데 막상 해결하고나니 어려운문제가 아니였다고 생각이 든다. 내가 이 문제를 어렵다고 생각한 이유는 지금까지 개발하면서 외부적인 요인으로 문제가 생긴적은 처음이라 해결 방향을 잘 못잡은게 아닌가라는 생각이 든다. 구글링을 하며 여러 해결방법들을 프로젝트에 적용을 해보기도 하고 발생한 문제를 여러 단계로 나눠 해결하고자도 해보았지만 가장 중요한건 문제에 대한 타인에게 설명 할 수 있을 정도의 이해와 관련 API 참조문서를 찾아보고 연역적인 사고를 통해 추론해내는 방법이 중요하다 생각이 들었다. 나는 앞으로도 많은 문제들을 마주하게 될 것 이고 그때마다 해결방법이 나올 때 까지 구글링을 반복하는 것 은 비효율적일뿐더러 성장에 있어서도 안 좋은 방향이다. 이 문제의 가장 큰 성과는 문제를 해결함이 아니라 앞으로 내가 어떤 방법으로 문제를 해결해 나가면 될지를 배웠다고 생각이 든다.
diff --git a/src/content/posts/frontEnd/Socketio.md b/src/content/posts/frontEnd/Socketio.md
index 8cd73c6..ca83ac3 100644
--- a/src/content/posts/frontEnd/Socketio.md
+++ b/src/content/posts/frontEnd/Socketio.md
@@ -1,44 +1,44 @@
----
-title: Socket.io에 대해서
-tags: [frontEnd]
-date: "2024.04.13"
----
-## Socket.io에 대해서
-
-Socket.io는 WebSocket 프로토콜을 기반으로 실시간 양방향 통신을 지원하는 라이브러리입니다.
-
-## Socket.io의 특징
-
-1. WebSocket 프로토콜 사용 2. 양방향 통신 3. 이벤트 기반 통신 4. Room과 Namespace
- socket.io는 WebSocket을 기본 통신 방법으로 사용하지만 WebSocket을 지원하지 않는 환경에서는 Long Poling 등의 대체 방식을 사용해 호환성을 유지합니다.
- 클라이언트와 서버가 서로 데이터를 주고받을 수 있습니다.
- 데이터를 교환할 때 이벤트라는 개념을 사용하는데 클라이언트와 서버 모두 이벤트를 생성하거나 이를 수신하는 작업을 수행할 수 있습니다.
- Room: 특정 사용자 그룹을 만들어 메시지를 제한적으로 전달할 수 있는 기능. Namespace: URL 경로를 분리하여 논리적으로 독립된 통신 채널을 제공.
-
-```javascript
-// 클라이언트 예제
-socket.emit('message', 'Hello, Server!'); // 이벤트 전송
-socket.on('response', (data) => {
- console.log(data); // 서버에서 보낸 응답 처리
-});
-
-```
-```javascript
-// 서버 예제
-io.on('connection', (socket) => {
- console.log('클라이언트가 연결되었습니다.');
-
- socket.on('message', (msg) => {
- console.log("클라이언트 메시지 : ", msg);
- socket.emit('response', 'Hello, Client!');
- });
-});
-
-```
-## WebSocket 프로토콜이란?
-
-WebSocket은 HTML5 표준에 정의된 네트워크 프로토콜이고 RFC 6455에 의해 표준화되었습니다. WebSocket은 HTTP 요청을 통해 초기 Handshake를 설정한 후 TCP 기반의 지속적인 양방향 연결을 유지합니다.
-
-WebSocket은 연결이 지속적으로 유지되므로 서버 자원을 계속 소모할 수 있습니다. 따라서 서버의 연결 수와 리소스를 효율적으로 관리해야 합니다. 또한 WebSocket은 기본적으로 보안 기능을 제공하지 않기 때문에, 보안을 위해 wss://(WebSocket Secure)를 사용하는 것이 권장됩니다.
-
+---
+title: Socket.io에 대해서
+tags: [frontEnd]
+date: "2024.04.13"
+---
+## Socket.io에 대해서
+
+Socket.io는 WebSocket 프로토콜을 기반으로 실시간 양방향 통신을 지원하는 라이브러리입니다.
+
+## Socket.io의 특징
+
+1. WebSocket 프로토콜 사용 2. 양방향 통신 3. 이벤트 기반 통신 4. Room과 Namespace
+ socket.io는 WebSocket을 기본 통신 방법으로 사용하지만 WebSocket을 지원하지 않는 환경에서는 Long Poling 등의 대체 방식을 사용해 호환성을 유지합니다.
+ 클라이언트와 서버가 서로 데이터를 주고받을 수 있습니다.
+ 데이터를 교환할 때 이벤트라는 개념을 사용하는데 클라이언트와 서버 모두 이벤트를 생성하거나 이를 수신하는 작업을 수행할 수 있습니다.
+ Room: 특정 사용자 그룹을 만들어 메시지를 제한적으로 전달할 수 있는 기능. Namespace: URL 경로를 분리하여 논리적으로 독립된 통신 채널을 제공.
+
+```javascript
+// 클라이언트 예제
+socket.emit('message', 'Hello, Server!'); // 이벤트 전송
+socket.on('response', (data) => {
+ console.log(data); // 서버에서 보낸 응답 처리
+});
+
+```
+```javascript
+// 서버 예제
+io.on('connection', (socket) => {
+ console.log('클라이언트가 연결되었습니다.');
+
+ socket.on('message', (msg) => {
+ console.log("클라이언트 메시지 : ", msg);
+ socket.emit('response', 'Hello, Client!');
+ });
+});
+
+```
+## WebSocket 프로토콜이란?
+
+WebSocket은 HTML5 표준에 정의된 네트워크 프로토콜이고 RFC 6455에 의해 표준화되었습니다. WebSocket은 HTTP 요청을 통해 초기 Handshake를 설정한 후 TCP 기반의 지속적인 양방향 연결을 유지합니다.
+
+WebSocket은 연결이 지속적으로 유지되므로 서버 자원을 계속 소모할 수 있습니다. 따라서 서버의 연결 수와 리소스를 효율적으로 관리해야 합니다. 또한 WebSocket은 기본적으로 보안 기능을 제공하지 않기 때문에, 보안을 위해 wss://(WebSocket Secure)를 사용하는 것이 권장됩니다.
+
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/SocketioNameSpace.md b/src/content/posts/frontEnd/SocketioNameSpace.md
index 14078be..b09284a 100644
--- a/src/content/posts/frontEnd/SocketioNameSpace.md
+++ b/src/content/posts/frontEnd/SocketioNameSpace.md
@@ -1,154 +1,154 @@
----
-title: Socket.io Namespace & Room 기능 이해하기
-tags: [frontEnd]
-date: "2024.04.20"
----
-Namespace와 Room은 Socket.IO의 중요한 기능으로, 실시간 애플리케이션에서 클라이언트와 서버 간의 메시지 전송을 보다 효율적으로 관리하는 데 사용됩니다. 이 기능들은 여러 클라이언트가 동시에 접속하는 환경에서 채널 또는 그룹 단위로 메시지를 관리하고, 다양한 이벤트를 분리하여 효율적으로 처리할 수 있게 해줍니다.
-
-## Namespace 란?
-
-Namespace는 api 엔드포인트 같이 /chat은 채팅관련 이벤트를 처리하는 채널 /notification은 알람과 관련된 이벤트를 처리하는 채널로 분류할 수 있습니다. of 메서드를 이용해 네임스페이스에 접속할 수 있습니다.
-
-```javascript
-// 클라이언트측 코드
-// 기본 네임스페이스에 연결
-const defaultSocket = io();
-// 채팅 네임스페이스에 연결
-const chatSocket = io('/chat');
-// 알림 네임스페이스에 연결
-const notificationSocket = io('/notification');
-// 메시지 보내기
-chatSocket.emit('message', '안녕하세요! 채팅 메시지입니다.');
-// 알림 보내기
-notificationSocket.emit('alert', '새로운 알림이 도착했습니다.');
-
-```
-```javascript
-// 서버측 코드
-const io = require('socket.io')
-// 기본 네임스페이스 ("/")
-io.on('connection', (socket) => {
- console.log('기본 네임스페이스에 연결됨');
-});
-// /chat 네임스페이스
-const chatNamespace = io.of('/chat');
-chatNamespace.on('connection', (socket) => {
- console.log('채팅 네임스페이스에 연결됨');
- socket.on('message', (msg) => {
- console.log('채팅 메시지:', msg);
- chatNamespace.emit('message', msg); // 채팅 네임스페이스에 메시지 브로드캐스트
- });
-});
-// /notification 네임스페이스
-const notificationNamespace = io.of('/notification');
-notificationNamespace.on('connection', (socket) => {
- console.log('알림 네임스페이스에 연결됨');
- socket.on('alert', (alert) => {
- console.log('알림 내용:', alert);
- notificationNamespace.emit('alert', alert); // 알림 네임스페이스에 알림 브로드캐스트
- });
-});
-
-```
-## Namespace의 종류
-
-1. 기본 네임스페이스(Default Namespace) 2. 사용자 정의 네임스페이스(Custom Namespace)
- 기본적으로 모든 클라이언트는 ( / ) 네임스페이스에 연결이 되고 io.on('connection', callback)을 통해 네임스 페이스의 연결을 처리합니다.
- 특정 기능이나 사용자 그룹을 분리하기 위한 네임스페이스입니다. /admin처럼 일반 사용자와 분리된 통신을 처리 할 수 있습니다.
-
-```javascript
-const adminNamespace = io.of('/admin'); // admin 네임스페이스에 입장
-
-adminNamespace.use((socket, next) => {
- // 사용자 권한 확인 로직
- next();
-});
-
-adminNamespace.on('connection', (socket) => {
- // 관리자 전용 이벤트 처리
-});
-
-```
-3. 동적 네임스페이스(Dynamic Namespace)
- 정규 표현식을 사용해 네임스페이스를 생성하는 것 또한 가능합니다
-
-```javascript
-const workspaces = io.of(/^/w+$/);
-
-workspaces.on('connection', (socket) => {
- const workspace = socket.nsp;
- // 해당 네임스페이스에 대한 처리
-});
-workspaces.use((socket, next) => {
- // 접근 권한 확인 로직
- next();
-});
-
-```
-## Namespace Middleware
-
-Middleware란? Namespace에 대한 요청을 처리하기 이전에 미리 응답을 처리해 다음단께로 전달할 하는 구조입니다. axios 인터셉터와 비슷한 역할을 합니다.
-
-Socket.io는 Namespace Middleware또한 설정할 수 있습니다. 보안이 필요한 서비스나 비즈니스 로직등을 처리함에 있어 유용하게 사용할 수 있습니다.
-
-```javascript
-const io = require('socket.io')
-// '/chat' 네임스페이스에 미들웨어 추가
-const chatNamespace = io.of('/chat');
-// 미들웨어 정의
-chatNamespace.use((socket, next) => {
- // 클라이언트에서 전달한 인증 토큰 확인 (예: JWT)
- const token = socket.handshake.query.token;
- if (token === 'valid-token') {
- return next(); // 인증 성공하면 계속 연결
- } else {
- return next(new Error('인증 실패')); // 인증 실패하면 연결 차단
- }
-});
-chatNamespace.on('connection', (socket) => {
- console.log('채팅 네임스페이스에 연결됨');
- socket.on('message', (msg) => {
- console.log('메시지:', msg);
- });
-});
-
-```
-## Room 이란?
-
-Room은 네임스페이스의 하위 개념이라고 생각하시면 됩니다. 하나의 네임스페이스에 여러개의 방이 존재할 수 있습니다. 이 방안에 있는 여러개의 소켓이 서로 통신할 수 있습니다. 채팅방 같은 기능이라고 생각하시면 됩니다.
-
-
-join 이나 leave 같은 메서드를 이용해 room에 참가하거나 떠날 수도 있고 chatroom1과 chatroom2 두 개의 방에 동시에 참여할 수 있습니다. to 메서드를 이용하면 특정 방에 있는 모든 소켓에게 메시지를 전송할 수 도 있습니다.
-
-```javascript
-// 클라이언트 코드
-const socket = io();
-// 방에 입장하기
-socket.emit('joinRoom', 'chatroom');
-// 방에서 나가기
-socket.emit('leaveRoom', 'chatroom');
-// 메시지 보내기
-socket.emit('sendMessage', 'chatroom', '안녕하세요, 모두!');
-
-```
-```javascript
-// 서버 코드
-const io = require('socket.io')
-io.on('connection', (socket) => {
- console.log('새로운 클라이언트가 연결됨:', socket.id);
- // 클라이언트가 'chatroom' 방에 입장
- socket.on('joinRoom', (roomName) => {
- socket.join(roomName); // 방에 입장
- });
- // 클라이언트가 'chatroom' 방에서 나가기
- socket.on('leaveRoom', (roomName) => {
- socket.leave(roomName); // 방에서 나감
- });
- // 방에 있는 모든 클라이언트에게 메시지 보내기
- socket.on('sendMessage', (roomName, message) => {
- io.to(roomName).emit('message', message); // 방에 있는 모든 클라이언트에게 메시지 전송
- });
-});
-
-
+---
+title: Socket.io Namespace & Room 기능 이해하기
+tags: [frontEnd]
+date: "2024.04.20"
+---
+Namespace와 Room은 Socket.IO의 중요한 기능으로, 실시간 애플리케이션에서 클라이언트와 서버 간의 메시지 전송을 보다 효율적으로 관리하는 데 사용됩니다. 이 기능들은 여러 클라이언트가 동시에 접속하는 환경에서 채널 또는 그룹 단위로 메시지를 관리하고, 다양한 이벤트를 분리하여 효율적으로 처리할 수 있게 해줍니다.
+
+## Namespace 란?
+
+Namespace는 api 엔드포인트 같이 /chat은 채팅관련 이벤트를 처리하는 채널 /notification은 알람과 관련된 이벤트를 처리하는 채널로 분류할 수 있습니다. of 메서드를 이용해 네임스페이스에 접속할 수 있습니다.
+
+```javascript
+// 클라이언트측 코드
+// 기본 네임스페이스에 연결
+const defaultSocket = io();
+// 채팅 네임스페이스에 연결
+const chatSocket = io('/chat');
+// 알림 네임스페이스에 연결
+const notificationSocket = io('/notification');
+// 메시지 보내기
+chatSocket.emit('message', '안녕하세요! 채팅 메시지입니다.');
+// 알림 보내기
+notificationSocket.emit('alert', '새로운 알림이 도착했습니다.');
+
+```
+```javascript
+// 서버측 코드
+const io = require('socket.io')
+// 기본 네임스페이스 ("/")
+io.on('connection', (socket) => {
+ console.log('기본 네임스페이스에 연결됨');
+});
+// /chat 네임스페이스
+const chatNamespace = io.of('/chat');
+chatNamespace.on('connection', (socket) => {
+ console.log('채팅 네임스페이스에 연결됨');
+ socket.on('message', (msg) => {
+ console.log('채팅 메시지:', msg);
+ chatNamespace.emit('message', msg); // 채팅 네임스페이스에 메시지 브로드캐스트
+ });
+});
+// /notification 네임스페이스
+const notificationNamespace = io.of('/notification');
+notificationNamespace.on('connection', (socket) => {
+ console.log('알림 네임스페이스에 연결됨');
+ socket.on('alert', (alert) => {
+ console.log('알림 내용:', alert);
+ notificationNamespace.emit('alert', alert); // 알림 네임스페이스에 알림 브로드캐스트
+ });
+});
+
+```
+## Namespace의 종류
+
+1. 기본 네임스페이스(Default Namespace) 2. 사용자 정의 네임스페이스(Custom Namespace)
+ 기본적으로 모든 클라이언트는 ( / ) 네임스페이스에 연결이 되고 io.on('connection', callback)을 통해 네임스 페이스의 연결을 처리합니다.
+ 특정 기능이나 사용자 그룹을 분리하기 위한 네임스페이스입니다. /admin처럼 일반 사용자와 분리된 통신을 처리 할 수 있습니다.
+
+```javascript
+const adminNamespace = io.of('/admin'); // admin 네임스페이스에 입장
+
+adminNamespace.use((socket, next) => {
+ // 사용자 권한 확인 로직
+ next();
+});
+
+adminNamespace.on('connection', (socket) => {
+ // 관리자 전용 이벤트 처리
+});
+
+```
+3. 동적 네임스페이스(Dynamic Namespace)
+ 정규 표현식을 사용해 네임스페이스를 생성하는 것 또한 가능합니다
+
+```javascript
+const workspaces = io.of(/^/w+$/);
+
+workspaces.on('connection', (socket) => {
+ const workspace = socket.nsp;
+ // 해당 네임스페이스에 대한 처리
+});
+workspaces.use((socket, next) => {
+ // 접근 권한 확인 로직
+ next();
+});
+
+```
+## Namespace Middleware
+
+Middleware란? Namespace에 대한 요청을 처리하기 이전에 미리 응답을 처리해 다음단께로 전달할 하는 구조입니다. axios 인터셉터와 비슷한 역할을 합니다.
+
+Socket.io는 Namespace Middleware또한 설정할 수 있습니다. 보안이 필요한 서비스나 비즈니스 로직등을 처리함에 있어 유용하게 사용할 수 있습니다.
+
+```javascript
+const io = require('socket.io')
+// '/chat' 네임스페이스에 미들웨어 추가
+const chatNamespace = io.of('/chat');
+// 미들웨어 정의
+chatNamespace.use((socket, next) => {
+ // 클라이언트에서 전달한 인증 토큰 확인 (예: JWT)
+ const token = socket.handshake.query.token;
+ if (token === 'valid-token') {
+ return next(); // 인증 성공하면 계속 연결
+ } else {
+ return next(new Error('인증 실패')); // 인증 실패하면 연결 차단
+ }
+});
+chatNamespace.on('connection', (socket) => {
+ console.log('채팅 네임스페이스에 연결됨');
+ socket.on('message', (msg) => {
+ console.log('메시지:', msg);
+ });
+});
+
+```
+## Room 이란?
+
+Room은 네임스페이스의 하위 개념이라고 생각하시면 됩니다. 하나의 네임스페이스에 여러개의 방이 존재할 수 있습니다. 이 방안에 있는 여러개의 소켓이 서로 통신할 수 있습니다. 채팅방 같은 기능이라고 생각하시면 됩니다.
+
+
+join 이나 leave 같은 메서드를 이용해 room에 참가하거나 떠날 수도 있고 chatroom1과 chatroom2 두 개의 방에 동시에 참여할 수 있습니다. to 메서드를 이용하면 특정 방에 있는 모든 소켓에게 메시지를 전송할 수 도 있습니다.
+
+```javascript
+// 클라이언트 코드
+const socket = io();
+// 방에 입장하기
+socket.emit('joinRoom', 'chatroom');
+// 방에서 나가기
+socket.emit('leaveRoom', 'chatroom');
+// 메시지 보내기
+socket.emit('sendMessage', 'chatroom', '안녕하세요, 모두!');
+
+```
+```javascript
+// 서버 코드
+const io = require('socket.io')
+io.on('connection', (socket) => {
+ console.log('새로운 클라이언트가 연결됨:', socket.id);
+ // 클라이언트가 'chatroom' 방에 입장
+ socket.on('joinRoom', (roomName) => {
+ socket.join(roomName); // 방에 입장
+ });
+ // 클라이언트가 'chatroom' 방에서 나가기
+ socket.on('leaveRoom', (roomName) => {
+ socket.leave(roomName); // 방에서 나감
+ });
+ // 방에 있는 모든 클라이언트에게 메시지 보내기
+ socket.on('sendMessage', (roomName, message) => {
+ io.to(roomName).emit('message', message); // 방에 있는 모든 클라이언트에게 메시지 전송
+ });
+});
+
+
```
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/StyledComponent.md b/src/content/posts/frontEnd/StyledComponent.md
index f80491c..2e18321 100644
--- a/src/content/posts/frontEnd/StyledComponent.md
+++ b/src/content/posts/frontEnd/StyledComponent.md
@@ -1,82 +1,82 @@
----
-title: styled-component를 사용해보자
-tags: [frontEnd]
-date: "2023.02.03"
----
-react를 처음 공부할 때 html과 js는 한 파일에서 작성하는데 css도 한 파일에서 작성 할 수 있지 않을까 란 생각이 들어 찾아보다가 styled-component를 알게 되었다. styled-component는 js in css 로 말 그대로 js파일 내부에 css를 작성한다는 뜻으로 styled-component의 장점으로는 css의 컴포넌트화로 유지보수가 쉬워지고 재사용성이 올라간다.
-
-## 패키지 설치
-
-```javascript
-
- # npm 설치
- npm install --save styled-components
-
- # yarn 설치
- yarn add styled-components
-
-
-```
-## 사용 방법
-
-설치가 잘 되었다면 사용방법에 대해 알아보자
-
-```javascript
-
- import styled from "styled-components";
-
- const Title = styled.h1`
- font-size: 1.5em;
- text-align: center;
- color: palevioletred;
- `;
-
- render(
- 타이틀1
- )
-
-
-```
-태그이름을 선언해 준후에 styled.태그 뒤에 ``(백틱)을 사용해서 원하는 css를 작성하면 된다. 이때 Title이라는 태그를 중복해서 사용할 때 color색상만 다르게 하고 싶다면 props로 값을 넘겨줄 수 있다.
-
-```javascript
-
- import styled from "styled-components";
-
- const Title = styled.h1`
- font-size: 1.5em;
- text-align: center;
- color: ${({color})=> color ? color : 'palevioletred'}
- `;
-
- render(
- 타이틀1
- 타이틀2
- )
-
-
-```
-그리고 이전에 선언했던 태그를 상속하여 작성할 수 있다.
-
-```javascript
-
- import styled from "styled-components";
-
- const Title = styled.h1`
- font-size: 1.5em;
- text-align: center;
- color: ${({color})=> color ? color : 'palevioletred'}
- `;
-
- const SubscribeTitle = styled(Title)`
- border: 1px solid palevioletred;
- `;
-
- render(
- 타이틀1
- 타이틀2
- )
-
-
-```
-[https://styled-components.com/](https://styled-components.com/)
+---
+title: styled-component를 사용해보자
+tags: [frontEnd]
+date: "2023.02.03"
+---
+react를 처음 공부할 때 html과 js는 한 파일에서 작성하는데 css도 한 파일에서 작성 할 수 있지 않을까 란 생각이 들어 찾아보다가 styled-component를 알게 되었다. styled-component는 js in css 로 말 그대로 js파일 내부에 css를 작성한다는 뜻으로 styled-component의 장점으로는 css의 컴포넌트화로 유지보수가 쉬워지고 재사용성이 올라간다.
+
+## 패키지 설치
+
+```javascript
+
+ # npm 설치
+ npm install --save styled-components
+
+ # yarn 설치
+ yarn add styled-components
+
+
+```
+## 사용 방법
+
+설치가 잘 되었다면 사용방법에 대해 알아보자
+
+```javascript
+
+ import styled from "styled-components";
+
+ const Title = styled.h1`
+ font-size: 1.5em;
+ text-align: center;
+ color: palevioletred;
+ `;
+
+ render(
+ 타이틀1
+ )
+
+
+```
+태그이름을 선언해 준후에 styled.태그 뒤에 ``(백틱)을 사용해서 원하는 css를 작성하면 된다. 이때 Title이라는 태그를 중복해서 사용할 때 color색상만 다르게 하고 싶다면 props로 값을 넘겨줄 수 있다.
+
+```javascript
+
+ import styled from "styled-components";
+
+ const Title = styled.h1`
+ font-size: 1.5em;
+ text-align: center;
+ color: ${({color})=> color ? color : 'palevioletred'}
+ `;
+
+ render(
+ 타이틀1
+ 타이틀2
+ )
+
+
+```
+그리고 이전에 선언했던 태그를 상속하여 작성할 수 있다.
+
+```javascript
+
+ import styled from "styled-components";
+
+ const Title = styled.h1`
+ font-size: 1.5em;
+ text-align: center;
+ color: ${({color})=> color ? color : 'palevioletred'}
+ `;
+
+ const SubscribeTitle = styled(Title)`
+ border: 1px solid palevioletred;
+ `;
+
+ render(
+ 타이틀1
+ 타이틀2
+ )
+
+
+```
+[https://styled-components.com/](https://styled-components.com/)
diff --git a/src/content/posts/frontEnd/StyledComponentGlobleStyle.md b/src/content/posts/frontEnd/StyledComponentGlobleStyle.md
index cade79b..c277b5f 100644
--- a/src/content/posts/frontEnd/StyledComponentGlobleStyle.md
+++ b/src/content/posts/frontEnd/StyledComponentGlobleStyle.md
@@ -1,111 +1,111 @@
----
-title: styled-component 전역 스타일링에 대해 알아보자
-tags: [frontEnd]
-date: "2023.02.03"
----
-이전에 포스트에서 styled-component 사용법에 대해서 다뤘었는데 오늘은 GlobalStyle과 Theme에 대해 알아보겠다.
-
-## GolbalStyle 사용방법
-
-간단하게 createGlobalStyle 이라는 함수를 사용해 css를 작성한 후 최상위 컴포넌트에 추가해주면 된다.
-
-```javascript
-
- //globalStyle.js
-
- import { createGlobalStyle } from 'styled-components'
-
- const GlobalStyle = createGlobalStyle`
- body{
- margin: 0;
- font-family: "Gothic A1";
- font-weight: 500;
- };
- a{
- text-decoration: none;
- color: #000;
- };
- `;
-
- export default GlobalStyle;
-
-
-```
-```javascript
-
- //App.jsx
-
- import GlobalStyle from './globalStyle'
-
- function App() {
- return (
- <>
-
-
- Globle
-
-
- );
- }
-
-
-```
-이렇게 사용하면 전역으로 css를 설정할 수 있어 불필요하게 중복되는 스타일링을 줄일 수 있다.
-
-## Theme 사용방법
-
-ThemeProvider 이라는 함수로 ThemeProvider 로 감싼 내부의 컴포넌트에게 공통된 값을 내려줄 수 있다. theme를 사용하면 일관된 디자인을 유지할 수 있다는 장점이 있고 디자인 수정이 필요하다면 theme만 변경해주면 된다.
-
-```javascript
-
- //theme.js
-
- const theme = {
- color: {
- container: 'pink',
- box: 'blue',
- },
- };
-
- export default theme;
-
-
-```
-```javascript
-
- //app.jsx
-
- import styled, { ThemeProvider } form 'styled-component'
- import theme from './theme';
-
- function App() {
- return (
-
-
-
- );
- };
-
- function BoxContainer(){
- return(
-
-
-
- );
- };
-
- const Container = styled.div`
- background-color: ${ ({theme}) => theme.color.container };
- `;
-
- const Box = styled.div`
- background-color: ${ ({theme}) => theme.color.box };
- `;
-
-
-```
-ThemeProvider 함수를 잘 응용하면 다크모드도 간단하게 만들 수 있다.
-
-[https://styled-components.com/docs/api#createglobalstyle](https://styled-components.com/docs/api#createglobalstyle)
-
-[https://styled-components.com/docs/api#themeprovider](https://styled-components.com/docs/api#themeprovider)
+---
+title: styled-component 전역 스타일링에 대해 알아보자
+tags: [frontEnd]
+date: "2023.02.03"
+---
+이전에 포스트에서 styled-component 사용법에 대해서 다뤘었는데 오늘은 GlobalStyle과 Theme에 대해 알아보겠다.
+
+## GolbalStyle 사용방법
+
+간단하게 createGlobalStyle 이라는 함수를 사용해 css를 작성한 후 최상위 컴포넌트에 추가해주면 된다.
+
+```javascript
+
+ //globalStyle.js
+
+ import { createGlobalStyle } from 'styled-components'
+
+ const GlobalStyle = createGlobalStyle`
+ body{
+ margin: 0;
+ font-family: "Gothic A1";
+ font-weight: 500;
+ };
+ a{
+ text-decoration: none;
+ color: #000;
+ };
+ `;
+
+ export default GlobalStyle;
+
+
+```
+```javascript
+
+ //App.jsx
+
+ import GlobalStyle from './globalStyle'
+
+ function App() {
+ return (
+ <>
+
+
+ Globle
+
+
+ );
+ }
+
+
+```
+이렇게 사용하면 전역으로 css를 설정할 수 있어 불필요하게 중복되는 스타일링을 줄일 수 있다.
+
+## Theme 사용방법
+
+ThemeProvider 이라는 함수로 ThemeProvider 로 감싼 내부의 컴포넌트에게 공통된 값을 내려줄 수 있다. theme를 사용하면 일관된 디자인을 유지할 수 있다는 장점이 있고 디자인 수정이 필요하다면 theme만 변경해주면 된다.
+
+```javascript
+
+ //theme.js
+
+ const theme = {
+ color: {
+ container: 'pink',
+ box: 'blue',
+ },
+ };
+
+ export default theme;
+
+
+```
+```javascript
+
+ //app.jsx
+
+ import styled, { ThemeProvider } form 'styled-component'
+ import theme from './theme';
+
+ function App() {
+ return (
+
+
+
+ );
+ };
+
+ function BoxContainer(){
+ return(
+
+
+
+ );
+ };
+
+ const Container = styled.div`
+ background-color: ${ ({theme}) => theme.color.container };
+ `;
+
+ const Box = styled.div`
+ background-color: ${ ({theme}) => theme.color.box };
+ `;
+
+
+```
+ThemeProvider 함수를 잘 응용하면 다크모드도 간단하게 만들 수 있다.
+
+[https://styled-components.com/docs/api#createglobalstyle](https://styled-components.com/docs/api#createglobalstyle)
+
+[https://styled-components.com/docs/api#themeprovider](https://styled-components.com/docs/api#themeprovider)
diff --git a/src/content/posts/frontEnd/Sync-vs-async.md b/src/content/posts/frontEnd/Sync-vs-async.md
index 00d3039..225d91d 100644
--- a/src/content/posts/frontEnd/Sync-vs-async.md
+++ b/src/content/posts/frontEnd/Sync-vs-async.md
@@ -1,80 +1,80 @@
----
-title: 비동기 작업 동시 요청
-tags: [frontEnd]
-date: "2024.10.05"
----
-오늘은 비동기 작업을 테스트하다 생긴 경험에 대해 적어보려고 합니다.
-
-## 주요 내용
-- 데이터 요청시 모든 데이터를 받아옵니다.
-- 받은 데이터 중 필요한 데이터만 필터링합니다.
-- 필터링된 데이터의 세부 정보에 대한 요청을 한번에 보내고 모든 요청이 완료된 후 한번에 응답을 받습니다.
-
-이 내용이 제가 초기에 생각한 동작입니다. 하지만 제가 구현한 기능을 보면
-
-- 데이터 요청시 모든 데이터를 받아옵니다.
-- 받은 데이터 중 필요한 데이터만 필터링합니다.
-- 필터링된 데이터의 세부 정보에 대한 요청을 각각 보내고 따로따로 완료된 응답을 받습니다.
-
-비동기에 대한 이해가 부족해 생긴 문제라 생각해 동기와 비동기에 대해 다시 한번 정리해보려 합니다.
-
-## 동기와 비동기의 차이
-### 동기
-코드가 순차적으로 실행되며 한 작업이 끝나야 다음 작업이 수행됩니다.
-일반적인 JavaScript 코드 실행 방법 입니다.
-```javascript
-console.log("1"); // 1
-console.log("2"); // 2
-console.log("3"); // 3
-console.log("4"); // 4
-// 출력 순서: 1 → 2 → 3 → 4
-```
-### 비동기
-작업을 병렬로 처리하며 결과를 기다리지 않고 다음 작업을 수행합니다.
-setTimeout, API 호출, 파일 읽기 작업 등이 해당됩니다.
-```javascript
-console.log("햄버거 주문"); // 1
-
-setTimeout(() => {
- console.log("햄버거 완성!"); // 3 (3초 후)
-}, 3000);
-
-console.log("콜라 주문"); // 2
-console.log("콜라 완성!"); // 3
-```
-비동기로 API호출을 할 땐 `.then()` `.catch()` 문을 사용하거나 `async/await`를 사용해 요청
-할 수 있습니다.
-
-## 내 코드 살펴보기
-**초기 코드**
-```javascript
-const responses = await array.map(async (data) => {
- const response = await Get(
- "/example",
- { params: { data } }
- );
- return response;
-})
-
-await Promise.all(responses)
-```
-`map`은 단순히 배열의 각 요소를 순회하며 비동기 함수가 반환된 배열을 반환할 뿐 이를 처리하지는 않습니다.
-결과적으로 `Promise` 객체 배열을 반환하게 됩니다. 또 `map` 내부에 불필요한 `await`를 사용해 코드가 중복적으로
-처리되는 문제가 있었습니다.
-
-**개선된 점**
-
-```javascript
-const responses = await Promise.all(array.map((data) => {
- return Get(
- "/example",
- { params: { data } }
- );
-}))
-```
-`Promise.all`을 이용해 모든 비동기 요청을 병렬로 처리해 전체 작업이 완료될 때까지 기다립니다.
-기존 코드에서 중첩된 async/await를 제거해 작업을 단순화하고 가독성을 높였습니다.
-
-## 결론
-이 경험을 통해 비동기 작업에 대한 이해와 `Promise.all`의 활용 방법을 배우게 되었고 자바스크립트에서 제공하는
+---
+title: 비동기 작업 동시 요청
+tags: [frontEnd]
+date: "2024.10.05"
+---
+오늘은 비동기 작업을 테스트하다 생긴 경험에 대해 적어보려고 합니다.
+
+## 주요 내용
+- 데이터 요청시 모든 데이터를 받아옵니다.
+- 받은 데이터 중 필요한 데이터만 필터링합니다.
+- 필터링된 데이터의 세부 정보에 대한 요청을 한번에 보내고 모든 요청이 완료된 후 한번에 응답을 받습니다.
+
+이 내용이 제가 초기에 생각한 동작입니다. 하지만 제가 구현한 기능을 보면
+
+- 데이터 요청시 모든 데이터를 받아옵니다.
+- 받은 데이터 중 필요한 데이터만 필터링합니다.
+- 필터링된 데이터의 세부 정보에 대한 요청을 각각 보내고 따로따로 완료된 응답을 받습니다.
+
+비동기에 대한 이해가 부족해 생긴 문제라 생각해 동기와 비동기에 대해 다시 한번 정리해보려 합니다.
+
+## 동기와 비동기의 차이
+### 동기
+코드가 순차적으로 실행되며 한 작업이 끝나야 다음 작업이 수행됩니다.
+일반적인 JavaScript 코드 실행 방법 입니다.
+```javascript
+console.log("1"); // 1
+console.log("2"); // 2
+console.log("3"); // 3
+console.log("4"); // 4
+// 출력 순서: 1 → 2 → 3 → 4
+```
+### 비동기
+작업을 병렬로 처리하며 결과를 기다리지 않고 다음 작업을 수행합니다.
+setTimeout, API 호출, 파일 읽기 작업 등이 해당됩니다.
+```javascript
+console.log("햄버거 주문"); // 1
+
+setTimeout(() => {
+ console.log("햄버거 완성!"); // 3 (3초 후)
+}, 3000);
+
+console.log("콜라 주문"); // 2
+console.log("콜라 완성!"); // 3
+```
+비동기로 API호출을 할 땐 `.then()` `.catch()` 문을 사용하거나 `async/await`를 사용해 요청
+할 수 있습니다.
+
+## 내 코드 살펴보기
+**초기 코드**
+```javascript
+const responses = await array.map(async (data) => {
+ const response = await Get(
+ "/example",
+ { params: { data } }
+ );
+ return response;
+})
+
+await Promise.all(responses)
+```
+`map`은 단순히 배열의 각 요소를 순회하며 비동기 함수가 반환된 배열을 반환할 뿐 이를 처리하지는 않습니다.
+결과적으로 `Promise` 객체 배열을 반환하게 됩니다. 또 `map` 내부에 불필요한 `await`를 사용해 코드가 중복적으로
+처리되는 문제가 있었습니다.
+
+**개선된 점**
+
+```javascript
+const responses = await Promise.all(array.map((data) => {
+ return Get(
+ "/example",
+ { params: { data } }
+ );
+}))
+```
+`Promise.all`을 이용해 모든 비동기 요청을 병렬로 처리해 전체 작업이 완료될 때까지 기다립니다.
+기존 코드에서 중첩된 async/await를 제거해 작업을 단순화하고 가독성을 높였습니다.
+
+## 결론
+이 경험을 통해 비동기 작업에 대한 이해와 `Promise.all`의 활용 방법을 배우게 되었고 자바스크립트에서 제공하는
메서드의 사용방법을 명확하게 알게 되었습니다.
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/react-router-learn.md b/src/content/posts/frontEnd/react-router-learn.md
index 32093b0..1960555 100644
--- a/src/content/posts/frontEnd/react-router-learn.md
+++ b/src/content/posts/frontEnd/react-router-learn.md
@@ -1,136 +1,136 @@
----
-title: react-router에 대해서 알아보자
-tags: [frontEnd]
-date: "2023.02.09"
----
-## react-router란?
-
-react-router는 클라이언트 측 라우팅이 가능하게 도와주는 라이브러리다. react-router를 사용하면 간단하게 url을 변경하면서 여러 페이지로 이루어진 어플리케이션을 만들 수 있다.
-
-## 패키지 설치
-
-```javascript
-
- # npm 설치
- npm install react-router-dom
-
- # yarn 설치
- yarn add react-router-dom
-
-
-```
-## 사용방법
-
-```javascript
-
- import { BrowserRouter, Routes, Route } from 'react-router-dom';
- /* existing imports */
-
- function App() {
- return (
-
-
- } />
- } />
- } />
- } />
-
-
- );
- }
-
- export default App;
-
-
-```
-위에 코드에 대해 설명을 하면 우선 최상위 컴포넌트에서 BrowserRouter로 감싸준후 Route를 Routes로 감싸준다. Route에 path에는 url경로를 element에는 보여주고자 하는 컴포넌트를 넣어준다. 그럼 path와 일치하는 Route를 렌더링 시켜주게 된다. path에 *만 적게 된다면 url에 일치하는 경로가 없을시에 보여주게 된다.
-
-```javascript
-
- import { Link } from 'react-router-dom';
- /* existing imports */
-
- export default function Home() {
- return (
-
- );
- };
-
-
-```
-기존에는 a태그를 사용하지만 react-router에서는 Link를 사용한다 사용방법은 아주 간단한데 보이는거와 같이 to에 원하는 경로를 적어주면 된다.
-
-## URL 파라미터
-
-useParams를 이용하면 간단하게 파라미터를 받아올 수 있다. path부분에 경로를 /contact/:Id 라고 한다면 /content 부분이 url /:Id부분이 파라미터라고 할 수 있다.
-
-```javascript
-
- import { Link } from 'react-router-dom';
- /* existing imports */
-
- export default function Home() {
- return (
-
- );
- };
-
-
-```
-```javascript
-
- import { useParams } from 'react-router-dom';
- /* existing imports */
-
- export default function Contact() {
-
- const { Id } = useParams();
-
- return (
-
- 파라미터 Id는 {Id}입니다.
-
- );
- };
-
-
-```
-## 쿼리스트링
-
-쿼리스트링도 useLocation훅을 이용해 활용할 수 있다. useLocation훅은 location객체를 반환 하는데 location객체는 pathname: URL에서 현재 주소경로 search: ?를 포함한 쿼리스트링 hash: URL에서 #이후의 값 (#이 없는경우 빈 문자열) state: URL에 넣고 싶지 않은 정보를 저장할 수 있다. key: location의 고유 값 (기본은 default) 으로 이루어져있다.
-
-```javascript
-
- import { useLocation } from 'react-router-dom';
- /* existing imports */
-
- export default function Contact() {
-
- const location = useLocation();
-
- return (
-
-
- - pathname: {location.pathname}
- - search: {location.search}
- - hash: {location.hash}
- - state: {location.state}
- - key: {location.key}
-
-
+ 파라미터 Id는 {Id}입니다.
+
+ );
+ };
+
+
+```
+## 쿼리스트링
+
+쿼리스트링도 useLocation훅을 이용해 활용할 수 있다. useLocation훅은 location객체를 반환 하는데 location객체는 pathname: URL에서 현재 주소경로 search: ?를 포함한 쿼리스트링 hash: URL에서 #이후의 값 (#이 없는경우 빈 문자열) state: URL에 넣고 싶지 않은 정보를 저장할 수 있다. key: location의 고유 값 (기본은 default) 으로 이루어져있다.
+
+```javascript
+
+ import { useLocation } from 'react-router-dom';
+ /* existing imports */
+
+ export default function Contact() {
+
+ const location = useLocation();
+
+ return (
+
+
+ - pathname: {location.pathname}
+ - search: {location.search}
+ - hash: {location.hash}
+ - state: {location.state}
+ - key: {location.key}
+
+
-
-
-```
-no-referrer 속성을 사용하면 Referer정보를 요청 헤더에 포함하지 않도록 해 404를 반환하지 않고 무사히 사용할 수 있다.
-
-[https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-HTTP-referer-%EB%9E%80](https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-HTTP-referer-%EB%9E%80)
-
-[https://velog.io/@sejinkim/Referrer-Policy%EC%9D%98-%EC%9D%B4%ED%95%B4#%EB%A0%88%ED%8D%BC%EB%9F%AC%EA%B0%80-%EC%97%86%EC%96%B4%EC%A1%8C%EC%96%B4%EC%9A%94](https://velog.io/@sejinkim/Referrer-Policy%EC%9D%98-%EC%9D%B4%ED%95%B4#%EB%A0%88%ED%8D%BC%EB%9F%AC%EA%B0%80-%EC%97%86%EC%96%B4%EC%A1%8C%EC%96%B4%EC%9A%94)
-
-[https://ogaeng.com/http-referrer/](https://ogaeng.com/http-referrer/)
-
-[https://yceffort.kr/2020/09/referer-and-referrer-policy](https://yceffort.kr/2020/09/referer-and-referrer-policy)
+---
+title: referrer 외부 링크 금지 이미지
+tags: [html]
+date: "2023.05.06"
+---
+팀프로젝트를 진행하던 도중 외부에서 불러온 이미지가 로드되지 않고 404를 반환하는 이슈가 있었다. 404를 반환한 이유를 알아보니 네이버에서 이미지를 가져올 때 보안에 관련된 이유로 404를 반환하는 것 이였다. 반환 하는 이유는 Referer 체크로 외부 링크를 금지하여 404를 반환 하는 것이다. 이를 해결 할 수 있는 방법으로는 이미지에 (referrerpolicy="no-referrer")속성을 추가해주면 된다.
+
+```javascript
+
+
+
+
+```
+no-referrer 속성을 사용하면 Referer정보를 요청 헤더에 포함하지 않도록 해 404를 반환하지 않고 무사히 사용할 수 있다.
+
+[https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-HTTP-referer-%EB%9E%80](https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-HTTP-referer-%EB%9E%80)
+
+[https://velog.io/@sejinkim/Referrer-Policy%EC%9D%98-%EC%9D%B4%ED%95%B4#%EB%A0%88%ED%8D%BC%EB%9F%AC%EA%B0%80-%EC%97%86%EC%96%B4%EC%A1%8C%EC%96%B4%EC%9A%94](https://velog.io/@sejinkim/Referrer-Policy%EC%9D%98-%EC%9D%B4%ED%95%B4#%EB%A0%88%ED%8D%BC%EB%9F%AC%EA%B0%80-%EC%97%86%EC%96%B4%EC%A1%8C%EC%96%B4%EC%9A%94)
+
+[https://ogaeng.com/http-referrer/](https://ogaeng.com/http-referrer/)
+
+[https://yceffort.kr/2020/09/referer-and-referrer-policy](https://yceffort.kr/2020/09/referer-and-referrer-policy)
diff --git a/src/content/posts/html/Sementic-tag.md b/src/content/posts/html/Sementic-tag.md
index 6987c8e..963cbc9 100644
--- a/src/content/posts/html/Sementic-tag.md
+++ b/src/content/posts/html/Sementic-tag.md
@@ -1,20 +1,20 @@
----
-title: HTML Sementic Tag란?
-tags: [html]
-date: "2023.02.07"
----
-## Sementic Tag란?
-
-우선 Sementic Tag의 뜻은 의미가 있는 태그라는 뜻이다. 반대로 div와 span태그와 같은 태그는 non-sementic tag라고 한다 그럼 div 태그로 만들 수 있는데 왜 의미가 있는 태그가 필요할까?
-
-## Sementic Tag 가 필요한 이유 3가지
-
- 마크업을 통해 보다 많은 검색에 노출 시킬 수 있다. 스크린리더로 웹 페이지를 탐색할 때 웹 접근성과 사용성을 올려준다. div태그만으로 작성된 문서보단 header h1 h2와 같은 태그로 작성된 문서보다 알아보기가 쉬워져 유지보수가 용이해진다.
-
-## Sementic Tag의 종류
-
-header : 헤더, 주로 로고나 검색폼 작성자의 이름 등으로 이루어져 있다. nav : 목차 또는 리스트 등의 메뉴를 이용할때 사용한다. footer : 웹 사이트의 가장 하단부분에 사용된다. main : 주요 컨텐츠 영역을 정의할 때 사용한다. section : 문서의 관련된 구역을 나눌때 사용된다. address : 작성자의 주소나 정보등을 작성하는 태그
-
-이것 이외에도 아주 많은 sementic tag가 있으니 잘 이용해서 문서를 작성하도록 하자.
-
-[https://developer.mozilla.org/ko/docs/Glossary/Semantics](https://developer.mozilla.org/ko/docs/Glossary/Semantics)
+---
+title: HTML Sementic Tag란?
+tags: [html]
+date: "2023.02.07"
+---
+## Sementic Tag란?
+
+우선 Sementic Tag의 뜻은 의미가 있는 태그라는 뜻이다. 반대로 div와 span태그와 같은 태그는 non-sementic tag라고 한다 그럼 div 태그로 만들 수 있는데 왜 의미가 있는 태그가 필요할까?
+
+## Sementic Tag 가 필요한 이유 3가지
+
+ 마크업을 통해 보다 많은 검색에 노출 시킬 수 있다. 스크린리더로 웹 페이지를 탐색할 때 웹 접근성과 사용성을 올려준다. div태그만으로 작성된 문서보단 header h1 h2와 같은 태그로 작성된 문서보다 알아보기가 쉬워져 유지보수가 용이해진다.
+
+## Sementic Tag의 종류
+
+header : 헤더, 주로 로고나 검색폼 작성자의 이름 등으로 이루어져 있다. nav : 목차 또는 리스트 등의 메뉴를 이용할때 사용한다. footer : 웹 사이트의 가장 하단부분에 사용된다. main : 주요 컨텐츠 영역을 정의할 때 사용한다. section : 문서의 관련된 구역을 나눌때 사용된다. address : 작성자의 주소나 정보등을 작성하는 태그
+
+이것 이외에도 아주 많은 sementic tag가 있으니 잘 이용해서 문서를 작성하도록 하자.
+
+[https://developer.mozilla.org/ko/docs/Glossary/Semantics](https://developer.mozilla.org/ko/docs/Glossary/Semantics)
diff --git a/src/content/posts/html/Viewport-Meta-Tag.md b/src/content/posts/html/Viewport-Meta-Tag.md
index 151ac53..01712fa 100644
--- a/src/content/posts/html/Viewport-Meta-Tag.md
+++ b/src/content/posts/html/Viewport-Meta-Tag.md
@@ -1,16 +1,16 @@
----
-title: 정리
-tags: [html]
-date: "2025.09.08"
----
-이번에는 반응형 웹에서 꼭 필요한 `` 태그를 정리해 보았다.
-
-모바일 브라우저들은 예전 데스크톱 전용 웹사이트를 정상적으로 보여주기 위해 기본 뷰포트 너비를 약 980px로 가정한다.
-
-그래서 ``가 없으면, 모바일 화면에서도 문서 전체가 축소된 상태로 표시되고 사용자가 직접 확대/축소를 해야 한다.
-
-이 경우 문제가 되는 부분이 있는데, 바로 CSS 미디어쿼리다.
-예를 들어 @media (max-width: 600px) 같은 코드는 실제 기기 폭(아이폰 375px 등)이 아니라 브라우저가 가정한 **가상 폭(980px)**을 기준으로 계산된다.
-즉, 원하는 반응형 동작이 제대로 적용되지 않는다.
-
+---
+title: 정리
+tags: [html]
+date: "2025.09.08"
+---
+이번에는 반응형 웹에서 꼭 필요한 `` 태그를 정리해 보았다.
+
+모바일 브라우저들은 예전 데스크톱 전용 웹사이트를 정상적으로 보여주기 위해 기본 뷰포트 너비를 약 980px로 가정한다.
+
+그래서 ``가 없으면, 모바일 화면에서도 문서 전체가 축소된 상태로 표시되고 사용자가 직접 확대/축소를 해야 한다.
+
+이 경우 문제가 되는 부분이 있는데, 바로 CSS 미디어쿼리다.
+예를 들어 @media (max-width: 600px) 같은 코드는 실제 기기 폭(아이폰 375px 등)이 아니라 브라우저가 가정한 **가상 폭(980px)**을 기준으로 계산된다.
+즉, 원하는 반응형 동작이 제대로 적용되지 않는다.
+
정리하면 ``는 모바일 환경에서 실제 기기 화면 너비를 기준으로 잡아주는 태그이자, 반응형 웹 디자인의 출발점이라고 할 수 있다.
\ No newline at end of file
diff --git a/src/content/posts/html/What-is-Meta-Tag.md b/src/content/posts/html/What-is-Meta-Tag.md
index 15ce184..506a99b 100644
--- a/src/content/posts/html/What-is-Meta-Tag.md
+++ b/src/content/posts/html/What-is-Meta-Tag.md
@@ -1,21 +1,21 @@
----
-title: 메타 태그 간단 정리
-tags: [html]
-date: "2025.09.05"
----
-HTML을 공부하면서 **메타 태그(meta tag)**에 대해 다시 한번 정리해 보았다.
-메타 태그는 쉽게 말해 HTML 문서의 **메타데이터(문서에 대한 정보)**를 담는 태그다.
-
-보통 안에 작성되며 직접 화면에 표시되지는 않는다. 하지만 브라우저, 검색엔진, SNS가 페이지를 이해하는 데 중요한 역할을 한다.
-
-대표적으로 자주 쓰이는 메타 태그는 다음과 같다.
-
-- **charset** → 문서의 문자 인코딩 방식을 지정한다. 보통 UTF-8을 사용한다.
-
-- **viewport** → 반응형 웹을 만들 때, 모바일 화면 크기에 맞게 조정하는 핵심 태그다.
-
-- **description** → 검색엔진 결과에 노출되는 페이지 설명을 제공한다.
-
-- **Open Graph 태그(og:title, og:image 등)** → SNS에서 페이지를 공유할 때 보이는 제목, 이미지, 설명을 제어한다.
-
+---
+title: 메타 태그 간단 정리
+tags: [html]
+date: "2025.09.05"
+---
+HTML을 공부하면서 **메타 태그(meta tag)**에 대해 다시 한번 정리해 보았다.
+메타 태그는 쉽게 말해 HTML 문서의 **메타데이터(문서에 대한 정보)**를 담는 태그다.
+
+보통 안에 작성되며 직접 화면에 표시되지는 않는다. 하지만 브라우저, 검색엔진, SNS가 페이지를 이해하는 데 중요한 역할을 한다.
+
+대표적으로 자주 쓰이는 메타 태그는 다음과 같다.
+
+- **charset** → 문서의 문자 인코딩 방식을 지정한다. 보통 UTF-8을 사용한다.
+
+- **viewport** → 반응형 웹을 만들 때, 모바일 화면 크기에 맞게 조정하는 핵심 태그다.
+
+- **description** → 검색엔진 결과에 노출되는 페이지 설명을 제공한다.
+
+- **Open Graph 태그(og:title, og:image 등)** → SNS에서 페이지를 공유할 때 보이는 제목, 이미지, 설명을 제어한다.
+
정리하자면, 메타 태그는 페이지가 어떻게 해석되고, 검색되고, 공유될지를 결정하는 중요한 정보 제공자다. 앞으로 프로젝트를 할 때 영역을 그냥 지나치지 않고, 꼭 필요한 메타 태그들을 꼼꼼히 챙겨 넣어야겠다고 생각했다.-
\ No newline at end of file
diff --git a/src/content/posts/javaScript/Accessing-DOM-With-JavaScript.md b/src/content/posts/javaScript/Accessing-DOM-With-JavaScript.md
index 55c97f7..dafe099 100644
--- a/src/content/posts/javaScript/Accessing-DOM-With-JavaScript.md
+++ b/src/content/posts/javaScript/Accessing-DOM-With-JavaScript.md
@@ -1,62 +1,62 @@
----
-title: JavaScript를 이용한 DOM에 접근하기
-tags: [javaScript]
-date: "2025.09.23"
----
-오늘은 부트캠프에서 **JavaScript를 이용한 DOM에 접근하는 방법**에 대해 배웠다. 평소엔 React로만 개발을 해왔기 때문에 바닐라 JavaScript를 이용해서 직접 DOM을 다루는 경험은 거의 없었는데, 이번 기회에 정리해두면 좋을 것 같아서 블로그에 기록해본다.
-
-## 1. 자바스크립트로 태그 선택하기
-
-DOM(Document Object Model)에서 원하는 태그를 선택하는 방법은 여러 가지가 있다. 가장 많이 쓰이는 메소드들을 정리해보면 아래와 같다.
-
-| 메소드 | 의미 | 결과 |
-| --- | --- | --- |
-| `document.getElementById('id')` | HTML **id 속성**으로 태그 선택하기 | 해당 id의 태그 하나 |
-| `document.getElementsByClassName('class')` | HTML **class 속성**으로 태그 선택하기 | 해당 class의 태그 모음(HTMLCollection) |
-| `document.getElementsByTagName('tag')` | HTML **태그 이름**으로 태그 선택하기 | 해당 tag의 태그 모음(HTMLCollection) |
-| `document.querySelector('css')` | **CSS 선택자**로 태그 선택하기 | 가장 첫 번째로 일치하는 태그 하나 |
-| `document.querySelectorAll('css')` | **CSS 선택자**로 태그 선택하기 | 모든 일치하는 태그 모음(NodeList) |
-
-## 2. 유사 배열이란?
-
-DOM에서 태그를 선택했을 때 종종 `HTMLCollection`이나 `NodeList` 같은 결과가 나온다. 이걸 **유사 배열**이라고 한다.
-
-- 숫자 형태의 인덱싱이 가능하다.
-- `length` 프로퍼티를 가지고 있다.
-- 하지만 배열의 기본 메소드를 그대로 쓸 수는 없다. (예: `map`, `forEach` 등 일부는 안됨)
-- `Array.isArray(유사배열)`을 해보면 `false`가 나온다.
-
-즉, 배열처럼 생겼지만 진짜 배열은 아니라는 점을 기억해야 한다.
-
-## 3. 이벤트와 이벤트 핸들링
-
-브라우저에서 일어나는 모든 사건을 **이벤트**라고 한다.
-
-예를 들어:
-
-- 버튼 클릭
-- 스크롤
-- 키보드 입력
-
-이벤트가 발생했을 때 원하는 동작을 실행하려면 **이벤트 핸들링(Event Handling)**이 필요하다.
-
-그리고 실제로 이벤트가 일어났을 때 실행되는 코드를 **이벤트 핸들러(Event Handler)**라고 한다. 보통 **이벤트 리스너(Event Listener)**라고도 부른다.
-
-## 4. 이벤트 핸들러 등록 방법
-
-이벤트 핸들러를 등록하는 방법은 크게 두 가지가 있다.
-
-### 4-1. 자바스크립트에서 등록하기
-
-```js
-const btn = document.querySelector('#myBtn');
-
-btn.onclick = function() {
- console.log('Hello Codeit!');
-};
-```
-
-### 4-2. HTML 태그에서 바로 등록하기
-```html
-
+---
+title: JavaScript를 이용한 DOM에 접근하기
+tags: [javaScript]
+date: "2025.09.23"
+---
+오늘은 부트캠프에서 **JavaScript를 이용한 DOM에 접근하는 방법**에 대해 배웠다. 평소엔 React로만 개발을 해왔기 때문에 바닐라 JavaScript를 이용해서 직접 DOM을 다루는 경험은 거의 없었는데, 이번 기회에 정리해두면 좋을 것 같아서 블로그에 기록해본다.
+
+## 1. 자바스크립트로 태그 선택하기
+
+DOM(Document Object Model)에서 원하는 태그를 선택하는 방법은 여러 가지가 있다. 가장 많이 쓰이는 메소드들을 정리해보면 아래와 같다.
+
+| 메소드 | 의미 | 결과 |
+| --- | --- | --- |
+| `document.getElementById('id')` | HTML **id 속성**으로 태그 선택하기 | 해당 id의 태그 하나 |
+| `document.getElementsByClassName('class')` | HTML **class 속성**으로 태그 선택하기 | 해당 class의 태그 모음(HTMLCollection) |
+| `document.getElementsByTagName('tag')` | HTML **태그 이름**으로 태그 선택하기 | 해당 tag의 태그 모음(HTMLCollection) |
+| `document.querySelector('css')` | **CSS 선택자**로 태그 선택하기 | 가장 첫 번째로 일치하는 태그 하나 |
+| `document.querySelectorAll('css')` | **CSS 선택자**로 태그 선택하기 | 모든 일치하는 태그 모음(NodeList) |
+
+## 2. 유사 배열이란?
+
+DOM에서 태그를 선택했을 때 종종 `HTMLCollection`이나 `NodeList` 같은 결과가 나온다. 이걸 **유사 배열**이라고 한다.
+
+- 숫자 형태의 인덱싱이 가능하다.
+- `length` 프로퍼티를 가지고 있다.
+- 하지만 배열의 기본 메소드를 그대로 쓸 수는 없다. (예: `map`, `forEach` 등 일부는 안됨)
+- `Array.isArray(유사배열)`을 해보면 `false`가 나온다.
+
+즉, 배열처럼 생겼지만 진짜 배열은 아니라는 점을 기억해야 한다.
+
+## 3. 이벤트와 이벤트 핸들링
+
+브라우저에서 일어나는 모든 사건을 **이벤트**라고 한다.
+
+예를 들어:
+
+- 버튼 클릭
+- 스크롤
+- 키보드 입력
+
+이벤트가 발생했을 때 원하는 동작을 실행하려면 **이벤트 핸들링(Event Handling)**이 필요하다.
+
+그리고 실제로 이벤트가 일어났을 때 실행되는 코드를 **이벤트 핸들러(Event Handler)**라고 한다. 보통 **이벤트 리스너(Event Listener)**라고도 부른다.
+
+## 4. 이벤트 핸들러 등록 방법
+
+이벤트 핸들러를 등록하는 방법은 크게 두 가지가 있다.
+
+### 4-1. 자바스크립트에서 등록하기
+
+```js
+const btn = document.querySelector('#myBtn');
+
+btn.onclick = function() {
+ console.log('Hello Codeit!');
+};
+```
+
+### 4-2. HTML 태그에서 바로 등록하기
+```html
+
```
\ No newline at end of file
diff --git a/src/content/posts/javaScript/Implementing-javascript-methods.md b/src/content/posts/javaScript/Implementing-javascript-methods.md
index 88cbaa2..ffd829b 100644
--- a/src/content/posts/javaScript/Implementing-javascript-methods.md
+++ b/src/content/posts/javaScript/Implementing-javascript-methods.md
@@ -1,81 +1,81 @@
----
-title: JavaScript의 reducer와 sort 직접 구현하며 배운 것들
-tags: [javaScript]
-date: "2024.11.09"
----
-최근 캐릭터 리스트 정렬 기능과 결정석 판매 금액을 구현하며
-Array.prototype.reduce()와 Array.prototype.sort()를 활용했던
-경험을 바탕으로
-이 메서드들의 작동 원리를 깊이 이해하기 위해 직접 구현해보았습니다.
-
-## reduce() 직접 구현하기
-`reduce()` 함수의 특징으로는 다음이 있습니다.
-- 초기값이 제공되지 않으면 첫 번째 요소를 초기 값으로 사용합니다.
-- 콜백 함수는 누적값(accumulator), 현재값(currentValue), 인덱스(index), 원본 배열(array)을
-인자로 받고 있습니다.
-- 원본 배열을 변형하지 않습니다.
-
-```js
-function myReduce(arr, callback, initialValue) {
- let accumulator = initialValue !== undefined ? initialValue : arr[0]; // 초기 값이 없을 시 배열의 첫번째 요소 사용
- let startIndex = initialValue !== undefined ? 0 : 1;
-
- for (let i = startIndex; i < arr.length; i++) {
- accumulator = callback(accumulator, arr[i], i, arr);
- }
-
- return accumulator;
-}
-
-// 사용 예시
-const sum = myReduce([1, 2, 3], (acc, cur) => acc + cur, 0);
-console.log(sum); // 6
-```
-
-### 결정석 계산 로직
-```ts
-const addPrice = (numbers: number[]): number => {
- return numbers.reduce((sum, current) => sum + current, 0)
-}
-```
-
-## sort() 직접 구현하기
-`sort()` 함수의 특징으로는 다음이 있습니다.
-- 비교 함수가 제공되지 않으면 유니코드 순으로 정렬합니다.
-- 비교 함수 반환 값이 음수면 a를 b 앞으로, 양수면 뒤로, 0이면 순서를 유지합니다.
-- 원본 배열을 직접 변형하는 특징이 있습니다.
-```js
- function mySort(arr, compareFn) {
- // arr 매개 변수를 사용해 원본 배열을 변형
- for (let i = 0; i < arr.length; i++) {
- for (let j = 0; j < arr.length - i - 1; j++) {
- const comparison = compareFn
- ? compareFn(arr[j], arr[j + 1])
- : String(arr[j]) > String(arr[j + 1]) ? 1 : -1; // 비교 함수가 없을 때 문자열로 변환 후 정렬
-
- if (comparison > 0) {
- [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
- }
- }
- }
- return arr;
-}
-
-// 사용 예시
-const characters = [{level: 45}, {level: 23}, {level: 78}];
-const sorted = mySort(characters, (a, b) => a.level - b.level);
-console.log(sorted); // 레벨 오름차순 정렬
-```
-
-### 캐릭터 정렬 로직
-```ts
-arr.sort((a, b) => {
- if (a.character_level === b.character_level) {
- return b.final_stat[42].stat_value - a.final_stat[42].stat_value // 전투력 내림차순 정렬
- }
- return b.character_level - a.character_level // 동일 전투력시 레벨 내림차순 정렬
-}),
-```
-
-## 마치며
+---
+title: JavaScript의 reducer와 sort 직접 구현하며 배운 것들
+tags: [javaScript]
+date: "2024.11.09"
+---
+최근 캐릭터 리스트 정렬 기능과 결정석 판매 금액을 구현하며
+Array.prototype.reduce()와 Array.prototype.sort()를 활용했던
+경험을 바탕으로
+이 메서드들의 작동 원리를 깊이 이해하기 위해 직접 구현해보았습니다.
+
+## reduce() 직접 구현하기
+`reduce()` 함수의 특징으로는 다음이 있습니다.
+- 초기값이 제공되지 않으면 첫 번째 요소를 초기 값으로 사용합니다.
+- 콜백 함수는 누적값(accumulator), 현재값(currentValue), 인덱스(index), 원본 배열(array)을
+인자로 받고 있습니다.
+- 원본 배열을 변형하지 않습니다.
+
+```js
+function myReduce(arr, callback, initialValue) {
+ let accumulator = initialValue !== undefined ? initialValue : arr[0]; // 초기 값이 없을 시 배열의 첫번째 요소 사용
+ let startIndex = initialValue !== undefined ? 0 : 1;
+
+ for (let i = startIndex; i < arr.length; i++) {
+ accumulator = callback(accumulator, arr[i], i, arr);
+ }
+
+ return accumulator;
+}
+
+// 사용 예시
+const sum = myReduce([1, 2, 3], (acc, cur) => acc + cur, 0);
+console.log(sum); // 6
+```
+
+### 결정석 계산 로직
+```ts
+const addPrice = (numbers: number[]): number => {
+ return numbers.reduce((sum, current) => sum + current, 0)
+}
+```
+
+## sort() 직접 구현하기
+`sort()` 함수의 특징으로는 다음이 있습니다.
+- 비교 함수가 제공되지 않으면 유니코드 순으로 정렬합니다.
+- 비교 함수 반환 값이 음수면 a를 b 앞으로, 양수면 뒤로, 0이면 순서를 유지합니다.
+- 원본 배열을 직접 변형하는 특징이 있습니다.
+```js
+ function mySort(arr, compareFn) {
+ // arr 매개 변수를 사용해 원본 배열을 변형
+ for (let i = 0; i < arr.length; i++) {
+ for (let j = 0; j < arr.length - i - 1; j++) {
+ const comparison = compareFn
+ ? compareFn(arr[j], arr[j + 1])
+ : String(arr[j]) > String(arr[j + 1]) ? 1 : -1; // 비교 함수가 없을 때 문자열로 변환 후 정렬
+
+ if (comparison > 0) {
+ [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
+ }
+ }
+ }
+ return arr;
+}
+
+// 사용 예시
+const characters = [{level: 45}, {level: 23}, {level: 78}];
+const sorted = mySort(characters, (a, b) => a.level - b.level);
+console.log(sorted); // 레벨 오름차순 정렬
+```
+
+### 캐릭터 정렬 로직
+```ts
+arr.sort((a, b) => {
+ if (a.character_level === b.character_level) {
+ return b.final_stat[42].stat_value - a.final_stat[42].stat_value // 전투력 내림차순 정렬
+ }
+ return b.character_level - a.character_level // 동일 전투력시 레벨 내림차순 정렬
+}),
+```
+
+## 마치며
사용하던 메서드를 직접 구현하며 `reduce`와 `sort`이외에도 `map`, `forEach`같은 메서드의 공식 문서를 보며 명확한 기능과 사용 방법을 알게 되었고 이런 경험을 통해 단순한 기능 구현뿐 아니라 언어 자체에 대한 이해가 중요하다는 점을 다시 한번 알게 되었습니다.
\ No newline at end of file
diff --git a/src/content/posts/javaScript/Javascript-Prototype.md b/src/content/posts/javaScript/Javascript-Prototype.md
index cd10012..48459ea 100644
--- a/src/content/posts/javaScript/Javascript-Prototype.md
+++ b/src/content/posts/javaScript/Javascript-Prototype.md
@@ -1,89 +1,89 @@
----
-title: Prototype 이해하기
-tags: [javaScript]
-date: "2024.11.16"
----
-자바스크립트는 객체 지향 언어로 객체를 상속하기 위해 프로토타입이라는 방식을 사용합니다.
-
-
-이 프로토타입 덕분에 객체에서 `hasOwnProperty`같은 메소드를 부모 객체로 부터 상속받아 사용할 수 있게 됩니다.
-```js
-const student = {
- name: 'Lee',
- score: 90
-};
-
-// student에는 hasOwnProperty 메소드가 없지만 아래 구문은 동작합니다.
-console.log(student.hasOwnProperty('name')); // true
-
-console.dir(student);
-```
-
-위의 내용이 이해하기 힘들다면 [자바스크립트의 값과 레퍼런스](https://www.spde3289.dev/posts/javascript/ValueAndRefernce) 게시글을 한번 읽고 오시는걸 추천합니다.
-
-## Prototype 이해하기 이전에
-자바스크립트의 원시값(문자열, 숫자 등)은 일시적으로 객체로 변환되어 프로토타입 메서드를 사용할 수 있습니다.
-이 현상을 오토박싱(Auto-boxing)이라고 하며 자바스크립트가 자동으로 값을 랩핑해 주기 때문에 명시적 래퍼 객체 생성은 지양해야 합니다.
-```js
-const num = 123; //
-const numObj = new Number(123); // 불필요한 객체 생성
-
-console.log(typeof num); // number
-console.log(typeof numObj); // "object" (원시값이 아님)
-```
-
-## [[Prototype]] vs prototype 프로퍼티
-### 두 프로퍼티의 역할
-- [[Prototype]]은 객체 내부의 인터널 슬롯으로 객체가 다른 객체의 속성을 참조할 때 사용됩니다.
-- prototype 프로퍼티는 함수 객체에서만 볼 수 있으며, 해당 함수를 생성자 함수로 사용할 때 새로 생성되는 객체의 [[Prototype]]을 지정하는 역할을 합니다.
-
-`__proto__`로 접근 가능하지만 `Object.getPrototypeOf()`사용을 권장합니다
-```js
-function Person(name) {
- this.name = name;
-}
-
-var foo = new Person('Lee');
-
-console.dir(Person); // prototype 프로퍼티가 있다.
-console.dir(foo); // prototype 프로퍼티가 없다.
-
-console.log(Object.getPrototypeOf(Person) === Function.prototype);
-console.log(Person.prototype === Object.getPrototypeOf(foo));
-```
-
-
-
-
-
-## Prototype chain
-객체의 프로퍼티나 메소드에 접근하려고 할 때 다음의 순서로 탐색을 합니다.
-- 자신의 프로퍼티 검색
-- 없으면 __proto__로 이동
-- 최상위 Object.prototype까지 반복
-- 없으면 undefined
-이를 프로토타입 체인이라고 합니다.
-
-## 프로토타입 활용
-이런 프로토타입을 이해하고 있으면 모든 인스턴스가 공통된 메서드를 가질 수 있습니다.
-```js
-// 프로토타입에 함수 할당
-function Person(name) {
- this.name = name;
-}
-
-// 모든 Person 인스턴스가 공유하는 메서드
-Person.prototype.greet = function () {
- console.log(`안녕! 나는 ${this.name}`);
-};
-
-const john = new Person("John");
-john.greet(); // "안녕! 나는 John"
-```
-내장 객체에도 `Array.prototype`를 이용해 커스텀 메서드를 생성할 수 있지만
-`prototype`이 오염될 수 도 있기 때문에 신중하게 사용해야 합니다.
-
-
-## 참고 자료
-[MDN 공식 문서](https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
+---
+title: Prototype 이해하기
+tags: [javaScript]
+date: "2024.11.16"
+---
+자바스크립트는 객체 지향 언어로 객체를 상속하기 위해 프로토타입이라는 방식을 사용합니다.
+
+
+이 프로토타입 덕분에 객체에서 `hasOwnProperty`같은 메소드를 부모 객체로 부터 상속받아 사용할 수 있게 됩니다.
+```js
+const student = {
+ name: 'Lee',
+ score: 90
+};
+
+// student에는 hasOwnProperty 메소드가 없지만 아래 구문은 동작합니다.
+console.log(student.hasOwnProperty('name')); // true
+
+console.dir(student);
+```
+
+위의 내용이 이해하기 힘들다면 [자바스크립트의 값과 레퍼런스](https://www.spde3289.dev/posts/javascript/ValueAndRefernce) 게시글을 한번 읽고 오시는걸 추천합니다.
+
+## Prototype 이해하기 이전에
+자바스크립트의 원시값(문자열, 숫자 등)은 일시적으로 객체로 변환되어 프로토타입 메서드를 사용할 수 있습니다.
+이 현상을 오토박싱(Auto-boxing)이라고 하며 자바스크립트가 자동으로 값을 랩핑해 주기 때문에 명시적 래퍼 객체 생성은 지양해야 합니다.
+```js
+const num = 123; //
+const numObj = new Number(123); // 불필요한 객체 생성
+
+console.log(typeof num); // number
+console.log(typeof numObj); // "object" (원시값이 아님)
+```
+
+## [[Prototype]] vs prototype 프로퍼티
+### 두 프로퍼티의 역할
+- [[Prototype]]은 객체 내부의 인터널 슬롯으로 객체가 다른 객체의 속성을 참조할 때 사용됩니다.
+- prototype 프로퍼티는 함수 객체에서만 볼 수 있으며, 해당 함수를 생성자 함수로 사용할 때 새로 생성되는 객체의 [[Prototype]]을 지정하는 역할을 합니다.
+
+`__proto__`로 접근 가능하지만 `Object.getPrototypeOf()`사용을 권장합니다
+```js
+function Person(name) {
+ this.name = name;
+}
+
+var foo = new Person('Lee');
+
+console.dir(Person); // prototype 프로퍼티가 있다.
+console.dir(foo); // prototype 프로퍼티가 없다.
+
+console.log(Object.getPrototypeOf(Person) === Function.prototype);
+console.log(Person.prototype === Object.getPrototypeOf(foo));
+```
+
+
+
+
+
+## Prototype chain
+객체의 프로퍼티나 메소드에 접근하려고 할 때 다음의 순서로 탐색을 합니다.
+- 자신의 프로퍼티 검색
+- 없으면 __proto__로 이동
+- 최상위 Object.prototype까지 반복
+- 없으면 undefined
+이를 프로토타입 체인이라고 합니다.
+
+## 프로토타입 활용
+이런 프로토타입을 이해하고 있으면 모든 인스턴스가 공통된 메서드를 가질 수 있습니다.
+```js
+// 프로토타입에 함수 할당
+function Person(name) {
+ this.name = name;
+}
+
+// 모든 Person 인스턴스가 공유하는 메서드
+Person.prototype.greet = function () {
+ console.log(`안녕! 나는 ${this.name}`);
+};
+
+const john = new Person("John");
+john.greet(); // "안녕! 나는 John"
+```
+내장 객체에도 `Array.prototype`를 이용해 커스텀 메서드를 생성할 수 있지만
+`prototype`이 오염될 수 도 있기 때문에 신중하게 사용해야 합니다.
+
+
+## 참고 자료
+[MDN 공식 문서](https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
[모던 자바스크립트 프로토타입](https://poiemaweb.com/js-prototype)
\ No newline at end of file
diff --git a/src/content/posts/javaScript/JsLoop.md b/src/content/posts/javaScript/JsLoop.md
index e5f2565..ef3b240 100644
--- a/src/content/posts/javaScript/JsLoop.md
+++ b/src/content/posts/javaScript/JsLoop.md
@@ -1,107 +1,107 @@
----
-title: 자바스크립트 반복문
-tags: [javaScript]
-date: "2023.04.15"
----
-## 반복문의 종류
-
-- for 문
-- for...in 문
-- for...of 문
-- while 문
-- do...while 문
-## for 문
-
-for 문은 특정한 조건이 거짓이 될 때 까지 반복한다.
-
-```javascript
-
- for([초기문]; [조건문]; [증감문]) {
- // 반복하여 실행할 코드
- };
-
- for(let i = 0; i <= 3; i++) {
- console.log(i); // 0부터 3까지 출력
- };
-
-
-```
-## for...in 문
-
-for...in 문은 객체의 속성을 열거할 때 유용하게 활용된다. 하지만 일반적인 배열에도 사용이 가능하다.
-
-```javascript
-
- const object = { a: 1, b: 2, c: 3 };
-
- for (const property in object) {
- console.log(property); // 객체의 프로퍼티를 출력해준다
- }
-
- // a
- // b
- // c
-
-
-```
-## for...of 문
-
-for...of 문은 배열이나 이터러블(iterable) 객체의 각 요소들을 반복적으로 순회하는 데 사용된다.
-
-```javascript
-
- const object = [
- {a: 1},
- {b: 2},
- {c: 3}
- ];
-
- for (const property of object) {
- console.log(property); // 객체의 프로퍼티를 출력해준다
- }
-
- // {a: 1}
- // {b: 2}
- // {c: 3}
-
-
-```
-## while 문
-
-while 문은 주어진 조건식이 참이 될 때 까지 반복한다.
-
-```javascript
-
- while (조건식) {
- // 반복 실행할 코드
- }
-
- let i = 1;
- while (i <= 10) {
- console.log(i); // 1부터 10까지 출력
- i++;
- }
-
-
-```
-## do...while 문
-
-do...while 문은 우선 코드를 실행 한 후 조건식이 참이면 반복하여 실행한다.
-
-```javascript
-
- do {
- // 반복 실행할 코드
- } while (조건식);
-
- let i = 1;
- do {
- console.log(i); // 1부터 10까지 출력
- i++;
- } while (i <= 10);
-
-
-```
-참고자료 :
-
-[https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration](https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration)
+---
+title: 자바스크립트 반복문
+tags: [javaScript]
+date: "2023.04.15"
+---
+## 반복문의 종류
+
+- for 문
+- for...in 문
+- for...of 문
+- while 문
+- do...while 문
+## for 문
+
+for 문은 특정한 조건이 거짓이 될 때 까지 반복한다.
+
+```javascript
+
+ for([초기문]; [조건문]; [증감문]) {
+ // 반복하여 실행할 코드
+ };
+
+ for(let i = 0; i <= 3; i++) {
+ console.log(i); // 0부터 3까지 출력
+ };
+
+
+```
+## for...in 문
+
+for...in 문은 객체의 속성을 열거할 때 유용하게 활용된다. 하지만 일반적인 배열에도 사용이 가능하다.
+
+```javascript
+
+ const object = { a: 1, b: 2, c: 3 };
+
+ for (const property in object) {
+ console.log(property); // 객체의 프로퍼티를 출력해준다
+ }
+
+ // a
+ // b
+ // c
+
+
+```
+## for...of 문
+
+for...of 문은 배열이나 이터러블(iterable) 객체의 각 요소들을 반복적으로 순회하는 데 사용된다.
+
+```javascript
+
+ const object = [
+ {a: 1},
+ {b: 2},
+ {c: 3}
+ ];
+
+ for (const property of object) {
+ console.log(property); // 객체의 프로퍼티를 출력해준다
+ }
+
+ // {a: 1}
+ // {b: 2}
+ // {c: 3}
+
+
+```
+## while 문
+
+while 문은 주어진 조건식이 참이 될 때 까지 반복한다.
+
+```javascript
+
+ while (조건식) {
+ // 반복 실행할 코드
+ }
+
+ let i = 1;
+ while (i <= 10) {
+ console.log(i); // 1부터 10까지 출력
+ i++;
+ }
+
+
+```
+## do...while 문
+
+do...while 문은 우선 코드를 실행 한 후 조건식이 참이면 반복하여 실행한다.
+
+```javascript
+
+ do {
+ // 반복 실행할 코드
+ } while (조건식);
+
+ let i = 1;
+ do {
+ console.log(i); // 1부터 10까지 출력
+ i++;
+ } while (i <= 10);
+
+
+```
+참고자료 :
+
+[https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration](https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration)
diff --git a/src/content/posts/javaScript/Jsdoc.md b/src/content/posts/javaScript/Jsdoc.md
index f2dbcb6..fa92a4f 100644
--- a/src/content/posts/javaScript/Jsdoc.md
+++ b/src/content/posts/javaScript/Jsdoc.md
@@ -1,81 +1,81 @@
----
-title: Jsdoc주석에 대해서 알아보자
-tags: [javaScript]
-date: "2023.02.26"
----
-JSDoc 주석은 JavaScript 코드에 추가되는 문서화 주석이다. 이 주석은 함수, 변수, 객체의 설명, 타입정보 등을 제공할 수 있다.
-
-## JSDoc 주석 사용법
-
-```javascript
-
- /**
- * 가격과 개수 입력받아 출력하는 함수
- * @param {number} price 가격 입력란 입니다
- * @param {number} count 개수 입력란 입니다
- * @returns 가격과 개수를 곱한 값을 출력합니다.
- */
- const sum = (price, count) => {
- return price * count;
- };
-
-
-```
-
-
-이와 같이 함수를 호출 할 때 주석를 보여주게 된다.
-
-## @deprecated
-
-해당태그를 사용하면 취소선을 그어준다
-
-```javascript
-
- /**
- * 가격과 개수 입력받아 출력하는 함수
- * @param {number} price 가격 입력란 입니다
- * @param {number} count 개수 입력란 입니다
- * @returns 가격과 개수를 곱한 값을 출력합니다.
- */
- const sum = (price, count) => {
- return price * count;
- };
-
-
-```
-
-## @type
-
-해당태그를 사용하면 타입을 명시 할 수 있다.
-
-```javascript
-
- /**
- * @type {string}
- */
- const name = '곽철용';
-
-
-```
-
-## @see
-
-해당태그를 리소스를 참조할 떄 사용할 수 있다.
-
-```javascript
-
- /**
- * @see {@link https://example.com| 더 많은 정보}
- */
- const sum = ({price, count}) => {
- return price * count;
- };
-
-
-```
-
-이것 말고도 더 다양한 태그들이 있으니 JSDoc 참고 사이트를 확인해보도록 하자
-
-## 참고 사이트
-
-[https://jsdoc.app/](https://jsdoc.app/)
+---
+title: Jsdoc주석에 대해서 알아보자
+tags: [javaScript]
+date: "2023.02.26"
+---
+JSDoc 주석은 JavaScript 코드에 추가되는 문서화 주석이다. 이 주석은 함수, 변수, 객체의 설명, 타입정보 등을 제공할 수 있다.
+
+## JSDoc 주석 사용법
+
+```javascript
+
+ /**
+ * 가격과 개수 입력받아 출력하는 함수
+ * @param {number} price 가격 입력란 입니다
+ * @param {number} count 개수 입력란 입니다
+ * @returns 가격과 개수를 곱한 값을 출력합니다.
+ */
+ const sum = (price, count) => {
+ return price * count;
+ };
+
+
+```
+
+
+이와 같이 함수를 호출 할 때 주석를 보여주게 된다.
+
+## @deprecated
+
+해당태그를 사용하면 취소선을 그어준다
+
+```javascript
+
+ /**
+ * 가격과 개수 입력받아 출력하는 함수
+ * @param {number} price 가격 입력란 입니다
+ * @param {number} count 개수 입력란 입니다
+ * @returns 가격과 개수를 곱한 값을 출력합니다.
+ */
+ const sum = (price, count) => {
+ return price * count;
+ };
+
+
+```
+
+## @type
+
+해당태그를 사용하면 타입을 명시 할 수 있다.
+
+```javascript
+
+ /**
+ * @type {string}
+ */
+ const name = '곽철용';
+
+
+```
+
+## @see
+
+해당태그를 리소스를 참조할 떄 사용할 수 있다.
+
+```javascript
+
+ /**
+ * @see {@link https://example.com| 더 많은 정보}
+ */
+ const sum = ({price, count}) => {
+ return price * count;
+ };
+
+
+```
+
+이것 말고도 더 다양한 태그들이 있으니 JSDoc 참고 사이트를 확인해보도록 하자
+
+## 참고 사이트
+
+[https://jsdoc.app/](https://jsdoc.app/)
diff --git a/src/content/posts/javaScript/NpmVsYarn.md b/src/content/posts/javaScript/NpmVsYarn.md
index e500775..5a462d8 100644
--- a/src/content/posts/javaScript/NpmVsYarn.md
+++ b/src/content/posts/javaScript/NpmVsYarn.md
@@ -1,19 +1,19 @@
----
-title: npm vs yarn
-tags: [javaScript]
-date: "2023.03.30"
----
-## npm
-
-npm(Node Package Manager)은 Node.js의 기본 패키지 매니저로 라이브러리와 패키지를 관리하고 설치, 업데이트, 제거 등을 할 수 있다. package.json 파일을 사용해 의존성과 버젼을 관리한다.
-
-## yarn
-
-yarn은 Facebook에서 만든 패키지 매니저인데 순차적으로 설치하는 npm과 달리 병렬로 설치해 속도 도 더 빠르다. 또 패키지 버젼 관리에 용이한데 npm install을 한다고 해서 모든 개발자가 동일한 버젼의 패키지를 다운 받는게 아니다. 하지만 yarn.lock이 추가되면서 모두 동일한 버젼을 다운 받을 수 있다.
-
-## npm vs yarn
-
-
-[https://javascript.plainenglish.io/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f](https://javascript.plainenglish.io/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f)
-
-[https://www.digitalocean.com/community/tutorials/nodejs-npm-yarn-cheatsheet](https://www.digitalocean.com/community/tutorials/nodejs-npm-yarn-cheatsheet)
+---
+title: npm vs yarn
+tags: [javaScript]
+date: "2023.03.30"
+---
+## npm
+
+npm(Node Package Manager)은 Node.js의 기본 패키지 매니저로 라이브러리와 패키지를 관리하고 설치, 업데이트, 제거 등을 할 수 있다. package.json 파일을 사용해 의존성과 버젼을 관리한다.
+
+## yarn
+
+yarn은 Facebook에서 만든 패키지 매니저인데 순차적으로 설치하는 npm과 달리 병렬로 설치해 속도 도 더 빠르다. 또 패키지 버젼 관리에 용이한데 npm install을 한다고 해서 모든 개발자가 동일한 버젼의 패키지를 다운 받는게 아니다. 하지만 yarn.lock이 추가되면서 모두 동일한 버젼을 다운 받을 수 있다.
+
+## npm vs yarn
+
+
+[https://javascript.plainenglish.io/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f](https://javascript.plainenglish.io/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f)
+
+[https://www.digitalocean.com/community/tutorials/nodejs-npm-yarn-cheatsheet](https://www.digitalocean.com/community/tutorials/nodejs-npm-yarn-cheatsheet)
diff --git a/src/content/posts/javaScript/PackageJson.md b/src/content/posts/javaScript/PackageJson.md
index 86e7c71..0622a52 100644
--- a/src/content/posts/javaScript/PackageJson.md
+++ b/src/content/posts/javaScript/PackageJson.md
@@ -1,52 +1,52 @@
----
-title: package.json에 대해서
-tags: [javaScript]
-date: "2023.04.06"
----
-## package.json이란?
-
-package.json이란 패키지 매니저로 설치한 모듈들의 의존성을 명세하고 관리하는 파일이다.
-
-## 구성요소
-
-## name, version
-
-패키지의 이름과 버젼을 명세하기 위해 필요한데 몇가지 규직이 존재한다.
-
-- 이름은 214자 이하여야 한다.
-- 범위가 지정된 패키지의 이름은 점 또는 밑줄로 시작할 수 있다. 범위가 없으면 허용되지 않는다.
-- 새 패키지의 이름에는 대문자가 없어야 한다.
-- 이름은 URL의 일부, 명령줄의 인수 및 폴더 이름이 된다. 따라서 이름에는 URL 안전이 아닌 문자를 포함할 수 없다.
-## description
-
-패키지에 대한 설명을 기술한다. npm에서 검색됐을 때 리스트에 표시되기 때문에 사람들이 패키지를 찾아 내고 이해하는 데 도움이 된다.
-
-## keywords
-
-키워드를 문자열 배열로 설명한다. npm에서 검색됐을 때 리스트에 표시되기 때문에 사람들이 패키지를 찾아 내고 이해하는 데 도움이 된다.
-
-## main
-
-프로젝트의 진입점이 되는 파일을 지정한다. 일반적으로 "index.js"와 같이 프로젝트의 주요 JavaScript 파일을 가리키는 경로를 작성합니다.
-
-## scripts
-
-프로젝트에서 사용할 수 있는 명령어 스크립트들을 정의한다. 이는 개발, 빌드, 테스트 등의 작업을 자동화하는 데 사용되고 예를 들어, "start", "build", "test" 등의 스크립트를 지정할 수 있다.
-
-## dependencies
-
-프로젝트가 의존하고 있는 패키지와 해당 버전에 대한 정보를 명시한다.
-
-## devDependencies
-
-개발시에만 필요한 패키지와 해당 버전 정보를 명시한다. 예를들어 프로젝트 개발 및 빌드 도구, 테스트 프레임워크, 코드 포맷터 등을 포함한다.
-
-## author
-
-프로젝트의 작성자 정보를 포함한다. 보통 이름 이메일주소, 웹사이트 등을 작성한다.
-
-## license
-
-프로젝트의 라이센스에 대해 기재한다. 프로젝트의 사용, 수정, 배포하는데 적용되는 규정을 나타내는 것 이다.
-
-[https://docs.npmjs.com/cli/v9/configuring-npm/package-json](https://docs.npmjs.com/cli/v9/configuring-npm/package-json)
+---
+title: package.json에 대해서
+tags: [javaScript]
+date: "2023.04.06"
+---
+## package.json이란?
+
+package.json이란 패키지 매니저로 설치한 모듈들의 의존성을 명세하고 관리하는 파일이다.
+
+## 구성요소
+
+## name, version
+
+패키지의 이름과 버젼을 명세하기 위해 필요한데 몇가지 규직이 존재한다.
+
+- 이름은 214자 이하여야 한다.
+- 범위가 지정된 패키지의 이름은 점 또는 밑줄로 시작할 수 있다. 범위가 없으면 허용되지 않는다.
+- 새 패키지의 이름에는 대문자가 없어야 한다.
+- 이름은 URL의 일부, 명령줄의 인수 및 폴더 이름이 된다. 따라서 이름에는 URL 안전이 아닌 문자를 포함할 수 없다.
+## description
+
+패키지에 대한 설명을 기술한다. npm에서 검색됐을 때 리스트에 표시되기 때문에 사람들이 패키지를 찾아 내고 이해하는 데 도움이 된다.
+
+## keywords
+
+키워드를 문자열 배열로 설명한다. npm에서 검색됐을 때 리스트에 표시되기 때문에 사람들이 패키지를 찾아 내고 이해하는 데 도움이 된다.
+
+## main
+
+프로젝트의 진입점이 되는 파일을 지정한다. 일반적으로 "index.js"와 같이 프로젝트의 주요 JavaScript 파일을 가리키는 경로를 작성합니다.
+
+## scripts
+
+프로젝트에서 사용할 수 있는 명령어 스크립트들을 정의한다. 이는 개발, 빌드, 테스트 등의 작업을 자동화하는 데 사용되고 예를 들어, "start", "build", "test" 등의 스크립트를 지정할 수 있다.
+
+## dependencies
+
+프로젝트가 의존하고 있는 패키지와 해당 버전에 대한 정보를 명시한다.
+
+## devDependencies
+
+개발시에만 필요한 패키지와 해당 버전 정보를 명시한다. 예를들어 프로젝트 개발 및 빌드 도구, 테스트 프레임워크, 코드 포맷터 등을 포함한다.
+
+## author
+
+프로젝트의 작성자 정보를 포함한다. 보통 이름 이메일주소, 웹사이트 등을 작성한다.
+
+## license
+
+프로젝트의 라이센스에 대해 기재한다. 프로젝트의 사용, 수정, 배포하는데 적용되는 규정을 나타내는 것 이다.
+
+[https://docs.npmjs.com/cli/v9/configuring-npm/package-json](https://docs.npmjs.com/cli/v9/configuring-npm/package-json)
diff --git a/src/content/posts/javaScript/Require-vs-Import.md b/src/content/posts/javaScript/Require-vs-Import.md
index 079e2f6..f86907b 100644
--- a/src/content/posts/javaScript/Require-vs-Import.md
+++ b/src/content/posts/javaScript/Require-vs-Import.md
@@ -1,55 +1,55 @@
----
-title: require와 import의 차이점
-tags: [javaScript]
-date: "2024.09.07"
----
-라이브쳇 개발을 하며 백엔드 서비스에는 require를 프론트 서비스에는 import를 사용했는데 문뜩
-어떤 차이가 있는지 궁금해져서 정리해보려 합니다.
-
-## require와 import
-
-`require`와 `import`는 자바스크립트에서 모듈을 불러오는 문법으로
-`require`는 CommonJS에서 사용하는 모듈 시스템 `import`는 ES6에서 사용하는 모듈 시스템 입니다.
-
-```javascript
-const module = require('module-name');
-
-module.exports = module;
-```
-```javascript
-import module from 'module-name';
-
-export default module;
-```
-
-## 사용 환경
-
-### require
-CommonJS는 Node.js 환경에서 지원되고 브라우저 환경에서 사용하기 위해선 Wabpack같은 번들러가 필요합니다.
-
-### import
-ES6 모듈은 최신 JavaScript 표준이기 때문에 브라우저와 Node.js 환경 모두 지원합니다.
-
-## 동작 방식
-
-### require
-런타임에 모듈을 로드하며 가져온 모듈은 캐싱되어 여러번 호출해도 처음에 로드된 모듈만을 반환 합니다.
-
-### import
-컴파일 시점에 모듈을 로드하며 정적 분석을 통해 의존성과 최적화가 가능합니다.
-하지만 `import()` 함수를 이용해 동적으로 가져온 모듈은 최적화를 할 수 없습니다.
-
-## 그래서?
-`import`가 최신 표준 ES6 Modules를 따르고 있기 때문에 새로운 프로젝트에서는 `import`를 사용하는 것이 권장되나
-기존 프로젝트의 호환성을 고려한다면 `require`를 사용해도 무관합니다.
-
-마지막으로 Node.js환경에서 `import`를 사용하는 방법에 대해 알려드리고 끝내도록 하겠습니다.
-` package.json`파일을 보면 `type` 속성을 `"module"`로 변경해주면 됩니다.
-
-
-
-```json
-{
- "type": "module"
-}
+---
+title: require와 import의 차이점
+tags: [javaScript]
+date: "2024.09.07"
+---
+라이브쳇 개발을 하며 백엔드 서비스에는 require를 프론트 서비스에는 import를 사용했는데 문뜩
+어떤 차이가 있는지 궁금해져서 정리해보려 합니다.
+
+## require와 import
+
+`require`와 `import`는 자바스크립트에서 모듈을 불러오는 문법으로
+`require`는 CommonJS에서 사용하는 모듈 시스템 `import`는 ES6에서 사용하는 모듈 시스템 입니다.
+
+```javascript
+const module = require('module-name');
+
+module.exports = module;
+```
+```javascript
+import module from 'module-name';
+
+export default module;
+```
+
+## 사용 환경
+
+### require
+CommonJS는 Node.js 환경에서 지원되고 브라우저 환경에서 사용하기 위해선 Wabpack같은 번들러가 필요합니다.
+
+### import
+ES6 모듈은 최신 JavaScript 표준이기 때문에 브라우저와 Node.js 환경 모두 지원합니다.
+
+## 동작 방식
+
+### require
+런타임에 모듈을 로드하며 가져온 모듈은 캐싱되어 여러번 호출해도 처음에 로드된 모듈만을 반환 합니다.
+
+### import
+컴파일 시점에 모듈을 로드하며 정적 분석을 통해 의존성과 최적화가 가능합니다.
+하지만 `import()` 함수를 이용해 동적으로 가져온 모듈은 최적화를 할 수 없습니다.
+
+## 그래서?
+`import`가 최신 표준 ES6 Modules를 따르고 있기 때문에 새로운 프로젝트에서는 `import`를 사용하는 것이 권장되나
+기존 프로젝트의 호환성을 고려한다면 `require`를 사용해도 무관합니다.
+
+마지막으로 Node.js환경에서 `import`를 사용하는 방법에 대해 알려드리고 끝내도록 하겠습니다.
+` package.json`파일을 보면 `type` 속성을 `"module"`로 변경해주면 됩니다.
+
+
+
+```json
+{
+ "type": "module"
+}
```
\ No newline at end of file
diff --git a/src/content/posts/javaScript/Symbol.md b/src/content/posts/javaScript/Symbol.md
index ca81d73..d22bbe7 100644
--- a/src/content/posts/javaScript/Symbol.md
+++ b/src/content/posts/javaScript/Symbol.md
@@ -1,79 +1,79 @@
----
-title: Symbol에 대해서
-tags: [javaScript]
-date: "2023.04.11"
----
-Symbol은 ES6에서 추가된 7번째 데이터 타입이다. 심볼은 주로 이름의 충돌 위험이 없는 객체의 프로퍼티 키를 만들기 위해서 사용한다.
-
-## Symbol의 생성
-
-Symbol은 Symbol()함수를 호출하어 생성한다 이때 생성된 Symbol은 객체가 아니라 변경 불가능한 원시타입의 값이다.
-
-```javascript
-
- const mySymbol = Symbol();
-
- console.log(mySymbol); // Symbol()
- console.log(typeof mySymbol); // symbol
-
-
-```
-이렇게 보면 생성자 함수로 객체를 생성하는 것처럼 보이지만 Symbol함수는 String, Number, Boolean 생성자와 달리 new 연산자와 함께 호출하지 않는다.
-
-```javascript
-
- new Symbol(); // TypeError: Symbol is not a constructor
-
-
-```
-Symbol함수에는 문자열을 인수로 전달할 수 있는데 이 문자열은 심벌 값에 대한 설명, 디버깅 용도로만 사용된다.
-
-```javascript
-
- // 심벌 값에 대한 설명이 같더라도 유일무이한 심벌 값을 생성한다.
- const mtSymbol1 = Symbol("mySymbol");
- const mtSymbol2 = Symbol("mySymbol");
-
- console.log(mySymbol1 === mtSymbol2); //false
-
-
-```
-## Symbol과 프로퍼티 은닉
-
-어떠한 외부에서 가져온 객체에 값을 추가해야 하는 상황이 있다고 할때 symbol을 이용할 수 있다.
-
-```javascript
-
- const obj ={};
-
- let my = Symbol("my");
-
- obj[my] = "나야!";
-
- for(const key in obj){
- console.log(key); // 아무것도 출력되지 않는다
- };
-
- console.log(Object.keys(obj)); // []
- console.log(Object.getOwnPropertyNames(obj)); // []
- console.log(obj); // { [Symbol(my)]: 나야! }
- console.log(obj[my]); // 나야!
-
-
-```
-심벌은 중복되지 않는 상수 값을 생성하는 것은 물론 기존에 작성된 코드에 영향을 주지 않고 새로운 프로퍼티를 추가하기 위해 도입되었다.
-
-## Symbol 객체
-
-한번 브라우저 콘솔에서 Symbol함수를 참조해보자
-
-
-자바스크립트에서 기본제공하는 심벌 값을 Well-know Symbol 이라고 부른다. 이는 자바스크립트 엔진의 내부 알고리즘에 사용되는데 예를 들어 Array, String, Map, Set, TypedArray, arguments, NodeList, HtmlCollection과 같이 for of문으로 순회 가능한 빌트인 이터러블은 Well-known Symbol인 symbol.iterator를 키로 갖는 메서드를 가지며, symbol.iterator 메서드를 호출하면 이터레이터를 반환하도록 ECMAScript 사양에 규정되어 있다. 빌트인 이터러블은 이터레이션 프로토콜을 준수한다. 만약 빌트인 이터레블이 아닌 객체를 이터레블처럼 동작하도록 구현 하고 싶으면 이터레이션 프로토콜을 따르면 된다.
-
-참고자료 :
-
-[https://ko.javascript.info/symbol](https://ko.javascript.info/symbol)
-
-[https://poiemaweb.com/es6-symbol](https://poiemaweb.com/es6-symbol)
-
-[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol)
+---
+title: Symbol에 대해서
+tags: [javaScript]
+date: "2023.04.11"
+---
+Symbol은 ES6에서 추가된 7번째 데이터 타입이다. 심볼은 주로 이름의 충돌 위험이 없는 객체의 프로퍼티 키를 만들기 위해서 사용한다.
+
+## Symbol의 생성
+
+Symbol은 Symbol()함수를 호출하어 생성한다 이때 생성된 Symbol은 객체가 아니라 변경 불가능한 원시타입의 값이다.
+
+```javascript
+
+ const mySymbol = Symbol();
+
+ console.log(mySymbol); // Symbol()
+ console.log(typeof mySymbol); // symbol
+
+
+```
+이렇게 보면 생성자 함수로 객체를 생성하는 것처럼 보이지만 Symbol함수는 String, Number, Boolean 생성자와 달리 new 연산자와 함께 호출하지 않는다.
+
+```javascript
+
+ new Symbol(); // TypeError: Symbol is not a constructor
+
+
+```
+Symbol함수에는 문자열을 인수로 전달할 수 있는데 이 문자열은 심벌 값에 대한 설명, 디버깅 용도로만 사용된다.
+
+```javascript
+
+ // 심벌 값에 대한 설명이 같더라도 유일무이한 심벌 값을 생성한다.
+ const mtSymbol1 = Symbol("mySymbol");
+ const mtSymbol2 = Symbol("mySymbol");
+
+ console.log(mySymbol1 === mtSymbol2); //false
+
+
+```
+## Symbol과 프로퍼티 은닉
+
+어떠한 외부에서 가져온 객체에 값을 추가해야 하는 상황이 있다고 할때 symbol을 이용할 수 있다.
+
+```javascript
+
+ const obj ={};
+
+ let my = Symbol("my");
+
+ obj[my] = "나야!";
+
+ for(const key in obj){
+ console.log(key); // 아무것도 출력되지 않는다
+ };
+
+ console.log(Object.keys(obj)); // []
+ console.log(Object.getOwnPropertyNames(obj)); // []
+ console.log(obj); // { [Symbol(my)]: 나야! }
+ console.log(obj[my]); // 나야!
+
+
+```
+심벌은 중복되지 않는 상수 값을 생성하는 것은 물론 기존에 작성된 코드에 영향을 주지 않고 새로운 프로퍼티를 추가하기 위해 도입되었다.
+
+## Symbol 객체
+
+한번 브라우저 콘솔에서 Symbol함수를 참조해보자
+
+
+자바스크립트에서 기본제공하는 심벌 값을 Well-know Symbol 이라고 부른다. 이는 자바스크립트 엔진의 내부 알고리즘에 사용되는데 예를 들어 Array, String, Map, Set, TypedArray, arguments, NodeList, HtmlCollection과 같이 for of문으로 순회 가능한 빌트인 이터러블은 Well-known Symbol인 symbol.iterator를 키로 갖는 메서드를 가지며, symbol.iterator 메서드를 호출하면 이터레이터를 반환하도록 ECMAScript 사양에 규정되어 있다. 빌트인 이터러블은 이터레이션 프로토콜을 준수한다. 만약 빌트인 이터레블이 아닌 객체를 이터레블처럼 동작하도록 구현 하고 싶으면 이터레이션 프로토콜을 따르면 된다.
+
+참고자료 :
+
+[https://ko.javascript.info/symbol](https://ko.javascript.info/symbol)
+
+[https://poiemaweb.com/es6-symbol](https://poiemaweb.com/es6-symbol)
+
+[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol)
diff --git a/src/content/posts/javaScript/Tdz-temporal-dead-zone-summary.md b/src/content/posts/javaScript/Tdz-temporal-dead-zone-summary.md
index db6462d..774a65a 100644
--- a/src/content/posts/javaScript/Tdz-temporal-dead-zone-summary.md
+++ b/src/content/posts/javaScript/Tdz-temporal-dead-zone-summary.md
@@ -1,46 +1,46 @@
----
-title: TDZ(Temporal Dead Zone) 정리
-tags: [javaScript]
-date: "2025.09.18"
----
-오늘은 자바스크립트에서 자주 헷갈릴 수 있는 개념인 **TDZ(Temporal Dead Zone)**에 대해 정리해 보았다.
-
-## TDZ란 무엇인가
-
-TDZ는 직역하면 "임시 사각지대"인데, **`let`과 `const`로 선언된 변수가 초기화되기 전까지 접근할 수 없는 구간**을 말한다.
-
-즉, 변수가 스코프 안에 존재하긴 하지만 아직 사용할 수 없는 상태를 의미한다. 이 구간에서 변수를 참조하려 하면 `ReferenceError`가 발생한다.
-
-## 예시
-
-```js
-console.log(a); // ReferenceError
-let a = 10;
-```
-
-위 코드에서 변수 `a`는 선언되기 전이 아니라, 사실상 스코프 안에 이미 "존재"하고 있다. 하지만 초기화되기 전이므로 TDZ에 걸려 접근할 수 없는 것이다.
-
-`var`와 비교하면 차이가 더 명확해진다.
-
-```js
-console.log(b); // undefined
-var b = 10;
-```
-
-`var`는 호이스팅 과정에서 `undefined`로 초기화되기 때문에 접근이 가능하지만, `let`과 `const`는 TDZ 때문에 초기화되기 전에는 접근할 수 없다.
-
-## TDZ가 중요한 이유
-
-1. **예상치 못한 동작 방지**
- - `var`에서 자주 발생하던 “호이스팅으로 인한 의도치 않은 값 참조” 문제를 막아 준다.
-2. **더 안전한 코드 작성**
- - 초기화 전 접근을 차단하기 때문에, 선언과 동시에 명확하게 값을 할당하도록 유도한다.
-3. **코드 가독성 향상**
- - 변수가 언제부터 유효한지 코드 상에서 명확해진다.
-
-## 정리
-
-- TDZ는 `let`과 `const` 변수가 선언된 스코프 안에서 초기화되기 전까지 접근할 수 없는 구간이다.
-- TDZ 구간에서 변수를 참조하면 `ReferenceError`가 발생한다.
-- `var`와 달리 TDZ가 있기 때문에 더 안전하고 예측 가능한 코드를 작성할 수 있다.
-
+---
+title: TDZ(Temporal Dead Zone) 정리
+tags: [javaScript]
+date: "2025.09.18"
+---
+오늘은 자바스크립트에서 자주 헷갈릴 수 있는 개념인 **TDZ(Temporal Dead Zone)**에 대해 정리해 보았다.
+
+## TDZ란 무엇인가
+
+TDZ는 직역하면 "임시 사각지대"인데, **`let`과 `const`로 선언된 변수가 초기화되기 전까지 접근할 수 없는 구간**을 말한다.
+
+즉, 변수가 스코프 안에 존재하긴 하지만 아직 사용할 수 없는 상태를 의미한다. 이 구간에서 변수를 참조하려 하면 `ReferenceError`가 발생한다.
+
+## 예시
+
+```js
+console.log(a); // ReferenceError
+let a = 10;
+```
+
+위 코드에서 변수 `a`는 선언되기 전이 아니라, 사실상 스코프 안에 이미 "존재"하고 있다. 하지만 초기화되기 전이므로 TDZ에 걸려 접근할 수 없는 것이다.
+
+`var`와 비교하면 차이가 더 명확해진다.
+
+```js
+console.log(b); // undefined
+var b = 10;
+```
+
+`var`는 호이스팅 과정에서 `undefined`로 초기화되기 때문에 접근이 가능하지만, `let`과 `const`는 TDZ 때문에 초기화되기 전에는 접근할 수 없다.
+
+## TDZ가 중요한 이유
+
+1. **예상치 못한 동작 방지**
+ - `var`에서 자주 발생하던 “호이스팅으로 인한 의도치 않은 값 참조” 문제를 막아 준다.
+2. **더 안전한 코드 작성**
+ - 초기화 전 접근을 차단하기 때문에, 선언과 동시에 명확하게 값을 할당하도록 유도한다.
+3. **코드 가독성 향상**
+ - 변수가 언제부터 유효한지 코드 상에서 명확해진다.
+
+## 정리
+
+- TDZ는 `let`과 `const` 변수가 선언된 스코프 안에서 초기화되기 전까지 접근할 수 없는 구간이다.
+- TDZ 구간에서 변수를 참조하면 `ReferenceError`가 발생한다.
+- `var`와 달리 TDZ가 있기 때문에 더 안전하고 예측 가능한 코드를 작성할 수 있다.
+
diff --git a/src/content/posts/javaScript/ValueAndRefernce.md b/src/content/posts/javaScript/ValueAndRefernce.md
index a490c21..ac51a17 100644
--- a/src/content/posts/javaScript/ValueAndRefernce.md
+++ b/src/content/posts/javaScript/ValueAndRefernce.md
@@ -1,148 +1,148 @@
----
-title: 자바스크립트의 값과 레퍼런스
-tags: [javaScript]
-date: "2024.06.08"
----
-오늘은 you don`t Know JavaScript 책을 읽고 그 내용에 관해 글을 써보겠습니다.
-
-자바스크립트에는 원시 자료형(값)과 참조 자료형(레퍼런스)이 존재합니다. 원시 자료형은 불변 하고 값 자체가 변수에 할당된다는 특징이 있고
-참조 자료형은 변경 가능하고 변수에 저장된 메모리 주소가 할당된다는 특징이 있습니다.
-
-### 값 (Value)
-
-```
-string: 문자열. 예: 'Hello'
-
-number: 숫자. 예: 42
-
-bigint: 매우 큰 숫자. 예: 9007199254740991n
-
-boolean: true 또는 false
-
-undefined: 값이 정의되지 않았을 때의 상태
-
-symbol: 고유하고 변경할 수 없는 값
-
-null: 값이 존재하지 않음을 나타내는 특수한 값
-```
-
->이런 원시 데이터(값)의 특징은 복사라는 개념을 따릅니다.
-
-예를 들어 숫자 값을 변수에 할당하면 그 값 자체가 복사 됩니다. 아래의 예시 처럼 x의 값을 바꿔도 y는 영향을 받지 않습니다.
-
-```javascript
-let x = 10;
-let y = x; // x의 값을 y에 복사
-
-x = 20; // x의 값만 변경됨
-
-console.log(y); // 10
-```
-### 레퍼런스 (Reference)
-
-```
-Object : 키(key)-값(value) 쌍의 집합. 예: {name: 'Alice', age: 25}
-
-Array : 리스트 형태의 자료형. 예: ['apple', 'banana', 'cherry']
-
-Function : 특정 작업을 실행하는 코드 블록 이외에도 복잡한 데이터를 가리킵니다.
-```
-이런 복잡 데이터는 값 자체가 아니라 데이터가 저장된 메모리 주소를 저장합니다. 즉 변수는 데이터를 가르키는 주소만 저장하고 여러 변수가 같은 메모리 주소를 가르킬 수 있습니다.
-
-여기서 obj1과 obj2는 같은 객체를 참조하고 있기 때문에 obj2의 값을 변경하면 obj1에도 영향을 줍니다.
-
-```javascript
-let obj1 = { name: 'Alice', age: 25 };
-let obj2 = obj1; // obj2는 obj1을 참조
-
-obj2.age = 30; // obj2의 값을 변경하면 obj1에도 영향을 미침
-
-console.log(obj1.age); // 30
-```
-## 값 복사와 레퍼런스 복사의 차이
-
-한번 정리해보자면
-
-**값 복사**
-- 원시 데이터는 변수에 할당될 때 그 값이 할당됩니다
-- 복사된 변수는 독립적으로 하나의 값을 변경해도 다른 값에 영향을 미치지 않습니다.
-
-**레퍼런스 복사**
-- 객체나 배열은 변수에 할당될 때 그 값을 참조하는 메모리 주소가 복사됩니다.
-- 같은 데이터를 참조하는 여러 변수에서 변경 사항이 공유됩니다.
-
-자바스크립트가 복잡 데이터 타입에 대해서 레퍼런스 복사를 이용하는 이유는 메모리 효율성과 최적화 때문입니다.
-원시 데이터와 달리 객체나 배열은 데이터가 중첩될 경우 구조가 매우 복잡해질 수 있어 메모리 주소 복사를 통해 효율성을 높입니다.
-
-### 얕은 복사와 깊은 복사
-
-그러면 객체나 배열을 다룰때 불필요한 데이터 변경을 피하기 위한 방법이 있습니다.
-
-#### 얕은 복사
-
-( ... ) 스프레드 연산자를 사용해 얕은 복사를 수행할 수 있으며 객체나 배열의 최상위 속성만을 복사하고
-내부에 중첩된 객체나 배열은 원본 데이터를 참조합니다.
-```javascript
-const original = { a: 1, b: { c: 2 } };
-const shallowCopy = { ...original };
-
-shallowCopy.a = 10; // 최상위 값 변경 (독립적)
-shallowCopy.b.c = 20; // 중첩된 객체 값 변경 (원본 영향)
-
-console.log(original); // { a: 1, b: { c: 20 } }
-console.log(shallowCopy); // { a: 10, b: { c: 20 } }
-```
-
-아래의 코드를 보면 최상위 레벨의 속성만 복사해 깊은 복사처럼 보일 뿐 여전히 앝은 복사입니다.
-
-```javascript
-let original = { a: 1, b: 2 };
-let copy = { ...original };
-
-copy.a = 10;
-
-console.log(original.a); // 1 (독립적)
-console.log(copy.a); // 10
-```
-```javascript
-const original = { a: 1, b: { c: 2 } };
-const copy = { ...original };
-
-// copy의 중첩된 객체를 수정
-copy.b.c = 10;
-
-const object = { a: 1, b: { c: 10 } }; // 비교할 다른 값 생성
-
-console.log(original); // 10 { a: 1, b: { c: 2 } } (원본도 변경됨)
-console.log(copy.b === original.b); // true (중첩 객체는 같은 참조)
-
-console.log(object.b === original.b); // false original과 동일해 보이지만 다른 값이다.
-```
-
-
-#### 깊은 복사
-
-모든 수준의 데이터를 복사해 원본과 완전히 독립적인 새로운 데이터를 생성합니다.
-따라서 원본 데이터를 변경해도 복사된 데이터는 영향을 받지 않습니다.
-
-깊은 복사는 JSON.parse()와 JSON.stringify()를 사용해 수행하거나 lodash의 cloneDeep() 같은 라이브러리를 사용해 수행할 수 있습니다.
-> JSON.parse()와 JSON.stringify() RegExp이나 Date같은 특수 객체나 undefined, 함수, Symbol, 순환 참조의 경우는 복사되지 않습니다.
-
-```javascript
-const original = { a: 1, b: { c: 2 } };
-const deepCopy = JSON.parse(JSON.stringify(original));
-
-deepCopy.a = 10; // 최상위 값 변경
-deepCopy.b.c = 20; // 중첩된 객체 값 변경
-
-console.log(original); // { a: 1, b: { c: 2 } }
-console.log(deepCopy); // { a: 10, b: { c: 20 } }
-```
-
-## 마무리
-
-사실 이 책을 처음 읽은 것은 2년 전이었습니다. 오늘 다시 읽으면서 그 땐 이해하지 못 했던 부분들을 많이 이해할 수 있었고
-그동안 개발을 하며 느낌적으로 알고 있던 것들을 확실히 정리하고 넘어갈 수 있어 뜻깊은 시간이 되었습니다.
-
-
+---
+title: 자바스크립트의 값과 레퍼런스
+tags: [javaScript]
+date: "2024.06.08"
+---
+오늘은 you don`t Know JavaScript 책을 읽고 그 내용에 관해 글을 써보겠습니다.
+
+자바스크립트에는 원시 자료형(값)과 참조 자료형(레퍼런스)이 존재합니다. 원시 자료형은 불변 하고 값 자체가 변수에 할당된다는 특징이 있고
+참조 자료형은 변경 가능하고 변수에 저장된 메모리 주소가 할당된다는 특징이 있습니다.
+
+### 값 (Value)
+
+```
+string: 문자열. 예: 'Hello'
+
+number: 숫자. 예: 42
+
+bigint: 매우 큰 숫자. 예: 9007199254740991n
+
+boolean: true 또는 false
+
+undefined: 값이 정의되지 않았을 때의 상태
+
+symbol: 고유하고 변경할 수 없는 값
+
+null: 값이 존재하지 않음을 나타내는 특수한 값
+```
+
+>이런 원시 데이터(값)의 특징은 복사라는 개념을 따릅니다.
+
+예를 들어 숫자 값을 변수에 할당하면 그 값 자체가 복사 됩니다. 아래의 예시 처럼 x의 값을 바꿔도 y는 영향을 받지 않습니다.
+
+```javascript
+let x = 10;
+let y = x; // x의 값을 y에 복사
+
+x = 20; // x의 값만 변경됨
+
+console.log(y); // 10
+```
+### 레퍼런스 (Reference)
+
+```
+Object : 키(key)-값(value) 쌍의 집합. 예: {name: 'Alice', age: 25}
+
+Array : 리스트 형태의 자료형. 예: ['apple', 'banana', 'cherry']
+
+Function : 특정 작업을 실행하는 코드 블록 이외에도 복잡한 데이터를 가리킵니다.
+```
+이런 복잡 데이터는 값 자체가 아니라 데이터가 저장된 메모리 주소를 저장합니다. 즉 변수는 데이터를 가르키는 주소만 저장하고 여러 변수가 같은 메모리 주소를 가르킬 수 있습니다.
+
+여기서 obj1과 obj2는 같은 객체를 참조하고 있기 때문에 obj2의 값을 변경하면 obj1에도 영향을 줍니다.
+
+```javascript
+let obj1 = { name: 'Alice', age: 25 };
+let obj2 = obj1; // obj2는 obj1을 참조
+
+obj2.age = 30; // obj2의 값을 변경하면 obj1에도 영향을 미침
+
+console.log(obj1.age); // 30
+```
+## 값 복사와 레퍼런스 복사의 차이
+
+한번 정리해보자면
+
+**값 복사**
+- 원시 데이터는 변수에 할당될 때 그 값이 할당됩니다
+- 복사된 변수는 독립적으로 하나의 값을 변경해도 다른 값에 영향을 미치지 않습니다.
+
+**레퍼런스 복사**
+- 객체나 배열은 변수에 할당될 때 그 값을 참조하는 메모리 주소가 복사됩니다.
+- 같은 데이터를 참조하는 여러 변수에서 변경 사항이 공유됩니다.
+
+자바스크립트가 복잡 데이터 타입에 대해서 레퍼런스 복사를 이용하는 이유는 메모리 효율성과 최적화 때문입니다.
+원시 데이터와 달리 객체나 배열은 데이터가 중첩될 경우 구조가 매우 복잡해질 수 있어 메모리 주소 복사를 통해 효율성을 높입니다.
+
+### 얕은 복사와 깊은 복사
+
+그러면 객체나 배열을 다룰때 불필요한 데이터 변경을 피하기 위한 방법이 있습니다.
+
+#### 얕은 복사
+
+( ... ) 스프레드 연산자를 사용해 얕은 복사를 수행할 수 있으며 객체나 배열의 최상위 속성만을 복사하고
+내부에 중첩된 객체나 배열은 원본 데이터를 참조합니다.
+```javascript
+const original = { a: 1, b: { c: 2 } };
+const shallowCopy = { ...original };
+
+shallowCopy.a = 10; // 최상위 값 변경 (독립적)
+shallowCopy.b.c = 20; // 중첩된 객체 값 변경 (원본 영향)
+
+console.log(original); // { a: 1, b: { c: 20 } }
+console.log(shallowCopy); // { a: 10, b: { c: 20 } }
+```
+
+아래의 코드를 보면 최상위 레벨의 속성만 복사해 깊은 복사처럼 보일 뿐 여전히 앝은 복사입니다.
+
+```javascript
+let original = { a: 1, b: 2 };
+let copy = { ...original };
+
+copy.a = 10;
+
+console.log(original.a); // 1 (독립적)
+console.log(copy.a); // 10
+```
+```javascript
+const original = { a: 1, b: { c: 2 } };
+const copy = { ...original };
+
+// copy의 중첩된 객체를 수정
+copy.b.c = 10;
+
+const object = { a: 1, b: { c: 10 } }; // 비교할 다른 값 생성
+
+console.log(original); // 10 { a: 1, b: { c: 2 } } (원본도 변경됨)
+console.log(copy.b === original.b); // true (중첩 객체는 같은 참조)
+
+console.log(object.b === original.b); // false original과 동일해 보이지만 다른 값이다.
+```
+
+
+#### 깊은 복사
+
+모든 수준의 데이터를 복사해 원본과 완전히 독립적인 새로운 데이터를 생성합니다.
+따라서 원본 데이터를 변경해도 복사된 데이터는 영향을 받지 않습니다.
+
+깊은 복사는 JSON.parse()와 JSON.stringify()를 사용해 수행하거나 lodash의 cloneDeep() 같은 라이브러리를 사용해 수행할 수 있습니다.
+> JSON.parse()와 JSON.stringify() RegExp이나 Date같은 특수 객체나 undefined, 함수, Symbol, 순환 참조의 경우는 복사되지 않습니다.
+
+```javascript
+const original = { a: 1, b: { c: 2 } };
+const deepCopy = JSON.parse(JSON.stringify(original));
+
+deepCopy.a = 10; // 최상위 값 변경
+deepCopy.b.c = 20; // 중첩된 객체 값 변경
+
+console.log(original); // { a: 1, b: { c: 2 } }
+console.log(deepCopy); // { a: 10, b: { c: 20 } }
+```
+
+## 마무리
+
+사실 이 책을 처음 읽은 것은 2년 전이었습니다. 오늘 다시 읽으면서 그 땐 이해하지 못 했던 부분들을 많이 이해할 수 있었고
+그동안 개발을 하며 느낌적으로 알고 있던 것들을 확실히 정리하고 넘어갈 수 있어 뜻깊은 시간이 되었습니다.
+
+
앞으로도 이런 개념적인 부분을 공부하는 시간을 주기적으로 가져야겠다고 생각한 하루였습니다.
\ No newline at end of file
diff --git a/src/content/posts/javaScript/What-is-a-closure.md b/src/content/posts/javaScript/What-is-a-closure.md
index c86b7af..48b3e7d 100644
--- a/src/content/posts/javaScript/What-is-a-closure.md
+++ b/src/content/posts/javaScript/What-is-a-closure.md
@@ -1,230 +1,230 @@
----
-title: 클로저란 무엇인가?
-tags: [javaScript]
-date: "2024.08.31"
----
-오늘은 you don`t know javascript를 읽고 클로저라는 개념에 대해 정리해 보도록 하겠습니다.
-
-## 클로저란?
-클로저는 자바스크립트에서 함수와 그 함수가 선언된 렉시컬 환경을 같이 기억하는 기능을 말합니다.
-간단하게 말해서 함수 내부에서 함수 외부에 있는 변수에 접근할 수 있는 상황을 의미하며 외부 함수가
-실행을 마쳤음에도 내부 함수가 그 변수를 기억하는 상황입니다.
-
-클로저를 이해하기 위해선 우선 렉시컬 환경이 무엇인지 이해해야 합니다.
-
-## 렉시컬 환경 이해하기
-렉시컬 환경은 스코프와 변수 접근 규칙을 관리하는 메커니즘으로 **사전적 의미로는 코드가 작성된 위치를 의미합니다.**
-
-예를 들어 아래와 같은 코드가 있을 때 `outer` 함수는 전역에 선언 되었으니 전역 렉시컬 환경에 등록되고
-`outerVar`와 `inner` 함수는 `outer` 함수의 환경 레코드에 저장됩니다.
-마찬가지로 `innerVar`는 `inner` 함수의 환경 레코드에 저장되고 `console.log(outerVar);`는 outer 함수의 렉시컬 환경을 가르킵니다.
-`inner`함수가 실행되면 `outerVar`를 찾기 위해 자신의 환경 **레코드 -> 외부 참조 -> outer 환경에서 발견** 순으로 탐색합니다.
-```javascript
-const outerouterVar = "가장 외부 변수"; // 전역 스코프
-
-function outer() {
- const outerVar = "외부 변수"; // outer 함수 스코프
-
- function inner() {
- const innerVar = "내부 변수"; // inner 함수 스코프
- console.log(outerVar); // outer의 변수 접근
- console.log(outerouterVar); // 전역 변수 접근
- }
-
- inner();
-}
-
-outer();
-```
-
-렉시컬 환경의 특징으로 함수가 선언된 위치에 따라 스코프가 결정된다는 점인데 아래의 코드를 한번 봐주세요
-```javascript
-let x = "global";
-
-function foo() {
- console.log(x); // global 출력
-}
-
-function bar() {
- let x = "local";
- foo(); // ? 출력
-}
-
-bar();
-```
-블록 스코프에 대해 알고 있다면 쉽게 정답을 맞출 수 있을텐데 당연히 `global`이 출력됩니다.
-블록 스코프는 렉시컬 환경의 개념을 기반으로 동작하기 때문입니다.
-
-### 정리하자면
-- 함수는 자신이 선언된 환경의 모든 스코프를 기억한다.
-- 스코프 체인을 통해 하위 -> 상위 -> 전역으로 변수를 탐색한다.
-
-## 클로저의 필수 조건과 동작 원리
-다시 클로저로 돌아와 클로저 함수가 가져야하는 필수 조건에 대해 알아보겠습니다.
-
-**1. 내부 함수가 외부 함수의 변수를 참조해야 합니다.**
-**2. 외부 함수가 내부 함수를 반환해야 합니다.**
-**3. 외부 함수가 종료된 후에도 내부 함수가 살아있어야 합니다.**
-**4. 렉시컬 환경을 기억해야 합니다.**
-
-이 5개의 필수 조건을 기억하고 다음 예시를 한번 살펴보겠습니다.
-```javascript
-function outer() {
- let counter = 0; // 외부 변수
-
- return function inner() {
- counter++; // 외부 변수를 참조
- console.log(`Counter: ${counter}`);
- };
-}
-
-const closure = outer(); // outer 실행 후, inner 함수 반환
-closure(); // Counter: 1
-closure(); // Counter: 2
-closure(); // Counter: 3
-```
-**outer() 함수 호출**
-- `outer`실행 컨텍스트가 생성됩니다.
-- `counter` 변수가 0으로 초기화됩니다
-- `inner`함수가 반환되고 `closure` 변수에 `inner`함수가 할당됩니다.
-
-**closure() 함수 호출 (첫 번째)**
-- `inner`실행 컨텍스트가 생성됩니다.
-- `counter = 1`이 됩니다.
-- `inner` 실행 컨텍스트 제거되지면 `counter`는 메모리에 남아있습니다.
-
-**closure() 함수 호출 (두 번째)**
-- `inner`실행 컨텍스트가 생성됩니다.
-- `counter = 2`가 됩니다.
-- `inner` 실행 컨텍스트 제거되지면 `counter`는 메모리에 남아있습니다.
-
-**closure() 함수 호출 (세 번째)**
-- `inner`실행 컨텍스트가 생성됩니다.
-- `counter = 3`가 됩니다.
-- `inner` 실행 컨텍스트 제거되지면 `counter`는 메모리에 남아있습니다.
-
-
-
-또 다른 예시를 들어보겠습니다. 아래의 코드를 한번 살펴보면
-```javascript
-function outer() {
- let counter = 0; // 외부 변수 초기화
-
- function inner() {
- counter++; // 외부 변수를 증가
- console.log(`Counter: ${counter}`);
- }
-
- inner(); // 내부 함수 실행
-}
-
-// outer만 호출
-outer(); // 첫 번째 호출
-outer(); // 두 번째 호출
-outer(); // 세 번째 호출
-```
-**첫 번째 outer() 호출**
-- `outer()` 함수가 실행되면서 `counter`가 0으로 초기화됩니다.
-- 내부 함수 `inner()`가 호출되어 `counter`가 1로 증가합니다.
-- `outer()` 실행이 끝나면서 `counter` 변수와 실행 컨텍스트가 메모리에서 제거됩니다.
-
-**두 번째 outer() 호출**
-- `outer()` 함수가 실행되면서 `counter`가 0으로 초기화됩니다.
-- 내부 함수 `inner()`가 호출되어 `counter`가 1로 증가합니다.
-- `outer()` 실행이 끝나면서 `counter` 변수와 실행 컨텍스트가 메모리에서 제거됩니다.
-
-**세 번째 outer() 호출**
-- 위와 동일한 과정이 반복됩니다.
-
-꼭 내부에서 외부의 변수를 참조했다고 클로저 함수가 아닌 경우를 보여드렸습니다.
-
-## React에서 클로저의 활용 예시
-클로저 개념에 대해서 알아보았는데 사실 가장 중요한건 실제 활용 방법이라고 생각합니다.
-
-### useState
-`handleClick` 함수는 `setCount`와 `count`를 렉시컬 환경에서 기억합니다.
-```javascript
-import { useState } from 'react';
-
-function Counter() {
- const [count, setCount] = useState(0);
-
- const handleClick = () => {
- setCount(prev => prev + 1); // 이전전 값을 기억해 + 1
- };
-
- return ;
-}
-```
-
-### useEffect
-의존성 배열 없이 클로저로 변수를 저장합니다.
-```javascript
-function Timer() {
- const [seconds, setSeconds] = useState(0);
-
- useEffect(() => {
- const interval = setInterval(() => {
- setSeconds(prev => prev + 1)
- }, 1000);
-
- return () => clearInterval(interval);
- }, []);
-
- return {seconds}초
;
-}
-```
-
-### 커스텀훅
-`count`, `increment`, `decrement`를 반환해 값을 기억합니다.
-
-```javascript
-function useCounter(initialValue) {
- const [count, setCount] = useState(initialValue);
-
- const increment = () => setCount(prevCount => prevCount + 1);
- const decrement = () => setCount(prevCount => prevCount - 1);
-
- return { count, increment, decrement }; // 함수를 반환
-}
-
-// 사용 예시
-function App() {
- const { count, increment, decrement } = useCounter(0);
- return (
-
-
- {count}
-
-
- );
-}
-```
-
-### 고차 컴포넌트(HOC)
-고차 컴포넌트에서도 클로저가 활용됩니다.
-```javascript
-function withLogger(WrappedComponent) {
- return function EnhancedComponent(props) {
- useEffect(() => {
- console.log("컴포넌트가 렌더링됨!");
- }, []);
-
- return ;
- };
-}
-
-// 사용 예시
-const EnhancedButton = withLogger(Button);
-```
-
-이런 예시를 살펴보면 상태 관리, 이벤트 핸들러, 비동기 작업 등 다양한 곳에서
-클로저 함수를 잘 활용하고 있었음을 알 수 있습니다.
-
-
-## 마치며
-you don`t know javascript를 읽으면서 가장 이해하기 힘들었던 부분이였습니다.
-클로저는 JavaScript와 React에서 **상태 관리**, **로직 재사용**, **데이터 은닉**을 가능하게 하는 핵심 개념입니다.
-이 글이 클로저를 이해하는 데 도움이 되었기를 바랍니다.
-
+---
+title: 클로저란 무엇인가?
+tags: [javaScript]
+date: "2024.08.31"
+---
+오늘은 you don`t know javascript를 읽고 클로저라는 개념에 대해 정리해 보도록 하겠습니다.
+
+## 클로저란?
+클로저는 자바스크립트에서 함수와 그 함수가 선언된 렉시컬 환경을 같이 기억하는 기능을 말합니다.
+간단하게 말해서 함수 내부에서 함수 외부에 있는 변수에 접근할 수 있는 상황을 의미하며 외부 함수가
+실행을 마쳤음에도 내부 함수가 그 변수를 기억하는 상황입니다.
+
+클로저를 이해하기 위해선 우선 렉시컬 환경이 무엇인지 이해해야 합니다.
+
+## 렉시컬 환경 이해하기
+렉시컬 환경은 스코프와 변수 접근 규칙을 관리하는 메커니즘으로 **사전적 의미로는 코드가 작성된 위치를 의미합니다.**
+
+예를 들어 아래와 같은 코드가 있을 때 `outer` 함수는 전역에 선언 되었으니 전역 렉시컬 환경에 등록되고
+`outerVar`와 `inner` 함수는 `outer` 함수의 환경 레코드에 저장됩니다.
+마찬가지로 `innerVar`는 `inner` 함수의 환경 레코드에 저장되고 `console.log(outerVar);`는 outer 함수의 렉시컬 환경을 가르킵니다.
+`inner`함수가 실행되면 `outerVar`를 찾기 위해 자신의 환경 **레코드 -> 외부 참조 -> outer 환경에서 발견** 순으로 탐색합니다.
+```javascript
+const outerouterVar = "가장 외부 변수"; // 전역 스코프
+
+function outer() {
+ const outerVar = "외부 변수"; // outer 함수 스코프
+
+ function inner() {
+ const innerVar = "내부 변수"; // inner 함수 스코프
+ console.log(outerVar); // outer의 변수 접근
+ console.log(outerouterVar); // 전역 변수 접근
+ }
+
+ inner();
+}
+
+outer();
+```
+
+렉시컬 환경의 특징으로 함수가 선언된 위치에 따라 스코프가 결정된다는 점인데 아래의 코드를 한번 봐주세요
+```javascript
+let x = "global";
+
+function foo() {
+ console.log(x); // global 출력
+}
+
+function bar() {
+ let x = "local";
+ foo(); // ? 출력
+}
+
+bar();
+```
+블록 스코프에 대해 알고 있다면 쉽게 정답을 맞출 수 있을텐데 당연히 `global`이 출력됩니다.
+블록 스코프는 렉시컬 환경의 개념을 기반으로 동작하기 때문입니다.
+
+### 정리하자면
+- 함수는 자신이 선언된 환경의 모든 스코프를 기억한다.
+- 스코프 체인을 통해 하위 -> 상위 -> 전역으로 변수를 탐색한다.
+
+## 클로저의 필수 조건과 동작 원리
+다시 클로저로 돌아와 클로저 함수가 가져야하는 필수 조건에 대해 알아보겠습니다.
+
+**1. 내부 함수가 외부 함수의 변수를 참조해야 합니다.**
+**2. 외부 함수가 내부 함수를 반환해야 합니다.**
+**3. 외부 함수가 종료된 후에도 내부 함수가 살아있어야 합니다.**
+**4. 렉시컬 환경을 기억해야 합니다.**
+
+이 5개의 필수 조건을 기억하고 다음 예시를 한번 살펴보겠습니다.
+```javascript
+function outer() {
+ let counter = 0; // 외부 변수
+
+ return function inner() {
+ counter++; // 외부 변수를 참조
+ console.log(`Counter: ${counter}`);
+ };
+}
+
+const closure = outer(); // outer 실행 후, inner 함수 반환
+closure(); // Counter: 1
+closure(); // Counter: 2
+closure(); // Counter: 3
+```
+**outer() 함수 호출**
+- `outer`실행 컨텍스트가 생성됩니다.
+- `counter` 변수가 0으로 초기화됩니다
+- `inner`함수가 반환되고 `closure` 변수에 `inner`함수가 할당됩니다.
+
+**closure() 함수 호출 (첫 번째)**
+- `inner`실행 컨텍스트가 생성됩니다.
+- `counter = 1`이 됩니다.
+- `inner` 실행 컨텍스트 제거되지면 `counter`는 메모리에 남아있습니다.
+
+**closure() 함수 호출 (두 번째)**
+- `inner`실행 컨텍스트가 생성됩니다.
+- `counter = 2`가 됩니다.
+- `inner` 실행 컨텍스트 제거되지면 `counter`는 메모리에 남아있습니다.
+
+**closure() 함수 호출 (세 번째)**
+- `inner`실행 컨텍스트가 생성됩니다.
+- `counter = 3`가 됩니다.
+- `inner` 실행 컨텍스트 제거되지면 `counter`는 메모리에 남아있습니다.
+
+
+
+또 다른 예시를 들어보겠습니다. 아래의 코드를 한번 살펴보면
+```javascript
+function outer() {
+ let counter = 0; // 외부 변수 초기화
+
+ function inner() {
+ counter++; // 외부 변수를 증가
+ console.log(`Counter: ${counter}`);
+ }
+
+ inner(); // 내부 함수 실행
+}
+
+// outer만 호출
+outer(); // 첫 번째 호출
+outer(); // 두 번째 호출
+outer(); // 세 번째 호출
+```
+**첫 번째 outer() 호출**
+- `outer()` 함수가 실행되면서 `counter`가 0으로 초기화됩니다.
+- 내부 함수 `inner()`가 호출되어 `counter`가 1로 증가합니다.
+- `outer()` 실행이 끝나면서 `counter` 변수와 실행 컨텍스트가 메모리에서 제거됩니다.
+
+**두 번째 outer() 호출**
+- `outer()` 함수가 실행되면서 `counter`가 0으로 초기화됩니다.
+- 내부 함수 `inner()`가 호출되어 `counter`가 1로 증가합니다.
+- `outer()` 실행이 끝나면서 `counter` 변수와 실행 컨텍스트가 메모리에서 제거됩니다.
+
+**세 번째 outer() 호출**
+- 위와 동일한 과정이 반복됩니다.
+
+꼭 내부에서 외부의 변수를 참조했다고 클로저 함수가 아닌 경우를 보여드렸습니다.
+
+## React에서 클로저의 활용 예시
+클로저 개념에 대해서 알아보았는데 사실 가장 중요한건 실제 활용 방법이라고 생각합니다.
+
+### useState
+`handleClick` 함수는 `setCount`와 `count`를 렉시컬 환경에서 기억합니다.
+```javascript
+import { useState } from 'react';
+
+function Counter() {
+ const [count, setCount] = useState(0);
+
+ const handleClick = () => {
+ setCount(prev => prev + 1); // 이전전 값을 기억해 + 1
+ };
+
+ return ;
+}
+```
+
+### useEffect
+의존성 배열 없이 클로저로 변수를 저장합니다.
+```javascript
+function Timer() {
+ const [seconds, setSeconds] = useState(0);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setSeconds(prev => prev + 1)
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ return {seconds}초
;
+}
+```
+
+### 커스텀훅
+`count`, `increment`, `decrement`를 반환해 값을 기억합니다.
+
+```javascript
+function useCounter(initialValue) {
+ const [count, setCount] = useState(initialValue);
+
+ const increment = () => setCount(prevCount => prevCount + 1);
+ const decrement = () => setCount(prevCount => prevCount - 1);
+
+ return { count, increment, decrement }; // 함수를 반환
+}
+
+// 사용 예시
+function App() {
+ const { count, increment, decrement } = useCounter(0);
+ return (
+
+
+ {count}
+
+
+ );
+}
+```
+
+### 고차 컴포넌트(HOC)
+고차 컴포넌트에서도 클로저가 활용됩니다.
+```javascript
+function withLogger(WrappedComponent) {
+ return function EnhancedComponent(props) {
+ useEffect(() => {
+ console.log("컴포넌트가 렌더링됨!");
+ }, []);
+
+ return ;
+ };
+}
+
+// 사용 예시
+const EnhancedButton = withLogger(Button);
+```
+
+이런 예시를 살펴보면 상태 관리, 이벤트 핸들러, 비동기 작업 등 다양한 곳에서
+클로저 함수를 잘 활용하고 있었음을 알 수 있습니다.
+
+
+## 마치며
+you don`t know javascript를 읽으면서 가장 이해하기 힘들었던 부분이였습니다.
+클로저는 JavaScript와 React에서 **상태 관리**, **로직 재사용**, **데이터 은닉**을 가능하게 하는 핵심 개념입니다.
+이 글이 클로저를 이해하는 데 도움이 되었기를 바랍니다.
+
[참고 자료](https://poiemaweb.com/js-closure)
\ No newline at end of file
diff --git a/src/content/posts/javaScript/Why-javascript-supports-async.md b/src/content/posts/javaScript/Why-javascript-supports-async.md
index ea45b2f..857c955 100644
--- a/src/content/posts/javaScript/Why-javascript-supports-async.md
+++ b/src/content/posts/javaScript/Why-javascript-supports-async.md
@@ -1,70 +1,70 @@
----
-title: 자바스크립트는 싱글 스레드인데 비동기 처리가 가능한 이유
-tags: [javaScript]
-date: "2024.10.26"
----
-문뜩 자바스크립트는 싱글 스레드 언어인데 웹 및 node.js 환경에서 비동기로 동작할 수 있을까?
-
-사실 비동기로 동작할 수 있는 이유는 웹 및 node.js 환경은 싱글 스레드가 아니기 때문에 가능하다는 걸 알지만
-어떤 원리로 동작하는지는 모르기에 한번 찾아보았습니다.
-
-## 자바스크립트의 동작 방식
-자바스크립트의 동작 구조의 핵심 요소는 `Call Stack`, `Heap`, `Event Loop`로 이루어져 있습니다.
-
-### 호출 스택 (Call Stack)
-- 함수의 실행 순서를 기록하는 구조의 스택입니다.
-- 함수가 호출되면 스택에 쌓이고, 실행이 끝나면 제거됩니다.
-
-### 힙 (Heap)
-- 객체, 변수 등 메모리 할당이 일어나는 영역입니다.
-- 메모리 관리(가비지 컬렉션)는 엔진이 자동으로 처리합니다.
-
-### 이벤트 루프 (Event Loop)
-- 호출 스택과 태스크 큐를 지속적으로 감시하며, "호출 스택이 비어 있을 때" 큐의 콜백을 실행시킵니다.
-
-## 비동기 처리 메커니즘
-자바스크립트는 분명 싱글 스레드 언어지만 브라우저는 **Web APIs**를 Node.js는 **libuv** 라이브러리를 사용해
-비동기 작업을 처리합니다.
-
-우선 예제를 보며 설명하도록 하겠습니다.
-```js
-console.log("Start");
-setTimeout(() => console.log("Timeout"), 0);
-fetch("https://api.example.com").then(() => console.log("Fetch 완료"));
-console.log("End");
-```
-
-**실행순서**
-- console.log("Start") → 호출 스택에 올라가 즉시 실행
-- setTimeout → 호출 스택에 올라간 후 Web API로 이동 → 타이머가 Web API 영역에서 카운트
-- fetch → 호출 스택에 올라간 후 Web API로 이동 → 네트워크 요청이 Web API 영역에서 처리
-- console.log("End") → 즉시 실행
-- 호출 스택이 비면, 이벤트 루프가 **태스크 큐(마이크로태스크/매크로태스크)**를 확인후 마이크로태스크를 우선 출력
- - fetch의 콜백은 마이크로태스크 큐에, setTimeout은 매크로태스크 큐에 저장됩니다
-> 매크로태스크 : setTimeout, setInterval, DOM 이벤트, I/O 작업같은 비동기 작업
-> 마이크로태스크 : Promise, MutationObserver, process.nextTick 작업 같은 비동기 작업
-
-
-극단적으로 이런 코드가 있다고 했을때 과연 어떻게 실행될까요?
-```js
-useEffect(() => {
- const Timer = setTimeout(() => console.log("타이머"), 1000);
- for (let i = 0; i < 50000; i++) {
- console.log("카운트1");
- }
- for (let i = 0; i < 50000; i++) {
- console.log("카운트2");
- }
- return () => {
- clearTimeout(Timer);
- };
-}, []);
-```
-
-정답은 1초가 지나도 호출 스택에 작업이 남아있기 때문에 `console.log("카운트1")` `console.log("카운트2")`가
-모두 출력된 후 `console.log("타이머")`가 출력됩니다.
-
-## 마치며
-자바스크립트는 싱글 스레드로 동작하지만 Web API와 libuv를 활용하여 비동기 작업을 처리할 수 있습니다.
-
-오늘 자바스크립트의 동작 방식에 대해서 알아보았는데 앞으로는 비동기 코드의 실행 흐름을 고려하면서 작성해야겠다고 생각하게 되었습니다.
+---
+title: 자바스크립트는 싱글 스레드인데 비동기 처리가 가능한 이유
+tags: [javaScript]
+date: "2024.10.26"
+---
+문뜩 자바스크립트는 싱글 스레드 언어인데 웹 및 node.js 환경에서 비동기로 동작할 수 있을까?
+
+사실 비동기로 동작할 수 있는 이유는 웹 및 node.js 환경은 싱글 스레드가 아니기 때문에 가능하다는 걸 알지만
+어떤 원리로 동작하는지는 모르기에 한번 찾아보았습니다.
+
+## 자바스크립트의 동작 방식
+자바스크립트의 동작 구조의 핵심 요소는 `Call Stack`, `Heap`, `Event Loop`로 이루어져 있습니다.
+
+### 호출 스택 (Call Stack)
+- 함수의 실행 순서를 기록하는 구조의 스택입니다.
+- 함수가 호출되면 스택에 쌓이고, 실행이 끝나면 제거됩니다.
+
+### 힙 (Heap)
+- 객체, 변수 등 메모리 할당이 일어나는 영역입니다.
+- 메모리 관리(가비지 컬렉션)는 엔진이 자동으로 처리합니다.
+
+### 이벤트 루프 (Event Loop)
+- 호출 스택과 태스크 큐를 지속적으로 감시하며, "호출 스택이 비어 있을 때" 큐의 콜백을 실행시킵니다.
+
+## 비동기 처리 메커니즘
+자바스크립트는 분명 싱글 스레드 언어지만 브라우저는 **Web APIs**를 Node.js는 **libuv** 라이브러리를 사용해
+비동기 작업을 처리합니다.
+
+우선 예제를 보며 설명하도록 하겠습니다.
+```js
+console.log("Start");
+setTimeout(() => console.log("Timeout"), 0);
+fetch("https://api.example.com").then(() => console.log("Fetch 완료"));
+console.log("End");
+```
+
+**실행순서**
+- console.log("Start") → 호출 스택에 올라가 즉시 실행
+- setTimeout → 호출 스택에 올라간 후 Web API로 이동 → 타이머가 Web API 영역에서 카운트
+- fetch → 호출 스택에 올라간 후 Web API로 이동 → 네트워크 요청이 Web API 영역에서 처리
+- console.log("End") → 즉시 실행
+- 호출 스택이 비면, 이벤트 루프가 **태스크 큐(마이크로태스크/매크로태스크)**를 확인후 마이크로태스크를 우선 출력
+ - fetch의 콜백은 마이크로태스크 큐에, setTimeout은 매크로태스크 큐에 저장됩니다
+> 매크로태스크 : setTimeout, setInterval, DOM 이벤트, I/O 작업같은 비동기 작업
+> 마이크로태스크 : Promise, MutationObserver, process.nextTick 작업 같은 비동기 작업
+
+
+극단적으로 이런 코드가 있다고 했을때 과연 어떻게 실행될까요?
+```js
+useEffect(() => {
+ const Timer = setTimeout(() => console.log("타이머"), 1000);
+ for (let i = 0; i < 50000; i++) {
+ console.log("카운트1");
+ }
+ for (let i = 0; i < 50000; i++) {
+ console.log("카운트2");
+ }
+ return () => {
+ clearTimeout(Timer);
+ };
+}, []);
+```
+
+정답은 1초가 지나도 호출 스택에 작업이 남아있기 때문에 `console.log("카운트1")` `console.log("카운트2")`가
+모두 출력된 후 `console.log("타이머")`가 출력됩니다.
+
+## 마치며
+자바스크립트는 싱글 스레드로 동작하지만 Web API와 libuv를 활용하여 비동기 작업을 처리할 수 있습니다.
+
+오늘 자바스크립트의 동작 방식에 대해서 알아보았는데 앞으로는 비동기 코드의 실행 흐름을 고려하면서 작성해야겠다고 생각하게 되었습니다.
diff --git a/src/content/posts/next/2025-11-23-useactionstate-server-action-fetching.md b/src/content/posts/next/2025-11-23-useactionstate-server-action-fetching.md
index b98fc3f..c98f18b 100644
--- a/src/content/posts/next/2025-11-23-useactionstate-server-action-fetching.md
+++ b/src/content/posts/next/2025-11-23-useactionstate-server-action-fetching.md
@@ -1,6 +1,6 @@
---
title: 정적 게시글을 Server Action으로 읽으려다 삽질한 기록
-series: 블로그
+series: blog
tags: ["nextjs", "react", "server-actions", "useactionstate", "caching"]
date: "2025.11.23"
---
diff --git a/src/content/posts/next/2025-11-24-buildtime-markdown-to-html-and-metadata-split.md b/src/content/posts/next/2025-11-24-buildtime-markdown-to-html-and-metadata-split.md
index e0b51d2..3cedb80 100644
--- a/src/content/posts/next/2025-11-24-buildtime-markdown-to-html-and-metadata-split.md
+++ b/src/content/posts/next/2025-11-24-buildtime-markdown-to-html-and-metadata-split.md
@@ -1,6 +1,6 @@
---
title: Markdown 변환부터 메타데이터 분리까지 블로그 구조 개선 기록
-series: 블로그
+series: blog
tags: ["Next.js", "성능 개선", "빌드 파이프라인", "Markdown", "메타데이터"]
date: "2025.11.24"
---
diff --git a/src/content/posts/next/2025-12-12-maple-helper-bff-api-refactor.md b/src/content/posts/next/2025-12-12-maple-helper-bff-api-refactor.md
index 2262910..a9c231f 100644
--- a/src/content/posts/next/2025-12-12-maple-helper-bff-api-refactor.md
+++ b/src/content/posts/next/2025-12-12-maple-helper-bff-api-refactor.md
@@ -1,6 +1,6 @@
---
title: BFF를 적용한 메이플 헬퍼 API 요청 구조 리팩토링
-series: 메이플 헬퍼
+series: maple-helper
tags: ["BFF", "API Route", "Nexon Open API", "리팩토링", "에러 처리", "성능 측정"]
date: "2025.12.12"
---
diff --git a/src/content/posts/next/2026-02-07-migrating-auth-token-localstorage-to-cookie.md b/src/content/posts/next/2026-02-07-migrating-auth-token-localstorage-to-cookie.md
index 4e28034..f339bd5 100644
--- a/src/content/posts/next/2026-02-07-migrating-auth-token-localstorage-to-cookie.md
+++ b/src/content/posts/next/2026-02-07-migrating-auth-token-localstorage-to-cookie.md
@@ -1,6 +1,6 @@
---
title: 서버 컴포넌트 프리렌더링을 위한 토큰 관리 마이그레이션 - LocalStorage에서 Cookie로
-series: 글로벌 노마드
+series: global-nomad
tags: ["nextjs", "ssr", "cookie", "auth", "middleware"]
date: "2026.02.07"
---
diff --git a/src/content/posts/next/2026-02-25-usequery-server-fetching-caching-issue.md b/src/content/posts/next/2026-02-25-usequery-server-fetching-caching-issue.md
index d8f5893..8ae58f1 100644
--- a/src/content/posts/next/2026-02-25-usequery-server-fetching-caching-issue.md
+++ b/src/content/posts/next/2026-02-25-usequery-server-fetching-caching-issue.md
@@ -1,6 +1,6 @@
---
title: useQuery 서버패칭 캐싱 문제
-series: 글로벌 노마드
+series: global-nomad
tags: ["Next.js", "React Query", "Zustand", "Caching"]
date: "2026.02.25"
---
diff --git a/src/content/posts/next/AppRouteNPageRoute.md b/src/content/posts/next/AppRouteNPageRoute.md
index 6df11f0..e3b86ed 100644
--- a/src/content/posts/next/AppRouteNPageRoute.md
+++ b/src/content/posts/next/AppRouteNPageRoute.md
@@ -1,82 +1,82 @@
----
-title: Next 앱 라우팅과 페이지 라우팅
-tags: [next]
-date: "2024.03.23"
----
-React를 사용 할 때는 react-router-dom 라이브러리를 사용 했지만 Next.js에는 라이브러리 없이 라우팅이 가능하다.
-
-## App 라우터와 Page 라우터
-
-Next.js 에서는 2개의 방법으로 라우팅이 가능하다. 하나는 기존에 있던 클라이언트 중심의 Pages Router이고 Next.js 13에 추가 된 서버 중심의 App Router가 있다.
-
-[https://nextjs.org/docs/pages/building-your-application/routing](https://nextjs.org/docs/pages/building-your-application/routing)
-
-Page Router는 pages 디렉터리 에 파일이 추가 된다면 경로를 사용할 수 있다.
-
-Pages 리렉토리에 index 파일을 생성하면 자동으로 라우팅 된다. pages/index.js → / pages/blog/index.js → /blog
-
-만약 / 가 아닌 first-post로 라우팅이 하고 싶다면 first-post.js 파일을 생성 하면 된다. pages/blog/first-post.js → /blog/first-post pages/dashboard/settings/username.js → /dashboard/settings/username
-
-동적 라우팅도 가능한데 []로 감싸주면 동적 라우팅이 가능하다. pages/posts/[id].js → posts/1 또는 posts/2 pages/[id]/index.js → posts/1 또는 posts/2
-
-[...segmentName] 대괄호 안에 세그먼트를 추가하면 다음과 같이 표시할 수 있다. pages/shop/[...slug].js → /shop/clothes 또는 /shop/clothes/tops 또는 /shop/clothes/tops/t-shirts
-
-[[...segmentName]]와 같이 이중 대괄호 안에 세그먼트를 추가하면 매개변수가 없는 경로 또한 일치하게 된다. pages/shop/[...slug].js → /shop 또는 /shop/clothes 또는 /shop/clothes/tops 또는 /shop/clothes/tops/t-shirts
-
-최상위의 _app.js 파일에서 공통 레이아웃을 기존 React와 같이 적용 가능
-
-Pages 폴더 바로 아래에 404.js를 만들어 주면 된다.
-
-##
-
-[https://nextjs.org/docs/app/building-your-application/routing](https://nextjs.org/docs/app/building-your-application/routing)
-
-Next.js 13 부터는 기반의 App Router를 지원한다.
-
-[https://nextjs.org/docs/app/building-your-application/rendering/server-components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)
-
-## 라우팅 규칙
-
-
-
-
-- : 계층 구조를 시각화하기 위한 규칙이다. 예를
- 들어 상위 및 하위 구성 요소가 있는 구성 요소 트리, 폴더 구조 등이
- 있다.
-- : 새 루트(첫 번째)에서 시작하여 잎(마지막)에서
- 끝나는 트리의 일부다.
-- : 루트 레이아웃과 같은 트리 또는 하위 트리의 첫 번째
- 노드다.
-- : URL 경로의 마지막 세그먼트와 같이 자식이 없는 하위
- 트리의 노드다.
-
-
-
-- : 슬래시로 구분된 URL 경로의 일부다.
-- : 도메인 뒤에 오는 URL의 일부(세그먼트로 구성)
-예를 들어 아래와 같은 폴더 구조에서 /dashboard/analytics 경로에는 Page.js 파일이 없기 떄문에 유효하지 않은 경로가 된다.
-
-App라우팅의 동적 라우팅은 Page라우팅과 동일하게 적용된다.
-
-App라우팅에서 레이아웃은 기본적으로 서버 컴포넌트이다. 서버 컴포넌트는 13버전에서 추가된 개념인데 추후 서술하도록 하겠다. App 라우팅에서도 공통 레이아웃을 정의하는게 가능한데 아래의 사진과 같이 폴더에 layout 파일을 생성해 주면 /dashboard 와 /dashvoard/settings 는 공통된 레이아웃을 공유하게 된다.
-
-루트 레이아웃은 최상위 수준의 폴더에서 정의되고 모든 경로에 적용 되는 레이아웃이다.
-
-
-만약 최상위 레이아웃에서 html태그와 body태그를 넣지 않거나 하위 레이아웃에서 html태그나 body태그를 포함시킨다면 에러가 발생하니 주의 하도록 하자
-
-
-
-템플릿은 각 하위 레이아웃이나 페이지를 래핑해준다는 점에서 레아아웃과 유사하지만 라우트 이동 시 Layout는 기본적으로 리렌더링이 이루어 지지 않는다는 점이 다르다. 템플릿은 공통된 탬플릿을 사용하는 경우에도 라우트 이동시 DOM요소가 다시 생성되어 상태가 보존되지 않는다.
-
-## 참고 자료
-
-[https://velog.io/@2ast/React-%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8React-Server-Component%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0#%EC%84%9C%EB%A1%A0-%ED%8A%B8%EB%A0%8C%EB%94%94%ED%95%A8%EB%8F%84-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%97%90%EA%B2%8C-%EC%A4%91%EC%9A%94%ED%95%9C-%EB%AF%B8%EB%8D%95%EC%9D%B4%EB%8B%A4](https://velog.io/@2ast/React-%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8React-Server-Component%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0#%EC%84%9C%EB%A1%A0-%ED%8A%B8%EB%A0%8C%EB%94%94%ED%95%A8%EB%8F%84-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%97%90%EA%B2%8C-%EC%A4%91%EC%9A%94%ED%95%9C-%EB%AF%B8%EB%8D%95%EC%9D%B4%EB%8B%A4)
-
-[https://velog.io/@jjunyjjuny/nextjs-13.4.0%EB%B6%80%ED%84%B0-%EC%95%88%EC%A0%95%ED%99%94%EB%90%9C-App-Router.-Pages-Router%EC%99%80-%EB%B9%84%EA%B5%90](https://velog.io/@jjunyjjuny/nextjs-13.4.0%EB%B6%80%ED%84%B0-%EC%95%88%EC%A0%95%ED%99%94%EB%90%9C-App-Router.-Pages-Router%EC%99%80-%EB%B9%84%EA%B5%90)
-
-[https://nextjs.org/docs/app/building-your-application/rendering/server-components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)
-
-[https://nextjs.org/docs/app/building-your-application/routing](https://nextjs.org/docs/app/building-your-application/routing)
-
-[https://nextjs.org/docs/pages/building-your-application/routing](https://nextjs.org/docs/pages/building-your-application/routing)
+---
+title: Next 앱 라우팅과 페이지 라우팅
+tags: [next]
+date: "2024.03.23"
+---
+React를 사용 할 때는 react-router-dom 라이브러리를 사용 했지만 Next.js에는 라이브러리 없이 라우팅이 가능하다.
+
+## App 라우터와 Page 라우터
+
+Next.js 에서는 2개의 방법으로 라우팅이 가능하다. 하나는 기존에 있던 클라이언트 중심의 Pages Router이고 Next.js 13에 추가 된 서버 중심의 App Router가 있다.
+
+[https://nextjs.org/docs/pages/building-your-application/routing](https://nextjs.org/docs/pages/building-your-application/routing)
+
+Page Router는 pages 디렉터리 에 파일이 추가 된다면 경로를 사용할 수 있다.
+
+Pages 리렉토리에 index 파일을 생성하면 자동으로 라우팅 된다. pages/index.js → / pages/blog/index.js → /blog
+
+만약 / 가 아닌 first-post로 라우팅이 하고 싶다면 first-post.js 파일을 생성 하면 된다. pages/blog/first-post.js → /blog/first-post pages/dashboard/settings/username.js → /dashboard/settings/username
+
+동적 라우팅도 가능한데 []로 감싸주면 동적 라우팅이 가능하다. pages/posts/[id].js → posts/1 또는 posts/2 pages/[id]/index.js → posts/1 또는 posts/2
+
+[...segmentName] 대괄호 안에 세그먼트를 추가하면 다음과 같이 표시할 수 있다. pages/shop/[...slug].js → /shop/clothes 또는 /shop/clothes/tops 또는 /shop/clothes/tops/t-shirts
+
+[[...segmentName]]와 같이 이중 대괄호 안에 세그먼트를 추가하면 매개변수가 없는 경로 또한 일치하게 된다. pages/shop/[...slug].js → /shop 또는 /shop/clothes 또는 /shop/clothes/tops 또는 /shop/clothes/tops/t-shirts
+
+최상위의 _app.js 파일에서 공통 레이아웃을 기존 React와 같이 적용 가능
+
+Pages 폴더 바로 아래에 404.js를 만들어 주면 된다.
+
+##
+
+[https://nextjs.org/docs/app/building-your-application/routing](https://nextjs.org/docs/app/building-your-application/routing)
+
+Next.js 13 부터는 기반의 App Router를 지원한다.
+
+[https://nextjs.org/docs/app/building-your-application/rendering/server-components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)
+
+## 라우팅 규칙
+
+
+
+
+- : 계층 구조를 시각화하기 위한 규칙이다. 예를
+ 들어 상위 및 하위 구성 요소가 있는 구성 요소 트리, 폴더 구조 등이
+ 있다.
+- : 새 루트(첫 번째)에서 시작하여 잎(마지막)에서
+ 끝나는 트리의 일부다.
+- : 루트 레이아웃과 같은 트리 또는 하위 트리의 첫 번째
+ 노드다.
+- : URL 경로의 마지막 세그먼트와 같이 자식이 없는 하위
+ 트리의 노드다.
+
+
+
+- : 슬래시로 구분된 URL 경로의 일부다.
+- : 도메인 뒤에 오는 URL의 일부(세그먼트로 구성)
+예를 들어 아래와 같은 폴더 구조에서 /dashboard/analytics 경로에는 Page.js 파일이 없기 떄문에 유효하지 않은 경로가 된다.
+
+App라우팅의 동적 라우팅은 Page라우팅과 동일하게 적용된다.
+
+App라우팅에서 레이아웃은 기본적으로 서버 컴포넌트이다. 서버 컴포넌트는 13버전에서 추가된 개념인데 추후 서술하도록 하겠다. App 라우팅에서도 공통 레이아웃을 정의하는게 가능한데 아래의 사진과 같이 폴더에 layout 파일을 생성해 주면 /dashboard 와 /dashvoard/settings 는 공통된 레이아웃을 공유하게 된다.
+
+루트 레이아웃은 최상위 수준의 폴더에서 정의되고 모든 경로에 적용 되는 레이아웃이다.
+
+
+만약 최상위 레이아웃에서 html태그와 body태그를 넣지 않거나 하위 레이아웃에서 html태그나 body태그를 포함시킨다면 에러가 발생하니 주의 하도록 하자
+
+
+
+템플릿은 각 하위 레이아웃이나 페이지를 래핑해준다는 점에서 레아아웃과 유사하지만 라우트 이동 시 Layout는 기본적으로 리렌더링이 이루어 지지 않는다는 점이 다르다. 템플릿은 공통된 탬플릿을 사용하는 경우에도 라우트 이동시 DOM요소가 다시 생성되어 상태가 보존되지 않는다.
+
+## 참고 자료
+
+[https://velog.io/@2ast/React-%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8React-Server-Component%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0#%EC%84%9C%EB%A1%A0-%ED%8A%B8%EB%A0%8C%EB%94%94%ED%95%A8%EB%8F%84-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%97%90%EA%B2%8C-%EC%A4%91%EC%9A%94%ED%95%9C-%EB%AF%B8%EB%8D%95%EC%9D%B4%EB%8B%A4](https://velog.io/@2ast/React-%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8React-Server-Component%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0#%EC%84%9C%EB%A1%A0-%ED%8A%B8%EB%A0%8C%EB%94%94%ED%95%A8%EB%8F%84-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%97%90%EA%B2%8C-%EC%A4%91%EC%9A%94%ED%95%9C-%EB%AF%B8%EB%8D%95%EC%9D%B4%EB%8B%A4)
+
+[https://velog.io/@jjunyjjuny/nextjs-13.4.0%EB%B6%80%ED%84%B0-%EC%95%88%EC%A0%95%ED%99%94%EB%90%9C-App-Router.-Pages-Router%EC%99%80-%EB%B9%84%EA%B5%90](https://velog.io/@jjunyjjuny/nextjs-13.4.0%EB%B6%80%ED%84%B0-%EC%95%88%EC%A0%95%ED%99%94%EB%90%9C-App-Router.-Pages-Router%EC%99%80-%EB%B9%84%EA%B5%90)
+
+[https://nextjs.org/docs/app/building-your-application/rendering/server-components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)
+
+[https://nextjs.org/docs/app/building-your-application/routing](https://nextjs.org/docs/app/building-your-application/routing)
+
+[https://nextjs.org/docs/pages/building-your-application/routing](https://nextjs.org/docs/pages/building-your-application/routing)
diff --git a/src/content/posts/next/ImageTag.md b/src/content/posts/next/ImageTag.md
index 4b69b62..9e3d46c 100644
--- a/src/content/posts/next/ImageTag.md
+++ b/src/content/posts/next/ImageTag.md
@@ -1,40 +1,40 @@
----
-title: Next 이미지 최적화
-tags: [next]
-date: "2024.03.23"
----
-Next를 이용해 팀프로젝트를 진행하던 중 Next에서는 img태그 대신 Next에서 제공하는 Image컴포넌트를 사용하는걸 알게 되었다. Image컴포넌트가 제공하는 기능과 장점에 대해 알아보려한다.
-
-## Next/Image 컴포넌트의 기능
-
-Image 컴포넌트가 제공하는 기능은 다음과 같다.
-
-- 이미지 크기 최적화와 최신 이미지 포맷 지원
-- CLS방지
-- 이미지 블러 기능
-- 이미지 리사이징
-[https://nextjs.org/docs/app/building-your-application/optimizing/images](https://nextjs.org/docs/app/building-your-application/optimizing/images)
-
-이미지가 매우 많은 사이트에서 렌더링 초기에 모든 이미지를 다운받게 된다면. 렌더링이 매우 느려질 것 이다. 이때 딱 필요한 부분의 이미지만 렌더링 할 수 있다면. 적은 데이터만을 사용해 빠르게 화면을 렌더링 할 수 있는데 Next에선 이 기능을 제공해준다. img태그에서 loading="lazy" 속성 값을 추가하면 되는데 next의 Imgae 컴포넌트를 사용하면 자동으로 적용된다.
-
-Next에선 로컬 이미지의 경우 import한 이미지 파일을 기준으로 자동으로 width와 height가 지정되고 자동으로 blur 효과가 제공된다.
-
-하지만 원격 이미지일 경우 Next가 빌드 중에 파일에 접근 할 수 없으므로 width와 height를 지정해 주어야 하고 blurDataURL을 제공해 주어야 한다. blurDataUrl은 base64로 인코딩된 이미지여야 한다.
-
-placeholder= "blur"기능을 사용하면 이미지가 로드되기 전에 이미지의 높이만큼 영역을 표시해 이미지가 로드된 후 레이아웃이 변경되는 부분을 방지 할 수 있어 CLS를 많이 개선할 수 있다.
-
-또 next에선 이미지 캐싱 기능을 지원한다. 아래 CF-Cache-Status헤더가 MISS라면 캐시되어 있지 않은 상태이고 HIT상태라면 캐시되어 있는 상태라고 볼 수 있다.
-
-
-
-
-
-위의 사진과 같이 이미지가 캐시된 후에는 더 빠르게 응답한걸 볼 수 있다. 하지만 모든 이미지를 캐싱하는건 아닌데 최적화가 필요 없는 SVG와 같은 vector이미지나 GIF같이 복잡한 애니메이션 이미지의 경우는 최적화가 진행되지 않는다.
-
-jpg, png, webp, avif등등 여러 이미지 형식들이 있다. 폰트와 마찬가지로 형식에 따라 이미지의 용량이 달라지는데 webp와 avif의 경우 이미지 압축을 통해 다른 형식들에 비해 적은 용량을 가진다 특히 avif의 경우 동일한 품질 대비 최대 10배나 적은 용량을 가진다고 알려졌다. Next에선 이미지를 webp나 avif으로 변환 시켜줘 보다 빠르게 이미지를 로드 할 수 있다.
-
-[https://nextjs.org/docs/pages/api-reference/components/image](https://nextjs.org/docs/pages/api-reference/components/image)
-
-## 마치며
-
-Next에서는 여러 최적화를 자체적으로 지원하고 있어서 사용하기 편리하다는 점이 장점인 것 같다. 실제 서비스에 적용시킨 다면 아주 큰 효과를 볼 수 있을 것 같다.
+---
+title: Next 이미지 최적화
+tags: [next]
+date: "2024.03.23"
+---
+Next를 이용해 팀프로젝트를 진행하던 중 Next에서는 img태그 대신 Next에서 제공하는 Image컴포넌트를 사용하는걸 알게 되었다. Image컴포넌트가 제공하는 기능과 장점에 대해 알아보려한다.
+
+## Next/Image 컴포넌트의 기능
+
+Image 컴포넌트가 제공하는 기능은 다음과 같다.
+
+- 이미지 크기 최적화와 최신 이미지 포맷 지원
+- CLS방지
+- 이미지 블러 기능
+- 이미지 리사이징
+[https://nextjs.org/docs/app/building-your-application/optimizing/images](https://nextjs.org/docs/app/building-your-application/optimizing/images)
+
+이미지가 매우 많은 사이트에서 렌더링 초기에 모든 이미지를 다운받게 된다면. 렌더링이 매우 느려질 것 이다. 이때 딱 필요한 부분의 이미지만 렌더링 할 수 있다면. 적은 데이터만을 사용해 빠르게 화면을 렌더링 할 수 있는데 Next에선 이 기능을 제공해준다. img태그에서 loading="lazy" 속성 값을 추가하면 되는데 next의 Imgae 컴포넌트를 사용하면 자동으로 적용된다.
+
+Next에선 로컬 이미지의 경우 import한 이미지 파일을 기준으로 자동으로 width와 height가 지정되고 자동으로 blur 효과가 제공된다.
+
+하지만 원격 이미지일 경우 Next가 빌드 중에 파일에 접근 할 수 없으므로 width와 height를 지정해 주어야 하고 blurDataURL을 제공해 주어야 한다. blurDataUrl은 base64로 인코딩된 이미지여야 한다.
+
+placeholder= "blur"기능을 사용하면 이미지가 로드되기 전에 이미지의 높이만큼 영역을 표시해 이미지가 로드된 후 레이아웃이 변경되는 부분을 방지 할 수 있어 CLS를 많이 개선할 수 있다.
+
+또 next에선 이미지 캐싱 기능을 지원한다. 아래 CF-Cache-Status헤더가 MISS라면 캐시되어 있지 않은 상태이고 HIT상태라면 캐시되어 있는 상태라고 볼 수 있다.
+
+
+
+
+
+위의 사진과 같이 이미지가 캐시된 후에는 더 빠르게 응답한걸 볼 수 있다. 하지만 모든 이미지를 캐싱하는건 아닌데 최적화가 필요 없는 SVG와 같은 vector이미지나 GIF같이 복잡한 애니메이션 이미지의 경우는 최적화가 진행되지 않는다.
+
+jpg, png, webp, avif등등 여러 이미지 형식들이 있다. 폰트와 마찬가지로 형식에 따라 이미지의 용량이 달라지는데 webp와 avif의 경우 이미지 압축을 통해 다른 형식들에 비해 적은 용량을 가진다 특히 avif의 경우 동일한 품질 대비 최대 10배나 적은 용량을 가진다고 알려졌다. Next에선 이미지를 webp나 avif으로 변환 시켜줘 보다 빠르게 이미지를 로드 할 수 있다.
+
+[https://nextjs.org/docs/pages/api-reference/components/image](https://nextjs.org/docs/pages/api-reference/components/image)
+
+## 마치며
+
+Next에서는 여러 최적화를 자체적으로 지원하고 있어서 사용하기 편리하다는 점이 장점인 것 같다. 실제 서비스에 적용시킨 다면 아주 큰 효과를 볼 수 있을 것 같다.
diff --git a/src/content/posts/next/Migrating-nextjs-page-router-to-app-router.md b/src/content/posts/next/Migrating-nextjs-page-router-to-app-router.md
index 324ef8e..cec1217 100644
--- a/src/content/posts/next/Migrating-nextjs-page-router-to-app-router.md
+++ b/src/content/posts/next/Migrating-nextjs-page-router-to-app-router.md
@@ -1,68 +1,68 @@
----
-title: Next.js app router 마이그레이션 전환하기
-tags: [next]
-date: "2025.02.19"
----
-저번주에 Page Router 방식의 프로젝트를 App Router로 전환했는데요 마이그레이션을 진행하며 겪었던 부분과 App Router의 장단점을 서술해보려 합니다.
-
-App Router는 React 18을 지원하기 위해 도입된 방식으로 React 18에서 제공하는 서버 컴포넌트, 클라이언트 컴포넌트, Suspense 같은 여러 기능들을 사용할 수 있습니다.
-
-## App Router의 폴더구조
-App Router는 파일 시스템 기반 라우팅을 지원하며 app 폴더 내부에 `page` `layout`
-`error` `loading` `not-found`와 같은 파일들을 이용해 화면을 구성할 수 있습니다.
-
-### page
-각 폴더 내부에는 `page`파일이 있어야 라우팅이 가능합니다.
-
-### layout
-layout파일은 모든 하위 경로에 공통적인 UI를 제공합니다.
-
-이 정보에 대한 자세한 설명은 [공식문서](https://nextjs.org/docs/app/getting-started/layouts-and-pages)를 보시면 됩니다.
-```
-/app
- ├── components/ <------- 경로 생성 X
- | └── InputComponent.tsx
- ├── blog/ <------- /blog
- | ├── layout.tsx <------- 중첩 레이아웃
- | ├── page.tsx
- | └── [slug]/ <------- /blog/[slug]
- | └── page.tsx
- ├── layout.tsx <------- 공통 레이아웃
- └── page.tsx <------- 메인 페이지
-```
-
-## use client
-App Router는 기본적으로 서버컴포넌트를 지원하며 'use client'키워드를 사용해 클라이언트 컴포넌트임을 명시할 수 있습니다.
-
-서버 컴포넌트
-- 서버에서 직접 데이터 가져오기
-- 보안에 민감한 정보에 안전하게 접근
-- 렌더링에 필요한 라이브러리를 번들에 포함하지 않음으로써 JS 사이즈 줄이기
-
-클라이언트 컴포넌트
-- onClick, onChange와 같은 이벤트 리스너
-- useState, useReducer, useEffect와 같은 상태와 생명주기
-- 브라우저에서 사용할 수 있는 api
-- state, effect, brower api를 사용하는 커스텀 훅
-
-만약 서버컴포넌트에서 이벤트 리스너를 사용하거나 클라이언트 컴포넌트에서 데이터를 요청하게 되면 에러가 발생합니다.
-
-클라이언트에서 데이터를 가져오려면 이전처럼 `useEffect`를 이용해 데이터를 요청할 수 있습니다.
-
-## 좋았던 점
-### metadata
-루트 layout에서 메타데이터 API를 통해 SEO 설정을 쉽게 관리할 수 있어 편리했습니다.
-### 데이터 페칭
-컴포넌트 내에서 직접 async/await 데이터 요청을 보내 클라이언트로 불필요한 로직을 전송하지 않아도 되어 중요 데이터 은닉과 같은 부분이 좋았고 Suspense같은 기능을 이용해 콘텐츠 로딩과 에러 핸들링이 편리해졌습니다.
-### 편리한 레이아웃 관리
-프로젝트를 파일 단위로 관리해 공통의 `layout`이나 `loading`, `not-found`이용한 핸들링을 할 수 있게되어 여러 사람과 협업을 할 때 편리할 것 같다는 생각이 들었습니다.
-### 번들 사이즈
-서버 컴포넌트와 클라이언트 컴포넌트를 구분해 필요한 부분만 클라이언트에 보내 초기 로딩 속도를 줄일 수 있습니다.
-
-## 단점
-### 학습 곡선
-클라이언트 컴포넌트와 서버 컴포넌트의 장점과 단점을 구분하며 컴포넌트를 설계해야하는 부분과 클라이언트에서 호출할 함수와 서버에서 호출하는 함수를 구분하고 에러 핸들링 방식을 다르게 처리해야 하는 부분이 불편했습니다.
-
-기존에는 axios interceptors를 이용해 공통으로 데이터 요청에 대한 에러를 핸들링했다면 서버에서 사용하는 axios와 클라이언트에서 사용하는 axios를 다르게 설정해야 한다는 점이 아쉬웠습니다.
-
+---
+title: Next.js app router 마이그레이션 전환하기
+tags: [next]
+date: "2025.02.19"
+---
+저번주에 Page Router 방식의 프로젝트를 App Router로 전환했는데요 마이그레이션을 진행하며 겪었던 부분과 App Router의 장단점을 서술해보려 합니다.
+
+App Router는 React 18을 지원하기 위해 도입된 방식으로 React 18에서 제공하는 서버 컴포넌트, 클라이언트 컴포넌트, Suspense 같은 여러 기능들을 사용할 수 있습니다.
+
+## App Router의 폴더구조
+App Router는 파일 시스템 기반 라우팅을 지원하며 app 폴더 내부에 `page` `layout`
+`error` `loading` `not-found`와 같은 파일들을 이용해 화면을 구성할 수 있습니다.
+
+### page
+각 폴더 내부에는 `page`파일이 있어야 라우팅이 가능합니다.
+
+### layout
+layout파일은 모든 하위 경로에 공통적인 UI를 제공합니다.
+
+이 정보에 대한 자세한 설명은 [공식문서](https://nextjs.org/docs/app/getting-started/layouts-and-pages)를 보시면 됩니다.
+```
+/app
+ ├── components/ <------- 경로 생성 X
+ | └── InputComponent.tsx
+ ├── blog/ <------- /blog
+ | ├── layout.tsx <------- 중첩 레이아웃
+ | ├── page.tsx
+ | └── [slug]/ <------- /blog/[slug]
+ | └── page.tsx
+ ├── layout.tsx <------- 공통 레이아웃
+ └── page.tsx <------- 메인 페이지
+```
+
+## use client
+App Router는 기본적으로 서버컴포넌트를 지원하며 'use client'키워드를 사용해 클라이언트 컴포넌트임을 명시할 수 있습니다.
+
+서버 컴포넌트
+- 서버에서 직접 데이터 가져오기
+- 보안에 민감한 정보에 안전하게 접근
+- 렌더링에 필요한 라이브러리를 번들에 포함하지 않음으로써 JS 사이즈 줄이기
+
+클라이언트 컴포넌트
+- onClick, onChange와 같은 이벤트 리스너
+- useState, useReducer, useEffect와 같은 상태와 생명주기
+- 브라우저에서 사용할 수 있는 api
+- state, effect, brower api를 사용하는 커스텀 훅
+
+만약 서버컴포넌트에서 이벤트 리스너를 사용하거나 클라이언트 컴포넌트에서 데이터를 요청하게 되면 에러가 발생합니다.
+
+클라이언트에서 데이터를 가져오려면 이전처럼 `useEffect`를 이용해 데이터를 요청할 수 있습니다.
+
+## 좋았던 점
+### metadata
+루트 layout에서 메타데이터 API를 통해 SEO 설정을 쉽게 관리할 수 있어 편리했습니다.
+### 데이터 페칭
+컴포넌트 내에서 직접 async/await 데이터 요청을 보내 클라이언트로 불필요한 로직을 전송하지 않아도 되어 중요 데이터 은닉과 같은 부분이 좋았고 Suspense같은 기능을 이용해 콘텐츠 로딩과 에러 핸들링이 편리해졌습니다.
+### 편리한 레이아웃 관리
+프로젝트를 파일 단위로 관리해 공통의 `layout`이나 `loading`, `not-found`이용한 핸들링을 할 수 있게되어 여러 사람과 협업을 할 때 편리할 것 같다는 생각이 들었습니다.
+### 번들 사이즈
+서버 컴포넌트와 클라이언트 컴포넌트를 구분해 필요한 부분만 클라이언트에 보내 초기 로딩 속도를 줄일 수 있습니다.
+
+## 단점
+### 학습 곡선
+클라이언트 컴포넌트와 서버 컴포넌트의 장점과 단점을 구분하며 컴포넌트를 설계해야하는 부분과 클라이언트에서 호출할 함수와 서버에서 호출하는 함수를 구분하고 에러 핸들링 방식을 다르게 처리해야 하는 부분이 불편했습니다.
+
+기존에는 axios interceptors를 이용해 공통으로 데이터 요청에 대한 에러를 핸들링했다면 서버에서 사용하는 axios와 클라이언트에서 사용하는 axios를 다르게 설정해야 한다는 점이 아쉬웠습니다.
+
하지만 이런 부분은 학습을 통해 App Router에 대한 이해도가 높아지면 자연스럽게 해결될 것 이라고 생각합니다.
\ No newline at end of file
diff --git a/src/content/posts/next/Next-data-fetchting.md b/src/content/posts/next/Next-data-fetchting.md
index 53d02d1..2f59a3e 100644
--- a/src/content/posts/next/Next-data-fetchting.md
+++ b/src/content/posts/next/Next-data-fetchting.md
@@ -1,92 +1,92 @@
----
-title: next.js의 데이터 패칭
-tags: [next]
-date: "2024.08.03"
----
-next.js에서 데이터를 가져올 때 사용되는 함수들이 있습니다.
-`getStaticProps()` `getStaticPaths()` `getServerSideProps()`
-전부 데이터를 가져올 때 사용되는 함수지만 차이점이 있어서 이에 대한 정보를 정리해보려 합니다.
-
-## getStaticProps()
-`getStaticProps()`는 빌드 시점에서 데이터를 가져오고 페이지를 정적으로 생성할 때 사용됩니다.
-
-이 함수는 페이지가 빌드될 때 한 번만 호출되며 변경이 적은 콘텐츠를 렌더링할 때 사용됩니다.
-
-```javascript
-export async function getStaticProps() {
- const res = await fetch('https://api.github.com/repos/vercel/next.js')
- const repo = await res.json()
- return { props: { repo } }
-}
-
-export default function Page({ repo }) {
- return repo.stargazers_count
-}
-```
-
-## getStaticPaths()
-이 함수는 동적 경로를 가진 페이지에서 미리 빌드할 경로를 정의할 때 사용됩니다. `getStaticProps()`함수와 같이 사용됩니다.
-
-```javascript
-export async function getStaticPaths() {
- return {
- paths: [
- {
- params: {
- name: 'next.js',
- },
- },
- ],
- fallback: true,
- }
-}
-
-export async function getStaticProps() {
- const res = await fetch('https://api.github.com/repos/vercel/next.js')
- const repo = await res.json()
- return { props: { repo } }
-}
-
-export default function Page({ repo }) {
- return repo.stargazers_count
-}
-```
-fallback의 옵션으로는
-`false` : 빌드된 경로 외의 페이지는 404를 반환
-`true` : 빌드된 경로 외의 페이지를 요청 시, 빌드되지 않은 페이지는 서버에서 데이터를 가져와 렌더링 후 캐싱
-`blocking` : 경로를 요청할 때 빌드되지 않은 페이지는 서버에서 데이터를 가져오고, 준비가 되면 클라이언트에 제공
-가 있습니다.
-## getServerSideProps()
-`getServerSideProps()`는 요청시마다 데이터를 가져오고 서버에서 데이터를 가져와 렌더링 하기 때문에 SEO와 초기 페이지 로딩 속도에 유리합니다.
-```javascript
-export async function getServerSideProps() {
-
- const res = await fetch('https://api.github.com/repos/vercel/next.js')
- const repo = await res.json()
-
- return { props: { repo } } // Page에 Porps 전달
-}
-
-export default function Page({ repo }) {
- return (
-
- {repo.stargazers_count}
-
- )
-}
-```
-
-## 마치며
-
-| 함수 | 실행 시점 | 사용 용도 | 장점 | 단점 |
-|---------------------|----------------------|----------------------------------|-----------------------------|-----------------------------|
-| `getStaticProps()` | 빌드 시점 | 정적 생성 (SEO 최적화, 빠른 로딩) | 성능 향상, 캐싱 가능 | 빌드 후 데이터 변경 불가 |
-| `getStaticPaths()` | 빌드 시점 | 동적 경로에 대한 정적 생성 | 동적 경로 지원 | 새로운 경로는 빌드 후 추가해야 함 |
-| `getServerSideProps()` | 요청 시점 | 서버에서 데이터를 가져와야 할 때 | SEO 최적화, 실시간 데이터 반영 | 서버 요청마다 데이터 로딩, 느린 페이지 로딩 |
-
-
-Next.js로 프로젝트를 구성하다보니 React 와는 다른점이 많아 배워야 할 부분들이 참 많은 것 같습니다.
-
-
-
+---
+title: next.js의 데이터 패칭
+tags: [next]
+date: "2024.08.03"
+---
+next.js에서 데이터를 가져올 때 사용되는 함수들이 있습니다.
+`getStaticProps()` `getStaticPaths()` `getServerSideProps()`
+전부 데이터를 가져올 때 사용되는 함수지만 차이점이 있어서 이에 대한 정보를 정리해보려 합니다.
+
+## getStaticProps()
+`getStaticProps()`는 빌드 시점에서 데이터를 가져오고 페이지를 정적으로 생성할 때 사용됩니다.
+
+이 함수는 페이지가 빌드될 때 한 번만 호출되며 변경이 적은 콘텐츠를 렌더링할 때 사용됩니다.
+
+```javascript
+export async function getStaticProps() {
+ const res = await fetch('https://api.github.com/repos/vercel/next.js')
+ const repo = await res.json()
+ return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+ return repo.stargazers_count
+}
+```
+
+## getStaticPaths()
+이 함수는 동적 경로를 가진 페이지에서 미리 빌드할 경로를 정의할 때 사용됩니다. `getStaticProps()`함수와 같이 사용됩니다.
+
+```javascript
+export async function getStaticPaths() {
+ return {
+ paths: [
+ {
+ params: {
+ name: 'next.js',
+ },
+ },
+ ],
+ fallback: true,
+ }
+}
+
+export async function getStaticProps() {
+ const res = await fetch('https://api.github.com/repos/vercel/next.js')
+ const repo = await res.json()
+ return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+ return repo.stargazers_count
+}
+```
+fallback의 옵션으로는
+`false` : 빌드된 경로 외의 페이지는 404를 반환
+`true` : 빌드된 경로 외의 페이지를 요청 시, 빌드되지 않은 페이지는 서버에서 데이터를 가져와 렌더링 후 캐싱
+`blocking` : 경로를 요청할 때 빌드되지 않은 페이지는 서버에서 데이터를 가져오고, 준비가 되면 클라이언트에 제공
+가 있습니다.
+## getServerSideProps()
+`getServerSideProps()`는 요청시마다 데이터를 가져오고 서버에서 데이터를 가져와 렌더링 하기 때문에 SEO와 초기 페이지 로딩 속도에 유리합니다.
+```javascript
+export async function getServerSideProps() {
+
+ const res = await fetch('https://api.github.com/repos/vercel/next.js')
+ const repo = await res.json()
+
+ return { props: { repo } } // Page에 Porps 전달
+}
+
+export default function Page({ repo }) {
+ return (
+
+ {repo.stargazers_count}
+
+ )
+}
+```
+
+## 마치며
+
+| 함수 | 실행 시점 | 사용 용도 | 장점 | 단점 |
+|---------------------|----------------------|----------------------------------|-----------------------------|-----------------------------|
+| `getStaticProps()` | 빌드 시점 | 정적 생성 (SEO 최적화, 빠른 로딩) | 성능 향상, 캐싱 가능 | 빌드 후 데이터 변경 불가 |
+| `getStaticPaths()` | 빌드 시점 | 동적 경로에 대한 정적 생성 | 동적 경로 지원 | 새로운 경로는 빌드 후 추가해야 함 |
+| `getServerSideProps()` | 요청 시점 | 서버에서 데이터를 가져와야 할 때 | SEO 최적화, 실시간 데이터 반영 | 서버 요청마다 데이터 로딩, 느린 페이지 로딩 |
+
+
+Next.js로 프로젝트를 구성하다보니 React 와는 다른점이 많아 배워야 할 부분들이 참 많은 것 같습니다.
+
+
+
[참고 자료](https://nextjs.org/docs/pages/building-your-application/data-fetching)
\ No newline at end of file
diff --git a/src/content/posts/next/Next.js-Form-Elements.md b/src/content/posts/next/Next.js-Form-Elements.md
index 90c129d..ddb93f6 100644
--- a/src/content/posts/next/Next.js-Form-Elements.md
+++ b/src/content/posts/next/Next.js-Form-Elements.md
@@ -1,74 +1,75 @@
----
-title: Next.js Form 구성 요소
-tags: [next]
-date: "2025.01.25"
----
-이번에 블로그를 Next.js로 마이그레이션 하면서 `Form`를 유용하게 사용해 사용방법을 공유하려 합니다.
-
-## Next.js에서의 Form 사용법
-HTML에서 `
- )
-}
-```
-
-## action
-### 문자열
-`action`이 문자열일 경우 다음 props를 지원합니다.
-
-| 속성 | 예제 | 유형 | 필수 여부 |
-| ---------- | --------------------- | ----------------------------- | --------- |
-| `action` | `action="/search"` | `string` (URL 또는 상대 경로) | 예 |
-| `replace` | `replace={false}` | `boolean` | 아니요 |
-| `scroll` | `scroll={true}` | `boolean` | 아니요 |
-| `prefetch` | `prefetch={true}` | `boolean` | 아니요 |
-
-- **action :** 양식이 제출될 때 이동할 URL 경로 입니다.
-- **replace :** 브라우저 히스토리를 새로 추가하지 않고 현재 상태를 덮어씁니다.
-- **scroll :** 스크롤의 위치를 결정합니다.
-- **prefetch :** 해당 경로를 미리 로드할지 결정합니다.
-
-### 함수
-`action`이 함수일 경우 React의 `From`처럼 동작합니다.
-
-- 제출하면 서버 엑션 함수가 실행
-- 서버에서 데이터를 처리한 후 필요한 작업 수행
-
-## 활용
-블로그를 만들 때 action 속성에 경로를 전달하여 검색 결과 페이지로 이동하는`Form`을 만들었습니다.
-```js
-
-```
-또 데이터를 가져오는 동안 Loading 로딩 UI를 표시할 수 있습니다.
-```js
-Loading... }>
-
-
-```
-
+---
+title: Next.js Form 구성 요소
+series: blog
+tags: [next]
+date: "2025.01.25"
+---
+이번에 블로그를 Next.js로 마이그레이션 하면서 `Form`를 유용하게 사용해 사용방법을 공유하려 합니다.
+
+## Next.js에서의 Form 사용법
+HTML에서 `
+ )
+}
+```
+
+## action
+### 문자열
+`action`이 문자열일 경우 다음 props를 지원합니다.
+
+| 속성 | 예제 | 유형 | 필수 여부 |
+| ---------- | --------------------- | ----------------------------- | --------- |
+| `action` | `action="/search"` | `string` (URL 또는 상대 경로) | 예 |
+| `replace` | `replace={false}` | `boolean` | 아니요 |
+| `scroll` | `scroll={true}` | `boolean` | 아니요 |
+| `prefetch` | `prefetch={true}` | `boolean` | 아니요 |
+
+- **action :** 양식이 제출될 때 이동할 URL 경로 입니다.
+- **replace :** 브라우저 히스토리를 새로 추가하지 않고 현재 상태를 덮어씁니다.
+- **scroll :** 스크롤의 위치를 결정합니다.
+- **prefetch :** 해당 경로를 미리 로드할지 결정합니다.
+
+### 함수
+`action`이 함수일 경우 React의 `From`처럼 동작합니다.
+
+- 제출하면 서버 엑션 함수가 실행
+- 서버에서 데이터를 처리한 후 필요한 작업 수행
+
+## 활용
+블로그를 만들 때 action 속성에 경로를 전달하여 검색 결과 페이지로 이동하는`Form`을 만들었습니다.
+```js
+
+```
+또 데이터를 가져오는 동안 Loading 로딩 UI를 표시할 수 있습니다.
+```js
+
Loading...{randomValue}
;
-};
-```
-
-이러한 코드를 작성하게 되면
-
-```
-Text content did not match. Server: "0.7115683340234322" Client: "0.27284691182029364"
-```
-이처럼 서버에서의 렌더링 결과물과 클라이언트에서의 렌더링 결과물이 일치하지 않아서 생기는 오류입니다.
-
-문제를 해결하기 위해선 useEffect를 사용해 페이지가 렌더링 된 후 랜덤 한 값을 생성해 주면 됩니다.
-
-```javascript
-const RandomNumber = () => {
- const [number, setNumber] = useState(null);
-
- useEffect(()=>{
- setNumber(Math.random())
- },[])
-
- return {number}
;
-};
-```
-하지만 이 방법 또한 사전 렌더링 되어 넘어온 HTML에는 랜덤 한 숫자 값이 보이지 않는다는 단점이 있습니다.
-
-이때 PageRouter는 getServerSideProps를 이용하면 서버에서 랜덤 한 값을 생성해 클라이언트 컴포넌트에 props로 넘겨줄 수 있습니다.
-
-```javascript
-
-export async function getServerSideProps() {
- // 서버에서 랜덤 값 생성
- const randomValue = Math.random();
-
- return {
- props: {
- randomValue, // 랜덤 값을 컴포넌트에 전달
- },
- };
-}
-
-const RandomNumber = ({ randomValue }) => {
-
- return {randomValue}
;
-};
-```
-
-[next 공식문서](https://nextjs.org/docs/pages/building-your-application/rendering)
-
-## 마치며
-
-처음 Hydration 에러를 직면했을 때 SSR에 대한 이해가 부족했어서 당황스러웠는데 문제를 해결하기 위해
+---
+title: next.js의 Hydration
+tags: [next]
+date: "2024.07.27"
+---
+Next.js 공식문서를 읽어보던 중 중요한 개념이 보여 정리하고 넘어가려고 합니다.
+
+우선 Hydration을 알기 전에 React와 Next의 기본 동작 방식에 대해 알아야 합니다.
+
+React는 브라우저에서 요청이 들어오면 빈 HTML 파일과 JS 파일로 번들링된 React 파일을 넘겨줍니다.
+그 이후 브라우저가 JS파일을 읽어 화면을 그려나가기 시작합니다. 이러한 이유 때문에
+React 프로젝트가 SEO에 적합하지 않고 첫 로딩 속도가 느릴 수 있다는 단점이 있습니다.
+
+Next.js는 빌드 시 사전 렌더링(Pre-Rendering)을 진행하는데 빌드 시 미리 HTML파일을 생성해
+브라우저에서 요청이 들어왔을 때 미리 생성한 HTML 파일을 넘겨줌으로써 초기 로드 속도도 향상
+시키고 SEO에 적합하다는 장점이 있습니다.
+
+## Hydration이란?
+
+사실 Hydration이라는 개념은 React부터 있는 개념입니다.
+[React 공식문서](https://18.react.dev/reference/react-dom/client/hydrateRoot)
+
+React의 Hydration은 서버에서 미리 생성된 HTML을 먼저 클라이언트에 보낸 후 JS 파일로 번들링된
+React 파일을 HTML 파일과 매칭시는 Hydration 작업을 수행합니다. 이때 HTML DOM 요소 위에 한번더 렌더링 하게 되면서
+이벤트나 모듈들이 적용돼 동적 기능이 활성화됩니다.
+
+React는 직접 React API를 설정해 SSR을 구현해야 한다면 Next는 React 기반의 프레임워크답게
+내부적으로 서버 렌더링과 정적 사이트 생성 같은 기능을 처리하며
+데이터 패칭, 라우팅, 빌드 시점 렌더링과 같은 기능을 제공합니다.
+
+### Hydration과정에서 생길 수 있는 오류
+
+page 라우터의 Hydration
+
+```javascript
+const RandomNumber = () => {
+ const randomValue = Math.random(); // 서버에서 렌덤한 값 생성
+
+ return {randomValue}
;
+};
+```
+
+이러한 코드를 작성하게 되면
+
+```
+Text content did not match. Server: "0.7115683340234322" Client: "0.27284691182029364"
+```
+이처럼 서버에서의 렌더링 결과물과 클라이언트에서의 렌더링 결과물이 일치하지 않아서 생기는 오류입니다.
+
+문제를 해결하기 위해선 useEffect를 사용해 페이지가 렌더링 된 후 랜덤 한 값을 생성해 주면 됩니다.
+
+```javascript
+const RandomNumber = () => {
+ const [number, setNumber] = useState(null);
+
+ useEffect(()=>{
+ setNumber(Math.random())
+ },[])
+
+ return {number}
;
+};
+```
+하지만 이 방법 또한 사전 렌더링 되어 넘어온 HTML에는 랜덤 한 숫자 값이 보이지 않는다는 단점이 있습니다.
+
+이때 PageRouter는 getServerSideProps를 이용하면 서버에서 랜덤 한 값을 생성해 클라이언트 컴포넌트에 props로 넘겨줄 수 있습니다.
+
+```javascript
+
+export async function getServerSideProps() {
+ // 서버에서 랜덤 값 생성
+ const randomValue = Math.random();
+
+ return {
+ props: {
+ randomValue, // 랜덤 값을 컴포넌트에 전달
+ },
+ };
+}
+
+const RandomNumber = ({ randomValue }) => {
+
+ return {randomValue}
;
+};
+```
+
+[next 공식문서](https://nextjs.org/docs/pages/building-your-application/rendering)
+
+## 마치며
+
+처음 Hydration 에러를 직면했을 때 SSR에 대한 이해가 부족했어서 당황스러웠는데 문제를 해결하기 위해
공식 문서를 읽어보던 중 SSR에 대한 이해와 Next의 렌더링 방식에 대해 더욱 많은 이해를 할 수 있는 시간이었습니다.
\ No newline at end of file
diff --git a/src/content/posts/node/BJ1712.md b/src/content/posts/node/BJ1712.md
index 595ee58..7b92375 100644
--- a/src/content/posts/node/BJ1712.md
+++ b/src/content/posts/node/BJ1712.md
@@ -1,17 +1,17 @@
----
-title: 백준 1712번 알고리즘 [node.js]
-tags: [알고리즘]
-date: "2022.12.01"
----
-
-[https://www.acmicpc.net/problem/1712](https://www.acmicpc.net/problem/1712)
-
-## 문제
-
-첫 줄에 A, B, C 가 주어지는데 A는 고정비용 B는 가변비용 C는 판매가격이라고 할 때 최초로 총 수입이 총 비용보다 많아져 이익이 발생하는 손익분기점을 넘기는 값을 구하는 문제이다
-
-## 풀이
-
-간단하게 생각해서 마진은 판매가격에서 가변비용을 빼주게 되면 나온다. 이 마진을 고정비용으로 나눠주게 되면 손익분기점이 나오는데 우리는 손익분기점을 넘기는 값을 구해야 하기 때문에 1을 더해주면 된다. 그리고 만약 손익분기점이 존재하지 않는다면 -1을 출력해준다
-
-
+---
+title: 백준 1712번 알고리즘 [node.js]
+tags: [알고리즘]
+date: "2022.12.01"
+---
+
+[https://www.acmicpc.net/problem/1712](https://www.acmicpc.net/problem/1712)
+
+## 문제
+
+첫 줄에 A, B, C 가 주어지는데 A는 고정비용 B는 가변비용 C는 판매가격이라고 할 때 최초로 총 수입이 총 비용보다 많아져 이익이 발생하는 손익분기점을 넘기는 값을 구하는 문제이다
+
+## 풀이
+
+간단하게 생각해서 마진은 판매가격에서 가변비용을 빼주게 되면 나온다. 이 마진을 고정비용으로 나눠주게 되면 손익분기점이 나오는데 우리는 손익분기점을 넘기는 값을 구해야 하기 때문에 1을 더해주면 된다. 그리고 만약 손익분기점이 존재하지 않는다면 -1을 출력해준다
+
+
diff --git a/src/content/posts/node/BJ2292.md b/src/content/posts/node/BJ2292.md
index 7c28adf..2cd5e94 100644
--- a/src/content/posts/node/BJ2292.md
+++ b/src/content/posts/node/BJ2292.md
@@ -1,18 +1,18 @@
----
-title: 백준 2292번 알고리즘 [node.js]
-tags: [알고리즘]
-date: "2022.12.01"
----
-
-
-[https://www.acmicpc.net/problem/2292](https://www.acmicpc.net/problem/2292)
-
-## 문제
-
-육각형으로 이루어진 벌집이 있다. 중앙에 방 1부터 시작해서 이웃하는 방에 돌아가면서 1찍 증가하는 번주를 매기는데 숫자 N이 주어졌을 떄, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈때 몇개의 방을 지나가는지(시작과 끝을 포함)를 계산하는 문제이다. 예를 들어 13까지는 3개, 58까지는 5개를 지난다.
-
-## 풀이
-
-규칙없이 반복문을 돌렸더니 시간초과가 나서 무언가 규칙이 있다는걸 알게 됐다. 1번방을 시작으로 6, 12, 18, 24 6의 배수 였고 입력 받은 값을 6의 배수보다 작을때 까지 돌려주면 최소 개수의 방을 구할 수 있다.
-
+---
+title: 백준 2292번 알고리즘 [node.js]
+tags: [알고리즘]
+date: "2022.12.01"
+---
+
+
+[https://www.acmicpc.net/problem/2292](https://www.acmicpc.net/problem/2292)
+
+## 문제
+
+육각형으로 이루어진 벌집이 있다. 중앙에 방 1부터 시작해서 이웃하는 방에 돌아가면서 1찍 증가하는 번주를 매기는데 숫자 N이 주어졌을 떄, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈때 몇개의 방을 지나가는지(시작과 끝을 포함)를 계산하는 문제이다. 예를 들어 13까지는 3개, 58까지는 5개를 지난다.
+
+## 풀이
+
+규칙없이 반복문을 돌렸더니 시간초과가 나서 무언가 규칙이 있다는걸 알게 됐다. 1번방을 시작으로 6, 12, 18, 24 6의 배수 였고 입력 받은 값을 6의 배수보다 작을때 까지 돌려주면 최소 개수의 방을 구할 수 있다.
+
\ No newline at end of file
diff --git a/src/content/posts/node/BJ25206.md b/src/content/posts/node/BJ25206.md
index 9d1b9c4..06a62bc 100644
--- a/src/content/posts/node/BJ25206.md
+++ b/src/content/posts/node/BJ25206.md
@@ -1,82 +1,82 @@
----
-title: 백준 25206번 알고리즘 [node.js]
-tags: [알고리즘]
-date: "2024.02.27"
----
-
-## 문제
-
-[https://www.acmicpc.net/problem/25206](https://www.acmicpc.net/problem/25206)
-
-인하대학교 컴퓨터공학과를 졸업하기 위해서는, 전공평점이 3.3 이상이거나 졸업고사를 통과해야 한다. 그런데 아뿔싸, 치훈이는 깜빡하고 졸업고사를 응시하지 않았다는 사실을 깨달았다! 치훈이의 전공평점을 계산해주는 프로그램을 작성해보자. 전공평점은 전공과목별 (학점 × 과목평점)의 합을 학점의 총합으로 나눈 값이다. 인하대학교 컴퓨터공학과의 등급에 따른 과목평점은 다음 표와 같다.
-
- P/F 과목의 경우 등급이 P또는 F로 표시되는데, 등급이 P인 과목은 계산에서 제외해야 한다. 과연 치훈이는 무사히 졸업할 수 있을까?
-
-## 풀이
-
-```javascript
-const readline = require("readline");
-
-const rl = readline.createInterface({
- input: process.stdin,
- output: process.stdout,
-});
-
-/* 예제 입력
- ObjectOrientedProgramming1 3.0 A+
- IntroductiontoComputerEngineering 3.0 A+
- ObjectOrientedProgramming2 3.0 A0
- CreativeComputerEngineeringDesign 3.0 A+
- AssemblyLanguage 3.0 A+
- InternetProgramming 3.0 B0
- ApplicationProgramminginJava 3.0 A0
- SystemProgramming 3.0 B0
- OperatingSystem 3.0 B0
- WirelessCommunicationsandNetworking 3.0 C+
- LogicCircuits 3.0 B0
- DataStructure 4.0 A+
- MicroprocessorApplication 3.0 B+
- EmbeddedSoftware 3.0 C0
- ComputerSecurity 3.0 D+
- Database 3.0 C+
- Algorithm 3.0 B0
- CapstoneDesigninCSE 3.0 B+
- CompilerDesign 3.0 D0
- ProblemSolving 4.0 P
- */
-
-let input = [];
-let aa = 0;
-let GPA = {
- "A+": 4.5,
- A0: 4.0,
- "B+": 3.5,
- B0: 3.0,
- "C+": 2.5,
- C0: 2.0,
- "D+": 1.5,
- D0: 1.0,
- F: 0.0,
- P: null,
-};
-
-rl.on("line", (line) => {
- const a = line.split(" ");
- // p인 과목은 계산에서 제외한다.
- if (GPA[a[2]] != null) {
- aa += +a[1]; // 학점을 더해준다
- input.push(a[1] * GPA[a[2]]); // 과목의 학점과 과목평점을 곱해준다.
- }
-}).on("close", () => {
- // 학점과 과목평점을 곱한 값을 전부 더해준다.
- let sum = input.reduce((acc, cur) => {
- return acc + cur;
- });
- // 학점 * 과목평점의 합을 학점의 총점으로 나눠준다.
- console.log((sum / aa).toFixed(6));
-});
-```
-
-## 여담
-
-최근 알고리즘 공부를 개을리 했었는데 최근 문자열 유사도 검사와 같이 복잡한 로직을 구현할 때 어려움을 겪어 다시 1일1문제풀이를 하려한다.
+---
+title: 백준 25206번 알고리즘 [node.js]
+tags: [알고리즘]
+date: "2024.02.27"
+---
+
+## 문제
+
+[https://www.acmicpc.net/problem/25206](https://www.acmicpc.net/problem/25206)
+
+인하대학교 컴퓨터공학과를 졸업하기 위해서는, 전공평점이 3.3 이상이거나 졸업고사를 통과해야 한다. 그런데 아뿔싸, 치훈이는 깜빡하고 졸업고사를 응시하지 않았다는 사실을 깨달았다! 치훈이의 전공평점을 계산해주는 프로그램을 작성해보자. 전공평점은 전공과목별 (학점 × 과목평점)의 합을 학점의 총합으로 나눈 값이다. 인하대학교 컴퓨터공학과의 등급에 따른 과목평점은 다음 표와 같다.
+
+ P/F 과목의 경우 등급이 P또는 F로 표시되는데, 등급이 P인 과목은 계산에서 제외해야 한다. 과연 치훈이는 무사히 졸업할 수 있을까?
+
+## 풀이
+
+```javascript
+const readline = require("readline");
+
+const rl = readline.createInterface({
+ input: process.stdin,
+ output: process.stdout,
+});
+
+/* 예제 입력
+ ObjectOrientedProgramming1 3.0 A+
+ IntroductiontoComputerEngineering 3.0 A+
+ ObjectOrientedProgramming2 3.0 A0
+ CreativeComputerEngineeringDesign 3.0 A+
+ AssemblyLanguage 3.0 A+
+ InternetProgramming 3.0 B0
+ ApplicationProgramminginJava 3.0 A0
+ SystemProgramming 3.0 B0
+ OperatingSystem 3.0 B0
+ WirelessCommunicationsandNetworking 3.0 C+
+ LogicCircuits 3.0 B0
+ DataStructure 4.0 A+
+ MicroprocessorApplication 3.0 B+
+ EmbeddedSoftware 3.0 C0
+ ComputerSecurity 3.0 D+
+ Database 3.0 C+
+ Algorithm 3.0 B0
+ CapstoneDesigninCSE 3.0 B+
+ CompilerDesign 3.0 D0
+ ProblemSolving 4.0 P
+ */
+
+let input = [];
+let aa = 0;
+let GPA = {
+ "A+": 4.5,
+ A0: 4.0,
+ "B+": 3.5,
+ B0: 3.0,
+ "C+": 2.5,
+ C0: 2.0,
+ "D+": 1.5,
+ D0: 1.0,
+ F: 0.0,
+ P: null,
+};
+
+rl.on("line", (line) => {
+ const a = line.split(" ");
+ // p인 과목은 계산에서 제외한다.
+ if (GPA[a[2]] != null) {
+ aa += +a[1]; // 학점을 더해준다
+ input.push(a[1] * GPA[a[2]]); // 과목의 학점과 과목평점을 곱해준다.
+ }
+}).on("close", () => {
+ // 학점과 과목평점을 곱한 값을 전부 더해준다.
+ let sum = input.reduce((acc, cur) => {
+ return acc + cur;
+ });
+ // 학점 * 과목평점의 합을 학점의 총점으로 나눠준다.
+ console.log((sum / aa).toFixed(6));
+});
+```
+
+## 여담
+
+최근 알고리즘 공부를 개을리 했었는데 최근 문자열 유사도 검사와 같이 복잡한 로직을 구현할 때 어려움을 겪어 다시 1일1문제풀이를 하려한다.
diff --git a/src/content/posts/node/BJ4344.md b/src/content/posts/node/BJ4344.md
index a71ca8a..bca85a4 100644
--- a/src/content/posts/node/BJ4344.md
+++ b/src/content/posts/node/BJ4344.md
@@ -1,18 +1,18 @@
----
-title: 백준 4344번 알고리즘 [node.js]
-tags: [알고리즘]
-date: "2022.12.01"
----
-
-
-[https://www.acmicpc.net/problem/4344](https://www.acmicpc.net/problem/4344)
-
-## 문제
-
-육각형으로 이루어진 벌집이 있다. 중앙에 방 1부터 시작해서 이웃하는 방에 돌아가면서 1찍 증가하는 번주를 매기는데 숫자 N이 주어졌을 떄, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈때 몇개의 방을 지나가는지(시작과 끝을 포함)를 계산하는 문제이다. 예를 들어 13까지는 3개, 58까지는 5개를 지난다.
-
-## 풀이
-
-규칙없이 반복문을 돌렸더니 시간초과가 나서 무언가 규칙이 있다는걸 알게 됐다. 1번방을 시작으로 6, 12, 18, 24 6의 배수 였고 입력 받은 값을 6의 배수보다 작을때 까지 돌려주면 최소 개수의 방을 구할 수 있다.
-
+---
+title: 백준 4344번 알고리즘 [node.js]
+tags: [알고리즘]
+date: "2022.12.01"
+---
+
+
+[https://www.acmicpc.net/problem/4344](https://www.acmicpc.net/problem/4344)
+
+## 문제
+
+육각형으로 이루어진 벌집이 있다. 중앙에 방 1부터 시작해서 이웃하는 방에 돌아가면서 1찍 증가하는 번주를 매기는데 숫자 N이 주어졌을 떄, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈때 몇개의 방을 지나가는지(시작과 끝을 포함)를 계산하는 문제이다. 예를 들어 13까지는 3개, 58까지는 5개를 지난다.
+
+## 풀이
+
+규칙없이 반복문을 돌렸더니 시간초과가 나서 무언가 규칙이 있다는걸 알게 됐다. 1번방을 시작으로 6, 12, 18, 24 6의 배수 였고 입력 받은 값을 6의 배수보다 작을때 까지 돌려주면 최소 개수의 방을 구할 수 있다.
+
\ No newline at end of file
diff --git a/src/content/posts/node/HowToUseNvm.md b/src/content/posts/node/HowToUseNvm.md
index 668ead4..cb2b7c8 100644
--- a/src/content/posts/node/HowToUseNvm.md
+++ b/src/content/posts/node/HowToUseNvm.md
@@ -1,37 +1,37 @@
----
-title: node 버전관리 nvm
-tags: [node.js]
-date: "2024.01.26"
----
-## NVM 모듈
-
-node를 사용하다보면 개발환경에 따라 버전을 변경해야하는 상황이 오게 된다. 이때 nvm을 사용한다면 편리하게 버전을 변경하며 사용할 수 있다.
-
-## NVM 설치
-
-여기에 있는 링크에 들어가서 nvm-setup.exe나 nvm-setup.zip 파일을 받아 설치를 해주면 된다.
-
-[https://github.com/coreybutler/nvm-windows/releases](https://github.com/coreybutler/nvm-windows/releases)
-
-## NVM 사용법
-
-설치를 해주었다면 사용법은 간단하다.
-
-```javascript
-
- nvm -v // nvm 버젼 확인
-
- nvm current // 현재 사용중인 노드버전 확인
-
- nvm ls // 설치된 노드버전 확인
-
- nvm ls-remote // 설치 가능한 모든 노드버전 조회
-
- nvm install xx.xx.x // 해당 노드버전 설치
-
- nvm uninstall xx.xx.x // 해당 노드버전 삭제
-
- nvm use xx.xx.x // 해당 노드버전으로 변경
-
-```
-[https://github.com/nvm-sh/nvm/blob/master/README.md](https://github.com/nvm-sh/nvm/blob/master/README.md)
+---
+title: node 버전관리 nvm
+tags: [node.js]
+date: "2024.01.26"
+---
+## NVM 모듈
+
+node를 사용하다보면 개발환경에 따라 버전을 변경해야하는 상황이 오게 된다. 이때 nvm을 사용한다면 편리하게 버전을 변경하며 사용할 수 있다.
+
+## NVM 설치
+
+여기에 있는 링크에 들어가서 nvm-setup.exe나 nvm-setup.zip 파일을 받아 설치를 해주면 된다.
+
+[https://github.com/coreybutler/nvm-windows/releases](https://github.com/coreybutler/nvm-windows/releases)
+
+## NVM 사용법
+
+설치를 해주었다면 사용법은 간단하다.
+
+```javascript
+
+ nvm -v // nvm 버젼 확인
+
+ nvm current // 현재 사용중인 노드버전 확인
+
+ nvm ls // 설치된 노드버전 확인
+
+ nvm ls-remote // 설치 가능한 모든 노드버전 조회
+
+ nvm install xx.xx.x // 해당 노드버전 설치
+
+ nvm uninstall xx.xx.x // 해당 노드버전 삭제
+
+ nvm use xx.xx.x // 해당 노드버전으로 변경
+
+```
+[https://github.com/nvm-sh/nvm/blob/master/README.md](https://github.com/nvm-sh/nvm/blob/master/README.md)
diff --git a/src/content/posts/react/2025-11-10-styled-components-drag-slider-warning-fix.md b/src/content/posts/react/2025-11-10-styled-components-drag-slider-warning-fix.md
index f2c7b0e..ee3c059 100644
--- a/src/content/posts/react/2025-11-10-styled-components-drag-slider-warning-fix.md
+++ b/src/content/posts/react/2025-11-10-styled-components-drag-slider-warning-fix.md
@@ -1,6 +1,6 @@
---
title: 드래그 슬라이더 구현 중 만난 styled-components 경고와 해결
-series: 팬덤케이
+series: fandom-k
tags: ["styled-components", "React", "성능 최적화", "useRef", "슬라이더"]
date: "2025.11.10"
---
diff --git a/src/content/posts/react/2025-11-17-layered-error-handling-architecture.md b/src/content/posts/react/2025-11-17-layered-error-handling-architecture.md
index 302ef7d..25ac508 100644
--- a/src/content/posts/react/2025-11-17-layered-error-handling-architecture.md
+++ b/src/content/posts/react/2025-11-17-layered-error-handling-architecture.md
@@ -1,6 +1,6 @@
---
title: 팬덤케이 프로젝트 레이어드 에러 처리 구조 설계 기록
-series: 팬덤케이
+series: fandom-k
tags: ["React", "React Router", "Error Boundary", "Axios", "UX", "에러 처리"]
date: "2025.11.17"
---
diff --git a/src/content/posts/react/2025-11-28-sprint-mission6-logic-ui-separation.md b/src/content/posts/react/2025-11-28-sprint-mission6-logic-ui-separation.md
index a34173e..77ab2cb 100644
--- a/src/content/posts/react/2025-11-28-sprint-mission6-logic-ui-separation.md
+++ b/src/content/posts/react/2025-11-28-sprint-mission6-logic-ui-separation.md
@@ -1,6 +1,6 @@
---
title: 스프린트 미션 6 로직/UI 분리로 얻은 것들
-series: 스프린트 부트캠프
+series: sprint-bootcamp
tags: ["Sprint", "React", "useReducer", "Form", "Refactoring", "컴포넌트 설계", "styled-components"]
date: "2025.11.28"
---
diff --git a/src/content/posts/react/2025-12-15-maple-helper-why-zustand.md b/src/content/posts/react/2025-12-15-maple-helper-why-zustand.md
index de2c5ea..04ebd9b 100644
--- a/src/content/posts/react/2025-12-15-maple-helper-why-zustand.md
+++ b/src/content/posts/react/2025-12-15-maple-helper-why-zustand.md
@@ -1,6 +1,6 @@
---
title: 메이플 헬퍼 전역 상태 관리 zustand 선택 이유
-series: 메이플 헬퍼
+series: maple-helper
tags: ["zustand", "useContext", "state-management", "persist", "localStorage"]
date: "2025.12.15"
---
diff --git a/src/content/posts/react/2026-02-12-introducing-zod-react-hook-form.md b/src/content/posts/react/2026-02-12-introducing-zod-react-hook-form.md
index a17bda8..a14d5be 100644
--- a/src/content/posts/react/2026-02-12-introducing-zod-react-hook-form.md
+++ b/src/content/posts/react/2026-02-12-introducing-zod-react-hook-form.md
@@ -1,6 +1,6 @@
---
title: zod 라이브러리 도입 배경 - 폼 유효성 검사의 중앙 집중화
-series: 글로벌 노마드
+series: global-nomad
tags: ["react-hook-form", "zod", "validation"]
date: "2026.02.12"
---
diff --git a/src/content/posts/react/CustomHook.md b/src/content/posts/react/CustomHook.md
index e0ed72b..02620fb 100644
--- a/src/content/posts/react/CustomHook.md
+++ b/src/content/posts/react/CustomHook.md
@@ -1,86 +1,86 @@
----
-title: React 커스텀 Hook 만들기
-tags: [react]
-date: "2023.04.20"
----
-리엑트를 다룰 때 useState나 useEffect같은 Hook을 많이 사용해 봤을거다. 근데 이 Hook을 개발자가 원하는대로 만드는게 가능하다. 커스텀 훅은 반복되는 로직을 관리하는데 매우 용이하다.
-
-## 사용방법
-
-커스텀 훅을 만드는 방법은 그렇게 어렵지 않다. 이전에 커스텀 훅을 만들때 지켜야 할 규직이 몇가지 있는데 다음과 같다.
-
-- 커스텀 훅의 이름은 use + 대문자로 시작하는 이름을 지정해야 한다
-- 커스텀 훅에는 react에서 제공하는 내장 훅을 사용해야한다.
-- 커스텀 훅은 jsx가 아닌 오브젝트나 배열을 return 해준다.
-다음과 같이 아이디와 비번의 값을 입력받는 컴포넌트가 있다.
-
-```javascript
-
- const Form = () => {
- const [id, setId] = useState("");
- const [password, setPassword] = useState("");
-
- const handleId = (e) => {
- setId(e.target.value);
- }
-
- const handlePassword = (e) => {
- setPassword(e.target.value);
- }
-
- return(
- <>
-
-
-
- )
- }
-
-
-```
-위에 있는 코드에서 중복되는 로직이 보일거다. 우리는 이제 이걸 커스텀 훅으로 만들어 재사용성을 높혀 보도록 하겠다.
-
-```javascript
-
- const app = () => {
- const idForm = useFormInput("");
- const passwordForm = useFormInput("");
-
- return(
- <>
-
-
-
- )
- }
-
- const useFormInput = (Value) => {
- const [value, setValue] = useState(Value);
-
- function handleChange(e) {
- setValue(e.target.value);
- }
-
- return {
- value: value,
- onChange: handleChange
- };
- }
-
-
-```
-물론 커스텀 훅이 없어도 개발하는데 지장을 주지는 않지만 잘만 사용하면 아주 편리한 기능이니 어렵더라도 잘 활용하도록 해야겠다는 생각이 들었다. 또한 커스텀 훅을 이용하면 재사용성도 올라가고 관리도 용이해져 마다할 이유가 없다고 생각한다.
-
-[https://react.dev/learn/reusing-logic-with-custom-hooks](https://react.dev/learn/reusing-logic-with-custom-hooks)
+---
+title: React 커스텀 Hook 만들기
+tags: [react]
+date: "2023.04.20"
+---
+리엑트를 다룰 때 useState나 useEffect같은 Hook을 많이 사용해 봤을거다. 근데 이 Hook을 개발자가 원하는대로 만드는게 가능하다. 커스텀 훅은 반복되는 로직을 관리하는데 매우 용이하다.
+
+## 사용방법
+
+커스텀 훅을 만드는 방법은 그렇게 어렵지 않다. 이전에 커스텀 훅을 만들때 지켜야 할 규직이 몇가지 있는데 다음과 같다.
+
+- 커스텀 훅의 이름은 use + 대문자로 시작하는 이름을 지정해야 한다
+- 커스텀 훅에는 react에서 제공하는 내장 훅을 사용해야한다.
+- 커스텀 훅은 jsx가 아닌 오브젝트나 배열을 return 해준다.
+다음과 같이 아이디와 비번의 값을 입력받는 컴포넌트가 있다.
+
+```javascript
+
+ const Form = () => {
+ const [id, setId] = useState("");
+ const [password, setPassword] = useState("");
+
+ const handleId = (e) => {
+ setId(e.target.value);
+ }
+
+ const handlePassword = (e) => {
+ setPassword(e.target.value);
+ }
+
+ return(
+ <>
+
+
+
+ )
+ }
+
+
+```
+위에 있는 코드에서 중복되는 로직이 보일거다. 우리는 이제 이걸 커스텀 훅으로 만들어 재사용성을 높혀 보도록 하겠다.
+
+```javascript
+
+ const app = () => {
+ const idForm = useFormInput("");
+ const passwordForm = useFormInput("");
+
+ return(
+ <>
+
+
+
+ )
+ }
+
+ const useFormInput = (Value) => {
+ const [value, setValue] = useState(Value);
+
+ function handleChange(e) {
+ setValue(e.target.value);
+ }
+
+ return {
+ value: value,
+ onChange: handleChange
+ };
+ }
+
+
+```
+물론 커스텀 훅이 없어도 개발하는데 지장을 주지는 않지만 잘만 사용하면 아주 편리한 기능이니 어렵더라도 잘 활용하도록 해야겠다는 생각이 들었다. 또한 커스텀 훅을 이용하면 재사용성도 올라가고 관리도 용이해져 마다할 이유가 없다고 생각한다.
+
+[https://react.dev/learn/reusing-logic-with-custom-hooks](https://react.dev/learn/reusing-logic-with-custom-hooks)
diff --git a/src/content/posts/react/EventListenerState.md b/src/content/posts/react/EventListenerState.md
index f4ada57..397e82c 100644
--- a/src/content/posts/react/EventListenerState.md
+++ b/src/content/posts/react/EventListenerState.md
@@ -1,65 +1,65 @@
----
-title: react에서 addEventListener와 state
-tags: [react]
-date: "2023.07.18"
----
-## 문제점
-
-최근 개발을 하다 window.addEventListener로 호출한 함수 내에서 state값이 초기 값 그대로 읽히는 경우가 있었다. 아래와 같이 코드를 작성 했을 떄 state값은 계속 변경 되지만 console.log()로 state값을 읽을땐 초기값만 출력이 된다.
-
-```javascript
-
- import { useState, useEffect } from 'react';
-
- function MyComponent() {
- const [state, setState] = useState(0);
-
- const eventHandler = () => {
- setState((pre)=> pre + 1);
- console.log(state) // state값은 계속 변경되지만 console.log() 찍어보면 초기값인 0만 찍힌다.
- };
-
- useEffect(() => {
- window.addEventListener('click', eventHandler);
- return () => {
- window.removeEventListener('click', eventHandler);
- };
- }, []);
-
- return {state}
;
- }
-
-
-```
-이렇게 동작하는 원인이 무엇일까? 이렇게 동작하는 이유는 이벤트 핸들러 함수는 비동기적으로 실행되기 때문에 함수가 호출될 떄의 상태를 유지하면서 실행되기 때문이다. 그래서 state값이 초기 값으로 고정되는 것 이다.
-
-## 해결방법
-
-이를 해결하는 방법은 useEffect deps에 state를 추가해주면 된다. 그럼 state값이 변경 될 때 마다 리랜더링 되면서 최근값을 반영 하는 함수가 새롭게 선언되면서 초기에 의도한 대로 동작한다.
-
-```javascript
-
- import { useState, useEffect } from 'react';
-
- function MyComponent() {
- const [state, setState] = useState(0);
-
- const eventHandler = () => {
- setState((pre)=> pre + 1);
- console.log(state) // state 값이 변경되는 걸 확인 할 수 있다.
- };
-
- useEffect(() => {
- window.addEventListener('click', eventHandler);
- return () => {
- window.removeEventListener('click', eventHandler);
- };
- }, [state]); // deps에 state를 추가
-
- return {state}
;
- }
-
-```
-[https://stackoverflow.com/questions/66213641/react-keypress-event-taking-only-initial-state-values-and-not-updated-values](https://stackoverflow.com/questions/66213641/react-keypress-event-taking-only-initial-state-values-and-not-updated-values)
-
-[https://medium.com/hcleedev/web-event%EC%99%80-addeventlistener-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-%EA%B0%9C%EB%85%90-react%EC%97%90%EC%84%9C-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90-a581adc49aa4](https://medium.com/hcleedev/web-event%EC%99%80-addeventlistener-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-%EA%B0%9C%EB%85%90-react%EC%97%90%EC%84%9C-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90-a581adc49aa4)
+---
+title: react에서 addEventListener와 state
+tags: [react]
+date: "2023.07.18"
+---
+## 문제점
+
+최근 개발을 하다 window.addEventListener로 호출한 함수 내에서 state값이 초기 값 그대로 읽히는 경우가 있었다. 아래와 같이 코드를 작성 했을 떄 state값은 계속 변경 되지만 console.log()로 state값을 읽을땐 초기값만 출력이 된다.
+
+```javascript
+
+ import { useState, useEffect } from 'react';
+
+ function MyComponent() {
+ const [state, setState] = useState(0);
+
+ const eventHandler = () => {
+ setState((pre)=> pre + 1);
+ console.log(state) // state값은 계속 변경되지만 console.log() 찍어보면 초기값인 0만 찍힌다.
+ };
+
+ useEffect(() => {
+ window.addEventListener('click', eventHandler);
+ return () => {
+ window.removeEventListener('click', eventHandler);
+ };
+ }, []);
+
+ return {state}
;
+ }
+
+
+```
+이렇게 동작하는 원인이 무엇일까? 이렇게 동작하는 이유는 이벤트 핸들러 함수는 비동기적으로 실행되기 때문에 함수가 호출될 떄의 상태를 유지하면서 실행되기 때문이다. 그래서 state값이 초기 값으로 고정되는 것 이다.
+
+## 해결방법
+
+이를 해결하는 방법은 useEffect deps에 state를 추가해주면 된다. 그럼 state값이 변경 될 때 마다 리랜더링 되면서 최근값을 반영 하는 함수가 새롭게 선언되면서 초기에 의도한 대로 동작한다.
+
+```javascript
+
+ import { useState, useEffect } from 'react';
+
+ function MyComponent() {
+ const [state, setState] = useState(0);
+
+ const eventHandler = () => {
+ setState((pre)=> pre + 1);
+ console.log(state) // state 값이 변경되는 걸 확인 할 수 있다.
+ };
+
+ useEffect(() => {
+ window.addEventListener('click', eventHandler);
+ return () => {
+ window.removeEventListener('click', eventHandler);
+ };
+ }, [state]); // deps에 state를 추가
+
+ return {state}
;
+ }
+
+```
+[https://stackoverflow.com/questions/66213641/react-keypress-event-taking-only-initial-state-values-and-not-updated-values](https://stackoverflow.com/questions/66213641/react-keypress-event-taking-only-initial-state-values-and-not-updated-values)
+
+[https://medium.com/hcleedev/web-event%EC%99%80-addeventlistener-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-%EA%B0%9C%EB%85%90-react%EC%97%90%EC%84%9C-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90-a581adc49aa4](https://medium.com/hcleedev/web-event%EC%99%80-addeventlistener-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-%EA%B0%9C%EB%85%90-react%EC%97%90%EC%84%9C-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90-a581adc49aa4)
diff --git a/src/content/posts/react/React-Fragment.md b/src/content/posts/react/React-Fragment.md
index c362541..7edec0d 100644
--- a/src/content/posts/react/React-Fragment.md
+++ b/src/content/posts/react/React-Fragment.md
@@ -1,96 +1,96 @@
----
-title: Fragment를 알아보자
-tags: [react]
-date: "2022.01.02"
----
-리엑트에서 컴포넌트 단위로 개발을 하면서 의미 없는 div태그로 감싸여진 코드들을 볼 수 있다. 이는 jsx를 사용하면서 return은 두개의 값을 반환 할 수 없어 하나의 최상위 태그를 사용해야 하기 때문이다. 이때 Fragment를 사용하면 의미 없는 태그 사용을 막을 수 있다.
-
-```javascript
-
- const Table = () => {
- return(
-
- )
- }
-
- const Colums = ()=> {
- return(
-
-
Hello |
- World |
-
- )
- }
-
-
-```
-일반적으로 div를 사용하면 이런식으로 보여지게 된다.
-
-```javascript
-
- const Table = () => {
- return(
-
-
-
-
Hello |
- World |
-
-
-
- )
- }
-
-
-```
-이때 Fragment 를 사용하게 되면
-
-```javascript
-
- const Colums = ()=> {
- return(
-
- Hello |
- World |
-
- )
- }
-
-
-```
-```javascript
-
- const Table = () => {
- return(
-
- )
- }
-
-
-```
-이렇게 깔끔하게 보여지게 된다. 이때 빈 태그를 사용하면 Fragment 선언을 생략하고 사용할 수 있다.
-
-```javascript
-
- const Colums = ()=> {
- return(
- <>
- Hello |
- World |
-
- )
- }
-
-```
-참고 문서 :
-
-[https://reactjs.org/docs/forwarding-refs.html](https://reactjs.org/docs/forwarding-refs.html)
+---
+title: Fragment를 알아보자
+tags: [react]
+date: "2022.01.02"
+---
+리엑트에서 컴포넌트 단위로 개발을 하면서 의미 없는 div태그로 감싸여진 코드들을 볼 수 있다. 이는 jsx를 사용하면서 return은 두개의 값을 반환 할 수 없어 하나의 최상위 태그를 사용해야 하기 때문이다. 이때 Fragment를 사용하면 의미 없는 태그 사용을 막을 수 있다.
+
+```javascript
+
+ const Table = () => {
+ return(
+
+ )
+ }
+
+ const Colums = ()=> {
+ return(
+
+
Hello |
+ World |
+
+ )
+ }
+
+
+```
+일반적으로 div를 사용하면 이런식으로 보여지게 된다.
+
+```javascript
+
+ const Table = () => {
+ return(
+
+
+
+
Hello |
+ World |
+
+
+
+ )
+ }
+
+
+```
+이때 Fragment 를 사용하게 되면
+
+```javascript
+
+ const Colums = ()=> {
+ return(
+
+ Hello |
+ World |
+
+ )
+ }
+
+
+```
+```javascript
+
+ const Table = () => {
+ return(
+
+ )
+ }
+
+
+```
+이렇게 깔끔하게 보여지게 된다. 이때 빈 태그를 사용하면 Fragment 선언을 생략하고 사용할 수 있다.
+
+```javascript
+
+ const Colums = ()=> {
+ return(
+ <>
+ Hello |
+ World |
+
+ )
+ }
+
+```
+참고 문서 :
+
+[https://reactjs.org/docs/forwarding-refs.html](https://reactjs.org/docs/forwarding-refs.html)
diff --git a/src/content/posts/react/UseEffectInfiniteLoop.md b/src/content/posts/react/UseEffectInfiniteLoop.md
index bc901de..52a58e7 100644
--- a/src/content/posts/react/UseEffectInfiniteLoop.md
+++ b/src/content/posts/react/UseEffectInfiniteLoop.md
@@ -1,18 +1,19 @@
----
-title: useEffect 무한루프
-tags: [react]
-date: "2022.09.28"
----
-이 블로그를 만들면서 useEffect를 사용했는데 렌더링이 계속 일어나 사이트가 다운됐었다
-
-우선 useEffect 가 무슨 일을 하는지 알아보자. useEffect는 컴포넌트가 마운트 된 후, 컴포넌트가 업데이트가 된 후 컴포넌트가 마운트 되기 전 실행된다. 이때 종속정에 특정 state나 props를 전달하면 혹은 변경될 때 useEffect가 실행된다. seEffect 가 어떻게 동작하는지 알았으면 다시 문제를 확인해보자.
-
-useEffect(함수,[종속성])
-
-
-useEffect 함수에 state를 변경하는 setPage를 실행시키면 page의 값이 변경이 되고 종속정의 값이 변하여 useEffect 가 다시 실행돼서 무한렌더링이 일어났던 것이다.
-
-그럼 이 문제를 어떻게 해결해야 할까 첫번째로는 종속성에 빈 배열을 제공하는 것이다. 빈 배열을 제공함으로써 종속성의 값이 변할 일이 없으니 단 한번만 마운트후 종료된다. 허나 위의 방법을 이용하면 처음 의도한 방법과 달리 state를 실행할 때 마다 값이 변경되지 않는다. 그러니 코드를 종속정에 의존하지 않도록 짜는것 이다.
-
-
-react hook은 아주 편리한 기능인 것 같다 하지만 이와 같이 잘 모르고 사용하게 되면 에러가 생기게 되니 잘 숙지후에 이용하도록 하자.
+---
+title: useEffect 무한루프
+series: blog
+tags: [react]
+date: "2022.09.28"
+---
+이 블로그를 만들면서 useEffect를 사용했는데 렌더링이 계속 일어나 사이트가 다운됐었다
+
+우선 useEffect 가 무슨 일을 하는지 알아보자. useEffect는 컴포넌트가 마운트 된 후, 컴포넌트가 업데이트가 된 후 컴포넌트가 마운트 되기 전 실행된다. 이때 종속정에 특정 state나 props를 전달하면 혹은 변경될 때 useEffect가 실행된다. seEffect 가 어떻게 동작하는지 알았으면 다시 문제를 확인해보자.
+
+useEffect(함수,[종속성])
+
+
+useEffect 함수에 state를 변경하는 setPage를 실행시키면 page의 값이 변경이 되고 종속정의 값이 변하여 useEffect 가 다시 실행돼서 무한렌더링이 일어났던 것이다.
+
+그럼 이 문제를 어떻게 해결해야 할까 첫번째로는 종속성에 빈 배열을 제공하는 것이다. 빈 배열을 제공함으로써 종속성의 값이 변할 일이 없으니 단 한번만 마운트후 종료된다. 허나 위의 방법을 이용하면 처음 의도한 방법과 달리 state를 실행할 때 마다 값이 변경되지 않는다. 그러니 코드를 종속정에 의존하지 않도록 짜는것 이다.
+
+
+react hook은 아주 편리한 기능인 것 같다 하지만 이와 같이 잘 모르고 사용하게 되면 에러가 생기게 되니 잘 숙지후에 이용하도록 하자.
diff --git a/src/content/posts/server/EC2InstenceLiveChat.md b/src/content/posts/server/EC2InstenceLiveChat.md
index 2b156d1..57cba90 100644
--- a/src/content/posts/server/EC2InstenceLiveChat.md
+++ b/src/content/posts/server/EC2InstenceLiveChat.md
@@ -1,60 +1,60 @@
----
-title: EC2 인스턴스 서버 환경 구성하기 - 1
-tags: [Server]
-date: "2024.05.11"
----
-이번에 개발한 라이브쳇 서비스를 EC2 인스턴스를 이용해 배포를 했습니다. 이 글은 그 과정을 기록하기 위한 글 입니다.
-
-## 사용할 AWS 서비스
-
-### ACM
-
-AWS Certificate Manager로 SSL/TLS 인증서를 생성, 관리 및 배포하는 AWS 서비스 입니다.
-
-### EC2
-
-Elastic Compute Cloud로 AWS에서 제공하는 가상 서버 서비스 입니다.
-
-### Amazon Route 53
-
-AWS에서 제공하는 클라우드 기반의 DNS(Domain Name System) 서비스입니다. 웹 트래픽을 라우팅하고 도메인 등록과 같은 기능을 제공합니다.
-
-## 서비스 배포
-
-우선 EC2인스턴트 시작 버튼을 눌러 인스턴트를 하나 만들어 줍니다.
-
-
-이름 및 태그에 생성할 인스턴트의 이름을 적어준 다음 Ubuntu프리서버를 선택해 줍니다. 그리고 키 페어(로그인)에서 새 키 페어 생성을 눌러 .ppk 와 .pem키를 생성해주면 되는데 이 2개의 키는 잃어버리면 안 되니 꼭 보관해주면 됩니다.
-
-
-인스턴스를 생성했으면 연결 버튼을 누른 후 인스턴트에 접속할 수 있습니다. 이 방법 이외에도 putty를 이용해 접속할 수 있습니다. 혹은 SSH 클라이언트 연결을 이용해 개발 환경 플랫폼 터미널(저의 경우는 VScode)에서도 접속이 가능합니다. 인스턴트에 성공적으로 접속했다면 WinSCP를 이용해 인스턴트에 파일을 전송하던 git을 설치해 원격으로 git repository를 클론해주면 됩니다.
-
-
-생성한 우분터 서버에서는 아무것도 설치가 되어 있지 않기 때문에 서버 실행에 필요한 것들을 설치해야 합니다. npm node.js git (git을 통해 프로젝트를 가져온다면) git clone 프로젝트 (git을 통해 프로젝트를 가져온다면)
-
-```javascript
-
- // 업데이트
- sudo apt update
-
- // npm 설치를 위한 명령어
- sudo apt install npm
-
- // node.js 설치를 위한 명령어
- sudo apt install nodejs
-
- // git 설치를 위한 명령어
- sudo apt install git
-
- // github에 등록된 나의 프로젝트 가져오기
- git clone https://github.com/어쩌구/저쩌구.git
-
-```
-이렇게 기본적인 업데이트 및 설정이 끝났다면 npm install로 package.json의 내역을 설치해주면 됩니다. 이제 진짜 마지막으로 서버의 무중단 배포를 위해 forever라이브러리를 설치해 forever start명령어로 서버를 실행시키면 됩니다.
-
-이렇게 서버를 실행시켰다면 인스턴트 보안그룹에 인바운드 규칙을 추가해주면 되는데 서버를 연 포트를 입력해주면 됩니다.
-
-
-인스턴스의 퍼블릭 IPv4 DNS의 8080포트로 접속하면 성공적으로 배포가 되었음을 확인할 수 있습니다.
-
+---
+title: EC2 인스턴스 서버 환경 구성하기 - 1
+tags: [Server]
+date: "2024.05.11"
+---
+이번에 개발한 라이브쳇 서비스를 EC2 인스턴스를 이용해 배포를 했습니다. 이 글은 그 과정을 기록하기 위한 글 입니다.
+
+## 사용할 AWS 서비스
+
+### ACM
+
+AWS Certificate Manager로 SSL/TLS 인증서를 생성, 관리 및 배포하는 AWS 서비스 입니다.
+
+### EC2
+
+Elastic Compute Cloud로 AWS에서 제공하는 가상 서버 서비스 입니다.
+
+### Amazon Route 53
+
+AWS에서 제공하는 클라우드 기반의 DNS(Domain Name System) 서비스입니다. 웹 트래픽을 라우팅하고 도메인 등록과 같은 기능을 제공합니다.
+
+## 서비스 배포
+
+우선 EC2인스턴트 시작 버튼을 눌러 인스턴트를 하나 만들어 줍니다.
+
+
+이름 및 태그에 생성할 인스턴트의 이름을 적어준 다음 Ubuntu프리서버를 선택해 줍니다. 그리고 키 페어(로그인)에서 새 키 페어 생성을 눌러 .ppk 와 .pem키를 생성해주면 되는데 이 2개의 키는 잃어버리면 안 되니 꼭 보관해주면 됩니다.
+
+
+인스턴스를 생성했으면 연결 버튼을 누른 후 인스턴트에 접속할 수 있습니다. 이 방법 이외에도 putty를 이용해 접속할 수 있습니다. 혹은 SSH 클라이언트 연결을 이용해 개발 환경 플랫폼 터미널(저의 경우는 VScode)에서도 접속이 가능합니다. 인스턴트에 성공적으로 접속했다면 WinSCP를 이용해 인스턴트에 파일을 전송하던 git을 설치해 원격으로 git repository를 클론해주면 됩니다.
+
+
+생성한 우분터 서버에서는 아무것도 설치가 되어 있지 않기 때문에 서버 실행에 필요한 것들을 설치해야 합니다. npm node.js git (git을 통해 프로젝트를 가져온다면) git clone 프로젝트 (git을 통해 프로젝트를 가져온다면)
+
+```javascript
+
+ // 업데이트
+ sudo apt update
+
+ // npm 설치를 위한 명령어
+ sudo apt install npm
+
+ // node.js 설치를 위한 명령어
+ sudo apt install nodejs
+
+ // git 설치를 위한 명령어
+ sudo apt install git
+
+ // github에 등록된 나의 프로젝트 가져오기
+ git clone https://github.com/어쩌구/저쩌구.git
+
+```
+이렇게 기본적인 업데이트 및 설정이 끝났다면 npm install로 package.json의 내역을 설치해주면 됩니다. 이제 진짜 마지막으로 서버의 무중단 배포를 위해 forever라이브러리를 설치해 forever start명령어로 서버를 실행시키면 됩니다.
+
+이렇게 서버를 실행시켰다면 인스턴트 보안그룹에 인바운드 규칙을 추가해주면 되는데 서버를 연 포트를 입력해주면 됩니다.
+
+
+인스턴스의 퍼블릭 IPv4 DNS의 8080포트로 접속하면 성공적으로 배포가 되었음을 확인할 수 있습니다.
+
\ No newline at end of file
diff --git a/src/content/posts/server/EC2InstenceLiveChatTwo.md b/src/content/posts/server/EC2InstenceLiveChatTwo.md
index 80c6705..721c03b 100644
--- a/src/content/posts/server/EC2InstenceLiveChatTwo.md
+++ b/src/content/posts/server/EC2InstenceLiveChatTwo.md
@@ -1,66 +1,66 @@
----
-title: EC2 인스턴스 서버 환경 구성하기 - 2
-tags: [Server]
-date: "2024.05.18"
----
-이전 포스트에서 서버에 배포하고 실행까지 했지만 이번엔 도메인 연결과 HTTPS인증까지 다루려고 합니다.
-
-## 탄력적 IP 주소 할당
-
-EC2 인스턴트는 기본적으로 동적 IP를 할당받기 때문에 인스턴스를 재부팅하거나 종료할 경우 IP가 변경됩니다. HTTP 인증과 같은 작업에는 고정된 IP주소가 필요하기 때문에 탄력적 IP주소를 할당해 줍니다.
-
-
-## AWS Certificate Manager(ACM)인증서 발급
-
-SSL/TLS 인증을 위한 인증서를 발급 받아주면 됩니다. 이 과정은 5분에서 20분 정도 걸립니다. 만약 서브도메인을 사용할 생각이라면 example.com *.example.com 둘다 등록하시면 됩니다.
-
-## 보안그룹 인바운드 규칙
-
-그동안 HTTP와 HTTPS 인바운드 규칙을 추가해줍니다.
-
-
-## 대상그룹 생성
-
-다음으로 로드 밸런싱의 대상그룹을 생성한 다음 생성한 인스턴트에 사용중인 8080포트로 연결해줍니다.
-
-
-
-## 로드밸런서 생성
-
-로드 밸런스는 HTTP로 접속했을 떄 HTTPS로 리다이렉션 해주는 역할을 합니다. 리스너 및 라우팅에는 사전에 생성한 대상그룹을 설정해주고 보안그룹은 사전에 편집한 보안그룹을 할당해주면 됩니다.
-
-
-
-이렇게 생성을 해줬다면 로드밸런스 리스너 및 규칙 HTTP:80포트에 규칙을 추가해 HTTP로 접속하면 HTTPS로 리다이렉션 하도록 해줍니다.
-
-
-
-
-## Route 53 생성
-
-
-가비아에서 도메인을 구매했다면 http://live-support.shop/ 의 NS유형을 가비아 네임서버에 등록해 줍니다.
-
-
-아까 발급 받았던 AWS Certificate Manager인증서를 Router53에 등록해 줍니다.
-
-그 다음 생성한 로드밸런서를 이용해 EC2인스턴스 와 도메인을 연결시켜주면 됩니다.
-
-
-여기까지 작업을 잘 하셨다면 이제 등록한 도메인으로 접속을 했을때 서비스에 접속할 수 있게됩니다. 하지만 저는 vercel을 이용해 프론트 배포를 했기 때문에 vercel에도 도메인을 등록해야 합니다.
-
-## velcel 도메인 등록
-
-velcel 도메인 등록은 아주 간단한데 프로젝트 설정에 들어가 Domains에서 등록하고자 하는 도메인을 입력한 후 Route53에 돌아가 해당 레코드 생성을 해주면 된다.
-
-
-
-
-## 발생했던 문제
-
-모든 서버환경을 구성했음에도 불구하고 EC2 인스턴스 서버가 velcel에 도메인 등록만 하면 접속이 되지 않는 이슈가 있었습니다. 초기에 원인을 찾지 못해 헤매고 있던 중 api.live-support.shop에 접속하면 일반적인 에러 페이지 대신 Vercel 404 에러 페이지가 뜨는 점이 이상하다는 생각이 들었고 Vercel에 Domain 설정을 찾아보던 중 원인을 발견했습니다.
-
-velcel에 도메인을 등록하면 자동으로 DNS Records값이 설정되었고 DNS Records설정 값을 삭제해주니 정상적으로 동작했습니다.
-
-
+---
+title: EC2 인스턴스 서버 환경 구성하기 - 2
+tags: [Server]
+date: "2024.05.18"
+---
+이전 포스트에서 서버에 배포하고 실행까지 했지만 이번엔 도메인 연결과 HTTPS인증까지 다루려고 합니다.
+
+## 탄력적 IP 주소 할당
+
+EC2 인스턴트는 기본적으로 동적 IP를 할당받기 때문에 인스턴스를 재부팅하거나 종료할 경우 IP가 변경됩니다. HTTP 인증과 같은 작업에는 고정된 IP주소가 필요하기 때문에 탄력적 IP주소를 할당해 줍니다.
+
+
+## AWS Certificate Manager(ACM)인증서 발급
+
+SSL/TLS 인증을 위한 인증서를 발급 받아주면 됩니다. 이 과정은 5분에서 20분 정도 걸립니다. 만약 서브도메인을 사용할 생각이라면 example.com *.example.com 둘다 등록하시면 됩니다.
+
+## 보안그룹 인바운드 규칙
+
+그동안 HTTP와 HTTPS 인바운드 규칙을 추가해줍니다.
+
+
+## 대상그룹 생성
+
+다음으로 로드 밸런싱의 대상그룹을 생성한 다음 생성한 인스턴트에 사용중인 8080포트로 연결해줍니다.
+
+
+
+## 로드밸런서 생성
+
+로드 밸런스는 HTTP로 접속했을 떄 HTTPS로 리다이렉션 해주는 역할을 합니다. 리스너 및 라우팅에는 사전에 생성한 대상그룹을 설정해주고 보안그룹은 사전에 편집한 보안그룹을 할당해주면 됩니다.
+
+
+
+이렇게 생성을 해줬다면 로드밸런스 리스너 및 규칙 HTTP:80포트에 규칙을 추가해 HTTP로 접속하면 HTTPS로 리다이렉션 하도록 해줍니다.
+
+
+
+
+## Route 53 생성
+
+
+가비아에서 도메인을 구매했다면 http://live-support.shop/ 의 NS유형을 가비아 네임서버에 등록해 줍니다.
+
+
+아까 발급 받았던 AWS Certificate Manager인증서를 Router53에 등록해 줍니다.
+
+그 다음 생성한 로드밸런서를 이용해 EC2인스턴스 와 도메인을 연결시켜주면 됩니다.
+
+
+여기까지 작업을 잘 하셨다면 이제 등록한 도메인으로 접속을 했을때 서비스에 접속할 수 있게됩니다. 하지만 저는 vercel을 이용해 프론트 배포를 했기 때문에 vercel에도 도메인을 등록해야 합니다.
+
+## velcel 도메인 등록
+
+velcel 도메인 등록은 아주 간단한데 프로젝트 설정에 들어가 Domains에서 등록하고자 하는 도메인을 입력한 후 Route53에 돌아가 해당 레코드 생성을 해주면 된다.
+
+
+
+
+## 발생했던 문제
+
+모든 서버환경을 구성했음에도 불구하고 EC2 인스턴스 서버가 velcel에 도메인 등록만 하면 접속이 되지 않는 이슈가 있었습니다. 초기에 원인을 찾지 못해 헤매고 있던 중 api.live-support.shop에 접속하면 일반적인 에러 페이지 대신 Vercel 404 에러 페이지가 뜨는 점이 이상하다는 생각이 들었고 Vercel에 Domain 설정을 찾아보던 중 원인을 발견했습니다.
+
+velcel에 도메인을 등록하면 자동으로 DNS Records값이 설정되었고 DNS Records설정 값을 삭제해주니 정상적으로 동작했습니다.
+
+
\ No newline at end of file
diff --git a/src/content/posts/server/WhatServerless.md b/src/content/posts/server/WhatServerless.md
index a1a4977..2b53b61 100644
--- a/src/content/posts/server/WhatServerless.md
+++ b/src/content/posts/server/WhatServerless.md
@@ -1,75 +1,75 @@
----
-title: 서버리스 개념
-tags: [server]
-date: "2024.07.06"
----
-요즘 AWS에 배포한 서비스들의 서버 비용이 너무 많이 청구되어 비용문제를 해결하기 위해 알아보던 중
-서버리스에 대해 알게 되었고 이를 정리하기 위해 글을 작성합니다.
-
-## 서버리스 아키텍쳐 란?
-
-서버리스는 진짜로 서버가 없다는 의미가 아니라 서버를 직접 관리하지 않아도
-코드를 실행할 수 있는 환경 입니다.
->코드를 실행할 저장공간은 있어야합니다.
-
-### 서버리스의 특징
-서버리스의 특징으로는 사용자는 클라우드에서 코드만 업로드하면
-클라우드 제공자가 서버의 프로비저닝, 운영체제 관리, 패치 적용을 관리하며 자동으로 실행됩니다.
-서버리스 어플리케이션은 이벤트 요청시에만 실행되며 트래픽이 증가 했을때 자동으로 리소스를 확장하고
-트래픽 감소시 리소스를 축소되어 사용한 만큼의 비용을 지불해 비용 절감의 효과가 있습니다.
-
-이러한 이유로 기존 클라우드 컴퓨팅 모델에 비해 운영 부담이 줄고 경제적입니다.
-
-## 서버리스 모델
-
-### FaaS(Function as a Service)
-FaaS는 이름 그대로 이벤트를 기반으로 애플리케이션의 함수를 실행시켜 서비스를 제공합니다.
-
-HTTP 요청이나 파일 업로드 등의 이벤트가 발생하면 서버는 이벤트를 감지해 대기시켰던 함수를
-리소스를 할당해 함수를 실행시켜 결과를 반환한 후 리소스를 대기 상태로 유지합니다.
-
-FaaS를 제공하는 플랫폼으로는 AWS Lambda, Google Cloud Functions, Azure Functions 등이 있습니다.
-
-[참고자료](https://www.redhat.com/ko/topics/cloud-native-apps/what-is-faas?utm_source=chatgpt.com)
-
-### Backend-as-a-Service (BaaS)
-BaaS는 백엔드 개발에 필요한 기능을 API로 제공하는 서비스입니다.
-
-사용자 인증이나 권한관리, 테이터베이스 연동등 어플리케이션 개발에 필요한 여러 기능을 제공해
-서버 개발을 하지 않아도 빠르고 쉽게 구현 할 수 있게 됩니다.
-
-로그인이나 데이터쿼리등의 요청이 들어오면 BaaS가 제공하는 API를 호출해 해당 요청을 수행합니다.
-
-BaaS를 제공하는 대표적인 서비스는 Firebase가 있습니다.
-
-[참고자료](https://www.cloudflare.com/ko-kr/learning/serverless/glossary/backend-as-a-service-baas/?utm_source=chatgpt.com)
-
-## 서버리스의 장단점
-
-### 장점
-
-**비용**
-- 실제 사용량에 대해 비용이 청구되어 경제적입니다.
-
-**빠른 배포**
-- 서버 관리 없이 코드만 작성하면 즉시 배포할 수 있습니다.
-
-**유연한 확정성**
-- 트래픽에 따라 자동으로 확장하고 축소합니다.
-
-**서버 관리 불필요**
-- 서버에 대한 관리가 필요 없어 어플리케이션 개발에 집중할 수 있습니다.
-
-### 단점
-
-**Cold Start**
-- 요청할 때마다 서버가 실행되기 때문에 첫 요청에 대한 지연이 발생할 수 있습니다.
-
-**실행 시간 제한**
-- 서버리스는 함수가 1회 호출될 때 사용할 수 있기 때문에 긴 시간이 필요한 작업등에는 어려움이 있습니다.
-
-**종속성**
-- 클라우드 제공자에게 종속될 부감감이 큽니다.
-
-**디버깅 및 모니터링의 어려움**
+---
+title: 서버리스 개념
+tags: [server]
+date: "2024.07.06"
+---
+요즘 AWS에 배포한 서비스들의 서버 비용이 너무 많이 청구되어 비용문제를 해결하기 위해 알아보던 중
+서버리스에 대해 알게 되었고 이를 정리하기 위해 글을 작성합니다.
+
+## 서버리스 아키텍쳐 란?
+
+서버리스는 진짜로 서버가 없다는 의미가 아니라 서버를 직접 관리하지 않아도
+코드를 실행할 수 있는 환경 입니다.
+>코드를 실행할 저장공간은 있어야합니다.
+
+### 서버리스의 특징
+서버리스의 특징으로는 사용자는 클라우드에서 코드만 업로드하면
+클라우드 제공자가 서버의 프로비저닝, 운영체제 관리, 패치 적용을 관리하며 자동으로 실행됩니다.
+서버리스 어플리케이션은 이벤트 요청시에만 실행되며 트래픽이 증가 했을때 자동으로 리소스를 확장하고
+트래픽 감소시 리소스를 축소되어 사용한 만큼의 비용을 지불해 비용 절감의 효과가 있습니다.
+
+이러한 이유로 기존 클라우드 컴퓨팅 모델에 비해 운영 부담이 줄고 경제적입니다.
+
+## 서버리스 모델
+
+### FaaS(Function as a Service)
+FaaS는 이름 그대로 이벤트를 기반으로 애플리케이션의 함수를 실행시켜 서비스를 제공합니다.
+
+HTTP 요청이나 파일 업로드 등의 이벤트가 발생하면 서버는 이벤트를 감지해 대기시켰던 함수를
+리소스를 할당해 함수를 실행시켜 결과를 반환한 후 리소스를 대기 상태로 유지합니다.
+
+FaaS를 제공하는 플랫폼으로는 AWS Lambda, Google Cloud Functions, Azure Functions 등이 있습니다.
+
+[참고자료](https://www.redhat.com/ko/topics/cloud-native-apps/what-is-faas?utm_source=chatgpt.com)
+
+### Backend-as-a-Service (BaaS)
+BaaS는 백엔드 개발에 필요한 기능을 API로 제공하는 서비스입니다.
+
+사용자 인증이나 권한관리, 테이터베이스 연동등 어플리케이션 개발에 필요한 여러 기능을 제공해
+서버 개발을 하지 않아도 빠르고 쉽게 구현 할 수 있게 됩니다.
+
+로그인이나 데이터쿼리등의 요청이 들어오면 BaaS가 제공하는 API를 호출해 해당 요청을 수행합니다.
+
+BaaS를 제공하는 대표적인 서비스는 Firebase가 있습니다.
+
+[참고자료](https://www.cloudflare.com/ko-kr/learning/serverless/glossary/backend-as-a-service-baas/?utm_source=chatgpt.com)
+
+## 서버리스의 장단점
+
+### 장점
+
+**비용**
+- 실제 사용량에 대해 비용이 청구되어 경제적입니다.
+
+**빠른 배포**
+- 서버 관리 없이 코드만 작성하면 즉시 배포할 수 있습니다.
+
+**유연한 확정성**
+- 트래픽에 따라 자동으로 확장하고 축소합니다.
+
+**서버 관리 불필요**
+- 서버에 대한 관리가 필요 없어 어플리케이션 개발에 집중할 수 있습니다.
+
+### 단점
+
+**Cold Start**
+- 요청할 때마다 서버가 실행되기 때문에 첫 요청에 대한 지연이 발생할 수 있습니다.
+
+**실행 시간 제한**
+- 서버리스는 함수가 1회 호출될 때 사용할 수 있기 때문에 긴 시간이 필요한 작업등에는 어려움이 있습니다.
+
+**종속성**
+- 클라우드 제공자에게 종속될 부감감이 큽니다.
+
+**디버깅 및 모니터링의 어려움**
- 서버에 대한 접근이 불가능하기 때문에 디버깅이나 모니터링이 어렵습니다.
\ No newline at end of file
diff --git a/src/content/posts/typeScript/CustomType.md b/src/content/posts/typeScript/CustomType.md
index 6d29c3b..61763b1 100644
--- a/src/content/posts/typeScript/CustomType.md
+++ b/src/content/posts/typeScript/CustomType.md
@@ -1,43 +1,43 @@
----
-title: 타입스크립트 커스텀 타입
-tags: [typeScript]
-date: "2023.05.20"
----
-## 커스텀 타입이란?
-
-타입스크립트에는 커스텀 타입이라는게 있다. 커스텀 타입은 말 그대로 타입을 커스텀 하여 만들 수 있다는 말인데 기존 타입에 새로운 이름을 지정해준다거나 새로운 타입을 선언해주는 것 이 가능하다.
-
-```javascript
-
- type Name = string;
- type Age = number;
-
- type Preson = {
- name : Name;
- age : Age;
- };
-
- const person: Person = {
- name : Kim,
- age : 24
- };
-
-
-```
-커스텀 타입을 사용하면 보다 강력하게 타입을 지정할 수 있다.
-
-```javascript
-
- type Position = "fixed" | "absolute" ;
-
- const menu = (position:Position = "flex") => {
- // 어쩌구 저쩌구
- };
-
- menu("absolute") // 타입 Position과 맞지 않으면 에러가 발생한다.
-
-
-```
-위와 같이 사용하면 잘못된 함수의 사용을 막을 수 있다.
-
-[https://velog.io/@cjh951114/TypeScript-2.2-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%83%80%EC%9E%85-%EC%A0%95%EC%9D%98](https://velog.io/@cjh951114/TypeScript-2.2-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%83%80%EC%9E%85-%EC%A0%95%EC%9D%98)
+---
+title: 타입스크립트 커스텀 타입
+tags: [typeScript]
+date: "2023.05.20"
+---
+## 커스텀 타입이란?
+
+타입스크립트에는 커스텀 타입이라는게 있다. 커스텀 타입은 말 그대로 타입을 커스텀 하여 만들 수 있다는 말인데 기존 타입에 새로운 이름을 지정해준다거나 새로운 타입을 선언해주는 것 이 가능하다.
+
+```javascript
+
+ type Name = string;
+ type Age = number;
+
+ type Preson = {
+ name : Name;
+ age : Age;
+ };
+
+ const person: Person = {
+ name : Kim,
+ age : 24
+ };
+
+
+```
+커스텀 타입을 사용하면 보다 강력하게 타입을 지정할 수 있다.
+
+```javascript
+
+ type Position = "fixed" | "absolute" ;
+
+ const menu = (position:Position = "flex") => {
+ // 어쩌구 저쩌구
+ };
+
+ menu("absolute") // 타입 Position과 맞지 않으면 에러가 발생한다.
+
+
+```
+위와 같이 사용하면 잘못된 함수의 사용을 막을 수 있다.
+
+[https://velog.io/@cjh951114/TypeScript-2.2-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%83%80%EC%9E%85-%EC%A0%95%EC%9D%98](https://velog.io/@cjh951114/TypeScript-2.2-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%83%80%EC%9E%85-%EC%A0%95%EC%9D%98)
diff --git a/src/content/posts/typeScript/Generics.md b/src/content/posts/typeScript/Generics.md
index 46a90e5..4ecffaf 100644
--- a/src/content/posts/typeScript/Generics.md
+++ b/src/content/posts/typeScript/Generics.md
@@ -1,73 +1,73 @@
----
-title: 타입스크립트 제너릭
-tags: [typeScript]
-date: "2023.07.11"
----
-## 제너릭이란?
-
-제너릭이란 타입을 파라미터처럼 사용 할 수 있는걸 의미한다. 제너릭의 장점으로는 다양한 타입에 대한 재사용성이 올라간다는 점이 있다.
-
-```javascript
-
- const returnFunction = (arg: number): number => {
- return arg;
- };
-
-
-```
-위의 코드를 보면 받은 파라미터를 그대로 반환해 주는데 받은 파라미터 타입이 number가 아니라면? 타입별로 함수를 만들어주게 되면 코드의 재사용성도 떨어지고 유지보수도 힘들어진다. 이떄 사용하면 좋은게 제러릭이다.
-
-```javascript
-
- const returnFunction = (arg: T): T => {
- return arg;
- };
-
- returnFunction(10);
- returnFunction("10");
- returnFunction(true);
-
-
-```
-만약 파라미터로 받은 값의 length를 확인 하고싶어 아래와 같이 작성하면 에러를 반환하게 된다. (Property 'length' does not exist on type 'T') 이때 제너릭에 배열임을 명시해주면 된다.
-
-```javascript
-
- const returnFunction = (arg: T): T => {
- return arg.length;
- };
-
-
-```
-1번과 2번은 같은 의미이다.
-
-```javascript
-
- // 1
- const returnFunction = (arg: T[]): T[] => {
- return arg.length;
- };
- // 2
- const returnFunction = (arg: Array): Array => {
- return arg.length;
- };
-
- returnFunction(10);
-
-
-```
-ts파일에서의 화살표 함수를 사용할때는 이렇게 사용하면 되는데 tsx파일에서 제너릭을 사용하게 되면 (JSX element 'T' has no corresponding closing tag.) 같은 에러가 발생한다. 를 태그로 인식해 발생하는 문제인데 이때는 아래와 같이 사용하면 된다.
-
-```javascript
-
- const returnFunction = (arg: T): T => {
- return arg;
- };
-
-
-```
-[https://www.typescriptlang.org/docs/handbook/generics.html](https://www.typescriptlang.org/docs/handbook/generics.html)
-
-[https://joshua1988.github.io/ts/guide/generics.html#%EC%A0%9C%EB%84%A4%EB%A6%AD-%EC%A0%9C%EC%95%BD-%EC%A1%B0%EA%B1%B4](https://joshua1988.github.io/ts/guide/generics.html#%EC%A0%9C%EB%84%A4%EB%A6%AD-%EC%A0%9C%EC%95%BD-%EC%A1%B0%EA%B1%B4)
-
-[https://lakelouise.tistory.com/188#%F0%9F%93%9D-union-type](https://lakelouise.tistory.com/188#%F0%9F%93%9D-union-type)
+---
+title: 타입스크립트 제너릭
+tags: [typeScript]
+date: "2023.07.11"
+---
+## 제너릭이란?
+
+제너릭이란 타입을 파라미터처럼 사용 할 수 있는걸 의미한다. 제너릭의 장점으로는 다양한 타입에 대한 재사용성이 올라간다는 점이 있다.
+
+```javascript
+
+ const returnFunction = (arg: number): number => {
+ return arg;
+ };
+
+
+```
+위의 코드를 보면 받은 파라미터를 그대로 반환해 주는데 받은 파라미터 타입이 number가 아니라면? 타입별로 함수를 만들어주게 되면 코드의 재사용성도 떨어지고 유지보수도 힘들어진다. 이떄 사용하면 좋은게 제러릭이다.
+
+```javascript
+
+ const returnFunction = (arg: T): T => {
+ return arg;
+ };
+
+ returnFunction(10);
+ returnFunction("10");
+ returnFunction(true);
+
+
+```
+만약 파라미터로 받은 값의 length를 확인 하고싶어 아래와 같이 작성하면 에러를 반환하게 된다. (Property 'length' does not exist on type 'T') 이때 제너릭에 배열임을 명시해주면 된다.
+
+```javascript
+
+ const returnFunction = (arg: T): T => {
+ return arg.length;
+ };
+
+
+```
+1번과 2번은 같은 의미이다.
+
+```javascript
+
+ // 1
+ const returnFunction = (arg: T[]): T[] => {
+ return arg.length;
+ };
+ // 2
+ const returnFunction = (arg: Array): Array => {
+ return arg.length;
+ };
+
+ returnFunction(10);
+
+
+```
+ts파일에서의 화살표 함수를 사용할때는 이렇게 사용하면 되는데 tsx파일에서 제너릭을 사용하게 되면 (JSX element 'T' has no corresponding closing tag.) 같은 에러가 발생한다. 를 태그로 인식해 발생하는 문제인데 이때는 아래와 같이 사용하면 된다.
+
+```javascript
+
+ const returnFunction = (arg: T): T => {
+ return arg;
+ };
+
+
+```
+[https://www.typescriptlang.org/docs/handbook/generics.html](https://www.typescriptlang.org/docs/handbook/generics.html)
+
+[https://joshua1988.github.io/ts/guide/generics.html#%EC%A0%9C%EB%84%A4%EB%A6%AD-%EC%A0%9C%EC%95%BD-%EC%A1%B0%EA%B1%B4](https://joshua1988.github.io/ts/guide/generics.html#%EC%A0%9C%EB%84%A4%EB%A6%AD-%EC%A0%9C%EC%95%BD-%EC%A1%B0%EA%B1%B4)
+
+[https://lakelouise.tistory.com/188#%F0%9F%93%9D-union-type](https://lakelouise.tistory.com/188#%F0%9F%93%9D-union-type)
diff --git a/src/content/posts/typeScript/Interface.md b/src/content/posts/typeScript/Interface.md
index 1db80fa..2529ec6 100644
--- a/src/content/posts/typeScript/Interface.md
+++ b/src/content/posts/typeScript/Interface.md
@@ -1,178 +1,178 @@
----
-title: 타입스크립트 인터페이스
-tags: [typeScript]
-date: "2023.05.13"
----
-타입스크립트에서는 인터페이스를 활용해 변수의 타입으로 사용할 수 있다. 인터페이스는 클래스와 비슷한데 클래스와는 다르게 정의만 할 뿐 구현이 되지 않는다는 차이점이 있다. 타입스크립트에서 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 인터페이스는 보통 다음과 같은 범주에 대해 정의할 수 있다.
-
-- 객체의 스펙(속성과 속성의 타입)
-- 함수의 파라미터
-- 함수의 스펙(파라미터, 반환 타입 등)
-- 배열과 객체를 접근하는 방식
-- 클래스
-## 인터페이스 알아보기
-
-인터페이스는 변수의 타입으로 사용할 수 있다.
-
-```javascript
-
- // 인터페이스의 정의
- interface Info {
- name: string;
- age: number;
- }
-
- // 변수 info의 타입으로 Info 인터페이스를 선언하였다.
- const info: Info = {
- name: "Kim",
- age: 22
- };
-
-
-```
-## 옵셔널 속성
-
-인터페이스에는 ? 를 사용해서 옵셔널한 속성을 부여할 수 있다. 옵셔널한 속성을 부여하면 모든 속성을 사용하지 않아도 된다.
-
-```javascript
-
- interface Info {
- name: string;
- age?: number; // 속성의 끝에 ?를 사용해준다
- }
-
- const info = {
- name: "Kim"
- };
-
- function person(info: Info) {
- console.log(info.name) // Kim
- }
- person(info)
-
-
-```
-## 읽기 전용 속성
-
-읽기 전용 속성은 객체를 생성할때 값을 할당하면 그 이후에는 바꿀 수 없는 속성을 의미한다 readonly 속성을 앞에 사용하면 된다. 또한 ReadonlyArray 를 사용하면 배열또한 읽기전용으로 지정 할 수 있습니다.
-
-```javascript
-
- interface Info {
- readonly name: string;
- age: number;
- }
-
- const info: Info = {
- name: "Kim",
- age: 22
- };
-
- info.name = Lee // Cannot assign to 'name' because it is a read-only property.
- info.age = 30
-
-
-```
-```javascript
-
- const arr: ReadonlyArray = [1,2,3];
- arr.splice(0,1); // error
- arr.push(4); // error
- arr[0] = 100; // error
-
-```
-## 객체 선언과 관련된 타입 체킹
-
-타입스크립트를 사용한다면 좀 더 엄밀한 속성 검사를 진행한다.
-
-```javascript
-
- interface Info {
- name: string;
- }
-
- function person(info: Info) {
- // 어쩌구 저쩌구 내부 동작
- }
- person({nameoas: "Lee"})
- // Argument of type '{ nameoas: string; }' is not assignable to parameter of type 'Info'.
- // Object literal may only specify known properties, and 'nameoas' does not exist in type 'Info'.
-
-
-```
-인터페이스에 선언되어 있는 속성과 다를경우 오탈자 점검을 요하는 오류가 난다. 만일 이런 타입 추론을 무시하고 싶다면 아래와 같이 선언한다.
-
-```javascript
-
- const info = { age: 'what' }';
- brewBeer(info as Info);
- // 만일 인터페이스에 정의하지 않은 속성들을 추가로 사용하고 싶을 때는 아래와 같은 방법을 사용하면 된다.
- interface Info {
- name?: string;
- [propName: string]: any;
- }
-
-
-```
-## 클래스 타입
-
-C#이나 자바처럼 타입스크립트에서도 클래스가 일정 조건을 만족하도록 타입 규칙을 정할 수 있다.
-
-```javascript
-
- interface Info {
- name: string;
- nameFun(name: string): void;
- }
-
- class person implements Info {
- name: string = 'Lee';
- nameBeer(b: string) {
- this.name = b;
- }
- constructor() {}
- }
-
-
-```
-## 인터페이스 확장
-
-클래스와 마찬가지로 인터페이스도 인터페이스 간 확장이 가능하다.
-
-```javascript
-
- interface Info {
- name: string;
- }
- interface Developer extends Info {
- skill: string;
- }
- let fe = {} as Developer;
- fe.name = 'Lee';
- fe.skill = 'TypeScript';
-
-
-```
-혹은 아래와 같이 여러 인터페이스를 상속받아 사용할 수 있다.
-
-```javascript
-
- interface Person {
- name: string;
- }
- interface Drinker {
- drink: string;
- }
- interface Developer extends Person {
- skill: string;
- }
- let fe = {} as Developer;
- fe.name = 'josh';
- fe.skill = 'TypeScript';
- fe.drink = 'Beer';
-
-
-```
-[https://poiemaweb.com/typescript-interface](https://poiemaweb.com/typescript-interface)
-
-[https://joshua1988.github.io/ts/guide/interfaces.html#%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4](https://joshua1988.github.io/ts/guide/interfaces.html#%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4)
+---
+title: 타입스크립트 인터페이스
+tags: [typeScript]
+date: "2023.05.13"
+---
+타입스크립트에서는 인터페이스를 활용해 변수의 타입으로 사용할 수 있다. 인터페이스는 클래스와 비슷한데 클래스와는 다르게 정의만 할 뿐 구현이 되지 않는다는 차이점이 있다. 타입스크립트에서 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 인터페이스는 보통 다음과 같은 범주에 대해 정의할 수 있다.
+
+- 객체의 스펙(속성과 속성의 타입)
+- 함수의 파라미터
+- 함수의 스펙(파라미터, 반환 타입 등)
+- 배열과 객체를 접근하는 방식
+- 클래스
+## 인터페이스 알아보기
+
+인터페이스는 변수의 타입으로 사용할 수 있다.
+
+```javascript
+
+ // 인터페이스의 정의
+ interface Info {
+ name: string;
+ age: number;
+ }
+
+ // 변수 info의 타입으로 Info 인터페이스를 선언하였다.
+ const info: Info = {
+ name: "Kim",
+ age: 22
+ };
+
+
+```
+## 옵셔널 속성
+
+인터페이스에는 ? 를 사용해서 옵셔널한 속성을 부여할 수 있다. 옵셔널한 속성을 부여하면 모든 속성을 사용하지 않아도 된다.
+
+```javascript
+
+ interface Info {
+ name: string;
+ age?: number; // 속성의 끝에 ?를 사용해준다
+ }
+
+ const info = {
+ name: "Kim"
+ };
+
+ function person(info: Info) {
+ console.log(info.name) // Kim
+ }
+ person(info)
+
+
+```
+## 읽기 전용 속성
+
+읽기 전용 속성은 객체를 생성할때 값을 할당하면 그 이후에는 바꿀 수 없는 속성을 의미한다 readonly 속성을 앞에 사용하면 된다. 또한 ReadonlyArray 를 사용하면 배열또한 읽기전용으로 지정 할 수 있습니다.
+
+```javascript
+
+ interface Info {
+ readonly name: string;
+ age: number;
+ }
+
+ const info: Info = {
+ name: "Kim",
+ age: 22
+ };
+
+ info.name = Lee // Cannot assign to 'name' because it is a read-only property.
+ info.age = 30
+
+
+```
+```javascript
+
+ const arr: ReadonlyArray = [1,2,3];
+ arr.splice(0,1); // error
+ arr.push(4); // error
+ arr[0] = 100; // error
+
+```
+## 객체 선언과 관련된 타입 체킹
+
+타입스크립트를 사용한다면 좀 더 엄밀한 속성 검사를 진행한다.
+
+```javascript
+
+ interface Info {
+ name: string;
+ }
+
+ function person(info: Info) {
+ // 어쩌구 저쩌구 내부 동작
+ }
+ person({nameoas: "Lee"})
+ // Argument of type '{ nameoas: string; }' is not assignable to parameter of type 'Info'.
+ // Object literal may only specify known properties, and 'nameoas' does not exist in type 'Info'.
+
+
+```
+인터페이스에 선언되어 있는 속성과 다를경우 오탈자 점검을 요하는 오류가 난다. 만일 이런 타입 추론을 무시하고 싶다면 아래와 같이 선언한다.
+
+```javascript
+
+ const info = { age: 'what' }';
+ brewBeer(info as Info);
+ // 만일 인터페이스에 정의하지 않은 속성들을 추가로 사용하고 싶을 때는 아래와 같은 방법을 사용하면 된다.
+ interface Info {
+ name?: string;
+ [propName: string]: any;
+ }
+
+
+```
+## 클래스 타입
+
+C#이나 자바처럼 타입스크립트에서도 클래스가 일정 조건을 만족하도록 타입 규칙을 정할 수 있다.
+
+```javascript
+
+ interface Info {
+ name: string;
+ nameFun(name: string): void;
+ }
+
+ class person implements Info {
+ name: string = 'Lee';
+ nameBeer(b: string) {
+ this.name = b;
+ }
+ constructor() {}
+ }
+
+
+```
+## 인터페이스 확장
+
+클래스와 마찬가지로 인터페이스도 인터페이스 간 확장이 가능하다.
+
+```javascript
+
+ interface Info {
+ name: string;
+ }
+ interface Developer extends Info {
+ skill: string;
+ }
+ let fe = {} as Developer;
+ fe.name = 'Lee';
+ fe.skill = 'TypeScript';
+
+
+```
+혹은 아래와 같이 여러 인터페이스를 상속받아 사용할 수 있다.
+
+```javascript
+
+ interface Person {
+ name: string;
+ }
+ interface Drinker {
+ drink: string;
+ }
+ interface Developer extends Person {
+ skill: string;
+ }
+ let fe = {} as Developer;
+ fe.name = 'josh';
+ fe.skill = 'TypeScript';
+ fe.drink = 'Beer';
+
+
+```
+[https://poiemaweb.com/typescript-interface](https://poiemaweb.com/typescript-interface)
+
+[https://joshua1988.github.io/ts/guide/interfaces.html#%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4](https://joshua1988.github.io/ts/guide/interfaces.html#%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4)
diff --git a/src/content/posts/typeScript/TsTypeLearn.md b/src/content/posts/typeScript/TsTypeLearn.md
index 7261f93..0a1eeb4 100644
--- a/src/content/posts/typeScript/TsTypeLearn.md
+++ b/src/content/posts/typeScript/TsTypeLearn.md
@@ -1,159 +1,159 @@
----
-title: 타입스크립트 타입 종류
-tags: [typeScript]
-date: "2023.05.09"
----
-타입스크립트에 대한 수요가 늘어나 타입스크립트를 공부하면서 정리해보려 한다. 타입스크립트는 타입을 지정해 줌으로써 기존 자바스크립트에서 발생하는 에러를 미리 예방 할 수 있다는 장점이 있다.
-
-## 타입스크립트 기본타입
-
-- Boolean
-- Number
-- String
-- Array
-- Tuple
-- Enum
-- any
-- void
-- Object
-- never
-## Boolean
-
-참/거짓(true/false)에 대한 타입이다
-
-```javascript
-
- const isTrue: boolean = false;
-
-
-```
-## Number
-
-값이 숫자이면 다음과 같이 선언한다.
-
-```javascript
-
- const num: number = 6;
-
-
-```
-## String
-
-값이 문자열이면 다음과 같이 선언한다.
-
-```javascript
-
- const str: string = 'string';
-
-
-```
-## Array
-
-값이 배열일 경우 다음과 같이 선언한다.
-
-```javascript
-
- const arr: number[] = [1,2,3];
- const arr: Array = [1,2,3];
-
-
-```
-## Tuple
-
-Tuple은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미합니다.
-
-```javascript
-
- let arr: [string, number] = ['hi', 10];
- // 정의 하지 않은 타입, 인덱스로 접근할 경우 오류가 난다.
- arr[1].concat('!'); // Error, 'number' does not have 'concat'
- arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.
-
-
-```
-## Enum
-
-Enum은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미합니다.
-
-```javascript
-
- enum Avengers { Capt, IronMan, Thor }
- let hero: Avengers = Avengers.Capt;
- //
- enum Avengers { Capt, IronMan, Thor }
- let hero: Avengers = Avengers[0];
- //
- enum Avengers { Capt = 2, IronMan, Thor }
- let hero: Avengers = Avengers[2]; // Capt
- let hero: Avengers = Avengers[4]; // Thor
-
-
-```
-## any
-
-any는 모든 타입에 대해서 혀용한다는 의미를 가지고 있다 하지만 너무 남발하게 되면 TypeScript를 사용하는 의미를 잃어버리니 조심하도록 하자.
-
-```javascript
-
- const str: any = 'hi';
- const num: any = 10;
- const arr: any = ['a', 2, true];
-
-
-```
-## void
-
-void는 어떤 값도 존재 할 수 없을을 나타낸다.
-
-```javascript
-
- let unusable: void = undefined;
- unusable: void = null;
- // 함수일 경우 반환 하는 값이 없으면 void로 지정한다.
- function returnNothing(): void {
- return;
- }
-
-
-```
-## object
-
-object는 interface, class의 상위 타입이다. object로 정의하면 any타입처럼 모든 값을 할당 할 수 있다. 하지만 any와 같이 typeScript를 사용하는 의미가 없어지니 조심하자.
-
-```javascript
-
- let obj: object = { name: 'NAME', age: 29 };
-
- obj = { A: 'A', B: 'B' };
-
-
-```
-## Never
-
-Never타입은 절대 발생할 수 없는 타입을 나타낸다.
-
-```javascript
-
- // never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
- function error(message: string): never {
- throw new Error(message);
- }
-
- // 반환 타입이 never로 추론된다.
- function fail() {
- return error("Something failed");
- }
-
- // never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
- function infiniteLoop(): never {
- while (true) {
- }
- }
-
-
-```
-[https://joshua1988.github.io/ts/guide/basic-types.html](https://joshua1988.github.io/ts/guide/basic-types.html)
-
-[https://www.typescriptlang.org/docs/handbook/2/everyday-types.html](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)
-
-[https://joshua1988.github.io/ts/guide/basic-types.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EB%B3%B8-%ED%83%80%EC%9E%85](https://joshua1988.github.io/ts/guide/basic-types.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EB%B3%B8-%ED%83%80%EC%9E%85)
+---
+title: 타입스크립트 타입 종류
+tags: [typeScript]
+date: "2023.05.09"
+---
+타입스크립트에 대한 수요가 늘어나 타입스크립트를 공부하면서 정리해보려 한다. 타입스크립트는 타입을 지정해 줌으로써 기존 자바스크립트에서 발생하는 에러를 미리 예방 할 수 있다는 장점이 있다.
+
+## 타입스크립트 기본타입
+
+- Boolean
+- Number
+- String
+- Array
+- Tuple
+- Enum
+- any
+- void
+- Object
+- never
+## Boolean
+
+참/거짓(true/false)에 대한 타입이다
+
+```javascript
+
+ const isTrue: boolean = false;
+
+
+```
+## Number
+
+값이 숫자이면 다음과 같이 선언한다.
+
+```javascript
+
+ const num: number = 6;
+
+
+```
+## String
+
+값이 문자열이면 다음과 같이 선언한다.
+
+```javascript
+
+ const str: string = 'string';
+
+
+```
+## Array
+
+값이 배열일 경우 다음과 같이 선언한다.
+
+```javascript
+
+ const arr: number[] = [1,2,3];
+ const arr: Array = [1,2,3];
+
+
+```
+## Tuple
+
+Tuple은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미합니다.
+
+```javascript
+
+ let arr: [string, number] = ['hi', 10];
+ // 정의 하지 않은 타입, 인덱스로 접근할 경우 오류가 난다.
+ arr[1].concat('!'); // Error, 'number' does not have 'concat'
+ arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.
+
+
+```
+## Enum
+
+Enum은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미합니다.
+
+```javascript
+
+ enum Avengers { Capt, IronMan, Thor }
+ let hero: Avengers = Avengers.Capt;
+ //
+ enum Avengers { Capt, IronMan, Thor }
+ let hero: Avengers = Avengers[0];
+ //
+ enum Avengers { Capt = 2, IronMan, Thor }
+ let hero: Avengers = Avengers[2]; // Capt
+ let hero: Avengers = Avengers[4]; // Thor
+
+
+```
+## any
+
+any는 모든 타입에 대해서 혀용한다는 의미를 가지고 있다 하지만 너무 남발하게 되면 TypeScript를 사용하는 의미를 잃어버리니 조심하도록 하자.
+
+```javascript
+
+ const str: any = 'hi';
+ const num: any = 10;
+ const arr: any = ['a', 2, true];
+
+
+```
+## void
+
+void는 어떤 값도 존재 할 수 없을을 나타낸다.
+
+```javascript
+
+ let unusable: void = undefined;
+ unusable: void = null;
+ // 함수일 경우 반환 하는 값이 없으면 void로 지정한다.
+ function returnNothing(): void {
+ return;
+ }
+
+
+```
+## object
+
+object는 interface, class의 상위 타입이다. object로 정의하면 any타입처럼 모든 값을 할당 할 수 있다. 하지만 any와 같이 typeScript를 사용하는 의미가 없어지니 조심하자.
+
+```javascript
+
+ let obj: object = { name: 'NAME', age: 29 };
+
+ obj = { A: 'A', B: 'B' };
+
+
+```
+## Never
+
+Never타입은 절대 발생할 수 없는 타입을 나타낸다.
+
+```javascript
+
+ // never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
+ function error(message: string): never {
+ throw new Error(message);
+ }
+
+ // 반환 타입이 never로 추론된다.
+ function fail() {
+ return error("Something failed");
+ }
+
+ // never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
+ function infiniteLoop(): never {
+ while (true) {
+ }
+ }
+
+
+```
+[https://joshua1988.github.io/ts/guide/basic-types.html](https://joshua1988.github.io/ts/guide/basic-types.html)
+
+[https://www.typescriptlang.org/docs/handbook/2/everyday-types.html](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)
+
+[https://joshua1988.github.io/ts/guide/basic-types.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EB%B3%B8-%ED%83%80%EC%9E%85](https://joshua1988.github.io/ts/guide/basic-types.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EB%B3%B8-%ED%83%80%EC%9E%85)
diff --git a/src/content/posts/typeScript/TypeInference.md b/src/content/posts/typeScript/TypeInference.md
index 3009303..024454e 100644
--- a/src/content/posts/typeScript/TypeInference.md
+++ b/src/content/posts/typeScript/TypeInference.md
@@ -1,59 +1,59 @@
----
-title: 타입스크립트 타입 추론
-tags: [typeScript]
-date: "2023.08.15"
----
-## 타입추론
-
-타입스크립트에서는 명시적인 타입 표시가 없을때 타입에 대한 정보를 제공한다.
-
-```javascript
-
- // 일반적인 유형
- let x = 3; // x는 number로 추론된다.
-
- // 구조분해 코드
- let arr = [0, 1, null];
- let [a, b, c] = arr; // a, b, c는 number | null 타입으로 추론된다.
-
-
-```
-일반적인 뿐만이 아니라 구조분해 코드에서도 타입추론이 되어 유용하게 사용 할 수 있다.
-
-타입추론이 이렇게 유용하다면 타입을 적어주지 않아도 될까? 그렇다면 타입스크립트를 사용하는 의미가 없어진다고 생각한다. 그럼 타입추론을 사용할 때와 강력한 타입 규칙을 사용 예시를 들어보도록 하겠다.
-
-```javascript
-
- // string 으로 추론이 된다.
- const theme = {
- dark : "dark",
- light : "light",
- }
-
-
-```
-위와 같이 다크모드 인지 라이트모드인지 명시 되어 있는 문자열 리터럴 타입이 있다. 하지만 확인해 보면 value가 srting으로 되어 있는데 이럴 땐 직접 타입을 지정해 주어야 원치 않는 에러를 막을 수 있다.
-
-```javascript
-
- type ThemeObj = {
- dark: "dark";
- light: "light";
- };
-
- const theme: ThemeObj = {
- dark : "dark",
- light : "light",
- }
-
- // 혹은
- const theme = {
- dark : "dark",
- light : "light",
- } as const
-
-
-```
-[https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions)
-
-[https://www.typescriptlang.org/docs/handbook/type-inference.html](https://www.typescriptlang.org/docs/handbook/type-inference.html)
+---
+title: 타입스크립트 타입 추론
+tags: [typeScript]
+date: "2023.08.15"
+---
+## 타입추론
+
+타입스크립트에서는 명시적인 타입 표시가 없을때 타입에 대한 정보를 제공한다.
+
+```javascript
+
+ // 일반적인 유형
+ let x = 3; // x는 number로 추론된다.
+
+ // 구조분해 코드
+ let arr = [0, 1, null];
+ let [a, b, c] = arr; // a, b, c는 number | null 타입으로 추론된다.
+
+
+```
+일반적인 뿐만이 아니라 구조분해 코드에서도 타입추론이 되어 유용하게 사용 할 수 있다.
+
+타입추론이 이렇게 유용하다면 타입을 적어주지 않아도 될까? 그렇다면 타입스크립트를 사용하는 의미가 없어진다고 생각한다. 그럼 타입추론을 사용할 때와 강력한 타입 규칙을 사용 예시를 들어보도록 하겠다.
+
+```javascript
+
+ // string 으로 추론이 된다.
+ const theme = {
+ dark : "dark",
+ light : "light",
+ }
+
+
+```
+위와 같이 다크모드 인지 라이트모드인지 명시 되어 있는 문자열 리터럴 타입이 있다. 하지만 확인해 보면 value가 srting으로 되어 있는데 이럴 땐 직접 타입을 지정해 주어야 원치 않는 에러를 막을 수 있다.
+
+```javascript
+
+ type ThemeObj = {
+ dark: "dark";
+ light: "light";
+ };
+
+ const theme: ThemeObj = {
+ dark : "dark",
+ light : "light",
+ }
+
+ // 혹은
+ const theme = {
+ dark : "dark",
+ light : "light",
+ } as const
+
+
+```
+[https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions)
+
+[https://www.typescriptlang.org/docs/handbook/type-inference.html](https://www.typescriptlang.org/docs/handbook/type-inference.html)
diff --git a/src/content/posts/typeScript/Typescript-Overview-2.md b/src/content/posts/typeScript/Typescript-Overview-2.md
index a8d808f..ad58170 100644
--- a/src/content/posts/typeScript/Typescript-Overview-2.md
+++ b/src/content/posts/typeScript/Typescript-Overview-2.md
@@ -1,305 +1,305 @@
----
-title: 타입스크립트 정리 - 2
-tags: [typeScript]
-date: "2024.08.24"
----
-저번주에 타입스크립트의 기본 문법과 속성에 대해 정리했는데
-오늘은 타입스크립트에서 제공하는 유틸들에 대해 정리해보도록 하겠습니다.
-
-## 유틸리티 타입
-
-### `Partial`
-`Partial`는 객체의 타입을 `?` 옵셔널 프로퍼티로 만들어줍니다.
-```typescript
-interface Person {
- name: string;
- age: number;
-}
-
-const person: Partial = {
- name: 'John',
-};
-
-// 이렇게 바뀝니다.
-// interface Person {
-// name?: string;
-// age?: number;
-// }
-```
-
-### `Required`
-`Required`는 객체의 모든 속성을 필수로 만들어 줍니다.
-```typescript
-interface Person {
- name?: string;
- age?: number;
-}
-
-const person: Required = {
- name: 'John',
- age: 30,
-};
-
-// 이렇게 바뀝니다.
-// interface Person {
-// name: string;
-// age: number;
-// }
-```
-
-### `Readonly`
-`Readonly`는 속성을 읽기 전용으로 만들어주며 속성을 수정할 수 없게 만들 때 사용합니다.
-```typescript
-interface Person {
- name: string;
- age: number;
-}
-
-const person: Readonly = {
- name: 'John',
- age: 30,
-};
-
-person.name = 'Doe';
-// Cannot assign to 'name' because it is a read-only property.ts(2540)
-```
-
-### `Record`
-`Record`는 키 타입 `K` 와 값 타입 `T`를 가지는 객체 타입을 만듭니다.
-```typescript
-type Person = 'name' | 'age';
-type Info = string;
-
-const personInfo: Record = {
- name: 'John',
- age: '30',
-};
-
-// 이런 타입이 생성됩니다.
-// type personInfo {
-// name: string;
-// age: string;
-// }
-```
-
-### `Pick`
-`Pick`는 타입 `T`에서 일부 속성을 선택해 새로운 타입을 만듭니다.
-```typescript
-interface Person {
- name: string;
- age: number;
- address: string;
-}
-
-type PersonName = Pick; // name 속성만 선택
-
-// 이런 타입이 생성됩니다.
-// type personInfo = {
-// name: string;
-// }
-```
-
-### `Omit`
-`Omit`는 타입 `T`에서 특정 속성 `K`를 제외한 속성들을 가진 새로운 타입을 만듭니다.
-```typescript
-interface Person {
- name: string;
- age: number;
- address: string;
-}
-
-type PersonWithoutAddress = Omit; // address 속성 제외
-
-// 이런 타입이 생성됩니다.
-// type PersonWithoutAddress = {
-// name: string;
-// age: number;
-// }
-```
-
-### `Exclude`
-`Exclude`는 타입 `T`에서 타입 `U`에 포함된 타입을 제외한 새로운 타입을 만듭니다.
-```typescript
-type A = string | number | boolean;
-type B = number | boolean;
-
-type C = Exclude; // string만 남음
-
-// 이런 타입이 생성됩니다.
-// type C = string
-```
-### `Extract`
-`Extract`는 타입 `T`에서 타입`U`에 포함된 타입을 추출해 새로운 타입을 만듭니다.
-```typescript
-type A = string | number | boolean;
-type B = number | boolean;
-
-type C = Extract;
-
-// 이런 타입이 생성됩니다.
-// type C = number | boolean
-```
-
-### `NonNullable`
-`NonNullable`는 타입 `T`에서 `null`과 `undifined`를 제외한 새로운 타입을 만듭니다.
-```typescript
-type T = string | null | undefined;
-
-type NonNullT = NonNullable;
-
-// 이런 타입이 생성됩니다.
-// type NonNullT = string
-```
-### `Parameters`
-`Parameters`는 함수 타입 `T`에서 함수의 파라미터를 튜플 형식으로 추출합니다.
-```typescript
-type Func = (a: number, b: string) => void;
-type Params = Parameters;
-
-// 이런 타입이 생성됩니다.
-// type Params = [a: number, b: string]
-```
-
-### `ConstructorParameters`
-`ConstructorParameters`는 클래스 생성자 함수에 매개변수 타입을 튜플 형식으로 추출합니다.
-```typescript
-class Person {
- constructor(public name: string, public age: number) {}
-}
-
-type ConstructorParams = ConstructorParameters;
-
-// 이런 타입이 생성됩니다.
-// type ConstructorParams = [name: string, age: number]
-```
-
-### `ReturnType`
-`ReturnType`는 함수 타입 `T`에서 반환값의 타입을 추출합니다.
-```typescript
-type Func = (a: number, b: string) => boolean;
-type Return = ReturnType;
-
-// 이런 타입이 생성됩니다.
-// type Return = boolean
-```
-
-### `InstanceType`
-`InstanceType`는 생성자 함수 타입 `T`에서 해당 클래스의 인스턴트 타입을 추출합니다.
-```typescript
-class Person {
- name: string;
- constructor(name: string) {
- this.name = name;
- }
-}
-
-type PersonInstance = InstanceType;
-
-// 이런 타입이 생성됩니다.
-// type PersonInstance = Person
-```
-
-### `Awaited`
-`Awaited`는 프로미스에서 반환값의 타입을 추출합니다.
-```typescript
-type Response = Promise;
-
-type Resolved = Awaited;
-
-// 이런 타입이 생성됩니다.
-// type Resolved = number
-```
-
-### `ThisType`
-`ThisType`는 객체의 컨텍스트`this` 타입을 지정할 때 사용됩니다.
-```typescript
-type ObjectWithThis = {
- name: string;
- greet: () => void;
-} & ThisType<{ name: string }>;
-
-const obj: ObjectWithThis = {
- name: 'John',
- greet() {
- console.log(this.name);
- },
-};
-
-// this의 타입이 { name: string }으로 추론됩니다.
-```
-
-### `NoInfer`
-`NoInfer`는 타입 추론을 막고 명시적으로 타입을 선언하도록 합니다.
-```typescript
-function example(arg: NoInfer): T {
- return arg;
-}
-
-const result1 = example(42); // example(arg: number): number
-const result2 = example(42); // example(arg: unknown): unknown
-```
-
-### `ThisParameterType`
-`ThisParameterType`는 `this` 파라미터의 타입을 추출합니다.
-```typescript
-function toHex(this: Number) {
- return this.toString(16);
-}
-
-function numberToString(n: ThisParameterType) {
- return toHex.apply(n);
-}
-
-// 이런 타입이 생성됩니다.
-// numberToString(n: ThisParameterType<(this: Number) => string>): string
-```
-
-### `OmitThisParameter`
-`OmitThisParameter`는 함수 타입에서 `this` 파라미터 타입을 제거합니다.
-```typescript
-function toHex(this: Number) {
- return this.toString(16);
-}
-
-const fiveToHex: OmitThisParameter = toHex.bind(5);
-
-// 이런 타입이 생성됩니다.
-// fiveToHex: () => string
-```
-
-
-## 내장 문자열 조작 타입
-
-### `Uppercase`
-`Uppercase`는 문자열의 모든 문자를 대문자로 변환합니다.
-```typescript
-type UppercaseExample = Uppercase<'hello world'>;
-// 결과: 'HELLO WORLD'
-```
-
-### `Lowercase`
-`Lowercase`는 문자열의 모든 문자를 소문자로 변환합니다.
-```typescript
-type LowercaseExample = Lowercase<'HELLO WORLD'>;
-// 결과: 'hello world'
-```
-
-### `Capitalize`
-`Capitalize`는 문자열의 첫 번째 문자만 대문자로 변환합니다.
-```typescript
-type CapitalizeExample = Capitalize<'hello world'>;
-// 결과: 'Hello world'
-```
-
-### `Uncapitalize`
-`Uncapitalize`는 문자열의 첫 번째 문자만 소문자로 변환합니다.
-```typescript
-type UncapitalizeExample = Uncapitalize<'Hello World'>;
-// 결과: 'hello World'
-```
-
-## 마치며
-평소 타입스크립트를 사용하면서도 막연하게 사용하던 유틸리티 타입들에 대해 정리하고 넘어갈 수 있는 시간이 되어 너무 좋았고 이 시간 이후로는 유틸리티 타입과 다양한 타입 연산자를 활용해 더욱 효율적이고 간결하게 타입을 다루는 연습을 해야겠습니다.
-
-## 참고자료
+---
+title: 타입스크립트 정리 - 2
+tags: [typeScript]
+date: "2024.08.24"
+---
+저번주에 타입스크립트의 기본 문법과 속성에 대해 정리했는데
+오늘은 타입스크립트에서 제공하는 유틸들에 대해 정리해보도록 하겠습니다.
+
+## 유틸리티 타입
+
+### `Partial`
+`Partial`는 객체의 타입을 `?` 옵셔널 프로퍼티로 만들어줍니다.
+```typescript
+interface Person {
+ name: string;
+ age: number;
+}
+
+const person: Partial = {
+ name: 'John',
+};
+
+// 이렇게 바뀝니다.
+// interface Person {
+// name?: string;
+// age?: number;
+// }
+```
+
+### `Required`
+`Required`는 객체의 모든 속성을 필수로 만들어 줍니다.
+```typescript
+interface Person {
+ name?: string;
+ age?: number;
+}
+
+const person: Required = {
+ name: 'John',
+ age: 30,
+};
+
+// 이렇게 바뀝니다.
+// interface Person {
+// name: string;
+// age: number;
+// }
+```
+
+### `Readonly`
+`Readonly`는 속성을 읽기 전용으로 만들어주며 속성을 수정할 수 없게 만들 때 사용합니다.
+```typescript
+interface Person {
+ name: string;
+ age: number;
+}
+
+const person: Readonly = {
+ name: 'John',
+ age: 30,
+};
+
+person.name = 'Doe';
+// Cannot assign to 'name' because it is a read-only property.ts(2540)
+```
+
+### `Record`
+`Record`는 키 타입 `K` 와 값 타입 `T`를 가지는 객체 타입을 만듭니다.
+```typescript
+type Person = 'name' | 'age';
+type Info = string;
+
+const personInfo: Record = {
+ name: 'John',
+ age: '30',
+};
+
+// 이런 타입이 생성됩니다.
+// type personInfo {
+// name: string;
+// age: string;
+// }
+```
+
+### `Pick`
+`Pick`는 타입 `T`에서 일부 속성을 선택해 새로운 타입을 만듭니다.
+```typescript
+interface Person {
+ name: string;
+ age: number;
+ address: string;
+}
+
+type PersonName = Pick; // name 속성만 선택
+
+// 이런 타입이 생성됩니다.
+// type personInfo = {
+// name: string;
+// }
+```
+
+### `Omit`
+`Omit`는 타입 `T`에서 특정 속성 `K`를 제외한 속성들을 가진 새로운 타입을 만듭니다.
+```typescript
+interface Person {
+ name: string;
+ age: number;
+ address: string;
+}
+
+type PersonWithoutAddress = Omit; // address 속성 제외
+
+// 이런 타입이 생성됩니다.
+// type PersonWithoutAddress = {
+// name: string;
+// age: number;
+// }
+```
+
+### `Exclude`
+`Exclude`는 타입 `T`에서 타입 `U`에 포함된 타입을 제외한 새로운 타입을 만듭니다.
+```typescript
+type A = string | number | boolean;
+type B = number | boolean;
+
+type C = Exclude; // string만 남음
+
+// 이런 타입이 생성됩니다.
+// type C = string
+```
+### `Extract`
+`Extract`는 타입 `T`에서 타입`U`에 포함된 타입을 추출해 새로운 타입을 만듭니다.
+```typescript
+type A = string | number | boolean;
+type B = number | boolean;
+
+type C = Extract;
+
+// 이런 타입이 생성됩니다.
+// type C = number | boolean
+```
+
+### `NonNullable`
+`NonNullable`는 타입 `T`에서 `null`과 `undifined`를 제외한 새로운 타입을 만듭니다.
+```typescript
+type T = string | null | undefined;
+
+type NonNullT = NonNullable;
+
+// 이런 타입이 생성됩니다.
+// type NonNullT = string
+```
+### `Parameters`
+`Parameters`는 함수 타입 `T`에서 함수의 파라미터를 튜플 형식으로 추출합니다.
+```typescript
+type Func = (a: number, b: string) => void;
+type Params = Parameters;
+
+// 이런 타입이 생성됩니다.
+// type Params = [a: number, b: string]
+```
+
+### `ConstructorParameters`
+`ConstructorParameters`는 클래스 생성자 함수에 매개변수 타입을 튜플 형식으로 추출합니다.
+```typescript
+class Person {
+ constructor(public name: string, public age: number) {}
+}
+
+type ConstructorParams = ConstructorParameters;
+
+// 이런 타입이 생성됩니다.
+// type ConstructorParams = [name: string, age: number]
+```
+
+### `ReturnType`
+`ReturnType`는 함수 타입 `T`에서 반환값의 타입을 추출합니다.
+```typescript
+type Func = (a: number, b: string) => boolean;
+type Return = ReturnType;
+
+// 이런 타입이 생성됩니다.
+// type Return = boolean
+```
+
+### `InstanceType`
+`InstanceType`는 생성자 함수 타입 `T`에서 해당 클래스의 인스턴트 타입을 추출합니다.
+```typescript
+class Person {
+ name: string;
+ constructor(name: string) {
+ this.name = name;
+ }
+}
+
+type PersonInstance = InstanceType;
+
+// 이런 타입이 생성됩니다.
+// type PersonInstance = Person
+```
+
+### `Awaited`
+`Awaited`는 프로미스에서 반환값의 타입을 추출합니다.
+```typescript
+type Response = Promise;
+
+type Resolved = Awaited;
+
+// 이런 타입이 생성됩니다.
+// type Resolved = number
+```
+
+### `ThisType`
+`ThisType`는 객체의 컨텍스트`this` 타입을 지정할 때 사용됩니다.
+```typescript
+type ObjectWithThis = {
+ name: string;
+ greet: () => void;
+} & ThisType<{ name: string }>;
+
+const obj: ObjectWithThis = {
+ name: 'John',
+ greet() {
+ console.log(this.name);
+ },
+};
+
+// this의 타입이 { name: string }으로 추론됩니다.
+```
+
+### `NoInfer`
+`NoInfer`는 타입 추론을 막고 명시적으로 타입을 선언하도록 합니다.
+```typescript
+function example(arg: NoInfer): T {
+ return arg;
+}
+
+const result1 = example(42); // example(arg: number): number
+const result2 = example(42); // example(arg: unknown): unknown
+```
+
+### `ThisParameterType`
+`ThisParameterType`는 `this` 파라미터의 타입을 추출합니다.
+```typescript
+function toHex(this: Number) {
+ return this.toString(16);
+}
+
+function numberToString(n: ThisParameterType) {
+ return toHex.apply(n);
+}
+
+// 이런 타입이 생성됩니다.
+// numberToString(n: ThisParameterType<(this: Number) => string>): string
+```
+
+### `OmitThisParameter`
+`OmitThisParameter`는 함수 타입에서 `this` 파라미터 타입을 제거합니다.
+```typescript
+function toHex(this: Number) {
+ return this.toString(16);
+}
+
+const fiveToHex: OmitThisParameter = toHex.bind(5);
+
+// 이런 타입이 생성됩니다.
+// fiveToHex: () => string
+```
+
+
+## 내장 문자열 조작 타입
+
+### `Uppercase`
+`Uppercase`는 문자열의 모든 문자를 대문자로 변환합니다.
+```typescript
+type UppercaseExample = Uppercase<'hello world'>;
+// 결과: 'HELLO WORLD'
+```
+
+### `Lowercase`
+`Lowercase`는 문자열의 모든 문자를 소문자로 변환합니다.
+```typescript
+type LowercaseExample = Lowercase<'HELLO WORLD'>;
+// 결과: 'hello world'
+```
+
+### `Capitalize`
+`Capitalize`는 문자열의 첫 번째 문자만 대문자로 변환합니다.
+```typescript
+type CapitalizeExample = Capitalize<'hello world'>;
+// 결과: 'Hello world'
+```
+
+### `Uncapitalize`
+`Uncapitalize`는 문자열의 첫 번째 문자만 소문자로 변환합니다.
+```typescript
+type UncapitalizeExample = Uncapitalize<'Hello World'>;
+// 결과: 'hello World'
+```
+
+## 마치며
+평소 타입스크립트를 사용하면서도 막연하게 사용하던 유틸리티 타입들에 대해 정리하고 넘어갈 수 있는 시간이 되어 너무 좋았고 이 시간 이후로는 유틸리티 타입과 다양한 타입 연산자를 활용해 더욱 효율적이고 간결하게 타입을 다루는 연습을 해야겠습니다.
+
+## 참고자료
[공식 문서](https://www.typescriptlang.org/ko/docs/handbook/utility-types.html#parameterstype)
\ No newline at end of file
diff --git a/src/content/posts/typeScript/Typescript-Overview.md b/src/content/posts/typeScript/Typescript-Overview.md
index e27dd71..e5fcb29 100644
--- a/src/content/posts/typeScript/Typescript-Overview.md
+++ b/src/content/posts/typeScript/Typescript-Overview.md
@@ -1,311 +1,311 @@
----
-title: 타입스크립트 정리
-tags: [typeScript]
-date: "2024.08.17"
----
-타입스크립트를 사용한 지 1년 정도가 되었는데 그동안 작성했던 타입스크립트 정리 글에 잘못된 부분들이 많아
-이 게시글을 작성하며 다시 정리해 보려고 합니다.
-
-## `TypeScript` 란?
-
-타입스크립트는 자바스크립트를 기반으로 한 정적 타입 언어입니다. 컴파일 시점에서 타입 오류를 확인할 수 있고
-타입을 명시해 유지보수하기 쉽고 미리 오류를 잡을 수 있도록 도와줍니다.
-
-## 타입
-
-### 기본 타입
-```
-문자열(String): string
-숫자(Number): number
-불리언(Boolean): boolean
-Null: null
-Undefined: undefined
-Symbol: symbol
-BigInt: bigint
-```
-### Array
-배열은 `타입[]` `Array<타입>` 두가지 방법으로 선언할 수 있으며 `|` 유니언(Union)을 사용하면
-여려개의 타입을 가질 수 있습니다.
-```typescript
-let numbers: number[] = [1, 2, 3]; // 숫자만 가질 수 있습니다.
-
-let strings: Array = ["a", "b", "c"]; // 문자만 허용되는 배열 입니다.
-
-let array: (string | number)[] = [1, 2, "A"]; // 숫자와 문자가 허용됩니다.
-```
-
-### Tuple
-튜플은 고정된 길이와 순서를 가지는 배열 입니다.
-```typescript
-let user: [string, number] = ["Alice", 25];
-```
-
-### Enum
-열거형은 관련된 타입도 정의한 수 있습니다.
-```typescript
-enum Direction {
- Up = 1,
- Down, // 2
- Left, // 3
- Right // 4
-}
-let move: Direction = Direction.Up; // 1
-```
-
-### Object
-객체의 구조에 대해 타입을 정의할 수 있습니다.
-```typescript
-type User = {
- id: number;
- name: string;
- isActive: boolean;
-};
-
-let user: User = {
- id: 1,
- name: "Alice",
- isActive: true,
-};
-```
-
-### Function
-함수의 매개변수와 반환값에 대한 타입을 지정할 수 있습니다.
-```typescript
-function add(a: number, b: number): number {
- return a + b;
-}
-
-const subtract = (a: number, b: number): number => {
- return a - b;
-}
-
-add(3, 5) // 8
-add(3, "5") // Argument of type 'string' is not assignable to parameter of type 'number'.ts(2345)
-```
-
-### any, unknown, void, never
-```
-any: 모든 타입을 허용합니다.
-unknown: any와 같이 모든 타입에 할당할 수 있지만 타입 단언이 필요합니다.
-void: 비어있다는 의미로 반환값이 없는 함수에 사용할 수 있습니다.
-never: 절대 발생하지 않는 값을 의미하며 주로 오류를 던지는 함수등에 사용하며 값이 비어있다는 `void`와 혼동하면 안됩니다.
-```
-
-### Generic
-제네릭 타입은 타입을 매개변수처럼 받아 사용할 수 있습니다.
-```
-function identity(value: T): T {
- return value;
-}
-
-let output = identity("Hello");
-```
-
-### 타입추론
-타입스크립트는 명시적은 타입선언을 하지 않아도 타입에 대한 정보를 제공합니다.
-```typescript
-let text = "text"
-
-text = 1 //Type 'number' is not assignable to type 'string'.ts(2322)
-```
-이 타입추론은 제네릭 타입에도 적용할 수 있습니다.
-```typescript
-function Box(arg: T): T {
- return arg;
-}
-
-let num = Box(10); // num은 number 타입
-let str = Box("Hello, TypeScript!"); // str은 string 타입
-```
-
-
-## 타입 선언 방법
-타입을 선언하는 방법으론 `type`과 `Interface`가 있습니다.
-
-### type
-변수처럼 `type` 키워드를 이용해 타입을 선언할 수 있습니다.
-```typescript
-type IdType = number
-type NameType = string
-type UserType = {
- id: IdType;
- name: NameType;
- info: string[]
-}
-
-const user: UserType = {
- id: 1234;
- name: "김지훈"
- info: ["안", "녕"]
-}
-```
-
-### Interface
-인터페이스는 객체의 타입을 정의하는데 큰 도움이 되며 `readonly`을 이용해 읽기 전용 속성을 정의하거나
-`extends`를 이용해 확장할 수 도 있습니다.
-```typescript
-interface User {
- name: string;
- age: number;
- isAdmin: boolean;
-
-}
-
-const user: User = {
- name: "John",
- age: 30,
- isAdmin: true,
-};
-
-```
-```typescript
- interface User {
- readonly id: number; // 읽기 전용 속성은 수정할 수 없습니다.
- name: string;
- }
-
- const user: User = { id: 1, name: "Charlie" };
- user.id = 3; // Cannot assign to 'id' because it is a read-only property.ts(2540)
-```
-```typescript
-interface Animal {
- name: string;
-}
-
-interface Dog extends Animal {
- breed: string;
-}
-
-const myDog: Dog = {
- name: "Buddy",
- breed: "Golden Retriever",
-};
-```
-
-## 타입 연산자
-
-### keyof
-`key of`는 인덱싱 가능한 타입의 속성 이름들을 유니온 타입으로 적용시킵니다.
-```typescript
-type User = {
- id: number;
- name: string;
- age: number;
-};
-
-type UserKeys = keyof User; // "id" | "name" | "age"
-```
-
-### as
-`as`를 사용하면 컴파일러에 명시적으로 타입을 알려줍니다.
-```typescript
-const value: unknown = "Hello, TypeScript";
-const str = value as string; // unknown → string으로 단언
-
-function add(a: string | number, isNumber: boolean) {
- if (isNumber) {
- // Property 'toFixed' does not exist on type 'string | number'.
- // Property 'toFixed' does not exist on type 'string'.ts(2339)
- a.toFixed(2);
-
- (a as number).toFixed(2) // 이상 없음
- }
-}
-```
-### is
-반환 타입을 좁혀주는 역할을 합니다.
-```typescript
-function isNumber(value: unknown): value is number {
- return typeof value === "number";
-}
-
-const input: unknown = 123;
-if (isNumber(input)) {
- console.log(input.toFixed(2)); // input이 number로 타입이 좁혀짐
-}
-```
-### in
-특정 속성이 있는지 확인합니다.
-```typescript
-type Cat = { meow: () => void };
-type Dog = { bark: () => void };
-
-function makeSound(animal: Cat | Dog) {
- if ("meow" in animal) {
- animal.meow();
- } else {
- animal.bark();
- }
-}
-```
-### extends
-인터페이스나 제네릭 타입에 확장할 수 있습니다.
-```typescript
-function logLength(value: T): void { // length속성이 있는 변수만 허용함
- console.log(value.length);
-}
-
-logLength("Hello"); // string은 length 속성이 있음
-logLength([1, 2, 3]); // 배열도 length 속성이 있음
-
-interface Animal {
- name: string;
- age: number;
-}
-
-interface Dog extends Animal {
- breed: string;
-}
-
-const myDog: Dog = {
- name: "Buddy",
- age: 3,
- breed: "Golden Retriever",
-};
-```
-
-### infer
-조건부 타입과 함께 사용되어 타입을 추론합니다.
-```typescript
-type ElementType = T extends (infer U)[] ? U : T;
-
-type A = ElementType; // string
-type B = ElementType; // number
-type C = ElementType; // boolean
-```
-
-### & 와 |
-`&`는 `and`를 의미합니다. `|`는 `or`을 의미합니다
-```typescript
-type Name = { name: string };
-type Age = { age: number };
-type Person = Name & Age;
-
-const person: Person = { name: "Alice", age: 30 };
-
-type Status = "success" | "error" | "pending";
-
-function handleStatus(status: Status) {
- if (status === "success") {
- console.log("Success!");
- } else if (status === "error") {
- console.log("Error!");
- }
-}
-```
-### `?` 옵셔널 프로퍼티
-객체 타입에서 필수 속성이 아닌 선택적으로 지정합니다.
-```typescript
-interface User {
- name: string;
- age?: number; // 옵셔널 프로퍼티
-}
-
-// age?는 number | undefined 으로 해석됩니다.
-```
-
-## 마치며
-여기까지 타입스크립트의 문법과 타입의 종류에 대해서 정리했는데
-다음 주에는 타입스크립트의 유틸리티 타입에 대해 정리해 보도록 하겠습니다.
-
+---
+title: 타입스크립트 정리
+tags: [typeScript]
+date: "2024.08.17"
+---
+타입스크립트를 사용한 지 1년 정도가 되었는데 그동안 작성했던 타입스크립트 정리 글에 잘못된 부분들이 많아
+이 게시글을 작성하며 다시 정리해 보려고 합니다.
+
+## `TypeScript` 란?
+
+타입스크립트는 자바스크립트를 기반으로 한 정적 타입 언어입니다. 컴파일 시점에서 타입 오류를 확인할 수 있고
+타입을 명시해 유지보수하기 쉽고 미리 오류를 잡을 수 있도록 도와줍니다.
+
+## 타입
+
+### 기본 타입
+```
+문자열(String): string
+숫자(Number): number
+불리언(Boolean): boolean
+Null: null
+Undefined: undefined
+Symbol: symbol
+BigInt: bigint
+```
+### Array
+배열은 `타입[]` `Array<타입>` 두가지 방법으로 선언할 수 있으며 `|` 유니언(Union)을 사용하면
+여려개의 타입을 가질 수 있습니다.
+```typescript
+let numbers: number[] = [1, 2, 3]; // 숫자만 가질 수 있습니다.
+
+let strings: Array = ["a", "b", "c"]; // 문자만 허용되는 배열 입니다.
+
+let array: (string | number)[] = [1, 2, "A"]; // 숫자와 문자가 허용됩니다.
+```
+
+### Tuple
+튜플은 고정된 길이와 순서를 가지는 배열 입니다.
+```typescript
+let user: [string, number] = ["Alice", 25];
+```
+
+### Enum
+열거형은 관련된 타입도 정의한 수 있습니다.
+```typescript
+enum Direction {
+ Up = 1,
+ Down, // 2
+ Left, // 3
+ Right // 4
+}
+let move: Direction = Direction.Up; // 1
+```
+
+### Object
+객체의 구조에 대해 타입을 정의할 수 있습니다.
+```typescript
+type User = {
+ id: number;
+ name: string;
+ isActive: boolean;
+};
+
+let user: User = {
+ id: 1,
+ name: "Alice",
+ isActive: true,
+};
+```
+
+### Function
+함수의 매개변수와 반환값에 대한 타입을 지정할 수 있습니다.
+```typescript
+function add(a: number, b: number): number {
+ return a + b;
+}
+
+const subtract = (a: number, b: number): number => {
+ return a - b;
+}
+
+add(3, 5) // 8
+add(3, "5") // Argument of type 'string' is not assignable to parameter of type 'number'.ts(2345)
+```
+
+### any, unknown, void, never
+```
+any: 모든 타입을 허용합니다.
+unknown: any와 같이 모든 타입에 할당할 수 있지만 타입 단언이 필요합니다.
+void: 비어있다는 의미로 반환값이 없는 함수에 사용할 수 있습니다.
+never: 절대 발생하지 않는 값을 의미하며 주로 오류를 던지는 함수등에 사용하며 값이 비어있다는 `void`와 혼동하면 안됩니다.
+```
+
+### Generic
+제네릭 타입은 타입을 매개변수처럼 받아 사용할 수 있습니다.
+```
+function identity(value: T): T {
+ return value;
+}
+
+let output = identity("Hello");
+```
+
+### 타입추론
+타입스크립트는 명시적은 타입선언을 하지 않아도 타입에 대한 정보를 제공합니다.
+```typescript
+let text = "text"
+
+text = 1 //Type 'number' is not assignable to type 'string'.ts(2322)
+```
+이 타입추론은 제네릭 타입에도 적용할 수 있습니다.
+```typescript
+function Box(arg: T): T {
+ return arg;
+}
+
+let num = Box(10); // num은 number 타입
+let str = Box("Hello, TypeScript!"); // str은 string 타입
+```
+
+
+## 타입 선언 방법
+타입을 선언하는 방법으론 `type`과 `Interface`가 있습니다.
+
+### type
+변수처럼 `type` 키워드를 이용해 타입을 선언할 수 있습니다.
+```typescript
+type IdType = number
+type NameType = string
+type UserType = {
+ id: IdType;
+ name: NameType;
+ info: string[]
+}
+
+const user: UserType = {
+ id: 1234;
+ name: "김지훈"
+ info: ["안", "녕"]
+}
+```
+
+### Interface
+인터페이스는 객체의 타입을 정의하는데 큰 도움이 되며 `readonly`을 이용해 읽기 전용 속성을 정의하거나
+`extends`를 이용해 확장할 수 도 있습니다.
+```typescript
+interface User {
+ name: string;
+ age: number;
+ isAdmin: boolean;
+
+}
+
+const user: User = {
+ name: "John",
+ age: 30,
+ isAdmin: true,
+};
+
+```
+```typescript
+ interface User {
+ readonly id: number; // 읽기 전용 속성은 수정할 수 없습니다.
+ name: string;
+ }
+
+ const user: User = { id: 1, name: "Charlie" };
+ user.id = 3; // Cannot assign to 'id' because it is a read-only property.ts(2540)
+```
+```typescript
+interface Animal {
+ name: string;
+}
+
+interface Dog extends Animal {
+ breed: string;
+}
+
+const myDog: Dog = {
+ name: "Buddy",
+ breed: "Golden Retriever",
+};
+```
+
+## 타입 연산자
+
+### keyof
+`key of`는 인덱싱 가능한 타입의 속성 이름들을 유니온 타입으로 적용시킵니다.
+```typescript
+type User = {
+ id: number;
+ name: string;
+ age: number;
+};
+
+type UserKeys = keyof User; // "id" | "name" | "age"
+```
+
+### as
+`as`를 사용하면 컴파일러에 명시적으로 타입을 알려줍니다.
+```typescript
+const value: unknown = "Hello, TypeScript";
+const str = value as string; // unknown → string으로 단언
+
+function add(a: string | number, isNumber: boolean) {
+ if (isNumber) {
+ // Property 'toFixed' does not exist on type 'string | number'.
+ // Property 'toFixed' does not exist on type 'string'.ts(2339)
+ a.toFixed(2);
+
+ (a as number).toFixed(2) // 이상 없음
+ }
+}
+```
+### is
+반환 타입을 좁혀주는 역할을 합니다.
+```typescript
+function isNumber(value: unknown): value is number {
+ return typeof value === "number";
+}
+
+const input: unknown = 123;
+if (isNumber(input)) {
+ console.log(input.toFixed(2)); // input이 number로 타입이 좁혀짐
+}
+```
+### in
+특정 속성이 있는지 확인합니다.
+```typescript
+type Cat = { meow: () => void };
+type Dog = { bark: () => void };
+
+function makeSound(animal: Cat | Dog) {
+ if ("meow" in animal) {
+ animal.meow();
+ } else {
+ animal.bark();
+ }
+}
+```
+### extends
+인터페이스나 제네릭 타입에 확장할 수 있습니다.
+```typescript
+function logLength(value: T): void { // length속성이 있는 변수만 허용함
+ console.log(value.length);
+}
+
+logLength("Hello"); // string은 length 속성이 있음
+logLength([1, 2, 3]); // 배열도 length 속성이 있음
+
+interface Animal {
+ name: string;
+ age: number;
+}
+
+interface Dog extends Animal {
+ breed: string;
+}
+
+const myDog: Dog = {
+ name: "Buddy",
+ age: 3,
+ breed: "Golden Retriever",
+};
+```
+
+### infer
+조건부 타입과 함께 사용되어 타입을 추론합니다.
+```typescript
+type ElementType = T extends (infer U)[] ? U : T;
+
+type A = ElementType; // string
+type B = ElementType; // number
+type C = ElementType; // boolean
+```
+
+### & 와 |
+`&`는 `and`를 의미합니다. `|`는 `or`을 의미합니다
+```typescript
+type Name = { name: string };
+type Age = { age: number };
+type Person = Name & Age;
+
+const person: Person = { name: "Alice", age: 30 };
+
+type Status = "success" | "error" | "pending";
+
+function handleStatus(status: Status) {
+ if (status === "success") {
+ console.log("Success!");
+ } else if (status === "error") {
+ console.log("Error!");
+ }
+}
+```
+### `?` 옵셔널 프로퍼티
+객체 타입에서 필수 속성이 아닌 선택적으로 지정합니다.
+```typescript
+interface User {
+ name: string;
+ age?: number; // 옵셔널 프로퍼티
+}
+
+// age?는 number | undefined 으로 해석됩니다.
+```
+
+## 마치며
+여기까지 타입스크립트의 문법과 타입의 종류에 대해서 정리했는데
+다음 주에는 타입스크립트의 유틸리티 타입에 대해 정리해 보도록 하겠습니다.
+
[타입스크립트 공식문서](https://www.typescriptlang.org/)
\ No newline at end of file
diff --git a/src/content/posts/typeScript/UseContextErr.md b/src/content/posts/typeScript/UseContextErr.md
index 4c3d6ad..0ffebf6 100644
--- a/src/content/posts/typeScript/UseContextErr.md
+++ b/src/content/posts/typeScript/UseContextErr.md
@@ -1,102 +1,102 @@
----
-title: TypeScript 환경에서 createContext 사용하기
-tags: [typeScript]
-date: "2023.08.16"
----
-최근 타입스크립트 환경에서 creactContext를 사용하다 아래와 같은 에러가 발생해 createContext 사용방법과 해결방법을 정리해보려 한다.
-
-```javascript
-
- //ERR
- "Type Object must have a '[Symbol.iterator]()' method that returns an iterator."
-
-
-```
-## creactContext 사용방법
-
-기본적으로 creactContext를 생성해주면 된다.
-
-```javascript
-
- import { createContext } from "react";
-
- interface UserInfoType {
- name: string;
- }
-
- const UserInfoContext = createContext({name: "Kim"});
-
-
-```
-그 이후 구성 요소를 context.Provider 로 래핑 해준뒤 useContext로 호출해 사용할 수 있다.
-
-```javascript
-
- import { useState, useContext } from "react";
-
- const App = () => {
- const [name, setName] = useState({name: "lee"});
-
- return (
-
-
-
- );
- };
-
- const MyComponent = () => {
- const { name } = useContext(UserInfoContext);
-
- return The current name is {name}.
;
- };
-
-
-```
-만약 기본값이 없다면 null으로 지정해주면된다.
-
-```javascript
-
- interface CurrentUserContextType {
- username: string;
- }
-
- const CurrentUserContext = createContext(null);
-
-
-```
-여기서 문제가 발생했는데 .Provider로 래핑해준 후 사용해주려 하니 위와 같은 에러가 발생했다. 이때 런타임 유형 검사를 통해 에러를 방지할 수 있다 혹은 as 빈 객체를 기본값으로 사용하고 예상되는 context 유형으로 캐스트 하는 것 이다.
-
-```javascript
-
- import { createContext } from "react";
-
- interface UserInfoType {
- name: string;
- }
-
- const UserInfoContext = createContext(null);
-
- const useUserInfo = () => {
- const currentContext = useContext(UserInfoContext);
- if (!currentContext) {
- throw new Error(
- "useCurrentUser has to be used within "
- );
- }
-
- return currentContext;
- }
-
- // 또는
-
- interface UserInfoType {
- name: string;
- }
-
- const UserInfoContext = createContext({} as UserInfoType);
-
-
-```
-[https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/)
-
-[https://yamoo9.gitbook.io/typescript/types/type-assertions](https://yamoo9.gitbook.io/typescript/types/type-assertions)
+---
+title: TypeScript 환경에서 createContext 사용하기
+tags: [typeScript]
+date: "2023.08.16"
+---
+최근 타입스크립트 환경에서 creactContext를 사용하다 아래와 같은 에러가 발생해 createContext 사용방법과 해결방법을 정리해보려 한다.
+
+```javascript
+
+ //ERR
+ "Type Object must have a '[Symbol.iterator]()' method that returns an iterator."
+
+
+```
+## creactContext 사용방법
+
+기본적으로 creactContext를 생성해주면 된다.
+
+```javascript
+
+ import { createContext } from "react";
+
+ interface UserInfoType {
+ name: string;
+ }
+
+ const UserInfoContext = createContext({name: "Kim"});
+
+
+```
+그 이후 구성 요소를 context.Provider 로 래핑 해준뒤 useContext로 호출해 사용할 수 있다.
+
+```javascript
+
+ import { useState, useContext } from "react";
+
+ const App = () => {
+ const [name, setName] = useState({name: "lee"});
+
+ return (
+
+
+
+ );
+ };
+
+ const MyComponent = () => {
+ const { name } = useContext(UserInfoContext);
+
+ return The current name is {name}.
;
+ };
+
+
+```
+만약 기본값이 없다면 null으로 지정해주면된다.
+
+```javascript
+
+ interface CurrentUserContextType {
+ username: string;
+ }
+
+ const CurrentUserContext = createContext(null);
+
+
+```
+여기서 문제가 발생했는데 .Provider로 래핑해준 후 사용해주려 하니 위와 같은 에러가 발생했다. 이때 런타임 유형 검사를 통해 에러를 방지할 수 있다 혹은 as 빈 객체를 기본값으로 사용하고 예상되는 context 유형으로 캐스트 하는 것 이다.
+
+```javascript
+
+ import { createContext } from "react";
+
+ interface UserInfoType {
+ name: string;
+ }
+
+ const UserInfoContext = createContext(null);
+
+ const useUserInfo = () => {
+ const currentContext = useContext(UserInfoContext);
+ if (!currentContext) {
+ throw new Error(
+ "useCurrentUser has to be used within "
+ );
+ }
+
+ return currentContext;
+ }
+
+ // 또는
+
+ interface UserInfoType {
+ name: string;
+ }
+
+ const UserInfoContext = createContext({} as UserInfoType);
+
+
+```
+[https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/)
+
+[https://yamoo9.gitbook.io/typescript/types/type-assertions](https://yamoo9.gitbook.io/typescript/types/type-assertions)
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
index 004f868..2b95a3c 100644
--- a/src/contexts/ThemeContext.tsx
+++ b/src/contexts/ThemeContext.tsx
@@ -27,7 +27,7 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
const applyTheme = useCallback((t: Theme) => {
const isSystem = t === "system";
const systemPrefersDark = window.matchMedia(
- "(prefers-color-scheme: dark)",
+ "(prefers-color-scheme: dark)"
).matches;
const finalTheme = isSystem ? (systemPrefersDark ? "dark" : "light") : t;
@@ -42,7 +42,7 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
localStorage.setItem("theme", newTheme);
applyTheme(newTheme);
},
- [applyTheme],
+ [applyTheme]
);
// 초기 테마 설정 + 시스템 테마 변경 감지
@@ -61,7 +61,7 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
const value = useMemo(
() => ({ theme, resolvedTheme, setTheme }),
- [theme, resolvedTheme, setTheme],
+ [theme, resolvedTheme, setTheme]
);
return (
diff --git a/src/lib/client/getBlogData.ts b/src/lib/client/getBlogData.ts
deleted file mode 100644
index fefb213..0000000
--- a/src/lib/client/getBlogData.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { CategoryList, Post, SeriesGroup } from "@/types/posts.types";
-import fs from "fs";
-import path from "path";
-import {
- CATEGORY_JSON_PATH,
- POSTS_JSON_PATH,
- POSTS_OUT_ROOT,
- SERIES_JSON_PATH,
-} from "../paths";
-
-export const getPostMeta = (category: string, post: string): Post => {
- const filePath = path.join(POSTS_JSON_PATH, category, `${post}.json`); // 카테고리 폴더에서 파일 찾기
- const fileContents = fs.readFileSync(filePath, "utf8");
-
- const jsonData = JSON.parse(fileContents);
-
- return jsonData;
-};
-
-export const getPostContent = (htmlFilePath: string): string => {
- const filePath = path.join(POSTS_OUT_ROOT, htmlFilePath);
- const fileContents = fs.readFileSync(filePath, "utf8");
-
- return fileContents;
-};
-
-export const getPostList = (): Post[] => {
- const categories = fs.readdirSync(POSTS_JSON_PATH); // content 폴더 내의 모든 카테고리 이름
- const allPosts: Post[] = [];
-
- categories.forEach((category) => {
- const categoryPath = path.join(POSTS_JSON_PATH, category);
-
- if (fs.statSync(categoryPath).isDirectory()) {
- const fileNames = fs.readdirSync(categoryPath); // 각 카테고리 내의 파일들
-
- fileNames.forEach((fileName) => {
- const filePath = path.join(categoryPath, fileName);
- if (fs.statSync(filePath).isFile()) {
- const fileContents = fs.readFileSync(filePath, "utf8");
-
- const data = JSON.parse(fileContents);
-
- allPosts.push(data);
- }
- });
- }
- });
-
- const sort = allPosts.sort((a, b) => {
- return b.metadata.date.localeCompare(a.metadata.date);
- });
-
- return sort;
-};
-
-export const getCategoryList = (): CategoryList => {
- const fileContents = fs.readFileSync(CATEGORY_JSON_PATH, "utf8");
- const data = JSON.parse(fileContents);
-
- return data;
-};
-
-export const getSeriesGroups = (): SeriesGroup[] => {
- const fileContents = fs.readFileSync(SERIES_JSON_PATH, "utf8");
- const data = JSON.parse(fileContents);
-
- return data;
-};
diff --git a/src/lib/md.ts b/src/lib/md.ts
deleted file mode 100644
index ab3ffbd..0000000
--- a/src/lib/md.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import type { PostMetaData } from "@/types/posts.types";
-import fs from "fs";
-import matter from "gray-matter";
-import path from "path";
-import { remark } from "remark";
-import gfm from "remark-gfm";
-import html from "remark-html";
-
-type Data = {
- [key: string]: string;
-};
-
-/** 첫 번째 마크다운 이미지 → 썸네일 경로 추출 */
-export const getMarkdownThumbnail = (markdown: string): string => {
- const imageRegex = /!\[.*?\]\((.*?)\)/;
- return markdown.match(imageRegex)?.[1] || "/img/thumbnail.png";
-};
-
-export const convertMarkdownToHtml = async (md: string): Promise => {
- const processed = await remark().use(gfm).use(html).process(md);
- return String(processed);
-};
-
-export const parseMarkdownFrontmatter = (filePath: string) => {
- const fileName = path.basename(filePath);
- const slug = fileName.replace(/\.md$/i, "");
- const fileContents = fs.readFileSync(filePath, "utf8");
- const { data, content } = matter(fileContents);
- return { slug, data, content };
-};
-
-export const buildPostMetadata = (
- data: Data,
- content: string
-): PostMetaData => ({
- title: data?.title || "Default Title",
- tags: Array.isArray(data?.tags) ? data.tags : [],
- date: data?.date || "Unknown",
- image: getMarkdownThumbnail(content),
- series: data?.series,
- description: data?.description || "김지훈의 개발 블로그 입니다.",
-});
-
-const buildPostData = async (category: string, filePath: string) => {
- const { slug, data, content } = parseMarkdownFrontmatter(filePath);
- const metadata = buildPostMetadata(data, content);
-
- const htmlFilePath = path.join(category, `${slug}.html`);
- const href = `/blog/${category}/${slug}`;
- const excerpt = content.slice(0, 200);
-
- return {
- category,
- href,
- metadata,
- htmlFilePath,
- excerpt,
- };
-};
-
-export default buildPostData;
diff --git a/src/lib/paths.ts b/src/lib/paths.ts
index c386f02..5b4ec70 100644
--- a/src/lib/paths.ts
+++ b/src/lib/paths.ts
@@ -1,14 +1,23 @@
import path from "path";
-// 게시글 경로
-export const CONTENT_DIR = path.join(process.cwd(), "src/content/posts");
-export const POSTS_OUT_ROOT = path.join(
- process.cwd(),
- "src/content/build/posts"
-);
-
-// 메타 파일 경로
-export const META_OUT_DIR = path.join(process.cwd(), "src/content/build/meta");
-export const CATEGORY_JSON_PATH = path.join(META_OUT_DIR, "category.json");
-export const SERIES_JSON_PATH = path.join(META_OUT_DIR, "series.json");
-export const POSTS_JSON_PATH = path.join(META_OUT_DIR, "/posts");
+// 📂 대분류 및 상세 폴더 상수
+export const CONTENT_DIR = path.join(process.cwd(), "src", "content", "posts");
+export const BUILD_DIR = path.join(process.cwd(), "src", "content", "build");
+
+export const HTML_OUT_DIR = path.join(BUILD_DIR, "html");
+export const JSON_OUT_DIR = path.join(BUILD_DIR, "json");
+
+export const POSTS_HTML_DIR = path.join(HTML_OUT_DIR, "posts");
+export const POSTS_JSON_DIR = path.join(JSON_OUT_DIR, "posts");
+export const SERIES_JSON_DIR = path.join(JSON_OUT_DIR, "series");
+export const CATEGORIES_JSON_PATH = path.join(JSON_OUT_DIR, "categories.json");
+
+// 동적 파일 경로 생성 유틸리티 중앙화
+export const getSeriesFilePath = (slug: string) =>
+ path.join(SERIES_JSON_DIR, `${slug}.json`);
+
+export const getPostJsonFilePath = (category: string, slug: string) =>
+ path.join(POSTS_JSON_DIR, category, `${slug}.json`);
+
+export const getPostHtmlFilePath = (category: string, slug: string) =>
+ path.join(POSTS_HTML_DIR, category, `${slug}.html`);
diff --git a/src/lib/postParser.ts b/src/lib/postParser.ts
new file mode 100644
index 0000000..6885011
--- /dev/null
+++ b/src/lib/postParser.ts
@@ -0,0 +1,73 @@
+import { BLOG_CONFIG } from "@/constants/blogConfig";
+import type { PostMetaData } from "@/types/posts.types";
+import matter from "gray-matter";
+import rehypePrettyCode from "rehype-pretty-code";
+import rehypeSlug from "rehype-slug";
+import rehypeStringify from "rehype-stringify";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+
+type Data = { [key: string]: string };
+
+export const getSeriesThumbnail = (series?: string): string => {
+ if (!series) return BLOG_CONFIG.THUMBNAIL.DEFAULT;
+
+ const formattedKey = series
+ .toUpperCase()
+ .replace(/-/g, "_") as keyof typeof BLOG_CONFIG.THUMBNAIL;
+
+ return BLOG_CONFIG.THUMBNAIL[formattedKey] || BLOG_CONFIG.THUMBNAIL.DEFAULT;
+};
+
+export const getPlainTextExcerpt = (
+ markdown: string,
+ length: number = BLOG_CONFIG.EXCERPT_LENGTH
+): string => {
+ const text = markdown
+ .replace(/```[\s\S]*?```/g, "")
+ .replace(/<[^>]*>?/gm, "")
+ .replace(/!\[.*?\]\(.*?\)/g, "")
+ .replace(/\[(.*?)\]\(.*?\)/g, "$1")
+ .replace(/([*_~`#>]+)/g, "")
+ .replace(/\s+/g, " ")
+ .trim();
+
+ return text.slice(0, length);
+};
+
+// 기존의 convertMarkdownToHtml 함수를 대체합니다.
+export const convertMarkdownToHtml = async (markdown: string) => {
+ const result = await unified()
+ .use(remarkParse) // 1. 마크다운을 AST(추상 구문 트리)로 파싱
+ .use(remarkGfm)
+ .use(remarkRehype) // 2. 마크다운 트리를 HTML 트리로 변환
+ .use(rehypeSlug)
+ .use(rehypePrettyCode, {
+ // 3. rehype-pretty-code 적용 (원하는 Shiki 테마 설정)
+ theme: {
+ light: "github-light",
+ dark: "github-dark",
+ },
+ keepBackground: true, // 테마의 기본 배경색 유지
+ })
+ .use(rehypeStringify) // 4. HTML 트리를 최종 문자열로 변환
+ .process(markdown);
+
+ return result.toString();
+};
+
+export const parseMarkdownFrontmatter = (fileContents: string) => {
+ const { data, content } = matter(fileContents);
+ return { data, content };
+};
+
+export const buildPostMetadata = (data: Data): PostMetaData => ({
+ title: data?.title || "Default Title",
+ tags: Array.isArray(data?.tags) ? data.tags : [],
+ date: data?.date || "Unknown",
+ series: data?.series,
+ image: getSeriesThumbnail(data?.series),
+ description: data?.description || undefined,
+});
diff --git a/src/lib/postService.ts b/src/lib/postService.ts
new file mode 100644
index 0000000..bee0d70
--- /dev/null
+++ b/src/lib/postService.ts
@@ -0,0 +1,97 @@
+import type { Category, Post, Series } from "@/types/posts.types";
+import fs from "fs";
+import path from "path";
+import {
+ CATEGORIES_JSON_PATH,
+ POSTS_JSON_DIR,
+ SERIES_JSON_DIR,
+ getPostHtmlFilePath,
+ getPostJsonFilePath,
+ getSeriesFilePath,
+} from "./paths";
+
+export const getPostMeta = (category: string, post: string): Post => {
+ const filePath = getPostJsonFilePath(category, post);
+ const fileContents = fs.readFileSync(filePath, "utf8");
+
+ return JSON.parse(fileContents);
+};
+
+export const getPostContent = (category: string, post: string): string => {
+ const filePath = getPostHtmlFilePath(category, post);
+ const fileContents = fs.readFileSync(filePath, "utf8");
+
+ return fileContents;
+};
+
+export const getPostDetail = (category: string, post: string) => {
+ const meta = getPostMeta(category, post);
+ const contentHtml = getPostContent(category, post);
+
+ return {
+ post: meta,
+ contentHtml,
+ };
+};
+
+export const getPostList = (): Post[] => {
+ if (!fs.existsSync(POSTS_JSON_DIR)) return [];
+
+ const categories = fs.readdirSync(POSTS_JSON_DIR);
+ const allPosts: Post[] = [];
+
+ categories.forEach((category) => {
+ const categoryPath = path.join(POSTS_JSON_DIR, category);
+
+ if (fs.statSync(categoryPath).isDirectory()) {
+ const fileNames = fs.readdirSync(categoryPath);
+
+ fileNames.forEach((fileName) => {
+ const filePath = path.join(categoryPath, fileName);
+ if (fs.statSync(filePath).isFile() && fileName.endsWith(".json")) {
+ const fileContents = fs.readFileSync(filePath, "utf8");
+ const data = JSON.parse(fileContents);
+ allPosts.push(data);
+ }
+ });
+ }
+ });
+
+ return allPosts.sort((a, b) => {
+ return b.metadata.date.localeCompare(a.metadata.date);
+ });
+};
+
+export const getCategoryList = (): Category[] => {
+ if (!fs.existsSync(CATEGORIES_JSON_PATH)) return [];
+
+ const fileContents = fs.readFileSync(CATEGORIES_JSON_PATH, "utf8");
+ return JSON.parse(fileContents);
+};
+
+export const getSeriesList = (): Series[] => {
+ if (!fs.existsSync(SERIES_JSON_DIR)) return [];
+
+ const fileNames = fs.readdirSync(SERIES_JSON_DIR);
+
+ const allSeries = fileNames
+ .filter((fileName) => fileName.endsWith(".json"))
+ .map((fileName) => {
+ const filePath = path.join(SERIES_JSON_DIR, fileName);
+ const fileContents = fs.readFileSync(filePath, "utf8");
+ return JSON.parse(fileContents) as Series;
+ });
+
+ return allSeries.sort((a, b) => b.lastUpdated.localeCompare(a.lastUpdated));
+};
+
+export const getSeriesBySlug = (seriesSlug: string): Series | null => {
+ const filePath = getSeriesFilePath(seriesSlug);
+
+ if (!fs.existsSync(filePath)) {
+ return null;
+ }
+
+ const fileContents = fs.readFileSync(filePath, "utf8");
+ return JSON.parse(fileContents) as Series;
+};
diff --git a/src/lib/postUtils.ts b/src/lib/postUtils.ts
new file mode 100644
index 0000000..9ed2b5c
--- /dev/null
+++ b/src/lib/postUtils.ts
@@ -0,0 +1,38 @@
+import { CONTENT_DIR } from "@/lib/paths";
+import fs from "fs";
+import path from "path";
+
+export interface PostFileInfo {
+ category: string;
+ fileName: string;
+ filePath: string;
+ slug: string;
+}
+
+/** 모든 마크다운 파일의 경로와 메타 정보를 배열로 추출하는 유틸리티 */
+export const getAllPostFiles = (): PostFileInfo[] => {
+ const dirents = fs.readdirSync(CONTENT_DIR, { withFileTypes: true });
+ const categories = dirents.filter((d) => d.isDirectory()).map((d) => d.name);
+
+ const postFiles: PostFileInfo[] = [];
+
+ for (const category of categories) {
+ const categoryPath = path.join(CONTENT_DIR, category);
+ const files = fs.readdirSync(categoryPath, { withFileTypes: true });
+
+ const mdFiles = files
+ .filter((f) => f.isFile() && f.name.toLowerCase().endsWith(".md"))
+ .map((f) => f.name);
+
+ for (const fileName of mdFiles) {
+ postFiles.push({
+ category,
+ fileName,
+ filePath: path.join(categoryPath, fileName),
+ slug: fileName.replace(/\.md$/i, ""),
+ });
+ }
+ }
+
+ return postFiles;
+};
diff --git a/src/scripts/buildAll.ts b/src/scripts/buildAll.ts
new file mode 100644
index 0000000..8016508
--- /dev/null
+++ b/src/scripts/buildAll.ts
@@ -0,0 +1,25 @@
+import { buildAllPosts } from "./buildAllPosts";
+import { buildCategoriesJson } from "./buildCategory";
+import { buildSeriesJson } from "./buildSeries";
+
+const runAllScripts = async () => {
+ console.time("🚀 통합 프리빌드 총 소요 시간");
+
+ try {
+ // 4개의 독립적인 빌드 작업을 동시에 병렬로 실행! (속도 극대화)
+ await Promise.all([
+ buildAllPosts(),
+ buildSeriesJson(),
+ buildCategoriesJson(),
+ ]);
+ } catch (error) {
+ console.error("❌ 빌드 중 에러가 발생했습니다!", error);
+ process.exit(1);
+ }
+
+ console.log("\n====================================");
+ console.timeEnd("🚀 통합 프리빌드 총 소요 시간");
+ console.log("====================================\n");
+};
+
+runAllScripts();
diff --git a/src/scripts/buildAllPosts.ts b/src/scripts/buildAllPosts.ts
new file mode 100644
index 0000000..0c969a3
--- /dev/null
+++ b/src/scripts/buildAllPosts.ts
@@ -0,0 +1,63 @@
+import { BLOG_CONFIG } from "@/constants/blogConfig";
+import { ROUTES } from "@/constants/routes";
+import {
+ POSTS_HTML_DIR,
+ POSTS_JSON_DIR,
+ getPostHtmlFilePath,
+ getPostJsonFilePath,
+} from "@/lib/paths";
+import {
+ buildPostMetadata,
+ convertMarkdownToHtml,
+ getPlainTextExcerpt,
+ parseMarkdownFrontmatter,
+} from "@/lib/postParser";
+import { getAllPostFiles, type PostFileInfo } from "@/lib/postUtils";
+import type { Post } from "@/types/posts.types";
+import fs from "fs";
+import path from "path";
+
+const processSinglePost = async (fileInfo: PostFileInfo) => {
+ const { category, slug, filePath } = fileInfo;
+
+ const fileContents = fs.readFileSync(filePath, "utf8");
+ const { data, content } = parseMarkdownFrontmatter(fileContents);
+
+ const html = await convertMarkdownToHtml(content);
+ const htmlOutPath = getPostHtmlFilePath(category, slug);
+ fs.writeFileSync(htmlOutPath, html, "utf8");
+
+ const metadata = buildPostMetadata(data);
+ const excerpt = getPlainTextExcerpt(content, BLOG_CONFIG.EXCERPT_LENGTH);
+
+ const postMetaData: Post = {
+ category,
+ href: ROUTES.BLOG.POST(category, slug),
+ metadata,
+ excerpt,
+ };
+
+ const jsonOutPath = getPostJsonFilePath(category, slug);
+ fs.writeFileSync(jsonOutPath, JSON.stringify(postMetaData, null, 2), "utf8");
+};
+
+export const buildAllPosts = async () => {
+ if (fs.existsSync(POSTS_HTML_DIR))
+ fs.rmSync(POSTS_HTML_DIR, { recursive: true, force: true });
+ if (fs.existsSync(POSTS_JSON_DIR))
+ fs.rmSync(POSTS_JSON_DIR, { recursive: true, force: true });
+
+ const postFiles = getAllPostFiles();
+
+ const categories = [...new Set(postFiles.map((f) => f.category))];
+ categories.forEach((category) => {
+ fs.mkdirSync(path.join(POSTS_HTML_DIR, category), { recursive: true });
+ fs.mkdirSync(path.join(POSTS_JSON_DIR, category), { recursive: true });
+ });
+
+ const buildTasks = postFiles.map((fileInfo) => processSinglePost(fileInfo));
+
+ await Promise.all(buildTasks);
+
+ console.log(`✅ 총 ${buildTasks.length}개의 포스트 (HTML & JSON) 빌드 완료!`);
+};
diff --git a/src/scripts/buildCategory.ts b/src/scripts/buildCategory.ts
index ec21bbc..c0f67ce 100644
--- a/src/scripts/buildCategory.ts
+++ b/src/scripts/buildCategory.ts
@@ -1,30 +1,36 @@
-import { CATEGORY_JSON_PATH, CONTENT_DIR } from "@/lib/paths";
-import type { CategoryList } from "@/types/posts.types";
+import { CATEGORIES_JSON_PATH } from "@/lib/paths";
+import { getAllPostFiles } from "@/lib/postUtils";
+import type { Category } from "@/types/posts.types";
import fs from "fs";
import path from "path";
-const buildCategoryJson = () => {
- const dirents = fs.readdirSync(CONTENT_DIR, { withFileTypes: true });
- const categories = dirents
- .filter((dirent) => dirent.isDirectory())
- .map((dirent) => dirent.name);
+export const buildCategoriesJson = () => {
+ const postFiles = getAllPostFiles();
- const result: CategoryList = categories.map((category) => {
- const categoryPath = path.join(CONTENT_DIR, category);
- const files = fs.readdirSync(categoryPath);
- const mdFiles = files.filter((file) => file.toLowerCase().endsWith(".md"));
+ const categoryCounts = postFiles.reduce(
+ (acc, file) => {
+ acc[file.category] = (acc[file.category] || 0) + 1;
+ return acc;
+ },
+ {} as Record
+ );
- return { name: category, count: mdFiles.length };
- });
+ const result: Category[] = Object.entries(categoryCounts).map(
+ ([name, count]) => ({ name, count })
+ );
- const outDir = path.dirname(CATEGORY_JSON_PATH);
+ const outDir = path.dirname(CATEGORIES_JSON_PATH);
if (!fs.existsSync(outDir)) {
fs.mkdirSync(outDir, { recursive: true });
}
- fs.writeFileSync(CATEGORY_JSON_PATH, JSON.stringify(result, null, 2), "utf8");
+ fs.writeFileSync(
+ CATEGORIES_JSON_PATH,
+ JSON.stringify(result, null, 2),
+ "utf8"
+ );
- console.log(`📦 ${CATEGORY_JSON_PATH} 생성 완료`);
+ console.log(
+ `📦 ${CATEGORIES_JSON_PATH} 생성 완료 (${result.length}개 카테고리)`
+ );
};
-
-buildCategoryJson();
diff --git a/src/scripts/buildPost.ts b/src/scripts/buildPost.ts
deleted file mode 100644
index a33e293..0000000
--- a/src/scripts/buildPost.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { convertMarkdownToHtml, parseMarkdownFrontmatter } from "@/lib/md";
-import { CONTENT_DIR, POSTS_OUT_ROOT } from "@/lib/paths";
-import fs from "fs";
-import path from "path";
-
-const buildAllPostsJson = async () => {
- const dirents = fs.readdirSync(CONTENT_DIR, { withFileTypes: true });
- const categories = dirents.filter((d) => d.isDirectory()).map((d) => d.name);
-
- for (const category of categories) {
- const categoryPath = path.join(CONTENT_DIR, category);
-
- const files = fs.readdirSync(categoryPath, { withFileTypes: true });
- const mdFiles = files
- .filter((f) => f.isFile() && f.name.toLowerCase().endsWith(".md"))
- .map((f) => f.name);
-
- for (const fileName of mdFiles) {
- const filePath = path.join(categoryPath, fileName);
-
- const { content, slug } = parseMarkdownFrontmatter(filePath);
-
- const html = await convertMarkdownToHtml(content);
-
- const outPath = path.join(POSTS_OUT_ROOT, category, `${slug}.html`);
- const outDir = path.dirname(outPath);
-
- if (!fs.existsSync(outDir)) {
- fs.mkdirSync(outDir, { recursive: true });
- }
-
- fs.writeFileSync(outPath, html, "utf8");
-
- console.log(`🎉 ${category}/${slug}.html 생성 완료`);
- }
- }
-};
-
-buildAllPostsJson();
diff --git a/src/scripts/buildPostMeta.ts b/src/scripts/buildPostMeta.ts
deleted file mode 100644
index 154d525..0000000
--- a/src/scripts/buildPostMeta.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import buildPostData from "@/lib/md";
-import { CONTENT_DIR, POSTS_JSON_PATH } from "@/lib/paths";
-import fs from "fs";
-import path from "path";
-
-const buildPostMetaJson = async () => {
- const dirents = fs.readdirSync(CONTENT_DIR, { withFileTypes: true });
- const categories = dirents.filter((d) => d.isDirectory()).map((d) => d.name);
-
- for (const category of categories) {
- const categoryPath = path.join(CONTENT_DIR, category);
-
- const files = fs.readdirSync(categoryPath, { withFileTypes: true });
- const mdFiles = files
- .filter((f) => f.isFile() && f.name.toLowerCase().endsWith(".md"))
- .map((f) => f.name);
-
- for (const fileName of mdFiles) {
- const filePath = path.join(categoryPath, fileName);
- const slug = fileName.replace(/\.md$/i, "");
-
- const post = await buildPostData(category, filePath);
-
- const outPath = path.join(POSTS_JSON_PATH, category, `${slug}.json`);
- const outDir = path.dirname(outPath);
-
- if (!fs.existsSync(outDir)) {
- fs.mkdirSync(outDir, { recursive: true });
- }
-
- fs.writeFileSync(outPath, JSON.stringify(post, null, 2), "utf8");
-
- console.log(`🎉 ${category}/${slug}.json 생성 완료`);
- }
- }
-};
-
-buildPostMetaJson();
diff --git a/src/scripts/buildSeries.ts b/src/scripts/buildSeries.ts
index 6928fa3..c3ad73b 100644
--- a/src/scripts/buildSeries.ts
+++ b/src/scripts/buildSeries.ts
@@ -1,61 +1,97 @@
-import buildPostData, { parseMarkdownFrontmatter } from "@/lib/md";
-import { CONTENT_DIR, SERIES_JSON_PATH } from "@/lib/paths";
-import type { SeriesGroup } from "@/types/posts.types";
+import { SERIES_CONFIG, SeriesKey, SeriesValue } from "@/constants/series";
+import { SERIES_JSON_DIR, getSeriesFilePath } from "@/lib/paths";
+import { parseMarkdownFrontmatter } from "@/lib/postParser";
+import { getAllPostFiles } from "@/lib/postUtils";
+import type { Category, Series } from "@/types/posts.types";
import fs from "fs";
import path from "path";
-const buildSeriesJson = async () => {
- const groups = new Map();
+interface SeriesBuilder {
+ series: SeriesKey;
+ seriesName: SeriesValue;
+ posts: { category: string; slug: string; date: string }[];
+}
- const dirents = fs.readdirSync(CONTENT_DIR, { withFileTypes: true });
- const categories = dirents.filter((d) => d.isDirectory()).map((d) => d.name);
+export const buildSeriesJson = async () => {
+ const groups = new Map();
- for (const category of categories) {
- const categoryPath = path.join(CONTENT_DIR, category);
+ const postFiles = getAllPostFiles();
- const files = fs.readdirSync(categoryPath, { withFileTypes: true });
- const mdFiles = files
- .filter((f) => f.isFile() && f.name.toLowerCase().endsWith(".md"))
- .map((f) => f.name);
+ for (const fileInfo of postFiles) {
+ const { category, slug, filePath } = fileInfo;
- for (const fileName of mdFiles) {
- const filePath = path.join(categoryPath, fileName);
+ const fileContents = fs.readFileSync(filePath, "utf8");
+ const { data } = parseMarkdownFrontmatter(fileContents);
- const { data } = parseMarkdownFrontmatter(filePath);
+ const rawSeries =
+ typeof data.series === "string" ? data.series.trim() : null;
+ if (!rawSeries) continue;
- const series =
- typeof data.series === "string" && data.series.trim().length > 0
- ? data.series.trim()
- : null;
+ if (!(rawSeries in SERIES_CONFIG)) {
+ console.warn(
+ `⚠️ 경고: '${rawSeries}'는 등록되지 않은 시리즈입니다. (${filePath})`
+ );
+ continue;
+ }
- if (!series) continue;
+ const seriesSlug = rawSeries as SeriesKey;
+ const seriesName = SERIES_CONFIG[seriesSlug];
- const post = await buildPostData(category, filePath);
+ const miniPost = {
+ category,
+ slug,
+ date: data?.date || "Unknown",
+ };
- const key = series.toLowerCase();
- if (!groups.has(key)) {
- groups.set(key, { series, posts: [] });
- }
- groups.get(key)!.posts.push(post);
+ if (!groups.has(seriesSlug)) {
+ groups.set(seriesSlug, { series: seriesSlug, seriesName, posts: [] });
}
+ groups.get(seriesSlug)!.posts.push(miniPost);
}
- groups.forEach((g) => {
- g.posts.sort((a, b) => b.metadata.date.localeCompare(a.metadata.date));
- });
+ const output: Series[] = Array.from(groups.values())
+ .map((g): Series => {
+ g.posts.sort((a, b) => b.date.localeCompare(a.date));
+ const lastUpdated = g.posts.length > 0 ? g.posts[0].date : "";
- const output = Array.from(groups.values()).sort((a, b) =>
- a.series.localeCompare(b.series, "ko")
- );
+ const categoryMap = new Map();
+ for (const post of g.posts) {
+ const currentCount = categoryMap.get(post.category) || 0;
+ categoryMap.set(post.category, currentCount + 1);
+ }
- const outDir = path.dirname(SERIES_JSON_PATH);
- if (!fs.existsSync(outDir)) {
- fs.mkdirSync(outDir, { recursive: true });
+ const categories: Category[] = Array.from(categoryMap.entries())
+ .map(([name, count]) => ({ name, count }))
+ .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name));
+
+ return {
+ series: g.series,
+ seriesName: g.seriesName,
+ lastUpdated,
+ categories,
+ postRefs: g.posts.map((post) => ({
+ category: post.category,
+ slug: post.slug,
+ })),
+ };
+ })
+ .sort((a, b) => b.lastUpdated.localeCompare(a.lastUpdated));
+
+ if (!fs.existsSync(SERIES_JSON_DIR)) {
+ fs.mkdirSync(SERIES_JSON_DIR, { recursive: true });
+ } else {
+ const oldFiles = fs.readdirSync(SERIES_JSON_DIR);
+ for (const file of oldFiles) {
+ fs.unlinkSync(path.join(SERIES_JSON_DIR, file));
+ }
}
- fs.writeFileSync(SERIES_JSON_PATH, JSON.stringify(output, null, 2), "utf8");
+ for (const seriesData of output) {
+ const outPath = getSeriesFilePath(seriesData.series);
+ fs.writeFileSync(outPath, JSON.stringify(seriesData, null, 2), "utf8");
+ }
- console.log(`📦 ${SERIES_JSON_PATH} 생성 완료`);
+ console.log(
+ `📦 ${SERIES_JSON_DIR} 에 ${output.length}개의 시리즈 파일 생성 완료!`
+ );
};
-
-buildSeriesJson();
diff --git a/src/styles/blog.css b/src/styles/blog.css
deleted file mode 100644
index f410697..0000000
--- a/src/styles/blog.css
+++ /dev/null
@@ -1,37 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
- .shadow-custom-inset {
- --tw-shadow: inset 0 -1px 0 0 var(--eaeaea);
- --tw-shadow-colored: inset 0 -1px 0 0 var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
- var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
- }
-
- .content::before {
- content: "";
- width: 100%;
- height: 100%;
- position: absolute;
- background-color: rgba(43, 193, 188, 0.438);
- opacity: 0;
- z-index: 40;
- transition: opacity 0.35s ease-in-out;
- }
-
- .content:hover::before {
- opacity: 0.3;
- }
-
- .virtual::before {
- content: "";
- width: 2px;
- height: 100%;
- left: 50%;
- top: 34px;
- background-color: #d8d8d8;
- position: absolute;
- }
-}
diff --git a/src/styles/codeblock.css b/src/styles/codeblock.css
new file mode 100644
index 0000000..26ce92b
--- /dev/null
+++ b/src/styles/codeblock.css
@@ -0,0 +1,36 @@
+pre[data-theme] {
+ background-color: transparent;
+ color: var(--shiki-light) !important;
+ padding: 1rem 1.25rem !important;
+ overflow-x: auto;
+ margin: 0 !important;
+}
+
+.dark pre[data-theme] {
+ background-color: transparent;
+ color: var(--shiki-dark) !important;
+}
+
+code[data-theme] span {
+ color: var(--shiki-light);
+}
+
+.dark code[data-theme] span {
+ color: var(--shiki-dark);
+}
+
+pre:not([data-theme]) {
+ background-color: transparent;
+ color: #24292e;
+ overflow-x: auto;
+}
+
+pre:not([data-theme]) code {
+ color: inherit;
+ background-color: transparent;
+}
+
+.dark pre:not([data-theme]) {
+ background-color: transparent;
+ color: #e1e4e8;
+}
diff --git a/src/styles/github.css b/src/styles/github.css
deleted file mode 100644
index 0ccd8b6..0000000
--- a/src/styles/github.css
+++ /dev/null
@@ -1,238 +0,0 @@
-pre code.hljs {
- display: block;
- overflow-x: auto;
- padding: 2em;
-}
-
-code.hljs {
- padding: 3px 5px;
-}
-/*!
- Theme: GitHub
- Description: Light theme as seen on github.com
- Author: github.com
- Maintainer: @Hirse
- Updated: 2021-05-15
-
- Outdated base version: https://github.com/primer/github-syntax-light
- Current colors taken from GitHub's CSS
-*/
-.hljs {
- color: #24292e;
- background: #f6f8fa;
-}
-.hljs-doctag,
-.hljs-keyword,
-.hljs-meta .hljs-keyword,
-.hljs-template-tag,
-.hljs-template-variable,
-.hljs-type,
-.hljs-variable.language_ {
- /* prettylights-syntax-keyword */
- color: #d73a49;
-}
-.hljs-title,
-.hljs-title.class_,
-.hljs-title.class_.inherited__,
-.hljs-title.function_ {
- /* prettylights-syntax-entity */
- color: #6f42c1;
-}
-.hljs-attr,
-.hljs-attribute,
-.hljs-literal,
-.hljs-meta,
-.hljs-number,
-.hljs-operator,
-.hljs-variable,
-.hljs-selector-attr,
-.hljs-selector-class,
-.hljs-selector-id {
- /* prettylights-syntax-constant */
- color: #005cc5;
-}
-.hljs-regexp,
-.hljs-string,
-.hljs-meta .hljs-string {
- /* prettylights-syntax-string */
- color: #032f62;
-}
-.hljs-built_in,
-.hljs-symbol {
- /* prettylights-syntax-variable */
- color: #e36209;
-}
-.hljs-comment,
-.hljs-code,
-.hljs-formula {
- /* prettylights-syntax-comment */
- color: #6a737d;
-}
-.hljs-name,
-.hljs-quote,
-.hljs-selector-tag,
-.hljs-selector-pseudo {
- /* prettylights-syntax-entity-tag */
- color: #22863a;
-}
-.hljs-subst {
- /* prettylights-syntax-storage-modifier-import */
- color: #24292e;
-}
-.hljs-section {
- /* prettylights-syntax-markup-heading */
- color: #005cc5;
- font-weight: bold;
-}
-.hljs-bullet {
- /* prettylights-syntax-markup-list */
- color: #735c0f;
-}
-.hljs-emphasis {
- /* prettylights-syntax-markup-italic */
- color: #24292e;
- font-style: italic;
-}
-.hljs-strong {
- /* prettylights-syntax-markup-bold */
- color: #24292e;
- font-weight: bold;
-}
-.hljs-addition {
- /* prettylights-syntax-markup-inserted */
- color: #22863a;
- background-color: #f0fff4;
-}
-.hljs-deletion {
- /* prettylights-syntax-markup-deleted */
- color: #b31d28;
- background-color: #ffeef0;
-}
-/* .hljs-char.escape_,
-.hljs-link,
-.hljs-params,
-.hljs-property,
-.hljs-punctuation,
-.hljs-tag {
-
-} */
-
-.dark {
- pre code.hljs {
- display: block;
- overflow-x: auto;
- padding: 1em;
- }
- code.hljs {
- padding: 3px 5px;
- }
- /*!
- Theme: GitHub Dark
- Description: Dark theme as seen on github.com
- Author: github.com
- Maintainer: @Hirse
- Updated: 2021-05-15
-
- Outdated base version: https://github.com/primer/github-syntax-dark
- Current colors taken from GitHub's CSS
-*/
- .hljs {
- color: #c9d1d9;
- background: #0d1117;
- }
- .hljs-doctag,
- .hljs-keyword,
- .hljs-meta .hljs-keyword,
- .hljs-template-tag,
- .hljs-template-variable,
- .hljs-type,
- .hljs-variable.language_ {
- /* prettylights-syntax-keyword */
- color: #ff7b72;
- }
- .hljs-title,
- .hljs-title.class_,
- .hljs-title.class_.inherited__,
- .hljs-title.function_ {
- /* prettylights-syntax-entity */
- color: #d2a8ff;
- }
- .hljs-attr,
- .hljs-attribute,
- .hljs-literal,
- .hljs-meta,
- .hljs-number,
- .hljs-operator,
- .hljs-variable,
- .hljs-selector-attr,
- .hljs-selector-class,
- .hljs-selector-id {
- /* prettylights-syntax-constant */
- color: #79c0ff;
- }
- .hljs-regexp,
- .hljs-string,
- .hljs-meta .hljs-string {
- /* prettylights-syntax-string */
- color: #a5d6ff;
- }
- .hljs-built_in,
- .hljs-symbol {
- /* prettylights-syntax-variable */
- color: #ffa657;
- }
- .hljs-comment,
- .hljs-code,
- .hljs-formula {
- /* prettylights-syntax-comment */
- color: #8b949e;
- }
- .hljs-name,
- .hljs-quote,
- .hljs-selector-tag,
- .hljs-selector-pseudo {
- /* prettylights-syntax-entity-tag */
- color: #7ee787;
- }
- .hljs-subst {
- /* prettylights-syntax-storage-modifier-import */
- color: #c9d1d9;
- }
- .hljs-section {
- /* prettylights-syntax-markup-heading */
- color: #1f6feb;
- font-weight: bold;
- }
- .hljs-bullet {
- /* prettylights-syntax-markup-list */
- color: #f2cc60;
- }
- .hljs-emphasis {
- /* prettylights-syntax-markup-italic */
- color: #c9d1d9;
- font-style: italic;
- }
- .hljs-strong {
- /* prettylights-syntax-markup-bold */
- color: #c9d1d9;
- font-weight: bold;
- }
- .hljs-addition {
- /* prettylights-syntax-markup-inserted */
- color: #aff5b4;
- background-color: #033a16;
- }
- .hljs-deletion {
- /* prettylights-syntax-markup-deleted */
- color: #ffdcd7;
- background-color: #67060c;
- }
- /* .hljs-char.escape_,
- .hljs-link,
- .hljs-params,
- .hljs-property,
- .hljs-punctuation,
- .hljs-tag {
-
- } */
-}
diff --git a/src/styles/highlight.css b/src/styles/highlight.css
deleted file mode 100644
index e2b8f36..0000000
--- a/src/styles/highlight.css
+++ /dev/null
@@ -1,1032 +0,0 @@
-.dark .markdown-body {
- color-scheme: dark;
- --color-prettylights-syntax-comment: #8b949e;
- --color-prettylights-syntax-constant: #79c0ff;
- --color-prettylights-syntax-entity: #d2a8ff;
- --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
- --color-prettylights-syntax-entity-tag: #7ee787;
- --color-prettylights-syntax-keyword: #ff7b72;
- --color-prettylights-syntax-string: #a5d6ff;
- --color-prettylights-syntax-variable: #ffa657;
- --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
- --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
- --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
- --color-prettylights-syntax-carriage-return-text: #f0f6fc;
- --color-prettylights-syntax-carriage-return-bg: #b62324;
- --color-prettylights-syntax-string-regexp: #7ee787;
- --color-prettylights-syntax-markup-list: #f2cc60;
- --color-prettylights-syntax-markup-heading: #1f6feb;
- --color-prettylights-syntax-markup-italic: #c9d1d9;
- --color-prettylights-syntax-markup-bold: #c9d1d9;
- --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
- --color-prettylights-syntax-markup-deleted-bg: #67060c;
- --color-prettylights-syntax-markup-inserted-text: #aff5b4;
- --color-prettylights-syntax-markup-inserted-bg: #033a16;
- --color-prettylights-syntax-markup-changed-text: #ffdfb6;
- --color-prettylights-syntax-markup-changed-bg: #5a1e02;
- --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
- --color-prettylights-syntax-markup-ignored-bg: #1158c7;
- --color-prettylights-syntax-meta-diff-range: #d2a8ff;
- --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
- --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
- --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
- --color-fg-default: #c9d1d9;
- --color-fg-muted: #8b949e;
- --color-fg-subtle: #484f58;
- --color-canvas-default: inherit;
- --color-canvas-subtle: #0d1117;
- --color-border-default: #30363d;
- --color-border-muted: #21262d;
- --color-neutral-muted: rgba(110, 118, 129, 0.4);
- --color-accent-fg: #58a6ff;
- --color-accent-emphasis: #1f6feb;
- --color-attention-subtle: rgba(187, 128, 9, 0.15);
- --color-danger-fg: #f85149;
-}
-
-h2,
-h3 {
- scroll-margin-top: 80px;
-}
-
-.markdown-body {
- color-scheme: light;
- --color-prettylights-syntax-comment: #6e7781;
- --color-prettylights-syntax-constant: #0550ae;
- --color-prettylights-syntax-entity: #8250df;
- --color-prettylights-syntax-storage-modifier-import: #24292f;
- --color-prettylights-syntax-entity-tag: #116329;
- --color-prettylights-syntax-keyword: #cf222e;
- --color-prettylights-syntax-string: #0a3069;
- --color-prettylights-syntax-variable: #953800;
- --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
- --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
- --color-prettylights-syntax-invalid-illegal-bg: #82071e;
- --color-prettylights-syntax-carriage-return-text: #f6f8fa;
- --color-prettylights-syntax-carriage-return-bg: #cf222e;
- --color-prettylights-syntax-string-regexp: #116329;
- --color-prettylights-syntax-markup-list: #3b2300;
- --color-prettylights-syntax-markup-heading: #0550ae;
- --color-prettylights-syntax-markup-italic: #24292f;
- --color-prettylights-syntax-markup-bold: #24292f;
- --color-prettylights-syntax-markup-deleted-text: #82071e;
- --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
- --color-prettylights-syntax-markup-inserted-text: #116329;
- --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
- --color-prettylights-syntax-markup-changed-text: #953800;
- --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
- --color-prettylights-syntax-markup-ignored-text: #eaeef2;
- --color-prettylights-syntax-markup-ignored-bg: #0550ae;
- --color-prettylights-syntax-meta-diff-range: #8250df;
- --color-prettylights-syntax-brackethighlighter-angle: #57606a;
- --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
- --color-prettylights-syntax-constant-other-reference-link: #0a3069;
- --color-fg-default: #24292f;
- --color-fg-muted: #57606a;
- --color-fg-subtle: #6e7781;
- --color-canvas-default: #ffffff;
- --color-canvas-subtle: #f6f8fa;
- --color-border-default: #d0d7de;
- --color-border-muted: hsla(210, 18%, 87%, 1);
- --color-neutral-muted: rgba(175, 184, 193, 0.2);
- --color-accent-fg: #0969da;
- --color-accent-emphasis: #0969da;
- --color-attention-subtle: #fff8c5;
- --color-danger-fg: #cf222e;
-}
-
-.markdown-body {
- -ms-text-size-adjust: 100%;
- -webkit-text-size-adjust: 100%;
- margin: 0;
- color: var(--color-fg-default);
- background-color: var(--color-canvas-default);
- font-size: 16px;
- line-height: 1.5;
- word-wrap: break-word;
-}
-
-.markdown-body .octicon {
- display: inline-block;
- fill: currentColor;
- vertical-align: text-bottom;
-}
-
-.markdown-body h1:hover .anchor .octicon-link:before,
-.markdown-body h2:hover .anchor .octicon-link:before,
-.markdown-body h3:hover .anchor .octicon-link:before,
-.markdown-body h4:hover .anchor .octicon-link:before,
-.markdown-body h5:hover .anchor .octicon-link:before,
-.markdown-body h6:hover .anchor .octicon-link:before {
- width: 16px;
- height: 16px;
- content: " ";
- display: inline-block;
- background-color: currentColor;
- -webkit-mask-image: url("data:image/svg+xml,");
- mask-image: url("data:image/svg+xml,");
-}
-
-.markdown-body details,
-.markdown-body figcaption,
-.markdown-body figure {
- display: block;
-}
-
-.markdown-body summary {
- display: list-item;
-}
-
-.markdown-body [hidden] {
- display: none !important;
-}
-
-.markdown-body a {
- background-color: transparent;
- color: var(--color-fg-muted);
- text-decoration: none;
-}
-
-.markdown-body a:active,
-.markdown-body a:hover {
- outline-width: 0;
-}
-
-.markdown-body abbr[title] {
- border-bottom: none;
- text-decoration: underline dotted;
-}
-
-.markdown-body b,
-.markdown-body strong {
- font-weight: 600;
-}
-
-.markdown-body dfn {
- font-style: italic;
-}
-
-.markdown-body h1 {
- margin: 0.67em 0;
- font-weight: 600;
- padding-bottom: 0.3em;
- font-size: 2em;
- border-bottom: 1px solid var(--color-border-muted);
-}
-
-.markdown-body mark {
- background-color: var(--color-attention-subtle);
- color: var(--color-text-primary);
-}
-
-.markdown-body small {
- font-size: 90%;
-}
-
-.markdown-body sub,
-.markdown-body sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-
-.markdown-body sub {
- bottom: -0.25em;
-}
-
-.markdown-body sup {
- top: -0.5em;
-}
-
-.markdown-body img {
- border-style: none;
- max-width: 100%;
- box-sizing: content-box;
- background-color: var(--color-canvas-default);
-}
-
-.markdown-body code,
-.markdown-body kbd,
-.markdown-body pre,
-.markdown-body samp {
- font-family: monospace, monospace;
- font-size: 1em;
-}
-
-.markdown-body figure {
- margin: 1em 40px;
-}
-
-.markdown-body hr {
- box-sizing: content-box;
- overflow: hidden;
- background: transparent;
- border-bottom: 1px solid var(--color-border-muted);
- height: 0.25em;
- padding: 0;
- margin: 24px 0;
- background-color: var(--color-border-default);
- border: 0;
-}
-
-.markdown-body input {
- font: inherit;
- margin: 0;
- overflow: visible;
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
-}
-
-.markdown-body [type="button"]::-moz-focus-inner,
-.markdown-body [type="reset"]::-moz-focus-inner,
-.markdown-body [type="submit"]::-moz-focus-inner {
- border-style: none;
- padding: 0;
-}
-
-.markdown-body [type="button"]:-moz-focusring,
-.markdown-body [type="reset"]:-moz-focusring,
-.markdown-body [type="submit"]:-moz-focusring {
- outline: 1px dotted ButtonText;
-}
-
-.markdown-body [type="checkbox"],
-.markdown-body [type="radio"] {
- box-sizing: border-box;
- padding: 0;
-}
-
-.markdown-body [type="number"]::-webkit-inner-spin-button,
-.markdown-body [type="number"]::-webkit-outer-spin-button {
- height: auto;
-}
-
-.markdown-body [type="search"] {
- outline-offset: -2px;
-}
-
-.markdown-body [type="search"]::-webkit-search-cancel-button,
-.markdown-body [type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-
-.markdown-body ::-webkit-input-placeholder {
- color: inherit;
- opacity: 0.54;
-}
-
-.markdown-body ::-webkit-file-upload-button {
- -webkit-appearance: button;
- font: inherit;
-}
-
-.markdown-body a:hover {
- text-decoration: underline;
-}
-
-.markdown-body hr::before {
- display: table;
- content: "";
-}
-
-.markdown-body hr::after {
- display: table;
- clear: both;
- content: "";
-}
-
-.markdown-body table {
- border-spacing: 0;
- border-collapse: collapse;
- display: block;
- width: max-content;
- max-width: 100%;
- overflow: auto;
-}
-
-.markdown-body td,
-.markdown-body th {
- padding: 0;
-}
-
-.markdown-body details summary {
- cursor: pointer;
-}
-
-.markdown-body details:not([open]) > *:not(summary) {
- display: none !important;
-}
-
-.markdown-body kbd {
- display: inline-block;
- padding: 3px 5px;
- font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
- Liberation Mono, monospace;
- line-height: 10px;
- color: var(--color-fg-default);
- vertical-align: middle;
- background-color: var(--color-canvas-subtle);
- border: solid 1px var(--color-neutral-muted);
- border-bottom-color: var(--color-neutral-muted);
- border-radius: 6px;
- box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
-}
-
-.markdown-body h1,
-.markdown-body h2,
-.markdown-body h3,
-.markdown-body h4,
-.markdown-body h5,
-.markdown-body h6 {
- margin-top: 24px;
- margin-bottom: 16px;
- font-weight: 600;
- line-height: 1.25;
-}
-
-.markdown-body h2 {
- font-weight: 600;
- padding-bottom: 0.3em;
- font-size: 1.5em;
- border-bottom: 1px solid var(--color-border-muted);
-}
-
-.markdown-body h3 {
- font-weight: 600;
- font-size: 1.25em;
-}
-
-.markdown-body h4 {
- font-weight: 600;
- font-size: 1em;
-}
-
-.markdown-body h5 {
- font-weight: 600;
- font-size: 0.875em;
-}
-
-.markdown-body h6 {
- font-weight: 600;
- font-size: 0.85em;
- color: var(--color-fg-muted);
-}
-
-.markdown-body p {
- margin-top: 0;
- margin-bottom: 10px;
-}
-
-.markdown-body blockquote {
- margin: 0;
- padding: 0 1em;
- color: var(--color-fg-muted);
- border-left: 0.25em solid var(--color-border-default);
-}
-
-.markdown-body ul,
-.markdown-body ol {
- margin-top: 0;
- margin-bottom: 0;
- padding-left: 2em;
-}
-
-.markdown-body ol ol,
-.markdown-body ul ol {
- list-style-type: lower-roman;
-}
-
-.markdown-body ul ul ol,
-.markdown-body ul ol ol,
-.markdown-body ol ul ol,
-.markdown-body ol ol ol {
- list-style-type: lower-alpha;
-}
-
-.markdown-body dd {
- margin-left: 0;
-}
-
-.markdown-body tt,
-.markdown-body code {
- font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
- Liberation Mono, monospace;
- font-size: 12px;
-}
-
-.markdown-body pre {
- margin-top: 0;
- margin-bottom: 0;
- font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
- Liberation Mono, monospace;
- font-size: 12px;
- word-wrap: normal;
-}
-
-.markdown-body .octicon {
- display: inline-block;
- overflow: visible !important;
- vertical-align: text-bottom;
- fill: currentColor;
-}
-
-.markdown-body ::placeholder {
- color: var(--color-fg-subtle);
- opacity: 1;
-}
-
-.markdown-body input::-webkit-outer-spin-button,
-.markdown-body input::-webkit-inner-spin-button {
- margin: 0;
- -webkit-appearance: none;
- appearance: none;
-}
-
-.markdown-body .pl-c {
- color: var(--color-prettylights-syntax-comment);
-}
-
-.markdown-body .pl-c1,
-.markdown-body .pl-s .pl-v {
- color: var(--color-prettylights-syntax-constant);
-}
-
-.markdown-body .pl-e,
-.markdown-body .pl-en {
- color: var(--color-prettylights-syntax-entity);
-}
-
-.markdown-body .pl-smi,
-.markdown-body .pl-s .pl-s1 {
- color: var(--color-prettylights-syntax-storage-modifier-import);
-}
-
-.markdown-body .pl-ent {
- color: var(--color-prettylights-syntax-entity-tag);
-}
-
-.markdown-body .pl-k {
- color: var(--color-prettylights-syntax-keyword);
-}
-
-.markdown-body .pl-s,
-.markdown-body .pl-pds,
-.markdown-body .pl-s .pl-pse .pl-s1,
-.markdown-body .pl-sr,
-.markdown-body .pl-sr .pl-cce,
-.markdown-body .pl-sr .pl-sre,
-.markdown-body .pl-sr .pl-sra {
- color: var(--color-prettylights-syntax-string);
-}
-
-.markdown-body .pl-v,
-.markdown-body .pl-smw {
- color: var(--color-prettylights-syntax-variable);
-}
-
-.markdown-body .pl-bu {
- color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
-}
-
-.markdown-body .pl-ii {
- color: var(--color-prettylights-syntax-invalid-illegal-text);
- background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
-}
-
-.markdown-body .pl-c2 {
- color: var(--color-prettylights-syntax-carriage-return-text);
- background-color: var(--color-prettylights-syntax-carriage-return-bg);
-}
-
-.markdown-body .pl-sr .pl-cce {
- font-weight: bold;
- color: var(--color-prettylights-syntax-string-regexp);
-}
-
-.markdown-body .pl-ml {
- color: var(--color-prettylights-syntax-markup-list);
-}
-
-.markdown-body .pl-mh,
-.markdown-body .pl-mh .pl-en,
-.markdown-body .pl-ms {
- font-weight: bold;
- color: var(--color-prettylights-syntax-markup-heading);
-}
-
-.markdown-body .pl-mi {
- font-style: italic;
- color: var(--color-prettylights-syntax-markup-italic);
-}
-
-.markdown-body .pl-mb {
- font-weight: bold;
- color: var(--color-prettylights-syntax-markup-bold);
-}
-
-.markdown-body .pl-md {
- color: var(--color-prettylights-syntax-markup-deleted-text);
- background-color: var(--color-prettylights-syntax-markup-deleted-bg);
-}
-
-.markdown-body .pl-mi1 {
- color: var(--color-prettylights-syntax-markup-inserted-text);
- background-color: var(--color-prettylights-syntax-markup-inserted-bg);
-}
-
-.markdown-body .pl-mc {
- color: var(--color-prettylights-syntax-markup-changed-text);
- background-color: var(--color-prettylights-syntax-markup-changed-bg);
-}
-
-.markdown-body .pl-mi2 {
- color: var(--color-prettylights-syntax-markup-ignored-text);
- background-color: var(--color-prettylights-syntax-markup-ignored-bg);
-}
-
-.markdown-body .pl-mdr {
- font-weight: bold;
- color: var(--color-prettylights-syntax-meta-diff-range);
-}
-
-.markdown-body .pl-ba {
- color: var(--color-prettylights-syntax-brackethighlighter-angle);
-}
-
-.markdown-body .pl-sg {
- color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
-}
-
-.markdown-body .pl-corl {
- text-decoration: underline;
- color: var(--color-prettylights-syntax-constant-other-reference-link);
-}
-
-.markdown-body [data-catalyst] {
- display: block;
-}
-
-.markdown-body g-emoji {
- font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
- font-size: 1em;
- font-style: normal !important;
- font-weight: 400;
- line-height: 1;
- vertical-align: -0.075em;
-}
-
-.markdown-body g-emoji img {
- width: 1em;
- height: 1em;
-}
-
-.markdown-body::before {
- display: table;
- content: "";
-}
-
-.markdown-body::after {
- display: table;
- clear: both;
- content: "";
-}
-
-.markdown-body > *:first-child {
- margin-top: 0 !important;
-}
-
-.markdown-body > *:last-child {
- margin-bottom: 0 !important;
-}
-
-.markdown-body a:not([href]) {
- color: inherit;
- text-decoration: none;
-}
-
-.markdown-body .absent {
- color: var(--color-danger-fg);
-}
-
-.markdown-body .anchor {
- float: left;
- padding-right: 4px;
- margin-left: -20px;
- line-height: 1;
-}
-
-.markdown-body .anchor:focus {
- outline: none;
-}
-
-.markdown-body p,
-.markdown-body blockquote,
-.markdown-body ul,
-.markdown-body ol,
-.markdown-body dl,
-.markdown-body table,
-.markdown-body pre,
-.markdown-body details {
- margin-top: 0;
- margin-bottom: 16px;
-}
-
-.markdown-body blockquote > :first-child {
- margin-top: 0;
-}
-
-.markdown-body blockquote > :last-child {
- margin-bottom: 0;
-}
-
-.markdown-body sup > a::before {
- content: "[";
-}
-
-.markdown-body sup > a::after {
- content: "]";
-}
-
-.markdown-body h1 .octicon-link,
-.markdown-body h2 .octicon-link,
-.markdown-body h3 .octicon-link,
-.markdown-body h4 .octicon-link,
-.markdown-body h5 .octicon-link,
-.markdown-body h6 .octicon-link {
- color: var(--color-fg-default);
- vertical-align: middle;
- visibility: hidden;
-}
-
-.markdown-body h1:hover .anchor,
-.markdown-body h2:hover .anchor,
-.markdown-body h3:hover .anchor,
-.markdown-body h4:hover .anchor,
-.markdown-body h5:hover .anchor,
-.markdown-body h6:hover .anchor {
- text-decoration: none;
-}
-
-.markdown-body h1:hover .anchor .octicon-link,
-.markdown-body h2:hover .anchor .octicon-link,
-.markdown-body h3:hover .anchor .octicon-link,
-.markdown-body h4:hover .anchor .octicon-link,
-.markdown-body h5:hover .anchor .octicon-link,
-.markdown-body h6:hover .anchor .octicon-link {
- visibility: visible;
-}
-
-.markdown-body h1 tt,
-.markdown-body h1 code,
-.markdown-body h2 tt,
-.markdown-body h2 code,
-.markdown-body h3 tt,
-.markdown-body h3 code,
-.markdown-body h4 tt,
-.markdown-body h4 code,
-.markdown-body h5 tt,
-.markdown-body h5 code,
-.markdown-body h6 tt,
-.markdown-body h6 code {
- padding: 0 0.2em;
- font-size: inherit;
-}
-
-.markdown-body ul.no-list,
-.markdown-body ol.no-list {
- padding: 0;
- list-style-type: none;
-}
-
-.markdown-body ol[type="1"] {
- list-style-type: decimal;
-}
-
-.markdown-body ol[type="a"] {
- list-style-type: lower-alpha;
-}
-
-.markdown-body ol[type="i"] {
- list-style-type: lower-roman;
-}
-
-.markdown-body div > ol:not([type]) {
- list-style-type: decimal;
-}
-
-.markdown-body ul ul,
-.markdown-body ul ol,
-.markdown-body ol ol,
-.markdown-body ol ul {
- margin-top: 0;
- margin-bottom: 0;
-}
-
-.markdown-body li > p {
- margin-top: 16px;
-}
-
-.markdown-body li + li {
- margin-top: 0.25em;
-}
-
-.markdown-body dl {
- padding: 0;
-}
-
-.markdown-body dl dt {
- padding: 0;
- margin-top: 16px;
- font-size: 1em;
- font-style: italic;
- font-weight: 600;
-}
-
-.markdown-body dl dd {
- padding: 0 16px;
- margin-bottom: 16px;
-}
-
-.markdown-body table th {
- font-weight: 600;
-}
-
-.markdown-body table th,
-.markdown-body table td {
- padding: 6px 13px;
- border: 1px solid var(--color-border-default);
-}
-
-.markdown-body table tr {
- background-color: var(--color-canvas-default);
- border-top: 1px solid var(--color-border-muted);
-}
-
-.markdown-body table tr:nth-child(2n) {
- background-color: var(--color-canvas-subtle);
-}
-
-.markdown-body table img {
- background-color: transparent;
-}
-
-.markdown-body img[align="right"] {
- padding-left: 20px;
-}
-
-.markdown-body img[align="left"] {
- padding-right: 20px;
-}
-
-.markdown-body .emoji {
- max-width: none;
- vertical-align: text-top;
- background-color: transparent;
-}
-
-.markdown-body span.frame {
- display: block;
- overflow: hidden;
-}
-
-.markdown-body span.frame > span {
- display: block;
- float: left;
- width: auto;
- padding: 7px;
- margin: 13px 0 0;
- overflow: hidden;
- border: 1px solid var(--color-border-default);
-}
-
-.markdown-body span.frame span img {
- display: block;
- float: left;
-}
-
-.markdown-body span.frame span span {
- display: block;
- padding: 5px 0 0;
- clear: both;
- color: var(--color-fg-default);
-}
-
-.markdown-body span.align-center {
- display: block;
- overflow: hidden;
- clear: both;
-}
-
-.markdown-body span.align-center > span {
- display: block;
- margin: 13px auto 0;
- overflow: hidden;
- text-align: center;
-}
-
-.markdown-body span.align-center span img {
- margin: 0 auto;
- text-align: center;
-}
-
-.markdown-body span.align-right {
- display: block;
- overflow: hidden;
- clear: both;
-}
-
-.markdown-body span.align-right > span {
- display: block;
- margin: 13px 0 0;
- overflow: hidden;
- text-align: right;
-}
-
-.markdown-body span.align-right span img {
- margin: 0;
- text-align: right;
-}
-
-.markdown-body span.float-left {
- display: block;
- float: left;
- margin-right: 13px;
- overflow: hidden;
-}
-
-.markdown-body span.float-left span {
- margin: 13px 0 0;
-}
-
-.markdown-body span.float-right {
- display: block;
- float: right;
- margin-left: 13px;
- overflow: hidden;
-}
-
-.markdown-body span.float-right > span {
- display: block;
- margin: 13px auto 0;
- overflow: hidden;
- text-align: right;
-}
-
-.markdown-body code,
-.markdown-body tt {
- padding: 0.2em 0.4em;
- margin: 0;
- font-size: 85%;
- background-color: var(--color-neutral-muted);
- border-radius: 6px;
-}
-
-.markdown-body code br,
-.markdown-body tt br {
- display: none;
-}
-
-.markdown-body del code {
- text-decoration: inherit;
-}
-
-.markdown-body pre code {
- font-size: 100%;
-}
-
-.markdown-body pre > code {
- padding: 0;
- margin: 0;
- word-break: normal;
- white-space: pre;
- background: transparent;
- border: 0;
-}
-
-.markdown-body .highlight {
- margin-bottom: 16px;
-}
-
-.markdown-body .highlight pre {
- margin-bottom: 0;
- word-break: normal;
-}
-
-.markdown-body .highlight pre,
-.markdown-body pre {
- padding: 16px;
- overflow: auto;
- font-size: 85%;
- line-height: 1.45;
- background-color: var(--color-canvas-subtle);
- border-radius: 6px;
-}
-
-.markdown-body pre code,
-.markdown-body pre tt {
- display: inline;
- max-width: auto;
- padding: 0;
- margin: 0;
- overflow: visible;
- line-height: inherit;
- word-wrap: normal;
- background-color: transparent;
- border: 0;
-}
-
-.markdown-body .csv-data td,
-.markdown-body .csv-data th {
- padding: 5px;
- overflow: hidden;
- font-size: 12px;
- line-height: 1;
- text-align: left;
- white-space: nowrap;
-}
-
-.markdown-body .csv-data .blob-num {
- padding: 10px 8px 9px;
- text-align: right;
- background: var(--color-canvas-default);
- border: 0;
-}
-
-.markdown-body .csv-data tr {
- border-top: 0;
-}
-
-.markdown-body .csv-data th {
- font-weight: 600;
- background: var(--color-canvas-subtle);
- border-top: 0;
-}
-
-.markdown-body .footnotes {
- font-size: 12px;
- color: var(--color-fg-muted);
- border-top: 1px solid var(--color-border-default);
-}
-
-.markdown-body .footnotes ol {
- padding-left: 16px;
-}
-
-.markdown-body .footnotes li {
- position: relative;
-}
-
-.markdown-body .footnotes li:target::before {
- position: absolute;
- top: -8px;
- right: -8px;
- bottom: -8px;
- left: -24px;
- pointer-events: none;
- content: "";
- border: 2px solid var(--color-accent-emphasis);
- border-radius: 6px;
-}
-
-.markdown-body .footnotes li:target {
- color: var(--color-fg-default);
-}
-
-.markdown-body .footnotes .data-footnote-backref g-emoji {
- font-family: monospace;
-}
-
-.markdown-body .task-list-item {
- list-style-type: none;
-}
-
-.markdown-body .task-list-item label {
- font-weight: 400;
-}
-
-.markdown-body .task-list-item.enabled label {
- cursor: pointer;
-}
-
-.markdown-body .task-list-item + .task-list-item {
- margin-top: 3px;
-}
-
-.markdown-body .task-list-item .handle {
- display: none;
-}
-
-.markdown-body .task-list-item-checkbox {
- margin: 0 0.2em 0.25em -1.6em;
- vertical-align: middle;
-}
-
-.markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
- margin: 0 -1.6em 0.25em 0.2em;
-}
-
-.markdown-body ::-webkit-calendar-picker-indicator {
- filter: invert(50%);
-}
diff --git a/src/styles/home.css b/src/styles/home.css
deleted file mode 100644
index 7e4c677..0000000
--- a/src/styles/home.css
+++ /dev/null
@@ -1,181 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
- /* Keyframes (전역 재사용) */
- @keyframes fadeIn {
- from {
- transform: scale(1.2);
- }
- to {
- transform: scale(1);
- }
- }
- @keyframes fade {
- from {
- transform: scale(1);
- }
- to {
- transform: scale(1.1);
- }
- }
- @keyframes fadeIn-project {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
- @keyframes fadeOut-project {
- from {
- opacity: 1;
- transform: translateY(0);
- }
- to {
- opacity: 0;
- transform: translateY(20px);
- }
- }
- @keyframes fadeUp {
- from {
- opacity: 0;
- transform: translateY(24px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
- @keyframes fadeRight {
- from {
- opacity: 0;
- transform: translateX(100px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
- }
- @keyframes scaleIn {
- from {
- transform: scale(1);
- }
- to {
- transform: scale(1.08);
- }
- }
- @keyframes dropDown {
- from {
- height: 0px;
- }
- to {
- height: 40px;
- }
- }
-}
-
-@layer components {
- .blur-ball {
- @apply bg-[#DBB8F7] blur-[100px] rounded-full absolute;
- }
-
- .blur-ball--1 {
- @apply w-1/3 h-2/5 -rotate-45 -top-10 -left-10;
- }
-
- .blur-ball--2 {
- @apply w-2/5 h-2/5 -rotate-12 -top-8 left-12;
- }
-
- .blur-ball--3 {
- @apply size-1/3 -top-28 left-1/2 border-[16px] border-[#FFF859];
- }
-
- @screen sm {
- .blur-ball--1 {
- @apply w-1/2 h-2/3 -rotate-45 -top-20 -left-1/4;
- }
-
- .blur-ball--2 {
- @apply w-1/2 h-2/5 -rotate-12 -top-32 left-24;
- }
-
- .blur-ball--3 {
- @apply size-1/3 -top-40 left-96 border-[24px] border-[#FFF859];
- }
- }
-
- .section-container {
- @apply lg:w-[1024px] lg:py-20 md:w-[768px] md:py-16 w-[100%] px-6 py-12;
- }
-
- .section-title {
- @apply text-[#efeff1] text-4xl font-black pb-11 text-center;
- }
-
- .section-item-wrapper {
- @apply flex items-center;
- }
-
- .sub-title {
- @apply text-2xl font-bold mb-1;
- }
-}
-
-@layer utilities {
- .noise-before {
- @apply relative;
- }
-
- .noise-before:before {
- content: "";
- position: absolute;
- inset: 0;
- pointer-events: none;
- opacity: 0.3;
- background-repeat: no-repeat;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
- }
-
- .fade-sequence {
- animation: fadeIn 1s linear forwards, fade 2s linear 1.2s infinite alternate;
- }
-
- .fade-in-project {
- opacity: 0;
- animation: fadeIn-project 0.3s ease-out forwards;
- }
-
- .fade-out-project {
- opacity: 0;
- animation: fadeIn-project 0.3s ease-out forwards;
- }
-
- .reveal {
- animation: 1s fadeUp linear both;
- will-change: opacity, transform;
- }
-
- /* (선택) 약간 더 늦게/빠르게 재생하는 변형 */
- .reveal-slow {
- animation-range: entry 10% cover 60%;
- }
- .reveal-fast {
- animation-range: entry 0% cover 25%;
- }
-
- .reveal-left {
- opacity: 1;
- animation: fadeRight linear both;
- animation-timeline: scroll();
- }
-
- .drop-down {
- transition: all;
- animation: dropDown ease-in-out 0.18s alternate;
- }
-}
diff --git a/src/styles/post.css b/src/styles/post.css
deleted file mode 100644
index d950820..0000000
--- a/src/styles/post.css
+++ /dev/null
@@ -1,83 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
- ul {
- list-style: disc;
- }
-
- ol {
- list-style: decimal;
- }
-}
-
-@layer utilities {
- .copy-button {
- position: absolute;
- top: 8px;
- right: 8px;
- padding: 4px 8px;
- font-size: 12px;
- border-radius: 4px;
- cursor: pointer;
- transition: background-color 0.3s ease; /* 부드러운 색상 변화 */
- }
-
- .copy-button:hover {
- background-color: #e5e7eb; /* 마우스 호버 시 색상 변경 */
- }
-
- .check-button {
- position: absolute;
- top: 8px;
- right: 8px;
- padding: 4px 8px;
- font-size: 12px;
- border-radius: 4px;
- cursor: pointer;
- transition: background-color 0.3s ease;
- background-color: #4caf50; /* 녹색 배경 */
- color: white; /* 텍스트 색은 흰색 */
- border-color: #45a049; /* 테두리 색 */
- font-size: 14px;
- }
-
- /* WebKit (Chrome, Edge, Safari) */
- .toc::-webkit-scrollbar {
- width: 2px;
- border-radius: 1px;
- background-color: #e7e9ec;
- }
-
- .toc::-webkit-scrollbar-thumb {
- background: #585858; /* gray-300 */
- border-radius: 9999px;
- }
-
- html.dark .toc::-webkit-scrollbar {
- background-color: #353535;
- }
-
- html.dark .toc::-webkit-scrollbar-thumb {
- background: #ececec; /* gray-600 (dark) */
- }
-
- .markdown-body {
- box-sizing: border-box;
- min-width: 200px;
- max-width: 980px;
- padding: 8px 16px;
- }
-
- .icon {
- width: 24px;
- height: 24px;
- }
-
- @media (max-width: 767px) {
- .markdown-body {
- padding: 15px;
- }
- }
-}
diff --git a/src/styles/prose.css b/src/styles/prose.css
new file mode 100644
index 0000000..56321ab
--- /dev/null
+++ b/src/styles/prose.css
@@ -0,0 +1,10 @@
+.prose th,
+.prose td {
+ @apply border border-gray-300 dark:border-gray-700;
+ @apply px-4 py-2 text-center align-middle;
+}
+
+.prose th img,
+.prose td img {
+ @apply mx-auto my-0 h-auto max-w-full;
+}
diff --git a/src/styles/typography.css b/src/styles/typography.css
new file mode 100644
index 0000000..8e0c1dc
--- /dev/null
+++ b/src/styles/typography.css
@@ -0,0 +1,153 @@
+@utility typo-11-m {
+ font-size: 11px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-11-b {
+ font-size: 11px;
+ font-weight: 700;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-12-m {
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-12-b {
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-13-m {
+ font-size: 13px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-13-b {
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-14-m {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-14-b {
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-16-m {
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-16-b {
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-18-m {
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-18-b {
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-20-m {
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-20-b {
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-24-m {
+ font-size: 24px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-24-b {
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-32-m {
+ font-size: 32px;
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-32-b {
+ font-size: 32px;
+ font-weight: 700;
+ line-height: 1;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-14-body-m {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1.4;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-16-body-m {
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 1.4;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-18-body-b {
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 1.4;
+ letter-spacing: -0.025em;
+}
+
+@utility typo-20-body-b {
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 1.6;
+ letter-spacing: -0.025em;
+}
diff --git a/src/svg/ArrowHeadSVG.tsx b/src/svg/ArrowHeadSVG.tsx
index e342dcc..6495013 100644
--- a/src/svg/ArrowHeadSVG.tsx
+++ b/src/svg/ArrowHeadSVG.tsx
@@ -1,7 +1,5 @@
-import { memo } from "react";
-
interface ArrowHeadSVGProps {
- className: string;
+ className?: string;
}
const ArrowHeadSVG = ({ className = "" }: ArrowHeadSVGProps) => {
@@ -16,4 +14,4 @@ const ArrowHeadSVG = ({ className = "" }: ArrowHeadSVGProps) => {
);
};
-export default memo(ArrowHeadSVG);
+export default ArrowHeadSVG;
diff --git a/src/svg/BriefcaseBusinessSvg.tsx b/src/svg/BriefcaseBusinessSvg.tsx
index 314920a..87fcf80 100644
--- a/src/svg/BriefcaseBusinessSvg.tsx
+++ b/src/svg/BriefcaseBusinessSvg.tsx
@@ -1,34 +1,34 @@
-import { SVGAttributes } from "react";
-
-interface BriefcaseBusinessSvgProps extends SVGAttributes {
- size?: number;
-}
-
-const BriefcaseBusinessSvg = ({
- size = 24,
- ...props
-}: BriefcaseBusinessSvgProps) => {
- return (
-
- );
-};
-
-export default BriefcaseBusinessSvg;
+import { SVGAttributes } from "react";
+
+interface BriefcaseBusinessSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const BriefcaseBusinessSvg = ({
+ size = 24,
+ ...props
+}: BriefcaseBusinessSvgProps) => {
+ return (
+
+ );
+};
+
+export default BriefcaseBusinessSvg;
diff --git a/src/svg/CalendarDays.tsx b/src/svg/CalendarDays.tsx
index f909fc3..4a5f5b6 100644
--- a/src/svg/CalendarDays.tsx
+++ b/src/svg/CalendarDays.tsx
@@ -1,37 +1,37 @@
-import { SVGAttributes } from "react";
-
-interface CalendarDaysSvgProps extends SVGAttributes {
- size?: number;
-}
-
-const CalendarDaysSvg = ({ size = 24, ...props }: CalendarDaysSvgProps) => {
- return (
-
- );
-};
-
-export default CalendarDaysSvg;
+import { SVGAttributes } from "react";
+
+interface CalendarDaysSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const CalendarDaysSvg = ({ size = 24, ...props }: CalendarDaysSvgProps) => {
+ return (
+
+ );
+};
+
+export default CalendarDaysSvg;
diff --git a/src/svg/ChevronDownSvg.tsx b/src/svg/ChevronDownSvg.tsx
index 76306b3..5b75e2b 100644
--- a/src/svg/ChevronDownSvg.tsx
+++ b/src/svg/ChevronDownSvg.tsx
@@ -1,28 +1,28 @@
-import { SVGAttributes } from "react";
-
-interface ChevronDownSvgProps extends SVGAttributes {
- size?: number;
-}
-
-const ChevronDownSvg = ({ size = 24, ...props }: ChevronDownSvgProps) => {
- return (
-
- );
-};
-
-export default ChevronDownSvg;
+import { SVGAttributes } from "react";
+
+interface ChevronDownSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const ChevronDownSvg = ({ size = 24, ...props }: ChevronDownSvgProps) => {
+ return (
+
+ );
+};
+
+export default ChevronDownSvg;
diff --git a/src/svg/GithubSvg.tsx b/src/svg/GithubSvg.tsx
index 6a6aba4..4bee823 100644
--- a/src/svg/GithubSvg.tsx
+++ b/src/svg/GithubSvg.tsx
@@ -1,29 +1,29 @@
-import { SVGAttributes } from "react";
-
-interface GithubSvgProps extends SVGAttributes {
- size?: number;
-}
-
-const GithubSvg = ({ size = 24, ...props }: GithubSvgProps) => {
- return (
-
- );
-};
-
-export default GithubSvg;
+import { SVGAttributes } from "react";
+
+interface GithubSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const GithubSvg = ({ size = 24, ...props }: GithubSvgProps) => {
+ return (
+
+ );
+};
+
+export default GithubSvg;
diff --git a/src/svg/GraduationCapSvg.tsx b/src/svg/GraduationCapSvg.tsx
index fc2545e..ed62a99 100644
--- a/src/svg/GraduationCapSvg.tsx
+++ b/src/svg/GraduationCapSvg.tsx
@@ -1,30 +1,30 @@
-import { SVGAttributes } from "react";
-
-interface GraduationCapSvgProps extends SVGAttributes {
- size?: number;
-}
-
-const GraduationCapSvg = ({ size = 24, ...props }: GraduationCapSvgProps) => {
- return (
-
- );
-};
-
-export default GraduationCapSvg;
+import { SVGAttributes } from "react";
+
+interface GraduationCapSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const GraduationCapSvg = ({ size = 24, ...props }: GraduationCapSvgProps) => {
+ return (
+
+ );
+};
+
+export default GraduationCapSvg;
diff --git a/src/svg/LaptopSvg.tsx b/src/svg/LaptopSvg.tsx
index 8922f64..4f7b85d 100644
--- a/src/svg/LaptopSvg.tsx
+++ b/src/svg/LaptopSvg.tsx
@@ -1,29 +1,29 @@
-import { SVGAttributes } from "react";
-
-interface LaptopSvgProps extends SVGAttributes {
- size?: number;
-}
-
-const LaptopSvg = ({ size = 24, ...props }: LaptopSvgProps) => {
- return (
-
- );
-};
-
-export default LaptopSvg;
+import { SVGAttributes } from "react";
+
+interface LaptopSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const LaptopSvg = ({ size = 24, ...props }: LaptopSvgProps) => {
+ return (
+
+ );
+};
+
+export default LaptopSvg;
diff --git a/src/svg/LinkSvg.tsx b/src/svg/LinkSvg.tsx
index 0a18f56..8da2229 100644
--- a/src/svg/LinkSvg.tsx
+++ b/src/svg/LinkSvg.tsx
@@ -1,29 +1,29 @@
-import { SVGAttributes } from "react";
-
-interface LinkSvgProps extends SVGAttributes {
- size?: number;
-}
-
-const LinkSvg = ({ size = 24, ...props }: LinkSvgProps) => {
- return (
-
- );
-};
-
-export default LinkSvg;
+import { SVGAttributes } from "react";
+
+interface LinkSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const LinkSvg = ({ size = 24, ...props }: LinkSvgProps) => {
+ return (
+
+ );
+};
+
+export default LinkSvg;
diff --git a/src/svg/MoonSvg.tsx b/src/svg/MoonSvg.tsx
new file mode 100644
index 0000000..8b01f04
--- /dev/null
+++ b/src/svg/MoonSvg.tsx
@@ -0,0 +1,28 @@
+import { SVGAttributes } from "react";
+
+interface MoonSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const MoonSvg = ({ size = 24, ...props }: MoonSvgProps) => {
+ return (
+
+ );
+};
+
+export default MoonSvg;
diff --git a/src/svg/RssSvg.tsx b/src/svg/RssSvg.tsx
index e022d43..962a51e 100644
--- a/src/svg/RssSvg.tsx
+++ b/src/svg/RssSvg.tsx
@@ -1,29 +1,29 @@
-import { SVGAttributes } from "react";
-
-interface RssSvgProps extends SVGAttributes {
- size?: number;
-}
-
-const RssSvg = ({ size = 24, ...props }: RssSvgProps) => {
- return (
-
- );
-};
-export default RssSvg;
+import { SVGAttributes } from "react";
+
+interface RssSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const RssSvg = ({ size = 24, ...props }: RssSvgProps) => {
+ return (
+
+ );
+};
+export default RssSvg;
diff --git a/src/svg/SunSvg.tsx b/src/svg/SunSvg.tsx
new file mode 100644
index 0000000..6770165
--- /dev/null
+++ b/src/svg/SunSvg.tsx
@@ -0,0 +1,36 @@
+import { SVGAttributes } from "react";
+
+interface SunSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const SunSvg = ({ size = 24, ...props }: SunSvgProps) => {
+ return (
+
+ );
+};
+
+export default SunSvg;
diff --git a/src/svg/SystemSvg.tsx b/src/svg/SystemSvg.tsx
new file mode 100644
index 0000000..de093c1
--- /dev/null
+++ b/src/svg/SystemSvg.tsx
@@ -0,0 +1,39 @@
+import { SVGAttributes } from "react";
+
+interface SystemSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const SystemSvg = ({ size = 24, ...props }: SystemSvgProps) => {
+ return (
+
+ );
+};
+
+export default SystemSvg;
diff --git a/src/types/portfolio.ts b/src/types/portfolio.ts
index e48aabd..cf034a2 100644
--- a/src/types/portfolio.ts
+++ b/src/types/portfolio.ts
@@ -1,72 +1,72 @@
-import { ElementType } from "react";
-
-export type Languages = "JavaScript (ES6+)" | "TypeScript" | "HTML5/CSS3";
-
-export type FrontendLibs = "React" | "Next.js";
-
-export type StylingUtils = "Tailwind CSS" | "Emotion" | "Styled-components";
-
-export type StateManagement =
- | "Zustand"
- | "Recoil"
- | "TanStack Query"
- | "React Query";
-
-export type BackendTech =
- | "Node.js"
- | "Express"
- | "Socket.io"
- | "Discord.js"
- | "Nexon Open API";
-
-export type Infra = "Vercel" | "AWS (EC2)";
-
-export type Tools =
- | "Git & GitHub"
- | "VS Code"
- | "Figma"
- | "Notion"
- | "Husky"
- | "ESLint & Prettier";
-
-export type Tech =
- | Languages
- | FrontendLibs
- | StylingUtils
- | StateManagement
- | BackendTech
- | Infra
- | Tools;
-
-export interface ProjectLink {
- icon: ElementType;
- link: string;
- label?: string;
-}
-
-export interface Project {
- title: string;
- period: string;
- description: string;
- tech: Tech[];
- links: ProjectLink[];
- image: string;
-}
-
-export interface Interview {
- question: string;
- answer: string;
-}
-
-export interface Education {
- name: string;
- period: string;
- desc: string;
-}
-
-export interface Career {
- name: string;
- team: string;
- period: string;
- desc: string;
-}
+import { ElementType } from "react";
+
+export type Languages = "JavaScript (ES6+)" | "TypeScript" | "HTML5/CSS3";
+
+export type FrontendLibs = "React" | "Next.js";
+
+export type StylingUtils = "Tailwind CSS" | "Emotion" | "Styled-components";
+
+export type StateManagement =
+ | "Zustand"
+ | "Recoil"
+ | "TanStack Query"
+ | "React Query";
+
+export type BackendTech =
+ | "Node.js"
+ | "Express"
+ | "Socket.io"
+ | "Discord.js"
+ | "Nexon Open API";
+
+export type Infra = "Vercel" | "AWS (EC2)";
+
+export type Tools =
+ | "Git & GitHub"
+ | "VS Code"
+ | "Figma"
+ | "Notion"
+ | "Husky"
+ | "ESLint & Prettier";
+
+export type Tech =
+ | Languages
+ | FrontendLibs
+ | StylingUtils
+ | StateManagement
+ | BackendTech
+ | Infra
+ | Tools;
+
+export interface ProjectLink {
+ icon: ElementType;
+ link: string;
+ label?: string;
+}
+
+export interface Project {
+ title: string;
+ period: string;
+ description: string;
+ tech: Tech[];
+ links: ProjectLink[];
+ image: string;
+}
+
+export interface Interview {
+ question: string;
+ answer: string;
+}
+
+export interface Education {
+ name: string;
+ period: string;
+ desc: string;
+}
+
+export interface Career {
+ name: string;
+ team: string;
+ period: string;
+ desc: string;
+}
diff --git a/src/types/posts.types.d.ts b/src/types/posts.types.d.ts
index 07d50b8..9a19a15 100644
--- a/src/types/posts.types.d.ts
+++ b/src/types/posts.types.d.ts
@@ -1,3 +1,5 @@
+import { SeriesValue } from "@/constants/series";
+
export type PostMetaData = {
title: string;
tags: string[];
@@ -10,16 +12,16 @@ export type PostMetaData = {
export type Post = {
metadata: PostMetaData;
category: string;
- href: string; // /blog//
- htmlFilePath: string; // 이 게시글의 HTML 파일 경로
- excerpt: string; // 미리보기 텍스트
+ href: string;
+ excerpt: string;
};
-export type CategoryItem = { name: string; count: number };
-
-export type CategoryList = CategoryItem[];
+export type Category = { name: string; count: number };
-export type SeriesGroup = {
- series: string;
- posts: Post[];
-};
+export interface Series {
+ series: SeriesKey;
+ seriesName: SeriesValue;
+ lastUpdated: string;
+ categories: Category[];
+ postRefs: { category: string; slug: string }[];
+}
diff --git a/src/utils/cn.ts b/src/utils/cn.ts
new file mode 100644
index 0000000..36afe8b
--- /dev/null
+++ b/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export const cn = (...inputs: ClassValue[]) => {
+ return twMerge(clsx(inputs));
+};
diff --git a/src/utils/getLanguageName.ts b/src/utils/getLanguageName.ts
new file mode 100644
index 0000000..0508ef7
--- /dev/null
+++ b/src/utils/getLanguageName.ts
@@ -0,0 +1,19 @@
+export const getLanguageName = (lang: string | null | undefined) => {
+ if (!lang) return "Code";
+ const normalizedLang = lang.toLowerCase();
+ const langMap: Record = {
+ js: "JavaScript",
+ javascript: "JavaScript",
+ ts: "TypeScript",
+ typescript: "TypeScript",
+ jsx: "React (JSX)",
+ tsx: "React (TSX)",
+ html: "HTML",
+ css: "CSS",
+ python: "Python",
+ bash: "Terminal",
+ sh: "Terminal",
+ json: "JSON",
+ };
+ return langMap[normalizedLang] || normalizedLang.toUpperCase();
+};
diff --git a/src/utils/getTextContent.ts b/src/utils/getTextContent.ts
new file mode 100644
index 0000000..dfc8c08
--- /dev/null
+++ b/src/utils/getTextContent.ts
@@ -0,0 +1,15 @@
+import { DOMNode } from "html-react-parser";
+
+export const getTextContent = (node: DOMNode): string => {
+ if (node.type === "text" && "data" in node) {
+ return node.data as string;
+ }
+
+ if ("children" in node && Array.isArray(node.children)) {
+ return node.children
+ .map((child) => getTextContent(child as DOMNode))
+ .join("");
+ }
+
+ return "";
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index 6ec2aaa..0000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,365 +0,0 @@
-import type { Config } from "tailwindcss";
-import plugin from "tailwindcss/plugin"; // 플러그인 임포트 추가
-
-export default {
- content: [
- "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
- "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
- "./src/content/**/*.md",
- "./src/**/*.{js,ts,jsx,tsx,mdx}",
- ],
- darkMode: "class",
- theme: {
- extend: {
- fontSize: {
- "title-2xl": ["72px", "90px"],
- "title-xl": ["60px", "72px"],
- "title-lg": ["48px", "60px"],
- "title-md": ["36px", "44px"],
- "title-sm": ["30px", "38px"],
- "theme-xl": ["20px", "30px"],
- "theme-sm": ["14px", "20px"],
- "theme-xs": ["12px", "18px"],
- },
- colors: {
- background: "var(--background)",
- foreground: "var(--foreground)",
- current: "currentColor",
- transparent: "transparent",
- white: "#FFFFFF",
-
- black: "#101828",
- brand: {
- 25: "#F2F7FF",
- 50: "#ECF3FF",
- 100: "#DDE9FF",
- 200: "#C2D6FF",
- 300: "#9CB9FF",
- 400: "#7592FF",
- 500: "#465FFF",
- 600: "#3641F5",
- 700: "#2A31D8",
- 800: "#252DAE",
- 900: "#262E89",
- 950: "#161950",
- },
- "blue-light": {
- 25: "#F5FBFF",
- 50: "#F0F9FF",
- 100: "#E0F2FE",
- 200: "#B9E6FE",
- 300: "#7CD4FD",
- 400: "#36BFFA",
- 500: "#0BA5EC",
- 600: "#0086C9",
- 700: "#026AA2",
- 800: "#065986",
- 900: "#0B4A6F",
- 950: "#062C41",
- },
- gray: {
- dark: "#1A2231",
- 25: "#FCFCFD",
- 50: "#F9FAFB",
- 100: "#F2F4F7",
- 200: "#E4E7EC",
- 300: "#D0D5DD",
- 400: "#98A2B3",
- 500: "#667085",
- 600: "#475467",
- 700: "#344054",
- 800: "#1D2939",
- 900: "#101828",
- 950: "#0C111D",
- },
- orange: {
- 25: "#FFFAF5",
- 50: "#FFF6ED",
- 100: "#FFEAD5",
- 200: "#FDDCAB",
- 300: "#FEB273",
- 400: "#FD853A",
- 500: "#FB6514",
- 600: "#EC4A0A",
- 700: "#C4320A",
- 800: "#9C2A10",
- 900: "#7E2410",
- 950: "#511C10",
- },
- success: {
- 25: "#F6FEF9",
- 50: "#ECFDF3",
- 100: "#D1FADF",
- 200: "#A6F4C5",
- 300: "#6CE9A6",
- 400: "#32D583",
- 500: "#12B76A",
- 600: "#039855",
- 700: "#027A48",
- 800: "#05603A",
- 900: "#054F31",
- 950: "#053321",
- },
- error: {
- 25: "#FFFBFA",
- 50: "#FEF3F2",
- 100: "#FEE4E2",
- 200: "#FECDCA",
- 300: "#FDA29B",
- 400: "#F97066",
- 500: "#F04438",
- 600: "#D92D20",
- 700: "#B42318",
- 800: "#912018",
- 900: "#7A271A",
- 950: "#55160C",
- },
- warning: {
- 25: "#FFFCF5",
- 50: "#FFFAEB",
- 100: "#FEF0C7",
- 200: "#FEDF89",
- 300: "#FEC84B",
- 400: "#FDB022",
- 500: "#F79009",
- 600: "#DC6803",
- 700: "#B54708",
- 800: "#93370D",
- 900: "#7A2E0E",
- 950: "#4E1D09",
- },
- "theme-pink": {
- 500: "#EE46BC",
- },
- "theme-purple": {
- 500: "#7A5AF8",
- },
- },
- maxWidth: {
- 1400: "1400px",
- 1024: "1024px",
- },
- backdropBlur: {
- custom: "7px",
- },
- backgroundSize: {
- "auto-0.5rem": "auto 0.5rem",
- "auto-0rem": "auto 0rem",
- },
- backdropSaturate: {
- custom: "180%",
- },
- dropShadow: {
- "4xl": [
- "0 35px 35px rgba(0, 0, 0, 0.25)",
- "0 45px 65px rgba(0, 0, 0, 0.15)",
- ],
- },
- zIndex: {
- 999999: "999999",
- 99999: "99999",
- 9999: "9999",
- 999: "999",
- 99: "99",
- 9: "9",
- 1: "1",
- },
- spacing: {
- 4.5: "1.125rem",
- 5.5: "1.375rem",
- 6.5: "1.625rem",
- 7.5: "1.875rem",
- 8.5: "2.125rem",
- 9.5: "2.375rem",
- 10.5: "2.625rem",
- 11.5: "2.875rem",
- 12.5: "3.125rem",
- 13: "3.25rem",
- 13.5: "3.375rem",
- 14.5: "3.625rem",
- 15: "3.75rem",
- },
- boxShadow: {
- "theme-md":
- "0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)",
- "theme-lg":
- "0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)",
-
- "theme-sm":
- "0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06)",
- "theme-xs": "0px 1px 2px 0px rgba(16, 24, 40, 0.05)",
- "theme-xl":
- "0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03)",
- datepicker: "-5px 0 0 #262d3c, 5px 0 0 #262d3c",
- "focus-ring": "0px 0px 0px 4px rgba(70, 95, 255, 0.12)",
- "slider-navigation":
- "0px 1px 2px 0px rgba(16, 24, 40, 0.10), 0px 1px 3px 0px rgba(16, 24, 40, 0.10)",
- tooltip:
- "0px 4px 6px -2px rgba(16, 24, 40, 0.05), -8px 0px 20px 8px rgba(16, 24, 40, 0.05)",
- "custom-inset": "inset 0 -1px 0 0 var(--eaeaea)",
- },
- },
- },
- plugins: [
- require("tailwindcss-filters"),
-
- // 추가된 타이포그래피 유틸리티 플러그인
- plugin(function ({ addUtilities }) {
- const newUtilities = {
- /* 11px */
- ".typo-11-m": {
- fontSize: "11px",
- fontWeight: "500",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
- ".typo-11-b": {
- fontSize: "11px",
- fontWeight: "700",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
-
- /* 12px */
- ".typo-12-m": {
- fontSize: "12px",
- fontWeight: "500",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
- ".typo-12-b": {
- fontSize: "12px",
- fontWeight: "700",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
-
- /* 13px */
- ".typo-13-m": {
- fontSize: "13px",
- fontWeight: "500",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
- ".typo-13-b": {
- fontSize: "13px",
- fontWeight: "700",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
-
- /* 14px */
- ".typo-14-m": {
- fontSize: "14px",
- fontWeight: "500",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
- ".typo-14-b": {
- fontSize: "14px",
- fontWeight: "700",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
-
- /* 16px */
- ".typo-16-m": {
- fontSize: "16px",
- fontWeight: "500",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
- ".typo-16-b": {
- fontSize: "16px",
- fontWeight: "700",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
-
- /* 18px */
- ".typo-18-m": {
- fontSize: "18px",
- fontWeight: "500",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
- ".typo-18-b": {
- fontSize: "18px",
- fontWeight: "700",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
-
- /* 20px */
- ".typo-20-m": {
- fontSize: "20px",
- fontWeight: "500",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
- ".typo-20-b": {
- fontSize: "20px",
- fontWeight: "700",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
-
- /* 24px */
- ".typo-24-m": {
- fontSize: "24px",
- fontWeight: "500",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
- ".typo-24-b": {
- fontSize: "24px",
- fontWeight: "700",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
-
- /* 32px */
- ".typo-32-m": {
- fontSize: "32px",
- fontWeight: "500",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
- ".typo-32-b": {
- fontSize: "32px",
- fontWeight: "700",
- lineHeight: "1",
- letterSpacing: "-0.025em",
- },
-
- /* Body 규칙 */
- ".typo-14-body-m": {
- fontSize: "14px",
- fontWeight: "500",
- lineHeight: "1.4",
- letterSpacing: "-0.025em",
- },
- ".typo-16-body-m": {
- fontSize: "16px",
- fontWeight: "500",
- lineHeight: "1.4",
- letterSpacing: "-0.025em",
- },
- ".typo-18-body-b": {
- fontSize: "18px",
- fontWeight: "700",
- lineHeight: "1.4",
- letterSpacing: "-0.025em",
- },
- ".typo-20-body-b": {
- fontSize: "20px",
- fontWeight: "700",
- lineHeight: "1.6",
- letterSpacing: "-0.025em",
- },
- };
-
- addUtilities(newUtilities);
- }),
- ],
-} satisfies Config;
- spde3289
- 